controller test

src/renderer/index.js

@@ -302,6 +302,70 @@ const app = new Vue({
         }
     },
     methods: {
+        simulateController() {
+            let intTabIndex = 0
+
+            var sounds = {
+                Confirm: new Audio("./sounds/confirm.ogg"),
+                Menu: new Audio("./sounds/btn1.ogg"),
+                Hover: new Audio("./sounds/hover.ogg")
+            }
+
+            document.addEventListener("keydown", (e) => {
+                sounds.Confirm.currentTime = 0
+                sounds.Menu.currentTime = 0
+                sounds.Hover.currentTime = 0
+                let tabbable = $("[tabindex]")
+                console.log(e.key)
+                switch (e.key) {
+                    default:
+                    break;
+                    case "ArrowLeft":
+
+                        e.preventDefault()
+                        break;
+                    case "ArrowRight":
+                        e.preventDefault()
+                        break;
+                    case "ArrowUp":
+                        sounds.Hover.play()
+                        if(intTabIndex <= 0) {
+                            intTabIndex = 0
+                        }else{
+                            intTabIndex--
+                        }
+                        $(tabbable[intTabIndex]).focus()
+                        // $("#app-content").scrollTop($(document.activeElement).offset().top)
+                        e.preventDefault()
+                        break;
+                    case "ArrowDown":
+                        sounds.Hover.play()
+                        if(intTabIndex < tabbable.length) {
+                            intTabIndex++
+                        }else{
+                            intTabIndex = tabbable.length
+                        }
+                        $(tabbable[intTabIndex]).focus()
+                        // $("#app-content").scrollTop($(document.activeElement).offset().top)
+                        e.preventDefault()
+                        break;
+                    case "c":
+                        app.resetState()
+                    break;
+                    case "x": 
+                        sounds.Menu.play()
+                        document.activeElement.dispatchEvent(new Event("contextmenu"))
+                        e.preventDefault()
+                    break;
+                    case "z":
+                        sounds.Confirm.play()
+                        document.activeElement.dispatchEvent(new Event("click"))
+                        document.activeElement.dispatchEvent(new Event("controller-click"))
+                        e.preventDefault()
+                        break;
+                }
+            });
+        },
         songLinkShare(amUrl) {
             notyf.open({ type: "info", className: "notyf-info", message: app.getLz('term.song.link.generate') })
             let self = this

src/renderer/views/components/mediaitem-list-item.ejs

@@ -12,6 +12,9 @@
          @mouseenter="checkLibrary"
          @mouseover="showInLibrary = true"
          @mouseleave="showInLibrary = false"
+         @dblclick="route()"
+         @controller-click.self="route()"
+         tabindex="0"
          :class="[{'mediaitem-selected': app.select_hasMediaItem(guid)}, addClasses]">
         <template v-if="isVisible">
             <div class="isLibrary" v-if="showLibraryStatus == true">

src/renderer/views/components/mediaitem-square.ejs

@@ -1,5 +1,9 @@
 <script type="text/x-template" id="mediaitem-square">
-    <div tabindex="0"
+    <div
+        tabindex="0"
+        @click.self="app.routeView(item)"
+        @controller-click.self="app.routeView(item)"
+        @contextmenu.self="contextMenu"
          class="cd-mediaitem-square" :class="getClasses()" @contextmenu="contextMenu"
          v-observe-visibility="{callback: visibilityChanged}"
          :style="{'--spcolor': getBgColor()}">