mirrors/movie-web
1
0
Fork 0
mirror of https://github.com/movie-web/movie-web.git synced 2025-01-07 19:56:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

modal customization

Browse source
This commit is contained in:
frost768 2023-04-06 04:35:20 +03:00
parent 5d8f03b859
commit 2eab07b8b6
2 changed files with 111 additions and 98 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/layout/Modal.tsx
View file

@ -39,7 +39,7 @@ export function ModalCard(props: { className?: string; children?: ReactNode }) {
return ( return (
<div <div
className={[ className={[
"relative mx-2 max-w-[600px] overflow-hidden rounded-lg bg-denim-200 px-10 py-10", "relative mx-2 w-[500px] overflow-hidden rounded-lg bg-denim-200 px-10 py-10 sm:w-[500px] md:w-[500px] lg:w-[1000px]",
props.className, props.className,
].join(" ")} ].join(" ")}
> >

35
src/views/SettingsModal.tsx
View file

@ -5,9 +5,9 @@ import { useSettings } from "@/state/settings";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { CaptionCue } from "@/video/components/actions/CaptionRendererAction"; import { CaptionCue } from "@/video/components/actions/CaptionRendererAction";
import { Slider } from "@/video/components/popouts/CaptionSettingsPopout"; import { Slider } from "@/video/components/popouts/CaptionSettingsPopout";
import { appLanguageOptions } from "@/setup/i18n";
import { LangCode, captionLanguages } from "@/setup/iso6391"; import { LangCode, captionLanguages } from "@/setup/iso6391";
import { useMemo } from "react"; import { useMemo } from "react";
import { appLanguageOptions } from "@/setup/i18n";
export default function SettingsModal(props: { export default function SettingsModal(props: {
onClose: () => void; onClose: () => void;
@ -15,6 +15,8 @@ export default function SettingsModal(props: {
}) { }) {
const { const {
captionSettings, captionSettings,
language,
setLanguage,
setCaptionLanguage, setCaptionLanguage,
setCaptionBackgroundColor, setCaptionBackgroundColor,
setCaptionColor, setCaptionColor,
@ -34,24 +36,30 @@ export default function SettingsModal(props: {
).toFixed(0); ).toFixed(0);
return ( return (
<Modal show={props.show}> <Modal show={props.show}>
<ModalCard className="max-w-[800px] bg-ash-300 text-white"> <ModalCard className="bg-ash-300 text-white">
<div className="flex w-full flex-row justify-between"> <div className="flex flex-col gap-4">
<div className="flex flex-row justify-between">
<span className="text-xl font-bold">{t("settings.title")}</span> <span className="text-xl font-bold">{t("settings.title")}</span>
<div onClick={() => props.onClose()} className="hover:cursor-pointer"> <div
onClick={() => props.onClose()}
className="hover:cursor-pointer"
>
<Icon icon={Icons.X} /> <Icon icon={Icons.X} />
</div> </div>
</div> </div>
<div className="flex justify-between gap-10 max-sm:flex-col"> <div className="flex flex-col gap-10 lg:flex-row">
<div className="lg:w-1/2">
<div className="flex flex-col justify-between"> <div className="flex flex-col justify-between">
<label className="text-md font-semibold"> <label className="text-md font-semibold">
{t("settings.language")} {t("settings.language")}
</label> </label>
<Dropdown <Dropdown
selectedItem={ selectedItem={
appLanguageOptions.find((l) => l.id === i18n.language)! appLanguageOptions.find((l) => l.id === language)!
} }
setSelectedItem={(val) => { setSelectedItem={(val) => {
i18n.changeLanguage(val.id); i18n.changeLanguage(val.id);
setLanguage(val.id as LangCode);
}} }}
options={appLanguageOptions} options={appLanguageOptions}
/> />
@ -68,8 +76,6 @@ export default function SettingsModal(props: {
options={captionLanguages} options={captionLanguages}
/> />
</div> </div>
</div>
<div className="flex justify-between gap-10 rounded max-md:flex-col">
<div className="flex flex-col justify-between"> <div className="flex flex-col justify-between">
<Slider <Slider
label="Size" label="Size"
@ -116,7 +122,9 @@ export default function SettingsModal(props: {
<Icon <Icon
className={[ className={[
"absolute text-xs text-[#1C161B]", "absolute text-xs text-[#1C161B]",
color === captionSettings.style.color ? "" : "hidden", color === captionSettings.style.color
? ""
: "hidden",
].join(" ")} ].join(" ")}
icon={Icons.CHECKMARK} icon={Icons.CHECKMARK}
/> />
@ -125,17 +133,22 @@ export default function SettingsModal(props: {
</div> </div>
</div> </div>
</div> </div>
<div className="flex aspect-video h-[200px] flex-col justify-end rounded bg-zinc-800"> <div />
</div>
<div className="flex w-full flex-col justify-center">
<div className="flex aspect-video flex-col justify-end rounded bg-zinc-800">
{selectedCaptionLanguage.id !== "none" ? ( {selectedCaptionLanguage.id !== "none" ? (
<div className="pointer-events-none flex w-full flex-col items-center transition-[bottom]"> <div className="pointer-events-none flex w-full flex-col items-center transition-[bottom]">
<CaptionCue <CaptionCue
scale={0.4} scale={0.5}
text={selectedCaptionLanguage.nativeName} text={selectedCaptionLanguage.nativeName}
/> />
</div> </div>
) : null} ) : null}
</div> </div>
</div> </div>
</div>
</div>
</ModalCard> </ModalCard>
</Modal> </Modal>
); );