Home.md

@@ -2,6 +2,9 @@
 let videoId;
 let lastVideoId;
 let comments = [];
+let commentFontSize = '';
+let commentFontPos = '';
+let commentColour = '';
 
 const noon = new Audio ('//nizika.tv/assets/noon.wav');
 
@@ -13,6 +16,10 @@ return (([m, s]) => m * 60 + (+s)) (time.split (':'));
 setInterval (() => { 
 const sendBtn = document.getElementById ('niconico-comment-send');
 const comBox = document.getElementById ('niconico-comment-input');
+const overlay = document.getElementById ('comment-overlay');
+const dialog = document.getElementById ('comment-dialog');
+const styleSize = document.getElementById ('comment-place');
+const changeColour = document.getElementById ('comment-color');
 
 const sendComment = () =>
 {
@@ -37,9 +44,24 @@ comBox.value = '';
 noon.play ();
 }, 100);
 };
-if (sendBtn == null || comBox == null)
+if (sendBtn == null || comBox == null || styleSize == null /*|| changeColour == null*/)
   return;
 
+ styleSize.addEventListener ('click', e =>
+{
+console.log (1)
+  overlay.style.display = 'block';
+  dialog.style.display = 'block';
+});
+
+        document.getElementById('okButton').addEventListener('click', function() {
+            const form = document.getElementById('dialogForm');
+            const formData = new FormData(form);
+            commentFontPos = formData.get('position');
+            commentFontSize = formData.get('size');
+            closeDialog();
+        });
+
     comBox.addEventListener ('keydown',
         function (e)
         {
@@ -74,23 +96,57 @@ canvas.height = 720;
 const ctx = canvas?.getContext ('2d');
 if (ctx)
 {
-ctx.font = '48px Arial'; // フォントサイズとフォントタイプを設定
   ctx.textBaseline = 'top'
 ctx.clearRect(0, 0, canvas.width, canvas.height);
 ctx.lineWidth = 4;
-const curTime = document.querySelector ('video').currentTime
+const curTime = document.querySelector ('video').currentTime;
+const duration = document.querySelector ('video').duration;
 comments.forEach ((e, i) =>
 {
-[['black', 'strokeText'], ['white', 'fillText']].forEach (([cl, f]) =>
+const styles = e.style.split (/\s+/);
+const colorStyles = styles.filter (style => style[0] === '#');
+const color = colorStyles[0] ?? 'white';
+if (styles.includes ('large'))
+  ctx.font = '96px Arial';
+else if (styles.includes ('small'))
+  ctx.font = '24px Arial';
+else
+  ctx.font = '48px Arial'; // フォントサイズとフォントタイプを設定
+[['black', 'strokeText'], [color, 'fillText']].forEach (([cl, f]) =>
 {
 ctx.fillStyle = cl;
-ctx[f] (e.content, canvas.width + (e.time - curTime - 1) * (canvas.width + e.content.length * 48) / 4, 6 + 60 * (i % 12));
+if (styles.includes ('top'))
+  e.time <= curTime && curTime < e.time + 4 && ctx[f] (e.content, (canvas.width - e.content.length * parseInt (ctx.font)) / 2, 0);
+else if (styles.includes ('bottom'))
+  e.time <= curTime && curTime < e.time + 4 && ctx[f] (e.content, (canvas.width - e.content.length * parseInt (ctx.font)) / 2, canvas.height - parseInt (ctx.font));
+else
+  {
+    ctx[f] (e.content, canvas.width + (Math.min (e.time, duration - 2) - curTime - 1) * (canvas.width + e.content.length * 48) / 5, 6 + 60 * (i % 12));
+  }
 });
 });
 }
 
 let cmtStyle;
 if ((cmtStyle = document.querySelector ('.comment-threads')?.parentElement?.style) != null)
- cmtStyle.display = 'none';
+  cmtStyle.display = 'none';
+
+let pos = document.querySelector ('#comment-place')
+let cl = document.querySelector ('#comment-color')
+
+if (pos) pos.style.display = 'none';
+if (cl) cl.style.display = 'none'
 }, 30);
+
+setInterval (() =>
+{
+let video = document.querySelector ('video');
+video?.parentElement.insertBefore (document.querySelector ('#comment-layer'), video.nextElementSibling);
+}, 1000);
+
+        function closeDialog() {
+            document.getElementById('comment-overlay').style.display = 'none';
+            document.getElementById('comment-dialog').style.display = 'none';
+        }let videoId;
+
 ```