diff --git a/index.html b/index.html index 3bc09ca..8af7095 100644 --- a/index.html +++ b/index.html @@ -4,14 +4,26 @@ twitch.tforgione.fr +
+ diff --git a/src/Consts.elm b/src/Consts.elm index 4dc340c..84d9bad 100644 --- a/src/Consts.elm +++ b/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" diff --git a/src/Core.elm b/src/Core.elm index e532e93..6565b55 100644 --- a/src/Core.elm +++ b/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 ) diff --git a/src/Ports.elm b/src/Ports.elm new file mode 100644 index 0000000..5b1719f --- /dev/null +++ b/src/Ports.elm @@ -0,0 +1,4 @@ +port module Ports exposing (registerVideo) + + +port registerVideo : ( String, String ) -> Cmd msg diff --git a/src/Views.elm b/src/Views.elm index 146804e..47b25ed 100644 --- a/src/Views.elm +++ b/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) ]