pimhwang
/
movie-web
mirror of https://github.com/movie-web/movie-web.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

modal customization

pull/252/head
frost768 3 years ago
parent
5d8f03b859
commit
2eab07b8b6
2 changed files with 110 additions and 97 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      src/components/layout/Modal.tsx
  2. 205
      src/views/SettingsModal.tsx

2
src/components/layout/Modal.tsx
Unescape 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(" ")}
> >

205
src/views/SettingsModal.tsx
Unescape 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,106 +36,117 @@ 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">
<span className="text-xl font-bold">{t("settings.title")}</span> <div className="flex flex-row justify-between">
<div onClick={() => props.onClose()} className="hover:cursor-pointer"> <span className="text-xl font-bold">{t("settings.title")}</span>
<Icon icon={Icons.X} /> <div
</div> onClick={() => props.onClose()}
</div> className="hover:cursor-pointer"
<div className="flex justify-between gap-10 max-sm:flex-col"> >
<div className="flex flex-col justify-between"> <Icon icon={Icons.X} />
<label className="text-md font-semibold"> </div>
{t("settings.language")}
</label>
<Dropdown
selectedItem={
appLanguageOptions.find((l) => l.id === i18n.language)!
}
setSelectedItem={(val) => {
i18n.changeLanguage(val.id);
}}
options={appLanguageOptions}
/>
</div>
<div className="flex flex-col justify-between">
<label className="text-md font-semibold">
{t("settings.captionLanguage")}
</label>
<Dropdown
selectedItem={selectedCaptionLanguage}
setSelectedItem={(val) => {
setCaptionLanguage(val.id as LangCode);
}}
options={captionLanguages}
/>
</div> </div>
</div> <div className="flex flex-col gap-10 lg:flex-row">
<div className="flex justify-between gap-10 rounded max-md:flex-col"> <div className="lg:w-1/2">
<div className="flex flex-col justify-between"> <div className="flex flex-col justify-between">
<Slider <label className="text-md font-semibold">
label="Size" {t("settings.language")}
min={14} </label>
step={1} <Dropdown
max={60} selectedItem={
value={captionSettings.style.fontSize} appLanguageOptions.find((l) => l.id === language)!
onChange={(e) => setCaptionFontSize(e.target.valueAsNumber)} }
/> setSelectedItem={(val) => {
<Slider i18n.changeLanguage(val.id);
label={t("videoPlayer.popouts.captionPreferences.opacity")} setLanguage(val.id as LangCode);
step={1} }}
min={0} options={appLanguageOptions}
max={255} />
valueDisplay={`${captionBackgroundOpacity}%`} </div>
value={parseInt( <div className="flex flex-col justify-between">
captionSettings.style.backgroundColor.substring(7, 9), <label className="text-md font-semibold">
16 {t("settings.captionLanguage")}
)} </label>
onChange={(e) => <Dropdown
setCaptionBackgroundColor(e.target.valueAsNumber) selectedItem={selectedCaptionLanguage}
} setSelectedItem={(val) => {
/> setCaptionLanguage(val.id as LangCode);
<div className="flex flex-row justify-between"> }}
<label className="font-bold" htmlFor="color"> options={captionLanguages}
{t("videoPlayer.popouts.captionPreferences.color")} />
</label> </div>
<div className="flex flex-row gap-2"> <div className="flex flex-col justify-between">
{colors.map((color) => ( <Slider
<div label="Size"
className={`flex h-8 w-8 items-center justify-center rounded transition-[background-color,transform] duration-100 hover:bg-[#1c161b79] active:scale-110 ${ min={14}
color === captionSettings.style.color step={1}
? "bg-[#1C161B]" max={60}
: "" value={captionSettings.style.fontSize}
}`} onChange={(e) => setCaptionFontSize(e.target.valueAsNumber)}
onClick={() => setCaptionColor(color)} />
> <Slider
<div label={t("videoPlayer.popouts.captionPreferences.opacity")}
className="h-4 w-4 cursor-pointer appearance-none rounded-full" step={1}
style={{ min={0}
backgroundColor: color, max={255}
}} valueDisplay={`${captionBackgroundOpacity}%`}
/> value={parseInt(
<Icon captionSettings.style.backgroundColor.substring(7, 9),
className={[ 16
"absolute text-xs text-[#1C161B]", )}
color === captionSettings.style.color ? "" : "hidden", onChange={(e) =>
].join(" ")} setCaptionBackgroundColor(e.target.valueAsNumber)
icon={Icons.CHECKMARK} }
/> />
<div className="flex flex-row justify-between">
<label className="font-bold" htmlFor="color">
{t("videoPlayer.popouts.captionPreferences.color")}
</label>
<div className="flex flex-row gap-2">
{colors.map((color) => (
<div
className={`flex h-8 w-8 items-center justify-center rounded transition-[background-color,transform] duration-100 hover:bg-[#1c161b79] active:scale-110 ${
color === captionSettings.style.color
? "bg-[#1C161B]"
: ""
}`}
onClick={() => setCaptionColor(color)}
>
<div
className="h-4 w-4 cursor-pointer appearance-none rounded-full"
style={{
backgroundColor: color,
}}
/>
<Icon
className={[
"absolute text-xs text-[#1C161B]",
color === captionSettings.style.color
? ""
: "hidden",
].join(" ")}
icon={Icons.CHECKMARK}
/>
</div>
))}
</div> </div>
))} </div>
</div> </div>
<div />
</div> </div>
</div> <div className="flex w-full flex-col justify-center">
<div className="flex aspect-video h-[200px] flex-col justify-end rounded bg-zinc-800"> <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>
) : null}
</div> </div>
) : null} </div>
</div> </div>
</div> </div>
</ModalCard> </ModalCard>

Write Preview
Loading…
Cancel
Save