rename to make it more consistent with audio

visibleFrom -> start
visibleUntil -> stop
visibleDuration -> layerDuration

README.md

@@ -189,8 +189,8 @@ Edit specs are JavaScript / JSON objects describing the whole edit operation wit
 | `clips[].transition` | | Specify transition at the **end** of this clip. See `defaults.transition` | `defaults.transition` | |
 | `clips[].layers[]` | | List of layers within the current clip that will be overlaid in their natural order (final layer on top) | | |
 | `clips[].layers[].type` | | Layer type, see below | | |
-| `clips[].layers[].visibleFrom` | | What time into the clip should this layer start | | sec |
-| `clips[].layers[].visibleUntil` | | What time into the clip should this layer stop | | sec |
+| `clips[].layers[].start` | | What time into the clip should this layer start | | sec |
+| `clips[].layers[].stop` | | What time into the clip should this layer stop | | sec |
 | `audioTracks[]` | | List of arbitrary audio tracks. See [audio tracks](#arbitrary-audio-tracks). | `[]` | |
 | `audioFilePath` | `--audio-file-path` | Set an audio track for the whole video. See also [audio tracks](#arbitrary-audio-tracks) | | |
 | `loopAudio` | `--loop-audio` | Loop the audio track if it is shorter than video? | `false` | |

audio.js

@@ -33,10 +33,10 @@ module.exports = ({ ffmpegPath, ffprobePath, enableFfmpegLog, verbose, tmpDir })
         // Has user enabled keep source audio?
         if (!keepSourceAudio) return createSilence();
 
-        const audioLayers = layers.filter(({ type, visibleFrom, visibleUntil }) => (
+        const audioLayers = layers.filter(({ type, start, stop }) => (
           ['audio', 'video'].includes(type)
-          // TODO: We don't support audio for visibleFrom/visibleUntil layers
-          && !visibleFrom && visibleUntil == null));
+          // TODO: We don't support audio for start/stop layers
+          && !start && stop == null));
 
         if (audioLayers.length === 0) return createSilence();
 

examples/imageOverlay.json5

@@ -4,9 +4,9 @@
     { layers: [
       { type: 'video', path: './assets/changi.mp4', cutTo: 2 },
       { type: 'image-overlay', path: './assets/overlay.svg', width: 0.2, position: { x: 0.95, y: 0.03, originX: 'right' } },
-      { type: 'image-overlay', path: './assets/emoji.png', visibleUntil: 0.5, zoomDirection: 'in' },
-      { type: 'image-overlay', path: './assets/emoji2.svg', position: 'top', visibleFrom: 0.7, visibleUntil: 1.5, width: 0.2 },
-      { type: 'image-overlay', path: './assets/emoji2.svg', position: 'bottom', visibleFrom: 0.7, visibleUntil: 1.5, height: 0.2 },
+      { type: 'image-overlay', path: './assets/emoji.png', stop: 0.5, zoomDirection: 'in' },
+      { type: 'image-overlay', path: './assets/emoji2.svg', position: 'top', start: 0.7, stop: 1.5, width: 0.2 },
+      { type: 'image-overlay', path: './assets/emoji2.svg', position: 'bottom', start: 0.7, stop: 1.5, height: 0.2 },
     ] },
   ],
 }

examples/visibleFromUntil.json5

@@ -4,15 +4,15 @@
   clips: [
     { duration: 2, layers: [
       { type: 'video', path: './assets/lofoten.mp4', cutFrom: 0.4, cutTo: 2 },
-      { type: 'video', path: './assets/dancer1.webm', resizeMode: 'contain', cutFrom: 0, cutTo: 6, visibleFrom: 0.5, visibleUntil: 1 },
+      { type: 'video', path: './assets/dancer1.webm', resizeMode: 'contain', cutFrom: 0, cutTo: 6, start: 0.5, stop: 1 },
     ] },
     { duration: 2, layers: [
       { type: 'video', path: './assets/lofoten.mp4', cutFrom: 0.5, cutTo: 3.5 },
-      { type: 'news-title', text: 'Hei', visibleFrom: 0.5, visibleUntil: 1  },
+      { type: 'news-title', text: 'Hei', start: 0.5, stop: 1  },
     ] },
     { layers: [
       { type: 'video', path: './assets/lofoten.mp4', cutFrom: 0, cutTo: 4 },
-      { type: 'video', path: './assets/changi.mp4', cutFrom: 0, cutTo: 1, visibleFrom: 1, visibleUntil: 2 },
+      { type: 'video', path: './assets/changi.mp4', cutFrom: 0, cutTo: 1, start: 1, stop: 2 },
     ] },
   ],
 }

parseConfig.js

@@ -167,15 +167,15 @@ async function parseConfig({ defaults: defaultsIn = {}, clips, arbitraryAudio: a
 
     // We need to map again, because for audio, we need to know the correct clipDuration
     layersOut = await pMap(layersOut, async (layerIn) => {
-      const { type, path, visibleUntil, visibleFrom = 0 } = layerIn;
+      const { type, path, stop, start = 0 } = layerIn;
 
-      // This feature allows the user to show another layer overlayed (or replacing) parts of the lower layers (visibleFrom - visibleUntil)
-      const visibleDuration = ((visibleUntil || clipDuration) - visibleFrom);
-      assert(visibleDuration > 0 && visibleDuration <= clipDuration, `Invalid visibleFrom ${visibleFrom} or visibleUntil ${visibleUntil} (${clipDuration})`);
+      // This feature allows the user to show another layer overlayed (or replacing) parts of the lower layers (start - stop)
+      const layerDuration = ((stop || clipDuration) - start);
+      assert(layerDuration > 0 && layerDuration <= clipDuration, `Invalid start ${start} or stop ${stop} (${clipDuration})`);
       // TODO Also need to handle video layers (speedFactor etc)
-      // TODO handle audio in case of visibleFrom/visibleTo
+      // TODO handle audio in case of start/stop
 
-      const layer = { ...layerIn, visibleFrom, visibleDuration };
+      const layer = { ...layerIn, start, layerDuration };
 
       if (type === 'audio') {
         const { duration: fileDuration } = await readAudioFileInfo(ffprobePath, path);

sources/frameSource.js

@@ -52,8 +52,8 @@ async function createFrameSource({ clip, clipIndex, width, height, channels, ver
 
     // eslint-disable-next-line no-restricted-syntax
     for (const { frameSource, layer } of layerFrameSources) {
-      // console.log({ visibleFrom: layer.visibleFrom, visibleUntil: layer.visibleUntil, visibleDuration: layer.visibleDuration, time });
-      const offsetProgress = (time - (layer.visibleFrom)) / layer.visibleDuration;
+      // console.log({ start: layer.start, stop: layer.stop, layerDuration: layer.layerDuration, time });
+      const offsetProgress = (time - (layer.start)) / layer.layerDuration;
       // console.log({ offsetProgress });
       const shouldDrawLayer = offsetProgress >= 0 && offsetProgress <= 1;