🎨 Video new styling #2354 (#2392)

* 🎨 update colors, size and styling on video and grid * 🎨 fix video issues * 🐛 dont show big play when no big play * 🎨 remove console * art: remove native controls
equinor · Jun 21, 2024 · a1ce98e · a1ce98e
1 parent 4c3989e
commit a1ce98e
Show file tree

Hide file tree

Showing 10 changed files with 86 additions and 62 deletions.
diff --git a/web/components/src/VideoJsPlayer/index.tsx b/web/components/src/VideoJsPlayer/index.tsx
@@ -3,8 +3,6 @@ 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 } 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'
 
@@ -38,8 +36,6 @@ export const VideoJS: React.FC<VideoJSProps> = ({
   ...rest
 }) => {
   const [player, setPlayer] = useState<Player | null>(null)
-  const [showPlayButton, setShowPlayButton] = useState(playButton)
-  const [showControls, setShowControls] = useState(controls)
   const [isPlaying, setIsPlaying] = useState(autoPlay)
 
   const measuredRef = useCallback((node: any) => {
@@ -52,8 +48,6 @@ export const VideoJS: React.FC<VideoJSProps> = ({
     if (player) {
       if (player.paused()) {
         player.play()
-        setShowPlayButton(false)
-        setShowControls(true && controls)
         setIsPlaying(true)
       } else {
         player.pause()
@@ -76,16 +70,17 @@ export const VideoJS: React.FC<VideoJSProps> = ({
         playsinline: playsInline,
         autoplay: autoPlay,
         preload: autoPlay ? 'auto' : 'none',
-        controls: showControls,
+        controls: controls ?? !autoPlay,
+        responsive: true,
         ...(!useFillMode && { aspectRatio: aspectRatio }),
-        bigPlayButton: !controls,
+        ...(useFillMode && { fill: true }),
+        bigPlayButton: playButton && !autoPlay,
         controlbar: true,
         loadingSpinner: !autoPlay,
         controlBar: {
           fullscreenToggle: allowFullScreen,
         },
         html5: {
-          //nativeControlsForTouch: true,
           useDevicePixelRatio: true,
           limitRenditionByPlayerDimensions: false,
           hls: {
@@ -106,10 +101,6 @@ export const VideoJS: React.FC<VideoJSProps> = ({
     return player
   }
 
-  useEffect(() => {
-    playButton && setShowControls(false)
-  }, [playButton])
-
   useEffect(() => {
     return () => {
       if (player && !player.isDisposed()) {
@@ -124,37 +115,45 @@ export const VideoJS: React.FC<VideoJSProps> = ({
   return (
     <>
       {/* eslint-disable-next-line */}
-      <video ref={measuredRef} className={`vjs-envis video-js vjs-fill`} poster={poster}></video>
-      {showPlayButton && (
-        <button
-          className={`${
-            useBrandTheme ? 'text-energy-red-100' : 'text-white-100'
-          } absolute inset-0 m-auto bg-transparent border-transparent cursor-pointer [&_svg]:inline [&_svg]:align-baseline`}
-          onClick={handlePlayButton}
-          aria-label={isPlaying ? 'Pause' : 'Play'}
-        >
-          <Icon
-            size={48}
-            color="currentColor"
-            style={{ opacity: useBrandTheme ? 1 : 0.8, height: 80, width: 80 }}
-            data={play_circle}
-            aria-label={isPlaying ? 'Pause icon' : 'Play icon'}
-          />
-        </button>
-      )}
-      {!showPlayButton && autoPlay && (
+      <video
+        ref={measuredRef}
+        className={`video-js vjs-layout-large vjs-fill vjs-envis ${useBrandTheme ? 'vjs-envis-brand' : ''}
+        ${playButton ? 'vjs-envis-hasPlayButton' : ''}`}
+        poster={poster}
+      ></video>
+      {!playButton && !controls && autoPlay && (
         <button
-          className="absolute bottom-0 right-0 m-auto z-10 bg-transparent border-none cursor-pointer opacity-40 text-white hover:opacity-60 md:svg"
+          className="absolute 
+          bottom-0 
+          right-0 
+          m-auto 
+          size-[48px] 
+          flex 
+          justify-center 
+          items-center
+          z-10 
+          border-none 
+          cursor-pointer 
+          focus-none
+          focus-visible:envis-outline
+          "
           onClick={handlePlayButton}
           aria-label={isPlaying ? 'Pause' : 'Play'}
         >
-          <Icon
-            size={32}
-            color="white"
-            style={{ opacity: 0.8 }}
-            data={isPlaying ? pause_circle : play_circle}
-            aria-label={isPlaying ? 'Pause icon' : 'Play icon'}
-          />
+          <div
+            className={`
+          relative
+          flex 
+          justify-center
+          items-center
+          rounded-full 
+          size-10 
+          bg-black-100/60 
+          hover:bg-black-100 
+          `}
+          >
+            <div className="text-md leading-none mt-1 text-white-100">{isPlaying ? '⏸' : '⏵'}</div>
+          </div>
         </button>
       )}
     </>

diff --git a/web/pageComponents/shared/Hero/LoopingVideo.tsx b/web/pageComponents/shared/Hero/LoopingVideo.tsx
@@ -56,6 +56,7 @@ export const LoopingVideo = ({ video }: { video: LoopingVideoData }) => {
           loop
           muted
           autoPlay
+          playButton={false}
           title={title}
           poster={thumbnailURL.src}
           src={url}

diff --git a/web/pageComponents/shared/VideoPlayer.tsx b/web/pageComponents/shared/VideoPlayer.tsx
@@ -27,13 +27,11 @@ const getHeightWidth = (aspectRatio: string, height?: number | string) => {
   if (!height) {
     switch (aspectRatio) {
       case VideoPlayerRatios['1:1']:
-        return 'h-[320px] sm:h-[320px] sm:w-[320px] md:h-[487px] md:w-[487px] lg:h-[600px] lg:w-[600px]'
+        return 'h-[320px] sm: h-[320px] sm: w-[320px] md: h-[487px] md: w-[487px] lg: h-[600px] lg: w-[600px]'
       case VideoPlayerRatios['16:9']:
         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'
     }
@@ -58,16 +56,6 @@ 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,

diff --git a/web/sections/Grid/Grid.tsx b/web/sections/Grid/Grid.tsx
@@ -30,14 +30,13 @@ const Grid = forwardRef<HTMLElement, GridProps>(function Grid({ data, anchor, cl
     <section
       ref={ref}
       className={twMerge(
-        `px-layout-md 
+        `lg:px-layout-md 
         max-w-[2200px]
         pb-page-content
         mx-auto
         w-full
         grid
         auto-rows-max
-        lg:auto-rows-[minmax(auto,600px)]
         grid-cols-1
         lg:grid-cols-3
         `,

diff --git a/web/sections/Grid/Span2And1.tsx b/web/sections/Grid/Span2And1.tsx
@@ -10,7 +10,7 @@ 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 minHeight = 'min-h-[350px] lg:min-h-[600px]'
   const commonStyling = `${minHeight}`
   const borderStyling = `border border-moss-green-60`
   const isMobile = useMediaQuery(`(max-width: 800px)`)

diff --git a/web/sections/Grid/Span3.tsx b/web/sections/Grid/Span3.tsx
@@ -10,7 +10,7 @@ export type Span3Props = {
 
 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]'
+  const minHeight = data?.content?.type === 'videoPlayer' ? '' : 'min-h-[350px] lg:min-h-[600px]'
 
   return (
     <div

diff --git a/web/sections/Grid/ThreeColumns.tsx b/web/sections/Grid/ThreeColumns.tsx
@@ -14,7 +14,7 @@ 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 minHeight = 'min-h-[350px] lg:min-h-[600px]'
   const isMobile = useMediaQuery(`(max-width: 800px)`)
   return (
     <Fragment ref={ref}>

diff --git a/web/sections/Grid/mapGridContent.tsx b/web/sections/Grid/mapGridContent.tsx
@@ -23,8 +23,7 @@ export const mapGridContent = (data: ComponentProps, rowType?: RowType, isMobile
         <VideoJsComponent
           key={data.id}
           {...(data as VideoPlayerData)}
-          className="h-full sm:w-full"
-          {...(!isMobile && { useFillMode: true })}
+          className={`${isMobile ? '' : 'h-full sm:w-full'}`}
         />
       )
     }

diff --git a/web/styles/components/videojs.css b/web/styles/components/videojs.css
@@ -1,4 +1,44 @@
 /* Change all text and icon colors in the player. */
+.vjs-envis {
+  @apply text-xs lg:text-2xs;
+}
+.vjs-envis .vjs-control-bar {
+  @apply bg-slate-blue-100;
+}
+.vjs-envis button,
+[type='button'] {
+  @apply focus:outline-none focus-visible:envis-outline-invert;
+}
 .vjs-envis .vjs-big-play-button {
+  @apply bg-slate-blue-100/70 border-none rounded-full w-[60px] h-[60px] lg:w-[80px] lg:h-[80px];
+  margin-left: -0.85em;
+  margin-top: -1.1em;
+}
+.vjs-envis:hover .vjs-big-play-button {
+  @apply bg-slate-blue-100;
+}
+.vjs-envis .vjs-big-play-button:focus {
+  @apply bg-slate-blue-100;
+}
+
+.vjs-envis .vjs-icon-placeholder {
+  @apply w-full h-full flex justify-center items-center;
+}
+.vjs-envis .vjs-big-play-button .vjs-icon-placeholder:before {
+  @apply text-white-100 block w-fit h-fit relative text-2xl;
+}
+.vjs-paused.vjs-has-started.vjs-envis-hasPlayButton .vjs-big-play-button {
+  display: block;
+}
+
+.vjs-paused:not(.vjs-has-started).vjs-envis-hasPlayButton .vjs-control-bar {
+  display: none;
+}
+
+/* BRAND THEMING */
+.vjs-envis-brand:hover .vjs-big-play-button {
+  @apply bg-energy-red-100;
+}
+.vjs-envis-brand .vjs-big-play-button:focus {
   @apply bg-energy-red-100;
 }
diff --git a/web/types/types.ts b/web/types/types.ts
@@ -704,8 +704,6 @@ 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',
 }