8b694e8a3a
Introduce a new modal to explain the meaning of ad indicators and enhance video loading performance by implementing lazy loading and async decoding. 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/BWSPHB9
80 lines
3.5 KiB
TypeScript
80 lines
3.5 KiB
TypeScript
import { useState } from "react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
|
|
import { Info, DollarSign, PlayCircle, Eye } from "lucide-react";
|
|
|
|
interface AdExplanationProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
}
|
|
|
|
export default function AdExplanation({ isOpen, onClose }: AdExplanationProps) {
|
|
return (
|
|
<Dialog open={isOpen} onOpenChange={onClose}>
|
|
<DialogContent className="bg-gray-800 border-gray-700 text-white max-w-2xl">
|
|
<DialogHeader>
|
|
<DialogTitle className="text-xl font-bold flex items-center gap-2">
|
|
<DollarSign className="w-6 h-6 text-yellow-500" />
|
|
Kaj pomenijo oznake "💰 OGLAS"?
|
|
</DialogTitle>
|
|
</DialogHeader>
|
|
|
|
<div className="space-y-6 py-4">
|
|
<div className="bg-yellow-500/10 border border-yellow-500/20 rounded-lg p-4">
|
|
<div className="flex items-center gap-2 mb-2">
|
|
<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
|
|
</div>
|
|
<span className="text-yellow-300 font-medium">Monetizirani videji</span>
|
|
</div>
|
|
<p className="text-sm text-gray-300">
|
|
Te oznake prikazujejo, da so videji opremljeni z naprednim VAST oglasnim sistemom
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div className="bg-gray-700/50 rounded-lg p-4">
|
|
<div className="flex items-center gap-2 mb-2">
|
|
<PlayCircle className="w-5 h-5 text-blue-400" />
|
|
<h3 className="font-medium">Kako deluje?</h3>
|
|
</div>
|
|
<p className="text-sm text-gray-300">
|
|
Pred ali med predvajanjem videa se prikazujejo oglasi, ki omogočajo brezplačno gledanje vsebine
|
|
</p>
|
|
</div>
|
|
|
|
<div className="bg-gray-700/50 rounded-lg p-4">
|
|
<div className="flex items-center gap-2 mb-2">
|
|
<Eye className="w-5 h-5 text-green-400" />
|
|
<h3 className="font-medium">Brezplačno gledanje</h3>
|
|
</div>
|
|
<p className="text-sm text-gray-300">
|
|
Oglasi omogočajo, da lahko vse videji gledate povsem brezplačno brez naročnine
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<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>
|
|
<p className="text-sm text-gray-300 mb-2">
|
|
Platforma uporablja profesionalni VAST (Video Ad Serving Template) sistem z 5 oglasnimi mrežami:
|
|
</p>
|
|
<ul className="text-sm text-gray-300 space-y-1">
|
|
<li>• Publift - Agregator več oglaševalskih omrežij</li>
|
|
<li>• Vdo.ai - AI ciljanje z visokim eCPM</li>
|
|
<li>• Primis - Video discovery platforma</li>
|
|
<li>• AdPlayer.Pro - Outstream rešitve</li>
|
|
<li>• Aniview - Programmatic oglasne tehnologije</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div className="flex justify-end">
|
|
<Button onClick={onClose} className="bg-bunny-blue hover:bg-blue-600">
|
|
Razumem
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
} |