@viostream/viostream-player-svelte 0.2.8 → 0.2.9

package/dist/ViostreamPlayer.svelte

@@ -93,13 +93,11 @@
 
 	// Internal state
 	let containerEl: HTMLDivElement | undefined = $state();
+	let embedTargetEl: HTMLDivElement | undefined = $state();
 	let player: ViostreamPlayer | undefined = $state();
 	let errorMsg: string | undefined = $state();
 	let isLoading = $state(true);
 
-	// Unique ID for the container
-	const containerId = `viostream-player-${Math.random().toString(36).slice(2, 10)}`;
-
 	// Build the embed options object from props
 	function buildEmbedOptions(): ViostreamEmbedOptions {
 		const opts: ViostreamEmbedOptions = {};
@@ -137,7 +135,17 @@
 	];
 
 	onMount(() => {
-		debug('onMount publicKey=%s accountKey=%s containerId=%s', publicKey, accountKey, containerId);
+		// Generate unique IDs on the client only and assign them imperatively
+		// to the DOM elements. This avoids SSR/hydration mismatches caused by
+		// Math.random() producing different values on server vs client.
+		const containerId = `viostream-player-${Math.random().toString(36).slice(2, 10)}`;
+		const embedTargetId = `viostream-embed-${Math.random().toString(36).slice(2, 10)}`;
+
+		containerEl!.id = containerId;
+		containerEl!.setAttribute('data-viostream-sdk', `${SDK_NAME}@${SDK_VERSION}`);
+		embedTargetEl!.id = embedTargetId;
+
+		debug('onMount publicKey=%s accountKey=%s containerId=%s embedTargetId=%s', publicKey, accountKey, containerId, embedTargetId);
 
 		let destroyed = false;
 
@@ -152,12 +160,12 @@
 				}
 
 				const embedOpts = buildEmbedOptions();
-				debug('init: calling api.embed publicKey=%s containerId=%s options=%o', publicKey, containerId, embedOpts);
-				const raw: RawViostreamPlayerInstance = api.embed(publicKey, containerId, embedOpts, normalizeForceAspectRatio(forceAspectRatio));
+				debug('init: calling api.embed publicKey=%s embedTargetId=%s options=%o', publicKey, embedTargetId, embedOpts);
+				const raw: RawViostreamPlayerInstance = api.embed(publicKey, embedTargetId, embedOpts, normalizeForceAspectRatio(forceAspectRatio));
 				debug('init: api.embed returned raw player');
 
-				const wrappedPlayer = wrapRawPlayer(raw, containerId);
-				debug('init: wrapRawPlayer completed containerId=%s', containerId);
+				const wrappedPlayer = wrapRawPlayer(raw, embedTargetId);
+				debug('init: wrapRawPlayer completed embedTargetId=%s', embedTargetId);
 
 				if (destroyed) {
 					debug('init: stale closure detected after wrapRawPlayer — destroying and aborting publicKey=%s', publicKey);
@@ -230,13 +238,13 @@
 </script>
 
 <div
-	id={containerId}
 	class={className}
 	bind:this={containerEl}
 	data-viostream-player
 	data-viostream-public-key={publicKey}
-	data-viostream-sdk={`${SDK_NAME}@${SDK_VERSION}`}
 >
+	<div bind:this={embedTargetEl} data-viostream-embed-target></div>
+
 	{#if isLoading}
 		{#if loadingSnippet}
 			{@render loadingSnippet()}

package/dist/version.d.ts

@@ -1,2 +1,2 @@
 export declare const SDK_NAME = "viostream-player-svelte";
-export declare const SDK_VERSION = "0.2.8";
+export declare const SDK_VERSION = "0.2.9";

package/dist/version.js

@@ -1,3 +1,3 @@
 // Auto-generated by scripts/sync-version.mjs — do not edit
 export const SDK_NAME = 'viostream-player-svelte';
-export const SDK_VERSION = '0.2.8';
+export const SDK_VERSION = '0.2.9';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viostream/viostream-player-svelte",
-  "version": "0.2.8",
+  "version": "0.2.9",
   "description": "Svelte 5 SDK for the Viostream video player — embed, control, and listen to player events",
   "license": "MIT",
   "publishConfig": {
@@ -31,7 +31,7 @@
     "!dist/**/*.spec.*"
   ],
   "dependencies": {
-    "@viostream/viostream-player-core": "^0.2.8",
+    "@viostream/viostream-player-core": "^0.2.9",
     "debug": "^4.4.3"
   },
   "peerDependencies": {