更新课程

Author: houdunwang

videoMerge/src/main/ffmpeg.ts

@@ -2,26 +2,29 @@ import ffmpegPath from '@ffmpeg-installer/ffmpeg'
 import ffprobePath from '@ffprobe-installer/ffprobe'
 import ffmpeg from 'fluent-ffmpeg'
 import { promisify } from 'util'
+import { IFile } from './ipc'
 ffmpeg.setFfmpegPath(ffmpegPath.path)
 ffmpeg.setFfprobePath(ffprobePath.path)
 
 class VideoMerge {
   private ffmpeg: ffmpeg.FfmpegCommand
-  private files: string[] = []
+  private files: IFile = { file: '', endVideo: '', preVideo: '' }
   private totalTime = 0
 
   constructor() {
     this.ffmpeg = ffmpeg()
   }
 
-  videos(files: string[]) {
-    this.files = files
-    return this
-  }
+  // private videos(files: IFile) {
+  //   this.files = files
+  //   return this
+  // }
 
   private async getTotalTime() {
+    const files = Object.values(this.files).filter((f) => f)
+    // console.log(files)
     const nums = await Promise.all(
-      this.files.map(async (file) => {
+      files.map(async (file) => {
         const {
           format: { duration }
         } = (await promisify(ffmpeg.ffprobe)(file)) as ffmpeg.FfprobeData
@@ -32,7 +35,10 @@ class VideoMerge {
   }
 
   private videosAdd() {
-    this.files.forEach((file) => this.ffmpeg.mergeAdd(file))
+    if (this.files.preVideo) this.ffmpeg.mergeAdd(this.files.preVideo)
+    this.ffmpeg.mergeAdd(this.files.file)
+    if (this.files.endVideo) this.ffmpeg.mergeAdd(this.files.endVideo)
+    // this.files.forEach((file) => this.ffmpeg.mergeAdd(file))
   }
 
   private progress(progress: any) {
@@ -41,16 +47,18 @@ class VideoMerge {
     times.forEach((time, index) => {
       runTotalTime += Math.pow(60, 2 - index) * time
     })
+    //文件名  进度数值
     console.log((runTotalTime / this.totalTime) * 100)
   }
-  async run() {
-    await this.getTotalTime()
+  async run(files: IFile) {
+    this.files = files
 
+    await this.getTotalTime()
     this.videosAdd()
     this.ffmpeg
       .on('progress', this.progress.bind(this))
       .on('error', (err) => {
-        // console.log(err)
+        console.log(err)
       })
       .on('end', function () {
         // console.log('转换完成')
@@ -62,10 +70,10 @@ class VideoMerge {
       .save('/Users/hd/live/v2023/videoMerge/b.mp4')
   }
 }
-const files = ['/Users/hd/live/v2023/videoMerge/a1.mp4', '/Users/hd/live/v2023/videoMerge/a2.mp4']
+// const files = ['/Users/hd/live/v2023/videoMerge/a1.mp4', '/Users/hd/live/v2023/videoMerge/a2.mp4']
 
-const instance = new VideoMerge()
-instance.videos(files).run()
+export default new VideoMerge()
+// instance.videos(files).run()
 // ffmpeg()
 //获取多个视频的总时长
 // Promise.all(

videoMerge/src/main/index.ts

@@ -2,17 +2,16 @@ import { app, shell, BrowserWindow } from 'electron'
 import { join } from 'path'
 import { electronApp, optimizer, is } from '@electron-toolkit/utils'
 import icon from '../../resources/icon.png?asset'
-import './ffmpeg'
-
+import './ipc'
 function createWindow(): void {
   // Create the browser window.
   const mainWindow = new BrowserWindow({
     width: 400,
-    height: 700,
+    height: 500,
     minWidth: 400,
     minHeight: 500,
     x: 1900,
-    y: 180,
+    y: 150,
     // resizable: false,
     show: false,
     frame: false,

videoMerge/src/main/ipc.ts

@@ -0,0 +1,10 @@
+import { IpcMainEvent, ipcMain } from 'electron'
+import ffmpeg from './ffmpeg'
+export interface IFile {
+  file: string
+  preVideo?: string
+  endVideo?: string
+}
+ipcMain.on('videoMerge', (event: IpcMainEvent, files: IFile) => {
+  ffmpeg.run(files)
+})

videoMerge/src/preload/index.d.ts

@@ -1,8 +1,11 @@
+import { IFile } from './../main/ipc'
 import { ElectronAPI } from '@electron-toolkit/preload'
 
 declare global {
   interface Window {
     electron: ElectronAPI
-    api: unknown
+    api: {
+      videoMerge: (files: IFile) => void
+    }
   }
 }

videoMerge/src/preload/index.ts

@@ -1,8 +1,13 @@
-import { contextBridge } from 'electron'
+import { contextBridge, ipcRenderer } from 'electron'
 import { electronAPI } from '@electron-toolkit/preload'
+import { IFile } from '../main/ipc'
 
 // Custom APIs for renderer
-const api = {}
+const api = {
+  videoMerge: (files: IFile) => {
+    ipcRenderer.send('videoMerge', files)
+  }
+}
 
 // Use `contextBridge` APIs to expose Electron APIs to
 // renderer only if context isolation is enabled, otherwise

videoMerge/src/renderer/src/components/VideoList.vue

@@ -1,19 +1,8 @@
 <script setup lang="ts">
-import { Plus, UpdateRotation, CloseOne } from '@icon-park/vue-next'
-import { ElMessage, UploadRequestOptions } from 'element-plus'
-import { ref } from 'vue'
-const files = ref<string[]>([])
-const httpRequest = (options: UploadRequestOptions) => {
-  const file = options.file.path.split('/').pop()!
-  const isExists = files.value.some((f) => f == file)
-  if (isExists) {
-    ElMessage.error(`${file}已存在`)
-  } else files.value?.push(file)
-}
+import { CloseOne, Plus, UpdateRotation } from '@icon-park/vue-next'
+import useVideo from '@renderer/composables/useVideo'
 
-const removeVideo = (index: number) => {
-  files.value.splice(index, 1)
-}
+const { files, httpRequest, removeVideo, isRun, run } = useVideo()
 </script>
 
 <template>
@@ -25,8 +14,14 @@ const removeVideo = (index: number) => {
 
       <div
         class="w-20 h-20 bg-white flex justify-center items-center rounded-md border border-gray-200 cursor-pointer"
+        @click="run"
       >
-        <update-rotation theme="outline" size="48" class="text-gray-600 animate-spin" />
+        <update-rotation
+          theme="outline"
+          size="48"
+          class="text-gray-600"
+          :class="{ 'animate-spin': isRun }"
+        />
       </div>
     </section>
     <section class="text-center text-white my-3 text-xs opacity-40 font-light">
@@ -40,9 +35,10 @@ const removeVideo = (index: number) => {
         <div
           v-for="(file, index) of files"
           :key="index"
-          class="group bg-[#34495e] text-gray-300 opacity-80 py-1 px-3 my-2 rounded-md flex justify-between items-center hover:bg-white hover:text-[#2c3e50] hover:opacity-90 duration-300 cursor-pointer"
+          class="group item bg-[#34495e] text-gray-300 opacity-80 py-1 px-3 my-2 rounded-md flex justify-between items-center hover:bg-white hover:text-[#2c3e50] hover:opacity-90 duration-300 cursor-pointer"
+          :style="`--process:${file.process}%`"
         >
-          <div class="text-xs opacity-70">{{ file }}</div>
+          <div class="text-xs opacity-70">{{ file.name }}</div>
 
           <close-one
             theme="outline"
@@ -66,6 +62,14 @@ const removeVideo = (index: number) => {
 :deep(.el-upload-dragger) {
   @apply w-20 h-20 flex justify-center items-center;
 }
+.item {
+  @apply relative overflow-hidden;
+  &::before {
+    content: '';
+    @apply bg-green-700 absolute left-0 top-0 bottom-0;
+    width: var(--process);
+  }
+}
 // .run {
 //   animation: rotate 2s both infinite linear;
 // }

videoMerge/src/renderer/src/composables/useVideo.ts

@@ -0,0 +1,43 @@
+import useConfigStore from '@renderer/store/useConfigStore'
+import { ElMessage, UploadRequestOptions } from 'element-plus'
+import { ref } from 'vue'
+interface IVideo {
+  name: string
+  path: string
+  process: number
+}
+
+export default () => {
+  //配置项{片头，片尾}
+  const { config } = useConfigStore()
+  //文件列表
+  const files = ref<IVideo[]>([])
+  //是否正在合并
+  const isRun = ref(false)
+  //选择文件
+  const httpRequest = (options: UploadRequestOptions) => {
+    const filePath = options.file.path
+    const fileName = filePath.split('/').pop()!
+    const isExists = files.value.some((f) => f.path == filePath)
+    if (isExists) {
+      ElMessage.error(`${fileName}已存在`)
+    } else files.value?.push({ path: filePath, name: fileName, process: 10 })
+  }
+  //删除视频
+  const removeVideo = (index: number) => {
+    files.value.splice(index, 1)
+  }
+
+  //执行合并
+  const run = () => {
+    if (!files.value.length) return ElMessage.error({ message: '请选择视频' })
+    const video = files.value[0]
+    window.api.videoMerge({
+      file: video.path,
+      preVideo: config.preVideo,
+      endVideo: config.endVideo
+    })
+  }
+
+  return { files, httpRequest, removeVideo, isRun, run }
+}