Need help with making the scrolling smoother

[vivekd95]

Hi, @zhw2590582

I have a view of the waveform with the first 10 seconds. When my seeker reaches the rightmost point, the view of the waveform jumps from 0-10 seconds to 10-20 seconds. Is there any way that I can change the view by, let's say, second by second?

Thanks.

[zhw2590582]

Do you need to turn on options: scrollable ？

[vivekd95]

Using this scrollable option is not making any difference.

[zhw2590582]

I don't quite understand what effect you want, can you briefly describe？

[vivekd95]

Hi, @zhw2590582 Sorry for the delay.

Let me explain it with the help of screen recordings of your wfplayer and subplayer libraries.

Wfplayer
https://user-images.githubusercontent.com/107407402/194236952-3302ce45-7886-4975-ba92-73928cc04189.mp4

Subplayer
https://user-images.githubusercontent.com/107407402/194237327-6ffb4026-620d-4f12-9ba9-1472953e2aae.mp4

As you can see, the scrolling of waveform is smooth in subplayer as compared to wfplayer. In subplayer, the waveform scrolls as the seeker scrolls, while in wfplayer, the waveform jumps at the interval of 10 seconds (0 to 10, then 10 to 20, then 20 to 30, and so on). So, what I am asking is how can we do the same smooth scrolling (as done in subplayer) in wfplayer?

[zhw2590582]

I just turned on this option

var wf = new WFPlayer({
    // Mount the audio waveform of the dom
    container: '#waveform',

    // Whether to use scroll mode
    scrollable: true,
})

[vivekd95]

Thanks. Yes, I enabled this setting, and now the waveform on wfplayer.org scrolls as I prefer. Does this attribute also depend on other attributes? Because despite the fact that I passed this information to my code, the waveform does not scroll. Let me also add the code segment.

this.wf = new WFPlayer({
         container: this.$waveform.current,
         mediaElement: document.querySelector('#video'),
         waveColor: 'rgba(255, 235, 59, 0.95)',
         progressColor: 'rgba(255, 255, 255, 0.3)',
         cors: true,
         scrollable: true
    });

where $waveform is ref attached to waveform div ( ).
Do you see anything that might be causing the scrollable attribute not to work?

[zhw2590582]

I wrote a react demo for you:
https://codesandbox.io/s/zealous-bouman-ilouot?file=/src/App.js

[vivekd95]

Hi I saw your demo and tried to change it into class component. Here is the sample code. Feel free to make changes.
https://codesandbox.io/s/class-component-wfplayer-u7otwk

[zhw2590582]

I have modified the code for you
https://codesandbox.io/s/class-component-wfplayer-forked-w5sys7?file=/src/App.js

[vivekd95]

Thanks a lot. I am doing the same in my local code but am not able to see any change. I guess I have to keep checking what segment of code is making the change.

1.) I'd like to know what browser you use because when I open the codesandbox in Google Chrome, the waveform does not appear, whereas the waveform appears fine in Mozilla. Any idea why this is happening?

2.) Can I add the contextmenu on the waveform the same way we are adding it on the subtitle?

[zhw2590582]

1. You can look at the chrome console, there is a high probability that fetch is wrong when pulling video data, such as cross-domain problems
2. Yes, do you want to be a subtitle editor? you can refer to this: https://aimu.app

[vivekd95]

Hey, I have attached a screen recording of the subtitle editor you referred to.

aimu.mp4

As you can see in the recording, when I right click on the waveform area (not on the subtitle), the browser's contextmenu is opened. I tried adding a custom contextmenu on the waveform, same as the contextmenu on the subtitle, but no contextmenu event fires when I right click on the waveform. Any suggestions/advice/corrections?

[zhw2590582]

Are you asking how to add a right-click menu?
You can refer to this: https://github.com/vkbansal/react-contextmenu

[vivekd95]

I am not asking how to add a right-click menu. I already have a right-click menu in my project (working fine on the subtitle part) . I just wanted to know if I could add the same right-click menu on my waveform as on the subtitle. I have tried using the same in my project but the right-click menu is not working on the div id="waveform" style="width: 1000px; height: 300px">/div> but it works perfectly on the subtitle over the waveform.

[zhw2590582]

Why not?
https://codesandbox.io/s/zealous-bouman-ilouot?file=/src/App.js

[vivekd95]

I am literally exporting your codesandbox code and running it on my machine and it is behaving differently. Scrollable is not working. ContextMenu is not working. I guess I will have to keep checking why this is happening. Thanks for helping me.