@christianriedl/media 1.0.46 → 1.0.48

package/dist/iMedia.d.ts

@@ -8,6 +8,20 @@ export declare enum EMediaType {
     None = 254,
     Various = 255
 }
+export declare enum EPictureQuality {
+    Full = 0,
+    Normal60 = 10060,
+    Normal80 = 10080,
+    Normal90 = 10090,
+    Normal100 = 10100,
+    High60 = 20060,
+    High80 = 20080,
+    High90 = 20090,
+    High100 = 20100
+}
+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"] = 10060] = "Normal60";
+    EPictureQuality[EPictureQuality["Normal80"] = 10080] = "Normal80";
+    EPictureQuality[EPictureQuality["Normal90"] = 10090] = "Normal90";
+    EPictureQuality[EPictureQuality["Normal100"] = 10100] = "Normal100";
+    EPictureQuality[EPictureQuality["High60"] = 20060] = "High60";
+    EPictureQuality[EPictureQuality["High80"] = 20080] = "High80";
+    EPictureQuality[EPictureQuality["High90"] = 20090] = "High90";
+    EPictureQuality[EPictureQuality["High100"] = 20100] = "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,iEAAqB,CAAA;IACrB,iEAAqB,CAAA;IACrB,iEAAqB,CAAA;IACrB,mEAAqB,CAAA;IACrB,6DAAqB,CAAA;IACrB,6DAAqB,CAAA;IACrB,6DAAqB,CAAA;IACrB,+DAAqB,CAAA;AACzB,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.46",
+  "version": "1.0.48",
   "description": "RIC media interfaces",
 
   "main": "dist/index.js",
@@ -18,7 +18,7 @@
   "author": "Christian Riedl",
   "license": "ISC",
   "dependencies": {
-    "@christianriedl/utils": "^1.0.74",
+    "@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' } });
@@ -84,10 +85,15 @@
         }
     }
     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];
@@ -125,15 +131,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];
+                    mainEle.requestFullscreen();
+                }
+                break;
             case "KeyP":
             case "Digit0":
                 cycle.value = false;
@@ -184,6 +199,7 @@
     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;
@@ -332,6 +348,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>

package/src/views/PhotosPage.vue

@@ -29,6 +29,7 @@
     const downloadFolder = ref<IMediaFolder | null>(null);
     const selectedYear = ref<number | undefined>(undefined);
     const selectedName = ref<string | undefined>(undefined);
+    const scrollElement = ref<any | null>(null);
 
     window.addEventListener('popstate', onPopState);
     function onPopState(event: any) {
@@ -57,7 +58,15 @@
             selectedYear.value = selected.selectedAlbum.Year;
         const expanded = selected.criteria == 'ye' || root.ItemType == EItemType.PictureCategory;
         setGrouped(folders, expanded, selectedYear.value);
-        mediaService.log.trace('Photos start with ' + selected.selected.DLNAID);
+        const scrollTop = appState.scrollPosition.value;
+        if (scrollTop > 0 && scrollElement.value) {
+            nextTick(() => {
+                // Scoll to this position
+                const el = scrollElement.value?._?.vnode?.el;
+                el?.scrollTo(0, scrollTop);
+            });
+        }
+        mediaService.log.trace(`Photos start with ${selected.selected.DLNAID} scrollTop: ${scrollTop}`);
     })
     watch(appState.bodyHeight, () => computeListHeight());
     function computeListHeight() {
@@ -163,6 +172,10 @@
     function itemText(item: IMediaFolder) : string {
         return `${item.Name} (${item.ChildCount})`
     }
+    function onScroll(ev: Event) {
+        const scrollTop = (ev.target as Element).scrollTop;
+        appState.scrollPosition.value = scrollTop;
+    }
 </script>
 <template>
     <v-card ref="listhead" class="bg-media">
@@ -185,7 +198,7 @@
         </v-card-actions>
     </v-card>
     <file-upload v-if="uploadVisible"></file-upload>
-    <v-card :max-height="listHeight" class="overflow-y-auto">
+    <v-card :max-height="listHeight" class="overflow-y-auto" ref="scrollElement" v-scroll.self="onScroll">
         <v-list v-if="!grouped" class="bg-media">
             <v-list-item-group v-model="itemIndex" color="primary">
                 <v-list-item v-for="item in items" :key="item.DLNAID" :title="itemText(item)" :value="itemText(item)" density="compact" @click.stop="listItem(item)">