Major updates

elm-video

@@ -1 +1 @@
-Subproject commit 087c3d594b62b6617954fc31a58576f12752d75a
+Subproject commit 4193ac975dbde45010664be1f8595451fc86c418

index.html

@@ -31,7 +31,8 @@
                     width: window.innerWidth,
                     height: window.innerHeight,
                     darkMode: isDarkMode(),
-                    darkSetting: JSON.parse(localStorage.getItem('darkMode'))
+                    darkSetting: JSON.parse(localStorage.getItem('darkMode')),
+                    mobile: PolymnyVideo.isDeviceMobile(),
                 }
             });
 

src/Consts.elm

@@ -1,24 +1,12 @@
 module Consts exposing
     ( homeFontSize
     , homePadding
-    , name
     , normalFontSize
     , titleFontSize
-    , url
     , videoId
     )
 
 
-url : String
-url =
-    "twitch.tforgione.fr"
-
-
-name : String
-name =
-    url
-
-
 normalFontSize : Int
 normalFontSize =
     13

src/Core.elm

@@ -18,7 +18,8 @@ import Video.Events
 
 
 type alias Model =
-    { playlists : List Twitch.Playlist
+    { title : String
+    , playlists : List Twitch.Playlist
     , zone : Time.Zone
     , page : Page
     , key : Nav.Key
@@ -28,6 +29,8 @@ type alias Model =
     , url : Url.Url
     , darkMode : Bool
     , darkSetting : Maybe Bool
+    , reverseVideos : Bool
+    , mobile : Bool
     }
 
 
@@ -58,9 +61,21 @@ type Msg
     | VideoMsg Video.Msg
 
 
-init : { width : Int, height : Int, darkMode : Bool, darkSetting : Maybe Bool } -> Url.Url -> Nav.Key -> ( Model, Cmd Msg )
+init :
-init { width, height, darkMode, darkSetting } url key =
+    { title : Maybe String
+    , width : Int
+    , height : Int
+    , darkMode : Bool
+    , darkSetting : Maybe Bool
+    , reverseVideos : Maybe Bool
+    , mobile : Maybe Bool
+    }
+    -> Url.Url
+    -> Nav.Key
+    -> ( Model, Cmd Msg )
+init { title, width, height, darkMode, darkSetting, reverseVideos, mobile } url key =
     ( Model
+        (Maybe.withDefault "elm-video-example" title)
         []
         Time.utc
         (Home Nothing)
@@ -71,6 +86,8 @@ init { width, height, darkMode, darkSetting } url key =
         url
         darkMode
         darkSetting
+        (Maybe.withDefault False reverseVideos)
+        (Maybe.withDefault False mobile)
     , Cmd.batch
         [ Task.attempt TimeZoneReceivedResult TimeZone.getZone
         , Task.perform CurrentDateReceived Time.now
@@ -163,9 +180,18 @@ update msg model =
             )
 
         PlaylistsReceived playlists ->
+            let
+                sortedPlaylists =
+                    if model.reverseVideos then
+                        List.reverse playlists
+                            |> List.map (\x -> { x | videos = List.reverse x.videos })
+
+                    else
+                        playlists
+            in
             update
                 (UrlReceived model.url)
-                { model | playlists = playlists, page = Home Nothing }
+                { model | playlists = sortedPlaylists, page = Home Nothing }
 
         HomeClicked ->
             ( model
@@ -246,7 +272,7 @@ update msg model =
                         case ( playlist, video ) of
                             ( Just p, Just v ) ->
                                 let
-                                    ( el, videoCommand ) =
+                                    ( rawVideo, videoCommand ) =
                                         Video.fromConfig
                                             { url = "/videos/" ++ p.url ++ v.url ++ "/manifest.m3u8"
                                             , id = "video"
@@ -258,6 +284,9 @@ update msg model =
                                             , miniaturesUrl = Nothing
                                             , muted = False
                                             }
+
+                                    el =
+                                        { rawVideo | mobile = model.mobile }
                                 in
                                 ( Video p v el Nothing, Cmd.map VideoMsg videoCommand )
 

src/Main.elm

@@ -5,7 +5,18 @@ import Core
 import Views
 
 
-main : Program { width : Int, height : Int, darkMode : Bool, darkSetting : Maybe Bool } Core.Model Core.Msg
+main :
+    Program
+        { title : Maybe String
+        , width : Int
+        , height : Int
+        , darkMode : Bool
+        , darkSetting : Maybe Bool
+        , reverseVideos : Maybe Bool
+        , mobile : Maybe Bool
+        }
+        Core.Model
+        Core.Msg
 main =
     Browser.application
         { init = Core.init

src/Twitch.elm

@@ -46,12 +46,12 @@ decodePlaylist =
     Decode.map3 Playlist
         (Decode.field "url" Decode.string)
         (Decode.field "title" Decode.string)
-        (Decode.field "videos" (Decode.map (List.sortBy .url >> List.reverse) (Decode.list decodeVideo)))
+        (Decode.field "videos" (Decode.map (List.sortBy .url) (Decode.list decodeVideo)))
 
 
 decodePlaylists : Decode.Decoder (List Playlist)
 decodePlaylists =
-    Decode.map (sortPlaylists >> List.reverse) (Decode.list decodePlaylist)
+    Decode.map sortPlaylists (Decode.list decodePlaylist)
 
 
 mostRecentVideo : List Video -> Maybe Time.Posix

src/Views.elm

@@ -42,7 +42,7 @@ view model =
             ]
             (Element.column
                 [ Element.width Element.fill, Element.height Element.fill ]
-                [ topBar model.darkSetting, element ]
+                [ topBar model.title model.darkSetting, element ]
             )
         ]
     }
@@ -52,13 +52,13 @@ title : Core.Model -> String
 title model =
     case model.page of
         Core.Home _ ->
-            Consts.url
+            model.title
 
         Core.Playlist p _ ->
-            Consts.url ++ " - " ++ p.name
+            model.title ++ " - " ++ p.name
 
         Core.Video p v _ _ ->
-            Consts.url ++ " - " ++ p.name ++ " - " ++ v.name
+            model.title ++ " - " ++ p.name ++ " - " ++ v.name
 
 
 viewContent : Core.Model -> Element Core.Msg
@@ -74,15 +74,15 @@ viewContent model =
             videoView model.darkMode model.device model.zone model.currentDate model.time hover playlist video v
 
 
-topBar : Maybe Bool -> Element Core.Msg
+topBar : String -> Maybe Bool -> Element Core.Msg
-topBar darkSetting =
+topBar pageTitle darkSetting =
     Element.row
         [ Element.width Element.fill
         , Background.color Colors.primary
         , Font.color Colors.white
         , Font.size Consts.homeFontSize
         ]
-        [ homeButton, mode darkSetting ]
+        [ homeButton pageTitle, mode darkSetting ]
 
 
 mode : Maybe Bool -> Element Core.Msg
@@ -110,13 +110,13 @@ mode current =
         }
 
 
-homeButton : Element Core.Msg
+homeButton : String -> Element Core.Msg
-homeButton =
+homeButton pageTitle =
     Ui.link
         [ Element.height Element.fill
         , Font.bold
         ]
-        { label = Element.el [ Element.padding 10 ] (Element.text Consts.name)
+        { label = Element.el [ Element.padding 10 ] (Element.text pageTitle)
         , url = "/"
         }
 
@@ -486,11 +486,17 @@ formatTime time =
             else
                 String.fromInt seconds
     in
-    hoursString
+    if hours >= 1 then
-        ++ ":"
+        hoursString
-        ++ minutesString
+            ++ ":"
-        ++ ":"
+            ++ minutesString
-        ++ secondsString
+            ++ ":"
+            ++ secondsString
+
+    else
+        minutesString
+            ++ ":"
+            ++ secondsString
 
 
 toHours : Int -> Int