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

Translate all user-facing text to English for broader accessibility

Browse Source 
This commit updates all Slovenian text strings to English across various components including modals, grids, and player interfaces. It also translates ad-related terminology and button labels, ensuring a consistent English-language user experience. The changes span across files such as `ad-explanation.tsx`, `ad-settings.tsx`, `bunny-video-modal.tsx`, `netflix-grid.tsx`, `thumbnail-generator.tsx`, `vast-player.tsx`, `video-edit-modal.tsx`, and `video-grid.tsx`.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 2eb1084e-b728-4449-9231-f1665924c8d5
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/2eb1084e-b728-4449-9231-f1665924c8d5/LdexDZU
This commit is contained in:
sebastjanartic 2025-08-29 07:17:26 +00:00
parent 061b7854bf
commit 8a4ea10fc4
8 changed files with 59 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
client/src/components/ad-explanation.tsx
View File

@ -15,7 +15,7 @@ export default function AdExplanation({ isOpen, onClose }: AdExplanationProps) {
<DialogHeader> <DialogHeader>
<DialogTitle className="text-xl font-bold flex items-center gap-2"> <DialogTitle className="text-xl font-bold flex items-center gap-2">
<DollarSign className="w-6 h-6 text-yellow-500" /> <DollarSign className="w-6 h-6 text-yellow-500" />
Kaj pomenijo oznake "💰 OGLAS"? What do "💰 AD" badges mean?
</DialogTitle> </DialogTitle>
</DialogHeader> </DialogHeader>
@ -25,10 +25,10 @@ export default function AdExplanation({ isOpen, onClose }: AdExplanationProps) {
<div className="bg-gradient-to-r from-yellow-500 to-orange-500 text-white text-xs px-2 py-1 rounded-full font-bold"> <div className="bg-gradient-to-r from-yellow-500 to-orange-500 text-white text-xs px-2 py-1 rounded-full font-bold">
💰 OGLAS 💰 OGLAS
</div> </div>
<span className="text-yellow-300 font-medium">Monetizirani videji</span> <span className="text-yellow-300 font-medium">Monetized Videos</span>
</div> </div>
<p className="text-sm text-gray-300"> <p className="text-sm text-gray-300">
Te oznake prikazujejo, da so videji opremljeni z naprednim VAST oglasnim sistemom These badges indicate that videos are equipped with advanced VAST advertising system
</p> </p>
</div> </div>
@ -36,26 +36,26 @@ export default function AdExplanation({ isOpen, onClose }: AdExplanationProps) {
<div className="bg-gray-700/50 rounded-lg p-4"> <div className="bg-gray-700/50 rounded-lg p-4">
<div className="flex items-center gap-2 mb-2"> <div className="flex items-center gap-2 mb-2">
<PlayCircle className="w-5 h-5 text-blue-400" /> <PlayCircle className="w-5 h-5 text-blue-400" />
<h3 className="font-medium">Kako deluje?</h3> <h3 className="font-medium">How does it work?</h3>
</div> </div>
<p className="text-sm text-gray-300"> <p className="text-sm text-gray-300">
Pred ali med predvajanjem videa se prikazujejo oglasi, ki omogočajo brezplačno gledanje vsebine Ads are shown before or during video playback, enabling free viewing of content
</p> </p>
</div> </div>
<div className="bg-gray-700/50 rounded-lg p-4"> <div className="bg-gray-700/50 rounded-lg p-4">
<div className="flex items-center gap-2 mb-2"> <div className="flex items-center gap-2 mb-2">
<Eye className="w-5 h-5 text-green-400" /> <Eye className="w-5 h-5 text-green-400" />
<h3 className="font-medium">Brezplačno gledanje</h3> <h3 className="font-medium">Free Viewing</h3>
</div> </div>
<p className="text-sm text-gray-300"> <p className="text-sm text-gray-300">
Oglasi omogočajo, da lahko vse videji gledate povsem brezplačno brez naročnine Ads enable you to watch all videos completely free without subscription
</p> </p>
</div> </div>
</div> </div>
<div className="bg-blue-500/10 border border-blue-500/20 rounded-lg p-4"> <div className="bg-blue-500/10 border border-blue-500/20 rounded-lg p-4">
<h3 className="font-medium text-blue-300 mb-2">VAST oglasni sistem</h3> <h3 className="font-medium text-blue-300 mb-2">VAST Advertising System</h3>
<p className="text-sm text-gray-300 mb-2"> <p className="text-sm text-gray-300 mb-2">
Platforma uporablja profesionalni VAST (Video Ad Serving Template) sistem z 5 oglasnimi mrežami: Platforma uporablja profesionalni VAST (Video Ad Serving Template) sistem z 5 oglasnimi mrežami:
</p> </p>

12
client/src/components/ad-settings.tsx
View File

@ -283,7 +283,7 @@ export default function AdSettings({ isOpen, onClose }: AdSettingsProps) {
<div> <div>
<h4 className="font-medium">Publift integracija</h4> <h4 className="font-medium">Publift integracija</h4>
<p className="text-sm text-gray-600 dark:text-gray-400"> <p className="text-sm text-gray-600 dark:text-gray-400">
Agregator več omrežij za povišanje prihodkov do 55% Multi-network aggregator for revenue increase up to 55%
</p> </p>
</div> </div>
</div> </div>
@ -292,16 +292,16 @@ export default function AdSettings({ isOpen, onClose }: AdSettingsProps) {
<div> <div>
<h4 className="font-medium">Header bidding</h4> <h4 className="font-medium">Header bidding</h4>
<p className="text-sm text-gray-600 dark:text-gray-400"> <p className="text-sm text-gray-600 dark:text-gray-400">
Priporočeno za 100.000+ mesečnih ogledov Recommended for 100,000+ monthly views
</p> </p>
</div> </div>
</div> </div>
<div className="flex items-start space-x-3"> <div className="flex items-start space-x-3">
<div className="w-2 h-2 bg-purple-500 rounded-full mt-2 flex-shrink-0" /> <div className="w-2 h-2 bg-purple-500 rounded-full mt-2 flex-shrink-0" />
<div> <div>
<h4 className="font-medium">VAST waterfall optimizacija</h4> <h4 className="font-medium">VAST Waterfall Optimization</h4>
<p className="text-sm text-gray-600 dark:text-gray-400"> <p className="text-sm text-gray-600 dark:text-gray-400">
Avtomatsko preklapljanje med omrežji za maksimalne CPM-je Automatic switching between networks for maximum CPMs
</p> </p>
</div> </div>
</div> </div>
@ -311,10 +311,10 @@ export default function AdSettings({ isOpen, onClose }: AdSettingsProps) {
<div className="flex justify-end space-x-3"> <div className="flex justify-end space-x-3">
<Button variant="outline" onClick={onClose}> <Button variant="outline" onClick={onClose}>
Prekliči Cancel
</Button> </Button>
<Button className="bg-bunny-blue hover:bg-bunny-blue/90"> <Button className="bg-bunny-blue hover:bg-bunny-blue/90">
Shrani nastavitve Save Settings
</Button> </Button>
</div> </div>
</div> </div>

8
client/src/components/bunny-video-modal.tsx
View File

@ -188,7 +188,7 @@ export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos
data-testid="button-edit-video" data-testid="button-edit-video"
> >
<Edit3 className="w-4 h-4" /> <Edit3 className="w-4 h-4" />
Uredi Edit
</Button> </Button>
)} )}
<div className="relative"> <div className="relative">
@ -200,7 +200,7 @@ export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos
data-testid="button-share-video" data-testid="button-share-video"
> >
<Share2 className="w-4 h-4" /> <Share2 className="w-4 h-4" />
Deli Share
</Button> </Button>
{showShareMenu && ( {showShareMenu && (
@ -237,7 +237,7 @@ export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos
className="w-full px-4 py-2 text-left text-white hover:bg-gray-700" className="w-full px-4 py-2 text-left text-white hover:bg-gray-700"
data-testid="button-copy-link" data-testid="button-copy-link"
> >
Kopiraj povezavo Copy Link
</button> </button>
</div> </div>
)} )}
@ -271,7 +271,7 @@ export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos
/> />
) : ( ) : (
<div className="absolute inset-0 flex items-center justify-center text-white"> <div className="absolute inset-0 flex items-center justify-center text-white">
<p>Video ni na voljo</p> <p>Video not available</p>
</div> </div>
)} )}

12
client/src/components/netflix-grid.tsx
View File

@ -47,19 +47,19 @@ export default function NetflixGrid({ videos, isLoading }: NetflixGridProps) {
return [ return [
{ {
title: "Top 10 Videjev Danes", title: "Top 10 Videos Today",
videos: sortedByViews.slice(0, 10) videos: sortedByViews.slice(0, 10)
}, },
{ {
title: "Priljubljeni Videi", title: "Popular Videos",
videos: sortedByViews.slice(10, 20) videos: sortedByViews.slice(10, 20)
}, },
{ {
title: "Nazadnje Dodano", title: "Recently Added",
videos: sortedByDate.slice(0, 15) videos: sortedByDate.slice(0, 15)
}, },
{ {
title: "Trending Sedaj", title: "Trending Now",
videos: videos.slice(0, 12) videos: videos.slice(0, 12)
} }
]; ];
@ -92,10 +92,10 @@ export default function NetflixGrid({ videos, isLoading }: NetflixGridProps) {
return ( return (
<div className="text-center py-12"> <div className="text-center py-12">
<div className="text-bunny-muted text-lg mb-4"> <div className="text-bunny-muted text-lg mb-4">
Ni najdenih videjev No videos found
</div> </div>
<p className="text-sm text-bunny-muted"> <p className="text-sm text-bunny-muted">
Poskusi prilagoditi iskalne ali filter kriterije Try adjusting your search or filter criteria
</p> </p>
</div> </div>
); );

18
client/src/components/thumbnail-generator.tsx
View File

@ -238,7 +238,7 @@ export default function ThumbnailGenerator({
{/* Header */} {/* Header */}
<div className="flex items-center justify-between mb-6"> <div className="flex items-center justify-between mb-6">
<h2 className="text-2xl font-bold text-gray-900 dark:text-white"> <h2 className="text-2xl font-bold text-gray-900 dark:text-white">
Generiraj thumbnail sliko Generate Thumbnail Image
</h2> </h2>
<Button <Button
onClick={onClose} onClick={onClose}
@ -255,7 +255,7 @@ export default function ThumbnailGenerator({
{/* Video Player Section */} {/* Video Player Section */}
<div className="space-y-4"> <div className="space-y-4">
<h3 className="text-lg font-semibold text-gray-900 dark:text-white"> <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
Video predogled Video Preview
</h3> </h3>
<div className="relative bg-black rounded-lg overflow-hidden"> <div className="relative bg-black rounded-lg overflow-hidden">
@ -266,7 +266,7 @@ export default function ThumbnailGenerator({
preload="metadata" preload="metadata"
data-testid="thumbnail-video-player" data-testid="thumbnail-video-player"
> >
Vaš brskalnik ne podpira video oznake. Your browser does not support the video tag.
</video> </video>
{!isVideoLoaded && ( {!isVideoLoaded && (
@ -305,12 +305,12 @@ export default function ThumbnailGenerator({
{isGenerating ? ( {isGenerating ? (
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" /> <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
Generiram... Generating...
</div> </div>
) : ( ) : (
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Download className="w-4 h-4" /> <Download className="w-4 h-4" />
Generiraj iz trenutnega okvirja Generate from Current Frame
</div> </div>
)} )}
</Button> </Button>
@ -325,12 +325,12 @@ export default function ThumbnailGenerator({
{isGeneratingAI ? ( {isGeneratingAI ? (
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<div className="w-4 h-4 border-2 border-purple-600 border-t-transparent rounded-full animate-spin" /> <div className="w-4 h-4 border-2 border-purple-600 border-t-transparent rounded-full animate-spin" />
AI generiram predloge... AI generating suggestions...
</div> </div>
) : ( ) : (
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Sparkles className="w-4 h-4" /> <Sparkles className="w-4 h-4" />
AI predlogi thumbnail-ov AI Thumbnail Suggestions
</div> </div>
)} )}
</Button> </Button>
@ -340,7 +340,7 @@ export default function ThumbnailGenerator({
{/* Thumbnail Preview Section */} {/* Thumbnail Preview Section */}
<div className="space-y-4"> <div className="space-y-4">
<h3 className="text-lg font-semibold text-gray-900 dark:text-white"> <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
Predogled thumbnail Thumbnail Preview
</h3> </h3>
{/* Thumbnail Preview */} {/* Thumbnail Preview */}
@ -349,7 +349,7 @@ export default function ThumbnailGenerator({
<div className="space-y-2"> <div className="space-y-2">
<img <img
src={selectedThumbnail || customThumbnail || ""} src={selectedThumbnail || customThumbnail || ""}
alt="Thumbnail predogled" alt="Thumbnail preview"
className="max-w-full max-h-48 rounded" className="max-w-full max-h-48 rounded"
data-testid="thumbnail-preview" data-testid="thumbnail-preview"
/> />

6
client/src/components/vast-player.tsx
View File

@ -308,7 +308,7 @@ export default function VASTPlayer({ video, onClose, vastTagUrl, enableAds = tru
{/* Ad Network Badge */} {/* Ad Network Badge */}
<div className="flex justify-between items-center"> <div className="flex justify-between items-center">
<div className="bg-yellow-600 text-white px-3 py-1 rounded-full text-sm font-medium"> <div className="bg-yellow-600 text-white px-3 py-1 rounded-full text-sm font-medium">
📺 Oglas {currentAdNetwork && `• ${AD_NETWORKS[currentAdNetwork as keyof typeof AD_NETWORKS].name}`} 📺 Ad {currentAdNetwork && `• ${AD_NETWORKS[currentAdNetwork as keyof typeof AD_NETWORKS].name}`}
</div> </div>
{/* Skip Ad Button */} {/* Skip Ad Button */}
@ -319,11 +319,11 @@ export default function VASTPlayer({ video, onClose, vastTagUrl, enableAds = tru
data-testid="button-skip-ad" data-testid="button-skip-ad"
> >
<SkipForward className="w-4 h-4 mr-2" /> <SkipForward className="w-4 h-4 mr-2" />
Preskoči oglas Skip Ad
</Button> </Button>
) : ( ) : (
<div className="bg-gray-800 text-white px-4 py-2 rounded-full text-sm"> <div className="bg-gray-800 text-white px-4 py-2 rounded-full text-sm">
Preskoči čez {skipCountdown}s Skip in {skipCountdown}s
</div> </div>
)} )}
</div> </div>

38
client/src/components/video-edit-modal.tsx
View File

@ -92,8 +92,8 @@ export default function VideoEditModal({ video, isOpen, onClose }: VideoEditModa
updateVideoMutation.mutate(updates); updateVideoMutation.mutate(updates);
} catch (error) { } catch (error) {
toast({ toast({
title: "Napaka", title: "Error",
description: "Preverite vnesene podatke", description: "Please check your input data",
variant: "destructive" variant: "destructive"
}); });
} }
@ -111,7 +111,7 @@ export default function VideoEditModal({ video, isOpen, onClose }: VideoEditModa
{/* Header */} {/* Header */}
<div className="flex items-center justify-between mb-6"> <div className="flex items-center justify-between mb-6">
<h2 className="text-2xl font-bold text-white"> <h2 className="text-2xl font-bold text-white">
Uredi video Edit Video
</h2> </h2>
<Button <Button
onClick={onClose} onClick={onClose}
@ -129,12 +129,12 @@ export default function VideoEditModal({ video, isOpen, onClose }: VideoEditModa
{/* Title */} {/* Title */}
<div> <div>
<Label className="block text-sm font-medium text-white mb-2"> <Label className="block text-sm font-medium text-white mb-2">
Naslov Title
</Label> </Label>
<Input <Input
value={title} value={title}
onChange={(e) => setTitle(e.target.value)} onChange={(e) => setTitle(e.target.value)}
placeholder="Vnesite naslov videoposnetka" placeholder="Enter video title"
className="w-full !bg-gray-700 !text-white !border-gray-500 placeholder:!text-gray-300" className="w-full !bg-gray-700 !text-white !border-gray-500 placeholder:!text-gray-300"
style={{ backgroundColor: '#374151', color: '#ffffff', borderColor: '#6b7280' }} style={{ backgroundColor: '#374151', color: '#ffffff', borderColor: '#6b7280' }}
data-testid="input-video-title" data-testid="input-video-title"
@ -144,12 +144,12 @@ export default function VideoEditModal({ video, isOpen, onClose }: VideoEditModa
{/* Description */} {/* Description */}
<div> <div>
<Label className="block text-sm font-medium text-white mb-2"> <Label className="block text-sm font-medium text-white mb-2">
Opis Description
</Label> </Label>
<Textarea <Textarea
value={description} value={description}
onChange={(e) => setDescription(e.target.value)} onChange={(e) => setDescription(e.target.value)}
placeholder="Opišite vsebino videoposnetka" placeholder="Describe the video content"
rows={4} rows={4}
className="w-full !bg-gray-700 !text-white !border-gray-500 placeholder:!text-gray-300" className="w-full !bg-gray-700 !text-white !border-gray-500 placeholder:!text-gray-300"
style={{ backgroundColor: '#374151', color: '#ffffff', borderColor: '#6b7280' }} style={{ backgroundColor: '#374151', color: '#ffffff', borderColor: '#6b7280' }}
@ -160,12 +160,12 @@ export default function VideoEditModal({ video, isOpen, onClose }: VideoEditModa
{/* Category */} {/* Category */}
<div> <div>
<Label className="block text-sm font-medium text-white mb-2"> <Label className="block text-sm font-medium text-white mb-2">
Kategorija Category
</Label> </Label>
<Input <Input
value={category} value={category}
onChange={(e) => setCategory(e.target.value)} onChange={(e) => setCategory(e.target.value)}
placeholder="npr. Izobraževanje, Zabava, Tehnologija" placeholder="e.g. Education, Entertainment, Technology"
className="w-full !bg-gray-700 !text-white !border-gray-500 placeholder:!text-gray-300" className="w-full !bg-gray-700 !text-white !border-gray-500 placeholder:!text-gray-300"
style={{ backgroundColor: '#374151', color: '#ffffff', borderColor: '#6b7280' }} style={{ backgroundColor: '#374151', color: '#ffffff', borderColor: '#6b7280' }}
data-testid="input-video-category" data-testid="input-video-category"
@ -175,12 +175,12 @@ export default function VideoEditModal({ video, isOpen, onClose }: VideoEditModa
{/* Tags */} {/* Tags */}
<div> <div>
<Label className="block text-sm font-medium text-white mb-2"> <Label className="block text-sm font-medium text-white mb-2">
Oznake (ločene z vejico) Tags (separated by commas)
</Label> </Label>
<Input <Input
value={tags} value={tags}
onChange={(e) => setTags(e.target.value)} onChange={(e) => setTags(e.target.value)}
placeholder="npr. tutorial, spletno programiranje, react" placeholder="e.g. tutorial, web development, react"
className="w-full !bg-gray-700 !text-white !border-gray-500 placeholder:!text-gray-300" className="w-full !bg-gray-700 !text-white !border-gray-500 placeholder:!text-gray-300"
style={{ backgroundColor: '#374151', color: '#ffffff', borderColor: '#6b7280' }} style={{ backgroundColor: '#374151', color: '#ffffff', borderColor: '#6b7280' }}
data-testid="input-video-tags" data-testid="input-video-tags"
@ -190,14 +190,14 @@ export default function VideoEditModal({ video, isOpen, onClose }: VideoEditModa
{/* Thumbnail Upload */} {/* Thumbnail Upload */}
<div> <div>
<Label className="block text-sm font-medium text-white mb-2"> <Label className="block text-sm font-medium text-white mb-2">
Slika predogleda Thumbnail Image
</Label> </Label>
<div className="space-y-3"> <div className="space-y-3">
{thumbnailPreview && ( {thumbnailPreview && (
<div className="w-48 h-27 rounded overflow-hidden border"> <div className="w-48 h-27 rounded overflow-hidden border">
<img <img
src={thumbnailPreview} src={thumbnailPreview}
alt="Predogled thumbnail" alt="Thumbnail preview"
className="w-full h-full object-cover" className="w-full h-full object-cover"
/> />
</div> </div>
@ -212,7 +212,7 @@ export default function VideoEditModal({ video, isOpen, onClose }: VideoEditModa
data-testid="button-generate-from-video" data-testid="button-generate-from-video"
> >
<Camera className="w-4 h-4 mr-2" /> <Camera className="w-4 h-4 mr-2" />
Generiraj iz videoposnetka Generate from Video
</Button> </Button>
<Label className="cursor-pointer flex-1"> <Label className="cursor-pointer flex-1">
@ -228,7 +228,7 @@ export default function VideoEditModal({ video, isOpen, onClose }: VideoEditModa
style={{ backgroundColor: '#374151', color: '#ffffff', borderColor: '#6b7280' }} style={{ backgroundColor: '#374151', color: '#ffffff', borderColor: '#6b7280' }}
> >
<Upload className="w-4 h-4" /> <Upload className="w-4 h-4" />
<span>Naloži sliko</span> <span>Upload Image</span>
</div> </div>
</Label> </Label>
</div> </div>
@ -246,7 +246,7 @@ export default function VideoEditModal({ video, isOpen, onClose }: VideoEditModa
data-testid="checkbox-public-video" data-testid="checkbox-public-video"
/> />
<Label htmlFor="public-video" className="text-sm font-medium text-white"> <Label htmlFor="public-video" className="text-sm font-medium text-white">
Javno dostopen video Public Video
</Label> </Label>
</div> </div>
</div> </div>
@ -258,7 +258,7 @@ export default function VideoEditModal({ video, isOpen, onClose }: VideoEditModa
variant="outline" variant="outline"
data-testid="button-cancel-edit" data-testid="button-cancel-edit"
> >
Prekliči Cancel
</Button> </Button>
<Button <Button
onClick={handleSave} onClick={handleSave}
@ -269,12 +269,12 @@ export default function VideoEditModal({ video, isOpen, onClose }: VideoEditModa
{updateVideoMutation.isPending ? ( {updateVideoMutation.isPending ? (
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" /> <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
Shranjujem... Saving...
</div> </div>
) : ( ) : (
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Save className="w-4 h-4" /> <Save className="w-4 h-4" />
Shrani Save
</div> </div>
)} )}
</Button> </Button>

8
client/src/components/video-grid.tsx
View File

@ -52,10 +52,10 @@ export default function VideoGrid({ videos, isLoading, hasMore, onLoadMore, view
return ( return (
<div className="text-center py-12"> <div className="text-center py-12">
<div className="text-bunny-muted text-lg mb-4" data-testid="text-no-videos"> <div className="text-bunny-muted text-lg mb-4" data-testid="text-no-videos">
Ni najdenih videjev No videos found
</div> </div>
<p className="text-sm text-bunny-muted"> <p className="text-sm text-bunny-muted">
Poskusi prilagoditi iskalne ali filter kriterije Try adjusting your search or filter criteria
</p> </p>
</div> </div>
); );
@ -88,11 +88,11 @@ export default function VideoGrid({ videos, isLoading, hasMore, onLoadMore, view
{isLoading ? ( {isLoading ? (
<> <>
<div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div> <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
<span>Nalagam...</span> <span>Loading...</span>
</> </>
) : ( ) : (
<> <>
<span>Naloži Več Videjev</span> <span>Load More Videos</span>
<ChevronDown className="w-4 h-4" /> <ChevronDown className="w-4 h-4" />
</> </>
)} )}