diff --git a/src/components/VideoPlayer.tsx b/src/components/VideoPlayer.tsx
index d14562b..8733aff 100644
--- 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,7 +59,7 @@ const VideoPlayer = () => {
active={!isMobile ? position <= 2 : position === 0}
duration={!isMobile ? duration * 3 : duration}
>
- Collaborate on notes
+ {props.textContent.buttonCollab}
{
active={!isMobile ? position > 2 && position <= 5 : position === 1}
duration={!isMobile ? duration * 3 : duration}
>
- Moderate your session
+ {props.textContent.buttonModerate}
{
active={!isMobile ? position > 5 && position <= 8 : position === 2}
duration={!isMobile ? duration * 3 : duration}
>
- Customize your board
+ {props.textContent.buttonCustomize}
@@ -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}`}
/>
)}
@@ -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}
>
@@ -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}
>
@@ -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}
/>
@@ -119,7 +133,7 @@ const VideoPlayer = () => {
className="choices__video-position-button--1"
disabled={position === 1}
onClick={() => setPosition(1)}
- aria-label="Zweites Video"
+ aria-label={props.textContent.buttonSecondVidLabel}
/>
@@ -127,7 +141,7 @@ const VideoPlayer = () => {
className="choices__video-position-button--2"
disabled={position === 2}
onClick={() => setPosition(2)}
- aria-label="Drittes Video"
+ aria-label={props.textContent.buttonThirdVidLabel}
/>
diff --git a/src/views/Choices/Choices.astro b/src/views/Choices/Choices.astro
index ce63da3..6fffc7d 100644
--- a/src/views/Choices/Choices.astro
+++ b/src/views/Choices/Choices.astro
@@ -10,6 +10,6 @@ const content = await getTranslatedContent("Choices_Section", lang!);
{content.header}
{content.text}
-
+