Video content carousel adjustments (#1156)

* Video content carousel adjustments

* PR FIX

* PR FIX 2

* Fix responsiveness

src/components/VideoGallery.tsx

@@ -36,6 +36,8 @@ type VideoGalleryProps = {
 const PLACEHOLDERS_COUNT = 12
 const MIN_VIDEO_PREVIEW_WIDTH = 281
 const CAROUSEL_SMALL_BREAKPOINT = 688
+const FRACTIONAL_LEVEL = 1.3
+const FRACTIONAL_LEVEL_RANKING = 1.4
 
 export const VideoGallery: React.FC<VideoGalleryProps> = ({
   title,
@@ -60,7 +62,7 @@ export const VideoGallery: React.FC<VideoGalleryProps> = ({
         return {
           breakpoint,
           settings: {
-            slidesToShow: idx + 1.5,
+            slidesToShow: idx + FRACTIONAL_LEVEL,
             slidesToScroll: idx + 1,
           },
         }
@@ -68,7 +70,7 @@ export const VideoGallery: React.FC<VideoGalleryProps> = ({
       return {
         breakpoint,
         settings: {
-          slidesToShow: idx + 1,
+          slidesToShow: idx + (breakpoint <= CAROUSEL_SMALL_BREAKPOINT ? FRACTIONAL_LEVEL_RANKING : 1),
           slidesToScroll: idx + 1,
         },
       }

src/shared/components/Carousel/Carousel.tsx

@@ -1,4 +1,13 @@
-import React, { ComponentPropsWithoutRef, ReactNode, RefObject, forwardRef, useImperativeHandle, useRef } from 'react'
+import Glider from 'glider-js'
+import React, {
+  ComponentPropsWithoutRef,
+  ReactNode,
+  RefObject,
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+} from 'react'
 
 import { Container, Dots, GliderContainer, Track } from './Carousel.style'
 
@@ -31,6 +40,27 @@ export const Carousel = forwardRef<
     ref
   ) => {
     const dotsRef = useRef<HTMLDivElement>(null)
+    const gliderInstanceRef = useRef<Glider.Static<HTMLElement>>()
+    const slidesToScrollRef = useRef<number>(0)
+
+    const onAnimated = () => {
+      if (gliderInstanceRef.current && gliderOptions.responsive) {
+        const breakpointIndex = gliderOptions.responsive.findIndex(
+          (item) => item.breakpoint === gliderInstanceRef.current?.breakpoint
+        )
+        const slidesToScroll = gliderOptions.responsive[breakpointIndex].settings.slidesToScroll as number
+        const itemsRemainder = gliderInstanceRef.current.slides.length % slidesToScrollRef.current || slidesToScroll
+        if (nextArrowRef.current && nextArrowRef.current?.classList.contains('disabled') && itemsRemainder) {
+          gliderInstanceRef.current.setOption({ slidesToScroll: itemsRemainder }, false)
+        } else {
+          gliderInstanceRef.current.setOption({ slidesToScroll: slidesToScrollRef.current || slidesToScroll }, false)
+          if (!slidesToScrollRef.current) {
+            slidesToScrollRef.current = slidesToScroll
+          }
+        }
+      }
+    }
+
     const {
       ref: gliderRef,
       getContainerProps,
@@ -39,13 +69,32 @@ export const Carousel = forwardRef<
       getPrevArrowProps,
       getNextArrowProps,
       getDotsProps,
+      glider,
     } = useGlider<HTMLDivElement>({
       slidesToShow,
+      onAnimated,
       arrows: { prev: prevArrowRef.current, next: nextArrowRef.current },
       dots: dotsRef.current,
       ...gliderOptions,
     })
 
+    const resetSlidesToScroll = () => {
+      slidesToScrollRef.current = 0
+    }
+
+    useEffect(() => {
+      window.addEventListener('resize', resetSlidesToScroll)
+
+      return () => {
+        window.removeEventListener('resize', resetSlidesToScroll)
+      }
+    }, [])
+
+    useEffect(() => {
+      if (!glider) return
+      gliderInstanceRef.current = glider
+    }, [glider])
+
     useImperativeHandle(ref, () => ({
       getPrevArrowProps,
       getNextArrowProps,

src/shared/components/VideoTileBase/VideoTileBase.styles.tsx

@@ -128,7 +128,11 @@ export const AvatarContainer = styled.div<ScalesWithCoverProps>`
 `
 
 export const TextContainer = styled.div`
-  width: calc(100% - 87px);
+  width: calc(100% - 30px);
+
+  ${media.compact} {
+    width: calc(100% - 87px);
+  }
 `
 
 type MetaContainerProps = { noMarginTop: boolean } & MainProps