chore: updates styles and tests

libs/components/src/lib/video-player/README.md

@@ -19,7 +19,7 @@ A video source can be provided to the component using the `src` attribute.
 <style>
 	html { max-inline-size: 800px }
 </style>
-<vwc-video-player src="//d2zihajmogu5jn.cloudfront.net/elephantsdream/ed_hd.mp4">
+<vwc-video-player>
 </vwc-video-player>
 ```
 

libs/components/src/lib/video-player/video-player.spec.ts

@@ -72,13 +72,26 @@ describe('vwc-video-player', () => {
 	});
 
 	describe('src', () => {
+		describe('no src provided', async () => {
+			element = (await fixture(
+				`<${COMPONENT_TAG}></${COMPONENT_TAG}>`
+			)) as VideoPlayer;
+			await elementUpdated(element);
+			const noSrcErrorEl = element.shadowRoot!.getElementById('no-sources');
+			const dialogContentEl = getDialogContentEle();
+			expect(noSrcErrorEl?.classList.contains('vjs-hidden')).toBe(false);
+			expect(dialogContentEl!.textContent).toBe('No compatible source was found for this media.');
+		});
+
 		describe('invalid src', () => {
 			xit('should show the invalid src error message', async() => {
 				element = (await fixture(
 					`<${COMPONENT_TAG} src="invalid.xyz"></${COMPONENT_TAG}>`
 				)) as VideoPlayer;
 				await elementUpdated(element);
+				const noSrcErrorEl = element.shadowRoot!.getElementById('no-sources');
 				const dialogContentEl = getDialogContentEle();
+				expect(noSrcErrorEl?.classList.contains('vjs-hidden')).toBe(false);
 				expect(dialogContentEl!.textContent).toBe('No compatible source was found for this media.');
 			});
 		});
@@ -92,7 +105,7 @@ describe('vwc-video-player', () => {
 			expect(bigPlayBtn?.classList.contains('vjs-hidden')).toBe(false);
 		});
 
-		fit('should allow the src to be updated', async () => {
+		it('should allow the src to be updated', async () => {
 			element = (await fixture(
 				`<${COMPONENT_TAG} src="${VIDEO_SRC}"></${COMPONENT_TAG}>`
 			)) as VideoPlayer;

libs/components/src/lib/video-player/video-player.template.ts

@@ -22,6 +22,11 @@ export const VideoPlayerTemplate: (
 	// context: ElementDefinitionContext
 ) => html<VideoPlayer>`
 	<div class="${getClasses} video-js vjs-16-9 vjs-working-hover vjs-theme-vivid">
+		<div id="no-sources" class="vjs-error-display vjs-modal-dialog vjs-hidden">
+			<div class="vjs-modal-dialog-content" role="document">
+				${(x) => x.locale.videoPlayer['No compatible source was found for this media.']}
+			</div>
+		</div>
 		<slot></slot>
 	</div>
 `;

libs/components/src/lib/video-player/video-player.ts

@@ -49,8 +49,8 @@ export class VideoPlayer extends FoundationElement {
 	 * @internal
 	 */
 	srcChanged() {
-		if (this.player) {
-			this.initialiseVideo();
+		if (this.#player) {
+			this.#initVideo();
 		}
 	}
 
@@ -93,37 +93,45 @@ export class VideoPlayer extends FoundationElement {
 	/**
 	 * @internal
 	 */
-	player: any;
+	#player: any;
 
 	/**
 	 * @internal
 	 */
-	videoEle: any;
+	#videoEle: any;
 
 	override connectedCallback(): void {
 		super.connectedCallback();
 
-		this.initialiseVideo();
+		this.#initVideo();
 	}
 
 	override disconnectedCallback(): void {
 		super.connectedCallback();
-		if (this.player) {
-			this.player.dispose();
+		if (this.#player) {
+			this.#player.dispose();
 		}
 	}
 
 	/**
 	 * @internal
 	 */
-	getSettings() {
+	#getSources() {
 		const srcEles = this.querySelectorAll('source');
-		const sources = this.src 
+		if (srcEles.length === 0 && !this.src) return undefined;
+		return this.src 
 			? [{ src: this.src }]
 			: Array.from(srcEles).map((el) => ({
 				src: el.getAttribute('src'),
 				type: el.getAttribute('type'),
 			}));
+	}
+
+	/**
+	 * @internal
+	 */
+	#getSettings() {
+		const sources = this.#getSources();
 		const skipByValue = parseInt(this.skipBy);
 		const skipButtons = {
 			forward: skipByValue,
@@ -153,26 +161,30 @@ export class VideoPlayer extends FoundationElement {
 	/**
 	 * @internal
 	 */
-	initialiseVideo() {
-		const settings = this.getSettings();
-		if (this.player) this.player.dispose();
+	#initVideo() {
+		const settings = this.#getSettings();
+		if (this.#player) this.#player.dispose();
 
-		this.videoEle = document.createElement('video');
+		this.#videoEle = document.createElement('video');
 		const trackEles = this.querySelectorAll('track');
 		for(let x = 0; x < trackEles.length; x++) {
-			this.videoEle.appendChild(trackEles[x]);
+			this.#videoEle.appendChild(trackEles[x]);
 		}
-		if (this.loop) this.videoEle.setAttribute('loop', '');
-		if (this.autoplay) this.videoEle.setAttribute('autoplay', '');
+		if (this.loop) this.#videoEle.setAttribute('loop', '');
+		if (this.autoplay) this.#videoEle.setAttribute('autoplay', '');
 		const control = this.shadowRoot!.querySelector('.control');
-		control!.appendChild(this.videoEle);
 
-		this.player = videojs(this.videoEle, settings);
-		this.shadowRoot!.querySelector('[lang]')!.removeAttribute('lang'); // removes lang="current" from the component
-
-		this.player.on('play', () => this.$emit('play'));
-		this.player.on('pause', () => this.$emit('pause'));
-		this.player.on('ended', () => this.$emit('ended'));
+		if (settings.sources) {
+			control!.appendChild(this.#videoEle);
+			this.#player = videojs(this.#videoEle, settings);
+			this.shadowRoot!.querySelector('[lang]')!.removeAttribute('lang'); // removes lang="current" from the component
+
+			this.#player.on('play', () => this.$emit('play'));
+			this.#player.on('pause', () => this.$emit('pause'));
+			this.#player.on('ended', () => this.$emit('ended'));
+		} else {
+			this.shadowRoot!.getElementById('no-sources')?.classList.remove('vjs-hidden');
+		}
 	}
 }