anirudh/simpliplay-desktop
1
0
Fork 0
mirror of https://github.com/A-Star100/simpliplay-desktop.git synced 2025-09-17 22:29:38 +00:00
Code Issues Actions Packages Projects Releases 1 Wiki Activity

Update index.html

Browse Source
This commit is contained in:
Anirudh Sevugan 2025-02-02 09:57:15 +05:30 committed by GitHub
parent 9190452288
commit dda059b4f8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 112 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

141
simpliplay/index.html
View File

@ -2,15 +2,19 @@
<html lang="en"> <html lang="en">
<head> <head>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"> <!--<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">-->
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="lib/dash.js"></script> <script src="lib/dash.js"></script>
<script src="lib/hls.js"></script> <script src="lib/hls.js"></script>
<title>SimpliPlay</title> <title>SimpliPlay</title>
<style> <style>
@font-face {
font-family: "Inter";
src: url("fonts/inter.ttf") format("truetype");
}
body { body {
font-family: "Inter", sans-serif; font-family: "Inter", Arial, sans-serif;
text-align: center; text-align: center;
padding: 20px; padding: 20px;
margin: 0; margin: 0;
@ -18,6 +22,10 @@
color: white; color: white;
} }
#saveSettingsBtn:hover {
background: #0c63d9;
}
#saveSettingsBtn { #saveSettingsBtn {
margin: 10px 5px; margin: 10px 5px;
padding: 10px 20px; padding: 10px 20px;
@ -110,6 +118,10 @@
background: #0c63d9; background: #0c63d9;
} }
#showDialogBtn:hover {
background: #0c63d9;
}
input[type="range"] { input[type="range"] {
flex-grow: 1; flex-grow: 1;
background: transparent; background: transparent;
@ -117,7 +129,7 @@
cursor: pointer; cursor: pointer;
} }
video { video, iframe {
display: flex; display: flex;
margin: 20px auto; margin: 20px auto;
background: black; background: black;
@ -127,6 +139,10 @@
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
} }
iframe {
border: none;
}
.gap-box { .gap-box {
height: 20px; height: 20px;
} }
@ -179,7 +195,7 @@
<div class="dialog"> <div class="dialog">
<p>Select how you want to load media:</p> <p>Select how you want to load media:</p>
<button id="chooseFileBtn">Choose a File</button> <button id="chooseFileBtn">Choose a File</button>
<button id="enterUrlBtn">Enter a URL <small>(Supports MPEG-DASH and HLS)</small></button> <button id="enterUrlBtn">Enter a URL</button>
<button id="hideDialogBtn">Go back</button> <button id="hideDialogBtn">Go back</button>
<input type="file" id="fileInput" accept="video/*,audio/*" style="display: none;"> <input type="file" id="fileInput" accept="video/*,audio/*" style="display: none;">
</div> </div>
@ -222,6 +238,7 @@
<button id="settingsBtn">⚙️</button> <button id="settingsBtn">⚙️</button>
<!-- Settings panel --> <!-- Settings panel -->
<div class="dialog-overlay" id="settingsDialogOverlay">
<div id="settingsPanel"> <div id="settingsPanel">
<label for="autoplayCheckbox">Autoplay:</label> <label for="autoplayCheckbox">Autoplay:</label>
<input type="checkbox" id="autoplayCheckbox" checked><br> <input type="checkbox" id="autoplayCheckbox" checked><br>
@ -229,6 +246,7 @@
<input type="checkbox" id="loopCheckbox"><br> <input type="checkbox" id="loopCheckbox"><br>
<button id="saveSettingsBtn">Save Settings</button> <button id="saveSettingsBtn">Save Settings</button>
</div> </div>
</div>
<script> <script>
const dialogOverlay = document.getElementById('dialogOverlay'); const dialogOverlay = document.getElementById('dialogOverlay');
@ -249,6 +267,7 @@
const saveSettingsBtn = document.getElementById('saveSettingsBtn'); const saveSettingsBtn = document.getElementById('saveSettingsBtn');
const fullscreenBtn = document.getElementById('fullscreenBtn'); const fullscreenBtn = document.getElementById('fullscreenBtn');
const urlDialogOverlay = document.getElementById('urlDialogOverlay'); const urlDialogOverlay = document.getElementById('urlDialogOverlay');
const settingsDialogOverlay = document.getElementById('settingsDialogOverlay');
const urlInput = document.getElementById('urlInput'); const urlInput = document.getElementById('urlInput');
const submitUrlBtn = document.getElementById('submitUrlBtn'); const submitUrlBtn = document.getElementById('submitUrlBtn');
const cancelUrlBtn = document.getElementById('cancelUrlBtn'); const cancelUrlBtn = document.getElementById('cancelUrlBtn');
@ -257,6 +276,7 @@
const subtitlesInput = document.getElementById('subtitlesInput'); const subtitlesInput = document.getElementById('subtitlesInput');
const submitSubtitlesBtn = document.getElementById('submitSubtitlesBtn'); const submitSubtitlesBtn = document.getElementById('submitSubtitlesBtn');
const cancelSubtitlesBtn = document.getElementById('cancelSubtitlesBtn'); const cancelSubtitlesBtn = document.getElementById('cancelSubtitlesBtn');
const customControls = document.getElementById('customControls');
// Handle submit subtitle URL // Handle submit subtitle URL
submitSubtitlesBtn.addEventListener('click', () => { submitSubtitlesBtn.addEventListener('click', () => {
@ -269,6 +289,7 @@ submitSubtitlesBtn.addEventListener('click', () => {
track.src = subtitleUrl; track.src = subtitleUrl;
mediaPlayer.appendChild(track); mediaPlayer.appendChild(track);
subtitlesOverlay.style.display = 'none'; subtitlesOverlay.style.display = 'none';
subtitlesInput.value = '';
} }
}); });
@ -285,33 +306,54 @@ function addSubtitles(url) {
let loopEnabled = false; let loopEnabled = false;
// Handle submit URL button in custom dialog // Handle submit URL button in custom dialog
submitUrlBtn.addEventListener('click', () => { submitUrlBtn.addEventListener('click', () => {
const url = urlInput.value; let url = urlInput.value;
if (url) {
if (url.includes('.m3u8')) { // Check if URL is a valid URL and doesn't contain "http" or "https"
// HLS stream if (url && !url.startsWith('http') && !url.startsWith('https')) {
if (Hls.isSupported()) { // Assuming it's a URL and needs the protocol added
const hls = new Hls(); url = 'http://' + url; // You can also choose 'https://' if preferred
hls.loadSource(url); }
hls.attachMedia(mediaPlayer);
hls.on(Hls.Events.MANIFEST_PARSED, function() { if (url) {
mediaPlayer.play(); if (url.includes('.m3u8')) {
}); // HLS stream
} else { if (Hls.isSupported()) {
alert('HLS not supported on your browser.'); mediaPlayer.style.display = 'flex'; // Hide the native video player
} const hls = new Hls();
} else if (url.includes('.mpd')) { mediaPlayer.pause();
// MPEG-DASH stream hls.loadSource(url);
const player = dashjs.MediaPlayer().create(); hls.attachMedia(mediaPlayer);
player.initialize(mediaPlayer, url, true); hls.on(Hls.Events.MANIFEST_PARSED, function() {
} else {
mediaPlayer.src = url;
mediaPlayer.play(); mediaPlayer.play();
} urlInput.value = "";
urlDialogOverlay.style.display = 'none'; customControls.style.display = 'flex';
dialogOverlay.style.display = 'none'; });
} else {
alert('HLS not supported on your browser.');
customControls.style.display = 'flex';
urlInput.value = "";
} }
}); } else if (url.includes('.mpd')) {
mediaPlayer.style.display = 'flex'; // Hide the native video player
mediaPlayer.pause();
const player = dashjs.MediaPlayer().create();
// MPEG-DASH stream
player.initialize(mediaPlayer, url, true);
customControls.style.display = 'flex';
urlInput.value = "";
} else {
mediaPlayer.style.display = 'flex'; // Hide the native video player
mediaPlayer.pause();
mediaPlayer.src = url;
customControls.style.display = 'flex';
urlInput.value = "";
mediaPlayer.play();
}
urlDialogOverlay.style.display = 'none';
dialogOverlay.style.display = 'none';
}
});
// Handle CC button to show subtitle modal // Handle CC button to show subtitle modal
ccBtn.addEventListener('click', () => { ccBtn.addEventListener('click', () => {
@ -364,6 +406,45 @@ function addSubtitles(url) {
} }
}); });
// Volume button toggling mute/unmute
volumeBtn.addEventListener('click', () => {
if (mediaPlayer.muted) {
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
// YouTube ID extractor
function getYouTubeID(url) {
const match = url.match(/[?&]v=([a-zA-Z0-9_-]+)/);
return match ? match[1] : null;
}
// Vimeo ID extractor
function getVimeoID(url) {
const match = url.match(/vimeo.com\/(\d+)/);
return match ? match[1] : null;
}
// Update seek bar and time display // Update seek bar and time display
mediaPlayer.addEventListener('timeupdate', () => { mediaPlayer.addEventListener('timeupdate', () => {
seekBar.max = mediaPlayer.duration || 0; seekBar.max = mediaPlayer.duration || 0;
@ -385,6 +466,7 @@ function addSubtitles(url) {
// Show settings panel // Show settings panel
settingsBtn.addEventListener('click', () => { settingsBtn.addEventListener('click', () => {
settingsDialogOverlay.style.display = 'block';
settingsPanel.style.display = 'block'; settingsPanel.style.display = 'block';
}); });
@ -395,6 +477,7 @@ function addSubtitles(url) {
mediaPlayer.autoplay = autoplayEnabled; mediaPlayer.autoplay = autoplayEnabled;
mediaPlayer.loop = loopEnabled; mediaPlayer.loop = loopEnabled;
settingsPanel.style.display = 'none'; settingsPanel.style.display = 'none';
settingsDialogOverlay.style.display = 'none';
}); });
// Format time // Format time