@quintype/native-components 2.21.0-beta.2 → 2.21.0-beta.3

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 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.32](https://github.com/quintype/native-components/compare/v2.20.31...v2.20.32) (2024-06-05)
+
+### [2.20.31](https://github.com/quintype/native-components/compare/v2.20.30...v2.20.31) (2024-06-04)
+
+### [2.20.30](https://github.com/quintype/native-components/compare/v2.20.29...v2.20.30) (2024-06-04)
+
+### [2.20.29](https://github.com/quintype/native-components/compare/v2.20.28...v2.20.29) (2024-06-04)
+
+### [2.20.28](https://github.com/quintype/native-components/compare/v2.20.27...v2.20.28) (2024-05-17)
+
+### [2.20.27](https://github.com/quintype/native-components/compare/v2.20.26...v2.20.27) (2024-05-17)
+
+### [2.20.26](https://github.com/quintype/native-components/compare/v2.20.25...v2.20.26) (2024-05-17)
+
 ### [2.20.25](https://github.com/quintype/native-components/compare/v2.20.24...v2.20.25) (2024-03-14)
 
 

package/README.md

@@ -4,7 +4,26 @@
 
 `$ npm install @quintype/native-components --save`
 
-### Linking
+## Creating and installing a beta version 
+
+### Publishing a version with beta tag:
+1. Add, commit and push beta changes on a new branch.
+2. Run `npm i --legacy-peer-deps` (Using **node@16.19.0**, **npm@8.19.3**) 
+3. Run `npm cache clean --force` in case the above command fails.
+4. Create a tag by running `npm version 2.21.0-beta.0` (add **\`-beta.*iteration*\`** (where ***iteration*** can just be incremented (+1) for subsequent beta-versions on the same development branch)
+5. Publish the tag by running `npm publish --tag beta`
+6. Make sure to commit and push the new beta versioning changes.
+
+### Installing a version with beta tag on host app:
+npm install @quintype/native-components@beta
+
+### Note:
+- `prePublishOnly` script that was in use before is incompatible with recent node/npm versions. Hence `standard-version-release.sh` is not used.
+- Revert `"version"` changes from `package.json` before creating PR (for merging to `master`).
+- Access all versions [here](https://www.npmjs.com/package/@quintype/native-components?activeTab=versions).
+
+
+## Linking
 
 This library has both js only as well as native components. Please check the instructions for the respective components for more details.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quintype/native-components",
-  "version": "2.21.0-beta.2",
+  "version": "2.21.0-beta.3",
   "description": "",
   "main": "src/index.js",
   "scripts": {
@@ -20,7 +20,8 @@
     "react-native-image-pan-zoom": "^2.1.12",
     "react-native-lightbox": "0.8.1",
     "react-native-render-html": "^4.2.3",
-    "react-native-share": "^8.1.0"
+    "react-native-share": "^8.1.0",
+    "react-native-star-rating-widget": "^1.7.3"
   },
   "peerDependencies": {
     "@react-navigation/native": ">=6.1.17",
@@ -31,7 +32,8 @@
     "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-vector-icons": "^10.0.0",
+    "react-native-linear-gradient": "^2.8.3"
   },
   "devDependencies": {
     "@babel/core": "^7.11.1",

package/src/Icons/FallBackIcon/index.js

@@ -1,18 +1,10 @@
-import React from "react";
-import Icon from "react-native-vector-icons/Ionicons";
-import PropTypes from "prop-types";
+import React, { useContext } from "react";
+import Icon from "react-native-vector-icons/FontAwesome";
+import { AppTheme } from "../../utils";
 
-const DEFAULT_FALLBACK_SIZE = 25;
+export const FallbackIcon = () => {
+  const { theme } = useContext(AppTheme);
+  const { COLORS } = theme;
 
-export const FallbackIcon = ({ size = DEFAULT_FALLBACK_SIZE, color }) => (
-  <Icon
-    name="images"
-    size={size}
-    color={color}
-  />
-);
-
-FallbackIcon.propTypes = {
-  size: PropTypes.number,
-  color: PropTypes.string,
+  return <Icon name="image" size={25} color={COLORS.MONO4} />;
 };

package/src/components/Html/index.js

@@ -0,0 +1,26 @@
+import { TouchableOpacity, View, I18nManager, StyleSheet, Linking } from "react-native";
+import HTML from "react-native-render-html";
+import React from "react";
+
+const CustomHtmlParser = ({ text, textStyle={}, containerStyle={} }) => {
+  const textStyles = StyleSheet.flatten([
+    textStyle,
+    {
+      writingDirection: I18nManager.isRTL ? "rtl" : "ltr",
+    },
+  ]);
+
+  return (
+      <HTML
+        html={text}
+        key={Math.random()}
+        baseFontStyle={textStyles}
+        onLinkPress={(evt, href) => {
+          Linking.openURL(href);
+        }}
+        containerStyle={containerStyle}
+      />
+  );
+};
+
+export default CustomHtmlParser;

package/src/components/Rating/index.js

@@ -0,0 +1,50 @@
+import PropTypes from 'prop-types';
+import React, { useContext } from 'react';
+import { View } from 'react-native';
+import { StarRatingDisplay } from 'react-native-star-rating-widget';
+import { Text } from '../Text';
+import { ratingStyles } from './styles';
+import { AppTheme } from '../../utils';
+
+export const RatingLayout = ({ reviewTitle, ratingValue, ratingLabel }) => {
+  const { theme } = useContext(AppTheme);
+  const {
+    COLORS, FONT_FAMILY, FONT_SIZE,
+  } = theme;
+  const styles = ratingStyles(COLORS, FONT_SIZE, FONT_FAMILY);
+
+  return (
+    <View style={styles.container}>
+      {reviewTitle && (
+      <Text
+        style={styles.reviewTitle}
+        primary
+      >
+        {reviewTitle}
+      </Text>
+      )}
+      {ratingValue && (
+      <View style={styles.child}>
+        <Text
+          style={styles.ratingLabel}
+        >
+          {`${ratingLabel}/5`}
+        </Text>
+        <StarRatingDisplay
+          rating={ratingValue}
+          starSize={FONT_SIZE.title}
+          color={COLORS.REVIEW_STAR_COLOR ?? '#F5A623'}
+          style={styles.starContiner}
+          starStyle={styles.starStyle}
+        />
+      </View>
+      )}
+    </View>
+  );
+};
+
+RatingLayout.propTypes = {
+  reviewTitle: PropTypes.string.isRequired,
+  ratingValue: PropTypes.number.isRequired,
+  ratingLabel: PropTypes.string.isRequired,
+};

package/src/components/Rating/styles.js

@@ -0,0 +1,21 @@
+import { StyleSheet } from 'react-native';
+
+export const ratingStyles = (COLORS, FONT_SIZE, FONT_FAMILY) => StyleSheet.create({
+  container: { marginLeft: 10, marginTop: 10 },
+  reviewTitle: {
+    fontSize: FONT_SIZE.h2,
+    lineHeight: 24,
+    fontFamily: FONT_FAMILY.primary,
+    color: COLORS.BRAND_BLACK,
+    marginBottom: 7,
+  },
+  child: { display: 'flex', flexDirection: 'row', alignItems: 'center' },
+  ratingLabel: {
+    fontSize: FONT_SIZE.h2,
+    lineHeight: 24,
+    fontFamily: FONT_FAMILY.secondary,
+    color: COLORS.BRAND_BLACK,
+  },
+  starContainer: { marginLeft: 10 },
+  starStyle: { marginHorizontal: 0 },
+});

package/src/components/ResponsiveImage/index.js

@@ -33,7 +33,7 @@ const ResponsiveImageBase = (props) => {
 
   const placeholderStyle = {
     ...StyleSheet.absoluteFillObject,
-    backgroundColor: CustomFallBackBackground || COLORS.MONO6,
+    backgroundColor: (CustomFallBackIcon && CustomFallBackBackground) ?? COLORS.MONO6,
     justifyContent: 'center',
     alignItems: 'center',
   };

package/src/components/Story/index.js

@@ -13,6 +13,8 @@ import { ClockIcon } from '../../Icons/ClockIcon';
 import { storyStyles } from './styles';
 import { isStoryFree, mutateDataBeforeAccess, getFirstVideoElement } from '../../utils/story';
 import { isMiddleIndexOfArray } from '../../utils/arrayUtils';
+import LinearGradient from "react-native-linear-gradient";
+import { hexToRgb } from '@quintype/native-components/src/utils/colorUtils';
 
 const getLiveBlogTimeStamp = (card, DATE_FORMAT, share, styles, locale) => {
   const slug = `?cardId=${card.id}`;
@@ -76,7 +78,7 @@ const getStoryCards = (
   getAd,
   locale,
 ) => cards.map((card, index, source) => (
-  <View key={card?.id}>
+<View key={card?.id}>
     {isLiveBlog
         && getLiveBlogTimeStamp(card, DATE_FORMAT, share, styles, locale)}
 
@@ -106,7 +108,6 @@ const getStoryCards = (
           {/* ^ 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}
             key={storyElement?.id}
@@ -143,15 +144,16 @@ export const Story = ({
   storyHasAccess = 'loading',
   currentLayout,
   getAd,
+  linkedStories,
+  showWall,
+  userObjectLength,
+  numberOfVisibleStoryCard
 }) => {
   const { theme } = useContext(AppTheme);
-  const { COLORS, FONT_SIZE, locale } = theme;
+  const { COLORS, FONT_SIZE, locale, DARK_MODE } = theme;
   const styles = storyStyles(COLORS, FONT_SIZE);
+  const cards = story?.cards ?? [];
 
-  const {
-    cards = [],
-    'linked-stories': linkedStories,
-  } = mutateDataBeforeAccess(story, storyHasAccess);
 
   const firstVideoElement = story['story-template'] === STORY_TYPES.VIDEO_STORY
     ? getFirstVideoElement(cards)
@@ -184,8 +186,28 @@ export const Story = ({
     checkStoryAccess(story);
   }, []);
 
+  useEffect(()=>{
+    if(userObjectLength){
+      checkStoryAccess(story);
+    }
+  },[userObjectLength])
+
+
+  const GradientView = () => {
+    return (
+      <LinearGradient
+        colors={[
+          DARK_MODE ? hexToRgb("#252525", 0) : hexToRgb(COLORS.BRAND_WHITE, 0),
+          DARK_MODE ? hexToRgb("#252525", 1) : hexToRgb(COLORS.BRAND_WHITE, 1),
+        ]}
+        style={{ height: 200}}
+      ></LinearGradient>
+    );
+  };
+
   return (
     <>
+    <View>
       <StoryHeader
         firstVideoElement={firstVideoElement}
         testID={headerTestID}
@@ -195,6 +217,8 @@ export const Story = ({
         onSectionPress={onSectionPress}
       />
 
+
+
       {getAd()}
 
       {getStoryCards(
@@ -218,7 +242,13 @@ export const Story = ({
         locale,
       )}
 
-      {accessComponent(story, storyHasAccess)}
+      {(!(isStoryFree(story) === 0 || storyHasAccess === "granted") && showWall) && <View style={styles.overlay} >
+        <GradientView />
+        </View>
+      }
+      </View>
+      {accessComponent(story, storyHasAccess, showWall)}
+
 
       {shouldShowComments()}
 

package/src/components/Story/styles.js

@@ -37,4 +37,7 @@ export const storyStyles = (COLORS, FONT_SIZE) => StyleSheet.create({
     color: COLORS.BRAND_1,
     fontSize: FONT_SIZE.title,
   },
+  overlay:{
+    marginTop:-220
+  }
 });

package/src/components/StoryHeader/index.js

@@ -1,7 +1,7 @@
 import get from 'lodash/get';
 import PropTypes from 'prop-types';
 import React, { useContext } from 'react';
-import { TouchableOpacity, View } from 'react-native';
+import { TouchableOpacity, View, I18nManager,StyleSheet } from 'react-native';
 import {
   getImageMetadata,
   getScreenPercentageWidth,
@@ -11,13 +11,16 @@ import {
 } from '../../utils';
 import { STORY_TYPES } from '../../utils/story-types';
 import {
-  AuthorRow, ResponsiveImage, StoryTitle, Text,
+  AuthorRow, ResponsiveImage, StoryText, StoryTitle, Text,
 } from '../index';
 import { YouTubePlayer } from '../YouTubePlayer';
 import { storyHeaderStyles } from './styles';
 import { COMP_CONTENT_CONSTANTS } from '../../constants/component-constants/content-constants/constants';
 
 import { DailyMotionPlayer } from '../DailyMotionPlayer';
+import { RatingLayout } from '../Rating';
+import  CustomHtmlParser  from './../Html/index';
+
 const getHeroImage = (cdn, story) => {
   const imageSlug = story['hero-image-s3-key'];
   if (!imageSlug) return null;
@@ -33,7 +36,8 @@ const getHeroImage = (cdn, story) => {
 };
 
 const getHeroComponent = (props) => {
-  const { story = {}, firstVideoElement, cdn } = props;
+  const { story = {},firstVideoElement, cdn } = props;
+
   switch (story['story-template']) {
     case STORY_TYPES.VIDEO_STORY: {
       if (!firstVideoElement) return null;
@@ -60,12 +64,12 @@ const getHeroComponent = (props) => {
 };
 
 export const StoryHeader = (props) => {
-  const { story } = props;
+  const { story, firstVideoElement } = props;
   const sectionData = get(story, ['sections', 0], {});
   const { theme } = useContext(AppTheme);
 
   const {
-    COLORS, locale, FONT_FAMILY, DATE_TIME_FORMAT, premiumIcon, FONT_SIZE
+    COLORS, locale, FONT_FAMILY, DATE_TIME_FORMAT, FONT_SIZE
   } = theme;
 
   const DATE_FORMAT = `${DATE_TIME_FORMAT.dateFormat} ${DATE_TIME_FORMAT.timeFormat}`;
@@ -73,7 +77,8 @@ export const StoryHeader = (props) => {
   const caption = story['hero-image-caption'];
   const attribution = story['hero-image-attribution'];
   const isPremiumStory = story['access'] === 'subscription';
-
+  const reviewTitle = story['metadata'] && story['metadata']['review-title'];
+  const reviewData = story['metadata'] && story['metadata']['review-rating'];
 
   const showAttribution = () => {
     if (!caption && !attribution) {
@@ -81,8 +86,8 @@ export const StoryHeader = (props) => {
     }
     return (
       <View style={styles.captionContainerStyle}>
-        <Text style={styles.captionStyle}>{stripHTML(caption)}</Text>
-        <Text style={styles.attributionStyle}>{stripHTML(attribution)}</Text>
+        {caption && !firstVideoElement && <CustomHtmlParser text={caption} textStyle={styles.captionStyle}/>}
+        {attribution && !firstVideoElement && <CustomHtmlParser text={attribution} textStyle={styles.attributionStyle}/>}
       </View>
     );
   };
@@ -128,6 +133,7 @@ export const StoryHeader = (props) => {
         cdn={props.cdn}
         readtime={story['read-time']}
       />
+      {reviewTitle && <RatingLayout reviewTitle={reviewTitle} ratingValue={reviewData?.value} ratingLabel={reviewData?.label}/>}
     </View>
   );
 };

package/src/components/StoryHeader/styles.js

@@ -29,7 +29,6 @@ export const storyHeaderStyles = (COLORS, FONT_FAMILY) => StyleSheet.create({
     color: COLORS.BRAND_BLACK,
     fontFamily: FONT_FAMILY.secondary,
     opacity: 0.8,
-    marginBottom: 5,
   },
   attributionStyle: {
     color: COLORS.BRAND_BLACK,

package/src/components/StoryTitle/styles.js

@@ -17,9 +17,9 @@ export const storyTitleStyles = ({ COLORS, FONT_SIZE }) => StyleSheet.create({
     marginTop: 15,
     paddingVertical: 5,
   },
-  premiumIcon : { 
-    paddingLeft:10, 
-    marginRight:-5, 
+  premiumIcon : {
+    paddingLeft:10,
+    marginRight:-5,
     borderWidth:1
   }
 });

package/src/components/YouTubePlayer/index.js

@@ -10,12 +10,50 @@ export const YouTubePlayer = ({ card = {} }) => {
   const windowWidth = Dimensions.get("window").width;
   const styles = webviewStyles(windowWidth);
 
+  const getYoutubeIframe = (ytEmbedURL) => {
+    const videoId =  ytEmbedURL.split('/').pop();
+    const width = windowWidth - 20;
+    const height = (9/16)*(windowWidth - 20);
+    const htmlContent  = `
+      <iframe 
+        width="1280" 
+        height="720" 
+        src="https://www.youtube.com/embed/${videoId}"  
+        frameborder="0" 
+        allow="accelerometer; 
+          autoplay; 
+          clipboard-write; 
+          encrypted-media; 
+          gyroscope; 
+          picture-in-picture; 
+          web-share" 
+        referrerpolicy="strict-origin-when-cross-origin" 
+        allowfullscreen
+      ></iframe>`;
+
+    return `
+    <html>
+        <head>
+            <meta name="viewport" content="width=device-width, initial-scale=1">
+            <style>
+              iframe{
+                width:${width}px;
+                height:${height}px;
+              }
+            </style>
+        </head>
+        <body>
+            ${htmlContent}
+        </body>
+    </html>`;
+  }
+
   return (
     <View style={styles.container} testID="youtube-player-id">
       <WebView
         mediaPlaybackRequiresUserAction
         style={styles.webViewContainer}
-        source={{ uri: ytEmbedURL }}
+        source={{ html: getYoutubeIframe(ytEmbedURL), baseUrl:'https://www.youtube.com'}}
         javaScriptEnabled
         domStorageEnabled
         startInLoadingState

package/src/utils/colorUtils.js

@@ -2,7 +2,6 @@ export const hexToRgb = (hex, alpha=1) => {
   let rgbCode = hex.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,(m, r, g, b) => '#' + r + r + g + g + b + b)
   .substring(1).match(/.{2}/g)
   .map(x => parseInt(x, 16));
-  console.log('risi -  color', `rgb(${rgbCode[0]}, ${rgbCode[1]}, ${rgbCode[2]}, ${alpha})`)
   return `rgba(${rgbCode[0]}, ${rgbCode[1]}, ${rgbCode[2]}, ${alpha})`;
 }
 

package/src/utils/story.js

@@ -38,25 +38,54 @@ export const getFirstVideoElement = (cards) => cards
     return acc;
   }, [])
   .find(
-    ({ type, subtype }) => type === 'youtube-video'
-        || (type === 'jsembed' && subtype === 'dailymotion-video'),
+    (ele) => ele?.type === 'youtube-video'
+        || (ele?.type === 'jsembed' && ele?.subtype === 'dailymotion-video'),
   ) || {};
 
-export const mutateDataBeforeAccess = (item, storyHasAccess) => {
+export const mutateDataBeforeAccess = (item, storyHasAccess, visibleCardCountForBlockedStories) => {
   if (isStoryFree(item) === 0 || storyHasAccess === 'granted') {
     return item;
   }
   if (storyHasAccess !== 'loading' && storyHasAccess === 'granted') {
     return item;
   }
-  /* The following steps are necessary to keep argument mutation at bay */
-  const firstCardObject = get(item, ['cards', 0], {});
+  const firstCardObject = get(item, ['cards', 2], {});
   const firstCardElement = get(firstCardObject, !STORY_TYPES.VIDEO_STORY && ['story-elements', 0], {});
+  let visibleContentsForBlockedStory = [];
+  let showBlockingWall = false;
+  let visibleStoryCount = 0;
+  if(!visibleCardCountForBlockedStories){
+    return {
+    cards: visibleContentsForBlockedStory,
+      showBlockingWall: true
+    }
+  }
+
+  if(item.cards && item.cards.length > 0){
+    for(let i = 0; i < item.cards.length; i++){
+      let storyElement = [];
+      for(let j=0; j<item.cards[i]['story-elements'].length; j++){
+        let tempStoryElement = item.cards[i]['story-elements'][j];
+        if(visibleStoryCount < visibleCardCountForBlockedStories-1){
+          storyElement.push(tempStoryElement);
+          visibleStoryCount++;
+        } else {
+          showBlockingWall = true;
+          storyElement.push(tempStoryElement);
+          break;
+        }
+      }
+
+      visibleContentsForBlockedStory.push({...item.cards[i],'story-elements' : storyElement});
+      if(showBlockingWall) break;
+    }
+  }
 
   return {
     ...item,
     ...{
-      cards: [{ ...firstCardObject, 'story-elements': [firstCardElement] }],
+      cards: visibleContentsForBlockedStory,
     },
+    showBlockingWall
   };
 };