@quintype/native-components 2.28.5-beta.1 → 2.28.5-beta.2

package/package.json

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

package/src/components/AudioPlayer/index.js

@@ -0,0 +1,141 @@
+import React, { memo } from "react";
+import PropTypes from "prop-types";
+import { useProgress, usePlaybackState, State } from "react-native-track-player";
+import { TouchableOpacity, ActivityIndicator, View, ViewPropTypes } from "react-native";
+import Icon from "react-native-vector-icons/AntDesign";
+import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons";
+import { playerStyles } from "./styles";
+import Slider from "@react-native-community/slider";
+import { AppTheme } from "../../utils";
+import { useContext } from "react";
+import {ResponsiveHeight, ResponsiveWidth} from '../../utils/screenUtils'
+import {  Text } from '../index';
+
+const ProgressBar = (props) => {
+  const progress = useProgress();
+  const { theme } = useContext(AppTheme);
+  const { COLORS} = theme;
+  const {progressCompleted, progressBar } = playerStyles();
+  const stylesWithFlexValue = (flex, styles) => ({ flex: flex, ...styles });
+
+  return (
+    <View style={progressBar}>
+      <Slider
+        style={stylesWithFlexValue(progress.position, progressCompleted)}
+        minimumValue={0}
+        maximumValue={progress.duration}
+        minimumTrackTintColor={COLORS.BRAND_BLACK}
+        maximumTrackTintColor={COLORS.MONO_6}
+        value={progress.position}
+        onValueChange={(val) => props.seekTo(val)}
+        thumbTintColor={COLORS.BRAND_BLACK}
+        thumbStyle={{size:50}}
+      />
+    </View>
+  );
+};
+
+export const ControlButton = ({ iconName, onPress, FONT_SIZE }) => {
+  const { controlButtonContainer, controlButton } = playerStyles();
+
+  return (
+    <TouchableOpacity style={controlButtonContainer} onPress={onPress} >
+      <Icon name={iconName} size={FONT_SIZE.title} style={controlButton} />
+    </TouchableOpacity>
+  );
+};
+
+const PlayerBase = (props) => {
+  const { theme } = useContext(AppTheme);
+  const { COLORS,translate, FONT_SIZE, DARK_MODE } = theme;
+  const { card, container, subContainer, playerControlStyle, playbackSpeedText, playerContainer } = playerStyles();
+  const { style, onTogglePlayback, testID, seekTo, rewindOrForward, isFinishedPlaying, restart, closeButtonHandler } = props;
+
+  const playbackState = usePlaybackState();
+
+  const getControlButton = (state) => {
+    switch (state?.state) {
+      case State.Buffering:
+        return <ActivityIndicator size="large" />;
+      case State.Playing:
+        return (
+          <ControlButton
+            iconName={"pausecircleo"}
+            onPress={() => {
+              onTogglePlayback();
+            }}
+            FONT_SIZE={FONT_SIZE}
+          />
+        );
+      default:
+        return <ControlButton iconName={"playcircleo"} onPress={onTogglePlayback} FONT_SIZE={FONT_SIZE}/>;
+    }
+  };
+
+  function formatNumber(num) {
+    return num % 1 === 0 ? num.toFixed(1) : num.toString();
+  }
+
+  return (
+    <View  testID={testID}>
+      <View
+        style={container}
+      >
+        <Text
+          style={subContainer}
+        >
+          {translate("Listen to this article")}
+        </Text>
+        <View style={playerControlStyle}>
+          <TouchableOpacity style={{ marginHorizontal: 10 }} onPress={() => rewindOrForward("rewind")}>
+            <MaterialCommunityIcons color={COLORS.BRAND_BLACK} name={"rewind-10"} size={FONT_SIZE.title} />
+          </TouchableOpacity>
+          <TouchableOpacity style={{ marginHorizontal: 10 }} onPress={() => rewindOrForward("forward")}>
+            <MaterialCommunityIcons color={COLORS.BRAND_BLACK} name={"fast-forward-10"} size={FONT_SIZE.title} />
+          </TouchableOpacity>
+          <TouchableOpacity
+            style={playbackSpeedText}
+            onPress={() => props.setShowModal(true)}
+          >
+            <Text style={{ fontSize: FONT_SIZE.h3, color: DARK_MODE ? COLORS.BRAND_WHITE : COLORS.BRAND_BLACK}}>{`${formatNumber(props.audioRate)}x`}</Text>
+          </TouchableOpacity>
+        </View>
+      </View>
+
+      <View
+        style={[card,style]}
+      >
+        <View style={playerContainer}>
+        { isFinishedPlaying ?
+          <ControlButton iconName={"reload1"} onPress={() => restart()} FONT_SIZE={FONT_SIZE} /> :
+          getControlButton(playbackState)}
+        </View>
+        <ProgressBar seekTo={seekTo} />
+        <MaterialCommunityIcons
+          color={COLORS.BRAND_BLACK}
+          onPress={()=>closeButtonHandler()}
+          size={FONT_SIZE.title}
+          name="close"
+        />
+      </View>
+    </View>
+  );
+};
+
+ControlButton.propTypes = {
+  iconName: PropTypes.string.isRequired,
+  onPress: PropTypes.func.isRequired,
+  testID: PropTypes.string,
+};
+
+PlayerBase.propTypes = {
+  style: ViewPropTypes.style,
+  onTogglePlayback: PropTypes.func.isRequired,
+  testID: PropTypes.string,
+};
+
+PlayerBase.defaultProps = {
+  style: {},
+};
+
+export const Player = memo(PlayerBase);

package/src/components/AudioPlayer/styles.js

@@ -0,0 +1,70 @@
+import { StyleSheet } from "react-native";
+import { AppTheme } from "../../utils";
+import { useContext } from "react";
+import { ResponsiveHeight, ResponsiveWidth } from "../../utils/screenUtils";
+export const playerStyles = () => {
+  const { theme } = useContext(AppTheme);
+  const { COLORS, DARK_MODE,FONT_SIZE } = theme;
+
+  return StyleSheet.create({
+    container:{
+      display: "flex",
+      flexDirection: "row",
+      justifyContent: "space-between",
+      marginHorizontal: 10,
+      alignItems: "flex-start",
+      marginTop: 15,
+      marginBottom: 16,
+    },
+    subContainer:{
+      fontSize: FONT_SIZE.h2,
+      color: COLORS.BRAND_BLACK,
+    },
+    playerControlStyle:{ display: "flex", flexDirection: "row", alignItems: "center" },
+    playbackSpeedText:{
+      backgroundColor: COLORS.MONO5,
+      minWidth: ResponsiveWidth(13),
+      height: ResponsiveHeight(3),
+      borderRadius: 5,
+      alignItems: "center",
+      justifyContent: "center",
+      marginHorizontal: 10,
+    },
+    card: {
+      backgroundColor: DARK_MODE ? COLORS.MONO6 : COLORS.BRAND_WHITE,
+      elevation: 10,
+      shadowColor: COLORS.BRAND_BLACK,
+      shadowOffset: { width: 0, height: -1 },
+      shadowOpacity: 0.1,
+      shadowRadius: 1,
+      width: "95%",
+      minHeight: 70,
+      borderBottomWidth: 2,
+      borderColor: COLORS.MONO6,
+      marginBottom: 7,
+      display: "flex",
+      flexDirection: "row",
+      alignItems: "center",
+      marginHorizontal: ResponsiveWidth(2.5),
+      borderRadius:5
+    },
+    playerContainer:{width:ResponsiveWidth(12),display:'flex', flexDirection:'row',alignItems:'center',justifyContent:'center'},
+    controlButton: {
+      alignItems: "center",
+      color: COLORS.BRAND_BLACK,
+    },
+    controlButtonContainer: {
+      alignItems: "center",
+      flex: 1,
+    },
+    controls: {},
+    progressBar: { width: ResponsiveWidth(70), marginHorizontal: ResponsiveWidth(1) },
+    progressCompleted: {
+      backgroundColor: DARK_MODE ? COLORS.MONO6 : COLORS.BRAND_WHITE,
+    },
+    progressRemaining: {
+      backgroundColor: COLORS.BRAND_BLACK,
+      opacity: 0.1,
+    },
+  });
+};

package/src/components/Story/index.js

@@ -1,19 +1,27 @@
 import { hexToRgb } from '@quintype/native-components/src/utils/colorUtils';
 import PropTypes from 'prop-types';
-import React, { useContext, useEffect } from 'react';
-import { I18nManager, View } 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';
 import { isMiddleIndexOfArray } from '../../utils/arrayUtils';
-import { getFirstVideoElement, isStoryFree } from '../../utils/story';
+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 } from './styles';
+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 MaterialIcon from "react-native-vector-icons/MaterialCommunityIcons";
+import FontAwesomeIcon from "react-native-vector-icons/FontAwesome";
+
+import Modal from 'react-native-modal';
 
 const getLiveBlogTimeStamp = (card, DATE_FORMAT, story, styles, locale) => {
   const slug = `?cardId=${card.id}`;
@@ -140,12 +148,151 @@ export const Story = ({
   linkedStories,
   showWall,
   userObjectLength,
-  numberOfVisibleStoryCard
+  numberOfVisibleStoryCard,
+  audioS3Key,
+  ttsButtonState,
+  setShowTTSPlayer,
+  gaTrigerredTTS
 }) => {
   const { theme } = useContext(AppTheme);
-  const { COLORS, FONT_SIZE, locale, DARK_MODE } = theme;
-  const styles = storyStyles(COLORS, FONT_SIZE);
+  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 playbackState = usePlaybackState();
+  const progress = useProgress();
+  const [isFinishedPlaying, setFinishedPlaying] = useState(false);
+
+
+  const setup = async () => {
+    //If TrackPlayer is not initialized, initialize it
+    try{
+      let activeTrack = await TrackPlayer.getActiveTrack();
+    } catch(err){
+      await TrackPlayer.setupPlayer({});
+    }
+
+    await TrackPlayer.updateOptions({
+      capabilities: [Capability.Play, Capability.Pause, Capability.Stop],
+      compactCapabilities: [Capability.Play, Capability.Pause],
+      notificationCapabilities: [Capability.Play, Capability.Pause, Capability.Stop],
+    });
+  };
+
+  const addTrack = async () => {
+    setFinishedPlaying(false)
+    let activeTrack = await TrackPlayer.getActiveTrack();
+    const storyAudioURL = `${cdn}/${audioS3Key}`;
+
+    if (!activeTrack || activeTrack?.id !== audioS3Key) {
+      await TrackPlayer.reset();
+      const headline = getStoryHeadline(story);
+
+      await TrackPlayer.add({
+        id: audioS3Key,
+        url: storyAudioURL,
+        title: headline,
+        album: cdn + "/" + getImageSlug(story),
+        artwork: cdn + "/" + getImageSlug(story),
+      });
+    }
+  };
+
+  const initialSetup = async () => {
+    await setup();
+    await addTrack();
+  };
+
+  React.useEffect(() => {
+    const unsubscribe = navigation.addListener('blur', async() => {
+      await TrackPlayer.pause();
+    });
+
+    const unsubscribe2 = navigation.addListener('focus', async() => {
+      addTrack();
+    })
+
+    const appStateListener = AppState.addEventListener('change', async (nextAppState) => {
+      if (nextAppState !== 'active') {
+        await TrackPlayer.pause();
+      }
+
+    });
+
+    return () => {
+      unsubscribe();
+      unsubscribe2();
+    };
+  }, [navigation]);
+
+
+
+  const resetPlayer = async () => {
+    setAudioRate(1);
+    setShowTTSPlayer(false);
+
+    await TrackPlayer.stop();
+    await TrackPlayer.setRate(1);
+  };
+
+  useEffect(() => {
+    return async() => await TrackPlayer.pause();
+  }, []);
+
+  useEffect(()=>{
+    if(progress?.duration < progress.position + 1 && progress.position !== 0){
+      setFinishedPlaying(true);
+    }
+  },[progress])
+
+
+
+  useEffect(() => {
+    if (audioS3Key) {
+      initialSetup();
+    }
+  }, [audioS3Key]);
+
+
+  const restartPlayer = async () => {
+    setFinishedPlaying(false);
+    await TrackPlayer.seekTo(0);
+    await TrackPlayer.play();
+  }
+
+  const togglePlayback = async () => {
+    console.log('risi - tts toggle playback', playbackState.state, TrackPlayer)
+    if (playbackState?.state === State.Playing) {
+      await TrackPlayer.pause();
+    } else {
+      await TrackPlayer.play();
+    }
+  };
+  const rewindOrForward = async (type) => {
+    const duration = await TrackPlayer.getProgress();
+
+    if (type === "rewind") {
+      await TrackPlayer.seekTo(duration.position - 10);
+    } else {
+      await TrackPlayer.seekTo(duration.position + 10);
+    }
+  };
+
+  const updateSpeedRate = async (rate) => {
+    await TrackPlayer.setRate(rate);
+    setAudioRate(rate);
+    setShowModal(false);
+  };
+
+  useEffect(()=>{
+    if(ttsButtonState && storyHasAccess === 'granted' && !showPlayer){
+      setShowPlayer(true)
+      togglePlayback()
+
+    }
+  },[ttsButtonState])
 
 
   const firstVideoElement = story['story-template'] === STORY_TYPES.VIDEO_STORY
@@ -198,6 +345,28 @@ export const Story = ({
     );
   };
 
+  const [showPlayer, setShowPlayer] = useState(false);
+  const closeButtonHandler = async() =>{
+    setFinishedPlaying(false);
+    setShowTTSPlayer(false);
+    setShowPlayer(false);
+    try{
+      await TrackPlayer.seekTo(0);
+      await resetPlayer();
+    }catch(err) {
+      console.log(err)
+    }
+  }
+
+  const ModalContent = ({rate, updateSpeedRate}) => {
+    return <Text
+                onPress={() => updateSpeedRate(rate)}
+                style={styles.textStyle}
+              >
+                {rate}
+              </Text>
+  }
+
   return (
     <>
     <View>
@@ -209,7 +378,33 @@ export const Story = ({
         onAuthorPress={onAuthorPress}
         onSectionPress={onSectionPress}
       />
-
+  { storyHasAccess === 'granted' && audioS3Key && (!showPlayer ?
+  (<TouchableOpacity onPress={async()=>{
+          gaTrigerredTTS({ slug: story.slug });
+          setShowPlayer(true)
+          await togglePlayback()
+        }}
+        style={styles.ttsStoryButtonStyle}
+      >
+          <MaterialIcon name='account-voice' size={FONT_SIZE.h2} color={COLORS.BRAND_BLACK}/>
+          <Text style={styles.ttsTextStyle}>{translate('Listen to this article')}</Text>
+      </TouchableOpacity>) :
+     (<View
+            style={styles.ttsPlayerContainer}
+          >
+            <Player
+              onTogglePlayback={togglePlayback}
+              seekTo={TrackPlayer.seekTo}
+              rewindOrForward={rewindOrForward}
+              setShowTTSPlayer={setShowPlayer}
+              setShowModal={setShowModal}
+              audioRate={audioRate}
+              resetPlayer={resetPlayer}
+              isFinishedPlaying={isFinishedPlaying}
+              closeButtonHandler={closeButtonHandler}
+              restart={restartPlayer}
+            />
+          </View>))}
 
 
       {getAd()}
@@ -247,10 +442,39 @@ export const Story = ({
       <View>
         <TagsRow tags={story.tags} onPress={onTagsPress} />
       </View>
+      <Modal
+          isVisible={showModal}
+          transparent={true}
+          onBackdropPress={() => setShowModal(false)}
+          style={Modalstyles.modalContainer}
+          swipeDirection="down"
+          onSwipeComplete={() => setShowModal(false)}
+        >
+          <View style={[Modalstyles.modalContent, styles.modalBackgound]}>
+            <View style={Modalstyles.header}>
+              <Text style={[Modalstyles.title, styles.textStyle]}>{translate("Playback Speed")}</Text>
+              <TouchableOpacity onPress={() => setShowModal(false)}>
+                <MaterialIcon name="close" size={25} color={styles?.textStyle?.color} />
+              </TouchableOpacity>
+            </View>
+            <View style={Modalstyles.modalBody}>
+            <ModalContent rate={0.25} updateSpeedRate={updateSpeedRate}/>
+            <ModalContent rate={0.5} updateSpeedRate={updateSpeedRate}/>
+            <ModalContent rate={0.75} updateSpeedRate={updateSpeedRate}/>
+            <ModalContent rate={1} updateSpeedRate={updateSpeedRate}/>
+            <ModalContent rate={1.25} updateSpeedRate={updateSpeedRate}/>
+            <ModalContent rate={1.55} updateSpeedRate={updateSpeedRate}/>
+            <ModalContent rate={1.75} updateSpeedRate={updateSpeedRate}/>
+            <ModalContent rate={2} updateSpeedRate={updateSpeedRate}/>
+            </View>
+          </View>
+        </Modal>
     </>
   );
 };
 
+
+
 Story.propTypes = {
   story: PropTypes.any.isRequired,
   cdn: PropTypes.string.isRequired,

package/src/components/Story/styles.js

@@ -1,6 +1,6 @@
 import { StyleSheet } from 'react-native';
 
-export const storyStyles = (COLORS, FONT_SIZE) => StyleSheet.create({
+export const storyStyles = (COLORS, FONT_SIZE, DARK_MODE) => StyleSheet.create({
   container: {
     padding: 10,
     flexDirection: 'row',
@@ -39,5 +39,81 @@ export const storyStyles = (COLORS, FONT_SIZE) => StyleSheet.create({
   },
   overlay:{
     marginTop:-220
-  }
+  },
+  modalBackgound: {
+    backgroundColor: COLORS.BRAND_WHITE,
+    position:'absolute',
+    bottom:0,
+    width:'100%',
+
+  },
+  textStyle: {
+    color: COLORS.BRAND_BLACK,
+    marginVertical: 10,
+    fontSize: FONT_SIZE.h3
+  },
+  ttsStoryButtonStyle:{
+    flexDirection:'row',
+    marginLeft:10,
+    alignItems:'center',
+    padding:10,
+    borderRadius:35,
+    paddingLeft:15,
+    alignSelf:'flex-start',
+    backgroundColor:COLORS.MONO6,
+    backgroundColor: DARK_MODE ? COLORS.MONO6 : COLORS.BRAND_WHITE,
+    elevation: 5,
+    shadowColor: COLORS.BRAND_BLACK,
+    shadowOffset: { width: 0, height: -1 },
+    shadowOpacity: 0.1,
+    shadowRadius: 1,
+    borderWidth:1,
+    borderColor: COLORS.MONO6,
+    marginBottom: 7},
+    ttsTextStyle:{marginLeft:10, fontSize:FONT_SIZE.h3, color:COLORS.BRAND_BLACK},
+    ttsPlayerContainer:{
+      width: "100%",
+      alignSelf: "center",
+      zIndex: 1,
+      marginBottom: 5,
+      marginVertical:10,
+
+    }
 });
+
+export const modalStyles = (COLORS, FONT_SIZE, DARK_MODE) => StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    backgroundColor:'green'
+  },
+  modalContainer: {
+    justifyContent: "flex-end",
+    margin: 0,
+    position:'absolute',
+    bottom:0,
+    width:'100%',
+  },
+  modalContent: {
+    borderTopLeftRadius: 15,
+    borderTopRightRadius: 15,
+    padding: 32,
+  },
+  header: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    borderBottomWidth: 1,
+    borderBottomColor: COLORS.MONO5,
+    paddingBottom: 10,
+  },
+  title: {
+    fontSize: 18,
+    fontWeight: "bold",
+  },
+  modalBody: {
+    marginTop: 15,
+    fontSize: 16,
+  },
+})

package/src/utils/screenUtils.js

@@ -0,0 +1,26 @@
+import get from "lodash/get";
+import { useNavigationState } from "@react-navigation/native";
+import { Dimensions } from "react-native";
+
+export const getScreenCount = (screenName) => {
+  /* Note: To figure out if there are screen instances in the stack */
+  const navigationState = useNavigationState((state) => state) || {};
+  return get(navigationState, ["routes"], []).reduce((acc, route) => {
+    if (route.name === screenName) {
+      acc = acc + 1;
+    }
+    return acc;
+  }, 0);
+};
+
+export const ResponsiveHeight = (height) => {
+  const deviceHeight = Dimensions.get("window").height;
+  const responsiveHeight = (deviceHeight * height) / 1000;
+  return responsiveHeight;
+};
+
+export const ResponsiveWidth = (width) => {
+  const deviceWidth = Dimensions.get("window").width;
+  const responsiveWidth = (deviceWidth * width) / 1000;
+  return responsiveWidth;
+};