1

I have swiper with videos. For video I use ReactPlayer. Here is my code.

const playerRef = useRef(null);

const [swipe, setSwipe] = useState<SwiperCore>();
const [stepImg, setStepImg] = useState<number>(initialImg ? initialImg + 1 : 1);

const onBeforeInit = (swipeData: SwiperCore) => {
    setSwipe(swipeData);
};

const handledNext = () => {
    swipe?.slideNext();
    swipe && setStepImg(swipe?.realIndex + 1);
};
const handledPrev = () => {
    swipe?.slidePrev();
    swipe && setStepImg(swipe?.realIndex + 1);
};

useEffect(
    () => {
        if (playerRef && playerRef?.current) {
            playerRef.current.showPreview();
        }
    },
    [stepImg]
);

return (
<Box sx={galleryModalStyles.swiperWrapper}>
  <Swiper
    slidesPerView={1}
    spaceBetween={30}
    loop={true}
    onBeforeInit={onBeforeInit}
    initialSlide={initialImg ?? 0}
  >
    {
      gallery.map((
        img, index
      ) => (
        <SwiperSlide key={`${img?.id}_${index}`}>
            <Box
              sx={galleryModalStyles.mediaSwiperWrapper}
            >
                <ReactPlayer
                  url={img.url}
                  ref={playerRef}
                  light={img.thumbnailUrl}
                  playing={index === stepImg - 1}
                  controls
                  width="inherit"
                  height="inherit"
                />
            </Box>
        </SwiperSlide>
      ))
    }
  </Swiper>
  <Box
    sx={galleryModalStyles.paginationWrapper}
  >
    <Button
      variant="default"
      onClick={handledPrev}
      sx={galleryModalStyles.paginationButton}
    >
      <ArrowBackIosNewIcon />
    </Button>
    <Button
      variant="default"
      onClick={handledNext}
      sx={galleryModalStyles.paginationButton}
    >
      <ArrowForwardIosIcon />
    </Button>
  </Box>
</Box>
);

I was expecting that when I switch to another video, showPreview() returns to the preview overlay in the previous video like here https://codesandbox.io/s/react-player-light-mode-jczfx?file=/src/App.js:928-1020 . But it's not. In my case, when I turn back to the previous video it keeps playing. Please tell me what am I doing wrong?

Dependences: "react": "18.0.0", "react-player": "^2.10.1"

Stasya
  • 11
  • 2

1 Answers1

0

I set the youtube url and it worked.

Satoshi.N
  • 1
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Apr 15 '23 at 10:25