@quintype/native-components 2.29.4-beta.2 → 2.29.4-beta.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quintype/native-components",
-  "version": "2.29.4-beta.2",
+  "version": "2.29.4-beta.4",
   "description": "",
   "main": "src/index.js",
   "scripts": {

package/src/Icons/UserIcon/UserIcon.js

@@ -0,0 +1,33 @@
+import React, { useContext } from "react";
+import Svg, { G, Path, Circle } from "react-native-svg";
+import { AppTheme } from "@quintype/native-components";
+
+export const DarkModeUserIcon = () => (
+  <Svg width="50px" height="50px" viewBox="0 0 64 64">
+    <G fill="none" fill-rule="evenodd">
+      <Circle cx="32" cy="32" r="32" fill="#383838" />
+      <Path
+        fill="#D8D8D8"
+        d="M32.75 30.5c-1.64 0-3.152-.398-4.535-1.195a8.756 8.756 0 0 1-3.27-3.27c-.797-1.383-1.195-2.894-1.195-4.535 0-1.64.398-3.152 1.195-4.535a8.756 8.756 0 0 1 3.27-3.27c1.383-.796 2.894-1.195 4.535-1.195 1.64 0 3.152.399 4.535 1.195a8.756 8.756 0 0 1 3.27 3.27c.797 1.383 1.195 2.894 1.195 4.535 0 1.64-.398 3.152-1.195 4.535a8.756 8.756 0 0 1-3.27 3.27c-1.383.797-2.894 1.195-4.535 1.195zm6.328 2.25c1.688 0 3.258.422 4.711 1.266a9.344 9.344 0 0 1 3.445 3.445 9.222 9.222 0 0 1 1.266 4.71v2.954c0 .937-.328 1.734-.984 2.39-.657.657-1.454.985-2.391.985h-24.75c-.938 0-1.734-.328-2.39-.984-.657-.657-.985-1.454-.985-2.391v-2.953c0-1.688.422-3.258 1.266-4.711a9.344 9.344 0 0 1 3.445-3.445 9.222 9.222 0 0 1 4.71-1.266h1.196a12.21 12.21 0 0 0 5.133 1.125 12.21 12.21 0 0 0 5.133-1.125h1.195z"
+      />
+    </G>
+  </Svg>
+);
+
+export const UserIconBase = () => (
+  <Svg width="50px" height="50px" viewBox="0 0 64 64">
+    <G fill="none" fill-rule="evenodd">
+      <Circle cx="32" cy="32" r="32" fill="#F4F4F4" />
+      <Path
+        fill="#D8D8D8"
+        d="M32.75 30.5c-1.64 0-3.152-.398-4.535-1.195a8.756 8.756 0 0 1-3.27-3.27c-.797-1.383-1.195-2.894-1.195-4.535 0-1.64.398-3.152 1.195-4.535a8.756 8.756 0 0 1 3.27-3.27c1.383-.796 2.894-1.195 4.535-1.195 1.64 0 3.152.399 4.535 1.195a8.756 8.756 0 0 1 3.27 3.27c.797 1.383 1.195 2.894 1.195 4.535 0 1.64-.398 3.152-1.195 4.535a8.756 8.756 0 0 1-3.27 3.27c-1.383.797-2.894 1.195-4.535 1.195zm6.328 2.25c1.688 0 3.258.422 4.711 1.266a9.344 9.344 0 0 1 3.445 3.445 9.222 9.222 0 0 1 1.266 4.71v2.954c0 .937-.328 1.734-.984 2.39-.657.657-1.454.985-2.391.985h-24.75c-.938 0-1.734-.328-2.39-.984-.657-.657-.985-1.454-.985-2.391v-2.953c0-1.688.422-3.258 1.266-4.711a9.344 9.344 0 0 1 3.445-3.445 9.222 9.222 0 0 1 4.71-1.266h1.196a12.21 12.21 0 0 0 5.133 1.125 12.21 12.21 0 0 0 5.133-1.125h1.195z"
+      />
+    </G>
+  </Svg>
+);
+
+export const UserIcon = (props) => {
+  const { theme } = useContext(AppTheme);
+  const { DARK_MODE } = theme;
+  return DARK_MODE ? <DarkModeUserIcon /> : <UserIconBase />;
+};

package/src/components/AudioPlayer/index.js

@@ -68,6 +68,7 @@ const PlayerBase = (props) => {
               onTogglePlayback();
             }}
             FONT_SIZE={FONT_SIZE}
+            testID={COMP_GENERAL_CONSTANTS.ttsPlayButton}
           />
         );
       default:

package/src/components/Comments/index.js

@@ -0,0 +1,63 @@
+import React, { useContext} from "react";
+import { TouchableOpacity, View,  Image, useWindowDimensions } from 'react-native';
+import {Text} from '../Text';
+import { AppTheme, getTimeInFormat } from '../../utils';
+import { commentStyles } from './styles';
+import {UserIcon} from '../../Icons/UserIcon/UserIcon'
+export const Comments = ({commentData, addCommentHandler, readAllCommentHandler}) => {
+
+  const comments = commentData?.comments && commentData?.comments[0]
+  const comment = comments && comments?.body?.ops[0]?.insert;
+  const author = comments && comments?.author;
+  const created_at =  comments && comments?.created_at;
+  const totalComments =  commentData?.total_count ?? 0;
+  const imageUrl =
+  comments && comments?.body?.ops.length >= 2 ? comments?.body?.ops[1]?.insert?.image : null;
+  const isHidden = comments ? comments?.hidden : false;
+
+
+  const {avatar, name} = author ?? {}
+  const { theme } = useContext(AppTheme);
+  const { COLORS, FONT_SIZE,FONT_FAMILY, locale, DARK_MODE,translate } = theme;
+  const styles = commentStyles(COLORS, FONT_SIZE,FONT_FAMILY, DARK_MODE, useWindowDimensions);
+
+  const Divider = () => {
+    return <View style={styles.divider}></View>
+  }
+
+  const CommentImage = ({src}) => {
+    return <Image
+            source={{uri:`https:${src}`}}
+            style={styles.commentImage}
+          />
+  }
+
+  return <View>
+    <Divider />
+     <Text primary style={styles.commentSectionTitle}>{translate('Comments')}</Text>
+    {(comment || isHidden) ? (<View style={styles.container}>
+      {!isHidden ? <Image
+        source={{ uri: avatar }}
+        style={styles.avatar}
+      /> : <UserIcon />}
+      <View style={styles.content}>
+          {comment && <Text style={styles.name}>{name}</Text>}
+          <Text style={styles.timestamp}>{getTimeInFormat(created_at,`dd MMM yyyy 'at' hh:mm a`,locale)}</Text>
+          {comment && comment !== '\n' && <Text style={styles.comment}>{comment}</Text>}
+          {isHidden && <Text style={styles.deletedComment}>{translate('This comment has been deleted')}</Text>}
+          {imageUrl && <CommentImage src={imageUrl}/>}
+      </View>
+
+    </View>) : (<View style={styles.noCommentContainer}>
+      <Text style={{ color:COLORS.BRAND_BLACK}}>{translate('No comments yet. Be the first to share your thoughts!')}</Text>
+    </View>)}
+
+    <View style={styles.actionSection}>
+      <TouchableOpacity onPress={addCommentHandler} style={[styles.addCommentButton,(comment || isHidden) ? {width:'43%'} : {width:'94%'}]}><Text style={{color:COLORS.DYNAMIC_SECONDARY_TEXT_COLOR}}>{translate('Add Comment')}</Text></TouchableOpacity>
+       {(comment || isHidden) && <TouchableOpacity onPress={readAllCommentHandler} style={styles.readAllCommentsButton}><Text style={{color:COLORS.BRAND_BLACK}}>{`${translate('Read All Comments')} ${totalComments  ? '('+totalComments+')' : ''}`}</Text></TouchableOpacity>}
+      </View>
+      <Divider />
+    </View>
+}
+
+

package/src/components/Comments/styles.js

@@ -0,0 +1,103 @@
+import { StyleSheet } from 'react-native';
+
+export const commentStyles = (COLORS, FONT_SIZE, FONT_FAMILY, DARK_MODE, useWindowDimensions) => StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "flex-start",
+    padding: 10,
+    borderRadius: 8,
+    marginBottom: 10,
+    margin:5,
+    marginTop:0
+  },
+  avatar: {
+    width: 50,
+    height: 50,
+    borderRadius: 25,
+    marginRight: 10,
+  },
+  content: {
+    flex: 1,
+    marginLeft:5
+  },
+  header: {
+    flexDirection: "row",
+    alignItems: "center",
+    marginBottom: 4,
+  },
+  name: {
+    fontWeight: "bold",
+    fontSize: FONT_SIZE.h4,
+    marginRight: 8,
+    color:COLORS.BRAND_BLACK
+  },
+  timestamp: {
+    fontSize: FONT_SIZE.h5,
+    color: COLORS.MONO4,
+    marginTop:5,
+    marginBottom:10
+  },
+  comment: {
+    fontSize: FONT_SIZE.h5,
+    color:COLORS.BRAND_BLACK
+  },
+  divider:{
+    height:1.0,
+    width:'96%',
+    backgroundColor:COLORS.MONO5,
+    marginTop:30,
+    marginBottom:20,
+    alignSelf:'center',
+    shadowOpacity:0.1,
+    shadowRadius:10,
+    shadowColor:COLORS.MONO2,
+    shadowOffset:
+    {width: 0,
+      height: 20
+    }
+  },
+  commentImage:{
+    width: useWindowDimensions().width * 0.7,
+    height: useWindowDimensions().width * 0.7,
+    marginTop: 10
+  },
+  commentSectionTitle:{
+    alignSelf: 'flex-start',
+    fontSize: FONT_SIZE.h3,
+    fontFamily:FONT_FAMILY.primaryBold,
+    marginBottom:10,
+    marginLeft:15,
+    color:COLORS.BRAND_BLACK
+  },
+  noCommentContainer:{
+    marginLeft:15,
+    marginBottom:20
+  },
+  actionSection:{
+    display:'flex',
+    flexDirection:'row',
+    justifyContent:'space-around'
+  },
+  addCommentButton:{
+    borderRadius:5,
+    backgroundColor:COLORS.BRAND_1,
+    height:40,
+    display:'flex',
+    justifyContent:'center',
+    alignItems:'center'
+  },
+  readAllCommentsButton:{
+    borderWidth:1,
+    borderColor:COLORS.MONO4,
+    width:'50%',
+    height:40,
+    display:'flex',
+    justifyContent:'center',
+    alignItems:'center',
+    borderRadius:5
+  },
+  deletedComment:{
+    fontStyle:'italic',
+    color:COLORS.BRAND_BLACK
+  }
+})

package/src/components/Story/index.js

@@ -1,7 +1,7 @@
 import { hexToRgb } from '@quintype/native-components/src/utils/colorUtils';
 import PropTypes from 'prop-types';
-import React, { useContext, useEffect, useState, useFocusEffect } from 'react';
-import { I18nManager, TouchableOpacity, View, StyleSheet, AppState } from 'react-native';
+import React, { useContext, useEffect, useState } from 'react';
+import { I18nManager, TouchableOpacity, View, AppState } from 'react-native';
 import LinearGradient from "react-native-linear-gradient";
 import { ClockIcon } from '../../Icons/ClockIcon';
 import { AppTheme, getTimeInFormat } from '../../utils';
@@ -9,21 +9,18 @@ import { isMiddleIndexOfArray } from '../../utils/arrayUtils';
 import { getFirstVideoElement, isStoryFree, getStoryHeadline } from '../../utils/story';
 import { getImageSlug } from '../../utils';
 import { STORY_TYPES } from '../../utils/story-types';
-import { FBCommentsRow } from '../FBCommentsRow';
 import { StoryContent } from '../StoryContent';
 import { StoryHeader } from '../StoryHeader';
 import { TagsRow } from '../TagsRow/TagsRow';
 import { ShareButton, Text } from '../index';
 import { storyStyles, modalStyles } from './styles';
 import { Player } from '../AudioPlayer';
-import Icon from 'react-native-vector-icons/AntDesign';
-import TrackPlayer, { usePlaybackState, Capability, State, AppKilledPlaybackBehavior, useProgress } from "react-native-track-player";
+import TrackPlayer, { usePlaybackState, Capability, State, useProgress } from "react-native-track-player";
 import MaterialIcon from "react-native-vector-icons/MaterialCommunityIcons";
-import FontAwesomeIcon from "react-native-vector-icons/FontAwesome";
-import { isDetox } from 'react-native-is-detox';
+import {Comments} from '../Comments'
 
 import Modal from 'react-native-modal';
-import { COMP_GENERAL_CONSTANTS } from '../../constants/component-constants';
+import { SCREEN_LIST } from '../../../../../../src/constants/screen-mapping';
 
 const getLiveBlogTimeStamp = (card, DATE_FORMAT, story, styles, locale) => {
   const slug = `?cardId=${card.id}`;
@@ -138,34 +135,31 @@ export const Story = ({
   onAuthorPress,
   onTagsPress,
   onSectionPress,
-  onFbCommentPress,
   screenList,
   navigation,
   accessComponent,
   checkStoryAccess,
-  enableFbComments,
   storyHasAccess = 'loading',
   currentLayout,
   getAd,
   linkedStories,
   showWall,
   userObjectLength,
-  numberOfVisibleStoryCard,
   audioS3Key,
   ttsButtonState,
   setShowTTSPlayer,
-  gaTrigerredTTS
+  gaTrigerredTTS,
+  commentData
 }) => {
   const { theme } = useContext(AppTheme);
-  const { COLORS, FONT_SIZE, locale, DARK_MODE,translate } = theme;
+  const { COLORS, FONT_SIZE, locale, DARK_MODE,translate, enableComments } = theme;
   const styles = storyStyles(COLORS, FONT_SIZE, DARK_MODE);
   const Modalstyles = modalStyles(COLORS, FONT_SIZE, DARK_MODE);
   const cards = story?.cards ?? [];
   const [showModal, setShowModal] = useState(false);
   const [audioRate, setAudioRate] = useState(1);
-  const [progressInterval, setProgressInterval] = useState(undefined);
   const playbackState = usePlaybackState();
-  const progress = useProgress(progressInterval);
+  const progress = useProgress();
   const [isFinishedPlaying, setFinishedPlaying] = useState(false);
 
 
@@ -244,14 +238,6 @@ export const Story = ({
     return async() => await TrackPlayer.pause();
   }, []);
 
-  useEffect(() => {
-    const checkDetox = async () => {
-      const isRunningInDetox = await isDetox();
-      setProgressInterval(isRunningInDetox ? 2000 : undefined);
-    };
-    checkDetox();
-  }, []);
-
   useEffect(()=>{
     if(progress?.duration < progress.position + 1 && progress.position !== 0){
       setFinishedPlaying(true);
@@ -274,7 +260,6 @@ export const Story = ({
   }
 
   const togglePlayback = async () => {
-    console.log('risi - tts toggle playback', playbackState.state, TrackPlayer)
     if (playbackState?.state === State.Playing) {
       await TrackPlayer.pause();
     } else {
@@ -318,20 +303,6 @@ export const Story = ({
     : 'hh:mm, d MMM yyyy';
   const storyType = story['story-template'];
 
-  const shouldShowComments = () => {
-    if (!enableFbComments) return null;
-    if (
-      isStoryFree(story) === 0
-      || (storyHasAccess !== 'loading' && storyHasAccess === 'granted')
-    ) {
-      return (
-        <View>
-          <FBCommentsRow onPress={onFbCommentPress} />
-        </View>
-      );
-    }
-    return null;
-  };
 
   useEffect(() => {
     checkStoryAccess(story);
@@ -378,6 +349,10 @@ export const Story = ({
               </Text>
   }
 
+  const navigateToComments = () => {
+    navigation.navigate(SCREEN_LIST.commentsScreen, {storyUrl: story.url})
+  }
+
   return (
     <>
     <View>
@@ -395,7 +370,7 @@ export const Story = ({
           setShowPlayer(true)
           await togglePlayback()
         }}
-        testID={COMP_GENERAL_CONSTANTS.ttsPlayButton}
+        testID={COMP_GENERAL_CONSTANTS.openTtsPlayer}
         style={styles.ttsStoryButtonStyle}
       >
           <MaterialIcon name='account-voice' size={FONT_SIZE.h2} color={COLORS.BRAND_BLACK}/>
@@ -448,8 +423,7 @@ export const Story = ({
       </View>
       {accessComponent(story, storyHasAccess, showWall)}
 
-
-      {shouldShowComments()}
+      {enableComments && <Comments commentData={commentData} addCommentHandler={navigateToComments} readAllCommentHandler={navigateToComments}/>}
 
       <View>
         <TagsRow tags={story.tags} onPress={onTagsPress} />
@@ -465,7 +439,7 @@ export const Story = ({
           <View style={[Modalstyles.modalContent, styles.modalBackgound]}>
             <View style={Modalstyles.header}>
               <Text style={[Modalstyles.title, styles.textStyle]}>{translate("Playback Speed")}</Text>
-              <TouchableOpacity testID={COMP_GENERAL_CONSTANTS.ttsModalCloseButton} onPress={() => setShowModal(false)}>
+              <TouchableOpacity onPress={() => setShowModal(false)}>
                 <MaterialIcon name="close" size={25} color={styles?.textStyle?.color} />
               </TouchableOpacity>
             </View>

package/src/components/index.js

@@ -44,3 +44,5 @@ export { StoryTemplateIcon } from './StoryTemplateIcon';
 export { StoryCardDetailsRow } from './StoryCardDetailsRow';
 export { TextA } from './TextA';
 export { TextQ } from './TextQ';
+export {Comments} from './Comments';
+

package/src/constants/component-constants/general-constants/constants.js

@@ -22,11 +22,12 @@ export const COMP_GENERAL_CONSTANTS = {
   radioButtonTouch: 'COMP_GENERAL_RADIO',
   shareButtonTouch: 'COMP_GENERAL_SHARE',
   closeButtonTouch : 'COMP_CLOSE_BTN_TOUCH',
-  ttsPlayButton: 'COMP_TTS_PLAY_BUTTON',
+  openTtsPlayer: 'COMP_OPEN_TTS_PLAYER',
   ttsPlayerCloseButton: 'COMP_TTS_PLAYER_CLOSE_BUTTON',
   ttsRewindButton: 'COMP_TTS_REWIND_BUTTON',
   ttsForwardButton: 'COMP_TTS_FORWARD_BUTTON',
   ttsPlayBackSpeed: 'COMP_TTS_PLAYBACK_SPEED',
   ttsModalCloseButton: 'COMP_TTS_MODAL_CLOSE_BUTTON',
-  ttsPauseButton: 'COMP_TTS_PAUSE_BUTTON'
+  ttsPauseButton: 'COMP_TTS_PAUSE_BUTTON',
+  ttsPlayButton: 'COMP_TTS_PLAY_BUTTON'
 };