Merge branch 'hotfix/0.2.11'

xpadev-net · Jun 9, 2022 · 9f065bf · 9f065bf
2 parents 74197db + 4b8cb24
commit 9f065bf
Show file tree

Hide file tree

Showing 4 changed files with 215 additions and 134 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@xpadev-net/niconicomments",
-  "version": "0.2.10",
+  "version": "0.2.11",
   "description": "NiconiComments is a comment drawing library that is somewhat compatible with the official Nico Nico Douga player.",
   "main": "dist/bundle.js",
   "types": "dist/dts/main.d.ts",
@@ -31,12 +31,12 @@
   "homepage": "https://xpadev.net/niconicomments/docs/",
   "license": "MIT",
   "devDependencies": {
+    "@babel/preset-env": "^7.18.2",
     "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-typescript": "^8.3.2",
     "rollup": "^2.75.6",
     "typedoc": "^0.22.17",
     "typedoc-plugin-missing-exports": "^0.22.6",
-    "typescript": "^4.7.3",
-    "@babel/preset-env": "^7.18.2"
+    "typescript": "^4.7.3"
   }
 }
diff --git a/sample/sample.html b/sample/sample.html
@@ -45,7 +45,7 @@
 </body>
 </html>
 <style>
-    .wrapper{
+    .wrapper {
         position: absolute;
         top: 0;
         left: 0;
@@ -56,7 +56,8 @@
         width: 100vw;
         z-index: 0;
     }
-    #player,#canvas{
+
+    #player, #canvas {
         position: absolute;
         top: 0;
         left: 0;
@@ -66,10 +67,12 @@
         width: 100%;
         object-fit: contain;
     }
-    #canvas{
+
+    #canvas {
         pointer-events: none;
     }
-    #control{
+
+    #control {
         position: fixed;
         z-index: 1;
         top: 0;
@@ -79,18 +82,21 @@
         padding: 10px 10px 20px 10px;
         display: flex;
         flex-direction: column;
-        transition: ease 500ms top;
+        transition: top 500ms ease;
     }
-    #control label:hover{
+
+    #control label:hover {
         background-color: #ccc;
     }
-    #toggle{
+
+    #toggle {
         position: absolute;
         bottom: 0;
         height: 20px;
         width: 100%;
     }
-    #toggle p{
+
+    #toggle p {
         transform: rotateZ(90deg);
         transform-origin: center center 0;
         text-align: center;
@@ -106,14 +112,15 @@
         left: calc(50% - 10px);
         line-height: 20px;
     }
-    #control.close #toggle p{
+
+    #control.close #toggle p {
         transform: rotateZ(-90deg);
     }
 </style>
 <script type="text/javascript" src="https://www.youtube.com/iframe_api"></script>
 <script type="text/javascript" src="../dist/bundle.js"></script>
 <script type="text/javascript">
-    const videos =[
+    const videos = [
         {
             id: 0,
             nc: "sm9",
@@ -162,32 +169,39 @@
             yt: "29NR161Bmd4",
             title: "to the beginning@2012/04/28"
         },
-	    {
-		    id: 8,
-		    nc: "so17784068",
-		    yt: "dW_5Q7uCS7Y",
-		    title: "満天@2012/05/19"
-	    },
-	    {
-		    id: 9,
-		    nc: "sm38551701",
-		    yt: "m8cdPwNZShM",
-		    title: "うっせぇわ"
-	    },
-	    {
-		    id: 10,
-		    nc: "so35349120",
-		    yt: "yQEUGxngQN4",
-		    title: "Good Morning World@2019/11/22"
-	    }
+        {
+            id: 8,
+            nc: "so17784068",
+            yt: "dW_5Q7uCS7Y",
+            title: "満天@2012/05/19"
+        },
+        {
+            id: 9,
+            nc: "sm38551701",
+            yt: "m8cdPwNZShM",
+            title: "うっせぇわ"
+        },
+        {
+            id: 10,
+            nc: "so35349120",
+            yt: "yQEUGxngQN4",
+            title: "Good Morning World@2019/11/22"
+        }
     ]
-    let video = 0,player,interval=null,nico=null,useLegacy = false,showFPS=false,showCollision=false,showCommentCount=false,smoothing=false,videoMicroSec=false,drawAllImageOnLoad=false;
+    const urlParams = new URLSearchParams(window.location.search);
+    let video = urlParams.get('video') || 0, player, interval = null, nico = null, useLegacy = false, showFPS = false,
+        showCollision = false, showCommentCount = false, smoothing = false, videoMicroSec = false,
+        drawAllImageOnLoad = false;
+
     function onYouTubeIframeAPIReady() {
         let select = document.getElementById("control-video");
-        for(let item of videos){
+        for (let item of videos) {
             let elem = document.createElement("option");
             elem.value = item.id;
             elem.text = `${item.title}(${item.nc})`;
+            if (item.id === Number(video)) {
+                elem.selected = true;
+            }
             select.appendChild(elem);
         }
         player = new YT.Player('player', {
@@ -200,73 +214,78 @@
             }
         });
     }
+
     const onReady = () => {
-        document.getElementById("control").style.display="flex";
+        document.getElementById("control").style.display = "flex";
         loadComments();
     }
-    document.getElementById("control-video").onchange=(e)=>{
+    document.getElementById("control-video").onchange = (e) => {
         video = e.target.value;
-        player.loadVideoById({'videoId': videos[video].yt,
-            'suggestedQuality': 'large'});
+        player.loadVideoById({
+            'videoId': videos[video].yt,
+            'suggestedQuality': 'large'
+        });
         loadComments();
+        urlParams.set("video", video);
+        history.pushState('', '', `${window.location.pathname}?${urlParams.toString()}`);
     }
-    document.getElementById("show-fps").onchange=(e)=>{
+    document.getElementById("show-fps").onchange = (e) => {
         showFPS = !showFPS;
-        nico.showFPS=showFPS;
-        e.target.checked=showFPS;
+        nico.showFPS = showFPS;
+        e.target.checked = showFPS;
     }
-    document.getElementById("show-collision").onchange=(e)=>{
+    document.getElementById("show-collision").onchange = (e) => {
         showCollision = !showCollision;
-        nico.showCollision=showCollision;
-        for (let i in nico.data){
+        nico.showCollision = showCollision;
+        for (let i in nico.data) {
             nico.data[i].image = false;
         }
-        e.target.checked=showCollision;
+        e.target.checked = showCollision;
     }
-    document.getElementById("show-comment-count").onchange=(e)=>{
+    document.getElementById("show-comment-count").onchange = (e) => {
         showCommentCount = !showCommentCount;
-        nico.showCommentCount=showCommentCount;
-        e.target.checked=showCommentCount;
+        nico.showCommentCount = showCommentCount;
+        e.target.checked = showCommentCount;
     }
-    document.getElementById("use-legacy").onchange=(e)=>{
+    document.getElementById("use-legacy").onchange = (e) => {
         useLegacy = !useLegacy;
-        e.target.checked=useLegacy;
+        e.target.checked = useLegacy;
         loadComments();
     }
-    document.getElementById("smoothing").onchange=(e)=>{
+    document.getElementById("smoothing").onchange = (e) => {
         smoothing = !smoothing;
-        e.target.checked=smoothing;
+        e.target.checked = smoothing;
     }
-    document.getElementById("draw-all").onchange=(e)=>{
+    document.getElementById("draw-all").onchange = (e) => {
         drawAllImageOnLoad = !drawAllImageOnLoad;
-        e.target.checked=drawAllImageOnLoad;
+        e.target.checked = drawAllImageOnLoad;
     }
-    document.getElementById("toggle").onclick=()=>{
+    document.getElementById("toggle").onclick = () => {
         let control = document.getElementById("control");
         control.classList.toggle("close");
-        if(control.classList.contains("close")){
-            control.style.top=`${control.clientHeight*-1 + 20}px`;
-        }else{
-            control.style.top=0;
+        if (control.classList.contains("close")) {
+            control.style.top = `${control.clientHeight * -1 + 20}px`;
+        } else {
+            control.style.top = 0;
         }
     }
 
     const updateTime = (e) => {
-        if (e===1) {
-            videoMicroSec={
+        if (e === 1) {
+            videoMicroSec = {
                 currentTime: player.getCurrentTime(),
                 microsec: performance.now()
             }
-        }else{
-            videoMicroSec=false
+        } else {
+            videoMicroSec = false
         }
     }
 
     async function loadComments() {
         const canvas = document.getElementById("canvas");
         const req = await fetch(`./commentdata/${video}.json`);
         const res = await req.json();
-        if (nico instanceof NiconiComments){
+        if (nico instanceof NiconiComments) {
             nico.useLegacy = useLegacy;
             nico.timeline = {};
             nico.nicoScripts = {"reverse": [], "default": []};
@@ -275,14 +294,19 @@
             nico.collision_ue = {};
             nico.collision_shita = {};
             nico.preRendering(res, drawAllImageOnLoad);
-        }else{
-            nico = new NiconiComments(canvas, res, {useLegacy: useLegacy,formatted: true,drawAllImageOnLoad:drawAllImageOnLoad});
+        } else {
+            nico = new NiconiComments(canvas, res, {
+                useLegacy: useLegacy,
+                formatted: true,
+                drawAllImageOnLoad: drawAllImageOnLoad,
+                debug: true
+            });
         }
-        if (!interval){
+        if (!interval) {
             interval = setInterval(() => {
-                if (smoothing&&videoMicroSec){
-                    nico.drawCanvas(Math.floor((performance.now() - videoMicroSec.microsec) / 10 * player.getPlaybackRate()+ videoMicroSec.currentTime * 100));
-                }else{
+                if (smoothing && videoMicroSec) {
+                    nico.drawCanvas(Math.floor((performance.now() - videoMicroSec.microsec) / 10 * player.getPlaybackRate() + videoMicroSec.currentTime * 100));
+                } else {
                     nico.drawCanvas(Math.floor(player.getCurrentTime() * 100))
                 }
             }, 10);