Calculate <video> size not in fullscreen

web/js/stream/stream.js

@@ -46,6 +46,23 @@ const stream = (() => {
 
         const getVideoEl = () => screen
 
+        const getActualVideoSize = () => {
+            if (state.fullscreen) {
+                // we can't get real <video> size without black bars, so we're trying to
+                // derive its dimensions from the known width or height
+                // and by calculating unknown dimension from the aspect ratio
+                const horizontal = screen.videoWidth > screen.videoHeight;
+                return {
+                    w: horizontal ? screen.offsetHeight * state.aspect : screen.offsetWidth,
+                    h: horizontal ? screen.offsetHeight : screen.offsetWidth * state.aspect
+                }
+            }
+
+            const size = screen.getBoundingClientRect()
+
+            return {w: size.width, h: size.height}
+        }
+
         screen.onerror = (e) => {
             // video playback failed - show a message saying why
             switch (e.target.error.code) {
@@ -177,7 +194,7 @@ const stream = (() => {
             if (state.fullscreen && !pointerLocked) {
                 // event.pub(POINTER_LOCK_CHANGE, screen);
                 await screen.requestPointerLock(
-                    // { unadjustedMovement: true,}
+                // { unadjustedMovement: true,}
                 );
             }
 
@@ -189,12 +206,10 @@ const stream = (() => {
 
         let ex = 0, ey = 0;
         const scaleCursorPos = (x, y) => {
-            const horizontal = screen.videoWidth > screen.videoHeight;
+            const {w, h} = getActualVideoSize();
 
-            const arW = horizontal ? screen.offsetHeight * state.aspect : screen.offsetHeight;
-            const arH = horizontal ? screen.offsetHeight : screen.offsetWidth * state.aspect;
-            const sw = arW / screen.videoWidth;
-            const sh = arH / screen.videoHeight;
+            const sw = w / screen.videoWidth;
+            const sh = h / screen.videoHeight;
 
             const rez = {
                 dx: x / sw + ex,
@@ -211,8 +226,8 @@ const stream = (() => {
         }
 
         const handlePointerMove = (e) => {
-            const delta = scaleCursorPos(e.movementX, e.movementY);
-            event.pub(MOUSE_MOVED, delta);
+            // !to fix ff https://github.com/w3c/pointerlock/issues/42
+            event.pub(MOUSE_MOVED, scaleCursorPos(e.movementX, e.movementY));
         }
 
         event.sub(POINTER_LOCK_CHANGE, (lockedEl) => {
@@ -237,9 +252,9 @@ const stream = (() => {
             state.screen.style['object-fit'] = a.toFixed(6) !== a2.toFixed(6) ? 'fill' : fit
             state.h = hh
             state.w = Math.floor(hh * a)
-            state.screen.setAttribute('width', ww)
-            state.screen.setAttribute('height', hh)
-            state.screen.style.aspectRatio = state.aspect
+            state.screen.setAttribute('width', '' + ww)
+            state.screen.setAttribute('height', '' + hh)
+            state.screen.style.aspectRatio = '' + state.aspect
         })
 
         return {