make center controll buttons feel more jucy

.idea/gradle.xml

@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
+  <component name="GradleMigrationSettings" migrationVersion="1" />
   <component name="GradleSettings">
     <option name="linkedExternalProjectsSettings">
       <GradleProjectSettings>

.idea/inspectionProfiles/Project_Default.xml

@@ -0,0 +1,41 @@
+<component name="InspectionProjectProfileManager">
+  <profile version="1.0">
+    <option name="myName" value="Project Default" />
+    <inspection_tool class="PreviewAnnotationInFunctionWithParameters" enabled="true" level="ERROR" enabled_by_default="true">
+      <option name="composableFile" value="true" />
+      <option name="previewFile" value="true" />
+    </inspection_tool>
+    <inspection_tool class="PreviewApiLevelMustBeValid" enabled="true" level="ERROR" enabled_by_default="true">
+      <option name="composableFile" value="true" />
+      <option name="previewFile" value="true" />
+    </inspection_tool>
+    <inspection_tool class="PreviewDimensionRespectsLimit" enabled="true" level="WARNING" enabled_by_default="true">
+      <option name="composableFile" value="true" />
+      <option name="previewFile" value="true" />
+    </inspection_tool>
+    <inspection_tool class="PreviewFontScaleMustBeGreaterThanZero" enabled="true" level="ERROR" enabled_by_default="true">
+      <option name="composableFile" value="true" />
+      <option name="previewFile" value="true" />
+    </inspection_tool>
+    <inspection_tool class="PreviewMultipleParameterProviders" enabled="true" level="ERROR" enabled_by_default="true">
+      <option name="composableFile" value="true" />
+      <option name="previewFile" value="true" />
+    </inspection_tool>
+    <inspection_tool class="PreviewMustBeTopLevelFunction" enabled="true" level="ERROR" enabled_by_default="true">
+      <option name="composableFile" value="true" />
+      <option name="previewFile" value="true" />
+    </inspection_tool>
+    <inspection_tool class="PreviewNeedsComposableAnnotation" enabled="true" level="ERROR" enabled_by_default="true">
+      <option name="composableFile" value="true" />
+      <option name="previewFile" value="true" />
+    </inspection_tool>
+    <inspection_tool class="PreviewNotSupportedInUnitTestFiles" enabled="true" level="ERROR" enabled_by_default="true">
+      <option name="composableFile" value="true" />
+      <option name="previewFile" value="true" />
+    </inspection_tool>
+    <inspection_tool class="PreviewPickerAnnotation" enabled="true" level="ERROR" enabled_by_default="true">
+      <option name="composableFile" value="true" />
+      <option name="previewFile" value="true" />
+    </inspection_tool>
+  </profile>
+</component>

app/src/main/java/net/newpipe/newplayer/PlayerView.kt

@@ -1,4 +0,0 @@
-package net.newpipe.newplayer
-
-class PlayerView {
-}

app/src/main/java/net/newpipe/newplayer/ui/PlayerUI.kt

@@ -4,19 +4,27 @@ 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.Column
+import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.defaultMinSize
 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.layout.size
+import androidx.compose.foundation.layout.width
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Fullscreen
+import androidx.compose.material.icons.filled.MoreVert
 import androidx.compose.material.icons.filled.PlayArrow
 import androidx.compose.material.icons.filled.SkipNext
 import androidx.compose.material.icons.filled.SkipPrevious
+import androidx.compose.material3.Button
+import androidx.compose.material3.ButtonDefaults
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
+import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Slider
 import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
@@ -28,19 +36,32 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.layout.layout
+import androidx.compose.ui.semantics.Role.Companion.Button
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
 import net.newpipe.newplayer.ui.theme.VideoPlayerTheme
+import net.newpipe.newplayer.ui.theme.video_player_onSurface
 
 @Composable
 fun PlayerUI() {
-
     Surface(
         modifier = Modifier
             .fillMaxSize()
             .background(Color.White)
     ) {
         Box() {
+            TopUI(
+                modifier = Modifier
+                    .align(Alignment.TopStart)
+                    .fillMaxWidth()
+                    .defaultMinSize(minHeight = 45.dp)
+                    .padding(top = 4.dp, start = 16.dp, end = 16.dp)
+            )
             CenterUI(modifier = Modifier.align(Alignment.Center))
             BottomUI(
                 modifier = Modifier
@@ -50,10 +71,42 @@ fun PlayerUI() {
                     .fillMaxWidth()
             )
         }
-        Text("hello gurken")
     }
 }
 
+@Composable
+private fun TopUI(modifier: Modifier) {
+    Row(
+        modifier = modifier,
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.SpaceBetween,
+    ) {
+        Column(horizontalAlignment = Alignment.Start, modifier = Modifier.weight(1F)) {
+            Text("The Title", fontSize = 15.sp, fontWeight = FontWeight.Bold)
+            Text(
+                "The Channel Title LONG LONG",
+                fontSize = 12.sp,
+
+                )
+        }
+        Text(
+            "720p", fontWeight = FontWeight.Bold, modifier = Modifier
+                .padding(start = 6.dp, end = 6.dp)
+        )
+        Text(
+            "1x", fontWeight = FontWeight.Bold, modifier = Modifier
+                .padding(start = 6.dp, end = 6.dp)
+        )
+        IconButton(onClick = { /*TODO*/ }) {
+            Icon(
+                imageVector = Icons.Filled.MoreVert,
+                contentDescription = "More settings"
+            )
+        }
+    }
+}
+
+
 @Composable
 private fun CenterUI(modifier: Modifier) {
     Row(
@@ -61,36 +114,54 @@ private fun CenterUI(modifier: Modifier) {
         horizontalArrangement = Arrangement.SpaceBetween,
         modifier = modifier
     ) {
-        IconButton(
-            onClick = { /*TODO*/ }, modifier = Modifier
-                .size(40.dp)
-                .padding(end = 10.dp)
+        CenterControllButton(
+            buttonModifier = Modifier.size(80.dp),
+            iconModifier = Modifier.size(40.dp),
+            icon = Icons.Filled.SkipPrevious,
+            contentDescriptoion = "Previous Stream",
+            onClick = {}
+        )
+
+        CenterControllButton(
+            buttonModifier = Modifier.size(80.dp),
+            iconModifier = Modifier.size(60.dp),
+            icon = Icons.Filled.PlayArrow,
+            contentDescriptoion = "Previous Stream",
+            onClick = {}
+        )
+        CenterControllButton(
+            buttonModifier = Modifier.size(80.dp),
+            iconModifier = Modifier.size(40.dp),
+            icon = Icons.Filled.SkipNext,
+            contentDescriptoion = "Next Stream",
+            onClick = {}
+        )
+    }
+}
+
+@Composable
+private fun CenterControllButton(
+    buttonModifier: Modifier,
+    iconModifier: Modifier,
+    icon: ImageVector,
+    contentDescriptoion: String?,
+    onClick: () -> Unit
+) {
+    Button(
+        onClick = onClick,
+        contentPadding = PaddingValues(0.dp),
+        colors = ButtonDefaults.buttonColors(
+            containerColor = Color.Transparent,
+            contentColor = video_player_onSurface
+        ),
+        modifier = buttonModifier
     ) {
         Icon(
-                imageVector = Icons.Filled.SkipPrevious,
-                modifier = Modifier.fillMaxSize(),
-                contentDescription = "Previous Stream"
+            imageVector = icon,
+            modifier = iconModifier,
+            contentDescription = contentDescriptoion
         )
     }
-        IconButton(onClick = { /*TODO*/ }, modifier = Modifier.size(60.dp)) {
-            Icon(
-                imageVector = Icons.Filled.PlayArrow,
-                modifier = Modifier.fillMaxSize(),
-                contentDescription = "Pause"
-            )
-        }
-        IconButton(
-            onClick = { /*TODO*/ }, modifier = Modifier
-                .size(40.dp)
-                .padding(start = 10.dp)
-        ) {
-            Icon(
-                imageVector = Icons.Filled.SkipNext,
-                modifier = Modifier.fillMaxSize(),
-                contentDescription = "Next Stream"
-            )
-        }
-    }
 }
 
 @Composable