improve: support @ボタン

xpadev-net · Oct 7, 2023 · baec7ab · baec7ab
1 parent 1a0b141
commit baec7ab
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 43 deletions.
diff --git a/src/iframe.html b/src/iframe.html
@@ -2,49 +2,38 @@
 <html lang="ja">
 <head>
     <meta charset="UTF-8">
+    <script src="https://unpkg.com/@xpadev-net/[email protected]/dist/bundle.js"></script>
+    <script src="https://unpkg.com/@xpadev-net/[email protected]/dist/bundle.js"></script>
     <script src="https://xpadev-net.github.io/niwango.js/niwango.js"></script>
 </head>
 <body>
 <canvas id="canvas" width="1920" height="1080"></canvas>
 <div id="loading">読み込み中...</div>
 </body>
 <script>
-    let niwango,interval=0,currentTime=0,videoMicroSec=false;
+    let nico,interval=0,currentTime=0,videoMicroSec=false,cursorPos={x:0,y:0};
     const canvasElement = document.getElementById("canvas");
-    const updateCanvas = () => {
-        if (!niwango) return;
+    const vpos = () => {
         if (!videoMicroSec) {
-            niwango.draw(Math.floor(currentTime * 100));
-        } else {
-            niwango.draw(
-                Math.floor(
-                    (performance.now() - videoMicroSec.microsec) / 10 +
-                    videoMicroSec.currentTime * 100
-                )
-            );
+            return Math.floor(currentTime * 100);
         }
+        return Math.floor(
+          (performance.now() - videoMicroSec.microsec) / 10 +
+          videoMicroSec.currentTime * 100
+        );
+    }
+    const updateCanvas = () => {
+        if (!nico) return;
+        nico.drawCanvas(vpos(),true,cursorPos);
     };
-    const init = (threads) => {
+    const init = (data) => {
         document.getElementById("loading").remove();
-        const comments = [];
-        for (const thread of threads){
-            for (const comment of thread.comments){
-                comments.push({
-                    message: comment.body,
-                    vpos: Math.floor(comment.vposMs/10)/100,
-                    isYourPost: comment.isMyPost,
-                    mail: comment.commands.join(" "),
-                    fromButton: false,
-                    color: 0,
-                    size: 0,
-                    no: comment.no,
-                    _vpos: Math.floor(comment.vposMs/10),
-                    _owner: thread.fork === "owner"
-                });
-            }
-        }
-
-        niwango=new Niwango(canvasElement,comments)
+        nico = new NiconiComments(canvasElement, data, {
+            format: "v1",
+            config: {
+                plugins: window.PluginNiwango ? [window.PluginNiwango(window.Niwango)] : [],
+            },
+        });
         if (!interval){
             interval = setInterval(updateCanvas, 1);
         }
@@ -85,6 +74,21 @@
             setTimeout(()=>element.remove(),5000);
         }
     }
+    canvasElement.onmousemove = (e) => {
+        cursorPos = {
+            x: e.offsetX * (canvasElement.width / canvasElement.clientWidth),
+            y: e.offsetY * (canvasElement.height / canvasElement.clientHeight),
+        }
+    }
+    canvasElement.onmouseout = () => {
+        cursorPos = undefined;
+    }
+    canvasElement.onclick = (e) => {
+        nico.click(vpos(),{
+            x: e.offsetX * (canvasElement.width / canvasElement.clientWidth),
+            y: e.offsetY * (canvasElement.height / canvasElement.clientHeight),
+        });
+    }
 </script>
 <style>
     *{

diff --git a/src/main.ts b/src/main.ts
@@ -15,13 +15,7 @@ const Niwango_IFrame_Id = "niwango-iframe";
     if (args[0] === "https://nvcomment.nicovideo.jp/v1/threads") {
       const result = (await request.clone().json()) as unknown;
       if (typeguard.threadsApiResponse(result)) {
-        lastComment = result.data.threads.map((thread) => {
-          thread.comments = thread.comments.map((comment) => {
-            comment.commands.push("invisible");
-            return comment;
-          });
-          return thread;
-        });
+        lastComment = result.data.threads;
       }
     }
     return request;
@@ -41,21 +35,30 @@ const Niwango_IFrame_Id = "niwango-iframe";
   let interval = 0;
 
   const setup = async () => {
-    const player = (await getElement("MainVideoPlayer"))[0];
+    const player = (await getElement("VideoContainer"))[0];
     if (!player) throw new Error("failed to get player element");
-    const video = player.getElementsByTagName("video")[0];
-    if (!video) throw new Error("failed to get video element");
+    const CommentRenderer = player.getElementsByClassName("CommentRenderer")[0];
+    if (!CommentRenderer)
+      throw new Error("failed to get CommentRenderer element");
+    const commentCanvas = CommentRenderer.getElementsByTagName("canvas")[0];
+    if (!commentCanvas) throw new Error("failed to get commentCanvas element");
+    const eventHandlerCanvas = player.getElementsByClassName(
+      "VideoSymbolContainer-canvas"
+    )[0];
+    if (!eventHandlerCanvas)
+      throw new Error("failed to get eventHandlerCanvas element");
+    commentCanvas.style.display = "none";
     document.getElementById(Niwango_IFrame_Id)?.remove();
     clearInterval(interval);
     const iframe = document.createElement("iframe") as NiwangoIframe;
     iframe.id = Niwango_IFrame_Id;
     iframe.srcdoc = Niwango_IFrame_SrcDoc;
     iframe.setAttribute(
       "style",
-      "position: relative; width: 100%; height: 100%;border: none;pointer-events: none;"
+      "position: absolute;left: 0;top: 0; width: 100%; height: 100%;border: none;"
     );
     iframe.setAttribute("frameborder", "0");
-    video.after(iframe);
+    eventHandlerCanvas.after(iframe);
     iframe.onload = () => {
       iframe.contentWindow.init(lastComment);
       iframe.contentWindow.updateTime(0, true);