@christianriedl/media 1.0.205 → 1.0.207

package/package.json

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

package/src/views/PhotosGridPage.vue

@@ -171,6 +171,9 @@
         selected.rating = Number(value);
         initialize(selectedFolder.value.name);
     }
+    function onSearch() {
+        router.push({ path: 'photothumbnails' });
+    }
     async function initialize(selectedName?: string) {
         let root = await mediaService.getPhotosByCriteria(stars(), selected.criteria);
         if (selected.criteria != 'ye' && selectedName) {
@@ -223,6 +226,10 @@
             <v-select v-model="root" :items="roots" density="compact" persistent-hint
                       @update:modelValue="onRootChange" hide-details single-line>
             </v-select>
+            <v-btn v-if="!backVisible" @click="onSearch">
+                {{ isMobile ? "" : "SEARCH" }}
+                <v-icon icon="$search" />
+            </v-btn>
             <v-btn v-if="!isMobile" @click="uploadVisible = !uploadVisible">
                 UPLOAD
                 <v-icon icon="$upload" />

package/src/views/ThumbnailsPage.vue

@@ -17,7 +17,9 @@
     const isMobile = appState.isMobile && appState.device !== EDevice.iPad;
     const router = useRouter();
     const route = useRoute();
-    const folderId = decodeURIComponent(route.query!.id!.toString());
+    const title = ref("");
+    const withPerson = ref(false);
+    const withLocation = ref(false);
     const photos = ref<IPictureFile[]>([]);
     const minImageWidth = 100;
     const numImagesPerRow = Math.min(window.innerWidth / minImageWidth, 12);
@@ -39,23 +41,115 @@
             if (!mediaService.medialists["Picture.Event"])
                 await (mediaService as MediaService).getLists(EMediaType.Picture);
         }
-        folder.value = mediaService.getFolder(folderId);
-        if (!folder.value) {
-            const split = folderId.split(/[.|]/);
-            await mediaService.getPhotosByCriteria(split[1], split[2]);
-            folder.value = mediaService.getFolder(folderId);
-            if (!folder.value)
-                return;
+        if (route.query) {
+            if (route.query.id) {
+                const folderId = decodeURIComponent(route.query.id.toString());
+                folder.value = mediaService.getFolder(folderId);
+                if (!folder.value) {
+                    const split = folderId.split(/[.|]/);
+                    await mediaService.getPhotosByCriteria(split[1], split[2]);
+                    folder.value = mediaService.getFolder(folderId);
+                    if (!folder.value)
+                        return;
+                }
+                folder.value = await mediaService.getPhotos(folder.value);
+                photos.value.splice(0, photos.value.length, ...folder.value!.files as IPictureFile[]);
+            }
+            else if (route.query.title) {
+                title.value = route.query.title.toString();
+                if (route.query.pers !== undefined)
+                    withPerson.value = true;
+                if (route.query.loc  !== undefined)
+                    withLocation.value = true;
+                onSearch();
+            }
         }
-        folder.value = await mediaService.getPhotos(folder.value);
-        photos.value.splice(0, photos.value.length, ...folder.value!.files as IPictureFile[]);
         console.log(photos.value.length);
     })
+    function inMediaList (listName: string, regex: RegExp) : number[] | undefined
+    {
+        const list = mediaService.medialists[listName];
+        let idxs: number[] | undefined;
+        for (let i = 0; i < list.values.length; i++) {
+            if (regex.test (list.values[i].toLowerCase())) {
+                if (!idxs)
+                    idxs = [];
+                idxs.push(i);
+            }
+        }
+        return idxs;
+    }
+    async function searchPictures(titlePattern: string, searchPerson: boolean, searchLocation: boolean, rating: number, maxPictures: number = 200): Promise<IPictureFile[]> {
+        const regex = new RegExp(`^.*${titlePattern.toLowerCase()}.*$`);
+        const root = mediaService.getFolder("ph.all.ye|");
+        const result: IPictureFile[] = [];
+        const personIdxs = searchPerson ? inMediaList ("Picture.Person", regex) : undefined;
+        const locationIdxs = searchLocation ? inMediaList ("Picture.Location", regex) : undefined;
+        let count = 0;
+
+        photos.value.splice(0, photos.value.length);
+        for (let i = 0; i < root.folders.length; i++) {
+            const yf = root.folders[i];
+            mediaService.prepare (yf);
+            for (let j = 0; j < yf.folders.length; j++) {
+                const af = yf.folders[j];
+                mediaService.prepare (af);
+                const album = await mediaService.getPhotos(af);
+                if (album) {
+                    for (let k = 0; k < album.files.length; k++) {
+                        let match = false;
+                        const photo = album.files[k] as IPictureFile;
+                        if (photo.rating < rating)
+                            continue;
+                        if (personIdxs && photo.personIdxs) {
+                            for (let l = 0; l < photo.personIdxs.length; l++) {
+                                if (personIdxs.includes (photo.personIdxs[l])) {
+                                    match = true; break;
+                                }
+                            }
+                        }
+                        if (locationIdxs && photo.locationIdx) {
+                            if (locationIdxs.includes (photo.locationIdx))
+                                match = true;
+                        }
+                        if (regex.test (photo.name.toLowerCase())) 
+                            match = true;
+
+                        if (match) {
+                            count++;
+                            if (result.length < maxPictures)
+                                result.push(photo);
+                        } 
+                    }
+                }
+            }
+        }
+        if (result.length >= maxPictures) {
+            alert (`Too many pictures (${count}) found, limit : ${result.length}`)
+        }
+        return result;
+    }
+    async function onSearch() {
+        const list = await searchPictures (title.value, withPerson.value, withLocation.value, mediaService.photoSelection.rating, isMobile ? 200 : 500);
+        photos.value.splice(0, photos.value.length, ...list);
+        console.log(photos.value.length);
+    }
     function onClick(item: IPictureFile) {
         if (selectMode.value)
             item.selected = !item.selected;
-        else
-            router.push({ path: 'photoalbum', query: { id: folder.value!.dlnaid, start: item.dlnaid } });
+        else {
+            if(folder.value)
+                router.push({ path: 'photoalbum', query: { id: folder.value!.dlnaid, start: item.dlnaid } });
+            else {
+                let url = `${route.path}?title=${title.value}`;
+                if (withPerson.value)
+                    url += '&pers';
+                if (withLocation.value)
+                    url += '&loc';
+                router.options.history.replace (url);
+                router.push({ path: 'photoalbum', query: { id: item.dlnaParentId, start: item.dlnaid } });
+            }
+        }
     }
     async function onShare() {
         const picIds: string[] = [];
@@ -91,7 +185,8 @@
         showDownload.value = false;
     }
     function getThumbnailUrl(image: IPictureFile) : string {
-        let url = `https://www.christian-riedl.com/media/apiimage/Thumbnail?image=${folder.value!.url}${image.url}&tresX=${image.thumbWidth}&tresY=${image.thumbHeight}`;
+        const f = folder.value ? folder.value : mediaService.getFolder (image.dlnaParentId);
+        let url = `https://www.christian-riedl.com/media/apiimage/Thumbnail?image=${f.url}${image.url}&tresX=${image.thumbWidth}&tresY=${image.thumbHeight}`;
         if (image.orientation && (image.orientation === EOrientation.BottomLeft || image.orientation === EOrientation.TopRight))
             url += '&orientation=' + Number(image.orientation);
         return encodeURI(url);
@@ -117,6 +212,21 @@
                 <v-btn icon="$download" variant="tonal" @click="onDownload"></v-btn>
             </v-col>
         </v-row>
+        <v-row v-else dense align="center">
+          <v-col cols="6">
+            <v-text-field label="Titel" v-model="title" hide-details clearable ></v-text-field>
+          </v-col>
+          <v-col cols="2">
+            <v-checkbox v-model="withLocation" hide-details density="compact" label="Loc"></v-checkbox>
+          </v-col>
+          <v-col cols="2">
+            <v-checkbox v-model="withPerson" hide-details density="compact" label="Pers"></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">Search</v-btn>
+          </v-col>
+        </v-row>
         <v-row v-if="mediaAppConfig.showThumbnailText" dense align="center" >
             <v-col :cols="numColsPerImage" class="bg-grey-darken-2 thumbnail" v-for="(image, index) in photos" :key="index">
                 <div v-if="image.title" class="text-caption text-no-wrap">{{image.title!.substring(0, textTrim)}}</div>