@christianriedl/media 1.0.1

package/src/views/MediaInstancePage.vue

@@ -0,0 +1,149 @@
+<script setup lang="ts">
+    import { reactive, inject, ref, computed, onMounted, onUnmounted } from 'vue';
+    import { useRouter } from 'vue-router';
+    import { Helper, IValueText, IAppState } from '@christianriedl/utils';
+    import { IMediaInstanceService } from '@christianriedl/media';
+    import RootInformationLine from '../components/RootInformationLine.vue'
+    import RootStatisticsLine from '../components/RootStatisticsLine.vue'
+
+    const appState = inject<IAppState>('appstate');
+    const getMediaInstanceService = inject<() => IMediaInstanceService>('get-mediainstance');
+    const instanceService = getMediaInstanceService!();
+    const info = instanceService.instanceInformation;
+    const stat = instanceService.scanStatistics;
+    const heightStyle = computed(() => { return { height: appState!.bodyHeight.value + 'px' } });
+
+    const listtime = computed(() => unixTimeToString(info.listModificationTime));
+    const roottime = computed(() => unixTimeToString(info.rootModificationTime));
+    const success = ref(false);
+    const text = ref('');
+    let timer = -1;
+
+    instanceService.getInformation()
+        .then((info) => { });
+
+    function unixTimeToString(unixtime: number, withSeconds?: boolean) {
+        const dt = Helper.fromUnixTime(unixtime);
+        return Helper.formatDate(dt) + ' ' + Helper.formatTime(dt, withSeconds);
+    }
+    function getStatistics() {
+        timer = -1;
+        instanceService.getScanState()
+            .then((stat) => timer = window.setTimeout(getStatistics, 500));
+    }
+    async function onCreate() {
+        success.value = false;
+        text.value = '';
+        const resp = await instanceService.createInstance('Default', false, true, true);
+        success.value = resp.success;
+        text.value = resp.text;
+        if (resp.success) {
+            timer = window.setTimeout(getStatistics, 500);
+        }
+    }
+    async function onCancel() {
+        if (timer >= 0) {
+            window.clearTimeout(timer); timer = -1;
+        }
+        success.value = false;
+        text.value = '';
+        const resp = await instanceService.cancelScan();
+        success.value = resp.success;
+        text.value = resp.text;
+    }
+    async function onClear() {
+        if (timer >= 0) {
+            window.clearTimeout(timer); timer = -1;
+        }
+        success.value = false;
+        text.value = '';
+        const resp = await instanceService.clearInstance();
+        success.value = resp.success;
+        text.value = resp.text;
+    }
+    async function onMakeCurrent() {
+        if (timer >= 0) {
+            window.clearTimeout(timer); timer = -1;
+        }
+        success.value = false;
+        text.value = '';
+        const resp = await instanceService.makeCurrent();
+        success.value = resp.success;
+        text.value = resp.text;
+        if (resp.success) {
+            await instanceService.getInformation();
+        }
+    }
+</script>
+
+<template>
+    <v-container fluid class="app-container app-scroll bg-light text-on-light" :style="heightStyle">
+        <h2>Media Instance Administration</h2>
+        <v-row dense class="font-weight-bold">
+            <v-col cols="4">Name</v-col>
+            <v-col cols="8">{{info.instanceName}}</v-col>
+        </v-row>
+        <v-row dense class="font-weight-bold">
+            <v-col cols="4">IP Address</v-col>
+            <v-col cols="8">{{info.ipAddress}}</v-col>
+        </v-row>
+        <v-row dense class="font-weight-bold">
+            <v-col cols="4">Number of list items</v-col>
+            <v-col cols="8">{{info.listItemCount}}</v-col>
+        </v-row>
+        <v-row dense class="font-weight-bold">
+            <v-col cols="4">List item date</v-col>
+            <v-col cols="8">{{listtime}}</v-col>
+        </v-row>
+        <v-row dense class="font-weight-bold">
+            <v-col cols="4">Root date</v-col>
+            <v-col cols="8">{{roottime}}</v-col>
+        </v-row>
+        <h4>Roots</h4>
+        <v-row dense class="font-weight-bold">
+            <v-col cols="1">Name</v-col>
+            <v-col cols="1">Id</v-col>
+            <v-col cols="1">Folders</v-col>
+            <v-col cols="1">V-Folders</v-col>
+            <v-col cols="2">Files</v-col>
+            <v-col cols="2">Modified at</v-col>
+            <v-col cols="4">Item types</v-col>
+        </v-row>
+        <root-information-line v-for="root in info.rootInformations" :key="root.id" :info="root"></root-information-line>
+
+        <v-row dense class="font-weight-bold">
+            <v-col cols="3">
+                <v-btn @click="onCreate">CREATE</v-btn>
+            </v-col>
+            <v-col cols="3">
+                <v-btn @click="onCancel">CANCEL</v-btn>
+            </v-col>
+            <v-col cols="3">
+                <v-btn @click="onClear">CLEAR</v-btn>
+            </v-col>
+            <v-col cols="3">
+                <v-btn @click="onMakeCurrent">MAKE CURRENT</v-btn>
+            </v-col>
+        </v-row>
+        <v-row dense class="font-weight-bold">
+            <v-col cols="2" v-show="stat.isScanning">SCANNING</v-col>
+            <v-col cols="2" v-show="stat.isCanceled">CANCELED</v-col>
+            <v-col cols="4">{{stat.listItemCount + ' list items'}}</v-col>
+            <v-col cols="1" v-show="success">OK</v-col>
+            <v-col cols="1" v-show="!success">NOT OK</v-col>
+            <v-col cols="3">{{text}}</v-col>
+        </v-row>
+        <h4>Statistics</h4>
+        <v-row dense class="font-weight-bold">
+            <v-col cols="1">Name</v-col>
+            <v-col cols="5">Directory</v-col>
+            <v-col cols="1"># Dirs</v-col>
+            <v-col cols="1">Folders</v-col>
+            <v-col cols="1">V-Folders</v-col>
+            <v-col cols="1">Files</v-col>
+            <v-col cols="1">Medias</v-col>
+            <v-col cols="1">Errors</v-col>
+        </v-row>
+        <root-statistics-line v-for="root in stat.rootStatistics" :key="root.rootName" :stat="root"></root-statistics-line>
+    </v-container>
+</template>

package/src/views/MusicPage.vue

@@ -0,0 +1,234 @@
+<script setup lang="ts">
+    import { inject, ref, reactive, computed, onMounted, onUnmounted, nextTick, watch } from 'vue';
+    import { IAppState } from '@christianriedl/utils';
+    import { EItemType, EMediaType, IMediaFolder, IMediaItem, IAudioFile, MediaService } from '@christianriedl/media';
+
+    const appState = inject<IAppState>('appstate')!;
+    const getMediaService = inject<() => MediaService>('get-media')!;
+    const mediaService = getMediaService();
+    const heightStyle = computed(() => { return { height: appState.bodyHeight.value + 'px', overflowY: 'auto' } });
+    const isMobile = appState.isMobile;
+
+    const items: IMediaItem[] = reactive([]);
+    const selected = ref<IMediaItem>({ Name: 'Root', ItemType: EItemType.Root } as IMediaFolder);
+    const playingTrackUrl = ref("");
+    const playingTrack = ref<IAudioFile | null>(null);
+    const playItems: IAudioFile[] = [];
+    const itemIndex = ref(0);
+    const position = ref(0);
+    const positionLength = ref(0);
+    const listHeight = ref(0);
+    const playIndex = ref(-1);
+
+    const backVisible = computed(() => selected.value.ItemType != EItemType.AudioRoot);
+    const downloadAlbumVisible = computed(() => selected.value.ItemType == EItemType.AudioAlbum && !playingTrackUrl.value && !isMobile);
+    const downloadVisible = computed(() => playingTrackUrl.value && !isMobile);
+    const audio = ref<HTMLAudioElement | null>(null);
+    const paused = ref(false);
+    const listhead = ref<any>(null);
+    const positionText = computed(() => {
+        if (playingTrack.value) {
+            if (playingTrack.value.Duration > 0)
+                return to_time(position.value) + '/' + to_time(playingTrack.value.Duration);
+            else
+                return to_time(position.value);
+        }
+        return '';
+    });
+    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('Music created');
+        const rc = await mediaService.getLists(EMediaType.Audio);
+        let root;
+        if (selected.value.ItemType == EItemType.AudioAlbum)
+            root = mediaService.folders[selected.value.DLNAParentID];
+        else
+            root = await mediaService.initializeAudios();
+        mediaService.log.trace('Music start with ' + root.DLNAID);
+        selected.value = root;
+        items.splice(0, items.length, ...root.Folders);
+        computeListHeight();
+    })
+    watch(appState.bodyHeight, () => computeListHeight());
+    function computeListHeight() {
+        nextTick(() => {
+            let height = appState.bodyHeight.value;
+            if (listhead.value && listhead.value._.vnode && listhead.value._.vnode.el) {
+                height = height - listhead.value._.vnode.el.clientHeight;
+            }
+            listHeight.value = height;
+        })
+    }
+    function listItem(item: IMediaItem) {
+        if (item.ItemType == EItemType.AudioTrack) {
+            //playItems = [];
+            playItems.splice(0, 0, ...items as IAudioFile[]);
+            play(items.indexOf(item));
+            computeListHeight();
+        }
+        else {
+            const folder = item as IMediaFolder;
+            if (folder.Folders && item.ItemType != EItemType.AudioAlbum) {
+                items.splice(0, items.length, ...folder.Folders);
+                selected.value = item;
+                window.history.pushState({ noBackExitsApp: true }, '')
+                computeListHeight();
+            }
+            else {
+                mediaService.getAudios(folder)
+                    .then((audios) => {
+                        window.history.pushState({ noBackExitsApp: true }, '')
+                        selected.value = audios;
+                        items.splice(0, items.length, ...audios.Files);
+                        computeListHeight();
+                    });
+            }
+        }
+    }
+    function listBack() {
+        const parent = mediaService.folders[selected.value.DLNAParentID];
+        selected.value = parent;
+        items.splice(0, items.length, ...parent.Folders);
+        computeListHeight();
+    }
+    function onTimeUpdate() {
+        position.value = audio.value!.currentTime;
+        if (playingTrack.value && playingTrack.value.Duration > 0)
+            positionLength.value = position.value * 100 / playingTrack.value.Duration;
+        else
+            positionLength.value = 0;
+    }
+    function onEnded() {
+        mediaService.log.trace(`onEnded ${playIndex} ended`);
+        if (playIndex.value < playItems.length - 1)
+            play(playIndex.value + 1);
+    }
+    function play(index: number) {
+        if (items.length == playItems.length && items[0].DLNAParentID == playItems[0].DLNAParentID)
+            itemIndex.value = index;
+        playIndex.value = index;
+        const item = playItems[playIndex.value];
+        paused.value = false;
+        playingTrack.value = item;
+        playingTrackUrl.value = mediaService.getAudioUrl(item);
+        audio.value!.src = playingTrackUrl.value;
+        audio.value!.load();
+        audio.value!.play()
+            .then(() => { mediaService.log.trace(`play ${index}ended`) });
+    }
+    function playpause() {
+        if (audio.value!.paused) {
+            paused.value = false;
+            audio.value!.play()
+                .then(() => { console.log("play ended") });
+        }
+        else {
+            paused.value = true;
+            audio.value!.pause();
+        }
+    }
+    function previous() {
+        if (playIndex.value > 0)
+            play(playIndex.value - 1);
+    }
+    function next() {
+        if (playIndex.value < playItems.length - 1)
+            play(playIndex.value + 1);
+    }
+    function download() {
+        window.open(playingTrackUrl.value);
+    }
+    function downloadAlbum() {
+        const downloadUrl = mediaService.getAlbumDownloadUrl(selected.value.Url);
+        window.open(downloadUrl);
+    }
+    function to_time(s: number): string {
+        var r = "";
+        s = Math.floor(s);
+        if (s >= 3600) {
+            r += Math.floor(s / 3600).toString() + ":"; s = s % 3600;
+        }
+        if (!r || s >= 600) {
+            r += Math.floor(s / 60).toString() + ":"; s = s % 60;
+        }
+        else {
+            r += "0"; r += Math.floor(s / 60).toString() + ":"; s = s % 60;
+        }
+        if (s >= 10) {
+            r += s.toString(); s = -1;
+        }
+        else if (s >= 0) {
+            r += "0"; r += s.toString();
+            s = -1;
+        }
+        return r;
+    }
+</script>
+
+<template>
+    <v-card ref="listhead" class="bg-media">
+        <audio ref="audio" preload="none" @ended="onEnded" @timeupdate="onTimeUpdate">
+        </audio>
+        <v-list-item three-line>
+            <v-list-item-avatar tile rounded="0" size="x-large" v-if="selected.ThumbnailUrl">
+                <img width="40" :src="selected.ThumbnailUrl">
+            </v-list-item-avatar>
+            <v-list-item-content>
+                <v-list-item-title>{{selected.title}}</v-list-item-title>
+                <v-list-item-subtitle>{{selected.subTitle}}</v-list-item-subtitle>
+                <v-list-item-subtitle v-if="playingTrack">{{playingTrack.Name}}</v-list-item-subtitle>
+            </v-list-item-content>
+        </v-list-item>
+        <v-card-actions>
+            <v-btn v-if="backVisible" @click="listBack">
+                <v-icon>{{$vuetify.icons.values.back}}</v-icon>
+            </v-btn>
+            <v-btn v-if="downloadAlbumVisible" @click="downloadAlbum">
+                Album
+                <v-icon>{{$vuetify.icons.values.download}}</v-icon>
+            </v-btn>
+            <v-btn small v-if="playingTrackUrl" @click="playpause">
+                <v-icon>{{paused ? $vuetify.icons.values.play : $vuetify.icons.values.pause }}</v-icon>
+            </v-btn>
+            <v-btn small v-if="playingTrackUrl" @click="previous">
+                <v-icon>{{$vuetify.icons.values.prev}}</v-icon>
+            </v-btn>
+            <v-btn small v-if="playingTrackUrl" @click="next">
+                <v-icon>{{$vuetify.icons.values.next}}</v-icon>
+            </v-btn>
+            <v-btn small v-if="downloadVisible" @click="download">
+                <v-icon>{{$vuetify.icons.values.download}}</v-icon>
+            </v-btn>
+        </v-card-actions>
+        <v-progress-linear v-if="playingTrackUrl" v-model="positionLength" color="blue" height="25"><strong>{{positionText}}</strong></v-progress-linear>
+    </v-card>
+    <v-card :height="listHeight" class="overflow-y-auto bg-media">
+        <v-list two-line class="bg-media">
+            <v-list-item-group v-model="itemIndex"  >
+                <v-list-item v-for="(item,index) in items" :key="item.DLNAID" :title="item.title" :subtitle="item.subTitle" 
+                                active-color="blue" :active="index == playIndex" @click="listItem(item)">
+                    <!--
+                    <v-list-item-content>
+                        <v-list-item-title v-html="item.title"></v-list-item-title>
+                        <v-list-item-subtitle v-html="item.subTitle"></v-list-item-subtitle>
+                    </v-list-item-content>
+                    -->
+                    <v-list-item-avatar right rounded="0" v-if="item.ThumbnailUrl">
+                        <v-img width="64" :src="item.ThumbnailUrl"></v-img>
+                    </v-list-item-avatar>
+                </v-list-item>
+            </v-list-item-group>
+        </v-list>
+    </v-card>
+</template>

package/src/views/PhotoAlbumPage.vue

@@ -0,0 +1,255 @@
+<script setup lang="ts">
+    import { inject, ref, reactive, computed, onMounted, onBeforeMount, onUnmounted, nextTick, watch } from 'vue';
+    import { useRouter, useRoute } from 'vue-router';
+    import { IAppState, Dictionary, Helper } from '@christianriedl/utils';
+    import { EMediaType, IPictureFile, MediaService } from '@christianriedl/media';
+
+    const router = useRouter();
+    const route = useRoute();
+    const appState = inject<IAppState>('appstate')!;
+    const getMediaService = inject<() => MediaService>('get-media')!;
+    const mediaService = getMediaService();
+    const heightStyle = computed(() => { return { height: appState.bodyHeight.value + 'px', overflowY: 'hidden' } });
+    const isMobile = appState.isMobile;
+    const url = ref('');
+    const dialog = ref(false);
+    const folderId = decodeURIComponent(route.query!.id!.toString());
+    const index = ref(0);
+    const items = reactive<IPictureFile[]>([]);
+    const width = ref(0);
+    const height = ref(0);
+    const landscape = ref(true);
+    const metadata = reactive<Dictionary<any>>({});
+    const cycle = ref(false);
+    const interval = ref(8000);
+
+    watch([appState.bodyHeight, appState.pageWidth], () => {
+        width.value = appState.pageWidth.value;
+        height.value = appState.bodyHeight.value;
+        landscape.value = width.value > height.value;
+    }, { immediate: true });
+
+    async function start(): Promise<boolean> {
+        window.document.addEventListener('keydown', onKey);
+        let folder = mediaService.folders[folderId];
+        if(!folder) {
+            const split = folderId.split(/[.|]/);
+            await mediaService.initializePhotos(split[1], split[2]);
+            folder = mediaService.folders[folderId];
+            if (folder) {
+                if (!mediaService.medialists["Picture.Event"])
+                    await mediaService.getLists(EMediaType.Picture);
+            }
+            else
+                return false;
+        }
+        const photos = await mediaService.getPhotos(folder);
+        if(photos.Files.length > 0) {
+            items.splice(0, items.length, ...photos.Files as IPictureFile[]);
+            if (route.query.start) {
+                const start = route.query.start.toString();
+                const idx = items.findIndex((item) => item.DLNAID == start);
+                if (idx >= 0) {
+                    index.value = idx;
+                }
+            }
+            url.value = photos.Url;
+            buildUrls();
+            //onInput(0);                               required für v-carousel ?
+        }
+        else {
+            nextTick(() => router.back());
+        }
+        return true;
+    }
+    onMounted(async () => {
+        await start();
+    });
+    onUnmounted(() => {
+        window.document.removeEventListener('keydown', onKey);
+    });
+
+    function  buildUrls() {
+        for (var i = 0; i < items.length; i++) {
+            const item = items[i];
+            if (item.realUrl && item.realUrl.startsWith('blob'))
+                window.URL.revokeObjectURL(item.realUrl);
+            item.realUrl = getUrl(item);
+        }
+    }
+    function getUrl(item: IPictureFile) {
+        if (landscape.value)
+            return mediaService.getPhotoUrl(url.value, item.Url, `${0}x${height.value}x${item.Orientation}`);
+        else
+            return mediaService.getPhotoUrl(url.value, item.Url, `${width.value}x${0}x${item.Orientation}`);
+    }
+    function onInput(idx: number) {
+        idx++;
+        if (idx < items.length) {
+            const item = items[idx];
+            mediaService.getImage(item.realUrl!)
+                .then(blob => {
+                    item.realUrl = window.URL.createObjectURL(blob);
+                });
+        }
+    }
+    function onClick(ev: Event) {
+        dialog.value = true;
+    }
+    async function onKey(ev: KeyboardEvent) {
+        switch (ev.code) {
+            case "Escape":
+                router.back();
+                break;
+            case "ArrowLeft":
+                if (index.value > 0)
+                    index.value--;
+                break;
+            case "ArrowRight":
+                if (index.value < items.length - 1)
+                    index.value++;
+                break;
+            case "KeyI":
+                const item = items[index.value];
+                const exif = await mediaService.getExifInfo(item.DLNAParentID, item.DLNAID);
+                setMetaData(exif, item);
+                dialog.value = true;
+                break;
+            case "KeyP":
+                cycle.value = true;
+                break;
+            case "Digit0":
+                cycle.value = false;
+                break;
+            case "Digit1":
+                cycle.value = true; interval.value = 1000;
+                break;
+            case "Digit2":
+                cycle.value = true; interval.value = 2000;
+                break;
+            case "Digit3":
+                cycle.value = true; interval.value = 3000;
+                break;
+            case "Digit4":
+                cycle.value = true; interval.value = 4000;
+                break;
+            case "Digit5":
+                cycle.value = true; interval.value = 5000;
+                break;
+            case "Digit6":
+                cycle.value = true; interval.value = 6000;
+                break;
+            case "Digit7":
+                cycle.value = true; interval.value = 7000;
+                break;
+            case "Digit8":
+                cycle.value = true; interval.value = 8000;
+                break;
+            case "Digit9":
+                cycle.value = true; interval.value = 9000;
+                break;
+        }
+    }
+    function itemWidth(item: IPictureFile): number {
+        const fac = item.Height / height.value;
+        return Math.floor(item.Width * fac);
+    }
+    function aspectRatio(item: IPictureFile): string {
+        return `${item.Width}/${item.Height}`;
+    }
+    function setMetaData(exif: Dictionary<any>, file: IPictureFile) {
+        metadata['Name'] = file.Name;
+        if (exif) {
+            if (exif.Model)
+                metadata['Kamera'] = exif.Model;
+            else
+                delete metadata['Kamera'];
+            if (exif.LensModel)
+                metadata['Objectiv'] = exif.LensModel;
+            else
+                delete metadata['Objectiv'];
+            if (exif.Artist)
+                metadata['Von'] = exif.Artist as string;
+            else
+                delete metadata['Von'];
+            if (exif.ExposureTime)
+                metadata['Belichtung'] = '1/' + Helper.round(1.0 / exif.ExposureTime, 0);
+            else
+                delete metadata['Belichtung'];
+            if (exif.FNumber)
+                metadata['Blende'] = exif.FNumber.toString();
+            else
+                delete metadata['Blende'];
+            if (exif.DateTimeOriginal)
+                metadata['Zeit'] = exif.DateTimeOriginal;
+            else
+                metadata['Zeit'] = file.Date.toLocaleString();
+        }
+        else {
+            delete metadata['Kamera'];
+            delete metadata['Objectiv'];
+            delete metadata['Von'];
+            delete metadata['Belichtung'];
+            delete metadata['Blende'];
+            metadata['Zeit'] = file.Date.toLocaleString();
+        }
+
+        metadata['Dimension'] = `${file.Width}x${file.Height} o:${file.Orientation}`
+        metadata['Mb'] = (file.Size / 1000000).toString() + " Mb";
+        if (file.EventIdx >= 0)
+            metadata['Ereignis'] = mediaService.getListEntry("Picture.Event", file.EventIdx);
+        else
+            delete metadata['Ereignis'];
+        if (file.LocationIdx >= 0)
+            metadata['Ort'] = mediaService.getListEntry("Picture.Location", file.LocationIdx);
+        else
+            delete metadata['Ort'];
+        if (file.PersonIdxs && file.PersonIdxs.length > 0) {
+            let persons = "";
+            for (let i = 0; i < file.PersonIdxs.length; i++) {
+                persons = persons + mediaService.getListEntry("Picture.Person", file.PersonIdxs[i]) + " ";
+            }
+            metadata['Personen'] = persons;
+        }
+        else
+            delete metadata['Personen'];
+    }
+</script>
+
+<template>
+    <v-container fluid :style="heightStyle">
+        <v-carousel hide-delimiters :show-arrows="false" v-model="index"
+                    :width="width" :height="height" :cycle="cycle" :interval="interval"
+                    @change="onInput">
+            <v-carousel-item v-for="item in items" :key="item.DLNAID">
+                <img :src="item.realUrl" />
+            </v-carousel-item>
+        </v-carousel>
+        <v-dialog v-model="dialog" :fullscreen="isMobile">
+            <v-card v-if="dialog" width="400">
+                <v-card-title class="headline">Metadata</v-card-title>
+                <v-card-text>
+                    <v-container>
+                        <v-row v-for="(value, key) in metadata" :key="key">
+                            <v-col cols="4" class="font-weight-bold">{{key}}</v-col>
+                            <v-col cols="8">{{value}}</v-col>
+                        </v-row>
+                    </v-container>
+                </v-card-text>
+                <v-card-actions>
+                    <v-btn @click="dialog = false">
+                        <v-icon large>{{$vuetify.icons.values.stop}}</v-icon>Exit
+                    </v-btn>
+                </v-card-actions>
+            </v-card>
+        </v-dialog>
+    </v-container>
+</template>
+
+<style scoped>
+    img {
+        display: block;
+        margin-left: auto;
+        margin-right: auto;
+    }
+</style>