Shit starts to work

src/Consts.elm

@@ -5,6 +5,7 @@ module Consts exposing
     , normalFontSize
     , titleFontSize
     , url
+    , videoId
     )
 
 
@@ -36,3 +37,8 @@ homeFontSize =
 homePadding : Int
 homePadding =
     15
+
+
+videoId : String
+videoId =
+    "video"

src/Core.elm

@@ -1,7 +1,9 @@
 module Core exposing (FullModel(..), Model, Msg(..), Page(..), init, update)
 
 import Browser.Navigation as Nav
+import Consts
 import Json.Decode as Decode
+import Ports
 import Task
 import Time
 import Twitch
@@ -66,7 +68,10 @@ update msg model =
 
         ( VideoClicked playlist video, Loaded m ) ->
             ( Loaded { m | page = Video playlist video }
-            , Nav.pushUrl m.key ("#" ++ playlist.url ++ Twitch.videoName video)
+            , Cmd.batch
+                [ Nav.pushUrl m.key ("#" ++ playlist.url ++ Twitch.videoName video)
+                , Ports.registerVideo ( "video", video.url )
+                ]
             )
 
         ( UrlReceived url, Loaded m ) ->
@@ -96,18 +101,20 @@ update msg model =
                         _ ->
                             Nothing
 
-                page =
+                ( page, cmd ) =
                     case ( playlist, video ) of
                         ( Just p, Just v ) ->
-                            Video p v
+                            ( Video p v
+                            , Ports.registerVideo ( Consts.videoId, v.url )
+                            )
 
                         ( Just p, Nothing ) ->
-                            Playlist p
+                            ( Playlist p, Cmd.none )
 
                         _ ->
-                            Home
+                            ( Home, Cmd.none )
             in
-            ( Loaded { m | page = page }, Cmd.none )
+            ( Loaded { m | page = page }, cmd )
 
         _ ->
             ( model, Cmd.none )

src/Ports.elm

@@ -0,0 +1,4 @@
+port module Ports exposing (registerVideo)
+
+
+port registerVideo : ( String, String ) -> Cmd msg

src/Views.elm

@@ -9,6 +9,9 @@ import Element.Background as Background
 import Element.Border as Border
 import Element.Font as Font
 import Element.Input as Input
+import Html
+import Html.Attributes
+import Json.Encode as Encode
 import Time
 import TimeUtils
 import Twitch
@@ -225,25 +228,42 @@ videoMiniatureView zone playlist video =
     button
 
 
-videoInList : Time.Zone -> Twitch.Video -> Element Core.Msg
-videoInList zone video =
-    Element.row [ Element.width Element.fill, Element.spacing 10 ]
-        [ Element.el [ Element.width (Element.fillPortion 2) ]
-            (videoMiniature video)
-        , Element.el [ Element.width (Element.fillPortion 3), Element.paddingXY 0 10, Element.alignTop ]
-            (videoDescription zone video)
-        ]
+videoInList : Time.Zone -> Twitch.Playlist -> Twitch.Video -> Element Core.Msg
+videoInList zone playlist video =
+    let
+        label =
+            Element.row [ Element.width Element.fill, Element.spacing 10 ]
+                [ Element.el [ Element.width (Element.fillPortion 2) ]
+                    (videoMiniature video)
+                , Element.el [ Element.width (Element.fillPortion 3), Element.paddingXY 0 10, Element.alignTop ]
+                    (videoDescription zone video)
+                ]
+    in
+    Input.button [ Element.width Element.fill ]
+        { label = label, onPress = Just (Core.VideoClicked playlist video) }
 
 
 videoView : Time.Zone -> Twitch.Playlist -> Twitch.Video -> Element Core.Msg
 videoView zone playlist video =
     Element.row [ Element.padding 10, Element.width Element.fill, Element.spacing 10 ]
-        [ Element.column [ Element.spacing 10, Element.width (Element.fillPortion 2) ]
-            [ Element.image [ Element.width Element.fill ]
-                { description = "", src = Twitch.videoMiniatureUrl video }
+        [ Element.column
+            [ Element.width (Element.fillPortion 2)
+            , Element.htmlAttribute (Html.Attributes.style "height" "auto")
+            ]
+            [ Element.html
+                (Html.video
+                    [ Html.Attributes.id Consts.videoId
+                    , Html.Attributes.class "video-js vjs-default-skin wf"
+                    , Html.Attributes.property "data-setup" (Encode.string "{\"fluid\": true}")
+                    , Html.Attributes.controls True
+                    , Html.Attributes.autoplay True
+                    ]
+                    []
+                )
             , Element.paragraph
                 [ Font.size Consts.homeFontSize
                 , Font.bold
+                , Element.paddingEach { top = 10, left = 0, bottom = 0, right = 0 }
                 ]
                 [ Element.text video.name ]
             , Element.paragraph
@@ -251,7 +271,7 @@ videoView zone playlist video =
                 [ Element.text ("Diffusé le " ++ formatDate zone video.date) ]
             ]
         , Element.column [ Element.alignTop, Element.spacing 10, Element.width (Element.fillPortion 1) ]
-            (List.map (videoInList zone) playlist.videos)
+            (List.map (videoInList zone playlist) playlist.videos)
         ]