feat: Add video convert button

packages/client/package.json

@@ -48,6 +48,7 @@
 		"chartjs-plugin-zoom": "1.2.0",
 		"compare-versions": "4.1.3",
 		"content-disposition": "0.5.4",
+		"convert-video": "1.0.0",
 		"css-loader": "6.7.1",
 		"cssnano": "5.1.1",
 		"date-fns": "2.28.0",

packages/client/src/scripts/select-file-enc.ts

@@ -1,87 +1,44 @@
+import { ref } from 'vue';
 import * as os from '@/os';
 import { stream } from '@/stream';
 import { i18n } from '@/i18n';
 import { defaultStore } from '@/store';
 import { DriveFile } from 'misskey-js/built/entities';
-import { fs } from 'fs';
+import VideoConverter from 'convert-video';
-import { createFFmpeg, fetchFile } from '@ffmpeg/ffmpeg';
-
 
 function select(src: any, label: string | null, multiple: boolean): Promise<DriveFile | DriveFile[]> {
 	return new Promise((res, rej) => {
+		const keepOriginal = ref(defaultStore.state.keepOriginalUploading);
 
-		
 		const chooseFileFromPc = () => {
 			const input = document.createElement('input');
 			input.type = 'file';
+			input.multiple = multiple;
 			input.onchange = () => {
 
 
+				async function convertVideo(input) {
+					let sourceVideoFile = input.files[0];
+					let targetVideoFormat = 'mp4'
+					let convertedVideoDataObj = await VideoConverter.convert(sourceVideoFile, targetVideoFormat);
 
+					let convertedVideoFile = new File([convertedVideoDataObj.data], convertedVideoDataObj.name + "." + convertedVideoDataObj.format);
 
+					os.upload(convertedVideoFile, defaultStore.state.uploadFolder, undefined, keepOriginal.value).then(res).catch(e => { os.alert({ type: 'error', text: e }) });
+				}
 
-				const readFromBlobOrFile = (blob) => (
+				Array.from(input.files).map(file => {
-					console.log('start readfrombloborfile'),
+					if (file.type.indexOf('video') !== -1) {
-					new Promise((resolve, reject) => {
+						console.log('convert video');
-						const reader = new FileReader();
+						os.toast('Try convert to mp4');
-						reader.onload = () => {
+						convertVideo(file);
-							resolve(reader.result);
+					} else {
-						};
+						os.toast('It is not video file');
-						reader.onerror = ({ target: { error: { code } } }) => {
+						os.upload(file, defaultStore.state.uploadFolder, undefined, keepOriginal.value).then(res).catch(e => { os.alert({ type: 'error', text: e }) });
-							reject(os.alert({ type: 'error', text: 'file could not be read! ' + code }));
-						};
-						reader.readAsArrayBuffer(blob);
 					}
-				));
+				});
 
 
-					
-				
-					const ffmpeg = createFFmpeg({ log: true });
-					async function ffmpegconv() {
-						os.toast('Start const ffmpegconv');
-						console.log('Start const ffmpegconv');
-						var infilename = Array.from(input.files[0].name);
-						let video = null;
-						var outfilename = infilename.replace(/\.[^/.]+$/, '') + '.mp4';
-						os.toast('Start await beffile');
-						//ここでストップ
-						console.log('Start await beffile');
-						const befFile = new Uint8Array(await readFromBlobOrFile(input.files[0]));
-
-						os.toast('Loading FFmpeg.wasm');
-						console.log('Loading FFmpeg.wasm');
-						if (!ffmpeg.isLoaded()) {
-							os.toast('Loading FFmpeg.wasm-core');
-							console.log('Loading FFmpeg.wasm-core');
-							await ffmpeg.load();
-						}
-						os.toast('Set ffmpeg files');
-						console.log('Set ffmpeg files');
-						ffmpeg.FS('writeFile', infilename, await fetchFile(befFile));
-						os.toast('Converting')
-						await ffmpeg.run('-i', `video.avi`, '-c:v', 'copy', '-c:a', 'copy', `video.mp4`);
-						os.toast('Converted')
-						const aftFile = ffmpeg.FS('readFile', outfilename);
-						os.toast('Uploading')
-						video.value = URL.createObjectURL(new Blob([aftFile.buffer], { type: 'video/mp4' }));
-						os.upload(video, defaultStore.state.uploadFolder).then(res).catch(e => { os.alert({ type: 'error', text: e }) });
-					};
-					
-
-				//const promises = Array.from(input.files).map(file => os.upload(file, defaultStore.state.uploadFolder));
-
-				//Promise.all(promises).then(driveFiles => {
-				//	res(multiple ? driveFiles : driveFiles[0]);
-				//}).catch(e => {
-				//	os.alert({
-				//		type: 'error',
-				//		text: e
-				//	});
-				//});
-				os.toast('Try use FFmpeg.wasm')
-				ffmpegconv();
-				
 
 
 				// 一応廃棄
@@ -93,9 +50,6 @@ function select(src: any, label: string | null, multiple: boolean): Promise<Driv
 			(window as any).__misskey_input_ref__ = input;
 
 			input.click();
-
-
-
 		};
 
 		const chooseFileFromDrive = () => {
@@ -106,9 +60,9 @@ function select(src: any, label: string | null, multiple: boolean): Promise<Driv
 
 		const chooseFileFromUrl = () => {
 			os.inputText({
-				title: i18n.locale.uploadFromUrl,
+				title: i18n.ts.uploadFromUrl,
 				type: 'url',
-				placeholder: i18n.locale.uploadFromUrlDescription
+				placeholder: i18n.ts.uploadFromUrlDescription
 			}).then(({ canceled, result: url }) => {
 				if (canceled) return;
 
@@ -129,8 +83,8 @@ function select(src: any, label: string | null, multiple: boolean): Promise<Driv
 				});
 
 				os.alert({
-					title: i18n.locale.uploadFromUrlRequested,
+					title: i18n.ts.uploadFromUrlRequested,
-					text: i18n.locale.uploadFromUrlMayTakeTime
+					text: i18n.ts.uploadFromUrlMayTakeTime
 				});
 			});
 		};
@@ -139,17 +93,17 @@ function select(src: any, label: string | null, multiple: boolean): Promise<Driv
 			text: label,
 			type: 'label'
 		} : undefined, {
-			text: i18n.locale.upload,
+			text: i18n.ts.upload,
 			icon: 'fas fa-upload',
 			action: chooseFileFromPc
 		}], src);
 	});
 }
 
-export function selectFileEnc(src: any, label: string | null = null): Promise<DriveFile> {
+export function selectFile(src: any, label: string | null = null): Promise<DriveFile> {
 	return select(src, label, false) as Promise<DriveFile>;
 }
 
-export function selectFilesEnc(src: any, label: string | null = null): Promise<DriveFile[]> {
+export function selectFiles(src: any, label: string | null = null): Promise<DriveFile[]> {
 	return select(src, label, true) as Promise<DriveFile[]>;
 }

packages/client/src/scripts/select-file.ts

@@ -5,6 +5,7 @@ import { i18n } from '@/i18n';
 import { defaultStore } from '@/store';
 import { DriveFile } from 'misskey-js/built/entities';
 
+
 function select(src: any, label: string | null, multiple: boolean): Promise<DriveFile | DriveFile[]> {
 	return new Promise((res, rej) => {
 		const keepOriginal = ref(defaultStore.state.keepOriginalUploading);