add label

This commit is contained in:
Kentai Radiquum 2025-04-09 06:24:08 +05:00
parent 6a27977576
commit 0168daa6cc
Signed by: Radiquum
GPG key ID: 858E8EE696525EED
2 changed files with 39 additions and 36 deletions

View file

@ -116,7 +116,7 @@
--media-settings-menu-min-width: calc(10 * var(--base)); --media-settings-menu-min-width: calc(10 * var(--base));
--media-menu-transform-in: translateY(0) scale(1); --media-menu-transform-in: translateY(0) scale(1);
--media-menu-transform-out: translateY(20px) rotate(3deg) scale(1); --media-menu-transform-out: translateY(20px) rotate(3deg) scale(1);
background: rgb(30 30 30 / .8); background: rgb(30 30 30 / .6);
min-width: var(--media-settings-menu-min-width, 170px); min-width: var(--media-settings-menu-min-width, 170px);
position: absolute; position: absolute;
right: 10px; right: 10px;

View file

@ -63,12 +63,14 @@ export const VoiceoverSelectorMenu = ({
}, [release_id, token]); }, [release_id, token]);
return ( return (
<div className="max-h-full flex flex-col gap-4 items-start justify-start overflow-x-hidden overflow-y-auto px-2 py-2 scrollbar-thin scrollbar-thumb-[rgb(60_60_60_/_.8)] scrollbar-track-[rgb(30_30_30_/_.8)]"> <div className="flex flex-col items-start justify-start gap-4">
<p className="text-[22px] px-2 py-2 font-bold">Озвучка</p>
<div className="max-h-full flex flex-col gap-4 items-start justify-start overflow-x-hidden overflow-y-auto px-2 scrollbar-thin scrollbar-thumb-[rgb(60_60_60_/_.8)] scrollbar-track-[rgb(30_30_30_/_.8)]">
{voiceoverList && voiceoverList.length > 0 ? {voiceoverList && voiceoverList.length > 0 ?
voiceoverList.map((vo: Voiceover) => { voiceoverList.map((vo: Voiceover) => {
return ( return (
<Button key={`release-${release_id}-voiceover-${vo.id}`} <button key={`release-${release_id}-voiceover-${vo.id}`}
className={`h-fit ${voiceover.id == vo.id ? "text-white" : "text-gray-500 hover:text-gray-300"} transition-colors`} className={`h-fit justify-start items-start ${voiceover.id == vo.id ? "text-white" : "text-gray-500 hover:text-gray-300"} transition-colors`}
onClick={() => { onClick={() => {
setVoiceover({ setVoiceover({
selected: vo, selected: vo,
@ -81,11 +83,11 @@ export const VoiceoverSelectorMenu = ({
} }
} }
> >
<div className="flex flex-col gap-1"> <div className="flex flex-col w-full gap-1">
<div className="flex gap-2"> <div className="flex items-center gap-2">
{/* eslint-disable-next-line @next/next/no-img-element */} {/* eslint-disable-next-line @next/next/no-img-element */}
{vo.icon ? <img alt="" className="w-6 h-6 rounded-full" src={vo.icon}></img> : ""} {vo.icon ? <img alt="" className="w-6 h-6 rounded-full" src={vo.icon}></img> : ""}
<span>{vo.name}</span> <span className="text-[16px] leading-none">{vo.name}</span>
{vo.pinned && ( {vo.pinned && (
<span className={`h-4 iconify material-symbols--push-pin ${voiceover.id == vo.id ? "bg-white" : "bg-gray-500 hover:bg-gray-300"} transition-colors`}></span> <span className={`h-4 iconify material-symbols--push-pin ${voiceover.id == vo.id ? "bg-white" : "bg-gray-500 hover:bg-gray-300"} transition-colors`}></span>
)} )}
@ -96,10 +98,11 @@ export const VoiceoverSelectorMenu = ({
<span>{vo.view_count} {numberDeclension(vo.view_count, "просмотр", "просмотра", "просмотров")}</span> <span>{vo.view_count} {numberDeclension(vo.view_count, "просмотр", "просмотра", "просмотров")}</span>
</div> </div>
</div> </div>
</Button> </button>
); );
}) })
: ""} : ""}
</div> </div>
</div>
); );
}; };