// ==UserScript== // @name PW.live - Page Time Tracker // @namespace tweeks.io // @version 3.0 // @description Tracks time spent on each page of PW.live. Shows expandable widget with per-page stats, all-pages list, and time breakdowns by day/week/month/all-time. // @author Tweeks // @match *://www.pw.live/* // @match *://*.pw.live/* // @grant GM_setValue // @grant GM_getValue // @grant TW_notifications // ==/UserScript== (function () { 'use strict'; // ── Storage keys ───────────────────────────────────────────────────────── const STORAGE_KEY = 'pw_page_time_tracker'; // legacy per-page totals const SESSIONS_KEY = 'pw_time_sessions'; // timestamped session log // ── Storage helpers ────────────────────────────────────────────────────── function loadData() { try { return JSON.parse(GM_getValue(STORAGE_KEY, '{}')); } catch (e) { return {}; } } function saveData(data) { GM_setValue(STORAGE_KEY, JSON.stringify(data)); } // Sessions: array of { page, start (ms), end (ms) } function loadSessions() { try { return JSON.parse(GM_getValue(SESSIONS_KEY, '[]')); } catch (e) { return []; } } function saveSessions(arr) { // Keep only last 90 days to avoid unbounded growth const cutoff = Date.now() - 90 * 86400 * 1000; const trimmed = arr.filter(s => s.end >= cutoff); GM_setValue(SESSIONS_KEY, JSON.stringify(trimmed)); } // ── Time helpers ───────────────────────────────────────────────────────── function formatDuration(seconds) { if (seconds < 60) return seconds + 's'; const m = Math.floor(seconds / 60); const s = seconds % 60; if (m < 60) return m + 'm ' + (s > 0 ? s + 's' : ''); const h = Math.floor(m / 60); const rm = m % 60; return h + 'h ' + (rm > 0 ? rm + 'm' : ''); } function formatTime(seconds) { const h = Math.floor(seconds / 3600); const m = Math.floor((seconds % 3600) / 60); const s = seconds % 60; return [h > 0 ? h + 'h' : null, m > 0 ? m + 'm' : null, s + 's'].filter(Boolean).join(' '); } // ── Date range helpers ──────────────────────────────────────────────────── function startOfDay(d) { const t = new Date(d); t.setHours(0, 0, 0, 0); return t.getTime(); } function startOfWeek(d) { const t = new Date(d); const day = t.getDay(); // 0=Sun t.setDate(t.getDate() - day); t.setHours(0, 0, 0, 0); return t.getTime(); } function startOfMonth(d) { const t = new Date(d); t.setDate(1); t.setHours(0, 0, 0, 0); return t.getTime(); } // Sum seconds from sessions that overlap a given [from, to) window function sumInRange(sessions, from, to) { let total = 0; sessions.forEach(s => { const sStart = Math.max(s.start, from); const sEnd = Math.min(s.end, to); if (sEnd > sStart) total += Math.floor((sEnd - sStart) / 1000); }); return total; } // Per-page seconds in a range function pageSecsInRange(sessions, from, to) { const map = {}; sessions.forEach(s => { const sStart = Math.max(s.start, from); const sEnd = Math.min(s.end, to); if (sEnd > sStart) { map[s.page] = (map[s.page] || 0) + Math.floor((sEnd - sStart) / 1000); } }); return map; } // ── Page key ───────────────────────────────────────────────────────────── function getPageKey() { return location.pathname; } function pageLabel(pageKey) { const parts = pageKey.split('/').filter(Boolean); return parts.length ? parts.slice(-2).join(' / ') : 'Home'; } // ── State ──────────────────────────────────────────────────────────────── let currentKey = getPageKey(); let pageStartTime = Date.now(); let tickInterval = null; let isExpanded = false; let activeTab = 'summary'; // 'summary' | 'pages' | 'periods' let widget = null; let timeDisplay = null; let detailPanel = null; // Current live session (updated every tick, flushed on navigate/unload) let liveSession = { page: currentKey, start: pageStartTime, end: pageStartTime }; // ── Widget creation ────────────────────────────────────────────────────── function createWidget() { const existing = document.getElementById('pw-time-tracker-widget'); if (existing) existing.remove(); widget = document.createElement('div'); widget.id = 'pw-time-tracker-widget'; const style = document.createElement('style'); style.textContent = ` #pw-time-tracker-widget { position: fixed; bottom: 18px; right: 18px; z-index: 2147482000; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; user-select: none; } #pw-time-tracker-widget .ptw-pill { display: flex; align-items: center; gap: 6px; background: rgba(30, 30, 40, 0.92); color: #e8e8f0; border-radius: 20px; padding: 5px 12px 5px 10px; font-size: 12px; font-weight: 500; cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,0.35); transition: background 0.2s, box-shadow 0.2s; white-space: nowrap; border: 1px solid rgba(255,255,255,0.08); } #pw-time-tracker-widget .ptw-pill:hover { background: rgba(50, 50, 65, 0.97); box-shadow: 0 4px 16px rgba(0,0,0,0.45); } #pw-time-tracker-widget .ptw-icon { font-size: 13px; line-height: 1; } #pw-time-tracker-widget .ptw-time { font-variant-numeric: tabular-nums; letter-spacing: 0.02em; color: #a8d8a8; font-weight: 600; } #pw-time-tracker-widget .ptw-chevron { font-size: 10px; opacity: 0.6; transition: transform 0.2s; margin-left: 2px; } #pw-time-tracker-widget .ptw-chevron.open { transform: rotate(180deg); } /* Panel */ #pw-time-tracker-widget .ptw-panel { position: absolute; bottom: calc(100% + 8px); right: 0; background: rgba(18, 18, 28, 0.98); border: 1px solid rgba(255,255,255,0.1); border-radius: 14px; padding: 0; min-width: 280px; max-width: 340px; box-shadow: 0 8px 32px rgba(0,0,0,0.6); color: #e0e0ee; font-size: 12px; display: none; overflow: hidden; } #pw-time-tracker-widget .ptw-panel.visible { display: block; } /* Panel header */ #pw-time-tracker-widget .ptw-panel-header { padding: 10px 14px 0; display: flex; justify-content: space-between; align-items: center; } #pw-time-tracker-widget .ptw-panel-title-text { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #8888aa; } #pw-time-tracker-widget .ptw-clear-btn { font-size: 10px; color: #ff7777; cursor: pointer; opacity: 0.7; background: none; border: none; padding: 0; font-family: inherit; } #pw-time-tracker-widget .ptw-clear-btn:hover { opacity: 1; } /* Tabs */ #pw-time-tracker-widget .ptw-tabs { display: flex; gap: 2px; padding: 8px 14px 0; border-bottom: 1px solid rgba(255,255,255,0.07); } #pw-time-tracker-widget .ptw-tab { flex: 1; padding: 5px 4px; font-size: 10px; font-weight: 600; text-align: center; cursor: pointer; border-radius: 6px 6px 0 0; color: #6666aa; background: none; border: none; font-family: inherit; letter-spacing: 0.04em; text-transform: uppercase; transition: color 0.15s, background 0.15s; } #pw-time-tracker-widget .ptw-tab:hover { color: #aaaacc; } #pw-time-tracker-widget .ptw-tab.active { color: #a8d8a8; background: rgba(168,216,168,0.08); border-bottom: 2px solid #a8d8a8; } /* Tab content */ #pw-time-tracker-widget .ptw-tab-content { padding: 10px 14px 12px; max-height: 320px; overflow-y: auto; } #pw-time-tracker-widget .ptw-tab-content::-webkit-scrollbar { width: 4px; } #pw-time-tracker-widget .ptw-tab-content::-webkit-scrollbar-track { background: transparent; } #pw-time-tracker-widget .ptw-tab-content::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; } /* Rows */ #pw-time-tracker-widget .ptw-row { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,0.04); gap: 8px; } #pw-time-tracker-widget .ptw-row:last-child { border-bottom: none; } #pw-time-tracker-widget .ptw-row-label { color: #b0b0cc; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 190px; } #pw-time-tracker-widget .ptw-row-label.current { color: #a8d8a8; font-weight: 600; } #pw-time-tracker-widget .ptw-row-val { font-variant-numeric: tabular-nums; font-weight: 600; color: #d0d0ee; white-space: nowrap; font-size: 11px; } #pw-time-tracker-widget .ptw-row-val.current { color: #a8d8a8; } /* Period rows */ #pw-time-tracker-widget .ptw-period-row { display: flex; justify-content: space-between; align-items: center; padding: 7px 10px; margin-bottom: 5px; border-radius: 8px; background: rgba(255,255,255,0.04); } #pw-time-tracker-widget .ptw-period-label { font-size: 11px; color: #9090bb; font-weight: 600; } #pw-time-tracker-widget .ptw-period-val { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; color: #c8e8c8; } #pw-time-tracker-widget .ptw-period-row.highlight { background: rgba(168,216,168,0.1); border: 1px solid rgba(168,216,168,0.18); } #pw-time-tracker-widget .ptw-period-row.highlight .ptw-period-label { color: #a8d8a8; } #pw-time-tracker-widget .ptw-period-row.highlight .ptw-period-val { color: #a8d8a8; } /* Section divider */ #pw-time-tracker-widget .ptw-section-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: #555577; margin: 10px 0 5px; } /* Total bar */ #pw-time-tracker-widget .ptw-total-row { margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.1); display: flex; justify-content: space-between; font-size: 11px; color: #8888aa; } #pw-time-tracker-widget .ptw-total-val { font-weight: 700; color: #c0c0ee; } /* PW total highlight */ #pw-time-tracker-widget .ptw-pw-total { margin-top: 6px; padding: 6px 10px; background: rgba(168,216,168,0.1); border: 1px solid rgba(168,216,168,0.2); border-radius: 8px; display: flex; justify-content: space-between; align-items: center; font-size: 11px; } #pw-time-tracker-widget .ptw-pw-total-label { color: #a8d8a8; font-weight: 600; } #pw-time-tracker-widget .ptw-pw-total-val { color: #a8d8a8; font-weight: 700; font-variant-numeric: tabular-nums; } /* Copy button */ #pw-time-tracker-widget .ptw-copy-btn { display: block; width: 100%; margin-top: 10px; padding: 6px 0; background: rgba(100,100,180,0.25); border: 1px solid rgba(150,150,220,0.3); border-radius: 6px; color: #b0b0ee; font-size: 11px; font-family: inherit; font-weight: 600; cursor: pointer; text-align: center; letter-spacing: 0.04em; transition: background 0.15s, color 0.15s; } #pw-time-tracker-widget .ptw-copy-btn:hover { background: rgba(120,120,200,0.4); color: #d0d0ff; } /* Empty state */ #pw-time-tracker-widget .ptw-empty { color: #555577; font-size: 11px; padding: 8px 0; text-align: center; } `; document.head.appendChild(style); // Pill const pill = document.createElement('div'); pill.className = 'ptw-pill'; pill.title = 'Time on this page - click to expand'; const icon = document.createElement('span'); icon.className = 'ptw-icon'; icon.textContent = '\u23F1'; timeDisplay = document.createElement('span'); timeDisplay.className = 'ptw-time'; timeDisplay.textContent = '0s'; const chevron = document.createElement('span'); chevron.className = 'ptw-chevron'; chevron.textContent = '\u25B2'; pill.appendChild(icon); pill.appendChild(timeDisplay); pill.appendChild(chevron); // Panel detailPanel = document.createElement('div'); detailPanel.className = 'ptw-panel'; pill.addEventListener('click', function (e) { e.stopPropagation(); isExpanded = !isExpanded; if (isExpanded) { detailPanel.classList.add('visible'); chevron.classList.add('open'); renderPanel(); } else { detailPanel.classList.remove('visible'); chevron.classList.remove('open'); } }); document.addEventListener('click', function (e) { if (!widget.contains(e.target)) { isExpanded = false; detailPanel.classList.remove('visible'); chevron.classList.remove('open'); } }); widget.appendChild(detailPanel); widget.appendChild(pill); document.body.appendChild(widget); } // ── Render panel ───────────────────────────────────────────────────────── function renderPanel() { detailPanel.innerHTML = ''; // Header const header = document.createElement('div'); header.className = 'ptw-panel-header'; const titleText = document.createElement('span'); titleText.className = 'ptw-panel-title-text'; titleText.textContent = 'PW Time Tracker'; const clearBtn = document.createElement('button'); clearBtn.className = 'ptw-clear-btn'; clearBtn.textContent = 'Clear all'; clearBtn.addEventListener('click', function (e) { e.stopPropagation(); saveData({}); saveSessions([]); renderPanel(); }); header.appendChild(titleText); header.appendChild(clearBtn); detailPanel.appendChild(header); // Tabs const tabsEl = document.createElement('div'); tabsEl.className = 'ptw-tabs'; const tabs = [ { id: 'summary', label: 'Summary' }, { id: 'pages', label: 'All Pages' }, { id: 'periods', label: 'By Period' }, ]; tabs.forEach(t => { const btn = document.createElement('button'); btn.className = 'ptw-tab' + (activeTab === t.id ? ' active' : ''); btn.textContent = t.label; btn.addEventListener('click', function (e) { e.stopPropagation(); activeTab = t.id; renderPanel(); }); tabsEl.appendChild(btn); }); detailPanel.appendChild(tabsEl); // Content const content = document.createElement('div'); content.className = 'ptw-tab-content'; detailPanel.appendChild(content); if (activeTab === 'summary') renderSummaryTab(content); if (activeTab === 'pages') renderPagesTab(content); if (activeTab === 'periods') renderPeriodsTab(content); } // ── Summary tab ─────────────────────────────────────────────────────────── function renderSummaryTab(content) { const sessions = loadSessions(); const now = Date.now(); const key = getPageKey(); const todaySecs = sumInRange(sessions, startOfDay(now), now); const weekSecs = sumInRange(sessions, startOfWeek(now), now); const monthSecs = sumInRange(sessions, startOfMonth(now), now); const allSecs = sumInRange(sessions, 0, now); // Current page time (from legacy data) const data = loadData(); const pageSecs = data[key] || 0; // Current page const secLabel = document.createElement('div'); secLabel.className = 'ptw-section-label'; secLabel.textContent = 'Current Page'; content.appendChild(secLabel); const pageRow = document.createElement('div'); pageRow.className = 'ptw-period-row highlight'; pageRow.innerHTML = '' + pageLabel(key) + '' + '' + formatTime(pageSecs) + ''; content.appendChild(pageRow); // Period breakdown const secLabel2 = document.createElement('div'); secLabel2.className = 'ptw-section-label'; secLabel2.textContent = 'Time on PW.live'; content.appendChild(secLabel2); const periods = [ { label: 'Today', secs: todaySecs }, { label: 'This Week', secs: weekSecs }, { label: 'This Month', secs: monthSecs }, { label: 'All Time', secs: allSecs }, ]; periods.forEach(p => { const row = document.createElement('div'); row.className = 'ptw-period-row'; row.innerHTML = '' + p.label + '' + '' + (p.secs > 0 ? formatTime(p.secs) : '—') + ''; content.appendChild(row); }); // Copy button appendCopyBtn(content, sessions, now); } // ── All Pages tab ───────────────────────────────────────────────────────── function renderPagesTab(content) { const data = loadData(); const key = getPageKey(); const entries = Object.entries(data) .filter(([k]) => !k.endsWith('_base')) .sort((a, b) => b[1] - a[1]); if (entries.length === 0) { const empty = document.createElement('div'); empty.className = 'ptw-empty'; empty.textContent = 'No page data yet.'; content.appendChild(empty); return; } let total = 0; entries.forEach(([pageKey, secs]) => { total += secs; const row = document.createElement('div'); row.className = 'ptw-row'; const label = document.createElement('span'); label.className = 'ptw-row-label' + (pageKey === key ? ' current' : ''); label.textContent = (pageKey === key ? '\u25CF ' : '') + pageLabel(pageKey); label.title = pageKey; const val = document.createElement('span'); val.className = 'ptw-row-val' + (pageKey === key ? ' current' : ''); val.textContent = formatTime(secs); row.appendChild(label); row.appendChild(val); content.appendChild(row); }); const totalRow = document.createElement('div'); totalRow.className = 'ptw-total-row'; totalRow.innerHTML = 'Total (all pages)' + formatTime(total) + ''; content.appendChild(totalRow); appendCopyBtn(content, loadSessions(), Date.now()); } // ── By Period tab ───────────────────────────────────────────────────────── function renderPeriodsTab(content) { const sessions = loadSessions(); const now = Date.now(); const ranges = [ { label: 'Today', from: startOfDay(now), to: now, highlight: true }, { label: 'This Week', from: startOfWeek(now), to: now, highlight: false }, { label: 'This Month', from: startOfMonth(now), to: now, highlight: false }, { label: 'All Time', from: 0, to: now, highlight: false }, ]; ranges.forEach(r => { const secs = sumInRange(sessions, r.from, r.to); const header = document.createElement('div'); header.className = 'ptw-section-label'; header.textContent = r.label + (secs > 0 ? ' — ' + formatTime(secs) : ''); content.appendChild(header); if (secs === 0) { const empty = document.createElement('div'); empty.className = 'ptw-empty'; empty.style.marginBottom = '6px'; empty.textContent = 'No activity.'; content.appendChild(empty); return; } const pageMap = pageSecsInRange(sessions, r.from, r.to); const sorted = Object.entries(pageMap).sort((a, b) => b[1] - a[1]); const key = getPageKey(); sorted.forEach(([pageKey, pageSecs]) => { const row = document.createElement('div'); row.className = 'ptw-row'; const label = document.createElement('span'); label.className = 'ptw-row-label' + (pageKey === key ? ' current' : ''); label.textContent = (pageKey === key ? '\u25CF ' : '') + pageLabel(pageKey); label.title = pageKey; const val = document.createElement('span'); val.className = 'ptw-row-val' + (pageKey === key ? ' current' : ''); val.textContent = formatTime(pageSecs); row.appendChild(label); row.appendChild(val); content.appendChild(row); }); }); appendCopyBtn(content, sessions, now); } // ── Copy button helper ──────────────────────────────────────────────────── function appendCopyBtn(content, sessions, now) { const copyBtn = document.createElement('button'); copyBtn.className = 'ptw-copy-btn'; copyBtn.textContent = 'Copy Stats'; copyBtn.addEventListener('click', async function (e) { e.stopPropagation(); const data = loadData(); const entries = Object.entries(data).filter(([k]) => !k.endsWith('_base')).sort((a, b) => b[1] - a[1]); const total = entries.reduce((s, [, v]) => s + v, 0); const todaySecs = sumInRange(sessions, startOfDay(now), now); const weekSecs = sumInRange(sessions, startOfWeek(now), now); const monthSecs = sumInRange(sessions, startOfMonth(now), now); const allSecs = sumInRange(sessions, 0, now); const lines = [ 'PW.live Time Stats', '==================', '', '-- Time Periods --', 'Today: ' + formatTime(todaySecs), 'This Week: ' + formatTime(weekSecs), 'This Month: ' + formatTime(monthSecs), 'All Time: ' + formatTime(allSecs), '', '-- Per Page --', ]; entries.forEach(([pageKey, secs]) => { lines.push(pageLabel(pageKey) + ': ' + formatTime(secs) + ' (' + pageKey + ')'); }); lines.push('------------------'); lines.push('Page Total: ' + formatTime(total)); try { await navigator.clipboard.writeText(lines.join('\n')); copyBtn.textContent = 'Copied!'; await TW_toast('Stats copied to clipboard!', 'success', 'PW Time Tracker', 2500); setTimeout(() => { copyBtn.textContent = 'Copy Stats'; }, 2000); } catch (err) { copyBtn.textContent = 'Failed'; await TW_toast('Could not copy to clipboard.', 'error', 'PW Time Tracker'); setTimeout(() => { copyBtn.textContent = 'Copy Stats'; }, 2000); } }); content.appendChild(copyBtn); } // ── Flush live session into sessions log ────────────────────────────────── function flushSession() { if (!liveSession) return; liveSession.end = Date.now(); if (liveSession.end - liveSession.start < 2000) return; // ignore < 2s const arr = loadSessions(); arr.push({ page: liveSession.page, start: liveSession.start, end: liveSession.end }); saveSessions(arr); } // ── Tick ───────────────────────────────────────────────────────────────── function tick() { const elapsed = Math.floor((Date.now() - pageStartTime) / 1000); if (timeDisplay) timeDisplay.textContent = formatDuration(elapsed); // Update legacy per-page totals const data = loadData(); data[currentKey] = (data[currentKey + '_base'] || 0) + elapsed; saveData(data); // Update live session end time if (liveSession) liveSession.end = Date.now(); if (isExpanded) renderPanel(); } // ── Start tracking a new page ───────────────────────────────────────────── function startTracking() { // Flush previous session flushSession(); currentKey = getPageKey(); pageStartTime = Date.now(); // New live session liveSession = { page: currentKey, start: pageStartTime, end: pageStartTime }; const data = loadData(); data[currentKey + '_base'] = data[currentKey] !== undefined ? data[currentKey] : 0; saveData(data); if (tickInterval) clearInterval(tickInterval); tickInterval = setInterval(tick, 1000); if (timeDisplay) { const base = data[currentKey + '_base'] || 0; timeDisplay.textContent = formatDuration(base); } if (isExpanded) { isExpanded = false; if (detailPanel) detailPanel.classList.remove('visible'); const chevron = widget && widget.querySelector('.ptw-chevron'); if (chevron) chevron.classList.remove('open'); } } // ── SPA navigation detection ────────────────────────────────────────────── function onNavigate() { const newKey = getPageKey(); if (newKey !== currentKey) startTracking(); } const _pushState = history.pushState.bind(history); const _replaceState = history.replaceState.bind(history); history.pushState = function (...args) { _pushState(...args); setTimeout(onNavigate, 50); }; history.replaceState = function (...args) { _replaceState(...args); setTimeout(onNavigate, 50); }; window.addEventListener('popstate', () => setTimeout(onNavigate, 50)); let lastUrl = location.href; setInterval(function () { if (location.href !== lastUrl) { lastUrl = location.href; onNavigate(); } }, 500); // Flush on page unload window.addEventListener('beforeunload', flushSession); document.addEventListener('visibilitychange', function () { if (document.hidden) flushSession(); else { // Resume: start a new live session for the current page liveSession = { page: currentKey, start: Date.now(), end: Date.now() }; } }); // ── Init ───────────────────────────────────────────────────────────────── function init() { createWidget(); startTracking(); } if (document.body) init(); else document.addEventListener('DOMContentLoaded', init); })();