Video view slight improvements

WRadoslaw · Feb 23, 2024 · 64c0757 · 64c0757
1 parent a9e6fdb
commit 64c0757
Show file tree

Hide file tree

Showing 3 changed files with 218 additions and 174 deletions.
diff --git a/packages/atlas/src/components/MinimizedPlayer/MinimizedPlayer.tsx b/packages/atlas/src/components/MinimizedPlayer/MinimizedPlayer.tsx
@@ -1,4 +1,4 @@
-import { forwardRef, useEffect, useState } from 'react'
+import { forwardRef, useEffect, useMemo, useState } from 'react'
 
 import { VideoPlayer, VideoPlayerProps } from '@/components/_video/VideoPlayer'
 import { useMediaMatch } from '@/hooks/useMediaMatch'
@@ -30,23 +30,26 @@ export const MinimizedPlayer = forwardRef<HTMLVideoElement, MiniVideoProps>(
 
     const inView = isAllowed && mdMatch && !wasPausedOnTop ? isInView || forceExit || hasError : true
 
+    const actions = useMemo(
+      () => ({
+        onPause: () => {
+          setIsPaused(true)
+          videoPlayerProps.onPause?.()
+        },
+        onPlay: () => {
+          setIsPaused(false)
+          videoPlayerProps.onPlay?.()
+        },
+        onError: () => setHasError(true),
+        onMinimizedExit: () => setForceExit(true),
+      }),
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      [videoPlayerProps.onPlay, videoPlayerProps.onPause]
+    )
+
     return (
       <Wrapper isInView={inView}>
-        <VideoPlayer
-          ref={ref}
-          isMinimized={!inView}
-          onPause={() => {
-            setIsPaused(true)
-            videoPlayerProps.onPause?.()
-          }}
-          onPlay={() => {
-            setIsPaused(false)
-            videoPlayerProps.onPlay?.()
-          }}
-          onError={() => setHasError(true)}
-          onMinimizedExit={() => setForceExit(true)}
-          {...videoPlayerProps}
-        />
+        <VideoPlayer ref={ref} isMinimized={!inView} {...actions} {...videoPlayerProps} />
       </Wrapper>
     )
   }

diff --git a/packages/atlas/src/components/_loaders/SkeletonLoader/SkeletonLoader.tsx b/packages/atlas/src/components/_loaders/SkeletonLoader/SkeletonLoader.tsx
@@ -32,8 +32,8 @@ export const SkeletonLoader: FC<SkeletonLoaderProps> = ({ className, ...props })
 )
 
 const SkeletonLoaderContainer = styled.div<SkeletonLoaderProps>`
-  min-width: ${({ width = '100%' }) => getPropValue(width)};
-  min-height: ${({ height = '100%' }) => getPropValue(height)};
+  width: ${({ width = '100%' }) => getPropValue(width)};
+  height: ${({ height = '100%' }) => getPropValue(height)};
   margin-bottom: ${({ bottomSpace = 0 }) => getPropValue(bottomSpace)};
   border-radius: ${({ rounded = false }) => (rounded ? '100%' : '0')};
   background-color: ${cVar('colorCoreNeutral800Lighten')};