vgapp 1.1.3 → 1.1.5

package/app/utils/js/components/sanitize.js

@@ -1,150 +1,150 @@
-const SVG_NAMESPACE = "http://www.w3.org/2000/svg";
-const DEFAULT_ALLOWED_SVG_TAGS = new Set([
-	"svg",
-	"g",
-	"path",
-	"line",
-	"polyline",
-	"polygon",
-	"circle",
-	"ellipse",
-	"rect",
-	"defs",
-	"symbol",
-	"title",
-	"use"
-]);
-const DEFAULT_ALLOWED_SVG_ATTRS = new Set([
-	"xmlns",
-	"viewbox",
-	"width",
-	"height",
-	"fill",
-	"stroke",
-	"stroke-width",
-	"stroke-linecap",
-	"stroke-linejoin",
-	"stroke-miterlimit",
-	"stroke-dasharray",
-	"stroke-dashoffset",
-	"opacity",
-	"transform",
-	"class",
-	"x",
-	"y",
-	"x1",
-	"y1",
-	"x2",
-	"y2",
-	"cx",
-	"cy",
-	"r",
-	"rx",
-	"ry",
-	"points",
-	"d",
-	"role",
-	"focusable",
-	"aria-hidden",
-	"href",
-	"xlink:href"
-]);
-
-function escapeHtml(value) {
-	return String(value)
-		.replace(/&/g, "&")
-		.replace(/</g, "&lt;")
-		.replace(/>/g, "&gt;")
-		.replace(/"/g, "&quot;")
-		.replace(/'/g, "&#39;");
-}
-
-function sanitizeSvgNode(node, allowedTags = DEFAULT_ALLOWED_SVG_TAGS, allowedAttrs = DEFAULT_ALLOWED_SVG_ATTRS) {
-	if (!node) {
-		return null;
-	}
-
-	if (node.nodeType === Node.TEXT_NODE) {
-		return document.createTextNode(node.textContent || "");
-	}
-
-	if (node.nodeType !== Node.ELEMENT_NODE) {
-		return null;
-	}
-
-	const tagName = node.tagName.toLowerCase();
-	if (!allowedTags.has(tagName)) {
-		return null;
-	}
-
-	const safeNode = document.createElementNS(SVG_NAMESPACE, tagName);
-
-	Array.from(node.attributes || []).forEach((attr) => {
-		const name = attr.name.toLowerCase();
-		const attrValue = attr.value || "";
-
-		if (!allowedAttrs.has(name) || name.startsWith("on")) {
-			return;
-		}
-
-		if ((name === "href" || name === "xlink:href") && attrValue && !attrValue.startsWith("#")) {
-			return;
-		}
-
-		safeNode.setAttribute(name, attrValue);
-	});
-
-	Array.from(node.childNodes || []).forEach((child) => {
-		const safeChild = sanitizeSvgNode(child, allowedTags, allowedAttrs);
-		if (safeChild) {
-			safeNode.append(safeChild);
-		}
-	});
-
-	return safeNode;
-}
-
-export function toSafeHtmlString(value, {
-	allowedSvgTags = DEFAULT_ALLOWED_SVG_TAGS,
-	allowedSvgAttrs = DEFAULT_ALLOWED_SVG_ATTRS
-} = {}) {
-	if (value === null || value === undefined) {
-		return "";
-	}
-
-	const content = String(value).trim();
-	if (!content) {
-		return "";
-	}
-
-	if (!content.includes("<")) {
-		return escapeHtml(content);
-	}
-
-	const template = document.createElement("template");
-	template.innerHTML = content;
-
-	const sanitizedParts = Array.from(template.content.childNodes)
-		.map((node) => sanitizeSvgNode(node, allowedSvgTags, allowedSvgAttrs))
-		.filter(Boolean)
-		.map((node) => {
-			if (node.nodeType === Node.TEXT_NODE) {
-				return escapeHtml(node.textContent || "");
-			}
-			if (node.nodeType === Node.ELEMENT_NODE) {
-				return node.outerHTML;
-			}
-			return "";
-		});
-
-	const sanitized = sanitizedParts.join("");
-	return sanitized || escapeHtml(content);
-}
-
-class Sanitize {
-	static toSafeHtmlString(value, options) {
-		return toSafeHtmlString(value, options);
-	}
-}
-
-export default Sanitize;
+const SVG_NAMESPACE = "http://www.w3.org/2000/svg";
+const DEFAULT_ALLOWED_SVG_TAGS = new Set([
+	"svg",
+	"g",
+	"path",
+	"line",
+	"polyline",
+	"polygon",
+	"circle",
+	"ellipse",
+	"rect",
+	"defs",
+	"symbol",
+	"title",
+	"use"
+]);
+const DEFAULT_ALLOWED_SVG_ATTRS = new Set([
+	"xmlns",
+	"viewbox",
+	"width",
+	"height",
+	"fill",
+	"stroke",
+	"stroke-width",
+	"stroke-linecap",
+	"stroke-linejoin",
+	"stroke-miterlimit",
+	"stroke-dasharray",
+	"stroke-dashoffset",
+	"opacity",
+	"transform",
+	"class",
+	"x",
+	"y",
+	"x1",
+	"y1",
+	"x2",
+	"y2",
+	"cx",
+	"cy",
+	"r",
+	"rx",
+	"ry",
+	"points",
+	"d",
+	"role",
+	"focusable",
+	"aria-hidden",
+	"href",
+	"xlink:href"
+]);
+
+function escapeHtml(value) {
+	return String(value)
+		.replace(/&/g, "&amp;")
+		.replace(/</g, "&lt;")
+		.replace(/>/g, "&gt;")
+		.replace(/"/g, "&quot;")
+		.replace(/'/g, "&#39;");
+}
+
+function sanitizeSvgNode(node, allowedTags = DEFAULT_ALLOWED_SVG_TAGS, allowedAttrs = DEFAULT_ALLOWED_SVG_ATTRS) {
+	if (!node) {
+		return null;
+	}
+
+	if (node.nodeType === Node.TEXT_NODE) {
+		return document.createTextNode(node.textContent || "");
+	}
+
+	if (node.nodeType !== Node.ELEMENT_NODE) {
+		return null;
+	}
+
+	const tagName = node.tagName.toLowerCase();
+	if (!allowedTags.has(tagName)) {
+		return null;
+	}
+
+	const safeNode = document.createElementNS(SVG_NAMESPACE, tagName);
+
+	Array.from(node.attributes || []).forEach((attr) => {
+		const name = attr.name.toLowerCase();
+		const attrValue = attr.value || "";
+
+		if (!allowedAttrs.has(name) || name.startsWith("on")) {
+			return;
+		}
+
+		if ((name === "href" || name === "xlink:href") && attrValue && !attrValue.startsWith("#")) {
+			return;
+		}
+
+		safeNode.setAttribute(name, attrValue);
+	});
+
+	Array.from(node.childNodes || []).forEach((child) => {
+		const safeChild = sanitizeSvgNode(child, allowedTags, allowedAttrs);
+		if (safeChild) {
+			safeNode.append(safeChild);
+		}
+	});
+
+	return safeNode;
+}
+
+export function toSafeHtmlString(value, {
+	allowedSvgTags = DEFAULT_ALLOWED_SVG_TAGS,
+	allowedSvgAttrs = DEFAULT_ALLOWED_SVG_ATTRS
+} = {}) {
+	if (value === null || value === undefined) {
+		return "";
+	}
+
+	const content = String(value).trim();
+	if (!content) {
+		return "";
+	}
+
+	if (!content.includes("<")) {
+		return escapeHtml(content);
+	}
+
+	const template = document.createElement("template");
+	template.innerHTML = content;
+
+	const sanitizedParts = Array.from(template.content.childNodes)
+		.map((node) => sanitizeSvgNode(node, allowedSvgTags, allowedSvgAttrs))
+		.filter(Boolean)
+		.map((node) => {
+			if (node.nodeType === Node.TEXT_NODE) {
+				return escapeHtml(node.textContent || "");
+			}
+			if (node.nodeType === Node.ELEMENT_NODE) {
+				return node.outerHTML;
+			}
+			return "";
+		});
+
+	const sanitized = sanitizedParts.join("");
+	return sanitized || escapeHtml(content);
+}
+
+class Sanitize {
+	static toSafeHtmlString(value, options) {
+		return toSafeHtmlString(value, options);
+	}
+}
+
+export default Sanitize;

package/app/utils/js/components/video-metadata.js

@@ -0,0 +1,140 @@
+const VIDEO_EXTENSIONS = new Set([
+	'mp4',
+	'webm',
+	'mov',
+	'mkv',
+	'avi',
+	'm4v',
+	'ogv'
+]);
+
+const getFileExtension = (file) => {
+	const fileName = String(file?.name || '').toLowerCase();
+	const dot = fileName.lastIndexOf('.');
+	if (dot < 0 || dot >= fileName.length - 1) {
+		return '';
+	}
+	return fileName.slice(dot + 1);
+};
+
+const waitEvent = (node, eventName) => new Promise((resolve, reject) => {
+	const onResolve = () => {
+		cleanup();
+		resolve(true);
+	};
+
+	const onReject = () => {
+		cleanup();
+		reject(new Error(eventName));
+	};
+
+	const cleanup = () => {
+		node.removeEventListener(eventName, onResolve);
+		node.removeEventListener('error', onReject);
+	};
+
+	node.addEventListener(eventName, onResolve, { once: true });
+	node.addEventListener('error', onReject, { once: true });
+});
+
+const seekVideo = (video, time) => new Promise((resolve, reject) => {
+	const onSeeked = () => {
+		cleanup();
+		resolve(true);
+	};
+
+	const onError = () => {
+		cleanup();
+		reject(new Error('seek'));
+	};
+
+	const cleanup = () => {
+		video.removeEventListener('seeked', onSeeked);
+		video.removeEventListener('error', onError);
+	};
+
+	video.addEventListener('seeked', onSeeked, { once: true });
+	video.addEventListener('error', onError, { once: true });
+	video.currentTime = time;
+});
+
+const canvasToBlob = (canvas, type = 'image/jpeg', quality = 0.92) => new Promise((resolve) => {
+	canvas.toBlob((blob) => resolve(blob || null), type, quality);
+});
+
+const extractVideoMetadata = async (file) => {
+	if (!(file instanceof File)) {
+		return null;
+	}
+
+	const ext = getFileExtension(file);
+	const isVideoType = String(file.type || '').toLowerCase().startsWith('video/');
+	if (!isVideoType && !VIDEO_EXTENSIONS.has(ext)) {
+		return null;
+	}
+
+	if (!file.size) {
+		return null;
+	}
+
+	let objectUrl = '';
+	try {
+		objectUrl = URL.createObjectURL(file);
+
+		const video = document.createElement('video');
+		video.preload = 'metadata';
+		video.muted = true;
+		video.playsInline = true;
+		video.crossOrigin = 'anonymous';
+		video.src = objectUrl;
+
+		await waitEvent(video, 'loadedmetadata');
+
+		const width = Number(video.videoWidth || 0);
+		const height = Number(video.videoHeight || 0);
+		const duration = Number(video.duration || 0);
+
+		if (!width || !height || !Number.isFinite(width) || !Number.isFinite(height)) {
+			return {
+				duration: Number.isFinite(duration) ? duration : 0,
+				width: 0,
+				height: 0
+			};
+		}
+
+		const seekTime = duration > 1 ? Math.min(1, Math.max(0, duration / 2)) : 0;
+		await seekVideo(video, seekTime);
+
+		const canvas = document.createElement('canvas');
+		canvas.width = width;
+		canvas.height = height;
+		const ctx = canvas.getContext('2d');
+		if (!ctx) {
+			return {
+				duration: Number.isFinite(duration) ? duration : 0,
+				width,
+				height
+			};
+		}
+
+		ctx.drawImage(video, 0, 0, width, height);
+		const posterBlob = await canvasToBlob(canvas, 'image/jpeg', 0.92);
+
+		return {
+			duration: Number.isFinite(duration) ? duration : 0,
+			width,
+			height,
+			posterBlob: posterBlob || null
+		};
+	} catch {
+		return null;
+	} finally {
+		if (objectUrl) {
+			URL.revokeObjectURL(objectUrl);
+		}
+	}
+};
+
+export {
+	extractVideoMetadata
+};