@christianriedl/media 1.0.25 → 1.0.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@christianriedl/media",
-  "version": "1.0.25",
+  "version": "1.0.26",
   "description": "RIC media interfaces",
 
   "main": "dist/index.js",

package/src/views/PhotoAlbumPage.vue

@@ -12,7 +12,8 @@
     const heightStyle = computed(() => { return { height: appState.bodyHeight.value + 'px', overflowY: 'hidden' } });
     const isMobile = appState.isMobile;
     const url = ref('');
-    const dialog = ref(false);
+    const infoDialog = ref(false);
+    const keyDialog = ref(false);
     const folderId = decodeURIComponent(route.query!.id!.toString());
     const index = ref(0);
     const items = reactive<IPictureFile[]>([]);
@@ -104,8 +105,8 @@
                 });
         }
     }
-    function onClick(ev: Event) {
-        dialog.value = true;
+    function onDblClick(ev: Event) {
+        keyDialog.value = true;
     }
     async function onKey(ev: KeyboardEvent) {
         switch (ev.code) {
@@ -124,9 +125,10 @@
                 const item = items[index.value];
                 const exif = await mediaService.getExifInfo(item.DLNAParentID, item.DLNAID);
                 setMetaData(exif, item);
-                dialog.value = true;
+                infoDialog.value = true;
                 break;
             case "KeyP":
+            case "KeyC":
                 cycle.value = true;
                 break;
             case "Digit0":
@@ -161,6 +163,13 @@
                 break;
         }
     }
+    function onKeyClick(code: string) {
+        keyDialog.value = false;
+        if (code != 'close') {
+            const keyEvent = new KeyboardEvent("key", { "code": code, "bubbles": true, "cancelable": false });
+            onKey(keyEvent);
+        }
+    }
     function itemWidth(item: IPictureFile): number {
         const fac = item.Height / height.value;
         return Math.floor(item.Width * fac);
@@ -236,13 +245,13 @@
     <v-container fluid :style="heightStyle">
         <v-carousel hide-delimiters :show-arrows="false" v-model="index"
                     :width="width" :height="height" :cycle="cycle" :interval="interval"
-                    @change="onInput">
+                    @change="onInput" @dblclick="onDblClick">
             <v-carousel-item v-for="item in items" :key="item.DLNAID">
                 <img :src="item.realUrl" />
             </v-carousel-item>
         </v-carousel>
-        <v-dialog v-model="dialog" :fullscreen="isMobile">
-            <v-card v-if="dialog" width="400">
+        <v-dialog v-model="infoDialog" :fullscreen="isMobile">
+            <v-card v-if="infoDialog" width="400">
                 <v-card-title class="headline">Metadata</v-card-title>
                 <v-card-text>
                     <v-container>
@@ -253,7 +262,7 @@
                     </v-container>
                 </v-card-text>
                 <v-card-actions>
-                    <v-btn @click="dialog = false">
+                    <v-btn @click="infoDialog = false">
                         <v-icon large icon="$stop" />
                     </v-btn>
                     <v-btn v-if="hasCoordinates" @click="showMap">
@@ -262,6 +271,38 @@
                 </v-card-actions>
             </v-card>
         </v-dialog>
+        <v-dialog v-model="keyDialog" :fullscreen="isMobile">
+            <v-card v-if="keyDialog" width="400">
+                <v-card-text>
+                    <v-container>
+                        <v-row dense>
+                            <v-col cols="4"><v-btn @click="onKeyClick('Escape')">Back</v-btn></v-col>
+                            <v-col cols="4"><v-btn @click="onKeyClick('Digit0')">Pause</v-btn></v-col>
+                            <v-col cols="4"><v-btn @click="onKeyClick('KeyC')">Cont</v-btn></v-col>
+                        </v-row>
+                        <v-row dense>
+                            <v-col cols="4"><v-btn @click="onKeyClick('Digit1')">1</v-btn></v-col>
+                            <v-col cols="4"><v-btn @click="onKeyClick('Digit2')">2</v-btn></v-col>
+                            <v-col cols="4"><v-btn @click="onKeyClick('Digit3')">3</v-btn></v-col>
+                        </v-row>
+                        <v-row dense>
+                            <v-col cols="4"><v-btn @click="onKeyClick('Digit4')">4</v-btn></v-col>
+                            <v-col cols="4"><v-btn @click="onKeyClick('Digit5')">5</v-btn></v-col>
+                            <v-col cols="4"><v-btn @click="onKeyClick('Digit6')">6</v-btn></v-col>
+                        </v-row>
+                        <v-row dense>
+                            <v-col cols="4"><v-btn @click="onKeyClick('Digit7')">7</v-btn></v-col>
+                            <v-col cols="4"><v-btn @click="onKeyClick('Digit8')">8</v-btn></v-col>
+                            <v-col cols="4"><v-btn @click="onKeyClick('Digit9')">9</v-btn></v-col>
+                        </v-row>
+                        <v-row dense>
+                            <v-col cols="4"><v-btn @click="onKeyClick('KeyI')">Info</v-btn></v-col>
+                            <v-col cols="4"><v-btn @click="onKeyClick('close')">Close</v-btn></v-col>
+                        </v-row>
+                    </v-container>
+                </v-card-text>
+            </v-card>
+        </v-dialog>
     </v-container>
 </template>