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

Added background manager

This commit is contained in:
itdominator 2023-02-06 21:36:49 -06:00
parent ae0486f020
commit 627f30789d
10 changed files with 159 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/core/__init__.py
View File

@ -15,6 +15,7 @@ from flask_login import current_user, login_user, logout_user, LoginManager
from core.utils import Logger
ROOT_FILE_PTH = os.path.dirname(os.path.realpath(__file__))
app = Flask(__name__)
app.config.from_object("core.config.ProductionConfig")
# app.config.from_object("core.config.DevelopmentConfig")

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

@ -8,12 +8,14 @@ from flask_login import current_user
# App imports
from core import app, logger, oidc, db, Favorites # Get from __init__
from core import app, logger, oidc, db, Favorites, ROOT_FILE_PTH # Get from __init__
from core.utils import MessageHandler # Get simple message processor
from core.utils.shellfm import WindowController # Get file manager controller
from core.utils.tmdbscraper import scraper # Get media art scraper
BG_IMGS_PATH = ROOT_FILE_PTH + "/static/imgs/backgrounds/"
BG_FILE_TYPE = (".webm", ".mp4", ".gif", ".jpg", ".png", ".webp")
msgHandler = MessageHandler()
tmdb = scraper.get_tmdb_scraper()
window_controllers = {}
@ -66,6 +68,16 @@ def home():
message = 'Must use GET request type...')
@app.route('/backgrounds', methods=['GET', 'POST'])
def backgrounds():
files = []
data = os.listdir(BG_IMGS_PATH)
for file in data:
if file.lower().endswith(BG_FILE_TYPE):
files.append(file)
return '{ "backgrounds": ' + json.dumps(files) + '}'
@app.route('/api/list-files/<_hash>', methods=['GET', 'POST'])
def listFiles(_hash = None):
if request.method == 'POST':

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

@ -19,6 +19,17 @@
z-index: -999;
}
#background-selection {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(18em, 1fr));
grid-column-gap: 1em;
grid-row-gap: 1em;
height: 65vh;
bottom: 5%;
overflow-x: hidden;
overflow-y: scroll;
}
#master-container {
height: 85vh;
overflow-x: hidden;
@ -42,7 +53,7 @@
supported by Chrome, Edge, Opera and Firefox */
}
.selectedActiveMedia {
.selected-active-media {
background-color: rgba(25, 65, 0, 0.64);
}
@ -53,6 +64,20 @@
}
.bg-imgs {
width: 20em;
height: auto;
border: 5px solid #e0e0e0;
cursor: pointer;
}
.bg-imgs:hover {
border-radius: 25%;
border-style: solid;
border-color: #f8940674; /* #00e8ff */
}
.card-title-text {
white-space: nowrap;
overflow: hidden;

58
src/core/static/js/backgrounds-manager.js Normal file
View File

@ -0,0 +1,58 @@
const getBackgrounds = async () => {
const ulElm = document.getElementById('background-selection');
const data = await fetchData( "/backgrounds" );
size = data.backgrounds.length;
backgrounds = data.backgrounds;
for (var i = 0; i < size; i++) {
generateBgElm(ulElm, backgrounds[i]);
}
}
const generateBgElm = (ulElm, background) => {
const liElm = document.createElement("LI");
const bgPath = "/static/imgs/backgrounds/" + background;
let elm = document.createElement("VIDEO");
elm = setBackgroundElement(elm, bgPath);
elm.className = "bg-imgs";
liElm.appendChild(elm);
ulElm.appendChild(liElm);
}
const loadBackground = () => {
const bgElm = document.getElementById("bg");
const bgPath = getCookie('bgSlug');
if (!bgPath) {
const path = '/static/imgs/backgrounds/background.png';
setCookie('bgSlug', path);
setBackgroundElement(bgElm, path);
} else {
setBackgroundElement(bgElm, bgPath);
}
}
const setBackgroundCookie = (bgPath) => {
const elm = document.getElementById("bg");
setBackgroundElement(elm, bgPath);
setCookie('bgSlug', bgPath);
}
const clearBackgroundList = () => {
let bgList = document.getElementById("background-selection");
clearChildNodes(bgList);
}
const setBackgroundElement = (elm, bgPath) => {
if (bgPath.toLowerCase().endsWith(".mp4") ||
bgPath.toLowerCase().endsWith(".webm")) {
elm.src = bgPath;
elm.poster = "";
} else {
elm.src = "";
elm.poster = bgPath;
}
return elm;
}

12
src/core/static/js/events.js
View File

@ -16,6 +16,7 @@ document.body.onload = (eve) => {
}
setTimeout(function () {
loadBackground();
getFavesAjax();
reloadDirectory();
}, 400);
@ -54,7 +55,18 @@ const openFileLocally = (eve) => {
}
// Background control events
$( "#background-selection" ).bind( "click", async function(eve) {
const target = eve.target;
if (target.className === "bg-imgs") {
const path = (!target.src.endsWith("/")) ? target.src : target.poster;
setBackgroundCookie(path);
}
});
$( "#load-bglist-btn" ).bind( "click", async function(eve) {
getBackgrounds();
});
$( "#search-files-field").bind( "keyup", async function(eve) {
searchPage();

3
src/core/static/js/post-ajax.js
View File

@ -70,8 +70,7 @@ const updateHTMLDirList = async (data) => {
background_image = "api/file-manager-action/files/" + images[0][1] + '?d=' + Date.now();
updateBackground(background_image, false);
} else {
background_image = "static/imgs/backgrounds/particles.mp4";
updateBackground(background_image);
loadBackground();
}
// Set faves state

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

@ -126,8 +126,7 @@ const setupVideo = async (hash, extension) => {
}
}
video.src = video_path;
video.src = video_path;
modal.show();
} catch (e) {
video.style.display = "none";
@ -216,15 +215,8 @@ const clearSearch = () => {
const updateBackground = (srcLink, isvideo = true) => {
try {
let elm = document.getElementById("bg");
if (isvideo) {
if (elm.getAttribute('src') === "") {
elm.src = srcLink;
}
} else {
elm.src = "";
elm.setAttribute("poster", srcLink);
}
const elm = document.getElementById("bg");
setBackgroundElement(elm, srcLink);
} catch (e) { }
}
@ -312,13 +304,13 @@ const setSelectedActiveMedia = (elm) => {
break
}
card.classList.add("selectedActiveMedia");
card.classList.add("selected-active-media");
}
const clearSelectedActiveMedia = () => {
try {
const elm = document.getElementsByClassName('selectedActiveMedia')[0];
elm.classList.remove("selectedActiveMedia");
const elm = document.getElementsByClassName('selected-active-media')[0];
elm.classList.remove("selected-active-media");
} catch (e) {}
}

5
src/core/templates/body-header.html
View File

@ -10,6 +10,11 @@
<div class="col col-auto">
<!-- Left menues -->
<ul class="navbar-nav">
<li class="nav-item" data-bs-toggle="modal" data-bs-target="#backgrounds-modal">
<i class="nav-link bi bi-projector-fill" aria-label="File viewer" title="File viewer..." >
Backgrounds
</i>
</li>
<li class="nav-item" data-bs-toggle="modal" data-bs-target="#file-view-modal">
<i class="nav-link bi bi-projector-fill" aria-label="File viewer" title="File viewer..." >
Media Viewer

14
src/core/templates/layout.html
View File

@ -39,15 +39,7 @@
</head>
{% endblock %}
<body>
<!-- <video id="bg" src="{{ url_for('static', filename='imgs/backgrounds/particles.mp4')}}"
poster="{{ url_for('static', filename='imgs/backgrounds/000.png')}}"
autoplay loop>
</video> -->
<video id="bg" src="{{ url_for('static', filename='imgs/backgrounds/bubbles.mp4')}}"
poster="{{ url_for('static', filename='imgs/backgrounds/000.png')}}"
autoplay loop>
</video>
<video id="bg" src="" poster="" autoplay loop> </video>
<div class="menu">
<ul class="menu-options">
@ -98,6 +90,7 @@
{% include "modals/backgrounds-modal.html" %}
{% include "modals/options-modal.html" %}
{% include "modals/favorites-modal.html" %}
{% include "modals/file-modal.html" %}
@ -118,13 +111,16 @@
<!-- DASH JS -->
<script src="{{ url_for('static', filename='js/libs/dash.all.min.js')}}" type="text/javascript"></script>
<script src="{{ url_for('static', filename='js/libs/js.cookie.js')}}"></script>
<!-- Application Imports -->
{% block body_scripts_additional %}
{% endblock body_scripts_additional%}
<script src="{{ url_for('static', filename='js/cookie-manager.js')}}"></script>
<script src="{{ url_for('static', filename='js/color-mode-toggler.js')}}"></script>
<script src="{{ url_for('static', filename='js/context-menu.js')}}"></script>
<script src="{{ url_for('static', filename='js/backgrounds-manager.js')}}"></script>
{% endblock %}
</body>
</html>

32
src/core/templates/modals/backgrounds-modal.html Normal file
View File

@ -0,0 +1,32 @@
{% block backgrounds_modal %}
<!-- Backgrounds modal -->
<div class="modal fade" id="backgrounds-modal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-xl" role="document">
<div class="modal-content">
<div class="modal-header">
<h3>Backgrounds:</h3>
<button id="load-bglist-btn" class="btn btn-primary btn-sm mx-auto mt-2" type="button">
<span class="glyphicon glyphicon-device-camera-video"></span>
Load...
</button>
<button type="button" class="btn btn-danger btn-sm" data-bs-dismiss="modal" aria-label="Close">
<span aria-hidden="true">Close</span>
</button>
</div>
<div class="modal-body">
<div class="row">
<div class="col">
<ul id="background-selection" class="scroller">
</ul>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" data-bs-dismiss="modal" class="btn btn-danger btn-sm">Close</button>
</div>
</div>
</div>
</div>
{% endblock backgrounds_modal %}