@christianriedl/media 1.0.75 → 1.0.77

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@christianriedl/media",
-  "version": "1.0.75",
+  "version": "1.0.77",
   "description": "RIC media interfaces",
 
   "main": "dist/index.js",
@@ -18,8 +18,8 @@
   "author": "Christian Riedl",
   "license": "ISC",
   "dependencies": {
-    "@christianriedl/utils": "^1.0.83",
-    "@christianriedl/rest": "^1.0.48",
+    "@christianriedl/utils": "^1.0.84",
+    "@christianriedl/rest": "^1.0.49",
     "@christianriedl/epg": "^1.0.27"
   },
   "devDependencies": {

package/src/components/PhotoDownload.vue

@@ -6,7 +6,7 @@
     const props = defineProps<{ folder: IMediaFolder }>();
     const emits = defineEmits<{ (e: 'close'): void }>();
 
-    const title = `Download '${props.folder.Name}' (${props.folder.Files.length} Bilder)`
+    const title = `Download '${props.folder.Name}' (${props.folder.ChildCount} Bilder)`
     const getMedia = inject(getMediaSymbol)!;
     const mediaService = getMedia();
 

package/src/views/MediaInstancePage.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-    import { reactive, inject, ref, computed, onMounted, onUnmounted } from 'vue';
+    import { reactive, inject, ref, computed, onMounted, onUnmounted, StyleValue } from 'vue';
     import { useRouter } from 'vue-router';
     import { Helper, IValueText, IAppState, appStateSymbol } from '@christianriedl/utils';
     import { IMediaInstanceService, getMediaInstanceSymbol } from '@christianriedl/media';
@@ -11,7 +11,7 @@
     const instanceService = getMediaInstanceService();
     const info = instanceService.instanceInformation;
     const stat = instanceService.scanStatistics;
-    const heightStyle = computed(() => { return { height: appState!.bodyHeight.value + 'px' } });
+    const heightStyle = computed<StyleValue>(() => { return { height: appState!.bodyHeight.value + 'px' } });
 
     const listtime = computed(() => unixTimeToString(info.listModificationTime));
     const roottime = computed(() => unixTimeToString(info.rootModificationTime));

package/src/views/MusicPage.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-    import { inject, ref, reactive, computed, onMounted, onUnmounted, nextTick, watch } from 'vue';
+    import { inject, ref, reactive, computed, onMounted, onUnmounted, nextTick, watch, StyleValue } from 'vue';
     import { IAppState, Helper, EDevice, EScope, appStateSymbol } from '@christianriedl/utils';
     import { Authorize, authorizeSymbol } from '@christianriedl/rest';
     import { EItemType, EMediaType, IMediaFolder, IMediaItem, IAudioFile, MediaService, EPlayState, PlayerService, getMediaSymbol, getPlayerSymbol } from '@christianriedl/media';
@@ -11,7 +11,7 @@
     const mediaService = getMediaService();
     const getPlayerService = inject(getPlayerSymbol)!;
     const playerService = getPlayerService();
-    const heightStyle = computed(() => { return { height: appState.bodyHeight.value + 'px', overflowY: 'auto' } });
+    const heightStyle = computed<StyleValue>(() => { return { height: appState.bodyHeight.value + 'px', overflowY: 'auto' } });
     const isMobile = appState.isMobile && (appState.device != EDevice.iPad);
     const supportsLocalMedia = authorize.checkScope(EScope.Media);
 

package/src/views/PhotoAlbumPage.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-    import { inject, ref, reactive, computed, onMounted, onBeforeMount, onUnmounted, nextTick, watch } from 'vue';
+    import { inject, ref, reactive, computed, onMounted, onBeforeMount, onUnmounted, nextTick, watch, StyleValue } from 'vue';
     import type { ComponentPublicInstance } from 'vue';
     import { useRouter, useRoute } from 'vue-router';
     import { IAppState, IAppConfig, EDevice, EDirection, Dictionary, Helper, appStateSymbol, appConfigSymbol } from '@christianriedl/utils';
@@ -12,7 +12,7 @@
     const mediaAppConfig = appConfig as unknown as IMediaAppConfig;
     const getMediaService = inject(getMediaSymbol)!;
     const mediaService = getMediaService();
-    const heightStyle = computed(() => { return { height: appState.bodyHeight.value + 'px', overflowY: 'hidden' } });
+    const heightStyle = computed<StyleValue>(() => { return { height: appState.bodyHeight.value + 'px', overflowY: 'hidden' } });
     const isMobile = appState.isMobile;
     const url = ref('');
     const infoDialog = ref(false);

package/src/views/PhotosPage.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-    import { inject, ref, reactive, computed, onMounted, onUnmounted, nextTick, watch } from 'vue';
+    import { inject, ref, reactive, computed, onMounted, onUnmounted, nextTick, watch, StyleValue } from 'vue';
     import type { ComponentPublicInstance } from 'vue';
     import { useRouter } from 'vue-router';
     import { IAppState, IAppConfig, EDevice, EBrowser, appStateSymbol, appConfigSymbol, Helper } from '@christianriedl/utils';
@@ -12,7 +12,7 @@
     const mediaAppConfig = appConfig as unknown as IMediaAppConfig;
     const getMediaService = inject(getMediaSymbol)!;
     const mediaService = getMediaService();
-    const heightStyle = computed(() => { return { height: appState.bodyHeight.value + 'px', overflowY: 'auto' } });
+    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[]>([]);

package/src/views/RecordedVideosPage.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-    import { inject, ref, reactive, computed, onMounted, onUnmounted, nextTick, watch } from 'vue';
+    import { inject, ref, reactive, computed, onMounted, onUnmounted, nextTick, watch, StyleValue } from 'vue';
     import type { ComponentPublicInstance } from 'vue';
     import { useRouter } from 'vue-router';
     import { IAppState, EScope, appStateSymbol } from '@christianriedl/utils';
@@ -11,7 +11,7 @@
     const mediaService = getMediaService();
     const getDvbService = inject(getDvbServiceSymbol)!;
     const dvbService = getDvbService()!; 
-    const heightStyle = computed(() => { return { height: appState.bodyHeight.value + 'px', overflowY: 'auto' } });
+    const heightStyle = computed<StyleValue>(() => { return { height: appState.bodyHeight.value + 'px', overflowY: 'auto' } });
     const isMobile = appState.isMobile;
     const router = useRouter();
 
@@ -98,12 +98,12 @@
                                 <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 color="grey lighten-1" icon="$info"></v-btn>
+                                    <v-btn variant="tonal" color="grey" icon="$info"></v-btn>
                                 </v-list-item-avatar>
                             </template>
+                            -->
                         </v-list-item>
                     </v-list-item-group>
                 </v-list>

package/src/views/ThumbnailsPage.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-    import { inject, ref, computed, onMounted } from 'vue';
+    import { inject, ref, computed, onMounted, StyleValue } from 'vue';
     import { useRouter, useRoute } from 'vue-router';
     import { IAppState, appStateSymbol, IAppConfig, appConfigSymbol, Helper } from '@christianriedl/utils';
     import { EOrientation, EMediaType, IMediaFolder, IPictureFile, MediaService, IMediaAppConfig, getMediaSymbol } from '@christianriedl/media';
@@ -9,7 +9,7 @@
     const mediaAppConfig = appConfig as unknown as IMediaAppConfig;
     const getMediaService = inject(getMediaSymbol)!;
     const mediaService = getMediaService();
-    const heightStyle = computed(() => { return { height: appState.bodyHeight.value + 'px', overflowY: 'auto' } });
+    const heightStyle = computed<StyleValue>(() => { return { height: appState.bodyHeight.value + 'px', overflowY: 'auto' } });
     const isMobile = appState.isMobile;
     const router = useRouter();
     const route = useRoute();

package/src/views/VideosPage.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-    import { inject, ref, reactive, computed, onMounted, onUnmounted, nextTick, watch } from 'vue';
+    import { inject, ref, reactive, computed, onMounted, onUnmounted, nextTick, watch, StyleValue } from 'vue';
     import { useRouter } from 'vue-router';
     import { IAppState, EDevice, EScope, appStateSymbol } from '@christianriedl/utils';
     import { Authorize, authorizeSymbol } from '@christianriedl/rest';
@@ -18,7 +18,7 @@
     const showRenderer = ref(false);
     const supportsLocalMedia = authorize.checkScope(EScope.Media);
 
-    const heightStyle = computed(() => { return { height: appState.bodyHeight.value + 'px', overflowY: 'auto' } });
+    const heightStyle = computed<StyleValue>(() => { return { height: appState.bodyHeight.value + 'px', overflowY: 'auto' } });
     const isMobile = appState.isMobile && (appState.device != EDevice.iPad);
     const router = useRouter();
 
@@ -204,7 +204,7 @@
                 <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 size="large" color="grey" icon="$info" @click.stop.prevent="onInfo(item)"></v-btn>
+                            <v-btn size="large" color="grey" variant="tonal" icon="$info" @click.stop.prevent="onInfo(item)"></v-btn>
                         </v-list-item-avatar>
                     </template>
                     <v-list-item-avatar right rounded="0" v-if="item.ThumbnailUrl">

package/src/views/DocumentsPage.vue

@@ -1,76 +0,0 @@
-<script setup lang="ts">
-    import { inject, ref, reactive, computed, onMounted, onUnmounted, nextTick, watch } from 'vue';
-    import { useRouter } from 'vue-router';
-    import { IAppState, EDevice, appStateSymbol } from '@christianriedl/utils';
-    import { getMediaSymbol } from '@christianriedl/media';
-
-    const appState = inject(appStateSymbol)!;
-    const getMediaService = inject(getMediaSymbol)!;
-    const mediaService = getMediaService();
-    const stack = reactive<string[]>([]);
-    const backVisible = ref(false);
-    const directoryNames = reactive<string[]>([]);
-    const fileNames = reactive<string[]>([]);
-    const path = computed(() => stack.join('/'));
-    const heightStyle = computed(() => { return { height: appState.bodyHeight.value + 'px', overflowY: 'auto' } });
-
-    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('Documents created');
-        await getItems('');
-    })
-    async function getItems(name: string) : Promise<boolean> {
-        if (name)
-            stack.splice(stack.length, 0, name);
-        const fullPath = stack.join('/');
-        const directories = await mediaService.getDirectories(fullPath);
-        directoryNames.splice(0, directoryNames.length, ...directories);
-        const files = await mediaService.getFiles(fullPath);
-        fileNames.splice(0, fileNames.length, ...files);
-        mediaService.log.trace(`At ${fullPath} : ${directories.length} directories, ${files.length} files`);
-        backVisible.value = stack.length > 0;
-        window.history.pushState({ noBackExitsApp: true }, '')
-        return true;
-    }
-    async function onSelect(name: string) {
-        await getItems(name);
-    }
-    async function listBack() {
-        if (stack.length > 0) {
-            stack.splice(stack.length - 1, 1);
-            await getItems('');
-        }
-    }
-    function toUrl(name: string): string {
-        return mediaService.getFileUrl(stack.join('/') + '/' + name);
-    }
-</script>
-<template>
-    <v-card class="bg-media">
-        <v-card-title>{{path}}</v-card-title>
-        <v-list class="bg-media">
-            <v-list-item v-for="dir in directoryNames" :key="dir" :title="dir" :value="dir" density="compact" @click.stop="onSelect(dir)">
-            </v-list-item>
-            <v-list-item v-for="file in fileNames" :key="file" :title="file" :value="file" density="compact" :href="toUrl(file)">
-            </v-list-item>
-        </v-list>
-        <v-card-actions>
-            <v-btn v-if="backVisible" @click="listBack">
-                <v-icon size="large" icon="$back" />
-            </v-btn>
-        </v-card-actions>
-    </v-card>
-</template>
-