import React from 'react'; import { useVideoState } from './useVideoState'; import { motion, useTransform, AnimatePresence, type MotionValue } from 'framer-motion'; import { Bell, BookOpen, Bot, Brain, Check, ChevronRight, DocumentCard, FileText, Folder, LayoutDashboard, LogOut, MessageSquare, Pause, Play, Plus, Send, Settings, Sparkles, Star, User, X } from 'lucide-react'; import { Area } from 'recharts'; // ─── Scene Components ───────────────────────────────────────────────────── function Scene0({ time }: { time: MotionValue }) { // No useTransform needed for this scene as all elements are visible from the start, // with initial framer-motion animations handling their appearance. return (

{/* NotebookLM Logo & Name */} NotebookLM {/* Main Title */} 5 طرق قوية لتحويل مراجعك التعليمية إلى موارد ذكية!

); } function Scene1({ time }: { time: MotionValue }) { return (

ما ستتعلمه

إنشاء أسئلة مراجعة شاملة من ملاحظاتك الدراسية.
توليد ملخصات صوتية لفهم المفاهيم المعقدة أثناء التنقل.
تحليل المستندات الطويلة واستخراج النقاط الرئيسية في دقائق.
ربط عدة مصادر لاكتشاف الروابط والمواضيع المشتركة.
استخدام الاقتباسات المدعومة بالمصادر لكتابة أوراق بحثية موثوقة.

); } function Scene2({ time }) { const pdfOpacity = useTransform(time, [9.8, 10.8], [0, 1]); return ( {/* Main content area (left) */}

ابدأ محادثة مع مصادرك

اطرح أسئلة، لخص، أو اطلب من NotebookLM إنشاء مسودات بناءً على مستنداتك.

{/* Sidebar (right) */}

المصادر

{/* Upload area */}

تحميل مستند

أو اسحب ملفات PDF إلى هنا

{/* Uploaded document list */}

ملاحظات تاريخ الفن.pdf

); } function Scene3({ time }: { time: MotionValue }) { // Prompt text opacity animation const promptOpacity = useTransform(time, [6.0, 6.5], [0, 1], { clamp: true }); // Cursor blinking animation (0.4s on, 0.4s off) const cursorBlink = useTransform(time, (t) => { if (t >= 6.0 && t < 11.5) { const phase = (t - 6.0) % 0.8; return phase < 0.4 ? 1 : 0; } return 0; // Cursor off outside of the active phase }); // Cursor fade-in at start, fade-out at end of typing phase const cursorVisibility = useTransform(time, [5.9, 6.0, 11.5, 11.6], [0, 1, 1, 0], { clamp: true }); // Combined opacity for the cursor const finalCursorOpacity = useTransform([cursorBlink, cursorVisibility], ([blink, visible]) => blink * visible); return ( {/* Main Chat Area */}

{/* Chat History (empty/placeholder) */}

ابدأ الدردشة هنا

{/* Chat Input */}

أنشئ مجموعة من 10 أسئلة مراجعة بناءً على هذه الملاحظات، مع الإجابات.

{/* Sidebar (Sources Panel) */}

المصادر

ملاحظات المحاضرة - الفصل الأول.pdf

تم التحميل بنجاح

أضف مصدرًا

); } function Scene4({ time }: { time: MotionValue }) { const answersOpacity = useTransform(time, [2.5, 3.0], [0, 1]); const sourceOpacity = useTransform(time, [4.0, 4.5], [0, 1]); const questions = [ { q: "ما هي أهمية استخدام NotebookLM في تنظيم الملاحظات؟", a: "يساعد NotebookLM في تنظيم الملاحظات عن طريق تلخيصها وتوليد أسئلة مراجعة، مما يجعل عملية التعلم أكثر فعالية.", source: "مقدمة في NotebookLM.pdf", }, { q: "كيف يساهم NotebookLM في تعزيز فهم المحتوى؟", a: "يعزز NotebookLM الفهم من خلال توفير ملخصات سريعة وإنشاء أسئلة اختبار ذات صلة بالمحتوى الذي تم تحميله.", source: "مبادئ التعلم الفعال.docx", }, { q: "اذكر فائدتين رئيسيتين لاستخدام NotebookLM للمراجعة.", a: "الفائدتان الرئيسيتان هما: توفير الوقت في إعداد أسئلة المراجعة، وضمان أن الأسئلة مركزة على المواد الدراسية الخاصة بك.", source: "دليل المستخدم لـ NotebookLM.pdf", }, { q: "كيف يمكن لميزة توليد الأسئلة أن تدعم التعلم التعاوني؟", a: "يمكن للطلاب مشاركة الأسئلة التي تم إنشاؤها بواسطة NotebookLM مع زملائهم لاختبار بعضهم البعض وتعزيز الفهم الجماعي.", source: "استراتيجيات التعلم التعاوني.ppt", }, ]; return (

مخرجات NotebookLM

أسئلة مراجعة تم إنشاؤها (10 أسئلة)

{questions.map((item, index) => (

{index + 1}. {item.q}

الإجابة: {item.a}

المصدر: {item.source}

))} {/* Placeholder for more questions to reach 10, keeping the UI compact */}

5. سؤال إضافي تم إنشاؤه بواسطة NotebookLM.

الإجابة: إجابة توضيحية للسؤال الخامس هنا.

المصدر: المستندات المرفوعة.

... والمزيد من الأسئلة (حتى 10)

); } function Scene5({ time }: { time: MotionValue }) { const buttonGlowOpacity = useTransform( time, [4.0, 4.5, 7.0, 7.5], // Start highlight, full highlight, end full highlight, fade out [0, 1, 1, 0], { clamp: true } ); const buttonScale = useTransform( time, [7.5, 7.6, 7.8], // Click start, depressed, release [1, 0.95, 1], { clamp: true } ); const generatingMessageOpacity = useTransform( time, [7.8, 8.3], // Message appears after click [0, 1], { clamp: true } ); return ( {/* Top Header */}

NotebookLM

{/* Main Content Area */}

{/* Right Sidebar (Navigation) */}

لوحة التحكم

المصادر

المحادثات

الإعدادات

تسجيل الخروج

{/* Article View Area */}

مقال بحثي: تأثير تغير المناخ على النظم البيئية البحرية

المؤلفون: د. أحمد السيد، أ. ليلى محمد
تاريخ النشر: 15 مارس 2023

يستعرض هذا المقال البحثي التأثيرات المتعددة لتغير المناخ على النظم البيئية البحرية في جميع أنحاء العالم. تركز الدراسة على ارتفاع درجة حرارة المحيطات، وتحمض المحيطات، وذوبان الجليد القطبي، وتأثيراتها المتتالية على التنوع البيولوجي البحري، والشعاب المرجانية، ومصايد الأسماك.

تشير النتائج إلى أن الارتفاع المستمر في درجات الحرارة يهدد بقاء العديد من الأنواع البحرية، مما يؤدي إلى تحولات في توزيع الأنواع وتدهور الموائل الحيوية. كما يؤثر تحمض المحيطات سلبًا على الكائنات ذات الأصداف الكلسية، مما يعرض السلاسل الغذائية للخطر.

يقدم المقال توصيات للسياسات والإجراءات التخفيفية للتصدي لهذه التحديات، بما في ذلك الحد من انبعاثات الكربون، وتعزيز الحماية البحرية، وتطوير استراتيجيات التكيف للمجتمعات الساحلية.

توليد نظرة عامة صوتية جاري التوليد...

); } function Scene6({ time }) { const buttonClickTime = 2.0; const audioPlayerAppearStartTime = 3.3; const audioPlayerAppearEndTime = 3.8; const audioPlaybackDuration = 12.0; // Total duration for the progress bar animation const buttonScale = useTransform( time, [buttonClickTime, buttonClickTime + 0.1, audioPlayerAppearStartTime], [1, 0.95, 0] ); const buttonOpacity = useTransform( time, [audioPlayerAppearStartTime, audioPlayerAppearEndTime], [1, 0] ); const buttonPointerEvents = useTransform( time, [audioPlayerAppearStartTime, audioPlayerAppearEndTime], ['auto', 'none'] ); const audioPlayerOpacity = useTransform( time, [audioPlayerAppearStartTime, audioPlayerAppearEndTime], [0, 1] ); const audioProgress = useTransform( time, [audioPlayerAppearStartTime, audioPlayerAppearStartTime + audioPlaybackDuration], [0, 1] ); const audioProgressWidth = useTransform(audioProgress, (v) => `{"$"}{"{"}v * 100}%`); const audioProgressHandleRight = useTransform(audioProgress, (v) => `{"$"}{"{"}v * 100}%`); const text1Opacity = useTransform(time, [4.0, 4.5], [0, 1]); const text2Opacity = useTransform(time, [6.0, 6.5], [0, 1]); const text3Opacity = useTransform(time, [8.0, 8.5], [0, 1]); const text4Opacity = useTransform(time, [10.0, 10.5], [0, 1]); return (

{/* Right Sidebar - Document List */}

المصادر

مقال عن الذكاء الاصطناعي

ملخص كتاب "العادات الذرية"

ملاحظات محاضرة

{/* Main Content Area */}

{/* Right Panel - Document View */}

مقال: الذكاء الاصطناعي ومستقبل التعليم

يشهد العالم تحولًا رقميًا غير مسبوق، ويقف الذكاء الاصطناعي (AI) في طليعة هذه الثورة. تتأثر جميع القطاعات، ومنها قطاع التعليم، بشكل كبير بتطورات الذكاء الاصطناعي. لم يعد السؤال هو ما إذا كان الذكاء الاصطناعي سيؤثر على التعليم، بل كيف سيغيره، وكيف يمكننا استغلال إمكاناته لتعزيز تجربة التعلم وتحسين النتائج التعليمية.

من أبرز تطبيقات الذكاء الاصطناعي في التعليم هو التخصيص. يمكن لأنظمة الذكاء الاصطناعي تحليل بيانات أداء الطلاب وتحديد نقاط القوة والضعف لكل فرد، ثم تقديم مسارات تعليمية مخصصة وموارد تعليمية تتناسب مع احتياجاتهم وأساليب تعلمهم الفريدة. هذا يتيح للطلاب التعلم بالسرعة التي تناسبهم وبطرق تتفاعل معهم بشكل أفضل، مما يزيد من فعاليتهم وتحفيزهم.

{/* Left Panel - NotebookLM AI */}

ملخصات NotebookLM

{/* Initial state: Generate Audio Overview Button */}

اطلب من NotebookLM أن يلخص لك المقال أو يجيب على أسئلتك.

Generate Audio Overview {/* Audio Player and Summary Text */}

0:45 / 1:30

ملخص المقال: الذكاء الاصطناعي يحدث ثورة في التعليم، مما يتيح التخصيص الفردي للطلاب. يمكن للذكاء الاصطناعي تحليل أداء الطلاب وتقديم مسارات تعليمية مخصصة، مما يعزز الفعالية والتحفيز. هذا يسمح بتحويل وقتك الضائع إلى فرص تعلم قيمة أثناء الأنشطة اليومية مثل المشي أو القيادة. استفد من قوة الذكاء الاصطناعي لتعزيز رحلتك التعليمية.

); } function Scene7({ time }: { time: MotionValue }) { const documentText1 = "تهدف هذه السياسة إلى تحديد الإطار العام لجهود مجلس المحافظة في تحقيق التنمية المستدامة عبر جميع قطاعاته. نؤكد على التزامنا بتوفير بيئة صحية، اقتصاد مزدهر، ومجتمع عادل للأجيال الحالية والمستقبلية. يشمل ذلك دمج مبادئ الاستدامة في عمليات صنع القرار والتخطيط الاستراتيجي."; const documentText2 = "تتضمن المبادئ الأساسية لهذه السياسة الشفافية، المساءلة، المشاركة المجتمعية، والابتكار. سيتم العمل على تعزيز التعاون بين الجهات الحكومية، القطاع الخاص، والمجتمع المدني لتحقيق الأهداف المشتركة. كما سنركز على استخدام الموارد بكفاءة، تقليل النفايات، وتشجيع الحلول الصديقة للبيئة."; const documentText3 = "لضمان التنفيذ الفعال، سيتم تطوير مؤشرات أداء رئيسية (KPIs) لمراقبة التقدم المحرز بشكل دوري. سيتم إجراء مراجعات سنوية للسياسة وتحديثها حسب الحاجة لضمان استجابتها للتحديات المتغيرة والفرص الجديدة. ندعو جميع الأطراف المعنية للمساهمة بفاعلية في هذه المبادرة الهامة."; const documentText4 = "تعتبر هذه السياسة جزءًا لا يتجزأ من رؤية المحافظة الشاملة للتنمية، والتي تسعى إلى بناء مستقبل أفضل لجميع سكانها. سيتم توفير الموارد اللازمة والدعم الفني لجميع الإدارات لتطبيق هذه المبادئ في عملها اليومي. نحن نؤمن بأن التنمية المستدامة هي مسؤولية جماعية تتطلب تضافر الجهود."; return (

{/* Sidebar */}

NotebookLM

المصادر

المفكرة

الإعدادات

{/* Main Content Area */}

{/* Document Viewer */}

سياسة مجلس المحافظة بشأن التنمية المستدامة

{/* Added pr-2 for scrollbar spacing */}

{documentText1}

{documentText2}

{documentText3}

{documentText4}

{/* Chat Input */}

); } function Scene8({ time }) { const promptText = "ما هي التغييرات الرئيسية المقترحة في هذه الوثيقة وكيف قد تؤثر على السكان المحليين؟ لخصها في 3 نقاط رئيسية."; // Animate the prompt text appearing in the input field. // It starts to appear around 2.0s and is fully visible by 2.5s. const promptOpacity = useTransform(time, [2.0, 2.5], [0, 1]); return (

{/* Placeholder for chat history or main content, mostly empty for this scene */}

مرحبًا بك في NotebookLM!

ابدأ بإدخال موجه في حقل الدردشة أدناه.

{/* Chat Input Area */}

); } function Scene9({ time }: { time: MotionValue }) { const summaryPoint1Opacity = useTransform(time, [3.0, 3.5], [0, 1]); const summaryPoint2Opacity = useTransform(time, [7.5, 8.0], [0, 1]); const summaryPoint3Opacity = useTransform(time, [12.0, 12.5], [0, 1]); const summaryPoint1 = "1. التغييرات المقترحة في سياسة التنمية المحلية، مع تفصيل آثارها المحتملة على المجتمعات السكانية المحلية، وتحديد المناطق الأكثر تأثراً. (الوثيقة: القسم 3.1، الفقرة 2)"; const summaryPoint2 = "2. الأسباب الرئيسية وراء الحاجة إلى هذه التغييرات، بما في ذلك التحديات الاقتصادية والاجتماعية التي تهدف السياسة الجديدة لمعالجتها. (الوثيقة: المقدمة، القسم 1.5)"; const summaryPoint3 = "3. الخطوات التنفيذية المقترحة لضمان انتقال سلس وتخفيف الآثار السلبية، مع التركيز على برامج الدعم المجتمعي. (الوثيقة: القسم 4.2، الجدول ب)"; return (

{/* Chat Header */}

NotebookLM - ملخص المستند

{/* Chat Messages Area */}

{/* AI Response Bubble */}

ملخص NotebookLM

{summaryPoint1} {summaryPoint2} {summaryPoint3}

{/* User Prompt (static for context) */}

"لخص لي هذا المستند الطويل في نقاط رئيسية."

{/* Chat Input */}

); } function Scene10({ time }: { time: MotionValue }) { // Document appearance timings const doc1Opacity = useTransform(time, [13.5, 14.0], [0, 1]); // شرائح محاضرة const doc2Opacity = useTransform(time, [15.5, 16.0], [0, 1]); // فصل من كتاب مدرسي const doc3Opacity = useTransform(time, [17.5, 18.0], [0, 1]); // ورقة بحثية // Overall "connection" highlight for the main content area (subtle) const mainContentScale = useTransform(time, [5.5, 6.0, 12.0, 12.5], [1, 1.01, 1.01, 1]); const mainContentShadow = useTransform(time, [5.5, 6.0, 12.0, 12.5], ['0 0 #0000', '0 0 15px rgba(99, 102, 241, 0.2)', '0 0 15px rgba(99, 102, 241, 0.2)', '0 0 #0000']); // Placeholder components for missing icons const Sparkles = ({ size, className }) => ✨; const LayoutDashboard = ({ size }) => 📊; const Star = ({ size }) => ⭐; const Settings = ({ size }) => ⚙️; const LogOut = ({ size }) => 🚪; const ChevronRight = ({ size, className }) => ›; const Plus = ({ size }) => +; const Video = ({ size }) => 🎬; const Code = ({ size }) => 💻; const Terminal = ({ size }) => 📄; const Bot = ({ size, className }) => 🤖; const Brain = ({ size }) => 🧠; const DocumentCard = ({ title, icon, opacity }: { title: string; icon: React.ElementType; opacity: MotionValue }) => (

{React.createElement(icon, { size: 20 })}

{title} ); return ( {/* Main Container for NotebookLM UI */}

{/* Right Sidebar - Mock NotebookLM Navigation */}

NotebookLM

تسجيل الخروج

{/* Main Content Area */}

{/* Sources on right, Main view on left */} {/* Sources Panel */}

المصادر

{/* Main View / Chat Area */}

اكتشاف الروابط بين مصادرك

قم بتحميل عدة مستندات ودع NotebookLM يستخلص العلاقات والمواضيع المشتركة بينها لمساعدتك في البحث والتحليل.

); } function Scene11({ time }: { time: MotionValue }) { const promptText = "قارن بين المفاهيم الرئيسية التي وردت في شرائح المحاضرة والفصل الدراسي والورقة البحثية. اذكر أي تناقضات أو نقاط مشتركة."; // Animate the prompt appearing over 4 seconds const promptOpacity = useTransform(time, [3.0, 7.0], [0, 1]); return ( {/* Header for NotebookLM */}

NotebookLM

{/* Main Chat Area */}

{/* Example AI response - visible at t=0 */}

مرحباً! كيف يمكنني مساعدتك في تنظيم وتلخيص مراجعك التعليمية اليوم؟

{/* Chat Input Area */}

); } function Scene12({ time }) { // TIMING MAP: // [0.0s - 1.7s] "والنتيجة مذهلة!" (3 words = 1.2s + 0.5s pause) // [1.7s - 6.45s] "قام NotebookLM بتحليل جميع المصادر الثلاثة وقدم لي مقارنة مفصلة،" (10 words = 4.0s + 0.25s comma + 0.5s pause) // [6.45s - 9.35s] "مبرزاً المفاهيم المشتركة وأي تناقضات." (6 words = 2.4s + 0.5s pause) // [9.35s - 13.3s] "هذا مفيد بشكل خاص للبحث وكتابة المقالات،" (8 words = 3.2s + 0.25s comma + 0.5s pause) // [13.3s - 18.6s] "حيث يساعدك على بناء فهم أعمق للموضوع من خلال ربط المعلومات من مصادر متعددة." (12 words = 4.8s + 0.5s pause) // Animation for NotebookLM response: // Start fade-in: 1.7s // End fade-in: 4.7s (3 seconds duration) const messageOpacity = useTransform(time, [1.7, 4.7], [0, 1]); return (

{/* Chat Header */}

محادثة مع NotebookLM

{/* Chat Messages Area */}

{/* User Message (visible from start) */}

{/* User messages are on the right in RTL chat, so align to start in flex-row-reverse context */}

قارن بين المصادر الثلاثة المرفقة حول موضوع الذكاء الاصطناعي التوليدي.

{/* NotebookLM Response (animated) */} {/* AI messages are on the left in RTL chat, so align to end in flex-row-reverse context */}

تحليل مقارن: الذكاء الاصطناعي التوليدي

بالتأكيد! إليك مقارنة مفصلة للمفاهيم المشتركة والاختلافات الرئيسية بين المصادر الثلاثة:

المفاهيم المشتركة:

تعريف الذكاء الاصطناعي التوليدي [1, 2, 3]
تطبيقات في الفن والكتابة [1, 3]
التحديات الأخلاقية والاعتبارات المستقبلية [2, 3]

الاختلافات الرئيسية:

المصدر 1 يركز على الجوانب التقنية وتطور النماذج الكبيرة [1]
المصدر 2 يناقش التأثيرات الاجتماعية والاقتصادية بشكل أعمق [2]
المصدر 3 يقدم دراسات حالة لتطبيقات عملية في الصناعة والبحث [3]

{/* Chat Input Area */}

); } function Scene13({ time }) { const aiResponseOpacity1 = useTransform(time, [2.5, 3.5], [0, 1]); // First sentence of AI response const aiResponseOpacity2 = useTransform(time, [3.5, 4.5], [0, 1]); // Second sentence const aiResponseOpacity3 = useTransform(time, [4.5, 5.5], [0, 1]); // Third sentence return ( {/* Right Sidebar - Documents */}

NotebookLM

مستنداتك

ورقة بحثية عن الذكاء الاصطناعي

مقدمة في تعلم الآلة

تاريخ الشبكات العصبية

{/* Main Chat Area */}

{/* Chat Messages */}

{/* User Query - visible at time=0 */}

{'لخص مفهوم الذكاء الاصطناعي من المصادر التي قمت بتحميلها.'}

{/* AI Response Card - structure visible at time=0, content animates */}

ملخص المفهوم

{'الذكاء الاصطناعي (AI) هو مجال واسع في علوم الحاسوب يهدف إلى إنشاء آلات ذكية يمكنها التفكير والتصرف مثل البشر'} 1 {'يتضمن ذلك التعلم الآلي، معالجة اللغة الطبيعية، والرؤية الحاسوبية'} 2 {'تطبيقاته تتراوح من الروبوتات إلى السيارات ذاتية القيادة وأنظمة التوصية'} 3

{/* Chat Input */}

); } function Scene14({ time }: { time: MotionValue }) { const promptText = "لخص لي مفهوم [النظرية المعرفية] من هذه المصادر مع إدراج الاقتباسات."; // Fade in the prompt text content const promptContentOpacity = useTransform(time, [2.0, 2.5], [0, 1]); // Animate the send button's background and text color, and enable it const sendButtonBg = useTransform(time, [2.5, 3.0], ["#e2e8f0", "#4f46e5"]); // from slate-200 to indigo-600 const sendButtonTextColor = useTransform(time, [2.5, 3.0], ["#64748b", "#ffffff"]); // from slate-500 to white const sendButtonPointerEvents = useTransform(time, [2.5, 2.51], ["none", "auto"]); // Make button clickable after text appears // Initial blinking cursor (before text appears) // Blinks from 0s, then fades out as text starts appearing at 2.0s const initialCursorOpacity = useTransform(time, [0, 0.4, 0.8, 1.2, 1.6, 2.0, 2.01], [1, 0, 1, 0, 1, 0, 0]); // Final blinking cursor (after text appears) // Appears at 2.5s and blinks continuously const finalCursorOpacity = useTransform(time, v => { if (v < 2.5) return 0; // Not visible before 2.5s const blinkCycle = (v - 2.5) % 0.8; // Cycle every 0.8 seconds return blinkCycle < 0.4 ? 1 : 0; // Visible for 0.4s, hidden for 0.4s }); return (

{/* Header */}

NotebookLM

{/* Chat area - displays content from bottom up */}

{/* Example of a previous message, visible from time=0 */}

أهلاً بك في NotebookLM! كيف يمكنني مساعدتك اليوم؟

{/* Input area */}

{/* Blinking cursor before text appears */} {/* Blinking cursor after text appears */}

إرسال

); } function Scene15({ time }) { const citation1Opacity = useTransform(time, [2.5, 3.0], [0.6, 1]); const citation2Opacity = useTransform(time, [3.0, 3.5], [0.6, 1]); const source1Opacity = useTransform(time, [5.0, 5.5], [0.6, 1]); const source2Opacity = useTransform(time, [5.5, 6.0], [0.6, 1]); return (

{/* Chat Panel (Right side in RTL, so left visually) */}

NotebookLM

{/* Chat message */}

ملخص:

تمثل نظرية التطور أحد الركائز الأساسية في البيولوجيا الحديثة [1] . تنص هذه النظرية على أن الكائنات الحية تتغير بمرور الوقت من خلال عملية الانتقاء الطبيعي، مما يؤدي إلى تنوع الأنواع [2] . وقد قدم داروين أدلة قوية لدعم هذه الفكرة في كتابه "أصل الأنواع" [1] .

{/* Source Documents Panel (Left side in RTL, so right visually) */}

المصادر

{/* Source 1 */} [1]

أصل الأنواع

تشارلز داروين

{/* Source 2 */} [2]

مقدمة في البيولوجيا

كتاب جامعي

); } function Scene16({ time }: { time: MotionValue }) { return (

الخلاصة: حول مراجعك إلى قوة تعليمية!

أسئلة مراجعة فورية
ملخصات صوتية مريحة
تحليل مستندات سريع
ربط مصادر متعددة
اقتباسات دقيقة

مع NotebookLM، كل مرجع يصبح نقطة انطلاق لتعلم أعمق وأكثر فعالية.

); } // ─── Scene Error Boundary ───────────────────────────────────────────────── class SceneErrorBoundary extends React.Component< { children: React.ReactNode; sceneIndex: number }, { error: string | null } > { constructor(props: { children: React.ReactNode; sceneIndex: number }) { super(props); this.state = { error: null }; } static getDerivedStateFromError(err: Error): { error: string } { return { error: err.message }; } componentDidCatch(err: Error) { // Notify the host (StudioPlayer) so it can show the Auto-Fix / Show Code overlay try { window.parent.postMessage({ type: 'scene-boundary-error', message: err.message }, '*'); } catch (_) {} } render() { if (this.state.error) { return (

⚠️

Scene {this.props.sceneIndex + 1} rendering error

{this.state.error}

); } return this.props.children; } } // ─── App Wrapper ───────────────────────────────────────────────────────── export default function App() { const { time, sceneIndex } = useVideoState(); return (

{sceneIndex === 0 && } {sceneIndex === 1 && } {sceneIndex === 2 && } {sceneIndex === 3 && } {sceneIndex === 4 && } {sceneIndex === 5 && } {sceneIndex === 6 && } {sceneIndex === 7 && } {sceneIndex === 8 && } {sceneIndex === 9 && } {sceneIndex === 10 && } {sceneIndex === 11 && } {sceneIndex === 12 && } {sceneIndex === 13 && } {sceneIndex === 14 && } {sceneIndex === 15 && } {sceneIndex === 16 && }

); }

5 طرق قوية لتحويل مراجعك إلى موارد تعليمية ذكية!

أنشئ درسك التعليمي الخاص