Exit BP when navigating away

[quadsteel]

Hey there folks, I was wondering, how could I make so that if you navigate back while BP is open, that bp closes? As it is, it seems like sometimes it does close after a short delay, other times it doesn't, and some other times it doesn't && navigates to the next item. Now I'm not a developer, I'm actually an artist, so there's a good chance that closing is default behavior and I've somehow screwed it up or that it would be easy to implement and I just don't know how? I'm just feeling my way around in this. Anyway here's how I have the whole thing setup:

• .../[slug]/+page.svelte

<div class="md prose-img:mx-auto prose-img:my-2" use:biggerPicture>
    <svelte:component this={content} />
</div>

• imports and uses this

import type { BiggerPictureInstance } from 'bigger-picture';
import 'bigger-picture/css';

let bp: BiggerPictureInstance;

export async function biggerPicture(node: HTMLElement) {
	if (!bp) {
		const BiggerPicture = (await import('bigger-picture/svelte')).default;
		bp = BiggerPicture({
			target: document.body
		});
	}
	const items = node.querySelectorAll('a.light');
	for (let el of items) {
		el.addEventListener('click', (e: Event) => {
			e.preventDefault();
			bp.open({
				items,
				el,
				onOpen() {
					let video = document.body.querySelector('video');
					if (video) video.loop = true;
				}
			});
		});
	}
}

• and then in *.md I import another media component that just adds this

...
<a
	class="light flex justify-center items-center"
	class:vid={video}
	class:container={video}
	href={src}
	title={alt}
	style:--wi={`${thumbnailSize.w}px`}
	data-img={video ? undefined : src}
	data-sources={video ? `[{"src": "${src}", "type": "video/mp4"}]` : undefined}
	data-thumb={thumbnail}
	data-width={imageSize.w}
	data-height={imageSize.h}
	data-alt={alt}
	data-caption={caption ? alt : ''}
>
	{#if video}
		<span class="playIcon" />
	{/if}

	<img
		data-grid-lazy="true"
		src={thumbnail}
		{alt}
		width={thumbnailSize.w}
		height={thumbnailSize.h}
	/>
</a>

BiggerPicture works fine, I'm just not sure how to proceed here. I looked into sveltekit docs and found onNavigate and $navigation store which help tell when I'm navigating away and I guessed i could then call bp.close(). But where would I do that? I can access onNavigate etc. on the ts file where I load BP.

Of course I really don't know what I'm doing here so it might be better to ignore all above and just let me know, if you can help, can I somehow do this?

Thanks in advance.

[henrygd]

Sorry, just saw this and was able to reproduce the issue when hitting the back button with bigger-picture open.

I think the easiest fix is to return an object with a destroy method from your action which runs when the node is destroyed. In that destroy method we can destroy the bigger-picture instance. TS yells at you about $destroy because I haven't included it in the library type defs. But it's a native Svelte component api method so it will work fine as long as Svelte doesn't remove it.

export async function biggerPicture(node: HTMLElement) {
	...
	return {
		destroy() {
			// @ts-ignore
			bp?.$destroy()
			// @ts-ignore
			bp = undefined
		},
	}
}

Let me know if that doesn't work, I have a few other ideas. Also, you are a developer now.