@tak-ps/cloudtak 12.54.0

package/src/pages/video/main.ts

@@ -0,0 +1,27 @@
+import { createApp } from 'vue'
+import * as VueRouter from 'vue-router'
+import { createPinia } from 'pinia'
+
+import 'floating-vue/dist/style.css'
+import FloatingVue from 'floating-vue'
+
+import App from '../../App.vue'
+
+const router = VueRouter.createRouter({
+    history: VueRouter.createWebHistory(),
+    routes: [
+        {
+            path: '/video',
+            name: 'home',
+            component: () => import('../../components/VideoWall.vue'),
+            children: []
+        }
+    ]
+});
+
+const app = createApp(App);
+const pinia = createPinia()
+app.use(router);
+app.use(pinia);
+app.use(FloatingVue);
+app.mount('#app');

package/src/std.ts

@@ -0,0 +1,152 @@
+import createClient from "openapi-fetch";
+import type { Middleware } from "openapi-fetch";
+import type { paths } from './derived-types.js'
+import type { APIError } from './types.js'
+import type { Router } from 'vue-router'
+
+export const server = createClient<paths>({
+    baseUrl: self.location.origin
+});
+
+const AuthMiddleware: Middleware = {
+    async onRequest({ request }) {
+        if (!isWebWorker() && localStorage.token) {
+            request.headers.set("Authorization", `Bearer ${localStorage.token}`);
+        }
+
+        return request;
+    }
+};
+
+server.use(AuthMiddleware);
+
+export function stdurl(url: string | URL): URL {
+    try {
+        url = new URL(url);
+    } catch (err) {
+        if (err instanceof TypeError) {
+            url = new URL(String(self.location.origin).replace(/\/$/, '') + url);
+        } else {
+            throw err;
+        }
+    }
+
+    return url;
+}
+
+/**
+ * Standardize interactions with the backend API
+ *
+ * @param {URL|String} url      - Full URL or API fragment to request
+ * @param {Object} [opts={}]    - Options
+ */
+export async function std(
+    url: string | URL,
+    opts: {
+        token?: string;
+        download?: boolean | string;
+        headers?: Record<string, string>;
+        body?: unknown;
+        method?: string;
+    } = {}
+): Promise<unknown> {
+    url = stdurl(url)
+    if (!opts) opts = {};
+
+    if (!opts.headers) opts.headers = {};
+
+    if (!(opts.body instanceof FormData) && typeof opts.body === 'object' && !opts.headers['Content-Type']) {
+        opts.body = JSON.stringify(opts.body);
+        opts.headers['Content-Type'] = 'application/json';
+    }
+
+    if (!isWebWorker() && localStorage.token && !opts.headers.Authorization) {
+        opts.headers['Authorization'] = 'Bearer ' + localStorage.token;
+    } else if (opts.token) {
+        opts.headers['Authorization'] = 'Bearer ' + opts.token
+    }
+
+    const res = await fetch(url, opts as RequestInit);
+
+    let bdy = {};
+    if ((res.status < 200 || res.status >= 400) && ![401].includes(res.status)) {
+        try {
+            bdy = await res.json();
+        } catch (err) {
+            throw new Error(`Status Code: ${res.status}: ${err instanceof Error ? err.message : String(err)}`);
+        }
+
+        const errbody = bdy as APIError;
+        const err = new Error(errbody.message || `Status Code: ${res.status}`);
+        // @ts-expect-error TODO Fix this
+        err.body = bdy;
+        throw err;
+    } else if (res.status === 401) {
+        if (!isWebWorker()) {
+            delete localStorage.token;
+        }
+        throw new Error('401');
+    }
+
+    const ContentType = res.headers.get('Content-Type');
+    const ContentDisposition = res.headers.get('Content-Disposition');
+
+    if (opts.download) {
+        let name = 'download';
+        if (typeof opts.download === 'string') {
+            name = opts.download;
+        } else if (ContentDisposition) {
+            const regex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
+            const matches = regex.exec(ContentDisposition);
+            if (matches && matches[1]) {
+                name = matches[1].replace(/['"]/g, '');
+            }
+        }
+
+        const object = new File([await res.blob()], name);
+        const file = window.URL.createObjectURL(object);
+
+        const link = document.createElement('a');
+        link.href = file;
+        link.download = name; // This is the magic attribute
+
+        // Append to body, click, and then remove
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+
+        // Clean up the blob URL to prevent memory leaks
+        window.URL.revokeObjectURL(file);
+
+        return res;
+    } else if (ContentType && ContentType.includes('application/json')) {
+        return await res.json();
+    } else {
+        return res;
+    }
+}
+
+export function humanSeconds(seconds: number): string {
+        const date = new Date(seconds * 1000);
+        const str = [];
+        if (date.getUTCDate()-1 !== 0) str.push(date.getUTCDate()-1 + " days");
+        if (date.getUTCHours() !== 0 ) str.push(date.getUTCHours() + " hrs");
+        if (date.getUTCMinutes() !== 0) str.push(date.getUTCMinutes() + " mins");
+        if (date.getUTCSeconds() !== 0) str.push(date.getUTCSeconds() + " secs");
+        if (date.getUTCMilliseconds() !== 0) str.push(date.getUTCMilliseconds() + " ms");
+        return str.join(', ');
+}
+
+function isWebWorker() {
+    return typeof WorkerGlobalScope !== 'undefined' && self instanceof WorkerGlobalScope;
+}
+
+
+export function stdclick($router: Router, event: MouseEvent | KeyboardEvent, path: string) {
+    if (event.ctrlKey === true) {
+        const routeData = $router.resolve(path);
+        window.open(routeData.href, '_blank');
+    } else {
+        $router.push(path);
+    }
+}

package/src/stores/brand.ts

@@ -0,0 +1,28 @@
+/*
+* BrandStore - Maintain Branding accross pages
+*/
+
+import { std } from '../std.ts';
+import type { LoginConfig } from '../types.ts';
+import { defineStore } from 'pinia'
+
+export const useBrandStore = defineStore('brand', {
+    state: (): {
+        loaded: boolean;
+        login: LoginConfig | undefined;
+    } => {
+        return {
+            loaded: false,
+            login: undefined
+        }
+    },
+    actions: {
+        init: async function() {
+            if (!this.login) {
+                this.login = await std('/api/config/login') as LoginConfig;
+            }
+
+            this.loaded = true;
+        }
+    }
+})

package/src/stores/float.ts

@@ -0,0 +1,113 @@
+/*
+* FloatStore - Maintain Floating Panes ontop of the Map View
+*/
+
+import { defineStore } from 'pinia'
+import { useMapStore } from './map.ts';
+import type { VideoConnection, Attachment } from '../types.ts';
+const mapStore = useMapStore();
+
+export enum PaneType {
+    VIDEO = 'video',
+    ATTACHMENT = 'attachment'
+}
+
+export enum VideoStoreType {
+    COT = 'cot',
+    CONNECTION = 'connection'
+}
+
+export type VideoPane = {
+    uid: string,
+    name?: string,
+    type: PaneType.VIDEO,
+    config: {
+        type: VideoStoreType,
+        url: string,
+        height: number,
+        width: number,
+        x: number,
+        y: number,
+    }
+}
+
+export type AttachmentPane = {
+    uid: string,
+    name?: string,
+    type: PaneType.ATTACHMENT,
+    config: {
+        attachment: Attachment,
+        height: number,
+        width: number,
+        x: number,
+        y: number,
+    }
+}
+
+export const useFloatStore = defineStore('float', {
+    state: (): {
+        panes: Map<string, VideoPane | AttachmentPane>
+    } => {
+        return {
+            panes: new Map()
+        }
+    },
+    actions: {
+        delete(uid: string): void {
+            this.panes.delete(uid);
+        },
+        addAttachment(attachment: Attachment) {
+            this.panes.set(attachment.hash, {
+                uid: attachment.hash,
+                type: PaneType.ATTACHMENT,
+                config: {
+                    attachment,
+                    height: 300,
+                    width: 400,
+                    x: 60, // The width of the Nav Toolbar
+                    y: 0
+                }
+            })
+        },
+        addConnection(connection: VideoConnection): void {
+            if (connection.feeds.length === 0) throw new Error('Cannot add Stream as it does not have any valid feeds');
+
+            this.panes.set(connection.uuid, {
+                uid: connection.uuid,
+                name: connection.alias,
+                type: PaneType.VIDEO,
+                config: {
+                    type: VideoStoreType.CONNECTION,
+                    url: connection.feeds[0].url,
+                    height: 300,
+                    width: 400,
+                    x: 60, // The width of the Nav Toolbar
+                    y: 0
+                }
+            })
+        },
+        async addCOT(uid: string): Promise<void> {
+            const cot = await mapStore.worker.db.get(uid, {
+                mission: true
+            });
+
+            if (!cot || !cot.properties || !cot.properties.video || !cot.properties.video.url) {
+                return;
+            }
+
+            this.panes.set(uid, {
+                uid,
+                name: cot.properties.callsign,
+                type: PaneType.VIDEO,
+                config: {
+                    type: VideoStoreType.COT,
+                    url: cot.properties.video.url,
+                    height: 300,
+                    width: 400,
+                    x: 60, // The width of the Nav Toolbar
+                    y: 0
+                }
+            })
+        }
+    }
+})