From d0f4740abcab4a43bdb999866408a21563b686a5 Mon Sep 17 00:00:00 2001 From: Tasos Bitsios Date: Sun, 19 Apr 2020 05:05:47 +0200 Subject: [PATCH 1/9] Typescript definition corrections: Props: added apiKey: string on{State,Quality,...}: added handler definitions StandaloneAndroid: fixed playlistId --- main.d.ts | 33 ++++++++++++++++++++++++++------- 1 file changed, 26 insertions(+), 7 deletions(-) diff --git a/main.d.ts b/main.d.ts index d771db74..c0dc33bc 100644 --- a/main.d.ts +++ b/main.d.ts @@ -1,7 +1,26 @@ import * as React from 'react'; import { StyleProp, ViewStyle } from 'react-native'; +export type OnErrorArg = { error: string } + +export type OnChangeQualityArg = { quality: string } // TODO doublecheck, havent seen this + +export type OnChangeFullscreenArg = { isFullscreen: boolean } + +export type OnProgressArg = { currentTime: number } + +export type OnChangeStateArg = + { state: 'started' } | + { state: 'playing' } | + { state: 'buffering' } | + { state: 'paused' } | + { state: 'stopped' } | + { state: 'seeking', currentTime: number } + +export type YouTubeState = 'started' | 'playing' | 'buffering' | 'paused' | 'stopped' | 'seeking' + export interface YouTubeProps { + apiKey: string; videoId?: string; videoIds?: string[]; playlistId?: string; @@ -14,12 +33,12 @@ export interface YouTubeProps { showFullscreenButton?: boolean; rel?: boolean; origin?: string; - onError?: (event: any) => void; - onReady?: (event: any) => void; - onChangeState?: () => void; - onChangeQuality?: () => void; - onChangeFullscreen?: (event: any) => void; - onProgress?: (event: any) => void; + onError?: (arg: OnErrorArg) => void; + onReady?: () => void; + onChangeState?: (arg: OnChangeStateArg) => void; + onChangeQuality?: (arg: OnChangeQualityArg) => void; + onChangeFullscreen?: (arg: OnChangeFullscreenArg) => void; + onProgress?: (arg: OnProgressArg) => void; style?: StyleProp; } @@ -56,7 +75,7 @@ export declare const YouTubeStandaloneAndroid: { }): Promise; playPlaylist(params: { apiKey: string; - playlistId: string[]; + playlistId: string; autoplay?: boolean; lightboxMode?: boolean; startIndex?: number; From 7cab7c815ddf330f9dc64913295ff30b4b1c452b Mon Sep 17 00:00:00 2001 From: Tasos Bitsios Date: Sun, 19 Apr 2020 06:05:01 +0200 Subject: [PATCH 2/9] 2.0.0 -> 2.0.1 fix in example/package.json --- example/package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/example/package.json b/example/package.json index 15f324e2..16455d2c 100644 --- a/example/package.json +++ b/example/package.json @@ -7,7 +7,7 @@ "ios": "react-native run-ios", "start": "react-native start", "preinstall": "npm pack ..", - "install-root": "npm run pack-root && npm install react-native-youtube-2.0.0.tgz", + "install-root": "npm run pack-root && npm install react-native-youtube-2.0.1.tgz", "reinstall-native-ios": "npm run install-root && npm run postinstall", "postinstall": "cd ios && pod install && cd ..", "clean": "rimraf ios/build ios/Pods android/.gradle android/app/build package-lock.json yarn-lock.json node_modules", @@ -19,7 +19,7 @@ "prettier": "^2.0.4", "react": "16.9.0", "react-native": "0.61.5", - "react-native-youtube": "file:react-native-youtube-2.0.0.tgz", + "react-native-youtube": "file:react-native-youtube-2.0.1.tgz", "rimraf": "^3.0.0" }, "devDependencies": { From faa83dcab697addb519ee2be883f85ba8d529778 Mon Sep 17 00:00:00 2001 From: Tasos Bitsios Date: Sun, 19 Apr 2020 06:17:29 +0200 Subject: [PATCH 3/9] Example project in typescript --- example/ReactNativeYouTubeExample.tsx_ | 404 +++++++++++++++++++++++++ example/package.json | 2 + example/tsconfig.json | 12 + main.d.ts | 2 +- 4 files changed, 419 insertions(+), 1 deletion(-) create mode 100644 example/ReactNativeYouTubeExample.tsx_ create mode 100644 example/tsconfig.json diff --git a/example/ReactNativeYouTubeExample.tsx_ b/example/ReactNativeYouTubeExample.tsx_ new file mode 100644 index 00000000..cd8bbc66 --- /dev/null +++ b/example/ReactNativeYouTubeExample.tsx_ @@ -0,0 +1,404 @@ +/* + * Typescript example. + * + * Before use: + * 1) Rename this file to .tsx + * 2) Delete (or move) the .js counterpart + */ + +import React from 'react'; + +import { + StyleSheet, + View, + Text, + ScrollView, + PixelRatio, + Platform, + Button, + Dimensions, +} from 'react-native'; + +import YouTube, { + YouTubeStandaloneIOS, + YouTubeStandaloneAndroid, + YouTubeState, + OnErrorArg, + OnChangeStateArg, +} from 'react-native-youtube'; + +interface State { + isReady: boolean + status?: YouTubeState + quality?: string + error?: string + isPlaying: boolean + isLooping: boolean + duration: number + currentTime: number + isFullscreen: boolean + playerWidth: number + videosIndex?: number +}; + +export default class ReactNativeYouTubeExample extends React.Component<{}, State> { + state: State = { + isReady: false, + isPlaying: true, + isLooping: true, + duration: 0, + currentTime: 0, + isFullscreen: false, + playerWidth: Dimensions.get('window').width, + }; + + _youTubeRef = React.createRef(); + + render() { + return ( + + {' TYPESCRIPT component for React Native.'} + + { + console.log('error', error) + this.setState({ error }) + }} + onReady={() => { + this.setState({ isReady: true }); + }} + onChangeState={(arg: OnChangeStateArg) => { + console.log('state', arg) + const { state } = arg + // when state == seeking: arg.currentTime exists + if (state !== "stopped" && this.state.error) { + // reset errors + console.log('unsetting error') + this.setState({ error: undefined }) + } + this.setState({ status: state }) + }} + onChangeQuality={({ quality }) => { + console.log('quality', quality); + this.setState({ quality }); + }} + onChangeFullscreen={({ isFullscreen }) => { + console.log('isFull', isFullscreen); + this.setState({ isFullscreen }); + }} + onProgress={(e: any) => { + console.log('prog', e) + this.setState({ currentTime: e.currentTime }); + }} + /> + + {/* Playing / Looping */} + +