Added more translations

superstreamerapp · Oct 18, 2024 · f3b1e86 · f3b1e86
1 parent 0139a7b
commit f3b1e86
Show file tree

Hide file tree

Showing 9 changed files with 56 additions and 45 deletions.
diff --git a/packages/dashboard/src/components/hooks/use-toast.ts b/packages/dashboard/src/components/hooks/use-toast.ts
@@ -12,21 +12,19 @@ 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() {
   count = (count + 1) % Number.MAX_SAFE_INTEGER;
   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
@@ -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<typeof AccordionPrimitive.Item>,
@@ -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<typeof AccordionPrimitive.Trigger>,
@@ -27,16 +27,16 @@ 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}
     >
       {children}
       <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
     </AccordionPrimitive.Trigger>
   </AccordionPrimitive.Header>
-))
-AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
+));
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
 
 const AccordionContent = React.forwardRef<
   React.ElementRef<typeof AccordionPrimitive.Content>,
@@ -49,8 +49,8 @@ const AccordionContent = React.forwardRef<
   >
     <div className={cn("pb-4 pt-0", className)}>{children}</div>
   </AccordionPrimitive.Content>
-))
+));
 
-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
@@ -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 = ({
   <ResizablePrimitive.PanelGroup
     className={cn(
       "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
-      className
+      className,
     )}
     {...props}
   />
-)
+);
 
-const ResizablePanel = ResizablePrimitive.Panel
+const ResizablePanel = ResizablePrimitive.Panel;
 
 const ResizableHandle = ({
   withHandle,
   className,
   ...props
 }: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
-  withHandle?: boolean
+  withHandle?: boolean;
 }) => (
   <ResizablePrimitive.PanelResizeHandle
     className={cn(
       "relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
-      className
+      className,
     )}
     {...props}
   >
@@ -38,6 +38,6 @@ const ResizableHandle = ({
       </div>
     )}
   </ResizablePrimitive.PanelResizeHandle>
-)
+);
 
-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
@@ -14,7 +14,7 @@ export function FullscreenButton({ toggleFullscreen }: FullscreenButtonProps) {
   return (
     <SqButton
       onClick={toggleFullscreen}
-      tooltip={fullscreen ? "exitFullscreen" : "fullscreen"}
+      tooltip={fullscreen ? "button.exit-fullscreen" : "button.fullscreen"}
       tooltipPlacement="right"
     >
       {fullscreen ? (

diff --git 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
@@ -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<CheckListItem>((it) => ({
     id: it.height,
@@ -22,7 +24,7 @@ export function QualitiesPane() {
   });
 
   return (
-    <Pane title="Quality">
+    <Pane title={l("settings.quality.title")}>
       <CheckList
         onSelect={(id) => 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 (
     <div className="flex items-center min-w-20 overflow-hidden">
-      Auto
+      {l("settings.quality.auto")}
       <span
         className={cn(
           "text-[0.7rem] font-medium ml-auto transition-all",

diff --git a/packages/player/src/react/controls/components/SqButtonTooltip.tsx b/packages/player/src/react/controls/components/SqButtonTooltip.tsx
@@ -14,7 +14,7 @@ export function SqButtonTooltip({ value, placement }: SqButtonTooltipProps) {
 
   // We have a progress bar shown when interstitial is an ad, or
   // if we have no interstitial at all.
-  let progress = interstitial?.type === "ad" || !interstitial;
+  const progress = interstitial?.type === "ad" || !interstitial;
 
   return (
     <div

diff --git a/packages/player/src/react/controls/components/TextAudioPane.tsx b/packages/player/src/react/controls/components/TextAudioPane.tsx
@@ -1,12 +1,14 @@
 import { CheckList } from "./CheckList";
 import { Pane } from "./Pane";
 import { useFacade, useSelector } from "../..";
+import { useI18n } from "../hooks/useI18n";
 import type { CheckListItem } from "./CheckList";
 
 export function TextAudioPane() {
   const facade = useFacade();
   const subtitleTracks = useSelector((facade) => facade.subtitleTracks);
   const audioTracks = useSelector((facade) => facade.audioTracks);
+  const l = useI18n();
 
   const subtitleItems = subtitleTracks.map<CheckListItem>((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 (
     <div className="flex">
-      <Pane title="Subtitles">
+      <Pane title={l("settings.subtitle.title")}>
         <CheckList
           onSelect={(id) => facade.setSubtitleTrack(id)}
           items={subtitleItems}
         />
       </Pane>
-      <Pane title="Audio">
+      <Pane title={l("settings.audio.title")}>
         <CheckList
           onSelect={(id) => {
             if (id !== null) {

diff --git 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;