[Bookmarklet] 時間指定メモ (テキストエリア表示版)

javascript:(function(){
    const USE_LOCALSTORAGE = true; /* localStorageを使用するかどうか */
    const TEXTAREA_HEIGHT = '240px'; /* テキストエリアの高さ */

    var video = document.querySelector('#movie_player > div.html5-video-container > video');
    var time = Math.floor(video.currentTime);
    var h = Math.floor(time / 3600);
    var m = Math.floor((time / 60) % 60);
    var s = time % 60;
    var formattedTime = (h > 0) ? h + ':' + zeroPadding(m) + ':' + zeroPadding(s) : zeroPadding(m) + ':' + zeroPadding(s);
    function zeroPadding(num){return (Array(2).join('0') + num).slice(-2);}

    var textarea = document.getElementById('textarea');
    if(textarea){
        textarea.value += (textarea.value) ? '\n' + formattedTime + ' ' : formattedTime + ' ';
    }else{
        var style = document.createElement('style');
        style.innerHTML = 'ytd-watch-flexy {--bml--textarea--height: ' + TEXTAREA_HEIGHT + '} #textarea {box-sizing: border-box; width: 100%;height: calc(var(--bml--textarea--height) - 3px); border: none; background-color: var(--yt-live-chat-action-panel-background-color); color: var(--yt-live-chat-primary-text-color)} ytd-watch-flexy[flexy_][is-two-columns_]:not([js-panel-height_]) #textarea ~ #chat.ytd-watch-flexy:not([collapsed]).ytd-watch-flexy, ytd-watch-flexy[flexy_] #textarea ~ #chat.ytd-watch-flexy:not([collapsed]).ytd-watch-flexy {min-height: min(596px, calc(100vh - var(--ytd-watch-flexy-masthead-height) - 2 * 24px - (var(--bml--textarea--height) - 3px)));max-height: calc(100vh - var(--ytd-watch-flexy-masthead-height) - 2 * 24px - (var(--bml--textarea--height) - 3px));}';
        document.head.append(style);

        textarea = document.createElement('textarea');
        var panels = document.getElementById('panels');
        var parent = panels.parentNode;
        textarea.id = 'textarea';
        if(USE_LOCALSTORAGE) {
            var savedText = '';
            var url = document.location.href;
            var result = url.match(/youtube\.com\/watch\?v=([a-zA-Z0-9_-]{11})/);
            var videoId = (result) ? result[1] : url;
            var lastVideoId = localStorage.getItem('lastVideoId');
            if(lastVideoId == videoId){
                savedText = localStorage.getItem('lastEdittedText');
            }else{
                localStorage.setItem('lastVideoId', videoId);
            }
            textarea.value = (savedText) ? savedText + '\n' + formattedTime + ' ' : formattedTime + ' ';
        }else {
            textarea.value = formattedTime + ' ';
        }
        parent.insertBefore(textarea, panels);
    }
    textarea.scrollTop = textarea.scrollHeight;
    if(USE_LOCALSTORAGE) {
        localStorage.setItem('lastEdittedText', textarea.value);
    }
})();