@plusscommunities/pluss-core-app 1.2.0 → 1.2.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plusscommunities/pluss-core-app",
-  "version": "1.2.0",
+  "version": "1.2.4",
   "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/apis/reactionActions.js

@@ -26,10 +26,11 @@ export const reactionActions = {
       },
     });
   },
-  addComment: (entityId, entityType, site, comment, image) => {
+  addComment: (entityId, entityType, entityName, site, comment, image) => {
     const data = {
       entityId,
       entityType,
+      entityName,
       site,
       comment,
     };

package/src/components/CommentReply.js

@@ -96,7 +96,7 @@ class CommentReply extends Component {
       this.props.commentSection.getWrappedInstance().startedAddingComment();
     }
     reactionActions
-      .addComment(this.props.entityId, this.props.entityType, this.props.site, text, image)
+      .addComment(this.props.entityId, this.props.entityType, this.props.entityName, this.props.site, text, image)
       .then(res => {
         if (this.props.commentSection) {
           this.props.commentSection.getWrappedInstance().commentAdded(res.data);

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

@@ -1,14 +1,17 @@
 import React, { Component } from 'react';
-import { View, StyleSheet, Dimensions } from 'react-native';
+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 { Vimeo } from 'react-native-vimeo-iframe';
 import WebView from 'react-native-webview';
 import { Video } from 'expo-av';
-import { Spinner } from '../../../../src/components/common';
+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, shouldPlay: true };
+const EXPO_VIDEO_PROPS = { rate: 1, isMuted: false, volume: 1 };
 const RETRY_RECOVER = 30000;
 const RETRY_LOADING = 10000;
 
@@ -16,27 +19,42 @@ class MediaPlayer extends Component {
   constructor(props) {
     super(props);
     this.state = {
+      deviceOrientation: null,
+      isLandscape: false,
       isUrlLink: true,
       isYoutube: false,
+      isVimeo: false,
       forceWebview: false,
-      heightFactor: 0.565,
+      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() {
-    this.setupForLiveStreaming();
-  }
+  componentDidMount = async () => {
+    await this.setupForPlaying();
 
-  componentWillUnmount() {
+    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\/)/);
@@ -48,23 +66,36 @@ class MediaPlayer extends Component {
     }
   };
 
-  setupForLiveStreaming = async () => {
+  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 { streamUrl } = this.props.streamInfo;
-    const isUrlLink = streamUrl.startsWith('http');
-    const isYoutube = streamUrl.includes('youtube.com/watch?v=') || streamUrl.includes('youtu.be/');
-    this.setState({ isUrlLink, isYoutube });
+    const { source, useVideoPlayer } = this.props;
+    const isUrlLink = source && source.startsWith('http');
+    const isYoutube = source && (source.includes('youtube.com/watch?v=') || source.includes('youtu.be/'));
+    const isVimeo = source && source.includes('vimeo.com/');
+    let heightFactor = 0;
+
+    if (isYoutube) {
+      const metadata = await getYoutubeMeta(this.getYoutubeVideoId(source));
+      heightFactor = metadata.height / metadata.width;
+    } else if (useVideoPlayer) {
+      heightFactor = 0;
+    } else {
+      heightFactor = 0.565;
+    }
 
-    // if (isYoutube) {
-    //   const metadata = await getYoutubeMeta(this.getYoutubeVideoId(streamUrl));
-    //   this.setState({ heightFactor: metadata.height / metadata.width });
-    //   console.log('youtube metadata', metadata);
-    // }
+    this.setState({ isUrlLink, isYoutube, isVimeo, playbackLoaded: isYoutube || isVimeo, heightFactor, readyToRender: true });
   };
 
   getStreamPlaybackUrl = () => {
-    // return 'https://stream.mux.com/nflNhyFQMlrSt00II01Hjh2BLSW009PH1tl023pdpJ01s1vc.m3u8';
-    return `https://stream.mux.com/${this.props.streamInfo.playbackId}.m3u8`;
+    // return 'https://stream.mux.com/Ym4nKktRpGuZNBBBlzhxpyRwZLpvMlPRchcu01x6Ur600.m3u8';
+    return `https://stream.mux.com/${this.props.playbackId}.m3u8`;
   };
 
   checkReloadStream = (wait = RETRY_LOADING, force = false) => {
@@ -90,6 +121,48 @@ class MediaPlayer extends Component {
     }, 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(() => {
@@ -137,16 +210,24 @@ class MediaPlayer extends Component {
 
   onYoutubeReady = () => {
     // console.log('onYoutubeReady');
-    this.setState({ playbackLoaded: true });
   };
 
-  getYoutubePlayer = (youtubeId, width, height) => (
+  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
+      play={autoPlay}
       // onChangeState={event => console.log('onChangeState', event)}
       onReady={this.onYoutubeReady}
       onError={this.onYoutubeError}
@@ -160,6 +241,24 @@ class MediaPlayer extends Component {
     />
   );
 
+  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
@@ -172,13 +271,14 @@ class MediaPlayer extends Component {
     />
   );
 
-  getVideoPlayer = (embedUrl, width, height) => (
+  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 }}
@@ -189,37 +289,83 @@ class MediaPlayer extends Component {
     />
   );
 
+  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 { landscape, streamInfo } = this.props;
-    if (landscape) {
+    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 = SCREEN_WIDTH * this.state.heightFactor;
+      height = heightFactor ? SCREEN_WIDTH * heightFactor : SCREEN_HEIGHT;
     }
 
-    const { isUrlLink, isYoutube, forceWebview, playbackLoaded, playbackBuffering } = this.state;
-    const { playbackId, streamUrl } = streamInfo;
-    let embedUrl, player;
-    if (isYoutube && !forceWebview) {
-      const youtubeId = this.getYoutubeVideoId(streamUrl);
-      embedUrl = youtubeId ? `https://www.youtube.com/embed/${youtubeId}` : streamUrl;
-      player = this.getYoutubePlayer(youtubeId, width, height);
-    } else if (isUrlLink) {
-      embedUrl = streamUrl;
+    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);
-    } else if (playbackId) {
-      embedUrl = this.getStreamPlaybackUrl();
-      player = this.getVideoPlayer(embedUrl, width, height);
     }
 
-    // console.log('Streaming:', embedUrl, 'landscape', landscape, 'playbackLoaded', playbackLoaded, 'playbackBuffering', playbackBuffering);
+    // console.log({
+    //   Streaming: embedUrl,
+    //   Landscape: isLandscape,
+    //   Loaded: playbackLoaded,
+    //   Buffering: playbackBuffering,
+    //   LoadingIndicator: showLoading,
+    //   Width: width,
+    //   Height: height,
+    //   HeightFactor: heightFactor,
+    // });
     return (
-      <View style={[styles.container, !isUrlLink && { alignItems: 'center' }, { width, height }]}>
+      <View style={styles.container}>
         {player}
-        {(!playbackLoaded || playbackBuffering) && (
+        {showLoading && (!playbackLoaded || playbackBuffering) && (
           <View style={styles.loadingContainer}>
             <Spinner color={'#fff'} />
           </View>
@@ -232,6 +378,8 @@ class MediaPlayer extends Component {
 const styles = StyleSheet.create({
   container: {
     backgroundColor: '#000',
+    alignItems: 'center',
+    justifyContent: 'center',
   },
   webView: {
     flex: 1,

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 };