softbuilders-react-video-player 1.1.7 → 1.1.9

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/MenuButton/index.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAQxE,MAAM,UAAU,GAAG,CAAC,EAAE,aAAa,EAAE,WAAW,EAAE,KAAK,EAAS,EAAE,EAAE;IAClE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC5C,MAAM,SAAS,GAAG,MAAM,CAA2B,IAAI,CAAC,CAAC;IACzD,MAAM,OAAO,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IAEpD,MAAM,UAAU,GAAG,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC;IAEpD,MAAM,SAAS,GAAG,WAAW,CAAC,GAAG,EAAE;QACjC,SAAS,CAAC,KAAK,CAAC,CAAC;IACnB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,kBAAkB,GAAG,CAAC,KAAiB,EAAE,EAAE;YAC/C,IACE,SAAS,CAAC,OAAO;gBACjB,CAAC,SAAS,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC;gBACjD,OAAO,CAAC,OAAO;gBACf,CAAC,OAAO,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC,EAC/C,CAAC;gBACD,SAAS,CAAC,KAAK,CAAC,CAAC;YACnB,CAAC;QACH,CAAC,CAAC;QAEF,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,kBAAkB,CAAC,CAAC;QAC3D,OAAO,GAAG,EAAE,CAAC,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,kBAAkB,CAAC,CAAC;IAC7E,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,KAAK;YAAE,KAAK,CAAC,SAAS,CAAC,CAAC;IAC9B,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC;IAEvB,OAAO,CACL,eAAK,SAAS,EAAC,aAAa,aAC1B,iBACE,GAAG,EAAE,SAAS,EACd,OAAO,EAAE,UAAU,mBACL,MAAM,mBACL,MAAM,gBACV,WAAW,YAErB,aAAa,GACP,EAER,MAAM,IAAI,CACT,cACE,GAAG,EAAE,OAAO,EACZ,IAAI,EAAC,MAAM,sBACM,UAAU,qBACX,WAAW,EAC3B,SAAS,EAAC,kDAAkD,YAE3D,WAAW,GACR,CACP,IACG,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/MenuButton/index.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAQxE,MAAM,UAAU,GAAG,CAAC,EAAE,aAAa,EAAE,WAAW,EAAE,KAAK,EAAS,EAAE,EAAE;IAClE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC5C,MAAM,SAAS,GAAG,MAAM,CAA2B,IAAI,CAAC,CAAC;IACzD,MAAM,OAAO,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IAEpD,MAAM,UAAU,GAAG,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC;IAEpD,MAAM,SAAS,GAAG,WAAW,CAAC,GAAG,EAAE;QACjC,SAAS,CAAC,KAAK,CAAC,CAAC;IACnB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,kBAAkB,GAAG,CAAC,KAAiB,EAAE,EAAE;YAC/C,IACE,SAAS,CAAC,OAAO;gBACjB,CAAC,SAAS,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC;gBACjD,OAAO,CAAC,OAAO;gBACf,CAAC,OAAO,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC,EAC/C,CAAC;gBACD,SAAS,CAAC,KAAK,CAAC,CAAC;YACnB,CAAC;QACH,CAAC,CAAC;QAEF,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,kBAAkB,CAAC,CAAC;QAC3D,OAAO,GAAG,EAAE,CAAC,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,kBAAkB,CAAC,CAAC;IAC7E,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,KAAK;YAAE,KAAK,CAAC,SAAS,CAAC,CAAC;IAC9B,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC;IAEvB,OAAO,CACL,eAAK,SAAS,EAAC,mCAAmC,aAChD,iBACE,GAAG,EAAE,SAAS,EACd,OAAO,EAAE,UAAU,mBACL,MAAM,mBACL,MAAM,gBACV,WAAW,YAErB,aAAa,GACP,EAER,MAAM,IAAI,CACT,cACE,GAAG,EAAE,OAAO,EACZ,IAAI,EAAC,MAAM,sBACM,UAAU,qBACX,WAAW,EAC3B,SAAS,EAAC,kDAAkD,YAE3D,WAAW,GACR,CACP,IACG,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/components/MenuButton/index.tsx

@@ -1,67 +1,67 @@
-import React, { useCallback, useEffect, useRef, useState } from "react";
-
-type Props = {
-  buttonContent: React.ReactNode;
-  menuContent: React.ReactNode;
-  close?: (fun: Function) => void;
-};
-
-const MenuButton = ({ buttonContent, menuContent, close }: Props) => {
-  const [isOpen, setIsOpen] = useState(false);
-  const buttonRef = useRef<HTMLButtonElement | null>(null);
-  const menuRef = useRef<HTMLDivElement | null>(null);
-
-  const toggleMenu = () => setIsOpen((prev) => !prev);
-
-  const closeMenu = useCallback(() => {
-    setIsOpen(false);
-  }, []);
-
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (
-        buttonRef.current &&
-        !buttonRef.current.contains(event.target as Node) &&
-        menuRef.current &&
-        !menuRef.current.contains(event.target as Node)
-      ) {
-        setIsOpen(false);
-      }
-    };
-
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => document.removeEventListener("mousedown", handleClickOutside);
-  }, []);
-
-  useEffect(() => {
-    if (close) close(closeMenu);
-  }, [close, closeMenu]);
-
-  return (
-    <div className="sb-relative">
-      <button
-        ref={buttonRef}
-        onClick={toggleMenu}
-        aria-haspopup="true"
-        aria-expanded={isOpen}
-        aria-label="Open menu"
-      >
-        {buttonContent}
-      </button>
-
-      {isOpen && (
-        <div
-          ref={menuRef}
-          role="menu"
-          aria-orientation="vertical"
-          aria-labelledby="Open menu"
-          className="sb-absolute sb-shadow-lg sb-right-0 sb-bottom-10"
-        >
-          {menuContent}
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default MenuButton;
+import React, { useCallback, useEffect, useRef, useState } from "react";
+
+type Props = {
+  buttonContent: React.ReactNode;
+  menuContent: React.ReactNode;
+  close?: (fun: Function) => void;
+};
+
+const MenuButton = ({ buttonContent, menuContent, close }: Props) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const buttonRef = useRef<HTMLButtonElement | null>(null);
+  const menuRef = useRef<HTMLDivElement | null>(null);
+
+  const toggleMenu = () => setIsOpen((prev) => !prev);
+
+  const closeMenu = useCallback(() => {
+    setIsOpen(false);
+  }, []);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        buttonRef.current &&
+        !buttonRef.current.contains(event.target as Node) &&
+        menuRef.current &&
+        !menuRef.current.contains(event.target as Node)
+      ) {
+        setIsOpen(false);
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  useEffect(() => {
+    if (close) close(closeMenu);
+  }, [close, closeMenu]);
+
+  return (
+    <div className="sb-relative  sb-flex sb-items-end">
+      <button
+        ref={buttonRef}
+        onClick={toggleMenu}
+        aria-haspopup="true"
+        aria-expanded={isOpen}
+        aria-label="Open menu"
+      >
+        {buttonContent}
+      </button>
+
+      {isOpen && (
+        <div
+          ref={menuRef}
+          role="menu"
+          aria-orientation="vertical"
+          aria-labelledby="Open menu"
+          className="sb-absolute sb-shadow-lg sb-right-0 sb-bottom-10"
+        >
+          {menuContent}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default MenuButton;

package/dist/components/NoteTooltip/index.tsx

@@ -1,46 +1,46 @@
-import React, { useEffect, useState } from "react";
-import Tooltip from "../Tooltip";
-import { durationFormater } from "../../utils";
-import { useSoftBuildersVideoPlayerContext } from "../VideoPlayerComponent/provider";
-import { SoftBuildersVideoPlayerNote } from "../../types";
-type Note = SoftBuildersVideoPlayerNote & { percentage: number };
-
-type Props = {
-  note: Note;
-};
-
-const NoteTooltip = ({ note }: Props) => {
-  const [open, setOpen] = useState(false);
-  const { currentTime } = useSoftBuildersVideoPlayerContext();
-
-  useEffect(() => {
-    if (currentTime === Math.floor(note.time)) {
-      setOpen(true);
-
-      setTimeout(() => {
-        setOpen(false);
-      }, 5000);
-    }
-  }, [currentTime, note.time]);
-  return (
-    <div
-      className="sb-w-1 sb-h-1 sb-rounded-full sb-bg-white sb-absolute sb-z-30"
-      style={{ left: `${note.percentage}%` }}
-      onMouseEnter={() => setOpen(true)}
-      onMouseLeave={() => setOpen(false)}
-    >
-      <div className="sb-relative">
-        <Tooltip open={open}>
-          <div className="sb-flex sb-flex-col sb-gap-2 sb-items-center">
-            <p>{note.label}</p>
-            <p className="sb-p-2 sb-bg-[#303030] sb-bg-opacity-50 sb-rounded-md">
-              {durationFormater(note.time)}
-            </p>
-          </div>
-        </Tooltip>
-      </div>
-    </div>
-  );
-};
-
-export default NoteTooltip;
+import React, { useEffect, useState } from "react";
+import Tooltip from "../Tooltip";
+import { durationFormater } from "../../utils";
+import { useSoftBuildersVideoPlayerContext } from "../VideoPlayerComponent/provider";
+import { SoftBuildersVideoPlayerNote } from "../../types";
+type Note = SoftBuildersVideoPlayerNote & { percentage: number };
+
+type Props = {
+  note: Note;
+};
+
+const NoteTooltip = ({ note }: Props) => {
+  const [open, setOpen] = useState(false);
+  const { currentTime } = useSoftBuildersVideoPlayerContext();
+
+  useEffect(() => {
+    if (currentTime === Math.floor(note.time)) {
+      setOpen(true);
+
+      setTimeout(() => {
+        setOpen(false);
+      }, 5000);
+    }
+  }, [currentTime, note.time]);
+  return (
+    <div
+      className="sb-w-1 sb-h-1 sb-rounded-full sb-bg-white sb-absolute sb-z-30"
+      style={{ left: `${note.percentage}%` }}
+      onMouseEnter={() => setOpen(true)}
+      onMouseLeave={() => setOpen(false)}
+    >
+      <div className="sb-relative">
+        <Tooltip open={open}>
+          <div className="sb-flex sb-flex-col sb-gap-2 sb-items-center">
+            <p>{note.label}</p>
+            <p className="sb-p-2 sb-bg-[#303030] sb-bg-opacity-50 sb-rounded-md">
+              {durationFormater(note.time)}
+            </p>
+          </div>
+        </Tooltip>
+      </div>
+    </div>
+  );
+};
+
+export default NoteTooltip;

package/dist/components/NotesPanal/index.tsx

@@ -1,34 +1,34 @@
-import React, { useEffect, useState } from "react";
-import NoteTooltip from "../NoteTooltip";
-import { useSoftBuildersVideoPlayerContext } from "../VideoPlayerComponent/provider";
-import { SoftBuildersVideoPlayerNote } from "../../types";
-
-type Note = SoftBuildersVideoPlayerNote & { percentage: number };
-type Props = {
-  notes: SoftBuildersVideoPlayerNote[];
-};
-const NotesPanal = ({ notes }: Props) => {
-  const [ns, setNs] = useState<Note[]>([]);
-
-  const { duration } = useSoftBuildersVideoPlayerContext();
-
-  useEffect(() => {
-    const newNs = notes.map((n) => {
-      const percentage = Math.floor((n.time * 100) / duration);
-      return {
-        ...n,
-        percentage,
-      };
-    });
-    setNs(newNs);
-  }, [notes, duration]);
-  return (
-    <div id="notes-panal" className="sb-w-full sb-h-full sb-relative ">
-      {ns.map((n, i) => (
-        <NoteTooltip key={`note-${i}-${n.time}`} note={n} />
-      ))}
-    </div>
-  );
-};
-
-export default NotesPanal;
+import React, { useEffect, useState } from "react";
+import NoteTooltip from "../NoteTooltip";
+import { useSoftBuildersVideoPlayerContext } from "../VideoPlayerComponent/provider";
+import { SoftBuildersVideoPlayerNote } from "../../types";
+
+type Note = SoftBuildersVideoPlayerNote & { percentage: number };
+type Props = {
+  notes: SoftBuildersVideoPlayerNote[];
+};
+const NotesPanal = ({ notes }: Props) => {
+  const [ns, setNs] = useState<Note[]>([]);
+
+  const { duration } = useSoftBuildersVideoPlayerContext();
+
+  useEffect(() => {
+    const newNs = notes.map((n) => {
+      const percentage = Math.floor((n.time * 100) / duration);
+      return {
+        ...n,
+        percentage,
+      };
+    });
+    setNs(newNs);
+  }, [notes, duration]);
+  return (
+    <div id="notes-panal" className="sb-w-full sb-h-full sb-relative ">
+      {ns.map((n, i) => (
+        <NoteTooltip key={`note-${i}-${n.time}`} note={n} />
+      ))}
+    </div>
+  );
+};
+
+export default NotesPanal;

package/dist/components/QualityMenu/index.js

@@ -21,11 +21,11 @@ const QualityMenu = ({}) => {
             setCurrentQualitySrc(quality.src);
         }
     }, [player]);
-    return (_jsx(MenuButton, { buttonContent: _jsx(SettingsIcon, { className: "sb-w-3 sb-h-3" }), menuContent: _jsx("div", { className: "sb-rounded-md sb-bg-[#303030] sb-bg-opacity-50 sb-py-5 sb-w-[150px]", children: _jsxs("div", { className: "sb-flex sb-flex-col sb-gap-3", children: [_jsxs("div", { className: "sb-px-5 sb-flex sb-flex-row sb-gap-3 sb-items-start", children: [_jsx("button", { onClick: () => {
+    return (_jsx(MenuButton, { buttonContent: _jsx(SettingsIcon, { className: "sb-w-3 sb-h-3" }), menuContent: _jsx("div", { className: "sb-rounded-md sb-bg-[#303030] sb-bg-opacity-50 sb-py-5 sb-w-[150px]", children: _jsxs("div", { className: "sb-flex sb-flex-col sb-gap-3", children: [_jsxs("div", { className: "sb-px-5 sb-flex sb-flex-row sb-gap-3 sb-items-start sb-relative sb-top-2", children: [_jsx("button", { onClick: () => {
                                     if (closeMenuFunction) {
                                         closeMenuFunction();
                                     }
-                                }, className: "hover:sb-scale-150", children: _jsx(LeftArrowIcon, { className: "sb-w-3 sb-h-3" }) }), _jsx("h3", { children: "Quality" })] }), _jsx("div", { className: "sb-w-full sb-h-[.1px] sb-bg-[#AAAAAA] sb-bg-opacity-70" }), _jsx("div", { className: "sb-px-5  sb-flex sb-flex-col sb-gap-3 sb-items-start", children: qualities.map((q, i) => {
+                                }, className: "hover:sb-scale-150", children: _jsx(LeftArrowIcon, { className: "sb-w-3 sb-h-3" }) }), _jsx("h3", { children: "Quality" })] }), _jsx("div", { className: "sb-w-full sb-h-[.1px] sb-bg-[#AAAAAA] sb-bg-opacity-70" }), _jsx("div", { className: "sb-px-5  sb-flex sb-flex-col sb-gap-3 sb-items-start ", children: qualities.map((q, i) => {
                             return (_jsx(QualityOption, { isSelected: currentQualitySrc === q.src, quality: q, onClick: () => {
                                     const source = qualities.find((_q) => q.label == _q.label);
                                     if (source && source.src != currentQualitySrc) {

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

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

package/dist/components/QualityMenu/index.tsx

@@ -1,122 +1,122 @@
-import React, { useCallback, useEffect, useState } from "react";
-import MenuButton from "../MenuButton";
-import { useSoftBuildersVideoPlayerContext } from "../VideoPlayerComponent/provider";
-
-import { SoftBuildersVideoPlayerSource } from "../../types";
-import { CheckedIcon, LeftArrowIcon, SettingsIcon } from "../../images";
-
-type QualityOptionProps = {
-  isSelected: boolean;
-  quality: SoftBuildersVideoPlayerSource;
-  onClick: () => void;
-};
-const QualityOption = ({
-  isSelected,
-  quality,
-  onClick,
-}: QualityOptionProps) => {
-  return (
-    <button className="hover:sb-text-orange-500 sb-p-2" onClick={onClick}>
-      <div className="sb-grid sb-grid-cols-12 sb-items-center sb-gap-2">
-        <div className="sb-col-span-3">
-          {isSelected ? <CheckedIcon className="sb-w-5 sb-h-5" /> : <div></div>}
-        </div>
-
-        <p className="sb-text-left sb-col-span-9">{quality.label}</p>
-      </div>
-    </button>
-  );
-};
-
-type QualityMenuProps = {};
-
-const QualityMenu = ({}: QualityMenuProps) => {
-  const { player } = useSoftBuildersVideoPlayerContext();
-
-  const [closeMenuFunction, setCloseMenuFunction] = useState<
-    Function | undefined
-  >(undefined);
-
-  const [qualities, setQualities] = useState<SoftBuildersVideoPlayerSource[]>(
-    []
-  );
-
-  const [currentQualitySrc, setCurrentQualitySrc] = useState<
-    string | undefined
-  >(undefined);
-
-  useEffect(() => {
-    if (player) {
-      const sources = player.currentSources();
-
-      const qs: SoftBuildersVideoPlayerSource[] = JSON.parse(
-        JSON.stringify(sources)
-      );
-
-      setQualities(qs);
-
-      const source = player.currentSource();
-      const quality: SoftBuildersVideoPlayerSource = JSON.parse(
-        JSON.stringify(source)
-      );
-
-      setCurrentQualitySrc(quality.src);
-    }
-  }, [player]);
-
-  return (
-    <MenuButton
-      buttonContent={<SettingsIcon 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-[150px]">
-          <div className="sb-flex sb-flex-col sb-gap-3">
-            <div className="sb-px-5 sb-flex sb-flex-row sb-gap-3 sb-items-start">
-              <button
-                onClick={() => {
-                  if (closeMenuFunction) {
-                    closeMenuFunction();
-                  }
-                }}
-                className="hover:sb-scale-150"
-              >
-                <LeftArrowIcon className="sb-w-3 sb-h-3" />
-              </button>
-              <h3>Quality</h3>
-            </div>
-
-            <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-3 sb-items-start">
-              {qualities.map((q, i) => {
-                return (
-                  <QualityOption
-                    key={`quality-${q.label}-${i}`}
-                    isSelected={currentQualitySrc === q.src}
-                    quality={q}
-                    onClick={() => {
-                      const source = qualities.find(
-                        (_q) => q.label == _q.label
-                      );
-                      if (source && source.src != currentQualitySrc) {
-                        player?.src(source.src);
-                        const currentTime = player?.currentTime();
-                        setCurrentQualitySrc(source.src);
-                        player?.currentTime(currentTime);
-                        player?.play();
-                      }
-                    }}
-                  />
-                );
-              })}
-            </div>
-          </div>
-        </div>
-      }
-      close={(fn: Function) => {
-        setCloseMenuFunction(() => fn);
-      }}
-    />
-  );
-};
-
-export default QualityMenu;
+import React, { useCallback, useEffect, useState } from "react";
+import MenuButton from "../MenuButton";
+import { useSoftBuildersVideoPlayerContext } from "../VideoPlayerComponent/provider";
+
+import { SoftBuildersVideoPlayerSource } from "../../types";
+import { CheckedIcon, LeftArrowIcon, SettingsIcon } from "../../images";
+
+type QualityOptionProps = {
+  isSelected: boolean;
+  quality: SoftBuildersVideoPlayerSource;
+  onClick: () => void;
+};
+const QualityOption = ({
+  isSelected,
+  quality,
+  onClick,
+}: QualityOptionProps) => {
+  return (
+    <button className="hover:sb-text-orange-500 sb-p-2" onClick={onClick}>
+      <div className="sb-grid sb-grid-cols-12 sb-items-center sb-gap-2">
+        <div className="sb-col-span-3">
+          {isSelected ? <CheckedIcon className="sb-w-5 sb-h-5" /> : <div></div>}
+        </div>
+
+        <p className="sb-text-left sb-col-span-9">{quality.label}</p>
+      </div>
+    </button>
+  );
+};
+
+type QualityMenuProps = {};
+
+const QualityMenu = ({}: QualityMenuProps) => {
+  const { player } = useSoftBuildersVideoPlayerContext();
+
+  const [closeMenuFunction, setCloseMenuFunction] = useState<
+    Function | undefined
+  >(undefined);
+
+  const [qualities, setQualities] = useState<SoftBuildersVideoPlayerSource[]>(
+    []
+  );
+
+  const [currentQualitySrc, setCurrentQualitySrc] = useState<
+    string | undefined
+  >(undefined);
+
+  useEffect(() => {
+    if (player) {
+      const sources = player.currentSources();
+
+      const qs: SoftBuildersVideoPlayerSource[] = JSON.parse(
+        JSON.stringify(sources)
+      );
+
+      setQualities(qs);
+
+      const source = player.currentSource();
+      const quality: SoftBuildersVideoPlayerSource = JSON.parse(
+        JSON.stringify(source)
+      );
+
+      setCurrentQualitySrc(quality.src);
+    }
+  }, [player]);
+
+  return (
+    <MenuButton
+      buttonContent={<SettingsIcon 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-[150px]">
+          <div className="sb-flex sb-flex-col sb-gap-3">
+            <div className="sb-px-5 sb-flex sb-flex-row sb-gap-3 sb-items-start sb-relative sb-top-2">
+              <button
+                onClick={() => {
+                  if (closeMenuFunction) {
+                    closeMenuFunction();
+                  }
+                }}
+                className="hover:sb-scale-150"
+              >
+                <LeftArrowIcon className="sb-w-3 sb-h-3" />
+              </button>
+              <h3>Quality</h3>
+            </div>
+
+            <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-3 sb-items-start ">
+              {qualities.map((q, i) => {
+                return (
+                  <QualityOption
+                    key={`quality-${q.label}-${i}`}
+                    isSelected={currentQualitySrc === q.src}
+                    quality={q}
+                    onClick={() => {
+                      const source = qualities.find(
+                        (_q) => q.label == _q.label
+                      );
+                      if (source && source.src != currentQualitySrc) {
+                        player?.src(source.src);
+                        const currentTime = player?.currentTime();
+                        setCurrentQualitySrc(source.src);
+                        player?.currentTime(currentTime);
+                        player?.play();
+                      }
+                    }}
+                  />
+                );
+              })}
+            </div>
+          </div>
+        </div>
+      }
+      close={(fn: Function) => {
+        setCloseMenuFunction(() => fn);
+      }}
+    />
+  );
+};
+
+export default QualityMenu;

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

@@ -6,5 +6,5 @@ type Props = {
     min?: number;
     max?: number;
 } & InputHTMLAttributes<HTMLInputElement>;
-declare const Slider: ({ value, handleValueChange, min, max, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const Slider: ({ value, handleValueChange, min, max, className, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
 export default Slider;

package/dist/components/Slider/index.js

@@ -12,9 +12,9 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import "./style.css";
 const Slider = (_a) => {
-    var { value, handleValueChange, min = 0, max = 100 } = _a, rest = __rest(_a, ["value", "handleValueChange", "min", "max"]);
-    return (_jsx("input", Object.assign({ type: "range", min: min, max: max, value: value, onChange: handleValueChange, className: "sb-w-full sb-h-2 sb-bg-transparent sb-bg-opacity-50 sb-rounded-lg sb-appearance-none sb-cursor-pointer sb-range-slider sb-slider-thumb " +
-            rest.className, style: {
+    var { value, handleValueChange, min = 0, max = 100, className } = _a, rest = __rest(_a, ["value", "handleValueChange", "min", "max", "className"]);
+    return (_jsx("input", Object.assign({ type: "range", min: min, max: max, value: value, onChange: handleValueChange, className: `sb-w-full sb-h-2 sb-bg-transparent sb-bg-opacity-50 sb-rounded-lg sb-appearance-none sb-cursor-pointer sb-range-slider sb-slider-thumb 
+        ${className}`, style: {
             background: `linear-gradient(to right, #f97316 ${value}%, #30303070 ${value}%)`,
         } }, rest)));
 };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Slider/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;AACA,OAAO,aAAa,CAAC;AASrB,MAAM,MAAM,GAAG,CAAC,EAMR,EAAE,EAAE;QANI,EACd,KAAK,EACL,iBAAiB,EACjB,GAAG,GAAG,CAAC,EACP,GAAG,GAAG,GAAG,OAEH,EADH,IAAI,cALO,4CAMf,CADQ;IAEP,OAAO,CACL,8BACE,IAAI,EAAC,OAAO,EACZ,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,iBAAiB,EAC3B,SAAS,EACP,yIAAyI;YACzI,IAAI,CAAC,SAAS,EAEhB,KAAK,EAAE;YACL,UAAU,EAAE,qCAAqC,KAAK,gBAAgB,KAAK,IAAI;SAChF,IACG,IAAI,EACR,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Slider/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;AACA,OAAO,aAAa,CAAC;AASrB,MAAM,MAAM,GAAG,CAAC,EAOR,EAAE,EAAE;QAPI,EACd,KAAK,EACL,iBAAiB,EACjB,GAAG,GAAG,CAAC,EACP,GAAG,GAAG,GAAG,EACT,SAAS,OAEH,EADH,IAAI,cANO,yDAOf,CADQ;IAEP,OAAO,CACL,8BACE,IAAI,EAAC,OAAO,EACZ,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,iBAAiB,EAC3B,SAAS,EAAE;UACP,SAAS,EAAE,EACf,KAAK,EAAE;YACL,UAAU,EAAE,qCAAqC,KAAK,gBAAgB,KAAK,IAAI;SAChF,IACG,IAAI,EACR,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,MAAM,CAAC"}