more refactor

src/vr180player/bootstrap.ts

@@ -0,0 +1,99 @@
+import {
+	DEFAULT_PROJECTION,
+	PLAYER_SELECTOR,
+	type ProjectionMode,
+	VALID_PROJECTIONS
+} from './config.js';
+import { create2DControlPanel, createPlayButton, injectPlayerStyles } from './dom/dom.js';
+
+export type BootstrapContext = {
+	playButton: HTMLButtonElement;
+	playerContainer: HTMLElement;
+	projectionMode: ProjectionMode;
+	videoElement: HTMLVideoElement;
+};
+
+export function bootstrapPlayer(playerBase: string, onReady: (context: BootstrapContext) => void): void {
+	injectPlayerStyles(playerBase);
+
+	onDocumentReady(() => {
+		const containers = document.querySelectorAll<HTMLElement>(PLAYER_SELECTOR);
+
+		if (containers.length === 0) {
+			console.error(`VR_WEB_PLAYER_DOM: Expected exactly one ${PLAYER_SELECTOR} container, found none.`);
+			return;
+		}
+
+		if (containers.length > 1) {
+			console.warn(`VR_WEB_PLAYER_DOM: This version supports exactly one ${PLAYER_SELECTOR} container per page. Found ${containers.length}; no player was initialized.`);
+			return;
+		}
+
+		const playerContainer = containers[0];
+		playerContainer.classList.add('vrwp');
+
+		const configuredProjection = (playerContainer.dataset.projection || DEFAULT_PROJECTION).trim().toLowerCase();
+		if (!VALID_PROJECTIONS.has(configuredProjection as ProjectionMode)) {
+			console.error(`VR_WEB_PLAYER_CONFIG: Unsupported data-projection="${configuredProjection}". Use "vr180" or "plane".`);
+			return;
+		}
+
+		const videoElement = playerContainer.querySelector('video');
+		if (!videoElement) {
+			console.error(`VR_WEB_PLAYER_DOM: ${PLAYER_SELECTOR} must contain a video element.`);
+			return;
+		}
+		videoElement.classList.add('vrwp-video');
+
+		const playButton = createPlayButton();
+		playerContainer.appendChild(playButton);
+		playerContainer.appendChild(create2DControlPanel());
+		playButton.disabled = true;
+		videoElement.load();
+
+		completeXrSupportCheck(playButton, () => {
+			onReady({
+				playButton,
+				playerContainer,
+				projectionMode: configuredProjection as ProjectionMode,
+				videoElement
+			});
+		});
+	});
+}
+
+function onDocumentReady(callback: () => void): void {
+	if (document.readyState === 'loading') {
+		document.addEventListener('DOMContentLoaded', callback, { once: true });
+		return;
+	}
+
+	callback();
+}
+
+function completeXrSupportCheck(playButton: HTMLButtonElement, onComplete: () => void): void {
+	if (!navigator.xr) {
+		markXrUnsupported(playButton);
+		onComplete();
+		return;
+	}
+
+	navigator.xr.isSessionSupported('immersive-vr').then((supported) => {
+		if (supported) {
+			playButton.dataset.xrSupported = 'true';
+		} else {
+			markXrUnsupported(playButton);
+		}
+
+		onComplete();
+	}).catch((err) => {
+		console.error('XR Support Check Error:', err);
+		markXrUnsupported(playButton);
+		onComplete();
+	});
+}
+
+function markXrUnsupported(playButton: HTMLButtonElement): void {
+	playButton.dataset.xrSupported = 'false';
+	playButton.disabled = false;
+}