I’m building an OTT-style streaming application in Next.js using Shaka Player for DASH/HLS playback.

I want to customize the player UI and behavior similar to platforms like Disney+ Hotstar — especially features like:

• Custom control bar UI

• Auto-hide controls

• Skip intro / next episode buttons

• Custom quality selector

• Subtitle & audio track menu

• Keyboard shortcuts

• Mobile-friendly gestures

• Buffer/loading animations

• Custom seek bar preview thumbnails

• Fullscreen/PiP support

• Episode playlist sidebar

Currently I’m using the default Shaka UI overlay inside a Next.js component.

"use client";

import { useEffect, useRef } from "react";
import shaka from "shaka-player";

export default function VideoPlayer() {
  const videoRef = useRef(null);

  useEffect(() => {
    async function initPlayer() {
      const video = videoRef.current;
      if (!video) return;

      const player = new shaka.Player(video);

      try {
        await player.load("https://example.com/manifest.mpd");
        console.log("Video loaded");
      } catch (err) {
        console.error(err);
      }
    }

    initPlayer();
  }, []);

  return (