add: blurred background in rewind page when ratio mismatch
This commit is contained in:
parent
3d76a5ece5
commit
fb0c60a71e
@ -34,7 +34,7 @@ function Image({ src }: { src: string }) {
|
|||||||
<img
|
<img
|
||||||
src={src}
|
src={src}
|
||||||
alt="Current frame"
|
alt="Current frame"
|
||||||
className="w-full h-full object-cover absolute inset-0"
|
className="w-full h-full object-contain absolute inset-0"
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@ -181,8 +181,6 @@ export default function RewindPage() {
|
|||||||
const newIndex = Math.min(Math.max(currentIndex - delta, 0), timeline.length - 1);
|
const newIndex = Math.min(Math.max(currentIndex - delta, 0), timeline.length - 1);
|
||||||
const newFrameId = timeline[newIndex].id;
|
const newFrameId = timeline[newIndex].id;
|
||||||
|
|
||||||
console.log(currentFrameId, lastAvaliableFrameId);
|
|
||||||
|
|
||||||
if (newFrameId !== currentFrameId) {
|
if (newFrameId !== currentFrameId) {
|
||||||
setCurrentFrameId(newFrameId);
|
setCurrentFrameId(newFrameId);
|
||||||
// Preload adjacent images
|
// Preload adjacent images
|
||||||
@ -212,9 +210,19 @@ export default function RewindPage() {
|
|||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
ref={containerRef}
|
ref={containerRef}
|
||||||
className="w-screen h-screen relative dark:text-white overflow-hidden"
|
className="w-screen h-screen relative dark:text-white overflow-hidden bg-black"
|
||||||
onWheel={handleScroll}
|
onWheel={handleScroll}
|
||||||
>
|
>
|
||||||
|
<img
|
||||||
|
src={currentFrameId
|
||||||
|
? images[currentFrameId] ||
|
||||||
|
(lastAvaliableFrameId.current ? images[lastAvaliableFrameId.current] : "")
|
||||||
|
: ""}
|
||||||
|
alt="background"
|
||||||
|
className="w-full h-full object-cover absolute inset-0 blur-lg"
|
||||||
|
/>
|
||||||
|
|
||||||
|
|
||||||
{/* Current image */}
|
{/* Current image */}
|
||||||
<Image
|
<Image
|
||||||
src={
|
src={
|
||||||
@ -225,6 +233,8 @@ export default function RewindPage() {
|
|||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
{/* Time capsule */}
|
{/* Time capsule */}
|
||||||
<div
|
<div
|
||||||
className="absolute bottom-8 left-8 bg-zinc-800 text-white bg-opacity-80 backdrop-blur-lg
|
className="absolute bottom-8 left-8 bg-zinc-800 text-white bg-opacity-80 backdrop-blur-lg
|
||||||
|
Loading…
Reference in New Issue
Block a user