Merge pull request #655 from AppQuality/fix-poster

Fix-poster

Author: cannarocks

src/features/api/index.ts

@@ -745,6 +745,7 @@ export type GetCampaignsByCidUxApiResponse = /** status 200 OK */ {
     video?: {
       url: string;
       streamUrl: string;
+      poster?: string;
       start: number;
       end: number;
       description?: string;

src/pages/Campaign/useWidgets/Experience/widgets/Insights/HighlightCard.tsx

@@ -61,6 +61,7 @@ const HighlightCard = ({
   videoCount,
   index,
   insight,
+  poster,
   onClick,
 }: {
   video: NonNullable<
@@ -69,6 +70,7 @@ const HighlightCard = ({
   videoCount: number;
   index: number;
   insight: NonNullable<GetCampaignsByCidUxApiResponse['findings']>[number];
+  poster?: string;
   onClick?: () => void;
 }) => {
   const { t } = useTranslation();
@@ -78,18 +80,27 @@ const HighlightCard = ({
       <SpecialCard.Header>
         <CardThumb>
           <VideoPlayIcon />
-          <Player>
-            <video src={`${video.url}#t=0.5`}>
-              <track kind="captions" />
-            </video>
-          </Player>
+          {poster && poster !== '' ? (
+            <img src={poster} alt={video.description} />
+          ) : (
+            <Player>
+              <video src={`${video.url}#t=0.5`}>
+                <track kind="captions" />
+              </video>
+            </Player>
+          )}
         </CardThumb>
         <SpecialCard.Header.Label>
           <Trans i18nKey="__CAMPAIGN_PAGE_INSIGHTS_VIDEO_PART_NUMBER_LABEL">
             Highlight {{ index: index + 1 }} of {{ video_count: videoCount }}
           </Trans>
         </SpecialCard.Header.Label>
-        <SpecialCard.Header.Title>
+        <SpecialCard.Header.Title
+          style={{
+            whiteSpace: 'normal',
+            wordBreak: 'break-word',
+          }}
+        >
           {`”${video.description}”`}
         </SpecialCard.Header.Title>
       </SpecialCard.Header>

src/pages/Campaign/useWidgets/Experience/widgets/Insights/Lightbox.tsx

@@ -100,7 +100,14 @@ const InsightLightbox = ({
         {hideDetails === false && (
           <Lightbox.Body.Details>
             <div>{getSeverityTag(insight.severity)}</div>
-            <XL isBold style={{ margin: `${appTheme.space.xs} 0` }}>
+            <XL
+              isBold
+              style={{
+                margin: `${appTheme.space.xs} 0`,
+                whiteSpace: 'normal',
+                wordBreak: 'break-word',
+              }}
+            >
               “{items[`${currentIndex}`].description}“
             </XL>
             <MD style={{ color: appTheme.palette.grey[600] }}>

src/pages/Campaign/useWidgets/Experience/widgets/Insights/index.tsx

@@ -221,6 +221,9 @@ export const Insights = ({
                               index={index}
                               insight={insight}
                               videoCount={insight.video?.length || 0}
+                              {...(videoPart.poster && {
+                                poster: videoPart.poster,
+                              })}
                             />
                           </Col>
                         ))}
@@ -281,6 +284,9 @@ export const Insights = ({
                               index={index + 1}
                               insight={insight}
                               videoCount={insight.video?.length || 0}
+                              {...(videoPart.poster && {
+                                poster: videoPart.poster,
+                              })}
                             />
                           </Col>
                         ))}