expo-av
Version:
Expo universal module for Audio and Video playback
98 lines • 3.41 kB
JavaScript
import * as React from 'react';
import createElement from 'react-native-web/dist/exports/createElement';
import ExponentAV from './ExponentAV';
import { addFullscreenListener } from './FullscreenUtils.web';
import { VideoFullscreenUpdate, } from './Video.types';
const Video = React.forwardRef((props, ref) => createElement('video', { ...props, ref }));
export default class ExponentVideo extends React.Component {
_video;
_removeFullscreenListener;
componentWillUnmount() {
this._removeFullscreenListener?.();
}
onFullscreenChange = (isFullscreen) => {
if (!this.props.onFullscreenUpdate)
return;
if (isFullscreen) {
this.props.onFullscreenUpdate({
nativeEvent: { fullscreenUpdate: VideoFullscreenUpdate.PLAYER_DID_PRESENT },
});
}
else {
this.props.onFullscreenUpdate({
nativeEvent: { fullscreenUpdate: VideoFullscreenUpdate.PLAYER_DID_DISMISS },
});
}
};
onStatusUpdate = async () => {
if (!this.props.onStatusUpdate) {
return;
}
const nativeEvent = await ExponentAV.getStatusForVideo(this._video);
this.props.onStatusUpdate({ nativeEvent });
};
onLoadStart = () => {
if (!this.props.onLoadStart) {
return;
}
this.props.onLoadStart();
this.onStatusUpdate();
};
onLoadedData = (event) => {
if (!this.props.onLoad) {
return;
}
this.props.onLoad(event);
this.onStatusUpdate();
};
onError = (event) => {
if (!this.props.onError) {
return;
}
this.props.onError(event);
this.onStatusUpdate();
};
onProgress = () => {
this.onStatusUpdate();
};
onSeeking = () => {
this.onStatusUpdate();
};
onEnded = () => {
this.onStatusUpdate();
};
onLoadedMetadata = () => {
this.onStatusUpdate();
};
onCanPlay = (event) => {
if (!this.props.onReadyForDisplay) {
return;
}
this.props.onReadyForDisplay(event);
this.onStatusUpdate();
};
onStalled = () => {
this.onStatusUpdate();
};
onRef = (ref) => {
this._removeFullscreenListener?.();
if (ref) {
this._video = ref;
this._removeFullscreenListener = addFullscreenListener(this._video, this.onFullscreenChange);
this.onStatusUpdate();
}
else {
this._removeFullscreenListener = undefined;
}
};
render() {
const { source, status = {}, resizeMode: objectFit, useNativeControls, style } = this.props;
const customStyle = {
position: undefined,
objectFit,
overflow: 'hidden',
};
return (<Video ref={this.onRef} onLoadStart={this.onLoadStart} onLoadedData={this.onLoadedData} onError={this.onError} onTimeUpdate={this.onProgress} onSeeking={this.onSeeking} onEnded={this.onEnded} onLoadedMetadata={this.onLoadedMetadata} onCanPlay={this.onCanPlay} onStalled={this.onStalled} src={source?.uri || undefined} muted={status.isMuted} loop={status.isLooping} autoPlay={status.shouldPlay} controls={useNativeControls} style={[style, customStyle]} playsInline/>);
}
}
//# sourceMappingURL=ExponentVideo.web.js.map