Create Timeline with Shotstack API on New Column from PostgreSQL API

Pipedream makes it easy to connect APIs for Shotstack, PostgreSQL and 2,400+ other apps remarkably fast.

Trigger workflow on

New Column from the PostgreSQL API

Next, do this

Create Timeline with the Shotstack API

No credit card required

▶

Watch us build a workflow

8 min

Watch now ➜

Trusted by 1,000,000+ developers from startups to Fortune 500 companies

Developers ♥ Pipedream

Getting Started#

This integration creates a workflow with a PostgreSQL trigger and Shotstack action. When you configure and deploy the workflow, it will run on Pipedream's servers 24x7 for free.

Select this integration
Configure the New Column trigger
1. Connect your PostgreSQL account
2. Configure Polling Interval
3. Select a Schema
4. Select a Table
Configure the Create Timeline action
1. Connect your Shotstack account
2. Configure How Many Tracks?
3. Optional- Configure Soundtrack Source
4. Optional- Select a Soundtrack Effect
5. Optional- Configure Background
6. Optional- Configure Fonts
Deploy the workflow
Send a test event to validate your setup
Turn on the trigger

Details#

This integration uses pre-built, source-available components from Pipedream's GitHub repo. These components are developed by Pipedream and the community, and verified and maintained by Pipedream.

To contribute an update to an existing component or create a new component, create a PR on GitHub. If you're new to Pipedream component development, you can start with quickstarts for trigger span and action development, and then review the component API reference.

Trigger#

New Column on PostgreSQL

Description:Emit new event when a new column is added to a table. [See the documentation](https://node-postgres.com/features/queries)

Version:2.0.6

Key:postgresql-new-column

View on GitHub

PostgreSQL Overview#

On Pipedream, you can leverage the PostgreSQL app to create workflows that automate database operations, synchronize data across platforms, and react to database events in real-time. Think handling new row entries, updating records from webhooks, or even compiling reports on a set schedule. Pipedream's serverless platform provides a powerful way to connect PostgreSQL with a variety of apps, enabling you to create tailored automation that fits your specific needs.

Trigger Code#

import common from "../common.mjs";

export default {
  ...common,
  name: "New Column",
  key: "postgresql-new-column",
  description: "Emit new event when a new column is added to a table. [See the documentation](https://node-postgres.com/features/queries)",
  version: "2.0.6",
  type: "source",
  props: {
    ...common.props,
    schema: {
      propDefinition: [
        common.props.postgresql,
        "schema",
      ],
    },
    table: {
      propDefinition: [
        common.props.postgresql,
        "table",
        (c) => ({
          schema: c.schema,
        }),
      ],
    },
  },
  async run() {
    const previousColumns = this._getPreviousValues() || [];

    const columns = await this.postgresql.getColumns(this.table, this.schema);

    const newColumns = columns.filter((column) => !previousColumns.includes(column));
    for (const column of newColumns) {
      const meta = this.generateMeta(column);
      this.$emit(column, meta);
    }

    this._setPreviousValues(columns);
  },
};

Trigger Configuration#

This component may be configured based on the props defined in the component code. Pipedream automatically prompts for input values in the UI and CLI.

Label	Prop	Type	Description
PostgreSQL	`postgresql`	`app`	This component uses the PostgreSQL app.
N/A	`db`	`$.service.db`	This component uses `$.service.db` to maintain state between executions.
Polling Interval	`timer`	`$.interface.timer`	Pipedream will poll the API on this schedule
Schema	`schema`	`string`	Select a value from the drop down menu.
Table	`table`	`string`	Select a value from the drop down menu.

Trigger Authentication#

PostgreSQL uses API keys for authentication. When you connect your PostgreSQL account, Pipedream securely stores the keys so you can easily authenticate to PostgreSQL APIs in both code and no-code steps.

Connecting to Restricted Databases

Either enable the shared static IP for this account below, or configure a VPC to deploy any workflow in your workspace to a private network with a dedicated static IP. Learn more in our docs.

SSL Setup

Configure SSL on your PostgreSQL database by providing the CA (Certificate Authority), and choosing between Full Verification, Verify Certificate Authority (CA), or Skip Verification. Skipping verification is not recommended as this has serious security implications.

About PostgreSQL#

PostgreSQL is a free and open-source relational database management system emphasizing extensibility and SQL compliance.

Action#

Create Timeline on Shotstack

Description:Generate a timeline with layers and assets for a new video project. [See the documentation here](https://github.com/shotstack/shotstack-sdk-node#timeline).

Version:0.0.1

Key:shotstack-create-timeline

View on GitHub

Shotstack Overview#

The Shotstack API is a video editing platform that allows you to automate the creation and production of videos. With it, you can edit clips, add transitions, overlays, and backgrounds, and even include music in your videos. Integrating Shotstack with Pipedream can supercharge your workflow by automating the video creation process. You can trigger video edits in response to various events, manage assets, or even kick off rendering jobs based on data from other apps and services.

Action Code#

import app from "../../shotstack.app.mjs";
import constants from "../../common/constants.mjs";

const { SEP } = constants;

export default {
  key: "shotstack-create-timeline",
  name: "Create Timeline",
  description: "Generate a timeline with layers and assets for a new video project. [See the documentation here](https://github.com/shotstack/shotstack-sdk-node#timeline).",
  type: "action",
  version: "0.0.1",
  props: {
    app,
    howManyTracks: {
      type: "integer",
      label: "How Many Tracks?",
      description: "The number of tracks to create.",
      reloadProps: true,
      min: 1,
    },
    soundtrackSrc: {
      type: "string",
      label: "Soundtrack Source",
      description: "The URL of the soundtrack to use.",
      optional: true,
    },
    soundtrackEffect: {
      type: "string",
      label: "Soundtrack Effect",
      description: "The effect to apply to the soundtrack.",
      optional: true,
      options: Object.values(constants.SOUNDTRACK_EFFECT),
    },
    background: {
      type: "string",
      label: "Background",
      description: "A hexadecimal value for the timeline background colour. Defaults to `#000000` (black).",
      optional: true,
    },
    fonts: {
      type: "string[]",
      label: "Fonts",
      description: "An array of custom fonts to be downloaded for use by the HTML assets. The URL must be publicly accessible or include credentials. E.g. `https://s3-ap-northeast-1.amazonaws.com/my-bucket/open-sans.ttf`",
      optional: true,
    },
  },
  methods: {
    getClip({
      start, length, type, src, text, html,
    }) {
      return {
        start,
        length,
        asset: {
          src,
          html,
          text,
          type,
        },
      };
    },
    getClips(trackNumber, assetType, length) {
      return Array.from({
        length,
      }).map((_, index) => {
        const clipNumber = index + 1;
        const trackName = `track${trackNumber}`;
        const clipName = `${trackName}${SEP}clip${clipNumber}${SEP}${assetType}`;
        const clipAssetStart = `${clipName}${SEP}start`;
        const clipAssetLength = `${clipName}${SEP}length`;
        const clipAssetSrc = `${clipName}${SEP}src`;
        const clipAssetText = `${clipName}${SEP}text`;
        const clipAssetHtml = `${clipName}${SEP}html`;
        return this.getClip({
          start: this[clipAssetStart],
          length: this[clipAssetLength],
          type: assetType,
          src: this[clipAssetSrc],
          text: this[clipAssetText],
          html: this[clipAssetHtml],
        });
      });
    },
    getTracks(length) {
      return Array.from({
        length,
      }).map((_, index) => {
        const trackNumber = index + 1;
        const trackName = `track${trackNumber}`;
        const trackHowManyVideoClips = `${trackName}${SEP}HowManyVideoClips`;
        const trackHowManyImageClips = `${trackName}${SEP}HowManyImageClips`;
        const trackHowManyAudioClips = `${trackName}${SEP}HowManyAudioClips`;
        const trackHowManyTitleClips = `${trackName}${SEP}HowManyTitleClips`;
        const trackHowManyHtmlClips = `${trackName}${SEP}HowManyHtmlClips`;
        const trackHowManyLumaClips = `${trackName}${SEP}HowManyLumaClips`;
        return {
          clips: [
            ...this.getClips(trackNumber, constants.ASSET_TYPE.VIDEO, this[trackHowManyVideoClips]),
            ...this.getClips(trackNumber, constants.ASSET_TYPE.IMAGE, this[trackHowManyImageClips]),
            ...this.getClips(trackNumber, constants.ASSET_TYPE.AUDIO, this[trackHowManyAudioClips]),
            ...this.getClips(trackNumber, constants.ASSET_TYPE.TITLE, this[trackHowManyTitleClips]),
            ...this.getClips(trackNumber, constants.ASSET_TYPE.HTML, this[trackHowManyHtmlClips]),
            ...this.getClips(trackNumber, constants.ASSET_TYPE.LUMA, this[trackHowManyLumaClips]),
          ],
        };
      });
    },
    getClipProps(trackNumber, assetType, length) {
      return Array.from({
        length,
      }).map((_, index) => {
        const clipNumber = index + 1;
        const trackName = `track${trackNumber}`;
        const clipName = `${trackName}${SEP}clip${clipNumber}${SEP}${assetType}`;
        const clipAssetStart = `${clipName}${SEP}start`;
        const clipAssetLength = `${clipName}${SEP}length`;
        const description = `Track ${trackNumber} - ${assetType} clip ${clipNumber}.`;

        const commonProps = {
          [clipAssetStart]: {
            type: "integer",
            label: "Start",
            description: `${description} The start time of the asset`,
          },
          [clipAssetLength]: {
            type: "integer",
            label: "Length",
            description: `${description} The length of the asset.`,
          },
        };

        if (assetType === constants.ASSET_TYPE.TITLE) {
          return {
            ...commonProps,
            [`${clipName}${SEP}text`]: {
              type: "string",
              label: "Text",
              description: `${description} The text of the title.`,
            },
          };
        }

        if (assetType === constants.ASSET_TYPE.HTML) {
          return {
            ...commonProps,
            [`${clipName}${SEP}html`]: {
              type: "string",
              label: "HTML",
              description: `${description} The HTML of the asset.`,
            },
          };
        }

        return {
          ...commonProps,
          [`${clipName}${SEP}src`]: {
            type: "string",
            label: "Source",
            description: `${description} The source url of the asset.`,
          },
        };
      })
        .reduce((acc, next) => ({
          ...acc,
          ...next,
        }), {});
    },
  },
  additionalProps() {
    return Array.from({
      length: this.howManyTracks,
    }).reduce((acc, _, index) => {
      const trackNumber = index + 1;
      const trackName = `track${trackNumber}`;
      const trackHowManyVideoClips = `${trackName}${SEP}HowManyVideoClips`;
      const trackHowManyImageClips = `${trackName}${SEP}HowManyImageClips`;
      const trackHowManyAudioClips = `${trackName}${SEP}HowManyAudioClips`;
      const trackHowManyTitleClips = `${trackName}${SEP}HowManyTitleClips`;
      const trackHowManyHtmlClips = `${trackName}${SEP}HowManyHtmlClips`;
      const trackHowManyLumaClips = `${trackName}${SEP}HowManyLumaClips`;
      const commonDescription = `Track ${trackNumber}:`;

      return {
        ...acc,
        [trackHowManyVideoClips]: {
          type: "integer",
          label: "How Many Video Clips?",
          description: `${commonDescription} The number of video clips to create.`,
          reloadProps: true,
          optional: true,
        },
        [trackHowManyImageClips]: {
          type: "integer",
          label: "How Many Image Clips?",
          description: `${commonDescription} The number of image clips to create.`,
          reloadProps: true,
          optional: true,
        },
        [trackHowManyAudioClips]: {
          type: "integer",
          label: "How Many Audio Clips?",
          description: `${commonDescription} The number of audio clips to create.`,
          reloadProps: true,
          optional: true,
        },
        [trackHowManyTitleClips]: {
          type: "integer",
          label: "How Many Title Clips?",
          description: `${commonDescription} The number of title clips to create.`,
          reloadProps: true,
          optional: true,
        },
        [trackHowManyHtmlClips]: {
          type: "integer",
          label: "How Many HTML Clips?",
          description: `${commonDescription} The number of HTML clips to create.`,
          reloadProps: true,
          optional: true,
        },
        [trackHowManyLumaClips]: {
          type: "integer",
          label: "How Many Luma Clips?",
          description: `${commonDescription} The number of luma clips to create.`,
          reloadProps: true,
          optional: true,
        },
        ...this.getClipProps(trackNumber, constants.ASSET_TYPE.VIDEO, this[trackHowManyVideoClips]),
        ...this.getClipProps(trackNumber, constants.ASSET_TYPE.IMAGE, this[trackHowManyImageClips]),
        ...this.getClipProps(trackNumber, constants.ASSET_TYPE.AUDIO, this[trackHowManyAudioClips]),
        ...this.getClipProps(trackNumber, constants.ASSET_TYPE.TITLE, this[trackHowManyTitleClips]),
        ...this.getClipProps(trackNumber, constants.ASSET_TYPE.HTML, this[trackHowManyHtmlClips]),
        ...this.getClipProps(trackNumber, constants.ASSET_TYPE.LUMA, this[trackHowManyLumaClips]),
      };
    }, {});
  },
  async run({ $: step }) {
    const {
      howManyTracks,
      soundtrackSrc,
      soundtrackEffect,
      background,
      fonts,
    } = this;

    const timeline = {
      soundtrack: {
        src: soundtrackSrc,
        effect: soundtrackEffect,
      },
      background,
      fonts: Array.isArray(fonts)
        ? fonts.map((src) => ({
          src,
        }))
        : fonts?.split(",").map((src) => ({
          src,
        })),
      tracks: this.getTracks(howManyTracks),
    };

    step.export("$summary", "Successfully created a timeline.");

    return timeline;
  },
};

Action Configuration#

This component may be configured based on the props defined in the component code. Pipedream automatically prompts for input values in the UI.

Label	Prop	Type	Description
Shotstack	`app`	`app`	This component uses the Shotstack app.
How Many Tracks?	`howManyTracks`	`integer`	The number of tracks to create.
Soundtrack Source	`soundtrackSrc`	`string`	The URL of the soundtrack to use.
Soundtrack Effect	`soundtrackEffect`	`string`	Select a value from the drop down menu:`{ "label": "Fade volume in only", "value": "fadeIn" }{ "label": "Fade volume out only", "value": "fadeOut" }{ "label": "Fade volume in and out", "value": "fadeInFadeOut" }`
Background	`background`	`string`	A hexadecimal value for the timeline background colour. Defaults to `#000000` (black).
Fonts	`fonts`	`string[]`	An array of custom fonts to be downloaded for use by the HTML assets. The URL must be publicly accessible or include credentials. E.g. `https://s3-ap-northeast-1.amazonaws.com/my-bucket/open-sans.ttf`