🐛 Fix campaign issues #2352 (#2353)

* 🎨 improvements to campaign * 🐛 fix grid video * 🎨 hide native controls for now * 🐛 fix fullwidth video issue * 🎨 cleanup code a bit
equinor · Jun 7, 2024 · 875845c · 875845c
1 parent 7b426be
commit 875845c
Show file tree

Hide file tree

Showing 10 changed files with 87 additions and 32 deletions.
diff --git a/web/components/src/VideoJsPlayer/index.tsx b/web/components/src/VideoJsPlayer/index.tsx
@@ -3,7 +3,7 @@ import { useEffect, HTMLProps, useState, useCallback } from 'react'
 import videojs from 'video.js'
 import Player from 'video.js/dist/types/player'
 //import 'video.js/dist/video-js.css'
-import { play_circle, pause_circle, play } from '@equinor/eds-icons'
+import { play_circle, pause_circle } from '@equinor/eds-icons'
 import { Icon } from '@equinor/eds-core-react'
 import MediaError from 'video.js/dist/types/media-error'
 import useVideojsAnalytics from '../../../lib/hooks/useVideojsAnalytics'
@@ -84,6 +84,15 @@ export const VideoJS: React.FC<VideoJSProps> = ({
         controlBar: {
           fullscreenToggle: allowFullScreen,
         },
+        html5: {
+          //nativeControlsForTouch: true,
+          useDevicePixelRatio: true,
+          limitRenditionByPlayerDimensions: false,
+          hls: {
+            useDevicePixelRatio: true,
+            limitRenditionByPlayerDimensions: false,
+          },
+        },
         ...rest,
       },
       () => {
@@ -115,7 +124,7 @@ export const VideoJS: React.FC<VideoJSProps> = ({
   return (
     <>
       {/* eslint-disable-next-line */}
-      <video ref={measuredRef} className="vjs-envis video-js vjs-fill" poster={poster}></video>
+      <video ref={measuredRef} className={`vjs-envis video-js vjs-fill`} poster={poster}></video>
       {showPlayButton && (
         <button
           className={`${

diff --git a/web/pageComponents/shared/VideoPlayer.tsx b/web/pageComponents/shared/VideoPlayer.tsx
@@ -23,7 +23,7 @@ const DynamicVideoJsComponent = dynamic<React.ComponentProps<typeof VideoJS>>(
   },
 )
 
-const getHeightWidth = (aspectRatio: string, height?: number) => {
+const getHeightWidth = (aspectRatio: string, height?: number | string) => {
   if (!height) {
     switch (aspectRatio) {
       case VideoPlayerRatios['1:1']:
@@ -32,9 +32,13 @@ const getHeightWidth = (aspectRatio: string, height?: number) => {
         return 'h-[56.25%] w-full'
       case VideoPlayerRatios['9:16']:
         return 'h-[569px] w-[320px] sm:h-[600px] sm:w-[337.5px]'
+      case VideoPlayerRatios['3:2']:
+        return 'w-full h-full'
+      default:
+        return 'w-full h-full'
     }
   }
-  return `h-[${height}px] w-full`
+  return `h-[${typeof height == 'string' ? height : `${height}px`}] w-full`
 }
 
 const getThumbnailRatio = (aspectRatio: string, height?: number) => {
@@ -54,6 +58,16 @@ const getThumbnailRatio = (aspectRatio: string, height?: number) => {
         width: 600,
         height: 600,
       }
+    case VideoPlayerRatios['3:2']:
+      return {
+        width: 800,
+        height: 533,
+      }
+    case VideoPlayerRatios['16:10']:
+      return {
+        width: 800,
+        height: 500,
+      }
     default:
       return {
         width: 0,
@@ -66,23 +80,27 @@ type VideoJsComponentType = {
   video: VideoType
   videoControls: VideoControlsType
   designOptions: VideoDesignOptionsType
-  height?: string
   useFillMode?: boolean
+  className?: string
 }
 
 export const VideoJsComponent = ({
   video,
   videoControls,
   designOptions,
   useFillMode = false,
+  className = '',
 }: VideoJsComponentType) => {
   const { width: w, height: h } = getThumbnailRatio(designOptions.aspectRatio)
   return (
     <figure
-      className={`
+      className={twMerge(
+        `
         ${useFillMode ? 'h-full w-full' : getHeightWidth(designOptions.aspectRatio, designOptions.height)} 
         [&video::-webkit-media-controls-fullscreen-button]:hidden relative mx-auto my-0
-        `}
+        `,
+        className,
+      )}
     >
       <DynamicVideoJsComponent
         className="object-cover"

diff --git a/web/sections/Grid/Grid.tsx b/web/sections/Grid/Grid.tsx
@@ -25,6 +25,7 @@ const Grid = forwardRef<HTMLElement, GridProps>(function Grid({ data, anchor, cl
         break
     }
   }
+
   return (
     <section
       ref={ref}
@@ -35,7 +36,8 @@ const Grid = forwardRef<HTMLElement, GridProps>(function Grid({ data, anchor, cl
         mx-auto
         w-full
         grid
-        auto-rows-[minmax(auto,_600px)]
+        auto-rows-max
+        lg:auto-rows-[minmax(auto,600px)]
         grid-cols-1
         lg:grid-cols-3
         `,

diff --git a/web/sections/Grid/GridTextBlock.tsx b/web/sections/Grid/GridTextBlock.tsx
@@ -25,18 +25,16 @@ const GridTextBlock = ({ data, className }: GridTextBlockProps) => {
 
   return (
     <div
-      className={`relative w-full h-full flex flex-col items-center ${
-        action ? 'pt-16 justify-between' : 'py-12 justify-center'
-      } ${theme !== null ? backgroundUtility : ''} `}
+      className={`p-10 lg:p-12 relative w-full h-full flex flex-col items-center justify-center overflow-y-auto ${
+        theme !== null ? backgroundUtility : ''
+      }`}
     >
       {content && (
-        <div className="px-12 flex flex-col justify-center">
+        <div className="flex flex-col justify-center">
           <Blocks
             value={content}
             proseClassName="prose-campaign"
-            className={`flex flex-col gap-sm ${action ? '' : ''} ${contentClassNames} ${
-              theme !== null ? textUtility : ''
-            }`}
+            className={`flex flex-col gap-sm ${contentClassNames} ${theme !== null ? textUtility : ''}`}
           />
         </div>
       )}

diff --git a/web/sections/Grid/Span2And1.tsx b/web/sections/Grid/Span2And1.tsx
@@ -1,6 +1,7 @@
 import { twMerge } from 'tailwind-merge'
 import { Fragment, HTMLAttributes, forwardRef } from 'react'
 import { mapGridContent } from './mapGridContent'
+import { useMediaQuery } from '../../lib/hooks/useMediaQuery'
 
 export type Span2And1Props = {
   data: any
@@ -9,18 +10,30 @@ export type Span2And1Props = {
 
 const Span2And1 = forwardRef<HTMLDivElement, Span2And1Props>(function Span2And1({ data, className = '' }, ref) {
   const { singleColumn, span2, alignSpan2Right = false } = data
+  const minHeight = 'min-h-[350px]'
+  const commonStyling = `${minHeight}`
   const borderStyling = `border border-moss-green-60`
+  const isMobile = useMediaQuery(`(max-width: 800px)`)
+
   return (
     <Fragment ref={ref}>
       {alignSpan2Right ? (
         <>
-          <div className={twMerge(borderStyling, className)}>{mapGridContent(singleColumn?.content)}</div>
-          <div className={twMerge(`lg:col-span-2 ${borderStyling}`, className)}>{mapGridContent(span2?.content)}</div>
+          <div className={twMerge(commonStyling, borderStyling, className)}>
+            {mapGridContent(singleColumn?.content, 'span2and1', isMobile)}
+          </div>
+          <div className={twMerge(`lg:col-span-2`, commonStyling, borderStyling, className)}>
+            {mapGridContent(span2?.content, 'span2and1', isMobile)}
+          </div>
         </>
       ) : (
         <>
-          <div className={twMerge(`lg:col-span-2 ${borderStyling}`, className)}>{mapGridContent(span2?.content)}</div>
-          <div className={twMerge(borderStyling, className)}>{mapGridContent(singleColumn?.content)}</div>
+          <div className={twMerge(`lg:col-span-2`, commonStyling, borderStyling, className)}>
+            {mapGridContent(span2?.content, 'span2and1', isMobile)}
+          </div>
+          <div className={twMerge(commonStyling, borderStyling, className)}>
+            {mapGridContent(singleColumn?.content, 'span2and1', isMobile)}
+          </div>
         </>
       )}
     </Fragment>

diff --git a/web/sections/Grid/Span3.tsx b/web/sections/Grid/Span3.tsx
@@ -1,27 +1,33 @@
 import { twMerge } from 'tailwind-merge'
 import { HTMLAttributes, forwardRef } from 'react'
 import { mapGridContent } from './mapGridContent'
+import { useMediaQuery } from '../../lib/hooks/useMediaQuery'
 
 export type Span3Props = {
   data: any
   className?: string
 } & HTMLAttributes<HTMLDivElement>
 
 const Span3 = forwardRef<HTMLDivElement, Span3Props>(function Span3({ data, className = '', ...rest }, ref) {
+  const isMobile = useMediaQuery(`(max-width: 800px)`)
+  const minHeight = data?.content?.type === 'videoPlayer' ? '' : 'min-h-[350px]'
+
   return (
     <div
       ref={ref}
       className={twMerge(
         `lg:col-span-3 
         w-full
         h-full
-        border border-moss-green-60
+        border
+        border-moss-green-60
+        ${minHeight}
         `,
         className,
       )}
       {...rest}
     >
-      {mapGridContent(data?.content, 'span3')}
+      {mapGridContent(data?.content, 'span3', isMobile)}
     </div>
   )
 })

diff --git a/web/sections/Grid/ThreeColumns.tsx b/web/sections/Grid/ThreeColumns.tsx
@@ -1,6 +1,7 @@
 import { twMerge } from 'tailwind-merge'
 import { Fragment, HTMLAttributes, forwardRef } from 'react'
 import { mapGridContent } from './mapGridContent'
+import { useMediaQuery } from '../../lib/hooks/useMediaQuery'
 
 export type ThreeColumnsProps = {
   data: any
@@ -13,12 +14,14 @@ const ThreeColumns = forwardRef<HTMLDivElement, ThreeColumnsProps>(function Thre
 ) {
   const { columns = [] } = data
   const borderStyling = `w-full h-full border border-moss-green-60`
+  const minHeight = 'min-h-[350px]'
+  const isMobile = useMediaQuery(`(max-width: 800px)`)
   return (
     <Fragment ref={ref}>
       {columns.map((column: any) => {
         return (
-          <div key={column?.id} className={twMerge(borderStyling, className)}>
-            {mapGridContent(column)}
+          <div key={column?.id} className={twMerge(minHeight, borderStyling, className)}>
+            {mapGridContent(column, 'threeColumns', isMobile)}
           </div>
         )
       })}

diff --git a/web/sections/Grid/mapGridContent.tsx b/web/sections/Grid/mapGridContent.tsx
@@ -6,9 +6,9 @@ import GridTextBlock from './GridTextBlock'
 import { GridTeaser } from './GridTeaser'
 import GridFigure from './GridFigure'
 
-export type RowType = 'span3' | 'span2and1' | undefined
+export type RowType = 'span3' | 'span2and1' | 'threeColumns' | undefined
 
-export const mapGridContent = (data: ComponentProps, rowType?: RowType): React.ReactNode => {
+export const mapGridContent = (data: ComponentProps, rowType?: RowType, isMobile?: boolean): React.ReactNode => {
   switch (data.type) {
     case 'gridTextBlock':
       return <GridTextBlock key={data.id} data={data as any} />
@@ -19,7 +19,14 @@ export const mapGridContent = (data: ComponentProps, rowType?: RowType): React.R
     case 'iframe':
       return <IFrame key={data.id} data={data as IFrameData} />
     case 'videoPlayer': {
-      return <VideoJsComponent key={data.id} useFillMode {...(data as VideoPlayerData)} />
+      return (
+        <VideoJsComponent
+          key={data.id}
+          {...(data as VideoPlayerData)}
+          className="h-full sm:w-full"
+          {...(!isMobile && { useFillMode: true })}
+        />
+      )
     }
     default:
       return null

diff --git a/web/styles/components/videojs.css b/web/styles/components/videojs.css
@@ -1,7 +1,4 @@
 /* Change all text and icon colors in the player. */
-.vjs-envis.video-js {
-}
-
-.vjs-envis .vjs-control-bar {
-  @apply bg-slate-80;
+.vjs-envis .vjs-big-play-button {
+  @apply bg-energy-red-100;
 }
diff --git a/web/types/types.ts b/web/types/types.ts
@@ -701,6 +701,8 @@ export type AnchorLinkData = {
 
 export enum VideoPlayerRatios {
   '16:9' = '16:9',
+  '3:2' = '3:2',
+  '16:10' = '16:10',
   '9:16' = '9:16',
   '1:1' = '1:1',
 }
@@ -722,7 +724,7 @@ export type VideoControlsType = {
 
 export type VideoDesignOptionsType = {
   aspectRatio: VideoPlayerRatios
-  height?: number
+  height?: number | string
   width?: 'normal' | 'extraWide'
   useBrandTheme?: boolean
 }