wah.su/wahs.wah.su
1
0
Fork 0
mirror of https://github.com/wah-su/wahs.wah.su.git synced 2025-09-14 10:23:50 +05:00
Code Issues Projects Releases Packages Wiki Activity

feat: add video favorite client-side

Browse source
This commit is contained in:
Kentai Radiquum 2025-02-10 00:12:51 +05:00
parent a0c54cdc0e
commit 1c7e10bb8a
Signed by: Radiquum
GPG key ID: 858E8EE696525EED
7 changed files with 200 additions and 61 deletions
Download patch file Download diff file Expand all files Collapse all files

41
src/templates/Components/PlaceHolderVid.tsx
View file

@ -1,17 +1,38 @@
export default function PlaceholderVid(props: { isMobileHidden?: boolean }) {
return (
<video
data-type="placeholder__video"
controls={true}
className={`relative aspect-square w-full h-full max-w-48 max-h-48 sm:max-w-none sm:max-h-none rounded-sm [&:not(:fullscreen)]:object-cover ${
<div
data-type="placeholder__video__container"
className={`relative aspect-square w-full h-full max-w-48 max-h-48 sm:max-w-none sm:max-h-none rounded-sm ${
props.isMobileHidden ? "hidden xl:block" : ""
}`}
>
<div
data-type="placeholder__video__loader"
className="w-full h-full absolute inset-0 bg-gray-400 opacity-30 animate-pulse z-[3]"
></div>
<source className={`${props.isMobileHidden ? "hidden xl:block" : ""}`}></source>
</video>
<video
data-type="placeholder__video"
className={`w-full h-full absolute inset-0 [&:not(:fullscreen)]:object-cover ${
props.isMobileHidden ? "hidden xl:block" : ""
}`}
controls={true}
>
<div
data-type="placeholder__video__loader"
className="w-full h-full absolute inset-0 bg-gray-400 opacity-30 animate-pulse z-[3]"
></div>
<source
className={`${props.isMobileHidden ? "hidden xl:block" : ""}`}
></source>
</video>
<button
data-type="video__fav"
className="hidden absolute right-2 top-2 w-8 h-8 cursor-pointer"
>
<div className="text-[#faebeb] hover:text-orange-500 transition-colors material-symbols--favorite-outline-rounded w-full h-full"></div>
</button>
<button
data-type="video__unfav"
className="hidden absolute right-2 top-2 w-8 h-8 cursor-pointer"
>
<div className="text-[#faebeb] hover:text-orange-500 transition-colors material-symbols--favorite-rounded w-full h-full"></div>
</button>
</div>
);
}