Merge changes I1d07cc44,I5d6ac40d,I300aa28f into main (1eeb9667) · Commits · e / os / android_frameworks_base

packages/SystemUI/src/com/android/systemui/media/remedia/ui/compose/Media.kt

+355 −0

Original line number	Diff line number	Diff line
		@@ -14,45 +14,397 @@
		* limitations under the License.
		*/

		@file:OptIn(ExperimentalMaterial3Api::class)

		package com.android.systemui.media.remedia.ui.compose

		import androidx.compose.animation.Crossfade
		import androidx.compose.animation.core.Animatable
		import androidx.compose.animation.core.LinearEasing
		import androidx.compose.animation.core.RepeatMode
		import androidx.compose.animation.core.animateDpAsState
		import androidx.compose.animation.core.infiniteRepeatable
		import androidx.compose.animation.core.tween
		import androidx.compose.animation.graphics.res.animatedVectorResource
		import androidx.compose.animation.graphics.res.rememberAnimatedVectorPainter
		import androidx.compose.animation.graphics.vector.AnimatedImageVector
		import androidx.compose.foundation.BorderStroke
		import androidx.compose.foundation.Canvas
		import androidx.compose.foundation.Image
		import androidx.compose.foundation.background
		import androidx.compose.foundation.clickable
		import androidx.compose.foundation.hoverable
		import androidx.compose.foundation.interaction.DragInteraction
		import androidx.compose.foundation.interaction.Interaction
		import androidx.compose.foundation.interaction.MutableInteractionSource
		import androidx.compose.foundation.interaction.PressInteraction
		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.Spacer
		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.shape.RoundedCornerShape
		import androidx.compose.material3.ButtonDefaults
		import androidx.compose.material3.CircularProgressIndicator
		import androidx.compose.material3.ExperimentalMaterial3Api
		import androidx.compose.material3.Icon
		import androidx.compose.material3.IconButtonDefaults
		import androidx.compose.material3.MaterialTheme
		import androidx.compose.material3.Slider
		import androidx.compose.material3.SliderColors
		import androidx.compose.material3.SliderDefaults.colors
		import androidx.compose.material3.SliderState
		import androidx.compose.material3.Text
		import androidx.compose.runtime.Composable
		import androidx.compose.runtime.LaunchedEffect
		import androidx.compose.runtime.getValue
		import androidx.compose.runtime.mutableStateListOf
		import androidx.compose.runtime.mutableStateOf
		import androidx.compose.runtime.remember
		import androidx.compose.runtime.setValue
		import androidx.compose.ui.Alignment
		import androidx.compose.ui.Modifier
		import androidx.compose.ui.draw.drawWithContent
		import androidx.compose.ui.geometry.Offset
		import androidx.compose.ui.geometry.center
		import androidx.compose.ui.graphics.Brush
		import androidx.compose.ui.graphics.Color
		import androidx.compose.ui.graphics.ImageBitmap
		import androidx.compose.ui.graphics.Path
		import androidx.compose.ui.graphics.StrokeCap
		import androidx.compose.ui.graphics.drawscope.Stroke
		import androidx.compose.ui.graphics.drawscope.clipRect
		import androidx.compose.ui.graphics.drawscope.translate
		import androidx.compose.ui.input.pointer.pointerInput
		import androidx.compose.ui.layout.ContentScale
		import androidx.compose.ui.text.style.TextOverflow
		import androidx.compose.ui.unit.Dp
		import androidx.compose.ui.unit.dp
		import com.android.compose.PlatformButton
		import com.android.compose.PlatformIconButton
		import com.android.compose.PlatformOutlinedButton
		import com.android.compose.animation.scene.ContentScope
		import com.android.compose.animation.scene.ElementKey
		import com.android.compose.theme.LocalAndroidColorScheme
		import com.android.systemui.common.shared.model.Icon
		import com.android.systemui.common.ui.compose.Icon
		import com.android.systemui.common.ui.compose.load
		import com.android.systemui.communal.ui.compose.extensions.detectLongPressGesture
		import com.android.systemui.media.remedia.shared.model.MediaSessionState
		import com.android.systemui.media.remedia.ui.viewmodel.MediaCardGutsViewModel
		import com.android.systemui.media.remedia.ui.viewmodel.MediaOutputSwitcherChipViewModel
		import com.android.systemui.media.remedia.ui.viewmodel.MediaPlayPauseActionViewModel
		import com.android.systemui.media.remedia.ui.viewmodel.MediaSecondaryActionViewModel
		import com.android.systemui.media.remedia.ui.viewmodel.MediaSeekBarViewModel
		import kotlin.math.max

		/** Renders the background of a card, loading the artwork and showing an overlay on top of it. */
		@Composable
		private fun CardBackground(imageLoader: suspend () -> ImageBitmap, modifier: Modifier = Modifier) {
		var image: ImageBitmap? by remember { mutableStateOf(null) }
		LaunchedEffect(imageLoader) {
		image = null
		image = imageLoader()
		}

		val gradientBaseColor = MaterialTheme.colorScheme.onSurface
		Box(
		modifier =
		modifier.drawWithContent {
		// Draw the content of the box (loaded art or placeholder).
		drawContent()

		if (image != null) {
		// Then draw the overlay.
		drawRect(
		brush =
		Brush.radialGradient(
		0f to gradientBaseColor.copy(alpha = 0.65f),
		1f to gradientBaseColor.copy(alpha = 0.75f),
		center = size.center,
		radius = max(size.width, size.height) / 2,
		)
		)
		}
		}
		) {
		image?.let { loadedImage ->
		// Loaded art.
		Image(
		bitmap = loadedImage,
		contentDescription = null,
		contentScale = ContentScale.Crop,
		modifier = Modifier.matchParentSize(),
		)
		}
		?: run {
		// Placeholder.
		Box(Modifier.background(MaterialTheme.colorScheme.onSurface).matchParentSize())
		}
		}
		}

		/**
		* Renders the navigation UI (seek bar and/or previous/next buttons).
		*
		* If [isSeekBarVisible] is `false`, the seek bar will not be included in the layout, even if it
		* would otherwise be showing based on the view-model alone. This is meant for callers to decide
		* whether they'd like to show the seek bar in addition to the prev/next buttons or just show the
		* buttons.
		*/
		@Composable
		private fun ContentScope.Navigation(
		viewModel: MediaSeekBarViewModel,
		isSeekBarVisible: Boolean,
		modifier: Modifier = Modifier,
		) {
		when (viewModel) {
		is MediaSeekBarViewModel.Showing -> {
		Row(
		horizontalArrangement = Arrangement.spacedBy(8.dp),
		verticalAlignment = Alignment.CenterVertically,
		modifier = modifier,
		) {
		viewModel.previous?.let {
		SecondaryAction(viewModel = it, element = Media.Elements.PrevButton)
		}

		val interactionSource = remember { MutableInteractionSource() }
		val colors =
		colors(
		activeTrackColor = Color.White,
		inactiveTrackColor = Color.White.copy(alpha = 0.3f),
		thumbColor = Color.White,
		)
		if (isSeekBarVisible) {
		// To allow the seek bar slider to fade in and out, it's tagged as an element.
		Element(key = Media.Elements.SeekBarSlider, modifier = Modifier.weight(1f)) {
		Slider(
		interactionSource = interactionSource,
		value = viewModel.progress,
		onValueChange = { progress -> viewModel.onScrubChange(progress) },
		onValueChangeFinished = { viewModel.onScrubFinished() },
		colors = colors,
		thumb = {
		SeekBarThumb(interactionSource = interactionSource, colors = colors)
		},
		track = { sliderState ->
		SeekBarTrack(
		sliderState = sliderState,
		isSquiggly = viewModel.isSquiggly,
		colors = colors,
		modifier = Modifier.fillMaxWidth(),
		)
		},
		modifier = Modifier.fillMaxWidth(),
		)
		}
		}

		viewModel.next?.let {
		SecondaryAction(viewModel = it, element = Media.Elements.NextButton)
		}
		}
		}

		is MediaSeekBarViewModel.Hidden -> Unit
		}
		}

		/** Renders the thumb of the seek bar. */
		@Composable
		private fun SeekBarThumb(
		interactionSource: MutableInteractionSource,
		colors: SliderColors,
		modifier: Modifier = Modifier,
		) {
		val interactions = remember { mutableStateListOf<Interaction>() }
		LaunchedEffect(interactionSource) {
		interactionSource.interactions.collect { interaction ->
		when (interaction) {
		is PressInteraction.Press -> interactions.add(interaction)
		is PressInteraction.Release -> interactions.remove(interaction.press)
		is PressInteraction.Cancel -> interactions.remove(interaction.press)
		is DragInteraction.Start -> interactions.add(interaction)
		is DragInteraction.Stop -> interactions.remove(interaction.start)
		is DragInteraction.Cancel -> interactions.remove(interaction.start)
		}
		}
		}

		Spacer(
		modifier
		.size(width = 4.dp, height = 16.dp)
		.hoverable(interactionSource = interactionSource)
		.background(color = colors.thumbColor, shape = RoundedCornerShape(16.dp))
		)
		}

		/**
		* Renders the track of the seek bar.
		*
		* If [isSquiggly] is `true`, the part to the left of the thumb will animate a squiggly line that
		* oscillates up and down. The [waveLength] and [amplitude] control the geometry of the squiggle and
		* the [waveSpeedDpPerSec] controls the speed by which it seems to "move" horizontally.
		*/
		@Composable
		private fun SeekBarTrack(
		sliderState: SliderState,
		isSquiggly: Boolean,
		colors: SliderColors,
		modifier: Modifier = Modifier,
		waveLength: Dp = 20.dp,
		amplitude: Dp = 3.dp,
		waveSpeedDpPerSec: Dp = 8.dp,
		) {
		// Animating the amplitude allows the squiggle to gradually grow to its full height or shrink
		// back to a flat line as needed.
		val animatedAmplitude by
		animateDpAsState(
		targetValue = if (isSquiggly) amplitude else 0.dp,
		label = "SeekBarTrack.amplitude",
		)

		// This animates the horizontal movement of the squiggle.
		val animatedWaveOffset = remember { Animatable(0f) }

		LaunchedEffect(isSquiggly) {
		if (isSquiggly) {
		animatedWaveOffset.snapTo(0f)
		animatedWaveOffset.animateTo(
		targetValue = 1f,
		animationSpec =
		infiniteRepeatable(
		animation =
		tween(
		durationMillis = (1000 * (waveLength / waveSpeedDpPerSec)).toInt(),
		easing = LinearEasing,
		),
		repeatMode = RepeatMode.Restart,
		),
		)
		}
		}

		// Render the track.
		Canvas(modifier = modifier) {
		val thumbPositionPx = size.width * sliderState.value

		// The squiggly part before the thumb.
		if (thumbPositionPx > 0) {
		val amplitudePx = amplitude.toPx()
		val animatedAmplitudePx = animatedAmplitude.toPx()
		val waveLengthPx = waveLength.toPx()

		val path =
		Path().apply {
		val halfWaveLengthPx = waveLengthPx / 2
		val halfWaveCount = (thumbPositionPx / halfWaveLengthPx).toInt()

		repeat(halfWaveCount + 3) { index ->
		// Draw a half wave (either a hill or a valley shape starting and ending on
		// the horizontal center).
		relativeQuadraticTo(
		// The control point for the bezier curve is on top of the peak of the
		// hill or the very center bottom of the valley shape.
		dx1 = halfWaveLengthPx / 2,
		dy1 = if (index % 2 == 0) -animatedAmplitudePx else animatedAmplitudePx,
		// Advance horizontally, half a wave length at a time.
		dx2 = halfWaveLengthPx,
		dy2 = 0f,
		)
		}
		}

		// Now that the squiggle is rendered a bit past the thumb, clip off the part that passed
		// the thumb. It's easier to clip the extra squiggle than to figure out the bezier curve
		// for part of a hill/valley.
		clipRect(
		left = 0f,
		top = -amplitudePx,
		right = thumbPositionPx,
		bottom = amplitudePx * 2,
		) {
		translate(left = -waveLengthPx * animatedWaveOffset.value, top = 0f) {
		// Actually render the squiggle.
		drawPath(
		path = path,
		color = colors.activeTrackColor,
		style = Stroke(width = 2.dp.toPx(), cap = StrokeCap.Round),
		)
		}
		}
		}

		// The flat line after the thumb.
		drawLine(
		color = colors.inactiveTrackColor,
		start = Offset(thumbPositionPx, 0f),
		end = Offset(size.width, 0f),
		strokeWidth = 2.dp.toPx(),
		cap = StrokeCap.Round,
		)
		}
		}

		/** Renders the internal "guts" of a card. */
		@Composable
		private fun CardGuts(viewModel: MediaCardGutsViewModel, modifier: Modifier = Modifier) {
		Box(
		modifier =
		modifier.pointerInput(Unit) { detectLongPressGesture { viewModel.onLongClick() } }
		) {
		// Settings button.
		Icon(
		icon = checkNotNull(viewModel.settingsButton.icon),
		modifier =
		Modifier.align(Alignment.TopEnd).padding(top = 16.dp, end = 16.dp).clickable {
		viewModel.settingsButton.onClick()
		},
		)

		// Content.
		Column(
		horizontalAlignment = Alignment.CenterHorizontally,
		verticalArrangement = Arrangement.spacedBy(16.dp),
		modifier =
		Modifier.align(Alignment.BottomCenter)
		.fillMaxWidth()
		.padding(start = 16.dp, end = 32.dp, bottom = 40.dp),
		) {
		Text(text = viewModel.text, color = Color.White)

		Row(
		horizontalArrangement = Arrangement.spacedBy(8.dp),
		verticalAlignment = Alignment.CenterVertically,
		) {
		PlatformButton(
		onClick = viewModel.primaryAction.onClick,
		colors = ButtonDefaults.buttonColors(containerColor = Color.White),
		) {
		Text(
		text = checkNotNull(viewModel.primaryAction.text),
		color = LocalAndroidColorScheme.current.onPrimaryFixed,
		)
		}

		viewModel.secondaryAction?.let { button ->
		PlatformOutlinedButton(
		onClick = button.onClick,
		border = BorderStroke(width = 1.dp, color = Color.White),
		) {
		Text(text = checkNotNull(button.text), color = Color.White)
		}
		}
		}
		}
		}
		}

		/** Renders the metadata labels of a track. */
		@Composable
		@@ -227,5 +579,8 @@ private object Media {
		object Elements {
		val PlayPauseButton = ElementKey("play_pause")
		val Metadata = ElementKey("metadata")
		val PrevButton = ElementKey("prev")
		val NextButton = ElementKey("next")
		val SeekBarSlider = ElementKey("seek_bar_slider")
		}
		}

packages/SystemUI/src/com/android/systemui/media/remedia/ui/viewmodel/MediaCardGutsViewModel.kt

0 → 100644

+26 −0

Original line number	Diff line number	Diff line
		/*
		* Copyright (C) 2025 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
		*
		* http://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.
		*/

		package com.android.systemui.media.remedia.ui.viewmodel

		data class MediaCardGutsViewModel(
		val isVisible: Boolean,
		val text: String,
		val primaryAction: MediaGutsButtonViewModel,
		val secondaryAction: MediaGutsButtonViewModel? = null,
		val settingsButton: MediaGutsSettingsButtonViewModel,
		val onLongClick: () -> Unit,
		)

packages/SystemUI/src/com/android/systemui/media/remedia/ui/viewmodel/MediaGutsButtonViewModel.kt

0 → 100644

+19 −0

Original line number	Diff line number	Diff line
		/*
		* Copyright (C) 2025 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
		*
		* http://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.
		*/

		package com.android.systemui.media.remedia.ui.viewmodel

		data class MediaGutsButtonViewModel(val text: String, val onClick: () -> Unit)

packages/SystemUI/src/com/android/systemui/media/remedia/ui/viewmodel/MediaGutsSettingsButtonViewModel.kt

0 → 100644

+21 −0

Original line number	Diff line number	Diff line
		/*
		* Copyright (C) 2025 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
		*
		* http://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.
		*/

		package com.android.systemui.media.remedia.ui.viewmodel

		import com.android.systemui.common.shared.model.Icon

		data class MediaGutsSettingsButtonViewModel(val icon: Icon, val onClick: () -> Unit)

packages/SystemUI/src/com/android/systemui/media/remedia/ui/viewmodel/MediaSeekBarViewModel.kt

0 → 100644

+57 −0

Original line number	Diff line number	Diff line
		/*
		* Copyright (C) 2025 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
		*
		* http://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.
		*/

		package com.android.systemui.media.remedia.ui.viewmodel

		import androidx.annotation.FloatRange

		/** Models UI state for the seek bar. */
		sealed interface MediaSeekBarViewModel {

		/** The seek bar should be showing. */
		data class Showing(
		/** The progress to show on the seek bar, between `0` and `1`. */
		@FloatRange(from = 0.0, to = 1.0) val progress: Float,
		/** The previous button; or `null` if it should be absent in the UI. */
		val previous: MediaSecondaryActionViewModel?,
		/** The next button; or `null` if it should be absent in the UI. */
		val next: MediaSecondaryActionViewModel?,
		/**
		* Whether the portion of the seek bar track before the thumb should show the squiggle
		* animation.
		*/
		val isSquiggly: Boolean,
		/**
		* Whether the UI should show as "scrubbing" because the user is actively moving the thumb
		* of the seek bar.
		*/
		val isScrubbing: Boolean,
		/**
		* A callback to invoke while the user is "scrubbing" (e.g. actively moving the thumb of the
		* seek bar). The position/progress of the actual track should not be changed during this
		* time.
		*/
		val onScrubChange: (progress: Float) -> Unit,
		/**
		* A callback to invoke once the user finishes "scrubbing" (e.g. stopped moving the thumb of
		* the seek bar). The position/progress should be committed.
		*/
		val onScrubFinished: () -> Unit,
		) : MediaSeekBarViewModel

		/** The seek bar should be hidden. */
		data object Hidden : MediaSeekBarViewModel
		}