softbuilders-react-video-player 1.2.20 → 1.2.22
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/QualityMenu/index.js +9 -5
- package/dist/components/QualityMenu/index.js.map +1 -1
- package/dist/components/QualityMenu/index.tsx +10 -6
- package/dist/components/VideoPlayerComponent/style/style.css +6 -0
- package/dist/index.css +6 -0
- package/dist/index.mjs +6 -5
- package/package.json +1 -1
| @@ -4,7 +4,10 @@ import MenuButton from "../MenuButton"; | |
| 4 4 | 
             
            import { useSoftBuildersVideoPlayerContext } from "../VideoPlayerComponent/provider";
         | 
| 5 5 | 
             
            import { CheckedIcon, LeftArrowIcon, SettingsIcon } from "../../images";
         | 
| 6 6 | 
             
            const QualityOption = ({ isSelected, quality, onClick, width, isTrailer, }) => {
         | 
| 7 | 
            -
                return (_jsx("button", { className: `hover:sb-text-orange-500 ${width > 400 && !isTrailer ? "sb-p-2" : "sp-pb-1"}`, onClick:  | 
| 7 | 
            +
                return (_jsx("button", { className: `hover:sb-text-orange-500 ${width > 400 && !isTrailer ? "sb-p-2" : "sp-pb-1"}`, onClick: (e) => {
         | 
| 8 | 
            +
                        e.stopPropagation();
         | 
| 9 | 
            +
                        onClick(e);
         | 
| 10 | 
            +
                    }, 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: `${width > 400 && !isTrailer ? "sb-w-5 sb-h-5" : "sb-w-3 sb-h-3"}` })) : (_jsx("div", {})) }), _jsx("p", { className: "sb-text-left sb-col-span-9", children: quality === null || quality === void 0 ? void 0 : quality.label })] }) }));
         | 
| 8 11 | 
             
            };
         | 
| 9 12 | 
             
            const QualityMenu = ({ width, onClick, isTrailer }) => {
         | 
| 10 13 | 
             
                const { player } = useSoftBuildersVideoPlayerContext();
         | 
| @@ -36,15 +39,16 @@ const QualityMenu = ({ width, onClick, isTrailer }) => { | |
| 36 39 | 
             
                                                    closeMenuFunction();
         | 
| 37 40 | 
             
                                                }
         | 
| 38 41 | 
             
                                            }, 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 === null || qualities === void 0 ? void 0 : qualities.map((q, i) => {
         | 
| 39 | 
            -
                                        return (_jsx(QualityOption, { width: width, isTrailer: isTrailer, isSelected: currentQualitySrc === (q === null || q === void 0 ? void 0 : q.label), quality: q, onClick: () => {
         | 
| 42 | 
            +
                                        return (_jsx(QualityOption, { width: width, isTrailer: isTrailer, isSelected: currentQualitySrc === (q === null || q === void 0 ? void 0 : q.label), quality: q, onClick: (e) => {
         | 
| 40 43 | 
             
                                                const source = qualities.find((_q) => (q === null || q === void 0 ? void 0 : q.label) == (_q === null || _q === void 0 ? void 0 : _q.label));
         | 
| 41 44 | 
             
                                                if (source && source.src != currentQualitySrc) {
         | 
| 42 | 
            -
                                                     | 
| 45 | 
            +
                                                    // player?.src(source.src);
         | 
| 43 46 | 
             
                                                    const currentTime = player === null || player === void 0 ? void 0 : player.currentTime();
         | 
| 44 47 | 
             
                                                    setCurrentQualitySrc(source === null || source === void 0 ? void 0 : source.label);
         | 
| 45 | 
            -
                                                     | 
| 46 | 
            -
                                                     | 
| 48 | 
            +
                                                    // player?.currentTime(currentTime);
         | 
| 49 | 
            +
                                                    // player?.play();
         | 
| 47 50 | 
             
                                                }
         | 
| 51 | 
            +
                                                closeMenuFunction && closeMenuFunction();
         | 
| 48 52 | 
             
                                            } }, `quality-${q === null || q === void 0 ? void 0 : q.label}-${i}`));
         | 
| 49 53 | 
             
                                    }) })] }) }), close: (fn) => {
         | 
| 50 54 | 
             
                        setCloseMenuFunction(() => fn);
         | 
| @@ -1 +1 @@ | |
| 1 | 
            -
            {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/QualityMenu/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;AAGrF,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AASxE,MAAM,aAAa,GAAG,CAAC,EACrB,UAAU,EACV,OAAO,EACP,OAAO,EACP,KAAK,EACL,SAAS,GACU,EAAE,EAAE;IACvB,OAAO,CACL,iBACE,SAAS,EAAE,4BACT,KAAK,GAAG,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SACzC,EAAE,EACF,OAAO,EAAE,OAAO, | 
| 1 | 
            +
            {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/QualityMenu/index.tsx"],"names":[],"mappings":"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"}
         | 
| @@ -8,7 +8,7 @@ import { CheckedIcon, LeftArrowIcon, SettingsIcon } from "../../images"; | |
| 8 8 | 
             
            type QualityOptionProps = {
         | 
| 9 9 | 
             
              isSelected: boolean;
         | 
| 10 10 | 
             
              quality: SoftBuildersVideoPlayerSource;
         | 
| 11 | 
            -
              onClick: () => void;
         | 
| 11 | 
            +
              onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
         | 
| 12 12 | 
             
              width: number;
         | 
| 13 13 | 
             
              isTrailer?: boolean;
         | 
| 14 14 | 
             
            };
         | 
| @@ -24,7 +24,10 @@ const QualityOption = ({ | |
| 24 24 | 
             
                  className={`hover:sb-text-orange-500 ${
         | 
| 25 25 | 
             
                    width > 400 && !isTrailer ? "sb-p-2" : "sp-pb-1"
         | 
| 26 26 | 
             
                  }`}
         | 
| 27 | 
            -
                  onClick={ | 
| 27 | 
            +
                  onClick={(e: React.MouseEvent<HTMLButtonElement>) => {
         | 
| 28 | 
            +
                    e.stopPropagation();
         | 
| 29 | 
            +
                    onClick(e);
         | 
| 30 | 
            +
                  }}
         | 
| 28 31 | 
             
                >
         | 
| 29 32 | 
             
                  <div className="sb-grid sb-grid-cols-12 sb-items-center sb-gap-2">
         | 
| 30 33 | 
             
                    <div className="sb-col-span-3">
         | 
| @@ -136,17 +139,18 @@ const QualityMenu = ({ width, onClick, isTrailer }: QualityMenuProps) => { | |
| 136 139 | 
             
                                key={`quality-${q?.label}-${i}`}
         | 
| 137 140 | 
             
                                isSelected={currentQualitySrc === q?.label}
         | 
| 138 141 | 
             
                                quality={q}
         | 
| 139 | 
            -
                                onClick={() => {
         | 
| 142 | 
            +
                                onClick={(e: React.MouseEvent<HTMLButtonElement>) => {
         | 
| 140 143 | 
             
                                  const source = qualities.find(
         | 
| 141 144 | 
             
                                    (_q) => q?.label == _q?.label
         | 
| 142 145 | 
             
                                  );
         | 
| 143 146 | 
             
                                  if (source && source.src != currentQualitySrc) {
         | 
| 144 | 
            -
                                    player?.src(source.src);
         | 
| 147 | 
            +
                                    // player?.src(source.src);
         | 
| 145 148 | 
             
                                    const currentTime = player?.currentTime();
         | 
| 146 149 | 
             
                                    setCurrentQualitySrc(source?.label);
         | 
| 147 | 
            -
                                    player?.currentTime(currentTime);
         | 
| 148 | 
            -
                                    player?.play();
         | 
| 150 | 
            +
                                    // player?.currentTime(currentTime);
         | 
| 151 | 
            +
                                    // player?.play();
         | 
| 149 152 | 
             
                                  }
         | 
| 153 | 
            +
                                  closeMenuFunction && closeMenuFunction();
         | 
| 150 154 | 
             
                                }}
         | 
| 151 155 | 
             
                              />
         | 
| 152 156 | 
             
                            );
         | 
| @@ -14,9 +14,15 @@ | |
| 14 14 | 
             
            .vjs-big-play-button {
         | 
| 15 15 | 
             
              display: none;
         | 
| 16 16 | 
             
            }
         | 
| 17 | 
            +
            .vjs-modal-dialog-content {
         | 
| 18 | 
            +
              display: none;
         | 
| 19 | 
            +
            }
         | 
| 17 20 | 
             
            .vjs-loading-spinner {
         | 
| 18 21 | 
             
              display: none;
         | 
| 19 22 | 
             
            }
         | 
| 23 | 
            +
            .vjs-error-display {
         | 
| 24 | 
            +
              display: none;
         | 
| 25 | 
            +
            }
         | 
| 20 26 | 
             
            .vjs-loading-spinner::after {
         | 
| 21 27 | 
             
              display: none;
         | 
| 22 28 | 
             
            }
         | 
    
        package/dist/index.css
    CHANGED
    
    | @@ -51,9 +51,15 @@ input[type=range]::-moz-range-thumb { | |
| 51 51 | 
             
            .vjs-big-play-button {
         | 
| 52 52 | 
             
              display: none;
         | 
| 53 53 | 
             
            }
         | 
| 54 | 
            +
            .vjs-modal-dialog-content {
         | 
| 55 | 
            +
              display: none;
         | 
| 56 | 
            +
            }
         | 
| 54 57 | 
             
            .vjs-loading-spinner {
         | 
| 55 58 | 
             
              display: none;
         | 
| 56 59 | 
             
            }
         | 
| 60 | 
            +
            .vjs-error-display {
         | 
| 61 | 
            +
              display: none;
         | 
| 62 | 
            +
            }
         | 
| 57 63 | 
             
            .vjs-loading-spinner::after {
         | 
| 58 64 | 
             
              display: none;
         | 
| 59 65 | 
             
            }
         | 
    
        package/dist/index.mjs
    CHANGED
    
    | @@ -871,7 +871,10 @@ var QualityOption = ({ | |
| 871 871 | 
             
                "button",
         | 
| 872 872 | 
             
                {
         | 
| 873 873 | 
             
                  className: `hover:sb-text-orange-500 ${width > 400 && !isTrailer ? "sb-p-2" : "sp-pb-1"}`,
         | 
| 874 | 
            -
                  onClick | 
| 874 | 
            +
                  onClick: (e) => {
         | 
| 875 | 
            +
                    e.stopPropagation();
         | 
| 876 | 
            +
                    onClick(e);
         | 
| 877 | 
            +
                  },
         | 
| 875 878 | 
             
                  children: /* @__PURE__ */ jsxs9("div", { className: "sb-grid sb-grid-cols-12 sb-items-center sb-gap-2", children: [
         | 
| 876 879 | 
             
                    /* @__PURE__ */ jsx26("div", { className: "sb-col-span-3", children: isSelected ? /* @__PURE__ */ jsx26(
         | 
| 877 880 | 
             
                      CheckedIcon_default,
         | 
| @@ -951,17 +954,15 @@ var QualityMenu = ({ width, onClick, isTrailer }) => { | |
| 951 954 | 
             
                              isTrailer,
         | 
| 952 955 | 
             
                              isSelected: currentQualitySrc === (q == null ? void 0 : q.label),
         | 
| 953 956 | 
             
                              quality: q,
         | 
| 954 | 
            -
                              onClick: () => {
         | 
| 957 | 
            +
                              onClick: (e) => {
         | 
| 955 958 | 
             
                                const source = qualities.find(
         | 
| 956 959 | 
             
                                  (_q) => (q == null ? void 0 : q.label) == (_q == null ? void 0 : _q.label)
         | 
| 957 960 | 
             
                                );
         | 
| 958 961 | 
             
                                if (source && source.src != currentQualitySrc) {
         | 
| 959 | 
            -
                                  player == null ? void 0 : player.src(source.src);
         | 
| 960 962 | 
             
                                  const currentTime = player == null ? void 0 : player.currentTime();
         | 
| 961 963 | 
             
                                  setCurrentQualitySrc(source == null ? void 0 : source.label);
         | 
| 962 | 
            -
                                  player == null ? void 0 : player.currentTime(currentTime);
         | 
| 963 | 
            -
                                  player == null ? void 0 : player.play();
         | 
| 964 964 | 
             
                                }
         | 
| 965 | 
            +
                                closeMenuFunction && closeMenuFunction();
         | 
| 965 966 | 
             
                              }
         | 
| 966 967 | 
             
                            },
         | 
| 967 968 | 
             
                            `quality-${q == null ? void 0 : q.label}-${i}`
         |