diff --git a/packages/client/package.json b/packages/client/package.json index 7a1ae47c0..c4d1fb6a5 100644 --- a/packages/client/package.json +++ b/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", diff --git a/packages/client/src/scripts/select-file-enc.ts b/packages/client/src/scripts/select-file-enc.ts index 037e6425f..529e9d0a9 100644 --- a/packages/client/src/scripts/select-file-enc.ts +++ b/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 { createFFmpeg, fetchFile } from '@ffmpeg/ffmpeg'; - +import VideoConverter from 'convert-video'; function select(src: any, label: string | null, multiple: boolean): Promise { 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 { @@ -106,9 +60,9 @@ function select(src: any, label: string | null, multiple: boolean): Promise { 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 { +export function selectFile(src: any, label: string | null = null): Promise { return select(src, label, false) as Promise; } -export function selectFilesEnc(src: any, label: string | null = null): Promise { +export function selectFiles(src: any, label: string | null = null): Promise { return select(src, label, true) as Promise; } diff --git a/packages/client/src/scripts/select-file.ts b/packages/client/src/scripts/select-file.ts index 23df4edf5..2c26fd6ca 100644 --- a/packages/client/src/scripts/select-file.ts +++ b/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 { return new Promise((res, rej) => { const keepOriginal = ref(defaultStore.state.keepOriginalUploading);