# مشغّل الفيديو

> يشغّل الفيديو داخل الصفحة بعناصر تحكم كاملة: التشغيل، والتقدم، والتخطي 30 ثانية، والصوت، والإعدادات، وملء الشاشة. والحجم الصغير مصغّرة معنونة تفتح المشغّل.

الصفحة: https://ritla.app/ar/ui/video-player

## التثبيت

يُفتح التثبيت من السجل قريبًا، وهذه هي الأوامر التي ستشغّلها حينها.

```bash
npx ritla add video-player
```

أو بأداة shadcn:

```bash
npx shadcn@latest add @ritla/video-player
```

الاعتماديات: `@base-ui/react`، `@phosphor-icons/react`

## الاستخدام

```tsx
import { VideoPlayer } from "@/components/ui/video-player";

<VideoPlayer
  src="/videos/wallet.webm"
  poster="/videos/wallet.webp"
  title="Set up your wallet"
  captions={[{ src: "/videos/wallet.ar.vtt", srcLang: "ar", label: "العربية", default: true }]}
/>
```

## أمثلة

### مصغّرات معنونة

الحجم الصغير (`size="sm"`) زر يفتح الفيديو، بعنوان وسطر فوقه للجزء والمدة. في العربية يبدأ النص من اليمين، ولا تنعكس أيقونة التشغيل.

معاينة حيّة: https://ritla.app/_kanz/preview/arabic/video-player-thumbnails

## مرجع الخصائص

### `VideoPlayer`

| الخاصية | النوع | الافتراضي | الوصف |
| --- | --- | --- | --- |
| `src / poster` | `string` | لا يوجد | الفيديو وصورة الغلاف قبل التشغيل؛ اختر غلافًا يدل على موضوعه. |
| `title` | `string` | لا يوجد | ما الفيديو: اسم المشغّل، ويُطبع في الحجم الصغير. |
| `size` | `"lg" \| "sm"` | `"lg"` | خاصية Size: الكبير يشغّل في مكانه، والصغير مصغّرة تفتحه. |
| `overline` | `ReactNode` | لا يوجد | سطر قصير فوق العنوان في الحجم الصغير (الجزء والمدة). |
| `captions` | `{ src, srcLang, label, default? }[]` | لا يوجد | مسارات الترجمة (WebVTT)؛ قدّم ترجمة عربية في الصفحات العربية. |
| `onNext` | `() => void` | لا يوجد | زر «التالي»؛ لا يظهر دونه. |
| `onOpen` | `() => void` | لا يوجد | في الحجم الصغير: يفتح الفيديو (في نافذة حوارية أو صفحة). |

## إمكانية الوصول

لوحة المفاتيح (المفاتيح مكتوبة للاتجاه من اليسار إلى اليمين، ويتبادل السهمان في الاتجاه من اليمين إلى اليسار):

- `Space`: تشغيل أو إيقاف مؤقت عندما يكون التركيز على المشغّل.
- `ArrowLeft` + `ArrowRight`: رجوع أو تقديم 5 ثوانٍ، بالاتجاه نفسه في العربية؛ وعلى شريط التشغيل ثانية واحدة.
- `M`: كتم الصوت أو إلغاؤه.
- `F`: ملء الشاشة أو الخروج منه.

ARIA:

- كل عنصر تحكم زر باسم (تشغيل، إيقاف مؤقت، رجوع 30 ثانية)، والاسم يتغير مع الحالة.
- شريط التشغيل منزلق يقرأ الوقت نصًا: «0:23 من 4:39».
- عناصر التحكم تظهر عند الإيقاف وعند المرور أو التركيز أو اللمس، ولا تختفي ما دام الفيديو موقوفًا.
- لا تشغيل تلقائي، والترجمة اختيار في الإعدادات وليست مدمجة في الصورة.

## ملاحظات العربية والاتجاه

ينعكس:

- العنوان والسطر فوقه في الحجم الصغير، والترجمة، وقائمة الإعدادات، والتخطيط حول المشغّل.

لا ينعكس:

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

الأرقام: الأوقات بالأرقام الغربية ما لم يستخدم المنتج الأرقام المشرقية.

الخط العربي: الأوقات `body-12` بوزن Semibold بالأبيض، والعنوان في الحجم الصغير `body-16` Semibold فوق سطر `body-12`.

النص ثنائي الاتجاه: شريط التحكم جزيرة LTR داخل الصفحة العربية.