@quintype/native-components 2.20.1-temp-fast-image-constraint.1 → 2.20.2

package/CHANGELOG.md

@@ -2,6 +2,91 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [2.20.2](https://github.com/quintype/native-components/compare/v2.20.1...v2.20.2) (2023-01-23)
+
+### [2.20.1](https://github.com/quintype/native-components/compare/v2.20.0...v2.20.1) (2023-01-12)
+
+
+### Bug Fixes
+
+* **share:** Fixes share on Android v12 and above ([#194](https://github.com/quintype/native-components/issues/194)) ([bab63bf](https://github.com/quintype/native-components/commit/bab63bfccefe7648b0e16f01bb120772843e00e2))
+
+## [2.20.0](https://github.com/quintype/native-components/compare/v2.19.28...v2.20.0) (2023-01-09)
+
+
+### Features
+
+* **enhancement:** Adds toggles for hideCollectionTitle, readTime, shareButton 🔧 ([#193](https://github.com/quintype/native-components/issues/193)) ([53fcafc](https://github.com/quintype/native-components/commit/53fcafc2d8546abb5eea1e36820dc37c22436644))
+
+### [2.19.28](https://github.com/quintype/native-components/compare/v2.19.27...v2.19.28) (2022-12-28)
+
+### [2.19.27](https://github.com/quintype/native-components/compare/v2.19.26...v2.19.27) (2022-12-16)
+
+
+### Bug Fixes
+
+* **time-util:** Fix spacing for time-distance from now :hammer: ([67d9f37](https://github.com/quintype/native-components/commit/67d9f37459ee220f3c1ef1dd38b12ca7b65cf50e))
+
+### [2.19.26](https://github.com/quintype/native-components/compare/v2.19.25...v2.19.26) (2022-12-16)
+
+### [2.19.25](https://github.com/quintype/native-components/compare/v2.19.24...v2.19.25) (2022-12-07)
+
+### [2.19.24](https://github.com/quintype/native-components/compare/v2.19.23...v2.19.24) (2022-12-06)
+
+### [2.19.23](https://github.com/quintype/native-components/compare/v2.19.22...v2.19.23) (2022-12-06)
+
+### [2.19.22](https://github.com/quintype/native-components/compare/v2.19.21...v2.19.22) (2022-12-06)
+
+### [2.19.21](https://github.com/quintype/native-components/compare/v2.19.20...v2.19.21) (2022-11-18)
+
+
+### Bug Fixes
+
+* **fonts:** Fixes fonts for CollectionTitle and Caption/Attribution HTML 🔨  ([#188](https://github.com/quintype/native-components/issues/188)) ([94c61ff](https://github.com/quintype/native-components/commit/94c61ff385df2225f6a3d1b14c1f5d2ce3a1ed89))
+
+### [2.19.20](https://github.com/quintype/native-components/compare/v2.19.19...v2.19.20) (2022-11-07)
+
+
+### Bug Fixes
+
+* **android:** Fixes Nov 4 critical issue that breaks Android :hammer: ([e6d6c27](https://github.com/quintype/native-components/commit/e6d6c27e55ddbe9542ef3c7733273e4bbe9a1aa2))
+
+### [2.19.19](https://github.com/quintype/native-components/compare/v2.19.18...v2.19.19) (2022-08-24)
+
+
+### Bug Fixes
+
+* **Ads:** Change midcontentAd logic for video-story :hammer: ([#186](https://github.com/quintype/native-components/issues/186)) ([b04a16c](https://github.com/quintype/native-components/commit/b04a16cb74f06c3a3f5639df31b39b2ecd4b6704))
+* **deps:** Fixes dependency-conflict due to incorrect react-native version :hammer: ([b43e8ae](https://github.com/quintype/native-components/commit/b43e8ae0e4cf92d3fce21336c3cdd6c2d73db582))
+
+### [2.19.18](https://github.com/quintype/native-components/compare/v2.19.17...v2.19.18) (2022-07-04)
+
+### [2.19.17](https://github.com/quintype/native-components/compare/v2.19.14...v2.19.17) (2022-06-29)
+
+
+### Bug Fixes
+
+* **story-page:** Fixes crash if image-metadata is null 🔨  ([#184](https://github.com/quintype/native-components/issues/184)) ([8f703d1](https://github.com/quintype/native-components/commit/8f703d19c90c4a5c7844e2251c6691263f9b3d4b))
+* **story-template:** Fixed story-template-icon color :hammer: ([#182](https://github.com/quintype/native-components/issues/182)) ([95f750d](https://github.com/quintype/native-components/commit/95f750d7df5f7cc400095317be26900c0cffd3e1))
+
+### [2.19.16](https://github.com/quintype/native-components/compare/v2.19.15...v2.19.16) (2022-05-09)
+
+
+### Bug Fixes
+
+* **story-template:** Fixed story-template-icon color :hammer: ([#182](https://github.com/quintype/native-components/issues/182)) ([95f750d](https://github.com/quintype/native-components/commit/95f750d7df5f7cc400095317be26900c0cffd3e1))
+
+### [2.19.15](https://github.com/quintype/native-components/compare/v2.19.14...v2.19.15) (2022-04-12)
+
+### [2.19.14](https://github.com/quintype/native-components/compare/v2.19.7...v2.19.14) (2022-04-04)
+
+
+### Bug Fixes
+
+* **story-cards:** Adds missing translations, fixes text overflow issue by adding multiline ([#179](https://github.com/quintype/native-components/issues/179)) ([93ab137](https://github.com/quintype/native-components/commit/93ab1372fad312b653e5d6d6992d625d217c9455))
+
+### [2.19.12](https://github.com/quintype/native-components/compare/v2.19.11...v2.19.12) (2022-02-08)
+
 ### [2.19.11](https://github.com/quintype/native-components/compare/v2.19.9...v2.19.11) (2022-01-24)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quintype/native-components",
-  "version": "2.20.1-temp-fast-image-constraint.1",
+  "version": "2.20.2",
   "description": "",
   "main": "src/index.js",
   "scripts": {
@@ -17,24 +17,23 @@
     "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-pdf": "^5.1.4",
-    "react-native-share": "^3.7.0",
     "react-native-render-html": "^4.2.3",
+    "react-native-share": "^8.1.0",
     "react-native-vector-icons": "^7.0.0",
-    "react-native-webview": "^10.6.0",
     "rn-fetch-blob": "^0.10.16"
   },
   "peerDependencies": {
     "@react-navigation/native": ">=5.7.3",
     "lodash": ">=4.17.20",
-    "react": ">=16.13.1",
-    "react-native": ">=0.63.2",
+    "react": ">=17.0.2",
+    "react-native": ">=0.67.5",
     "react-native-fast-image": ">=8.3.2",
     "react-native-pdf": ">=6.2.0",
-    "react-native-webview": ">=10.6.0",
+    "react-native-webview": ">=11.0.0",
     "rn-fetch-blob": ">=0.12.0"
   },
   "devDependencies": {
@@ -54,11 +53,11 @@
     "husky": "^4.2.5",
     "jest": "^26.4.0",
     "metro-react-native-babel-preset": "^0.62.0",
-    "react": "^16.13.1",
-    "react-native": ">=0.63.2",
+    "react": "17.0.2",
+    "react-native": "0.67.4",
     "react-native-device-info": "^5.6.5",
     "react-native-gesture-handler": "^1.9.0",
-    "react-native-svg": "^12.1.0",
+    "react-native-svg": "^12.3.0",
     "react-navigation-hooks": "^1.1.0",
     "react-test-renderer": "16.13.1"
   },

package/src/components/AuthorRow/index.js

@@ -1,13 +1,13 @@
-import PropTypes from "prop-types";
-import React, { useContext } from "react";
-import { View } from "react-native";
-import Icon from "react-native-vector-icons/FontAwesome";
-import { ResponsiveImage, Text } from "../index";
-import { ActionText } from "../ActionText/ActionText";
+import PropTypes from 'prop-types';
+import React, { useContext } from 'react';
+import { View } from 'react-native';
+import Icon from 'react-native-vector-icons/FontAwesome';
+import { ResponsiveImage, Text } from '../index';
+import { ActionText } from '../ActionText/ActionText';
 
-import { authorRowStyleSheet } from "./styles";
-import { AppTheme } from "../../utils";
-import { COMP_CONTENT_CONSTANTS } from "../../constants/component-constants/content-constants/constants";
+import { authorRowStyleSheet } from './styles';
+import { AppTheme } from '../../utils';
+import { COMP_CONTENT_CONSTANTS } from '../../constants/component-constants/content-constants/constants';
 
 export const AuthorRow = ({
   authors,
@@ -18,7 +18,7 @@ export const AuthorRow = ({
   disablePress,
 }) => {
   const { theme } = useContext(AppTheme);
-  const { COLORS, translate } = theme;
+  const { COLORS, translate, enableReadTimeOnStoryScreen } = theme;
   const styles = authorRowStyleSheet(theme);
 
   return (
@@ -33,10 +33,10 @@ export const AuthorRow = ({
               style={styles.imageBlock}
               testID={COMP_CONTENT_CONSTANTS.authorImage}
             >
-              {author?.["avatar-s3-key"] ? (
+              {author?.['avatar-s3-key'] ? (
                 <ResponsiveImage
                   source={{
-                    uri: `${cdn}/${author?.["avatar-s3-key"]}`,
+                    uri: `${cdn}/${author?.['avatar-s3-key']}`,
                   }}
                   style={styles.avatarImage}
                   imageWidth={50}
@@ -70,11 +70,13 @@ export const AuthorRow = ({
           </View>
         );
       })}
-      {readtime ? (
+      {enableReadTimeOnStoryScreen && readtime ? (
         <View style={styles.readtimeComponent}>
-          <Text style={styles.readtime}>{`|  ${readtime} ${translate(
-            "min read"
-          )}`}</Text>
+          <Text style={styles.readtime}>
+            {`|  ${readtime} ${translate(
+              'min read',
+            )}`}
+          </Text>
         </View>
       ) : null}
     </View>

package/src/components/CollectionCard/index.js

@@ -17,17 +17,21 @@ export const CollectionCard = ({
   onStoryPress,
   offset,
   horizontalPadding,
-  initialOffset /* Number of items to load on first load */,
+  initialOffset, /* Number of items to load on first load */
+  hideCollectionTitle,
 }) => {
   const sliceLimit = offset || initialOffset || 5;
   const primaryStory = !isEmpty(stories) && get(stories, [0, 'story'], stories[0]);
   return (
     <>
+      {!hideCollectionTitle
+      && (
       <CollectionTitle
         title={collectionName}
         onPress={onCollectionPress}
         horizontalPadding={horizontalPadding}
       />
+      )}
       <PrimaryStoryCard
         onPress={() => {
           !isEmpty(stories) && onStoryPress(primaryStory);
@@ -62,6 +66,7 @@ CollectionCard.propTypes = {
   onStoryPress: PropTypes.func,
   offset: PropTypes.number,
   horizontalPadding: PropTypes.number,
+  hideCollectionTitle: PropTypes.bool,
 };
 
 CollectionCard.defaultProps = {

package/src/components/CollectionCardNew/index.js

@@ -19,18 +19,21 @@ const CollectionCardNewBase = ({
   collectionTestID,
   offset,
   horizontalPadding,
-  initialOffset /* Number of items to load on first load */,
+  initialOffset, /* Number of items to load on first load */
+  hideCollectionTitle,
 }) => {
   const sliceLimit = offset || initialOffset || 5;
   const primaryStory = !isEmpty(stories) && get(stories, [0, 'story'], stories[0]);
 
   return (
     <>
+      {!hideCollectionTitle && (
       <CollectionTitleNew
         title={collectionName}
         onPress={onCollectionPress}
         horizontalPadding={horizontalPadding}
       />
+      )}
       <PrimaryStoryCardNew
         collectionTestID={collectionTestID}
         onPress={() => {
@@ -71,6 +74,7 @@ CollectionCardNewBase.propTypes = {
   onStoryPress: PropTypes.func,
   collectionTestID: PropTypes.string,
   horizontalPadding: PropTypes.number,
+  hideCollectionTitle: PropTypes.bool,
 };
 
 CollectionCardNewBase.defaultProps = {

package/src/components/CollectionTitleNew/styles.js

@@ -13,7 +13,6 @@ export const collectionTitleStyles = (appThemeContext) => {
     },
     title: {
       fontSize: FONT_SIZE.h3,
-      fontWeight: 'bold',
       color: COLORS.BRAND_5,
     },
   });

package/src/components/JSEmbedElement/index.js

@@ -81,7 +81,9 @@ export const JSEmbedElement = (props) => {
     <View testID="embed-js">
       <WebView
         ref={webViewRef}
-        style={{ width, height, flex: 0 }}
+        style={{
+          width, height, flex: 0, opacity: 0.99,
+        }}
         automaticallyAdjustContentInsets={false}
         scrollEnabled={false}
         onMessage={handleOnMessage}

package/src/components/PDFReader/styles.js

@@ -43,5 +43,6 @@ export const pdfStyles = (COLORS, FONT_SIZE, DARK_MODE) => StyleSheet.create({
     width: '20%',
     justifyContent: 'center',
     alignItems: 'center',
+    margin : 10
   },
 });

package/src/components/PrimaryStoryCard/index.js

@@ -2,9 +2,7 @@ import { throttle } from 'lodash';
 import get from 'lodash/get';
 import PropTypes from 'prop-types';
 import React, { useContext } from 'react';
-import {
-  StyleSheet, TouchableOpacity, View,
-} from 'react-native';
+import { StyleSheet, TouchableOpacity, View } from 'react-native';
 import Icon from 'react-native-vector-icons/FontAwesome';
 import {
   AppTheme,
@@ -15,7 +13,10 @@ import {
 import { getStoryHeadline } from '../../utils/story';
 import { ResponsiveImage, Text } from '../index';
 import { storyStyles } from './styles';
-import { COMP_GENERAL_CONSTANTS } from '../../constants/component-constants/general-constants/constants';
+import {
+  COMP_GENERAL_CONSTANTS,
+  COMP_CONTENT_CONSTANTS,
+} from '../../constants/component-constants';
 
 export const PrimaryStoryCard = (props) => {
   const { story = {} } = props;
@@ -23,7 +24,13 @@ export const PrimaryStoryCard = (props) => {
 
   const translate = get(theme, ['translate'], (word) => word);
 
-  const { COLORS, FONT_SIZE, locale } = theme || {};
+  const {
+    COLORS,
+    FONT_SIZE,
+    locale,
+    reverseTimeAdverbPosition,
+    enableReadTimeOnStoryCards,
+  } = theme || {};
 
   const DATE_FORMAT = 'd MMM, yyyy';
 
@@ -43,7 +50,9 @@ export const PrimaryStoryCard = (props) => {
 
   const name = get(story.authors, [0, 'name']);
   const authorName = name ? `${translate('By')} ${name} | ` : '';
-  const readTime = story['read-time'] ? `${story['read-time']} ${translate('min read')}` : '';
+  const readTime = enableReadTimeOnStoryCards && story['read-time']
+    ? `${story['read-time']} ${translate('min read')}`
+    : '';
 
   const throttledOnpress = throttle(props.onPress, 1000);
 
@@ -100,13 +109,15 @@ export const PrimaryStoryCard = (props) => {
         style={autorStyle}
         numberOfLines={2}
         // TODO: Add corrected testID here
+        testID={COMP_CONTENT_CONSTANTS.authorName}
       >
-        {authorName +
-          getTimeForStoryCards(
-            story["published-at"],
+        {authorName
+          + getTimeForStoryCards(
+            story['published-at'],
             DATE_FORMAT,
             locale,
-            translate
+            translate,
+            reverseTimeAdverbPosition,
           )}
       </Text>
       <Text

package/src/components/PrimaryStoryCardNew/index.js

@@ -1,25 +1,35 @@
-import { get, throttle } from "lodash";
-import PropTypes from "prop-types";
-import React, { useContext, memo } from "react";
-import { StyleSheet, TouchableOpacity, View } from "react-native";
-import Icon from "react-native-vector-icons/FontAwesome";
+import { get, throttle } from 'lodash';
+import PropTypes from 'prop-types';
+import React, { useContext, memo } from 'react';
+import { StyleSheet, TouchableOpacity, View } from 'react-native';
+import Icon from 'react-native-vector-icons/FontAwesome';
 import {
   AppTheme,
   getImageMetadata,
   getImageSlug,
   getTimeForStoryCards,
-} from "../../utils";
-import { getStoryHeadline } from "../../utils/story";
-import { ResponsiveImage, Text } from "../index";
-import { storyStyles } from "./styles";
-import { COMP_GENERAL_CONSTANTS } from "../../constants/component-constants/general-constants/constants";
+} from '../../utils';
+import { getStoryHeadline } from '../../utils/story';
+import { ResponsiveImage, Text } from '../index';
+import { storyStyles } from './styles';
+import {
+  COMP_GENERAL_CONSTANTS,
+  COMP_CONTENT_CONSTANTS,
+} from '../../constants/component-constants';
 
 const PrimaryStoryCardNewBase = (props) => {
   const { story = {} } = props;
   const { theme } = useContext(AppTheme);
-  const { COLORS, FONT_SIZE, locale, DARK_MODE } = theme || {};
+  const {
+    COLORS,
+    FONT_SIZE,
+    locale,
+    DARK_MODE,
+    reverseTimeAdverbPosition,
+    enableReadTimeOnStoryCards,
+  } = theme || {};
 
-  const translate = get(theme, ["translate"], (word) => word);
+  const translate = get(theme, ['translate'], (word) => word);
 
   const styles = storyStyles(COLORS, FONT_SIZE, DARK_MODE);
   const containerStyle = StyleSheet.flatten([
@@ -35,16 +45,16 @@ const PrimaryStoryCardNewBase = (props) => {
     props.timestampStyle,
   ]);
 
-  const DATE_FORMAT = "d MMM, yyyy";
-  const readTime = story["read-time"]
-    ? `${story["read-time"]} ${translate("min read")} · `
-    : "";
+  const DATE_FORMAT = 'd MMM, yyyy';
+  const readTime = enableReadTimeOnStoryCards && story['read-time']
+    ? `${story['read-time']} ${translate('min read')} · `
+    : '';
 
   const throttledOnpress = throttle(props.onPress, 1000);
 
   const showIcon = (name) => (
     <View style={styles.storyType}>
-      <Icon name={name} size={22} color={COLORS.BRAND_BLACK} />
+      <Icon name={name} size={22} color={COLORS.MONO7} />
     </View>
   );
 
@@ -55,14 +65,14 @@ const PrimaryStoryCardNewBase = (props) => {
     </View>
   );
   const showStoryType = () => {
-    switch (story["story-template"]) {
-      case "text":
+    switch (story['story-template']) {
+      case 'text':
         return null;
-      case "photo":
-        return showIcon("photo");
-      case "video":
-        return showIcon("play");
-      case "live-blog":
+      case 'photo':
+        return showIcon('photo');
+      case 'video':
+        return showIcon('play');
+      case 'live-blog':
         return showLiveBlogIcon();
       default:
         null;
@@ -98,14 +108,15 @@ const PrimaryStoryCardNewBase = (props) => {
           <Text
             style={timestampStyle}
             numberOfLines={2}
-            // TODO: Add corrected testID here
+            testID={COMP_CONTENT_CONSTANTS.publishedDate}
           >
-            {readTime +
-              getTimeForStoryCards(
-                story["published-at"],
+            {readTime
+              + getTimeForStoryCards(
+                story['published-at'],
                 DATE_FORMAT,
                 locale,
-                translate
+                translate,
+                reverseTimeAdverbPosition,
               )}
           </Text>
         </View>
@@ -127,7 +138,7 @@ PrimaryStoryCardNewBase.propTypes = {
 };
 
 PrimaryStoryCardNewBase.defaultProps = {
-  cdn: "",
+  cdn: '',
   horizontalPadding: 12,
 };
 

package/src/components/SecondaryStoryCard/index.js

@@ -20,13 +20,21 @@ import {
 import { getStoryHeadline } from '../../utils/story';
 import { ResponsiveImage, Text } from '../index';
 import { secStoryCardStyles } from './styles';
-import { COMP_GENERAL_CONSTANTS } from '../../constants/component-constants/general-constants/constants';
+import {
+  COMP_GENERAL_CONSTANTS,
+  COMP_CONTENT_CONSTANTS,
+} from '../../constants/component-constants';
 
 export const SecondaryStoryCard = (props) => {
   const { theme } = useContext(AppTheme);
   const translate = get(theme, ['translate'], (word) => word);
 
-  const { locale, COLORS } = theme;
+  const {
+    locale,
+    COLORS,
+    reverseTimeAdverbPosition,
+    enableReadTimeOnStoryCards,
+  } = theme;
   const styles = secStoryCardStyles(theme);
   const { story = {} } = props;
 
@@ -45,13 +53,12 @@ export const SecondaryStoryCard = (props) => {
     props.dateTextStyle,
   ]);
   const iconStyles = StyleSheet.flatten([styles.iconStyles, props.iconStyle]);
-  const authorTextContainerStyle = StyleSheet.flatten([
-    styles.authorTextContainer,
-    props.authorTextContainer,
-  ]);
+
   const name = get(story.authors, [0, 'name']);
   const authorName = name ? `${translate('By')} ${name} | ` : '';
-  const readTime = story['read-time'] ? `${story['read-time']} ${translate('min read')}` : '';
+  const readTime = enableReadTimeOnStoryCards && story['read-time']
+    ? `${story['read-time']} ${translate('min read')}`
+    : '';
 
   const throttledOnpress = throttle(props.onPress, 1000);
 
@@ -119,14 +126,15 @@ export const SecondaryStoryCard = (props) => {
           <Text
             style={authorTextStyle}
             numberOfLines={2}
-            // TODO: Add corrected testID here
+            testID={COMP_CONTENT_CONSTANTS.authorName}
           >
-            {authorName +
-              getTimeForStoryCards(
-                story["published-at"],
+            {authorName
+              + getTimeForStoryCards(
+                story['published-at'],
                 DATE_FORMAT,
                 locale,
-                translate
+                translate,
+                reverseTimeAdverbPosition,
               )}
           </Text>
           <View style={iconStyles}>{props.iconComponent}</View>

package/src/components/SecondaryStoryCardNew/index.js

@@ -1,32 +1,40 @@
-import { get, throttle } from "lodash";
-import PropTypes from "prop-types";
-import React, { useContext, memo } from "react";
+import { get, throttle } from 'lodash';
+import PropTypes from 'prop-types';
+import React, { useContext, memo } from 'react';
 import {
-  I18nManager,
   StyleSheet,
   TouchableOpacity,
   View,
   TextStyle,
   TouchableOpacityProps,
-} from "react-native";
-import Icon from "react-native-vector-icons/FontAwesome";
+} from 'react-native';
+import Icon from 'react-native-vector-icons/FontAwesome';
 import {
   AppTheme,
   getImageMetadata,
   getImageSlug,
   getTimeForStoryCards,
-} from "../../utils";
-import { getStoryHeadline } from "../../utils/story";
-import { ResponsiveImage, Text } from "../index";
-import { storyStyles } from "./styles";
-import { COMP_GENERAL_CONSTANTS } from "../../constants/component-constants/general-constants/constants";
+} from '../../utils';
+import { getStoryHeadline } from '../../utils/story';
+import { ResponsiveImage, Text } from '../index';
+import { storyStyles } from './styles';
+import {
+  COMP_GENERAL_CONSTANTS,
+  COMP_CONTENT_CONSTANTS,
+} from '../../constants/component-constants';
 
 const SecondaryStoryCardNewBase = (props) => {
   const { story = {} } = props;
   const { theme } = useContext(AppTheme);
-  const { locale, DARK_MODE, COLORS } = theme;
+  const {
+    locale,
+    DARK_MODE,
+    COLORS,
+    reverseTimeAdverbPosition,
+    enableReadTimeOnStoryCards,
+  } = theme;
 
-  const translate = get(theme, ["translate"], (word) => word);
+  const translate = get(theme, ['translate'], (word) => word);
 
   const styles = storyStyles(theme, DARK_MODE);
   const containerStyle = StyleSheet.flatten([
@@ -42,10 +50,10 @@ const SecondaryStoryCardNewBase = (props) => {
     props.timestampStyle,
   ]);
 
-  const DATE_FORMAT = "d MMM, yyyy";
-  const readTime = story["read-time"]
-    ? `${story["read-time"]} ${translate("min read")} · `
-    : "";
+  const DATE_FORMAT = 'd MMM, yyyy';
+  const readTime = enableReadTimeOnStoryCards && story['read-time']
+    ? `${story['read-time']} ${translate('min read')} · `
+    : '';
 
   const throttledOnpress = throttle(props.onPress, 1000);
 
@@ -63,14 +71,14 @@ const SecondaryStoryCardNewBase = (props) => {
   );
 
   const showStoryType = () => {
-    switch (story["story-template"]) {
-      case "text":
+    switch (story['story-template']) {
+      case 'text':
         return null;
-      case "photo":
-        return showIcon("photo");
-      case "video":
-        return showIcon("play");
-      case "live-blog":
+      case 'photo':
+        return showIcon('photo');
+      case 'video':
+        return showIcon('play');
+      case 'live-blog':
         return showLiveBlogIcon();
       default:
         null;
@@ -86,8 +94,8 @@ const SecondaryStoryCardNewBase = (props) => {
     >
       <ResponsiveImage
         metaData={getImageMetadata(story)}
-        slug={getImageSlug(story) || ""}
-        cdn={props.cdn || ""}
+        slug={getImageSlug(story) || ''}
+        cdn={props.cdn || ''}
         imageWidth={props.imageWidth}
       >
         <View style={styles.storyTypeContainer}>{showStoryType()}</View>
@@ -106,13 +114,15 @@ const SecondaryStoryCardNewBase = (props) => {
           style={timestampStyle}
           numberOfLines={2}
           // TODO: Add corrected testID here
+          testID={COMP_CONTENT_CONSTANTS.publishedDate}
         >
-          {readTime +
-            getTimeForStoryCards(
-              story["published-at"],
+          {readTime
+            + getTimeForStoryCards(
+              story['published-at'],
               DATE_FORMAT,
               locale,
-              translate
+              translate,
+              reverseTimeAdverbPosition,
             )}
         </Text>
       </View>
@@ -127,13 +137,12 @@ SecondaryStoryCardNewBase.propTypes = TouchableOpacityProps && {
   headlineStyle: TextStyle,
   timestampStyle: TextStyle,
   story: PropTypes.any.isRequired,
-  collectionTestID: PropTypes.string,
   iconComponent: PropTypes.element,
   horizontalPadding: PropTypes.number,
 };
 
 SecondaryStoryCardNewBase.defaultProps = {
-  cdn: "",
+  cdn: '',
   horizontalPadding: 12,
 };
 

package/src/components/ShareButton/index.js

@@ -1,28 +1,29 @@
-import React, { useContext, memo } from "react";
-import { TouchableOpacity } from "react-native";
-import PropTypes from "prop-types";
-import Icon from "react-native-vector-icons/Ionicons";
-import Share from "react-native-share";
-import { AppTheme } from "../../utils";
-import { shareButtonStyles } from "./styles";
-import { getStoryHeadline } from "../../utils/story";
-import { COMP_GENERAL_CONSTANTS } from "../../constants/component-constants";
+import React, { useContext, memo } from 'react';
+import { TouchableOpacity } from 'react-native';
+import PropTypes from 'prop-types';
+import Icon from 'react-native-vector-icons/Ionicons';
+import Share from 'react-native-share';
+import { AppTheme } from '../../utils';
+import { shareButtonStyles } from './styles';
+import { getStoryHeadline } from '../../utils/story';
+import { COMP_GENERAL_CONSTANTS } from '../../constants/component-constants';
 
 const ShareButtonBase = (props) => {
   const { theme } = useContext(AppTheme);
   const styles = shareButtonStyles(theme);
-  const { story, type = "story", slug } = props;
+  const { enableShareOnStoryCards } = theme;
+  const { story, type = 'story', slug } = props;
 
   const getShareURL = () => {
     const { url } = story || {};
     switch (type) {
-      case "story":
+      case 'story':
         return url;
-      case "card":
+      case 'card':
         return `${url}${slug}`;
-      case "image":
+      case 'image':
         return `${url}${slug}`;
-      case "attachment":
+      case 'attachment':
         return slug;
       default:
         return url || slug;
@@ -35,7 +36,11 @@ const ShareButtonBase = (props) => {
       Share.open({
         message: `${getStoryHeadline(story)} |  ${shareURL}`,
         title: getStoryHeadline(story),
-      });
+      })
+        .then(() => {})
+        .catch((err) => {
+          err && console.log(err);
+        });
     }
   };
 
@@ -43,14 +48,14 @@ const ShareButtonBase = (props) => {
     return null;
   }
 
-  return (
+  return enableShareOnStoryCards ? (
     <TouchableOpacity
       onPress={share}
       testID={COMP_GENERAL_CONSTANTS.shareButtonTouch}
     >
       <Icon style={styles.iconStyle} name="share-social-outline" size={20} />
     </TouchableOpacity>
-  );
+  ) : null;
 };
 
 ShareButtonBase.propTypes = {

package/src/components/SlideshowStoryCard/styles.js

@@ -1,5 +1,5 @@
 import { StyleSheet, Dimensions } from 'react-native';
-
+import { COMP_GENERAL_CONSTANTS }  from '../../constants/component-constants/general-constants/constants'
 const { width } = Dimensions.get('window');
 
 export const slideshowStoryCardStyles = ({ COLORS }) => {
@@ -21,7 +21,8 @@ export const slideshowStoryCardStyles = ({ COLORS }) => {
       flexDirection: 'column',
     },
     attributionText: {
-      color: COLORS.BRAND_BLACK
+      color: COLORS.BRAND_BLACK,
+      textAlign : COMP_GENERAL_CONSTANTS.textAlignment
     }
   })
 }

package/src/components/Story/index.js

@@ -47,7 +47,7 @@ const getLiveBlogTimeStamp = (card, DATE_FORMAT, share, styles, locale) => {
 
 /* Mutate the data during access check to limit the content shown */
 const mutateDataBeforeAccess = (item, storyHasAccess) => {
-  if (isStoryFree(item)) {
+  if (isStoryFree(item) === 0 || storyHasAccess === 'granted') {
     return item;
   }
   if (storyHasAccess !== 'loading' && storyHasAccess === 'granted') {
@@ -55,7 +55,7 @@ const mutateDataBeforeAccess = (item, storyHasAccess) => {
   }
   /* The following steps are necessary to keep argument mutation at bay */
   const firstCardObject = get(item, ['cards', 0], {});
-  const firstCardElement = get(firstCardObject, ['story-elements', 0], {});
+  const firstCardElement = get(firstCardObject, !STORY_TYPES.VIDEO_STORY && ['story-elements', 0], {});
 
   return {
     ...item,
@@ -119,8 +119,11 @@ const getStoryCards = (
     )}
     {/* Skip first card if it's a listicle */}
 
-    {source.length > 1 && isMiddleIndexOfArray(index, source) && getAd(true)}
-    {/* ^ Requesting Ad if there are multiple cards. Sending param true for mid-content ad */}
+    {source.length > (storyType === STORY_TYPES.VIDEO_STORY ? 2 : 1)
+      && isMiddleIndexOfArray(index, source)
+      && getAd(true)}
+    {/* ^ Requesting mid-content-ad if there are > 1 card
+      (> 2 cards in case of video story since the 1st card gets rendered in header). */}
 
     {(card['story-elements'] || []).map((storyElement, index, source) => {
       /* Skip the first video element for video story */
@@ -129,10 +132,12 @@ const getStoryCards = (
       return (
         <>
           {cards.length === 1
-              && source.length > 1
-              && isMiddleIndexOfArray(index, source)
-              && getAd(true)}
-          {/* ^ Requesting Ad if there's just one card but multiple elements. Sending param true for mid-content ad */}
+            && source.length > (storyType === STORY_TYPES.VIDEO_STORY ? 2 : 1)
+            && isMiddleIndexOfArray(index, source)
+            && getAd(true)}
+          {/* ^ In the case of a story having just 1 card,
+            requesting mid-content-Ad if there are > 1 story-elements in that card
+            (> 2 story-elements in case of video story since the 1st story-element gets rendered in header). */}
 
           <StoryContent
             testID={contentTestID}
@@ -194,9 +199,8 @@ export const Story = ({
 
   const shouldShowComments = () => {
     if (!enableFbComments) return null;
-
     if (
-      isStoryFree(story)
+      isStoryFree(story) === 0
       || (storyHasAccess !== 'loading' && storyHasAccess === 'granted')
     ) {
       return (

package/src/components/StoryHeader/index.js

@@ -69,8 +69,10 @@ export const StoryHeader = (props) => {
   const { story } = props;
   const sectionData = get(story, ['sections', 0], {});
   const { theme } = useContext(AppTheme);
-  const { COLORS, CAN_COPY_TEXT, locale } = theme;
-  const styles = storyHeaderStyles(COLORS);
+  const {
+    COLORS, CAN_COPY_TEXT, locale, FONT_FAMILY,
+  } = theme;
+  const styles = storyHeaderStyles(COLORS, FONT_FAMILY);
   const imgCaption = story['hero-image-caption'];
   const attri = story['hero-image-attribution'];
   const imgAttribution = imgCaption && attri ? ` | ${attri}` : attri;

package/src/components/StoryHeader/styles.js

@@ -1,6 +1,6 @@
 import { StyleSheet } from 'react-native';
 
-export const storyHeaderStyles = (COLORS) => StyleSheet.create({
+export const storyHeaderStyles = (COLORS, FONT_FAMILY) => StyleSheet.create({
   tagStyle: {
     padding: 10,
     backgroundColor: COLORS.BRAND_7,
@@ -29,10 +29,12 @@ export const storyHeaderStyles = (COLORS) => StyleSheet.create({
     padding: 10,
     paddingBottom: 0,
     color: COLORS.BRAND_BLACK,
+    fontFamily: FONT_FAMILY.secondary,
     opacity: 0.8,
   },
   attributionStyle: {
     color: COLORS.BRAND_BLACK,
+    fontFamily: FONT_FAMILY.secondary,
     opacity: 0.8,
   },
   captionContainerStyle: {

package/src/components/StoryImage/styles.js

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

package/src/components/StoryText/styles.js

@@ -1,4 +1,5 @@
 import { StyleSheet } from 'react-native';
+import { COMP_GENERAL_CONSTANTS } from '../../constants/component-constants/general-constants/constants';
 
 export const storyTextStyles = (COLORS, FONT_SIZE) => StyleSheet.create({
   container: {
@@ -8,5 +9,6 @@ export const storyTextStyles = (COLORS, FONT_SIZE) => StyleSheet.create({
     fontSize: FONT_SIZE.h2,
     lineHeight: FONT_SIZE.h2 * 1.5,
     color: COLORS.BRAND_8,
+    textAlign: COMP_GENERAL_CONSTANTS.textAlignment,
   },
 });

package/src/components/TextBigFact/index.js

@@ -40,8 +40,7 @@ export const TextBigFact = ({ text, attribution, id }) => {
       />
       {!!attribution && (
         <Text style={styles.authorText}>
-          -
-          {attribution}
+          {`- ${attribution}`}
         </Text>
       )}
     </View>

package/src/components/TextBigFact/styles.js

@@ -1,4 +1,5 @@
 import { StyleSheet } from 'react-native';
+import { COMP_GENERAL_CONSTANTS } from '../../constants/component-constants/general-constants/constants';
 
 export const bigTextStyles = (COLORS, FONT_SIZE, DARK_MODE) => StyleSheet.create({
   container: {
@@ -11,10 +12,12 @@ export const bigTextStyles = (COLORS, FONT_SIZE, DARK_MODE) => StyleSheet.create
     color: DARK_MODE ? COLORS.BRAND_BLACK : COLORS.BRAND_WHITE,
     lineHeight: FONT_SIZE.h1 * 1.3,
     marginVertical: 10,
+    textAlign: COMP_GENERAL_CONSTANTS.textAlignment,
   },
   authorText: {
     fontSize: FONT_SIZE.h5,
     color: DARK_MODE ? COLORS.BRAND_BLACK : COLORS.BRAND_WHITE,
     lineHeight: FONT_SIZE.h5 * 1.3,
+    textAlign: COMP_GENERAL_CONSTANTS.textAlignment,
   },
 });

package/src/components/TextBlockQuote/index.js

@@ -26,8 +26,10 @@ export const TextBlockQuote = ({ text, attribution }) => {
 
   return (
     <View testID="text-block-quote" style={styles.container}>
-      <Icon name="quote-left" size={46} color={DARK_MODE ? COLORS.BRAND_BLACK : COLORS.BRAND_WHITE} />
-      <HTML
+      <View style={styles.topBorderContainer}>
+        <Icon name="quote-left" size={46} color={DARK_MODE ? COLORS.BRAND_BLACK : COLORS.BRAND_WHITE} />
+      </View>
+     <HTML
         alterData={alterQuoteData}
         html={text}
         textSelectable={CAN_COPY_TEXT}
@@ -44,8 +46,7 @@ export const TextBlockQuote = ({ text, attribution }) => {
       />
       {!!attribution && (
       <Text style={styles.authorText}>
-        -
-        {attribution}
+       {`- ${attribution}`}
       </Text>
       )}
     </View>

package/src/components/TextBlockQuote/styles.js

@@ -1,4 +1,5 @@
 import { StyleSheet } from 'react-native';
+import { COMP_GENERAL_CONSTANTS } from '../../constants/component-constants/general-constants/constants';
 
 export const blockQuoteTextStyles = (FONT_SIZE, COLORS, DARK_MODE) => StyleSheet.create({
   container: {
@@ -11,10 +12,17 @@ export const blockQuoteTextStyles = (FONT_SIZE, COLORS, DARK_MODE) => StyleSheet
     color: DARK_MODE ? COLORS.BRAND_BLACK : COLORS.BRAND_WHITE,
     lineHeight: FONT_SIZE.h1 * 1.3,
     marginVertical: 10,
+    textAlign: COMP_GENERAL_CONSTANTS.textAlignment,
   },
   authorText: {
     fontSize: FONT_SIZE.h5,
     color: DARK_MODE ? COLORS.BRAND_BLACK : COLORS.BRAND_WHITE,
     lineHeight: FONT_SIZE.h5 * 1.3,
+    textAlign: COMP_GENERAL_CONSTANTS.textAlignment,
+  },
+  topBorderContainer: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    marginBottom: 8,
   },
 });

package/src/components/TextBlurb/styles.js

@@ -1,4 +1,5 @@
 import { StyleSheet } from 'react-native';
+import { COMP_GENERAL_CONSTANTS }  from '../../constants/component-constants/general-constants/constants'
 
 export const textBlurbStyles = (FONT_SIZE) => StyleSheet.create({
   container: {
@@ -9,5 +10,6 @@ export const textBlurbStyles = (FONT_SIZE) => StyleSheet.create({
   blurbText: {
     fontSize: FONT_SIZE.h3,
     lineHeight: FONT_SIZE.h3 * 1.3,
+    textAlign : COMP_GENERAL_CONSTANTS.textAlignment
   },
 });

package/src/components/TextQuote/styles.js

@@ -1,4 +1,5 @@
 import { StyleSheet } from 'react-native';
+import { COMP_GENERAL_CONSTANTS } from '../../constants/component-constants/general-constants/constants';
 
 export const textQuoteStyles = (COLORS, FONT_SIZE) => StyleSheet.create({
   container: {
@@ -19,14 +20,15 @@ export const textQuoteStyles = (COLORS, FONT_SIZE) => StyleSheet.create({
     fontSize: FONT_SIZE.h1,
     lineHeight: FONT_SIZE.h1 * 1.3,
     color: COLORS.BRAND_BLACK,
-    opacity: 0.9
+    opacity: 0.9,
+    textAlign: COMP_GENERAL_CONSTANTS.textAlignment,
   },
   attributionText: {
     fontSize: FONT_SIZE.h3,
     lineHeight: FONT_SIZE.h3 * 1.3,
     color: COLORS.BRAND_BLACK,
     alignItems: 'flex-end',
-    textAlign: 'right',
+    textAlign: COMP_GENERAL_CONSTANTS.textAlignment,
   },
   quoteTopBorder: {
     backgroundColor: COLORS.BRAND_1,
@@ -43,5 +45,6 @@ export const textQuoteStyles = (COLORS, FONT_SIZE) => StyleSheet.create({
     marginVertical: 10,
     alignSelf: 'flex-end',
     flexDirection: 'row',
+    width: '100%',
   },
 });

package/src/components/TextSummary/styles.js

@@ -1,4 +1,5 @@
 import { StyleSheet } from 'react-native';
+import { COMP_GENERAL_CONSTANTS }  from '../../constants/component-constants/general-constants/constants'
 
 export const textSummaryStyles = (FONT_SIZE, COLORS) => StyleSheet.create({
   container: {
@@ -14,6 +15,7 @@ export const textSummaryStyles = (FONT_SIZE, COLORS) => StyleSheet.create({
     color: COLORS.BRAND_6,
     fontSize: FONT_SIZE.h2,
     lineHeight: FONT_SIZE.h2 * 1.3,
+    textAlign: COMP_GENERAL_CONSTANTS.textAlignment
   },
   summaryText: {
     color: COLORS.BRAND_1,

package/src/components/YouTubePlayer/index.js

@@ -2,17 +2,12 @@ import PropTypes from "prop-types";
 import React from "react";
 import { View, Dimensions } from "react-native";
 import { WebView } from "react-native-webview";
-import { getYoutubeVideoID } from "../../utils";
 
 export const YouTubePlayer = ({ card = {} }) => {
-  const ytURL = card.url;
-  if (!ytURL) return null;
+  const ytEmbedURL = card['embed-url'];
+  if (!ytEmbedURL) return null;
 
   const windowWidth = Dimensions.get("window").width;
-
-  const ytVideoID = getYoutubeVideoID(ytURL);
-  const ytEmbedURL = `https://www.youtube.com/embed/${ytVideoID}`;
-
   const styles = webviewStyles(windowWidth);
 
   return (
@@ -36,6 +31,7 @@ const webviewStyles = (windowWidth) => {
     },
     container: {
       flex: 1,
+      marginVertical: 10,
     },
   };
 };

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

@@ -1,3 +1,5 @@
+import { I18nManager } from 'react-native';
+
 export const COMP_GENERAL_CONSTANTS = {
   secondaryStoryCard: "COMP_GENERAL_SECONDARY_STORY",
   primaryStoryCard: "COMP_GENERAL_PRIMARY_STORY",
@@ -21,4 +23,5 @@ export const COMP_GENERAL_CONSTANTS = {
   headerLogoTouch: "COMP_GENERAL_HEADER_LOGO_TOUCH",
   radioButtonTouch: "COMP_GENERAL_RADIO",
   shareButtonTouch: "COMP_GENERAL_SHARE",
+  textAlignment: I18nManager.isRTL ? "left" : "auto",
 };

package/src/utils/parseUtils.js

@@ -1,12 +1,3 @@
 export function stripHTML(text) {
   return text?.replace(/<[^>]*>?/gm, '');
 }
-
-export function getYoutubeVideoID(url) {
-  const regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|&v=)([^#&?]*).*/;
-  const match = url.match(regExp);
-
-  return (match && match[2].length === 11)
-    ? match[2]
-    : null;
-}

package/src/utils/story.js

@@ -7,10 +7,14 @@ import get from 'lodash/get';
  */
 
 export const isStoryFree = (story = {}) => {
-  if (!('access' in story)) {
-    return true;
+  switch (story.access) {
+    case 'login':
+      return 1;
+    case 'subscription':
+      return 2;
+    default:
+      return 0;
   }
-  return story.access === 'public' || Object.is(story.access, null);
 };
 
 /**

package/src/utils/timeUtils.js

@@ -1,9 +1,9 @@
-import { formatDistanceToNow, differenceInMinutes, format as dateFormat } from 'date-fns';
+import { formatDistanceToNowStrict, differenceInMinutes, format as dateFormat } from 'date-fns';
 import * as dateFNSlocale from 'date-fns/locale';
 
 export function getTimeAgo(date) {
   if (date) {
-    return formatDistanceToNow(new Date(date));
+    return formatDistanceToNowStrict(new Date(date));
   }
   return '';
 }
@@ -15,14 +15,23 @@ export function getTimeInFormat(date, format, localTime) {
   return '';
 }
 
-export const getTimeForStoryCards = (date, format, localTime, translate) => {
+export const getTimeForStoryCards = (
+  date,
+  format,
+  localTime,
+  translate,
+  reverseTimeAdverbPosition = false,
+) => {
   if (date) {
     const currentDate = new Date();
     const dateToFormat = new Date(date);
     const locale = dateFNSlocale[localTime];
     const distanceInMinutes = differenceInMinutes(currentDate, dateToFormat);
     if (distanceInMinutes <= 1440) {
-      return `${translate("published")} ${formatDistanceToNow(dateToFormat, { locale })} ${translate("ago")}`;
+      const timeDistance = formatDistanceToNowStrict(dateToFormat, { locale });
+      return reverseTimeAdverbPosition
+        ? `${translate('ago')} ${timeDistance}`
+        : `${timeDistance} ${translate('ago')}`;
     }
     return dateFormat(dateToFormat, format, { locale });
   }