# Media — galleries, players, thumbnails Source: https://ui.barua.tz/docs/media.html Rules and conventions: https://ui.barua.tz/llms.txt ## Image Viewer A dark stage that centers one image, with a .b-image-viewer__bar pinned to the bottom edge for the caption and actions. The stage stays near-black in both themes so photos read the same everywhere. Demos on this page use gradient placeholders in place of real files. - Documentation: https://ui.barua.tz/docs/media.html#image-viewer - Classes: `b-btn` `b-btn--glass` `b-btn--sm` `b-icon-btn` `b-image-viewer` `b-image-viewer__bar` ```html
Msasani Bay at dusk — 4,032 × 2,268
``` ```tsx import { Button, ImageViewer, ImageViewerBar } from "barua-ui";
Msasani Bay at dusk — 4,032 × 2,268 ``` ## Image Gallery An auto-filling square grid. Wrap each tile in a ``` ## Carousel A scroll-snap track — it works with plain CSS, and adding data-b-carousel lets barua.js wire the prev/next buttons to smooth scrolling and keep the dots in sync. Slides default to 70% of the track width; override with --b-slide-w . - Documentation: https://ui.barua.tz/docs/media.html#carousel - Classes: `b-btn` `b-btn--glass` `b-carousel` `b-carousel__dots` `b-carousel__nav` `b-carousel__nav--next` `b-carousel__nav--prev` `b-carousel__slide` `b-carousel__track` `b-icon-btn` ```html
``` ## Billboard The featured title on a media storefront: art behind, words in front. The scrim fades the picture into the page colour from below and from the start edge, so the text never fights it and the shelf underneath feels attached. Put .b-container on the body for the gutters. The block is tall on a phone — min(62svh, 34rem) — and capped on a desktop so the shelves stay above the fold; --b-billboard-h sets the height and --b-billboard-focus moves the picture's subject into view. - Documentation: https://ui.barua.tz/docs/media.html#billboard - Classes: `b-billboard` `b-billboard__actions` `b-billboard__art` `b-billboard__body` `b-billboard__lede` `b-billboard__scrim` `b-billboard__title` `b-body` `b-btn` `b-btn--glass` `b-btn--lg` `b-btn--pill` `b-btn--primary` `b-container` `b-line-clamp-3` `b-overline` ## Poster A title as a 2:3 picture with its name under it — the unit of a catalogue. The whole block is one link. The frame holds its shape before the picture arrives, so a slow connection never makes the shelf jump, and a title with no picture shows its initial on a plate tinted from the accent. A .b-badge in .b-poster__badge sits on the picture for a price or a state. .b-poster--wide is the 16:9 form for an episode; .is-selected marks the one playing. - Documentation: https://ui.barua.tz/docs/media.html#poster - Classes: `b-badge` `b-badge--accent` `b-badge--success` `b-btn` `b-btn--glass` `b-carousel` `b-carousel--posters` `b-carousel__nav` `b-carousel__nav--next` `b-carousel__nav--prev` `b-carousel__slide` `b-carousel__track` `b-icon-btn` `b-poster` `b-poster-grid` `b-poster__badge` `b-poster__facts` `b-poster__frame` `b-poster__initial` `b-poster__meta` `b-poster__title` ```html
TSh 2,000

Night Coast

2026Drama
Free

Dune Light

2025Adventure

Forest Fog

2024Thriller
Coming soon

TSh 2,000 Night Coast 2026 Drama Free Dune Light 2025 Adventure Forest Fog 2024 Thriller Coming soon ``` ## Video Player A 16:9 frame around a

1:24 / 3:47
1:24 / 3:47
``` ## Audio Player A compact row: .b-audio__art , a flexible .b-audio__meta block with title, artist and a .b-progress track, and transport buttons in .b-audio__controls . - Documentation: https://ui.barua.tz/docs/media.html#audio-player - Classes: `b-audio` `b-audio--glass` `b-audio__art` `b-audio__artist` `b-audio__controls` `b-audio__meta` `b-audio__title` `b-btn` `b-btn--ghost` `b-btn--primary` `b-icon-btn` `b-progress` `b-progress__fill` `b-waveform` ```html
Golden Hour
The Marine Layer
``` ```tsx import { Audio, Button, Progress } from "barua-ui"; ``` ## Media Controls The shared bottom bar used by the video player and any custom media frame. It pins to the bottom of the nearest position: relative ancestor over a soft black gradient, forces dark color-scheme, and makes any inner .b-icon-btn white and transparent. The .b-slider (a native range input from Forms ) flexes to fill the row, and .b-media-controls__time keeps timestamps in tabular numerals so they never wiggle. - Documentation: https://ui.barua.tz/docs/media.html#media-controls - Classes: `b-btn` `b-icon-btn` `b-media-controls` `b-media-controls__time` `b-slider` ```html
2:26 / 3:47
``` ```tsx import { Button, Slider } from "barua-ui";
2:26 / 3:47
``` ## Thumbnail A square media chip, sized with --b-thumb-size (default 4.5rem). .b-thumb--video overlays a play glyph, and .b-thumb__duration stamps a runtime in the corner. - Documentation: https://ui.barua.tz/docs/media.html#thumbnail - Classes: `b-thumb` `b-thumb--video` `b-thumb__duration` ```html
2:14
``` ```tsx import { Thumb } from "barua-ui";
2:14 ``` ## Media Placeholder The empty state for a media slot — a dashed 16:9 frame with a hatched fill and a quiet glyph. Use it wherever an image or video hasn't been chosen, uploaded or loaded yet; it holds the exact space the media will occupy. - Documentation: https://ui.barua.tz/docs/media.html#media-placeholder - Classes: `b-media-placeholder` ```html
``` ```tsx import { MediaPlaceholder } from "barua-ui"; ``` ## Upload Preview A grid of square tiles for files being attached. While a file uploads, float a .b-progress near the bottom edge; once done, show the .b-upload-preview__remove button. Pairs with the File Upload dropzone in Forms . - Documentation: https://ui.barua.tz/docs/media.html#upload-preview - Classes: `b-progress` `b-progress__fill` `b-upload-preview` `b-upload-preview__remove` `b-upload-previews` ```html
``` ```tsx import { Progress, UploadPreview, UploadPreviews } from "barua-ui";
``` ## Async Image SwiftUI's AsyncImage loading choreography: wrap the image in .b-async-img and add data-b-async — it shimmers while loading, then the picture fades in. Errors stop the shimmer and leave the quiet fill. - Documentation: https://ui.barua.tz/docs/media.html#async-image - Classes: `b-async-img` `b-footnote` `b-gap-4` `b-hstack` `b-stack--wrap` `b-text-secondary` ```html Sample ``` ```tsx import { AsyncImage } from "barua-ui"; Sample ```