@revideo/create 0.5.8-alpha.1083 → 0.5.8-beta.1082

package/examples/rive-explanation-video/package.json

@@ -1,25 +0,0 @@
-{
-  "name": "rive-explanation-docs",
-  "private": true,
-  "version": "0.0.0",
-  "scripts": {
-    "start": "vite",
-    "serve": "vite",
-    "build": "tsc && vite build",
-    "render": "tsc && node dist/render.js"
-  },
-  "dependencies": {
-    "@lezer/javascript": "^1.4.17",
-    "@revideo/2d": "^0.5.2",
-    "@revideo/core": "^0.5.2",
-    "@revideo/ffmpeg": "^0.5.2",
-    "@revideo/renderer": "^0.5.2",
-    "@revideo/vite-plugin": "^0.5.2"
-  },
-  "devDependencies": {
-    "@revideo/cli": "^0.5.2",
-    "@revideo/ui": "^0.5.2",
-    "typescript": "^5.2.2",
-    "vite": "^4.5"
-  }
-}

package/examples/rive-explanation-video/src/global.css

@@ -1 +0,0 @@
-@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap');

package/examples/rive-explanation-video/src/project.meta

@@ -1,31 +0,0 @@
-{
-  "version": 0,
-  "shared": {
-    "background": "rgb(255,255,255)",
-    "range": [
-      0,
-      null
-    ],
-    "size": {
-      "x": 1920,
-      "y": 1080
-    },
-    "audioOffset": 0
-  },
-  "preview": {
-    "fps": 30,
-    "resolutionScale": 1
-  },
-  "rendering": {
-    "fps": 30,
-    "resolutionScale": 1,
-    "colorSpace": "srgb",
-    "exporter": {
-      "name": "@revideo/core/wasm",
-      "options": {
-        "fastStart": true,
-        "includeAudio": true
-      }
-    }
-  }
-}

package/examples/rive-explanation-video/src/project.ts

@@ -1,8 +0,0 @@
-import {makeProject} from '@revideo/core';
-import example from './scenes/example?scene';
-
-import './global.css'
-
-export default makeProject({
-  scenes: [example],
-});

package/examples/rive-explanation-video/src/render.ts

@@ -1,15 +0,0 @@
-import {renderVideo} from '@revideo/renderer';
-
-async function render() {
-  console.log('Rendering video...');
-
-  // This is the main function that renders the video
-  const file = await renderVideo({
-    projectFile: './src/project.ts',
-    settings: {logProgress: true},
-  });
-
-  console.log(`Rendered video to ${file}`);
-}
-
-render();

package/examples/rive-explanation-video/src/revideo.d.ts

@@ -1 +0,0 @@
-/// <reference types="@revideo/core/project" />

package/examples/rive-explanation-video/src/scenes/example.meta

@@ -1,5 +0,0 @@
-{
-  "version": 0,
-  "timeEvents": [],
-  "seed": 4079423384
-}

package/examples/rive-explanation-video/src/scenes/example.tsx

@@ -1,218 +0,0 @@
-import { waitFor, createRef, all, Reference, chain } from '@revideo/core';
-import {
-  Img, 
-  makeScene2D,
-  Rive,
-  Txt,
-  Layout,
-  LezerHighlighter, Code, word, lines, Rect,
-  View2D
-} from '@revideo/2d';
-import {parser} from '@lezer/javascript';
-import {tags} from '@lezer/highlight';
-import {HighlightStyle} from '@codemirror/language';
-
-const MyStyle = HighlightStyle.define([
-    {
-      tag: tags.comment,
-      color: '#8E908C',
-    },
-    {
-      tag: [tags.variableName, tags.self, tags.propertyName, tags.attributeName, tags.regexp],
-      color: '#C82829',
-    },
-    {
-      tag: [tags.number, tags.bool, tags.null],
-      color: '#F5871F',
-    },
-    {
-      tag: [tags.className, tags.typeName, tags.definition(tags.typeName)],
-      color: '#C99E00',
-    },
-    {
-      tag: [tags.string, tags.special(tags.brace)],
-      color: '#718C00',
-    },
-    {
-      tag: tags.operator,
-      color: '#3E999F',
-    },
-    {
-      tag: [tags.definition(tags.propertyName), tags.function(tags.variableName)],
-      color: '#4271AE',
-    },
-    {
-      tag: tags.keyword,
-      color: '#8959A8',
-    },
-    {
-      tag: tags.derefOperator,
-      color: '#4D4D4C',
-    },
-    {
-      tag: tags.bracket,
-      color: "grey"
-    },
-    {
-      tag: tags.separator,
-      color: "grey"
-    },
-    {
-      tag: tags.punctuation,
-      color: "grey"
-    },
-    {
-      tag: tags.typeOperator,
-      color: "grey"
-    }
-  ]);
-
-Code.defaultHighlighter = new LezerHighlighter(
-  parser.configure({
-    dialect: 'jsx ts',
-  }),
-  MyStyle
-);
-  
-
-export default makeScene2D(function* (view) {
-
-    const textRef = createRef<Txt>();
-    view.add(
-      <Txt fontFamily={"Lexend"} fontSize={100} fontWeight={600} ref={textRef}/>
-    );
-  
-    yield* all(textRef().text("Rive Animations in Revideo", 1.25))
-    yield* all(
-        textRef().scale(0.75, 0.75),
-        textRef().position.y(-400, 0.75)
-    )
-    yield* waitFor(0.25);
-
-    const codeRef= createRef<Code>();
-    const videoBoxRef = createRef<Layout>();
-    view.add(<Layout opacity={0} position={[550, 100]} size={[600, 600]} ref={videoBoxRef} />);
-    view.add(
-      <Code
-      ref={codeRef}
-      textAlign={"left"}
-      fontSize={35}
-      x={-400}
-      y={100}
-      opacity={0}
-      fontFamily={'JetBrains Mono, monospace'}
-      code={
-  `export default makeScene2D(function* (view){
-    yield view.add(
-        <Img 
-          src={"/sf.png"} 
-          size={["100%", "100%"]} 
-        />
-    );
-
-});
-  `
-  }/>);
-
-  videoBoxRef().add(
-    <Img 
-      src={"https://revideo-example-assets.s3.amazonaws.com/sf.png"} 
-      size={[videoBoxRef().width(), videoBoxRef().height()]} 
-    />
-  );
-
-  yield* all(
-    codeRef().opacity(1, 0.75),
-    videoBoxRef().opacity(1, 0.75)
-  );
-  yield* waitFor(0.5);
-
-  const riveRef = createRef<Rive>();
-  videoBoxRef().add(
-      <Rive
-        src={"https://revideo-example-assets.s3.amazonaws.com/emoji.riv"}
-        animationId={1}
-        size={[600, 600]} 
-        opacity={0}
-        ref={riveRef}
-      />
-  );
-  yield* all(codeRef().code.insert([8, 0],
-    `\n   yield view.add(
-        <Rive
-          src={"/emoji.riv"}
-          animationId={1}
-          size={[600, 600]} 
-        />
-    );\n`, 1),
-    riveRef().opacity(1, 1)
-  );
-
-  yield* waitFor(1);
-
-  yield* codeRef().selection(lines(11, 13), 1),
-  yield replaceRive(videoBoxRef, riveRef)
-  yield* all(
-    codeRef().code.replace(word(11, 17, 5), "dog", 2),
-    codeRef().code.replace(word(13, 17, 3), "900", 2),
-  );
-
-  yield* codeRef().selection(lines(0, 17), 1);
-
-  yield* waitFor(1);
-  yield* all(
-    codeRef().opacity(0, 1),
-    videoBoxRef().opacity(0, 1),
-    textRef().opacity(0, 1)
-  );
-
-  yield* waitFor(0.5);
-  yield* logoAnimation(view);
-});
-
-function* replaceRive(box: Reference<Layout>, rive: Reference<Rive>){
-  yield* rive().opacity(0, 1);
-  rive().remove();
-
-  const riveRef = createRef<Rive>();
-  box().add(
-      <Rive
-        src={"https://revideo-example-assets.s3.amazonaws.com/dog.riv"}
-        size={[1000, 600]} 
-        opacity={0}
-        animationId={1}
-        ref={riveRef}
-      />
-  );
-
-  yield* riveRef().opacity(1, 1);
-  yield* waitFor(5);
-}
-
-function* logoAnimation(view: View2D){
-  const block1 = createRef<Rect>()
-  const block2 = createRef<Rect>()
-  const block3 = createRef<Rect>()
-  const blocks = createRef<Layout>();
-  const logoText = createRef<Txt>();
-  view.add(
-    <>
-    <Layout ref={blocks} x={-600}>
-      <Rect fill={"#151515"} height={60} y={-80} x={-620} width={180} radius={9.3} ref={block1} />
-      <Rect fill={"#151515"} height={60} width={180} x={-540} radius={9.3} ref={block2} />
-      <Rect fill={"#151515"} height={60} width={180} x={-460} y={80} radius={9.3} ref={block3} />
-      <Txt ref={logoText} fontFamily={"Lexend"} x={53+757.5} y={20} fontSize={300} letterSpacing={-4} fontWeight={700} text={""}/>
-    </Layout>
-    </>
-  );
-  
-  yield* all(
-    block1().position.x(-80, 0.5),
-    chain(waitFor(0.1), block2().position.x(0, 0.4)),
-    chain(waitFor(0.2), block3().position.x(80, 0.3)),
-  )
-
-  yield* logoText().text("revideo", 1);
-
-  yield* waitFor(1);
-}

package/examples/rive-explanation-video/tsconfig.json

@@ -1,9 +0,0 @@
-{
-  "extends": "@revideo/2d/tsconfig.project.json",
-  "include": ["src"],
-  "compilerOptions": {
-    "noEmit": false,
-    "outDir": "dist",
-    "module": "CommonJS"
-  }
-}

package/examples/rive-explanation-video/vite.config.ts

@@ -1,8 +0,0 @@
-import {defineConfig} from 'vite';
-import motionCanvas from '@revideo/vite-plugin';
-
-export default defineConfig({
-  plugins: [
-    motionCanvas(),
-  ],
-});

package/examples/saas-template/.prettierrc

@@ -1,9 +0,0 @@
-{
-	"useTabs": true,
-	"semi": true,
-	"singleQuote": true,
-	"quoteProps": "as-needed",
-	"trailingComma": "all",
-	"bracketSpacing": false,
-	"printWidth": 100
-}

package/examples/saas-template/README.md

@@ -1,28 +0,0 @@
-# Revideo Next.js Template
-
-This is the [Revideo](https://github.com/redotvideo/revideo) NextJS starter
-project bootstrapped with `npm init @revideo@latest`.
-
-## Getting Started
-
-First, install the dependencies both in the next/ and the revideo/ directories:
-
-```bash
-(cd next && npm install) &&
-(cd revideo && npm install)
-```
-
-Then, serve the Revideo project using the CLI:
-
-```bash
-(cd revideo && npx revideo serve)
-```
-
-Now you can start your NextJS app using the following command:
-
-```bash
-(cd next && npm run dev)
-```
-
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the
-result. Happy developing!

package/examples/saas-template/next/app/actions.tsx

@@ -1,113 +0,0 @@
-'use server';
-
-import pLimit from 'p-limit';
-
-const PER_PAGE = 30;
-
-interface ReturnType {
-	stargazerTimes: number[];
-	status: 'success' | 'rate-limit' | 'error';
-}
-
-async function getStargazerTimesForPage(
-	repo: `${string}/${string}`,
-	page: number,
-	headers: HeadersInit,
-): Promise<ReturnType> {
-	const response = await fetch(
-		`https://api.github.com/repos/${repo}/stargazers?page=${page}&per_page=${PER_PAGE}`,
-		{
-			headers: {
-				Accept: 'application/vnd.github.v3.star+json',
-				...headers,
-			},
-		},
-	);
-
-	if (response.status === 403) {
-		return {stargazerTimes: [], status: 'rate-limit'};
-	}
-
-	if (!response.ok) {
-		return {stargazerTimes: [], status: 'error'};
-	}
-
-	const data = await response.json();
-	const dates: Date[] = data.map((stargazer: any) => new Date(stargazer.starred_at));
-	const msTimes = dates.map((date) => date.getTime());
-
-	return {
-		stargazerTimes: msTimes,
-		status: 'success',
-	};
-}
-
-const limit = pLimit(10);
-
-async function getTimes(
-	repo: `${string}/${string}`,
-	totalPages: number,
-	headers: HeadersInit,
-): Promise<ReturnType> {
-	const stargazerPromises: Promise<ReturnType>[] = [];
-
-	// Fetch all pages in parallel
-	for (let page = 1; page <= totalPages; page++) {
-		stargazerPromises.push(limit(() => getStargazerTimesForPage(repo, page, headers)));
-	}
-
-	const stargazerTimes = await Promise.all(stargazerPromises);
-
-	// In case of failure, return the first error
-	const objectsThatFailed = stargazerTimes.filter(({status}) => status !== 'success');
-	if (stargazerTimes.some(({status}) => status !== 'success')) {
-		return {
-			stargazerTimes: [],
-			status: objectsThatFailed[0].status,
-		};
-	}
-
-	const stargazerMs = stargazerTimes.map(({stargazerTimes}) => stargazerTimes).flat();
-	const sortedMs = stargazerMs.sort((a, b) => a - b);
-
-	const firstMs = sortedMs[0];
-	const relativeMs = sortedMs.map((ms) => ms - firstMs);
-
-	return {
-		stargazerTimes: relativeMs,
-		status: 'success',
-	};
-}
-
-export async function getGithubRepositoryInfo(
-	repoName: `${string}/${string}`,
-	key?: string,
-): Promise<ReturnType & {repoImage: string}> {
-	const headers: HeadersInit = {};
-
-	if (key) {
-		headers.Authorization = `token ${key}`;
-	}
-
-	const response = await fetch(`https://api.github.com/repos/${repoName}`, {
-		headers,
-	});
-
-	if (response.status === 403) {
-		return {stargazerTimes: [], repoImage: '', status: 'rate-limit'};
-	}
-
-	if (!response.ok) {
-		return {stargazerTimes: [], repoImage: '', status: 'error'};
-	}
-
-	const responseParsed = await response.json();
-	const pages = Math.ceil(responseParsed.stargazers_count / PER_PAGE);
-	const info = await getTimes(repoName, pages, headers);
-
-	return {
-		stargazerTimes: info.stargazerTimes,
-		repoImage: responseParsed.owner.avatar_url,
-		status: info.status,
-	};
-}

package/examples/saas-template/next/app/api/render/route.ts

@@ -1,22 +0,0 @@
-const RENDER_URL = 'http://localhost:4000/render';
-
-async function getResponse(body: string) {
-	return await fetch(RENDER_URL, {
-		method: 'POST',
-		headers: {
-			'Content-Type': 'application/json',
-		},
-		body,
-	});
-}
-
-export async function POST(request: Request) {
-	const body = await request.json();
-
-	const response = await getResponse(JSON.stringify(body));
-	if (!response.ok) {
-		return new Response('Failed to render', {status: 500});
-	}
-
-	return new Response(response.body, {status: 200});
-}

package/examples/saas-template/next/app/globals.css

@@ -1,3 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;

package/examples/saas-template/next/app/layout.tsx

@@ -1,25 +0,0 @@
-import type {Metadata} from 'next';
-import {Inter} from 'next/font/google';
-import './globals.css';
-
-const inter = Inter({subsets: ['latin']});
-
-export const metadata: Metadata = {
-	title: 'Create Next App',
-	description: 'Generated by create next app',
-};
-
-export default function RootLayout({
-	children,
-}: Readonly<{
-	children: React.ReactNode;
-}>) {
-	return (
-		<html lang="en">
-			<head>
-				<link rel="stylesheet" href="http://localhost:4000/player/project.css" />
-			</head>
-			<body className={inter.className}>{children}</body>
-		</html>
-	);
-}