Merge pull request #1397 from inplayer-org/improvement/asset-previews/geo-restricted-asset

Keep consistency of asset previews in case of restricted asset & FooterText component refactored

Author: Jasminna

CHANGELOG.md

@@ -2,6 +2,13 @@
 
 All notable changes to this project will be documented in this file.
 
+# [2.5.21] - 24.01.2022
+
+## Change
+
+- Styling changes in preview templates for restricted asset
+- FooterText component refactored
+
 # [2.5.20] - 21.01.2022
 
 ## Fixes

src/paywall-previews/Preview1/Preview1.tsx

@@ -1,26 +1,27 @@
 import React from 'react';
 
 // Colors
-import { AnalyticsComponent, AnalyticsEvents, AnalyticsComponentType } from '../../analytics';
 import colors from '../../theme/colors';
 
 // Types
 import Branding from '../types/branding';
 
 // Components
+import { AnalyticsComponent, AnalyticsEvents, AnalyticsComponentType } from '../../analytics';
 import FooterText from '../shared/FooterText';
+import PreviewText from '../shared/PreviewText';
 import {
   OverlayLabel,
-  RestrictedAssetContainer,
   RestrictedAssetIcon,
+  StyledRestrictedAssetContainer,
 } from '../shared/PreviewComponents';
-import PreviewText from '../shared/PreviewText';
 import {
   InPlayerPreviewBox,
   LockIcon,
   ImageHolder,
   PaywallExplain,
   InplayerWhiteLogo,
+  InplayerPremiumLabel,
   ItemDetails,
   BuyButtonWrapper,
   BuyButton,
@@ -38,10 +39,10 @@ type Props = {
   premiumContentLabel?: string;
   isRestrictedAsset?: boolean;
   isAuthenticated?: boolean;
+  restrictedMessage?: string;
 };
 
 const previewImg = 'https://assets.inplayer.com/images/preview-premium.jpg';
-const restrictedAssetImg = 'https://assets.inplayer.com/images/restricted-asset.png';
 
 const Preview1 = ({
   branding: {
@@ -61,25 +62,27 @@ const Preview1 = ({
   premiumContentLabel = 'Premium content',
   isRestrictedAsset = false,
   isAuthenticated = false,
+  restrictedMessage = 'This content is not available.',
 }: Props) => (
   <AnalyticsComponent>
     {({ pages, tracker, merchantId, ip }) => (
       <InPlayerPreviewBox className="inplayer-preview-box">
         {previewUnavailable && <OverlayLabel variant="h5">Preview not available yet</OverlayLabel>}
         <ImageHolder className="inplayer-imageholder" onClick={handleOpenModal}>
+          {isRestrictedAsset && (
+            // Call handleOpenModal here because this div element will be
+            // on the top of all image elements in case of restricted asset
+            <StyledRestrictedAssetContainer onClick={handleOpenModal}>
+              <RestrictedAssetIcon />
+              {restrictedMessage}
+            </StyledRestrictedAssetContainer>
+          )}
           <PreviewImage
             alt="coverPhoto"
             src={imageUrl}
             role="presentation"
             className="inplayer-paywall"
-            isRestrictedAsset={isRestrictedAsset}
           />
-          {isRestrictedAsset && (
-            <RestrictedAssetContainer>
-              <RestrictedAssetIcon />
-              {premiumContentLabel}
-            </RestrictedAssetContainer>
-          )}
           <PaywallExplain
             hasProtectedByLabel={hasProtectedByLabel}
             className="inplayer-paywallexplain"
@@ -102,8 +105,10 @@ const Preview1 = ({
                 InPlayer Paywall
               </a>
             </InplayerWhiteLogo>
-            <LockIcon className="inplayer-lock" />
-            <span>{!isRestrictedAsset && premiumContentLabel}</span>
+            <InplayerPremiumLabel>
+              <LockIcon className="inplayer-lock" />
+              <div>{premiumContentLabel}</div>
+            </InplayerPremiumLabel>
           </PaywallExplain>
         </ImageHolder>
         <ItemDetails className="inplayer-itemdetails">

src/paywall-previews/Preview1/styled.ts

@@ -3,6 +3,7 @@ import { ifProp } from 'styled-tools';
 import { transparentize } from 'polished';
 import { FaLock } from 'react-icons/fa';
 import colors from '../../theme/colors';
+import { RestrictedAssetContainer } from '../shared/PreviewComponents';
 
 export const InPlayerPreviewBox = styled.div`
   background: ${({ theme }) => theme.palette.background.main};
@@ -46,32 +47,25 @@ export const PaywallExplain = styled.div<PaywallExplainProps>`
   box-sizing: border-box;
   padding: 2vh 3%;
   color: ${colors.white};
-  display: ${ifProp('hasProtectedByLabel', 'block', 'none')};
+  display: ${ifProp('hasProtectedByLabel', 'flex', 'none')};
   position: absolute;
   bottom: 0;
   width: 100%;
   font-size: 13px;
   line-height: 15px;
   text-align: left;
-
-  span {
-    vertical-align: middle;
-    max-width: calc(100% - 150px);
-    display: inline-block;
-    text-align: left;
-    margin: 0;
-    position: relative;
-    font-size: 13px;
-    padding: 0;
-    line-height: 15px;
-  }
+  ${ifProp(
+    'hasProtectedByLabel',
+    css`
+      align-items: center;
+    `
+  )}
 `;
 
 export const InplayerWhiteLogo = styled.div`
   position: absolute;
   right: 3%;
   display: block;
-  margin: -4px 0 0;
   padding: 0;
   line-height: 15px;
 
@@ -87,7 +81,7 @@ export const InplayerWhiteLogo = styled.div`
     line-height: 15px;
 
     @media screen and (max-width: 600px) {
-      max-width: 73px;
+      max-width: 80px;
     }
   }
 
@@ -104,10 +98,11 @@ export const InplayerWhiteLogo = styled.div`
     margin-bottom: 2px;
     line-height: 15px;
   }
+`;
 
-  @media screen and (max-width: 476px) {
-    margin: 0px 0 0 0;
-  }
+export const InplayerPremiumLabel = styled.div`
+  display: flex;
+  align-items: center;
 `;
 
 export const ItemDetails = styled.div`
@@ -206,18 +201,11 @@ export const InplayerFooter = styled.div`
   }
 `;
 
-export const PreviewImage = styled.img<{ isRestrictedAsset?: boolean }>`
+export const PreviewImage = styled.img`
   width: 100%;
   object-fit: cover;
   object-position: 50% 50%;
   cursor: pointer;
-
-  ${({ isRestrictedAsset }) =>
-    isRestrictedAsset &&
-    css`
-      filter: brightness(0.3);
-      position: absolute;
-    `}
 `;
 
 export const LockIcon = styled(FaLock)`

src/paywall-previews/Preview2/Preview2.tsx

@@ -1,23 +1,13 @@
 import React from 'react';
-import { AnalyticsComponent, AnalyticsEvents, AnalyticsComponentType } from '../../analytics';
 
 // Colors
-import {
-  StyledPreviewBox,
-  StyledImageHolder,
-  AssetDetails,
-  PaywallDescriptionSpan,
-  BuyButtonWrapper,
-  StyledIcon,
-  Footer,
-  StyledRestrictedAssetContainer,
-} from './styled';
 import colors from '../../theme/colors';
 
 // Types
 import Branding from '../types/branding';
 
 // Components
+import { AnalyticsComponent } from '../../analytics';
 import FooterText from '../shared/FooterText';
 import PreviewText from '../shared/PreviewText';
 import {
@@ -26,6 +16,16 @@ import {
   FooterLink,
   RestrictedAssetIcon,
 } from '../shared/PreviewComponents';
+import {
+  StyledPreviewBox,
+  StyledImageHolder,
+  AssetDetails,
+  PaywallDescriptionSpan,
+  BuyButtonWrapper,
+  StyledIcon,
+  Footer,
+  StyledRestrictedAssetContainer,
+} from './styled';
 
 type Props = {
   branding?: Branding;
@@ -38,10 +38,10 @@ type Props = {
   handleOpenModal?: (e: any) => any;
   premiumContentLabel?: string;
   isAuthenticated?: boolean;
+  restrictedMessage?: string;
 };
 
 const previewImg = 'https://assets.inplayer.com/images/preview-premium.jpg';
-const restrictedAssetImg = 'https://assets.inplayer.com/images/restricted-asset.png';
 
 const Preview2 = ({
   branding: {
@@ -62,9 +62,10 @@ const Preview2 = ({
   loginFooterLabel = 'Already have access? Login with your InPlayer account',
   premiumContentLabel = 'Premium content',
   isAuthenticated = false,
+  restrictedMessage = 'This content is not available.',
 }: Props) => (
   <AnalyticsComponent>
-    {({ pages, tracker, merchantId, ip }) => (
+    {() => (
       <StyledPreviewBox
         id="preview-container"
         minHeight={minHeight}
@@ -78,16 +79,18 @@ const Preview2 = ({
           onClick={handleOpenModal}
         />
         {isRestrictedAsset && (
-          <StyledRestrictedAssetContainer>
+          // Call handleOpenModal here because this div element will be
+          // on the top of image container in case of restricted asset
+          <StyledRestrictedAssetContainer onClick={handleOpenModal}>
             <RestrictedAssetIcon />
-            This content is not available in your country
+            {restrictedMessage}
           </StyledRestrictedAssetContainer>
         )}
         <AssetDetails>
           <StyledPaywallDescription color={buttonBgColor} hasProtectedByLabel={hasProtectedByLabel}>
             <PaywallDescriptionSpan>
               <StyledIcon name="star" />
-              {!isRestrictedAsset && premiumContentLabel}
+              {premiumContentLabel}
             </PaywallDescriptionSpan>
           </StyledPaywallDescription>
           <PreviewText value={previewTitle} padding="0 0 0.5rem 0" />

src/paywall-previews/Preview2/styled.ts

@@ -65,7 +65,7 @@ export const AssetDetails = styled.div`
 `;
 
 export const PaywallDescriptionSpan = styled(DescriptionSpan)`
-  padding-bottom: 20px;
+  padding: 20px 0;
 `;
 
 export const BuyButtonWrapper = styled.div`
@@ -93,12 +93,20 @@ export const Footer = styled(PreviewFooter)`
   margin-top: 1.6em;
   text-align: left;
   padding-top: 0.5em;
+  @media screen and (max-width: 768px) {
+    text-align: center;
+  }
 `;
 
 export const StyledRestrictedAssetContainer = styled(RestrictedAssetContainer)`
+  width: 50%;
   left: 25%;
   @media screen and (max-width: 768px) {
+    width: 100%;
     left: 50%;
-    top: 30%;
+    top: 25%;
+  }
+  @media screen and (max-width: 480px) {
+    top: 20%;
   }
 `;