From 839de2e6466930e9b209fab48d6cf1e35a0890a9 Mon Sep 17 00:00:00 2001
From: Varun Patil <radialapps@gmail.com>
Date: Wed, 3 May 2023 20:21:20 -0700
Subject: [PATCH] frame: add local flag to photo

Signed-off-by: Varun Patil <radialapps@gmail.com>
---
 src/components/frame/Photo.vue | 31 +++++++++++++++++--------------
 1 file changed, 17 insertions(+), 14 deletions(-)

diff --git a/src/components/frame/Photo.vue b/src/components/frame/Photo.vue
index f67c534c..eb0d7616 100644
--- a/src/components/frame/Photo.vue
+++ b/src/components/frame/Photo.vue
@@ -9,20 +9,21 @@
         error: data.flag & c.FLAG_LOAD_FAIL,
       }"
     >
-      <CheckCircle v-once :size="18" class="select" @click="toggleSelect" />
+      <CheckCircleIcon 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" />
+        <VideoIcon :size="22" />
       </div>
 
       <div class="livephoto" @mouseenter.passive="playVideo" @mouseleave.passive="stopVideo">
-        <LivePhoto :size="22" v-if="data.liveid" />
+        <LivePhotoIcon :size="22" v-if="data.liveid" />
       </div>
 
-      <Star :size="22" v-if="data.flag & c.FLAG_IS_FAVORITE" />
+      <StarIcon class="bottom-left-flag" :size="22" v-if="data.flag & c.FLAG_IS_FAVORITE" />
+      <LocalIcon class="bottom-left-flag" :size="22" v-if="data.flag & c.FLAG_IS_LOCAL" />
 
       <div
         class="img-outer fill-block"
@@ -60,18 +61,20 @@ import { IDay, IPhoto } from '../../types';
 import * as utils from '../../services/Utils';
 
 import errorsvg from '../../assets/error.svg';
-import CheckCircle from 'vue-material-design-icons/CheckCircle.vue';
-import Star from 'vue-material-design-icons/Star.vue';
-import Video from 'vue-material-design-icons/PlayCircleOutline.vue';
-import LivePhoto from 'vue-material-design-icons/MotionPlayOutline.vue';
+import CheckCircleIcon from 'vue-material-design-icons/CheckCircle.vue';
+import StarIcon from 'vue-material-design-icons/Star.vue';
+import VideoIcon from 'vue-material-design-icons/PlayCircleOutline.vue';
+import LivePhotoIcon from 'vue-material-design-icons/MotionPlayOutline.vue';
+import LocalIcon from 'vue-material-design-icons/CloudOff.vue';
 
 export default defineComponent({
   name: 'Photo',
   components: {
-    CheckCircle,
-    Video,
-    Star,
-    LivePhoto,
+    CheckCircleIcon,
+    VideoIcon,
+    StarIcon,
+    LivePhotoIcon,
+    LocalIcon,
   },
 
   props: {
@@ -323,7 +326,7 @@ $icon-size: $icon-half-size * 2;
   }
 }
 .video,
-.star-icon,
+.bottom-left-flag,
 .livephoto {
   position: absolute;
   z-index: 100;
@@ -353,7 +356,7 @@ $icon-size: $icon-half-size * 2;
 .livephoto {
   pointer-events: auto;
 }
-.star-icon {
+.bottom-left-flag {
   bottom: var(--icon-dist);
   left: var(--icon-dist);
   .p-outer.selected > & {