softbuilders-react-video-player 1.1.7 → 1.1.9

package/dist/components/ControlBar/index.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import CurrentTimeLabel from "../CurrentTimeLabel";
 import { durationFormater } from "../../utils";
 import VolumeSlider from "../VolumeSlider";
@@ -10,13 +10,27 @@ import BufferTracker from "../BufferTracker";
 import CurrentTimeTracker from "../CurrentTimeTracker";
 import { useSoftBuildersVideoPlayerContext } from "../VideoPlayerComponent/provider";
 import SubtitleMenu from "../SubtitleMenu";
-import { BackwardIcon, ForwardIcon, FullScreenIcon, PauseIcon, PlayIcon } from "../../images";
-const ControlBar = ({ player, isPaused, setIsPaused, duration, notes, chapters, seekStep = 5, handleSaveNoteAction, }) => {
+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 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);
     };
+    const container = document.getElementById(`video-container-${id}`);
+    function handleWidthChange(width) {
+        setwidth(width);
+        console.log(width);
+    }
+    const resizeObserver = new ResizeObserver((entries) => {
+        for (let entry of entries) {
+            const currentWidth = entry.contentRect.width;
+            handleWidthChange(currentWidth); // Call the action when width changes
+        }
+    });
+    // Start observing the element
+    resizeObserver.observe(container);
     const togglePlay = () => {
         if (isPaused)
             player === null || player === void 0 ? void 0 : player.play();
@@ -30,11 +44,11 @@ const ControlBar = ({ player, isPaused, setIsPaused, duration, notes, chapters,
     useEffect(() => {
         setDuration(duration);
     }, [duration]);
-    return (_jsxs("div", { className: "sb-flex sb-items-center sb-justify-center sb-gap-3 sb-w-full", children: [_jsx(BufferTracker, {}), _jsx(CurrentTimeTracker, {}), _jsx("button", { onClick: () => {
+    return (_jsxs("div", { className: " sb-px-2 sb-flex  sb-justify-center sb-gap-3 sb-w-full sb-h-full sb-items-end pb-2", children: [_jsx(BufferTracker, {}), _jsx(CurrentTimeTracker, {}), _jsx("button", { onClick: () => {
                     seek(-seekStep);
                 }, children: _jsx(BackwardIcon, { className: "sb-w-3 sb-h-3" }) }), _jsx("button", { onClick: togglePlay, children: isPaused ? (_jsx(PlayIcon, { className: "sb-w-3 sb-h-3" })) : (_jsx(PauseIcon, { className: "sb-w-3 sb-h-3" })) }), _jsx("button", { onClick: () => {
                     seek(seekStep);
-                }, children: _jsx(ForwardIcon, { className: "sb-w-3 sb-h-3" }) }), _jsx(CurrentTimeLabel, {}), _jsx("div", { className: "sb-w-[30%] hover:sb-w-[45%] sb-transition-all sb-ease-in-out sb-duration-500", children: _jsx(TimeSliderContainer, { chapters: chapters, notes: notes }) }), _jsx("p", { children: durationFormater(duration) }), _jsx("div", { className: "sb-w-[10%]", children: _jsx(VolumeSlider, {}) }), _jsx(QualityMenu, {}), _jsx("button", { onClick: () => {
+                }, children: _jsx(ForwardIcon, { className: "sb-w-3 sb-h-3" }) }), _jsx(CurrentTimeLabel, {}), _jsx("div", { className: "sb-w-[30%] hover:sb-w-[45%] sb-transition-all sb-ease-in-out sb-duration-500", children: _jsx(TimeSliderContainer, { chapters: chapters, notes: notes }) }), _jsx("p", { children: durationFormater(duration) }), _jsx("div", { className: "sb-h-full", children: _jsx(VolumeSlider, { width: width }) }), _jsx(QualityMenu, {}), _jsx("button", { onClick: () => {
                     if (player === null || player === void 0 ? void 0 : player.isFullscreen()) {
                         player === null || player === void 0 ? void 0 : player.exitFullscreen();
                     }

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

@@ -1,127 +1,149 @@
-import React, { useEffect } from "react";
-
-import Player from "video.js/dist/types/player";
-import CurrentTimeLabel from "../CurrentTimeLabel";
-import { durationFormater } from "../../utils";
-import VolumeSlider from "../VolumeSlider";
-import QualityMenu from "../QualityMenu";
-
-import CreateNoteMenu from "../CreateNoteMenu";
-import TimeSliderContainer from "../TimeSliderContainer";
-import BufferTracker from "../BufferTracker";
-import CurrentTimeTracker from "../CurrentTimeTracker";
-import {
-  SoftBuildersVideoPlayerChapter,
-  SoftBuildersVideoPlayerNote,
-} from "../../types";
-import { useSoftBuildersVideoPlayerContext } from "../VideoPlayerComponent/provider";
-import SubtitleMenu from "../SubtitleMenu";
-import { BackwardIcon, ForwardIcon, FullScreenIcon, PauseIcon, PlayIcon } from "../../images";
-
-type Props<T> = {
-  player: Player | undefined;
-  isPaused: boolean;
-  setIsPaused: React.Dispatch<React.SetStateAction<boolean>>;
-  duration: number;
-  notes: SoftBuildersVideoPlayerNote[];
-  chapters: SoftBuildersVideoPlayerChapter[];
-  seekStep?: number;
-  handleSaveNoteAction?: (time: number, note: string) => Promise<T>;
-};
-const ControlBar = <T,>({
-  player,
-  isPaused,
-  setIsPaused,
-  duration,
-  notes,
-  chapters,
-  seekStep = 5,
-  handleSaveNoteAction,
-}: Props<T>) => {
-  const { setPlayer, setDuration } = useSoftBuildersVideoPlayerContext();
-
-  const seek = (duration: number) => {
-    const currentTime = Number(player?.currentTime() || 0);
-    player?.currentTime(currentTime + duration);
-  };
-
-  const togglePlay = () => {
-    if (isPaused) player?.play();
-    else player?.pause();
-
-    setIsPaused(!isPaused);
-  };
-
-  useEffect(() => {
-    setPlayer(player);
-  }, [player]);
-
-  useEffect(() => {
-    setDuration(duration);
-  }, [duration]);
-
-  return (
-    <div className="sb-flex sb-items-center sb-justify-center sb-gap-3 sb-w-full">
-      {/* Doesn't display anything, just set the downloaded buffer persentage */}
-      <BufferTracker />
-      {/* Doesn't display anything, just set the current time */}
-      <CurrentTimeTracker />
-
-      <button
-        onClick={() => {
-          seek(-seekStep);
-        }}
-      >
-        <BackwardIcon className="sb-w-3 sb-h-3" />
-      </button>
-      <button onClick={togglePlay}>
-        {isPaused ? (
-          <PlayIcon className="sb-w-3 sb-h-3" />
-        ) : (
-          <PauseIcon className="sb-w-3 sb-h-3" />
-        )}
-      </button>
-      <button
-        onClick={() => {
-          seek(seekStep);
-        }}
-      >
-        <ForwardIcon className="sb-w-3 sb-h-3" />
-      </button>
-
-      <CurrentTimeLabel />
-
-      <div className="sb-w-[30%] hover:sb-w-[45%] sb-transition-all sb-ease-in-out sb-duration-500">
-        <TimeSliderContainer chapters={chapters} notes={notes} />
-      </div>
-
-      <p>{durationFormater(duration)}</p>
-
-      <div className="sb-w-[10%]">
-        <VolumeSlider />
-      </div>
-
-      <QualityMenu />
-
-      <button
-        onClick={() => {
-          if (player?.isFullscreen()) {
-            player?.exitFullscreen();
-          } else {
-            player?.requestFullscreen();
-          }
-        }}
-      >
-        <FullScreenIcon className="sb-w-3 sb-h-3" />
-      </button>
-
-      {handleSaveNoteAction && (
-        <CreateNoteMenu handleSaveNoteAction={handleSaveNoteAction} />
-      )}
-
-      <SubtitleMenu />
-    </div>
-  );
-};
-
-export default ControlBar;
+import React, { useEffect, useState } from "react";
+
+import Player from "video.js/dist/types/player";
+import CurrentTimeLabel from "../CurrentTimeLabel";
+import { durationFormater } from "../../utils";
+import VolumeSlider from "../VolumeSlider";
+import QualityMenu from "../QualityMenu";
+
+import CreateNoteMenu from "../CreateNoteMenu";
+import TimeSliderContainer from "../TimeSliderContainer";
+import BufferTracker from "../BufferTracker";
+import CurrentTimeTracker from "../CurrentTimeTracker";
+import {
+  SoftBuildersVideoPlayerChapter,
+  SoftBuildersVideoPlayerNote,
+} from "../../types";
+import { useSoftBuildersVideoPlayerContext } from "../VideoPlayerComponent/provider";
+import SubtitleMenu from "../SubtitleMenu";
+import {
+  BackwardIcon,
+  ForwardIcon,
+  FullScreenIcon,
+  PauseIcon,
+  PlayIcon,
+} from "../../images";
+
+type Props<T> = {
+  player: Player | undefined;
+  isPaused: boolean;
+  setIsPaused: React.Dispatch<React.SetStateAction<boolean>>;
+  duration: number;
+  notes: SoftBuildersVideoPlayerNote[];
+  chapters: SoftBuildersVideoPlayerChapter[];
+  seekStep?: number;
+  id?: string;
+  handleSaveNoteAction?: (time: number, note: string) => Promise<T>;
+};
+const ControlBar = <T,>({
+  player,
+  isPaused,
+  setIsPaused,
+  duration,
+  notes,
+  chapters,
+  seekStep = 5,
+  id,
+  handleSaveNoteAction,
+}: Props<T>) => {
+  const { setPlayer, setDuration } = useSoftBuildersVideoPlayerContext();
+  const [width, setwidth] = useState(null);
+
+  const seek = (duration: number) => {
+    const currentTime = Number(player?.currentTime() || 0);
+    player?.currentTime(currentTime + duration);
+  };
+  const container = document.getElementById(`video-container-${id}`);
+  function handleWidthChange(width) {
+    setwidth(width);
+    console.log(width);
+  }
+  const resizeObserver = new ResizeObserver((entries) => {
+    for (let entry of entries) {
+      const currentWidth = entry.contentRect.width;
+      handleWidthChange(currentWidth); // Call the action when width changes
+    }
+  });
+
+  // Start observing the element
+  resizeObserver.observe(container);
+  const togglePlay = () => {
+    if (isPaused) player?.play();
+    else player?.pause();
+
+    setIsPaused(!isPaused);
+  };
+
+  useEffect(() => {
+    setPlayer(player);
+  }, [player]);
+
+  useEffect(() => {
+    setDuration(duration);
+  }, [duration]);
+
+  return (
+    <div className=" sb-px-2 sb-flex  sb-justify-center sb-gap-3 sb-w-full sb-h-full sb-items-end pb-2">
+      {/* Doesn't display anything, just set the downloaded buffer persentage */}
+      <BufferTracker />
+      {/* Doesn't display anything, just set the current time */}
+      <CurrentTimeTracker />
+
+      <button
+        onClick={() => {
+          seek(-seekStep);
+        }}
+      >
+        <BackwardIcon className="sb-w-3 sb-h-3" />
+      </button>
+      <button onClick={togglePlay}>
+        {isPaused ? (
+          <PlayIcon className="sb-w-3 sb-h-3" />
+        ) : (
+          <PauseIcon className="sb-w-3 sb-h-3" />
+        )}
+      </button>
+      <button
+        onClick={() => {
+          seek(seekStep);
+        }}
+      >
+        <ForwardIcon className="sb-w-3 sb-h-3" />
+      </button>
+
+      <CurrentTimeLabel />
+
+      <div className="sb-w-[30%] hover:sb-w-[45%] sb-transition-all sb-ease-in-out sb-duration-500">
+        <TimeSliderContainer chapters={chapters} notes={notes} />
+      </div>
+
+      <p>{durationFormater(duration)}</p>
+
+      <div className="sb-h-full">
+        <VolumeSlider width={width} />
+      </div>
+
+      <QualityMenu />
+
+      <button
+        onClick={() => {
+          if (player?.isFullscreen()) {
+            player?.exitFullscreen();
+          } else {
+            player?.requestFullscreen();
+          }
+        }}
+      >
+        <FullScreenIcon className="sb-w-3 sb-h-3" />
+      </button>
+
+      {handleSaveNoteAction && (
+        <CreateNoteMenu handleSaveNoteAction={handleSaveNoteAction} />
+      )}
+
+      <SubtitleMenu />
+    </div>
+  );
+};
+
+export default ControlBar;

package/dist/components/CreateNoteMenu/index.tsx

@@ -1,61 +1,61 @@
-import React, { useState } from "react";
-import MenuButton from "../MenuButton";
-import { useSoftBuildersVideoPlayerContext } from "../VideoPlayerComponent/provider";
-import { ClosedNoteIcon } from "../../images";
-
-type Props<T> = {
-  handleSaveNoteAction?: (time: number, note: string) => Promise<T>;
-};
-const CreateNoteMenu = <T,>({ handleSaveNoteAction }: Props<T>) => {
-  const { player } = useSoftBuildersVideoPlayerContext();
-
-  const [note, setNote] = useState("");
-
-  const handleSaveNote = () => {
-    if (handleSaveNoteAction) {
-      const time = player?.currentTime() || 0;
-      handleSaveNoteAction(time, note).then((response) => {
-        setNote("");
-      });
-    } else {
-      window.alert(
-        "Video Player, there is no implementation for the handleSaveNoteAction function"
-      );
-    }
-  };
-
-  return (
-    <MenuButton
-      buttonContent={<ClosedNoteIcon className="sb-w-3 sb-h-3" />}
-      menuContent={
-        <div className="sb-rounded-md sb-bg-[#303030] sb-bg-opacity-50 sb-py-5 sb-w-[220px]">
-          <div className="sb-flex sb-flex-col sb-gap-3">
-            <h3 className="sb-px-5">Add Note</h3>
-
-            <div className="sb-w-full sb-h-[.1px] sb-bg-[#AAAAAA] sb-bg-opacity-70" />
-
-            <div className="sb-px-5 sb-flex sb-flex-col sb-gap-4 sb-items-start">
-              <input
-                name="note"
-                type="text"
-                placeholder="Add a note"
-                value={note}
-                onChange={(e) => setNote(e.target.value)}
-                required
-                className="sb-text-white placeholder:sb-text-white sb-w-full sb-bg-transparent sb-px-4 sb-py-3 sb-border sb-border-[#AAAAAA] sb-rounded-md"
-              />
-
-              <button className="sb-w-full" onClick={handleSaveNote}>
-                <div className="sb-px-4 sb-py-3 sb-text-center sb-font-bold sb-bg-orange-500 sb-rounded-md">
-                  Save
-                </div>
-              </button>
-            </div>
-          </div>
-        </div>
-      }
-    />
-  );
-};
-
-export default CreateNoteMenu;
+import React, { useState } from "react";
+import MenuButton from "../MenuButton";
+import { useSoftBuildersVideoPlayerContext } from "../VideoPlayerComponent/provider";
+import { ClosedNoteIcon } from "../../images";
+
+type Props<T> = {
+  handleSaveNoteAction?: (time: number, note: string) => Promise<T>;
+};
+const CreateNoteMenu = <T,>({ handleSaveNoteAction }: Props<T>) => {
+  const { player } = useSoftBuildersVideoPlayerContext();
+
+  const [note, setNote] = useState("");
+
+  const handleSaveNote = () => {
+    if (handleSaveNoteAction) {
+      const time = player?.currentTime() || 0;
+      handleSaveNoteAction(time, note).then((response) => {
+        setNote("");
+      });
+    } else {
+      window.alert(
+        "Video Player, there is no implementation for the handleSaveNoteAction function"
+      );
+    }
+  };
+
+  return (
+    <MenuButton
+      buttonContent={<ClosedNoteIcon className="sb-w-3 sb-h-3" />}
+      menuContent={
+        <div className="sb-rounded-md sb-bg-[#303030] sb-bg-opacity-50 sb-py-5 sb-w-[220px]">
+          <div className="sb-flex sb-flex-col sb-gap-3">
+            <h3 className="sb-px-5">Add Note</h3>
+
+            <div className="sb-w-full sb-h-[.1px] sb-bg-[#AAAAAA] sb-bg-opacity-70" />
+
+            <div className="sb-px-5 sb-flex sb-flex-col sb-gap-4 sb-items-start">
+              <input
+                name="note"
+                type="text"
+                placeholder="Add a note"
+                value={note}
+                onChange={(e) => setNote(e.target.value)}
+                required
+                className="sb-text-white placeholder:sb-text-white sb-w-full sb-bg-transparent sb-px-4 sb-py-3 sb-border sb-border-[#AAAAAA] sb-rounded-md"
+              />
+
+              <button className="sb-w-full" onClick={handleSaveNote}>
+                <div className="sb-px-4 sb-py-3 sb-text-center sb-font-bold sb-bg-orange-500 sb-rounded-md">
+                  Save
+                </div>
+              </button>
+            </div>
+          </div>
+        </div>
+      }
+    />
+  );
+};
+
+export default CreateNoteMenu;

package/dist/components/CurrentTimeLabel/index.tsx

@@ -1,13 +1,13 @@
-"use client";
-import React, { useEffect } from "react";
-import { durationFormater } from "../../utils";
-import { useSoftBuildersVideoPlayerContext } from "../VideoPlayerComponent/provider";
-type Props = {};
-
-const CurrentTimeLabel = ({}: Props) => {
-  const { currentTime } = useSoftBuildersVideoPlayerContext();
-
-  return <p>{durationFormater(currentTime)}</p>;
-};
-
-export default CurrentTimeLabel;
+"use client";
+import React, { useEffect } from "react";
+import { durationFormater } from "../../utils";
+import { useSoftBuildersVideoPlayerContext } from "../VideoPlayerComponent/provider";
+type Props = {};
+
+const CurrentTimeLabel = ({}: Props) => {
+  const { currentTime } = useSoftBuildersVideoPlayerContext();
+
+  return <p>{durationFormater(currentTime)}</p>;
+};
+
+export default CurrentTimeLabel;

package/dist/components/CurrentTimeTracker/index.tsx

@@ -1,18 +1,18 @@
-import React, { useEffect } from "react";
-import { useSoftBuildersVideoPlayerContext } from "../VideoPlayerComponent/provider";
-
-const CurrentTimeTracker = () => {
-  const { setCurrentTime, player } = useSoftBuildersVideoPlayerContext();
-
-  useEffect(() => {
-    const intervalId = setInterval(() => {
-      setCurrentTime(player?.currentTime() || 0);
-    }, 500);
-
-    // Cleanup function to clear the interval
-    return () => clearInterval(intervalId);
-  }, [player]);
-  return <></>;
-};
-
-export default CurrentTimeTracker;
+import React, { useEffect } from "react";
+import { useSoftBuildersVideoPlayerContext } from "../VideoPlayerComponent/provider";
+
+const CurrentTimeTracker = () => {
+  const { setCurrentTime, player } = useSoftBuildersVideoPlayerContext();
+
+  useEffect(() => {
+    const intervalId = setInterval(() => {
+      setCurrentTime(player?.currentTime() || 0);
+    }, 500);
+
+    // Cleanup function to clear the interval
+    return () => clearInterval(intervalId);
+  }, [player]);
+  return <></>;
+};
+
+export default CurrentTimeTracker;

package/dist/components/Menu/index.tsx

@@ -1,49 +1,49 @@
-import React from "react";
-
-type Props = {
-  name: string;
-};
-
-const Menu = ({ name }: Props) => {
-  return (
-    <div className="absolute right-0 z-10 w-48 mt-2 origin-top-right bg-white border border-gray-300 rounded-md shadow-lg focus:outline-none">
-      <div
-        className="py-1"
-        role="menu"
-        aria-orientation="vertical"
-        aria-labelledby={`${name}-button`}
-      >
-        <a
-          href="#"
-          className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900"
-          role="menuitem"
-        >
-          Dashboard
-        </a>
-        <a
-          href="#"
-          className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900"
-          role="menuitem"
-        >
-          Settings
-        </a>
-        <a
-          href="#"
-          className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900"
-          role="menuitem"
-        >
-          Profile
-        </a>
-        <a
-          href="#"
-          className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900"
-          role="menuitem"
-        >
-          Logout
-        </a>
-      </div>
-    </div>
-  );
-};
-
-export default Menu;
+import React from "react";
+
+type Props = {
+  name: string;
+};
+
+const Menu = ({ name }: Props) => {
+  return (
+    <div className="absolute right-0 z-10 w-48 mt-2 origin-top-right bg-white border border-gray-300 rounded-md shadow-lg focus:outline-none">
+      <div
+        className="py-1"
+        role="menu"
+        aria-orientation="vertical"
+        aria-labelledby={`${name}-button`}
+      >
+        <a
+          href="#"
+          className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900"
+          role="menuitem"
+        >
+          Dashboard
+        </a>
+        <a
+          href="#"
+          className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900"
+          role="menuitem"
+        >
+          Settings
+        </a>
+        <a
+          href="#"
+          className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900"
+          role="menuitem"
+        >
+          Profile
+        </a>
+        <a
+          href="#"
+          className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900"
+          role="menuitem"
+        >
+          Logout
+        </a>
+      </div>
+    </div>
+  );
+};
+
+export default Menu;

package/dist/components/MenuButton/index.js

@@ -24,7 +24,7 @@ const MenuButton = ({ buttonContent, menuContent, close }) => {
         if (close)
             close(closeMenu);
     }, [close, closeMenu]);
-    return (_jsxs("div", { className: "sb-relative", children: [_jsx("button", { ref: buttonRef, onClick: toggleMenu, "aria-haspopup": "true", "aria-expanded": isOpen, "aria-label": "Open menu", children: buttonContent }), isOpen && (_jsx("div", { ref: menuRef, role: "menu", "aria-orientation": "vertical", "aria-labelledby": "Open menu", className: "sb-absolute sb-shadow-lg sb-right-0 sb-bottom-10", children: menuContent }))] }));
+    return (_jsxs("div", { className: "sb-relative  sb-flex sb-items-end", children: [_jsx("button", { ref: buttonRef, onClick: toggleMenu, "aria-haspopup": "true", "aria-expanded": isOpen, "aria-label": "Open menu", children: buttonContent }), isOpen && (_jsx("div", { ref: menuRef, role: "menu", "aria-orientation": "vertical", "aria-labelledby": "Open menu", className: "sb-absolute sb-shadow-lg sb-right-0 sb-bottom-10", children: menuContent }))] }));
 };
 export default MenuButton;
 //# sourceMappingURL=index.js.map