JS SDK : what are all interactions with shotstack object?

Hi,

I am working on a JS plugin for a Bubble app and I struggle with shotstack SDK.
The documentation covers :

  • studio creation with shotstack.create
  • how to load a template with shotstack.load

But, what I miss is :

  • how do I add a media to a shotstack instance already in use? (currently I can only do shotstack.load which reloads the whole project and so I loses what I might have build in the studio)
  • how to get the JSON output of what has been created in the studio?
  • more generally speaking, what are all the SDK commands that are not covered by the documentation? (only 2 commands are covered)

As you might haved guessed with the vocabulary I am using, I am nor an english native or a skilled JS developper so it’d be awesome if you could explain it to me like I am 5yo

Thanks all

Hi @dusk,

Here is a response to your questions.

1. How do I add a media to a Shotstack instance already in use?

Currently, the Shotstack.load() method reloads the whole project, which resets everything.

You can manipulate the Edit object directly and then use the shotstack.load() method to update the Studio without losing all existing data.

To add media to an instance without reloading, follow these steps:

  1. Use the Edit object (window.shotstack.edit) to access and modify the project currently in the Studio.

  2. Add a new clip (with the new media) to your Edit JSON object.

  3. Update the Studio by reloading this updated Edit JSON object.

Here’s how to do it:

const currentEdit = window.shotstack.edit; // Get the current Edit JSON object

// Add a new media clip to the Edit JSON
const newClip = {
  type: 'video', // The type of media (video, image, etc.)
  src: 'https://your-media-url.com/media.mp4', // The URL of the media
  start: 0, // The start time of the clip
  length: 10 // The duration of the clip
};
currentEdit.tracks[0].clips.push(newClip); // Add the new clip to the first track

// Reload the Studio with the updated Edit JSON object
window.shotstack.load('studio', currentEdit);

This script uses the Edit object to add a new clip and reloads the Studio with the updated project.

2. Getting the JSON Output of What Has Been Created in the Studio

To get the JSON of what’s currently in the Studio, use the Edit object or listen for the update event:

  1. Using the Edit object:
const currentProject = window.shotstack.edit;
console.log(currentProject); // This logs the current JSON project

2. Using the update event listener:

This triggers every time the project is updated in the Studio (e.g., when a clip is added or edited):

window.shotstack.on('update', (data) => {
  console.log('Project updated:', data); // JSON of the updated project
});

3. What are all the SDK commands not covered in the documentation?

Currently, the documented commands are the only ones available.

However, we are continuously improving the SDK and will update the documentation as new features and commands are released.

Hey @Peace_Aisosa ,

Thanks for your message.
Can you direct me to the reference of those?

For instance: what is newMediaClip ? Is it an object? If so, what shape and how to generate it?

I am unable to make it work:

let json = {
    "output": {
        "format": "mp4",
        "fps": 25,
        "size": {
            "width": 1024,
            "height": 576
        }
    },
    "timeline": {}
}
window.shotstack.create('studio', keys['Owner ID'], json);

let newMediaClip = {
    "clips": {
        "asset": {
            "type": "video",
            "src": "https://domain.com/file_example_MP4_1280_10MG.mp4",
        },
        "start": 'auto',
        "length": 'auto'
    }
}



// Check if window.shotstack.edit.timeline exists, if not initialize it
if (!window.shotstack.edit.timeline) {
    window.shotstack.edit.timeline = {};
}

// Check if timeline.tracks exists, if not initialize it as an array
if (!Array.isArray(window.shotstack.edit.timeline.tracks)) {
    window.shotstack.edit.timeline.tracks = [];
}

// Safely push newMediaClip to the tracks array
window.shotstack.edit.timeline.tracks.push(newMediaClip);

window.shotstack.load('studio', window.shotstack.edit);

Can you please help?

Hi @tongs.mower.0x ,

Can you share what you want to do or achieve so I help you with that ?

Also is this related to this thread ?

Integrating JS SDK into a project, so I want to add a media via a public URL to the editor using the update method. So it relates to how to interact with the JS SDK.

Hey @Peace_Aisosa ,

I manage to get it work, my bad.