mirror of
https://github.com/A-Star100/simpliplay-desktop.git
synced 2025-09-17 22:29:38 +00:00
refactor player.js
This commit is contained in:
Anirudh Sevugan
GitHub
parent
34431af1dc
commit
be137f829d
@ -1,411 +1,264 @@
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
|
||||
const dialogOverlay = document.getElementById('dialogOverlay');
|
||||
const chooseFileBtn = document.getElementById('chooseFileBtn');
|
||||
const enterUrlBtn = document.getElementById('enterUrlBtn');
|
||||
const fileInput = document.getElementById('fileInput');
|
||||
const mediaPlayer = document.getElementById('mediaPlayer');
|
||||
const playPauseBtn = document.getElementById('playPauseBtn');
|
||||
const seekBar = document.getElementById('seekBar');
|
||||
const timeDisplay = document.getElementById('timeDisplay');
|
||||
const volumeBar = document.getElementById('volumeBar');
|
||||
const settingsBtn = document.getElementById('settingsBtn');
|
||||
const settingsPanel = document.getElementById('settingsPanel');
|
||||
const autoplayCheckbox = document.getElementById('autoplayCheckbox');
|
||||
const loopCheckbox = document.getElementById('loopCheckbox');
|
||||
const saveSettingsBtn = document.getElementById('saveSettingsBtn');
|
||||
const urlDialogOverlay = document.getElementById('urlDialogOverlay');
|
||||
const settingsDialogOverlay = document.getElementById('settingsDialogOverlay');
|
||||
const urlInput = document.getElementById('urlInput');
|
||||
const submitUrlBtn = document.getElementById('submitUrlBtn');
|
||||
const cancelUrlBtn = document.getElementById('cancelUrlBtn');
|
||||
const ccBtn = document.getElementById('ccBtn'); // CC button
|
||||
const volumeBtn = document.getElementById("volumeBtn")
|
||||
const subtitlesOverlay = document.getElementById('subtitlesOverlay');
|
||||
const subtitlesInput = document.getElementById('subtitlesInput');
|
||||
const submitSubtitlesBtn = document.getElementById('submitSubtitlesBtn');
|
||||
const cancelSubtitlesBtn = document.getElementById('cancelSubtitlesBtn');
|
||||
const customControls = document.getElementById('customControls');
|
||||
let hls = null
|
||||
let player = null
|
||||
window.hls = hls;
|
||||
window.dash = player;
|
||||
// --- 1. Element Grouping & State Management ---
|
||||
const elements = {
|
||||
media: {
|
||||
player: document.getElementById('mediaPlayer'),
|
||||
customControls: document.getElementById('customControls'),
|
||||
playPauseBtn: document.getElementById('playPauseBtn'),
|
||||
seekBar: document.getElementById('seekBar'),
|
||||
timeDisplay: document.getElementById('timeDisplay'),
|
||||
},
|
||||
volume: {
|
||||
volumeBtn: document.getElementById('volumeBtn'),
|
||||
volumeBar: document.getElementById('volumeBar'),
|
||||
},
|
||||
dialogs: {
|
||||
mainOverlay: document.getElementById('dialogOverlay'),
|
||||
urlOverlay: document.getElementById('urlDialogOverlay'),
|
||||
settingsOverlay: document.getElementById('settingsDialogOverlay'),
|
||||
subtitlesOverlay: document.getElementById('subtitlesOverlay'),
|
||||
},
|
||||
buttons: {
|
||||
chooseFile: document.getElementById('chooseFileBtn'),
|
||||
enterUrl: document.getElementById('enterUrlBtn'),
|
||||
submitUrl: document.getElementById('submitUrlBtn'),
|
||||
cancelUrl: document.getElementById('cancelUrlBtn'),
|
||||
settings: document.getElementById('settingsBtn'),
|
||||
saveSettings: document.getElementById('saveSettingsBtn'),
|
||||
cc: document.getElementById('ccBtn'),
|
||||
submitSubtitles: document.getElementById('submitSubtitlesBtn'),
|
||||
cancelSubtitles: document.getElementById('cancelSubtitlesBtn'),
|
||||
showDialog: document.getElementById('showDialogBtn'),
|
||||
hideDialog: document.getElementById('hideDialogBtn'),
|
||||
fullscreen: document.getElementById('fullscreenBtn'),
|
||||
},
|
||||
inputs: {
|
||||
fileInput: document.getElementById('fileInput'),
|
||||
urlInput: document.getElementById('urlInput'),
|
||||
subtitlesInput: document.getElementById('subtitlesInput'),
|
||||
autoplayCheckbox: document.getElementById('autoplayCheckbox'),
|
||||
loopCheckbox: document.getElementById('loopCheckbox'),
|
||||
controlsCheckbox: document.getElementById('controlsCheckbox'),
|
||||
colorsCheckbox: document.getElementById('colorsCheckbox'),
|
||||
},
|
||||
};
|
||||
|
||||
async function detectStreamType(url) {
|
||||
try {
|
||||
const response = await fetch(url, { method: 'HEAD' });
|
||||
const contentType = response.headers.get('Content-Type') || '';
|
||||
const state = {
|
||||
hls: null,
|
||||
dashPlayer: null,
|
||||
previousObjectURL: null,
|
||||
};
|
||||
|
||||
const isHLS = url.toLowerCase().endsWith('.m3u8') ||
|
||||
contentType.includes('application/vnd.apple.mpegurl') ||
|
||||
contentType.includes('application/x-mpegURL');
|
||||
// --- 2. Utility Functions ---
|
||||
const formatTime = (time) => {
|
||||
const minutes = Math.floor(time / 60) || 0;
|
||||
const seconds = Math.floor(time % 60) || 0;
|
||||
return `${minutes}:${seconds.toString().padStart(2, '0')}`;
|
||||
};
|
||||
|
||||
const isDASH = url.toLowerCase().endsWith('.mpd') ||
|
||||
contentType.includes('application/dash+xml');
|
||||
const setVisibility = (element, isVisible) => {
|
||||
element.style.display = isVisible ? 'block' : 'none';
|
||||
};
|
||||
|
||||
return { isHLS, isDASH, contentType };
|
||||
} catch (err) {
|
||||
console.error("Failed to detect stream type:", err);
|
||||
return { isHLS: false, isDASH: false, contentType: null };
|
||||
}
|
||||
}
|
||||
|
||||
// Update media volume when the slider is moved
|
||||
volumeBar.addEventListener("input", function () {
|
||||
mediaPlayer.volume = volumeBar.value;
|
||||
});
|
||||
|
||||
// Sync slider with media volume (in case it's changed programmatically)
|
||||
mediaPlayer.addEventListener("volumechange", function () {
|
||||
volumeBar.value = mediaPlayer.volume;
|
||||
if (mediaPlayer.muted || mediaPlayer.volume === 0) {
|
||||
volumeBtn.textContent = "🔇";
|
||||
} else {
|
||||
volumeBtn.textContent = "🔊";
|
||||
}
|
||||
});
|
||||
|
||||
// Function to add subtitles dynamically (e.g., after URL input)
|
||||
function addSubtitles(url) {
|
||||
// Remove any existing subtitle tracks
|
||||
const existingTracks = mediaPlayer.getElementsByTagName('track');
|
||||
for (let track of existingTracks) {
|
||||
track.remove();
|
||||
}
|
||||
|
||||
// Create a new track for subtitles
|
||||
const track = document.createElement('track');
|
||||
track.kind = 'subtitles';
|
||||
track.label = 'English';
|
||||
track.srclang = 'en';
|
||||
track.src = url;
|
||||
|
||||
// Append the new track
|
||||
mediaPlayer.appendChild(track);
|
||||
|
||||
// Optionally, enable subtitles by default
|
||||
track.track.mode = 'showing'; // Enable subtitles by default
|
||||
}
|
||||
|
||||
// Handle submit subtitle URL
|
||||
function clearSubtitles() {
|
||||
const tracks = mediaPlayer.getElementsByTagName('track');
|
||||
for (let i = tracks.length - 1; i >= 0; i--) {
|
||||
tracks[i].remove();
|
||||
}
|
||||
}
|
||||
|
||||
// Use this function when a new video is loaded
|
||||
|
||||
submitSubtitlesBtn.addEventListener('click', () => {
|
||||
const subtitleUrl = subtitlesInput.value;
|
||||
if (subtitleUrl) {
|
||||
addSubtitles(subtitleUrl);
|
||||
subtitlesOverlay.style.display = 'none';
|
||||
subtitlesInput.value = '';
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
let autoplayEnabled = true;
|
||||
let loopEnabled = false;
|
||||
|
||||
// Handle submit URL button in custom dialog
|
||||
submitUrlBtn.addEventListener('click', async () => {
|
||||
let url = urlInput.value;
|
||||
|
||||
// Check if URL is a valid URL and doesn't contain "http" or "https"
|
||||
if (url && !url.startsWith('http') && !url.startsWith('https')) {
|
||||
// Assuming it's a URL and needs the protocol added
|
||||
url = 'http://' + url; // You can also choose 'https://' if preferred
|
||||
}
|
||||
|
||||
const { isHLS, isDASH } = await detectStreamType(url);
|
||||
const toggleControls = (show) => {
|
||||
elements.media.customControls.style.display = show ? 'flex' : 'none';
|
||||
};
|
||||
|
||||
const resetMediaPlayers = () => {
|
||||
if (state.hls) {
|
||||
state.hls.destroy();
|
||||
state.hls = null;
|
||||
}
|
||||
if (state.dashPlayer) {
|
||||
state.dashPlayer.reset();
|
||||
state.dashPlayer = null;
|
||||
}
|
||||
};
|
||||
|
||||
if (url) {
|
||||
clearSubtitles();
|
||||
if (hls !== null) {
|
||||
hls.destroy()
|
||||
hls = null
|
||||
window.hls = hls
|
||||
const updatePlayPauseButton = () => {
|
||||
elements.media.playPauseBtn.textContent = elements.media.player.paused ? 'Play' : 'Pause';
|
||||
};
|
||||
|
||||
const updateVolumeButton = () => {
|
||||
const isMuted = elements.volume.volumeBar.value === 0 || elements.media.player.muted;
|
||||
elements.volume.volumeBtn.textContent = isMuted ? '🔇' : '🔊';
|
||||
};
|
||||
|
||||
const addSubtitles = (url) => {
|
||||
// Remove old subtitle tracks
|
||||
Array.from(elements.media.player.getElementsByTagName('track')).forEach(track => track.remove());
|
||||
|
||||
if (!url) return;
|
||||
|
||||
const track = document.createElement('track');
|
||||
track.kind = 'subtitles';
|
||||
track.label = 'English';
|
||||
track.srclang = 'en';
|
||||
track.src = url;
|
||||
elements.media.player.appendChild(track);
|
||||
track.track.mode = 'showing';
|
||||
};
|
||||
|
||||
const detectStreamType = async (url) => {
|
||||
try {
|
||||
const response = await fetch(url, { method: 'HEAD' });
|
||||
const contentType = response.headers.get('Content-Type') || '';
|
||||
const isHLS = url.toLowerCase().endsWith('.m3u8') || contentType.includes('mpegurl');
|
||||
const isDASH = url.toLowerCase().endsWith('.mpd') || contentType.includes('dash+xml');
|
||||
return { isHLS, isDASH };
|
||||
} catch (err) {
|
||||
console.error("Failed to detect stream type:", err);
|
||||
return { isHLS: false, isDASH: false };
|
||||
}
|
||||
if (player !== null) {
|
||||
player.reset()
|
||||
player = null
|
||||
window.dash = player
|
||||
};
|
||||
|
||||
const playMedia = (source) => {
|
||||
elements.media.player.src = source;
|
||||
elements.media.player.load();
|
||||
if (elements.inputs.autoplayCheckbox.checked) {
|
||||
elements.media.player.play();
|
||||
}
|
||||
if (url.toLowerCase().endsWith('.m3u8') || url.toLowerCase().endsWith('.m3u') || isHLS) {
|
||||
// HLS stream
|
||||
if (Hls.isSupported()) {
|
||||
mediaPlayer.style.display = 'flex'; // Hide the native video player
|
||||
hls = new Hls();
|
||||
window.hls = hls
|
||||
mediaPlayer.pause();
|
||||
hls.loadSource(url);
|
||||
hls.attachMedia(mediaPlayer);
|
||||
hls.on(Hls.Events.MANIFEST_PARSED, function() {
|
||||
if (autoplayCheckbox.checked) {
|
||||
mediaPlayer.play();
|
||||
}
|
||||
urlInput.value = "";
|
||||
customControls.style.display = 'flex';
|
||||
});
|
||||
window.hls = hls
|
||||
} else {
|
||||
alert("Your device doesn't support HLS.");
|
||||
customControls.style.display = 'flex';
|
||||
urlInput.value = "";
|
||||
toggleControls(true);
|
||||
setVisibility(elements.dialogs.mainOverlay, false);
|
||||
setVisibility(elements.dialogs.urlOverlay, false);
|
||||
};
|
||||
|
||||
// --- 3. Event Handlers ---
|
||||
const handleUrlSubmit = async () => {
|
||||
let url = elements.inputs.urlInput.value;
|
||||
if (url && !url.startsWith('http')) {
|
||||
url = 'https://' + url;
|
||||
}
|
||||
|
||||
if (!url) return;
|
||||
|
||||
resetMediaPlayers();
|
||||
addSubtitles();
|
||||
|
||||
const { isHLS, isDASH } = await detectStreamType(url);
|
||||
elements.media.player.style.display = 'flex';
|
||||
|
||||
if (isHLS && typeof Hls !== 'undefined' && Hls.isSupported()) {
|
||||
state.hls = new Hls();
|
||||
state.hls.loadSource(url);
|
||||
state.hls.attachMedia(elements.media.player);
|
||||
state.hls.on(Hls.Events.MANIFEST_PARSED, () => {
|
||||
if (elements.inputs.autoplayCheckbox.checked) {
|
||||
elements.media.player.play();
|
||||
}
|
||||
});
|
||||
} else if (isDASH && typeof dashjs !== 'undefined') {
|
||||
state.dashPlayer = dashjs.MediaPlayer().create();
|
||||
state.dashPlayer.initialize(elements.media.player, url, true);
|
||||
if (elements.inputs.autoplayCheckbox.checked) {
|
||||
elements.media.player.play();
|
||||
}
|
||||
} else if (url.toLowerCase().endsWith('.mpd') || isDASH) {
|
||||
mediaPlayer.style.display = 'flex'; // Hide the native video player
|
||||
mediaPlayer.pause();
|
||||
player = dashjs.MediaPlayer().create();
|
||||
window.dash = player
|
||||
// MPEG-DASH stream
|
||||
player.initialize(mediaPlayer, url, true);
|
||||
customControls.style.display = 'flex';
|
||||
urlInput.value = "";
|
||||
if (autoplayCheckbox.checked) {
|
||||
mediaPlayer.play();
|
||||
}
|
||||
window.dash = player
|
||||
} else {
|
||||
mediaPlayer.style.display = 'flex'; // Hide the native video player
|
||||
mediaPlayer.pause();
|
||||
mediaPlayer.src = url;
|
||||
customControls.style.display = 'flex';
|
||||
urlInput.value = "";
|
||||
if (autoplayCheckbox.checked) {
|
||||
mediaPlayer.play();
|
||||
}
|
||||
playMedia(url);
|
||||
}
|
||||
urlDialogOverlay.style.display = 'none';
|
||||
dialogOverlay.style.display = 'none';
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
// Handle CC button to show subtitle modal
|
||||
ccBtn.addEventListener('click', () => {
|
||||
subtitlesOverlay.style.display = 'block';
|
||||
});
|
||||
|
||||
|
||||
|
||||
// Handle cancel subtitle modal
|
||||
cancelSubtitlesBtn.addEventListener('click', () => {
|
||||
subtitlesOverlay.style.display = 'none';
|
||||
});
|
||||
|
||||
|
||||
// Show the dialog on page load
|
||||
window.onload = function () {
|
||||
dialogOverlay.style.display = 'block';
|
||||
};
|
||||
|
||||
|
||||
|
||||
// Handle "Choose a File" button
|
||||
chooseFileBtn.addEventListener('click', () => {
|
||||
fileInput.click();
|
||||
});
|
||||
|
||||
mediaPlayer.addEventListener("volumechange", function () {
|
||||
if (mediaPlayer.muted) {
|
||||
volumeBtn.textContent = "🔇"
|
||||
} else if (mediaPlayer.volume === 0) {
|
||||
volumeBtn.textContent = "🔊"
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
let previousObjectURL = null; // Store the last Object URL
|
||||
|
||||
fileInput.addEventListener('change', (event) => {
|
||||
if (hls !== null) {
|
||||
hls.destroy()
|
||||
hls = null
|
||||
window.hls = hls
|
||||
}
|
||||
if (player !== null) {
|
||||
player.reset()
|
||||
player = null
|
||||
window.dash = player
|
||||
}
|
||||
const file = event.target.files[0];
|
||||
if (!file) return;
|
||||
|
||||
clearSubtitles(); // Remove any previously loaded subtitles
|
||||
|
||||
// Revoke the previous Object URL if it exists
|
||||
if (previousObjectURL) {
|
||||
URL.revokeObjectURL(previousObjectURL);
|
||||
}
|
||||
|
||||
// Create a new Object URL for the selected file
|
||||
const fileURL = URL.createObjectURL(file);
|
||||
mediaPlayer.src = fileURL;
|
||||
mediaPlayer.load();
|
||||
if (autoplayCheckbox.checked) {
|
||||
mediaPlayer.play();
|
||||
}
|
||||
|
||||
// Store the new Object URL for future cleanup
|
||||
previousObjectURL = fileURL;
|
||||
|
||||
// Hide dialog after selecting a file
|
||||
dialogOverlay.style.display = 'none';
|
||||
});
|
||||
|
||||
|
||||
// Handle "Enter a URL" button
|
||||
enterUrlBtn.addEventListener('click', () => {
|
||||
urlDialogOverlay.style.display = 'block';
|
||||
});
|
||||
|
||||
// Handle cancel button in URL dialog
|
||||
cancelUrlBtn.addEventListener('click', () => {
|
||||
urlDialogOverlay.style.display = 'none';
|
||||
});
|
||||
|
||||
// Handle custom play/pause button
|
||||
playPauseBtn.addEventListener('click', () => {
|
||||
if (mediaPlayer.paused) {
|
||||
mediaPlayer.play();
|
||||
playPauseBtn.textContent = 'Pause';
|
||||
} else {
|
||||
mediaPlayer.pause();
|
||||
playPauseBtn.textContent = 'Play';
|
||||
}
|
||||
});
|
||||
|
||||
// Sync button with the video player when it is paused manually
|
||||
mediaPlayer.addEventListener('pause', () => {
|
||||
playPauseBtn.textContent = 'Play';
|
||||
});
|
||||
|
||||
// Sync button with the video player when it is played
|
||||
mediaPlayer.addEventListener('play', () => {
|
||||
playPauseBtn.textContent = 'Pause';
|
||||
});
|
||||
|
||||
// Volume button toggling mute/unmute
|
||||
volumeBtn.addEventListener('click', () => {
|
||||
if (mediaPlayer.muted || mediaPlayer.volume == 0) {
|
||||
mediaPlayer.muted = false;
|
||||
volumeBtn.textContent = '🔊'; // Unmute icon
|
||||
} else {
|
||||
mediaPlayer.muted = true;
|
||||
volumeBtn.textContent = '🔇'; // Mute icon
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// Handle URL input on Enter key
|
||||
urlInput.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Enter') {
|
||||
submitUrlBtn.click();
|
||||
}
|
||||
});
|
||||
|
||||
// Handle Subtitles input on Enter key
|
||||
subtitlesInput.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Enter') {
|
||||
submitSubtitlesBtn.click();
|
||||
}
|
||||
});
|
||||
|
||||
// Handle URL submission
|
||||
|
||||
|
||||
// Update seek bar and time display
|
||||
mediaPlayer.addEventListener('timeupdate', () => {
|
||||
seekBar.max = mediaPlayer.duration || 0;
|
||||
seekBar.value = mediaPlayer.currentTime;
|
||||
const current = formatTime(mediaPlayer.currentTime);
|
||||
const total = formatTime(mediaPlayer.duration);
|
||||
timeDisplay.textContent = `${current} / ${total}`;
|
||||
});
|
||||
|
||||
// Seek media
|
||||
seekBar.addEventListener('input', () => {
|
||||
mediaPlayer.currentTime = seekBar.value;
|
||||
});
|
||||
|
||||
// Handle volume
|
||||
volumeBar.addEventListener('input', () => {
|
||||
mediaPlayer.volume = volumeBar.value;
|
||||
if (volumeBar.value == 0 || mediaPlayer.volume == 0) {
|
||||
volumeBtn.textContent = "🔇";
|
||||
} else {
|
||||
volumeBtn.textContent = "🔊";
|
||||
}
|
||||
});
|
||||
|
||||
// Show settings panel
|
||||
settingsBtn.addEventListener('click', () => {
|
||||
settingsDialogOverlay.style.display = 'block';
|
||||
settingsPanel.style.display = 'block';
|
||||
});
|
||||
|
||||
saveSettingsBtn.addEventListener('click', () => {
|
||||
autoplayEnabled = autoplayCheckbox.checked;
|
||||
loopEnabled = loopCheckbox.checked;
|
||||
mediaPlayer.autoplay = autoplayEnabled;
|
||||
mediaPlayer.loop = loopEnabled;
|
||||
|
||||
const controlsEnabled = document.getElementById('controlsCheckbox').checked;
|
||||
const colorsEnabled = document.getElementById('colorsCheckbox').checked;
|
||||
mediaPlayer.controls = controlsEnabled;
|
||||
if (colorsEnabled) {
|
||||
mediaPlayer.style.filter = "contrast(1.1) saturate(1.15) brightness(1.03)";
|
||||
} else {
|
||||
mediaPlayer.style.filter = "";
|
||||
}
|
||||
|
||||
settingsPanel.style.display = 'none';
|
||||
settingsDialogOverlay.style.display = 'none';
|
||||
});
|
||||
|
||||
|
||||
// End of first event listener for DOM content loaded
|
||||
|
||||
// Format time
|
||||
function formatTime(time) {
|
||||
const minutes = Math.floor(time / 60) || 0;
|
||||
const seconds = Math.floor(time % 60) || 0;
|
||||
return `${minutes}:${seconds.toString().padStart(2, '0')}`;
|
||||
elements.inputs.urlInput.value = '';
|
||||
toggleControls(true);
|
||||
setVisibility(elements.dialogs.urlOverlay, false);
|
||||
setVisibility(elements.dialogs.mainOverlay, false);
|
||||
};
|
||||
|
||||
const handleFileChange = (event) => {
|
||||
resetMediaPlayers();
|
||||
addSubtitles();
|
||||
if (state.previousObjectURL) {
|
||||
URL.revokeObjectURL(state.previousObjectURL);
|
||||
}
|
||||
|
||||
const showDialogBtn = document.getElementById('showDialogBtn');
|
||||
const hideDialogBtn = document.getElementById('hideDialogBtn');
|
||||
const fullscreenBtn = document.getElementById('fullscreenBtn');
|
||||
const file = event.target.files[0];
|
||||
if (!file) return;
|
||||
|
||||
// Show dialog
|
||||
showDialogBtn.addEventListener('click', () => {
|
||||
dialogOverlay.style.display = 'block';
|
||||
const fileURL = URL.createObjectURL(file);
|
||||
playMedia(fileURL);
|
||||
state.previousObjectURL = fileURL;
|
||||
};
|
||||
|
||||
const handleSettingsSave = () => {
|
||||
elements.media.player.autoplay = elements.inputs.autoplayCheckbox.checked;
|
||||
elements.media.player.loop = elements.inputs.loopCheckbox.checked;
|
||||
elements.media.player.controls = elements.inputs.controlsCheckbox.checked;
|
||||
|
||||
const filter = elements.inputs.colorsCheckbox.checked
|
||||
? 'contrast(1.1) saturate(1.15) brightness(1.03)'
|
||||
: '';
|
||||
elements.media.player.style.filter = filter;
|
||||
|
||||
setVisibility(elements.dialogs.settingsOverlay, false);
|
||||
};
|
||||
|
||||
// --- 4. Event Listener Setup ---
|
||||
const setupEventListeners = () => {
|
||||
// Media & Controls
|
||||
elements.media.player.addEventListener('timeupdate', () => {
|
||||
elements.media.seekBar.max = elements.media.player.duration || 0;
|
||||
elements.media.seekBar.value = elements.media.player.currentTime;
|
||||
elements.media.timeDisplay.textContent = `${formatTime(elements.media.player.currentTime)} / ${formatTime(elements.media.player.duration)}`;
|
||||
});
|
||||
|
||||
elements.media.player.addEventListener('play', updatePlayPauseButton);
|
||||
elements.media.player.addEventListener('pause', updatePlayPauseButton);
|
||||
elements.media.player.addEventListener('volumechange', updateVolumeButton);
|
||||
|
||||
elements.media.playPauseBtn.addEventListener('click', () => {
|
||||
elements.media.player.paused ? elements.media.player.play() : elements.media.player.pause();
|
||||
});
|
||||
|
||||
elements.media.seekBar.addEventListener('input', () => {
|
||||
elements.media.player.currentTime = elements.media.seekBar.value;
|
||||
});
|
||||
|
||||
// Hide dialog
|
||||
hideDialogBtn.addEventListener('click', () => {
|
||||
dialogOverlay.style.display = 'none';
|
||||
elements.volume.volumeBar.addEventListener('input', () => {
|
||||
elements.media.player.volume = elements.volume.volumeBar.value;
|
||||
});
|
||||
|
||||
elements.volume.volumeBtn.addEventListener('click', () => {
|
||||
elements.media.player.muted = !elements.media.player.muted;
|
||||
updateVolumeButton();
|
||||
});
|
||||
|
||||
// Fullscreen functionality
|
||||
fullscreenBtn.addEventListener('click', () => {
|
||||
// Dialogs & Buttons
|
||||
elements.buttons.chooseFile.addEventListener('click', () => elements.inputs.fileInput.click());
|
||||
elements.buttons.enterUrl.addEventListener('click', () => setVisibility(elements.dialogs.urlOverlay, true));
|
||||
elements.buttons.cancelUrl.addEventListener('click', () => setVisibility(elements.dialogs.urlOverlay, false));
|
||||
elements.buttons.submitUrl.addEventListener('click', handleUrlSubmit);
|
||||
elements.inputs.urlInput.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Enter') handleUrlSubmit();
|
||||
});
|
||||
|
||||
elements.inputs.fileInput.addEventListener('change', handleFileChange);
|
||||
|
||||
elements.buttons.settings.addEventListener('click', () => setVisibility(elements.dialogs.settingsOverlay, true));
|
||||
elements.buttons.saveSettings.addEventListener('click', handleSettingsSave);
|
||||
|
||||
elements.buttons.cc.addEventListener('click', () => setVisibility(elements.dialogs.subtitlesOverlay, true));
|
||||
elements.buttons.cancelSubtitles.addEventListener('click', () => setVisibility(elements.dialogs.subtitlesOverlay, false));
|
||||
elements.buttons.submitSubtitles.addEventListener('click', () => {
|
||||
addSubtitles(elements.inputs.subtitlesInput.value);
|
||||
elements.inputs.subtitlesInput.value = '';
|
||||
setVisibility(elements.dialogs.subtitlesOverlay, false);
|
||||
});
|
||||
elements.inputs.subtitlesInput.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Enter') elements.buttons.submitSubtitles.click();
|
||||
});
|
||||
|
||||
elements.buttons.showDialog.addEventListener('click', () => setVisibility(elements.dialogs.mainOverlay, true));
|
||||
elements.buttons.hideDialog.addEventListener('click', () => setVisibility(elements.dialogs.mainOverlay, false));
|
||||
elements.buttons.fullscreen.addEventListener('click', () => {
|
||||
if (!document.fullscreenElement) {
|
||||
mediaPlayer.requestFullscreen();
|
||||
elements.media.player.requestFullscreen();
|
||||
} else {
|
||||
document.exitFullscreen();
|
||||
}
|
||||
});
|
||||
|
||||
// Initialize
|
||||
window.onload = () => setVisibility(elements.dialogs.mainOverlay, true);
|
||||
};
|
||||
|
||||
// End of code and second event listener for DOM content loaded
|
||||
|
||||
setupEventListeners();
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user