From bfbed8eb9741300f135a5390016ffc4abe10921a Mon Sep 17 00:00:00 2001 From: Jeroen Veltmans Date: Wed, 6 Mar 2024 12:19:35 +0100 Subject: [PATCH 01/12] Reword --- doc/ui.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/doc/ui.md b/doc/ui.md index e1c098d..0bb94f2 100644 --- a/doc/ui.md +++ b/doc/ui.md @@ -68,7 +68,7 @@ The available UI components with their documentation can be found [here](../src/ ### Creating your own custom UI All components inside the `DefaultTHEOplayerUi` are available through the `react-native-theoplayer` package and can -be use these to create your own custom layout. Since `DefaultTHEOplayerUi` is our version of a "custom" UI, you could +be used to create your own custom layout. Since `DefaultTHEOplayerUi` 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) From 04b6e85530d741ebf5acaa6f4d7ac15649243a21 Mon Sep 17 00:00:00 2001 From: Jeroen Veltmans Date: Wed, 6 Mar 2024 12:33:06 +0100 Subject: [PATCH 02/12] Update limitations --- doc/limitations.md | 1 - 1 file changed, 1 deletion(-) diff --git a/doc/limitations.md b/doc/limitations.md index 5b348b1..e6d4fb4 100644 --- a/doc/limitations.md +++ b/doc/limitations.md @@ -1,5 +1,4 @@ ## Limitations and Known Issues - Support for remote control navigation on TV platforms. -- Ad UI support - TextTrack styling From bd1ef9815b2030dc1cd3d483947137fe5a716ef4 Mon Sep 17 00:00:00 2001 From: Jeroen Veltmans Date: Wed, 6 Mar 2024 12:33:43 +0100 Subject: [PATCH 03/12] Simplify App ad layout --- example/App.tsx | 14 ++++---------- 1 file changed, 4 insertions(+), 10 deletions(-) diff --git a/example/App.tsx b/example/App.tsx index e3263b2..16ac4ee 100644 --- a/example/App.tsx +++ b/example/App.tsx @@ -132,17 +132,11 @@ export default function App() { } adTop={ - <> - - - - - } - adCenter={ - <> - } /> - + + + } + adCenter={} />} adBottom={ <> From 9f10d68d270af1065a8714a0d382447130d6d4eb Mon Sep 17 00:00:00 2001 From: Jeroen Veltmans Date: Wed, 6 Mar 2024 12:34:09 +0100 Subject: [PATCH 04/12] Add ad section to documentation --- doc/ui.md | 56 +++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 56 insertions(+) diff --git a/doc/ui.md b/doc/ui.md index 0bb94f2..b8b1914 100644 --- a/doc/ui.md +++ b/doc/ui.md @@ -12,6 +12,7 @@ This section covers what is possible with the current UI and also documents the - [Using the DefaultTHEOplayerUi](#using-the-defaulttheoplayerui) - [Creating your own custom UI](#creating-your-own-custom-ui) - [Available components](#available-components) +- [Ad UI](#ad-ui) ### Prerequisites @@ -117,3 +118,58 @@ export default function App() { ); } ``` + +### Ad UI + +During ad playback the UI might need to be different compared to during content. This can include disabling seeking, +showing the ad break duration and when the user can skip to content. + +Similarly to content playback, the ad UI can be customized by adding components to their respective +slots: `adTop`, `adCenter` and `adBottom`. + +The customized ad UI is only available for web at this moment. Android and iOS will have a play/pause interaction +in the middle of the screen together with the default Google IMA ad layout. + +The following example shows a generic ad UI layout: + +```tsx +export default function App() { + const [player, setPlayer] = useState(undefined); + const onPlayerReady = (player: THEOplayer) => { + setPlayer(player); + }; + return ( + + + {player !== undefined && ( + } + adTop={ + + + + } + adCenter={} />} + adBottom={ + <> + + + + + + + + + + + + } + /> + )} + + + ); +} +``` From 518a4f2d871238ac58ba563e9181f26734c1f597 Mon Sep 17 00:00:00 2001 From: Jeroen Veltmans Date: Wed, 6 Mar 2024 16:34:59 +0100 Subject: [PATCH 05/12] Merge ad ui with custom ui --- doc/ui.md | 44 +++++++++----------------------------------- 1 file changed, 9 insertions(+), 35 deletions(-) diff --git a/doc/ui.md b/doc/ui.md index b8b1914..7dd1a80 100644 --- a/doc/ui.md +++ b/doc/ui.md @@ -76,6 +76,15 @@ This use-case is implemented in the [example app](https://github.com/THEOplayer/ that is included in the `react-native-theoplayer` repository, which adds a custom [SourceMenuButton](https://github.com/THEOplayer/react-native-theoplayer/blob/develop/example/src/custom/SourceMenuButton.tsx). +During ad playback the UI probably needs to be different compared to during content. This can include disabling seeking, +showing the ad break duration and when the user can skip to content. + +Similarly to content playback, the ad UI can be customized by adding components to their respective +slots: `adTop`, `adCenter` and `adBottom`. + +The customized ad UI is only available for web at this moment. Android and iOS will have a play/pause interaction +in the middle of the screen together with the default Google IMA ad layout. + The following example shows a UI layout with only basic playback controls: ```tsx @@ -111,41 +120,6 @@ export default function App() { } - /> - )} - - - ); -} -``` - -### Ad UI - -During ad playback the UI might need to be different compared to during content. This can include disabling seeking, -showing the ad break duration and when the user can skip to content. - -Similarly to content playback, the ad UI can be customized by adding components to their respective -slots: `adTop`, `adCenter` and `adBottom`. - -The customized ad UI is only available for web at this moment. Android and iOS will have a play/pause interaction -in the middle of the screen together with the default Google IMA ad layout. - -The following example shows a generic ad UI layout: - -```tsx -export default function App() { - const [player, setPlayer] = useState(undefined); - const onPlayerReady = (player: THEOplayer) => { - setPlayer(player); - }; - return ( - - - {player !== undefined && ( - } adTop={ From 11548af54d4e8f73f34175186c16c075c3406522 Mon Sep 17 00:00:00 2001 From: Jeroen Veltmans Date: Wed, 6 Mar 2024 16:35:19 +0100 Subject: [PATCH 06/12] Add CSAI implementation limitations --- doc/limitations.md | 2 ++ doc/ui.md | 1 - 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/doc/limitations.md b/doc/limitations.md index e6d4fb4..7de7544 100644 --- a/doc/limitations.md +++ b/doc/limitations.md @@ -1,4 +1,6 @@ ## 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 diff --git a/doc/ui.md b/doc/ui.md index 7dd1a80..e1b0e0b 100644 --- a/doc/ui.md +++ b/doc/ui.md @@ -12,7 +12,6 @@ This section covers what is possible with the current UI and also documents the - [Using the DefaultTHEOplayerUi](#using-the-defaulttheoplayerui) - [Creating your own custom UI](#creating-your-own-custom-ui) - [Available components](#available-components) -- [Ad UI](#ad-ui) ### Prerequisites From 4fc076fde58262b2804d23155548d0ac72c76b13 Mon Sep 17 00:00:00 2001 From: Wonne Joosen Date: Tue, 26 Mar 2024 16:00:23 +0100 Subject: [PATCH 07/12] rename progress event handler --- src/ui/components/button/SkipButton.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/ui/components/button/SkipButton.tsx b/src/ui/components/button/SkipButton.tsx index c603dd4..e9f672a 100644 --- a/src/ui/components/button/SkipButton.tsx +++ b/src/ui/components/button/SkipButton.tsx @@ -48,16 +48,16 @@ export class SkipButton extends PureComponent componentDidMount() { const player = (this.context as UiContext).player; - player.addEventListener(PlayerEventType.PROGRESS, this.onTimeupdate); + player.addEventListener(PlayerEventType.PROGRESS, this.onProgress); this.setState({ enabled: player.seekable.length > 0 }); } componentWillUnmount() { const player = (this.context as UiContext).player; - player.removeEventListener(PlayerEventType.PROGRESS, this.onTimeupdate); + player.removeEventListener(PlayerEventType.PROGRESS, this.onProgress); } - private readonly onTimeupdate = (event: ProgressEvent) => { + private readonly onProgress = (event: ProgressEvent) => { this.setState({ enabled: event.seekable.length > 0 }); }; From 97172ef50832293534a66953e4b2e52824471313 Mon Sep 17 00:00:00 2001 From: Wonne Joosen Date: Tue, 26 Mar 2024 21:32:21 +0100 Subject: [PATCH 08/12] also enable skipbutton if player.buffered is not empty --- src/ui/components/button/SkipButton.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/ui/components/button/SkipButton.tsx b/src/ui/components/button/SkipButton.tsx index e9f672a..cf711ff 100644 --- a/src/ui/components/button/SkipButton.tsx +++ b/src/ui/components/button/SkipButton.tsx @@ -58,7 +58,7 @@ export class SkipButton extends PureComponent } private readonly onProgress = (event: ProgressEvent) => { - this.setState({ enabled: event.seekable.length > 0 }); + this.setState({ enabled: event.seekable.length > 0 || event.buffered.length > 0 }); }; private readonly onPress = () => { From 3fa5b62ba6bb7d692bc9961b3e0b0382f8685f4b Mon Sep 17 00:00:00 2001 From: Wonne Joosen Date: Tue, 26 Mar 2024 21:35:10 +0100 Subject: [PATCH 09/12] update changelog --- CHANGELOG.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 056322a..2b5e188 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,12 @@ 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). +## Unreleased + +### Fixed + +- Fixed an issue where the skip buttons would remain disabled for MP4 sources. + ## [0.5.0] - 24-03-06 ### Added From 0a4dfcfbe05115aa857bf4ee7cf2377b496cf64e Mon Sep 17 00:00:00 2001 From: Wonne Joosen Date: Wed, 27 Mar 2024 09:17:23 +0100 Subject: [PATCH 10/12] enable or disable skipbutton on playing events --- src/ui/components/button/SkipButton.tsx | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/ui/components/button/SkipButton.tsx b/src/ui/components/button/SkipButton.tsx index cf711ff..cf8a1a9 100644 --- a/src/ui/components/button/SkipButton.tsx +++ b/src/ui/components/button/SkipButton.tsx @@ -49,18 +49,25 @@ export class SkipButton extends PureComponent componentDidMount() { const player = (this.context as UiContext).player; player.addEventListener(PlayerEventType.PROGRESS, this.onProgress); + player.addEventListener(PlayerEventType.PLAYING, this.onPlaying); this.setState({ enabled: player.seekable.length > 0 }); } componentWillUnmount() { const player = (this.context as UiContext).player; player.removeEventListener(PlayerEventType.PROGRESS, this.onProgress); + player.removeEventListener(PlayerEventType.PLAYING, this.onPlaying); } private readonly onProgress = (event: ProgressEvent) => { this.setState({ enabled: event.seekable.length > 0 || event.buffered.length > 0 }); }; + private readonly onPlaying = () => { + const player = (this.context as UiContext).player; + this.setState({ enabled: player.seekable.length > 0 || player.buffered.length > 0 }); + }; + private readonly onPress = () => { const { skip, rotate } = this.props; const { spinValue } = this.state; From 0da0f50431a2a7afb0bc2c9c523c485214456b05 Mon Sep 17 00:00:00 2001 From: Wonne Joosen Date: Wed, 27 Mar 2024 14:10:47 +0100 Subject: [PATCH 11/12] update changelog --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 2b5e188..7032293 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,7 +5,7 @@ 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). -## Unreleased +## [0.6.0] - 24-03-27 ### Fixed From a17ab7a6051fca201378a91336d559c6c7fa74ea Mon Sep 17 00:00:00 2001 From: Wonne Joosen Date: Wed, 27 Mar 2024 14:11:01 +0100 Subject: [PATCH 12/12] 0.6.0 --- package-lock.json | 4 ++-- package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index 0f715e7..a89955f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@theoplayer/react-native-ui", - "version": "0.5.0", + "version": "0.6.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@theoplayer/react-native-ui", - "version": "0.5.0", + "version": "0.6.0", "license": "SEE LICENSE AT https://www.theoplayer.com/terms", "dependencies": { "buffer": "^6.0.3", diff --git a/package.json b/package.json index cd63523..acab0dd 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@theoplayer/react-native-ui", - "version": "0.5.0", + "version": "0.6.0", "description": "A React Native UI for @theoplayer/react-native", "main": "lib/commonjs/index", "module": "lib/module/index",