SushiMedia

A unified media component for the Sushi design system that can display different types of media.

SushiMedia provides a single interface for displaying various types of visual content, currently supporting static images and animations. It automatically renders the appropriate component based on the type of media specified in the properties.

This abstraction allows for easier transitions between different media types and provides a consistent API for displaying visual content.

Example

The SushiMedia component is used to display different types of media content:

// Display an image
val imageProps = SushiImageProps(
    painter = painterResource(R.drawable.my_image),
    contentDescription = "My Image",
    width = 200.dp,
    height = 150.dp,
    contentScale = ContentScale.Crop
)

SushiMedia(
    props = SushiMediaProps.Image(imageProps),
    modifier = Modifier.padding(16.dp)
)

// Display an animation (Lottie)
val animationProps by rememberSushiAnimationProps(
    source = LottieAssetSource("animation.json"),
    playback = SushiAnimationPlayback.AutoPlay(
        isPlaying = true,
        restartOnPlay = true,
        iterations = 3
    )
)

SushiMedia(
    props = SushiMediaProps.Animation(animationProps),
    modifier = Modifier.size(200.dp)
)

Toggling Between Media Types

// State to track current media type
var mediaProps by remember { 
    mutableStateOf<SushiMediaProps>(
        SushiMediaProps.Image(imageProps)
    ) 
}

// Button to toggle between image and animation
SushiButton(
    props = SushiButtonProps(text = "Toggle Media Type"),
    onClick = {
        mediaProps = if (mediaProps is SushiMediaProps.Image) {
            SushiMediaProps.Animation(animationProps)
        } else {
            SushiMediaProps.Image(imageProps)
        }
    }
)

// Display the current media
SushiMedia(
    props = mediaProps,
    modifier = Modifier.size(200.dp)
)

Component API

SushiMediaProps

SushiMediaProps is a sealed class with two implementations:

Type	Description
Image	Configuration for displaying a static image
Animation	Configuration for displaying an animation

Image Properties

When using SushiMediaProps.Image, you provide a SushiImageProps object with the following key properties:

Parameter	Description
painter	The painter that will draw the image
contentDescription	Accessibility description of the image
width	The desired width of the image
height	The desired height of the image
aspectRatio	The aspect ratio to maintain
shape	The shape to clip the image to
contentScale	How the image should be scaled
alpha	The opacity of the image
colorFilter	Optional color filter to apply to the image

Animation Properties

When using SushiMediaProps.Animation, you provide a SushiAnimationProps object with the following key properties:

Parameter	Description
source	The animation source (asset, file, URL, etc.)
playback	Controls how the animation plays
width	The desired width of the animation
height	The desired height of the animation
aspectRatio	The aspect ratio to maintain