timeline: v-for on photo component

Signed-off-by: Varun Patil <varunpatil@ucla.edu>

src/components/Timeline.vue

@@ -61,7 +61,8 @@
           </div>
         </div>
 
-        <div
+        <Photo
+          class="photo"
           v-else
           v-for="photo of item.photos"
           :key="photo.key"
@@ -70,18 +71,14 @@
             width: `${photo.dispW}px`,
             transform: `translate(${photo.dispX}px, ${photo.dispY}px)`,
           }"
-          class="photo"
+          :data="photo"
-        >
+          :day="item.day"
-          <Photo
+          @select="selectionManager.selectPhoto"
-            :data="photo"
+          @pointerdown="selectionManager.clickPhoto(photo, $event, index)"
-            :day="item.day"
+          @touchstart="selectionManager.touchstartPhoto(photo, $event, index)"
-            @select="selectionManager.selectPhoto"
+          @touchend="selectionManager.touchendPhoto(photo, $event, index)"
-            @pointerdown="selectionManager.clickPhoto(photo, $event, index)"
+          @touchmove="selectionManager.touchmovePhoto(photo, $event, index)"
-            @touchstart="selectionManager.touchstartPhoto(photo, $event, index)"
+        />
-            @touchend="selectionManager.touchendPhoto(photo, $event, index)"
-            @touchmove="selectionManager.touchmovePhoto(photo, $event, index)"
-          />
-        </div>
       </template>
     </RecycleScroller>
 

src/components/frame/Photo.vue

@@ -1,64 +1,66 @@
 <template>
-  <div
+  <div class="p-outer-super">
-    class="p-outer fill-block"
-    :class="{
-      selected: data.flag & c.FLAG_SELECTED,
-      placeholder: data.flag & c.FLAG_PLACEHOLDER,
-      leaving: data.flag & c.FLAG_LEAVING,
-      error: data.flag & c.FLAG_LOAD_FAIL,
-    }"
-  >
-    <CheckCircle v-once :size="18" class="select" @click="toggleSelect" />
-
-    <div class="video" v-if="data.flag & c.FLAG_IS_VIDEO">
-      <span v-if="data.video_duration" class="time">
-        {{ videoDuration }}
-      </span>
-      <Video :size="22" />
-    </div>
-
     <div
-      class="livephoto"
+      class="p-outer fill-block"
-      @mouseenter.passive="playVideo"
-      @mouseleave.passive="stopVideo"
-    >
-      <LivePhoto :size="22" v-if="data.liveid" />
-    </div>
-
-    <Star :size="22" v-if="data.flag & c.FLAG_IS_FAVORITE" />
-
-    <div
-      class="img-outer fill-block"
       :class="{
-        'memories-livephoto': data.liveid,
+        selected: data.flag & c.FLAG_SELECTED,
+        placeholder: data.flag & c.FLAG_PLACEHOLDER,
+        leaving: data.flag & c.FLAG_LEAVING,
+        error: data.flag & c.FLAG_LOAD_FAIL,
       }"
-      @contextmenu="contextmenu"
-      @pointerdown.passive="$emit('pointerdown', $event)"
-      @touchstart.passive="$emit('touchstart', $event)"
-      @touchmove="$emit('touchmove', $event)"
-      @touchend.passive="$emit('touchend', $event)"
-      @touchcancel.passive="$emit('touchend', $event)"
     >
-      <XImg
+      <CheckCircle v-once :size="18" class="select" @click="toggleSelect" />
-        v-if="src"
+
-        ref="ximg"
+      <div class="video" v-if="data.flag & c.FLAG_IS_VIDEO">
-        :class="['ximg', 'fill-block', `memories-thumb-${data.key}`]"
+        <span v-if="data.video_duration" class="time">
-        draggable="false"
+          {{ videoDuration }}
-        :src="src"
+        </span>
-        :key="data.fileid"
+        <Video :size="22" />
-        @load="load"
+      </div>
-        @error="error"
+
-      />
+      <div
-      <video
+        class="livephoto"
-        ref="video"
+        @mouseenter.passive="playVideo"
-        v-if="videoUrl"
+        @mouseleave.passive="stopVideo"
-        :src="videoUrl"
+      >
-        preload="none"
+        <LivePhoto :size="22" v-if="data.liveid" />
-        muted
+      </div>
-        playsinline
+
-        disableRemotePlayback
+      <Star :size="22" v-if="data.flag & c.FLAG_IS_FAVORITE" />
-      />
+
-      <div class="overlay fill-block" />
+      <div
+        class="img-outer fill-block"
+        :class="{
+          'memories-livephoto': data.liveid,
+        }"
+        @contextmenu="contextmenu"
+        @pointerdown.passive="$emit('pointerdown', $event)"
+        @touchstart.passive="$emit('touchstart', $event)"
+        @touchmove="$emit('touchmove', $event)"
+        @touchend.passive="$emit('touchend', $event)"
+        @touchcancel.passive="$emit('touchend', $event)"
+      >
+        <XImg
+          v-if="src"
+          ref="ximg"
+          :class="['ximg', 'fill-block', `memories-thumb-${data.key}`]"
+          draggable="false"
+          :src="src"
+          :key="data.fileid"
+          @load="load"
+          @error="error"
+        />
+        <video
+          ref="video"
+          v-if="videoUrl"
+          :src="videoUrl"
+          preload="none"
+          muted
+          playsinline
+          disableRemotePlayback
+        />
+        <div class="overlay fill-block" />
+      </div>
     </div>
   </div>
 </template>