sim1222/test1
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat: Add video convert button

Browse Source
This commit is contained in:
こけっち 2022-03-11 22:34:38 +09:00
parent c99c4b73f4
commit a81f8b8275
No known key found for this signature in database
GPG Key ID: 21460619C5FC4DD1
3 changed files with 29 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/client/package.json
View File

@ -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",

100
packages/client/src/scripts/select-file-enc.ts
View File

@ -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 { createFFmpeg, fetchFile } from '@ffmpeg/ffmpeg';
import VideoConverter from 'convert-video';
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) => (
console.log('start readfrombloborfile'),
new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = () => {
resolve(reader.result);
};
reader.onerror = ({ target: { error: { code } } }) => {
reject(os.alert({ type: 'error', text: 'file could not be read! ' + code }));
};
reader.readAsArrayBuffer(blob);
Array.from(input.files).map(file => {
if (file.type.indexOf('video') !== -1) {
console.log('convert video');
os.toast('Try convert to mp4');
convertVideo(file);
} else {
os.toast('It is not video file');
os.upload(file, defaultStore.state.uploadFolder, undefined, keepOriginal.value).then(res).catch(e => { os.alert({ type: 'error', text: e }) });
}
));
});
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,
text: i18n.locale.uploadFromUrlMayTakeTime
title: i18n.ts.uploadFromUrlRequested,
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[]>;
}

1
packages/client/src/scripts/select-file.ts
View File

@ -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);