@plusscommunities/pluss-core-app 1.1.5 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plusscommunities/pluss-core-app",
-  "version": "1.1.5",
+  "version": "1.2.0",
   "description": "Core extension package for Pluss Communities platform",
   "main": "src/index.js",
   "scripts": {

package/src/apis/reactionActions.js

@@ -26,11 +26,10 @@ export const reactionActions = {
       },
     });
   },
-  addComment: (entityId, entityType, entityName, site, comment, image) => {
+  addComment: (entityId, entityType, 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.entityName, this.props.site, text, image)
+      .addComment(this.props.entityId, this.props.entityType, this.props.site, text, image)
       .then(res => {
         if (this.props.commentSection) {
           this.props.commentSection.getWrappedInstance().commentAdded(res.data);

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