use mqdefault thumbnail

VRCYoutubeSearch.js

@@ -1,6 +1,6 @@
 import { searchYouTubeVideos, continueYouTubeVideoSearch, getYouTubePlaylist, continueYouTubePlaylist } from "./simpleYoutubeSearch.js";
 import { putVrcUrl } from "./vrcurl.js";
-import { makeImageSheetVrcUrl, iconWidth, iconHeight } from "./imagesheet.js";
+import { makeImageSheetVrcUrl } from "./imagesheet.js";
 import { getTrending } from "./trending.js";
 
 var cache = {};
@@ -52,27 +52,25 @@ async function VRCYoutubeSearch(pool, query, options = {}) {
 		var {videos, continuationData} = playlistId ? await getYouTubePlaylist(playlistId) : await searchYouTubeVideos(query);
 	}
 	
+	var images = [];
+
 	if (options.thumbnails) {
-		var thumbnailUrls = videos.map(video => video.thumbnail.url);
-		var smallestThumbnail = videos.map(video => video.thumbnail).reduce((smallest, selected) => selected.height < smallest.height ? selected : smallest);
+		videos.forEach(video => video.thumbnail.url && images.push(video.thumbnail));
 	}
 
 	if (options.icons) {
-		var iconUrls = new Set();
-		for (let video of videos) {
-			iconUrls.add(video.channel.iconUrl);
-		}
-		iconUrls = [...iconUrls];
+		let iconUrls = new Set();
+		videos.forEach(video => video.channel.iconUrl && iconUrls.add(video.channel.iconUrl));
+		iconUrls.forEach(url => images.push({
+			width: 68,//todo pass from yt data not hardcode
+			height: 68,
+			url
+		}));
 	}
 
-	if (thumbnailUrls?.length || iconUrls?.length) {
+	if (images.length) {
 		try {
-			var {vrcurl: imagesheet_vrcurl, thumbnails, icons} = await makeImageSheetVrcUrl(pool, {
-				thumbnailUrls,
-				iconUrls,
-				thumbnailWidth: smallestThumbnail.width,
-				thumbnailHeight: smallestThumbnail.height
-			});
+			var {vrcurl: imagesheet_vrcurl} = await makeImageSheetVrcUrl(pool, images);
 			data.imagesheet_vrcurl = imagesheet_vrcurl;
 		} catch (error) {
 			console.error(error.stack);
@@ -81,24 +79,20 @@ async function VRCYoutubeSearch(pool, query, options = {}) {
 
 	for (let video of videos) {
 		video.vrcurl = await putVrcUrl(pool, {type: "redirect", url: `https://www.youtube.com/watch?v=${video.id}`});
-		if (thumbnails?.length) {
-			let thumbnail = thumbnails.find(x => x.url == video.thumbnail.url);
-			video.thumbnail = {
-				x: thumbnail?.x,
-				y: thumbnail?.y,
-				width: smallestThumbnail?.width,
-				height: smallestThumbnail?.height
-			};
-		}
-		if (icons?.length) {
-			let icon = icons.find(x => x.url == video.channel.iconUrl);
-			video.channel.icon = {
-				x: icon?.x,
-				y: icon?.y,
-				width: iconWidth,
-				height: iconHeight
-			};
-		}
+		let thumbnail = images.find(image => image.url == video.thumbnail.url);
+		video.thumbnail = thumbnail ? {
+			x: thumbnail?.x,
+			y: thumbnail?.y,
+			width: thumbnail?.width,
+			height: thumbnail?.height
+		} : undefined;
+		let icon = images.find(image => image.url == video.channel.iconUrl);
+		video.channel.icon = icon ? {
+			x: icon?.x,
+			y: icon?.y,
+			width: icon?.width,
+			height: icon?.height
+		} : undefined;
 		if (options.captions) {
 			video.captions_vrcurl = await putVrcUrl(pool, {type: "captions", videoId: video.id});
 		}

imagesheet.js

@@ -1,75 +1,42 @@
 import { createCanvas, loadImage } from 'canvas';
+import potpack from 'potpack';
 import { putVrcUrl } from './vrcurl.js';
 
 var store = {};
 
-
-const maxSheetWidth = 2048;
-const maxSheetHeight = 2048;
-export const iconWidth = 68;
-export const iconHeight = 68;
-//const maxIconRowLen = Math.floor(maxSheetWidth / iconWidth);
-const maxIconRowLen = 3;
-//const maxIconColLen = Math.floor(maxSheetHeight / iconHeight);
-
-async function createImageSheet({thumbnailUrls = [], iconUrls = [], thumbnailWidth = 360, thumbnailHeight = 202}) {
-	
-	const maxThumbnailRowLen = Math.floor(maxSheetWidth / thumbnailWidth);
-	//const maxThumbnailColLen = Math.floor(maxSheetHeight / thumbnailHeight);
-
-	var thumbnails = thumbnailUrls.map((url, index) => ({
-		x: index % maxThumbnailRowLen * thumbnailWidth,
-		y: Math.floor(index / maxThumbnailRowLen) * thumbnailHeight,
-		url
-	}));
-
-	const iconStartX = thumbnailWidth * Math.min(maxThumbnailRowLen, thumbnails.length);
-
-	var icons = iconUrls.map((url, index) => ({
-		x: iconStartX + index % maxIconRowLen * iconWidth,
-		y: Math.floor(index / maxIconRowLen) * iconHeight,
-		url
-	}));
-
-	const canvasWidth = Math.max(
-		Math.min(thumbnails.length, maxThumbnailRowLen) * thumbnailWidth,
-		iconStartX + Math.min(icons.length, maxIconRowLen) * iconWidth
-	);
-	const canvasHeight = Math.max(thumbnails.length ? thumbnails.at(-1).y + thumbnailHeight : 0, icons.length ? icons.at(-1)?.y + iconHeight : 0);
-
-	var canvas = createCanvas(Math.min(maxSheetWidth, canvasWidth), Math.min(maxSheetHeight, canvasHeight));
+async function createImageSheet(images /*[{width, height, url}]*/) {
+	images.forEach(image => {
+		image.w = image.width;
+		image.h = image.height;
+	});
+	var {w, h, fill} = potpack(images);
+	if (w > 2048) {
+		console.warn("Imagesheet exceeded max width");
+		w = 2048;
+	}
+	if (h > 2048) {
+		console.warn("Imagesheet exceeded max height");
+		h = 2048;
+	}
+	var canvas = createCanvas(w, h);
 	var ctx = canvas.getContext('2d');
 
-	var promises = [];
+	await Promise.all(images.map(({x, y, w, h, url}) => (async function(){
+		if (!url) return;
+		var image = await loadImage(url);
+		ctx.drawImage(image, x, y, w, h);
+	})().catch(error => console.error(error.stack))));
 
-	if (thumbnails.length) {
-		promises = promises.concat(thumbnails.map(({x, y, url}) => (async function(){
-			if (!url) return;
-			var image = await loadImage(url);
-			ctx.drawImage(image, x, y, thumbnailWidth, thumbnailHeight);
-		})().catch(error => console.error(error.stack))));
-	}
-
-	if (icons.length) {
-		promises = promises.concat(icons.map(({x, y, url}) => (async function(){
-			if (!url) return;
-			var image = await loadImage(url);
-			ctx.drawImage(image, x, y, iconWidth, iconHeight);
-		})().catch(error => console.error(error.stack))));
-	}
-
-	await Promise.all(promises);
 	return {
 		imagesheet: canvas.toBuffer("image/png"),
-		thumbnails, icons
+		images
 	};
 }
 
-
-export async function makeImageSheetVrcUrl(pool, opts) {
+export async function makeImageSheetVrcUrl(pool, images) {
 	var num = await putVrcUrl(pool, {type: "imagesheet"});
 	var key = `${pool}:${num}`;
-	var promise = createImageSheet(opts);
+	var promise = createImageSheet(images);
 	store[key] = promise;
 	promise.then(() => {
 		setTimeout(() => {

package-lock.json

@@ -11,7 +11,8 @@
 				"fast-xml-parser": "^4.3.4",
 				"keyv": "^4.5.4",
 				"koa": "^2.14.2",
-				"koa-send": "^5.0.1"
+				"koa-send": "^5.0.1",
+				"potpack": "^2.0.0"
 			},
 			"engines": {
 				"node": ">=18.0.0"
@@ -1262,6 +1263,11 @@
 			"resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-6.2.1.tgz",
 			"integrity": "sha512-JLyh7xT1kizaEvcaXOQwOc2/Yhw6KZOvPf1S8401UyLk86CU79LN3vl7ztXGm/pZ+YjoyAJ4rxmHwbkBXJX+yw=="
 		},
+		"node_modules/potpack": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/potpack/-/potpack-2.0.0.tgz",
+			"integrity": "sha512-Q+/tYsFU9r7xoOJ+y/ZTtdVQwTWfzjbiXBDMM/JKUux3+QPP02iUuIoeBQ+Ot6oEDlC+/PGjB/5A3K7KKb7hcw=="
+		},
 		"node_modules/promise-inflight": {
 			"version": "1.0.1",
 			"resolved": "https://registry.npmjs.org/promise-inflight/-/promise-inflight-1.0.1.tgz",

package.json

@@ -6,7 +6,8 @@
 		"fast-xml-parser": "^4.3.4",
 		"keyv": "^4.5.4",
 		"koa": "^2.14.2",
-		"koa-send": "^5.0.1"
+		"koa-send": "^5.0.1",
+		"potpack": "^2.0.0"
 	},
 	"engines": {
 		"node": ">=18.0.0"

util.js

@@ -40,7 +40,12 @@ export function parseVideoRendererData(data) {
 		description: data.detailedMetadataSnippets?.[0]?.snippetText?.runs?.concatRunsText() 
 			|| data.descriptionSnippet?.runs?.concatRunsText(),
 		//thumbnailUrl: data.thumbnail?.thumbnails?.find(x => (x.width == 360 && x.height == 202) || (x.width == 246 && x.height == 138))?.url || data.thumbnail?.thumbnails?.[0]?.url,
-		thumbnail: data.thumbnail?.thumbnails?.find(x => (x.width == 360 && x.height == 202) || (x.width == 246 && x.height == 138)) || data.thumbnail?.thumbnails?.[0],
+		//thumbnail: data.thumbnail?.thumbnails?.find(x => (x.width == 360 && x.height == 202) || (x.width == 246 && x.height == 138)) || data.thumbnail?.thumbnails?.[0],
+		thumbnail: {
+			url: `https://i.ytimg.com/vi/${data.videoId}/mqdefault.jpg`,
+			width: 320,
+			height: 180
+		},
 		uploaded: data.publishedTimeText?.simpleText || data.videoInfo?.runs?.[2]?.text,
 		lengthText: data.lengthText?.simpleText,
 		longLengthText: data.lengthText?.accessibility?.accessibilityData?.label,