Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Video player controller #3959

Merged
merged 8 commits into from
Nov 28, 2024
Merged

Video player controller #3959

Changes from 1 commit
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
98875a6
Add a duration formatter.
bmarty Nov 27, 2024
7a8b942
Slider: import design.
bmarty Nov 27, 2024
9c1ccdf
Add custom video player controller
bmarty Nov 27, 2024
28ed092
Cleanup
bmarty Nov 27, 2024
c8519b3
Update screenshots
ElementBot Nov 27, 2024
6213402
PlayableState.Playable should only contain data useful for other comp…
bmarty Nov 28, 2024
9a6b398
Improve preview
bmarty Nov 28, 2024
5686b77
Update screenshots
ElementBot Nov 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
76 changes: 75 additions & 1 deletion ...stem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/Slider.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,19 +5,32 @@
* Please see LICENSE in the repository root for full details.
*/

@file:OptIn(ExperimentalMaterial3Api::class)

package io.element.android.libraries.designsystem.theme.components

import androidx.compose.foundation.interaction.DragInteraction
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.interaction.PressInteraction
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.height
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.SliderColors
import androidx.compose.material3.SliderDefaults
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableFloatStateOf
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.drawWithContent
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.DpSize
import androidx.compose.ui.unit.dp
import io.element.android.compound.theme.ElementTheme
import io.element.android.libraries.designsystem.preview.ElementThemedPreview
import io.element.android.libraries.designsystem.preview.PreviewGroup

Expand All @@ -32,8 +45,20 @@ fun Slider(
steps: Int = 0,
onValueChangeFinish: (() -> Unit)? = null,
colors: SliderColors = SliderDefaults.colors(),
interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }
interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
useCustomLayout: Boolean = false,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This feels a bit weird, to be honest. I think we should either split this component into two (one for the new M3 look and feel and another for the old one) or rename/clarify a bit what useCustomLayout does. Maybe rename it to something like useLegacyMaterialStyle?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, it's not ideal. I'll confirm with Aaron that the design is up to date for Android first.

) {
val thumbColor = ElementTheme.colors.iconOnSolidPrimary
var isUserInteracting by remember { mutableStateOf(false) }
LaunchedEffect(interactionSource) {
interactionSource.interactions.collect { interaction ->
isUserInteracting = when (interaction) {
is DragInteraction.Start,
is PressInteraction.Press -> true
else -> false
}
}
}
androidx.compose.material3.Slider(
value = value,
onValueChange = onValueChange,
Expand All @@ -43,6 +68,54 @@ fun Slider(
steps = steps,
onValueChangeFinished = onValueChangeFinish,
colors = colors,
thumb = {
if (useCustomLayout) {
SliderDefaults.Thumb(
modifier = Modifier.drawWithContent {
drawContent()
if (isUserInteracting.not()) {
drawCircle(thumbColor, radius = 8.dp.toPx())
}
},
interactionSource = interactionSource,
colors = colors.copy(
thumbColor = ElementTheme.colors.iconPrimary,
),
enabled = enabled,
thumbSize = DpSize(
if (isUserInteracting) 44.dp else 22.dp,
22.dp,
),
)
} else {
SliderDefaults.Thumb(
interactionSource = interactionSource,
colors = colors,
enabled = enabled
)
}
},
track = { sliderState ->
if (useCustomLayout) {
SliderDefaults.Track(
modifier = Modifier.height(8.dp),
colors = colors.copy(
activeTrackColor = Color(0x66E0EDFF),
inactiveTrackColor = Color(0x66E0EDFF),
Comment on lines +103 to +104
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Don't we have either semantic or core token colors for these?

),
enabled = enabled,
sliderState = sliderState,
thumbTrackGapSize = 0.dp,
drawStopIndicator = { },
)
} else {
SliderDefaults.Track(
colors = colors,
enabled = enabled,
sliderState = sliderState,
)
}
},
interactionSource = interactionSource,
)
}
Expand All @@ -55,5 +128,6 @@ internal fun SlidersPreview() = ElementThemedPreview {
Slider(onValueChange = { value = it }, value = value, enabled = true)
Slider(steps = 10, onValueChange = { value = it }, value = value, enabled = true)
Slider(onValueChange = { value = it }, value = value, enabled = false)
Slider(onValueChange = { value = it }, value = value, enabled = true, useCustomLayout = true)
}
}