video controls adjusting to screen width instead of staying relative to video component

[eden0501]

Current Behavior

we have a gallery of videos that you can scroll through. unfortunately, the controls of a video adjust its size to the width of the screen instead of staying relative to the video component. this happens both on web and Android devices

Video.Project.mp4

Expected Behavior

the controllers should stay relative to the video width.

Steps to Reproduce

this happens when you scroll between 2 videos.

1. create a scrolling video gallery
2. try to slide from one video to another

Environment

• Browser: Chrome
• Operating system: happened on Android mobile devices but not on ios
• react-player: "^2.14.1"
• react: "^18.1.0"

Other Information

I've tried #1003 and #1168 but it didn't help unfortunately

this is the video component:
in this case, the components get those props:

{
   width: "100%",
   height: "100%",
   style: {
     aspectRatio: "16/9",
     marginBottom: "-8px",
     background: colors.black,
   },
 }

import PropTypes from "prop-types";
import { Box } from "@mui/material";
import { isIOS } from "react-device-detect";
import ReactPlayer from "react-player/lazy";
import { useStopwatch } from "react-timer-hook";
import { useEffect, useRef, useState } from "react";
import { useIsVisible } from "utilities/customHooks/useIsVisible";

const VideoPlayer = ({
  url,
  height = "auto",
  width,
  speed = false,
  download = false,
  pip = false,
  minViewTime = 5,
  trackingFunc,
  viewPercentageToPlay,
  ...props
}) => {
  const ref = useRef();
  const stopwatch = useStopwatch();
  const isVisible = useIsVisible(ref, true, viewPercentageToPlay);

  const [play, setPlay] = useState(false);
  const [mute, setMute] = useState(true);

  useEffect(() => {
    play ? stopwatch.start() : stopwatch.pause();
  }, [play]);

  useEffect(() => {
    !document?.fullscreenElement && setPlay(isVisible);

    if (trackingFunc && !isVisible && stopwatch.totalSeconds >= minViewTime) {
      trackingFunc("watching autoplay video duration", {
        sixthLabel: stopwatch.totalSeconds,
      });

      stopwatch.reset();
    }

    // this is for disabling the automatic rotation in android devices
    if (!isIOS) {
      if (isVisible) {
        screen?.orientation?.lock?.("portrait");
      } else {
        screen?.orientation?.unlock?.();
      }
    }
  }, [isVisible]);

  useEffect(() => {
    const handleMute = _event => {
      setMute(!Boolean(document?.fullscreenElement));
    };

    // this event only works for android devices
    ref?.current?.addEventListener("fullscreenchange", handleMute);

    return () => {
      removeEventListener("fullscreenchange", handleMute);
    };
  }, [ref]);

  return (
    <Box ref={ref}>
      <ReactPlayer
        url={url}
        playsinline={true}
        playing={play}
        onPlay={() => setPlay(true)}
        onPause={() => setPlay(false)}
        config={{
          file: {
            attributes: {
              ...((!speed || !download) && {
                controlsList: `${!download && "nodownload"} ${
                  !speed && "noplaybackrate"
                }`,
              }),
              ...(!pip && { disablePictureInPicture: true }),
            },
          },
        }}
        height={height}
        width={width}
        volume={0.2}
        controls={true}
        muted={mute}
        {...props}
      />
    </Box>
  );
};

VideoPlayer.propTypes = {
  url: PropTypes.string.isRequired,
  height: PropTypes.string,
  width: PropTypes.string,
  speed: PropTypes.bool,
  download: PropTypes.bool,
  pip: PropTypes.bool,
  minViewTime: PropTypes.number,
  viewPercentageToPlay: PropTypes.number,
  trackingFunc: PropTypes.func,
};

export default VideoPlayer;

Thank you in advance and if you need more info to find the solution I will be happy to help in any way I can.

[eden0501]

hi,
I just wanted to know why was this issue converted into a discussion that seems closed

[hemedani]

I also want to disable picture in picture disablePictureInPicture

[hemedani]

I find it

          config={{
            file: {
              attributes: {
                disablePictureInPicture: true
              }
            }
          }}

sorry