fix: pause video on scroll

src/sections/TestimonialsSection/TestimonialsSection.tsx

@@ -1,9 +1,13 @@
+'use client'
+
 import {Container} from "@/shared/components/Container/Container";
 import styles from './TestimonialsSection.module.css';
 import {Carousel} from "@/shared/components/Carousel/Carousel";
 import {TestimonialItem, TestimonialItemProps} from "@/sections/TestimonialsSection/components/TestimonialItem/TestimonialItem";
+import {ComponentProps, useRef} from "react";
+import Slider from "react-slick";
 
-const testimonialsSrc: TestimonialItemProps[] = [
+const testimonialsSrc: Omit<TestimonialItemProps, 'index'>[] = [
     {
         src: "drop/videos/1.mp4",
         clientName: "Имя клиента",
@@ -27,13 +31,29 @@ const testimonialsSrc: TestimonialItemProps[] = [
 ]
 
 export function TestimonialsSection() {
+    const videosRef = useRef<Array<HTMLVideoElement>>([])
+    const newRef = useRef<HTMLVideoElement>(null)
+
+    const settings: ComponentProps<typeof Slider> = {
+        infinite: false,
+        beforeChange(currentSlide: number, nextSlide: number) {
+            videosRef.current[currentSlide].pause();
+        }
+    }
+
+    const handlePause = () => {
+        console.log(newRef.current)
+        newRef!.current!.pause()
+    }
+
     return (
         <section className={styles.root}>
             <Container>
                 <h3 className={styles.title}>Посмотрите отзывы от наших клиентов</h3>
-                <Carousel>
+                <Carousel settings={settings}>
-                    {testimonialsSrc.map(item => (
+                    {testimonialsSrc.map((item, index) => (
-                        <TestimonialItem key={item.src} src={item.src} keyPhrase={item.keyPhrase} clientName={item.clientName}/>
+                        <TestimonialItem index={index} ref={videosRef} key={item.src} src={item.src} keyPhrase={item.keyPhrase}
+                                         clientName={item.clientName}/>
                     ))}
                 </Carousel>
             </Container>

src/sections/TestimonialsSection/components/TestimonialItem/TestimonialItem.tsx

@@ -1,17 +1,24 @@
 import styles from './TestimonialItem.module.css'
+import {forwardRef, Ref} from "react";
 
 export type TestimonialItemProps = {
     src: string,
     keyPhrase: string,
-    clientName: string
+    clientName: string,
+    index: number
 };
 
-export function TestimonialItem(props: TestimonialItemProps) {
+export const TestimonialItem = forwardRef((props: TestimonialItemProps, ref: Ref<HTMLVideoElement[] | null>) => {
-    const {src, keyPhrase, clientName, ...otherProps} = props;
+    const {src, keyPhrase, clientName, index, ...otherProps} = props;
+
+    if (typeof ref === 'function') {
+        return
+    }
+
     return (
         <div {...otherProps}>
             <div className={styles.innerContainer}>
-                <video className={styles.video} controls src={`${src}#t=0.1`} preload={"metadata"}/>
+                <video ref={el => ref!.current![index] = el!} className={styles.video} controls src={`${src}#t=0.1`} preload={"metadata"}/>
                 <div className={styles.description}>
                     <p className={styles.keyPhrase}>{keyPhrase}</p>
                     <p className={styles.clientName}>{clientName}</p>
@@ -19,4 +26,7 @@ export function TestimonialItem(props: TestimonialItemProps) {
             </div>
         </div>
     );
-};
+
+});
+
+TestimonialItem.displayName = "TestimonialItem"

src/shared/components/Carousel/Carousel.tsx

@@ -8,10 +8,12 @@ import sliderArrowLeft from "@/shared/assets/icons/sliderArrowLeft.svg";
 import sliderArrowRight from "@/shared/assets/icons/sliderArrowRight.svg";
 
 type Props = {
-    children: ReactNode
+    children: ReactNode,
+    settings?: ComponentProps<typeof Slider>
 };
 
-const settings: ComponentProps<typeof Slider> = {
+export function Carousel({children, settings}: Props) {
+    const defaultSettings: ComponentProps<typeof Slider> = {
         infinite: true,
         speed: 500,
         slidesToShow: 1,
@@ -19,13 +21,13 @@ const settings: ComponentProps<typeof Slider> = {
         lazyLoad: 'progressive',
         prevArrow: <Image src={sliderArrowLeft} alt={''}/>,
         nextArrow: <Image src={sliderArrowRight} alt={''}/>,
-    dots: true
+        dots: true,
+        ...settings
     };
 
-export function Carousel({children}: Props) {
     return (
         <div className={styles.root}>
-            <Slider {...settings}>
+            <Slider {...defaultSettings}>
                 {children}
             </Slider>
         </div>