|
| 1 | +/* |
| 2 | + * Copyright 2025 The Android Open Source Project |
| 3 | + * |
| 4 | + * Licensed under the Apache License, Version 2.0 (the "License"); |
| 5 | + * you may not use this file except in compliance with the License. |
| 6 | + * You may obtain a copy of the License at |
| 7 | + * |
| 8 | + * https://www.apache.org/licenses/LICENSE-2.0 |
| 9 | + * |
| 10 | + * Unless required by applicable law or agreed to in writing, software |
| 11 | + * distributed under the License is distributed on an "AS IS" BASIS, |
| 12 | + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| 13 | + * See the License for the specific language governing permissions and |
| 14 | + * limitations under the License. |
| 15 | + */ |
| 16 | +package com.android.ai.samples.geminivideometadatacreation |
| 17 | + |
| 18 | +import android.content.Intent |
| 19 | +import androidx.compose.foundation.layout.Arrangement |
| 20 | +import androidx.compose.foundation.layout.Column |
| 21 | +import androidx.compose.foundation.layout.fillMaxHeight |
| 22 | +import androidx.compose.foundation.layout.fillMaxWidth |
| 23 | +import androidx.compose.foundation.layout.padding |
| 24 | +import androidx.compose.material.icons.Icons |
| 25 | +import androidx.compose.material.icons.filled.Code |
| 26 | +import androidx.compose.material3.AlertDialog |
| 27 | +import androidx.compose.material3.Button |
| 28 | +import androidx.compose.material3.CircularProgressIndicator |
| 29 | +import androidx.compose.material3.ExperimentalMaterial3Api |
| 30 | +import androidx.compose.material3.Icon |
| 31 | +import androidx.compose.material3.MaterialTheme |
| 32 | +import androidx.compose.material3.Scaffold |
| 33 | +import androidx.compose.material3.Text |
| 34 | +import androidx.compose.material3.TopAppBar |
| 35 | +import androidx.compose.material3.TopAppBarDefaults.topAppBarColors |
| 36 | +import androidx.compose.runtime.Composable |
| 37 | +import androidx.compose.runtime.DisposableEffect |
| 38 | +import androidx.compose.runtime.LaunchedEffect |
| 39 | +import androidx.compose.runtime.getValue |
| 40 | +import androidx.compose.runtime.mutableStateOf |
| 41 | +import androidx.compose.runtime.remember |
| 42 | +import androidx.compose.runtime.setValue |
| 43 | +import androidx.compose.ui.Alignment |
| 44 | +import androidx.compose.ui.Modifier |
| 45 | +import androidx.compose.ui.platform.LocalContext |
| 46 | +import androidx.compose.ui.res.stringResource |
| 47 | +import androidx.compose.ui.unit.dp |
| 48 | +import androidx.compose.ui.unit.sp |
| 49 | +import androidx.core.net.toUri |
| 50 | +import androidx.hilt.navigation.compose.hiltViewModel |
| 51 | +import androidx.lifecycle.compose.collectAsStateWithLifecycle |
| 52 | +import androidx.media3.common.MediaItem |
| 53 | +import androidx.media3.exoplayer.ExoPlayer |
| 54 | +import com.android.ai.samples.geminivideometadatacreation.player.VideoPlayer |
| 55 | +import com.android.ai.samples.geminivideometadatacreation.player.VideoSelectionDropdown |
| 56 | +import com.android.ai.samples.geminivideometadatacreation.ui.ButtonGrid |
| 57 | +import com.android.ai.samples.geminivideometadatacreation.ui.OutputTextDisplay |
| 58 | +import com.android.ai.samples.geminivideometadatacreation.ui.ThumbnailScreen |
| 59 | +import com.android.ai.samples.geminivideometadatacreation.util.sampleVideoList |
| 60 | +import com.android.ai.samples.geminivideometadatacreation.viewmodel.MetadataCreationState |
| 61 | +import com.android.ai.samples.geminivideometadatacreation.viewmodel.MetadataType |
| 62 | +import com.android.ai.samples.geminivideometadatacreation.viewmodel.VideoMetadataCreationState |
| 63 | +import com.android.ai.samples.geminivideometadatacreation.viewmodel.VideoMetadataCreationViewModel |
| 64 | + |
| 65 | +/** |
| 66 | + * Composable function for the AI Video Metadata Creation screen. |
| 67 | + * |
| 68 | + * This screen allows users to select a video, play it, and generate metadata of its content |
| 69 | + * using Firebase AI. It also provides text-to-speech functionality to read out |
| 70 | + */ |
| 71 | +@OptIn(ExperimentalMaterial3Api::class) |
| 72 | +@Composable |
| 73 | +fun VideoMetadataCreationScreen(viewModel: VideoMetadataCreationViewModel = hiltViewModel()) { |
| 74 | + val uiState by viewModel.uiState.collectAsStateWithLifecycle() |
| 75 | + val context = LocalContext.current |
| 76 | + var isDropdownExpanded by remember { mutableStateOf(false) } |
| 77 | + |
| 78 | + val exoPlayer = remember(context) { |
| 79 | + ExoPlayer.Builder(context).build().apply { |
| 80 | + playWhenReady = true |
| 81 | + } |
| 82 | + } |
| 83 | + |
| 84 | + LaunchedEffect(uiState.selectedVideoUri) { |
| 85 | + uiState.selectedVideoUri?.let { |
| 86 | + exoPlayer.setMediaItem(MediaItem.fromUri(it)) |
| 87 | + exoPlayer.prepare() |
| 88 | + } |
| 89 | + } |
| 90 | + |
| 91 | + Scaffold( |
| 92 | + topBar = { |
| 93 | + TopAppBar( |
| 94 | + colors = topAppBarColors( |
| 95 | + containerColor = MaterialTheme.colorScheme.primaryContainer, |
| 96 | + titleContentColor = MaterialTheme.colorScheme.primary, |
| 97 | + ), |
| 98 | + title = { |
| 99 | + Text(text = stringResource(R.string.video_metadata_creation_title)) |
| 100 | + }, |
| 101 | + actions = { |
| 102 | + SeeCodeButton() |
| 103 | + }, |
| 104 | + ) |
| 105 | + }, |
| 106 | + ) { innerPadding -> |
| 107 | + Column( |
| 108 | + modifier = Modifier |
| 109 | + .padding(16.dp) |
| 110 | + .padding(innerPadding) |
| 111 | + .fillMaxHeight(), |
| 112 | + verticalArrangement = Arrangement.spacedBy(8.dp), |
| 113 | + ) { |
| 114 | + VideoSelectionDropdown( |
| 115 | + selectedVideoUri = uiState.selectedVideoUri, |
| 116 | + isDropdownExpanded = isDropdownExpanded, |
| 117 | + videoOptions = sampleVideoList, |
| 118 | + onVideoUriSelected = { uri -> |
| 119 | + viewModel.onVideoSelected(uri) |
| 120 | + viewModel.resetMetadataState() |
| 121 | + }, |
| 122 | + onDropdownExpanded = { isDropdownExpanded = it }, |
| 123 | + ) |
| 124 | + |
| 125 | + VideoPlayer( |
| 126 | + player = exoPlayer, |
| 127 | + modifier = Modifier |
| 128 | + .fillMaxWidth() |
| 129 | + .weight(0.25f), |
| 130 | + ) |
| 131 | + |
| 132 | + MetadataCreationSection( |
| 133 | + uiState = uiState, |
| 134 | + onDismissError = { viewModel.dismissError() }, |
| 135 | + onMetadataTypeClicked = { |
| 136 | + viewModel.onMetadataTypeSelected(it) |
| 137 | + viewModel.createMetadata(it) |
| 138 | + }, |
| 139 | + modifier = Modifier.weight(0.75f), |
| 140 | + ) |
| 141 | + } |
| 142 | + } |
| 143 | + |
| 144 | + DisposableEffect(key1 = exoPlayer) { |
| 145 | + onDispose { |
| 146 | + exoPlayer.release() |
| 147 | + } |
| 148 | + } |
| 149 | +} |
| 150 | + |
| 151 | +@Composable |
| 152 | +private fun MetadataCreationSection( |
| 153 | + uiState: VideoMetadataCreationState, |
| 154 | + onDismissError: () -> Unit, |
| 155 | + onMetadataTypeClicked: (MetadataType) -> Unit, |
| 156 | + modifier: Modifier = Modifier, |
| 157 | +) { |
| 158 | + Column( |
| 159 | + verticalArrangement = Arrangement.spacedBy(16.dp), |
| 160 | + modifier = modifier, |
| 161 | + ) { |
| 162 | + ButtonGrid( |
| 163 | + selectedMetadataType = uiState.selectedMetadataType, |
| 164 | + onMetadataCreationClicked = onMetadataTypeClicked, |
| 165 | + ) |
| 166 | + |
| 167 | + when (val metadataCreationState = uiState.metadataCreationState) { |
| 168 | + is MetadataCreationState.InProgress -> { |
| 169 | + CircularProgressIndicator(modifier = Modifier.align(Alignment.CenterHorizontally)) |
| 170 | + } |
| 171 | + |
| 172 | + is MetadataCreationState.Error -> { |
| 173 | + AlertDialog( |
| 174 | + onDismissRequest = onDismissError, |
| 175 | + title = { Text("Error") }, |
| 176 | + text = { Text(metadataCreationState.message) }, |
| 177 | + confirmButton = { |
| 178 | + Button(onClick = onDismissError) { |
| 179 | + Text("OK") |
| 180 | + } |
| 181 | + }, |
| 182 | + ) |
| 183 | + } |
| 184 | + |
| 185 | + is MetadataCreationState.Success -> { |
| 186 | + Column(modifier = Modifier.weight(1f), verticalArrangement = Arrangement.spacedBy(16.dp)) { |
| 187 | + OutputTextDisplay(metadataCreationState.metadataText) |
| 188 | + ThumbnailScreen(thumbnailState = metadataCreationState.thumbnailState) |
| 189 | + } |
| 190 | + } |
| 191 | + |
| 192 | + MetadataCreationState.Idle -> { |
| 193 | + // Default state - No button is selected unless explicitly selected |
| 194 | + } |
| 195 | + } |
| 196 | + } |
| 197 | +} |
| 198 | + |
| 199 | +@Composable |
| 200 | +fun SeeCodeButton() { |
| 201 | + val context = LocalContext.current |
| 202 | + val githubLink = |
| 203 | + "https://github.com/android/ai-samples/tree/main/ai-catalog/samples/gemini-video-metadata-creation" |
| 204 | + Button( |
| 205 | + onClick = { |
| 206 | + val intent = Intent(Intent.ACTION_VIEW, githubLink.toUri()) |
| 207 | + context.startActivity(intent) |
| 208 | + }, |
| 209 | + ) { |
| 210 | + Icon(Icons.Filled.Code, contentDescription = "See code") |
| 211 | + Text( |
| 212 | + modifier = Modifier.padding(start = 8.dp), |
| 213 | + fontSize = 12.sp, |
| 214 | + text = stringResource(R.string.see_code), |
| 215 | + ) |
| 216 | + } |
| 217 | +} |
0 commit comments