diff --git a/src/core/static/js/events.js b/src/core/static/js/events.js index 4208fd0..4f3de1a 100644 --- a/src/core/static/js/events.js +++ b/src/core/static/js/events.js @@ -80,3 +80,7 @@ $( "#tggl-faves-btn" ).bind( "click", async function(eve) { $( "#scroll-files-to-top-btn" ).bind( "click", async function(eve) { scrollFilesToTop(); }); + +$( "#playlist-mode-btn" ).bind( "click", async function(eve) { + togglePlaylistMode(eve.target); +}); diff --git a/src/core/static/js/react-ui-logic.js b/src/core/static/js/react-ui-logic.js index 600d71e..ffe7225 100644 --- a/src/core/static/js/react-ui-logic.js +++ b/src/core/static/js/react-ui-logic.js @@ -163,6 +163,7 @@ const renderFilesList = (data = null) => { React.createElement(FilesList, data), filesListElm ) + videoPlaylist = document.body.querySelectorAll('[ftype="video"][value="Open"]'); // With attributes ftype and value } const renderFavesList = (data = null) => { diff --git a/src/core/static/js/ui-logic.js b/src/core/static/js/ui-logic.js index e105ac4..4cb9e5c 100644 --- a/src/core/static/js/ui-logic.js +++ b/src/core/static/js/ui-logic.js @@ -65,6 +65,7 @@ const closeFile = () => { trailerPlayer.src = "#"; trailerPlayer.style.display = "none"; + clearModalFades(); } const showFile = async (title, hash, extension, type) => { @@ -285,6 +286,12 @@ const clearChildNodes = (parent) => { } } +const clearModalFades = (elm) => { + let elms = document.getElementsByClassName('modal-backdrop fade show'); + for (var i = 0; i < elms.length; i++) { + elms[i].remove(); + } +} // Cache Buster const clearCache = () => { diff --git a/src/core/static/js/video-events.js b/src/core/static/js/video-events.js index a4ee4fd..9c8480c 100644 --- a/src/core/static/js/video-events.js +++ b/src/core/static/js/video-events.js @@ -2,7 +2,8 @@ let fullScreenState = 0; let clicktapwait = 200; let shouldPlay = null; let controlsTimeout = null; - +let playListMode = false; +let videoPlaylist = []; const getTimeFormatted = (duration = null) => { if (duration == null) { return "00:00"; } @@ -85,6 +86,19 @@ const toggleVolumeControl = () => { } } +const togglePlaylistMode = (elm) => { + const classType = "btn-info"; + const hasClass = elm.classList.contains(classType); + if (playListMode) { + elm.classList.remove(classType); + playListMode = false; + } else { + elm.classList.add(classType); + playListMode = true; + } +} + + $("#video").on("loadedmetadata", function(eve){ @@ -94,7 +108,6 @@ $("#video").on("loadedmetadata", function(eve){ }); - $("#video").on("keydown", function(eve) { event.preventDefault(); const key = eve.keyCode; @@ -198,13 +211,24 @@ $( "#volume-slider" ).bind( "change", async function(eve) { }); -// $( "#video" ).bind( "ended", async function(eve) { -// alert("Hello...") -// // let videoDuration = document.getElementById("videoCurrentTime"); -// // const video = eve.target; -// // const seekto = document.getElementById("seek-slider"); -// // const vt = video.currentTime * (100 / video.duration); -// // -// // seekto.value = vt; -// // videoDuration.innerText = getTimeFormatted(video.currentTime); -// }); +$( "#video" ).bind( "ended", async function(eve) { + if (!playListMode) { + const video = eve.target; + const seekto = document.getElementById("seek-slider"); + const vt = video.currentTime * (100 / video.duration); + + seekto.value = 0; + videoDuration.innerText = getTimeFormatted(video.currentTime); + video.play(); + } else { + const current_title = document.getElementById('selectedFile').innerText; + for (let i = 0; i < videoPlaylist.length; i++) { + if (videoPlaylist[i].title === current_title) { + const index = (i === videoPlaylist.length) ? 0 : i+=1; + clearModalFades(); + videoPlaylist[index].click(); + break + } + } + } +}); diff --git a/src/core/templates/body-header.html b/src/core/templates/body-header.html index 6cebfdd..e3cf5a9 100644 --- a/src/core/templates/body-header.html +++ b/src/core/templates/body-header.html @@ -11,7 +11,7 @@