softbuilders-react-video-player 1.1.7 → 1.1.9

package/dist/components/VideoPlayerComponent/provider.tsx

@@ -1,82 +1,82 @@
-import React, {
-  createContext,
-  useContext,
-  useState,
-  ReactNode,
-  useEffect,
-} from "react";
-import Player from "video.js/dist/types/player";
-
-interface SoftBuildersVideoPlayerContextType {
-  player: Player | undefined;
-  setPlayer: React.Dispatch<React.SetStateAction<Player | undefined>>;
-
-  currentTime: number;
-  setCurrentTime: (value: number) => void;
-
-  duration: number;
-  setDuration: React.Dispatch<React.SetStateAction<number>>;
-
-  // isPaused: boolean;
-  // setIsPaused: React.Dispatch<React.SetStateAction<boolean>>;
-
-  downloadedBufferPercentage: number;
-  downloadedBufferTime: number;
-  setDownloadedBufferTimeufferTime: React.Dispatch<
-    React.SetStateAction<number>
-  >;
-}
-
-const SoftBuildersVideoPlayerContext = createContext<
-  SoftBuildersVideoPlayerContextType | undefined
->(undefined);
-
-// Create a provider component
-export const SoftBuildersVideoPlayerProvider = ({
-  children,
-}: {
-  children: ReactNode;
-}) => {
-  const [player, setPlayer] = useState<Player | undefined>(undefined);
-  const [currentTime, setCurrentTime] = useState<number>(0);
-  const [duration, setDuration] = useState<number>(1);
-  // const [isPaused, setIsPaused] = useState(false);
-  const [downloadedBufferTime, setDownloadedBufferTimeufferTime] = useState(0);
-  const [downloadedBufferPercentage, setDownloadedBufferPercentage] =
-    useState(0);
-
-  useEffect(() => {
-    setDownloadedBufferPercentage((downloadedBufferTime * 100) / duration);
-  }, [downloadedBufferTime]);
-
-  return (
-    <SoftBuildersVideoPlayerContext.Provider
-      value={{
-        player,
-        setPlayer,
-        duration,
-        setDuration,
-        currentTime,
-        setCurrentTime: (value) => setCurrentTime(Math.floor(value)),
-        // isPaused,
-        // setIsPaused,
-        downloadedBufferTime,
-        setDownloadedBufferTimeufferTime,
-        downloadedBufferPercentage,
-      }}
-    >
-      {children}
-    </SoftBuildersVideoPlayerContext.Provider>
-  );
-};
-
-// Custom hook to use the context
-export const useSoftBuildersVideoPlayerContext = () => {
-  const context = useContext(SoftBuildersVideoPlayerContext);
-  if (!context) {
-    throw new Error(
-      "useSoftBuildersVideoPlayerContext must be used within an SoftBuildersVideoPlayerProvider"
-    );
-  }
-  return context;
-};
+import React, {
+  createContext,
+  useContext,
+  useState,
+  ReactNode,
+  useEffect,
+} from "react";
+import Player from "video.js/dist/types/player";
+
+interface SoftBuildersVideoPlayerContextType {
+  player: Player | undefined;
+  setPlayer: React.Dispatch<React.SetStateAction<Player | undefined>>;
+
+  currentTime: number;
+  setCurrentTime: (value: number) => void;
+
+  duration: number;
+  setDuration: React.Dispatch<React.SetStateAction<number>>;
+
+  // isPaused: boolean;
+  // setIsPaused: React.Dispatch<React.SetStateAction<boolean>>;
+
+  downloadedBufferPercentage: number;
+  downloadedBufferTime: number;
+  setDownloadedBufferTimeufferTime: React.Dispatch<
+    React.SetStateAction<number>
+  >;
+}
+
+const SoftBuildersVideoPlayerContext = createContext<
+  SoftBuildersVideoPlayerContextType | undefined
+>(undefined);
+
+// Create a provider component
+export const SoftBuildersVideoPlayerProvider = ({
+  children,
+}: {
+  children: ReactNode;
+}) => {
+  const [player, setPlayer] = useState<Player | undefined>(undefined);
+  const [currentTime, setCurrentTime] = useState<number>(0);
+  const [duration, setDuration] = useState<number>(1);
+  // const [isPaused, setIsPaused] = useState(false);
+  const [downloadedBufferTime, setDownloadedBufferTimeufferTime] = useState(0);
+  const [downloadedBufferPercentage, setDownloadedBufferPercentage] =
+    useState(0);
+
+  useEffect(() => {
+    setDownloadedBufferPercentage((downloadedBufferTime * 100) / duration);
+  }, [downloadedBufferTime]);
+
+  return (
+    <SoftBuildersVideoPlayerContext.Provider
+      value={{
+        player,
+        setPlayer,
+        duration,
+        setDuration,
+        currentTime,
+        setCurrentTime: (value) => setCurrentTime(Math.floor(value)),
+        // isPaused,
+        // setIsPaused,
+        downloadedBufferTime,
+        setDownloadedBufferTimeufferTime,
+        downloadedBufferPercentage,
+      }}
+    >
+      {children}
+    </SoftBuildersVideoPlayerContext.Provider>
+  );
+};
+
+// Custom hook to use the context
+export const useSoftBuildersVideoPlayerContext = () => {
+  const context = useContext(SoftBuildersVideoPlayerContext);
+  if (!context) {
+    throw new Error(
+      "useSoftBuildersVideoPlayerContext must be used within an SoftBuildersVideoPlayerProvider"
+    );
+  }
+  return context;
+};

package/dist/components/VideoPlayerComponent/style/style.css

@@ -1,36 +1,36 @@
-.video-js .vjs-control-bar {
-  background-color: transparent;
-  display: none;
-}
-
-.video-js .vjs-big-play-button {
-  background-color: transparent;
-  display: block;
-  border: none;
-  padding: 0px;
-  opacity: 0;
-  transition: opacity 0.5s ease-in-out;
-}
-
-.video-js:hover .vjs-big-play-button {
-  background-color: transparent;
-  border: none;
-  padding: 0px;
-  opacity: 1;
-  transition: opacity 0.5s ease-in-out;
-}
-
-.vjs-poster {
-  display: inline-block;
-  vertical-align: middle;
-  cursor: pointer;
-  margin: 0;
-  padding: 0;
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  height: 100%;
-  background-color: black;
-}
+.video-js .vjs-control-bar {
+  background-color: transparent;
+  display: none;
+}
+
+.video-js .vjs-big-play-button {
+  background-color: transparent;
+  display: block;
+  border: none;
+  padding: 0px;
+  opacity: 0;
+  transition: opacity 0.5s ease-in-out;
+}
+
+.video-js:hover .vjs-big-play-button {
+  background-color: transparent;
+  border: none;
+  padding: 0px;
+  opacity: 1;
+  transition: opacity 0.5s ease-in-out;
+}
+
+.vjs-poster {
+  display: inline-block;
+  vertical-align: middle;
+  cursor: pointer;
+  margin: 0;
+  padding: 0;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  height: 100%;
+  background-color: black;
+}

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

@@ -1,3 +1,5 @@
-type Props = {};
-declare const VolumeSlider: ({}: Props) => import("react/jsx-runtime").JSX.Element;
+type Props = {
+    width?: number;
+};
+declare const VolumeSlider: ({ width }: Props) => import("react/jsx-runtime").JSX.Element;
 export default VolumeSlider;

package/dist/components/VolumeSlider/index.js

@@ -4,12 +4,16 @@ import Slider from "../Slider";
 import { useSoftBuildersVideoPlayerContext } from "../VideoPlayerComponent/provider";
 import { MuteIcon, UnmuteIcon } from "../../images";
 const MIN = 0, MAX = 100;
-const VolumeSlider = ({}) => {
+const VolumeSlider = ({ width }) => {
     const { player } = useSoftBuildersVideoPlayerContext();
+    const [isVisible, setVisible] = useState(false);
     const [volume, setVolume] = useState(0);
     useEffect(() => {
         setVolume((player === null || player === void 0 ? void 0 : player.muted()) ? 0 : Number(player === null || player === void 0 ? void 0 : player.volume()) * 100 || 0);
     }, [player]);
+    const toggleVisiblity = () => {
+        setVisible((prev) => !prev);
+    };
     const handleValueChange = (e) => {
         const newVolume = Number(e.target.value);
         setVolume(newVolume);
@@ -21,7 +25,13 @@ const VolumeSlider = ({}) => {
             player === null || player === void 0 ? void 0 : player.muted(false);
         }
     };
-    return (_jsxs("div", { className: "sb-flex sb-items-center sb-gap-2", children: [volume === 0 || (player === null || player === void 0 ? void 0 : player.muted()) ? (_jsx(MuteIcon, { className: "sb-w-3 sb-h-3" })) : (_jsx(UnmuteIcon, { className: "sb-w-3 sb-h-3" })), _jsx(Slider, { value: volume, handleValueChange: handleValueChange, min: MIN, max: MAX })] }));
+    return (_jsxs("div", { className: `sb-flex  sb-flex-col-reverse ${width > 600 ? "!sb-flex-row !sb-items-end" : ""} sb-items-center sb-justify-start sb-gap-2 sb-h-full`, children: [_jsx("div", { className: `sb-flex sb-relative ${width > 600 ? "" : ""} sb-top-1 sb-items-end`, onClick: toggleVisiblity, children: volume === 0 || (player === null || player === void 0 ? void 0 : player.muted()) ? (_jsx(MuteIcon, { className: `sb-w-3 sb-h-3 ${width > 600 ? " " : ""}  sb-h-5 sb-w-5` })) : (_jsx(UnmuteIcon, { className: `sb-w-3 sb-h-3 ${width > 600 ? "" : ""} sb-h-5 sb-w-5` })) }), _jsx("div", { className: "sb-flex sb-items-center sb-justify-center", children: _jsx("div", { className: `${isVisible && width < 600
+                        ? " sb-w-[22px]"
+                        : !isVisible && width < 600
+                            ? "sb-hidden"
+                            : ""}   -sb-rotate-90 -sb-translate-y-2 sb-relative ${width > 600
+                        ? "sb-static sb-w-16 sb-rotate-0 sb-translate-y-0 "
+                        : "sb-translate-y-0"}`, children: _jsx(Slider, { value: volume, handleValueChange: handleValueChange, min: MIN, max: MAX, className: "!sb-w-16" }) }) })] }));
 };
 export default VolumeSlider;
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/VolumeSlider/index.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,EAAE,iCAAiC,EAAE,MAAM,kCAAkC,CAAC;AACrF,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAEpD,MAAM,GAAG,GAAG,CAAC,EACX,GAAG,GAAG,GAAG,CAAC;AAIZ,MAAM,YAAY,GAAG,CAAC,EAAS,EAAE,EAAE;IACjC,MAAM,EAAE,MAAM,EAAE,GAAG,iCAAiC,EAAE,CAAC;IAEvD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAExC,SAAS,CAAC,GAAG,EAAE;QACb,SAAS,CAAC,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,EAAE,EAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,MAAM,EAAE,CAAC,GAAG,GAAG,IAAI,CAAC,CAAC,CAAC;IACvE,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,MAAM,iBAAiB,GAAG,CAAC,CAAsC,EAAE,EAAE;QACnE,MAAM,SAAS,GAAG,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAEzC,SAAS,CAAC,SAAS,CAAC,CAAC;QAErB,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,MAAM,CAAC,SAAS,GAAG,GAAG,CAAC,CAAC;QAEhC,IAAI,SAAS,KAAK,CAAC,EAAE,CAAC;YACpB,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,CAAC,IAAI,CAAC,CAAC;QACtB,CAAC;aAAM,CAAC;YACN,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,CAAC,KAAK,CAAC,CAAC;QACvB,CAAC;IACH,CAAC,CAAC;IAEF,OAAO,CACL,eAAK,SAAS,EAAC,kCAAkC,aAC9C,MAAM,KAAK,CAAC,KAAI,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,EAAE,CAAA,CAAC,CAAC,CAAC,CACjC,KAAC,QAAQ,IAAC,SAAS,EAAC,eAAe,GAAG,CACvC,CAAC,CAAC,CAAC,CACF,KAAC,UAAU,IAAC,SAAS,EAAC,eAAe,GAAG,CACzC,EAED,KAAC,MAAM,IACL,KAAK,EAAE,MAAM,EACb,iBAAiB,EAAE,iBAAiB,EACpC,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,GACR,IACE,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/VolumeSlider/index.tsx"],"names":[],"mappings":"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"}

package/dist/components/VolumeSlider/index.tsx

@@ -1,52 +1,91 @@
-import React, { useEffect, useState } from "react";
-import Slider from "../Slider";
-import { useSoftBuildersVideoPlayerContext } from "../VideoPlayerComponent/provider";
-import { MuteIcon, UnmuteIcon } from "../../images";
-
-const MIN = 0,
-  MAX = 100;
-
-type Props = {};
-
-const VolumeSlider = ({}: Props) => {
-  const { player } = useSoftBuildersVideoPlayerContext();
-
-  const [volume, setVolume] = useState(0);
-
-  useEffect(() => {
-    setVolume(player?.muted() ? 0 : Number(player?.volume()) * 100 || 0);
-  }, [player]);
-
-  const handleValueChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const newVolume = Number(e.target.value);
-
-    setVolume(newVolume);
-
-    player?.volume(newVolume / 100);
-
-    if (newVolume === 0) {
-      player?.muted(true);
-    } else {
-      player?.muted(false);
-    }
-  };
-
-  return (
-    <div className="sb-flex sb-items-center sb-gap-2">
-      {volume === 0 || player?.muted() ? (
-        <MuteIcon className="sb-w-3 sb-h-3" />
-      ) : (
-        <UnmuteIcon className="sb-w-3 sb-h-3" />
-      )}
-
-      <Slider
-        value={volume}
-        handleValueChange={handleValueChange}
-        min={MIN}
-        max={MAX}
-      />
-    </div>
-  );
-};
-
-export default VolumeSlider;
+import React, { useEffect, useState } from "react";
+import Slider from "../Slider";
+import { useSoftBuildersVideoPlayerContext } from "../VideoPlayerComponent/provider";
+import { MuteIcon, UnmuteIcon } from "../../images";
+
+const MIN = 0,
+  MAX = 100;
+
+type Props = {
+  width?: number;
+};
+
+const VolumeSlider = ({ width }: Props) => {
+  const { player } = useSoftBuildersVideoPlayerContext();
+  const [isVisible, setVisible] = useState(false);
+  const [volume, setVolume] = useState(0);
+
+  useEffect(() => {
+    setVolume(player?.muted() ? 0 : Number(player?.volume()) * 100 || 0);
+  }, [player]);
+  const toggleVisiblity = () => {
+    setVisible((prev) => !prev);
+  };
+
+  const handleValueChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newVolume = Number(e.target.value);
+
+    setVolume(newVolume);
+
+    player?.volume(newVolume / 100);
+
+    if (newVolume === 0) {
+      player?.muted(true);
+    } else {
+      player?.muted(false);
+    }
+  };
+
+  return (
+    <div
+      className={`sb-flex  sb-flex-col-reverse ${
+        width > 600 ? "!sb-flex-row !sb-items-end" : ""
+      } sb-items-center sb-justify-start sb-gap-2 sb-h-full`}
+    >
+      {/* Mute/Unmute Icon */}
+      <div
+        className={`sb-flex sb-relative ${
+          width > 600 ? "" : ""
+        } sb-top-1 sb-items-end`}
+        onClick={toggleVisiblity}
+      >
+        {volume === 0 || player?.muted() ? (
+          <MuteIcon
+            className={`sb-w-3 sb-h-3 ${width > 600 ? " " : ""}  sb-h-5 sb-w-5`}
+          />
+        ) : (
+          <UnmuteIcon
+            className={`sb-w-3 sb-h-3 ${width > 600 ? "" : ""} sb-h-5 sb-w-5`}
+          />
+        )}
+      </div>
+      {/* Slider Wrapper */}
+      <div className="sb-flex sb-items-center sb-justify-center">
+        {/* Rotated Slider */}
+        <div
+          className={`${
+            isVisible && width < 600
+              ? " sb-w-[22px]"
+              : !isVisible && width < 600
+              ? "sb-hidden"
+              : ""
+          }   -sb-rotate-90 -sb-translate-y-2 sb-relative ${
+            width > 600
+              ? "sb-static sb-w-16 sb-rotate-0 sb-translate-y-0 "
+              : "sb-translate-y-0"
+          }`}
+        >
+          <Slider
+            value={volume}
+            handleValueChange={handleValueChange}
+            min={MIN}
+            max={MAX}
+            className="!sb-w-16"
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default VolumeSlider;

package/dist/components/icons/SubIcon.d.ts

@@ -0,0 +1,3 @@
+import type { SVGProps } from "react";
+declare const SvgSubIcon: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export default SvgSubIcon;

package/dist/components/icons/SubIcon.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const SvgSubIcon = (props) => (_jsxs("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "none", stroke: "currentColor", viewBox: "0 0 15 15" }, props, { children: [_jsx("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M1.25 7.5c0-2.487 0-3.731.658-4.561q.159-.2.346-.367c.785-.697 1.96-.697 4.309-.697h1.875c2.349 0 3.523 0 4.307.697q.19.168.347.367c.658.83.658 2.074.658 4.561s0 3.731-.658 4.561q-.157.2-.347.367c-.784.697-1.957.697-4.307.697H6.562c-2.349 0-3.523 0-4.308-.697a3 3 0 0 1-.346-.367c-.658-.83-.658-2.073-.658-4.561" }), _jsx("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M6.563 5.625H6.25c-.582 0-.874 0-1.103.095a1.25 1.25 0 0 0-.677.677c-.095.23-.095.52-.095 1.103 0 .582 0 .874.095 1.103a1.25 1.25 0 0 0 .677.677c.23.095.52.095 1.103.095h.313m4.062-3.75h-.312c-.583 0-.874 0-1.104.095a1.25 1.25 0 0 0-.676.677c-.095.23-.095.52-.095 1.103 0 .582 0 .874.095 1.103a1.25 1.25 0 0 0 .676.677c.23.095.521.095 1.104.095h.312" })] })));
+export default SvgSubIcon;
+//# sourceMappingURL=SubIcon.js.map

package/dist/components/icons/SubIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SubIcon.js","sourceRoot":"","sources":["../../../src/components/icons/SubIcon.tsx"],"names":[],"mappings":";AACA,MAAM,UAAU,GAAG,CAAC,KAA8B,EAAE,EAAE,CAAC,CACrD,6BACE,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAC,KAAK,EACX,MAAM,EAAC,KAAK,EACZ,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,OAAO,EAAC,WAAW,IACf,KAAK,eAET,eACE,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EACtB,WAAW,EAAE,GAAG,EAChB,CAAC,EAAC,yTAAyT,GAC3T,EACF,eACE,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EACtB,WAAW,EAAE,GAAG,EAChB,CAAC,EAAC,+VAA+V,GACjW,KACE,CACP,CAAC;AACF,eAAe,UAAU,CAAC"}

package/dist/components/icons/SubIcon.tsx

@@ -0,0 +1,28 @@
+import type { SVGProps } from "react";
+const SvgSubIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="none"
+    stroke="currentColor"
+    viewBox="0 0 15 15"
+    {...props}
+  >
+    <path
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.5}
+      d="M1.25 7.5c0-2.487 0-3.731.658-4.561q.159-.2.346-.367c.785-.697 1.96-.697 4.309-.697h1.875c2.349 0 3.523 0 4.307.697q.19.168.347.367c.658.83.658 2.074.658 4.561s0 3.731-.658 4.561q-.157.2-.347.367c-.784.697-1.957.697-4.307.697H6.562c-2.349 0-3.523 0-4.308-.697a3 3 0 0 1-.346-.367c-.658-.83-.658-2.073-.658-4.561"
+    />
+    <path
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.5}
+      d="M6.563 5.625H6.25c-.582 0-.874 0-1.103.095a1.25 1.25 0 0 0-.677.677c-.095.23-.095.52-.095 1.103 0 .582 0 .874.095 1.103a1.25 1.25 0 0 0 .677.677c.23.095.52.095 1.103.095h.313m4.062-3.75h-.312c-.583 0-.874 0-1.104.095a1.25 1.25 0 0 0-.676.677c-.095.23-.095.52-.095 1.103 0 .582 0 .874.095 1.103a1.25 1.25 0 0 0 .676.677c.23.095.521.095 1.104.095h.312"
+    />
+  </svg>
+);
+export default SvgSubIcon;

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

@@ -10,5 +10,6 @@ export { default as OpenNoteIcon } from "./OpenNoteIcon";
 export { default as PauseIcon } from "./PauseIcon";
 export { default as PlayIcon } from "./PlayIcon";
 export { default as SettingsIcon } from "./SettingsIcon";
+export { default as SubIcon } from "./SubIcon";
 export { default as SubtitlesIcon } from "./SubtitlesIcon";
 export { default as UnmuteIcon } from "./UnmuteIcon";

package/dist/components/icons/index.js

@@ -10,6 +10,7 @@ export { default as OpenNoteIcon } from "./OpenNoteIcon";
 export { default as PauseIcon } from "./PauseIcon";
 export { default as PlayIcon } from "./PlayIcon";
 export { default as SettingsIcon } from "./SettingsIcon";
+export { default as SubIcon } from "./SubIcon";
 export { default as SubtitlesIcon } from "./SubtitlesIcon";
 export { default as UnmuteIcon } from "./UnmuteIcon";
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/icons/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/icons/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC"}

package/dist/components/icons/index.ts

@@ -1,14 +1,15 @@
-export { default as BackwardIcon } from "./BackwardIcon";
-export { default as CheckedIcon } from "./CheckedIcon";
-export { default as ClosedNoteIcon } from "./ClosedNoteIcon";
-export { default as ForwardIcon } from "./ForwardIcon";
-export { default as FullScreenIcon } from "./FullScreenIcon";
-export { default as LeftArrowIcon } from "./LeftArrowIcon";
-export { default as MuteIcon } from "./MuteIcon";
-export { default as NoteIcon } from "./NoteIcon";
-export { default as OpenNoteIcon } from "./OpenNoteIcon";
-export { default as PauseIcon } from "./PauseIcon";
-export { default as PlayIcon } from "./PlayIcon";
-export { default as SettingsIcon } from "./SettingsIcon";
-export { default as SubtitlesIcon } from "./SubtitlesIcon";
-export { default as UnmuteIcon } from "./UnmuteIcon";
+export { default as BackwardIcon } from "./BackwardIcon";
+export { default as CheckedIcon } from "./CheckedIcon";
+export { default as ClosedNoteIcon } from "./ClosedNoteIcon";
+export { default as ForwardIcon } from "./ForwardIcon";
+export { default as FullScreenIcon } from "./FullScreenIcon";
+export { default as LeftArrowIcon } from "./LeftArrowIcon";
+export { default as MuteIcon } from "./MuteIcon";
+export { default as NoteIcon } from "./NoteIcon";
+export { default as OpenNoteIcon } from "./OpenNoteIcon";
+export { default as PauseIcon } from "./PauseIcon";
+export { default as PlayIcon } from "./PlayIcon";
+export { default as SettingsIcon } from "./SettingsIcon";
+export { default as SubIcon } from "./SubIcon";
+export { default as SubtitlesIcon } from "./SubtitlesIcon";
+export { default as UnmuteIcon } from "./UnmuteIcon";

package/dist/images/index.d.ts

@@ -12,3 +12,4 @@ export { default as PlayIcon } from "./../components/icons/PlayIcon";
 export { default as SettingsIcon } from "./../components/icons/SettingsIcon";
 export { default as UnmuteIcon } from "./../components/icons/UnmuteIcon";
 export { default as SubtitlesIcon } from "./../components/icons/SubtitlesIcon";
+export { default as SubIcon } from "./../components/icons/SubIcon";

package/dist/images/index.js

@@ -12,4 +12,5 @@ export { default as PlayIcon } from "./../components/icons/PlayIcon";
 export { default as SettingsIcon } from "./../components/icons/SettingsIcon";
 export { default as UnmuteIcon } from "./../components/icons/UnmuteIcon";
 export { default as SubtitlesIcon } from "./../components/icons/SubtitlesIcon";
+export { default as SubIcon } from "./../components/icons/SubIcon";
 //# sourceMappingURL=index.js.map

package/dist/images/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/images/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,oCAAoC,CAAC;AAC7E,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,mCAAmC,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,sCAAsC,CAAC;AACjF,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,mCAAmC,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,sCAAsC,CAAC;AACjF,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,qCAAqC,CAAC;AAC/E,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,oCAAoC,CAAC;AAC7E,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,oCAAoC,CAAC;AAC7E,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,kCAAkC,CAAC;AACzE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,qCAAqC,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/images/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,oCAAoC,CAAC;AAC7E,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,mCAAmC,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,sCAAsC,CAAC;AACjF,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,mCAAmC,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,sCAAsC,CAAC;AACjF,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,qCAAqC,CAAC;AAC/E,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,oCAAoC,CAAC;AAC7E,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,oCAAoC,CAAC;AAC7E,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,kCAAkC,CAAC;AACzE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,qCAAqC,CAAC;AAC/E,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,+BAA+B,CAAC"}