@christianriedl/media 1.0.204 → 1.0.206

package/package.json

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

package/src/views/PhotoAlbumPage.vue

@@ -457,7 +457,7 @@
             </v-carousel-item>
         </v-carousel>
         <v-dialog v-model="infoDialog" :fullscreen="isMobile" >
-            <v-card v-if="infoDialog" width="600" >
+            <v-card v-if="infoDialog" :width="isMobile ? 400 : 600" >
                 <v-card-title class="headline">Metadata</v-card-title>
                 <v-card-text>
                     <v-container>

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,106 @@
             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): 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;
+
+        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 (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)
+                            result.push(photo);
+                    }
+                }
+            }
+        }
+        return result;
+    }
+    async function onSearch() {
+        const list = await searchPictures (title.value, withPerson.value, withLocation.value);
+        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 +176,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 +203,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>