KMP Video Player 🎬

A cross-platform video player application built with Kotlin Multiplatform (KMP) for Android and iOS, featuring integration with the Pexels Video API.

Features ✨

• Cross-Platform: Shared business logic between Android and iOS
• Video Streaming: Stream videos from Pexels API
• Search Functionality: Search for videos by keywords
• Popular Videos: Auto-load popular videos on app launch
• Thumbnail Preview: Display video thumbnails in the list
• Video Player:
  • Android: ExoPlayer with full controls
  • iOS: AVPlayer with native controls
• Responsive UI: Beautiful Material Design (Android) and SwiftUI (iOS)
• Error Handling: Graceful error messages and retry options
• High-quality Videos: Multiple resolution options available

Tech Stack 🛠️

Shared Layer (Kotlin Multiplatform)

• Kotlin Coroutines - Async operations & state management
• Ktor Client - HTTP networking library
• Kotlinx Serialization - JSON parsing
• Pexels Video API - Video data source

Android

• Jetpack Compose - Modern declarative UI framework
• Media3 (ExoPlayer) - Professional video player
• Lifecycle - ViewModel & state management
• Coil - Image loading library

iOS

• SwiftUI - Apple's modern UI framework
• AVPlayer - Native video playback
• Combine - Reactive programming framework

Project Structure 📁

MoviePlayer/
├── shared/                          # Shared KMP code
│   ├── src/commonMain/kotlin/
│   │   ├── data/
│   │   │   ├── models/
│   │   │   │   └── PexelsVideo.kt   # API response models
│   │   │   └── remote/
│   │   │       └── PexelsApiClient.kt
│   │   └── domain/
│   │       └── PlaylistManager.kt   # State management
│   └── build.gradle.kts
│
├── androidApp/                      # Android application
│   ├── src/main/kotlin/
│   │   ├── ui/
│   │   │   ├── VideoSearchScreen.kt
│   │   │   ├── VideoPlayerScreen.kt
│   │   │   └── VideoSearchViewModel.kt
│   │   └── MainActivity.kt
│   └── build.gradle.kts
│
├── iosApp/                          # iOS application
│   ├── iosApp/
│   │   ├── Models/
│   │   │   └── VideoModels.swift
│   │   ├── ViewModels/
│   │   │   └── VideoPlayerViewModel.swift
│   │   ├── Views/
│   │   │   ├── VideoListView.swift
│   │   │   └── VideoPlayerView.swift
│   │   ├── ContentView.swift
│   │   ├── iOSApp.swift
│   │   └── Info.plist
│   └── iosApp.xcodeproj
│
├── gradle/
│   └── libs.versions.toml           # Centralized dependency management
│
└── build.gradle.kts (root)

Screenshots 📸

Android App

Video List Screen

Features:

• Auto-loads popular videos on app launch
• Beautiful card design with video thumbnails
• Video duration and photographer name displayed
• Search bar for finding specific videos
• Play button for quick access

Video Player Screen

Features:

• Full-screen ExoPlayer with native controls
• Play/Pause, Seek, and Volume controls
• Video information displayed below player
• Quick back button to return to list
• Smooth video playback

Getting Started 🚀

Installation Steps

1. Clone the Repository

cd MoviePlayer

2. Get Pexels API Key

1. Visit Pexels API
2. Click "Request API" button
3. Sign up for a free account

3. Configure API Key

For Android:

1. Open androidApp/src/main/kotlin/dev/rrb/movieplayer/android/MainActivity.kt
2. Replace YOUR_PEXELS_API_KEY_HERE with your actual API key

VideoSearchScreen(apiKey = "YOUR_ACTUAL_API_KEY")

For iOS:

1. Open iosApp/iosApp/ContentView.swift
2. Replace YOUR_PEXELS_API_KEY_HERE with your actual API key

VideoPlayerViewModel(apiKey: "YOUR_ACTUAL_API_KEY")

4. Build and Run

Android:

# Build the app
./gradlew androidApp:build

# Install on connected device or emulator
./gradlew androidApp:installDebug

# Or run directly
./gradlew androidApp:run

iOS:

# Navigate to iOS app directory
cd iosApp/iosApp

# Open in Xcode
open iosApp.xcodeproj

# Select simulator or device
# Press Cmd + R to run

Usage 💡

Android App Flow

1. Launch App → Popular videos load automatically
2. Browse Videos → Scroll through video list with thumbnails
3. Search Videos → Enter search term and tap "Search"
4. Play Video → Tap any video card to open player
5. Control Playback → Use ExoPlayer controls (play, pause, seek, volume)
6. Return to List → Tap "Back to List" button

iOS App Flow

1. Launch App → Popular videos load automatically
2. Browse Videos → Scroll through video list
3. Search Videos → Enter search term and tap "Search"
4. Play Video → Tap any video to open player
5. Control Playback → Use AVPlayer controls
6. Return to List → Tap "Back to List" button

API Integration 🔌

Pexels Video API

Endpoint: https://api.pexels.com/videos/search

Shared Layer (KMP)

data/
├── models/
│   ├── Video.kt              # Main video model
│   ├── PlaybackState.kt      # Playback state model
│   └── PexelsVideo.kt        # Pexels API models
└── remote/
    └── PexelsApiClient.kt    # API communication

domain/
└── PlaylistManager.kt         # Business logic & state management

Android Layer

ui/
├── VideoSearchScreen.kt       # Video list UI
├── VideoPlayerScreen.kt       # Player UI
├── VideoSearchViewModel.kt    # ViewModel
└── VideoSearchViewModelFactory.kt

iOS Layer

Models/
└── VideoModels.swift

ViewModels/
└── VideoPlayerViewModel.swift

Views/
├── VideoListView.swift
└── VideoPlayerView.swift

Data Flow

API (Pexels)
    ↓
PexelsApiClient (Shared)
    ↓
PlaylistManager (Shared) → StateFlow
    ↓
Android (ViewModel) ←→ iOS (ViewModel)
    ↓
UI (Compose) ←→ UI (SwiftUI)
```✨

### Video List Screen
- ✅ Auto-loads popular videos
- ✅ Lazy loading with thumbnails
- ✅ Search functionality
- ✅ Video duration display
- ✅ Photographer information
- ✅ Material Design cards (Android)
- ✅ SwiftUI native appearance (iOS)

### Video Player
- ✅ Full-screen video playback
- ✅ Play/Pause controls
- ✅ Seek bar with timestamp
- ✅ Volume control
- ✅ Video information display
- ✅ Back navigation
- ✅ Automatic cleanup on exit


## Performance Optimization ⚡

- **Lazy Image Loading**: Thumbnails loaded on-demand with Coil (Android)
- **Efficient Coroutines**: Non-blocking API calls
- **Memory Management**: Proper player resource cleanup
- **Efficient JSON Parsing**: Using kotlinx.serialization
- **Network Optimization**: Connection reuse with Ktor

### Code Style
- Follow Kotlin naming conventions
- Use meaningful variable names
- Add comments for complex logic
- Keep functions small and focused