@christianriedl/media 1.0.293 → 1.0.294

package/package.json

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

package/src/components/PhotoMap.vue

@@ -8,8 +8,8 @@
     const emits = defineEmits<{ (e: 'select', value: IPhotoRegion): void }>();
 
     const apiKey = props.googleApiKey;
-    const getMediaService = inject(getMediaBinSymbol)!;
-    const mediaService = getMediaService() ;
+    const getMediaService = inject(getMediaBinSymbol);
+    const mediaService = getMediaService ?? getMediaService() : null;
 
     const mapRef = ref(GoogleMap);
     const mapSizeStyle = computed(() => {
@@ -227,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>