【Tauri】大家一起來做一個簡單的影片轉檔工具吧…

brew install node
brew install rust
brew install ffmpeg
cargo install create-tauri-app

cd ~/Desktop
cargo create-tauri-app tauri_ffmpeg_gui --template vue-ts
cd tauri_ffmpeg_gui
npm install naive-ui

http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4

/// src-tauri/src/Cargo.toml
[dependencies]
tauri = { version = "2", features = [] }
tauri-plugin-opener = "2"
serde = { version = "1", features = ["derive"] }
serde_json = "1"
chrono = "0.4.41"
once_cell = "1.21.3"
nix = { version = "0.27", features = ["signal"] }
windows-sys = { version = "0.60.2", features = ["Win32_System_Threading"] }

npm install
npm run tauri dev

// src/App.vue
<script setup lang="ts">
import { onMounted, onUnmounted, ref, computed, watch } from "vue";
import { invoke } from "@tauri-apps/api/core";
import { listen, UnlistenFn } from "@tauri-apps/api/event";

const filePath = ref("");

enum TauriEvent {
  DragDrop = "tauri://drag-drop"
}

function listenDragDrop() {

  listen(TauriEvent.DragDrop, (event: any) => {
    if (event?.payload?.paths.length > 0) {
      filePath.value = event.payload.paths[0];
    }
  });
}

onMounted(async () => {
  listenDragDrop();
});
</script>

<template>
  <div class="main-drop-area">
    <div style="display: flex; width: 90%; align-items: center; margin-top: 12px;">
      <input v-model="filePath" placeholder="檔案路徑會顯示在這裡" style="flex: 1;" />
      <button type="button" style="margin-left: 8px;">轉換</button>
    </div>
  </div>
</template>

<style scoped>
.main-drop-area {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 2px dashed #888;
  background: transparent;
}

.startBtn {
  background: #43a047 !important;
  color: #fff !important;
  border: 1px solid #1b5e20 !important;
}

.stopBtn {
  background: #e53935 !important;
  color: #fff !important;
  border: 1px solid #b71c1c !important;
}

.log-segment {
  border-bottom: 1px solid #444;
  padding: 4px 0 8px 0;
  margin-bottom: 4px;
  word-break: break-all;
}

.log-segment:last-child {
  border-bottom: none;
}
</style>
<style>
:root {
  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;

  color: #0f0f0f;
  background-color: #f6f6f6;

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
}

.container {
  margin: 0;
  padding-top: 10vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: 0.75s;
}

.logo.tauri:hover {
  filter: drop-shadow(0 0 2em #24c8db);
}

.row {
  display: flex;
  justify-content: center;
}

a {
  font-weight: 500;
  color: #646cff;
  text-decoration: inherit;
}

a:hover {
  color: #535bf2;
}

h1 {
  text-align: center;
}

input,
button {
  border-radius: 8px;
  border: 1px solid transparent;
  padding: 0.6em 1.2em;
  font-size: 1em;
  font-weight: 500;
  font-family: inherit;
  color: #0f0f0f;
  background-color: #ffffff;
  transition: border-color 0.25s;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
}

button {
  cursor: pointer;
}

button:hover {
  border-color: #396cd8;
}
button:active {
  border-color: #396cd8;
  background-color: #e8e8e8;
}

input,
button {
  outline: none;
}

#greet-input {
  margin-right: 5px;
}

@media (prefers-color-scheme: dark) {
  :root {
    color: #f6f6f6;
    background-color: #2f2f2f;
  }

  a:hover {
    color: #24c8db;
  }

  input,
  button {
    color: #ffffff;
    background-color: #0f0f0f98;
  }
  button:active {
    background-color: #0f0f0f69;
  }
}
</style>

ffmpeg -i input.mp4 -c:v libx264 -pix_fmt yuv420p -c:a aac output.mp4

/// src/App.vue
<script setup lang="ts">
import { onMounted, onUnmounted, ref, computed, watch } from "vue";
import { invoke } from "@tauri-apps/api/core";
import { listen, UnlistenFn } from "@tauri-apps/api/event";
const filePath = ref("");

enum TauriEvent {
  DragDrop = "tauri://drag-drop"
}

function listenDragDrop() {

  listen(TauriEvent.DragDrop, (event: any) => {
    if (event?.payload?.paths.length > 0) {
      filePath.value = event.payload.paths[0];
    }
  });
}

async function start_convert() {
  let result = await invoke("start_convert", { path: filePath.value });
  console.log(`result = ${result}`)
}

onMounted(async () => {
  listenDragDrop();
});
</script>

<template>
  <div class="main-drop-area">
    <div style="display: flex; width: 90%; align-items: center; margin-top: 12px;">
      <input v-model="filePath" placeholder="檔案路徑會顯示在這裡" style="flex: 1;" />
      <button type="button" style="margin-left: 8px;" @click="start_convert">轉換</button>
    </div>
  </div>
</template>

/// src-tauri/src/library/_process.rs
use std::process::Command;

pub fn command_combine(command: &str) -> Command {

    if cfg!(windows) {
        let mut cmd = Command::new("cmd");
        cmd.arg("/C");
        cmd.arg(command);
        cmd
    } else {
        let mut cmd = Command::new("sh");
        cmd.arg("-c");
        cmd.arg(command);
        cmd
    }
}

/// src-tauri/src/utility/_command.rs
use std::{str};

use crate::library:: {
    _process::{command_combine}
};

pub fn ffmpeg_command_maker(path: &str) -> String {

    let setting = "";
    let ffmpeg_cmd = format!("ffmpeg -i {} {} {}", path, setting, "output.mp4");
    let mut command = command_combine(ffmpeg_cmd.as_str());
    let _ = command.output().expect("failed to execute process");

    ffmpeg_cmd
}

/// src-tauri/src/utility/_command.rs
use std::{str};

use crate::library:: {
    _process::{command_combine}
};

pub fn ffmpeg_command_maker(path: &str) -> String {

    let setting = "-c:v libx264 -c:a aac";
    let ffmpeg_cmd = format!("ffmpeg -i {} {} {}", path, setting, "output.mp4");
    let mut command = command_combine(ffmpeg_cmd.as_str());

    // let _ = command.output().expect("failed to execute process");
    let _ = command.spawn();

    ffmpeg_cmd
}

/// src-tauri/src/utility/_command.rs
use std::{str};
use std::io::Error;

use crate::library:: {
    _process::{command_combine},
    _path::{full_path_maker},
};

pub fn ffmpeg_command_maker(path: &str) -> Result<String, Error> {

    let setting = "-c:v libx264 -pix_fmt yuv420p -c:a aac";
    let output_path = full_path_maker(path, "mp4")?;
    let ffmpeg_cmd = format!("ffmpeg -i {} {} {}", path, setting, output_path.display());
    let mut command = command_combine(ffmpeg_cmd.as_str());

    let _ = command.spawn();

    Ok(ffmpeg_cmd)
}

/// src-tauri/src/library/_error.rs
use std::io::{Error, ErrorKind};

pub fn io_error_maker(kind: ErrorKind, message: &str) -> Error {
    Error::new(kind, message)
}

/// src-tauri/src/library/_string.rs
use chrono;

pub fn timestamp_filename(prefix: &str, format: &str) -> String {

    let now = chrono::Local::now();
    let datetime_str = now.format("%Y%m%d_%H%M%S").to_string();

    format!("{}_{}.{}", prefix, datetime_str, format)
}

/// src-tauri/src/library/_path.rs
use std::path::{Path, PathBuf};
use std::io::{Error, ErrorKind};

use crate::library::_string::timestamp_filename;
use crate::library::_error::io_error_maker;

pub fn file_exists(file_path: &str) -> bool {
    Path::new(file_path).exists()
}

pub fn file_parent_dir(file_path: &str) -> Option<&Path> {
    Path::new(file_path).parent()
}

pub fn file_stem(file_path: &str) -> Option<&str> {
    Path::new(file_path).file_stem().and_then(|s| s.to_str())
}

pub fn full_path_maker(path: &str, format: &str) -> Result<PathBuf, Error> {

    let dir_path = match file_parent_dir(path) {
        Some(dir) => dir,
        None => {
            let error_message = &format!("無法取得父目錄: {}", path);
            return Err(io_error_maker(ErrorKind::NotFound, error_message));
        },
    };

    let prefix = file_stem(path).unwrap_or("output");
    let filename = timestamp_filename(prefix, format);

    Ok(dir_path.join(filename))
}

/// src-tauri/src/library/_tauri.rs
use serde::Serialize;
use tauri::{Emitter, Window};

pub fn emit_payload<S: Serialize + Clone>(target: &Window, event: &str, payload: S) {
    let _ = target.emit(event, payload);
}

/// src-tauri/src/lib.rs
#[tauri::command]
fn start_convert(window: Window, path: &str) {

    let window_clone = window.clone();

    if !file_exists(path) {
        let error = io_error_maker(ErrorKind::NotFound, "檔案不存在");
        return emit_payload(&window_clone, "error", format!("{:?}", error));
    }

    let cmd_str = match ffmpeg_command_maker(path) {
        Ok(cmd) => cmd,
        Err(err) => return emit_payload(&window_clone, "error", format!("{:?}", err)),
    };

    return emit_payload(&window_clone, "finish", cmd_str);
}

/// src/App.vue (部分)
enum FFmpegEvent {
  Error = "error",
  Finish = "finish",
  Progress = "progress",
}

const logs = ref<string[]>([]);
const unlistenError = ref<UnlistenFn | null>(null);

const logBox = ref<HTMLElement | null>(null);

const watchLogs = computed(() => {
  return [...logs.value];
});

async function registerListener() {
  unlistenError.value = await handleCommandError();
}

function unregisterListener() {
  if (unlistenError.value) { unlistenError.value(); }
}

async function start_convert() {
  await invoke("start_convert", { path: filePath.value });
}

async function handleCommandError() {

  return await listen<string>(FFmpegEvent.Error, (event: any) => {
    const payload = event.payload as string;
    logs.value.push(payload);
  });
}

watch(watchLogs, () => {
  setTimeout(() => {
    if (logBox.value) { logBox.value.scrollTop = logBox.value.scrollHeight; }
  }, 0);
});

onMounted(async () => {
  registerListener();
});

onUnmounted(() => {
  unregisterListener();
});

/// src/App.vue (部分)
<template>
  <div class="main-drop-area">

    <div ref="logBox" style="margin-top: 20px; width: 90%; background: #222; color: #fff; font-size: 14px; border-radius: 6px; padding: 8px; height: 200px; max-height: 200px; overflow: auto;">
      <div v-for="(line, idx) in logs" :key="idx" class="log-segment">{{ line }}</div>
    </div>

  </div>
</template>

/// src/App.vue (部分)
enum FFmpegEvent {
  Error = "error",
  Finish = "finish",
  Progress = "progress",
}

const unlistenFunctions = ref<UnlistenFn[]>([]);

async function registerListener() {
  unlistenFunctions.value.push(await handleCommandError());
  unlistenFunctions.value.push(await handleCommandFinish());
  unlistenFunctions.value.push(await handleCommandProgress());
}

function unregisterListener() {
  unlistenFunctions.value.forEach((handle: () => void) => { handle(); });
}

async function handleCommandFinish() {

  return await listen<string>(FFmpegEvent.Finish, (event: any) => {
    const payload = event.payload as string;
    logs.value.push(payload);
  });
}

async function handleCommandProgress() {

  return await listen<string>(FFmpegEvent.Progress, (event: any) => {
    const payload = event.payload as string;
    logs.value.push(payload);
  });
}

async function handleCommandError() {

  return await listen<string>(FFmpegEvent.Error, (event: any) => {
    const payload = event.payload as string;
    isConverting.value = false;
    logs.value.push(payload);
  });
}

async function handleCommandStart() {

  return await listen<string>(FFmpegEvent.Start, (event: any) => {
    const payload = event.payload as string;
    logs.value.push(payload);
  });
}

/// src-tauri/src/utility/_command.rs (部分)
use std::{
    str,
    io::Error,
    process::{Command, Stdio}
};

use crate::library:: {
    _process::{command_combine},
    _path::{full_path_maker},
};

pub fn ffmpeg_command_maker(path: &str) -> Result<(Command, String), Error> {

    let setting = "-c:v libx264 -c:a aac";
    let output_path = full_path_maker(path, "mp4")?;
    let ffmpeg_cmd = format!("ffmpeg -i {} {} {}", path, setting, output_path.display());
    let mut command = command_combine(ffmpeg_cmd.as_str());

    command.stdout(Stdio::piped());
    command.stderr(Stdio::piped());

    Ok((command, ffmpeg_cmd))
}

/// src-tauri/src/utility/_constant.rs (部分)
pub enum FFmpegEvent {
    Error,
    Finish,
    Progress,
}

impl FFmpegEvent {
    pub fn as_str(&self) -> &'static str {
        match self {
            FFmpegEvent::Error => "error",
            FFmpegEvent::Finish => "finish",
            FFmpegEvent::Progress => "progress",
        }
    }
}

/// src-tauri/src/lib.rs (部分)
mod utility;
mod library;

use std:: {
    io::{ErrorKind, Read},
    process::Child,
};

use tauri::Window;

use library::{
    _error::io_error_maker,
    _path::file_exists,
};

use utility::{
    _command::ffmpeg_command_maker,
    _tauri::emit_payload,
    _constant::FFmpegEvent,
};

#[tauri::command]
fn start_convert(window: Window, path: &str) {

    let window_clone = window.clone();

    if !file_exists(path) {
        let error = io_error_maker(ErrorKind::NotFound, "檔案不存在");
        return emit_payload(&window_clone, "error", format!("{:?}", error));
    }

    let (mut cmd, cmd_str) = match ffmpeg_command_maker(path) {
        Ok(result) => result,
        Err(error) => return emit_payload(&window_clone, FFmpegEvent::Error.as_str(), format!("{:?}", error)),
    };

    let mut child = match cmd.spawn() {
        Ok(child) => child,
        Err(error) => return emit_payload(&window_clone, FFmpegEvent::Error.as_str(), format!("{:?}", error)),
    };

    child_log(&mut child, |line| {
        if !line.is_empty() { emit_payload(&window_clone, FFmpegEvent::Progress.as_str(), line); }
    });

    emit_payload(&window_clone, FFmpegEvent::Finish.as_str(), &cmd_str)
}

fn child_log<F: Fn(&str)>(child: &mut Child, closure: F) {

    if let Some(mut stderr) = child.stderr.take() {
        let mut buffer = [0u8; 4096];
        let mut partial = String::new();

        loop {
            match stderr.read(&mut buffer) {
                Err(_) => break,
                Ok(0) => break,
                Ok(size) => {
                    let chunk = String::from_utf8_lossy(&buffer[..size]);
                    partial.push_str(&chunk);
                    partial_line_action(&mut partial, &closure);
                }
            }
        }
    }
}

fn partial_line_action<F: Fn(&str)>(partial: &mut String, closure: F) {

    while let Some(index) = partial.find(|char| char == '\r' || char == '\n') {
        let line = partial[..index].to_string();
        closure(&line);
        *partial = partial[index + 1..].to_string();
    }
}

/// src-tauri/src/lib.rs (部分)
fn start_convert(window: Window, path: &str) {

    let window_clone = window.clone();

    if !file_exists(path) {
        let error = io_error_maker(ErrorKind::NotFound, "檔案不存在");
        return emit_payload(&window_clone, "error", format!("{:?}", error));
    }

    let (mut cmd, cmd_str) = match ffmpeg_command_maker(path) {
        Ok(result) => result,
        Err(error) => return emit_payload(&window_clone, FFmpegEvent::Error.as_str(), format!("{:?}", error)),
    };

    thread::spawn(move || {
        let mut child = match cmd.spawn() {
            Ok(child) => child,
            Err(error) => return emit_payload(&window_clone, FFmpegEvent::Error.as_str(), format!("{:?}", error)),
        };

        child_log(&mut child, |line| {
            if !line.is_empty() { emit_payload(&window_clone, FFmpegEvent::Progress.as_str(), line); }
        });

        emit_payload(&window_clone, FFmpegEvent::Finish.as_str(), &cmd_str)
    });
}

/// src-tauri/src/library/_process.rs (部分)
use std::{
    ptr::null_mut,
};

pub fn kill_process(pid: u32) {
    #[cfg(unix)] { kill_unix_process(pid as i32); }
    #[cfg(windows)] { kill_windows_process(pid); }
}

#[allow(dead_code)]
fn kill_unix_process(pid: i32) {
    use nix::sys::signal::{kill, Signal};
    use nix::unistd::Pid;
    let _ = kill(Pid::from_raw(pid as i32), Signal::SIGKILL);
}

#[allow(dead_code)]
fn kill_windows_process(pid: u32) {
    use windows_sys::Win32::System::Threading::PROCESS_TERMINATE;
    use windows_sys::Win32::System::Threading::{OpenProcess, TerminateProcess};
    unsafe {
        let handle = OpenProcess(PROCESS_TERMINATE, 0, pid);
        if handle != null_mut() {
            let _ = TerminateProcess(handle, 1);
        }
    }
}

mod library;

use std::{
    sync::Mutex,
};

use tauri::Window;
use once_cell::sync::Lazy;

use library::{
    _process::kill_process,
};

static GLOBAL_PID: Lazy<Mutex<Option<u32>>> = Lazy::new(|| Mutex::new(None));

fn global_pid_lock() -> std::sync::MutexGuard<'static, Option<u32>> {
    GLOBAL_PID.lock().unwrap()
}

#[tauri::command]
fn start_convert(window: Window, path: &str) {

    let window_clone = window.clone();

    if !file_exists(path) {
        let error = io_error_maker(ErrorKind::NotFound, "檔案不存在");
        return emit_payload(&window_clone, "error", format!("{:?}", error));
    }

    let (mut cmd, cmd_str) = match ffmpeg_command_maker(path) {
        Ok(result) => result,
        Err(error) => return emit_payload(&window_clone, FFmpegEvent::Error.as_str(), format!("{:?}", error)),
    };

    thread::spawn(move || {
        let mut child = match cmd.spawn() {
            Ok(child) => child,
            Err(error) => return emit_payload(&window_clone, FFmpegEvent::Error.as_str(), format!("{:?}", error)),
        };

        {
            let mut global = global_pid_lock();
            *global = Some(child.id());
        }

        child_log(&mut child, |line| {
            if !line.is_empty() { emit_payload(&window_clone, FFmpegEvent::Progress.as_str(), line); }
        });

        let output = match child.wait_with_output() {
            Ok(output) => output,
            Err(error) => {
                emit_payload(&window_clone, FFmpegEvent::Error.as_str(), format!("{:?}",error));
                let mut global = global_pid_lock();
                return *global = None;
            }
        };

        emit_payload(&window_clone, FFmpegEvent::Finish.as_str(), format!("{:?}", output));
        emit_payload(&window_clone, FFmpegEvent::Finish.as_str(), &cmd_str)
    });
}

#[tauri::command]
fn stop_convert() {
    let mut pid_opt = GLOBAL_PID.lock().unwrap();
    if let Some(pid) = pid_opt.take() { kill_process(pid); }
}

#[cfg_attr(mobile, tauri::mobile_entry_point)]
pub fn run() {
    tauri::Builder::default()
        .plugin(tauri_plugin_opener::init())
        .invoke_handler(tauri::generate_handler![start_convert, stop_convert])
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

/// src/App.vue (部分)
enum RustApi {
  StartConvert = "start_convert",
  StopConvert = "stop_convert",
}

const isConverting = ref(false);

function handleConvert() {
  if (isConverting.value) { stop_convert(); return; }
  start_convert();
}

async function handleCommandFinish() {

  return await listen<string>(FFmpegEvent.Finish, (event: any) => {
    const payload = event.payload as string;
    isConverting.value = false;
    logs.value.push(payload);
  });
}

async function start_convert() {

  logs.value = [];
  isConverting.value = true;

  await invoke(RustApi.StartConvert, { path: filePath.value });
}

async function stop_convert() {
  await invoke(RustApi.StopConvert);
}
</script>

/// src/App.vue (部分)
<template>
  <div class="main-drop-area">

    <div style="display: flex; width: 90%; align-items: center; margin-top: 12px;">
      <input v-model="filePath" placeholder="檔案路徑會顯示在這裡" style="flex: 1;" />
      <button type="button" style="margin-left: 8px;" :class="isConverting ? 'stopBtn' : 'startBtn'" @click="handleConvert">
        {{ isConverting ? '結束' : '轉換' }}
      </button>
    </div>

    <div ref="logBox" class="log-box" style="margin-top: 12px;">
      <div v-for="(line, idx) in logs" :key="idx" class="log-segment">{{ line }}</div>
    </div>

  </div>
</template>

/// src/App.vue (部分)
const format = ref("ts");
const encode= ref("copy");

const formatOptions = [
  { value: "ts", label: ".ts" },
  { value: "mp4", label: ".mp4" },
  { value: "mkv", label: ".mkv" },
  { value: "mov", label: ".mov" },
];

const encodeOptions = [
  { value: "copy", label: "copy" },
  { value: "h264", label: "h264" },
  { value: "h265", label: "h265" },
];

/// src/App.vue (部分)
<template>
  <div class="main-drop-area">

    <div style="display: flex; width: 90%; align-items: center; margin-top: 12px;">
      <input v-model="filePath" placeholder="檔案路徑會顯示在這裡" style="flex: 1;" />
      <select v-model="format" class="select-option">
        <option v-for="option in formatOptions" :key="option.value" :value="option.value">{{ option.label }}</option>
      </select>
      <select v-model="format" class="select-option">
        <option v-for="option in encodeOptions" :key="option.value" :value="option.value">{{ option.label }}</option>
      </select>
      <button type="button" style="margin-left: 8px;" :class="isConverting ? 'stopBtn' : 'startBtn'" @click="handleConvert">
        {{ isConverting ? '結束' : '轉換' }}
      </button>
    </div>

    <div ref="logBox" class="log-box" style="margin-top: 12px;">
      <div v-for="(line, idx) in logs" :key="idx" class="log-segment">{{ line }}</div>
    </div>

  </div>
</template>

<style scoped>
.select-option {
  margin-left: 8px;
  padding: 0.6em 1.2em;
  border-radius: 8px;
  border: 1px solid #bbb;
  background: #0f0f0f;
  color: #f0f0f0;
  font-size: 1em;
  font-family: inherit;
  cursor: pointer;
  height: 44px;
  line-height: 44px
}
</style>

/// src/App.vue (部分)
import { onMounted, onUnmounted, ref, computed, watch, reactive } from "vue";

const startTime = reactive({ hour: 0, minute: 0, second: 0 });
const endTime = reactive({ hour: 23, minute: 59, second: 59 });

<template>
  <div class="main-drop-area">
    <div style="display: flex; width: 90%; align-items: center; margin-top: 12px;">
      <span style="margin-right: 8px;">開始</span>
      <input type="number" min="0" max="23" v-model.number="startTime.hour" style="width: 60px;" placeholder="時" @input="onHourChange(startTime, 0, 23)" :value="displayTime(startTime.hour)" />
      <span style="margin: 0 8px;">:</span>
      <input type="number" min="0" max="59" v-model.number="startTime.minute" style="width: 60px;" placeholder="分" @input="onMinuteChange(startTime, 0, 59)" :value="displayTime(startTime.minute)" />
      <span style="margin: 0 8px;">:</span>
      <input type="number" min="0" max="59" v-model.number="startTime.second" style="width: 60px;" placeholder="秒" @input="onSecondChange(startTime, 0, 59)" :value="displayTime(startTime.second)" />
    </div>
    <div style="display: flex; width: 90%; align-items: center; margin-top: 12px;">
      <span style="margin-right: 8px;">結束</span>
      <input type="number" min="0" max="23" v-model.number="endTime.hour" style="width: 60px;" placeholder="時" @input="onHourChange(startTime, 0, 23)" :value="displayTime(endTime.hour)" />
      <span style="margin: 0 8px;">:</span>
      <input type="number" min="0" max="59" v-model.number="endTime.minute" style="width: 60px;" placeholder="分" @input="onMinuteChange(startTime, 0, 59)" :value="displayTime(endTime.minute)" />
      <span style="margin: 0 8px;">:</span>
      <input type="number" min="0" max="59" v-model.number="endTime.second" style="width: 60px;" placeholder="秒" @input="onSecondChange(startTime, 0, 59)" :value="displayTime(endTime.second)" />
    </div>
  </div>
</template>

<style scoped>
.log-box {
  width: 90%;
  background: #222;
  color: #fff;
  font-size: 14px;
  border-radius: 6px;
  padding: 8px;
  height: 200px;
  max-height: 200px;
  overflow: auto;
}
</style>

/// src/App.vue (部分)
import { onMounted, onUnmounted, ref, computed, watch, reactive } from "vue";
import { NSwitch } from "naive-ui";

const videoSize = reactive({ width: 1920, height: 1080 });
const videoSizeUsed = ref(false);

/// src/App.vue (部分)
</template>
    <div style="display: flex; width: 90%; align-items: center; margin-top: 12px;">
      <span style="margin-right: 8px;">尺寸</span>
      <input type="number" min="1" v-model.number="videoSize.width" style="width: 60px;" placeholder="寬"/>
      <span style="margin: 0 8px;">:</span>
      <input type="number" min="1" v-model.number="videoSize.height" style="width: 60px;" placeholder="高"/>
      <n-switch v-model.number="videoSizeUsed" style="margin-left: 16px;">
        <template #checked>ON</template>
        <template #unchecked>OFF</template>
      </n-switch>
    </div>
  </div>
</template>

/// src/App.vue (部分)
function displayTime(value: number) {
  return value < 10 ? `0${value}` : `${value}`;
}

function onHourChange(refVar: any, min: number, max: number) {
  refVar.hour = Math.max(min, Math.min(max, refVar.hour));
}

function onMinuteChange(refVar: any, min: number, max: number) {
  refVar.minute = Math.max(min, Math.min(max, refVar.minute));
}

function onSecondChange(refVar: any, min: number, max: number) {
  refVar.second = Math.max(min, Math.min(max, refVar.second));
}

function onWidthChange(refVar: any, min: number) {
  refVar.width = Math.max(min, refVar.width);
}

function onHeightChange(refVar: any, min: number) {
  refVar.height = Math.max(min, refVar.height);
}

/// src/App.vue (部分)
<template>
  <div class="main-drop-area">

    <div style="display: flex; width: 90%; align-items: center; margin-top: 12px;">
      <input v-model="filePath" placeholder="檔案路徑會顯示在這裡" style="flex: 1;" />
      <select v-model="format" class="select-option">
        <option v-for="option in formatOptions" :key="option.value" :value="option.value">{{ option.label }}</option>
      </select>
      <select v-model="encode" class="select-option">
        <option v-for="option in encodeOptions" :key="option.value" :value="option.value">{{ option.label }}</option>
      </select>
      <button type="button" style="margin-left: 8px;" :class="isConverting ? 'stopBtn' : 'startBtn'" @click="handleConvert">
        {{ isConverting ? '結束' : '轉換' }}
      </button>
    </div>

    <div style="display: flex; width: 90%; align-items: center; margin-top: 12px;">
      <span style="margin-right: 8px;">開始</span>
      <input type="number" min="0" max="23" v-model.number="startTime.hour" style="width: 60px;" placeholder="時" @input="onHourChange(startTime, 0, 23)" :value="displayTime(startTime.hour)" />
      <span style="margin: 0 8px;">:</span>
      <input type="number" min="0" max="59" v-model.number="startTime.minute" style="width: 60px;" placeholder="分" @input="onMinuteChange(startTime, 0, 59)" :value="displayTime(startTime.minute)" />
      <span style="margin: 0 8px;">:</span>
      <input type="number" min="0" max="59" v-model.number="startTime.second" style="width: 60px;" placeholder="秒" @input="onSecondChange(startTime, 0, 59)" :value="displayTime(startTime.second)" />
    </div>

    <div style="display: flex; width: 90%; align-items: center; margin-top: 12px;">
      <span style="margin-right: 8px;">結束</span>
      <input type="number" min="0" max="23" v-model.number="endTime.hour" style="width: 60px;" placeholder="時" @input="onHourChange(startTime, 0, 23)" :value="displayTime(endTime.hour)" />
      <span style="margin: 0 8px;">:</span>
      <input type="number" min="0" max="59" v-model.number="endTime.minute" style="width: 60px;" placeholder="分" @input="onMinuteChange(startTime, 0, 59)" :value="displayTime(endTime.minute)" />
      <span style="margin: 0 8px;">:</span>
      <input type="number" min="0" max="59" v-model.number="endTime.second" style="width: 60px;" placeholder="秒" @input="onSecondChange(startTime, 0, 59)" :value="displayTime(endTime.second)" />
    </div>

    <div style="display: flex; width: 90%; align-items: center; margin-top: 12px;">
      <span style="margin-right: 8px;">尺寸</span>
      <input type="number" min="-1" v-model.number="videoSize.width" style="width: 60px;" placeholder="寬" @input="onWidthChange(videoSize, -1)" :value="videoSize.width" />
      <span style="margin: 0 8px;">:</span>
      <input type="number" min="-1" v-model.number="videoSize.height" style="width: 60px;" placeholder="高" @input="onHeightChange(videoSize, -1)" :value="videoSize.height" />
      <n-switch v-model.number="videoSizeUsed" style="margin-left: 16px;">
        <template #checked>ON</template>
        <template #unchecked>OFF</template>
      </n-switch>
    </div>

    <div ref="logBox" class="log-box" style="margin-top: 12px;">
      <div v-for="(line, idx) in logs" :key="idx" class="log-segment">{{ line }}</div>
    </div>

  </div>
</template>

/// src/App.vue (部分)
const ffmpegPath = ref("/opt/homebrew/bin/ffmpeg");

/// src/App.vue (部分)
<template>
  <div class="main-drop-area">
    <div style="display: flex; width: 90%; align-items: center;">
      <input v-model="ffmpegPath" placeholder="ffmpeg路徑會顯示在這裡" style="flex: 1;" />
    </div>
  </div>
</template>

/// src/App.vue (部分)
async function start_convert() {

  const start_time = `${startTime.hour}:${startTime.minute}:${startTime.second}`;
  const end_time = `${endTime.hour}:${endTime.minute}:${endTime.second}`;
  const scale = videoSizeUsed ? `${videoSize.width}:${videoSize.height}` : ``

  logs.value = [];
  isConverting.value = true;

  await invoke(RustApi.StartConvert, {
    command: ffmpegPath.value,
    path: filePath.value,
    startTime: start_time,
    endTime: end_time,
    format: format.value,
    encode: encode.value,
    scale: scale
  });
}

function initValue() {
  logs.value = [];
  isConverting.value = false;
}

onMounted(async () => {
  listenDragDrop();
  await registerListener();
  initValue();
});

// src-tauri/src/lib.rs
fn start_convert_action(window: Window, command: &str, path: &str, start_time: &str, end_time: &str, format: &str, encode: &str, scale: &str) {

    let window_clone = window.clone();

    if !file_exists(path) {
        let error = io_error_maker(ErrorKind::NotFound, "檔案不存在");
        emit_payload(&window_clone, "error", format!("{:?}", error)); return;
    }

    let (mut cmd, cmd_str) = match ffmpeg_command_maker(command, path, start_time, end_time, format, encode, scale) {
        Ok(result) => result,
        Err(error) => { emit_payload(&window_clone, FFmpegEvent::Error.as_str(), format!("{:?}", error)); return; },
    };

    thread::spawn(move || {

        let mut child = match cmd.spawn() {
            Ok(child) => child,
            Err(error) => { emit_payload(&window_clone, FFmpegEvent::Error.as_str(), format!("{:?}", error)); return; },
        };

        {
            let mut global = global_pid_lock();
            *global = Some(child.id());
        }

        child_log(&mut child, |line| {
            if !line.is_empty() { emit_payload(&window_clone, FFmpegEvent::Progress.as_str(), line); }
        });

        let output = match child.wait_with_output() {
            Ok(output) => output,
            Err(error) => {
                emit_payload(&window_clone, FFmpegEvent::Error.as_str(), format!("{:?}",error));
                let mut global = global_pid_lock();
                *global = None; return;
            }
        };

        emit_payload(&window_clone, FFmpegEvent::Finish.as_str(), format!("{:?}", output));
        emit_payload(&window_clone, FFmpegEvent::Finish.as_str(), &cmd_str);
    });
}

#[tauri::command]
fn start_convert(window: Window, command: &str, path: &str, start_time: &str, end_time: &str, format: &str, encode: &str, scale: &str) {
    start_convert_action(window, command, path, start_time, end_time, format, encode, scale);
}

// src-tauri/src/utility/_command.rs
use std::{
    str,
    io::Error,
    collections::HashMap,
    process::{Command, Stdio}
};

use crate::library:: {
    _process::{command_combine},
    _path::{full_path_maker},
};

pub fn ffmpeg_command_maker(command: &str, path: &str, start_time: &str, end_time: &str, format: &str, encode: &str, scale: &str) -> Result<(Command, String), Error> {

    let ffmpeg_cmd = ffmpeg_code_maker(command, path, start_time, end_time, format, encode, scale)?;
    let mut command = command_combine(ffmpeg_cmd.as_str());

    command.stdout(Stdio::piped());
    command.stderr(Stdio::piped());

    Ok((command, ffmpeg_cmd))
}

fn ffmpeg_code_maker(command: &str, path: &str, start_time: &str, end_time: &str, format: &str, encode: &str, scale: &str) -> Result<String, Error> {
    let codec = encode_codec(encode).unwrap_or("-c copy");
    let output_path = full_path_maker(path, format)?;

    let video_scale = if scale.is_empty() {
        String::new()
    } else {
        format!("-vf scale='{}'", scale)
    };

    let ffmpeg_cmd = format!("{} -ss {} -to {} -i '{}' {} {} '{}'", command, start_time, end_time, path, codec, video_scale, output_path.display());
    Ok(ffmpeg_cmd)
}

fn encode_codec(encode: &str) -> Option<&'static str> {
    let encodes: HashMap<&str, &str> = [
        ("copy", "-c copy"),
        ("h264", "-c:v libx264 -pix_fmt yuv420p -c:a aac"),
        ("h265", "-c:v libx265 -pix_fmt yuv420p -tag:v hvc1 -c:a aac"),
    ].into_iter().collect();

    encodes.get(encode).copied()
}

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>影片格式轉換器</title>
    <style>
      html, body { overflow: hidden; }
    </style>
  </head>

  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>