removed output name from nested datarecords in abstract parser, and removed the output name from getFrameData and getTimestamp functions

lib/osh-js/source/core/parsers/AbstractParser.js

@@ -133,16 +133,16 @@ class DataRecordParser extends AbstractParser {
     }
 
     parse(dataTypeParser, props, resultParent) {
-        if(!this.name) {
+        // if(!this.name) {
             super.parse(dataTypeParser, props, resultParent);
-        } else {
-            // parse size of the array
-            const result = {}
-            for (let parser of this.stack) {
-                parser.parse(dataTypeParser, props, result);
-            }
-            resultParent[this.name] = result;
-        }
+        // } else {
+        //     // parse size of the array
+        //     const result = {}
+        //     for (let parser of this.stack) {
+        //         parser.parse(dataTypeParser, props, result);
+        //     }
+        //     resultParent[this.name] = result;
+        // }
     }
 }
 

src/components/menus/visualization-wizard/visualizations/video/Builder.ts

@@ -1,6 +1,6 @@
-import { OSHDatastream, OSHVisualization } from '@/lib/OSHConnectDataStructs';
+import { OSHVisualization } from '@/lib/OSHConnectDataStructs';
 import {
-    ISweApiDataSourceProperties, IVideoViewProperties,
+    ISweApiDataSourceProperties,
     VisualizationComponents,
 } from '@/lib/VisualizationHelpers';
 import { useDataStreamStore } from '@/stores/datastreamstore';
@@ -10,7 +10,6 @@ import { Mode } from 'osh-js/source/core/datasource/Mode';
 import { randomUUID } from 'osh-js/source/core/utils/Utils.js';
 import { AggregateDatastreams, AggregateControlstreams, BuildRoleProperty } from '../../shared/helpers';
 import {toRaw} from "vue";
-import {useControlStreamStore} from "@/stores/controlstreamstore";
 
 export function build() {
 	console.log('Building Video Visualization...');
@@ -53,21 +52,18 @@ export function build() {
  */
 export function CreateVideoViewProps(datastreams: { [key: string]: any }, controlstreams: { [key: string]: any }, visOptions: any) {
 	const datastreamStore = useDataStreamStore();
-    const controlstreamStore = useControlStreamStore();
 
 	const vizDatasources: ISweApiDataSourceProperties[] = [];
 	let videoLayer: any = {};
 
     let videoView: any = {
         container: `video-container-${randomUUID()}`,
         css: 'video-view',
-        width: 640,
-        height: 480,
-        showTime: true,
-        showStats: true,
+        useWebCodecApi: visOptions?.webCodec,
+        showTime: visOptions?.time,
+        showStats: visOptions?.stats,
     }
 
-    const videoFormat = visOptions?.videoFormat || 'MJPEG'; // default to mjpeg? or maybe h264 idc
 
 	for (const [dsId, entry] of Object.entries(datastreams)) {
         const properties = BuildRoleProperty(entry);
@@ -78,8 +74,6 @@ export function CreateVideoViewProps(datastreams: { [key: string]: any }, contro
             resource: `/datastreams/${dsId}/observations`,
             tls: currentOSHDatastream[0].datastream.networkProperties.tls,
             protocol: 'ws',
-            startTime: 'now',
-            endTime: '2125-08-01T00:00:00Z',
             mode: Mode.REAL_TIME,
             responseFormat: 'application/swe+binary',
             id: randomUUID(),
@@ -95,15 +89,14 @@ export function CreateVideoViewProps(datastreams: { [key: string]: any }, contro
 
         videoLayer = {
             ...videoLayer,
-            name: visOptions.name ?? `${ds.datastream.properties.name}`,
+            name: `${ds.datastream.properties.name}`,
         };
 
         videoView = {
             ...videoView,
-            name: visOptions.name ?? `${ds.datastream.properties.name}`,
+            name: `${ds.datastream.properties.name}`,
             layers: [videoLayer],
-            useWebCodecApi: videoFormat === 'MJPEG' ? false : true,
-            videoType: videoFormat,
+
         };
         console.log('Created VideoViewProps:', { vizDatasources, videoLayer, videoView });
     }

src/components/menus/visualization-wizard/visualizations/video/Customize.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import NameControl from '../../viz-components/customizations/NameControl.vue';
-
+import VideoOptions from '@/components/menus/visualization-wizard/viz-components/customizations/VideoOptions.vue'
 </script>
 
 <template>
   <NameControl role="video" />
+  <VideoOptions />
 </template>

src/components/menus/visualization-wizard/visualizations/video/Video.vue

@@ -3,7 +3,6 @@ import {computed, onMounted, ref, toRaw} from 'vue';
 import {randomUUID} from 'osh-js/source/core/utils/Utils.js';
 import VideoDataLayer from 'osh-js/source/core/ui/layer/VideoDataLayer.js';
 import {OSHVisualization} from '@/lib/OSHConnectDataStructs';
-import MJPEGView from 'osh-js/source/core/ui/view/video/MjpegView.js';
 import VideoView from 'osh-js/source/core/ui/view/video/VideoView.js';
 import SweApi from 'osh-js/source/core/datasource/sweapi/SweApi.datasource.js';
 import PTZControl from './PTZControl.vue'
@@ -22,32 +21,17 @@ const videoView = ref<any>(null);
 const videoLayer = ref<VideoDataLayer | null>(null);
 const dsInstances: SweApi[] = [];
 
-function createVideoView(codec: string) {
+function createVideoView(viewConfig: any) {
   if (videoView.value) {
     videoView.value.destroy?.();
     videoView.value = null;
   }
 
-  if (codec === 'H264') {
-    videoView.value = new VideoView({
-      container: videoDivId.value,
-      css: 'video-h264',
-      showTime: true,
-      showStats: true,
-      useWebCodecApi: true,
-      layers: [],
-    });
-    console.log("[VideoView] H264 View created:", videoView.value);
-  } else {
-    videoView.value = new MJPEGView({
-      container: videoDivId.value,
-      css: 'video-mjpeg',
-      showTime: true,
-      showStats: true,
-      layers: [],
-    });
-    console.log("[VideoView] MJPEG View created:", videoView.value);
-  }
+  videoView.value = new VideoView({
+    ...viewConfig,
+    container: videoDivId.value,
+    layers: [],
+  });
 }
 
 const ptzControl = computed(() => {
@@ -98,24 +82,19 @@ function initializeVideo() {
       getFrameData = {
         dataSourceIds: [dsInstance.id],
         handler: (rec: any) => {
-          return rec[rawDs.properties.video.outputName][rawDs.properties.video.property] != null
-              ? rec[rawDs.properties.video.outputName][rawDs.properties.video.property]
-              : rec[rawDs.properties.video.property];
+          return rec[rawDs.properties.video.property];
         },
       };
 
       getTimestamp = {
         dataSourceIds: [dsInstance.id],
         handler: (rec: any) => {
-          const data = rec[rawDs.properties.video.outputName];
-          let newDate = data.time == undefined ? new Date(data.sampleTime).getTime() : new Date(data.time).getTime()
-
-          return Number.isNaN(rec.timestamp) ? newDate : rec.timestamp
+          return rec.timestamp
         }
       };
     }
-
-    createVideoView(rawDs.properties.video.compression);
+    const viewConfig = viz.visualizationComponents.dataView;
+    createVideoView(viewConfig);
 
     dsInstance.connect();
     dsInstances.push(dsInstance);
@@ -149,8 +128,6 @@ async function initializePtz() {
 
   const cs = controlStreams[0];
 
-  console.log("cs", cs)
-
   await fetchControlStreamSchema(cs.controlstream.properties, cs.controlstream.networkProperties);
 }
 onMounted(async() => {
@@ -186,9 +163,4 @@ useVisualizationCleanup(ref(dsInstances));
   height: auto;
 }
 
-.ptz-controls {
-  margin-top: 1rem;
-  display: flex;
-  justify-content: center;
-}
 </style>

src/components/menus/visualization-wizard/viz-components/customizations/VideoOptions.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { watch, ref, onMounted } from 'vue';
+import { useVizWizStore } from '@/stores/vizwizstore';
+
+const vwStore = useVizWizStore();
+// const emit = defineEmits(['update:webCodec', 'update:stats', 'update:time']);
+
+const useWebCodec = ref<boolean>(false);
+const stats = ref<boolean>(false);
+const time = ref<boolean>(false);
+
+
+watch(useWebCodec, (val) => {
+  vwStore.updateVisualizationCustomizationOptions({ webCodec: val });
+  // emit('update:webCodec', true)
+});
+
+watch(stats, (val) => {
+  vwStore.updateVisualizationCustomizationOptions({ stats: val });
+  // emit('update:stats', true)
+});
+
+watch(time, (val) => {
+  vwStore.updateVisualizationCustomizationOptions({ time: val });
+  // emit('update:time', true)
+});
+
+
+onMounted(() => {
+  vwStore.updateVisualizationCustomizationOptions({
+    webCodec: useWebCodec.value,
+    stats: stats.value,
+    time: time.value
+  });
+});
+</script>
+
+<template>
+  <v-card class="pa-4" elevation="2">
+    <v-checkbox
+        v-model="useWebCodec"
+        label="Use WebCodec"
+    />
+    <v-checkbox
+        v-model="stats"
+        label="Show Video Stats"
+    />
+    <v-checkbox
+        v-model="time"
+        label="Show Video Time"
+    />
+  </v-card>
+</template>