Merge pull request #452 from Giphy/video-player-updates

Video player updates
Giphy · Aug 5, 2024 · e0e3717 · e0e3717
2 parents ef2e082 + 7eb17c5
commit e0e3717
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 5 deletions.
diff --git a/.changeset/silly-dots-juggle.md b/.changeset/silly-dots-juggle.md
@@ -0,0 +1,5 @@
+---
+'@giphy/react-components': minor
+---
+
+video player tweaks: hide title / fix SSR loop error
diff --git a/packages/react-components/src/components/video/index.tsx b/packages/react-components/src/components/video/index.tsx
@@ -15,6 +15,8 @@ type Props = {
     controls?: boolean
     // if controls is true, hides progress bar
     hideProgressBar?: boolean
+    // if controls is true, hides the title
+    hideTitle?: boolean
     // if controls is true, hides mute
     hideMute?: boolean
     // hide attribution
@@ -112,6 +114,7 @@ const VideoPlayer = (props: ComponentProps<typeof VideoWrapper>) => {
         hideMute,
         hideAttribution,
         hideProgressBar,
+        hideTitle,
         className,
         persistentControls,
         gif,
@@ -193,7 +196,7 @@ const VideoPlayer = (props: ComponentProps<typeof VideoWrapper>) => {
             {showControls && <Gradient $isLargePlayer={isLargePlayer} />}
             <Controls $isHovered={showControls}>
                 <TitleContainer>
-                    {isLargePlayer && (
+                    {!hideTitle && isLargePlayer && (
                         <Title
                             onClick={(e) => {
                                 e.preventDefault()

diff --git a/packages/react-components/src/components/video/video.tsx b/packages/react-components/src/components/video/video.tsx
@@ -167,15 +167,15 @@ const Video = ({
         }
     }, [onWaiting])
     const _onEnded = useCallback(() => {
-        // helps prevent two ended events when changing media
-        if (!hasPlayingFired.current) {
-            return
-        }
         if (loop && videoEl.current) {
             videoEl.current.play()
         }
         onLoop?.(loopNumber.current)
         loopNumber.current = loopNumber.current + 1
+        // helps prevent two ended events when changing media
+        if (!hasPlayingFired.current) {
+            return
+        }
         onEnded?.()
     }, [onEnded, loop, onLoop])
     const _onEndFullscreen = useCallback(() => onEndFullscreen?.(), [onEndFullscreen])