From 140d3ec137d9e8a46cb8181b5cfd6e421c94f967 Mon Sep 17 00:00:00 2001
From: Sebastian Aigner <sebastian.aigner@jetbrains.com>
Date: Wed, 5 Feb 2020 13:25:27 +0100
Subject: [PATCH 1/6] Add typesafe HTML representation of website Use styled
 components Add Video data class and example lists for unwatched and watched
 videos

---
 src/main/kotlin/Main.kt | 67 ++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 66 insertions(+), 1 deletion(-)

diff --git a/src/main/kotlin/Main.kt b/src/main/kotlin/Main.kt
index 15f7cf0..4dc17a3 100644
--- a/src/main/kotlin/Main.kt
+++ b/src/main/kotlin/Main.kt
@@ -1,5 +1,70 @@
+import react.dom.*
 import kotlinx.browser.document
+import kotlinx.css.*
+import styled.*
+
+external interface Video {
+    val id: Int
+    val title: String
+    val speaker: String
+    val videoUrl: String
+}
+
+data class KotlinVideo(
+    override val id: Int,
+    override val title: String,
+    override val speaker: String,
+    override val videoUrl: String
+) : Video
+
+val unwatchedVideos = listOf(
+    KotlinVideo(1, "Building and breaking things", "John Doe", "https://youtu.be/PsaFVLr8t4E"),
+    KotlinVideo(2, "The development process", "Jane Smith", "https://youtu.be/PsaFVLr8t4E"),
+    KotlinVideo(3, "The Web 7.0", "Matt Miller", "https://youtu.be/PsaFVLr8t4E")
+)
+
+val watchedVideos = listOf(
+    KotlinVideo(4, "Mouseless development", "Tom Jerry", "https://youtu.be/PsaFVLr8t4E")
+)
 
 fun main() {
-    document.bgColor = "blue"
+    render(document.getElementById("root")) {
+        h1 {
+            +"KotlinConf Explorer"
+        }
+        div {
+            h3 {
+                +"Videos to watch"
+            }
+            for(video in unwatchedVideos) {
+                p {
+                    +"${video.speaker}: ${video.title}"
+                }
+            }
+
+            h3 {
+                +"Videos watched"
+            }
+            for(video in watchedVideos) {
+                p {
+                    +"${video.speaker}: ${video.title}"
+                }
+            }
+        }
+        styledDiv {
+            css {
+                position = Position.absolute
+                top = 10.px
+                right = 10.px
+            }
+            h3 {
+                +"John Doe: Building and breaking things"
+            }
+            img {
+                attrs {
+                    src = "https://via.placeholder.com/640x360.png?text=Video+Player+Placeholder"
+                }
+            }
+        }
+    }
 }
\ No newline at end of file

From e71f1642969041805f0575ae452a38e70d061838 Mon Sep 17 00:00:00 2001
From: Sebastian Aigner <sebastian.aigner@jetbrains.com>
Date: Wed, 5 Feb 2020 13:53:04 +0100
Subject: [PATCH 2/6] Move HTML to App component Introduce VideoList component
 with selection mechanism (state and properties)

---
 src/main/kotlin/App.kt       | 44 ++++++++++++++++++++++++++++++++++++
 src/main/kotlin/Main.kt      | 38 +------------------------------
 src/main/kotlin/VideoList.kt | 41 +++++++++++++++++++++++++++++++++
 3 files changed, 86 insertions(+), 37 deletions(-)
 create mode 100644 src/main/kotlin/App.kt
 create mode 100644 src/main/kotlin/VideoList.kt

diff --git a/src/main/kotlin/App.kt b/src/main/kotlin/App.kt
new file mode 100644
index 0000000..927bcdc
--- /dev/null
+++ b/src/main/kotlin/App.kt
@@ -0,0 +1,44 @@
+import kotlinx.css.*
+import react.*
+import react.dom.*
+import styled.css
+import styled.styledDiv
+
+@JsExport
+class App : RComponent<RProps, RState>() {
+    override fun RBuilder.render() {
+        h1 {
+            +"KotlinConf Explorer"
+        }
+        div {
+            h3 {
+                +"Videos to watch"
+            }
+            videoList {
+                videos = unwatchedVideos
+            }
+
+            h3 {
+                +"Videos watched"
+            }
+            videoList {
+                videos = watchedVideos
+            }
+        }
+        styledDiv {
+            css {
+                position = Position.absolute
+                top = 10.px
+                right = 10.px
+            }
+            h3 {
+                +"John Doe: Building and breaking things"
+            }
+            img {
+                attrs {
+                    src = "https://via.placeholder.com/640x360.png?text=Video+Player+Placeholder"
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/main/kotlin/Main.kt b/src/main/kotlin/Main.kt
index 4dc17a3..56b4947 100644
--- a/src/main/kotlin/Main.kt
+++ b/src/main/kotlin/Main.kt
@@ -29,42 +29,6 @@ val watchedVideos = listOf(
 
 fun main() {
     render(document.getElementById("root")) {
-        h1 {
-            +"KotlinConf Explorer"
-        }
-        div {
-            h3 {
-                +"Videos to watch"
-            }
-            for(video in unwatchedVideos) {
-                p {
-                    +"${video.speaker}: ${video.title}"
-                }
-            }
-
-            h3 {
-                +"Videos watched"
-            }
-            for(video in watchedVideos) {
-                p {
-                    +"${video.speaker}: ${video.title}"
-                }
-            }
-        }
-        styledDiv {
-            css {
-                position = Position.absolute
-                top = 10.px
-                right = 10.px
-            }
-            h3 {
-                +"John Doe: Building and breaking things"
-            }
-            img {
-                attrs {
-                    src = "https://via.placeholder.com/640x360.png?text=Video+Player+Placeholder"
-                }
-            }
-        }
+        child(App::class) {}
     }
 }
\ No newline at end of file
diff --git a/src/main/kotlin/VideoList.kt b/src/main/kotlin/VideoList.kt
new file mode 100644
index 0000000..83402d5
--- /dev/null
+++ b/src/main/kotlin/VideoList.kt
@@ -0,0 +1,41 @@
+import kotlinx.html.js.onClickFunction
+import kotlinx.browser.window
+import react.*
+import react.dom.*
+
+
+external interface VideoListProps: RProps {
+    var videos: List<Video>
+}
+
+external interface VideoListState: RState {
+    var selectedVideo: Video?
+}
+
+@JsExport
+class VideoList: RComponent<VideoListProps, VideoListState>() {
+    override fun RBuilder.render() {
+        for (video in props.videos) {
+            p {
+                key = video.id.toString()
+                attrs {
+                    onClickFunction = {
+                        setState {
+                            selectedVideo = video
+                        }
+                    }
+                }
+                if(video == state.selectedVideo) {
+                    +"▶ "
+                }
+                +"${video.speaker}: ${video.title}"
+            }
+        }
+    }
+}
+
+fun RBuilder.videoList(handler: VideoListProps.() -> Unit): ReactElement {
+    return child(VideoList::class) {
+        this.attrs(handler)
+    }
+}
\ No newline at end of file

From 989a2fe2018db8b60a49e808ef785065524571a1 Mon Sep 17 00:00:00 2001
From: Sebastian Aigner <sebastian.aigner@jetbrains.com>
Date: Wed, 5 Feb 2020 13:58:58 +0100
Subject: [PATCH 3/6] Lift currentVideo state to app, remove video list state
 Pass video selection handlers to video list

---
 src/main/kotlin/App.kt       | 18 +++++++++++++++++-
 src/main/kotlin/VideoList.kt | 12 ++++--------
 2 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/src/main/kotlin/App.kt b/src/main/kotlin/App.kt
index 927bcdc..f00653b 100644
--- a/src/main/kotlin/App.kt
+++ b/src/main/kotlin/App.kt
@@ -4,8 +4,12 @@ import react.dom.*
 import styled.css
 import styled.styledDiv
 
+external interface AppState: RState {
+    var currentVideo: Video?
+}
+
 @JsExport
-class App : RComponent<RProps, RState>() {
+class App : RComponent<RProps, AppState>() {
     override fun RBuilder.render() {
         h1 {
             +"KotlinConf Explorer"
@@ -16,6 +20,12 @@ class App : RComponent<RProps, RState>() {
             }
             videoList {
                 videos = unwatchedVideos
+                selectedVideo = state.currentVideo
+                onSelectVideo = { video ->
+                    setState {
+                        currentVideo = video
+                    }
+                }
             }
 
             h3 {
@@ -23,6 +33,12 @@ class App : RComponent<RProps, RState>() {
             }
             videoList {
                 videos = watchedVideos
+                selectedVideo = state.currentVideo
+                onSelectVideo = { video ->
+                    setState {
+                        currentVideo = video
+                    }
+                }
             }
         }
         styledDiv {
diff --git a/src/main/kotlin/VideoList.kt b/src/main/kotlin/VideoList.kt
index 83402d5..4522884 100644
--- a/src/main/kotlin/VideoList.kt
+++ b/src/main/kotlin/VideoList.kt
@@ -6,26 +6,22 @@ import react.dom.*
 
 external interface VideoListProps: RProps {
     var videos: List<Video>
-}
-
-external interface VideoListState: RState {
     var selectedVideo: Video?
+    var onSelectVideo: (Video) -> Unit
 }
 
 @JsExport
-class VideoList: RComponent<VideoListProps, VideoListState>() {
+class VideoList: RComponent<VideoListProps, RState>() {
     override fun RBuilder.render() {
         for (video in props.videos) {
             p {
                 key = video.id.toString()
                 attrs {
                     onClickFunction = {
-                        setState {
-                            selectedVideo = video
-                        }
+                        props.onSelectVideo(video)
                     }
                 }
-                if(video == state.selectedVideo) {
+                if(video == props.selectedVideo) {
                     +"▶ "
                 }
                 +"${video.speaker}: ${video.title}"

From 221621bddcfa4918da8eecad1ecd7481ed953044 Mon Sep 17 00:00:00 2001
From: Sebastian Aigner <sebastian.aigner@jetbrains.com>
Date: Wed, 5 Feb 2020 14:10:58 +0100
Subject: [PATCH 4/6] Extract video player component Add "Mark as (un)watched"
 button to video player Move (un)watched videos to AppState

---
 src/main/kotlin/App.kt         | 47 +++++++++++++++++++----------
 src/main/kotlin/Main.kt        | 10 -------
 src/main/kotlin/VideoPlayer.kt | 54 ++++++++++++++++++++++++++++++++++
 3 files changed, 86 insertions(+), 25 deletions(-)
 create mode 100644 src/main/kotlin/VideoPlayer.kt

diff --git a/src/main/kotlin/App.kt b/src/main/kotlin/App.kt
index f00653b..4d3e53d 100644
--- a/src/main/kotlin/App.kt
+++ b/src/main/kotlin/App.kt
@@ -4,12 +4,25 @@ import react.dom.*
 import styled.css
 import styled.styledDiv
 
-external interface AppState: RState {
+external interface AppState : RState {
     var currentVideo: Video?
+    var unwatchedVideos: List<Video>
+    var watchedVideos: List<Video>
 }
 
 @JsExport
 class App : RComponent<RProps, AppState>() {
+    override fun AppState.init() {
+        unwatchedVideos = listOf(
+            KotlinVideo(1, "Building and breaking things", "John Doe", "https://youtu.be/PsaFVLr8t4E"),
+            KotlinVideo(2, "The development process", "Jane Smith", "https://youtu.be/PsaFVLr8t4E"),
+            KotlinVideo(3, "The Web 7.0", "Matt Miller", "https://youtu.be/PsaFVLr8t4E")
+        )
+        watchedVideos = listOf(
+            KotlinVideo(4, "Mouseless development", "Tom Jerry", "https://youtu.be/PsaFVLr8t4E")
+        )
+    }
+
     override fun RBuilder.render() {
         h1 {
             +"KotlinConf Explorer"
@@ -19,7 +32,7 @@ class App : RComponent<RProps, AppState>() {
                 +"Videos to watch"
             }
             videoList {
-                videos = unwatchedVideos
+                videos = state.unwatchedVideos
                 selectedVideo = state.currentVideo
                 onSelectVideo = { video ->
                     setState {
@@ -32,7 +45,7 @@ class App : RComponent<RProps, AppState>() {
                 +"Videos watched"
             }
             videoList {
-                videos = watchedVideos
+                videos = state.watchedVideos
                 selectedVideo = state.currentVideo
                 onSelectVideo = { video ->
                     setState {
@@ -41,18 +54,22 @@ class App : RComponent<RProps, AppState>() {
                 }
             }
         }
-        styledDiv {
-            css {
-                position = Position.absolute
-                top = 10.px
-                right = 10.px
-            }
-            h3 {
-                +"John Doe: Building and breaking things"
-            }
-            img {
-                attrs {
-                    src = "https://via.placeholder.com/640x360.png?text=Video+Player+Placeholder"
+        state.currentVideo?.let { currentVideo ->
+            videoPlayer {
+                video = currentVideo
+                unwatchedVideo = currentVideo in state.unwatchedVideos
+                onWatchedButtonPressed = {
+                    if (video in state.unwatchedVideos) {
+                        setState {
+                            unwatchedVideos -= video
+                            watchedVideos += video
+                        }
+                    } else {
+                        setState {
+                            watchedVideos -= video
+                            unwatchedVideos += video
+                        }
+                    }
                 }
             }
         }
diff --git a/src/main/kotlin/Main.kt b/src/main/kotlin/Main.kt
index 56b4947..1cf76f4 100644
--- a/src/main/kotlin/Main.kt
+++ b/src/main/kotlin/Main.kt
@@ -17,16 +17,6 @@ data class KotlinVideo(
     override val videoUrl: String
 ) : Video
 
-val unwatchedVideos = listOf(
-    KotlinVideo(1, "Building and breaking things", "John Doe", "https://youtu.be/PsaFVLr8t4E"),
-    KotlinVideo(2, "The development process", "Jane Smith", "https://youtu.be/PsaFVLr8t4E"),
-    KotlinVideo(3, "The Web 7.0", "Matt Miller", "https://youtu.be/PsaFVLr8t4E")
-)
-
-val watchedVideos = listOf(
-    KotlinVideo(4, "Mouseless development", "Tom Jerry", "https://youtu.be/PsaFVLr8t4E")
-)
-
 fun main() {
     render(document.getElementById("root")) {
         child(App::class) {}
diff --git a/src/main/kotlin/VideoPlayer.kt b/src/main/kotlin/VideoPlayer.kt
new file mode 100644
index 0000000..2e98a33
--- /dev/null
+++ b/src/main/kotlin/VideoPlayer.kt
@@ -0,0 +1,54 @@
+import kotlinx.css.*
+import kotlinx.html.js.onClickFunction
+import react.*
+import react.dom.*
+import styled.*
+
+external interface VideoPlayerProps : RProps {
+    var video: Video
+    var onWatchedButtonPressed: (Video) -> Unit
+    var unwatchedVideo: Boolean
+}
+
+@JsExport
+class VideoPlayer(props: VideoPlayerProps) : RComponent<VideoPlayerProps, RState>(props) {
+    override fun RBuilder.render() {
+        styledDiv {
+            css {
+                position = Position.absolute
+                top = 10.px
+                right = 10.px
+            }
+            h3 {
+                +"${props.video.speaker}: ${props.video.title}"
+            }
+            styledButton {
+                css {
+                    display = Display.block
+                    backgroundColor = if (props.unwatchedVideo) Color.lightGreen else Color.red
+                }
+                attrs {
+                    onClickFunction = {
+                        props.onWatchedButtonPressed(props.video)
+                    }
+                }
+                if (props.unwatchedVideo) {
+                    +"Mark as watched"
+                } else {
+                    +"Mark as unwatched"
+                }
+            }
+            img {
+                attrs {
+                    src = "https://via.placeholder.com/640x360.png?text=Video+Player+Placeholder"
+                }
+            }
+        }
+    }
+}
+
+fun RBuilder.videoPlayer(handler: VideoPlayerProps.() -> Unit): ReactElement {
+    return child(VideoPlayer::class) {
+        this.attrs(handler)
+    }
+}
\ No newline at end of file

From 8623834535654891eb19281ccf5559d0afcc2510 Mon Sep 17 00:00:00 2001
From: Sebastian Aigner <sebastian.aigner@jetbrains.com>
Date: Wed, 5 Feb 2020 14:28:16 +0100
Subject: [PATCH 5/6] Add react-player and react-share definitions Use
 react-player in video player Add Email and Telegram share buttons to video
 player

---
 src/main/kotlin/ReactShare.kt   | 26 ++++++++++++++++++++++++++
 src/main/kotlin/ReactYouTube.kt | 11 +++++++++++
 src/main/kotlin/VideoPlayer.kt  | 25 ++++++++++++++++++++++---
 3 files changed, 59 insertions(+), 3 deletions(-)
 create mode 100644 src/main/kotlin/ReactShare.kt
 create mode 100644 src/main/kotlin/ReactYouTube.kt

diff --git a/src/main/kotlin/ReactShare.kt b/src/main/kotlin/ReactShare.kt
new file mode 100644
index 0000000..10b0ccd
--- /dev/null
+++ b/src/main/kotlin/ReactShare.kt
@@ -0,0 +1,26 @@
+@file:JsModule("react-share")
+@file:JsNonModule
+
+import react.RClass
+import react.RProps
+
+@JsName("EmailIcon")
+external val emailIcon: RClass<IconProps>
+
+@JsName("EmailShareButton")
+external val emailShareButton: RClass<ShareButtonProps>
+
+@JsName("TelegramIcon")
+external val telegramIcon: RClass<IconProps>
+
+@JsName("TelegramShareButton")
+external val telegramShareButton: RClass<ShareButtonProps>
+
+external interface ShareButtonProps : RProps {
+    var url: String
+}
+
+external interface IconProps : RProps {
+    var size: Int
+    var round: Boolean
+}
\ No newline at end of file
diff --git a/src/main/kotlin/ReactYouTube.kt b/src/main/kotlin/ReactYouTube.kt
new file mode 100644
index 0000000..8d8b073
--- /dev/null
+++ b/src/main/kotlin/ReactYouTube.kt
@@ -0,0 +1,11 @@
+@file:JsModule("react-youtube-lite")
+@file:JsNonModule
+
+import react.*
+
+@JsName("ReactYouTubeLite")
+external val reactPlayer: RClass<ReactYouTubeProps>
+
+external interface ReactYouTubeProps : RProps {
+    var url: String
+}
\ No newline at end of file
diff --git a/src/main/kotlin/VideoPlayer.kt b/src/main/kotlin/VideoPlayer.kt
index 2e98a33..7e1a3ee 100644
--- a/src/main/kotlin/VideoPlayer.kt
+++ b/src/main/kotlin/VideoPlayer.kt
@@ -38,10 +38,29 @@ class VideoPlayer(props: VideoPlayerProps) : RComponent<VideoPlayerProps, RState
                     +"Mark as unwatched"
                 }
             }
-            img {
-                attrs {
-                    src = "https://via.placeholder.com/640x360.png?text=Video+Player+Placeholder"
+            styledDiv {
+                css {
+                    display = Display.flex
+                    marginBottom = 10.px
+                }
+                emailShareButton {
+                    attrs.url = props.video.videoUrl
+                    emailIcon {
+                        attrs.size = 32
+                        attrs.round = true
+                    }
                 }
+
+                telegramShareButton {
+                    attrs.url = props.video.videoUrl
+                    telegramIcon {
+                        attrs.size = 32
+                        attrs.round = true
+                    }
+                }
+            }
+            reactPlayer {
+                attrs.url = props.video.videoUrl
             }
         }
     }

From 1c29343be22e95d5975e264fb61cba536f2dcc75 Mon Sep 17 00:00:00 2001
From: Sebastian Aigner <sebastian.aigner@jetbrains.com>
Date: Wed, 5 Feb 2020 14:33:17 +0100
Subject: [PATCH 6/6] Use external API and coroutines to get real video
 information

---
 src/main/kotlin/App.kt | 38 ++++++++++++++++++++++++++++++--------
 1 file changed, 30 insertions(+), 8 deletions(-)

diff --git a/src/main/kotlin/App.kt b/src/main/kotlin/App.kt
index 4d3e53d..e07f07a 100644
--- a/src/main/kotlin/App.kt
+++ b/src/main/kotlin/App.kt
@@ -1,8 +1,28 @@
+import kotlinx.coroutines.async
 import kotlinx.css.*
 import react.*
 import react.dom.*
 import styled.css
 import styled.styledDiv
+import kotlinx.browser.window
+import kotlinx.coroutines.*
+
+suspend fun fetchVideo(id: Int): Video {
+    val response = window
+        .fetch("https://my-json-server.typicode.com/kotlin-hands-on/kotlinconf-json/videos/$id")
+        .await()
+        .json()
+        .await()
+    return response as Video
+}
+
+suspend fun fetchVideos(): List<Video> = coroutineScope {
+    (1..25).map { id ->
+        async {
+            fetchVideo(id)
+        }
+    }.awaitAll()
+}
 
 external interface AppState : RState {
     var currentVideo: Video?
@@ -13,14 +33,16 @@ external interface AppState : RState {
 @JsExport
 class App : RComponent<RProps, AppState>() {
     override fun AppState.init() {
-        unwatchedVideos = listOf(
-            KotlinVideo(1, "Building and breaking things", "John Doe", "https://youtu.be/PsaFVLr8t4E"),
-            KotlinVideo(2, "The development process", "Jane Smith", "https://youtu.be/PsaFVLr8t4E"),
-            KotlinVideo(3, "The Web 7.0", "Matt Miller", "https://youtu.be/PsaFVLr8t4E")
-        )
-        watchedVideos = listOf(
-            KotlinVideo(4, "Mouseless development", "Tom Jerry", "https://youtu.be/PsaFVLr8t4E")
-        )
+        unwatchedVideos = listOf()
+        watchedVideos = listOf()
+
+        val mainScope = MainScope()
+        mainScope.launch {
+            val videos = fetchVideos()
+            setState {
+                unwatchedVideos = videos
+            }
+        }
     }
 
     override fun RBuilder.render() {