المشاكل والفروق الدقيقة عند تطوير SmartTV باستخدام React.js

أرغب في مشاركة تجربة تطوير تطبيق مع عرض محتوى الفيديو لـ SmartTV (Tizen و WebOS) والمشاكل التي واجهناها.

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

نظرًا لأن هذا متصفح ، لم يمنعنا أي شيء من استخدام React.js للتطوير ، مما أثر على بعض مشكلات الأداء.

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

دعنا نذهب من خلال النقاط الرئيسية:

1. موارد محدودة
   
2. ملاحة
   
3. أساليب الأداء والعرض
   
4. مشغلات الفيديو
   
5. الخلفية
   

موارد محدودة

لا توجد ذاكرة وأداء على شاشة التلفزيون كما في أجهزة الكمبيوتر الخاصة بنا ، وبالتالي فإن المشكلة الأولى هي الحد من الموارد.

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

الحل لهذه المشكلة هو نافذة رد الفعل
لا يخزن كل العناصر خارج النافذة في DOM.

ملاحة

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

مثال Tizen
تايزن

export default {   KEY_0: 48,   KEY_1: 49,   KEY_2: 50,   KEY_3: 51,   KEY_4: 52,   KEY_5: 53,   KEY_6: 54,   KEY_7: 55,   KEY_8: 56,   KEY_9: 57,   KEY_UP: 38,   KEY_DOWN: 40,   KEY_LEFT: 37,   KEY_RIGHT: 39,   KEY_OK: 13,   KEY_BACK: 10009,   KEY_CHANNEL_UP: 427,   KEY_CHANNEL_DOWN: 428,   KEY_MEDIA_FAST_FORWARD: 417,   KEY_MEDIA_PAUSE: 19,   KEY_MEDIA_PLAY: 415,   KEY_MEDIA_PLAY_PAUSE: 10252,   KEY_MEDIA_REWIND: 412,   KEY_MEDIA_STOP: 413,   KEY_DEBUG_TOGGLE_CONSOLE: 403,   KEY_DEBUG_TOGGLE_QUICK_EDIT: 404,   KEY_DEBUG_SET_FAVOURITES: 405,   KEY_DEBUG_CLEAR_FAVOURITES: 406,   KEY_SHOW_REMOTE_POINTER: 7777777, // not applicable   KEY_HIDE_REMOTE_POINTER: 7777777, // not applicable }; 

ويب أو إس

 export default {  KEY_0: 48,  KEY_1: 49,  KEY_2: 50,  KEY_3: 51,  KEY_4: 52,  KEY_5: 53,  KEY_6: 54,  KEY_7: 55,  KEY_8: 56,  KEY_9: 57,  KEY_UP: 38,  KEY_DOWN: 40,  KEY_LEFT: 37,  KEY_RIGHT: 39,  KEY_OK: 13,  KEY_BACK: 461,  KEY_MEDIA_FAST_FORWARD: 417,  KEY_MEDIA_PAUSE: 19,  KEY_MEDIA_PLAY: 415,  KEY_MEDIA_PLAY_PAUSE: 10252,  KEY_MEDIA_REWIND: 412,  KEY_MEDIA_STOP: 413,  KEY_CHANNEL_UP: 33,  KEY_CHANNEL_DOWN: 34,  KEY_DEBUG_SET_EMAIL: 403,  KEY_DEBUG_TOGGLE_CONSOLE: 404,  KEY_DEBUG_TOGGLE_QUICK_EDIT: 405,  KEY_DEBUG_SET_FAVOURITES: 406,  KEY_DEBUG_CLEAR_FAVOURITES: 407,  KEY_SHOW_REMOTE_POINTER: 1536,  KEY_HIDE_REMOTE_POINTER: 1537, }; 

لوحة المفاتيح

 export default {  KEY_0: 48,  KEY_1: 49,  KEY_2: 50,  KEY_3: 51,  KEY_4: 52,  KEY_5: 53,  KEY_6: 54,  KEY_7: 55,  KEY_8: 56,  KEY_9: 57,  KEY_UP: 38,  KEY_DOWN: 40,  KEY_LEFT: 37,  KEY_RIGHT: 39,  KEY_OK: 13,  KEY_BACK: 8, // backspace  KEY_MEDIA_FAST_FORWARD: 70, // f  KEY_MEDIA_PLAY_PAUSE: 80, // p  KEY_MEDIA_REWIND: 66, // b  KEY_MEDIA_STOP: 83, // s  KEY_CHANNEL_UP: 70, // f  KEY_CHANNEL_DOWN: 71, // g  KEY_DEBUG_SET_EMAIL: 81, // q  KEY_DEBUG_TOGGLE_CONSOLE: 87, // w  KEY_DEBUG_TOGGLE_QUICK_EDIT: 69, // e  KEY_DEBUG_SET_FAVOURITES: 88, // w  KEY_DEBUG_CLEAR_FAVOURITES: 82, // r  KEY_SHOW_REMOTE_POINTER: 7777777, // not applicable  KEY_HIDE_REMOTE_POINTER: 7777777, // not applicable }; 

كما ترون ، فهناك أزرار بأحرف على لوحة المفاتيح (المشار إليها في التعليقات).

من أجل التعامل مع التنقل من خلال النقر على الأزرار والنقر بالماوس ، كان لدينا دائمًا نتيجة حدث واحد - mouseClick ، ​​وبالتالي قمنا بمعالجة جميع الأحداث بالطريقة نفسها.

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

أساليب الأداء وعروضه

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

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



نتيجةً لذلك ، أعادنا كتابة الأجزاء الحساسة للتطبيق على الفانيليا ، وأصبحت أسرع.

مشغلات الفيديو

يشتمل كل من LG و Samsung على مشغلات فيديو مختلفة ، مما يخلق أيضًا صعوبات تطوير إضافية. بالنسبة إلى LG ، يتم استخدام علامة فيديو لـ Samsung AVPlay sdk. لذلك ، هناك اختلافات في الوظائف ، يجب ألا يغيب عن البال أن جميع الميزات ليست متماثلة وقد تختلف من إصدار إلى إصدار OS.

كانت هناك أيضًا مشكلات في التحميل عند بدء تشغيل الفيديو - تم حلها عن طريق التخزين المؤقت والموازنة وتأجيل الطلبات ومعالجتها.

الخلفية

تؤثر سرعة الواجهة الخلفية وسرعة معالجة الطلبات وعددها على سرعة العمل. يجب أن يحتوي الجانب FE على الحد الأدنى من معالجة البيانات. إذا كنت بحاجة إلى تحميل كميات كبيرة من البيانات ، يمكنك استخدام عمال الويب.