Open Shaxadhere opened 1 year ago
here is how you can do it in react with typescript
import { useEffect, useRef, useState } from "react";
import { Player } from "react-tuby";
import "react-tuby/css/main.css";
export default function ReelPlayerWidgetV2({
video,
}: {
video: { id: number; url: string };
}) {
const handleIntersection = (entries: any[]) => {
// entries is an array of observed elements
entries.forEach((entry) => {
let vid: HTMLMediaElement | null = document.getElementById(
"reel-player-id" + video.id
) as HTMLMediaElement;
if (entry.isIntersecting) {
if (vid) {
vid.play();
}
} else {
vid.pause();
}
});
};
useEffect(() => {
const options = {
root: null, // Use the viewport as the root
rootMargin: "0px",
threshold: 0.5, // 50% of the element is in the viewport
};
const observer = new IntersectionObserver(handleIntersection, options);
const target = document.getElementById("reel-player-id" + video.id);
if (target) {
observer.observe(target);
}
// Cleanup the observer when the component unmounts
return () => {
if (target) {
observer.unobserve(target);
}
};
}, []);
return (
<div className="relative video-player snap-start">
<Player
src={[
{
quality: "Full HD",
url: video.url,
},
]}
subtitles={[
{
lang: "en",
language: "English",
url: "https://cdn.jsdelivr.net/gh/naptestdev/video-examples@master/en.vtt",
},
{
lang: "fr",
language: "French",
url: "https://cdn.jsdelivr.net/gh/naptestdev/video-examples@master/fr.vtt",
},
]}
>
{(ref, props) => (
<video
ref={ref}
{...props}
autoPlay
loop
playsInline
className="object-cover w-full"
id={"reel-player-id" + video.id}
/>
)}
</Player>
</div>
);
}
Basically i just want one player to be playing at a time. I would've done it with ref and ur way of pausing but it would require me to change the package files which I don't want to.