Feature/ad clicked

.gitignore

@@ -73,3 +73,4 @@ ios/custom/Frameworks/tvos/*.xcframework
 
 # TypeDoc
 api/
+example/Gemfile.lock

.prettierrc.json

@@ -0,0 +1,15 @@
+{
+  "bracketSpacing": true,
+  "bracketSameLine": true,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "printWidth": 150,
+  "overrides": [
+    {
+      "files": ["**/*.json", "**/*.yml"],
+      "options": {
+        "tabWidth": 2
+      }
+    }
+  ]
+}

CHANGELOG.md

@@ -10,6 +10,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]
+
+### Changed
+
+- Ad play-out is resumed when the app is foregrounded again after tapping the ad `clickthrough`. This feature requires `react-native-theoplayer` v8.6.0.
+
 ## 0.8.0 (2024-09-11)
 
 ### Added

eslint.config.mjs

@@ -0,0 +1,18 @@
+// @ts-check
+import eslint from '@eslint/js';
+import eslintConfigPrettier from 'eslint-config-prettier';
+import typescriptEslint from 'typescript-eslint';
+
+export default typescriptEslint.config(eslint.configs.recommended, ...typescriptEslint.configs.recommended, eslintConfigPrettier, {
+  rules: {
+    '@typescript-eslint/no-unused-vars': [
+      'warn',
+      {
+        argsIgnorePattern: '^_',
+      },
+    ],
+    '@typescript-eslint/no-explicit-any': 'off',
+    '@typescript-eslint/explicit-module-boundary-types': 'off',
+    '@typescript-eslint/ban-ts-comment': 'off',
+  },
+});

example/App.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {useState} from 'react';
+import { useState } from 'react';
 import {
   AdClickThroughButton,
   CenteredControlBar,
@@ -20,17 +20,12 @@ import {
   TimeLabel,
   UiContainer,
 } from '@theoplayer/react-native-ui';
-import {
-  PlayerConfiguration,
-  PlayerEventType,
-  THEOplayer,
-  THEOplayerView,
-} from 'react-native-theoplayer';
+import { PlayerConfiguration, PlayerEventType, THEOplayer, THEOplayerView } 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';
+import { Platform, StyleSheet, View, ViewStyle } from 'react-native';
+import { AdDisplay } from '@theoplayer/react-native-ui';
+import { AdCountdown } from '@theoplayer/react-native-ui';
+import { AdSkipButton } from '@theoplayer/react-native-ui';
 
 const playerConfig: PlayerConfiguration = {
   // Get your THEOplayer license from https://portal.theoplayer.com/
@@ -74,8 +69,8 @@ export default function App() {
     player.muted = true;
     player.autoplay = true;
 
-    player.backgroundAudioConfiguration = {enabled: true};
-    player.pipConfiguration = {startsAutomatically: true};
+    player.backgroundAudioConfiguration = { enabled: true };
+    player.pipConfiguration = { startsAutomatically: true };
     console.log('THEOplayer is ready:', player.version);
   };
 
@@ -92,12 +87,12 @@ export default function App() {
   };
 
   return (
-    <View style={[StyleSheet.absoluteFill, {backgroundColor: '#000000'}]}>
+    <View style={[StyleSheet.absoluteFill, { backgroundColor: '#000000' }]}>
       <View style={PLAYER_CONTAINER_STYLE}>
         <THEOplayerView config={playerConfig} onPlayerReady={onPlayerReady}>
           {player !== undefined && chromeless && (
             <UiContainer
-              theme={{...DEFAULT_THEOPLAYER_THEME}}
+              theme={{ ...DEFAULT_THEOPLAYER_THEME }}
               player={player}
               behind={<CenteredDelayedActivityIndicator size={50} />}
               top={
@@ -110,13 +105,7 @@ export default function App() {
                   </SettingsMenuButton>
                 </ControlBar>
               }
-              center={
-                <CenteredControlBar
-                  left={<SkipButton skip={-10} />}
-                  middle={<PlayButton />}
-                  right={<SkipButton skip={30} />}
-                />
-              }
+              center={<CenteredControlBar left={<SkipButton skip={-10} />} middle={<PlayButton />} right={<SkipButton skip={30} />} />}
               bottom={
                 <>
                   <ControlBar>
@@ -139,7 +128,7 @@ export default function App() {
               adCenter={<CenteredControlBar middle={<PlayButton />} />}
               adBottom={
                 <>
-                  <ControlBar style={{justifyContent: 'flex-start'}}>
+                  <ControlBar style={{ justifyContent: 'flex-start' }}>
                     <AdDisplay />
                     <AdCountdown />
                     <Spacer />

example/Gemfile

@@ -3,5 +3,6 @@ source 'https://rubygems.org'
 # You may use http://rbenv.org/ or https://rvm.io/ to install and use this version
 ruby ">= 2.6.10"
 
-gem 'cocoapods', '~> 1.13'
-gem 'activesupport', '>= 6.1.7.3', '< 7.1.0'
+# Exclude problematic versions of cocoapods and activesupport that causes build failures.
+gem 'cocoapods', '>= 1.13', '!= 1.15.0', '!= 1.15.1'
+gem 'activesupport', '>= 6.1.7.5', '!= 7.1.0'

example/__tests__/App.test.tsx

@@ -7,7 +7,7 @@ import React from 'react';
 import App from '../App';
 
 // Note: import explicitly to use the types shiped with jest.
-import {it} from '@jest/globals';
+import { it } from '@jest/globals';
 
 // Note: test renderer must be required after react-native.
 import renderer from 'react-test-renderer';

example/android/app/build.gradle

@@ -1,4 +1,5 @@
 apply plugin: "com.android.application"
+apply plugin: "org.jetbrains.kotlin.android"
 apply plugin: "com.facebook.react"
 
 /**
@@ -48,6 +49,9 @@ react {
     //
     //   The list of flags to pass to the Hermes compiler. By default is "-O", "-output-source-map"
     // hermesFlags = ["-O", "-output-source-map"]
+
+    /* Autolinking */
+    autolinkLibrariesWithApp()
 }
 
 /**
@@ -75,7 +79,7 @@ def safeExtGet(prop, fallback) {
 android {
     ndkVersion rootProject.ext.ndkVersion
 
-    compileSdkVersion rootProject.ext.compileSdkVersion
+    compileSdk rootProject.ext.compileSdkVersion
 
     namespace "com.example"
     defaultConfig {
@@ -108,21 +112,15 @@ android {
 }
 
 dependencies {
-    // The version of react-native is set by the React Native Gradle Plugin
-    implementation("com.facebook.react:react-android")
+    implementation project(path: ':react-native-theoplayer')
     implementation "com.google.android.gms:play-services-cast-framework:${safeExtGet('castFrameworkVersion', '+')}"
 
-    debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}")
-    debugImplementation("com.facebook.flipper:flipper-network-plugin:${FLIPPER_VERSION}") {
-        exclude group:'com.squareup.okhttp3', module:'okhttp'
-    }
+    // The version of react-native is set by the React Native Gradle Plugin
+    implementation("com.facebook.react:react-android")
 
-    debugImplementation("com.facebook.flipper:flipper-fresco-plugin:${FLIPPER_VERSION}")
     if (hermesEnabled.toBoolean()) {
         implementation("com.facebook.react:hermes-android")
     } else {
         implementation jscFlavor
     }
 }
-
-apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)

example/android/app/src/main/java/com/example/MainActivity.java

@@ -2,8 +2,6 @@
 
 import android.content.Intent;
 import android.content.res.Configuration;
-import android.media.AudioManager;
-import android.os.Bundle;
 
 import com.facebook.react.ReactActivity;
 import com.facebook.react.ReactActivityDelegate;

example/android/app/src/main/java/com/example/MainApplication.java

@@ -57,6 +57,5 @@ public void onCreate() {
       // If you opted-in for the New Architecture, we load the native entry point for this app.
       DefaultNewArchitectureEntryPoint.load();
     }
-    ReactNativeFlipper.initializeFlipper(this, getReactNativeHost().getReactInstanceManager());
   }
 }

example/android/build.gradle

@@ -2,13 +2,12 @@
 
 buildscript {
     ext {
-        buildToolsVersion = "33.0.0"
-        minSdkVersion = 21
-        compileSdkVersion = 33
-        targetSdkVersion = 33
-
-        // We use NDK 23 which has both M1 support and is the side-by-side NDK version from AGP.
-        ndkVersion = "23.1.7779620"
+        buildToolsVersion = "34.0.0"
+        minSdkVersion = 24
+        compileSdkVersion = 35
+        targetSdkVersion = 35
+        ndkVersion = "26.1.10909125"
+        kotlinVersion = "1.9.24"
     }
     repositories {
         google()

example/android/gradle/wrapper/gradle-wrapper.properties

@@ -1,6 +1,6 @@
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-8.0.1-all.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-8.8-bin.zip
 networkTimeout=10000
 zipStoreBase=GRADLE_USER_HOME
 zipStorePath=wrapper/dists

example/android/settings.gradle

@@ -1,4 +1,7 @@
+pluginManagement { includeBuild("../node_modules/@react-native/gradle-plugin") }
+plugins { id("com.facebook.react.settings") }
+extensions.configure(com.facebook.react.ReactSettingsExtension){ ex -> ex.autolinkLibrariesFromCommand() }
 rootProject.name = 'example'
-apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)
+
 include ':app'
 includeBuild('../node_modules/@react-native/gradle-plugin')

example/babel.config.js

@@ -2,7 +2,7 @@ const path = require('path');
 const pak = require('../package.json');
 
 module.exports = {
-  presets: ['module:metro-react-native-babel-preset'],
+  presets: ['module:@react-native/babel-preset'],
   plugins: [
     [
       'module-resolver',

example/index.ts

@@ -2,8 +2,8 @@
  * @format
  */
 
-import {AppRegistry} from 'react-native';
+import { AppRegistry } from 'react-native';
 import App from './App';
-import {name as appName} from './app.json';
+import { name as appName } from './app.json';
 
 AppRegistry.registerComponent(appName, () => App);

example/index.web.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {createRoot} from 'react-dom/client';
+import { createRoot } from 'react-dom/client';
 import App from './App';
 
 createRoot(document.getElementById('app') as HTMLElement).render(<App />);