Gracefully catch errors and show inline

dfpc-coe · Sep 18, 2024 · ef35936 · ef35936
1 parent 59a6fda
commit ef35936
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 17 deletions.
diff --git a/api/lib/control/video-service.ts b/api/lib/control/video-service.ts
@@ -297,6 +297,29 @@ export default class VideoServiceControl {
         headers.append('Content-Type', 'application/json');
 
         if (lease.proxy) {
+            try {
+                const proxy = new URL(opts.proxy);
+
+                // Check for HLS Errors
+                if (['http:', 'https:'].includes(proxy.protocol)) {
+                    const res = await fetch(proxy);
+
+                    if (res.status === 404) {
+                        throw new Err(400, null, 'External Video Server reports Video Stream not found');
+                    } else if (!res.ok) {
+                        throw new Err(res.status, null, `External Video Server failed stream video - HTTP Error ${res.status}`);
+                    }
+                }
+            } catch (err) {
+                if (err instanceof Err) {
+                    throw err;
+                } else if (err instanceof TypeError && err.code === 'ERR_INVALID_URL') {
+                    throw new Err(400, null, 'Invalid Video Stream URL');
+                } else {
+                    throw new Err(500, err instanceof Error ? err : new Error(String(err)), 'Failed to generate proxy stream');
+                }
+            }
+
             const res = await fetch(url, {
                 method: 'POST',
                 headers,

diff --git a/api/web/src/components/CloudTAK/CoTView.vue b/api/web/src/components/CloudTAK/CoTView.vue
@@ -287,6 +287,7 @@
                 <CoTVideo
                     v-if='viewer'
                     class='my-2 mx-2'
+                    @close='viewer = false'
                     :video='feat.properties.video.url'
                 />
 

diff --git a/api/web/src/components/CloudTAK/util/Video.vue b/api/web/src/components/CloudTAK/util/Video.vue
@@ -1,6 +1,13 @@
 <template>
     <div>
         <TablerLoading v-if='loading' />
+        <template v-else-if='err'>
+            <TablerAlert title='Video Error' :err='err'/>
+
+            <div class='d-flex justify-content-center'>
+                <button @click='$emit("close")' class='btn'>Close Player</button>
+            </div>
+        </template>
         <template v-else-if='!protocols || !protocols.hls'>
             <TablerNone
                 label='HLS Streaming Protocol'
@@ -17,7 +24,7 @@
                 autoplay='true'
             >
                 <source
-                    type='application/x-mpegURL' 
+                    type='application/x-mpegURL'
                     :src='protocols.hls.url'
                 >
             </video>
@@ -34,13 +41,18 @@ import 'video.js/dist/video-js.css';
 import type { VideoLease } from '../../../types.ts';
 import {
     TablerNone,
+    TablerAlert,
     TablerLoading
 } from '@tak-ps/vue-tabler';
 
 export default defineComponent({
     name: 'CoTVideo',
+    emits: [
+        'close'
+    ],
     components: {
         TablerNone,
+        TablerAlert,
         TablerLoading
     },
     props: {
@@ -51,6 +63,7 @@ export default defineComponent({
     },
     data: function(): {
         loading: boolean,
+        err?: Error,
         lease?: VideoLease["lease"],
         player?: Player,
         protocols?: VideoLease["protocols"]
@@ -67,26 +80,33 @@ export default defineComponent({
     mounted: async function() {
         await this.requestLease();
 
-
-        this.loading = false;
-        this.$nextTick(() => {
-            this.player = videojs('cot-player');
-        });
+        if (!this.err) {
+            this.$nextTick(() => {
+                this.player = videojs('cot-player');
+            });
+        }
     },
     methods: {
         requestLease: async function() {
-            const { lease, protocols } = await std('/api/video/lease', {
-                method: 'POST',
-                body:  {
-                    name: 'Temporary Lease',
-                    ephemeral: true,
-                    duration: 1 * 60 * 60,
-                    proxy: this.video
-                }
-            }) as VideoLease
+            try {
+                const { lease, protocols } = await std('/api/video/lease', {
+                    method: 'POST',
+                    body:  {
+                        name: 'Temporary Lease',
+                        ephemeral: true,
+                        duration: 1 * 60 * 60,
+                        proxy: this.video
+                    }
+                }) as VideoLease
+
+                this.lease = lease;
+                this.protocols = protocols;
 
-            this.lease = lease;
-            this.protocols = protocols;
+                this.loading = false;
+            } catch (err) {
+                this.loading = false;
+                this.err = err instanceof Error ? err : new Error(String(err));
+            }
         }
     }
 })