mirror of https://github.com/usememos/memos
fix: unify live photo previews around LIVE badge playback
boojack
3 months ago
parent
065e817470
commit
6b0487dcd8
@ -0,0 +1,115 @@
|
||||
import { useCallback, useEffect, useRef, useState } from "react";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
interface MotionPhotoPlayerProps {
|
||||
posterUrl: string;
|
||||
motionUrl: string;
|
||||
alt: string;
|
||||
presentationTimestampUs?: bigint;
|
||||
containerClassName?: string;
|
||||
mediaClassName?: string;
|
||||
active?: boolean;
|
||||
loop?: boolean;
|
||||
}
|
||||
|
||||
const MotionPhotoPlayer = ({
|
||||
posterUrl,
|
||||
motionUrl,
|
||||
alt,
|
||||
presentationTimestampUs,
|
||||
containerClassName,
|
||||
mediaClassName,
|
||||
active,
|
||||
loop = false,
|
||||
}: MotionPhotoPlayerProps) => {
|
||||
const videoRef = useRef<HTMLVideoElement>(null);
|
||||
const [isPlaying, setIsPlaying] = useState(false);
|
||||
|
||||
const resetPlaybackPosition = useCallback(
|
||||
(video: HTMLVideoElement) => {
|
||||
const startTime = presentationTimestampUs && presentationTimestampUs > 0n ? Number(presentationTimestampUs) / 1_000_000 : 0;
|
||||
video.currentTime = startTime;
|
||||
},
|
||||
[presentationTimestampUs],
|
||||
);
|
||||
|
||||
const stopPlayback = useCallback(
|
||||
(resetPosition = true) => {
|
||||
const video = videoRef.current;
|
||||
if (!video) {
|
||||
return;
|
||||
}
|
||||
|
||||
video.pause();
|
||||
if (resetPosition && video.readyState >= 1) {
|
||||
resetPlaybackPosition(video);
|
||||
}
|
||||
setIsPlaying(false);
|
||||
},
|
||||
[resetPlaybackPosition],
|
||||
);
|
||||
|
||||
const startPlayback = useCallback(
|
||||
async (loop: boolean) => {
|
||||
const video = videoRef.current;
|
||||
if (!video) {
|
||||
return;
|
||||
}
|
||||
|
||||
video.loop = loop;
|
||||
if (video.readyState >= 1) {
|
||||
resetPlaybackPosition(video);
|
||||
}
|
||||
|
||||
try {
|
||||
await video.play();
|
||||
setIsPlaying(true);
|
||||
} catch {
|
||||
setIsPlaying(false);
|
||||
}
|
||||
},
|
||||
[resetPlaybackPosition],
|
||||
);
|
||||
|
||||
useEffect(() => stopPlayback, [stopPlayback]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!active) {
|
||||
stopPlayback();
|
||||
return;
|
||||
}
|
||||
|
||||
void startPlayback(loop);
|
||||
}, [active, loop, startPlayback, stopPlayback]);
|
||||
|
||||
return (
|
||||
<div className={cn("relative overflow-hidden", containerClassName)}>
|
||||
<img
|
||||
src={posterUrl}
|
||||
alt={alt}
|
||||
className={cn("block max-h-full max-w-full select-none object-cover", mediaClassName)}
|
||||
draggable={false}
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
/>
|
||||
<video
|
||||
ref={videoRef}
|
||||
src={motionUrl}
|
||||
poster={posterUrl}
|
||||
className={cn(
|
||||
"pointer-events-none absolute inset-0 h-full w-full object-cover transition-opacity duration-200",
|
||||
isPlaying ? "opacity-100" : "opacity-0",
|
||||
mediaClassName,
|
||||
)}
|
||||
muted
|
||||
playsInline
|
||||
preload="metadata"
|
||||
disableRemotePlayback
|
||||
onLoadedMetadata={(event) => resetPlaybackPosition(event.currentTarget)}
|
||||
onEnded={() => stopPlayback()}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default MotionPhotoPlayer;
|
||||
@ -0,0 +1,75 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import MotionPhotoPlayer from "@/components/MotionPhotoPlayer";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
interface MotionPhotoPreviewProps {
|
||||
posterUrl: string;
|
||||
motionUrl: string;
|
||||
alt: string;
|
||||
presentationTimestampUs?: bigint;
|
||||
containerClassName?: string;
|
||||
mediaClassName?: string;
|
||||
badgeClassName?: string;
|
||||
loop?: boolean;
|
||||
}
|
||||
|
||||
const MotionPhotoPreview = ({
|
||||
posterUrl,
|
||||
motionUrl,
|
||||
alt,
|
||||
presentationTimestampUs,
|
||||
containerClassName,
|
||||
mediaClassName,
|
||||
badgeClassName,
|
||||
loop = false,
|
||||
}: MotionPhotoPreviewProps) => {
|
||||
const [motionActive, setMotionActive] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setMotionActive(false);
|
||||
}, [motionUrl, posterUrl]);
|
||||
|
||||
return (
|
||||
<div className={cn("relative max-w-full max-h-full", containerClassName)}>
|
||||
<MotionPhotoPlayer
|
||||
posterUrl={posterUrl}
|
||||
motionUrl={motionUrl}
|
||||
alt={alt}
|
||||
presentationTimestampUs={presentationTimestampUs}
|
||||
active={motionActive}
|
||||
loop={loop}
|
||||
containerClassName={cn("max-w-full max-h-full", containerClassName)}
|
||||
mediaClassName={mediaClassName}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
className={cn(
|
||||
"absolute rounded-full border border-border/45 bg-background/65 px-2.5 py-1 text-xs font-semibold tracking-wide text-foreground backdrop-blur-sm transition-colors hover:bg-background/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50",
|
||||
badgeClassName,
|
||||
)}
|
||||
onMouseEnter={() => setMotionActive(true)}
|
||||
onMouseLeave={() => setMotionActive(false)}
|
||||
onFocus={() => setMotionActive(true)}
|
||||
onBlur={() => setMotionActive(false)}
|
||||
onPointerDown={(event) => {
|
||||
event.stopPropagation();
|
||||
if (event.pointerType !== "mouse") {
|
||||
setMotionActive(true);
|
||||
}
|
||||
}}
|
||||
onPointerUp={(event) => {
|
||||
event.stopPropagation();
|
||||
if (event.pointerType !== "mouse") {
|
||||
setMotionActive(false);
|
||||
}
|
||||
}}
|
||||
onPointerCancel={() => setMotionActive(false)}
|
||||
aria-label="Hover or press to play live photo"
|
||||
>
|
||||
LIVE
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default MotionPhotoPreview;
|
||||
Loading…
Reference in New Issue