mirror of
https://github.com/Steffo99/festa.git
synced 2024-12-22 22:54:22 +00:00
53 lines
No EOL
1.7 KiB
TypeScript
53 lines
No EOL
1.7 KiB
TypeScript
import { default as classNames } from "classnames"
|
|
import style from "./renderer.module.css"
|
|
import { useDefinedContext } from "../../utils/definedContext"
|
|
import { PostcardContext, PostcardVisibility } from "./base"
|
|
import { LegacyRef, useEffect, useRef, useState } from "react"
|
|
import { asleep } from "../../utils/asleep"
|
|
|
|
|
|
export function PostcardRenderer() {
|
|
const { previousSrc, currentSrc, visibility } = useDefinedContext(PostcardContext)
|
|
const currentRef: LegacyRef<HTMLImageElement> = useRef(null)
|
|
|
|
useEffect(
|
|
() => {
|
|
if (currentRef.current) {
|
|
currentRef.current.animate(
|
|
[
|
|
{ opacity: 0 },
|
|
{ opacity: 1 },
|
|
],
|
|
{
|
|
duration: 1000
|
|
}
|
|
)
|
|
}
|
|
},
|
|
[currentRef, currentSrc]
|
|
)
|
|
|
|
return <>
|
|
<img
|
|
src={previousSrc}
|
|
alt=""
|
|
className={classNames(
|
|
style.postcard,
|
|
style.postcardPrevious,
|
|
visibility === PostcardVisibility.BACKGROUND ? style.postcardBackground : null,
|
|
visibility === PostcardVisibility.FOREGROUND ? style.postcardForeground : null,
|
|
)}
|
|
/>
|
|
<img
|
|
src={currentSrc}
|
|
alt=""
|
|
ref={currentRef}
|
|
className={classNames(
|
|
style.postcard,
|
|
style.postcardCurrent,
|
|
visibility === PostcardVisibility.BACKGROUND ? style.postcardBackground : null,
|
|
visibility === PostcardVisibility.FOREGROUND ? style.postcardForeground : null,
|
|
)}
|
|
/>
|
|
</>
|
|
} |