Fully translate video player of choices section

inovex · Dec 6, 2023 · 09d70d6 · 09d70d6
1 parent b00887c
commit 09d70d6
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 11 deletions.
diff --git a/src/components/VideoPlayer.tsx b/src/components/VideoPlayer.tsx
@@ -5,7 +5,21 @@ import Video from "./Video";
 import Icon from "./Icon";
 import "../views/Choices/Choices.scss";
 
-const VideoPlayer = () => {
+type Props = {
+  textContent: {
+    buttonCollab: string;
+    buttonModerate: string;
+    buttonCustomize: string;
+    screenshotAlt: string;
+    buttonPrevVidLabel: string;
+    buttonNextVidLabel: string;
+    buttonFirstVidLabel: string;
+    buttonSecondVidLabel: string;
+    buttonThirdVidLabel: string;
+  }
+}
+
+const VideoPlayer = (props: Props) => {
   const [position, setPosition] = useState(0);
   const theme = useMediaQuery("(prefers-color-scheme: dark)")
     ? "dark"
@@ -45,23 +59,23 @@ const VideoPlayer = () => {
             active={!isMobile ? position <= 2 : position === 0}
             duration={!isMobile ? duration * 3 : duration}
           >
-            Collaborate on notes
+            {props.textContent.buttonCollab}
           </ProgressButton>
           <ProgressButton
             icon="Vote"
             onClick={() => setPosition(3)}
             active={!isMobile ? position > 2 && position <= 5 : position === 1}
             duration={!isMobile ? duration * 3 : duration}
           >
-            Moderate your session
+            {props.textContent.buttonModerate}
           </ProgressButton>
           <ProgressButton
             icon="Columns"
             onClick={() => setPosition(6)}
             active={!isMobile ? position > 5 && position <= 8 : position === 2}
             duration={!isMobile ? duration * 3 : duration}
           >
-            Customize your board
+            {props.textContent.buttonCustomize}
           </ProgressButton>
         </div>
         <div className="choices__image-wrapper">
@@ -75,7 +89,7 @@ const VideoPlayer = () => {
                 src={`assets/choices/choices_${theme}_${position}.png`}
                 height="290"
                 width="680"
-                alt={`scrumlr screenshot ${position + 1}`}
+                alt={`${props.textContent.screenshotAlt} ${position + 1}`}
               />
             </picture>
           )}
@@ -85,7 +99,7 @@ const VideoPlayer = () => {
             className="choices__video-button choices__video-button--left"
             disabled={position === 0}
             onClick={() => setPosition(position - 1)}
-            aria-label="Vorheriges Video"
+            aria-label={props.textContent.buttonPrevVidLabel}
           >
             <Icon name="Chevron" />
           </button>
@@ -100,7 +114,7 @@ const VideoPlayer = () => {
             className="choices__video-button choices__video-button--right"
             disabled={position === 2}
             onClick={() => setPosition(position + 1)}
-            aria-label="Nächstes Video"
+            aria-label={props.textContent.buttonNextVidLabel}
           >
             <Icon name="Chevron" />
           </button>
@@ -110,7 +124,7 @@ const VideoPlayer = () => {
                 className="choices__video-position-button--0"
                 disabled={position === 0}
                 onClick={() => setPosition(0)}
-                aria-label="Erstes Video"
+                aria-label={props.textContent.buttonFirstVidLabel}
               />
             </li>
 
@@ -119,15 +133,15 @@ const VideoPlayer = () => {
                 className="choices__video-position-button--1"
                 disabled={position === 1}
                 onClick={() => setPosition(1)}
-                aria-label="Zweites Video"
+                aria-label={props.textContent.buttonSecondVidLabel}
               />
             </li>
             <li>
               <button
                 className="choices__video-position-button--2"
                 disabled={position === 2}
                 onClick={() => setPosition(2)}
-                aria-label="Drittes Video"
+                aria-label={props.textContent.buttonThirdVidLabel}
               />
             </li>
           </ul>

diff --git a/src/views/Choices/Choices.astro b/src/views/Choices/Choices.astro
@@ -10,6 +10,6 @@ const content = await getTranslatedContent("Choices_Section", lang!);
 <section class="choices" id="Features">
   <h2>{content.header}</h2>
   <p>{content.text}</p>
-  <VideoPlayer client:visible />
+  <VideoPlayer client:visible textContent={content} />
 </section>