Merge pull request #550 from bitmovin/PRN-106/add-tv-samples

Add Basic TV playback sample
bitmovin · Oct 31, 2024 · 1b6f198 · 1b6f198
2 parents c5cecfe + 4a6e7ab
commit 1b6f198
Show file tree

Hide file tree

Showing 4 changed files with 113 additions and 12 deletions.
diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -8,6 +8,7 @@ import ExamplesList from './screens/ExamplesList';
 import BasicAds from './screens/BasicAds';
 import BasicAnalytics from './screens/BasicAnalytics';
 import BasicPlayback from './screens/BasicPlayback';
+import BasicTvPlayback from './screens/BasicTvPlayback';
 import BasicDrmPlayback from './screens/BasicDrmPlayback';
 import SubtitlePlayback from './screens/SubtitlePlayback';
 import ProgrammaticTrackSelection from './screens/ProgrammaticTrackSelection';
@@ -31,6 +32,7 @@ export type RootStackParamsList = {
   BasicAds: undefined;
   BasicAnalytics: undefined;
   BasicPlayback: undefined;
+  BasicTvPlayback: undefined;
   BasicDrmPlayback: undefined;
   BasicPictureInPicture: {
     navigation: NativeStackNavigationProp<RootStackParamsList>;
@@ -63,6 +65,7 @@ export type RootStackParamsList = {
 const RootStack = createNativeStackNavigator<RootStackParamsList>();
 
 const isTVOS = Platform.OS === 'ios' && Platform.isTV;
+const isAndroidTV = Platform.OS === 'android' && Platform.isTV;
 
 export default function App() {
   useEffect(() => {
@@ -112,6 +115,13 @@ export default function App() {
     ],
   };
 
+  if (isAndroidTV) {
+    stackParams.data.unshift({
+      title: 'Basic TV playback',
+      routeName: 'BasicTvPlayback',
+    });
+  }
+
   if (!isTVOS) {
     stackParams.data.push({
       title: 'Custom HTML UI',
@@ -186,6 +196,13 @@ export default function App() {
           component={BasicPlayback}
           options={{ title: 'Basic playback' }}
         />
+        {isAndroidTV && (
+          <RootStack.Screen
+            name="BasicTvPlayback"
+            component={BasicTvPlayback}
+            options={{ title: 'Basic TV playback' }}
+          />
+        )}
         <RootStack.Screen
           name="BasicDrmPlayback"
           component={BasicDrmPlayback}

diff --git a/example/src/screens/BasicPlayback.tsx b/example/src/screens/BasicPlayback.tsx
@@ -6,9 +6,6 @@ import {
   usePlayer,
   PlayerView,
   SourceType,
-  TvUi,
-  SmallScreenUi,
-  PlayerViewConfig,
 } from 'bitmovin-player-react-native';
 import { useTVGestures } from '../hooks';
 
@@ -25,12 +22,6 @@ export default function BasicPlayback() {
     },
   });
 
-  const config: PlayerViewConfig = {
-    uiConfig: {
-      variant: Platform.isTV ? new TvUi() : new SmallScreenUi(),
-    },
-  };
-
   useFocusEffect(
     useCallback(() => {
       player.load({
@@ -65,7 +56,6 @@ export default function BasicPlayback() {
       <PlayerView
         player={player}
         style={styles.player}
-        config={config}
         onPlay={onEvent}
         onPlaying={onEvent}
         onPaused={onEvent}

diff --git a/example/src/screens/BasicTvPlayback.tsx b/example/src/screens/BasicTvPlayback.tsx
@@ -0,0 +1,94 @@
+import React, { useCallback } from 'react';
+import { View, Platform, StyleSheet } from 'react-native';
+import { useFocusEffect } from '@react-navigation/native';
+import {
+  Event,
+  usePlayer,
+  PlayerView,
+  SourceType,
+  PlayerViewConfig,
+  TvUi,
+} from 'bitmovin-player-react-native';
+import { useTVGestures } from '../hooks';
+
+function prettyPrint(header: string, obj: any) {
+  console.log(header, JSON.stringify(obj, null, 2));
+}
+
+export default function BasicTvPlayback() {
+  useTVGestures();
+
+  const player = usePlayer({
+    remoteControlConfig: {
+      isCastEnabled: false,
+    },
+  });
+
+  const config: PlayerViewConfig = {
+    uiConfig: {
+      // This is only applied for Android TVs, as on TvOS only the system UI is supported.
+      variant: new TvUi(),
+    },
+  };
+
+  useFocusEffect(
+    useCallback(() => {
+      player.load({
+        url:
+          Platform.OS === 'ios'
+            ? 'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8'
+            : 'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/mpds/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.mpd',
+        type: Platform.OS === 'ios' ? SourceType.HLS : SourceType.DASH,
+        title: 'Art of Motion',
+        poster:
+          'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/poster.jpg',
+        thumbnailTrack:
+          'https://cdn.bitmovin.com/content/assets/art-of-motion-dash-hls-progressive/thumbnails/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.vtt',
+        metadata: { platform: Platform.OS },
+      });
+      return () => {
+        player.destroy();
+      };
+    }, [player])
+  );
+
+  const onReady = useCallback((event: Event) => {
+    prettyPrint(`EVENT [${event.name}]`, event);
+  }, []);
+
+  const onEvent = useCallback((event: Event) => {
+    prettyPrint(`EVENT [${event.name}]`, event);
+  }, []);
+
+  return (
+    <View style={styles.container}>
+      <PlayerView
+        player={player}
+        style={styles.player}
+        config={config}
+        onPlay={onEvent}
+        onPlaying={onEvent}
+        onPaused={onEvent}
+        onReady={onReady}
+        onSourceLoaded={onEvent}
+        onSeek={onEvent}
+        onSeeked={onEvent}
+        onStallStarted={onEvent}
+        onStallEnded={onEvent}
+        onVideoPlaybackQualityChanged={onEvent}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: 'black',
+  },
+  player: {
+    flex: 1,
+  },
+});
diff --git a/integration_test/ios/Podfile.lock b/integration_test/ios/Podfile.lock
@@ -1218,11 +1218,11 @@ SPEC CHECKSUMS:
   BitmovinPlayer: 65866e13f7a8246ccbc7378607d6ca789f0f459e
   BitmovinPlayerCore: 158b4a5b81b12b819f0f51b7b89711ca47e11583
   boost: 88202336c3ba1e7a264a83c0c888784b0f360c28
-  DoubleConversion: 74cb0ce4de271b23e772567504735c87134edf0a
+  DoubleConversion: 234abba95e31cc2aada0cf3b97cdb11bc5b90575
   FBLazyVector: 33a271a7e8de0bd321e47356d8bc3b2d5fb9ddba
   FBReactNativeSpec: 55b7e93b71f300a051190f63c2afeccd839b7e9a
   fmt: 745abaaffe4da13101ae15d70dc68ec3d6a666a2
-  glog: f0ddebfc00a905e9213e37801095a0a705d2e5f6
+  glog: a2ded9bf28f0cb2fce90ad21eb419299a500ff6c
   GoogleAds-IMA-iOS-SDK: ee2a68ed7a1a17c7bb81bdb1b81590b35a3fc8f3
   hermes-engine: e7981489a718dff7c3a2dacd6302b8761375928d
   libevent: a6d75fcd7be07cbc5070300ea8dbc8d55dfab88e