@quintype/native-components 2.19.15 → 2.19.18

package/CHANGELOG.md

@@ -2,6 +2,23 @@
 
 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.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)

package/package.json

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

package/src/components/PrimaryStoryCardNew/index.js

@@ -1,28 +1,30 @@
-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";
+} 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";
+} 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,
+  } = 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([
@@ -38,16 +40,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 = 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>
   );
 
@@ -58,14 +60,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;
@@ -103,12 +105,12 @@ const PrimaryStoryCardNewBase = (props) => {
             numberOfLines={2}
             testID={COMP_CONTENT_CONSTANTS.publishedDate}
           >
-            {readTime +
-              getTimeForStoryCards(
-                story["published-at"],
+            {readTime
+              + getTimeForStoryCards(
+                story['published-at'],
                 DATE_FORMAT,
                 locale,
-                translate
+                translate,
               )}
           </Text>
         </View>
@@ -130,7 +132,7 @@ PrimaryStoryCardNewBase.propTypes = {
 };
 
 PrimaryStoryCardNewBase.defaultProps = {
-  cdn: "",
+  cdn: '',
   horizontalPadding: 12,
 };
 

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,9 @@ 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 > 1 && (!STORY_TYPES.VIDEO_STORY || source.length > 2) && isMiddleIndexOfArray(index, source) && getAd(true)}
+    {/* ^ Requesting Ad if there are multiple cards. Sending param true for mid-content ad
+    If the story is from video template and have single card then not showing mid-ad */}
 
     {(card['story-elements'] || []).map((storyElement, index, source) => {
       /* Skip the first video element for video story */
@@ -194,9 +195,8 @@ export const Story = ({
 
   const shouldShowComments = () => {
     if (!enableFbComments) return null;
-
     if (
-      isStoryFree(story)
+      isStoryFree(story) === 0
       || (storyHasAccess !== 'loading' && storyHasAccess === 'granted')
     ) {
       return (

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

@@ -36,6 +36,7 @@ const webviewStyles = (windowWidth) => {
     },
     container: {
       flex: 1,
+      marginVertical: 10,
     },
   };
 };

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);
 };
 
 /**