From 8c8cf9afabf4f8204067396bfce41261bc30aa1e Mon Sep 17 00:00:00 2001
From: Sem Bauke <semboot699@gmail.com>
Date: Tue, 21 Feb 2023 11:13:31 +0100
Subject: [PATCH] fix: optional video ids the odin project (#49380)

* fix: optional video ids the odin project

* Update client/src/templates/Challenges/odin/Show.tsx

Co-authored-by: Niraj Nandish <nirajnandish@icloud.com>

---------

Co-authored-by: Niraj Nandish <nirajnandish@icloud.com>
---
 client/src/templates/Challenges/odin/Show.tsx | 40 ++++++++++---------
 .../elements-and-tags-question-b.md           |  1 -
 .../html-boilerplate-question-a.md            |  1 -
 .../html-boilerplate-question-b.md            |  1 -
 .../html-boilerplate-question-c.md            |  1 -
 .../introduction-to-html-css-question-a.md    |  1 -
 .../introduction-to-html-css-question-b.md    |  1 -
 .../introduction-to-html-css-question-c.md    |  1 -
 .../introduction-to-html-css-question-d.md    |  1 -
 .../links-and-images-question-b.md            |  1 -
 .../links-and-images-question-c.md            |  1 -
 .../links-and-images-question-f.md            |  1 -
 .../links-and-images-question-g.md            |  1 -
 .../links-and-images-question-h.md            |  1 -
 ...d-ordered-and-unordered-list-question-b.md |  1 -
 ...d-ordered-and-unordered-list-question-c.md |  1 -
 .../working-with-text-question-b.md           |  1 -
 .../working-with-text-question-d.md           |  1 -
 .../working-with-text-question-e.md           |  1 -
 .../working-with-text-question-f.md           |  1 -
 .../working-with-text-question-g.md           |  1 -
 21 files changed, 21 insertions(+), 39 deletions(-)

diff --git a/client/src/templates/Challenges/odin/Show.tsx b/client/src/templates/Challenges/odin/Show.tsx
index 75870bd1e61..10e2558c9b1 100644
--- a/client/src/templates/Challenges/odin/Show.tsx
+++ b/client/src/templates/Challenges/odin/Show.tsx
@@ -241,26 +241,28 @@ class ShowOdin extends Component<ShowOdinProps, ShowOdinState> {
           />
           <Grid>
             <Row>
-              <Spacer />
-              <Col lg={10} lgOffset={1} md={10} mdOffset={1}>
-                <div className='video-wrapper'>
-                  {!this.state.videoIsLoaded ? (
-                    <div className='video-placeholder-loader'>
-                      <Loader />
-                    </div>
-                  ) : null}
-                  <VideoPlayer
-                    bilibiliIds={bilibiliIds}
-                    onVideoLoad={this.onVideoLoad}
-                    title={title}
-                    videoId={videoId}
-                    videoIsLoaded={this.state.videoIsLoaded}
-                    videoLocaleIds={videoLocaleIds}
-                  />
-                </div>
-                <Spacer />
-              </Col>
+              {videoId && (
+                <Col lg={10} lgOffset={1} md={10} mdOffset={1}>
+                  <Spacer />
+                  <div className='video-wrapper'>
+                    {!this.state.videoIsLoaded ? (
+                      <div className='video-placeholder-loader'>
+                        <Loader />
+                      </div>
+                    ) : null}
+                    <VideoPlayer
+                      bilibiliIds={bilibiliIds}
+                      onVideoLoad={this.onVideoLoad}
+                      title={title}
+                      videoId={videoId}
+                      videoIsLoaded={this.state.videoIsLoaded}
+                      videoLocaleIds={videoLocaleIds}
+                    />
+                  </div>
+                </Col>
+              )}
               <Col md={8} mdOffset={2} sm={10} smOffset={1} xs={12}>
+                <Spacer />
                 <h2>{title}</h2>
                 <PrismFormatted className={'line-numbers'} text={description} />
                 <Spacer />
diff --git a/curriculum/challenges/english/16-the-odin-project/top-learn-html-foundations/elements-and-tags-question-b.md b/curriculum/challenges/english/16-the-odin-project/top-learn-html-foundations/elements-and-tags-question-b.md
index 3e36735f990..159800a9d74 100644
--- a/curriculum/challenges/english/16-the-odin-project/top-learn-html-foundations/elements-and-tags-question-b.md
+++ b/curriculum/challenges/english/16-the-odin-project/top-learn-html-foundations/elements-and-tags-question-b.md
@@ -1,6 +1,5 @@
 ---
 id: 637f4e1672c65bc8e73dfe1f
-videoId: LGQuIIv2RVA
 title: Elements and Tags Question B
 challengeType: 15
 dashedName: elements-and-tags-question-b
diff --git a/curriculum/challenges/english/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-a.md b/curriculum/challenges/english/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-a.md
index 8dadb99d7cc..cd2e1f5ff4b 100644
--- a/curriculum/challenges/english/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-a.md
+++ b/curriculum/challenges/english/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-a.md
@@ -1,6 +1,5 @@
 ---
 id: 637f4e1c72c65bc8e73dfe20
-videoId: V8UAEoOvqFg
 title: HTML Boilerplate Question A
 challengeType: 15
 dashedName: html-boilerplate-question-a
diff --git a/curriculum/challenges/english/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-b.md b/curriculum/challenges/english/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-b.md
index 248f55b6089..758e5570177 100644
--- a/curriculum/challenges/english/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-b.md
+++ b/curriculum/challenges/english/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-b.md
@@ -1,6 +1,5 @@
 ---
 id: 637f4e2872c65bc8e73dfe21
-videoId: V8UAEoOvqFg
 title: HTML Boilerplate Question B
 challengeType: 15
 dashedName: html-boilerplate-question-b
diff --git a/curriculum/challenges/english/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-c.md b/curriculum/challenges/english/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-c.md
index 31d83ed2e63..7d238a0a4f1 100644
--- a/curriculum/challenges/english/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-c.md
+++ b/curriculum/challenges/english/16-the-odin-project/top-learn-html-foundations/html-boilerplate-question-c.md
@@ -1,6 +1,5 @@
 ---
 id: 637f4e2f72c65bc8e73dfe22
-videoId: LGQuIIv2RVA
 title: HTML Boilerplate Question C
 challengeType: 15
 dashedName: html-boilerplate-question-c
diff --git a/curriculum/challenges/english/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-a.md b/curriculum/challenges/english/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-a.md
index 445f8b22dc9..831539a7178 100644
--- a/curriculum/challenges/english/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-a.md
+++ b/curriculum/challenges/english/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-a.md
@@ -1,6 +1,5 @@
 ---
 id: 6374f208de18c50e48ba767b
-videoId: LGQuIIv2RVA
 title: Introduction To HTML and CSS Question A
 challengeType: 15
 dashedName: introduction-to-html-and-css-question-a
diff --git a/curriculum/challenges/english/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-b.md b/curriculum/challenges/english/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-b.md
index 670bf102e4a..71e3f903f16 100644
--- a/curriculum/challenges/english/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-b.md
+++ b/curriculum/challenges/english/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-b.md
@@ -1,6 +1,5 @@
 ---
 id: 6376327e2724a688c04636e3
-videoId: LGQuIIv2RVA
 title: Introduction To HTML and CSS Question B
 challengeType: 15
 dashedName: introduction-to-html-and-css-question-b
diff --git a/curriculum/challenges/english/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-c.md b/curriculum/challenges/english/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-c.md
index 2c50a29e74e..58f2f298ae9 100644
--- a/curriculum/challenges/english/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-c.md
+++ b/curriculum/challenges/english/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-c.md
@@ -1,6 +1,5 @@
 ---
 id: 637633162724a688c04636e4
-videoId: LGQuIIv2RVA
 title: Introduction To HTML and CSS Question C
 challengeType: 15
 dashedName: introduction-to-html-and-css-question-c
diff --git a/curriculum/challenges/english/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-d.md b/curriculum/challenges/english/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-d.md
index ab0e34dcfe4..e2d2706b57e 100644
--- a/curriculum/challenges/english/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-d.md
+++ b/curriculum/challenges/english/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-d.md
@@ -1,6 +1,5 @@
 ---
 id: 637633672724a688c04636e5
-videoId: LGQuIIv2RVA
 title: Introduction To HTML and CSS Question D
 challengeType: 15
 dashedName: introduction-to-html-and-css-question-d
diff --git a/curriculum/challenges/english/16-the-odin-project/top-learn-html-foundations/links-and-images-question-b.md b/curriculum/challenges/english/16-the-odin-project/top-learn-html-foundations/links-and-images-question-b.md
index 0d922ecf6a1..f9501f04308 100644
--- a/curriculum/challenges/english/16-the-odin-project/top-learn-html-foundations/links-and-images-question-b.md
+++ b/curriculum/challenges/english/16-the-odin-project/top-learn-html-foundations/links-and-images-question-b.md
@@ -1,6 +1,5 @@
 ---
 id: 637f703572c65bc8e73dfe35
-videoId: tsEQgGjSmkM
 title: Links and Images Question B
 challengeType: 15
 dashedName: links-and-images-question-b
diff --git a/curriculum/challenges/english/16-the-odin-project/top-learn-html-foundations/links-and-images-question-c.md b/curriculum/challenges/english/16-the-odin-project/top-learn-html-foundations/links-and-images-question-c.md
index d01498fa84e..314e4d1e013 100644
--- a/curriculum/challenges/english/16-the-odin-project/top-learn-html-foundations/links-and-images-question-c.md
+++ b/curriculum/challenges/english/16-the-odin-project/top-learn-html-foundations/links-and-images-question-c.md
@@ -1,6 +1,5 @@
 ---
 id: 637f703072c65bc8e73dfe34
-videoId: tsEQgGjSmkM
 title: Links and Images Question C
 challengeType: 15
 dashedName: links-and-images-question-c
diff --git a/curriculum/challenges/english/16-the-odin-project/top-learn-html-foundations/links-and-images-question-f.md b/curriculum/challenges/english/16-the-odin-project/top-learn-html-foundations/links-and-images-question-f.md
index 95a587aaa2b..0a8d301cbfc 100644
--- a/curriculum/challenges/english/16-the-odin-project/top-learn-html-foundations/links-and-images-question-f.md
+++ b/curriculum/challenges/english/16-the-odin-project/top-learn-html-foundations/links-and-images-question-f.md
@@ -1,6 +1,5 @@
 ---
 id: 637f701c72c65bc8e73dfe31
-videoId: 0xoztJCHpbQ
 title: Links and Images Question F
 challengeType: 15
 dashedName: links-and-images-question-f
diff --git a/curriculum/challenges/english/16-the-odin-project/top-learn-html-foundations/links-and-images-question-g.md b/curriculum/challenges/english/16-the-odin-project/top-learn-html-foundations/links-and-images-question-g.md
index 60cbf43ee0d..d54b937621b 100644
--- a/curriculum/challenges/english/16-the-odin-project/top-learn-html-foundations/links-and-images-question-g.md
+++ b/curriculum/challenges/english/16-the-odin-project/top-learn-html-foundations/links-and-images-question-g.md
@@ -1,6 +1,5 @@
 ---
 id: 637f701572c65bc8e73dfe30
-videoId: 0xoztJCHpbQ
 title: Links and Images Question G
 challengeType: 15
 dashedName: links-and-images-question-g
diff --git a/curriculum/challenges/english/16-the-odin-project/top-learn-html-foundations/links-and-images-question-h.md b/curriculum/challenges/english/16-the-odin-project/top-learn-html-foundations/links-and-images-question-h.md
index 45418d0d3a7..93da248dfcc 100644
--- a/curriculum/challenges/english/16-the-odin-project/top-learn-html-foundations/links-and-images-question-h.md
+++ b/curriculum/challenges/english/16-the-odin-project/top-learn-html-foundations/links-and-images-question-h.md
@@ -1,6 +1,5 @@
 ---
 id: 637f700b72c65bc8e73dfe2f
-videoId: 0xoztJCHpbQ
 title: Links and Images Question H
 challengeType: 15
 dashedName: links-and-images-question-h
diff --git a/curriculum/challenges/english/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-b.md b/curriculum/challenges/english/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-b.md
index e76a6a5eb31..afaf885cdf6 100644
--- a/curriculum/challenges/english/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-b.md
+++ b/curriculum/challenges/english/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-b.md
@@ -1,6 +1,5 @@
 ---
 id: 637f4e4672c65bc8e73dfe25
-videoId: LGQuIIv2RVA
 title: Understand Ordered and Unordered List Question B
 challengeType: 15
 dashedName: understand-ordered-and-unordered-list-question-b
diff --git a/curriculum/challenges/english/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-c.md b/curriculum/challenges/english/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-c.md
index a516984c0b6..c901a51cdd3 100644
--- a/curriculum/challenges/english/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-c.md
+++ b/curriculum/challenges/english/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-c.md
@@ -1,6 +1,5 @@
 ---
 id: 637f4e5172c65bc8e73dfe26
-videoId: LGQuIIv2RVA
 title: Understand Ordered and Unordered List Question C
 challengeType: 15
 dashedName: understand-ordered-and-unordered-list-question-c
diff --git a/curriculum/challenges/english/16-the-odin-project/top-learn-html-foundations/working-with-text-question-b.md b/curriculum/challenges/english/16-the-odin-project/top-learn-html-foundations/working-with-text-question-b.md
index 2dba9270a58..337f4e5beb6 100644
--- a/curriculum/challenges/english/16-the-odin-project/top-learn-html-foundations/working-with-text-question-b.md
+++ b/curriculum/challenges/english/16-the-odin-project/top-learn-html-foundations/working-with-text-question-b.md
@@ -1,6 +1,5 @@
 ---
 id: 637f4e5f72c65bc8e73dfe28
-videoId: yqcd-XkxZNM
 title: Working With Text Question B
 challengeType: 15
 dashedName: working-with-text-question-b
diff --git a/curriculum/challenges/english/16-the-odin-project/top-learn-html-foundations/working-with-text-question-d.md b/curriculum/challenges/english/16-the-odin-project/top-learn-html-foundations/working-with-text-question-d.md
index c62a07be49c..6f2c6d2c827 100644
--- a/curriculum/challenges/english/16-the-odin-project/top-learn-html-foundations/working-with-text-question-d.md
+++ b/curriculum/challenges/english/16-the-odin-project/top-learn-html-foundations/working-with-text-question-d.md
@@ -1,6 +1,5 @@
 ---
 id: 637f4e6e72c65bc8e73dfe2a
-videoId: gW6cBZLUk6M
 title: Working With Text Question D
 challengeType: 15
 dashedName: working-with-text-question-d
diff --git a/curriculum/challenges/english/16-the-odin-project/top-learn-html-foundations/working-with-text-question-e.md b/curriculum/challenges/english/16-the-odin-project/top-learn-html-foundations/working-with-text-question-e.md
index 6de9507ef92..d1ff1d22453 100644
--- a/curriculum/challenges/english/16-the-odin-project/top-learn-html-foundations/working-with-text-question-e.md
+++ b/curriculum/challenges/english/16-the-odin-project/top-learn-html-foundations/working-with-text-question-e.md
@@ -1,6 +1,5 @@
 ---
 id: 637f4e7972c65bc8e73dfe2b
-videoId: gW6cBZLUk6M
 title: Working With Text Question E
 challengeType: 15
 dashedName: working-with-text-question-e
diff --git a/curriculum/challenges/english/16-the-odin-project/top-learn-html-foundations/working-with-text-question-f.md b/curriculum/challenges/english/16-the-odin-project/top-learn-html-foundations/working-with-text-question-f.md
index f7d550a413a..3054e4ccf11 100644
--- a/curriculum/challenges/english/16-the-odin-project/top-learn-html-foundations/working-with-text-question-f.md
+++ b/curriculum/challenges/english/16-the-odin-project/top-learn-html-foundations/working-with-text-question-f.md
@@ -1,6 +1,5 @@
 ---
 id: 637f4e8072c65bc8e73dfe2c
-videoId: gW6cBZLUk6M
 title: Working With Text Question F
 challengeType: 15
 dashedName: working-with-text-question-f
diff --git a/curriculum/challenges/english/16-the-odin-project/top-learn-html-foundations/working-with-text-question-g.md b/curriculum/challenges/english/16-the-odin-project/top-learn-html-foundations/working-with-text-question-g.md
index c85ec0d8e9f..8bfd45cd1cf 100644
--- a/curriculum/challenges/english/16-the-odin-project/top-learn-html-foundations/working-with-text-question-g.md
+++ b/curriculum/challenges/english/16-the-odin-project/top-learn-html-foundations/working-with-text-question-g.md
@@ -1,6 +1,5 @@
 ---
 id: 637f4e8772c65bc8e73dfe2d
-videoId: gW6cBZLUk6M
 title: Working With Text Question G
 challengeType: 15
 dashedName: working-with-text-question-g