suada-components 1.1.44 → 1.2.1
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/{DailyMotion-dYOsLhXX.js → DailyMotion-C87ZJeRt.js} +1 -1
- package/dist/components/{DailyMotion-BBMHnZsc.esm.js → DailyMotion-DbDeP0dq.esm.js} +1 -1
- package/dist/components/DropDown/DropDown.interface.d.ts +4 -0
- package/dist/components/DropDown/DropDown.js +1 -1
- package/dist/components/DropDown/DropDown.js.map +1 -1
- package/dist/components/{Facebook-C2lp6fKy.esm.js → Facebook-B1XpGyBt.esm.js} +1 -1
- package/dist/components/{Facebook-D55xg0YF.js → Facebook-DigX8u_u.js} +1 -1
- package/dist/components/{FilePlayer-CSNfeLp-.esm.js → FilePlayer-BSL_U8r8.esm.js} +1 -1
- package/dist/components/{FilePlayer-VfIivLWB.js → FilePlayer-BTuFK59w.js} +1 -1
- package/dist/components/{Kaltura-BZ5pUEPz.js → Kaltura-CKV92aVd.js} +1 -1
- package/dist/components/{Kaltura-BVMxludT.esm.js → Kaltura-DAkp5nY0.esm.js} +1 -1
- package/dist/components/{Mixcloud-BDzCezGa.js → Mixcloud-CAgtZPq5.js} +1 -1
- package/dist/components/{Mixcloud-9K2fpYoj.esm.js → Mixcloud-CtWhrXiZ.esm.js} +1 -1
- package/dist/components/{Mux-BDK08Cp7.js → Mux-BRYGMFV_.js} +1 -1
- package/dist/components/{Mux-C3n27KkT.esm.js → Mux-C0xOzOps.esm.js} +1 -1
- package/dist/components/{Preview-BF89gaQn.esm.js → Preview-Crcz-S0c.esm.js} +1 -1
- package/dist/components/{Preview-C-KatBo7.js → Preview-DSBoVsm9.js} +1 -1
- package/dist/components/{SoundCloud-E9VSRo8s.js → SoundCloud-1V8ahw7A.js} +1 -1
- package/dist/components/{SoundCloud-BFfitMcN.esm.js → SoundCloud-BC8iiobM.esm.js} +1 -1
- package/dist/components/{Streamable-BObKpq3j.js → Streamable-BhhnBO_c.js} +1 -1
- package/dist/components/{Streamable-D1pOzVPi.esm.js → Streamable-CGxErYVF.esm.js} +1 -1
- package/dist/components/{Twitch-CAHqJZdW.esm.js → Twitch-8quL43Fw.esm.js} +1 -1
- package/dist/components/{Twitch-CAKL_Jqs.js → Twitch-E9YQS4X8.js} +1 -1
- package/dist/components/VideoPlayer/Player.d.ts +1 -0
- package/dist/components/VideoPlayer/Player.interface.d.ts +2 -1
- package/dist/components/VideoPlayer/Player.js +44 -23
- package/dist/components/VideoPlayer/Player.js.map +1 -1
- package/dist/components/VideoPlayer/Player.styles.d.ts +2 -0
- package/dist/components/VideoPlayer/Player.styles.js +21 -0
- package/dist/components/VideoPlayer/Player.styles.js.map +1 -1
- package/dist/components/VideoPlayer/useHlsSubtitles.d.ts +12 -0
- package/dist/components/VideoPlayer/useHlsSubtitles.js +73 -0
- package/dist/components/VideoPlayer/useHlsSubtitles.js.map +1 -0
- package/dist/components/VideoPlayer/usePlayerControls.js +52 -41
- package/dist/components/VideoPlayer/usePlayerControls.js.map +1 -1
- package/dist/components/{Vidyard-CIHNjfIv.js → Vidyard-B3v7M2i3.js} +1 -1
- package/dist/components/{Vidyard-BrA_V8mx.esm.js → Vidyard-DsG0WHnh.esm.js} +1 -1
- package/dist/components/{Vimeo-LwXzzIA2.esm.js → Vimeo-CXKbdxkV.esm.js} +1 -1
- package/dist/components/{Vimeo-DVX8WzFK.js → Vimeo-ddQ8CMRR.js} +1 -1
- package/dist/components/{Wistia-CxE_SYQ-.js → Wistia-B93lpDSs.js} +1 -1
- package/dist/components/{Wistia-DoFWA9-t.esm.js → Wistia-CJDzE0TP.esm.js} +1 -1
- package/dist/components/{YouTube-BW23iOlA.js → YouTube-631v_AIH.js} +1 -1
- package/dist/components/{YouTube-CiWt6Bsz.esm.js → YouTube-CdjuPIIO.esm.js} +1 -1
- package/dist/components/components/DropDown/DropDown.interface.d.ts +4 -0
- package/dist/components/components/VideoPlayer/Player.d.ts +1 -0
- package/dist/components/components/VideoPlayer/Player.interface.d.ts +2 -1
- package/dist/components/components/VideoPlayer/Player.styles.d.ts +2 -0
- package/dist/components/components/VideoPlayer/useHlsSubtitles.d.ts +12 -0
- package/dist/components/{index-Cs_px_sD.js → index-Ciqeqnts.js} +235 -112
- package/dist/components/{index-CMNE0hhl.esm.js → index-CyUx723z.esm.js} +235 -112
- package/dist/components/index.esm.js +1 -1
- package/dist/icons/components/DropDown/DropDown.interface.d.ts +4 -0
- package/dist/icons/components/VideoPlayer/Player.d.ts +1 -0
- package/dist/icons/components/VideoPlayer/Player.interface.d.ts +2 -1
- package/dist/icons/components/VideoPlayer/Player.styles.d.ts +2 -0
- package/dist/icons/components/VideoPlayer/useHlsSubtitles.d.ts +12 -0
- package/package.json +11 -5
|
@@ -42736,7 +42736,8 @@ var DropDown = function DropDown(props) {
|
|
|
42736
42736
|
isLoading: props.isLoading,
|
|
42737
42737
|
components: {
|
|
42738
42738
|
DropdownIndicator: DropdownIndicator
|
|
42739
|
-
}
|
|
42739
|
+
},
|
|
42740
|
+
noOptionsMessage: props.noOptionsMessage
|
|
42740
42741
|
}), props.touched && props.error && props.errorMessage && jsxRuntimeExports.jsx(ErrorMessage, {
|
|
42741
42742
|
children: props.errorMessage
|
|
42742
42743
|
})]
|
|
@@ -81388,7 +81389,7 @@ function requirePlayers () {
|
|
|
81388
81389
|
canPlay: import_patterns.canPlay.youtube,
|
|
81389
81390
|
lazyPlayer: (0, import_utils.lazy)(() => import(
|
|
81390
81391
|
/* webpackChunkName: 'reactPlayerYouTube' */
|
|
81391
|
-
'./YouTube-
|
|
81392
|
+
'./YouTube-CdjuPIIO.esm.js'
|
|
81392
81393
|
).then(function (n) { return n.Y; }))
|
|
81393
81394
|
},
|
|
81394
81395
|
{
|
|
@@ -81397,7 +81398,7 @@ function requirePlayers () {
|
|
|
81397
81398
|
canPlay: import_patterns.canPlay.soundcloud,
|
|
81398
81399
|
lazyPlayer: (0, import_utils.lazy)(() => import(
|
|
81399
81400
|
/* webpackChunkName: 'reactPlayerSoundCloud' */
|
|
81400
|
-
'./SoundCloud-
|
|
81401
|
+
'./SoundCloud-BC8iiobM.esm.js'
|
|
81401
81402
|
).then(function (n) { return n.S; }))
|
|
81402
81403
|
},
|
|
81403
81404
|
{
|
|
@@ -81406,7 +81407,7 @@ function requirePlayers () {
|
|
|
81406
81407
|
canPlay: import_patterns.canPlay.vimeo,
|
|
81407
81408
|
lazyPlayer: (0, import_utils.lazy)(() => import(
|
|
81408
81409
|
/* webpackChunkName: 'reactPlayerVimeo' */
|
|
81409
|
-
'./Vimeo-
|
|
81410
|
+
'./Vimeo-CXKbdxkV.esm.js'
|
|
81410
81411
|
).then(function (n) { return n.V; }))
|
|
81411
81412
|
},
|
|
81412
81413
|
{
|
|
@@ -81415,7 +81416,7 @@ function requirePlayers () {
|
|
|
81415
81416
|
canPlay: import_patterns.canPlay.mux,
|
|
81416
81417
|
lazyPlayer: (0, import_utils.lazy)(() => import(
|
|
81417
81418
|
/* webpackChunkName: 'reactPlayerMux' */
|
|
81418
|
-
'./Mux-
|
|
81419
|
+
'./Mux-C0xOzOps.esm.js'
|
|
81419
81420
|
).then(function (n) { return n.M; }))
|
|
81420
81421
|
},
|
|
81421
81422
|
{
|
|
@@ -81424,7 +81425,7 @@ function requirePlayers () {
|
|
|
81424
81425
|
canPlay: import_patterns.canPlay.facebook,
|
|
81425
81426
|
lazyPlayer: (0, import_utils.lazy)(() => import(
|
|
81426
81427
|
/* webpackChunkName: 'reactPlayerFacebook' */
|
|
81427
|
-
'./Facebook-
|
|
81428
|
+
'./Facebook-B1XpGyBt.esm.js'
|
|
81428
81429
|
).then(function (n) { return n.F; }))
|
|
81429
81430
|
},
|
|
81430
81431
|
{
|
|
@@ -81433,7 +81434,7 @@ function requirePlayers () {
|
|
|
81433
81434
|
canPlay: import_patterns.canPlay.streamable,
|
|
81434
81435
|
lazyPlayer: (0, import_utils.lazy)(() => import(
|
|
81435
81436
|
/* webpackChunkName: 'reactPlayerStreamable' */
|
|
81436
|
-
'./Streamable-
|
|
81437
|
+
'./Streamable-CGxErYVF.esm.js'
|
|
81437
81438
|
).then(function (n) { return n.S; }))
|
|
81438
81439
|
},
|
|
81439
81440
|
{
|
|
@@ -81442,7 +81443,7 @@ function requirePlayers () {
|
|
|
81442
81443
|
canPlay: import_patterns.canPlay.wistia,
|
|
81443
81444
|
lazyPlayer: (0, import_utils.lazy)(() => import(
|
|
81444
81445
|
/* webpackChunkName: 'reactPlayerWistia' */
|
|
81445
|
-
'./Wistia-
|
|
81446
|
+
'./Wistia-CJDzE0TP.esm.js'
|
|
81446
81447
|
).then(function (n) { return n.W; }))
|
|
81447
81448
|
},
|
|
81448
81449
|
{
|
|
@@ -81451,7 +81452,7 @@ function requirePlayers () {
|
|
|
81451
81452
|
canPlay: import_patterns.canPlay.twitch,
|
|
81452
81453
|
lazyPlayer: (0, import_utils.lazy)(() => import(
|
|
81453
81454
|
/* webpackChunkName: 'reactPlayerTwitch' */
|
|
81454
|
-
'./Twitch-
|
|
81455
|
+
'./Twitch-8quL43Fw.esm.js'
|
|
81455
81456
|
).then(function (n) { return n.T; }))
|
|
81456
81457
|
},
|
|
81457
81458
|
{
|
|
@@ -81460,7 +81461,7 @@ function requirePlayers () {
|
|
|
81460
81461
|
canPlay: import_patterns.canPlay.dailymotion,
|
|
81461
81462
|
lazyPlayer: (0, import_utils.lazy)(() => import(
|
|
81462
81463
|
/* webpackChunkName: 'reactPlayerDailyMotion' */
|
|
81463
|
-
'./DailyMotion-
|
|
81464
|
+
'./DailyMotion-DbDeP0dq.esm.js'
|
|
81464
81465
|
).then(function (n) { return n.D; }))
|
|
81465
81466
|
},
|
|
81466
81467
|
{
|
|
@@ -81469,7 +81470,7 @@ function requirePlayers () {
|
|
|
81469
81470
|
canPlay: import_patterns.canPlay.mixcloud,
|
|
81470
81471
|
lazyPlayer: (0, import_utils.lazy)(() => import(
|
|
81471
81472
|
/* webpackChunkName: 'reactPlayerMixcloud' */
|
|
81472
|
-
'./Mixcloud-
|
|
81473
|
+
'./Mixcloud-CtWhrXiZ.esm.js'
|
|
81473
81474
|
).then(function (n) { return n.M; }))
|
|
81474
81475
|
},
|
|
81475
81476
|
{
|
|
@@ -81478,7 +81479,7 @@ function requirePlayers () {
|
|
|
81478
81479
|
canPlay: import_patterns.canPlay.vidyard,
|
|
81479
81480
|
lazyPlayer: (0, import_utils.lazy)(() => import(
|
|
81480
81481
|
/* webpackChunkName: 'reactPlayerVidyard' */
|
|
81481
|
-
'./Vidyard-
|
|
81482
|
+
'./Vidyard-DsG0WHnh.esm.js'
|
|
81482
81483
|
).then(function (n) { return n.V; }))
|
|
81483
81484
|
},
|
|
81484
81485
|
{
|
|
@@ -81487,7 +81488,7 @@ function requirePlayers () {
|
|
|
81487
81488
|
canPlay: import_patterns.canPlay.kaltura,
|
|
81488
81489
|
lazyPlayer: (0, import_utils.lazy)(() => import(
|
|
81489
81490
|
/* webpackChunkName: 'reactPlayerKaltura' */
|
|
81490
|
-
'./Kaltura-
|
|
81491
|
+
'./Kaltura-DAkp5nY0.esm.js'
|
|
81491
81492
|
).then(function (n) { return n.K; }))
|
|
81492
81493
|
},
|
|
81493
81494
|
{
|
|
@@ -81499,7 +81500,7 @@ function requirePlayers () {
|
|
|
81499
81500
|
},
|
|
81500
81501
|
lazyPlayer: (0, import_utils.lazy)(() => import(
|
|
81501
81502
|
/* webpackChunkName: 'reactPlayerFilePlayer' */
|
|
81502
|
-
'./FilePlayer-
|
|
81503
|
+
'./FilePlayer-BSL_U8r8.esm.js'
|
|
81503
81504
|
).then(function (n) { return n.F; }))
|
|
81504
81505
|
}
|
|
81505
81506
|
];
|
|
@@ -82320,7 +82321,7 @@ function requireReactPlayer () {
|
|
|
82320
82321
|
var import_Player = __toESM(/*@__PURE__*/ requirePlayer());
|
|
82321
82322
|
const Preview = (0, import_utils.lazy)(() => import(
|
|
82322
82323
|
/* webpackChunkName: 'reactPlayerPreview' */
|
|
82323
|
-
'./Preview-
|
|
82324
|
+
'./Preview-Crcz-S0c.esm.js'
|
|
82324
82325
|
).then(function (n) { return n.P; }));
|
|
82325
82326
|
const IS_BROWSER = typeof window !== "undefined" && window.document && typeof document !== "undefined";
|
|
82326
82327
|
const IS_GLOBAL = typeof commonjsGlobal !== "undefined" && commonjsGlobal.window && commonjsGlobal.window.document;
|
|
@@ -82539,6 +82540,27 @@ var StyledSubtitles = dt.div(templateObject_7$1 || (templateObject_7$1 = __makeT
|
|
|
82539
82540
|
var $controls = _a.$controls;
|
|
82540
82541
|
return $controls ? '60px' : '10px';
|
|
82541
82542
|
});
|
|
82543
|
+
var HLS_SUBTITLE_STYLES = "\n /* Hide native HLS subtitles completely - comprehensive approach */\n video::cue {\n display: none !important;\n visibility: hidden !important;\n opacity: 0 !important;\n }\n \n video::-webkit-media-text-track-display {\n display: none !important;\n visibility: hidden !important;\n opacity: 0 !important;\n }\n \n video::cue-region {\n display: none !important;\n visibility: hidden !important;\n opacity: 0 !important;\n }\n \n video::-webkit-media-text-track-container {\n display: none !important;\n visibility: hidden !important;\n opacity: 0 !important;\n }\n \n /* Target ReactPlayer specifically */\n .react-player video::cue {\n display: none !important;\n visibility: hidden !important;\n opacity: 0 !important;\n }\n \n .react-player video::-webkit-media-text-track-display {\n display: none !important;\n visibility: hidden !important;\n opacity: 0 !important;\n }\n \n .react-player video::cue-region {\n display: none !important;\n visibility: hidden !important;\n opacity: 0 !important;\n }\n \n .react-player video::-webkit-media-text-track-container {\n display: none !important;\n visibility: hidden !important;\n opacity: 0 !important;\n }\n \n /* Additional selectors for different browsers */\n video::-moz-media-text-track-display {\n display: none !important;\n visibility: hidden !important;\n opacity: 0 !important;\n }\n \n video::-ms-media-text-track-display {\n display: none !important;\n visibility: hidden !important;\n opacity: 0 !important;\n }\n \n /* Hide any subtitle overlays */\n .react-player video + div[style*=\"position: absolute\"] {\n display: none !important;\n }\n \n /* Target HLS video player specifically */\n .hls-video-player::cue {\n display: none !important;\n visibility: hidden !important;\n opacity: 0 !important;\n }\n \n .hls-video-player::-webkit-media-text-track-display {\n display: none !important;\n visibility: hidden !important;\n opacity: 0 !important;\n }\n \n .hls-video-player::-webkit-media-text-track-container {\n display: none !important;\n visibility: hidden !important;\n opacity: 0 !important;\n }\n \n .hls-video-player::cue-region {\n display: none !important;\n visibility: hidden !important;\n opacity: 0 !important;\n }\n";
|
|
82544
|
+
var injectHLSSubtitleStyles = function injectHLSSubtitleStyles() {
|
|
82545
|
+
var addSubtitleStyles = function addSubtitleStyles() {
|
|
82546
|
+
var existingStyle = document.getElementById('hls-subtitle-styles');
|
|
82547
|
+
if (existingStyle) {
|
|
82548
|
+
existingStyle.remove();
|
|
82549
|
+
}
|
|
82550
|
+
var style = document.createElement('style');
|
|
82551
|
+
style.id = 'hls-subtitle-styles';
|
|
82552
|
+
style.textContent = HLS_SUBTITLE_STYLES;
|
|
82553
|
+
document.head.appendChild(style);
|
|
82554
|
+
};
|
|
82555
|
+
addSubtitleStyles();
|
|
82556
|
+
// Return cleanup function
|
|
82557
|
+
return function () {
|
|
82558
|
+
var existingStyle = document.getElementById('hls-subtitle-styles');
|
|
82559
|
+
if (existingStyle) {
|
|
82560
|
+
existingStyle.remove();
|
|
82561
|
+
}
|
|
82562
|
+
};
|
|
82563
|
+
};
|
|
82542
82564
|
var templateObject_1$9, templateObject_2$7, templateObject_3$4, templateObject_4$2, templateObject_5$2, templateObject_6$2, templateObject_7$1;
|
|
82543
82565
|
|
|
82544
82566
|
var StyledControls = dt.div(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 16px;\n width: 100%;\n border-radius: 0px 0px 8px 8px;\n background: #565a62;\n padding: 12px 16px;\n position: relative;\n\n svg {\n cursor: pointer;\n\n @media screen and (max-width: 1500px) {\n width: 20px;\n height: 20px;\n }\n\n @media screen and (max-width: 1000px) {\n width: 16px;\n height: 16px;\n }\n }\n\n & > p {\n color: var(--neutral-colors-light);\n font-family: 'Poppins', sans-serif;\n ", "\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 16px;\n width: 100%;\n border-radius: 0px 0px 8px 8px;\n background: #565a62;\n padding: 12px 16px;\n position: relative;\n\n svg {\n cursor: pointer;\n\n @media screen and (max-width: 1500px) {\n width: 20px;\n height: 20px;\n }\n\n @media screen and (max-width: 1000px) {\n width: 16px;\n height: 16px;\n }\n }\n\n & > p {\n color: var(--neutral-colors-light);\n font-family: 'Poppins', sans-serif;\n ", "\n }\n"])), {
|
|
@@ -88689,13 +88711,18 @@ function usePlayerControls(_a) {
|
|
|
88689
88711
|
var duration = videoPlayerRef.current ? videoPlayerRef.current.getDuration() : 0;
|
|
88690
88712
|
var formatCurrentTime = FormatSecondsToTimeString(currentTime);
|
|
88691
88713
|
var formatDuration = FormatSecondsToTimeString(duration);
|
|
88714
|
+
// Using previous method for old videos(we used to parse subtitles via link)
|
|
88692
88715
|
useEffect(function () {
|
|
88693
|
-
|
|
88694
|
-
|
|
88695
|
-
|
|
88696
|
-
|
|
88697
|
-
|
|
88698
|
-
|
|
88716
|
+
if (subtitleUrl) {
|
|
88717
|
+
fetch(subtitleUrl).then(function (response) {
|
|
88718
|
+
return response.text();
|
|
88719
|
+
}).then(function (content) {
|
|
88720
|
+
var parsedSubtitles = parseVTT(content);
|
|
88721
|
+
setSubtitles(parsedSubtitles);
|
|
88722
|
+
})["catch"](function (error) {
|
|
88723
|
+
console.error('Error fetching external subtitles:', error);
|
|
88724
|
+
});
|
|
88725
|
+
}
|
|
88699
88726
|
}, [subtitleUrl]);
|
|
88700
88727
|
useEffect(function () {
|
|
88701
88728
|
var handleFullscreenChange = function handleFullscreenChange() {
|
|
@@ -88726,8 +88753,9 @@ function usePlayerControls(_a) {
|
|
|
88726
88753
|
}, [videoPlayerRef]);
|
|
88727
88754
|
var progressHandler = useCallback(function (state) {
|
|
88728
88755
|
return __awaiter(_this, void 0, void 0, function () {
|
|
88729
|
-
var currentSubtitleEntry, i, sub, i, sub, currentTime_1, now;
|
|
88730
|
-
|
|
88756
|
+
var videoElement, hasHLSSubtitles, currentSubtitleEntry, i, sub, i, sub, currentTime_1, now;
|
|
88757
|
+
var _a, _b;
|
|
88758
|
+
return __generator(this, function (_c) {
|
|
88731
88759
|
if (count > 2) {
|
|
88732
88760
|
if (controlRef.current) {
|
|
88733
88761
|
controlRef.current.style.visibility = 'hidden';
|
|
@@ -88736,44 +88764,47 @@ function usePlayerControls(_a) {
|
|
|
88736
88764
|
} else if (controlRef.current && controlRef.current.style.visibility === 'visible' && isControlsActive) {
|
|
88737
88765
|
count += 1;
|
|
88738
88766
|
}
|
|
88739
|
-
|
|
88740
|
-
|
|
88741
|
-
|
|
88742
|
-
|
|
88743
|
-
|
|
88744
|
-
|
|
88745
|
-
|
|
88746
|
-
|
|
88747
|
-
|
|
88767
|
+
videoElement = (_a = videoPlayerRef.current) === null || _a === void 0 ? void 0 : _a.getInternalPlayer();
|
|
88768
|
+
hasHLSSubtitles = ((_b = videoElement === null || videoElement === void 0 ? void 0 : videoElement.textTracks) === null || _b === void 0 ? void 0 : _b.length) > 0;
|
|
88769
|
+
if (subtitles.length > 0 && !hasHLSSubtitles && isSubtitlesChecked) {
|
|
88770
|
+
currentSubtitleEntry = void 0;
|
|
88771
|
+
if (lastSubtitleIndexRef.current !== null) {
|
|
88772
|
+
if (state.playedSeconds > lastPlaybackTimeRef.current) {
|
|
88773
|
+
for (i = lastSubtitleIndexRef.current; i < subtitles.length; i++) {
|
|
88774
|
+
sub = subtitles[i];
|
|
88775
|
+
if (state.playedSeconds >= sub.start && state.playedSeconds <= sub.end) {
|
|
88776
|
+
currentSubtitleEntry = sub;
|
|
88777
|
+
lastSubtitleIndexRef.current = i;
|
|
88778
|
+
break;
|
|
88779
|
+
}
|
|
88748
88780
|
}
|
|
88749
|
-
}
|
|
88750
|
-
|
|
88751
|
-
|
|
88752
|
-
|
|
88753
|
-
|
|
88754
|
-
|
|
88755
|
-
|
|
88756
|
-
|
|
88757
|
-
break;
|
|
88781
|
+
} else {
|
|
88782
|
+
for (i = lastSubtitleIndexRef.current; i >= 0; i--) {
|
|
88783
|
+
sub = subtitles[i];
|
|
88784
|
+
if (state.playedSeconds >= sub.start && state.playedSeconds <= sub.end) {
|
|
88785
|
+
currentSubtitleEntry = sub;
|
|
88786
|
+
lastSubtitleIndexRef.current = i;
|
|
88787
|
+
break;
|
|
88788
|
+
}
|
|
88758
88789
|
}
|
|
88759
88790
|
}
|
|
88760
88791
|
}
|
|
88761
|
-
|
|
88762
|
-
|
|
88763
|
-
|
|
88764
|
-
|
|
88765
|
-
|
|
88792
|
+
if (!currentSubtitleEntry) {
|
|
88793
|
+
currentSubtitleEntry = subtitles.find(function (sub) {
|
|
88794
|
+
return state.playedSeconds >= sub.start && state.playedSeconds <= sub.end;
|
|
88795
|
+
});
|
|
88796
|
+
if (currentSubtitleEntry) {
|
|
88797
|
+
lastSubtitleIndexRef.current = subtitles.indexOf(currentSubtitleEntry);
|
|
88798
|
+
}
|
|
88799
|
+
}
|
|
88800
|
+
lastPlaybackTimeRef.current = state.playedSeconds;
|
|
88766
88801
|
if (currentSubtitleEntry) {
|
|
88767
|
-
|
|
88802
|
+
setCurrentSubtitle(currentSubtitleEntry.text);
|
|
88803
|
+
} else {
|
|
88804
|
+
setCurrentSubtitle(''); // Clear subtitle if none should be displayed
|
|
88805
|
+
lastSubtitleIndexRef.current = null;
|
|
88768
88806
|
}
|
|
88769
88807
|
}
|
|
88770
|
-
lastPlaybackTimeRef.current = state.playedSeconds;
|
|
88771
|
-
if (currentSubtitleEntry) {
|
|
88772
|
-
setCurrentSubtitle(currentSubtitleEntry.text);
|
|
88773
|
-
} else {
|
|
88774
|
-
setCurrentSubtitle(''); // Clear subtitle if none should be displayed
|
|
88775
|
-
lastSubtitleIndexRef.current = null;
|
|
88776
|
-
}
|
|
88777
88808
|
if (!seeking) {
|
|
88778
88809
|
setVideoState(function (prev) {
|
|
88779
88810
|
return __assign(__assign({}, prev), state);
|
|
@@ -88789,7 +88820,7 @@ function usePlayerControls(_a) {
|
|
|
88789
88820
|
return [2 /*return*/];
|
|
88790
88821
|
});
|
|
88791
88822
|
});
|
|
88792
|
-
}, [seeking, handleTrackProgress, isControlsActive, subtitles]);
|
|
88823
|
+
}, [seeking, handleTrackProgress, isControlsActive, subtitles, isSubtitlesChecked]);
|
|
88793
88824
|
var seekHandler = function seekHandler(e) {
|
|
88794
88825
|
var v = parseFloat(e.target.value) / 100;
|
|
88795
88826
|
setVideoState(function (prev) {
|
|
@@ -88801,7 +88832,7 @@ function usePlayerControls(_a) {
|
|
|
88801
88832
|
videoPlayerRef.current.seekTo(v);
|
|
88802
88833
|
}
|
|
88803
88834
|
};
|
|
88804
|
-
var seekMouseUpHandler = function seekMouseUpHandler(
|
|
88835
|
+
var seekMouseUpHandler = function seekMouseUpHandler() {
|
|
88805
88836
|
setVideoState(function (prev) {
|
|
88806
88837
|
return __assign(__assign({}, prev), {
|
|
88807
88838
|
seeking: false
|
|
@@ -88840,7 +88871,7 @@ function usePlayerControls(_a) {
|
|
|
88840
88871
|
});
|
|
88841
88872
|
}
|
|
88842
88873
|
};
|
|
88843
|
-
var onSeekMouseDownHandler = function onSeekMouseDownHandler(
|
|
88874
|
+
var onSeekMouseDownHandler = function onSeekMouseDownHandler() {
|
|
88844
88875
|
setVideoState(function (prev) {
|
|
88845
88876
|
return __assign(__assign({}, prev), {
|
|
88846
88877
|
seeking: true
|
|
@@ -88980,14 +89011,89 @@ function usePlayerControls(_a) {
|
|
|
88980
89011
|
isFullscreen: isFullscreen,
|
|
88981
89012
|
isControlsActive: isControlsActive,
|
|
88982
89013
|
currentSubtitle: currentSubtitle,
|
|
89014
|
+
setCurrentSubtitle: setCurrentSubtitle,
|
|
88983
89015
|
playing: isPlaying
|
|
88984
89016
|
};
|
|
88985
89017
|
}
|
|
88986
89018
|
|
|
89019
|
+
var useHLSSubtitles = function useHLSSubtitles(_a) {
|
|
89020
|
+
var videoPlayerRef = _a.videoPlayerRef,
|
|
89021
|
+
isSubtitlesChecked = _a.isSubtitlesChecked,
|
|
89022
|
+
setCurrentSubtitle = _a.setCurrentSubtitle;
|
|
89023
|
+
var hlsSubtitleTrackRef = useRef(null);
|
|
89024
|
+
var extractHLSSubtitleText = useCallback(function () {
|
|
89025
|
+
var _a;
|
|
89026
|
+
var videoElement = (_a = videoPlayerRef.current) === null || _a === void 0 ? void 0 : _a.getInternalPlayer();
|
|
89027
|
+
if (!videoElement || !videoElement.textTracks) return;
|
|
89028
|
+
var _loop_1 = function _loop_1(i) {
|
|
89029
|
+
var track = videoElement.textTracks[i];
|
|
89030
|
+
if (track.kind === 'subtitles' || track.kind === 'captions') {
|
|
89031
|
+
hlsSubtitleTrackRef.current = track;
|
|
89032
|
+
var handleCueChange = function handleCueChange() {
|
|
89033
|
+
if (isSubtitlesChecked && track.activeCues && track.activeCues.length > 0) {
|
|
89034
|
+
var currentCue = track.activeCues[0];
|
|
89035
|
+
if (currentCue && currentCue.text) {
|
|
89036
|
+
setCurrentSubtitle(currentCue.text);
|
|
89037
|
+
}
|
|
89038
|
+
} else if (isSubtitlesChecked) {
|
|
89039
|
+
setCurrentSubtitle('');
|
|
89040
|
+
}
|
|
89041
|
+
};
|
|
89042
|
+
track.removeEventListener('cuechange', handleCueChange);
|
|
89043
|
+
track.addEventListener('cuechange', handleCueChange);
|
|
89044
|
+
track.mode = isSubtitlesChecked ? 'showing' : 'hidden';
|
|
89045
|
+
return "break";
|
|
89046
|
+
}
|
|
89047
|
+
};
|
|
89048
|
+
for (var i = 0; i < videoElement.textTracks.length; i++) {
|
|
89049
|
+
var state_1 = _loop_1(i);
|
|
89050
|
+
if (state_1 === "break") break;
|
|
89051
|
+
}
|
|
89052
|
+
}, [isSubtitlesChecked, setCurrentSubtitle, videoPlayerRef]);
|
|
89053
|
+
var setupHLSSubtitleTracking = useCallback(function () {
|
|
89054
|
+
var _a;
|
|
89055
|
+
var videoElement = (_a = videoPlayerRef.current) === null || _a === void 0 ? void 0 : _a.getInternalPlayer();
|
|
89056
|
+
if (!videoElement) return;
|
|
89057
|
+
videoElement.classList.add('hls-video-player');
|
|
89058
|
+
var _checkTextTracks = function checkTextTracks(attempt) {
|
|
89059
|
+
if (attempt === void 0) {
|
|
89060
|
+
attempt = 0;
|
|
89061
|
+
}
|
|
89062
|
+
var textTracks = videoElement.textTracks;
|
|
89063
|
+
if (textTracks && textTracks.length > 0) {
|
|
89064
|
+
extractHLSSubtitleText();
|
|
89065
|
+
} else if (attempt < 5) {
|
|
89066
|
+
setTimeout(function () {
|
|
89067
|
+
return _checkTextTracks(attempt + 1);
|
|
89068
|
+
}, 300 * (attempt + 1));
|
|
89069
|
+
}
|
|
89070
|
+
};
|
|
89071
|
+
_checkTextTracks();
|
|
89072
|
+
videoElement.addEventListener('loadedmetadata', function () {
|
|
89073
|
+
_checkTextTracks();
|
|
89074
|
+
});
|
|
89075
|
+
}, [extractHLSSubtitleText, videoPlayerRef]);
|
|
89076
|
+
useEffect(function () {
|
|
89077
|
+
extractHLSSubtitleText();
|
|
89078
|
+
}, [isSubtitlesChecked, extractHLSSubtitleText]);
|
|
89079
|
+
useEffect(function () {
|
|
89080
|
+
var _a;
|
|
89081
|
+
var videoElement = (_a = videoPlayerRef.current) === null || _a === void 0 ? void 0 : _a.getInternalPlayer();
|
|
89082
|
+
if (videoElement && videoElement.textTracks && videoElement.textTracks.length > 0) {
|
|
89083
|
+
extractHLSSubtitleText();
|
|
89084
|
+
}
|
|
89085
|
+
}, [videoPlayerRef.current, extractHLSSubtitleText]);
|
|
89086
|
+
return {
|
|
89087
|
+
extractHLSSubtitleText: extractHLSSubtitleText,
|
|
89088
|
+
setupHLSSubtitleTracking: setupHLSSubtitleTracking
|
|
89089
|
+
};
|
|
89090
|
+
};
|
|
89091
|
+
|
|
88987
89092
|
var VideoPlayer = function VideoPlayer(_a) {
|
|
89093
|
+
var _b, _c, _d;
|
|
88988
89094
|
var customStyles = _a.customStyles,
|
|
88989
|
-
|
|
88990
|
-
startTime =
|
|
89095
|
+
_e = _a.startTime,
|
|
89096
|
+
startTime = _e === void 0 ? 0 : _e,
|
|
88991
89097
|
loading = _a.loading,
|
|
88992
89098
|
setLoading = _a.setLoading,
|
|
88993
89099
|
handleTrackProgress = _a.handleTrackProgress,
|
|
@@ -88999,20 +89105,21 @@ var VideoPlayer = function VideoPlayer(_a) {
|
|
|
88999
89105
|
isPreviousVideo = _a.isPreviousVideo,
|
|
89000
89106
|
isPlaying = _a.isPlaying,
|
|
89001
89107
|
setIsPlaying = _a.setIsPlaying,
|
|
89002
|
-
|
|
89003
|
-
shouldPlayerBeFocusedOnSpaceClick =
|
|
89108
|
+
_f = _a.shouldPlayerBeFocusedOnSpaceClick,
|
|
89109
|
+
shouldPlayerBeFocusedOnSpaceClick = _f === void 0 ? false : _f,
|
|
89004
89110
|
showFavorite = _a.showFavorite,
|
|
89005
|
-
|
|
89006
|
-
isFavorite =
|
|
89007
|
-
|
|
89008
|
-
toggleFavorite =
|
|
89111
|
+
_g = _a.isFavorite,
|
|
89112
|
+
isFavorite = _g === void 0 ? false : _g,
|
|
89113
|
+
_h = _a.toggleFavorite,
|
|
89114
|
+
toggleFavorite = _h === void 0 ? function () {
|
|
89009
89115
|
return __awaiter(void 0, void 0, void 0, function () {
|
|
89010
89116
|
return __generator(this, function (_a) {
|
|
89011
89117
|
return [2 /*return*/];
|
|
89012
89118
|
});
|
|
89013
89119
|
});
|
|
89014
|
-
} :
|
|
89015
|
-
var
|
|
89120
|
+
} : _h;
|
|
89121
|
+
var videoRef = useRef(null);
|
|
89122
|
+
var _j = usePlayerControls({
|
|
89016
89123
|
startTime: startTime,
|
|
89017
89124
|
setLoading: setLoading,
|
|
89018
89125
|
handleTrackProgress: handleTrackProgress,
|
|
@@ -89022,38 +89129,55 @@ var VideoPlayer = function VideoPlayer(_a) {
|
|
|
89022
89129
|
setIsPlaying: setIsPlaying,
|
|
89023
89130
|
shouldPlayerBeFocusedOnSpaceClick: shouldPlayerBeFocusedOnSpaceClick
|
|
89024
89131
|
}),
|
|
89025
|
-
mouseMoveHandler =
|
|
89026
|
-
playerContainerRef =
|
|
89027
|
-
playPauseHandler =
|
|
89028
|
-
handleFullScreen =
|
|
89029
|
-
videoPlayerRef =
|
|
89030
|
-
playing =
|
|
89031
|
-
volume =
|
|
89032
|
-
muted =
|
|
89033
|
-
progressHandler =
|
|
89034
|
-
bufferStartHandler =
|
|
89035
|
-
bufferEndHandler =
|
|
89036
|
-
onPlayerStart =
|
|
89037
|
-
setVideoState =
|
|
89038
|
-
playbackRate =
|
|
89039
|
-
controlRef =
|
|
89040
|
-
rewindHandler =
|
|
89041
|
-
handleFastForward =
|
|
89042
|
-
formatCurrentTime =
|
|
89043
|
-
played =
|
|
89044
|
-
onSeekMouseDownHandler =
|
|
89045
|
-
seekHandler =
|
|
89046
|
-
seekMouseUpHandler =
|
|
89047
|
-
muteHandler =
|
|
89048
|
-
volumeChangeHandler =
|
|
89049
|
-
formatDuration =
|
|
89050
|
-
isSubtitlesChecked =
|
|
89051
|
-
toggleSubtitlesCheck =
|
|
89052
|
-
isFullscreen =
|
|
89053
|
-
isControlsActive =
|
|
89054
|
-
currentSubtitle =
|
|
89055
|
-
|
|
89056
|
-
var
|
|
89132
|
+
mouseMoveHandler = _j.mouseMoveHandler,
|
|
89133
|
+
playerContainerRef = _j.playerContainerRef,
|
|
89134
|
+
playPauseHandler = _j.playPauseHandler,
|
|
89135
|
+
handleFullScreen = _j.handleFullScreen,
|
|
89136
|
+
videoPlayerRef = _j.videoPlayerRef,
|
|
89137
|
+
playing = _j.playing,
|
|
89138
|
+
volume = _j.volume,
|
|
89139
|
+
muted = _j.muted,
|
|
89140
|
+
progressHandler = _j.progressHandler,
|
|
89141
|
+
bufferStartHandler = _j.bufferStartHandler,
|
|
89142
|
+
bufferEndHandler = _j.bufferEndHandler,
|
|
89143
|
+
onPlayerStart = _j.onPlayerStart,
|
|
89144
|
+
setVideoState = _j.setVideoState,
|
|
89145
|
+
playbackRate = _j.playbackRate,
|
|
89146
|
+
controlRef = _j.controlRef,
|
|
89147
|
+
rewindHandler = _j.rewindHandler,
|
|
89148
|
+
handleFastForward = _j.handleFastForward,
|
|
89149
|
+
formatCurrentTime = _j.formatCurrentTime,
|
|
89150
|
+
played = _j.played,
|
|
89151
|
+
onSeekMouseDownHandler = _j.onSeekMouseDownHandler,
|
|
89152
|
+
seekHandler = _j.seekHandler,
|
|
89153
|
+
seekMouseUpHandler = _j.seekMouseUpHandler,
|
|
89154
|
+
muteHandler = _j.muteHandler,
|
|
89155
|
+
volumeChangeHandler = _j.volumeChangeHandler,
|
|
89156
|
+
formatDuration = _j.formatDuration,
|
|
89157
|
+
isSubtitlesChecked = _j.isSubtitlesChecked,
|
|
89158
|
+
toggleSubtitlesCheck = _j.toggleSubtitlesCheck,
|
|
89159
|
+
isFullscreen = _j.isFullscreen,
|
|
89160
|
+
isControlsActive = _j.isControlsActive,
|
|
89161
|
+
currentSubtitle = _j.currentSubtitle,
|
|
89162
|
+
setCurrentSubtitle = _j.setCurrentSubtitle;
|
|
89163
|
+
var setupHLSSubtitleTracking = useHLSSubtitles({
|
|
89164
|
+
videoPlayerRef: videoPlayerRef,
|
|
89165
|
+
isSubtitlesChecked: isSubtitlesChecked,
|
|
89166
|
+
setCurrentSubtitle: setCurrentSubtitle
|
|
89167
|
+
}).setupHLSSubtitleTracking;
|
|
89168
|
+
useEffect(function () {
|
|
89169
|
+
var cleanup = injectHLSSubtitleStyles();
|
|
89170
|
+
return cleanup;
|
|
89171
|
+
}, []);
|
|
89172
|
+
var handlePlayerReady = function handlePlayerReady() {
|
|
89173
|
+
var _a;
|
|
89174
|
+
onPlayerStart();
|
|
89175
|
+
setupHLSSubtitleTracking();
|
|
89176
|
+
var videoElement = (_a = videoPlayerRef.current) === null || _a === void 0 ? void 0 : _a.getInternalPlayer();
|
|
89177
|
+
if (videoElement && videoElement instanceof HTMLVideoElement) {
|
|
89178
|
+
videoRef.current = videoElement;
|
|
89179
|
+
}
|
|
89180
|
+
};
|
|
89057
89181
|
return jsxRuntimeExports.jsxs(StyledWrapper, {
|
|
89058
89182
|
tabIndex: 0,
|
|
89059
89183
|
onMouseMove: mouseMoveHandler,
|
|
@@ -89062,12 +89186,11 @@ var VideoPlayer = function VideoPlayer(_a) {
|
|
|
89062
89186
|
onClick: function onClick(e) {
|
|
89063
89187
|
return e.stopPropagation();
|
|
89064
89188
|
},
|
|
89065
|
-
|
|
89066
|
-
children: [jsxRuntimeExports.jsx(StyledVideoPlayerWrapper, {
|
|
89189
|
+
children: [jsxRuntimeExports.jsxs(StyledVideoPlayerWrapper, {
|
|
89067
89190
|
onClick: playPauseHandler,
|
|
89068
89191
|
onDoubleClick: handleFullScreen,
|
|
89069
|
-
children: jsxRuntimeExports.jsx(ReactPlayer, {
|
|
89070
|
-
url:
|
|
89192
|
+
children: [jsxRuntimeExports.jsx(ReactPlayer, {
|
|
89193
|
+
url: url,
|
|
89071
89194
|
ref: videoPlayerRef,
|
|
89072
89195
|
className: 'react-player',
|
|
89073
89196
|
width: '100%',
|
|
@@ -89078,7 +89201,7 @@ var VideoPlayer = function VideoPlayer(_a) {
|
|
|
89078
89201
|
onProgress: progressHandler,
|
|
89079
89202
|
onBuffer: bufferStartHandler,
|
|
89080
89203
|
onBufferEnd: bufferEndHandler,
|
|
89081
|
-
onReady:
|
|
89204
|
+
onReady: handlePlayerReady,
|
|
89082
89205
|
onPlay: function onPlay() {
|
|
89083
89206
|
return setIsPlaying(true);
|
|
89084
89207
|
},
|
|
@@ -89106,13 +89229,16 @@ var VideoPlayer = function VideoPlayer(_a) {
|
|
|
89106
89229
|
file: {
|
|
89107
89230
|
hlsOptions: {
|
|
89108
89231
|
autoStartLoad: true,
|
|
89109
|
-
renderTextTracksNatively:
|
|
89232
|
+
renderTextTracksNatively: true
|
|
89110
89233
|
}
|
|
89111
89234
|
}
|
|
89112
89235
|
}
|
|
89113
|
-
},
|
|
89114
|
-
|
|
89115
|
-
|
|
89236
|
+
}, url), loading && jsxRuntimeExports.jsx(StyledPlayerLoader, {
|
|
89237
|
+
children: jsxRuntimeExports.jsx(StyledLoader, {})
|
|
89238
|
+
}), isSubtitlesChecked && currentSubtitle && jsxRuntimeExports.jsx(StyledSubtitles, {
|
|
89239
|
+
"$controls": isControlsActive,
|
|
89240
|
+
children: currentSubtitle
|
|
89241
|
+
})]
|
|
89116
89242
|
}), jsxRuntimeExports.jsx(StyledControlsContainer, {
|
|
89117
89243
|
ref: controlRef,
|
|
89118
89244
|
children: jsxRuntimeExports.jsx(Controls, {
|
|
@@ -89138,16 +89264,13 @@ var VideoPlayer = function VideoPlayer(_a) {
|
|
|
89138
89264
|
isFavorite: isFavorite,
|
|
89139
89265
|
toggleIsFavorite: toggleFavorite,
|
|
89140
89266
|
isFullscreen: isFullscreen,
|
|
89141
|
-
subtitle: !!subtitleUrl,
|
|
89267
|
+
subtitle: !!subtitleUrl || ((_d = (_c = (_b = videoPlayerRef.current) === null || _b === void 0 ? void 0 : _b.getInternalPlayer()) === null || _c === void 0 ? void 0 : _c.textTracks) === null || _d === void 0 ? void 0 : _d.length) > 0,
|
|
89142
89268
|
handleSkipBackward: handlePreviousVideo,
|
|
89143
89269
|
handleSkipForward: handleNextVideo,
|
|
89144
89270
|
isNextVideo: isNextVideo,
|
|
89145
89271
|
isPreviousVideo: isPreviousVideo,
|
|
89146
89272
|
showFavorite: showFavorite
|
|
89147
89273
|
})
|
|
89148
|
-
}), isSubtitlesChecked && currentSubtitle && jsxRuntimeExports.jsx(StyledSubtitles, {
|
|
89149
|
-
"$controls": isControlsActive,
|
|
89150
|
-
children: currentSubtitle
|
|
89151
89274
|
})]
|
|
89152
89275
|
});
|
|
89153
89276
|
};
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
export { A as AudioPlayer, k as Badge, h as Breadcrumb, B as Button, e as Checkbox, j as ColorPicker, o as ColumnNavigation, C as CourseCard, c as CustomSwitcher, m as CustomTooltip, d as DatePicker, u as DrawerTips, D as DropDown, G as GridActionMenu, L as Loader, N as NavigationBar, f as Pagination, P as PhoneCountryCode, R as RadioButton, v as RangeSlider, S as SearchInput, n as SplashScreen, p as StatusIndicator, s as TabNavigation, q as TabPanel, b as ThemeProvider, i as Tile, l as TooltipHeight, T as TranslationProvider, U as Uploader, V as VideoPlayer, t as activeTabClassName } from './index-
|
|
1
|
+
export { A as AudioPlayer, k as Badge, h as Breadcrumb, B as Button, e as Checkbox, j as ColorPicker, o as ColumnNavigation, C as CourseCard, c as CustomSwitcher, m as CustomTooltip, d as DatePicker, u as DrawerTips, D as DropDown, G as GridActionMenu, L as Loader, N as NavigationBar, f as Pagination, P as PhoneCountryCode, R as RadioButton, v as RangeSlider, S as SearchInput, n as SplashScreen, p as StatusIndicator, s as TabNavigation, q as TabPanel, b as ThemeProvider, i as Tile, l as TooltipHeight, T as TranslationProvider, U as Uploader, V as VideoPlayer, t as activeTabClassName } from './index-CyUx723z.esm.js';
|
|
2
2
|
import 'react';
|
|
3
3
|
import 'react-dom';
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { StylesConfig } from 'react-select';
|
|
2
2
|
import { FormikTouched } from 'formik';
|
|
3
|
+
import { ReactNode } from 'react';
|
|
3
4
|
export interface IAsyncSelectOption {
|
|
4
5
|
value: string;
|
|
5
6
|
label: string;
|
|
@@ -52,6 +53,9 @@ export interface ISelectFieldProps {
|
|
|
52
53
|
isClearable?: boolean;
|
|
53
54
|
onFocus?: () => void;
|
|
54
55
|
isDisabled?: boolean;
|
|
56
|
+
noOptionsMessage?: ((obj: {
|
|
57
|
+
inputValue: string;
|
|
58
|
+
}) => ReactNode) | undefined;
|
|
55
59
|
isLoading?: boolean;
|
|
56
60
|
label?: string;
|
|
57
61
|
error?: boolean;
|
|
@@ -1,3 +1,4 @@
|
|
|
1
1
|
import { ReactElement } from 'react';
|
|
2
2
|
import { PlayerProps } from './Player.interface';
|
|
3
3
|
export declare const VideoPlayer: ({ customStyles, startTime, loading, setLoading, handleTrackProgress, url, subtitle: subtitleUrl, handleNextVideo, handlePreviousVideo, isNextVideo, isPreviousVideo, isPlaying, setIsPlaying, shouldPlayerBeFocusedOnSpaceClick, showFavorite, isFavorite, toggleFavorite, }: PlayerProps) => ReactElement;
|
|
4
|
+
export default VideoPlayer;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, { RefObject } from 'react';
|
|
1
|
+
import React, { Dispatch, RefObject, SetStateAction } from 'react';
|
|
2
2
|
import ReactPlayer from 'react-player';
|
|
3
3
|
import { ControlsProps } from './Controls/Controls.interface';
|
|
4
4
|
export interface VideoState {
|
|
@@ -59,5 +59,6 @@ export interface UsePlayerControlsState extends Omit<ControlsProps, 'isFavorite'
|
|
|
59
59
|
isFullscreen: boolean;
|
|
60
60
|
isControlsActive: boolean;
|
|
61
61
|
currentSubtitle: string;
|
|
62
|
+
setCurrentSubtitle: Dispatch<SetStateAction<string>>;
|
|
62
63
|
}
|
|
63
64
|
export {};
|
|
@@ -6,3 +6,5 @@ export declare const StyledControlsContainer: import("styled-components/dist/typ
|
|
|
6
6
|
export declare const StyledSubtitles: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
|
|
7
7
|
$controls: boolean;
|
|
8
8
|
}>> & string;
|
|
9
|
+
export declare const HLS_SUBTITLE_STYLES = "\n /* Hide native HLS subtitles completely - comprehensive approach */\n video::cue {\n display: none !important;\n visibility: hidden !important;\n opacity: 0 !important;\n }\n \n video::-webkit-media-text-track-display {\n display: none !important;\n visibility: hidden !important;\n opacity: 0 !important;\n }\n \n video::cue-region {\n display: none !important;\n visibility: hidden !important;\n opacity: 0 !important;\n }\n \n video::-webkit-media-text-track-container {\n display: none !important;\n visibility: hidden !important;\n opacity: 0 !important;\n }\n \n /* Target ReactPlayer specifically */\n .react-player video::cue {\n display: none !important;\n visibility: hidden !important;\n opacity: 0 !important;\n }\n \n .react-player video::-webkit-media-text-track-display {\n display: none !important;\n visibility: hidden !important;\n opacity: 0 !important;\n }\n \n .react-player video::cue-region {\n display: none !important;\n visibility: hidden !important;\n opacity: 0 !important;\n }\n \n .react-player video::-webkit-media-text-track-container {\n display: none !important;\n visibility: hidden !important;\n opacity: 0 !important;\n }\n \n /* Additional selectors for different browsers */\n video::-moz-media-text-track-display {\n display: none !important;\n visibility: hidden !important;\n opacity: 0 !important;\n }\n \n video::-ms-media-text-track-display {\n display: none !important;\n visibility: hidden !important;\n opacity: 0 !important;\n }\n \n /* Hide any subtitle overlays */\n .react-player video + div[style*=\"position: absolute\"] {\n display: none !important;\n }\n \n /* Target HLS video player specifically */\n .hls-video-player::cue {\n display: none !important;\n visibility: hidden !important;\n opacity: 0 !important;\n }\n \n .hls-video-player::-webkit-media-text-track-display {\n display: none !important;\n visibility: hidden !important;\n opacity: 0 !important;\n }\n \n .hls-video-player::-webkit-media-text-track-container {\n display: none !important;\n visibility: hidden !important;\n opacity: 0 !important;\n }\n \n .hls-video-player::cue-region {\n display: none !important;\n visibility: hidden !important;\n opacity: 0 !important;\n }\n";
|
|
10
|
+
export declare const injectHLSSubtitleStyles: () => (() => void);
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import ReactPlayer from 'react-player';
|
|
2
|
+
interface UseHLSSubtitlesProps {
|
|
3
|
+
videoPlayerRef: React.RefObject<ReactPlayer | null>;
|
|
4
|
+
isSubtitlesChecked: boolean;
|
|
5
|
+
setCurrentSubtitle: (subtitle: string) => void;
|
|
6
|
+
}
|
|
7
|
+
interface UseHLSSubtitlesReturn {
|
|
8
|
+
extractHLSSubtitleText: () => void;
|
|
9
|
+
setupHLSSubtitleTracking: () => void;
|
|
10
|
+
}
|
|
11
|
+
export declare const useHLSSubtitles: ({ videoPlayerRef, isSubtitlesChecked, setCurrentSubtitle, }: UseHLSSubtitlesProps) => UseHLSSubtitlesReturn;
|
|
12
|
+
export {};
|