529 lines
14 KiB
Elm
529 lines
14 KiB
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 Element.Keyed as Keyed
|
|
import Html
|
|
import Html.Attributes
|
|
import Json.Encode as Encode
|
|
import Time
|
|
import TimeUtils
|
|
import Twitch
|
|
import Ui
|
|
|
|
|
|
view : Core.FullModel -> Browser.Document Core.Msg
|
|
view model =
|
|
let
|
|
element =
|
|
case model of
|
|
Core.Unloaded _ _ _ ->
|
|
Element.el [ Element.padding 10, Element.centerX ] spinner
|
|
|
|
Core.Loaded m ->
|
|
viewContent m
|
|
in
|
|
{ title = title model
|
|
, body =
|
|
[ Element.layout
|
|
[ Font.color Colors.blackFont
|
|
, Font.size Consts.normalFontSize
|
|
, Font.family [ Font.typeface "Cantarell" ]
|
|
]
|
|
(Element.column
|
|
[ Element.width Element.fill, Element.height Element.fill ]
|
|
[ topBar, element ]
|
|
)
|
|
]
|
|
}
|
|
|
|
|
|
title : Core.FullModel -> String
|
|
title model =
|
|
case model of
|
|
Core.Unloaded _ _ _ ->
|
|
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
|
|
|
|
|
|
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 =
|
|
Ui.link
|
|
[ Element.padding Consts.homePadding
|
|
, Element.height Element.fill
|
|
, Font.bold
|
|
]
|
|
{ label = Element.text Consts.name
|
|
, url = "/"
|
|
}
|
|
|
|
|
|
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
|
|
src =
|
|
Twitch.playlistMiniatureUrl playlist
|
|
|
|
image =
|
|
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 }
|
|
)
|
|
|
|
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 ]
|
|
{ label =
|
|
Ui.link [ Element.width Element.fill, Element.alignTop ]
|
|
{ label = display
|
|
, url = "/#" ++ playlist.url
|
|
}
|
|
, onPress = Nothing
|
|
}
|
|
in
|
|
button
|
|
|
|
|
|
videoMiniaturesView : Element.Device -> Time.Zone -> Twitch.Playlist -> Element Core.Msg
|
|
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
|
|
|
|
|
|
videoMiniature : Twitch.Playlist -> Twitch.Video -> Element Core.Msg
|
|
videoMiniature playlist 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
|
|
]
|
|
|
|
src =
|
|
Twitch.videoMiniatureUrl playlist video
|
|
|
|
image =
|
|
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 }
|
|
)
|
|
|
|
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 playlist video
|
|
, videoDescription zone video
|
|
]
|
|
|
|
button =
|
|
Ui.link [ Element.width Element.fill, Element.alignTop ]
|
|
{ label = display
|
|
, url = "/#" ++ playlist.url ++ video.url
|
|
}
|
|
in
|
|
button
|
|
|
|
|
|
videoInList : Time.Zone -> Twitch.Playlist -> Twitch.Video -> Twitch.Video -> Element Core.Msg
|
|
videoInList zone playlist activeVideo video =
|
|
let
|
|
label =
|
|
Element.row [ Element.width Element.fill, Element.spacing 10 ]
|
|
[ Element.el [ Element.width (Element.fillPortion 2) ]
|
|
(videoMiniature playlist video)
|
|
, Element.el [ Element.width (Element.fillPortion 3), Element.paddingXY 0 10, Element.alignTop ]
|
|
(videoDescription zone video)
|
|
]
|
|
in
|
|
if video == activeVideo then
|
|
Element.el
|
|
[ Element.width Element.fill
|
|
, Background.color Colors.selected
|
|
, Border.color Colors.primary
|
|
, Border.width 2
|
|
]
|
|
label
|
|
|
|
else
|
|
Ui.link [ Element.width Element.fill ]
|
|
{ label = label
|
|
, url = "/#" ++ playlist.url ++ video.url
|
|
}
|
|
|
|
|
|
videoView : Element.Device -> Time.Zone -> Twitch.Playlist -> Twitch.Video -> Element Core.Msg
|
|
videoView device zone playlist video =
|
|
let
|
|
( builder, contentPadding ) =
|
|
case device.class of
|
|
Element.Phone ->
|
|
( Element.column [ Element.width Element.fill, Element.height Element.fill, Element.spacing 10 ]
|
|
, 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
|
|
, Element.height Element.fill
|
|
]
|
|
[ 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)
|
|
, Element.height Element.fill
|
|
, Element.scrollbarY
|
|
]
|
|
(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)
|
|
|
|
|
|
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 [] []
|
|
]
|
|
)
|