@plusscommunities/pluss-newsletter-app-menu 1.2.21 → 1.2.25

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plusscommunities/pluss-newsletter-app-menu",
-  "version": "1.2.21",
+  "version": "1.2.25",
   "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.3",
+    "@plusscommunities/pluss-core-app": "^1.2.3",
     "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

@@ -44,6 +44,7 @@ import {
   getValidUrl,
   HEADER_HEIGHT,
   allowComments,
+  isVideoUrl,
 } from '../../js';
 import { newsActions, analyticsActions } from '../../webapi';
 import { softUpdateUser } from '../../actions';
@@ -62,9 +63,9 @@ class NewsletterPost extends Component {
       loadingUpdate: !this.props.update,
       fontScaleOpen: false,
       taggedOpen: false,
-
       selectedPDF: null,
       selectedPDFIndex: null,
+      isFullScreen: false,
     };
     this.imageSetRef = null;
   }
@@ -318,7 +319,11 @@ class NewsletterPost extends Component {
               },
             ]}
           >
-            <Text style={styles.attachmentLogoText}>Web</Text>
+            {isVideoUrl(link.Url) ? (
+              <Icon name="video-camera" type="font-awesome" iconStyle={[styles.attachmentLogoText, styles.attachmentLogoIcon]} />
+            ) : (
+              <Text style={styles.attachmentLogoText}>Web</Text>
+            )}
           </View>
           <View style={styles.attachmentFill}>
             <Text style={styles.attachmentTitle}>{link.Text}</Text>
@@ -391,6 +396,7 @@ class NewsletterPost extends Component {
         scrollView={this.scrollView}
         entityType="news"
         entityId={this.state.update.RowId}
+        entityName={this.state.update.Title}
         site={this.state.update.Site}
       />
     );
@@ -429,6 +435,8 @@ class NewsletterPost extends Component {
   }
 
   render() {
+    const { isFullScreen } = this.state;
+
     if (this.state.loadingUpdate) {
       return (
         <View style={styles.page}>
@@ -446,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)}
@@ -462,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>
     );
@@ -541,6 +558,9 @@ const styles = {
     fontFamily: 'sf-bold',
     fontSize: 10,
   },
+  attachmentLogoIcon: {
+    fontSize: 18,
+  },
   attachmentFill: {
     flex: 1,
     justifyContent: 'center',

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

package/src/{feature.config.personaldevelopmenthub.js → feature.config.personaldev.js}

@@ -7,28 +7,28 @@ import { newsActions } from './webapi';
 import { getSite } from './js';
 
 const values = {
-  featureKey: 'personaldevelopmenthub',
-  reducerKey: 'newsPersonalDevelopmentHub',
-  serviceKey: 'newsletterPersonalDevelopmentHub',
-  updateKey: 'newsPersonalDevelopmentHub',
-  analyticsKey: 'newsPersonalDevelopmentHub',
-  actionNewsLoaded: 'NEWS_LOADEDPersonalDevelopmentHub',
-  actionNewsAdded: 'NEWS_ADDEDPersonalDevelopmentHub',
-  actionLoadNewsSubmissions: 'load_NEWSSUBMISSIONSPersonalDevelopmentHub',
-  actionRemoveNewsSubmission: 'REMOVE_NEWSSUBMISSIONPersonalDevelopmentHub',
-  notificationApproveNewsSubmission: 'ApproveNewsSubmissionPersonalDevelopmentHub',
-  notificationNewsletterPublished: 'NewsletterPublishedPersonalDevelopmentHub',
-  screenNewsletterPost: 'newsletterPostPersonalDevelopmentHub',
-  screenNewsletter: 'newsletterPersonalDevelopmentHub',
-  screenNewsSubmission: 'newsSubmissionPersonalDevelopmentHub',
-  screenNewNewsletter: 'newNewsletterPersonalDevelopmentHub',
-  permissionNewsletter: 'newsletterPersonalDevelopmentHub',
-  accessPostingPermitted: 'postingPermittedPersonalDevelopmentHub',
-  accessReviewRequired: 'reviewRequiredPersonalDevelopmentHub',
-  optionForceNewsAuthorName: 'forceNewsAuthorNamePersonalDevelopmentHub',
-  optionNewsComments: 'newsCommentsPersonalDevelopmentHub',
-  optionNewsNotifications: 'newsNotificationsPersonalDevelopmentHub',
-  optionUseLargeNews: 'useLargeNewsPersonalDevelopmentHub',
+  featureKey: 'personalDevHub',
+  reducerKey: 'newsPersonalDev',
+  serviceKey: 'newsletterPersonalDev',
+  updateKey: 'newsPersonalDev',
+  analyticsKey: 'newsPersonalDev',
+  actionNewsLoaded: 'NEWS_LOADEDPersonalDev',
+  actionNewsAdded: 'NEWS_ADDEDPersonalDev',
+  actionLoadNewsSubmissions: 'load_NEWSSUBMISSIONSPersonalDev',
+  actionRemoveNewsSubmission: 'REMOVE_NEWSSUBMISSIONPersonalDev',
+  notificationApproveNewsSubmission: 'ApproveNewsSubmissionPersonalDev',
+  notificationNewsletterPublished: 'NewsletterPublishedPersonalDev',
+  screenNewsletterPost: 'newsletterPostPersonalDev',
+  screenNewsletter: 'newsletterPersonalDev',
+  screenNewsSubmission: 'newsSubmissionPersonalDev',
+  screenNewNewsletter: 'newNewsletterPersonalDev',
+  permissionNewsletter: 'newsletterPersonalDev',
+  accessPostingPermitted: 'postingPermittedPersonalDev',
+  accessReviewRequired: 'reviewRequiredPersonalDev',
+  optionForceNewsAuthorName: 'forceNewsAuthorNamePersonalDev',
+  optionNewsComments: 'newsCommentsPersonalDev',
+  optionNewsNotifications: 'newsNotificationsPersonalDev',
+  optionUseLargeNews: 'useLargeNewsPersonalDev',
   iconGridMenu: 'tab_hub4',
   iconAddMenu: 'tab_hub4',
   orderAddMenu: 2.7,

package/src/js/index.js

@@ -23,6 +23,7 @@ export const getYoutubeEmbed = Helper.getYoutubeEmbed;
 export const getThumb300 = Helper.getThumb300;
 export const get1400 = Helper.get1400;
 export const isVideo = Helper.isVideo;
+export const isVideoUrl = Helper.isVideoUrl;
 export const imageExists = Helper.imageExists;
 export const hasReacted = Helper.hasReacted;
 export const getPluralOptions = Helper.getPluralOptions;