@plusscommunities/pluss-newsletter-app-menu 1.2.22 → 1.2.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plusscommunities/pluss-newsletter-app-menu",
-  "version": "1.2.22",
+  "version": "1.2.26",
   "description": "Extension package to enable newsletter on Pluss Communities Platform",
   "main": "src/index.js",
   "scripts": {
@@ -17,7 +17,7 @@
   "author": "Phillip Suh",
   "license": "ISC",
   "dependencies": {
-    "@plusscommunities/pluss-core-app": "^1.1.5",
+    "@plusscommunities/pluss-core-app": "1.2.4",
     "axios": "^0.16.2",
     "lodash": "^4.17.4",
     "moment": "^2.18.1",

package/src/components/common/index.js

@@ -41,5 +41,6 @@ export const FormattedText = Components.FormattedText;
 export const Reactions = Components.Reactions;
 export const CommentReply = Components.CommentReply;
 export const CommentSection = Components.CommentSection;
+export const MediaPlayer = Components.MediaPlayer;
 
 // TODO: Add core components as required

package/src/components/newsletter/NewNewsletter.js

@@ -807,9 +807,7 @@ class NewNewsletter 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} />;
   }
 
   renderButtons() {

package/src/components/newsletter/NewsletterEntryPreview.js

@@ -15,13 +15,10 @@ const SCREEN_HEIGHT = Dimensions.get('window').height;
 class NewsletterEntryPreview extends Component {
   constructor(props) {
     super(props);
-    this.state = {
-      playVideo: false,
-    };
+    this.state = {};
   }
 
   onPress() {
-    this.setState({ playVideo: false });
     NavigationService.navigate(values.screenNewsletterPost, { update: this.props.update });
   }
 
@@ -99,7 +96,6 @@ class NewsletterEntryPreview extends Component {
           {hasImage && (
             <NewsletterImage
               news={this.props.update}
-              playVideo={this.state.playVideo}
               autoScaleHeight
               width={SCREEN_WIDTH - 32}
               style={{
@@ -127,7 +123,7 @@ class NewsletterEntryPreview extends Component {
     }
     return (
       <View style={[styles.container, getShadowStyle(), this.props.containerStyle]}>
-        <NewsletterImage news={this.props.update} playVideo={this.state.playVideo} />
+        <NewsletterImage news={this.props.update} />
         <View style={styles.rightContent}>
           <Text style={styles.title} numberOfLines={2}>
             {this.props.update.Title}

package/src/components/newsletter/NewsletterImage.js

@@ -1,6 +1,4 @@
 import React, { PureComponent } from 'react';
-import { Video } from 'expo-av';
-import VideoPlayer from 'expo-video-player';
 import { View, ImageBackground } from 'react-native';
 import { LinearGradient } from 'expo-linear-gradient';
 import { connect } from 'react-redux';
@@ -77,26 +75,6 @@ class NewsletterImage extends PureComponent {
         </LinearGradient>
       );
     }
-    if (this.props.playVideo) {
-      return (
-        <View
-          style={{
-            marginBottom: 5,
-          }}
-        >
-          <VideoPlayer
-            videoProps={{
-              shouldPlay: true,
-              resizeMode: Video.RESIZE_MODE_CONTAIN,
-              source: {
-                uri: this.props.news.Video,
-              },
-            }}
-            inFullscreen
-          />
-        </View>
-      );
-    }
     const videoContent = !this.props.disableOverlays && !_.isEmpty(this.props.news.Video) && (
       <Icon
         name="play"

package/src/components/newsletter/NewsletterImageSet.js

@@ -1,20 +1,16 @@
 import React, { Component } from 'react';
 import { AppState, View, Text, TouchableOpacity, Image, ImageBackground } from 'react-native';
-import WebView from 'react-native-webview';
 import { connect } from 'react-redux';
 import { Icon } from 'react-native-elements';
 import _ from 'lodash';
-import { Video } from 'expo-av';
-import VideoPlayer from 'expo-video-player';
-import { ImagePopup, VideoPopup, PositionedImage } from '../common';
-import { isYoutube, getYoutubeEmbed, getMainBrandingColourFromState, getThumb300, isVideo, get1400 } from '../../js';
+import { ImagePopup, VideoPopup, PositionedImage, MediaPlayer } from '../common';
+import { getMainBrandingColourFromState, getThumb300, isVideo, get1400 } from '../../js';
 
 class NewsletterImageSet extends Component {
   constructor(props) {
     super(props);
 
     this.state = {
-      showVideo: false,
       galleryOpen: false,
       appBackgroundState: '',
       showFullscreenVideo: false,
@@ -34,25 +30,6 @@ class NewsletterImageSet extends Component {
     this.setState({ appBackgroundState: nextAppState });
   };
 
-  openVideoPlayer() {
-    if (!isYoutube(this.props.news.Video) && this.refs.videoRef) {
-      this.refs.videoRef
-        .presentFullscreenPlayer()
-        .then(res => {
-          //playing
-        })
-        .catch(err => {
-          this.setState({ showVideo: true });
-        });
-    } else {
-      this.setState({ showVideo: true });
-    }
-  }
-
-  closeVideo() {
-    this.setState({ showVideo: false });
-  }
-
   openGallery(index) {
     this.setState({
       galleryOpen: true,
@@ -86,9 +63,7 @@ class NewsletterImageSet 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} />;
   }
 
   renderPlayableImage(index, containerStyle, applyImageOffset) {
@@ -208,40 +183,6 @@ class NewsletterImageSet extends Component {
     if (_.isEmpty(news.Image) && _.isEmpty(news.Video)) {
       return null;
     }
-    // CHECK IF YOUTUBE URL
-    if (this.state.showVideo && this.state.appBackgroundState !== 'background' && isYoutube(news.Video)) {
-      return (
-        <View style={[styles.webViewContainer, { width: width, height: width / 2 }]}>
-          <WebView
-            startInLoadingState
-            javaScriptEnabled
-            scrollEnabled={false}
-            startInLoadingState
-            automaticallyAdjustContentInsets={false}
-            mediaPlaybackRequiresUserAction={true}
-            style={{ backgroundColor: '#000' }}
-            source={{ uri: getYoutubeEmbed(news.Video) }}
-          />
-        </View>
-      );
-    }
-    if (this.state.showVideo) {
-      return (
-        <View>
-          <VideoPlayer
-            videoProps={{
-              shouldPlay: true,
-              resizeMode: Video.RESIZE_MODE_CONTAIN,
-              source: { uri: news.Video },
-            }}
-            inFullscreen={true}
-            height={width / 2}
-            switchToLandscape={this.toggleFullscreenVideo.bind(this, news.Video)}
-            switchToPortrait={this.toggleFullscreenVideo}
-          />
-        </View>
-      );
-    }
     if (!_.isEmpty(news.Images) && news.Images.length === 2) {
       const sideBySideImageContainerStyle = {
         flex: 1,
@@ -260,14 +201,15 @@ class NewsletterImageSet extends Component {
     }
     if (!_.isEmpty(news.Video)) {
       return (
-        <ImageBackground style={[styles.image, { height: width / 2 }]} source={{ uri: news.Image }}>
-          <View style={styles.videoThumbContainer}>
-            <TouchableOpacity onPress={this.openVideoPlayer.bind(this)}>
-              <Icon name="play" style={styles.playIconContainer} type="font-awesome" iconStyle={styles.playIcon} />
-            </TouchableOpacity>
-          </View>
-          {!isYoutube(news.Video) && <Video ref="videoRef" source={{ uri: news.Video }} />}
-        </ImageBackground>
+        <View style={[styles.image, { height: width / 2, marginBottom: 12 }]}>
+          <MediaPlayer
+            source={news.Video}
+            autoPlay={false}
+            orientationChanged={isFullScreen => {
+              if (this.props.orientationChanged) this.props.orientationChanged(isFullScreen);
+            }}
+          />
+        </View>
       );
     }
     return _.isEmpty(news.Images) ? null : <View style={{ height: width / 2 }}>{this.renderPlayableImage(0, null, true)}</View>;
@@ -285,13 +227,6 @@ class NewsletterImageSet extends Component {
 }
 
 const styles = {
-  webViewContainer: {
-    padding: 0,
-    margin: 0,
-    backgroundColor: 'black',
-    justifyContent: 'center',
-    alignContent: 'center',
-  },
   image: {
     height: 185,
     width: 'auto',
@@ -299,29 +234,6 @@ const styles = {
   mainImageRoll: {
     marginBottom: 0,
   },
-  playIconContainer: {
-    height: 60,
-    width: 60,
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderRadius: 30,
-    backgroundColor: '#000',
-  },
-  playIcon: {
-    fontSize: 35,
-    width: 37,
-    paddingLeft: 7,
-    backgroundColor: 'transparent',
-    color: '#fff',
-    alignSelf: 'center',
-  },
-  videoThumbContainer: {
-    flex: 1,
-    backgroundColor: 'rgba(0,0,0,0.1)',
-    borderRadius: 5,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
   imageRoll: {
     flexDirection: 'row',
     marginTop: 8,

package/src/components/newsletter/NewsletterPost.js

@@ -63,9 +63,9 @@ class NewsletterPost extends Component {
       loadingUpdate: !this.props.update,
       fontScaleOpen: false,
       taggedOpen: false,
-
       selectedPDF: null,
       selectedPDFIndex: null,
+      isFullScreen: false,
     };
     this.imageSetRef = null;
   }
@@ -435,6 +435,8 @@ class NewsletterPost extends Component {
   }
 
   render() {
+    const { isFullScreen } = this.state;
+
     if (this.state.loadingUpdate) {
       return (
         <View style={styles.page}>
@@ -452,7 +454,7 @@ class NewsletterPost extends Component {
 
     return (
       <KeyboardAvoidingView behavior={Platform.OS === 'ios' && 'padding'} style={styles.page}>
-        {this.renderHeader()}
+        {!isFullScreen && this.renderHeader()}
         <FontScalePopup
           style={styles.fontScalePopup}
           onPressSmall={this.changeFontSize.bind(this, -2)}
@@ -468,44 +470,53 @@ class NewsletterPost extends Component {
           }}
         >
           <View style={{ minHeight: SCREEN_HEIGHT - StatusBarHeight(HEADER_HEIGHT) - 56 }}>
-            <View style={styles.topContainer}>
-              <Text style={[styles.title, { fontSize: this.getAdjustedSize(24), lineHeight: this.getAdjustedSize(32) }]}>
-                {this.state.update.Title}
-              </Text>
-              {this.renderAuthorTime()}
-            </View>
+            {!isFullScreen && (
+              <View style={styles.topContainer}>
+                <Text style={[styles.title, { fontSize: this.getAdjustedSize(24), lineHeight: this.getAdjustedSize(32) }]}>
+                  {this.state.update.Title}
+                </Text>
+                {this.renderAuthorTime()}
+              </View>
+            )}
             <NewsletterImageSet
               ref={ref => {
                 this.imageSetRef = ref;
               }}
               news={this.state.update}
               width={SCREEN_WIDTH}
+              orientationChanged={isFullScreen => this.setState({ isFullScreen })}
             />
-            {this.renderSponsor()}
-            {this.renderTaggedUsers()}
-            <View style={styles.bottomContainer}>
-              <FormattedText style={[styles.text, { fontSize: this.getAdjustedSize(14), lineHeight: this.getAdjustedSize(24) }]}>
-                {this.state.update.Text}
-              </FormattedText>
-              {this.renderLinks()}
-              {this.renderAttachments()}
-              {this.state.update.Type !== 'WelcomePage' && (
-                <Reactions
-                  style={{ marginTop: 16 }}
-                  entity={this.state.update}
-                  entityType={values.featureKey}
-                  entityId={this.state.update ? this.state.update.RowId : `${getSite(this.props.user.site)}_${this.props.id}`}
-                  anyHighlighted={this.hasReacted()}
-                  user={this.props.user}
-                  site={this.state.update ? this.state.update.Site : getSite(this.props.user.site)}
-                  onUpdateReactions={this.refreshUpdate.bind(this)}
-                />
-              )}
-            </View>
-            {this.renderComments()}
+            {!isFullScreen && (
+              <View>
+                {this.renderSponsor()}
+                {this.renderTaggedUsers()}
+                <View style={styles.bottomContainer}>
+                  <FormattedText style={[styles.text, { fontSize: this.getAdjustedSize(14), lineHeight: this.getAdjustedSize(24) }]}>
+                    {this.state.update.Text}
+                  </FormattedText>
+                  {this.renderLinks()}
+                  {this.renderAttachments()}
+                  {this.state.update.Type !== 'WelcomePage' && (
+                    <Reactions
+                      style={{ marginTop: 16 }}
+                      entity={this.state.update}
+                      entityType={values.featureKey}
+                      entityId={this.state.update ? this.state.update.RowId : `${getSite(this.props.user.site)}_${this.props.id}`}
+                      anyHighlighted={this.hasReacted()}
+                      user={this.props.user}
+                      site={this.state.update ? this.state.update.Site : getSite(this.props.user.site)}
+                      onUpdateReactions={this.refreshUpdate.bind(this)}
+                    />
+                  )}
+                </View>
+                {this.renderComments()}
+              </View>
+            )}
+          </View>
+          <View>
+            {this.renderCommentReply()}
+            {this.renderPDF()}
           </View>
-          {this.renderCommentReply()}
-          {this.renderPDF()}
         </ScrollView>
       </KeyboardAvoidingView>
     );

package/src/feature.config.coaching.js

@@ -7,7 +7,7 @@ import { newsActions } from './webapi';
 import { getSite } from './js';
 
 const values = {
-  featureKey: 'coachings',
+  featureKey: 'coaching',
   reducerKey: 'newsCoaching',
   serviceKey: 'newsletterCoaching',
   updateKey: 'newsCoaching',