added image support

tests/media-adapter.test.mjs

@@ -2,9 +2,19 @@ import test from 'node:test';
 import assert from 'node:assert/strict';
 import {
 	createMediaAdapter,
+	ImageMediaAdapter,
 	VideoMediaAdapter
 } from '../vr180player/media/media-adapter.js';
 
+function createClassList() {
+	return {
+		values: [],
+		add(...values) {
+			this.values.push(...values);
+		}
+	};
+}
+
 function createVideo({
 	ended = false,
 	paused = false,
@@ -12,16 +22,15 @@ function createVideo({
 	title = ''
 } = {}) {
 	return {
-		classList: {
-			values: [],
-			add(value) {
-				this.values.push(value);
-			}
-		},
+		HAVE_METADATA: 1,
+		classList: createClassList(),
 		ended,
 		loadCount: 0,
 		paused,
+		readyState: 0,
 		style: { display: '' },
+		tagName: 'VIDEO',
+		addEventListener() {},
 		getAttribute(name) {
 			return name === 'title' ? title : '';
 		},
@@ -38,6 +47,31 @@ function createVideo({
 	};
 }
 
+function createImage({
+	alt = '',
+	complete = true,
+	naturalWidth = 1920,
+	source = 'https://cdn.example.com/images/demo-image.png',
+	title = ''
+} = {}) {
+	return {
+		alt,
+		classList: createClassList(),
+		complete,
+		currentSrc: source,
+		naturalWidth,
+		src: source,
+		style: { display: '' },
+		tagName: 'IMG',
+		addEventListener() {},
+		getAttribute(name) {
+			if (name === 'title') return title;
+			if (name === 'alt') return alt;
+			return '';
+		}
+	};
+}
+
 test('VideoMediaAdapter exposes video capabilities and lifecycle helpers', () => {
 	const video = createVideo({ title: 'Demo Title' });
 	const adapter = new VideoMediaAdapter(video);
@@ -77,11 +111,51 @@ test('VideoMediaAdapter falls back to source filename and tracks texture update
 	assert.equal(adapter.shouldUpdateTexture(), false);
 });
 
+test('ImageMediaAdapter exposes static image capabilities and lifecycle helpers', async () => {
+	const image = createImage({ alt: 'Alt Title' });
+	const adapter = new ImageMediaAdapter(image);
+	let readyCount = 0;
+
+	adapter.bindLoadState({
+		onError: () => {},
+		onReady: () => {
+			readyCount += 1;
+		}
+	});
+
+	await new Promise((resolve) => setImmediate(resolve));
+
+	assert.deepEqual(adapter.capabilities, {
+		audio: false,
+		dynamicTexture: false,
+		playback: false,
+		timeline: false
+	});
+	assert.equal(adapter.element, image);
+	assert.equal(adapter.textureSource, image);
+	assert.equal(adapter.getTitle(), 'Alt Title');
+	assert.equal(adapter.shouldUpdateTexture(), false);
+	assert.equal(readyCount, 1);
+
+	adapter.hideElement();
+	assert.equal(image.style.display, 'none');
+
+	adapter.showElement();
+	assert.equal(image.style.display, '');
+});
+
+test('ImageMediaAdapter falls back to source filename', () => {
+	const image = createImage({ alt: '', source: 'https://cdn.example.com/media/static-sbs-demo.png' });
+	const adapter = new ImageMediaAdapter(image);
+
+	assert.equal(adapter.getTitle(), 'static sbs demo');
+});
+
 test('createMediaAdapter finds and marks the supported video element', () => {
 	const video = createVideo();
 	const playerContainer = {
-		querySelector(selector) {
-			return selector === 'video' ? video : null;
+		querySelectorAll(selector) {
+			return selector === 'video,img' ? [video] : [];
 		}
 	};
 
@@ -89,5 +163,28 @@ test('createMediaAdapter finds and marks the supported video element', () => {
 
 	assert.ok(adapter instanceof VideoMediaAdapter);
 	assert.equal(adapter.element, video);
-	assert.deepEqual(video.classList.values, ['vrwp-video']);
+	assert.deepEqual(video.classList.values, ['vrwp-media', 'vrwp-video']);
+});
+
+test('createMediaAdapter finds and marks the supported image element', () => {
+	const image = createImage();
+	const playerContainer = {
+		querySelectorAll(selector) {
+			return selector === 'video,img' ? [image] : [];
+		}
+	};
+
+	const adapter = createMediaAdapter(playerContainer);
+
+	assert.ok(adapter instanceof ImageMediaAdapter);
+	assert.equal(adapter.element, image);
+	assert.deepEqual(image.classList.values, ['vrwp-media', 'vrwp-image']);
+});
+
+test('createMediaAdapter refuses missing or ambiguous media elements', () => {
+	const video = createVideo();
+	const image = createImage();
+
+	assert.equal(createMediaAdapter({ querySelectorAll: () => [] }), null);
+	assert.equal(createMediaAdapter({ querySelectorAll: () => [video, image] }), null);
 });