// ==UserScript== // @name Vedantu Session - Reliable Slide History Saver // @namespace tweeks.io // @version 0.2 // @description Reliably saves the previous Vedantu teaching slide locally when the teacher changes slides, with a floating viewer, new-tab viewer, and manual save option. // @author Tweeks // @match *://session.vedantu.com/session/*/live* // @grant GM_registerMenuCommand // @grant GM_unregisterMenuCommand // ==/UserScript== (function() { 'use strict'; const SELECTORS = { canvas: '#student-canvas', pausedImage: '#img-canvas-pause', container: '.teacher-canvas-container' }; const DB_NAME = 'vedantu-slide-history-db'; const STORE_NAME = 'slides'; const DB_VERSION = 1; const MAX_SNAPSHOTS = 80; const POLL_INTERVAL_MS = 1000; const SCHEDULE_DELAY_MS = 250; const SIGNATURE_WIDTH = 24; const SIGNATURE_HEIGHT = 18; const SAME_SLIDE_THRESHOLD = 10; const CHANGE_THRESHOLD = 20; const CONFIRM_POLLS = 2; const TITLE = 'Vedantu Saved Slides'; let menuIds = []; let dbPromise = null; let lastSavedKey = null; let currentSlideSnapshot = null; let slideAnchorSnapshot = null; let currentSlideLabel = ''; let pendingCandidate = null; let pendingChangeTimer = null; let isProcessingSnapshot = false; function log(...args) { console.log('[Vedantu Slide Saver]', ...args); } function waitForTeachingSurface(timeout = 30000) { return new Promise((resolve, reject) => { const findSurface = () => ( document.querySelector(SELECTORS.canvas) || document.querySelector(SELECTORS.pausedImage) || document.querySelector(SELECTORS.container) ); const existing = findSurface(); if (existing) { resolve(existing); return; } const timer = setTimeout(() => { observer.disconnect(); reject(new Error('Timeout waiting for Vedantu teaching surface')); }, timeout); const observer = new MutationObserver(() => { const surface = findSurface(); if (surface) { clearTimeout(timer); observer.disconnect(); resolve(surface); } }); observer.observe(document.documentElement, { childList: true, subtree: true }); }); } function getCanvas() { return document.querySelector(SELECTORS.canvas); } function getPausedImage() { return document.querySelector(SELECTORS.pausedImage); } function getContainer() { return document.querySelector(SELECTORS.container); } function isElementVisible(el) { if (!el) return false; const style = getComputedStyle(el); return style.display !== 'none' && style.visibility !== 'hidden' && Number(style.opacity || '1') > 0.01; } function buildFallbackLabel(savedAt = Date.now()) { const time = new Date(savedAt).toLocaleTimeString(); return `Slide at ${time}`; } function getSlideLabel(savedAt = Date.now()) { return buildFallbackLabel(savedAt); } function downscaleSourceToCanvas(source, width = SIGNATURE_WIDTH, height = SIGNATURE_HEIGHT) { const temp = document.createElement('canvas'); temp.width = width; temp.height = height; const ctx = temp.getContext('2d', { willReadFrequently: true }); ctx.fillStyle = '#fff'; ctx.fillRect(0, 0, width, height); ctx.drawImage(source, 0, 0, width, height); return temp; } function computeSnapshotIdentity(source) { try { const temp = downscaleSourceToCanvas(source); const ctx = temp.getContext('2d', { willReadFrequently: true }); const data = ctx.getImageData(0, 0, temp.width, temp.height).data; let hash = 2166136261; let signature = ''; for (let i = 0; i < data.length; i += 16) { const r = data[i] || 0; const g = data[i + 1] || 0; const b = data[i + 2] || 0; const a = data[i + 3] || 0; const luminance = a < 16 ? 255 : Math.round((r * 3 + g * 4 + b) / 8); const bucket = Math.max(0, Math.min(15, Math.floor(luminance / 16))); signature += bucket.toString(16); hash ^= ((r << 24) ^ (g << 16) ^ (b << 8) ^ a) >>> 0; hash = Math.imul(hash, 16777619) >>> 0; } return { hash: hash.toString(16).padStart(8, '0'), signature }; } catch (error) { log('Snapshot identity creation failed:', error); return null; } } function canvasToDataUrl(canvas) { return canvas.toDataURL('image/png'); } function imageToDataUrl(img) { const temp = document.createElement('canvas'); const width = img.naturalWidth || img.width || 1; const height = img.naturalHeight || img.height || 1; temp.width = width; temp.height = height; const ctx = temp.getContext('2d'); ctx.fillStyle = '#fff'; ctx.fillRect(0, 0, width, height); ctx.drawImage(img, 0, 0, width, height); return temp.toDataURL('image/png'); } function readCanvasSnapshot() { const canvas = getCanvas(); const pausedImage = getPausedImage(); try { if (canvas && canvas.width > 10 && canvas.height > 10) { const identity = computeSnapshotIdentity(canvas); if (identity?.hash && identity.signature) { return { hash: identity.hash, signature: identity.signature, dataUrl: canvasToDataUrl(canvas), width: canvas.width, height: canvas.height, sourceType: 'canvas' }; } } } catch (error) { log('Canvas snapshot failed, trying paused image:', error); } try { if (pausedImage && isElementVisible(pausedImage) && (pausedImage.currentSrc || pausedImage.src)) { const identity = computeSnapshotIdentity(pausedImage); if (identity?.hash && identity.signature) { return { hash: identity.hash, signature: identity.signature, dataUrl: imageToDataUrl(pausedImage), width: pausedImage.naturalWidth || pausedImage.width, height: pausedImage.naturalHeight || pausedImage.height, sourceType: 'image' }; } } } catch (error) { log('Paused image snapshot failed:', error); } return null; } function estimateDifference(signatureA, signatureB) { if (!signatureA || !signatureB) return 999; let diff = 0; const len = Math.max(signatureA.length, signatureB.length); for (let i = 0; i < len; i++) { if ((signatureA[i] || '') !== (signatureB[i] || '')) diff++; } return diff; } function openDb() { if (dbPromise) return dbPromise; dbPromise = new Promise((resolve, reject) => { const request = indexedDB.open(DB_NAME, DB_VERSION); request.onupgradeneeded = () => { const db = request.result; if (!db.objectStoreNames.contains(STORE_NAME)) { const store = db.createObjectStore(STORE_NAME, { keyPath: 'id', autoIncrement: true }); store.createIndex('savedAt', 'savedAt', { unique: false }); store.createIndex('sessionKey', 'sessionKey', { unique: false }); } }; request.onsuccess = () => resolve(request.result); request.onerror = () => reject(request.error); }); return dbPromise; } function getSessionKey() { const parts = location.pathname.split('/').filter(Boolean); const sessionIndex = parts.indexOf('session'); const sessionId = sessionIndex >= 0 ? parts[sessionIndex + 1] : 'unknown'; return `${location.host}:${sessionId}`; } async function getAllSnapshots() { const db = await openDb(); return new Promise((resolve, reject) => { const tx = db.transaction(STORE_NAME, 'readonly'); const store = tx.objectStore(STORE_NAME); const request = store.getAll(); request.onsuccess = () => { const items = (request.result || []) .filter(item => item.sessionKey === getSessionKey()) .sort((a, b) => a.savedAt - b.savedAt); resolve(items); }; request.onerror = () => reject(request.error); }); } async function pruneSnapshots() { const items = await getAllSnapshots(); if (items.length <= MAX_SNAPSHOTS) return; const toDelete = items.slice(0, items.length - MAX_SNAPSHOTS); const db = await openDb(); await new Promise((resolve, reject) => { const tx = db.transaction(STORE_NAME, 'readwrite'); const store = tx.objectStore(STORE_NAME); toDelete.forEach(item => store.delete(item.id)); tx.oncomplete = () => resolve(); tx.onerror = () => reject(tx.error); }); } async function saveSnapshot(snapshot, reason = 'slide change') { if (!snapshot?.hash || !snapshot?.signature || !snapshot?.dataUrl) return false; const uniqueKey = `${snapshot.hash}:${snapshot.signature}`; if (uniqueKey === lastSavedKey) return false; const savedAt = Date.now(); const db = await openDb(); const payload = { sessionKey: getSessionKey(), pageUrl: location.href, title: document.title, slideLabel: currentSlideLabel || getSlideLabel(savedAt), hash: snapshot.hash, signature: snapshot.signature, dataUrl: snapshot.dataUrl, width: snapshot.width, height: snapshot.height, sourceType: snapshot.sourceType, reason, savedAt }; await new Promise((resolve, reject) => { const tx = db.transaction(STORE_NAME, 'readwrite'); tx.objectStore(STORE_NAME).add(payload); tx.oncomplete = () => resolve(); tx.onerror = () => reject(tx.error); }); lastSavedKey = uniqueKey; await pruneSnapshots(); updateMenuCommands(); refreshViewerIfOpen(); log('Saved snapshot:', payload.slideLabel, reason); return true; } async function saveCurrentSlideNow(reason = 'manual save current slide', options = {}) { const { silent = false } = options; const snapshot = readCanvasSnapshot() || currentSlideSnapshot; if (!snapshot) { if (!silent) alert('No slide is available to save yet.'); return false; } currentSlideSnapshot = snapshot; slideAnchorSnapshot = snapshot; currentSlideLabel = getSlideLabel(); const saved = await saveSnapshot(snapshot, reason); if (!silent) { if (saved) { alert('Current slide saved.'); } else { alert('This slide is already saved.'); } } return saved; } async function processSnapshot(reason = 'slide check') { if (isProcessingSnapshot) return; isProcessingSnapshot = true; try { const snapshot = readCanvasSnapshot(); if (!snapshot) return; const label = getSlideLabel(); if (!currentSlideSnapshot) { currentSlideSnapshot = snapshot; slideAnchorSnapshot = snapshot; currentSlideLabel = label; return; } const diffToCurrent = estimateDifference(currentSlideSnapshot.signature, snapshot.signature); const diffToAnchor = slideAnchorSnapshot ? estimateDifference(slideAnchorSnapshot.signature, snapshot.signature) : diffToCurrent; const looksLikeSlideChange = diffToCurrent >= CHANGE_THRESHOLD || ( diffToCurrent >= Math.ceil(CHANGE_THRESHOLD * 0.6) && diffToAnchor >= CHANGE_THRESHOLD ); if (!looksLikeSlideChange) { pendingCandidate = null; currentSlideSnapshot = snapshot; currentSlideLabel = label; if (diffToAnchor >= CHANGE_THRESHOLD * 2) { slideAnchorSnapshot = snapshot; } return; } if (!pendingCandidate) { pendingCandidate = { snapshot, reason, label, streak: 1 }; return; } const diffToPending = estimateDifference(pendingCandidate.snapshot.signature, snapshot.signature); if (diffToPending <= SAME_SLIDE_THRESHOLD * 2) { pendingCandidate.snapshot = snapshot; pendingCandidate.reason = reason; pendingCandidate.label = label; pendingCandidate.streak += 1; } else { pendingCandidate = { snapshot, reason, label, streak: 1 }; return; } if (pendingCandidate.streak >= CONFIRM_POLLS) { await saveSnapshot(currentSlideSnapshot, pendingCandidate.reason || reason); currentSlideSnapshot = pendingCandidate.snapshot; slideAnchorSnapshot = pendingCandidate.snapshot; currentSlideLabel = pendingCandidate.label; pendingCandidate = null; } } finally { isProcessingSnapshot = false; } } function scheduleChangeCheck(reason) { clearTimeout(pendingChangeTimer); pendingChangeTimer = setTimeout(() => { processSnapshot(reason).catch(error => log('Snapshot processing failed:', error)); }, SCHEDULE_DELAY_MS); } function monitorCanvasContainer() { const container = getContainer(); if (!container) return; const observer = new MutationObserver(() => scheduleChangeCheck('container changed')); observer.observe(container, { childList: true, subtree: false, attributes: true, attributeFilter: ['style', 'class'] }); } function monitorCanvasSurface() { const canvas = getCanvas(); if (canvas) { const canvasObserver = new MutationObserver(() => scheduleChangeCheck('canvas changed')); canvasObserver.observe(canvas, { attributes: true, attributeFilter: ['width', 'height', 'style', 'class'] }); } const pausedImage = getPausedImage(); if (pausedImage) { const imageObserver = new MutationObserver(() => scheduleChangeCheck('paused image changed')); imageObserver.observe(pausedImage, { attributes: true, attributeFilter: ['src', 'class', 'style'] }); pausedImage.addEventListener('load', () => scheduleChangeCheck('paused image loaded')); } } function startHashPolling() { setInterval(() => { processSnapshot('polling').catch(error => log('Polling failed:', error)); }, POLL_INTERVAL_MS); } function setupExitSaves() { document.addEventListener('visibilitychange', () => { if (document.visibilityState === 'hidden') { saveCurrentSlideNow('last visible slide', { silent: true }).catch(error => log('Exit save failed:', error)); } }); window.addEventListener('pagehide', () => { saveCurrentSlideNow('page hidden', { silent: true }).catch(error => log('Page hide save failed:', error)); }); } async function clearSnapshots() { const items = await getAllSnapshots(); const db = await openDb(); await new Promise((resolve, reject) => { const tx = db.transaction(STORE_NAME, 'readwrite'); const store = tx.objectStore(STORE_NAME); items.forEach(item => store.delete(item.id)); tx.oncomplete = () => resolve(); tx.onerror = () => reject(tx.error); }); lastSavedKey = null; updateMenuCommands(); refreshViewerIfOpen(); alert('Saved slide history cleared for this session.'); } function downloadSnapshot(item) { const a = document.createElement('a'); a.href = item.dataUrl; const safeLabel = (item.slideLabel || 'slide').replace(/[^a-z0-9_-]+/gi, '_'); a.download = `${safeLabel}_${new Date(item.savedAt).toISOString().replace(/[:.]/g, '-')}.png`; document.body.appendChild(a); a.click(); a.remove(); } async function downloadAllSnapshots() { const items = await getAllSnapshots(); if (!items.length) { alert('No saved slides yet.'); return; } items.forEach((item, index) => { setTimeout(() => downloadSnapshot(item), index * 300); }); } function buildViewerHtml(items) { const cards = items.length ? items.slice().reverse().map(item => { const when = new Date(item.savedAt).toLocaleString(); return `

${escapeHtml(item.slideLabel || 'Unknown slide')} ${escapeHtml(when)} ${escapeHtml(item.reason || '')}

${escapeHtml(item.slideLabel || 'Saved slide')}

Download

`; }).join('') : '

No saved slides yet. Wait for the teacher to change slides or use the manual save menu.

'; return ` ${TITLE}

${TITLE}

Saved locally in your browser for this Vedantu session.

${cards}

`; } function escapeHtml(text) { return String(text) .replace(/&/g, '&') .replace(//g, '>') .replace(/"/g, '"') .replace(/'/g, '''); } async function openViewerInTab() { const items = await getAllSnapshots(); const win = window.open('', '_blank'); if (!win) { alert('Popup blocked. Please allow popups for this site.'); return; } win.document.open(); win.document.write(buildViewerHtml(items)); win.document.close(); } async function ensureFloatingViewer() { let panel = document.getElementById('vedantu-slide-history-panel'); if (panel) { panel.classList.toggle('vedantu-hidden'); return panel; } panel = document.createElement('div'); panel.id = 'vedantu-slide-history-panel'; panel.innerHTML = `

Saved Slides

`; document.body.appendChild(panel); if (!document.getElementById('vedantu-slide-history-style')) { const style = document.createElement('style'); style.id = 'vedantu-slide-history-style'; style.textContent = ` #vedantu-slide-history-panel{position:fixed;top:16px;right:16px;width:360px;max-height:75vh;z-index:2147483647;background:#111;color:#fff;border:1px solid #444;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.4);display:flex;flex-direction:column;overflow:hidden} #vedantu-slide-history-panel.vedantu-hidden{display:none} #vedantu-slide-history-panel .vsh-header{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;background:#1a1a1a;border-bottom:1px solid #333;gap:8px} #vedantu-slide-history-panel .vsh-actions{display:flex;gap:6px;flex-wrap:wrap} #vedantu-slide-history-panel button{background:#2d2d2d;color:#fff;border:1px solid #555;border-radius:6px;padding:6px 8px;cursor:pointer} #vedantu-slide-history-panel .vsh-body{overflow:auto;padding:12px;display:flex;flex-direction:column;gap:12px;background:#111} #vedantu-slide-history-panel .vsh-card{background:#1c1c1c;border:1px solid #333;border-radius:8px;padding:8px} #vedantu-slide-history-panel .vsh-card img{width:100%;height:auto;border-radius:6px;background:#fff} #vedantu-slide-history-panel .vsh-meta{font-size:12px;line-height:1.4;margin-bottom:8px;display:flex;flex-direction:column;gap:2px} #vedantu-slide-history-panel .vsh-empty{font-size:13px;opacity:.85} `; document.head.appendChild(style); } panel.addEventListener('click', async event => { const action = event.target.closest('[data-action]')?.dataset.action; if (!action) return; if (action === 'close') panel.classList.add('vedantu-hidden'); if (action === 'refresh') await renderFloatingViewer(); if (action === 'tab') await openViewerInTab(); if (action === 'save') await saveCurrentSlideNow('manual panel save'); }); await renderFloatingViewer(); return panel; } async function renderFloatingViewer() { const panel = document.getElementById('vedantu-slide-history-panel'); if (!panel) return; const body = panel.querySelector('.vsh-body'); const items = (await getAllSnapshots()).slice().reverse(); if (!items.length) { body.innerHTML = '

No saved slides yet. The previous slide will be stored when a slide change is detected, or you can use Save current.

'; return; } body.innerHTML = items.map(item => `

${escapeHtml(item.slideLabel || 'Unknown slide')} ${escapeHtml(new Date(item.savedAt).toLocaleString())} ${escapeHtml(item.reason || '')}

`).join(''); } function refreshViewerIfOpen() { if (!document.getElementById('vedantu-slide-history-panel')) return; renderFloatingViewer().catch(error => log('Viewer refresh failed:', error)); } async function updateMenuCommands() { while (menuIds.length) { GM_unregisterMenuCommand(menuIds.pop()); } const count = (await getAllSnapshots()).length; menuIds.push(GM_registerMenuCommand(`Saved slides: ${count}`, () => {})); menuIds.push(GM_registerMenuCommand('Save current slide now', () => { saveCurrentSlideNow().catch(error => log(error)); })); menuIds.push(GM_registerMenuCommand('Open floating slide viewer', () => { ensureFloatingViewer().catch(error => log(error)); })); menuIds.push(GM_registerMenuCommand('Open saved slides in new tab', () => { openViewerInTab().catch(error => log(error)); })); menuIds.push(GM_registerMenuCommand('Download all saved slides', () => { downloadAllSnapshots().catch(error => log(error)); })); menuIds.push(GM_registerMenuCommand('Clear saved slide history', () => { clearSnapshots().catch(error => log(error)); })); } async function initialize() { await waitForTeachingSurface(); await openDb(); updateMenuCommands().catch(error => log(error)); const initial = readCanvasSnapshot(); if (initial) { currentSlideSnapshot = initial; slideAnchorSnapshot = initial; currentSlideLabel = getSlideLabel(); } monitorCanvasContainer(); monitorCanvasSurface(); startHashPolling(); setupExitSaves(); scheduleChangeCheck('initial check'); log('Initialized. Ready to save previous slides when the teacher changes them.'); } initialize().catch(error => { console.error('[Vedantu Slide Saver] Initialization failed:', error); }); })();