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

Video cntrl udates

This commit is contained in:
itdominator 2021-10-14 01:24:48 -05:00
parent ffb0459cfe
commit a937d1f313
8 changed files with 87 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -20,14 +20,13 @@
}
#master-container {
height: 90vh;
height: 80vh;
overflow-x: hidden;
overflow-y: auto;
}
#video-controls {
position: relative;
bottom: 2.5em;
background-color: rgba(0, 0, 0, 0.64);
}

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

@ -47,10 +47,13 @@ input[type=range][orient=vertical] {
.modal-header {
background-color: rgba(0, 0, 0, 0.64);
}
.modal-content {
background-color: #32383e74;
border-color: #f8940674;
background-color: rgba(50, 56, 62, 0.74);
border-color: rgba(249, 148, 6, 0.74);
}
.sticky-top,
@ -59,7 +62,7 @@ input[type=range][orient=vertical] {
}
.card-body {
min-height: 326px;
min-height: 326px;
font-size: x-large;
vertical-align: middle !important;
align-items: center;

21
src/core/static/js/context-menu.js
View File

@ -20,8 +20,6 @@ window.addEventListener("click", e => {
});
window.addEventListener("contextmenu", e => {
e.preventDefault();
let target = e.target;
let elm = target;
while (elm.nodeName != "BODY") {
@ -33,9 +31,24 @@ window.addEventListener("contextmenu", e => {
}
}
let posY = e.pageY;
let posX = e.pageX - 165;
if (e.pageY > (window.innerHeight - 120)) {
posY = window.innerHeight - 220;
}
if (e.pageX > (window.innerWidth - 80)) {
posX = window.innerWidth - 320;
}
if (e.pageX < 80) {
posX = e.pageX + 180;
}
const origin = {
left: e.pageX,
top: e.pageY
left: posX,
top: posY
};
setPosition(origin);
return false;

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

@ -10,7 +10,14 @@ const downloadItem = (eve) => {
}
const deleteItem = (eve) => {
let elm = active_card.querySelector('[hash]'); // With attribute named "hash"
if (active_card == null) {
let text = "No card hovered over to delete!";
let type = "danger";
displayMessage(text, type, 3);
return ;
}
let elm = active_card.querySelector('[hash]'); // With attribute named "hash"
let elm2 = active_card.querySelector('[title]'); // With attribute named "title"
const hash = elm.getAttribute("hash");
const title = elm2.getAttribute("title");
@ -49,7 +56,6 @@ const closeFile = () => {
document.getElementById("image-viewer").style.display = "none";
document.getElementById("text-viewer").style.display = "none";
document.getElementById("pdf-viewer").style.display = "none";
document.getElementById("video-controls").style.display = "none";
title.innerText = "";
video.style.display = "none";
@ -62,7 +68,6 @@ const showFile = async (title, hash, extension, type) => {
document.getElementById("text-viewer").style.display = "none";
document.getElementById("pdf-viewer").style.display = "none";
document.getElementById("video").style.display = "none";
document.getElementById("video-controls").style.display = "none";
let titleElm = document.getElementById("selectedFile");
titleElm.innerText = title;
@ -77,7 +82,6 @@ const showFile = async (title, hash, extension, type) => {
const setupVideo = async (hash, extension) => {
let video = document.getElementById("video");
let controls = document.getElementById("video-controls");
video.poster = "static/imgs/icons/loading.gif";
video.style.display = "";
video.src = "#"
@ -102,9 +106,9 @@ const setupVideo = async (hash, extension) => {
}
}
video.src = video_path;
modal.show();
controls.style.display = "none";
video.src = video_path;
} catch (e) {
video.style.display = "none";
console.log(e);

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

@ -2,7 +2,6 @@ let fullScreenState = 0;
let clicktapwait = 200;
let shouldPlay = null;
let controlsTimeout = null;
let canHideControls = true;
const getTimeFormatted = (duration = null) => {
@ -19,45 +18,17 @@ const getTimeFormatted = (duration = null) => {
const togglePlay = (video) => {
shouldPlay = setTimeout(function () {
let controls = document.getElementById("video-controls");
shouldPlay = null;
shouldPlay = null;
if (video.paused) {
video.style.cursor = 'none';
controls.style.display = "none";
video.style.cursor = 'none';
video.play();
} else {
video.style.cursor = '';
controls.style.display = "";
video.style.cursor = '';
video.pause();
}
}, 300);
}
const showControls = () => {
const video = document.getElementById("video");
const controls = document.getElementById("video-controls");
video.style.cursor = '';
controls.style.display = "";
if (controlsTimeout) {
clearTimeout(controlsTimeout);
}
controlsTimeout = setTimeout(function () {
if (!video.paused) {
if (canHideControls) {
video.style.cursor = 'none';
controls.style.display = "none";
controlsTimeout = null;
} else {
showControls();
}
}
}, 3000);
}
const setFullscreenSettings = (parentElm, video) => {
parentElm.requestFullscreen();
@ -73,8 +44,8 @@ const unsetFullscreenSettings = (video) => {
}
const toggleFullscreen = (video) => {
containerElm = document.getElementById("video-container");
parentElm = video.parentElement;
let containerElm = document.getElementById("video-container");
let parentElm = video.parentElement;
if (video.requestFullscreen || video.webkitRequestFullscreen || video.msRequestFullscreen) {
setFullscreenSettings(parentElm, video);
@ -92,7 +63,7 @@ const toggleFullscreen = (video) => {
unsetFullscreenSettings(video);
}
fullScreenState = 0;
fullScreenState = 0;
}
fullScreenState += 1;
@ -109,7 +80,6 @@ const toggleVolumeControl = () => {
$("#video").on("loadedmetadata", function(eve){
const video = eve.target;
let videoDuration = document.getElementById("videoDuration");
@ -117,13 +87,13 @@ $("#video").on("loadedmetadata", function(eve){
});
$("#video").on("keyup", function(eve) {
$("#video").on("keydown", function(eve) {
event.preventDefault();
const key = eve.keyCode;
const video = eve.target;
if (key === 32 || key === 80) { // Spacebar for pausing
togglePlay(video);
} else if (key === 37) { // Left key for back tracking 5 sec
if (key === 37) { // Left key for back tracking 5 sec
video.currentTime -= 5;
} else if (key === 39) { // Right key for fast forward 5 sec
video.currentTime += 5;
@ -135,6 +105,17 @@ $("#video").on("keyup", function(eve) {
if (video.volume >= 0.0) {
video.volume -= 0.05;
}
}
});
$("#video").on("keyup", function(eve) {
const key = eve.keyCode;
const video = eve.target;
if (key === 32 || key === 80) { // Spacebar for pausing
togglePlay(video);
} else if (key === 70) { // f key for toggling full screen
toggleFullscreen(video);
} else if (key === 76) { // l key for toggling loop
@ -195,17 +176,6 @@ $( "#video" ).bind( "timeupdate", async function(eve) {
videoDuration.innerText = getTimeFormatted(video.currentTime);
});
// $( "#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);
// });
$( "#seek-slider" ).bind( "change", async function(eve) {
const slider = eve.target;
let video = document.getElementById("video");
@ -220,5 +190,14 @@ $( "#volume-slider" ).bind( "change", async function(eve) {
video.volume = volumeto;
});
$( "#video-controls" ).bind( "mouseenter", async function(eve) { canHideControls = false; });
$( "#video-controls" ).bind( "mouseleave", async function(eve) { canHideControls = true; });
// $( "#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);
// });

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

@ -19,28 +19,9 @@
autoplay=""
volume="0.75"
poster="{{ url_for('static', filename='imgs/icons/loading.gif')}}"
onmousemove="showControls()">
>
</video>
<div id="video-controls">
<div class="row pl-5 pr-5">
<div class="col-md-8">
<input id="seek-slider" class="form-control-range" style="width: inherit;" type="range" min="0" value="0" max="100" step="1"/>
</div>
<div class="col-md-3">
<span id="videoCurrentTime"></span>
/
<span id="videoDuration"></span>
</div>
<div class="col-md-1">
<span id="volumeIcon" onclick="toggleVolumeControl()">&#128264;</span>
<input id="volume-slider" class="form-control-range volume-control-positioner" style="display: none;"
type="range" orient="vertical" min="0.0" max="1.0" value="0.75" step="0.05" />
</div>
</div>
</div>
</div>
<!-- For image -->
<img id="image-viewer" class="card-img-top viewer"
style="display: none;"
@ -65,10 +46,24 @@
</div>
</div>
</div>
</div>
<div class="modal-footer">
<div id="video-controls" class="modal-footer">
<div class="col-md-8">
<input id="seek-slider" class="form-control-range" style="width: inherit;" type="range" min="0" value="0" max="100" step="1"/>
</div>
<div class="col-md-3">
<span id="videoCurrentTime"></span>
/
<span id="videoDuration"></span>
</div>
<div class="col-md-auto">
<span id="volumeIcon" onclick="toggleVolumeControl()">&#128264;</span>
<input id="volume-slider" class="form-control-range volume-control-positioner" style="display: none;"
type="range" orient="vertical" min="0.0" max="1.0" value="0.75" step="0.05" />
</div>
</div>
</div>
</div>
{% endblock file_modal %}

1
src/core/utils/shellfm/windows/view/utils/Settings.py
View File

@ -57,6 +57,7 @@ class Settings:
subpath = settings["base_of_home"]
HIDE_HIDDEN_FILES = True if settings["hide_hidden_files"] == "true" else False
FFMPG_THUMBNLR = FFMPG_THUMBNLR if settings["thumbnailer_path"] == "" else settings["thumbnailer_path"]
go_past_home = True if settings["go_past_home"] == "true" else False
lock_folder = True if settings["lock_folder"] == "true" else False
locked_folders = settings["locked_folders"].split("::::")

5
src/user_config/webfm/settings.json
View File

@ -2,9 +2,10 @@
"settings": {
"base_of_home": "/LazyShare",
"hide_hidden_files": "true",
"go_past_home": "true",
"thumbnailer_path": "ffmpegthumbnailer",
"go_past_home": "false",
"lock_folder": "true",
"locked_folders": "Synced Backup::::venv::::flasks::::Cryptomator",
"locked_folders": "Synced Backup::::venv::::flasks::::Encrypted Vault::::Cryptomator",
"mplayer_options": "-quiet -really-quiet -xy 1600 -geometry 50%:50%",
"music_app": "/opt/deadbeef/bin/deadbeef",
"media_app": "mpv",