End of Year: Add modal structure

app/src/main/java/au/com/shiftyjelly/pocketcasts/ui/MainActivity.kt

@@ -12,6 +12,7 @@ import androidx.activity.viewModels
 import androidx.appcompat.app.AppCompatActivity
 import androidx.appcompat.app.AppCompatDelegate
 import androidx.appcompat.widget.Toolbar
+import androidx.compose.ui.res.stringResource
 import androidx.core.view.isVisible
 import androidx.core.view.updatePadding
 import androidx.fragment.app.Fragment
@@ -26,6 +27,10 @@ import au.com.shiftyjelly.pocketcasts.account.PromoCodeUpgradedFragment
 import au.com.shiftyjelly.pocketcasts.analytics.AnalyticsEvent
 import au.com.shiftyjelly.pocketcasts.analytics.AnalyticsTrackerWrapper
 import au.com.shiftyjelly.pocketcasts.analytics.FirebaseAnalyticsTracker
+import au.com.shiftyjelly.pocketcasts.compose.AppTheme
+import au.com.shiftyjelly.pocketcasts.compose.bottomsheet.BottomSheetContentState
+import au.com.shiftyjelly.pocketcasts.compose.bottomsheet.BottomSheetContentState.Content.Button
+import au.com.shiftyjelly.pocketcasts.compose.bottomsheet.ModalBottomSheet
 import au.com.shiftyjelly.pocketcasts.databinding.ActivityMainBinding
 import au.com.shiftyjelly.pocketcasts.discover.view.DiscoverFragment
 import au.com.shiftyjelly.pocketcasts.filters.FiltersFragment
@@ -249,6 +254,10 @@ class MainActivity :
         handleIntent(intent, savedInstanceState)
 
         updateSystemColors()
+
+        if (BuildConfig.END_OF_YEAR_ENABLED) {
+            setupEndOfYearLaunchBottomSheet()
+        }
     }
 
     override fun onStart() {
@@ -446,6 +455,27 @@ class MainActivity :
         showBottomSheet(UpNextFragment.newInstance(source = source))
     }
 
+    private fun setupEndOfYearLaunchBottomSheet() {
+        binding.modalBottomSheet.setContent {
+            AppTheme(themeType = theme.activeTheme) {
+                ModalBottomSheet(
+                    showOnLoad = true,
+                    content = BottomSheetContentState.Content(
+                        titleText = stringResource(LR.string.end_of_year_launch_modal_title),
+                        summaryText = stringResource(LR.string.end_of_year_launch_modal_summary),
+                        primaryButton = Button.Primary(
+                            label = stringResource(LR.string.end_of_year_launch_modal_primary_button_title),
+                            onClick = {}
+                        ),
+                        secondaryButton = Button.Secondary(
+                            label = stringResource(LR.string.end_of_year_launch_modal_secondary_button_title),
+                        ),
+                    )
+                )
+            }
+        }
+    }
+
     @OptIn(DelicateCoroutinesApi::class)
     @Suppress("DEPRECATION")
     private fun setupPlayerViews() {

app/src/main/res/layout/activity_main.xml

@@ -62,6 +62,12 @@
             android:clickable="true"
             android:translationZ="200dp"/>
 
+        <androidx.compose.ui.platform.ComposeView
+            android:id="@+id/modalBottomSheet"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:translationZ="200dp"/>
+
     </androidx.coordinatorlayout.widget.CoordinatorLayout>
 
     <au.com.shiftyjelly.pocketcasts.views.component.RadioactiveLineView

base.gradle

@@ -27,6 +27,9 @@ android {
         buildConfigField "String", "SETTINGS_ENCRYPT_SECRET", "\"${project.settingsEncryptSecret}\""
         buildConfigField "String", "SHARING_SERVER_SECRET", "\"${project.sharingServerSecret}\""
 
+        // Feature Flags
+        buildConfigField "boolean", "END_OF_YEAR_ENABLED", "false"
+
         testInstrumentationRunner project.testInstrumentationRunner
         testApplicationId "au.com.shiftyjelly.pocketcasts.test" + project.name.replace("-", "_")
         vectorDrawables.useSupportLibrary = true

modules/services/compose/src/main/java/au/com/shiftyjelly/pocketcasts/compose/bottomsheet/BottomSheetContent.kt

@@ -0,0 +1,142 @@
+package au.com.shiftyjelly.pocketcasts.compose.bottomsheet
+
+import androidx.compose.foundation.BorderStroke
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.wrapContentHeight
+import androidx.compose.foundation.layout.wrapContentWidth
+import androidx.compose.material.Button
+import androidx.compose.material.MaterialTheme
+import androidx.compose.material.OutlinedButton
+import androidx.compose.material.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.tooling.preview.PreviewParameter
+import androidx.compose.ui.unit.dp
+import au.com.shiftyjelly.pocketcasts.compose.AppThemeWithBackground
+import au.com.shiftyjelly.pocketcasts.compose.components.TextH40
+import au.com.shiftyjelly.pocketcasts.compose.components.TextP50
+import au.com.shiftyjelly.pocketcasts.compose.preview.ThemePreviewParameterProvider
+import au.com.shiftyjelly.pocketcasts.compose.theme
+import au.com.shiftyjelly.pocketcasts.ui.theme.Theme
+
+private val outlinedBorder: BorderStroke
+    @Composable
+    get() = BorderStroke(2.dp, MaterialTheme.colors.primary)
+
+class BottomSheetContentState(
+    val content: Content,
+) {
+    data class Content(
+        val titleText: String,
+        val summaryText: String,
+        val primaryButton: Button.Primary,
+        val secondaryButton: Button.Secondary? = null,
+    ) {
+        sealed interface Button {
+            val label: String
+            val onClick: (() -> Unit)?
+
+            data class Primary(
+                override val label: String,
+                override val onClick: () -> Unit,
+            ) : Button
+
+            data class Secondary(
+                override val label: String,
+                override val onClick: (() -> Unit)? = null,
+            ) : Button
+        }
+    }
+}
+
+@Composable
+fun BottomSheetContent(
+    state: BottomSheetContentState,
+    onDismiss: () -> Unit,
+    modifier: Modifier = Modifier
+) {
+    Box(
+        modifier = modifier
+            .fillMaxWidth()
+            .wrapContentWidth(unbounded = false)
+            .wrapContentHeight(unbounded = true)
+            .padding(24.dp)
+    ) {
+        Column(
+            modifier = modifier.fillMaxSize(),
+            horizontalAlignment = Alignment.CenterHorizontally
+        ) {
+            val content = state.content
+
+            Spacer(modifier = modifier.height(16.dp))
+
+            TextH40(
+                text = content.titleText,
+                color = MaterialTheme.theme.colors.primaryText01,
+            )
+
+            Spacer(modifier = modifier.height(16.dp))
+
+            TextP50(
+                text = content.summaryText,
+                style = MaterialTheme.typography.body1,
+                color = MaterialTheme.theme.colors.primaryText02,
+                textAlign = TextAlign.Center
+            )
+
+            Spacer(modifier = modifier.height(16.dp))
+
+            Button(onClick = content.primaryButton.onClick) {
+                Text(text = content.primaryButton.label)
+            }
+
+            Spacer(modifier = modifier.height(8.dp))
+
+            if (content.secondaryButton != null) {
+                OutlinedButton(
+                    border = outlinedBorder,
+                    onClick = {
+                        onDismiss.invoke()
+                        content.secondaryButton.onClick?.invoke()
+                    }
+                ) {
+                    Text(text = content.secondaryButton.label)
+                }
+            }
+        }
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+private fun BottomSheetContentPreview(
+    @PreviewParameter(ThemePreviewParameterProvider::class) themeType: Theme.ThemeType,
+) {
+    AppThemeWithBackground(themeType) {
+        BottomSheetContent(
+            state = BottomSheetContentState(
+                content = BottomSheetContentState.Content(
+                    titleText = "Heading",
+                    summaryText = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.",
+                    primaryButton = BottomSheetContentState.Content.Button.Primary(
+                        label = "Confirm",
+                        onClick = {}
+                    ),
+                    secondaryButton = BottomSheetContentState.Content.Button.Secondary(
+                        label = "Not now",
+                    ),
+                )
+            ),
+            onDismiss = {}
+        )
+    }
+}

modules/services/compose/src/main/java/au/com/shiftyjelly/pocketcasts/compose/bottomsheet/ModalBottomSheet.kt

@@ -0,0 +1,53 @@
+package au.com.shiftyjelly.pocketcasts.compose.bottomsheet
+
+import androidx.activity.compose.BackHandler
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.ExperimentalMaterialApi
+import androidx.compose.material.ModalBottomSheetLayout
+import androidx.compose.material.ModalBottomSheetState
+import androidx.compose.material.ModalBottomSheetValue
+import androidx.compose.material.rememberModalBottomSheetState
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.rememberCoroutineScope
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.dp
+import kotlinx.coroutines.CoroutineScope
+import kotlinx.coroutines.launch
+
+@OptIn(ExperimentalMaterialApi::class)
+@Composable
+fun ModalBottomSheet(
+    showOnLoad: Boolean = false,
+    content: BottomSheetContentState.Content,
+) {
+    val sheetState = rememberModalBottomSheetState(
+        initialValue = if (showOnLoad) ModalBottomSheetValue.Expanded else ModalBottomSheetValue.Hidden,
+    )
+    val coroutineScope = rememberCoroutineScope()
+
+    BackHandler(sheetState.isVisible) {
+        hideBottomSheet(coroutineScope, sheetState)
+    }
+
+    ModalBottomSheetLayout(
+        sheetState = sheetState,
+        sheetContent = {
+            BottomSheetContent(
+                state = BottomSheetContentState(content),
+                onDismiss = {
+                    hideBottomSheet(coroutineScope, sheetState)
+                }
+            )
+        },
+        sheetShape = RoundedCornerShape(topStart = 16.dp, topEnd = 16.dp),
+        scrimColor = Color.Black.copy(alpha = .25f),
+        content = {}
+    )
+}
+
+@OptIn(ExperimentalMaterialApi::class)
+fun hideBottomSheet(coroutineScope: CoroutineScope, sheetState: ModalBottomSheetState) {
+    coroutineScope.launch {
+        sheetState.hide()
+    }
+}

modules/services/compose/src/main/java/au/com/shiftyjelly/pocketcasts/compose/components/TextStyles.kt

@@ -130,14 +130,16 @@ fun TextP50(
     modifier: Modifier = Modifier,
     color: Color? = null,
     maxLines: Int? = null,
-    style: TextStyle? = null
+    style: TextStyle? = null,
+    textAlign: TextAlign? = null,
 ) {
     TextP50(
         text = AnnotatedString(text),
         modifier = modifier,
         color = color,
         maxLines = maxLines,
-        style = style
+        style = style,
+        textAlign = textAlign,
     )
 }
 
@@ -147,7 +149,8 @@ fun TextP50(
     modifier: Modifier = Modifier,
     color: Color? = null,
     maxLines: Int? = null,
-    style: TextStyle? = null
+    style: TextStyle? = null,
+    textAlign: TextAlign? = null,
 ) {
     Text(
         text = text,
@@ -157,6 +160,7 @@ fun TextP50(
         maxLines = maxLines ?: Int.MAX_VALUE,
         overflow = TextOverflow.Ellipsis,
         style = style ?: LocalTextStyle.current,
+        textAlign = textAlign,
         modifier = modifier
     )
 }

modules/services/localization/src/main/res/values/strings.xml

@@ -1377,4 +1377,11 @@
     <string name="server_files_storage_limit_exceeded">You have exceeded the storage limit for your account.</string>
     <string name="server_files_title_required">Title is required.</string>
 
+    <!-- End of Year -->
+
+    <string name="end_of_year_launch_modal_title">Your Year in Podcasts</string>
+    <string name="end_of_year_launch_modal_summary">See your top podcasts, categories, listening stats and more. Share with friends and shout out your favorite creators!</string>
+    <string name="end_of_year_launch_modal_primary_button_title">View my 2022</string>
+    <string name="end_of_year_launch_modal_secondary_button_title">Not Now</string>
+
 </resources>