Merge pull request #1613 from SnowCait/niconico-embedded-player

Niconico embedded player

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,

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)}

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>

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}