feat: add notification controls (#3723)

* feat(ios): add `showNotificationControls` prop

* feat(android): add `showNotificationControls` prop

* add docs

* feat!: add `metadata` property to srouce

This is breaking change for iOS/tvOS as we are moving some properties, but I believe that this will more readable and more user friendly

* chore(ios): remove UI blocking function

* code review changes for android

* update example

* fix readme

* fix typos

* update docs

* fix typo

* chore: improve sample metadata notification

* update codegen types

* rename properties

* update tvOS example

* reset metadata on source change

* update docs

---------

Co-authored-by: Olivier Bouillet <freeboub@gmail.com>

examples/basic/src/VideoPlayer.tsx

@@ -71,6 +71,7 @@ interface StateType {
   showRNVControls: boolean;
   useCache: boolean;
   poster?: string;
+  showNotificationControls: boolean;
 }
 
 class VideoPlayer extends Component {
@@ -100,6 +101,7 @@ class VideoPlayer extends Component {
     showRNVControls: false,
     useCache: false,
     poster: undefined,
+    showNotificationControls: false,
   };
 
   seekerWidth = 0;
@@ -115,10 +117,24 @@ class VideoPlayer extends Component {
     {
       description: 'local file portrait',
       uri: require('./portrait.mp4'),
+      metadata: {
+        title: 'Test Title',
+        subtitle: 'Test Subtitle',
+        artist: 'Test Artist',
+        description: 'Test Description',
+        imageUri: 'https://pbs.twimg.com/profile_images/1498641868397191170/6qW2XkuI_400x400.png'
+      }
     },
     {
       description: '(hls|live) red bull tv',
       uri: 'https://rbmn-live.akamaized.net/hls/live/590964/BoRB-AT/master_928.m3u8',
+      metadata: {
+        title: 'Custom Title',
+        subtitle: 'Custom Subtitle',
+        artist: 'Custom Artist',
+        description: 'Custom Description',
+        imageUri: 'https://pbs.twimg.com/profile_images/1498641868397191170/6qW2XkuI_400x400.png'
+      }
     },
     {
       description: 'invalid URL',
@@ -410,6 +426,12 @@ class VideoPlayer extends Component {
     }
   }
 
+  toggleShowNotificationControls() {
+    this.setState({
+      showNotificationControls: !this.state.showNotificationControls,
+    });
+  }
+
   goToChannel(channel: number) {
     this.setState({
       srcListId: channel,
@@ -729,6 +751,14 @@ class VideoPlayer extends Component {
                   selectedText="poster"
                   unselectedText="no poster"
                 />
+                <ToggleControl
+                  isSelected={this.state.showNotificationControls}
+                  onPress={() => {
+                    this.toggleShowNotificationControls();
+                  }}
+                  selectedText="hide notification controls"
+                  unselectedText="show notification controls"
+                />
               </View>
               <View style={styles.generalControls}>
                 {/* shall be replaced by slider */}
@@ -858,6 +888,7 @@ class VideoPlayer extends Component {
     return (
       <TouchableOpacity style={viewStyle}>
         <Video
+          showNotificationControls={this.state.showNotificationControls}
           ref={(ref: VideoRef) => {
             this.video = ref;
           }}