fix: add swedish translations

Eyevinn · Nov 8, 2024 · 0196967 · 0196967
1 parent ef34b29
commit 0196967
Show file tree

Hide file tree

Showing 8 changed files with 107 additions and 26 deletions.
diff --git a/src/components/dropDown/ControlPanelDropDown.tsx b/src/components/dropDown/ControlPanelDropDown.tsx
@@ -1,6 +1,7 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import DropDown from './DropDown';
 import useEffectNotOnMount from '../../hooks/utils/useEffectNotOnMount';
+import { useTranslate } from '../../i18n/useTranslate';
 
 type ControlPanelDropDown = {
   options: { option: string; available: boolean; id: string }[];
@@ -19,6 +20,7 @@ export default function ControlPanelDropDown({
       (id: string) => options.find((option) => option.id === id)?.option || id
     )
   );
+  const t = useTranslate();
 
   useEffectNotOnMount(() => {
     const mappedIds = selected?.map(
@@ -43,8 +45,8 @@ export default function ControlPanelDropDown({
     <div>
       <DropDown
         disabled={disabled}
-        title="Select control panel"
-        label="Control panel"
+        title={t('production.select_control_panel')}
+        label={t('production.control_panel')}
         options={options}
         multipleSelected={selected}
         setSelected={handleAddSelectedControlPanel}

diff --git a/src/components/dropDown/PipelineNameDropDown.tsx b/src/components/dropDown/PipelineNameDropDown.tsx
@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import DropDown from './DropDown';
 import useEffectNotOnMount from '../../hooks/utils/useEffectNotOnMount';
+import { useTranslate } from '../../i18n/useTranslate';
 
 type PipelineNamesDropDownProps = {
   label: string;
@@ -19,6 +20,7 @@ export default function PipelineNamesDropDown({
   const [selectedOption, setSelectedOption] = useState<string | undefined>(
     options.find((o) => o.id === value)?.option
   );
+  const t = useTranslate();
 
   useEffectNotOnMount(() => {
     if (options) {
@@ -33,7 +35,7 @@ export default function PipelineNamesDropDown({
     <div>
       <DropDown
         disabled={disabled}
-        title="Select pipeline"
+        title={t('production.select_pipeline')}
         label={label}
         options={options}
         selected={selectedOption}

diff --git a/src/components/production/controlConnections/ProductionControlConnections.tsx b/src/components/production/controlConnections/ProductionControlConnections.tsx
@@ -4,6 +4,7 @@ import { ProductionControlConnection } from '../../../interfaces/production';
 import ControlPanelDropDown from '../../dropDown/ControlPanelDropDown';
 import Section from '../../section/Section';
 import { LoadingCover } from '../../loader/LoadingCover';
+import { useTranslate } from '../../../i18n/useTranslate';
 
 interface ProductionControlConnectionsProps {
   controlConnection?: ProductionControlConnection;
@@ -16,6 +17,7 @@ const ProductionControlConnections: React.FC<
   const { controlConnection, onChange } = props;
 
   const [controlPanels] = useControlPanels();
+  const t = useTranslate();
 
   const onControlConnectionChange = (ids: string[]) => {
     if (controlConnection) {
@@ -55,7 +57,7 @@ const ProductionControlConnections: React.FC<
                 </div>
               </div>
               <div className="flex flex-row py-2">
-                <div className="mr-4">{'To Pipeline:'}</div>
+                <div className="mr-4">{t('production.to_pipeline')}:</div>
                 <div className="italic text-gray-300">
                   {controlConnection.control_panel_endpoint.toPipelineIdx}
                 </div>
@@ -74,13 +76,17 @@ const ProductionControlConnections: React.FC<
                         <div className="italic text-gray-300">{pcc.port}</div>
                       </div>
                       <div className="flex flex-row py-2">
-                        <div className="mr-4">{'From Pipeline:'}</div>
+                        <div className="mr-4">
+                          {t('production.from_pipeline')}:
+                        </div>
                         <div className="italic text-gray-300">
                           {pcc.fromPipelineIdx}
                         </div>
                       </div>
                       <div className="flex flex-row py-2">
-                        <div className="mr-4">{'To Pipeline:'}</div>
+                        <div className="mr-4">
+                          {t('production.to_pipeline')}:
+                        </div>
                         <div className="italic text-gray-300">
                           {pcc.toPipelineIdx}
                         </div>

diff --git a/src/components/production/header/ProductionHeader.tsx b/src/components/production/header/ProductionHeader.tsx
@@ -35,7 +35,7 @@ const ProductionHeader: React.FC<ProductionHeaderProps> = (props) => {
         <div className="flex flex-row items-center">
           <Icons name="IconPencil" className="w-8 h-8 mr-2" />
           <input
-            className="text-4xl text-p bg-transparent grow text-start"
+            className="text-4xl text-p bg-transparent grow text-start pointer-events-auto"
             type="text"
             value={name}
             onChange={(e) => {

diff --git a/src/components/production/pipelines/ProductionPipelineCard.tsx b/src/components/production/pipelines/ProductionPipelineCard.tsx
@@ -1,10 +1,10 @@
 'use client';
 
-import { useState } from 'react';
 import { ResourcesCompactPipelineResponse } from '../../../../types/ateliere-live';
 import { PipelineSettings } from '../../../interfaces/pipeline';
 import PipelineNameDropDown from '../../dropDown/PipelineNameDropDown';
 import cloneDeep from 'lodash.clonedeep';
+import { useTranslate } from '../../../i18n/useTranslate';
 
 interface PipelineCardInfoProps {
   label: string;
@@ -32,6 +32,7 @@ const ProductionPipelineCard: React.FC<ProductionPipelineCardProps> = (
   props
 ) => {
   const { pipeline, pipelines, onPipelineChange } = props;
+  const t = useTranslate();
 
   const updatePipelineID = (id: string) => {
     const newPipeline = cloneDeep(pipeline);
@@ -64,37 +65,55 @@ const ProductionPipelineCard: React.FC<ProductionPipelineCardProps> = (
           value={pipeline.alignment_ms}
         />
         <PipelineCardInfo
-          label={'Audio Format'}
+          label={t('pipeline_card.audio_format')}
           value={pipeline.audio_format}
         />
         <PipelineCardInfo
-          label={'Audio Mapping'}
+          label={t('pipeline_card.audio_mapping')}
           value={pipeline.audio_mapping}
         />
         <PipelineCardInfo
-          label={'Audio Sampling Frequency'}
+          label={t('pipeline_card.audio_sampling_frequency')}
           value={pipeline.audio_sampling_frequency}
         />
-        <PipelineCardInfo label={'Bit Depth'} value={pipeline.bit_depth} />
         <PipelineCardInfo
-          label={'Convert Color Range'}
+          label={t('pipeline_card.bit_depth')}
+          value={pipeline.bit_depth}
+        />
+        <PipelineCardInfo
+          label={t('pipeline_card.convert_color_range')}
           value={pipeline.convert_color_range}
         />
-        <PipelineCardInfo label={'Encoder'} value={pipeline.encoder} />
-        <PipelineCardInfo label={'Format'} value={pipeline.format} />
         <PipelineCardInfo
-          label={'Frame Rate D'}
+          label={t('pipeline_card.encoder')}
+          value={pipeline.encoder}
+        />
+        <PipelineCardInfo
+          label={t('pipeline_card.format')}
+          value={pipeline.format}
+        />
+        <PipelineCardInfo
+          label={t('pipeline_card.frame_rate_d')}
           value={pipeline.frame_rate_d}
         />
         <PipelineCardInfo
-          label={'Frame Rate N'}
+          label={t('pipeline_card.frame_rate_n')}
           value={pipeline.frame_rate_n}
         />
-        <PipelineCardInfo label={'GOP Length'} value={pipeline.gop_length} />
-        <PipelineCardInfo label={'Height'} value={pipeline.height} />
-        <PipelineCardInfo label={'Width'} value={pipeline.width} />
         <PipelineCardInfo
-          label={'Video Kilobit Rate'}
+          label={t('pipeline_card.gop_length')}
+          value={pipeline.gop_length}
+        />
+        <PipelineCardInfo
+          label={t('pipeline_card.height')}
+          value={pipeline.height}
+        />
+        <PipelineCardInfo
+          label={t('pipeline_card.width')}
+          value={pipeline.width}
+        />
+        <PipelineCardInfo
+          label={t('pipeline_card.video_kilobit_rate')}
           value={pipeline.video_kilobit_rate}
         />
       </div>

diff --git a/src/components/production/sources/ProductionSources.tsx b/src/components/production/sources/ProductionSources.tsx
@@ -573,7 +573,7 @@ const ProductionSources: React.FC<ProductionSourcesProps> = (props) => {
     (selectedValue !== 'HTML' && selectedValue !== 'Media Player') || locked;
 
   return (
-    <Section title="Sources" startOpen>
+    <Section title={t('production.sources')} startOpen>
       <div className="flex flex-col h-full min-h-[200px] justify-center items-center">
         {sourcesLoading && <LoadingCover />}
         <>

diff --git a/src/i18n/locales/en.ts b/src/i18n/locales/en.ts
@@ -105,7 +105,33 @@ export const en = {
     add: 'Add',
     add_other_source_type: 'Add other source type',
     configure_outputs: 'Configure Outputs',
-    manage_multiviewers: 'Manage multiviewers'
+    manage_multiviewers: 'Manage multiviewers',
+    select_pipeline: 'Select pipeline',
+    select_control_panel: 'Select control panel',
+    control_panel: 'Control panel',
+    to_pipeline: 'To pipeline',
+    from_pipeline: 'From pipeline',
+    sources: 'Sources'
+  },
+  pipeline_card: {
+    audio_format: 'Audio Format',
+    audio_mapping: 'Audio Mapping',
+    audio_sampling_frequency: 'Audio Sampling Frequency',
+    bit_depth: 'Bit Depth',
+    convert_color_range: 'Convert Color Range',
+    encoder: 'Encoder',
+    format: 'Format',
+    frame_rate_d: 'Frame Rate D',
+    frame_rate_n: 'Frame Rate N',
+    gop_length: 'GOP Length',
+    height: 'Height',
+    width: 'Width',
+    video_kilobit_rate: 'Video Kilobit Rate'
+  },
+  output_card: {
+    format: 'Format',
+    bit_depth: 'Bit Depth',
+    video_kilobit_rate: 'Video Kilobit Rate'
   },
   configure_alignment_latency: {
     configure_alignment_latency:

diff --git a/src/i18n/locales/sv.ts b/src/i18n/locales/sv.ts
@@ -95,7 +95,7 @@ export const sv = {
   production_configuration: 'Produktionskonfiguration',
   production: {
     productions: 'Produktioner',
-    add_source: 'Lägg till ingång',
+    add_source: 'Lägg till källa',
     select_preset: 'Välj produktionsmall',
     clear_selection: 'Rensa val',
     started: 'Produktion startad: {{name}}',
@@ -107,7 +107,33 @@ export const sv = {
     add: 'Lägg till',
     add_other_source_type: 'Lägg till annan källtyp',
     configure_outputs: 'Konfigurera Outputs',
-    manage_multiviewers: 'Uppdatera multiviewers'
+    manage_multiviewers: 'Uppdatera multiviewers',
+    select_pipeline: 'Välj pipeline',
+    select_control_panel: 'Välj kontrollpanel',
+    control_panel: 'Kontrollpanel',
+    to_pipeline: 'Till pipeline',
+    from_pipeline: 'Från pipeline',
+    sources: 'Källor'
+  },
+  pipeline_card: {
+    audio_format: 'Ljudformat',
+    audio_mapping: 'Ljudmappning',
+    audio_sampling_frequency: 'Samplingsfrekvens',
+    bit_depth: 'Bit Depth',
+    convert_color_range: 'Konvertera Color Range',
+    encoder: 'Encoder',
+    format: 'Format',
+    frame_rate_d: 'Frame Rate D',
+    frame_rate_n: 'Frame Rate N',
+    gop_length: 'GOP Length',
+    height: 'Höjd',
+    width: 'Bredd',
+    video_kilobit_rate: 'Video Kilobit Rate'
+  },
+  output_card: {
+    format: 'Format',
+    bit_depth: 'Bit Depth',
+    video_kilobit_rate: 'Video Kilobit Rate'
   },
   configure_alignment_latency: {
     source_name: 'Källnamn',