Skip to content

Commit

Permalink
Merge pull request #49 from NielsMasdorp/feature/images
Browse files Browse the repository at this point in the history
Refactor the way images are shown
  • Loading branch information
Niels Masdorp authored Jul 2, 2023
2 parents 0e6fd84 + 190d8ed commit 79fbd2b
Show file tree
Hide file tree
Showing 8 changed files with 111 additions and 67 deletions.
1 change: 0 additions & 1 deletion app/build.gradle
Original file line number Diff line number Diff line change
Expand Up @@ -104,7 +104,6 @@ dependencies {

// misc
implementation "com.github.skydoves:landscapist-glide:$landscapist_glide_version"
annotationProcessor 'com.github.bumptech.glide:compiler:4.13.0'
implementation "com.airbnb.android:lottie-compose:$lottie_version"
implementation "com.patrykandpatrick.vico:compose-m3:$vico_version"

Expand Down
4 changes: 2 additions & 2 deletions app/release/output-metadata.json
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,8 @@
"type": "SINGLE",
"filters": [],
"attributes": [],
"versionCode": 196,
"versionName": "2.3.2",
"versionCode": 197,
"versionName": "2.3.3",
"outputFile": "app-release.apk"
}
],
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
package com.nielsmasdorp.nederadio.ui.components

import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.aspectRatio
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.Card
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.Shape
import androidx.compose.ui.graphics.toArgb
import androidx.compose.ui.layout.ContentScale
import com.nielsmasdorp.nederadio.domain.stream.Stream
import com.nielsmasdorp.nederadio.ui.extension.edgeColor
import com.skydoves.landscapist.glide.GlideImage
import kotlinx.coroutines.CoroutineScope
import kotlinx.coroutines.launch

const val AspectRatio = 1.31f

@Composable
fun StreamImage(
stream: Stream,
shape: Shape,
scope: CoroutineScope,
modifier: Modifier = Modifier,
onSelectStream: ((String) -> Unit)? = null
) {
val clickableModifier = if (onSelectStream != null) {
modifier
.aspectRatio(ratio = AspectRatio)
.clip(shape)
.clickable { onSelectStream.invoke(stream.id) }
} else {
modifier
.aspectRatio(ratio = AspectRatio)
.clip(shape)
}
Card(modifier = clickableModifier) {
var edgeColor by remember { mutableStateOf(Color.White.toArgb()) }
GlideImage(
imageModel = { stream.imageUrl },
success = { success, painter ->
LaunchedEffect(Unit) {
scope.launch {
success.imageBitmap?.let { edgeColor = it.edgeColor() }
}
}
Image(
modifier = Modifier
.fillMaxSize()
.background(color = Color(color = edgeColor)),
painter = painter,
contentDescription = null,
contentScale = ContentScale.Fit
)
}
)
}
}
Original file line number Diff line number Diff line change
@@ -1,26 +1,19 @@
package com.nielsmasdorp.nederadio.ui.components

import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.grid.GridCells
import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Card
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.nielsmasdorp.nederadio.R
import com.nielsmasdorp.nederadio.domain.stream.Stream
import com.skydoves.landscapist.glide.GlideImage

/**
* @author Niels Masdorp (NielsMasdorp)
Expand All @@ -32,9 +25,10 @@ fun StreamsGrid(
onSelectStream: (String) -> Unit = {}
) {

val scope = rememberCoroutineScope()

Surface(
modifier = modifier
.fillMaxSize(),
modifier = modifier.fillMaxSize(),
color = MaterialTheme.colorScheme.primaryContainer,
) {
if (streams.isEmpty()) {
Expand All @@ -57,23 +51,14 @@ fun StreamsGrid(
horizontalArrangement = Arrangement.spacedBy(12.dp)
) {
items(streams.size) { index ->
val item = streams[index]
Card(
shape = RoundedCornerShape(24.dp),
modifier = Modifier
.clip(RoundedCornerShape(30.dp))
.clickable { onSelectStream(item.id) }
.aspectRatio(1f)
) {
GlideImage(
imageModel = item.imageUrl,
contentDescription = item.title,
contentScale = ContentScale.Crop,
modifier = Modifier
.fillMaxSize()
.background(Color.White)
)
}
val stream = streams[index]
StreamImage(
modifier = Modifier.fillMaxSize(),
stream = stream,
shape = RoundedCornerShape(12.dp),
scope = scope,
onSelectStream = onSelectStream
)
}
}
}
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
package com.nielsmasdorp.nederadio.ui.extension

import androidx.compose.ui.graphics.ImageBitmap
import kotlinx.coroutines.Dispatchers
import kotlinx.coroutines.withContext

@Suppress("MagicNumber")
suspend fun ImageBitmap.edgeColor(): Int = withContext(Dispatchers.IO) {
val pixels = IntArray(width * height)
readPixels(pixels)
pixels.last()
}
Original file line number Diff line number Diff line change
@@ -1,19 +1,17 @@
package com.nielsmasdorp.nederadio.ui.home.bottomsheet.collapsed

import android.view.View
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material.icons.filled.Radio
import androidx.compose.material.icons.outlined.FavoriteBorder
import androidx.compose.material3.*
import androidx.compose.runtime.Composable
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.toArgb
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextOverflow
Expand All @@ -23,8 +21,8 @@ import androidx.media3.ui.PlayerControlView
import com.nielsmasdorp.nederadio.R
import com.nielsmasdorp.nederadio.domain.stream.ActiveStream
import com.nielsmasdorp.nederadio.domain.stream.PlayerControls
import com.nielsmasdorp.nederadio.ui.components.StreamImage
import com.nielsmasdorp.nederadio.ui.extension.setColors
import com.skydoves.landscapist.glide.GlideImage

/**
* @author Niels Masdorp (NielsMasdorp)
Expand All @@ -36,6 +34,9 @@ fun StreamScreenSmall(
modifier: Modifier = Modifier,
onStreamFavoriteStatusChanged: (String, Boolean) -> Unit,
) {

val scope = rememberCoroutineScope()

val controlColor = MaterialTheme.colorScheme.onPrimary.toArgb()
when (activeStream) {
is ActiveStream.Unknown -> return
Expand Down Expand Up @@ -69,18 +70,12 @@ fun StreamScreenSmall(
.padding(16.dp),
verticalAlignment = Alignment.CenterVertically
) {
Card(
modifier = Modifier.size(48.dp)
) {
GlideImage(
imageModel = stream.imageUrl,
contentDescription = null,
contentScale = ContentScale.Crop,
modifier = Modifier
.fillMaxSize()
.background(Color.White)
)
}
StreamImage(
modifier = Modifier.size(48.dp),
stream = stream,
shape = RoundedCornerShape(8.dp),
scope = scope
)
Spacer(modifier = Modifier.width(8.dp))
Column(
modifier = Modifier
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,15 +9,11 @@ import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material.icons.outlined.FavoriteBorder
import androidx.compose.material3.*
import androidx.compose.runtime.Composable
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.ImageBitmap
import androidx.compose.ui.graphics.toArgb
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.imageResource
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.font.FontWeight
Expand All @@ -28,8 +24,8 @@ import androidx.media3.ui.PlayerControlView
import com.nielsmasdorp.nederadio.R
import com.nielsmasdorp.nederadio.domain.stream.ActiveStream
import com.nielsmasdorp.nederadio.domain.stream.PlayerControls
import com.nielsmasdorp.nederadio.ui.components.StreamImage
import com.nielsmasdorp.nederadio.ui.extension.setColors
import com.skydoves.landscapist.glide.GlideImage

/**
* @author Niels Masdorp (NielsMasdorp)
Expand All @@ -45,6 +41,8 @@ fun StreamViewLarge(
modifier: Modifier = Modifier
) {

val scope = rememberCoroutineScope()

Surface(
modifier = modifier,
color = MaterialTheme.colorScheme.primary
Expand All @@ -68,20 +66,12 @@ fun StreamViewLarge(
)
}
Spacer(modifier = Modifier.height(32.dp))
Card(
shape = RoundedCornerShape(24.dp),
modifier = Modifier.size(256.dp)
) {
GlideImage(
imageModel = stream.imageUrl,
placeHolder = ImageBitmap.imageResource(R.drawable.empty_background_small),
contentDescription = "",
contentScale = ContentScale.Crop,
modifier = Modifier
.fillMaxSize()
.background(Color.White)
)
}
StreamImage(
modifier = Modifier.size(256.dp),
stream = stream,
shape = RoundedCornerShape(12.dp),
scope = scope
)
Spacer(modifier = Modifier.height(24.dp))
Text(
textAlign = TextAlign.Center,
Expand Down
2 changes: 1 addition & 1 deletion build.gradle
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ buildscript {
ext.accompanist_version = '0.24.13-rc'

//misc
ext.landscapist_glide_version = '1.4.5'
ext.landscapist_glide_version = '2.2.2'
ext.lottie_version = '4.2.2'
ext.vico_version = '1.6.5'

Expand Down

0 comments on commit 79fbd2b

Please sign in to comment.