An app showing how to make an Instagram/YouTube Shorts/TikTok style video pager

Overview

demo

It's pretty straightforward to get started using ExoPlayer by following the library's Hello world! documentation. Once you throw Android's lifecycles and state management into the mix, however, things quickly get more complex. It's easy to accidentally leak memory and hard to coordinate things in a way that's efficient and looks good in the UI. And that's just for playback of videos on a simple screen! Combining ExoPlayer with a ViewPager or RecyclerView adds a whole 'nother layer of complexity.

With this repository I wanted to demonstrate a small app showing how to do Instagram/YouTube Shorts/TikTok style video paging in a way that reconciles Android lifecycles and state management.

The approach I took is to reuse the same ExoPlayer and PlayerView instance for all pages. The ExoPlayer instance lives in and is managed by MainViewModel, and a singular PlayerView gets attached to whichever ViewHolder is active on the current page. Having only one PlayerView makes for a lot less state management.

I've been a bit more verbose with comments than I typically would in this repository, for the purposes of clarity. For testability I've added abstractions that wrap a few ExoPlayer APIs. I've also used an MVI architecture; this increases boilerplate but greatly minimizes state management.

This repository includes examples of streaming videos over the network (from Reddit /r/tiktokcringe) and local assets. It can be modified to handle video data coming from any data source.

Comments
  • How to use with remote data

    How to use with remote data

    Hi, asking for help on how to use with remote data

    I have a video app where a user posts a video to firebase realtime db and then i have to fetch and display the videos

    My repository for fetching videos

    override suspend fun getVidoRandVideos(): Flow<FlowDataState<List>> { return realFire.getReference(firePath.getAllVideosPath()).also { it.keepSynced(true) } .limitToFirst(12) .awaitSingleValueEventList()

    }
    

    // getting the list of videos

    override fun videoData(): Flow<List> { return flowOf(videoData) } override suspend fun getData() { getVidoRandVideos().collect { when (it) { is FlowDataState.Success -> { videoData = it.data } is FlowDataState.Error -> {

                }
            }
        }
    }
    

    How can use the VideoDataRepositories to fetch this data instead of hard coding it ?

    interface VideoDataRepository { fun videoData(): Flow<List> }

    class AssetVideoDataRepository : VideoDataRepository { override fun videoData(): Flow<List> { return flowOf(videoData) } companion object {

    // DONT WANT TO HARD CODE BUT SHOULD FETCH FROM REMOTE DATASOURCE AND ALSO BE ABLE TO OBSERVE IN THE VIEWMODEL private val videoData = listOf( RemoteVideo("https://firebasestorage.googleapis.com/v0/b96c-5868-4a4b-a48e-c8e9f3dd7b13?alt=media&token=14a443fd-75e9-42a8-880e-5b8a6df5e0a2", description="#nice the best" , tags= mapOf(), duration=831, videoId="2c7effa1-319e-4073-948f-20543c60503b", dateCreated=1628120270055, likes=0, views=0, authorUid="loUXJN7p4WbzYke94eiRq7QK64Y2", totalCommentsSize=0), RemoteVideo("https://firebasestorage.googleapis.com/v0/boUXJN7p4WbzYke94eiRq7QK64Y2%2F699e8432-257a-4663-877e-9b29807d564f?alt=media&token=e5042726-2ec5-4d42-b8e4-23cf5169b780", description="#nice the best" , tags= mapOf(), duration=831, videoId="2c7effa1-319e-4073-948f-20543c60503b", dateCreated=1628120270055, likes=0, views=0, authorUid="loUXJN7p4WbzYke94eiRq7QK64Y2", totalCommentsSize=0), RemoteVideo("https://-3af2-44ed-8d1a-8b09134aaf07", description="#nice the best" , tags= mapOf(), duration=831, videoId="2c7effa1-319e-4073-948f-20543c60503b", dateCreated=1628120270055, likes=0, views=0, authorUid="loUXJN7p4WbzYke94eiRq7QK64Y2", totalCommentsSize=0), ) } }

    opened by heromiyo 3
  • video with Images

    video with Images

    first of all:Great code! I would like to display images and video in the same viewpager with a VideosViewHolder and an ImagesViewHolder. Please advise on how to go about this.

    opened by denno640 2
  • youtube kuds ui player

    youtube kuds ui player

    please make the kotlin / android project exoplayer play videos like youtube kids player ui

    please take a look this: https://github.com/superbderrick/SummerPlayerView

    opened by ngarangan 1
  • create progress bar for every video

    create progress bar for every video

    this is a perfect example, could you please give a hint or instruction on the best way if I want to add a linear progress bar within every screen, with the MVI? thanks :)

    opened by Elbehiry 1
  • Open source license

    Open source license

    Hello!

    We would like to use your videopager library for our app in production. We did not find any license information anywhere. Would it be possible to use it and/or modify it in our codebase? Thanks!

    opened by SeanBlahovici 1
Owner
Nick
Nick
A Tiktok style feed of songs

?? Nooble Engineering Challenge (Android Developer) ?? Test instructions are here ?? Description This test solution is implemented with Clean Architec

Desmond Ngwuta Chidiebere 3 May 6, 2022
Convert your YouTube channel into a native Android app using YouTube Data API v3.

Convert your YouTube channel into an app. Screenshots • Description • Features • Configuration • Documentation Screenshots Description Channelify is a

Aculix Technologies LLP 121 Dec 26, 2022
A simple library for parsing and playing links from YouTube, YouTube Music, Vimeo and Rutube is WebView without the need to connect api data services. Request caching is available now

Android Oembed Video A simple library for parsing and playing links from YouTube, YouTube Music, Vimeo and Rutube and others in the WebView without th

Alexey Mostovoy 32 Oct 8, 2022
Youtube-dl UI - Youtube-dl ui built with kotlin and jetpack compose

youtube-dl_UI youtube-dl ui built with kotlin and jetpack compose.

null 0 Feb 11, 2022
Youtube Android Clone 🚀an Android Youtube Clone made out of XML and Kotlin

Youtube Android Clone ?? This app consumes The Youtube Api to fetch and display a list of popular videos, The app uses MVVM design pattern to allow se

Breens Robert 38 Dec 13, 2022
An easy to use Instagram Video Downloader library for android apps.

Instagram-Video-Downloader-Library An easy to use library for directly download videos from ig reels, igtv. Implementation Step 1. Add the JitPack rep

Abhay 16 Dec 7, 2022
Library for Instagram Image/Video Downloader for Android

Insta Downloader Simple Instagram Image Video Downloader Library for Android Implementation Step 1. Add the JitPack repository to your build file Add

kannikesh Prabhu 2 Mar 12, 2022
Free p2p cdn android github sdk to reduce video streaming costs of live and on demand video using webrtc by upto 90% and improve scalability by 6x - 🚀 Vadootv 🚀

Android p2p cdn sdk to distribute load and reduce costs(https://peervadoo.com) Vadootv is a p2p sdk integration to reduce your video streaming costs b

Vadootv 40 Oct 5, 2022
Yet Another Video Player (or YAVP) is a Video Player for Android that is based on Googles ExoPlayer.

Yet Another Video Player Yet Another Video Player (or YAVP) is a Video Player for Android that is based on Googles ExoPlayer. Who Is YAVP For? First o

null 62 Dec 29, 2022
Video Transcoder is an application which uses the open source program FFmpeg to transcode video files from one format to another.

Video Transcoder Do you want to encode videos on your phone into different formats, trim videos, or extract audio? Are you looking for a free solution

Branden Archer 358 Dec 30, 2022
Compose-video-player - Video player for Android Compose powered by ExoPlayer

Compose Video Player Video player for Android Compose powered by ExoPlayer. Addi

Juan Pablo Herrera 22 Dec 13, 2022
The Madman library (Media Ads Manager) enables you to advertise video contents with video ads.

Madman (Media ads manager) is a high performance alternative to Google's standard IMA android SDK. If you have your own VAST server and want to render video ads and have full control over the UI, then this library is for you.

Flipkart Incubator 65 Nov 10, 2022
An android MVVM clone of Youtube created completely from scratch.

An android MVVM clone of Youtube created completely from scratch. Uses the Youtube data API. Has no signup/login features, rather direct search and watch videos. Creating and saving to playlists, dowloading videos will also be supported.

null 29 Jan 2, 2023
Silky - Android application to convert videos from applications such as YouTube, Facebook, Twitter into audio (.mp3)

Silky Español (actualmente la app se encuentra en desarrollo ) Descripcion Aplic

null 2 Aug 24, 2022
SpotiFlyer - Kotlin Multiplatform Music Downloader ,supports Spotify, Youtube, Gaana, Jio-Saavn and SoundCloud

SpotiFlyer Kotlin Multiplatform Music Downloader ,supports Spotify, Youtube, Gaa

Gas Com IT 1 Feb 8, 2022
A modern front-end for YouTube built using Kotlin compose

A modern front-end for YouTube built using Kotlin compose, with Material You theming and many more features.

Nick 379 Jan 5, 2023
Alternative YouTube frontend for Android built with Piped

Alternative YouTube frontend for Android built with Piped

Libre-Tube 4k Dec 31, 2022
TunePlayer is a basic music player app aimed at showing how MusicServiceCompat and MusicBrowerCompat can be used to build a music playback service

TunePlayer TunePlayer is a basic music player app aimed at showing how MusicServiceCompat and MusicBrowerCompat can be used to build a music playback

Abdulmalik 6 Nov 18, 2022
Android/iOS video player based on FFmpeg n3.4, with MediaCodec, VideoToolbox support.

ijkplayer Platform Build Status Android iOS Video player based on ffplay Download Android: Gradle # required allprojects { repositories {

bilibili 31k Jan 3, 2023