@christianriedl/media 1.0.24 → 1.0.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@christianriedl/media",
-  "version": "1.0.24",
+  "version": "1.0.26",
   "description": "RIC media interfaces",
 
   "main": "dist/index.js",
@@ -18,7 +18,7 @@
   "author": "Christian Riedl",
   "license": "ISC",
   "dependencies": {
-    "@christianriedl/utils": "^1.0.63",
+    "@christianriedl/utils": "^1.0.65",
     "@christianriedl/rest": "^1.0.33"
   },
   "devDependencies": {

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[]>([]);
@@ -22,6 +23,9 @@
     const metadata = reactive<Dictionary<any>>({});
     const cycle = ref(false);
     const interval = ref(8000);
+    const hasCoordinates = ref(false);
+    let gpsLng: number[];
+    let gpsLat: number[];
 
     watch([appState.bodyHeight, appState.pageWidth], () => {
         width.value = appState.pageWidth.value;
@@ -83,6 +87,14 @@
         else
             return mediaService.getPhotoUrl(url.value, item.Url, `${width.value}x${0}x${item.Orientation}`);
     }
+    function showMap(ev: Event) {
+        router.push({
+            path: 'gps', query: {
+                lat: `${gpsLat[0]} ${gpsLat[1]}`,
+                lng: `${gpsLng[0]} ${gpsLng[1]}`
+            }
+        });
+    }
     function onInput(idx: number) {
         idx++;
         if (idx < items.length) {
@@ -93,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) {
@@ -113,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":
@@ -150,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);
@@ -184,6 +204,11 @@
                 metadata['Zeit'] = exif.DateTimeOriginal;
             else
                 metadata['Zeit'] = file.Date.toLocaleString();
+            if (exif.GPSLatitude && exif.GPSLongitude) {
+                gpsLat = exif.GPSLatitude as number[];
+                gpsLng = exif.GPSLongitude as number[];
+                hasCoordinates.value = true;
+            }
         }
         else {
             delete metadata['Kamera'];
@@ -220,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>
@@ -237,12 +262,47 @@
                     </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">
+                        <v-icon large icon="$gps" />
+                    </v-btn>
                 </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>