@plusscommunities/pluss-core-app 1.1.2 → 1.2.0

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@plusscommunities/pluss-core-app",
-  "version": "1.1.2",
+  "version": "1.2.0",
   "description": "Core extension package for Pluss Communities platform",
   "main": "src/index.js",
   "scripts": {
-    "upload": "npm version patch && npm publish --access public && rm -rf node_modules",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "patch": "npm version patch",
+    "upload": "npm publish --access public && rm -rf node_modules",
+    "upload:p": "npm run patch && npm run upload"
   },
   "author": "Phillip Suh",
   "license": "ISC",

package/src/components/Header.js

@@ -276,6 +276,7 @@ class Header extends Component {
         <Animated.View
           style={[
             styles.container,
+            !this.props.noShadow && styles.containerShadow,
             this.props.transparent && styles.transparentContainer,
             this.props.style,
             { backgroundColor: this.props.headerColourOffset, elevation: this.props.headerElev, shadowColor: this.props.headerShadow },
@@ -297,6 +298,7 @@ class Header extends Component {
       <View
         style={[
           styles.container,
+          !this.props.noShadow && styles.containerShadow,
           this.props.transparent && styles.transparentContainer,
           this.props.lineSeparated && styles.lineSeparated,
           this.props.popupHeader && styles.popupHeader,
@@ -331,6 +333,9 @@ const styles = {
   container: {
     alignSelf: 'stretch',
     backgroundColor: '#fff',
+    zIndex: 10,
+  },
+  containerShadow: {
     shadowColor: '#000',
     shadowOffset: {
       width: 0,
@@ -339,7 +344,6 @@ const styles = {
     shadowOpacity: 0.1,
     shadowRadius: 6,
     elevation: 3,
-    zIndex: 10,
   },
   lineSeparated: {
     borderBottomWidth: 1,

package/src/components/ImagePopup.js

@@ -45,7 +45,7 @@ class ImagePopup extends Component {
       return { url: get1400(image?.uri), original: image?.uri, isVideo: isVideo(image?.uri), date: image?.date, user: image?.user };
     });
 
-    this.setState({ images, index: this.props.index || 0 });
+    this.setState({ images, index: this.state.index || this.props.index || 0 });
   };
 
   onChange = index => {

package/src/components/LoadingIndicator.js

@@ -1,27 +1,17 @@
 import React, { Component } from 'react';
-import { View, StyleSheet, Animated } from 'react-native';
-import { TEXT_BLUEGREY } from '../colours';
+import { StyleSheet, Animated, Dimensions } from 'react-native';
+import { connect } from 'react-redux';
+import { getMainBrandingColourFromState } from '../colours';
 
-const OPACITY_START = 0.1;
-const OPACITY_END1 = 0.4;
-const OPACITY_END2 = 0.7;
-const OPACITY_END3 = 1;
-const LEFT_START = 1;
-const LEFT_END1 = 16;
-const LEFT_END2 = 32;
-const CIRCLE_SIZE = 8;
-const DEFAULT_HEIGHT = 38;
+const DEFAULT_HEIGHT = 4;
+const DEFAULT_WIDTH = Dimensions.get('window').width;
 
 class LoadingIndicator extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      animatedOpacity1: new Animated.Value(OPACITY_START),
-      animatedOpacity2: new Animated.Value(OPACITY_START),
-      animatedOpacity3: new Animated.Value(OPACITY_START),
-      animatedOpacity4: new Animated.Value(0),
-      animatedLeft4: new Animated.Value(LEFT_START),
-      animatedHeight: new Animated.Value(this.props.visible ? DEFAULT_HEIGHT : 0),
+      animatedLeft: new Animated.Value(-DEFAULT_WIDTH),
+      animatedOpacity: new Animated.Value(0),
     };
     this.height = 0;
   }
@@ -36,8 +26,8 @@ class LoadingIndicator extends Component {
 
   componentDidUpdate(prevProps) {
     if (prevProps.visible !== this.props.visible) {
-      Animated.timing(this.state.animatedHeight, {
-        toValue: this.props.visible ? DEFAULT_HEIGHT : 0,
+      Animated.timing(this.state.animatedOpacity, {
+        toValue: this.props.visible ? 0.8 : 0,
         duration: 300,
         useNativeDriver: false,
       }).start();
@@ -46,95 +36,32 @@ class LoadingIndicator extends Component {
 
   animate = () => {
     Animated.sequence([
-      Animated.timing(this.state.animatedOpacity4, {
-        toValue: OPACITY_END1,
-        duration: 750,
+      Animated.timing(this.state.animatedLeft, {
+        toValue: DEFAULT_WIDTH,
+        duration: 1500,
         useNativeDriver: false,
       }),
-      Animated.parallel([
-        Animated.timing(this.state.animatedOpacity1, {
-          toValue: OPACITY_END1,
-          duration: 250,
-          useNativeDriver: false,
-        }),
-        Animated.timing(this.state.animatedLeft4, {
-          toValue: LEFT_END1,
-          duration: 250,
-          useNativeDriver: false,
-        }),
-      ]),
-      Animated.timing(this.state.animatedOpacity4, {
-        toValue: OPACITY_END2,
-        duration: 250,
-        useNativeDriver: false,
-      }),
-      Animated.parallel([
-        Animated.timing(this.state.animatedOpacity2, {
-          toValue: OPACITY_END2,
-          duration: 250,
-          useNativeDriver: false,
-        }),
-        Animated.timing(this.state.animatedLeft4, {
-          toValue: LEFT_END2,
-          duration: 250,
-          useNativeDriver: false,
-        }),
-      ]),
-      Animated.parallel([
-        Animated.timing(this.state.animatedOpacity4, {
-          toValue: OPACITY_END3,
-          duration: 250,
-          useNativeDriver: false,
-        }),
-        Animated.timing(this.state.animatedOpacity3, {
-          toValue: OPACITY_END3,
-          duration: 250,
-          useNativeDriver: false,
-        }),
-      ]),
-      Animated.parallel([
-        Animated.timing(this.state.animatedLeft4, {
-          toValue: LEFT_START,
-          duration: 1,
-          useNativeDriver: false,
-        }),
-        Animated.timing(this.state.animatedOpacity4, {
-          toValue: 0,
-          duration: 1,
-          useNativeDriver: false,
-        }),
-      ]),
-      Animated.timing(this.state.animatedOpacity3, {
-        toValue: OPACITY_START,
-        duration: 250,
-        useNativeDriver: false,
-      }),
-      Animated.timing(this.state.animatedOpacity2, {
-        toValue: OPACITY_START,
-        duration: 250,
-        useNativeDriver: false,
-      }),
-      Animated.timing(this.state.animatedOpacity1, {
-        toValue: OPACITY_START,
-        duration: 250,
+      Animated.delay(500),
+      Animated.timing(this.state.animatedLeft, {
+        toValue: -DEFAULT_WIDTH,
+        duration: 1500,
         useNativeDriver: false,
       }),
+      Animated.delay(500),
     ]).start(() => {
       this.animate();
     });
   };
 
   render() {
-    const { animatedOpacity1, animatedOpacity2, animatedOpacity3, animatedOpacity4, animatedLeft4, animatedHeight } = this.state;
-
     return (
-      <Animated.View style={[styles.container, this.props.style, { height: animatedHeight }]} onLayout={this.onLayout}>
-        <View style={styles.innerContainer}>
-          <Animated.View style={[styles.circle, { opacity: animatedOpacity1 }]} />
-          <Animated.View style={[styles.circle, { opacity: animatedOpacity2 }]} />
-          <Animated.View style={[styles.circle, { opacity: animatedOpacity3 }]} />
-          <Animated.View style={[styles.circle, { position: 'absolute', left: animatedLeft4, opacity: animatedOpacity4 }]} />
-        </View>
+      <Animated.View
+        style={[styles.container, this.props.style, { height: DEFAULT_HEIGHT, opacity: this.state.animatedOpacity }]}
+        onLayout={this.onLayout}
+      >
+        <Animated.View
+          style={[styles.line, { backgroundColor: this.props.colourBrandingMain, left: this.state.animatedLeft, height: DEFAULT_HEIGHT }]}
+        />
       </Animated.View>
     );
   }
@@ -145,20 +72,23 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
     overflow: 'hidden',
-    backgroundColor: '#ebeff2',
+    backgroundColor: '#fff',
     width: '100%',
     height: 38,
   },
   innerContainer: {
     flexDirection: 'row',
   },
-  circle: {
-    width: CIRCLE_SIZE,
-    height: CIRCLE_SIZE,
-    borderRadius: CIRCLE_SIZE / 2,
-    backgroundColor: TEXT_BLUEGREY,
-    marginHorizontal: 4,
+  line: {
+    width: DEFAULT_WIDTH,
   },
 });
 
-export default LoadingIndicator;
+const mapStateToProps = state => {
+  return {
+    colourBrandingMain: getMainBrandingColourFromState(state),
+  };
+};
+
+export default connect(mapStateToProps, {})(LoadingIndicator);
+// export { loadingIndicator as Default };

package/src/components/MediaPlayer.js

@@ -0,0 +1,250 @@
+import React, { Component } from 'react';
+import { View, StyleSheet, Dimensions } from 'react-native';
+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 { Spinner } from '../../../../src/components/common';
+
+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 RETRY_RECOVER = 30000;
+const RETRY_LOADING = 10000;
+
+class MediaPlayer extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isUrlLink: true,
+      isYoutube: false,
+      forceWebview: false,
+      heightFactor: 0.565,
+      playbackLoaded: false,
+      playbackBuffering: false,
+      playbackPlaying: false,
+    };
+    this.youtubePlayer = null;
+    this.videoPlayer = null;
+    this.checkStreamLoaded = null;
+    this.retryLoading = false;
+  }
+
+  componentDidMount() {
+    this.setupForLiveStreaming();
+  }
+
+  componentWillUnmount() {
+    if (this.checkStreamLoaded) clearInterval(this.checkStreamLoaded);
+  }
+
+  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 '';
+    }
+  };
+
+  setupForLiveStreaming = 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 });
+
+    // if (isYoutube) {
+    //   const metadata = await getYoutubeMeta(this.getYoutubeVideoId(streamUrl));
+    //   this.setState({ heightFactor: metadata.height / metadata.width });
+    //   console.log('youtube metadata', metadata);
+    // }
+  };
+
+  getStreamPlaybackUrl = () => {
+    // return 'https://stream.mux.com/nflNhyFQMlrSt00II01Hjh2BLSW009PH1tl023pdpJ01s1vc.m3u8';
+    return `https://stream.mux.com/${this.props.streamInfo.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);
+  };
+
+  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');
+    this.setState({ playbackLoaded: true });
+  };
+
+  getYoutubePlayer = (youtubeId, width, height) => (
+    <YoutubePlayer
+      ref={ref => (this.youtubePlayer = ref)}
+      height={height}
+      width={width}
+      videoId={youtubeId}
+      play
+      // 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,
+      }}
+    />
+  );
+
+  getWebviewPlayer = embedUrl => (
+    <WebView
+      startInLoadingState
+      javaScriptEnabled
+      scrollEnabled={false}
+      automaticallyAdjustContentInsets={false}
+      mediaPlaybackRequiresUserAction
+      style={styles.webView}
+      source={{ uri: embedUrl }}
+    />
+  );
+
+  getVideoPlayer = (embedUrl, width, height) => (
+    <Video
+      ref={vp => {
+        this.videoPlayer = vp;
+      }}
+      source={{ uri: embedUrl }}
+      {...EXPO_VIDEO_PROPS}
+      resizeMode={Video.RESIZE_MODE_CONTAIN}
+      useNativeControls
+      style={{ width, height }}
+      onLoadStart={this.onStreamLoadStart}
+      onLoad={this.onStreamLoaded}
+      onError={this.onStreamError}
+      onPlaybackStatusUpdate={this.onStreamStatusUpdate}
+    />
+  );
+
+  render() {
+    let width, height;
+    const { landscape, streamInfo } = this.props;
+    if (landscape) {
+      width = SCREEN_HEIGHT;
+      height = SCREEN_WIDTH;
+    } else {
+      width = SCREEN_WIDTH;
+      height = SCREEN_WIDTH * this.state.heightFactor;
+    }
+
+    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;
+      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);
+    return (
+      <View style={[styles.container, !isUrlLink && { alignItems: 'center' }, { width, height }]}>
+        {player}
+        {(!playbackLoaded || playbackBuffering) && (
+          <View style={styles.loadingContainer}>
+            <Spinner color={'#fff'} />
+          </View>
+        )}
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: '#000',
+  },
+  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

@@ -9,6 +9,8 @@ import { getBottomSpace } from 'react-native-iphone-x-helper';
 import { Spinner } from './Spinner';
 import { ProfilePic } from './ProfilePic';
 import PlussChatTime from './PlussChatTime';
+import { PDFPopup } from './PDFPopup';
+import { Attachment } from './Attachment';
 import PlussChatMessage from './PlussChatMessage';
 import {
   TEXT_DARK,
@@ -19,7 +21,7 @@ import {
   BG_GREY,
   TEXT_BLUEGREY,
 } from '../colours';
-import { getEnabledTabsFromState, get1400, getThumb300, imageExists, isVideo, getImageSource } from '../helper';
+import { getEnabledTabsFromState, get1400, getThumb300, imageExists, isVideo, getImageSource, getFileName } from '../helper';
 import Config, { Services } from '../config';
 import ImageUploader from './ImageUploader';
 import ImageUploadProgress from './ImageUploadProgress';
@@ -143,6 +145,18 @@ class PlussChat extends Component {
     }, 2000);
   };
 
+  onOpenAttachment = a => {
+    this.setState({
+      selectedPDF: a,
+    });
+  };
+
+  onCloseAttachment = () => {
+    this.setState({
+      selectedPDF: null,
+    });
+  };
+
   showUploadMenu() {
     this.imageUploader.getWrappedInstance().showUploadMenu();
   }
@@ -279,6 +293,11 @@ class PlussChat extends Component {
       wrapperStyle.paddingBottom = 16;
       wrapperStyle.minWidth = 142; // 110 image width + 16 padding either side
     }
+    if (!_.isEmpty(bubbleProps.currentMessage.attachments)) {
+      wrapperStyle.paddingTop = 8;
+      wrapperStyle.paddingBottom = 16;
+      wrapperStyle.paddingHorizontal = 16;
+    }
     return (
       <Bubble
         {...bubbleProps}
@@ -401,6 +420,25 @@ class PlussChat extends Component {
         </View>
       );
     }
+    if (!_.isEmpty(currentMessage.attachments)) {
+      console.log('rendering attachments');
+      console.log(currentMessage.attachments);
+      return (
+        <View>
+          {currentMessage.attachments.map((url, i) => {
+            return (
+              <Attachment
+                onPress={() => {
+                  this.onOpenAttachment(url);
+                }}
+                key={i}
+                title={getFileName(url)}
+              />
+            );
+          })}
+        </View>
+      );
+    }
     if (currentMessage.event) {
       return (
         <TouchableOpacity onPress={this.onPressEvent.bind(this, currentMessage.event)}>
@@ -680,6 +718,15 @@ class PlussChat extends Component {
     );
   }
 
+  renderPDF() {
+    if (_.isEmpty(this.state.selectedPDF)) {
+      return null;
+    }
+    return (
+      <PDFPopup source={this.state.selectedPDF} onClose={this.onCloseAttachment} title={getFileName(this.state.selectedPDF)} pdfCount={1} />
+    );
+  }
+
   render() {
     if (Platform.OS === 'android' && !this.props.noAndroidAvoid) {
       return (
@@ -688,6 +735,7 @@ class PlussChat extends Component {
           {this.renderImageUploader()}
           {this.renderImagePopup()}
           {this.renderVideoPlayerPopup()}
+          {this.renderPDF()}
         </KeyboardAvoidingView>
       );
     }
@@ -697,6 +745,7 @@ class PlussChat extends Component {
         {this.renderImageUploader()}
         {this.renderImagePopup()}
         {this.renderVideoPlayerPopup()}
+        {this.renderPDF()}
       </View>
     );
   }

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

package/src/helper.js

@@ -74,11 +74,37 @@ const getExtension = url => {
   return fileSplit[fileSplit.length - 1].toLowerCase();
 };
 
+const getFileName = (url, noExtension) => {
+  if (!url) {
+    return null;
+  }
+  const fileSplit = url.split('/');
+  const name = fileSplit[fileSplit.length - 1].toLowerCase();
+  if (!noExtension) {
+    return name;
+  }
+  return name.split('.')[0];
+};
+
 const isVideo = url => {
   const extension = getExtension(url);
   return ['mov', 'mp4'].includes(extension);
 };
 
+const isVideoUrl = url => {
+  const urlToCheck = getValidUrl(url);
+  if (isVideo(urlToCheck)) {
+    return true;
+  }
+  if (isYoutube(urlToCheck)) {
+    return true;
+  }
+  if (isVimeo(urlToCheck)) {
+    return true;
+  }
+  return false;
+};
+
 const isStockImage = url => {
   return url.indexOf('https://pluss60-dev-uploads.s3.ap-southeast-2.amazonaws.com/uploads/library') !== -1;
 };
@@ -288,6 +314,29 @@ const isTablet = () => {
   return Dimensions.get('screen').width > 600;
 };
 
+const isVimeo = url => {
+  if (_.isEmpty(url)) {
+    return false;
+  }
+  if (url.indexOf('https://vimeo.com/') === 0) {
+    return true;
+  }
+  if (url.indexOf('https://player.vimeo.com/video/') === 0) {
+    return true;
+  }
+};
+
+const getVimeoEmbed = url => {
+  if (_.isEmpty(url)) {
+    return '';
+  }
+  if (url.indexOf('https://vimeo.com/') === 0) {
+    const vimeoId = 'lol'; //TODO
+    return `https://player.vimeo.com/video/${vimeoId}`;
+  }
+  return url; //TODO
+};
+
 const isYoutube = url => {
   if (_.isUndefined(url) || _.isEmpty(url)) {
     return false;
@@ -349,6 +398,7 @@ export {
   getSiteSettingFromState,
   getValueOrDefault,
   getExtension,
+  getFileName,
   isVideo,
   getThumb300,
   get1400,
@@ -373,4 +423,5 @@ export {
   getValidUrl,
   getUserPreview,
   allowComments,
+  isVideoUrl,
 };