Compose Multiplatform Media Player

Compose Multiplatform Media Player is a powerful media player library designed for Compose Multiplatform projects. It enables seamless video playback, reels viewing, audio playing, YouTube video integration, and now HLS m3u8 support on iOS, Android, and Desktop platforms. The library offers extensive customization options for various controls, making it flexible for different types of media applications.

🎉 What's New in Version 1.0.23

• 🚀 Compose 1.7.0-rc01 Compatibility: Now fully compatible with the latest Compose 1.7.0-rc01, ensuring smooth integration with your projects.
• 🔧 New videoFitMode Configuration: Added a flexible configuration for setting the default video screen mode to either Fit or Fill, offering better control over your video playback experience.

✨ Features

Cross-Platform Compatibility: Works seamlessly on iOS, Android, and Desktop platforms within Compose Multiplatform projects.

Video Playback: Effortlessly play videos in your app with high performance and reliability.

HLS m3u8 Playback: Stream live and on-demand content using the HLS .m3u8 format.

YouTube Playback: Integrate YouTube videos directly into your app, with full control over playback and video state management.

Reel Viewing: Enjoy reel viewing with support for horizontal and vertical scrolling.

Audio Playback: Enjoy high-quality audio playback with customizable controls.

Customizable Controls: Enable/disable pause/resume functionality and adjust the appearance and visibility of the seek bar, along with various control icons and colors.

📦 Installation

Add the following dependency to your build.gradle.kts file:

commonMain.dependencies {
    implementation("network.chaintech:compose-multiplatform-media-player:1.0.23")
}

💡 Note: For desktop video playback support, VLC player must be installed on your system.

🚨 Compatibility Notice 🚨

If you are using Kotlin version below 2.0.0 and Jetpack Compose version below 1.6.11, you may encounter compatibility issues with the current dependencies. ⚠️ To resolve these issues, please consider using an older version of the Compose Multiplatform Media Player library. 🎯

commonMain.dependencies {
    implementation("network.chaintech:compose-multiplatform-media-player:1.0.16")
}

🎬 Usage

📹 Video Playback

To play videos in your app, use the VideoPlayerView composable:

VideoPlayerView(
    modifier = Modifier.fillMaxSize(),
    url = videoUrl
)

💡 Note: The VideoPlayerView supports both online and local video playback. You can provide a URL for a remote video or a local file path.

▶️ YouTube Playback

To play youtube videos in your app, use the YouTubePlayerView composable:

YouTubePlayerView(
    modifier = Modifier.fillMaxSize(),
    videoId = youtubeVideoId
)

🎥 Reel Viewing

For reel viewing, utilize the ReelsPlayerView composable:

ReelsPlayerView(
    modifier = Modifier.fillMaxSize(),
    urls = videoUrlArray
)

🎧 Audio Playback

To play audio in your app, use the AudioPlayerView composable:

AudioPlayerView(
    modifier = Modifier,
    audios = audioFilesArray
)

💡 Note: The AudioPlayerView supports both online and local audio playback. You can provide a URL for a remote audio file or a local file path.

⚙️ Customization

You can customize various aspects of the media player:

• modifier: Modifies the layout and appearance of the video player and reel player.
• url: The URL of the video to be played in the video player.
• videoId: The YouTube video ID or URL to be played in the YouTube player.
• urls: An array of URLs for the reel player, allowing playback of multiple reels.
• playerConfig: You can configure various aspects of the video player appearance and behavior using the PlayerConfig data class.

• audioPlayerConfig: You can configure various aspects of the audio player appearance and behavior using the AudioPlayerConfig data class.

VideoPlayerView(modifier = Modifier.fillMaxSize(),
                url = videoUrl,
                playerConfig = PlayerConfig(
                    isPauseResumeEnabled = true,
                    isSeekBarVisible = true,
                    isDurationVisible = true,
                    seekBarThumbColor = Color.Red,
                    seekBarActiveTrackColor = Color.Red,
                    seekBarInactiveTrackColor = Color.White,
                    durationTextColor = Color.White,
                    seekBarBottomPadding = 10.dp,
                    pauseResumeIconSize = 40.dp,
                    isAutoHideControlEnabled = true,
                    controlHideIntervalSeconds = 5,
                    isFastForwardBackwardEnabled = true,
                    playIconResource = Res.drawable.icn_play,
                    pauseIconResource = Res.drawable.icn_pause,
                )
            )

YouTubePlayerView(modifier = Modifier.fillMaxSize(),
                videoId = "QFxN2oDKk0E",
                playerConfig = PlayerConfig(
                    isPauseResumeEnabled = true,
                    isSeekBarVisible = true,
                    isDurationVisible = true,
                    seekBarThumbColor = Color.Red,
                    seekBarActiveTrackColor = Color.Red,
                    seekBarInactiveTrackColor = Color.White,
                    durationTextColor = Color.White,
                    seekBarBottomPadding = 10.dp,
                    pauseResumeIconSize = 40.dp,
                    isAutoHideControlEnabled = true,
                    controlHideIntervalSeconds = 5,
                    isFastForwardBackwardEnabled = true,
                    playIconResource = Res.drawable.icn_play,
                    pauseIconResource = Res.drawable.icn_pause,
                )
            )

ReelsPlayerView(modifier = Modifier.fillMaxSize(),
        urls = videoUrlArray,
        playerConfig = PlayerConfig(
            isPauseResumeEnabled = true,
            isSeekBarVisible = false,
            isDurationVisible = false,
            isMuteControlEnabled = false,
            isSpeedControlEnabled = false,
            isFullScreenEnabled = false,
            isScreenLockEnabled = false,
            reelVerticalScrolling = true
        )
    )

val audioFilesArray = listOf(
        AudioFile(
            audioUrl = "https://codeskulptor-demos.commondatastorage.googleapis.com/GalaxyInvaders/theme_01.mp3",
            audioTitle = "Galaxy Invaders",
            thumbnailUrl = "https://c.saavncdn.com/866/On-My-Way-English-2019-20190308195918-500x500.jpg"
        ),
        AudioFile(
            audioUrl = "https://codeskulptor-demos.commondatastorage.googleapis.com/pang/paza-moduless.mp3",
            audioTitle = "Paza Moduless"
        )
    )

AudioPlayerView(
        modifier = Modifier,
        audios = audioFilesArray,
        audioPlayerConfig = AudioPlayerConfig(
            isControlsVisible = true,
            fontColor = Color.White,
            iconsTintColor = Color.White
        )
    )

📀 Format Support

📖 Detailed Explanation

For an in-depth guide and detailed explanation, check out our comprehensive Medium Blog Post.

🛤️ Roadmap

We're committed to continuously improving and expanding the capabilities of our media player library. Here's a glimpse into our future plans:

🌟 Upcoming Features

• Picture-in-Picture (PiP) Mode
• YouTube support for Desktop

📄 License

Copyright 2023 Mobile Innovation Network

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.