Loty

اتفرجوا سوا، في نفس الثانية.
_{Watch anything together, on the same second — YouTube and playlists, Vimeo, direct links, local files, or a live broadcast of any tab.}

---

Loty غرفة مشاهدة جماعية: حد يعمل غرفة، يبعت اللينك أو الكود، وكل اللي جوه بيتفرجوا على نفس الفيديو في نفس اللحظة، بيتكلموا بالشات أو بالصوت، ويتفاعلوا على اللقطة وهي شغّالة.

بيشغّل إيه

المصدر	إزاي
يوتيوب	فيديو، Shorts، لايف، Music، وأي شكل لينك (حتى لو v= مش أول باراميتر أو اللينك من زرار المشاركة)
بلاي ليستات يوتيوب	الليستة بتتفك وبتبقى قايمة الغرفة، فالكل على نفس الفيديو دايمًا
Vimeo	عام أو غير مدرج (بالـ hash)
روابط مباشرة	MP4 و WebM و MOV و MP3 و HLS (.m3u8)
ملف من جهازك	كل واحد يفتح نسخته والتشغيل متزامن، أو صاحب الملف يبثّه للباقي
أي تاب أو شاشة	بث مباشر WebRTC: كورس، منصة محتاجة حساب، أي موقع — واحد بس يفتحه والباقي يتفرج

المميزات

1. مزامنة بساعة السيرفر مش بأوامر. السيرفر شايل حالة التشغيل بتوقيتها، وكل جهاز بيقيس فرق ساعته عن السيرفر (زي NTP). الانحراف الصغير بيتقفل بتسريع أو تبطيء خفيف (±٨٪) من غير قفزة، والكبير بـseek. في الاختبار بين متصفحين: فرق ٠٫٠١–٠٫٠٣ ثانية.
2. حل مشكلة البلاي ليست. كان المشغّل بيمشي في الليستة لوحده عند كل واحد، فأي إعلان أو فيديو محذوف كان بيفرّق الناس. دلوقتي الليستة بتتقري مرة واحدة وبتبقى قايمة الغرفة.
3. البث من الشاشة ("من ظرف واحد"). للكورسات والمواقع اللي محتاجة تسجيل دخول: صاحب الحساب يفتح التاب ويبثّه، والباقي يتفرج من غير حساب. ولو يوتيوب رفض فيديو معيّن برا موقعه، المشغّل بيعرض البث كحل بضغطة.
4. الغرفة بتستنى اللي النت عنده بطيء — لحد ٨ ثواني، وبعدها بتكمّل وهو بيلحق لوحده، عشان واحد ما يوقّفش الكل.
5. شات صوتي بصوت الفيديو بيوطى لوحده وحد بيتكلم، وحلقة خضرا حوالين اللي بيتكلم.
6. تفاعلات Three.js بتطلع فوق الفيديو عند الكل في نفس اللحظة (❤️ 😂 😮 😢 🔥 👏، أو الأرقام ١–٦ من الكيبورد).
7. إضاءة محيطة (Ambilight). الشاشة بتنوّر الأوضة بلون الحافة المقابلة في الفيديو — من البكسلات نفسها للملفات والبث، ومن الصورة المصغّرة ليوتيوب و Vimeo.
8. قايمة مشتركة بترتيب بالسحب، "شغّل دلوقتي / بعد اللي شغّال / آخر القايمة"، وتشغيل تلقائي للي بعده.
9. مضيف وصلاحيات. "الكل يتحكم" أو "المضيف بس" (والباقي يقترح لآخر القايمة)، قفل الغرفة بحيث أي حد جديد يستأذن، نقل الإدارة، وإخراج حد.
10. الأوقات في الشات لينكات. اكتب 12:34 وتبقى زرار ينقل الغرفة كلها للّحظة دي. ولينكات الفيديو في الشات ليها زرار "ضيفه".
11. سرعة تشغيل للغرفة كلها (0.5× لـ 2×) — مفيدة للكورسات.
12. مشغّل صغير عائم على الموبايل تسحبه وترميه لأي ركن وانت بتقرا الشات.
13. إعادة اتصال من غير ما تخرج. Reload أو نفق بيقطع؟ بترجع لنفس مكانك ونفس دورك لمدة ٩٠ ثانية.
14. دعوة بـ QR وكود من ٦ حروف مفيهوش حروف بتتلخبط (مفيش 0/O ولا 1/I/L)، ومشاركة من قايمة النظام أو واتساب.
15. لحد ١٢ شخص في الغرفة بدل اتنين، وبيتثبّت كتطبيق (PWA).

الفرق عن غيره

• مفيش حساب ولا إضافة للمتصفح. لينك وخلاص.
• الإضاءة المحيطة والتفاعلات ثلاثية الأبعاد مش موجودين في أدوات المشاهدة الجماعية المعتادة.
• البث بيحل اللي مفيش أداة مزامنة بتحلّه: المواقع اللي محتاجة حساب والكورسات.
• التصميم على قواعد Apple للواجهات "السايلة": كل حاجة بتتسحب بتتبع الصباع 1:1 وتتمسك في نص الحركة. التفاصيل في docs/DESIGN.md.

حدود لازم تعرفها

• المحتوى المحمي بـ DRM (نتفليكس، شاهد، Disney+ وغيرهم) بيطلع شاشة سودا في أي بث — ده من المتصفح نفسه، مش من Loty.
• البث محتاج كمبيوتر (Chrome أو Edge أو Firefox). الموبايل يتفرج عادي بس مايقدرش يبث (المتصفحات على الموبايل مش بتدعم مشاركة الشاشة). صوت التاب بيتبعت في Chrome و Edge لما تختار "تاب" وتعلّم على مشاركة الصوت.
• البث طالع من جهاز اللي بيبث: نسخة لكل مشاهد. على نت بيت عادي ده مريح لحد ٥ مشاهدين تقريبًا.
• شبكات الموبايل غالبًا ورا NAT صعب، والبث والصوت محتاجين سيرفر TURN (تحت).
• الغرف في الذاكرة: لو السيرفر اتعمله restart الغرف بتتمسح.

تشغيله

محتاج Node.js 22.18 أو أحدث (بيشغّل TypeScript مباشرة).

npm install
npm run dev          # السيرفر على 4000 والواجهة على http://localhost:5173

للنسخة النهائية:

npm run build
npm start            # http://localhost:4000

الأمر	بيعمل إيه
npm test	اختبارات الروابط والمزامنة ومنطق الغرف
npm run typecheck	فحص الأنواع للسيرفر والواجهة
npm run icons	يطلّع أيقونات PNG من client/public/icon.svg

تشغيله من جهازك للناس (من غير استضافة)

على ويندوز: دبل كليك على share.bat. بيبني المشروع، يشغّل السيرفر، ويفتح نفق ngrok على الدومين الثابت المجاني بتاعك (بيسألك عليه أول مرة بس). الرابط اللي يطلعلك ابعته لأي حد.

• الجهاز لازم يفضل شغّال وانتوا بتتفرجوا.
• أول مرة حد يفتح الرابط، ngrok بيعرض صفحة تحذير. يدوس Visit Site مرة واحدة ويكمّل.
• الفيديو نفسه مش بيعدّي على جهازك (يوتيوب من جوجل، والبث من جهاز لجهاز)، فالنت عندك مش هيتقل.

النشر

الريبو فيه render.yaml: على Render اختار New → Blueprint والريبو ده، وهيتبني ويشتغل لوحده. أي استضافة Node تنفع بنفس الأمرين:

npm ci --include=dev && npm run build   # build
npm start                               # start

لازم HTTPS عشان المايك والبث يشتغلوا (Render بيوفّره).

متغيرات البيئة

المتغير	لازمته
PORT	البورت (افتراضي 4000)
CF_TURN_KEY_ID · CF_TURN_API_TOKEN	الأسهل: TURN من Cloudflare (أول 1000 جيجا في الشهر مجانًا). السيرفر بيطلب بيانات دخول مؤقتة لوحده ويجددها. من لوحة Cloudflare: Realtime ← TURN Server ← Create
TURN_URL · TURN_USERNAME · TURN_CREDENTIAL	سيرفر TURN للبث والصوت على شبكات الموبايل. أكتر من رابط بفاصلة: turn:turn.example.com:3478,turns:turn.example.com:5349
ICE_SERVERS	بديل كامل: JSON لقايمة ICE لو محتاج تحكم أكتر
CORS_ORIGIN	لو الواجهة على دومين غير السيرفر
LOTY_DEBUG	1 يطبع أحداث السوكيت في اللوج

لتشخيص المزامنة على جهاز معيّن: من الـ console اكتب sessionStorage.setItem('loty.debug', '1') واعمل reload، وحالة المشغّل هتبان في document.documentElement.dataset.lotyDebug.

جوه المشروع

shared/     البروتوكول بين السيرفر والواجهة، حسابات المزامنة، وتحليل الروابط
server/     Express + Socket.IO: الغرف، القايمة، الصلاحيات، oEmbed، بروكسي الصور، إعداد ICE
client/src/
  player/   يوتيوب و Vimeo و HTML5 بواجهة واحدة، ومتحكّم المزامنة، وفك البلاي ليست
  rtc/      شبكة WebRTC (perfect negotiation) للبث والصوت، وقياس مين بيتكلم
  three/    الإضاءة المحيطة (shader) والتفاعلات (sprites)
  components/  الواجهة
test/       Vitest

الرخصة

MIT © 2026 Mo Amin