Skip to content

Commit

Permalink
feat(ui): re-design the ui of provider's screens
Browse files Browse the repository at this point in the history
  • Loading branch information
rhenwinch committed Jun 10, 2024
1 parent 96ef335 commit 856ea3f
Show file tree
Hide file tree
Showing 51 changed files with 1,498 additions and 704 deletions.
3 changes: 2 additions & 1 deletion app/build.gradle.kts
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,8 @@ dependencies {
implementation(projects.feature.mobile.home)
implementation(projects.feature.mobile.player)
implementation(projects.feature.mobile.preferences)
implementation(projects.feature.mobile.provider)
implementation(projects.feature.mobile.providerList)
implementation(projects.feature.mobile.providerInfo)
implementation(projects.feature.mobile.providerSettings)
implementation(projects.feature.mobile.recentlyWatched)
implementation(projects.feature.mobile.repository)
Expand Down
20 changes: 18 additions & 2 deletions app/src/main/kotlin/com/flixclusive/mobile/MobileAppNavigator.kt
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ package com.flixclusive.mobile

import androidx.navigation.NavController
import androidx.navigation.NavDestination
import com.flixclusive.core.ui.common.navigation.RepositorySearchScreenNavigator
import com.flixclusive.core.ui.common.navigation.UpdateDialogNavigator
import com.flixclusive.feature.mobile.about.destinations.AboutScreenDestination
import com.flixclusive.feature.mobile.film.FilmScreenNavigator
Expand All @@ -12,10 +13,11 @@ import com.flixclusive.feature.mobile.player.PlayerScreenNavigator
import com.flixclusive.feature.mobile.player.destinations.PlayerScreenDestination
import com.flixclusive.feature.mobile.preferences.PreferencesScreenNavigator
import com.flixclusive.feature.mobile.provider.ProvidersScreenNavigator
import com.flixclusive.feature.mobile.provider.info.ProviderInfoNavigator
import com.flixclusive.feature.mobile.provider.info.destinations.ProviderInfoScreenDestination
import com.flixclusive.feature.mobile.provider.settings.destinations.ProviderSettingsScreenDestination
import com.flixclusive.feature.mobile.recentlyWatched.destinations.RecentlyWatchedScreenDestination
import com.flixclusive.feature.mobile.repository.destinations.RepositoryScreenDestination
import com.flixclusive.feature.mobile.repository.search.RepositorySearchScreenNavigator
import com.flixclusive.feature.mobile.repository.search.destinations.RepositorySearchScreenDestination
import com.flixclusive.feature.mobile.search.SearchScreenNavigator
import com.flixclusive.feature.mobile.searchExpanded.destinations.SearchExpandedScreenDestination
Expand All @@ -42,7 +44,7 @@ internal class MobileAppNavigator(
private val navController: NavController,
private val closeApp: () -> Unit,
) : HomeNavigator, SearchScreenNavigator, PreferencesScreenNavigator, UpdateDialogNavigator, FilmScreenNavigator, SplashScreenNavigator, PlayerScreenNavigator, ProvidersScreenNavigator,
RepositorySearchScreenNavigator {
RepositorySearchScreenNavigator, ProviderInfoNavigator {

override fun goBack() {
navController.navigateUp()
Expand Down Expand Up @@ -151,4 +153,18 @@ internal class MobileAppNavigator(
RepositoryScreenDestination(repository = repository) within destination.navGraph()
)
}

override fun testProviders(providers: List<ProviderData>) {
// TODO("Not yet implemented")
}

override fun seeWhatsNew(providerData: ProviderData) {
// TODO("Not yet implemented")
}

override fun openProviderInfo(providerData: ProviderData) {
navController.navigateIfResumed(
ProviderInfoScreenDestination(providerData = providerData) within destination.navGraph()
)
}
}
8 changes: 5 additions & 3 deletions app/src/main/kotlin/com/flixclusive/mobile/MobileNavGraphs.kt
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,11 @@ import com.flixclusive.feature.mobile.home.destinations.HomeScreenDestination
import com.flixclusive.feature.mobile.player.destinations.PlayerScreenDestination
import com.flixclusive.feature.mobile.preferences.destinations.PreferencesScreenDestination
import com.flixclusive.feature.mobile.provider.destinations.ProvidersScreenDestination
import com.flixclusive.feature.mobile.provider.info.destinations.ProviderInfoScreenDestination
import com.flixclusive.feature.mobile.provider.settings.destinations.ProviderSettingsScreenDestination
import com.flixclusive.feature.mobile.recentlyWatched.destinations.RecentlyWatchedScreenDestination
import com.flixclusive.feature.mobile.repository.destinations.RepositoryScreenDestination
import com.flixclusive.feature.mobile.repository.search.destinations.RepositorySearchScreenDestination
import com.flixclusive.feature.mobile.search.destinations.SearchScreenDestination
import com.flixclusive.feature.mobile.searchExpanded.destinations.SearchExpandedScreenDestination
import com.flixclusive.feature.mobile.seeAll.destinations.SeeAllScreenDestination
Expand All @@ -17,9 +21,6 @@ import com.flixclusive.feature.mobile.update.destinations.UpdateDialogDestinatio
import com.flixclusive.feature.mobile.update.destinations.UpdateScreenDestination
import com.flixclusive.feature.mobile.watchlist.destinations.WatchlistScreenDestination
import com.flixclusive.feature.splashScreen.destinations.SplashScreenDestination
import com.flixclusive.feature.mobile.repository.destinations.RepositoryScreenDestination
import com.flixclusive.feature.mobile.provider.settings.destinations.ProviderSettingsScreenDestination
import com.flixclusive.feature.mobile.repository.search.destinations.RepositorySearchScreenDestination
import com.ramcosta.composedestinations.dynamic.routedIn
import com.ramcosta.composedestinations.spec.DestinationSpec
import com.ramcosta.composedestinations.spec.NavGraphSpec
Expand Down Expand Up @@ -64,6 +65,7 @@ internal object MobileNavGraphs {
ProvidersScreenDestination,
RepositorySearchScreenDestination,
RepositoryScreenDestination,
ProviderInfoScreenDestination,
ProviderSettingsScreenDestination,
).routedIn(this)
.associateBy { it.route }
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ import androidx.compose.ui.text.withStyle
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.flixclusive.core.theme.FlixclusiveTheme
import com.flixclusive.core.ui.common.util.DummyDataForPreview
import com.flixclusive.core.ui.common.util.onMediumEmphasis
import com.flixclusive.gradle.entities.Author
import com.flixclusive.gradle.entities.Language
Expand Down Expand Up @@ -152,21 +153,7 @@ fun ProviderUninstallNoticeDialog(
@Preview
@Composable
private fun ProviderUninstallNoticeDialogPreview() {
val providerData = ProviderData(
authors = listOf(Author("FLX")),
repositoryUrl = null,
buildUrl = null,
changelog = null,
changelogMedia = null,
versionName = "1.0.0",
versionCode = 10000,
description = "lorem ipsum lorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsum",
iconUrl = null,
language = Language.Multiple,
name = "123Movies",
providerType = ProviderType.All,
status = Status.Working
)
val providerData = DummyDataForPreview.getDummyProviderData()

FlixclusiveTheme {
Surface {
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
package com.flixclusive.core.ui.common.navigation

import com.flixclusive.gradle.entities.ProviderData

data class ProviderInfoScreenNavArgs(
val providerData: ProviderData
)
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
package com.flixclusive.core.ui.common.navigation

import com.flixclusive.gradle.entities.Repository

interface RepositorySearchScreenNavigator : GoBackAction {
fun openRepositoryScreen(repository: Repository)
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
package com.flixclusive.core.ui.common.util

import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import com.flixclusive.gradle.entities.Author
import com.flixclusive.gradle.entities.Language
import com.flixclusive.gradle.entities.ProviderData
import com.flixclusive.gradle.entities.ProviderType
import com.flixclusive.gradle.entities.Status

object DummyDataForPreview {
@Composable
fun getDummyProviderData() = remember {
ProviderData(
authors = List(5) { Author("FLX $it") },
repositoryUrl = "https://github.com/flixclusive/123Movies",
buildUrl = "https://raw.githubusercontent.com/Flixclusive/plugins-template/builds/updater.json",
changelog = """Test""",
versionName = "1.0.0",
versionCode = 10000,
description = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
iconUrl = null,
language = Language.Multiple,
name = "CineFlix",
providerType = ProviderType.All,
status = Status.Working
)
}
}
9 changes: 9 additions & 0 deletions core/ui/common/src/main/res/drawable/outlined_trash.xml
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="960"
android:viewportHeight="960">
<path
android:pathData="M292.31,820q-29.92,0 -51.12,-21.19Q220,777.61 220,747.69L220,240h-40v-60h180v-35.38h240L600,180h180v60h-40v507.69Q740,778 719,799q-21,21 -51.31,21L292.31,820ZM680,240L280,240v507.69q0,5.39 3.46,8.85t8.85,3.46h375.38q4.62,0 8.46,-3.85 3.85,-3.84 3.85,-8.46L680,240ZM376.16,680h59.99v-360h-59.99v360ZM523.85,680h59.99v-360h-59.99v360ZM280,240v520,-520Z"
android:fillColor="#e8eaed"/>
</vector>
4 changes: 2 additions & 2 deletions core/ui/common/src/main/res/drawable/provider_logo.xml
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,6 @@
android:viewportWidth="960"
android:viewportHeight="960">
<path
android:fillColor="#FFFFFF"
android:pathData="M352,840L200,840q-33,0 -56.5,-23.5T120,760v-152q48,0 84,-30.5t36,-77.5q0,-47 -36,-77.5T120,392v-152q0,-33 23.5,-56.5T200,160h160q0,-42 29,-71t71,-29q42,0 71,29t29,71h160q33,0 56.5,23.5T800,240v160q42,0 71,29t29,71q0,42 -29,71t-71,29v160q0,33 -23.5,56.5T720,840L568,840q0,-50 -31.5,-85T460,720q-45,0 -76.5,35T352,840ZM200,760h85q24,-66 77,-93t98,-27q45,0 98,27t77,93h85v-240h80q8,0 14,-6t6,-14q0,-8 -6,-14t-14,-6h-80v-240L480,240v-80q0,-8 -6,-14t-14,-6q-8,0 -14,6t-6,14v80L200,240v88q54,20 87,67t33,105q0,57 -33,104t-87,68v88ZM460,500Z"/>
android:pathData="M355.08,820L200,820q-24.92,0 -42.46,-17.54T140,760v-155.08q41.08,-5 70.54,-34.15Q240,541.61 240,500t-29.46,-70.77q-29.46,-29.15 -70.54,-34.15L140,240q0,-24.92 17.54,-42.46T200,180h160q5.39,-38.15 33.42,-62.92 28.04,-24.77 66.58,-24.77t66.58,24.77Q554.61,141.85 560,180h160q24.92,0 42.46,17.54T780,240v160q38.15,5.39 62.92,33.42 24.77,28.04 24.77,66.58t-24.77,66.58Q818.15,594.61 780,600v160q0,24.92 -17.54,42.46T720,820L564.92,820q-5.38,-43.08 -35.15,-71.54Q500,720 460,720t-69.77,28.46q-29.77,28.46 -35.15,71.54ZM200,760h108.46q20.54,-52.92 64.89,-76.46Q417.69,660 460,660t86.65,23.54Q591,707.08 611.54,760L720,760v-217.69h49.23q18.38,-2.31 28.42,-14.85 10.04,-12.54 10.04,-27.46 0,-14.92 -10.04,-27.46 -10.04,-12.54 -28.42,-14.85L720,457.69L720,240L502.31,240v-49.23q-2.31,-18.38 -14.85,-28.42 -12.54,-10.04 -27.46,-10.04 -14.92,0 -27.46,10.04 -12.54,10.04 -14.85,28.42L417.69,240L200,240v109.54q45.54,18.85 72.77,59.88Q300,450.46 300,500q0,48.92 -27.23,89.96Q245.54,631 200,650.46L200,760ZM460,500Z"
android:fillColor="#e8eaed"/>
</vector>
9 changes: 9 additions & 0 deletions core/ui/common/src/main/res/drawable/test.xml
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="960"
android:viewportHeight="960">
<path
android:pathData="M479.89,833.85q-70.27,0 -119.6,-48.36T310.96,667.5v-361.35h-1.73q-26.35,0 -44.71,-17.98 -18.37,-17.98 -18.37,-44.32v-54.62q0,-26.35 18.37,-44.71 18.36,-18.37 44.71,-18.37L650,126.15q26.71,0 45.28,18.37 18.57,18.36 18.57,44.71v54.62q0,26.34 -18.75,44.32T650,306.15h-1.35v372.89q-5,66.04 -53.66,110.42 -48.66,44.39 -115.1,44.39ZM309.23,269.23L650,269.23q10.77,0 18.85,-7.31 8.07,-7.3 8.07,-18.07v-54.62q0,-10.77 -8.07,-18.46 -8.08,-7.69 -18.85,-7.69L309.23,163.08q-10.77,0 -18.46,7.69 -7.69,7.69 -7.69,18.46v54.62q0,10.77 7.69,18.07 7.69,7.31 18.46,7.31ZM480.07,796.92q54.7,0 93.18,-37.3 38.48,-37.3 38.48,-92.12v-34.42L487.12,633.08v-36.93h124.61v-113.84L487.12,482.31v-36.93h124.61v-139.23L347.88,306.15v361.54q0,54.54 38.75,91.89 38.75,37.34 93.44,37.34ZM283.08,269.23v-106.15,106.15Z"
android:fillColor="#e8eaed"/>
</vector>
Original file line number Diff line number Diff line change
@@ -0,0 +1,131 @@
package com.flixclusive.core.ui.mobile.component.provider

import androidx.annotation.DrawableRes
import androidx.compose.animation.AnimatedContent
import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.CircularProgressIndicator
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.OutlinedButton
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import com.flixclusive.core.ui.common.util.onMediumEmphasis

@Composable
fun ButtonWithCircularProgressIndicator(
modifier: Modifier = Modifier,
onClick: () -> Unit,
@DrawableRes iconId: Int,
label: String,
isLoading: Boolean = false,
enabled: Boolean = true,
emphasize: Boolean = false,
indicatorSize: Dp = 20.dp,
contentPadding: PaddingValues = PaddingValues(vertical = 15.dp)
) {
if (emphasize) {
Button(
enabled = enabled,
onClick = onClick,
contentPadding = contentPadding,
shape = MaterialTheme.shapes.medium,
modifier = modifier,
) {
AnimatedContent(
targetState = isLoading,
label = ""
) { state ->
if (state) {
CircularProgressIndicator(
strokeWidth = 2.dp,
modifier = Modifier
.size(indicatorSize)
)
} else {
Row(
verticalAlignment = Alignment.CenterVertically
) {
Icon(
painter = painterResource(id = iconId),
contentDescription = label,
modifier = Modifier
.size(16.dp)
)

Text(
text = label,
style = MaterialTheme.typography.labelLarge.copy(
fontWeight = FontWeight.Medium
),
modifier = Modifier
.padding(start = 3.dp)
)
}

}
}
}
} else {
OutlinedButton(
enabled = enabled,
onClick = onClick,
colors = ButtonDefaults.outlinedButtonColors(
contentColor = MaterialTheme.colorScheme.onSurface.onMediumEmphasis(0.8F)
),
border = BorderStroke(
width = 1.dp,
color = MaterialTheme.colorScheme.onSurface.onMediumEmphasis(),
),
contentPadding = contentPadding,
shape = MaterialTheme.shapes.small,
modifier = modifier,
) {
AnimatedContent(
targetState = isLoading,
label = ""
) { state ->
if (state) {
CircularProgressIndicator(
strokeWidth = 2.dp,
modifier = Modifier
.size(indicatorSize)
)
} else {
Row(
verticalAlignment = Alignment.CenterVertically
) {
Icon(
painter = painterResource(id = iconId),
contentDescription = label,
modifier = Modifier
.size(16.dp)
)

Text(
text = label,
style = MaterialTheme.typography.labelLarge.copy(
fontWeight = FontWeight.Medium
),
modifier = Modifier
.padding(start = 3.dp)
)
}

}
}
}
}

}
Loading

0 comments on commit 856ea3f

Please sign in to comment.