Animate show/hide

This commit is contained in:
Isra 2024-03-18 15:50:56 -05:00
parent a26097ffd4
commit a172322a54
1 changed files with 13 additions and 9 deletions

View File

@ -1,3 +1,4 @@
import classNames from "classnames";
import Fuse from "fuse.js"; import Fuse from "fuse.js";
import { type DragEvent, useMemo, useRef, useState } from "react"; import { type DragEvent, useMemo, useRef, useState } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
@ -194,16 +195,19 @@ export function CaptionsView({ id }: { id: string }) {
return ( return (
<> <>
<div> <div>
{dragging && ( <div
<div className="absolute inset-0 flex items-center justify-center text-white z-10 pointer-events-none"> className={classNames(
<div className="flex flex-col items-center"> "absolute inset-0 flex items-center justify-center text-white z-10 pointer-events-none transition-opacity duration-300",
<Icon className="text-5xl mb-8" icon={Icons.FILE} /> dragging ? "opacity-100" : "opacity-0",
<span className="text-xl weight font-medium"> )}
{t("player.menus.subtitles.dropSubtitleFile")} >
</span> <div className="flex flex-col items-center">
</div> <Icon className="text-5xl mb-4" icon={Icons.FILE} />
<span className="text-xl weight font-medium">
{t("player.menus.subtitles.dropSubtitleFile")}
</span>
</div> </div>
)} </div>
<Menu.BackLink <Menu.BackLink
onClick={() => router.navigate("/")} onClick={() => router.navigate("/")}