Video Cycling Update + Accent Color Customization

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;
 })
 

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;

web/config.html

@@ -214,8 +214,12 @@ <h3>Style</h3>
                                                                           onclick="resetSetting('playbackSpeed', 'slider', 1)"><i
                         class="fa fa-undo"></i></span>
                     <br>
-                    <input type="range" min=".75" max="4" value="1" step=".05" id="playbackSpeed" class="slider"
-                           onchange="updateSetting('playbackSpeed','slider')">
+                   <input type="range" min=".75" max="4" value="1" step=".05" id="playbackSpeed" class="slider"
+                          onchange="updateSetting('playbackSpeed','slider')">
+                    <br>
+                    <label for="accentColor">Accent Color: </label><input class="w3-input" id="accentColor" type="color"
+                                                                           style="width: 5%; display: inline; margin-top: 2%; padding: 0;"
+                                                                           onchange="updateSetting('accentColor','text')">
                     <h4>Filter Settings
                         <span class="w3-right" onclick="resetFilterSettings()"><i class="fa fa-undo"></i></span></h4>
                     <div class="w3-display-container" id="videoFilterSettings"></div>

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');

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);