|
|
@@ -1,12 +1,12 @@
|
|
|
import React, { useEffect, useState } from "react";
|
|
|
import { Composition, Sequence, AbsoluteFill, Audio, staticFile, Img, useCurrentFrame, interpolate, continueRender, delayRender } from "remotion";
|
|
|
import type { TemplateType, AspectRatio } from "@pipeline/shared";
|
|
|
-import type { WordTimestamp, GithubSceneData, RepoMeta } from "@pipeline/shared";
|
|
|
+import type { WordTimestamp, GithubSceneData } from "@pipeline/shared";
|
|
|
import NewsScene from "./news/index";
|
|
|
import KnowledgeScene from "./knowledge/index";
|
|
|
import OpinionScene from "./opinion/index";
|
|
|
import MarketingScene from "./marketing/index";
|
|
|
-import GithubTrendingScene, { GithubTrendingSummaryScene } from "./github-trending/index";
|
|
|
+import GithubTrendingScene from "./github-trending/index";
|
|
|
import { THEMES } from "./base/theme/colors";
|
|
|
|
|
|
export interface RemotionScene {
|
|
|
@@ -30,7 +30,9 @@ export interface RemotionScene {
|
|
|
backgroundAsset?: { id: string; filename: string };
|
|
|
layoutHint: string;
|
|
|
github?: GithubSceneData;
|
|
|
- trendingRepos?: RepoMeta[];
|
|
|
+ // github-trending cover scene only: theme tags + trend line.
|
|
|
+ coverTags?: string[];
|
|
|
+ trendSummary?: string;
|
|
|
}
|
|
|
|
|
|
export interface RemotionProps {
|
|
|
@@ -97,6 +99,8 @@ const TemplateComposition: React.FC<RemotionProps> = (props) => {
|
|
|
subtitle={props.subtitle}
|
|
|
keyframes={scene.keyframes}
|
|
|
backgroundAsset={scene.backgroundAsset}
|
|
|
+ coverTags={scene.coverTags}
|
|
|
+ trendSummary={scene.trendSummary}
|
|
|
totalFrames={totalFrames}
|
|
|
/>
|
|
|
</Sequence>
|
|
|
@@ -118,22 +122,6 @@ const TemplateComposition: React.FC<RemotionProps> = (props) => {
|
|
|
</Sequence>
|
|
|
);
|
|
|
}
|
|
|
- if (scene.sceneType === "summary" && props.template === "github-trending") {
|
|
|
- return (
|
|
|
- <Sequence
|
|
|
- key={scene.id}
|
|
|
- from={scene.startFrame}
|
|
|
- durationInFrames={duration}
|
|
|
- >
|
|
|
- {sceneAudio}
|
|
|
- <GithubTrendingSummaryScene
|
|
|
- scene={scene}
|
|
|
- totalFrames={totalFrames}
|
|
|
- channelName={props.channelName}
|
|
|
- />
|
|
|
- </Sequence>
|
|
|
- );
|
|
|
- }
|
|
|
return (
|
|
|
<Sequence
|
|
|
key={scene.id}
|
|
|
@@ -165,14 +153,19 @@ const CoverScene: React.FC<{
|
|
|
subtitle?: string;
|
|
|
keyframes: Array<{ type: string; content: string }>;
|
|
|
backgroundAsset?: { id: string; filename: string };
|
|
|
+ coverTags?: string[];
|
|
|
+ trendSummary?: string;
|
|
|
totalFrames: number;
|
|
|
-}> = ({ template, title, subtitle, keyframes, backgroundAsset }) => {
|
|
|
+}> = ({ template, title, subtitle, keyframes, backgroundAsset, coverTags, trendSummary }) => {
|
|
|
const accent = THEMES[template].primaryLight;
|
|
|
const isGithubTrending = template === "github-trending";
|
|
|
|
|
|
// github-trending cover doubles as the opening narration screen — light
|
|
|
- // background, much larger masthead typography, no dark image overlay.
|
|
|
+ // background, large masthead typography, no dark image overlay. It also
|
|
|
+ // shows the day's theme tags (coverTags) and a one-line trend summary
|
|
|
+ // (trendSummary), both LLM-produced.
|
|
|
if (isGithubTrending) {
|
|
|
+ const hasTags = !!(coverTags && coverTags.length > 0);
|
|
|
return (
|
|
|
<AbsoluteFill style={{
|
|
|
background: "linear-gradient(135deg, #f8fafc 0%, #e2e8f0 60%, #cbd5e1 100%)",
|
|
|
@@ -188,25 +181,58 @@ const CoverScene: React.FC<{
|
|
|
padding: 80, textAlign: "center",
|
|
|
}}>
|
|
|
<div style={{
|
|
|
- fontSize: 132, fontWeight: 800, color: "#0f172a",
|
|
|
+ fontSize: 104, fontWeight: 800, color: "#0f172a",
|
|
|
fontFamily: "Noto Sans SC", lineHeight: 1.15,
|
|
|
- marginBottom: 32, letterSpacing: "-0.02em",
|
|
|
+ marginBottom: 28, letterSpacing: "-0.02em",
|
|
|
}}>
|
|
|
{title}
|
|
|
</div>
|
|
|
{subtitle && (
|
|
|
<div style={{
|
|
|
- fontSize: 56, fontWeight: 600, color: "#475569",
|
|
|
+ fontSize: 50, fontWeight: 600, color: "#475569",
|
|
|
fontFamily: "Noto Sans SC",
|
|
|
padding: "12px 36px",
|
|
|
borderRadius: 16,
|
|
|
background: "rgba(255,255,255,0.7)",
|
|
|
border: `2px solid ${accent}`,
|
|
|
boxShadow: "0 8px 24px rgba(15,23,42,0.08)",
|
|
|
+ marginBottom: hasTags || trendSummary ? 44 : 0,
|
|
|
}}>
|
|
|
{subtitle}
|
|
|
</div>
|
|
|
)}
|
|
|
+ {hasTags && (
|
|
|
+ <div style={{
|
|
|
+ display: "flex", flexWrap: "wrap", justifyContent: "center",
|
|
|
+ gap: 18, maxWidth: "82%", marginBottom: trendSummary ? 36 : 0,
|
|
|
+ }}>
|
|
|
+ {coverTags!.map((tag, i) => (
|
|
|
+ <div key={i} style={{
|
|
|
+ display: "inline-flex", alignItems: "center", gap: 12,
|
|
|
+ padding: "12px 26px", borderRadius: 12,
|
|
|
+ background: "rgba(255,255,255,0.78)",
|
|
|
+ border: `1.5px solid ${accent}66`,
|
|
|
+ color: "#1e293b",
|
|
|
+ fontFamily: "Noto Sans SC", fontSize: 34, fontWeight: 600,
|
|
|
+ boxShadow: "0 2px 10px rgba(15,23,42,0.06)",
|
|
|
+ }}>
|
|
|
+ <span style={{
|
|
|
+ display: "inline-block", width: 11, height: 11,
|
|
|
+ borderRadius: "50%", background: accent, flexShrink: 0,
|
|
|
+ }} />
|
|
|
+ {tag}
|
|
|
+ </div>
|
|
|
+ ))}
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
+ {trendSummary && (
|
|
|
+ <div style={{
|
|
|
+ fontSize: 40, fontWeight: 500, color: "#475569",
|
|
|
+ fontFamily: "Noto Sans SC", maxWidth: "70%", lineHeight: 1.5,
|
|
|
+ }}>
|
|
|
+ {trendSummary}
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
</div>
|
|
|
</AbsoluteFill>
|
|
|
);
|