How to use the expo-av.Video.RESIZE_MODE_CONTAIN function in expo-av

To help you get started, we’ve selected a few expo-av examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github RocketChat / Rocket.Chat.ReactNative / app / containers / FileModal.js View on Github external
loadingRender={() => <ActivityIndicator size='large' theme={theme} />}
				/>
			</SafeAreaView>
		);
	}
	if (attachment && attachment.video_url) {
		const [loading, setLoading] = useState(true);
		const uri = formatAttachmentUrl(attachment.video_url, user.id, user.token, baseUrl);
		return (
			<>
				<Video
					source={{ uri }}
					rate={1.0}
					volume={1.0}
					isMuted={false}
					resizeMode={Video.RESIZE_MODE_CONTAIN}
					shouldPlay
					isLooping={false}
					style={styles.video}
					useNativeControls
					onReadyForDisplay={() => setLoading(false)}
					onLoadStart={() => setLoading(true)}
					onError={console.log}
				/>
				{ loading ? <ActivityIndicator size='large' theme={theme} absolute /> : null }
			</>
		);
	}
	return null;
});
github expo / expo / apps / native-component-list / src / screens / AV / VideoPlayer.tsx View on Github external
};
        }
      | Asset;
  },
  State
> {
  readonly state: State = {
    isLoaded: false,
    isLooping: false,
    isPlaying: false,
    positionMillis: 0,
    durationMillis: 0,
    rate: 1,
    shouldCorrectPitch: false,
    useNativeControls: false,
    resizeMode: Video.RESIZE_MODE_CONTAIN,
  };

  _video?: Video;

  _handleError = (errorMessage: string) => this.setState({ errorMessage });

  _handleVideoMount = (ref: Video) => (this._video = ref);

  _updateStateToStatus = (status: any) => this.setState(status);

  _playAsync = async () => this._video!.playAsync();

  _pauseAsync = async () => this._video!.pauseAsync();

  _setPositionAsync = async (position: number) => this._video!.setPositionAsync(position);
github expo / expo / apps / native-component-list / src / screens / AV / VideoPlayer.tsx View on Github external
iconName: 'options',
            title: 'Native controls',
            onPress: this._toggleNativeControls,
            active: this.state.useNativeControls,
          },
          {
            iconName: 'move',
            title: 'Resize mode – stretch',
            onPress: this._resizeModeSetter(Video.RESIZE_MODE_STRETCH),
            active: this.state.resizeMode === Video.RESIZE_MODE_STRETCH,
          },
          {
            iconName: 'log-in',
            title: 'Resize mode – contain',
            onPress: this._resizeModeSetter(Video.RESIZE_MODE_CONTAIN),
            active: this.state.resizeMode === Video.RESIZE_MODE_CONTAIN,
          },
          {
            iconName: 'qr-scanner',
            title: 'Resize mode – cover',
            onPress: this._resizeModeSetter(Video.RESIZE_MODE_COVER),
            active: this.state.resizeMode === Video.RESIZE_MODE_COVER,
          },
          {
            iconName: 'resize',
            title: 'Open fullscreen',
            onPress: this._openFullscreen,
            active: false,
          },
        ]}
        header={this._renderVideo()}
      />
github expo / expo / apps / native-component-list / src / screens / AV / VideoPlayer.tsx View on Github external
{
            iconName: 'options',
            title: 'Native controls',
            onPress: this._toggleNativeControls,
            active: this.state.useNativeControls,
          },
          {
            iconName: 'move',
            title: 'Resize mode – stretch',
            onPress: this._resizeModeSetter(Video.RESIZE_MODE_STRETCH),
            active: this.state.resizeMode === Video.RESIZE_MODE_STRETCH,
          },
          {
            iconName: 'log-in',
            title: 'Resize mode – contain',
            onPress: this._resizeModeSetter(Video.RESIZE_MODE_CONTAIN),
            active: this.state.resizeMode === Video.RESIZE_MODE_CONTAIN,
          },
          {
            iconName: 'qr-scanner',
            title: 'Resize mode – cover',
            onPress: this._resizeModeSetter(Video.RESIZE_MODE_COVER),
            active: this.state.resizeMode === Video.RESIZE_MODE_COVER,
          },
          {
            iconName: 'resize',
            title: 'Open fullscreen',
            onPress: this._openFullscreen,
            active: false,
          },
        ]}
        header={this._renderVideo()}
github expo / playlist-example / App.js View on Github external
{this.state.playbackInstanceName}
          </Text>
        </View>
        <View style={styles.space} />
        <View style={styles.videoContainer}>
          <Video
            ref={this._mountVideo}
            style={[
              styles.video,
              {
                opacity: this.state.showVideo ? 1.0 : 0.0,
                width: this.state.videoWidth,
                height: this.state.videoHeight
              }
            ]}
            resizeMode={Video.RESIZE_MODE_CONTAIN}
            onPlaybackStatusUpdate={this._onPlaybackStatusUpdate}
            onLoadStart={this._onLoadStart}
            onLoad={this._onLoad}
            onError={this._onError}
            onFullscreenUpdate={this._onFullscreenUpdate}
            onReadyForDisplay={this._onReadyForDisplay}
            useNativeControls={this.state.useNativeControls}
          />
        </View>
        <View
          style={[
            styles.playbackContainer,
            {
              opacity: this.state.isLoading ? DISABLED_OPACITY : 1.0
            }
          ]}
github serlo / serlo-abc / src / components / common / Video.js View on Github external
render() {
    const platform = propOr('unknown', Constants, 'platform');

    return (
      <View style={styles.container}>
        <Video
          resizeMode={Video.RESIZE_MODE_CONTAIN}
          source={this.props.video}
          style={[
            {
              width: '100%',
              height: '100%'
            },
            platform === 'ios' && { backgroundColor: 'transparent' }
          ]}
          useNativeControls
          shouldPlay
          onPlaybackStatusUpdate={this.onPlaybackStatusUpdate}
        />
      </View>
    );
  }
}