@kaizen/components 1.42.1 → 1.42.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/cjs/Illustration/subcomponents/VideoPlayer/VideoPlayer.cjs +14 -1
  2. package/dist/cjs/Illustration/subcomponents/VideoPlayer/VideoPlayer.cjs.map +1 -1
  3. package/dist/cjs/index.css +3 -3
  4. package/dist/esm/Illustration/subcomponents/VideoPlayer/VideoPlayer.mjs +14 -1
  5. package/dist/esm/Illustration/subcomponents/VideoPlayer/VideoPlayer.mjs.map +1 -1
  6. package/dist/esm/index.css +2 -2
  7. package/dist/styles.css +1 -1
  8. package/package.json +1 -1
  9. package/src/Illustration/subcomponents/VideoPlayer/VideoPlayer.tsx +13 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kaizen/components",
3
- "version": "1.42.1",
3
+ "version": "1.42.2",
4
4
  "description": "Kaizen component library",
5
5
  "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
6
6
  "homepage": "https://cultureamp.design",
package/src/Illustration/subcomponents/VideoPlayer/VideoPlayer.tsx CHANGED
@@ -51,6 +51,9 @@ export const VideoPlayer = ({
51
51
  const videoRef = useRef<HTMLVideoElement>(null)
52
52
  const [prefersReducedMotion, setPrefersReducedMotion] =
53
53
  React.useState<boolean>(true)
54
+ const [isWebmCompatible, setIsWebmCompatible] = React.useState<boolean>(false)
55
+ const [windowIsAvailable, setWindowIsAvailable] =
56
+ React.useState<boolean>(false)
54
57
 
55
58
  useEffect(() => {
56
59
  /**
@@ -149,6 +152,15 @@ export const VideoPlayer = ({
149
152
  }
150
153
  }, [videoRef])
151
154
 
155
+ useEffect(() => {
156
+ // SSR does not have a window, which is required for canPlayWebm.
157
+ if (window !== undefined) setWindowIsAvailable(true)
158
+ }, [])
159
+
160
+ useEffect(() => {
161
+ if (windowIsAvailable) setIsWebmCompatible(canPlayWebm())
162
+ }, [windowIsAvailable])
163
+
152
164
  const pausePlay = usePausePlay(videoRef)
153
165
 
154
166
  return (
@@ -173,7 +185,7 @@ export const VideoPlayer = ({
173
185
  playsInline={true}
174
186
  tabIndex={-1}
175
187
  >
176
- {canPlayWebm() && (
188
+ {isWebmCompatible && (
177
189
  <source src={assetUrl(`${source}.webm`)} type="video/webm" />
178
190
  )}
179
191
  <source src={assetUrl(`${source}.mp4`)} type="video/mp4" />