komikku/app/src/main/java/eu/kanade/presentation/browse/ExtensionDetailsScreen.kt
Jery 3d9dd9d7b1
feat(incognito): add animated incognito mode indicator and icon (#899)
* Add indicator for source incognito mode

Adds an indicator to the manga info header to show if a source is running in incognito mode.
Also moves the source incognito check logic to `SourceExtensions`.

(cherry picked from commit 5e547efda51cdeaa7bc71198b932c8ac9aecc312)

* Replaced incognito icon with animated glasses_with_hat icon.

This commit introduces an animated vector drawable for the incognito mode icon and updates the related icons in the app.

- Adds `anim_incognito.xml`, a new animated vector drawable for incognito mode.
- Adds `ic_glasses_with_hat_24dp.xml`, a new icon for incognito mode.
- Updates the incognito mode icon in the following places:
    - MoreScreen
    - ExtensionDetailsScreen
    - App notification
    - Manga info header
- Updates `SwitchPreferenceWidget` and `TextPreferenceWidget` to accept any type of icons.

(cherry picked from commit 2a28673e078ff15fe0a7c2a030ffc6ce6cbe6b31)

* move incognito icon

* issue: Use stringResource for contentDescription to support localization

* Wrap the ImageVector.vectorResource call in remember to avoid inflating the drawable on every recomposition.

---------

Co-authored-by: Cuong-Tran <cuongtran.tm@gmail.com>
2025-05-11 02:38:17 +07:00

498 lines
18 KiB
Kotlin

package eu.kanade.presentation.browse
import android.content.Intent
import android.net.Uri
import android.provider.Settings
import android.util.DisplayMetrics
import androidx.compose.animation.graphics.res.animatedVectorResource
import androidx.compose.animation.graphics.res.rememberAnimatedVectorPainter
import androidx.compose.animation.graphics.vector.AnimatedImageVector
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.lazy.items
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.automirrored.outlined.Launch
import androidx.compose.material.icons.outlined.Public
import androidx.compose.material.icons.outlined.Settings
import androidx.compose.material3.AlertDialog
import androidx.compose.material3.Button
import androidx.compose.material3.HorizontalDivider
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.OutlinedButton
import androidx.compose.material3.Switch
import androidx.compose.material3.Text
import androidx.compose.material3.TextButton
import androidx.compose.material3.VerticalDivider
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.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.platform.LocalUriHandler
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import eu.kanade.domain.extension.interactor.ExtensionSourceItem
import eu.kanade.presentation.browse.components.ExtensionIcon
import eu.kanade.presentation.components.AppBar
import eu.kanade.presentation.components.AppBarActions
import eu.kanade.presentation.components.WarningBanner
import eu.kanade.presentation.more.settings.widget.TextPreferenceWidget
import eu.kanade.presentation.more.settings.widget.TrailingWidgetBuffer
import eu.kanade.tachiyomi.R
import eu.kanade.tachiyomi.extension.model.Extension
import eu.kanade.tachiyomi.source.ConfigurableSource
import eu.kanade.tachiyomi.ui.browse.extension.details.ExtensionDetailsScreenModel
import eu.kanade.tachiyomi.util.system.LocaleHelper
import eu.kanade.tachiyomi.util.system.copyToClipboard
import kotlinx.collections.immutable.ImmutableList
import kotlinx.collections.immutable.persistentListOf
import tachiyomi.i18n.MR
import tachiyomi.i18n.sy.SYMR
import tachiyomi.presentation.core.components.ScrollbarLazyColumn
import tachiyomi.presentation.core.components.material.Scaffold
import tachiyomi.presentation.core.components.material.padding
import tachiyomi.presentation.core.i18n.stringResource
import tachiyomi.presentation.core.screens.EmptyScreen
@Composable
fun ExtensionDetailsScreen(
navigateUp: () -> Unit,
state: ExtensionDetailsScreenModel.State,
onClickSourcePreferences: (sourceId: Long) -> Unit,
// KMK -->
onOpenWebView: (() -> Unit)?,
// KMK <--
onClickEnableAll: () -> Unit,
onClickDisableAll: () -> Unit,
onClickClearCookies: () -> Unit,
onClickUninstall: () -> Unit,
onClickSource: (sourceId: Long) -> Unit,
onClickIncognito: (Boolean) -> Unit,
) {
val uriHandler = LocalUriHandler.current
val url = remember(state.extension) {
val regex = """https://raw.githubusercontent.com/(.+?)/(.+?)/.+""".toRegex()
regex.find(state.extension?.repoUrl.orEmpty())
?.let {
val (user, repo) = it.destructured
"https://github.com/$user/$repo"
}
?: state.extension?.repoUrl
}
Scaffold(
topBar = { scrollBehavior ->
AppBar(
title = stringResource(MR.strings.label_extension_info),
navigateUp = navigateUp,
actions = {
AppBarActions(
actions = persistentListOf<AppBar.AppBarAction>().builder()
.apply {
if (onOpenWebView != null) {
add(
AppBar.Action(
title = stringResource(MR.strings.action_open_in_web_view),
icon = Icons.Outlined.Public,
onClick = onOpenWebView,
),
)
}
if (url != null) {
add(
AppBar.Action(
title = stringResource(MR.strings.action_open_repo),
icon = Icons.AutoMirrored.Outlined.Launch,
onClick = {
uriHandler.openUri(url)
},
),
)
}
addAll(
listOf(
AppBar.OverflowAction(
title = stringResource(MR.strings.action_enable_all),
onClick = onClickEnableAll,
),
AppBar.OverflowAction(
title = stringResource(MR.strings.action_disable_all),
onClick = onClickDisableAll,
),
AppBar.OverflowAction(
title = stringResource(MR.strings.pref_clear_cookies),
onClick = onClickClearCookies,
),
),
)
}
.build(),
)
},
scrollBehavior = scrollBehavior,
)
},
) { paddingValues ->
if (state.extension == null) {
EmptyScreen(
MR.strings.empty_screen,
modifier = Modifier.padding(paddingValues),
)
return@Scaffold
}
ExtensionDetails(
contentPadding = paddingValues,
extension = state.extension,
sources = state.sources,
incognitoMode = state.isIncognito,
onClickSourcePreferences = onClickSourcePreferences,
onClickUninstall = onClickUninstall,
onClickSource = onClickSource,
onClickIncognito = onClickIncognito,
)
}
}
@Composable
private fun ExtensionDetails(
contentPadding: PaddingValues,
extension: Extension.Installed,
sources: ImmutableList<ExtensionSourceItem>,
incognitoMode: Boolean,
onClickSourcePreferences: (sourceId: Long) -> Unit,
onClickUninstall: () -> Unit,
onClickSource: (sourceId: Long) -> Unit,
onClickIncognito: (Boolean) -> Unit,
) {
val context = LocalContext.current
var showNsfwWarning by remember { mutableStateOf(false) }
ScrollbarLazyColumn(
contentPadding = contentPadding,
) {
// SY -->
if (extension.isRedundant) {
item {
WarningBanner(SYMR.strings.redundant_extension_message)
}
}
// SY <--
if (extension.isObsolete) {
item {
WarningBanner(MR.strings.obsolete_extension_message)
}
}
item {
DetailsHeader(
extension = extension,
extIncognitoMode = incognitoMode,
onClickUninstall = onClickUninstall,
onClickAppInfo = {
Intent(Settings.ACTION_APPLICATION_DETAILS_SETTINGS).apply {
data = Uri.fromParts("package", extension.pkgName, null)
context.startActivity(this)
}
Unit
}.takeIf { extension.isShared },
onClickAgeRating = {
showNsfwWarning = true
},
onExtIncognitoChange = onClickIncognito,
)
}
items(
items = sources,
key = { "extension-details-${it.source.id}" },
) { source ->
SourceSwitchPreference(
modifier = Modifier.animateItem(),
source = source,
onClickSourcePreferences = onClickSourcePreferences,
onClickSource = onClickSource,
)
}
}
if (showNsfwWarning) {
NsfwWarningDialog(
onClickConfirm = {
showNsfwWarning = false
},
)
}
}
@Composable
private fun DetailsHeader(
extension: Extension,
extIncognitoMode: Boolean,
onClickAgeRating: () -> Unit,
onClickUninstall: () -> Unit,
onClickAppInfo: (() -> Unit)?,
onExtIncognitoChange: (Boolean) -> Unit,
) {
val context = LocalContext.current
Column {
Column(
modifier = Modifier
.fillMaxWidth()
.padding(horizontal = MaterialTheme.padding.medium)
.padding(
top = MaterialTheme.padding.medium,
bottom = MaterialTheme.padding.small,
)
.clickable {
val extDebugInfo = buildString {
append(
"""
Extension name: ${extension.name} (lang: ${extension.lang}; package: ${extension.pkgName})
Extension version: ${extension.versionName} (lib: ${extension.libVersion}; version code: ${extension.versionCode})
NSFW: ${extension.isNsfw}
""".trimIndent(),
)
if (extension is Extension.Installed) {
append("\n\n")
append(
"""
Update available: ${extension.hasUpdate}
Obsolete: ${extension.isObsolete}
Shared: ${extension.isShared}
Repository: ${extension.repoUrl}
""".trimIndent(),
)
}
}
context.copyToClipboard("Extension Debug information", extDebugInfo)
},
horizontalAlignment = Alignment.CenterHorizontally,
) {
ExtensionIcon(
modifier = Modifier
.size(112.dp),
extension = extension,
density = DisplayMetrics.DENSITY_XXXHIGH,
)
Text(
text = extension.name,
style = MaterialTheme.typography.headlineSmall,
textAlign = TextAlign.Center,
)
val strippedPkgName = extension.pkgName.substringAfter("eu.kanade.tachiyomi.extension.")
Text(
text = strippedPkgName,
style = MaterialTheme.typography.bodySmall,
)
}
Row(
modifier = Modifier
.fillMaxWidth()
.padding(
horizontal = MaterialTheme.padding.extraLarge,
vertical = MaterialTheme.padding.small,
),
horizontalArrangement = Arrangement.SpaceEvenly,
verticalAlignment = Alignment.CenterVertically,
) {
InfoText(
modifier = Modifier.weight(1f),
primaryText = extension.versionName,
secondaryText = stringResource(MR.strings.ext_info_version),
)
InfoDivider()
InfoText(
modifier = Modifier.weight(if (extension.isNsfw) 1.5f else 1f),
primaryText = LocaleHelper.getSourceDisplayName(extension.lang, context),
secondaryText = stringResource(MR.strings.ext_info_language),
)
if (extension.isNsfw) {
InfoDivider()
InfoText(
modifier = Modifier.weight(1f),
primaryText = stringResource(MR.strings.ext_nsfw_short),
primaryTextStyle = MaterialTheme.typography.bodyLarge.copy(
color = MaterialTheme.colorScheme.error,
fontWeight = FontWeight.Medium,
),
secondaryText = stringResource(MR.strings.ext_info_age_rating),
onClick = onClickAgeRating,
)
}
}
Row(
modifier = Modifier
.padding(horizontal = MaterialTheme.padding.medium)
.padding(top = MaterialTheme.padding.small),
horizontalArrangement = Arrangement.spacedBy(MaterialTheme.padding.medium),
) {
OutlinedButton(
modifier = Modifier.weight(1f),
onClick = onClickUninstall,
) {
Text(stringResource(MR.strings.ext_uninstall))
}
if (onClickAppInfo != null) {
Button(
modifier = Modifier.weight(1f),
onClick = onClickAppInfo,
) {
Text(
text = stringResource(MR.strings.ext_app_info),
color = MaterialTheme.colorScheme.onPrimary,
)
}
}
}
TextPreferenceWidget(
modifier = Modifier.padding(horizontal = MaterialTheme.padding.small),
title = stringResource(MR.strings.pref_incognito_mode),
subtitle = stringResource(MR.strings.pref_incognito_mode_extension_summary),
// KMK -->
icon = rememberAnimatedVectorPainter(
AnimatedImageVector.animatedVectorResource(R.drawable.anim_incognito),
extIncognitoMode,
),
// KMK <--
widget = {
Row(
verticalAlignment = Alignment.CenterVertically,
) {
Switch(
checked = extIncognitoMode,
onCheckedChange = onExtIncognitoChange,
modifier = Modifier.padding(start = TrailingWidgetBuffer),
)
}
},
)
HorizontalDivider()
}
}
@Composable
private fun InfoText(
primaryText: String,
secondaryText: String,
modifier: Modifier = Modifier,
primaryTextStyle: TextStyle = MaterialTheme.typography.bodyLarge,
onClick: (() -> Unit)? = null,
) {
val clickableModifier = if (onClick != null) {
Modifier.clickable(interactionSource = null, indication = null, onClick = onClick)
} else {
Modifier
}
Column(
modifier = modifier.then(clickableModifier),
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center,
) {
Text(
text = primaryText,
textAlign = TextAlign.Center,
style = primaryTextStyle,
)
Text(
text = secondaryText + if (onClick != null) "" else "",
textAlign = TextAlign.Center,
style = MaterialTheme.typography.bodyMedium,
color = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.5f),
)
}
}
@Composable
private fun InfoDivider() {
VerticalDivider(
modifier = Modifier.height(20.dp),
)
}
@Composable
private fun SourceSwitchPreference(
source: ExtensionSourceItem,
onClickSourcePreferences: (sourceId: Long) -> Unit,
onClickSource: (sourceId: Long) -> Unit,
modifier: Modifier = Modifier,
) {
val context = LocalContext.current
TextPreferenceWidget(
modifier = modifier,
title = if (source.labelAsName) {
source.source.toString()
} else {
LocaleHelper.getSourceDisplayName(source.source.lang, context)
},
widget = {
Row(
verticalAlignment = Alignment.CenterVertically,
) {
if (source.source is ConfigurableSource) {
IconButton(onClick = { onClickSourcePreferences(source.source.id) }) {
Icon(
imageVector = Icons.Outlined.Settings,
contentDescription = stringResource(MR.strings.label_settings),
tint = MaterialTheme.colorScheme.onSurface,
)
}
}
Switch(
checked = source.enabled,
onCheckedChange = null,
modifier = Modifier.padding(start = TrailingWidgetBuffer),
)
}
},
onPreferenceClick = { onClickSource(source.source.id) },
)
}
@Composable
private fun NsfwWarningDialog(
onClickConfirm: () -> Unit,
) {
AlertDialog(
text = {
Text(text = stringResource(MR.strings.ext_nsfw_warning))
},
confirmButton = {
TextButton(onClick = onClickConfirm) {
Text(text = stringResource(MR.strings.action_ok))
}
},
onDismissRequest = onClickConfirm,
)
}