حل مشاكل المزامنة اللحظية Real-time Sync لميزة Watch Together في تطبيق React/Next.js

برمجة برمجة مواقع إنشاء موقع إلكتروني أمن وحماية المواقع بايثون PHP CSS جافا سكريبت برمجة برمجة مواقع إنشاء موقع إلكتروني أمن وحماية المواقع بايثون PHP CSS جافا سكريبت

السلام عليكم، نحن نعمل على تطبيق شبكة اجتماعية (Social App) يحتوي على ميزة "المشاهدة المشتركة" (Watch Together) عبر غرف افتراضية، ونبحث عن مطور خبير (Senior Frontend / Full-stack Developer) يمتلك خبرة عميقة في التعامل مع مشغلات الفيديو والمزامنة اللحظية (Real-time Video Synchronization) لحل مشكلات دقيقة في الـ State Management و الـ Race Conditions بالفرونت إند. البنية التحتية الحالية (Tech Stack): - الفرونت إند: Next.js / React / TypeScript. - مشغلات الفيديو المستخدمة: مشغل HTML5 عادي، Shaka Player لـ HLS، ونظام استخراج لمصادر YouTube (YouTube source extraction). - الباك إند: Elixir / Phoenix Framework. - بروتوكول المزامنة: Phoenix Channels / WebSockets لنقل الأوامر الفورية، مع وجود Sync State Canonical قادم من السيرفر. طبيعة المشكلة الحالية: البنية التحتية ونقل البيانات عبر الـ WebSockets تعمل بشكل سليم، ولكن المشكلة تكمن في طريقة معالجة وتطبيق أوامر التحكم (Play / Pause / Seek) داخل مشغل الفيديو نفسه بالفرونت إند. تحدث مشاكل مثل "تسريب التشغيل بعد التقديم" (Play leak after seek)، أو عدم توازن المزامنة بين الهوست والمشتركين بسبب تفاوت أوقات التحميل (Buffering/Latency)، مما يجعل الفيديو يظهر بـ Framerate منخفض جداً أو يتوقف تماماً عند بعض الأطراف. المطلوب تنفيذه: 1. مراجعة كود المزامنة الحالي في الفرونت إند وعمل Refactoring لمنطق معالجة الأحداث (Event Handling) الخاصة باللاعبين. 2. بناء نظام قوي لإدارة حالة المشغل (State Machine) تضمن عدم حدوث تضارب بين الأوامر المتتالية (مثل منع الـ Play قبل اكتمال الـ Seek والـ Buffering لكل الأطراف). 3. معالجة الـ Network Latency والفروقات الزمنية البسيطة (Ping) بين المشتركين لضمان تجربة فريمات سلسة ومزامنة متطابقة (تجاوز مشكلة الـ 5 فريمات). 4. ضمان استقرار الحل مع كافة مصادر الفيديو المدعومة (Direct MP4, HLS Streams, YouTube). الشروط المطلوبة في المستقل: - خبرة قوية ومثبتة في React/TypeScript والتعامل مع الـ Video APIs (خاصة Shaka Player أو مشغلات الـ HLS). - فهم ممتاز لكيفية عمل الـ WebSockets وإدارة الـ Real-time States. - يفضل جداً من لديه دراية بـ Elixir/Phoenix (لفهم طبيعة الـ Channels المعمول بها في الباك إند إذا لزم الأمر). برجاء عند التقديم توضيح خبرتك السابقة في التعامل مع مشغلات الفيديو أو أنظمة الـ Real-time Sync، والمدة المتوقعة لإنهاء العمل.