single-file-core 1.5.111 → 1.5.112

package/core/helper.js

@@ -75,6 +75,8 @@ const COMMENT_HEADER_LEGACY = "Archive processed by SingleFile";
 const SINGLE_FILE_UI_ELEMENT_CLASS = "single-file-ui-element";
 const INFOBAR_TAGNAME = infobar.INFOBAR_TAGNAME;
 const EMPTY_RESOURCE = "data:,";
+const POSTER_CONTENT_TYPES = ["image/webp", "image/jpeg"];
+const POSTER_QUALITY = 0.8;
 const DEFAULT_REPLACED_CHARACTERS = ["~", "+", "?", "%", "*", ":", "|", "\"", "<", ">", "\\\\", "\x00-\x1f", "\x7F"];
 const DEFAULT_REPLACEMENT_CHARACTER = "_";
 const DEFAULT_REPLACEMENT_CHARACTERS = ["～", "＋", "？", "％", "＊", "：", "｜", "＂", "＜", "＞", "＼"];
@@ -143,9 +145,24 @@ export {
 	WAIT_FOR_USERSCRIPT_PROPERTY_NAME,
 	MESSAGE_PREFIX,
 	NO_SCRIPT_PROPERTY_NAME,
-	NESTING_TRACK_ID_ATTRIBUTE_NAME
+	NESTING_TRACK_ID_ATTRIBUTE_NAME,
+	getPosterDataURI
 };
 
+// a poster is a still of a video the reader cannot play, so it is stored in a
+// lossy format: the same frame costs an order of magnitude less than as a PNG.
+// toDataURL falls back to PNG without reporting it when it does not support the
+// format, so the type it returned is tested instead of assumed
+function getPosterDataURI(canvasElement) {
+	for (const contentType of POSTER_CONTENT_TYPES) {
+		const dataURI = canvasElement.toDataURL(contentType, POSTER_QUALITY);
+		if (dataURI.startsWith("data:" + contentType)) {
+			return dataURI;
+		}
+	}
+	return canvasElement.toDataURL("image/png");
+}
+
 let userScriptHandlerObserver;
 
 function initUserScriptHandler() {
@@ -534,14 +551,16 @@ function getResourcesInfo(win, doc, element, options, data, elementHidden, compu
 			});
 			element.setAttribute(VIDEO_ATTRIBUTE_NAME, data.videos.length - 1);
 		}
-		if (!element.getAttribute("poster")) {
+		// the posters are only inserted when the videos are blocked, capturing them
+		// otherwise encodes a frame per video for nothing
+		if (options.blockVideos && !element.getAttribute("poster")) {
 			const canvasElement = doc.createElement("canvas");
 			const context = canvasElement.getContext("2d");
 			canvasElement.width = element.videoWidth;
 			canvasElement.height = element.videoHeight;
 			try {
 				context.drawImage(element, 0, 0, canvasElement.width, canvasElement.height);
-				data.posters.push(canvasElement.toDataURL("image/png"));
+				data.posters.push(getPosterDataURI(canvasElement));
 				element.setAttribute(POSTER_ATTRIBUTE_NAME, data.posters.length - 1);
 				data.markedElements.push(element);
 				// eslint-disable-next-line no-unused-vars

package/core/index.js

@@ -155,6 +155,7 @@ const STAGES = [{
 		{ action: "replaceStylesheets" },
 		{ action: "replaceStyleAttributes" },
 		{ action: "insertVariables" },
+		{ action: "removeEmptyMediaAutoplay" },
 		{ option: "compressHTML", action: "compressHTML" },
 		{ action: "cleanupPage" }
 	],
@@ -824,6 +825,25 @@ class Processor {
 		});
 	}
 
+	// a media element left without any source can never start, and the attribute
+	// would keep it announcing a playback that never happens. The sources are
+	// dropped whenever they could not be stored, so this is not specific to
+	// blocked videos, and it runs on the final state to leave alone an element
+	// that kept one of several sources
+	removeEmptyMediaAutoplay() {
+		this.doc.querySelectorAll("video[autoplay], audio[autoplay]").forEach(element => {
+			const sourceElements = Array.from(element.querySelectorAll("source"));
+			if (!hasSource(element) && !sourceElements.some(hasSource)) {
+				element.removeAttribute("autoplay");
+			}
+		});
+
+		function hasSource(element) {
+			const src = element.getAttribute("src");
+			return Boolean(src) && src != util.EMPTY_RESOURCE;
+		}
+	}
+
 	removeFrames() {
 		const frameElements = this.doc.querySelectorAll("iframe, frame, object[type=\"text/html\"][data]");
 		this.stats.set("discarded", "frames", frameElements.length);
@@ -1195,7 +1215,7 @@ class Processor {
 								canvasElement.height = videoData.size.videoHeight;
 								context.drawImage(temporaryVideoElement, 0, 0, canvasElement.width, canvasElement.height);
 								try {
-									videoElement.poster = canvasElement.toDataURL("image/png");
+									videoElement.poster = util.getPosterDataURI(canvasElement);
 									// eslint-disable-next-line no-unused-vars
 								} catch (error) {
 									videoElement.poster = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='" + videoData.size.videoWidth + "' height='" + videoData.size.videoHeight + "'%3E%3C/svg%3E";

package/core/util.js

@@ -225,7 +225,8 @@ function getInstance(utilOptions) {
 		INFOBAR_TAGNAME: helper.INFOBAR_TAGNAME,
 		WAIT_FOR_USERSCRIPT_PROPERTY_NAME: helper.WAIT_FOR_USERSCRIPT_PROPERTY_NAME,
 		NO_SCRIPT_PROPERTY_NAME: helper.NO_SCRIPT_PROPERTY_NAME,
-		NESTING_TRACK_ID_ATTRIBUTE_NAME: helper.NESTING_TRACK_ID_ATTRIBUTE_NAME
+		NESTING_TRACK_ID_ATTRIBUTE_NAME: helper.NESTING_TRACK_ID_ATTRIBUTE_NAME,
+		getPosterDataURI: helper.getPosterDataURI
 	};
 
 	async function getContent(resourceURL, options) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "single-file-core",
-  "version": "1.5.111",
+  "version": "1.5.112",
   "description": "SingleFile Core",
   "author": "Gildas Lormeau",
   "license": "AGPL-3.0-or-later",