RPJosh
/
memories
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

frame: mark raw and stack 

Signed-off-by: Varun Patil <radialapps@gmail.com>
pull/900/head
Varun Patil 2023-10-28 18:46:45 -07:00
parent 757b02fc84
commit 31ad4a9fa1
3 changed files with 38 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/Timeline.vue
View File

@ -1072,9 +1072,13 @@ export default defineComponent({
// Get the list of files with the same basename // Get the list of files with the same basename
const fileList = files.get(basename); const fileList = files.get(basename);
if (fileList?.length) { if (fileList?.length) {
// Move main file to end (min priority) // Move top file to end (min priority)
const main = fileList.shift()!; const top = fileList.shift()!;
fileList.push(main); fileList.push(top);
// Stack on top file
top.stackraw ??= [];
top.stackraw.push(photo);
// Do not add this to result // Do not add this to result
continue; continue;

51
src/components/frame/Photo.vue
View File

@ -9,7 +9,6 @@
error: data.flag & c.FLAG_LOAD_FAIL, error: data.flag & c.FLAG_LOAD_FAIL,
}" }"
> >
<!-- Top-Left -->
<div <div
class="select" class="select"
v-once v-once
@ -19,23 +18,21 @@
<CheckCircleIcon :size="18" /> <CheckCircleIcon :size="18" />
</div> </div>
<!-- Top-Right --> <div class="flag top-right">
<div class="flag top-right video" v-if="data.flag & c.FLAG_IS_VIDEO"> <div class="video" v-if="data.flag & c.FLAG_IS_VIDEO">
<span v-if="data.video_duration" class="time">{{ videoDuration }}</span> <span class="time" v-if="data.video_duration">{{ videoDuration }}</span>
<VideoIcon :size="22" /> <VideoIcon :size="22" />
</div> </div>
<div <div class="livephoto" v-if="data.liveid" @mouseenter.passive="playVideo" @mouseleave.passive="stopVideo">
class="flag top-right livephoto" <LivePhotoIcon :size="22" />
v-else-if="data.liveid" </div>
@mouseenter.passive="playVideo" <RawIcon class="raw" v-if="isRaw" :size="28" />
@mouseleave.passive="stopVideo"
>
<LivePhotoIcon :size="22" />
</div> </div>
<!-- Bottom-Left --> <div class="flag bottom-left">
<StarIcon class="flag bottom-left" :size="22" v-if="data.flag & c.FLAG_IS_FAVORITE" /> <StarIcon :size="22" v-if="data.flag & c.FLAG_IS_FAVORITE" />
<LocalIcon class="flag bottom-left" :size="22" v-else-if="data.flag & c.FLAG_IS_LOCAL" /> <LocalIcon :size="22" v-if="data.flag & c.FLAG_IS_LOCAL" />
</div>
<div <div
class="img-outer fill-block" class="img-outer fill-block"
@ -59,7 +56,7 @@
@error="error" @error="error"
/> />
<video ref="video" v-if="videoUrl" :src="videoUrl" preload="none" muted playsinline disableRemotePlayback /> <video ref="video" v-if="videoUrl" :src="videoUrl" preload="none" muted playsinline disableRemotePlayback />
<div class="overlay top-left fill-block" /> <div class="overlay top-left fill-block"></div>
</div> </div>
</div> </div>
</div> </div>
@ -77,6 +74,7 @@ import StarIcon from 'vue-material-design-icons/Star.vue';
import VideoIcon from 'vue-material-design-icons/PlayCircleOutline.vue'; import VideoIcon from 'vue-material-design-icons/PlayCircleOutline.vue';
import LivePhotoIcon from 'vue-material-design-icons/MotionPlayOutline.vue'; import LivePhotoIcon from 'vue-material-design-icons/MotionPlayOutline.vue';
import LocalIcon from 'vue-material-design-icons/CloudOff.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'; import type XImg from './XImg.vue';
@ -88,6 +86,7 @@ export default defineComponent({
StarIcon, StarIcon,
LivePhotoIcon, LivePhotoIcon,
LocalIcon, LocalIcon,
RawIcon,
}, },
props: { props: {
@ -178,6 +177,10 @@ export default defineComponent({
return this.url(); return this.url();
} }
}, },
isRaw(): boolean {
return !!this.data.stackraw || this.data.mimetype === this.c.MIME_RAW;
},
}, },
methods: { methods: {
@ -360,6 +363,7 @@ $icon-size: $icon-half-size * 2;
pointer-events: none; pointer-events: none;
transition: transform 0.15s ease; transition: transform 0.15s ease;
color: white; color: white;
display: flex;
&.top-right { &.top-right {
top: var(--icon-dist); top: var(--icon-dist);
@ -377,10 +381,9 @@ $icon-size: $icon-half-size * 2;
} }
} }
&.video { > .video {
display: flex; display: flex;
align-items: center; line-height: 22px; // force text height to match
justify-content: center;
> .time { > .time {
font-size: 0.75em; font-size: 0.75em;
@ -389,9 +392,11 @@ $icon-size: $icon-half-size * 2;
} }
} }
&.livephoto { > .livephoto {
// Hover to play livephoto pointer-events: auto; // hover to play
pointer-events: auto; }
> .raw {
height: 22px; // force height to match
} }
} }

3
src/types.ts
View File

@ -95,6 +95,9 @@ export type IPhoto = {
/** Date taken UTC value (lazy fetched) */ /** Date taken UTC value (lazy fetched) */
datetaken?: number; datetaken?: number;
/** Stacked RAW photos */
stackraw?: IPhoto[];
}; };
export interface IImageInfo { export interface IImageInfo {