Navigation works

src/Core.elm

@@ -1,6 +1,6 @@
 module Core exposing (FullModel(..), Model, Msg(..), Page(..), init, update)
 
-import Browser.Navigation
+import Browser.Navigation as Nav
 import Json.Decode as Decode
 import Task
 import Time
@@ -9,7 +9,7 @@ import Url
 
 
 type FullModel
-    = Unloaded
+    = Unloaded Url.Url Nav.Key
     | Loaded Model
 
 
@@ -17,6 +17,7 @@ type alias Model =
     { playlists : List Twitch.Playlist
     , zone : Time.Zone
     , page : Page
+    , key : Nav.Key
     }
 
 
@@ -32,11 +33,12 @@ type Msg
     | HomeClicked
     | PlaylistClicked Twitch.Playlist
     | VideoClicked Twitch.Playlist Twitch.Video
+    | UrlReceived Url.Url
 
 
-init : Decode.Value -> Url.Url -> Browser.Navigation.Key -> ( FullModel, Cmd Msg )
+init : Decode.Value -> Url.Url -> Nav.Key -> ( FullModel, Cmd Msg )
-init _ _ _ =
+init _ url key =
-    ( Unloaded
+    ( Unloaded url key
     , Task.perform PlaylistsReceived Twitch.fetchPlaylists
     )
 
@@ -47,17 +49,65 @@ update msg model =
         ( Noop, _ ) ->
             ( model, Cmd.none )
 
-        ( PlaylistsReceived ( playlists, zone ), _ ) ->
+        ( PlaylistsReceived ( playlists, zone ), Unloaded url key ) ->
-            ( Loaded { playlists = playlists, zone = zone, page = Home }, Cmd.none )
+            update
+                (UrlReceived url)
+                (Loaded { key = key, playlists = playlists, zone = zone, page = Home })
 
         ( HomeClicked, Loaded m ) ->
-            ( Loaded { m | page = Home }, Cmd.none )
+            ( Loaded { m | page = Home }
+            , Nav.pushUrl m.key "#"
+            )
 
         ( PlaylistClicked playlist, Loaded m ) ->
-            ( Loaded { m | page = Playlist playlist }, Cmd.none )
+            ( Loaded { m | page = Playlist playlist }
+            , Nav.pushUrl m.key ("#" ++ playlist.url)
+            )
 
         ( VideoClicked playlist video, Loaded m ) ->
-            ( Loaded { m | page = Video playlist video }, Cmd.none )
+            ( Loaded { m | page = Video playlist video }
+            , Nav.pushUrl m.key ("#" ++ playlist.url ++ Twitch.videoName video)
+            )
+
+        ( UrlReceived url, Loaded m ) ->
+            let
+                split =
+                    String.split "/" (Maybe.withDefault "" url.fragment)
+
+                ( playlistName, videoName ) =
+                    case split of
+                        p :: v :: _ ->
+                            ( Just (p ++ "/"), Just (v ++ "/") )
+
+                        p :: _ ->
+                            ( Just (p ++ "/"), Nothing )
+
+                        _ ->
+                            ( Nothing, Nothing )
+
+                playlist =
+                    List.head (List.filter (\x -> Just x.url == playlistName) m.playlists)
+
+                video =
+                    case playlist of
+                        Just p ->
+                            List.head (List.filter (\x -> Just (Twitch.videoName x) == videoName) p.videos)
+
+                        _ ->
+                            Nothing
+
+                page =
+                    case ( playlist, video ) of
+                        ( Just p, Just v ) ->
+                            Video p v
+
+                        ( Just p, Nothing ) ->
+                            Playlist p
+
+                        _ ->
+                            Home
+            in
+            ( Loaded { m | page = page }, Cmd.none )
 
         _ ->
             ( model, Cmd.none )

src/Main.elm

@@ -3,7 +3,6 @@ module Main exposing (main)
 import Browser
 import Core
 import Json.Decode as Decode
-import Url
 import Views
 
 
@@ -14,16 +13,6 @@ main =
         , update = Core.update
         , view = Views.view
         , subscriptions = \_ -> Sub.none
-        , onUrlChange = onUrlChange
+        , onUrlChange = Core.UrlReceived
-        , onUrlRequest = onUrlRequest
+        , onUrlRequest = \_ -> Core.Noop
         }
-
-
-onUrlChange : Url.Url -> Core.Msg
-onUrlChange _ =
-    Core.Noop
-
-
-onUrlRequest : Browser.UrlRequest -> Core.Msg
-onUrlRequest _ =
-    Core.Noop

src/Twitch.elm

@@ -4,6 +4,7 @@ module Twitch exposing
     , fetchPlaylists
     , playlistMiniatureUrl
     , videoMiniatureUrl
+    , videoName
     )
 
 import Html.Parser
@@ -29,6 +30,11 @@ type alias Video =
     }
 
 
+videoName : Video -> String
+videoName video =
+    String.join "/" (List.drop 3 (String.split "/" video.url))
+
+
 get : { url : String, resolver : Http.Resolver x a } -> Task x a
 get { url, resolver } =
     Http.task

src/Views.elm

@@ -29,7 +29,7 @@ viewContent model =
     let
         content =
             case model of
-                Core.Unloaded ->
+                Core.Unloaded _ _ ->
                     Element.none
 
                 Core.Loaded submodel ->