refactor(lib-content): use lite-youtube-embed for video embeds

Use `YouTubeEmbed`, from `@next/third-parties/google`, for video embeds on the home page. This should reduce the JS download size by ~2.5MB per video.
zooniverse · Aug 31, 2024 · ebd61ab · ebd61ab
1 parent d208a8b
commit ebd61ab
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 17 deletions.
diff --git a/packages/lib-content/package.json b/packages/lib-content/package.json
@@ -30,6 +30,7 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
+    "@next/third-parties": "~14.2.7",
     "@zooniverse/async-states": "~0.0.1",
     "@zooniverse/react-components": "~1.13.0",
     "dayjs": "~1.11.11",

diff --git a/packages/lib-content/src/screens/Home/DefaultHome/components/Introduction.js b/packages/lib-content/src/screens/Home/DefaultHome/components/Introduction.js
@@ -6,6 +6,7 @@ import { useTranslation } from '../../../../translations/i18n.js'
 
 import Stats from '../../../../components/Stats/Stats.js'
 import SubHeading from '../../../../components/HeadingForAboutNav/SubHeading.js'
+import { YouTubeEmbed } from '@next/third-parties/google'
 
 const StyledSignIn = styled(Button)`
   width: 47%;
@@ -115,13 +116,11 @@ export default function Introduction() {
       </SpacedHeading>
       <Stats />
       <VideoWrapper>
-        <iframe
-          width='100%'
+        <YouTubeEmbed
           height='100%'
-          src='https://www.youtube-nocookie.com/embed/F-B8gXJyMHc?si=YGd16vJFYOB-rfrI'
-          title='YouTube video player'
-          frameBorder='0'
-          allowFullScreen
+          width='100%'
+          videoid='F-B8gXJyMHc'
+          title='A Brief Introduction to the Zooniverse'
         />
       </VideoWrapper>
     </>

diff --git a/packages/lib-content/src/screens/Home/DefaultHome/components/Researchers.js b/packages/lib-content/src/screens/Home/DefaultHome/components/Researchers.js
@@ -1,4 +1,5 @@
 import { Anchor, Box, Paragraph } from 'grommet'
+import { YouTubeEmbed } from '@next/third-parties/google'
 import { useTranslation } from '../../../../translations/i18n.js'
 import styled, { css } from 'styled-components'
 import { SpacedHeading } from '@zooniverse/react-components'
@@ -62,9 +63,9 @@ const VideoWrapper = styled(Box)`
 `
 
 const YOUTUBE_SOURCES = [
-  'https://www.youtube-nocookie.com/embed/CaTNIoJy4Dg?si=-rG8luvWD_FtFBc5', // PH TESS
-  'https://www.youtube-nocookie.com/embed/8lZiZoBcMjE?si=wPKWlRjQcKeTIOB5', // Wildcam Gorongosa
-  'https://www.youtube-nocookie.com/embed/B6diEbpEblQ?si=tt3jtcINdleiBT8g' // Backyard Worlds
+  ['CaTNIoJy4Dg', 'Around the Zoo – Planet Hunters TESS'],
+  ['8lZiZoBcMjE', 'Around the Zoo – Wildcam Gorongosa'],
+  ['B6diEbpEblQ', 'Around the Zoo – Backyard Worlds'],
 ]
 
 export default function Researchers() {
@@ -93,15 +94,13 @@ export default function Researchers() {
           pad={{ horizontal: 'xxsmall', bottom: 'xsmall' }}
           overflow={{ horizontal: 'auto' }}
         >
-          {YOUTUBE_SOURCES.map(src => (
-            <VideoWrapper key={src}>
-              <iframe
-                width='100%'
+          {YOUTUBE_SOURCES.map(([id, title]) => (
+            <VideoWrapper key={id}>
+              <YouTubeEmbed
                 height='100%'
-                src={src}
-                title='TESS YouTube video player'
-                frameBorder='0'
-                allowFullScreen
+                width='100%'
+                videoid={id}
+                title={title}
               />
             </VideoWrapper>
           ))}

diff --git a/yarn.lock b/yarn.lock
@@ -2048,6 +2048,13 @@
   resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.6.tgz#6b63a7b4ff3b7b410a038e3ee839c951a3136dc9"
   integrity sha512-NANtw+ead1rSDK1jxmzq3TYkl03UNK2KHqUYf1nIhNci6NkeqBD4s1njSzYGIlSHxCK+wSaL8RXZm4v+NF/pMw==
 
+"@next/third-parties@~14.2.7":
+  version "14.2.7"
+  resolved "https://registry.yarnpkg.com/@next/third-parties/-/third-parties-14.2.7.tgz#542e354cb129e5a4751fa3c28f96d00515a4d3b8"
+  integrity sha512-cE/1MAvmbKFZ9VCCj+Gvv21rMm/72JRTeLr24QEqCBNe17xuXyCzg9c7cRCXLdbk1VTBSALZCK9o13gbOvSMKA==
+  dependencies:
+    third-party-capital "1.0.20"
+
 "@nicolo-ribaudo/[email protected]":
   version "2.1.8-no-fsevents.3"
   resolved "https://registry.yarnpkg.com/@nicolo-ribaudo/chokidar-2/-/chokidar-2-2.1.8-no-fsevents.3.tgz#323d72dd25103d0c4fbdce89dadf574a787b1f9b"
@@ -16582,6 +16589,11 @@ then-request@^6.0.0:
     promise "^8.0.0"
     qs "^6.4.0"
 
+[email protected]:
+  version "1.0.20"
+  resolved "https://registry.yarnpkg.com/third-party-capital/-/third-party-capital-1.0.20.tgz#e218a929a35bf4d2245da9addb8ab978d2f41685"
+  integrity sha512-oB7yIimd8SuGptespDAZnNkzIz+NWaJCu2RMsbs4Wmp9zSDUM8Nhi3s2OOcqYuv3mN4hitXc8DVx+LyUmbUDiA==
+
 through2@^2.0.0, through2@^2.0.3:
   version "2.0.5"
   resolved "https://registry.npmjs.org/through2/-/through2-2.0.5.tgz"