simple photo viewer

feature/photoviewer/build.gradle.kts

@@ -2,6 +2,8 @@ plugins {
     alias(libs.plugins.android.library)
     alias(libs.plugins.org.jetbrains.kotlin.android)
     alias(libs.plugins.kotlin.compose.compiler)
+    alias(libs.plugins.org.jetbrains.kotlin.plugin.parcelize)
+    alias(libs.plugins.kotlin.serialization)
 }
 
 group = "dev.meloda.fast.photoviewer"
@@ -52,4 +54,12 @@ dependencies {
     implementation(libs.bundles.compose)
 
     implementation(libs.coil.compose)
+
+    implementation(libs.haze)
+    implementation(libs.haze.materials)
+
+    debugImplementation(libs.compose.ui.tooling)
+
+    implementation(libs.androidx.navigation.compose)
+    implementation(libs.kotlin.serialization)
 }

feature/photoviewer/src/main/kotlin/dev/meloda/fast/photoviewer/PhotoViewViewModel.kt

@@ -1,22 +1,34 @@
 package dev.meloda.fast.photoviewer
 
+import androidx.lifecycle.SavedStateHandle
 import androidx.lifecycle.ViewModel
 import dev.meloda.fast.common.extensions.setValue
-import dev.meloda.fast.photoviewer.model.PhotoViewArguments
-import dev.meloda.fast.photoviewer.model.PhotoViewState
+import dev.meloda.fast.common.model.UiImage
+import dev.meloda.fast.photoviewer.model.PhotoViewScreenState
+import dev.meloda.fast.photoviewer.navigation.PhotoView
 import kotlinx.coroutines.flow.MutableStateFlow
 import kotlinx.coroutines.flow.StateFlow
+import java.net.URLDecoder
 
 interface PhotoViewViewModel {
-    val state: StateFlow<PhotoViewState>
-
-    fun setArguments(arguments: PhotoViewArguments)
+    val screenState: StateFlow<PhotoViewScreenState>
 }
 
-class PhotoViewViewModelImpl : PhotoViewViewModel, ViewModel() {
-    override val state = MutableStateFlow(PhotoViewState.EMPTY)
+class PhotoViewViewModelImpl(
+    savedStateHandle: SavedStateHandle
+) : PhotoViewViewModel, ViewModel() {
 
-    override fun setArguments(arguments: PhotoViewArguments) {
-        state.setValue { old -> old.copy(images = arguments.images) }
+    override val screenState = MutableStateFlow(PhotoViewScreenState.EMPTY)
+
+    init {
+        val arguments = PhotoView.from(savedStateHandle).arguments
+
+        screenState.setValue { old ->
+            old.copy(
+                images = arguments.images
+                    .map { URLDecoder.decode(it, "utf-8") }
+                    .map(UiImage::Url)
+            )
+        }
     }
 }

feature/photoviewer/src/main/kotlin/dev/meloda/fast/photoviewer/model/PhotoViewArguments.kt

@@ -1,9 +1,11 @@
 package dev.meloda.fast.photoviewer.model
 
-import androidx.compose.runtime.Immutable
-import dev.meloda.fast.common.model.UiImage
+import android.os.Parcelable
+import kotlinx.parcelize.Parcelize
+import kotlinx.serialization.Serializable
 
-@Immutable
+@Parcelize
+@Serializable
 data class PhotoViewArguments(
-    val images: List<UiImage>
-)
+    val images: List<String>
+) : Parcelable

feature/photoviewer/src/main/kotlin/dev/meloda/fast/photoviewer/model/PhotoViewScreenState.kt

@@ -4,12 +4,12 @@ import androidx.compose.runtime.Immutable
 import dev.meloda.fast.common.model.UiImage
 
 @Immutable
-data class PhotoViewState(
+data class PhotoViewScreenState(
     val images: List<UiImage>
 ) {
 
     companion object {
-        val EMPTY: PhotoViewState = PhotoViewState(
+        val EMPTY: PhotoViewScreenState = PhotoViewScreenState(
             images = emptyList()
         )
     }

feature/photoviewer/src/main/kotlin/dev/meloda/fast/photoviewer/navigation/PhotoViewNavigation.kt

@@ -0,0 +1,41 @@
+package dev.meloda.fast.photoviewer.navigation
+
+import androidx.lifecycle.SavedStateHandle
+import androidx.navigation.NavController
+import androidx.navigation.NavGraphBuilder
+import androidx.navigation.compose.composable
+import androidx.navigation.toRoute
+import dev.meloda.fast.common.extensions.customNavType
+import dev.meloda.fast.photoviewer.model.PhotoViewArguments
+import dev.meloda.fast.photoviewer.presentation.PhotoViewRoute
+import kotlinx.serialization.Serializable
+import java.net.URLEncoder
+import kotlin.reflect.typeOf
+
+@Serializable
+data class PhotoView(val arguments: PhotoViewArguments) {
+    companion object {
+        val typeMap = mapOf(typeOf<PhotoViewArguments>() to customNavType<PhotoViewArguments>())
+
+        fun from(savedStateHandle: SavedStateHandle) =
+            savedStateHandle.toRoute<PhotoView>(typeMap)
+    }
+}
+
+fun NavGraphBuilder.photoViewScreen(
+    onBack: () -> Unit
+) {
+    composable<PhotoView>(typeMap = PhotoView.typeMap) {
+        PhotoViewRoute(onBack = onBack)
+    }
+}
+
+fun NavController.navigateToPhotoView(images: List<String>) {
+    this.navigate(
+        PhotoView(
+            arguments = PhotoViewArguments(
+                images.map { URLEncoder.encode(it, "utf-8") }
+            )
+        )
+    )
+}

feature/photoviewer/src/main/kotlin/dev/meloda/fast/photoviewer/presentation/PhotoViewScreen.kt

@@ -0,0 +1,249 @@
+package dev.meloda.fast.photoviewer.presentation
+
+import android.util.Log
+import android.widget.Toast
+import androidx.compose.animation.core.animateFloatAsState
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.gestures.Orientation
+import androidx.compose.foundation.gestures.draggable
+import androidx.compose.foundation.gestures.rememberDraggableState
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.defaultMinSize
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.pager.HorizontalPager
+import androidx.compose.foundation.pager.PagerState
+import androidx.compose.foundation.pager.rememberPagerState
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.automirrored.rounded.ArrowBack
+import androidx.compose.material.icons.rounded.MoreVert
+import androidx.compose.material3.DropdownMenu
+import androidx.compose.material3.DropdownMenuItem
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Scaffold
+import androidx.compose.material3.Text
+import androidx.compose.material3.TopAppBar
+import androidx.compose.material3.TopAppBarDefaults
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.derivedStateOf
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableFloatStateOf
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.graphicsLayer
+import androidx.compose.ui.graphics.painter.ColorPainter
+import androidx.compose.ui.graphics.painter.Painter
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.DpOffset
+import androidx.compose.ui.unit.dp
+import androidx.lifecycle.compose.collectAsStateWithLifecycle
+import coil.compose.AsyncImage
+import com.conena.nanokt.android.content.pxToDp
+import dev.meloda.fast.common.model.UiImage
+import dev.meloda.fast.photoviewer.PhotoViewViewModel
+import dev.meloda.fast.photoviewer.PhotoViewViewModelImpl
+import dev.meloda.fast.photoviewer.model.PhotoViewScreenState
+import dev.meloda.fast.ui.util.getImage
+import org.koin.androidx.compose.koinViewModel
+import kotlin.math.PI
+import kotlin.math.abs
+import kotlin.math.cos
+import kotlin.math.sin
+import dev.meloda.fast.ui.R as UiR
+
+@Composable
+fun PhotoViewRoute(
+    onBack: () -> Unit,
+    viewModel: PhotoViewViewModel = koinViewModel<PhotoViewViewModelImpl>()
+) {
+    val screenState by viewModel.screenState.collectAsStateWithLifecycle()
+
+    PhotoViewScreen(
+        screenState = screenState,
+        onBack = onBack
+    )
+}
+
+@Composable
+fun PhotoViewScreen(
+    screenState: PhotoViewScreenState = PhotoViewScreenState.EMPTY,
+    onBack: () -> Unit = {}
+) {
+    val pagerState = rememberPagerState(pageCount = { screenState.images.size })
+
+    var offsetY by remember { mutableFloatStateOf(0f) }
+
+    val calculatedAlpha by remember(offsetY) {
+        derivedStateOf {
+            val absoluteOffset = abs(offsetY)
+
+            1 - if (absoluteOffset >= 1700) {
+                0.85f
+            } else absoluteOffset / 2000
+        }
+    }
+
+    Scaffold(
+        modifier = Modifier.graphicsLayer(alpha = calculatedAlpha),
+        topBar = { TopBar(onBack = onBack) },
+        containerColor = MaterialTheme.colorScheme.background.copy(
+            alpha = calculatedAlpha
+        )
+    ) { padding ->
+        Column(modifier = Modifier.fillMaxSize()) {
+            Pager(
+                pagerState = pagerState,
+                state = screenState,
+                padding = padding,
+                onBack = onBack,
+                onVerticalDrag = { offset -> offsetY = offset },
+                modifier = Modifier
+            )
+        }
+    }
+}
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun TopBar(
+    modifier: Modifier = Modifier,
+    onBack: () -> Unit
+) {
+    val context = LocalContext.current
+
+    var dropdownMenuShown by remember {
+        mutableStateOf(false)
+    }
+
+    TopAppBar(
+        modifier = modifier,
+        title = {},
+        navigationIcon = {
+            IconButton(onClick = onBack) {
+                Icon(
+                    imageVector = Icons.AutoMirrored.Rounded.ArrowBack,
+                    contentDescription = "Back button"
+                )
+            }
+        },
+        actions = {
+            IconButton(
+                onClick = { dropdownMenuShown = true }
+            ) {
+                Icon(
+                    imageVector = Icons.Rounded.MoreVert,
+                    contentDescription = "Options"
+                )
+            }
+
+            DropdownMenu(
+                modifier = Modifier.defaultMinSize(minWidth = 140.dp),
+                expanded = dropdownMenuShown,
+                onDismissRequest = { dropdownMenuShown = false },
+                offset = DpOffset(x = (10).dp, y = (-60).dp)
+            ) {
+                DropdownMenuItem(
+                    onClick = {
+                        Toast.makeText(context, "Save clicked", Toast.LENGTH_SHORT).show()
+                        dropdownMenuShown = false
+                    },
+                    text = { Text(text = "Save") },
+                )
+            }
+        },
+        colors = TopAppBarDefaults.topAppBarColors(containerColor = Color.Transparent)
+    )
+}
+
+@Composable
+fun Pager(
+    modifier: Modifier = Modifier,
+    pagerState: PagerState,
+    state: PhotoViewScreenState,
+    padding: PaddingValues,
+    onBack: () -> Unit,
+    onVerticalDrag: (offset: Float) -> Unit
+) {
+    HorizontalPager(
+        state = pagerState,
+        modifier = modifier.fillMaxSize()
+    ) { page ->
+        val model = state.images[page].getImage()
+
+        Column(
+            modifier = Modifier
+                .fillMaxSize()
+                .padding(padding)
+        ) {
+            if (model is Painter) {
+                Image(
+                    painter = model,
+                    contentDescription = "Image",
+                    modifier = Modifier.fillMaxSize()
+                )
+            } else {
+                var offsetY by remember { mutableFloatStateOf(0f) }
+
+                val animatedOffset by animateFloatAsState(
+                    targetValue = offsetY,
+                    label = "animatedOffset"
+                )
+                var useAnimatedOffset by remember {
+                    mutableStateOf(false)
+                }
+
+                AsyncImage(
+                    model = model,
+                    contentDescription = "Image",
+                    modifier = Modifier
+                        .graphicsLayer {
+                            this.translationY = if (useAnimatedOffset) {
+                                animatedOffset
+                            } else offsetY
+                        }
+                        .draggable(
+                            state = rememberDraggableState { delta ->
+                                useAnimatedOffset = false
+                                offsetY += delta
+                                onVerticalDrag(offsetY)
+                            },
+                            orientation = Orientation.Vertical,
+                            onDragStopped = {
+                                if (abs(offsetY.pxToDp()) >= 200) {
+                                    onBack()
+                                } else {
+                                    useAnimatedOffset = true
+                                    offsetY = 0f
+                                    onVerticalDrag(0f)
+                                }
+                            }
+                        )
+                        .fillMaxSize(),
+                    placeholder = ColorPainter(Color.DarkGray),
+                    error = ColorPainter(Color.Red)
+                )
+            }
+        }
+    }
+}
+
+@Preview
+@Composable
+private fun PhotoViewScreenPreview() {
+    PhotoViewScreen(
+        screenState = PhotoViewScreenState(
+            images = List(200) {
+                UiImage.Resource(UiR.drawable.test_captcha)
+            }
+        )
+    )
+}

feature/photoviewer/src/main/kotlin/dev/meloda/fast/photoviewer/presentation/PhotoViewScreenContent.kt

@@ -1,177 +0,0 @@
-package dev.meloda.fast.photoviewer.presentation
-
-import android.graphics.drawable.ColorDrawable
-import android.widget.Toast
-import androidx.compose.foundation.ExperimentalFoundationApi
-import androidx.compose.foundation.Image
-import androidx.compose.foundation.background
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.PaddingValues
-import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.defaultMinSize
-import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.navigationBarsPadding
-import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.statusBarsPadding
-import androidx.compose.foundation.pager.HorizontalPager
-import androidx.compose.foundation.pager.PagerState
-import androidx.compose.foundation.pager.rememberPagerState
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.automirrored.rounded.ArrowBack
-import androidx.compose.material.icons.rounded.MoreVert
-import androidx.compose.material3.DropdownMenu
-import androidx.compose.material3.DropdownMenuItem
-import androidx.compose.material3.ExperimentalMaterial3Api
-import androidx.compose.material3.Icon
-import androidx.compose.material3.IconButton
-import androidx.compose.material3.Text
-import androidx.compose.material3.TopAppBar
-import androidx.compose.runtime.Composable
-import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
-import androidx.compose.runtime.setValue
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.graphics.painter.ColorPainter
-import androidx.compose.ui.graphics.painter.Painter
-import androidx.compose.ui.graphics.toArgb
-import androidx.compose.ui.platform.LocalContext
-import androidx.compose.ui.res.colorResource
-import androidx.compose.ui.res.painterResource
-import androidx.compose.ui.unit.DpOffset
-import androidx.compose.ui.unit.dp
-import androidx.lifecycle.compose.collectAsStateWithLifecycle
-import coil.compose.AsyncImage
-import dev.meloda.fast.common.model.UiImage
-import dev.meloda.fast.photoviewer.PhotoViewViewModel
-import dev.meloda.fast.photoviewer.model.PhotoViewState
-
-@Composable
-fun PhotoViewScreenContent(
-    onBackClick: () -> Unit,
-    viewModel: PhotoViewViewModel
-) {
-    val state by viewModel.state.collectAsStateWithLifecycle()
-    val images = state.images
-
-    val pagerState = rememberPagerState(pageCount = { images.size })
-
-    // TODO: 23/11/2023, Danil Nikolaev: заюзать штуку для цветов статус бара и навбара
-    Box(
-        modifier = Modifier.fillMaxSize()
-    ) {
-        Column(
-            modifier = Modifier
-                .fillMaxSize()
-                .background(Color(0xffb00b69))
-        ) {
-            Spacer(
-                modifier = Modifier
-                    .statusBarsPadding()
-                    .padding(top = 56.dp)
-            )
-            Pager(
-                pagerState = pagerState,
-                state = state
-            )
-            Spacer(modifier = Modifier.navigationBarsPadding())
-        }
-
-        AppBar(onBackClick = onBackClick)
-    }
-}
-
-@OptIn(ExperimentalMaterial3Api::class)
-@Composable
-fun AppBar(onBackClick: () -> Unit) {
-    val context = LocalContext.current
-
-    var dropdownMenuShown by remember {
-        mutableStateOf(false)
-    }
-
-    TopAppBar(
-        title = {},
-        navigationIcon = {
-            IconButton(onClick = onBackClick) {
-                Icon(
-                    imageVector = Icons.AutoMirrored.Rounded.ArrowBack,
-                    contentDescription = "Back button"
-                )
-            }
-        },
-        actions = {
-            IconButton(
-                onClick = { dropdownMenuShown = true }
-            ) {
-                Icon(
-                    imageVector = Icons.Rounded.MoreVert,
-                    contentDescription = "Options"
-                )
-            }
-
-            DropdownMenu(
-                modifier = Modifier.defaultMinSize(minWidth = 140.dp),
-                expanded = dropdownMenuShown,
-                onDismissRequest = { dropdownMenuShown = false },
-                offset = DpOffset(x = (10).dp, y = (-60).dp)
-            ) {
-                DropdownMenuItem(
-                    onClick = {
-                        Toast.makeText(context, "Save clicked", Toast.LENGTH_SHORT).show()
-                        dropdownMenuShown = false
-                    },
-                    text = { Text(text = "Save") },
-                )
-            }
-        }
-    )
-}
-
-@OptIn(ExperimentalFoundationApi::class)
-@Composable
-fun Pager(
-    pagerState: PagerState,
-    padding: PaddingValues = PaddingValues(0.dp),
-    state: PhotoViewState
-) {
-    val images = state.images
-
-    HorizontalPager(
-        state = pagerState,
-        modifier = Modifier
-            .fillMaxSize()
-            .padding(padding),
-        key = { index -> images[index].hashCode() }
-    ) { page ->
-        val model = images[page].getImage()
-        if (model is Painter) {
-            Image(
-                painter = model,
-                contentDescription = "Image",
-                modifier = Modifier.fillMaxSize()
-            )
-        } else {
-            AsyncImage(
-                model = model,
-                contentDescription = "Image",
-                modifier = Modifier.fillMaxSize(),
-                placeholder = ColorPainter(Color.DarkGray),
-                error = ColorPainter(Color.Red)
-            )
-        }
-    }
-}
-
-@Composable
-fun UiImage.getImage(): Any {
-    return when (this) {
-        is UiImage.Color -> ColorDrawable(color)
-        is UiImage.ColorResource -> ColorDrawable(colorResource(id = resId).toArgb())
-        is UiImage.Resource -> painterResource(id = resId)
-        is UiImage.Simple -> drawable
-        is UiImage.Url -> url
-    }
-}