elm-twitch/src/Views.elm

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 Twitch


view : Core.FullModel -> Browser.Document Core.Msg
view model =
    { title = Consts.url
    , body = [ Element.layout [] (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 playlist

        Core.Video playlist video ->
            videoView 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.color Colors.blackFont ]
                    [ Element.text playlist.name ]
                ]

        button =
            Input.button [ Element.width Element.fill, Element.alignTop ]
                { label = display
                , onPress = Just (Core.PlaylistClicked playlist)
                }
    in
    button


videoMiniaturesView : Twitch.Playlist -> Element Core.Msg
videoMiniaturesView playlist =
    let
        empty =
            Element.el [ Element.width Element.fill ] Element.none

        views =
            List.map (videoMiniatureView 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


videoMiniatureView : Twitch.Playlist -> Twitch.Video -> Element Core.Msg
videoMiniatureView playlist video =
    let
        image =
            Element.image
                [ Element.width Element.fill
                , Element.height Element.fill
                , Element.inFront inFront
                ]
                { description = "", src = Twitch.videoMiniatureUrl video }

        label =
            formatTime video.duration

        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.color Colors.blackFont ]
                    [ Element.text video.name ]
                ]

        button =
            Input.button [ Element.width Element.fill, Element.alignTop ]
                { label = display
                , onPress = Just (Core.VideoClicked playlist video)
                }
    in
    button


videoView : Twitch.Playlist -> Twitch.Video -> Element Core.Msg
videoView playlist video =
    Element.row [ Element.padding 10, Element.width Element.fill, Element.spacing 20 ]
        [ Element.image [ Element.width (Element.fillPortion 2) ]
            { description = "", src = Twitch.videoMiniatureUrl video }
        , Element.column [ Element.alignTop, Element.width (Element.fillPortion 1) ]
            [ Element.text "sup"
            ]
        ]


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)