@christianriedl/media 1.0.47 → 1.0.49

package/dist/iMedia.d.ts

@@ -8,6 +8,20 @@ export declare enum EMediaType {
     None = 254,
     Various = 255
 }
+export declare enum EPictureQuality {
+    Full = 0,
+    Normal60 = 1060,
+    Normal80 = 1080,
+    Normal90 = 1090,
+    Normal100 = 1100,
+    High60 = 2060,
+    High80 = 2080,
+    High90 = 2090,
+    High100 = 2100
+}
+export interface IMediaAppConfig {
+    pictureQuality: EPictureQuality;
+}
 export declare enum EItemType {
     None = 0,
     RootLevel = 0,

package/dist/iMedia.js

@@ -9,6 +9,18 @@ export var EMediaType;
     EMediaType[EMediaType["None"] = 254] = "None";
     EMediaType[EMediaType["Various"] = 255] = "Various";
 })(EMediaType || (EMediaType = {}));
+export var EPictureQuality;
+(function (EPictureQuality) {
+    EPictureQuality[EPictureQuality["Full"] = 0] = "Full";
+    EPictureQuality[EPictureQuality["Normal60"] = 1060] = "Normal60";
+    EPictureQuality[EPictureQuality["Normal80"] = 1080] = "Normal80";
+    EPictureQuality[EPictureQuality["Normal90"] = 1090] = "Normal90";
+    EPictureQuality[EPictureQuality["Normal100"] = 1100] = "Normal100";
+    EPictureQuality[EPictureQuality["High60"] = 2060] = "High60";
+    EPictureQuality[EPictureQuality["High80"] = 2080] = "High80";
+    EPictureQuality[EPictureQuality["High90"] = 2090] = "High90";
+    EPictureQuality[EPictureQuality["High100"] = 2100] = "High100";
+})(EPictureQuality || (EPictureQuality = {}));
 export var EItemType;
 (function (EItemType) {
     EItemType[EItemType["None"] = 0] = "None";

package/dist/iMedia.js.map

@@ -1 +1 @@
-{"version":3,"file":"iMedia.js","sourceRoot":"","sources":["../src/iMedia.ts"],"names":[],"mappings":"AAEA,MAAM,CAAN,IAAY,UASX;AATD,WAAY,UAAU;IAClB,6CAAS,CAAA;IACT,6CAAS,CAAA;IACT,iDAAW,CAAA;IACX,4CAAS,CAAA;IACT,0DAAgB,CAAA;IAChB,iDAAa,CAAA;IACb,6CAAW,CAAA;IACX,mDAAc,CAAA;AAClB,CAAC,EATW,UAAU,KAAV,UAAU,QASrB;AACD,MAAM,CAAN,IAAY,SAoDX;AApDD,WAAY,SAAS;IACjB,yCAAQ,CAAA;IACR,mDAAa,CAAA;IACb,uDAAe,CAAA;IACf,uDAAe,CAAA;IACf,6DAAkB,CAAA;IAClB,iEAAoB,CAAA;IACpB,iEAAoB,CAAA;IACpB,iEAAoB,CAAA;IACpB,iEAAoB,CAAA;IACpB,mDAAgB,CAAA;IAChB,6CAAa,CAAA;IACb,4CAAY,CAAA;IACZ,4CAAY,CAAA;IACZ,gDAAc,CAAA;IACd,6DAAoB,CAAA;IACpB,qDAAgB,CAAA;IAChB,yCAAa,CAAA;IACb,mDAA6C,CAAA;IAC7C,oDAA0B,CAAA;IAC1B,wDAAkC,CAAA;IAClC,wDAAkC,CAAA;IAClC,8DAAqC,CAAA;IACrC,sDAAiC,CAAA;IACjC,wDAAkC,CAAA;IAClC,sDAAiC,CAAA;IACjC,0DAAmC,CAAA;IACnC,uEAA0C,CAAA;IAC1C,2EAA8C,CAAA;IAC9C,sDAAkB,CAAA;IAClB,+DAAkC,CAAA;IAClC,oDAA0B,CAAA;IAC1B,wDAAkC,CAAA;IAClC,wDAAkC,CAAA;IAClC,8DAAqC,CAAA;IACrC,4DAAoC,CAAA;IACpC,uEAA0C,CAAA;IAC1C,2EAA8C,CAAA;IAC9C,yEAA+C,CAAA;IAC/C,oDAAiB,CAAA;IACjB,+DAAkC,CAAA;IAClC,wDAA8B,CAAA;IAC9B,4DAAsC,CAAA;IACtC,4DAAsC,CAAA;IACtC,kEAAyC,CAAA;IACzC,gEAAwC,CAAA;IACxC,wDAAoC,CAAA;IACpC,0DAAqC,CAAA;IACrC,wDAAqB,CAAA;IACrB,uDAA+C,CAAA;IAC/C,qDAAgB,CAAA;IAChB,yCAAU,CAAA;AACd,CAAC,EApDW,SAAS,KAAT,SAAS,QAoDpB;AACD,MAAM,CAAN,IAAY,MAUX;AAVD,WAAY,MAAM;IACd,mCAAQ,CAAA;IACR,yDAAsB,CAAA;IACtB,2CAAe,CAAA;IACf,+CAAiB,CAAA;IACjB,qDAAoB,CAAA;IACpB,kDAAkB,CAAA;IAClB,sDAAoB,CAAA;IACpB,0DAAsB,CAAA;IACtB,+DAAwB,CAAA;AAC5B,CAAC,EAVW,MAAM,KAAN,MAAM,QAUjB;AA+CD,MAAM,CAAN,IAAY,YAQX;AARD,WAAY,YAAY;IAEpB,+CAAQ,CAAA;IACR,qDAAW,CAAA;IACX,6DAAe,CAAA;IACf,uDAAY,CAAA;IACZ,2DAAc,CAAA;IACd,yDAAa,CAAA;AACjB,CAAC,EARW,YAAY,KAAZ,YAAY,QAQvB"}
+{"version":3,"file":"iMedia.js","sourceRoot":"","sources":["../src/iMedia.ts"],"names":[],"mappings":"AAEA,MAAM,CAAN,IAAY,UASX;AATD,WAAY,UAAU;IAClB,6CAAS,CAAA;IACT,6CAAS,CAAA;IACT,iDAAW,CAAA;IACX,4CAAS,CAAA;IACT,0DAAgB,CAAA;IAChB,iDAAa,CAAA;IACb,6CAAW,CAAA;IACX,mDAAc,CAAA;AAClB,CAAC,EATW,UAAU,KAAV,UAAU,QASrB;AACD,MAAM,CAAN,IAAY,eAUX;AAVD,WAAY,eAAe;IACvB,qDAAiB,CAAA;IACjB,gEAAoB,CAAA;IACpB,gEAAoB,CAAA;IACpB,gEAAoB,CAAA;IACpB,kEAAoB,CAAA;IACpB,4DAAoB,CAAA;IACpB,4DAAoB,CAAA;IACpB,4DAAoB,CAAA;IACpB,8DAAoB,CAAA;AACxB,CAAC,EAVW,eAAe,KAAf,eAAe,QAU1B;AAID,MAAM,CAAN,IAAY,SAoDX;AApDD,WAAY,SAAS;IACjB,yCAAQ,CAAA;IACR,mDAAa,CAAA;IACb,uDAAe,CAAA;IACf,uDAAe,CAAA;IACf,6DAAkB,CAAA;IAClB,iEAAoB,CAAA;IACpB,iEAAoB,CAAA;IACpB,iEAAoB,CAAA;IACpB,iEAAoB,CAAA;IACpB,mDAAgB,CAAA;IAChB,6CAAa,CAAA;IACb,4CAAY,CAAA;IACZ,4CAAY,CAAA;IACZ,gDAAc,CAAA;IACd,6DAAoB,CAAA;IACpB,qDAAgB,CAAA;IAChB,yCAAa,CAAA;IACb,mDAA6C,CAAA;IAC7C,oDAA0B,CAAA;IAC1B,wDAAkC,CAAA;IAClC,wDAAkC,CAAA;IAClC,8DAAqC,CAAA;IACrC,sDAAiC,CAAA;IACjC,wDAAkC,CAAA;IAClC,sDAAiC,CAAA;IACjC,0DAAmC,CAAA;IACnC,uEAA0C,CAAA;IAC1C,2EAA8C,CAAA;IAC9C,sDAAkB,CAAA;IAClB,+DAAkC,CAAA;IAClC,oDAA0B,CAAA;IAC1B,wDAAkC,CAAA;IAClC,wDAAkC,CAAA;IAClC,8DAAqC,CAAA;IACrC,4DAAoC,CAAA;IACpC,uEAA0C,CAAA;IAC1C,2EAA8C,CAAA;IAC9C,yEAA+C,CAAA;IAC/C,oDAAiB,CAAA;IACjB,+DAAkC,CAAA;IAClC,wDAA8B,CAAA;IAC9B,4DAAsC,CAAA;IACtC,4DAAsC,CAAA;IACtC,kEAAyC,CAAA;IACzC,gEAAwC,CAAA;IACxC,wDAAoC,CAAA;IACpC,0DAAqC,CAAA;IACrC,wDAAqB,CAAA;IACrB,uDAA+C,CAAA;IAC/C,qDAAgB,CAAA;IAChB,yCAAU,CAAA;AACd,CAAC,EApDW,SAAS,KAAT,SAAS,QAoDpB;AACD,MAAM,CAAN,IAAY,MAUX;AAVD,WAAY,MAAM;IACd,mCAAQ,CAAA;IACR,yDAAsB,CAAA;IACtB,2CAAe,CAAA;IACf,+CAAiB,CAAA;IACjB,qDAAoB,CAAA;IACpB,kDAAkB,CAAA;IAClB,sDAAoB,CAAA;IACpB,0DAAsB,CAAA;IACtB,+DAAwB,CAAA;AAC5B,CAAC,EAVW,MAAM,KAAN,MAAM,QAUjB;AA+CD,MAAM,CAAN,IAAY,YAQX;AARD,WAAY,YAAY;IAEpB,+CAAQ,CAAA;IACR,qDAAW,CAAA;IACX,6DAAe,CAAA;IACf,uDAAY,CAAA;IACZ,2DAAc,CAAA;IACd,yDAAa,CAAA;AACjB,CAAC,EARW,YAAY,KAAZ,YAAY,QAQvB"}

package/package.json

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

package/src/views/PhotoAlbumPage.vue

@@ -2,12 +2,13 @@
     import { inject, ref, reactive, computed, onMounted, onBeforeMount, onUnmounted, nextTick, watch } from 'vue';
     import { useRouter, useRoute } from 'vue-router';
     import { IAppState, IAppConfig, Dictionary, Helper, appStateSymbol, appConfigSymbol } from '@christianriedl/utils';
-    import { EMediaType, IPictureFile, MediaService, getMediaSymbol } from '@christianriedl/media';
+    import { EMediaType, IPictureFile, MediaService, IMediaAppConfig, EPictureQuality, getMediaSymbol } from '@christianriedl/media';
 
     const router = useRouter();
     const route = useRoute();
     const appState = inject(appStateSymbol)!;
     const appConfig = inject(appConfigSymbol)!;
+    const mediaAppConfig = appConfig as IMediaAppConfig;
     const getMediaService = inject(getMediaSymbol)!;
     const mediaService = getMediaService();
     const heightStyle = computed(() => { return { height: appState.bodyHeight.value + 'px', overflowY: 'hidden' } });
@@ -20,6 +21,7 @@
     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);
@@ -32,6 +34,7 @@
     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 });
 
@@ -60,8 +63,7 @@
                 }
             }
             url.value = photos.Url;
-            buildUrls();
-            //onInput(0);                               required für v-carousel ?
+            //buildUrls();
         }
         else {
             nextTick(() => router.back());
@@ -75,19 +77,16 @@
         window.document.removeEventListener('keydown', onKey);
     });
 
-    function  buildUrls() {
-        for (var i = 0; i < items.length; i++) {
-            const item = items[i];
-            if (item.realUrl && item.realUrl.startsWith('blob'))
-                window.URL.revokeObjectURL(item.realUrl);
-            item.realUrl = getUrl(item);
-        }
-    }
     function getUrl(item: IPictureFile) {
+        const pictureQuality = mediaAppConfig.pictureQuality;
+        const quality = pictureQuality % 1000;
+        let factor = Math.floor(pictureQuality / 1000);
+        if (factor > 1 && appState.pixelRatio > 1)
+            factor = appState.pixelRatio;
         if (landscape.value)
-            return mediaService.getPhotoUrl(url.value, item.Url, `${0}x${height.value}x${item.Orientation}`);
+            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}x${0}x${item.Orientation}`);
+            return mediaService.getPhotoUrl(url.value, item.Url, `${width.value * factor}x${0}x${item.Orientation}x${quality}`);
     }
     function showMap(ev: Event) {
         const current = items[index.value];
@@ -99,16 +98,6 @@
             }
         });
     }
-    function onInput(idx: number) {
-        idx++;
-        if (idx < items.length) {
-            const item = items[idx];
-            mediaService.getImage(item.realUrl!)
-                .then(blob => {
-                    item.realUrl = window.URL.createObjectURL(blob);
-                });
-        }
-    }
     function onDblClick(ev: Event) {
         keyDialog.value = true;
     }
@@ -125,15 +114,24 @@
                 if (index.value < items.length - 1)
                     index.value++;
                 break;
-            case "KeyI":
+            case "KeyI":                // Info
                 const item = items[index.value];
                 const exif = await mediaService.getExifInfo(item.DLNAParentID, item.DLNAID);
                 setMetaData(exif, item);
                 infoDialog.value = true;
                 break;
-            case "KeyC":
+            case "KeyC":                // Continue
                 cycle.value = true;
                 break;
+            case "KeyF":                // Fullscreen
+                if (window.document.fullscreen) {
+                    await window.document.exitFullscreen();
+                }
+                else {
+                    const mainEle = window.document.getElementsByTagName('main')[0];
+                    await mainEle.requestFullscreen();
+                }
+                break;
             case "KeyP":
             case "Digit0":
                 cycle.value = false;
@@ -174,16 +172,10 @@
             onKey(keyEvent);
         }
     }
-    function itemWidth(item: IPictureFile): number {
-        const fac = item.Height / height.value;
-        return Math.floor(item.Width * fac);
-    }
-    function aspectRatio(item: IPictureFile): string {
-        return `${item.Width}/${item.Height}`;
-    }
     function setMetaData(exif: Dictionary<any>, file: IPictureFile) {
         origUrl = mediaService.getPhotoUrl(url.value, file.Url, '0x0x0');
         metadata['Name'] = file.Name;
+        metadata['Url'] = file.Url;
         if (exif) {
             if (exif.Model)
                 metadata['Kamera'] = exif.Model;
@@ -278,9 +270,9 @@
     <v-container fluid :style="heightStyle" class="bg-grey-darken-3">
         <v-carousel hide-delimiters :show-arrows="false" v-model="index" 
                     :width="width" :height="height" :cycle="cycle" :interval="interval"
-                    @change="onInput" @dblclick="onDblClick">
+                    @dblclick="onDblClick">
             <v-carousel-item v-for="item in items" :key="item.DLNAID">
-                <img :src="item.realUrl" />
+                <img :src="getUrl(item)" :style="sizeStyle" />
             </v-carousel-item>
         </v-carousel>
         <v-dialog v-model="infoDialog" :fullscreen="isMobile" >
@@ -332,6 +324,7 @@
                             <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('KeyF')">Full</v-btn></v-col>
                             <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>