From 00381cfcd7a6a1169eaec7b34e281f9b4df9c9a7 Mon Sep 17 00:00:00 2001
From: Thomas Forgione <thomas@forgione.fr>
Date: Sun, 4 Oct 2020 18:00:16 +0200
Subject: [PATCH] 16:9

---
 index.html     |  1 -
 js/vd.js       |  1 +
 src/Colors.elm |  7 ++++++-
 src/Views.elm  | 30 +++++++++++++++++++++++-------
 4 files changed, 30 insertions(+), 9 deletions(-)

diff --git a/index.html b/index.html
index b2702b1..8193c49 100644
--- a/index.html
+++ b/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")
                 });
             });
diff --git a/js/vd.js b/js/vd.js
index a7959a1..44d141c 100644
--- a/js/vd.js
+++ b/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) {
diff --git a/src/Colors.elm b/src/Colors.elm
index bc631eb..f7a7ed5 100644
--- a/src/Colors.elm
+++ b/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
diff --git a/src/Views.elm b/src/Views.elm
index 801a69b..3170404 100644
--- a/src/Views.elm
+++ b/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 ]
-        { label = label, onPress = msg }
+    Input.button attr { 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 ]
+            [ 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")
+                ]
                 ( 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
                         ]