feat(product-page): add AI-powered badge and informative subtitle to scientific media section
This commit is contained in:
parsa aghaei
parent
a00778ffaa
commit
5db23443ed
@ -781,13 +781,21 @@ export default function ProductPage({ productSlug }: { productSlug: string }) {
|
||||
{/* Multimedia & Scientific Documentation (Video, Podcast & PDF Catalog) */}
|
||||
{(product.videoUrl || product.podcastUrl || product.pdfUrl) && (
|
||||
<section className="bg-white border border-medical-gray-200 rounded-[2.5rem] p-8 md:p-10 shadow-md space-y-8 font-vazir" dir="rtl">
|
||||
<div className="flex items-center gap-2.5 sm:gap-4 border-b border-medical-gray-100 pb-4 sm:pb-6">
|
||||
<div className="w-9 h-9 sm:w-12 sm:h-12 bg-canina-blue text-white rounded-xl sm:rounded-2xl flex items-center justify-center shadow-lg shrink-0">
|
||||
<Sparkles className="w-4 h-4 sm:w-6 sm:h-6" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-lg sm:text-2xl md:text-3xl font-black text-medical-gray-900 italic">رسانه و مستندات تخصصی محصول</h3>
|
||||
<p className="text-xs text-medical-gray-400 font-bold mt-0.5 sm:mt-1">ویدیو آموزشی، پادکست تحلیل علمی و دفترچه کاتالوگ کارخانه Canina</p>
|
||||
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 border-b border-medical-gray-100 pb-4 sm:pb-6">
|
||||
<div className="flex items-center gap-2.5 sm:gap-4">
|
||||
<div className="w-9 h-9 sm:w-12 sm:h-12 bg-canina-blue text-white rounded-xl sm:rounded-2xl flex items-center justify-center shadow-lg shrink-0">
|
||||
<Sparkles className="w-4 h-4 sm:w-6 sm:h-6" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<h3 className="text-lg sm:text-2xl md:text-3xl font-black text-medical-gray-900 italic">رسانه و مستندات تخصصی محصول</h3>
|
||||
<span className="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-[10px] sm:text-xs font-black bg-purple-100 border border-purple-200 text-purple-700 shadow-2xs">
|
||||
<Sparkles className="w-3 h-3 text-purple-600 animate-pulse" />
|
||||
<span>تحلیل هوشمند (AI-Powered)</span>
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-xs text-medical-gray-400 font-bold mt-0.5 sm:mt-1">ویدیو آموزشی، پادکست تحلیل علمی تولیدشده با هوش مصنوعی و دفترچه کاتالوگ کارخانه Canina</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@ -1,21 +1,21 @@
|
||||
"use client";
|
||||
import React, { useState, useRef, useEffect, useCallback } from "react";
|
||||
import { motion, AnimatePresence } from "motion/react";
|
||||
import {
|
||||
Play,
|
||||
Pause,
|
||||
RotateCcw,
|
||||
RotateCw,
|
||||
Volume2,
|
||||
VolumeX,
|
||||
Maximize,
|
||||
Minimize,
|
||||
Download,
|
||||
Share2,
|
||||
X,
|
||||
Check,
|
||||
ChevronDown,
|
||||
ChevronUp,
|
||||
import {
|
||||
Play,
|
||||
Pause,
|
||||
RotateCcw,
|
||||
RotateCw,
|
||||
Volume2,
|
||||
VolumeX,
|
||||
Maximize,
|
||||
Minimize,
|
||||
Download,
|
||||
Share2,
|
||||
X,
|
||||
Check,
|
||||
ChevronDown,
|
||||
ChevronUp,
|
||||
Sparkles,
|
||||
Loader2
|
||||
} from "lucide-react";
|
||||
@ -311,7 +311,7 @@ export default function VideoModalPlayer({ isOpen, onClose, video }: VideoModalP
|
||||
) : (
|
||||
<>
|
||||
{/* Native Video Element */}
|
||||
<div
|
||||
<div
|
||||
className="absolute inset-0 flex items-center justify-center cursor-pointer"
|
||||
onClick={togglePlay}
|
||||
>
|
||||
@ -354,9 +354,8 @@ export default function VideoModalPlayer({ isOpen, onClose, video }: VideoModalP
|
||||
|
||||
{/* Top Header Overlay */}
|
||||
<div
|
||||
className={`absolute top-0 left-0 right-0 p-4 sm:p-6 bg-gradient-to-b from-black/80 via-black/40 to-transparent transition-opacity duration-300 z-20 flex items-center justify-between ${
|
||||
showControls ? "opacity-100 pointer-events-auto" : "opacity-0 pointer-events-none"
|
||||
}`}
|
||||
className={`absolute top-0 left-0 right-0 p-4 sm:p-6 bg-gradient-to-b from-black/80 via-black/40 to-transparent transition-opacity duration-300 z-20 flex items-center justify-between ${showControls ? "opacity-100 pointer-events-auto" : "opacity-0 pointer-events-none"
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center gap-3 text-right">
|
||||
<div className="w-8 h-8 rounded-full bg-canina-blue/20 text-canina-blue flex items-center justify-center shrink-0">
|
||||
@ -407,193 +406,191 @@ export default function VideoModalPlayer({ isOpen, onClose, video }: VideoModalP
|
||||
|
||||
{/* Bottom Custom Controls Bar */}
|
||||
<div
|
||||
className={`absolute bottom-0 left-0 right-0 p-4 sm:p-6 bg-gradient-to-t from-black/90 via-black/60 to-transparent transition-opacity duration-300 z-20 space-y-3 ${
|
||||
showControls ? "opacity-100 pointer-events-auto" : "opacity-0 pointer-events-none"
|
||||
}`}
|
||||
className={`absolute bottom-0 left-0 right-0 p-4 sm:p-6 bg-gradient-to-t from-black/90 via-black/60 to-transparent transition-opacity duration-300 z-20 space-y-3 ${showControls ? "opacity-100 pointer-events-auto" : "opacity-0 pointer-events-none"
|
||||
}`}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
|
||||
{/* Progress / Seek Bar with filled progress & buffer tracks */}
|
||||
<div className="flex items-center gap-3 dir-ltr" dir="ltr">
|
||||
<span className="text-[11px] font-mono font-bold text-white/70 w-10 text-right">
|
||||
{formatTime(currentTime)}
|
||||
</span>
|
||||
<div className="relative flex-1 flex items-center h-4">
|
||||
{/* Background & Buffer & Progress Track */}
|
||||
<div className="absolute inset-x-0 h-1.5 bg-white/20 rounded-lg overflow-hidden pointer-events-none">
|
||||
{/* Buffered bar */}
|
||||
<div
|
||||
className="h-full bg-white/35 transition-all duration-300"
|
||||
style={{ width: `${bufferedPercent}%` }}
|
||||
/>
|
||||
{/* Played progress bar */}
|
||||
<div
|
||||
className="h-full bg-canina-blue transition-all -mt-1.5"
|
||||
style={{ width: `${progressPercent}%` }}
|
||||
/>
|
||||
</div>
|
||||
<input
|
||||
type="range"
|
||||
min={0}
|
||||
max={duration || 100}
|
||||
step={0.1}
|
||||
value={currentTime}
|
||||
onChange={handleSeek}
|
||||
className="w-full h-4 opacity-0 absolute inset-0 cursor-pointer z-10"
|
||||
/>
|
||||
{/* Visual Scrubber Thumb */}
|
||||
<div
|
||||
className="absolute w-3.5 h-3.5 bg-white rounded-full shadow-md pointer-events-none -translate-x-1/2 transition-transform hover:scale-125"
|
||||
style={{ left: `${progressPercent}%` }}
|
||||
/>
|
||||
</div>
|
||||
<span className="text-[11px] font-mono font-bold text-white/70 w-10 text-left">
|
||||
{formatTime(duration)}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Action Buttons Row */}
|
||||
<div className="flex items-center justify-between">
|
||||
{/* Left Controls (Playback & Jumps with - on Left and + on Right in RTL) */}
|
||||
<div className="flex items-center gap-2 sm:gap-3" dir="rtl">
|
||||
{/* Play/Pause */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={togglePlay}
|
||||
className="w-10 h-10 rounded-full bg-canina-blue hover:bg-canina-blue/90 text-white flex items-center justify-center transition-transform hover:scale-105 cursor-pointer shadow-lg shadow-canina-blue/30"
|
||||
title={isPlaying ? "توقف" : "پخش"}
|
||||
>
|
||||
{isPlaying ? <Pause className="w-5 h-5 fill-white" /> : <Play className="w-5 h-5 fill-white ml-0.5" />}
|
||||
</button>
|
||||
|
||||
{/* -10s button */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => skipTime(-10)}
|
||||
className="px-2.5 py-1.5 text-white/80 hover:text-white rounded-lg hover:bg-white/10 transition-colors cursor-pointer flex items-center gap-1 text-xs font-mono font-bold border border-white/10"
|
||||
title="۱۰ ثانیه عقب"
|
||||
>
|
||||
<RotateCcw className="w-3.5 h-3.5" />
|
||||
<span>-10s</span>
|
||||
</button>
|
||||
|
||||
{/* +10s button */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => skipTime(10)}
|
||||
className="px-2.5 py-1.5 text-white/80 hover:text-white rounded-lg hover:bg-white/10 transition-colors cursor-pointer flex items-center gap-1 text-xs font-mono font-bold border border-white/10"
|
||||
title="۱۰ ثانیه جلو"
|
||||
>
|
||||
<RotateCw className="w-3.5 h-3.5" />
|
||||
<span>+10s</span>
|
||||
</button>
|
||||
|
||||
{/* Volume Slider: Increases towards the speaker icon */}
|
||||
<div className="hidden sm:flex items-center gap-2 pr-2" dir="ltr">
|
||||
<div className="relative w-20 flex items-center h-4">
|
||||
<div className="absolute inset-x-0 h-1.5 bg-white/20 rounded-lg overflow-hidden pointer-events-none">
|
||||
<div
|
||||
className="h-full bg-canina-blue transition-all"
|
||||
style={{ width: `${volumePercent}%` }}
|
||||
/>
|
||||
</div>
|
||||
<input
|
||||
type="range"
|
||||
min={0}
|
||||
max={1}
|
||||
step={0.05}
|
||||
value={isMuted ? 0 : volume}
|
||||
onChange={handleVolumeChange}
|
||||
className="w-full h-4 opacity-0 absolute inset-0 cursor-pointer z-10"
|
||||
{/* Progress / Seek Bar with filled progress & buffer tracks */}
|
||||
<div className="flex items-center gap-3 dir-ltr" dir="ltr">
|
||||
<span className="text-[11px] font-mono font-bold text-white/70 w-10 text-right">
|
||||
{formatTime(currentTime)}
|
||||
</span>
|
||||
<div className="relative flex-1 flex items-center h-4">
|
||||
{/* Background & Buffer & Progress Track */}
|
||||
<div className="absolute inset-x-0 h-1.5 bg-white/20 rounded-lg overflow-hidden pointer-events-none">
|
||||
{/* Buffered bar */}
|
||||
<div
|
||||
className="h-full bg-white/35 transition-all duration-300"
|
||||
style={{ width: `${bufferedPercent}%` }}
|
||||
/>
|
||||
<div
|
||||
className="absolute w-2.5 h-2.5 bg-white rounded-full shadow pointer-events-none -translate-x-1/2"
|
||||
style={{ left: `${volumePercent}%` }}
|
||||
{/* Played progress bar */}
|
||||
<div
|
||||
className="h-full bg-canina-blue transition-all -mt-1.5"
|
||||
style={{ width: `${progressPercent}%` }}
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={toggleMute}
|
||||
className="p-1.5 text-white/80 hover:text-white rounded-lg hover:bg-white/10 transition-colors cursor-pointer"
|
||||
title={isMuted ? "صدا وصل" : "بیصدا"}
|
||||
>
|
||||
{isMuted || volume === 0 ? <VolumeX className="w-4 h-4" /> : <Volume2 className="w-4 h-4" />}
|
||||
</button>
|
||||
<input
|
||||
type="range"
|
||||
min={0}
|
||||
max={duration || 100}
|
||||
step={0.1}
|
||||
value={currentTime}
|
||||
onChange={handleSeek}
|
||||
className="w-full h-4 opacity-0 absolute inset-0 cursor-pointer z-10"
|
||||
/>
|
||||
{/* Visual Scrubber Thumb */}
|
||||
<div
|
||||
className="absolute w-3.5 h-3.5 bg-white rounded-full shadow-md pointer-events-none -translate-x-1/2 transition-transform hover:scale-125"
|
||||
style={{ left: `${progressPercent}%` }}
|
||||
/>
|
||||
</div>
|
||||
<span className="text-[11px] font-mono font-bold text-white/70 w-10 text-left">
|
||||
{formatTime(duration)}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Right Controls (Speed Menu & Fullscreen) */}
|
||||
<div className="flex items-center gap-2">
|
||||
{/* Playback Rate Popup Menu with click-outside */}
|
||||
<div className="relative" ref={rateMenuRef}>
|
||||
{/* Action Buttons Row */}
|
||||
<div className="flex items-center justify-between" dir="ltr">
|
||||
{/* Left Controls (Playback & Jumps with - on Left and + on Right in RTL) */}
|
||||
<div className="flex items-center gap-2 sm:gap-3" dir="ltr">
|
||||
{/* Play/Pause */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowRateMenu(!showRateMenu)}
|
||||
className="px-2.5 py-1 rounded-xl bg-white/10 hover:bg-white/20 text-white text-xs font-mono font-bold transition-all cursor-pointer flex items-center gap-1 border border-white/10"
|
||||
title="سرعت پخش"
|
||||
onClick={togglePlay}
|
||||
className="w-10 h-10 rounded-full bg-canina-blue hover:bg-canina-blue/90 text-white flex items-center justify-center transition-transform hover:scale-105 cursor-pointer shadow-lg shadow-canina-blue/30"
|
||||
title={isPlaying ? "توقف" : "پخش"}
|
||||
>
|
||||
<span>{playbackRate}x</span>
|
||||
{isPlaying ? <Pause className="w-5 h-5 fill-white" /> : <Play className="w-5 h-5 fill-white ml-0.5" />}
|
||||
</button>
|
||||
|
||||
{showRateMenu && (
|
||||
<div className="absolute bottom-full left-0 mb-2 bg-neutral-900/95 backdrop-blur-md border border-white/10 rounded-2xl p-1.5 shadow-2xl z-30 flex flex-col gap-1 min-w-[75px]">
|
||||
{PLAYBACK_RATES.map((rate) => (
|
||||
<button
|
||||
key={rate}
|
||||
type="button"
|
||||
onClick={() => handleRateChange(rate)}
|
||||
className={`px-3 py-1.5 text-xs font-mono font-bold rounded-xl text-center transition-colors cursor-pointer ${
|
||||
playbackRate === rate
|
||||
? "bg-canina-blue text-white"
|
||||
: "text-white/70 hover:bg-white/10 hover:text-white"
|
||||
}`}
|
||||
>
|
||||
{rate}x
|
||||
</button>
|
||||
))}
|
||||
{/* -10s button */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => skipTime(-10)}
|
||||
className="px-2.5 py-1.5 text-white/80 hover:text-white rounded-lg hover:bg-white/10 transition-colors cursor-pointer flex items-center gap-1 text-xs font-mono font-bold border border-white/10"
|
||||
title="۱۰ ثانیه عقب"
|
||||
>
|
||||
<RotateCcw className="w-3.5 h-3.5" />
|
||||
<span>-10s</span>
|
||||
</button>
|
||||
|
||||
{/* +10s button */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => skipTime(10)}
|
||||
className="px-2.5 py-1.5 text-white/80 hover:text-white rounded-lg hover:bg-white/10 transition-colors cursor-pointer flex items-center gap-1 text-xs font-mono font-bold border border-white/10"
|
||||
title="۱۰ ثانیه جلو"
|
||||
>
|
||||
<RotateCw className="w-3.5 h-3.5" />
|
||||
<span>+10s</span>
|
||||
</button>
|
||||
|
||||
{/* Volume Slider: Increases towards the speaker icon */}
|
||||
<div className="hidden sm:flex items-center gap-2 pr-2" dir="ltr">
|
||||
<div className="relative w-20 flex items-center h-4">
|
||||
<div className="absolute inset-x-0 h-1.5 bg-white/20 rounded-lg overflow-hidden pointer-events-none">
|
||||
<div
|
||||
className="h-full bg-canina-blue transition-all"
|
||||
style={{ width: `${volumePercent}%` }}
|
||||
/>
|
||||
</div>
|
||||
<input
|
||||
type="range"
|
||||
min={0}
|
||||
max={1}
|
||||
step={0.05}
|
||||
value={isMuted ? 0 : volume}
|
||||
onChange={handleVolumeChange}
|
||||
className="w-full h-4 opacity-0 absolute inset-0 cursor-pointer z-10"
|
||||
/>
|
||||
<div
|
||||
className="absolute w-2.5 h-2.5 bg-white rounded-full shadow pointer-events-none -translate-x-1/2"
|
||||
style={{ left: `${volumePercent}%` }}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
onClick={toggleMute}
|
||||
className="p-1.5 text-white/80 hover:text-white rounded-lg hover:bg-white/10 transition-colors cursor-pointer"
|
||||
title={isMuted ? "صدا وصل" : "بیصدا"}
|
||||
>
|
||||
{isMuted || volume === 0 ? <VolumeX className="w-4 h-4" /> : <Volume2 className="w-4 h-4" />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Fullscreen Button */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={toggleFullscreen}
|
||||
className="p-2 text-white/70 hover:text-white rounded-lg hover:bg-white/10 transition-colors cursor-pointer"
|
||||
title={isFullscreen ? "خروج از تمام صفحه" : "تمام صفحه"}
|
||||
>
|
||||
{isFullscreen ? <Minimize className="w-4 h-4" /> : <Maximize className="w-4 h-4" />}
|
||||
</button>
|
||||
{/* Right Controls (Speed Menu & Fullscreen) */}
|
||||
<div className="flex items-center gap-2">
|
||||
{/* Playback Rate Popup Menu with click-outside */}
|
||||
<div className="relative" ref={rateMenuRef}>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowRateMenu(!showRateMenu)}
|
||||
className="px-2.5 py-1 rounded-xl bg-white/10 hover:bg-white/20 text-white text-xs font-mono font-bold transition-all cursor-pointer flex items-center gap-1 border border-white/10"
|
||||
title="سرعت پخش"
|
||||
>
|
||||
<span>{playbackRate}x</span>
|
||||
</button>
|
||||
|
||||
{showRateMenu && (
|
||||
<div className="absolute bottom-full left-0 mb-2 bg-neutral-900/95 backdrop-blur-md border border-white/10 rounded-2xl p-1.5 shadow-2xl z-30 flex flex-col gap-1 min-w-[75px]">
|
||||
{PLAYBACK_RATES.map((rate) => (
|
||||
<button
|
||||
key={rate}
|
||||
type="button"
|
||||
onClick={() => handleRateChange(rate)}
|
||||
className={`px-3 py-1.5 text-xs font-mono font-bold rounded-xl text-center transition-colors cursor-pointer ${playbackRate === rate
|
||||
? "bg-canina-blue text-white"
|
||||
: "text-white/70 hover:bg-white/10 hover:text-white"
|
||||
}`}
|
||||
>
|
||||
{rate}x
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Fullscreen Button */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={toggleFullscreen}
|
||||
className="p-2 text-white/70 hover:text-white rounded-lg hover:bg-white/10 transition-colors cursor-pointer"
|
||||
title={isFullscreen ? "خروج از تمام صفحه" : "تمام صفحه"}
|
||||
>
|
||||
{isFullscreen ? <Minimize className="w-4 h-4" /> : <Maximize className="w-4 h-4" />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</motion.div>
|
||||
</>
|
||||
)}
|
||||
</motion.div>
|
||||
|
||||
{/* Video Description Box (Rendered outside & below the video player for clean viewing) */}
|
||||
{video.description && (
|
||||
<div className="bg-neutral-900/90 backdrop-blur-md rounded-2xl p-4 text-white text-xs border border-white/10 shadow-xl space-y-2 text-right">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="font-black text-canina-blue text-xs">توضیحات و نکات علمی ویدئو:</span>
|
||||
{video.description.length > 120 && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setIsExpandedDesc(!isExpandedDesc)}
|
||||
className="text-white/60 hover:text-white text-[11px] font-bold inline-flex items-center gap-1 cursor-pointer"
|
||||
>
|
||||
<span>{isExpandedDesc ? "بستن متن" : "مشاهده کامل متن"}</span>
|
||||
{isExpandedDesc ? <ChevronUp className="w-3 h-3" /> : <ChevronDown className="w-3 h-3" />}
|
||||
</button>
|
||||
)}
|
||||
{/* Video Description Box (Rendered outside & below the video player for clean viewing) */}
|
||||
{video.description && (
|
||||
<div className="bg-neutral-900/90 backdrop-blur-md rounded-2xl p-4 text-white text-xs border border-white/10 shadow-xl space-y-2 text-right">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="font-black text-canina-blue text-xs">توضیحات و نکات علمی ویدئو:</span>
|
||||
{video.description.length > 120 && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setIsExpandedDesc(!isExpandedDesc)}
|
||||
className="text-white/60 hover:text-white text-[11px] font-bold inline-flex items-center gap-1 cursor-pointer"
|
||||
>
|
||||
<span>{isExpandedDesc ? "بستن متن" : "مشاهده کامل متن"}</span>
|
||||
{isExpandedDesc ? <ChevronUp className="w-3 h-3" /> : <ChevronDown className="w-3 h-3" />}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<p className={`font-medium text-white/80 leading-relaxed ${isExpandedDesc ? "" : "line-clamp-2"}`}>
|
||||
{video.description}
|
||||
</p>
|
||||
</div>
|
||||
<p className={`font-medium text-white/80 leading-relaxed ${isExpandedDesc ? "" : "line-clamp-2"}`}>
|
||||
{video.description}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</AnimatePresence>
|
||||
</AnimatePresence>
|
||||
);
|
||||
}
|
||||
|
||||
2
graphify-out/cache/stat-index.json
vendored
2
graphify-out/cache/stat-index.json
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user