Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Start autoplay when video is in view #2839

Open
wants to merge 3 commits into
base: main
Choose a base branch
from

Conversation

juliawegmayr
Copy link
Contributor

@juliawegmayr juliawegmayr commented Nov 27, 2024

Description

Videos that are set to autoplay should only start if the user scrolls to the Video. If he scrolls away, the video should pause. Implementation for: DamVideoBlock, YoutubeVideoBlock and VimeoVideoBlock.

Screenshots/screencasts

DamVideoBlock:

Screen.Recording.2024-11-27.at.13.32.10.mov

YoutubeVideoBlock:

Screen.Recording.2024-11-27.at.13.34.19.mov

VimeoVideoBlock:

Screen.Recording.2024-11-27.at.13.35.36.mov

Changeset

  • I have verified if my change requires a changeset

Related tasks and documents

(https://vivid-planet.atlassian.net/browse/COM-1313)

@juliawegmayr juliawegmayr self-assigned this Nov 27, 2024
@juliawegmayr juliawegmayr force-pushed the start-autoplay-when-video-is-in-view branch from 58f2db7 to 9688201 Compare November 27, 2024 11:01
@juliawegmayr juliawegmayr force-pushed the start-autoplay-when-video-is-in-view branch from 9688201 to 13a48c7 Compare November 27, 2024 12:21
@juliawegmayr juliawegmayr marked this pull request as ready for review November 27, 2024 12:49
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These functions should be in the respective blocks. There's no need for a separate file IMO.

@@ -0,0 +1,20 @@
import { RefObject, useEffect, useState } from "react";

export const useIsElementVisible = (ref: RefObject<HTMLDivElement>) => {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Naming: useIsElementInViewport would probably be better. An element can still be hidden using display: none.

BTW, nice implementation using IntersectionObserver 👏🏼

@johnnyomair johnnyomair force-pushed the start-autoplay-when-video-is-in-view branch from a48e93d to 108a218 Compare November 28, 2024 13:39
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants