From 6088cb103ccda18d125a044778c82068120565cf Mon Sep 17 00:00:00 2001
From: Bryon Lewis <Bryon.Lewis@kitware.com>
Date: Fri, 7 Jan 2022 16:01:44 -0500
Subject: [PATCH 01/22] figuring stuff out by breaking it

---
 client/dive-common/components/Viewer.vue      |  31 +++--
 .../annotators/AnnotatorWrapper.vue           | 110 ++++++++++++++++++
 client/src/components/index.ts                |   2 +
 client/src/use/useTrackStore.ts               |  11 +-
 4 files changed, 136 insertions(+), 18 deletions(-)
 create mode 100644 client/src/components/annotators/AnnotatorWrapper.vue

diff --git a/client/dive-common/components/Viewer.vue b/client/dive-common/components/Viewer.vue
index 76e44df32..7f6e052db 100644
--- a/client/dive-common/components/Viewer.vue
+++ b/client/dive-common/components/Viewer.vue
@@ -22,6 +22,7 @@ import {
   ImageAnnotator,
   VideoAnnotator,
   LayerManager,
+  AnnotatorWrapper,
 } from 'vue-media-annotator/components';
 import { MediaController } from 'vue-media-annotator/components/annotators/mediaControllerType';
 
@@ -52,6 +53,7 @@ export default defineComponent({
     LayerManager,
     VideoAnnotator,
     ImageAnnotator,
+    AnnotatorWrapper,
     ConfidenceFilter,
     UserGuideButton,
     EditorMenu,
@@ -77,9 +79,9 @@ export default defineComponent({
     const loadError = ref('');
     const baseMulticamDatasetId = ref(null as string | null);
     const datasetId = toRef(props, 'id');
-    const multiCamList: Ref<string[]> = ref([]);
-    const defaultCamera = ref('');
-    const currentCamera = ref('');
+    const multiCamList: Ref<string[]> = ref(['default']);
+    const defaultCamera = ref('default');
+    const currentCamera = ref('default');
     const playbackComponent = ref(undefined as Vue | undefined);
     const readonlyState = computed(() => props.readonlyMode || props.revision !== undefined);
     const mediaController = computed(() => {
@@ -93,11 +95,11 @@ export default defineComponent({
       return {} as MediaController;
     });
     const { time, updateTime, initialize: initTime } = useTimeObserver();
-    const imageData = ref([] as FrameImage[]);
+    const imageData = ref({ default: [] } as Record<string, FrameImage[]>);
     const datasetType: Ref<DatasetType> = ref('image-sequence');
     const datasetName = ref('');
     const saveInProgress = ref(false);
-    const videoUrl = ref(undefined as undefined | string);
+    const videoUrl = ref({ default: null } as Record<string, null | string>);
     const { loadDetections, loadMetadata, saveMetadata } = useApi();
     const progress = reactive({
       // Loaded flag prevents annotator window from populating
@@ -343,8 +345,8 @@ export default defineComponent({
           frameRate: meta.fps,
           originalFps: meta.originalFps || null,
         });
-        imageData.value = cloneDeep(meta.imageData) as FrameImage[];
-        videoUrl.value = meta.videoUrl;
+        imageData.value[currentCamera.value] = cloneDeep(meta.imageData) as FrameImage[];
+        videoUrl.value[currentCamera.value] = meta.videoUrl || null;
         datasetType.value = meta.type as DatasetType;
 
         const trackData = await loadDetections(datasetId.value, props.revision);
@@ -588,15 +590,11 @@ export default defineComponent({
         </template>
       </sidebar>
       <v-col style="position: relative">
-        <component
-          :is="datasetType === 'image-sequence' ? 'image-annotator' : 'video-annotator'"
-          v-if="(imageData.length || videoUrl) && progress.loaded"
+        <annotator-wrapper
+          v-if="progress.loaded"
           ref="playbackComponent"
-          v-mousetrap="[
-            { bind: 'n', handler: () => handler.trackAdd() },
-            { bind: 'r', handler: () => mediaController.resetZoom() },
-            { bind: 'esc', handler: () => handler.trackAbort() },
-          ]"
+          :cameras="multiCamList"
+          :current-camera="currentCamera"
           v-bind="{ imageData, videoUrl, updateTime, frameRate, originalFps }"
           class="playback-component"
         >
@@ -606,8 +604,7 @@ export default defineComponent({
               @select-track="handler.trackSelect"
             />
           </template>
-          <layer-manager />
-        </component>
+        </annotator-wrapper>
         <div
           v-else
           class="d-flex justify-center align-center fill-height"
diff --git a/client/src/components/annotators/AnnotatorWrapper.vue b/client/src/components/annotators/AnnotatorWrapper.vue
new file mode 100644
index 000000000..ab599afa2
--- /dev/null
+++ b/client/src/components/annotators/AnnotatorWrapper.vue
@@ -0,0 +1,110 @@
+<script lang="ts">
+import {
+  defineComponent, ref, onUnmounted, PropType, toRef, watch,
+} from '@vue/composition-api';
+import { DatasetType } from 'dive-common/apispec';
+import {
+  ImageAnnotator,
+  VideoAnnotator,
+  LayerManager,
+} from 'vue-media-annotator/components';
+import { SetTimeFunc } from '../use/useTimeObserver';
+import { ImageDataItem } from './annotators/ImageAnnotator.vue';
+
+function loadImageFunc(imageDataItem: ImageDataItem, img: HTMLImageElement) {
+  // eslint-disable-next-line no-param-reassign
+  img.src = imageDataItem.url;
+}
+
+
+export default defineComponent({
+  name: 'AnnotationWrapper',
+  components: {
+    VideoAnnotator,
+    ImageAnnotator,
+    LayerManager,
+  },
+  props: {
+    datasetType: {
+      type: String as PropType<DatasetType>,
+      required: true,
+    },
+    cameras: {
+      type: Array as PropType<string[]>,
+      required: true,
+    },
+    currentCamera: {
+      type: String,
+      required: true,
+    },
+    imageData: {
+      type: Object as PropType<Record<string, ImageDataItem[]>>,
+      required: true,
+    },
+    videoUrl: {
+      type: Object as PropType<Record<string, string>>,
+      required: true,
+    },
+    videoPlayerAttributes: {
+      type: Object as PropType<{ [key: string]: string }>,
+      default: () => ({}),
+    },
+    frameRate: {
+      type: Number,
+      required: true,
+    },
+    updateTime: {
+      type: Function as PropType<SetTimeFunc>,
+      required: true,
+    },
+    loadImageFunc: {
+      type: Function as PropType<(imageDataItem: ImageDataItem, img: HTMLImageElement) => void>,
+      default: loadImageFunc,
+    },
+    // Range is [0, inf.)
+    brightness: {
+      type: Number as PropType<number | undefined>,
+      default: undefined,
+    },
+  },
+
+  setup(props) {
+    // We
+    return {
+
+    };
+  },
+});
+</script>
+
+<template>
+  <div>
+    <v-row>
+      <div
+        v-for="camera in cameras"
+        :key="camera"
+      >
+        <component
+          :is="datasetType === 'image-sequence' ? 'image-annotator' : 'video-annotator'"
+          v-if="(imageData[camera].length || videoUrl[camera]) && progress.loaded"
+          ref="playbackComponent"
+          v-bind="{
+            imageData: imageData[camera], videoUrl: videoUrl[camera],
+            updateTime, frameRate, originalFps, loadImageFunc }"
+          class="playback-component"
+        />
+        <layer-manager :camera="camera" />
+      </div>
+      <slot
+        ref="control"
+        name="control"
+        @resize="onResize"
+      />
+      <slot />
+    </v-row>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@import "./annotator.scss";
+</style>
diff --git a/client/src/components/index.ts b/client/src/components/index.ts
index 562a71884..be892bf5d 100644
--- a/client/src/components/index.ts
+++ b/client/src/components/index.ts
@@ -6,6 +6,7 @@
 
 import ImageAnnotator from './annotators/ImageAnnotator.vue';
 import VideoAnnotator from './annotators/VideoAnnotator.vue';
+import AnnotatorWrapper from './annotators/AnnotatorWrapper.vue';
 
 import Controls from './controls/Controls.vue';
 import EventChart from './controls/EventChart.vue';
@@ -27,6 +28,7 @@ export {
   LineChart,
   Timeline,
   LayerManager,
+  AnnotatorWrapper,
   TooltipButton,
   TrackItem,
   TrackList,
diff --git a/client/src/use/useTrackStore.ts b/client/src/use/useTrackStore.ts
index a47062e74..2195ba65d 100644
--- a/client/src/use/useTrackStore.ts
+++ b/client/src/use/useTrackStore.ts
@@ -17,6 +17,7 @@ interface UseTrackStoreParams {
 interface InsertArgs {
   imported?: boolean;
   afterId?: TrackId;
+  cameraName?: string;
 }
 
 export function getTrack(
@@ -57,6 +58,9 @@ export default function useTrackStore({ markChangesPending }: UseTrackStoreParam
   const trackIds: Ref<Array<TrackId>> = ref([]);
   const canary = ref(0);
 
+  // Multi-Camera Support
+  const camTrackMap: Record<string, Map<TrackId, Track>> = { base: new Map<TrackId, Track>() };
+  // internval Tree should be the same because all overlapping tracks have the same Id and length
 
   function _depend(): number {
     return canary.value;
@@ -84,7 +88,12 @@ export default function useTrackStore({ markChangesPending }: UseTrackStoreParam
 
   function insertTrack(track: Track, args?: InsertArgs) {
     track.setNotifier(onChange);
-    trackMap.set(track.trackId, track);
+    if (args?.cameraName !== undefined) {
+      if (camTrackMap[args.cameraName] === undefined) {
+        camTrackMap[args.cameraName] = new Map<TrackId, Track>();
+      }
+      camTrackMap[args.cameraName].set(track.trackId, track);
+    }
     intervalTree.insert([track.begin, track.end], track.trackId.toString());
     if (args && args.afterId) {
       /* Insert specifically after another trackId */

From edc4e4cde393025ee3c12aa89a3b4f2434c9a8c2 Mon Sep 17 00:00:00 2001
From: Bryon Lewis <Bryon.Lewis@kitware.com>
Date: Wed, 12 Jan 2022 14:39:14 -0500
Subject: [PATCH 02/22] need to redo useMediaController

---
 client/dive-common/components/Viewer.vue      |  8 +-
 .../annotators/AnnotatorWrapper.vue           | 85 ++++++++++++++-----
 .../annotators/subMediaController.ts          |  0
 client/src/use/useTrackStore.ts               |  2 +
 4 files changed, 72 insertions(+), 23 deletions(-)
 create mode 100644 client/src/components/annotators/subMediaController.ts

diff --git a/client/dive-common/components/Viewer.vue b/client/dive-common/components/Viewer.vue
index 7f6e052db..fcdef96b8 100644
--- a/client/dive-common/components/Viewer.vue
+++ b/client/dive-common/components/Viewer.vue
@@ -1,6 +1,6 @@
 <script lang="ts">
 import {
-  defineComponent, ref, toRef, computed, Ref, reactive, watch,
+  defineComponent, ref, toRef, computed, Ref, reactive, watch, onMounted,
 } from '@vue/composition-api';
 import type { Vue } from 'vue/types/vue';
 
@@ -86,6 +86,7 @@ export default defineComponent({
     const readonlyState = computed(() => props.readonlyMode || props.revision !== undefined);
     const mediaController = computed(() => {
       if (playbackComponent.value) {
+        console.log(playbackComponent.value);
         // TODO: Bug in composition-api types incorrectly organizes the static members of a Vue
         // instance when using typeof ImageAnnotator, so we can't use the "real" type here
         // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
@@ -476,6 +477,7 @@ export default defineComponent({
       // multicam
       multiCamList,
       defaultCamera,
+      currentCamera,
       changeCamera,
       // For Navigation Guarding
       navigateAwayGuard,
@@ -595,7 +597,9 @@ export default defineComponent({
           ref="playbackComponent"
           :cameras="multiCamList"
           :current-camera="currentCamera"
-          v-bind="{ imageData, videoUrl, updateTime, frameRate, originalFps }"
+          v-bind="{
+            imageData, videoUrl, updateTime,
+            frameRate, originalFps, datasetType, progress }"
           class="playback-component"
         >
           <template slot="control">
diff --git a/client/src/components/annotators/AnnotatorWrapper.vue b/client/src/components/annotators/AnnotatorWrapper.vue
index ab599afa2..637bfd0f8 100644
--- a/client/src/components/annotators/AnnotatorWrapper.vue
+++ b/client/src/components/annotators/AnnotatorWrapper.vue
@@ -1,22 +1,26 @@
 <script lang="ts">
 import {
-  defineComponent, ref, onUnmounted, PropType, toRef, watch,
+  computed,
+  defineComponent, onMounted, PropType, ref,
 } from '@vue/composition-api';
 import { DatasetType } from 'dive-common/apispec';
-import {
-  ImageAnnotator,
-  VideoAnnotator,
-  LayerManager,
-} from 'vue-media-annotator/components';
-import { SetTimeFunc } from '../use/useTimeObserver';
-import { ImageDataItem } from './annotators/ImageAnnotator.vue';
+import ImageAnnotator from './ImageAnnotator.vue';
+import VideoAnnotator from './VideoAnnotator.vue';
+import LayerManager from '../LayerManager.vue';
+import { SetTimeFunc } from '../../use/useTimeObserver';
+import { MediaController } from './mediaControllerType';
+
+export interface ImageDataItem {
+  url: string;
+  filename: string;
+}
+
 
 function loadImageFunc(imageDataItem: ImageDataItem, img: HTMLImageElement) {
   // eslint-disable-next-line no-param-reassign
   img.src = imageDataItem.url;
 }
 
-
 export default defineComponent({
   name: 'AnnotationWrapper',
   components: {
@@ -53,6 +57,10 @@ export default defineComponent({
       type: Number,
       required: true,
     },
+    originalFps: {
+      type: Number as PropType<number | null>,
+      default: null,
+    },
     updateTime: {
       type: Function as PropType<SetTimeFunc>,
       required: true,
@@ -66,12 +74,39 @@ export default defineComponent({
       type: Number as PropType<number | undefined>,
       default: undefined,
     },
+    progress: {
+      type: Object as PropType<{loaded: boolean}>,
+      required: true,
+    },
   },
 
   setup(props) {
     // We
-    return {
+    console.log(props.imageData);
+    console.log(props.cameras);
+    const subPlaybackComponent = ref(undefined as Vue[] | undefined);
+    const mediaController = computed(() => {
+      if (subPlaybackComponent.value) {
+        if (subPlaybackComponent.value?.length >= 1) {
+          console.log(subPlaybackComponent.value);
+          // TODO: Bug in composition-api types incorrectly organizes the static members of a Vue
+          // instance when using typeof ImageAnnotator, so we can't use the "real" type here
+          // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+          // @ts-ignore
+
+        //In this case we need to collate all sub mediaControllers into one
+        }
+        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+        // @ts-ignore
+        return subPlaybackComponent.value[0].mediaController as MediaController;
+      }
+      return {} as MediaController;
+    });
 
+
+    return {
+      subPlaybackComponent,
+      mediaController,
     };
   },
 });
@@ -84,23 +119,31 @@ export default defineComponent({
         v-for="camera in cameras"
         :key="camera"
       >
-        <component
-          :is="datasetType === 'image-sequence' ? 'image-annotator' : 'video-annotator'"
+        <div
           v-if="(imageData[camera].length || videoUrl[camera]) && progress.loaded"
-          ref="playbackComponent"
-          v-bind="{
-            imageData: imageData[camera], videoUrl: videoUrl[camera],
-            updateTime, frameRate, originalFps, loadImageFunc }"
-          class="playback-component"
-        />
-        <layer-manager :camera="camera" />
-      </div>
-      <slot
+        >
+          <component
+            :is="datasetType === 'image-sequence' ? 'image-annotator' : 'video-annotator'"
+            ref="subPlaybackComponent"
+            v-bind="{
+              imageData: imageData[camera], videoUrl: videoUrl[camera],
+              updateTime, frameRate, originalFps, loadImageFunc }"
+            class="playback-component"
+          >
+                <slot
+        v-if="mediaController.frame"
         ref="control"
         name="control"
         @resize="onResize"
       />
       <slot />
+
+            <layer-manager
+              :camera="camera"
+            />
+          </component>
+        </div>
+      </div>
     </v-row>
   </div>
 </template>
diff --git a/client/src/components/annotators/subMediaController.ts b/client/src/components/annotators/subMediaController.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/client/src/use/useTrackStore.ts b/client/src/use/useTrackStore.ts
index 2195ba65d..c070ab3c8 100644
--- a/client/src/use/useTrackStore.ts
+++ b/client/src/use/useTrackStore.ts
@@ -93,6 +93,8 @@ export default function useTrackStore({ markChangesPending }: UseTrackStoreParam
         camTrackMap[args.cameraName] = new Map<TrackId, Track>();
       }
       camTrackMap[args.cameraName].set(track.trackId, track);
+    } else {
+      trackMap.set(track.trackId, track);
     }
     intervalTree.insert([track.begin, track.end], track.trackId.toString());
     if (args && args.afterId) {

From 16e7cb6ed0cc9e55b48d9e4c673c6cfaa7b2aec7 Mon Sep 17 00:00:00 2001
From: Bryon Lewis <Bryon.Lewis@kitware.com>
Date: Tue, 18 Jan 2022 15:22:30 -0500
Subject: [PATCH 03/22] getting useMediaController to use multiple cameras

---
 .../annotators/AnnotatorWrapper.vue           |  16 +-
 .../components/annotators/ImageAnnotator.vue  |  17 +-
 .../components/annotators/VideoAnnotator.vue  |  18 +-
 .../annotators/useMediaController.ts          | 308 +++++++++++-------
 4 files changed, 228 insertions(+), 131 deletions(-)

diff --git a/client/src/components/annotators/AnnotatorWrapper.vue b/client/src/components/annotators/AnnotatorWrapper.vue
index 637bfd0f8..2a73fb2c3 100644
--- a/client/src/components/annotators/AnnotatorWrapper.vue
+++ b/client/src/components/annotators/AnnotatorWrapper.vue
@@ -127,20 +127,18 @@ export default defineComponent({
             ref="subPlaybackComponent"
             v-bind="{
               imageData: imageData[camera], videoUrl: videoUrl[camera],
-              updateTime, frameRate, originalFps, loadImageFunc }"
+              updateTime, frameRate, originalFps, loadImageFunc, camera }"
             class="playback-component"
           >
-                <slot
-        v-if="mediaController.frame"
-        ref="control"
-        name="control"
-        @resize="onResize"
-      />
-      <slot />
-
             <layer-manager
               :camera="camera"
             />
+            <slot
+              v-if="mediaController.frame"
+              ref="control"
+              name="control"
+              @resize="onResize"
+            />
           </component>
         </div>
       </div>
diff --git a/client/src/components/annotators/ImageAnnotator.vue b/client/src/components/annotators/ImageAnnotator.vue
index cdde8cd05..71ad99fe1 100644
--- a/client/src/components/annotators/ImageAnnotator.vue
+++ b/client/src/components/annotators/ImageAnnotator.vue
@@ -47,13 +47,18 @@ export default defineComponent({
       type: Number as PropType<number | undefined>,
       default: undefined,
     },
+    camera: {
+      type: String as PropType<string>,
+      default: 'default',
+    },
   },
 
   setup(props) {
     const loadingVideo = ref(false);
     const loadingImage = ref(true);
     const commonMedia = useMediaController();
-    const { data } = commonMedia;
+    commonMedia.addCamera(props.camera);
+    const data = commonMedia.datas[props.camera];
     data.maxFrame = props.imageData.length - 1;
     // Below are configuration settings we can set until we decide on good numbers to utilize.
     let local = {
@@ -309,7 +314,7 @@ export default defineComponent({
       cursorHandler,
       initializeViewer,
       mediaController,
-    } = commonMedia.initialize({
+    } = commonMedia.initialize(props.camera, {
       seek,
       play,
       pause,
@@ -327,7 +332,7 @@ export default defineComponent({
       const imgInternal = cacheFrame(0);
       imgInternal.onloadPromise.then(() => {
         initializeViewer(imgInternal.image.naturalWidth, imgInternal.image.naturalHeight);
-        const quadFeatureLayer = commonMedia.geoViewerRef.value.createLayer('feature', {
+        const quadFeatureLayer = commonMedia.geoViewers[props.camera].value.createLayer('feature', {
           features: ['quad'],
           autoshareRenderer: false,
         });
@@ -360,7 +365,7 @@ export default defineComponent({
         const imgInternal = cacheFrame(0);
         imgInternal.onloadPromise.then(() => {
           initializeViewer(imgInternal.image.naturalWidth, imgInternal.image.naturalHeight);
-          const quadFeatureLayer = commonMedia.geoViewerRef.value.createLayer('feature', {
+          const quadFeatureLayer = commonMedia.geoViewers[props.camera].value.createLayer('feature', {
             features: ['quad'],
             autoshareRenderer: false,
           });
@@ -392,8 +397,8 @@ export default defineComponent({
       data,
       loadingVideo,
       loadingImage,
-      imageCursorRef: commonMedia.imageCursorRef,
-      containerRef: commonMedia.containerRef,
+      imageCursorRef: commonMedia.imageCursors[props.camera],
+      containerRef: commonMedia.containers[props.camera],
       onResize: commonMedia.onResize,
       cursorHandler,
       mediaController,
diff --git a/client/src/components/annotators/VideoAnnotator.vue b/client/src/components/annotators/VideoAnnotator.vue
index e15118cc0..d49f1197d 100644
--- a/client/src/components/annotators/VideoAnnotator.vue
+++ b/client/src/components/annotators/VideoAnnotator.vue
@@ -98,11 +98,17 @@ export default defineComponent({
       type: Number as PropType<number | undefined>,
       default: undefined,
     },
+    camera: {
+      type: String as PropType<string>,
+      default: 'default',
+    },
+
   },
 
   setup(props) {
     const commonMedia = useMediaController();
-    const { data } = commonMedia;
+    commonMedia.addCamera(props.camera);
+    const data = commonMedia.datas[props.camera];
 
     function makeVideo() {
       const video = document.createElement('video');
@@ -154,7 +160,7 @@ export default defineComponent({
         data.frame = Math.floor(newFrame);
         data.flick = Math.round(video.currentTime * Flick);
         data.syncedFrame = data.frame;
-        commonMedia.geoViewerRef.value.scheduleAnimationFrame(syncWithVideo);
+        commonMedia.geoViewers[props.camera].value.scheduleAnimationFrame(syncWithVideo);
       }
       data.currentTime = video.currentTime;
     }
@@ -187,7 +193,7 @@ export default defineComponent({
       cursorHandler,
       initializeViewer,
       mediaController,
-    } = commonMedia.initialize({
+    } = commonMedia.initialize(props.camera, {
       seek, play, pause, setVolume, setSpeed,
     });
 
@@ -223,7 +229,7 @@ export default defineComponent({
         data.maxFrame = maybeMaxFrame;
       }
       initializeViewer(width, height);
-      quadFeatureLayer = commonMedia.geoViewerRef.value.createLayer('feature', {
+      quadFeatureLayer = commonMedia.geoViewers[props.camera].value.createLayer('feature', {
         features: ['quad.video'],
         autoshareRenderer: false,
       });
@@ -268,8 +274,8 @@ export default defineComponent({
 
     return {
       data,
-      imageCursorRef: commonMedia.imageCursorRef,
-      containerRef: commonMedia.containerRef,
+      imageCursorRef: commonMedia.imageCursors[props.camera],
+      containerRef: commonMedia.containers[props.camera],
       onResize: commonMedia.onResize,
       cursorHandler,
       mediaController,
diff --git a/client/src/components/annotators/useMediaController.ts b/client/src/components/annotators/useMediaController.ts
index 323fba3d9..720c6d2d9 100644
--- a/client/src/components/annotators/useMediaController.ts
+++ b/client/src/components/annotators/useMediaController.ts
@@ -2,118 +2,203 @@
 /// <reference types="resize-observer-browser" />
 import geo from 'geojs';
 import {
-  ref, reactive, onMounted, onBeforeUnmount, provide, toRef, Ref,
+  ref, reactive, onMounted, onBeforeUnmount, provide, toRef, Ref, UnwrapRef,
 } from '@vue/composition-api';
 
 import { use } from '../../provides';
 import type { MediaController } from './mediaControllerType';
 
-const MediaControllerSymbol = Symbol('media-controller');
+const MediaControllerSymbols: Record<string, symbol> = { default: Symbol('media-controller') };
 
-export function injectMediaController() {
-  return use<MediaController>(MediaControllerSymbol);
+export function injectMediaController(camera = 'default') {
+  if (MediaControllerSymbols[camera] === undefined) {
+    throw new Error(`Camera ${camera} was not found in the media Controller Symbols`);
+  }
+  return use<MediaController>(MediaControllerSymbols[camera]);
+}
+
+interface MediaControllerReactiveData {
+  ready: boolean;
+  playing: boolean;
+  frame: number;
+  flick: number;
+  filename: string;
+  lockedCamera: boolean;
+  currentTime: number;
+  duration: number;
+  volume: number;
+  speed: number;
+  maxFrame: number;
+  syncedFrame: number;
+  observer: null;
+  cursor: string;
+  imageCursor: string;
+  originalBounds: {
+    left: number;
+    top: number;
+    right: number;
+    bottom: number;
+  };
 }
 
 export default function useMediaController() {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const geoViewerRef: Ref<any> = ref(undefined);
-  const containerRef: Ref<HTMLElement | undefined> = ref(undefined);
-  const imageCursorRef: Ref<HTMLElement | undefined> = ref(undefined);
+  const geoViewers: Record<string, Ref<any>> = { default: ref(undefined) };
+  const containers: Record<string, Ref<HTMLElement | undefined>> = { default: ref(undefined) };
+  const imageCursors: Record<string, Ref<HTMLElement | undefined>> = { default: ref(undefined) };
+  const cameras: [string] = ['default'];
+  const datas: Record<string, UnwrapRef<MediaControllerReactiveData>> = {
+    default: reactive({
+      ready: false,
+      playing: false,
+      frame: 0,
+      flick: 0,
+      filename: '',
+      lockedCamera: false,
+      currentTime: 0,
+      duration: 0,
+      volume: 0,
+      speed: 1.0,
+      maxFrame: 0,
+      syncedFrame: 0,
+      observer: null,
+      cursor: 'default',
+      imageCursor: '',
+      originalBounds: {
+        left: 0,
+        top: 0,
+        bottom: 1,
+        right: 1,
+      },
+    }),
+  };
 
-  const data = reactive({
-    ready: false,
-    playing: false,
-    frame: 0,
-    flick: 0,
-    filename: '',
-    lockedCamera: false,
-    currentTime: 0,
-    duration: 0,
-    volume: 0,
-    speed: 1.0,
-    maxFrame: 0,
-    syncedFrame: 0,
-    observer: null,
-    cursor: 'default',
-    imageCursor: '',
-    originalBounds: {
-      left: 0,
-      top: 0,
-      bottom: 1,
-      right: 1,
-    },
-  });
+  function addCamera(camera = 'default') {
+    geoViewers[camera] = ref(undefined);
+    containers[camera] = ref(undefined);
+    imageCursors[camera] = ref(undefined);
+    if (cameras.indexOf(camera) === -1) {
+      cameras.push(camera);
+    }
+    MediaControllerSymbols[camera] = Symbol(`media-controller-${camera}`);
+    datas[camera] = reactive({
+      ready: false,
+      playing: false,
+      frame: 0,
+      flick: 0,
+      filename: '',
+      lockedCamera: false,
+      currentTime: 0,
+      duration: 0,
+      volume: 0,
+      speed: 1.0,
+      maxFrame: 0,
+      syncedFrame: 0,
+      observer: null,
+      cursor: 'default',
+      imageCursor: '',
+      originalBounds: {
+        left: 0,
+        top: 0,
+        bottom: 1,
+        right: 1,
+      },
+    });
+  }
 
   function onResize() {
-    if (geoViewerRef.value === undefined || containerRef.value === undefined) {
-      return;
-    }
-    const size = containerRef.value.getBoundingClientRect();
-    const mapSize = geoViewerRef.value.size();
-    if (size.width !== mapSize.width || size.height !== mapSize.height) {
-      window.requestAnimationFrame(() => {
-        geoViewerRef.value.size(size);
-      });
-    }
+    cameras.forEach((camera) => {
+      const geoViewerRef = geoViewers[camera];
+      const containerRef = containers[camera];
+      if (geoViewerRef.value === undefined || containerRef.value === undefined) {
+        return;
+      }
+      const size = containerRef.value.getBoundingClientRect();
+      const mapSize = geoViewerRef.value.size();
+      if (size.width !== mapSize.width || size.height !== mapSize.height) {
+        window.requestAnimationFrame(() => {
+          geoViewerRef.value.size(size);
+        });
+      }
+    });
   }
 
   function resetZoom() {
-    const zoomAndCenter = geoViewerRef.value.zoomAndCenterFromBounds(
-      data.originalBounds, 0,
-    );
-    geoViewerRef.value.zoom(zoomAndCenter.zoom);
-    geoViewerRef.value.center(zoomAndCenter.center);
+    cameras.forEach((camera) => {
+      const geoViewerRef = geoViewers[camera];
+      const data = datas[camera];
+      const zoomAndCenter = geoViewerRef.value.zoomAndCenterFromBounds(
+        data.originalBounds, 0,
+      );
+      geoViewerRef.value.zoom(zoomAndCenter.zoom);
+      geoViewerRef.value.center(zoomAndCenter.center);
+    });
   }
 
   function toggleLockedCamera() {
-    data.lockedCamera = !data.lockedCamera;
+    cameras.forEach((camera) => {
+      const data = datas[camera];
+      data.lockedCamera = !data.lockedCamera;
+    });
   }
 
   function resetMapDimensions(width: number, height: number, margin = 0.3) {
-    geoViewerRef.value.bounds({
-      left: 0,
-      top: 0,
-      bottom: height,
-      right: width,
-    });
-    const params = geo.util.pixelCoordinateParams(
-      containerRef.value, width, height, width, height,
-    );
-    const { right, bottom } = params.map.maxBounds;
-    data.originalBounds = params.map.maxBounds;
-    geoViewerRef.value.maxBounds({
-      left: 0 - (right * margin),
-      top: 0 - (bottom * margin),
-      right: right * (1 + margin),
-      bottom: bottom * (1 + margin),
-    });
-    geoViewerRef.value.zoomRange({
+    cameras.forEach((camera) => {
+      const geoViewerRef = geoViewers[camera];
+      const containerRef = containers[camera];
+      const data = datas[camera];
+      geoViewerRef.value.bounds({
+        left: 0,
+        top: 0,
+        bottom: height,
+        right: width,
+      });
+      const params = geo.util.pixelCoordinateParams(
+        containerRef.value, width, height, width, height,
+      );
+      const { right, bottom } = params.map.maxBounds;
+      data.originalBounds = params.map.maxBounds;
+      geoViewerRef.value.maxBounds({
+        left: 0 - (right * margin),
+        top: 0 - (bottom * margin),
+        right: right * (1 + margin),
+        bottom: bottom * (1 + margin),
+      });
+      geoViewerRef.value.zoomRange({
       // do not set a min limit so that bounds clamping determines min
-      min: -Infinity,
-      // 4x zoom max
-      max: 4,
+        min: -Infinity,
+        // 4x zoom max
+        max: 4,
+      });
+      geoViewerRef.value.clampBoundsX(true);
+      geoViewerRef.value.clampBoundsY(true);
+      geoViewerRef.value.clampZoom(true);
+      resetZoom();
     });
-    geoViewerRef.value.clampBoundsX(true);
-    geoViewerRef.value.clampBoundsY(true);
-    geoViewerRef.value.clampZoom(true);
-    resetZoom();
   }
 
   let observer: ResizeObserver | null = null;
   onMounted(() => {
-    if (containerRef.value) {
-      observer = new ResizeObserver(onResize);
-      observer.observe(containerRef.value);
-    } else {
-      throw new Error('Container was missing, could not register observer');
-    }
+    cameras.forEach((camera) => {
+      const containerRef = containers[camera].value;
+      if (containerRef) {
+        observer = new ResizeObserver(onResize);
+        observer.observe(containerRef);
+      } else {
+        throw new Error('Container was missing, could not register observer');
+      }
+    });
   });
   onBeforeUnmount(() => {
-    if (containerRef.value && observer !== null) {
-      observer.unobserve(containerRef.value);
-    } else {
-      throw new Error('Container or observer was missing');
-    }
+    cameras.forEach((camera) => {
+      const containerRef = containers[camera].value;
+
+      if (containerRef && observer !== null) {
+        observer.unobserve(containerRef);
+      } else {
+        throw new Error('Container or observer was missing');
+      }
+    });
   });
 
   /**
@@ -121,7 +206,7 @@ export default function useMediaController() {
    * chicken-and-egg problem, allowing the function consumer to use
    * the state above to construct the dependencies for the methods below.
    */
-  function initialize({
+  function initialize(camera = ' default', {
     seek, play, pause, setVolume, setSpeed,
   }: {
     seek(frame: number): void;
@@ -131,24 +216,24 @@ export default function useMediaController() {
     setSpeed(level: number): void;
   }) {
     function setCursor(newCursor: string) {
-      data.cursor = `${newCursor}`;
+      datas[camera].cursor = `${newCursor}`;
     }
 
     function setImageCursor(newCursor: string) {
-      data.imageCursor = `${newCursor}`;
+      datas[camera].imageCursor = `${newCursor}`;
     }
 
     function centerOn(coords: { x: number; y: number; z: number }) {
-      geoViewerRef.value.center(coords);
+      geoViewers[camera].value.center(coords);
     }
 
     function initializeViewer(width: number, height: number) {
       const params = geo.util.pixelCoordinateParams(
-        containerRef.value, width, height, width, height,
+        containers[camera].value, width, height, width, height,
       );
-      geoViewerRef.value = geo.map(params.map);
+      geoViewers[camera].value = geo.map(params.map);
       resetMapDimensions(width, height);
-      const interactorOpts = geoViewerRef.value.interactor().options();
+      const interactorOpts = geoViewers[camera].value.interactor().options();
       interactorOpts.keyboard.focusHighlight = false;
       interactorOpts.keyboard.actions = {};
       interactorOpts.click.cancelOnMove = 5;
@@ -188,23 +273,25 @@ export default function useMediaController() {
         enabled: false,
       };
       interactorOpts.wheelScaleY = 0.2;
-      geoViewerRef.value.interactor().options(interactorOpts);
+      geoViewers[camera].value.interactor().options(interactorOpts);
     }
 
     function prevFrame() {
-      const targetFrame = data.frame - 1;
+      const targetFrame = datas[camera].frame - 1;
       if (targetFrame >= 0) {
         seek(targetFrame);
       }
     }
 
     function nextFrame() {
-      const targetFrame = data.frame + 1;
-      if (targetFrame <= data.maxFrame) {
+      const targetFrame = datas[camera].frame + 1;
+      if (targetFrame <= datas[camera].maxFrame) {
         seek(targetFrame);
       }
     }
 
+    const imageCursorRef = imageCursors[camera];
+
     const cursorHandler = {
       handleMouseLeave() {
         if (imageCursorRef.value) {
@@ -228,18 +315,18 @@ export default function useMediaController() {
     };
 
     const mediaController: MediaController = {
-      geoViewerRef,
-      currentTime: toRef(data, 'currentTime'),
-      playing: toRef(data, 'playing'),
-      frame: toRef(data, 'frame'),
-      flick: toRef(data, 'flick'),
-      filename: toRef(data, 'filename'),
-      lockedCamera: toRef(data, 'lockedCamera'),
-      duration: toRef(data, 'duration'),
-      volume: toRef(data, 'volume'),
-      maxFrame: toRef(data, 'maxFrame'),
-      speed: toRef(data, 'speed'),
-      syncedFrame: toRef(data, 'syncedFrame'),
+      geoViewerRef: geoViewers[camera],
+      currentTime: toRef(datas[camera], 'currentTime'),
+      playing: toRef(datas[camera], 'playing'),
+      frame: toRef(datas[camera], 'frame'),
+      flick: toRef(datas[camera], 'flick'),
+      filename: toRef(datas[camera], 'filename'),
+      lockedCamera: toRef(datas[camera], 'lockedCamera'),
+      duration: toRef(datas[camera], 'duration'),
+      volume: toRef(datas[camera], 'volume'),
+      maxFrame: toRef(datas[camera], 'maxFrame'),
+      speed: toRef(datas[camera], 'speed'),
+      syncedFrame: toRef(datas[camera], 'syncedFrame'),
       prevFrame,
       nextFrame,
       play,
@@ -254,7 +341,7 @@ export default function useMediaController() {
       setSpeed,
     };
 
-    provide(MediaControllerSymbol, mediaController);
+    provide(MediaControllerSymbols[camera], mediaController);
 
     return {
       cursorHandler,
@@ -264,12 +351,13 @@ export default function useMediaController() {
   }
 
   return {
-    containerRef,
-    data,
-    geoViewerRef,
-    imageCursorRef,
+    containers,
+    datas,
+    geoViewers,
+    imageCursors,
     initialize,
     onResize,
     resetMapDimensions,
+    addCamera,
   };
 }

From f316d48ac60797486994283bd3e52b16200316dd Mon Sep 17 00:00:00 2001
From: Bryon Lewis <Bryon.Lewis@kitware.com>
Date: Thu, 20 Jan 2022 13:01:02 -0500
Subject: [PATCH 04/22] some basic loading working

---
 .../components/ControlsContainer.vue          |  22 ++--
 client/dive-common/components/Viewer.vue      |  29 +++--
 client/dive-common/use/useModeManager.ts      |  20 ++--
 client/src/components/LayerManager.vue        |   6 +-
 .../annotators/AnnotatorWrapper.vue           | 112 +++++++++++-------
 .../src/components/annotators/annotator.scss  |  21 +++-
 .../annotators/mediaControllerType.ts         |  22 ++++
 .../annotators/subMediaController.ts          |   0
 .../annotators/useMediaController.ts          |  11 +-
 client/src/components/controls/Controls.vue   |  17 ++-
 .../controls/FileNameTimeDisplay.vue          |  17 ++-
 11 files changed, 193 insertions(+), 84 deletions(-)
 delete mode 100644 client/src/components/annotators/subMediaController.ts

diff --git a/client/dive-common/components/ControlsContainer.vue b/client/dive-common/components/ControlsContainer.vue
index 0edab8f44..1541fdfb3 100644
--- a/client/dive-common/components/ControlsContainer.vue
+++ b/client/dive-common/components/ControlsContainer.vue
@@ -1,17 +1,16 @@
 <script lang="ts">
 import {
-  defineComponent, ref, PropType,
+  defineComponent, ref, PropType, Ref,
 } from '@vue/composition-api';
 import type { DatasetType } from 'dive-common/apispec';
 import FileNameTimeDisplay from 'vue-media-annotator/components/controls/FileNameTimeDisplay.vue';
-import { injectMediaController } from 'vue-media-annotator/components/annotators/useMediaController';
 import {
   Controls,
   EventChart,
   LineChart,
   Timeline,
 } from 'vue-media-annotator/components';
-
+import { MediaControlAggregator } from 'vue-media-annotator/components/annotators/mediaControllerType';
 
 export default defineComponent({
   components: {
@@ -21,7 +20,6 @@ export default defineComponent({
     LineChart,
     Timeline,
   },
-
   props: {
     lineChartData: {
       type: Array as PropType<unknown[]>,
@@ -35,9 +33,13 @@ export default defineComponent({
       type: String as PropType<DatasetType>,
       required: true,
     },
+    mediaControls: {
+      type: Object as PropType<MediaControlAggregator>,
+      required: true,
+    },
   },
 
-  setup() {
+  setup(props) {
     const currentView = ref('Detections');
     const collapsed = ref(false);
 
@@ -53,7 +55,7 @@ export default defineComponent({
     }
     const {
       maxFrame, frame, seek, volume, setVolume, setSpeed, speed,
-    } = injectMediaController();
+    } = props.mediaControls;
 
     return {
       currentView,
@@ -73,8 +75,8 @@ export default defineComponent({
 </script>
 
 <template>
-  <div>
-    <Controls>
+  <v-col style="position:absolute; bottom: 0px; padding: 0px; margin:0px;">
+    <Controls :media-controls="mediaControls">
       <template slot="timelineControls">
         <div style="min-width: 210px">
           <v-tooltip
@@ -121,6 +123,8 @@ export default defineComponent({
           v-if="datasetType === 'image-sequence'"
           class="text-middle px-3"
           display-type="filename"
+          :media-controls="mediaControls"
+          camera="default"
         />
         <span v-else-if="datasetType === 'video'">
           <span class="mr-2">
@@ -261,7 +265,7 @@ export default defineComponent({
         />
       </template>
     </Timeline>
-  </div>
+  </v-col>
 </template>
 
 <style lang="scss" scoped>
diff --git a/client/dive-common/components/Viewer.vue b/client/dive-common/components/Viewer.vue
index fcdef96b8..0a68b2f27 100644
--- a/client/dive-common/components/Viewer.vue
+++ b/client/dive-common/components/Viewer.vue
@@ -24,7 +24,7 @@ import {
   LayerManager,
   AnnotatorWrapper,
 } from 'vue-media-annotator/components';
-import { MediaController } from 'vue-media-annotator/components/annotators/mediaControllerType';
+import { MediaControlAggregator } from 'vue-media-annotator/components/annotators/mediaControllerType';
 
 /* DIVE COMMON */
 import PolygonBase from 'dive-common/recipes/polygonbase';
@@ -85,15 +85,15 @@ export default defineComponent({
     const playbackComponent = ref(undefined as Vue | undefined);
     const readonlyState = computed(() => props.readonlyMode || props.revision !== undefined);
     const mediaController = computed(() => {
+    const mediaControlAggregator = computed(() => {
       if (playbackComponent.value) {
-        console.log(playbackComponent.value);
         // TODO: Bug in composition-api types incorrectly organizes the static members of a Vue
         // instance when using typeof ImageAnnotator, so we can't use the "real" type here
         // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
         // @ts-ignore
-        return playbackComponent.value.mediaController as MediaController;
+        return playbackComponent.value.mediaControlAggregator as MediaControlAggregator;
       }
-      return {} as MediaController;
+      return {} as MediaControlAggregator;
     });
     const { time, updateTime, initialize: initTime } = useTimeObserver();
     const imageData = ref({ default: [] } as Record<string, FrameImage[]>);
@@ -206,7 +206,7 @@ export default defineComponent({
       selectedTrackId,
       editingTrack,
       trackMap,
-      mediaController,
+      mediaControlAggregator,
       selectTrack,
       selectNextTrack,
       addTrack,
@@ -351,6 +351,7 @@ export default defineComponent({
         datasetType.value = meta.type as DatasetType;
 
         const trackData = await loadDetections(datasetId.value, props.revision);
+        const trackData = await loadDetections(datasetId.value);
         const tracks = Object.values(trackData);
         progress.total = tracks.length;
         for (let i = 0; i < tracks.length; i += 1) {
@@ -362,6 +363,16 @@ export default defineComponent({
           }
           insertTrack(Track.fromJSON(tracks[i]), { imported: true });
         }
+        // Load non-Default Cameras if they exist:
+        const filteredMultiCamList = multiCamList.value.filter((item) => item !== 'default');
+        for (let i = 0; i < filteredMultiCamList.length; i += 1) {
+          const camera = filteredMultiCamList[i];
+          // eslint-disable-next-line no-await-in-loop
+          const subCameraMeta = await loadMetadata(`${baseMulticamDatasetId.value}/${camera}`);
+          imageData.value[camera] = cloneDeep(subCameraMeta.imageData) as FrameImage[];
+          videoUrl.value[camera] = subCameraMeta.videoUrl || null;
+        }
+
         progress.loaded = true;
       } catch (err) {
         progress.loaded = false;
@@ -448,7 +459,7 @@ export default defineComponent({
       imageData,
       lineChartData,
       loadError,
-      mediaController,
+      mediaControlAggregator,
       mergeMode: mergeInProgress,
       pendingSaveCount,
       progress,
@@ -572,6 +583,7 @@ export default defineComponent({
     >
       <sidebar
         :enable-slot="context.state.active !== 'TypeThreshold'"
+        class="fill-height"
         @import-types="importTypes($event)"
         @track-seek="mediaController.seek($event)"
       >
@@ -600,11 +612,12 @@ export default defineComponent({
           v-bind="{
             imageData, videoUrl, updateTime,
             frameRate, originalFps, datasetType, progress }"
-          class="playback-component"
         >
           <template slot="control">
             <controls-container
-              v-bind="{ lineChartData, eventChartData, datasetType }"
+              v-if="mediaControlAggregator.maxFrame"
+              v-bind="{ lineChartData, eventChartData,
+                        datasetType, mediaControls:mediaControlAggregator }"
               @select-track="handler.trackSelect"
             />
           </template>
diff --git a/client/dive-common/use/useModeManager.ts b/client/dive-common/use/useModeManager.ts
index 62277f84d..0b0ea8978 100644
--- a/client/dive-common/use/useModeManager.ts
+++ b/client/dive-common/use/useModeManager.ts
@@ -6,7 +6,7 @@ import Track, { TrackId } from 'vue-media-annotator/track';
 import { getTrack } from 'vue-media-annotator/use/useTrackStore';
 import { RectBounds, updateBounds } from 'vue-media-annotator/utils';
 import { EditAnnotationTypes, VisibleAnnotationTypes } from 'vue-media-annotator/layers';
-import { MediaController } from 'vue-media-annotator/components/annotators/mediaControllerType';
+import { MediaControlAggregator } from 'vue-media-annotator/components/annotators/mediaControllerType';
 
 import Recipe from 'vue-media-annotator/recipe';
 import { usePrompt } from 'dive-common/vue-utilities/prompt-service';
@@ -31,7 +31,7 @@ export default function useModeManager({
   selectedTrackId,
   editingTrack,
   trackMap,
-  mediaController,
+  mediaControlAggregator,
   recipes,
   selectTrack,
   selectNextTrack,
@@ -41,7 +41,7 @@ export default function useModeManager({
   selectedTrackId: Ref<TrackId | null>;
   editingTrack: Ref<boolean>;
   trackMap: Map<TrackId, Track>;
-  mediaController: Ref<MediaController>;
+  mediaControlAggregator: Ref<MediaControlAggregator>;
   recipes: Recipe[];
   selectTrack: (trackId: TrackId | null, edit: boolean) => void;
   selectNextTrack: (delta?: number) => TrackId | null;
@@ -121,11 +121,11 @@ export default function useModeManager({
 
   function seekNearest(track: Track) {
     // Seek to the nearest point in the track.
-    const { frame } = mediaController.value;
+    const { frame } = mediaControlAggregator.value;
     if (frame.value < track.begin) {
-      mediaController.value.seek(track.begin);
+      mediaControlAggregator.value.seek(track.begin);
     } else if (frame.value > track.end) {
-      mediaController.value.seek(track.end);
+      mediaControlAggregator.value.seek(track.end);
     }
   }
 
@@ -183,7 +183,7 @@ export default function useModeManager({
 
   function handleAddTrackOrDetection(): TrackId {
     // Handles adding a new track with the NewTrack Settings
-    const { frame } = mediaController.value;
+    const { frame } = mediaControlAggregator.value;
     const newTrackId = addTrack(
       frame.value, trackSettings.value.newTrackSettings.type,
       selectedTrackId.value || undefined,
@@ -207,7 +207,7 @@ export default function useModeManager({
         if (trackSettings.value.newTrackSettings.mode === 'Track'
         && trackSettings.value.newTrackSettings.modeSettings.Track.autoAdvanceFrame
         ) {
-          mediaController.value.nextFrame();
+          mediaControlAggregator.value.nextFrame();
           newCreatingValue = true;
         } else if (trackSettings.value.newTrackSettings.mode === 'Detection') {
           if (
@@ -369,7 +369,7 @@ export default function useModeManager({
       if (track) {
         recipes.forEach((r) => {
           if (r.active.value) {
-            const { frame } = mediaController.value;
+            const { frame } = mediaControlAggregator.value;
             r.deletePoint(
               frame.value,
               track,
@@ -389,7 +389,7 @@ export default function useModeManager({
     if (selectedTrackId.value !== null) {
       const track = trackMap.get(selectedTrackId.value);
       if (track) {
-        const { frame } = mediaController.value;
+        const { frame } = mediaControlAggregator.value;
         recipes.forEach((r) => {
           if (r.active.value) {
             r.delete(frame.value, track, selectedKey.value, annotationModes.editing);
diff --git a/client/src/components/LayerManager.vue b/client/src/components/LayerManager.vue
index f9855efee..7f8a3080b 100644
--- a/client/src/components/LayerManager.vue
+++ b/client/src/components/LayerManager.vue
@@ -46,6 +46,10 @@ export default defineComponent({
       type: Function as PropType<FormatTextRow | undefined>,
       default: undefined,
     },
+    camera: {
+      type: String,
+      default: 'default',
+    },
   },
   setup(props) {
     const handler = useHandler();
@@ -61,7 +65,7 @@ export default defineComponent({
     const stateStyling = useStateStyles();
     const annotatorPrefs = useAnnotatorPreferences();
 
-    const annotator = injectMediaController();
+    const annotator = injectMediaController(props.camera);
     const frameNumberRef = annotator.frame;
     const flickNumberRef = annotator.flick;
 
diff --git a/client/src/components/annotators/AnnotatorWrapper.vue b/client/src/components/annotators/AnnotatorWrapper.vue
index 2a73fb2c3..674a0d702 100644
--- a/client/src/components/annotators/AnnotatorWrapper.vue
+++ b/client/src/components/annotators/AnnotatorWrapper.vue
@@ -1,14 +1,15 @@
 <script lang="ts">
 import {
   computed,
-  defineComponent, onMounted, PropType, ref,
+  defineComponent, onMounted, PropType, Ref, ref,
 } from '@vue/composition-api';
 import { DatasetType } from 'dive-common/apispec';
 import ImageAnnotator from './ImageAnnotator.vue';
 import VideoAnnotator from './VideoAnnotator.vue';
 import LayerManager from '../LayerManager.vue';
 import { SetTimeFunc } from '../../use/useTimeObserver';
-import { MediaController } from './mediaControllerType';
+import { MediaControlAggregator, MediaController } from './mediaControllerType';
+import useMediaController from './useMediaController';
 
 export interface ImageDataItem {
   url: string;
@@ -81,69 +82,94 @@ export default defineComponent({
   },
 
   setup(props) {
-    // We
-    console.log(props.imageData);
-    console.log(props.cameras);
     const subPlaybackComponent = ref(undefined as Vue[] | undefined);
-    const mediaController = computed(() => {
-      if (subPlaybackComponent.value) {
-        if (subPlaybackComponent.value?.length >= 1) {
-          console.log(subPlaybackComponent.value);
-          // TODO: Bug in composition-api types incorrectly organizes the static members of a Vue
-          // instance when using typeof ImageAnnotator, so we can't use the "real" type here
-          // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-          // @ts-ignore
+    const mediaControlAggregator = computed(() => {
+      if (subPlaybackComponent.value && subPlaybackComponent.value?.length >= 1) {
+        // TODO: Bug in composition-api types incorrectly organizes the static members of a Vue
+        // instance when using typeof ImageAnnotator, so we can't use the "real" type here
+        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+        // @ts-ignore
+
+        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+        // @ts-ignore
+        // eslint-disable-next-line max-len
+        const controllers: MediaController[] = subPlaybackComponent.value?.map((item) => item.mediaController as MediaController);
+        const aggregateController: MediaControlAggregator = {
+          maxFrame: controllers[0].maxFrame,
+          frame: controllers[0].frame,
+          seek: (frame: number) => controllers.forEach((item) => item.seek(frame)),
+          volume: controllers[0].volume,
+          setVolume: (volume: number) => controllers.forEach((item) => item.setVolume(volume)),
+          speed: controllers[0].speed,
+          setSpeed: (speed: number) => controllers.forEach((item) => item.setSpeed(speed)),
+          lockedCamera: controllers[0].lockedCamera,
+          toggleLockedCamera: () => controllers.forEach((item) => item.toggleLockedCamera()),
+          pause: () => controllers.forEach((item) => item.pause()),
+          play: () => controllers.forEach((item) => item.play()),
+          playing: controllers[0].playing,
+          nextFrame: () => controllers.forEach((item) => item.nextFrame()),
+          prevFrame: () => controllers.forEach((item) => item.prevFrame()),
+          resetZoom: () => controllers.forEach((item) => item.resetZoom()),
+          // eslint-disable-next-line max-len
+          duration: computed(() => controllers.reduce((acc, item) => ({ ...acc, [item.camera.value]: item.duration.value }), {})),
+          // eslint-disable-next-line max-len
+          currentTime: computed(() => controllers.reduce((acc, item) => ({ ...acc, [item.camera.value]: item.currentTime.value }), {})),
+          // eslint-disable-next-line max-len
+          filename: computed(() => controllers.reduce((acc, item) => ({ ...acc, [item.camera.value]: item.filename.value }), {})),
+
+        };
+        return aggregateController;
+      }
+      return {} as MediaControlAggregator;
+    });
 
-        //In this case we need to collate all sub mediaControllers into one
-        }
+    const onResize = computed(() => {
+      if (subPlaybackComponent.value && subPlaybackComponent.value?.length >= 1) {
         // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
         // @ts-ignore
-        return subPlaybackComponent.value[0].mediaController as MediaController;
+        return (subPlaybackComponent.value[0].onResize as () => void);
       }
-      return {} as MediaController;
+      return null;
     });
 
 
     return {
       subPlaybackComponent,
-      mediaController,
+      mediaControlAggregator,
+      onResize,
     };
   },
 });
 </script>
 
 <template>
-  <div>
-    <v-row>
-      <div
+  <span class="playback-component annotation-wrapper fill-height">
+    <v-row dense class="fill-height">
+      <v-col
         v-for="camera in cameras"
         :key="camera"
+        style="padding: 0px; margin:0px;"
       >
-        <div
+        <component
+          :is="datasetType === 'image-sequence' ? 'image-annotator' : 'video-annotator'"
           v-if="(imageData[camera].length || videoUrl[camera]) && progress.loaded"
+          ref="subPlaybackComponent"
+          v-bind="{
+            imageData: imageData[camera], videoUrl: videoUrl[camera],
+            updateTime, frameRate, originalFps, loadImageFunc, camera }"
         >
-          <component
-            :is="datasetType === 'image-sequence' ? 'image-annotator' : 'video-annotator'"
-            ref="subPlaybackComponent"
-            v-bind="{
-              imageData: imageData[camera], videoUrl: videoUrl[camera],
-              updateTime, frameRate, originalFps, loadImageFunc, camera }"
-            class="playback-component"
-          >
-            <layer-manager
-              :camera="camera"
-            />
-            <slot
-              v-if="mediaController.frame"
-              ref="control"
-              name="control"
-              @resize="onResize"
-            />
-          </component>
-        </div>
-      </div>
+          <layer-manager
+            :camera="camera"
+          />
+        </component>
+      </v-col>
     </v-row>
-  </div>
+    <slot
+      ref="control"
+      name="control"
+      @resize="onResize"
+    />
+  </span>
 </template>
 
 <style lang="scss" scoped>
diff --git a/client/src/components/annotators/annotator.scss b/client/src/components/annotators/annotator.scss
index a567725e2..50c379077 100644
--- a/client/src/components/annotators/annotator.scss
+++ b/client/src/components/annotators/annotator.scss
@@ -1,5 +1,21 @@
-.video-annotator {
+.annotator-wrapper {
+  position: relative;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  z-index: 0;
+  display: flex;
+  flex-direction: column;
+
+}
+
+.controls {
   position: absolute;
+}
+
+.video-annotator {
+  position: relative;
   left: 0;
   right: 0;
   top: 0;
@@ -37,4 +53,7 @@
   left: 0;
   pointer-events: none;
 }
+.controls {
+  bottom:0;
+}
 
diff --git a/client/src/components/annotators/mediaControllerType.ts b/client/src/components/annotators/mediaControllerType.ts
index 2a081b920..301223713 100644
--- a/client/src/components/annotators/mediaControllerType.ts
+++ b/client/src/components/annotators/mediaControllerType.ts
@@ -7,6 +7,7 @@ import type { Ref } from '@vue/composition-api';
  * See components/annotators/README.md for docs.
  */
 export interface MediaController {
+  camera: Readonly<Ref<string>>;
   currentTime: Readonly<Ref<number>>;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   geoViewerRef: Readonly<Ref<any>>;
@@ -34,3 +35,24 @@ export interface MediaController {
   setVolume(v: number): void;
   setSpeed(v: number): void;
 }
+
+export interface MediaControlAggregator {
+  maxFrame: Ref<number>;
+   frame: Ref<number>;
+   seek: (frame: number) => void;
+   volume: Ref<number>;
+   setVolume: (volume: number) => void;
+   speed: Ref<number>;
+   setSpeed: (speed: number) => void;
+   lockedCamera: Ref<boolean>;
+   toggleLockedCamera: (lock: boolean) => void;
+   pause: () => void;
+   play: () => void;
+   playing: Ref<boolean>;
+   nextFrame: () => void;
+   prevFrame: () => void;
+   resetZoom: () => void;
+   duration: Ref<Record<string, number>>;
+   filename: Ref<Record<string, string>>;
+   currentTime: Ref<Record<string, number>>;
+}
diff --git a/client/src/components/annotators/subMediaController.ts b/client/src/components/annotators/subMediaController.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/client/src/components/annotators/useMediaController.ts b/client/src/components/annotators/useMediaController.ts
index 720c6d2d9..bfb1d3173 100644
--- a/client/src/components/annotators/useMediaController.ts
+++ b/client/src/components/annotators/useMediaController.ts
@@ -8,7 +8,7 @@ import {
 import { use } from '../../provides';
 import type { MediaController } from './mediaControllerType';
 
-const MediaControllerSymbols: Record<string, symbol> = { default: Symbol('media-controller') };
+const MediaControllerSymbols: Record<string, symbol> = {};
 
 export function injectMediaController(camera = 'default') {
   if (MediaControllerSymbols[camera] === undefined) {
@@ -46,7 +46,7 @@ export default function useMediaController() {
   const geoViewers: Record<string, Ref<any>> = { default: ref(undefined) };
   const containers: Record<string, Ref<HTMLElement | undefined>> = { default: ref(undefined) };
   const imageCursors: Record<string, Ref<HTMLElement | undefined>> = { default: ref(undefined) };
-  const cameras: [string] = ['default'];
+  const cameras: string[] = [];
   const datas: Record<string, UnwrapRef<MediaControllerReactiveData>> = {
     default: reactive({
       ready: false,
@@ -185,7 +185,8 @@ export default function useMediaController() {
         observer = new ResizeObserver(onResize);
         observer.observe(containerRef);
       } else {
-        throw new Error('Container was missing, could not register observer');
+        console.log(containers);
+        throw new Error(`Container ${camera} was missing, could not register observer`);
       }
     });
   });
@@ -196,7 +197,8 @@ export default function useMediaController() {
       if (containerRef && observer !== null) {
         observer.unobserve(containerRef);
       } else {
-        throw new Error('Container or observer was missing');
+        console.log(containers);
+        throw new Error(`Container ${camera} or observer was missing`);
       }
     });
   });
@@ -315,6 +317,7 @@ export default function useMediaController() {
     };
 
     const mediaController: MediaController = {
+      camera: ref(camera),
       geoViewerRef: geoViewers[camera],
       currentTime: toRef(datas[camera], 'currentTime'),
       playing: toRef(datas[camera], 'playing'),
diff --git a/client/src/components/controls/Controls.vue b/client/src/components/controls/Controls.vue
index aa0ed6d42..0fbd14ffd 100644
--- a/client/src/components/controls/Controls.vue
+++ b/client/src/components/controls/Controls.vue
@@ -1,20 +1,27 @@
 <script lang="ts">
-import { defineComponent, reactive, watch } from '@vue/composition-api';
+import {
+  defineComponent, reactive, watch, PropType,
+} from '@vue/composition-api';
 import { usePrompt } from 'dive-common/vue-utilities/prompt-service';
-import { injectMediaController } from '../annotators/useMediaController';
+import { MediaControlAggregator } from '../annotators/mediaControllerType';
 
 export default defineComponent({
   name: 'Control',
 
-  setup() {
+  props: {
+    mediaControls: {
+      type: Object as PropType<MediaControlAggregator>,
+      required: true,
+    },
+  },
+  setup(props) {
     const data = reactive({
       frame: 0,
       dragging: false,
     });
 
-    const mediaController = injectMediaController();
+    const mediaController = props.mediaControls;
     const { visible } = usePrompt();
-
     watch(mediaController.frame, (frame) => {
       if (!data.dragging) {
         data.frame = frame;
diff --git a/client/src/components/controls/FileNameTimeDisplay.vue b/client/src/components/controls/FileNameTimeDisplay.vue
index 78b853c5b..c23c24e4e 100644
--- a/client/src/components/controls/FileNameTimeDisplay.vue
+++ b/client/src/components/controls/FileNameTimeDisplay.vue
@@ -1,6 +1,6 @@
 <script lang="ts">
 import { computed, defineComponent, PropType } from '@vue/composition-api';
-import { injectMediaController } from '../annotators/useMediaController';
+import { MediaControlAggregator } from '../annotators/mediaControllerType';
 
 export default defineComponent({
   name: 'FileNameTimeDisplay',
@@ -9,11 +9,22 @@ export default defineComponent({
       type: String as PropType<'filename' |'time'>,
       required: true,
     },
+    mediaControls: {
+      type: Object as PropType<MediaControlAggregator>,
+      required: true,
+    },
+    camera: {
+      type: String,
+      default: 'default',
+    },
   },
   setup(props) {
     const {
-      currentTime, duration, filename, frame,
-    } = injectMediaController();
+      currentTime: currentTimes, duration: durations, filename: filenames, frame,
+    } = props.mediaControls;
+    const filename = computed(() => filenames.value[props.camera]);
+    const duration = computed(() => durations.value[props.camera]);
+    const currentTime = computed(() => currentTimes.value[props.camera]);
     const display = computed(() => {
       let value = 'unsupported display';
       if (props.displayType === 'filename') {

From 403feb1476fb4d1c2cb38073bdeaf6794acb7e97 Mon Sep 17 00:00:00 2001
From: Bryon Lewis <Bryon.Lewis@kitware.com>
Date: Mon, 24 Jan 2022 16:12:56 -0500
Subject: [PATCH 05/22] fixing some css

---
 .../components/ControlsContainer.vue          |  2 +-
 client/dive-common/components/Viewer.vue      |  5 ++-
 .../annotators/AnnotatorWrapper.vue           | 33 +++++++++++++++----
 .../src/components/annotators/annotator.scss  |  1 -
 4 files changed, 31 insertions(+), 10 deletions(-)

diff --git a/client/dive-common/components/ControlsContainer.vue b/client/dive-common/components/ControlsContainer.vue
index 1541fdfb3..1ba8c19cd 100644
--- a/client/dive-common/components/ControlsContainer.vue
+++ b/client/dive-common/components/ControlsContainer.vue
@@ -75,7 +75,7 @@ export default defineComponent({
 </script>
 
 <template>
-  <v-col style="position:absolute; bottom: 0px; padding: 0px; margin:0px;">
+  <v-col dense style="position:absolute; bottom: 0px; padding: 0px; margin:0px;">
     <Controls :media-controls="mediaControls">
       <template slot="timelineControls">
         <div style="min-width: 210px">
diff --git a/client/dive-common/components/Viewer.vue b/client/dive-common/components/Viewer.vue
index 0a68b2f27..9d65903fe 100644
--- a/client/dive-common/components/Viewer.vue
+++ b/client/dive-common/components/Viewer.vue
@@ -603,7 +603,10 @@ export default defineComponent({
           </ConfidenceFilter>
         </template>
       </sidebar>
-      <v-col style="position: relative">
+      <v-col
+        style="position: relative; margin: 0px, padding: 0px"
+        dense
+      >
         <annotator-wrapper
           v-if="progress.loaded"
           ref="playbackComponent"
diff --git a/client/src/components/annotators/AnnotatorWrapper.vue b/client/src/components/annotators/AnnotatorWrapper.vue
index 674a0d702..f11347d1f 100644
--- a/client/src/components/annotators/AnnotatorWrapper.vue
+++ b/client/src/components/annotators/AnnotatorWrapper.vue
@@ -83,6 +83,7 @@ export default defineComponent({
 
   setup(props) {
     const subPlaybackComponent = ref(undefined as Vue[] | undefined);
+    const control = ref(undefined as HTMLElement | undefined);
     const mediaControlAggregator = computed(() => {
       if (subPlaybackComponent.value && subPlaybackComponent.value?.length >= 1) {
         // TODO: Bug in composition-api types incorrectly organizes the static members of a Vue
@@ -132,44 +133,62 @@ export default defineComponent({
       return null;
     });
 
+    const controlHeight = computed(() => {
+      if (control.value !== undefined && control.value.children.length) {
+        return control.value.children[0].clientHeight;
+      }
+      return 251;
+    });
+
 
     return {
       subPlaybackComponent,
       mediaControlAggregator,
       onResize,
+      control,
+      controlHeight,
     };
   },
 });
 </script>
 
 <template>
-  <span class="playback-component annotation-wrapper fill-height">
-    <v-row dense class="fill-height">
+  <v-col
+    class="playback-component annotation-wrapper fill-height pa-0"
+    dense
+  >
+    <v-row class="fill-height">
       <v-col
         v-for="camera in cameras"
         :key="camera"
         style="padding: 0px; margin:0px;"
+        class="fill-height"
       >
         <component
           :is="datasetType === 'image-sequence' ? 'image-annotator' : 'video-annotator'"
           v-if="(imageData[camera].length || videoUrl[camera]) && progress.loaded"
           ref="subPlaybackComponent"
+          class="fill-height"
           v-bind="{
             imageData: imageData[camera], videoUrl: videoUrl[camera],
             updateTime, frameRate, originalFps, loadImageFunc, camera }"
         >
           <layer-manager
+            :style="{'min-height':`${controlHeight}px`}"
             :camera="camera"
           />
         </component>
       </v-col>
     </v-row>
-    <slot
+    <span
       ref="control"
-      name="control"
-      @resize="onResize"
-    />
-  </span>
+    >
+      <slot
+        name="control"
+        @resize="onResize"
+      />
+    </span>
+  </v-col>
 </template>
 
 <style lang="scss" scoped>
diff --git a/client/src/components/annotators/annotator.scss b/client/src/components/annotators/annotator.scss
index 50c379077..ea7e22162 100644
--- a/client/src/components/annotators/annotator.scss
+++ b/client/src/components/annotators/annotator.scss
@@ -7,7 +7,6 @@
   z-index: 0;
   display: flex;
   flex-direction: column;
-
 }
 
 .controls {

From ba1ae4cb71aa09beb44d00c63a4ccf7598fc4fc7 Mon Sep 17 00:00:00 2001
From: Bryon Lewis <Bryon.Lewis@kitware.com>
Date: Tue, 25 Jan 2022 11:44:19 -0500
Subject: [PATCH 06/22] adding in multi-data-loading

---
 client/dive-common/components/Viewer.vue | 64 +++++++++++++++---------
 client/src/components/LayerManager.vue   | 10 +++-
 client/src/provides.ts                   | 10 ++++
 client/src/use/useTrackStore.ts          | 15 ++++--
 4 files changed, 70 insertions(+), 29 deletions(-)

diff --git a/client/dive-common/components/Viewer.vue b/client/dive-common/components/Viewer.vue
index 9d65903fe..0cba0e04c 100644
--- a/client/dive-common/components/Viewer.vue
+++ b/client/dive-common/components/Viewer.vue
@@ -149,10 +149,12 @@ export default defineComponent({
 
     const {
       trackMap,
+      camTrackMap,
       sortedTracks,
       intervalTree,
       addTrack,
       insertTrack,
+      addCamera,
       removeTrack,
       getNewTrackId,
       removeTrack: tsRemoveTrack,
@@ -346,31 +348,46 @@ export default defineComponent({
           frameRate: meta.fps,
           originalFps: meta.originalFps || null,
         });
-        imageData.value[currentCamera.value] = cloneDeep(meta.imageData) as FrameImage[];
-        videoUrl.value[currentCamera.value] = meta.videoUrl || null;
-        datasetType.value = meta.type as DatasetType;
-
-        const trackData = await loadDetections(datasetId.value, props.revision);
-        const trackData = await loadDetections(datasetId.value);
-        const tracks = Object.values(trackData);
-        progress.total = tracks.length;
-        for (let i = 0; i < tracks.length; i += 1) {
-          if (i % 4000 === 0) {
-          /* Every N tracks, yeild some cycles for other scheduled tasks */
-            progress.progress = i;
-            // eslint-disable-next-line no-await-in-loop
-            await new Promise((resolve) => window.setTimeout(resolve, 500));
-          }
-          insertTrack(Track.fromJSON(tracks[i]), { imported: true });
-        }
         // Load non-Default Cameras if they exist:
         const filteredMultiCamList = multiCamList.value.filter((item) => item !== 'default');
-        for (let i = 0; i < filteredMultiCamList.length; i += 1) {
-          const camera = filteredMultiCamList[i];
-          // eslint-disable-next-line no-await-in-loop
-          const subCameraMeta = await loadMetadata(`${baseMulticamDatasetId.value}/${camera}`);
-          imageData.value[camera] = cloneDeep(subCameraMeta.imageData) as FrameImage[];
-          videoUrl.value[camera] = subCameraMeta.videoUrl || null;
+        if (filteredMultiCamList.length === 0) {
+          imageData.value[currentCamera.value] = cloneDeep(meta.imageData) as FrameImage[];
+          videoUrl.value[currentCamera.value] = meta.videoUrl || null;
+          datasetType.value = meta.type as DatasetType;
+          const trackData = await loadDetections(datasetId.value);
+          const tracks = Object.values(trackData);
+          progress.total = tracks.length;
+          for (let i = 0; i < tracks.length; i += 1) {
+            if (i % 4000 === 0) {
+              /* Every N tracks, yeild some cycles for other scheduled tasks */
+              progress.progress = i;
+              // eslint-disable-next-line no-await-in-loop
+              await new Promise((resolve) => window.setTimeout(resolve, 500));
+            }
+            insertTrack(Track.fromJSON(tracks[i]), { imported: true });
+          }
+        } else {
+          for (let i = 0; i < filteredMultiCamList.length; i += 1) {
+            const camera = filteredMultiCamList[i];
+            // eslint-disable-next-line no-await-in-loop
+            const subCameraMeta = await loadMetadata(`${baseMulticamDatasetId.value}/${camera}`);
+            imageData.value[camera] = cloneDeep(subCameraMeta.imageData) as FrameImage[];
+            videoUrl.value[camera] = subCameraMeta.videoUrl || null;
+            addCamera(camera);
+            // eslint-disable-next-line no-await-in-loop
+            const camTrackData = await loadDetections(`${baseMulticamDatasetId.value}/${camera}`);
+            const camTracks = Object.values(camTrackData);
+            progress.total = camTracks.length;
+            for (let j = 0; j < camTracks.length; j += 1) {
+              if (j % 4000 === 0) {
+              /* Every N tracks, yeild some cycles for other scheduled tasks */
+                progress.progress = j;
+                // eslint-disable-next-line no-await-in-loop
+                await new Promise((resolve) => window.setTimeout(resolve, 500));
+              }
+              insertTrack(Track.fromJSON(camTracks[j]), { imported: true, cameraName: camera });
+            }
+          }
         }
 
         progress.loaded = true;
@@ -435,6 +452,7 @@ export default defineComponent({
         mergeList,
         pendingSaveCount,
         trackMap,
+        camTrackMap,
         filteredTracks,
         typeStyling,
         selectedKey,
diff --git a/client/src/components/LayerManager.vue b/client/src/components/LayerManager.vue
index 7f8a3080b..1204a8e41 100644
--- a/client/src/components/LayerManager.vue
+++ b/client/src/components/LayerManager.vue
@@ -33,6 +33,7 @@ import {
   useStateStyles,
   useMergeList,
   useAnnotatorPreferences,
+  useCamTrackMap,
 } from '../provides';
 
 /** LayerManager is a component intended to be used as a child of an Annotator.
@@ -54,7 +55,11 @@ export default defineComponent({
   setup(props) {
     const handler = useHandler();
     const intervalTree = useIntervalTree();
-    const trackMap = useTrackMap();
+    const camTrackMap = useCamTrackMap();
+    let trackMap = useTrackMap();
+    if (props.camera !== 'default' && camTrackMap[props.camera] !== undefined) {
+      trackMap = camTrackMap[props.camera];
+    }
     const enabledTracksRef = useEnabledTracks();
     const selectedTrackIdRef = useSelectedTrackId();
     const mergeListRef = useMergeList();
@@ -145,7 +150,8 @@ export default defineComponent({
         (trackId: TrackId) => {
           const track = trackMap.get(trackId);
           if (track === undefined) {
-            throw new Error(`TrackID ${trackId} not found in map`);
+            return; //Skip error
+            //throw new Error(`TrackID ${trackId} not found in map`);
           }
           const enabledIndex = enabledTracks.findIndex(
             (trackWithContext) => trackWithContext.track.trackId === trackId,
diff --git a/client/src/provides.ts b/client/src/provides.ts
index 9a208bb90..b201f7a6a 100644
--- a/client/src/provides.ts
+++ b/client/src/provides.ts
@@ -60,6 +60,9 @@ type IntervalTreeType = Readonly<IntervalTree>;
 const TrackMapSymbol = Symbol('trackMap');
 type TrackMapType = Readonly<Map<TrackId, Track>>;
 
+const CamTrackMapSymbol = Symbol('camTrackMap');
+type CamTrackMapType = Readonly<Record<string, Map<TrackId, Track>>>;
+
 const TracksSymbol = Symbol('tracks');
 type FilteredTracksType = Readonly<Ref<readonly TrackWithContext[]>>;
 
@@ -219,6 +222,7 @@ export interface State {
   mergeList: MergeList;
   pendingSaveCount: pendingSaveCountType;
   trackMap: TrackMapType;
+  camTrackMap: CamTrackMapType;
   typeStyling: TypeStylingType;
   selectedKey: SelectedKeyType;
   selectedTrackId: SelectedTrackIdType;
@@ -256,6 +260,7 @@ function dummyState(): State {
     mergeList: ref([]),
     pendingSaveCount: ref(0),
     trackMap: new Map<TrackId, Track>(),
+    camTrackMap: { default: new Map<TrackId, Track>() },
     typeStyling: ref({
       color() { return style.color; },
       strokeWidth() { return style.strokeWidth; },
@@ -305,6 +310,7 @@ function provideAnnotator(state: State, handler: Handler) {
   provide(MergeListSymbol, state.mergeList);
   provide(PendingSaveCountSymbol, state.pendingSaveCount);
   provide(TrackMapSymbol, state.trackMap);
+  provide(CamTrackMapSymbol, state.camTrackMap);
   provide(TracksSymbol, state.filteredTracks);
   provide(TypeStylingSymbol, state.typeStyling);
   provide(SelectedKeySymbol, state.selectedKey);
@@ -384,6 +390,9 @@ function usePendingSaveCount() {
 function useTrackMap() {
   return use<TrackMapType>(TrackMapSymbol);
 }
+function useCamTrackMap() {
+  return use<CamTrackMapType>(CamTrackMapSymbol);
+}
 
 function useFilteredTracks() {
   return use<FilteredTracksType>(TracksSymbol);
@@ -433,6 +442,7 @@ export {
   useMergeList,
   usePendingSaveCount,
   useTrackMap,
+  useCamTrackMap,
   useFilteredTracks,
   useTypeStyling,
   useSelectedKey,
diff --git a/client/src/use/useTrackStore.ts b/client/src/use/useTrackStore.ts
index c070ab3c8..1f4cb52ac 100644
--- a/client/src/use/useTrackStore.ts
+++ b/client/src/use/useTrackStore.ts
@@ -59,7 +59,7 @@ export default function useTrackStore({ markChangesPending }: UseTrackStoreParam
   const canary = ref(0);
 
   // Multi-Camera Support
-  const camTrackMap: Record<string, Map<TrackId, Track>> = { base: new Map<TrackId, Track>() };
+  const camTrackMap: Record<string, Map<TrackId, Track>> = { default: new Map<TrackId, Track>() };
   // internval Tree should be the same because all overlapping tracks have the same Id and length
 
   function _depend(): number {
@@ -86,6 +86,12 @@ export default function useTrackStore({ markChangesPending }: UseTrackStoreParam
     markChangesPending({ action: 'upsert', track });
   }
 
+  function addCamera(cameraName: string) {
+    if (camTrackMap[cameraName] === undefined) {
+      camTrackMap[cameraName] = new Map<TrackId, Track>();
+    }
+  }
+
   function insertTrack(track: Track, args?: InsertArgs) {
     track.setNotifier(onChange);
     if (args?.cameraName !== undefined) {
@@ -93,15 +99,14 @@ export default function useTrackStore({ markChangesPending }: UseTrackStoreParam
         camTrackMap[args.cameraName] = new Map<TrackId, Track>();
       }
       camTrackMap[args.cameraName].set(track.trackId, track);
-    } else {
-      trackMap.set(track.trackId, track);
     }
+    trackMap.set(track.trackId, track);
     intervalTree.insert([track.begin, track.end], track.trackId.toString());
     if (args && args.afterId) {
       /* Insert specifically after another trackId */
       const insertIndex = trackIds.value.indexOf(args.afterId) + 1;
       trackIds.value.splice(insertIndex, 0, track.trackId);
-    } else {
+    } else if (trackIds.value.indexOf(track.trackId) === -1) {
       trackIds.value.push(track.trackId);
     }
     if (!args?.imported) {
@@ -172,9 +177,11 @@ export default function useTrackStore({ markChangesPending }: UseTrackStoreParam
 
   return {
     trackMap,
+    camTrackMap,
     sortedTracks,
     intervalTree,
     addTrack,
+    addCamera,
     insertTrack,
     getNewTrackId,
     removeTrack,

From 243b33917aa275d091c91d9f546cf9144e5b8fc1 Mon Sep 17 00:00:00 2001
From: Bryon Lewis <Bryon.Lewis@kitware.com>
Date: Thu, 27 Jan 2022 11:53:21 -0500
Subject: [PATCH 07/22] Track modifications for multicam

---
 .../components/ControlsContainer.vue          |  7 +++-
 client/dive-common/components/Viewer.vue      | 34 +++++++++------
 client/dive-common/use/useModeManager.ts      | 41 ++++++++++++++-----
 client/src/components/LayerManager.vue        |  5 ++-
 .../annotators/AnnotatorWrapper.vue           | 36 +++++++---------
 .../components/annotators/ImageAnnotator.vue  |  6 ---
 .../components/annotators/VideoAnnotator.vue  |  1 -
 .../src/components/annotators/annotator.scss  | 22 ++++++++--
 .../annotators/useMediaController.ts          | 26 ++++++------
 .../controls/FileNameTimeDisplay.vue          | 13 +++---
 client/src/provides.ts                        | 11 +++++
 client/src/use/useTrackStore.ts               |  5 ++-
 12 files changed, 127 insertions(+), 80 deletions(-)

diff --git a/client/dive-common/components/ControlsContainer.vue b/client/dive-common/components/ControlsContainer.vue
index 1ba8c19cd..0ae0c30a5 100644
--- a/client/dive-common/components/ControlsContainer.vue
+++ b/client/dive-common/components/ControlsContainer.vue
@@ -75,7 +75,10 @@ export default defineComponent({
 </script>
 
 <template>
-  <v-col dense style="position:absolute; bottom: 0px; padding: 0px; margin:0px;">
+  <v-col
+    dense
+    style="position:absolute; bottom: 0px; padding: 0px; margin:0px;"
+  >
     <Controls :media-controls="mediaControls">
       <template slot="timelineControls">
         <div style="min-width: 210px">
@@ -124,7 +127,6 @@ export default defineComponent({
           class="text-middle px-3"
           display-type="filename"
           :media-controls="mediaControls"
-          camera="default"
         />
         <span v-else-if="datasetType === 'video'">
           <span class="mr-2">
@@ -203,6 +205,7 @@ export default defineComponent({
           <file-name-time-display
             class="text-middle pl-2"
             display-type="time"
+            :media-controls="mediaControls"
           />
         </span>
         <v-tooltip
diff --git a/client/dive-common/components/Viewer.vue b/client/dive-common/components/Viewer.vue
index 0cba0e04c..84ef04d43 100644
--- a/client/dive-common/components/Viewer.vue
+++ b/client/dive-common/components/Viewer.vue
@@ -81,7 +81,7 @@ export default defineComponent({
     const datasetId = toRef(props, 'id');
     const multiCamList: Ref<string[]> = ref(['default']);
     const defaultCamera = ref('default');
-    const currentCamera = ref('default');
+    const selectedCamera = ref('default');
     const playbackComponent = ref(undefined as Vue | undefined);
     const readonlyState = computed(() => props.readonlyMode || props.revision !== undefined);
     const mediaController = computed(() => {
@@ -206,8 +206,10 @@ export default defineComponent({
     } = useModeManager({
       recipes,
       selectedTrackId,
+      selectedCamera,
       editingTrack,
       trackMap,
+      camTrackMap,
       mediaControlAggregator,
       selectTrack,
       selectNextTrack,
@@ -326,12 +328,12 @@ export default defineComponent({
           const { cameras } = meta.multiCamMedia;
           multiCamList.value = Object.keys(cameras);
           defaultCamera.value = meta.multiCamMedia.defaultDisplay;
-          currentCamera.value = defaultCamera.value;
+          selectedCamera.value = defaultCamera.value;
           baseMulticamDatasetId.value = datasetId.value;
-          if (!currentCamera.value) {
+          if (!selectedCamera.value) {
             throw new Error('Multicamera dataset without default camera specified.');
           }
-          ctx.emit('update:id', `${props.id}/${currentCamera.value}`);
+          ctx.emit('update:id', `${props.id}/${selectedCamera.value}`);
           return;
         }
         /* Otherwise, complete loading of the dataset */
@@ -351,8 +353,8 @@ export default defineComponent({
         // Load non-Default Cameras if they exist:
         const filteredMultiCamList = multiCamList.value.filter((item) => item !== 'default');
         if (filteredMultiCamList.length === 0) {
-          imageData.value[currentCamera.value] = cloneDeep(meta.imageData) as FrameImage[];
-          videoUrl.value[currentCamera.value] = meta.videoUrl || null;
+          imageData.value[selectedCamera.value] = cloneDeep(meta.imageData) as FrameImage[];
+          videoUrl.value[selectedCamera.value] = meta.videoUrl || null;
           datasetType.value = meta.type as DatasetType;
           const trackData = await loadDetections(datasetId.value);
           const tracks = Object.values(trackData);
@@ -412,12 +414,18 @@ export default defineComponent({
 
     watch(datasetId, reloadAnnotations);
 
+
     const changeCamera = async (camera: string) => {
+      selectedCamera.value = camera;
+      // Old Style multiCamera
+      /*
       if (!camera || !baseMulticamDatasetId.value) {
-        throw new Error('Attempted to change camera to invalid value or baseMultiCamDatasetId was missing');
+        throw new Error('Attempted to change camera to invalid\
+         value or baseMultiCamDatasetId was missing');
       }
       const newId = `${baseMulticamDatasetId.value}/${camera}`;
       ctx.emit('update:id', newId);
+      */
     };
 
     const globalHandler = {
@@ -457,6 +465,7 @@ export default defineComponent({
         typeStyling,
         selectedKey,
         selectedTrackId,
+        selectedCamera,
         stateStyles: stateStyling,
         time,
         visibleModes,
@@ -506,7 +515,7 @@ export default defineComponent({
       // multicam
       multiCamList,
       defaultCamera,
-      currentCamera,
+      selectedCamera,
       changeCamera,
       // For Navigation Guarding
       navigateAwayGuard,
@@ -544,8 +553,8 @@ export default defineComponent({
           </template>
         </EditorMenu>
         <v-select
-          v-if="multiCamList.length"
-          :value="defaultCamera"
+          v-if="multiCamList.length && defaultCamera !== 'default'"
+          :value="selectedCamera"
           :items="multiCamList"
           label="Camera"
           class="shrink"
@@ -629,14 +638,15 @@ export default defineComponent({
           v-if="progress.loaded"
           ref="playbackComponent"
           :cameras="multiCamList"
-          :current-camera="currentCamera"
+          :current-camera="selectedCamera"
           v-bind="{
             imageData, videoUrl, updateTime,
             frameRate, originalFps, datasetType, progress }"
+          @select-camera="changeCamera"
         >
           <template slot="control">
             <controls-container
-              v-if="mediaControlAggregator.maxFrame"
+              v-if="Object.keys(mediaControlAggregator).length"
               v-bind="{ lineChartData, eventChartData,
                         datasetType, mediaControls:mediaControlAggregator }"
               @select-track="handler.trackSelect"
diff --git a/client/dive-common/use/useModeManager.ts b/client/dive-common/use/useModeManager.ts
index 0b0ea8978..bfedc73c7 100644
--- a/client/dive-common/use/useModeManager.ts
+++ b/client/dive-common/use/useModeManager.ts
@@ -29,8 +29,10 @@ interface SetAnnotationStateArgs {
  */
 export default function useModeManager({
   selectedTrackId,
+  selectedCamera,
   editingTrack,
   trackMap,
+  camTrackMap,
   mediaControlAggregator,
   recipes,
   selectTrack,
@@ -39,13 +41,15 @@ export default function useModeManager({
   removeTrack,
 }: {
   selectedTrackId: Ref<TrackId | null>;
+  selectedCamera: Ref<string>;
   editingTrack: Ref<boolean>;
   trackMap: Map<TrackId, Track>;
+  camTrackMap: Record<string, Map<TrackId, Track>>;
   mediaControlAggregator: Ref<MediaControlAggregator>;
   recipes: Recipe[];
   selectTrack: (trackId: TrackId | null, edit: boolean) => void;
   selectNextTrack: (delta?: number) => TrackId | null;
-  addTrack: (frame: number, defaultType: string, afterId?: TrackId) => Track;
+  addTrack: (frame: number, defaultType: string, afterId?: TrackId, cameraName?: string) => Track;
   removeTrack: (trackId: TrackId) => void;
 }) {
   let creating = false;
@@ -186,7 +190,7 @@ export default function useModeManager({
     const { frame } = mediaControlAggregator.value;
     const newTrackId = addTrack(
       frame.value, trackSettings.value.newTrackSettings.type,
-      selectedTrackId.value || undefined,
+      selectedTrackId.value || undefined, selectedCamera.value,
     ).trackId;
     selectTrack(newTrackId, true);
     creating = true;
@@ -224,7 +228,10 @@ export default function useModeManager({
 
   function handleUpdateRectBounds(frameNum: number, flickNum: number, bounds: RectBounds) {
     if (selectedTrackId.value !== null) {
-      const track = trackMap.get(selectedTrackId.value);
+      let track = trackMap.get(selectedTrackId.value);
+      if (selectedCamera.value !== 'default') {
+        track = camTrackMap[selectedCamera.value].get(selectedTrackId.value);
+      }
       if (track) {
         // Determines if we are creating a new Detection
         const { interpolate } = track.canInterpolate(frameNum);
@@ -270,7 +277,10 @@ export default function useModeManager({
     };
 
     if (selectedTrackId.value !== null) {
-      const track = trackMap.get(selectedTrackId.value);
+      let track = trackMap.get(selectedTrackId.value);
+      if (selectedCamera.value !== 'default') {
+        track = camTrackMap[selectedCamera.value].get(selectedTrackId.value);
+      }
       if (track) {
         // newDetectionMode is true if there's no keyframe on frameNum
         const { features, interpolate } = track.canInterpolate(frameNum);
@@ -365,10 +375,13 @@ export default function useModeManager({
   /* If any recipes are active, allow them to remove a point */
   function handleRemovePoint() {
     if (selectedTrackId.value !== null && selectedFeatureHandle.value !== -1) {
-      const track = trackMap.get(selectedTrackId.value);
-      if (track) {
+      let track = trackMap.get(selectedTrackId.value);
+      if (selectedCamera.value !== 'default') {
+        track = camTrackMap[selectedCamera.value].get(selectedTrackId.value);
+      }
+      if (track !== undefined) {
         recipes.forEach((r) => {
-          if (r.active.value) {
+          if (r.active.value && track) {
             const { frame } = mediaControlAggregator.value;
             r.deletePoint(
               frame.value,
@@ -387,11 +400,14 @@ export default function useModeManager({
   /* If any recipes are active, remove the geometry they added */
   function handleRemoveAnnotation() {
     if (selectedTrackId.value !== null) {
-      const track = trackMap.get(selectedTrackId.value);
-      if (track) {
+      let track = trackMap.get(selectedTrackId.value);
+      if (selectedCamera.value !== 'default') {
+        track = camTrackMap[selectedCamera.value].get(selectedTrackId.value);
+      }
+      if (track !== undefined) {
         const { frame } = mediaControlAggregator.value;
         recipes.forEach((r) => {
-          if (r.active.value) {
+          if (r.active.value && track) {
             r.delete(frame.value, track, selectedKey.value, annotationModes.editing);
           }
         });
@@ -439,7 +455,10 @@ export default function useModeManager({
 
   /** Toggle editing mode for track */
   function handleTrackEdit(trackId: TrackId) {
-    const track = getTrack(trackMap, trackId);
+    let track = getTrack(trackMap, trackId);
+    if (selectedCamera.value !== 'default') {
+      track = getTrack(camTrackMap[selectedCamera.value], trackId);
+    }
     seekNearest(track);
     const editing = trackId === selectedTrackId.value ? (!editingTrack.value) : true;
     handleSelectTrack(trackId, editing);
diff --git a/client/src/components/LayerManager.vue b/client/src/components/LayerManager.vue
index 1204a8e41..326e8df20 100644
--- a/client/src/components/LayerManager.vue
+++ b/client/src/components/LayerManager.vue
@@ -34,6 +34,7 @@ import {
   useMergeList,
   useAnnotatorPreferences,
   useCamTrackMap,
+  useSelectedCamera,
 } from '../provides';
 
 /** LayerManager is a component intended to be used as a child of an Annotator.
@@ -56,6 +57,7 @@ export default defineComponent({
     const handler = useHandler();
     const intervalTree = useIntervalTree();
     const camTrackMap = useCamTrackMap();
+    const selectedCamera = useSelectedCamera();
     let trackMap = useTrackMap();
     if (props.camera !== 'default' && camTrackMap[props.camera] !== undefined) {
       trackMap = camTrackMap[props.camera];
@@ -171,7 +173,8 @@ export default defineComponent({
             };
             frameData.push(trackFrame);
             if (trackFrame.selected) {
-              if (editingTrack) {
+              //Only edit current camera tracks
+              if (editingTrack && props.camera === selectedCamera.value) {
                 editingTracks.push(trackFrame);
               }
               if (annotator.lockedCamera.value) {
diff --git a/client/src/components/annotators/AnnotatorWrapper.vue b/client/src/components/annotators/AnnotatorWrapper.vue
index f11347d1f..b40bb5614 100644
--- a/client/src/components/annotators/AnnotatorWrapper.vue
+++ b/client/src/components/annotators/AnnotatorWrapper.vue
@@ -1,15 +1,15 @@
 <script lang="ts">
 import {
   computed,
-  defineComponent, onMounted, PropType, Ref, ref,
+  defineComponent, PropType, ref,
 } from '@vue/composition-api';
 import { DatasetType } from 'dive-common/apispec';
+import { useSelectedCamera } from 'vue-media-annotator/provides';
 import ImageAnnotator from './ImageAnnotator.vue';
 import VideoAnnotator from './VideoAnnotator.vue';
 import LayerManager from '../LayerManager.vue';
 import { SetTimeFunc } from '../../use/useTimeObserver';
 import { MediaControlAggregator, MediaController } from './mediaControllerType';
-import useMediaController from './useMediaController';
 
 export interface ImageDataItem {
   url: string;
@@ -38,10 +38,6 @@ export default defineComponent({
       type: Array as PropType<string[]>,
       required: true,
     },
-    currentCamera: {
-      type: String,
-      required: true,
-    },
     imageData: {
       type: Object as PropType<Record<string, ImageDataItem[]>>,
       required: true,
@@ -84,8 +80,10 @@ export default defineComponent({
   setup(props) {
     const subPlaybackComponent = ref(undefined as Vue[] | undefined);
     const control = ref(undefined as HTMLElement | undefined);
+    const selectedCamera = useSelectedCamera();
     const mediaControlAggregator = computed(() => {
-      if (subPlaybackComponent.value && subPlaybackComponent.value?.length >= 1) {
+      if (subPlaybackComponent.value
+      && subPlaybackComponent.value?.length === props.cameras.length) {
         // TODO: Bug in composition-api types incorrectly organizes the static members of a Vue
         // instance when using typeof ImageAnnotator, so we can't use the "real" type here
         // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
@@ -117,21 +115,12 @@ export default defineComponent({
           currentTime: computed(() => controllers.reduce((acc, item) => ({ ...acc, [item.camera.value]: item.currentTime.value }), {})),
           // eslint-disable-next-line max-len
           filename: computed(() => controllers.reduce((acc, item) => ({ ...acc, [item.camera.value]: item.filename.value }), {})),
-
         };
         return aggregateController;
       }
       return {} as MediaControlAggregator;
     });
 
-    const onResize = computed(() => {
-      if (subPlaybackComponent.value && subPlaybackComponent.value?.length >= 1) {
-        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-        // @ts-ignore
-        return (subPlaybackComponent.value[0].onResize as () => void);
-      }
-      return null;
-    });
 
     const controlHeight = computed(() => {
       if (control.value !== undefined && control.value.children.length) {
@@ -144,9 +133,9 @@ export default defineComponent({
     return {
       subPlaybackComponent,
       mediaControlAggregator,
-      onResize,
       control,
       controlHeight,
+      selectedCamera,
     };
   },
 });
@@ -154,7 +143,8 @@ export default defineComponent({
 
 <template>
   <v-col
-    class="playback-component annotation-wrapper fill-height pa-0"
+    class="playback-component annotation-wrapper pa-0"
+    style="height:100%"
     dense
   >
     <v-row class="fill-height">
@@ -163,20 +153,23 @@ export default defineComponent({
         :key="camera"
         style="padding: 0px; margin:0px;"
         class="fill-height"
+        @click="$emit('select-camera', camera)"
       >
         <component
           :is="datasetType === 'image-sequence' ? 'image-annotator' : 'video-annotator'"
           v-if="(imageData[camera].length || videoUrl[camera]) && progress.loaded"
           ref="subPlaybackComponent"
           class="fill-height"
+          :class="{'selected-camera': selectedCamera === camera && camera !== 'default'}"
           v-bind="{
             imageData: imageData[camera], videoUrl: videoUrl[camera],
             updateTime, frameRate, originalFps, loadImageFunc, camera }"
         >
-          <layer-manager
+          <div
             :style="{'min-height':`${controlHeight}px`}"
-            :camera="camera"
-          />
+          >
+            <layer-manager :camera="camera" />
+          </div>
         </component>
       </v-col>
     </v-row>
@@ -185,7 +178,6 @@ export default defineComponent({
     >
       <slot
         name="control"
-        @resize="onResize"
       />
     </span>
   </v-col>
diff --git a/client/src/components/annotators/ImageAnnotator.vue b/client/src/components/annotators/ImageAnnotator.vue
index 71ad99fe1..859cc5710 100644
--- a/client/src/components/annotators/ImageAnnotator.vue
+++ b/client/src/components/annotators/ImageAnnotator.vue
@@ -399,7 +399,6 @@ export default defineComponent({
       loadingImage,
       imageCursorRef: commonMedia.imageCursors[props.camera],
       containerRef: commonMedia.containers[props.camera],
-      onResize: commonMedia.onResize,
       cursorHandler,
       mediaController,
     };
@@ -460,11 +459,6 @@ export default defineComponent({
         </v-progress-circular>
       </div>
     </div>
-    <slot
-      ref="control"
-      name="control"
-      @resize="onResize"
-    />
     <slot v-if="data.ready" />
   </div>
 </template>
diff --git a/client/src/components/annotators/VideoAnnotator.vue b/client/src/components/annotators/VideoAnnotator.vue
index d49f1197d..862bdf160 100644
--- a/client/src/components/annotators/VideoAnnotator.vue
+++ b/client/src/components/annotators/VideoAnnotator.vue
@@ -102,7 +102,6 @@ export default defineComponent({
       type: String as PropType<string>,
       default: 'default',
     },
-
   },
 
   setup(props) {
diff --git a/client/src/components/annotators/annotator.scss b/client/src/components/annotators/annotator.scss
index ea7e22162..4a466879b 100644
--- a/client/src/components/annotators/annotator.scss
+++ b/client/src/components/annotators/annotator.scss
@@ -23,13 +23,17 @@
 
   display: flex;
   flex-direction: column;
+  .geojs-map {
+    margin:2px;
+    &.geojs-map:focus {
+      outline: none;
+    }  
+  }
 
   .playback-container {
     flex: 1;
 
-    &.geojs-map:focus {
-      outline: none;
-    }
+  
   }
   .loadingSpinnerContainer {
     z-index: 1;
@@ -44,6 +48,18 @@
     cursor: inherit;
   }
 }
+
+.selected-camera{
+
+  .geojs-map {
+    outline: 2px cyan solid;
+    &.geojs-map:focus {
+      outline: 2px cyan solid;
+    }  
+  }
+
+}
+
 .imageCursor {
   z-index: 10; //So it will be above the annotator layers
   position: fixed;
diff --git a/client/src/components/annotators/useMediaController.ts b/client/src/components/annotators/useMediaController.ts
index bfb1d3173..dd48cae1d 100644
--- a/client/src/components/annotators/useMediaController.ts
+++ b/client/src/components/annotators/useMediaController.ts
@@ -106,6 +106,18 @@ export default function useMediaController() {
     });
   }
 
+  function resetZoom() {
+    cameras.forEach((camera) => {
+      const geoViewerRef = geoViewers[camera];
+      const data = datas[camera];
+      const zoomAndCenter = geoViewerRef.value.zoomAndCenterFromBounds(
+        data.originalBounds, 0,
+      );
+      geoViewerRef.value.zoom(zoomAndCenter.zoom);
+      geoViewerRef.value.center(zoomAndCenter.center);
+    });
+  }
+
   function onResize() {
     cameras.forEach((camera) => {
       const geoViewerRef = geoViewers[camera];
@@ -118,23 +130,12 @@ export default function useMediaController() {
       if (size.width !== mapSize.width || size.height !== mapSize.height) {
         window.requestAnimationFrame(() => {
           geoViewerRef.value.size(size);
+          resetZoom();
         });
       }
     });
   }
 
-  function resetZoom() {
-    cameras.forEach((camera) => {
-      const geoViewerRef = geoViewers[camera];
-      const data = datas[camera];
-      const zoomAndCenter = geoViewerRef.value.zoomAndCenterFromBounds(
-        data.originalBounds, 0,
-      );
-      geoViewerRef.value.zoom(zoomAndCenter.zoom);
-      geoViewerRef.value.center(zoomAndCenter.center);
-    });
-  }
-
   function toggleLockedCamera() {
     cameras.forEach((camera) => {
       const data = datas[camera];
@@ -185,7 +186,6 @@ export default function useMediaController() {
         observer = new ResizeObserver(onResize);
         observer.observe(containerRef);
       } else {
-        console.log(containers);
         throw new Error(`Container ${camera} was missing, could not register observer`);
       }
     });
diff --git a/client/src/components/controls/FileNameTimeDisplay.vue b/client/src/components/controls/FileNameTimeDisplay.vue
index c23c24e4e..ef5e2680b 100644
--- a/client/src/components/controls/FileNameTimeDisplay.vue
+++ b/client/src/components/controls/FileNameTimeDisplay.vue
@@ -1,5 +1,6 @@
 <script lang="ts">
 import { computed, defineComponent, PropType } from '@vue/composition-api';
+import { useSelectedCamera } from 'vue-media-annotator/provides';
 import { MediaControlAggregator } from '../annotators/mediaControllerType';
 
 export default defineComponent({
@@ -13,18 +14,15 @@ export default defineComponent({
       type: Object as PropType<MediaControlAggregator>,
       required: true,
     },
-    camera: {
-      type: String,
-      default: 'default',
-    },
   },
   setup(props) {
     const {
       currentTime: currentTimes, duration: durations, filename: filenames, frame,
     } = props.mediaControls;
-    const filename = computed(() => filenames.value[props.camera]);
-    const duration = computed(() => durations.value[props.camera]);
-    const currentTime = computed(() => currentTimes.value[props.camera]);
+    const selectedCamera = useSelectedCamera();
+    const filename = computed(() => filenames.value[selectedCamera.value]);
+    const duration = computed(() => durations.value[selectedCamera.value]);
+    const currentTime = computed(() => currentTimes.value[selectedCamera.value]);
     const display = computed(() => {
       let value = 'unsupported display';
       if (props.displayType === 'filename') {
@@ -38,6 +36,7 @@ export default defineComponent({
       display,
       frame,
       currentTime,
+      selectedCamera,
     };
   },
 });
diff --git a/client/src/provides.ts b/client/src/provides.ts
index b201f7a6a..b758cb492 100644
--- a/client/src/provides.ts
+++ b/client/src/provides.ts
@@ -75,6 +75,9 @@ type SelectedKeyType = Readonly<Ref<string>>;
 const SelectedTrackIdSymbol = Symbol('selectedTrackId');
 type SelectedTrackIdType = Readonly<Ref<TrackId | null>>;
 
+const SelectedCameraSymbol = Symbol('selectedCamera');
+type SelectedCameraType = Readonly<Ref<string>>;
+
 const StateStylesSymbol = Symbol('stateStyles');
 type StateStylesType = Readonly<StateStyles>;
 
@@ -226,6 +229,7 @@ export interface State {
   typeStyling: TypeStylingType;
   selectedKey: SelectedKeyType;
   selectedTrackId: SelectedTrackIdType;
+  selectedCamera: SelectedCameraType;
   stateStyles: StateStylesType;
   time: TimeType;
   visibleModes: VisibleModesType;
@@ -272,6 +276,7 @@ function dummyState(): State {
     }),
     selectedKey: ref(''),
     selectedTrackId: ref(null),
+    selectedCamera: ref('default'),
     stateStyles: {
       disabled: style,
       selected: style,
@@ -315,6 +320,7 @@ function provideAnnotator(state: State, handler: Handler) {
   provide(TypeStylingSymbol, state.typeStyling);
   provide(SelectedKeySymbol, state.selectedKey);
   provide(SelectedTrackIdSymbol, state.selectedTrackId);
+  provide(SelectedCameraSymbol, state.selectedCamera);
   provide(StateStylesSymbol, state.stateStyles);
   provide(TimeSymbol, state.time);
   provide(VisibleModesSymbol, state.visibleModes);
@@ -410,6 +416,10 @@ function useSelectedTrackId() {
   return use<SelectedTrackIdType>(SelectedTrackIdSymbol);
 }
 
+function useSelectedCamera() {
+  return use<SelectedCameraType>(SelectedCameraSymbol);
+}
+
 function useStateStyles() {
   return use<StateStylesType>(StateStylesSymbol);
 }
@@ -447,6 +457,7 @@ export {
   useTypeStyling,
   useSelectedKey,
   useSelectedTrackId,
+  useSelectedCamera,
   useStateStyles,
   useTime,
   useVisibleModes,
diff --git a/client/src/use/useTrackStore.ts b/client/src/use/useTrackStore.ts
index 1f4cb52ac..a316e246f 100644
--- a/client/src/use/useTrackStore.ts
+++ b/client/src/use/useTrackStore.ts
@@ -114,13 +114,14 @@ export default function useTrackStore({ markChangesPending }: UseTrackStoreParam
     }
   }
 
-  function addTrack(frame: number, defaultType: string, afterId?: TrackId): Track {
+  function addTrack(frame: number, defaultType: string,
+    afterId?: TrackId, cameraName?: string): Track {
     const track = new Track(getNewTrackId(), {
       begin: frame,
       end: frame,
       confidencePairs: [[defaultType, 1]],
     });
-    insertTrack(track, { afterId });
+    insertTrack(track, { afterId, cameraName });
     markChangesPending({ action: 'upsert', track });
     return track;
   }

From 1eb11d5b701c9e164811a33b97ceb102a0fbc5a8 Mon Sep 17 00:00:00 2001
From: Bryon Lewis <Bryon.Lewis@kitware.com>
Date: Fri, 28 Jan 2022 14:45:10 -0500
Subject: [PATCH 08/22] some minor fixes

---
 client/dive-common/components/ControlsContainer.vue    | 2 +-
 client/dive-common/components/Viewer.vue               | 2 +-
 client/dive-common/use/useModeManager.ts               | 3 +++
 client/src/components/annotators/useMediaController.ts | 1 -
 4 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/client/dive-common/components/ControlsContainer.vue b/client/dive-common/components/ControlsContainer.vue
index 0ae0c30a5..de8921aa0 100644
--- a/client/dive-common/components/ControlsContainer.vue
+++ b/client/dive-common/components/ControlsContainer.vue
@@ -1,6 +1,6 @@
 <script lang="ts">
 import {
-  defineComponent, ref, PropType, Ref,
+  defineComponent, ref, PropType,
 } from '@vue/composition-api';
 import type { DatasetType } from 'dive-common/apispec';
 import FileNameTimeDisplay from 'vue-media-annotator/components/controls/FileNameTimeDisplay.vue';
diff --git a/client/dive-common/components/Viewer.vue b/client/dive-common/components/Viewer.vue
index 84ef04d43..b34757cfb 100644
--- a/client/dive-common/components/Viewer.vue
+++ b/client/dive-common/components/Viewer.vue
@@ -1,6 +1,6 @@
 <script lang="ts">
 import {
-  defineComponent, ref, toRef, computed, Ref, reactive, watch, onMounted,
+  defineComponent, ref, toRef, computed, Ref, reactive, watch,
 } from '@vue/composition-api';
 import type { Vue } from 'vue/types/vue';
 
diff --git a/client/dive-common/use/useModeManager.ts b/client/dive-common/use/useModeManager.ts
index bfedc73c7..e9da9e895 100644
--- a/client/dive-common/use/useModeManager.ts
+++ b/client/dive-common/use/useModeManager.ts
@@ -288,6 +288,9 @@ export default function useModeManager({
 
         // Give each recipe the opportunity to make changes
         recipes.forEach((recipe) => {
+          if (!track) {
+            return;
+          }
           const changes = recipe.update(eventType, frameNum, track, [data], key);
           // Prevent key conflicts among recipes
           Object.keys(changes.data).forEach((key_) => {
diff --git a/client/src/components/annotators/useMediaController.ts b/client/src/components/annotators/useMediaController.ts
index dd48cae1d..ff4f67302 100644
--- a/client/src/components/annotators/useMediaController.ts
+++ b/client/src/components/annotators/useMediaController.ts
@@ -197,7 +197,6 @@ export default function useMediaController() {
       if (containerRef && observer !== null) {
         observer.unobserve(containerRef);
       } else {
-        console.log(containers);
         throw new Error(`Container ${camera} or observer was missing`);
       }
     });

From f37b45f9313a8e6d002444a366ece0408377235a Mon Sep 17 00:00:00 2001
From: Bryon Lewis <Bryon.Lewis@kitware.com>
Date: Mon, 31 Jan 2022 08:09:01 -0500
Subject: [PATCH 09/22] minor build changes

---
 client/src/components/LayerManager.vue                 | 5 +++--
 client/src/components/annotators/AnnotatorWrapper.vue  | 2 +-
 client/src/components/controls/FileNameTimeDisplay.vue | 2 +-
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/client/src/components/LayerManager.vue b/client/src/components/LayerManager.vue
index 326e8df20..5dd28efb2 100644
--- a/client/src/components/LayerManager.vue
+++ b/client/src/components/LayerManager.vue
@@ -152,8 +152,9 @@ export default defineComponent({
         (trackId: TrackId) => {
           const track = trackMap.get(trackId);
           if (track === undefined) {
-            return; //Skip error
-            //throw new Error(`TrackID ${trackId} not found in map`);
+            // Track may be located in another Camera
+            // TODO: Find a better way to represent tracks outside of cameras
+            return;
           }
           const enabledIndex = enabledTracks.findIndex(
             (trackWithContext) => trackWithContext.track.trackId === trackId,
diff --git a/client/src/components/annotators/AnnotatorWrapper.vue b/client/src/components/annotators/AnnotatorWrapper.vue
index b40bb5614..2b048f194 100644
--- a/client/src/components/annotators/AnnotatorWrapper.vue
+++ b/client/src/components/annotators/AnnotatorWrapper.vue
@@ -4,7 +4,7 @@ import {
   defineComponent, PropType, ref,
 } from '@vue/composition-api';
 import { DatasetType } from 'dive-common/apispec';
-import { useSelectedCamera } from 'vue-media-annotator/provides';
+import { useSelectedCamera } from '../../provides';
 import ImageAnnotator from './ImageAnnotator.vue';
 import VideoAnnotator from './VideoAnnotator.vue';
 import LayerManager from '../LayerManager.vue';
diff --git a/client/src/components/controls/FileNameTimeDisplay.vue b/client/src/components/controls/FileNameTimeDisplay.vue
index ef5e2680b..75d24fcdf 100644
--- a/client/src/components/controls/FileNameTimeDisplay.vue
+++ b/client/src/components/controls/FileNameTimeDisplay.vue
@@ -1,6 +1,6 @@
 <script lang="ts">
 import { computed, defineComponent, PropType } from '@vue/composition-api';
-import { useSelectedCamera } from 'vue-media-annotator/provides';
+import { useSelectedCamera } from '../../provides';
 import { MediaControlAggregator } from '../annotators/mediaControllerType';
 
 export default defineComponent({

From d20508f2a68350bacf0fe8c022c152c8e25b4a27 Mon Sep 17 00:00:00 2001
From: Bryon Lewis <Bryon.Lewis@kitware.com>
Date: Wed, 2 Feb 2022 14:07:19 -0500
Subject: [PATCH 10/22] build lib fix

---
 client/dive-common/components/Viewer.vue | 6 ------
 client/src/components/index.ts           | 2 --
 2 files changed, 8 deletions(-)

diff --git a/client/dive-common/components/Viewer.vue b/client/dive-common/components/Viewer.vue
index b34757cfb..edd362919 100644
--- a/client/dive-common/components/Viewer.vue
+++ b/client/dive-common/components/Viewer.vue
@@ -19,9 +19,6 @@ import {
 import { getTrack } from 'vue-media-annotator/use/useTrackStore';
 import { provideAnnotator } from 'vue-media-annotator/provides';
 import {
-  ImageAnnotator,
-  VideoAnnotator,
-  LayerManager,
   AnnotatorWrapper,
 } from 'vue-media-annotator/components';
 import { MediaControlAggregator } from 'vue-media-annotator/components/annotators/mediaControllerType';
@@ -50,9 +47,6 @@ export default defineComponent({
     DeleteControls,
     Sidebar,
     SidebarContext,
-    LayerManager,
-    VideoAnnotator,
-    ImageAnnotator,
     AnnotatorWrapper,
     ConfidenceFilter,
     UserGuideButton,
diff --git a/client/src/components/index.ts b/client/src/components/index.ts
index be892bf5d..562a71884 100644
--- a/client/src/components/index.ts
+++ b/client/src/components/index.ts
@@ -6,7 +6,6 @@
 
 import ImageAnnotator from './annotators/ImageAnnotator.vue';
 import VideoAnnotator from './annotators/VideoAnnotator.vue';
-import AnnotatorWrapper from './annotators/AnnotatorWrapper.vue';
 
 import Controls from './controls/Controls.vue';
 import EventChart from './controls/EventChart.vue';
@@ -28,7 +27,6 @@ export {
   LineChart,
   Timeline,
   LayerManager,
-  AnnotatorWrapper,
   TooltipButton,
   TrackItem,
   TrackList,

From 30a9579ca92880f8405b3f93237cdbab172a81f7 Mon Sep 17 00:00:00 2001
From: Bryon Lewis <Bryon.Lewis@kitware.com>
Date: Wed, 2 Feb 2022 14:37:13 -0500
Subject: [PATCH 11/22] fixing build finally

---
 .../components}/AnnotatorWrapper.vue          | 26 ++++++++++++-------
 client/dive-common/components/Viewer.vue      |  4 +--
 .../src/components/annotators/annotator.scss  | 10 -------
 3 files changed, 18 insertions(+), 22 deletions(-)
 rename client/{src/components/annotators => dive-common/components}/AnnotatorWrapper.vue (88%)

diff --git a/client/src/components/annotators/AnnotatorWrapper.vue b/client/dive-common/components/AnnotatorWrapper.vue
similarity index 88%
rename from client/src/components/annotators/AnnotatorWrapper.vue
rename to client/dive-common/components/AnnotatorWrapper.vue
index 2b048f194..f527276f2 100644
--- a/client/src/components/annotators/AnnotatorWrapper.vue
+++ b/client/dive-common/components/AnnotatorWrapper.vue
@@ -3,13 +3,12 @@ import {
   computed,
   defineComponent, PropType, ref,
 } from '@vue/composition-api';
-import { DatasetType } from 'dive-common/apispec';
-import { useSelectedCamera } from '../../provides';
-import ImageAnnotator from './ImageAnnotator.vue';
-import VideoAnnotator from './VideoAnnotator.vue';
-import LayerManager from '../LayerManager.vue';
-import { SetTimeFunc } from '../../use/useTimeObserver';
-import { MediaControlAggregator, MediaController } from './mediaControllerType';
+import { useSelectedCamera } from 'vue-media-annotator/provides';
+import ImageAnnotator from 'vue-media-annotator/components/annotators/ImageAnnotator.vue';
+import VideoAnnotator from 'vue-media-annotator/components/annotators/VideoAnnotator.vue';
+import LayerManager from 'vue-media-annotator/components/LayerManager.vue';
+import { SetTimeFunc } from 'vue-media-annotator/use/useTimeObserver';
+import { MediaControlAggregator, MediaController } from 'vue-media-annotator/components/annotators/mediaControllerType';
 
 export interface ImageDataItem {
   url: string;
@@ -31,7 +30,7 @@ export default defineComponent({
   },
   props: {
     datasetType: {
-      type: String as PropType<DatasetType>,
+      type: String as PropType<'image-sequence' | 'video'>,
       required: true,
     },
     cameras: {
@@ -184,5 +183,14 @@ export default defineComponent({
 </template>
 
 <style lang="scss" scoped>
-@import "./annotator.scss";
+.annotator-wrapper {
+  position: relative;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  z-index: 0;
+  display: flex;
+  flex-direction: column;
+}
 </style>
diff --git a/client/dive-common/components/Viewer.vue b/client/dive-common/components/Viewer.vue
index edd362919..1032d498f 100644
--- a/client/dive-common/components/Viewer.vue
+++ b/client/dive-common/components/Viewer.vue
@@ -18,9 +18,6 @@ import {
 } from 'vue-media-annotator/use';
 import { getTrack } from 'vue-media-annotator/use/useTrackStore';
 import { provideAnnotator } from 'vue-media-annotator/provides';
-import {
-  AnnotatorWrapper,
-} from 'vue-media-annotator/components';
 import { MediaControlAggregator } from 'vue-media-annotator/components/annotators/mediaControllerType';
 
 /* DIVE COMMON */
@@ -40,6 +37,7 @@ import { usePrompt } from 'dive-common/vue-utilities/prompt-service';
 import { cloneDeep } from 'lodash';
 import { getResponseError } from 'vue-media-annotator/utils';
 import context from 'dive-common/store/context';
+import AnnotatorWrapper from './AnnotatorWrapper.vue';
 
 export default defineComponent({
   components: {
diff --git a/client/src/components/annotators/annotator.scss b/client/src/components/annotators/annotator.scss
index 4a466879b..b10c75a74 100644
--- a/client/src/components/annotators/annotator.scss
+++ b/client/src/components/annotators/annotator.scss
@@ -1,13 +1,3 @@
-.annotator-wrapper {
-  position: relative;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  z-index: 0;
-  display: flex;
-  flex-direction: column;
-}
 
 .controls {
   position: absolute;

From 6ae400dc450800165be1245212dbb1dd4f87af59 Mon Sep 17 00:00:00 2001
From: Brandon Davis <git@subdavis.com>
Date: Fri, 25 Feb 2022 10:02:13 -0500
Subject: [PATCH 12/22] Variation on MultiCam Media Controller (#1171)

* WIP

* Doneish

* WIP
---
 .../components/AnnotatorWrapper.vue           | 196 ----------
 .../components/ConfidenceFilter.vue           |   4 +-
 .../components/ControlsContainer.vue          |  25 +-
 client/dive-common/components/Sidebar.vue     |  12 +-
 client/dive-common/components/Viewer.vue      | 146 ++++---
 client/dive-common/use/useModeManager.ts      |  20 +-
 client/dive-common/use/useRequest.ts          |   3 +-
 client/src/components/LayerManager.vue        |   4 +-
 .../components/annotators/ImageAnnotator.vue  |  42 +-
 .../components/annotators/VideoAnnotator.vue  |  37 +-
 .../src/components/annotators/annotator.scss  |   6 +-
 .../annotators/mediaControllerType.ts         |  79 ++--
 .../annotators/useMediaController.ts          | 361 ++++++++++--------
 client/src/components/controls/Controls.vue   |  19 +-
 .../controls/FileNameTimeDisplay.vue          |  27 +-
 15 files changed, 423 insertions(+), 558 deletions(-)
 delete mode 100644 client/dive-common/components/AnnotatorWrapper.vue

diff --git a/client/dive-common/components/AnnotatorWrapper.vue b/client/dive-common/components/AnnotatorWrapper.vue
deleted file mode 100644
index f527276f2..000000000
--- a/client/dive-common/components/AnnotatorWrapper.vue
+++ /dev/null
@@ -1,196 +0,0 @@
-<script lang="ts">
-import {
-  computed,
-  defineComponent, PropType, ref,
-} from '@vue/composition-api';
-import { useSelectedCamera } from 'vue-media-annotator/provides';
-import ImageAnnotator from 'vue-media-annotator/components/annotators/ImageAnnotator.vue';
-import VideoAnnotator from 'vue-media-annotator/components/annotators/VideoAnnotator.vue';
-import LayerManager from 'vue-media-annotator/components/LayerManager.vue';
-import { SetTimeFunc } from 'vue-media-annotator/use/useTimeObserver';
-import { MediaControlAggregator, MediaController } from 'vue-media-annotator/components/annotators/mediaControllerType';
-
-export interface ImageDataItem {
-  url: string;
-  filename: string;
-}
-
-
-function loadImageFunc(imageDataItem: ImageDataItem, img: HTMLImageElement) {
-  // eslint-disable-next-line no-param-reassign
-  img.src = imageDataItem.url;
-}
-
-export default defineComponent({
-  name: 'AnnotationWrapper',
-  components: {
-    VideoAnnotator,
-    ImageAnnotator,
-    LayerManager,
-  },
-  props: {
-    datasetType: {
-      type: String as PropType<'image-sequence' | 'video'>,
-      required: true,
-    },
-    cameras: {
-      type: Array as PropType<string[]>,
-      required: true,
-    },
-    imageData: {
-      type: Object as PropType<Record<string, ImageDataItem[]>>,
-      required: true,
-    },
-    videoUrl: {
-      type: Object as PropType<Record<string, string>>,
-      required: true,
-    },
-    videoPlayerAttributes: {
-      type: Object as PropType<{ [key: string]: string }>,
-      default: () => ({}),
-    },
-    frameRate: {
-      type: Number,
-      required: true,
-    },
-    originalFps: {
-      type: Number as PropType<number | null>,
-      default: null,
-    },
-    updateTime: {
-      type: Function as PropType<SetTimeFunc>,
-      required: true,
-    },
-    loadImageFunc: {
-      type: Function as PropType<(imageDataItem: ImageDataItem, img: HTMLImageElement) => void>,
-      default: loadImageFunc,
-    },
-    // Range is [0, inf.)
-    brightness: {
-      type: Number as PropType<number | undefined>,
-      default: undefined,
-    },
-    progress: {
-      type: Object as PropType<{loaded: boolean}>,
-      required: true,
-    },
-  },
-
-  setup(props) {
-    const subPlaybackComponent = ref(undefined as Vue[] | undefined);
-    const control = ref(undefined as HTMLElement | undefined);
-    const selectedCamera = useSelectedCamera();
-    const mediaControlAggregator = computed(() => {
-      if (subPlaybackComponent.value
-      && subPlaybackComponent.value?.length === props.cameras.length) {
-        // TODO: Bug in composition-api types incorrectly organizes the static members of a Vue
-        // instance when using typeof ImageAnnotator, so we can't use the "real" type here
-        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-        // @ts-ignore
-
-        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-        // @ts-ignore
-        // eslint-disable-next-line max-len
-        const controllers: MediaController[] = subPlaybackComponent.value?.map((item) => item.mediaController as MediaController);
-        const aggregateController: MediaControlAggregator = {
-          maxFrame: controllers[0].maxFrame,
-          frame: controllers[0].frame,
-          seek: (frame: number) => controllers.forEach((item) => item.seek(frame)),
-          volume: controllers[0].volume,
-          setVolume: (volume: number) => controllers.forEach((item) => item.setVolume(volume)),
-          speed: controllers[0].speed,
-          setSpeed: (speed: number) => controllers.forEach((item) => item.setSpeed(speed)),
-          lockedCamera: controllers[0].lockedCamera,
-          toggleLockedCamera: () => controllers.forEach((item) => item.toggleLockedCamera()),
-          pause: () => controllers.forEach((item) => item.pause()),
-          play: () => controllers.forEach((item) => item.play()),
-          playing: controllers[0].playing,
-          nextFrame: () => controllers.forEach((item) => item.nextFrame()),
-          prevFrame: () => controllers.forEach((item) => item.prevFrame()),
-          resetZoom: () => controllers.forEach((item) => item.resetZoom()),
-          // eslint-disable-next-line max-len
-          duration: computed(() => controllers.reduce((acc, item) => ({ ...acc, [item.camera.value]: item.duration.value }), {})),
-          // eslint-disable-next-line max-len
-          currentTime: computed(() => controllers.reduce((acc, item) => ({ ...acc, [item.camera.value]: item.currentTime.value }), {})),
-          // eslint-disable-next-line max-len
-          filename: computed(() => controllers.reduce((acc, item) => ({ ...acc, [item.camera.value]: item.filename.value }), {})),
-        };
-        return aggregateController;
-      }
-      return {} as MediaControlAggregator;
-    });
-
-
-    const controlHeight = computed(() => {
-      if (control.value !== undefined && control.value.children.length) {
-        return control.value.children[0].clientHeight;
-      }
-      return 251;
-    });
-
-
-    return {
-      subPlaybackComponent,
-      mediaControlAggregator,
-      control,
-      controlHeight,
-      selectedCamera,
-    };
-  },
-});
-</script>
-
-<template>
-  <v-col
-    class="playback-component annotation-wrapper pa-0"
-    style="height:100%"
-    dense
-  >
-    <v-row class="fill-height">
-      <v-col
-        v-for="camera in cameras"
-        :key="camera"
-        style="padding: 0px; margin:0px;"
-        class="fill-height"
-        @click="$emit('select-camera', camera)"
-      >
-        <component
-          :is="datasetType === 'image-sequence' ? 'image-annotator' : 'video-annotator'"
-          v-if="(imageData[camera].length || videoUrl[camera]) && progress.loaded"
-          ref="subPlaybackComponent"
-          class="fill-height"
-          :class="{'selected-camera': selectedCamera === camera && camera !== 'default'}"
-          v-bind="{
-            imageData: imageData[camera], videoUrl: videoUrl[camera],
-            updateTime, frameRate, originalFps, loadImageFunc, camera }"
-        >
-          <div
-            :style="{'min-height':`${controlHeight}px`}"
-          >
-            <layer-manager :camera="camera" />
-          </div>
-        </component>
-      </v-col>
-    </v-row>
-    <span
-      ref="control"
-    >
-      <slot
-        name="control"
-      />
-    </span>
-  </v-col>
-</template>
-
-<style lang="scss" scoped>
-.annotator-wrapper {
-  position: relative;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  z-index: 0;
-  display: flex;
-  flex-direction: column;
-}
-</style>
diff --git a/client/dive-common/components/ConfidenceFilter.vue b/client/dive-common/components/ConfidenceFilter.vue
index 915d1d899..34596543b 100644
--- a/client/dive-common/components/ConfidenceFilter.vue
+++ b/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() {
diff --git a/client/dive-common/components/ControlsContainer.vue b/client/dive-common/components/ControlsContainer.vue
index de8921aa0..7470b7664 100644
--- a/client/dive-common/components/ControlsContainer.vue
+++ b/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
diff --git a/client/dive-common/components/Sidebar.vue b/client/dive-common/components/Sidebar.vue
index 0131c47ce..dc5ec0921 100644
--- a/client/dive-common/components/Sidebar.vue
+++ b/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"
diff --git a/client/dive-common/components/Viewer.vue b/client/dive-common/components/Viewer.vue
index 1032d498f..50c77b574 100644
--- a/client/dive-common/components/Viewer.vue
+++ b/client/dive-common/components/Viewer.vue
@@ -1,8 +1,9 @@
 <script lang="ts">
 import {
-  defineComponent, ref, toRef, computed, Ref, reactive, watch,
+  defineComponent, ref, toRef, computed, Ref, reactive, watch, onMounted, onBeforeUnmount,
 } from '@vue/composition-api';
-import type { Vue } from 'vue/types/vue';
+import type { CombinedVueInstance, Vue } from 'vue/types/vue';
+import type { AxiosError } from 'axios';
 
 /* VUE MEDIA ANNOTATOR */
 import Track, { TrackId } from 'vue-media-annotator/track';
@@ -16,11 +17,15 @@ import {
   useTimeObserver,
   useEventChart,
 } from 'vue-media-annotator/use';
+import { useMediaController } from 'vue-media-annotator/components';
 import { getTrack } from 'vue-media-annotator/use/useTrackStore';
 import { provideAnnotator } from 'vue-media-annotator/provides';
-import { MediaControlAggregator } from 'vue-media-annotator/components/annotators/mediaControllerType';
+import ImageAnnotator from 'vue-media-annotator/components/annotators/ImageAnnotator.vue';
+import VideoAnnotator from 'vue-media-annotator/components/annotators/VideoAnnotator.vue';
+import LayerManager from 'vue-media-annotator/components/LayerManager.vue';
 
 /* DIVE COMMON */
+
 import PolygonBase from 'dive-common/recipes/polygonbase';
 import HeadTail from 'dive-common/recipes/headtail';
 import EditorMenu from 'dive-common/components/EditorMenu.vue';
@@ -37,18 +42,29 @@ import { usePrompt } from 'dive-common/vue-utilities/prompt-service';
 import { cloneDeep } from 'lodash';
 import { getResponseError } from 'vue-media-annotator/utils';
 import context from 'dive-common/store/context';
-import AnnotatorWrapper from './AnnotatorWrapper.vue';
+
+export interface ImageDataItem {
+  url: string;
+  filename: string;
+}
+
+function loadImageFunc(imageDataItem: ImageDataItem, img: HTMLImageElement) {
+  // eslint-disable-next-line no-param-reassign
+  img.src = imageDataItem.url;
+}
 
 export default defineComponent({
   components: {
     ControlsContainer,
     DeleteControls,
+    ImageAnnotator,
     Sidebar,
     SidebarContext,
-    AnnotatorWrapper,
     ConfidenceFilter,
     UserGuideButton,
     EditorMenu,
+    VideoAnnotator,
+    LayerManager,
   },
 
   // TODO: remove this in vue 3
@@ -76,17 +92,7 @@ export default defineComponent({
     const selectedCamera = ref('default');
     const playbackComponent = ref(undefined as Vue | undefined);
     const readonlyState = computed(() => props.readonlyMode || props.revision !== undefined);
-    const mediaController = computed(() => {
-    const mediaControlAggregator = computed(() => {
-      if (playbackComponent.value) {
-        // TODO: Bug in composition-api types incorrectly organizes the static members of a Vue
-        // instance when using typeof ImageAnnotator, so we can't use the "real" type here
-        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-        // @ts-ignore
-        return playbackComponent.value.mediaControlAggregator as MediaControlAggregator;
-      }
-      return {} as MediaControlAggregator;
-    });
+    const { aggregateController, onResize } = useMediaController();
     const { time, updateTime, initialize: initTime } = useTimeObserver();
     const imageData = ref({ default: [] } as Record<string, FrameImage[]>);
     const datasetType: Ref<DatasetType> = ref('image-sequence');
@@ -112,6 +118,7 @@ export default defineComponent({
       return 0;
     });
 
+
     const {
       save: saveToServer,
       markChangesPending,
@@ -202,7 +209,7 @@ export default defineComponent({
       editingTrack,
       trackMap,
       camTrackMap,
-      mediaControlAggregator,
+      aggregateController,
       selectTrack,
       selectNextTrack,
       addTrack,
@@ -234,7 +241,7 @@ export default defineComponent({
         } catch (err) {
           await prompt({
             title: 'Error while splitting track',
-            text: err,
+            text: err as string,
             positiveButton: 'OK',
           });
           return;
@@ -269,7 +276,7 @@ export default defineComponent({
         });
       } catch (err) {
         let text = 'Unable to Save Data';
-        if (err.response && err.response.status === 403) {
+        if (err.response?.status === 403) {
           text = 'You do not have permission to Save Data to this Folder.';
         }
         await prompt({
@@ -389,7 +396,7 @@ export default defineComponent({
         progress.loaded = false;
         console.error(err);
         const errorEl = document.createElement('div');
-        errorEl.innerHTML = getResponseError(err);
+        errorEl.innerHTML = getResponseError(err as AxiosError);
         loadError.value = errorEl.innerText
           .concat(". If you don't know how to resolve this, please contact the server administrator.");
         throw err;
@@ -406,18 +413,25 @@ export default defineComponent({
 
     watch(datasetId, reloadAnnotations);
 
+    const controlsRef = ref();
+    const controlsHeight = ref(0);
+    const controlsCollapsed = ref(false);
+    function handleResize() {
+      controlsHeight.value = controlsRef.value.$el.clientHeight;
+      onResize();
+    }
+    const observer = new ResizeObserver(handleResize);
+    watch(controlsRef, (previous) => {
+      if (previous) observer.unobserve(previous.$el);
+      observer.observe(controlsRef.value.$el);
+    });
+    watch(controlsCollapsed, handleResize);
+    onBeforeUnmount(() => {
+      observer.unobserve(controlsRef.value.$el);
+    });
 
     const changeCamera = async (camera: string) => {
       selectedCamera.value = camera;
-      // Old Style multiCamera
-      /*
-      if (!camera || !baseMulticamDatasetId.value) {
-        throw new Error('Attempted to change camera to invalid\
-         value or baseMultiCamDatasetId was missing');
-      }
-      const newId = `${baseMulticamDatasetId.value}/${camera}`;
-      ctx.emit('update:id', newId);
-      */
     };
 
     const globalHandler = {
@@ -469,6 +483,9 @@ export default defineComponent({
       /* props */
       confidenceFilters,
       clientSettings,
+      controlsRef,
+      controlsHeight,
+      controlsCollapsed,
       datasetName,
       datasetType,
       editingTrack,
@@ -478,7 +495,6 @@ export default defineComponent({
       imageData,
       lineChartData,
       loadError,
-      mediaControlAggregator,
       mergeMode: mergeInProgress,
       pendingSaveCount,
       progress,
@@ -497,6 +513,7 @@ export default defineComponent({
       readonlyState,
       /* methods */
       handler: globalHandler,
+      loadImageFunc,
       save,
       saveThreshold,
       updateTime,
@@ -604,7 +621,6 @@ export default defineComponent({
         :enable-slot="context.state.active !== 'TypeThreshold'"
         class="fill-height"
         @import-types="importTypes($event)"
-        @track-seek="mediaController.seek($event)"
       >
         <template v-if="context.state.active !== 'TypeThreshold'">
           <v-divider />
@@ -622,29 +638,46 @@ export default defineComponent({
           </ConfidenceFilter>
         </template>
       </sidebar>
-      <v-col
-        style="position: relative; margin: 0px, padding: 0px"
+      <div
+        style="position: relative;"
+        class="d-flex flex-column grow"
         dense
       >
-        <annotator-wrapper
+        <div
           v-if="progress.loaded"
-          ref="playbackComponent"
-          :cameras="multiCamList"
-          :current-camera="selectedCamera"
-          v-bind="{
-            imageData, videoUrl, updateTime,
-            frameRate, originalFps, datasetType, progress }"
-          @select-camera="changeCamera"
+          class="d-flex flex-column grow"
         >
-          <template slot="control">
-            <controls-container
-              v-if="Object.keys(mediaControlAggregator).length"
-              v-bind="{ lineChartData, eventChartData,
-                        datasetType, mediaControls:mediaControlAggregator }"
-              @select-track="handler.trackSelect"
-            />
-          </template>
-        </annotator-wrapper>
+          <div class="d-flex grow">
+            <div
+              v-for="camera in multiCamList"
+              :key="camera"
+              class="d-flex flex-column grow"
+              :style="{ height: `calc(100% - ${controlsHeight}px)`}"
+              @click="changeCamera(camera)"
+              @mousedown.right="changeCamera(camera)"
+            >
+              <component
+                :is="datasetType === 'image-sequence' ? 'image-annotator' : 'video-annotator'"
+                v-if="(imageData[camera].length || videoUrl[camera]) && progress.loaded"
+                ref="subPlaybackComponent"
+                class="fill-height"
+                :class="{'selected-camera': selectedCamera === camera && camera !== 'default'}"
+                v-bind="{
+                  imageData: imageData[camera], videoUrl: videoUrl[camera],
+                  updateTime, frameRate, originalFps, loadImageFunc, camera }"
+              >
+                <LayerManager :camera="camera" />
+              </component>
+            </div>
+          </div>
+          <ControlsContainer
+            ref="controlsRef"
+            class="shrink"
+            :collapsed.sync="controlsCollapsed"
+            v-bind="{ lineChartData, eventChartData, datasetType }"
+            @select-track="handler.trackSelect"
+          />
+        </div>
         <div
           v-else
           class="d-flex justify-center align-center fill-height"
@@ -673,7 +706,7 @@ export default defineComponent({
             <span v-else>{{ progressValue }}%</span>
           </v-progress-circular>
         </div>
-      </v-col>
+      </div>
       <SidebarContext />
     </v-row>
   </v-main>
@@ -701,4 +734,15 @@ html {
 .text-xs-center {
   text-align: center !important;
 }
+
+.annotator-wrapper {
+  position: relative;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  z-index: 0;
+  display: flex;
+  flex-direction: column;
+}
 </style>
diff --git a/client/dive-common/use/useModeManager.ts b/client/dive-common/use/useModeManager.ts
index e9da9e895..82efd9869 100644
--- a/client/dive-common/use/useModeManager.ts
+++ b/client/dive-common/use/useModeManager.ts
@@ -6,7 +6,7 @@ import Track, { TrackId } from 'vue-media-annotator/track';
 import { getTrack } from 'vue-media-annotator/use/useTrackStore';
 import { RectBounds, updateBounds } from 'vue-media-annotator/utils';
 import { EditAnnotationTypes, VisibleAnnotationTypes } from 'vue-media-annotator/layers';
-import { MediaControlAggregator } from 'vue-media-annotator/components/annotators/mediaControllerType';
+import { AggregateMediaController } from 'vue-media-annotator/components/annotators/mediaControllerType';
 
 import Recipe from 'vue-media-annotator/recipe';
 import { usePrompt } from 'dive-common/vue-utilities/prompt-service';
@@ -33,7 +33,7 @@ export default function useModeManager({
   editingTrack,
   trackMap,
   camTrackMap,
-  mediaControlAggregator,
+  aggregateController,
   recipes,
   selectTrack,
   selectNextTrack,
@@ -45,7 +45,7 @@ export default function useModeManager({
   editingTrack: Ref<boolean>;
   trackMap: Map<TrackId, Track>;
   camTrackMap: Record<string, Map<TrackId, Track>>;
-  mediaControlAggregator: Ref<MediaControlAggregator>;
+    aggregateController: Ref<AggregateMediaController>;
   recipes: Recipe[];
   selectTrack: (trackId: TrackId | null, edit: boolean) => void;
   selectNextTrack: (delta?: number) => TrackId | null;
@@ -125,11 +125,11 @@ export default function useModeManager({
 
   function seekNearest(track: Track) {
     // Seek to the nearest point in the track.
-    const { frame } = mediaControlAggregator.value;
+    const { frame } = aggregateController.value;
     if (frame.value < track.begin) {
-      mediaControlAggregator.value.seek(track.begin);
+      aggregateController.value.seek(track.begin);
     } else if (frame.value > track.end) {
-      mediaControlAggregator.value.seek(track.end);
+      aggregateController.value.seek(track.end);
     }
   }
 
@@ -187,7 +187,7 @@ export default function useModeManager({
 
   function handleAddTrackOrDetection(): TrackId {
     // Handles adding a new track with the NewTrack Settings
-    const { frame } = mediaControlAggregator.value;
+    const { frame } = aggregateController.value;
     const newTrackId = addTrack(
       frame.value, trackSettings.value.newTrackSettings.type,
       selectedTrackId.value || undefined, selectedCamera.value,
@@ -211,7 +211,7 @@ export default function useModeManager({
         if (trackSettings.value.newTrackSettings.mode === 'Track'
         && trackSettings.value.newTrackSettings.modeSettings.Track.autoAdvanceFrame
         ) {
-          mediaControlAggregator.value.nextFrame();
+          aggregateController.value.nextFrame();
           newCreatingValue = true;
         } else if (trackSettings.value.newTrackSettings.mode === 'Detection') {
           if (
@@ -385,7 +385,7 @@ export default function useModeManager({
       if (track !== undefined) {
         recipes.forEach((r) => {
           if (r.active.value && track) {
-            const { frame } = mediaControlAggregator.value;
+            const { frame } = aggregateController.value;
             r.deletePoint(
               frame.value,
               track,
@@ -408,7 +408,7 @@ export default function useModeManager({
         track = camTrackMap[selectedCamera.value].get(selectedTrackId.value);
       }
       if (track !== undefined) {
-        const { frame } = mediaControlAggregator.value;
+        const { frame } = aggregateController.value;
         recipes.forEach((r) => {
           if (r.active.value && track) {
             r.delete(frame.value, track, selectedKey.value, annotationModes.editing);
diff --git a/client/dive-common/use/useRequest.ts b/client/dive-common/use/useRequest.ts
index ec91c3c81..487151a62 100644
--- a/client/dive-common/use/useRequest.ts
+++ b/client/dive-common/use/useRequest.ts
@@ -1,4 +1,5 @@
 import { reactive, toRefs } from '@vue/composition-api';
+import { AxiosError } from 'axios';
 import { getResponseError } from 'vue-media-annotator/utils';
 
 export default function useRequest() {
@@ -18,7 +19,7 @@ export default function useRequest() {
       return val;
     } catch (err) {
       state.loading = false;
-      state.error = getResponseError(err);
+      state.error = getResponseError(err as AxiosError);
       throw err;
     }
   }
diff --git a/client/src/components/LayerManager.vue b/client/src/components/LayerManager.vue
index 5dd28efb2..353d81571 100644
--- a/client/src/components/LayerManager.vue
+++ b/client/src/components/LayerManager.vue
@@ -4,7 +4,7 @@ import {
 } from '@vue/composition-api';
 
 import { TrackWithContext } from '../use/useTrackFilters';
-import { injectMediaController } from './annotators/useMediaController';
+import { injectAggregateController } from './annotators/useMediaController';
 import RectangleLayer from '../layers/AnnotationLayers/RectangleLayer';
 import PolygonLayer from '../layers/AnnotationLayers/PolygonLayer';
 import PointLayer from '../layers/AnnotationLayers/PointLayer';
@@ -72,7 +72,7 @@ export default defineComponent({
     const stateStyling = useStateStyles();
     const annotatorPrefs = useAnnotatorPreferences();
 
-    const annotator = injectMediaController(props.camera);
+    const annotator = injectAggregateController().value.getController(props.camera);
     const frameNumberRef = annotator.frame;
     const flickNumberRef = annotator.flick;
 
diff --git a/client/src/components/annotators/ImageAnnotator.vue b/client/src/components/annotators/ImageAnnotator.vue
index 859cc5710..a719223eb 100644
--- a/client/src/components/annotators/ImageAnnotator.vue
+++ b/client/src/components/annotators/ImageAnnotator.vue
@@ -3,7 +3,7 @@ import {
   defineComponent, ref, onUnmounted, PropType, toRef, watch,
 } from '@vue/composition-api';
 import { SetTimeFunc } from '../../use/useTimeObserver';
-import useMediaController from './useMediaController';
+import { injectAggregateController, injectCameraInitializer } from './useMediaController';
 
 export interface ImageDataItem {
   url: string;
@@ -56,9 +56,20 @@ export default defineComponent({
   setup(props) {
     const loadingVideo = ref(false);
     const loadingImage = ref(true);
-    const commonMedia = useMediaController();
-    commonMedia.addCamera(props.camera);
-    const data = commonMedia.datas[props.camera];
+    const cameraInitializer = injectCameraInitializer();
+    const {
+      state: data,
+      geoViewer,
+      cursorHandler,
+      imageCursor,
+      container,
+      initializeViewer,
+      mediaController,
+    } = cameraInitializer(props.camera, {
+      // allow hoisting for these functions to pass a reference before defining them.
+      // eslint-disable-next-line @typescript-eslint/no-use-before-define
+      seek, pause, play, setVolume: unimplemented, setSpeed: unimplemented,
+    });
     data.maxFrame = props.imageData.length - 1;
     // Below are configuration settings we can set until we decide on good numbers to utilize.
     let local = {
@@ -119,7 +130,7 @@ export default defineComponent({
          */
         local.width = img.naturalWidth;
         local.height = img.naturalHeight;
-        commonMedia.resetMapDimensions(local.width, local.height);
+        mediaController.resetMapDimensions(local.width, local.height);
       }
       local.quadFeature
         .data([
@@ -310,18 +321,6 @@ export default defineComponent({
       throw new Error('Method unimplemented!');
     }
 
-    const {
-      cursorHandler,
-      initializeViewer,
-      mediaController,
-    } = commonMedia.initialize(props.camera, {
-      seek,
-      play,
-      pause,
-      setVolume: unimplemented,
-      setSpeed: unimplemented,
-    });
-
     const setBrightnessFilter = (on: boolean) => {
       if (local.quadFeature !== undefined) {
         local.quadFeature.layer().node().css('filter', on ? 'url(#brightness)' : '');
@@ -332,7 +331,7 @@ export default defineComponent({
       const imgInternal = cacheFrame(0);
       imgInternal.onloadPromise.then(() => {
         initializeViewer(imgInternal.image.naturalWidth, imgInternal.image.naturalHeight);
-        const quadFeatureLayer = commonMedia.geoViewers[props.camera].value.createLayer('feature', {
+        const quadFeatureLayer = geoViewer.value.createLayer('feature', {
           features: ['quad'],
           autoshareRenderer: false,
         });
@@ -365,7 +364,7 @@ export default defineComponent({
         const imgInternal = cacheFrame(0);
         imgInternal.onloadPromise.then(() => {
           initializeViewer(imgInternal.image.naturalWidth, imgInternal.image.naturalHeight);
-          const quadFeatureLayer = commonMedia.geoViewers[props.camera].value.createLayer('feature', {
+          const quadFeatureLayer = geoViewer.value.createLayer('feature', {
             features: ['quad'],
             autoshareRenderer: false,
           });
@@ -397,10 +396,9 @@ export default defineComponent({
       data,
       loadingVideo,
       loadingImage,
-      imageCursorRef: commonMedia.imageCursors[props.camera],
-      containerRef: commonMedia.containers[props.camera],
+      imageCursorRef: imageCursor,
+      containerRef: container,
       cursorHandler,
-      mediaController,
     };
   },
 });
diff --git a/client/src/components/annotators/VideoAnnotator.vue b/client/src/components/annotators/VideoAnnotator.vue
index 862bdf160..0c999aeb9 100644
--- a/client/src/components/annotators/VideoAnnotator.vue
+++ b/client/src/components/annotators/VideoAnnotator.vue
@@ -4,7 +4,7 @@ import {
 } from '@vue/composition-api';
 
 import { Flick, SetTimeFunc } from '../../use/useTimeObserver';
-import useMediaController from './useMediaController';
+import { injectCameraInitializer } from './useMediaController';
 
 /**
  * For MPEG codecs, the PTS (Presentation Timestamp)
@@ -105,9 +105,20 @@ export default defineComponent({
   },
 
   setup(props) {
-    const commonMedia = useMediaController();
-    commonMedia.addCamera(props.camera);
-    const data = commonMedia.datas[props.camera];
+    const cameraInitializer = injectCameraInitializer();
+    const {
+      state: data,
+      geoViewer,
+      cursorHandler,
+      imageCursor,
+      container,
+      initializeViewer,
+      mediaController,
+    } = cameraInitializer(props.camera, {
+      // allow hoisting for these functions.
+      // eslint-disable-next-line @typescript-eslint/no-use-before-define
+      seek, pause, play, setVolume, setSpeed,
+    });
 
     function makeVideo() {
       const video = document.createElement('video');
@@ -159,7 +170,7 @@ export default defineComponent({
         data.frame = Math.floor(newFrame);
         data.flick = Math.round(video.currentTime * Flick);
         data.syncedFrame = data.frame;
-        commonMedia.geoViewers[props.camera].value.scheduleAnimationFrame(syncWithVideo);
+        geoViewer.value.scheduleAnimationFrame(syncWithVideo);
       }
       data.currentTime = video.currentTime;
     }
@@ -188,14 +199,6 @@ export default defineComponent({
       data.speed = video.playbackRate;
     }
 
-    const {
-      cursorHandler,
-      initializeViewer,
-      mediaController,
-    } = commonMedia.initialize(props.camera, {
-      seek, play, pause, setVolume, setSpeed,
-    });
-
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     let quadFeatureLayer = undefined as any;
     const setBrightnessFilter = (on: boolean) => {
@@ -228,7 +231,7 @@ export default defineComponent({
         data.maxFrame = maybeMaxFrame;
       }
       initializeViewer(width, height);
-      quadFeatureLayer = commonMedia.geoViewers[props.camera].value.createLayer('feature', {
+      quadFeatureLayer = geoViewer.value.createLayer('feature', {
         features: ['quad.video'],
         autoshareRenderer: false,
       });
@@ -273,9 +276,8 @@ export default defineComponent({
 
     return {
       data,
-      imageCursorRef: commonMedia.imageCursors[props.camera],
-      containerRef: commonMedia.containers[props.camera],
-      onResize: commonMedia.onResize,
+      imageCursorRef: imageCursor,
+      containerRef: container,
       cursorHandler,
       mediaController,
     };
@@ -285,7 +287,6 @@ export default defineComponent({
 
 <template>
   <div
-    v-resize="onResize"
     class="video-annotator"
     :style="{ cursor: data.cursor }"
   >
diff --git a/client/src/components/annotators/annotator.scss b/client/src/components/annotators/annotator.scss
index b10c75a74..ac5879834 100644
--- a/client/src/components/annotators/annotator.scss
+++ b/client/src/components/annotators/annotator.scss
@@ -40,11 +40,11 @@
 }
 
 .selected-camera{
-
+  box-sizing: content-box;
   .geojs-map {
-    outline: 2px cyan solid;
+    outline: 3px cyan dashed;
     &.geojs-map:focus {
-      outline: 2px cyan solid;
+      outline: 3px cyan dashed;
     }  
   }
 
diff --git a/client/src/components/annotators/mediaControllerType.ts b/client/src/components/annotators/mediaControllerType.ts
index 301223713..2e76670f9 100644
--- a/client/src/components/annotators/mediaControllerType.ts
+++ b/client/src/components/annotators/mediaControllerType.ts
@@ -1,58 +1,49 @@
 import type { Ref } from '@vue/composition-api';
 
 /**
- * MediaController provides an interface for time and a few
- * other properties of the annotator window.
+ * AggregateMediaController provides an interface for time and a few
+ * other properties of all cameras in the annotator window.
  *
  * See components/annotators/README.md for docs.
  */
-export interface MediaController {
-  camera: Readonly<Ref<string>>;
+export interface AggregateMediaController {
   currentTime: Readonly<Ref<number>>;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  geoViewerRef: Readonly<Ref<any>>;
-  playing: Readonly<Ref<boolean>>;
   frame: Readonly<Ref<number>>;
-  flick: Readonly<Ref<number>>;
-  filename: Readonly<Ref<string>>;
   lockedCamera: Readonly<Ref<boolean>>;
-  duration: Readonly<Ref<number>>;
-  volume: Readonly<Ref<number>>;
-  speed: Readonly<Ref<number>>;
   maxFrame: Readonly<Ref<number>>;
+  playing: Readonly<Ref<boolean>>;
+  speed: Readonly<Ref<number>>;
+  volume: Readonly<Ref<number>>;
+  cameras: Readonly<Ref<string[]>>;
+
+  pause: () => void;
+  play: () => void;
+  resetZoom: () => void;
+  seek: (frame: number) => void;
+  nextFrame: () => void;
+  prevFrame: () => void;
+  setVolume: (volume: number) => void;
+  setSpeed: (speed: number) => void;
+  toggleLockedCamera: (lock: boolean) => void;
+  getController: (cameraName: string) => MediaController;
+}
+
+/**
+ * MediaController provides some additional camera-specific
+ * functions to control an individual camera
+ */
+export interface MediaController extends AggregateMediaController {
+  cameraName: Readonly<Ref<string>>;
+  duration: Readonly<Ref<number>>;
+  filename: Readonly<Ref<string>>;
+  flick: Readonly<Ref<number>>;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  geoViewerRef: Readonly<Ref<any>>;
   /** @deprecated may be removed in a future release */
   syncedFrame: Readonly<Ref<number>>;
-  prevFrame(): void;
-  nextFrame(): void;
-  play(): void;
-  pause(): void;
-  seek(frame: number): void;
-  resetZoom(): void;
-  toggleLockedCamera(): void;
-  centerOn(coords: {x: number; y: number; z: number }): void;
-  setCursor(c: string): void;
-  setImageCursor(c: string): void;
-  setVolume(v: number): void;
-  setSpeed(v: number): void;
-}
 
-export interface MediaControlAggregator {
-  maxFrame: Ref<number>;
-   frame: Ref<number>;
-   seek: (frame: number) => void;
-   volume: Ref<number>;
-   setVolume: (volume: number) => void;
-   speed: Ref<number>;
-   setSpeed: (speed: number) => void;
-   lockedCamera: Ref<boolean>;
-   toggleLockedCamera: (lock: boolean) => void;
-   pause: () => void;
-   play: () => void;
-   playing: Ref<boolean>;
-   nextFrame: () => void;
-   prevFrame: () => void;
-   resetZoom: () => void;
-   duration: Ref<Record<string, number>>;
-   filename: Ref<Record<string, string>>;
-   currentTime: Ref<Record<string, number>>;
+  centerOn(coords: { x: number; y: number; z: number }): void;
+  setCursor(camera: string): void;
+  setImageCursor(camera: string): void;
+  resetMapDimensions(width: number, height: number, margin?: number): void;
 }
diff --git a/client/src/components/annotators/useMediaController.ts b/client/src/components/annotators/useMediaController.ts
index ff4f67302..a5e537c43 100644
--- a/client/src/components/annotators/useMediaController.ts
+++ b/client/src/components/annotators/useMediaController.ts
@@ -2,22 +2,18 @@
 /// <reference types="resize-observer-browser" />
 import geo from 'geojs';
 import {
-  ref, reactive, onMounted, onBeforeUnmount, provide, toRef, Ref, UnwrapRef,
+  ref, reactive, provide, toRef, Ref, UnwrapRef, computed,
 } from '@vue/composition-api';
+import { map, over } from 'lodash';
 
 import { use } from '../../provides';
-import type { MediaController } from './mediaControllerType';
+import type { AggregateMediaController, MediaController } from './mediaControllerType';
 
-const MediaControllerSymbols: Record<string, symbol> = {};
-
-export function injectMediaController(camera = 'default') {
-  if (MediaControllerSymbols[camera] === undefined) {
-    throw new Error(`Camera ${camera} was not found in the media Controller Symbols`);
-  }
-  return use<MediaController>(MediaControllerSymbols[camera]);
-}
+const AggregateControllerSymbol = Symbol('aggregate-controller');
+const CameraInitializerSymbol = Symbol('camera-initializer');
 
 interface MediaControllerReactiveData {
+  cameraName: string;
   ready: boolean;
   playing: boolean;
   frame: number;
@@ -30,7 +26,6 @@ interface MediaControllerReactiveData {
   speed: number;
   maxFrame: number;
   syncedFrame: number;
-  observer: null;
   cursor: string;
   imageCursor: string;
   originalBounds: {
@@ -41,47 +36,114 @@ interface MediaControllerReactiveData {
   };
 }
 
-export default function useMediaController() {
+interface CameraInitializerReturn {
+  state: UnwrapRef<MediaControllerReactiveData>;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const geoViewers: Record<string, Ref<any>> = { default: ref(undefined) };
-  const containers: Record<string, Ref<HTMLElement | undefined>> = { default: ref(undefined) };
-  const imageCursors: Record<string, Ref<HTMLElement | undefined>> = { default: ref(undefined) };
-  const cameras: string[] = [];
-  const datas: Record<string, UnwrapRef<MediaControllerReactiveData>> = {
-    default: reactive({
-      ready: false,
-      playing: false,
-      frame: 0,
-      flick: 0,
-      filename: '',
-      lockedCamera: false,
-      currentTime: 0,
-      duration: 0,
-      volume: 0,
-      speed: 1.0,
-      maxFrame: 0,
-      syncedFrame: 0,
-      observer: null,
-      cursor: 'default',
-      imageCursor: '',
-      originalBounds: {
-        left: 0,
-        top: 0,
-        bottom: 1,
-        right: 1,
-      },
-    }),
+  geoViewer: Ref<any>;
+  container: Ref<HTMLElement | undefined>;
+  imageCursor: Ref<HTMLElement | undefined>;
+  cursorHandler: {
+    handleMouseLeave: () => void;
+    handleMouseEnter: () => void;
+    handleMouseMove: (evt: MouseEvent) => void;
   };
+  initializeViewer: (width: number, height: number) => void;
+  mediaController: MediaController;
+}
+
+type CameraInitializerFunc = (cameraName: string, {
+  seek, play, pause, setVolume, setSpeed,
+}: {
+  seek(frame: number): void;
+  play(): void;
+  pause(): void;
+  setVolume(level: number): void;
+  setSpeed(level: number): void;
+}) => CameraInitializerReturn;
+
+export function injectAggregateController() {
+  return use<Ref<AggregateMediaController>>(AggregateControllerSymbol);
+}
+
+export function injectCameraInitializer() {
+  return use<CameraInitializerFunc>(CameraInitializerSymbol);
+}
+
+export function useMediaController() {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const geoViewers: Record<symbol, Ref<any>> = {};
+  const containers: Record<symbol, Ref<HTMLElement | undefined>> = {};
+  const imageCursors: Record<symbol, Ref<HTMLElement | undefined>> = {};
+  const cameras: Ref<symbol[]> = ref([]);
+  const subControllers: MediaController[] = [];
+  const state: Record<symbol, UnwrapRef<MediaControllerReactiveData>> = {};
+  const cameraControllerSymbols: Record<string, symbol> = {};
 
-  function addCamera(camera = 'default') {
+  function getController(camera?: string) {
+    if (cameras.value.length === 0) {
+      throw new Error('no camera controllers currently exist');
+    }
+    if (camera === undefined) {
+      return subControllers[0];
+    }
+    const found = subControllers.find((c) => c.cameraName.value === camera);
+    if (!found) {
+      throw new Error('no controller found for that camera');
+    }
+    return found;
+  }
+
+  /**
+   * onResize resets the zoom of a camera when its window size changes.
+   */
+  function onResize() {
+    subControllers.forEach((mc) => {
+      const camera = cameraControllerSymbols[mc.cameraName.value];
+      const geoViewerRef = geoViewers[camera];
+      const containerRef = containers[camera];
+      if (geoViewerRef.value === undefined || containerRef.value === undefined) {
+        return;
+      }
+      const size = containerRef.value.getBoundingClientRect();
+      const mapSize = geoViewerRef.value.size();
+      if (size.width !== mapSize.width || size.height !== mapSize.height) {
+        window.requestAnimationFrame(() => {
+          geoViewerRef.value.size(size);
+          mc.resetZoom();
+        });
+      }
+    });
+  }
+
+  function toggleLockedCamera() {
+    cameras.value.forEach((camera) => {
+      const data = state[camera];
+      data.lockedCamera = !data.lockedCamera;
+    });
+  }
+
+  /**
+   * This secondary initialization wrapper solves a sort of
+   * chicken-and-egg problem, allowing the function consumer to use
+   * the state above to construct the dependencies for the methods below.
+   */
+  function initialize(cameraName: string, {
+    seek: _seek, play: _play, pause: _pause, setVolume: _setVolume, setSpeed: _setSpeed,
+  }: {
+    seek(frame: number): void;
+    play(): void;
+    pause(): void;
+    setVolume(level: number): void;
+    setSpeed(level: number): void;
+  }) {
+    const camera = Symbol(`media-controller-${cameraName}`);
+    cameraControllerSymbols[cameraName] = camera;
     geoViewers[camera] = ref(undefined);
     containers[camera] = ref(undefined);
     imageCursors[camera] = ref(undefined);
-    if (cameras.indexOf(camera) === -1) {
-      cameras.push(camera);
-    }
-    MediaControllerSymbols[camera] = Symbol(`media-controller-${camera}`);
-    datas[camera] = reactive({
+
+    state[camera] = reactive({
+      cameraName,
       ready: false,
       playing: false,
       frame: 0,
@@ -94,7 +156,6 @@ export default function useMediaController() {
       speed: 1.0,
       maxFrame: 0,
       syncedFrame: 0,
-      observer: null,
       cursor: 'default',
       imageCursor: '',
       originalBounds: {
@@ -104,50 +165,33 @@ export default function useMediaController() {
         right: 1,
       },
     });
-  }
 
-  function resetZoom() {
-    cameras.forEach((camera) => {
+    function setCursor(newCursor: string) {
+      state[camera].cursor = `${newCursor}`;
+    }
+
+    function setImageCursor(newCursor: string) {
+      state[camera].imageCursor = `${newCursor}`;
+    }
+
+    function centerOn(coords: { x: number; y: number; z: number }) {
+      geoViewers[camera].value.center(coords);
+    }
+
+    function resetZoom() {
       const geoViewerRef = geoViewers[camera];
-      const data = datas[camera];
+      const data = state[camera];
       const zoomAndCenter = geoViewerRef.value.zoomAndCenterFromBounds(
         data.originalBounds, 0,
       );
       geoViewerRef.value.zoom(zoomAndCenter.zoom);
       geoViewerRef.value.center(zoomAndCenter.center);
-    });
-  }
-
-  function onResize() {
-    cameras.forEach((camera) => {
-      const geoViewerRef = geoViewers[camera];
-      const containerRef = containers[camera];
-      if (geoViewerRef.value === undefined || containerRef.value === undefined) {
-        return;
-      }
-      const size = containerRef.value.getBoundingClientRect();
-      const mapSize = geoViewerRef.value.size();
-      if (size.width !== mapSize.width || size.height !== mapSize.height) {
-        window.requestAnimationFrame(() => {
-          geoViewerRef.value.size(size);
-          resetZoom();
-        });
-      }
-    });
-  }
-
-  function toggleLockedCamera() {
-    cameras.forEach((camera) => {
-      const data = datas[camera];
-      data.lockedCamera = !data.lockedCamera;
-    });
-  }
+    }
 
-  function resetMapDimensions(width: number, height: number, margin = 0.3) {
-    cameras.forEach((camera) => {
+    function resetMapDimensions(width: number, height: number, margin = 0.3) {
       const geoViewerRef = geoViewers[camera];
       const containerRef = containers[camera];
-      const data = datas[camera];
+      const data = state[camera];
       geoViewerRef.value.bounds({
         left: 0,
         top: 0,
@@ -166,7 +210,7 @@ export default function useMediaController() {
         bottom: bottom * (1 + margin),
       });
       geoViewerRef.value.zoomRange({
-      // do not set a min limit so that bounds clamping determines min
+        // do not set a min limit so that bounds clamping determines min
         min: -Infinity,
         // 4x zoom max
         max: 4,
@@ -175,57 +219,6 @@ export default function useMediaController() {
       geoViewerRef.value.clampBoundsY(true);
       geoViewerRef.value.clampZoom(true);
       resetZoom();
-    });
-  }
-
-  let observer: ResizeObserver | null = null;
-  onMounted(() => {
-    cameras.forEach((camera) => {
-      const containerRef = containers[camera].value;
-      if (containerRef) {
-        observer = new ResizeObserver(onResize);
-        observer.observe(containerRef);
-      } else {
-        throw new Error(`Container ${camera} was missing, could not register observer`);
-      }
-    });
-  });
-  onBeforeUnmount(() => {
-    cameras.forEach((camera) => {
-      const containerRef = containers[camera].value;
-
-      if (containerRef && observer !== null) {
-        observer.unobserve(containerRef);
-      } else {
-        throw new Error(`Container ${camera} or observer was missing`);
-      }
-    });
-  });
-
-  /**
-   * This secondary initialization wrapper solves a sort of
-   * chicken-and-egg problem, allowing the function consumer to use
-   * the state above to construct the dependencies for the methods below.
-   */
-  function initialize(camera = ' default', {
-    seek, play, pause, setVolume, setSpeed,
-  }: {
-    seek(frame: number): void;
-    play(): void;
-    pause(): void;
-    setVolume(level: number): void;
-    setSpeed(level: number): void;
-  }) {
-    function setCursor(newCursor: string) {
-      datas[camera].cursor = `${newCursor}`;
-    }
-
-    function setImageCursor(newCursor: string) {
-      datas[camera].imageCursor = `${newCursor}`;
-    }
-
-    function centerOn(coords: { x: number; y: number; z: number }) {
-      geoViewers[camera].value.center(coords);
     }
 
     function initializeViewer(width: number, height: number) {
@@ -278,16 +271,16 @@ export default function useMediaController() {
     }
 
     function prevFrame() {
-      const targetFrame = datas[camera].frame - 1;
+      const targetFrame = state[camera].frame - 1;
       if (targetFrame >= 0) {
-        seek(targetFrame);
+        _seek(targetFrame);
       }
     }
 
     function nextFrame() {
-      const targetFrame = datas[camera].frame + 1;
-      if (targetFrame <= datas[camera].maxFrame) {
-        seek(targetFrame);
+      const targetFrame = state[camera].frame + 1;
+      if (targetFrame <= state[camera].maxFrame) {
+        _seek(targetFrame);
       }
     }
 
@@ -304,62 +297,96 @@ export default function useMediaController() {
           imageCursorRef.value.style.display = 'block';
         }
       },
-      handleMouseMove(evt: MouseEvent) {
-        const offsetX = evt.clientX + 10;
-        const offsetY = evt.clientY - 25;
-        window.requestAnimationFrame(() => {
-          if (imageCursorRef.value) {
-            imageCursorRef.value.style.transform = `translate(${offsetX}px, ${offsetY}px)`;
-          }
-        });
+      handleMouseMove(/*evt: MouseEvent*/) {
+        // const offsetX = evt.clientX + 10;
+        // const offsetY = evt.clientY - 25;
+        // window.requestAnimationFrame(() => {
+        //   if (imageCursorRef.value) {
+        //     imageCursorRef.value.style.transform = `translate(${offsetX}px, ${offsetY}px)`;
+        //   }
+        // });
       },
     };
 
     const mediaController: MediaController = {
-      camera: ref(camera),
       geoViewerRef: geoViewers[camera],
-      currentTime: toRef(datas[camera], 'currentTime'),
-      playing: toRef(datas[camera], 'playing'),
-      frame: toRef(datas[camera], 'frame'),
-      flick: toRef(datas[camera], 'flick'),
-      filename: toRef(datas[camera], 'filename'),
-      lockedCamera: toRef(datas[camera], 'lockedCamera'),
-      duration: toRef(datas[camera], 'duration'),
-      volume: toRef(datas[camera], 'volume'),
-      maxFrame: toRef(datas[camera], 'maxFrame'),
-      speed: toRef(datas[camera], 'speed'),
-      syncedFrame: toRef(datas[camera], 'syncedFrame'),
+      cameraName: toRef(state[camera], 'cameraName'),
+      cameras: ref([]),
+      currentTime: toRef(state[camera], 'currentTime'),
+      playing: toRef(state[camera], 'playing'),
+      frame: toRef(state[camera], 'frame'),
+      flick: toRef(state[camera], 'flick'),
+      filename: toRef(state[camera], 'filename'),
+      lockedCamera: toRef(state[camera], 'lockedCamera'),
+      duration: toRef(state[camera], 'duration'),
+      volume: toRef(state[camera], 'volume'),
+      maxFrame: toRef(state[camera], 'maxFrame'),
+      speed: toRef(state[camera], 'speed'),
+      syncedFrame: toRef(state[camera], 'syncedFrame'),
       prevFrame,
       nextFrame,
-      play,
-      pause,
-      seek,
+      play: _play,
+      pause: _pause,
+      seek: _seek,
       resetZoom,
       toggleLockedCamera,
       centerOn,
       setCursor,
       setImageCursor,
-      setVolume,
-      setSpeed,
+      setVolume: _setVolume,
+      setSpeed: _setSpeed,
+      getController,
+      resetMapDimensions,
     };
 
-    provide(MediaControllerSymbols[camera], mediaController);
+    subControllers.push(mediaController);
+    cameras.value.push(camera);
 
     return {
+      state: state[camera],
+      geoViewer: geoViewers[camera],
+      container: containers[camera],
+      imageCursor: imageCursors[camera],
       cursorHandler,
       initializeViewer,
       mediaController,
     };
   }
 
+  const aggregateController: Ref<AggregateMediaController> = computed(() => {
+    const defaultController = getController();
+    return {
+      cameras: computed(() => cameras.value.map((v) => String(v))),
+      maxFrame: defaultController.maxFrame,
+      frame: defaultController.frame,
+      seek: over(map(subControllers, 'seek')),
+      nextFrame: over(map(subControllers, 'nextFrame')),
+      prevFrame: over(map(subControllers, 'prevFrame')),
+      volume: defaultController.volume,
+      setVolume: over(map(subControllers, 'setVolume')),
+      speed: defaultController.speed,
+      setSpeed: over(map(subControllers, 'setSpeed')),
+      lockedCamera: defaultController.lockedCamera,
+      toggleLockedCamera: over(map(subControllers, 'toggleLockedCamera')),
+      pause: over(map(subControllers, 'pause')),
+      play: over(map(subControllers, 'play')),
+      playing: defaultController.playing,
+      resetZoom: over(map(subControllers, 'resetZoom')),
+      currentTime: defaultController.currentTime,
+      getController,
+    };
+  });
+
+  provide(AggregateControllerSymbol, aggregateController as Ref<AggregateMediaController>);
+  provide(CameraInitializerSymbol, initialize as CameraInitializerFunc);
+
   return {
+    aggregateController,
     containers,
-    datas,
+    state,
     geoViewers,
     imageCursors,
     initialize,
     onResize,
-    resetMapDimensions,
-    addCamera,
   };
 }
diff --git a/client/src/components/controls/Controls.vue b/client/src/components/controls/Controls.vue
index 0fbd14ffd..e93ba2257 100644
--- a/client/src/components/controls/Controls.vue
+++ b/client/src/components/controls/Controls.vue
@@ -1,26 +1,20 @@
 <script lang="ts">
 import {
-  defineComponent, reactive, watch, PropType,
+  defineComponent, reactive, watch,
 } from '@vue/composition-api';
 import { usePrompt } from 'dive-common/vue-utilities/prompt-service';
-import { MediaControlAggregator } from '../annotators/mediaControllerType';
+import { injectAggregateController } from '../annotators/useMediaController';
 
 export default defineComponent({
   name: 'Control',
 
-  props: {
-    mediaControls: {
-      type: Object as PropType<MediaControlAggregator>,
-      required: true,
-    },
-  },
-  setup(props) {
+  setup() {
     const data = reactive({
       frame: 0,
       dragging: false,
     });
 
-    const mediaController = props.mediaControls;
+    const mediaController = injectAggregateController().value;
     const { visible } = usePrompt();
     watch(mediaController.frame, (frame) => {
       if (!data.dragging) {
@@ -70,7 +64,10 @@ export default defineComponent({
       { bind: 'd', handler: mediaController.prevFrame, disabled: visible() },
     ]"
   >
-    <v-card class="px-4 py-1">
+    <v-card
+      class="px-4 py-1"
+      tile
+    >
       <v-slider
         hide-details
         :min="0"
diff --git a/client/src/components/controls/FileNameTimeDisplay.vue b/client/src/components/controls/FileNameTimeDisplay.vue
index 75d24fcdf..1a0ea951f 100644
--- a/client/src/components/controls/FileNameTimeDisplay.vue
+++ b/client/src/components/controls/FileNameTimeDisplay.vue
@@ -1,7 +1,7 @@
 <script lang="ts">
 import { computed, defineComponent, PropType } from '@vue/composition-api';
 import { useSelectedCamera } from '../../provides';
-import { MediaControlAggregator } from '../annotators/mediaControllerType';
+import { injectAggregateController } from '../annotators/useMediaController';
 
 export default defineComponent({
   name: 'FileNameTimeDisplay',
@@ -10,25 +10,26 @@ export default defineComponent({
       type: String as PropType<'filename' |'time'>,
       required: true,
     },
-    mediaControls: {
-      type: Object as PropType<MediaControlAggregator>,
-      required: true,
-    },
   },
   setup(props) {
-    const {
-      currentTime: currentTimes, duration: durations, filename: filenames, frame,
-    } = props.mediaControls;
+    const mediaController = injectAggregateController();
+    const { currentTime, frame } = mediaController.value;
     const selectedCamera = useSelectedCamera();
-    const filename = computed(() => filenames.value[selectedCamera.value]);
-    const duration = computed(() => durations.value[selectedCamera.value]);
-    const currentTime = computed(() => currentTimes.value[selectedCamera.value]);
+    const selectedCameraController = computed(() => {
+      try {
+        return mediaController.value.getController(selectedCamera.value);
+      } catch {
+        return undefined;
+      }
+    });
+    const filename = computed(() => (selectedCameraController.value?.filename.value));
+    const duration = computed(() => (selectedCameraController.value?.duration.value));
     const display = computed(() => {
       let value = 'unsupported display';
       if (props.displayType === 'filename') {
-        value = filename.value;
+        value = filename.value || 'uninitialized';
       } if (props.displayType === 'time') {
-        value = `${new Date(currentTime.value * 1000).toISOString().substr(11, 8)} / ${new Date(duration.value * 1000).toISOString().substr(11, 8)}`;
+        value = `${new Date(currentTime.value * 1000).toISOString().substr(11, 8)} / ${new Date((duration.value || 0) * 1000).toISOString().substr(11, 8)}`;
       }
       return value;
     });

From bd9d973ef9abb0f85f435061ecd58ab975180158 Mon Sep 17 00:00:00 2001
From: Bryon Lewis <Bryon.Lewis@kitware.com>
Date: Fri, 25 Feb 2022 15:47:18 -0500
Subject: [PATCH 13/22] adding icons and keyboard shortcuts

---
 client/dive-common/components/Viewer.vue         |  5 +++++
 .../components/annotators/useMediaController.ts  | 16 ++++++++--------
 2 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/client/dive-common/components/Viewer.vue b/client/dive-common/components/Viewer.vue
index 50c77b574..80d5360cb 100644
--- a/client/dive-common/components/Viewer.vue
+++ b/client/dive-common/components/Viewer.vue
@@ -645,6 +645,11 @@ export default defineComponent({
       >
         <div
           v-if="progress.loaded"
+          v-mousetrap="[
+            { bind: 'n', handler: () => handler.trackAdd() },
+            { bind: 'r', handler: () => mediaController.resetZoom() },
+            { bind: 'esc', handler: () => handler.trackAbort() },
+          ]"
           class="d-flex flex-column grow"
         >
           <div class="d-flex grow">
diff --git a/client/src/components/annotators/useMediaController.ts b/client/src/components/annotators/useMediaController.ts
index a5e537c43..c8f8dcd8a 100644
--- a/client/src/components/annotators/useMediaController.ts
+++ b/client/src/components/annotators/useMediaController.ts
@@ -297,14 +297,14 @@ export function useMediaController() {
           imageCursorRef.value.style.display = 'block';
         }
       },
-      handleMouseMove(/*evt: MouseEvent*/) {
-        // const offsetX = evt.clientX + 10;
-        // const offsetY = evt.clientY - 25;
-        // window.requestAnimationFrame(() => {
-        //   if (imageCursorRef.value) {
-        //     imageCursorRef.value.style.transform = `translate(${offsetX}px, ${offsetY}px)`;
-        //   }
-        // });
+      handleMouseMove(evt: MouseEvent) {
+        const offsetX = evt.clientX + 10;
+        const offsetY = evt.clientY - 25;
+        window.requestAnimationFrame(() => {
+          if (imageCursorRef.value) {
+            imageCursorRef.value.style.transform = `translate(${offsetX}px, ${offsetY}px)`;
+          }
+        });
       },
     };
 

From 910b53e8cbe13667ffdd46a6d8a3ded2bdc6ecc1 Mon Sep 17 00:00:00 2001
From: Bryon Lewis <Bryon.Lewis@kitware.com>
Date: Fri, 25 Feb 2022 15:53:31 -0500
Subject: [PATCH 14/22] fix emit

---
 client/dive-common/components/ControlsContainer.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/dive-common/components/ControlsContainer.vue b/client/dive-common/components/ControlsContainer.vue
index 7470b7664..f3877d64d 100644
--- a/client/dive-common/components/ControlsContainer.vue
+++ b/client/dive-common/components/ControlsContainer.vue
@@ -1,6 +1,6 @@
 <script lang="ts">
 import {
-  defineComponent, ref, PropType, emit,
+  defineComponent, ref, PropType,
 } from '@vue/composition-api';
 import type { DatasetType } from 'dive-common/apispec';
 import FileNameTimeDisplay from 'vue-media-annotator/components/controls/FileNameTimeDisplay.vue';
@@ -40,7 +40,7 @@ export default defineComponent({
     },
   },
 
-  setup() {
+  setup(_, { emit }) {
     const currentView = ref('Detections');
 
     const ticks = ref([0.25, 0.5, 0.75, 1.0, 2.0, 4.0, 8.0]);

From d7276584a70a0e8104190293b70e9f8ca0ce750b Mon Sep 17 00:00:00 2001
From: Bryon Lewis <Bryon.Lewis@kitware.com>
Date: Mon, 28 Feb 2022 11:41:54 -0500
Subject: [PATCH 15/22] modifying symbols to strings for TS

---
 client/dive-common/components/Viewer.vue      |  4 ++--
 .../components/annotators/ImageAnnotator.vue  |  2 +-
 .../annotators/useMediaController.ts          | 19 ++++++++++---------
 3 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/client/dive-common/components/Viewer.vue b/client/dive-common/components/Viewer.vue
index 80d5360cb..7a67dae4d 100644
--- a/client/dive-common/components/Viewer.vue
+++ b/client/dive-common/components/Viewer.vue
@@ -1,8 +1,8 @@
 <script lang="ts">
 import {
-  defineComponent, ref, toRef, computed, Ref, reactive, watch, onMounted, onBeforeUnmount,
+  defineComponent, ref, toRef, computed, Ref, reactive, watch, onBeforeUnmount,
 } from '@vue/composition-api';
-import type { CombinedVueInstance, Vue } from 'vue/types/vue';
+import type { Vue } from 'vue/types/vue';
 import type { AxiosError } from 'axios';
 
 /* VUE MEDIA ANNOTATOR */
diff --git a/client/src/components/annotators/ImageAnnotator.vue b/client/src/components/annotators/ImageAnnotator.vue
index a719223eb..9e9590099 100644
--- a/client/src/components/annotators/ImageAnnotator.vue
+++ b/client/src/components/annotators/ImageAnnotator.vue
@@ -3,7 +3,7 @@ import {
   defineComponent, ref, onUnmounted, PropType, toRef, watch,
 } from '@vue/composition-api';
 import { SetTimeFunc } from '../../use/useTimeObserver';
-import { injectAggregateController, injectCameraInitializer } from './useMediaController';
+import { injectCameraInitializer } from './useMediaController';
 
 export interface ImageDataItem {
   url: string;
diff --git a/client/src/components/annotators/useMediaController.ts b/client/src/components/annotators/useMediaController.ts
index c8f8dcd8a..2639ce7c0 100644
--- a/client/src/components/annotators/useMediaController.ts
+++ b/client/src/components/annotators/useMediaController.ts
@@ -71,12 +71,12 @@ export function injectCameraInitializer() {
 
 export function useMediaController() {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const geoViewers: Record<symbol, Ref<any>> = {};
-  const containers: Record<symbol, Ref<HTMLElement | undefined>> = {};
-  const imageCursors: Record<symbol, Ref<HTMLElement | undefined>> = {};
+  const geoViewers: Record<string, Ref<any>> = {};
+  const containers: Record<string, Ref<HTMLElement | undefined>> = {};
+  const imageCursors: Record<string, Ref<HTMLElement | undefined>> = {};
   const cameras: Ref<symbol[]> = ref([]);
   const subControllers: MediaController[] = [];
-  const state: Record<symbol, UnwrapRef<MediaControllerReactiveData>> = {};
+  const state: Record<string, UnwrapRef<MediaControllerReactiveData>> = {};
   const cameraControllerSymbols: Record<string, symbol> = {};
 
   function getController(camera?: string) {
@@ -98,7 +98,7 @@ export function useMediaController() {
    */
   function onResize() {
     subControllers.forEach((mc) => {
-      const camera = cameraControllerSymbols[mc.cameraName.value];
+      const camera = cameraControllerSymbols[mc.cameraName.value].toString();
       const geoViewerRef = geoViewers[camera];
       const containerRef = containers[camera];
       if (geoViewerRef.value === undefined || containerRef.value === undefined) {
@@ -117,7 +117,7 @@ export function useMediaController() {
 
   function toggleLockedCamera() {
     cameras.value.forEach((camera) => {
-      const data = state[camera];
+      const data = state[camera.toString()];
       data.lockedCamera = !data.lockedCamera;
     });
   }
@@ -136,8 +136,9 @@ export function useMediaController() {
     setVolume(level: number): void;
     setSpeed(level: number): void;
   }) {
-    const camera = Symbol(`media-controller-${cameraName}`);
-    cameraControllerSymbols[cameraName] = camera;
+    const cameraSymbol = Symbol(`media-controller-${cameraName}`);
+    cameraControllerSymbols[cameraName] = cameraSymbol;
+    const camera = cameraSymbol.toString();
     geoViewers[camera] = ref(undefined);
     containers[camera] = ref(undefined);
     imageCursors[camera] = ref(undefined);
@@ -340,7 +341,7 @@ export function useMediaController() {
     };
 
     subControllers.push(mediaController);
-    cameras.value.push(camera);
+    cameras.value.push(cameraSymbol);
 
     return {
       state: state[camera],

From f4adf57499e8d31a2b0c7f0002a496ff98b35465 Mon Sep 17 00:00:00 2001
From: Bryon Lewis <Bryon.Lewis@kitware.com>
Date: Mon, 28 Feb 2022 12:41:52 -0500
Subject: [PATCH 16/22] build fix

---
 client/dive-common/use/useModeManager.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/dive-common/use/useModeManager.ts b/client/dive-common/use/useModeManager.ts
index 82efd9869..a1bb24c2d 100644
--- a/client/dive-common/use/useModeManager.ts
+++ b/client/dive-common/use/useModeManager.ts
@@ -80,7 +80,7 @@ export default function useModeManager({
   const editingDetails = computed(() => {
     _depend();
     if (editingMode.value && selectedTrackId.value !== null) {
-      const { frame } = mediaController.value;
+      const { frame } = aggregateController.value;
       const track = trackMap.get(selectedTrackId.value);
       if (track) {
         const [feature] = track.getFeature(frame.value);

From d21d46206f78f2c8a7ff391601653c5ef1721686 Mon Sep 17 00:00:00 2001
From: Bryon Lewis <Bryon.Lewis@kitware.com>
Date: Mon, 28 Feb 2022 12:59:02 -0500
Subject: [PATCH 17/22] fixing controls collapse sizing

---
 client/dive-common/components/Viewer.vue | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/client/dive-common/components/Viewer.vue b/client/dive-common/components/Viewer.vue
index 7a67dae4d..e7e486338 100644
--- a/client/dive-common/components/Viewer.vue
+++ b/client/dive-common/components/Viewer.vue
@@ -1,6 +1,6 @@
 <script lang="ts">
 import {
-  defineComponent, ref, toRef, computed, Ref, reactive, watch, onBeforeUnmount,
+  defineComponent, ref, toRef, computed, Ref, reactive, watch, onBeforeUnmount, nextTick,
 } from '@vue/composition-api';
 import type { Vue } from 'vue/types/vue';
 import type { AxiosError } from 'axios';
@@ -425,7 +425,10 @@ export default defineComponent({
       if (previous) observer.unobserve(previous.$el);
       observer.observe(controlsRef.value.$el);
     });
-    watch(controlsCollapsed, handleResize);
+    watch(controlsCollapsed, async () => {
+      await nextTick();
+      handleResize();
+    });
     onBeforeUnmount(() => {
       observer.unobserve(controlsRef.value.$el);
     });

From 0ae6e411a5ef2428a0d19759a484aedecb7405f5 Mon Sep 17 00:00:00 2001
From: Bryon Lewis <Bryon.Lewis@kitware.com>
Date: Tue, 8 Mar 2022 14:30:07 -0500
Subject: [PATCH 18/22] reloading syncing

---
 client/dive-common/components/Viewer.vue      | 11 +++++----
 .../annotators/useMediaController.ts          | 23 ++++++++++++++-----
 2 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/client/dive-common/components/Viewer.vue b/client/dive-common/components/Viewer.vue
index e7e486338..16b840804 100644
--- a/client/dive-common/components/Viewer.vue
+++ b/client/dive-common/components/Viewer.vue
@@ -92,7 +92,7 @@ export default defineComponent({
     const selectedCamera = ref('default');
     const playbackComponent = ref(undefined as Vue | undefined);
     const readonlyState = computed(() => props.readonlyMode || props.revision !== undefined);
-    const { aggregateController, onResize } = useMediaController();
+    const { aggregateController, onResize, clear: mediaControllerClear } = useMediaController();
     const { time, updateTime, initialize: initTime } = useTimeObserver();
     const imageData = ref({ default: [] } as Record<string, FrameImage[]>);
     const datasetType: Ref<DatasetType> = ref('image-sequence');
@@ -405,6 +405,7 @@ export default defineComponent({
     loadData();
 
     const reloadAnnotations = async () => {
+      mediaControllerClear();
       clearAllTracks();
       discardChanges();
       progress.loaded = false;
@@ -417,13 +418,15 @@ export default defineComponent({
     const controlsHeight = ref(0);
     const controlsCollapsed = ref(false);
     function handleResize() {
-      controlsHeight.value = controlsRef.value.$el.clientHeight;
-      onResize();
+      if (controlsRef.value) {
+        controlsHeight.value = controlsRef.value.$el.clientHeight;
+        onResize();
+      }
     }
     const observer = new ResizeObserver(handleResize);
     watch(controlsRef, (previous) => {
       if (previous) observer.unobserve(previous.$el);
-      observer.observe(controlsRef.value.$el);
+      if (controlsRef.value) observer.observe(controlsRef.value.$el);
     });
     watch(controlsCollapsed, async () => {
       await nextTick();
diff --git a/client/src/components/annotators/useMediaController.ts b/client/src/components/annotators/useMediaController.ts
index 2639ce7c0..19b7e7f72 100644
--- a/client/src/components/annotators/useMediaController.ts
+++ b/client/src/components/annotators/useMediaController.ts
@@ -71,13 +71,23 @@ export function injectCameraInitializer() {
 
 export function useMediaController() {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const geoViewers: Record<string, Ref<any>> = {};
-  const containers: Record<string, Ref<HTMLElement | undefined>> = {};
-  const imageCursors: Record<string, Ref<HTMLElement | undefined>> = {};
+  let geoViewers: Record<string, Ref<any>> = {};
+  let containers: Record<string, Ref<HTMLElement | undefined>> = {};
+  let imageCursors: Record<string, Ref<HTMLElement | undefined>> = {};
   const cameras: Ref<symbol[]> = ref([]);
-  const subControllers: MediaController[] = [];
-  const state: Record<string, UnwrapRef<MediaControllerReactiveData>> = {};
-  const cameraControllerSymbols: Record<string, symbol> = {};
+  let subControllers: MediaController[] = [];
+  let state: Record<string, UnwrapRef<MediaControllerReactiveData>> = {};
+  let cameraControllerSymbols: Record<string, symbol> = {};
+
+  function clear() {
+    geoViewers = {};
+    containers = {};
+    imageCursors = {};
+    cameras.value = [];
+    subControllers = [];
+    state = {};
+    cameraControllerSymbols = {};
+  }
 
   function getController(camera?: string) {
     if (cameras.value.length === 0) {
@@ -389,5 +399,6 @@ export function useMediaController() {
     imageCursors,
     initialize,
     onResize,
+    clear,
   };
 }

From 647c423653bba5f2f72138bc909422ab3d8cead9 Mon Sep 17 00:00:00 2001
From: Bryon Lewis <Bryon.Lewis@kitware.com>
Date: Tue, 22 Mar 2022 11:23:01 -0400
Subject: [PATCH 19/22] addressing comments

---
 client/dive-common/components/Viewer.vue | 20 +++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/client/dive-common/components/Viewer.vue b/client/dive-common/components/Viewer.vue
index 16b840804..e3a1031cd 100644
--- a/client/dive-common/components/Viewer.vue
+++ b/client/dive-common/components/Viewer.vue
@@ -48,10 +48,6 @@ export interface ImageDataItem {
   filename: string;
 }
 
-function loadImageFunc(imageDataItem: ImageDataItem, img: HTMLImageElement) {
-  // eslint-disable-next-line no-param-reassign
-  img.src = imageDataItem.url;
-}
 
 export default defineComponent({
   components: {
@@ -98,7 +94,7 @@ export default defineComponent({
     const datasetType: Ref<DatasetType> = ref('image-sequence');
     const datasetName = ref('');
     const saveInProgress = ref(false);
-    const videoUrl = ref({ default: null } as Record<string, null | string>);
+    const videoUrl: Ref<Record<string, string>> = ref({ });
     const { loadDetections, loadMetadata, saveMetadata } = useApi();
     const progress = reactive({
       // Loaded flag prevents annotator window from populating
@@ -353,7 +349,9 @@ export default defineComponent({
         const filteredMultiCamList = multiCamList.value.filter((item) => item !== 'default');
         if (filteredMultiCamList.length === 0) {
           imageData.value[selectedCamera.value] = cloneDeep(meta.imageData) as FrameImage[];
-          videoUrl.value[selectedCamera.value] = meta.videoUrl || null;
+          if (meta.videoUrl) {
+            videoUrl.value[selectedCamera.value] = meta.videoUrl;
+          }
           datasetType.value = meta.type as DatasetType;
           const trackData = await loadDetections(datasetId.value);
           const tracks = Object.values(trackData);
@@ -373,7 +371,9 @@ export default defineComponent({
             // eslint-disable-next-line no-await-in-loop
             const subCameraMeta = await loadMetadata(`${baseMulticamDatasetId.value}/${camera}`);
             imageData.value[camera] = cloneDeep(subCameraMeta.imageData) as FrameImage[];
-            videoUrl.value[camera] = subCameraMeta.videoUrl || null;
+            if (subCameraMeta.videoUrl) {
+              videoUrl.value[camera] = subCameraMeta.videoUrl;
+            }
             addCamera(camera);
             // eslint-disable-next-line no-await-in-loop
             const camTrackData = await loadDetections(`${baseMulticamDatasetId.value}/${camera}`);
@@ -424,6 +424,9 @@ export default defineComponent({
       }
     }
     const observer = new ResizeObserver(handleResize);
+    /* On a reload this will watch the controls element and add on observer
+     * so that once done loading the or if the controlsRef is collapsed it will resize all cameras
+    */
     watch(controlsRef, (previous) => {
       if (previous) observer.unobserve(previous.$el);
       if (controlsRef.value) observer.observe(controlsRef.value.$el);
@@ -519,7 +522,6 @@ export default defineComponent({
       readonlyState,
       /* methods */
       handler: globalHandler,
-      loadImageFunc,
       save,
       saveThreshold,
       updateTime,
@@ -675,7 +677,7 @@ export default defineComponent({
                 :class="{'selected-camera': selectedCamera === camera && camera !== 'default'}"
                 v-bind="{
                   imageData: imageData[camera], videoUrl: videoUrl[camera],
-                  updateTime, frameRate, originalFps, loadImageFunc, camera }"
+                  updateTime, frameRate, originalFps, camera }"
               >
                 <LayerManager :camera="camera" />
               </component>

From 7a87b6c6b7f477e18b2089d5daa0b7f5a6ad6f05 Mon Sep 17 00:00:00 2001
From: Bryon Lewis <Bryon.Lewis@kitware.com>
Date: Tue, 22 Mar 2022 13:23:50 -0400
Subject: [PATCH 20/22] additional fixes

---
 client/dive-common/components/Viewer.vue      | 12 +++++------
 client/dive-common/use/useModeManager.ts      | 21 ++++++++++---------
 client/src/components/LayerManager.vue        |  4 ++--
 .../components/annotators/ImageAnnotator.vue  |  2 +-
 .../components/annotators/VideoAnnotator.vue  |  2 +-
 5 files changed, 21 insertions(+), 20 deletions(-)

diff --git a/client/dive-common/components/Viewer.vue b/client/dive-common/components/Viewer.vue
index e3a1031cd..cacbc88a3 100644
--- a/client/dive-common/components/Viewer.vue
+++ b/client/dive-common/components/Viewer.vue
@@ -83,9 +83,9 @@ export default defineComponent({
     const loadError = ref('');
     const baseMulticamDatasetId = ref(null as string | null);
     const datasetId = toRef(props, 'id');
-    const multiCamList: Ref<string[]> = ref(['default']);
-    const defaultCamera = ref('default');
-    const selectedCamera = ref('default');
+    const multiCamList: Ref<string[]> = ref(['singleCam']);
+    const defaultCamera = ref('singleCam');
+    const selectedCamera = ref('singleCam');
     const playbackComponent = ref(undefined as Vue | undefined);
     const readonlyState = computed(() => props.readonlyMode || props.revision !== undefined);
     const { aggregateController, onResize, clear: mediaControllerClear } = useMediaController();
@@ -346,7 +346,7 @@ export default defineComponent({
           originalFps: meta.originalFps || null,
         });
         // Load non-Default Cameras if they exist:
-        const filteredMultiCamList = multiCamList.value.filter((item) => item !== 'default');
+        const filteredMultiCamList = multiCamList.value.filter((item) => item !== 'singleCam');
         if (filteredMultiCamList.length === 0) {
           imageData.value[selectedCamera.value] = cloneDeep(meta.imageData) as FrameImage[];
           if (meta.videoUrl) {
@@ -570,7 +570,7 @@ export default defineComponent({
           </template>
         </EditorMenu>
         <v-select
-          v-if="multiCamList.length && defaultCamera !== 'default'"
+          v-if="multiCamList.length && defaultCamera !== 'singleCam'"
           :value="selectedCamera"
           :items="multiCamList"
           label="Camera"
@@ -674,7 +674,7 @@ export default defineComponent({
                 v-if="(imageData[camera].length || videoUrl[camera]) && progress.loaded"
                 ref="subPlaybackComponent"
                 class="fill-height"
-                :class="{'selected-camera': selectedCamera === camera && camera !== 'default'}"
+                :class="{'selected-camera': selectedCamera === camera && camera !== 'singleCam'}"
                 v-bind="{
                   imageData: imageData[camera], videoUrl: videoUrl[camera],
                   updateTime, frameRate, originalFps, camera }"
diff --git a/client/dive-common/use/useModeManager.ts b/client/dive-common/use/useModeManager.ts
index a1bb24c2d..a57dc9737 100644
--- a/client/dive-common/use/useModeManager.ts
+++ b/client/dive-common/use/useModeManager.ts
@@ -41,7 +41,7 @@ export default function useModeManager({
   removeTrack,
 }: {
   selectedTrackId: Ref<TrackId | null>;
-  selectedCamera: Ref<string>;
+  selectedCamera: Ref<string | null>;
   editingTrack: Ref<boolean>;
   trackMap: Map<TrackId, Track>;
   camTrackMap: Record<string, Map<TrackId, Track>>;
@@ -229,7 +229,7 @@ export default function useModeManager({
   function handleUpdateRectBounds(frameNum: number, flickNum: number, bounds: RectBounds) {
     if (selectedTrackId.value !== null) {
       let track = trackMap.get(selectedTrackId.value);
-      if (selectedCamera.value !== 'default') {
+      if (selectedCamera.value !== null) {
         track = camTrackMap[selectedCamera.value].get(selectedTrackId.value);
       }
       if (track) {
@@ -278,7 +278,7 @@ export default function useModeManager({
 
     if (selectedTrackId.value !== null) {
       let track = trackMap.get(selectedTrackId.value);
-      if (selectedCamera.value !== 'default') {
+      if (selectedCamera.value !== null) {
         track = camTrackMap[selectedCamera.value].get(selectedTrackId.value);
       }
       if (track) {
@@ -288,10 +288,11 @@ export default function useModeManager({
 
         // Give each recipe the opportunity to make changes
         recipes.forEach((recipe) => {
-          if (!track) {
-            return;
-          }
-          const changes = recipe.update(eventType, frameNum, track, [data], key);
+          // "track is possibly undefined" is typescript bug
+          // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+          // @ts-ignore
+          const _track: Track = track;
+          const changes = recipe.update(eventType, frameNum, _track, [data], key);
           // Prevent key conflicts among recipes
           Object.keys(changes.data).forEach((key_) => {
             if (key_ in update.geoJsonFeatureRecord) {
@@ -379,7 +380,7 @@ export default function useModeManager({
   function handleRemovePoint() {
     if (selectedTrackId.value !== null && selectedFeatureHandle.value !== -1) {
       let track = trackMap.get(selectedTrackId.value);
-      if (selectedCamera.value !== 'default') {
+      if (selectedCamera.value !== null) {
         track = camTrackMap[selectedCamera.value].get(selectedTrackId.value);
       }
       if (track !== undefined) {
@@ -404,7 +405,7 @@ export default function useModeManager({
   function handleRemoveAnnotation() {
     if (selectedTrackId.value !== null) {
       let track = trackMap.get(selectedTrackId.value);
-      if (selectedCamera.value !== 'default') {
+      if (selectedCamera.value !== null) {
         track = camTrackMap[selectedCamera.value].get(selectedTrackId.value);
       }
       if (track !== undefined) {
@@ -459,7 +460,7 @@ export default function useModeManager({
   /** Toggle editing mode for track */
   function handleTrackEdit(trackId: TrackId) {
     let track = getTrack(trackMap, trackId);
-    if (selectedCamera.value !== 'default') {
+    if (selectedCamera.value !== null) {
       track = getTrack(camTrackMap[selectedCamera.value], trackId);
     }
     seekNearest(track);
diff --git a/client/src/components/LayerManager.vue b/client/src/components/LayerManager.vue
index 353d81571..0601467bf 100644
--- a/client/src/components/LayerManager.vue
+++ b/client/src/components/LayerManager.vue
@@ -50,7 +50,7 @@ export default defineComponent({
     },
     camera: {
       type: String,
-      default: 'default',
+      default: 'singleCam',
     },
   },
   setup(props) {
@@ -59,7 +59,7 @@ export default defineComponent({
     const camTrackMap = useCamTrackMap();
     const selectedCamera = useSelectedCamera();
     let trackMap = useTrackMap();
-    if (props.camera !== 'default' && camTrackMap[props.camera] !== undefined) {
+    if (props.camera !== 'singleCam' && camTrackMap[props.camera] !== undefined) {
       trackMap = camTrackMap[props.camera];
     }
     const enabledTracksRef = useEnabledTracks();
diff --git a/client/src/components/annotators/ImageAnnotator.vue b/client/src/components/annotators/ImageAnnotator.vue
index 9e9590099..6e8dc6017 100644
--- a/client/src/components/annotators/ImageAnnotator.vue
+++ b/client/src/components/annotators/ImageAnnotator.vue
@@ -49,7 +49,7 @@ export default defineComponent({
     },
     camera: {
       type: String as PropType<string>,
-      default: 'default',
+      default: 'singleCam',
     },
   },
 
diff --git a/client/src/components/annotators/VideoAnnotator.vue b/client/src/components/annotators/VideoAnnotator.vue
index 0c999aeb9..e8862751a 100644
--- a/client/src/components/annotators/VideoAnnotator.vue
+++ b/client/src/components/annotators/VideoAnnotator.vue
@@ -100,7 +100,7 @@ export default defineComponent({
     },
     camera: {
       type: String as PropType<string>,
-      default: 'default',
+      default: 'singleCam',
     },
   },
 

From 35f1d5c82ee5321c7a12d7fef9cba03dc49eef2f Mon Sep 17 00:00:00 2001
From: Bryon Lewis <Bryon.Lewis@kitware.com>
Date: Tue, 22 Mar 2022 13:35:54 -0400
Subject: [PATCH 21/22] switching to singleCam for default name

---
 client/dive-common/components/Viewer.vue |  2 +-
 client/dive-common/use/useModeManager.ts | 12 ++++++------
 client/src/provides.ts                   |  2 +-
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/client/dive-common/components/Viewer.vue b/client/dive-common/components/Viewer.vue
index cacbc88a3..bb609bff3 100644
--- a/client/dive-common/components/Viewer.vue
+++ b/client/dive-common/components/Viewer.vue
@@ -436,7 +436,7 @@ export default defineComponent({
       handleResize();
     });
     onBeforeUnmount(() => {
-      observer.unobserve(controlsRef.value.$el);
+      if (controlsRef.value) observer.unobserve(controlsRef.value.$el);
     });
 
     const changeCamera = async (camera: string) => {
diff --git a/client/dive-common/use/useModeManager.ts b/client/dive-common/use/useModeManager.ts
index a57dc9737..6ea523dd6 100644
--- a/client/dive-common/use/useModeManager.ts
+++ b/client/dive-common/use/useModeManager.ts
@@ -41,7 +41,7 @@ export default function useModeManager({
   removeTrack,
 }: {
   selectedTrackId: Ref<TrackId | null>;
-  selectedCamera: Ref<string | null>;
+  selectedCamera: Ref<string>;
   editingTrack: Ref<boolean>;
   trackMap: Map<TrackId, Track>;
   camTrackMap: Record<string, Map<TrackId, Track>>;
@@ -229,7 +229,7 @@ export default function useModeManager({
   function handleUpdateRectBounds(frameNum: number, flickNum: number, bounds: RectBounds) {
     if (selectedTrackId.value !== null) {
       let track = trackMap.get(selectedTrackId.value);
-      if (selectedCamera.value !== null) {
+      if (selectedCamera.value !== 'singleCam') {
         track = camTrackMap[selectedCamera.value].get(selectedTrackId.value);
       }
       if (track) {
@@ -278,7 +278,7 @@ export default function useModeManager({
 
     if (selectedTrackId.value !== null) {
       let track = trackMap.get(selectedTrackId.value);
-      if (selectedCamera.value !== null) {
+      if (selectedCamera.value !== 'singleCam') {
         track = camTrackMap[selectedCamera.value].get(selectedTrackId.value);
       }
       if (track) {
@@ -380,7 +380,7 @@ export default function useModeManager({
   function handleRemovePoint() {
     if (selectedTrackId.value !== null && selectedFeatureHandle.value !== -1) {
       let track = trackMap.get(selectedTrackId.value);
-      if (selectedCamera.value !== null) {
+      if (selectedCamera.value !== 'singleCam') {
         track = camTrackMap[selectedCamera.value].get(selectedTrackId.value);
       }
       if (track !== undefined) {
@@ -405,7 +405,7 @@ export default function useModeManager({
   function handleRemoveAnnotation() {
     if (selectedTrackId.value !== null) {
       let track = trackMap.get(selectedTrackId.value);
-      if (selectedCamera.value !== null) {
+      if (selectedCamera.value !== 'singleCam') {
         track = camTrackMap[selectedCamera.value].get(selectedTrackId.value);
       }
       if (track !== undefined) {
@@ -460,7 +460,7 @@ export default function useModeManager({
   /** Toggle editing mode for track */
   function handleTrackEdit(trackId: TrackId) {
     let track = getTrack(trackMap, trackId);
-    if (selectedCamera.value !== null) {
+    if (selectedCamera.value !== 'singleCam') {
       track = getTrack(camTrackMap[selectedCamera.value], trackId);
     }
     seekNearest(track);
diff --git a/client/src/provides.ts b/client/src/provides.ts
index b758cb492..bdc47a75c 100644
--- a/client/src/provides.ts
+++ b/client/src/provides.ts
@@ -276,7 +276,7 @@ function dummyState(): State {
     }),
     selectedKey: ref(''),
     selectedTrackId: ref(null),
-    selectedCamera: ref('default'),
+    selectedCamera: ref('singleCam'),
     stateStyles: {
       disabled: style,
       selected: style,

From 31185ad430893c3fada7f0e8abc87aeba3f72bc1 Mon Sep 17 00:00:00 2001
From: Bryon Lewis <Bryon.Lewis@kitware.com>
Date: Wed, 23 Mar 2022 07:52:53 -0400
Subject: [PATCH 22/22] changing to 'as Track'

---
 client/dive-common/use/useModeManager.ts | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/client/dive-common/use/useModeManager.ts b/client/dive-common/use/useModeManager.ts
index 6ea523dd6..34a299b05 100644
--- a/client/dive-common/use/useModeManager.ts
+++ b/client/dive-common/use/useModeManager.ts
@@ -288,11 +288,8 @@ export default function useModeManager({
 
         // Give each recipe the opportunity to make changes
         recipes.forEach((recipe) => {
-          // "track is possibly undefined" is typescript bug
-          // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-          // @ts-ignore
-          const _track: Track = track;
-          const changes = recipe.update(eventType, frameNum, _track, [data], key);
+          // "as Track" used because TS doesn't know that forEach has the proper track setting
+          const changes = recipe.update(eventType, frameNum, track as Track, [data], key);
           // Prevent key conflicts among recipes
           Object.keys(changes.data).forEach((key_) => {
             if (key_ in update.geoJsonFeatureRecord) {