big: eliminate FLAG_LOADED

src/components/Timeline.vue

@@ -53,7 +53,7 @@
                      class="photo-row"
                     :style="{ height: item.size + 'px', width: rowWidth + 'px' }">
 
-                    <div class="photo" v-for="(photo, index) in item.photos" :key="photo.fileid"
+                    <div class="photo" v-for="photo in item.photos" :key="photo.fileid"
                         :style="{ width: photo.dispWp + '%' }">
 
                         <Folder v-if="photo.flag & c.FLAG_IS_FOLDER"
@@ -339,15 +339,6 @@ export default class Timeline extends Mixins(GlobalMixin, UserConfig) {
                 }
                 delete row.pct;
             }
-
-            // Force reload all loaded images
-            if ((i < this.currentStart || i > this.currentEnd) && row.photos) {
-                for (const photo of row.photos) {
-                    if (photo.flag & this.c.FLAG_LOADED) {
-                        photo.flag = (photo.flag & ~this.c.FLAG_LOADED) | this.c.FLAG_FORCE_RELOAD;
-                    }
-                }
-            }
         }
 
         // Make sure we don't do this too often

src/components/frame/Folder.vue

@@ -14,13 +14,9 @@
             <div class="img-outer" v-for="info of previewFileInfos" :key="info.fileid">
                 <img
                     class="fill-block"
-                    :class="{
+                    :class="{ 'error': info.flag & c.FLAG_LOAD_FAIL }"
-                        'p-loading': !(info.flag & c.FLAG_LOADED),
-                        'p-load-fail': info.flag & c.FLAG_LOAD_FAIL,
-                    }"
                     :key="'fpreview-' + info.fileid"
                     :src="getPreviewUrl(info.fileid, info.etag, true, 256)"
-                    @load="info.flag |= c.FLAG_LOADED"
                     @error="info.flag |= c.FLAG_LOAD_FAIL" />
             </div>
         </div>
@@ -191,13 +187,8 @@ export default class Folder extends Mixins(GlobalMixin) {
             filter: brightness(50%);
             transition: filter 0.2s ease-in-out;
 
-            &.p-loading, &.p-load-fail {
+            &.error { display: none; }
-                display: none;
+            .folder:hover & { filter: brightness(100%); }
-            }
-
-            .folder:hover & {
-                filter: brightness(100%);
-            }
         }
     }
 }

src/components/frame/Photo.vue

@@ -2,7 +2,7 @@
     <div class="p-outer fill-block"
         :class="{
             'selected': (data.flag & c.FLAG_SELECTED),
-            'p-loading': !(data.flag & c.FLAG_LOADED),
+            'placeholder': (data.flag & c.FLAG_PLACEHOLDER),
             'leaving': (data.flag & c.FLAG_LEAVING),
             'exit-left': (data.flag & c.FLAG_EXIT_LEFT),
             'enter-right': (data.flag & c.FLAG_ENTER_RIGHT),
@@ -27,9 +27,7 @@
                 class="fill-block"
                 :src="src()"
                 :key="data.fileid"
-
+                @error="error" />
-                @error="error"
-                @load="load" />
         </div>
     </div>
 </template>
@@ -89,14 +87,9 @@ export default class Photo extends Mixins(GlobalMixin) {
         return getPreviewUrl(this.data.fileid, this.data.etag, false, size)
     }
 
-    /** Image loaded successfully */
-    load() {
-        this.data.flag |= this.c.FLAG_LOADED;
-    }
-
     /** Error in loading image */
     error(e: any) {
-        this.data.flag |= (this.c.FLAG_LOADED | this.c.FLAG_LOAD_FAIL);
+        this.data.flag |= this.c.FLAG_LOAD_FAIL;
     }
 
     /** Clear timers */
@@ -284,7 +277,7 @@ div.img-outer {
         transition: box-shadow 0.1s ease;
 
         .selected > & { box-shadow: 0 0 4px 2px var(--color-primary); }
-        .p-outer.p-loading > & { display: none; }
+        .p-outer.placeholder > & { display: none; }
         .p-outer.error & { object-fit: contain; }
     }
 }

src/components/frame/Tag.vue

@@ -13,14 +13,10 @@
         <div class="previews fill-block" ref="previews">
             <div class="img-outer" v-for="info of previews" :key="info.fileid">
                 <img
-                    :class="{
+                    :class="{ 'error': info.flag & c.FLAG_LOAD_FAIL }"
-                        'p-loading': !(info.flag & c.FLAG_LOADED),
-                        'p-load-fail': info.flag & c.FLAG_LOAD_FAIL,
-                    }"
                     :key="'fpreview-' + info.fileid"
                     :src="getPreviewUrl(info.fileid, info.etag, true, 256)"
                     :style="getCoverStyle(info)"
-                    @load="info.flag |= c.FLAG_LOADED"
                     @error="info.flag |= c.FLAG_LOAD_FAIL" />
             </div>
         </div>
@@ -234,13 +230,8 @@ export default class Tag extends Mixins(GlobalMixin) {
             cursor: pointer;
             transition: filter 0.2s ease-in-out;
 
-            &.p-loading, &.p-load-fail {
+            &.error { display: none; }
-                display: none;
+            .tag:hover & { filter: brightness(100%); }
-            }
-
-            .tag:hover & {
-                filter: brightness(100%);
-            }
         }
     }
 }

src/services/Utils.ts

@@ -142,18 +142,17 @@ export function convertFlags(photo: IPhoto) {
 export const constants = {
     c: {
         FLAG_PLACEHOLDER:   1 << 0,
-        FLAG_LOADED:        1 << 1,
+        FLAG_LOAD_FAIL:     1 << 1,
-        FLAG_LOAD_FAIL:     1 << 2,
+        FLAG_IS_VIDEO:      1 << 2,
-        FLAG_IS_VIDEO:      1 << 3,
+        FLAG_IS_FAVORITE:   1 << 3,
-        FLAG_IS_FAVORITE:   1 << 4,
+        FLAG_IS_FOLDER:     1 << 4,
-        FLAG_IS_FOLDER:     1 << 5,
+        FLAG_IS_TAG:        1 << 5,
-        FLAG_IS_TAG:        1 << 6,
+        FLAG_IS_FACE:       1 << 6,
-        FLAG_IS_FACE:       1 << 7,
+        FLAG_SELECTED:      1 << 7,
-        FLAG_SELECTED:      1 << 8,
+        FLAG_LEAVING:       1 << 8,
-        FLAG_LEAVING:       1 << 9,
+        FLAG_EXIT_LEFT:     1 << 9,
-        FLAG_EXIT_LEFT:     1 << 10,
+        FLAG_ENTER_RIGHT:   1 << 10,
-        FLAG_ENTER_RIGHT:   1 << 11,
+        FLAG_FORCE_RELOAD:  1 << 11,
-        FLAG_FORCE_RELOAD:  1 << 12,
     },
 
     TagDayID: {