From 2c80a269dc16e3085724c3ec3777feca9c2fbcfa Mon Sep 17 00:00:00 2001 From: JSuttHoops Date: Sat, 7 Jun 2025 18:25:35 -0500 Subject: [PATCH] Add accent color setting and video cycling --- app.js | 36 +++++++++++++++++++++++++++++++++++- web/config.css | 14 +++++++++++--- web/config.html | 8 ++++++-- web/config.js | 9 ++++++++- web/screensaver.js | 32 +++++++++++++++++++++++++++++--- 5 files changed, 89 insertions(+), 10 deletions(-) diff --git a/app.js b/app.js index 6fd1830..6ae3eb2 100644 --- a/app.js +++ b/app.js @@ -35,6 +35,8 @@ let downloading = false; let allowedVideos = store.get("allowedVideos"); let previouslyPlayed = []; let currentlyPlaying = ''; +let videoHistory = []; +let historyIndex = -1; let preview = false; let suspend = false; let suspendCountdown; @@ -485,6 +487,7 @@ function setUpConfigFile() { store.set('textFont', store.get('textFont') ?? "Segoe UI"); store.set('textSize', store.get('textSize') ?? "2"); store.set('textColor', store.get('textColor') ?? "#FFFFFF"); + store.set('accentColor', store.get('accentColor') ?? "#ff5722"); let displayText = store.get('displayText'); if (displayText) { if (!displayText.topleft[0]) { @@ -542,7 +545,15 @@ ipcMain.on('quitApp', (event, arg) => { }); ipcMain.on('keyPress', (event, key) => { - if (key === store.get('skipKey') && store.get('skipVideosWithKey')) { + if (key === 'ArrowRight') { + for (let i = 0; i < screens.length; i++) { + screens[i].webContents.send('newVideo'); + } + } else if (key === 'ArrowLeft') { + for (let i = 0; i < screens.length; i++) { + screens[i].webContents.send('previousVideo'); + } + } else if (key === store.get('skipKey') && store.get('skipVideosWithKey')) { for (let i = 0; i < screens.length; i++) { screens[i].webContents.send('newVideo'); } @@ -551,6 +562,18 @@ ipcMain.on('keyPress', (event, key) => { } }); +ipcMain.on('cycleVideo', (event, direction) => { + if (direction === 'next') { + for (let i = 0; i < screens.length; i++) { + screens[i].webContents.send('newVideo'); + } + } else if (direction === 'prev') { + for (let i = 0; i < screens.length; i++) { + screens[i].webContents.send('previousVideo'); + } + } +}); + ipcMain.on('updateCache', (event) => { const path = cachePath; let videoList = []; @@ -712,6 +735,17 @@ ipcMain.handle('newVideoId', (event, lastPlayed) => { } } currentlyPlaying = newId(); + videoHistory = videoHistory.slice(0, historyIndex + 1); + videoHistory.push(currentlyPlaying); + historyIndex = videoHistory.length - 1; + return currentlyPlaying; +}) + +ipcMain.handle('previousVideoId', () => { + if (historyIndex > 0) { + historyIndex--; + currentlyPlaying = videoHistory[historyIndex]; + } return currentlyPlaying; }) diff --git a/web/config.css b/web/config.css index da4c739..b7f48cf 100644 --- a/web/config.css +++ b/web/config.css @@ -16,10 +16,18 @@ width: 25px; height: 25px; border-radius: 50%; - background: #ff5722; + background: var(--accent-color); cursor: pointer; } +:root { + --accent-color: #ff5722; +} + +.w3-blue { + background-color: var(--accent-color) !important; +} + :focus { outline: 0; } @@ -57,7 +65,7 @@ .autocomplete-active { /*when navigating through the items using the arrow keys:*/ - background-color: DodgerBlue !important; + background-color: var(--accent-color) !important; color: #ffffff; } @@ -77,7 +85,7 @@ } .imagePositionWithValue ~ label{ - background-color: #87CEEB; + background-color: var(--accent-color); position: absolute; top: 7px; left: 7px; diff --git a/web/config.html b/web/config.html index a204282..133d262 100644 --- a/web/config.html +++ b/web/config.html @@ -214,8 +214,12 @@

Style

onclick="resetSetting('playbackSpeed', 'slider', 1)">
- + +
+

Filter Settings

diff --git a/web/config.js b/web/config.js index 7d7510d..d319872 100644 --- a/web/config.js +++ b/web/config.js @@ -13,7 +13,7 @@ function displaySettings() { for (let i = 0; i < checked.length; i++) { $(`#${checked[i]}`).prop('checked', electron.store.get(checked[i])); } - let numTxt = ["sunrise", "sunset", "textFont", "textSize", "textColor", "startAfter", "blankAfter", "fps", "latitude", "longitude", "randomSpeed", "skipKey", "transitionType", "fillMode", "globalShortcutModifier1", "globalShortcutModifier2", "globalShortcutKey", "lockAfterRunAfter", "videoFileType"]; + let numTxt = ["sunrise", "sunset", "textFont", "textSize", "textColor", "accentColor", "startAfter", "blankAfter", "fps", "latitude", "longitude", "randomSpeed", "skipKey", "transitionType", "fillMode", "globalShortcutModifier1", "globalShortcutModifier2", "globalShortcutKey", "lockAfterRunAfter", "videoFileType"]; for (let i = 0; i < numTxt.length; i++) { $(`#${numTxt[i]}`).val(electron.store.get(numTxt[i])); } @@ -34,6 +34,7 @@ function displaySettings() { displayCustomVideos(); colorTextPositionRadio(); updateSettingVisibility(); + updateAccent(); //display update, if there is one //console.log(electron.store.get('updateAvailable')); @@ -43,6 +44,10 @@ function displaySettings() { } } +function updateAccent() { + document.documentElement.style.setProperty('--accent-color', electron.store.get('accentColor')); +} + displaySettings(); function displayPlaybackSettings() { @@ -69,6 +74,7 @@ function updateSetting(setting, type) { case "select": case "time": electron.store.set(setting, document.getElementById(setting).value); + if (setting === 'accentColor') { updateAccent(); } break; case "filterSlider": $(`#${setting}Text`).text(document.getElementById(setting).value); @@ -106,6 +112,7 @@ function resetSetting(setting, type, value) { case "text": case "time": electron.store.set(setting, value); + if (setting === 'accentColor') { updateAccent(); } break; case "filterSlider": let s = electron.store.get('videoFilters'); diff --git a/web/screensaver.js b/web/screensaver.js index fbd96bc..4fa7e3f 100644 --- a/web/screensaver.js +++ b/web/screensaver.js @@ -17,7 +17,13 @@ function quitApp() { //quit when a key is pressed document.addEventListener('keydown', (e) => { - electron.ipcRenderer.send('keyPress', e.code); + if (e.code === 'ArrowRight') { + electron.ipcRenderer.send('cycleVideo', 'next'); + } else if (e.code === 'ArrowLeft') { + electron.ipcRenderer.send('cycleVideo', 'prev'); + } else { + electron.ipcRenderer.send('keyPress', e.code); + } }); document.addEventListener('mousedown', quitApp); setTimeout(function () { @@ -61,12 +67,13 @@ function videoError(event) { } } -function prepVideo(videoContainer, callback) { +function prepVideo(videoContainer, callback, forcedId) { if (blackScreen) { return } containers[videoContainer].src = ""; - electron.ipcRenderer.invoke('newVideoId', currentlyPlaying).then((id) => { + let idPromise = forcedId ? Promise.resolve(forcedId) : electron.ipcRenderer.invoke('newVideoId', currentlyPlaying); + idPromise.then((id) => { let videoInfo, videoSRC; //grab video info and file location based on whether it is a custom video or not if (id[0] === "_") { @@ -138,6 +145,21 @@ function newVideo() { }); } +function previousVideo() { + electron.ipcRenderer.invoke('previousVideoId').then((id) => { + if (!id) return; + prepVideo(prePlayer, () => { + clearTimeout(videoWaitingTimeout); + videoWaitingTimeout = setTimeout(() => { + playVideo(prePlayer, () => { + clearTimeout(transitionTimeout); + fadeVideoIn(transitionLength); + }); + }, 500); + }, id); + }); +} + function switchVideoContainers() { if (videoQuality) { containers[currentPlayer].style.display = 'none'; @@ -703,6 +725,10 @@ electron.ipcRenderer.on('newVideo', () => { newVideo(); }); +electron.ipcRenderer.on('previousVideo', () => { + previousVideo(); +}); + electron.ipcRenderer.on('blankTheScreen', () => { blackScreen = true; fadeVideoOut(transitionLength);