@100mslive/roomkit-react 0.1.0

package/src/Prebuilt/components/PIP/PIPManager.js

@@ -0,0 +1,296 @@
+import * as workerTimers from 'worker-timers';
+import { drawVideoElementsOnCanvas, dummyChangeInCanvas, resetPIPCanvasColors } from './pipUtils';
+import { isIOS, isMacOS, isSafari } from '../../common/constants';
+const MAX_NUMBER_OF_TILES_IN_PIP = 4;
+const DEFAULT_FPS = 30;
+const DEFAULT_CANVAS_WIDTH = 480;
+const DEFAULT_CANVAS_HEIGHT = 320;
+const LEAVE_EVENT_NAME = 'leavepictureinpicture';
+
+const PIPStates = {
+  starting: 'starting',
+  started: 'started',
+  stopping: 'stopping',
+  stopped: 'stopped',
+};
+
+/**
+ * video elements are stitched together as a canvas which is converted to
+ * another video element converted to PIP.
+ * The task is split into two parts -
+ * 1. a function which gets hit when the input changes and updates the tracks
+ * to show
+ * 2. an independent loop which updates the canvas periodically based on the current
+ * tracks which should be shown.
+ */
+class PipManager {
+  constructor() {
+    this.reset();
+  }
+
+  /**
+   * @private
+   */
+  reset() {
+    console.debug('resetting PIP state');
+    resetPIPCanvasColors();
+    this.canvas = null; // where stitching will take place
+    this.pipVideo = null; // the element which will be sent in PIP
+    this.timeoutRef = null; // setTimeout reference so it can be cancelled
+    this.hmsActions = null; // for attaching detaching
+    this.videoElements = []; // for attaching tracks
+    this.tracksToShow = [];
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    this.onStateChange = () => {}; // for user of this class to listen to changes
+    this.state = PIPStates.stopped;
+  }
+
+  /**
+   * check if PIP is supported in this browser env
+   */
+  isSupported() {
+    return !!document.pictureInPictureEnabled && !isIOS && !(isMacOS && isSafari);
+  }
+
+  /**
+   * check if pip is currently turned on
+   */
+  isOn() {
+    return !!document.pictureInPictureElement;
+  }
+
+  /**
+   * request browser to start pip and start the render loop updating the pip
+   * video element with peer tracks.
+   * @param hmsActions
+   * @param onStateChangeFn {function(bool):void} callback called to notify change in pip state
+   */
+  async start(hmsActions, onStateChangeFn) {
+    if (!this.isSupported()) {
+      throw new Error('pip is not supported on this browser');
+    }
+    console.debug('starting PIP, current state', this.state);
+    if (this.state === PIPStates.started) {
+      await this.stop(); // if anything is already running
+    } else if (this.state === PIPStates.starting) {
+      return; // ignore double clicks
+    }
+    this.state = PIPStates.starting;
+    try {
+      await this.init(hmsActions, onStateChangeFn);
+      // when user closes pip, call internal stop
+      this.pipVideo.addEventListener(LEAVE_EVENT_NAME, this.stop);
+      this.renderLoop();
+      if (!this.isOn()) {
+        await this.requestPIP();
+      }
+      console.debug('pip started');
+      this.state = PIPStates.started;
+      this.onStateChange(true);
+    } catch (err) {
+      console.error('error in request pip', err);
+      this.state = PIPStates.stopped;
+    }
+  }
+
+  stop = async () => {
+    if (this.state === PIPStates.stopped) {
+      return;
+    }
+    this.state = PIPStates.stopping;
+    this.pipVideo?.removeEventListener(LEAVE_EVENT_NAME, this.stop);
+    if (this.timeoutRef) {
+      workerTimers.clearTimeout(this.timeoutRef);
+    }
+    if (this.isOn()) {
+      this.exitPIP();
+    }
+    // detach all to avoid bandwidth consumption
+    await this.detachOldAttachNewTracks(this.tracksToShow, []);
+    this.onStateChange(false); // notify parent about this
+    this.reset(); // cleanup
+    this.state = PIPStates.stopped;
+  };
+
+  /**
+   * @param peers {Array} All Remote Peers present in call.
+   * @param tracksMap {Object} map of track id to track
+   * */
+  async updatePeersAndTracks(peers, tracksMap) {
+    if (!this.canvas) {
+      return;
+    }
+    const newTracksToShowUnordered = this.pickTracksToShow(peers, tracksMap);
+    const currentTracksShowing = this.tracksToShow;
+    this.tracksToShow = this.orderNewTracksToShow(newTracksToShowUnordered, currentTracksShowing);
+    try {
+      await this.detachOldAttachNewTracks(currentTracksShowing, this.tracksToShow, tracksMap);
+    } catch (error) {
+      console.error('error in detaching/attaching tracks', error);
+    }
+  }
+
+  // ------- Private function --------------
+
+  /**
+   * @private
+   */
+  async init(hmsActions, onStateChangeFn) {
+    await this.initMediaElements();
+    this.hmsActions = hmsActions;
+    this.onStateChange = onStateChangeFn;
+  }
+
+  async initMediaElements() {
+    if (!this.canvas) {
+      const { canvas, pipVideo } = this.initializeCanvasAndVideoElement();
+      this.canvas = canvas; // where stitching will take place
+      this.pipVideo = pipVideo; // the element which will be sent in PIP
+      this.videoElements = this.initializeVideoElements(); // for attaching tracks
+      const videoPlayPromise = this.pipVideo.play();
+      dummyChangeInCanvas(this.canvas);
+      await videoPlayPromise;
+    }
+  }
+
+  initializeCanvasAndVideoElement() {
+    const canvas = document.createElement('canvas');
+    canvas.width = DEFAULT_CANVAS_WIDTH;
+    canvas.height = DEFAULT_CANVAS_HEIGHT;
+    const pipVideo = document.createElement('video');
+    pipVideo.width = DEFAULT_CANVAS_WIDTH;
+    pipVideo.height = DEFAULT_CANVAS_HEIGHT;
+    pipVideo.muted = true;
+    pipVideo.srcObject = canvas.captureStream();
+    return { canvas, pipVideo };
+  }
+
+  initializeVideoElements() {
+    let videoElements = [];
+    for (let i = 0; i < MAX_NUMBER_OF_TILES_IN_PIP; i++) {
+      const videoElement = document.createElement('video');
+      videoElement.autoplay = true;
+      videoElement.playsinline = true;
+      videoElements.push(videoElement);
+    }
+    return videoElements;
+  }
+
+  /**
+   * render loop is responsible for rendering the video elements on canvas/pip.
+   * in each loop current video elements are stitched and painted on canvas
+   */
+  renderLoop() {
+    const delay = 1000 / DEFAULT_FPS;
+    this.timeoutRef = workerTimers.setTimeout(() => {
+      if (this.state === PIPStates.stopping || this.state === PIPStates.stopped) {
+        return;
+      }
+      if (this.state === PIPStates.started) {
+        drawVideoElementsOnCanvas(this.videoElements, this.canvas);
+      }
+      this.renderLoop();
+    }, delay);
+  }
+
+  async requestPIP() {
+    try {
+      if (this.isOn()) {
+        this.exitPIP(); // is this really needed?
+      }
+      await this.pipVideo.requestPictureInPicture();
+    } catch (error) {
+      console.error('error in requestpip', error, 'state', this.state);
+      throw error;
+    }
+  }
+
+  exitPIP() {
+    document.exitPictureInPicture();
+  }
+
+  /**
+   * Logic - pick only enabled video tracks
+   * @param peers {Array<any>}
+   * @param tracksMap {Record<string, any>}
+   */
+  pickTracksToShow(peers, tracksMap) {
+    const tracksToShow = [];
+    for (const peer of peers) {
+      if (tracksToShow.length === MAX_NUMBER_OF_TILES_IN_PIP) {
+        break;
+      } else if (peer.videoTrack && tracksMap[peer.videoTrack]?.enabled) {
+        tracksToShow.push(peer.videoTrack);
+      }
+    }
+    return tracksToShow;
+  }
+
+  /**
+   * there has to be a smart reordering of new tracks based on currently showing
+   * ones to reduce unnecessary displacement. If someone was showing up both
+   * earlier and now, it's a better UX to keep their position same instead
+   * of letting it change.
+   * The returned array is a shuffled version of newTracks with position of
+   * tracks present in the old tracks intact.
+   * eg. old = [1,5,9,3], new = [3,8,2,9], result = [8,2,9,3]
+   * @param oldTracks {Array}
+   * @param newTracks {Array}
+   * @return {Array}
+   */
+  orderNewTracksToShow(newTracks, oldTracks) {
+    const betterNewTracks = [];
+    const leftOvers = [];
+    // put the common ones in right position
+    newTracks.forEach(track => {
+      const oldPosition = oldTracks.indexOf(track);
+      if (oldPosition !== -1 && oldPosition < newTracks.length) {
+        // if track is there currently and we can put it on the same position
+        betterNewTracks[oldPosition] = track;
+      } else {
+        leftOvers.push(track);
+      }
+    });
+    // put the left overs in remaining empty positions
+    for (let i = 0; i < newTracks.length; i++) {
+      if (!betterNewTracks[i]) {
+        betterNewTracks[i] = leftOvers.shift();
+      }
+    }
+    return betterNewTracks;
+  }
+
+  /**
+   * call detach for tracks which no longer need to be shown and attach for
+   * new ones which are to be shown now.
+   * Note: oldTracks and newTracks are not necessarily of same length
+   * @param oldTracks {Array<String>}
+   * @param newTracks {Array<String>}
+   * @param tracksMap {Record<String, any>}
+   */
+  // eslint-disable-next-line complexity
+  async detachOldAttachNewTracks(oldTracks, newTracks, tracksMap = null) {
+    const numTracks = Math.max(oldTracks.length, newTracks.length);
+    for (let i = 0; i < numTracks; i++) {
+      if (oldTracks[i] === newTracks[i]) {
+        continue; // it would already have been attached previously
+      } else if (oldTracks[i]) {
+        // old track is there but not equal to new track, detach
+        // no need to call detach if we know for sure track is no longer in store
+        if (!tracksMap || tracksMap[oldTracks[i]]) {
+          await this.hmsActions.detachVideo(oldTracks[i], this.videoElements[i]);
+        }
+        if (this.videoElements[i]) {
+          // even if old track got removed from the room, element needs to be cleaned up
+          this.videoElements[i].srcObject = null;
+        }
+      }
+      if (newTracks[i]) {
+        await this.hmsActions.attachVideo(newTracks[i], this.videoElements[i]);
+      }
+    }
+  }
+}
+
+export const PictureInPicture = new PipManager();
+// PictureInPicture.initMediaElements().catch(console.error);  // for safari, init early

package/src/Prebuilt/components/PIP/SetupMediaSession.js

@@ -0,0 +1,60 @@
+import { selectIsLocalAudioEnabled, selectIsLocalVideoEnabled } from '@100mslive/react-sdk';
+
+/**
+ * Media Session API allows for handling control actions on top of pip
+ * https://web.dev/media-session/#video-conferencing-actions
+ */
+class SetupMediaSession {
+  setup = (actions, store) => {
+    this.actions = actions;
+    this.store = store;
+    this.initState();
+    this.setUpHandlers();
+  };
+
+  initState = () => {
+    const isMicActive = this.store.getState(selectIsLocalAudioEnabled);
+    const isCamActive = this.store.getState(selectIsLocalVideoEnabled);
+    navigator.mediaSession?.setMicrophoneActive?.(isMicActive);
+    navigator.mediaSession?.setCameraActive?.(isCamActive);
+
+    this.store.subscribe(isMicActive => {
+      navigator.mediaSession?.setMicrophoneActive?.(isMicActive);
+    }, selectIsLocalAudioEnabled);
+
+    this.store.subscribe(isCamActive => {
+      navigator.mediaSession?.setCameraActive?.(isCamActive);
+    }, selectIsLocalVideoEnabled);
+  };
+
+  toggleMic = async () => {
+    console.log('toggle mic clicked in pip');
+    const current = this.store.getState(selectIsLocalAudioEnabled);
+    await this.actions.setLocalAudioEnabled(!current);
+  };
+
+  toggleCam = async () => {
+    console.log('toggle cam clicked in pip');
+    const current = this.store.getState(selectIsLocalVideoEnabled);
+    await this.actions.setLocalVideoEnabled(!current);
+  };
+
+  leave = () => {
+    console.log('leave called from pip');
+    this.actions.leave();
+  };
+
+  setUpHandlers = () => {
+    if (navigator.mediaSession) {
+      try {
+        navigator.mediaSession.setActionHandler('togglemicrophone', this.toggleMic);
+        navigator.mediaSession.setActionHandler('togglecamera', this.toggleCam);
+        navigator.mediaSession.setActionHandler('hangup', this.leave);
+      } catch (err) {
+        console.error('error in setting media session handlers', err);
+      }
+    }
+  };
+}
+
+export const MediaSession = new SetupMediaSession();

package/src/Prebuilt/components/PIP/index.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import PIPComponent from './PIPComponent';
+import { usePinnedTrack } from '../AppData/useUISettings';
+
+export const PIP = () => {
+  const pinnedTrack = usePinnedTrack();
+
+  return (
+    <PIPComponent peers={pinnedTrack && pinnedTrack.enabled ? [pinnedTrack.peerId] : undefined} showLocalPeer={true} />
+  );
+};

package/src/Prebuilt/components/PIP/pip.test.js

@@ -0,0 +1,72 @@
+import { PictureInPicture } from './PIPManager';
+
+describe('pip manager tests', () => {
+  /**
+   * Ensure that if a track is showing in both before and after, it's at the
+   * same position.
+   */
+  test('merging old and new tracks to show avoids shuffling', () => {
+    const makeTestData = (oldArr, newArr, result) => {
+      return { oldArr, newArr, result };
+    };
+
+    const examples = [
+      makeTestData([1, 5, 9, 3], [3, 8, 2, 9], [8, 2, 9, 3]),
+      makeTestData([1, 3, 5], [5, 3, 1], [1, 3, 5]),
+      makeTestData([2, 7, 9, 4], [9, 2, 4, 6], [2, 6, 9, 4]),
+      makeTestData([1, 2, 3], [4, 5, 6], [4, 5, 6]),
+      makeTestData([1, 2], [4, 5, 2, 1], [1, 2, 4, 5]),
+      makeTestData([4, 1, 2, 3], [1, 3], [3, 1]),
+      makeTestData([4, 5, 1, 3], [1, 3], [1, 3]),
+      makeTestData([], [1, 3], [1, 3]),
+      makeTestData([1, 3], [], []),
+      makeTestData([1], [4, 2, 1, 3], [1, 4, 2, 3]),
+      makeTestData([4, 2, 1, 3], [1], [1]),
+      makeTestData([], [], []),
+    ];
+
+    examples.forEach(example => {
+      expect(PictureInPicture.orderNewTracksToShow(example.newArr, example.oldArr)).toEqual(example.result);
+    });
+  });
+
+  /**
+   * It's very important that detach is properly called for old tracks to guarantee
+   * no unnecessary bandwidth consumption.
+   * For simplicity's sake currently, detach/attach is done if position of
+   * the track changes as well. That is earlier it was showing on third position
+   * but not it's on second position(because there are only two tracks left to show).
+   */
+  test('attach and detach are called properly after tracks in view changes', async () => {
+    const makeTestData = (oldTracks, newTracks, detachFor, attachFor) => {
+      return { oldTracks, newTracks, detachFor, attachFor };
+    };
+
+    let attachCalledFor = [];
+    let detachCalledFor = [];
+    PictureInPicture.hmsActions = {
+      attachVideo: jest.fn(track => attachCalledFor.push(track)),
+      detachVideo: jest.fn(track => detachCalledFor.push(track)),
+    };
+
+    const examples = [
+      makeTestData([1, 2], [3, 4], [1, 2], [3, 4]),
+      makeTestData([1, 2], [1, 2], [], []),
+      makeTestData([1, 5, 9, 3], [8, 2, 9, 3], [1, 5], [8, 2]),
+      makeTestData([1, 5, 9], [6, 5, 9], [1], [6]),
+      makeTestData([], [1, 3], [], [1, 3]),
+      makeTestData([1, 3], [], [1, 3], []),
+      makeTestData([1], [4, 2, 1, 3], [1], [4, 2, 1, 3]),
+      makeTestData([4, 2, 1, 3], [1], [4, 2, 1, 3], [1]),
+      makeTestData([], [], [], []),
+    ];
+
+    for (let example of examples) {
+      attachCalledFor = [];
+      detachCalledFor = [];
+      await PictureInPicture.detachOldAttachNewTracks(example.oldTracks, example.newTracks);
+      expect(attachCalledFor).toEqual(example.attachFor);
+      expect(detachCalledFor).toEqual(example.detachFor);
+    }
+  });
+});

package/src/Prebuilt/components/PIP/pipUtils.js

@@ -0,0 +1,183 @@
+let CANVAS_FILL_COLOR;
+let CANVAS_STROKE_COLOR;
+
+function setPIPCanvasColors() {
+  if (!CANVAS_FILL_COLOR) {
+    CANVAS_FILL_COLOR = window
+      .getComputedStyle(document.documentElement)
+      .getPropertyValue('--hms-ui-colors-surfaceLight');
+  }
+  if (!CANVAS_STROKE_COLOR) {
+    CANVAS_STROKE_COLOR = window
+      .getComputedStyle(document.documentElement)
+      .getPropertyValue('--hms-ui-colors-borderLight');
+  }
+}
+
+export function resetPIPCanvasColors() {
+  CANVAS_FILL_COLOR = '';
+  CANVAS_STROKE_COLOR = '';
+}
+/**
+ * no tile - blank canvas, black image
+ * 1 tile - takes full space on canvas
+ * 2 tile - stack two video adjacent to each other
+ * 3 tile - two rows first row has two tile second row has one tile centered.
+ * 4 tiles - two rows two columns - all equal size
+ * All videos will respect their aspect ratios.
+ */
+export function drawVideoElementsOnCanvas(videoElements, canvas) {
+  let videoTiles = videoElements.filter(videoElement => videoElement.srcObject !== null);
+
+  const ctx = canvas.getContext('2d');
+  setPIPCanvasColors();
+  ctx.fillStyle = CANVAS_FILL_COLOR;
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+  if (videoTiles.length === 0) {
+    // no tile to render, render black image
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+    return;
+  }
+
+  fillGridTiles(videoTiles.slice(0, 4), ctx, canvas);
+}
+
+// this is to send some data for stream and resolve video element's play for a
+// video element rendering this canvas' capture stream
+export function dummyChangeInCanvas(canvas) {
+  const ctx = canvas.getContext('2d');
+  setPIPCanvasColors();
+  ctx.fillStyle = CANVAS_FILL_COLOR;
+  ctx.fillRect(0, 0, canvas.width, canvas.height);
+}
+
+/**
+ * Imagine the canvas as a grid with passed in number of rows and columns. Go
+ * over the tiles in the grid in order while drawing the videoElements upon them.
+ */
+function fillGridTiles(videoElements, ctx, canvas) {
+  const offset = 8;
+  canvas.width = 480;
+  canvas.height = 320;
+
+  ctx.fillStyle = CANVAS_FILL_COLOR;
+  ctx.fillRect(0, 0, canvas.width, canvas.height);
+  // Show borders only when there is atleast one video
+  if (videoElements.length > 0) {
+    ctx.strokeStyle = CANVAS_STROKE_COLOR;
+    ctx.lineWidth = offset / 2;
+    ctx.strokeRect(0, 0, canvas.width, canvas.height);
+  }
+
+  if (videoElements.length === 1) {
+    const video = videoElements[0];
+    const { width, height } = getRenderDimensions(video, canvas.width - offset, canvas.height - offset);
+    /**
+     * The x and y offset are to center the video tile horizontally and vertically
+     * width and height are the aspect ratio constrained video tile dimensions
+     */
+    const xOffset = (canvas.width - width) / 2;
+    const yOffset = (canvas.height - height) / 2;
+    ctx.drawImage(video, xOffset, yOffset, width, height);
+  }
+
+  if (videoElements.length === 2) {
+    videoElements.forEach((video, index) => {
+      const { width, height } = getRenderDimensions(
+        video,
+        canvas.width / 2 - offset, // This will be the max available width for each tile
+        canvas.height - offset,
+      );
+      /**
+       * (canvas.width / 2 - width) / 2 This is to center width wise within in the box
+       * (canvas.width / 2) * index This is the start offset
+       * for 1st element it is 0, for second it will be canvas.width/2 which starts from the center
+       */
+      const xOffset = (canvas.width / 2 - width) / 2 + (canvas.width / 2) * index;
+      /**
+       * (canvas.height - height) / 2 This is to center height wise
+       */
+      const yOffset = (canvas.height - height) / 2;
+
+      ctx.drawImage(video, xOffset, yOffset, width, height);
+    });
+    /**
+     * Draw a border between tiles
+     */
+    const path = new Path2D();
+    path.moveTo(canvas.width / 2, 0);
+    path.lineTo(canvas.width / 2, canvas.height);
+    ctx.stroke(path);
+  }
+
+  if (videoElements.length === 3) {
+    videoElements.forEach((video, index) => {
+      const { width, height } = getRenderDimensions(video, canvas.width / 2 - offset, canvas.height / 2 - offset);
+      /**
+       * for first two tiles, xOffset is similar to the 2 tiles calculation with only difference being the height. it is half now.
+       */
+      const xOffset =
+        index < 2 ? (canvas.width / 2 - width) / 2 + (canvas.width / 2) * index : canvas.width / 2 - width / 2;
+      const yOffset = (index < 2 ? 0 : canvas.height / 2) + (canvas.height / 2 - height) / 2;
+
+      ctx.drawImage(video, xOffset, yOffset, width, height);
+    });
+    /**
+     * Draw borders between tiles
+     */
+    const path = new Path2D();
+    path.moveTo(canvas.width / 2, 0);
+    path.lineTo(canvas.width / 2, canvas.height / 2);
+    ctx.stroke(path);
+    path.moveTo(0, canvas.height / 2);
+    path.lineTo(canvas.width, canvas.height / 2);
+    ctx.stroke(path);
+  }
+  if (videoElements.length === 4) {
+    videoElements.forEach((video, index) => {
+      const { width, height } = getRenderDimensions(video, canvas.width / 2 - offset, canvas.height / 2 - offset);
+      /**
+       * Similar to two tiles repeat after 2 tiles
+       * (canvas.width / 2 - width) / 2 is to center horizontally
+       */
+      const xOffset = (canvas.width / 2 - width) / 2 + (canvas.width / 2) * (index % 2);
+      /**
+       * Similar to two tiles with the yOffset being height/2 for the 3rd and 4th tiles
+       * (canvas.height / 2 - height) / 2 is to center vertically
+       */
+      const yOffset = (index < 2 ? 0 : canvas.height / 2) + (canvas.height / 2 - height) / 2;
+
+      ctx.drawImage(video, xOffset, yOffset, width, height);
+    });
+    /**
+     * Draw borders between tiles
+     */
+    const path = new Path2D();
+    path.moveTo(canvas.width / 2, 0);
+    path.lineTo(canvas.width / 2, canvas.height);
+    ctx.stroke(path);
+    path.moveTo(0, canvas.height / 2);
+    path.lineTo(canvas.width, canvas.height / 2);
+    ctx.stroke(path);
+  }
+}
+
+/**
+ * Restrict the dimensions within the available dimension with aspect ratio
+ * constraint applied
+ * @param {HTMLVideoElement} video
+ * @param {number} width
+ * @param {number} height
+ * @returns { width: number, height: number }
+ */
+function getRenderDimensions(video, width, height) {
+  let finalWidth = (video.videoWidth / video.videoHeight) * height;
+  let finalHeight = height;
+
+  if (finalWidth > width) {
+    finalWidth = width;
+    finalHeight = (video.videoHeight / video.videoWidth) * width;
+  }
+  return { width: finalWidth, height: finalHeight };
+}

package/src/Prebuilt/components/Pagination.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { ChevronLeftIcon, ChevronRightIcon } from '@100mslive/react-icons';
+import { StyledPagination } from '../../Pagination';
+
+export const Pagination = ({ page, setPage, numPages }) => {
+  const disableLeft = page === 0;
+  const disableRight = page === numPages - 1;
+  const nextPage = () => {
+    setPage(Math.min(page + 1, numPages - 1));
+  };
+  const prevPage = () => {
+    setPage(Math.max(page - 1, 0));
+  };
+  return (
+    <StyledPagination.Root>
+      <StyledPagination.Chevron disabled={disableLeft} onClick={prevPage}>
+        <ChevronLeftIcon width={16} height={16} style={{ cursor: disableLeft ? 'not-allowed' : 'pointer' }} />
+      </StyledPagination.Chevron>
+      <StyledPagination.Dots>
+        {[...Array(numPages)].map((_, i) => (
+          <StyledPagination.Dot key={i} active={page === i} onClick={() => setPage(i)} />
+        ))}
+      </StyledPagination.Dots>
+      <StyledPagination.Chevron disabled={disableRight} onClick={nextPage}>
+        <ChevronRightIcon width={16} height={16} style={{ cursor: disableRight ? 'not-allowed' : 'pointer' }} />
+      </StyledPagination.Chevron>
+    </StyledPagination.Root>
+  );
+};