Leveraging Observer Pattern with ReactJS Hooks for Video and Audio Management on a Single Web Page

Discover how to improve media component interactions in ReactJS using the Observer Pattern and custom hooks. Enhance user experience while maintaining a modular and scalable codebase.

Prerequisites

Let’s first talk about the problems we aim to solve. Nowadays, it’s common for websites to incorporate multiple media components on a single page such as videos and audio. As a result, there are several obstacles that we’ll need to overcome:

1 Could you imagine what chaos could ensue if a user played one video and didn’t stop it before starting another? To avoid such situations, we require a mechanism that automatically stops any previously playing media when a new one is started. We will develop an easily integrated useSinglePlayerPlaying react hook.

2 Imagine a website with an endless scroll of posts, some of which may have videos or audio that play inline. Users could potentially watch one video and continue scrolling to another post without pausing the first one. In this scenario, would it be logical to pause the video when it goes off-screen and resume playing it if the user scrolls back up to it? We will develop special useInsideScreenPlayerPlaying react hook.

Both hooks are based on the Observer Pattern. Let’s take a brief look at this pattern.

Observer pattern

The Observer Pattern establishes a “one-to-many” relationship between objects where any change in the subject automatically notifies multiple objects (observers). This allows for efficient and flexible communication between objects without the need for direct coupling between those components.

The diagram illustrates the central concept of this pattern.

1. useSinglePlayerPlaying hook

We can now begin our first task by implementing the Subject interface. This will involve adding the ability to register and remove media players. Each player should have a unique identifier, and we need to register a function that enables us to stop playing media content for a specific player.

export type PlayerControlsType = { stop: () => void };

class GlobalPlayMediaManager {
  players: Array<{ id: string; playerControls: PlayerControlsType }> = [];

  registerPlayer(id: string, playerControls: PlayerControlsType) {
    this.players = [...this.players, { id, playerControls }];
  }

  removePlayer(id: string) {
    this.players = this.players.filter((player) => player.id === id);
  }
}

Please note that you are not required to use the same naming conventions for the methods attach/detach shown in Picture 1. You are free to choose more relevant names that relate to your specific task. In this instance, since we are working with media players, it would be more appropriate to use methods with names registerPlayer/removePlayer.

According to picture 1, we also should implement two methods setState and notify , but again, it is not necessary strictly to follow the same name conventions of the origin pattern. In our case, we will develop one method playPlayer where we go through all registered players and stop all of them, excluding only the player that is supposed to play as the last one:

class GlobalPlayMediaManager {
   // skipped for brevity, see code above
   playPlayer(id: string) {
    this.players.forEach((player) => {
      if (player.id !== id) {
        player.playerControls.stop();
      }
    });
  }
}

It appears that we have successfully implemented the Subject interface, and now we need to integrate it into our ReactJS hook. Initially, when our player is added to the React Tree, we must register it with the implemented Subject. Additionally, we should ensure that we unregister it when the component is unmounted:

import { v4 as uuid4 } from 'uuid';

const globalPlayMediaManager = new GlobalPlayMediaManager();

export const useSinglePlayerPlaying = (playerControls: PlayerControlsType) => {
  const playerIdRef = useRef(uuid4());

  useEffect(() => {
    globalPlayMediaManager.registerPlayer(playerIdRef.current, playerControls);
    return () => {
      globalPlayMediaManager.removePlayer(playerIdRef.current);
    };
  }, []);

  const playSideEffectCallback = () => {
    globalPlayMediaManager.playPlayer(playerIdRef.current);
  };

  return { playSideEffectCallback };
};

Please note that this hook returns a function playSideEffectCallback that needs to be triggered when the media player is about to start playing. This callback will inform any other active players to stop playing.

The final step is to integrate this hook with any media player in this way:

const VideoPlayer = (props: VideoHTMLAttributes<HTMLVideoElement>) => {
  const playerRef = useRef<HTMLVideoElement>(null);

  const { playSideEffectCallback } = useSinglePlayerPlaying({
    stop: () => {
      if (playerRef.current) {
        playerRef.current.pause();
      }
    }
  });

  useEffect(() => {
    if (playerRef.current) {
      playerRef.current.addEventListener("playing", () => {
        playSideEffectCallback();
      });
    }
  }, []);

  return <video {...props} ref={playerRef} />;
};

Initially, we obtain a reference to a video HTML element, which grants us access to the player API. We need to pass stop method in useSinglePlayerPlaying hook and invoke playSideEffectCallback in the listener of the player when the video starts playing. That is it. Feel free to experiment with this implementation in the sandbox below. Try playing the first video and then the second one without pausing the first.

You can also check out the entire code on CodeSandbox.

2. useInsideScreenPlayerPlaying

Here we should know Intersection Observer API, but in general, the approach will be the same. The difference only is that we should pass as arguments to a new hook two methods that manage stop/play of player and of course a reference to the HTML element where the video is inside.

Firstly, let’s implement the Subject interface which requires two methods for registering and unregistering video players. Additionally, we need to create a private field observerand initialize an instance of IntersectionObserver. This instance will be responsible for subscribing and unsubscribing HTML elements that are being monitored for their position on the screen. It’s important to note that when a player is removed from the React Tree, it must also be unsubscribed from the IntersectionObserver.

type PlayerItem = {
  id: string;
  playerContainer: Element;
  controls: { stop: () => void; play: () => void };
};

class GlobalInsideScreenPlayerPlayingManager {
  players: Array<PlayerItem> = [];
  observer = new IntersectionObserver((entries) => {
    // we will define implementation later
  });

  registerPlayer(player: PlayerItem) {
    this.players.push(player);
  }

  removePlayer(id: string) {
    const removingPlayer = this.players.find((player) => player.id === id);
    if (removingPlayer && removingPlayer.playerContainer) {
      this.observer.unobserve(removingPlayer.playerContainer);
    }
    this.players = this.players.filter((player) => player.id === id);
  }
}

We also should implement a method notify in Observer Pattern, but the name convention for this method will be the same as we did in Chapter 1 — playPlayer. In this method, we should keep the currently active player in the private field of class activePlayer:

class GlobalInsideScreenPlayerPlayingManager {
  // code is skipped because of brevity
  activePlayer: PlayerItem | null = null;
  

  playPlayer(id: string) {
    const activePlayer = this.players.find((player) => player.id === id);
    if (activePlayer) {
      this.activePlayer = activePlayer;
      this.observer.observe(activePlayer.playerContainer);
    }
  }
}

Let’s implement a handler for IntersectionObserver that will determine whether to pause or continue playing a video based on the position of the player on the screen. If the player is on the screen, it should continue playing, but if it is outside the screen, it should be stopped:

class GlobalInsideScreenPlayerPlayingManager {
  observer = new IntersectionObserver((entries) => {
    if (
      this.activePlayer &&
      entries[0].target === this.activePlayer.playerContainer
    ) {
      if (entries[0].isIntersecting) {
        this.activePlayer.controls.play();
      }
      if (!entries[0].isIntersecting) {
        this.activePlayer.controls.stop();
      }
    }
  });
}

It’s time to create our hook, and approach absolutely the same as we did in chapter 1:

const globalInsideScreenPlayerPlayingManager = new GlobalInsideScreenPlayerPlayingManager();

const useInsideScreenPlayerPlaying = ({
  playerContainerRef,
  controls
}: {
  playerContainerRef: RefObject<Element | null>;
  controls: {
    play: () => void;
    stop: () => void;
  };
}) => {
  const playerIdRef = useRef(uuid());

  useEffect(() => {
    if (playerContainerRef?.current) {
      globalInsideScreenPlayerPlayingManager.registerPlayer({
        id: playerIdRef.current,
        playerContainer: playerContainerRef.current,
        controls
      });
    }

    return () =>
      globalInsideScreenPlayerPlayingManager.removePlayer(playerIdRef.current);
  }, []);

  return {
    playSideEffect: () =>
      globalInsideScreenPlayerPlayingManager.playPlayer(playerIdRef.current)
  };
};

Let’s integrate this hook with out custom player:

const VideoPlayer = (props: VideoHTMLAttributes<HTMLVideoElement>) => {
  const playerRef = useRef<HTMLVideoElement>(null);

  const { playSideEffect } = useInsideScreenPlayerPlaying({
    playerContainerRef: playerRef,
    controls: {
      play: () => {
        if (playerRef.current) {
          playerRef.current.play();
        }
      },
      stop: () => {
        if (playerRef.current) {
          playerRef.current.pause();
        }
      }
    }
  });

  useEffect(() => {
    if (playerRef.current) {
      playerRef.current.addEventListener("playing", () => {
        playSideEffect();
      });
    }
  }, []);

  return <video {...props} ref={playerRef} />;
};

Here you may play around with CodeSandbox of this implementation. Try to start playing any video and scroll down/up and see what will happen.

You can view the complete code in CodeSandbox as well.

And that’s a wrap! Thank you for taking the time to read this article. I would greatly appreciate any feedback you may have.