Creepso/p-stream
1
0
Fork 0
mirror of https://github.com/p-stream/p-stream.git synced 2026-03-28 12:48:43 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

add preview to captions settings atoms

Browse source
This commit is contained in:
Pas 2025-02-10 23:06:09 -07:00
parent bf75682e9c
commit 24b30f24bb
2 changed files with 50 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

67
src/components/overlays/positions/OverlayMobilePosition.tsx
View file

@ -1,7 +1,8 @@
import classNames from "classnames";
import { ReactNode } from "react";
import { ReactNode, useState } from "react";
import { useTranslation } from "react-i18next";
import { Icon, Icons } from "@/components/Icon";
import { useInternalOverlayRouter } from "@/hooks/useOverlayRouter";
interface MobilePositionProps {
@ -10,28 +11,56 @@ interface MobilePositionProps {
}
export function OverlayMobilePosition(props: MobilePositionProps) {
const [isPreviewMode, setIsPreviewMode] = useState(false);
const router = useInternalOverlayRouter("hello world :)");
const { t } = useTranslation();
return (
<div
className={classNames([
"pointer-events-auto px-4 pb-6 z-10 ml-[env(safe-area-inset-left)] mr-[env(safe-area-inset-right)] bottom-0 origin-top-left inset-x-0 absolute overflow-hidden max-h-[calc(100vh-1.5rem)] grid grid-rows-[minmax(0,1fr),auto]",
props.className,
])}
>
{props.children}
const togglePreview = () => {
setIsPreviewMode(!isPreviewMode);
};
{/* Close button */}
<button
className="w-full text-video-context-type-main bg-video-context-background z-10 relative hover:bg-video-context-closeHover active:scale-95 rounded-2xl pointer-events-auto transition-all duration-100 flex justify-center items-center py-3 mt-3 font-bold border border-video-context-border hover:text-white"
type="button"
onClick={() => router.close()}
const isCaptionsSettings = window.location.href.endsWith(
"settings%2Fcaptions%2Fsettings",
);
return (
<>
{isCaptionsSettings ? (
<button
className="fixed top-1 right-4 w-12 h-12 text-video-context-type-main bg-video-context-background z-10 hover:bg-video-context-closeHover active:scale-95 rounded-2xl pointer-events-auto transition-all duration-100 flex justify-center items-center py-3 mt-3 font-bold border border-video-context-border hover:text-white"
type="button"
onClick={togglePreview}
>
{isPreviewMode ? (
<Icon icon={Icons.EYE} className="w-4" />
) : (
<Icon icon={Icons.EYE_SLASH} className="w-4" />
)}
</button>
) : null}
{/* Main Overlay */}
<div
className={classNames([
"pointer-events-auto px-4 pb-6 z-10 ml-[env(safe-area-inset-left)] mr-[env(safe-area-inset-right)] bottom-0 origin-top-left inset-x-0 absolute overflow-hidden max-h-[calc(100vh-1.5rem)] grid grid-rows-[minmax(0,1fr),auto]",
props.className,
"transition-all duration-300",
isPreviewMode ? "opacity-50" : "opacity-100",
])}
>
{t("overlays.close")}
</button>
{/* Gradient to hide the progress */}
<div className="pointer-events-none absolute z-0 bottom-0 left-0 w-full h-32 bg-gradient-to-t from-black to-transparent" />
</div>
{props.children}
{/* Close button */}
<button
className="w-full text-video-context-type-main bg-video-context-background z-10 relative hover:bg-video-context-closeHover active:scale-95 rounded-2xl pointer-events-auto transition-all duration-100 flex justify-center items-center py-3 mt-3 font-bold border border-video-context-border hover:text-white"
type="button"
onClick={() => router.close()}
>
{t("overlays.close")}
</button>
{/* Gradient to hide the progress */}
<div className="pointer-events-none absolute z-0 bottom-0 left-0 w-full h-32 bg-gradient-to-t from-black to-transparent" />
</div>
</>
);
}

4
src/components/player/atoms/settings/CaptionSettingsView.tsx
View file

@ -264,8 +264,8 @@ export function CaptionSettingsView({
<Menu.Section className="space-y-6 pb-5">
<CaptionSetting
label={t("player.menus.subtitles.settings.delay")}
max={10}
min={-10}
max={20}
min={-20}
onChange={(v) => setDelay(v)}
value={delay}
textTransformer={(s) => `${s}s`}