From 67a5bccec4d887fac998d616a9d1190da1837676 Mon Sep 17 00:00:00 2001 From: Abdallah <54363735+abdallahmehiz@users.noreply.github.com> Date: Mon, 30 Oct 2023 18:53:47 +0100 Subject: [PATCH] =?UTF-8?q?feat(player):=20Preview=20subtitle=20styling=20?= =?UTF-8?q?with=20actual=20borders=20for=20androids=20=E2=89=A4=209=20(#11?= =?UTF-8?q?84)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../sheets/subtitle/SubtitleSettingsSheet.kt | 131 ++++++++++++++++-- 1 file changed, 117 insertions(+), 14 deletions(-) diff --git a/app/src/main/java/eu/kanade/tachiyomi/ui/player/settings/sheets/subtitle/SubtitleSettingsSheet.kt b/app/src/main/java/eu/kanade/tachiyomi/ui/player/settings/sheets/subtitle/SubtitleSettingsSheet.kt index c5fde8ff1..c2c57d9c9 100644 --- a/app/src/main/java/eu/kanade/tachiyomi/ui/player/settings/sheets/subtitle/SubtitleSettingsSheet.kt +++ b/app/src/main/java/eu/kanade/tachiyomi/ui/player/settings/sheets/subtitle/SubtitleSettingsSheet.kt @@ -1,9 +1,16 @@ package eu.kanade.tachiyomi.ui.player.settings.sheets.subtitle +import android.graphics.Rect +import android.graphics.Typeface +import android.os.Build +import androidx.annotation.RequiresApi +import androidx.compose.foundation.Canvas import androidx.compose.foundation.background import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column +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.rememberScrollState import androidx.compose.foundation.verticalScroll @@ -13,13 +20,18 @@ import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color +import androidx.compose.ui.graphics.Paint import androidx.compose.ui.graphics.Shadow +import androidx.compose.ui.graphics.drawscope.drawIntoCanvas +import androidx.compose.ui.graphics.nativeCanvas +import androidx.compose.ui.graphics.toArgb import androidx.compose.ui.res.stringResource import androidx.compose.ui.text.TextStyle import androidx.compose.ui.text.font.FontFamily import androidx.compose.ui.text.font.FontStyle import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.text.style.TextAlign +import androidx.compose.ui.unit.dp import eu.kanade.presentation.components.TabbedDialog import eu.kanade.presentation.components.TabbedDialogPaddings import eu.kanade.tachiyomi.R @@ -55,6 +67,82 @@ fun SubtitleSettingsSheet( } } +@RequiresApi(Build.VERSION_CODES.P) +@Composable +fun OutLineText( + text: String, + outlineColor: Color = Color.Black, + textColor: Color = Color.White, + backgroundColor: Color = Color.Black, + isBold: Boolean = false, + isItalic: Boolean = false, +) { + val textPaintStroke = Paint().asFrameworkPaint().apply { + typeface = Typeface.create( + Typeface.SANS_SERIF, + if (isBold) FontWeight.Bold.weight else FontWeight.Normal.weight, + isItalic, + ) + isAntiAlias = true + style = android.graphics.Paint.Style.STROKE + textSize = 16f + color = outlineColor.toArgb() + strokeWidth = 2f + strokeMiter = 2f + strokeJoin = android.graphics.Paint.Join.ROUND + // change the text alignment from left to center (basically shift the anchor point of the text) + // keep in mind that this only affects horizontal alignment + // https://developer.android.com/reference/android/graphics/Paint.Align + textAlign = android.graphics.Paint.Align.CENTER + } + val textPaint = Paint().asFrameworkPaint().apply { + typeface = Typeface.create( + Typeface.SANS_SERIF, + if (isBold) FontWeight.Bold.weight else FontWeight.Normal.weight, + isItalic, + ) + isAntiAlias = true + style = android.graphics.Paint.Style.FILL + textSize = 16f + color = textColor.toArgb() + textAlign = android.graphics.Paint.Align.CENTER + } + Canvas(modifier = Modifier.fillMaxSize()) { + drawIntoCanvas { + it.nativeCanvas.drawRect( + Rect( + 0, + size.height.toInt(), + size.width.toInt(), + 0, + ), + Paint().asFrameworkPaint().apply { + style = android.graphics.Paint.Style.FILL + color = backgroundColor.toArgb() + }, + ) + // Considering that the canvas's top left corner is at (0,0), + // position the text at the center of the canvas, which is at (width/2), + // and place it in the third quarter of the canvas, aligning it with the top. + // Essentially, it will be at the bottom center. + // It's approximately centered, I guess. + it.nativeCanvas.drawText( + text, + size.width / 2, + (size.height * 3) / 4, + textPaintStroke, + ) + it.nativeCanvas.drawText( + text, + size.width / 2, + (size.height * 3) / 4, + textPaint, + ) + } + } +} + +@RequiresApi(Build.VERSION_CODES.P) @Composable fun SubtitlePreview( isBold: Boolean, @@ -63,21 +151,36 @@ fun SubtitlePreview( borderColor: Color, backgroundColor: Color, ) { - Box(modifier = Modifier.padding(vertical = MaterialTheme.padding.medium)) { + Box( + modifier = Modifier + .padding(vertical = MaterialTheme.padding.medium) + .height(32.dp), + ) { Column(modifier = Modifier.fillMaxWidth(0.8f).background(color = backgroundColor)) { - Text( - text = stringResource(R.string.player_subtitle_settings_example), - modifier = Modifier.align(Alignment.CenterHorizontally), - style = TextStyle( - fontFamily = FontFamily.SansSerif, - fontSize = MaterialTheme.typography.titleMedium.fontSize, - fontWeight = if (isBold) FontWeight.Bold else FontWeight.Normal, - fontStyle = if (isItalic) FontStyle.Italic else FontStyle.Normal, - shadow = Shadow(color = borderColor, blurRadius = 7.5f), - color = textColor, - textAlign = TextAlign.Center, - ), - ) + if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.P) { + OutLineText( + text = stringResource(R.string.player_subtitle_settings_example), + outlineColor = borderColor, + textColor = textColor, + isBold = isBold, + isItalic = isItalic, + backgroundColor = backgroundColor, + ) + } else { + Text( + text = stringResource(R.string.player_subtitle_settings_example), + modifier = Modifier.align(Alignment.CenterHorizontally), + style = TextStyle( + fontFamily = FontFamily.SansSerif, + fontSize = MaterialTheme.typography.titleMedium.fontSize, + fontWeight = if (isBold) FontWeight.Bold else FontWeight.Normal, + fontStyle = if (isItalic) FontStyle.Italic else FontStyle.Normal, + shadow = Shadow(color = borderColor, blurRadius = 7.5f), + color = textColor, + textAlign = TextAlign.Center, + ), + ) + } } } }