@christianriedl/media 1.0.67 → 1.0.69

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@christianriedl/media",
-  "version": "1.0.67",
+  "version": "1.0.69",
   "description": "RIC media interfaces",
 
   "main": "dist/index.js",
@@ -18,7 +18,7 @@
   "author": "Christian Riedl",
   "license": "ISC",
   "dependencies": {
-    "@christianriedl/utils": "^1.0.80",
+    "@christianriedl/utils": "^1.0.83",
     "@christianriedl/rest": "^1.0.48",
     "@christianriedl/epg": "^1.0.26"
   },

package/src/components/PhotoDownload.vue

@@ -6,6 +6,7 @@
     const props = defineProps<{ folder: IMediaFolder }>();
     const emits = defineEmits<{ (e: 'close'): void }>();
 
+    const title = `Download '${props.folder.Name}' (${props.folder.Files.length} Bilder)`
     const getMedia = inject(getMediaSymbol)!;
     const mediaService = getMedia();
 
@@ -43,7 +44,7 @@
 
 <template>
     <v-card class="bg-media" :width="500">
-        <v-card-title class="headline">Download Pictures</v-card-title>
+        <v-card-title class="headline">{{title}}</v-card-title>
         <v-card-subtitle>Only 'Original' height includes metadata</v-card-subtitle>
         <v-card-text>
             <v-container>
@@ -57,9 +58,12 @@
                                   dense solo hide-details single-line>
                         </v-select>
                     </v-col>
-                    <v-col cols="4">
+                    <v-col cols="3">
                         <v-text-field type="number" v-model="quality" density="compact" hide-details></v-text-field>
                     </v-col>
+                    <v-col cols="1">
+                        <p>%</p>
+                    </v-col>
                 </v-row>
                 <v-row dense align="center">
                     <v-col cols="4" class="font-weight-bold">Height</v-col>
@@ -71,9 +75,12 @@
                                   dense solo hide-details single-line>
                         </v-select>
                     </v-col>
-                    <v-col cols="4">
+                    <v-col cols="3">
                         <v-text-field type="number" v-model="height" density="compact" hide-details></v-text-field>
                     </v-col>
+                    <v-col cols="1">
+                        <p>px</p>
+                    </v-col>
                 </v-row>
             </v-container>
         </v-card-text>

package/src/views/PhotoAlbumPage.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
     import { inject, ref, reactive, computed, onMounted, onBeforeMount, onUnmounted, nextTick, watch } from 'vue';
+    import type { ComponentPublicInstance } from 'vue';
     import { useRouter, useRoute } from 'vue-router';
     import { IAppState, IAppConfig, EDevice, EBrowser, Dictionary, Helper, appStateSymbol, appConfigSymbol } from '@christianriedl/utils';
     import { EMediaType, IPictureFile, MediaService, IMediaAppConfig, EPictureQuality, getMediaSymbol } from '@christianriedl/media';
@@ -26,6 +27,7 @@
     const cycle = ref(false);
     const interval = ref(8000);
     const hasCoordinates = ref(false);
+    const carousel = ref<ComponentPublicInstance | null>(null);
     let origUrl = "";
     let gpsLng: number[];
     let gpsLat: number[];
@@ -40,6 +42,8 @@
 
     async function start(): Promise<boolean> {
         window.document.addEventListener('keydown', onKey);
+        if (carousel.value)
+            appState.fullScreenElement.value = carousel.value.$el as HTMLElement;
         let folder = mediaService.folders[folderId];
         if(!folder) {
             const split = folderId.split(/[.|]/);
@@ -73,6 +77,7 @@
         await start();
     });
     onUnmounted(() => {
+        appState.fullScreenElement.value = null;
         window.document.removeEventListener('keydown', onKey);
     });
 
@@ -136,14 +141,18 @@
                     keyDialog.value = true;
                 }, 500);
             }
-            return;
         }
-        const msecDiff = new Date().getTime() - mouseDownTime;
-        if (msecDiff < 500)
-            keyDialog.value = true;
-        else
-            onKeyClick("KeyF");
-        mouseDownTime = 0;
+        else {
+            const msecDiff = new Date().getTime() - mouseDownTime;
+            if (msecDiff < 500) {
+                if (appState.device != EDevice.Windows && appState.device != EDevice.Mac) {
+                    keyDialog.value = true;
+                }
+            }
+            else
+                onKeyClick("KeyF");
+            mouseDownTime = 0;
+        }
     }
     function onMouseDown() {
         mouseDownTime = new Date().getTime();
@@ -196,8 +205,10 @@
                     await appState.exitFullScreen();
                 }
                 else {
-                    const mainEle = window.document.getElementsByTagName('main')[0];
-                    await appState.setFullScreen(mainEle);
+                    if (carousel.value) {
+                        const element = carousel.value.$el as HTMLElement;
+                        await appState.setFullScreen(element);
+                    }
                 }
                 break;
             case "KeyP":
@@ -342,7 +353,7 @@
 
 <template>
     <v-container fluid :style="heightStyle" class="bg-grey-darken-3 pa-0">
-        <v-carousel hide-delimiters :show-arrows="false" v-model="index" 
+        <v-carousel ref="carousel" hide-delimiters :show-arrows="false" v-model="index" 
                     :width="width" :height="height" :cycle="cycle" :interval="interval"
                     @click="onClick" @mousedown="onMouseDown" @update:modelValue="infoDialog = false">
             <v-carousel-item v-for="item in items" :key="item.DLNAID">

package/src/views/PhotosPage.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
     import { inject, ref, reactive, computed, onMounted, onUnmounted, nextTick, watch } from 'vue';
+    import type { ComponentPublicInstance } from 'vue';
     import { useRouter } from 'vue-router';
     import { IAppState, IAppConfig, EDevice, EBrowser, appStateSymbol, appConfigSymbol, Helper } from '@christianriedl/utils';
     import { EItemType, EMediaType, IMediaFolder, IMediaItem, IPhotoSelection, MediaService, getMediaSymbol, IMediaAppConfig } from '@christianriedl/media';
@@ -19,7 +20,7 @@
     const items: IMediaItem[] = reactive([]);
     const selected = reactive<IPhotoSelection>(mediaService.photoSelection);
     const listHeight = ref(0);
-    const listhead = ref<any>(null);
+    const listhead = ref<ComponentPublicInstance|null>(null);
     const uploadVisible = ref(false);
 
     const roots: string[] = ['Jahr', 'Orte', 'Ereignisse', 'Personen'];
@@ -74,8 +75,8 @@
     function computeListHeight() {
         nextTick(() => {
             let height = appState.bodyHeight.value;
-            if (listhead.value && listhead.value._.vnode && listhead.value._.vnode.el) {
-                height = height - listhead.value._.vnode.el.clientHeight;
+            if (listhead.value) {
+                height = height - (listhead.value.$el as HTMLElement).clientHeight;
             }
             listHeight.value = height;
         })

package/src/views/RecordedVideosPage.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
     import { inject, ref, reactive, computed, onMounted, onUnmounted, nextTick, watch } from 'vue';
+    import type { ComponentPublicInstance } from 'vue';
     import { useRouter } from 'vue-router';
     import { IAppState, EScope, appStateSymbol } from '@christianriedl/utils';
     import { DvbService, getDvbServiceSymbol } from '@christianriedl/epg';
@@ -17,7 +18,7 @@
     const items: IMediaItem[] = reactive([]);
     const selected = ref<IMediaItem>({ Name: 'Root', ItemType: EItemType.Root } as IMediaFolder);
     const listHeight = ref(0);
-    const listhead = ref<any>(null);
+    const listhead = ref<ComponentPublicInstance|null>(null);
 
     const backVisible = computed(() => selected.value.ItemType != EItemType.VideoRoot);
     const playVisible = computed(() => selected.value.ItemType == EItemType.VideoItem || selected.value.ItemType == EItemType.VideoBroadcast);
@@ -36,8 +37,8 @@
     function computeListHeight() {
         nextTick(() => {
             let height = appState.bodyHeight.value;
-            if (listhead.value && listhead.value._.vnode && listhead.value._.vnode.el) {
-                height = height - listhead.value._.vnode.el.clientHeight;
+            if (listhead.value) {
+                height = height - (listhead.value.$el as HTMLElement).clientHeight;
             }
             listHeight.value = height;
         })
@@ -99,7 +100,7 @@
                             -->
                             <template v-slot:append>
                                 <v-list-item-avatar right>
-                                    <v-btn variant="text" color="grey lighten-1" icon="mdi-information"></v-btn>
+                                    <v-btn variant="text" color="grey lighten-1" icon="$info"></v-btn>
                                 </v-list-item-avatar>
                             </template>
                         </v-list-item>