diff --git a/index.html b/index.html index 2b3cccd..f1e1281 100644 --- a/index.html +++ b/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") + }); }); diff --git a/src/Core.elm b/src/Core.elm index 6565b55..0151ad6 100644 --- a/src/Core.elm +++ b/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 ) -> diff --git a/src/Twitch.elm b/src/Twitch.elm index b16c54b..6823463 100644 --- a/src/Twitch.elm +++ b/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 diff --git a/src/Views.elm b/src/Views.elm index 47b25ed..0a0bf1e 100644 --- a/src/Views.elm +++ b/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,15 +258,18 @@ videoView zone playlist video = [ 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 - ] - [] + [ 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.property "data-setup" (Encode.string "{\"fluid\": true}") + , Html.Attributes.controls True + , Html.Attributes.autoplay True + ] + [] + ) ) , Element.paragraph [ Font.size Consts.homeFontSize @@ -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) ]