itdominator
/
WebFM
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Updated files view and faves listing.

This commit is contained in:
maximstewart 2021-02-09 21:18:38 -06:00
parent 781d2ece5a
commit 5ad243f475
8 changed files with 96 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/core/routes/Routes.py
View File

@ -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)

14
src/core/static/css/main.css
View File

@ -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); }

4
src/core/static/css/overrides.css
View File

@ -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 */

6
src/core/static/js/react-ui-logic.js vendored
View File

@ -63,10 +63,10 @@ class FilesList extends React.Component {
if (filetype === "video") {
card_header = name;
card_body = <img class="image-style" src={"static/imgs/thumbnails/" + hash + ".jpg"} alt={name} />;
card_body = <img class="card-img-top" src={"static/imgs/thumbnails/" + hash + ".jpg"} alt={name} />;
} else if (filetype === "image") {
card_header = name;
card_body = <img class="image-style" src={"api/file-manager-action/files/" + hash} alt={name} />;
card_body = <img class="card-img-top" src={"api/file-manager-action/files/" + hash} alt={name} />;
} else {
card_header = <img class="icon-style" src={icon} alt={name} />;
card_body = name;
@ -127,7 +127,7 @@ class FavoritesList extends React.Component {
}
final.push(
<li onClick={this.loadFaveEvent} faveid={_faveId} class="btn btn-secondary btn-sm" name={name} title={name}>
<li onClick={this.loadFaveEvent} faveid={_faveId} class="list-group-item text-center" name={name} title={name}>
{name}
</li>
);

24
src/core/static/js/ui-logic.js
View File

@ -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;
}

129
src/core/static/js/video-events.js
View File

@ -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;

2
src/core/templates/modals/favorites-modal.html
View File

@ -13,7 +13,7 @@
<div class="modal-body">
<div class="row">
<div class="col scroller" style="max-height: 30em; overflow: auto;">
<ul id="faves-list">
<ul id="faves-list" class="list-group">
</ul>
</div>
</div>

14
src/core/templates/modals/file-modal.html
View File

@ -15,7 +15,7 @@
<div class="col scroller" style="max-height: 70vh; overflow: auto;">
<!-- For video -->
<div id="video-container">
<video id="video-viewer"
<video id="video" class="card-img-top viewer"
loop
src=""
autoplay=""
@ -43,16 +43,14 @@
</div>
</div>
<!-- For image -->
<img id="image-viewer"
style="width: inherit; height: auto; display: none;"
<img id="image-viewer" class="card-img-top viewer"
style="display: none;"
src="" alt="" />
<!-- For pdf -->
<iframe id="pdf-viewer"
<iframe id="pdf-viewer" class="card-img-top viewer"
src=""
width="720" height="460"
style="display: none;"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen="allowfullscreen"
@ -63,8 +61,8 @@
</iframe>
<!-- For text -->
<pre id="text-viewer"
style="width: inherit; height: auto; display: none;">
<pre id="text-viewer" class="card-img-top viewer"
style="display: none;">
</pre>
</div>
</div>