@christianriedl/media 1.0.1

package/src/views/PhotosPage.vue

@@ -0,0 +1,199 @@
+<script setup lang="ts">
+    import { inject, ref, reactive, computed, onMounted, onUnmounted, nextTick, watch } from 'vue';
+    import { VNestedSymbol, emptyNested } from 'vuetify';
+    import { useRouter } from 'vue-router';
+    import { IAppState } from '@christianriedl/utils';
+    import { EItemType, EMediaType, IMediaFolder, IMediaItem, IPhotoSelection, 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 router = useRouter();
+    const open = ref<string[]>([]);
+
+    const items: IMediaItem[] = reactive([]);
+    const selected = reactive<IPhotoSelection>(mediaService.photoSelection);
+    const listHeight = ref(0);
+    const listhead = ref<any>(null);
+
+    const roots: string[] = ['Jahr', 'Orte', 'Ereignisse', 'Personen'];
+    const criterias: string[] = ['ye', 'lo', 'ev', 'pe'];
+    const grouped = ref(false);
+    const backVisible = ref(false);
+    const itemIndex = ref(0);
+    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);
+        mediaService.log.trace('Photos start with ' + selected.selected.DLNAID);
+    })
+    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 stars() {
+        return selected.rating ? (selected.rating == 1 ? '*' : '**') : 'all';
+    }
+    function listItem(item: IMediaFolder) {
+        const folders = setSelected(item);
+        setGrouped(folders, true);
+        computeListHeight();
+    }
+    function listExpand(item: IMediaFolder) {
+        if (item.Year && item.Year > 0)
+            selectedYear.value = item.Year;
+    }
+    function onOpen(arg: unknown) {
+        console.log('onOpen');
+    }
+    function listSubItem(item: IMediaFolder) {
+        selected.selectedAlbum = item;
+        router.push({ path: 'photoalbum', query: { id: item.DLNAID } });
+    }
+    function listBack() {
+        const parent = mediaService.folders[selected.selected.DLNAParentID];
+        const index = parent.Folders.indexOf(selected.selected);
+        const folders = setSelected(parent);
+        if (index)
+            itemIndex.value = index;
+        setGrouped(folders, false);
+    }
+    function onLightbox(item: IMediaFolder) {
+        selected.selectedAlbum = item;
+        router.push({ path: 'photothumbnails', query: { id: item.DLNAID } });
+
+    }
+    async function onRootChange(root: string): Promise<boolean> {
+        const idx = roots.indexOf(selected.root);
+        selected.criteria = criterias[idx];
+        selectedName.value = undefined;
+        return await initialize();
+    }
+    async function onRating(value: number): Promise<boolean> {
+        selected.rating = value;
+        return await initialize();
+    }
+    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;
+        //items.splice(0, items.length, ...folder.Folders);
+        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;
+        const expanded = (expand && folders.length <= 6) ? true : false;
+        for (let i = 0; i < folders.length; i++) {
+            if (year && year == folders[i].Year) {
+                if (expand)
+                    open.value.push(year.toString());
+                else
+                    itemIndex.value = i;
+            }
+        }
+        items.splice(0, items.length, ...folders);
+    }
+    function itemText(item: IMediaFolder) : string {
+        return `${item.Name} (${item.ChildCount})`
+    }
+</script>
+<template>
+    <v-card ref="listhead" class="bg-media">
+        <v-card-title>{{selected.selected.Name}}</v-card-title>
+        <v-card-actions>
+            <v-btn v-if="backVisible" @click="listBack">
+                <v-icon large>{{$vuetify.icons.values.back}}</v-icon>Back
+            </v-btn>
+            <v-rating clearable length="2" v-model="selected.rating" @update:modelValue="onRating" />
+            <v-select v-model="selected.root" c
+                        :items="roots"
+                        persistent-hint
+                        @update:modelValue="onRootChange"
+                        dense solo hide-details single-line>
+            </v-select>
+        </v-card-actions>
+    </v-card>
+    <v-card :max-height="listHeight" class="overflow-y-auto">
+        <v-list v-if="!grouped" class="bg-media" >
+            <v-list-item-group v-model="itemIndex" color="primary">
+                <v-list-item v-for="item in items" :key="item.DLNAID" :title="itemText(item)" :value="itemText(item)" density="compact" @click.stop="listItem(item)">
+                    <template v-slot:append>
+                        <v-list-item-avatar right>
+                            <v-btn variant="text" color="grey" icon="mdi-grid" @click.stop.prevent="onLightbox(item)"></v-btn>
+                        </v-list-item-avatar>
+                    </template>
+                </v-list-item>
+            </v-list-item-group>
+        </v-list>
+        <v-list v-else class="bg-media" v-model:opened="open" ref="listRef" @click:open="onOpen">
+            <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="itemText(item)" :value="itemText(item)" density="compact"></v-list-item>
+                </template>
+                <v-list-item v-for="subItem in item.Folders" :key="subItem.DLNAID" :title="itemText(subItem)" :value="itemText(subItem)" density="compact" @click.stop="listSubItem(subItem)">
+                    <template v-slot:append>
+                        <v-list-item-avatar right>
+                            <v-btn variant="text" color="grey" icon="mdi-grid" @click.stop.prevent="onLightbox(subItem)"></v-btn>
+                        </v-list-item-avatar>
+                    </template>
+                </v-list-item>
+            </v-list-group>
+        </v-list>
+    </v-card>
+</template>
+

package/src/views/RecordedVideosPage.vue

@@ -0,0 +1,98 @@
+<script setup lang="ts">
+    import { inject, ref, reactive, computed, onMounted, onUnmounted, nextTick, watch } from 'vue';
+    import { useRouter } from 'vue-router';
+    import { IAppState } from '@christianriedl/utils';
+    import { EItemType, IMediaFolder, IMediaItem, 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 router = useRouter();
+
+    const items: IMediaItem[] = reactive([]);
+    const selected = ref<IMediaItem>({ Name: 'Root', ItemType: EItemType.Root } as IMediaFolder);
+    const listHeight = ref(0);
+    const listhead = ref<any>(null);
+
+    const backVisible = computed(() => selected.value.ItemType != EItemType.VideoRoot);
+    const playVisible = computed(() => selected.value.ItemType == EItemType.VideoItem || selected.value.ItemType == EItemType.VideoBroadcast);
+
+    onMounted(async () => {
+        mediaService.log.info('RecordedTVs created');
+        const root = await mediaService.initializeRecordedTVs();
+        selected.value = root;
+        items.splice(0, items.length, ...root.Files);
+        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 play() {
+        router.push({ path: 'video', query: { url: selected.value.Url } });
+    }
+    function listItem(item: IMediaItem) {
+        if (item.ItemType == EItemType.VideoItem || item.ItemType == EItemType.VideoBroadcast) {
+            selected.value = item;
+            computeListHeight();
+            return;
+        }
+    }
+    function listBack() {
+        router.back();
+    }
+</script>
+
+<template>
+    <v-container>
+        <v-col>
+            <v-card ref="listhead" class="bg-media">
+                <v-list-item v-if="selected" three-line>
+                    <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>{{selected.info}}</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="playVisible" @click.stop="play">
+                        <v-icon>{{$vuetify.icons.values.play }}</v-icon>
+                    </v-btn>
+                </v-card-actions>
+            </v-card>
+            <v-card :max-height="listHeight" class="overflow-y-auto bg-media">
+                <v-list two-line class="bg-media">
+                    <v-list-item-group v-model="itemIndex" color="primary">
+                        <v-list-item v-for="item in items" :key="item.DLNAID" :title="item.title" :subtitle="item.subTitle"  @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>
+                            -->
+                            <template v-slot:append>
+                                <v-list-item-avatar right>
+                                    <v-btn variant="text" color="grey lighten-1" icon="mdi-information"></v-btn>
+                                </v-list-item-avatar>
+                            </template>
+                        </v-list-item>
+                    </v-list-item-group>
+                </v-list>
+            </v-card>
+        </v-col>
+    </v-container>
+</template>
+

package/src/views/ThumbnailsPage.vue

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+    import { inject, ref, computed, onMounted } from 'vue';
+    import { useRouter, useRoute } from 'vue-router';
+    import { IAppState } from '@christianriedl/utils';
+    import { EOrientation, EMediaType, IMediaFolder, IPictureFile, 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 router = useRouter();
+    const route = useRoute();
+    const folderId = decodeURIComponent(route.query!.id!.toString());
+    const photos = ref<IPictureFile[]>([]);
+    const minImageWidth = 100;
+    const numImagesPerRow = Math.min(window.innerWidth / minImageWidth, 12);
+    const numColsPerImage = ref(Math.floor(12 / numImagesPerRow));
+    const width = ref(Math.floor(numColsPerImage.value * window.innerWidth / 12));
+    const height = ref(Math.floor(width.value / 3 * 2));
+    let folder: IMediaFolder;
+    //const matrix = ref<IPictureFile[][]>([]);
+    //let numRows = 0;
+
+    onMounted(async () => {
+        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;
+        }
+        folder = await mediaService.getPhotos(folder);
+        photos.value.splice(0, photos.value.length, ...folder.Files as IPictureFile[]);
+
+        /*
+        numRows = Math.floor((photos.length + 11) / 12);
+        let count = 0;
+        for (let i = 0; i < numRows; i++) {
+            matrix.value.push([]);
+            for (let j = 0; j < 12; j++) {
+                if (count >= photos.length)
+                    break;
+                matrix.value[i].push(photos[count++] as IPictureFile);
+            }
+        }
+        */
+        console.log(photos.value.length);
+    })
+    function onClick(item: IPictureFile) {
+        router.push({ path: 'photoalbum', query: { id: folder.DLNAID, start: item.DLNAID } });
+    }
+
+    function getThumbnailUrl(image: IPictureFile) : string {
+        let url = `https://www.christian-riedl.com/media/apiimage/Thumbnail?image=${folder.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);
+    }
+</script>
+
+<template>
+    <v-container fluid :style="heightStyle">
+        <!--
+        <v-row dense align="center" v-for="(row,irow) in matrix" :key="irow" >
+            <v-col cols="1" align="center" v-for="(image, icol) in row" :key="irow * 12 + icol">
+                <img :src="getThumbnailUrl(image)"  :height="height"/>
+            </v-col>
+        </v-row>
+        -->
+        <v-row dense align="center" >
+            <v-col :cols="numColsPerImage" align="center" v-for="(image, index) in photos" :key="index">
+                <img :src="getThumbnailUrl(image)"  :height="height" @click="onClick(image)"/>
+            </v-col>
+        </v-row>
+    </v-container>
+</template>

package/src/views/VideoPage.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+    import { inject, ref, onMounted, onUnmounted } from 'vue';
+    import { useRoute, useRouter } from 'vue-router';
+    import { MediaService } from '@christianriedl/media';
+
+    const getMediaService = inject<() => MediaService>('get-media')!;
+    const mediaService = getMediaService();
+    const route = useRoute();
+    const router = useRouter();
+
+    const url = ref('');
+    const height = ref(0);
+    const width = ref(0);
+    let  landscape = true;
+
+    mediaService.log.info('Video created');
+
+    onMounted(() => {
+        window.document.addEventListener('keydown', onKey);
+        url.value = route.query.url!.toString();
+        onResize();
+    });
+    onUnmounted(() => {
+        window.document.removeEventListener('keydown', onKey);
+    });
+
+    function onResize() {
+        height.value = window.innerHeight;
+        width.value = window.innerWidth;
+        landscape = width.value > height.value;
+    }
+    function onKey(ev: KeyboardEvent) {
+        switch (ev.code) {
+            case "Escape":
+                router.back();
+                break;
+        }
+    }
+</script>
+
+<template>
+    <div v-resize="onResize">
+        <video controls autoplay :src="url" :width="width" :height="height">
+        </video>
+    </div>
+</template>

package/src/views/VideosPage.vue

@@ -0,0 +1,230 @@
+<script setup lang="ts">
+    import { inject, ref, reactive, computed, onMounted, onUnmounted, nextTick, watch } from 'vue';
+    import { useRouter } from 'vue-router';
+    import { IAppState } from '@christianriedl/utils';
+    import { EItemType, EMediaType, IMediaFolder, IMediaItem, IVideoFile, MediaService, PlayerService } from '@christianriedl/media';
+    import { ISensorsState } from '@christianriedl/smarthome';
+
+    const appState = inject<IAppState>('appstate')!;
+    const sensors = inject<ISensorsState>('smarthome')!;
+    const getMediaService = inject<() => MediaService>('get-media')!;
+    const mediaService = getMediaService();
+    const getPlayerService = inject<() => PlayerService>('get-player')!;
+    const playerService = getPlayerService();
+    const rendererName = "[TV] Samsung Q9 Series (75)";
+    const showRenderer = ref(false);
+
+    const heightStyle = computed(() => { return { height: appState.bodyHeight.value + 'px', overflowY: 'auto' } });
+    const isMobile = appState.isMobile;
+    const router = useRouter();
+
+    const items: IMediaItem[] = reactive([]);
+    const selected = ref<IMediaItem>({ Name: 'Root', ItemType: EItemType.Root } as IMediaFolder);
+    const listHeight = ref(0);
+    const listhead = ref<any>(null);
+    const dialog = ref(false);
+    const showItem = ref<IVideoFile|null>(null);
+
+    const backVisible = computed (() => selected.value.ItemType != EItemType.VideoRoot);
+    const recordedVisible = computed(() => selected.value.ItemType == EItemType.VideoRoot);
+    const playVisible = computed(() => selected.value.ItemType == EItemType.VideoItem);
+    const dialogWidth = computed(() => isMobile ? appState.pageWidth : 600);
+
+    getPlayer();
+
+    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('Videos created');
+        const rc = await mediaService.getLists(EMediaType.Video);
+        let root;
+        if (selected.value.ItemType == EItemType.VideoCategory)
+            root = mediaService.folders[selected.value.DLNAParentID];
+        else
+            root = await mediaService.initializeVideos();
+        mediaService.log.trace('Videos 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 play() {
+        router.push({ path: 'video', query: { url: selected.value.Url } });
+    }
+    async function playTV() {
+        const request = {
+            playerName: rendererName,
+            folderId: selected.value.DLNAParentID,
+            mediaId: selected.value.DLNAID,
+            trackNo: 0,
+            withStreamTitle: false
+        };
+        const rc = await playerService!.play(request);
+    }
+    function recorded() {
+        router.push({ path: 'recordedvideos' });
+    }
+    function listItem(item: IMediaItem) {
+        if (item.ItemType == EItemType.VideoItem) {
+            selected.value = item;
+            getPlayer();
+            computeListHeight();
+            return;
+        }
+        const folder = item as IMediaFolder;
+        if (item.ItemType == EItemType.VideoCategory) {
+            mediaService.getVideos(folder)
+                .then((videos) => {
+                    selected.value = videos;
+                    items.splice(0, items.length, ...videos.Files);
+                    window.history.pushState({ noBackExitsApp: true }, '')
+                    computeListHeight();
+                });
+        }
+    }
+    function listBack() {
+        const parent = mediaService.folders[selected.value.DLNAParentID];
+        selected.value = parent;
+        items.splice(0, items.length, ...parent.Folders);
+        computeListHeight();
+    }
+    async function onInfo(item: IVideoFile) {
+        showItem.value = item;
+        dialog.value = true;
+    }
+    function getActors(item: IVideoFile) : string {
+        if (item.ActorIdxs && item.ActorIdxs.length > 0) {
+            let persons = "";
+            for (let i = 0; i < item.ActorIdxs.length; i++) {
+                if (persons.length > 0)
+                    persons = persons + ', ';
+                persons = persons + mediaService.getListEntry("Video.Actors", item.ActorIdxs[i]);
+            }
+            return persons;
+        }
+        return "";
+    }
+    function getCreator(item: IVideoFile): string {
+        if (item.CreatorIdx >= 0) {
+            return mediaService.getListEntry("Video.Director", item.CreatorIdx);
+        }
+        return "";
+    }
+    function getGenre(item: IVideoFile): string {
+        if (item.GenreIdx >= 0) {
+            return mediaService.getListEntry("Video.Genre", item.GenreIdx);
+        }
+        return "";
+    }
+    function getCountry(item: IVideoFile): string {
+        if (item.CountryIdx >= 0) {
+            return mediaService.getListEntry("Video.Countries", item.CountryIdx);
+        }
+        return "";
+    }
+    function getPlayer() {
+        const samsungTV = sensors.sensors['HomeNetwork.SamsungTV'];
+        if (samsungTV && samsungTV.values["Online"].value) {
+            if (!showRenderer.value) {
+                playerService.getPlayerState(rendererName)
+                    .then((playerState) => {
+                        if (playerState)
+                            showRenderer.value = true;
+                    });
+            }
+        }
+        else {
+            showRenderer.value = false;
+        }
+    }
+</script>
+
+<template>
+    <v-card ref="listhead" class="bg-media">
+        <v-list-item v-if="selected" three-line>
+            <v-list-item-avatar tile rounded="0" size="x-large" v-if="selected.ThumbnailUrl">
+                <img width="32" height="48" :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>{{selected.info}}</v-list-item-subtitle>
+            </v-list-item-content>
+        </v-list-item>
+        <v-card-actions>
+            <v-btn v-if="backVisible" @click="listBack">
+                <v-icon size="x-large">{{$vuetify.icons.values.back}}</v-icon>
+            </v-btn>
+            <v-btn v-if="playVisible" @click.stop="play">
+                <v-icon size="x-large">{{$vuetify.icons.values.play }}</v-icon>
+            </v-btn>
+            <v-btn v-if="showRenderer && playVisible" @click.stop="playTV">
+                <v-icon size="x-large">{{$vuetify.icons.values.tv }}</v-icon>
+            </v-btn>
+            <v-btn v-if="recordedVisible" @click.stop="recorded">
+                <v-icon size="x-large">{{$vuetify.icons.values.recorded }}</v-icon>
+            </v-btn>
+        </v-card-actions>
+    </v-card>
+    <v-card :max-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 in items" :key="item.DLNAID" :title="item.title" :subtitle="item.subTitle" @click="listItem(item)">
+                    <template v-slot:append>
+                        <v-list-item-avatar left rounded="0" v-if="item.ThumbnailUrl">
+                            <v-btn variant="text" size="large" color="grey" icon="mdi-information" @click.stop.prevent="onInfo(item)"></v-btn>
+                        </v-list-item-avatar>
+                    </template>
+                    <v-list-item-avatar right rounded="0" v-if="item.ThumbnailUrl">
+                        <v-img width="64" height="96" :src="item.ThumbnailUrl"></v-img>
+                    </v-list-item-avatar>
+                </v-list-item>
+            </v-list-item-group>
+        </v-list>
+    </v-card>
+    <v-dialog v-model="dialog" :fullscreen="isMobile">
+        <v-card :width="dialogWidth">
+            <v-card-title class="headline">{{showItem.Name}}</v-card-title>
+            <v-card-subtitle>{{showItem.subTitle}}</v-card-subtitle>
+            <v-card-actions>
+                <p>{{showItem.info}}</p>
+                <v-spacer></v-spacer>
+                <v-btn @click="dialog = false">
+                    <v-icon large>{{$vuetify.icons.values.stop}}</v-icon>Exit
+                </v-btn>
+            </v-card-actions>
+            <v-card-text>
+                <v-container>
+                    <v-row>
+                        <p>{{showItem.Description}}</p>
+                    </v-row>
+                    <v-row>
+                        <h3 style="height:32px"></h3>
+                    </v-row>
+                    <v-row>
+                        <p>{{getActors(showItem)}}</p>
+                    </v-row>
+                </v-container>
+            </v-card-text>
+        </v-card>
+    </v-dialog>
+</template>