Merge pull request #914 from Automattic/update/episode-chip-up-next-icon

Add up next icon to episode chip

modules/services/images/src/main/res/drawable/ic_downloaded.xml

@@ -1,14 +1,12 @@
 <vector xmlns:android="http://schemas.android.com/apk/res/android"
-    android:width="24dp"
-    android:height="24dp"
-    android:viewportWidth="24"
-    android:viewportHeight="24">
+    android:width="12dp"
+    android:height="12dp"
+    android:viewportWidth="12"
+    android:viewportHeight="12">
   <path
-      android:pathData="M6,20L18,20A1,1 0,0 1,19 21L19,21A1,1 0,0 1,18 22L6,22A1,1 0,0 1,5 21L5,21A1,1 0,0 1,6 20z"
-      android:fillColor="#000"
-      android:fillType="evenOdd"/>
+      android:pathData="M8.845,2.47C9.138,2.177 9.612,2.177 9.905,2.47C10.198,2.763 10.198,3.237 9.905,3.53L5.625,7.811L3.22,5.405C2.927,5.112 2.927,4.638 3.22,4.345C3.513,4.052 3.987,4.052 4.28,4.345L5.625,5.689L8.845,2.47Z"
+      android:fillColor="#000"/>
   <path
-      android:pathData="M18.7526,6.8356C19.1195,6.4229 19.7516,6.3857 20.1644,6.7526C20.5771,7.1195 20.6143,7.7516 20.2474,8.1644L11.5428,17.957L6.7929,13.2071C6.4024,12.8166 6.4024,12.1834 6.7929,11.7929C7.1834,11.4024 7.8166,11.4024 8.2071,11.7929L11.4572,15.043L18.7526,6.8356Z"
-      android:fillColor="#000"
-      android:fillType="nonZero"/>
+      android:pathData="M2.25,9L9.75,9A0.75,0.75 0,0 1,10.5 9.75L10.5,9.75A0.75,0.75 0,0 1,9.75 10.5L2.25,10.5A0.75,0.75 0,0 1,1.5 9.75L1.5,9.75A0.75,0.75 0,0 1,2.25 9z"
+      android:fillColor="#000"/>
 </vector>

modules/services/images/src/main/res/drawable/ic_upnext.xml

@@ -1,19 +1,13 @@
-<?xml version="1.0" encoding="utf-8"?>
 <vector xmlns:android="http://schemas.android.com/apk/res/android"
-    android:width="24dp"
-    android:height="24dp"
-    android:viewportWidth="24"
-    android:viewportHeight="24">
-
+    android:width="12dp"
+    android:height="12dp"
+    android:viewportWidth="12"
+    android:viewportHeight="12">
     <path
-        android:fillColor="#000"
-        android:fillType="evenOdd"
-        android:pathData="M3.7906191,2.56472793 L9.43038657,6.59313326 C9.65509286,6.75363776 9.7071387,7.0659128 9.54663421,7.2906191 C9.51456438,7.33551686 9.47528433,7.37479691 9.43038657,7.40686674 L3.7906191,11.4352721 C3.5659128,11.5957766 3.25363776,11.5437307 3.09313326,11.3190244 C3.03256157,11.2342241 3,11.1326168 3,11.0284053 L3,2.97159466 C3,2.69545229 3.22385763,2.47159466 3.5,2.47159466 C3.60421149,2.47159466 3.70581872,2.50415623 3.7906191,2.56472793 Z" />
+        android:pathData="M1.5,2.236C1.5,1.829 1.96,1.593 2.291,1.829L4.43,3.357C4.71,3.557 4.71,3.972 4.43,4.171L2.291,5.699C1.96,5.936 1.5,5.699 1.5,5.293V2.236Z"
+        android:fillColor="#000"/>
     <path
+        android:pathData="M6,3.75C6,3.336 6.336,3 6.75,3H10.5C10.914,3 11.25,3.336 11.25,3.75C11.25,4.164 10.914,4.5 10.5,4.5H6.75C6.336,4.5 6,4.164 6,3.75ZM3.75,6.75C3.75,6.336 4.086,6 4.5,6H10.5C10.914,6 11.25,6.336 11.25,6.75C11.25,7.164 10.914,7.5 10.5,7.5H4.5C4.086,7.5 3.75,7.164 3.75,6.75ZM4.5,9C4.086,9 3.75,9.336 3.75,9.75C3.75,10.164 4.086,10.5 4.5,10.5H10.5C10.914,10.5 11.25,10.164 11.25,9.75C11.25,9.336 10.914,9 10.5,9H4.5Z"
         android:fillColor="#000"
-        android:fillAlpha=".5"
-        android:fillType="evenOdd"
-        android:strokeAlpha=".5"
-        android:strokeWidth="1"
-        android:pathData="M13,6 L21,6 C21.5522847,6 22,6.44771525 22,7 C22,7.55228475 21.5522847,8 21,8 L13,8 C12.4477153,8 12,7.55228475 12,7 C12,6.44771525 12.4477153,6 13,6 Z M10,11 L21,11 C21.5522847,11 22,11.4477153 22,12 C22,12.5522847 21.5522847,13 21,13 L10,13 C9.44771525,13 9,12.5522847 9,12 C9,11.4477153 9.44771525,11 10,11 Z M10,16 L21,16 C21.5522847,16 22,16.4477153 22,17 C22,17.5522847 21.5522847,18 21,18 L10,18 C9.44771525,18 9,17.5522847 9,17 C9,16.4477153 9.44771525,16 10,16 Z" />
+        android:fillType="evenOdd"/>
 </vector>

wear/src/main/kotlin/au/com/shiftyjelly/pocketcasts/wear/ui/component/EpisodeChip.kt

@@ -2,8 +2,11 @@ package au.com.shiftyjelly.pocketcasts.wear.ui.component
 
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Arrangement.Absolute.spacedBy
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.IntrinsicSize
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
@@ -20,6 +23,7 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.PlatformTextStyle
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.style.TextOverflow
@@ -33,8 +37,10 @@ import au.com.shiftyjelly.pocketcasts.compose.components.EpisodeImage
 import au.com.shiftyjelly.pocketcasts.images.R
 import au.com.shiftyjelly.pocketcasts.localization.helper.TimeHelper
 import au.com.shiftyjelly.pocketcasts.models.entity.BaseEpisode
+import au.com.shiftyjelly.pocketcasts.repositories.playback.UpNextQueue
 import au.com.shiftyjelly.pocketcasts.utils.extensions.toLocalizedFormatPattern
 import au.com.shiftyjelly.pocketcasts.wear.theme.theme
+import au.com.shiftyjelly.pocketcasts.localization.R as LR
 
 @Composable
 fun EpisodeChip(episode: BaseEpisode, onClick: () -> Unit) {
@@ -57,9 +63,19 @@ fun EpisodeChip(episode: BaseEpisode, onClick: () -> Unit) {
             .observeByUuid(episode)
             .collectAsState()
 
-        Row {
+        val queueState by viewModel.upNextQueue.collectAsState(UpNextQueue.State.Empty)
+        val upNextQueue = (queueState as? UpNextQueue.State.Loaded)
+            ?.queue
+            ?: emptyList()
+        val isInUpNextQueue = upNextQueue.any { it.uuid == episode.uuid }
+
+        Row(
+            verticalAlignment = Alignment.CenterVertically,
+            modifier = Modifier.height(IntrinsicSize.Max)
+        ) {
             Column(
                 horizontalAlignment = Alignment.CenterHorizontally,
+                verticalArrangement = Arrangement.Center,
             ) {
 
                 EpisodeImage(
@@ -69,14 +85,29 @@ fun EpisodeChip(episode: BaseEpisode, onClick: () -> Unit) {
                         .clip(RoundedCornerShape(4.dp)),
                 )
 
-                if (episode.isDownloaded) {
-                    Spacer(Modifier.height(4.dp))
-                    Icon(
-                        painter = painterResource(R.drawable.ic_downloaded),
-                        contentDescription = null,
-                        tint = MaterialTheme.theme.colors.support02,
-                        modifier = Modifier.size(12.dp),
-                    )
+                if (episode.isDownloaded || isInUpNextQueue) {
+                    Row(
+                        horizontalArrangement = spacedBy(4.dp),
+                        modifier = Modifier.padding(top = 4.dp)
+                    ) {
+                        if (isInUpNextQueue) {
+                            Icon(
+                                painter = painterResource(R.drawable.ic_upnext),
+                                contentDescription = stringResource(LR.string.episode_in_up_next),
+                                tint = MaterialTheme.theme.colors.support01,
+                                modifier = Modifier.size(12.dp),
+                            )
+                        }
+
+                        if (episode.isDownloaded) {
+                            Icon(
+                                painter = painterResource(R.drawable.ic_downloaded),
+                                contentDescription = stringResource(LR.string.downloaded),
+                                tint = MaterialTheme.theme.colors.support02,
+                                modifier = Modifier.size(12.dp),
+                            )
+                        }
+                    }
                 }
             }
 

wear/src/main/kotlin/au/com/shiftyjelly/pocketcasts/wear/ui/component/EpisodeChipViewModel.kt

@@ -3,18 +3,30 @@ package au.com.shiftyjelly.pocketcasts.wear.ui.component
 import androidx.lifecycle.ViewModel
 import androidx.lifecycle.viewModelScope
 import au.com.shiftyjelly.pocketcasts.models.entity.BaseEpisode
+import au.com.shiftyjelly.pocketcasts.repositories.playback.PlaybackManager
+import au.com.shiftyjelly.pocketcasts.repositories.playback.UpNextQueue
 import au.com.shiftyjelly.pocketcasts.repositories.podcast.EpisodeManager
+import au.com.shiftyjelly.pocketcasts.repositories.podcast.PodcastManager
 import dagger.hilt.android.lifecycle.HiltViewModel
+import kotlinx.coroutines.flow.Flow
 import kotlinx.coroutines.flow.SharingStarted
 import kotlinx.coroutines.flow.StateFlow
 import kotlinx.coroutines.flow.stateIn
+import kotlinx.coroutines.rx2.asFlow
 import javax.inject.Inject
 
 @HiltViewModel
 class EpisodeChipViewModel @Inject constructor(
     private val episodeManager: EpisodeManager,
+    playbackManager: PlaybackManager,
+    podcastManager: PodcastManager,
 ) : ViewModel() {
 
+    val upNextQueue: Flow<UpNextQueue.State> = playbackManager
+        .upNextQueue
+        .getChangesObservableWithLiveCurrentEpisode(episodeManager, podcastManager)
+        .asFlow()
+
     fun observeByUuid(episode: BaseEpisode): StateFlow<BaseEpisode> =
         episodeManager
             .observeEpisodeByUuid(episode.uuid)