package Ġapp Ċ Ċ import Ġkotlinx . coroutines .* Ċ import Ġreact .* Ċ import Ġreact . dom .* Ċ import Ġlogo .* Ċ import Ġticker .* Ċ Ċ import Ġkotlinx . css .* Ċ import Ġstyled .* Ċ import Ġkotlin . browser . window Ċ Ċ interface ĠApp State Ġ: ĠR State Ġ{ ĊĠĠĠ Ġvar Ġcurrent Video : ĠVideo ? ĊĠĠĠ Ġvar Ġun w atched Videos : ĠList < Video > ĊĠĠĠ Ġvar Ġw atched Videos : ĠList < Video > Ċ } Ċ data Ġclass ĠVideo ( val Ġid : ĠInt , Ġval Ġtitle : ĠString , Ġval Ġspeaker : ĠString , Ġval Ġvideo Url : ĠString ) Ċ Ċ class ĠApp : ĠR Component < R Props , ĠApp State >() Ġ{ ĊĠĠĠ Ġsuspend Ġfun Ġfetch Videos (): ĠList < Video > Ġ= Ġcoroutine Scope Ġ{ ĊĠĠĠĠĠĠĠ Ġ( 1 .. 2 5 ). map Ġ{ Ġid Ġ-> ĊĠĠĠĠĠĠĠĠĠĠĠ Ġasync Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġfetch Video ( id ) ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠ Ġ}. await All () ĊĠĠĠ Ġ} ĊĠĠĠ Ġsuspend Ġfun Ġfetch Video ( id : ĠInt ): ĠVideo Ġ= ĊĠĠĠĠĠĠĠ Ġwindow . fetch (" https :// my - json - server . typ icode . com / kotlin - hands - on / kotlin conf - json / videos /$ id ") ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ. await () ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ. json () ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ. await () ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ. unsafe Cast < Video >() Ċ // ĠĠĠ Ġsuspend Ġfun Ġfetch Video ( id : ĠInt ): ĠVideo Ġ{ Ċ // ĠĠĠĠĠĠĠ Ġval Ġresponse Promise Ġ= Ġwindow . fetch (" https :// my - json - server . typ icode . com / kotlin - hands - on / kotlin conf - json / videos /$ id ") Ċ // ĠĠĠĠĠĠĠ Ġval Ġresponse Ġ= Ġresponse Promise . await () Ċ // ĠĠĠĠĠĠĠ Ġval Ġjson Promise Ġ= Ġresponse . json () Ċ // ĠĠĠĠĠĠĠ Ġval Ġjson Ġ= Ġjson Promise . await () Ċ // ĠĠĠĠĠĠĠ Ġreturn Ġjson . unsafe Cast < Video >() Ċ // ĠĠĠ Ġ} ĊĠĠĠ Ġoverride Ġfun ĠApp State . init () Ġ{ ĊĠĠĠ Ġun w atched Videos Ġ= ĠlistOf () ĊĠĠĠ Ġw atched Videos Ġ= ĠlistOf () ĊĊĠĠĠ Ġval Ġmain Scope Ġ= ĠMain Scope () ĊĠĠĠ Ġmain Scope . launch Ġ{ ĊĠĠĠĠĠĠĠ Ġval Ġvideos Ġ= Ġfetch Videos () ĊĠĠĠĠĠĠĠ ĠsetState Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠ Ġun w atched Videos Ġ= Ġvideos ĊĠĠĠĠĠĠĠ Ġ} ĊĠĠĠ Ġ} Ċ // ĠĠĠĠĠĠĠ Ġun w atched Videos Ġ= ĠlistOf ( Ċ // ĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ ĠVideo ( 1 , Ġ" Building Ġand Ġbreaking Ġthings ", Ġ" John ĠDoe ", Ġ" https :// youtu . be / P sa F VL r 8 t 4 E "), Ċ // ĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ ĠVideo ( 2 , Ġ" The Ġdevelopment Ġprocess ", Ġ" J ane ĠSmith ", Ġ" https :// youtu . be / P sa F VL r 8 t 4 E "), Ċ // ĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ ĠVideo ( 3 , Ġ" The ĠWeb Ġ 7 . 0 ", Ġ" Mat t ĠM iller ", Ġ" https :// youtu . be / P sa F VL r 8 t 4 E ") Ċ // ĠĠĠĠĠĠĠ Ġ) Ċ // ĠĠĠĠĠĠĠ Ġw atched Videos Ġ= ĠlistOf ( Ċ // ĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ ĠVideo ( 4 , Ġ" Mouse less Ġdevelopment ", Ġ" Tom ĠJ erry ", Ġ" https :// youtu . be / P sa F VL r 8 t 4 E ") Ċ // ĠĠĠĠĠĠĠ Ġ) ĊĠĠĠ Ġ} ĊĊĠĠĠ Ġoverride Ġfun ĠR Builder . render () Ġ{ ĊĠĠĠĠĠĠĠ Ġstyled H 1 Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠ Ġcss Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ ĠfontFamily Ġ= Ġ" sans - serif " ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ+" Kotlin Conf ĠExplorer " ĊĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠ Ġdiv Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠ Ġh 3 Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ+" Videos Ġto Ġwatch " ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠ Ġvideo List Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġvideos Ġ= Ġstate . un w atched Videos ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġselected Video Ġ= Ġstate . current Video ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ ĠonSelect Video Ġ= Ġ{ Ġvideo Ġ-> ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ ĠsetState Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġcurrent Video Ġ= Ġvideo ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĊĠĠĠĠĠĠĠĠĠĠĠ Ġh 3 Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ+" Videos Ġw atched " ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠ Ġvideo List Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġvideos Ġ= Ġstate . w atched Videos ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġselected Video Ġ= Ġstate . current Video ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ ĠonSelect Video Ġ= Ġ{ Ġvideo Ġ-> ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ ĠsetState Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġcurrent Video Ġ= Ġvideo ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠ Ġstate . current Video ?. let Ġ{ Ġcurrent Video Ġ-> ĊĠĠĠĠĠĠĠĠĠĠĠ Ġvideo Player Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġvideo Ġ= Ġcurrent Video ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġun w atched Video Ġ= Ġcurrent Video Ġin Ġstate . un w atched Videos ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġon W atched Button Pressed Ġ= Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġif ( video Ġin Ġstate . un w atched Videos ) Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ ĠsetState Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġun w atched Videos Ġ-= Ġvideo ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġw atched Videos Ġ+= Ġvideo ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġelse Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ ĠsetState Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġw atched Videos Ġ-= Ġvideo ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġun w atched Videos Ġ+= Ġvideo ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠ Ġ} Ċ // ĠĠĠĠĠĠĠ Ġstyled Div Ġ{ Ċ // ĠĠĠĠĠĠĠĠĠĠĠ Ġcss Ġ{ Ċ // ĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġposition Ġ= ĠPosition . absolute Ċ // ĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġtop Ġ= Ġ 1 0 . px Ċ // ĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġright Ġ= Ġ 1 0 . px Ċ // ĠĠĠĠĠĠĠĠĠĠĠ Ġ} Ċ // ĠĠĠĠĠĠĠĠĠĠĠ Ġh 3 Ġ{ Ċ // ĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ+" John ĠDoe : ĠBuilding Ġand Ġbreaking Ġthings " Ċ // ĠĠĠĠĠĠĠĠĠĠĠ Ġ} Ċ // ĠĠĠĠĠĠĠĠĠĠĠ Ġimg Ġ{ Ċ // ĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġattrs Ġ{ Ċ // ĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġsrc Ġ= Ġ" https :// via . placeholder . com / 6 4 0 x 3 6 0 . png ? text = Video + Player + Placeholder " Ċ // ĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} Ċ // ĠĠĠĠĠĠĠĠĠĠĠ Ġ} Ċ // ĠĠĠĠĠĠĠ Ġ} ĊĠĠĠ Ġ} Ċ } Ċ Ċ fun ĠR Builder . app () Ġ= Ġchild ( App :: class ) Ġ{} Ċ