SOOP 다시보기 라이브 당시 시간 표시

SOOP 다시보기에서 생방송 당시 시간을 표시합니다.
目前为 2024-12-20 提交的版本。查看最新版本。
换行
// ==UserScript==
// @name         SOOP 다시보기 라이브 당시 시간 표시
// @namespace    http://tampermonkey.net/
// @version      1.5
// @description  SOOP 다시보기에서 생방송 당시 시간을 표시합니다.
// @author       WakViewer
// @match        https://vod.sooplive.co.kr/player/*
// @grant        none
// ==/UserScript==

(function () {
    'use strict';

    const startTimeSelector = "#player_area > div.wrapping.player_bottom > div.broadcast_information > div:nth-child(2) > div.cnt_info > ul > li:nth-child(2) > span.broad_time";
    const currentTimeSelector = "span.time-current";

    const waitForElement = (selector, callback) => {
        const observer = new MutationObserver(() => {
            const element = document.querySelector(selector);
            if (element) {
                observer.disconnect();
                callback(element);
            }
        });
        observer.observe(document.body, { childList: true, subtree: true });
    };

    const init = () => {
        waitForElement(startTimeSelector, (startTimeElement) => {

            const tipContent = startTimeElement.getAttribute('tip');

            // 정규식을 이용해 방송 시작 시간 추출
            const startTimeMatch = tipContent.match(/방송시간 : (\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2})/);
            if (!startTimeMatch) {
                return;
            }
            const startTime = new Date(startTimeMatch[1]);

            // 현재 재생 시간 주기적으로 업데이트
            setInterval(() => {
                updateLiveTime(startTime);
            }, 500);
        });
    };

    const updateLiveTime = (startTime) => {
        const currentTimeElement = document.querySelector(currentTimeSelector);
        if (!currentTimeElement) {
            return;
        }

        const currentTimeText = currentTimeElement.textContent.trim();
        const [hours, minutes, seconds] = currentTimeText.split(':').map(Number);
        const currentTimeInSeconds = hours * 3600 + minutes * 60 + seconds;

        // 생방송 당시 시간 계산
        const liveTime = new Date(startTime);
        liveTime.setSeconds(liveTime.getSeconds() + currentTimeInSeconds);

        // 생방송 당시 시간을 'YYYY-MM-DD, HH:mm:ss' 형식으로 변환
        const formattedLiveTime = `${liveTime.getFullYear()}-${String(liveTime.getMonth() + 1).padStart(2, '0')}-${String(liveTime.getDate()).padStart(2, '0')}, ${String(liveTime.getHours()).padStart(2, '0')}:${String(liveTime.getMinutes()).padStart(2, '0')}:${String(liveTime.getSeconds()).padStart(2, '0')}`;

        // 결과 표시
        displayLiveTime(formattedLiveTime);
    };

    const displayLiveTime = (liveTime) => {
        const upCntSelector = "#player_area > div.wrapping.player_bottom > div.broadcast_information > div:nth-child(2) > div.cnt_info";
        const upCntElement = document.querySelector(upCntSelector);

        if (!upCntElement) {
            return;
        }

        // 생방송 당시 시간 표시 요소 추가
        let liveTimeDisplay = document.getElementById('live-time-display');
        if (!liveTimeDisplay) {
            liveTimeDisplay = document.createElement('span');
            liveTimeDisplay.id = 'live-time-display';
            liveTimeDisplay.style.marginLeft = 'auto';
            liveTimeDisplay.style.marginRight = '0';
            liveTimeDisplay.style.fontSize = '14px';
            liveTimeDisplay.style.lineHeight = '28px';
            liveTimeDisplay.style.color = '#9196a1';
            liveTimeDisplay.style.fontWeight = 'normal';
            liveTimeDisplay.style.fontFamily = 'Pretendard, -apple-system, BlinkMacSystemFont, Apple SD Gothic Neo, Malgun Gothic, 맑은 고딕, helvetica, sans-serif';
            const ulElement = upCntElement.querySelector('ul');
        if (ulElement) {
            ulElement.insertAdjacentElement('beforebegin', liveTimeDisplay);
        } else {
            upCntElement.appendChild(liveTimeDisplay);
        }
        }

        liveTimeDisplay.innerHTML = `<span style='color: #9196a1;'>Live 당시 시간⠀</span> <strong style='color: #d5d7dc;'>${liveTime}</strong>`;
    };

    window.addEventListener('load', init);
})();