Skip to content

Commit 8e86359

Browse files
JonnyBurgerJonnyBurger
committed
upgrade deps + use prettier defaults
1 parent a3a8305 commit 8e86359

File tree

10 files changed

+292
-307
lines changed

10 files changed

+292
-307
lines changed

‎.github/workflows/render-video.yml

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
name: Render video
2-
on:
3-
push
2+
on: push
43
jobs:
54
render:
65
name: Render video

‎.prettierrc

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

‎package.json

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -20,15 +20,15 @@
2020
"react-dom": "^18.0.0",
2121
"remotion": "^4.0.0",
2222
"three": "^0.145.0",
23-
"zod": "^3.21.4"
23+
"zod": "3.22.3"
2424
},
2525
"devDependencies": {
2626
"@remotion/eslint-config": "^4.0.0",
2727
"@types/react": "^18.0.26",
2828
"@types/three": "^0.144.0",
29-
"@types/web": "^0.0.75",
29+
"@types/web": "^0.0.143",
3030
"eslint": "^8.43.0",
31-
"prettier": "^2.8.8",
32-
"typescript": "^4.9.4"
31+
"prettier": "^3.2.5",
32+
"typescript": "^5.4.5"
3333
}
3434
}

‎src/Phone.tsx

Lines changed: 103 additions & 103 deletions
Original file line numberDiff line numberDiff line change
@@ -1,117 +1,117 @@
1-
import {useThree} from '@react-three/fiber';
2-
import React, {useEffect, useMemo} from 'react';
3-
import {interpolate, spring, useCurrentFrame, useVideoConfig} from 'remotion';
4-
import {VideoTexture} from 'three';
1+
import { useThree } from "@react-three/fiber";
2+
import React, { useEffect, useMemo } from "react";
3+
import { interpolate, spring, useCurrentFrame, useVideoConfig } from "remotion";
4+
import { VideoTexture } from "three";
55
import {
6-
CAMERA_DISTANCE,
7-
getPhoneLayout,
8-
PHONE_CURVE_SEGMENTS,
9-
PHONE_SHININESS,
10-
} from './helpers/layout';
11-
import {roundedRect} from './helpers/rounded-rectangle';
12-
import {RoundedBox} from './RoundedBox';
6+
CAMERA_DISTANCE,
7+
getPhoneLayout,
8+
PHONE_CURVE_SEGMENTS,
9+
PHONE_SHININESS,
10+
} from "./helpers/layout";
11+
import { roundedRect } from "./helpers/rounded-rectangle";
12+
import { RoundedBox } from "./RoundedBox";
1313

1414
export const Phone: React.FC<{
15-
videoTexture: VideoTexture | null;
16-
aspectRatio: number;
17-
baseScale: number;
18-
phoneColor: string;
19-
}> = ({aspectRatio, videoTexture, baseScale, phoneColor}) => {
20-
const frame = useCurrentFrame();
21-
const {fps, durationInFrames} = useVideoConfig();
15+
videoTexture: VideoTexture | null;
16+
aspectRatio: number;
17+
baseScale: number;
18+
phoneColor: string;
19+
}> = ({ aspectRatio, videoTexture, baseScale, phoneColor }) => {
20+
const frame = useCurrentFrame();
21+
const { fps, durationInFrames } = useVideoConfig();
2222

23-
const layout = useMemo(
24-
() => getPhoneLayout(aspectRatio, baseScale),
25-
[aspectRatio, baseScale]
26-
);
23+
const layout = useMemo(
24+
() => getPhoneLayout(aspectRatio, baseScale),
25+
[aspectRatio, baseScale],
26+
);
2727

28-
// Place a camera and set the distance to the object.
29-
// Then make it look at the object.
30-
const camera = useThree((state) => state.camera);
31-
useEffect(() => {
32-
camera.position.set(0, 0, CAMERA_DISTANCE);
33-
camera.near = 0.2;
34-
camera.far = Math.max(5000, CAMERA_DISTANCE * 2);
35-
camera.lookAt(0, 0, 0);
36-
}, [camera]);
28+
// Place a camera and set the distance to the object.
29+
// Then make it look at the object.
30+
const camera = useThree((state) => state.camera);
31+
useEffect(() => {
32+
camera.position.set(0, 0, CAMERA_DISTANCE);
33+
camera.near = 0.2;
34+
camera.far = Math.max(5000, CAMERA_DISTANCE * 2);
35+
camera.lookAt(0, 0, 0);
36+
}, [camera]);
3737

38-
// Make the video fill the phone texture
39-
useEffect(() => {
40-
if (videoTexture) {
41-
videoTexture.repeat.y = 1 / layout.screen.height;
42-
videoTexture.repeat.x = 1 / layout.screen.width;
43-
}
44-
}, [aspectRatio, layout.screen.height, layout.screen.width, videoTexture]);
38+
// Make the video fill the phone texture
39+
useEffect(() => {
40+
if (videoTexture) {
41+
videoTexture.repeat.y = 1 / layout.screen.height;
42+
videoTexture.repeat.x = 1 / layout.screen.width;
43+
}
44+
}, [aspectRatio, layout.screen.height, layout.screen.width, videoTexture]);
4545

46-
// During the whole scene, the phone is rotating.
47-
// 2 * Math.PI is a full rotation.
48-
const constantRotation = interpolate(
49-
frame,
50-
[0, durationInFrames],
51-
[0, Math.PI * 6]
52-
);
46+
// During the whole scene, the phone is rotating.
47+
// 2 * Math.PI is a full rotation.
48+
const constantRotation = interpolate(
49+
frame,
50+
[0, durationInFrames],
51+
[0, Math.PI * 6],
52+
);
5353

54-
// When the composition starts, there is some extra
55-
// rotation and translation.
56-
const entranceAnimation = spring({
57-
frame,
58-
fps,
59-
config: {
60-
damping: 200,
61-
mass: 3,
62-
},
63-
});
54+
// When the composition starts, there is some extra
55+
// rotation and translation.
56+
const entranceAnimation = spring({
57+
frame,
58+
fps,
59+
config: {
60+
damping: 200,
61+
mass: 3,
62+
},
63+
});
6464

65-
// Calculate the entrance rotation,
66-
// doing one full spin
67-
const entranceRotation = interpolate(
68-
entranceAnimation,
69-
[0, 1],
70-
[-Math.PI, Math.PI]
71-
);
65+
// Calculate the entrance rotation,
66+
// doing one full spin
67+
const entranceRotation = interpolate(
68+
entranceAnimation,
69+
[0, 1],
70+
[-Math.PI, Math.PI],
71+
);
7272

73-
// Calculating the total rotation of the phone
74-
const rotateY = entranceRotation + constantRotation;
73+
// Calculating the total rotation of the phone
74+
const rotateY = entranceRotation + constantRotation;
7575

76-
// Calculating the translation of the phone at the beginning.
77-
// The start position of the phone is set to 4 "units"
78-
const translateY = interpolate(entranceAnimation, [0, 1], [-4, 0]);
76+
// Calculating the translation of the phone at the beginning.
77+
// The start position of the phone is set to 4 "units"
78+
const translateY = interpolate(entranceAnimation, [0, 1], [-4, 0]);
7979

80-
// Calculate a rounded rectangle for the phone screen
81-
const screenGeometry = useMemo(() => {
82-
return roundedRect({
83-
width: layout.screen.width,
84-
height: layout.screen.height,
85-
radius: layout.screen.radius,
86-
});
87-
}, [layout.screen.height, layout.screen.radius, layout.screen.width]);
80+
// Calculate a rounded rectangle for the phone screen
81+
const screenGeometry = useMemo(() => {
82+
return roundedRect({
83+
width: layout.screen.width,
84+
height: layout.screen.height,
85+
radius: layout.screen.radius,
86+
});
87+
}, [layout.screen.height, layout.screen.radius, layout.screen.width]);
8888

89-
return (
90-
<group
91-
scale={entranceAnimation}
92-
rotation={[0, rotateY, 0]}
93-
position={[0, translateY, 0]}
94-
>
95-
<RoundedBox
96-
radius={layout.phone.radius}
97-
depth={layout.phone.thickness}
98-
curveSegments={PHONE_CURVE_SEGMENTS}
99-
position={layout.phone.position}
100-
width={layout.phone.width}
101-
height={layout.phone.height}
102-
>
103-
<meshPhongMaterial color={phoneColor} shininess={PHONE_SHININESS} />
104-
</RoundedBox>
105-
<mesh position={layout.screen.position}>
106-
<shapeGeometry args={[screenGeometry]} />
107-
{videoTexture ? (
108-
<meshBasicMaterial
109-
color={0xffffff}
110-
toneMapped={false}
111-
map={videoTexture}
112-
/>
113-
) : null}
114-
</mesh>
115-
</group>
116-
);
89+
return (
90+
<group
91+
scale={entranceAnimation}
92+
rotation={[0, rotateY, 0]}
93+
position={[0, translateY, 0]}
94+
>
95+
<RoundedBox
96+
radius={layout.phone.radius}
97+
depth={layout.phone.thickness}
98+
curveSegments={PHONE_CURVE_SEGMENTS}
99+
position={layout.phone.position}
100+
width={layout.phone.width}
101+
height={layout.phone.height}
102+
>
103+
<meshPhongMaterial color={phoneColor} shininess={PHONE_SHININESS} />
104+
</RoundedBox>
105+
<mesh position={layout.screen.position}>
106+
<shapeGeometry args={[screenGeometry]} />
107+
{videoTexture ? (
108+
<meshBasicMaterial
109+
color={0xffffff}
110+
toneMapped={false}
111+
map={videoTexture}
112+
/>
113+
) : null}
114+
</mesh>
115+
</group>
116+
);
117117
};

‎src/Root.tsx

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import {Composition} from 'remotion';
2-
import {Scene, myCompSchema} from './Scene';
1+
import { Composition } from "remotion";
2+
import { Scene, myCompSchema } from "./Scene";
33

44
// Welcome to the Remotion Three Starter Kit!
55
// Two compositions have been created, showing how to use
@@ -17,22 +17,22 @@ import {Scene, myCompSchema} from './Scene';
1717
// https://docs.pmnd.rs/react-three-fiber/getting-started/introduction
1818

1919
export const RemotionRoot: React.FC = () => {
20-
return (
21-
<>
22-
<Composition
23-
id="Scene"
24-
component={Scene}
25-
durationInFrames={300}
26-
fps={30}
27-
width={1280}
28-
height={720}
29-
schema={myCompSchema}
30-
defaultProps={{
31-
deviceType: 'phone',
32-
phoneColor: 'rgba(110, 152, 191, 0.00)' as const,
33-
baseScale: 1,
34-
}}
35-
/>
36-
</>
37-
);
20+
return (
21+
<>
22+
<Composition
23+
id="Scene"
24+
component={Scene}
25+
durationInFrames={300}
26+
fps={30}
27+
width={1280}
28+
height={720}
29+
schema={myCompSchema}
30+
defaultProps={{
31+
deviceType: "phone",
32+
phoneColor: "rgba(110, 152, 191, 0.00)" as const,
33+
baseScale: 1,
34+
}}
35+
/>
36+
</>
37+
);
3838
};

‎src/RoundedBox.tsx

Lines changed: 35 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,43 @@
1-
import React, {useMemo} from 'react';
2-
import {roundedRect} from './helpers/rounded-rectangle';
1+
import React, { useMemo } from "react";
2+
import { roundedRect } from "./helpers/rounded-rectangle";
33

44
type Props = {
5-
width: number;
6-
height: number;
7-
radius: number;
8-
curveSegments: number;
9-
depth: number;
10-
} & Omit<JSX.IntrinsicElements['mesh'], 'args'>;
5+
width: number;
6+
height: number;
7+
radius: number;
8+
curveSegments: number;
9+
depth: number;
10+
} & Omit<JSX.IntrinsicElements["mesh"], "args">;
1111

1212
export const RoundedBox: React.FC<Props> = ({
13-
width,
14-
height,
15-
radius,
16-
curveSegments,
17-
children,
18-
depth,
19-
...otherProps
13+
width,
14+
height,
15+
radius,
16+
curveSegments,
17+
children,
18+
depth,
19+
...otherProps
2020
}) => {
21-
const shape = useMemo(
22-
() => roundedRect({width, height, radius}),
23-
[height, radius, width]
24-
);
21+
const shape = useMemo(
22+
() => roundedRect({ width, height, radius }),
23+
[height, radius, width],
24+
);
2525

26-
const params = useMemo(
27-
() => ({
28-
depth,
29-
bevelEnabled: true,
30-
bevelSize: 0,
31-
bevelThickness: 0,
32-
curveSegments,
33-
}),
34-
[curveSegments, depth]
35-
);
26+
const params = useMemo(
27+
() => ({
28+
depth,
29+
bevelEnabled: true,
30+
bevelSize: 0,
31+
bevelThickness: 0,
32+
curveSegments,
33+
}),
34+
[curveSegments, depth],
35+
);
3636

37-
return (
38-
<mesh {...otherProps}>
39-
<extrudeGeometry attach="geometry" args={[shape, params]} />
40-
{children}
41-
</mesh>
42-
);
37+
return (
38+
<mesh {...otherProps}>
39+
<extrudeGeometry attach="geometry" args={[shape, params]} />
40+
{children}
41+
</mesh>
42+
);
4343
};

0 commit comments

Comments
 (0)