Feature/csai

.eslintrc

@@ -17,5 +17,10 @@
     "@typescript-eslint/explicit-module-boundary-types": "off",
     "@typescript-eslint/ban-ts-comment": "off",
     "@typescript-eslint/no-unused-vars": ["warn", { "argsIgnorePattern": "^_" }]
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
   }
 }

example/App.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import {useState} from 'react';
 import {
+  AdClickThroughButton,
   CenteredControlBar,
   CenteredDelayedActivityIndicator,
   ControlBar,
@@ -12,6 +13,7 @@ import {
   PlaybackRateSubMenu,
   PlayButton,
   QualitySubMenu,
+  SeekBar,
   SettingsMenuButton,
   SkipButton,
   Spacer,
@@ -26,6 +28,9 @@ import {
 } from 'react-native-theoplayer';
 
 import {Platform, StyleSheet, View, ViewStyle} from 'react-native';
+import {AdDisplay} from '../src/ui/components/ads/AdDisplay';
+import {AdCountdown} from '../src/ui/components/ads/AdCountdown';
+import {AdSkipButton} from '../src/ui/components/ads/AdSkipButton';
 
 const playerConfig: PlayerConfiguration = {
   // Get your THEOplayer license from https://portal.theoplayer.com/
@@ -114,8 +119,9 @@ export default function App() {
               }
               bottom={
                 <>
-                  <ControlBar style={{justifyContent: 'flex-start'}} />
-                  <ControlBar />
+                  <ControlBar>
+                    <SeekBar />
+                  </ControlBar>
                   <ControlBar>
                     <MuteButton />
                     <TimeLabel showDuration={true} />
@@ -125,6 +131,32 @@ 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/android/gradle.properties

@@ -45,3 +45,4 @@ hermesEnabled=true
 
 # Enable THEOplayer Extensions (default: disabled)
 THEOplayer_extensionGoogleIMA = true
+THEOplayer_extensionGoogleDAI = true

example/package.json

@@ -17,7 +17,7 @@
     "react-native": "0.72.7",
     "react-native-google-cast": "^4.6.2",
     "react-native-svg": "^14.0.0",
-    "react-native-theoplayer": "^3.1.0",
+    "react-native-theoplayer": "^3.8.0",
     "react-native-web": "^0.19.9",
     "react-native-web-image-loader": "^0.1.1"
   },
@@ -43,6 +43,7 @@
     "node-polyfill-webpack-plugin": "^2.0.1",
     "prettier": "^2.4.1",
     "react-test-renderer": "18.2.0",
+    "theoplayer": "^6.9.0",
     "typescript": "4.8.4",
     "webpack": "^5.89.0",
     "webpack-cli": "^5.1.4",

example/web/public/style.css

@@ -15,3 +15,30 @@ body {
 .theoplayer-container {
   z-index: 0;
 }
+
+/*
+ * Hack: THEOplayer's own linear ad UI is not positioned correctly by default
+ * when using the chromeless player.
+ */
+.theoplayer-ad-linear {
+    position: absolute;
+    inset: 0;
+    z-index: 10;
+}
+
+/*
+ * Hack: hide THEOplayer's built-in ad UI, so we can use our own components instead
+ * such as <AdCountdown /> and <AdSkipButton />.
+ */
+.theo-ad-remaining-container,
+.theoplayer-ad-skip,
+.theoplayer-ad-touch-clickthrough {
+    display: none !important;
+}
+
+/*
+ * Hack: hide overflow so that when google ima is enabled the screen won't shake furiously anymore.
+ */
+.theoplayer-container {
+  overflow-y: hidden;
+}

package.json

@@ -57,9 +57,9 @@
     "react-native-builder-bob": "^0.18.0",
     "react-native-google-cast": "^4.6.2",
     "react-native-svg": "^13.8.0",
-    "react-native-theoplayer": "^2.7.0",
+    "react-native-theoplayer": "^3.8.0",
     "release-it": "^16.2.0",
-    "theoplayer": "^6.5.0",
+    "theoplayer": "^6.9.0",
     "typescript": "^4.1.3"
   },
   "peerDependencies": {
@@ -68,6 +68,7 @@
     "react-native": "*",
     "react-native-google-cast": "^4.6.2",
     "react-native-svg": "^13.8.0",
+    "react-native-theoplayer": ">=2.7.0",
     "theoplayer": ">=5.0.1"
   },
   "peerDependenciesMeta": {

src/ui/THEOplayerDefaultUi.tsx

@@ -10,13 +10,16 @@ import { MuteButton } from './components/button/MuteButton';
 import { CastMessage } from './components/message/CastMessage';
 import { DEFAULT_THEOPLAYER_THEME, THEOplayerTheme } from './THEOplayerTheme';
 import { Platform, StyleProp, View, ViewStyle } from 'react-native';
-import { UiContainer } from './components/uicontroller/UiContainer';
+import { FULLSCREEN_CENTER_STYLE, UiContainer } from './components/uicontroller/UiContainer';
 import { PlayButton } from './components/button/PlayButton';
 import { SkipButton } from './components/button/SkipButton';
 import { Spacer } from './components/controlbar/Spacer';
 import { ChromecastButton } from './components/button/ChromecastButton';
 import { CenteredDelayedActivityIndicator } from './components/activityindicator/CenteredDelayedActivityIndicator';
-import { FULLSCREEN_CENTER_STYLE } from './components/uicontroller/UiContainer';
+import { AdDisplay } from './components/ads/AdDisplay';
+import { AdCountdown } from './components/ads/AdCountdown';
+import { AdSkipButton } from './components/ads/AdSkipButton';
+import { AdClickThroughButton } from './components/ads/AdClickThroughButton';
 
 export interface THEOplayerDefaultUiProps {
   /**
@@ -101,6 +104,32 @@ export function THEOplayerDefaultUi(props: THEOplayerDefaultUiProps) {
                 </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>

src/ui/THEOplayerTheme.ts

@@ -44,6 +44,18 @@ export interface ColorTheme {
    * The color of the dot on the seek bar.
    */
   seekBarDot: string;
+  /**
+   * The color of the ad display text
+   */
+  adDiplayText: string;
+  /**
+   * The color of the ad display background.
+   */
+  adDisplayBackground: string;
+  /**
+   * The color of the ad skip button background.
+   */
+  adSkipBackground: string;
 }
 
 /**
@@ -97,6 +109,9 @@ export const DEFAULT_THEOPLAYER_THEME: THEOplayerTheme = {
     seekBarMinimum: '#FFFFFF',
     seekBarMaximum: '#FFFFFF50',
     seekBarDot: '#FFFFFF',
+    adDiplayText: '#000',
+    adDisplayBackground: '#FFC50F',
+    adSkipBackground: '#00000070',
   },
   text: {
     textAlignVertical: 'center',