Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Website: Hero video optimization (subtitles, flickering) #944

Merged
merged 10 commits into from
Dec 3, 2024
Merged

Website: Hero video optimization (subtitles, flickering) #944

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
7addede
replaced the subtitle link for translated versions locally
mathildedd Nov 17, 2024
4573348
Prettified Code!
mdumond Nov 17, 2024
caccde3
small declaration fix
mathildedd Nov 17, 2024
a439fec
fix flickering video start
mathildedd Dec 3, 2024
ca1085c
Prettified Code!
mdumond Dec 3, 2024
6384fef
Merge branch 'main' into 934-video-subtitle-translation
mkue Dec 3, 2024
19741a6
added suggestions from coderabbit
mathildedd Dec 3, 2024
bf69270
error handling
mathildedd Dec 3, 2024
6b54fa8
remove unused variable
mathildedd Dec 3, 2024
4898fcd
Use Image instead of img tag
Dec 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions shared/locales/de/website-home.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
}
]
},
"video-subtitle": "/assets/video/subtitle-video-testimonials.de_DE.vtt",
"section-2": {
"title-1": "Die Menschen in den ärmsten Regionen Sierra Leones kennen den Weg aus der Armut. ",
"title-2": [
Expand Down
1 change: 1 addition & 0 deletions shared/locales/en/website-home.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
}
]
},
"video-subtitle": "/assets/video/subtitle-video-testimonials.en_US.vtt",
"section-2": {
"title-1": "Those that live in Sierra Leone’s poorest communities know what it takes to rise out of poverty.",
"title-2": [
Expand Down
1 change: 1 addition & 0 deletions shared/locales/fr/website-home.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
}
]
},
"video-subtitle": "/assets/video/subtitle-video-testimonials.fr_FR.vtt",
"section-2": {
"title-1": "Dans les communautés les plus pauvres de Sierra Leone, les gens savent très bien ce qu’il faut faire pour sortir de la pauvreté.",
"title-2": [
Expand Down
1 change: 1 addition & 0 deletions shared/locales/it/website-home.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
}
]
},
"video-subtitle": "/assets/video/subtitle-video-testimonials.it_IT.vtt",
"section-2": {
"title-1": "Le persone che vivono nelle comunità più povere della Sierra Leone sanno di cosa hanno bisogno per uscire dalla povertà.",
"title-2": [
Expand Down
16 changes: 8 additions & 8 deletions website/src/app/[lang]/[region]/(website)/(home)/(components)/mux-video.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
'use client';

import { DefaultParams } from '@/app/[lang]/[region]';
import { useGlobalStateProvider } from '@/components/providers/global-state-provider';
import { PauseIcon, PlayIcon, SpeakerWaveIcon, SpeakerXMarkIcon } from '@heroicons/react/24/solid';
import MuxVideo from '@mux/mux-video-react';
Expand All @@ -9,8 +10,13 @@ import { useEffect, useRef, useState } from 'react';
import { useEventListener, useIntersectionObserver } from 'usehooks-ts';

export const OVERLAY_FADE_OUT_DELAY = 4000;
type HeroVideoSubtitles = {
translations: {
subtitles: string;
};
} & DefaultParams;

const MuxVideoComponent = () => {
const MuxVideoComponent = ({ lang, translations }: HeroVideoSubtitles) => {
mkue marked this conversation as resolved.
Show resolved Hide resolved
const videoElementRef = useRef<HTMLVideoElement>(null);
const [muted, setMuted] = useState(true);
const [playing, setPlaying] = useState(false);
Expand Down Expand Up @@ -78,13 +84,7 @@ const MuxVideoComponent = () => {
autoPlay={playing}
playsInline
>
<track
kind="captions"
src="https://stream.mux.com/IPdwilTUVkKs2nK8zKZi5eKwbKhpCWxgsYNVxcANeFE/text/YZZCqh56kzyMBlwsaPsdlxaFKmlKzNNDKV7oyQb8ECZ4zpXnm500ieA.txt"
srcLang="en"
label="English"
default
/>
<track kind="captions" src={translations.subtitles} srcLang={lang} label="English" default />
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Fix hardcoded language label in track element

The track element uses a hardcoded "English" label while the component accepts dynamic language props. This could lead to confusion for users of other languages.

-<track kind="captions" src={translations.subtitles} srcLang={lang} label="English" default />
+<track kind="captions" src={translations.subtitles} srcLang={lang} label={lang.toUpperCase()} default />
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<track kind="captions" src={translations.subtitles} srcLang={lang} label="English" default />
<track kind="captions" src={translations.subtitles} srcLang={lang} label={lang.toUpperCase()} default />

<style>{`
video::cue {
background-color: rgba(0, 0, 0, 0.8);
Expand Down
8 changes: 7 additions & 1 deletion website/src/app/[lang]/[region]/(website)/(home)/(sections)/hero-video.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,13 @@ export async function HeroVideo({ lang, region }: DefaultParams) {

return (
<div className="relative h-[calc(100svh)] w-full">
<MuxVideoComponent />
<MuxVideoComponent
translations={{
subtitles: translator.t<string>('video-subtitle'),
}}
lang={lang}
region={region}
/>
<HeroVideoOverlay
translations={{
buttonText: translator.t('section-1.take-action'),
Expand Down
Loading