elm-twitch/src/Views.elm

525 lines
14 KiB
Elm
Raw Normal View History

2020-10-03 18:44:16 +02:00
module Views exposing (view)
import Browser
2020-10-04 13:15:57 +02:00
import Colors
import Consts
2020-10-03 18:44:16 +02:00
import Core
2020-10-04 20:53:13 +02:00
import Element exposing (Element)
import Element.Background as Background
import Element.Border as Border
2020-10-04 13:15:57 +02:00
import Element.Font as Font
2020-10-04 20:53:13 +02:00
import Element.Input as Input
import Element.Keyed as Keyed
import Html
import Html.Attributes
import Json.Encode as Encode
import Time
import TimeUtils
import Twitch
2020-10-03 18:44:16 +02:00
2020-10-04 13:15:57 +02:00
view : Core.FullModel -> Browser.Document Core.Msg
2020-10-03 18:44:16 +02:00
view model =
2020-10-04 20:53:13 +02:00
let
element =
case model of
Core.Unloaded _ _ _ ->
2020-10-04 21:09:13 +02:00
Element.el [ Element.padding 10, Element.centerX ] spinner
2020-10-04 20:53:13 +02:00
Core.Loaded m ->
viewContent m
in
2020-10-04 18:10:26 +02:00
{ title = title model
2020-10-04 15:24:04 +02:00
, body =
2020-10-04 18:10:26 +02:00
[ Element.layout
[ Font.color Colors.blackFont
, Font.size Consts.normalFontSize
, Font.family [ Font.typeface "Cantarell" ]
]
2020-10-04 20:53:13 +02:00
(Element.column
2020-10-06 11:09:37 +02:00
[ Element.width Element.fill, Element.height Element.fill ]
2020-10-04 20:53:13 +02:00
[ topBar, element ]
)
2020-10-04 15:24:04 +02:00
]
2020-10-03 18:44:16 +02:00
}
2020-10-04 13:15:57 +02:00
2020-10-04 18:10:26 +02:00
title : Core.FullModel -> String
title model =
case model of
2020-10-04 20:20:16 +02:00
Core.Unloaded _ _ _ ->
2020-10-04 18:10:26 +02:00
Consts.url
Core.Loaded m ->
case m.page of
Core.Home ->
Consts.url
Core.Playlist p ->
Consts.url ++ " - " ++ p.name
Core.Video p v ->
Consts.url ++ " - " ++ p.name ++ " - " ++ v.name
2020-10-04 20:53:13 +02:00
viewContent : Core.Model -> Element Core.Msg
viewContent model =
case model.page of
Core.Home ->
playlistsView model.device model.playlists
Core.Playlist playlist ->
videoMiniaturesView model.device model.zone playlist
Core.Video playlist video ->
videoView model.device 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 : Element.Device -> List Twitch.Playlist -> Element Core.Msg
playlistsView device playlists =
let
empty =
Element.el [ Element.width Element.fill ] Element.none
views =
List.map playlistView playlists
grouped =
group (numberOfVideosPerRow device) 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
2020-10-05 12:00:25 +02:00
src =
Twitch.playlistMiniatureUrl playlist
2020-10-04 20:53:13 +02:00
image =
2020-10-05 12:00:25 +02:00
Keyed.el [ Element.width Element.fill, Element.height Element.fill ]
( src
, Element.image
[ Element.width Element.fill
, Element.height Element.fill
, Element.inFront inFront
]
{ description = "", src = src }
)
2020-10-04 20:53:13 +02:00
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
2020-10-05 11:26:11 +02:00
, onPress = Just (Core.PlaylistClicked playlist)
2020-10-04 20:53:13 +02:00
}
in
button
2020-10-05 11:26:11 +02:00
videoMiniaturesView : Element.Device -> Time.Zone -> Twitch.Playlist -> Element Core.Msg
2020-10-04 20:53:13 +02:00
videoMiniaturesView device zone playlist =
let
empty =
Element.el [ Element.width Element.fill ] Element.none
views =
List.map (videoMiniatureView zone playlist) playlist.videos
grouped =
group (numberOfVideosPerRow device) 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
2020-10-05 11:26:11 +02:00
videoMiniature : Twitch.Playlist -> Twitch.Video -> Element Core.Msg
videoMiniature playlist video =
2020-10-04 20:53:13 +02:00
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
]
2020-10-05 12:00:25 +02:00
src =
Twitch.videoMiniatureUrl playlist video
2020-10-04 20:53:13 +02:00
image =
2020-10-05 12:00:25 +02:00
Keyed.el [ Element.width Element.fill, Element.height Element.fill ]
( src
, Element.image
[ Element.width Element.fill
, Element.height Element.fill
, Element.inFront inFront
]
{ description = "", src = src }
)
2020-10-04 20:53:13 +02:00
label =
formatTime video.duration
in
image
2020-10-05 11:26:11 +02:00
videoMiniatureView : Time.Zone -> Twitch.Playlist -> Twitch.Video -> Element Core.Msg
2020-10-04 20:53:13 +02:00
videoMiniatureView zone playlist video =
let
display =
Element.column [ Element.width Element.fill, Element.spacing 10 ]
2020-10-05 11:26:11 +02:00
[ videoMiniature playlist video
2020-10-04 20:53:13 +02:00
, videoDescription zone video
]
button =
Input.button [ Element.width Element.fill, Element.alignTop ]
{ label = display
, onPress = Just (Core.VideoClicked playlist video)
}
in
button
2020-10-05 11:26:11 +02:00
videoInList : Time.Zone -> Twitch.Playlist -> Twitch.Video -> Twitch.Video -> Element Core.Msg
2020-10-04 20:53:13 +02:00
videoInList zone playlist activeVideo video =
let
( msg, attr ) =
if video == activeVideo then
( Nothing
, [ Element.width Element.fill
, Background.color Colors.selected
, Border.color Colors.primary
, Border.width 2
]
)
else
( Just (Core.VideoClicked playlist video), [ Element.width Element.fill ] )
label =
Element.row [ Element.width Element.fill, Element.spacing 10 ]
[ Element.el [ Element.width (Element.fillPortion 2) ]
2020-10-05 11:26:11 +02:00
(videoMiniature playlist video)
2020-10-04 20:53:13 +02:00
, Element.el [ Element.width (Element.fillPortion 3), Element.paddingXY 0 10, Element.alignTop ]
(videoDescription zone video)
]
in
Input.button attr { label = label, onPress = msg }
2020-10-05 11:26:11 +02:00
videoView : Element.Device -> Time.Zone -> Twitch.Playlist -> Twitch.Video -> Element Core.Msg
2020-10-04 20:53:13 +02:00
videoView device zone playlist video =
let
( builder, contentPadding ) =
case device.class of
Element.Phone ->
2020-10-06 11:09:37 +02:00
( Element.column [ Element.width Element.fill, Element.height Element.fill, Element.spacing 10 ]
2020-10-04 20:53:13 +02:00
, Element.paddingXY 10 0
)
_ ->
( Element.row [ Element.padding 10, Element.width Element.fill, Element.spacing 10 ]
, Element.padding 0
)
in
builder
[ Element.column
[ Element.width (Element.fillPortion 2)
, Element.spacing 10
, Element.alignTop
2020-10-06 11:09:37 +02:00
, Element.height Element.fill
2020-10-04 20:53:13 +02:00
]
[ Keyed.el
[ Element.width Element.fill
, Element.height (Element.px 0)
, Element.htmlAttribute (Html.Attributes.style "padding-top" "56.25%")
, Element.htmlAttribute (Html.Attributes.style "position" "relative")
]
( video.url
, Element.html
(Html.video
[ Html.Attributes.id (Twitch.videoId video)
, Html.Attributes.class "video-js"
, Html.Attributes.class "vjs-default-skin"
, Html.Attributes.class "wf"
, Html.Attributes.property "data-setup" (Encode.string "{\"fluid\": true}")
, Html.Attributes.style "position" "absolute"
, Html.Attributes.style "top" "0"
, Html.Attributes.style "height" "100%"
, Html.Attributes.controls True
, Html.Attributes.autoplay True
]
[]
)
)
, Element.paragraph
[ Font.size Consts.homeFontSize
, Font.bold
, contentPadding
]
[ Element.text video.name ]
, case video.date of
Just date ->
Element.paragraph
[ contentPadding, Font.size Consts.titleFontSize ]
[ Element.text ("Diffusé le " ++ formatDate zone date) ]
_ ->
Element.none
]
, Element.column
[ contentPadding
, Element.alignTop
, Element.spacing 10
, Element.width (Element.fillPortion 1)
2020-10-06 11:09:37 +02:00
, Element.height Element.fill
, Element.scrollbarY
2020-10-04 20:53:13 +02:00
]
(List.map (videoInList zone playlist video) 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 ]
, case video.date of
Just date ->
Element.paragraph
[ Font.color Colors.greyFont
]
[ Element.text ("Diffusé le " ++ formatDate zone date) ]
_ ->
Element.none
]
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
numberOfVideosPerRow : Element.Device -> Int
numberOfVideosPerRow device =
case device.class of
Element.Phone ->
1
Element.Tablet ->
3
_ ->
4
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)
2020-10-04 21:09:13 +02:00
spinner : Element Core.Msg
spinner =
Element.html
(Html.div [ Html.Attributes.class "lds-spinner" ]
[ Html.div [] []
, Html.div [] []
, Html.div [] []
, Html.div [] []
, Html.div [] []
, Html.div [] []
, Html.div [] []
, Html.div [] []
, Html.div [] []
, Html.div [] []
, Html.div [] []
, Html.div [] []
]
)