Update youtube player package and readme (#984)

crowdbotics · Oct 31, 2023 · 4e5469d · 4e5469d
1 parent 425a346
commit 4e5469d
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 49 deletions.
diff --git a/modules/react-native-youtube-player/README.md b/modules/react-native-youtube-player/README.md
@@ -24,20 +24,15 @@ The Youtube Player Module is a React Native-based module which embeds a youtube
 
 ## ## 3rd party setup
 
-For keys and credientials setup the following steps are given:
-1. Signup or login into `Google Console account`.
-2. From your dashboard, on the top left side, click on `menubar` then go to `api & services` => `library`.
-3. After that click on `search menubar` and search for "youtube data api" and enable it.
-![console cloud google](https://user-images.githubusercontent.com/120275623/228167168-7c7d9091-2f0c-4390-9037-278efc0b77be.png)
-4. Generate a `key` and save it.
-
+No 3rd party setup required.
 
 ## Dependencies
 
 Dependencies used:
- - react-native-youtube  -  https://www.npmjs.com/package/react-native-youtube
+ - react-native-youtube-iframe  -  https://www.npmjs.com/package/react-native-youtube-iframe
  - react-native-vector-icons  -  https://www.npmjs.com/package/react-native-vector-icons
  - prop-types  -  https://www.npmjs.com/package/prop-types
+ - react-native-webview- https://www.npmjs.com/package/react-native-webview
 
 ## ## Module Options
 
@@ -47,25 +42,14 @@ No global configs required.
 
 ### Local Configs
 
-Move into the options file and update your youtube api key and replace the given VIDEOS_IDS array with your own.
+Move into the options file and update VIDEOS_IDS array with your own.
 ```javascript
-
-const YOUTUBE_API_KEY = "Your youtube api key";
-const VIDEOS_IDS = ["uMK0prafzw0"];
-
+const VIDEOS_IDS = [""];
 ```
 
 ### Android setup
 
-#### For `Android 11` and above
-
-Add these lines in `AndroidManifest.xml`
-
-```xml
-<queries>
-<package android:name="com.google.android.youtube" />
-</queries>
-```
+No android setup required.
 
 ### iOS setup
 

diff --git a/modules/react-native-youtube-player/index.js b/modules/react-native-youtube-player/index.js
@@ -1,16 +1,17 @@
 import React, { createRef, useContext, useState } from "react";
 import {
-  PixelRatio, ScrollView, Text, TouchableOpacity, View
+  SafeAreaView,
+  ScrollView, Text, TouchableOpacity, View
 } from "react-native";
 import Icon from "react-native-vector-icons/AntDesign";
 
 import { OptionsContext } from "@options";
 
 import PropTypes from "prop-types";
 
-import YouTube from "react-native-youtube";
+import YoutubePlayer from "react-native-youtube-iframe";
 
-const Player = ({ youtubeApiKey, playerSetting, videoIds, isForwordTimeDuration = true, forwordTimeDurationInSeconds = 5, isBackwordTimeDuration = true, backwordTimeDurationInSeconds = 5 }) => {
+const Player = ({ playerSetting, videoIds, isForwordTimeDuration = true, forwordTimeDurationInSeconds = 5, isBackwordTimeDuration = true, backwordTimeDurationInSeconds = 5 }) => {
   const options = useContext(OptionsContext);
   const { styles } = options;
   const youTubeRef = createRef();
@@ -43,25 +44,21 @@ const Player = ({ youtubeApiKey, playerSetting, videoIds, isForwordTimeDuration
   };
 
   return (
+    <SafeAreaView style={{ flex: 1 }}>
     <ScrollView style={styles.container}>
-      <YouTube
+       <YoutubePlayer
         ref={youTubeRef}
-        apiKey={youtubeApiKey || options.YOUTUBE_API_KEY}
-        videoIds={videoIds || options.VIDEOS_IDS}
-        play={playerData.isPlaying}
-        loop={playerData.isLooping}
-        fullscreen={playerData.fullscreen}
-        controls={1}
-        onError={e => setPlayerData({ ...playerData, error: e.error })}
+        height={400}
+        width={400}
+        playList={videoIds || options.VIDEOS_IDS}
         onReady={() => setPlayerData({ ...playerData, isReady: true })}
         onChangeState={e => setPlayerData({ ...playerData, status: e.state })}
-        onChangeQuality={e => setPlayerData({ ...playerData, quality: e.quality })}
-        onChangeFullscreen={e => setPlayerData({ ...playerData, fullscreen: e.isFullscreen })}
+        onPlaybackQualityChange={e => setPlayerData({ ...playerData, quality: e.quality })}
+        onFullScreenChange={e => setPlayerData({ ...playerData, fullscreen: e.isFullscreen })}
         onProgress={e => setPlayerData({ ...playerData, currentTime: e.currentTime })}
-        style={[
-          { height: PixelRatio.roundToNearestPixel(playerData.playerWidth / (16 / 9)) },
-          styles.player
-        ]}
+        initialPlayerParams={{
+          loop: playerData.isLooping
+        }}
       />
 
       { (isForwordTimeDuration || isBackwordTimeDuration) &&
@@ -74,6 +71,12 @@ const Player = ({ youtubeApiKey, playerSetting, videoIds, isForwordTimeDuration
               </Text>
             </TouchableOpacity>
           }
+           <View style={styles.button}>
+              <Icon name="retweet" size={30} color="#900" />
+              <Text style={styles.iconNextValue}>
+                {playerData.isLooping ? "Looping" : "Not Looping"}
+              </Text>
+            </View>
           { isBackwordTimeDuration &&
             <TouchableOpacity style={styles.button} onPress={handleNext}>
               <Icon name="back" size={30} color="#900" style={{ transform: [{ rotateY: "180deg" }] }} />
@@ -85,20 +88,17 @@ const Player = ({ youtubeApiKey, playerSetting, videoIds, isForwordTimeDuration
         </View>
       }
 
-      <View style={styles.buttonGroup}>
-      </View>
       <View style={styles.statusContainer}>
         <Text style={styles.instructions}>
           {playerData.error ? "Error: " + playerData.error : ""}
         </Text>
       </View>
-
     </ScrollView>
+    </SafeAreaView>
   );
 };
 
 Player.propTypes = {
-  youtubeApiKey: PropTypes.string,
   playerSetting: PropTypes.object,
   videoIds: PropTypes.array,
   forwordTimeDurationInSeconds: PropTypes.number,

diff --git a/modules/react-native-youtube-player/options.js b/modules/react-native-youtube-player/options.js
@@ -1,8 +1,7 @@
 
 import { Dimensions, StyleSheet } from "react-native";
 
-const YOUTUBE_API_KEY = "";
-const VIDEOS_IDS = [];
+const VIDEOS_IDS = [""];
 
 export const styles = StyleSheet.create({
   container: {
@@ -29,7 +28,8 @@ export const styles = StyleSheet.create({
     paddingVertical: 10,
     paddingHorizontal: 10,
     marginVertical: 5,
-    borderRadius: 7
+    borderRadius: 7,
+    alignItems: "center"
   },
   text: {
     color: "white",
@@ -66,6 +66,5 @@ const playerDefaultSetting = {
 export default {
   styles: styles,
   playerDefaultSetting: playerDefaultSetting,
-  YOUTUBE_API_KEY: YOUTUBE_API_KEY,
   VIDEOS_IDS: VIDEOS_IDS
 };
diff --git a/modules/react-native-youtube-player/package.json b/modules/react-native-youtube-player/package.json
@@ -5,9 +5,10 @@
     "private": true,
     "main": "index.js",
     "x-dependencies": {
-        "react-native-youtube": "2.0.2",
+        "react-native-youtube-iframe": "2.3.0",
         "react-native-vector-icons": "9.1.0",
-        "prop-types": "15.8.1"
+        "prop-types": "15.8.1",
+        "react-native-webview": "11.26.1"
     },
     "author": "Crowdbotics",
     "license": "ISC",