🐛 Youtubeのサムネイルをページカードのサムネイルにできていなかった

browser/websocket/makeChanges.ts

@@ -10,32 +10,35 @@ import {
 import type { Change } from "../../deps/socket.ts";
 import type { HeadData } from "./pull.ts";
 import { toTitleLc } from "../../title.ts";
+import { parseYoutube } from "../../parseYoutube.ts";
 
 export interface Init {
   userId: string;
   head: HeadData;
 }
-export const makeChanges = (
+export function* makeChanges(
   left: Pick<Line, "text" | "id">[],
   right: string[],
   { userId, head }: Init,
-): Change[] => {
+): Generator<Change, void, unknown> {
   // 改行文字が入るのを防ぐ
   const right_ = right.flatMap((text) => text.split("\n"));
-  // 本文の差分
-  const changes: Change[] = [...diffToChanges(left, right_, { userId })];
+  // 本文の差分を先に返す
+  for (const change of diffToChanges(left, right_, { userId })) {
+    yield change;
+  }
 
   // titleの差分を入れる
   // 空ページの場合もタイトル変更commitを入れる
   if (left[0].text !== right_[0] || !head.persistent) {
-    changes.push({ title: right_[0] });
+    yield { title: right_[0] };
   }
 
   // descriptionsの差分を入れる
   const leftDescriptions = left.slice(1, 6).map((line) => line.text);
   const rightDescriptions = right_.slice(1, 6);
   if (leftDescriptions.join("") !== rightDescriptions.join("")) {
-    changes.push({ descriptions: rightDescriptions });
+    yield { descriptions: rightDescriptions };
   }
 
   // リンクと画像の差分を入れる
@@ -44,14 +47,12 @@ export const makeChanges = (
     head.links.length !== links.length ||
     !head.links.every((link) => links.includes(link))
   ) {
-    changes.push({ links });
+    yield { links };
   }
   if (head.image !== image) {
-    changes.push({ image });
+    yield { image };
   }
-
-  return changes;
-};
+}
 
 /** テキストに含まれる全てのリンクと最初の画像を探す */
 const findLinksAndImage = (text: string): [string[], string | null] => {
@@ -86,11 +87,20 @@ const findLinksAndImage = (text: string): [string[], string | null] => {
         links.push(node.href);
         return;
       case "link":
-        if (node.pathType !== "relative") return;
-        if (linksLc.get(toTitleLc(node.href))) return;
-        linksLc.set(toTitleLc(node.href), true);
-        links.push(node.href);
-        return;
+        switch (node.pathType) {
+          case "relative":
+            if (linksLc.get(toTitleLc(node.href))) return;
+            linksLc.set(toTitleLc(node.href), true);
+            links.push(node.href);
+            return;
+          case "absolute": {
+            const props = parseYoutube(node.href);
+            if (!props) return;
+            return `https://i.ytimg.com/vi/${props.videoId}/mqdefault.jpg`;
+          }
+          default:
+            return;
+        }
       case "image":
       case "strongImage": {
         image ??= node.src.endsWith("/thumb/1000")

browser/websocket/patch.ts

@@ -65,7 +65,9 @@ export const patch = async (
           });
         }
 
-        const changes = makeChanges(head.lines, newLines, { userId, head });
+        const changes = [
+          ...makeChanges(head.lines, newLines, { userId, head }),
+        ];
         await pushCommit(request, changes, {
           parentId: head.commitId,
           projectId,

parseYoutube.ts

@@ -0,0 +1,62 @@
+// ported from https://github.com/takker99/ScrapBubble/blob/0.4.0/Page.tsx#L662
+
+export interface YoutubeProps {
+  params: URLSearchParams;
+  videoId: string;
+}
+
+const youtubeRegExp =
+  /https?:\/\/(?:www\.|)youtube\.com\/watch\?((?:[^\s]+&|)v=([a-zA-Z\d_-]+)(?:&[^\s]+|))/;
+const youtubeShortRegExp =
+  /https?:\/\/youtu\.be\/([a-zA-Z\d_-]+)(?:\?([^\s]{0,100})|)/;
+const youtubeListRegExp =
+  /https?:\/\/(?:www\.|)youtube\.com\/playlist\?((?:[^\s]+&|)list=([a-zA-Z\d_-]+)(?:&[^\s]+|))/;
+
+/** YoutubeのURLを解析してVideo IDなどを取り出す
+ *
+ * @param url YoutubeのURL
+ * @return 解析結果 YoutubeのURLでなかったときは`undefined`を返す
+ */
+export const parseYoutube = (url: string): YoutubeProps | undefined => {
+  {
+    const matches = url.match(youtubeRegExp);
+    if (matches) {
+      const [, params, videoId] = matches;
+      const _params = new URLSearchParams(params);
+      _params.delete("v");
+      _params.append("autoplay", "0");
+      return {
+        videoId,
+        params: _params,
+      };
+    }
+  }
+  {
+    const matches = url.match(youtubeShortRegExp);
+    if (matches) {
+      const [, videoId] = matches;
+      return {
+        videoId,
+        params: new URLSearchParams("autoplay=0"),
+      };
+    }
+  }
+  {
+    const matches = url.match(youtubeListRegExp);
+    if (matches) {
+      const [, params, listId] = matches;
+
+      const _params = new URLSearchParams(params);
+      const videoId = _params.get("v");
+      if (!videoId) return;
+      _params.delete("v");
+      _params.append("autoplay", "0");
+      _params.append("list", listId);
+      return {
+        videoId,
+        params: _params,
+      };
+    }
+  }
+  return undefined;
+};