Create Timeline with Shotstack API on New Command Received (Instant) from Discord API

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

Trigger workflow on

New Command Received (Instant) from the Discord 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 Discord 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 Command Received (Instant) trigger
1. Connect your Discord account
2. Configure Channels
3. Configure discordApphook
4. Configure Commands
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 Command Received (Instant) on Discord

Description:Emit new event for each command posted to one or more channels in a Discord server

Version:0.0.3

Key:discord-new-command-received

View on GitHub

Discord Overview#

The Discord API interacts seamlessly with Pipedream, empowering you to craft customized automations and workflows for your Discord server. With this powerful integration, you can automate tasks like message posting, user management, and notifications, based on a myriad of triggers and actions from different apps. These automations can enhance the Discord experience for community moderators and members, by synchronizing with external tools, organizing community engagement, and streamlining notifications.

Trigger Code#

import discord from "../../discord.app.mjs";
import sampleEmit from "./test-event.mjs";

export default {
  type: "source",
  key: "discord-new-command-received",
  name: "New Command Received (Instant)",
  description: "Emit new event for each command posted to one or more channels in a Discord server",
  version: "0.0.3",
  dedupe: "unique",
  props: {
    discord,
    channels: {
      type: "$.discord.channel[]",
      appProp: "discord",
      label: "Channels",
      description: "Select the channel(s) you'd like to be notified for",
    },
    // eslint-disable-next-line pipedream/props-label,pipedream/props-description
    discordApphook: {
      type: "$.interface.apphook",
      appProp: "discord",
      async eventNames() {
        return this.channels || [];
      },
    },
    commands: {
      label: "Commands",
      description: "List of commands to listen. E.g. `[\"/hi\", \"/hello\"]`",
      type: "string[]",
    },
  },
  async run(event) {
    if (event.guildID != this.discord.$auth.guild_id) {
      return;
    }

    const command = event.content.split(" ")[0];

    if (typeof this.commands === "string") {
      this.commands = JSON.parse(this.commands);
    }

    if (!this.commands.includes(command)) {
      return;
    }

    this.$emit(event, {
      id: event.id,
      summary: `New command posted with ID ${event.id}`,
      ts: Date.parse(event.createdTimestamp),
    });
  },
  sampleEmit,
};

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
Discord	`discord`	`app`	This component uses the Discord app.
Channels	`channels`	`$.discord.channel[]`	Select the channel(s) you'd like to be notified for
	`discordApphook`	`$.interface.apphook`
Commands	`commands`	`string[]`	List of commands to listen. E.g. `["/hi", "/hello"]`

Trigger Authentication#

Discord uses OAuth authentication. When you connect your Discord account, Pipedream will open a popup window where you can sign into Discord and grant Pipedream permission to connect to your account. Pipedream securely stores and automatically refreshes the OAuth tokens so you can easily authenticate any Discord API.

Pipedream requests the following authorization scopes when you connect your account:

botemailidentifyguilds

About Discord#

Use this app to create a Discord source that emits messages from your guild to a Pipedream workflow.

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`

Create Timeline with Shotstack API on New Command Received (Instant) from Discord API

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

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

Developers ♥ Pipedream

1-24of2,400+apps by most popular

1
-
24
of
2,400+
apps by most popular