sebastjan/videofolxtv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add search functionality to recommended videos sidebar

Browse Source 
Integrate a search input and filtering logic into the VideoPage component to allow users to search within the recommended videos section.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: d7424866-83d1-4486-a212-ac12b4c7becf
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/d7424866-83d1-4486-a212-ac12b4c7becf/qHixa60
This commit is contained in:
sebastjanartic 2025-08-28 17:08:38 +00:00
parent 44d6f571a5
commit 789e428d16
1 changed files with 38 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
client/src/pages/VideoPage.tsx
View File

@ -31,7 +31,8 @@ const formatDate = (date: Date | string): string => {
});
};
import { Button } from "@/components/ui/button";
import { Share2, X, Edit3 } from "lucide-react";
import { Input } from "@/components/ui/input";
import { Share2, X, Edit3, Search } from "lucide-react";
import { apiRequest } from "@/lib/queryClient";
import {
FacebookShareButton,
@ -52,6 +53,7 @@ export default function VideoPage() {
const [, params] = useRoute("/video/:id");
const videoId = params?.id;
const [showShareMenu, setShowShareMenu] = useState(false);
const [sidebarSearchQuery, setSidebarSearchQuery] = useState("");
// Fetch current video
const { data: currentVideo, isLoading: videoLoading } = useQuery<Video>({
@ -67,7 +69,15 @@ export default function VideoPage() {
enabled: !!videoId,
});
const recommendedVideos = recommendedResponse?.videos?.filter(v => v.id !== videoId) || [];
// Filter recommended videos based on search and exclude current video
const filteredRecommendedVideos = (recommendedResponse?.videos || [])
.filter(v => v.id !== videoId)
.filter(video => {
if (!sidebarSearchQuery || sidebarSearchQuery.length < 2) return true;
const searchLower = sidebarSearchQuery.toLowerCase();
return video.title.toLowerCase().includes(searchLower) ||
video.description?.toLowerCase().includes(searchLower);
});
@ -329,10 +339,32 @@ export default function VideoPage() {
{/* Recommended videos sidebar */}
<div className="lg:w-96">
<h2 className="text-lg font-semibold text-bunny-light mb-4">Recommended Videos</h2>
<div className="flex items-center justify-between mb-4">
<h2 className="text-lg font-semibold text-bunny-light">Recommended Videos</h2>
</div>
{/* Search input for recommended videos */}
<div className="relative mb-4">
<Input
type="search"
placeholder="Search videos..."
value={sidebarSearchQuery}
onChange={(e) => setSidebarSearchQuery(e.target.value)}
className="bg-bunny-gray/50 border-bunny-gray/70 text-white placeholder-gray-400 pr-10 focus:border-bunny-blue transition-colors"
data-testid="input-sidebar-search"
/>
<Search className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
</div>
<div className="space-y-3">
{recommendedVideos.slice(0, 10).map((video) => (
{filteredRecommendedVideos.length === 0 && sidebarSearchQuery.length >= 2 ? (
<div className="text-center py-8 text-bunny-muted">
<Search className="w-12 h-12 mx-auto mb-2 opacity-50" />
<p>No videos found for "{sidebarSearchQuery}"</p>
<p className="text-xs mt-1">Try different keywords</p>
</div>
) : (
filteredRecommendedVideos.slice(0, 10).map((video) => (
<div
key={video.id}
onClick={() => window.location.href = `/video/${video.id}`}
@ -378,7 +410,8 @@ export default function VideoPage() {
</div>
</div>
</div>
))}
))
)}
</div>
</div>
</div>