Tidy up show details

chrisbanes · Jun 23, 2020 · a715cf7 · a715cf7
1 parent df4f44e
commit a715cf7
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 62 deletions.
diff --git a/common-ui-compose/src/main/java/app/tivi/common/compose/layout.kt b/common-ui-compose/src/main/java/app/tivi/common/compose/layout.kt
@@ -23,6 +23,7 @@ import androidx.ui.core.LayoutCoordinates
 import androidx.ui.core.Modifier
 import androidx.ui.core.OnPositionedModifier
 import androidx.ui.core.composed
+import androidx.ui.core.positionInRoot
 import androidx.ui.geometry.Offset
 import androidx.ui.unit.IntSize
 import androidx.ui.unit.PxBounds
@@ -35,15 +36,45 @@ inline val LayoutCoordinates.boundsInParent: PxBounds
     get() = PxBounds(positionInParent, size.toSize())
 
 fun Modifier.onSizeChanged(
-    onSizeChanged: (IntSize) -> Unit
+    onChange: (IntSize) -> Unit
 ) = composed {
     var lastSize by state<IntSize?> { null }
 
     object : OnPositionedModifier {
         override fun onPositioned(coordinates: LayoutCoordinates) {
             if (coordinates.size != lastSize) {
                 lastSize = coordinates.size
-                onSizeChanged(coordinates.size)
+                onChange(coordinates.size)
+            }
+        }
+    }
+}
+
+fun Modifier.onPositionInParentChanged(
+    onChange: (LayoutCoordinates) -> Unit
+) = composed {
+    var lastPosition by state<Offset?> { null }
+
+    object : OnPositionedModifier {
+        override fun onPositioned(coordinates: LayoutCoordinates) {
+            if (coordinates.positionInParent != lastPosition) {
+                lastPosition = coordinates.positionInParent
+                onChange(coordinates)
+            }
+        }
+    }
+}
+
+fun Modifier.onPositionInRootChanged(
+    onChange: (LayoutCoordinates) -> Unit
+) = composed {
+    var lastPosition by state<Offset?> { null }
+
+    object : OnPositionedModifier {
+        override fun onPositioned(coordinates: LayoutCoordinates) {
+            if (coordinates.positionInRoot != lastPosition) {
+                lastPosition = coordinates.positionInRoot
+                onChange(coordinates)
             }
         }
     }

diff --git a/ui-episodedetails/src/main/java/app/tivi/episodedetails/EpisodeDetails.kt b/ui-episodedetails/src/main/java/app/tivi/episodedetails/EpisodeDetails.kt
@@ -38,7 +38,6 @@ import androidx.ui.core.ContentScale
 import androidx.ui.core.DensityAmbient
 import androidx.ui.core.Modifier
 import androidx.ui.core.drawWithContent
-import androidx.ui.core.onPositioned
 import androidx.ui.core.setContent
 import androidx.ui.foundation.Box
 import androidx.ui.foundation.ContentColorAmbient
@@ -99,6 +98,7 @@ import app.tivi.common.compose.SwipeToDismiss
 import app.tivi.common.compose.TiviAlertDialog
 import app.tivi.common.compose.TiviDateFormatterAmbient
 import app.tivi.common.compose.boundsInParent
+import app.tivi.common.compose.onPositionInParentChanged
 import app.tivi.data.entities.Episode
 import app.tivi.data.entities.EpisodeWatchEntry
 import app.tivi.data.entities.PendingAction
@@ -464,17 +464,19 @@ private fun EpisodeWatchSwipeBackground(
         ) {
             // A simple box to draw the growing circle, which emanates from behind the icon
             Box(
-                modifier = Modifier.fillMaxSize().drawGrowingCircle(
-                    transitionState[color],
-                    iconCenter,
-                    lerp(0f, maxRadius.toFloat(), fastOutLinearIn(swipeProgress))
-                )
+                modifier = Modifier.fillMaxSize()
+                    .drawGrowingCircle(
+                        transitionState[color],
+                        iconCenter,
+                        lerp(0f, maxRadius.toFloat(), fastOutLinearIn(swipeProgress))
+                    )
             )
 
             ProvideEmphasis(emphasis = EmphasisAmbient.current.medium) {
                 Icon(
                     asset = Icons.Default.Delete,
-                    modifier = Modifier.onPositioned { iconCenter = it.boundsInParent.center() }
+                    modifier = Modifier
+                        .onPositionInParentChanged { iconCenter = it.boundsInParent.center() }
                         .padding(0.dp, 0.dp, end = 16.dp, bottom = 0.dp)
                         .gravity(Alignment.CenterEnd)
                 )

diff --git a/ui-showdetails/src/main/java/app/tivi/showdetails/details/ShowDetails.kt b/ui-showdetails/src/main/java/app/tivi/showdetails/details/ShowDetails.kt
@@ -17,7 +17,6 @@
 package app.tivi.showdetails.details
 
 import android.view.ViewGroup
-import androidx.animation.transitionDefinition
 import androidx.compose.Composable
 import androidx.compose.MutableState
 import androidx.compose.Providers
@@ -31,16 +30,12 @@ import androidx.compose.staticAmbientOf
 import androidx.core.view.WindowInsetsCompat
 import androidx.lifecycle.LiveData
 import androidx.ui.animation.Crossfade
-import androidx.ui.animation.DpPropKey
-import androidx.ui.animation.Transition
 import androidx.ui.core.Alignment
 import androidx.ui.core.ContentScale
 import androidx.ui.core.ContextAmbient
 import androidx.ui.core.DensityAmbient
 import androidx.ui.core.Modifier
 import androidx.ui.core.clip
-import androidx.ui.core.drawOpacity
-import androidx.ui.core.onPositioned
 import androidx.ui.core.positionInRoot
 import androidx.ui.core.setContent
 import androidx.ui.foundation.Box
@@ -109,6 +104,7 @@ import app.tivi.common.compose.PopupMenuItem
 import app.tivi.common.compose.ProvideInsets
 import app.tivi.common.compose.TiviDateFormatterAmbient
 import app.tivi.common.compose.VectorImage
+import app.tivi.common.compose.onPositionInRootChanged
 import app.tivi.common.compose.onSizeChanged
 import app.tivi.common.imageloading.TrimTransparentEdgesTransformation
 import app.tivi.data.entities.Episode
@@ -302,49 +298,39 @@ fun ShowDetails(
         }
     }
 
-    Column(
-        modifier = Modifier.fillMaxWidth().gravity(Alignment.TopStart)
-    ) {
-        val insets = InsetsAmbient.current
-
-        val trigger = (backdropHeight - insets.top).coerceAtLeast(0)
-
-        if (insets.top > 0) {
-            val alpha = lerp(
-                startValue = 0.5f,
-                endValue = 1f,
-                fraction = if (trigger > 0) {
-                    (scrollerPosition.value / trigger).coerceIn(0f, 1f)
-                } else 0f
-            )
-            val topInset = with(DensityAmbient.current) { insets.top.toDp() }
-            Box(
-                Modifier.preferredHeight(topInset)
-                    .fillMaxWidth()
-                    .drawBackground(color = MaterialTheme.colors.background.copy(alpha = alpha))
-            )
-        }
+    val insets = InsetsAmbient.current
+    val trigger = (backdropHeight - insets.top).coerceAtLeast(0)
 
-        val showOverlayAppBar = scrollerPosition.value > trigger
+    val alpha = lerp(
+        startValue = 0.5f,
+        endValue = 1f,
+        fraction = if (trigger > 0) (scrollerPosition.value / trigger).coerceIn(0f, 1f) else 0f
+    )
 
-        Transition(
-            definition = appBarFadeTransitionDef,
-            toState = showOverlayAppBar
-        ) { transitionState ->
-            if (showOverlayAppBar) {
+    Surface(
+        color = MaterialTheme.colors.surface.copy(alpha = alpha),
+        modifier = Modifier.fillMaxWidth().gravity(Alignment.TopStart),
+        elevation = if (scrollerPosition.value >= trigger) 2.dp else 0.dp
+    ) {
+        Column(
+            modifier = Modifier.fillMaxWidth()
+        ) {
+            if (insets.top > 0) {
+                val topInset = with(DensityAmbient.current) { insets.top.toDp() }
+                Spacer(Modifier.preferredHeight(topInset).fillMaxWidth())
+            }
+            if (scrollerPosition.value >= trigger) {
                 ShowDetailsAppBar(
                     show = viewState.show,
-                    elevation = transitionState[appBarElevationPropKey],
-                    backgroundColor = MaterialTheme.colors.surface,
-                    modifier = Modifier.drawOpacity(if (showOverlayAppBar) 1f else 0f),
+                    backgroundColor = Color.Transparent,
+                    elevation = 0.dp,
                     isRefreshing = viewState.refreshing,
                     actioner = actioner
                 )
             }
         }
     }
 
-    val insets = InsetsAmbient.current
     val bottomInset = with(DensityAmbient.current) { insets.bottom.toDp() }
 
     Column(
@@ -373,21 +359,6 @@ fun ShowDetails(
     }
 }
 
-private val appBarElevationPropKey = DpPropKey()
-
-private val appBarFadeTransitionDef = transitionDefinition {
-    state(true) {
-        this[appBarElevationPropKey] = 4.dp
-    }
-    state(false) {
-        this[appBarElevationPropKey] = 2.dp
-    }
-
-    transition {
-        appBarElevationPropKey using tween<Dp> { duration = 200 }
-    }
-}
-
 @Composable
 private fun NetworkInfoPanel(
     show: TiviShow,
@@ -698,7 +669,7 @@ private fun Seasons(
             val offset = InsetsAmbient.current.top +
                 with(DensityAmbient.current) { 56.dp.toIntPx() }
 
-            Modifier.onPositioned { coords ->
+            Modifier.onPositionInRootChanged { coords ->
                 val targetY = coords.positionInRoot.y + scrollerPosition.value - offset
 
                 scrollerPosition.smoothScrollTo(targetY) { _, _ ->