diff --git a/src/components/Timeline.vue b/src/components/Timeline.vue index f0898ede..c78cdf55 100644 --- a/src/components/Timeline.vue +++ b/src/components/Timeline.vue @@ -1072,9 +1072,13 @@ export default defineComponent({ // Get the list of files with the same basename const fileList = files.get(basename); if (fileList?.length) { - // Move main file to end (min priority) - const main = fileList.shift()!; - fileList.push(main); + // Move top file to end (min priority) + const top = fileList.shift()!; + fileList.push(top); + + // Stack on top file + top.stackraw ??= []; + top.stackraw.push(photo); // Do not add this to result continue; diff --git a/src/components/frame/Photo.vue b/src/components/frame/Photo.vue index 5869dd47..4ecdc999 100644 --- a/src/components/frame/Photo.vue +++ b/src/components/frame/Photo.vue @@ -9,7 +9,6 @@ error: data.flag & c.FLAG_LOAD_FAIL, }" > -
- -
- {{ videoDuration }} - -
-
- +
+
+ {{ videoDuration }} + +
+
+ +
+
- - - +
+ + +
@@ -77,6 +74,7 @@ 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'; +import RawIcon from 'vue-material-design-icons/Raw.vue'; import type XImg from './XImg.vue'; @@ -88,6 +86,7 @@ export default defineComponent({ StarIcon, LivePhotoIcon, LocalIcon, + RawIcon, }, props: { @@ -178,6 +177,10 @@ export default defineComponent({ return this.url(); } }, + + isRaw(): boolean { + return !!this.data.stackraw || this.data.mimetype === this.c.MIME_RAW; + }, }, methods: { @@ -360,6 +363,7 @@ $icon-size: $icon-half-size * 2; pointer-events: none; transition: transform 0.15s ease; color: white; + display: flex; &.top-right { top: var(--icon-dist); @@ -377,10 +381,9 @@ $icon-size: $icon-half-size * 2; } } - &.video { + > .video { display: flex; - align-items: center; - justify-content: center; + line-height: 22px; // force text height to match > .time { font-size: 0.75em; @@ -389,9 +392,11 @@ $icon-size: $icon-half-size * 2; } } - &.livephoto { - // Hover to play livephoto - pointer-events: auto; + > .livephoto { + pointer-events: auto; // hover to play + } + > .raw { + height: 22px; // force height to match } } diff --git a/src/types.ts b/src/types.ts index a78ecdbd..eec65f5b 100644 --- a/src/types.ts +++ b/src/types.ts @@ -95,6 +95,9 @@ export type IPhoto = { /** Date taken UTC value (lazy fetched) */ datetaken?: number; + + /** Stacked RAW photos */ + stackraw?: IPhoto[]; }; export interface IImageInfo {