From f3b1e8607f5ef2604a28e8d06f18804e920d8bdf Mon Sep 17 00:00:00 2001 From: Matthias Van Parijs Date: Fri, 18 Oct 2024 15:46:47 +0200 Subject: [PATCH] Added more translations --- .../src/components/hooks/use-toast.ts | 14 +++++----- .../dashboard/src/components/ui/accordion.tsx | 26 +++++++++---------- .../dashboard/src/components/ui/resizable.tsx | 20 +++++++------- .../controls/components/FullscreenButton.tsx | 2 +- .../controls/components/PlayPauseButton.tsx | 2 +- .../controls/components/QualitiesPane.tsx | 7 +++-- .../controls/components/SqButtonTooltip.tsx | 2 +- .../controls/components/TextAudioPane.tsx | 8 +++--- packages/player/src/react/controls/i18n.ts | 20 +++++++++----- 9 files changed, 56 insertions(+), 45 deletions(-) diff --git a/packages/dashboard/src/components/hooks/use-toast.ts b/packages/dashboard/src/components/hooks/use-toast.ts index 01f0976b..2c2fd42a 100644 --- a/packages/dashboard/src/components/hooks/use-toast.ts +++ b/packages/dashboard/src/components/hooks/use-toast.ts @@ -12,13 +12,6 @@ type ToasterToast = ToastProps & { action?: ToastActionElement; }; -const actionTypes = { - ADD_TOAST: "ADD_TOAST", - UPDATE_TOAST: "UPDATE_TOAST", - DISMISS_TOAST: "DISMISS_TOAST", - REMOVE_TOAST: "REMOVE_TOAST", -} as const; - let count = 0; function genId() { @@ -26,7 +19,12 @@ function genId() { return count.toString(); } -type ActionType = typeof actionTypes; +type ActionType = { + readonly ADD_TOAST: "ADD_TOAST"; + readonly UPDATE_TOAST: "UPDATE_TOAST"; + readonly DISMISS_TOAST: "DISMISS_TOAST"; + readonly REMOVE_TOAST: "REMOVE_TOAST"; +}; type Action = | { diff --git a/packages/dashboard/src/components/ui/accordion.tsx b/packages/dashboard/src/components/ui/accordion.tsx index e6a723d0..83ff0179 100644 --- a/packages/dashboard/src/components/ui/accordion.tsx +++ b/packages/dashboard/src/components/ui/accordion.tsx @@ -1,10 +1,10 @@ -import * as React from "react" -import * as AccordionPrimitive from "@radix-ui/react-accordion" -import { ChevronDown } from "lucide-react" +import * as React from "react"; +import * as AccordionPrimitive from "@radix-ui/react-accordion"; +import { ChevronDown } from "lucide-react"; -import { cn } from "@/lib/utils" +import { cn } from "@/lib/utils"; -const Accordion = AccordionPrimitive.Root +const Accordion = AccordionPrimitive.Root; const AccordionItem = React.forwardRef< React.ElementRef, @@ -15,8 +15,8 @@ const AccordionItem = React.forwardRef< className={cn("border-b", className)} {...props} /> -)) -AccordionItem.displayName = "AccordionItem" +)); +AccordionItem.displayName = "AccordionItem"; const AccordionTrigger = React.forwardRef< React.ElementRef, @@ -27,7 +27,7 @@ const AccordionTrigger = React.forwardRef< ref={ref} className={cn( "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180", - className + className, )} {...props} > @@ -35,8 +35,8 @@ const AccordionTrigger = React.forwardRef< -)) -AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName +)); +AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName; const AccordionContent = React.forwardRef< React.ElementRef, @@ -49,8 +49,8 @@ const AccordionContent = React.forwardRef< >
{children}
-)) +)); -AccordionContent.displayName = AccordionPrimitive.Content.displayName +AccordionContent.displayName = AccordionPrimitive.Content.displayName; -export { Accordion, AccordionItem, AccordionTrigger, AccordionContent } +export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }; diff --git a/packages/dashboard/src/components/ui/resizable.tsx b/packages/dashboard/src/components/ui/resizable.tsx index cd3cb0ec..44603458 100644 --- a/packages/dashboard/src/components/ui/resizable.tsx +++ b/packages/dashboard/src/components/ui/resizable.tsx @@ -1,7 +1,7 @@ -import { GripVertical } from "lucide-react" -import * as ResizablePrimitive from "react-resizable-panels" +import { GripVertical } from "lucide-react"; +import * as ResizablePrimitive from "react-resizable-panels"; -import { cn } from "@/lib/utils" +import { cn } from "@/lib/utils"; const ResizablePanelGroup = ({ className, @@ -10,25 +10,25 @@ const ResizablePanelGroup = ({ -) +); -const ResizablePanel = ResizablePrimitive.Panel +const ResizablePanel = ResizablePrimitive.Panel; const ResizableHandle = ({ withHandle, className, ...props }: React.ComponentProps & { - withHandle?: boolean + withHandle?: boolean; }) => ( div]:rotate-90", - className + className, )} {...props} > @@ -38,6 +38,6 @@ const ResizableHandle = ({ )} -) +); -export { ResizablePanelGroup, ResizablePanel, ResizableHandle } +export { ResizablePanelGroup, ResizablePanel, ResizableHandle }; diff --git a/packages/player/src/react/controls/components/FullscreenButton.tsx b/packages/player/src/react/controls/components/FullscreenButton.tsx index 4ed9de86..bacc084e 100644 --- a/packages/player/src/react/controls/components/FullscreenButton.tsx +++ b/packages/player/src/react/controls/components/FullscreenButton.tsx @@ -14,7 +14,7 @@ export function FullscreenButton({ toggleFullscreen }: FullscreenButtonProps) { return ( {fullscreen ? ( diff --git a/packages/player/src/react/controls/components/PlayPauseButton.tsx b/packages/player/src/react/controls/components/PlayPauseButton.tsx index a4f0347e..93116f93 100644 --- a/packages/player/src/react/controls/components/PlayPauseButton.tsx +++ b/packages/player/src/react/controls/components/PlayPauseButton.tsx @@ -19,7 +19,7 @@ export function PlayPauseButton({ nudgeVisible }: PlayPauseButtonProps) { facade.playOrPause(); nudgeVisible(); }} - tooltip={canPause ? "pause" : "play"} + tooltip={canPause ? "button.pause" : "button.play"} tooltipPlacement="left" > {canPause ? ( diff --git a/packages/player/src/react/controls/components/QualitiesPane.tsx b/packages/player/src/react/controls/components/QualitiesPane.tsx index 995c31d9..b36f90f3 100644 --- a/packages/player/src/react/controls/components/QualitiesPane.tsx +++ b/packages/player/src/react/controls/components/QualitiesPane.tsx @@ -2,12 +2,14 @@ import cn from "clsx"; import { CheckList } from "./CheckList"; import { Pane } from "./Pane"; import { Quality, useFacade, useSelector } from "../.."; +import { useI18n } from "../hooks/useI18n"; import type { CheckListItem } from "./CheckList"; export function QualitiesPane() { const facade = useFacade(); const qualities = useSelector((facade) => facade.qualities); const autoQuality = useSelector((facade) => facade.autoQuality); + const l = useI18n(); const qualityItems = qualities.map((it) => ({ id: it.height, @@ -22,7 +24,7 @@ export function QualitiesPane() { }); return ( - + facade.setQuality(id)} items={qualityItems} @@ -32,11 +34,12 @@ export function QualitiesPane() { } function getAutoLabel(qualities: Quality[], autoQuality: boolean) { + const l = useI18n(); const height = qualities.find((it) => it.active)?.height ?? 0; return (
- Auto + {l("settings.quality.auto")} facade.subtitleTracks); const audioTracks = useSelector((facade) => facade.audioTracks); + const l = useI18n(); const subtitleItems = subtitleTracks.map((it) => ({ id: it.id, @@ -16,19 +18,19 @@ export function TextAudioPane() { subtitleItems.push({ id: null, - label: "None", + label: l("settings.subtitle.none"), checked: !subtitleTracks.some((it) => it.active), }); return (
- + facade.setSubtitleTrack(id)} items={subtitleItems} /> - + { if (id !== null) { diff --git a/packages/player/src/react/controls/i18n.ts b/packages/player/src/react/controls/i18n.ts index a478eaa2..12ec5bc4 100644 --- a/packages/player/src/react/controls/i18n.ts +++ b/packages/player/src/react/controls/i18n.ts @@ -3,16 +3,24 @@ type OverrideMap = Partial<{ [key in LangKey]: string }>; export type LangKey = keyof typeof defaultLangMap; export const defaultLangMap = { - play: "Play", - pause: "Pause", - fullscreen: "Fullscreen", - exitFullscreen: "Exit fullscreen", + "button.play": "Play", + "button.pause": "Pause", + "button.fullscreen": "Fullscreen", + "button.exit-fullscreen": "Exit fullscreen", + "settings.quality.title": "Quality", + "settings.quality.auto": "Auto", + "settings.subtitle.none": "None", + "settings.subtitle.title": "Subtitles", + "settings.audio.title": "Audio", } as const; export const langMap: Record<"eng" | "nld", OverrideMap> = { eng: defaultLangMap, nld: { - play: "Afspelen", - pause: "Pauseren", + "button.play": "Afspelen", + "button.pause": "Pauseren", + "settings.quality.title": "Kwaliteit", + "settings.subtitle.none": "Geen", + "settings.subtitle.title": "Ondertitels", }, } as const;