Fix TouchableNativeFeedback.Ripple is not a function

CHANGELOG.md

@@ -1,5 +1,8 @@
 # ChangeLog
 
+## 2.0.1 (June 27, 2021)
+- Fix: Expo Web [#433](https://github.com/ihmpavel/expo-video-player/issues/433)
+
 ## 2.0.0 (June 20, 2021)
 - Rewritten, simplified
 - If you are upgrading from version `1.x`, please check [Migration guide to version 2](https://github.com/ihmpavel/expo-video-player/blob/master/migration-1x-to-2x.md)

dist/index.js

@@ -1,8 +1,8 @@
 import { __awaiter, __rest } from "tslib";
 import { Audio, Video } from 'expo-av';
-import { ActivityIndicator, Animated, StyleSheet, Text, TouchableNativeFeedback, TouchableWithoutFeedback, View, } from 'react-native';
+import { ActivityIndicator, Animated, StyleSheet, Text, TouchableWithoutFeedback, View, } from 'react-native';
 import { ControlStates, ErrorSeverity, PlaybackStates } from './constants';
-import { ErrorMessage, deepMerge, getMinutesSecondsFromMilliseconds, styles } from './utils';
+import { ErrorMessage, TouchableButton, deepMerge, getMinutesSecondsFromMilliseconds, styles, } from './utils';
 import { MaterialIcons } from '@expo/vector-icons';
 import { defaultProps } from './props';
 import { useEffect, useRef, useState } from 'react';
@@ -168,6 +168,7 @@ const VideoPlayer = (tempProps) => {
             backgroundColor: props.style.videoBackgroundColor,
             width: videoWidth,
             height: videoHeight,
+            maxWidth: '100%',
         }}>
       <Video style={styles.videoWrapper} {...props.videoProps} ref={component => {
             playbackInstance = component;
@@ -181,7 +182,7 @@ const VideoPlayer = (tempProps) => {
           <View style={Object.assign(Object.assign({}, StyleSheet.absoluteFillObject), { backgroundColor: props.style.controlsBackgroundColor, opacity: 0.5 })}/>
           <View pointerEvents={controlsState === ControlStates.Visible ? 'auto' : 'none'}>
             <View style={styles.iconWrapper}>
-              <TouchableNativeFeedback onPress={togglePlay} background={TouchableNativeFeedback.Ripple('white', true)}>
+              <TouchableButton onPress={togglePlay}>
                 <View>
                   {playbackInstanceInfo.state === PlaybackStates.Buffering &&
             (props.icon.loading || <ActivityIndicator {...props.activityIndicator}/>)}
@@ -197,7 +198,7 @@ const VideoPlayer = (tempProps) => {
                     ? 'play-arrow'
                     : 'replay'} style={props.icon.style} size={props.icon.size} color={props.icon.color}/>)}
                 </View>
-              </TouchableNativeFeedback>
+              </TouchableButton>
             </View>
           </View>
         </Animated.View>
@@ -212,7 +213,7 @@ const VideoPlayer = (tempProps) => {
         {props.timeVisible && (<Text style={[props.textStyle, styles.timeLeft]}>
             {getMinutesSecondsFromMilliseconds(playbackInstanceInfo.position)}
           </Text>)}
-        {props.slider.visible && (<Slider {...sliderProps} style={[{ flex: 1 }, props.slider.style]} value={playbackInstanceInfo.duration
+        {props.slider.visible && (<Slider {...sliderProps} style={[styles.slider, props.slider.style]} value={playbackInstanceInfo.duration
                 ? playbackInstanceInfo.position / playbackInstanceInfo.duration
                 : 0} onSlidingStart={() => {
                 if (playbackInstanceInfo.state === PlaybackStates.Playing) {
@@ -232,16 +233,16 @@ const VideoPlayer = (tempProps) => {
         {props.timeVisible && (<Text style={[props.textStyle, styles.timeRight]}>
             {getMinutesSecondsFromMilliseconds(playbackInstanceInfo.duration)}
           </Text>)}
-        {props.fullscreen.visible && (<TouchableNativeFeedback onPress={() => props.fullscreen.inFullscreen
+        {props.fullscreen.visible && (<TouchableButton onPress={() => props.fullscreen.inFullscreen
                 ? props.fullscreen.exitFullscreen()
-                : props.fullscreen.enterFullscreen()} background={TouchableNativeFeedback.Ripple('white', true)}>
+                : props.fullscreen.enterFullscreen()}>
             <View>
               {props.icon.fullscreen}
               {props.icon.exitFullscreen}
               {((!props.icon.fullscreen && props.fullscreen.inFullscreen) ||
                 (!props.icon.exitFullscreen && !props.fullscreen.inFullscreen)) && (<MaterialIcons name={props.fullscreen.inFullscreen ? 'fullscreen-exit' : 'fullscreen'} style={props.icon.style} size={props.icon.size / 2} color={props.icon.color}/>)}
             </View>
-          </TouchableNativeFeedback>)}
+          </TouchableButton>)}
       </Animated.View>
     </View>);
 };

dist/props.js

@@ -1,4 +1,4 @@
-import { Dimensions } from 'react-native';
+import { Dimensions, Platform } from 'react-native';
 export const defaultProps = {
     errorCallback: error => console.error(`[VideoPlayer] ${error.type} Error - ${error.message}: ${error.obj}`),
     // eslint-disable-next-line @typescript-eslint/no-empty-function
@@ -22,7 +22,7 @@ export const defaultProps = {
         fadeOutDuration: 300,
     },
     style: {
-        width: Dimensions.get('window').width,
+        width: Platform.OS === 'web' ? '100%' : Dimensions.get('window').width,
         height: Dimensions.get('window').height,
         videoBackgroundColor: '#000',
         controlsBackgroundColor: '#000',

dist/utils.d.ts

@@ -1,10 +1,14 @@
-/// <reference types="react" />
-import { TextStyle } from 'react-native';
+import { TextStyle, TouchableNativeFeedbackProps, TouchableOpacityProps } from 'react-native';
+import React from 'react';
 export declare const ErrorMessage: ({ message, style }: {
     message: string;
     style: TextStyle;
 }) => JSX.Element;
 export declare const getMinutesSecondsFromMilliseconds: (ms: number) => string;
+declare type ButtonProps = (TouchableNativeFeedbackProps | TouchableOpacityProps) & {
+    children: React.ReactNode;
+};
+export declare const TouchableButton: (props: ButtonProps) => JSX.Element;
 export declare const deepMerge: (target: {
     [x: string]: any;
 }, source: {
@@ -24,6 +28,7 @@ export declare const styles: {
     };
     videoWrapper: {
         flex: number;
+        justifyContent: "center";
     };
     iconWrapper: {
         borderRadius: number;
@@ -48,4 +53,9 @@ export declare const styles: {
         backgroundColor: string;
         marginRight: number;
     };
+    slider: {
+        flex: number;
+        paddingHorizontal: number;
+    };
 };
+export {};

dist/utils.js

@@ -1,4 +1,4 @@
-import { StyleSheet, Text, View } from 'react-native';
+import { Platform, StyleSheet, Text, TouchableNativeFeedback, TouchableOpacity, View, } from 'react-native';
 import React from 'react';
 export const ErrorMessage = ({ message, style }) => (<View style={styles.errorWrapper}>
     <Text style={style}>{message}</Text>
@@ -9,6 +9,7 @@ export const getMinutesSecondsFromMilliseconds = (ms) => {
     const minutes = String(Math.floor(totalSeconds / 60));
     return minutes.padStart(1, '0') + ':' + seconds.padStart(2, '0');
 };
+export const TouchableButton = (props) => Platform.OS === 'android' ? (<TouchableNativeFeedback background={TouchableNativeFeedback.Ripple('white', true)} {...props}/>) : (<TouchableOpacity {...props}/>);
 // https://gist.github.com/ahtcx/0cd94e62691f539160b32ecda18af3d6#gistcomment-3585151
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const deepMerge = (target, source) => {
@@ -25,7 +26,10 @@ export const deepMerge = (target, source) => {
 };
 export const styles = StyleSheet.create({
     errorWrapper: Object.assign(Object.assign({}, StyleSheet.absoluteFillObject), { paddingHorizontal: 20, justifyContent: 'center' }),
-    videoWrapper: { flex: 1 },
+    videoWrapper: {
+        flex: 1,
+        justifyContent: 'center',
+    },
     iconWrapper: {
         borderRadius: 100,
         overflow: 'hidden',
@@ -43,4 +47,5 @@ export const styles = StyleSheet.create({
     },
     timeLeft: { backgroundColor: 'transparent', marginLeft: 5 },
     timeRight: { backgroundColor: 'transparent', marginRight: 5 },
+    slider: { flex: 1, paddingHorizontal: 10 },
 });

example-app/package.json

@@ -9,13 +9,12 @@
     "eject": "expo eject"
   },
   "dependencies": {
-    "@react-native-community/netinfo": "6.0.0",
     "@react-native-community/slider": "3.0.3",
     "expo": "^41.0.1",
     "expo-av": "~9.1.2",
     "expo-screen-orientation": "~3.1.0",
     "expo-status-bar": "~1.0.4",
-    "expo-video-player": "^2.0.0",
+    "expo-video-player": "^2.0.1",
     "react": "16.13.1",
     "react-dom": "16.13.1",
     "react-native": "https://github.com/expo/react-native/archive/sdk-41.0.0.tar.gz",
@@ -29,4 +28,4 @@
     "babel-preset-expo": "8.3.0",
     "typescript": "~4.0.0"
   }
-}
+}