@plusscommunities/pluss-core-app 1.1.5 → 1.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plusscommunities/pluss-core-app",
-  "version": "1.1.5",
+  "version": "1.2.3",
   "description": "Core extension package for Pluss Communities platform",
   "main": "src/index.js",
   "scripts": {
@@ -35,7 +35,9 @@
     "react-native-elements": "^0.17.0",
     "react-native-image-zoom-viewer": "^3.0.1",
     "react-native-iphone-x-helper": "^1.3.1",
+    "react-native-vimeo-iframe": "^1.0.4",
     "react-native-webview": "11.2.3",
+    "react-native-youtube-iframe": "^2.2.1",
     "react-redux": "^5.0.5"
   },
   "peerDependencies": {

package/src/components/ImagePopup.js

@@ -110,9 +110,7 @@ class ImagePopup extends Component {
     const { showFullscreenVideo, currentVideoUrl } = this.state;
     if (!currentVideoUrl) return;
 
-    return (
-      <VideoPopup uri={currentVideoUrl} visible={showFullscreenVideo} showFullscreenButton={false} onClose={this.toggleFullscreenVideo} />
-    );
+    return <VideoPopup uri={currentVideoUrl} visible={showFullscreenVideo} onClose={this.toggleFullscreenVideo} />;
   }
 
   render() {

package/src/components/MediaPlayer.js

@@ -0,0 +1,397 @@
+import React, { Component } from 'react';
+import { Platform, View, StyleSheet, Dimensions } from 'react-native';
+import * as ScreenOrientation from 'expo-screen-orientation';
+import { DeviceMotion } from 'expo-sensors';
+import YoutubePlayer, { getYoutubeMeta } from 'react-native-youtube-iframe';
+import { Vimeo } from 'react-native-vimeo-iframe';
+import WebView from 'react-native-webview';
+import { Video } from 'expo-av';
+import VideoPlayer from 'expo-video-player';
+import { Spinner } from './Spinner';
+
+const SCREEN_HEIGHT = Dimensions.get('window').height;
+const SCREEN_WIDTH = Dimensions.get('window').width;
+const EXPO_VIDEO_PROPS = { rate: 1, isMuted: false, volume: 1 };
+const RETRY_RECOVER = 30000;
+const RETRY_LOADING = 10000;
+
+class MediaPlayer extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      deviceOrientation: null,
+      isLandscape: false,
+      isUrlLink: true,
+      isYoutube: false,
+      isVimeo: false,
+      forceWebview: false,
+      heightFactor: 0,
+      playbackLoaded: false,
+      playbackBuffering: false,
+      playbackPlaying: false,
+      readyToRender: false,
+    };
+    this.youtubePlayer = null;
+    this.videoPlayer = null;
+    this.checkStreamLoaded = null;
+    this.retryLoading = false;
+    this.orientationQueue = [];
+  }
+
+  componentDidMount = async () => {
+    this.setupForPlaying();
+
+    ScreenOrientation.lockAsync(Platform.OS === 'ios' ? ScreenOrientation.OrientationLock.DEFAULT : ScreenOrientation.OrientationLock.ALL);
+    const motionAvailalble = await DeviceMotion.isAvailableAsync();
+    // console.log('motionAvailalble', motionAvailalble);
+    if (motionAvailalble) {
+      DeviceMotion.setUpdateInterval(500);
+      DeviceMotion.addListener(this.onMotionChange);
+    }
+  };
+
+  componentWillUnmount = () => {
+    if (this.checkStreamLoaded) clearInterval(this.checkStreamLoaded);
+    DeviceMotion.removeAllListeners();
+    ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.PORTRAIT_UP);
+  };
+
+  getYoutubeVideoId = url => {
+    url = url.replace(/(>|<)/gi, '').split(/(vi\/|v=|\/v\/|youtu\.be\/|\/embed\/)/);
+    if (url[2] !== undefined) {
+      const ids = url[2].split(/[^0-9a-z_\-]/i);
+      return ids[0];
+    } else {
+      return '';
+    }
+  };
+
+  getVimeoId = url => {
+    const result = url.match(
+      /(?:www\.|player\.)?vimeo.com\/(?:channels\/(?:\w+\/)?|groups\/(?:[^\/]*)\/videos\/|album\/(?:\d+)\/video\/|video\/|)(\d+)(?:[a-zA-Z0-9_\-]+)?/i,
+    );
+    return result[1];
+  };
+
+  setupForPlaying = async () => {
+    // Extract live stream info
+    const { source } = this.props;
+    const isUrlLink = source.startsWith('http');
+    const isYoutube = source.includes('youtube.com/watch?v=') || source.includes('youtu.be/');
+    const isVimeo = source.includes('vimeo.com/');
+    this.setState({ isUrlLink, isYoutube, isVimeo, playbackLoaded: isYoutube || isVimeo });
+
+    if (isYoutube) {
+      const metadata = await getYoutubeMeta(this.getYoutubeVideoId(source));
+      this.setState({ heightFactor: metadata.height / metadata.width, readyToRender: true });
+      // console.log('youtube metadata', metadata);
+    } else if (isVimeo) {
+      this.setState({ heightFactor: 0.565, readyToRender: true });
+    } else {
+      this.setState({ readyToRender: true });
+    }
+  };
+
+  getStreamPlaybackUrl = () => {
+    // return 'https://stream.mux.com/nflNhyFQMlrSt00II01Hjh2BLSW009PH1tl023pdpJ01s1vc.m3u8';
+    return `https://stream.mux.com/${this.props.playbackId}.m3u8`;
+  };
+
+  checkReloadStream = (wait = RETRY_LOADING, force = false) => {
+    if (!force && this.retryLoading) return;
+
+    console.log(`Check loading in ${wait} milliseconds...`);
+    this.retryLoading = true;
+    setTimeout(async () => {
+      const { playbackLoaded, playbackBuffering } = this.state;
+      try {
+        if (playbackLoaded === false || playbackBuffering === true) {
+          console.log('Reloading started');
+          await this.videoPlayer.loadAsync(
+            { uri: this.getStreamPlaybackUrl(), overrideFileExtensionAndroid: 'm3u8' },
+            EXPO_VIDEO_PROPS,
+            false,
+          );
+        } else {
+          console.log('Already loaded - not reloading');
+        }
+        this.retryLoading = false;
+      } catch {}
+    }, wait);
+  };
+
+  isLandscape = deviceRotation => {
+    const { beta, gamma } = deviceRotation;
+    const absGamma = Math.abs(gamma);
+    const absBeta = Math.abs(beta);
+    const isGammaNegative = Math.sign(gamma) === -1;
+
+    if (absGamma <= 0.04 && absBeta <= 0.24) {
+      //Portrait mode, on a flat surface.
+      return false;
+    } else if ((absGamma <= 1.0 || absGamma >= 2.3) && absBeta >= 0.5) {
+      //General Portrait mode, accounting for forward and back tilt on the top of the phone.
+      return false;
+    } else {
+      if (isGammaNegative) {
+        //Landscape mode with the top of the phone to the left.
+        return true;
+      } else {
+        //Landscape mode with the top of the phone to the right.
+        return true;
+      }
+    }
+  };
+
+  onMotionChange = async changeEvent => {
+    const deviceRotation = changeEvent.rotation;
+    const deviceOrientation = changeEvent.orientation;
+    const isLandscape = this.isLandscape(deviceRotation);
+    this.orientationQueue.push(isLandscape);
+    if (this.orientationQueue.length > 2) this.orientationQueue = this.orientationQueue.slice(-2);
+    // console.log('onMotionChange - orientationQueue', this.orientationQueue);
+    if (
+      isLandscape !== this.state.isLandscape &&
+      isLandscape === (Math.abs(deviceOrientation) === 90) &&
+      this.orientationQueue.every(i => i === isLandscape)
+    ) {
+      this.setState({ isLandscape }, () => {
+        // console.log('isLandscape', this.state.isLandscape);
+        if (this.props.orientationChanged) this.props.orientationChanged(this.state.isLandscape);
+      });
+    }
+  };
+
+  onStreamLoadStart = () => {
+    console.log('Stream load started');
+    this.checkStreamLoaded = setInterval(() => {
+      const { playbackLoaded } = this.state;
+      if (playbackLoaded === false) {
+        console.log('Stream loading failed unexpectedly');
+        this.checkReloadStream(1000, true);
+      } else {
+        clearInterval(this.checkStreamLoaded);
+      }
+    }, RETRY_RECOVER);
+  };
+
+  onStreamLoaded = status => {
+    console.log(`Stream loaded - isLoaded:${status.isLoaded}, isBuffering:${status.isBuffering}, isPlaying:${status.isPlaying}`);
+  };
+
+  onStreamError = error => {
+    console.log('Stream error', error);
+  };
+
+  onStreamStatusUpdate = status => {
+    this.setState(
+      {
+        playbackLoaded: status.isLoaded,
+        playbackBuffering: status.isBuffering,
+        playbackPlaying: status.isPlaying,
+      },
+      () => {
+        const { playbackLoaded, playbackBuffering, playbackPlaying, shouldPlay } = this.state;
+        // console.log(`Status updated - isLoaded:${playbackLoaded}, isBuffering:${playbackBuffering}, isPlaying:${playbackPlaying}`);
+        if (playbackLoaded === false && playbackBuffering === undefined && playbackPlaying === undefined) {
+          this.checkReloadStream();
+        } else if (playbackLoaded === true && playbackBuffering === true) {
+          this.checkReloadStream(RETRY_RECOVER);
+        }
+      },
+    );
+  };
+
+  onYoutubeError = e => {
+    // console.log('onYoutubeError', e);
+    this.setState({ forceWebview: true });
+  };
+
+  onYoutubeReady = () => {
+    // console.log('onYoutubeReady');
+  };
+
+  onVideoPlayStatusUpdate = status => {
+    // console.log('onVideoPlayStatusUpdate', status);
+  };
+
+  onVideoPlayError = error => {
+    // console.log('onVideoPlayError', error);
+    this.setState({ forceWebview: true });
+  };
+
+  getYoutubePlayer = (youtubeId, width, height, autoPlay) => (
+    <YoutubePlayer
+      ref={ref => (this.youtubePlayer = ref)}
+      height={height}
+      width={width}
+      videoId={youtubeId}
+      play={autoPlay}
+      // onChangeState={event => console.log('onChangeState', event)}
+      onReady={this.onYoutubeReady}
+      onError={this.onYoutubeError}
+      // onPlaybackQualityChange={q => console.log('onPlaybackQualityChange', q)}
+      volume={50}
+      playbackRate={1}
+      playerParams={{
+        cc_lang_pref: 'us',
+        showClosedCaptions: true,
+      }}
+    />
+  );
+
+  getVimeoPlayer = (vimeoId, width, height, autoPlay) => (
+    <View style={{ width, height }}>
+      <Vimeo
+        style={{ marginLeft: -8, marginRight: -5 }}
+        videoId={vimeoId}
+        // onReady={() => console.log('Video is ready')}
+        // onPlay={() => console.log('Video is playing')}
+        // onPlayProgress={data => console.log('Video progress data:', data)}
+        // onFinish={() => console.log('Video is finished')}
+        loop={false}
+        autoPlay={autoPlay}
+        controls={true}
+        speed={true}
+        time={'0m0s'}
+      />
+    </View>
+  );
+
+  getWebviewPlayer = embedUrl => (
+    <WebView
+      startInLoadingState
+      javaScriptEnabled
+      scrollEnabled={false}
+      automaticallyAdjustContentInsets={false}
+      mediaPlaybackRequiresUserAction
+      style={styles.webView}
+      source={{ uri: embedUrl }}
+    />
+  );
+
+  getStreamPlayer = (embedUrl, width, height, autoPlay) => (
+    <Video
+      ref={vp => {
+        this.videoPlayer = vp;
+      }}
+      source={{ uri: embedUrl }}
+      {...EXPO_VIDEO_PROPS}
+      shouldPlay={autoPlay}
+      resizeMode={Video.RESIZE_MODE_CONTAIN}
+      useNativeControls
+      style={{ width, height }}
+      onLoadStart={this.onStreamLoadStart}
+      onLoad={this.onStreamLoaded}
+      onError={this.onStreamError}
+      onPlaybackStatusUpdate={this.onStreamStatusUpdate}
+    />
+  );
+
+  getVideoPlayer = (embedUrl, width, height, autoPlay) => (
+    <VideoPlayer
+      videoProps={{
+        shouldPlay: autoPlay,
+        resizeMode: Video.RESIZE_MODE_CONTAIN,
+        source: { uri: embedUrl },
+      }}
+      showFullscreenButton={false}
+      errorCallback={this.onVideoPlayError}
+      playbackCallback={this.onVideoPlayStatusUpdate}
+      height={height}
+      width={width}
+    />
+  );
+
+  render() {
+    let width, height;
+    const { playbackId, source, autoPlay, useVideoPlayer } = this.props;
+    const {
+      readyToRender,
+      isLandscape,
+      heightFactor,
+      isUrlLink,
+      isYoutube,
+      isVimeo,
+      forceWebview,
+      playbackLoaded,
+      playbackBuffering,
+    } = this.state;
+    if (!readyToRender) return null;
+
+    if (isLandscape) {
+      width = SCREEN_HEIGHT;
+      height = SCREEN_WIDTH;
+    } else {
+      width = SCREEN_WIDTH;
+      height = heightFactor ? SCREEN_WIDTH * heightFactor : SCREEN_HEIGHT;
+    }
+
+    let embedUrl, player, showLoading;
+    if (!forceWebview) {
+      if (isYoutube) {
+        const youtubeId = this.getYoutubeVideoId(source);
+        embedUrl = youtubeId ? `https://www.youtube.com/embed/${youtubeId}` : source;
+        player = this.getYoutubePlayer(youtubeId, width, height, autoPlay);
+      } else if (isVimeo) {
+        const vimeoId = this.getVimeoId(source);
+        embedUrl = source;
+        player = this.getVimeoPlayer(vimeoId, width, height, autoPlay);
+      } else if (playbackId) {
+        embedUrl = this.getStreamPlaybackUrl();
+        player = this.getStreamPlayer(embedUrl, width, height, autoPlay);
+        showLoading = true;
+      } else if (useVideoPlayer) {
+        embedUrl = source;
+        player = this.getVideoPlayer(embedUrl, width, height, autoPlay);
+      }
+    }
+    if (!player && isUrlLink) {
+      embedUrl = source;
+      player = this.getWebviewPlayer(embedUrl);
+    }
+
+    // console.log({
+    //   Streaming: embedUrl,
+    //   Landscape: isLandscape,
+    //   Loaded: playbackLoaded,
+    //   Buffering: playbackBuffering,
+    //   LoadingIndicator: showLoading,
+    //   Width: width,
+    //   Height: height,
+    //   HeightFactor: heightFactor,
+    // });
+    return (
+      <View style={styles.container}>
+        {player}
+        {showLoading && (!playbackLoaded || playbackBuffering) && (
+          <View style={styles.loadingContainer}>
+            <Spinner color={'#fff'} />
+          </View>
+        )}
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: '#000',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  webView: {
+    flex: 1,
+  },
+  loadingContainer: {
+    position: 'absolute',
+    top: 50,
+    left: 0,
+    right: 0,
+    bottom: 50,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+
+export default MediaPlayer;

package/src/components/PlussChat.js

@@ -713,9 +713,7 @@ class PlussChat extends Component {
     const { showFullscreenVideo, currentVideoUrl } = this.state;
     if (!currentVideoUrl) return;
 
-    return (
-      <VideoPopup uri={currentVideoUrl} visible={showFullscreenVideo} showFullscreenButton={false} onClose={this.toggleFullscreenVideo} />
-    );
+    return <VideoPopup uri={currentVideoUrl} visible={showFullscreenVideo} onClose={this.toggleFullscreenVideo} />;
   }
 
   renderPDF() {

package/src/components/VideoPopup.js

@@ -1,12 +1,9 @@
 import React, { Component } from 'react';
-import { Dimensions, Modal, TouchableOpacity, StyleSheet } from 'react-native';
-import { Video } from 'expo-av';
-import VideoPlayer from 'expo-video-player';
+import { Platform, View, Modal, TouchableOpacity, StyleSheet } from 'react-native';
+import * as ScreenOrientation from 'expo-screen-orientation';
 import { StatusBarHeight, getCompressed, imageExists } from '../helper';
 import { Pl60Icon } from '../fonts';
-import { SharingTools } from './SharingTools';
-
-const SCREEN_HEIGHT = Dimensions.get('window').height;
+import { SharingTools, MediaPlayer } from './';
 
 class VideoPopup extends Component {
   constructor(props) {
@@ -14,18 +11,26 @@ class VideoPopup extends Component {
 
     this.state = {
       uri: '',
+      isFullScreen: false,
     };
   }
 
-  UNSAFE_componentWillMount() {
+  UNSAFE_componentWillMount = async () => {
     this.checkCompressed(this.props.uri);
-  }
+    await ScreenOrientation.lockAsync(
+      Platform.OS === 'ios' ? ScreenOrientation.OrientationLock.DEFAULT : ScreenOrientation.OrientationLock.ALL,
+    );
+  };
 
   UNSAFE_componentWillReceiveProps(nextProps) {
     if (this.props.uri === nextProps.uri) return;
     this.checkCompressed(nextProps.uri);
   }
 
+  componentWillUnmount = async () => {
+    await ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.PORTRAIT_UP);
+  };
+
   checkCompressed = url => {
     const compressedUri = getCompressed(url);
     imageExists(compressedUri).then(compressedExists => {
@@ -33,11 +38,6 @@ class VideoPopup extends Component {
     });
   };
 
-  playbackCallback = status => {
-    const { playbackCallback } = this.props;
-    if (playbackCallback) playbackCallback(status);
-  };
-
   renderClose() {
     return (
       <TouchableOpacity style={styles.menuIconContainer} onPress={this.props.onClose} activeOpacity={0.6}>
@@ -47,35 +47,36 @@ class VideoPopup extends Component {
   }
 
   renderPlayer() {
-    const { shouldPlay, showFullscreenButton, switchToPortrait, switchToLandscape } = this.props;
     const { uri } = this.state;
     if (!uri) return null;
-    console.log(`playing video\ncurrent: ${uri}\noriginal: ${this.props.uri}`);
 
     return (
-      <VideoPlayer
-        videoProps={{
-          shouldPlay: shouldPlay || true,
-          resizeMode: Video.RESIZE_MODE_CONTAIN,
-          source: { uri },
-        }}
-        showFullscreenButton={showFullscreenButton}
-        switchToPortrait={switchToPortrait}
-        switchToLandscape={switchToLandscape}
-        playbackCallback={this.playbackCallback}
-        height={SCREEN_HEIGHT}
-      />
+      <View style={styles.playerContainer}>
+        <MediaPlayer
+          source={uri}
+          useVideoPlayer={true}
+          autoPlay={true}
+          orientationChanged={isFullScreen => this.setState({ isFullScreen })}
+        />
+      </View>
     );
   }
 
   render() {
-    const { visible, onClose, style } = this.props;
+    const { isFullScreen } = this.state;
+    const { visible, onClose, animationType, style } = this.props;
 
     return (
-      <Modal visible={visible} animationType="fade" onRequestClose={onClose} style={[styles.container, style]}>
+      <Modal
+        visible={visible}
+        animationType={animationType || 'fade'}
+        onRequestClose={onClose}
+        style={[styles.container, style]}
+        supportedOrientations={['portrait', 'landscape']}
+      >
         {this.renderPlayer()}
-        {this.renderClose()}
-        <SharingTools uri={this.props.uri} />
+        {!isFullScreen && this.renderClose()}
+        {!isFullScreen && <SharingTools uri={this.props.uri} />}
       </Modal>
     );
   }
@@ -101,6 +102,12 @@ const styles = StyleSheet.create({
     color: '#fff',
     zIndex: 3,
   },
+  playerContainer: {
+    flex: 1,
+    backgroundColor: '#000',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
 });
 
 export { VideoPopup };

package/src/components/index.js

@@ -47,3 +47,4 @@ export { default as UserListing } from './UserListing';
 export { default as PlussChat } from './PlussChat';
 export { default as PositionedImage } from './PositionedImage';
 export { default as FormattedText } from './FormattedText';
+export { default as MediaPlayer } from './MediaPlayer';