From 2eea8ccf0f7baf0025663842139f7f51dca81692 Mon Sep 17 00:00:00 2001
From: Brandon Davis <git@subdavis.com>
Date: Tue, 15 Feb 2022 09:46:32 -0500
Subject: [PATCH 1/3] WIP

---
 .../components/AnnotatorWrapper.vue           | 196 ------------
 .../components/ConfidenceFilter.vue           |   4 +-
 .../components/ControlsContainer.vue          |  15 +-
 client/dive-common/components/Sidebar.vue     |  12 +-
 client/dive-common/components/Viewer.vue      | 106 ++++---
 client/dive-common/use/useModeManager.ts      |  20 +-
 client/dive-common/use/useRequest.ts          |   3 +-
 client/src/components/LayerManager.vue        |   5 +-
 .../components/annotators/ImageAnnotator.vue  |  42 ++-
 .../components/annotators/VideoAnnotator.vue  |  37 +--
 .../annotators/mediaControllerType.ts         |  79 +++--
 .../annotators/useMediaController.ts          | 280 +++++++++++-------
 client/src/components/controls/Controls.vue   |  14 +-
 .../controls/FileNameTimeDisplay.vue          |  27 +-
 14 files changed, 363 insertions(+), 477 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..7d4d2cacf 100644
--- a/client/dive-common/components/ControlsContainer.vue
+++ b/client/dive-common/components/ControlsContainer.vue
@@ -7,10 +7,10 @@ import FileNameTimeDisplay from 'vue-media-annotator/components/controls/FileNam
 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,13 +34,9 @@ export default defineComponent({
       type: String as PropType<DatasetType>,
       required: true,
     },
-    mediaControls: {
-      type: Object as PropType<MediaControlAggregator>,
-      required: true,
-    },
   },
 
-  setup(props) {
+  setup() {
     const currentView = ref('Detections');
     const collapsed = ref(false);
 
@@ -55,7 +52,7 @@ export default defineComponent({
     }
     const {
       maxFrame, frame, seek, volume, setVolume, setSpeed, speed,
-    } = props.mediaControls;
+    } = injectAggregateController().value;
 
     return {
       currentView,
@@ -79,7 +76,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
@@ -126,7 +123,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 +201,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 28fab4e9f..f0e8ababe 100644
--- a/client/dive-common/components/Viewer.vue
+++ b/client/dive-common/components/Viewer.vue
@@ -3,6 +3,7 @@ import {
   defineComponent, ref, toRef, computed, Ref, reactive, watch,
 } from '@vue/composition-api';
 import type { 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,16 +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 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 } = useMediaController();
     const { time, updateTime, initialize: initTime } = useTimeObserver();
     const imageData = ref({ default: [] } as Record<string, FrameImage[]>);
     const datasetType: Ref<DatasetType> = ref('image-sequence');
@@ -200,7 +207,7 @@ export default defineComponent({
       editingTrack,
       trackMap,
       camTrackMap,
-      mediaControlAggregator,
+      aggregateController,
       selectTrack,
       selectNextTrack,
       addTrack,
@@ -232,7 +239,7 @@ export default defineComponent({
         } catch (err) {
           await prompt({
             title: 'Error while splitting track',
-            text: err,
+            text: err as string,
             positiveButton: 'OK',
           });
           return;
@@ -267,7 +274,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({
@@ -342,6 +349,7 @@ export default defineComponent({
         });
         // Load non-Default Cameras if they exist:
         const filteredMultiCamList = multiCamList.value.filter((item) => item !== 'default');
+        console.log(multiCamList.value);
         if (filteredMultiCamList.length === 0) {
           imageData.value[selectedCamera.value] = cloneDeep(meta.imageData) as FrameImage[];
           videoUrl.value[selectedCamera.value] = meta.videoUrl || null;
@@ -366,6 +374,7 @@ export default defineComponent({
             imageData.value[camera] = cloneDeep(subCameraMeta.imageData) as FrameImage[];
             videoUrl.value[camera] = subCameraMeta.videoUrl || null;
             addCamera(camera);
+            console.log(imageData.value);
             // eslint-disable-next-line no-await-in-loop
             const camTrackData = await loadDetections(`${baseMulticamDatasetId.value}/${camera}`);
             const camTracks = Object.values(camTrackData);
@@ -384,10 +393,11 @@ export default defineComponent({
 
         progress.loaded = true;
       } catch (err) {
+        console.log(err);
         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;
@@ -473,7 +483,6 @@ export default defineComponent({
       imageData,
       lineChartData,
       loadError,
-      mediaControlAggregator,
       mergeMode: mergeInProgress,
       pendingSaveCount,
       progress,
@@ -492,6 +501,7 @@ export default defineComponent({
       readonlyState,
       /* methods */
       handler: globalHandler,
+      loadImageFunc,
       save,
       saveThreshold,
       updateTime,
@@ -603,7 +613,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 />
@@ -625,25 +634,39 @@ export default defineComponent({
         style="position: relative; margin: 0px, padding: 0px"
         dense
       >
-        <annotator-wrapper
+        <v-col
           v-if="progress.loaded"
-          ref="playbackComponent"
-          :cameras="multiCamList"
-          :current-camera="selectedCamera"
-          v-bind="{
-            imageData, videoUrl, updateTime,
-            frameRate, originalFps, datasetType, progress }"
-          @select-camera="changeCamera"
+          class="playback-component annotation-wrapper pa-0"
+          style="height:100%"
+          dense
         >
-          <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>
+          <v-row class="fill-height">
+            <v-col
+              v-for="camera in multiCamList"
+              :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 }"
+              >
+                <LayerManager :camera="camera" />
+              </component>
+            </v-col>
+          </v-row>
+          <ControlsContainer
+            v-bind="{ lineChartData, eventChartData, datasetType }"
+            @select-track="handler.trackSelect"
+          />
+        </v-col>
         <div
           v-else
           class="d-flex justify-center align-center fill-height"
@@ -700,4 +723,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 ee7adda40..cd89a59fd 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;
@@ -96,11 +96,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);
     }
   }
 
@@ -158,7 +158,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,
@@ -182,7 +182,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 (
@@ -355,7 +355,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,
@@ -378,7 +378,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 cd849aed9..bcd4b723d 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';
@@ -69,7 +69,8 @@ export default defineComponent({
     const selectedKeyRef = useSelectedKey();
     const stateStyling = useStateStyles();
 
-    const annotator = injectMediaController(props.camera);
+    const annotator = injectAggregateController().value.getController(props.camera);
+    console.log(annotator);
     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 7b59e584a..678896fd9 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 = {
@@ -116,7 +127,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([
@@ -304,18 +315,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)' : '');
@@ -326,7 +325,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,
         });
@@ -359,7 +358,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,
           });
@@ -391,10 +390,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/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..09b7b1bbd 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, onMounted, onBeforeUnmount, provide, toRef, Ref, UnwrapRef, computed,
 } from '@vue/composition-api';
+import { map } 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;
@@ -41,75 +37,71 @@ 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;
+}
 
-  function addCamera(camera = 'default') {
-    geoViewers[camera] = ref(undefined);
-    containers[camera] = ref(undefined);
-    imageCursors[camera] = ref(undefined);
-    if (cameras.indexOf(camera) === -1) {
-      cameras.push(camera);
+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);
+}
+
+function over<T, J>(func: ((...args: T[]) => J)[]) {
+  return (...args: T[]) => func.forEach((f) => f(...args));
+}
+
+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 getController(camera?: string) {
+    if (cameras.value.length === 0) {
+      throw new Error('No camera controllers currently exist.');
     }
-    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,
-      },
-    });
+    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;
   }
 
   function resetZoom() {
-    cameras.forEach((camera) => {
+    cameras.value.forEach((camera) => {
       const geoViewerRef = geoViewers[camera];
-      const data = datas[camera];
+      const data = state[camera];
       const zoomAndCenter = geoViewerRef.value.zoomAndCenterFromBounds(
         data.originalBounds, 0,
       );
@@ -119,7 +111,7 @@ export default function useMediaController() {
   }
 
   function onResize() {
-    cameras.forEach((camera) => {
+    cameras.value.forEach((camera) => {
       const geoViewerRef = geoViewers[camera];
       const containerRef = containers[camera];
       if (geoViewerRef.value === undefined || containerRef.value === undefined) {
@@ -137,17 +129,18 @@ export default function useMediaController() {
   }
 
   function toggleLockedCamera() {
-    cameras.forEach((camera) => {
-      const data = datas[camera];
+    cameras.value.forEach((camera) => {
+      const data = state[camera];
       data.lockedCamera = !data.lockedCamera;
     });
   }
 
   function resetMapDimensions(width: number, height: number, margin = 0.3) {
-    cameras.forEach((camera) => {
+    cameras.value.forEach((camera) => {
+      console.log(geoViewers[camera].value, camera);
       const geoViewerRef = geoViewers[camera];
       const containerRef = containers[camera];
-      const data = datas[camera];
+      const data = state[camera];
       geoViewerRef.value.bounds({
         left: 0,
         top: 0,
@@ -180,24 +173,24 @@ export default function useMediaController() {
 
   let observer: ResizeObserver | null = null;
   onMounted(() => {
-    cameras.forEach((camera) => {
+    cameras.value.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`);
+        throw new Error(`Container ${String(camera)} was missing, could not register observer`);
       }
     });
   });
   onBeforeUnmount(() => {
-    cameras.forEach((camera) => {
+    cameras.value.forEach((camera) => {
       const containerRef = containers[camera].value;
 
       if (containerRef && observer !== null) {
         observer.unobserve(containerRef);
       } else {
-        throw new Error(`Container ${camera} or observer was missing`);
+        throw new Error(`Container ${String(camera)} or observer was missing`);
       }
     });
   });
@@ -207,8 +200,8 @@ 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(camera = ' default', {
-    seek, play, pause, setVolume, setSpeed,
+  function initialize(cameraName: string, {
+    seek: _seek, play: _play, pause: _pause, setVolume: _setVolume, setSpeed: _setSpeed,
   }: {
     seek(frame: number): void;
     play(): void;
@@ -216,12 +209,43 @@ export default function useMediaController() {
     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);
+
+    state[camera] = reactive({
+      cameraName,
+      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 setCursor(newCursor: string) {
-      datas[camera].cursor = `${newCursor}`;
+      state[camera].cursor = `${newCursor}`;
     }
 
     function setImageCursor(newCursor: string) {
-      datas[camera].imageCursor = `${newCursor}`;
+      state[camera].imageCursor = `${newCursor}`;
     }
 
     function centerOn(coords: { x: number; y: number; z: number }) {
@@ -278,16 +302,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);
       }
     }
 
@@ -316,50 +340,88 @@ export default function useMediaController() {
     };
 
     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();
+    if (!defaultController) {
+      throw new Error('Should not have resolved me yet!');
+    }
+    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..552c2e13d 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) {
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 6b04ebabd07a8f8ac4597be0fa12235cd2691e95 Mon Sep 17 00:00:00 2001
From: Brandon Davis <git@subdavis.com>
Date: Tue, 15 Feb 2022 12:43:30 -0500
Subject: [PATCH 2/3] Doneish

---
 client/src/components/LayerManager.vue        |  1 -
 .../annotators/useMediaController.ts          | 98 +++++++++----------
 2 files changed, 44 insertions(+), 55 deletions(-)

diff --git a/client/src/components/LayerManager.vue b/client/src/components/LayerManager.vue
index bcd4b723d..8bdfee383 100644
--- a/client/src/components/LayerManager.vue
+++ b/client/src/components/LayerManager.vue
@@ -70,7 +70,6 @@ export default defineComponent({
     const stateStyling = useStateStyles();
 
     const annotator = injectAggregateController().value.getController(props.camera);
-    console.log(annotator);
     const frameNumberRef = annotator.frame;
     const flickNumberRef = annotator.flick;
 
diff --git a/client/src/components/annotators/useMediaController.ts b/client/src/components/annotators/useMediaController.ts
index 09b7b1bbd..c99168421 100644
--- a/client/src/components/annotators/useMediaController.ts
+++ b/client/src/components/annotators/useMediaController.ts
@@ -4,7 +4,7 @@ import geo from 'geojs';
 import {
   ref, reactive, onMounted, onBeforeUnmount, provide, toRef, Ref, UnwrapRef, computed,
 } from '@vue/composition-api';
-import { map } from 'lodash';
+import { map, over } from 'lodash';
 
 import { use } from '../../provides';
 import type { AggregateMediaController, MediaController } from './mediaControllerType';
@@ -70,10 +70,6 @@ export function injectCameraInitializer() {
   return use<CameraInitializerFunc>(CameraInitializerSymbol);
 }
 
-function over<T, J>(func: ((...args: T[]) => J)[]) {
-  return (...args: T[]) => func.forEach((f) => f(...args));
-}
-
 export function useMediaController() {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const geoViewers: Record<symbol, Ref<any>> = {};
@@ -98,18 +94,6 @@ export function useMediaController() {
     return found;
   }
 
-  function resetZoom() {
-    cameras.value.forEach((camera) => {
-      const geoViewerRef = geoViewers[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.value.forEach((camera) => {
       const geoViewerRef = geoViewers[camera];
@@ -135,42 +119,6 @@ export function useMediaController() {
     });
   }
 
-  function resetMapDimensions(width: number, height: number, margin = 0.3) {
-    cameras.value.forEach((camera) => {
-      console.log(geoViewers[camera].value, camera);
-      const geoViewerRef = geoViewers[camera];
-      const containerRef = containers[camera];
-      const data = state[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,
-      });
-      geoViewerRef.value.clampBoundsX(true);
-      geoViewerRef.value.clampBoundsY(true);
-      geoViewerRef.value.clampZoom(true);
-      resetZoom();
-    });
-  }
-
   let observer: ResizeObserver | null = null;
   onMounted(() => {
     cameras.value.forEach((camera) => {
@@ -252,6 +200,49 @@ export function useMediaController() {
       geoViewers[camera].value.center(coords);
     }
 
+    function resetZoom() {
+      const geoViewerRef = geoViewers[camera];
+      const data = state[camera];
+      const zoomAndCenter = geoViewerRef.value.zoomAndCenterFromBounds(
+        data.originalBounds, 0,
+      );
+      geoViewerRef.value.zoom(zoomAndCenter.zoom);
+      geoViewerRef.value.center(zoomAndCenter.center);
+    }
+
+    function resetMapDimensions(width: number, height: number, margin = 0.3) {
+      const geoViewerRef = geoViewers[camera];
+      const containerRef = containers[camera];
+      const data = state[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,
+      });
+      geoViewerRef.value.clampBoundsX(true);
+      geoViewerRef.value.clampBoundsY(true);
+      geoViewerRef.value.clampZoom(true);
+      resetZoom();
+    }
+
     function initializeViewer(width: number, height: number) {
       const params = geo.util.pixelCoordinateParams(
         containers[camera].value, width, height, width, height,
@@ -422,6 +413,5 @@ export function useMediaController() {
     imageCursors,
     initialize,
     onResize,
-    resetMapDimensions,
   };
 }

From 0f59bc5118c59da3ac9da8115dfc0ea582b5f602 Mon Sep 17 00:00:00 2001
From: Brandon Davis <git@subdavis.com>
Date: Wed, 16 Feb 2022 17:27:03 -0500
Subject: [PATCH 3/3] WIP

---
 .../components/ControlsContainer.vue          | 12 ++--
 client/dive-common/components/Viewer.vue      | 71 +++++++++++--------
 .../src/components/annotators/annotator.scss  |  6 +-
 .../annotators/useMediaController.ts          | 59 +++++----------
 client/src/components/controls/Controls.vue   |  5 +-
 5 files changed, 72 insertions(+), 81 deletions(-)

diff --git a/client/dive-common/components/ControlsContainer.vue b/client/dive-common/components/ControlsContainer.vue
index 7d4d2cacf..7470b7664 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,
+  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';
@@ -34,11 +34,14 @@ export default defineComponent({
       type: String as PropType<DatasetType>,
       required: true,
     },
+    collapsed: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   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]);
 
@@ -48,7 +51,7 @@ 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,
@@ -57,7 +60,6 @@ export default defineComponent({
     return {
       currentView,
       toggleView,
-      collapsed,
       maxFrame,
       frame,
       seek,
@@ -87,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>
diff --git a/client/dive-common/components/Viewer.vue b/client/dive-common/components/Viewer.vue
index f0e8ababe..c8eb4ea0a 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,
+  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 */
@@ -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 } = useMediaController();
+    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');
@@ -118,6 +118,7 @@ export default defineComponent({
       return 0;
     });
 
+
     const {
       save: saveToServer,
       markChangesPending,
@@ -349,7 +350,6 @@ export default defineComponent({
         });
         // Load non-Default Cameras if they exist:
         const filteredMultiCamList = multiCamList.value.filter((item) => item !== 'default');
-        console.log(multiCamList.value);
         if (filteredMultiCamList.length === 0) {
           imageData.value[selectedCamera.value] = cloneDeep(meta.imageData) as FrameImage[];
           videoUrl.value[selectedCamera.value] = meta.videoUrl || null;
@@ -374,7 +374,6 @@ export default defineComponent({
             imageData.value[camera] = cloneDeep(subCameraMeta.imageData) as FrameImage[];
             videoUrl.value[camera] = subCameraMeta.videoUrl || null;
             addCamera(camera);
-            console.log(imageData.value);
             // eslint-disable-next-line no-await-in-loop
             const camTrackData = await loadDetections(`${baseMulticamDatasetId.value}/${camera}`);
             const camTracks = Object.values(camTrackData);
@@ -393,7 +392,6 @@ export default defineComponent({
 
         progress.loaded = true;
       } catch (err) {
-        console.log(err);
         progress.loaded = false;
         console.error(err);
         const errorEl = document.createElement('div');
@@ -414,18 +412,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 = {
@@ -475,6 +480,9 @@ export default defineComponent({
     return {
       /* props */
       confidenceFilters,
+      controlsRef,
+      controlsHeight,
+      controlsCollapsed,
       datasetName,
       datasetType,
       editingTrack,
@@ -630,23 +638,23 @@ 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
       >
-        <v-col
+        <div
           v-if="progress.loaded"
-          class="playback-component annotation-wrapper pa-0"
-          style="height:100%"
-          dense
+          class="d-flex flex-column grow"
         >
-          <v-row class="fill-height">
-            <v-col
+          <div class="d-flex grow">
+            <div
               v-for="camera in multiCamList"
               :key="camera"
-              style="padding: 0px; margin:0px;"
-              class="fill-height"
-              @click="$emit('select-camera', 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'"
@@ -660,13 +668,16 @@ export default defineComponent({
               >
                 <LayerManager :camera="camera" />
               </component>
-            </v-col>
-          </v-row>
+            </div>
+          </div>
           <ControlsContainer
+            ref="controlsRef"
+            class="shrink"
+            :collapsed.sync="controlsCollapsed"
             v-bind="{ lineChartData, eventChartData, datasetType }"
             @select-track="handler.trackSelect"
           />
-        </v-col>
+        </div>
         <div
           v-else
           class="d-flex justify-center align-center fill-height"
@@ -695,7 +706,7 @@ export default defineComponent({
             <span v-else>{{ progressValue }}%</span>
           </v-progress-circular>
         </div>
-      </v-col>
+      </div>
       <SidebarContext />
     </v-row>
   </v-main>
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/useMediaController.ts b/client/src/components/annotators/useMediaController.ts
index c99168421..a5e537c43 100644
--- a/client/src/components/annotators/useMediaController.ts
+++ b/client/src/components/annotators/useMediaController.ts
@@ -2,7 +2,7 @@
 /// <reference types="resize-observer-browser" />
 import geo from 'geojs';
 import {
-  ref, reactive, onMounted, onBeforeUnmount, provide, toRef, Ref, UnwrapRef, computed,
+  ref, reactive, provide, toRef, Ref, UnwrapRef, computed,
 } from '@vue/composition-api';
 import { map, over } from 'lodash';
 
@@ -26,7 +26,6 @@ interface MediaControllerReactiveData {
   speed: number;
   maxFrame: number;
   syncedFrame: number;
-  observer: null;
   cursor: string;
   imageCursor: string;
   originalBounds: {
@@ -82,20 +81,24 @@ export function useMediaController() {
 
   function getController(camera?: string) {
     if (cameras.value.length === 0) {
-      throw new Error('No camera controllers currently exist.');
+      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');
+      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() {
-    cameras.value.forEach((camera) => {
+    subControllers.forEach((mc) => {
+      const camera = cameraControllerSymbols[mc.cameraName.value];
       const geoViewerRef = geoViewers[camera];
       const containerRef = containers[camera];
       if (geoViewerRef.value === undefined || containerRef.value === undefined) {
@@ -106,7 +109,7 @@ export function useMediaController() {
       if (size.width !== mapSize.width || size.height !== mapSize.height) {
         window.requestAnimationFrame(() => {
           geoViewerRef.value.size(size);
-          resetZoom();
+          mc.resetZoom();
         });
       }
     });
@@ -119,30 +122,6 @@ export function useMediaController() {
     });
   }
 
-  let observer: ResizeObserver | null = null;
-  onMounted(() => {
-    cameras.value.forEach((camera) => {
-      const containerRef = containers[camera].value;
-      if (containerRef) {
-        observer = new ResizeObserver(onResize);
-        observer.observe(containerRef);
-      } else {
-        throw new Error(`Container ${String(camera)} was missing, could not register observer`);
-      }
-    });
-  });
-  onBeforeUnmount(() => {
-    cameras.value.forEach((camera) => {
-      const containerRef = containers[camera].value;
-
-      if (containerRef && observer !== null) {
-        observer.unobserve(containerRef);
-      } else {
-        throw new Error(`Container ${String(camera)} or observer was missing`);
-      }
-    });
-  });
-
   /**
    * This secondary initialization wrapper solves a sort of
    * chicken-and-egg problem, allowing the function consumer to use
@@ -177,7 +156,6 @@ export function useMediaController() {
       speed: 1.0,
       maxFrame: 0,
       syncedFrame: 0,
-      observer: null,
       cursor: 'default',
       imageCursor: '',
       originalBounds: {
@@ -319,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)`;
+        //   }
+        // });
       },
     };
 
@@ -377,9 +355,6 @@ export function useMediaController() {
 
   const aggregateController: Ref<AggregateMediaController> = computed(() => {
     const defaultController = getController();
-    if (!defaultController) {
-      throw new Error('Should not have resolved me yet!');
-    }
     return {
       cameras: computed(() => cameras.value.map((v) => String(v))),
       maxFrame: defaultController.maxFrame,
diff --git a/client/src/components/controls/Controls.vue b/client/src/components/controls/Controls.vue
index 552c2e13d..e93ba2257 100644
--- a/client/src/components/controls/Controls.vue
+++ b/client/src/components/controls/Controls.vue
@@ -64,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"