add news title

examples/README.md

@@ -10,6 +10,16 @@
 editly kenBurns.json5
 ```
 
+## News title
+
+![](https://github.com/mifi/gifs/raw/master/newsTitle.gif)
+
+[kenBurns.json5](https://github.com/mifi/editly/blob/master/examples/newsTitle.json5)
+
+```bash
+editly newsTitle.json5
+```
+
 ## Resize modes
 
 ![](https://github.com/mifi/gifs/raw/master/resizeHorizontal.gif)

examples/newsTitle.json5

@@ -0,0 +1,15 @@
+{
+  width: 900,
+  height: 1600,
+  outPath: './newsTitle.mp4',
+  defaults: {
+    layer: { fontPath: './assets/Patua_One/PatuaOne-Regular.ttf' },
+  },
+  clips: [
+    { duration: 10, layers: [
+      { type: 'image', path: './assets/91083241_573589476840991_4224678072281051330_n.jpg' },
+      { type: 'news-title', text: 'BREAKING NEWS' },
+      { type: 'subtitle', text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.', backgroundColor: 'rgba(0,0,0,0.5)' }
+    ] },
+  ],
+}

index.js

@@ -108,7 +108,7 @@ module.exports = async (config = {}) => {
       return outLayers;
     }
 
-    if (type === 'title' || type === 'subtitle') {
+    if (['title', 'subtitle', 'news-title'].includes(type)) {
       assert(layer.text, 'Please specify a text');
 
       let { fontFamily } = layer;

sources/fabricFrameSource.js

@@ -278,6 +278,49 @@ async function titleFrameSource({ width, height, params }) {
   return { onRender };
 }
 
+async function newsTitleFrameSource({ width, height, params }) {
+  const { text, textColor = '#ffffff', backgroundColor = '#d02a42', fontFamily = 'sans-serif', delay = 0, speed = 1 } = params;
+
+  async function onRender(progress, canvas) {
+    const min = Math.min(width, height);
+
+    const fontSize = Math.round(min * 0.05);
+
+    const easedBgProgress = easeOutExpo(Math.max(0, Math.min((progress - delay) * speed * 3, 1)));
+    const easedTextProgress = easeOutExpo(Math.max(0, Math.min((progress - delay - 0.02) * speed * 4, 1)));
+    const easedTextOpacityProgress = easeOutExpo(Math.max(0, Math.min((progress - delay - 0.07) * speed * 4, 1)));
+
+    const top = height * 0.08;
+
+    const paddingV = 0.07 * min;
+    const paddingH = 0.03 * min;
+
+    const textBox = new fabric.Text(text, {
+      top,
+      left: paddingV + (easedTextProgress - 1) * width,
+      fill: textColor,
+      opacity: easedTextOpacityProgress,
+      fontFamily,
+      fontSize,
+      charSpacing: width * 0.1,
+    });
+
+    const bgWidth = textBox.width + (paddingV * 2);
+    const rect = new fabric.Rect({
+      top: top - paddingH,
+      left: (easedBgProgress - 1) * bgWidth,
+      width: bgWidth,
+      height: textBox.height + (paddingH * 2),
+      fill: backgroundColor,
+    });
+
+    canvas.add(rect);
+    canvas.add(textBox);
+  }
+
+  return { onRender };
+}
+
 async function createCustomCanvasFrameSource({ width, height, params }) {
   const canvas = createCanvas(width, height);
   const context = canvas.getContext('2d');
@@ -315,6 +358,7 @@ module.exports = {
   customFabricFrameSource,
   subtitleFrameSource,
   titleFrameSource,
+  newsTitleFrameSource,
   fillColorFrameSource,
   radialGradientFrameSource,
   linearGradientFrameSource,

sources/frameSource.js

@@ -1,7 +1,7 @@
 const assert = require('assert');
 const pMap = require('p-map');
 
-const { rgbaToFabricImage, customFabricFrameSource, createCustomCanvasFrameSource, titleFrameSource, subtitleFrameSource, imageFrameSource, linearGradientFrameSource, radialGradientFrameSource, fillColorFrameSource, createFabricFrameSource, createFabricCanvas, renderFabricCanvas } = require('./fabricFrameSource');
+const { rgbaToFabricImage, customFabricFrameSource, createCustomCanvasFrameSource, titleFrameSource, subtitleFrameSource, imageFrameSource, linearGradientFrameSource, radialGradientFrameSource, fillColorFrameSource, createFabricFrameSource, newsTitleFrameSource, createFabricCanvas, renderFabricCanvas } = require('./fabricFrameSource');
 const createVideoFrameSource = require('./videoFrameSource');
 const { createGlFrameSource } = require('./glFrameSource');
 
@@ -24,6 +24,7 @@ async function createFrameSource({ clip, clipIndex, width, height, channels, ver
       'linear-gradient': async (opts) => createFabricFrameSource(linearGradientFrameSource, opts),
       'radial-gradient': async (opts) => createFabricFrameSource(radialGradientFrameSource, opts),
       'fill-color': async (opts) => createFabricFrameSource(fillColorFrameSource, opts),
+      'news-title': async (opts) => createFabricFrameSource(newsTitleFrameSource, opts),
     };
     const createFrameSourceFunc = frameSourceFuncs[type];
     assert(createFrameSourceFunc, `Invalid type ${type}`);