Tiktok layout

config/layout.ts

@@ -5,14 +5,18 @@ export type Dimensions = {
   height: number;
 };
 
-export const canvasLayout = z.enum(["landscape", "square"]);
+export const canvasLayout = z.enum(["landscape", "square", "portrait"]);
 export type CanvasLayout = z.infer<typeof canvasLayout>;
 
 export const DIMENSIONS: { [key in CanvasLayout]: Dimensions } = {
   landscape: {
     width: 1920,
     height: 1080,
   },
+  portrait: {
+    width: 1080,
+    height: 1920,
+  },
   square: {
     width: 1080,
     height: 1080,

public/tiktok/subs1708622884021.json

@@ -1131,7 +1131,7 @@
         "from": 16490,
         "to": 16560
       },
-      "text": " n",
+      "text": "` n`",
       "tokens": [
         {
           "text": " n",
@@ -1158,7 +1158,7 @@
         "from": 16560,
         "to": 16770
       },
-      "text": "px",
+      "text": "`px`",
       "tokens": [
         {
           "text": "px",
@@ -1185,7 +1185,7 @@
         "from": 16770,
         "to": 17400
       },
-      "text": " create",
+      "text": "` create`",
       "tokens": [
         {
           "text": " create",
@@ -1212,7 +1212,7 @@
         "from": 17400,
         "to": 17500
       },
-      "text": "-",
+      "text": "`-`",
       "tokens": [
         {
           "text": "-",
@@ -1239,7 +1239,7 @@
         "from": 17500,
         "to": 17990
       },
-      "text": "video",
+      "text": "`video`",
       "tokens": [
         {
           "text": "video",
@@ -1266,7 +1266,7 @@
         "from": 17990,
         "to": 18330
       },
-      "text": "-",
+      "text": "``",
       "tokens": [
         {
           "text": "-",
@@ -1293,7 +1293,7 @@
         "from": 18330,
         "to": 18430
       },
-      "text": "at",
+      "text": "`@`",
       "tokens": [
         {
           "text": "at",
@@ -1320,7 +1320,7 @@
         "from": 18430,
         "to": 18450
       },
-      "text": "-",
+      "text": "``",
       "tokens": [
         {
           "text": "-",
@@ -1347,7 +1347,7 @@
         "from": 18450,
         "to": 19060
       },
-      "text": "latest",
+      "text": "`latest`",
       "tokens": [
         {
           "text": "latest",
@@ -1374,7 +1374,7 @@
         "from": 19060,
         "to": 19370
       },
-      "text": " --",
+      "text": "` --`",
       "tokens": [
         {
           "text": " --",
@@ -1401,7 +1401,7 @@
         "from": 19370,
         "to": 19470
       },
-      "text": "t",
+      "text": "`t`",
       "tokens": [
         {
           "text": "t",
@@ -1428,7 +1428,7 @@
         "from": 19470,
         "to": 19580
       },
-      "text": "ik",
+      "text": "`ik`",
       "tokens": [
         {
           "text": "ik",
@@ -1455,7 +1455,7 @@
         "from": 19580,
         "to": 19670
       },
-      "text": "t",
+      "text": "`t`",
       "tokens": [
         {
           "text": "t",
@@ -1482,7 +1482,7 @@
         "from": 19670,
         "to": 19960
       },
-      "text": "ok",
+      "text": "`ok`",
       "tokens": [
         {
           "text": "ok",
@@ -1542,4 +1542,4 @@
       ]
     }
   ]
-}
+}

public/tiktok/subs1708623779349.json

@@ -2228,7 +2228,7 @@
         "from": 24060,
         "to": 24510
       },
-      "text": "ions",
+      "text": "ioned",
       "tokens": [
         {
           "text": "ions",
@@ -2518,4 +2518,4 @@
       ]
     }
   ]
-}
+}

remotion/Main.tsx

@@ -31,6 +31,12 @@ export const Main: React.FC<MainProps> = ({
     return makeChapters({ scenes: scenesAndMetadata });
   }, [scenesAndMetadata]);
 
+  const containerStyle: React.CSSProperties = useMemo(() => {
+    return {
+      background: COLORS[theme].BACKGROUND,
+    };
+  }, [theme]);
+
   if (scenesAndMetadata.length === 0) {
     return <NoDataScene theme={theme} />;
   }
@@ -42,11 +48,7 @@ export const Main: React.FC<MainProps> = ({
     lastSceneIndex.from + lastSceneIndex.durationInFrames - 1;
 
   return (
-    <AbsoluteFill
-      style={{
-        background: COLORS[theme].BACKGROUND,
-      }}
-    >
+    <AbsoluteFill style={containerStyle}>
       {scenesAndMetadata.map((sceneAndMetadata, i) => {
         return (
           <Scene

remotion/Root.tsx

@@ -2381,9 +2381,9 @@ export const Root = () => {
         id="uber-for-coding"
         schema={videoConf}
         defaultProps={{
-          theme: "light",
-          canvasLayout: "square" as const,
-          platform: "x",
+          theme: "light" as const,
+          canvasLayout: "portrait" as const,
+          platform: "x" as const,
           scenes: [
             {
               type: "videoscene" as const,
@@ -9314,8 +9314,8 @@ export const Root = () => {
         schema={videoConf}
         defaultProps={{
           theme: "light" as const,
-          canvasLayout: "square" as const,
-          platform: "x",
+          canvasLayout: "portrait" as const,
+          platform: "x" as const,
           scenes: [
             {
               type: "videoscene" as const,
@@ -9491,8 +9491,8 @@ export const Root = () => {
         schema={videoConf}
         defaultProps={{
           theme: "light" as const,
-          canvasLayout: "square" as const,
-          platform: "x",
+          canvasLayout: "portrait" as const,
+          platform: "x" as const,
           scenes: [
             {
               type: "videoscene" as const,

remotion/animations/display-transitions/index.ts

@@ -6,6 +6,7 @@ import type {
 import type { Layout, LayoutAndFade } from "../../layout/layout-types";
 import { interpolateLayoutAndFade } from "../interpolate-layout";
 import { getLandscapeDisplayEnterOrExit } from "./landscape";
+import { getPortraitDisplayEnterOrExit } from "./portrait";
 import { getSquareDisplayEnterOrExit } from "./square";
 
 const getDisplayStartOrEndLayout = ({
@@ -37,6 +38,12 @@ const getDisplayStartOrEndLayout = ({
     });
   }
 
+  if (canvasLayout === "portrait") {
+    return getPortraitDisplayEnterOrExit({
+      currentScene,
+    });
+  }
+
   throw new Error(`Unknown canvas layout: ${canvasLayout satisfies never}`);
 };
 

remotion/animations/display-transitions/portrait.ts

@@ -0,0 +1,20 @@
+import { VideoSceneAndMetadata } from "../../../config/scenes";
+import { LayoutAndFade } from "../../layout/layout-types";
+
+export const getPortraitDisplayEnterOrExit = ({
+  currentScene,
+}: {
+  currentScene: VideoSceneAndMetadata;
+}): LayoutAndFade => {
+  if (
+    currentScene.type !== "video-scene" ||
+    currentScene.layout.displayLayout === null
+  ) {
+    throw new Error("no transitions on non-video scenes");
+  }
+
+  return {
+    layout: currentScene.layout.displayLayout,
+    shouldFadeRecording: false,
+  };
+};

remotion/animations/webcam-transitions/index.ts

@@ -6,6 +6,7 @@ import type {
 import type { Layout, LayoutAndFade } from "../../layout/layout-types";
 import { interpolateLayoutAndFade } from "../interpolate-layout";
 import { getLandscapeWebCamStartOrEndLayout } from "./landscape";
+import { getPortraitWebcamStartOrEndLayout } from "./portrait";
 import { getSquareWebcamStartOrEndLayout } from "./square";
 
 const getWebCamStartOrEndLayout = ({
@@ -37,6 +38,12 @@ const getWebCamStartOrEndLayout = ({
     });
   }
 
+  if (canvasLayout === "portrait") {
+    return getPortraitWebcamStartOrEndLayout({
+      currentScene,
+    });
+  }
+
   throw new Error(`Unknown canvas layout: ${canvasLayout satisfies never}`);
 };
 

remotion/animations/webcam-transitions/portrait.ts

@@ -0,0 +1,16 @@
+import { VideoSceneAndMetadata } from "../../../config/scenes";
+import { LayoutAndFade } from "../../layout/layout-types";
+
+export const getPortraitWebcamStartOrEndLayout = ({
+  currentScene,
+}: {
+  currentScene: VideoSceneAndMetadata;
+}): LayoutAndFade => {
+  if (!currentScene || currentScene.type !== "video-scene") {
+    throw new Error("no transitions on non-video scenes");
+  }
+  return {
+    layout: currentScene.layout.webcamLayout,
+    shouldFadeRecording: false,
+  };
+};

remotion/calculate-metadata/add-metadata-to-scene.ts

@@ -6,7 +6,8 @@ import {
   SceneVideos,
   SelectableScene,
 } from "../../config/scenes";
-import { calculateSrt } from "../captions/srt/helpers/calculate-srt";
+import { MAX_SRT_CHARS_PER_LINE } from "../captions/srt/SrtPreviewAndEditor/srt-max-chars-per-line";
+import { subtitleLines } from "../captions/srt/helpers/calculate-srt";
 import { getBRollDimensions } from "../layout/get-broll-dimensions";
 import { getVideoSceneLayout } from "../layout/get-layout";
 import { PLACEHOLDER_DURATION_IN_FRAMES } from "./empty-place-holder";
@@ -64,9 +65,10 @@ export const addMetadataToScene = async ({
   });
 
   const srt = whisperCppOutput
-    ? calculateSrt({
+    ? subtitleLines({
         startFrame: actualStartFrame,
         whisperCppOutput,
+        maxCharsPerLine: MAX_SRT_CHARS_PER_LINE,
       })
     : [];
 

remotion/captions/portrait/PortraitCaptions.tsx

@@ -0,0 +1,19 @@
+import { StaticFile } from "@remotion/studio";
+import React from "react";
+import { Theme } from "../../../config/themes";
+import { Layout } from "../../layout/layout-types";
+import { CaptionOverlay } from "../editor/CaptionOverlay";
+import { PortraitWords } from "./PortraitWords";
+
+export const PortraitCaptions: React.FC<{
+  captions: StaticFile;
+  theme: Theme;
+  startFrame: number;
+  webcamLayout: Layout;
+}> = ({ captions, startFrame, theme, webcamLayout }) => {
+  return (
+    <CaptionOverlay file={captions} theme={theme} trimStart={startFrame}>
+      <PortraitWords webcamLayout={webcamLayout} startFrame={startFrame} />
+    </CaptionOverlay>
+  );
+};