react-components: video support percentage width for responsive layouts

Giphy · Aug 1, 2024 · 4cfcc5f · 4cfcc5f
1 parent 0380176
commit 4cfcc5f
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 6 deletions.
diff --git a/packages/react-components/src/components/video/index.tsx b/packages/react-components/src/components/video/index.tsx
@@ -1,6 +1,6 @@
 'use client'
 import { getGifHeight, Logger } from '@giphy/js-util'
-import React, { ComponentProps, ElementType, useCallback, useEffect, useState } from 'react'
+import React, { ComponentProps, CSSProperties, ElementType, useCallback, useEffect, useState } from 'react'
 import useTimeoutFn from 'react-use/lib/useTimeoutFn'
 import styled from 'styled-components'
 import { GifOverlayProps } from '../types'
@@ -10,6 +10,7 @@ import ProgressBar from './progress-bar'
 import Video from './video'
 
 type Props = {
+    style?: CSSProperties
     // turns on all controls
     controls?: boolean
     // if controls is true, hides progress bar
@@ -105,7 +106,9 @@ const LARGE_PLAYER_HEIGHT = 300
 const AUTO_HIDE_TIMEOUT = 4000
 const VideoPlayer = (props: ComponentProps<typeof VideoWrapper>) => {
     const {
+        style,
         width,
+        percentWidth,
         hideMute,
         hideAttribution,
         hideProgressBar,
@@ -120,6 +123,11 @@ const VideoPlayer = (props: ComponentProps<typeof VideoWrapper>) => {
     const [mutedByBrowser, setMutedByBrowser] = useState(false)
     const { setVideoEl, onMuted, onUserMuted } = props
     const height = props.height || getGifHeight(gif, width)
+    let percentHeight: string | undefined
+    if (percentWidth) {
+        const ratio = Math.round((height / width) * 100)
+        percentHeight = `${ratio}%`
+    }
     const [, cancelHideTimeout, resetHideTimeout] = useTimeoutFn(() => {
         setIsHovered(false)
     }, AUTO_HIDE_TIMEOUT)
@@ -163,7 +171,7 @@ const VideoPlayer = (props: ComponentProps<typeof VideoWrapper>) => {
     return (
         <Container
             className={className}
-            style={{ width, height }}
+            style={{ width: percentWidth || width, height: percentHeight || height, ...style }}
             onMouseOver={() => setIsHovered(true)}
             onMouseLeave={() => setIsHovered(false)}
             onMouseMove={() => {
@@ -181,7 +189,7 @@ const VideoPlayer = (props: ComponentProps<typeof VideoWrapper>) => {
                 toggleMute()
             }}
         >
-            <Video {...props} onMuted={combinedOnMuted} setVideoEl={combinedSetVideoEl} muted={muted} />
+            <Video {...props} isInPlayer onMuted={combinedOnMuted} setVideoEl={combinedSetVideoEl} muted={muted} />
             {showControls && <Gradient $isLargePlayer={isLargePlayer} />}
             <Controls $isHovered={showControls}>
                 <TitleContainer>

diff --git a/packages/react-components/src/components/video/video.tsx b/packages/react-components/src/components/video/video.tsx
@@ -39,9 +39,11 @@ type Props = {
     loop?: boolean
     gif: IGif
     width: number
+    percentWidth?: string
     height?: number
     volume?: number
     className?: string
+    isInPlayer?: boolean
 }
 const Video = ({
     muted,
@@ -62,12 +64,18 @@ const Video = ({
     setVideoEl,
     gif,
     width,
+    percentWidth,
     height: height_,
     volume = 0.7,
     className = videoClassName,
+    isInPlayer,
 }: Props) => {
     const height = height_ || getGifHeight(gif, width)
-
+    let percentHeight: string | undefined
+    if (percentWidth) {
+        const ratio = Math.round((height / width) * 100)
+        percentHeight = `${ratio}%`
+    }
     // state
     const [media, setMedia] = useState(getBestVideo(gif.video, width, height))
     const seek = useRef(0)
@@ -236,8 +244,8 @@ const Video = ({
             crossOrigin="anonymous"
             draggable={true}
             className={className}
-            width={width}
-            height={height}
+            width={isInPlayer ? '100%' : percentWidth || width}
+            height={isInPlayer ? '100%' : percentHeight || height}
             muted={muted}
             autoPlay
             playsInline

diff --git a/packages/react-components/stories/video.stories.tsx b/packages/react-components/stories/video.stories.tsx
@@ -85,3 +85,9 @@ export const VideoNoContent: Story = {
         id: 'ZEU9ryYGZzttn0Cva7',
     },
 }
+
+export const VideoPercentageWidth: Story = {
+    args: {
+        percentWidth: '80%',
+    },
+}