Remove MAX_VIDEOPREVIEW_WIDTH And ItemWidth From Carousel

src/components/ChannelGallery.tsx

@@ -20,13 +20,13 @@ const ChannelGallery: React.FC<ChannelGalleryProps> = ({ title, channels, loadin
   const displayPlaceholders = loading || !channels
 
   return (
-    <Gallery title={title} trackPadding={trackPadding}>
+    <Gallery title={title} trackPadding={trackPadding} itemWidth={210}>
       {displayPlaceholders
         ? Array.from({ length: PLACEHOLDERS_COUNT }).map((_, idx) => (
-            <StyledChannelPreviewBase key={`channel-placeholder-${idx}`} />
+            <ChannelPreviewBase key={`channel-placeholder-${idx}`} />
           ))
         : channels!.map((channel) => (
-            <StyledChannelPreview
+            <ChannelPreview
               id={channel.id}
               name={channel.handle}
               avatarURL={channel.avatarPhotoURL}
@@ -38,12 +38,4 @@ const ChannelGallery: React.FC<ChannelGalleryProps> = ({ title, channels, loadin
   )
 }
 
-const StyledChannelPreviewBase = styled(ChannelPreviewBase)`
-  margin-right: 1.5rem;
-`
-
-const StyledChannelPreview = styled(ChannelPreview)`
-  margin-right: 1.5rem;
-`
-
 export default ChannelGallery

src/components/VideoGallery.tsx

@@ -3,7 +3,7 @@ import { BreakPoint } from 'react-glider'
 
 import styled from '@emotion/styled'
 
-import { breakpointsOfGrid, Gallery, MAX_VIDEO_PREVIEW_WIDTH, VideoPreviewBase } from '@/shared/components'
+import { breakpointsOfGrid, Gallery, MIN_VIDEO_PREVIEW_WIDTH, VideoPreviewBase } from '@/shared/components'
 import VideoPreview from './VideoPreviewWithNavigation'
 import { VideoFields } from '@/api/queries/__generated__/VideoFields'
 
@@ -37,7 +37,7 @@ const VideoGallery: React.FC<VideoGalleryProps> = ({ title, videos, loading }) =
   const displayPlaceholders = loading || !videos
 
   return (
-    <Gallery title={title} trackPadding={trackPadding} responsive={breakpoints}>
+    <Gallery title={title} trackPadding={trackPadding} responsive={breakpoints} itemWidth={MIN_VIDEO_PREVIEW_WIDTH}>
       {displayPlaceholders
         ? Array.from({ length: PLACEHOLDERS_COUNT }).map((_, idx) => (
             <StyledVideoPreviewBase key={`video-placeholder-${idx}`} />
@@ -65,7 +65,7 @@ const videoPreviewCss = css`
     margin-left: ${sizes.b6}px;
   }
 
-  min-width: ${MAX_VIDEO_PREVIEW_WIDTH};
+  min-width: ${MIN_VIDEO_PREVIEW_WIDTH};
 `
 
 const StyledVideoPreviewBase = styled(VideoPreviewBase)`

src/shared/components/Carousel/Carousel.tsx

@@ -23,7 +23,6 @@ const Carousel: React.FC<CarouselProps> = ({
   children,
   trackPadding = '0',
   className,
-  itemWidth = 300,
   slidesToShow = 'auto',
   ...gliderProps
 }) => {
@@ -63,7 +62,6 @@ const Carousel: React.FC<CarouselProps> = ({
         ref={gliderRef as React.RefObject<GliderMethods>}
         iconLeft={LeftArrow}
         iconRight={RightArrow}
-        itemWidth={itemWidth}
         slidesToShow={slidesToShow}
         // Akward conversion needed until this is resolved: https://github.com/hipstersmoothie/react-glider/issues/36
         arrows={(arrows as unknown) as { prev: string; next: string }}

src/shared/components/Grid/Grid.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import styled from '@emotion/styled'
 import useResizeObserver from 'use-resize-observer'
 import { spacing, breakpoints } from '../../theme'
+import { MIN_VIDEO_PREVIEW_WIDTH } from '../VideoPreview'
 
 const toPx = (n: number | string) => (typeof n === 'number' ? `${n}px` : n)
 
@@ -34,7 +35,7 @@ const Grid: React.FC<GridProps> = ({
   onResize,
   repeat = 'fit',
   maxColumns = 6,
-  minWidth = 300,
+  minWidth = MIN_VIDEO_PREVIEW_WIDTH,
   ...props
 }) => {
   const { ref: gridRef } = useResizeObserver<HTMLDivElement>({

src/shared/components/VideoPreview/VideoPreview.tsx

@@ -17,14 +17,15 @@ import { formatDurationShort } from '@/utils/time'
 import VideoPreviewBase from './VideoPreviewBase'
 import { formatVideoViewsAndDate } from '@/utils/video'
 
-const MIN_COVER_WIDTH = 300
-const MAX_COVER_WIDTH = 600
+export const MIN_VIDEO_PREVIEW_WIDTH = 300
+const MAX_VIDEO_PREVIEW_WIDTH = 600
 const MIN_SCALING_FACTOR = 1
 const MAX_SCALING_FACTOR = 1.375
 // Linear Interpolation, see https://en.wikipedia.org/wiki/Linear_interpolation
-const calculateScalingFactor = (coverWidth: number) =>
+const calculateScalingFactor = (videoPreviewWidth: number) =>
   MIN_SCALING_FACTOR +
-  ((coverWidth - MIN_COVER_WIDTH) * (MAX_SCALING_FACTOR - MIN_SCALING_FACTOR)) / (MAX_COVER_WIDTH - MIN_COVER_WIDTH)
+  ((videoPreviewWidth - MIN_VIDEO_PREVIEW_WIDTH) * (MAX_SCALING_FACTOR - MIN_SCALING_FACTOR)) /
+    (MAX_VIDEO_PREVIEW_WIDTH - MIN_VIDEO_PREVIEW_WIDTH)
 
 type VideoPreviewProps = {
   title: string
@@ -66,9 +67,9 @@ const VideoPreview: React.FC<VideoPreviewProps> = ({
   const [scalingFactor, setScalingFactor] = useState(MIN_SCALING_FACTOR)
   const { ref: imgRef } = useResizeObserver<HTMLImageElement>({
     onResize: (size) => {
-      const { width: coverWidth } = size
-      if (coverWidth && !main) {
-        setScalingFactor(calculateScalingFactor(coverWidth))
+      const { width: videoPreviewWidth } = size
+      if (videoPreviewWidth && !main) {
+        setScalingFactor(calculateScalingFactor(videoPreviewWidth))
       }
     },
   })

src/shared/components/VideoPreview/VideoPreviewBase.styles.tsx

@@ -17,8 +17,6 @@ type ScalesWithCoverProps = {
   scalingFactor: number
 }
 
-export const MAX_VIDEO_PREVIEW_WIDTH = '320px'
-
 const fadeIn = keyframes`
   0% {
     opacity: 0

src/shared/components/VideoPreview/index.tsx

@@ -1,5 +1,4 @@
-import VideoPreview from './VideoPreview'
+import VideoPreview, { MIN_VIDEO_PREVIEW_WIDTH } from './VideoPreview'
 import VideoPreviewBase from './VideoPreviewBase'
-import { MAX_VIDEO_PREVIEW_WIDTH } from './VideoPreviewBase.styles'
 
-export { VideoPreview, VideoPreviewBase, MAX_VIDEO_PREVIEW_WIDTH }
+export { VideoPreview, VideoPreviewBase, MIN_VIDEO_PREVIEW_WIDTH }

src/shared/components/index.ts

@@ -11,7 +11,7 @@ export { default as Tabs } from './Tabs'
 export { default as Tab } from './Tabs/Tab'
 export { default as Tag } from './Tag'
 export { default as Typography } from './Typography'
-export { VideoPreview, VideoPreviewBase, MAX_VIDEO_PREVIEW_WIDTH } from './VideoPreview'
+export { VideoPreview, VideoPreviewBase, MIN_VIDEO_PREVIEW_WIDTH } from './VideoPreview'
 export { default as VideoPlayer } from './VideoPlayer'
 export { default as SeriesPreview } from './SeriesPreview'
 export { ChannelPreview, ChannelPreviewBase } from './ChannelPreview'