Skip to content

feat: Updated demos with new sdk #4

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Kratos2k7 wants to merge 1 commit into
base: master
Choose a base branch
from
Open

feat: Updated demos with new sdk #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16,835 changes: 8,437 additions & 8,398 deletions angular/package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

52 changes: 26 additions & 26 deletions angular/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,28 +1,28 @@
{
"name": "angular-starter",
"private": true,
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build"
},
"dependencies": {
"@angular/animations": "^19.0.6",
"@angular/common": "^19.0.6",
"@angular/compiler": "^19.0.6",
"@angular/core": "^19.0.6",
"@angular/forms": "^19.0.6",
"@angular/platform-browser": "^19.0.6",
"@angular/router": "^19.0.6",
"rxjs": "^7.8.1",
"tslib": "^2.5.0",
"zone.js": "~0.15.0",
"@shotstack/shotstack-studio": "2.0.0-rc.6"
},
"devDependencies": {
"@angular/build": "^19.0.7",
"@angular/cli": "^19.0.7",
"@angular/compiler-cli": "^19.0.6",
"typescript": "^5.6.3"
}
"name": "angular-starter",
"private": true,
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build"
},
"dependencies": {
"@angular/animations": "^19.0.6",
"@angular/common": "^19.0.6",
"@angular/compiler": "^19.0.6",
"@angular/core": "^19.0.6",
"@angular/forms": "^19.0.6",
"@angular/platform-browser": "^19.0.6",
"@angular/router": "^19.0.6",
"@shotstack/shotstack-studio": "^2.4.3",
"rxjs": "^7.8.1",
"tslib": "^2.5.0",
"zone.js": "~0.15.0"
},
"devDependencies": {
"@angular/build": "^19.0.7",
"@angular/cli": "^19.0.7",
"@angular/compiler-cli": "^19.0.6",
"typescript": "^5.6.3"
}
}
71 changes: 11 additions & 60 deletions angular/src/app/app.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,13 @@
import { Component, AfterViewInit } from "@angular/core";
import { Edit, Canvas, Controls, Timeline, UIController } from "@shotstack/shotstack-studio";
import { Component, AfterViewInit, ViewChild, ElementRef } from "@angular/core";
import { Edit, Canvas, Controls, Timeline } from "@shotstack/shotstack-studio";

@Component({
selector: "app-root",
template: `
<div data-shotstack-studio class="c-shotstack-studio"></div>
<div data-shotstack-timeline class="c-shotstack-timeline"></div>
<div class="app">
<div data-shotstack-studio #canvasContainer class="canvas-container"></div>
<div data-shotstack-timeline #timelineContainer class="timeline-container"></div>
</div>
`,
styles: [
`
Expand All @@ -25,6 +27,9 @@ import { Edit, Canvas, Controls, Timeline, UIController } from "@shotstack/shots
]
})
export class App implements AfterViewInit {
@ViewChild("canvasContainer") canvasContainerRef!: ElementRef;
@ViewChild("timelineContainer") timelineContainerRef!: ElementRef;

private readonly TEMPLATE_URL = "https://shotstack-assets.s3.amazonaws.com/templates/sales-event-promotion/template.json";

ngAfterViewInit(): void {
Expand All @@ -40,66 +45,12 @@ export class App implements AfterViewInit {
const template = await response.json();

const edit = new Edit(template);

const canvas = new Canvas(edit);
const ui = UIController.create(edit, canvas);

await canvas.load();
await edit.load();

ui.registerButton({
id: "text",
icon: `<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3H13"/><path d="M8 3V13"/><path d="M5 13H11"/></svg>`,
tooltip: "Add Text"
});

ui.registerButton({
id: "shape",
icon: `<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="12" height="12" rx="1.5"/></svg>`,
tooltip: "Add Shape"
});

ui.on("button:text", ({ position }: { position: number }) => {
edit.addTrack(0, {
clips: [
{
asset: {
type: "rich-text",
text: "Title",
font: { family: "Work Sans", size: 72, weight: 600, color: "#ffffff", opacity: 1 },
align: { horizontal: "center", vertical: "middle" }
},
start: position,
length: 5,
width: 500,
height: 200
}
]
});
});

ui.on("button:shape", ({ position }: { position: number }) => {
edit.addTrack(0, {
clips: [
{
asset: {
type: "svg",
src: '<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><rect x="0" y="0" width="100" height="100" rx="10" ry="10" fill="#00FFFF"/></svg>',
opacity: 1
},
start: position,
length: 10,
width: 100,
height: 100
}
]
});
});

const timelineContainer = document.querySelector<HTMLElement>("[data-shotstack-timeline]");
if (!timelineContainer) {
throw new Error("Timeline container not found");
}
const timeline = new Timeline(edit, timelineContainer);
const timeline = new Timeline(edit, this.timelineContainerRef.nativeElement);
await timeline.load();

const controls = new Controls(edit);
Expand Down
84 changes: 0 additions & 84 deletions angular/src/template.json
View file
Open in desktop

This file was deleted.

61 changes: 4 additions & 57 deletions nextjs/app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
"use client";
import { useEffect } from "react";
import React, { useEffect } from "react";

const TEMPLATE_URL = "https://shotstack-assets.s3.amazonaws.com/templates/sales-event-promotion/template.json";

export default function Home() {
useEffect(() => {
const initShotstack = async () => {
try {
const { Edit, Canvas, Controls, Timeline, UIController } = await import("@shotstack/shotstack-studio");
const { Edit, Canvas, Controls, Timeline } = await import("@shotstack/shotstack-studio");

const response = await fetch(TEMPLATE_URL);
if (!response.ok) {
Expand All @@ -16,61 +16,12 @@ export default function Home() {
const template = await response.json();

const edit = new Edit(template);

const canvas = new Canvas(edit);
const ui = UIController.create(edit, canvas);

await canvas.load();
await edit.load();

ui.registerButton({
id: "text",
icon: `<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3H13"/><path d="M8 3V13"/><path d="M5 13H11"/></svg>`,
tooltip: "Add Text"
});

ui.registerButton({
id: "shape",
icon: `<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="12" height="12" rx="1.5"/></svg>`,
tooltip: "Add Shape"
});

ui.on("button:text", ({ position }: { position: number }) => {
edit.addTrack(0, {
clips: [{
asset: {
type: "rich-text",
text: "Title",
font: { family: "Work Sans", size: 72, weight: 600, color: "#ffffff", opacity: 1 },
align: { horizontal: "center", vertical: "middle" }
},
start: position,
length: 5,
width: 500,
height: 200
}]
});
});

ui.on("button:shape", ({ position }: { position: number }) => {
edit.addTrack(0, {
clips: [{
asset: {
type: "svg",
src: '<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><rect x="0" y="0" width="100" height="100" rx="10" ry="10" fill="#00FFFF"/></svg>',
opacity: 1
},
start: position,
length: 10,
width: 100,
height: 100
}]
});
});

const timelineContainer = document.querySelector<HTMLElement>("[data-shotstack-timeline]");
if (!timelineContainer) {
throw new Error("Timeline container not found");
}
const timelineContainer = document.querySelector("[data-shotstack-timeline]") as HTMLElement;
const timeline = new Timeline(edit, timelineContainer);
await timeline.load();

Expand All @@ -81,10 +32,6 @@ export default function Home() {
console.log("Clip selected:", data);
});

edit.events.on("clip:updated", (data: unknown) => {
console.log("Clip updated:", data);
});

edit.play();

console.log("Demo loaded! Keyboard controls:");
Expand Down
3 changes: 2 additions & 1 deletion nextjs/next-env.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
/// <reference types="next" />
/// <reference types="next/image-types/global" />
/// <reference path="./.next/types/routes.d.ts" />

// NOTE: This file should not be edited
// see https://nextjs.org/docs/basic-features/typescript for more information.
// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
Loading