Pause animated WebP when it becomes invisible

app/src/main/kotlin/com/hippo/ehviewer/coil/AnimatedWebPDrawable.kt

@@ -86,7 +86,7 @@ class AnimatedWebPDrawable(private val source: ByteBuffer) : Drawable(), Animata
     }
 
     override fun draw(canvas: Canvas) {
-        if (decodeJob?.isCompleted == true) {
+        if (decodeJob?.isCompleted == true && isVisible) {
             decodeJob = if (loopCount == 0 || loopsCompleted < loopCount) {
                 currentFrame = nextFrame.also { nextFrame = currentFrame }
                 decodeNextFrame(false)

app/src/main/kotlin/com/hippo/ehviewer/ui/reader/PagerItem.kt

@@ -9,7 +9,6 @@ import androidx.compose.foundation.layout.aspectRatio
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.pager.PagerState
 import androidx.compose.material3.Button
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
@@ -21,13 +20,13 @@ import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
-import androidx.compose.runtime.snapshotFlow
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.ColorFilter
 import androidx.compose.ui.graphics.ColorMatrix
 import androidx.compose.ui.graphics.painter.Painter
 import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.layout.onVisibilityChanged
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
@@ -47,6 +46,7 @@ import com.hippo.ehviewer.gallery.PageStatus
 import com.hippo.ehviewer.gallery.progressObserved
 import com.hippo.ehviewer.gallery.statusObserved
 import com.hippo.ehviewer.image.Image
+import com.hippo.ehviewer.ui.tools.thenIf
 import com.hippo.ehviewer.util.AdsPlaceholderFile
 import eu.kanade.tachiyomi.ui.reader.viewer.CombinedCircularProgressIndicator
 import kotlinx.coroutines.awaitCancellation
@@ -60,7 +60,6 @@ fun PagerItem(
     contentScale: ContentScale,
     modifier: Modifier = Modifier,
     contentModifier: Modifier = Modifier,
-    pagerState: PagerState? = null,
 ) {
     LaunchedEffect(Unit) {
         pageLoader.request(page.index)
@@ -103,20 +102,17 @@ fun PagerItem(
             }
             painter?.let { painter ->
                 val drawable = (painter as? DrawablePainter)?.drawable
-                if (pagerState != null && drawable is Animatable) {
-                    LaunchedEffect(drawable) {
-                        snapshotFlow { pagerState.currentPage == page.index }.collect {
-                            if (it) drawable.start() else drawable.stop()
-                        }
-                    }
-                }
                 val grayScale by Settings.grayScale.collectAsState()
                 val invert by Settings.invertedColors.collectAsState()
                 Image(
                     // DrawablePainter <: RememberObserver
                     painter = remember(painter) { painter },
                     contentDescription = null,
-                    modifier = contentModifier.fillMaxSize(),
+                    modifier = contentModifier.fillMaxSize().thenIf(drawable is Animatable) {
+                        onVisibilityChanged(minDurationMs = 33, minFractionVisible = 0.5f) {
+                            drawable!!.setVisible(it, false)
+                        }
+                    },
                     contentScale = contentScale,
                     colorFilter = when {
                         grayScale && invert -> grayScaleAndInvertFilter

app/src/main/kotlin/com/hippo/ehviewer/ui/reader/PagerViewer.kt

@@ -235,7 +235,6 @@ private fun PageContainer(
                 onLongClick = onLongClick,
                 onDoubleClick = DoubleTapZoom,
             ),
-            pagerState = pagerState,
         )
     }
 }