@quintype/native-components 2.20.24 → 2.20.26-beta.0

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 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.25](https://github.com/quintype/native-components/compare/v2.20.24...v2.20.25) (2024-03-14)
+
+
+### Bug Fixes
+
+* **text-clip:** Bump lineheight for HTML story-content ([91f6279](https://github.com/quintype/native-components/commit/91f6279ca2815bf48bddcf0eb03020351bde8666))
+
 ### [2.20.24](https://github.com/quintype/native-components/compare/v2.20.23...v2.20.24) (2024-03-13)
 
 ### [2.20.23](https://github.com/quintype/native-components/compare/v2.20.22...v2.20.23) (2024-03-11)

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

@@ -1,15 +1,15 @@
 #!/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.20.24",
+  "version": "2.20.26-beta.0",
   "description": "",
   "main": "src/index.js",
   "scripts": {
@@ -34,7 +34,8 @@
     "react-native-pdf": ">=6.2.0",
     "react-native-webview": ">=11.0.0",
     "rn-fetch-blob": ">=0.12.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/components/Story/index.js

@@ -14,6 +14,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}`;
@@ -77,7 +79,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)}
 
@@ -107,7 +109,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}
@@ -144,15 +145,18 @@ export const Story = ({
   storyHasAccess = 'loading',
   currentLayout,
   getAd,
+  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 = [],
     'linked-stories': linkedStories,
-  } = mutateDataBeforeAccess(story, storyHasAccess);
+  } = mutateDataBeforeAccess(story, storyHasAccess, numberOfVisibleStoryCard);
 
   const firstVideoElement = story['story-template'] === STORY_TYPES.VIDEO_STORY
     ? getFirstVideoElement(cards)
@@ -185,8 +189,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}
@@ -196,6 +220,8 @@ export const Story = ({
         onSectionPress={onSectionPress}
       />
 
+
+
       {getAd()}
 
       {getStoryCards(
@@ -219,7 +245,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,10 @@ export const storyStyles = (COLORS, FONT_SIZE) => StyleSheet.create({
     color: COLORS.BRAND_1,
     fontSize: FONT_SIZE.title,
   },
+  overlay:{
+    // backgroundColor:'red',
+    // position:'absolute',
+    // bottom:100,
+    marginTop:-220
+  }
 });

package/src/constants/renderHTML.js

@@ -21,13 +21,13 @@ export const customHTMLStyles = () => {
       marginTop: 7,
       marginBottom: 7,
       fontSize: FONT_SIZE.p1,
-      lineHeight: FONT_SIZE.p1 * 1.5,
+      lineHeight: FONT_SIZE.p1 * 1.7,
       color: COLORS.BRAND_BLACK,
       opacity: 0.85,
     },
     li: {
       fontSize: FONT_SIZE.h3,
-      lineHeight: FONT_SIZE.h3 * 1.3,
+      lineHeight: FONT_SIZE.h3 * 1.5,
       marginTop: 8,
       color: COLORS.BRAND_BLACK,
       opacity: 0.85,
@@ -50,25 +50,26 @@ export const customHTMLStyles = () => {
       marginTop: 7,
       marginBottom: 7,
       fontSize: FONT_SIZE.p1,
-      lineHeight: FONT_SIZE.p1 * 1.5,
+      lineHeight: FONT_SIZE.p1 * 1.7,
       color: COLORS.HYPERLINK_COLOR || COLORS.BRAND_BLACK,
     },
     h: {
       fontFamily: FONT_FAMILY.secondaryBold,
       fontWeight: 'normal',
-      marginTop: 16,
+      marginTop: 12,
       marginRight: 4,
+      lineHeight: FONT_SIZE.h1 * 2,
       color: COLORS.BRAND_BLACK,
       opacity: 0.85,
     },
     sup: {
       marginBottom: 16,
-      lineHeight: FONT_SIZE.p1 * 0.3,
+      lineHeight: FONT_SIZE.p1 * 0.5,
       fontSize: FONT_SIZE.p1 * 0.5,
     },
     sub: {
       marginBottom: 16,
-      lineHeight: FONT_SIZE.p1 * 0.3,
+      lineHeight: FONT_SIZE.p1 * 0.5,
       fontSize: FONT_SIZE.p1 * 0.5,
     },
   };

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

@@ -42,21 +42,52 @@ export const getFirstVideoElement = (cards) => cards
         || (type === 'jsembed' && subtype === 'dailymotion-video'),
   ) || {};
 
-export const mutateDataBeforeAccess = (item, storyHasAccess) => {
+export const mutateDataBeforeAccess = (item, storyHasAccess, visibleCardCountForBlockedStories) => {
+  console.log('risi - visibleCardCountForBlockedStories', 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;
+  // visibleCardCountForBlockedStories = 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
   };
 };