softbuilders-react-video-player - npm Package Compare versions

Comparing version 1.3.5 to 1.3.6

dist/components/ControlBar/index.d.ts

 import React from "react";
+import { SoftBuildersVideoPlayerChapter, SoftBuildersVideoPlayerNote } from "../../types";
 import Player from "video.js/dist/types/player";
-import { SoftBuildersVideoPlayerChapter, SoftBuildersVideoPlayerNote } from "../../types";
 type Props<T> = {
@@ -5,0 +5,0 @@ player: Player | undefined;

dist/components/ControlBar/index.js

@@ -1,2 +0,2 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
@@ -16,2 +16,3 @@ import CurrentTimeLabel from "../CurrentTimeLabel";
 const ControlBar = ({ player, isPaused, setIsPaused, duration, notes, chapters, seekStep = 5, id, handleSaveNoteAction, handleControlDisplayTimer, setIsQualityMenuOpen, setIsSubtitleMenuOpen, setNoteOpen, disableNote, noteButtonClick, isTrailer, }) => {
+    var _a;
     const { setPlayer, setDuration } = useSoftBuildersVideoPlayerContext();
@@ -21,2 +22,3 @@ const [width, setWidth] = useState(0);
     const [isModalChanged, setIsModalChanged] = useState(false);
+    const [tracks, tracksSet] = useState([]);
     const seek = (duration) => {
@@ -49,3 +51,8 @@ const currentTime = Number((player === null || player === void 0 ? void 0 : player.currentTime()) || 0);
     useEffect(() => {
-        setPlayer(player);
+        var _a;
+        if (player) {
+            const textTracks = (_a = player.textTracks()) === null || _a === void 0 ? void 0 : _a.tracks_;
+            tracksSet(textTracks);
+            setPlayer(player);
+        }
     }, [player]);
@@ -78,7 +85,8 @@ useEffect(() => {
                         ? "absolute sb-top-1"
-                        : "-sb-translate-y-0 sb-w-full"} hover:sb-w-[45%] `, children: [_jsx(CurrentTimeLabel, {}), _jsx(TimeSliderContainer, { chapters: chapters, notes: notes }), _jsx("p", { children: durationFormater(duration) })] }) }), _jsx("div", { className: "sb-h-full", children: _jsx(VolumeSlider, { setNoteOpen: setNoteOpen, isTrailer: isTrailer, volumeSliderToggler: volumeSliderToggler, width: width, setIsSeeking: (val) => setIsSeeking(val), handleControlDisplayTimer: handleControlDisplayTimer }) }), _jsx(TooltipModal, { player: player, isModalChanged: isModalChanged, width: width, content: _jsx("p", { children: "Quality" }), children: _jsx(QualityMenu, { isTrailer: isTrailer, width: width, setIsModalChanged: (val) => setIsModalChanged(val), onClick: (e, isOpen) => {
+                        : "-sb-translate-y-0 sb-w-full"} hover:sb-w-[45%] `, children: [_jsx(CurrentTimeLabel, {}), _jsx(TimeSliderContainer, { chapters: chapters, notes: notes }), _jsx("p", { children: durationFormater(duration) })] }) }), _jsx("div", { className: "sb-h-full", children: _jsx(VolumeSlider, { setNoteOpen: setNoteOpen, isTrailer: isTrailer, volumeSliderToggler: volumeSliderToggler, width: width, setIsSeeking: (val) => setIsSeeking(val), handleControlDisplayTimer: handleControlDisplayTimer }) }), player &&
+                ((_a = player === null || player === void 0 ? void 0 : player.currentSources()[0]) === null || _a === void 0 ? void 0 : _a.type) === "application/dash+xml" && (_jsx(TooltipModal, { player: player, isModalChanged: isModalChanged, width: width, content: _jsx("p", { children: "Quality" }), children: _jsx(QualityMenu, { isTrailer: isTrailer, width: width, setIsModalChanged: (val) => setIsModalChanged(val), onClick: (e, isOpen) => {
                         setVolumeToggler(!volumeSliderToggler);
                         setIsQualityMenuOpen && setIsQualityMenuOpen(isOpen);
                         setIsModalChanged(true);
-                    } }) }), disableNote && (_jsx(TooltipModal, { player: player, width: width, content: _jsx("p", { children: "Create note" }), children: _jsx(CreateNoteMenu, { handleSaveNoteAction: handleSaveNoteAction, width: width, setNoteOpen: setNoteOpen, noteButtonClick: (e) => {
+                    } }) })), disableNote && (_jsx(TooltipModal, { player: player, width: width, content: _jsx("p", { children: "Create note" }), children: _jsx(CreateNoteMenu, { handleSaveNoteAction: handleSaveNoteAction, width: width, setNoteOpen: setNoteOpen, noteButtonClick: (e) => {
                         noteButtonClick &&
@@ -90,6 +98,6 @@ noteButtonClick({
                         player === null || player === void 0 ? void 0 : player.pause();
-                    } }) })), _jsx(TooltipModal, { player: player, width: width, content: _jsx("p", { children: "Subtitle" }), children: _jsx(SubtitleMenu, { isTrailer: isTrailer, width: width, onClick: (e, isOpen) => {
-                        setVolumeToggler(!volumeSliderToggler);
-                        setIsSubtitleMenuOpen && setIsSubtitleMenuOpen(isOpen);
-                    } }) }), _jsx(TooltipModal, { player: player, width: width, content: _jsx("p", { children: "Full screen" }), children: _jsx("button", { onClick: (e) => {
+                    } }) })), _jsx(_Fragment, { children: (tracks === null || tracks === void 0 ? void 0 : tracks.length) > 0 && (_jsx(TooltipModal, { player: player, width: width, content: _jsx("p", { children: "Subtitle" }), children: _jsx(SubtitleMenu, { isTrailer: isTrailer, width: width, onClick: (e, isOpen) => {
+                            setVolumeToggler(!volumeSliderToggler);
+                            setIsSubtitleMenuOpen && setIsSubtitleMenuOpen(isOpen);
+                        } }) })) }), _jsx(TooltipModal, { player: player, width: width, content: _jsx("p", { children: "Full screen" }), children: _jsx("button", { onClick: (e) => {
                         e.preventDefault();
@@ -96,0 +104,0 @@ e.stopPropagation();

dist/components/QualityMenu/index.js

@@ -53,2 +53,3 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
                 const level = qualityLevels[i];
+                // @ts-ignore
                 level.enabled = level.height === height;
@@ -84,3 +85,3 @@ }
         }, buttonContent: _jsx(SettingsIcon, { className: "sb-w-3 sb-h-3" }), menuContent: _jsx(_Fragment, { children: (qualities === null || qualities === void 0 ? void 0 : qualities.length) > 1 && (_jsx("div", { className: `sb-rounded-md sb-bg-[#303030] sb-bg-opacity-50  ${(width > 400 || (player === null || player === void 0 ? void 0 : player.isFullscreen_) === true) && !isTrailer
-                    ? "sb-w-[150px] sb-py-5"
+                    ? "sb-w-[150px] sb-py-2"
                     : "sb-w-[90px] sb-items-center sb-justify-center sb-py-1"}`, 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: () => {
@@ -90,3 +91,3 @@ if (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 === null || qualities === void 0 ? void 0 : 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-items-start ", children: qualities === null || qualities === void 0 ? void 0 : qualities.map((q, i) => {
                                 return (_jsx(QualityOption, { width: width, isTrailer: isTrailer, isSelected: currentQualitySrc === (q === null || q === void 0 ? void 0 : q.height), quality: q, onClick: (e) => {
@@ -93,0 +94,0 @@ setCurrentQualitySrc(q === null || q === void 0 ? void 0 : q.height);

dist/components/VideoPlayerComponent/index.d.ts

@@ -6,2 +6,3 @@ import React from "react";
 import "../../styles/tailwind.css";
+import "videojs-contrib-quality-levels";
 export type Props<T = any> = {
@@ -8,0 +9,0 @@ id: string;

dist/components/VideoPlayerComponent/index.js

@@ -13,2 +13,3 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import SvgSkillamiIcon from "../icons/SkillamiIcon";
+import "videojs-contrib-quality-levels";
 let bigPlayButtonRoot = {};
@@ -15,0 +16,0 @@ const renderBigPlayButton = (id, player, isPaused, setIsPaused, opacity = "100", height, heightValue, isLoading) => {

dist/components/VolumeSlider/index.js

@@ -131,3 +131,3 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
                     ? "-sb-top-1"
-                    : "sb-top-1"}`, onClick: toggleVisibility, onDoubleClick: handleDoubleClick, children: volume == 0 || (player === null || player === void 0 ? void 0 : player.muted()) ? (_jsx(VolumeMute, { className: `sb-w-3 sb-h-3 ${(width < 400 && (player === null || player === void 0 ? void 0 : player.isFullscreen_) === false) || isTrailer
+                    : "sb-top-1"}`, onClick: toggleVisibility, onDoubleClick: handleDoubleClick, children: volume == 0 || (player && (player === null || player === void 0 ? void 0 : player.muted())) ? (_jsx(VolumeMute, { className: `sb-w-3 sb-h-3 ${(width < 400 && (player === null || player === void 0 ? void 0 : player.isFullscreen_) === false) || isTrailer
                         ? ""
@@ -134,0 +134,0 @@ : ""} sb-h-5 sb-w-5` })) : volume < 25 ? (_jsx(VolumeVLow, { className: `sb-w-3 sb-h-3 ${(width < 400 && (player === null || player === void 0 ? void 0 : player.isFullscreen_) === false) || isTrailer

package.json

 {
   "name": "softbuilders-react-video-player",
   "description": "Standalone video player component",
-  "version": "1.3.5",
+  "version": "1.3.6",
   "main": "dist/index.js",
@@ -6,0 +6,0 @@ "types": "dist/index.d.ts",

No alert changes

Improved metrics

Total package byte prevSize

435022

increased by0.56%

Lines of code

9058

increased by0.51%

No dependency changes