@quintype/native-components 2.20.26-beta.1 → 2.20.27

package/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 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.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,26 +4,7 @@
 
 `$ npm install @quintype/native-components --save`
 
-## 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
+### Linking
 
 This library has both js only as well as native components. Please check the instructions for the respective components for more details.
 

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/jest-setup.js

@@ -2,6 +2,11 @@ jest.mock('@react-navigation/native', () => ({
   useNavigation: () => jest.fn(),
 }));
 
+jest.mock('rn-fetch-blob', () => ({
+  DocumentDir: () => { },
+  polyfill: () => { },
+}));
+
 jest.mock('react-native-device-info', () => ({
   DocumentDir: () => { },
   polyfill: () => { },

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@quintype/native-components",
-  "version": "2.20.26-beta.1",
+  "version": "2.20.27",
   "description": "",
   "main": "src/index.js",
   "scripts": {
     "test": "jest --detectOpenHandles",
     "lint": "npx eslint './src/**/*.{js,jsx}'",
-    "lint:ci": "npx eslint $(git diff --pretty='' --diff-filter=d --name-only origin/master..HEAD -- '*.js' '*.jsx') ./start.js"
+    "lint:ci": "npx eslint $(git diff --pretty='' --diff-filter=d --name-only origin/master..HEAD -- '*.js' '*.jsx') ./start.js",
+    "prepublishOnly": "./bin-dev-scripts/standard-version-release.sh"
   },
   "dependencies": {
     "atob": "^2.1.2",
@@ -19,26 +20,27 @@
     "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-render-html": "^4.2.3",
-    "react-native-share": "^8.1.0"
+    "react-native-share": "^8.1.0",
+    "rn-fetch-blob": "^0.10.16"
   },
   "peerDependencies": {
-    "@react-navigation/native": ">=6.1.17",
+    "@react-navigation/native": ">=5.7.3",
     "lodash": ">=4.17.20",
     "react": ">=17.0.2",
     "react-native": ">=0.67.5",
     "react-native-fast-image": ">=8.3.2",
-    "react-native-pdf": ">=6.7.4",
-    "react-native-blob-util": ">=6.7.4",
+    "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-linear-gradient": "^2.8.3"
+    "react-native-vector-icons": "^10.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.11.1",
     "@babel/runtime": "^7.11.2",
     "@react-native-community/eslint-config": "^2.0.0",
+    "@react-navigation/native": "^5.7.1",
     "@testing-library/jest-native": "^3.4.3",
     "@testing-library/react-native": "^7.1.0",
     "babel-jest": "^26.3.0",
@@ -51,9 +53,10 @@
     "husky": "^4.2.5",
     "jest": "^26.4.0",
     "metro-react-native-babel-preset": "^0.62.0",
-    "react": "18.2.0",
-    "react-native": "0.71.17",
+    "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.3.0",
     "react-navigation-hooks": "^1.1.0",
     "react-test-renderer": "16.13.1"
@@ -62,6 +65,7 @@
     "preset": "react-native",
     "setupFilesAfterEnv": [
       "./jest-setup.js",
+      "./node_modules/react-native-gesture-handler/jestSetup.js",
       "@testing-library/jest-native/extend-expect"
     ],
     "moduleNameMapper": {

package/src/components/References/index.js

@@ -1,7 +1,8 @@
 import { get } from 'lodash';
 import PropTypes from 'prop-types';
 import React, { useContext } from 'react';
-import { Linking, View, TouchableOpacity } from 'react-native';
+import { Linking, View } from 'react-native';
+import { TouchableOpacity } from 'react-native-gesture-handler';
 import { AppTheme } from '../../utils';
 import { Text } from '../Text';
 import { styles } from './styles';

package/src/components/Story/index.js

@@ -14,8 +14,6 @@ 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}`;
@@ -79,7 +77,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)}
 
@@ -109,6 +107,7 @@ 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}
@@ -145,15 +144,15 @@ export const Story = ({
   storyHasAccess = 'loading',
   currentLayout,
   getAd,
-  showWall,
-  userObjectLength,
-  numberOfVisibleStoryCard,
-  linkedStories
 }) => {
   const { theme } = useContext(AppTheme);
-  const { COLORS, FONT_SIZE, locale, DARK_MODE } = theme;
+  const { COLORS, FONT_SIZE, locale } = 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)
@@ -182,21 +181,12 @@ export const Story = ({
     return null;
   };
 
-  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>
-    );
-  };
+  useEffect(() => {
+    checkStoryAccess(story);
+  }, []);
 
   return (
     <>
-    <View>
       <StoryHeader
         firstVideoElement={firstVideoElement}
         testID={headerTestID}
@@ -206,8 +196,6 @@ export const Story = ({
         onSectionPress={onSectionPress}
       />
 
-
-
       {getAd()}
 
       {getStoryCards(
@@ -231,13 +219,7 @@ export const Story = ({
         locale,
       )}
 
-      {(!(isStoryFree(story) === 0 || storyHasAccess === "granted") && showWall) && <View style={styles.overlay} >
-        <GradientView />
-        </View>
-      }
-      </View>
-      {accessComponent(story, storyHasAccess, showWall)}
-
+      {accessComponent(story, storyHasAccess)}
 
       {shouldShowComments()}
 

package/src/components/Story/styles.js

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

package/src/components/StoryImage/index.js

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import React, { useContext } from 'react';
-import { View, TouchableOpacity } from 'react-native';
+import { View } from 'react-native';
+import { TouchableOpacity } from 'react-native-gesture-handler';
 import { ShareIcon } from '../../Icons/ShareIcon';
 import { AppTheme, getScreenPercentageWidth, stripHTML } from '../../utils';
 import { Text } from '../index';

package/src/components/StorySlideshow/index.js

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import React, { useContext, useRef, useState } from 'react';
-import { TouchableOpacity, View, FlatList } from 'react-native';
+import { TouchableOpacity, View } from 'react-native';
+import { FlatList } from 'react-native-gesture-handler';
 import Icon from 'react-native-vector-icons/AntDesign';
 import { AppTheme } from '../../utils';
 import { SlideshowStoryCard } from '../SlideshowStoryCard';

package/src/components/Table/index.js

@@ -1,6 +1,7 @@
 import React, { useContext } from 'react';
-import { View , ScrollView } from 'react-native';
+import { View } from 'react-native';
 import get from 'lodash/get';
+import { ScrollView } from 'react-native-gesture-handler';
 import { formatData } from '../../utils/tableUtils';
 import { tableStyles } from './styles';
 import { Text } from '../index';

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,6 +2,7 @@ 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,51 +42,21 @@ export const getFirstVideoElement = (cards) => cards
         || (type === 'jsembed' && subtype === 'dailymotion-video'),
   ) || {};
 
-export const mutateDataBeforeAccess = (item, storyHasAccess, visibleCardCountForBlockedStories) => {
+export const mutateDataBeforeAccess = (item, storyHasAccess) => {
   if (isStoryFree(item) === 0 || storyHasAccess === 'granted') {
     return item;
   }
   if (storyHasAccess !== 'loading' && storyHasAccess === 'granted') {
     return item;
   }
-  const firstCardObject = get(item, ['cards', 2], {});
+  /* The following steps are necessary to keep argument mutation at bay */
+  const firstCardObject = get(item, ['cards', 0], {});
   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: visibleContentsForBlockedStory,
+      cards: [{ ...firstCardObject, 'story-elements': [firstCardElement] }],
     },
-    showBlockingWall
   };
 };