vgapp 1.5.6 → 1.5.8

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

@@ -1,140 +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
-};
+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
+};

package/app/utils/scss/_backdrop.scss

@@ -1,6 +1,6 @@
 @use "mixin" as mix;
 @use "variables" as vars;
-
+
 .vg-backdrop {
 	@include mix.mix-vars('backdrop', vars.$backdrop-map);
 	position: fixed;
@@ -11,9 +11,9 @@
 	background: var(--vg-backdrop-bg);
 	transition: var(--vg-backdrop-transition);
 	opacity: 0;
-	z-index: var(--vg-backdrop-z-index);
-
-	&.fade.show {
+	z-index: var(--vg-backdrop-z-index);
+
+	&.fade.show {
 		opacity: var(--vg-backdrop-opacity);
 	}
-}
+}

package/app/utils/scss/_theme-default.scss

@@ -1,12 +1,12 @@
-@use "theme";
-
-// Default adapter for the ready-made VGApp stylesheet. Projects that own
-// their theme selector can use vgapp/theme and emit the same variables there.
-:root,
-[data-vg-theme="light"] {
-	@include theme.theme-variables(theme.$theme-light);
-}
-
-[data-vg-theme="dark"] {
-	@include theme.theme-variables(theme.$theme-dark);
-}
+@use "theme";
+
+// Default adapter for the ready-made VGApp stylesheet. Projects that own
+// their theme selector can use vgapp/theme and emit the same variables there.
+:root,
+[data-vg-theme="light"] {
+	@include theme.theme-variables(theme.$theme-light);
+}
+
+[data-vg-theme="dark"] {
+	@include theme.theme-variables(theme.$theme-dark);
+}

package/app/utils/scss/_theme.scss

@@ -1,7 +1,7 @@
-@forward "tokens";
-
-@mixin theme-variables($theme) {
-	@each $token, $value in $theme {
-		--vg-#{$token}: #{$value};
-	}
-}
+@forward "tokens";
+
+@mixin theme-variables($theme) {
+	@each $token, $value in $theme {
+		--vg-#{$token}: #{$value};
+	}
+}

package/app/utils/scss/default.scss

@@ -1,11 +1,11 @@
 @forward "index";
 
-@forward "index";
-
-@use "animation";
-@use "placement";
-@use "theme-default";
-@use "backdrop";
-@use "closable";
-@use "collapsable";
-@use "loaders";
+@forward "index";
+
+@use "animation";
+@use "placement";
+@use "theme-default";
+@use "backdrop";
+@use "closable";
+@use "collapsable";
+@use "loaders";

package/app/utils/scss/functions.scss

@@ -1,26 +1,26 @@
-@use "sass:color";
-@use "sass:map";
-@use "sass:meta";
-
-@function is-map($var){
-	@return meta.type-of($var) == 'map';
-}
+@use "sass:color";
+@use "sass:map";
+@use "sass:meta";
+
+@function is-map($var){
+	@return meta.type-of($var) == 'map';
+}
 
 // Merge multiple maps
 @function map-merge-multiple($maps...) {
-	$merged-maps: ();
-
-	@each $map in $maps {
-		$merged-maps: map.merge($merged-maps, $map);
-	}
-	@return $merged-maps;
-}
+	$merged-maps: ();
+
+	@each $map in $maps {
+		$merged-maps: map.merge($merged-maps, $map);
+	}
+	@return $merged-maps;
+}
 
 // mix colors
-@function shade-color($color, $weight) {
-	@return color.mix(black, $color, $weight);
-}
-
-@function tint-color($color, $weight) {
-	@return color.mix(white, $color, $weight);
-}
+@function shade-color($color, $weight) {
+	@return color.mix(black, $color, $weight);
+}
+
+@function tint-color($color, $weight) {
+	@return color.mix(white, $color, $weight);
+}

package/app/utils/scss/index.scss

@@ -1,4 +1,4 @@
-@forward "theme";
-@forward "functions";
-@forward "variables";
-@forward "mixin";
+@forward "theme";
+@forward "functions";
+@forward "variables";
+@forward "mixin";

package/app/utils/scss/mixin.scss

@@ -1,26 +1,26 @@
-@use "sass:meta";
-@use "variables" as vars;
-
-@mixin mix-vars($module, $properties) {
-	@each $key, $value in $properties {
-		@if (meta.type-of($value) == 'map') {
-			@each $k, $v in $value {
-				--vg-#{$module}-#{$key}-#{$k}: #{$v};
-			}
-		} @else {
-			--vg-#{$module}-#{$key}: #{$value};
-		}
+@use "sass:meta";
+@use "variables" as vars;
+
+@mixin mix-vars($module, $properties) {
+	@each $key, $value in $properties {
+		@if (meta.type-of($value) == 'map') {
+			@each $k, $v in $value {
+				--vg-#{$module}-#{$key}-#{$k}: #{$v};
+			}
+		} @else {
+			--vg-#{$module}-#{$key}: #{$value};
+		}
 	}
 }
 
 @mixin mix-alert-color-mode($class) {
 	$colors: ['success', 'info', 'warning', 'danger', 'dark'];
 
-	@each $value in $colors {
-		&.#{$class}-#{$value} {
-			@each $property, $val in vars.get-alert-color($value) {
+	@each $value in $colors {
+		&.#{$class}-#{$value} {
+			@each $property, $val in vars.get-alert-color($value) {
 				--#{$class}-#{$property}: #{$val};
 			}
 		}
 	}
-}
+}