diff --git a/.changeset/silly-dots-juggle.md b/.changeset/silly-dots-juggle.md new file mode 100644 index 00000000..1e2198b6 --- /dev/null +++ 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 index 9de09b8d..54d00510 100644 --- 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) => { hideMute, hideAttribution, hideProgressBar, + hideTitle, className, persistentControls, gif, @@ -193,7 +196,7 @@ const VideoPlayer = (props: ComponentProps) => { {showControls && } - {isLargePlayer && ( + {!hideTitle && isLargePlayer && ( { e.preventDefault() diff --git a/packages/react-components/src/components/video/video.tsx b/packages/react-components/src/components/video/video.tsx index e65c4c6f..c1856de9 100644 --- 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])