@plusscommunities/pluss-core-app 1.1.3 → 1.2.1

package/package.json

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

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/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 './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 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/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

@@ -91,6 +91,20 @@ const isVideo = 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;
 };
@@ -300,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;
@@ -386,4 +423,5 @@ export {
   getValidUrl,
   getUserPreview,
   allowComments,
+  isVideoUrl,
 };