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

package/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 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.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/bin-dev-scripts/standard-version-release.sh

@@ -1,15 +1,15 @@
-#!/bin/bash -e
+# #!/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,12 +1,13 @@
 {
   "name": "@quintype/native-components",
-  "version": "2.20.26",
+  "version": "2.20.28-beta.0",
   "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",
@@ -22,7 +23,8 @@
     "react-native-pdf": "^5.1.4",
     "react-native-render-html": "^4.2.3",
     "react-native-share": "^8.1.0",
-    "rn-fetch-blob": "^0.10.16"
+    "rn-fetch-blob": "^0.10.16",
+    "react-native-star-rating-widget": "^1.7.3"
   },
   "peerDependencies": {
     "@react-navigation/native": ">=5.7.3",
@@ -33,8 +35,7 @@
     "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",

package/src/components/Rating/index.js

@@ -0,0 +1,44 @@
+import PropTypes from "prop-types";
+import React, { useContext } from "react";
+import { View } from "react-native";
+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}
+          >
+            {reviewTitle}
+          </Text>}
+          {ratingValue && <View style={styles.child}>
+            <Text
+              style={styles.ratingLable}
+            >
+              {`${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,23 @@
+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,
+    fontWeight: "700",
+    lineHeight: 24,
+    fontFamily: FONT_FAMILY.primary,
+    color: COLORS.BRAND_BLACK,
+    marginBottom:7
+  },
+  child: { display: "flex", flexDirection: "row", alignItems: "center"},
+  ratingLabel: {
+    fontSize: FONT_SIZE.h2,
+    fontWeight: "700",
+    lineHeight: 24,
+    fontFamily: FONT_FAMILY.secondary,
+    color: COLORS.BRAND_BLACK,
+  },
+  starContainer: { marginLeft: 10 },
+  starStyle: { marginHorizontal: 0 }
+});

package/src/components/SecondaryStoryCardNew/index.js

@@ -9,6 +9,7 @@ import {
   TouchableOpacityProps,
 } from 'react-native';
 import Icon from 'react-native-vector-icons/FontAwesome';
+import MaterialIcon from 'react-native-vector-icons/MaterialCommunityIcons'
 import {
   AppTheme,
   getImageMetadata,
@@ -74,6 +75,12 @@ const SecondaryStoryCardNewBase = (props) => {
     </View>
   );
 
+  const showMaterialIcon = (name) => (
+    <View style={styles.storyType}>
+      <MaterialIcon name={name} size={14} color={COLORS.MONO7}/>
+    </View>
+  )
+
   const showStoryType = () => {
     switch (story['story-template']) {
       case 'text':
@@ -84,6 +91,8 @@ const SecondaryStoryCardNewBase = (props) => {
         return showIcon('play');
       case 'live-blog':
         return showLiveBlogIcon();
+      case 'review':
+        return showMaterialIcon('star-face')
       default:
         null;
     }

package/src/components/Story/index.js

@@ -15,8 +15,6 @@ import { storyStyles } from './styles';
 import { isStoryFree, mutateDataBeforeAccess, getFirstVideoElement } from '../../utils/story';
 import { isMiddleIndexOfArray } from '../../utils/arrayUtils';
 
-
-
 const getLiveBlogTimeStamp = (card, DATE_FORMAT, share, styles, locale) => {
   const slug = `?cardId=${card.id}`;
   return (
@@ -78,9 +76,8 @@ const getStoryCards = (
   currentLayout,
   getAd,
   locale,
-) => cards.map((card, index, source) => {
-  console.log('risi - vstf', card, source)
- return  <View key={card?.id}>
+) => cards.map((card, index, source) => (
+  <View key={card?.id}>
     {isLiveBlog
         && getLiveBlogTimeStamp(card, DATE_FORMAT, share, styles, locale)}
 
@@ -110,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}
@@ -126,7 +124,7 @@ const getStoryCards = (
       );
     })}
   </View>
-});
+));
 
 export const Story = ({
   cdn,
@@ -189,7 +187,6 @@ export const Story = ({
 
   return (
     <>
-    <View>
       <StoryHeader
         firstVideoElement={firstVideoElement}
         testID={headerTestID}
@@ -221,10 +218,6 @@ export const Story = ({
         getAd,
         locale,
       )}
-      <View style={styles.overlay} />
-      </View>
-
-
 
       {accessComponent(story, storyHasAccess)}
 

package/src/components/Story/styles.js

@@ -37,13 +37,4 @@ export const storyStyles = (COLORS, FONT_SIZE) => StyleSheet.create({
     color: COLORS.BRAND_1,
     fontSize: FONT_SIZE.title,
   },
-  overlay: {
-    position: 'absolute',
-    bottom: -10,
-    left: 0,
-    right: 0,
-    height: 180, // Adjust the height as needed
-    backgroundColor: 'rgba(150, 0, 0, 0.2)',
-    marginHorizontal:10
-  },
 });

package/src/components/StoryHeader/index.js

@@ -18,6 +18,7 @@ import { storyHeaderStyles } from './styles';
 import { COMP_CONTENT_CONSTANTS } from '../../constants/component-constants/content-constants/constants';
 
 import { DailyMotionPlayer } from '../DailyMotionPlayer';
+import { RatingLayout } from '../Rating';
 const getHeroImage = (cdn, story) => {
   const imageSlug = story['hero-image-s3-key'];
   if (!imageSlug) return null;
@@ -73,7 +74,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) {
@@ -128,6 +130,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/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

@@ -50,35 +50,13 @@ export const mutateDataBeforeAccess = (item, storyHasAccess) => {
     return item;
   }
   /* The following steps are necessary to keep argument mutation at bay */
-  // console.log('riteshh - ittem',  item.cards)
-  const firstCardObject = get(item, ['cards', 2], {});
+  const firstCardObject = get(item, ['cards', 0], {});
   const firstCardElement = get(firstCardObject, !STORY_TYPES.VIDEO_STORY && ['story-elements', 0], {});
-  let visibleContentsForBlockedStory = [];
-  let textStoryFound = false;
-  if(item.cards && item.cards.length > 0){
-    for(let i = 0; i < Math.min(item.cards.length, 2); i++){
-      let storyElement = [];
-      for(let j=0; j<item.cards[i]['story-elements'].length; j++){
-        let tempStoryElement = item.cards[i]['story-elements'][j];
-        if(tempStoryElement?.type !== 'text'){
-          storyElement.push(tempStoryElement);
-        } else {
-          textStoryFound = true;
-          storyElement.push(tempStoryElement);
-          break;
-        }
-      }
-      // console.log('risi - temp - item', item.cards[i])
-      visibleContentsForBlockedStory.push({...item.cards[i],'story-elements' : storyElement});
-      if(textStoryFound) break;
-    }
-  }
-
 
   return {
     ...item,
     ...{
-      cards: visibleContentsForBlockedStory,
+      cards: [{ ...firstCardObject, 'story-elements': [firstCardElement] }],
     },
   };
 };