Allow more component reuse

src/components/Photo.vue

@@ -18,20 +18,19 @@
         <div class="img-outer" :style="{
                 width: rowHeight + 'px',
                 height: rowHeight + 'px',
-            }">
+            }"
-            <img
-                :src="getSrc()"
-                :key="data.fileid"
-
             @click="click"
-                @error="error"
-                @load="load"
-
             @contextmenu="contextmenu"
             @touchstart="touchstart"
             @touchmove="touchend"
             @touchend="touchend"
-                @touchcancel="touchend" />
+            @touchcancel="touchend" >
+            <img
+                :src="src()"
+                :key="data.fileid"
+
+                @error="error"
+                @load="load" />
         </div>
     </div>
 </template>
@@ -58,7 +57,7 @@ export default class Photo extends Mixins(GlobalMixin) {
     @Emit('clickImg') emitClickImg(component: any) {}
 
     /** Get src for image to show */
-    getSrc() {
+    src() {
         if (this.data.flag & this.c.FLAG_PLACEHOLDER) {
             return undefined;
         } else if (this.data.flag & this.c.FLAG_LOAD_FAIL) {
@@ -67,13 +66,13 @@ export default class Photo extends Mixins(GlobalMixin) {
             this.data.flag &= ~this.c.FLAG_FORCE_RELOAD;
             return undefined;
         } else {
-            return this.getUrl();
+            return this.url;
         }
     }
 
     /** Get url of the photo */
-    getUrl() {
+    get url() {
-        return getPreviewUrl(this.data.fileid, this.data.etag);
+        return getPreviewUrl(this.data.fileid, this.data.etag)
     }
 
     /** Image loaded successfully */

src/components/Timeline.vue

@@ -2,27 +2,29 @@
     <div class="container" ref="container" :class="{ 'icon-loading': loading }">
         <!-- Main recycler view for rows -->
         <RecycleScroller
-            :key="state"
             ref="recycler"
             class="recycler"
+            :key="state"
             :items="list"
-            size-field="size"
-            key-field="id"
-            v-slot="{ item }"
             :emit-update="true"
+            key-field="id"
+            size-field="size"
+            type-field="type"
+            v-slot="{ item }"
             @update="scrollChange"
             @resize="handleResizeWithDelay"
         >
-            <h1 v-if="item.head" class="head-row" :class="{ 'first': item.id === 1 }">
+            <h1 v-if="item.type === 0" class="head-row"
-                {{ getHeadName(item) }}
+                :class="{ 'first': item.id === 1 }">
+                {{ item.name || getHeadName(item) }}
             </h1>
 
             <div v-else
                 class="photo-row"
                 :style="{ height: rowHeight + 'px' }">
 
-                <div class="photo" v-for="photo of item.photos" :key="photo.fileid">
+                <div class="photo" v-for="(photo, index) in item.photos" :key="index">
-                    <Folder v-if="photo.isfolder"
+                    <Folder v-if="photo.flag & c.FLAG_IS_FOLDER"
                             :data="photo"
                             :rowHeight="rowHeight" />
                     <Photo v-else
@@ -96,7 +98,7 @@
 
 <script lang="ts">
 import { Component, Watch, Mixins } from 'vue-property-decorator';
-import { IDay, IPhoto, IRow, ITick } from "../types";
+import { IDay, IPhoto, IRow, IRowType, ITick } from "../types";
 import { NcActions, NcActionButton, NcButton } from '@nextcloud/vue';
 import { generateUrl } from '@nextcloud/router'
 import GlobalMixin from '../mixins/GlobalMixin';
@@ -275,7 +277,7 @@ export default class Timeline extends Mixins(GlobalMixin) {
         this.rowHeight = Math.floor(width / this.numCols);
 
         // Set heights of rows
-        this.list.filter(r => !r.head).forEach(row => {
+        this.list.filter(r => r.type === IRowType.PHOTOS).forEach(row => {
             row.size = this.rowHeight;
         });
         this.reflowTimeline(true);
@@ -473,7 +475,7 @@ export default class Timeline extends Mixins(GlobalMixin) {
             const head = {
                 id: ++this.numRows,
                 size: 40,
-                head: true,
+                type: IRowType.HEAD,
                 dayId: day.dayid,
                 day: day,
             };
@@ -693,7 +695,7 @@ export default class Timeline extends Mixins(GlobalMixin) {
         let dataIdx = 0;
         while (dataIdx < data.length) {
             // Check if we ran out of rows
-            if (rowIdx >= this.list.length || this.list[rowIdx].head) {
+            if (rowIdx >= this.list.length || this.list[rowIdx].type === IRowType.HEAD) {
                 addedRow = true;
                 this.list.splice(rowIdx, 0, this.getBlankRow(day));
             }
@@ -722,6 +724,10 @@ export default class Timeline extends Mixins(GlobalMixin) {
                 photo.flag |= this.c.FLAG_IS_FAVORITE;
                 delete photo.isfavorite;
             }
+            if (photo.isfolder) {
+                photo.flag |= this.c.FLAG_IS_FOLDER;
+                delete photo.isfolder;
+            }
 
             this.list[rowIdx].photos.push(photo);
             dataIdx++;
@@ -739,7 +745,7 @@ export default class Timeline extends Mixins(GlobalMixin) {
 
         // Get rid of any extra rows
         let spliceCount = 0;
-        for (let i = rowIdx + 1; i < this.list.length && !this.list[i].head; i++) {
+        for (let i = rowIdx + 1; i < this.list.length && this.list[i].type !== IRowType.HEAD; i++) {
             spliceCount++;
         }
         if (spliceCount > 0) {
@@ -754,11 +760,12 @@ export default class Timeline extends Mixins(GlobalMixin) {
         }
     }
 
-    /** Get a new blank row */
+    /** Get a new blank photos row */
     getBlankRow(day: IDay): IRow {
         return {
             id: ++this.numRows,
             photos: [],
+            type: IRowType.PHOTOS,
             size: this.rowHeight,
             dayId: day.dayid,
             day: day,

src/mixins/GlobalMixin.ts

@@ -12,10 +12,11 @@ export default class GlobalMixin extends Vue {
         FLAG_LOAD_FAIL:     1 << 2,
         FLAG_IS_VIDEO:      1 << 3,
         FLAG_IS_FAVORITE:   1 << 4,
-        FLAG_SELECTED:      1 << 5,
+        FLAG_IS_FOLDER:     1 << 5,
-        FLAG_LEAVING:       1 << 6,
+        FLAG_SELECTED:      1 << 6,
-        FLAG_EXIT_LEFT:     1 << 7,
+        FLAG_LEAVING:       1 << 7,
-        FLAG_ENTER_RIGHT:   1 << 8,
+        FLAG_EXIT_LEFT:     1 << 8,
-        FLAG_FORCE_RELOAD:  1 << 9,
+        FLAG_ENTER_RIGHT:   1 << 9,
+        FLAG_FORCE_RELOAD:  1 << 10,
     }
 }

src/types.ts

@@ -55,7 +55,7 @@ export type IRow = {
     /** Refrence to day object */
     day: IDay;
     /** Whether this is a head row */
-    head?: boolean;
+    type: IRowType;
     /** [Head only] Title of the header */
     name?: string;
     /** Main list of photo items */
@@ -65,6 +65,10 @@ export type IRow = {
     /** Count of placeholders to create */
     pct?: number;
 }
+export enum IRowType {
+    HEAD = 0,
+    PHOTOS = 1,
+}
 
 export type ITick = {
     /** Day ID */