Design/net.ikea.skapa.ui.components/SimpleVideo

SimpleVideo

@Composable
fun SimpleVideo(player: @Composable () -> Unit, contentDescription: String?, modifier: Modifier = Modifier, aspectRatio: SkapaAspectRatio = SkapaAspectRatio.Ratio16by9, buttonAlignment: VideoButtonAlignment = VideoButtonAlignment.BottomTrailing, playButtonParams: VideoPlayerButtonParams.PlayButtonParams, fullScreenParams: VideoPlayerButtonParams.FullScreenParams? = null, transcriptionParams: VideoPlayerButtonParams.TranscriptionParams? = null, isPlaying: MutableState<Boolean> = remember { mutableStateOf(false) }, onBackgroundPress: () -> Unit? = null)

SimpleVideo Basic video playback with autoplay and minimal controls. Represents an open container for a video player with built in Play/Pause, full-screen, transcription buttons and accessibility features.

Parameters

player

Composable function that represents the video player.

contentDescription

The content description for the video player, used for accessibility. This should describe the video content, not the player itself.

modifier

Modifier to be applied to the video player.

aspectRatio

The aspect ratio of the video player.

buttonAlignment

The alignment of the buttons in the video player. The default is VideoButtonAlignment.BottomTrailing, which places the additional buttons in the bottom right corner of the video player.

playButtonParams

Parameters for the play/pause button, including content description and click action.

fullScreenParams

Parameters for the full-screen button, including content description and click action.

transcriptionParams

Parameters for the transcription button, including content description and click action.

isPlaying

A mutable state that represents whether the video is currently playing or paused.

onBackgroundPress

An optional lambda that is invoked when the background of the video player is pressed. This can be used for any custom action. This will override the default play/pause action when the background is clicked.

See also

Samples

import android.annotation.SuppressLint
import android.view.View
import android.widget.FrameLayout
import android.widget.ImageView
import android.widget.VideoView
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.viewinterop.AndroidView
import net.ikea.skapa.R
import net.ikea.skapa.foundation.ExperimentalSkapaApi
import net.ikea.skapa.ui.components.SimpleVideo
import net.ikea.skapa.ui.components.SkapaAspectRatio
import net.ikea.skapa.ui.components.VideoButtonAlignment
import net.ikea.skapa.ui.components.VideoPlayerButtonParams

fun main() { 
   //sampleStart 
   val videoUrl = "https://www.ikea.com/pvid/0823552_fe001096.mp4"
val playState = remember { mutableStateOf(false) }
SimpleVideo(
    aspectRatio = SkapaAspectRatio.Ratio16by9,
    player = { VideoPlayer(videoUrl = videoUrl, isPlaying = playState.value) }, // Add player composable here
    contentDescription = "Video container description", // Content description for the video container
    buttonAlignment = VideoButtonAlignment.BottomTrailing,
    playButtonParams = VideoPlayerButtonParams.PlayButtonParams(
        contentDescription = "Play / pause video",
        onClick = { state ->
            playState.value = !state
        }
    ),
    fullScreenParams = VideoPlayerButtonParams.FullScreenParams(
        contentDescription = "Full screen",
        onClick = {
            // Handle full screen click here
        }
    ),
    transcriptionParams = VideoPlayerButtonParams.TranscriptionParams(
        contentDescription = "Transcription",
        onClick = {
            // Handle transcription click here
        }
    ),
    // Pass the play state from the video player to the player wrapper. This controls the play/pause state of the video player.
    isPlaying = playState,
    // Optional: Handle background press for custom action if needed. If null, background press will play/pause the video.
    onBackgroundPress = null
) 
   //sampleEnd
}