move.gl 0.0.1

package/ts/Keyboard.ts

@@ -0,0 +1,162 @@
+// Copyright 2024 Scape Agency BV
+
+
+/**
+ * @title Virtual Keyboard
+ * @notice Manages the rendering and interaction of a virtual keyboard on
+ * the web.
+ * @dev This class supports multiple layouts (default, shift, special) and
+ * handles both mouse and keyboard inputs, including touch support.
+ */
+ class VirtualKeyboard {
+
+    private keys: { [mode: string]: string[][] } = {
+        'default': [
+            ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'],
+            ['q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p'],
+            ['a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l'],
+            ['z', 'x', 'c', 'v', 'b', 'n', 'm', 'Backspace']
+        ],
+        'shift': [
+            ['!', '@', '#', '$', '%', '^', '&', '*', '(', ')'],
+            ['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P'],
+            ['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L'],
+            ['Z', 'X', 'C', 'V', 'B', 'N', 'M', 'Backspace']
+        ],
+        'special': [
+            ['[', ']', '{', '}', '#', '%', '^', '*', '+', '='],
+            ['_', '\\', '|', '~', '<', '>', '€', '£', '¥'],
+            ['.', ',', '?', '!', "'", '"', ':', ';', 'Backspace']
+        ]
+    };
+    private currentMode = 'default';
+    private inputElement: HTMLInputElement;
+    private keyboardElement: HTMLElement;
+
+    /**
+     * @notice Initializes the virtual keyboard with specific input and
+     * keyboard element IDs.
+     * @param inputId The ID of the HTML input element to which the keyboard
+     * will be linked.
+     * @param keyboardId The ID of the container element where the keyboard
+     * will be rendered.
+     */
+    constructor(inputId: string, keyboardId: string) {
+        this.inputElement = document.getElementById(
+            inputId
+        ) as HTMLInputElement;
+        this.keyboardElement = document.getElementById(
+            keyboardId
+        ) as HTMLElement;
+        this.renderKeyboard();
+        this.attachEventListeners();
+    }
+
+    /**
+     * @notice Renders the keyboard based on the current mode (default, shift,
+     * or special).
+     * @dev Dynamically creates HTML for keyboard keys and appends them to the
+     * keyboardElement.
+     */
+    private renderKeyboard() {
+        // Clear existing keys
+        this.keyboardElement.innerHTML = '';
+        this.keys[this.currentMode].forEach(row => {
+            const rowElement = document.createElement('div');
+            row.forEach(key => {
+                const keyElement = document.createElement('div');
+                keyElement.textContent = key;
+                // Assign a class for easier CSS styling
+                keyElement.className = 'key';
+                keyElement.addEventListener(
+                    'click', () => this.handleKeyPress(key)
+                );
+                rowElement.appendChild(keyElement);
+            });
+            this.keyboardElement.appendChild(rowElement);
+        });
+    }
+
+    /**
+     * @notice Handles key presses on the virtual keyboard.
+     * @param key The key character or function (like 'Backspace') that was
+     * pressed.
+     */
+    private handleKeyPress(key: string) {
+        if (key === 'Backspace') {
+            this.inputElement.value = this.inputElement.value.slice(0, -1);
+        } else if (key === 'Shift' || key === 'CapsLock') {
+            this.toggleShift();
+        } else {
+            this.inputElement.value += key;
+        }
+    }
+
+    /**
+     * @notice Toggles the keyboard between 'default' and 'shift' modes.
+     * @dev This method is called when the 'Shift' or 'CapsLock' key is pressed.
+     */
+    private toggleShift() {
+        this.currentMode = this.currentMode === 'default' ? 'shift' : 'default';
+        this.renderKeyboard();
+    }
+
+    /**
+     * @notice Attaches necessary event listeners to handle both physical
+     * keyboard and touch inputs.
+     */
+    private attachEventListeners() {
+        document.addEventListener('keydown', this.handlePhysicalKeyPress);
+        this.keyboardElement.addEventListener(
+            'touchstart', this.handleTouchStart, false
+        );
+    }
+
+    /**
+     * @notice Handles physical keyboard events and maps them to virtual key
+     * presses.
+     * @param event The keyboard event captured from the user's physical
+     * keyboard.
+     */
+    private handlePhysicalKeyPress = (event: KeyboardEvent) => {
+        const key = event.key;
+        if (key === 'Shift' || key === 'CapsLock') {
+            this.toggleShift();
+            event.preventDefault();
+        } else if (key === 'Enter' || key === 'Tab') {
+            // Optional: Implement behavior for Enter and Tab if needed
+        } else {
+            this.handleKeyPress(key);
+        }
+    };
+
+    /**
+     * @notice Handles touch events on the keyboard element.
+     * @param event The touch event on the virtual keyboard.
+     */
+    private handleTouchStart = (event: TouchEvent) => {
+        event.preventDefault(); // Prevents emulating mouse events
+        const keyElement = event.target as HTMLElement;
+        if (keyElement.classList.contains('key')) {
+            this.handleKeyPress(keyElement.textContent || '');
+        }
+    };
+
+    /**
+     * @notice Switches the keyboard layout to a specified mode.
+     * @param mode The mode to which the keyboard layout should switch
+     * ('default', 'shift', or 'special').
+     */
+    public switchMode(mode: string) {
+        if (this.keys[mode]) {
+            this.currentMode = mode;
+            this.renderKeyboard();
+        }
+    }
+}
+
+// Example usage:
+const keyboard = new VirtualKeyboard('textInput', 'keyboard');
+document.getElementById(
+    'switchToSpecial'
+).addEventListener('click', () => keyboard.switchMode('special'));

package/ts/RealTimeCollaboration.ts

@@ -0,0 +1,25 @@
+/**
+ * @title Real-Time Collaboration Handler
+ * @notice Facilitates real-time interaction and collaboration in virtual environments.
+ * @dev Leverages WebSockets or WebRTC to synchronize user activities across different sessions.
+ */
+ class RealTimeCollaborationHandler {
+    private socket: WebSocket;
+
+    constructor(serverUrl: string) {
+        this.socket = new WebSocket(serverUrl);
+        this.socket.onmessage = this.handleMessage;
+        this.socket.onopen = () => console.log("Connection established for real-time collaboration.");
+    }
+
+    private handleMessage = (message: MessageEvent) => {
+        const data = JSON.parse(message.data);
+        console.log("Received data for collaboration:", data);
+        // Process and apply data to the collaborative environment
+    }
+
+    public sendUpdate(data: object) {
+        this.socket.send(JSON.stringify(data));
+        console.log("Sent update:", data);
+    }
+}

package/ts/Screensaver.ts

@@ -0,0 +1,140 @@
+// Copyright 2024 Scape Agency BV
+
+
+/**
+ * @title Screensaver Class
+ * @notice Handles the activation and deactivation of a screensaver based on
+ * user inactivity.
+ * @dev This class provides methods to start and stop the screensaver, manage
+ * media sources, and handle user interactions.
+ */
+ class Screensaver {
+
+    private timeoutId: number | undefined;
+    private readonly timeout: number;
+    private screensaverElement: HTMLElement | undefined;
+    private videoElement: HTMLVideoElement | undefined;
+    private audioElement: HTMLAudioElement | undefined;
+    private isActive: boolean = false;
+
+    /**
+     * @notice Initializes a new Screensaver instance.
+     * @param timeout The inactivity timeout in milliseconds after which the
+     * screensaver activates.
+     * @param videoUrl The URL for the video to be played when the screensaver
+     * activates.
+     * @param audioUrl The URL for the audio to be played when the screensaver
+     * activates.
+     */
+    constructor(timeout: number, videoUrl: string, audioUrl: string) {
+        this.timeout = timeout;
+        this.initializeElements();
+        this.loadMedia(videoUrl, audioUrl);
+        this.setupEventListeners();
+    }
+
+    /**
+     * @notice Initializes HTML elements from the DOM.
+     * @dev Queries the DOM to get the screensaver, video, and audio elements
+     * by their IDs.
+     */
+    private initializeElements() {
+        this.screensaverElement = document.getElementById("screensaver")!;
+        this.videoElement = document.getElementById(
+            "screensaverVideo"
+        ) as HTMLVideoElement;
+        this.audioElement = document.getElementById(
+            "screensaverAudio"
+        ) as HTMLAudioElement;
+    }
+
+    /**
+     * @notice Loads media sources into the video and audio elements.
+     * @param videoUrl The source URL of the video.
+     * @param audioUrl The source URL of the audio.
+     */
+    private loadMedia(videoUrl: string, audioUrl: string) {
+        this.videoElement.src = videoUrl;
+        this.audioElement.src = audioUrl;
+    }
+
+    /**
+     * @notice Sets up event listeners for user interaction to prevent
+     * screensaver activation.
+     * @dev Listens for 'mousemove', 'keydown', and 'touchstart' events
+     * to reset the screensaver timer.
+     */
+    private setupEventListeners() {
+        ['mousemove', 'keydown', 'touchstart'].forEach(event => {
+            document.addEventListener(event, this.resetScreensaver);
+        });
+    }
+
+    /**
+     * @notice Starts or restarts the screensaver timeout.
+     * @dev Resets any existing timeout and sets a new timeout to activate
+     * the screensaver.
+     */
+    private startScreensaverTimeout() {
+        this.stopScreensaver(); // Stop existing screensaver if active
+        this.timeoutId = window.setTimeout(
+            () => this.activateScreensaver(), this.timeout
+        );
+    }
+
+    /**
+     * @notice Resets the screensaver timer and stops the screensaver if
+     * active.
+     * @dev Called upon user interactions detected by event listeners.
+     */
+    private resetScreensaver = () => {
+        if (this.isActive) {
+            this.stopScreensaver();
+        }
+        this.startScreensaverTimeout();
+    };
+
+    /**
+     * @notice Activates the screensaver, displaying elements and playing media.
+     */
+    private activateScreensaver = () => {
+        this.screensaverElement.style.display = 'block';
+        this.videoElement.play();
+        this.audioElement.play();
+        this.isActive = true;
+    };
+
+    /**
+     * @notice Stops the screensaver and hides its elements.
+     * @dev Pauses media playback and clears the activation timeout.
+     */
+    private stopScreensaver() {
+        this.screensaverElement.style.display = 'none';
+        this.videoElement.pause();
+        this.audioElement.pause();
+        this.isActive = false;
+
+        if (this.timeoutId !== undefined) {
+            clearTimeout(this.timeoutId);
+            this.timeoutId = undefined;
+        }
+    }
+
+    /**
+     * @notice Sets the volume for both video and audio elements of the
+     * screensaver.
+     * @param volume A number between 0.0 and 1.0 indicating the volume level.
+     */
+    public setVolume(volume: number) {
+        this.videoElement.volume = volume;
+        this.audioElement.volume = volume;
+    }
+}
+
+// Example usage:
+const screensaver = new Screensaver(
+    300000,
+    'path/to/video.mp4',
+    'path/to/audio.mp3'
+); // Initialize the screensaver with a 5-minute timeout
+screensaver.setVolume(0.5); // Set initial volume to 50%

package/ts/SpatialNavigation.ts

@@ -0,0 +1,38 @@
+/**
+ * @title Spatial Navigation Handler
+ * @notice Provides navigation controls for moving through a 3D space or virtual environments.
+ * @dev Supports both keyboard and other input methods for movement and rotation in a 3D space.
+ */
+ class SpatialNavigationHandler {
+    private position: { x: number; y: number; z: number } = { x: 0, y: 0, z: 0 };
+    private rotation: { yaw: number; pitch: number; roll: number } = { yaw: 0, pitch: 0, roll: 0 };
+
+    constructor() {
+        document.addEventListener('keydown', this.handleKeyInput);
+    }
+
+    private handleKeyInput = (event: KeyboardEvent) => {
+        switch(event.key) {
+            case 'ArrowUp':
+                this.position.y += 1; // Move up
+                break;
+            case 'ArrowDown':
+                this.position.y -= 1; // Move down
+                break;
+            case 'ArrowLeft':
+                this.rotation.yaw -= 5; // Turn left
+                break;
+            case 'ArrowRight':
+                this.rotation.yaw += 5; // Turn right
+                break;
+            case 'w':
+                this.position.z += 1; // Move forward
+                break;
+            case 's':
+                this.position.z -= 1; // Move backward
+                break;
+            // Add more controls as needed
+        }
+        console.log(`Position: (${this.position.x}, ${this.position.y}, ${this.position.z}), Rotation: (${this.rotation.yaw}, ${this.rotation.pitch}, ${this.rotation.roll})`);
+    };
+}

package/ts/UserProfile.ts

@@ -0,0 +1,27 @@
+/**
+ * @title User Profile and Preferences Handler
+ * @notice Manages user-specific settings and preferences for an immersive web application.
+ * @dev Stores and retrieves user preferences from local storage or a remote database.
+ */
+ class UserProfileHandler {
+    private preferences: Map<string, any> = new Map();
+
+    constructor() {
+        this.loadPreferences();
+    }
+
+    private loadPreferences() {
+        console.log("Loading user preferences...");
+        // Load preferences from local storage or a database.
+    }
+
+    public setPreference(key: string, value: any) {
+        this.preferences.set(key, value);
+        console.log(`Preference ${key} set to`, value);
+        // Optionally save to local storage or update the database.
+    }
+
+    public getPreference(key: string) {
+        return this.preferences.get(key);
+    }
+}

package/ts/VRExperience.ts

@@ -0,0 +1,58 @@
+/**
+ * @title VR Experience Handler
+ * @notice Manages Virtual Reality scenes and interactions using WebXR.
+ * @dev Provides an easy interface to setup, control, and interact with VR content.
+ */
+ class VRExperienceHandler {
+    private xrSession: XRSession | null = null;
+
+    constructor(private container: HTMLElement) {
+        if ('xr' in navigator) {
+            this.initVR();
+        } else {
+            console.error("WebXR not available.");
+        }
+    }
+
+    private async initVR() {
+        try {
+            this.xrSession = await navigator.xr.requestSession('immersive-vr', {
+                optionalFeatures: ['local-floor', 'bounded-floor']
+            });
+            this.xrSession.addEventListener('end', this.onSessionEnded);
+            this.setupXRWebGLLayer();
+        } catch (error) {
+            console.error("Failed to create XR Session: ", error);
+        }
+    }
+
+    private setupXRWebGLLayer() {
+        const gl = this.container.querySelector('canvas')!.getContext('webgl2')!;
+        this.xrSession!.updateRenderState({
+            baseLayer: new XRWebGLLayer(this.xrSession, gl)
+        });
+    }
+
+    private onSessionEnded = () => {
+        console.log("VR session ended.");
+        this.xrSession = null;
+    }
+
+    public startRendering() {
+        if (!this.xrSession) {
+            console.error("XR Session is not initialized.");
+            return;
+        }
+
+        this.xrSession.requestAnimationFrame((time, frame) => this.renderFrame(time, frame));
+    }
+
+    private renderFrame(time: DOMHighResTimeStamp, frame: XRFrame) {
+        const session = frame.session;
+        const pose = frame.getViewerPose(xrReferenceSpace);
+
+        if (pose) {
+            // Update your scene's rendering based on user's position
+        }
+    }
+}

package/ts/VideoOverlay.ts

@@ -0,0 +1,116 @@
+// Copyright 2024 Scape Agency BV
+
+/**
+ * @title Transparent Video Overlay Handler
+ * @notice Manages a transparent video overlay, controlling its visibility,
+ * playback, and effects.
+ * @dev Provides methods to show, hide, toggle, and dynamically change the
+ * video source with visual effects.
+ */
+ class TransparentVideoOverlay {
+    private videoElement: HTMLVideoElement;
+    private isVisible: boolean = false;
+
+    constructor(videoElementId: string) {
+        this.videoElement = document.getElementById(
+            videoElementId
+        ) as HTMLVideoElement;
+        this.setupVideo();
+    }
+
+    /**
+     * @notice Initializes video settings and event listeners for enhanced
+     * control.
+     */
+    private setupVideo() {
+        this.videoElement.addEventListener(
+            "ended", () => this.videoElement.play()
+        ); // Ensure looping
+        this.videoElement.addEventListener("loadeddata", () => {
+            console.log("Video loaded successfully.");
+        });
+        this.videoElement.addEventListener("error", (e) => {
+            console.error("Error loading video:", e);
+        });
+    }
+
+    /**
+     * @notice Shows the video overlay with a fade-in effect.
+     * @dev Uses CSS transitions to create a fade-in effect.
+     */
+    public showOverlay() {
+        this.videoElement.style.display = "block";
+        this.videoElement.style.opacity = "0";
+        setTimeout(() => {
+            this.videoElement.style.opacity = "1";
+            this.videoElement.play();
+        }, 10); // Timeout to ensure CSS transition takes place
+        this.isVisible = true;
+    }
+
+    /**
+     * @notice Hides the video overlay with a fade-out effect.
+     * @dev Uses CSS transitions to create a fade-out effect before pausing
+     * and hiding the video.
+     */
+    public hideOverlay() {
+        this.videoElement.style.opacity = "0";
+        setTimeout(() => {
+            this.videoElement.style.display = "none";
+            this.videoElement.pause();
+        }, 500); // Match timeout to CSS transition duration
+        this.isVisible = false;
+    }
+
+    /**
+     * @notice Toggles the visibility of the video overlay with effects.
+     */
+    public toggleOverlay() {
+        if (this.isVisible) {
+            this.hideOverlay();
+        } else {
+            this.showOverlay();
+        }
+    }
+
+    /**
+     * @notice Changes the video source and optionally plays it immediately.
+     * @param videoUrl The URL of the new video source.
+     * @param autoPlay Determines if the video should play immediately after
+     * loading.
+     */
+    public changeVideoSource(videoUrl: string, autoPlay: boolean = true) {
+        this.videoElement.src = videoUrl;
+        this.videoElement.load(); // Reload video to apply new source
+        if (autoPlay) {
+            this.showOverlay();
+        }
+    }
+}
+
+// Example usage:
+const videoOverlay = new TransparentVideoOverlay("videoOverlay");
+videoOverlay.showOverlay(); // Show the overlay with fade-in effect
+
+
+
+
+
+
+
+function supportsHEVCAlpha() {
+    const navigator = window.navigator;
+    const ua = navigator.userAgent.toLowerCase()
+    const hasMediaCapabilities = !!(navigator.mediaCapabilities && navigator.mediaCapabilities.decodingInfo)
+    const isSafari = ((ua.indexOf("safari") != -1) && (!(ua.indexOf("chrome")!= -1) && (ua.indexOf("version/")!= -1)))
+    return isSafari && hasMediaCapabilities
+}
+
+// Here’s an example of how this comes together in HTML:
+
+<video id="player" loop muted autoplay playsinline></video>
+
+<script>
+const player = document.getElementById("player");
+player.src = supportsHEVCAlpha() ? "output.mov" : "output.webm";
+</script>