Merge pull request #27 from THEOplayer/release/v0.7.0

Release/v0.7.0

Author: MattiasBuelens

.github/workflows/main.yml

@@ -5,21 +5,18 @@ on:
     branches: [ "develop", "master" ]
   pull_request:
     branches: [ "develop", "master" ]
-
   workflow_dispatch:
 
 jobs:
   lint:
     runs-on: ubuntu-latest
-
     steps:
-      - uses: actions/checkout@v3
-      
+      - uses: actions/checkout@v4
       - name: Setup Node.js environment
-        uses: actions/[email protected]
-              
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
       - name: Run npm
         run: npm ci
-
       - name: Check lint
         run: npm run lint

.github/workflows/npm-publish.yml

@@ -8,23 +8,13 @@ on:
     types: [created]
 
 jobs:
-  build:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
-        with:
-          node-version: 16
-      - run: npm ci
-
   publish-npm:
-    needs: build
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
-          node-version: 16
+          node-version: 20
           registry-url: https://registry.npmjs.org/
       - run: npm ci
       - run: npm publish --access public

.github/workflows/pages.yml

@@ -0,0 +1,51 @@
+# Based on https://github.com/actions/starter-workflows/blob/b53d05e4b0dde7cdaeda60476acfcaaa1713f8cc/pages/jekyll-gh-pages.yml
+name: GitHub Pages
+
+on:
+  # Runs on pushes targeting the master branch
+  push:
+    branches:
+      - master
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: 'pages'
+  cancel-in-progress: false
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Setup Pages
+        uses: actions/configure-pages@v4
+      - name: Setup Node.js environment
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+      - name: Run npm
+        run: npm ci
+      - name: Build API docs
+        run: npm run docs -- --out ./_site/api
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+  deploy:
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}

.gitignore

@@ -70,3 +70,6 @@ ios/custom/Frameworks/**/*.zip
 ios/custom/Frameworks/integrations
 ios/build.sh
 ios/custom/Frameworks/tvos/*.xcframework
+
+# TypeDoc
+api/

CHANGELOG.md

@@ -1,17 +1,32 @@
+---
+description: Find out what's new in the React Native UI.
+sidebar_custom_props: { 'icon': '📰' }
+---
+
 # Changelog
 
 All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
-## [0.6.0] - 24-03-27
+## 0.7.0 (2024-04-11)
+
+### Added
+
+- Added support for THEOplayer 7.0 and React Native THEOplayer 7.0.
+
+### Fixed
+
+- Fixed TypeScript type definitions to export interfaces describing the props for all components.
+
+## 0.6.0 (2024-03-27)
 
 ### Fixed
 
 - Fixed an issue where the skip buttons would remain disabled for MP4 sources.
 
-## [0.5.0] - 24-03-06
+## 0.5.0 (2024-03-06)
 
 ### Added
 
@@ -21,19 +36,19 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 - Fixed connected state for chromecastButton to not take into account the casting state in general (e.g. airplay should not influence this state).
 
-## [0.4.0] - 24-02-14
+## 0.4.0 (2024-02-14)
 
 ### Added
 
 - Added support for overriding button icons.
 
-## [0.3.0] - 23-12-01
+## 0.3.0 (2023-12-01)
 
 ### Fixed
 
 - Fixed several transitioning issues related to PiP state changes and closing menus.
 
-## [0.2.0] - 23-06-26
+## 0.2.0 (2023-06-26)
 
 ### Fixed
 
@@ -43,12 +58,12 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 - Assume `PlayerConfiguration.chromeless` to be `true` if not specified.
 
-## [0.1.1] - 23-06-06
+## 0.1.1 (2023-06-06)
 
 ### Fixed
 
 - Fixed an issue on Web where using the `ChromecastButton` component would result in a crash.
 
-## [0.1.0] - 23-06-05
+## 0.1.0 (2023-06-05)
 
 - Initial release.

README.md

@@ -45,6 +45,5 @@ This section starts with adding the `@theoplayer/react-native-ui` as a dependenc
 after which a basic UI is built.
 Finally, some known limitations and issues are listed.
 
-- [Installation](./doc/installation.md)
-- [Getting started with the UI](./doc/ui.md)
+- [Getting started with the UI](./doc/getting-started.md)
 - [Limitations and known issues](./doc/limitations.md)

doc/ui.md renamed to doc/getting-started.md

@@ -1,29 +1,65 @@
-## Getting started with the react-native-theoplayer UI
+---
+title: Getting started
+description: Start building your UI in just a few minutes!
+sidebar_position: 1
+sidebar_custom_props: { 'icon': '🚀' }
+---
 
-The `@theoplayer/react-native-ui` package provides UI components and a `DefaultTHEOplayerUi` that can be used with
-alongside the `THEOplayerView`.
+# Getting started with the React Native THEOplayer UI
 
-This section covers what is possible with the current UI and also documents the known limitations.
+The [`@theoplayer/react-native-ui`](https://www.npmjs.com/package/@theoplayer/react-native-ui) package provides
+a collection of UI components for [`react-native-theoplayer`](https://www.npmjs.com/package/react-native-theoplayer),
+the official THEOplayer React Native video player.
+The following platforms are supported:
+
+- Android, Android TV & FireTV
+- iOS & tvOS (Apple TV)
+- Web
+
+This guide covers how to set up the React Native UI, and how to add a UI to your `THEOplayerView` component.
 
 ![basic-ui](./example-app-player-ui.png)
 
-### Table of Contents
+## Prerequisites
+
+If you have no previous experience in React Native, we encourage you to first explore the
+[React Native Documentation](https://reactnative.dev/docs/getting-started),
+as it gives you a good start on one of the most popular app development frameworks.
 
-- [Using the DefaultTHEOplayerUi](#using-the-defaulttheoplayerui)
-- [Creating your own custom UI](#creating-your-own-custom-ui)
-- [Available components](#available-components)
+## Installation
 
-### Prerequisites
+Using `npm`, `yarn`, or any other package manager, add `@theoplayer/react-native-ui` to your project's dependencies.
 
-The UI components have a few non-transitive dependencies that are required to be installed manually:
+The UI components will depend on a `THEOplayerView` instance provided by `react-native-theoplayer`, so make
+sure this package is installed.
+
+The UI components also have a few non-transitive dependencies that are required to be installed manually.
 
 ```bash
 npm install \
+  @theoplayer/react-native-ui \
+  react-native-theoplayer \
   react-native-svg \
   @react-native-community/slider
 ```
 
-### Using the DefaultTHEOplayerUi
+The package contains a number of transitive dependencies that contain native iOS and Android platform code
+as well. These are not auto-linked if your project does not already have them as a dependency,
+so they need to be explicitly defined in the
+[`react-native.config.js`](https://github.com/react-native-community/cli/blob/main/docs/configuration.md) file
+in project's root:
+
+```typescript title="react-native.config.js"
+module.exports = {
+  dependencies: {
+    'react-native-google-cast': {},
+    'react-native-svg': {},
+    '@react-native-community/slider': {},
+  },
+};
+```
+
+## Using the THEOplayerDefaultUi
 
 The `THEOplayerDefaultUi` can be used to provide basic playback controls to the viewer.
 As the default UI also includes Chromecast & Airplay support, make sure to configure these first as explained in the
@@ -61,14 +97,15 @@ const App = () => {
 };
 ```
 
-### Available components
+## Available components
 
-The available UI components with their documentation can be found [here](../src/ui).
+The API documentation of all available components can be found [here](https://theoplayer.github.io/react-native-theoplayer-ui/api/).
+Their source code can be found [here](https://github.com/THEOplayer/react-native-theoplayer-ui/tree/develop/src/ui).
 
-### Creating your own custom UI
+## Creating your own custom UI
 
-All components inside the `DefaultTHEOplayerUi` are available through the `react-native-theoplayer` package and can
-be used to create your own custom layout. Since `DefaultTHEOplayerUi` is our version of a "custom" UI, you could
+All components inside the `THEOplayerDefaultUi` are available through the `react-native-theoplayer` package and can
+be used to create your own custom layout. Since `THEOplayerDefaultUi` is our version of a "custom" UI, you could
 use this as a starting point for your own custom layout.
 
 This use-case is implemented in the [example app](https://github.com/THEOplayer/react-native-theoplayer/blob/develop/doc/example-app.md)
@@ -99,23 +136,24 @@ export default function App() {
           <UiContainer
             theme={DEFAULT_THEOPLAYER_THEME}
             player={player}
-            behind={<CenteredDelayedActivityIndicator size={50}/>}
+            behind={<CenteredDelayedActivityIndicator size={50} />}
             center={
               <CenteredControlBar
                 left={<SkipButton skip={-10}/>}
                 middle={<PlayButton/>}
                 right={<SkipButton skip={30}/>}
-              />}
+              />
+            }
             bottom={
               <>
                 <ControlBar>
-                  <SeekBar/>
+                  <SeekBar />
                 </ControlBar>
                 <ControlBar>
-                  <MuteButton/>
-                  <TimeLabel showDuration={true}/>
-                  <Spacer/>
-                  <FullscreenButton/>
+                  <MuteButton />
+                  <TimeLabel showDuration={true} />
+                  <Spacer />
+                  <FullscreenButton />
                 </ControlBar>
               </>
             }
@@ -127,7 +165,7 @@ export default function App() {
             adCenter={<CenteredControlBar middle={<PlayButton />} />}
             adBottom={
               <>
-                <ControlBar style={{justifyContent: 'flex-start'}}>
+                <ControlBar style={{ justifyContent: 'flex-start' }}>
                   <AdDisplay />
                   <AdCountdown />
                   <Spacer />

doc/installation.md

@@ -1,6 +1,14 @@
-## Limitations and Known Issues
+---
+description: ''
+sidebar_position: 2
+sidebar_custom_props: { 'icon': '⚠️' }
+---
 
-- Support for remote control navigation on TV platforms.
+# Limitations and Known Issues
+
+The React Native UI is still being actively developed. These are the current limitations and known issues:
+
+- Support for remote control navigation on TV platforms
 - Mobile Ad UI customization
 - Interaction with Google IMA elements on web
 - TextTrack styling