softbuilders-react-video-player 1.1.8 → 1.1.10

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2024 masri-softbuilders
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2024 masri-softbuilders
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,126 +1,126 @@
-# Usage
-
-## install the package
-
-```bash
-    npm i softbuilders-video-player
-```
-
-## How to use
-
-```typescript
-import SoftBuildersVideoPlayer, {
-  SoftBuildersVideoPlayerOptions,
-  SoftBuildersVideoPlayerChapter,
-  SoftBuildersVideoPlayerNote,
-} from "softbuilders-video-player";
-
-const options: SoftBuildersVideoPlayerOptions = {
-  autoplay: false,
-  controls: true,
-  muted: true,
-  fluid: true,
-  poster: "http://example.com/thumbnail.png", // thumbnail preview image
-  height: 420,
-  width: 720,
-  sources: [
-    {
-      src: "https://upload.wikimedia.org/wikipedia/commons/transcoded/a/ab/Caminandes_3_-_Llamigos_-_Blender_Animated_Short.webm/Caminandes_3_-_Llamigos_-_Blender_Animated_Short.webm.360p.vp9.webm",
-      type: "video/webm",
-      label: "360p",
-    },
-    {
-      src: "https://upload.wikimedia.org/wikipedia/commons/transcoded/a/ab/Caminandes_3_-_Llamigos_-_Blender_Animated_Short.webm/Caminandes_3_-_Llamigos_-_Blender_Animated_Short.webm.1080p.vp9.webm",
-      type: "video/webm",
-      label: "1080P",
-    },
-  ],
-  tracks: [
-    {
-      kind: "captions",
-      src: "https://raw.githubusercontent.com/brenopolanski/html5-video-webvtt-example/master/MIB2-subtitles-pt-BR.vtt",
-      srclang: "en",
-      label: "English",
-      memeType: "text/vtt", // text/vtt or text/srt
-      default: true,
-    },
-    {
-      kind: "captions",
-      src: "https://gist.githubusercontent.com/samdutton/ca37f3adaf4e23679957b8083e061177/raw/e19399fbccbc069a2af4266e5120ae6bad62699a/sample.vtt",
-      srclang: "es",
-      label: "Espaniol",
-      memeType: "text/vtt", // text/vtt or text/srt
-    },
-  ], // only vtt suptitilers are supported for now
-};
-
-const initNotes: SoftBuildersVideoPlayerNote[] = [
-  {
-    time: 5,
-    label: "Start",
-  },
-  {
-    time: 30,
-    label: "Say Hello",
-  },
-  {
-    time: 69,
-    label: "Go deep",
-  },
-  {
-    time: 99,
-    label: "Details ...",
-  },
-  {
-    time: 140,
-    label: "End",
-  },
-];
-
-const initChapters: SoftBuildersVideoPlayerChapter[] = [
-  {
-    startTime: 25,
-    endTime: 50,
-    title: "01 Note: **** Important ****",
-  },
-  {
-    startTime: 70,
-    endTime: 100,
-    title: "02 Note: To Do",
-  },
-  { startTime: 110, endTime: 120, title: "03 Note: DIY (Do it yourself)" },
-  {
-    startTime: 125,
-    endTime: 140,
-    title: "05 Note: Conclusion ",
-  },
-];
-
-const Component = () => {
-  const handleSaveNoteAction = (time: number, note: string) => {
-    return new Promise((resolve) => {
-      resolve(true);
-    });
-  };
-
-  const onPause = (time: number) => {
-    console.log(`Video has been Paused at time (${time} sec)`);
-  };
-  const onPlay = (time: number) => {
-    console.log(`Video has been Played at time (${time} sec)`);
-  };
-
-  return (
-    <SoftBuildersVideoPlayer
-      options={options}
-      chapters={initChapters}
-      notes={initNotes}
-      handleSaveNoteAction={handleSaveNoteAction}
-      onPause={onPause}
-      onPlay={onPlay}
-    />
-  );
-};
-
-export default Component;
-```
+# Usage
+
+## install the package
+
+```bash
+    npm i softbuilders-video-player
+```
+
+## How to use
+
+```typescript
+import SoftBuildersVideoPlayer, {
+  SoftBuildersVideoPlayerOptions,
+  SoftBuildersVideoPlayerChapter,
+  SoftBuildersVideoPlayerNote,
+} from "softbuilders-video-player";
+
+const options: SoftBuildersVideoPlayerOptions = {
+  autoplay: false,
+  controls: true,
+  muted: true,
+  fluid: true,
+  poster: "http://example.com/thumbnail.png", // thumbnail preview image
+  height: 420,
+  width: 720,
+  sources: [
+    {
+      src: "https://upload.wikimedia.org/wikipedia/commons/transcoded/a/ab/Caminandes_3_-_Llamigos_-_Blender_Animated_Short.webm/Caminandes_3_-_Llamigos_-_Blender_Animated_Short.webm.360p.vp9.webm",
+      type: "video/webm",
+      label: "360p",
+    },
+    {
+      src: "https://upload.wikimedia.org/wikipedia/commons/transcoded/a/ab/Caminandes_3_-_Llamigos_-_Blender_Animated_Short.webm/Caminandes_3_-_Llamigos_-_Blender_Animated_Short.webm.1080p.vp9.webm",
+      type: "video/webm",
+      label: "1080P",
+    },
+  ],
+  tracks: [
+    {
+      kind: "captions",
+      src: "https://raw.githubusercontent.com/brenopolanski/html5-video-webvtt-example/master/MIB2-subtitles-pt-BR.vtt",
+      srclang: "en",
+      label: "English",
+      memeType: "text/vtt", // text/vtt or text/srt
+      default: true,
+    },
+    {
+      kind: "captions",
+      src: "https://gist.githubusercontent.com/samdutton/ca37f3adaf4e23679957b8083e061177/raw/e19399fbccbc069a2af4266e5120ae6bad62699a/sample.vtt",
+      srclang: "es",
+      label: "Espaniol",
+      memeType: "text/vtt", // text/vtt or text/srt
+    },
+  ], // only vtt suptitilers are supported for now
+};
+
+const initNotes: SoftBuildersVideoPlayerNote[] = [
+  {
+    time: 5,
+    label: "Start",
+  },
+  {
+    time: 30,
+    label: "Say Hello",
+  },
+  {
+    time: 69,
+    label: "Go deep",
+  },
+  {
+    time: 99,
+    label: "Details ...",
+  },
+  {
+    time: 140,
+    label: "End",
+  },
+];
+
+const initChapters: SoftBuildersVideoPlayerChapter[] = [
+  {
+    startTime: 25,
+    endTime: 50,
+    title: "01 Note: **** Important ****",
+  },
+  {
+    startTime: 70,
+    endTime: 100,
+    title: "02 Note: To Do",
+  },
+  { startTime: 110, endTime: 120, title: "03 Note: DIY (Do it yourself)" },
+  {
+    startTime: 125,
+    endTime: 140,
+    title: "05 Note: Conclusion ",
+  },
+];
+
+const Component = () => {
+  const handleSaveNoteAction = (time: number, note: string) => {
+    return new Promise((resolve) => {
+      resolve(true);
+    });
+  };
+
+  const onPause = (time: number) => {
+    console.log(`Video has been Paused at time (${time} sec)`);
+  };
+  const onPlay = (time: number) => {
+    console.log(`Video has been Played at time (${time} sec)`);
+  };
+
+  return (
+    <SoftBuildersVideoPlayer
+      options={options}
+      chapters={initChapters}
+      notes={initNotes}
+      handleSaveNoteAction={handleSaveNoteAction}
+      onPause={onPause}
+      onPlay={onPlay}
+    />
+  );
+};
+
+export default Component;
+```

package/dist/components/BigPlayButton/index.js

@@ -8,7 +8,7 @@ const BigPlayButton = ({ player, isPaused, setIsPaused }) => {
             player === null || player === void 0 ? void 0 : player.pause();
         setIsPaused(!isPaused);
     };
-    return (_jsx("button", { onClick: togglePlay, children: _jsx("div", { className: "sb-w-16 sb-h-16 sb-rounded-full sb-bg-white/30 sb-backdrop-blur-lg sb-flex sb-items-center sb-justify-center ", children: isPaused ? (_jsx(PlayIcon, { className: "sb-w-4 sb-h-4" })) : (_jsx(PauseIcon, { className: "sb-w-4 sb-h-4" })) }) }));
+    return (_jsx("div", { onClick: togglePlay, className: "sb-w-16 sb-h-16 sb-rounded-full sb-bg-white/30 sb-backdrop-blur-lg sb-flex sb-items-center sb-justify-center ", children: isPaused ? (_jsx(PlayIcon, { className: "sb-w-4 sb-h-4" })) : (_jsx(PauseIcon, { className: "sb-w-4 sb-h-4" })) }));
 };
 export default BigPlayButton;
 //# sourceMappingURL=index.js.map

package/dist/components/BigPlayButton/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/BigPlayButton/index.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAOnD,MAAM,aAAa,GAAG,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,WAAW,EAAS,EAAE,EAAE;IACjE,MAAM,UAAU,GAAG,GAAG,EAAE;QACtB,IAAI,QAAQ;YAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,EAAE,CAAC;;YACxB,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,EAAE,CAAC;QAErB,WAAW,CAAC,CAAC,QAAQ,CAAC,CAAC;IACzB,CAAC,CAAC;IAEF,OAAO,CACL,iBAAQ,OAAO,EAAE,UAAU,YACzB,cAAK,SAAS,EAAC,+GAA+G,YAC3H,QAAQ,CAAC,CAAC,CAAC,CACV,KAAC,QAAQ,IAAC,SAAS,EAAC,eAAe,GAAG,CACvC,CAAC,CAAC,CAAC,CACF,KAAC,SAAS,IAAC,SAAS,EAAC,eAAe,GAAG,CACxC,GACG,GACC,CACV,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/BigPlayButton/index.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAQnD,MAAM,aAAa,GAAG,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,WAAW,EAAS,EAAE,EAAE;IACjE,MAAM,UAAU,GAAG,GAAG,EAAE;QACtB,IAAI,QAAQ;YAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,EAAE,CAAC;;YACxB,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,EAAE,CAAC;QAErB,WAAW,CAAC,CAAC,QAAQ,CAAC,CAAC;IACzB,CAAC,CAAC;IAEF,OAAO,CACL,cACE,OAAO,EAAE,UAAU,EACnB,SAAS,EAAC,+GAA+G,YAExH,QAAQ,CAAC,CAAC,CAAC,CACV,KAAC,QAAQ,IAAC,SAAS,EAAC,eAAe,GAAG,CACvC,CAAC,CAAC,CAAC,CACF,KAAC,SAAS,IAAC,SAAS,EAAC,eAAe,GAAG,CACxC,GACG,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/components/BigPlayButton/index.tsx

@@ -1,31 +1,33 @@
-import React from "react";
-import Player from "video.js/dist/types/player";
-import { PauseIcon, PlayIcon } from "../../images";
-
-type Props = {
-  player: Player | undefined;
-  isPaused: boolean;
-  setIsPaused: React.Dispatch<React.SetStateAction<boolean>>;
-};
-const BigPlayButton = ({ player, isPaused, setIsPaused }: Props) => {
-  const togglePlay = () => {
-    if (isPaused) player?.play();
-    else player?.pause();
-
-    setIsPaused(!isPaused);
-  };
-
-  return (
-    <button onClick={togglePlay}>
-      <div className="sb-w-16 sb-h-16 sb-rounded-full sb-bg-white/30 sb-backdrop-blur-lg sb-flex sb-items-center sb-justify-center ">
-        {isPaused ? (
-          <PlayIcon className="sb-w-4 sb-h-4" />
-        ) : (
-          <PauseIcon className="sb-w-4 sb-h-4" />
-        )}
-      </div>
-    </button>
-  );
-};
-
-export default BigPlayButton;
+import React from "react";
+import Player from "video.js/dist/types/player";
+import { PauseIcon, PlayIcon } from "../../images";
+import log from "video.js/dist/types/utils/log";
+
+type Props = {
+  player: Player | undefined;
+  isPaused: boolean;
+  setIsPaused: React.Dispatch<React.SetStateAction<boolean>>;
+};
+const BigPlayButton = ({ player, isPaused, setIsPaused }: Props) => {
+  const togglePlay = () => {
+    if (isPaused) player?.play();
+    else player?.pause();
+
+    setIsPaused(!isPaused);
+  };
+
+  return (
+    <div
+      onClick={togglePlay}
+      className="sb-w-16 sb-h-16 sb-rounded-full sb-bg-white/30 sb-backdrop-blur-lg sb-flex sb-items-center sb-justify-center "
+    >
+      {isPaused ? (
+        <PlayIcon className="sb-w-4 sb-h-4" />
+      ) : (
+        <PauseIcon className="sb-w-4 sb-h-4" />
+      )}
+    </div>
+  );
+};
+
+export default BigPlayButton;

package/dist/components/BufferTracker/index.tsx

@@ -1,19 +1,19 @@
-import React, { useEffect } from "react";
-import { useSoftBuildersVideoPlayerContext } from "../VideoPlayerComponent/provider";
-
-const BufferTracker = () => {
-  const { player, setDownloadedBufferTimeufferTime } =
-    useSoftBuildersVideoPlayerContext();
-
-  useEffect(() => {
-    const intervalId = setInterval(() => {
-      if (player) setDownloadedBufferTimeufferTime(player.bufferedEnd());
-    }, 1000);
-
-    // Cleanup function to clear the interval
-    return () => clearInterval(intervalId);
-  }, [player]);
-  return <></>;
-};
-
-export default BufferTracker;
+import React, { useEffect } from "react";
+import { useSoftBuildersVideoPlayerContext } from "../VideoPlayerComponent/provider";
+
+const BufferTracker = () => {
+  const { player, setDownloadedBufferTimeufferTime } =
+    useSoftBuildersVideoPlayerContext();
+
+  useEffect(() => {
+    const intervalId = setInterval(() => {
+      if (player) setDownloadedBufferTimeufferTime(player.bufferedEnd());
+    }, 1000);
+
+    // Cleanup function to clear the interval
+    return () => clearInterval(intervalId);
+  }, [player]);
+  return <></>;
+};
+
+export default BufferTracker;

package/dist/components/ChapterTooltip/index.tsx

@@ -1,65 +1,65 @@
-import React, { useEffect, useState } from "react";
-import Tooltip from "../Tooltip";
-import { durationFormater } from "../../utils";
-import { SoftBuildersVideoPlayerChapter } from "../../types";
-import { useSoftBuildersVideoPlayerContext } from "../VideoPlayerComponent/provider";
-type Chapter = SoftBuildersVideoPlayerChapter & {
-  startPercentage: number;
-  endPercentage: number;
-};
-type Props = {
-  chapter: Chapter;
-};
-const ChapterTooltip = ({ chapter }: Props) => {
-  const { player } = useSoftBuildersVideoPlayerContext();
-
-  const [open, setOpen] = useState(false);
-  const { currentTime } = useSoftBuildersVideoPlayerContext();
-
-  useEffect(() => {
-    if (currentTime === Math.floor(chapter.startTime)) {
-      setOpen(true);
-
-      setTimeout(() => {
-        setOpen(false);
-      }, 5000);
-    }
-  }, [currentTime, chapter.startTime]);
-
-  const handleClickChapter = () => {
-    player?.currentTime(chapter.startTime);
-  };
-
-  return (
-    <div
-      id={`ii-section-${chapter.title}`}
-      className="sb-flex sb-items-center sb-w-full sb-h-full sb-absolute sb-z-20"
-      style={{
-        left: `${chapter.startPercentage}%`,
-        width: `${chapter.endPercentage - chapter.startPercentage}%`,
-      }}
-      onMouseEnter={() => setOpen(true)}
-      onMouseLeave={() => setOpen(false)}
-    >
-      <button
-        id={`section-${chapter.title}`}
-        className="sb-h-full sb-w-full"
-        onClick={handleClickChapter}
-      >
-        <div className="sb-relative sb-flex sb-h-full sb-w-full sb-justify-between sb-items-center">
-          <Tooltip open={open}>
-            <div className="sb-flex sb-flex-col sb-gap-2 sb-items-center">
-              <p>{chapter.title}</p>
-              <p className="sb-p-2 sb-bg-[#303030] sb-bg-opacity-50 sb-rounded-md">
-                {durationFormater(chapter.startTime)} -{" "}
-                {durationFormater(chapter.endTime)}
-              </p>
-            </div>
-          </Tooltip>
-        </div>
-      </button>
-    </div>
-  );
-};
-
-export default ChapterTooltip;
+import React, { useEffect, useState } from "react";
+import Tooltip from "../Tooltip";
+import { durationFormater } from "../../utils";
+import { SoftBuildersVideoPlayerChapter } from "../../types";
+import { useSoftBuildersVideoPlayerContext } from "../VideoPlayerComponent/provider";
+type Chapter = SoftBuildersVideoPlayerChapter & {
+  startPercentage: number;
+  endPercentage: number;
+};
+type Props = {
+  chapter: Chapter;
+};
+const ChapterTooltip = ({ chapter }: Props) => {
+  const { player } = useSoftBuildersVideoPlayerContext();
+
+  const [open, setOpen] = useState(false);
+  const { currentTime } = useSoftBuildersVideoPlayerContext();
+
+  useEffect(() => {
+    if (currentTime === Math.floor(chapter.startTime)) {
+      setOpen(true);
+
+      setTimeout(() => {
+        setOpen(false);
+      }, 5000);
+    }
+  }, [currentTime, chapter.startTime]);
+
+  const handleClickChapter = () => {
+    player?.currentTime(chapter.startTime);
+  };
+
+  return (
+    <div
+      id={`ii-section-${chapter.title}`}
+      className="sb-flex sb-items-center sb-w-full sb-h-full sb-absolute sb-z-20"
+      style={{
+        left: `${chapter.startPercentage}%`,
+        width: `${chapter.endPercentage - chapter.startPercentage}%`,
+      }}
+      onMouseEnter={() => setOpen(true)}
+      onMouseLeave={() => setOpen(false)}
+    >
+      <button
+        id={`section-${chapter.title}`}
+        className="sb-h-full sb-w-full"
+        onClick={handleClickChapter}
+      >
+        <div className="sb-relative sb-flex sb-h-full sb-w-full sb-justify-between sb-items-center">
+          <Tooltip open={open}>
+            <div className="sb-flex sb-flex-col sb-gap-2 sb-items-center">
+              <p>{chapter.title}</p>
+              <p className="sb-p-2 sb-bg-[#303030] sb-bg-opacity-50 sb-rounded-md">
+                {durationFormater(chapter.startTime)} -{" "}
+                {durationFormater(chapter.endTime)}
+              </p>
+            </div>
+          </Tooltip>
+        </div>
+      </button>
+    </div>
+  );
+};
+
+export default ChapterTooltip;

package/dist/components/ChaptersPanal/index.tsx

@@ -1,40 +1,40 @@
-import React, { useEffect, useState } from "react";
-
-import ChapterTooltip from "../ChapterTooltip";
-import { SoftBuildersVideoPlayerChapter } from "../../types";
-import { useSoftBuildersVideoPlayerContext } from "../VideoPlayerComponent/provider";
-
-type Chapter = SoftBuildersVideoPlayerChapter & {
-  startPercentage: number;
-  endPercentage: number;
-};
-type Props = {
-  chapters: SoftBuildersVideoPlayerChapter[];
-};
-const ChaptersPanal = ({ chapters }: Props) => {
-  const [cs, setCs] = useState<Chapter[]>([]);
-  const { duration } = useSoftBuildersVideoPlayerContext();
-
-  useEffect(() => {
-    const newCs = chapters.map((c) => {
-      const startPercentage = Math.floor((c.startTime * 100) / duration);
-      const endPercentage = Math.floor((c.endTime * 100) / duration);
-      return {
-        ...c,
-        startPercentage,
-        endPercentage,
-      };
-    });
-    setCs(newCs);
-  }, [chapters, duration]);
-
-  return (
-    <div id="chapters-panal" className="sb-w-full sb-h-full sb-relative ">
-      {cs.map((c, i) => (
-        <ChapterTooltip key={`chapter-${i}-${c.startTime}`} chapter={c} />
-      ))}
-    </div>
-  );
-};
-
-export default ChaptersPanal;
+import React, { useEffect, useState } from "react";
+
+import ChapterTooltip from "../ChapterTooltip";
+import { SoftBuildersVideoPlayerChapter } from "../../types";
+import { useSoftBuildersVideoPlayerContext } from "../VideoPlayerComponent/provider";
+
+type Chapter = SoftBuildersVideoPlayerChapter & {
+  startPercentage: number;
+  endPercentage: number;
+};
+type Props = {
+  chapters: SoftBuildersVideoPlayerChapter[];
+};
+const ChaptersPanal = ({ chapters }: Props) => {
+  const [cs, setCs] = useState<Chapter[]>([]);
+  const { duration } = useSoftBuildersVideoPlayerContext();
+
+  useEffect(() => {
+    const newCs = chapters.map((c) => {
+      const startPercentage = Math.floor((c.startTime * 100) / duration);
+      const endPercentage = Math.floor((c.endTime * 100) / duration);
+      return {
+        ...c,
+        startPercentage,
+        endPercentage,
+      };
+    });
+    setCs(newCs);
+  }, [chapters, duration]);
+
+  return (
+    <div id="chapters-panal" className="sb-w-full sb-h-full sb-relative ">
+      {cs.map((c, i) => (
+        <ChapterTooltip key={`chapter-${i}-${c.startTime}`} chapter={c} />
+      ))}
+    </div>
+  );
+};
+
+export default ChaptersPanal;

package/dist/components/ControlBar/index.d.ts

@@ -9,7 +9,8 @@ type Props<T> = {
     notes: SoftBuildersVideoPlayerNote[];
     chapters: SoftBuildersVideoPlayerChapter[];
     seekStep?: number;
+    id?: string;
     handleSaveNoteAction?: (time: number, note: string) => Promise<T>;
 };
-declare const ControlBar: <T>({ player, isPaused, setIsPaused, duration, notes, chapters, seekStep, handleSaveNoteAction, }: Props<T>) => import("react/jsx-runtime").JSX.Element;
+declare const ControlBar: <T>({ player, isPaused, setIsPaused, duration, notes, chapters, seekStep, id, handleSaveNoteAction, }: Props<T>) => import("react/jsx-runtime").JSX.Element;
 export default ControlBar;