Merge pull request #38 from 0x96EA/feature/issue-34/keyboard_shortcuts

Added some keyboard shortcuts
akuse-app · Jan 24, 2024 · 9618ea0 · 9618ea0
2 parents af516a9 + 85e67d7
commit 9618ea0
Show file tree

Hide file tree

Showing 3 changed files with 78 additions and 17 deletions.
diff --git a/src/modules/frontend/frontend.js b/src/modules/frontend/frontend.js
@@ -1430,7 +1430,7 @@ module.exports = class Frontend {
      */
     isAnimePageDisplayed() {
         const animeId = document.querySelector('#persistent-data-common .persdata-anime-id').innerHTML
-        return document.getElementById(`anime-page-${animeId}`).style.display == 'flex'
+        return document.getElementById(`anime-page-${animeId}`)?.style.display == 'flex'
     }
 
     /**
@@ -1439,7 +1439,7 @@ module.exports = class Frontend {
      * @returns true if the list editor page is displayed, false otherwise
      */
     isListEditorDisplayed() {
-        return document.getElementById('list-editor-page').style.display == 'flex'
+        return document.getElementById('list-editor-page')?.style.display == 'flex'
     }
 
     /**
@@ -1448,7 +1448,16 @@ module.exports = class Frontend {
      * @returns true if the settings page is displayed, false otherwise
      */
     isSettingsPageDisplayed() {
-        return document.getElementById('settings-page').style.display == 'flex'
+        return document.getElementById('settings-page')?.style.display == 'flex'
+    }
+
+    /**
+     * Return if the video page is displayed or not
+     * 
+     * @returns true if the video page is displayed, false otherwise
+     */
+    isVideoPageDisplayed() {
+        return document.querySelector('.container')?.style.display == 'block'
     }
 
     /**

diff --git a/src/scripts/eventListeners.js b/src/scripts/eventListeners.js
@@ -35,18 +35,7 @@ frontend.enableFeaturedSectionScrollingButtons()
 // pressing esc closes modal pages
 document.addEventListener('keydown', (event) => {
     if(event.code === 'Escape') {
-        if(frontend.isAnimePageDisplayed()
-           && !frontend.isListEditorDisplayed()) {
-            frontend.closeAnimePage()
-        }
-
-        if(frontend.isListEditorDisplayed()) {
-            frontend.closeListEditorPage()
-        }
-
-        if(frontend.isSettingsPageDisplayed()) {
-            frontend.closeSettingsPage()
-        }
+        clearModalPages();
     }
 })
 
@@ -200,3 +189,35 @@ search_list.forEach(list => {
         frontend.triggerAnimeModal(event)
     })
 })
+
+/* --- NAVIGATION --- */
+function clearModalPages() {
+    if(frontend.isAnimePageDisplayed() && !frontend.isListEditorDisplayed()) {
+        frontend.closeAnimePage()
+    }
+
+    if(frontend.isListEditorDisplayed()) {
+        frontend.closeListEditorPage()
+    }
+
+    if(frontend.isSettingsPageDisplayed()) {
+        frontend.closeSettingsPage()
+    }
+}
+
+document.addEventListener('keydown', (event) => {
+    if (!frontend.isVideoPageDisplayed()) {
+        switch(event.key) {
+            case '1': {
+                clearModalPages();
+                document.getElementById('nav-home').click();
+                break
+            }
+            case '2': {
+                clearModalPages();
+                document.getElementById('nav-search').click();
+                break
+            }
+        }
+    }
+})
diff --git a/src/scripts/videoScript.js b/src/scripts/videoScript.js
@@ -184,7 +184,7 @@ mainVideo.addEventListener('timeupdate', () => {
     }
 })
 
-document.addEventListener("keydown", (event) => {
+document.addEventListener("keydown", async (event) => {
     if (event.isComposing || event.keyCode === 229) {
         return
     }
@@ -218,6 +218,21 @@ document.addEventListener("keydown", (event) => {
                 break
             }
         }
+        switch(event.key) {
+            case 'f': {
+                toggleFullScreen()
+                break
+            }
+            case 'm': {
+                toggleMute()
+                break
+            }
+            case 'n': {
+                await video.nextEpisode()
+                updated = 0
+                break
+            }
+        }
     }
 })
 
@@ -238,4 +253,20 @@ function toggleFullScreen() {
     container.classList.toggle("fullscreen")
     fullScreenBtn.classList.replace("fa-expand", "fa-compress")
     container.requestFullscreen()
-}
+}
+
+function toggleMute() {
+    if (videoIsDisplayed) {
+        if(mainVideo.volume == 0) {
+            mainVideo.volume = volumeBtn.dataset.volume;
+            volumeSlider.value = volumeBtn.dataset.volume;
+            volumeBtn.setAttribute('data-volume', 0)
+            return volumeBtn.classList.replace("fa-volume-xmark", "fa-volume-high")
+        } else {
+            volumeBtn.setAttribute('data-volume', mainVideo.volume)
+            mainVideo.volume = 0;
+            volumeSlider.value = 0;
+            return volumeBtn.classList.replace("fa-volume-high", "fa-volume-xmark")
+        }
+    }
+}