mediacms/frontend-tools/video-js/src/utils/OrientationHandler.js

export class OrientationHandler {
    constructor(player, isTouchDevice) {
        this.player = player;
        this.isTouchDevice = isTouchDevice;
        this.orientationChangeHandler = null;
        this.screenOrientationHandler = null;
    }

    setupOrientationHandling() {
        // Only apply to mobile/touch devices
        if (!this.isTouchDevice) {
            return;
        }

        // Modern approach using Screen Orientation API
        if (screen.orientation) {
            this.screenOrientationHandler = () => {
                const type = screen.orientation.type;

                if (type.includes('landscape')) {
                    // Device rotated to landscape - enter fullscreen
                    if (!this.player.isFullscreen()) {
                        this.player.requestFullscreen();
                    }
                } else if (type.includes('portrait')) {
                    // Device rotated to portrait - exit fullscreen
                    if (this.player.isFullscreen()) {
                        this.player.exitFullscreen();
                    }
                }
            };

            screen.orientation.addEventListener('change', this.screenOrientationHandler);
        }
        // Fallback for older iOS devices
        else {
            this.orientationChangeHandler = () => {
                // window.orientation: 0 = portrait, 90/-90 = landscape
                const isLandscape = Math.abs(window.orientation) === 90;

                // Small delay to ensure orientation change is complete
                setTimeout(() => {
                    if (isLandscape && !this.player.isFullscreen()) {
                        this.player.requestFullscreen();
                    } else if (!isLandscape && this.player.isFullscreen()) {
                        this.player.exitFullscreen();
                    }
                }, 100);
            };

            window.addEventListener('orientationchange', this.orientationChangeHandler);
        }
    }

    cleanup() {
        // Remove event listeners
        if (this.screenOrientationHandler && screen.orientation) {
            screen.orientation.removeEventListener('change', this.screenOrientationHandler);
        }

        if (this.orientationChangeHandler) {
            window.removeEventListener('orientationchange', this.orientationChangeHandler);
        }
    }
}