mirror of
https://github.com/aniyomiorg/aniyomi.git
synced 2024-11-21 20:27:06 +03:00
feat(player): Preview subtitle styling with actual borders for androids ≤ 9 (#1184)
This commit is contained in:
Abdallah
GitHub
parent
d8327e872d
commit
67a5bccec4
1 changed files with 117 additions and 14 deletions
|
|
@ -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,8 +151,22 @@ 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)) {
|
||||
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),
|
||||
|
|
@ -80,4 +182,5 @@ fun SubtitlePreview(
|
|||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue