From 14dca7405e4a9c9de841bc45778ca89fa2557592 Mon Sep 17 00:00:00 2001 From: Zoe Roux Date: Mon, 13 Jul 2026 11:43:04 +0200 Subject: [PATCH] Add a readme, make it easier to install --- README.md | 267 +++++++++++++++++++++++++++++++++++-- bun.lock | 152 ++++++++++++++++----- example/App.tsx | 5 - example/webpack.config.js | 24 +--- package.json | 3 + patches/jassub@2.5.6.patch | 14 ++ src/index.ts | 15 +++ src/view.web.tsx | 4 +- 8 files changed, 406 insertions(+), 78 deletions(-) create mode 100644 patches/jassub@2.5.6.patch diff --git a/README.md b/README.md index 6f39295..4a918cb 100644 --- a/README.md +++ b/README.md @@ -1,18 +1,19 @@ # react-native-omni -video player using vlc and videojs +A library to have real players on android and web. It uses VLC on android and +videojs v10 on the web (ios not implemented yet, PR welcome) -[![Version](https://img.shields.io/npm/v/react-native-omni.svg)](https://www.npmjs.com/package/react-native-omni) -[![Downloads](https://img.shields.io/npm/dm/react-native-omni.svg)](https://www.npmjs.com/package/react-native-omni) -[![License](https://img.shields.io/npm/l/react-native-omni.svg)](https://github.com/patrickkabwe/react-native-omni/LICENSE) +## Features -## Requirements +- **vlc v4**: to support more codecs than exoplayer, hdr and so on +- **Adaptive streaming**: HLS out of the box, with automatic quality + (rendition) selection or manual override. +- **Multi-track playback**: enumerate and switch video, audio, and subtitle + tracks at runtime. +- **Rich subtitle support**: vtt, srt, ass (via [jassub](https://github.com/ThaUnknown/jassub)) and pgs (via [libpgs](https://github.com/Arcus92/libpgs-js)) +- **Picture-in-Picture**: enter PiP automatically or on demand on Android. +- **and basic player stuff**: media sessions, playlists, hook based api... -- React Native v0.76.0 or higher -- Node 18.0.0 or higher - -> [!IMPORTANT] -> To Support `Nitro Views` you need to install React Native version v0.78.0 or higher. ## Installation @@ -20,10 +21,248 @@ video player using vlc and videojs bun add react-native-omni react-native-nitro-modules ``` -## Credits +### Expo config plugin (Android) -Bootstrapped with [create-nitro-module](https://github.com/patrickkabwe/create-nitro-module). +The library ships an Expo config plugin that wires up media notifications and +picture-in-picture. Add it to your `app.json` / `app.config.js`: -## Contributing +```json +{ + "expo": { + "plugins": ["react-native-omni"] + } +} +``` -Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change. +The plugin will: + +- Register the `OmniPlayerService` media session service and add the + `FOREGROUND_SERVICE` / `FOREGROUND_SERVICE_MEDIA_PLAYBACK` permissions. +- Enable Picture-in-Picture on your `MainActivity` (declares + `supportsPictureInPicture`, adds the required `configChanges`, and hooks the + pip lifecycle callbacks). + +If you are not using Expo, replicate those manifest/activity changes manually. + +### Web setup + +Most features are available out of the box, you need custom steps for advanced +subtitles rendering: + +
+ +ass rendering + +#### Fonts + +JASSUB only renders glyphs for fonts it has, and does **not** ship a usable +default font. Provide the fonts a subtitle references through +`source.fonts` (an array of font-file URLs). Optionally set +`subtitleAssets.jassub.fontUrl` as a fallback for styles whose font isn't +listed. If no matching font is available, that text simply won't appear. + +#### Cross-origin isolation + +jassub's wasm is multi-threaded and relies on `SharedArrayBuffer`, which +browsers only expose on a **cross-origin-isolated** page. Serve these response +headers on your HTML document: + +``` +Cross-Origin-Opener-Policy: same-origin +Cross-Origin-Embedder-Policy: credentialless +``` + +`credentialless` keeps cross-origin video/subtitle/font requests working without +requiring `Cross-Origin-Resource-Policy` headers on every remote asset. Without +isolation, JASSUB initializes but silently never renders. + +
+ +## Quick start + +Wrap your player UI in an `OmniProvider` with a `source`, then render an +`OmniView` and drive it with the hooks. + +```tsx +import { + OmniProvider, + OmniView, + usePlayer, + usePlayerState, + useEvent, +} from "react-native-omni"; + +function Player() { + const player = usePlayer(); + const isPlaying = usePlayerState("isPlaying"); + const currentTime = usePlayerState("currentTime"); + const duration = usePlayerState("duration"); + + useEvent("end", () => player.playNext()); + + return ( + <> + +