Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@afp/data-driven-video-ui

Package Overview
Dependencies
Maintainers
2
Versions
131
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@afp/data-driven-video-ui

Main interface to generate data driven videos

  • 1.2.7
  • npm
  • Socket score

Version published
Weekly downloads
49
increased by157.89%
Maintainers
2
Weekly downloads
 
Created
Source

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

FAQs

Package last updated on 14 Sep 2018

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc