Skip to content

Commit 1326a78

Browse files
JonnyBurgerJonnyBurger
committed
upgrade everything
1 parent 0d81d99 commit 1326a78

File tree

21 files changed

+437
-447
lines changed

21 files changed

+437
-447
lines changed

‎.eslintrc

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
{
2-
"extends": "@remotion"
2+
"extends": "@remotion",
33
}

‎.github/workflows/render-video.yml

Lines changed: 34 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,38 @@
11
name: Render video
22
on:
3-
workflow_dispatch:
4-
inputs:
5-
titleText:
6-
description: "Which text should it say?"
7-
required: true
8-
default: "Welcome to Remotion"
9-
titleColor:
10-
description: "Which color should it be in?"
11-
required: true
12-
default: "black"
3+
workflow_dispatch:
4+
inputs:
5+
titleText:
6+
description: "Which text should it say?"
7+
required: true
8+
default: "Welcome to Remotion"
9+
titleColor:
10+
description: "Which color should it be in?"
11+
required: true
12+
default: "black"
1313
jobs:
14-
render:
15-
name: Render video
16-
runs-on: ubuntu-latest
17-
steps:
18-
- uses: actions/checkout@main
19-
- uses: actions/setup-node@main
20-
- run: sudo apt update
14+
render:
15+
name: Render video
16+
runs-on: ubuntu-latest
17+
steps:
18+
- uses: actions/checkout@main
19+
- uses: actions/setup-node@main
20+
- run: sudo apt update
2121

22-
- run: sudo apt install ffmpeg
23-
- run: npm i
24-
- run: echo $WORKFLOW_INPUT > input-props.json
25-
env:
26-
WORKFLOW_INPUT: ${{ toJson(github.event.inputs) }}
27-
- run: npm run build -- --props="./input-props.json"
28-
env:
29-
AZURE_TTS_KEY: ${{secrets.AZURE_TTS_KEY}}
30-
AZURE_TTS_REGION: ${{secrets.AZURE_TTS_REGION}}
31-
AWS_S3_BUCKET_NAME: ${{secrets.AWS_S3_BUCKET_NAME}}
32-
AWS_S3_REGION: ${{secrets.AWS_S3_REGION}}
33-
AWS_ACCESS_KEY_ID: ${{secrets.AWS_ACCESS_KEY_ID}}
34-
AWS_SECRET_ACCESS_KEY: ${{secrets.AWS_SECRET_ACCESS_KEY}}
35-
- uses: actions/upload-artifact@v2
36-
with:
37-
name: out.mp4
38-
path: out/video.mp4
22+
- run: sudo apt install ffmpeg
23+
- run: npm i
24+
- run: echo $WORKFLOW_INPUT > input-props.json
25+
env:
26+
WORKFLOW_INPUT: ${{ toJson(github.event.inputs) }}
27+
- run: npm run build -- --props="./input-props.json"
28+
env:
29+
AZURE_TTS_KEY: ${{secrets.AZURE_TTS_KEY}}
30+
AZURE_TTS_REGION: ${{secrets.AZURE_TTS_REGION}}
31+
AWS_S3_BUCKET_NAME: ${{secrets.AWS_S3_BUCKET_NAME}}
32+
AWS_S3_REGION: ${{secrets.AWS_S3_REGION}}
33+
AWS_ACCESS_KEY_ID: ${{secrets.AWS_ACCESS_KEY_ID}}
34+
AWS_SECRET_ACCESS_KEY: ${{secrets.AWS_SECRET_ACCESS_KEY}}
35+
- uses: actions/upload-artifact@v2
36+
with:
37+
name: out.mp4
38+
path: out/video.mp4

‎.prettierrc

Lines changed: 0 additions & 14 deletions
This file was deleted.

‎.vscode/settings.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"editor.tabSize": 2,
3-
"typescript.tsdk": "node_modules/typescript/lib",
4-
"typescript.enablePromptUseWorkspaceTsdk": true
2+
"editor.tabSize": 2,
3+
"typescript.tsdk": "node_modules/typescript/lib",
4+
"typescript.enablePromptUseWorkspaceTsdk": true
55
}

‎package.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,9 @@
1616
"@types/node": "^18.15.11",
1717
"@types/react": "^18.0.26",
1818
"eslint": "^8.43.0",
19-
"prettier": "^2.8.8",
19+
"prettier": "^3.2.5",
2020
"ts-node": "^10.9.1",
21-
"typescript": "^4.9.4"
21+
"typescript": "^5.4.5"
2222
},
2323
"dependencies": {
2424
"@google-cloud/text-to-speech": "^4.2.1",
@@ -37,6 +37,6 @@
3737
"react": "^18.0.0",
3838
"react-dom": "^18.0.0",
3939
"remotion": "^4.0.0",
40-
"zod": "^3.21.4"
40+
"zod": "3.22.3"
4141
}
4242
}

‎remotion.config.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
* All configuration options: https://remotion.dev/docs/config
66
*/
77

8-
import {Config} from '@remotion/cli/config';
8+
import { Config } from "@remotion/cli/config";
99

10-
Config.setVideoImageFormat('jpeg');
10+
Config.setVideoImageFormat("jpeg");
1111
Config.setOverwriteOutput(true);

‎src/HelloWorld.tsx

Lines changed: 41 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,50 @@
11
import {
2-
AbsoluteFill,
3-
interpolate,
4-
Sequence,
5-
useCurrentFrame,
6-
useVideoConfig,
7-
} from 'remotion';
8-
import {Text} from './HelloWorld/Title';
9-
import {voices} from './server/TextToSpeech/constants';
10-
import {RequestMetadata, VoiceType} from './lib/interfaces';
11-
import {z} from 'zod';
12-
import {zColor} from '@remotion/zod-types';
2+
AbsoluteFill,
3+
interpolate,
4+
Sequence,
5+
useCurrentFrame,
6+
useVideoConfig,
7+
} from "remotion";
8+
import { Text } from "./HelloWorld/Title";
9+
import { voices } from "./server/TextToSpeech/constants";
10+
import { RequestMetadata, VoiceType } from "./lib/interfaces";
11+
import { z } from "zod";
12+
import { zColor } from "@remotion/zod-types";
1313

1414
export const mySchema = z.object({
15-
titleText: z.string(),
16-
subtitleText: z.string(),
17-
titleColor: zColor(),
18-
voice: z.enum(
19-
Object.keys(voices) as [VoiceType] | [VoiceType, ...VoiceType[]]
20-
),
21-
pitch: z.number().min(-20).max(20),
22-
speakingRate: z.number().min(0.25).max(4),
23-
audioUrl: z.string().or(z.null()),
15+
titleText: z.string(),
16+
subtitleText: z.string(),
17+
titleColor: zColor(),
18+
voice: z.enum(
19+
Object.keys(voices) as [VoiceType] | [VoiceType, ...VoiceType[]],
20+
),
21+
pitch: z.number().min(-20).max(20),
22+
speakingRate: z.number().min(0.25).max(4),
23+
audioUrl: z.string().or(z.null()),
2424
});
2525

2626
export const HelloWorld: React.FC<RequestMetadata> = (props) => {
27-
const frame = useCurrentFrame();
28-
const videoConfig = useVideoConfig();
27+
const frame = useCurrentFrame();
28+
const videoConfig = useVideoConfig();
2929

30-
const opacity = interpolate(
31-
frame,
32-
[videoConfig.durationInFrames - 25, videoConfig.durationInFrames - 15],
33-
[1, 0],
34-
{
35-
extrapolateLeft: 'clamp',
36-
extrapolateRight: 'clamp',
37-
}
38-
);
39-
const transitionStart = 25;
30+
const opacity = interpolate(
31+
frame,
32+
[videoConfig.durationInFrames - 25, videoConfig.durationInFrames - 15],
33+
[1, 0],
34+
{
35+
extrapolateLeft: "clamp",
36+
extrapolateRight: "clamp",
37+
},
38+
);
39+
const transitionStart = 25;
4040

41-
return (
42-
<AbsoluteFill style={{flex: 1, backgroundColor: 'white'}}>
43-
<div style={{opacity}}>
44-
<Sequence from={transitionStart + 10}>
45-
<Text {...props} />
46-
</Sequence>
47-
</div>
48-
</AbsoluteFill>
49-
);
41+
return (
42+
<AbsoluteFill style={{ flex: 1, backgroundColor: "white" }}>
43+
<div style={{ opacity }}>
44+
<Sequence from={transitionStart + 10}>
45+
<Text {...props} />
46+
</Sequence>
47+
</div>
48+
</AbsoluteFill>
49+
);
5050
};

‎src/HelloWorld/Title.tsx

Lines changed: 78 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -1,84 +1,84 @@
1-
import {interpolate} from 'remotion';
2-
import {Audio, spring, useCurrentFrame, useVideoConfig} from 'remotion';
3-
import {RequestMetadata} from '../lib/interfaces';
1+
import { interpolate } from "remotion";
2+
import { Audio, spring, useCurrentFrame, useVideoConfig } from "remotion";
3+
import { RequestMetadata } from "../lib/interfaces";
44

55
export const Text: React.FC<RequestMetadata> = (props) => {
6-
const {titleText, titleColor, subtitleText} = props;
7-
const videoConfig = useVideoConfig();
8-
const realFrame = useCurrentFrame();
9-
const frameAdjustedForSpeakingRate = realFrame * props.speakingRate;
10-
const titleTextForAnimation = titleText.split(' ').map((t) => ` ${t} `);
6+
const { titleText, titleColor, subtitleText } = props;
7+
const videoConfig = useVideoConfig();
8+
const realFrame = useCurrentFrame();
9+
const frameAdjustedForSpeakingRate = realFrame * props.speakingRate;
10+
const titleTextForAnimation = titleText.split(" ").map((t) => ` ${t} `);
1111

12-
return (
13-
<>
14-
{props.audioUrl && (
15-
<Audio id="TTS Audio" about="TTS Audio" src={props.audioUrl} />
16-
)}
12+
return (
13+
<>
14+
{props.audioUrl && (
15+
<Audio id="TTS Audio" about="TTS Audio" src={props.audioUrl} />
16+
)}
1717

18-
<h1
19-
style={{
20-
fontFamily: 'SF Pro Text, Helvetica, Arial',
21-
fontWeight: 'bold',
22-
fontSize: 110,
23-
textAlign: 'center',
24-
position: 'absolute',
25-
top: 160,
26-
width: '100%',
27-
}}
28-
>
29-
{titleTextForAnimation.map((t, i) => {
30-
return (
31-
<span
32-
key={t}
33-
style={{
34-
color: titleColor,
35-
marginLeft: 10,
36-
marginRight: 10,
37-
transform: `scale(${spring({
38-
fps: videoConfig.fps,
39-
frame: frameAdjustedForSpeakingRate - i * 5,
40-
config: {
41-
damping: 100,
42-
stiffness: 200,
43-
mass: 0.5,
44-
},
45-
})})`,
46-
display: 'inline-block',
47-
}}
48-
>
49-
{t}
50-
</span>
51-
);
52-
})}
53-
</h1>
18+
<h1
19+
style={{
20+
fontFamily: "SF Pro Text, Helvetica, Arial",
21+
fontWeight: "bold",
22+
fontSize: 110,
23+
textAlign: "center",
24+
position: "absolute",
25+
top: 160,
26+
width: "100%",
27+
}}
28+
>
29+
{titleTextForAnimation.map((t, i) => {
30+
return (
31+
<span
32+
key={t}
33+
style={{
34+
color: titleColor,
35+
marginLeft: 10,
36+
marginRight: 10,
37+
transform: `scale(${spring({
38+
fps: videoConfig.fps,
39+
frame: frameAdjustedForSpeakingRate - i * 5,
40+
config: {
41+
damping: 100,
42+
stiffness: 200,
43+
mass: 0.5,
44+
},
45+
})})`,
46+
display: "inline-block",
47+
}}
48+
>
49+
{t}
50+
</span>
51+
);
52+
})}
53+
</h1>
5454

55-
<h2
56-
style={{
57-
opacity: interpolate(
58-
frameAdjustedForSpeakingRate,
59-
[95, 100],
60-
[0.1, 1]
61-
),
62-
transform: `scale(${interpolate(
63-
frameAdjustedForSpeakingRate,
64-
[95, 100],
65-
[0.9, 1],
66-
{
67-
extrapolateRight: 'clamp',
68-
}
69-
)})`,
70-
fontFamily: 'SF Pro Text, Helvetica, Arial',
71-
fontWeight: 'bold',
72-
fontSize: 70,
73-
textAlign: 'center',
74-
position: 'absolute',
75-
bottom: 160,
76-
width: '100%',
77-
color: titleColor,
78-
}}
79-
>
80-
{subtitleText}
81-
</h2>
82-
</>
83-
);
55+
<h2
56+
style={{
57+
opacity: interpolate(
58+
frameAdjustedForSpeakingRate,
59+
[95, 100],
60+
[0.1, 1],
61+
),
62+
transform: `scale(${interpolate(
63+
frameAdjustedForSpeakingRate,
64+
[95, 100],
65+
[0.9, 1],
66+
{
67+
extrapolateRight: "clamp",
68+
},
69+
)})`,
70+
fontFamily: "SF Pro Text, Helvetica, Arial",
71+
fontWeight: "bold",
72+
fontSize: 70,
73+
textAlign: "center",
74+
position: "absolute",
75+
bottom: 160,
76+
width: "100%",
77+
color: titleColor,
78+
}}
79+
>
80+
{subtitleText}
81+
</h2>
82+
</>
83+
);
8484
};

0 commit comments

Comments
 (0)