Enables development of cross-platform applications with configurations for Android, iOS, desktop, and browser environments. Supports publishing to MavenCentral and building platform-specific artifacts.
A flexible and customizable Compose Multiplatform seekbar for frame-based timelines
A customizable Kotlin Multiplatform seekbar component for Compose Multiplatform applications. Perfect for media players, video editing tools, or any scenario requiring precise position control within a frame-based timeline.
Float) and discrete () navigation.Add FrameBar to your commonMain dependencies:
kotlin {
sourceSets {
commonMain.dependencies {
implementation("com.rafambn:FrameBar:1.0.0")
}
}
}
val currentFrame = remember { mutableStateOf(0) }
FrameBar(
pointer = pointer,
markers = frameMarkers,
index = currentFrame.value,
onIndexChange = { newFrame ->
currentFrame.value = newFrame
}
)
FrameBar(
value = currentPosition.value,
valueRange = 0f..100f, // Map pixels to custom range
onValueChange = { normalizedValue ->
// Convert back to your application's values
val actualPosition = normalizedValue * totalDurationMs
seekTo(actualPosition)
}
)
FrameBar(
pointer = pointer,
markers = markers,
value = currentPosition.value,
onValueChange = { position ->
// Continuous updates during drag
updatePosition(position)
},
onDragStarted = {
// User started dragging
showPreview()
},
onDragStopped = {
// User finished dragging
hidePreview()
commitPosition()
}
)
Marker Configuration
val coloredMarker = Marker(
size = DpSize(15.dp, 20.dp),
topOffset = 10.dp,
color = Color.Blue
)
val imageMarker = Marker(
size = DpSize(20.dp, 30.dp),
topOffset = 5.dp,
bitmap = myImageBitmap
)
Pointer selection modes:
import com.rafambn.framebar.enums.PointerSelection
FrameBar(
pointerSelection = PointerSelection.LEFT, // Left edge of pointer
// or
pointerSelection = PointerSelection.CENTER, // Center of pointer (default)
// or
pointerSelection = PointerSelection.RIGHT, // Right edge of pointer
// ... other parameters
)
Pointer coercion mode:
import com.rafambn.framebar.enums.CoercePointer
FrameBar(
coercedPointer = CoercePointer.COERCED, // Pointer stays within bounds
// or
coercedPointer = CoercePointer.NOT_COERCED, // Default behavior
// ... other parameters
)
Intimport com.rafambn.framebar.FrameBar
import com.rafambn.framebar.Marker
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.unit.DpSize
fun MyVideoPlayer() {
val currentPosition = remember { mutableStateOf(0f) }
val markers = listOf(
Marker(size = DpSize(10.dp, 40.dp), topOffset = 0.dp, color = Color.Gray),
Marker(size = DpSize(10.dp, 40.dp), topOffset = 10.dp, color = Color.Gray),
Marker(size = DpSize(10.dp, 40.dp), topOffset = 0.dp, color = Color.Gray),
)
val pointer = Marker(
size = DpSize(10.dp, 40.dp),
topOffset = 5.dp,
color = Color.Yellow,
)
FrameBar(
pointer = pointer,
markers = markers,
value = currentPosition.value,
onValueChange = { newPosition ->
currentPosition.value = newPosition
},
)
}
Surfaced from shared tags and platforms — no rankings paid for.