Merge pull request #23 from THEOplayer/release/v0.6.0

Release/v0.6.0
THEOplayer · Mar 27, 2024 · cb78ad6 · cb78ad6
2 parents 0adf0fc + a17ab7a
commit cb78ad6
Show file tree

Hide file tree

Showing 7 changed files with 56 additions and 19 deletions.
diff --git 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).
 
+## [0.6.0] - 24-03-27
+
+### Fixed
+
+- Fixed an issue where the skip buttons would remain disabled for MP4 sources.
+
 ## [0.5.0] - 24-03-06
 
 ### Added

diff --git a/doc/limitations.md b/doc/limitations.md
@@ -1,5 +1,6 @@
 ## Limitations and Known Issues
 
 - Support for remote control navigation on TV platforms.
-- Ad UI support
+- Mobile Ad UI customization
+- Interaction with Google IMA elements on web
 - TextTrack styling
diff --git a/doc/ui.md b/doc/ui.md
@@ -68,13 +68,22 @@ 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)
 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
@@ -110,6 +119,26 @@ export default function App() {
                 </ControlBar>
               </>
             }
+            adTop={
+              <ControlBar>
+                <AdClickThroughButton />
+              </ControlBar>
+            }
+            adCenter={<CenteredControlBar middle={<PlayButton />} />}
+            adBottom={
+              <>
+                <ControlBar style={{justifyContent: 'flex-start'}}>
+                  <AdDisplay />
+                  <AdCountdown />
+                  <Spacer />
+                  <AdSkipButton />
+                </ControlBar>
+                <ControlBar>
+                  <MuteButton />
+                  <SeekBar />
+                </ControlBar>
+              </>
+            }
           />
         )}
       </THEOplayerView>

diff --git a/example/App.tsx b/example/App.tsx
@@ -132,17 +132,11 @@ export default function App() {
                 </>
               }
               adTop={
-                <>
-                  <ControlBar>
-                    <AdClickThroughButton />
-                  </ControlBar>
-                </>
-              }
-              adCenter={
-                <>
-                  <CenteredControlBar middle={<PlayButton />} />
-                </>
+                <ControlBar>
+                  <AdClickThroughButton />
+                </ControlBar>
               }
+              adCenter={<CenteredControlBar middle={<PlayButton />} />}
               adBottom={
                 <>
                   <ControlBar style={{justifyContent: 'flex-start'}}>

diff --git a/package-lock.json b/package-lock.json
diff --git 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",

diff --git a/src/ui/components/button/SkipButton.tsx b/src/ui/components/button/SkipButton.tsx
@@ -48,17 +48,24 @@ export class SkipButton extends PureComponent<SkipButtonProps, SkipButtonState>
 
   componentDidMount() {
     const player = (this.context as UiContext).player;
-    player.addEventListener(PlayerEventType.PROGRESS, this.onTimeupdate);
+    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.onTimeupdate);
+    player.removeEventListener(PlayerEventType.PROGRESS, this.onProgress);
+    player.removeEventListener(PlayerEventType.PLAYING, this.onPlaying);
   }
 
-  private readonly onTimeupdate = (event: ProgressEvent) => {
-    this.setState({ enabled: event.seekable.length > 0 });
+  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 = () => {