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])