Merge branch 'develop' of https://github.com/misskey-dev/misskey into develop

CHANGELOG.md

@@ -22,6 +22,9 @@ You should also include the user name that made the change.
 - update dependencies @syuilo
 - enhance: display URL of QR code for TOTP registration @syuilo
 - make CAPTCHA required for signin to improve security @syuilo
+- The theme color is now better validated. @Johann150
+  Your own theme color may be unset if it was in an invalid format.
+  Admins should check their instance settings if in doubt.
 - Perform port diagnosis at startup only when Listen fails @mei23
 
 ### Bugfixes
@@ -37,6 +40,7 @@ You should also include the user name that made the change.
 - Server: fix internal in-memory caching @Johann150
 - Server: use correct order of attachments on notes @Johann150
 - Server: prevent crash when processing certain PNGs @syuilo
+- Server: Fix unable to generate video thumbnails @mei23
 
 ## 12.110.1 (2022/04/23)
 

packages/backend/migration/1652859567549-uniform-themecolor.js

@@ -0,0 +1,38 @@
+import tinycolor from 'tinycolor2';
+
+export class uniformThemecolor1652859567549 {
+	name = 'uniformThemecolor1652859567549'
+
+	async up(queryRunner) {
+		const formatColor = (color) => {
+			let tc = new tinycolor(color);
+			if (color.isValid()) {
+				return color.toHexString();
+			} else {
+				return null;
+			}
+		};
+
+		await Promise.all(queryRunner.query('SELECT "id", "themeColor" FROM "instance" WHERE "themeColor" IS NOT NULL')
+		.then(instances => instances.map(instance => {
+			// update theme color to uniform format, e.g. #00ff00
+			// invalid theme colors get set to null
+			instance.color = formatColor(instance.color);
+
+			return queryRunner.query('UPDATE "instance" SET "themeColor" = :themeColor WHERE "id" = :id', instance);
+		})));
+
+		// also fix own theme color
+		await queryRunner.query('SELECT "themeColor" FROM "meta" WHERE "themeColor" IS NOT NULL LIMIT 1')
+		.then(metas => {
+			if (metas.length > 0) {
+				return queryRunner.query('UPDATE "meta" SET "themeColor" = :color', { color: formatColor(metas[0].color) });
+			}
+		});
+	}
+
+	async down(queryRunner) {
+		// The original representation is not stored, so migrating back is not possible.
+		// The new format also works in older versions so this is not a problem.
+	}
+}

packages/backend/src/server/api/endpoints/admin/update-meta.ts

@@ -27,7 +27,7 @@ export const paramDef = {
 		blockedHosts: { type: 'array', nullable: true, items: {
 			type: 'string',
 		} },
-		themeColor: { type: 'string', nullable: true },
+		themeColor: { type: 'string', nullable: true, pattern: '^#[0-9a-fA-F]{6}$' },
 		mascotImageUrl: { type: 'string', nullable: true },
 		bannerUrl: { type: 'string', nullable: true },
 		errorImageUrl: { type: 'string', nullable: true },

packages/backend/src/services/drive/generate-video-thumbnail.ts

@@ -1,7 +1,7 @@
 import * as fs from 'node:fs';
 import * as tmp from 'tmp';
 import { IImage, convertToJpeg } from './image-processor.js';
-import * as FFmpeg from 'fluent-ffmpeg';
+import FFmpeg from 'fluent-ffmpeg';
 
 export async function GenerateVideoThumbnail(path: string): Promise<IImage> {
 	const [outDir, cleanup] = await new Promise<[string, any]>((res, rej) => {

packages/backend/src/services/fetch-instance-metadata.ts

@@ -1,5 +1,6 @@
 import { DOMWindow, JSDOM } from 'jsdom';
 import fetch from 'node-fetch';
+import tinycolor from 'tinycolor2';
 import { getJson, getHtml, getAgentByUrl } from '@/misc/fetch.js';
 import { Instance } from '@/models/entities/instance.js';
 import { Instances } from '@/models/index.js';
@@ -208,16 +209,11 @@ async function fetchIconUrl(instance: Instance, doc: DOMWindow['document'] | nul
 }
 
 async function getThemeColor(doc: DOMWindow['document'] | null, manifest: Record<string, any> | null): Promise<string | null> {
-	if (doc) {
+	const themeColor = doc?.querySelector('meta[name="theme-color"]')?.getAttribute('content') || manifest?.theme_color;
-		const themeColor = doc.querySelector('meta[name="theme-color"]')?.getAttribute('content');
 
 	if (themeColor) {
-			return themeColor;
+		const color = new tinycolor(themeColor);
-		}
+		if (color.isValid()) return color.toHexString();
-	}
-
-	if (manifest) {
-		return manifest.theme_color;
 	}
 
 	return null;

packages/client/src/components/instance-ticker.vue

@@ -39,6 +39,19 @@ const bg = {
 	border-radius: 4px 0 0 4px;
 	overflow: hidden;
 	color: #fff;
+	text-shadow: /* .866 ≈ sin(60deg) */
+		1px 0 1px #000,
+		.866px .5px 1px #000,
+		.5px .866px 1px #000,
+		0 1px 1px #000,
+		-.5px .866px 1px #000,
+		-.866px .5px 1px #000,
+		-1px 0 1px #000,
+		-.866px -.5px 1px #000,
+		-.5px -.866px 1px #000,
+		0 -1px 1px #000,
+		.5px -.866px 1px #000,
+		.866px -.5px 1px #000;
 
 	> .icon {
 		height: 100%;