@christianriedl/media 1.0.252 → 1.0.254

package/package.json

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

package/src/components/PhotoMap.vue

@@ -3,7 +3,7 @@
     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 } from '@christianriedl/media';
+    import { IPhotoMarker, IPhotoRegion, IPictureFile, getMediaBinSymbol, EOrientation, MediaHelper } from '@christianriedl/media';
 
     const props = defineProps<{ location: string, zoom: number, selectRegion?: IPhotoRegion, fotos?: IPhotoMarker[] }>();
     const emits = defineEmits<{ (e: 'select', value: IPhotoRegion): void }>();
@@ -41,6 +41,7 @@
     const photoWidth = ref(0);
     const photoLeft = ref({ 'left': '0px' });
     let photoUrl = "";
+    let photoTitle = "";
 
     watch(fotosRef, () => showFotos(props.fotos!));
     watch(locationRef, () => {
@@ -231,6 +232,7 @@
         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;
     }
     function createPin(loc: google.maps.LatLng, text: string, color: string, background: string): google.maps.marker.AdvancedMarkerElement {
@@ -264,7 +266,8 @@
         <google-map ref="mapRef" class="map" :style="mapSizeStyle" :apiKey="apiKey" mapId="60c7744a5bdbb04ae71bd377" :zoom="props.zoom">
         </google-map>
         <v-dialog v-model="showPhoto">
-            <v-card :style="photoLeft" :width="photoWidth + 50" :height="photoHeight + 120">
+            <v-card-title>{{photoTitle}}</v-card-title>
+            <v-card :style="photoLeft" :width="photoWidth + 50" :height="photoHeight + 140">
                 <v-card-text>
                     <v-img :src="photoUrl" :height="photoHeight" ></v-img>
                 </v-card-text>

package/src/views/ThumbnailsPage.vue

@@ -34,7 +34,7 @@
     const selectMode = ref<boolean>(false);
     const showDownload = ref(false);
     const showLocation = ref(false);
-    const showText = ref("SHOW");
+    const showText = ref("");
     let   selectedFotos: IPictureFile[] | undefined;
     // GPS selection
     const center = ref("Wien");
@@ -48,6 +48,7 @@
     let latLength = 0;
     let lngLength = 0;
     let selectedRegion: IPhotoRegion = { latLength: 0, lngLength: 0, latFrom: 0, lngFrom: 0, latTo: 0, lngTo: 0 };
+    setShowText();
 
     onMounted(async () => { 
         //if (mediaAppConfig.useMediaBin) {
@@ -87,15 +88,15 @@
         titles.value = await MediaHelper.getPhotoTitles(mediaService, mediaService.photoSelection.rating, withLocation.value, withPerson.value);
     }
     async function onTitleChanged() {
-        if (isMobile || title.value.length < 3)
+        if (isMobile && title.value.length < 3)
             return;
         selectedFotos = await MediaHelper.searchPictures (mediaService, title.value, withPerson.value, withLocation.value, mediaService.photoSelection.rating, 100000);
-        showText.value = `SHOW ${selectedFotos.length}`;
+        setShowText();
     }
     async function onShow() {
         if (!selectedFotos) {
             selectedFotos = await MediaHelper.searchPictures (mediaService, title.value, withPerson.value, withLocation.value, mediaService.photoSelection.rating, mediaAppConfig.pictureSearchLimit);
-            showText.value = `SHOW ${selectedFotos.length}`;
+            setShowText();
         }
         photos.value.splice(0, photos.value.length, ...selectedFotos);
         console.log(photos.value.length);
@@ -146,6 +147,16 @@
             window.alert(`Not Pasted : ${err} !`);
         }
     }
+    function setShowText() {
+        if (selectedFotos) {
+            if (isMobile)
+                showText.value = `${selectedFotos.length}`;
+            else
+                showText.value = `SHOW ${selectedFotos.length}`;
+        }
+        else
+            showText.value = isMobile ? "0" : "SHOW 0";
+    }
     function onDownload() {
         showDownload.value = true;
     }
@@ -170,7 +181,7 @@
         showGps.value = false;
         if (selectedRegion) {
             selectedFotos = await MediaHelper.searchPicturesGPS(mediaService, selectedRegion.latFrom, selectedRegion.latTo, selectedRegion.lngFrom, selectedRegion.lngTo, mediaService.photoSelection.rating);
-            showText.value = `SHOW ${selectedFotos.length}`;
+            setShowText();
         }
     }
     async function onGpsSelect (region: IPhotoRegion) {
@@ -179,7 +190,7 @@
         if (region.key) {
             selectedFotos = foundMap.get(region.key);
             if (selectedFotos) {
-                showText.value = `SHOW ${selectedFotos.length}`;
+                setShowText();
                 photos.value.splice(0, photos.value.length, ...selectedFotos);
                 console.log(photos.value.length);
                 showGps.value = false;
@@ -255,9 +266,10 @@
             <v-checkbox v-model="withPerson" hide-details density="compact" label="Pers" @update:modelValue="onLocPersChanged"></v-checkbox>
           </v-col>
           <v-col cols="2">
-            <v-btn v-if="isMobile" icon="$search" variant="tonal" @click="onShow"></v-btn>
+            <v-btn v-if="isMobile" icon="$gps" density="compact" variant="tonal" @click="onGps"></v-btn>
+            <v-btn v-else prepend-icon="$gps" variant="tonal" @click="onGps">GPS</v-btn>
+            <v-btn v-if="isMobile" icon="$search" density="compact" variant="tonal" @click="onShow"></v-btn>
             <v-btn v-else prepend-icon="$search" variant="tonal" @click="onShow">{{showText}}</v-btn>
-            <v-btn v-if="!isMobile" prepend-icon="$gps" variant="tonal" @click="onGps">GPS</v-btn>
           </v-col>
         </v-row>
         <v-row v-if="mediaAppConfig.showThumbnailText" dense align="center" >