mirror of https://github.com/jetkvm/kvm.git
765 lines
27 KiB
TypeScript
765 lines
27 KiB
TypeScript
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
|
|
|
import {
|
|
useDeviceSettingsStore,
|
|
useHidStore,
|
|
useMouseStore,
|
|
useRTCStore,
|
|
useSettingsStore,
|
|
useUiStore,
|
|
useVideoStore,
|
|
} from "@/hooks/stores";
|
|
import { keys, modifiers } from "@/keyboardMappings";
|
|
import { useResizeObserver } from "@/hooks/useResizeObserver";
|
|
import { cx } from "@/cva.config";
|
|
import VirtualKeyboard from "@components/VirtualKeyboard";
|
|
import Actionbar from "@components/ActionBar";
|
|
import MacroBar from "@/components/MacroBar";
|
|
import InfoBar from "@components/InfoBar";
|
|
import useKeyboard from "@/hooks/useKeyboard";
|
|
import { useJsonRpc } from "@/hooks/useJsonRpc";
|
|
import notifications from "@/notifications";
|
|
|
|
import {
|
|
HDMIErrorOverlay,
|
|
LoadingVideoOverlay,
|
|
NoAutoplayPermissionsOverlay,
|
|
PointerLockBar,
|
|
} from "./VideoOverlay";
|
|
|
|
export default function WebRTCVideo() {
|
|
// Video and stream related refs and states
|
|
const videoElm = useRef<HTMLVideoElement>(null);
|
|
const mediaStream = useRTCStore(state => state.mediaStream);
|
|
const [isPlaying, setIsPlaying] = useState(false);
|
|
const peerConnectionState = useRTCStore(state => state.peerConnectionState);
|
|
const [isPointerLockActive, setIsPointerLockActive] = useState(false);
|
|
// Store hooks
|
|
const settings = useSettingsStore();
|
|
const { sendKeyboardEvent, resetKeyboardState } = useKeyboard();
|
|
const setMousePosition = useMouseStore(state => state.setMousePosition);
|
|
const setMouseMove = useMouseStore(state => state.setMouseMove);
|
|
const {
|
|
setClientSize: setVideoClientSize,
|
|
setSize: setVideoSize,
|
|
width: videoWidth,
|
|
height: videoHeight,
|
|
clientWidth: videoClientWidth,
|
|
clientHeight: videoClientHeight,
|
|
} = useVideoStore();
|
|
|
|
// RTC related states
|
|
const peerConnection = useRTCStore(state => state.peerConnection);
|
|
|
|
// HDMI and UI states
|
|
const hdmiState = useVideoStore(state => state.hdmiState);
|
|
const hdmiError = ["no_lock", "no_signal", "out_of_range"].includes(hdmiState);
|
|
const isVideoLoading = !isPlaying;
|
|
|
|
// Keyboard related states
|
|
const { setIsNumLockActive, setIsCapsLockActive, setIsScrollLockActive } =
|
|
useHidStore();
|
|
|
|
// Misc states and hooks
|
|
const [blockWheelEvent, setBlockWheelEvent] = useState(false);
|
|
const disableVideoFocusTrap = useUiStore(state => state.disableVideoFocusTrap);
|
|
const [send] = useJsonRpc();
|
|
|
|
// Video-related
|
|
useResizeObserver({
|
|
ref: videoElm,
|
|
onResize: ({ width, height }) => {
|
|
// This is actually client size, not videoSize
|
|
if (width && height) {
|
|
if (!videoElm.current) return;
|
|
setVideoClientSize(width, height);
|
|
setVideoSize(videoElm.current.videoWidth, videoElm.current.videoHeight);
|
|
}
|
|
},
|
|
});
|
|
|
|
const updateVideoSizeStore = useCallback(
|
|
(videoElm: HTMLVideoElement) => {
|
|
setVideoClientSize(videoElm.clientWidth, videoElm.clientHeight);
|
|
setVideoSize(videoElm.videoWidth, videoElm.videoHeight);
|
|
},
|
|
[setVideoClientSize, setVideoSize],
|
|
);
|
|
|
|
const onVideoPlaying = useCallback(() => {
|
|
setIsPlaying(true);
|
|
if (videoElm.current) updateVideoSizeStore(videoElm.current);
|
|
}, [updateVideoSizeStore]);
|
|
|
|
// On mount, get the video size
|
|
useEffect(
|
|
function updateVideoSizeOnMount() {
|
|
if (videoElm.current) updateVideoSizeStore(videoElm.current);
|
|
},
|
|
[setVideoClientSize, updateVideoSizeStore, setVideoSize],
|
|
);
|
|
|
|
// Pointer lock and keyboard lock related
|
|
const isPointerLockPossible = window.location.protocol === "https:";
|
|
|
|
const checkNavigatorPermissions = useCallback(async (permissionName: string) => {
|
|
const name = permissionName as PermissionName;
|
|
const { state } = await navigator.permissions.query({ name });
|
|
return state === "granted";
|
|
}, []);
|
|
|
|
const requestPointerLock = useCallback(async () => {
|
|
if (document.pointerLockElement) return;
|
|
|
|
const isPointerLockGranted = await checkNavigatorPermissions("pointer-lock");
|
|
if (isPointerLockGranted && settings.mouseMode === "relative") {
|
|
videoElm.current?.requestPointerLock();
|
|
}
|
|
}, [checkNavigatorPermissions, settings.mouseMode]);
|
|
|
|
useEffect(() => {
|
|
if (!isPointerLockPossible || !videoElm.current) return;
|
|
|
|
const handlePointerLockChange = () => {
|
|
if (document.pointerLockElement) {
|
|
notifications.success("Pointer lock Enabled, hold escape to exit");
|
|
setIsPointerLockActive(true);
|
|
} else {
|
|
notifications.success("Pointer lock disabled");
|
|
setIsPointerLockActive(false);
|
|
}
|
|
};
|
|
|
|
const abortController = new AbortController();
|
|
const signal = abortController.signal;
|
|
|
|
document.addEventListener("pointerlockchange", handlePointerLockChange, { signal });
|
|
|
|
return () => {
|
|
abortController.abort();
|
|
};
|
|
}, [isPointerLockPossible, videoElm]);
|
|
|
|
const requestFullscreen = useCallback(async () => {
|
|
videoElm.current?.requestFullscreen({
|
|
navigationUI: "show",
|
|
});
|
|
|
|
// we do not care about pointer lock if it's for fullscreen
|
|
await requestPointerLock();
|
|
|
|
const isKeyboardLockGranted = await checkNavigatorPermissions("keyboard-lock");
|
|
if (isKeyboardLockGranted) {
|
|
if ("keyboard" in navigator) {
|
|
// @ts-ignore
|
|
await navigator.keyboard.lock();
|
|
}
|
|
}
|
|
}, [requestPointerLock, checkNavigatorPermissions]);
|
|
|
|
// Mouse-related
|
|
const calcDelta = (pos: number) => (Math.abs(pos) < 10 ? pos * 2 : pos);
|
|
const sendRelMouseMovement = useCallback(
|
|
(x: number, y: number, buttons: number) => {
|
|
if (settings.mouseMode !== "relative") return;
|
|
// if we ignore the event, double-click will not work
|
|
// if (x === 0 && y === 0 && buttons === 0) return;
|
|
send("relMouseReport", { dx: calcDelta(x), dy: calcDelta(y), buttons });
|
|
setMouseMove({ x, y, buttons });
|
|
},
|
|
[send, setMouseMove, settings.mouseMode],
|
|
);
|
|
|
|
const relMouseMoveHandler = useCallback(
|
|
(e: MouseEvent) => {
|
|
if (settings.mouseMode !== "relative") return;
|
|
if (isPointerLockActive === false && isPointerLockPossible === true) return;
|
|
|
|
// Send mouse movement
|
|
const { buttons } = e;
|
|
sendRelMouseMovement(e.movementX, e.movementY, buttons);
|
|
},
|
|
[
|
|
isPointerLockActive,
|
|
isPointerLockPossible,
|
|
sendRelMouseMovement,
|
|
settings.mouseMode,
|
|
],
|
|
);
|
|
|
|
const sendAbsMouseMovement = useCallback(
|
|
(x: number, y: number, buttons: number) => {
|
|
if (settings.mouseMode !== "absolute") return;
|
|
send("absMouseReport", { x, y, buttons });
|
|
// We set that for the debug info bar
|
|
setMousePosition(x, y);
|
|
},
|
|
[send, setMousePosition, settings.mouseMode],
|
|
);
|
|
|
|
const absMouseMoveHandler = useCallback(
|
|
(e: MouseEvent) => {
|
|
if (!videoClientWidth || !videoClientHeight) return;
|
|
if (settings.mouseMode !== "absolute") return;
|
|
|
|
// Get the aspect ratios of the video element and the video stream
|
|
const videoElementAspectRatio = videoClientWidth / videoClientHeight;
|
|
const videoStreamAspectRatio = videoWidth / videoHeight;
|
|
|
|
// Calculate the effective video display area
|
|
let effectiveWidth = videoClientWidth;
|
|
let effectiveHeight = videoClientHeight;
|
|
let offsetX = 0;
|
|
let offsetY = 0;
|
|
|
|
if (videoElementAspectRatio > videoStreamAspectRatio) {
|
|
// Pillarboxing: black bars on the left and right
|
|
effectiveWidth = videoClientHeight * videoStreamAspectRatio;
|
|
offsetX = (videoClientWidth - effectiveWidth) / 2;
|
|
} else if (videoElementAspectRatio < videoStreamAspectRatio) {
|
|
// Letterboxing: black bars on the top and bottom
|
|
effectiveHeight = videoClientWidth / videoStreamAspectRatio;
|
|
offsetY = (videoClientHeight - effectiveHeight) / 2;
|
|
}
|
|
|
|
// Clamp mouse position within the effective video boundaries
|
|
const clampedX = Math.min(Math.max(offsetX, e.offsetX), offsetX + effectiveWidth);
|
|
const clampedY = Math.min(Math.max(offsetY, e.offsetY), offsetY + effectiveHeight);
|
|
|
|
// Map clamped mouse position to the video stream's coordinate system
|
|
const relativeX = (clampedX - offsetX) / effectiveWidth;
|
|
const relativeY = (clampedY - offsetY) / effectiveHeight;
|
|
|
|
// Convert to HID absolute coordinate system (0-32767 range)
|
|
const x = Math.round(relativeX * 32767);
|
|
const y = Math.round(relativeY * 32767);
|
|
|
|
// Send mouse movement
|
|
const { buttons } = e;
|
|
sendAbsMouseMovement(x, y, buttons);
|
|
},
|
|
[
|
|
sendAbsMouseMovement,
|
|
videoClientHeight,
|
|
videoClientWidth,
|
|
videoWidth,
|
|
videoHeight,
|
|
settings.mouseMode,
|
|
],
|
|
);
|
|
|
|
const trackpadSensitivity = useDeviceSettingsStore(state => state.trackpadSensitivity);
|
|
const mouseSensitivity = useDeviceSettingsStore(state => state.mouseSensitivity);
|
|
const clampMin = useDeviceSettingsStore(state => state.clampMin);
|
|
const clampMax = useDeviceSettingsStore(state => state.clampMax);
|
|
const blockDelay = useDeviceSettingsStore(state => state.blockDelay);
|
|
const trackpadThreshold = useDeviceSettingsStore(state => state.trackpadThreshold);
|
|
|
|
const mouseWheelHandler = useCallback(
|
|
(e: WheelEvent) => {
|
|
if (blockWheelEvent) return;
|
|
|
|
// Determine if the wheel event is from a trackpad or a mouse wheel
|
|
const isTrackpad = Math.abs(e.deltaY) < trackpadThreshold;
|
|
|
|
// Apply appropriate sensitivity based on input device
|
|
const scrollSensitivity = isTrackpad ? trackpadSensitivity : mouseSensitivity;
|
|
|
|
// Calculate the scroll value
|
|
const scroll = e.deltaY * scrollSensitivity;
|
|
|
|
// Apply clamping
|
|
const clampedScroll = Math.max(clampMin, Math.min(clampMax, scroll));
|
|
|
|
// Round to the nearest integer
|
|
const roundedScroll = Math.round(clampedScroll);
|
|
|
|
// Invert the scroll value to match expected behavior
|
|
const invertedScroll = -roundedScroll;
|
|
|
|
send("wheelReport", { wheelY: invertedScroll });
|
|
|
|
// Apply blocking delay
|
|
setBlockWheelEvent(true);
|
|
setTimeout(() => setBlockWheelEvent(false), blockDelay);
|
|
},
|
|
[
|
|
blockDelay,
|
|
blockWheelEvent,
|
|
clampMax,
|
|
clampMin,
|
|
mouseSensitivity,
|
|
send,
|
|
trackpadSensitivity,
|
|
trackpadThreshold,
|
|
],
|
|
);
|
|
|
|
const resetMousePosition = useCallback(() => {
|
|
sendAbsMouseMovement(0, 0, 0);
|
|
}, [sendAbsMouseMovement]);
|
|
|
|
// Keyboard-related
|
|
const handleModifierKeys = useCallback(
|
|
(e: KeyboardEvent, activeModifiers: number[]) => {
|
|
const { shiftKey, ctrlKey, altKey, metaKey } = e;
|
|
|
|
const filteredModifiers = activeModifiers.filter(Boolean);
|
|
|
|
// Example: activeModifiers = [0x01, 0x02, 0x04, 0x08]
|
|
// Assuming 0x01 = ControlLeft, 0x02 = ShiftLeft, 0x04 = AltLeft, 0x08 = MetaLeft
|
|
return (
|
|
filteredModifiers
|
|
// Shift: Keep if Shift is pressed or if the key isn't a Shift key
|
|
// Example: If shiftKey is true, keep all modifiers
|
|
// If shiftKey is false, filter out 0x02 (ShiftLeft) and 0x20 (ShiftRight)
|
|
.filter(
|
|
modifier =>
|
|
shiftKey ||
|
|
(modifier !== modifiers["ShiftLeft"] &&
|
|
modifier !== modifiers["ShiftRight"]),
|
|
)
|
|
// Ctrl: Keep if Ctrl is pressed or if the key isn't a Ctrl key
|
|
// Example: If ctrlKey is true, keep all modifiers
|
|
// If ctrlKey is false, filter out 0x01 (ControlLeft) and 0x10 (ControlRight)
|
|
.filter(
|
|
modifier =>
|
|
ctrlKey ||
|
|
(modifier !== modifiers["ControlLeft"] &&
|
|
modifier !== modifiers["ControlRight"]),
|
|
)
|
|
// Alt: Keep if Alt is pressed or if the key isn't an Alt key
|
|
// Example: If altKey is true, keep all modifiers
|
|
// If altKey is false, filter out 0x04 (AltLeft)
|
|
//
|
|
// But intentionally do not filter out 0x40 (AltRight) to accomodate
|
|
// Alt Gr (Alt Graph) as a modifier. Oddly, Alt Gr does not declare
|
|
// itself to be an altKey. For example, the KeyboardEvent for
|
|
// Alt Gr + 2 has the following structure:
|
|
// - altKey: false
|
|
// - code: "Digit2"
|
|
// - type: [ "keydown" | "keyup" ]
|
|
//
|
|
// For context, filteredModifiers aims to keep track which modifiers
|
|
// are being pressed on the physical keyboard at any point in time.
|
|
// There is logic in the keyUpHandler and keyDownHandler to add and
|
|
// remove 0x40 (AltRight) from the list of new modifiers.
|
|
//
|
|
// But relying on the two handlers alone to track the state of the
|
|
// modifier bears the risk that the key up event for Alt Gr could
|
|
// get lost while the browser window is temporarily out of focus,
|
|
// which means the Alt Gr key state would then be "stuck". At this
|
|
// point, we would need to rely on the user to press Alt Gr again
|
|
// to properly release the state of that modifier.
|
|
.filter(
|
|
modifier =>
|
|
altKey ||
|
|
(modifier !== modifiers["AltLeft"]),
|
|
)
|
|
// Meta: Keep if Meta is pressed or if the key isn't a Meta key
|
|
// Example: If metaKey is true, keep all modifiers
|
|
// If metaKey is false, filter out 0x08 (MetaLeft) and 0x80 (MetaRight)
|
|
.filter(
|
|
modifier =>
|
|
metaKey ||
|
|
(modifier !== modifiers["MetaLeft"] && modifier !== modifiers["MetaRight"]),
|
|
)
|
|
);
|
|
},
|
|
[],
|
|
);
|
|
|
|
const keyDownHandler = useCallback(
|
|
async (e: KeyboardEvent) => {
|
|
e.preventDefault();
|
|
const prev = useHidStore.getState();
|
|
let code = e.code;
|
|
const key = e.key;
|
|
|
|
// if (document.activeElement?.id !== "videoFocusTrap") {
|
|
// console.log("KEYUP: Not focusing on the video", document.activeElement);
|
|
// return;
|
|
// }
|
|
|
|
// console.log(document.activeElement);
|
|
|
|
setIsNumLockActive(e.getModifierState("NumLock"));
|
|
setIsCapsLockActive(e.getModifierState("CapsLock"));
|
|
setIsScrollLockActive(e.getModifierState("ScrollLock"));
|
|
|
|
if (code == "IntlBackslash" && ["`", "~"].includes(key)) {
|
|
code = "Backquote";
|
|
} else if (code == "Backquote" && ["§", "±"].includes(key)) {
|
|
code = "IntlBackslash";
|
|
}
|
|
|
|
// Add the key to the active keys
|
|
const newKeys = [...prev.activeKeys, keys[code]].filter(Boolean);
|
|
|
|
// Add the modifier to the active modifiers
|
|
const newModifiers = handleModifierKeys(e, [
|
|
...prev.activeModifiers,
|
|
modifiers[code],
|
|
]);
|
|
|
|
// When pressing the meta key + another key, the key will never trigger a keyup
|
|
// event, so we need to clear the keys after a short delay
|
|
// https://bugs.chromium.org/p/chromium/issues/detail?id=28089
|
|
// https://bugzilla.mozilla.org/show_bug.cgi?id=1299553
|
|
if (e.metaKey) {
|
|
setTimeout(() => {
|
|
const prev = useHidStore.getState();
|
|
sendKeyboardEvent([], newModifiers || prev.activeModifiers);
|
|
}, 10);
|
|
}
|
|
|
|
sendKeyboardEvent([...new Set(newKeys)], [...new Set(newModifiers)]);
|
|
},
|
|
[
|
|
setIsNumLockActive,
|
|
setIsCapsLockActive,
|
|
setIsScrollLockActive,
|
|
handleModifierKeys,
|
|
sendKeyboardEvent,
|
|
],
|
|
);
|
|
|
|
const keyUpHandler = useCallback(
|
|
(e: KeyboardEvent) => {
|
|
e.preventDefault();
|
|
const prev = useHidStore.getState();
|
|
|
|
setIsNumLockActive(e.getModifierState("NumLock"));
|
|
setIsCapsLockActive(e.getModifierState("CapsLock"));
|
|
setIsScrollLockActive(e.getModifierState("ScrollLock"));
|
|
|
|
// Filtering out the key that was just released (keys[e.code])
|
|
const newKeys = prev.activeKeys.filter(k => k !== keys[e.code]).filter(Boolean);
|
|
|
|
// Filter out the modifier that was just released
|
|
const newModifiers = handleModifierKeys(
|
|
e,
|
|
prev.activeModifiers.filter(k => k !== modifiers[e.code]),
|
|
);
|
|
|
|
sendKeyboardEvent([...new Set(newKeys)], [...new Set(newModifiers)]);
|
|
},
|
|
[
|
|
setIsNumLockActive,
|
|
setIsCapsLockActive,
|
|
setIsScrollLockActive,
|
|
handleModifierKeys,
|
|
sendKeyboardEvent,
|
|
],
|
|
);
|
|
|
|
const videoKeyUpHandler = useCallback((e: KeyboardEvent) => {
|
|
// In fullscreen mode in chrome & safari, the space key is used to pause/play the video
|
|
// there is no way to prevent this, so we need to simply force play the video when it's paused.
|
|
// Fix only works in chrome based browsers.
|
|
if (e.code === "Space") {
|
|
if (videoElm.current?.paused == true) {
|
|
console.log("Force playing video");
|
|
videoElm.current?.play();
|
|
}
|
|
}
|
|
}, []);
|
|
|
|
const addStreamToVideoElm = useCallback(
|
|
(mediaStream: MediaStream) => {
|
|
if (!videoElm.current) return;
|
|
const videoElmRefValue = videoElm.current;
|
|
// console.log("Adding stream to video element", videoElmRefValue);
|
|
videoElmRefValue.srcObject = mediaStream;
|
|
updateVideoSizeStore(videoElmRefValue);
|
|
},
|
|
[updateVideoSizeStore],
|
|
);
|
|
|
|
useEffect(
|
|
function updateVideoStreamOnNewTrack() {
|
|
if (!peerConnection) return;
|
|
const abortController = new AbortController();
|
|
const signal = abortController.signal;
|
|
|
|
peerConnection.addEventListener(
|
|
"track",
|
|
(e: RTCTrackEvent) => {
|
|
// console.log("Adding stream to video element");
|
|
addStreamToVideoElm(e.streams[0]);
|
|
},
|
|
{ signal },
|
|
);
|
|
|
|
return () => {
|
|
abortController.abort();
|
|
};
|
|
},
|
|
[addStreamToVideoElm, peerConnection],
|
|
);
|
|
|
|
useEffect(
|
|
function updateVideoStream() {
|
|
if (!mediaStream) return;
|
|
console.log("Updating video stream from mediaStream");
|
|
// We set the as early as possible
|
|
addStreamToVideoElm(mediaStream);
|
|
},
|
|
[
|
|
setVideoClientSize,
|
|
mediaStream,
|
|
updateVideoSizeStore,
|
|
peerConnection,
|
|
addStreamToVideoElm,
|
|
],
|
|
);
|
|
|
|
// Setup Keyboard Events
|
|
useEffect(
|
|
function setupKeyboardEvents() {
|
|
const abortController = new AbortController();
|
|
const signal = abortController.signal;
|
|
|
|
document.addEventListener("keydown", keyDownHandler, { signal });
|
|
document.addEventListener("keyup", keyUpHandler, { signal });
|
|
|
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
// @ts-expect-error
|
|
window.clearKeys = () => sendKeyboardEvent([], []);
|
|
window.addEventListener("blur", resetKeyboardState, { signal });
|
|
document.addEventListener("visibilitychange", resetKeyboardState, { signal });
|
|
|
|
return () => {
|
|
abortController.abort();
|
|
};
|
|
},
|
|
[keyDownHandler, keyUpHandler, resetKeyboardState, sendKeyboardEvent],
|
|
);
|
|
|
|
// Setup Video Event Listeners
|
|
useEffect(
|
|
function setupVideoEventListeners() {
|
|
const videoElmRefValue = videoElm.current;
|
|
if (!videoElmRefValue) return;
|
|
|
|
const abortController = new AbortController();
|
|
const signal = abortController.signal;
|
|
|
|
// To prevent the video from being paused when the user presses a space in fullscreen mode
|
|
videoElmRefValue.addEventListener("keyup", videoKeyUpHandler, { signal });
|
|
|
|
// We need to know when the video is playing to update state and video size
|
|
videoElmRefValue.addEventListener("playing", onVideoPlaying, { signal });
|
|
|
|
return () => {
|
|
abortController.abort();
|
|
};
|
|
},
|
|
[
|
|
absMouseMoveHandler,
|
|
resetMousePosition,
|
|
onVideoPlaying,
|
|
mouseWheelHandler,
|
|
videoKeyUpHandler,
|
|
],
|
|
);
|
|
|
|
// Setup Absolute Mouse Events
|
|
useEffect(
|
|
function setAbsoluteMouseModeEventListeners() {
|
|
const videoElmRefValue = videoElm.current;
|
|
if (!videoElmRefValue) return;
|
|
|
|
if (settings.mouseMode !== "absolute") return;
|
|
|
|
const abortController = new AbortController();
|
|
const signal = abortController.signal;
|
|
|
|
videoElmRefValue.addEventListener("mousemove", absMouseMoveHandler, { signal });
|
|
videoElmRefValue.addEventListener("pointerdown", absMouseMoveHandler, { signal });
|
|
videoElmRefValue.addEventListener("pointerup", absMouseMoveHandler, { signal });
|
|
videoElmRefValue.addEventListener("wheel", mouseWheelHandler, {
|
|
signal,
|
|
passive: true,
|
|
});
|
|
|
|
// Reset the mouse position when the window is blurred or the document is hidden
|
|
const local = resetMousePosition;
|
|
window.addEventListener("blur", local, { signal });
|
|
document.addEventListener("visibilitychange", local, { signal });
|
|
const preventContextMenu = (e: MouseEvent) => e.preventDefault();
|
|
videoElmRefValue.addEventListener("contextmenu", preventContextMenu, { signal });
|
|
|
|
return () => {
|
|
abortController.abort();
|
|
};
|
|
},
|
|
[absMouseMoveHandler, mouseWheelHandler, resetMousePosition, settings.mouseMode],
|
|
);
|
|
|
|
// Setup Relative Mouse Events
|
|
const containerRef = useRef<HTMLDivElement>(null);
|
|
|
|
useEffect(
|
|
function setupRelativeMouseEventListeners() {
|
|
if (settings.mouseMode !== "relative") return;
|
|
// Relative mouse mode should only be active if the pointer lock is active and Pointer Lock is possible
|
|
|
|
const videoElmRefValue = videoElm.current;
|
|
if (!videoElmRefValue) return;
|
|
|
|
const abortController = new AbortController();
|
|
const signal = abortController.signal;
|
|
|
|
videoElmRefValue.addEventListener("mousemove", relMouseMoveHandler, { signal });
|
|
videoElmRefValue.addEventListener("pointerdown", relMouseMoveHandler, { signal });
|
|
videoElmRefValue.addEventListener("pointerup", relMouseMoveHandler, { signal });
|
|
videoElmRefValue.addEventListener(
|
|
"click",
|
|
() => {
|
|
if (isPointerLockPossible && !document.pointerLockElement) {
|
|
requestPointerLock();
|
|
}
|
|
},
|
|
{ signal },
|
|
);
|
|
videoElmRefValue.addEventListener("wheel", mouseWheelHandler, {
|
|
signal,
|
|
passive: true,
|
|
});
|
|
|
|
const preventContextMenu = (e: MouseEvent) => e.preventDefault();
|
|
videoElmRefValue.addEventListener("contextmenu", preventContextMenu, { signal });
|
|
|
|
return () => {
|
|
abortController.abort();
|
|
};
|
|
},
|
|
[
|
|
settings.mouseMode,
|
|
relMouseMoveHandler,
|
|
mouseWheelHandler,
|
|
disableVideoFocusTrap,
|
|
requestPointerLock,
|
|
isPointerLockPossible,
|
|
isPointerLockActive,
|
|
],
|
|
);
|
|
|
|
const hasNoAutoPlayPermissions = useMemo(() => {
|
|
if (peerConnection?.connectionState !== "connected") return false;
|
|
if (isPlaying) return false;
|
|
if (hdmiError) return false;
|
|
if (videoHeight === 0 || videoWidth === 0) return false;
|
|
return true;
|
|
}, [peerConnection?.connectionState, isPlaying, hdmiError, videoHeight, videoWidth]);
|
|
|
|
const showPointerLockBar = useMemo(() => {
|
|
if (settings.mouseMode !== "relative") return false;
|
|
if (!isPointerLockPossible) return false;
|
|
if (isPointerLockActive) return false;
|
|
if (isVideoLoading) return false;
|
|
if (!isPlaying) return false;
|
|
if (videoHeight === 0 || videoWidth === 0) return false;
|
|
return true;
|
|
}, [
|
|
settings.mouseMode,
|
|
isPointerLockPossible,
|
|
isPointerLockActive,
|
|
isVideoLoading,
|
|
isPlaying,
|
|
videoHeight,
|
|
videoWidth,
|
|
]);
|
|
|
|
return (
|
|
<div className="grid h-full w-full grid-rows-layout">
|
|
<div className="flex min-h-[39.5px] flex-col">
|
|
<div className="flex flex-col">
|
|
<fieldset
|
|
disabled={peerConnection?.connectionState !== "connected"}
|
|
className="contents"
|
|
>
|
|
<Actionbar requestFullscreen={requestFullscreen} />
|
|
<MacroBar />
|
|
</fieldset>
|
|
</div>
|
|
</div>
|
|
|
|
<div ref={containerRef} className="h-full overflow-hidden">
|
|
<div className="relative h-full">
|
|
<div
|
|
className={cx(
|
|
"absolute inset-0 -z-0 bg-blue-50/40 opacity-80 dark:bg-slate-800/40",
|
|
"[background-image:radial-gradient(theme(colors.blue.300)_0.5px,transparent_0.5px),radial-gradient(theme(colors.blue.300)_0.5px,transparent_0.5px)] dark:[background-image:radial-gradient(theme(colors.slate.700)_0.5px,transparent_0.5px),radial-gradient(theme(colors.slate.700)_0.5px,transparent_0.5px)]",
|
|
"[background-position:0_0,10px_10px]",
|
|
"[background-size:20px_20px]",
|
|
)}
|
|
/>
|
|
<div className="flex h-full flex-col">
|
|
<div className="relative flex-grow overflow-hidden">
|
|
<div className="flex h-full flex-col">
|
|
<div className="grid flex-grow grid-rows-bodyFooter overflow-hidden">
|
|
<div className="relative mx-4 my-2 flex items-center justify-center overflow-hidden">
|
|
<div className="relative flex h-full w-full items-center justify-center">
|
|
<div className="relative inline-block">
|
|
{/* In relative mouse mode and under https, we enable the pointer lock, and to do so we need a bar to show the user to click on the video to enable mouse control */}
|
|
<PointerLockBar show={showPointerLockBar} />
|
|
<video
|
|
ref={videoElm}
|
|
autoPlay={true}
|
|
controls={false}
|
|
onPlaying={onVideoPlaying}
|
|
onPlay={onVideoPlaying}
|
|
muted={true}
|
|
playsInline
|
|
disablePictureInPicture
|
|
controlsList="nofullscreen"
|
|
className={cx(
|
|
"z-30 max-h-full min-h-[384px] min-w-[512px] max-w-full bg-black/50 object-contain transition-all duration-1000",
|
|
{
|
|
"cursor-none": settings.isCursorHidden,
|
|
"opacity-0":
|
|
isVideoLoading ||
|
|
hdmiError ||
|
|
peerConnectionState !== "connected",
|
|
"!opacity-60": showPointerLockBar,
|
|
"animate-slideUpFade border border-slate-800/30 opacity-0 shadow dark:border-slate-300/20":
|
|
isPlaying,
|
|
},
|
|
)}
|
|
/>
|
|
{peerConnection?.connectionState == "connected" && (
|
|
<div
|
|
style={{ animationDuration: "500ms" }}
|
|
className="pointer-events-none absolute inset-0 flex animate-slideUpFade items-center justify-center opacity-0"
|
|
>
|
|
<div className="relative h-full w-full rounded-md">
|
|
<LoadingVideoOverlay show={isVideoLoading} />
|
|
<HDMIErrorOverlay show={hdmiError} hdmiState={hdmiState} />
|
|
<NoAutoplayPermissionsOverlay
|
|
show={hasNoAutoPlayPermissions}
|
|
onPlayClick={() => {
|
|
videoElm.current?.play();
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<VirtualKeyboard />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<InfoBar />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|