@christianriedl/media 1.0.292 → 1.0.294

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@christianriedl/media",
-  "version": "1.0.292",
+  "version": "1.0.294",
   "description": "RIC media interfaces",
 
   "main": "dist/index.js",
@@ -18,7 +18,7 @@
   "author": "Christian Riedl",
   "license": "ISC",
   "dependencies": {
-    "@christianriedl/utils": "^1.0.200",
+    "@christianriedl/utils": "^1.0.201",
     "@christianriedl/rest": "^1.0.97",
     "@christianriedl/epg": "^1.0.44",
     "buffer": "^6.0.3"

package/src/components/PhotoMap.vue

@@ -2,16 +2,14 @@
 <script setup lang="ts">
     import { inject, ref, toRef, computed, onMounted, watch } from 'vue';
     import { GoogleMap } from 'vue3-google-map'
-    import { authorizeSymbol } from '@christianriedl/rest';
     import { IPhotoMarker, IPhotoRegion, IPictureFile, getMediaBinSymbol, EOrientation, MediaHelper } from '@christianriedl/media';
 
-    const props = defineProps<{ location: string, zoom: number, selectRegion?: IPhotoRegion, fotos?: IPhotoMarker[] }>();
+    const props = defineProps<{ googleApiKey: string, location: string, zoom: number, selectRegion?: IPhotoRegion, fotos?: IPhotoMarker[] }>();
     const emits = defineEmits<{ (e: 'select', value: IPhotoRegion): void }>();
 
-    const authorize = inject(authorizeSymbol)!;
-    const apiKey = authorize.keyGoogleMaps;
-    const getMediaService = inject(getMediaBinSymbol)!;
-    const mediaService = getMediaService() ;
+    const apiKey = props.googleApiKey;
+    const getMediaService = inject(getMediaBinSymbol);
+    const mediaService = getMediaService ?? getMediaService() : null;
 
     const mapRef = ref(GoogleMap);
     const mapSizeStyle = computed(() => {
@@ -229,8 +227,8 @@
 	photoLeft.value = { 'left': left + 'px' };
 	photoHeight.value = Math.floor(h * fac);
 	photoWidth.value = Math.floor(w * fac);
-        const albumUrl = mediaService.getFolder(photo.dlnaParentId).url;
-        photoUrl = mediaService.getPhotoUrl(albumUrl, photo.url, `${0}x${photoHeight.value}x${photo.orientation}x70`);
+        const albumUrl = mediaService!.getFolder(photo.dlnaParentId).url;
+        photoUrl = mediaService!.getPhotoUrl(albumUrl, photo.url, `${0}x${photoHeight.value}x${photo.orientation}x70`);
         console.log (`left:${left} w:${photoWidth.value} h:${photoHeight.value} : ${photoUrl}`);
         photoTitle = photo.title ? photo.title : photo.name;
 	showPhoto.value = true;

package/src/components/PhotoMetaData.vue

@@ -3,7 +3,7 @@
     import { Dictionary, Helper } from '@christianriedl/utils';
     import { IPictureFile, EOrientation, EPictureFlags, getMediaBinSymbol } from '@christianriedl/media';
 
-    const props = defineProps<{ file: IPictureFile, all: boolean, splitxmp: boolean }>();
+    const props = defineProps<{ file: IPictureFile, all: boolean, splitxmp: boolean, metadata?: Dictionary<any> }>();
 
     interface ITree {
 	id: number;
@@ -15,24 +15,34 @@
     const properties = ref<Dictionary<any>>({});
     const propertiesVisible = ref(false);
     const getMediaService = inject(getMediaBinSymbol)!;
-    const mediaService = getMediaService();
+    const mediaService = getMediaService ? getMediaService() : null;
     const treeColumns = computed(() => props.splitxmp ? 3 : 2);
     let metadata: Dictionary<any>;
     let allMetaData: Dictionary<any>;
-
-    watch(() => props.all, async () => await fetchMetaData(), { immediate: true });
-    watch(() => props.splitxmp, () => buildTree());
-
+    if (props.metadata) {
+	if (props.all) {
+	    allMetaData = props.metadata;
+	    buildTree();
+    }
+    else {
+	    setMetaData(props.metadata, props.file);
+	    properties.value = metadata;
+	}
+    }
+    else {
+	watch(() => props.all, async () => await fetchMetaData(), { immediate: true });
+	watch(() => props.splitxmp, () => buildTree());
+    }
     async function fetchMetaData() {
 	if (props.all) {
 	    if (!allMetaData) {
-		allMetaData = await mediaService.getExifInfo(props.file.dlnaParentId, props.file.dlnaid, props.all, props.splitxmp);
+		allMetaData = await mediaService!.getExifInfo(props.file.dlnaParentId, props.file.dlnaid, props.all, props.splitxmp);
 	    }
 	    buildTree();
 	}
 	else {
 	    if (!metadata) {
-		const data = await mediaService.getExifInfo(props.file.dlnaParentId, props.file.dlnaid, props.all, props.splitxmp);
+		const data = await mediaService!.getExifInfo(props.file.dlnaParentId, props.file.dlnaid, props.all, props.splitxmp);
 		setMetaData(data, props.file);
 	    }
 	    properties.value = metadata;
@@ -177,26 +187,33 @@
 </script>
 <template>
     <v-container v-if="props.all">
-        <v-row density="compact">
-            <v-col :cols="treeColumns">
-                <v-treeview :items="tree" item-value="id" open-all activatable slim active-startegy="leaf"
-                            density="compact" @update:activated="onSelectTree">
-                </v-treeview>
-            </v-col>
-            <v-col v-if="propertiesVisible" :cols="12 - treeColumns">
-                <v-row density="compact" v-for="(prop,key) in properties" :key="key">
-                    <v-col cols="4" class="font-weight-bold">{{key}}</v-col>
-                    <v-col cols="8">{{prop}}</v-col>
-                    <v-divider></v-divider>
-                </v-row>
-            </v-col>
-        </v-row>                        
+	<v-row density="compact">
+	    <v-col :cols="treeColumns">
+		<v-treeview :items="tree" item-value="id" open-all activatable slim active-startegy="leaf"
+			    density="compact" @update:activated="onSelectTree">
+		</v-treeview>
+	    </v-col>
+	    <v-col v-if="propertiesVisible" :cols="12 - treeColumns">
+		<v-row density="compact" v-for="(prop,key) in properties" :key="key">
+		    <v-col cols="4" class="font-weight-bold">{{key}}</v-col>
+		    <v-col cols="8">{{prop}}</v-col>
+		    <v-divider></v-divider>
+		</v-row>
+	    </v-col>
+	</v-row>
     </v-container>
     <v-container v-else>
-        <v-row v-for="(value, key) in properties" :key="key">
-            <v-col cols="4" class="font-weight-bold">{{key}}</v-col>
-            <v-col cols="8">{{value}}</v-col>
-            <v-divider></v-divider>
-        </v-row>
+	<v-row v-for="(value, key) in properties" :key="key">
+	    <v-col cols="4" class="font-weight-bold">{{key}}</v-col>
+	    <v-col cols="8">{{value}}</v-col>
+	    <v-divider></v-divider>
+	</v-row>
     </v-container>
 </template>
+
+<style scoped>
+    .v-row--density-default {
+    --v-col-gap-x: 0px;
+    --v-col-gap-y: 0px;
+    }
+</style>

package/src/views/PhotoAlbumPage.vue

@@ -7,6 +7,7 @@
 	EMediaType, EPictureFlags, IPictureFile, IMediaFolder, IMediaService, IMediaAppConfig, EPictureQuality,
 	MediaHelper, getMediaBinSymbol, getPlayerSymbol
     } from '@christianriedl/media';
+    import { authorizeSymbol } from '@christianriedl/rest';
 
     import PhotoMetaData from '../components/PhotoMetaData.vue';
     import PhotoMap from '../components/PhotoMap.vue';
@@ -15,6 +16,8 @@
 
     const router = useRouter();
     const route = useRoute();
+    const authorize = inject(authorizeSymbol)!;
+    const googleApiKey = authorize.keyGoogleMaps;
     const appState = inject(appStateSymbol)!;
     const appConfig = inject(appConfigSymbol)!;
     const mediaAppConfig = appConfig as unknown as IMediaAppConfig;
@@ -481,7 +484,7 @@
 	<v-dialog v-model="showMap" :fullscreen="isMobile" width="50%">
 	    <v-card>
 		<v-card-text>
-		    <photo-map :location="location" :zoom="zoom"></photo-map>
+		    <photo-map :googleApiKey="googleApiKey" :location="location" :zoom="zoom"></photo-map>
 		</v-card-text>
 		<v-card-actions>
 		    <v-btn size="large" @click="showMap = false">

package/src/views/ThumbnailsPage.vue

@@ -2,7 +2,7 @@
     import { inject, ref, shallowRef, computed, onMounted, StyleValue } from 'vue';
     import { useRouter, useRoute } from 'vue-router';
     import { IAppState, appStateSymbol, IAppConfig, appConfigSymbol, EDevice, Helper } from '@christianriedl/utils';
-    import { IRestResult, IValueResult } from '@christianriedl/rest';
+    import { IRestResult, IValueResult, authorizeSymbol } from '@christianriedl/rest';
     import { EOrientation, EMediaType, IMediaFolder, IPictureFile, IMediaService, IMediaAppConfig,
              EPictureFlags, getMediaBinSymbol, MediaHelper, IPhotoRegion, IPhotoMarker
     } from '@christianriedl/media';
@@ -13,7 +13,10 @@
     const appConfig = inject(appConfigSymbol)!;
     const mediaAppConfig = appConfig as unknown as IMediaAppConfig;
     const getMediaService = inject(getMediaBinSymbol)!;
-    const mediaService = getMediaService() ;
+    const mediaService = getMediaService();
+    const authorize = inject(authorizeSymbol)!;
+    const googleApiKey = authorize.keyGoogleMaps;
+
     const heightStyle = computed<StyleValue>(() => { return { height: appState.bodyHeight.value + 'px', overflowY: 'auto' } });
     const isMobile = appState.isMobile && appState.device !== EDevice.iPad;
     const router = useRouter();
@@ -299,7 +302,7 @@
     <v-dialog v-model="showMap">
         <v-card>
             <v-card-text>
-                <photo-map :location="center" :zoom="zoom" :selectRegion="selectedRegion" :fotos="foundFotos" @select="onGpsSelect"></photo-map>
+                <photo-map :googleApiKey="googleApiKey" :location="center" :zoom="zoom" :selectRegion="selectedRegion" :fotos="foundFotos" @select="onGpsSelect"></photo-map>
             </v-card-text>
             <v-card-actions>
                 <v-btn size="large" @click="onCloseGps">