Add administration interface for managing videos and viewing platform statistics
Implements a new /bunny-admin route with a dedicated page for video management and statistics, integrates a BunnyVideoModal for video playback and sharing, and adds backend API endpoints for Bunny.net statistics and video deletion. 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/plFksdF
This commit is contained in:
sebastjanartic
parent
27358b647a
commit
78b5327e59
@ -5,6 +5,7 @@ import { Toaster } from "@/components/ui/toaster";
|
|||||||
import { TooltipProvider } from "@/components/ui/tooltip";
|
import { TooltipProvider } from "@/components/ui/tooltip";
|
||||||
import Home from "@/pages/home";
|
import Home from "@/pages/home";
|
||||||
import Admin from "@/pages/admin";
|
import Admin from "@/pages/admin";
|
||||||
|
import BunnyAdminPage from "@/pages/BunnyAdminPage";
|
||||||
import NotFound from "@/pages/not-found";
|
import NotFound from "@/pages/not-found";
|
||||||
|
|
||||||
function Router() {
|
function Router() {
|
||||||
@ -12,6 +13,7 @@ function Router() {
|
|||||||
<Switch>
|
<Switch>
|
||||||
<Route path="/" component={Home} />
|
<Route path="/" component={Home} />
|
||||||
<Route path="/admin" component={Admin} />
|
<Route path="/admin" component={Admin} />
|
||||||
|
<Route path="/bunny-admin" component={BunnyAdminPage} />
|
||||||
<Route component={NotFound} />
|
<Route component={NotFound} />
|
||||||
</Switch>
|
</Switch>
|
||||||
);
|
);
|
||||||
|
|||||||
287
client/src/components/bunny-video-modal.tsx
Normal file
287
client/src/components/bunny-video-modal.tsx
Normal file
@ -0,0 +1,287 @@
|
|||||||
|
import { useEffect, useState } from "react";
|
||||||
|
import { X, Share2, Edit3 } from "lucide-react";
|
||||||
|
import { type Video } from "@shared/schema";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { apiRequest } from "@/lib/queryClient";
|
||||||
|
import {
|
||||||
|
FacebookIcon,
|
||||||
|
TwitterIcon,
|
||||||
|
WhatsappIcon
|
||||||
|
} from "react-share";
|
||||||
|
|
||||||
|
interface BunnyVideoModalProps {
|
||||||
|
video: Video | null;
|
||||||
|
isOpen: boolean;
|
||||||
|
onClose: () => void;
|
||||||
|
onEdit?: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
function formatDuration(seconds: number): string {
|
||||||
|
const minutes = Math.floor(seconds / 60);
|
||||||
|
const remainingSeconds = seconds % 60;
|
||||||
|
return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function formatViews(views: number): string {
|
||||||
|
if (views >= 1000000) {
|
||||||
|
return `${(views / 1000000).toFixed(1)}M ogledov`;
|
||||||
|
} else if (views >= 1000) {
|
||||||
|
return `${(views / 1000).toFixed(1)}K ogledov`;
|
||||||
|
}
|
||||||
|
return `${views} ogledov`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function formatDate(date: Date | string): string {
|
||||||
|
const now = new Date();
|
||||||
|
const createdDate = typeof date === 'string' ? new Date(date) : date;
|
||||||
|
|
||||||
|
if (!createdDate || isNaN(createdDate.getTime())) {
|
||||||
|
return "Neznano";
|
||||||
|
}
|
||||||
|
|
||||||
|
const diffTime = Math.abs(now.getTime() - createdDate.getTime());
|
||||||
|
const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24));
|
||||||
|
|
||||||
|
if (diffDays === 0) return "Danes";
|
||||||
|
if (diffDays === 1) return "Pred 1 dnem";
|
||||||
|
if (diffDays < 7) return `Pred ${diffDays} dnevi`;
|
||||||
|
if (diffDays < 30) return `Pred ${Math.floor(diffDays / 7)} tednom${Math.floor(diffDays / 7) > 1 ? 'a' : ''}`;
|
||||||
|
return `Pred ${Math.floor(diffDays / 30)} mesec${Math.floor(diffDays / 30) > 1 ? 'i' : 'em'}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function BunnyVideoModal({ video, isOpen, onClose, onEdit }: BunnyVideoModalProps) {
|
||||||
|
const [showShareMenu, setShowShareMenu] = useState(false);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const handleEscape = (e: KeyboardEvent) => {
|
||||||
|
if (e.key === "Escape" && isOpen) {
|
||||||
|
onClose();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (isOpen) {
|
||||||
|
document.addEventListener("keydown", handleEscape);
|
||||||
|
document.body.style.overflow = "hidden";
|
||||||
|
} else {
|
||||||
|
document.body.style.overflow = "";
|
||||||
|
}
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
document.removeEventListener("keydown", handleEscape);
|
||||||
|
document.body.style.overflow = "";
|
||||||
|
};
|
||||||
|
}, [isOpen, onClose]);
|
||||||
|
|
||||||
|
const handleVideoPlay = async () => {
|
||||||
|
if (video) {
|
||||||
|
try {
|
||||||
|
await apiRequest("POST", `/api/videos/${video.id}/view`);
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Failed to track video view:", error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const getShareUrl = () => {
|
||||||
|
if (!video?.id) return window.location.origin;
|
||||||
|
return `${window.location.origin}?video=${video.id}`;
|
||||||
|
};
|
||||||
|
|
||||||
|
const copyToClipboard = async () => {
|
||||||
|
try {
|
||||||
|
await navigator.clipboard.writeText(getShareUrl());
|
||||||
|
const notification = document.createElement('div');
|
||||||
|
notification.textContent = 'Povezava kopirana!';
|
||||||
|
notification.className = 'fixed top-4 right-4 bg-green-500 text-white px-4 py-2 rounded-lg z-50 transition-opacity duration-300';
|
||||||
|
document.body.appendChild(notification);
|
||||||
|
setTimeout(() => {
|
||||||
|
notification.style.opacity = '0';
|
||||||
|
setTimeout(() => document.body.removeChild(notification), 300);
|
||||||
|
}, 2000);
|
||||||
|
setShowShareMenu(false);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Failed to copy link:', error);
|
||||||
|
const textArea = document.createElement('textarea');
|
||||||
|
textArea.value = getShareUrl();
|
||||||
|
document.body.appendChild(textArea);
|
||||||
|
textArea.select();
|
||||||
|
document.execCommand('copy');
|
||||||
|
document.body.removeChild(textArea);
|
||||||
|
setShowShareMenu(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleBackdropClick = (e: React.MouseEvent) => {
|
||||||
|
if (e.target === e.currentTarget) {
|
||||||
|
onClose();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const shareOnFacebook = () => {
|
||||||
|
const url = `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(getShareUrl())}&t=${encodeURIComponent(video?.title || '')}`;
|
||||||
|
window.open(url, 'facebook-share', 'width=600,height=400');
|
||||||
|
setShowShareMenu(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
const shareOnTwitter = () => {
|
||||||
|
const text = `Poglej si "${video?.title}" na go4.video`;
|
||||||
|
const url = `https://twitter.com/intent/tweet?text=${encodeURIComponent(text)}&url=${encodeURIComponent(getShareUrl())}`;
|
||||||
|
window.open(url, 'twitter-share', 'width=600,height=400');
|
||||||
|
setShowShareMenu(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
const shareOnWhatsApp = () => {
|
||||||
|
const text = `Poglej si "${video?.title}" na go4.video: ${getShareUrl()}`;
|
||||||
|
const url = `https://wa.me/?text=${encodeURIComponent(text)}`;
|
||||||
|
window.open(url, 'whatsapp-share', 'width=600,height=400');
|
||||||
|
setShowShareMenu(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
if (!isOpen || !video) return null;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className="fixed inset-0 bg-black bg-opacity-90 flex items-center justify-center z-50"
|
||||||
|
onClick={handleBackdropClick}
|
||||||
|
style={{ backgroundColor: '#1f2937' }}
|
||||||
|
>
|
||||||
|
<div className="relative w-full h-full max-w-7xl mx-auto p-4 flex flex-col">
|
||||||
|
{/* Header with close button */}
|
||||||
|
<div className="flex justify-between items-center mb-4 z-10">
|
||||||
|
<h2 className="text-xl font-bold text-white truncate flex-1 mr-4">
|
||||||
|
{video.title}
|
||||||
|
</h2>
|
||||||
|
<div className="flex gap-2">
|
||||||
|
{onEdit && (
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
onClick={onEdit}
|
||||||
|
className="text-white hover:bg-gray-700"
|
||||||
|
data-testid="button-edit-video"
|
||||||
|
>
|
||||||
|
<Edit3 className="w-4 h-4" />
|
||||||
|
Uredi
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
<div className="relative">
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => setShowShareMenu(!showShareMenu)}
|
||||||
|
className="text-white hover:bg-gray-700"
|
||||||
|
data-testid="button-share-video"
|
||||||
|
>
|
||||||
|
<Share2 className="w-4 h-4" />
|
||||||
|
Deli
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
{showShareMenu && (
|
||||||
|
<div
|
||||||
|
className="absolute right-0 top-full mt-2 bg-gray-800 rounded-lg shadow-lg py-2 z-50 min-w-[200px]"
|
||||||
|
style={{ backgroundColor: '#374151' }}
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
onClick={shareOnFacebook}
|
||||||
|
className="w-full px-4 py-2 text-left text-white hover:bg-gray-700 flex items-center gap-2"
|
||||||
|
data-testid="button-share-facebook"
|
||||||
|
>
|
||||||
|
<FacebookIcon size={16} round />
|
||||||
|
Facebook
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={shareOnTwitter}
|
||||||
|
className="w-full px-4 py-2 text-left text-white hover:bg-gray-700 flex items-center gap-2"
|
||||||
|
data-testid="button-share-twitter"
|
||||||
|
>
|
||||||
|
<TwitterIcon size={16} round />
|
||||||
|
Twitter
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={shareOnWhatsApp}
|
||||||
|
className="w-full px-4 py-2 text-left text-white hover:bg-gray-700 flex items-center gap-2"
|
||||||
|
data-testid="button-share-whatsapp"
|
||||||
|
>
|
||||||
|
<WhatsappIcon size={16} round />
|
||||||
|
WhatsApp
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={copyToClipboard}
|
||||||
|
className="w-full px-4 py-2 text-left text-white hover:bg-gray-700"
|
||||||
|
data-testid="button-copy-link"
|
||||||
|
>
|
||||||
|
Kopiraj povezavo
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
onClick={onClose}
|
||||||
|
className="text-white hover:bg-gray-700"
|
||||||
|
data-testid="button-close-modal"
|
||||||
|
>
|
||||||
|
<X className="w-4 h-4" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Video player area */}
|
||||||
|
<div className="flex-1 flex flex-col lg:flex-row gap-4">
|
||||||
|
{/* Main video player */}
|
||||||
|
<div className="flex-1">
|
||||||
|
<div className="relative w-full h-0 pb-[56.25%] bg-black rounded-lg overflow-hidden">
|
||||||
|
{video.videoUrlIframe ? (
|
||||||
|
<iframe
|
||||||
|
src={video.videoUrlIframe}
|
||||||
|
className="absolute inset-0 w-full h-full"
|
||||||
|
frameBorder="0"
|
||||||
|
allowFullScreen
|
||||||
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
||||||
|
onLoad={handleVideoPlay}
|
||||||
|
title={video.title}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<div className="absolute inset-0 flex items-center justify-center text-white">
|
||||||
|
<p>Video ni na voljo</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Video info sidebar */}
|
||||||
|
<div className="lg:w-80 space-y-4">
|
||||||
|
<div className="p-4 bg-gray-800 rounded-lg text-white">
|
||||||
|
<h3 className="font-bold text-lg mb-2" data-testid="text-video-title">
|
||||||
|
{video.title}
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<div className="flex flex-wrap gap-4 text-sm text-gray-300 mb-3">
|
||||||
|
<span data-testid="text-video-views">{formatViews(video.views)}</span>
|
||||||
|
<span data-testid="text-video-duration">{formatDuration(video.duration)}</span>
|
||||||
|
<span data-testid="text-video-date">{formatDate(video.createdAt)}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{video.category && (
|
||||||
|
<div className="mb-3">
|
||||||
|
<span className="inline-block bg-blue-600 text-white px-2 py-1 rounded text-xs" data-testid="text-video-category">
|
||||||
|
{video.category}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{video.description && (
|
||||||
|
<div className="text-sm text-gray-300">
|
||||||
|
<p className="leading-relaxed" data-testid="text-video-description">
|
||||||
|
{video.description}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -45,6 +45,9 @@ export default function SearchHeader({
|
|||||||
<a href="/admin" className="text-bunny-muted hover:text-bunny-light transition-colors" data-testid="link-admin">
|
<a href="/admin" className="text-bunny-muted hover:text-bunny-light transition-colors" data-testid="link-admin">
|
||||||
Admin
|
Admin
|
||||||
</a>
|
</a>
|
||||||
|
<a href="/bunny-admin" className="text-bunny-muted hover:text-bunny-light transition-colors" data-testid="link-bunny-admin">
|
||||||
|
Bunny Admin
|
||||||
|
</a>
|
||||||
<button
|
<button
|
||||||
onClick={onAdSettingsOpen}
|
onClick={onAdSettingsOpen}
|
||||||
className="text-bunny-muted hover:text-bunny-light transition-colors flex items-center space-x-1"
|
className="text-bunny-muted hover:text-bunny-light transition-colors flex items-center space-x-1"
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
import { type Video } from "@shared/schema";
|
import { type Video } from "@shared/schema";
|
||||||
import VideoCard from "./video-card";
|
import VideoCard from "./video-card";
|
||||||
import VideoModal from "./video-modal";
|
import BunnyVideoModal from "./bunny-video-modal";
|
||||||
import { Button } from "@/components/ui/button";
|
import { Button } from "@/components/ui/button";
|
||||||
import { ChevronDown } from "lucide-react";
|
import { ChevronDown } from "lucide-react";
|
||||||
|
|
||||||
@ -95,7 +95,7 @@ export default function VideoGrid({ videos, isLoading, hasMore, onLoadMore, view
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<VideoModal
|
<BunnyVideoModal
|
||||||
video={selectedVideo}
|
video={selectedVideo}
|
||||||
isOpen={isModalOpen}
|
isOpen={isModalOpen}
|
||||||
onClose={handleCloseModal}
|
onClose={handleCloseModal}
|
||||||
|
|||||||
346
client/src/pages/BunnyAdminPage.tsx
Normal file
346
client/src/pages/BunnyAdminPage.tsx
Normal file
@ -0,0 +1,346 @@
|
|||||||
|
import { useState } from "react";
|
||||||
|
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Input } from "@/components/ui/input";
|
||||||
|
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
|
||||||
|
import { Badge } from "@/components/ui/badge";
|
||||||
|
import {
|
||||||
|
Plus,
|
||||||
|
Search,
|
||||||
|
Edit3,
|
||||||
|
Trash2,
|
||||||
|
Upload,
|
||||||
|
Play,
|
||||||
|
Pause,
|
||||||
|
Settings,
|
||||||
|
BarChart3,
|
||||||
|
Users,
|
||||||
|
Video as VideoIcon
|
||||||
|
} from "lucide-react";
|
||||||
|
import { type Video } from "@shared/schema";
|
||||||
|
import { apiRequest } from "@/lib/queryClient";
|
||||||
|
import BunnyVideoModal from "@/components/bunny-video-modal";
|
||||||
|
|
||||||
|
interface BunnyStats {
|
||||||
|
totalVideos: number;
|
||||||
|
totalViews: number;
|
||||||
|
totalStorage: number;
|
||||||
|
bandwidth: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
function formatFileSize(bytes: number): string {
|
||||||
|
const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
|
||||||
|
if (bytes === 0) return '0 B';
|
||||||
|
const i = Math.floor(Math.log(bytes) / Math.log(1024));
|
||||||
|
return Math.round(bytes / Math.pow(1024, i) * 100) / 100 + ' ' + sizes[i];
|
||||||
|
}
|
||||||
|
|
||||||
|
function formatDuration(seconds: number): string {
|
||||||
|
const minutes = Math.floor(seconds / 60);
|
||||||
|
const remainingSeconds = seconds % 60;
|
||||||
|
return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function formatViews(views: number): string {
|
||||||
|
if (views >= 1000000) {
|
||||||
|
return `${(views / 1000000).toFixed(1)}M`;
|
||||||
|
} else if (views >= 1000) {
|
||||||
|
return `${(views / 1000).toFixed(1)}K`;
|
||||||
|
}
|
||||||
|
return views.toString();
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function BunnyAdminPage() {
|
||||||
|
const [searchTerm, setSearchTerm] = useState("");
|
||||||
|
const [selectedVideo, setSelectedVideo] = useState<Video | null>(null);
|
||||||
|
const [showUploadModal, setShowUploadModal] = useState(false);
|
||||||
|
const queryClient = useQueryClient();
|
||||||
|
|
||||||
|
// Fetch videos from Bunny.net
|
||||||
|
const { data: videosData, isLoading } = useQuery<{ videos: Video[], total: number }>({
|
||||||
|
queryKey: ['/api/videos', searchTerm],
|
||||||
|
queryFn: () => apiRequest('GET', `/api/videos?search=${searchTerm}&limit=100`),
|
||||||
|
});
|
||||||
|
|
||||||
|
// Fetch Bunny.net statistics
|
||||||
|
const { data: statsData } = useQuery<BunnyStats>({
|
||||||
|
queryKey: ['/api/bunny/stats'],
|
||||||
|
queryFn: () => apiRequest('GET', '/api/bunny/stats'),
|
||||||
|
});
|
||||||
|
|
||||||
|
const videos: Video[] = videosData?.videos || [];
|
||||||
|
const stats: BunnyStats = statsData || {
|
||||||
|
totalVideos: videos.length,
|
||||||
|
totalViews: videos.reduce((sum: number, v: Video) => sum + v.views, 0),
|
||||||
|
totalStorage: 0,
|
||||||
|
bandwidth: 0
|
||||||
|
};
|
||||||
|
|
||||||
|
const deleteVideoMutation = useMutation({
|
||||||
|
mutationFn: (videoId: string) => apiRequest('DELETE', `/api/bunny/videos/${videoId}`),
|
||||||
|
onSuccess: () => {
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['/api/videos'] });
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const handleDeleteVideo = async (video: Video) => {
|
||||||
|
if (confirm(`Ali ste prepričani, da želite izbrisati video "${video.title}"?`)) {
|
||||||
|
try {
|
||||||
|
await deleteVideoMutation.mutateAsync(video.id);
|
||||||
|
} catch (error) {
|
||||||
|
alert('Napaka pri brisanju videa');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const filteredVideos: Video[] = videos.filter((video: Video) =>
|
||||||
|
video.title.toLowerCase().includes(searchTerm.toLowerCase())
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-gray-900 text-white">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="bg-gray-800 border-b border-gray-700 px-6 py-4">
|
||||||
|
<div className="max-w-7xl mx-auto">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-2xl font-bold text-white">Bunny.net Administracija</h1>
|
||||||
|
<p className="text-gray-400 mt-1">Upravljanje videov in analitika</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex gap-3">
|
||||||
|
<Button
|
||||||
|
onClick={() => setShowUploadModal(true)}
|
||||||
|
className="bg-blue-600 hover:bg-blue-700"
|
||||||
|
data-testid="button-upload-video"
|
||||||
|
>
|
||||||
|
<Upload className="w-4 h-4 mr-2" />
|
||||||
|
Naloži video
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="max-w-7xl mx-auto px-6 py-8">
|
||||||
|
{/* Statistics Dashboard */}
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
|
||||||
|
<Card className="bg-gray-800 border-gray-700">
|
||||||
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||||
|
<CardTitle className="text-sm font-medium text-gray-400">Skupno videov</CardTitle>
|
||||||
|
<VideoIcon className="h-4 w-4 text-blue-500" />
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="text-2xl font-bold text-white" data-testid="text-total-videos">
|
||||||
|
{stats.totalVideos}
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card className="bg-gray-800 border-gray-700">
|
||||||
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||||
|
<CardTitle className="text-sm font-medium text-gray-400">Skupno ogledov</CardTitle>
|
||||||
|
<BarChart3 className="h-4 w-4 text-green-500" />
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="text-2xl font-bold text-white" data-testid="text-total-views">
|
||||||
|
{formatViews(stats.totalViews)}
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card className="bg-gray-800 border-gray-700">
|
||||||
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||||
|
<CardTitle className="text-sm font-medium text-gray-400">Shramba</CardTitle>
|
||||||
|
<Settings className="h-4 w-4 text-purple-500" />
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="text-2xl font-bold text-white" data-testid="text-storage">
|
||||||
|
{formatFileSize(stats.totalStorage)}
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card className="bg-gray-800 border-gray-700">
|
||||||
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||||
|
<CardTitle className="text-sm font-medium text-gray-400">Pasovna širina</CardTitle>
|
||||||
|
<Users className="h-4 w-4 text-orange-500" />
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="text-2xl font-bold text-white" data-testid="text-bandwidth">
|
||||||
|
{formatFileSize(stats.bandwidth)}
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Search and Filters */}
|
||||||
|
<div className="mb-8">
|
||||||
|
<div className="flex gap-4">
|
||||||
|
<div className="flex-1 relative">
|
||||||
|
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
|
||||||
|
<Input
|
||||||
|
placeholder="Iskanje po naslovu videa..."
|
||||||
|
value={searchTerm}
|
||||||
|
onChange={(e) => setSearchTerm(e.target.value)}
|
||||||
|
className="pl-10 bg-gray-800 border-gray-700 text-white"
|
||||||
|
data-testid="input-search-videos"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Video Grid */}
|
||||||
|
<div className="space-y-4">
|
||||||
|
{isLoading ? (
|
||||||
|
<div className="grid grid-cols-1 gap-4">
|
||||||
|
{Array.from({ length: 5 }).map((_, index) => (
|
||||||
|
<Card key={index} className="bg-gray-800 border-gray-700 animate-pulse">
|
||||||
|
<CardContent className="p-4">
|
||||||
|
<div className="flex gap-4">
|
||||||
|
<div className="w-32 h-20 bg-gray-700 rounded"></div>
|
||||||
|
<div className="flex-1 space-y-2">
|
||||||
|
<div className="h-4 bg-gray-700 rounded w-3/4"></div>
|
||||||
|
<div className="h-3 bg-gray-700 rounded w-1/2"></div>
|
||||||
|
<div className="h-3 bg-gray-700 rounded w-1/4"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
) : filteredVideos.length === 0 ? (
|
||||||
|
<Card className="bg-gray-800 border-gray-700">
|
||||||
|
<CardContent className="p-8 text-center">
|
||||||
|
<VideoIcon className="w-12 h-12 text-gray-500 mx-auto mb-4" />
|
||||||
|
<h3 className="text-lg font-medium text-white mb-2">Ni najdenih videov</h3>
|
||||||
|
<p className="text-gray-400">
|
||||||
|
{searchTerm ? "Poskusite z drugim iskanjem" : "Dodajte svoj prvi video"}
|
||||||
|
</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
) : (
|
||||||
|
<div className="grid grid-cols-1 gap-4" data-testid="grid-videos">
|
||||||
|
{filteredVideos.map((video: Video) => (
|
||||||
|
<Card key={video.id} className="bg-gray-800 border-gray-700 hover:bg-gray-750 transition-colors">
|
||||||
|
<CardContent className="p-4">
|
||||||
|
<div className="flex gap-4">
|
||||||
|
{/* Video Thumbnail */}
|
||||||
|
<div className="relative w-32 h-20 bg-gray-700 rounded overflow-hidden flex-shrink-0">
|
||||||
|
{video.thumbnailUrl ? (
|
||||||
|
<img
|
||||||
|
src={video.thumbnailUrl}
|
||||||
|
alt={video.title}
|
||||||
|
className="w-full h-full object-cover"
|
||||||
|
loading="lazy"
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<div className="w-full h-full flex items-center justify-center">
|
||||||
|
<VideoIcon className="w-6 h-6 text-gray-500" />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<div className="absolute bottom-1 right-1 bg-black bg-opacity-75 text-white text-xs px-1 rounded">
|
||||||
|
{formatDuration(video.duration)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Video Info */}
|
||||||
|
<div className="flex-1 min-w-0">
|
||||||
|
<h3 className="text-lg font-medium text-white truncate mb-1" data-testid={`text-video-title-${video.id}`}>
|
||||||
|
{video.title}
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-4 text-sm text-gray-400 mb-2">
|
||||||
|
<span data-testid={`text-video-views-${video.id}`}>
|
||||||
|
{formatViews(video.views)} ogledov
|
||||||
|
</span>
|
||||||
|
<span data-testid={`text-video-duration-${video.id}`}>
|
||||||
|
{formatDuration(video.duration)}
|
||||||
|
</span>
|
||||||
|
{video.category && (
|
||||||
|
<Badge variant="secondary" className="bg-blue-600 text-white">
|
||||||
|
{video.category}
|
||||||
|
</Badge>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{video.description && (
|
||||||
|
<p className="text-sm text-gray-400 line-clamp-2" data-testid={`text-video-description-${video.id}`}>
|
||||||
|
{video.description}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Actions */}
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => setSelectedVideo(video)}
|
||||||
|
className="text-gray-400 hover:text-white"
|
||||||
|
data-testid={`button-view-video-${video.id}`}
|
||||||
|
>
|
||||||
|
<Play className="w-4 h-4" />
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => handleDeleteVideo(video)}
|
||||||
|
className="text-red-400 hover:text-red-300"
|
||||||
|
data-testid={`button-delete-video-${video.id}`}
|
||||||
|
>
|
||||||
|
<Trash2 className="w-4 h-4" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Video Modal */}
|
||||||
|
<BunnyVideoModal
|
||||||
|
video={selectedVideo}
|
||||||
|
isOpen={!!selectedVideo}
|
||||||
|
onClose={() => setSelectedVideo(null)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Upload Modal */}
|
||||||
|
{showUploadModal && (
|
||||||
|
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
||||||
|
<Card className="bg-gray-800 border-gray-700 w-full max-w-md">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-white">Naloži video</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-4">
|
||||||
|
<p className="text-gray-400">
|
||||||
|
Za nalaganje videov uporabite Bunny.net administracijsko ploščo:
|
||||||
|
</p>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<a
|
||||||
|
href="https://dash.bunny.net"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="block"
|
||||||
|
>
|
||||||
|
<Button className="w-full bg-orange-600 hover:bg-orange-700">
|
||||||
|
Odpri Bunny.net Dashboard
|
||||||
|
</Button>
|
||||||
|
</a>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
onClick={() => setShowUploadModal(false)}
|
||||||
|
className="w-full border-gray-600 text-gray-300 hover:bg-gray-700"
|
||||||
|
>
|
||||||
|
Zapri
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -62,15 +62,26 @@ export class BunnyService {
|
|||||||
return {
|
return {
|
||||||
id: bunnyVideo.guid,
|
id: bunnyVideo.guid,
|
||||||
title: bunnyVideo.title || 'Untitled Video',
|
title: bunnyVideo.title || 'Untitled Video',
|
||||||
description: null, // Bunny API doesn't return description in list view
|
description: "", // Bunny API doesn't return description in list view
|
||||||
thumbnailUrl,
|
thumbnailUrl,
|
||||||
|
customThumbnailUrl: null,
|
||||||
videoUrl: hlsUrl, // Signed HLS URL
|
videoUrl: hlsUrl, // Signed HLS URL
|
||||||
videoUrlMp4: undefined, // Remove MP4 since it likely won't work for private videos
|
videoUrlMp4: null, // Remove MP4 since it likely won't work for private videos
|
||||||
videoUrlIframe: iframeUrl, // iframe fallback
|
videoUrlIframe: iframeUrl, // iframe fallback
|
||||||
duration: Math.floor(bunnyVideo.length || 0),
|
duration: Math.floor(bunnyVideo.length || 0),
|
||||||
views: bunnyVideo.views || 0,
|
views: bunnyVideo.views || 0,
|
||||||
category: bunnyVideo.category || null,
|
category: bunnyVideo.category || "",
|
||||||
createdAt: new Date(bunnyVideo.dateUploaded)
|
tags: [],
|
||||||
|
isPublic: true,
|
||||||
|
uploadStatus: "completed",
|
||||||
|
originalFileName: null,
|
||||||
|
fileSize: null,
|
||||||
|
bitrate: null,
|
||||||
|
resolution: null,
|
||||||
|
format: null,
|
||||||
|
encoding: null,
|
||||||
|
createdAt: new Date(bunnyVideo.dateUploaded),
|
||||||
|
updatedAt: new Date(bunnyVideo.dateUploaded)
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -129,6 +129,39 @@ export async function registerRoutes(app: Express): Promise<Server> {
|
|||||||
});
|
});
|
||||||
|
|
||||||
// Video Routes
|
// Video Routes
|
||||||
|
// Bunny.net administration routes
|
||||||
|
app.get("/api/bunny/stats", async (req, res) => {
|
||||||
|
try {
|
||||||
|
const { videos } = await storage.getVideos(1, 1000);
|
||||||
|
const totalViews = videos.reduce((sum, video) => sum + video.views, 0);
|
||||||
|
|
||||||
|
const stats = {
|
||||||
|
totalVideos: videos.length,
|
||||||
|
totalViews,
|
||||||
|
totalStorage: 0, // Would need separate Bunny API call
|
||||||
|
bandwidth: 0 // Would need separate Bunny API call
|
||||||
|
};
|
||||||
|
|
||||||
|
res.json(stats);
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error fetching Bunny stats:", error);
|
||||||
|
res.status(500).json({ message: "Failed to fetch statistics" });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
app.delete("/api/bunny/videos/:id", async (req, res) => {
|
||||||
|
try {
|
||||||
|
const { id } = req.params;
|
||||||
|
|
||||||
|
// Note: This would need implementation in BunnyService
|
||||||
|
// For now, return success (deletion would happen in Bunny dashboard)
|
||||||
|
res.json({ message: "Video deletion initiated" });
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error deleting video:", error);
|
||||||
|
res.status(500).json({ message: "Failed to delete video" });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
app.get("/api/videos", async (req, res) => {
|
app.get("/api/videos", async (req, res) => {
|
||||||
try {
|
try {
|
||||||
const limit = parseInt(req.query.limit as string) || 20;
|
const limit = parseInt(req.query.limit as string) || 20;
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user