diff --git a/src/core/__init__.py b/src/core/__init__.py index 8f92ea8..f7d8ac5 100644 --- a/src/core/__init__.py +++ b/src/core/__init__.py @@ -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") diff --git a/src/core/routes/Routes.py b/src/core/routes/Routes.py index 1bbbc53..505e341 100644 --- a/src/core/routes/Routes.py +++ b/src/core/routes/Routes.py @@ -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': diff --git a/src/core/static/css/main.css b/src/core/static/css/main.css index 99e4355..4e06daa 100644 --- a/src/core/static/css/main.css +++ b/src/core/static/css/main.css @@ -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; diff --git a/src/core/static/js/backgrounds-manager.js b/src/core/static/js/backgrounds-manager.js new file mode 100644 index 0000000..cea809c --- /dev/null +++ b/src/core/static/js/backgrounds-manager.js @@ -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; +} diff --git a/src/core/static/js/events.js b/src/core/static/js/events.js index b61131f..bd99dcb 100644 --- a/src/core/static/js/events.js +++ b/src/core/static/js/events.js @@ -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(); diff --git a/src/core/static/js/post-ajax.js b/src/core/static/js/post-ajax.js index 0e5d47a..dab7819 100644 --- a/src/core/static/js/post-ajax.js +++ b/src/core/static/js/post-ajax.js @@ -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 diff --git a/src/core/static/js/ui-logic.js b/src/core/static/js/ui-logic.js index 9e78e4b..b59bc45 100644 --- a/src/core/static/js/ui-logic.js +++ b/src/core/static/js/ui-logic.js @@ -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) {} } diff --git a/src/core/templates/body-header.html b/src/core/templates/body-header.html index 542085f..a9c614a 100644 --- a/src/core/templates/body-header.html +++ b/src/core/templates/body-header.html @@ -10,6 +10,11 @@