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/components/SoftBuildersVideoPlayer/index.d.ts +2 -1
- package/dist/components/SoftBuildersVideoPlayer/index.js +4 -4
- package/dist/components/SoftBuildersVideoPlayer/index.js.map +1 -1
- package/dist/components/SoftBuildersVideoPlayer/index.tsx +69 -64
- package/dist/components/VideoPlayerComponent/index.d.ts +3 -1
- package/dist/components/VideoPlayerComponent/index.js +4 -4
- package/dist/components/VideoPlayerComponent/index.js.map +1 -1
- package/dist/components/VideoPlayerComponent/index.tsx +267 -261
- package/dist/index.d.mts +4 -3
- package/dist/index.mjs +342 -333
- package/dist/types.d.ts +1 -0
- package/package.json +1 -1
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
|
-
|
1457
|
-
|
1458
|
-
|
1459
|
-
|
1460
|
-
|
1461
|
-
|
1462
|
-
|
1463
|
-
|
1464
|
-
|
1465
|
-
|
1466
|
-
|
1467
|
-
|
1468
|
-
|
1469
|
-
|
1470
|
-
|
1471
|
-
|
1472
|
-
|
1473
|
-
|
1474
|
-
|
1475
|
-
|
1476
|
-
|
1477
|
-
|
1478
|
-
|
1479
|
-
|
1480
|
-
|
1481
|
-
|
1482
|
-
|
1483
|
-
|
1484
|
-
|
1485
|
-
|
1486
|
-
|
1487
|
-
|
1488
|
-
|
1489
|
-
|
1490
|
-
|
1491
|
-
|
1492
|
-
|
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
|
-
|
1505
|
-
|
1506
|
-
|
1507
|
-
|
1508
|
-
|
1509
|
-
|
1510
|
-
|
1511
|
-
|
1512
|
-
|
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
|
-
|
1515
|
-
|
1516
|
-
|
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
|
-
|
1608
|
-
|
1609
|
-
|
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
|
-
|
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
|
-
|
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
|
-
|
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
|
-
|
1688
|
-
|
1689
|
-
|
1690
|
-
|
1691
|
-
|
1692
|
-
|
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
|
-
|
1660
|
+
playerRef.current.pause();
|
1661
|
+
setIsPaused(true);
|
1662
|
+
if (onPause) onPause(playerRef.current.currentTime() || 0);
|
1708
1663
|
}
|
1709
1664
|
}
|
1710
1665
|
};
|
1711
|
-
|
1712
|
-
|
1713
|
-
|
1714
|
-
|
1715
|
-
|
1716
|
-
|
1717
|
-
|
1718
|
-
|
1719
|
-
|
1720
|
-
|
1721
|
-
|
1722
|
-
|
1723
|
-
|
1724
|
-
|
1725
|
-
|
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
|
-
|
1735
|
-
|
1736
|
-
|
1737
|
-
|
1738
|
-
|
1739
|
-
|
1740
|
-
|
1741
|
-
|
1742
|
-
|
1743
|
-
|
1744
|
-
|
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
|
-
|
1769
|
-
|
1770
|
-
|
1771
|
-
|
1772
|
-
|
1773
|
-
|
1774
|
-
|
1775
|
-
|
1776
|
-
|
1777
|
-
|
1778
|
-
|
1779
|
-
|
1780
|
-
|
1781
|
-
|
1782
|
-
|
1783
|
-
|
1784
|
-
|
1785
|
-
|
1786
|
-
|
1787
|
-
|
1788
|
-
|
1789
|
-
|
1790
|
-
|
1791
|
-
|
1792
|
-
|
1793
|
-
|
1794
|
-
|
1795
|
-
|
1796
|
-
|
1797
|
-
|
1798
|
-
|
1799
|
-
|
1800
|
-
|
1801
|
-
|
1802
|
-
|
1803
|
-
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
|
-
|
1806
|
-
|
1807
|
-
|
1808
|
-
|
1809
|
-
|
1810
|
-
|
1811
|
-
|
1812
|
-
|
1813
|
-
|
1814
|
-
|
1815
|
-
|
1816
|
-
|
1817
|
-
|
1818
|
-
|
1819
|
-
|
1820
|
-
|
1821
|
-
|
1822
|
-
|
1823
|
-
|
1824
|
-
|
1825
|
-
|
1826
|
-
|
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
|
});
|