Skip to content

Add YouTube Shorts section with split layout and auto-play #36

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
castellbranco merged 4 commits into from
Nov 11, 2025
Merged

Add YouTube Shorts section with split layout and auto-play #36

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d876a40
Initial plan
Copilot Nov 11, 2025
c7524dd
Add video type field and update backend model to support shorts
Copilot Nov 11, 2025
a625d6c
Fix video type not being saved - add videoType to API calls
Copilot Nov 11, 2025
bda2509
style: improve layout and responsiveness of shorts section in VideosPage
castellbranco Nov 11, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion backend/app/models/video.py
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
from typing import Optional
from typing import Literal, Optional

from pydantic import BaseModel, ConfigDict

Expand All @@ -10,6 +10,7 @@ class VideoHighlight(BaseModel):
date: str
video_url: Optional[str] = None
thumbnail_url: Optional[str] = None
video_type: Optional[Literal["regular", "short"]] = "regular"

Copilot AI Nov 11, 2025

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The documentation in agents/ directory has not been updated to reflect the new video_type field in the VideoHighlight model. The documentation shows the old schema without the videoType field. Consider updating the documentation files (AGENTS.md, CLAUDE.md, GEMINI.md) to include the new optional videoType?: "regular" | "short" field in the VideoHighlight interface.

Copilot uses AI. Check for mistakes.

model_config = ConfigDict(
json_schema_extra={
Expand All @@ -19,6 +20,7 @@ class VideoHighlight(BaseModel):
"date": "2025-11-08",
"video_url": "https://youtube.com/watch?v=...",
"thumbnail_url": "https://example.com/thumbnail.jpg",
"video_type": "regular",
}
}
)
8 changes: 7 additions & 1 deletion backend/app/services/video_service.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,9 @@ def get_all_videos(self) -> List[VideoHighlight]:
"date": 1,
"video_url": 1,
"thumbnail_url": 1,
"video_type": 1,
},
)
).sort("date", -1)

Copilot AI Nov 11, 2025

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The get_all_videos() method sorts by date without an index. For optimal performance as the video collection grows, consider adding a MongoDB index on the date field. This will significantly improve query performance, especially with the descending sort operation. Add an index creation in your database initialization: db.videos.create_index([("date", -1)]).

Copilot uses AI. Check for mistakes.
)
results: List[VideoHighlight] = []
for d in docs:
Expand All @@ -34,6 +35,7 @@ def get_all_videos(self) -> List[VideoHighlight]:
date=d.get("date"),
video_url=d.get("video_url"),
thumbnail_url=d.get("thumbnail_url"),
video_type=d.get("video_type", "regular"),
)
results.append(vid)
return results
Expand All @@ -52,6 +54,7 @@ def get_video_by_id(self, video_id: str) -> Optional[VideoHighlight]:
"date": 1,
"video_url": 1,
"thumbnail_url": 1,
"video_type": 1,
},
)
if not doc:
Expand All @@ -63,6 +66,7 @@ def get_video_by_id(self, video_id: str) -> Optional[VideoHighlight]:
date=doc.get("date"),
video_url=doc.get("video_url"),
thumbnail_url=doc.get("thumbnail_url"),
video_type=doc.get("video_type", "regular"),
)

doc = self.videos_collection.find_one(
Expand All @@ -74,6 +78,7 @@ def get_video_by_id(self, video_id: str) -> Optional[VideoHighlight]:
"date": 1,
"video_url": 1,
"thumbnail_url": 1,
"video_type": 1,
},
)
if not doc:
Expand All @@ -85,6 +90,7 @@ def get_video_by_id(self, video_id: str) -> Optional[VideoHighlight]:
date=doc.get("date"),
video_url=doc.get("video_url"),
thumbnail_url=doc.get("thumbnail_url"),
video_type=doc.get("video_type", "regular"),
)

def create_video(self, video: VideoHighlight) -> VideoHighlight:
Expand Down
50 changes: 40 additions & 10 deletions src/components/admin/VideoManagement.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,13 @@ import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import { Card } from "@/components/ui/card";
import { Plus, Trash, Pencil, VideoCamera } from "@phosphor-icons/react";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import {
AlertDialog,
AlertDialogTrigger,
Expand Down Expand Up @@ -33,6 +40,7 @@ export default function VideoManagement() {
date: new Date().toISOString().split("T")[0],
videoUrl: "",
thumbnailUrl: "",
videoType: "regular" as "regular" | "short",
});

// Site links editable in admin. Initialize with stable defaults to avoid
Expand All @@ -51,6 +59,7 @@ export default function VideoManagement() {
date: new Date().toISOString().split("T")[0],
videoUrl: "",
thumbnailUrl: "",
videoType: "regular",
});
setEditingId(null);
};
Expand Down Expand Up @@ -95,6 +104,7 @@ export default function VideoManagement() {
date: video.date,
videoUrl: video.videoUrl,
thumbnailUrl: video.thumbnailUrl || "",
videoType: video.videoType || "regular",
});
setEditingId(video.id);
};
Expand All @@ -121,6 +131,7 @@ export default function VideoManagement() {
date: formData.date,
videoUrl: formData.videoUrl,
thumbnailUrl: formData.thumbnailUrl || undefined,
videoType: formData.videoType,
});
toast.success("Video updated successfully");
} else {
Expand All @@ -130,6 +141,7 @@ export default function VideoManagement() {
date: formData.date,
videoUrl: formData.videoUrl,
thumbnailUrl: formData.thumbnailUrl || undefined,
videoType: formData.videoType,
});
toast.success("Video added successfully");
}
Expand Down Expand Up @@ -271,20 +283,38 @@ export default function VideoManagement() {
/>
</div>
<div className="space-y-2">
<Label htmlFor="videoUrl">Video URL *</Label>
<Input
id="videoUrl"
type="url"
value={formData.videoUrl}
onChange={(e) =>
setFormData({ ...formData, videoUrl: e.target.value })
<Label htmlFor="videoType">Video Type *</Label>
<Select
value={formData.videoType}
onValueChange={(value: "regular" | "short") =>
setFormData({ ...formData, videoType: value })
}
placeholder="https://youtube.com/watch?v=..."
required
/>
>
<SelectTrigger id="videoType" className="w-full">
<SelectValue placeholder="Select video type" />
</SelectTrigger>
<SelectContent>
<SelectItem value="regular">Regular Video</SelectItem>
<SelectItem value="short">Short (Vertical)</SelectItem>
</SelectContent>
</Select>
</div>
</div>

<div className="space-y-2">
<Label htmlFor="videoUrl">Video URL *</Label>
<Input
id="videoUrl"
type="url"
value={formData.videoUrl}
onChange={(e) =>
setFormData({ ...formData, videoUrl: e.target.value })
}
placeholder="https://youtube.com/watch?v=..."
required
/>
</div>

<div className="space-y-2">
<Label htmlFor="thumbnailUrl">Thumbnail URL</Label>
<Input
Expand Down
Loading
Loading