Saved Slides - ${htmlEscape(sessionId)}

// ==UserScript== // @name Vedantu Live Session - Slide Saver, Viewer, ZIP Export // @namespace tweeks.io // @version 8.0 // @description Saves Vedantu whiteboard slides locally, supports manual and timed auto-save, opens a reliable local slide viewer tab or popup, adds hide/show controls, exports saved slides as a ZIP archive, and uses safer UI detection to avoid runaway behavior. // @author Tweeks // @match *://session.vedantu.com/session/*/live* // @grant none // ==/UserScript== (function () { 'use strict'; const WRAPPER_SELECTORS = ['.teacher-canvas-wrapper', '[class*="teacher-canvas-wrapper"]']; const CANVAS_SELECTORS = ['#student-canvas', 'canvas[data-paper-resize="true"]', 'canvas[id*="canvas"]']; const OBSERVATION_ROOT_SELECTORS = ['#student-container', '#app']; const CONTROLS_ID = 'tm-vedantu-slide-controls'; const CONTROLS_TOGGLE_ID = 'tm-vedantu-slide-controls-toggle'; const CONTROLS_COLLAPSED_CLASS = 'tm-vedantu-slide-controls-collapsed'; const SAVE_BUTTON_ID = 'tm-vedantu-save-slide-button'; const AUTO_TOGGLE_ID = 'tm-vedantu-auto-save-toggle'; const AUTO_INTERVAL_SELECT_ID = 'tm-vedantu-auto-save-interval'; const VIEW_BUTTON_ID = 'tm-vedantu-view-slides-button'; const EXPORT_BUTTON_ID = 'tm-vedantu-export-zip-button'; const STYLE_ID = 'tm-vedantu-slide-style'; const DEFAULT_AUTO_SAVE_INTERVAL_MS = 10000; const MIN_AUTO_SAVE_MINUTES = 1; const MAX_AUTO_SAVE_MINUTES = 15; const UI_KEEPALIVE_INTERVAL_MS = 2500; const MIN_CANVAS_EDGE_PX = 120; const MIN_CANVAS_AREA_PX = 40000; const AUTO_SAVE_STORAGE_KEY = 'tmVedantuAutoSaveEnabled'; const AUTO_SAVE_INTERVAL_STORAGE_KEY = 'tmVedantuAutoSaveIntervalMs'; const CONTROLS_HIDDEN_STORAGE_KEY = 'tmVedantuSlideControlsHidden'; const DB_NAME = 'tmVedantuSlidesDB'; const DB_VERSION = 1; const STORE_NAME = 'slides'; let autoSaveEnabled = readAutoSavePreference(); let autoSaveIntervalMs = readAutoSaveIntervalPreference(); let controlsHidden = readControlsVisibilityPreference(); let autoSaveTimeoutId = null; let uiKeepAliveIntervalId = null; let isSaving = false; let isExporting = false; let lastSavedDataUrl = null; let dbPromise = null; let buttonResetTimers = Object.create(null); let activeViewerWindow = null; function queryFirst(selectors, root = document) { for (const selector of selectors) { const match = root.querySelector(selector); if (match) return match; } return null; } function isUsableCanvas(canvas) { if (!(canvas instanceof HTMLCanvasElement) || !canvas.isConnected) { return false; } const rect = canvas.getBoundingClientRect(); const renderedWidth = Math.max(0, Math.round(rect.width)); const renderedHeight = Math.max(0, Math.round(rect.height)); const intrinsicWidth = Number(canvas.width) || 0; const intrinsicHeight = Number(canvas.height) || 0; const maxWidth = Math.max(renderedWidth, intrinsicWidth); const maxHeight = Math.max(renderedHeight, intrinsicHeight); const style = window.getComputedStyle(canvas); if (style.display === 'none' || style.visibility === 'hidden' || maxWidth < MIN_CANVAS_EDGE_PX || maxHeight < MIN_CANVAS_EDGE_PX) { return false; } return (maxWidth * maxHeight) >= MIN_CANVAS_AREA_PX; } function getVisibleCanvasCandidates() { return Array.from(document.querySelectorAll('canvas')) .filter(isUsableCanvas) .sort((leftCanvas, rightCanvas) => { const leftRect = leftCanvas.getBoundingClientRect(); const rightRect = rightCanvas.getBoundingClientRect(); const leftArea = Math.max(leftRect.width, leftCanvas.width || 0) * Math.max(leftRect.height, leftCanvas.height || 0); const rightArea = Math.max(rightRect.width, rightCanvas.width || 0) * Math.max(rightRect.height, rightCanvas.height || 0); return rightArea - leftArea; }); } function getCanvas() { for (const selector of CANVAS_SELECTORS) { const match = document.querySelector(selector); if (isUsableCanvas(match)) { return match; } } return getVisibleCanvasCandidates()[0] || null; } function findCanvasContainer(canvas) { if (!canvas) return null; const semanticContainer = canvas.closest('.teacher-canvas-wrapper, [class*="whiteboard"], [class*="board"], [class*="canvas"]'); if (semanticContainer && semanticContainer !== canvas) { return semanticContainer; } let current = canvas.parentElement; while (current && current !== document.body) { const rect = current.getBoundingClientRect(); if (rect.width >= MIN_CANVAS_EDGE_PX && rect.height >= MIN_CANVAS_EDGE_PX) { return current; } current = current.parentElement; } return canvas.parentElement; } function getWrapper() { const canvas = getCanvas(); const explicitWrapper = queryFirst(WRAPPER_SELECTORS); if (explicitWrapper && (!canvas || explicitWrapper.contains(canvas))) { return explicitWrapper; } return findCanvasContainer(canvas); } function getObservationRoot() { const wrapper = getWrapper(); if (wrapper && wrapper.parentElement) { return wrapper.parentElement; } return queryFirst(OBSERVATION_ROOT_SELECTORS); } function getSessionId() { const pathParts = location.pathname.split('/').filter(Boolean); return pathParts[1] || 'session'; } function buildSlideId() { return getSessionId() + '-' + Date.now() + '-' + Math.random().toString(36).slice(2, 8); } function readAutoSavePreference() { try { const storedValue = localStorage.getItem(AUTO_SAVE_STORAGE_KEY); return storedValue === null ? true : storedValue === 'true'; } catch (error) { return true; } } function writeAutoSavePreference(enabled) { try { localStorage.setItem(AUTO_SAVE_STORAGE_KEY, String(Boolean(enabled))); } catch (error) { console.warn('Failed to store Vedantu auto-save preference:', error); } } function getAutoSaveIntervalOptions() { const options = [DEFAULT_AUTO_SAVE_INTERVAL_MS]; for (let minute = MIN_AUTO_SAVE_MINUTES; minute <= MAX_AUTO_SAVE_MINUTES; minute += 1) { options.push(minute * 60 * 1000); } return options; } function normalizeAutoSaveIntervalMs(value) { const numericValue = Number(value); return getAutoSaveIntervalOptions().includes(numericValue) ? numericValue : DEFAULT_AUTO_SAVE_INTERVAL_MS; } function readAutoSaveIntervalPreference() { try { const storedValue = localStorage.getItem(AUTO_SAVE_INTERVAL_STORAGE_KEY); return storedValue === null ? DEFAULT_AUTO_SAVE_INTERVAL_MS : normalizeAutoSaveIntervalMs(storedValue); } catch (error) { return DEFAULT_AUTO_SAVE_INTERVAL_MS; } } function writeAutoSaveIntervalPreference(intervalMs) { try { localStorage.setItem(AUTO_SAVE_INTERVAL_STORAGE_KEY, String(normalizeAutoSaveIntervalMs(intervalMs))); } catch (error) { console.warn('Failed to store Vedantu auto-save interval:', error); } } function readControlsVisibilityPreference() { try { return localStorage.getItem(CONTROLS_HIDDEN_STORAGE_KEY) === 'true'; } catch (error) { return false; } } function writeControlsVisibilityPreference(hidden) { try { localStorage.setItem(CONTROLS_HIDDEN_STORAGE_KEY, String(Boolean(hidden))); } catch (error) { console.warn('Failed to store Vedantu control visibility state:', error); } } function waitForAnimationFrame() { return new Promise((resolve) => requestAnimationFrame(resolve)); } function formatIntervalLabel(intervalMs) { if (intervalMs < 60000) { return Math.round(intervalMs / 1000) + 's'; } const minutes = Math.round(intervalMs / 60000); return minutes + 'm'; } function formatIntervalOptionLabel(intervalMs) { if (intervalMs < 60000) { return Math.round(intervalMs / 1000) + ' seconds'; } const minutes = Math.round(intervalMs / 60000); return minutes === 1 ? '1 minute' : minutes + ' minutes'; } function formatDateTime(timestamp) { try { return new Date(timestamp).toLocaleString(); } catch (error) { return String(timestamp); } } function sanitizeFileNamePart(value) { return String(value || 'session') .replace(/[<>:"/\\|?*\x00-\x1F]/g, '-') .replace(/\s+/g, '-') .replace(/-+/g, '-') .replace(/^-|-$/g, '') .slice(0, 80) || 'session'; } function formatFileTimestamp(timestamp) { const date = new Date(timestamp); const year = date.getFullYear(); const month = String(date.getMonth() + 1).padStart(2, '0'); const day = String(date.getDate()).padStart(2, '0'); const hours = String(date.getHours()).padStart(2, '0'); const minutes = String(date.getMinutes()).padStart(2, '0'); const seconds = String(date.getSeconds()).padStart(2, '0'); return year + month + day + '-' + hours + minutes + seconds; } function buildSlideFileName(slide, index) { const sessionSlug = sanitizeFileNamePart(getSessionId()); const sequence = String(index + 1).padStart(3, '0'); return sessionSlug + '-slide-' + sequence + '-' + formatFileTimestamp(slide.savedAt) + '.png'; } function htmlEscape(value) { return String(value == null ? '' : value) .replace(/&/g, '&') .replace(//g, '>') .replace(/"/g, '"') .replace(/'/g, '''); } function injectStyles() { if (document.getElementById(STYLE_ID)) return; const style = document.createElement('style'); style.id = STYLE_ID; style.textContent = ` .teacher-canvas-wrapper { position: relative; } #${CONTROLS_ID} { position: absolute; top: 16px; right: 16px; z-index: 40; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; align-items: center; max-width: min(100%, 760px); pointer-events: auto; } #${CONTROLS_ID} button, #${CONTROLS_ID} select { appearance: none; border: 1px solid rgba(15, 23, 42, 0.14); border-radius: 10px; padding: 10px 14px; font-size: 13px; font-weight: 700; line-height: 1; box-shadow: 0 2px 10px rgba(15, 23, 42, 0.15); transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.12s ease, background-color 0.12s ease, color 0.12s ease; white-space: nowrap; user-select: none; } #${CONTROLS_ID} button { cursor: pointer; } #${CONTROLS_ID} button:hover, #${CONTROLS_ID} select:hover { box-shadow: 0 4px 14px rgba(15, 23, 42, 0.18); } #${CONTROLS_ID} button:active { transform: translateY(1px); } #${CONTROLS_ID} button[data-busy="true"] { opacity: 0.82; cursor: progress; } #${SAVE_BUTTON_ID} { background: rgba(255, 255, 255, 0.96); color: #111827; } #${AUTO_TOGGLE_ID} { background: #2563eb; color: #ffffff; } #${AUTO_TOGGLE_ID}[data-enabled="false"] { background: rgba(255, 255, 255, 0.96); color: #111827; } #${VIEW_BUTTON_ID} { background: #111827; color: #ffffff; } #${EXPORT_BUTTON_ID} { background: #059669; color: #ffffff; } #${CONTROLS_TOGGLE_ID} { background: rgba(15, 23, 42, 0.92); color: #ffffff; } #${AUTO_INTERVAL_SELECT_ID} { min-width: 122px; background: rgba(255, 255, 255, 0.96); color: #111827; } #${CONTROLS_ID}.${CONTROLS_COLLAPSED_CLASS} { max-width: none; } #${CONTROLS_ID}.${CONTROLS_COLLAPSED_CLASS} > :not(#${CONTROLS_TOGGLE_ID}) { display: none; } @media (max-width: 768px) { #${CONTROLS_ID} { top: 10px; right: 10px; gap: 6px; max-width: calc(100% - 20px); flex-direction: column; align-items: flex-end; } #${CONTROLS_ID} button, #${CONTROLS_ID} select { font-size: 12px; padding: 8px 10px; } } `; document.head.appendChild(style); } function openSlidesDb() { if (dbPromise) return dbPromise; dbPromise = new Promise((resolve, reject) => { if (!window.indexedDB) { reject(new Error('IndexedDB is not available in this browser.')); return; } const request = indexedDB.open(DB_NAME, DB_VERSION); request.onupgradeneeded = () => { const db = request.result; let store; if (!db.objectStoreNames.contains(STORE_NAME)) { store = db.createObjectStore(STORE_NAME, { keyPath: 'id' }); } else { store = request.transaction.objectStore(STORE_NAME); } if (!store.indexNames.contains('sessionId')) { store.createIndex('sessionId', 'sessionId', { unique: false }); } if (!store.indexNames.contains('savedAt')) { store.createIndex('savedAt', 'savedAt', { unique: false }); } }; request.onsuccess = () => resolve(request.result); request.onerror = () => reject(request.error || new Error('Failed to open slide database.')); request.onblocked = () => reject(new Error('Slide database is blocked by another tab.')); }); return dbPromise; } function requestToPromise(request) { return new Promise((resolve, reject) => { request.onsuccess = () => resolve(request.result); request.onerror = () => reject(request.error || new Error('IndexedDB request failed.')); }); } async function withStore(mode, executor) { const db = await openSlidesDb(); return new Promise((resolve, reject) => { const tx = db.transaction(STORE_NAME, mode); const store = tx.objectStore(STORE_NAME); let result; tx.oncomplete = async () => { try { resolve(await Promise.resolve(result)); } catch (error) { reject(error); } }; tx.onerror = () => reject(tx.error || new Error('Database transaction failed.')); tx.onabort = () => reject(tx.error || new Error('Database transaction aborted.')); try { result = executor(store, tx); } catch (error) { reject(error); } }); } function saveSlideRecord(record) { return withStore('readwrite', (store) => { store.put(record); return record; }); } async function getSlidesForCurrentSession() { const sessionId = getSessionId(); const slides = await withStore('readonly', (store) => { const index = store.index('sessionId'); return requestToPromise(index.getAll(sessionId)); }); return (slides || []).sort((a, b) => b.savedAt - a.savedAt); } function deleteSlideRecord(slideId) { return withStore('readwrite', (store) => { store.delete(slideId); return true; }); } async function clearCurrentSessionSlides() { const slides = await getSlidesForCurrentSession(); if (!slides.length) return 0; await withStore('readwrite', (store) => { for (const slide of slides) { store.delete(slide.id); } return slides.length; }); return slides.length; } function getControlsContainer() { return document.getElementById(CONTROLS_ID); } function getSaveButton() { return document.getElementById(SAVE_BUTTON_ID); } function getAutoToggleButton() { return document.getElementById(AUTO_TOGGLE_ID); } function getAutoIntervalSelect() { return document.getElementById(AUTO_INTERVAL_SELECT_ID); } function getViewButton() { return document.getElementById(VIEW_BUTTON_ID); } function getExportButton() { return document.getElementById(EXPORT_BUTTON_ID); } function getControlsToggleButton() { return document.getElementById(CONTROLS_TOGGLE_ID); } function setButtonStatus(button, label, isBusy, extraData) { if (!button) return; button.textContent = label; button.dataset.busy = isBusy ? 'true' : 'false'; if (extraData && typeof extraData === 'object') { for (const [key, value] of Object.entries(extraData)) { button.dataset[key] = String(value); } } } function resetButtonLater(key, callback, delay) { clearTimeout(buttonResetTimers[key]); buttonResetTimers[key] = setTimeout(callback, delay); } function getControlsToggleLabel() { return controlsHidden ? 'Show Controls' : 'Hide Controls'; } function getAutoToggleDefaultLabel() { return 'Auto Save: ' + (autoSaveEnabled ? 'On' : 'Off') + ' (' + formatIntervalLabel(autoSaveIntervalMs) + ')'; } function applyControlsVisibilityState() { const controls = getControlsContainer(); const toggleButton = getControlsToggleButton(); if (controls) { controls.classList.toggle(CONTROLS_COLLAPSED_CLASS, controlsHidden); controls.dataset.collapsed = controlsHidden ? 'true' : 'false'; } if (toggleButton) { toggleButton.textContent = getControlsToggleLabel(); toggleButton.title = controlsHidden ? 'Show the slide controls' : 'Hide the slide controls'; toggleButton.setAttribute('aria-pressed', controlsHidden ? 'true' : 'false'); } } function toggleControlsVisibility() { controlsHidden = !controlsHidden; writeControlsVisibilityPreference(controlsHidden); applyControlsVisibilityState(); } function syncAutoIntervalSelectValue() { const select = getAutoIntervalSelect(); if (select) { select.value = String(autoSaveIntervalMs); } } function setSaveButtonStatus(label, isBusy) { setButtonStatus(getSaveButton(), label, isBusy); } function setAutoToggleStatus(label, enabledState, isBusy) { setButtonStatus(getAutoToggleButton(), label, isBusy, { enabled: enabledState ? 'true' : 'false' }); } function setViewButtonStatus(label, isBusy) { setButtonStatus(getViewButton(), label, isBusy); } function setExportButtonStatus(label, isBusy) { setButtonStatus(getExportButton(), label, isBusy); } function resetSaveButton(delay) { resetButtonLater('save', () => setSaveButtonStatus('Save Slide', false), delay); } function resetAutoToggle(delay) { resetButtonLater('auto', () => setAutoToggleStatus(getAutoToggleDefaultLabel(), autoSaveEnabled, false), delay); } function resetViewButton(delay) { resetButtonLater('view', () => setViewButtonStatus('View Slides', false), delay); } function resetExportButton(delay) { resetButtonLater('export', () => setExportButtonStatus('Export ZIP', false), delay); } function captureCanvasDataUrl(canvas) { if (!canvas || !canvas.width || !canvas.height) { return null; } return canvas.toDataURL('image/png'); } async function hydrateLastSavedState() { try { const slides = await getSlidesForCurrentSession(); if (slides.length) { lastSavedDataUrl = slides[0].imageDataUrl || null; } } catch (error) { console.warn('Failed to hydrate saved slide state:', error); } } async function saveCurrentSlide(options = {}) { const trigger = options.trigger || 'manual'; const isAuto = trigger === 'auto'; const force = Boolean(options.force); if (isSaving) { if (!isAuto) { setSaveButtonStatus('Busy...', false); resetSaveButton(1000); } return false; } const canvas = getCanvas(); if (!canvas) { if (isAuto) { setAutoToggleStatus('Auto Save: Waiting...', autoSaveEnabled, false); resetAutoToggle(1200); } else { setSaveButtonStatus('Canvas not found', false); resetSaveButton(1300); } return false; } try { isSaving = true; if (isAuto) { setAutoToggleStatus('Auto Save: Saving...', autoSaveEnabled, true); } else { setSaveButtonStatus('Saving...', true); } await waitForAnimationFrame(); await waitForAnimationFrame(); const dataUrl = captureCanvasDataUrl(canvas); if (!dataUrl) { throw new Error('Canvas is empty or not ready.'); } if (!force && isAuto && dataUrl === lastSavedDataUrl) { setAutoToggleStatus('Auto Save: No change', autoSaveEnabled, false); resetAutoToggle(1200); return false; } await saveSlideRecord({ id: buildSlideId(), sessionId: getSessionId(), pageUrl: location.href, pageTitle: document.title, trigger, savedAt: Date.now(), imageDataUrl: dataUrl, width: canvas.width, height: canvas.height }); lastSavedDataUrl = dataUrl; refreshOpenViewerWindow(); if (isAuto) { setAutoToggleStatus('Auto Save: Saved', autoSaveEnabled, false); resetAutoToggle(1200); } else { setSaveButtonStatus('Saved Locally', false); resetSaveButton(1400); } return true; } catch (error) { console.error('Failed to save Vedantu slide:', error); if (isAuto) { setAutoToggleStatus('Auto Save: Failed', autoSaveEnabled, false); resetAutoToggle(1500); } else { setSaveButtonStatus('Save failed', false); resetSaveButton(1500); } return false; } finally { isSaving = false; } } function stopAutoSaveLoop() { if (!autoSaveTimeoutId) return; clearTimeout(autoSaveTimeoutId); autoSaveTimeoutId = null; } function queueNextAutoSave(delayMs = autoSaveIntervalMs) { if (!autoSaveEnabled) return; stopAutoSaveLoop(); autoSaveTimeoutId = setTimeout(async () => { autoSaveTimeoutId = null; if (!autoSaveEnabled) { return; } if (document.hidden) { queueNextAutoSave(Math.max(15000, autoSaveIntervalMs)); return; } await saveCurrentSlide({ trigger: 'auto' }); queueNextAutoSave(autoSaveIntervalMs); }, Math.max(1000, Number(delayMs) || autoSaveIntervalMs)); } function startAutoSaveLoop() { if (!autoSaveEnabled) return; queueNextAutoSave(autoSaveIntervalMs); } function syncAutoSaveLoop() { if (autoSaveEnabled && !document.hidden) { startAutoSaveLoop(); } else { stopAutoSaveLoop(); } syncAutoIntervalSelectValue(); setAutoToggleStatus(getAutoToggleDefaultLabel(), autoSaveEnabled, false); } function handleVisibilityChange() { if (!autoSaveEnabled) return; if (document.hidden) { stopAutoSaveLoop(); setAutoToggleStatus('Auto Save: Paused', autoSaveEnabled, false); resetAutoToggle(1200); return; } startAutoSaveLoop(); setAutoToggleStatus(getAutoToggleDefaultLabel(), autoSaveEnabled, false); } function toggleAutoSave() { autoSaveEnabled = !autoSaveEnabled; writeAutoSavePreference(autoSaveEnabled); syncAutoSaveLoop(); } function setAutoSaveInterval(intervalMs, options = {}) { const normalized = normalizeAutoSaveIntervalMs(intervalMs); const changed = normalized !== autoSaveIntervalMs; autoSaveIntervalMs = normalized; writeAutoSaveIntervalPreference(autoSaveIntervalMs); syncAutoSaveLoop(); if (!options.silent && changed) { setAutoToggleStatus('Auto Save: ' + (autoSaveEnabled ? 'On' : 'Off') + ' (' + formatIntervalLabel(autoSaveIntervalMs) + ')', autoSaveEnabled, false); resetAutoToggle(1400); } } function dataUrlToUint8Array(dataUrl) { const parts = String(dataUrl || '').split(','); const base64 = parts[1] || ''; const binary = atob(base64); const bytes = new Uint8Array(binary.length); for (let i = 0; i < binary.length; i += 1) { bytes[i] = binary.charCodeAt(i); } return bytes; } function getCrcTable() { if (getCrcTable.cache) return getCrcTable.cache; const table = new Uint32Array(256); for (let i = 0; i < 256; i += 1) { let c = i; for (let j = 0; j < 8; j += 1) { c = (c & 1) ? (0xEDB88320 ^ (c >>> 1)) : (c >>> 1); } table[i] = c >>> 0; } getCrcTable.cache = table; return table; } function crc32(bytes) { const table = getCrcTable(); let crc = 0xFFFFFFFF; for (let i = 0; i < bytes.length; i += 1) { crc = table[(crc ^ bytes[i]) & 0xFF] ^ (crc >>> 8); } return (crc ^ 0xFFFFFFFF) >>> 0; } function getDosDateTime(timestamp) { const date = new Date(timestamp || Date.now()); const year = Math.max(1980, date.getFullYear()); const dosTime = (date.getHours() << 11) | (date.getMinutes() << 5) | Math.floor(date.getSeconds() / 2); const dosDate = ((year - 1980) << 9) | ((date.getMonth() + 1) << 5) | date.getDate(); return { dosTime, dosDate }; } function buildStoredZip(files) { const encoder = new TextEncoder(); const localParts = []; const centralParts = []; let offset = 0; let centralSize = 0; for (const file of files) { const nameBytes = encoder.encode(file.name); const data = file.data; const checksum = crc32(data); const { dosTime, dosDate } = getDosDateTime(file.lastModified); const localHeader = new ArrayBuffer(30 + nameBytes.length); const localView = new DataView(localHeader); localView.setUint32(0, 0x04034B50, true); localView.setUint16(4, 20, true); localView.setUint16(6, 0x0800, true); localView.setUint16(8, 0, true); localView.setUint16(10, dosTime, true); localView.setUint16(12, dosDate, true); localView.setUint32(14, checksum, true); localView.setUint32(18, data.length, true); localView.setUint32(22, data.length, true); localView.setUint16(26, nameBytes.length, true); localView.setUint16(28, 0, true); new Uint8Array(localHeader, 30).set(nameBytes); localParts.push(localHeader, data); const centralHeader = new ArrayBuffer(46 + nameBytes.length); const centralView = new DataView(centralHeader); centralView.setUint32(0, 0x02014B50, true); centralView.setUint16(4, 20, true); centralView.setUint16(6, 20, true); centralView.setUint16(8, 0x0800, true); centralView.setUint16(10, 0, true); centralView.setUint16(12, dosTime, true); centralView.setUint16(14, dosDate, true); centralView.setUint32(16, checksum, true); centralView.setUint32(20, data.length, true); centralView.setUint32(24, data.length, true); centralView.setUint16(28, nameBytes.length, true); centralView.setUint16(30, 0, true); centralView.setUint16(32, 0, true); centralView.setUint16(34, 0, true); centralView.setUint16(36, 0, true); centralView.setUint32(38, 0, true); centralView.setUint32(42, offset, true); new Uint8Array(centralHeader, 46).set(nameBytes); centralParts.push(centralHeader); offset += localHeader.byteLength + data.length; centralSize += centralHeader.byteLength; } const endRecord = new ArrayBuffer(22); const endView = new DataView(endRecord); endView.setUint32(0, 0x06054B50, true); endView.setUint16(4, 0, true); endView.setUint16(6, 0, true); endView.setUint16(8, files.length, true); endView.setUint16(10, files.length, true); endView.setUint32(12, centralSize, true); endView.setUint32(16, offset, true); endView.setUint16(20, 0, true); return new Blob([...localParts, ...centralParts, endRecord], { type: 'application/zip' }); } function downloadBlob(blob, fileName) { const objectUrl = URL.createObjectURL(blob); const link = document.createElement('a'); link.href = objectUrl; link.download = fileName; link.style.display = 'none'; document.body.appendChild(link); link.click(); link.remove(); setTimeout(() => URL.revokeObjectURL(objectUrl), 30000); } async function exportSlidesAsZip(slides) { const orderedSlides = slides.slice().sort((a, b) => a.savedAt - b.savedAt); const files = orderedSlides.map((slide, index) => ({ name: buildSlideFileName(slide, index), data: dataUrlToUint8Array(slide.imageDataUrl), lastModified: slide.savedAt })); const zipBlob = buildStoredZip(files); const zipName = sanitizeFileNamePart(getSessionId()) + '-slides-' + formatFileTimestamp(Date.now()) + '.zip'; downloadBlob(zipBlob, zipName); return zipName; } async function exportCurrentSessionZip() { if (isExporting) { setExportButtonStatus('Exporting...', true); resetExportButton(1000); return false; } try { isExporting = true; setExportButtonStatus('Preparing ZIP...', true); const slides = await getSlidesForCurrentSession(); if (!slides.length) { setExportButtonStatus('No slides saved', false); resetExportButton(1400); return false; } await exportSlidesAsZip(slides); setExportButtonStatus('ZIP downloaded', false); resetExportButton(1600); return true; } catch (error) { console.error('Failed to export saved slides as ZIP:', error); setExportButtonStatus('Export failed', false); resetExportButton(1600); return false; } finally { isExporting = false; } } function buildViewerHtml() { const sessionId = getSessionId(); const sourceTitle = document.title || 'Vedantu Session'; return ` Saved Slides - ${htmlEscape(sessionId)}

Loading saved slides from this browser...

`; } function openViewer(options = {}) { const preferPopup = Boolean(options.preferPopup); const targetName = preferPopup ? 'tmVedantuSlidesViewerPopup' : 'tmVedantuSlidesViewerTab'; const features = preferPopup ? 'popup=yes,width=1200,height=840,resizable=yes,scrollbars=yes' : undefined; setViewButtonStatus(preferPopup ? 'Opening popup...' : 'Opening tab...', true); const viewerWindow = window.open('', targetName, features); if (!viewerWindow) { setViewButtonStatus('Viewer blocked', false); resetViewButton(1600); return false; } viewerWindow.document.open(); viewerWindow.document.write(buildViewerHtml()); viewerWindow.document.close(); viewerWindow.focus(); setViewButtonStatus(preferPopup ? 'Popup opened' : 'Viewer opened', false); resetViewButton(1400); return true; } function handleViewButtonClick(event) { openViewer({ preferPopup: Boolean(event && event.shiftKey) }); } function isViewerWindowAvailable(viewerWindow) { try { return Boolean(viewerWindow && !viewerWindow.closed && viewerWindow.document); } catch (error) { return false; } } function getOpenViewerWindow() { if (!isViewerWindowAvailable(activeViewerWindow)) { activeViewerWindow = null; return null; } return activeViewerWindow; } function setViewerWindowStatus(viewerWindow, message) { if (!isViewerWindowAvailable(viewerWindow)) return; const status = viewerWindow.document.getElementById('status'); if (status) { status.textContent = message; } } function updateViewerWindowStats(viewerWindow, slides) { if (!isViewerWindowAvailable(viewerWindow)) return; const stats = viewerWindow.document.getElementById('stats'); if (!stats) return; if (!slides.length) { stats.textContent = 'No slides saved for this session yet.'; return; } stats.textContent = slides.length + ' saved slide' + (slides.length === 1 ? '' : 's') + ' | Latest: ' + formatDateTime(slides[0].savedAt); } function downloadDataUrlFromDocument(targetDocument, dataUrl, fileName) { const link = targetDocument.createElement('a'); link.href = dataUrl; link.download = fileName; targetDocument.body.appendChild(link); link.click(); link.remove(); } function ensureViewerWindowShell(viewerWindow) { if (!isViewerWindowAvailable(viewerWindow)) { return false; } const doc = viewerWindow.document; if (doc.getElementById('tm-vedantu-viewer-app')) { return true; } doc.open(); doc.write(buildViewerHtml()); doc.close(); return Boolean(doc.getElementById('tm-vedantu-viewer-app')); } async function renderViewerWindow(viewerWindow) { if (!ensureViewerWindowShell(viewerWindow)) { return false; } const doc = viewerWindow.document; const root = doc.getElementById('slides-root'); if (!root) { return false; } root.className = 'empty'; root.textContent = 'Loading saved slides from this browser...'; setViewerWindowStatus(viewerWindow, 'Loading saved slides...'); try { const slides = await getSlidesForCurrentSession(); updateViewerWindowStats(viewerWindow, slides); if (!slides.length) { root.className = 'empty'; root.textContent = 'No locally saved slides were found for this session. Save a slide in the live class page first.'; setViewerWindowStatus(viewerWindow, 'Viewer ready.'); return true; } root.className = 'grid'; root.textContent = ''; slides.forEach((slide, index) => { const card = doc.createElement('article'); card.className = 'card'; const imgWrap = doc.createElement('div'); imgWrap.className = 'img-wrap'; const image = doc.createElement('img'); image.src = slide.imageDataUrl; image.alt = 'Saved slide ' + (index + 1); imgWrap.appendChild(image); const meta = doc.createElement('div'); meta.className = 'meta'; const line1 = doc.createElement('div'); line1.className = 'meta-line'; line1.innerHTML = 'Saved' + htmlEscape(formatDateTime(slide.savedAt)) + ''; const line2 = doc.createElement('div'); line2.className = 'meta-line'; line2.innerHTML = 'Trigger' + htmlEscape(String(slide.trigger || 'manual')) + ''; const line3 = doc.createElement('div'); line3.className = 'meta-line'; line3.innerHTML = 'Size' + Number(slide.width || 0) + ' x ' + Number(slide.height || 0) + ''; const actions = doc.createElement('div'); actions.className = 'card-actions'; const openBtn = doc.createElement('button'); openBtn.type = 'button'; openBtn.textContent = 'Open Image'; openBtn.addEventListener('click', () => { viewerWindow.open(slide.imageDataUrl, '_blank'); }); const downloadBtn = doc.createElement('button'); downloadBtn.type = 'button'; downloadBtn.textContent = 'Download PNG'; downloadBtn.addEventListener('click', () => { downloadDataUrlFromDocument(doc, slide.imageDataUrl, buildSlideFileName(slide, slides.length - index - 1)); setViewerWindowStatus(viewerWindow, 'PNG download started.'); }); const deleteBtn = doc.createElement('button'); deleteBtn.type = 'button'; deleteBtn.className = 'danger'; deleteBtn.textContent = 'Delete'; deleteBtn.addEventListener('click', async () => { if (!viewerWindow.confirm('Delete this saved slide from this browser?')) return; await deleteSlideRecord(slide.id); setViewerWindowStatus(viewerWindow, 'Saved slide deleted.'); await renderViewerWindow(viewerWindow); }); actions.append(openBtn, downloadBtn, deleteBtn); meta.append(line1, line2, line3, actions); card.append(imgWrap, meta); root.appendChild(card); }); setViewerWindowStatus(viewerWindow, 'Viewer ready.'); return true; } catch (error) { console.error('Failed to render Vedantu slide viewer:', error); root.className = 'empty'; root.textContent = 'Failed to load saved slides: ' + (error && error.message ? error.message : error); updateViewerWindowStats(viewerWindow, []); setViewerWindowStatus(viewerWindow, 'Viewer error.'); return false; } } function bindViewerWindow(viewerWindow) { if (!ensureViewerWindowShell(viewerWindow)) { return false; } const doc = viewerWindow.document; const app = doc.getElementById('tm-vedantu-viewer-app'); if (!app) { return false; } if (app.dataset.bound === 'true') { return true; } const refreshBtn = doc.getElementById('refresh-btn'); const latestBtn = doc.getElementById('latest-btn'); const exportBtn = doc.getElementById('export-btn'); const clearBtn = doc.getElementById('clear-btn'); if (refreshBtn) { refreshBtn.addEventListener('click', () => { void renderViewerWindow(viewerWindow); }); } if (latestBtn) { latestBtn.addEventListener('click', async () => { const slides = await getSlidesForCurrentSession(); if (!slides.length) { setViewerWindowStatus(viewerWindow, 'No saved slides are available for download.'); return; } downloadDataUrlFromDocument(doc, slides[0].imageDataUrl, buildSlideFileName(slides[0], 0)); setViewerWindowStatus(viewerWindow, 'Latest slide download started.'); }); } if (exportBtn) { exportBtn.addEventListener('click', async () => { const slides = await getSlidesForCurrentSession(); if (!slides.length) { setViewerWindowStatus(viewerWindow, 'No saved slides are available for ZIP export.'); return; } await exportSlidesAsZip(slides); setViewerWindowStatus(viewerWindow, 'ZIP download started for ' + slides.length + ' saved slide' + (slides.length === 1 ? '' : 's') + '.'); }); } if (clearBtn) { clearBtn.addEventListener('click', async () => { if (!viewerWindow.confirm('Delete all saved slides for this session from this browser?')) return; const count = await clearCurrentSessionSlides(); setViewerWindowStatus(viewerWindow, count ? 'Deleted ' + count + ' saved slide' + (count === 1 ? '' : 's') + '.' : 'There were no saved slides to clear.'); await renderViewerWindow(viewerWindow); }); } viewerWindow.addEventListener('beforeunload', () => { if (activeViewerWindow === viewerWindow) { activeViewerWindow = null; } }, { once: true }); app.dataset.bound = 'true'; return true; } function refreshOpenViewerWindow() { const viewerWindow = getOpenViewerWindow(); if (!viewerWindow) { return; } void renderViewerWindow(viewerWindow); } function buildViewerHtml() { const sessionId = getSessionId(); const sourceTitle = document.title || 'Vedantu Session'; return ` Saved Slides - ${htmlEscape(sessionId)}

Loading saved slides from this browser...