more refactors

src/vr180player/modes/two-d-mode.ts

@@ -25,6 +25,7 @@ type TwoDModeOptions = {
 	getCamera: () => any;
 	getCameraControls: () => FallbackCameraControls | undefined;
 	getMaterial: () => any;
+	getMediaElement: () => HTMLElement | undefined;
 	getRenderer: () => any;
 	getScene: () => any;
 	getVideo: () => HTMLVideoElement | undefined;
@@ -43,6 +44,7 @@ export class TwoDMode {
 	private readonly getCamera: () => any;
 	private readonly getCameraControls: () => FallbackCameraControls | undefined;
 	private readonly getMaterial: () => any;
+	private readonly getMediaElement: () => HTMLElement | undefined;
 	private readonly getRenderer: () => any;
 	private readonly getScene: () => any;
 	private readonly getVideo: () => HTMLVideoElement | undefined;
@@ -57,6 +59,7 @@ export class TwoDMode {
 		this.getCamera = options.getCamera;
 		this.getCameraControls = options.getCameraControls;
 		this.getMaterial = options.getMaterial;
+		this.getMediaElement = options.getMediaElement;
 		this.getRenderer = options.getRenderer;
 		this.getScene = options.getScene;
 		this.getVideo = options.getVideo;
@@ -91,11 +94,11 @@ export class TwoDMode {
 	}
 
 	start(): void {
-		const video = this.getVideo();
+		const mediaElement = this.getMediaElement();
 		const renderer = this.getRenderer();
 		const camera = this.getCamera();
 
-		if (!video || !renderer || !camera) {
+		if (!mediaElement || !renderer || !camera) {
 			console.error("Required components not available for 2D mode");
 			return;
 		}
@@ -104,7 +107,7 @@ export class TwoDMode {
 		this.resizeCanvasFor2D(renderer, camera);
 
 		const canvas = showFallbackCanvas(renderer);
-		video.style.display = 'none';
+		mediaElement.style.display = 'none';
 
 		const mediaTexture = this.callbacks.createMediaTexture();
 		this.callbacks.positionPlaneForPresentation(this.projectionMode === 'plane');
@@ -139,9 +142,9 @@ export class TwoDMode {
 		this.getCameraControls()?.reset();
 		this.callbacks.positionPlaneForPresentation(false);
 
-		const video = this.getVideo();
-		if (video) {
-			video.style.display = '';
+		const mediaElement = this.getMediaElement();
+		if (mediaElement) {
+			mediaElement.style.display = '';
 		}
 	}