Implement 'packages from npm'

Author: SebastianAigner

src/main/kotlin/ReactShare.kt

@@ -0,0 +1,26 @@
+@file:JsModule("react-share")
+@file:JsNonModule
+
+import react.ComponentClass
+import react.Props
+
+@JsName("EmailIcon")
+external val EmailIcon: ComponentClass<IconProps>
+
+@JsName("EmailShareButton")
+external val EmailShareButton: ComponentClass<ShareButtonProps>
+
+@JsName("TelegramIcon")
+external val TelegramIcon: ComponentClass<IconProps>
+
+@JsName("TelegramShareButton")
+external val TelegramShareButton: ComponentClass<ShareButtonProps>
+
+external interface ShareButtonProps : Props {
+    var url: String
+}
+
+external interface IconProps : Props {
+    var size: Int
+    var round: Boolean
+}

src/main/kotlin/ReactYouTube.kt

@@ -0,0 +1,12 @@
+@file:JsModule("react-player")
+@file:JsNonModule
+
+import react.*
+
+@JsName("default")
+external val ReactPlayer: ComponentClass<ReactPlayerProps>
+
+external interface ReactPlayerProps : Props {
+    var url: String
+    var controls: Boolean
+}

src/main/kotlin/VideoPlayer.kt

@@ -36,8 +36,29 @@ val VideoPlayer = FC<VideoPlayerProps> { props ->
                 +"Mark as unwatched"
             }
         }
-        img {
-            src = "https://via.placeholder.com/640x360.png?text=Video+Player+Placeholder"
+        div {
+            css {
+                display = Display.flex
+                marginBottom = 10.px
+            }
+            EmailShareButton {
+                url = props.video.videoUrl
+                EmailIcon {
+                    size = 32
+                    round = true
+                }
+            }
+            TelegramShareButton {
+                url = props.video.videoUrl
+                TelegramIcon {
+                    size = 32
+                    round = true
+                }
+            }
+        }
+        ReactPlayer {
+            url = props.video.videoUrl
+            controls = true
         }
     }
 }