@christianriedl/media 1.0.45 → 1.0.47

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@christianriedl/media",
-  "version": "1.0.45",
+  "version": "1.0.47",
   "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.75",
     "@christianriedl/rest": "^1.0.47",
     "@christianriedl/epg": "^1.0.26"
   },

package/src/views/PhotoAlbumPage.vue

@@ -25,6 +25,7 @@
     const cycle = ref(false);
     const interval = ref(8000);
     const hasCoordinates = ref(false);
+    let origUrl = "";
     let gpsLng: number[];
     let gpsLat: number[];
 
@@ -181,6 +182,7 @@
         return `${item.Width}/${item.Height}`;
     }
     function setMetaData(exif: Dictionary<any>, file: IPictureFile) {
+        origUrl = mediaService.getPhotoUrl(url.value, file.Url, '0x0x0');
         metadata['Name'] = file.Name;
         if (exif) {
             if (exif.Model)
@@ -266,6 +268,10 @@
         else
             delete metadata['Personen'];
     }
+    function onDownload() {
+        window.open(origUrl);
+        infoDialog.value = false;
+    }
 </script>
 
 <template>
@@ -295,6 +301,9 @@
                     <v-btn v-if="hasCoordinates" @click="showMap">
                         <v-icon large icon="$gps" />
                     </v-btn>
+                    <v-btn @click="onDownload">
+                        <v-icon large icon="$download" />
+                    </v-btn>
                 </v-card-actions>
             </v-card>
         </v-dialog>

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)">