softbuilders-react-video-player 1.1.54 → 1.1.56

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/index.mjs CHANGED
@@ -31,10 +31,10 @@ var __objRest = (source, exclude) => {
31
31
  };
32
32
 
33
33
  // src/components/SoftBuildersVideoPlayer/index.tsx
34
- import { memo, useEffect as useEffect15, useState as useState14 } from "react";
34
+ import { forwardRef as forwardRef2, memo, useEffect as useEffect15, useState as useState14 } from "react";
35
35
 
36
36
  // src/components/VideoPlayerComponent/index.tsx
37
- import { useEffect as useEffect14, useRef as useRef2, useState as useState13 } from "react";
37
+ import { forwardRef, useEffect as useEffect14, useRef as useRef2, useState as useState13 } from "react";
38
38
  import ReactDOM from "react-dom/client";
39
39
  import videojs from "video.js";
40
40
  import "video.js/dist/video-js.css";
@@ -1452,68 +1452,156 @@ var renderControlBar = (id, player, isPaused, setIsPaused, duration, notes, chap
1452
1452
  }
1453
1453
  }
1454
1454
  };
1455
- var VideoPlayerComponent = ({
1456
- id,
1457
- options,
1458
- notes,
1459
- chapters,
1460
- startTime = 0,
1461
- handleSaveNoteAction,
1462
- poster,
1463
- onPlay,
1464
- onPause,
1465
- disableNote
1466
- }) => {
1467
- var _a;
1468
- const videoRef = useRef2(void 0);
1469
- const playerRef = useRef2(void 0);
1470
- const [isReady, setIsReady] = useState13(false);
1471
- const [isPaused, setIsPaused] = useState13(!options.autoplay);
1472
- const [duration, setDuration] = useState13(1);
1473
- const [opacity, setOpacity] = useState13("0");
1474
- const [isControlBarPresent, setIsControlBarPresent] = useState13(true);
1475
- const [bgColor, setBgColor] = useState13("transparent");
1476
- const [isQualityMenuOpen, setIsQualityMenuOpen] = useState13(false);
1477
- const [isSubtitleMenuOpen, setIsSubtitleMenuOpen] = useState13(false);
1478
- const [isHovered, setIsHovered] = useState13(false);
1479
- const onReady = (player) => {
1480
- if (playerRef) {
1481
- playerRef.current = player;
1482
- setIsReady(true);
1483
- player == null ? void 0 : player.currentTime(startTime);
1484
- player.on("waiting", () => {
1485
- });
1486
- player.on("dispose", () => {
1487
- videojs.log("player will dispose");
1488
- setIsReady(false);
1489
- });
1490
- player.on("loadedmetadata", () => {
1491
- const d = player.duration() || 0;
1492
- setDuration(d);
1493
- });
1494
- }
1495
- };
1496
- useEffect14(() => {
1497
- if (!playerRef.current) {
1498
- const videoElement = document.createElement("video-js");
1499
- videoElement.setAttribute("playsinline", "true");
1500
- videoElement.classList.add("vjs-big-play-centered");
1501
- if (poster) {
1502
- videoElement.setAttribute("poster", poster);
1455
+ var VideoPlayerComponent = forwardRef(
1456
+ ({
1457
+ id,
1458
+ options,
1459
+ notes,
1460
+ chapters,
1461
+ startTime = 0,
1462
+ handleSaveNoteAction,
1463
+ poster,
1464
+ onPlay,
1465
+ onPause,
1466
+ disableNote,
1467
+ childRef
1468
+ }) => {
1469
+ var _a;
1470
+ const videoRef = useRef2(void 0);
1471
+ const playerRef = useRef2(void 0);
1472
+ const [isReady, setIsReady] = useState13(false);
1473
+ const [isPaused, setIsPaused] = useState13(!options.autoplay);
1474
+ const [duration, setDuration] = useState13(1);
1475
+ const [opacity, setOpacity] = useState13("0");
1476
+ const [isControlBarPresent, setIsControlBarPresent] = useState13(true);
1477
+ const [bgColor, setBgColor] = useState13("transparent");
1478
+ const [isQualityMenuOpen, setIsQualityMenuOpen] = useState13(false);
1479
+ const [isSubtitleMenuOpen, setIsSubtitleMenuOpen] = useState13(false);
1480
+ const [isHovered, setIsHovered] = useState13(false);
1481
+ const onReady = (player) => {
1482
+ if (playerRef) {
1483
+ playerRef.current = player;
1484
+ setIsReady(true);
1485
+ player == null ? void 0 : player.currentTime(startTime);
1486
+ player.on("waiting", () => {
1487
+ });
1488
+ player.on("dispose", () => {
1489
+ videojs.log("player will dispose");
1490
+ setIsReady(false);
1491
+ });
1492
+ player.on("loadedmetadata", () => {
1493
+ const d = player.duration() || 0;
1494
+ setDuration(d);
1495
+ });
1503
1496
  }
1504
- videoRef.current.appendChild(videoElement);
1505
- videoElement.style.width = "100%";
1506
- videoElement.style.height = "100%";
1507
- videoElement.style.objectFit = "cover";
1508
- playerRef.current = videojs(videoElement, options, () => {
1509
- onReady(playerRef.current);
1510
- });
1511
- }
1512
- return () => {
1497
+ };
1498
+ useEffect14(() => {
1499
+ if (!playerRef.current) {
1500
+ const videoElement = document.createElement("video-js");
1501
+ videoElement.setAttribute("playsinline", "true");
1502
+ videoElement.classList.add("vjs-big-play-centered");
1503
+ if (poster) {
1504
+ videoElement.setAttribute("poster", poster);
1505
+ }
1506
+ videoRef.current.appendChild(videoElement);
1507
+ videoElement.style.width = "100%";
1508
+ videoElement.style.height = "100%";
1509
+ videoElement.style.objectFit = "cover";
1510
+ playerRef.current = videojs(videoElement, options, () => {
1511
+ onReady(playerRef.current);
1512
+ });
1513
+ }
1514
+ return () => {
1515
+ if (playerRef.current) {
1516
+ playerRef.current.dispose();
1517
+ playerRef.current = void 0;
1518
+ setTimeout(() => {
1519
+ if (bigPlayButtonRoot[id]) {
1520
+ bigPlayButtonRoot[id].unmount();
1521
+ bigPlayButtonRoot[id] = void 0;
1522
+ }
1523
+ if (controlBarRoot[id]) {
1524
+ controlBarRoot[id].unmount();
1525
+ controlBarRoot[id] = void 0;
1526
+ }
1527
+ }, 0);
1528
+ }
1529
+ };
1530
+ }, [options, poster]);
1531
+ useEffect14(() => {
1532
+ if (playerRef.current && isReady) {
1533
+ const currentTime = playerRef.current.currentTime() || 0;
1534
+ if (isPaused) {
1535
+ if (onPause) onPause(currentTime);
1536
+ } else {
1537
+ if (onPlay) onPlay(currentTime);
1538
+ }
1539
+ }
1540
+ }, [isPaused, isReady]);
1541
+ useEffect14(() => {
1542
+ if (isReady) {
1543
+ const controlBarTimeout = setTimeout(() => {
1544
+ renderControlBar(
1545
+ id,
1546
+ playerRef.current,
1547
+ isPaused,
1548
+ setIsPaused,
1549
+ duration,
1550
+ notes,
1551
+ chapters,
1552
+ 5,
1553
+ handleSaveNoteAction,
1554
+ opacity,
1555
+ (e) => {
1556
+ handlePlayerClick(e, true);
1557
+ },
1558
+ bgColor,
1559
+ setIsQualityMenuOpen,
1560
+ setIsSubtitleMenuOpen,
1561
+ disableNote
1562
+ );
1563
+ }, 500);
1564
+ return () => clearTimeout(controlBarTimeout);
1565
+ }
1566
+ }, [
1567
+ id,
1568
+ playerRef,
1569
+ isPaused,
1570
+ setIsPaused,
1571
+ notes,
1572
+ chapters,
1573
+ isReady,
1574
+ handleSaveNoteAction,
1575
+ duration,
1576
+ opacity
1577
+ ]);
1578
+ useEffect14(() => {
1579
+ if (isReady) {
1580
+ const playButtonTimeout = setTimeout(() => {
1581
+ renderBigPlayButton(
1582
+ id,
1583
+ playerRef.current,
1584
+ isPaused,
1585
+ setIsPaused,
1586
+ opacity
1587
+ );
1588
+ }, 500);
1589
+ return () => clearTimeout(playButtonTimeout);
1590
+ }
1591
+ }, [id, isPaused, isReady, opacity]);
1592
+ useEffect14(() => {
1513
1593
  if (playerRef.current) {
1514
- playerRef.current.dispose();
1515
- playerRef.current = void 0;
1516
- setTimeout(() => {
1594
+ const intervalId = setInterval(() => {
1595
+ if (playerRef.current) setIsPaused(playerRef.current.paused());
1596
+ }, 500);
1597
+ return () => clearInterval(intervalId);
1598
+ }
1599
+ }, []);
1600
+ useEffect14(() => {
1601
+ return () => {
1602
+ if (playerRef.current) {
1603
+ playerRef.current.dispose();
1604
+ playerRef.current = void 0;
1517
1605
  if (bigPlayButtonRoot[id]) {
1518
1606
  bigPlayButtonRoot[id].unmount();
1519
1607
  bigPlayButtonRoot[id] = void 0;
@@ -1522,234 +1610,151 @@ var VideoPlayerComponent = ({
1522
1610
  controlBarRoot[id].unmount();
1523
1611
  controlBarRoot[id] = void 0;
1524
1612
  }
1525
- }, 0);
1526
- }
1527
- };
1528
- }, [options, poster]);
1529
- useEffect14(() => {
1530
- if (playerRef.current && isReady) {
1531
- const currentTime = playerRef.current.currentTime() || 0;
1532
- if (isPaused) {
1533
- if (onPause) onPause(currentTime);
1534
- } else {
1535
- if (onPlay) onPlay(currentTime);
1536
- }
1537
- }
1538
- }, [isPaused, isReady]);
1539
- useEffect14(() => {
1540
- if (isReady) {
1541
- const controlBarTimeout = setTimeout(() => {
1542
- renderControlBar(
1543
- id,
1544
- playerRef.current,
1545
- isPaused,
1546
- setIsPaused,
1547
- duration,
1548
- notes,
1549
- chapters,
1550
- 5,
1551
- handleSaveNoteAction,
1552
- opacity,
1553
- (e) => {
1554
- handlePlayerClick(e, true);
1555
- },
1556
- bgColor,
1557
- setIsQualityMenuOpen,
1558
- setIsSubtitleMenuOpen,
1559
- disableNote
1560
- );
1561
- }, 500);
1562
- return () => clearTimeout(controlBarTimeout);
1563
- }
1564
- }, [
1565
- id,
1566
- playerRef,
1567
- isPaused,
1568
- setIsPaused,
1569
- notes,
1570
- chapters,
1571
- isReady,
1572
- handleSaveNoteAction,
1573
- duration,
1574
- opacity
1575
- ]);
1576
- useEffect14(() => {
1577
- if (isReady) {
1578
- const playButtonTimeout = setTimeout(() => {
1579
- renderBigPlayButton(
1580
- id,
1581
- playerRef.current,
1582
- isPaused,
1583
- setIsPaused,
1584
- opacity
1585
- );
1586
- }, 500);
1587
- return () => clearTimeout(playButtonTimeout);
1588
- }
1589
- }, [id, isPaused, isReady, opacity]);
1590
- useEffect14(() => {
1591
- if (playerRef.current) {
1592
- const intervalId = setInterval(() => {
1593
- if (playerRef.current) setIsPaused(playerRef.current.paused());
1594
- }, 500);
1595
- return () => clearInterval(intervalId);
1596
- }
1597
- }, []);
1598
- useEffect14(() => {
1599
- return () => {
1600
- if (playerRef.current) {
1601
- playerRef.current.dispose();
1602
- playerRef.current = void 0;
1603
- if (bigPlayButtonRoot[id]) {
1604
- bigPlayButtonRoot[id].unmount();
1605
- bigPlayButtonRoot[id] = void 0;
1606
1613
  }
1607
- if (controlBarRoot[id]) {
1608
- controlBarRoot[id].unmount();
1609
- controlBarRoot[id] = void 0;
1614
+ };
1615
+ }, []);
1616
+ const timeoutRef = useRef2(null);
1617
+ useEffect14(() => {
1618
+ if (isQualityMenuOpen || isSubtitleMenuOpen) {
1619
+ if (timeoutRef.current) {
1620
+ clearTimeout(timeoutRef.current);
1610
1621
  }
1622
+ setOpacity("100");
1623
+ } else {
1624
+ if (timeoutRef.current) {
1625
+ clearTimeout(timeoutRef.current);
1626
+ }
1627
+ setOpacity("0");
1628
+ timeoutRef.current = setTimeout(() => {
1629
+ setIsControlBarPresent(false);
1630
+ }, 3e3);
1611
1631
  }
1612
- };
1613
- }, []);
1614
- const timeoutRef = useRef2(null);
1615
- useEffect14(() => {
1616
- if (isQualityMenuOpen || isSubtitleMenuOpen) {
1632
+ }, [isQualityMenuOpen, isSubtitleMenuOpen]);
1633
+ const handlePlayerClick = async (e, isTimerOnly = false) => {
1634
+ e.preventDefault();
1617
1635
  if (timeoutRef.current) {
1618
1636
  clearTimeout(timeoutRef.current);
1619
1637
  }
1620
1638
  setOpacity("100");
1621
- } else {
1622
- if (timeoutRef.current) {
1623
- clearTimeout(timeoutRef.current);
1624
- }
1625
- setOpacity("0");
1639
+ setIsControlBarPresent(true);
1626
1640
  timeoutRef.current = setTimeout(() => {
1641
+ setOpacity("0");
1642
+ setBgColor("transparent");
1627
1643
  setIsControlBarPresent(false);
1628
1644
  }, 3e3);
1629
- }
1630
- }, [isQualityMenuOpen, isSubtitleMenuOpen]);
1631
- const handlePlayerClick = async (e, isTimerOnly = false) => {
1632
- e.preventDefault();
1633
- if (timeoutRef.current) {
1634
- clearTimeout(timeoutRef.current);
1635
- }
1636
- setOpacity("100");
1637
- setIsControlBarPresent(true);
1638
- timeoutRef.current = setTimeout(() => {
1639
- setOpacity("0");
1640
- setBgColor("transparent");
1641
- setIsControlBarPresent(false);
1642
- }, 3e3);
1643
- if (isTimerOnly) {
1644
- return;
1645
- }
1646
- if (!isControlBarPresent) {
1647
- return;
1648
- }
1649
- if (playerRef.current) {
1650
- if (playerRef.current.paused()) {
1651
- try {
1652
- await playerRef.current.play();
1653
- setIsPaused(false);
1654
- } catch (error) {
1655
- console.error("Failed to play video:", error);
1656
- }
1657
- } else {
1658
- playerRef.current.pause();
1659
- setIsPaused(true);
1660
- if (onPause) onPause(playerRef.current.currentTime() || 0);
1645
+ if (isTimerOnly) {
1646
+ return;
1661
1647
  }
1662
- }
1663
- };
1664
- const videoRefs = useRef2(null);
1665
- useEffect14(() => {
1666
- const observer = new IntersectionObserver(
1667
- (entries) => {
1668
- entries.forEach((entry) => {
1669
- var _a2, _b;
1670
- if (entry.isIntersecting === false) {
1671
- if (((_a2 = playerRef == null ? void 0 : playerRef.current) == null ? void 0 : _a2.paused()) === false) {
1672
- try {
1673
- (_b = playerRef == null ? void 0 : playerRef.current) == null ? void 0 : _b.pause();
1674
- setIsPaused(true);
1675
- } catch (error) {
1676
- console.error("Failed to play video:", error);
1677
- }
1678
- }
1679
- }
1680
- });
1681
- },
1682
- {
1683
- threshold: 0.1
1684
- // The amount of the component that must be visible (0.1 means 10% visible)
1648
+ if (!isControlBarPresent) {
1649
+ return;
1685
1650
  }
1686
- );
1687
- if (videoRefs.current) {
1688
- observer.observe(videoRefs.current);
1689
- }
1690
- return () => {
1691
- if (videoRefs.current) {
1692
- observer.unobserve(videoRef.current);
1693
- }
1694
- };
1695
- }, []);
1696
- const [timeSeeker, setTimeSeeker] = useState13("0");
1697
- useEffect14(() => {
1698
- const updateTimeSeeker = () => {
1699
- var _a2, _b, _c, _d;
1700
- if (playerRef == null ? void 0 : playerRef.current) {
1701
- const currentTime = (_b = (_a2 = playerRef.current) == null ? void 0 : _a2.currentTime) == null ? void 0 : _b.call(_a2);
1702
- const duration2 = (_d = (_c = playerRef.current) == null ? void 0 : _c.duration) == null ? void 0 : _d.call(_c);
1703
- if (duration2 && currentTime !== void 0) {
1704
- const value = `${currentTime / duration2 * 100}%`;
1705
- setTimeSeeker(value);
1651
+ if (playerRef.current) {
1652
+ if (playerRef.current.paused()) {
1653
+ try {
1654
+ await playerRef.current.play();
1655
+ setIsPaused(false);
1656
+ } catch (error) {
1657
+ console.error("Failed to play video:", error);
1658
+ }
1706
1659
  } else {
1707
- setTimeSeeker("0");
1660
+ playerRef.current.pause();
1661
+ setIsPaused(true);
1662
+ if (onPause) onPause(playerRef.current.currentTime() || 0);
1708
1663
  }
1709
1664
  }
1710
1665
  };
1711
- updateTimeSeeker();
1712
- }, [(_a = playerRef == null ? void 0 : playerRef.current) == null ? void 0 : _a.currentTime()]);
1713
- return /* @__PURE__ */ jsxs14(
1714
- "div",
1715
- {
1716
- ref: videoRefs,
1717
- id: `video-container-${id}`,
1718
- onMouseMove: () => {
1719
- handlePlayerClick(event, true);
1720
- },
1721
- className: "sb-relative sb-overflow-hidden sb-w-full sb-h-full sb-bottom-2 ",
1722
- onMouseEnter: () => setIsHovered(true),
1723
- onMouseLeave: () => setIsHovered(false),
1724
- children: [
1725
- /* @__PURE__ */ jsx35(
1726
- "div",
1727
- {
1728
- className: `sb-h-[3px] sb-transition-opacity sb-duration-500 sb-delay-400 sb-z-10 ease-in-out sb-border-spacing-x-2 sb-absolute sb-bg-[red] sb-bottom-0 ${opacity == "100" ? "sb-opacity-0" : "sb-opacity-100"}`,
1729
- style: {
1730
- width: timeSeeker
1666
+ const videoRefs = useRef2(null);
1667
+ useEffect14(() => {
1668
+ const observer = new IntersectionObserver(
1669
+ (entries) => {
1670
+ entries.forEach((entry) => {
1671
+ var _a2, _b;
1672
+ if (entry.isIntersecting === false) {
1673
+ if (((_a2 = playerRef == null ? void 0 : playerRef.current) == null ? void 0 : _a2.paused()) === false) {
1674
+ try {
1675
+ (_b = playerRef == null ? void 0 : playerRef.current) == null ? void 0 : _b.pause();
1676
+ setIsPaused(true);
1677
+ } catch (error) {
1678
+ console.error("Failed to play video:", error);
1679
+ }
1680
+ }
1731
1681
  }
1682
+ });
1683
+ },
1684
+ {
1685
+ threshold: 0.1
1686
+ // The amount of the component that must be visible (0.1 means 10% visible)
1687
+ }
1688
+ );
1689
+ if (videoRefs.current) {
1690
+ observer.observe(videoRefs.current);
1691
+ }
1692
+ return () => {
1693
+ if (videoRefs.current) {
1694
+ observer.unobserve(videoRef.current);
1695
+ }
1696
+ };
1697
+ }, []);
1698
+ const [timeSeeker, setTimeSeeker] = useState13("0");
1699
+ useEffect14(() => {
1700
+ const updateTimeSeeker = () => {
1701
+ var _a2, _b, _c, _d;
1702
+ if (playerRef == null ? void 0 : playerRef.current) {
1703
+ const currentTime = (_b = (_a2 = playerRef.current) == null ? void 0 : _a2.currentTime) == null ? void 0 : _b.call(_a2);
1704
+ const duration2 = (_d = (_c = playerRef.current) == null ? void 0 : _c.duration) == null ? void 0 : _d.call(_c);
1705
+ if (duration2 && currentTime !== void 0) {
1706
+ const value = `${currentTime / duration2 * 100}%`;
1707
+ setTimeSeeker(value);
1708
+ } else {
1709
+ setTimeSeeker("0");
1732
1710
  }
1733
- ),
1734
- /* @__PURE__ */ jsx35(
1735
- "div",
1736
- {
1737
- className: "hover:sb-cursor-pointer sb-w-full sb-h-full",
1738
- "data-vjs-player": true,
1739
- children: /* @__PURE__ */ jsx35(
1740
- "div",
1741
- {
1742
- onClick: handlePlayerClick,
1743
- ref: videoRef,
1744
- className: "sb-h-full sb-w-full sb-relative"
1711
+ }
1712
+ };
1713
+ updateTimeSeeker();
1714
+ }, [(_a = playerRef == null ? void 0 : playerRef.current) == null ? void 0 : _a.currentTime()]);
1715
+ return /* @__PURE__ */ jsxs14(
1716
+ "div",
1717
+ {
1718
+ ref: videoRefs,
1719
+ id: `video-container-${id}`,
1720
+ onMouseMove: () => {
1721
+ handlePlayerClick(event, true);
1722
+ },
1723
+ className: "sb-relative sb-rounded-md sb-overflow-hidden sb-w-full sb-h-full sb-bottom-2 ",
1724
+ onMouseEnter: () => setIsHovered(true),
1725
+ onMouseLeave: () => setIsHovered(false),
1726
+ children: [
1727
+ /* @__PURE__ */ jsx35(
1728
+ "div",
1729
+ {
1730
+ ref: childRef,
1731
+ onClick: handlePlayerClick,
1732
+ className: `sb-h-[3px] sb-transition-opacity sb-duration-500 sb-delay-400 sb-z-10 ease-in-out sb-border-spacing-x-2 sb-absolute sb-bg-[red] sb-bottom-0 ${opacity == "100" ? "sb-opacity-0" : "sb-opacity-100"}`,
1733
+ style: {
1734
+ width: timeSeeker
1745
1735
  }
1746
- )
1747
- }
1748
- )
1749
- ]
1750
- }
1751
- );
1752
- };
1736
+ }
1737
+ ),
1738
+ /* @__PURE__ */ jsx35(
1739
+ "div",
1740
+ {
1741
+ className: "hover:sb-cursor-pointer sb-w-full sb-h-full",
1742
+ "data-vjs-player": true,
1743
+ children: /* @__PURE__ */ jsx35(
1744
+ "div",
1745
+ {
1746
+ onClick: handlePlayerClick,
1747
+ ref: videoRef,
1748
+ className: "sb-h-full sb-w-full sb-relative"
1749
+ }
1750
+ )
1751
+ }
1752
+ )
1753
+ ]
1754
+ }
1755
+ );
1756
+ }
1757
+ );
1753
1758
  var VideoPlayerComponent_default = VideoPlayerComponent;
1754
1759
 
1755
1760
  // src/components/SoftBuildersVideoPlayer/index.tsx
@@ -1764,69 +1769,73 @@ var DEFAULT_OPTIONS = {
1764
1769
  sources: [],
1765
1770
  tracks: []
1766
1771
  };
1767
- var Component = ({
1768
- options,
1769
- notes,
1770
- chapters,
1771
- startTime = 0,
1772
- handleSaveNoteAction,
1773
- onPlay,
1774
- onPause,
1775
- isFocused = true,
1776
- disableNote
1777
- }) => {
1778
- options = __spreadProps(__spreadValues({}, options), {
1779
- responsive: true,
1780
- inactivityTimeout: 0,
1781
- fullscreen: {
1782
- navigationUI: "hide"
1783
- }
1784
- });
1785
- if (options.autoplay === void 0)
1786
- options.autoplay = DEFAULT_OPTIONS.autoplay;
1787
- if (options.controls === void 0)
1788
- options.controls = DEFAULT_OPTIONS.controls;
1789
- if (options.fluid === void 0) options.fluid = DEFAULT_OPTIONS.fluid;
1790
- if ((options == null ? void 0 : options.muted) === void 0) options.muted = DEFAULT_OPTIONS == null ? void 0 : DEFAULT_OPTIONS.muted;
1791
- if (options.height === void 0) options.height = DEFAULT_OPTIONS.height;
1792
- if (options.width === void 0) options.width = DEFAULT_OPTIONS.width;
1793
- const [tracks, setTracks] = useState14([]);
1794
- useEffect15(() => {
1795
- }, [isFocused]);
1796
- useEffect15(() => {
1797
- const getTracks = async () => {
1798
- const newTracks = [];
1799
- if (Array.isArray(options == null ? void 0 : options.tracks))
1800
- for (const [i, s] of options == null ? void 0 : options.tracks.entries()) {
1801
- let src = s.src;
1802
- if (s.memeType == "text/srt") {
1803
- src = await convertSRTtoVTT(s.src);
1772
+ var Component = forwardRef2(
1773
+ ({
1774
+ options,
1775
+ notes,
1776
+ chapters,
1777
+ startTime = 0,
1778
+ handleSaveNoteAction,
1779
+ onPlay,
1780
+ onPause,
1781
+ isFocused = true,
1782
+ disableNote,
1783
+ childRef
1784
+ }) => {
1785
+ options = __spreadProps(__spreadValues({}, options), {
1786
+ responsive: true,
1787
+ inactivityTimeout: 0,
1788
+ fullscreen: {
1789
+ navigationUI: "hide"
1790
+ }
1791
+ });
1792
+ if (options.autoplay === void 0)
1793
+ options.autoplay = DEFAULT_OPTIONS.autoplay;
1794
+ if (options.controls === void 0)
1795
+ options.controls = DEFAULT_OPTIONS.controls;
1796
+ if (options.fluid === void 0) options.fluid = DEFAULT_OPTIONS.fluid;
1797
+ if ((options == null ? void 0 : options.muted) === void 0) options.muted = DEFAULT_OPTIONS == null ? void 0 : DEFAULT_OPTIONS.muted;
1798
+ if (options.height === void 0) options.height = DEFAULT_OPTIONS.height;
1799
+ if (options.width === void 0) options.width = DEFAULT_OPTIONS.width;
1800
+ const [tracks, setTracks] = useState14([]);
1801
+ useEffect15(() => {
1802
+ }, [isFocused]);
1803
+ useEffect15(() => {
1804
+ const getTracks = async () => {
1805
+ const newTracks = [];
1806
+ if (Array.isArray(options == null ? void 0 : options.tracks))
1807
+ for (const [i, s] of options == null ? void 0 : options.tracks.entries()) {
1808
+ let src = s.src;
1809
+ if (s.memeType == "text/srt") {
1810
+ src = await convertSRTtoVTT(s.src);
1811
+ }
1812
+ newTracks.push(__spreadProps(__spreadValues({}, s), {
1813
+ src
1814
+ }));
1804
1815
  }
1805
- newTracks.push(__spreadProps(__spreadValues({}, s), {
1806
- src
1807
- }));
1808
- }
1809
- setTracks(newTracks);
1810
- };
1811
- getTracks();
1812
- }, [options == null ? void 0 : options.tracks]);
1813
- const id = (Date.now() + Math.random() * 100).toString();
1814
- return /* @__PURE__ */ jsx36(
1815
- VideoPlayerComponent_default,
1816
- {
1817
- id,
1818
- chapters,
1819
- options: __spreadProps(__spreadValues({}, options), { tracks }),
1820
- notes,
1821
- poster: "",
1822
- startTime,
1823
- handleSaveNoteAction,
1824
- disableNote,
1825
- onPause,
1826
- onPlay
1827
- }
1828
- );
1829
- };
1816
+ setTracks(newTracks);
1817
+ };
1818
+ getTracks();
1819
+ }, [options == null ? void 0 : options.tracks]);
1820
+ const id = (Date.now() + Math.random() * 100).toString();
1821
+ return /* @__PURE__ */ jsx36(
1822
+ VideoPlayerComponent_default,
1823
+ {
1824
+ id,
1825
+ chapters,
1826
+ options: __spreadProps(__spreadValues({}, options), { tracks }),
1827
+ notes,
1828
+ poster: "",
1829
+ startTime,
1830
+ handleSaveNoteAction,
1831
+ disableNote,
1832
+ onPause,
1833
+ onPlay,
1834
+ childRef
1835
+ }
1836
+ );
1837
+ }
1838
+ );
1830
1839
  var SoftBuildersVideoPlayer = memo(Component, (prevProps, nextProps) => {
1831
1840
  return prevProps.options === nextProps.options && prevProps.notes === nextProps.notes && prevProps.chapters === nextProps.chapters && prevProps.startTime === nextProps.startTime;
1832
1841
  });