fix: Fix keyboard shortcuts in scene detail pane (xbapps#765)

* Details_pane_shortcut_keys

Removed personal config files from previous PR
Updated README with shortcut keys

* Update README.md

* fix_gallery_toggle

previously only toggled out of video

* updated_W_shortcut

* Update Details.vue

.gitignore

@@ -1,6 +1,6 @@
 /.idea
 .DS_Store
-.vscode/settings.json
+.vscode/
 
 test.db
 /test_cache

README.md

@@ -106,3 +106,15 @@ Ready to get started?
 #### Add specific filter to DeoVR
 * On the XBVR scenes page, create a filter (cast, site, tags, etc.) and sort order, then create a "saved search" (see top left) and check "use as DeoVR list". 
 * Inside DeoVR you will now see your saved search listed
+#### Keyboard Shortcuts
+* Details Pane  
+o - previous scene  
+p - next scene  
+e - edit scene  
+w - toggle watchlist  
+f - toggle favourite  
+W - toggle Watched status (Capital W)  
+g - toggles gallery / video window  
+esc - closes details pane  
+left arrow - cycles backwards in gallery / skips backwards in video  
+right arrow - cycles forward in gallery / skips forward in video

ui/src/views/scenes/Details.vue

@@ -8,8 +8,8 @@
       @keydown.o="prevScene"
       @keydown.p="nextScene"
       @keydown.f="$store.commit('sceneList/toggleSceneList', {scene_id: item.scene_id, list: 'favourite'})"
-      @keydown.w="$store.commit('sceneList/toggleSceneList', {scene_id: item.scene_id, list: 'watchlist'})"
-      @keydown.W="$store.commit('sceneList/toggleSceneList', {scene_id: item.scene_id, list: 'watched'})"
+      @keydown.exact.w="$store.commit('sceneList/toggleSceneList', {scene_id: item.scene_id, list: 'watchlist'})"
+      @keydown.shift.w="$store.commit('sceneList/toggleSceneList', {scene_id: item.scene_id, list: 'watched'})"
       @keydown.e="$store.commit('overlay/editDetails', {scene: item.scene})"
       @keydown.g="toggleGallery"
     />
@@ -512,7 +512,11 @@ export default {
       }
     },
     toggleGallery () {
-      this.activeMedia = 0
+      if (this.activeMedia == 0) {
+        this.activeMedia = 1
+      } else {
+        this.activeMedia = 0
+        }
     },
     scrollToActiveIndicator (value) {
       const indicators = document.querySelector('.carousel-indicator')