[A] file list in menu, moveToBlacklist (WIP, temp delete rn)

public/app.js

@@ -9,6 +9,7 @@ new Vue({
     videoSrc: null,
     isDownloading: false,
     controlsTimeout: null,
+    menuVisible: false,
   },
   methods: {
     next: function () {
@@ -107,6 +108,7 @@ new Vue({
       }
     },
     toggleMenu: function () {
+      this.menuVisible = !this.menuVisible;
       if (document.querySelector('.fullScreenMenu').style.display === "none") {
         document.querySelector('.fullScreenMenu').style.display = "";
         this.animateCSS('.fullScreenMenu', 'rotateIn');
@@ -137,9 +139,14 @@ new Vue({
         node.addEventListener('animationend', handleAnimationEnd);
       })
     },
-    interfaceClick: function () {
+    interfaceClick: function (time = 5000) {
       clearTimeout(this.controlsTimeout)
-      this.controlsTimeout = setTimeout(() => this.toggleControls(), 5000);
+      this.controlsTimeout = setTimeout(() => this.toggleControls(), time);
+    },
+    moveToBlacklist: function (file) {
+      const index = this.files.findIndex(f => f.filename === file.filename);
+      this.files.splice(index, 1);
+      // TODO add file to blacklist
     }
   },
   mounted() {

public/index.css

@@ -139,3 +139,28 @@ body {
   top: 10px;
   right: 10px;
 }
+
+#app .fullScreenMenu .container {
+  width: 60vw;
+  margin: 0 auto;
+  overflow: hidden scroll;
+}
+
+#app .fullScreenMenu .container ul {
+  list-style-type: none;
+  width: 80%;
+}
+
+#app .fullScreenMenu .container li {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+
+#app .fullScreenMenu .container img, #app .fullScreenMenu .container video {
+  height: 40px;
+  width: auto;
+  margin: 0;
+}

public/index.html

@@ -35,12 +35,28 @@
             </div>
             <!-- menu -->
             <div class="fullScreenMenu" style="display: none;">
+                <!-- close btn -->
                 <div class="closeBtn">
                     <div class="btn" v-on:click="toggleMenu()">
                         <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M6.2253 4.81108C5.83477 4.42056 5.20161 4.42056 4.81108 4.81108C4.42056 5.20161 4.42056 5.83477 4.81108 6.2253L10.5858 12L4.81114 17.7747C4.42062 18.1652 4.42062 18.7984 4.81114 19.1889C5.20167 19.5794 5.83483 19.5794 6.22535 19.1889L12 13.4142L17.7747 19.1889C18.1652 19.5794 18.7984 19.5794 19.1889 19.1889C19.5794 18.7984 19.5794 18.1652 19.1889 17.7747L13.4142 12L19.189 6.2253C19.5795 5.83477 19.5795 5.20161 19.189 4.81108C18.7985 4.42056 18.1653 4.42056 17.7748 4.81108L12 10.5858L6.2253 4.81108Z" fill="currentColor" /> </svg>
                     </div>
                 </div>
-
+                <!-- content -->
+                <div v-if="menuVisible" class="container">
+                    <h3 style="text-align: center;">Images</h3>
+                    <ul>
+                        <li  v-for="file in files">
+                            <img v-if="file.mime.includes('image')" v-bind:src="'/files/'+file.basename">
+                            <video v-if="file.mime.includes('video')" autoplay muted loop>
+                                <source v-bind:src="'/files/'+file.basename" v-bind:type="file.mime">
+                            </video>
+                            {{file.filename}}
+                            <span class="btn" v-on:click="moveToBlacklist(file)">
+                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" > <path fill-rule="evenodd" clip-rule="evenodd" d="M17 5V4C17 2.89543 16.1046 2 15 2H9C7.89543 2 7 2.89543 7 4V5H4C3.44772 5 3 5.44772 3 6C3 6.55228 3.44772 7 4 7H5V18C5 19.6569 6.34315 21 8 21H16C17.6569 21 19 19.6569 19 18V7H20C20.5523 7 21 6.55228 21 6C21 5.44772 20.5523 5 20 5H17ZM15 4H9V5H15V4ZM17 7H7V18C7 18.5523 7.44772 19 8 19H16C16.5523 19 17 18.5523 17 18V7Z" fill="currentColor" /> <path d="M9 9H11V17H9V9Z" fill="currentColor" /> <path d="M13 9H15V17H13V9Z" fill="currentColor" /> </svg>
+                            </span>
+                        </li>
+                    </ul>
+                </div>
             </div>
             <!-- touch canvas -->
             <div class="touchCanvas" v-on:click="toggleControls()"></div>