@quintype/native-components 2.30.3 → 2.30.4

package/package.json

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

package/src/components/JSEmbedElement/index.js

@@ -108,34 +108,12 @@ export const JSEmbedElement = (props) => {
     setHeight(parseInt(event.nativeEvent.data));
   };
 
-  // Function to manually extract the base URL from an iframe src
-  const extractBaseUrlFromIframe = (iframeHtml) => {
-    const regex = /src="([^"]+)"/;  // Regex to extract src URL from iframe
-    const match = iframeHtml.match(regex);
-
-    if (match && match[1]) {
-      const srcUrl = match[1]; // The full src URL from iframe
-
-      // Manually extract the base URL (protocol + host + pathname)
-      const urlPattern = /^(https?:\/\/[^/]+(?:\/[^?]*)?)/;
-      const baseUrlMatch = srcUrl.match(urlPattern);
-
-      if (baseUrlMatch) {
-        return baseUrlMatch[1]; // Return the base URL
-      } else {
-        console.error('Invalid URL format.');
-        return null;
-      }
-    } else {
-      console.error('Iframe src not found.');
-      return null;
-    }
-  };
-
   const constructSource = () => {
+    const html = getHTMLContent(props.element['embed-js']);
+
     return {
-      html: getHTMLContent(props.element['embed-js']),
-      baseUrl: extractBaseUrlFromIframe(getDecodedContent(props.element['embed-js'])),
+      html,
+      baseUrl: props.appReferer,
     };
   };
 
@@ -220,4 +198,5 @@ JSEmbedElement.propTypes = {
     height: PropTypes.number,
     orientation: PropTypes.string,
   }),
+  appReferer: PropTypes.string,
 }; 

package/src/components/Story/index.js

@@ -79,6 +79,7 @@ const getStoryCards = (
   currentLayout,
   getAd,
   locale,
+  appReferer,
 ) => cards.map((card, index, source) => (
 <View key={card?.id}>
     {isLiveBlog
@@ -121,6 +122,7 @@ const getStoryCards = (
             story={story}
             storyType={storyType}
             currentLayout={currentLayout}
+            appReferer={appReferer}
           />
         </>
       );
@@ -152,7 +154,8 @@ export const Story = ({
   gaTrigerredTTS,
   commentData,
   commentLoader,
-  storyLayout
+  storyLayout,
+  appReferer,
 }) => {
   const { theme } = useContext(AppTheme);
   const { COLORS, FONT_SIZE, locale, DARK_MODE,translate, enableComments } = theme;
@@ -376,6 +379,7 @@ export const Story = ({
         onAuthorPress={onAuthorPress}
         onSectionPress={onSectionPress}
         storyLayout={storyLayout}
+        appReferer={appReferer}
       />
   { storyHasAccess === 'granted' && audioS3Key && (!showPlayer ?
   (<TouchableOpacity onPress={async()=>{
@@ -427,6 +431,7 @@ export const Story = ({
         currentLayout,
         getAd,
         locale,
+        appReferer,
       )}
 
       {(!(isStoryFree(story) === 0 || storyHasAccess === "granted") && showWall) && <View style={styles.overlay} >
@@ -492,4 +497,5 @@ Story.propTypes = {
   enableFbComments: PropTypes.bool,
   currentLayout: PropTypes.any,
   navigation: PropTypes.any,
+  appReferer: PropTypes.string,
 };

package/src/components/StoryContent/index.js

@@ -18,6 +18,7 @@ export const StoryContent = ({
   story,
   storyType,
   currentLayout,
+  appReferer,
 }) => {
   const textProps = {
     text: storyElement.text,
@@ -78,7 +79,7 @@ export const StoryContent = ({
         />
       );
     case STORY_ELEMENT_TYPES.YOUTUBE_VIDEO:
-      return <AllComponents.YouTubePlayer card={storyElement} />;
+      return <AllComponents.YouTubePlayer card={storyElement} appReferer={appReferer} />;
     case STORY_ELEMENT_TYPES.FILE:
       return <AllComponents.PDFReader card={storyElement} story={story} />;
     case STORY_ELEMENT_TYPES.DATA:
@@ -109,7 +110,7 @@ export const StoryContent = ({
       //   }
       //   default: break;
       // }
-      return <AllComponents.JSEmbedElement element={storyElement} currentLayout={currentLayout} />;
+      return <AllComponents.JSEmbedElement element={storyElement} currentLayout={currentLayout} appReferer={appReferer} />;
     }
     default:
       return null;
@@ -125,4 +126,5 @@ StoryContent.propTypes = {
   screenList: PropTypes.object,
   navigation: PropTypes.shape({ }),
   currentLayout: PropTypes.any,
+  appReferer: PropTypes.string,
 };

package/src/components/StoryHeader/index.js

@@ -37,7 +37,7 @@ const getHeroImage = (cdn, story) => {
 };
 
 const getHeroComponent = (props) => {
-  const { story = {},firstVideoElement, cdn } = props;
+  const { story = {},firstVideoElement, cdn, appReferer } = props;
 
   switch (story['story-template']) {
     case STORY_TYPES.VIDEO_STORY: {
@@ -51,6 +51,7 @@ const getHeroComponent = (props) => {
             <YouTubePlayer
               styles={{ container: { padding: 0 } }}
               card={firstVideoElement}
+              appReferer={appReferer}
             />
           );
         }
@@ -182,4 +183,5 @@ StoryHeader.propTypes = {
     id: PropTypes.string,
     'embed-url': PropTypes.string,
   }),
+  appReferer: PropTypes.string,
 };

package/src/components/YouTubePlayer/index.js

@@ -3,7 +3,7 @@ import React from "react";
 import { View, useWindowDimensions } from "react-native";
 import { WebView } from "react-native-webview";
 
-export const YouTubePlayer = ({ card = {} }) => {
+export const YouTubePlayer = ({ card = {}, appReferer }) => {
   const ytEmbedURL = card['embed-url'];
   if (!ytEmbedURL) return null;
 
@@ -53,7 +53,10 @@ export const YouTubePlayer = ({ card = {} }) => {
       <WebView
         mediaPlaybackRequiresUserAction
         style={styles.webViewContainer}
-        source={{ html: getYoutubeIframe(ytEmbedURL), baseUrl:'https://www.youtube.com'}}
+        source={{
+          html: getYoutubeIframe(ytEmbedURL),
+          baseUrl: appReferer,
+        }}
         javaScriptEnabled
         domStorageEnabled
         startInLoadingState
@@ -78,4 +81,5 @@ const webviewStyles = (windowWidth) => {
 
 YouTubePlayer.propTypes = {
   card: PropTypes.any.isRequired,
+  appReferer: PropTypes.string,
 };

package/src/utils/index.js

@@ -7,3 +7,4 @@ export * from './context';
 export * from './textUtils';
 export * from './testUtils';
 export * from './rtlUtil';
+export * from './refererUtils';

package/src/utils/refererUtils.js

@@ -0,0 +1,14 @@
+import { Platform } from 'react-native';
+
+/**
+ * Generates the app referer URL based on platform and bundle IDs
+ * @param {string} androidBundleId - Android package name (e.g., 'com.example.app')
+ * @param {string} iosBundleId - iOS bundle identifier (e.g., 'com.example.app.ios')
+ * @returns {string} The referer URL for the current platform
+ */
+export const getAppReferer = (androidBundleId, iosBundleId) => {
+  return Platform.select({
+    ios: `https://${iosBundleId}`,
+    android: `https://${androidBundleId}`,
+  });
+};