@christianriedl/media 1.0.105 → 1.0.107

package/package.json

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

package/src/views/VideoPage.vue

@@ -1,17 +1,29 @@
 <script setup lang="ts">
-    import { inject, ref, onMounted, onUnmounted } from 'vue';
+    import { inject, ref, onMounted, onUnmounted, watch } from 'vue';
     import { useRoute, useRouter } from 'vue-router';
+    import { appStateSymbol } from '@christianriedl/utils';
     import { MediaService, getMediaSymbol } from '@christianriedl/media';
 
+    const appState = inject(appStateSymbol)!;
     const getMediaService = inject(getMediaSymbol)!;
     const mediaService = getMediaService()!;
     const route = useRoute();
     const router = useRouter();
 
     const url = ref('');
-    const height = ref(0);
     const width = ref(0);
-    let  landscape = true;
+    const height = ref(0);
+    const ready = ref(false);
+    
+    watch(appState.bodyHeight, () => {
+        if (appState.pageWidth.value && appState.bodyHeight.value) {
+            width.value = appState.pageWidth.value;
+            height.value = appState.bodyHeight.value - 8;               // video height not exactly, requires 8 px more
+            if (url.value)
+                ready.value = true;
+        }
+    }, { immediate: true });
+
     let channelName = "";
     let media = "";
 
@@ -24,7 +36,8 @@
             channelName = route.query.channelName.toString();
         if (route.query.media)
             media = route.query.media.toString();
-        onResize();
+        if (height.value)
+            ready.value = true;
     });
     onUnmounted(() => {
         window.document.removeEventListener('keydown', onKey);
@@ -32,11 +45,6 @@
             mediaService.stopSatIpStream(channelName, media);
     });
 
-    function onResize() {
-        height.value = window.innerHeight;
-        width.value = window.innerWidth;
-        landscape = width.value > height.value;
-    }
     function onKey(ev: KeyboardEvent) {
         switch (ev.code) {
             case "Escape":
@@ -47,8 +55,6 @@
 </script>
 
 <template>
-    <div v-resize="onResize">
-        <video controls autoplay :src="url" :width="width" :height="height">
-        </video>
-    </div>
+    <video v-if="ready" controls autoplay :src="url" :width="width" :height="height">
+    </video>
 </template>

package/src/views/VideosPage.vue

@@ -121,8 +121,7 @@
             const video = item as IVideoFile;
             const as = mediaService.splitAudioStreams(video.AudioStreams);
             audioStreams.splice(0, audioStreams.length, ...as);
-            params = mediaService.getTranscodeParams(true, video.Width, video.Height, window.innerWidth, quality.value);
-            paramsText.value = params.text;
+            paramsText.value = `${video.Width}x${video.Height}`;
             return;
         }
         const folder = item as IMediaFolder;
@@ -144,7 +143,7 @@
         }
         else {
             params = null;
-            paramsText.value = "";
+            paramsText.value = `${video.Width}x${video.Height}`;
         }
     }
     function listBack() {
@@ -204,8 +203,8 @@
             }
         }
     }
-    async function onShare(item: IMediaItem) {
-        const url = `https://www.christian-riedl.com/photos/video?media=${item.Url}&videobitrate=`;
+    async function onShare(item: IVideoFile) {
+        const url = `https://www.christian-riedl.com/photos/video?media=${item.Url}&width=${item.Width}&height=${item.Height}&videobitrate=`;
         await window.navigator.clipboard.writeText(url);
         window.alert(`Created and Pasted : ${url} !`);
     }
@@ -269,7 +268,7 @@
                             <v-img :src="item.ThumbnailUrl"></v-img>
                         </v-avatar>
                     </template>
-                    <template v-slot:append>
+                    <template v-if="item.Url" 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="$info" @click.stop.prevent="onInfo(item)"></v-btn>
                     </template>