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

package/package.json

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

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 } from 'react';
-import { I18nManager, TouchableOpacity, View, AppState } from 'react-native';
+import React, { useContext, useEffect, useState, useFocusEffect } from 'react';
+import { I18nManager, TouchableOpacity, View, StyleSheet, AppState } from 'react-native';
 import LinearGradient from "react-native-linear-gradient";
 import { ClockIcon } from '../../Icons/ClockIcon';
 import { AppTheme, getTimeInFormat } from '../../utils';
@@ -9,18 +9,21 @@ 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 TrackPlayer, { usePlaybackState, Capability, State, useProgress } from "react-native-track-player";
+import Icon from 'react-native-vector-icons/AntDesign';
+import TrackPlayer, { usePlaybackState, Capability, State, AppKilledPlaybackBehavior, useProgress } from "react-native-track-player";
 import MaterialIcon from "react-native-vector-icons/MaterialCommunityIcons";
-import {Comments} from '../Comments'
+import FontAwesomeIcon from "react-native-vector-icons/FontAwesome";
+import { isDetox } from 'react-native-is-detox';
 
 import Modal from 'react-native-modal';
-import { SCREEN_LIST } from '../../../../../../src/constants/screen-mapping';
+import { COMP_GENERAL_CONSTANTS } from '../../constants/component-constants';
 
 const getLiveBlogTimeStamp = (card, DATE_FORMAT, story, styles, locale) => {
   const slug = `?cardId=${card.id}`;
@@ -135,31 +138,34 @@ export const Story = ({
   onAuthorPress,
   onTagsPress,
   onSectionPress,
+  onFbCommentPress,
   screenList,
   navigation,
   accessComponent,
   checkStoryAccess,
+  enableFbComments,
   storyHasAccess = 'loading',
   currentLayout,
   getAd,
   linkedStories,
   showWall,
   userObjectLength,
+  numberOfVisibleStoryCard,
   audioS3Key,
   ttsButtonState,
   setShowTTSPlayer,
-  gaTrigerredTTS,
-  commentData
+  gaTrigerredTTS
 }) => {
   const { theme } = useContext(AppTheme);
-  const { COLORS, FONT_SIZE, locale, DARK_MODE,translate, enableComments } = theme;
+  const { COLORS, FONT_SIZE, locale, DARK_MODE,translate } = 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();
+  const progress = useProgress(progressInterval);
   const [isFinishedPlaying, setFinishedPlaying] = useState(false);
 
 
@@ -238,6 +244,14 @@ 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);
@@ -260,6 +274,7 @@ export const Story = ({
   }
 
   const togglePlayback = async () => {
+    console.log('risi - tts toggle playback', playbackState.state, TrackPlayer)
     if (playbackState?.state === State.Playing) {
       await TrackPlayer.pause();
     } else {
@@ -303,6 +318,20 @@ 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);
@@ -349,10 +378,6 @@ export const Story = ({
               </Text>
   }
 
-  const navigateToComments = () => {
-    navigation.navigate(SCREEN_LIST.commentsScreen, {storyUrl: story.url})
-  }
-
   return (
     <>
     <View>
@@ -423,7 +448,8 @@ export const Story = ({
       </View>
       {accessComponent(story, storyHasAccess, showWall)}
 
-      {enableComments && <Comments commentData={commentData} addCommentHandler={navigateToComments} readAllCommentHandler={navigateToComments}/>}
+
+      {shouldShowComments()}
 
       <View>
         <TagsRow tags={story.tags} onPress={onTagsPress} />
@@ -439,7 +465,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 onPress={() => setShowModal(false)}>
+              <TouchableOpacity testID={COMP_GENERAL_CONSTANTS.ttsModalCloseButton} onPress={() => setShowModal(false)}>
                 <MaterialIcon name="close" size={25} color={styles?.textStyle?.color} />
               </TouchableOpacity>
             </View>

package/src/components/index.js

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

package/src/Icons/UserIcon/UserIcon.js

@@ -1,33 +0,0 @@
-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/Comments/index.js

@@ -1,63 +0,0 @@
-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

@@ -1,103 +0,0 @@
-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
-  }
-})