From 735386f5ecb887439f304f765912df05c2d91deb Mon Sep 17 00:00:00 2001
From: SnowCait <SnowCait@users.noreply.github.com>
Date: Mon, 3 Feb 2025 04:03:18 +0900
Subject: [PATCH] Niconico embedded player

---
 web/src/lib/Constants.ts                       |  1 +
 web/src/lib/components/Content.svelte          |  3 +++
 .../lib/components/content/Nicovideo.svelte    | 18 ++++++++++++++++++
 web/src/lib/components/content/Url.svelte      |  5 ++++-
 4 files changed, 26 insertions(+), 1 deletion(-)
 create mode 100644 web/src/lib/components/content/Nicovideo.svelte

diff --git a/web/src/lib/Constants.ts b/web/src/lib/Constants.ts
index cc810ae2..b22b82e3 100644
--- a/web/src/lib/Constants.ts
+++ b/web/src/lib/Constants.ts
@@ -15,6 +15,7 @@ export const timelineBufferMs = 1500;
 export const timeout = 5000;
 
 export const hashtagsRegexp = /(?<=^|\s)#(?<hashtag>[\p{Letter}\p{Number}_]+)/gu;
+export const nicovideoRegexp = /^https:\/\/(www|sp).nicovideo.jp\/watch\/(?<id>[a-zA-Z0-9]+)/;
 
 export const replaceableKinds = [
 	Kind.Metadata,
diff --git a/web/src/lib/components/Content.svelte b/web/src/lib/components/Content.svelte
index b73323a0..a935f8a4 100644
--- a/web/src/lib/components/Content.svelte
+++ b/web/src/lib/components/Content.svelte
@@ -11,6 +11,7 @@
 	import Ogp from './content/Ogp.svelte';
 	import { enablePreview } from '$lib/stores/Preference';
 	import { Twitter } from '$lib/Twitter';
+	import { nicovideoRegexp } from '$lib/Constants';
 
 	export let content: string;
 	export let tags: string[][];
@@ -56,6 +57,8 @@
 				<!-- Twitter -->
 			{:else if url.hostname === 'youtu.be' || /^(.+\.)*youtube\.com$/s.test(url.hostname)}
 				<!-- YouTube -->
+			{:else if url.hostname.endsWith('nicovideo.jp') && nicovideoRegexp.test(url.href)}
+				<!-- Niconico -->
 			{:else if url.hostname === 'amzn.to' || url.hostname === 'amzn.asia' || /^(.+\.)*amazon\.co\.jp$/s.test(url.hostname)}
 				<!-- Amazon -->
 			{:else if /\.(apng|avif|gif|jpg|jpeg|png|webp|bmp|mp3|m4a|wav|mp4|ogg|webm|ogv|mov|mkv|avi|m4v)$/i.test(url.pathname)}
diff --git a/web/src/lib/components/content/Nicovideo.svelte b/web/src/lib/components/content/Nicovideo.svelte
new file mode 100644
index 00000000..2e43c0e4
--- /dev/null
+++ b/web/src/lib/components/content/Nicovideo.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { nicovideoRegexp } from '$lib/Constants';
+
+	export let link: URL;
+
+	let playerElement: HTMLDivElement | undefined;
+
+	$: if (playerElement && playerElement.children.length === 0) {
+		// eslint-disable-next-line @typescript-eslint/no-non-null-asserted-optional-chain
+		const id = link.href.match(nicovideoRegexp)?.groups?.['id']!;
+		const scriptElement = document.createElement('script');
+		scriptElement.type = 'application/javascript';
+		scriptElement.src = `https://embed.nicovideo.jp/watch/${id}/script`;
+		playerElement.append(scriptElement);
+	}
+</script>
+
+<div bind:this={playerElement}></div>
diff --git a/web/src/lib/components/content/Url.svelte b/web/src/lib/components/content/Url.svelte
index a823c0af..4b2177e2 100644
--- a/web/src/lib/components/content/Url.svelte
+++ b/web/src/lib/components/content/Url.svelte
@@ -1,6 +1,6 @@
 <script lang="ts" context="module">
 	import AsyncLock from 'async-lock';
-	import { httpProxy } from '$lib/Constants';
+	import { httpProxy, nicovideoRegexp } from '$lib/Constants';
 
 	declare global {
 		interface Window {
@@ -35,6 +35,7 @@
 	import ExternalLink from '$lib/components/ExternalLink.svelte';
 	import YouTube from '$lib/components/content/YouTube.svelte';
 	import Img from '$lib/components/content/Img.svelte';
+	import Nicovideo from './Nicovideo.svelte';
 
 	export let text: string;
 	export let url: string | undefined = undefined;
@@ -72,6 +73,8 @@
 	{/if}
 {:else if link.hostname === 'youtu.be' || /^(.+\.)*youtube\.com$/s.test(link.hostname)}
 	<YouTube {link} />
+{:else if link.hostname.endsWith('nicovideo.jp') && nicovideoRegexp.test(link.href)}
+	<Nicovideo {link} />
 {:else if link.hostname === 'amzn.to' || link.hostname === 'amzn.asia' || /^(.+\.)*amazon\.co\.jp$/s.test(link.hostname)}
 	<ExternalLink {link} />
 {:else}