This commit is contained in:
Thomas Forgione 2020-10-04 14:24:16 +02:00
parent 72fe2c7c17
commit 0215d94be9
4 changed files with 177 additions and 23 deletions

1
.gitignore vendored
View File

@ -3,3 +3,4 @@ elm-stuff
js/main.js js/main.js
js/main.tmp.js js/main.tmp.js
js/main.min.js js/main.min.js
deploy.sh

View File

@ -20,11 +20,16 @@ type alias Model =
type Page type Page
= Home = Home
| Playlist Twitch.Playlist
| Video Twitch.Playlist Twitch.Video
type Msg type Msg
= Noop = Noop
| PlaylistsReceived (List Twitch.Playlist) | PlaylistsReceived (List Twitch.Playlist)
| HomeClicked
| PlaylistClicked Twitch.Playlist
| VideoClicked Twitch.Playlist Twitch.Video
init : Decode.Value -> Url.Url -> Browser.Navigation.Key -> ( FullModel, Cmd Msg ) init : Decode.Value -> Url.Url -> Browser.Navigation.Key -> ( FullModel, Cmd Msg )
@ -36,9 +41,21 @@ init _ _ _ =
update : Msg -> FullModel -> ( FullModel, Cmd Msg ) update : Msg -> FullModel -> ( FullModel, Cmd Msg )
update msg model = update msg model =
case msg of case ( msg, model ) of
Noop -> ( Noop, _ ) ->
( model, Cmd.none ) ( model, Cmd.none )
PlaylistsReceived playlists -> ( PlaylistsReceived playlists, _ ) ->
( Loaded { playlists = playlists, page = Home }, Cmd.none ) ( Loaded { playlists = playlists, page = Home }, Cmd.none )
( HomeClicked, Loaded { playlists } ) ->
( Loaded { playlists = playlists, page = Home }, Cmd.none )
( PlaylistClicked playlist, Loaded { playlists } ) ->
( Loaded { playlists = playlists, page = Playlist playlist }, Cmd.none )
( VideoClicked playlist video, Loaded { playlists } ) ->
( Loaded { playlists = playlists, page = Video playlist video }, Cmd.none )
_ ->
( model, Cmd.none )

View File

@ -3,6 +3,7 @@ module Twitch exposing
, Video , Video
, fetchPlaylists , fetchPlaylists
, playlistMiniatureUrl , playlistMiniatureUrl
, videoMiniatureUrl
) )
import Html.Parser import Html.Parser
@ -47,9 +48,24 @@ playlistMiniatureUrl playlist =
"" ""
videoMiniatureUrl : Video -> String
videoMiniatureUrl video =
video.url ++ "miniature-050.png"
sortPlaylist : Playlist -> Playlist
sortPlaylist playlist =
{ playlist | videos = List.sortBy .url playlist.videos |> List.reverse }
sortPlaylists : List Playlist -> List Playlist
sortPlaylists playlists =
List.sortBy .url (List.map sortPlaylist playlists) |> List.reverse
fetchPlaylists : Task x (List Playlist) fetchPlaylists : Task x (List Playlist)
fetchPlaylists = fetchPlaylists =
fetchPlaylistPath |> Task.andThen fetchPlaylistsMapper fetchPlaylistPath |> Task.andThen fetchPlaylistsMapper |> Task.map sortPlaylists
fetchPlaylistPath : Task x (List String) fetchPlaylistPath : Task x (List String)
@ -174,7 +190,7 @@ findHrefsAux acc node =
Html.Parser.Element string (( key, value ) :: t) nodes -> Html.Parser.Element string (( key, value ) :: t) nodes ->
let let
newAcc = newAcc =
if key == "href" then if key == "href" && String.endsWith "/" value && value /= "../" then
value :: acc value :: acc
else else

View File

@ -39,6 +39,12 @@ mainView model =
Core.Home -> Core.Home ->
playlistsView model.playlists playlistsView model.playlists
Core.Playlist playlist ->
videoMiniaturesView playlist
Core.Video playlist video ->
videoView playlist video
topBar : Element Core.Msg topBar : Element Core.Msg
topBar = topBar =
@ -60,7 +66,7 @@ homeButton =
, Font.bold , Font.bold
] ]
{ label = Element.text Consts.name { label = Element.text Consts.name
, onPress = Nothing , onPress = Just Core.HomeClicked
} }
@ -91,7 +97,11 @@ playlistView : Twitch.Playlist -> Element Core.Msg
playlistView playlist = playlistView playlist =
let let
image = image =
Element.image [ Element.width Element.fill, Element.height Element.fill, Element.inFront inFront ] Element.image
[ Element.width Element.fill
, Element.height Element.fill
, Element.inFront inFront
]
{ description = "", src = Twitch.playlistMiniatureUrl playlist } { description = "", src = Twitch.playlistMiniatureUrl playlist }
length = length =
@ -108,39 +118,149 @@ playlistView playlist =
) )
inFront = inFront =
Element.el Element.text label
[ Element.alignBottom |> Element.el
, Element.alignRight [ Background.color Colors.greyBackground
, Background.color Colors.greyBackground , Border.rounded 5
, Border.rounded 5 , Element.padding 5
, Element.padding 5 , Font.color Colors.white
, Font.color Colors.white ]
] |> Element.el
(Element.text label) [ Element.alignBottom
|> Element.el [ Element.alignBottom, Element.alignRight, Element.padding 5 ] , Element.alignRight
, Element.padding 5
]
display = display =
Element.column [ Element.width Element.fill, Element.spacing 10 ] Element.column [ Element.width Element.fill, Element.spacing 10 ]
[ image [ image
, Element.paragraph [ Font.bold, Font.color Colors.blackFont ] [ Element.text playlist.name ] , Element.paragraph
[ Font.bold, Font.color Colors.blackFont ]
[ Element.text playlist.name ]
] ]
button = button =
Input.button [ Element.width Element.fill, Element.alignTop ] Input.button [ Element.width Element.fill, Element.alignTop ]
{ label = display { label = display
, onPress = Nothing , onPress = Just (Core.PlaylistClicked playlist)
} }
in in
button 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 : Int -> String
formatTime time = formatTime time =
String.fromInt (toHours 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
++ ":" ++ ":"
++ String.fromInt (toMinutes time) ++ minutesString
++ ":" ++ ":"
++ String.fromInt (toSeconds time) ++ secondsString
toHours : Int -> Int toHours : Int -> Int
@ -184,7 +304,7 @@ group size list =
groupAux : Int -> List a -> List (List a) -> List (List a) groupAux : Int -> List a -> List (List a) -> List (List a)
groupAux size list acc = groupAux size list acc =
if List.isEmpty list then if List.isEmpty list then
acc List.reverse acc
else else
let let