[Web] Launch player without using URL details

This simplifies the browser navigation from the dev side and makes the experience more predictable
DrewCarlson · Nov 20, 2023 · 25439b6 · 25439b6
1 parent ae26e07
commit 25439b6
Show file tree

Hide file tree

Showing 6 changed files with 17 additions and 38 deletions.
diff --git a/anystream-client-web/src/jsMain/kotlin/WebApp.kt b/anystream-client-web/src/jsMain/kotlin/WebApp.kt
@@ -28,16 +28,14 @@ import anystream.screens.settings.SettingsSideMenu
 import anystream.util.get
 import app.softwork.routingcompose.BrowserRouter
 import app.softwork.routingcompose.Router
-import kotlinx.browser.window
 import kotlinx.coroutines.flow.*
 import org.jetbrains.compose.web.css.*
 import org.jetbrains.compose.web.dom.*
 import org.jetbrains.compose.web.renderComposable
 import org.koin.core.context.startKoin
 import org.w3c.dom.HTMLDivElement
-import org.w3c.dom.HashChangeEvent
 
-private val urlHashFlow = MutableStateFlow(window.location.hash)
+val playerMediaGid = MutableStateFlow<String?>(null)
 
 fun webApp() = renderComposable(rootElementId = "root") {
     startKoin {
@@ -49,17 +47,6 @@ fun webApp() = renderComposable(rootElementId = "root") {
             classes("d-flex", "flex-column", "h-100", "w-100")
         },
     ) {
-        DisposableEffect(Unit) {
-            val listener = { event: HashChangeEvent ->
-                urlHashFlow.value = event.newURL.substringAfter("!")
-                true
-            }
-            window.onhashchange = listener
-            onDispose {
-                window.onhashchange = null
-            }
-        }
-
         val backgroundUrl by backdropImageUrl.collectAsState(null)
 
         Div({
@@ -84,16 +71,6 @@ fun webApp() = renderComposable(rootElementId = "root") {
 
 @Composable
 private fun ContentContainer(client: AnyStreamClient = get()) {
-    val hashValue by urlHashFlow
-        .map { hash ->
-            if (hash.contains("close")) {
-                null
-            } else {
-                hash.substringAfter(":")
-                    .takeIf(String::isNotBlank)
-            }
-        }
-        .collectAsState(null)
     BrowserRouter("/") {
         route("home") {
             noMatch { ScreenContainer { HomeScreen() } }
@@ -126,7 +103,8 @@ private fun ContentContainer(client: AnyStreamClient = get()) {
         }
         noMatch { redirect(if (client.isAuthenticated()) "/home" else "/login") }
 
-        hashValue?.run { PlayerScreen(this) }
+        val metadataGid by playerMediaGid.collectAsState()
+        metadataGid?.let { PlayerScreen(it) }
     }
 }
 

diff --git a/anystream-client-web/src/jsMain/kotlin/screens/HomeScreen.kt b/anystream-client-web/src/jsMain/kotlin/screens/HomeScreen.kt
@@ -27,10 +27,10 @@ import anystream.models.api.CurrentlyWatching
 import anystream.models.api.HomeResponse
 import anystream.models.api.Popular
 import anystream.models.api.RecentlyAdded
+import anystream.playerMediaGid
 import anystream.util.get
 import app.softwork.routingcompose.Router
 import kotlinx.browser.localStorage
-import kotlinx.browser.window
 import kotlinx.coroutines.delay
 import org.jetbrains.compose.web.attributes.InputType
 import org.jetbrains.compose.web.attributes.max
@@ -153,7 +153,7 @@ private fun CurrentlyWatching.ContinueWatchingRow(sizeMultiplier: Float) {
             posterPath = movie?.posterPath ?: show?.posterPath,
             isAdded = true,
             onPlayClicked = {
-                window.location.hash = "!play:${state.mediaLinkGid}"
+                playerMediaGid.value = state.mediaLinkGid
             },
             onBodyClicked = {
                 router.navigate("/media/${movie?.gid ?: episode?.gid}")
@@ -182,7 +182,7 @@ private fun RecentlyAdded.RecentlyAddedMovies(sizeMultiplier: Float) {
             posterPath = movie.posterPath,
             isAdded = true,
             onPlayClicked = {
-                window.location.hash = "!play:${mediaLink?.gid}"
+                playerMediaGid.value = mediaLink?.gid
             }.takeIf { mediaLink != null },
             onBodyClicked = {
                 router.navigate("/media/${movie.gid}")
@@ -231,7 +231,7 @@ private fun Popular.PopularMovies(sizeMultiplier: Float) {
             },
             posterPath = movie.posterPath,
             isAdded = link != null,
-            onPlayClicked = { window.location.hash = "!play:${link?.gid}" }
+            onPlayClicked = { playerMediaGid.value = link?.gid }
                 .takeIf { link != null },
             onBodyClicked = {
                 router.navigate("/media/${movie.gid}")

diff --git a/anystream-client-web/src/jsMain/kotlin/screens/MediaScreen.kt b/anystream-client-web/src/jsMain/kotlin/screens/MediaScreen.kt
@@ -26,11 +26,11 @@ import anystream.models.*
 import anystream.models.MediaItem
 import anystream.models.api.*
 import anystream.models.toMediaItem
+import anystream.playerMediaGid
 import anystream.util.ExternalClickMask
 import anystream.util.get
 import anystream.util.tooltip
 import app.softwork.routingcompose.Router
-import kotlinx.browser.window
 import kotlinx.coroutines.delay
 import kotlinx.coroutines.flow.*
 import kotlinx.coroutines.sync.Mutex
@@ -166,7 +166,7 @@ private fun BaseDetailsView(
                 },
                 completedPercent = mediaItem.playbackState?.completedPercent,
                 onPlayClicked = {
-                    window.location.hash = "!play:${mediaItem.playableMediaLink?.gid}"
+                    playerMediaGid.value = mediaItem.playableMediaLink?.gid
                 }.takeUnless { mediaItem.playableMediaLink == null },
             )
 
@@ -243,7 +243,7 @@ private fun BaseDetailsView(
                     Button({
                         classes("btn", "btn-sm", "btn-primary")
                         onClick {
-                            window.location.hash = "!play:${mediaLink.gid}"
+                            playerMediaGid.value = mediaLink.gid
                         }
                     }) {
                         I({
@@ -536,7 +536,7 @@ private fun EpisodeGrid(
                 onPlayClicked = if (link == null) {
                     null
                 } else {
-                    { window.location.hash = "!play:${link.gid}" }
+                    { playerMediaGid.value = link.gid }
                 },
                 onBodyClicked = {
                     router.navigate("/media/${episode.gid}")

diff --git a/anystream-client-web/src/jsMain/kotlin/screens/MoviesScreen.kt b/anystream-client-web/src/jsMain/kotlin/screens/MoviesScreen.kt
@@ -23,9 +23,9 @@ import anystream.components.*
 import anystream.models.MediaLink
 import anystream.models.Movie
 import anystream.models.api.MoviesResponse
+import anystream.playerMediaGid
 import anystream.util.get
 import app.softwork.routingcompose.Router
-import kotlinx.browser.window
 import org.jetbrains.compose.web.dom.Div
 import org.jetbrains.compose.web.dom.Text
 
@@ -69,7 +69,7 @@ private fun MovieCard(
         posterPath = movie.posterPath,
         isAdded = true,
         onPlayClicked = {
-            window.location.hash = "!play:${link?.gid}"
+            playerMediaGid.value = link?.gid
         }.takeIf { link != null },
         onBodyClicked = {
             router.navigate("/media/${movie.gid}")

diff --git a/anystream-client-web/src/jsMain/kotlin/screens/PlayerScreen.kt b/anystream-client-web/src/jsMain/kotlin/screens/PlayerScreen.kt
@@ -25,6 +25,7 @@ import anystream.models.PlaybackState
 import anystream.models.api.EpisodeResponse
 import anystream.models.api.MovieResponse
 import anystream.models.toMediaItem
+import anystream.playerMediaGid
 import anystream.util.formatProgressAndRuntime
 import anystream.util.formatted
 import anystream.util.get
@@ -561,7 +562,7 @@ private fun PlaybackControls(
                     cursor("pointer")
                 }
                 onClick {
-                    window.location.hash = "!close"
+                    playerMediaGid.value = null
                 }
             }) {
                 I({

diff --git a/anystream-client-web/src/jsMain/kotlin/screens/TvShowScreen.kt b/anystream-client-web/src/jsMain/kotlin/screens/TvShowScreen.kt
@@ -25,9 +25,9 @@ import anystream.components.*
 import anystream.models.MediaLink
 import anystream.models.TvShow
 import anystream.models.api.TvShowsResponse
+import anystream.playerMediaGid
 import anystream.util.get
 import app.softwork.routingcompose.Router
-import kotlinx.browser.window
 import org.jetbrains.compose.web.dom.Div
 import org.jetbrains.compose.web.dom.Text
 
@@ -72,7 +72,7 @@ fun TvShowCard(
         posterPath = show.posterPath,
         isAdded = true,
         onPlayClicked = {
-            window.location.hash = "!play:${link?.gid}"
+            playerMediaGid.value = link?.gid
         }.takeIf { link != null },
         onBodyClicked = {
             router.navigate("/media/${show.gid}")