nodebb-plugin-pdf-secure 1.2.2 → 1.2.4

package/library.js

@@ -11,9 +11,21 @@ const nonceStore = require('./lib/nonce-store');
 
 const plugin = {};
 
+// Memory cache for viewer.html
+let viewerHtmlCache = null;
+
 plugin.init = async (params) => {
 	const { router, middleware } = params;
 
+	// Pre-load viewer.html into memory cache
+	const viewerPath = path.join(__dirname, 'static', 'viewer.html');
+	try {
+		viewerHtmlCache = fs.readFileSync(viewerPath, 'utf8');
+		console.log('[PDF-Secure] Viewer template cached in memory');
+	} catch (err) {
+		console.error('[PDF-Secure] Failed to cache viewer template:', err.message);
+	}
+
 	// PDF direct access blocker middleware
 	// Intercepts requests to uploaded PDF files and returns 403
 	router.get('/assets/uploads/files/:filename', (req, res, next) => {
@@ -42,6 +54,11 @@ plugin.init = async (params) => {
 			return res.status(400).send('Invalid file');
 		}
 
+		// Check cache
+		if (!viewerHtmlCache) {
+			return res.status(500).send('Viewer not available');
+		}
+
 		// Serve the viewer template with comprehensive security headers
 		res.set({
 			'X-Frame-Options': 'SAMEORIGIN',
@@ -55,32 +72,23 @@ plugin.init = async (params) => {
 			'Content-Security-Policy': "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://cdnjs.cloudflare.com; style-src 'self' 'unsafe-inline' https://cdnjs.cloudflare.com; img-src 'self' data: blob:; connect-src 'self'; frame-ancestors 'self'",
 		});
 
-		// Read and send the viewer HTML
-		const viewerPath = path.join(__dirname, 'static', 'viewer.html');
-		fs.readFile(viewerPath, 'utf8', (err, html) => {
-			if (err) {
-				return res.status(500).send('Viewer not found');
-			}
-
-			// Inject the filename and config into the viewer
-			// Also inject CSS to hide uploadOverlay immediately
-			const injectedHtml = html
-				.replace('</head>', `
-					<style>
-						/* Hide upload overlay since PDF will auto-load */
-						#uploadOverlay { display: none !important; }
-					</style>
-					<script>
-						window.PDF_SECURE_CONFIG = {
-							filename: ${JSON.stringify(safeName)},
-							relativePath: ${JSON.stringify(req.app.get('relative_path') || '')},
-							csrfToken: ${JSON.stringify(req.csrfToken ? req.csrfToken() : '')}
-						};
-					</script>
-				</head>`);
-
-			res.type('html').send(injectedHtml);
-		});
+		// Inject the filename and config into the cached viewer
+		const injectedHtml = viewerHtmlCache
+			.replace('</head>', `
+				<style>
+					/* Hide upload overlay since PDF will auto-load */
+					#uploadOverlay { display: none !important; }
+				</style>
+				<script>
+					window.PDF_SECURE_CONFIG = {
+						filename: ${JSON.stringify(safeName)},
+						relativePath: ${JSON.stringify(req.app.get('relative_path') || '')},
+						csrfToken: ${JSON.stringify(req.csrfToken ? req.csrfToken() : '')}
+					};
+				</script>
+			</head>`);
+
+		res.type('html').send(injectedHtml);
 	});
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nodebb-plugin-pdf-secure",
-  "version": "1.2.2",
+  "version": "1.2.4",
   "description": "Secure PDF viewer plugin for NodeBB - prevents downloading, enables canvas-only rendering with Premium group support",
   "main": "library.js",
   "repository": {

package/static/lib/main.js

@@ -1,15 +1,54 @@
 'use strict';
 
-console.log('[PDF-Secure] main.js loaded');
-
-// Main plugin logic - PDF links become inline embedded viewers
+// Main plugin logic - PDF links become inline embedded viewers with lazy loading + queue
 (async function () {
+	// Loading queue - only load one PDF at a time
+	const loadQueue = [];
+	let isLoading = false;
+	let currentResolver = null;
+
+	// Listen for postMessage from iframe when PDF is fully rendered
+	window.addEventListener('message', function (event) {
+		if (event.data && event.data.type === 'pdf-secure-ready') {
+			console.log('[PDF-Secure] Queue: PDF ready -', event.data.filename);
+			if (currentResolver) {
+				currentResolver();
+				currentResolver = null;
+			}
+		}
+	});
+
+	async function processQueue() {
+		if (isLoading || loadQueue.length === 0) return;
+
+		isLoading = true;
+		const { wrapper, filename, placeholder } = loadQueue.shift();
+
+		try {
+			await loadPdfIframe(wrapper, filename, placeholder);
+		} catch (err) {
+			console.error('[PDF-Secure] Load error:', err);
+		}
+
+		isLoading = false;
+
+		// Small delay between loads
+		setTimeout(processQueue, 200);
+	}
+
+	function queuePdfLoad(wrapper, filename, placeholder) {
+		loadQueue.push({ wrapper, filename, placeholder });
+		processQueue();
+	}
+
 	try {
 		var hooks = await app.require('hooks');
-		console.log('[PDF-Secure] Hooks loaded');
 
 		hooks.on('action:ajaxify.end', function () {
-			console.log('[PDF-Secure] ajaxify.end');
+			// Clear queue on page change
+			loadQueue.length = 0;
+			isLoading = false;
+			currentResolver = null;
 			interceptPdfLinks();
 		});
 	} catch (err) {
@@ -29,14 +68,13 @@ console.log('[PDF-Secure] main.js loaded');
 				var href = link.getAttribute('href');
 				var parts = href.split('/');
 				var filename = parts[parts.length - 1];
-				console.log('[PDF-Secure] Embedding:', filename);
 
-				// Create inline viewer container with INLINE STYLES to ensure they work
+				// Create container
 				var container = document.createElement('div');
 				container.className = 'pdf-secure-embed';
 				container.style.cssText = 'margin:16px 0;border-radius:12px;overflow:hidden;background:#1f1f1f;border:1px solid rgba(255,255,255,0.1);box-shadow:0 4px 20px rgba(0,0,0,0.25);';
 
-				// Header with filename - ALL INLINE STYLES
+				// Header
 				var header = document.createElement('div');
 				header.className = 'pdf-secure-embed-header';
 				header.style.cssText = 'display:flex;align-items:center;justify-content:space-between;padding:10px 16px;background:linear-gradient(135deg,#2d2d2d 0%,#252525 100%);border-bottom:1px solid rgba(255,255,255,0.08);';
@@ -45,7 +83,6 @@ console.log('[PDF-Secure] main.js loaded');
 				title.className = 'pdf-secure-embed-title';
 				title.style.cssText = 'display:flex;align-items:center;gap:10px;color:#fff;font-size:14px;font-weight:500;';
 
-				// PDF icon with INLINE SIZE
 				var icon = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
 				icon.setAttribute('viewBox', '0 0 24 24');
 				icon.style.cssText = 'width:20px;height:20px;min-width:20px;max-width:20px;fill:#e81224;flex-shrink:0;';
@@ -58,7 +95,7 @@ console.log('[PDF-Secure] main.js loaded');
 				title.appendChild(icon);
 				title.appendChild(nameSpan);
 
-				// Actions (fullscreen button)
+				// Actions
 				var actions = document.createElement('div');
 				actions.style.cssText = 'display:flex;gap:8px;';
 
@@ -78,35 +115,110 @@ console.log('[PDF-Secure] main.js loaded');
 				header.appendChild(actions);
 				container.appendChild(header);
 
-				// Iframe wrapper
+				// Body with loading placeholder
 				var iframeWrapper = document.createElement('div');
 				iframeWrapper.className = 'pdf-secure-embed-body';
 				iframeWrapper.style.cssText = 'position:relative;width:100%;height:600px;background:#525659;';
 
-				var iframe = document.createElement('iframe');
-				iframe.className = 'pdf-secure-iframe';
-				iframe.style.cssText = 'width:100%;height:100%;border:none;display:block;';
-				iframe.src = config.relative_path + '/plugins/pdf-secure/viewer?file=' + encodeURIComponent(filename);
-				iframe.setAttribute('frameborder', '0');
-				iframe.setAttribute('allowfullscreen', 'true');
-				iframe.setAttribute('loading', 'lazy');
+				// Loading placeholder - ALWAYS VISIBLE until PDF ready (z-index: 10)
+				var loadingPlaceholder = document.createElement('div');
+				loadingPlaceholder.className = 'pdf-loading-placeholder';
+				loadingPlaceholder.style.cssText = 'position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#2d2d2d;color:#fff;gap:16px;z-index:10;transition:opacity 0.3s;';
+				loadingPlaceholder.innerHTML = `
+					<svg viewBox="0 0 24 24" style="width:48px;height:48px;fill:#555;">
+						<path d="M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zm4 18H6V4h7v5h5v11z"/>
+					</svg>
+					<div class="pdf-loading-text" style="font-size:14px;color:#a0a0a0;">Sırada bekliyor...</div>
+					<style>@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}</style>
+				`;
+				iframeWrapper.appendChild(loadingPlaceholder);
 
-				iframeWrapper.appendChild(iframe);
 				container.appendChild(iframeWrapper);
 
-				// Fullscreen button handler
+				// Fullscreen handler
 				fullscreenBtn.addEventListener('click', function () {
-					if (iframe.requestFullscreen) {
-						iframe.requestFullscreen();
-					} else if (iframe.webkitRequestFullscreen) {
-						iframe.webkitRequestFullscreen();
-					} else if (iframe.msRequestFullscreen) {
-						iframe.msRequestFullscreen();
+					var iframe = iframeWrapper.querySelector('iframe');
+					if (iframe) {
+						if (iframe.requestFullscreen) iframe.requestFullscreen();
+						else if (iframe.webkitRequestFullscreen) iframe.webkitRequestFullscreen();
 					}
 				});
 
 				link.replaceWith(container);
+
+				// LAZY LOADING with Intersection Observer + Queue
+				var observer = new IntersectionObserver(function (entries) {
+					entries.forEach(function (entry) {
+						if (entry.isIntersecting) {
+							// Update placeholder to show loading state
+							var textEl = loadingPlaceholder.querySelector('.pdf-loading-text');
+							if (textEl) textEl.textContent = 'PDF Yükleniyor...';
+
+							var svgEl = loadingPlaceholder.querySelector('svg');
+							if (svgEl) {
+								svgEl.style.fill = '#0078d4';
+								svgEl.style.animation = 'spin 1s linear infinite';
+								svgEl.innerHTML = '<path d="M12 4V2A10 10 0 0 0 2 12h2a8 8 0 0 1 8-8z"/>';
+							}
+
+							// Add to queue
+							queuePdfLoad(iframeWrapper, filename, loadingPlaceholder);
+							observer.disconnect();
+						}
+					});
+				}, {
+					rootMargin: '200px',
+					threshold: 0
+				});
+
+				observer.observe(container);
 			});
 		});
 	}
+
+	function loadPdfIframe(wrapper, filename, placeholder) {
+		return new Promise((resolve, reject) => {
+			// Create iframe HIDDEN (z-index: 1, under placeholder)
+			var iframe = document.createElement('iframe');
+			iframe.className = 'pdf-secure-iframe';
+			iframe.style.cssText = 'position:absolute;top:0;left:0;width:100%;height:100%;border:none;z-index:1;';
+			iframe.src = config.relative_path + '/plugins/pdf-secure/viewer?file=' + encodeURIComponent(filename);
+			iframe.setAttribute('frameborder', '0');
+			iframe.setAttribute('allowfullscreen', 'true');
+
+			// Store resolver for postMessage callback
+			currentResolver = function () {
+				// Fade out placeholder, show iframe
+				if (placeholder) {
+					placeholder.style.opacity = '0';
+					setTimeout(function () {
+						if (placeholder.parentNode) {
+							placeholder.remove();
+						}
+					}, 300);
+				}
+				resolve();
+			};
+
+			iframe.onerror = function () {
+				currentResolver = null;
+				if (placeholder) {
+					var textEl = placeholder.querySelector('.pdf-loading-text');
+					if (textEl) textEl.textContent = 'Yükleme hatası!';
+				}
+				reject(new Error('Failed to load iframe'));
+			};
+
+			wrapper.appendChild(iframe);
+
+			// Timeout fallback (60 seconds for large PDFs)
+			setTimeout(function () {
+				if (currentResolver) {
+					console.log('[PDF-Secure] Queue: Timeout, forcing next');
+					currentResolver();
+					currentResolver = null;
+				}
+			}, 60000);
+		});
+	}
 })();

package/static/viewer.html

@@ -1506,11 +1506,15 @@
                 // Step 4: Load into viewer
                 await loadPDFFromBuffer(pdfBuffer);
 
-                // Step 5: Security - clear references to prevent extraction
-                // Nullify the buffer after loading
+                // Step 5: Notify parent that PDF is fully loaded (for queue system)
+                if (window.parent && window.parent !== window) {
+                    window.parent.postMessage({ type: 'pdf-secure-ready', filename: config.filename }, '*');
+                }
+
+                // Step 6: Security - clear references to prevent extraction
                 pdfBuffer = null;
 
-                console.log('[PDF-Secure] Buffer references cleared');
+                console.log('[PDF-Secure] PDF fully loaded and ready');
 
             } catch (err) {
                 console.error('[PDF-Secure] Auto-load error:', err);