egorovsa / react-video-seek-slider Goto Github PK

Just downloaded project
npm install - OK
npm run start - TypeError: Cannot read property 'properties' of undefined

Hello,
I'm creating a video player in ReactPlayer for using this package. I'm having trouble integrating the Slider properties. When I move the slider with the mouse, the time is displayed as 00:00 and the time does not change while I'm moving the slider. Can you help me with this issue? Thank you.

codesandbox: https://codesandbox.io/s/agitated-bhaskara-wfrmt2?file=/src/App.js

I am trying it with nextjs but it gives error on path.

Hey @egorovsa,

nice library 😃 , I'm trying to use it as a solution for some custom video controls that I've built for one of my projects.

I have a small problem with onChange when I want to use the slider to seek time or to get the time just by clicking on the slider it returns 0. Here I have replicated the problem in this sanbox. Default video controls are there to help with playing the video.

Cheers.

Getting a deprecation warning when running this library with the latest 13.0.6 NextJS build & VideoJS 7.20.3.

Hey @egorovsa,

I just wanted to open another issue, here is a loom video, not sure how to reproduce this in the sandbox.

Once the page and video load I can see that slider already have some data loaded, not just that the pseudo-element is offset by 100px. Not sure why is this happening, so wanted to ask you do you maybe have any idea why this can happen.

I can config that progress, currentTime, and max values are 0 on-page and video load.

Cheers.

When I click on the slider. I expect the time return will be correct number or percent of video in that point. But It always return 0 and 1 , It seem incorrect

While playing video player, resizing windows sometimes fails to update trackWidth

offsetWidth is 0 for the class "track".

Actual Behavior

In Safari, the custom volume slider we built for our video player was not working as expected. The Input range slider would stick and never seem to loose focus. After some digging, we realized that this was due to the react-video-seek-slider attaching mouse events to the window, which would prevent the default behaviour of the input range slider.

Expected Behavior

The seek bar should not affect default behaviour of any elements on the page.

Workaround

Use event.stoppropagation() on input fields mouse events.

Codesandbox

https://codesandbox.io/p/sandbox/priceless-sky-rxr3yr?file=%2Fsrc%2FApp.js%3A17%2C27

This project currently lacks a license - this means according to https://choosealicense.com/no-permission/ this code can't really be used.

Warning: Can only update a mounted or mounting component. This usually means you called setState, replaceState, or forceUpdate on an unmounted component. This is a no-op.

Please check the code for the VideoSeekSlider component.

printWarning @ vendor.min.js:250
warning @ vendor.min.js:274
warnAboutUpdateOnUnmounted @ vendor.min.js:12171
scheduleWorkImpl @ vendor.min.js:13131
scheduleWork @ vendor.min.js:13089
enqueueSetState @ vendor.min.js:8587
Component.setState @ vendor.min.js:569
VideoSeekSlider._this.setSeeking @ vendor.min.js:49283

When we add the hover image, it goes out of screen on both starting and ending. Can we make some ristrictions so that it doesn't overflows

Actual Behavior

When the container the seek slider is in is resized because of a re-render, the seek bar doesn't resize until you manually resize the browser window or fire a window resize event.

Expected Behavior

The seek bar should resize itself when its container changes size

Codesandbox

https://codesandbox.io/s/admiring-williamson-cvz8fw