(#73) Introduce TwitchPlayer into CurrentEvent

Author: rexim

scss/main.scss

@@ -79,6 +79,12 @@ body {
             }
         }
     }
+
+    .player {
+        padding-top: 20px;
+        width: $page_width * 0.75;
+        height: $page_width * 0.75 * (9 / 16);
+    }
 }
 
 .event.past {

ts/CurrentEvent.ts

@@ -4,6 +4,7 @@ import * as moment from 'moment';
 import ComponentsArray from './ComponentsArray';
 import Countdown from './Countdown';
 import UiComponent from './UiComponent';
+import TwitchPlayer from './TwitchPlayer';
 
 export default class CurrentEvent implements UiComponent {
     constructor(private _event: dto.Event) {
@@ -46,7 +47,10 @@ export default class CurrentEvent implements UiComponent {
                 new html.Div(
                     new html.Markdown(`${this._event.description}`),
                     {"class": "description markdown"}
-                )
+                ),
+                // TODO: the preview twitch channel in CurrentEvent is hardcoded
+                //   It should be taken from this._event.channel
+                new TwitchPlayer("tsoding")
             ]),
             {
                 "id": `_${this._event.datetime.utc().unix()}`,

ts/TwitchPlayer.ts

@@ -0,0 +1,17 @@
+import UiComponent from './UiComponent';
+import * as html from './html';
+
+export default class TwitchPlayer implements UiComponent {
+    constructor(private _userName: string) {
+    }
+
+    appendTo(entry: HTMLElement | null): void {
+        new html.Tag(
+            "iframe",
+            new html.Empty(),
+            {"src": `https://player.twitch.tv/?channel=${this._userName}&muted=true`,
+             "allowfullscreen": "true",
+             "class": "player"}
+        ).appendTo(entry);
+    }
+}