[expo-av] Add support for passing custom styles to Video poster

Fixes expo#4165
Jamedjo · May 9, 2019 · b3549b9 · b3549b9
1 parent f95a73e
commit b3549b9
Show file tree

Hide file tree

Showing 7 changed files with 15 additions and 10 deletions.
diff --git a/build/Video.d.ts b/build/Video.d.ts
@@ -26,7 +26,7 @@ export default class Video extends React.Component<VideoProps, VideoState> imple
     static propTypes: {
         hitSlop?: PropTypes.Validator<import("react-native").Insets | undefined> | undefined;
         onLayout?: PropTypes.Validator<((event: import("react-native").LayoutChangeEvent) => void) | undefined> | undefined;
-        pointerEvents?: PropTypes.Validator<"box-none" | "none" | "box-only" | "auto" | undefined> | undefined;
+        pointerEvents?: PropTypes.Validator<"none" | "box-none" | "box-only" | "auto" | undefined> | undefined;
         removeClippedSubviews?: PropTypes.Validator<boolean | undefined> | undefined;
         style?: PropTypes.Validator<import("react-native").StyleProp<import("react-native").ViewStyle>> | undefined;
         testID?: PropTypes.Validator<string | undefined> | undefined;
@@ -64,14 +64,14 @@ export default class Video extends React.Component<VideoProps, VideoState> imple
         onTouchEndCapture?: PropTypes.Validator<((event: import("react-native").GestureResponderEvent) => void) | undefined> | undefined;
         accessible?: PropTypes.Validator<boolean | undefined> | undefined;
         accessibilityLabel?: PropTypes.Validator<string | undefined> | undefined;
-        accessibilityRole?: PropTypes.Validator<"button" | "header" | "link" | "summary" | "image" | "text" | "none" | "search" | "keyboardkey" | "adjustable" | "imagebutton" | undefined> | undefined;
+        accessibilityRole?: PropTypes.Validator<"none" | "button" | "header" | "link" | "summary" | "image" | "text" | "search" | "keyboardkey" | "adjustable" | "imagebutton" | undefined> | undefined;
         accessibilityStates?: PropTypes.Validator<import("react-native").AccessibilityState[] | undefined> | undefined;
         accessibilityHint?: PropTypes.Validator<string | undefined> | undefined;
-        accessibilityComponentType?: PropTypes.Validator<"button" | "none" | "radiobutton_checked" | "radiobutton_unchecked" | undefined> | undefined;
+        accessibilityComponentType?: PropTypes.Validator<"none" | "button" | "radiobutton_checked" | "radiobutton_unchecked" | undefined> | undefined;
         accessibilityLiveRegion?: PropTypes.Validator<"none" | "polite" | "assertive" | undefined> | undefined;
         importantForAccessibility?: PropTypes.Validator<"auto" | "yes" | "no" | "no-hide-descendants" | undefined> | undefined;
         accessibilityElementsHidden?: PropTypes.Validator<boolean | undefined> | undefined;
-        accessibilityTraits?: PropTypes.Validator<"button" | "header" | "link" | "summary" | "image" | "text" | "none" | "search" | "adjustable" | "selected" | "disabled" | "plays" | "key" | "frequentUpdates" | "startsMedia" | "allowsDirectInteraction" | "pageTurn" | import("react-native").AccessibilityTrait[] | undefined> | undefined;
+        accessibilityTraits?: PropTypes.Validator<"key" | "none" | "button" | "header" | "link" | "summary" | "image" | "text" | "search" | "adjustable" | "selected" | "disabled" | "plays" | "frequentUpdates" | "startsMedia" | "allowsDirectInteraction" | "pageTurn" | import("react-native").AccessibilityTrait[] | undefined> | undefined;
         onAccessibilityTap?: PropTypes.Validator<(() => void) | undefined> | undefined;
         onMagicTap?: PropTypes.Validator<(() => void) | undefined> | undefined;
         accessibilityIgnoresInvertColors?: PropTypes.Validator<boolean | undefined> | undefined;
@@ -82,6 +82,7 @@ export default class Video extends React.Component<VideoProps, VideoState> imple
         posterSource: PropTypes.Requireable<number | PropTypes.InferProps<{
             uri: PropTypes.Requireable<string>;
         }>>;
+        posterStyle: PropTypes.Validator<import("react-native").StyleProp<import("react-native").ViewStyle>> | undefined;
         onPlaybackStatusUpdate: PropTypes.Requireable<(...args: any[]) => any>;
         onLoadStart: PropTypes.Requireable<(...args: any[]) => any>;
         onLoad: PropTypes.Requireable<(...args: any[]) => any>;

diff --git a/build/Video.js b/build/Video.js
diff --git a/build/Video.js.map b/build/Video.js.map
diff --git a/build/Video.types.d.ts b/build/Video.types.d.ts
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { View } from 'react-native';
+import { View, StyleProp, ViewStyle } from 'react-native';
 import { PlaybackNativeSource, PlaybackSource, PlaybackStatus, PlaybackStatusToSet } from './AV';
 export declare type NaturalSize = {
     width: number;
@@ -24,6 +24,7 @@ export declare type VideoProps = {
     posterSource?: {
         uri: string;
     } | number;
+    posterStyle?: StyleProp<ViewStyle>;
     onPlaybackStatusUpdate?: (status: PlaybackStatus) => void;
     onLoadStart?: () => void;
     onLoad?: (status: PlaybackStatus) => void;

diff --git a/build/Video.types.js.map b/build/Video.types.js.map
diff --git a/src/Video.tsx b/src/Video.tsx
@@ -106,6 +106,7 @@ export default class Video extends React.Component<VideoProps, VideoState> imple
       }), // remote URI like { uri: 'http://foo/bar.mp4' }
       PropTypes.number, // asset module like require('./foo/bar.mp4')
     ]),
+    posterStyle: ViewPropTypes.style,
 
     // Callbacks
     onPlaybackStatusUpdate: PropTypes.func,
@@ -364,7 +365,7 @@ export default class Video extends React.Component<VideoProps, VideoState> imple
   _renderPoster = () =>
     this.props.usePoster && this.state.showPoster ? (
       // @ts-ignore: the react-native type declarations are overly restrictive
-      <Image style={_STYLES.poster} source={this.props.posterSource!} />
+      <Image style={[_STYLES.poster, this.props.posterStyle]} source={this.props.posterSource!} />
     ) : null;
 
   render() {

diff --git a/src/Video.types.ts b/src/Video.types.ts
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { View } from 'react-native';
+import { View, StyleProp, ViewStyle } from 'react-native';
 
 import { PlaybackNativeSource, PlaybackSource, PlaybackStatus, PlaybackStatusToSet } from './AV';
 export type NaturalSize = {
@@ -28,6 +28,7 @@ export type VideoProps = {
   // Source stuff
   source?: PlaybackSource; // { uri: 'http://foo/bar.mp4' }, Asset, or require('./foo/bar.mp4')
   posterSource?: { uri: string } | number; // { uri: 'http://foo/bar.mp4' } or require('./foo/bar.mp4')
+  posterStyle?: StyleProp<ViewStyle>;
 
   // Callbacks
   onPlaybackStatusUpdate?: (status: PlaybackStatus) => void;