{thumb && 
}
{showPreview && previewSrc && (
)}
{tag &&
{tag}
}
{isMobile && showPreview && (
Tocca per guardare
)}
{video.duration && {video.duration}
}
{video.title}
{modelName && (
{ e.stopPropagation(); onModelClick(modelUrl, modelName); }}
>{modelName}
)}
{modelName && ·}
{video.views && (
{video.views}
)}
{video.timeAgo && (
<>
·
{video.timeAgo}
)}
{emptyText || 'Nessun video trovato'}
Prova a cambiare filtro o periodo.
{videos.map((v, i) => (
);
}
/* ─── Model Card / Grid ─────────────────────────────────── */
function ModelCard({ model, onModelClick }) {
const photo = model.photo ? api.proxyUrl(model.photo) : '';
const name = model.name || 'Pornstar';
const initials = name.split(/\s+/).map(s => s[0]).join('').slice(0, 2).toUpperCase();
return (
onModelClick(model.url, name)}>
);
}
function ModelGrid({ models, onModelClick }) {
if (!models || models.length === 0) return null;
return (
{photo
? 
:
{initials}
}
{name}
{(model.videos || model.views) && (
{model.videos != null && {model.videos} video}
{model.videos != null && model.views && ·}
{model.views && {model.views} views}
)}
{models.map((m, i) => )}
);
}
/* ─── Category Card / Grid ──────────────────────────────── */
function CategoryCard({ category, onClick }) {
return (
onClick(category)}>
);
}
/* ─── Pagination ────────────────────────────────────────── */
function Pagination({ page, onChange, hasNext = true }) {
const pages = useMemo(() => {
// Window of ±2 pages around current
const start = Math.max(1, page - 2);
const end = page + 2;
const arr = [];
for (let p = start; p <= end; p++) arr.push(p);
return arr;
}, [page]);
return (
{category.name}
{category.count != null
? `${category.count.toLocaleString('it-IT')} video`
: 'Esplora'}
{page > 3 && (
<>
…
)}
{pages.map(p => (
))}
);
}
/* ─── Custom Video Player ───────────────────────────────────
Features:
- Scrubbing thumbs on hover (uses timeline_screens_url from API)
- Skip ±10s buttons
- Quality menu
- Download (opens current stream in new tab)
- Keyboard: Space, ←, →, M, F, ↑, ↓
- Resume position via localStorage (per video)
- Buffering indicator */
function CustomPlayer({ data }) {
const { streams = [], preview, title } = data || {};
const videoId = data?.id || data?.title || 'unknown';
const resumeKey = `df_resume_${videoId}`;
const videoRef = useRef(null);
const wrapRef = useRef(null);
const scrubRef = useRef(null);
const [playing, setPlaying] = useState(false);
const [currentTime, setCurrentTime] = useState(0);
const [duration, setDuration] = useState(0);
const [buffered, setBuffered] = useState(0);
const [muted, setMuted] = useState(false);
const [volume, setVolume] = useState(1);
const [buffering, setBuffering] = useState(false);
const [showControls, setShowControls] = useState(true);
const [qualityMenuOpen, setQualityMenuOpen] = useState(false);
const [selectedQuality, setSelectedQuality] = useState(0);
const [scrubHover, setScrubHover] = useState(null); // { x, t } | null
const [keyHint, setKeyHint] = useState(null);
const controlsTimeoutRef = useRef(null);
const keyHintTimerRef = useRef(null);
// Pick initial quality from localStorage preference (best <= preferred), default highest
useEffect(() => {
if (!streams.length) return;
const preferred = localStorage.getItem('df_preferred_quality') || '1080p';
const idx = streams.findIndex(s => s.quality === preferred);
setSelectedQuality(idx !== -1 ? idx : streams.length - 1);
}, [streams.length]);
const currentStream = streams[selectedQuality] || streams[0];
const currentSrc = currentStream && data?.originalUrl
? api.streamUrl(data.originalUrl, currentStream.quality)
: '';
// Timeline scrubbing thumbnails — derived from API response
const tlUrl = data?.timeline_screens_url || '';
const tlInterval = parseInt(data?.timeline_screens_interval || 10);
const tlCount = parseInt(data?.timeline_screens_count || 0);
const hasScrubThumbs = !!(tlUrl && tlInterval > 0 && tlCount > 0);
function getThumbUrl(seconds) {
if (!hasScrubThumbs) return '';
const total = tlCount * tlInterval;
const t = Math.max(tlInterval, Math.min(total, Math.ceil(seconds / tlInterval) * tlInterval));
return api.proxyUrl(tlUrl.replace('{time}', String(t)));
}
// Video element event wiring
useEffect(() => {
const v = videoRef.current;
if (!v) return;
const onTime = () => setCurrentTime(v.currentTime);
const onDur = () => setDuration(v.duration || 0);
const onEnd = () => setPlaying(false);
const onWaiting = () => setBuffering(true);
const onCanPlay = () => setBuffering(false);
const onPlaying = () => { setBuffering(false); setPlaying(true); };
const onPause = () => setPlaying(false);
const onProgress = () => {
try {
if (v.buffered.length > 0) {
setBuffered(v.buffered.end(v.buffered.length - 1));
}
} catch {}
};
const onVolume = () => { setMuted(v.muted); setVolume(v.volume); };
const onLoaded = () => {
// Resume if we have a saved position
try {
const saved = parseFloat(localStorage.getItem(resumeKey) || '0');
if (saved > 5 && saved < (v.duration || 0) - 5) {
v.currentTime = saved;
}
} catch {}
};
v.addEventListener('timeupdate', onTime);
v.addEventListener('loadedmetadata', onDur);
v.addEventListener('loadeddata', onLoaded);
v.addEventListener('ended', onEnd);
v.addEventListener('waiting', onWaiting);
v.addEventListener('canplay', onCanPlay);
v.addEventListener('playing', onPlaying);
v.addEventListener('pause', onPause);
v.addEventListener('progress', onProgress);
v.addEventListener('volumechange', onVolume);
return () => {
v.removeEventListener('timeupdate', onTime);
v.removeEventListener('loadedmetadata', onDur);
v.removeEventListener('loadeddata', onLoaded);
v.removeEventListener('ended', onEnd);
v.removeEventListener('waiting', onWaiting);
v.removeEventListener('canplay', onCanPlay);
v.removeEventListener('playing', onPlaying);
v.removeEventListener('pause', onPause);
v.removeEventListener('progress', onProgress);
v.removeEventListener('volumechange', onVolume);
};
}, [currentSrc, resumeKey]);
// Save resume position periodically (every 5s)
useEffect(() => {
if (!playing) return;
const it = setInterval(() => {
const v = videoRef.current;
if (v && v.currentTime > 5) {
localStorage.setItem(resumeKey, String(v.currentTime));
}
}, 5000);
return () => clearInterval(it);
}, [playing, resumeKey]);
// Auto-hide controls
const wakeControls = useCallback(() => {
setShowControls(true);
if (controlsTimeoutRef.current) clearTimeout(controlsTimeoutRef.current);
if (playing) {
controlsTimeoutRef.current = setTimeout(() => setShowControls(false), 3000);
}
}, [playing]);
useEffect(() => {
wakeControls();
return () => { if (controlsTimeoutRef.current) clearTimeout(controlsTimeoutRef.current); };
}, [playing, wakeControls]);
/* ── Actions ── */
const togglePlay = useCallback(() => {
const v = videoRef.current;
if (!v) return;
if (v.paused) v.play().catch(() => {});
else v.pause();
}, []);
const seekTo = useCallback((t) => {
const v = videoRef.current;
if (!v) return;
v.currentTime = Math.max(0, Math.min(v.duration || 0, t));
}, []);
const skip = useCallback((delta) => {
const v = videoRef.current;
if (!v) return;
v.currentTime = Math.max(0, Math.min(v.duration || 0, v.currentTime + delta));
showKeyHint(delta > 0 ? '+10s' : '−10s');
}, []);
const setVol = useCallback((delta) => {
const v = videoRef.current;
if (!v) return;
v.volume = Math.max(0, Math.min(1, v.volume + delta));
showKeyHint(`Volume ${Math.round(v.volume * 100)}%`);
}, []);
const toggleMute = useCallback(() => {
const v = videoRef.current;
if (!v) return;
v.muted = !v.muted;
showKeyHint(v.muted ? 'Muto' : 'Audio attivo');
}, []);
const toggleFullscreen = useCallback(() => {
const v = videoRef.current;
const wrap = wrapRef.current;
// iOS (iPhone/iPad): use native video fullscreen player
if (v && v.webkitEnterFullscreen) {
v.webkitEnterFullscreen();
return;
}
if (!wrap) return;
if (!document.fullscreenElement) {
(wrap.requestFullscreen || wrap.webkitRequestFullscreen || (() => {})).call(wrap);
} else {
(document.exitFullscreen || document.webkitExitFullscreen || (() => {})).call(document);
}
}, []);
const onDownload = useCallback(() => {
if (!currentStream || !data?.originalUrl) return;
const url = api.streamUrl(data.originalUrl, currentStream.quality);
const a = document.createElement('a');
a.href = url;
a.download = (title || 'video') + '.mp4';
a.target = '_blank';
a.rel = 'noopener';
document.body.appendChild(a);
a.click();
a.remove();
}, [currentStream, title]);
function showKeyHint(text) {
setKeyHint(text);
if (keyHintTimerRef.current) clearTimeout(keyHintTimerRef.current);
keyHintTimerRef.current = setTimeout(() => setKeyHint(null), 700);
}
// Quality change — preserve position + playing state
const changeQuality = (idx) => {
if (idx === selectedQuality) { setQualityMenuOpen(false); return; }
const v = videoRef.current;
const wasTime = v?.currentTime || 0;
const wasPlaying = !v?.paused;
setSelectedQuality(idx);
if (streams[idx]) {
localStorage.setItem('df_preferred_quality', streams[idx].quality);
}
setQualityMenuOpen(false);
setTimeout(() => {
const nv = videoRef.current;
if (nv) {
nv.currentTime = wasTime;
if (wasPlaying) nv.play().catch(() => {});
}
}, 80);
};
// Keyboard shortcuts (when not typing in an input)
useEffect(() => {
const onKey = (e) => {
const tag = (e.target?.tagName || '').toLowerCase();
if (tag === 'input' || tag === 'textarea' || e.target?.isContentEditable) return;
// Only consume shortcuts if the player is in the viewport
const wrap = wrapRef.current;
if (!wrap) return;
const r = wrap.getBoundingClientRect();
if (r.bottom < 0 || r.top > window.innerHeight) return;
switch (e.key.toLowerCase()) {
case ' ': case 'spacebar': e.preventDefault(); togglePlay(); showKeyHint(videoRef.current?.paused ? 'Pausa' : 'Play'); break;
case 'arrowleft': e.preventDefault(); skip(-10); break;
case 'arrowright': e.preventDefault(); skip(10); break;
case 'arrowup': e.preventDefault(); setVol(0.05); break;
case 'arrowdown': e.preventDefault(); setVol(-0.05); break;
case 'm': e.preventDefault(); toggleMute(); break;
case 'f': e.preventDefault(); toggleFullscreen(); break;
default: break;
}
};
window.addEventListener('keydown', onKey);
return () => window.removeEventListener('keydown', onKey);
}, [togglePlay, skip, setVol, toggleMute, toggleFullscreen]);
/* ── Scrub bar interactions ── */
const onScrubMove = (e) => {
const bar = scrubRef.current;
if (!bar) return;
const r = bar.getBoundingClientRect();
const pct = Math.max(0, Math.min(1, (e.clientX - r.left) / r.width));
const t = pct * (duration || 0);
setScrubHover({ x: pct * 100, t });
};
const onScrubLeave = () => setScrubHover(null);
const onScrubClick = (e) => {
const bar = scrubRef.current;
if (!bar || !duration) return;
const r = bar.getBoundingClientRect();
const pct = Math.max(0, Math.min(1, (e.clientX - r.left) / r.width));
seekTo(pct * duration);
};
const progress = duration > 0 ? (currentTime / duration) * 100 : 0;
const bufferedPct = duration > 0 ? (buffered / duration) * 100 : 0;
return (
{/* Big play (when paused) */}
{!playing && (
);
}
Object.assign(window, {
Icon, formatTime, setCookie, getCookie, useMediaQuery,
AgeGate, useWatchLater, useToast, ToastView,
Header, VideoCard, VideoGrid, ModelCard, ModelGrid, CategoryCard,
Pagination, CustomPlayer,
});
{keyHint}
}
{/* Controls bar */}
e.stopPropagation()}
>
{scrubHover && (
{hasScrubThumbs && (
})
{ e.currentTarget.style.opacity = 0; }}
/>
)}
)}
{formatTime(scrubHover.t)}
{formatTime(currentTime)} / {formatTime(duration)}
{streams.length > 1 && (
{qualityMenuOpen && (
)}
setQualityMenuOpen(false)}>
{streams.map((s, i) => (
))}
)}