Variation on MultiCam Media Controller

client/dive-common/components/ConfidenceFilter.vue

@@ -25,9 +25,7 @@ export default defineComponent({
   setup(props, { emit }) {
     function _updateConfidence(event: InputEvent) {
       if (event.target) {
-        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-        // @ts-ignore
-        emit('update:confidence', Number.parseFloat(event.target.value));
+        emit('update:confidence', Number.parseFloat((event.target as HTMLInputElement).value));
       }
     }
     function _emitEnd() {

client/dive-common/components/ControlsContainer.vue

@@ -1,16 +1,16 @@
 <script lang="ts">
 import {
-  defineComponent, ref, PropType,
+  defineComponent, ref, PropType, emit,
 } from '@vue/composition-api';
 import type { DatasetType } from 'dive-common/apispec';
 import FileNameTimeDisplay from 'vue-media-annotator/components/controls/FileNameTimeDisplay.vue';
 import {
   Controls,
   EventChart,
+  injectAggregateController,
   LineChart,
   Timeline,
 } from 'vue-media-annotator/components';
-import { MediaControlAggregator } from 'vue-media-annotator/components/annotators/mediaControllerType';
 
 export default defineComponent({
   components: {
@@ -20,6 +20,7 @@ export default defineComponent({
     LineChart,
     Timeline,
   },
+
   props: {
     lineChartData: {
       type: Array as PropType<unknown[]>,
@@ -33,15 +34,14 @@ export default defineComponent({
       type: String as PropType<DatasetType>,
       required: true,
     },
-    mediaControls: {
-      type: Object as PropType<MediaControlAggregator>,
-      required: true,
+    collapsed: {
+      type: Boolean,
+      default: false,
     },
   },
 
-  setup(props) {
+  setup() {
     const currentView = ref('Detections');
-    const collapsed = ref(false);
 
     const ticks = ref([0.25, 0.5, 0.75, 1.0, 2.0, 4.0, 8.0]);
 
@@ -51,16 +51,15 @@ export default defineComponent({
      */
     function toggleView(type: 'Detections' | 'Events') {
       currentView.value = type;
-      collapsed.value = false;
+      emit('update:collapsed', false);
     }
     const {
       maxFrame, frame, seek, volume, setVolume, setSpeed, speed,
-    } = props.mediaControls;
+    } = injectAggregateController().value;
 
     return {
       currentView,
       toggleView,
-      collapsed,
       maxFrame,
       frame,
       seek,
@@ -79,7 +78,7 @@ export default defineComponent({
     dense
     style="position:absolute; bottom: 0px; padding: 0px; margin:0px;"
   >
-    <Controls :media-controls="mediaControls">
+    <Controls>
       <template slot="timelineControls">
         <div style="min-width: 210px">
           <v-tooltip
@@ -90,7 +89,7 @@ export default defineComponent({
               <v-icon
                 small
                 v-on="on"
-                @click="collapsed=!collapsed"
+                @click="$emit('update:collapsed', !collapsed)"
               >
                 {{ collapsed?'mdi-chevron-up-box': 'mdi-chevron-down-box' }}
               </v-icon>
@@ -126,7 +125,6 @@ export default defineComponent({
           v-if="datasetType === 'image-sequence'"
           class="text-middle px-3"
           display-type="filename"
-          :media-controls="mediaControls"
         />
         <span v-else-if="datasetType === 'video'">
           <span class="mr-2">
@@ -205,7 +203,6 @@ export default defineComponent({
           <file-name-time-display
             class="text-middle pl-2"
             display-type="time"
-            :media-controls="mediaControls"
           />
         </span>
         <v-tooltip

client/dive-common/components/Sidebar.vue

@@ -6,7 +6,7 @@ import {
   watch,
 } from '@vue/composition-api';
 
-import { TypeList, TrackList } from 'vue-media-annotator/components';
+import { TypeList, TrackList, injectAggregateController } from 'vue-media-annotator/components';
 import { useAllTypes, useHandler } from 'vue-media-annotator/provides';
 
 import { clientSettings } from 'dive-common/store/settings';
@@ -45,6 +45,11 @@ export default defineComponent({
     const { visible } = usePrompt();
     const trackSettings = toRef(clientSettings, 'trackSettings');
     const typeSettings = toRef(clientSettings, 'typeSettings');
+    const aggregateController = injectAggregateController();
+
+    function seek(frame: number) {
+      aggregateController.value.seek(frame);
+    }
 
     const data = reactive({
       currentTab: 'tracks' as 'tracks' | 'attributes',
@@ -89,6 +94,7 @@ export default defineComponent({
       doToggleMerge,
       onResize,
       swapTabs,
+      seek,
     };
   },
 });
@@ -145,7 +151,7 @@ export default defineComponent({
           :lock-types="typeSettings.lockTypes"
           :hotkeys-disabled="visible()"
           :height="data.trackHeight"
-          @track-seek="$emit('track-seek', $event)"
+          @track-seek="seek"
         >
           <template slot="settings">
             <TrackSettingsPanel
@@ -159,7 +165,7 @@ export default defineComponent({
         :lock-types="typeSettings.lockTypes"
         :hotkeys-disabled="visible()"
         :width="width"
-        @track-seek="$emit('track-seek', $event)"
+        @track-seek="seek"
         @toggle-merge="doToggleMerge"
         @back="swapTabs"
         @commit-merge="commitMerge"