Merge pull request #141 from WardPearce/update/pwa-share

Update/pwa share

.vscode/settings.json

@@ -8,5 +8,8 @@
         "materialious/src/lib/i18n/locales"
     ],
     "i18n-ally.extract.autoDetect": true,
-    "i18n-ally.keystyle": "nested"
+    "i18n-ally.keystyle": "nested",
+    "cSpell.words": [
+        "Materialious"
+    ]
 }

materialious/src/lib/Thumbnail.svelte

@@ -23,6 +23,8 @@
 	let videoPreviewMuted: boolean = true;
 	let videoPreviewVolume: number = 0.4;
 
+	let proxyVideos = get(playerProxyVideos);
+
 	let watchUrl = new URL(`${import.meta.env.VITE_DEFAULT_FRONTEND_URL}/watch/${video.videoId}`);
 
 	if (playlistId !== '') {
@@ -91,7 +93,8 @@
 							mockVideo.preload = 'auto';
 							mockVideo.id = 'video';
 							mockVideo.crossOrigin = import.meta.env.VITE_DEFAULT_FRONTEND_URL;
-							mockVideo.src = proxyVideoUrl((await getVideo(video.videoId)).formatStreams[0].url);
+							const videoToThumbnail = (await getVideo(video.videoId)).formatStreams[0].url;
+							mockVideo.src = proxyVideos ? proxyVideoUrl(videoToThumbnail) : videoToThumbnail;
 
 							mockVideo.addEventListener('loadeddata', () => {
 								mockVideo.currentTime = mockVideo.duration / 100;
@@ -150,7 +153,7 @@
 
 		showVideoPreview = true;
 		try {
-			videoPreview = await getVideo(video.videoId, get(playerProxyVideos));
+			videoPreview = await getVideo(video.videoId);
 			if (videoPreview.hlsUrl) {
 				showVideoPreview = false;
 				videoPreview = null;
@@ -195,7 +198,9 @@
 						muted={videoPreviewMuted}
 						controls={false}
 						volume={videoPreviewVolume}
-						src={videoPreview.formatStreams[0].url}
+						src={proxyVideos
+							? proxyVideoUrl(videoPreview.formatStreams[0].url)
+							: videoPreview.formatStreams[0].url}
 					>
 					</video>
 				</div>

materialious/src/routes/channel/[slug]/+page.svelte

@@ -103,6 +103,26 @@
 				{$_('unsubscribe')}
 			{/if}
 		</button>
+		<button class="border">
+			<i>share</i>
+			<span>{$_('player.share.title')}</span>
+			<menu class="no-wrap">
+				<a
+					href="#share"
+					on:click={async () => {
+						await navigator.clipboard.writeText(location.href);
+					}}>{$_('player.share.materialiousLink')}</a
+				>
+				<a
+					href="#share"
+					on:click={async () => {
+						await navigator.clipboard.writeText(
+							`https://www.youtube.com/channel/${data.channel.authorId}`
+						);
+					}}>{$_('player.share.youtubeLink')}</a
+				>
+			</menu>
+		</button>
 	</div>
 
 	<div class="tabs left-align scroll">

materialious/src/routes/playlist/[slug]/+page.svelte

@@ -72,6 +72,29 @@
 	<article style="max-height: 200px;" class="scroll no-padding no-elevate no-round">
 		<p style="white-space: pre-line;word-wrap: break-word;">{data.playlist.description}</p>
 	</article>
+
+	<div class="space"></div>
+
+	<button class="border no-margin">
+		<i>share</i>
+		<span>{$_('player.share.title')}</span>
+		<menu class="no-wrap">
+			<a
+				href="#share"
+				on:click={async () => {
+					await navigator.clipboard.writeText(location.href);
+				}}>{$_('player.share.materialiousLink')}</a
+			>
+			<a
+				href="#share"
+				on:click={async () => {
+					await navigator.clipboard.writeText(
+						`https://www.youtube.com/playlist?list=${data.playlist.playlistId}`
+					);
+				}}>{$_('player.share.youtubeLink')}</a
+			>
+		</menu>
+	</button>
 </article>
 
 {#if videos}

materialious/src/routes/watch/[slug]/+page.svelte

@@ -546,6 +546,14 @@
 						{/if}
 					{/if}
 				</div>
+
+				<nav class="scroll">
+					{#if data.video.keywords}
+						{#each data.video.keywords as keyword}
+							<a href={`/search/${encodeURIComponent(keyword)}`} class="chip">{keyword}</a>
+						{/each}
+					{/if}
+				</nav>
 			</details>
 		</article>
 

materialious/src/routes/watch/[slug]/+page.ts

@@ -20,7 +20,7 @@ export async function load({ params, url }) {
 		error(500, errorMessage);
 	}
 
-	let downloadOptions: { title: string; url: string }[] = [];
+	let downloadOptions: { title: string; url: string; }[] = [];
 
 	if (!video.hlsUrl) {
 		video.formatStreams.forEach((format) => {