@christianriedl/media 1.0.53 → 1.0.55

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@christianriedl/media",
-  "version": "1.0.53",
+  "version": "1.0.55",
   "description": "RIC media interfaces",
 
   "main": "dist/index.js",
@@ -18,7 +18,7 @@
   "author": "Christian Riedl",
   "license": "ISC",
   "dependencies": {
-    "@christianriedl/utils": "^1.0.77",
+    "@christianriedl/utils": "^1.0.79",
     "@christianriedl/rest": "^1.0.47",
     "@christianriedl/epg": "^1.0.26"
   },

package/src/views/PhotoAlbumPage.vue

@@ -122,13 +122,21 @@
             }
         });
     }
-    function onDblClick(ev: Event) {
+    function onClick() {
         keyDialog.value = true;
     }
     async function onKey(ev: KeyboardEvent) {
         switch (ev.code) {
             case "Escape":
-                infoDialog.value = false;
+                if (appState.fullScreeen.value) {
+                    await appState.exitFullScreen();
+                    infoDialog.value = false;
+                    return;
+                }
+                if (infoDialog.value) {
+                    infoDialog.value = false;
+                    return;
+                }
                 router.back();
                 break;
             case "ArrowLeft":
@@ -158,29 +166,11 @@
             case "KeyF":                // Fullscreen
                 infoDialog.value = false;
                 if (appState.fullScreen.value) {
-                    if (window.document.exitFullscreen) {
-                        await window.document.exitFullscreen();
-                        appState.fullScreen.value = !!window.document.fullscreenElement;
-                    }
-                    else if ((window.document as any).webkitExitFullscreen) {
-                        (window.document as any).webkitExitFullscreen();
-                        appState.fullScreen.value = false;
-                    }
-                    else
-                        appState.fullScreen.value = false;
+                    await appState.exitFullScreen();
                 }
                 else {
                     const mainEle = window.document.getElementsByTagName('main')[0];
-                    if (mainEle.requestFullscreen) {
-                        await mainEle.requestFullscreen();
-                        appState.fullScreen.value = !!window.document.fullscreenElement;
-                    }
-                    else if ((mainEle as any).webkitRequestFullScreen) {
-                        (mainEle as any).webkitRequestFullScreen();
-                        appState.fullScreen.value = true;
-                    }
-                    else
-                        appState.fullScreen.value = true;
+                    await appState.setFullScreen(mainEle);
                 }
                 break;
             case "KeyP":
@@ -321,13 +311,13 @@
     <v-container fluid :style="heightStyle" class="bg-grey-darken-3 pa-0">
         <v-carousel hide-delimiters :show-arrows="false" v-model="index" 
                     :width="width" :height="height" :cycle="cycle" :interval="interval"
-                    @dblclick="onDblClick" @update:modelValue="infoDialog = false">
+                    @click="onClick" @update:modelValue="infoDialog = false">
             <v-carousel-item v-for="item in items" :key="item.DLNAID">
                 <img :src="getUrl(item)" :alt="item.Name" :width="getWidth(item)" :height="getHeight(item)" />
             </v-carousel-item>
         </v-carousel>
         <v-dialog v-model="infoDialog" :fullscreen="isMobile" >
-            <v-card v-if="infoDialog" width="600">
+            <v-card v-if="infoDialog" width="600" v-click-outside="infoDialog = false">
                 <v-card-title class="headline">Metadata</v-card-title>
                 <v-card-text>
                     <v-container>
@@ -350,8 +340,8 @@
                 </v-card-actions>
             </v-card>
         </v-dialog>
-        <v-dialog v-model="keyDialog" :fullscreen="isMobile" >
-            <v-card v-if="keyDialog" width="400">
+        <v-dialog v-model="keyDialog" :fullscreen="isMobile"  >
+            <v-card v-if="keyDialog" width="400" v-click-outside="keyDialog = false">
                 <v-card-text>
                     <v-container>
                         <v-row dense>