{/* Header */}
{/* Step Indicator - Compact */}
{step > 1 && (
)}
{step === 1 ? 'اختر السورة' : step === 2 ? selectedSurah?.name : `تحديد النص`}
{addedCount > 0 && (
+{toArabicNumerals(addedCount)} مضافة
)}
{[1, 2, 3].map(s => (
);
};
const AlertModal = ({ title, message, onClose, isSuccess }) => { const Icon = isSuccess ? BadgeCheck : ShieldAlert; return = s ? 'bg-emerald-500 scale-110' : 'bg-white/20'}`} />
{s < 3 &&
)}
{/* Content */}
s ? 'bg-emerald-500' : 'bg-white/10'}`} />}
))}
{/* Custom User Audio Player */}
{audioFileSrc && (
{/* Controls Group */}
{/* Rewind 5s */}
{/* Play Button - Compact */}
{/* Forward 5s */}
{/* Scrubber Area */}
{/* Real Waveform Layer */}
{audioPeaks.length > 0 ? (
audioPeaks.map((peak, i) => {
// Adjust visualization to show progress within the EFFECTIVE range
// This is a simplified visual approximation since peaks represent full file
const progress = (currentTime - rangeStart) / effectiveDuration;
return (
)
})
) : (
/* Fallback / Loading State */
Array.from({ length: 80 }).map((_, i) => (
))
)}
{/* Native Range Input (Invisible) */}
{
const val = parseFloat(e.target.value);
audioPlayerRef.current.currentTime = val;
setCurrentTime(val);
}}
className="absolute inset-0 w-full h-full opacity-0 cursor-pointer z-30"
/>
{/* Track Container */}
{/* Progress Fill */}
{/* Thumb Indicator */}
{formatTimePlayer(Math.max(0, currentTime - rangeStart))}
{formatTimePlayer(effectiveDuration)}
{error ? (
a.text.includes(normalizeSearchText(ayahSearch)) || a.numberInSurah.toString().includes(ayahSearch))}
onSelectAyah={handleSelectAyah}
existingKeys={existingKeys}
surahName={selectedSurah?.name}
initialScrollIndex={lastVisitedAyahIndex}
/>
) : (
{/* Footer Stats */}
{step !== 3 && (
{error}
📖 {toArabicNumerals(114)} سورة
•
✨ {step === 1 ? 'اختر السورة' : `${toArabicNumerals(surahAyahs.length)} آية`}
)}
{title}
{message}
{title}
{message}
{/* Header */}
{/* Main Cropper Area */}
);
};
// --- Drag & Drop Overlay Component ---
const DragOverlay = ({ item, x, y, width }) => {
if (!item) return null;
return (
تعديل وقص الصورة
اسحب بإصبعك للتحريك، واستخدم إصبعين للتكبير (Pinch-to-zoom)
{formatTimePrecise(item.start)}
{formatTimePrecise(item.end)}
{item.text}
{/* Backdrop with blur and fade animation */}
{/* Dialog Card */}
);
// === Analytics Tracking Helper ===
/* ═══════════════════════════════════════════════════════════════
ربط نوافذ React بزرّ الرجوع — المرحلة 3
═══════════════════════════════════════════════════════════════
في TWA زرّ الرجوع من أول عنوان **يغلق التطبيق**. فمستخدمٌ فتح
نافذة ثم ضغط رجوع — أكثر حركة متوقَّعة على أندرويد — كان يخرج من
التطبيق كله بدل إغلاق النافذة.
وهذه الصفحة فيها أحد عشر عَلَمًا لنوافذ (`showExportConfirm`،
`showQuranSelector`، `showImageEditor`، `trimmingFile`، …) لكل
منها مواضع فتح وإغلاق متفرّقة. ربطُ كلٍّ منها يدويًّا يعني نحو
ثلاثين تعديلًا، وموضعُ إغلاق واحد يُنسى يترك مُدخلًا معلّقًا في
السجل — فتصير أول ضغطة رجوع بعده بلا أثر مرئي، وهو عطبٌ **أسوأ من
الأصل** لأنه يبدو تجمّدًا لا خطأ.
فالربط يقع على **حالة** النافذة لا على مواضع فعلها: خُطّاف واحد
يراقب العَلَم، ويتولّى السجل عند الفتح وينظّفه عند الإغلاق أيًّا
كان الطريق الذي أغلقها. لا موضع فتح ولا إغلاق قائم يُلمس.
⚠️ حدٌّ معروف: السجل مكدّسٌ LIFO. فلو فُتحت نافذتان معًا وأُغلقت
**السفلى** بزرّها، نُزع مُدخل العلوية. النوافذ هنا متعارضة عمليًّا
(لا تُفتح إلا واحدة)، فلم يُبنَ لهذا احتياطٌ لا داعي له.
═══════════════════════════════════════════════════════════════ */
const useBackClose = (isOpen, close) => {
// مرجعٌ لا تبعية: `close` غالبًا دالة سهمية تُعاد بناؤها كل رسم،
// ولو دخلت في مصفوفة التبعيات لأُعيد تسجيل مُدخل السجل مع كل
// رسمة — أي تكديس مُدخلات لنافذة واحدة.
const closeRef = useRef(close);
closeRef.current = close;
const [backGeneration, setBackGeneration] = useState(0);
useEffect(() => {
if (!isOpen || !window.AppShell) return;
let viaBack = false;
window.AppShell.openModal(() => {
viaBack = true;
try { closeRef.current(); } catch (e) { /* إغلاق فاشل لا يُسقط الصفحة */ }
// A back press consumes AppShell's history entry. If the
// closed layer revealed another modal, re-run this effect
// and register one fresh entry for the remaining layer.
setBackGeneration(generation => generation + 1);
});
return () => {
// أُغلقت بطريق آخر (زر X، نقر على الخلفية، إتمام العملية):
// يُنزَع مُدخل السجل هنا حتى يبقى الطريقان متّسقين.
if (!viaBack) window.AppShell.closeModal();
};
}, [isOpen, backGeneration]);
};
const trackAnalytics = async (action, data = {}) => {
// Disabled until a real consent UI and a reviewed retention policy
// exist. Call sites remain centralized for a future compliant
// implementation without hidden collection.
return { disabled: true, action };
};
function QuranFlowApp() {
const savedSettings = (() => { try { const s = localStorage.getItem('quranShortsSettings'); return s ? JSON.parse(s) : null } catch (e) { return null } })();
const [showTOD, setShowTOD] = useState(false);
const [activeTab, setActiveTab] = useState('media'), [videoSrc, setVideoSrc] = useState(null), [audioSrc, setAudioSrc] = useState(null), [audioFile, setAudioFile] = useState(null), [selectedAudioName, setSelectedAudioName] = useState(null);
const [trimmingFile, setTrimmingFile] = useState(null), [showAudioChoice, setShowAudioChoice] = useState(false), [showAutoGenerateModal, setShowAutoGenerateModal] = useState(false), [isProcessingAudio, setIsProcessingAudio] = useState(false), [isAutoGenerating, setIsAutoGenerating] = useState(false), [autoGenStep, setAutoGenStep] = useState(""), [showResetConfirm, setShowResetConfirm] = useState(false), [alertModal, setAlertModal] = useState({ visible: false, title: '', message: '', isSuccess: false });
const [isPlaying, setIsPlaying] = useState(false), [currentTime, setCurrentTime] = useState(0), [videoRange, setVideoRange] = useState({ start: 0, end: 0 }), [audioRange, setAudioRange] = useState({ start: 0, end: 0 });
const [timelineData, setTimelineData] = useState([]), [isAnalyzingAI, setIsAnalyzingAI] = useState(false), [aiError, setAiError] = useState(null), [aiStatus, setAiStatus] = useState("");
const [overlaySettings, setOverlaySettings] = useState(savedSettings?.overlaySettings || DEFAULT_OVERLAY), [ayahStyle, setAyahStyle] = useState(savedSettings?.ayahStyle || DEFAULT_AYAH_STYLE), [watermark, setWatermark] = useState(savedSettings?.watermark || DEFAULT_WATERMARK), [showSiteBranding, setShowSiteBranding] = useState(savedSettings?.showSiteBranding !== undefined ? savedSettings.showSiteBranding : DEFAULT_BRANDING);
// Background Image Support
const [bgType, setBgType] = useState('video'); // 'video' | 'image'
const [bgImageSrc, setBgImageSrc] = useState(null);
const bgImageRef = useRef(null);
// Image Transform Settings
const DEFAULT_IMAGE_TRANSFORM = { crop: { x: 0, y: 0 }, zoom: 1, objectFit: 'cover', croppedAreaPixels: null };
const [imageTransform, setImageTransform] = useState(DEFAULT_IMAGE_TRANSFORM);
// Audio Database Cache for High-Performance Smart Selection
const audioDBRef = useRef([]);
useEffect(() => {
const buildAudioDatabase = async () => {
const CACHE_KEY = 'quranShortsAudioDB';
const CACHE_VERSION = 2; // Incremented for new logic
const totalAudios = APP_CONFIG.audioCount;
try {
const cached = localStorage.getItem(CACHE_KEY);
if (cached) {
const parsed = JSON.parse(cached);
if (parsed.version === CACHE_VERSION && parsed.count === totalAudios) {
audioDBRef.current = parsed.db;
return;
}
}
} catch (e) { }
// Build cache in background
const db = [];
const batchSize = 10;
for (let batch = 0; batch < Math.ceil(totalAudios / batchSize); batch++) {
const batchPromises = [];
const startIdx = batch * batchSize + 1;
const endIdx = Math.min((batch + 1) * batchSize, totalAudios);
for (let i = startIdx; i <= endIdx; i++) {
const src = `audio4all/${i}.mp3`;
const loadPromise = new Promise((resolve) => {
const audio = new Audio();
const timeoutId = setTimeout(() => resolve(null), 10000);
audio.onloadedmetadata = () => {
clearTimeout(timeoutId);
resolve({ src, duration: audio.duration, id: i });
};
audio.onerror = () => { clearTimeout(timeoutId); resolve(null); };
audio.src = src;
});
batchPromises.push(loadPromise);
}
const results = await Promise.all(batchPromises);
db.push(...results.filter(r => r !== null));
// Save intermediate results
audioDBRef.current = db;
}
try { localStorage.setItem(CACHE_KEY, JSON.stringify({ version: CACHE_VERSION, count: totalAudios, db })); } catch (e) { }
};
// Adding a slight delay so it doesn't block main UI render
setTimeout(buildAudioDatabase, 1500);
}, []);
// New States
const [showExportConfirm, setShowExportConfirm] = useState(false);
const [showDevDialog, setShowDevDialog] = useState(false);
const [currentDua, setCurrentDua] = useState("");
const [contextMenu, setContextMenu] = useState({ visible: false, x: 0, y: 0, segmentId: null });
const [isSettingsCollapsed, setIsSettingsCollapsed] = useState(true); // NEW: Collapsible state for settings
const [showCompositionTrimmer, setShowCompositionTrimmer] = useState(false);
const [showImageEditor, setShowImageEditor] = useState(false); // Image Editor Modal State
const [exportRange, setExportRange] = useState(null);
// Favorites System State
const [favorites, setFavorites] = useState(() => {
try {
const saved = localStorage.getItem('quranShortsFavorites');
return saved ? JSON.parse(saved) : { video: [], audio: [], image: [], texture: [], combos: [] };
} catch (e) {
return { video: [], audio: [], image: [], texture: [], combos: [] };
}
});
const [showFavoritesOnly, setShowFavoritesOnly] = useState(false);
// Auto-save favorites
useEffect(() => {
localStorage.setItem('quranShortsFavorites', JSON.stringify(favorites));
}, [favorites]);
const toggleFavorite = (type, filename) => {
setFavorites(prev => {
const list = prev[type] || [];
const newList = list.includes(filename)
? list.filter(f => f !== filename)
: [...list, filename];
return { ...prev, [type]: newList };
});
};
// === States for Verse Extraction Mode Selection ===
const [showExtractionModeModal, setShowExtractionModeModal] = useState(false);
const [pendingAudioData, setPendingAudioData] = useState(null);
// === State for Quran Selector Modal ===
const [showQuranSelector, setShowQuranSelector] = useState(false);
// Caption state for professional descriptions with hashtags
const [currentCaption, setCurrentCaption] = useState(() => {
const randomIndex = Math.floor(Math.random() * CAPTION_TEMPLATES.length);
return CAPTION_TEMPLATES[randomIndex];
});
const [captionCopied, setCaptionCopied] = useState(false);
/* مدخل رجوع واحد لكل طبقة النوافذ. الانتقال بين نافذتين (مثل
اختيار ملف ثم فتح القص) يبقي المدخل نفسه؛ لو امتلكت كل نافذة
مدخلًا مستقلًا فإن تنظيف الأولى ينفذ history.back بعد فتح
الثانية، فيغلقها ويبطل blob URL الخاص بمعاينتها. */
const hasOpenModal = Boolean(
trimmingFile || showAudioChoice || showAutoGenerateModal ||
showResetConfirm || alertModal.visible || showExportConfirm ||
showDevDialog || showCompositionTrimmer || showImageEditor ||
showExtractionModeModal || showQuranSelector || showTOD
);
useBackClose(hasOpenModal, () => {
if (alertModal.visible) setAlertModal(p => ({ ...p, visible: false }));
else if (showImageEditor) setShowImageEditor(false);
else if (showCompositionTrimmer) setShowCompositionTrimmer(false);
else if (trimmingFile) setTrimmingFile(null);
else if (showQuranSelector) setShowQuranSelector(false);
else if (showExtractionModeModal) { setShowExtractionModeModal(false); setPendingAudioData(null); }
else if (showExportConfirm) setShowExportConfirm(false);
else if (showResetConfirm) setShowResetConfirm(false);
else if (showAutoGenerateModal) setShowAutoGenerateModal(false);
else if (showAudioChoice) setShowAudioChoice(false);
else if (showDevDialog) setShowDevDialog(false);
else if (showTOD) setShowTOD(false);
});
// Volume State with Persistence
// Volume State with Persistence
const [volume, setVolume] = useState(() => {
const s = localStorage.getItem(VOLUME_KEY);
return s !== null ? parseFloat(s) : (window.innerWidth < 768 ? 1 : 0.5);
});
const gainNodeRef = useRef(null); // Add a reference for the GainNode
// Effect to save volume & apply gain
// Effect to save volume & apply gain
useEffect(() => {
localStorage.setItem(VOLUME_KEY, volume);
// 1. Control Playback Volume via GainNode (User Experience)
if (gainNodeRef.current && audioCtxRef.current) {
// Smooth transition to avoid clicking
gainNodeRef.current.gain.setTargetAtTime(volume, audioCtxRef.current.currentTime, 0.1);
}
// 2. Control Background Video Volume directly (User Experience)
// ALWAYS MUTE VIDEO per user request
if (videoRef.current) {
videoRef.current.muted = true;
videoRef.current.volume = 0;
}
// 3. CRITICAL: Keep Audio Element Volume at 100% for Recording
// The MediaElementSourceNode extracts the audio.
// We want the source to be full strength for the export tap.
if (audioRef.current) {
audioRef.current.volume = 1.0;
}
}, [volume]);
// --- Custom Drag States ---
const [isDragging, setIsDragging] = useState(false);
const [draggedId, setDraggedId] = useState(null);
const [dropTargetIndex, setDropTargetIndex] = useState(null);
const [dragOverlayPos, setDragOverlayPos] = useState({ x: 0, y: 0 });
const [dragStartOffset, setDragStartOffset] = useState({ x: 0, y: 0 });
const [dragItemWidth, setDragItemWidth] = useState(0);
const dragContainerRef = useRef(null);
// Memory Management Ref
const objectUrlsRef = useRef([]);
// UseRef to store drag state for event listeners to avoid stale closures
const dragLogicState = useRef({ draggedId: null, dropTargetIndex: null });
// Tour State
const [tourActive, setTourActive] = useState(false);
const [tourStep, setTourStep] = useState(0);
const longPressTimer = useRef(null);
// Editor Panel Resizing State
const [panelHeight, setPanelHeight] = useState(savedSettings?.panelHeight || 40);
const [isPanelCollapsed, setIsPanelCollapsed] = useState(false);
// Library View State (Embedded)
const [panelSubView, setPanelSubView] = useState(null); // 'videoLib' | 'audioLib' | null
const [playingAudioPreview, setPlayingAudioPreview] = useState(null);
const videoLibScrollRef = useRef(null);
const audioLibScrollRef = useRef(null);
const imageLibScrollRef = useRef(null);
// Scroll to top when library view opens and stop audio preview when closing
useEffect(() => {
if (panelSubView === 'videoLib' && videoLibScrollRef.current) {
videoLibScrollRef.current.scrollTop = 0;
}
if (panelSubView === 'imageLib' && imageLibScrollRef.current) {
imageLibScrollRef.current.scrollTop = 0;
}
if (panelSubView === 'audioLib' && audioLibScrollRef.current) {
audioLibScrollRef.current.scrollTop = 0;
}
// Stop audio preview when closing the library
if (panelSubView !== 'audioLib') {
setPlayingAudioPreview(null);
}
}, [panelSubView]);
const APP_STEPS = [
{ id: 'media', label: 'الوسائط', number: '1', icon: Layers },
{ id: 'content', label: 'الآيات', number: '2', icon: ListMusic },
{ id: 'style', label: 'التصميم', number: '3', icon: Palette },
{ id: 'export', label: 'الحفظ', number: '4', icon: Download }
];
const videoLibraryFiles = useMemo(() => Array.from({ length: APP_CONFIG.videoCount }, (_, i) => `${i + 1}.mp4`), []);
const imageLibraryFiles = useMemo(() => Array.from({ length: APP_CONFIG.imageCount }, (_, i) => `${i + 1}.jpg`), []);
const audioLibraryFiles = useMemo(() => Array.from({ length: APP_CONFIG.audioCount }, (_, i) => `${i + 1}.mp3`), []);
useEffect(() => {
const tourDone = localStorage.getItem('quranShortsTourDone');
if (!tourDone) setTourActive(true);
}, []);
useEffect(() => { localStorage.setItem('quranShortsSettings', JSON.stringify({ ayahStyle, watermark, overlaySettings, showSiteBranding, panelHeight })) }, [ayahStyle, watermark, overlaySettings, showSiteBranding, panelHeight]);
// Comprehensive cleanup on unmount
useEffect(() => {
return () => {
// Cancel any running animations
if (animationRef.current) {
cancelAnimationFrame(animationRef.current);
}
// Clean all Object URLs
objectUrlsRef.current.forEach(url => {
try { URL.revokeObjectURL(url); } catch (e) { }
});
objectUrlsRef.current = [];
// Clean AudioContext and nodes
if (audioSourceNodeRef.current) {
try { audioSourceNodeRef.current.disconnect(); } catch (e) { }
}
if (gainNodeRef.current) {
try { gainNodeRef.current.disconnect(); } catch (e) { }
}
if (audioCtxRef.current) {
try { audioCtxRef.current.close(); } catch (e) { }
}
// Clean overlay image
if (overlayImageRef.current) {
overlayImageRef.current.src = '';
overlayImageRef.current = null;
}
// Release wake lock
if (wakeLockRef.current) {
try { wakeLockRef.current.release(); } catch (e) { }
}
// Clean video buffer canvas
if (videoBufferCanvas.current) {
const ctx = videoBufferCanvas.current.getContext('2d');
if (ctx) ctx.clearRect(0, 0, videoBufferCanvas.current.width, videoBufferCanvas.current.height);
}
};
}, []);
// === Analytics: Track visitor and heartbeat ===
useEffect(() => {
trackAnalytics('visit');
const heartbeat = setInterval(() => trackAnalytics('heartbeat'), 30000);
return () => clearInterval(heartbeat);
}, []);
const createSafeUrl = (file) => {
const url = URL.createObjectURL(file);
objectUrlsRef.current.push(url);
return url;
};
// Revoke only URLs that have actually been replaced. Active media
// URLs must remain valid until their replacement is committed.
const revokeTrackedUrls = (urls) => {
const targets = new Set(urls || []);
targets.forEach(url => {
try { URL.revokeObjectURL(url); } catch (e) { }
});
objectUrlsRef.current = objectUrlsRef.current.filter(url => !targets.has(url));
};
// Clean a specific URL (when replacing video/audio)
const revokeUrl = (url) => {
if (url && url.startsWith('blob:')) {
try { URL.revokeObjectURL(url); } catch (e) { }
objectUrlsRef.current = objectUrlsRef.current.filter(u => u !== url);
}
};
// Clean up Audio Context nodes
const cleanupAudioNodes = () => {
if (audioSourceNodeRef.current) {
try { audioSourceNodeRef.current.disconnect(); } catch (e) { }
audioSourceNodeRef.current = null;
}
};
// Clean up temporary HTML5 media elements
const cleanupTempMediaElement = (element) => {
if (element) {
try {
element.pause();
element.src = '';
element.load();
} catch (e) { }
}
};
const handleTourNext = () => { if (tourStep < TOUR_STEPS.length - 1) setTourStep(tourStep + 1); else { setTourActive(false); localStorage.setItem('quranShortsTourDone', 'true'); setActiveTab('media'); } };
const handleTourPrev = () => { if (tourStep > 0) setTourStep(tourStep - 1); };
const handleTourSkip = () => { setTourActive(false); localStorage.setItem('quranShortsTourDone', 'true'); setActiveTab('media'); };
const staticSurahInfo = useMemo(() => { if (!timelineData?.length) return ""; const v = timelineData.filter(s => s.surah && s.ayah); if (!v.length) return ""; const f = v[0], l = v[v.length - 1], s = toArabicNumerals(f.ayah), e = toArabicNumerals(l.ayah); return f.ayah === l.ayah ? `${f.surah} (${s})` : `${f.surah} (${s}) - (${e})` }, [timelineData]);
const [dragState, setDragState] = useState({ isDragging: false, target: null, startY: 0, initialItemY: 0, startX: 0, initialItemX: 0 }), [snapState, setSnapState] = useState({ x: false, y: false }), [selectedElement, setSelectedElement] = useState(null), [isExporting, setIsExporting] = useState(false);
const fileInputRef = useRef(null), renderState = useRef({ text: "", opacity: 0, surah: "", ayah: "" }), canvasRef = useRef(null), videoRef = useRef(null), audioRef = useRef(null), audioCtxRef = useRef(null), audioSourceNodeRef = useRef(null), animationRef = useRef(null), overlayImageRef = useRef(null), videoBufferCanvas = useRef(document.createElement('canvas'));
const handleFileUpload = (e, type, mode = 'normal') => {
const f = e.target.files[0]; if (!f) return;
const limits = {
bgImage: 32 * 1024 * 1024,
audio: 40 * 1024 * 1024,
video: (mode === 'extractAudio' ? 250 : 1024) * 1024 * 1024
};
const limit = limits[type] || (type === 'video' ? limits.video : limits.audio);
if (f.size > limit) {
setAlertModal({
visible: true,
title: 'الملف كبير جدًا',
message: `الحد المسموح لهذا النوع هو ${Math.round(limit / 1024 / 1024)} ميغابايت لحماية ذاكرة الجهاز.`,
isSuccess: false
});
e.target.value = null;
return;
}
// Handle Background Image Upload
if (type === 'bgImage') {
const u = createSafeUrl(f);
setBgType('image');
setBgImageSrc(u);
setImageTransform(DEFAULT_IMAGE_TRANSFORM);
const img = new Image();
img.onload = () => { bgImageRef.current = img; };
img.src = u;
e.target.value = null;
return;
}
if (type === 'video' && mode === 'extractAudio') { setTrimmingFile({ file: f, type: 'video', mode: 'extractAudio' }); setShowAudioChoice(false) } else { setTrimmingFile({ file: f, type, mode: 'normal' }); if (type === 'audio') { setShowAudioChoice(false); trackAnalytics('audio', { source: 'upload' }); } } e.target.value = null
};
const handleOverlayImageUpload = (e) => { const f = e.target.files[0]; if (f) { if (f.size > 8 * 1024 * 1024) { setAlertModal({ visible: true, title: 'الصورة كبيرة جدًا', message: 'الحد المسموح لصورة الطبقة هو 8 ميغابايت.', isSuccess: false }); e.target.value = null; return; } const r = new FileReader(); r.onloadend = () => setOverlaySettings(p => ({ ...p, imageSrc: r.result })); r.readAsDataURL(f) } };
// ═══ استقبال مشاركة أندرويد (Share Target) — المرحلة 1 ═══
//
// هذا الطرف الثاني لما يفعله `sw.js`: لوحة مشاركة أندرويد تُرسل
// POST إلى `/index.html`، فيلتقطه الـSW ويخزّن الملف ثم يحوّل إلى
// هنا بـ`?shared=1`. بلا هذا المُستقبِل تُفتح الصفحة والملف قابعٌ
// في المخزن لا يراه أحد — أي ميزةٌ معلَنة في لوحة النظام ولا تفعل
// شيئًا، وهي أسوأ من غيابها.
//
// تُقرأ الحمولة من Cache API **مباشرة** لا بـ`fetch`: العنوان
// `__shared-media` اصطناعي لا وجود له على الخادم، والقراءة المباشرة
// تعني ألّا يحتاج معالج `fetch` أي استثناء له.
useEffect(() => {
if (new URLSearchParams(window.location.search).get('shared') !== '1') return;
if (!window.caches) return;
// تُنزَع العلامة من العنوان **قبل** أي `await`. لو أعاد المستخدم
// التحميل بينما القراءة جارية لَأُعيد الاستقبال على مخزن قد
// فُرِّغ، أو لَعاد فتح المشاهدة نفسها بلا سبب.
try { window.history.replaceState(null, '', window.location.pathname); } catch (e) { /* لا شيء */ }
(async () => {
try {
const cache = await window.caches.open('quran-share-inbox');
const res = await cache.match('./__shared-media');
if (!res) return;
// يُحذف بعد الالتقاط لا بعد النجاح: المقطع قد يبلغ مئات
// الميغابايت، وتركه محتجزًا في الحصة بلا واجهة تفرّغه
// تسريبُ تخزينٍ صامت.
await cache.delete('./__shared-media');
const blob = await res.blob();
if (!blob || !blob.size) return;
const name = decodeURIComponent(res.headers.get('X-Shared-Filename') || 'shared-media');
const mime = res.headers.get('X-Shared-Type') || blob.type || '';
// بعض تطبيقات المشاركة تُرسل بلا نوع MIME، فيُستأنس
// بالامتداد. والافتراض `video` لأن الفيديو هو الغالب
// ولأن مسار الفيديو يتعامل مع ملف بلا مسار صوت بأمان.
const isAudio = mime.startsWith('audio/') || /\.(mp3|m4a|aac|wav|ogg|opus|flac)$/i.test(name);
const file = new File([blob], name, { type: mime || (isAudio ? 'audio/mpeg' : 'video/mp4') });
// المسار نفسه الذي يسلكه الرفع اليدوي: نافذة التقليم
// ذاتها والتحقّق ذاته. لا فرع خاصًّا بالمشاركة يُصان
// على حدة ويتخلّف عن أخيه.
setTrimmingFile({ file, type: isAudio ? 'audio' : 'video', mode: 'normal' });
if (isAudio) setShowAudioChoice(false);
trackAnalytics(isAudio ? 'audio' : 'video', { source: 'share' });
if (window.AppShell) window.AppShell.haptic(12);
} catch (e) {
console.warn('[Share] تعذّر استقبال الملف المشارك:', e);
}
})();
}, []);
useEffect(() => {
if (overlaySettings.imageSrc) {
// Clean previous image if exists to prevent memory leak
if (overlayImageRef.current) {
overlayImageRef.current.src = '';
overlayImageRef.current = null;
}
const i = new Image();
i.src = overlaySettings.imageSrc;
i.onload = () => overlayImageRef.current = i;
} else {
if (overlayImageRef.current) {
overlayImageRef.current.src = '';
overlayImageRef.current = null;
}
}
}, [overlaySettings.imageSrc]);
const confirmReset = () => { setAyahStyle(DEFAULT_AYAH_STYLE); setWatermark(DEFAULT_WATERMARK); setOverlaySettings(DEFAULT_OVERLAY); setShowSiteBranding(DEFAULT_BRANDING); setPanelHeight(55); setImageTransform(DEFAULT_IMAGE_TRANSFORM); localStorage.removeItem('quranShortsSettings'); setShowResetConfirm(false) };
// التصدير يمرّ عبر لوحة مشاركة أندرويد (`AppShell.saveFile`) لا عبر
// `a.download`: النسخة الاحتياطية تُحفظ حيث يريدها المستخدم — درايف،
// «ملفات»، واتساب — لا في مجلّد تنزيلات Chrome وحده. وهذا هو المعنى
// العملي للنسخة الاحتياطية: أن تنجو من مسح بيانات Chrome، وحفظُها
// داخل Chrome لا يُنجيها منه.
//
// وكانت النسخة السابقة لا تُبطل `createObjectURL` أبدًا — تسريبُ
// ذاكرة يبقى إلى إغلاق التبويب. `saveFile` تتولّى الإبطال، والاحتياط
// أدناه يفعله بمهلة سخيّة تناسب الأجهزة البطيئة.
const handleExportSettings = () => {
const b = new Blob([JSON.stringify({ ayahStyle, watermark, overlaySettings, showSiteBranding, panelHeight }, null, 2)], { type: 'application/json' });
const name = `quran_shorts_settings_${Date.now()}.json`;
if (window.AppShell) { window.AppShell.saveFile(b, name, { title: 'إعدادات قرآن شورتس' }); return; }
const u = URL.createObjectURL(b), a = document.createElement('a');
a.href = u; a.download = name; a.click();
setTimeout(() => { try { URL.revokeObjectURL(u); } catch (e) { } }, 120000);
};
const handleImportSettings = (e) => { const f = e.target.files[0]; if (!f) return; const r = new FileReader(); r.onload = (ev) => { try { const i = JSON.parse(ev.target.result); if (i.ayahStyle) setAyahStyle(i.ayahStyle); if (i.watermark) setWatermark(i.watermark); if (i.overlaySettings) setOverlaySettings(i.overlaySettings); if (i.showSiteBranding !== undefined) setShowSiteBranding(i.showSiteBranding); if (i.panelHeight) setPanelHeight(i.panelHeight); setAlertModal({ visible: true, title: "تم بنجاح", message: "تم استيراد الإعدادات بنجاح!", isSuccess: true }) } catch (err) { setAlertModal({ visible: true, title: "خطأ", message: "ملف غير صالح", isSuccess: false }) } }; r.readAsText(f); e.target.value = null };
const handleLibrarySelect = (src) => {
setBgType('video');
setTrimmingFile({ file: src, type: 'video', mode: 'normal' });
setPanelSubView(null); // Close library view
};
const handleLibraryImageSelect = (src) => {
setBgType('image');
setBgImageSrc(src);
setImageTransform(DEFAULT_IMAGE_TRANSFORM);
// Preload image for canvas
const img = new Image();
img.onload = () => { bgImageRef.current = img; };
img.src = src;
setPanelSubView(null);
};
const handleAudioLibrarySelect = async (src) => {
setPlayingAudioPreview(null); // Stop any playing preview
setPanelSubView(null); // Close library view
setShowAudioChoice(false);
setIsProcessingAudio(true);
setSelectedAudioName(src); // Track selected audio name
trackAnalytics('audio', { source: 'library' }); // === Track audio from library ===
try {
const r = await fetch(src), b = await r.blob(), f = new File([b], src.split('/').pop(), { type: "audio/mp3" }), js = src.replace('.mp3', '.json');
let jd = null;
try { const jr = await fetch(js); if (jr.ok) jd = await jr.json() } catch (e) { }
setTrimmingFile({ file: f, type: 'audio', mode: 'normal', jsonData: jd })
} catch (e) {
setAiError("فشل تحميل الملف");
setSelectedAudioName(null); // Reset on error
} finally {
setIsProcessingAudio(false)
}
};
// --- Panel Resize Logic ---
const handlePanelDragStart = (e) => {
const startY = e.touches ? e.touches[0].clientY : e.clientY;
const startHeight = panelHeight;
const screenH = window.innerHeight;
const handleMove = (moveEvent) => {
const currY = moveEvent.touches ? moveEvent.touches[0].clientY : moveEvent.clientY;
const deltaY = startY - currY; // Dragging up increases height (since top is 0)
const newH = startHeight + (deltaY / screenH * 100);
// Constraints: Min 20%, Max 85%
if (newH > 20 && newH < 85) {
setPanelHeight(newH);
setIsPanelCollapsed(false); // Auto expand if resizing
}
};
const handleUp = () => {
window.removeEventListener('mousemove', handleMove);
window.removeEventListener('mouseup', handleUp);
window.removeEventListener('touchmove', handleMove);
window.removeEventListener('touchend', handleUp);
};
window.addEventListener('mousemove', handleMove);
window.addEventListener('mouseup', handleUp);
window.addEventListener('touchmove', handleMove, { passive: false });
window.addEventListener('touchend', handleUp);
};
const handleAutoGenerate = async (targetCategory) => {
// Keep current media alive until every replacement is ready.
// Revoking here used to leave
{/* Decorative Background Elements */}
{/* Header with Close Button */}
{/* Avatar / Icon */}
{/* Bottom Gradient Line */}
تم التطوير بواسطة يمان
Software Engineer
{/* Social Links */}