Fix issues

index.html

@@ -15,18 +15,11 @@
                 node: document.getElementById('container')
             });
 
-            function setup(args) {
-                if (document.getElementById(args[0]) != undefined) {
-                    vd.setup(args[0], args[1] + "/manifest.mpd")
-                } else {
-                    setTimeout(function() {
-                        setup(args);
-                    }, 50);
-                }
-            }
-
             app.ports.registerVideo.subscribe(function(args) {
-                setup(args);
+                requestAnimationFrame(function() {
+                    console.log(args);
+                    vd.setup(args[0], args[1] + "/manifest.mpd")
+                });
             });
         </script>
     </body>

src/Core.elm

@@ -1,7 +1,6 @@
 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
@@ -70,7 +69,7 @@ update msg model =
             ( Loaded { m | page = Video playlist video }
             , Cmd.batch
                 [ Nav.pushUrl m.key ("#" ++ playlist.url ++ Twitch.videoName video)
-                , Ports.registerVideo ( "video", video.url )
+                , Ports.registerVideo ( Twitch.videoId video, video.url )
                 ]
             )
 
@@ -105,7 +104,7 @@ update msg model =
                     case ( playlist, video ) of
                         ( Just p, Just v ) ->
                             ( Video p v
-                            , Ports.registerVideo ( Consts.videoId, v.url )
+                            , Ports.registerVideo ( Twitch.videoId v, v.url )
                             )
 
                         ( Just p, Nothing ) ->

src/Twitch.elm

@@ -3,6 +3,7 @@ module Twitch exposing
     , Video
     , fetchPlaylists
     , playlistMiniatureUrl
+    , videoId
     , videoMiniatureUrl
     , videoName
     )
@@ -35,6 +36,11 @@ videoName video =
     String.join "/" (List.drop 3 (String.split "/" video.url))
 
 
+videoId : Video -> String
+videoId video =
+    String.dropLeft 1 video.url |> String.replace "/" "-"
+
+
 get : { url : String, resolver : Http.Resolver x a } -> Task x a
 get { url, resolver } =
     Http.task

src/Views.elm

@@ -9,6 +9,7 @@ import Element.Background as Background
 import Element.Border as Border
 import Element.Font as Font
 import Element.Input as Input
+import Element.Keyed as Keyed
 import Html
 import Html.Attributes
 import Json.Encode as Encode
@@ -228,9 +229,16 @@ videoMiniatureView zone playlist video =
     button
 
 
-videoInList : Time.Zone -> Twitch.Playlist -> Twitch.Video -> Element Core.Msg
-videoInList zone playlist video =
+videoInList : Time.Zone -> Twitch.Playlist -> Twitch.Video -> Twitch.Video -> Element Core.Msg
+videoInList zone playlist activeVideo video =
     let
+        msg =
+            if video == activeVideo then
+                Nothing
+
+            else
+                Just (Core.VideoClicked playlist video)
+
         label =
             Element.row [ Element.width Element.fill, Element.spacing 10 ]
                 [ Element.el [ Element.width (Element.fillPortion 2) ]
@@ -240,7 +248,7 @@ videoInList zone playlist video =
                 ]
     in
     Input.button [ Element.width Element.fill ]
-        { label = label, onPress = Just (Core.VideoClicked playlist video) }
+        { label = label, onPress = msg }
 
 
 videoView : Time.Zone -> Twitch.Playlist -> Twitch.Video -> Element Core.Msg
@@ -250,9 +258,11 @@ videoView zone playlist video =
             [ Element.width (Element.fillPortion 2)
             , Element.htmlAttribute (Html.Attributes.style "height" "auto")
             ]
-            [ Element.html
+            [ Keyed.el [ Element.width Element.fill ]
+                ( video.url
+                , Element.html
                     (Html.video
-                    [ Html.Attributes.id Consts.videoId
+                        [ Html.Attributes.id (Twitch.videoId video)
                         , Html.Attributes.class "video-js vjs-default-skin wf"
                         , Html.Attributes.property "data-setup" (Encode.string "{\"fluid\": true}")
                         , Html.Attributes.controls True
@@ -260,6 +270,7 @@ videoView zone playlist video =
                         ]
                         []
                     )
+                )
             , Element.paragraph
                 [ Font.size Consts.homeFontSize
                 , Font.bold
@@ -271,7 +282,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) playlist.videos)
+            (List.map (videoInList zone playlist video) playlist.videos)
         ]