mirror of
https://github.com/movie-web/movie-web.git
synced 2025-01-06 08:36:07 +00:00
modal customization
This commit is contained in:
frost768
parent
5d8f03b859
commit
2eab07b8b6
|
|
@ -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(" ")}
|
||||||
>
|
>
|
||||||
|
|
|
||||||
|
|
@ -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">
|
|
||||||
{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 className="flex justify-between gap-10 rounded max-md:flex-col">
|
|
||||||
<div className="flex flex-col justify-between">
|
|
||||||
<Slider
|
|
||||||
label="Size"
|
|
||||||
min={14}
|
|
||||||
step={1}
|
|
||||||
max={60}
|
|
||||||
value={captionSettings.style.fontSize}
|
|
||||||
onChange={(e) => setCaptionFontSize(e.target.valueAsNumber)}
|
|
||||||
/>
|
|
||||||
<Slider
|
|
||||||
label={t("videoPlayer.popouts.captionPreferences.opacity")}
|
|
||||||
step={1}
|
|
||||||
min={0}
|
|
||||||
max={255}
|
|
||||||
valueDisplay={`${captionBackgroundOpacity}%`}
|
|
||||||
value={parseInt(
|
|
||||||
captionSettings.style.backgroundColor.substring(7, 9),
|
|
||||||
16
|
|
||||||
)}
|
|
||||||
onChange={(e) =>
|
|
||||||
setCaptionBackgroundColor(e.target.valueAsNumber)
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
<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 className="flex aspect-video h-[200px] flex-col justify-end rounded bg-zinc-800">
|
<div className="flex flex-col gap-10 lg:flex-row">
|
||||||
{selectedCaptionLanguage.id !== "none" ? (
|
<div className="lg:w-1/2">
|
||||||
<div className="pointer-events-none flex w-full flex-col items-center transition-[bottom]">
|
<div className="flex flex-col justify-between">
|
||||||
<CaptionCue
|
<label className="text-md font-semibold">
|
||||||
scale={0.4}
|
{t("settings.language")}
|
||||||
text={selectedCaptionLanguage.nativeName}
|
</label>
|
||||||
|
<Dropdown
|
||||||
|
selectedItem={
|
||||||
|
appLanguageOptions.find((l) => l.id === language)!
|
||||||
|
}
|
||||||
|
setSelectedItem={(val) => {
|
||||||
|
i18n.changeLanguage(val.id);
|
||||||
|
setLanguage(val.id as LangCode);
|
||||||
|
}}
|
||||||
|
options={appLanguageOptions}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
) : null}
|
<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 className="flex flex-col justify-between">
|
||||||
|
<Slider
|
||||||
|
label="Size"
|
||||||
|
min={14}
|
||||||
|
step={1}
|
||||||
|
max={60}
|
||||||
|
value={captionSettings.style.fontSize}
|
||||||
|
onChange={(e) => setCaptionFontSize(e.target.valueAsNumber)}
|
||||||
|
/>
|
||||||
|
<Slider
|
||||||
|
label={t("videoPlayer.popouts.captionPreferences.opacity")}
|
||||||
|
step={1}
|
||||||
|
min={0}
|
||||||
|
max={255}
|
||||||
|
valueDisplay={`${captionBackgroundOpacity}%`}
|
||||||
|
value={parseInt(
|
||||||
|
captionSettings.style.backgroundColor.substring(7, 9),
|
||||||
|
16
|
||||||
|
)}
|
||||||
|
onChange={(e) =>
|
||||||
|
setCaptionBackgroundColor(e.target.valueAsNumber)
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<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 className="flex w-full flex-col justify-center">
|
||||||
|
<div className="flex aspect-video flex-col justify-end rounded bg-zinc-800">
|
||||||
|
{selectedCaptionLanguage.id !== "none" ? (
|
||||||
|
<div className="pointer-events-none flex w-full flex-col items-center transition-[bottom]">
|
||||||
|
<CaptionCue
|
||||||
|
scale={0.5}
|
||||||
|
text={selectedCaptionLanguage.nativeName}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</ModalCard>
|
</ModalCard>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue