Twitter working

src/Compositions.tsx

@@ -14,7 +14,8 @@ import { YoutubeVideoScene } from './youtube/YoutubeVideoScene';
 import { LinkedinFullSysDesignComposition } from './linkedin-video/LinkedinFullSysDesignComposition';
 import { PaperDriveComposition } from './paperdrive/PaperDriveComposition';
 import { PaperDriveHorizontalCoverComposition } from './paperdrive/PaperDriveHorizontalCoverComposition';
-import { PosterSingleTextWithBGExtra, Transcript } from 'common-utils';
+import { PosterSingleTextWithBGExtra, Transcript, TweetExtra } from 'common-utils';
+import TweetPoster from './common/TweetPoster';
 
 
 
@@ -257,6 +258,19 @@ export const Compositions: React.FC = () => {
                         }]
                     } as Transcript}
             />
+
+            <Still
+                id="TweetPoster"
+                component={TweetPoster}
+                width={Script.meta.resolution?.width || 1920}
+                height={Script.meta.resolution?.height || 1080}
+                defaultProps={
+                    {
+                        transcript: Script.transcript.find(t => t.extras?.template == "tweet"),
+                        meta: Script.meta
+                    }
+                }
+            />
         </>
     );
 };

src/RenderUtils.ts

@@ -1,4 +1,4 @@
-import { random, useCurrentFrame } from "remotion";
+import { random, staticFile, useCurrentFrame } from "remotion";
 
 
 function levenshteinDistance(str1: string, str2: string) {
@@ -19,6 +19,17 @@ function levenshteinDistance(str1: string, str2: string) {
 }
 export class RenderUtils {
 
+  public static tryStaticFile(file: string) {
+    console.log('file', file)
+    try {
+      return staticFile(file);
+    } catch (e) {
+      let fileName = RenderUtils.getFileName(file)
+      console.log('fileName', file)
+      return staticFile(fileName!!);
+    }
+  }
+
   public static convertVHToPixels(vh: string) {
     return Math.round(window.innerHeight * (parseInt(vh.replace("vh", "")) / 100));
   }
@@ -122,22 +133,17 @@ export class RenderUtils {
 
   public static getFileName(filePath: string, subdirpath?: string): string | undefined {
     if (!filePath)
-      return undefined
+      return undefined;
     if (filePath.startsWith("http"))
-      return filePath
-    const slashCount = (filePath.replace("./", "").split("/").length - 1);
-    if (slashCount > 0) {
-      let pub = filePath.replace("./", "")
-      return pub
-    }
+      return filePath;
 
+    // Always extract just the filename from any path
     const match = filePath.match(/([^\/\\]+)$/);
-    let folmat = match ? match[1] : '';
+    let filename = match ? match[1] : '';
     if (subdirpath) {
-      return subdirpath + "/" + folmat
-    }
-    else {
-      return folmat
+      return subdirpath + "/" + filename;
+    } else {
+      return filename;
     }
   }
 

src/common/TweetPoster.tsx

@@ -0,0 +1,209 @@
+import { Group, Meta, Transcript, TweetExtra } from "common-utils";
+import { AbsoluteFill } from "remotion";
+import { RenderUtils } from "../RenderUtils";
+
+function formatTweetDate(date: Date) {
+  const hours = date.getHours();
+  const minutes = date.getMinutes();
+  const ampm = hours >= 12 ? "PM" : "AM";
+  const hour12 = hours % 12 === 0 ? 12 : hours % 12;
+  const minStr = minutes.toString().padStart(2, "0");
+  const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+  const month = months[date.getMonth()];
+  const day = date.getDate();
+  const year = date.getFullYear();
+  return `${hour12}:${minStr} ${ampm} · ${month} ${day}, ${year}`;
+}
+
+export default function TweetPoster({
+  transcript,
+  meta,
+}: {
+  transcript: Transcript;
+  meta: Meta;
+}) {
+  const textParts = transcript.audioCaption?.words;
+  if (!textParts) {
+    return (
+      <AbsoluteFill color="#ffffff">
+        <h1>
+          <div>Empty tweet text!</div>
+        </h1>
+      </AbsoluteFill>
+    );
+  }
+
+  const { width, height } = meta.resolution || { width: 1080, height: 1920 };
+
+  // Scale solely from WIDTH (as requested)
+  const W = Math.max(320, width); // guard for tiny canvases
+
+  // Outer padding around the card (kept modest so card fills width but not flush)
+  const outerPad = Math.max(Math.round(W * 0.04), 16); // 4% of width, min 16px
+
+  // Card internal padding
+  const boxPad = Math.max(Math.round(W * 0.03), 14); // 3% of width, min 14px
+
+  // Avatar + typography strictly from width
+  const avatarSize = Math.max(Math.round(W * 0.08), 56); // 8% of width
+  const fontNamePx = Math.round(W * 0.035);      // display name
+  const fontUserPx = Math.round(W * 0.028);      // @username
+  const fontMainPx = Math.round(W * 0.042);      // tweet text
+  const fontDatePx = Math.round(W * 0.026);      // footer date
+
+  // Reasonable clamps to avoid extremes on very large/small canvases
+  const clamp = (v: number, min: number, max: number) => Math.min(max, Math.max(min, v));
+  const fontName = `${clamp(fontNamePx, 16, 40)}px`;
+  const fontUsername = `${clamp(fontUserPx, 14, 32)}px`;
+  const fontMain = `${clamp(fontMainPx, 18, 48)}px`;
+  const fontDate = `${clamp(fontDatePx, 12, 28)}px`;
+
+  let bgColor = (transcript.extras as TweetExtra)?.textBgColor || "#ffffff";
+  const fullName = textParts[0]?.word;
+  const fullNameStyle = textParts[0]?.textStyle;
+  const username = textParts[1]?.word;
+  const usernameStyle = textParts[1]?.textStyle;
+  const tweetLine1 = textParts[2]?.word;
+  const tweetLine1Style = textParts[2]?.textStyle;
+  const tweetLine2 = textParts[3]?.word;
+  const tweetLine2Style = textParts[3]?.textStyle;
+  const avatar = RenderUtils.tryStaticFile(transcript.mediaAbsPaths?.[0]?.path);
+
+  return (
+    <AbsoluteFill
+      style={{
+        background: bgColor,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        width: "100%",
+        height: "100%",
+        boxSizing: "border-box",
+        padding: 0,
+      }}
+    >
+      {/* Outer pad keeps some breathing room; box fills remaining width */}
+      <div
+        style={{
+          width: "100%",
+          height: "100%",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          boxSizing: "border-box",
+          padding: outerPad,
+        }}
+      >
+        {/* Tweet box now fully fits parent width with the outerPad margin */}
+        <div
+          style={{
+            width: "100%",
+            // height is auto so small/large content won't crop;
+            // allow it to grow and just keep nice rounding/shadow
+            background: "#fff",
+            border: "1px solid #e1e8ed",
+            borderRadius: Math.max(Math.round(W * 0.02), 16),
+            boxShadow: `0 ${Math.round(W * 0.04)}px ${Math.round(
+              W * 0.08
+            )}px rgba(0,0,0,0.10)`,
+            padding: `${boxPad}px ${Math.round(boxPad * 1.2)}px`,
+            fontFamily: "Segoe UI, Arial, sans-serif",
+            boxSizing: "border-box",
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "flex-start",
+
+            // Prevent cropping: let content define height; wrap long words
+            overflow: "visible",
+            wordBreak: "break-word",
+          }}
+        >
+          {/* Header */}
+          <div
+            style={{
+              display: "flex",
+              alignItems: "center",
+              marginBottom: boxPad,
+              minWidth: 0,
+            }}
+          >
+            <img
+              src={avatar}
+              alt="avatar"
+              style={{
+                width: avatarSize,
+                height: avatarSize,
+                minWidth: 40,
+                minHeight: 40,
+                borderRadius: "50%",
+                marginRight: boxPad,
+                border: "2px solid #e1e8ed",
+                objectFit: "cover",
+                flexShrink: 0,
+              }}
+            />
+            <div style={{ minWidth: 0 }}>
+              <div
+                style={{
+                  fontWeight: 700,
+                  fontSize: fontName,
+                  lineHeight: 1.15,
+                  whiteSpace: "pre-wrap",
+                  ...fullNameStyle,
+                }}
+              >
+                {fullName}
+              </div>
+              <div
+                style={{
+                  color: "#657786",
+                  fontSize: fontUsername,
+                  lineHeight: 1.15,
+                  whiteSpace: "pre-wrap",
+                  ...usernameStyle,
+                }}
+              >
+                {username}
+              </div>
+            </div>
+          </div>
+
+          {/* Tweet text */}
+          <div
+            style={{
+              fontSize: fontMain,
+              lineHeight: 1.45,
+              marginBottom: boxPad,
+              whiteSpace: "pre-wrap",
+            }}
+          >
+            <span style={tweetLine1Style}>{tweetLine1}</span>
+            {tweetLine2 && (
+              <>
+                {"\n"}
+                <span style={tweetLine2Style}>{tweetLine2}</span>
+              </>
+            )}
+          </div>
+
+          {/* Footer */}
+          <div
+            style={{
+              color: "#657786",
+              fontSize: fontDate,
+              marginTop: Math.round(boxPad * 0.5),
+              display: "flex",
+              gap: Math.round(W * 0.01),
+              alignItems: "baseline",
+              flexWrap: "wrap",
+            }}
+          >
+            <span>{formatTweetDate(new Date())}</span>
+            <span>·</span>
+            <span style={{ color: "#1da1f2" }}>Follow</span>
+          </div>
+        </div>
+      </div>
+    </AbsoluteFill>
+  );
+}