Trouble iwth bind and reload Youtube element when state changes

[knuurr]

Describe the bug

I can't get Youtube element to load new id, when it is changed in variable.

To Reproduce

Here's the simple code for app I use. Basically it displays a text box, a button, and Youtube iframe within another div container.

If I hardcode movie ID manually everything looks ok and I can watch movie form input.

My desire is however that when user inputs link to their movie, or just ID, and either hits enter or clicks a button, the Youtube component will automatically start displaying that particular upload.

I wonder if it's related to component itself or more generally to how Svelte handles stuff, as I am not any Svelte, or even frontend, guru. Judging from sonsole input, ID is parsed properly from URL, and I assume set() method is called.

Any help would be appreciated. Thanks!

Also I'm really sorry if it's not really due to the nature of this project, and it would be just me not understanding managing state properly.

Nearly entire code

src/routes/+page.svelte

<script>
	// import { writable } from 'svelte/store';
	import { YouTube } from 'sveltekit-embed';
	import AddressBar from '../components/AddressBar.svelte';
	import { youTubeId } from '../stores/youTubeId';


<YouTube autoPlay={false} aspectRatio="4:3" youTubeId={$youTubeId} />

src/components/AddressBar.svelte

<script>
	import { onMount } from 'svelte';
	import { youTubeId } from '../stores/youTubeId';


	function parseYouTubeUrl(url) {
		const regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/;
		const match = url.match(regExp);

		let result = match && match[7].length === 11 ? match[7] : undefined;
		console.log('parseYouTubeUrl: ', result);
		return result;
	}

	function handleInputChange() {
		const inputValue = document.querySelector('.address-bar input').value;
		let parsedYouTubeId = parseYouTubeUrl(inputValue);

		if (!parsedYouTubeId) {
			console.error('Invalid YouTube URL or ID provided!');
			return;
		}

		youTubeId.set(parsedYouTubeId);
		console.log('youTubeId set to: ', parsedYouTubeId);
	}
	onMount(() => {
		console.log('AddressBar component mounted!');
	});
</script>

<div class="address-bar">
	<input type="text" class="flex-grow focus:outline-none" placeholder="Enter YouTube URL or ID" />
</div>
<button class="ml-2 px-2 py-1 bg-blue-500 text-white rounded" on:click={handleInputChange}
	>Parse</button
>

<style>
	/* Style your address bar here using Tailwind CSS classes */
	.address-bar {
		@apply flex items-center border rounded px-2 py-1;
	}
</style>

src/stores/youTubeId.js

import { writable } from 'svelte/store';

export const youTubeId = writable('');

[spences10]

Hi @knuurr thanks for creating the issue and using the package.

You'd probably need to destroy the YouTube component and reload it with the new ID is what I'm thinking without spending any time looking into this to be honest, I'll leave this open for next time I spend any time on this.

The intended use case for this is that it's essentially an embed and not dynamic, feel free to jack the code for the embed, it's essentially the iframe from the YouTube docs, here: https://developers.google.com/youtube/youtube_player_demo you can play around with that for what you need, I've also got an open issue to add some additional porps with #488

If you find the solution that could be added to the package in the meantime please feel free to open a PR for consideration.

[digitaldrreamer]

@knuurr
Will the #key block be useful for your case? To re-render the youtube embed?

{#key $youTubeId}
<YouTube autoPlay={false} aspectRatio="4:3" youTubeId={$youTubeId} />
{/key}

[knuurr]

Hi @digitaldrreamer @spences10 I apologize for late reply.

I put my side project aside but decided to get back to it.

Unfortunately I got stuck with other issue #795 so I cannot test your solution.