Release/v0.6.0

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

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

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>

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'}}>

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",

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 = () => {