@christianriedl/media 1.0.91 → 1.0.92

package/dist/iMedia.d.ts

@@ -195,6 +195,7 @@ export interface IVideoInfo {
 }
 export interface IMediaInfo {
     durationSeconds: number;
+    nameDurationMS: number;
     videoStream: IVideoInfo;
     audioStreams: IAudioInfo[];
 }

package/package.json

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

package/src/components/FileUpload.vue

@@ -40,7 +40,7 @@
             <v-text-field name="directory" label="Name (Directory)" type="text" v-model="name" density="compact" hide-details></v-text-field>
         </v-col>
         <v-col cols="4">
-            <v-file-input show-size clearable multiple v-model="files" :accept="props.accept" label="Select File"
+            <v-file-input show-size clearable multiple hide-details v-model="files" :accept="props.accept" label="Select File"
                           prepend-icon="" append-icon="$upload" @click:append="onUpload">
             </v-file-input>
         </v-col>

package/src/views/PhotoAlbumPage.vue

@@ -33,6 +33,8 @@
     let gpsLat: number[];
     let mouseDownTime: number = 0;
     let mouseTimer: number = -1;
+    let nameTimer: number = -1;
+    const showName = ref(false);
 
     watch([appState.bodyHeight, appState.pageWidth], () => {
         width.value = appState.pageWidth.value;
@@ -68,6 +70,7 @@
                 }
             }
             url.value = photos.Url;
+            onUpdate();
         }
         else {
             nextTick(() => router.back());
@@ -194,12 +197,12 @@
             case "ArrowLeft":
                 if (index.value > 0)
                     index.value--;
-                infoDialog.value = false;
+                onUpdate();
                 break;
             case "ArrowRight":
                 if (index.value < items.length - 1)
                     index.value++;
-                infoDialog.value = false;
+                onUpdate();
                 break;
             case "KeyI":                // Info
                 if (infoDialog.value) {
@@ -364,15 +367,38 @@
         document.body.removeChild(anchor);
         infoDialog.value = false;
     }
+    function clearName() {                      // also called by VImg::loadstart
+        showName.value = false;
+        if (nameTimer >= 0) {
+            window.clearTimeout(nameTimer);
+            nameTimer = -1;
+        }
+    }
+    function onUpdate() {                       // Carousel updated
+        infoDialog.value = false;
+        clearName();
+        const item = items[index.value];
+        nameTimer = window.setTimeout(() => { onLoad(item); }, 200);
+    }
+    function onLoad(item: IPictureFile) {       // img loaded or cached
+        clearName();
+        const idx = item.Url.lastIndexOf('.');
+        const name = item.Url.substr(0, idx);
+        if (!name.includes(item.Name)) {
+            showName.value = true;
+			nameTimer = window.setTimeout(() => { clearName(); }, mediaAppConfig.nameDurationMS);
+        }
+    }
 </script>
 
 <template>
     <v-container fluid :style="heightStyle" class="bg-grey-darken-3 pa-0">
         <v-carousel ref="carousel" hide-delimiters :show-arrows="false" v-model="index" 
                     :width="width" :height="height" :cycle="cycle" :interval="interval"
-                    @click="onClick" @mousedown="onMouseDown" @update:modelValue="infoDialog = false">
-            <v-carousel-item v-for="item in items" :key="item.DLNAID">
-                <img :src="getUrl(item)" :alt="item.Name" :width="getWidth(item)" :height="getHeight(item)" />
+                    @click="onClick" @mousedown="onMouseDown" @update:modelValue="onUpdate">
+            <v-carousel-item v-for="item in items" :key="item.DLNAID" :src="getUrl(item)" :alt="item.Name" :width="getWidth(item)" :height="getHeight(item)" 
+                @load="onLoad(item)" @loadstart="clearName()">
+                <h2 v-if="showName" class="imgtext">{{item.Name}}</h2>
             </v-carousel-item>
         </v-carousel>
         <v-dialog v-model="infoDialog" :fullscreen="isMobile" >
@@ -441,4 +467,11 @@
         margin-left: auto;
         margin-right: auto;
     }
+    .imgtext {
+        position:absolute;
+        top:0px;
+        width:100%;
+        text-align:center;
+        color:magenta;
+    }
 </style>

package/src/views/PhotosPage.vue

@@ -17,7 +17,7 @@
     const router = useRouter();
     const open = ref<string[]>([]);
 
-    const items: IMediaFolder[] = reactive([]);
+    const items = ref<IMediaFolder[]>([]);
     const selected = reactive<IPhotoSelection>(mediaService.photoSelection);
     const listHeight = ref(0);
     const listhead = ref<ComponentPublicInstance|null>(null);
@@ -181,7 +181,7 @@
                     itemIndex.value = i;
             }
         }
-        items.splice(0, items.length, ...folders);
+        items.value = folders;
     }
     function onScroll(ev: Event) {
         const scrollTop = (ev.target as Element).scrollTop;

package/src/views/PhotosPageDataTable.vue

@@ -0,0 +1,286 @@
+<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 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 isMobile = appState.isMobile && (appState.device != EDevice.iPad);
+    const router = useRouter();
+    const open = ref<string[]>([]);
+
+    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 showDownload = ref(false);
+    const downloadFolder = ref<IMediaFolder | null>(null);
+    const selectedYear = ref<number | undefined>(undefined);
+    const selectedName = ref<string | undefined>(undefined);
+
+    window.addEventListener('popstate', onPopState);
+    function onPopState(event: any) {
+        if (event.state && event.state.noBackExitsApp && backVisible.value) {
+            event.preventDefault();
+            listBack();
+        }
+    }
+    onUnmounted(() => {
+        window.removeEventListener('popstate', onPopState);
+        while (window.history.state && window.history.state.noBackExitsApp)
+            window.history.back();
+    });
+    onMounted(async () => {
+        mediaService.log.trace('Photos created');
+        const rc = await mediaService.getLists(EMediaType.Picture);
+        let root;
+        if (!selected.selected.DLNAID) {
+            root = await mediaService.initializePhotos(stars(), selected.criteria);
+        }
+        else {
+            root = mediaService.folders[selected.selected.DLNAID];
+        }
+        const folders = 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}`);
+    })
+    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;
+    }
+    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() {
+        const parent = mediaService.folders[selected.selected.DLNAParentID];
+        const index = parent.Folders.indexOf(selected.selected);
+        const folders = setSelected(parent);
+        setGrouped(folders, false);
+    }
+    function onLightbox(folder: IMediaFolder) {
+        selected.selectedAlbum = folder;
+        router.push({ path: 'photothumbnails', query: { id: folder.DLNAID } });
+
+    }
+    function onDownload(folder: IMediaFolder) {
+        downloadFolder.value = folder;
+        showDownload.value = true;
+    }
+    async function onShare(folder: IMediaFolder) {
+        const guid = Helper.generateUUID();
+        const url = `https://www.christian-riedl.com/photos?id=${guid}`;
+        try {
+            await window.navigator.clipboard.writeText(url);
+            const id = await mediaService.addPhotoService(guid, appConfig.user, folder.DLNAID, mediaAppConfig.linkDaysValid);
+            if (id)
+                window.alert(`Created and Pasted - id : ${id} !`);
+            else
+                window.alert(`Creation failed, please repeat !`);
+        }
+        catch (err) {
+            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];
+        selectedName.value = undefined;
+        initialize().then((v) => { });;
+    }
+    function onRating(value: number | string) {
+        selected.rating = Number(value);
+        initialize().then((v) => { });;
+    }
+    async function initialize(): Promise<boolean> {
+        let root = await mediaService.initializePhotos(stars(), selected.criteria);
+        let expanded = selected.criteria == 'ye';
+        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);
+        return true;
+    }
+    function setSelected(folder: IMediaFolder) : IMediaFolder[] {
+        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
+        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 = list;
+    }
+    function onScroll(ev: Event) {
+        const scrollTop = (ev.target as Element).scrollTop;
+        appState.scrollPosition.value = scrollTop;
+    }
+    function setGroupFunc(toggle:any) : string {
+        return "";
+    }
+</script>
+<template>
+    <v-card ref="listhead" class="bg-media_head">
+        <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-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-btn v-if="!isMobile" @click="uploadVisible = !uploadVisible">
+                UPLOAD
+                <v-icon icon="$upload" />
+            </v-btn>
+        </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-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-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>
+        ->
+    </v-card>
+    -->        
+
+    <v-dialog v-model="showDownload">
+        <photo-download :folder="downloadFolder!" v-click-outside="onCloseDownload" @close="onCloseDownload"></photo-download>
+    </v-dialog>
+</template>
+