feat(player): Preview subtitle styling with actual borders for androids ≤ 9 (#1184)

This commit is contained in:
Abdallah 2023-10-30 18:53:47 +01:00 committed by GitHub
parent d8327e872d
commit 67a5bccec4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -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,
),
)
}
}
}
}