Merge pull request #1120 from hackclub/onboard-videos

Attempt to fix mobile for onboard page
hackclub · Mar 15, 2024 · af980c9 · af980c9
2 parents 4233cee + 74f5b2d
commit af980c9
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 15 deletions.
diff --git a/components/onboard/youtube-video.js b/components/onboard/youtube-video.js
@@ -1,10 +1,19 @@
+import { useMemo } from "react"
+
 const YoutubeVideo = ({
-  width=560,
-  height=315,
   'youtube-id': youtubeID = 'dQw4w9WgXcQ',
-  title="YouTube video player",
+  list,
+  title = "YouTube video player",
+  width,
+  height,
 }) => {
-  const src = `https://www.youtube.com/embed/${youtubeID}`
+  const src = useMemo(() => {
+    const url = new URL(`https://www.youtube.com/embed/${youtubeID}`)
+    if (list) {
+      url.searchParams.set('list', list)
+    }
+    return url
+  }, [youtubeID, list])
 
   const allowlist = [
     'accelerometer',
@@ -18,13 +27,13 @@ const YoutubeVideo = ({
   ].join('; ')
 
   return (
-    <iframe width={width}
-            height={height}
-            src={src}
-            title={title}
-            frameborder="0"
-            allow={allowlist}
-            allowfullscreen>
+    <iframe
+      src={src}
+      title={title}
+      {...{ width, height }}
+      frameborder="0"
+      allow={allowlist}
+      allowfullscreen>
     </iframe>
   )
 }

diff --git a/pages/onboard/index.js b/pages/onboard/index.js
@@ -13,6 +13,7 @@ import { useEffect, useRef, useState } from 'react'
 import sleep from '../../lib/sleep'
 import Announcement from '../../components/announcement'
 import YoutubeVideo from '../../components/onboard/youtube-video'
+import Icon from '@hackclub/icons'
 
 /**
  * @type {import('theme-ui').ThemeUIStyleObject}
@@ -361,10 +362,15 @@ const ShipPage = () => {
               Never made a circuit board before? No problem.
             </Balancer>
           </Heading>
-          <Flex direction={['column']}>
-            <YoutubeVideo youtube-id="LrSKs35nR8k" />
-            <YoutubeVideo youtube-id="lEcN3JnTge4" />
-            <YoutubeVideo youtube-id="Bh3dm81X_zs" />
+          <Flex sx={{flexDirection:"column"}}>
+            <YoutubeVideo youtube-id="LrSKs35nR8k" list="PLbNbddgD-XxECO7C2z-FAlSoJ57VqcJA3" height="300px" />
+            <Text sx={{ fontSize: 2, color: 'muted' }}>
+              See the{' '}
+              <Link href="https://www.youtube.com/watch?v=LrSKs35nR8k&list=PLbNbddgD-XxECO7C2z-FAlSoJ57VqcJA3" target="_blank">
+                full playlist
+              <Icon glyph="external" size={18} />
+              </Link>
+            </Text>
           </Flex>
           <Text sx={{ fontSize: 3 }}>
             Learn how to design your own circuit boards from scratch with our{' '}