create player bottom ui

This commit is contained in:
Christian Schabesberger 2024-07-02 17:40:49 +02:00
parent 72b62e6699
commit 8012d1aa16
6 changed files with 139 additions and 37 deletions

View File

@ -51,6 +51,8 @@ dependencies {
implementation(libs.androidx.constraintlayout)
implementation(libs.androidx.activity.compose)
implementation(libs.androidx.material3)
implementation(libs.androidx.ui.tooling)
implementation(libs.androidx.material.icons.extended.android)
testImplementation(libs.junit)
androidTestImplementation(libs.androidx.junit)
androidTestImplementation(libs.androidx.espresso.core)

View File

@ -5,12 +5,11 @@ import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.compose.material3.MaterialTheme
import androidx.compose.ui.platform.ComposeView
import androidx.compose.ui.platform.ViewCompositionStrategy
import androidx.fragment.app.Fragment
import androidx.compose.material3.Text
import net.newpipe.newplayer.ui.PlayerUI
import net.newpipe.newplayer.ui.theme.VideoPlayerTheme
class PlayerFragment : Fragment() {
@ -25,7 +24,9 @@ class PlayerFragment : Fragment() {
composeView.apply {
setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed)
setContent {
PlayerUI(activity as Activity)
VideoPlayerTheme {
PlayerUI()
}
}
}
return view

View File

@ -2,47 +2,94 @@ package net.newpipe.newplayer.ui
import android.app.Activity
import android.content.pm.ActivityInfo
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.defaultMinSize
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.Button
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Fullscreen
import androidx.compose.material.icons.filled.ShoppingCart
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.Slider
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import net.newpipe.newplayer.ui.theme.AppTheme
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.tooling.preview.PreviewScreenSizes
import androidx.compose.ui.unit.dp
import net.newpipe.newplayer.ui.theme.VideoPlayerTheme
@Composable
fun PlayerUI(activity: Activity) {
var isFullscreen = rememberSaveable { mutableStateOf(false) }
fun PlayerUI() {
if (isFullscreen.value) {
Surface(
modifier = Modifier
.fillMaxSize()
.background(Color.White)
) {
Box() {
BottomUI(modifier = Modifier
.align(Alignment.BottomStart)
.padding(start = 16.dp, end = 16.dp)
.defaultMinSize(minHeight = 40.dp)
.fillMaxWidth())
}
Text("hello gurken")
}
}
@Composable
private fun CenterUI(modifier: Modifier) {
}
@Composable
private fun BottomUI(modifier: Modifier) {
var isFullscreen: Boolean by rememberSaveable { mutableStateOf(false) }
if (isFullscreen) {
LockScreenOrientation(orientation = ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE)
}
VideoPlayerTheme() {
Box(
modifier = Modifier
.fillMaxSize()
.background(Color.Black)
Row(
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.SpaceBetween,
modifier = modifier
) {
Text(
"hello gurken",
color = Color.White
Text("06:45")
Slider(value = 0.4F, onValueChange = {}, modifier = Modifier.weight(1F))
Text("09:40")
IconButton(onClick = { isFullscreen = !isFullscreen }) {
Icon(
imageVector = Icons.Filled.Fullscreen,
contentDescription = "Fullscreen"
)
Button(onClick = { isFullscreen.value = !isFullscreen.value }) {
Text("Switch to fullscreen")
}
}
}
}
@Composable
private fun ViewInFullScreen() {
LockScreenOrientation(orientation = ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE)
}
@Preview
@Composable
fun PlayerUIPreview() {
VideoPlayerTheme {
PlayerUI()
}
}

View File

@ -2,10 +2,34 @@ package net.newpipe.newplayer.ui.theme
import androidx.compose.ui.graphics.Color
val Purple80 = Color(0xFFD0BCFF)
val PurpleGrey80 = Color(0xFFCCC2DC)
val Pink80 = Color(0xFFEFB8C8)
val video_player_primary = Color(0xFFE53935)
val video_player_onPrimary = Color(0xFF452B00)
val video_player_primaryContainer = Color(0xFF633F00)
val video_player_onPrimaryContainer = Color(0xFFFFDDB3)
val video_player_secondary = Color(0xFFDDC2A1)
val video_player_onSecondary = Color(0xFF3E2D16)
val video_player_secondaryContainer = Color(0xFF56442A)
val video_player_onSecondaryContainer = Color(0xFFFBDEBC)
val video_player_tertiary = Color(0xFFB8CEA1)
val video_player_onTertiary = Color(0xFF243515)
val video_player_tertiaryContainer = Color(0xFF3A4C2A)
val video_player_onTertiaryContainer = Color(0xFFD4EABB)
val video_player_error = Color(0xFFFFB4AB)
val video_player_errorContainer = Color(0xFF93000A)
val video_player_onError = Color(0xFF690005)
val video_player_onErrorContainer = Color(0xFFFFDAD6)
val video_player_background = Color(0xFF1F1B16)
val video_player_onBackground = Color(0xFFEAE1D9)
val video_player_surface = Color(0xFF000000)
val video_player_onSurface = Color(0xFFEAE1D9)
val video_player_surfaceVariant = Color(0xFF4F4539)
val video_player_onSurfaceVariant = Color(0xFFD3C4B4)
val video_player_outline = Color(0xFF9C8F80)
val video_player_inverseOnSurface = Color(0xFF1F1B16)
val video_player_inverseSurface = Color(0xFFEAE1D9)
val video_player_inversePrimary = Color(0xFF825500)
val video_player_shadow = Color(0xFF000000)
val video_player_surfaceTint = Color(0xFFFFB951)
val video_player_outlineVariant = Color(0xFF4F4539)
val video_player_scrim = Color(0xFF000000)
val Purple40 = Color(0xFF6650a4)
val PurpleGrey40 = Color(0xFF625b71)
val Pink40 = Color(0xFF7D5260)

View File

@ -6,12 +6,36 @@ import androidx.compose.material3.darkColorScheme
import androidx.compose.runtime.Composable
import androidx.compose.ui.graphics.Color
private val DarkColorScheme = darkColorScheme(
primary = Purple80,
secondary = PurpleGrey80,
tertiary = Pink80,
onBackground = Color(0xFF1C1B1F),
background = Color.Black,
private val VideoPlayerColorScheme = darkColorScheme(
primary = video_player_primary,
onPrimary = video_player_onPrimary,
primaryContainer = video_player_primaryContainer,
onPrimaryContainer = video_player_onPrimaryContainer,
secondary = video_player_secondary,
onSecondary = video_player_onSecondary,
secondaryContainer = video_player_secondaryContainer,
onSecondaryContainer = video_player_onSecondaryContainer,
tertiary = video_player_tertiary,
onTertiary = video_player_onTertiary,
tertiaryContainer = video_player_tertiaryContainer,
onTertiaryContainer = video_player_onTertiaryContainer,
error = video_player_error,
errorContainer = video_player_errorContainer,
onError = video_player_onError,
onErrorContainer = video_player_onErrorContainer,
background = video_player_background,
onBackground = video_player_onBackground,
surface = video_player_surface,
onSurface = video_player_onSurface,
surfaceVariant = video_player_surfaceVariant,
onSurfaceVariant = video_player_onSurfaceVariant,
outline = video_player_outline,
inverseOnSurface = video_player_inverseOnSurface,
inverseSurface = video_player_inverseSurface,
inversePrimary = video_player_inversePrimary,
surfaceTint = video_player_surfaceTint,
outlineVariant = video_player_outlineVariant,
scrim = video_player_scrim,
)
@Composable
@ -19,7 +43,7 @@ fun VideoPlayerTheme(
content: @Composable () -> Unit
) {
MaterialTheme(
colorScheme = DarkColorScheme,
colorScheme = VideoPlayerColorScheme,
typography = Typography,
content = content
)

View File

@ -11,6 +11,8 @@ activity = "1.9.0"
constraintlayout = "2.1.4"
activityCompose = "1.9.0"
material3 = "1.2.1"
uiTooling = "1.6.8"
materialIconsExtendedAndroid = "1.7.0-beta04"
[libraries]
androidx-core-ktx = { group = "androidx.core", name = "core-ktx", version.ref = "coreKtx" }
@ -23,6 +25,8 @@ androidx-activity = { group = "androidx.activity", name = "activity", version.re
androidx-constraintlayout = { group = "androidx.constraintlayout", name = "constraintlayout", version.ref = "constraintlayout" }
androidx-activity-compose = { group = "androidx.activity", name = "activity-compose", version.ref = "activityCompose" }
androidx-material3 = { group = "androidx.compose.material3", name = "material3", version.ref = "material3" }
androidx-ui-tooling = { group = "androidx.compose.ui", name = "ui-tooling", version.ref = "uiTooling" }
androidx-material-icons-extended-android = { group = "androidx.compose.material", name = "material-icons-extended-android", version.ref = "materialIconsExtendedAndroid" }
[plugins]
android-application = { id = "com.android.application", version.ref = "agp" }