hao/tennis-training-hub
1
0
派生 0
代码 工单 合并请求 工作流 软件包 项目 发布 百科 活动

Checkpoint: v4.0 media service, compose deploy, and verified docs

浏览代码
这个提交包含在：
cryptocommuniums-afk
2026-03-14 21:45:31 +08:00
父节点 27083d5af9
当前提交 d5431aee0e
共修改 41 个文件，包含 4056 行新增和 883 行删除
下载 Patch 文件 下载 Diff 文件 展开所有文件 折叠所有文件

34
client/src/components/DashboardLayout.tsx
查看文件

@@ -44,6 +44,14 @@ const menuItems = [
{ icon: Bell, label: "训练提醒", path: "/reminders", group: "learn" },
];
const mobileNavItems = [
{ icon: LayoutDashboard, label: "首页", path: "/dashboard" },
{ icon: Target, label: "计划", path: "/training" },
{ icon: CircleDot, label: "录制", path: "/recorder" },
{ icon: FileVideo, label: "视频", path: "/videos" },
{ icon: Activity, label: "进度", path: "/progress" },
];
const SIDEBAR_WIDTH_KEY = "sidebar-width";
const DEFAULT_WIDTH = 260;
const MIN_WIDTH = 200;
@@ -309,7 +317,31 @@ function DashboardLayoutContent({
</div>
</div>
)}
<main className="flex-1 p-4 md:p-6">{children}</main>
<main className={`flex-1 p-4 md:p-6 ${isMobile ? "pb-28" : ""}`}>{children}</main>
{isMobile && (
<nav className="mobile-safe-bottom fixed inset-x-0 bottom-0 z-50 border-t border-border/70 bg-background/95 px-2 pb-[calc(env(safe-area-inset-bottom,0px)+0.35rem)] pt-2 backdrop-blur supports-[backdrop-filter]:backdrop-blur">
<div className="mx-auto grid max-w-xl grid-cols-5 gap-1">
{mobileNavItems.map((item) => {
const isActive = location === item.path;
return (
<button
key={item.path}
type="button"
onClick={() => setLocation(item.path)}
className={`flex min-h-[52px] flex-col items-center justify-center rounded-2xl px-1 py-2 text-[11px] transition ${
isActive
? "bg-primary text-primary-foreground shadow-sm"
: "text-muted-foreground hover:bg-muted/70"
}`}
>
<item.icon className="mb-1 h-4 w-4" />
<span>{item.label}</span>
</button>
);
})}
</div>
</nav>
)}
</SidebarInset>
</>
);

7
client/src/index.css
查看文件

@@ -175,6 +175,10 @@
.mobile-safe-top {
padding-top: env(safe-area-inset-top, 0px);
}
.mobile-safe-inline {
padding-left: env(safe-area-inset-left, 0px);
padding-right: env(safe-area-inset-right, 0px);
}
}
/* Touch-friendly tap targets */
@@ -215,8 +219,7 @@ html {
/* Prevent pull-to-refresh during camera/recording */
.no-overscroll {
overscroll-behavior: none;
touch-action: none;
overscroll-behavior-y: contain;
}
/* Video container responsive */

17
client/src/lib/media.test.ts 普通文件
查看文件

@@ -0,0 +1,17 @@
import { describe, expect, it } from "vitest";
import { formatRecordingTime, pickBitrate } from "./media";
describe("media utilities", () => {
it("formats recording time with minute and second padding", () => {
expect(formatRecordingTime(0)).toBe("00:00");
expect(formatRecordingTime(61_000)).toBe("01:01");
expect(formatRecordingTime(12 * 60_000 + 9_000)).toBe("12:09");
});
it("selects bitrates by preset and device class", () => {
expect(pickBitrate("economy", true)).toBe(1_000_000);
expect(pickBitrate("clarity", false)).toBe(2_500_000);
expect(pickBitrate("balanced", true)).toBe(1_400_000);
expect(pickBitrate("balanced", false)).toBe(1_900_000);
});
});

158
client/src/lib/media.ts 普通文件
查看文件

@@ -0,0 +1,158 @@
export type MediaSessionStatus =
| "created"
| "recording"
| "streaming"
| "reconnecting"
| "finalizing"
| "archived"
| "failed";
export type ArchiveStatus =
| "idle"
| "queued"
| "processing"
| "completed"
| "failed";
export type MediaMarker = {
id: string;
type: string;
label: string;
timestampMs: number;
confidence?: number;
createdAt: string;
};
export type MediaSession = {
id: string;
userId: string;
title: string;
status: MediaSessionStatus;
archiveStatus: ArchiveStatus;
format: string;
mimeType: string;
qualityPreset: string;
facingMode: string;
deviceKind: string;
reconnectCount: number;
uploadedSegments: number;
uploadedBytes: number;
durationMs: number;
lastError?: string;
streamConnected: boolean;
lastStreamAt?: string;
playback: {
webmUrl?: string;
mp4Url?: string;
webmSize?: number;
mp4Size?: number;
ready: boolean;
previewUrl?: string;
};
markers: MediaMarker[];
};
const MEDIA_BASE = (import.meta.env.VITE_MEDIA_BASE_URL || "/media").replace(/\/$/, "");
async function request<T>(path: string, init?: RequestInit): Promise<T> {
const response = await fetch(`${MEDIA_BASE}${path}`, init);
if (!response.ok) {
const errorBody = await response.json().catch(() => ({}));
throw new Error(errorBody.error || errorBody.message || `Media service error (${response.status})`);
}
return response.json() as Promise<T>;
}
export async function createMediaSession(payload: {
userId: string;
title: string;
format: string;
mimeType: string;
qualityPreset: string;
facingMode: string;
deviceKind: string;
}) {
return request<{ session: MediaSession }>("/sessions", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(payload),
});
}
export async function signalMediaSession(sessionId: string, payload: { sdp: string; type: string }) {
return request<{ sdp: string; type: string }>(`/sessions/${sessionId}/signal`, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(payload),
});
}
export async function uploadMediaSegment(
sessionId: string,
sequence: number,
durationMs: number,
blob: Blob
) {
return request<{ session: MediaSession }>(
`/sessions/${sessionId}/segments?sequence=${sequence}&durationMs=${durationMs}`,
{
method: "POST",
headers: { "Content-Type": blob.type || "video/webm" },
body: blob,
}
);
}
export async function createMediaMarker(
sessionId: string,
payload: { type: string; label: string; timestampMs: number; confidence?: number }
) {
return request<{ session: MediaSession }>(`/sessions/${sessionId}/markers`, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(payload),
});
}
export async function finalizeMediaSession(
sessionId: string,
payload: { title: string; durationMs: number }
) {
return request<{ session: MediaSession }>(`/sessions/${sessionId}/finalize`, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(payload),
});
}
export async function getMediaSession(sessionId: string) {
return request<{ session: MediaSession }>(`/sessions/${sessionId}`);
}
export function formatRecordingTime(milliseconds: number) {
const totalSeconds = Math.max(0, Math.floor(milliseconds / 1000));
const minutes = Math.floor(totalSeconds / 60);
const seconds = totalSeconds % 60;
return `${minutes.toString().padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`;
}
export function pickRecorderMimeType() {
const candidates = [
"video/webm;codecs=vp9,opus",
"video/webm;codecs=vp8,opus",
"video/webm;codecs=h264,opus",
"video/webm",
];
return candidates.find((candidate) => window.MediaRecorder?.isTypeSupported(candidate)) || "video/webm";
}
export function pickBitrate(preset: string, isMobile: boolean) {
switch (preset) {
case "economy":
return 1_000_000;
case "clarity":
return 2_500_000;
default:
return isMobile ? 1_400_000 : 1_900_000;
}
}

11
client/src/main.tsx
查看文件

@@ -52,6 +52,17 @@ const trpcClient = trpc.createClient({
],
});
const analyticsEndpoint = import.meta.env.VITE_ANALYTICS_ENDPOINT;
const analyticsWebsiteId = import.meta.env.VITE_ANALYTICS_WEBSITE_ID;
if (analyticsEndpoint && analyticsWebsiteId && typeof document !== "undefined") {
const script = document.createElement("script");
script.defer = true;
script.src = `${analyticsEndpoint.replace(/\/$/, "")}/umami`;
script.dataset.websiteId = analyticsWebsiteId;
document.head.appendChild(script);
}
createRoot(document.getElementById("root")!).render(
<trpc.Provider client={trpcClient} queryClient={queryClient}>
<QueryClientProvider client={queryClient}>

4
client/src/pages/Dashboard.tsx
查看文件

@@ -54,7 +54,7 @@ export default function Dashboard() {
{/* Welcome header */}
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
<div>
<h1 className="text-2xl font-bold tracking-tight">
<h1 className="text-2xl font-bold tracking-tight" data-testid="dashboard-title">
欢迎回来，{user?.name || "球友"}
</h1>
<div className="flex items-center gap-3 mt-2">
@@ -65,7 +65,7 @@ export default function Dashboard() {
</div>
</div>
<div className="flex gap-2">
<Button onClick={() => setLocation("/training")} className="gap-2">
<Button data-testid="dashboard-training-button" onClick={() => setLocation("/training")} className="gap-2">
<Target className="h-4 w-4" />
开始训练
</Button>

4
client/src/pages/LiveCamera.tsx
查看文件

@@ -341,7 +341,7 @@ export default function LiveCamera() {
<div className="absolute inset-0 flex flex-col items-center justify-center text-white/60">
<CameraOff className="h-12 w-12 mb-3" />
<p className="text-sm">摄像头未启动</p>
<Button variant="secondary" className="mt-3 gap-2" onClick={() => setShowSetupGuide(true)}>
<Button data-testid="live-camera-start-button" variant="secondary" className="mt-3 gap-2" onClick={() => setShowSetupGuide(true)}>
<Camera className="h-4 w-4" />启动摄像头
</Button>
</div>
@@ -357,7 +357,7 @@ export default function LiveCamera() {
{/* Controls bar */}
<div className="flex items-center justify-center gap-3 p-3 bg-muted/30 flex-wrap">
{!cameraActive ? (
<Button onClick={() => setShowSetupGuide(true)} className="gap-2">
<Button data-testid="live-camera-toolbar-start-button" onClick={() => setShowSetupGuide(true)} className="gap-2">
<Camera className="h-4 w-4" />启动摄像头
</Button>
) : (

4
client/src/pages/Login.tsx
查看文件

@@ -42,13 +42,14 @@ export default function Login() {
<Card className="border-0 shadow-xl">
<CardHeader className="text-center pb-2">
<CardTitle className="text-xl">开始训练</CardTitle>
<CardTitle className="text-xl" data-testid="login-title">开始训练</CardTitle>
<CardDescription>输入用户名即可开始使用</CardDescription>
</CardHeader>
<CardContent>
<form onSubmit={handleLogin} className="space-y-4">
<div className="space-y-2">
<Input
data-testid="login-username-input"
type="text"
placeholder="请输入您的用户名"
value={username}
@@ -59,6 +60,7 @@ export default function Login() {
/>
</div>
<Button
data-testid="login-submit-button"
type="submit"
className="w-full h-12 text-base font-medium"
disabled={loginMutation.isPending || !username.trim()}

1630
client/src/pages/Recorder.tsx
查看文件

文件差异内容过多而无法显示 加载差异

3
client/src/pages/Training.tsx
查看文件

@@ -95,7 +95,7 @@ export default function Training() {
<div className="space-y-6">
<div className="flex items-center justify-between">
<div>
<h1 className="text-2xl font-bold tracking-tight">训练计划</h1>
<h1 className="text-2xl font-bold tracking-tight" data-testid="training-title">训练计划</h1>
<p className="text-muted-foreground text-sm mt-1">AI个性化训练方案</p>
</div>
</div>
@@ -143,6 +143,7 @@ export default function Training() {
</div>
</div>
<Button
data-testid="training-generate-button"
onClick={() => generateMutation.mutate({ skillLevel, durationDays })}
disabled={generateMutation.isPending}
className="w-full sm:w-auto gap-2"

6
client/src/pages/Videos.tsx
查看文件

@@ -47,12 +47,12 @@ export default function Videos() {
<div className="space-y-6">
<div className="flex items-center justify-between">
<div>
<h1 className="text-2xl font-bold tracking-tight">训练视频库</h1>
<h1 className="text-2xl font-bold tracking-tight" data-testid="videos-title">训练视频库</h1>
<p className="text-muted-foreground text-sm mt-1">
管理您的所有训练视频及分析结果 · 共 {videos?.length || 0} 个视频
</p>
</div>
<Button onClick={() => setLocation("/analysis")} className="gap-2">
<Button data-testid="videos-upload-button" onClick={() => setLocation("/analysis")} className="gap-2">
<Video className="h-4 w-4" />
上传新视频
</Button>
@@ -77,7 +77,7 @@ export default function Videos() {
const status = statusMap[video.analysisStatus] || statusMap.pending;
return (
<Card key={video.id} className="border-0 shadow-sm hover:shadow-md transition-shadow">
<Card key={video.id} className="border-0 shadow-sm hover:shadow-md transition-shadow" data-testid="video-card">
<CardContent className="p-4">
<div className="flex items-start gap-4">
{/* Thumbnail / icon */}