From 5ad243f475fad7dd52fe2ad0f96348aa5a934438 Mon Sep 17 00:00:00 2001 From: maximstewart Date: Tue, 9 Feb 2021 21:18:38 -0600 Subject: [PATCH] Updated files view and faves listing. --- src/core/routes/Routes.py | 7 +- src/core/static/css/main.css | 14 +- src/core/static/css/overrides.css | 4 - src/core/static/js/react-ui-logic.js | 6 +- src/core/static/js/ui-logic.js | 24 +--- src/core/static/js/video-events.js | 129 +++++++++--------- .../templates/modals/favorites-modal.html | 2 +- src/core/templates/modals/file-modal.html | 14 +- 8 files changed, 96 insertions(+), 104 deletions(-) diff --git a/src/core/routes/Routes.py b/src/core/routes/Routes.py index 4284a9d..03ff493 100644 --- a/src/core/routes/Routes.py +++ b/src/core/routes/Routes.py @@ -97,7 +97,12 @@ def fileManagerAction(_type, _hash = None): # NOTE: Need to actually implimint a websocket to communicate back to client that remux has completed. # As is, the remux thread hangs until completion and client tries waiting until server reaches connection timeout. # I.E....this is stupid but for now works better than nothing - return view.remuxVideo(_hash, fpath) + good_result = view.remuxVideo(_hash, fpath) + if good_result: + return '{"path":"static/remuxs/' + _hash + '.mp4"}' + else: + msg = "Remuxing: Remux failed or took too long; please, refresh the page and try again..." + return msgHandler.createMessageJSON("success", msg) if _type == "run-locally": msg = "Opened media..." view.openFilelocally(fpath) diff --git a/src/core/static/css/main.css b/src/core/static/css/main.css index 0622437..9ab0ce6 100644 --- a/src/core/static/css/main.css +++ b/src/core/static/css/main.css @@ -25,8 +25,9 @@ overflow-y: auto; } -#files { - margin-bottom: 6em; +#video-controls { + position: relative; + bottom: 2em; } @@ -44,22 +45,17 @@ left: 50%; } - - .icon-style { width: 2em; height: auto; } -.dir-style, .video-style, .image-style, .file-style { - max-width: 20em; +.viewer { + max-width: 45em; } - - - /* Other message text colors */ .errorTxt { color: rgb(170, 18, 18); } .warningTxt { color: rgb(255, 168, 0); } diff --git a/src/core/static/css/overrides.css b/src/core/static/css/overrides.css index 3b54a12..f26f77e 100644 --- a/src/core/static/css/overrides.css +++ b/src/core/static/css/overrides.css @@ -23,10 +23,6 @@ ul, li { list-style: none; } -ul, li { - list-style: none; -} - /* Vertical slider */ input[type=range][orient=vertical] { writing-mode: bt-lr; /* IE */ diff --git a/src/core/static/js/react-ui-logic.js b/src/core/static/js/react-ui-logic.js index 1ffb972..905cf43 100644 --- a/src/core/static/js/react-ui-logic.js +++ b/src/core/static/js/react-ui-logic.js @@ -63,10 +63,10 @@ class FilesList extends React.Component { if (filetype === "video") { card_header = name; - card_body = {name}; + card_body = {name}; } else if (filetype === "image") { card_header = name; - card_body = {name}; + card_body = {name}; } else { card_header = {name}; card_body = name; @@ -127,7 +127,7 @@ class FavoritesList extends React.Component { } final.push( -
  • +
  • {name}
    • ); diff --git a/src/core/static/js/ui-logic.js b/src/core/static/js/ui-logic.js index cf20bb9..0b2a73c 100644 --- a/src/core/static/js/ui-logic.js +++ b/src/core/static/js/ui-logic.js @@ -20,7 +20,7 @@ const showMedia = async (hash, extension, type) => { document.getElementById("image-viewer").style.display = "none"; document.getElementById("text-viewer").style.display = "none"; document.getElementById("pdf-viewer").style.display = "none"; - document.getElementById("video-viewer").style.display = "none"; + document.getElementById("video").style.display = "none"; document.getElementById("video-controls").style.display = "none"; if (type === "video") { @@ -32,17 +32,17 @@ const showMedia = async (hash, extension, type) => { } const setupVideo = async (hash, extension) => { - let video = document.getElementById("video-viewer"); + let video = document.getElementById("video"); let controls = document.getElementById("video-controls"); video.poster = "static/imgs/icons/loading.gif"; video.style.display = ""; video.src = "#" - video_path = "files/" + hash; + video_path = "api/file-manager-action/files/" + hash; try { if ((/\.(avi|mkv|wmv|flv|f4v|mov|m4v|mpg|mpeg|mp4|webm|mp3|flac|ogg)$/i).test(extension)) { if ((/\.(avi|mkv|wmv|flv|f4v)$/i).test(extension)) { - data = await fetchData( "remux/" + hash ); + data = await fetchData( "api/file-manager-action/remux/" + hash ); if ( data.hasOwnProperty('path') ) { video_path = data.path; } else { @@ -59,16 +59,6 @@ const setupVideo = async (hash, extension) => { $('#file-view-modal').modal({"focus": true, "show": true}); controls.style.display = "none"; video.src = video_path; - // if ((/\.(flv|f4v)$/i).test(extension)) { - // video.src = video_path; - // } else { - // // This is questionable in usage since it loads the full video before - // showing; but, seeking doesn't work otherwise... - // let response = await fetch(formatURL(video_path)); - // let vid_src = URL.createObjectURL(await response.blob()); // IE10+ - // video.src = vid_src; - // video.src = video_path; - // } } catch (e) { video.style.display = "none"; console.log(e); @@ -89,7 +79,7 @@ const setupFile = async (hash, extension) => { } if ((/\.(mp3|ogg|flac)$/i).test(extension)) { type = "music"; - viewer = document.getElementById("video-viewer"); + viewer = document.getElementById("video"); } if ((/\.(pdf)$/i).test(extension)) { type = "pdf"; @@ -98,13 +88,13 @@ const setupFile = async (hash, extension) => { if (type !== "text" && type !== "local" ) { $('#file-view-modal').modal({"focus": true, "show": true}); - let response = await fetch(formatURL("files/" + hash)); + let response = await fetch("api/file-manager-action/files/" + hash); let src_obj = URL.createObjectURL(await response.blob()); // IE10+ viewer.src = src_obj; } if (type == "text") { - let response = await fetch(formatURL("files/" + hash)); + let response = await fetch("api/file-manager-action/files/" + hash); let textData = await response.text(); // IE10+ viewer.innerText = textData; } diff --git a/src/core/static/js/video-events.js b/src/core/static/js/video-events.js index 85b56ae..d83f655 100644 --- a/src/core/static/js/video-events.js +++ b/src/core/static/js/video-events.js @@ -8,16 +8,16 @@ let canHideControls = true; const getTimeFormatted = (duration = null) => { if (duration == null) { return "00:00"; } - let hours = (duration / 3600).toFixed(2).split(".")[0]; - let minutes = (duration / 60).toFixed(2).split(".")[0]; - let time = (duration / 60).toFixed(2) - let seconds = Math.floor( (time - Math.floor(time) ) * 60); + const hours = (duration / 3600).toFixed(2).split(".")[0]; + const minutes = (duration / 60).toFixed(2).split(".")[0]; + const time = (duration / 60).toFixed(2) + const seconds = Math.floor( (time - Math.floor(time) ) * 60); return hours + ":" + minutes + ":" + seconds; } const pauseVideo = () => { - const video = document.getElementById("video-viewer"); + const video = document.getElementById("video"); video.style.cursor = ''; video.pause(); } @@ -38,56 +38,8 @@ const togglePlay = (video) => { }, 300); } -const toggleFullscreen = (video) => { - containerElm = document.getElementById("video-container"); - parentElm = video.parentElement; - - if (video.requestFullscreen) { - parentElm.requestFullscreen(); - video.style.cursor = 'none'; - containerElm.style.display = "block"; - } else if (video.webkitRequestFullscreen) { /* Safari */ - parentElm.webkitRequestFullscreen(); - video.style.cursor = 'none'; - containerElm.style.display = "block"; - } else if (video.msRequestFullscreen) { /* IE11 */ - parentElm.msRequestFullscreen(); - video.style.cursor = 'none'; - containerElm.style.display = "block"; - } - - if (fullScreenState == 2) { - if (document.exitFullscreen) { - document.exitFullscreen(); - video.style.cursor = ''; - containerElm.style.display = "contents"; - } else if (document.webkitExitFullscreen) { /* Safari */ - document.webkitExitFullscreen(); - video.style.cursor = ''; - containerElm.style.display = "contents"; - } else if (document.msExitFullscreen) { /* IE11 */ - document.msExitFullscreen(); - video.style.cursor = ''; - containerElm.style.display = "contents"; - } - - fullScreenState = 0; - } - - fullScreenState += 1; -} - -const toggleVolumeControl = () => { - const volume = document.getElementById("volume-slider"); - if (volume.style.display === "none") { - volume.style.display = ""; - } else { - volume.style.display = "none"; - } -} - const showControls = () => { - const video = document.getElementById("video-viewer"); + const video = document.getElementById("video"); const controls = document.getElementById("video-controls"); video.style.cursor = ''; @@ -110,13 +62,68 @@ const showControls = () => { } -$("#video-viewer").on("loadedmetadata", function(eve){ - let video = eve.target; + + +const setFullscreenSettings = (parentElm, video) => { + parentElm.requestFullscreen(); + video.classList.remove("card-img-top"); + video.classList.remove("viewer"); + video.style.cursor = 'none'; + video.style.height = 'inherit'; +} + +const unsetFullscreenSettings = (video) => { + video.classList.add("card-img-top"); + video.classList.add("viewer"); + video.style.cursor = ''; + video.style.height = ''; +} + +const toggleFullscreen = (video) => { + containerElm = document.getElementById("video-container"); + parentElm = video.parentElement; + + if (video.requestFullscreen || video.webkitRequestFullscreen || video.msRequestFullscreen) { + setFullscreenSettings(parentElm, video); + } + + if (fullScreenState == 2) { + if (document.exitFullscreen) { + document.exitFullscreen(); + unsetFullscreenSettings(video); + } else if (document.webkitExitFullscreen) { /* Safari */ + document.webkitExitFullscreen(); + unsetFullscreenSettings(video); + } else if (document.msExitFullscreen) { /* IE11 */ + document.msExitFullscreen(); + unsetFullscreenSettings(video); + } + + fullScreenState = 0; + } + + fullScreenState += 1; +} + +const toggleVolumeControl = () => { + const volume = document.getElementById("volume-slider"); + if (volume.style.display === "none") { + volume.style.display = ""; + } else { + volume.style.display = "none"; + } +} + + + + +$("#video").on("loadedmetadata", function(eve){ + const video = eve.target; let videoDuration = document.getElementById("videoDuration"); videoDuration.innerText = getTimeFormatted(video.duration); }); -$("#video-viewer").on("click", function(eve){ +$("#video").on("click", function(eve){ const video = eve.target; if(!shouldPlay) { @@ -132,7 +139,7 @@ $("#video-viewer").on("click", function(eve){ eve.preventDefault(); }); -$("#video-viewer").on("touchend", function(eve){ +$("#video").on("touchend", function(eve){ const video = eve.target; if(!shouldPlay) { @@ -148,7 +155,7 @@ $("#video-viewer").on("touchend", function(eve){ eve.preventDefault(); }); -$( "#video-viewer" ).bind( "timeupdate", async function(eve) { +$( "#video" ).bind( "timeupdate", async function(eve) { let videoDuration = document.getElementById("videoCurrentTime"); const video = eve.target; const seekto = document.getElementById("seek-slider"); @@ -160,14 +167,14 @@ $( "#video-viewer" ).bind( "timeupdate", async function(eve) { $( "#seek-slider" ).bind( "change", async function(eve) { const slider = eve.target; - let video = document.getElementById("video-viewer"); + let video = document.getElementById("video"); let seekto = video.duration * (slider.value / 100); video.currentTime = seekto; }); $( "#volume-slider" ).bind( "change", async function(eve) { const slider = eve.target; - let video = document.getElementById("video-viewer"); + let video = document.getElementById("video"); let volumeto = slider.value; video.volume = volumeto; diff --git a/src/core/templates/modals/favorites-modal.html b/src/core/templates/modals/favorites-modal.html index 405edde..338cade 100644 --- a/src/core/templates/modals/favorites-modal.html +++ b/src/core/templates/modals/favorites-modal.html @@ -13,7 +13,7 @@
    -
      +
    diff --git a/src/core/templates/modals/file-modal.html b/src/core/templates/modals/file-modal.html index 60be2ff..b07790e 100644 --- a/src/core/templates/modals/file-modal.html +++ b/src/core/templates/modals/file-modal.html @@ -15,7 +15,7 @@
    -
    - - -