@christianriedl/media 1.0.128 → 1.0.129

package/package.json

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

package/src/components/PhotoDownload.vue

@@ -3,10 +3,10 @@
     import { Helper } from '@christianriedl/utils';
     import { IMediaFolder, MediaService, IPictureFile, getMediaSymbol } from '@christianriedl/media';
 
-    const props = defineProps<{ folder: IMediaFolder, photos: IPictureFile[] }>();
+    const props = defineProps<{ folder: IMediaFolder, photos?: IPictureFile[] }>();
     const emits = defineEmits<{ (e: 'close'): void }>();
 
-    const title = `Download '${props.folder.Name}' (${props.folder.ChildCount} Bilder)`
+    const title = getTitle();
     const getMedia = inject(getMediaSymbol)!;
     const mediaService = getMedia();
 
@@ -36,17 +36,27 @@
     }
     async function onDownload() {
         const folder = await mediaService.getPhotos(props.folder);
+        const downloadUrl = mediaService.getPhotosDownloadUrl(folder, height.value, quality.value, getPhotoIds());
+        window.open(downloadUrl);
+        emits('close');
+    }
+    function getTitle(): string {
+        let count = getPhotoIds().length;
+        if (count == 0)
+            count = props.folder.ChildCount;
+        return `Download '${props.folder.Name}' (${count} Bilder)`
+
+    }
+    function getPhotoIds(): string[] {
         const photoIds: string[] = [];
         if (props.photos) {
-            for (var i = 0; i < props.photos.value.length; i++) {
-                const photo = props.photos.value[i];
+            for (var i = 0; i < props.photos.length; i++) {
+                const photo = props.photos[i];
                 if (photo.selected)
                     photoIds.push(photo.DLNAID);
             }
         }
-        const downloadUrl = mediaService.getPhotosDownloadUrl(folder, height.value, quality.value, photoIds);
-        window.open(downloadUrl);
-        emits('close');
+        return photoIds;
     }
 </script>
 

package/src/views/PhotosGridPage.vue

@@ -1,50 +1,57 @@
 <script setup lang="ts">
     import { inject, ref, reactive, computed, onMounted, onUnmounted, nextTick, watch, StyleValue } from 'vue';
-    import { VDataTableVirtual } from 'vuetify/labs/VDataTable';
     import type { ComponentPublicInstance } from 'vue';
     import { useRouter } from 'vue-router';
     import { IAppState, IAppConfig, EDevice, EBrowser, appStateSymbol, appConfigSymbol, Helper } from '@christianriedl/utils';
-    import { EItemType, EMediaType, IMediaFolder, IMediaItem, IPhotoSelection, MediaService, getMediaSymbol, IMediaAppConfig } from '@christianriedl/media';
+    import { EItemType, EMediaType, IMediaFolder, IMediaItem, IPhotoSelection, MediaService, IMediaService, getMediaSymbol, getMediaBinSymbol, IMediaAppConfig } from '@christianriedl/media';
     import FileUpload from '../components/FileUpload.vue';
     import PhotoDownload from '../components/PhotoDownload.vue';
 
     const appState = inject(appStateSymbol)!;
     const appConfig = inject(appConfigSymbol)!;
     const mediaAppConfig = appConfig as unknown as IMediaAppConfig;
-    const getMediaService = inject(getMediaSymbol)!;
-    const mediaService = getMediaService();
-    const heightStyle = computed<StyleValue>(() => { return { height: appState.bodyHeight.value + 'px', overflowY: 'auto' } });
+    const getMediaService = inject(mediaAppConfig.useMediaBin ? getMediaBinSymbol : getMediaSymbol)!;
+    const mediaService = getMediaService() as unknown as IMediaService;
+    //const heightStyle = computed<StyleValue>(() => { return { height: appState.bodyHeight.value + 'px', overflowY: 'auto' } });
     const isMobile = appState.isMobile && (appState.device != EDevice.iPad);
     const router = useRouter();
-    const open = ref<string[]>([]);
+ 
+    const listHeight = ref(0);
+    const listhead = ref<ComponentPublicInstance|null>(null);
 
     const items = ref<IMediaFolder[]>([]);
     const selected = reactive<IPhotoSelection>(mediaService.photoSelection);
-    const listHeight = ref(appState.bodyHeight.value);
-    const listhead = ref<ComponentPublicInstance|null>(null);
-    const table = ref<InstanceType<typeof VDataTableVirtual> | null>(null);
     const uploadVisible = ref(false);
 
     const roots: string[] = ['Jahr', 'Orte', 'Ereignisse', 'Personen'];
     const criterias: string[] = ['ye', 'lo', 'ev', 'pe'];
-    const groupBy = ref<any>([{key: 'info', order: 'asc'}]);
-    const sortBy = ref<any>([{key: 'title', order: 'asc'}]);
-    const headers= [
-        { title: 'Title', key: 'title', align: 'start', sortable: false },
-        { title: 'Actions', key: 'actions', sortable: false }
-    ];
-    const grouped = ref(false);
     const backVisible = ref(false);
+    const itemIndex = ref(0);
     const showDownload = ref(false);
+    const showAlbums = ref(false);
     const downloadFolder = ref<IMediaFolder | null>(null);
     const selectedYear = ref<number | undefined>(undefined);
     const selectedName = ref<string | undefined>(undefined);
+    const numGridCols = computed(() => computeColumnWidth(selected.selected, appState.pageWidth.value));
+    const numRootSelColumns = computed(() =>  { return 12 - (backVisible.value ? 2 : 0) - 2 - (isMobile ? 0 : 2)  });
+
+    watch(appState.bodyHeight, () => computeListHeight());
 
     window.addEventListener('popstate', onPopState);
+ 
+    function computeListHeight() {
+        nextTick(() => {
+            let height = appState.bodyHeight.value;
+            if (listhead.value) {
+                height = height - (listhead.value.$el as HTMLElement).clientHeight;
+            }
+            listHeight.value = height;
+        })
+    }
     function onPopState(event: any) {
         if (event.state && event.state.noBackExitsApp && backVisible.value) {
             event.preventDefault();
-            listBack();
+            goBack();
         }
     }
     onUnmounted(() => {
@@ -54,67 +61,46 @@
     });
     onMounted(async () => {
         mediaService.log.trace('Photos created');
-        const rc = await mediaService.getLists(EMediaType.Picture);
-        let root;
+        let root: IMediaFolder;
+        if (mediaAppConfig.useMediaBin) {
+            const rc = await mediaService.initialize(EMediaType.Picture);
+        }
+        else {
+            const rc = await (mediaService as MediaService).getLists(EMediaType.Picture);
+        }
         if (!selected.selected.DLNAID) {
-            root = await mediaService.initializePhotos(stars(), selected.criteria);
+            root = await mediaService.getPhotosByCriteria(stars(), selected.criteria);
         }
         else {
             root = mediaService.getFolder(selected.selected.DLNAID);
         }
-        const folders = setSelected(root);
+        setSelected(root);
         if (selected.selectedAlbum)
             selectedYear.value = selected.selectedAlbum.Year;
-        const expanded = selected.criteria == 'ye' || root.ItemType == EItemType.PictureCategory;
-        setGrouped(folders, expanded, selectedYear.value);
-        const scrollTop = appState.scrollPosition.value;
-        if (scrollTop > 0 && table.value) {
-            nextTick(() => {
-                // Scoll to this position
-                const el = table.value?._?.vnode?.el;
-                el?.scrollTo(0, scrollTop);
-            });
-        }
-        mediaService.log.trace(`Photos start with ${selected.selected.DLNAID} scrollTop: ${scrollTop}`);
+        const grouped = selected.criteria == 'ye' || root.ItemType == EItemType.PictureCategory;
+        mediaService.log.trace(`Photos start with ${selected.selected.DLNAID}`);
     })
-    watch(appState.bodyHeight, () => computeListHeight());
-    function computeListHeight() {
-        nextTick(() => {
-            let height = appState.bodyHeight.value;
-            if (listhead.value) {
-                height = height - (listhead.value.$el as HTMLElement).clientHeight;
-            }
-            listHeight.value = height;
-        })
-    }
     function stars() {
         return selected.rating ? (selected.rating == 1 ? '*' : '**') : 'all';
     }
     function showFolder(folder: IMediaFolder) {
-        const folders = setSelected(folder);
-        setGrouped(folders, true);
-        computeListHeight();
-    }
-    function listExpand(folder: IMediaFolder) {
-        if (folder.Year && folder.Year > 0)
-            selectedYear.value = folder.Year;
+        if (showAlbums.value) 
+            showPictures(folder);
+        else {
+            window.history.pushState({ noBackExitsApp: true }, '')
+            setSelected(folder);
+        }
     }
     function showPictures(folder: IMediaFolder) {
         selected.selectedAlbum = folder;
         router.push({ path: 'photoalbum', query: { id: folder.DLNAID } });
     }
-    function onClick(ev: Event, row: any) {
-        const folder = row.item.raw as IMediaFolder;
-        if (folder.info)
-            showPictures(folder);
-        else
-            showFolder(folder);
-    }
-    function listBack() {
+    function goBack() {
         const parent = mediaService.getFolder(selected.selected.DLNAParentID);
         const index = parent.Folders.indexOf(selected.selected);
-        const folders = setSelected(parent);
-        setGrouped(folders, false);
+        setSelected(parent);
+        if (index)
+            itemIndex.value = index;
     }
     function onLightbox(folder: IMediaFolder) {
         selected.selectedAlbum = folder;
@@ -125,6 +111,10 @@
         downloadFolder.value = folder;
         showDownload.value = true;
     }
+    function onCloseDownload() {
+        downloadFolder.value = null;
+        showDownload.value = false;
+    }
     async function onShare(folder: IMediaFolder) {
         const guid = Helper.generateUUID();
         const url = `https://www.christian-riedl.com/photos?id=${guid}`;
@@ -140,10 +130,6 @@
             window.alert(`Not Pasted : ${err} !`);
         }
     }
-    function onCloseDownload() {
-        downloadFolder.value = null;
-        showDownload.value = false;
-    }
     function onRootChange(root: string) {
         const idx = roots.indexOf(selected.root);
         selected.criteria = criterias[idx];
@@ -155,77 +141,65 @@
         initialize().then((v) => { });;
     }
     async function initialize(): Promise<boolean> {
-        let root = await mediaService.initializePhotos(stars(), selected.criteria);
-        let expanded = selected.criteria == 'ye';
+        let root = await mediaService.getPhotosByCriteria(stars(), selected.criteria);
         if (selected.criteria != 'ye' && selectedName.value) {
             for (let i = 0; i < root.Folders.length; i++) {
                 if (root.Folders[i].Name == selectedName.value) {
                     root = root.Folders[i];
-                    expanded = true;
                     break;
                 }
             }
         }
-        const folders = setSelected(root);
-        setGrouped(folders, expanded, selectedYear.value);
+        setSelected(root);
         return true;
     }
-    function setSelected(folder: IMediaFolder) : IMediaFolder[] {
+    function setSelected(folder: IMediaFolder)  {
+        mediaService.prepare(folder);      // To prepare children
         selected.selected = folder;
         if (folder.Year && folder.Year > 0)
             selectedYear.value = folder.Year;
         selectedName.value = folder.Name;
         backVisible.value = selected.selected.ItemType != EItemType.PictureGenreType;
-
-        // calculate list height
+        computeColumnWidth(folder, appState.pageWidth.value);   // computes showAlbums
         computeListHeight();
-        return folder.Folders;
-    }
-    function setGrouped(folders: IMediaFolder[], expand: boolean, year?: number) {
-        grouped.value = expand;
-        groupBy.value = expand ? [{key: 'info', order: 'asc'}] : [];
-        const expanded = (expand && folders.length <= 6) ? true : false;
-        const list: IMediaFolder[] = []; 
-        for (let i = 0; i < folders.length; i++) {
-            let folder = folders[i];
-            if (expand) {
-                if (year && year == folder.Year) {
-                    open.value.push(year.toString());
-                }
-                for (let j = 0; j < folder.Folders.length; j++) {
-                    const item = folder.Folders[j];
-                    item.info = folder.title;
-                    list.push(item);
-                }
-            }
-            else {
-                folder.info = undefined;
-                list.push(folder);
+        items.value = folder.Folders;
+    }
+    function computeColumnWidth(folder: IMediaFolder, width: number) {
+        let nameLength = 9;
+        if (folder) {
+            const dlnaid = folder.DLNAID;
+            if (dlnaid.endsWith('|'))
+		        nameLength = 9;        // Year
+	        else if (dlnaid.endsWith(".ev"))
+		        nameLength = 18;       // Event
+            else if (dlnaid.endsWith(".lo"))
+		        nameLength = 14;       // Location
+	        else if (dlnaid.endsWith(".pe"))
+		        nameLength = 12;       // Person
+	        else {
+	            //nameLength = 32;       // Album
+                showAlbums.value = true;
+                return 12;
             }
         }
-        items.value = list;
-    }
-    function onScroll(ev: Event) {
-        const scrollTop = (ev.target as Element).scrollTop;
-        appState.scrollPosition.value = scrollTop;
-    }
-    function setGroupFunc(toggle:any) : string {
-        return "";
-    }
+	    let numColumns = appState.pageWidth.value / (nameLength * 10);
+        let colWidth = Math.ceil(12 / numColumns);
+        while (12 % colWidth != 0) 
+            colWidth++;
+        showAlbums.value = false;
+        return colWidth;
+    } 
 </script>
 <template>
-    <v-card ref="listhead" class="bg-media_head">
+    <v-card ref="listhead" class="bg-media_head" density="compact">
         <v-card-title>{{selected.selected.Name}}</v-card-title>
         <v-card-actions>
-            <v-btn v-if="backVisible" @click="listBack">
-                <v-icon size="large" icon="$back" />
+            <v-btn v-if="backVisible" @click="goBack">
+                <v-icon icon="$back" />
             </v-btn>
             <v-rating clearable length="2" v-model="selected.rating" @update:modelValue="onRating" />
-            <v-select v-model="selected.root"
-                      :items="roots"
-                      persistent-hint
-                      @update:modelValue="onRootChange"
-                      hide-details single-line>
+            <v-select v-model="selected.root" :items="roots" density="compact" persistent-hint
+                      @update:modelValue="onRootChange" hide-details single-line>
             </v-select>
             <v-btn v-if="!isMobile" @click="uploadVisible = !uploadVisible">
                 UPLOAD
@@ -234,53 +208,24 @@
         </v-card-actions>
     </v-card>
     <file-upload v-if="uploadVisible" accept="image/jpeg"></file-upload>
-    <v-data-table-virtual ref="table" :group-by="groupBy" :sort-by="sortBy" :items="items" :headers="headers" class="elevation-1" item-value="title" :height="listHeight"  
-        @click:row="onClick" v-scroll.self="onScroll">
-        <template v-slot:top="{ toggleGroup, isGroupOpen }">
-            <p style="display:none">{{setGroupFunc(toggleGroup)}}</p>
-        </template>
-        <template v-slot:item.actions="{ item }">
-            <div v-if="item.raw.info">
-                <v-icon size="small" icon="$share" @click="onShare(item.raw)"></v-icon>
-                <v-icon size="small" icon="$download" @click="onDownload(item.raw)"></v-icon>
-                <v-icon size="small" icon="$grid" @click="onLightbox(item.raw)"></v-icon>
-            </div>
-        </template>
-    </v-data-table-virtual>
-    <!--
-    <v-card :max-height="listHeight" class="overflow-y-auto bg-media" ref="scrollElement" v-scroll.self="onScroll">
-        <v-data-table-virtual ref="table" :group-by="groupBy" :items="items" :headers="headers" class="elevation-1" item-value="title" :height="listHeight"  @click:row="onClick">
-            <template v-slot:item.actions="{ item }">
-                <v-icon size="small" icon="$share" @click="onShare(item.raw)"></v-icon>
-                <v-icon size="small" icon="$download" @click="onDownload(item.raw)"></v-icon>
-                <v-icon size="small" icon="$grid" @click="onLightbox(item.raw)"></v-icon>
-            </template>
-        </v-data-table-virtual>
-        <!-
-        <v-list v-if="!grouped">
+    <v-card :height="listHeight" class="overflow-y-auto bg-media" >
+        <v-list v-if="showAlbums" class="bg-media">
             <v-list-item v-for="item in items" :key="item.DLNAID" :title="item.info" density="compact" @click.stop="showFolder(item)">
-            </v-list-item>
-        </v-list>
-        <v-list v-else v-model:opened="open">
-            <v-list-group v-for="item in items" :key="item.DLNAID" :value="item.Name" @click.stop="listExpand(item)">
-                <template v-slot:activator="{ props }">
-                    <v-list-item v-bind="props" :title="item.info" :value="item.info" density="compact"></v-list-item>
+                <template v-slot:append>
+                        <v-btn color="grey" variant="tonal" icon="$share" @click.stop.prevent="onShare(item)"></v-btn>
+                        <v-btn color="grey" variant="tonal" icon="$download" @click.stop.prevent="onDownload(item)"></v-btn>
+                        <v-btn color="grey" variant="tonal" icon="$grid" @click.stop.prevent="onLightbox(item)"></v-btn>
                 </template>
-                <v-list-item v-for="subItem in item.Folders" :key="subItem.DLNAID" :title="subItem.info" density="compact" @click.stop="showPictures(subItem)">
-                    <template v-slot:append>
-                        <v-btn color="grey" variant="tonal" icon="$share" @click.stop.prevent="onShare(subItem)"></v-btn>
-                        <v-btn color="grey" variant="tonal" icon="$download" @click.stop.prevent="onDownload(subItem)"></v-btn>
-                        <v-btn color="grey" variant="tonal" icon="$grid" @click.stop.prevent="onLightbox(subItem)"></v-btn>
-                    </template>
-                </v-list-item>
-            </v-list-group>
+            </v-list-item>
         </v-list>
-        ->
+        <v-row v-else class="bg-media pa-1">
+            <v-col :cols="numGridCols" v-for="item in items" :key="item.DLNAID" density="compact" @click.stop="showFolder(item)">
+                {{item.info}}
+            </v-col>
+        </v-row> 
     </v-card>
-    -->        
-
-    <v-dialog v-model="showDownload">
-        <photo-download :folder="downloadFolder!" v-click-outside="onCloseDownload" @close="onCloseDownload"></photo-download>
+    <v-dialog v-model="showDownload" v-click-outside="onCloseDownload" >
+        <photo-download :folder="downloadFolder!" @close="onCloseDownload"></photo-download>
     </v-dialog>
 </template>
 

package/src/views/PhotosPage.vue

@@ -201,7 +201,7 @@
         <v-card-title>{{selected.selected.Name}}</v-card-title>
         <v-card-actions>
             <v-btn v-if="backVisible" @click="listBack">
-                <v-icon size="large" icon="$back" />
+                <v-icon icon="$back" />
             </v-btn>
             <v-rating clearable length="2" v-model="selected.rating" @update:modelValue="onRating" />
             <v-select v-model="selected.root"