From 2fc154f8a4b510597f8e94b7b55fceec53707f7c Mon Sep 17 00:00:00 2001
From: Yusuf Bera Ertan <y.bera003.06@protonmail.com>
Date: Tue, 9 May 2023 17:57:53 +0300
Subject: [PATCH] feat: add opengraph metadata

---
 .prettierignore                       |  2 ++
 src/routes/(app)/+layout.svelte       |  2 ++
 src/routes/share/[token]/+page.svelte | 20 ++++++++++++++++++++
 3 files changed, 24 insertions(+)

diff --git a/.prettierignore b/.prettierignore
index 3897265..7e5a62c 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -6,6 +6,8 @@ node_modules
 .env
 .env.*
 !.env.example
+/result
+/.direnv
 
 # Ignore files for PNPM, NPM and YARN
 pnpm-lock.yaml
diff --git a/src/routes/(app)/+layout.svelte b/src/routes/(app)/+layout.svelte
index 5bbd526..4c51811 100644
--- a/src/routes/(app)/+layout.svelte
+++ b/src/routes/(app)/+layout.svelte
@@ -78,6 +78,8 @@
 			message: `Fetched ${count} tracks`,
 			background: 'variant-filled-success'
 		});
+
+		comm.close();
 	});
 </script>
 
diff --git a/src/routes/share/[token]/+page.svelte b/src/routes/share/[token]/+page.svelte
index 2d45f74..b446c0d 100644
--- a/src/routes/share/[token]/+page.svelte
+++ b/src/routes/share/[token]/+page.svelte
@@ -13,6 +13,21 @@
 
 	export let data;
 
+	function getAlbumArtistInfo() {
+		const hasArtist = data.info.artist;
+		const hasAlbum = data.info.album;
+
+		if (hasArtist && hasAlbum) {
+			return `from ${data.info.album} by ${data.info.artist}`;
+		} else if (hasArtist) {
+			return `by ${data.info.artist}`;
+		} else if (hasAlbum) {
+			return `from ${data.info.album}`;
+		} else {
+			return '';
+		}
+	}
+
 	let showIcon = false;
 	let isError = false;
 
@@ -25,6 +40,10 @@
 
 <svelte:head>
 	<title>{data.info.title} {data.info.artist !== '' ? `- ${data.info.artist}` : ''}</title>
+	<meta property="og:title" content={data.info.title} />
+	<meta property="og:description" content={getAlbumArtistInfo()} />
+	<meta property="og:image" content={data.thumbnail_url} />
+	<meta property="og:audio" content={data.audio_url} />
 </svelte:head>
 
 <div
@@ -40,6 +59,7 @@
 		bind:paused
 		bind:currentTime
 		bind:duration
+		on:loadstart={(event) => event.currentTarget.play()}
 	/>
 	<button
 		class="relative rounded placeholder w-16 h-16"