@christianriedl/media 1.0.249 → 1.0.250

package/package.json

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

package/src/components/PhotoMap.vue

@@ -2,15 +2,15 @@
 <script setup lang="ts">
     import { inject, ref, toRef, computed, onMounted, watch } from 'vue';
     import { GoogleMap } from 'vue3-google-map'
-    import { Authorize, authorizeSymbol } from '@christianriedl/rest';
+    import { authorizeSymbol } from '@christianriedl/rest';
     import { IPhotoMarker, IPhotoRegion, IPictureFile, getMediaBinSymbol } from '@christianriedl/media';
 
     const props = defineProps<{ location: string, zoom: number, selectRegion?: IPhotoRegion, fotos?: IPhotoMarker[] }>();
     const emits = defineEmits<{ (e: 'select', value: IPhotoRegion): void }>();
 
     const authorize = inject(authorizeSymbol)!;
-    //const apiKey = "AIzaSyBXXPRWgozn5kP40fmdk5f6xLRYkImPI9w";
-    const apiKey = authorize.keyGoogleMaps;
+    const apiKey = "AIzaSyBXXPRWgozn5kP40fmdk5f6xLRYkImPI9w";
+    //const apiKey = authorize.keyGoogleMaps;
     const getMediaService = inject(getMediaBinSymbol)!;
     const mediaService = getMediaService() ;
 
@@ -219,15 +219,16 @@
         }
     }
     function displayPhoto(photo: IPictureFile) {
-	let maxHeight = window.innerHeight * 0.8;
-	const fac = (photo.height > maxHeight) ? (maxHeight / photo.height) ; 1;
-	let left = Math.floor((window.innerWidth - photo.width) / 2);
-	photoLeft.value = { 'left': left + 'px' };
-	photoHeight.value = Math.floor(photo.height * fac);
-	photoWidth.value = Math.floor(photo.width * fac);
+	    let maxHeight = window.innerHeight * 0.8;
+	    const fac = (photo.height > maxHeight) ? (maxHeight / photo.height) : 1;
+	    let left = Math.floor((window.innerWidth - photo.width * fac) / 2);
+        if (left < 0) left = 0;
+	    photoLeft.value = { 'left': left + 'px' };
+	    photoHeight.value = Math.floor(photo.height * fac);
+	    photoWidth.value = Math.floor(photo.width * fac);
         const albumUrl = mediaService.getFolder(photo.dlnaParentId).url;
         photoUrl = mediaService.getPhotoUrl(albumUrl, photo.url, `${0}x${photoHeight.value}x${photo.orientation}x70`);
-	showPhoto.value = true;
+	    showPhoto.value = true;
     }
     function createPin(loc: google.maps.LatLng, text: string, color: string, background: string): google.maps.marker.AdvancedMarkerElement {
         const pinGlyph = new google.maps.marker.PinElement({

package/src/views/ThumbnailsPage.vue

@@ -33,11 +33,13 @@
     const folder = ref<IMediaFolder | null>(null);
     const selectMode = ref<boolean>(false);
     const showDownload = ref(false);
+    const showLocation = ref(false);
     const showText = ref("SHOW");
-
+    let   selectedFotos: IPictureFile[] | null = null;
     // GPS selection
     const center = ref("Wien");
-    const zoom = 10;
+    const location = ref("");
+    const zoom = 14;
     const maxMultiple = 10;
     const markersPerDim = 40;
     const showGps = ref(false);
@@ -74,7 +76,7 @@
                     withPerson.value = true;
                 if (route.query.loc  !== undefined)
                     withLocation.value = true;
-                onSearch();
+                onShow();
                 return;
             }
         }
@@ -86,13 +88,15 @@
     async function onTitleChanged() {
         if (isMobile || title.value.length < 3)
             return;
-        const list = await MediaHelper.searchPictures (mediaService, title.value, withPerson.value, withLocation.value, mediaService.photoSelection.rating, 100000);
-        showText.value = `SHOW ${list.length}`;
+        selectedFotos = await MediaHelper.searchPictures (mediaService, title.value, withPerson.value, withLocation.value, mediaService.photoSelection.rating, 100000);
+        showText.value = `SHOW ${selectedFotos.length}`;
     }
-    async function onSearch() {
-        const list = await MediaHelper.searchPictures (mediaService, title.value, withPerson.value, withLocation.value, mediaService.photoSelection.rating, mediaAppConfig.pictureSearchLimit);
-        showText.value = `SHOW ${list.length}`;
-        photos.value.splice(0, photos.value.length, ...list);
+    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}`;
+        }
+        photos.value.splice(0, photos.value.length, ...selectedFotos);
         console.log(photos.value.length);
     }
     function onClick(item: IPictureFile) {
@@ -154,28 +158,39 @@
             url += '&orientation=' + Number(image.orientation);
         return encodeURI(url);
     }
+    function onGps() {
+        showGps.value = true;
+    }
+    function onGoTo() {
+        showLocation.value = false;
+        center.value = location.value;
+    }
+    async function onCloseGps () {
+        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}`;
+        }
+    }
     async function onGpsSelect (region: IPhotoRegion) {
-        selectedRegion = region;
         latLength = region.latLength;
         lngLength = region.lngLength;
         if (region.key) {
             const arr = region.key.split('|');
-	    const latDelta = Math.max(0.001, latLength / markersPerDim);
-	    const lngDelta = Math.max(0.001, lngLength / markersPerDim);
+	        const latDelta = Math.max(0.001, latLength / markersPerDim);
+	        const lngDelta = Math.max(0.001, lngLength / markersPerDim);
             const lat = Number(arr[0]) * latDelta;
-	    const lng = Number(arr[1]) * lngDelta;
-            const list = MediaHelper.searchPicturesGPS(mediaService, lat, lat + latDelta, lng, lng + lngDelta, mediaService.photoSelection.rating):
-            showText.value = `SHOW ${list.length}`;
-            photos.value.splice(0, photos.value.length, ...list);
+	        const lng = Number(arr[1]) * lngDelta;
+            selectedFotos = await MediaHelper.searchPicturesGPS(mediaService, lat, lat + latDelta, lng, lng + lngDelta, mediaService.photoSelection.rating);
+            showText.value = `SHOW ${selectedFotos.length}`;
+            photos.value.splice(0, photos.value.length, ...selectedFotos);
             console.log(photos.value.length);
+            showGps.value = false;
         }
         else {
-	    valueLatFrom.value = region.latFrom;
-	    valueLatTo.value = region.latTo;
-	    valueLngFrom.value = region.lngFrom;
-	    valueLngTo.value = region.lngTo;
-            const fotos = MediaHelper.searchPicturesGPS(mediaService, region.latFrom, region.latTo, region.lngFrom, region.lngTo, mediaService.photoSelection.rating);
-            foundFotos.value = MediaHelper.createMarker(fotos, latLength, lngLength, markersPerDim, maxMultiple);
+            selectedRegion = region;
+            selectedFotos = await MediaHelper.searchPicturesGPS(mediaService, region.latFrom, region.latTo, region.lngFrom, region.lngTo, mediaService.photoSelection.rating);
+            foundFotos.value = MediaHelper.createMarker(selectedFotos, latLength, lngLength, markersPerDim, maxMultiple);
         }
     }
 </script>
@@ -210,8 +225,8 @@
             <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="onSearch"></v-btn>
-            <v-btn v-else prepend-icon="$search" variant="tonal" @click="onSearch">{{showText}}</v-btn>
+            <v-btn v-if="isMobile" icon="$search" 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>
@@ -239,9 +254,35 @@
     <v-dialog v-model="showDownload" v-click-outside="onCloseDownload">
         <photo-download :folder="folder!" :photos="photos" @close="onCloseDownload"></photo-download>
     </v-dialog>
-    <v-dialog v-model="showGps" >
-        <photo-map :location="location" :zoom="14" :selectRegion="selectedRegion" :fotos="foundFotos" @select="onGpsSelect"></photo-map>
+    <v-dialog v-model="showGps">
+        <v-card>
+            <v-card-text>
+                <photo-map :location="center" :zoom="zoom" :selectRegion="selectedRegion" :fotos="foundFotos" @select="onGpsSelect"></photo-map>
+            </v-card-text>
+            <v-card-actions>
+                <v-btn size="large" @click="onCloseGps">
+                    <v-icon icon="$back"></v-icon>
+                </v-btn>
+                <v-btn size="large" @click="showLocation = true">
+                    <v-icon icon="$gps"></v-icon>
+                </v-btn>
+            </v-card-actions>
+        </v-card>
     </v-dialog>
+    <v-dialog v-model="showLocation" width="30%">
+        <v-card>
+            <v-card-title>Select Location</v-card-title>
+            <v-card-text>
+                <v-text-field v-model="location" hide-details >
+                </v-text-field>
+            </v-card-text>
+            <v-card-actions>
+                <v-btn size="large" @click="onGoTo"><v-icon icon="$back"></v-icon>
+                </v-btn>
+            </v-card-actions>
+        </v-card>
+    </v-dialog>
+
 </template>
 
 <style scoped>