softbuilders-react-video-player 1.0.6 → 1.0.7

package/dist/components/QualityMenu/index.tsx

@@ -0,0 +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;

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) => React.JSX.Element;
+declare const Slider: ({ value, handleValueChange, min, max, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
 export default Slider;

package/dist/components/Slider/index.js

@@ -9,11 +9,11 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React from "react";
+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 (React.createElement("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 " +
+    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: {
             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":";;;;;;;;;;;AAAA,OAAO,KAAwD,MAAM,OAAO,CAAC;AAC7E,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,6CACE,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,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"}

package/dist/components/Slider/index.tsx

@@ -0,0 +1,37 @@
+import React, { InputHTMLAttributes, SetStateAction, useState } from "react";
+import "./style.css";
+
+type Props = {
+  value: number;
+  handleValueChange: React.ChangeEventHandler<HTMLInputElement>;
+  min?: number;
+  max?: number;
+} & InputHTMLAttributes<HTMLInputElement>;
+
+const Slider = ({
+  value,
+  handleValueChange,
+  min = 0,
+  max = 100,
+  ...rest
+}: Props) => {
+  return (
+    <input
+      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={{
+        background: `linear-gradient(to right, #f97316 ${value}%, #30303070 ${value}%)`,
+      }}
+      {...rest}
+    />
+  );
+};
+
+export default Slider;

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

@@ -9,5 +9,5 @@ export type Props<T = any> = {
     onPlay?: (time: number) => void;
     onPause?: (time: number) => void;
 };
-declare const SoftBuildersVideoPlayer: React.MemoExoticComponent<(<T>({ options, notes, chapters, startTime, handleSaveNoteAction, onPlay, onPause, }: Props<T>) => React.JSX.Element)>;
+declare const SoftBuildersVideoPlayer: React.MemoExoticComponent<(<T>({ options, notes, chapters, startTime, handleSaveNoteAction, onPlay, onPause, }: Props<T>) => import("react/jsx-runtime").JSX.Element)>;
 export default SoftBuildersVideoPlayer;

package/dist/components/SoftBuildersVideoPlayer/index.js

@@ -1,4 +1,5 @@
-import React, { memo, useEffect, useState } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo, useEffect, useState } from "react";
 import VideoPlayerComponent from "../VideoPlayerComponent";
 import { convertSRTtoVTT } from "../../utils";
 const DEFAULT_OPTIONS = {
@@ -43,7 +44,7 @@ const Component = ({ options, notes, chapters, startTime = 0, handleSaveNoteActi
         getTracks();
     }, [options.tracks]);
     const id = (Date.now() + Math.random() * 100).toString();
-    return (React.createElement(VideoPlayerComponent, { id: id, chapters: chapters, options: Object.assign(Object.assign({}, options), { tracks }), notes: notes, startTime: startTime, handleSaveNoteAction: handleSaveNoteAction, onPause: onPause, onPlay: onPlay }));
+    return (_jsx(VideoPlayerComponent, { id: id, chapters: chapters, options: Object.assign(Object.assign({}, options), { tracks }), notes: notes, startTime: startTime, handleSaveNoteAction: handleSaveNoteAction, onPause: onPause, onPlay: onPlay }));
 };
 const SoftBuildersVideoPlayer = memo(Component, (prevProps, nextProps) => {
     return (prevProps.options === nextProps.options &&

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/SoftBuildersVideoPlayer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACzD,OAAO,oBAAoB,MAAM,yBAAyB,CAAC;AAO3D,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAE9C,MAAM,eAAe,GAAmC;IACtD,QAAQ,EAAE,KAAK;IACf,QAAQ,EAAE,IAAI;IACd,KAAK,EAAE,IAAI;IACX,KAAK,EAAE,IAAI;IACX,MAAM,EAAE,GAAG;IACX,KAAK,EAAE,GAAG;IACV,OAAO,EAAE,EAAE;IACX,MAAM,EAAE,EAAE;CACX,CAAC;AAYF,MAAM,SAAS,GAAG,CAAK,EACrB,OAAO,EACP,KAAK,EACL,QAAQ,EACR,SAAS,GAAG,CAAC,EACb,oBAAoB,EACpB,MAAM,EACN,OAAO,GACE,EAAE,EAAE;IACb,OAAO,GAAG,gCACL,OAAO,KACV,UAAU,EAAE,IAAI,EAChB,iBAAiB,EAAE,CAAC,EACpB,UAAU,EAAE;YACV,YAAY,EAAE,MAAM;SACrB,GACK,CAAC;IAET,IAAI,OAAO,CAAC,QAAQ,KAAK,SAAS;QAChC,OAAO,CAAC,QAAQ,GAAG,eAAe,CAAC,QAAQ,CAAC;IAC9C,IAAI,OAAO,CAAC,QAAQ,KAAK,SAAS;QAChC,OAAO,CAAC,QAAQ,GAAG,eAAe,CAAC,QAAQ,CAAC;IAC9C,IAAI,OAAO,CAAC,KAAK,KAAK,SAAS;QAAE,OAAO,CAAC,KAAK,GAAG,eAAe,CAAC,KAAK,CAAC;IACvE,IAAI,OAAO,CAAC,KAAK,KAAK,SAAS;QAAE,OAAO,CAAC,KAAK,GAAG,eAAe,CAAC,KAAK,CAAC;IACvE,IAAI,OAAO,CAAC,MAAM,KAAK,SAAS;QAAE,OAAO,CAAC,MAAM,GAAG,eAAe,CAAC,MAAM,CAAC;IAC1E,IAAI,OAAO,CAAC,KAAK,KAAK,SAAS;QAAE,OAAO,CAAC,KAAK,GAAG,eAAe,CAAC,KAAK,CAAC;IAEvE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAiC,EAAE,CAAC,CAAC;IAEzE,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,SAAS,GAAG,KAAK,IAAI,EAAE;YAC3B,MAAM,SAAS,GAAmC,EAAE,CAAC;YACrD,KAAK,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,OAAO,CAAC,MAAM,CAAC,OAAO,EAAE,EAAE,CAAC;gBAC9C,IAAI,GAAG,GAAG,CAAC,CAAC,GAAG,CAAC;gBAEhB,IAAI,CAAC,CAAC,QAAQ,IAAI,UAAU,EAAE,CAAC;oBAC7B,GAAG,GAAG,MAAM,eAAe,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC;gBACrC,CAAC;gBAED,SAAS,CAAC,IAAI,iCACT,CAAC,KACJ,GAAG,IACH,CAAC;YACL,CAAC;YAED,SAAS,CAAC,SAAS,CAAC,CAAC;QACvB,CAAC,CAAC;QAEF,SAAS,EAAE,CAAC;IACd,CAAC,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC;IAErB,MAAM,EAAE,GAAG,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,IAAI,CAAC,MAAM,EAAE,GAAG,GAAG,CAAC,CAAC,QAAQ,EAAE,CAAC;IAEzD,OAAO,CACL,oBAAC,oBAAoB,IACnB,EAAE,EAAE,EAAE,EACN,QAAQ,EAAE,QAAQ,EAClB,OAAO,kCAAO,OAAO,KAAE,MAAM,KAC7B,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS,EACpB,oBAAoB,EAAE,oBAAoB,EAC1C,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,GACd,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,uBAAuB,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,EAAE;IACvE,OAAO,CACL,SAAS,CAAC,OAAO,KAAK,SAAS,CAAC,OAAO;QACvC,SAAS,CAAC,KAAK,KAAK,SAAS,CAAC,KAAK;QACnC,SAAS,CAAC,QAAQ,KAAK,SAAS,CAAC,QAAQ;QACzC,SAAS,CAAC,SAAS,KAAK,SAAS,CAAC,SAAS,CAC5C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,uBAAuB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/SoftBuildersVideoPlayer/index.tsx"],"names":[],"mappings":"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"}

package/dist/components/SoftBuildersVideoPlayer/index.tsx

@@ -0,0 +1,108 @@
+import React, { memo, useEffect, useState } from "react";
+import VideoPlayerComponent from "../VideoPlayerComponent";
+import {
+  SoftBuildersVideoPlayerChapter,
+  SoftBuildersVideoPlayerNote,
+  SoftBuildersVideoPlayerOptions,
+  SoftBuildersVideoPlayerTrack,
+} from "../../types";
+import { convertSRTtoVTT } from "../../utils";
+
+const DEFAULT_OPTIONS: SoftBuildersVideoPlayerOptions = {
+  autoplay: false,
+  controls: true,
+  fluid: true,
+  muted: true,
+  height: 420,
+  width: 720,
+  sources: [],
+  tracks: [],
+};
+
+export type Props<T = any> = {
+  options: SoftBuildersVideoPlayerOptions;
+  notes: SoftBuildersVideoPlayerNote[];
+  chapters: SoftBuildersVideoPlayerChapter[];
+  startTime?: number;
+  handleSaveNoteAction?: (time: number, note: string) => Promise<T>;
+  onPlay?: (time: number) => void;
+  onPause?: (time: number) => void;
+};
+
+const Component = <T,>({
+  options,
+  notes,
+  chapters,
+  startTime = 0,
+  handleSaveNoteAction,
+  onPlay,
+  onPause,
+}: Props<T>) => {
+  options = {
+    ...options,
+    responsive: true,
+    inactivityTimeout: 0,
+    fullscreen: {
+      navigationUI: "hide",
+    },
+  } as any;
+
+  if (options.autoplay === undefined)
+    options.autoplay = DEFAULT_OPTIONS.autoplay;
+  if (options.controls === undefined)
+    options.controls = DEFAULT_OPTIONS.controls;
+  if (options.fluid === undefined) options.fluid = DEFAULT_OPTIONS.fluid;
+  if (options.muted === undefined) options.muted = DEFAULT_OPTIONS.muted;
+  if (options.height === undefined) options.height = DEFAULT_OPTIONS.height;
+  if (options.width === undefined) options.width = DEFAULT_OPTIONS.width;
+
+  const [tracks, setTracks] = useState<SoftBuildersVideoPlayerTrack[]>([]);
+
+  useEffect(() => {
+    const getTracks = async () => {
+      const newTracks: SoftBuildersVideoPlayerTrack[] = [];
+      for (const [i, s] of options.tracks.entries()) {
+        let src = s.src;
+
+        if (s.memeType == "text/srt") {
+          src = await convertSRTtoVTT(s.src);
+        }
+
+        newTracks.push({
+          ...s,
+          src,
+        });
+      }
+
+      setTracks(newTracks);
+    };
+
+    getTracks();
+  }, [options.tracks]);
+
+  const id = (Date.now() + Math.random() * 100).toString();
+
+  return (
+    <VideoPlayerComponent
+      id={id}
+      chapters={chapters}
+      options={{ ...options, tracks }}
+      notes={notes}
+      startTime={startTime}
+      handleSaveNoteAction={handleSaveNoteAction}
+      onPause={onPause}
+      onPlay={onPlay}
+    />
+  );
+};
+
+const SoftBuildersVideoPlayer = memo(Component, (prevProps, nextProps) => {
+  return (
+    prevProps.options === nextProps.options &&
+    prevProps.notes === nextProps.notes &&
+    prevProps.chapters === nextProps.chapters &&
+    prevProps.startTime === nextProps.startTime
+  );
+});
+
+export default SoftBuildersVideoPlayer;

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

@@ -1,4 +1,3 @@
-import React from "react";
 type SubtitleMenuProps = {};
-declare const SubtitleMenu: ({}: SubtitleMenuProps) => React.JSX.Element;
+declare const SubtitleMenu: ({}: SubtitleMenuProps) => import("react/jsx-runtime").JSX.Element;
 export default SubtitleMenu;

package/dist/components/SubtitleMenu/index.js

@@ -1,12 +1,10 @@
-import React, { useEffect, useState } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
 import MenuButton from "../MenuButton";
 import { useSoftBuildersVideoPlayerContext } from "../VideoPlayerComponent/provider";
 import { CheckedIcon, LeftArrowIcon, SubtitlesIcon } from "../../images";
 const SubtitleOption = ({ isSelected, subtitle, onClick, }) => {
-    return (React.createElement("button", { className: "hover:sb-text-orange-500 sb-p-2", onClick: onClick },
-        React.createElement("div", { className: "sb-grid sb-grid-cols-12 sb-items-center sb-gap-2" },
-            React.createElement("div", { className: "sb-col-span-3" }, isSelected ? React.createElement(CheckedIcon, { className: "sb-w-5 sb-h-5" }) : React.createElement("div", null)),
-            React.createElement("p", { className: "sb-text-left sb-col-span-9" }, subtitle.label))));
+    return (_jsx("button", { className: "hover:sb-text-orange-500 sb-p-2", onClick: onClick, children: _jsxs("div", { className: "sb-grid sb-grid-cols-12 sb-items-center sb-gap-2", children: [_jsx("div", { className: "sb-col-span-3", children: isSelected ? _jsx(CheckedIcon, { className: "sb-w-5 sb-h-5" }) : _jsx("div", {}) }), _jsx("p", { className: "sb-text-left sb-col-span-9", children: subtitle.label })] }) }));
 };
 const SubtitleMenu = ({}) => {
     const { player } = useSoftBuildersVideoPlayerContext();
@@ -31,22 +29,15 @@ const SubtitleMenu = ({}) => {
             setSubtitles(textTracks);
         }
     }, [player]);
-    return (React.createElement(MenuButton, { buttonContent: React.createElement(SubtitlesIcon, { className: "sb-w-3 sb-h-3" }), menuContent: React.createElement("div", { className: "sb-rounded-md sb-bg-[#303030] sb-bg-opacity-50 sb-py-5 sb-w-[150px]" },
-            React.createElement("div", { className: "sb-flex sb-flex-col sb-gap-3" },
-                React.createElement("div", { className: "sb-px-5 sb-flex sb-flex-row sb-gap-3 sb-items-start" },
-                    React.createElement("button", { onClick: () => {
-                            if (closeMenuFunction) {
-                                closeMenuFunction();
-                            }
-                        }, className: "hover:sb-scale-150" },
-                        React.createElement(LeftArrowIcon, { className: "sb-w-3 sb-h-3" })),
-                    React.createElement("h3", null, "Subtitle")),
-                React.createElement("div", { className: "sb-w-full sb-h-[.1px] sb-bg-[#AAAAAA] sb-bg-opacity-70" }),
-                React.createElement("div", { className: "sb-px-5  sb-flex sb-flex-col sb-gap-3 sb-items-start" }, subtitles.map((q, i) => {
-                    return (React.createElement(SubtitleOption, { key: `subtitle-${q.label}-${i}`, isSelected: q.mode === "showing", subtitle: q, onClick: () => {
-                            handleSelectSubtitle(q);
-                        } }));
-                })))), close: (fn) => {
+    return (_jsx(MenuButton, { buttonContent: _jsx(SubtitlesIcon, { 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: () => {
+                                    if (closeMenuFunction) {
+                                        closeMenuFunction();
+                                    }
+                                }, className: "hover:sb-scale-150", children: _jsx(LeftArrowIcon, { className: "sb-w-3 sb-h-3" }) }), _jsx("h3", { children: "Subtitle" })] }), _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: subtitles.map((q, i) => {
+                            return (_jsx(SubtitleOption, { isSelected: q.mode === "showing", subtitle: q, onClick: () => {
+                                    handleSelectSubtitle(q);
+                                } }, `subtitle-${q.label}-${i}`));
+                        }) })] }) }), close: (fn) => {
             setCloseMenuFunction(() => fn);
         } }));
 };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/SubtitleMenu/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/SubtitleMenu/index.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAe,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAChE,OAAO,UAAU,MAAM,eAAe,CAAC;AACvC,OAAO,EAAE,iCAAiC,EAAE,MAAM,kCAAkC,CAAC;AACrF,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAQzE,MAAM,cAAc,GAAG,CAAC,EACtB,UAAU,EACV,QAAQ,EACR,OAAO,GACa,EAAE,EAAE;IACxB,OAAO,CACL,iBAAQ,SAAS,EAAC,iCAAiC,EAAC,OAAO,EAAE,OAAO,YAClE,eAAK,SAAS,EAAC,kDAAkD,aAC/D,cAAK,SAAS,EAAC,eAAe,YAC3B,UAAU,CAAC,CAAC,CAAC,KAAC,WAAW,IAAC,SAAS,EAAC,eAAe,GAAG,CAAC,CAAC,CAAC,eAAW,GACjE,EAEN,YAAG,SAAS,EAAC,4BAA4B,YAAE,QAAQ,CAAC,KAAK,GAAK,IAC1D,GACC,CACV,CAAC;AACJ,CAAC,CAAC;AAIF,MAAM,YAAY,GAAG,CAAC,EAAqB,EAAE,EAAE;IAC7C,MAAM,EAAE,MAAM,EAAE,GAAG,iCAAiC,EAAE,CAAC;IAEvD,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,QAAQ,CAExD,SAAS,CAAC,CAAC;IAEb,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAc,EAAE,CAAC,CAAC;IAE5D,MAAM,oBAAoB,GAAG,CAAC,SAAoB,EAAE,EAAE;QACpD,MAAM,YAAY,GAAG,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE;YACvC,IAAI,CAAC,CAAC,KAAK,KAAK,SAAS,CAAC,KAAK,EAAE,CAAC;gBAChC,CAAC,CAAC,IAAI,GAAG,SAAS,CAAC;YACrB,CAAC;iBAAM,CAAC;gBACN,CAAC,CAAC,IAAI,GAAG,UAAU,CAAC;YACtB,CAAC;YACD,OAAO,CAAC,CAAC;QACX,CAAC,CAAC,CAAC;QAEH,YAAY,CAAC,YAAY,CAAC,CAAC;IAC7B,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;;QACb,IAAI,MAAM,EAAE,CAAC;YACX,MAAM,UAAU,GAAgB,MAAC,MAAc,CAAC,UAAU,EAAE,0CAAE,OAAO,CAAC;YAEtE,YAAY,CAAC,UAAU,CAAC,CAAC;QAC3B,CAAC;IACH,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,OAAO,CACL,KAAC,UAAU,IACT,aAAa,EAAE,KAAC,aAAa,IAAC,SAAS,EAAC,eAAe,GAAG,EAC1D,WAAW,EACT,cAAK,SAAS,EAAC,qEAAqE,YAClF,eAAK,SAAS,EAAC,8BAA8B,aAC3C,eAAK,SAAS,EAAC,qDAAqD,aAClE,iBACE,OAAO,EAAE,GAAG,EAAE;oCACZ,IAAI,iBAAiB,EAAE,CAAC;wCACtB,iBAAiB,EAAE,CAAC;oCACtB,CAAC;gCACH,CAAC,EACD,SAAS,EAAC,oBAAoB,YAE9B,KAAC,aAAa,IAAC,SAAS,EAAC,eAAe,GAAG,GACpC,EACT,oCAAiB,IACb,EAEN,cAAK,SAAS,EAAC,wDAAwD,GAAG,EAE1E,cAAK,SAAS,EAAC,sDAAsD,YAClE,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;4BACtB,OAAO,CACL,KAAC,cAAc,IAEb,UAAU,EAAE,CAAC,CAAC,IAAI,KAAK,SAAS,EAChC,QAAQ,EAAE,CAAC,EACX,OAAO,EAAE,GAAG,EAAE;oCACZ,oBAAoB,CAAC,CAAC,CAAC,CAAC;gCAC1B,CAAC,IALI,YAAY,CAAC,CAAC,KAAK,IAAI,CAAC,EAAE,CAM/B,CACH,CAAC;wBACJ,CAAC,CAAC,GACE,IACF,GACF,EAER,KAAK,EAAE,CAAC,EAAY,EAAE,EAAE;YACtB,oBAAoB,CAAC,GAAG,EAAE,CAAC,EAAE,CAAC,CAAC;QACjC,CAAC,GACD,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/components/SubtitleMenu/index.tsx

@@ -0,0 +1,108 @@
+import React, { useCallback, useEffect, useState } from "react";
+import MenuButton from "../MenuButton";
+import { useSoftBuildersVideoPlayerContext } from "../VideoPlayerComponent/provider";
+import { CheckedIcon, LeftArrowIcon, SubtitlesIcon } from "../../images";
+ 
+
+type SubtitleOptionProps = {
+  isSelected: boolean;
+  subtitle: TextTrack;
+  onClick: () => void;
+};
+const SubtitleOption = ({
+  isSelected,
+  subtitle,
+  onClick,
+}: SubtitleOptionProps) => {
+  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">{subtitle.label}</p>
+      </div>
+    </button>
+  );
+};
+
+type SubtitleMenuProps = {};
+
+const SubtitleMenu = ({}: SubtitleMenuProps) => {
+  const { player } = useSoftBuildersVideoPlayerContext();
+
+  const [closeMenuFunction, setCloseMenuFunction] = useState<
+    Function | undefined
+  >(undefined);
+
+  const [subtitles, setSubtitles] = useState<TextTrack[]>([]);
+
+  const handleSelectSubtitle = (textTrack: TextTrack) => {
+    const newSubtitles = subtitles.map((s) => {
+      if (s.label === textTrack.label) {
+        s.mode = "showing";
+      } else {
+        s.mode = "disabled";
+      }
+      return s;
+    });
+
+    setSubtitles(newSubtitles);
+  };
+
+  useEffect(() => {
+    if (player) {
+      const textTracks: TextTrack[] = (player as any).textTracks()?.tracks_;
+
+      setSubtitles(textTracks);
+    }
+  }, [player]);
+
+  return (
+    <MenuButton
+      buttonContent={<SubtitlesIcon 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>Subtitle</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">
+              {subtitles.map((q, i) => {
+                return (
+                  <SubtitleOption
+                    key={`subtitle-${q.label}-${i}`}
+                    isSelected={q.mode === "showing"}
+                    subtitle={q}
+                    onClick={() => {
+                      handleSelectSubtitle(q);
+                    }}
+                  />
+                );
+              })}
+            </div>
+          </div>
+        </div>
+      }
+      close={(fn: Function) => {
+        setCloseMenuFunction(() => fn);
+      }}
+    />
+  );
+};
+
+export default SubtitleMenu;

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

@@ -1,7 +1,6 @@
-import React from "react";
 import { SoftBuildersVideoPlayerChapter } from "../../types";
 type Props = {
     chapters: SoftBuildersVideoPlayerChapter[];
 };
-declare const TimeSlider: ({ chapters }: Props) => React.JSX.Element;
+declare const TimeSlider: ({ chapters }: Props) => import("react/jsx-runtime").JSX.Element;
 export default TimeSlider;

package/dist/components/TimeSlider/index.js

@@ -1,4 +1,5 @@
-import React, { useEffect, useState } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
 import Slider from "../Slider";
 import { useSoftBuildersVideoPlayerContext } from "../VideoPlayerComponent/provider";
 const MIN = 0, MAX = 100;
@@ -40,13 +41,10 @@ const TimeSlider = ({ chapters }) => {
         arr.push(`black 100%`);
         setMaskCuttes(arr.toString());
     }, [chapters, duration]);
-    return (React.createElement("div", { className: " sb-w-full sb-h-2 sb-flex sb-items-center sb-justify-center" },
-        React.createElement("div", { className: "sb-absolute sb-top-0 sb-left-0 sb-w-full sb-z-10" },
-            React.createElement(Slider, { value: timeSlider, handleValueChange: handleValueChange, min: MIN, max: MAX, style: {
-                    background: "transparent",
-                } })),
-        React.createElement("div", { className: "sb-absolute sb-top-0 sb-left-0 sb-w-full sb-h-2 sb-bg-slate-400 sb-rounded-md", style: {
-                background: `
+    return (_jsxs("div", { className: " sb-w-full sb-h-2 sb-flex sb-items-center sb-justify-center", children: [_jsx("div", { className: "sb-absolute sb-top-0 sb-left-0 sb-w-full sb-z-10", children: _jsx(Slider, { value: timeSlider, handleValueChange: handleValueChange, min: MIN, max: MAX, style: {
+                        background: "transparent",
+                    } }) }), _jsx("div", { className: "sb-absolute sb-top-0 sb-left-0 sb-w-full sb-h-2 sb-bg-slate-400 sb-rounded-md", style: {
+                    background: `
           linear-gradient(to right,
             #f97316 0%,
             #f97316 ${timeSlider}%,
@@ -56,14 +54,14 @@ const TimeSlider = ({ chapters }) => {
             #30303030 100%
           )
         `,
-                maskImage: `
+                    maskImage: `
           linear-gradient(to right,
             ${maskCuttes}
           )
         `,
-                maskSize: "100% 100%",
-                maskRepeat: "no-repeat",
-            } })));
+                    maskSize: "100% 100%",
+                    maskRepeat: "no-repeat",
+                } })] }));
 };
 export default TimeSlider;
 //# sourceMappingURL=index.js.map

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

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