🐛 fix video (#3814)

Author: BorghildSelle

web/app/globals.css

@@ -1,7 +1,6 @@
 @import "tailwindcss" source("../");
 @import '@energyvision/shared/brand.css';
 /* @source '../styles/components/imagezoom.css'; */
-@source '../styles/components/videojs.css';
 @source '../styles/components/cookiebot.css';
 
 /* Custom theme for web, not common brand */
@@ -316,6 +315,7 @@ data-ui="checked active" class="data-checked:underline">
   }
 
   /************** Video js **********/
+
   .video-js.vjs-fill .vjs-control-bar {
     @apply bg-transparent!;
   }

web/core/Carousel/Carousel.tsx

@@ -360,7 +360,7 @@ export const Carousel = forwardRef<HTMLElement, CarouselProps>(
         src: video?.src,
         aspectRatio: displayMode === 'scroll' ? '9:16' : '16:9',
         figureCaption: title,
-        className: 'min-w-[24rem] h-full',
+        className: 'min-w-[24rem] h-full overflow-hidden rounded-card',
       }
       //@ts-ignore: TODO
       const element = <VideoPlayer {...props} />
@@ -371,7 +371,6 @@ export const Carousel = forwardRef<HTMLElement, CarouselProps>(
           aria-label={getTranslatedItemCountLabel(index + 1)}
           displayMode={displayMode}
           active={index === currentIndex}
-          /*         className={`${displayMode === 'scroll' ? 'h-full w-[260px] md:w-[372px] lg:w-[405px]' : ''}`} */
           {...(displayMode === 'single' && {
             style: {
               transform: `translate3d(${itemsXPositions[index]}px, 0px, 0px)`,

web/core/Carousel/CarouselImageItem.tsx

@@ -95,23 +95,23 @@ export const CarouselImageItem = forwardRef<
           grid='sm'
           image={image}
           fill
-          className={`relative aspect-4/3 h-full w-full rounded-md md:aspect-video`}
-          imageClassName='rounded-md'
+          className={`relative aspect-4/3 h-full w-full rounded-card md:aspect-video`}
+          imageClassName='rounded-card'
         />
       )
     }
     if (isImageWithSimpleCaption && image) {
       return (
-        <figure className='flex aspect-4/3 h-full w-full items-end rounded-md md:aspect-video'>
+        <figure className='flex aspect-4/3 h-full w-full items-end rounded-card md:aspect-video'>
           <Image
             grid='sm'
             image={image}
             fill
             className='absolute'
-            imageClassName={`rounded-md`}
+            imageClassName={`rounded-card`}
           />
           <figcaption
-            className={`fade-in-black-gradient z-1 w-full rounded-b-md ${
+            className={`fade-in-black-gradient z-1 w-full rounded-b-card ${
               displayMode === 'single'
                 ? active
                   ? 'opacity-100'
@@ -147,9 +147,9 @@ export const CarouselImageItem = forwardRef<
             image={image}
             fill
             className='absolute'
-            imageClassName={`aspect-4/3 rounded-md md:aspect-video`}
+            imageClassName={`aspect-4/3 rounded-card md:aspect-video`}
           />
-          <div className='fade-in-black-gradient flex h-full w-full items-end rounded-b-md pt-10 lg:pt-20'>
+          <div className='fade-in-black-gradient flex h-full w-full items-end rounded-b-card pt-10 lg:pt-20'>
             <BaseLink
               href={url as string}
               {...(action.link?.lang && {
@@ -170,7 +170,7 @@ export const CarouselImageItem = forwardRef<
     if (isImageWithOverlay) {
       return (
         <ImageWithOverlay
-          className={`aspect-4/3 rounded-md md:aspect-video`}
+          className={`aspect-4/3 rounded-card md:aspect-video`}
           teaserTitle={captionTeaserTitle}
           //@ts-ignore:TODO
           title={captionTitle as PortableTextBlock[]}
@@ -188,8 +188,8 @@ export const CarouselImageItem = forwardRef<
             grid='sm'
             image={image}
             fill
-            className={`min-h-single-carousel-card-h-sm w-full rounded-md md:min-h-single-carousel-card-h-md lg:min-h-single-carousel-card-h-lg`}
-            imageClassName='aspect-4/3 rounded-md md:aspect-video'
+            className={`min-h-single-carousel-card-h-sm w-full rounded-card md:min-h-single-carousel-card-h-md lg:min-h-single-carousel-card-h-lg`}
+            imageClassName='aspect-4/3 rounded-card md:aspect-video'
           />
           <figcaption
             className={twMerge(

web/core/ImageWithOverlay/ImageWithOverlay.tsx

@@ -58,14 +58,14 @@ export const ImageWithOverlay = forwardRef<
   return (
     <figure
       ref={ref}
-      className={twMerge(`h-full w-full rounded-md`, className)}
+      className={twMerge(`h-full w-full rounded-card`, className)}
     >
       <Image
         grid='sm'
         image={image}
         fill
         className='absolute'
-        imageClassName={`aspect-4/3 rounded-md md:aspect-video`}
+        imageClassName={`aspect-4/3 rounded-card md:aspect-video`}
       />
       <figcaption
         className={twMerge(
@@ -74,12 +74,12 @@ export const ImageWithOverlay = forwardRef<
         )}
       >
         <div
-          className={`absolute inset-0 z-1 rounded-md transition-colors duration-250 ${
+          className={`absolute inset-0 z-1 rounded-card transition-colors duration-250 ${
             showOverlay ? 'bg-slate-blue-95' : ''
-          } flex flex-col-reverse rounded-b-md`}
+          } flex flex-col-reverse rounded-b-card`}
         >
           <div
-            className={`h-fit rounded-b-md ${
+            className={`h-fit rounded-b-card ${
               showOverlay
                 ? 'justify-end'
                 : 'fade-in-black-gradient justify-between'

web/core/VideoJsPlayer/Video.tsx

@@ -1,8 +1,9 @@
 'use client'
-import { type HTMLProps, useEffect, useRef, useState } from 'react'
+import { type HTMLProps, useEffect, useRef } from 'react'
 import videojs from 'video.js'
 import 'video.js/dist/video-js.css'
 import type Player from 'video.js/dist/types/player'
+import { twMerge } from '@/lib/twMerge/twMerge'
 import useVideojsAnalytics from './useVideojsAnalytics'
 
 //Needed?
@@ -46,15 +47,15 @@ export const Video: React.FC<VideoProps> = ({
   options,
   onReady,
   useBrandTheme = false,
-  containVideo = false,
+  // containVideo = false,
+  className = '',
 }) => {
   const videoRef = useRef<HTMLDivElement>(null)
   const playerRef = useRef<Player>(null)
   const videoElementRef = useRef<HTMLElement | null>(null)
   const onReadyRef = useRef<VideoProps['onReady']>(onReady)
   const sourceKeyRef = useRef('')
-  const [isReady, setIsReady] = useState(false)
-  const { src, title, autoplay = false, fill, aspectRatio } = options
+  const { src, title, autoplay = false } = options
 
   const getSourceKey = (source: unknown): string => {
     if (typeof source === 'string') {
@@ -107,29 +108,24 @@ export const Video: React.FC<VideoProps> = ({
       videoElement.classList.add('vjs-envis-brand')
     }
     if (variant === 'fullwidth') {
-      videoElement.classList.add('vjs-fullwidth')
-    }
-    if (
-      !containVideo &&
-      (fill || aspectRatio === '10:3' || aspectRatio === '21:9')
-    ) {
-      videoElement.classList.add('vjs-fill', 'lg:[&>video]:object-cover')
-    }
-    if (aspectRatio === '16:9') {
-      videoElement.classList.add('vjs-16-9')
-    }
-    if (aspectRatio === '4:3') {
-      videoElement.classList.add('vjs-4-3')
-    }
-    if (aspectRatio === '9:16') {
-      videoElement.classList.add('vjs-9-16')
+      videoElement.classList.add(
+        'vjs-fullwidth',
+        'vjs-fill',
+        'lg:[&>video]:object-cover',
+      )
+    } else {
+      videoElement.classList.add(
+        'pt-0!',
+        'w-full!',
+        'h-full!',
+        '[&>video]:object-contain',
+        '[&>video]:relative!',
+      )
     }
 
     videoRef.current?.appendChild(videoElement)
-    setIsReady(false)
 
     const markReady = () => {
-      setIsReady(true)
       videoElement.classList.add('vjs-ready')
     }
 
@@ -150,17 +146,7 @@ export const Video: React.FC<VideoProps> = ({
     return () => {
       window.clearTimeout(readyTimeout)
     }
-  }, [
-    aspectRatio,
-    autoplay,
-    containVideo,
-    fill,
-    options,
-    sourceKey,
-    src,
-    useBrandTheme,
-    variant,
-  ])
+  }, [autoplay, options, sourceKey, src, useBrandTheme, variant])
 
   useEffect(() => {
     const player = playerRef.current
@@ -171,11 +157,9 @@ export const Video: React.FC<VideoProps> = ({
     player.autoplay(autoplay)
 
     if (sourceKey && sourceKeyRef.current !== sourceKey) {
-      setIsReady(false)
       videoElementRef.current?.classList.remove('vjs-ready')
 
       const markReady = () => {
-        setIsReady(true)
         videoElementRef.current?.classList.add('vjs-ready')
       }
       const readyTimeout = window.setTimeout(markReady, 350)
@@ -202,14 +186,7 @@ export const Video: React.FC<VideoProps> = ({
     }
   }, [])
 
-  return (
-    <div
-      className={`video-player h-full w-full transition-opacity duration-300 ${isReady ? 'video-player--ready opacity-100' : 'opacity-0'}`}
-      data-vjs-player
-    >
-      <div ref={videoRef} className={`h-full w-full`} />
-    </div>
-  )
+  return <div ref={videoRef} className={twMerge(`h-full w-full`, className)} />
 }
 
 export default Video

web/core/VideoJsPlayer/VideoPlayer.tsx

@@ -31,6 +31,7 @@ export type VideoPlayerProps = Omit<
   src: string
   figureCaption?: string | PortableTextBlock[]
   captionClassName?: string
+  figureClassName?: string
   /* setting this will sett fluid mode to video player */
   aspectRatio?: AspectRatioVariants | undefined
   /** Ignores aspect ratio to enable fill mode */
@@ -48,6 +49,7 @@ export const VideoPlayer: React.FC<VideoPlayerProps> = ({
   loop = false,
   figureCaption,
   captionClassName = '',
+  figureClassName = '',
   autoPlay = false,
   title,
   src,
@@ -135,7 +137,7 @@ export const VideoPlayer: React.FC<VideoPlayerProps> = ({
   const aspectRatioClassName: Record<AspectRatioVariants, string> = {
     '10:3': 'aspect-16/9 md:aspect-10/3',
     '16:9': 'aspect-video',
-    '21:9': 'aspect-16/9 md: aspect-21/9',
+    '21:9': 'aspect-16/9 md:aspect-21/9',
     '9:16': 'aspect-9/16',
     '2:1': 'aspect-2/1',
     '4:3': 'aspect-4/3',
@@ -162,19 +164,18 @@ export const VideoPlayer: React.FC<VideoPlayerProps> = ({
       {...(id && { id })}
       className={twMerge(
         `relative flex flex-col ${variantClassName[variant]}`,
-        className,
+        figureClassName,
       )}
     >
-      <div className={`${aspectRatioClassName[aspectRatio]}`}>
-        <Video
-          //@ts-ignore: TODO
-          options={videoJsOptions}
-          onReady={handlePlayerReady}
-          useBrandTheme={useBrandTheme}
-          containVideo={containVideo}
-          variant={variant}
-        />
-      </div>
+      <Video
+        //@ts-ignore: TODO
+        options={videoJsOptions}
+        onReady={handlePlayerReady}
+        useBrandTheme={useBrandTheme}
+        containVideo={containVideo}
+        variant={variant}
+        className={twMerge(aspectRatioClassName[aspectRatio], className)}
+      />
       {figureCaption && (
         <figcaption
           className={twMerge(

web/sections/VideoPlayerBlock/VideoPlayerBlock.tsx

@@ -52,13 +52,14 @@ const VideoPlayerBlock = ({
   const { width = 'normal', ...videoPlayerDesignOptions } = designOptions
   const actionUrl = action ? getUrlFromAction(action) : ''
   const { bg, dark } = getBgAndDarkFromBackground(designOptions)
+
   const isNarrowFeature =
     width === 'narrow' || videoPlayerDesignOptions?.aspectRatio === '9:16'
 
   return (
     <section
       className={twMerge(
-        `mx-auto max-w-content ${bg} ${dark ? 'dark' : ''} ${width === 'extraWide' ? 'px-layout-md' : 'px-layout-lg'}`,
+        `mx-auto h-auto w-full max-w-content ${bg} ${dark ? 'dark' : ''} px-layout-sm ${width === 'extraWide' ? 'lg:px-layout-md' : 'lg:px-layout-lg'}`,
         className,
       )}
       id={anchor}
@@ -94,18 +95,20 @@ const VideoPlayerBlock = ({
         </div>
       )}
       {/*@ts-ignore: TODO*/}
+
       <div
         className={twMerge(
+          'h-auto w-full overflow-hidden rounded-card',
           isNarrowFeature && 'mx-auto',
           isNarrowFeature &&
             videoPlayerDesignOptions?.aspectRatio === '9:16' &&
-            'aspect-9/16 w-101.5 overflow-hidden rounded-card',
+            'w-101.5',
           isNarrowFeature &&
             videoPlayerDesignOptions?.aspectRatio === '16:9' &&
-            'aspect-video w-200 overflow-hidden rounded-card',
+            'w-200',
           isNarrowFeature &&
             videoPlayerDesignOptions?.aspectRatio === '1:1' &&
-            'aspect-square w-150 overflow-hidden rounded-card',
+            'w-150',
         )}
       >
         <VideoPlayer