[fix] .wav .flac ファイルを再生可能にする (#10686)

* .wav .flac ファイルを再生可能にする
file-typeにより判定されたMIME TypeをHTML5 Audio/Video要素に認識されるものに書き換える

* fix typecheck error

* frontend側の FILE_TYPE_BROWSERSAFEも更新

* Update packages/backend/src/core/FileInfoService.ts

* ✌️

* 後方互換を確保

* add tests

* update changelog.md

---------

Co-authored-by: tamaina <tamaina@hotmail.co.jp>
This commit is contained in:
Yuriha 2023-04-26 02:17:58 +09:00 committed by GitHub
parent 2aa75f5489
commit a986203b38
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 292 additions and 160 deletions

View File

@ -43,6 +43,7 @@
- Fix: Content-Dispositionのパースでエラーが発生した場合にダウンロードが完了しない問題を修正 - Fix: Content-Dispositionのパースでエラーが発生した場合にダウンロードが完了しない問題を修正
- Fix: API: i/update avatarIdとbannerIdにnullを渡した時、画像がリセットされない問題を修正 - Fix: API: i/update avatarIdとbannerIdにnullを渡した時、画像がリセットされない問題を修正
- Fix: 1:1ではない画像のリアクション通知バッジが左や上に寄ってしまっていたのを中央に来るように修正 - Fix: 1:1ではない画像のリアクション通知バッジが左や上に寄ってしまっていたのを中央に来るように修正
- Fix: .wav, .flacが再生できない問題を修正新しくアップロードされたファイルのみ修正が適用されます
## 13.11.3 ## 13.11.3

View File

@ -56,6 +56,11 @@ export const FILE_TYPE_BROWSERSAFE = [
'audio/webm', 'audio/webm',
'audio/aac', 'audio/aac',
// see https://github.com/misskey-dev/misskey/pull/10686
'audio/flac',
'audio/wav',
// backward compatibility
'audio/x-flac', 'audio/x-flac',
'audio/vnd.wave', 'audio/vnd.wave',
]; ];

View File

@ -5,7 +5,7 @@ import * as stream from 'node:stream';
import * as util from 'node:util'; import * as util from 'node:util';
import { Injectable } from '@nestjs/common'; import { Injectable } from '@nestjs/common';
import { FSWatcher } from 'chokidar'; import { FSWatcher } from 'chokidar';
import { fileTypeFromFile } from 'file-type'; import * as fileType from 'file-type';
import FFmpeg from 'fluent-ffmpeg'; import FFmpeg from 'fluent-ffmpeg';
import isSvg from 'is-svg'; import isSvg from 'is-svg';
import probeImageSize from 'probe-image-size'; import probeImageSize from 'probe-image-size';
@ -301,21 +301,34 @@ export class FileInfoService {
return fs.promises.access(path).then(() => true, () => false); return fs.promises.access(path).then(() => true, () => false);
} }
@bindThis
public fixMime(mime: string | fileType.MimeType): string {
// see https://github.com/misskey-dev/misskey/pull/10686
if (mime === "audio/x-flac") {
return "audio/flac";
}
if (mime === "audio/vnd.wave") {
return "audio/wav";
}
return mime;
}
/** /**
* Detect MIME Type and extension * Detect MIME Type and extension
*/ */
@bindThis @bindThis
public async detectType(path: string): Promise<{ public async detectType(path: string): Promise<{
mime: string; mime: string;
ext: string | null; ext: string | null;
}> { }> {
// Check 0 byte // Check 0 byte
const fileSize = await this.getFileSize(path); const fileSize = await this.getFileSize(path);
if (fileSize === 0) { if (fileSize === 0) {
return TYPE_OCTET_STREAM; return TYPE_OCTET_STREAM;
} }
const type = await fileTypeFromFile(path); const type = await fileType.fileTypeFromFile(path);
if (type) { if (type) {
// XMLはSVGかもしれない // XMLはSVGかもしれない
@ -324,7 +337,7 @@ export class FileInfoService {
} }
return { return {
mime: type.mime, mime: this.fixMime(type.mime),
ext: type.ext, ext: type.ext,
}; };
} }

View File

@ -454,7 +454,8 @@ export class FileServerService {
fileRole: 'original', fileRole: 'original',
file, file,
filename: file.name, filename: file.name,
mime: file.type, // 古いファイルは修正前のmimeを持っているのでできるだけ修正してあげる
mime: this.fileInfoService.fixMime(file.type),
ext: null, ext: null,
path, path,
}; };

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

View File

@ -7,10 +7,10 @@ import { ModuleMocker } from 'jest-mock';
import { Test } from '@nestjs/testing'; import { Test } from '@nestjs/testing';
import { GlobalModule } from '@/GlobalModule.js'; import { GlobalModule } from '@/GlobalModule.js';
import { FileInfoService } from '@/core/FileInfoService.js'; import { FileInfoService } from '@/core/FileInfoService.js';
import { DI } from '@/di-symbols.js'; //import { DI } from '@/di-symbols.js';
import { AiService } from '@/core/AiService.js'; import { AiService } from '@/core/AiService.js';
import type { TestingModule } from '@nestjs/testing'; import type { TestingModule } from '@nestjs/testing';
import type { jest } from '@jest/globals'; import { describe, beforeAll, afterAll, test } from '@jest/globals';
import type { MockFunctionMetadata } from 'jest-mock'; import type { MockFunctionMetadata } from 'jest-mock';
const _filename = fileURLToPath(import.meta.url); const _filename = fileURLToPath(import.meta.url);
@ -74,164 +74,271 @@ describe('FileInfoService', () => {
}); });
}); });
test('Generic JPEG', async () => { describe('IMAGE', () => {
const path = `${resources}/Lenna.jpg`; test('Generic JPEG', async () => {
const info = await fileInfoService.getFileInfo(path, { skipSensitiveDetection: true }) as any; const path = `${resources}/Lenna.jpg`;
delete info.warnings; const info = await fileInfoService.getFileInfo(path, { skipSensitiveDetection: true }) as any;
delete info.blurhash; delete info.warnings;
delete info.sensitive; delete info.blurhash;
delete info.porn; delete info.sensitive;
assert.deepStrictEqual(info, { delete info.porn;
size: 25360, assert.deepStrictEqual(info, {
md5: '091b3f259662aa31e2ffef4519951168', size: 25360,
type: { md5: '091b3f259662aa31e2ffef4519951168',
mime: 'image/jpeg', type: {
ext: 'jpg', mime: 'image/jpeg',
}, ext: 'jpg',
width: 512, },
height: 512, width: 512,
orientation: undefined, height: 512,
orientation: undefined,
});
});
test('Generic APNG', async () => {
const path = `${resources}/anime.png`;
const info = await fileInfoService.getFileInfo(path, { skipSensitiveDetection: true }) as any;
delete info.warnings;
delete info.blurhash;
delete info.sensitive;
delete info.porn;
assert.deepStrictEqual(info, {
size: 1868,
md5: '08189c607bea3b952704676bb3c979e0',
type: {
mime: 'image/apng',
ext: 'apng',
},
width: 256,
height: 256,
orientation: undefined,
});
});
test('Generic AGIF', async () => {
const path = `${resources}/anime.gif`;
const info = await fileInfoService.getFileInfo(path, { skipSensitiveDetection: true }) as any;
delete info.warnings;
delete info.blurhash;
delete info.sensitive;
delete info.porn;
assert.deepStrictEqual(info, {
size: 2248,
md5: '32c47a11555675d9267aee1a86571e7e',
type: {
mime: 'image/gif',
ext: 'gif',
},
width: 256,
height: 256,
orientation: undefined,
});
});
test('PNG with alpha', async () => {
const path = `${resources}/with-alpha.png`;
const info = await fileInfoService.getFileInfo(path, { skipSensitiveDetection: true }) as any;
delete info.warnings;
delete info.blurhash;
delete info.sensitive;
delete info.porn;
assert.deepStrictEqual(info, {
size: 3772,
md5: 'f73535c3e1e27508885b69b10cf6e991',
type: {
mime: 'image/png',
ext: 'png',
},
width: 256,
height: 256,
orientation: undefined,
});
});
test('Generic SVG', async () => {
const path = `${resources}/image.svg`;
const info = await fileInfoService.getFileInfo(path, { skipSensitiveDetection: true }) as any;
delete info.warnings;
delete info.blurhash;
delete info.sensitive;
delete info.porn;
assert.deepStrictEqual(info, {
size: 505,
md5: 'b6f52b4b021e7b92cdd04509c7267965',
type: {
mime: 'image/svg+xml',
ext: 'svg',
},
width: 256,
height: 256,
orientation: undefined,
});
});
test('SVG with XML definition', async () => {
// https://github.com/misskey-dev/misskey/issues/4413
const path = `${resources}/with-xml-def.svg`;
const info = await fileInfoService.getFileInfo(path, { skipSensitiveDetection: true }) as any;
delete info.warnings;
delete info.blurhash;
delete info.sensitive;
delete info.porn;
assert.deepStrictEqual(info, {
size: 544,
md5: '4b7a346cde9ccbeb267e812567e33397',
type: {
mime: 'image/svg+xml',
ext: 'svg',
},
width: 256,
height: 256,
orientation: undefined,
});
});
test('Dimension limit', async () => {
const path = `${resources}/25000x25000.png`;
const info = await fileInfoService.getFileInfo(path, { skipSensitiveDetection: true }) as any;
delete info.warnings;
delete info.blurhash;
delete info.sensitive;
delete info.porn;
assert.deepStrictEqual(info, {
size: 75933,
md5: '268c5dde99e17cf8fe09f1ab3f97df56',
type: {
mime: 'application/octet-stream', // do not treat as image
ext: null,
},
width: 25000,
height: 25000,
orientation: undefined,
});
});
test('Rotate JPEG', async () => {
const path = `${resources}/rotate.jpg`;
const info = await fileInfoService.getFileInfo(path, { skipSensitiveDetection: true }) as any;
delete info.warnings;
delete info.blurhash;
delete info.sensitive;
delete info.porn;
assert.deepStrictEqual(info, {
size: 12624,
md5: '68d5b2d8d1d1acbbce99203e3ec3857e',
type: {
mime: 'image/jpeg',
ext: 'jpg',
},
width: 512,
height: 256,
orientation: 8,
});
}); });
}); });
test('Generic APNG', async () => { describe('AUDIO', () => {
const path = `${resources}/anime.png`; test('MP3', async () => {
const info = await fileInfoService.getFileInfo(path, { skipSensitiveDetection: true }) as any; const path = `${resources}/kick_gaba7.mp3`;
delete info.warnings; const info = await fileInfoService.getFileInfo(path, { skipSensitiveDetection: true }) as any;
delete info.blurhash; delete info.warnings;
delete info.sensitive; delete info.blurhash;
delete info.porn; delete info.sensitive;
assert.deepStrictEqual(info, { delete info.porn;
size: 1868, delete info.width;
md5: '08189c607bea3b952704676bb3c979e0', delete info.height;
type: { delete info.orientation;
mime: 'image/apng', assert.deepStrictEqual(info, {
ext: 'apng', size: 19853,
}, md5: '4f557df8548bc3cecc794c652f690446',
width: 256, type: {
height: 256, mime: 'audio/mpeg',
orientation: undefined, ext: 'mp3',
},
});
}); });
});
test('WAV', async () => {
test('Generic AGIF', async () => { const path = `${resources}/kick_gaba7.wav`;
const path = `${resources}/anime.gif`; const info = await fileInfoService.getFileInfo(path, { skipSensitiveDetection: true }) as any;
const info = await fileInfoService.getFileInfo(path, { skipSensitiveDetection: true }) as any; delete info.warnings;
delete info.warnings; delete info.blurhash;
delete info.blurhash; delete info.sensitive;
delete info.sensitive; delete info.porn;
delete info.porn; delete info.width;
assert.deepStrictEqual(info, { delete info.height;
size: 2248, delete info.orientation;
md5: '32c47a11555675d9267aee1a86571e7e', assert.deepStrictEqual(info, {
type: { size: 87630,
mime: 'image/gif', md5: '8bc9bb4fe5e77bb1871448209be635c1',
ext: 'gif', type: {
}, mime: 'audio/wav',
width: 256, ext: 'wav',
height: 256, },
orientation: undefined, });
}); });
});
test('AAC', async () => {
test('PNG with alpha', async () => { const path = `${resources}/kick_gaba7.aac`;
const path = `${resources}/with-alpha.png`; const info = await fileInfoService.getFileInfo(path, { skipSensitiveDetection: true }) as any;
const info = await fileInfoService.getFileInfo(path, { skipSensitiveDetection: true }) as any; delete info.warnings;
delete info.warnings; delete info.blurhash;
delete info.blurhash; delete info.sensitive;
delete info.sensitive; delete info.porn;
delete info.porn; delete info.width;
assert.deepStrictEqual(info, { delete info.height;
size: 3772, delete info.orientation;
md5: 'f73535c3e1e27508885b69b10cf6e991', assert.deepStrictEqual(info, {
type: { size: 7291,
mime: 'image/png', md5: '2789323f05e3392b648066f50be6a2a6',
ext: 'png', type: {
}, mime: 'audio/aac',
width: 256, ext: 'aac',
height: 256, },
orientation: undefined, });
}); });
});
test('FLAC', async () => {
test('Generic SVG', async () => { const path = `${resources}/kick_gaba7.flac`;
const path = `${resources}/image.svg`; const info = await fileInfoService.getFileInfo(path, { skipSensitiveDetection: true }) as any;
const info = await fileInfoService.getFileInfo(path, { skipSensitiveDetection: true }) as any; delete info.warnings;
delete info.warnings; delete info.blurhash;
delete info.blurhash; delete info.sensitive;
delete info.sensitive; delete info.porn;
delete info.porn; delete info.width;
assert.deepStrictEqual(info, { delete info.height;
size: 505, delete info.orientation;
md5: 'b6f52b4b021e7b92cdd04509c7267965', assert.deepStrictEqual(info, {
type: { size: 108793,
mime: 'image/svg+xml', md5: 'bc0f3adfe0e1ca99ae6c7528c46b3173',
ext: 'svg', type: {
}, mime: 'audio/flac',
width: 256, ext: 'flac',
height: 256, },
orientation: undefined, });
}); });
});
/*
test('SVG with XML definition', async () => { * video/webmとして検出されてしまう
// https://github.com/misskey-dev/misskey/issues/4413 test('WEBM AUDIO', async () => {
const path = `${resources}/with-xml-def.svg`; const path = `${resources}/kick_gaba7.webm`;
const info = await fileInfoService.getFileInfo(path, { skipSensitiveDetection: true }) as any; const info = await fileInfoService.getFileInfo(path, { skipSensitiveDetection: true }) as any;
delete info.warnings; delete info.warnings;
delete info.blurhash; delete info.blurhash;
delete info.sensitive; delete info.sensitive;
delete info.porn; delete info.porn;
assert.deepStrictEqual(info, { delete info.width;
size: 544, delete info.height;
md5: '4b7a346cde9ccbeb267e812567e33397', delete info.orientation;
type: { assert.deepStrictEqual(info, {
mime: 'image/svg+xml', size: 8879,
ext: 'svg', md5: '3350083dec312419cfdc06c16413aca7',
}, type: {
width: 256, mime: 'audio/webm',
height: 256, ext: 'webm',
orientation: undefined, },
}); });
});
test('Dimension limit', async () => {
const path = `${resources}/25000x25000.png`;
const info = await fileInfoService.getFileInfo(path, { skipSensitiveDetection: true }) as any;
delete info.warnings;
delete info.blurhash;
delete info.sensitive;
delete info.porn;
assert.deepStrictEqual(info, {
size: 75933,
md5: '268c5dde99e17cf8fe09f1ab3f97df56',
type: {
mime: 'application/octet-stream', // do not treat as image
ext: null,
},
width: 25000,
height: 25000,
orientation: undefined,
});
});
test('Rotate JPEG', async () => {
const path = `${resources}/rotate.jpg`;
const info = await fileInfoService.getFileInfo(path, { skipSensitiveDetection: true }) as any;
delete info.warnings;
delete info.blurhash;
delete info.sensitive;
delete info.porn;
assert.deepStrictEqual(info, {
size: 12624,
md5: '68d5b2d8d1d1acbbce99203e3ec3857e',
type: {
mime: 'image/jpeg',
ext: 'jpg',
},
width: 512,
height: 256,
orientation: 8,
}); });
*/
}); });
}); });

View File

@ -35,6 +35,11 @@ export const FILE_TYPE_BROWSERSAFE = [
'audio/webm', 'audio/webm',
'audio/aac', 'audio/aac',
// see https://github.com/misskey-dev/misskey/pull/10686
'audio/flac',
'audio/wav',
// backward compatibility
'audio/x-flac', 'audio/x-flac',
'audio/vnd.wave', 'audio/vnd.wave',
]; ];