Add basic UI to effect demo app

Added a basic UI to the effect demo app, including a PlayerView, buttons to choose preset input and choose local file, and a button to apply effects. The buttons are currently not implemented, and the app will show a snackbar message when they are clicked.

PiperOrigin-RevId: 693751272

demos/effect/build.gradle

@@ -69,11 +69,13 @@ dependencies {
     def composeBom = platform('androidx.compose:compose-bom:2024.10.00')
     implementation composeBom
 
-    implementation 'androidx.activity:activity-compose:1.9.3'
-    implementation 'androidx.compose.foundation:foundation-android:1.7.4'
-    implementation 'androidx.compose.material3:material3-android:1.3.0'
+    implementation 'androidx.activity:activity-compose'
+    implementation 'androidx.compose.foundation:foundation'
+    implementation 'androidx.compose.material3:material3'
     implementation 'com.google.android.material:material:' + androidxMaterialVersion
 
+    implementation project(modulePrefix + 'lib-ui')
+
     // For detecting and debugging leaks only. LeakCanary is not needed for demo app to work.
     debugImplementation 'com.squareup.leakcanary:leakcanary-android:' + leakCanaryVersion
 }

demos/effect/src/main/java/androidx/media3/demo/effect/EffectActivity.kt

@@ -20,28 +20,96 @@ import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.material3.Surface
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.Button
+import androidx.compose.material3.Scaffold
+import androidx.compose.material3.SnackbarHost
+import androidx.compose.material3.SnackbarHostState
 import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.res.dimensionResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.viewinterop.AndroidView
+import androidx.media3.ui.PlayerView
+import kotlinx.coroutines.launch
 
 class EffectActivity : ComponentActivity() {
 
   override fun onCreate(savedInstanceState: Bundle?) {
     super.onCreate(savedInstanceState)
-    setContent {
-      Surface(modifier = Modifier.fillMaxSize()) {
-        Column(
-          modifier = Modifier.fillMaxWidth(),
-          verticalArrangement = Arrangement.Center,
-          horizontalAlignment = Alignment.CenterHorizontally,
-        ) {
-          Text(text = "Effect demo", textAlign = TextAlign.Center)
-        }
+    setContent { EffectDemo() }
+  }
+
+  @Composable
+  fun EffectDemo() {
+    val snackbarHostState = remember { SnackbarHostState() }
+    val coroutineScope = rememberCoroutineScope()
+
+    Scaffold(
+      modifier = Modifier.fillMaxSize(),
+      snackbarHost = { SnackbarHost(hostState = snackbarHostState) },
+    ) { paddingValues ->
+      Column(
+        modifier = Modifier.fillMaxWidth().padding(paddingValues),
+        verticalArrangement = Arrangement.Top,
+        horizontalAlignment = Alignment.CenterHorizontally,
+      ) {
+        InputChooser(
+          onButtonClick = {
+            coroutineScope.launch {
+              snackbarHostState.showSnackbar(message = "Button is not yet implemented.")
+            }
+          }
+        )
+        PlayerScreen()
+        Effects(
+          onButtonClick = {
+            coroutineScope.launch {
+              snackbarHostState.showSnackbar(message = "Button is not yet implemented.")
+            }
+          }
+        )
       }
     }
   }
+
+  @Composable
+  fun InputChooser(onButtonClick: () -> Unit) {
+    Row(
+      modifier = Modifier.padding(vertical = dimensionResource(id = R.dimen.small_padding)),
+      horizontalArrangement = Arrangement.spacedBy(dimensionResource(id = R.dimen.small_padding)),
+    ) {
+      Button(onClick = onButtonClick) {
+        Text(text = stringResource(id = R.string.choose_preset_input))
+      }
+      Button(onClick = onButtonClick) {
+        Text(text = stringResource(id = R.string.choose_local_file))
+      }
+    }
+  }
+
+  @Composable
+  fun PlayerScreen() {
+    val context = LocalContext.current
+    AndroidView(
+      factory = { PlayerView(context).apply {} },
+      modifier =
+        Modifier.height(dimensionResource(id = R.dimen.android_view_height))
+          .padding(all = dimensionResource(id = R.dimen.small_padding)),
+    )
+  }
+
+  @Composable
+  fun Effects(onButtonClick: () -> Unit) {
+    Button(onClick = onButtonClick) { Text(text = stringResource(id = R.string.apply_effects)) }
+  }
 }

demos/effect/src/main/res/values/dimens.xml

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright 2024 The Android Open Source Project
+
+     Licensed under the Apache License, Version 2.0 (the "License");
+     you may not use this file except in compliance with the License.
+     You may obtain a copy of the License at
+
+          https://www.apache.org/licenses/LICENSE-2.0
+
+     Unless required by applicable law or agreed to in writing, software
+     distributed under the License is distributed on an "AS IS" BASIS,
+     WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     See the License for the specific language governing permissions and
+     limitations under the License.
+-->
+<resources>
+  <dimen name="small_padding">8dp</dimen>
+  <dimen name="android_view_height">256dp</dimen>
+</resources>

demos/effect/src/main/res/values/strings.xml

@@ -15,4 +15,8 @@
 -->
 <resources>
   <string name="app_name">Effect Demo</string>
+  <string name="choose_preset_input">Choose preset input</string>
+  <string name="choose_local_file">Choose local file</string>
+  <string name="apply_effects">Apply effects</string>
+  <string name="ok">OK</string>
 </resources>