Skip to content

Commit 64d76b0

Browse files
SimekSimek
authored
add keynote videos, highlight the latest one via announcement bar (#4957)
1 parent eeefda6 commit 64d76b0

2 files changed

Lines changed: 107 additions & 20 deletions

File tree

‎website/docusaurus.config.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -407,6 +407,14 @@ const config: Config = {
407407
},
408408
],
409409
},
410+
announcementBar: {
411+
id: 'watch_keynote',
412+
content:
413+
'Re-watch the latest <a target="_blank" rel="noopener noreferrer" href="https://www.youtube.com/watch?v=NiYwlvXsBKw">React Native Keynote</a> from React Conf 2025',
414+
backgroundColor: '#20232a',
415+
textColor: '#fff',
416+
isCloseable: false,
417+
},
410418
navbar: {
411419
title: 'React Native',
412420
logo: {

‎website/src/components/Home/Watch/index.tsx‎

Lines changed: 99 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,13 @@ import SectionTitle from '../SectionTitle';
1212

1313
import styles from './styles.module.css';
1414

15+
enum VideoId {
16+
Why = 'wUDeLT6WXnQ',
17+
Keynote2025 = 'NiYwlvXsBKw',
18+
Keynote2024 = 'Q5SMmKb7qVI',
19+
FB2019 = 'NCAY0HIfrwc',
20+
}
21+
1522
function Watch() {
1623
const [playingId, setPlayingId] = useState<string | null>(null);
1724

@@ -38,62 +45,134 @@ function Watch() {
3845
<div className={styles.videos}>
3946
<div
4047
role="button"
41-
aria-label="Play: FB 2019: Mobile innovation with React Native"
48+
aria-label="Play: Why React Native?"
4249
className={[
4350
styles.videoContainer,
44-
playingId === 'fb2019'
51+
playingId === VideoId.Why
4552
? styles.videoContainerPlaying
4653
: styles.videoContainerHover,
4754
].join(' ')}
48-
onClick={() => setPlayingId('fb2019')}>
49-
{playingId === 'fb2019' ? (
55+
onClick={() => setPlayingId(VideoId.Why)}>
56+
{playingId === VideoId.Why ? (
5057
<iframe
51-
src="https://www.youtube.com/embed/NCAY0HIfrwc?autoplay=1"
52-
title="Mobile Innovation with React Native, ComponentKit, and Litho"
58+
src={`https://www.youtube.com/embed/${VideoId.Why}?autoplay=1`}
59+
title="Explain Like I'm 5: React Native"
5360
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
5461
allowFullScreen
5562
className={styles.video}
5663
/>
5764
) : (
5865
<img
59-
src="https://img.youtube.com/vi/NCAY0HIfrwc/maxresdefault.jpg"
60-
alt="Mobile Innovation with React Native, ComponentKit, and Litho"
66+
src={`https://img.youtube.com/vi/${VideoId.Why}/maxresdefault.jpg`}
67+
alt="Explain Like I'm 5: React Native"
6168
className={styles.video}
6269
/>
6370
)}
6471
<div className={styles.videoInfo}>
65-
<h4>FB 2019: Mobile innovation with React Native</h4>
66-
<p>45:29</p>
72+
<h4>Why React Native?</h4>
73+
<p>1:42</p>
6774
</div>
6875
</div>
6976
<div
7077
role="button"
71-
aria-label="Play: Why React Native?"
78+
aria-label="Play: React Conf 2025 React Native Keynote"
7279
className={[
7380
styles.videoContainer,
74-
playingId === 'why'
81+
playingId === VideoId.Keynote2025
7582
? styles.videoContainerPlaying
7683
: styles.videoContainerHover,
7784
].join(' ')}
78-
onClick={() => setPlayingId('why')}>
79-
{playingId === 'why' ? (
85+
onClick={() => setPlayingId(VideoId.Keynote2025)}>
86+
{playingId === VideoId.Keynote2025 ? (
8087
<iframe
81-
src="https://www.youtube.com/embed/wUDeLT6WXnQ?autoplay=1"
82-
title="Explain Like I'm 5: React Native"
88+
src={`https://www.youtube.com/embed/${VideoId.Keynote2025}?autoplay=1`}
89+
title="React Conf 2025 React Native Keynote"
8390
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
8491
allowFullScreen
8592
className={styles.video}
8693
/>
8794
) : (
8895
<img
89-
src="https://img.youtube.com/vi/wUDeLT6WXnQ/maxresdefault.jpg"
90-
alt="Explain Like I'm 5: React Native"
96+
src={`https://img.youtube.com/vi/${VideoId.Keynote2025}/maxresdefault.jpg`}
97+
alt="React Conf 2025 React Native Keynote"
9198
className={styles.video}
9299
/>
93100
)}
94101
<div className={styles.videoInfo}>
95-
<h4>Why React Native?</h4>
96-
<p>1:42</p>
102+
<h4>
103+
React Conf 2025
104+
<br />
105+
React Native Keynote
106+
</h4>
107+
<p>55:13</p>
108+
</div>
109+
</div>
110+
<div
111+
role="button"
112+
aria-label="Play: React Conf 2024 React Native Keynote"
113+
className={[
114+
styles.videoContainer,
115+
playingId === VideoId.Keynote2024
116+
? styles.videoContainerPlaying
117+
: styles.videoContainerHover,
118+
].join(' ')}
119+
onClick={() => setPlayingId(VideoId.Keynote2024)}>
120+
{playingId === VideoId.Keynote2024 ? (
121+
<iframe
122+
src={`https://www.youtube.com/embed/${VideoId.Keynote2024}?autoplay=1`}
123+
title="React Conf 2024 React Native Keynote"
124+
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
125+
allowFullScreen
126+
className={styles.video}
127+
/>
128+
) : (
129+
<img
130+
src={`https://img.youtube.com/vi/${VideoId.Keynote2024}/maxresdefault.jpg`}
131+
alt="React Conf 2024 React Native Keynote"
132+
className={styles.video}
133+
/>
134+
)}
135+
<div className={styles.videoInfo}>
136+
<h4>
137+
React Conf 2024
138+
<br />
139+
React Native Keynote
140+
</h4>
141+
<p>55:14</p>
142+
</div>
143+
</div>
144+
<div
145+
role="button"
146+
aria-label="Play: FB 2019: Mobile innovation with React Native"
147+
className={[
148+
styles.videoContainer,
149+
playingId === VideoId.FB2019
150+
? styles.videoContainerPlaying
151+
: styles.videoContainerHover,
152+
].join(' ')}
153+
onClick={() => setPlayingId(VideoId.FB2019)}>
154+
{playingId === VideoId.FB2019 ? (
155+
<iframe
156+
src={`https://www.youtube.com/embed/${VideoId.FB2019}?autoplay=1`}
157+
title="Mobile Innovation with React Native, ComponentKit, and Litho"
158+
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
159+
allowFullScreen
160+
className={styles.video}
161+
/>
162+
) : (
163+
<img
164+
src={`https://img.youtube.com/vi/${VideoId.FB2019}/maxresdefault.jpg`}
165+
alt="Mobile Innovation with React Native, ComponentKit, and Litho"
166+
className={styles.video}
167+
/>
168+
)}
169+
<div className={styles.videoInfo}>
170+
<h4>
171+
FB 2019
172+
<br />
173+
Mobile innovation with React Native
174+
</h4>
175+
<p>45:29</p>
97176
</div>
98177
</div>
99178
</div>

0 commit comments

Comments
 (0)