@afp/data-driven-video-ui

Main interface to generate data driven videos

Stats

stars ūüĆüissues ‚ö†ÔłŹupdated ūüõ†created ūüź£size ūüŹčÔłŹ‚Äć‚ôÄÔłŹ
@afp/data-driven-video-ui
Minified + gzip package size for @afp/data-driven-video-ui in KB

Readme

Data Driven Video UI

L'interface principale pour générer des vidéos via DDV

L'interface embarque une prévisualisation et un formulaire de configuration. La prévisualisation ne peut se lancer tant qu'une première configuration ne lui a été envoyée. Le formulaire se divise en deux parties :

  • une statique qui concerne les param√®tres de fichiers (general)
  • une dynamique qui se construit en fonction de ce que le template a besoin (specific)

Les paramètres de fichiers

Ils permettent de définir les métadonnées de la vidéo, son tire, ses dimensions, sa fréquence d'images et ses propriétés d'export.

Les paramètres spécifiques

Cette partie est récupérée via l'appel a un fichier de configuration attendu à l'adresse http://url-du-template/config.json. Un template est toujours divisé en deux parties :

  • original, les informations indispensables √† la version de base (version originale)
  • translations, tout ce qui est en plus pour une traduction. C'est un Object dont les cl√©s sont les langues et les sous objets les propri√©t√©s

Comment configurer un input

Chaque input du formulaire correspond à un object de configuration appelé model. Il contient à minima :

  • type, le type d'input attendu, actuellement sont support√©s text, number, select, checkbox, textarea, url et hidden
  • name, la cl√© d'identification de l'input
  • label, le label texte associ√© √† l'input et affich√© par l'interface
  • value, la valeur de l'input √† son initialisation. La valeur peut √™tre de type String, Number, Boolean ou Array en fonction de ce qu'on cherche √† obtenir

Quelques fois il peut √™tre plus simple pour l'utilisateur final de lui exposer des presets plut√īt que l'exhaustivit√© des r√©glages. Pour ce faire, des propri√©t√©s additionnelles sont √† ajouter :

  • pour l'input de preset
    • separator: la chaine de carat√®re qui servira de regex pour spliter la valeur du select
    • displayDependenciesWhen: une valeur sp√©ciale qui d√©clenchera l'affichage des inputs cibles. G√©n√©ralement cette valeur est "custom"
    • dependenciesOrder: l'ordre dans lequel le preset est construit. Il servira ensuite √† faire correspondre les preset splitt√© par le s√©parateur avec les inputs cibles. C'est un tableau de name
  • pour l'input cible
    • dependsOn: qui est le name du preset auquel il est associ√©

L'objet config

Le SettingsForm tient à jour un tableau de config. C'est ce tableau qui sera envoyé au DDV Renderer. Voilà un exemple de config :

{
  general: {
    codec: 'ProRes',
    exportPresets: 'ProRes ‚ÄĒ mov',
    fileFormat: 'mov',
    filename: '2018‚ÄĘ09‚ÄĘ26_12‚ÄĘ33_fr.mov',
    fps: 50,
    fpsPresets: '50',
    host: 'http://10.129.2.156:8081/',
    timestamp: 1537958002142,
    videoHeight: 1080,
    videoPresets: '1920 x 1080',
    videoTitle: '',
    videoWidth: 1920,
  },
  specific:  {
    defaultLocale: 'fr' // The locale used by default for date and number display
    locale: null, // if locale is null, then it's the original version, it will override the defaultLocale entry
    tweetUrl: 'https://twitter.com/realDonaldTrump/status/1008725438972211200',
    traductionContent: null // So the translation items will be null too.
  }
}

Les interactions avec le template (DDVTemplate.js)

Dans sa preview, l'UI embarque une iframe de l'animation et permet à l'utilisateur de prévisualiser ses paramètres dans un environnement le plus similaire possible. Ce n'est pas parfaitement ISO car l'iframe est rendu dans le navigateur alors que la vidéo sera soumise aux contraintes du codec/format de fichier.

L'UI agit avec le template via l'API window.postMessage car l'objet window est non disponible au parent hébergeant l'iframe (la preview dans notre cas).

Il est donc indispensable que le template dispose du listener adequat. En l'occurence l'UI envoie au template les données attendues via l'évenement

{ type: 'init-template-data', templateData: {...config.specific, fps: config.general.fps} }

L'UI écoute quand à elle quelques évenements que le template lui envoie :

  • { type: 'animation-update', value: something } qui met √† jour la barre de progression
  • { type: 'duration-update', value: something } qui permet de savoir le temps total de l'animation
  • { type: 'default-filename', value: something } qui permet d'autog√©n√©rer un nom de fichier

Mettre à jour DDV-UI sur toolkit

C'est très simple, il suffit de suivre les étapes suivantes :

  1. augmenter la version du package via npm version patch|minor|major
  2. publier via npm publish
  3. optionnel mais ne pas oublier de pousser sur le repo
  4. dans le projet toolkit-ui, modifier le package.json pour être à la version correspondante
  5. pousser la modification de toolkit-ui sur la branche dev
  6. les runners gitlab s'occupent du reste ūüöÄ

Génération du nom de fichier

Pour éviter le risque que deux fichiers aient un nom identique (problématique pour Renderer et AWS S3), chaque fichier possède un id aléatoire généré d'une longueur de 6 caractères sur cet alphabet

0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz-

Ce qui réduit grandement le risque de collision, déjà faible, du nom des fichiers. Sachant que cet id ne sera qu'une petite partie du nom du fichier, et que les fichiers de plus de 15 jours sont automatiquement supprimés.

Exemple d'un nouveau nom de fichier :

20191219_152018_twitter_vo_um0p7w.mxf

Voir : https://zelark.github.io/nano-id-cc/

Build Setup

# install dependencies
npm install

# serve with hot reload
npm run serve

# build for production with minification
npm run build

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.