// ==UserScript== // @name SOOP 다시보기 라이브 당시 시간 표시 // @namespace http://tampermonkey.net/ // @version 5.1.1 // @description SOOP 다시보기에서 생방송 당시 시간을 표시/이동 (최근 기록, 셀렉터 폴백, 접근성, 최적화) // @author WakViewer // @match https://vod.sooplive.co.kr/player/* // @icon https://www.google.com/s2/favicons?sz=64&domain=www.sooplive.co.kr // @grant unsafeWindow // @grant GM_addStyle // @grant GM_xmlhttpRequest // @grant GM_setValue // @grant GM_getValue // @grant GM_registerMenuCommand // @grant GM_unregisterMenuCommand // @run-at document-end // @license MIT // @downloadURL none // ==/UserScript== (function () { 'use strict'; // ---------------- Config & Selectors ---------------- const SELECTORS = { startTimeTip: "span.broad_time[tip*='방송시간']", infoUL: ".broadcast_information .cnt_info ul", }; const CURRENT_TIME_CANDIDATES = [ "span.time-current", ".time-current", ".player .time-current", ".time_display .time-current", '[aria-label="Current time"]', '[data-role="current-time"]' ]; const DURATION_CANDIDATES = [ "span.time-duration", ".time-duration", ".player .time-duration", ".time_display .time-duration", '[aria-label="Duration"]', '[data-role="duration"]' ]; const EDIT_THRESHOLD_SEC = 180; // 편집 감지 여유 const UPDATE_INTERVAL_MS = 500; // 표시 갱신 주기 const HISTORY_KEY = 'wv_soop_dt_history'; const HISTORY_MAX = 5; // ---------------- State ---------------- let startTime = null, endTime = null; let currentLiveTimeStr = ''; let updateTimer = null, routeObserver = null, initDoneForHref = null; let timeObserver = null; // MutationObserver let lastActiveEl = null; // a11y 포커스 복귀용 // ---------------- Tiny utils ---------------- const $ = (sel, root=document) => root.querySelector(sel); const p2 = (n)=> String(n).padStart(2,'0'); const fmtDate = (d) => `${d.getFullYear()}-${p2(d.getMonth()+1)}-${p2(d.getDate())}, ${p2(d.getHours())}:${p2(d.getMinutes())}:${p2(d.getSeconds())}`; const userTZ = Intl.DateTimeFormat().resolvedOptions().timeZone || 'UTC'; const waitFor = (selector, {timeout=10000, root=document}={}) => new Promise((resolve, reject) => { const found = $(selector, root); if (found) return resolve(found); const obs = new MutationObserver(() => { const el2 = $(selector, root); if (el2) { obs.disconnect(); resolve(el2); } }); obs.observe(root.body || root, { childList:true, subtree:true }); if (timeout > 0) setTimeout(() => { obs.disconnect(); reject(new Error('waitFor timeout: '+selector)); }, timeout); }); const pickFirst = (qList, root=document) => { for (const q of qList) { const el = root.querySelector(q); if (el) return el; } return null; }; function getCurrentTimeEl() { let el = pickFirst(CURRENT_TIME_CANDIDATES); if (el) return el; // 패턴 폴백: 짧은 HH:MM:SS / MM:SS 텍스트 const nodes = Array.from(document.querySelectorAll('span,div,time')) .filter(n => /:\d{2}/.test((n.textContent||'').trim())) .filter(n => (n.textContent||'').trim().length <= 8); return nodes[0] || null; } function getDurationEl() { let el = pickFirst(DURATION_CANDIDATES); if (el) return el; const cands = Array.from(document.querySelectorAll('span,div,time')) .filter(n => /:\d{2}/.test((n.textContent||'').trim())); cands.sort((a,b)=> (a.textContent||'').length - (b.textContent||'').length); return cands[cands.length-1] || null; } // ---------------- Parse helpers ---------------- const parseTipTimes = (tip) => { const m = tip && tip.match(/방송시간\s*:\s*(\d{4}-\d{2}-\d{2}\s+\d{2}:\d{2}:\d{2})\s*~\s*(\d{4}-\d{2}-\d{2}\s+\d{2}:\d{2}:\d{2})/); if (!m) return null; const s = new Date(m[1].replace(' ', 'T')); const e = new Date(m[2].replace(' ', 'T')); if (isNaN(s) || isNaN(e)) return null; return { start:s, end:e }; }; const parseHMSFlexible = (text) => { if (!text) return 0; const parts = text.trim().split(':').map(Number); if (parts.some(isNaN)) return 0; if (parts.length === 3) return parts[0]*3600 + parts[1]*60 + parts[2]; if (parts.length === 2) return parts[0]*60 + parts[1]; return 0; }; // --------- Timezone transforms ---------- function zonedComponentsToUTCms(comp, timeZone) { const utcGuess = Date.UTC(comp.y, comp.M-1, comp.d, comp.h, comp.m, comp.s); const fmt = new Intl.DateTimeFormat('en-US', { timeZone, year:'numeric', month:'2-digit', day:'2-digit', hour:'2-digit', minute:'2-digit', second:'2-digit', hour12:false }); const parts = fmt.formatToParts(new Date(utcGuess)); const get = t => Number(parts.find(p => p.type === t).value); const tzY=get('year'), tzM=get('month'), tzD=get('day'), tzH=get('hour'), tzMin=get('minute'), tzS=get('second'); const tzEpoch = Date.UTC(tzY, tzM-1, tzD, tzH, tzMin, tzS); const offset = tzEpoch - utcGuess; return Date.UTC(comp.y, comp.M-1, comp.d, comp.h, comp.m, comp.s) - offset; } function startOfDayZoned(date, timeZone) { const f = new Intl.DateTimeFormat('en-CA',{timeZone,year:'numeric',month:'2-digit',day:'2-digit'}); const p = f.formatToParts(date); const y = +p.find(v=>v.type==='year').value; const M = +p.find(v=>v.type==='month').value; const d = +p.find(v=>v.type==='day').value; return zonedComponentsToUTCms({y,M,d,h:0,m:0,s:0}, timeZone); } function listDaysInRange(start, end) { const res = []; if (!start || !end) return res; const endDayMs = startOfDayZoned(end, userTZ); let curMs = startOfDayZoned(start, userTZ); let guard = 0; while (curMs <= endDayMs && guard < 370) { const d = new Date(curMs); const f = new Intl.DateTimeFormat('en-CA',{timeZone:userTZ,year:'numeric',month:'2-digit',day:'2-digit'}); const p = f.formatToParts(d); res.push({ y:+p.find(v=>v.type==='year').value, M:+p.find(v=>v.type==='month').value, d:+p.find(v=>v.type==='day').value }); curMs += 24*3600*1000; guard++; } return res; } // --------------- Natural input parse --------------- function normalizeSpaces(s){ return s.replace(/\u00A0/g,' ').replace(/\s+/g,' ').trim(); } function inferYearFromYY(yy) { const yys = [startTime.getFullYear()%100, endTime.getFullYear()%100]; if (yy === yys[0]) return startTime.getFullYear(); if (yy === yys[1]) return endTime.getFullYear(); return 2000 + yy; } function parseInputToTarget(text) { if (!text) return null; let s = normalizeSpaces(text).replace(/,/g,' '); // 한국어 날짜/시간 const korDate = s.match(/(?:(\d{2,4})\s*년\s*)?(\d{1,2})\s*월\s*(\d{1,2})\s*일/); const korTime = s.match(/(\d{1,2})\s*시(?:\s*(\d{1,2})\s*분)?(?:\s*(\d{1,2})\s*초)?/); if (korDate || korTime) { let y, M, d, h=0, m=0, sec=0; if (korDate) { const yyRaw = korDate[1]; M = +korDate[2]; d = +korDate[3]; if (yyRaw) y = (yyRaw.length===2) ? inferYearFromYY(+yyRaw) : +yyRaw; else y = startTime.getFullYear(); } else if (korTime) { h = +korTime[1]; m = korTime[2]?+korTime[2]:0; sec = korTime[3]?+korTime[3]:0; if (h>23||m>59||sec>59) return null; const days = listDaysInRange(startTime, endTime); for (const dc of days) { const ms = zonedComponentsToUTCms({y:dc.y,M:dc.M,d:dc.d,h,m,s:sec}, userTZ); const cand = new Date(ms); if (cand >= startTime && cand <= endTime) return { comp:{y:dc.y,M:dc.M,d:dc.d,h,m,s:sec} }; } return null; } if (korTime) { h=+korTime[1]; m=korTime[2]?+korTime[2]:0; sec=korTime[3]?+korTime[3]:0; } if (h>23||m>59||sec>59) return null; if (!y||!M||!d) return null; return { comp:{y,M,d,h,m,s:sec} }; } let m; m = s.match(/^(\d{4})[-.](\d{1,2})[-.](\d{1,2})\s+(\d{1,2}):(\d{2})(?::(\d{2}))?$/); if (m) { const y=+m[1], M=+m[2], d=+m[3], h=+m[4], mm=+m[5], ss=m[6]?+m[6]:0; if (h>23||mm>59||ss>59) return null; return { comp:{y,M,d,h,m:mm,s:ss} }; } m = s.match(/^(\d{2})[-.](\d{1,2})[-.](\d{1,2})\s+(\d{1,2}):(\d{2})(?::(\d{2}))?$/); if (m) { const y=inferYearFromYY(+m[1]), M=+m[2], d=+m[3], h=+m[4], mm=+m[5], ss=m[6]?+m[6]:0; if (h>23||mm>59||ss>59) return null; return { comp:{y,M,d,h,m:mm,s:ss} }; } m = s.match(/^(\d{1,2})[-.](\d{1,2})\s+(\d{1,2}):(\d{2})(?::(\d{2}))?$/); if (m) { const M=+m[1], d=+m[2], h=+m[3], mm=+m[4], ss=m[5]?+m[5]:0; if (h>23||mm>59||ss>59) return null; const candidates=[startTime.getFullYear(), endTime.getFullYear()]; for (const y of [...new Set(candidates)]) { const ms=zonedComponentsToUTCms({y,M,d,h,m:mm,s:ss}, userTZ); const cand=new Date(ms); if (cand>=startTime && cand<=endTime) return { comp:{y,M,d,h,m:mm,s:ss} }; } return { comp:{ y:startTime.getFullYear(), M, d, h, m:mm, s:ss } }; } m = s.match(/^(\d{4}-\d{1,2}-\d{1,2})[ T](\d{1,2}):(\d{2})(?::(\d{2}))?$/); if (m) { const [y,M,d]=m[1].split('-').map(Number); const h=+m[2], mm=+m[3], ss=m[4]?+m[4]:0; if (h>23||mm>59||ss>59) return null; return { comp:{ y,M,d,h,m:mm,s:ss } }; } const t = s.match(/^(\d{1,2}):(\d{2})(?::(\d{2}))?$/); if (t && startTime && endTime) { const hh=+t[1], mm=+t[2], ss=t[3]?+t[3]:0; if (hh>23||mm>59||ss>59) return null; const days=listDaysInRange(startTime, endTime); for (const d of days) { const candMs=zonedComponentsToUTCms({ y:d.y,M:d.M,d:d.d,h:hh,m:mm,s:ss }, userTZ); const cand=new Date(candMs); if (cand>=startTime && cand<=endTime) return { comp:{ y:d.y,M:d.M,d:d.d,h:hh,m:mm,s:ss } }; } return null; } const onlyKorTime = s.match(/^(\d{1,2})\s*시(?:\s*(\d{1,2})\s*분)?(?:\s*(\d{1,2})\s*초)?$/); if (onlyKorTime && startTime && endTime) { const hh=+onlyKorTime[1], mm=onlyKorTime[2]?+onlyKorTime[2]:0, ss=onlyKorTime[3]?+onlyKorTime[3]:0; if (hh>23||mm>59||ss>59) return null; const days=listDaysInRange(startTime, endTime); for (const d of days) { const candMs=zonedComponentsToUTCms({ y:d.y,M:d.M,d:d.d,h:hh,m:mm,s:ss }, userTZ); const cand=new Date(candMs); if (cand>=startTime && cand<=endTime) return { comp:{y:d.y,M:d.M,d:d.d,h:hh,m:mm,s:ss} }; } return null; } const korDateAndHm = s.match(/(?:(\d{2,4})\s*년\s*)?(\d{1,2})\s*월\s*(\d{1,2})\s*일\s+(\d{1,2}):(\d{2})$/); if (korDateAndHm) { let y = korDateAndHm[1] ? (korDateAndHm[1].length===2 ? inferYearFromYY(+korDateAndHm[1]) : +korDateAndHm[1]) : startTime.getFullYear(); const M = +korDateAndHm[2], d = +korDateAndHm[3], h = +korDateAndHm[4], m = +korDateAndHm[5]; if (h>23||m>59) return null; return { comp:{ y,M,d,h,m,s:0 } }; } m = s.match(/^(\d{1,2})[.-](\d{1,2})\s+(\d{1,2}):(\d{2})$/); if (m) { const M=+m[1], d=+m[2], h=+m[3], mm=+m[4]; if (h>23||mm>59) return null; const candidates=[startTime.getFullYear(), endTime.getFullYear()]; for (const y of [...new Set(candidates)]) { const ms=zonedComponentsToUTCms({y,M,d,h,m:mm,s:0}, userTZ); const cand=new Date(ms); if (cand>=startTime && cand<=endTime) return { comp:{y,M,d,h,m:mm,s:0} }; } return { comp:{ y:startTime.getFullYear(), M, d, h, m:mm, s:0 } }; } return null; } // ---------------- Toast ---------------- function showToastMessage(message, isError=false) { const container = document.querySelector('#toastMessage') || document.querySelector('#toast-message') || document.querySelector('.toastMessage') || document.querySelector('.toast-message') || document.querySelector('.toast_container, .toast-container, .toast-wrap, .toast_wrap'); if (container) { const wrap = document.createElement('div'); const text = document.createElement('p'); text.textContent = String(message ?? ''); wrap.appendChild(text); container.appendChild(wrap); setTimeout(() => { if (wrap.parentNode === container) container.removeChild(wrap); }, 2000); return; } try { window.dispatchEvent(new CustomEvent('toast-message', { detail:{ message:String(message ?? ''), type:isError?'error':'info' } })); } catch {} alert(String(message ?? '')); } // ---------------- History store ---------------- const loadHistory = () => { try { return JSON.parse(localStorage.getItem(HISTORY_KEY) || '[]'); } catch { return []; } }; const saveHistory = (arr) => localStorage.setItem(HISTORY_KEY, JSON.stringify(arr.slice(0, HISTORY_MAX))); const addHistory = (item) => { const list = loadHistory().filter(v => v !== item); list.unshift(item); saveHistory(list); }; const clearHistory = () => saveHistory([]); // ---------------- Modal ---------------- let jumpModalHost = null; function openJumpModal(triggerBtn) { lastActiveEl = triggerBtn || document.activeElement; const startStr = fmtDate(startTime); const endStr = fmtDate(endTime); // 시작 + 2분 힌트 const hintBase = new Date(startTime.getTime() + 2*60*1000); const y = hintBase.getFullYear(), M = p2(hintBase.getMonth()+1), D = p2(hintBase.getDate()); const H = p2(hintBase.getHours()), m = p2(hintBase.getMinutes()), s = p2(hintBase.getSeconds()); const yy = String(y).slice(-2), kH = String(hintBase.getHours()); const placeholderHint = `예: ${y}-${M}-${D}, ${H}:${m}:${s} / ${yy}.${M}.${D} ${H}:${m} / ${M}월 ${D}일 ${kH}시 ${m}분`; if (!jumpModalHost) { jumpModalHost = document.createElement('div'); jumpModalHost.style.position = 'fixed'; jumpModalHost.style.inset = '0'; jumpModalHost.style.zIndex = '2147483647'; jumpModalHost.attachShadow({ mode:'open' }); document.documentElement.appendChild(jumpModalHost); } const root = jumpModalHost.shadowRoot; root.innerHTML = ''; const style = document.createElement('style'); style.textContent = ` :host { all: initial; } .backdrop { all: initial; position: fixed; inset: 0; background: rgba(0,0,0,.38); display: grid; place-items: center; } .card { all: initial; width: min(720px, 94vw); background: #1f2329; color: #e9edf3; border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.45); font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", helvetica, sans-serif; text-rendering: optimizeSpeed; font-size: 14px; line-height: 1.5; padding: 22px 24px 18px; } .titlebar { display:flex; align-items:center; justify-content:space-between; margin-bottom: 14px; } .title { font-weight: 800; font-size: 18px; letter-spacing: .1px; } .desc { opacity: .85; margin-bottom: 12px; white-space: pre-line; } .section { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.08); } .section:first-of-type { margin-top: 0; padding-top: 0; border-top: none; } .section-title { display:flex; align-items:center; gap:8px; font-weight: 700; color:#dbe5f5; margin: 6px 0 8px; } .section-title::before { content:""; display:inline-block; width:14px; height:14px; border-radius:3px; background: linear-gradient(135deg, #3aa0ff, #8f77ff); } .row { display: grid; grid-template-columns: 160px 1fr; gap: 12px; align-items: center; margin: 8px 0; } .row > div:last-child { min-width: 0; } .label { opacity: .85; } .inputwrap { position: relative; display: flex; align-items: center; gap: 8px; } input[type="text"]{ all: initial; background:#2a2f36; color:#e9edf3; padding:10px 12px; border-radius:10px; border:1px solid transparent; outline:none; font:13px/1.2 inherit; width:100%; box-sizing:border-box; display:block; } input[type="text"]:focus{ border-color:#048BFF; } /* 히스토리 드롭다운 */ .hist-panel { position: absolute; left: 0; right: 36px; top: calc(100% + 6px); background: #1f2329; border: 1px solid #2f3540; border-radius: 12px; box-shadow: 0 16px 40px rgba(0,0,0,.45); padding: 8px; z-index: 5; display: none; } .hist-panel.show { display: block; } .hist-item { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 10px; border-radius:10px; cursor:pointer; } .hist-item:hover { background:#2a2f36; } .hist-text { pointer-events:none; } .hist-del { all:initial; color:#9aa3ad; cursor:pointer; padding:2px 4px; border-radius:6px; } .hist-del:hover { background:#2a2f36; color:#e9edf3; } .hist-footer { display:flex; justify-content:flex-end; padding-top:6px; border-top:1px solid #2a2f36; margin-top:6px; } .hist-clear { all:initial; cursor:pointer; padding:6px 10px; border-radius:999px; background:#2a2f36; color:#e9edf3; font-size:12px; } .hist-clear:hover { background:#343a43; } .iconbtn{ all: initial; cursor:pointer; width:36px; height:36px; display:grid; place-items:center; border-radius:10px; background:#2a2f36; color:#e9edf3; user-select:none; } .iconbtn:hover{ background:#343a43; } .picker{ all: initial; position:absolute; right:0; top:calc(100% + 8px); background:#22262c; color:#e9edf3; border:1px solid #2f3540; border-radius:12px; box-shadow:0 16px 50px rgba(0,0,0,.45); padding:12px; z-index:4; min-width: 440px; font-family: inherit; text-rendering: inherit; } .picker[hidden]{ display:none !important; } .pick-row{ display:flex; align-items:center; gap:10px; margin-top:8px; flex-wrap:wrap; } .seg{ background:#2a2f36; border-radius:10px; padding:6px 10px; font-size:12px; } select{ all: initial; background:#2a2f36; color:#e9edf3; padding:8px 10px; border-radius:10px; border:1px solid transparent; outline:none; font:13px/1.2 inherit; } select:focus{ border-color:#048BFF; } input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } input[type=number] { -moz-appearance: textfield; } .numbox { display:flex; align-items:center; background:transparent; } .num{ all: initial; background:#2a2f36; color:#e9edf3; padding:8px 8px; border-radius:10px; border:1px solid transparent; outline:none; width:54px; text-align:center; font:13px/1.2 inherit; } .num:focus{ border-color:#048BFF; } .steppers { display:flex; flex-direction:column; gap:2px; margin-left:4px; } .step { all: initial; cursor:pointer; width:18px; height:16px; display:grid; place-items:center; border-radius:6px; background:#2a2f36; color:#e9edf3; font-size:10px; line-height:1; } .step:hover { background:#343a43; } .colon { opacity:.8; margin: 0 2px; } .pillbar, .tz, .hint { margin-left: 172px; } .pillbar { display:flex; gap:6px; margin-top: 12px; margin-bottom: 10px; flex-wrap:wrap; } .pill { all: initial; cursor:pointer; padding:6px 10px; border-radius:999px; background:#2a2f36; color:#e9edf3; font-size:12px; } .pill:hover { background:#343a43; } .pill.primary { background:#048BFF; color:#fff; } .pill.primary:hover { background:#048BFF; color:#fff; } .tz { font-size:12px; opacity:.8; margin-top: 14px; } .hint { font-size:12px; opacity:.75; margin-top:6px; } .actions { display:flex; justify-content:flex-end; gap:8px; margin-top:16px; } .btn { all: initial; cursor: pointer; padding: 8px 12px; border-radius: 10px; background: #2a2f36; color: #e9edf3; } .btn.primary { background:#048BFF; color:#fff; } `; const container = document.createElement('div'); container.className = 'backdrop'; const card = document.createElement('div'); card.className = 'card'; card.setAttribute('role', 'dialog'); card.setAttribute('aria-modal', 'true'); card.setAttribute('aria-label', '특정 시간으로 이동하기'); card.innerHTML = `
특정 시간으로 이동하기
시간을 입력/붙여넣기 하세요. (Enter=확인, ESC=닫기)
방송 정보
방송 시작 시간
${startStr}
방송 종료 시간
${endStr}
이동 설정
이동할 시간 입력
표시 타임존: ${userTZ}
`; const dt = card.querySelector('#dt'); const histBox = card.querySelector('#hist'); const picker = card.querySelector('#picker'); const openBtn = card.querySelector('#openPicker'); const pkCancel = card.querySelector('#pkCancel'); const pkApply = card.querySelector('#pkApply'); const daySel = card.querySelector('#daySel'); const dayUp = card.querySelector('#dayUp'); const dayDown = card.querySelector('#dayDown'); const hhInp = card.querySelector('#hh'); const mmInp = card.querySelector('#mm'); const ssInp = card.querySelector('#ss'); // ---------- History dropdown ---------- function renderHistory() { const list = loadHistory(); if (!list.length) { histBox.innerHTML = ''; return; } histBox.innerHTML = ` ${list.map((v,i)=>`
${v}
`).join('')}
`; // 개별 선택 histBox.querySelectorAll('.hist-item').forEach(el=>{ el.addEventListener('click', ()=>{ const idx = Number(el.getAttribute('data-index')); const item = loadHistory()[idx]; if (!item) return; dt.value = item; dt.focus(); dt.select(); histBox.classList.remove('show'); }); }); // 개별 삭제 histBox.querySelectorAll('.hist-del').forEach(btn=>{ btn.addEventListener('click',(e)=>{ e.stopPropagation(); const idx = Number(btn.getAttribute('data-del')); const list = loadHistory(); list.splice(idx,1); saveHistory(list); renderHistory(); }); }); // 전체 삭제 const clearBtn = histBox.querySelector('.hist-clear'); if (clearBtn) clearBtn.addEventListener('click', ()=> { clearHistory(); renderHistory(); }); } function showHistory() { renderHistory(); if (loadHistory().length) histBox.classList.add('show'); } function hideHistory() { histBox.classList.remove('show'); } dt.addEventListener('focus', showHistory); dt.addEventListener('input', showHistory); // 입력란 밖 클릭 시 닫기 (피커/드롭다운 포함 예외 처리) root.addEventListener('click', (e)=>{ const path = e.composedPath(); if (!path.includes(histBox) && !path.includes(dt)) hideHistory(); }); // ---------- Number strict (overwrite on type) ---------- function bindStrictTwoDigit(input, max) { if (!input) return; // 널 가드 const setOverwrite = on => input.dataset.overwrite = on ? '1':'0'; setOverwrite(true); const clamp = v => { if (v === '') return ''; let n = parseInt(v,10); if (isNaN(n)) n = 0; if (n > max) n = max; if (n < 0) n = 0; return String(n); }; const coerce = () => { let raw = (input.value||'').replace(/\D/g,''); if (raw.length>2) raw = raw.slice(-2); raw = clamp(raw); input.value = raw === '' ? '' : String(parseInt(raw,10)); }; input.addEventListener('focus', ()=>{ try{input.select();}catch{} setOverwrite(true); }); input.addEventListener('mousedown', ()=> setOverwrite(true)); input.addEventListener('keydown', (e)=>{ const edit = ['Backspace','Delete','ArrowLeft','ArrowRight','Tab','Home','End']; if (edit.includes(e.key)) return; // 화살표 증감(랩) if (e.key === 'ArrowUp' || e.key === 'ArrowDown') { e.preventDefault(); let cur = parseInt(input.value,10); if (isNaN(cur)) cur = 0; const delta = (e.key === 'ArrowUp') ? +1 : -1; const mod = max + 1; const next = ((cur + delta) % mod + mod) % mod; input.value = String(next); input.dispatchEvent(new Event('input')); setOverwrite(true); return; } // 숫자만 허용 if (e.key.length===1 && !/\d/.test(e.key)) { e.preventDefault(); return; } // ★ 핵심: 2자리 이미 차 있으면, 다음 숫자부터는 자동 덮어쓰기 const curDigitsLen = ((input.value||'').replace(/\D/g,'')).length; if (input.dataset.overwrite === '1' || curDigitsLen >= 2) { input.value = ''; setOverwrite(false); } // 수동 입력 처리 e.preventDefault(); const cur = (input.value||'').replace(/\D/g,''); let next = (cur + e.key).slice(-2); next = clamp(next); input.value = next; input.dispatchEvent(new Event('input')); }); input.addEventListener('input', coerce); input.addEventListener('paste', (e)=>{ const t = (e.clipboardData || window.clipboardData)?.getData('text') || ''; const d = t.replace(/\D/g,''); e.preventDefault(); if (!d) return; let v = d.slice(-2); v = clamp(v); input.value = v; input.dispatchEvent(new Event('input')); setOverwrite(false); }); input.addEventListener('blur', ()=>{ let v = (input.value||'').replace(/\D/g,''); if (v==='') return; v = clamp(v); input.value = String(parseInt(v,10)).padStart(2,'0'); setOverwrite(true); }); input.addEventListener('wheel', (e)=>{ if (document.activeElement !== input) return; e.preventDefault(); let cur = parseInt(input.value,10); if (isNaN(cur)) cur = 0; const delta = e.deltaY < 0 ? +1 : -1; const mod = max + 1; const next = ((cur + delta) % mod + mod) % mod; input.value = String(next); input.dispatchEvent(new Event('input')); setOverwrite(true); }, {passive:false}); } // 널 가드 포함 호출 bindStrictTwoDigit(hhInp,23); bindStrictTwoDigit(mmInp,59); bindStrictTwoDigit(ssInp,59); // 시/분/초 ▲▼ 버튼 function stepWrap(input, max, delta) { if (!input) return; let cur = parseInt(input.value,10); if (isNaN(cur)) cur = 0; const mod = max + 1; const next = ((cur + delta) % mod + mod) % mod; input.value = String(next); input.dispatchEvent(new Event('input')); // 버튼 클릭 후 다음 타이핑은 덮어쓰기 시작 input.dataset.overwrite = '1'; } card.querySelectorAll('.step[data-target]').forEach(btn=>{ const id = btn.getAttribute('data-target'); const delta = btn.getAttribute('data-delta') === '+1' ? +1 : -1; const max = id === 'hh' ? 23 : 59; const input = card.querySelector('#'+id); btn.addEventListener('click', ()=> stepWrap(input,max,delta)); }); // 날짜 옵션 생성 const toYMD = (date) => { const f = new Intl.DateTimeFormat('en-CA',{timeZone:userTZ,year:'numeric',month:'2-digit',day:'2-digit'}); const p = f.formatToParts(date); return `${p.find(v=>v.type==='year').value}-${p.find(v=>v.type==='month').value}-${p.find(v=>v.type==='day').value}`; }; const daysComp = listDaysInRange(startTime, endTime); daySel.innerHTML = ''; for (const d of daysComp) { const ymd = `${d.y}-${p2(d.M)}-${p2(d.d)}`; const opt = document.createElement('option'); opt.value = ymd; opt.textContent = ymd; daySel.appendChild(opt); } const curElForDay = getCurrentTimeEl(); const secNow = curElForDay ? parseHMSFlexible(curElForDay.textContent) : 0; const liveNow = startTime ? new Date(startTime.getTime() + secNow*1000) : new Date(); const liveDateStr = toYMD(liveNow); const optsArr = Array.prototype.slice.call(daySel.options || []); daySel.value = (optsArr.find(o=>o.value===liveDateStr)?.value) || (optsArr[0]?.value || ''); // 날짜 ▲/▼ const stepDay = (delta) => { const opts = daySel.options; const len = opts.length; if (!len) return; let idx = daySel.selectedIndex; if (idx<0) idx=0; idx = ((idx + delta) % len + len) % len; daySel.selectedIndex = idx; daySel.dispatchEvent(new Event('change')); }; dayUp.addEventListener('click', ()=> stepDay(+1)); dayDown.addEventListener('click', ()=> stepDay(-1)); // 피커 토글 const togglePicker = (show) => { if (show) picker.removeAttribute('hidden'); else picker.setAttribute('hidden',''); }; togglePicker(false); openBtn.addEventListener('click', (e)=>{ e.stopPropagation(); togglePicker(picker.hasAttribute('hidden')); }); pkCancel.addEventListener('click', ()=> togglePicker(false)); container.addEventListener('click', (e) => { const path = e.composedPath(); if (!path.includes(card)) { jumpModalHost.style.display = 'none'; } }); // 피커 적용 pkApply.addEventListener('click', ()=> { const h = hhInp && hhInp.value === '' ? NaN : +(hhInp?.value ?? NaN); const Mins = mmInp && mmInp.value === '' ? NaN : +(mmInp?.value ?? NaN); const Secs = ssInp && ssInp.value === '' ? NaN : +(ssInp?.value ?? NaN); if ([h,Mins,Secs].some(v=>Number.isNaN(v))) return showToastMessage('시/분/초를 입력하세요.', true); if (h<0||h>23||Mins<0||Mins>59||Secs<0||Secs>59) return showToastMessage('시/분/초 범위를 확인하세요.', true); const baseDate = daySel.value; const comp = { y:+baseDate.slice(0,4), M:+baseDate.slice(5,7), d:+baseDate.slice(8,10), h, m:Mins, s:Secs }; const ms = zonedComponentsToUTCms(comp, userTZ); const target = new Date(ms); if (target < startTime || target > endTime) return showToastMessage('방송 시간 범위를 벗어났습니다.', true); dt.value = fmtDate(target); dt.focus(); dt.select(); togglePicker(false); hideHistory(); // 충돌 방지 }); // 힌트 const refreshHint = () => { const curEl = getCurrentTimeEl(); const sNow = curEl ? parseHMSFlexible(curEl.textContent) : 0; const live = startTime ? new Date(startTime.getTime() + sNow*1000) : new Date(); card.querySelector('#hint-now').textContent = `현재 장면(내 타임존): ${fmtDate(live)}`; card.querySelector('#start-label').textContent = fmtDate(startTime); card.querySelector('#end-label').textContent = fmtDate(endTime); }; refreshHint(); // 입력/붙여넣기 파싱 function applyParsedFromText(text) { const parsed = parseInputToTarget(text); if (!parsed) return false; const target = new Date(zonedComponentsToUTCms(parsed.comp, userTZ)); if (target < startTime || target > endTime) return false; dt.value = fmtDate(target); dt.focus(); dt.select(); return true; } dt.addEventListener('paste', (e) => { const text = (e.clipboardData || window.clipboardData)?.getData('text'); if (!text) return; if (applyParsedFromText(text)) e.preventDefault(); }); dt.addEventListener('change', () => { if (dt.value) applyParsedFromText(dt.value); }); // 현재 화면 시간/±초/공유 card.querySelector('#useNow').addEventListener('click', () => { const curEl = getCurrentTimeEl(); const sNow = curEl ? parseHMSFlexible(curEl.textContent) : 0; const live = startTime ? new Date(startTime.getTime() + sNow*1000) : new Date(); dt.value = fmtDate(live); dt.focus(); dt.select(); refreshHint(); hideHistory(); }); card.querySelectorAll('.pill[data-bump]').forEach(btn=>{ btn.addEventListener('click', ()=>{ if (!dt.value) return; const parsed = parseInputToTarget(dt.value); if (!parsed?.comp) return; const base = new Date(zonedComponentsToUTCms(parsed.comp, userTZ)); const bumped = new Date(base.getTime() + Number(btn.getAttribute('data-bump'))*1000); dt.value = fmtDate(bumped); dt.focus(); dt.select(); hideHistory(); }); }); card.querySelector('#copyShare').addEventListener('click', () => { if (!dt.value || !startTime) return showToastMessage('시간을 먼저 지정하세요.', true); const parsed = parseInputToTarget(dt.value); if (!parsed?.comp) return showToastMessage('형식이 올바르지 않습니다.', true); const target = new Date(zonedComponentsToUTCms(parsed.comp, userTZ)); if (target < startTime || target > endTime) return showToastMessage('방송 시간 범위를 벗어났습니다.', true); const diffSec = Math.floor((target - startTime)/1000); const url = new URL(location.href); url.searchParams.set('change_second', String(diffSec)); navigator.clipboard.writeText(url.toString()).then(()=> showToastMessage('공유 링크 복사 완료')).catch(()=> showToastMessage('복사 실패', true)); }); // a11y: 포커스 트랩 const focusables = card.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'); const firstF = focusables[0], lastF = focusables[focusables.length-1]; (firstF || card).focus(); card.addEventListener('keydown', (e)=>{ if (e.key === 'Escape') { e.stopPropagation(); closeModal(); } if (e.key === 'Enter') { e.stopPropagation(); card.querySelector('#ok').click(); } if (e.key === 'Tab') { if (e.shiftKey && document.activeElement === firstF) { e.preventDefault(); (lastF||firstF).focus(); } else if (!e.shiftKey && document.activeElement === lastF) { e.preventDefault(); (firstF||lastF).focus(); } } }); function closeModal() { jumpModalHost.style.display = 'none'; if (lastActiveEl && typeof lastActiveEl.focus === 'function') lastActiveEl.focus(); } // 닫기/확인 card.querySelector('#cancel').addEventListener('click', closeModal); card.querySelector('#ok').addEventListener('click', () => { if (!dt.value || !startTime) return showToastMessage('시간을 먼저 지정하세요.', true); const parsed = parseInputToTarget(dt.value); if (!parsed?.comp) return showToastMessage('형식이 올바르지 않습니다.', true); const target = new Date(zonedComponentsToUTCms(parsed.comp, userTZ)); if (target < startTime || target > endTime) return showToastMessage('방송 시간 범위를 벗어났습니다.', true); // ★ 실제 이동 확정 시 히스토리에 저장 addHistory(fmtDate(target)); const diffSec = Math.floor((target - startTime)/1000); const url = new URL(location.href); url.searchParams.set('change_second', String(diffSec)); window.location.replace(url.toString()); }); container.appendChild(card); root.append(style, container); jumpModalHost.style.display = 'block'; } // ---------------- Top UI & loop ---------------- const upsertLiveUI = () => { const ul = $(SELECTORS.infoUL); if (!ul) return {}; try { ul.style.width = '180px'; } catch {} let liveSpan = document.getElementById('live-time-display'); if (!liveSpan) { liveSpan = document.createElement('span'); liveSpan.id = 'live-time-display'; liveSpan.style.fontSize = '14px'; liveSpan.style.lineHeight = '28px'; liveSpan.style.cursor = 'pointer'; liveSpan.title = '라이브 당시 시간 복사'; liveSpan.addEventListener('click', () => { if (!currentLiveTimeStr) return; const doClipboard = () => navigator.clipboard.writeText(currentLiveTimeStr); const legacy = () => { const ta = document.createElement('textarea'); ta.value = currentLiveTimeStr; ta.style.position='fixed'; ta.style.opacity='0'; document.body.appendChild(ta); ta.select(); const ok = document.execCommand && document.execCommand('copy'); document.body.removeChild(ta); return ok ? Promise.resolve() : Promise.reject(); }; (navigator.clipboard ? doClipboard() : legacy()) .then(()=> showToastMessage(`복사 완료: ${currentLiveTimeStr}`)) .catch(()=> showToastMessage('복사 실패', true)); }); ul.parentNode.insertBefore(liveSpan, ul); } let jumpBtn = document.getElementById('jump-button'); if (!jumpBtn) { jumpBtn = document.createElement('button'); jumpBtn.id = 'jump-button'; jumpBtn.innerHTML = '⇋'; Object.assign(jumpBtn.style, { marginLeft:'10px', color:'#FF2F00', background:'transparent', border:'none', cursor:'pointer', fontSize:'16px', lineHeight:'28px' }); jumpBtn.title = '특정 시간으로 이동하기'; jumpBtn.addEventListener('click', () => { if (!startTime || !endTime) return showToastMessage('방송 정보가 아직 준비되지 않았습니다.', true); openJumpModal(jumpBtn); }); liveSpan.insertAdjacentElement('afterend', jumpBtn); } return {}; }; const maybeShowEditNotice = (durationEl) => { if (!startTime || !endTime || !durationEl) return; const totalDuration = parseHMSFlexible((durationEl.textContent||'').trim()); const expected = Math.max(0, ((endTime - startTime)/1000) | 0); if (totalDuration + EDIT_THRESHOLD_SEC < expected) { let note = document.getElementById('edit-notice'); if (!note) { note = document.createElement('strong'); note.id = 'edit-notice'; note.textContent = '[같이보기 진행 또는 편집된 영상일 수 있습니다.]'; Object.assign(note.style, { fontSize:'14px', lineHeight:'28px', color:'#9196a1', marginRight:'10px' }); const liveSpan = document.getElementById('live-time-display'); if (liveSpan && liveSpan.parentNode) liveSpan.parentNode.insertBefore(note, liveSpan); } } }; // 최적화된 업데이트 루프 + 옵저버 안전망 let cachedCurrentEl = null; let lastCurrentText = ''; let lastRendered = ''; function refreshCurrentEl() { if (!cachedCurrentEl || !document.contains(cachedCurrentEl)) { cachedCurrentEl = getCurrentTimeEl(); lastCurrentText = ''; // 옵저버 재설치 if (timeObserver) timeObserver.disconnect(); if (cachedCurrentEl) { timeObserver = new MutationObserver(() => renderLiveTime(cachedCurrentEl)); timeObserver.observe(cachedCurrentEl, { characterData:true, subtree:true, childList:true }); } } return cachedCurrentEl; } function renderLiveTime(el) { const liveSpan = document.getElementById('live-time-display'); if (!el || !liveSpan || !startTime) return; const txt = (el.textContent||'').trim(); if (txt === lastCurrentText) return; lastCurrentText = txt; const sec = parseHMSFlexible(txt); const live = new Date(startTime.getTime() + sec*1000); const html = `Live 당시 시간⠀${fmtDate(live)}`; if (html !== lastRendered) { liveSpan.innerHTML = html; currentLiveTimeStr = fmtDate(live); lastRendered = html; } } function updateLoopStart() { if (updateTimer) clearInterval(updateTimer); updateTimer = setInterval(() => { const el = refreshCurrentEl(); if (el) renderLiveTime(el); }, UPDATE_INTERVAL_MS); } // ---------------- Init / SPA handling ---------------- const initOncePerRoute = async () => { const href = location.href; if (initDoneForHref === href) return; initDoneForHref = href; if (updateTimer) { clearInterval(updateTimer); updateTimer = null; } if (timeObserver) { timeObserver.disconnect(); timeObserver = null; } cachedCurrentEl = null; lastCurrentText=''; lastRendered=''; let tipEl; try { tipEl = await waitFor(SELECTORS.startTimeTip, { timeout:15000, root:document }); } catch { tipEl = Array.from(document.querySelectorAll('span[tip]')).find(el => /방송시간/.test(el.getAttribute('tip')||'')); if (!tipEl) return; } const times = parseTipTimes(tipEl.getAttribute('tip') || ''); if (!times) return; startTime = times.start; endTime = times.end; upsertLiveUI(); let durationEl = getDurationEl(); if (!durationEl) { try { durationEl = await waitFor(DURATION_CANDIDATES.join(','), { timeout:10000 }); } catch {} } maybeShowEditNotice(durationEl); updateLoopStart(); }; const hookHistory = () => { if (routeObserver) return; ['pushState','replaceState'].forEach(fn => { const orig = history[fn]; history[fn] = function(...args){ const ret = orig.apply(this, args); setTimeout(()=>initOncePerRoute(), 50); return ret; }; }); window.addEventListener('popstate', () => setTimeout(()=>initOncePerRoute(), 50)); routeObserver = new MutationObserver(() => { if (location.href !== initDoneForHref) initOncePerRoute(); }); routeObserver.observe(document.documentElement, { childList:true, subtree:true }); }; window.addEventListener('load', () => { hookHistory(); initOncePerRoute(); }); document.addEventListener('visibilitychange', () => { if (!document.hidden) initOncePerRoute(); }); })();