fix: LSDV-4903: Fix Video tag null rendering (#1313)

* fix: LSDV-4903: Remove rendering unexpected null on reinit LS with video tag in config

* test: LSDV-4903: Add VirtualVideo unmounting test

* Try to fix test by emulating supported video format

* Move test to codeceptjs

e2e/tests/regression-tests/video-unmount.test.js

@@ -0,0 +1,19 @@
+Feature('Video unmount').tag('@regress');
+
+Scenario('Reiniting Label Studio should not left unexpected null and video tags in DOM', async ({ I, LabelStudio }) => {
+  I.amOnPage('/');
+  for (let i = 0; i < 60; i++) {
+    LabelStudio.init({
+      config: `
+<View>
+  <Video name="video" value="$video" />
+  <VideoRectangle name="box" toName="video" />
+</View>`,
+      data: { video: '/files/opossum_intro.webm' },
+    });
+
+    I.wait(i * i / 1000000);
+  }
+  I.dontSeeElementInDOM({ xpath: '//body/video[position()=2]' });
+  I.dontSee('null');
+}).config({ waitForAction: 0 });

src/components/VideoCanvas/VirtualVideo.tsx

@@ -180,7 +180,7 @@ export const VirtualVideo = forwardRef<HTMLVideoElement, VirtualVideoProps>((pro
     createVideoElement();
     attachEventListeners();
     canPlayType(props.src ?? '').then((canPlay) => {
-      if (canPlay) {
+      if (canPlay && video.current) {
         attachSource();
         attachRef(video.current);