@plusscommunities/pluss-core-app 1.2.2 → 1.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plusscommunities/pluss-core-app",
-  "version": "1.2.2",
+  "version": "1.3.1",
   "description": "Core extension package for Pluss Communities platform",
   "main": "src/index.js",
   "scripts": {
@@ -21,7 +21,6 @@
     "expo-image-picker": "~10.1.4",
     "expo-linear-gradient": "~9.1.0",
     "expo-media-library": "~12.0.2",
-    "expo-permissions": "~12.0.1",
     "expo-screen-orientation": "~3.1.0",
     "expo-sharing": "~9.1.2",
     "expo-video-player": "^1.6.0",

package/src/apis/index.js

@@ -4,4 +4,5 @@ export * from './followerActions';
 export * from './contactActions';
 export * from './eventActions';
 export * from './analyticsActions';
+export * from './notificationActions';
 export { default as userActions } from './userActions';

package/src/apis/notificationActions.js

@@ -0,0 +1,47 @@
+import { getUrl } from '../helper';
+import { authedFunction } from '../session';
+
+export const notificationActions = {
+  getAppNotificationSetting: () => {
+    return authedFunction({
+      method: 'GET',
+      url: getUrl('notifications', 'getState/get', {
+        type: 'app',
+      }),
+    });
+  },
+  muteApp: () => {
+    return authedFunction({
+      method: 'POST',
+      url: getUrl('notifications', 'updateState/mute'),
+      data: { type: 'app' },
+    });
+  },
+  unmuteApp: () => {
+    return authedFunction({
+      method: 'POST',
+      url: getUrl('notifications', 'updateState/unmute'),
+      data: { type: 'app' },
+    });
+  },
+  getEntityNotificationSetting: (type, id) => {
+    return authedFunction({
+      method: 'GET',
+      url: getUrl('notifications', 'getState/get', { type, id }),
+    });
+  },
+  muteEntity: (type, id) => {
+    return authedFunction({
+      method: 'POST',
+      url: getUrl('notifications', 'updateState/mute'),
+      data: { type, id },
+    });
+  },
+  unmuteEntity: (type, id) => {
+    return authedFunction({
+      method: 'POST',
+      url: getUrl('notifications', 'updateState/unmute'),
+      data: { type, id },
+    });
+  },
+};

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/CommentSection.js

@@ -1,16 +1,13 @@
 import React, { Component } from 'react';
-import { View, Text, TouchableOpacity, Image } from 'react-native';
+import { View, Text, TouchableOpacity, Image, StyleSheet } from 'react-native';
 import _ from 'lodash';
 import moment from 'moment';
 import { connect } from 'react-redux';
 import { Icon } from 'react-native-elements';
-import { getPluralS, getThumb300, get1400 } from '../helper';
+import { getPluralS, getThumb300, get1400, getSiteSettingFromState } from '../helper';
 import { getMainBrandingColourFromState, TEXT_DARKEST, BG_GREY, TEXT_LIGHT, LINEGREY } from '../colours';
-import { Spinner } from './Spinner';
-import { reactionActions } from '../apis';
-import { ConfirmPopup } from './ConfirmPopup';
-import { ProfilePic } from './ProfilePic';
-import { ImagePopup } from './ImagePopup';
+import { reactionActions, notificationActions } from '../apis';
+import { ConfirmPopup, ProfilePic, ImagePopup, InlineButton, Spinner } from './';
 
 class CommentSection extends Component {
   constructor(props) {
@@ -23,10 +20,15 @@ class CommentSection extends Component {
       commentToReport: null,
       commentReportedStatus: null,
       reportLoading: false,
+      processing: false,
+      muteExpiry: null,
+      muteLoaded: false,
     };
   }
 
   componentDidMount() {
+    this.getNotificationSate();
+
     if (!_.includes(this.props.user.hidden, 'viewComment')) {
       this.getComments();
     }
@@ -97,6 +99,64 @@ class CommentSection extends Component {
     this.props.commentReply.getWrappedInstance().focusInput();
   }
 
+  onMute = () => {
+    const { entityType, entityId } = this.props;
+    this.setState({ processing: true }, async () => {
+      try {
+        const { data } = await notificationActions.muteEntity(entityType, entityId);
+        // console.log('onMute', data);
+        const muteExpiry = moment(data.Expiry);
+        this.setState({ muteExpiry, processing: false });
+      } catch (error) {
+        console.error('onMute', error);
+        this.setState({ processing: false });
+      }
+    });
+  };
+
+  onUnmute = () => {
+    const { entityType, entityId } = this.props;
+    this.setState({ processing: true }, async () => {
+      try {
+        const { data } = await notificationActions.unmuteEntity(entityType, entityId);
+        // console.log('onUnmute', data);
+        this.setState({ muteExpiry: null, processing: false });
+      } catch (error) {
+        console.error('onUnmute', error);
+        this.setState({ processing: false });
+      }
+    });
+  };
+
+  isMuted = () => {
+    const { muteExpiry } = this.state;
+    return muteExpiry && moment() <= muteExpiry;
+  };
+
+  getMuteRemaining = () => {
+    const { muteExpiry } = this.state;
+    const actual = muteExpiry ? moment.duration(muteExpiry.diff(moment())).asHours() : 0;
+    return Math.abs(Math.ceil(actual));
+  };
+
+  getNotificationSate = () => {
+    const { processing } = this.state;
+    const { entityType, entityId, notificationsForComments } = this.props;
+    if (processing || !notificationsForComments) return;
+
+    this.setState({ processing: true }, async () => {
+      try {
+        const { data } = await notificationActions.getEntityNotificationSetting(entityType, entityId);
+        // console.log('getNotificationSate', data);
+        const muteExpiry = data ? moment(data.Expiry) : null;
+        this.setState({ muteExpiry, muteLoaded: true, processing: false });
+      } catch (error) {
+        console.error('getNotificationSate', error);
+        this.setState({ processing: false });
+      }
+    });
+  };
+
   getAdjustedSize(size) {
     if (this.props.scaleFont) {
       return size + this.props.user.fontScale;
@@ -288,6 +348,47 @@ class CommentSection extends Component {
     );
   }
 
+  renderMute() {
+    const { notificationsForComments } = this.props;
+    const { muteLoaded, muteExpiry, processing } = this.state;
+    if (!notificationsForComments || !muteLoaded) return null;
+
+    if (processing)
+      return (
+        <View style={styles.muteSpinnerContainer}>
+          <Spinner size={'small'} color={this.props.colourBrandingMain} />
+        </View>
+      );
+
+    const isMuted = this.isMuted();
+    const hours = this.getMuteRemaining();
+    const mutedFor = `Muted for ${hours} hour${getPluralS(hours)}`;
+    // console.log(muteExpiry.format('DD MMM YYYY hh:mm a'));
+
+    return (
+      <View style={styles.muteContainer}>
+        {isMuted && muteExpiry ? <Text style={[{ color: this.props.colourBrandingMain }, styles.mutedForText]}>{mutedFor}</Text> : null}
+        <InlineButton
+          onPress={isMuted ? this.onUnmute : this.onMute}
+          color="#fff"
+          style={[{ borderColor: this.props.colourBrandingMain }, styles.muteButton]}
+          disabled={processing}
+          disabledOpacity
+          noText
+        >
+          <View style={styles.muteButtonInner}>
+            <Icon
+              name={isMuted ? 'bell-o' : 'bell-slash-o'}
+              type={'font-awesome'}
+              iconStyle={[{ color: this.props.colourBrandingMain }, styles.muteButtonIcon]}
+            />
+            <Text style={[{ color: this.props.colourBrandingMain }, styles.muteButtonText]}>{isMuted ? 'Unmute' : 'Mute'}</Text>
+          </View>
+        </InlineButton>
+      </View>
+    );
+  }
+
   renderComments() {
     if (this.state.commentsLoading) {
       return (
@@ -317,11 +418,14 @@ class CommentSection extends Component {
       <View style={styles.commentSection}>
         {!this.isEmpty() && (
           <View style={styles.commentSectionTitleRow}>
-            {!this.props.hideAddComment && this.state.comments.length > 2 && (
-              <TouchableOpacity onPress={this.onGoToAdd.bind(this)}>
-                <Text style={[styles.goToText, { color: this.props.colourBrandingMain }]}>Add a comment</Text>
-              </TouchableOpacity>
-            )}
+            <View style={{ alignItems: 'flex-end' }}>
+              {this.renderMute()}
+              {!this.props.hideAddComment && this.state.comments.length > 2 && (
+                <TouchableOpacity onPress={this.onGoToAdd.bind(this)}>
+                  <Text style={[styles.goToText, { color: this.props.colourBrandingMain }]}>Add a comment</Text>
+                </TouchableOpacity>
+              )}
+            </View>
             <Text style={[styles.commentCount, { fontSize: this.getAdjustedSize(15) }]}>
               {this.state.comments.length}
               {` comment${getPluralS(this.state.comments.length)}`}
@@ -374,22 +478,22 @@ class CommentSection extends Component {
   }
 }
 
-const styles = {
+const styles = StyleSheet.create({
   commentSectionOuter: {
     flex: 1,
     paddingHorizontal: 16,
   },
   commentSection: {
     flex: 1,
-    paddingVertical: 16,
+    paddingVertical: 12,
     borderTopColor: LINEGREY,
     borderTopWidth: 1,
-    borderTopStyle: 'solid',
   },
   commentCount: {
     fontFamily: 'sf-semibold',
     color: TEXT_DARKEST,
     flex: 1,
+    marginTop: 4,
   },
   comment: {
     marginTop: 16,
@@ -463,12 +567,47 @@ const styles = {
   reportLoadingContainer: {
     paddingVertical: 10,
   },
-};
+  goToText: {
+    marginTop: 4,
+  },
+  muteSpinnerContainer: {
+    width: 100,
+    marginBottom: 6,
+  },
+  muteContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+    marginBottom: 6,
+  },
+  mutedForText: {
+    fontFamily: 'sf-semibold',
+    fontSize: 13,
+    marginRight: 8,
+  },
+  muteButton: {
+    borderWidth: 1,
+    paddingHorizontal: 8,
+  },
+  muteButtonInner: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  muteButtonIcon: {
+    fontSize: 14,
+  },
+  muteButtonText: {
+    fontFamily: 'sf-semibold',
+    fontSize: 14,
+    marginLeft: 6,
+  },
+});
 
 const mapStateToProps = state => {
   return {
     colourBrandingMain: getMainBrandingColourFromState(state),
     user: state.user,
+    notificationsForComments: getSiteSettingFromState(state, 'NotificationsForComments', false),
   };
 };
 

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/ImageUploader.js

@@ -3,7 +3,7 @@ import { View, ScrollView, TouchableOpacity, Text, Platform, Linking, Modal, Dim
 import { connect } from 'react-redux';
 import { Icon } from 'react-native-elements';
 import _ from 'lodash';
-import * as Permissions from 'expo-permissions';
+import { Camera } from 'expo-camera';
 import * as MediaLibrary from 'expo-media-library';
 import * as ImageManipulator from 'expo-image-manipulator';
 import * as ImagePicker from 'expo-image-picker';
@@ -60,7 +60,7 @@ class ImageUploader extends Component {
   }
 
   loadLocalAlbums = async () => {
-    const hasPermission = await Permissions.getAsync(Permissions.CAMERA_ROLL);
+    const hasPermission = await MediaLibrary.getPermissionsAsync();
     if (!hasPermission.granted) return;
 
     this.setState({ loadingLocalFolders: true }, async () => {
@@ -254,8 +254,8 @@ class ImageUploader extends Component {
   }
 
   askPermissionsAsync = async () => {
-    const cameraPermission = await Permissions.askAsync(Permissions.CAMERA);
-    const rollPermission = await Permissions.askAsync(Permissions.CAMERA_ROLL);
+    const cameraPermission = await Camera.requestCameraPermissionsAsync();
+    const rollPermission = await MediaLibrary.requestPermissionsAsync();
     if (cameraPermission.status !== 'granted' || rollPermission.status !== 'granted') {
       this.showWarningPopup(cameraPermission.status !== 'granted', rollPermission.status !== 'granted');
       return false;

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

package/src/components/expo-image-picker-multiple/ImageBrowser.js

@@ -3,7 +3,7 @@ import { StyleSheet, View, FlatList, Dimensions, ActivityIndicator, Platform } f
 import _ from 'lodash';
 import * as ScreenOrientation from 'expo-screen-orientation';
 import * as MediaLibrary from 'expo-media-library';
-import * as Permissions from 'expo-permissions';
+import { Camera } from 'expo-camera';
 import { isVideo } from '../../helper';
 import ImageTile from './ImageTile';
 
@@ -49,8 +49,8 @@ export default class ImageBrowser extends React.Component {
   };
 
   getPermissionsAsync = async () => {
-    const { status: camera } = await Permissions.askAsync(Permissions.CAMERA);
-    const { status: cameraRoll } = await Permissions.askAsync(Permissions.CAMERA_ROLL);
+    const { status: camera } = await Camera.requestCameraPermissionsAsync();
+    const { status: cameraRoll } = await MediaLibrary.requestPermissionsAsync();
     this.setState({
       hasCameraPermission: camera === 'granted',
       hasCameraRollPermission: cameraRoll === 'granted',