with window.OffscreenCanvas to undefined, options will never be dispatched to drawer.config

ExtReMLapin commented 1 year ago

zhw2590582 commented 1 year ago

In what browser does this error occur? https://caniuse.com/?search=OffscreenCanvas%20

or try this:

{
    useWorker: !!window.OffscreenCanvas
}

ExtReMLapin commented 1 year ago

This is on a browser used in an internal company network, which means it's a custom build or something, i have no idea what the IT dep did with it.
Long story short, it displays correctly (is a bit slow, as expected with this weird browser build) but dragging doesn't work because of faulty settings getter on drawer

I gave a try by disabling the worker but it don't help, also it's also handled in the bellow screenshot (see condition).

I used the debugger to see wf.option is filled with the options but wf.drawer.config is not.

Long story short, it tries to assign currentTime to NaN because after math operations, multiple variables that are expected to be into drawer.config are undefined (non existing)

I guessed it was linked to this :

But my fix attempt doesn't work

ExtReMLapin commented 1 year ago

I mean, the data is now in drawer.options but it's missing the variables like gridGap etc and not knowing the code base correctly + more editing can only lead to a mess.

ExtReMLapin commented 1 year ago

Alright, error also happens on my normal browser with useWorker to false it means it's broken on all browser with this settings to false

code to reproduce : just use html code + import js + try to drag it

<!-- simple html page with a simple import button that allows to locally add a video player -->

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Video Browser</title>
    <style>
        body {
            background-color: #d0e4fe;
        }
    </style>
</head>

<body>
    <div id="waveform" style="width: 100%; height: 75px"></div>
    <input type="file" id="fileInput" name="fileInput" accept="video/*">
    <button onclick="importVideo()" controls>Import Video</button>
    <video id="videoPlayer" controls></video>
    <script src="./wfplayer.js"></script>

    <script>
        function importVideo() {
            let fileInput = document.getElementById('fileInput');
            let file = fileInput.files[0];
            let fileURL = URL.createObjectURL(file);
            let videoPlayer = document.getElementById('videoPlayer');
            videoPlayer.src = fileURL;
            var wf = new WFPlayer({

                container: document.querySelector('#waveform'),
                mediaElement: document.querySelector('#videoPlayer'),
                scrollable: true,
        padding: 0,
        rulerAtTop: true,
        duration: 35,
        useWorker:false
            });

            wf.load(document.querySelector('#videoPlayer'));
            // grab event
            wf.on('grabbing', (currentTime) => {
                wf.seek(currentTime)
            });

            // scroll event
            wf.on('scroll', (deltaY) => {
                wf.seek(wf.currentTime + deltaY / 10)
            });

        }
    </script>

</body>

ExtReMLapin commented 1 year ago

Managed to fix it using

zhw2590582 commented 1 year ago

Yes, you are right, I did not pay attention to the compatibility of useWorker: false when I was testing, I have released wfplayer@2.2.6 to fix this problem

zhw2590582 / WFPlayer

with window.OffscreenCanvas to undefined, options will never be dispatched to drawer.config #41