added image support

src/vr180player/vr180-player.ts

@@ -11,7 +11,7 @@ import {
 	positionPlaneForPresentation as positionPlaneForPresentationCore,
 	showActiveContentMesh as showActiveContentMeshCore
 } from './rendering/projection.js';
-import { createVideoTexture as createVideoTextureCore } from './rendering/three-utils.js';
+import { createMediaTexture as createMediaTextureCore } from './rendering/three-utils.js';
 import { FallbackCameraControls } from './modes/fallback-camera-controls.js';
 import { MediaController } from './media/media-controller.js';
 import {
@@ -49,7 +49,7 @@ let frameCounter = 0;
 let isXrLoopActive = false;
 let vrControlPanel;
 let mediaController: MediaController | undefined;
-let textureManager: MediaTextureManager<HTMLVideoElement> | undefined;
+let textureManager: MediaTextureManager<HTMLImageElement | HTMLVideoElement> | undefined;
 let vrPanel: VrControlPanel | undefined;
 let twoDMode: TwoDMode | undefined;
 const vrPanelVisibility = new VrPanelVisibility();
@@ -62,7 +62,7 @@ bootstrapPlayer(_playerBase, (context) => {
 	playerContainer = context.playerContainer;
 	projectionMode = context.projectionMode;
 	mediaAdapter = context.mediaAdapter;
-	video = mediaAdapter.element;
+	video = mediaAdapter.kind === 'video' ? mediaAdapter.element : undefined;
 	playBtn = context.playButton;
 	init();
 });
@@ -84,9 +84,9 @@ function positionPlaneForPresentation(isFallback2D = false) {
 	positionPlaneForPresentationCore(planeMesh, camera2D, isFallback2D, PLANE_DISTANCE, PLANE_2D_DISTANCE);
 }
 
-function createVideoTexture() {
+function createMediaTexture() {
 	if (!textureManager) {
-		throw new Error('Video texture manager is not initialized.');
+		throw new Error('Media texture manager is not initialized.');
 	}
 	return textureManager.create();
 }
@@ -118,7 +118,7 @@ function restoreVideoTextureAfterContextRestored() {
 }
 
 function getMediaTitle() {
-	return mediaAdapter?.getTitle() || 'Video Title';
+	return mediaAdapter?.getTitle() || 'Media Title';
 }
 
 
@@ -136,18 +136,20 @@ function init() {
 			throw new Error('Media adapter is not initialized.');
 		}
 
-		video = mediaAdapter.element;
+		video = mediaAdapter.kind === 'video' ? mediaAdapter.element : undefined;
 		textureManager = new MediaTextureManager(
 			mediaAdapter.textureSource,
-			createVideoTextureCore,
+			createMediaTextureCore,
 			() => mediaAdapter?.shouldUpdateTexture() ?? false
 		);
-		mediaController = new MediaController({
-			is2DModeActive,
-			on2DPlaybackResume: show2DControlPanel,
-			playButton: playBtn,
-			video
-		});
+		mediaController = video
+			? new MediaController({
+				is2DModeActive,
+				on2DPlaybackResume: show2DControlPanel,
+				playButton: playBtn,
+				video
+			})
+			: undefined;
 		const contentScene = createContentScene(scene, projectionMode, (renderer, scene, activeCamera, geometry, material, group) => {
 			applySbsTextureWindow(renderer, activeCamera, material);
 		});
@@ -165,7 +167,7 @@ function init() {
 		});
 		twoDMode = new TwoDMode({
 			callbacks: {
-				createMediaTexture: createVideoTexture,
+				createMediaTexture,
 				forward: () => mediaController?.forward(),
 				positionPlaneForPresentation,
 				rewind: () => mediaController?.rewind(),
@@ -175,6 +177,7 @@ function init() {
 				togglePlayPause: () => mediaController?.togglePlayPause()
 			},
 			fullscreenTarget: playerContainer,
+			mediaCapabilities: mediaAdapter.capabilities,
 			getActiveContentMesh: () => activeContentMesh,
 			getCamera: () => camera2D,
 			getCameraControls: () => fallbackCameraControls,
@@ -194,7 +197,7 @@ function init() {
 	}
 
 	try { // Phase 2: VR Control Panel UI
-		vrPanel = createVrControlPanel(scene, getMediaTitle());
+		vrPanel = createVrControlPanel(scene, getMediaTitle(), mediaAdapter?.capabilities);
 		vrControlPanel = vrPanel.group;
 		vrPanelVisibility.setPanel(vrPanel);
 		uiElements.push(...vrPanel.interactables);
@@ -386,8 +389,7 @@ async function handleEnterVRButtonClick() {
 		return;
 	}
 	
-	// Hide the play button after click
-	mediaController?.hidePlayButton();
+	hideEnterButton();
 	
 	// Check if VR is supported
 	if (playBtn.dataset.xrSupported === "true") {
@@ -448,7 +450,7 @@ async function actualSessionToggle() {
 				throw new Error("VR mesh components not ready for texture.");
 			}
 			if (!textureManager) {
-				throw new Error("Video texture manager is not initialized.");
+				throw new Error("Media texture manager is not initialized.");
 			}
 			textureManager.assignToMaterial(sphereMaterial);
 			showActiveContentMesh();
@@ -491,6 +493,15 @@ async function actualSessionToggle() {
 	}
 }
 
+function hideEnterButton() {
+	if (mediaController) {
+		mediaController.hidePlayButton();
+		return;
+	}
+
+	playBtn?.classList.add('hidden');
+}
+
 function onVRSessionEnd(event) { 
 	const endedSession = event.session;