@christianriedl/media 1.0.49 → 1.0.51

package/package.json

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

package/src/views/PhotoAlbumPage.vue

@@ -21,7 +21,6 @@
     const items = reactive<IPictureFile[]>([]);
     const width = ref(0);
     const height = ref(0);
-    const sizeStyle = ref({ height: '512px', width: '1024px' });
     const landscape = ref(true);
     const metadata = reactive<Dictionary<any>>({});
     const cycle = ref(false);
@@ -34,7 +33,6 @@
     watch([appState.bodyHeight, appState.pageWidth], () => {
         width.value = appState.pageWidth.value;
         height.value = appState.bodyHeight.value;
-        sizeStyle.value = { height: height.value + 'px', width: width.value + 'px' };
         landscape.value = width.value > height.value;
     }, { immediate: true });
 
@@ -77,17 +75,43 @@
         window.document.removeEventListener('keydown', onKey);
     });
 
-    function getUrl(item: IPictureFile) {
-        const pictureQuality = mediaAppConfig.pictureQuality;
-        const quality = pictureQuality % 1000;
+    function getQuality(pictureQuality: EPictureQuality) {
+        return pictureQuality % 1000;
+    }
+    function getFactor(pictureQuality: EPictureQuality) {
         let factor = Math.floor(pictureQuality / 1000);
         if (factor > 1 && appState.pixelRatio > 1)
             factor = appState.pixelRatio;
+        return factor;
+    }
+
+    function getUrl(item: IPictureFile) {
+        const pictureQuality = mediaAppConfig.pictureQuality;
+        const quality = getQuality(pictureQuality);
+        const factor = getFactor(pictureQuality);
         if (landscape.value)
             return mediaService.getPhotoUrl(url.value, item.Url, `${0}x${height.value * factor}x${item.Orientation}x${quality}`);
         else
             return mediaService.getPhotoUrl(url.value, item.Url, `${width.value * factor}x${0}x${item.Orientation}x${quality}`);
     }
+    function getHeight(item: IPictureFile) {
+        const pictureQuality = mediaAppConfig.pictureQuality;
+        const factor = getFactor(pictureQuality);
+        if (pictureQuality == EPictureQuality.Full || factor > 1) {
+            if (landscape.value)
+                return height.value;
+        }
+        return undefined;
+    }
+    function getWidth(item: IPictureFile) {
+        const pictureQuality = mediaAppConfig.pictureQuality;
+        const factor = getFactor(pictureQuality);
+        if (pictureQuality == EPictureQuality.Full || factor > 1) {
+            if (!landscape.value)
+                return width.value;
+        }
+        return undefined;
+    }
     function showMap(ev: Event) {
         const current = items[index.value];
         window.history.replaceState(null, "", `${appConfig.urlPrefix}photoalbum?id=${folderId}&start=${current.DLNAID}`);
@@ -267,12 +291,12 @@
 </script>
 
 <template>
-    <v-container fluid :style="heightStyle" class="bg-grey-darken-3">
+    <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">
+                    @dblclick="onDblClick" @update:modelValue="infoDialog = false">
             <v-carousel-item v-for="item in items" :key="item.DLNAID">
-                <img :src="getUrl(item)" :style="sizeStyle" />
+                <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" >