1import * as React from 'react'; 2import { ImageProps, ViewProps, StyleProp, ViewStyle } from 'react-native'; 3 4import { 5 AVPlaybackNativeSource, 6 AVPlaybackSource, 7 AVPlaybackStatus, 8 AVPlaybackStatusToSet, 9} from './AV'; 10 11// @needsAudit 12export type VideoNaturalSize = { 13 /** 14 * A number describing the width in pixels of the video data. 15 */ 16 width: number; 17 /** 18 * A number describing the height in pixels of the video data. 19 */ 20 height: number; 21 /** 22 * A string describing the natural orientation of the video data. 23 */ 24 orientation: 'portrait' | 'landscape'; 25}; 26 27// @needsAudit 28export enum ResizeMode { 29 /** 30 * Fit within component bounds while preserving aspect ratio. 31 */ 32 CONTAIN = 'contain', 33 /** 34 * Fill component bounds while preserving aspect ratio. 35 */ 36 COVER = 'cover', 37 /** 38 * Stretch to fill component bounds. 39 */ 40 STRETCH = 'stretch', 41} 42 43// @needsAudit 44export type VideoReadyForDisplayEvent = { 45 /** 46 * An object containing the basic data about video size. 47 */ 48 naturalSize: VideoNaturalSize; 49 /** 50 * The `AVPlaybackStatus` of the video. See the [AV documentation](./av/#playback-status) for further information. 51 */ 52 status?: AVPlaybackStatus; 53}; 54 55// @needsAudit 56export enum VideoFullscreenUpdate { 57 /** 58 * Describing that the fullscreen player is about to present. 59 */ 60 PLAYER_WILL_PRESENT = 0, 61 /** 62 * Describing that the fullscreen player just finished presenting. 63 */ 64 PLAYER_DID_PRESENT = 1, 65 /** 66 * Describing that the fullscreen player is about to dismiss. 67 */ 68 PLAYER_WILL_DISMISS = 2, 69 /** 70 * Describing that the fullscreen player just finished dismissing. 71 */ 72 PLAYER_DID_DISMISS = 3, 73} 74 75// @needsAudit 76export type VideoFullscreenUpdateEvent = { 77 /** 78 * The kind of the fullscreen update. 79 */ 80 fullscreenUpdate: VideoFullscreenUpdate; 81 /** 82 * The `AVPlaybackStatus` of the video. See the [AV documentation](./av) for further information. 83 */ 84 status?: AVPlaybackStatus; 85}; 86 87// @needsAudit 88/** 89 * The Video component props can be divided into following groups: 90 * - The `source` and `posterSource` props customize the source of the video content. 91 * - The `useNativeControls`, `resizeMode`, and `usePoster` props customize the UI of the component. 92 * - The `onPlaybackStatusUpdate`, `onReadyForDisplay`, and `onIOSFullscreenUpdate` props pass information of the state of the `Video` component. 93 * - The `onLoadStart`, `onLoad`, and `onError` props are also provided for backwards compatibility with `Image` 94 * (but they are redundant with `onPlaybackStatusUpdate`). 95 * Finally, the rest of props are available to control the playback of the video, but we recommend that, for finer control, you use the methods 96 * available on the `ref` described in the [AV documentation](./av). 97 */ 98export type VideoProps = { 99 // Source stuff 100 101 /** 102 * The source of the video data to display. If this prop is `null`, or left blank, the video component will display nothing. 103 * Note that this can also be set on the `ref` via `loadAsync()`. See the [AV documentation](./av) for further information. 104 * 105 * @see 106 * - The [Android developer documentation](https://developer.android.com/guide/topics/media/media-formats#video-formats) 107 * lists of the video formats supported on Android. 108 * - The [iOS developer documentation](https://developer.apple.com/documentation/coremedia/1564239-video_codec_constants) 109 * lists of the video formats supported on iOS. 110 */ 111 source?: AVPlaybackSource; 112 /** 113 * The source of an optional image to display over the video while it is loading. The following forms are supported: 114 * - A dictionary of the form `{ uri: 'http://path/to/file' }` with a network URL pointing to an image file on the web. 115 * - `require('path/to/file')` for an image file asset in the source code directory. 116 */ 117 posterSource?: ImageProps['source']; 118 /** 119 * An optional property to pass custom styles to the poster image. 120 */ 121 posterStyle?: ImageProps['style']; 122 /** 123 * An optional property to pass custom styles to the internal video component. 124 */ 125 videoStyle?: StyleProp<ViewStyle>; 126 127 // Callbacks 128 /** 129 * A function to be called regularly with the `AVPlaybackStatus` of the video. You will likely be using this a lot. 130 * See the [AV documentation](./av) for further information on `onPlaybackStatusUpdate`, and the interval at which it is called. 131 * @param status 132 */ 133 onPlaybackStatusUpdate?: (status: AVPlaybackStatus) => void; 134 /** 135 * A function to be called when the video begins to be loaded into memory. Called without any arguments. 136 */ 137 onLoadStart?: () => void; 138 /** 139 * A function to be called once the video has been loaded. The data is streamed so all of it may not have been fetched yet, just enough to render the first frame. 140 * The function is called with the `AVPlaybackStatus` of the video as its parameter. See the [AV documentation](./av) for further information. 141 * @param status 142 */ 143 onLoad?: (status: AVPlaybackStatus) => void; 144 /** 145 * A function to be called if load or playback have encountered a fatal error. The function is passed a single error message string as a parameter. 146 * Errors sent here are also set on `playbackStatus.error` that are passed into the `onPlaybackStatusUpdate` callback. 147 * @param error 148 */ 149 onError?: (error: string) => void; 150 /** 151 * A function to be called when the video is ready for display. Note that this function gets called whenever the video's natural size changes. 152 * @param event 153 */ 154 onReadyForDisplay?: (event: VideoReadyForDisplayEvent) => void; 155 /** 156 * A function to be called when the state of the native iOS fullscreen view changes (controlled via the `presentFullscreenPlayer()` 157 * and `dismissFullscreenPlayer()` methods on the `Video`'s `ref`). 158 * @param event 159 */ 160 onFullscreenUpdate?: (event: VideoFullscreenUpdateEvent) => void; 161 162 // UI stuff 163 164 /** 165 * A boolean which, if set to `true`, will display native playback controls (such as play and pause) within the `Video` component. 166 * If you'd prefer to use custom controls, you can write them yourself, and/or check out the [`VideoPlayer` component](https://github.com/ihmpavel/expo-video-player). 167 */ 168 useNativeControls?: boolean; 169 /** 170 * A string describing how the video should be scaled for display in the component view bounds. 171 * Must be one of the [`ResizeMode`](#resizemode) enum values. 172 */ 173 resizeMode?: ResizeMode; 174 /** 175 * A boolean which, if set to `true`, will display an image (whose source is set via the prop `posterSource`) while the video is loading. 176 */ 177 usePoster?: boolean; 178 /** 179 * A react-native `Image` like component to display the poster image. 180 */ 181 PosterComponent?: React.ComponentType<{ 182 style: ImageProps['style']; 183 source: ImageProps['source']; 184 }>; 185 186 // Playback API 187 /** 188 * A dictionary setting a new `AVPlaybackStatusToSet` on the video. 189 * See the [AV documentation](./av#default-initial--avplaybackstatustoset) for more information on `AVPlaybackStatusToSet`. 190 */ 191 status?: AVPlaybackStatusToSet; 192 /** 193 * A number describing the new minimum interval in milliseconds between calls of `onPlaybackStatusUpdate`. 194 * See the [AV documentation](./av) for more information. 195 */ 196 progressUpdateIntervalMillis?: number; 197 /** 198 * The desired position of playback in milliseconds. 199 * See the [AV documentation](./av) for more information. 200 */ 201 positionMillis?: number; 202 /** 203 * A boolean describing if the media is supposed to play. Playback may not start immediately after setting this value for reasons such as buffering. 204 * Make sure to update your UI based on the `isPlaying` and `isBuffering` properties of the `AVPlaybackStatus`. 205 * See the [AV documentation](./av) for more information. 206 */ 207 shouldPlay?: boolean; 208 /** 209 * The desired playback rate of the media. This value must be between `0.0` and `32.0`. Only available on Android API version 23 and later and iOS. 210 * See the [AV documentation](./av) for more information. 211 */ 212 rate?: number; 213 /** 214 * A boolean describing if we should correct the pitch for a changed rate. If set to `true`, the pitch of the audio will be corrected 215 * (so a rate different than `1.0` will timestretch the audio). 216 * See the [AV documentation](./av) for more information. 217 */ 218 shouldCorrectPitch?: boolean; 219 /** 220 * The desired volume of the audio for this media. This value must be between `0.0` (silence) and `1.0` (maximum volume). 221 * See the [AV documentation](./av) for more information. 222 */ 223 volume?: number; 224 /** 225 * A boolean describing if the audio of this media should be muted. 226 * See the [AV documentation](./av) for more information. 227 */ 228 isMuted?: boolean; 229 /** 230 * The desired audio panning value of the audio for this media. This value must be between `-1.0` (full left) and `1.0` (full right). 231 * See the [AV documentation](./av) for more information. 232 */ 233 audioPan?: number; 234 /** 235 * A boolean describing if the media should play once (`false`) or loop indefinitely (`true`). 236 * See the [AV documentation](./av) for more information. 237 */ 238 isLooping?: boolean; 239 240 // Required by react-native 241 /** 242 * @hidden 243 */ 244 scaleX?: number; 245 /** 246 * @hidden 247 */ 248 scaleY?: number; 249 /** 250 * @hidden 251 */ 252 translateX?: number; 253 /** 254 * @hidden 255 */ 256 translateY?: number; 257 /** 258 * @hidden 259 */ 260 rotation?: number; 261} & ViewProps; 262 263/** 264 * @hidden 265 */ 266export type VideoNativeProps = { 267 source?: AVPlaybackNativeSource | null; 268 resizeMode?: unknown; 269 status?: AVPlaybackStatusToSet; 270 onLoadStart?: () => void; 271 onLoad?: (event: { nativeEvent: AVPlaybackStatus }) => void; 272 onError?: (event: { nativeEvent: { error: string } }) => void; 273 onStatusUpdate?: (event: { nativeEvent: AVPlaybackStatus }) => void; 274 onReadyForDisplay?: (event: { nativeEvent: VideoReadyForDisplayEvent }) => void; 275 onFullscreenUpdate?: (event: { nativeEvent: VideoFullscreenUpdateEvent }) => void; 276 useNativeControls?: boolean; 277 videoStyle?: StyleProp<ViewStyle>; 278} & ViewProps; 279 280// @docsMissing 281export type VideoState = { 282 showPoster: boolean; 283}; 284 285/** 286 * @hidden 287 */ 288export type ExponentVideoComponent = React.ComponentClass<VideoNativeProps>; 289