@afp/data-driven-video-ui

Data Driven Video template interface

Main interface to make data driven videos

Made with ❤️ by AFP Graphics Team. Based on vue-webpack-template v0.2.1.

The interface wait for the template to get his config file. Then based on the config it populates the form. Then you can send a preview of your settings or generate all the videos you want.

So there is 2 config files, one for building the form, the other for manipulating the template.

The form config

The form config is divided in 2 parts:

1. The specific settings: divided in two parts
   1. The original version settings: the data shared between videos
   2. The locales settings: the translation contents
2. The general settings: codec, format, everything related to ffmpeg

The input item models

Each input is generated by an input item model. Here is a exemple of one:

{
  type: 'number', // the input type
  name: videoWidth, // the future variable name
  label: 'Width', // the displayed label
  value: 1920 // the initial value
}

The type value can be: text, number, url, select, textarea, or checkbox.

Each model is transmitted to the SettingsForm through props or a config file. It's the SettingsForm component who's in charge to convert those models input reactive inputs.

The SettingsForm import the GENERAL_MODEL array to get the main video options like dimension, number of fps, codec, etc. Thoses options are shared by all videos, that's why it' inside a config file. To be easily manipulable and maintainable. You can find the config file in src/config/index.js.

The SettingsForm receive the specificModel through 2 props: specificOriginModel, and specificTranslationsModel. The models follow the same guideline as above and are exposed by the template himself via (To be defined).

The SettingsForm loop through models entries, generate the appropriate input and bind dynamically it to his $data.

Then a computed property called configs generate an array of config that will be transmitted to the ddv docker server. Each config can be sent to the preview to see if the preset fit well.

The config object

The SettingsForm keep up to date an array of config object. This is what will be sent to the ddv tool. Here is an exemple of one:

{
  general: {
    videoTitle: '',
    videoWidth: 1920,
    videoHeight: 1080,
    fps: 25,
    fileFormat: 'mov',
    codec: 'prores',
    hd: false,
    filename: '1920_1080_25fps_prores_vo.mov'
  },
  data:  {
    locale: null, // if locale is null, then it's the original version
    tweetUrl: 'https://twitter.com/realDonaldTrump/status/1008725438972211200',
    traductionContent: null // So the translation items will be null too.
  }
}

The template will receive an object with two keys, one named general with the ffmpeg parameters and a seconde one data who cares about all the data needed by the template.

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build