[feature] Flesh out encoder module

[Jkwok0714]

Description

Enable form for common options to pass to the video converter.

It can be pretty basic since real video operations should be done with something like Handbrake anyway.

MVP

Edit and run with options.

Out of scope

If anything is explicitly out of scope - leave empty if not.

[Jkwok0714]

const ffmpegOptions = {
  videoCodec: 'libx264',          // Video codec
  audioCodec: 'aac',              // Audio codec
  videoBitrate: '1000k',          // Video bitrate
  audioBitrate: '128k',           // Audio bitrate
  frameRate: 30,                  // Frame rate
  resolution: '1280x720',         // Video resolution
  preset: 'fast',                 // Preset for encoding speed
  overwrite: true                 // Overwrite output files
};

const ffmpeg = require('fluent-ffmpeg');

function applyFfmpegOptions(command, options) {
  if (options.videoCodec) {
    command.videoCodec(options.videoCodec);
  }

  if (options.audioCodec) {
    command.audioCodec(options.audioCodec);
  }

  if (options.videoBitrate) {
    command.videoBitrate(options.videoBitrate);
  }

  if (options.audioBitrate) {
    command.audioBitrate(options.audioBitrate);
  }

  if (options.frameRate) {
    command.fps(options.frameRate);
  }

  if (options.resolution) {
    command.size(options.resolution);
  }

  if (options.preset) {
    command.addOption('-preset', options.preset);
  }

  if (options.overwrite) {
    command.outputOptions('-y'); // Overwrite output files
  }

  return command;
}

// Example function to convert .mov to .mp4 using fluent-ffmpeg with custom options
function convertMovToMp4(inputFile, outputFile, options) {
  const command = ffmpeg(inputFile);

  // Apply the options from the object
  applyFfmpegOptions(command, options);

  // Specify the output file and run the command
  command
    .output(outputFile)
    .on('end', () => {
      console.log(`Conversion successful: ${outputFile}`);
    })
    .on('error', (err) => {
      console.error(`Conversion error: ${err.message}`);
    })
    .run();
}

// Define the input and output files
const inputPath = 'path/to/your/input.mov';
const outputPath = 'path/to/your/output.mp4';

// Convert using the custom options defined above
convertMovToMp4(inputPath, outputPath, ffmpegOptions);

<template>
  <div class="ffmpeg-options-editor">
    <h2>FFmpeg Options Editor</h2>
    <q-form @submit="submitOptions">
      <!-- Video Codec -->
      <q-select
        v-model="options.videoCodec"
        :options="videoCodecOptions"
        label="Video Codec"
        outlined
        dense
        class="q-mb-md"
      />

      <!-- Audio Codec -->
      <q-select
        v-model="options.audioCodec"
        :options="audioCodecOptions"
        label="Audio Codec"
        outlined
        dense
        class="q-mb-md"
      />

      <!-- Video Bitrate -->
      <q-input
        v-model="options.videoBitrate"
        label="Video Bitrate (e.g., 1000k)"
        outlined
        dense
        class="q-mb-md"
      />

      <!-- Audio Bitrate -->
      <q-input
        v-model="options.audioBitrate"
        label="Audio Bitrate (e.g., 128k)"
        outlined
        dense
        class="q-mb-md"
      />

      <!-- Frame Rate -->
      <q-input
        v-model.number="options.frameRate"
        label="Frame Rate (e.g., 30)"
        outlined
        dense
        type="number"
        class="q-mb-md"
      />

      <!-- Resolution -->
      <q-input
        v-model="options.resolution"
        label="Resolution (e.g., 1920x1080)"
        outlined
        dense
        class="q-mb-md"
      />

      <!-- Preset -->
      <q-select
        v-model="options.preset"
        :options="presetOptions"
        label="Preset"
        outlined
        dense
        class="q-mb-md"
      />

      <!-- Overwrite Output -->
      <q-checkbox
        v-model="options.overwrite"
        label="Overwrite Output"
        class="q-mb-md"
      />

      <!-- Submit Button -->
      <q-btn type="submit" label="Submit Options" color="primary" class="q-mt-md" />
    </q-form>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, PropType, watch } from 'vue';
import { QForm, QInput, QSelect, QBtn, QCheckbox } from 'quasar';

export default defineComponent({
  name: 'FFmpegOptionsEditor',
  emits: ['updateOptions'],
  setup(_, { emit }) {
    // Default options for FFmpeg
    const options = ref({
      videoCodec: 'libx264',
      audioCodec: 'aac',
      videoBitrate: '1000k',
      audioBitrate: '128k',
      frameRate: 30,
      resolution: '1280x720',
      preset: 'fast',
      overwrite: true,
    });

    // Options for the dropdowns
    const videoCodecOptions = ['libx264', 'libx265', 'mpeg4', 'copy'];
    const audioCodecOptions = ['aac', 'mp3', 'ac3', 'copy'];
    const presetOptions = ['ultrafast', 'superfast', 'fast', 'medium', 'slow', 'veryslow'];

    // Emit the options when the form is submitted
    const submitOptions = () => {
      emit('updateOptions', options.value);
    };

    return {
      options,
      videoCodecOptions,
      audioCodecOptions,
      presetOptions,
      submitOptions,
    };
  },
});
</script>

<style scoped>
.ffmpeg-options-editor {
  max-width: 400px;
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background: #f9f9f9;
}
</style>