@christianriedl/media 1.0.25 → 1.0.27

package/package.json

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

package/src/views/PhotoAlbumPage.vue

@@ -1,18 +1,20 @@
 <script setup lang="ts">
     import { inject, ref, reactive, computed, onMounted, onBeforeMount, onUnmounted, nextTick, watch } from 'vue';
     import { useRouter, useRoute } from 'vue-router';
-    import { IAppState, Dictionary, Helper } from '@christianriedl/utils';
+    import { IAppState, IAppConfig, Dictionary, Helper } from '@christianriedl/utils';
     import { EMediaType, IPictureFile, MediaService } from '@christianriedl/media';
 
     const router = useRouter();
     const route = useRoute();
     const appState = inject<IAppState>('appstate')!;
+    const appConfig = inject<IAppState>('appConfig')!;
     const getMediaService = inject<() => MediaService>('get-media')!;
     const mediaService = getMediaService();
     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[]>([]);
@@ -87,8 +89,10 @@
             return mediaService.getPhotoUrl(url.value, item.Url, `${width.value}x${0}x${item.Orientation}`);
     }
     function showMap(ev: Event) {
+        const current = items[index.value];
+        window.history.replaceState(null, "", `${appConfig.urlPrefix}photoalbum?id=${folderId}&start=${current.DLNAID}`);
         router.push({
-            path: 'gps', query: {
+            path: 'map', query: {
                 lat: `${gpsLat[0]} ${gpsLat[1]}`,
                 lng: `${gpsLng[0]} ${gpsLng[1]}`
             }
@@ -104,8 +108,8 @@
                 });
         }
     }
-    function onClick(ev: Event) {
-        dialog.value = true;
+    function onDblClick(ev: Event) {
+        keyDialog.value = true;
     }
     async function onKey(ev: KeyboardEvent) {
         switch (ev.code) {
@@ -124,11 +128,12 @@
                 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 "KeyP":
             case "Digit0":
                 cycle.value = false;
                 break;
@@ -161,6 +166,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 +248,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 +265,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 +274,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>