tforgione
/
elm-twitch
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Adds badge new

This commit is contained in:
Thomas Forgione 2020-11-06 12:19:42 +01:00
parent cace6f09f8
commit 1bb1f8f5c4
4 changed files with 128 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/Colors.elm
View File

@ -1,4 +1,4 @@
module Colors exposing (blackFont, greyBackground, greyFont, primary, primaryOver, selected, white) module Colors exposing (blackFont, greyBackground, greyFont, primary, primaryOver, red, selected, white)
import Element import Element
@ -18,6 +18,11 @@ white =
Element.rgb255 255 255 255 Element.rgb255 255 255 255
red : Element.Color
red =
Element.rgb255 255 0 0
greyBackground : Element.Color greyBackground : Element.Color
greyBackground = greyBackground =
Element.rgba255 0 0 0 0.7 Element.rgba255 0 0 0 0.7

98
src/Core.elm
View File

@ -22,6 +22,7 @@ type alias Model =
, key : Nav.Key , key : Nav.Key
, device : Element.Device , device : Element.Device
, time : Time.Posix , time : Time.Posix
, currentDate : Time.Posix
, url : Url.Url , url : Url.Url
} }
@ -47,13 +48,23 @@ type Msg
| HoverVideo Twitch.Video | HoverVideo Twitch.Video
| Unhover | Unhover
| TimeReceived Time.Posix | TimeReceived Time.Posix
| CurrentDateReceived Time.Posix
init : { width : Int, height : Int } -> Url.Url -> Nav.Key -> ( Model, Cmd Msg ) init : { width : Int, height : Int } -> Url.Url -> Nav.Key -> ( Model, Cmd Msg )
init { width, height } url key = init { width, height } url key =
( Model [] Time.utc (Home Nothing) key (Element.classifyDevice { width = width, height = height }) (Time.millisToPosix 0) url ( Model
[]
Time.utc
(Home Nothing)
key
(Element.classifyDevice { width = width, height = height })
(Time.millisToPosix 0)
(Time.millisToPosix 0)
url
, Cmd.batch , Cmd.batch
[ Task.attempt TimeZoneReceivedResult TimeZone.getZone [ Task.attempt TimeZoneReceivedResult TimeZone.getZone
, Task.perform CurrentDateReceived Time.now
, Twitch.fetchPlaylists resultToMsg , Twitch.fetchPlaylists resultToMsg
] ]
) )
@ -79,80 +90,83 @@ subscriptions _ =
update : Msg -> Model -> ( Model, Cmd Msg ) update : Msg -> Model -> ( Model, Cmd Msg )
update msg model = update msg model =
case ( msg, model ) of case msg of
( Noop, _ ) -> Noop ->
( model, Cmd.none ) ( model, Cmd.none )
( TimeZoneReceived z, m ) -> TimeZoneReceived z ->
( { m | zone = z }, Cmd.none ) ( { model | zone = z }, Cmd.none )
( TimeZoneReceivedResult (Ok ( _, zone )), m ) -> TimeZoneReceivedResult (Ok ( _, zone )) ->
( { m | zone = zone }, Cmd.none ) ( { model | zone = zone }, Cmd.none )
( TimeZoneReceivedResult (Err _), _ ) -> TimeZoneReceivedResult (Err _) ->
( model, Task.perform TimeZoneReceived Time.here ) ( model, Task.perform TimeZoneReceived Time.here )
( TimeReceived p, m ) -> TimeReceived p ->
( { m | time = p }, Cmd.none ) ( { model | time = p }, Cmd.none )
( HoverPlaylist hover, m ) -> CurrentDateReceived d ->
case m.page of ( { model | currentDate = d }, Cmd.none )
HoverPlaylist hover ->
case model.page of
Home Nothing -> Home Nothing ->
( { m | page = Home (Just (Hover.hover hover m.time)) }, Cmd.none ) ( { model | page = Home (Just (Hover.hover hover model.time)) }, Cmd.none )
_ -> _ ->
( m, Cmd.none ) ( model, Cmd.none )
( HoverVideo hover, m ) -> HoverVideo hover ->
case m.page of case model.page of
Playlist p Nothing -> Playlist p Nothing ->
( { m | page = Playlist p (Just (Hover.hover hover m.time)) }, Cmd.none ) ( { model | page = Playlist p (Just (Hover.hover hover model.time)) }, Cmd.none )
Video p v Nothing -> Video p v Nothing ->
( { m | page = Video p v (Just (Hover.hover v m.time)) }, Cmd.none ) ( { model | page = Video p v (Just (Hover.hover v model.time)) }, Cmd.none )
_ -> _ ->
( m, Cmd.none ) ( model, Cmd.none )
( Unhover, m ) -> Unhover ->
case m.page of case model.page of
Home _ -> Home _ ->
( { m | page = Home Nothing }, Cmd.none ) ( { model | page = Home Nothing }, Cmd.none )
Playlist p _ -> Playlist p _ ->
( { m | page = Playlist p Nothing }, Cmd.none ) ( { model | page = Playlist p Nothing }, Cmd.none )
Video p v _ -> Video p v _ ->
( { m | page = Video p v Nothing }, Cmd.none ) ( { model | page = Video p v Nothing }, Cmd.none )
( SizeReceived w h, m ) -> SizeReceived w h ->
( { m | device = Element.classifyDevice { width = w, height = h } } ( { model | device = Element.classifyDevice { width = w, height = h } }
, Cmd.none , Cmd.none
) )
( PlaylistsReceived playlists, m ) -> PlaylistsReceived playlists ->
update update
(UrlReceived m.url) (UrlReceived model.url)
{ m | playlists = playlists, page = Home Nothing } { model | playlists = playlists, page = Home Nothing }
( HomeClicked, m ) -> HomeClicked ->
( model ( model
, Nav.pushUrl m.key "#" , Nav.pushUrl model.key "#"
) )
( PlaylistClicked playlist, m ) -> PlaylistClicked playlist ->
( model ( model
, Nav.pushUrl m.key ("#" ++ playlist.url) , Nav.pushUrl model.key ("#" ++ playlist.url)
) )
( VideoClicked playlist video, m ) -> VideoClicked playlist video ->
( model ( model
, Nav.pushUrl m.key ("#" ++ playlist.url ++ video.url) , Nav.pushUrl model.key ("#" ++ playlist.url ++ video.url)
) )
( UrlReceived url, m ) -> UrlReceived url ->
if List.isEmpty m.playlists then if List.isEmpty model.playlists then
( { m | url = url }, Cmd.none ) ( { model | url = url }, Cmd.none )
else else
let let
@ -193,7 +207,7 @@ update msg model =
( Nothing, Nothing ) ( Nothing, Nothing )
playlist = playlist =
List.head (List.filter (\x -> Just x.url == playlistName) m.playlists) List.head (List.filter (\x -> Just x.url == playlistName) model.playlists)
video = video =
case playlist of case playlist of
@ -224,12 +238,12 @@ update msg model =
_ -> _ ->
Ports.eraseVideo () Ports.eraseVideo ()
in in
( { m | page = page }, Cmd.batch [ cmd, extraCmd ] ) ( { model | page = page }, Cmd.batch [ cmd, extraCmd ] )
( UrlRequested u, m ) -> UrlRequested u ->
case u of case u of
Browser.Internal url -> Browser.Internal url ->
( model, Nav.pushUrl m.key (Url.toString url) ) ( model, Nav.pushUrl model.key (Url.toString url) )
Browser.External s -> Browser.External s ->
( model, Nav.load s ) ( model, Nav.load s )

1
src/Twitch.elm
View File

@ -3,6 +3,7 @@ module Twitch exposing
, Video , Video
, decodePlaylists , decodePlaylists
, fetchPlaylists , fetchPlaylists
, playlistDate
, playlistMiniatureUrl , playlistMiniatureUrl
, videoId , videoId
, videoMiniatureUrl , videoMiniatureUrl

87
src/Views.elm
View File

@ -64,13 +64,13 @@ viewContent : Core.Model -> Element Core.Msg
viewContent model = viewContent model =
case model.page of case model.page of
Core.Home hover -> Core.Home hover ->
playlistsView model.device model.playlists model.time hover playlistsView model.device model.playlists model.currentDate model.time hover
Core.Playlist playlist hover -> Core.Playlist playlist hover ->
videoMiniaturesView model.device model.zone model.time hover playlist videoMiniaturesView model.device model.zone model.currentDate model.time hover playlist
Core.Video playlist video hover -> Core.Video playlist video hover ->
videoView model.device model.zone model.time hover playlist video videoView model.device model.zone model.currentDate model.time hover playlist video
topBar : Element Core.Msg topBar : Element Core.Msg
@ -95,14 +95,14 @@ homeButton =
} }
playlistsView : Element.Device -> List Twitch.Playlist -> Time.Posix -> Maybe (Hover Twitch.Playlist) -> Element Core.Msg playlistsView : Element.Device -> List Twitch.Playlist -> Time.Posix -> Time.Posix -> Maybe (Hover Twitch.Playlist) -> Element Core.Msg
playlistsView device playlists time hover = playlistsView device playlists currentDate time hover =
let let
empty = empty =
Element.el [ Element.width Element.fill ] Element.none Element.el [ Element.width Element.fill ] Element.none
views = views =
List.map (playlistView time hover) playlists List.map (playlistView currentDate time hover) playlists
grouped = grouped =
group (numberOfVideosPerRow device) views group (numberOfVideosPerRow device) views
@ -118,8 +118,8 @@ playlistsView device playlists time hover =
final final
playlistView : Time.Posix -> Maybe (Hover Twitch.Playlist) -> Twitch.Playlist -> Element Core.Msg playlistView : Time.Posix -> Time.Posix -> Maybe (Hover Twitch.Playlist) -> Twitch.Playlist -> Element Core.Msg
playlistView time hover playlist = playlistView currentDate time hover playlist =
let let
key = key =
Twitch.playlistMiniatureUrl time Nothing playlist Twitch.playlistMiniatureUrl time Nothing playlist
@ -139,6 +139,7 @@ playlistView time hover playlist =
[ Element.width Element.fill [ Element.width Element.fill
, Element.height Element.fill , Element.height Element.fill
, Element.inFront inFront , Element.inFront inFront
, Element.inFront new
] ]
{ description = "", src = src } { description = "", src = src }
) )
@ -170,6 +171,13 @@ playlistView time hover playlist =
, Element.padding 5 , Element.padding 5
] ]
new =
if Time.posixToMillis currentDate - Twitch.playlistDate playlist > week then
Element.none
else
newBadge
display = display =
Element.column [ Element.width Element.fill, Element.spacing 10 ] Element.column [ Element.width Element.fill, Element.spacing 10 ]
[ image [ image
@ -191,14 +199,14 @@ playlistView time hover playlist =
button button
videoMiniaturesView : Element.Device -> Time.Zone -> Time.Posix -> Maybe (Hover Twitch.Video) -> Twitch.Playlist -> Element Core.Msg videoMiniaturesView : Element.Device -> Time.Zone -> Time.Posix -> Time.Posix -> Maybe (Hover Twitch.Video) -> Twitch.Playlist -> Element Core.Msg
videoMiniaturesView device zone time hover playlist = videoMiniaturesView device zone currentDate time hover playlist =
let let
empty = empty =
Element.el [ Element.width Element.fill ] Element.none Element.el [ Element.width Element.fill ] Element.none
views = views =
List.map (videoMiniatureView zone time hover playlist) playlist.videos List.map (videoMiniatureView zone currentDate time hover playlist) playlist.videos
grouped = grouped =
group (numberOfVideosPerRow device) views group (numberOfVideosPerRow device) views
@ -214,8 +222,8 @@ videoMiniaturesView device zone time hover playlist =
final final
videoMiniature : Time.Posix -> Maybe (Hover Twitch.Video) -> Twitch.Playlist -> Twitch.Video -> Element Core.Msg videoMiniature : Time.Posix -> Time.Posix -> Maybe (Hover Twitch.Video) -> Twitch.Playlist -> Twitch.Video -> Element Core.Msg
videoMiniature time hover playlist video = videoMiniature currentDate time hover playlist video =
let let
inFront = inFront =
Element.text label Element.text label
@ -231,6 +239,18 @@ videoMiniature time hover playlist video =
, Element.padding 5 , Element.padding 5
] ]
date =
video.date
|> Maybe.map Time.posixToMillis
|> Maybe.withDefault 0
new =
if Time.posixToMillis currentDate - date > week then
Element.none
else
newBadge
key = key =
Twitch.videoMiniatureUrl time Nothing playlist video Twitch.videoMiniatureUrl time Nothing playlist video
@ -249,6 +269,7 @@ videoMiniature time hover playlist video =
[ Element.width Element.fill [ Element.width Element.fill
, Element.height Element.fill , Element.height Element.fill
, Element.inFront inFront , Element.inFront inFront
, Element.inFront new
] ]
{ description = "", src = src } { description = "", src = src }
) )
@ -259,12 +280,12 @@ videoMiniature time hover playlist video =
image image
videoMiniatureView : Time.Zone -> Time.Posix -> Maybe (Hover Twitch.Video) -> Twitch.Playlist -> Twitch.Video -> Element Core.Msg videoMiniatureView : Time.Zone -> Time.Posix -> Time.Posix -> Maybe (Hover Twitch.Video) -> Twitch.Playlist -> Twitch.Video -> Element Core.Msg
videoMiniatureView zone time hover playlist video = videoMiniatureView zone currentDate time hover playlist video =
let let
display = display =
Element.column [ Element.width Element.fill, Element.spacing 10 ] Element.column [ Element.width Element.fill, Element.spacing 10 ]
[ videoMiniature time hover playlist video [ videoMiniature currentDate time hover playlist video
, videoDescription zone video , videoDescription zone video
] ]
@ -277,13 +298,13 @@ videoMiniatureView zone time hover playlist video =
button button
videoInList : Time.Zone -> Time.Posix -> Maybe (Hover Twitch.Video) -> Twitch.Playlist -> Twitch.Video -> Twitch.Video -> Element Core.Msg videoInList : Time.Zone -> Time.Posix -> Time.Posix -> Maybe (Hover Twitch.Video) -> Twitch.Playlist -> Twitch.Video -> Twitch.Video -> Element Core.Msg
videoInList zone time hover playlist activeVideo video = videoInList zone currentDate time hover playlist activeVideo video =
let let
label = label =
Element.row [ Element.width Element.fill, Element.spacing 10 ] Element.row [ Element.width Element.fill, Element.spacing 10 ]
[ Element.el [ Element.width (Element.fillPortion 2) ] [ Element.el [ Element.width (Element.fillPortion 2) ]
(videoMiniature time hover playlist video) (videoMiniature currentDate time hover playlist video)
, Element.el [ Element.width (Element.fillPortion 3), Element.paddingXY 0 10, Element.alignTop ] , Element.el [ Element.width (Element.fillPortion 3), Element.paddingXY 0 10, Element.alignTop ]
(videoDescription zone video) (videoDescription zone video)
] ]
@ -304,8 +325,8 @@ videoInList zone time hover playlist activeVideo video =
} }
videoView : Element.Device -> Time.Zone -> Time.Posix -> Maybe (Hover Twitch.Video) -> Twitch.Playlist -> Twitch.Video -> Element Core.Msg videoView : Element.Device -> Time.Zone -> Time.Posix -> Time.Posix -> Maybe (Hover Twitch.Video) -> Twitch.Playlist -> Twitch.Video -> Element Core.Msg
videoView device zone time hover playlist video = videoView device zone currentDate time hover playlist video =
let let
( builder, contentPadding ) = ( builder, contentPadding ) =
case device.class of case device.class of
@ -372,7 +393,7 @@ videoView device zone time hover playlist video =
, Element.height Element.fill , Element.height Element.fill
, Element.scrollbarY , Element.scrollbarY
] ]
(List.map (videoInList zone time hover playlist video) playlist.videos) (List.map (videoInList zone currentDate time hover playlist video) playlist.videos)
] ]
@ -538,3 +559,25 @@ spinner =
, Html.div [] [] , Html.div [] []
] ]
) )
newBadge : Element Core.Msg
newBadge =
Element.text "NOUV."
|> Element.el
[ Background.color Colors.red
, Border.rounded 5
, Element.padding 5
, Font.color Colors.white
, Font.bold
]
|> Element.el
[ Element.alignBottom
, Element.alignLeft
, Element.padding 5
]
week : Int
week =
1000 * 60 * 60 * 24 * 7