gyanreyer / react-hover-video-player Goto Github PK

What problem do you want to solve? Please describe.
I am rendering a ton of videos on a page and when you scroll the mouse inadvertently hovers over videos causing them to make requests to the backend to fetch. This tends to overwhelm the backend with the many requests happening all at once.

Describe the solution you'd like
A hover delay that you can set. Don't start playing the video unless the user has hovered for more than the delay amount.

Would using a library like hls.js be easy to implement?

What problem do you want to solve? Please describe.
We want to allow the user to hover and more rapidly preview the video in question by playing at an optional increased rate like 2x or 4x so they don’t need to watch the video at regular speed and can just “scan” through it.

Describe the solution you'd like
An optional prop to set the default playback speed at various rates using video.playbackRate.

https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/playbackRate

Describe alternatives you've considered
None.

Additional context
None.

videoSrc="https://www.youtube.com/watch?v=gdA1G5h-D80"
it seems not working

Hello again!

Here I am again thinking some ideas. It would be great to use a

Sadly I don't have the solution to offer a fresh block of code. It's an idea.

Best,
S

I am aware that TypeScript support is often a big dealbreaker for a lot of people when it comes to React libraries, but unfortunately I'm not super familiar and haven't been able to take the time to figure out how to tackle this myself yet.

Anyone who wants to take this on is absolutely more than welcome to! I expect it would be fairly simple if you knew what you were doing, I just don't at the moment haha.

🚨 The automated release from the master branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can resolve this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the master branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here is some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

No npm token specified.

An npm token must be created and set in the NPM_TOKEN environment variable on your CI environment.

Please make sure to create an npm token and to set it in the NPM_TOKEN environment variable on your CI environment. The token must allow to publish to the registry https://registry.npmjs.org/.

Good luck with your project ✨

Your semantic-release bot 📦🚀

Hello,

I am getting a cross-origin error on the console when hovering on it.

I have videos on s3 server and need to play those videos when hovering on the block.

Please help me to solve my issue.

Thanks.

Describe the bug
I can't get this to work with .m3u8 / type: 'application/x-mpegURL video content. Is this a bug or a feature request?

To Reproduce
Steps to reproduce the behavior:
setup example/demo application from this repo and use :

videoSrc={{
    type: 'application/x-mpegURL',
    src:
      'https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8',
  }}

Expected behaviour
Video should play on hover.

Update:
This is only in Google Chrome browser, so may just be a bug with the <video> implementation. TBC. more info to follow unless this is a known issue.

I appreciate the current project and the hard work that has gone into it. However, we need to add support for previewing videos embedded via iframe. This will allow users to preview videos from a wider range of sources, such as YouTube, Vimeo, and other video hosting platforms that support iframe embedding.

What problem do you want to solve? Please describe.
We want to add support for previewing videos embedded via iframe.

Describe the solution you'd like
We would like to be able to preview videos that are embedded via iframe.

Describe alternatives you've considered
We have not considered any alternative solutions at this time.

Additional context
None at this time.

Describe the bug

To Reproduce
Steps to reproduce the behavior:

1. Go to sandbox link for example - https://codesandbox.io/s/hovervideoplayer-example-6y0fn?file=/src/App.js
2. See error - HoverVideoPlayer.tsx:120 Uncaught TypeError: Cannot read properties of undefined (reading 'catch')

Expected behavior
No error

Screenshots

Desktop (please complete the following information):

• OS: [e.g. iOS] MacOS
• Browser Chrome
• Version 108.0.5359.98 and 108.0.5359.124

Additional context
After upgrading to 108.0.5359.124 it worked one time but I see same error now

What problem do you want to solve? Please describe.
Is there a built-in way to zoom the video and blur the background similar to how the example video works?

Demo

Very cool! Works perfect!

One thing that would be nice, a possibility of adjusting the playback volume settings with props.

i.e playback sound 50%

I've tried adding a custom data-testid to the component to use on my application tests but it gets overwritten by the component's data-testid values.
I've also tried adding custom attributes to the component to access those on my tests but they don't get added to the rendered component.

How should the approach be in this case? Is it possible to add custom attributes to the component?

Hello!

I get this error (console) when the cursor do hover quickly on the video-player:

index.esm.js?693b:244 HoverVideoPlayer: The play() request was interrupted by a new load request.
https://goo.gl/LdLk22

Is there something I am wrong about?

When I try to hover the mouse on the video and after that I removed my mouse from the video I had errors in devtools, like:

Why is it happened?

My code:

I have a problem.

I have a div in absolute hover the videoplayer that set the video to muted or not when clicked.

the problem is that if i try to click it, hovering it, the HoverVideoPlayer in background stops hovering and so stops displaying the video, turning back to the image.

Here's the code:

<div className="ratio ratio-16x9" style={{ position: "relative" }}>
				<div className="filmItem__favouriteCont" style={{ position: "absolute", top: 0, right: 0 }}>
					<FavouriteBtn id={props.id} isFavourite={props.isFavourite} films={props.films} />
				</div>

				<div className="d-flex justify-content-center" style={{pointerEvents:"none", position: "absolute", top: 0, right: 0 }}>
					<RecentAdded recentAdded={props.recentAdded} />
				</div>

				<div style={{pointerEvents:"none", position: "absolute", bottom: 0, right: 0 }}>
					<FilmTopProp isNet={props.isNet} isTop={props.isTop} />
				</div>

				<div className="filmItem__audioCont" style={{ position: "absolute", top: 0, right: 0 }}>
					<AudioBtn videoTag="video.filmItem__video"/>
				</div>

				<HoverVideoPlayer
					className="filmItem__video"
					muted={true}
					preload="metadata"
					restartOnPaused
					videoSrc={props.urlVideo}
					overlayTransitionDuration={500}
					pausedOverlay={<img src={props.urlImg} alt={props.id} className="filmItem__image" style={{ height: "100%", maxWidth: "100%"}} />}
				/>
			</div>

AudioBtn:

`import React, { useState } from "react";

function AudioBtn(props) {

const [muted, setMuted] = useState(true);

const toggleMute = (event) => {
    event.stopPropagation();
    const videoElement = document.querySelector(`${props.videoTag}`);
    if (videoElement) {
        videoElement.muted = !videoElement.muted;
        setMuted(videoElement.muted);
    }
};

return (
    <div onClick={toggleMute} id="audioBtn" className="filmItem__favouriteCont-button d-flex justify-content-center align-items-center">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" data-name="Refresh">
            <path d={muted ?
                "M11 4.00003C11 3.59557 10.7564 3.23093 10.3827 3.07615C10.009 2.92137 9.57889 3.00692 9.29289 3.29292L4.58579 8.00003H1C0.447715 8.00003 0 8.44774 0 9.00003V15C0 15.5523 0.447715 16 1 16H4.58579L9.29289 20.7071C9.57889 20.9931 10.009 21.0787 10.3827 20.9239C10.7564 20.7691 11 20.4045 11 20V4.00003ZM5.70711 9.70714L9 6.41424V17.5858L5.70711 14.2929L5.41421 14H5H2V10H5H5.41421L5.70711 9.70714ZM15.2929 9.70714L17.5858 12L15.2929 14.2929L16.7071 15.7071L19 13.4142L21.2929 15.7071L22.7071 14.2929L20.4142 12L22.7071 9.70714L21.2929 8.29292L19 10.5858L16.7071 8.29292L15.2929 9.70714Z" :
                "M 24 12 C 24 8.28693 22.525 4.72597 19.8995 2.10046 L 18.4853 3.51468 C 20.7357 5.76511 22 8.81736 22 12 C 22 15.1826 20.7357 18.2348 18.4853 20.4852 L 19.8995 21.8995 C 22.525 19.2739 24 15.713 24 12 Z M 11 3.99995 C 11 3.59549 10.7564 3.23085 10.3827 3.07607 C 10.009 2.92129 9.57889 3.00685 9.29289 3.29285 L 4.58579 7.99995 H 1 C 0.447715 7.99995 0 8.44767 0 8.99995 V 15 C 0 15.5522 0.447715 16 1 16 H 4.58579 L 9.29289 20.7071 C 9.57889 20.9931 10.009 21.0786 10.3827 20.9238 C 10.7564 20.7691 11 20.4044 11 20 V 3.99995 Z M 5.70711 9.70706 L 9 6.41417 V 17.5857 L 5.70711 14.2928 L 5.41421 14 H 5 H 2 V 9.99995 H 5 H 5.41421 L 5.70711 9.70706 Z M 16.0001 12 C 16.0001 10.4087 15.368 8.88254 14.2428 7.75732 L 12.8285 9.17154 C 13.5787 9.92168 14.0001 10.9391 14.0001 12 C 14.0001 13.0608 13.5787 14.0782 12.8285 14.8284 L 14.2428 16.2426 C 15.368 15.1174 16.0001 13.5913 16.0001 12 Z M 17.0709 4.92889 C 18.9462 6.80426 19.9998 9.3478 19.9998 12 C 19.9998 14.6521 18.9462 17.1957 17.0709 19.071 L 15.6567 17.6568 C 17.157 16.1565 17.9998 14.1217 17.9998 12 C 17.9998 9.87823 17.157 7.8434 15.6567 6.34311 L 17.0709 4.92889 Z"
            } fill="currentColor"></path>
        </svg>
    </div>
);

}

export default AudioBtn;
`

I tried to load the video from s3 bucket.
it seems not loading

Hello again!

I've been testing it in a Nextjs project and it works great.
For those who do not know, Nextjs is a react framework and has an Image component that helps a lot to process images and progressive or lazy loading.

I share the docs to see more about this component:
https://nextjs.org/docs/basic-features/image-optimization

It would be great to be able to specify this type of component inside react-hover-video preview/paused image, or just to know where I can modify it to import Image component from nextjs and activate this behavior.

Thank you so much!
S

Describe the bug
The Player always has a little space (margin) at the bottom which seems not targetable.

To Reproduce
Steps to reproduce the behavior:
I opened up a simple code sandbox.

1. Setup a HoverVideoPlayer
2. Add a div around the player and give it a background-color: "orange"
3. You can now see the space in an orange color at the bottom of the player.

Expected behavior
The default behavior should be to have no space on the bottom.

Screenshots
Sandbox example

hello I am also getting cors error on playing a video in my NodeJS server and I am already allowing cors in my node server. please help me to solve my issue @Gyanreyer

The problem

Jest unit tests are great! Just not for this component. JSDOM pretty much completely disables the video element, which is what this entire library is built on. As a result. I had to throw together an absolutely monstrous amount of mocking in order to make anything testable. I did my best to stick as closely to the W3C specs as I could for the mock implementation, but it still has gaps and in retrospect, that was just a really terrible idea. Why did I do that?

The solution

The time has come to fully go all-in on E2E tests. Since everything is running in a real browser, these tests don't require any mocking at all in order to test the the video element is loading/playing correctly! Additionally, this opens up the ability to go even deeper with some tests to make sure things really work the way they're supposed to.

TODO

• Get test coverage for cypress tests up to 100%
• Rip out old jest tests and ensure each test is replaced by a cypress test

Currently, changes to the videoSrc prop aren't recommended/directly supported because some extra work is required to unload the old source and then load the new one which the component currently doesn't take into consideration.

The current recommended workaround for this is to set a key prop on the component to force it to unmount/remount when the source changes, but a more native solution within the component should definitely be possible and will provide a better developer experience.

So, the component should take appropriate action to update when the videoSrc prop changes.

Things to watch out for

• Will need to be able to safely perform a deep comparison when sources are provided as objects/arrays

How Can I restart the video when i mouseleave the element?

There are various parts of the documentation which try their best to describe how a certain prop works, but the point will never come across quite as effectively as it would with an actual visual aid. As a result, I would like to add more gifs to the documentation to show visual examples of how certain props work.

Props which I think would benefit from this treatment:
High priority:

• pausedOverlay
• loadingOverlay
• hoverOverlay
• playback ranges

Describe the bug
I installed the package but when I tried to use it I got this:

Could not find a declaration file for module 'react-hover-video-player'. 'path/node_modules/react-hover-video-player/dist/index.cjs' implicitly has an 'any' type.
Try npm i --save-dev @types/react-hover-video-player if it exists or add a new declaration (.d.ts) file containing declare module 'react-hover-video-player';

To Reproduce
Steps to reproduce the behavior:

1. Just install in react project using typescript

The examples in the README aren't great at fully communicating the nuances of more advanced usage of this component.

As a result, I would like to build out an extensive suite of live working codesandbox examples and either link to them or embed them directly in the documentation.

Examples to add:

• Standard pausedOverlay + loadingOverlay usage
• Example of using sizingMode="container" to display the video player at a set aspect ratio
• Example of using sizingMode="overlay" to make everything display based on the pausedOverlay's dimensions
• Example of using the hoverTarget prop
• Example of using the focused prop

What problem do you want to solve? Please describe.
I'm trying to load some videos, and I don't have control over the CORS configuration of the source.

Describe the solution you'd like
The option to remove the crossorigin attribute from the underlying video tag.

Describe alternatives you've considered
Copying the videos and rehosting elsewhere isn't a practical option for my use case.

Additional context
I've modified the source locally and can confirm that removing this attribute unblocks my use case.

Describe the bug
When I hover the video audio doesn't play even though user made a interaction with site. --> https://developers.google.com/web/updates/2018/11/web-audio-autoplay

First of all, thanks for this awesome library.

Describe the bug
When using Next.js to render a HoverVideoPlayer server-side, I get the following error when rendering the page server-side (if I only render the component when typeof window !== "undefined", it works)

ReferenceError: Node is not defined
getElementFromHoverTarget 
node_modules/react-hover-video-player/dist/index.js (194:37)

I'm pretty sure this line is responsible, since node.js doesn't know the Node type.

Expected behavior
The component should render and not crash.

Versions:
Node 18.12.0, Next.js version 12.1.6, React 17.0.2

Moving this over to a separate issue because the comment was off-topic on the original post:

@dmitriy365377: Hello Gyanreyer! Do you have options "autoPlay" at your library?

Hello!

I think it would be a good option to set the video duration time to preview for users who use this component to show a small portion of video.
In my situation I have videos that reach 40/60 seconds, and I would only like to show 10. In this way, the consumption of kb/mb could be saved. And if the user wants to view the entire video, will click on the div and it opens a modal with a full video player (that modal an player is out of this component of course).

I am no expert to offer a pull request or to know if it's possible, but I assume it could be declared on HoverVideoPlayer with a property duration endtime or whatever name with ="10" (expressed in seconds).

Thanks,
S

BUG
I have a component where I use HoverVideoPlayer. When I click to another component, I want to change the video by clicking , but the video stays the same. I dont know why is happend? My data changes but the video stays the same :(
@Gyanreyer

MY COMPONENT:

console in the devtools: