Use bind:this for playerElement to avoid easy breaking

materialious/src/lib/components/layout/ItemsList.svelte

@@ -82,7 +82,7 @@
 				<article
 					{...mergeAttrs(spatialItem.attrs, {
 						onclick: () => goToItem(uniqueItemId),
-						id: `item-${index}`
+						id: uniqueItemId
 					})}
 					class="no-padding item-select border"
 					class:item-select-focused={spatialItem.highlighted}

materialious/src/lib/components/player/Player.svelte

@@ -436,7 +436,6 @@
 				}
 			}
 		});
-		playerElement = document.getElementById('player') as HTMLMediaElement;
 
 		playerElement.loop = $playerAlwaysLoopStore;
 
@@ -839,7 +838,7 @@
 	<video
 		controls={false}
 		autoplay={$playerAutoPlayStore}
-		id="player"
+		bind:this={playerElement}
 		poster={getBestThumbnail(data.video.videoThumbnails, 9999, 9999)}
 	></video>
 	{#if isEmbed && !$isAndroidTvStore}

materialious/src/lib/components/settings/Settings.svelte

@@ -150,7 +150,7 @@
 							class:active={isActive(tab.id)}
 							class:surface-container-lowest={isActive(tab.id)}
 							class:surface-container-highest={!isActive(tab.id)}
-							{...mergeAttrs(tabCategories.getTrigger(tab.id), { id: tab.id })}
+							{...tabCategories.getTrigger(tab.id)}
 						>
 							<i>{tab.icon}</i>
 							<span>{tab.label}</span>

materialious/src/routes/(app)/+layout.svelte

@@ -382,9 +382,7 @@
 		{#if $navigating}
 			<PageLoading />
 		{:else}
-			<div tabindex="0">
-				{@render children?.()}
-			</div>
+			{@render children?.()}
 		{/if}
 
 		<SyncParty />