module Views exposing (view) import Browser import Colors import Consts import Core import Element exposing (Element) 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 view : Core.FullModel -> Browser.Document Core.Msg view model = { title = Consts.url , body = [ Element.layout [ Font.color Colors.blackFont, Font.size Consts.normalFontSize ] (viewContent model) ] } viewContent : Core.FullModel -> Element Core.Msg viewContent model = let content = case model of Core.Unloaded _ _ -> Element.none Core.Loaded submodel -> mainView submodel in Element.column [ Element.width Element.fill ] [ topBar, content ] mainView : Core.Model -> Element Core.Msg mainView model = case model.page of Core.Home -> playlistsView model.playlists Core.Playlist playlist -> videoMiniaturesView model.zone playlist Core.Video playlist video -> videoView model.zone playlist video topBar : Element Core.Msg topBar = Element.row [ Element.width Element.fill , Background.color Colors.primary , Font.color Colors.white , Font.size Consts.homeFontSize ] [ homeButton ] homeButton : Element Core.Msg homeButton = Input.button [ Element.padding Consts.homePadding , Element.height Element.fill , Element.mouseOver [ Background.color Colors.primaryOver ] , Font.bold ] { label = Element.text Consts.name , onPress = Just Core.HomeClicked } playlistsView : List Twitch.Playlist -> Element Core.Msg playlistsView playlists = let empty = Element.el [ Element.width Element.fill ] Element.none views = List.map playlistView playlists grouped = group 4 views rows = grouped |> List.map (\x -> List.map (Maybe.withDefault empty) x) |> List.map (Element.row [ Element.spacing 10, Element.width Element.fill ]) final = Element.column [ Element.padding 10, Element.spacing 10, Element.width Element.fill ] rows in final playlistView : Twitch.Playlist -> Element Core.Msg playlistView playlist = let image = Element.image [ Element.width Element.fill , Element.height Element.fill , Element.inFront inFront ] { description = "", src = Twitch.playlistMiniatureUrl playlist } length = List.length playlist.videos label = String.fromInt length ++ " video" ++ (if length > 1 then "s" else "" ) inFront = Element.text label |> Element.el [ Background.color Colors.greyBackground , Border.rounded 5 , Element.padding 5 , Font.color Colors.white ] |> Element.el [ Element.alignBottom , Element.alignRight , Element.padding 5 ] display = Element.column [ Element.width Element.fill, Element.spacing 10 ] [ image , Element.paragraph [ Font.bold, Font.size Consts.titleFontSize ] [ Element.text playlist.name ] ] button = Input.button [ Element.width Element.fill, Element.alignTop ] { label = display , onPress = Just (Core.PlaylistClicked playlist) } in button videoMiniaturesView : Time.Zone -> Twitch.Playlist -> Element Core.Msg videoMiniaturesView zone playlist = let empty = Element.el [ Element.width Element.fill ] Element.none views = List.map (videoMiniatureView zone playlist) playlist.videos grouped = group 4 views rows = grouped |> List.map (\x -> List.map (Maybe.withDefault empty) x) |> List.map (Element.row [ Element.spacing 10, Element.width Element.fill ]) final = Element.column [ Element.padding 10, Element.spacing 10, Element.width Element.fill ] rows in final videoMiniature : Twitch.Video -> Element Core.Msg videoMiniature video = let inFront = Element.text label |> Element.el [ Background.color Colors.greyBackground , Border.rounded 5 , Element.padding 5 , Font.color Colors.white ] |> Element.el [ Element.alignBottom , Element.alignRight , Element.padding 5 ] image = Element.image [ Element.width Element.fill , Element.height Element.fill , Element.inFront inFront ] { description = "", src = Twitch.videoMiniatureUrl video } label = formatTime video.duration in image videoMiniatureView : Time.Zone -> Twitch.Playlist -> Twitch.Video -> Element Core.Msg videoMiniatureView zone playlist video = let display = Element.column [ Element.width Element.fill, Element.spacing 10 ] [ videoMiniature video , videoDescription zone video ] button = Input.button [ Element.width Element.fill, Element.alignTop ] { label = display , onPress = Just (Core.VideoClicked playlist video) } in button 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.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 [ Font.size Consts.titleFontSize ] [ 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) ] videoDescription : Time.Zone -> Twitch.Video -> Element Core.Msg videoDescription zone video = Element.column [ Element.spacing 10 ] [ Element.paragraph [ Font.bold , Font.size Consts.titleFontSize ] [ Element.text video.name ] , Element.paragraph [ Font.color Colors.greyFont ] [ Element.text ("Diffusé le " ++ formatDate zone video.date) ] ] formatDate : Time.Zone -> Time.Posix -> String formatDate zone time = let day = Time.toDay zone time |> String.fromInt |> TimeUtils.pad2 month = Time.toMonth zone time |> TimeUtils.monthToString year = Time.toYear zone time |> String.fromInt |> TimeUtils.pad2 hours = Time.toHour zone time |> String.fromInt minutes = Time.toMinute zone time |> String.fromInt |> TimeUtils.pad2 in day ++ "/" ++ month ++ "/" ++ year ++ " à " ++ hours ++ "h" ++ minutes formatTime : Int -> String formatTime time = let hours = toHours time minutes = toMinutes time seconds = toSeconds time hoursString = String.fromInt hours minutesString = if minutes < 10 then "0" ++ String.fromInt minutes else String.fromInt minutes secondsString = if seconds < 10 then "0" ++ String.fromInt seconds else String.fromInt seconds in hoursString ++ ":" ++ minutesString ++ ":" ++ secondsString toHours : Int -> Int toHours i = i // 3600 toMinutes : Int -> Int toMinutes i = modBy 3600 i // 60 toSeconds : Int -> Int toSeconds i = modBy 60 i group : Int -> List a -> List (List (Maybe a)) group size list = let grouped = List.map (List.map Just) (groupAux size list []) groupedRev = List.reverse grouped ( firstFixed, tail ) = case groupedRev of h :: t -> ( List.concat [ h, List.repeat (size - List.length h) Nothing ], t ) [] -> ( [], [] ) fixed = (firstFixed :: tail) |> List.reverse in fixed groupAux : Int -> List a -> List (List a) -> List (List a) groupAux size list acc = if List.isEmpty list then List.reverse acc else let groupHead = List.take size list groupTail = List.drop size list in groupAux size groupTail (groupHead :: acc)