Improve syncing

[2blo]

• [ ] unmuting after makes it start later

  • onready triggered twice onlone bfx.old
  • const beforeAudioActive = useRef<boolean>(true); sync good, false makes it worse (yes, the video).
  • sometimes the videos dont start

Originally posted by @2blo in https://github.com/2blo/before-effects/issues/16#issuecomment-1367425154

• just switch props.before <--> props.after --> no desync with "music track", but get issue with stuttering sometimes, like with setTo(0.05)
• spamming switch audio track also desyncs videos
• "dont use useRef for rendering, unpredictable, except init" - react docs
  • [so example init:](Do not write or read ref.current during rendering,):

    function Video() {
    const playerRef = useRef(null);
    if (playerRef.current === null) {
    playerRef.current = new VideoPlayer();
    }
    ....

    Perhaps all the before/after-status refs should just be variables: should not persist multiple renders

• double iframe loading because of iframe-loading: "lazy" ?
• "postMessage to dom fail" document.YTconfig fix not working , neither opts:

              opts={{
                origin: "http://localhost:3000",
                host: "https://www.youtube.com",
                playerVars: {
                  showinfo: 1,
                  modestbranding: true,
                  controls: 1,
                  loop: 1,
                  mute: 0,
                  origin: "http://localhost:3000",
                  host: "https://www.youtube.com",
                },
              }}

• [ ] get stuck loading sometimes when click play
• [ ] alternate switch audio in case it desyncs one video more.
• [ ] check looping
• [ ] allow scrubbing

doneAfter is not part of so snippet, allows start in 1 click

[2blo]

after last commit on #38 I noticed an old sync issue:

• right video will play 2x, left will stutter at 0.01 speed

occurred even when undoing ts warning changes