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

package/bin-dev-scripts/standard-version-release.sh

@@ -1,15 +1,15 @@
-# #!/bin/bash -e
+#!/bin/bash -e
 
-# npm install
-# git diff --quiet
+npm install
+git diff --quiet
 
-# BRANCH=$(git symbolic-ref --short HEAD)
+BRANCH=$(git symbolic-ref --short HEAD)
 
-# if [ "$BRANCH" == 'master' ]
-# then
-#   npx standard-version
-# else
-#   npx standard-version --prerelease "$(git symbolic-ref --short HEAD | sed s:/:-:g )" --skip.changelog=true
-# fi
+if [ "$BRANCH" == 'master' ]
+then
+  npx standard-version
+else
+  npx standard-version --prerelease "$(git symbolic-ref --short HEAD | sed s:/:-:g )" --skip.changelog=true
+fi
 
-# git push --follow-tags origin "$BRANCH"
+git push --follow-tags origin "$BRANCH"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quintype/native-components",
-  "version": "2.28.5",
+  "version": "2.29.0-beta.1",
   "description": "",
   "main": "src/index.js",
   "scripts": {
@@ -9,6 +9,7 @@
     "lint:ci": "npx eslint $(git diff --pretty='' --diff-filter=d --name-only origin/master..HEAD -- '*.js' '*.jsx') ./start.js"
   },
   "dependencies": {
+    "@react-native-community/slider": "^4.5.3",
     "atob": "^2.1.2",
     "base-64": "^1.0.0",
     "date-fns": "^2.15.0",
@@ -16,24 +17,27 @@
     "prop-types": "15.7.2",
     "quintype-js": "1.2.1",
     "react-htmltext": "^0.40.2",
-    "react-native-fast-image": "8.3.2",
+    "react-native-fast-image": ">=8.3.2",
     "react-native-image-pan-zoom": "^2.1.12",
     "react-native-lightbox": "0.8.1",
+    "react-native-modal": "^13.0.1",
     "react-native-render-html": "^4.2.3",
     "react-native-share": "^10.2.0",
-    "react-native-star-rating-widget": "^1.7.3"
+    "react-native-star-rating-widget": "^1.7.3",
+    "react-native-track-player": "^4.1.1"
   },
   "peerDependencies": {
     "@react-navigation/native": ">=6.1.17",
     "lodash": ">=4.17.20",
     "react": ">=17.0.2",
     "react-native": ">=0.67.5",
+    "react-native-blob-util": ">=6.7.4",
     "react-native-fast-image": ">=8.3.2",
+    "react-native-linear-gradient": "^2.8.3",
     "react-native-pdf": ">=6.7.4",
-    "react-native-blob-util": ">=6.7.4",
-    "react-native-webview": ">=11.0.0",
     "react-native-vector-icons": "^10.0.0",
-    "react-native-linear-gradient": "^2.8.3"
+    "react-native-device-info": "^11.1.0",
+    "react-native-webview": ">=11.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.11.1",
@@ -53,7 +57,6 @@
     "metro-react-native-babel-preset": "^0.62.0",
     "react": "18.2.0",
     "react-native": "0.71.17",
-    "react-native-device-info": "^5.6.5",
     "react-native-svg": "^12.3.0",
     "react-navigation-hooks": "^1.1.0",
     "react-test-renderer": "16.13.1"

package/src/components/AudioPlayer/index.js

@@ -0,0 +1,143 @@
+import React, { memo } from "react";
+import PropTypes from "prop-types";
+import { useProgress, usePlaybackState, State } from "react-native-track-player";
+import { TouchableOpacity, ActivityIndicator, View, ViewPropTypes, useWindowDimensions } 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 {  Text } from '../index';
+
+const ProgressBar = (props) => {
+  const screenDimensions = useWindowDimensions();
+  const progress = useProgress();
+  const { theme } = useContext(AppTheme);
+  const { COLORS} = theme;
+  const {progressCompleted, progressBar } = playerStyles(screenDimensions);
+  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 screenDimensions = useWindowDimensions();
+  const { controlButtonContainer, controlButton } = playerStyles(screenDimensions);
+
+  return (
+    <TouchableOpacity style={controlButtonContainer} onPress={onPress} >
+      <Icon name={iconName} size={FONT_SIZE.title} style={controlButton} />
+    </TouchableOpacity>
+  );
+};
+
+const PlayerBase = (props) => {
+  const screenDimensions = useWindowDimensions();
+  const { theme } = useContext(AppTheme);
+  const { COLORS,translate, FONT_SIZE, DARK_MODE } = theme;
+  const { card, container, subContainer, playerControlStyle, playbackSpeedText, playerContainer } = playerStyles(screenDimensions);
+  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,79 @@
+import { StyleSheet } from "react-native";
+import { AppTheme } from "../../utils";
+import { useContext } from "react";
+
+export const playerStyles = (screenDimensions) => {
+  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: screenDimensions.width * .013,
+      height: screenDimensions.height * .003,
+      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: screenDimensions.width * .0025,
+      borderRadius: 5,
+    },
+    playerContainer: {
+      width: screenDimensions.width * .012,
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    controlButton: {
+      alignItems: "center",
+      color: COLORS.BRAND_BLACK,
+    },
+    controlButtonContainer: {
+      alignItems: "center",
+      flex: 1,
+    },
+    controls: {},
+    progressBar: {
+      width: screenDimensions.width * .070,
+      marginHorizontal: screenDimensions.width * .001,
+    },
+    progressCompleted: {
+      backgroundColor: DARK_MODE ? COLORS.MONO6 : COLORS.BRAND_WHITE,
+    },
+    progressRemaining: {
+      backgroundColor: COLORS.BRAND_BLACK,
+      opacity: 0.1,
+    },
+  });
+};

package/src/components/CollectionCard/index.js

@@ -2,7 +2,6 @@ import get from 'lodash/get';
 import isEmpty from 'lodash/isEmpty';
 import PropTypes from 'prop-types';
 import React, { memo } from 'react';
-import { getScreenPercentageWidth } from '../../utils/index';
 import {
   CollectionTitle,
   PrimaryStoryCard,
@@ -42,7 +41,6 @@ const CollectionCardBase = ({
         cdn={cdn}
         story={!isEmpty(stories) ? primaryStory : {}}
         iconComponent={<ShareButton story={primaryStory} inListingStoryCard />}
-        imageWidth={getScreenPercentageWidth(100) - 2 * horizontalPadding}
         horizontalPadding={horizontalPadding}
       />
       {stories.slice(1, sliceLimit).map((currentStory) => {
@@ -55,7 +53,6 @@ const CollectionCardBase = ({
             cdn={cdn}
             story={secondaryStory}
             iconComponent={<ShareButton story={secondaryStory} inListingStoryCard />}
-            imageWidth={getScreenPercentageWidth(28)}
             horizontalPadding={horizontalPadding}
           />
         );

package/src/components/JSEmbedElement/index.js

@@ -2,7 +2,7 @@ import { decode as atob } from 'base-64';
 import get from 'lodash/get';
 import PropTypes from 'prop-types';
 import React, { useEffect, useRef, useState } from 'react';
-import { Dimensions, View } from 'react-native';
+import { useWindowDimensions, View } from 'react-native';
 import { WebView } from 'react-native-webview';
 import { STORY_ELEMENT_SUBTYPES } from '../../constants/cardConstants';
 
@@ -37,7 +37,7 @@ const removeWidthnHeight = (htmlContent) => {
 };
 
 const getHTMLContent = (embedJs) => {
-  const { width } = Dimensions.get('window');
+  const width = useWindowDimensions().width;
   const decodedContent = getDecodedContent(embedJs);
   let htmlContent = replaceDefaultProtocol(decodedContent);
   htmlContent = removeWidthnHeight(htmlContent);
@@ -77,10 +77,11 @@ const getHTMLContent = (embedJs) => {
 export const JSEmbedElement = (props) => {
   const [height, setHeight] = useState(-1);
   const webViewRef = useRef(null);
+  const screenWidth = useWindowDimensions().width;
   const width = get(
     props,
     ['currentLayout', 'width'],
-    Dimensions.get('window').width,
+    screenWidth,
   );
 
   useEffect(() => {

package/src/components/LightBox/index.js

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React, { useContext } from 'react';
 import {
-  Dimensions, Image, Modal, SafeAreaView, TouchableOpacity, View,
+  useWindowDimensions, Image, Modal, SafeAreaView, TouchableOpacity, View,
 } from 'react-native';
 import ImageZoom from 'react-native-image-pan-zoom';
 import Icon from 'react-native-vector-icons/FontAwesome';
@@ -13,7 +13,7 @@ export const LightBox = ({ visible, imageUri, closeModal }) => {
   const { COLORS, DARK_MODE } = theme;
   const styles = lightBoxStyles();
 
-  const { width: screenWidth, height: screenHeight } = Dimensions.get('window');
+  const { width: screenWidth, height: screenHeight } = useWindowDimensions();
   const imageZoomHeight = screenHeight - 80;
 
   return (

package/src/components/LightBoxImage/index.js

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { useState } from 'react';
-import { TouchableOpacity } from 'react-native';
+import { TouchableOpacity, useWindowDimensions } from 'react-native';
 import { getImageHeight } from '../../utils';
 import { LightBox } from '../LightBox';
 import { ResponsiveImage } from '../ResponsiveImage';
@@ -11,8 +11,9 @@ export const LightBoxImage = ({
   const {
     cdn, slug, metaData, imageWidth: previewWidth,
   } = data;
+  const screenWidth = useWindowDimensions().width;
   const { width, height } = metaData || {};
-  const imageHeight = getImageHeight(width, height);
+  const imageHeight = getImageHeight(width, height, screenWidth);
   const imageUri = `${data?.cdn}/${data?.slug}`;
   const [showModal, setShowModal] = useState(false);
 

package/src/components/PrimaryStoryCard/index.js

@@ -1,7 +1,7 @@
 import { get, throttle } from 'lodash';
 import PropTypes from 'prop-types';
 import React, { memo, useContext } from 'react';
-import { StyleSheet, TouchableOpacity, View } from 'react-native';
+import { StyleSheet, TouchableOpacity, View, useWindowDimensions } from 'react-native';
 import PremiumIcons from '../../Icons/PremiumIcons/index';
 import {
   COMP_GENERAL_CONSTANTS,
@@ -36,8 +36,9 @@ const PrimaryStoryCardBase = (props) => {
   ]);
 
   const isPremiumStory = story['access'] === 'subscription';
-
   const throttledOnpress = throttle(props.onPress, 1000);
+  const screenWidth = useWindowDimensions().width;
+  const imageWidth = screenWidth - 2 * props.horizontalPadding;
 
   return (
     <>
@@ -51,7 +52,7 @@ const PrimaryStoryCardBase = (props) => {
         metaData={getImageMetadata(story)}
         slug={getImageSlug(story)}
         cdn={props.cdn}
-        imageWidth={props.imageWidth}
+        imageWidth={imageWidth}
       >
         <View style={styles.storyTypeContainer}>
           <StoryTemplateIcon storyTemplate={story['story-template']} cardType="primary" theme={theme} />
@@ -89,7 +90,6 @@ const PrimaryStoryCardBase = (props) => {
 
 PrimaryStoryCardBase.propTypes = {
   cdn: PropTypes.string,
-  imageWidth: PropTypes.number,
   headlineStyle: PropTypes.func,
   story: PropTypes.object.isRequired,
   onPress: PropTypes.func,

package/src/components/RelatedStoriesCard/index.js

@@ -2,7 +2,7 @@ import get from 'lodash/get';
 import PropTypes from 'prop-types';
 import React, { useContext } from 'react';
 import { Text, View ,I18nManager} from 'react-native';
-import { getScreenPercentageWidth, AppTheme } from '../../utils/index';
+import { AppTheme } from '../../utils/index';
 import { SecondaryStoryCard, ShareButton } from '../index';
 
 import { relatedStoriesStyles } from './styles';
@@ -42,7 +42,6 @@ export const RelatedStoriesCard = ({
             return <SecondaryStoryCard
               {...storyCardProps}
               iconComponent={<ShareButton story={secondaryStory} inListingStoryCard />}
-              imageWidth={getScreenPercentageWidth(28)}
               horizontalPadding={4}
             />
         })}

package/src/components/ResponsiveImage/index.js

@@ -2,17 +2,17 @@ import PropTypes from 'prop-types';
 import React, {
   memo, useCallback, useContext, useState,
 } from 'react';
-import { StyleSheet, View, ImageBackground } from 'react-native';
+import { StyleSheet, View, ImageBackground, useWindowDimensions } from 'react-native';
 import FastImage from 'react-native-fast-image';
 import Icon from 'react-native-vector-icons/FontAwesome';
 import { FallbackIcon } from '../../Icons/FallBackIcon';
 import { AppTheme } from '../../utils';
 import {
   getImageURL,
-  getCustomResolutionImageURL,
 } from '../../utils/imageUtils';
 
 const ResponsiveImageBase = (props) => {
+  const screenWidth = useWindowDimensions().width;
   const [placeholder, setPlaceholder] = useState(true);
   const { theme } = useContext(AppTheme);
   const {
@@ -61,7 +61,7 @@ const ResponsiveImageBase = (props) => {
   );
 
 
-  let imageUrl  = getImageURL(props)
+  let imageUrl  = getImageURL(props, screenWidth);
 
   const userFallback = () => <Icon name="user" size={20} />;
 
@@ -78,7 +78,7 @@ const ResponsiveImageBase = (props) => {
   const onLoadHandler = useCallback(handleImageLoad, []);
 
   const lowestQualitySourceURI = {
-    uri: decodeURIComponent(getImageURL(props,2)),
+    uri: decodeURIComponent(imageUrl),
     priority: FastImage.priority.high,
   }
 

package/src/components/SecondaryStoryCard/index.js

@@ -7,6 +7,7 @@ import {
   View,
   TextStyle,
   TouchableOpacityProps,
+  useWindowDimensions,
 } from 'react-native';
 import {
   AppTheme,
@@ -43,8 +44,9 @@ const SecondaryStoryCardBase = (props) => {
   ]);
 
   const isPremiumStory = story['access'] === 'subscription';
-
   const throttledOnpress = throttle(props.onPress, 1000);
+  const screenWidth = useWindowDimensions().width;
+  const imageWidth = screenWidth * .28;
 
   return (
     <>
@@ -60,7 +62,7 @@ const SecondaryStoryCardBase = (props) => {
             metaData={getImageMetadata(story)}
             slug={getImageSlug(story) || ''}
             cdn={props.cdn || ''}
-            imageWidth={props.imageWidth}
+            imageWidth={imageWidth}
           >
             <View style={styles.storyTypeContainer}>
               <StoryTemplateIcon storyTemplate={story['story-template']} theme={theme} />
@@ -98,7 +100,6 @@ const SecondaryStoryCardBase = (props) => {
 
 SecondaryStoryCardBase.propTypes = TouchableOpacityProps && {
   cdn: PropTypes.string.isRequired,
-  imageWidth: PropTypes.number,
   headlineStyle: TextStyle,
   story: PropTypes.any.isRequired,
   iconComponent: PropTypes.element,

package/src/components/SlideshowStoryCard/index.js

@@ -1,9 +1,8 @@
 import PropTypes from 'prop-types';
 import React, { useContext } from 'react';
-import { View } from 'react-native';
+import { View, useWindowDimensions } from 'react-native';
 import {
   AppTheme,
-  getScreenPercentageWidth,
   stripHTML,
 } from '../../utils/index';
 import { Text } from '../index';
@@ -14,11 +13,12 @@ export const SlideshowStoryCard = ({ card, cdn }) => {
   const attribution = card['image-attribution'];
   const { title } = card;
   const { theme } = useContext(AppTheme);
-  const styles = slideshowStoryCardStyles(theme);
+  const screenWidth = useWindowDimensions().width;
+  const styles = slideshowStoryCardStyles(theme, screenWidth);
   const imgData = {
     cdn,
     slug: card['image-s3-key'],
-    imageWidth: getScreenPercentageWidth(100),
+    imageWidth: screenWidth,
     metaData: card['image-metadata'],
   };
 

package/src/components/SlideshowStoryCard/styles.js

@@ -1,8 +1,6 @@
-import { StyleSheet, Dimensions } from 'react-native';
+import { StyleSheet } from 'react-native';
 
-const { width } = Dimensions.get('window');
-
-export const slideshowStoryCardStyles = ({ COLORS, FONT_FAMILY }) => StyleSheet.create({
+export const slideshowStoryCardStyles = ({ COLORS, FONT_FAMILY }, screenWidth) => StyleSheet.create({
   textContainer: {
     paddingHorizontal: 10,
     flexDirection: 'column',
@@ -16,7 +14,7 @@ export const slideshowStoryCardStyles = ({ COLORS, FONT_FAMILY }) => StyleSheet.
   },
   container: {
     flexDirection: 'column',
-    width,
+    width: screenWidth,
   },
   attributionText: {
     color: COLORS.BRAND_BLACK,

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/components/StoryGallery/index.js

@@ -7,6 +7,7 @@ import {
   FlatList,
   TouchableOpacity,
   ScrollView,
+  useWindowDimensions,
 } from 'react-native';
 import Icon from 'react-native-vector-icons/FontAwesome';
 import FastImage from 'react-native-fast-image';
@@ -18,7 +19,8 @@ import { LightBoxImage } from '../LightBoxImage';
 export const StoryGallery = ({ cdn, card }) => {
   const { theme } = useContext(AppTheme);
   const { COLORS, DARK_MODE } = theme;
-  const galleryStyles = styles(theme);
+  const screenDimensions = useWindowDimensions();
+  const galleryStyles = styles(theme, screenDimensions);
   const storyElements = card['story-elements'];
   const [showModal, setShowModal] = useState(false);
 

package/src/components/StoryGallery/styles.js

@@ -1,9 +1,9 @@
-import { StyleSheet, Dimensions } from 'react-native';
+import { StyleSheet } from 'react-native';
 import { useContext } from 'react';
 import { AppTheme } from '../../utils';
 
-export const styles = ({ FONT_SIZE }) => {
-  const { width: deviceWidth, height: deviceHeight } = Dimensions.get('window');
+export const styles = ({ FONT_SIZE }, screenDimensions) => {
+  const { width: deviceWidth, height: deviceHeight } = screenDimensions;
   const { theme } = useContext(AppTheme);
   const { COLORS, DARK_MODE, FONT_FAMILY } = theme;
 

package/src/components/StoryHeader/index.js

@@ -1,12 +1,11 @@
 import get from 'lodash/get';
 import PropTypes from 'prop-types';
 import React, { useContext } from 'react';
-import { TouchableOpacity, View } from 'react-native';
+import { TouchableOpacity, useWindowDimensions, View } from 'react-native';
 import { COMP_CONTENT_CONSTANTS } from '../../constants/component-constants/content-constants/constants';
 import {
   AppTheme,
   getImageMetadata,
-  getScreenPercentageWidth,
   getTimeInFormat
 } from '../../utils';
 import { STORY_TYPES } from '../../utils/story-types';
@@ -25,12 +24,14 @@ const getHeroImage = (cdn, story) => {
   const imageSlug = story['hero-image-s3-key'];
   if (!imageSlug) return null;
 
+  const screenWidth = useWindowDimensions().width;
+
   return (
     <ResponsiveImage
       cdn={cdn}
       metaData={getImageMetadata(story)}
       slug={imageSlug}
-      imageWidth={getScreenPercentageWidth(100)}
+      imageWidth={screenWidth}
     />
   );
 };

package/src/components/StoryImage/index.js

@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types';
 import React, { useContext } from 'react';
-import { View } from 'react-native';
+import { View, useWindowDimensions } from 'react-native';
 import { ShareButton } from '../index';
-import { AppTheme, getScreenPercentageWidth, stripHTML } from '../../utils';
+import { AppTheme, stripHTML } from '../../utils';
 import { Text } from '../index';
 import { LightBoxImage } from '../LightBoxImage';
 import { storyImageStyles } from './styles';
@@ -13,15 +13,16 @@ export const StoryImage = ({
   const slug = `?cardId=${card.id}`;
   const sharePhotoCard = storyType === 'photo';
   const { theme } = useContext(AppTheme);
+  const screenWidth = useWindowDimensions().width;
 
   const imageData = {
     cdn,
     slug: card['image-s3-key'],
     metaData: card['image-metadata'],
-    imageWidth: getScreenPercentageWidth(100),
+    imageWidth: screenWidth,
   };
 
-  const styles = storyImageStyles(theme, imageData.metaData);
+  const styles = storyImageStyles(theme, imageData.metaData, screenWidth);
 
   return (
     <>

package/src/components/StoryImage/styles.js

@@ -1,9 +1,9 @@
 import { StyleSheet } from 'react-native';
 import { getImageHeight } from '../../utils';
 
-export const storyImageStyles = ({ COLORS, FONT_SIZE, lineHeightMultiplier }, metadata = {}) => {
+export const storyImageStyles = ({ COLORS, FONT_SIZE, lineHeightMultiplier }, metadata = {}, screenWidth) => {
   const { width, height } = metadata || {};
-  const imageHeight = getImageHeight(width, height);
+  const imageHeight = getImageHeight(width, height, screenWidth);
 
   return StyleSheet.create({
     image: {

package/src/components/StorySlideshow/index.js

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { useContext, useRef, useState } from 'react';
-import { TouchableOpacity, View, FlatList } from 'react-native';
+import { TouchableOpacity, View, FlatList, useWindowDimensions } from 'react-native';
 import Icon from 'react-native-vector-icons/AntDesign';
 import { AppTheme } from '../../utils';
 import { SlideshowStoryCard } from '../SlideshowStoryCard';
@@ -9,7 +9,8 @@ import { storySlideshowStyles } from './styles';
 export const StorySlideshow = ({ card, cdn }) => {
   const { theme } = useContext(AppTheme);
   const { COLORS } = theme;
-  const styles = storySlideshowStyles(theme);
+  const screenWidth = useWindowDimensions().width;
+  const styles = storySlideshowStyles(theme, screenWidth);
   const [currentIndex, setCurrentTabIndex] = useState(0);
 
   const flatlistRef = useRef();

package/src/components/StorySlideshow/styles.js

@@ -1,8 +1,6 @@
-import { StyleSheet, Dimensions } from 'react-native';
+import { StyleSheet } from 'react-native';
 
-const { width } = Dimensions.get('window');
-
-export const storySlideshowStyles = ({ COLORS }) => StyleSheet.create({
+export const storySlideshowStyles = ({ COLORS }, screenWidth) => StyleSheet.create({
   cardsContainer: {
     marginTop: 10,
     position: 'relative',
@@ -10,7 +8,7 @@ export const storySlideshowStyles = ({ COLORS }) => StyleSheet.create({
   leftArrow: {
     position: 'absolute',
     marginTop: -20,
-    top: width * 0.28125, // width * 9/16 / 2
+    top: screenWidth * 0.28125, // screenWidth * 9/16 / 2
     left: 0,
     zIndex: 999,
     width: 40,
@@ -23,7 +21,7 @@ export const storySlideshowStyles = ({ COLORS }) => StyleSheet.create({
   rightArrow: {
     position: 'absolute',
     marginTop: -20,
-    top: width * 0.28125, // width * 9/16 / 2
+    top: screenWidth * 0.28125, // screenWidth * 9/16 / 2
     right: 0,
     zIndex: 999,
     width: 40,

package/src/components/YouTubePlayer/index.js

@@ -1,13 +1,13 @@
 import PropTypes from "prop-types";
 import React from "react";
-import { View, Dimensions } from "react-native";
+import { View, useWindowDimensions } from "react-native";
 import { WebView } from "react-native-webview";
 
 export const YouTubePlayer = ({ card = {} }) => {
   const ytEmbedURL = card['embed-url'];
   if (!ytEmbedURL) return null;
 
-  const windowWidth = Dimensions.get("window").width;
+  const windowWidth = useWindowDimensions().width;
   const styles = webviewStyles(windowWidth);
 
   const getYoutubeIframe = (ytEmbedURL) => {

package/src/components/index.js

@@ -40,7 +40,7 @@ export { IconText } from './IconText';
 export { CustomSwitch } from './CustomSwitch';
 export { RelatedStoriesCard } from './RelatedStoriesCard';
 export { References } from './References';
-export { StoryTemplateIcon } from './StoryTemplateIcon'
+export { StoryTemplateIcon } from './StoryTemplateIcon';
 export { StoryCardDetailsRow } from './StoryCardDetailsRow';
-export { TextA } from './TextA'
-export { TextQ } from './TextQ'
+export { TextA } from './TextA';
+export { TextQ } from './TextQ';

package/src/utils/imageUtils.js

@@ -1,11 +1,9 @@
 import { useContext } from 'react';
-import { PixelRatio, Dimensions } from 'react-native';
+import { PixelRatio } from 'react-native';
 import { FocusedImage } from 'quintype-js';
 import get from 'lodash/get';
 import { AppTheme } from '.';
 
-const { width: deviceWidth } = Dimensions.get('window');
-
 /**
  |--------------------------------------------------
  | Gets a higher resolution image if you are on a high pixel density device.
@@ -40,28 +38,18 @@ export function getImageQuality() {
   return 30;
 }
 
-/**
- |--------------------------------------------------
- | Gets the percentage width based on device width
- |--------------------------------------------------
- */
-
-export function getScreenPercentageWidth(percentage) {
-  return Math.round(0.01 * percentage * deviceWidth);
-}
-
 /**
  |--------------------------------------------------
  | Gets image height based on device width
  |--------------------------------------------------
  */
 
-export function getImageHeight(imageWidth, imageHeight) {
+export function getImageHeight(imageWidth, imageHeight, screenWidth) {
   /* Return back a default size if either of the params are falsy */
   if (!imageHeight || !imageWidth) {
     return 250;
   }
-  const ratio = deviceWidth / imageWidth;
+  const ratio = screenWidth / imageWidth;
   return imageHeight * ratio;
 }
 
@@ -105,7 +93,7 @@ export function getImageMetadata(story = {}) {
 /**
  * Returns an ImageURL
  */
-export const getImageURL = (props) => {
+export const getImageURL = (props, screenWidth) => {
   const { theme } = useContext(AppTheme);
   const { IMAGE_QUALITY } = theme;
 
@@ -113,26 +101,9 @@ export const getImageURL = (props) => {
     aspectRatio, metaData, slug, imageWidth, cdn,
   } = props;
   const image = new FocusedImage(slug, metaData);
-
   const imageCdn = cdn || 'https://www.quintype.com';
   return `${imageCdn}/${image.path(aspectRatio || [16, 9], {
-    w: getPixelRatioForDevice(imageWidth) || Math.round(deviceWidth),
-    q: IMAGE_QUALITY,
-  })}`;
-};
-
-export const getCustomResolutionImageURL = (props, customAspectRatio) => {
-  const { theme } = useContext(AppTheme);
-  const { IMAGE_QUALITY } = theme;
-
-  const {
-    metaData, slug, imageWidth, cdn,
-  } = props;
-  const image = new FocusedImage(slug, metaData);
-
-  const imageCdn = cdn || 'https://www.quintype.com';
-  return `${imageCdn}/${image.path(customAspectRatio, {
-    w: getPixelRatioForDevice(imageWidth) || Math.round(deviceWidth),
+    w: getPixelRatioForDevice(imageWidth) || Math.round(screenWidth),
     q: IMAGE_QUALITY,
   })}`;
 };

package/src/utils/screenUtils.js

@@ -0,0 +1,13 @@
+import get from "lodash/get";
+import { useNavigationState } from "@react-navigation/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);
+};