16:9

index.html

@@ -17,7 +17,6 @@
 
             app.ports.registerVideo.subscribe(function(args) {
                 requestAnimationFrame(function() {
-                    console.log(document.getElementById(args[0]));
                     vd.setup(args[0], args[1] + "/manifest.mpd")
                 });
             });

js/vd.js

@@ -56692,6 +56692,7 @@ const vd = (function() {
 
         player._oldRequestFullscreen = player.requestFullscreen;
         player.requestFullscreen = () => {
+            console.log("yo");
             player._oldRequestFullscreen(...arguments);
             setTimeout(() => {
                 if (screen.orientation) {

src/Colors.elm

@@ -1,4 +1,4 @@
-module Colors exposing (blackFont, greyBackground, greyFont, primary, primaryOver, white)
+module Colors exposing (blackFont, greyBackground, greyFont, primary, primaryOver, selected, white)
 
 import Element
 
@@ -31,3 +31,8 @@ blackFont =
 greyFont : Element.Color
 greyFont =
     Element.rgb255 128 128 128
+
+
+selected : Element.Color
+selected =
+    Element.rgb255 223 233 250

src/Views.elm

@@ -232,12 +232,18 @@ videoMiniatureView zone playlist video =
 videoInList : Time.Zone -> Twitch.Playlist -> Twitch.Video -> Twitch.Video -> Element Core.Msg
 videoInList zone playlist activeVideo video =
     let
-        msg =
+        ( msg, attr ) =
             if video == activeVideo then
-                Nothing
+                ( Nothing
+                , [ Element.width Element.fill
+                  , Background.color Colors.selected
+                  , Border.color Colors.primary
+                  , Border.width 2
+                  ]
+                )
 
             else
-                Just (Core.VideoClicked playlist video)
+                ( Just (Core.VideoClicked playlist video), [ Element.width Element.fill ] )
 
         label =
             Element.row [ Element.width Element.fill, Element.spacing 10 ]
@@ -247,8 +253,7 @@ videoInList zone playlist activeVideo video =
                     (videoDescription zone video)
                 ]
     in
-    Input.button [ Element.width Element.fill ]
+    Input.button attr { label = label, onPress = msg }
-        { label = label, onPress = msg }
 
 
 videoView : Time.Zone -> Twitch.Playlist -> Twitch.Video -> Element Core.Msg
@@ -256,14 +261,25 @@ videoView zone playlist video =
     Element.row [ Element.padding 10, Element.width Element.fill, Element.spacing 10 ]
         [ Element.column
             [ Element.width (Element.fillPortion 2)
+            , Element.spacing 10
+            ]
+            [ Keyed.el
+                [ Element.width Element.fill
+                , Element.height (Element.px 0)
+                , Element.htmlAttribute (Html.Attributes.style "padding-top" "56%")
+                , Element.htmlAttribute (Html.Attributes.style "position" "relative")
                 ]
-            [ Keyed.el [ Element.width Element.fill ]
                 ( video.url
                 , Element.html
                     (Html.video
                         [ Html.Attributes.id (Twitch.videoId video)
-                        , Html.Attributes.class "video-js vjs-default-skin wf"
+                        , Html.Attributes.class "video-js"
+                        , Html.Attributes.class "vjs-default-skin"
+                        , Html.Attributes.class "wf"
                         , Html.Attributes.property "data-setup" (Encode.string "{\"fluid\": true}")
+                        , Html.Attributes.style "position" "absolute"
+                        , Html.Attributes.style "top" "0"
+                        , Html.Attributes.style "height" "100%"
                         , Html.Attributes.controls True
                         , Html.Attributes.autoplay True
                         ]