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

Improves video previews with a darker theme and user-specific data

Browse Source 
Updates thumbnail generation with a dark theme, shadow effects, and fetches a specific user ID.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 50814a1e-92e4-4968-856f-7bc7eedf5e8f
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/50814a1e-92e4-4968-856f-7bc7eedf5e8f/F0D1tCj
This commit is contained in:
sebastjanartic 2025-08-04 20:06:47 +00:00
parent e02d52998a
commit 0465cfe7d3
3 changed files with 23 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/hooks/use-favorites.ts
View File

@ -2,7 +2,7 @@ import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { apiRequest } from "@/lib/queryClient"; import { apiRequest } from "@/lib/queryClient";
import { useToast } from "@/hooks/use-toast"; import { useToast } from "@/hooks/use-toast";
const CURRENT_USER_ID = "test-user-123"; // For demo purposes const CURRENT_USER_ID = "5311f8eb-aba2-4f58-96bf-0ca99fe5907c"; // Test user from database
export function useFavorites() { export function useFavorites() {
const queryClient = useQueryClient(); const queryClient = useQueryClient();

2
client/src/hooks/use-playlists.ts
View File

@ -3,7 +3,7 @@ import { apiRequest } from "@/lib/queryClient";
import { useToast } from "@/hooks/use-toast"; import { useToast } from "@/hooks/use-toast";
import type { Playlist, InsertPlaylist } from "@shared/schema"; import type { Playlist, InsertPlaylist } from "@shared/schema";
const CURRENT_USER_ID = "test-user-123"; // For demo purposes const CURRENT_USER_ID = "5311f8eb-aba2-4f58-96bf-0ca99fe5907c"; // Test user from database
export function usePlaylists() { export function usePlaylists() {
const queryClient = useQueryClient(); const queryClient = useQueryClient();

29
server/routes.ts
View File

@ -157,28 +157,41 @@ export async function registerRoutes(app: Express): Promise<Server> {
<svg width="400" height="225" xmlns="http://www.w3.org/2000/svg"> <svg width="400" height="225" xmlns="http://www.w3.org/2000/svg">
<defs> <defs>
<linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="100%"> <linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#1e40af;stop-opacity:1" /> <stop offset="0%" style="stop-color:#374151;stop-opacity:1" />
<stop offset="100%" style="stop-color:#1e3a8a;stop-opacity:1" /> <stop offset="100%" style="stop-color:#1f2937;stop-opacity:1" />
</linearGradient> </linearGradient>
<filter id="shadow">
<feDropShadow dx="2" dy="2" stdDeviation="3"/>
</filter>
</defs> </defs>
<rect width="400" height="225" fill="url(#grad)" /> <rect width="400" height="225" fill="url(#grad)" />
<!-- Video camera icon background -->
<circle cx="120" cy="80" r="25" fill="rgba(255,255,255,0.1)" />
<!-- Camera body -->
<rect x="108" y="72" width="18" height="12" rx="2" fill="rgba(255,255,255,0.6)" />
<!-- Camera lens -->
<circle cx="114" cy="78" r="3" fill="#374151" />
<!-- Camera viewfinder -->
<rect x="126" y="75" width="6" height="4" fill="rgba(255,255,255,0.6)" />
<!-- Play button circle --> <!-- Play button circle -->
<circle cx="200" cy="112" r="35" fill="rgba(255,255,255,0.9)" /> <circle cx="200" cy="112" r="35" fill="rgba(255,255,255,0.9)" filter="url(#shadow)" />
<!-- Play button triangle --> <!-- Play button triangle -->
<polygon points="188,97 188,127 218,112" fill="#1e40af" /> <polygon points="188,97 188,127 218,112" fill="#374151" />
<!-- Title background --> <!-- Title background -->
<rect x="0" y="175" width="400" height="50" fill="rgba(0,0,0,0.7)" /> <rect x="0" y="175" width="400" height="50" fill="rgba(0,0,0,0.8)" />
<!-- Title text --> <!-- Title text -->
<text x="20" y="200" fill="white" font-family="Arial, sans-serif" font-size="14" font-weight="bold">${displayTitle}</text> <text x="20" y="200" fill="white" font-family="Arial, sans-serif" font-size="14" font-weight="bold">${displayTitle}</text>
<!-- Duration --> <!-- Duration -->
${duration ? `<text x="370" y="200" fill="white" font-family="Arial, sans-serif" font-size="12" text-anchor="end">${duration}</text>` : ''} ${duration ? `<rect x="350" y="185" width="35" height="20" rx="3" fill="rgba(0,0,0,0.8)"/>
<text x="367" y="198" fill="white" font-family="Arial, sans-serif" font-size="11" text-anchor="middle">${duration}</text>` : ''}
<!-- Time indicator --> <!-- Video type indicator -->
<text x="20" y="25" fill="rgba(255,255,255,0.8)" font-family="Arial, sans-serif" font-size="12">t=${timeStamp}s</text> <text x="20" y="25" fill="rgba(255,255,255,0.7)" font-family="Arial, sans-serif" font-size="11">VIDEO</text>
</svg> </svg>
`; `;