Merge branch 'master' into upgrade-nextjs

packages/app-content-pages/package.json

@@ -50,7 +50,7 @@
     "@testing-library/dom": "~9.3.0",
     "@testing-library/react": "~14.2.0",
     "@testing-library/user-event": "~14.5.0",
-    "chai": "~4.3.4",
+    "chai": "~4.5.0",
     "chai-dom": "~1.12.0",
     "dirty-chai": "~2.0.1",
     "eslint-config-next": "~13.5.5",

packages/app-project/package.json

@@ -40,7 +40,7 @@
     "grommet-icons": "~4.12.0",
     "i18next": "~23.14.0",
     "lodash": "~4.17.11",
-    "million": "~2.6.4",
+    "million": "~3.1.11",
     "mobx": "~6.12.0",
     "mobx-devtools-mst": "~0.9.21",
     "mobx-react": "~9.1.0",
@@ -72,7 +72,7 @@
     "@wojtekmaj/enzyme-adapter-react-17": "~0.8.0",
     "babel-loader": "~9.1.0",
     "babel-plugin-webpack-alias": "~2.1.2",
-    "chai": "~4.3.4",
+    "chai": "~4.5.0",
     "chai-dom": "~1.12.0",
     "dirty-chai": "~2.0.1",
     "enzyme": "~3.11.0",

packages/lib-async-states/package.json

@@ -17,7 +17,7 @@
   },
   "devDependencies": {
     "@zooniverse/standard": "~2.0.0",
-    "chai": "~4.3.4",
+    "chai": "~4.5.0",
     "mocha": "~10.3.0",
     "snazzy": "~9.0.0"
   },

packages/lib-classifier/package.json

@@ -85,7 +85,7 @@
     "babel-loader": "~9.1.0",
     "babel-plugin-module-resolver": "~5.0.0",
     "babel-plugin-transform-imports": "~2.0.0",
-    "chai": "~4.3.4",
+    "chai": "~4.5.0",
     "chai-dom": "~1.12.0",
     "css-loader": "~7.1.1",
     "dirty-chai": "~2.0.1",
@@ -97,7 +97,7 @@
     "html-webpack-plugin": "~5.6.0",
     "ignore-styles": "~5.0.1",
     "jsdom": "~24.0.0",
-    "million": "~2.6.4",
+    "million": "~3.1.11",
     "mobx": "~6.12.0",
     "mobx-devtools-mst": "~0.9.21",
     "mobx-react": "~9.1.0",

packages/lib-content/package.json

@@ -58,7 +58,7 @@
     "@testing-library/dom": "~9.3.0",
     "@testing-library/react": "~14.2.0",
     "@testing-library/user-event": "~14.5.0",
-    "chai": "~4.3.4",
+    "chai": "~4.5.0",
     "chai-dom": "~1.12.0",
     "dirty-chai": "~2.0.1",
     "eslint-plugin-jsx-a11y": "~6.8.0",

packages/lib-content/src/screens/Home/DefaultHome/components/Hero.js

@@ -1,35 +1,24 @@
 import { Anchor, Box, Heading, Paragraph, ResponsiveContext } from 'grommet'
 import styled from 'styled-components'
 import { SpacedText, ZooniverseLogotype } from '@zooniverse/react-components'
-import { useContext } from 'react'
+import { useHasMounted } from '@zooniverse/react-components/hooks'
+import { useContext, useRef } from 'react'
 
 import { useTranslation } from '../../../../translations/i18n.js'
-import { mobileBreakpoint } from '../../../../components/SharedStyledComponents/SharedStyledComponents.js'
 
 const Relative = styled(Box)`
   position: relative;
   overflow: hidden;
   background: ${props => props.theme.global.colors['neutral-1']};
+  min-height: 60vh;
 `
 
-const VideoContainer = styled(Box)`
-  width: 100%;
-
-  @media (width <= ${mobileBreakpoint}) {
-    display: none;
-  }
-
-  @media (prefers-reduced-motion) {
-    display: none;
-  }
-`
-
-const MobileHeroImage = styled(Box)`
+const HeroImage = styled(Box)`
   width: 100%;
   height: 60vh;
 
-  @media (width > ${mobileBreakpoint}) {
-    display: none;
+  @media (width > 768px) {
+    height: 90vh;
   }
 `
 
@@ -80,20 +69,36 @@ const StyledLink = styled(Anchor)`
 `
 
 export default function Hero() {
+  const videoRef = useRef(null)
   const { t } = useTranslation()
   const size = useContext(ResponsiveContext)
+  const hasMounted = useHasMounted()
+
+  let prefersReducedMotion
+  if (hasMounted) {
+    const reducedMotionQuery = window.matchMedia('(prefers-reduced-motion: reduce)')
+    prefersReducedMotion = reducedMotionQuery?.matches
+  }
+
+  // Only autoplay a video element if desktop width and device does not prefer reduced motion
+   if (size !== 'small' && !prefersReducedMotion && hasMounted && videoRef.current) {
+    videoRef.current.play()
+   }
 
   return (
     <Relative width='100%'>
-      <VideoContainer>
-        <video autoPlay loop disablePictureInPicture muted preload='metadata'>
-          <source type='video/webm' src='/assets/home-video.webm' />
-          <source type='video/mp4' src='/assets/home-video.mp4' />
-        </video>
-      </VideoContainer>
-      <MobileHeroImage
-        background={`url(${'/assets/home-video-placeholder.jpg'})`}
-      />
+      {size !== 'small' && !prefersReducedMotion ? (
+        <Box fill>
+          <video loop disablePictureInPicture muted preload='metadata' ref={videoRef}>
+            <source type='video/webm' src='/assets/home-video.webm' />
+            <source type='video/mp4' src='/assets/home-video.mp4' />
+          </video>
+        </Box>
+      ) : (
+        <HeroImage
+          background={`url(${'/assets/home-video-placeholder.jpg'})`}
+        />
+      )}
       <HeroCopy justify='center' align='center' pad='medium'>
         <StyledHeading level={1} margin='0'>
           <SpacedText

packages/lib-panoptes-js/package.json

@@ -22,7 +22,7 @@
   },
   "devDependencies": {
     "@zooniverse/standard": "~2.0.0",
-    "chai": "~4.3.4",
+    "chai": "~4.5.0",
     "dirty-chai": "~2.0.1",
     "jsdom": "~24.0.0",
     "mocha": "~10.3.0",

packages/lib-react-components/package.json

@@ -82,7 +82,7 @@
     "@zooniverse/grommet-theme": "~3.2.0",
     "@zooniverse/standard": "~2.0.0",
     "babel-plugin-transform-imports": "~2.0.0",
-    "chai": "~4.3.4",
+    "chai": "~4.5.0",
     "chai-dom": "~1.12.0",
     "dedent": "~1.5.1",
     "dirty-chai": "~2.0.1",

packages/lib-react-components/src/hooks/Readme.md

@@ -5,7 +5,7 @@
 When a component needs to be deferred until client-side rendering. See [https://www.joshwcomeau.com/react/the-perils-of-rehydration/](https://www.joshwcomeau.com/react/the-perils-of-rehydration) for a detailed mental model.
 
 ```js
-const hasMounted = useHadMounted()
+const hasMounted = useHasMounted()
 
 return (
   <>

packages/lib-user/package.json

@@ -69,7 +69,7 @@
     "babel-loader": "~9.1.0",
     "babel-plugin-module-resolver": "~5.0.0",
     "babel-plugin-transform-imports": "~2.0.0",
-    "chai": "~4.3.4",
+    "chai": "~4.5.0",
     "chai-dom": "~1.12.0",
     "css-loader": "~7.1.1",
     "dirty-chai": "~2.0.1",