// ==UserScript== // @name PW Live Volume Hub and Cross-Tab Media Control // @namespace tweeks.io // @version 1.0.0 // @description Adds a draggable circular control button, a top-right volume hub with per-tab audio controls, same-site cross-tab media control, and generated Code and Legal pages. // @author Tweeks // @match *://meet.pw.live/zoom* // @match *://meet.pw.live/study-v2/* // @grant none // ==/UserScript== (function () { 'use strict'; const SCRIPT_ID = 'pw-live-volume-hub'; const TAB_ID = `${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 9)}`; const CHANNEL_NAME = 'pw-live-volume-hub-channel'; const channel = typeof BroadcastChannel !== 'undefined' ? new BroadcastChannel(CHANNEL_NAME) : null; const STORAGE_KEYS = { buttonPos: `${SCRIPT_ID}:buttonPos`, tabState: `${SCRIPT_ID}:tabState`, hubOpen: `${SCRIPT_ID}:hubOpen` }; const state = { tabs: new Map(), media: new Map(), activeView: 'tabs', currentTabLabel: getTabLabel(), currentUrl: location.href, currentTitle: document.title, currentVolume: 1, currentMuted: false, isHubOpen: readJSON(STORAGE_KEYS.hubOpen, false), drag: null, menuBuilt: false }; let ui = null; let mediaObserver = null; let refreshTimer = null; let heartbeatTimer = null; function readJSON(key, fallback) { try { const raw = localStorage.getItem(key); return raw ? JSON.parse(raw) : fallback; } catch (_) { return fallback; } } function writeJSON(key, value) { try { localStorage.setItem(key, JSON.stringify(value)); } catch (_) {} } function clamp(value, min, max) { return Math.min(max, Math.max(min, value)); } function escapeHtml(value) { return String(value).replace(/[&<>"']/g, (char) => ({ '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' }[char])); } function getTabLabel() { const page = location.pathname.split('/').filter(Boolean).join(' / ') || 'meeting'; return `${document.title || 'PW Live'} - ${page}`; } function getMediaElements() { return Array.from(document.querySelectorAll('audio, video')).filter((el) => { return el.isConnected && (el.readyState > 0 || el.src || el.srcObject); }); } function averageVolume() { const media = getMediaElements(); if (!media.length) return 1; const total = media.reduce((sum, el) => sum + (Number.isFinite(el.volume) ? el.volume : 1), 0); return clamp(total / media.length, 0, 1); } function allMuted() { const media = getMediaElements(); if (!media.length) return false; return media.every((el) => el.muted || el.volume === 0); } function tabPayload() { return { id: TAB_ID, label: getTabLabel(), title: document.title, url: location.href, site: location.origin, path: location.pathname, volume: averageVolume(), muted: allMuted(), mediaCount: getMediaElements().length, ts: Date.now() }; } function persistTabState(payload) { const all = readJSON(STORAGE_KEYS.tabState, {}); all[TAB_ID] = payload; const now = Date.now(); Object.keys(all).forEach((key) => { if (!all[key] || now - (all[key].ts || 0) > 30000) delete all[key]; }); writeJSON(STORAGE_KEYS.tabState, all); } function removePersistedTab() { const all = readJSON(STORAGE_KEYS.tabState, {}); delete all[TAB_ID]; writeJSON(STORAGE_KEYS.tabState, all); } function emit(type, payload) { const message = { type, payload, senderId: TAB_ID, ts: Date.now() }; if (channel) { try { channel.postMessage(message); } catch (_) {} } try { localStorage.setItem(`${SCRIPT_ID}:message`, JSON.stringify(message)); localStorage.removeItem(`${SCRIPT_ID}:message`); } catch (_) {} } function applyVolumeToMedia(volume) { const normalized = clamp(Number(volume) || 0, 0, 1); getMediaElements().forEach((el) => { el.volume = normalized; if (normalized > 0 && el.muted) el.muted = false; tagMedia(el); }); state.currentVolume = normalized; state.currentMuted = normalized === 0 ? true : false; publishState(); renderDynamic(); } function applyMuteToMedia(muted) { const next = Boolean(muted); getMediaElements().forEach((el) => { el.muted = next; tagMedia(el); }); state.currentMuted = next; publishState(); renderDynamic(); } function controlCurrentTab(action, value) { if (action === 'setVolume') applyVolumeToMedia(value); if (action === 'mute') applyMuteToMedia(true); if (action === 'unmute') applyMuteToMedia(false); if (action === 'toggleMute') applyMuteToMedia(!allMuted()); if (action === 'pauseAll') getMediaElements().forEach((el) => { try { el.pause(); } catch (_) {} }); if (action === 'playAll') getMediaElements().forEach((el) => { try { el.play().catch(() => {}); } catch (_) {} }); publishState(); renderDynamic(); } function handleRemoteCommand(payload) { if (!payload) return; if (payload.targetId && payload.targetId !== TAB_ID && payload.targetId !== '*') return; controlCurrentTab(payload.action, payload.value); } function broadcastCommand(targetId, action, value) { emit('command', { targetId, action, value }); } function publishState() { const payload = tabPayload(); state.tabs.set(TAB_ID, payload); persistTabState(payload); emit('state', payload); } function loadPersistedTabs() { const all = readJSON(STORAGE_KEYS.tabState, {}); const now = Date.now(); Object.values(all).forEach((entry) => { if (entry && now - (entry.ts || 0) <= 30000) state.tabs.set(entry.id, entry); }); } function cleanupTabs() { const now = Date.now(); Array.from(state.tabs.entries()).forEach(([id, entry]) => { if (!entry || now - (entry.ts || 0) > 30000) state.tabs.delete(id); }); } function injectStyles() { if (document.getElementById(`${SCRIPT_ID}-style`)) return; const style = document.createElement('style'); style.id = `${SCRIPT_ID}-style`; style.textContent = ` #${SCRIPT_ID}-button { position: fixed; right: 18px; top: 92px; width: 58px; height: 58px; border-radius: 999px; z-index: 2147483646; background: linear-gradient(135deg, #2563eb, #111827); color: #fff; border: 1px solid rgba(255,255,255,.25); box-shadow: 0 14px 30px rgba(0,0,0,.35); display: flex; align-items: center; justify-content: center; font: 700 13px/1 Arial, sans-serif; letter-spacing: .02em; cursor: grab; user-select: none; backdrop-filter: blur(8px); } #${SCRIPT_ID}-button:active { cursor: grabbing; } #${SCRIPT_ID}-hub { position: fixed; top: 18px; right: 18px; width: 370px; max-width: calc(100vw - 24px); max-height: calc(100vh - 24px); overflow: hidden; z-index: 2147483645; background: rgba(12, 18, 32, .94); color: #f8fafc; border: 1px solid rgba(148, 163, 184, .3); border-radius: 18px; box-shadow: 0 24px 60px rgba(0,0,0,.45); backdrop-filter: blur(12px); font: 13px/1.45 Arial, sans-serif; } #${SCRIPT_ID}-hub[hidden] { display: none !important; } #${SCRIPT_ID}-hub * { box-sizing: border-box; } .${SCRIPT_ID}-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 14px 10px; border-bottom: 1px solid rgba(148, 163, 184, .2); } .${SCRIPT_ID}-title { font-size: 15px; font-weight: 700; } .${SCRIPT_ID}-sub { color: #94a3b8; font-size: 11px; } .${SCRIPT_ID}-close, .${SCRIPT_ID}-mini, .${SCRIPT_ID}-tabbtn, .${SCRIPT_ID}-action, .${SCRIPT_ID}-link { border: 0; border-radius: 10px; cursor: pointer; } .${SCRIPT_ID}-close, .${SCRIPT_ID}-mini { background: rgba(255,255,255,.08); color: #fff; min-width: 32px; height: 32px; } .${SCRIPT_ID}-nav { display: flex; gap: 8px; padding: 10px 14px; border-bottom: 1px solid rgba(148, 163, 184, .2); } .${SCRIPT_ID}-tabbtn { padding: 8px 10px; background: rgba(255,255,255,.07); color: #cbd5e1; font-weight: 600; } .${SCRIPT_ID}-tabbtn.active { background: #2563eb; color: #fff; } .${SCRIPT_ID}-body { padding: 14px; overflow: auto; max-height: calc(100vh - 150px); } .${SCRIPT_ID}-card { background: rgba(255,255,255,.05); border: 1px solid rgba(148, 163, 184, .18); border-radius: 14px; padding: 12px; margin-bottom: 12px; } .${SCRIPT_ID}-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .${SCRIPT_ID}-meta { color: #94a3b8; font-size: 11px; margin-top: 4px; word-break: break-word; } .${SCRIPT_ID}-range { width: 100%; margin: 10px 0 8px; } .${SCRIPT_ID}-actions { display: flex; flex-wrap: wrap; gap: 8px; } .${SCRIPT_ID}-action, .${SCRIPT_ID}-link { background: rgba(37, 99, 235, .18); color: #dbeafe; padding: 8px 10px; font-size: 12px; } .${SCRIPT_ID}-action.alt { background: rgba(255,255,255,.09); color: #fff; } .${SCRIPT_ID}-badge { display: inline-flex; padding: 2px 7px; border-radius: 999px; font-size: 10px; background: rgba(34, 197, 94, .18); color: #bbf7d0; border: 1px solid rgba(34, 197, 94, .2); } .${SCRIPT_ID}-empty { color: #94a3b8; } .${SCRIPT_ID}-pre { white-space: pre-wrap; word-break: break-word; font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: rgba(2,6,23,.5); border-radius: 12px; padding: 12px; border: 1px solid rgba(148,163,184,.15); color: #e2e8f0; } .${SCRIPT_ID}-sectiontitle { font-weight: 700; margin-bottom: 6px; } `; document.documentElement.appendChild(style); } function createUI() { if (ui) return ui; const button = document.createElement('button'); button.id = `${SCRIPT_ID}-button`; button.type = 'button'; button.title = 'Open Volume Hub'; button.textContent = 'VOL'; const hub = document.createElement('section'); hub.id = `${SCRIPT_ID}-hub`; hub.hidden = !state.isHubOpen; hub.innerHTML = `

`; document.documentElement.append(button, hub); ui = { button, hub, body: hub.querySelector(`.${SCRIPT_ID}-body`) }; restoreButtonPosition(); wireUI(); renderDynamic(); return ui; } function restoreButtonPosition() { if (!ui) return; const saved = readJSON(STORAGE_KEYS.buttonPos, null); if (!saved || typeof saved.x !== 'number' || typeof saved.y !== 'number') return; ui.button.style.left = `${saved.x}px`; ui.button.style.top = `${saved.y}px`; ui.button.style.right = 'auto'; } function saveButtonPosition(x, y) { writeJSON(STORAGE_KEYS.buttonPos, { x, y }); } function toggleHub(force) { state.isHubOpen = typeof force === 'boolean' ? force : !state.isHubOpen; if (ui) ui.hub.hidden = !state.isHubOpen; writeJSON(STORAGE_KEYS.hubOpen, state.isHubOpen); renderDynamic(); } function setView(view) { state.activeView = view; if (ui) { ui.hub.querySelectorAll(`.${SCRIPT_ID}-tabbtn`).forEach((btn) => { btn.classList.toggle('active', btn.dataset.view === view); }); } renderDynamic(); } function wireUI() { if (!ui) return; ui.button.addEventListener('click', (event) => { if (state.drag && state.drag.moved) { event.preventDefault(); return; } toggleHub(); }); ui.button.addEventListener('pointerdown', (event) => { const rect = ui.button.getBoundingClientRect(); state.drag = { pointerId: event.pointerId, startX: event.clientX, startY: event.clientY, offsetX: event.clientX - rect.left, offsetY: event.clientY - rect.top, moved: false }; ui.button.setPointerCapture(event.pointerId); }); ui.button.addEventListener('pointermove', (event) => { if (!state.drag || state.drag.pointerId !== event.pointerId) return; const dx = Math.abs(event.clientX - state.drag.startX); const dy = Math.abs(event.clientY - state.drag.startY); if (dx > 4 || dy > 4) state.drag.moved = true; if (!state.drag.moved) return; const x = clamp(event.clientX - state.drag.offsetX, 8, window.innerWidth - ui.button.offsetWidth - 8); const y = clamp(event.clientY - state.drag.offsetY, 8, window.innerHeight - ui.button.offsetHeight - 8); ui.button.style.left = `${x}px`; ui.button.style.top = `${y}px`; ui.button.style.right = 'auto'; saveButtonPosition(x, y); }); const stopDrag = (event) => { if (!state.drag || state.drag.pointerId !== event.pointerId) return; try { ui.button.releasePointerCapture(event.pointerId); } catch (_) {} setTimeout(() => { state.drag = null; }, 0); }; ui.button.addEventListener('pointerup', stopDrag); ui.button.addEventListener('pointercancel', stopDrag); ui.hub.addEventListener('click', (event) => { const target = event.target.closest('button'); if (!target) return; const role = target.dataset.role; const view = target.dataset.view; const action = target.dataset.action; const targetId = target.dataset.targetId; if (role === 'close') return toggleHub(false); if (role === 'refresh') { publishState(); loadPersistedTabs(); cleanupTabs(); renderDynamic(); return; } if (view) return setView(view); if (!action) return; if (action === 'set-current-100') return controlCurrentTab('setVolume', 1); if (action === 'mute-current') return controlCurrentTab('toggleMute'); if (action === 'pause-current') return controlCurrentTab('pauseAll'); if (action === 'play-current') return controlCurrentTab('playAll'); if (action === 'all-mute') return broadcastCommand('*', 'mute'); if (action === 'all-unmute') return broadcastCommand('*', 'unmute'); if (action === 'all-pause') return broadcastCommand('*', 'pauseAll'); if (action === 'all-play') return broadcastCommand('*', 'playAll'); if (action === 'tab-mute') return broadcastCommand(targetId, 'toggleMute'); if (action === 'tab-pause') return broadcastCommand(targetId, 'pauseAll'); if (action === 'tab-play') return broadcastCommand(targetId, 'playAll'); }); ui.hub.addEventListener('input', (event) => { const input = event.target; if (!(input instanceof HTMLInputElement) || input.type !== 'range') return; const value = clamp(Number(input.value) / 100, 0, 1); if (input.dataset.scope === 'current') { controlCurrentTab('setVolume', value); return; } const targetId = input.dataset.targetId; if (targetId) broadcastCommand(targetId, 'setVolume', value); }); } function renderTabsView() { cleanupTabs(); const tabs = Array.from(state.tabs.values()).sort((a, b) => { if (a.id === TAB_ID) return -1; if (b.id === TAB_ID) return 1; return (b.ts || 0) - (a.ts || 0); }); const currentMediaCount = getMediaElements().length; const currentVolume = Math.round(averageVolume() * 100); const currentMuted = allMuted(); let html = `

Current tab

${escapeHtml(document.title || 'Untitled')}

${escapeHtml(location.href)}

${currentMediaCount} media

All same-site tabs

`; if (!tabs.length) { html += `

No active tabs detected yet.

`; return html; } tabs.forEach((tab) => { const isCurrent = tab.id === TAB_ID; html += `

${escapeHtml(tab.title || tab.label || 'PW Live tab')} ${isCurrent ? 'This tab' : ''}

${escapeHtml(tab.url || '')}

${tab.mediaCount || 0} media

`; }); return html; } function renderCodeView() { const codeText = [ 'Generated Code Page', '', 'Features:', '- Draggable circular launcher button.', '- Top-right control hub.', '- Per-tab volume and mute control for audio/video elements.', '- Same-site cross-tab commands using BroadcastChannel with localStorage fallback.', '- Auto-discovery of media elements added later to the page.', '- Works across meet.pw.live pages matched by this userscript.', '', 'Runtime Notes:', `- Current tab id: ${TAB_ID}`, `- Current URL: ${location.href}`, `- Media elements now: ${getMediaElements().length}`, `- BroadcastChannel: ${channel ? 'available' : 'not available; using storage messages'}` ].join('\n'); return `

Code

This page is generated by the userscript at runtime.

${escapeHtml(codeText)}

`; } function renderLegalView() { const legalText = [ 'Generated Legal Page', '', 'This userscript only changes media playback behavior inside pages you open on meet.pw.live.', 'It does not bypass service restrictions, access private data, or send data to external servers.', 'Cross-tab control is limited to same-origin tabs that also run this script.', 'Use at your own risk and verify that adjusting media playback is allowed in your environment.', 'If a site updates its DOM or media pipeline, some controls may require script updates.' ].join('\n'); return `

Legal

${escapeHtml(legalText)}

`; } function renderDynamic() { if (!ui) return; let html = ''; if (state.activeView === 'tabs') html = renderTabsView(); if (state.activeView === 'code') html = renderCodeView(); if (state.activeView === 'legal') html = renderLegalView(); ui.body.innerHTML = html; ui.hub.hidden = !state.isHubOpen; } function onMessage(message) { if (!message || message.senderId === TAB_ID) return; if (message.type === 'state' && message.payload) { state.tabs.set(message.payload.id, message.payload); renderDynamic(); return; } if (message.type === 'command') handleRemoteCommand(message.payload); } function setupMessaging() { if (channel) channel.addEventListener('message', (event) => onMessage(event.data)); window.addEventListener('storage', (event) => { if (event.key === `${SCRIPT_ID}:message` && event.newValue) { try { onMessage(JSON.parse(event.newValue)); } catch (_) {} } if (event.key === STORAGE_KEYS.tabState) { loadPersistedTabs(); cleanupTabs(); renderDynamic(); } }); } function tagMedia(el) { if (state.media.has(el)) return; const sync = () => { publishState(); renderDynamic(); }; ['play', 'pause', 'volumechange', 'loadedmetadata', 'emptied'].forEach((name) => { el.addEventListener(name, sync, { passive: true }); }); state.media.set(el, sync); } function scanMedia() { getMediaElements().forEach(tagMedia); publishState(); renderDynamic(); } function setupMediaObserver() { if (mediaObserver) return; const container = document.querySelector('#meeting-app, #wc-content, #video-pip-container, #root') || document.body; mediaObserver = new MutationObserver((mutations) => { const relevant = mutations.some((mutation) => { if (!(mutation.target instanceof Element)) return false; if (mutation.target.closest(`#${SCRIPT_ID}-hub, #${SCRIPT_ID}-button`)) return false; return Array.from(mutation.addedNodes).some((node) => { return node instanceof Element && ( node.matches('audio, video, video-player-container') || node.querySelector('audio, video, video-player-container') ); }); }); if (!relevant) return; clearTimeout(refreshTimer); refreshTimer = setTimeout(scanMedia, 120); }); mediaObserver.observe(container, { childList: true, subtree: true }); scanMedia(); } function setupLifecycle() { heartbeatTimer = setInterval(() => { publishState(); cleanupTabs(); renderDynamic(); }, 5000); window.addEventListener('beforeunload', () => { removePersistedTab(); emit('state', { id: TAB_ID, ts: 0 }); if (channel) { try { channel.close(); } catch (_) {} } }); } function init() { injectStyles(); createUI(); loadPersistedTabs(); setupMessaging(); setupMediaObserver(); setupLifecycle(); publishState(); renderDynamic(); } if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', init, { once: true }); } else { init(); } })();