develop #2
@ -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);
|
||||
}
|
||||
|
||||
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
@ -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);
|
||||
|
@ -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);
|
||||
// });
|
||||
|
@ -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()">🔈</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()">🔈</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 %}
|
||||
|
@ -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("::::")
|
||||
|
@ -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",
|
||||
|
Loading…
Reference in New Issue
Block a user