Pracovná výzva #2

P

Po mojom nástupe do novej práce som dostal pod palec nový projekt – vju.sk. Videoportál, ktorý má veľmi zaujímavé zameranie a čo je hlavné – plno zaujímavých výziev. Jednou z nich bolo aj vytvorenie reakcií na video, niečo v štýle facebookovského hlasovania počas videa a tak podobne.

Výzva menom React.js

Vju používa na content delivery celkom slušne veľkú službu menom Ooyala, ktorá má svoj vlastný HTML5 video player, ktorý je celý vydevelopovaný na React-e, s ktorým som sa doposiaľ stretol skutočne len okrajovo. To pre mňa znamenalo jednu z výziev, ktorú som sa rozhodol podstúpiť a zdolať. Podľa pokynov som si naklonoval repo gitu, na ktorom je devel verzia prehrávača a teda som na ňom mohol vytvárať svoje vlastné rozšírenia a tak podobne.

Prvou časťou však bolo samotné rozbehanie react-u, čo mi pri aktuálnej verzii Pythonu (3) vôbec nefičalo a tak som musel nahodiť opäť verziu 2.7. Nevadí, všetko sa rozbehlo a konečne začal pracovať aj gulp file, ktorý sa stará o prepojenie reactu a nodu.js.

PopOver alebo aj, klikni na button a zobrazím ti emotikony…

Asi najväčšou výzvou bolo, aby som vôbec vedel vytvoriť taký ten zvláštny boxík, ktorý sa zobrazí keď kliknete na nejaké tlačítko a potom vám to umožní hlasovať v tej konkrétnej časti videa, ktorú práve pozeráte. Že som si ja pred tým všetkým nenaštudoval tvorbu Poperties a tak podobne…. No nevadí, išiel som na to prakticky – pokus / omyl style. Nakoniec som sa rozhodol, že podobnú funkcinalitu vlastne má aj tlačítko na zmenu kvality videa, takže som sa podľa nej inšpiroval a vytvoril som všetky potrebné veci, ktoré bolo nutné pre rozchodenie PopOveru… Myslíte, že fungoval od začiaku? Silný smiech… Nie! .. Tá mrcha sa musela ešte niekde inde nastaviť… Ani za toho pána sa mi nezobrazil ani button, ani popover, ani nič.

A tak som narazil na skin.js a controller.js, ktoré rozhodovali o tom, čo sa vlastne zobrazuje v ktorom screene a aké parametre sa vôbec posúvajú s danými komponentami. Jo, aj info o komponentoch som si mal naštudovať. Nevadí, už mám celý Udemy kurz, tak už snáď bude lepšie… 🙂

OnClick, .bind(this) call a bla bla…

Keď už som rozbehal tlačítka s emotikonmi, tak som opäť narazil… Teraz to však trošku viac bolelo, pretože som asi deň a pol zabil na tom, že som sa snažil prinútiť element držať si vlastnosť onclick resp. bindovať event pri kliknutí… Čo mi to dalo roboty, kým som si uvedomil, že som vlastne mimo danej funkcie, takže bind(this) mi funguje skôr pre loop ktorý vytváral tie buttony, ako to, že by som to chcel bindovať na controller. Ach… Ale poučil som sa… Takže som si vytvoril that, ktorý niesol controllerovský this a voilá… Zrazu už fičali aj hlasovacie funkcie… Coooool…

Aká reakcia bola v akom čase? A koľko ich vlastne je?

Aby ste vôbec vedeli, či sa niekomu video páči alebo nie, je nutné zozbierané emócie ja nejako zobraziť. A tu bol ďalší celkom slušný pain. Ale ako vidno na obrázku, aj to sa podarilo 🙂 našťastie… Takže som pri inicializácii videa stiahol všetky reakcie, ktoré priebežne aktualizujem aby som vedel priradiť aj tie hlasy, ktoré sa pridávajú súčasne s prehrávaním.

Animácia to je veľmi jednoduchá a dokonca všetky tie emotikony sú dostupné počas celého videa, ibaže sú animované cez CSS keď dostanú príkaz na animovanie. To jest, v čase kedy boli pridané získajú aj triedu, ktorá spustí animáciu a tak sa zobrazia v tom čase, kedy boli pridané. Easy as … Ale v podstate ani nie tak easy. Hlavne ak si vezmeme do úvahy, že všetko je napojené na akciu prehrávania videa a kontroluje sa teda čas, ktorý je odohraný a ten je v milisekundách… Mno, stáva sa.. Funguje…

Takže teraz keď pridáte hlas, máte aj istotu, že sa zobrazí vtedy, kedy ste ho pridali.

Po skončení videa by to chcelo niečo krajšie

Naštastie som mohol vychádzať z designu, ktorý bol navrhnutý, aj keď som ho vo finále nakoniec tak či tak trošku upravil, aby sme využili celý potenciál, ktorý máme dostupný. Takže aj keď podľa návrhu malo byť umožnené len hlasovanie a prehranie nasledujúceho videa, ja som pripomenul, že stále máme k dispozícii aj navrhované podobné videá, takže vieme rozšíriť ponuku o ďalšie videá. Výsledkom teda je, že pokiaľ existujú podobné videá, tak sa obrazovka navrhovaného videa rozdelí na dve pozície, kde v jednej beží odpočet ďalšieho videa a v druhej je ponúknutá varianta 4 videí, ktoré sú podobné práve prehrávanému videu.

Samozrejme, je zachovaná aj funkcionalita hodnotenia videa, ktorá však už nie je v tejto dobe animovaná, avšak zvyšuje samostatný rating videa ako takého a teda aj počty jednotlivých emócií, ktoré prehrávané video v návštevníkovi vyvolalo.

Čo poviete, pekná výzva, nie?

 

 

O autorovi

Pridaj komentík

Od snipi