let videoId;
let lastVideoId;
let comments = [];
let commentFontSize = '';
let commentFontPos = '';
let commentColour = '';

const noon = new Audio ('//nizika.tv/assets/noon.wav');

function time2second (time)
{
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 = () =>
{
const lang = document.querySelector ('html').lang;

const style = '';
const timeSec = document.querySelector ('video').currentTime;
const time = `${Math.trunc (timeSec / 60)}:${(timeSec % 60).toFixed (3).padStart (6, '0')}`;

if ((comBox.value == null) || (comBox.value === ''))
  return;

document.querySelector ('textarea').value = `${time}/${lang}/${style}/${comBox.value}`;
document.querySelector ('textarea').dispatchEvent (new InputEvent('input', {
            'bubbles': true,
            'cancelable': true
        }));
setTimeout (() => { 
document.querySelector ('button.peertube-button.orange-button.ng-star-inserted').click ();
comments.push ({time: time2second (time), lang, style, content: comBox.value});
comBox.value = '';
noon.play ();
}, 100);
};
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)
        {
          if (e.key === 'Enter')
            sendComment ();
        });

sendBtn.addEventListener ('click', sendComment);
}, 1000);

setInterval (async () =>
{
videoId = (new URL (location.href)).pathname.match (/^\/w\/([0-9a-zA-Z\-_]+)/)?.[1];

if (videoId !== lastVideoId)
{
lastVideoId = videoId;

if (videoId)
{
comments = (await fetch(`/api/v1/videos/${videoId}/comment-threads?count=100&sort=-createdAt`)
    .then(response => response.ok && response.json ())).data.map (e => e.text).filter (e => (0 <= +e[0]) && (+e[0] <= 9) && ((e.match (/\//g) || []).length >= 3)).map (e => (([time, lang, style, ...contentParts]) => ({time: time2second (time), lang, style, content: contentParts.join ('/')})) (e.split ('/'))).sort ((a, b) => a.time < b.time ? -1 : 1) ;
}
}

const canvas = document.querySelector ('#comment-canvas');
if (canvas)
{
canvas.width = 1280;
canvas.height = 720;
}
const ctx = canvas?.getContext ('2d');
if (ctx)
{
  ctx.textBaseline = 'top'
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.lineWidth = 4;
const curTime = document.querySelector ('video').currentTime;
const duration = document.querySelector ('video').duration;
comments.forEach ((e, i) =>
{
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;
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';

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;