From 18eef34aae22efd9f2b36c06abaae8272e44c178 Mon Sep 17 00:00:00 2001
From: Jim O'Donnell <james.odonnell@dtc.ox.ac.uk>
Date: Sat, 31 Aug 2024 16:40:32 +0100
Subject: [PATCH 1/5] 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.
---
 packages/lib-content/package.json             |  1 +
 .../DefaultHome/components/Introduction.js    | 11 +++++-----
 .../DefaultHome/components/Researchers.js     | 21 +++++++++----------
 yarn.lock                                     | 12 +++++++++++
 4 files changed, 28 insertions(+), 17 deletions(-)

diff --git a/packages/lib-content/package.json b/packages/lib-content/package.json
index 167f19fa2d..f3fa32364b 100644
--- 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
index 7fb573d810..04770dac98 100644
--- 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
index 23038bd23d..7fa0980688 100644
--- 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
index c9f6399511..65fc894752 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2041,6 +2041,13 @@
   resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.7.tgz#75e1d90758cb10a547e1cdfb878871da28123682"
   integrity sha512-pxsI23gKWRt/SPHFkDEsP+w+Nd7gK37Hpv0ngc5HpWy2e7cKx9zR/+Q2ptAUqICNTecAaGWvmhway7pj/JLEWA==
 
+"@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/chokidar-2@2.1.8-no-fsevents.3":
   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"
@@ -16685,6 +16692,11 @@ then-request@^6.0.0:
     promise "^8.0.0"
     qs "^6.4.0"
 
+third-party-capital@1.0.20:
+  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"

From 19c0f47ed9a0bd66a4c224e9731ebdf2b753bce8 Mon Sep 17 00:00:00 2001
From: Jim O'Donnell <james.odonnell@dtc.ox.ac.uk>
Date: Sun, 1 Sep 2024 10:49:41 +0100
Subject: [PATCH 2/5] lazy load large blog images

---
 .../src/components/Article/Article.js         | 20 ++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

diff --git a/packages/lib-content/src/components/Article/Article.js b/packages/lib-content/src/components/Article/Article.js
index 7d87bb23f3..ca4572f31f 100644
--- a/packages/lib-content/src/components/Article/Article.js
+++ b/packages/lib-content/src/components/Article/Article.js
@@ -1,4 +1,4 @@
-import { Anchor, Box, Heading, Paragraph, ResponsiveContext } from 'grommet'
+import { Anchor, Box, Heading, Image, Paragraph, ResponsiveContext } from 'grommet'
 import { string } from 'prop-types'
 import { useTranslation } from '../../translations/i18n.js'
 import styled from 'styled-components'
@@ -9,6 +9,10 @@ const StyledParagraph = styled(Paragraph)`
   line-height: 1.2;
 `
 
+const thumbnailSize = {
+  max: '120px',
+  min: '120px'
+}
 export default function Article({
   date = '',
   excerpt = '',
@@ -33,11 +37,17 @@ export default function Article({
       {imageSrc.length && size !== 'small' ? (
         <Box
           alignSelf='center'
-          background={`url('${imageSrc}')`}
           flex='grow'
-          height={{ max: '120px', min: '120px' }}
-          width={{ max: '120px', min: '120px' }}
-        />
+          height={thumbnailSize}
+          width={thumbnailSize}
+        >
+          <Image
+            fit='cover'
+            src={imageSrc}
+            alt={title}
+            loading='lazy'
+          />
+        </Box>
       ) : null}
       <Box>
         <SpacedText

From b0625837b6a1d0e6418e56a6f487bd5126e9ef9d Mon Sep 17 00:00:00 2001
From: Jim O'Donnell <james.odonnell@dtc.ox.ac.uk>
Date: Thu, 12 Sep 2024 16:57:18 +0100
Subject: [PATCH 3/5] update the About page

- use `lite-youtube-embed`.
- lazy load offscreen images.
---
 .../src/screens/About/components/Highlights.js      |  3 +++
 .../src/screens/About/components/OurMission.js      | 13 ++++++-------
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/packages/lib-content/src/screens/About/components/Highlights.js b/packages/lib-content/src/screens/About/components/Highlights.js
index 7bc89affca..1df00ca45e 100644
--- a/packages/lib-content/src/screens/About/components/Highlights.js
+++ b/packages/lib-content/src/screens/About/components/Highlights.js
@@ -46,6 +46,7 @@ export default function Highlights() {
           <Image
             alt={t('AboutPage.highlights.pictures.one')}
             src='https://static.zooniverse.org/fem-assets/into-the-zooniverse1.jpg'
+            loading='lazy'
             fit='contain'
             width='100%'
           />
@@ -54,6 +55,7 @@ export default function Highlights() {
           <Image
             alt={t('AboutPage.highlights.pictures.two')}
             src='https://static.zooniverse.org/fem-assets/into-the-zooniverse2.png'
+            loading='lazy'
             fit='contain'
             width='100%'
 
@@ -63,6 +65,7 @@ export default function Highlights() {
           <Image
             alt={t('AboutPage.highlights.pictures.three')}
             src='https://static.zooniverse.org/fem-assets/into-the-zooniverse3.jpg'
+            loading='lazy'
             fit='contain'
             width='99%' // minor adjustment to align these images top/bottom
           />
diff --git a/packages/lib-content/src/screens/About/components/OurMission.js b/packages/lib-content/src/screens/About/components/OurMission.js
index bbc5d8dbc0..3f24a33df2 100644
--- a/packages/lib-content/src/screens/About/components/OurMission.js
+++ b/packages/lib-content/src/screens/About/components/OurMission.js
@@ -16,6 +16,7 @@ import styled from 'styled-components'
 import { useContext } from 'react'
 
 import Stats from '../../../components/Stats/Stats.js'
+import { YouTubeEmbed } from '@next/third-parties/google'
 
 const VideoWrapper = styled(Box)`
   border-radius: 8px; // same as Stat component
@@ -37,7 +38,7 @@ const Discovery = ({ href, src, labelString }) => (
   <Anchor href={href}>
     <Box width='8rem'>
       <CircleImage>
-        <Image alt='' src={src} width='100%' height='100%' />
+        <Image alt='' loading='lazy' src={src} width='100%' height='100%' />
       </CircleImage>
       <Text
         color={{ light: 'dark-5', dark: 'white' }}
@@ -120,13 +121,11 @@ export default function OurMission() {
       <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>
 

From 1b3ce14691543372fe138eae932a451aa64e505a Mon Sep 17 00:00:00 2001
From: Delilah <23665803+goplayoutside3@users.noreply.github.com>
Date: Sun, 15 Sep 2024 19:25:37 -0500
Subject: [PATCH 4/5] put video title in translations dictionary

---
 .../lib-content/src/screens/About/components/OurMission.js  | 2 +-
 .../src/screens/Home/DefaultHome/components/Introduction.js | 2 +-
 packages/lib-content/src/translations/en.json               | 6 ++++--
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/lib-content/src/screens/About/components/OurMission.js b/packages/lib-content/src/screens/About/components/OurMission.js
index 3f24a33df2..9507ea940b 100644
--- a/packages/lib-content/src/screens/About/components/OurMission.js
+++ b/packages/lib-content/src/screens/About/components/OurMission.js
@@ -125,7 +125,7 @@ export default function OurMission() {
           height='100%'
           width='100%'
           videoid='F-B8gXJyMHc'
-          title='A Brief Introduction to the Zooniverse'
+          title={t('AboutPage.OurMission.video')}
         />
       </VideoWrapper>
 
diff --git a/packages/lib-content/src/screens/Home/DefaultHome/components/Introduction.js b/packages/lib-content/src/screens/Home/DefaultHome/components/Introduction.js
index 04770dac98..28f4e43323 100644
--- a/packages/lib-content/src/screens/Home/DefaultHome/components/Introduction.js
+++ b/packages/lib-content/src/screens/Home/DefaultHome/components/Introduction.js
@@ -120,7 +120,7 @@ export default function Introduction() {
           height='100%'
           width='100%'
           videoid='F-B8gXJyMHc'
-          title='A Brief Introduction to the Zooniverse'
+          title={t('Home.DefaultHome.Introduction.video')}
         />
       </VideoWrapper>
     </>
diff --git a/packages/lib-content/src/translations/en.json b/packages/lib-content/src/translations/en.json
index dcebfce670..1ab75917f6 100644
--- a/packages/lib-content/src/translations/en.json
+++ b/packages/lib-content/src/translations/en.json
@@ -115,7 +115,8 @@
       "stats": {
         "one": "Classifications so far",
         "two": "Registered volunteers"
-      }
+      },
+      "video": "A Brief Introduction to the Zooniverse"
     },
     "sidebarLabel": "Section",
     "title": "About the Zooniverse"
@@ -278,7 +279,8 @@
         "description1": "The Zooniverse is the world's largest platform for people-powered research. We connect professional researchers with millions of volunteers worldwide. Facilitating real results from impractical, or otherwise impossible research. This has led to new discoveries, policy impacts, and research publications.",
         "description2": "Our platform is driven by volunteers, like you. All ages and backgrounds are welcome to participate, no PhD required — just a sense of wonder and a few clicks. Many of the most interesting findings from Zooniverse projects have emerged from discussions between volunteers and researchers. Join us today to take part in cutting-edge research and make your own discoveries!",
         "signIn": "Sign in",
-        "register": "Register"
+        "register": "Register",
+        "video": "A Brief Introduction to the Zooniverse"
       },
       "Researchers": {
         "build": "Build a project",

From cefe1311085bb2ae98f71d881091a49a7d524625 Mon Sep 17 00:00:00 2001
From: Delilah <23665803+goplayoutside3@users.noreply.github.com>
Date: Sun, 15 Sep 2024 19:31:01 -0500
Subject: [PATCH 5/5] fix DefaultHome padding dupe

---
 .../lib-content/src/screens/Home/DefaultHome/DefaultHome.js    | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/lib-content/src/screens/Home/DefaultHome/DefaultHome.js b/packages/lib-content/src/screens/Home/DefaultHome/DefaultHome.js
index 6a0a24bdeb..779336e1c9 100644
--- a/packages/lib-content/src/screens/Home/DefaultHome/DefaultHome.js
+++ b/packages/lib-content/src/screens/Home/DefaultHome/DefaultHome.js
@@ -16,7 +16,7 @@ import Researchers from './components/Researchers.js'
 import SubHeading from '../../../components/HeadingForAboutNav/SubHeading.js'
 
 const StyledBox = styled(Box)`
-  padding: 0 0 0 50px;
+  padding: 0 0 50px 0;
 
   @media (width <= 90rem) {
     padding: 0 30px 50px;
@@ -44,7 +44,6 @@ export default function DefaultHome({ dailyZooPosts = [], zooBlogPosts = [] }) {
         <StyledBox
           align='center'
           width='min(100%, calc(90rem - 160px))' // Like 80px horizontal padding, matches lib-user Layout
-          pad={{ bottom: '50px' }}
         >
           <MaxWidthContent>
             <Introduction />