softbuilders-react-video-player 1.1.8 → 1.1.10

package/dist/components/Slider/index.tsx

@@ -1,37 +1,36 @@
-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;
+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,
+  className,
+  ...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 
+        ${className}`}
+      style={{
+        background: `linear-gradient(to right, #f97316 ${value}%, #30303070 ${value}%)`,
+      }}
+      {...rest}
+    />
+  );
+};
+
+export default Slider;

package/dist/components/Slider/style.css

@@ -1,15 +1,49 @@
-/* Styling the slider track */
-
-input[type="range"]::-webkit-slider-thumb {
-  -webkit-appearance: none;
-          appearance: none;
-  width: 20px;
-  height: 20px;
-  border-radius: 50%;
-  background: white;
-  cursor: pointer;
-}
-
-input[type="range"]:focus {
-  outline: none;
-}
+/* Styling the slider track */
+
+
+input[type="range"]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+          appearance: none;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: white;
+  cursor: pointer;
+}
+
+input[type="range"]:focus {
+  outline: none;
+}
+
+
+
+
+/* Custom slider knob (thumb) for Chrome/Safari */
+input[type="range"]::-webkit-slider-thumb {
+  width: 0.95rem;
+  height: 0.95rem;
+  border-radius: 50%; /* Make it a circle */
+  cursor: pointer;
+}
+
+/* Custom slider knob (thumb) for Firefox */
+input[type="range"]::-moz-range-thumb {
+  width: 0.95rem;
+  height: 0.95rem;
+  border-radius: 50%; /* Make it a circle */
+  cursor: pointer;
+}
+
+/* Media query for screens below medium (md) */
+@media (max-width: 768px) { /* Adjust the max-width value to match your md breakpoint */
+  input[type="range"]::-webkit-slider-thumb {
+    width: 0.7rem; /* Smaller thumb size */
+    height: 0.7rem; /* Smaller thumb size */
+  }
+
+  input[type="range"]::-moz-range-thumb {
+    width: 0.7rem; /* Smaller thumb size */
+    height: 0.7rem; /* Smaller thumb size */
+  }
+}
+

package/dist/components/SoftBuildersVideoPlayer/index.js

@@ -45,7 +45,7 @@ const Component = ({ options, notes, chapters, startTime = 0, handleSaveNoteActi
         getTracks();
     }, [options.tracks]);
     const id = (Date.now() + Math.random() * 100).toString();
-    return (_jsx(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, poster: "", 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":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/SoftBuildersVideoPlayer/index.tsx"],"names":[],"mappings":"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"}

package/dist/components/SoftBuildersVideoPlayer/index.tsx

@@ -1,109 +1,110 @@
-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[] = [];
-      if (Array.isArray(options.tracks))
-        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;
+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[] = [];
+      if (Array.isArray(options.tracks))
+        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}
+      poster=""
+      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.js

@@ -2,7 +2,7 @@ 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";
+import { CheckedIcon, LeftArrowIcon, SubIcon } from "../../images";
 const SubtitleOption = ({ isSelected, subtitle, onClick, }) => {
     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 })] }) }));
 };
@@ -29,7 +29,7 @@ const SubtitleMenu = ({}) => {
             setSubtitles(textTracks);
         }
     }, [player]);
-    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: () => {
+    return (_jsx(MenuButton, { buttonContent: _jsx(SubIcon, { className: "sb-w-4 sb-h-4 sb-text-white " }), 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();
                                     }

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":"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"}

package/dist/components/SubtitleMenu/index.tsx

@@ -1,108 +1,107 @@
-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;
+import React, { useCallback, useEffect, useState } from "react";
+import MenuButton from "../MenuButton";
+import { useSoftBuildersVideoPlayerContext } from "../VideoPlayerComponent/provider";
+import { CheckedIcon, LeftArrowIcon, SubIcon } 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={<SubIcon className="sb-w-4 sb-h-4 sb-text-white " />}
+      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;