{"id":23576007,"url":"https://github.com/theoplayer/react-native-theoplayer-sample-listview","last_synced_at":"2025-05-16T13:09:58.751Z","repository":{"id":262432458,"uuid":"671496591","full_name":"THEOplayer/react-native-theoplayer-sample-listview","owner":"THEOplayer","description":null,"archived":false,"fork":false,"pushed_at":"2024-09-30T09:36:44.000Z","size":3717,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-10T11:22:54.584Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/THEOplayer.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-07-27T12:59:33.000Z","updated_at":"2024-09-30T09:36:47.000Z","dependencies_parsed_at":"2024-11-12T12:38:49.763Z","dependency_job_id":null,"html_url":"https://github.com/THEOplayer/react-native-theoplayer-sample-listview","commit_stats":null,"previous_names":["theoplayer/react-native-theoplayer-sample-listview"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/THEOplayer%2Freact-native-theoplayer-sample-listview","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/THEOplayer%2Freact-native-theoplayer-sample-listview/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/THEOplayer%2Freact-native-theoplayer-sample-listview/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/THEOplayer%2Freact-native-theoplayer-sample-listview/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/THEOplayer","download_url":"https://codeload.github.com/THEOplayer/react-native-theoplayer-sample-listview/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254535827,"owners_count":22087399,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-12-26T21:11:45.583Z","updated_at":"2025-05-16T13:09:58.726Z","avatar_url":"https://github.com/THEOplayer.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Native THEOplayer Sample List View\n\n![](./doc/logo-react-native.png) ![](./doc/logo-theo.png)\n\n## License\n\nThis projects falls under the license as defined in https://github.com/THEOplayer/license-and-disclaimer.\n\n## Overview\n\nThis sample app showcases how to use [`react-native-theoplayer`](https://github.com/THEOplayer/react-native-theoplayer) to create a vertically scrolling list of video players. \nIt leverages the [`@shopify/flash-list`](https://www.npmjs.com/package/@shopify/flash-list) component, \nwhich enhances the functionality of [`recyclerlistview`](https://www.npmjs.com/package/recyclerlistview) for efficient list rendering.\n\nThe demo highlights key elements essential for delivering an optimized user experience with seamless scrolling and\nrapid playback startup.\n\n![](./doc/demo.gif)\n\n## Creating an Effective User Experience\n\nTo ensure a smooth and efficient user experience, we focus on these key areas:\n\n### Managing the THEOplayerView Lifecycle\n\nProper management of THEOplayerView and its associated THEOplayer instances is crucial. This includes:\n\n  - Maintaining a **limited number of active players** to optimize resource usage.\n  - **Recycling player instances** instead of constantly destroying and recreating them, which helps improve performance.\n\n### Handling Player Visibility\n\nWhile buffering can continue when a player is off-screen, playback should only begin when the player becomes visible. \nPlayback should pause or stop when the player scrolls out of view.\n\nIn this demo, multiple players can stream simultaneously while visible on the screen. \nWith minor adjustments, the app could be modified to allow only one player to start playback at a time or enable users \nto manually play/pause any of the visible players, instead of relying on autoplay.\n\n### Optimizing Time-To-First-Frame (TTFF)\n\nTo ensure rapid playback startup, we begin downloading video segments at the lowest acceptable quality. \nThis is achieved by setting the ABR (Adaptive Bitrate) strategy to performance. \n\n```tsx\nplayer.abr.strategy = ABRStrategyType.performance;\n```\n\nAfter the initial segments are loaded, the connection speed is assessed, allowing the player to \nautomatically adjust to an appropriate quality level.\n\n## App Design\n\nThe demo features a list of 50 items, reusing a limited set of DASH and HLS stream assets.\n\nA `PlayerListContentProvider` serves as the central data source, tracking all list items and their metadata, along with \nthe visibility status of each item. It also offers convenient methods for `FlashList` to toggle the visibility of each player.\n\nAdditionally, the `PlayerListContentProvider` can be extended to track the current playback position. \nThis would allow the app to resume playback from the same point when a player becomes visible again, \ncreating a built-in **bookmarking** feature.\n\n## Known Limitations\n\n- On Android, the audio focus manager currently pauses play-out whenever another player start playing. Because we allow multiple players to stream in parallel, we disabled this featured for this demo.\n- On iOS, enabling IMA client-side ads would impact performance slightly when setting a source. This results in scrolling not being smooth.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftheoplayer%2Freact-native-theoplayer-sample-listview","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftheoplayer%2Freact-native-theoplayer-sample-listview","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftheoplayer%2Freact-native-theoplayer-sample-listview/lists"}