add prop types, fix warnings

app/src/components/AudioArea.vue

@@ -5,17 +5,17 @@
 </template>
 
 <script lang="ts">
-import {defineComponent, ref, watch} from "vue";
+import {defineComponent, PropType, ref, watch} from "vue";
 
 export default defineComponent({
   name: "AudioArea",
   props: {
     definition: {
-      type: Object,
+      type: Object as PropType<AudioAreaDef>,
       required: true
     },
     bbox: {
-      type: Object,
+      type: Object as PropType<BoundingBox>,
       required: true
     },
   },
@@ -68,7 +68,8 @@ export interface BoundingBox {
   x: number,
   y: number,
   w: number,
-  h: number
+  h: number,
+  z: number
 }
 
 </script>

app/src/components/SVGContent.vue

@@ -30,7 +30,7 @@
 import {defineComponent, onMounted, reactive, ref} from "vue";
 import createPanZoom, {PanZoom} from "panzoom";
 import VideoScroll, {VideoScrollDef, VideoScrollDirection} from "@/components/VideoScroll.vue";
-import AudioArea, {AudioAreaDef} from "@/components/AudioArea.vue";
+import AudioArea, {AudioAreaDef, BoundingBox} from "@/components/AudioArea.vue";
 import Stats from "stats.js";
 import {rotate} from "@/utils";
 
@@ -62,7 +62,7 @@ export default defineComponent({
     const scrolls = ref<VideoScrollDef[]>([]);
     const panToAnchor = ref();
     const audioAreas = ref<AudioAreaDef[]>([]);
-    const bbox = reactive({
+    const bbox: BoundingBox = reactive({
       x: ref(0),
       y: ref(0),
       w: ref(0),
@@ -100,7 +100,7 @@ export default defineComponent({
         maxZoom: 3637937,
         zoomSpeed: 0.05,
         zoomDoubleClickSpeed: 1,
-        onDoubleClick: function (e) {
+        onDoubleClick: function () {
           if (!document.fullscreenElement) {
             console.debug("[SVG] Fullscreen requested.");
             document.body.requestFullscreen();

app/src/components/VideoScroll.vue

@@ -26,19 +26,19 @@
 </template>
 
 <script lang="ts">
-import {defineComponent} from "vue";
+import {defineComponent, PropType} from "vue";
 import {rotate} from "@/utils";
 
 export default defineComponent({
   name: "VideoScroll",
   props: {
     definition: {
-      type: Object,
+      type: Object as PropType<VideoScrollDef>,
       required: true
     }
   },
   computed: {
-    dynamicFiles(): { [key: string]: string } {
+    dynamicFiles(): { top: number, left: number, src: string }[] {
       return this.definition.files.slice(1).map((src: string, idx: number) => {
         const cy = this.definition.top +
             (this.isVertical ? (this.definition.height * (idx + 1) * this.verticalDirection) : 0);
@@ -66,7 +66,7 @@ export default defineComponent({
     }
   },
   mounted() {
-    const observer = new IntersectionObserver((entries, observer) => {
+    const observer = new IntersectionObserver((entries, _) => {
       entries.forEach((entry) => {
         const element = entry.target as HTMLImageElement;
         if (entry.isIntersecting) {