Is there any possible way to pause all the players on the page when one player is played

[Shaxadhere]

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.

[kthehatter]

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>
  );
}