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

Last update: May 17, 2022

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.

GitHub

https://github.com/nihk/videopager
You might also like...

Compose-video-player - Video player for Android Compose powered by ExoPlayer

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

May 18, 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 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

Nov 9, 2021

An android MVVM clone of Youtube created completely from scratch.

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.

Jan 26, 2022

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

Feb 9, 2022

SpotiFlyer - Kotlin Multiplatform Music Downloader ,supports Spotify, Youtube, Gaana, Jio-Saavn and SoundCloud

SpotiFlyer - Kotlin Multiplatform Music Downloader ,supports Spotify, Youtube, Gaana, Jio-Saavn and SoundCloud

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

Feb 8, 2022

A modern front-end for YouTube built using Kotlin compose

 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.

May 17, 2022

Alternative YouTube frontend for Android built with Piped

Alternative YouTube frontend for Android built with Piped

Alternative YouTube frontend for Android built with Piped

May 17, 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 {

May 19, 2022

Custom Android view with video player, loader and placeholder image

Custom Android view with video player, loader and placeholder image

VideoPlayerView Custom Android view with video player, loader and placeholder image. To stay up-to-date with news about the library Usage Here is an e

Jan 18, 2022
Comments
  • 1. 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), ) } }

    Reviewed by heromiyo at 2021-08-07 06:11
  • 2. 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.

    Reviewed by denno640 at 2022-01-24 18:15
A Tiktok style feed of songs
A Tiktok style feed of songs

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

May 6, 2022
Convert your YouTube channel into a native Android app using YouTube Data API v3.
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

Apr 9, 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
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

Mar 22, 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

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

Feb 11, 2022
Youtube Android Clone 🚀an Android Youtube Clone made out of XML and Kotlin
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

May 1, 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

Apr 25, 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

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 🚀
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

Apr 11, 2022
Yet Another Video Player (or YAVP) is a Video Player for Android that is based on Googles ExoPlayer.
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

Apr 24, 2022
Video Transcoder is an application which uses the open source program FFmpeg to transcode video files from one format to another.
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

May 16, 2022