softbuilders-react-video-player 1.1.14 → 1.1.16

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/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.js

@@ -13,7 +13,7 @@ import SubtitleMenu from "../SubtitleMenu";
 import { BackwardIcon, ForwardIcon, FullScreenIcon, PauseIcon, PlayIcon, } from "../../images";
 const ControlBar = ({ player, isPaused, setIsPaused, duration, notes, chapters, seekStep = 5, id, handleSaveNoteAction, }) => {
     const { setPlayer, setDuration } = useSoftBuildersVideoPlayerContext();
-    const [width, setwidth] = useState(null);
+    const [width, setwidth] = useState(0);
     const seek = (duration) => {
         const currentTime = Number((player === null || player === void 0 ? void 0 : player.currentTime()) || 0);
         player === null || player === void 0 ? void 0 : player.currentTime(currentTime + duration);
@@ -33,7 +33,6 @@ const ControlBar = ({ player, isPaused, setIsPaused, duration, notes, chapters,
     const togglePlay = (e) => {
         e.preventDefault();
         e.stopPropagation();
-        console.log("ok");
         if (isPaused)
             player === null || player === void 0 ? void 0 : player.play();
         else

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ControlBar/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ControlBar/index.tsx"],"names":[],"mappings":"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"}

package/dist/components/ControlBar/index.tsx

@@ -47,14 +47,14 @@ const ControlBar = <T,>({
   handleSaveNoteAction,
 }: Props<T>) => {
   const { setPlayer, setDuration } = useSoftBuildersVideoPlayerContext();
-  const [width, setwidth] = useState(null);
+  const [width, setwidth] = useState<number>(0);
 
   const seek = (duration: number) => {
     const currentTime = Number(player?.currentTime() || 0);
     player?.currentTime(currentTime + duration);
   };
   const container = document.getElementById(`video-container-${id}`);
-  function handleWidthChange(width) {
+  function handleWidthChange(width: any) {
     setwidth(width);
   }
   const resizeObserver = new ResizeObserver((entries) => {
@@ -66,10 +66,9 @@ const ControlBar = <T,>({
 
   // Start observing the element
   container && resizeObserver.observe(container);
-  const togglePlay = (e) => {
+  const togglePlay = (e:any) => {
     e.preventDefault();
     e.stopPropagation();
-    console.log("ok");
 
     if (isPaused) player?.play();
     else player?.pause();