Initial commit

.gitignore

@@ -0,0 +1,3 @@
+node_modules
+dist
+.idea

.prettierrc

@@ -0,0 +1,7 @@
+{
+  "printWidth": 120,
+  "trailingComma": "all",
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": true
+}

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Creatomate
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,51 @@
+# Creatomate Preview SDK
+
+The [Preview SDK](https://creatomate.com/javascript-video-sdk) lets you display video and image previews in your web app prior to creating a final MP4, GIF, JPEG or PNG through the API. This is useful when developing a web-based editing or customizer tool, and want to show a real-time rendering in the browser.
+
+This package is for browser-based apps, and it works with any framework such as React, Angular, Vue, as well as plain Javascript. For creating videos and images using Node.js, refer to the `creatomate` library instead, a different NPM package that [can be found here](https://www.npmjs.com/package/creatomate).
+
+[Creatomate](https://creatomate.com) is a media generation API for editing and rendering videos and images using code. The platform uses templates and JSON for generating **MP4**, **GIF**, **JPEG** or **PNG** files. All processing is handled by Creatomate's cloud infrastructure, so you do not need to maintain your own servers.
+
+## Usage
+
+### Installation
+
+Install the package using the following command:
+
+```bash
+npm install @creatomate/preview
+```
+
+You can now load a video template (or [JSON](https://creatomate.com/docs/json/introduction)) as follows:
+
+```javascript
+import { Preview } from '@creatomate/preview';
+
+// The following assumes that you have a HTML element like this: <div id="container"></div>
+const containerElement = document.getElementById('container');
+
+// Initialize a preview to be spawned within the container
+const preview = new Preview(containerElement, 'player', 'YOUR_VIDEO_PLAYER_TOKEN');
+
+// Once the SDK is ready, load a template from the project
+preview.onReady = async () => {
+  await preview.loadTemplate('YOUR_TEMPLATE_ID');
+
+  // You can also load a video from JSON:
+  // await preview.setSource({ /* Your JSON here */ });
+};
+```
+
+Check out the demo code provided below for a more comprehensive example.
+
+### Demo
+
+See the Preview SDK in action here: [Video Preview Demo](https://github.com/Creatomate/video-preview-demo)
+
+## Issues & Comments
+
+Feel free to contact us if you encounter any issues with the library or Creatomate API at [support@creatomate.com](mailto:support@creatomate.com).
+
+## License
+
+The Creatomate Preview SDK is licensed under the MIT license. Please refer to the [LICENSE](https://github.com/Creatomate/creatomate-node/blob/main/LICENSE) for more information.

package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@creatomate/preview",
+  "version": "1.0.0",
+  "description": "Render video and image previews in your web app prior to creating a final MP4, GIF, JPEG or PNG through the API.",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc --watch",
+    "prepack": "npm run build"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/creatomate/creatomate-preview.git"
+  },
+  "keywords": [],
+  "author": "Creatomate",
+  "license": "MIT",
+  "homepage": "https://creatomate.com/javascript-video-sdk",
+  "devDependencies": {
+    "@types/uuid": "^9.0.0",
+    "prettier": "^2.7.1",
+    "ts-node": "^10.9.1",
+    "typescript": "^4.8.4"
+  },
+  "dependencies": {
+    "uuid": "^9.0.0"
+  }
+}

src/AudioState.ts

@@ -0,0 +1,6 @@
+export interface AudioState {
+  /**
+   * Audio element property. The total length of the media file used in the element.
+   */
+  mediaDuration?: number;
+}

src/CompositionState.ts

@@ -0,0 +1,8 @@
+import { ElementState } from './ElementState';
+
+export interface CompositionState {
+  /**
+   * Composition element property. The elements in the composition.
+   */
+  elements?: ElementState[];
+}