Future Plans

• Desktop Playback Support.
• Audio player Customisation Support.
• Video and Audio picker for Android, iOS, Web and Desktop.
• Local Content Support.
• Playback Support.

Installation

You can include MediaPlayer-KMP in your project by adding the following dependency:

Version Catelog

[versions]
mediaPlayerKMP = "2.0.9"

[libraries]
alert-kmp = { module = "io.github.khubaibkhan4:mediaplayer-kmp", version.ref = "mediaPlayerKMP" }

implementation("io.github.khubaibkhan4:mediaplayer-kmp:2.0.9")

Usage

YouTube Video Player

For the YouTube Player, you just need to provide the youtube video link. It will automatically detect it & will launch the YouTube Player.

import io.github.khubaibkhan4.mediaplayer.VideoPlayer

fun main() {
    VideoPlayer(modifier = Modifier.fillMaxWidth().height(340.dp),
            url = "https://www.youtube.com/watch?v=AD2nEllUMJw", // Automatically Detect the URL, Wether to Play YouTube Video or .mp4 e.g
            showControls: Boolean = true,
    )
}

Video Player

For the YouTube Player, you just need to provide the youtube video link. It will automatically detect it & will launch the YouTube Player. It almost supports all the video extensions.

import io.github.khubaibkhan4.mediaplayer.VideoPlayer

fun main() {
    VideoPlayer(modifier = Modifier.fillMaxWidth().height(340.dp),
            url = "https://freetestdata.com/wp-content/uploads/2022/02/Free_Test_Data_1MB_MP4.mp4", // Automatically Detect the URL, Wether to Play YouTube Video or .mp4 e.g
            showControls: Boolean = true,
    )
}

Play Local File

To Play Local files, you just need to provide the file path.

import io.github.khubaibkhan4.mediaplayer.VideoPlayer

fun main() {
   VideoPlayerScreen(
                url = filePath,
                autoPlay = false,
                onInteraction = {},
                showControls = true
   )
}

Audio Player Support

Audio Player Support is Implemented. It supports mp3 wav aac ogg m4a. It Supports Play Back, Volume Up, Down and Stability as well.

import io.github.khubaibkhan4.mediaplayer.VideoPlayer

fun main() {
    MediaPlayer(
            modifier = Modifier.fillMaxWidth(),
            url = "https://commondatastorage.googleapis.com/codeskulptor-demos/DDR_assets/Kangaroo_MusiQue_-_The_Neverwritten_Role_Playing_Game.mp3",
            startTime = Color.Black,
            endTime = Color.Black,
            volumeIconColor = Color.Black,
            playIconColor = Color.Blue,
            sliderTrackColor = Color.LightGray,
            sliderIndicatorColor = Color.Blue,
            showControls: Boolean = true,
    )
}

Authentication Token Support

Providing the Auth Tokens are pretty simple. You just need to add the headers. You can add the headers with key and value pairs.

MediaPlayer(
        modifier = Modifier.fillMaxSize(),
        url = "https://example.com/protected-video.mp4",
        headers = mapOf(
                "Authorization" to "Bearer your_token",
                "Custom-Header" to "YourValue"
        ),
        startTime = Color.Red,
        endTime = Color.Blue,
        autoPlay = true,
        volumeIconColor = Color.Green,
        playIconColor = Color.Yellow,
        sliderTrackColor = Color.Gray,
        sliderIndicatorColor = Color.Magenta,
        showControls: Boolean = true,
)

Reels View Support

@Composable
fun MainScreen() {
    val videoUrls = listOf(
            "https://www.example.com/video1.mp4",
            "https://www.example.com/video2.mp4",
            "https://www.example.com/video3.mp4"
    )
    ReelsView(
            videoUrls = videoUrls,
            pagerType = PagerType.Vertical, // Choose PagerType.Vertical or PagerType.Horizontal
            modifier = Modifier.fillMaxSize(),
            autoPlay = true, // Enable auto-play for videos
            showControls: Boolean = true,
            onInteraction = { page, url ->
                println("User interacted with page $page, video URL: $url")
            }
    )
}

Embed Content from Url:

val viewer = HtmlContentViewerFactory().createHtmlContentViewer()
val htmlEmbedFeature = HtmlEmbedFeature(viewer)

htmlEmbedFeature.embedHtml(
    url = "https://github.com/KhubaibKhan4/MediaPlayer-KMP/",
    options = EmbedOptions(
        customCss = "body { background-color: #f0f0f0; }",
        onPageLoaded = { println("Page loaded successfully!") },
        onError = { error -> println("Error loading page: $error") }
    )
)

HtmlContentViewerView(
    viewer = viewer,
    modifier = Modifier
        .fillMaxSize()
)

JavaScript execution + element querying

val viewer = HtmlContentViewerFactory().createHtmlContentViewer()

viewer.loadUrl("https://example.com")
viewer.setPageLoadListener {
    viewer.evaluateJavaScript("document.title") { title ->
        println("Page title: $title")
    }
}

🤝 Connect with Me

Let's chat about potential projects, job opportunities, or any other collaboration! Feel free to connect with me through the following channels:

💰 You can help me by Donating

Screenshots

Embedded Content Support

Demo

https://github.com/KhubaibKhan4/MediaPlayer-KMP/assets/98816544/657ad29d-5129-4f78-af56-ad354ba0935d

Desktop Demo

https://github.com/KhubaibKhan4/MediaPlayer-KMP/assets/98816544/efd68685-2f41-4445-ad76-c183869ab93a

Star History

Stargazers

Forkers

[![Forkers repo roster for @KhubaibKhan4/MediaPlayer-KMP](http://reporoster.com/forks/dark/KhubaibKhan4/MediaPlayer-KMP