TypeError · Cannot read property 'getBoundingClientRect' of null

[vibhorme]

@alexanderwallin

slider component is having an issue after the recent update version(2.0.0-beta.1)

//node_modules/react-player-controls/dist/components/Slider.js:137:23

var $el = _react.default.createRef();

var bounds = function bounds() {

  return $el.current.getBoundingClientRect(); //error - TypeError · Cannot read property 'getBoundingClientRect' of null   };

This issue is occurring when we click on the play button and then try to drag the slider

[alexanderwallin]

Hi @vibhorme. Could you post your code so that I can take a closer look?

[Donaldzzq]

Hi @alexanderwallin I got this bug too. Here is my code.

import React, { Component } from "react";
import { Slider, Direction, FormattedTime } from "react-player-controls";
import {
  FastForward,
  FastRewind,
  Fullscreen,
  PlayArrow,
  Pause,
  SkipNext,
  SkipPrevious,
} from "@material-ui/icons";

const GREEN = "#72d687";

// A colored bar that will represent the current value
const SliderBar = ({ direction, value, style }) => (
  <div
    style={Object.assign(
      {},
      {
        position: "absolute",
        background: "rgba(196, 196, 196, 0.2)",
        borderRadius: 4,
      },
      {
        top: 0,
        bottom: 0,
        left: 0,
        width: `${value * 100}%`,
      },
      style
    )}
  />
);

// A handle to indicate the current value
const SliderHandle = ({ direction, value, style }) => (
  <div
    style={Object.assign(
      {},
      {
        position: "absolute",
        width: 16,
        height: 16,
        background: GREEN,
        borderRadius: "100%",
        transform: "scale(1)",
        transition: "transform 0.2s",
        "&:hover": {
          transform: "scale(1.3)",
        },
      },
      {
        top: 0,
        left: `${value * 100}%`,
        marginTop: -4,
        marginLeft: -8,
      },
      style
    )}
  />
);

export default class PlayerControl extends Component {
  state = {
    isPlaying: false,
    value: 0,
    lastValueStart: 0,
    lastValueEnd: 0,
    lastIntent: 0,
    lastIntentStart: 0,
    lastIntentEndCount: 0,
  };
  handleVideoPlay = () => {
    this.setState({ isPlaying: true });
  };
  handleVideoStop = () => {
    this.setState({ isPlaying: false });
  };
  setValue = (newValue) => {
    // console.log(newValue);
    this.setState({ value: newValue });
  };
  onDragEnd = (newValue) => {
    // console.log("onDragEnd: ", newValue);
    this.setState({ value: newValue });
  };
  render() {
    const { isPlaying, value } = this.state;
    const duration = 600;

    return (
      <div className="player-control">
        <div className="control-icons">
          {isPlaying ? (
            <div>
              <SkipPrevious className="icon" />
              <FastRewind width={14} height={14} className="icon" />
              <Pause
                width={14}
                height={14}
                className="icon"
                onClick={this.handleVideoStop}
              />
              <FastForward width={14} height={14} className="icon" />
              <SkipNext width={14} height={14} className="icon" />
            </div>
          ) : (
            <PlayArrow
              width={14}
              height={14}
              className="icon"
              onClick={this.handleVideoPlay}
            />
          )}
        </div>
        <div className="slider">
          <Slider

            direction={Direction.HORIZONTAL}
            onChange={this.setValue}
            onChangeStart={(startValue) =>
              this.setState(() => ({ lastValueStart: startValue }))
            }
            onChangeEnd={this.onDragEnd}
            onIntent={(intent) => this.setState(() => ({ lastIntent: intent }))}
            onIntentStart={(intent) =>
              this.setState(() => ({ lastIntentStart: intent }))
            }
            onIntentEnd={() =>
              this.setState(() => ({
                lastIntentEndCount: this.state.lastIntentEndCount + 1,
              }))
            }
            style={{
              width: "80vw",
              height: 6,
              borderRadius: 2,
              background: "rgba(196, 196, 196, 0.2)",
              //   transition: "width 0.1s",
              cursor: "pointer",
            }}
          >
            <SliderBar
              direction={Direction.HORIZONTAL}
              value={1}
              style={{ background: "rgba(196, 196, 196, 0.2)" }}
            />
            <SliderHandle
              direction={Direction.HORIZONTAL}
              value={value}
              style={{ background: "#52ABEC" }}
            />
          </Slider>
        </div>
        <FormattedTime numSeconds={duration} className="period" />
        <Fullscreen className="full-screen" />
      </div>
    );
  }
}

[ericqt]

I'm also getting this error when I click on the slider several times.

[Donaldzzq]

I'm also getting this error when I click on the slider several times.

I am using 1.1.0 to avoid this issue

[ericqt]

I'm also getting this error when I click on the slider several times.

I am using 1.1.0 to avoid this issue

I wonder if this can be fixed by upgrading the downstream dependency of react-use-gesture since it seems like this problem is most likely coming from that package

[alexanderwallin]

I made a bare minimum app based on @Donaldzzq's code sample above and tested it in Chrome, Opera, Safari and Firefox, and could not replicate the issue. If anyone could post a reproducible repo that would be great!

[hoangvu12]

It only happens in 2.0.0beta, I assume it is mobile drag problem.

https://user-images.githubusercontent.com/68330291/148359660-abbc1fd6-3f62-48e3-8fee-7f2319262111.mp4