From 38a5a98d010dbe3352fdb8550f79b0b48e685930 Mon Sep 17 00:00:00 2001 From: howard chang Date: Mon, 17 Aug 2020 12:36:29 +0800 Subject: [PATCH 1/3] [YouTubeProps] add optional apiKey to YouTubeProps --- main.d.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/main.d.ts b/main.d.ts index d771db74..cac7946a 100644 --- a/main.d.ts +++ b/main.d.ts @@ -5,6 +5,7 @@ export interface YouTubeProps { videoId?: string; videoIds?: string[]; playlistId?: string; + apiKey?: string; play?: boolean; loop?: boolean; fullscreen?: boolean; From 7d962c410a11bc075dabfcfe4620d5bb05cacb35 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Czernek?= Date: Wed, 19 Aug 2020 14:31:34 +0200 Subject: [PATCH 2/3] Add flags support for fullscreen control. --- README.md | 15 +++--- YouTube.android.js | 9 ++++ .../reactnativeyoutube/YouTubeManager.java | 51 ++++++++++--------- .../reactnativeyoutube/YouTubeModule.java | 23 +++++++-- .../YouTubePlayerController.java | 28 +++++++--- .../reactnativeyoutube/YouTubeView.java | 7 ++- main.d.ts | 6 +++ 7 files changed, 98 insertions(+), 41 deletions(-) diff --git a/README.md b/README.md index d3e59edd..a51c7600 100644 --- a/README.md +++ b/README.md @@ -49,10 +49,10 @@ Open AppDelegate.m and add : play // control playback of video with true/false fullscreen // control whether the video should play in fullscreen or inline loop // control whether the video should loop when ended - onReady={e => this.setState({ isReady: true })} - onChangeState={e => this.setState({ status: e.state })} - onChangeQuality={e => this.setState({ quality: e.quality })} - onError={e => this.setState({ error: e.error })} + onReady={(e) => this.setState({ isReady: true })} + onChangeState={(e) => this.setState({ status: e.state })} + onChangeQuality={(e) => this.setState({ quality: e.quality })} + onError={(e) => this.setState({ error: e.error })} style={{ alignSelf: 'stretch', height: 300 }} /> ``` @@ -78,6 +78,7 @@ import YouTube from 'react-native-youtube'; - `loop` (boolean): Loops the video. Default: `false`. - `fullscreen` (boolean): Controls whether the video should play inline or in fullscreen. Default: `false`. - `controls` (number): Sets the player's controls scheme. Supported values are `0`, `1`, `2`. Default: `1`. On iOS the numbers conform to [These Parameters](https://developers.google.com/youtube/player_parameters?hl=en#controls). On Android the mapping is `0 = CHROMELESS`, `1 = DEFAULT`, `2 = MINIMAL` ([More Info](https://developers.google.com/youtube/android/player/reference/com/google/android/youtube/player/YouTubePlayer.PlayerStyle)). +- `fullscreenControlsFlags` (number): Set's player fullscreen control flags on Android. Available flags are `FULLSCREEN_FLAG_CONTROL_ORIENTATION`, `FULLSCREEN_FLAG_CONTROL_SYSTEM_UI`, `FULLSCREEN_FLAG_ALWAYS_FULLSCREEN_IN_LANDSCAPE` and `FULLSCREEN_FLAG_CUSTOM_LAYOUT` ([More Info]()) - `showFullscreenButton` (boolean): Show or hide Fullscreen button. Default: `true`. - `showinfo` (boolean, _iOS_): Setting the parameter's value to false causes the player to not display information like the video title and uploader before the video starts playing. Default: `true`. - `modestbranding` (boolean, _iOS_): This parameter lets you use a YouTube player that does not show a YouTube logo. Default: `false`. @@ -127,8 +128,8 @@ import { YouTubeStandaloneIOS } from 'react-native-youtube'; ```javascript YouTubeStandaloneIOS.playVideo('KVZ-P-ZI6W4') - .then(message => console.log(message)) - .catch(errorMessage => console.error(errorMessage)); + .then((message) => console.log(message)) + .catch((errorMessage) => console.error(errorMessage)); ``` #### `YouTubeStandaloneIOS.playVideo(videoId)` (Static) @@ -155,7 +156,7 @@ YouTubeStandaloneAndroid.playVideo({ startTime: 120, // Starting point of video (in seconds) }) .then(() => console.log('Standalone Player Exited')) - .catch(errorMessage => console.error(errorMessage)); + .catch((errorMessage) => console.error(errorMessage)); ``` #### `YouTubeStandaloneAndroid.playVideo(options)` (Static) diff --git a/YouTube.android.js b/YouTube.android.js index 0430b713..c3321634 100644 --- a/YouTube.android.js +++ b/YouTube.android.js @@ -31,6 +31,7 @@ export default class YouTube extends React.Component { loop: PropTypes.bool, fullscreen: PropTypes.bool, controls: PropTypes.oneOf([0, 1, 2]), + fullscreenControlFlags: PropTypes.number, showFullscreenButton: PropTypes.bool, resumePlayAndroid: PropTypes.bool, onError: PropTypes.func, @@ -46,6 +47,14 @@ export default class YouTube extends React.Component { resumePlayAndroid: true, }; + static FULLSCREEN_FLAG_CONTROL_ORIENTATION = + NativeModules.YouTubeModule.FULLSCREEN_FLAG_CONTROL_ORIENTATION; + static FULLSCREEN_FLAG_CONTROL_SYSTEM_UI = + NativeModules.YouTubeModule.FULLSCREEN_FLAG_CONTROL_SYSTEM_UI; + static FULLSCREEN_FLAG_ALWAYS_FULLSCREEN_IN_LANDSCAPE = + NativeModules.YouTubeModule.FULLSCREEN_FLAG_ALWAYS_FULLSCREEN_IN_LANDSCAPE; + static FULLSCREEN_FLAG_CUSTOM_LAYOUT = NativeModules.YouTubeModule.FULLSCREEN_FLAG_CUSTOM_LAYOUT; + _interval = null; _nativeComponentRef = React.createRef(); diff --git a/android/src/main/java/com/inprogress/reactnativeyoutube/YouTubeManager.java b/android/src/main/java/com/inprogress/reactnativeyoutube/YouTubeManager.java index 0a257326..8dc30744 100644 --- a/android/src/main/java/com/inprogress/reactnativeyoutube/YouTubeManager.java +++ b/android/src/main/java/com/inprogress/reactnativeyoutube/YouTubeManager.java @@ -3,9 +3,8 @@ import androidx.annotation.Nullable; import com.facebook.infer.annotation.Assertions; -import com.facebook.react.common.MapBuilder; -import com.facebook.react.bridge.ReactMethod; import com.facebook.react.bridge.ReadableArray; +import com.facebook.react.common.MapBuilder; import com.facebook.react.uimanager.SimpleViewManager; import com.facebook.react.uimanager.ThemedReactContext; import com.facebook.react.uimanager.annotations.ReactProp; @@ -31,16 +30,16 @@ protected YouTubeView createViewInstance(ThemedReactContext themedReactContext) } @Override - public Map getCommandsMap() { + public Map getCommandsMap() { return MapBuilder.of( - "seekTo", - COMMAND_SEEK_TO, - "nextVideo", - COMMAND_NEXT_VIDEO, - "previousVideo", - COMMAND_PREVIOUS_VIDEO, - "playVideoAt", - COMMAND_PLAY_VIDEO_AT + "seekTo", + COMMAND_SEEK_TO, + "nextVideo", + COMMAND_NEXT_VIDEO, + "previousVideo", + COMMAND_PREVIOUS_VIDEO, + "playVideoAt", + COMMAND_PLAY_VIDEO_AT ); } @@ -67,24 +66,25 @@ public void receiveCommand(YouTubeView view, int commandType, @Nullable Readable } default: throw new IllegalArgumentException( - String.format("Unsupported command %d received by %s.", commandType, getClass().getSimpleName()) + String.format("Unsupported command %d received by %s.", commandType, getClass().getSimpleName()) ); } } @Override - public @Nullable Map getExportedCustomDirectEventTypeConstants() { + public @Nullable + Map getExportedCustomDirectEventTypeConstants() { return MapBuilder.of( - "error", - (Object) MapBuilder.of("registrationName", "onYouTubeError"), - "ready", - (Object) MapBuilder.of("registrationName", "onYouTubeReady"), - "state", - (Object) MapBuilder.of("registrationName", "onYouTubeChangeState"), - "quality", - (Object) MapBuilder.of("registrationName", "onYouTubeChangeQuality"), - "fullscreen", - (Object) MapBuilder.of("registrationName", "onYouTubeChangeFullscreen") + "error", + (Object) MapBuilder.of("registrationName", "onYouTubeError"), + "ready", + (Object) MapBuilder.of("registrationName", "onYouTubeReady"), + "state", + (Object) MapBuilder.of("registrationName", "onYouTubeChangeState"), + "quality", + (Object) MapBuilder.of("registrationName", "onYouTubeChangeQuality"), + "fullscreen", + (Object) MapBuilder.of("registrationName", "onYouTubeChangeFullscreen") ); } @@ -135,6 +135,11 @@ public void setPropFullscreen(YouTubeView view, @Nullable boolean param) { view.setFullscreen(param); } + @ReactProp(name = "fullscreenControlFlags") + public void setPropFullscreenControlFlags(YouTubeView view, int flags) { + view.setFullscreenControlFlags(flags); + } + @ReactProp(name = "controls") public void setPropControls(YouTubeView view, @Nullable int param) { view.setControls(param); diff --git a/android/src/main/java/com/inprogress/reactnativeyoutube/YouTubeModule.java b/android/src/main/java/com/inprogress/reactnativeyoutube/YouTubeModule.java index 1de305a6..cb77b3cc 100644 --- a/android/src/main/java/com/inprogress/reactnativeyoutube/YouTubeModule.java +++ b/android/src/main/java/com/inprogress/reactnativeyoutube/YouTubeModule.java @@ -1,5 +1,7 @@ package com.inprogress.reactnativeyoutube; +import androidx.annotation.Nullable; + import com.facebook.react.bridge.Promise; import com.facebook.react.bridge.ReactApplicationContext; import com.facebook.react.bridge.ReactContextBaseJavaModule; @@ -8,6 +10,10 @@ import com.facebook.react.uimanager.NativeViewHierarchyManager; import com.facebook.react.uimanager.UIBlock; import com.facebook.react.uimanager.UIManagerModule; +import com.google.android.youtube.player.YouTubePlayer; + +import java.util.HashMap; +import java.util.Map; public class YouTubeModule extends ReactContextBaseJavaModule { @@ -31,7 +37,7 @@ public void getVideosIndex(final int reactTag, final Promise promise) { try { UIManagerModule uiManager = mReactContext.getNativeModule(UIManagerModule.class); uiManager.addUIBlock(new UIBlock() { - public void execute (NativeViewHierarchyManager nvhm) { + public void execute(NativeViewHierarchyManager nvhm) { YouTubeView youTubeView = (YouTubeView) nvhm.resolveView(reactTag); YouTubeManager youTubeManager = (YouTubeManager) nvhm.resolveViewManager(reactTag); int index = youTubeManager.getVideosIndex(youTubeView); @@ -48,7 +54,7 @@ public void getCurrentTime(final int reactTag, final Promise promise) { try { UIManagerModule uiManager = mReactContext.getNativeModule(UIManagerModule.class); uiManager.addUIBlock(new UIBlock() { - public void execute (NativeViewHierarchyManager nvhm) { + public void execute(NativeViewHierarchyManager nvhm) { YouTubeView youTubeView = (YouTubeView) nvhm.resolveView(reactTag); YouTubeManager youTubeManager = (YouTubeManager) nvhm.resolveViewManager(reactTag); int currentTime = youTubeManager.getCurrentTime(youTubeView); @@ -65,7 +71,7 @@ public void getDuration(final int reactTag, final Promise promise) { try { UIManagerModule uiManager = mReactContext.getNativeModule(UIManagerModule.class); uiManager.addUIBlock(new UIBlock() { - public void execute (NativeViewHierarchyManager nvhm) { + public void execute(NativeViewHierarchyManager nvhm) { YouTubeView youTubeView = (YouTubeView) nvhm.resolveView(reactTag); YouTubeManager youTubeManager = (YouTubeManager) nvhm.resolveViewManager(reactTag); int duration = youTubeManager.getDuration(youTubeView); @@ -76,4 +82,15 @@ public void execute (NativeViewHierarchyManager nvhm) { promise.reject(E_MODULE_ERROR, e); } } + + @Nullable + @Override + public Map getConstants() { + Map constants = new HashMap<>(); + constants.put("FULLSCREEN_FLAG_CONTROL_ORIENTATION", YouTubePlayer.FULLSCREEN_FLAG_CONTROL_ORIENTATION); + constants.put("FULLSCREEN_FLAG_CONTROL_SYSTEM_UI", YouTubePlayer.FULLSCREEN_FLAG_CONTROL_SYSTEM_UI); + constants.put("FULLSCREEN_FLAG_ALWAYS_FULLSCREEN_IN_LANDSCAPE", YouTubePlayer.FULLSCREEN_FLAG_ALWAYS_FULLSCREEN_IN_LANDSCAPE); + constants.put("FULLSCREEN_FLAG_CUSTOM_LAYOUT", YouTubePlayer.FULLSCREEN_FLAG_CUSTOM_LAYOUT); + return constants; + } } diff --git a/android/src/main/java/com/inprogress/reactnativeyoutube/YouTubePlayerController.java b/android/src/main/java/com/inprogress/reactnativeyoutube/YouTubePlayerController.java index efacfff1..10d31274 100644 --- a/android/src/main/java/com/inprogress/reactnativeyoutube/YouTubePlayerController.java +++ b/android/src/main/java/com/inprogress/reactnativeyoutube/YouTubePlayerController.java @@ -1,18 +1,16 @@ package com.inprogress.reactnativeyoutube; +import android.os.Handler; import android.view.View; import android.view.ViewGroup; import android.widget.ProgressBar; -import android.os.Handler; +import com.facebook.react.bridge.ReadableArray; import com.google.android.youtube.player.YouTubeInitializationResult; import com.google.android.youtube.player.YouTubePlayer; -import com.facebook.react.bridge.ReadableArray; - import java.util.ArrayList; import java.util.List; -import java.lang.Runnable; public class YouTubePlayerController implements @@ -24,6 +22,8 @@ public class YouTubePlayerController implements private YouTubePlayer mYouTubePlayer; private YouTubeView mYouTubeView; + private int FLAGS_NONE = -1; + private static final int VIDEO_MODE = 0; private static final int VIDEOS_MODE = 1; private static final int PLAYLIST_MODE = 2; @@ -33,6 +33,8 @@ public class YouTubePlayerController implements private int mMode = 0; private int mVideosIndex = 0; + private int mFullscreenControlFlags = FLAGS_NONE; + private String mVideoId = null; private List mVideoIds = new ArrayList(); private String mPlaylistId = null; @@ -54,6 +56,7 @@ public void onInitializationSuccess(YouTubePlayer.Provider provider, YouTubePlay mYouTubePlayer.setPlayerStateChangeListener(this); mYouTubePlayer.setPlaybackEventListener(this); mYouTubePlayer.setOnFullscreenListener(this); + updateFullscreenControlFlags(); updateFullscreen(); updateShowFullscreenButton(); updateControls(); @@ -162,11 +165,11 @@ public void seekTo(int second) { } public int getCurrentTime() { - return mYouTubePlayer.getCurrentTimeMillis() / 1000; + return mYouTubePlayer.getCurrentTimeMillis() / 1000; } public int getDuration() { - return mYouTubePlayer.getDurationMillis() / 1000; + return mYouTubePlayer.getDurationMillis() / 1000; } public void nextVideo() { @@ -241,6 +244,12 @@ private void updateFullscreen() { mYouTubePlayer.setFullscreen(mFullscreen); } + private void updateFullscreenControlFlags() { + if (mFullscreenControlFlags != -1) { + mYouTubePlayer.setFullscreenControlFlags(mFullscreenControlFlags); + } + } + private void updateShowFullscreenButton() { mYouTubePlayer.setShowFullscreenButton(mShowFullscreenButton); } @@ -312,7 +321,7 @@ public void onVideoFragmentResume() { handler.postDelayed(new Runnable() { @Override public void run() { - mYouTubePlayer.play(); + mYouTubePlayer.play(); } }, 1); } @@ -380,6 +389,11 @@ public void setFullscreen(boolean fullscreen) { if (isLoaded()) updateFullscreen(); } + public void setFullscreenControlFlags(int flags) { + mFullscreenControlFlags = flags; + if (isLoaded()) updateFullscreenControlFlags(); + } + public void setControls(int controls) { if (controls >= 0 && controls <= 2) { mControls = controls; diff --git a/android/src/main/java/com/inprogress/reactnativeyoutube/YouTubeView.java b/android/src/main/java/com/inprogress/reactnativeyoutube/YouTubeView.java index 3b629d81..1798f55e 100644 --- a/android/src/main/java/com/inprogress/reactnativeyoutube/YouTubeView.java +++ b/android/src/main/java/com/inprogress/reactnativeyoutube/YouTubeView.java @@ -3,9 +3,10 @@ import android.app.FragmentManager; import android.os.Build; import android.os.Parcelable; -import androidx.annotation.Nullable; import android.widget.FrameLayout; +import androidx.annotation.Nullable; + import com.facebook.react.bridge.Arguments; import com.facebook.react.bridge.ReactContext; import com.facebook.react.bridge.ReadableArray; @@ -185,6 +186,10 @@ public void setFullscreen(boolean bool) { mYouTubeController.setFullscreen(bool); } + public void setFullscreenControlFlags(int flags) { + mYouTubeController.setFullscreenControlFlags(flags); + } + public void setControls(int nb) { mYouTubeController.setControls(nb); } diff --git a/main.d.ts b/main.d.ts index d771db74..4e5145a6 100644 --- a/main.d.ts +++ b/main.d.ts @@ -12,6 +12,7 @@ export interface YouTubeProps { showinfo?: boolean; modestbranding?: boolean; showFullscreenButton?: boolean; + fullscreenControlFlags?: number; rel?: boolean; origin?: string; onError?: (event: any) => void; @@ -32,6 +33,11 @@ declare class YouTube extends React.Component { getCurrentTime(): Promise; getDuration(): Promise; reloadIframe(): void; + + static FULLSCREEN_FLAG_CONTROL_ORIENTATION?: number; + static FULLSCREEN_FLAG_CONTROL_SYSTEM_UI?: number; + static FULLSCREEN_FLAG_ALWAYS_FULLSCREEN_IN_LANDSCAPE?: number; + static FULLSCREEN_FLAG_CUSTOM_LAYOUT?: number; } export declare const YouTubeStandaloneIOS: { From d5530f498e703a41e8fc050722de300889478ef0 Mon Sep 17 00:00:00 2001 From: Wojciech Stanisz Date: Mon, 12 Oct 2020 15:50:05 +0200 Subject: [PATCH 3/3] Add ref to props --- main.d.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/main.d.ts b/main.d.ts index d771db74..e74a28da 100644 --- a/main.d.ts +++ b/main.d.ts @@ -2,6 +2,7 @@ import * as React from 'react'; import { StyleProp, ViewStyle } from 'react-native'; export interface YouTubeProps { + ref?: any; videoId?: string; videoIds?: string[]; playlistId?: string;