From bfc364fe4b3170dcf722c7451b4b3b06ee70c863 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1=C5=A1=20Ml=C3=A1dek?= <t@mldk.cz>
Date: Fri, 9 Apr 2021 20:31:02 +0200
Subject: [PATCH] add ids, missing :keys...

---
 app/src/components/AudioArea.vue   | 1 +
 app/src/components/SVGContent.vue  | 6 ++++--
 app/src/components/VideoScroll.vue | 4 +++-
 3 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/app/src/components/AudioArea.vue b/app/src/components/AudioArea.vue
index 0c80f05..a607acd 100644
--- a/app/src/components/AudioArea.vue
+++ b/app/src/components/AudioArea.vue
@@ -59,6 +59,7 @@ export default defineComponent({
 });
 
 export interface AudioAreaDef {
+  id: string,
   cx: number,
   cy: number,
   radius: number,
diff --git a/app/src/components/SVGContent.vue b/app/src/components/SVGContent.vue
index 79764ca..6d92b0e 100644
--- a/app/src/components/SVGContent.vue
+++ b/app/src/components/SVGContent.vue
@@ -5,10 +5,10 @@
     </div>
     <div class="content" ref="root">
       <div class="video-scrolls">
-        <VideoScroll v-for="scroll in scrolls" :definition="scroll" />
+        <VideoScroll v-for="scroll in scrolls" :definition="scroll" :key="scroll.id"/>
       </div>
     </div>
-    <AudioArea v-for="audio in audioAreas" :definition="audio" :bbox="bbox" />
+    <AudioArea v-for="audio in audioAreas" :definition="audio" :bbox="bbox" :key="audio.id"/>
     <div class="dev devpanel">
       <div>
         <span>Current viewport position:</span>
@@ -500,6 +500,7 @@ async function processScrolls(svg: XMLDocument): Promise<VideoScrollDef[]> {
         }
 
         return {
+          id: el.id,
           top: y * ratio,
           left: x * ratio,
           angle,
@@ -540,6 +541,7 @@ function processAudio(svg: XMLDocument): AudioAreaDef[] {
       el.classList.add("internal");
 
       return {
+        id: el.id,
         cx: el.cx.baseVal.value,
         cy: el.cy.baseVal.value,
         radius,
diff --git a/app/src/components/VideoScroll.vue b/app/src/components/VideoScroll.vue
index 993e705..a3523cb 100644
--- a/app/src/components/VideoScroll.vue
+++ b/app/src/components/VideoScroll.vue
@@ -12,7 +12,8 @@
     />
 
     <!--suppress RequiredAttributes -->
-    <img v-for="file in dynamicFiles"
+    <img v-for="(file, idx) in dynamicFiles"
+         :key="`${idx}_${file.src}`"
          :data-src="file.src"
          :style="{
              top: `${Math.round(file.top)}px`,
@@ -106,6 +107,7 @@ export enum VideoScrollDirection {
 }
 
 export interface VideoScrollDef {
+  id: string,
   top: number,
   left: number,
   angle: number,