From 3dec3ab12b3096fbf8ff1bf8cfe84f0c72648ac7 Mon Sep 17 00:00:00 2001
From: Vanilagy <1696106+Vanilagy@users.noreply.github.com>
Date: Sat, 30 Aug 2025 17:50:53 +0200
Subject: [PATCH] Add loading element to media player

---
 examples/media-player/index.html      | 1 +
 examples/media-player/media-player.ts | 4 ++++
 2 files changed, 5 insertions(+)

diff --git a/examples/media-player/index.html b/examples/media-player/index.html
index 6a02964..5952604 100644
--- a/examples/media-player/index.html
+++ b/examples/media-player/index.html
@@ -37,6 +37,7 @@
 
 		<p id="error-element" class="text-red-500"></p>
 		<p id="warning-element" class="text-amber-500 mb-1"></p>
+		<p id="loading-element" class="text-sm animate-pulse text-zinc-500" style="display: none;">Loading...</p>
 
 		<div id="player" class="relative bg-black rounded-xl shrink min-h-14 min-w-0 w-full max-w-5xl overflow-hidden select-none" style="display: none;">
 			<canvas class="size-full object-contain" width="1280" height="720"></canvas>
diff --git a/examples/media-player/media-player.ts b/examples/media-player/media-player.ts
index 6a676ee..7e204fe 100644
--- a/examples/media-player/media-player.ts
+++ b/examples/media-player/media-player.ts
@@ -16,6 +16,7 @@ const selectMediaButton = document.querySelector('#select-file') as HTMLButtonEl
 const loadUrlButton = document.querySelector('#load-url') as HTMLButtonElement;
 const fileNameElement = document.querySelector('#file-name') as HTMLParagraphElement;
 const horizontalRule = document.querySelector('hr') as HTMLHRElement;
+const loadingElement = document.querySelector('#loading-element') as HTMLParagraphElement;
 const playerContainer = document.querySelector('#player') as HTMLDivElement;
 const canvas = document.querySelector('canvas') as HTMLCanvasElement;
 const controlsElement = document.querySelector('#controls') as HTMLDivElement;
@@ -83,6 +84,7 @@ const initMediaPlayer = async (resource: File | string) => {
 		fileLoaded = false;
 		fileNameElement.textContent = resource instanceof File ? resource.name : resource;
 		horizontalRule.style.display = '';
+		loadingElement.style.display = '';
 		playerContainer.style.display = 'none';
 		errorElement.textContent = '';
 		warningElement.textContent = '';
@@ -183,6 +185,7 @@ const initMediaPlayer = async (resource: File | string) => {
 			await play();
 		}
 
+		loadingElement.style.display = 'none';
 		playerContainer.style.display = '';
 
 		if (!videoSink) {
@@ -194,6 +197,7 @@ const initMediaPlayer = async (resource: File | string) => {
 		console.error(error);
 
 		errorElement.textContent = String(error);
+		loadingElement.style.display = 'none';
 		playerContainer.style.display = 'none';
 	}
 };