@gcorevideo/player 2.25.4 → 2.25.6
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/assets/audio-tracks/style.scss +1 -14
- package/assets/bottom-gear/gear.scss +40 -38
- package/assets/media-control/media-control.scss +260 -305
- package/assets/media-control/width270.scss +3 -2
- package/assets/media-control/width370.scss +8 -6
- package/assets/multi-camera/style.scss +9 -19
- package/assets/picture-in-picture/style.scss +14 -0
- package/assets/subtitles/style.scss +108 -68
- package/dist/core.js +1 -1
- package/dist/index.css +535 -572
- package/dist/index.embed.js +53 -51
- package/dist/index.js +124 -122
- package/lib/plugins/clips/Clips.d.ts.map +1 -1
- package/lib/plugins/clips/Clips.js +2 -4
- package/lib/plugins/picture-in-picture/PictureInPicture.d.ts +1 -1
- package/lib/plugins/picture-in-picture/PictureInPicture.d.ts.map +1 -1
- package/lib/plugins/picture-in-picture/PictureInPicture.js +1 -1
- package/lib/plugins/seek-time/SeekTime.d.ts.map +1 -1
- package/lib/plugins/seek-time/SeekTime.js +7 -2
- package/package.json +1 -1
- package/src/plugins/clips/Clips.ts +3 -5
- package/src/plugins/picture-in-picture/PictureInPicture.ts +1 -1
- package/src/plugins/seek-time/SeekTime.ts +7 -2
- package/tsconfig.tsbuildinfo +1 -1
- package/assets/picture-in-picture/button.scss +0 -12
package/dist/index.embed.js
CHANGED
|
@@ -12524,7 +12524,7 @@ var PlaybackEvents;
|
|
|
12524
12524
|
// https://github.com/clappr/clappr/blob/8752995ea439321ac7ca3cd35e8c64de7a3c3d17/LICENSE
|
|
12525
12525
|
const AUTO$1 = -1;
|
|
12526
12526
|
const { now: now$2 } = Utils;
|
|
12527
|
-
const T$
|
|
12527
|
+
const T$e = 'playback.dash';
|
|
12528
12528
|
class DashPlayback extends BasePlayback {
|
|
12529
12529
|
_levels = null;
|
|
12530
12530
|
_currentLevel = null;
|
|
@@ -12873,7 +12873,7 @@ class DashPlayback extends BasePlayback {
|
|
|
12873
12873
|
if (!this._dash) {
|
|
12874
12874
|
return false;
|
|
12875
12875
|
}
|
|
12876
|
-
trace(`${T$
|
|
12876
|
+
trace(`${T$e} get.dvrEnabled`, {
|
|
12877
12877
|
dvrWindowSize: this._dash?.getDVRWindowSize(),
|
|
12878
12878
|
minDvrSize: this._minDvrSize,
|
|
12879
12879
|
playbackType: this.getPlaybackType(),
|
|
@@ -12895,7 +12895,7 @@ class DashPlayback extends BasePlayback {
|
|
|
12895
12895
|
this.trigger(Events$1.PLAYBACK_PROGRESS, progress, {});
|
|
12896
12896
|
}
|
|
12897
12897
|
play() {
|
|
12898
|
-
trace(`${T$
|
|
12898
|
+
trace(`${T$e} play`, { dash: !!this._dash });
|
|
12899
12899
|
!this._dash && this._setup();
|
|
12900
12900
|
super.play();
|
|
12901
12901
|
this._startTimeUpdateTimer();
|
|
@@ -41688,7 +41688,7 @@ const AUTO = -1;
|
|
|
41688
41688
|
const DEFAULT_RECOVER_ATTEMPTS = 16;
|
|
41689
41689
|
Events$1.register('PLAYBACK_FRAGMENT_CHANGED');
|
|
41690
41690
|
Events$1.register('PLAYBACK_FRAGMENT_PARSING_METADATA');
|
|
41691
|
-
const T$
|
|
41691
|
+
const T$d = 'playback.hls';
|
|
41692
41692
|
class HlsPlayback extends BasePlayback {
|
|
41693
41693
|
_ccIsSetup = false;
|
|
41694
41694
|
_ccTracksUpdated = false;
|
|
@@ -42012,7 +42012,7 @@ class HlsPlayback extends BasePlayback {
|
|
|
42012
42012
|
}
|
|
42013
42013
|
else {
|
|
42014
42014
|
Log.error('hlsjs: failed to recover', { evt, data });
|
|
42015
|
-
trace(`${T$
|
|
42015
|
+
trace(`${T$d} _recover failed to recover`, {
|
|
42016
42016
|
type: data.type,
|
|
42017
42017
|
details: data.details,
|
|
42018
42018
|
});
|
|
@@ -42098,7 +42098,7 @@ class HlsPlayback extends BasePlayback {
|
|
|
42098
42098
|
this.trigger(Events$1.PLAYBACK_SETTINGSUPDATE);
|
|
42099
42099
|
}
|
|
42100
42100
|
_onHLSJSError(evt, data) {
|
|
42101
|
-
trace(`${T$
|
|
42101
|
+
trace(`${T$d} _onHLSJSError`, {
|
|
42102
42102
|
fatal: data.fatal,
|
|
42103
42103
|
type: data.type,
|
|
42104
42104
|
details: data.details,
|
|
@@ -42146,7 +42146,7 @@ class HlsPlayback extends BasePlayback {
|
|
|
42146
42146
|
evt,
|
|
42147
42147
|
data,
|
|
42148
42148
|
});
|
|
42149
|
-
trace(`${T$
|
|
42149
|
+
trace(`${T$d} _onHLSJSError trying to recover from network error`, {
|
|
42150
42150
|
details: data.details,
|
|
42151
42151
|
});
|
|
42152
42152
|
error.level = PlayerError.Levels.WARN;
|
|
@@ -42159,7 +42159,7 @@ class HlsPlayback extends BasePlayback {
|
|
|
42159
42159
|
evt,
|
|
42160
42160
|
data,
|
|
42161
42161
|
});
|
|
42162
|
-
trace(`${T$
|
|
42162
|
+
trace(`${T$d} _onHLSJSError trying to recover from media error`, {
|
|
42163
42163
|
details: data.details,
|
|
42164
42164
|
});
|
|
42165
42165
|
error.level = PlayerError.Levels.WARN;
|
|
@@ -42189,7 +42189,7 @@ class HlsPlayback extends BasePlayback {
|
|
|
42189
42189
|
return;
|
|
42190
42190
|
}
|
|
42191
42191
|
Log.warn('hlsjs: non-fatal error occurred', { evt, data });
|
|
42192
|
-
trace(`${T$
|
|
42192
|
+
trace(`${T$d} _onHLSJSError non-fatal error occurred`, {
|
|
42193
42193
|
type: data.type,
|
|
42194
42194
|
details: data.details,
|
|
42195
42195
|
});
|
|
@@ -42546,7 +42546,7 @@ function toClapprTrack(t) {
|
|
|
42546
42546
|
};
|
|
42547
42547
|
}
|
|
42548
42548
|
|
|
42549
|
-
const T$
|
|
42549
|
+
const T$c = 'playback.html5_video';
|
|
42550
42550
|
const STALL_TIMEOUT = 15000;
|
|
42551
42551
|
class HTML5Video extends BasePlayback {
|
|
42552
42552
|
stallTimerId = null;
|
|
@@ -42554,7 +42554,7 @@ class HTML5Video extends BasePlayback {
|
|
|
42554
42554
|
* @internal
|
|
42555
42555
|
*/
|
|
42556
42556
|
createError(errorData, options) {
|
|
42557
|
-
trace(`${T$
|
|
42557
|
+
trace(`${T$c} createError`, {
|
|
42558
42558
|
errorData: { ...errorData },
|
|
42559
42559
|
});
|
|
42560
42560
|
const i18n = this.i18n ||
|
|
@@ -42580,12 +42580,12 @@ class HTML5Video extends BasePlayback {
|
|
|
42580
42580
|
super._onEnded();
|
|
42581
42581
|
}
|
|
42582
42582
|
_handleBufferingEvents() {
|
|
42583
|
-
trace(`${T$
|
|
42583
|
+
trace(`${T$c} _handleBufferingEvents`, {
|
|
42584
42584
|
networkState: this.el.networkState,
|
|
42585
42585
|
});
|
|
42586
42586
|
if (!this.stallTimerId) {
|
|
42587
42587
|
this.stallTimerId = setTimeout(() => {
|
|
42588
|
-
trace(`${T$
|
|
42588
|
+
trace(`${T$c} _handleBufferingEvents stall timeout`, {
|
|
42589
42589
|
buffering: this.buffering,
|
|
42590
42590
|
ended: this.ended,
|
|
42591
42591
|
});
|
|
@@ -42671,7 +42671,7 @@ function registerPlaybacks() {
|
|
|
42671
42671
|
Loader.registerPlayback(DashPlayback);
|
|
42672
42672
|
}
|
|
42673
42673
|
|
|
42674
|
-
const T$
|
|
42674
|
+
const T$b = 'gplayer';
|
|
42675
42675
|
const DEFAULT_OPTIONS = {
|
|
42676
42676
|
autoPlay: false,
|
|
42677
42677
|
debug: 'none',
|
|
@@ -42759,7 +42759,7 @@ class Player {
|
|
|
42759
42759
|
* ```
|
|
42760
42760
|
*/
|
|
42761
42761
|
attachTo(playerElement) {
|
|
42762
|
-
trace(`${T$
|
|
42762
|
+
trace(`${T$b} attachTo`, {
|
|
42763
42763
|
player: !!this.player,
|
|
42764
42764
|
});
|
|
42765
42765
|
assert.ok(!this.player, 'Player already initialized');
|
|
@@ -42769,7 +42769,7 @@ class Player {
|
|
|
42769
42769
|
}
|
|
42770
42770
|
const coreOpts = this.buildCoreOptions(playerElement);
|
|
42771
42771
|
const { core, container } = Player.getRegisteredPlugins();
|
|
42772
|
-
trace(`${T$
|
|
42772
|
+
trace(`${T$b} init`, {
|
|
42773
42773
|
registeredPlaybacks: Loader.registeredPlaybacks.map((p) => p.prototype.name),
|
|
42774
42774
|
});
|
|
42775
42775
|
coreOpts.plugins = {
|
|
@@ -42783,7 +42783,7 @@ class Player {
|
|
|
42783
42783
|
* Destroys the player, releasing all resources and unmounting its UI from the DOM.
|
|
42784
42784
|
*/
|
|
42785
42785
|
destroy() {
|
|
42786
|
-
trace(`${T$
|
|
42786
|
+
trace(`${T$b} destroy`, {
|
|
42787
42787
|
player: !!this.player,
|
|
42788
42788
|
});
|
|
42789
42789
|
if (this.player) {
|
|
@@ -42970,7 +42970,7 @@ class Player {
|
|
|
42970
42970
|
this.config = $.extend(true, this.config, config);
|
|
42971
42971
|
}
|
|
42972
42972
|
initPlayer(coreOptions) {
|
|
42973
|
-
trace(`${T$
|
|
42973
|
+
trace(`${T$b} initPlayer`, {
|
|
42974
42974
|
autoPlay: coreOptions.autoPlay,
|
|
42975
42975
|
sources: coreOptions.sources,
|
|
42976
42976
|
player: !!this.player,
|
|
@@ -43010,7 +43010,7 @@ class Player {
|
|
|
43010
43010
|
// TODO test
|
|
43011
43011
|
events = {
|
|
43012
43012
|
onReady: () => {
|
|
43013
|
-
trace(`${T$
|
|
43013
|
+
trace(`${T$b} onReady`, {
|
|
43014
43014
|
ready: this.ready,
|
|
43015
43015
|
});
|
|
43016
43016
|
if (this.ready) {
|
|
@@ -43100,7 +43100,7 @@ class Player {
|
|
|
43100
43100
|
assert.ok(this.player, 'Player is not initialized');
|
|
43101
43101
|
const core = this.player.core;
|
|
43102
43102
|
core.on(Events$1.CORE_SCREEN_ORIENTATION_CHANGED, ({ orientation }) => {
|
|
43103
|
-
trace(`${T$
|
|
43103
|
+
trace(`${T$b} on CORE_SCREEN_ORIENTATION_CHANGED`, {
|
|
43104
43104
|
rootNode: {
|
|
43105
43105
|
width: this.rootNode?.clientWidth,
|
|
43106
43106
|
height: this.rootNode?.clientHeight,
|
|
@@ -43136,7 +43136,7 @@ insertStyle("@import \"https://fonts.googleapis.com/css?family=Roboto\";\n:root
|
|
|
43136
43136
|
|
|
43137
43137
|
const pluginHtml$4 = "<button data-audiotracks-button class='gcore-skin-button-color' id=\"audiotracks-button\" aria-haspopup=\"menu\" aria-expanded=\"false\">\n <span class='audio-text'><%= title %></span> <span class=\"audio-arrow\"><%= icon %></span>\n</button>\n<ul class='gcore-skin-bg-color menu hidden' id=\"audiotracks-select\" role=\"menu\">\n <% for (const track of tracks) { %>\n <li>\n <a href=\"#\" class='gcore-skin-text-color' data-audiotracks-select=\"<%= track.id %>\" role=\"menuitemradio\" aria-checked=\"<%= track.id === current %>\">\n <%= track.label %>\n </a>\n </li>\n <% }; %>\n</ul>\n";
|
|
43138
43138
|
|
|
43139
|
-
insertStyle("*,\n:focus,\n:visited {\n outline: none !important;\n}\n\n.media-control-audiotracks {\n position: relative;\n}\n.media-control-audiotracks button {\n background-color: transparent;\n color: #fff;\n -webkit-font-smoothing: antialiased;\n border: none;\n cursor: pointer;\n display: flex;\n align-items: center;\n padding: 0;\n}\n.media-control-audiotracks button .audio-text {\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n max-width: 100px;\n background-color: transparent;\n -webkit-font-smoothing: antialiased;\n border: none;\n cursor: pointer;\n}\n.media-control-audiotracks button:hover {\n color: white;\n}\n.media-control-audiotracks button.changing {\n animation: pulse 0.5s infinite alternate;\n}\n.media-control-audiotracks button span.audio-arrow {\n width: 9px;\n height: 6px;\n margin-left: 5px;\n}\n.media-control-audiotracks .menu {\n max-width: 114px;\n list-style-type: none;\n position: absolute;\n background-color: rgba(74, 74, 74, 0.6);\n border: none;\n min-width: 60px;\n border-radius: 4px;\n bottom: 40px;\n right: -2px;\n}\n.media-control-audiotracks .menu.hidden {\n display: none;\n}\n.media-control-audiotracks li {\n font-size: var(--font-size-media-controls-dropdown);\n text-align: right;\n height: 30px;\n}\n.media-control-audiotracks li[data-title] {\n background-color: #c3c2c2;\n padding: 5px;\n}\n.media-control-audiotracks li a {\n display: block;\n text-decoration: none;\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n height: 30px;\n padding: 5px 10px;\n color: #fffffe;\n}\n.media-control-audiotracks li a:hover {\n text-decoration: none;\n background-color: rgba(0, 0, 0, 0.4);\n color: white;\n}\n.media-control-audiotracks li.current a {\n color: #f00;\n}\n.media-control-audiotracks li:first-child a {\n border-bottom-left-radius: 4px;\n border-bottom-right-radius: 4px;\n}\n.media-control-audiotracks li:last-child a {\n border-top-left-radius: 4px;\n border-top-right-radius: 4px;\n}
|
|
43139
|
+
insertStyle("*,\n:focus,\n:visited {\n outline: none !important;\n}\n\n.media-control-audiotracks {\n position: relative;\n}\n.media-control-audiotracks button {\n background-color: transparent;\n color: #fff;\n -webkit-font-smoothing: antialiased;\n border: none;\n cursor: pointer;\n display: flex;\n align-items: center;\n padding: 0;\n}\n.media-control-audiotracks button .audio-text {\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n max-width: 100px;\n background-color: transparent;\n -webkit-font-smoothing: antialiased;\n border: none;\n cursor: pointer;\n}\n.media-control-audiotracks button:hover {\n color: white;\n}\n.media-control-audiotracks button.changing {\n animation: pulse 0.5s infinite alternate;\n}\n.media-control-audiotracks button span.audio-arrow {\n width: 9px;\n height: 6px;\n margin-left: 5px;\n}\n.media-control-audiotracks .menu {\n max-width: 114px;\n list-style-type: none;\n position: absolute;\n background-color: rgba(74, 74, 74, 0.6);\n border: none;\n min-width: 60px;\n border-radius: 4px;\n bottom: 40px;\n right: -2px;\n}\n.media-control-audiotracks .menu.hidden {\n display: none;\n}\n.media-control-audiotracks li {\n font-size: var(--font-size-media-controls-dropdown);\n text-align: right;\n height: 30px;\n}\n.media-control-audiotracks li[data-title] {\n background-color: #c3c2c2;\n padding: 5px;\n}\n.media-control-audiotracks li a {\n display: block;\n text-decoration: none;\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n height: 30px;\n padding: 5px 10px;\n color: #fffffe;\n}\n.media-control-audiotracks li a:hover {\n text-decoration: none;\n background-color: rgba(0, 0, 0, 0.4);\n color: white;\n}\n.media-control-audiotracks li.current a {\n color: #f00;\n}\n.media-control-audiotracks li:first-child a {\n border-bottom-left-radius: 4px;\n border-bottom-right-radius: 4px;\n}\n.media-control-audiotracks li:last-child a {\n border-top-left-radius: 4px;\n border-top-right-radius: 4px;\n}");
|
|
43140
43140
|
|
|
43141
43141
|
const audioArrow = "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<svg width=\"9px\" height=\"6px\" viewBox=\"0 0 9 6\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n <!-- Generator: Sketch 49 (51002) - http://www.bohemiancoding.com/sketch -->\n <title>quality-arrow</title>\n <desc>Created with Sketch.</desc>\n <defs></defs>\n <g id=\"quality-arrow\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <path\n d=\"M5.07079194,5.78553848 C4.91457318,5.94277844 4.70551573,6.00941824 4.50028717,5.99893557 C4.2950586,6.00941824 4.08676693,5.94277844 3.92978239,5.78553848 L0.221118462,1.2997069 C-0.0737061539,1.00469478 -0.0737061539,0.526236029 0.221118462,0.231972666 C0.515177299,-0.0630394586 1.23500883,0.00734414472 1.64852907,0.00734414472 L7.77475484,0.00734414472 C8.21201421,0.00734414472 8.48539703,-0.0630394586 8.77945587,0.231972666 C9.07351471,0.526236029 9.07351471,1.00469478 8.77945587,1.2997069 L5.07079194,5.78553848 Z\"\n fill=\"#FFFFFE\"></path>\n </g>\n</svg>\n";
|
|
43142
43142
|
|
|
@@ -43398,7 +43398,7 @@ const FullscreenIOS = {
|
|
|
43398
43398
|
},
|
|
43399
43399
|
};
|
|
43400
43400
|
|
|
43401
|
-
insertStyle("[data-player] {\n --bottom-panel: 40px;\n}\n\n.container .media-control-notransition {\n transition: none !important;\n}\n.container .player-poster .play-wrapper {\n opacity: 1;\n}\n.container.crop-video [data-html5-video] {\n object-fit: cover;\n}\n.container .cc-line {\n position: absolute;\n bottom: calc(var(--bottom-panel) + 5px);\n width: 100%;\n}\n.container .cc-line p {\n width: auto;\n background-color: rgba(0, 0, 0, 0.4);\n color: white;\n display: inline-block;\n}\n.container .player-poster .circle-poster {\n top: 50%;\n margin-top: -60px;\n left: 50%;\n margin-left: -60px;\n position: absolute;\n width: 120px;\n height: 120px;\n border: 2px solid white;\n border-radius: 50%;\n filter: \"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)\";\n filter: alpha(opacity=60);\n opacity: 1;\n box-shadow: 0 0 1px 0 white;\n}\n.container .player-poster .circle-poster svg {\n margin-left: 5px;\n width: 80px;\n}\n.container .spinner-three-bounce[data-spinner] > div {\n background-color: #ff5700;\n}\n\n.media-control-skin-1[data-media-control-skin-1].w270 .media-control-quality,\n.media-control-skin-1[data-media-control-skin-1].w270 .media-control-audiotracks {\n display: none;\n}\n.media-control-skin-1[data-media-control-skin-1].w270 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] {\n transform: rotate(270deg);\n float: none;\n display: block;\n position: absolute;\n /* bottom: 12px; */\n margin: 0;\n top: -40px;\n padding: 0;\n /* right: 20px; */\n margin-left: -32px;\n margin-top: -3px;\n width: 80px;\n /* padding-left: 12px; */\n}\n.media-control-skin-1[data-media-control-skin-1].w270 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-background-mask {\n position: absolute;\n width: 100%;\n height: 100%;\n left: -5px;\n}\n.media-control-skin-1[data-media-control-skin-1].w270 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume].volume-bar-hide {\n display: none;\n}\n.media-control-skin-1[data-media-control-skin-1].w270 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-background {\n margin-left: 11px;\n top: 7px;\n width: 80px;\n}\n.media-control-skin-1[data-media-control-skin-1].w270 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-scrubber {\n margin-left: 11px;\n top: 1px;\n}\n\n.media-control-skin-1[data-media-control-skin-1].w370 .media-control-cc {\n width: 28px;\n}\n.media-control-skin-1[data-media-control-skin-1].w370 .media-control-cc svg {\n height: 17px;\n}\n.media-control-skin-1[data-media-control-skin-1].w370 .share_plugin[data-share] .share-container {\n top: calc(50% - 150px);\n left: calc(50% - 125px);\n width: 250px;\n height: calc(100% - 32px);\n max-height: 300px;\n transform: none;\n}\n.media-control-skin-1[data-media-control-skin-1].w370 .share_plugin[data-share] .share-container .share-container-header {\n border: none;\n}\n.media-control-skin-1[data-media-control-skin-1].w370 .share_plugin[data-share] .share-container .share-container-header .share-container-header--title {\n visibility: hidden;\n}\n.media-control-skin-1[data-media-control-skin-1].w370 .media-control-quality,\n.media-control-skin-1[data-media-control-skin-1].w370 .media-control-audiotracks {\n display: block;\n}\n.media-control-skin-1[data-media-control-skin-1].w370 .media-control-audiotracks[data-audiotracks] {\n margin-top: 3px;\n margin-right: 10px;\n}\n.media-control-skin-1[data-media-control-skin-1].w370 .media-control-audiotracks[data-audiotracks] ul {\n bottom: 30px;\n width: 50px;\n}\n.media-control-skin-1[data-media-control-skin-1].w370 .media-control-audiotracks[data-audiotracks] ul li {\n height: 23px;\n font-size: 14px;\n}\n.media-control-skin-1[data-media-control-skin-1].w370 .media-control-audiotracks[data-audiotracks] ul li a {\n height: 23px;\n padding: 2px 5px;\n}\n.media-control-skin-1[data-media-control-skin-1].w370 .media-control-audiotracks[data-audiotracks] button[data-audiotracks-button] .quality-text,\n.media-control-skin-1[data-media-control-skin-1].w370 .media-control-audiotracks[data-audiotracks] button[data-audiotracks-button] .audio-text {\n font-size: 13px;\n}\n.media-control-skin-1[data-media-control-skin-1].w370 .media-control-audiotracks[data-audiotracks] button[data-audiotracks-button] span.quality-arrow,\n.media-control-skin-1[data-media-control-skin-1].w370 .media-control-audiotracks[data-audiotracks] button[data-audiotracks-button] span.audio-arrow {\n width: 7px;\n height: 5px;\n margin-left: 4px;\n margin-top: 11px;\n}\n.media-control-skin-1[data-media-control-skin-1].w370 .media-control-multicamera .multicamera {\n margin-top: 0;\n margin-right: 10px;\n}\n.media-control-skin-1[data-media-control-skin-1].w370 .media-control-multicamera .multicamera button {\n height: 32px;\n}\n.media-control-skin-1[data-media-control-skin-1].w370 .media-control-multicamera .multicamera button svg {\n height: 17px;\n margin: 0;\n}\n.media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] {\n padding-left: 10px;\n padding-right: 12px;\n}\n.media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .media-control-indicator {\n line-height: 32px;\n}\n.media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .media-control-indicator[data-position], .media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .media-control-indicator[data-duration] {\n font-size: 11px;\n line-height: 32px;\n}\n.media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .dvr-controls {\n height: 32px;\n}\n.media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .dvr-controls .live-button {\n margin-left: 10px;\n height: 32px;\n font-size: 12px;\n line-height: 32px;\n text-shadow: none;\n letter-spacing: 0.6px;\n}\n.media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .dvr-controls .live-button::before {\n width: 8px;\n height: 8px;\n margin-right: 4px;\n}\n.media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .dvr-controls .live-info {\n margin-left: 10px;\n height: 32px;\n font-size: 12px;\n line-height: 32px;\n text-shadow: none;\n letter-spacing: 0.6px;\n}\n.media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .dvr-controls .live-info::before {\n width: 8px;\n height: 8px;\n margin-right: 4px;\n}\n.media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] button.media-control-button {\n height: 32px;\n}\n.media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] button.media-control-button[data-fullscreen] {\n height: 33px;\n}\n.media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] button.media-control-button svg {\n height: 17px;\n}\n.media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .gplayer-mc-clips .gplayer-mc-clips-text {\n line-height: 33px;\n font-size: 11px;\n}\n.media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .gplayer-mc-clips .gplayer-mc-clips-text {\n max-width: 50px;\n}\n.media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .drawer-container[data-volume] {\n height: 32px;\n margin-right: 8px;\n}\n.media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .drawer-container[data-volume] .drawer-icon-container[data-volume] .drawer-icon[data-volume] {\n height: 32px;\n}\n.media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .drawer-container[data-volume] .drawer-icon-container[data-volume] .drawer-icon[data-volume] svg {\n height: 17px;\n margin-top: 5px;\n}\n.media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] {\n display: none;\n}\n.media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume].volume-bar-hide {\n width: 0;\n height: 12px;\n top: 9px;\n padding: 0;\n}\n\n:root {\n --font-size-media-controls: 14px;\n --font-size-media-controls-dropdown: 16px;\n --player-vod-color: #005aff;\n --player-dvr-color: #fff;\n --player-live-color: #ff0101;\n --player-seekbar-current-color: #ff5700;\n --player-seekbar-buffer-color: #fff;\n}\n\n.media-control-skin-1[data-media-control-skin-1] {\n position: absolute;\n width: 100%;\n height: 100%;\n z-index: 9999;\n pointer-events: none;\n font-family: Roboto, \"Open Sans\", Arial, sans-serif;\n font-size: var(--font-size-media-controls);\n}\n.media-control-skin-1[data-media-control-skin-1].dragging {\n pointer-events: auto;\n cursor: grabbing !important;\n cursor: url(\"closed-hand.cur\"), move;\n}\n.media-control-skin-1[data-media-control-skin-1].dragging * {\n cursor: grabbing !important;\n cursor: url(\"closed-hand.cur\"), move;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-icon {\n line-height: 0;\n letter-spacing: 0;\n speak: none;\n color: #fff;\n vertical-align: middle;\n text-align: left;\n transition: all 0.1s ease;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-icon:hover {\n color: white;\n}\n.media-control-skin-1[data-media-control-skin-1].media-control-hide .media-control-background[data-background] {\n opacity: 0;\n}\n.media-control-skin-1[data-media-control-skin-1].media-control-hide .media-control-layer[data-controls] {\n bottom: -50px;\n}\n.media-control-skin-1[data-media-control-skin-1].media-control-hide .media-control-layer[data-controls] .bar-scrubber[data-seekbar] {\n opacity: 0;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] {\n position: absolute;\n bottom: 0;\n width: 100%;\n padding: 0 12px 0 8px;\n height: var(--bottom-panel);\n vertical-align: middle;\n pointer-events: auto;\n transition: bottom 0.4s ease-out;\n display: flex;\n justify-content: space-between;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-left-panel {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n justify-content: flex-start;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-button,\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-indicator,\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .gplayer-mc-panel-item {\n order: 10;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] [data-playpause],\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] [data-playstop] {\n order: 1;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] [data-volume] {\n order: 2;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] [data-position] {\n order: 3;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] [data-duration] {\n order: 3;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-center-panel {\n height: 100%;\n text-align: center;\n line-height: var(--bottom-panel);\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-right-panel {\n display: flex;\n align-items: center;\n gap: 1rem;\n justify-content: flex-end;\n}\n@media (max-width: 420px) {\n .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-right-panel {\n gap: 0.5rem;\n overflow: hidden;\n }\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button {\n background-color: transparent;\n border: 0;\n padding: 0;\n cursor: pointer;\n display: inline-block;\n height: 20px;\n width: 24px;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button svg {\n height: 20px;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button svg path {\n fill: white;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button:focus {\n outline: none;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button[data-play] {\n float: left;\n height: 100%;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button[data-pause] {\n float: left;\n height: 100%;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button[data-stop] {\n float: left;\n height: 100%;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button[data-fullscreen] {\n order: 100;\n background-color: transparent;\n border: 0;\n height: 40px;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] button.media-control-button[data-hd-indicator] {\n background-color: transparent;\n border: 0;\n cursor: default;\n display: none !important;\n float: right;\n height: 100%;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-indicator[data-position], .media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-indicator[data-duration] {\n display: flex;\n color: white;\n cursor: default;\n line-height: var(--bottom-panel);\n position: relative;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-indicator[data-position] {\n margin: 1px 0 0 7px;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-indicator[data-duration] {\n color: rgb(255, 255, 255);\n opacity: 0.5;\n margin-top: 1px;\n margin-right: 6px;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .media-control-indicator[data-duration]::before {\n content: \"|\";\n margin-right: 7px;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .gplayer-mc-panel-item {\n height: 32px;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .bar-container[data-seekbar] {\n position: absolute;\n top: -11px;\n left: 0;\n display: inline-block;\n vertical-align: middle;\n width: 100%;\n height: 20px;\n cursor: pointer;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .bar-container[data-seekbar] .bar-background[data-seekbar] {\n width: 100%;\n height: 3px;\n position: relative;\n top: 8px;\n background-color: #666;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .bar-container[data-seekbar] .bar-background[data-seekbar] .bar-fill-1[data-seekbar] {\n position: absolute;\n top: 0;\n left: 0;\n width: 0;\n height: 100%;\n background-color: var(--player-seekbar-buffer-color);\n transition: all 0.1s ease-out;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .bar-container[data-seekbar] .bar-background[data-seekbar] .bar-fill-2[data-seekbar] {\n position: absolute;\n top: 0;\n left: 0;\n width: 0;\n height: 100%;\n background-color: var(--player-seekbar-current-color);\n transition: all 0.1s ease-out;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .bar-container[data-seekbar].seek-disabled {\n cursor: default;\n display: none;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .bar-container[data-seekbar].seek-disabled + .bar-scrubber[data-seekbar] {\n cursor: default;\n display: none;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .bar-scrubber[data-seekbar] {\n position: absolute;\n transform: translateX(-50%);\n top: -11.5px;\n left: 0;\n width: 20px;\n height: 20px;\n opacity: 1;\n transition: all 0.1s ease-out;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .bar-scrubber[data-seekbar] .bar-scrubber-icon[data-seekbar] {\n position: absolute;\n left: 4.5px;\n top: 4.5px;\n width: 11px;\n height: 11px;\n border-radius: 50%;\n background-color: white;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] {\n display: flex;\n justify-content: flex-start;\n height: var(--bottom-panel);\n cursor: pointer;\n box-sizing: border-box;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .drawer-icon-container[data-volume] {\n bottom: 0;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .drawer-icon-container[data-volume] .drawer-icon[data-volume] {\n background-color: transparent;\n border: 0;\n box-sizing: content-box;\n height: var(--bottom-panel);\n width: 20px;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .drawer-icon-container[data-volume] .drawer-icon[data-volume] svg {\n height: 20px;\n position: relative;\n top: 3px;\n margin-top: 7px;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .drawer-icon-container[data-volume] .drawer-icon[data-volume] svg path {\n fill: white;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .drawer-icon-container[data-volume] .drawer-icon[data-volume].muted svg {\n margin-left: 2px;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] {\n position: relative;\n margin-left: 10px;\n top: 8px;\n width: 80px;\n height: 23px;\n padding: 3px 0;\n transition: width 0.2s ease-out;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-background[data-volume] {\n height: 3px;\n border-radius: 100px;\n position: relative;\n top: 7px;\n background-color: #666;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-background[data-volume] .bar-fill-1[data-volume] {\n position: absolute;\n top: 0;\n left: 0;\n width: 0;\n height: 100%;\n border-radius: 100px;\n background-color: white;\n transition: all 0.1s ease-out;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-background[data-volume] .bar-fill-2[data-volume] {\n position: absolute;\n top: 0;\n left: 0;\n width: 0;\n height: 100%;\n background-color: var(--player-vod-color);\n transition: all 0.1s ease-out;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-scrubber[data-volume] {\n position: absolute;\n transform: translateX(-50%);\n top: 3px;\n margin-left: 3px;\n width: 16px;\n height: 16px;\n opacity: 1;\n transition: all 0.1s ease-out;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-scrubber[data-volume] .bar-scrubber-icon[data-volume] {\n position: absolute;\n left: 3px;\n top: 5px;\n width: 7px;\n height: 7px;\n border-radius: 50%;\n background-color: white;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .segmented-bar-element[data-volume] {\n float: left;\n width: 4px;\n padding-left: 2px;\n height: 12px;\n opacity: 0.5;\n box-shadow: inset 2px 0 0 white;\n transition: transform 0.2s ease-out;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .segmented-bar-element[data-volume].fill {\n box-shadow: inset 2px 0 0 #fff;\n opacity: 1;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .segmented-bar-element[data-volume]:nth-of-type(1) {\n padding-left: 0;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .segmented-bar-element[data-volume]:hover {\n transform: scaleY(1.5);\n}\n\n/* TODO distribute between plugins' styles */\n.media-control-skin-1[data-media-control-skin-1] .media-control-cc button[data-cc-button] {\n display: flex;\n justify-content: center;\n padding: 0;\n align-items: center;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-cc button[data-cc-button]:hover {\n color: white;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-cc ul {\n background-color: rgba(74, 74, 74, 0.6);\n border: none;\n width: auto;\n border-radius: 4px;\n bottom: 52px;\n margin-left: -28px;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-cc ul li {\n font-size: 16px;\n text-align: center;\n white-space: nowrap;\n height: 30px;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-cc ul li a {\n height: 30px;\n padding: 5px 10px;\n color: #fffffe;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-cc ul li a:hover {\n background-color: rgba(0, 0, 0, 0.4);\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-cc ul li.current a {\n background-color: rgba(0, 0, 0, 0.4);\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-cc ul li:first-child a {\n border-bottom-left-radius: 4px;\n border-bottom-right-radius: 4px;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-cc ul li:last-child a {\n border-top-left-radius: 4px;\n border-top-right-radius: 4px;\n}\n.media-control-skin-1[data-media-control-skin-1] .seek-time {\n height: 26px;\n line-height: 26px;\n bottom: 52px;\n border-radius: 3px;\n background-color: rgba(74, 74, 74, 0.7);\n}\n.media-control-skin-1[data-media-control-skin-1] .seek-time span {\n letter-spacing: 0.8px;\n font-size: 14px;\n font-family: Roboto, \"Open Sans\", Arial, sans-serif;\n}\n.media-control-skin-1[data-media-control-skin-1] .seek-time .seek-time__pos {\n padding-left: 8px;\n padding-right: 8px;\n}");
|
|
43401
|
+
insertStyle("[data-player] {\n --bottom-panel: 40px;\n}\n\n.container .media-control-notransition {\n transition: none !important;\n}\n.container .player-poster .play-wrapper {\n opacity: 1;\n}\n.container.crop-video [data-html5-video] {\n object-fit: cover;\n}\n.container .cc-line {\n position: absolute;\n bottom: calc(var(--bottom-panel) + 5px);\n width: 100%;\n}\n.container .cc-line p {\n width: auto;\n background-color: rgba(0, 0, 0, 0.4);\n color: white;\n display: inline-block;\n}\n.container .player-poster .circle-poster {\n top: 50%;\n margin-top: -60px;\n left: 50%;\n margin-left: -60px;\n position: absolute;\n width: 120px;\n height: 120px;\n border: 2px solid white;\n border-radius: 50%;\n filter: \"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)\";\n filter: alpha(opacity=60);\n opacity: 1;\n box-shadow: 0 0 1px 0 white;\n}\n.container .player-poster .circle-poster svg {\n margin-left: 5px;\n width: 80px;\n}\n.container .spinner-three-bounce[data-spinner] > div {\n background-color: #ff5700;\n}\n\n.media-control-skin-1.w270 .media-control-quality,\n.media-control-skin-1.w270 .media-control-audiotracks {\n display: none;\n}\n.media-control-skin-1.w270 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] {\n transform: rotate(270deg);\n float: none;\n display: block;\n position: absolute;\n /* bottom: 12px; */\n margin: 0;\n top: -40px;\n padding: 0;\n /* right: 20px; */\n margin-left: -32px;\n margin-top: -3px;\n width: 80px;\n /* padding-left: 12px; */\n}\n.media-control-skin-1.w270 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-background-mask {\n position: absolute;\n width: 100%;\n height: 100%;\n left: -5px;\n}\n.media-control-skin-1.w270 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume].volume-bar-hide {\n display: none;\n}\n.media-control-skin-1.w270 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-background {\n margin-left: 11px;\n top: 7px;\n width: 80px;\n}\n.media-control-skin-1.w270 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-scrubber {\n margin-left: 11px;\n top: 1px;\n}\n\n.media-control-skin-1.w370 .media-control-cc {\n width: 28px;\n}\n.media-control-skin-1.w370 .media-control-cc svg {\n height: 17px;\n}\n.media-control-skin-1.w370 .share_plugin[data-share] .share-container {\n top: calc(50% - 150px);\n left: calc(50% - 125px);\n width: 250px;\n height: calc(100% - 32px);\n max-height: 300px;\n transform: none;\n}\n.media-control-skin-1.w370 .share_plugin[data-share] .share-container .share-container-header {\n border: none;\n}\n.media-control-skin-1.w370 .share_plugin[data-share] .share-container .share-container-header .share-container-header--title {\n visibility: hidden;\n}\n.media-control-skin-1.w370 .media-control-quality,\n.media-control-skin-1.w370 .media-control-audiotracks {\n display: block;\n}\n.media-control-skin-1.w370 .media-control-audiotracks[data-audiotracks] {\n margin-top: 3px;\n margin-right: 10px;\n}\n.media-control-skin-1.w370 .media-control-audiotracks[data-audiotracks] ul {\n bottom: 30px;\n width: 50px;\n}\n.media-control-skin-1.w370 .media-control-audiotracks[data-audiotracks] ul li {\n height: 23px;\n font-size: 14px;\n}\n.media-control-skin-1.w370 .media-control-audiotracks[data-audiotracks] ul li a {\n height: 23px;\n padding: 2px 5px;\n}\n.media-control-skin-1.w370 .media-control-audiotracks[data-audiotracks] button[data-audiotracks-button] .quality-text,\n.media-control-skin-1.w370 .media-control-audiotracks[data-audiotracks] button[data-audiotracks-button] .audio-text {\n font-size: 13px;\n}\n.media-control-skin-1.w370 .media-control-audiotracks[data-audiotracks] button[data-audiotracks-button] span.quality-arrow,\n.media-control-skin-1.w370 .media-control-audiotracks[data-audiotracks] button[data-audiotracks-button] span.audio-arrow {\n width: 7px;\n height: 5px;\n margin-left: 4px;\n margin-top: 11px;\n}\n.media-control-skin-1.w370 .media-control-multicamera .multicamera {\n margin-top: 0;\n margin-right: 10px;\n}\n.media-control-skin-1.w370 .media-control-multicamera .multicamera button {\n height: 32px;\n}\n.media-control-skin-1.w370 .media-control-multicamera .multicamera button svg {\n height: 17px;\n margin: 0;\n}\n.media-control-skin-1.w370 .media-control-layer[data-controls] {\n padding-left: 10px;\n padding-right: 12px;\n}\n.media-control-skin-1.w370 .media-control-layer[data-controls] .media-control-indicator {\n line-height: 32px;\n}\n.media-control-skin-1.w370 .media-control-layer[data-controls] .media-control-indicator[data-position], .media-control-skin-1.w370 .media-control-layer[data-controls] .media-control-indicator[data-duration] {\n font-size: 11px;\n line-height: 32px;\n}\n.media-control-skin-1.w370 .media-control-layer[data-controls] .dvr-controls .live-button {\n margin-left: 10px;\n height: 32px;\n font-size: 12px;\n line-height: 32px;\n text-shadow: none;\n letter-spacing: 0.6px;\n}\n.media-control-skin-1.w370 .media-control-layer[data-controls] .dvr-controls .live-button::before {\n width: 8px;\n height: 8px;\n margin-right: 4px;\n}\n.media-control-skin-1.w370 .media-control-layer[data-controls] .dvr-controls .live-info {\n margin-left: 10px;\n height: 32px;\n font-size: 12px;\n line-height: 32px;\n text-shadow: none;\n letter-spacing: 0.6px;\n}\n.media-control-skin-1.w370 .media-control-layer[data-controls] .dvr-controls .live-info::before {\n width: 8px;\n height: 8px;\n margin-right: 4px;\n}\n.media-control-skin-1.w370 .media-control-layer[data-controls] button.media-control-button[data-fullscreen] {\n height: 33px;\n}\n.media-control-skin-1.w370 .media-control-layer[data-controls] button.media-control-button svg {\n height: 17px;\n}\n.media-control-skin-1.w370 .media-control-layer[data-controls] .gplayer-mc-clips .gplayer-mc-clips-text {\n line-height: 33px;\n font-size: 11px;\n}\n.media-control-skin-1.w370 .media-control-layer[data-controls] .gplayer-mc-clips .gplayer-mc-clips-text {\n max-width: 50px;\n}\n.media-control-skin-1.w370 .media-control-layer[data-controls] .drawer-container[data-volume] {\n height: 32px;\n margin-right: 8px;\n}\n.media-control-skin-1.w370 .media-control-layer[data-controls] .drawer-container[data-volume] .drawer-icon-container[data-volume] .drawer-icon[data-volume] {\n height: 32px;\n}\n.media-control-skin-1.w370 .media-control-layer[data-controls] .drawer-container[data-volume] .drawer-icon-container[data-volume] .drawer-icon[data-volume] svg {\n height: 17px;\n margin-top: 5px;\n}\n.media-control-skin-1.w370 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] {\n display: none;\n}\n.media-control-skin-1.w370 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume].volume-bar-hide {\n width: 0;\n height: 12px;\n top: 9px;\n padding: 0;\n}\n.media-control-skin-1.w370 .media-control-layer[data-controls] .media-control-button,\n.media-control-skin-1.w370 .media-control-layer[data-controls] .gplayer-mc-panel-item {\n height: 32px;\n}\n\n:root {\n --font-size-media-controls: 14px;\n --font-size-media-controls-dropdown: 16px;\n --player-vod-color: #005aff;\n --player-dvr-color: #fff;\n --player-live-color: #ff0101;\n --player-seekbar-current-color: #ff5700;\n --player-seekbar-buffer-color: #fff;\n --gplayer-mc-text-color: #fff;\n --gplayer-mc-popup-border-color: rgba(255, 255, 255, 0.1);\n}\n\n.media-control-skin-1 {\n position: absolute;\n width: 100%;\n height: 100%;\n z-index: 9999;\n pointer-events: none;\n font-family: Roboto, \"Open Sans\", Arial, sans-serif;\n font-size: var(--font-size-media-controls);\n}\n.media-control-skin-1.dragging {\n pointer-events: auto;\n cursor: grabbing !important;\n cursor: url(\"closed-hand.cur\"), move;\n}\n.media-control-skin-1.dragging * {\n cursor: grabbing !important;\n cursor: url(\"closed-hand.cur\"), move;\n}\n.media-control-skin-1 .media-control-icon {\n line-height: 0;\n letter-spacing: 0;\n speak: none;\n color: var(--gplayer-mc-text-color);\n vertical-align: middle;\n text-align: left;\n transition: all 0.1s ease;\n}\n.media-control-skin-1 .media-control-icon:hover {\n color: white;\n}\n.media-control-skin-1.media-control-hide .media-control-background[data-background] {\n opacity: 0;\n}\n.media-control-skin-1.media-control-hide .media-control-layer[data-controls] {\n bottom: -50px;\n}\n.media-control-skin-1.media-control-hide .media-control-layer[data-controls] .bar-scrubber[data-seekbar] {\n opacity: 0;\n}\n.media-control-skin-1 .media-control-layer[data-controls] {\n position: absolute;\n bottom: 0;\n width: 100%;\n padding: 0 12px 0 8px;\n height: var(--bottom-panel);\n vertical-align: middle;\n pointer-events: auto;\n transition: bottom 0.4s ease-out;\n display: flex;\n justify-content: space-between;\n}\n.media-control-skin-1 .media-control-left-panel {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n justify-content: flex-start;\n}\n.media-control-skin-1 .media-control-button,\n.media-control-skin-1 .media-control-indicator,\n.media-control-skin-1 .gplayer-mc-panel-item {\n order: 50;\n}\n.media-control-skin-1 [data-playpause],\n.media-control-skin-1 [data-playstop] {\n order: 1;\n}\n.media-control-skin-1 [data-volume] {\n order: 2;\n}\n.media-control-skin-1 [data-position] {\n order: 3;\n}\n.media-control-skin-1 [data-duration] {\n order: 3;\n}\n.media-control-skin-1 .media-control-center-panel {\n height: 100%;\n text-align: center;\n line-height: var(--bottom-panel);\n}\n.media-control-skin-1 .media-control-right-panel {\n display: flex;\n align-items: center;\n gap: 1rem;\n justify-content: flex-end;\n}\n@media (max-width: 420px) {\n .media-control-skin-1 .media-control-right-panel {\n gap: 0.5rem;\n overflow: hidden;\n }\n}\n.media-control-skin-1 button.media-control-button {\n background-color: transparent;\n border: 0;\n padding: 0;\n cursor: pointer;\n display: inline-block;\n height: 20px;\n width: 24px;\n}\n.media-control-skin-1 button.media-control-button svg {\n height: 20px;\n}\n.media-control-skin-1 button.media-control-button svg path {\n fill: white;\n}\n.media-control-skin-1 button.media-control-button:focus {\n outline: none;\n}\n.media-control-skin-1 button.media-control-button[data-play] {\n float: left;\n height: 100%;\n}\n.media-control-skin-1 button.media-control-button[data-pause] {\n float: left;\n height: 100%;\n}\n.media-control-skin-1 button.media-control-button[data-stop] {\n float: left;\n height: 100%;\n}\n.media-control-skin-1 button.media-control-button[data-fullscreen] {\n order: 100;\n background-color: transparent;\n border: 0;\n height: 40px;\n}\n.media-control-skin-1 button.media-control-button[data-hd-indicator] {\n background-color: transparent;\n border: 0;\n cursor: default;\n display: none !important;\n float: right;\n height: 100%;\n}\n.media-control-skin-1 .media-control-indicator[data-position], .media-control-skin-1 .media-control-indicator[data-duration] {\n display: flex;\n color: white;\n cursor: default;\n line-height: var(--bottom-panel);\n position: relative;\n}\n.media-control-skin-1 .media-control-indicator[data-position] {\n margin: 1px 0 0 7px;\n}\n.media-control-skin-1 .media-control-indicator[data-duration] {\n color: rgb(255, 255, 255);\n opacity: 0.5;\n margin-top: 1px;\n margin-right: 6px;\n}\n.media-control-skin-1 .media-control-indicator[data-duration]::before {\n content: \"|\";\n margin-right: 7px;\n}\n.media-control-skin-1 .bar-container[data-seekbar] {\n position: absolute;\n top: -11px;\n left: 0;\n display: inline-block;\n vertical-align: middle;\n width: 100%;\n height: 20px;\n cursor: pointer;\n}\n.media-control-skin-1 .bar-container[data-seekbar] .bar-background[data-seekbar] {\n width: 100%;\n height: 3px;\n position: relative;\n top: 8px;\n background-color: #666;\n}\n.media-control-skin-1 .bar-container[data-seekbar] .bar-background[data-seekbar] .bar-fill-1[data-seekbar] {\n position: absolute;\n top: 0;\n left: 0;\n width: 0;\n height: 100%;\n background-color: var(--player-seekbar-buffer-color);\n transition: all 0.1s ease-out;\n}\n.media-control-skin-1 .bar-container[data-seekbar] .bar-background[data-seekbar] .bar-fill-2[data-seekbar] {\n position: absolute;\n top: 0;\n left: 0;\n width: 0;\n height: 100%;\n background-color: var(--player-seekbar-current-color);\n transition: all 0.1s ease-out;\n}\n.media-control-skin-1 .bar-container[data-seekbar].seek-disabled {\n cursor: default;\n display: none;\n}\n.media-control-skin-1 .bar-container[data-seekbar].seek-disabled + .bar-scrubber[data-seekbar] {\n cursor: default;\n display: none;\n}\n.media-control-skin-1 .bar-scrubber[data-seekbar] {\n position: absolute;\n transform: translateX(-50%);\n top: -11.5px;\n left: 0;\n width: 20px;\n height: 20px;\n opacity: 1;\n transition: all 0.1s ease-out;\n}\n.media-control-skin-1 .bar-scrubber[data-seekbar] .bar-scrubber-icon[data-seekbar] {\n position: absolute;\n left: 4.5px;\n top: 4.5px;\n width: 11px;\n height: 11px;\n border-radius: 50%;\n background-color: white;\n}\n.media-control-skin-1 .drawer-container[data-volume] {\n display: flex;\n justify-content: flex-start;\n height: var(--bottom-panel);\n cursor: pointer;\n box-sizing: border-box;\n}\n.media-control-skin-1 .drawer-container[data-volume] .drawer-icon-container[data-volume] {\n bottom: 0;\n}\n.media-control-skin-1 .drawer-container[data-volume] .drawer-icon-container[data-volume] .drawer-icon[data-volume] {\n background-color: transparent;\n border: 0;\n box-sizing: content-box;\n height: var(--bottom-panel);\n width: 20px;\n}\n.media-control-skin-1 .drawer-container[data-volume] .drawer-icon-container[data-volume] .drawer-icon[data-volume] svg {\n height: 20px;\n position: relative;\n top: 3px;\n margin-top: 7px;\n}\n.media-control-skin-1 .drawer-container[data-volume] .drawer-icon-container[data-volume] .drawer-icon[data-volume] svg path {\n fill: white;\n}\n.media-control-skin-1 .drawer-container[data-volume] .drawer-icon-container[data-volume] .drawer-icon[data-volume].muted svg {\n margin-left: 2px;\n}\n.media-control-skin-1 .drawer-container[data-volume] .bar-container[data-volume] {\n position: relative;\n margin-left: 10px;\n top: 8px;\n width: 80px;\n height: 23px;\n padding: 3px 0;\n transition: width 0.2s ease-out;\n}\n.media-control-skin-1 .drawer-container[data-volume] .bar-container[data-volume] .bar-background[data-volume] {\n height: 3px;\n border-radius: 100px;\n position: relative;\n top: 7px;\n background-color: #666;\n}\n.media-control-skin-1 .drawer-container[data-volume] .bar-container[data-volume] .bar-background[data-volume] .bar-fill-1[data-volume] {\n position: absolute;\n top: 0;\n left: 0;\n width: 0;\n height: 100%;\n border-radius: 100px;\n background-color: white;\n transition: all 0.1s ease-out;\n}\n.media-control-skin-1 .drawer-container[data-volume] .bar-container[data-volume] .bar-background[data-volume] .bar-fill-2[data-volume] {\n position: absolute;\n top: 0;\n left: 0;\n width: 0;\n height: 100%;\n background-color: var(--player-vod-color);\n transition: all 0.1s ease-out;\n}\n.media-control-skin-1 .drawer-container[data-volume] .bar-container[data-volume] .bar-scrubber[data-volume] {\n position: absolute;\n transform: translateX(-50%);\n top: 3px;\n margin-left: 3px;\n width: 16px;\n height: 16px;\n opacity: 1;\n transition: all 0.1s ease-out;\n}\n.media-control-skin-1 .drawer-container[data-volume] .bar-container[data-volume] .bar-scrubber[data-volume] .bar-scrubber-icon[data-volume] {\n position: absolute;\n left: 3px;\n top: 5px;\n width: 7px;\n height: 7px;\n border-radius: 50%;\n background-color: white;\n}\n.media-control-skin-1 .drawer-container[data-volume] .bar-container[data-volume] .segmented-bar-element[data-volume] {\n float: left;\n width: 4px;\n padding-left: 2px;\n height: 12px;\n opacity: 0.5;\n box-shadow: inset 2px 0 0 white;\n transition: transform 0.2s ease-out;\n}\n.media-control-skin-1 .drawer-container[data-volume] .bar-container[data-volume] .segmented-bar-element[data-volume].fill {\n box-shadow: inset 2px 0 0 #fff;\n opacity: 1;\n}\n.media-control-skin-1 .drawer-container[data-volume] .bar-container[data-volume] .segmented-bar-element[data-volume]:nth-of-type(1) {\n padding-left: 0;\n}\n.media-control-skin-1 .drawer-container[data-volume] .bar-container[data-volume] .segmented-bar-element[data-volume]:hover {\n transform: scaleY(1.5);\n}\n\n/* TODO distribute between plugins' styles */\n.media-control-skin-1 .seek-time {\n height: 26px;\n line-height: 26px;\n bottom: 52px;\n border-radius: 3px;\n background-color: rgba(74, 74, 74, 0.7);\n}\n.media-control-skin-1 .seek-time span {\n letter-spacing: 0.8px;\n font-size: 14px;\n font-family: Roboto, \"Open Sans\", Arial, sans-serif;\n}\n.media-control-skin-1 .seek-time .seek-time__pos {\n padding-left: 8px;\n padding-right: 8px;\n}\n\n@keyframes pulse {\n 0% {\n color: #fff;\n }\n 50% {\n color: #ff0101;\n }\n 100% {\n color: #B80000;\n }\n}");
|
|
43402
43402
|
|
|
43403
43403
|
const mediaControlHTML = "<div class=\"media-control-background\" data-background></div>\n\n<div class=\"media-control-layer gcore-skin-bg-color\" data-controls>\n <% var renderBar = function(name) { %>\n <div class=\"bar-container\" data-<%= name %>>\n <div class=\"bar-background\" data-<%= name %>>\n <div class=\"bar-fill-1\" data-<%= name %>></div>\n <div class=\"bar-fill-2 gcore-skin-main-color\" data-<%= name %>></div>\n <div class=\"bar-hover\" data-<%= name %>></div>\n </div>\n </div>\n <div class=\"bar-scrubber\" data-<%= name %>>\n <div class=\"bar-scrubber-icon gcore-skin-main-color\" data-<%= name %>></div>\n </div>\n <% }; %>\n <% var renderSegmentedBar = function(name, segments) {\n segments = segments || 10; %>\n <div class=\"bar-container\" data-<%= name %>>\n <div class=\"bar-background\" data-<%= name %>>\n <div class=\"bar-fill-1 gcore-skin-main-color\" data-<%= name %>></div>\n </div>\n <div class=\"bar-scrubber\" data-<%= name %>>\n <div class=\"bar-scrubber-icon gcore-skin-main-color\" data-<%= name %>></div>\n </div>\n </div>\n <% }; %>\n <% var renderDrawer = function(name, renderContent) { %>\n <div class=\"drawer-container\" data-<%= name %>>\n <div class=\"drawer-icon-container\" data-<%= name %>>\n <div class=\"drawer-icon media-control-icon gcore-skin-button-color\" data-<%= name %>></div>\n <span class=\"drawer-text\" data-<%= name %>></span>\n </div>\n <% renderContent(name); %>\n </div>\n <% }; %>\n <% var renderIndicator = function(name) { %>\n <div class=\"media-control-indicator gcore-skin-text-color\" data-<%= name %>></div>\n <% }; %>\n <% var renderQuality = function(name) { %>\n <div class=\"media-control-quality\" data-<%= name %>></div>\n <% }; %>\n <% var renderNerd = function(name) { %>\n <div class=\"media-control-nerd\" data-<%= name %>></div>\n <% }; %>\n <% var renderMultiCamera = function(name) { %>\n <div class=\"media-control-multicamera\" data-<%= name %>></div>\n <% }; %>\n <% var renderVR = function(name) { %>\n <div class=\"media-control-vr\" data-<%= name %>></div>\n <% }; %>\n <% var renderButton = function(name) { %>\n <button type=\"button\" class=\"media-control-button media-control-icon gcore-skin-button-color\" data-<%= name %>\n aria-label=\"<%= name %>\"></button>\n <% }; %>\n\n <% var templates = {\n bar: renderBar,\n segmentedBar: renderSegmentedBar,\n };\n var render = function (settingsList) {\n settingsList.forEach(function (setting) {\n\n if (setting === \"seekbar\") {\n renderBar(setting);\n } else if (setting === \"volume\") {\n renderDrawer(setting, settings.volumeBarTemplate ? templates[settings.volumeBarTemplate] : function (name) {\n return renderSegmentedBar(name);\n });\n } else if (setting === \"duration\" || setting === \"position\" || setting === \"clips\") {\n renderIndicator(setting);\n } else if (setting === \"quality\") {\n renderQuality(setting)\n } else if (setting === \"nerd\") {\n renderNerd(setting)\n } else if (setting === \"multicamera\") {\n renderMultiCamera(setting)\n } else if (setting === \"vr\") {\n renderVR(setting)\n } else if ([\"playpause\", \"playstop\", \"fullscreen\"].includes(setting)) {\n renderButton(setting);\n }\n });\n }; %>\n <% if (settings.left && settings.left.length) { %>\n <div class=\"media-control-left-panel\" data-media-control>\n <% render(settings.left); %>\n </div>\n <% } %>\n <% if (settings.default && settings.default.length) { %>\n <div class=\"media-control-center-panel\" data-media-control>\n <% render(settings.default); %>\n </div>\n <% } %>\n <% if (settings.right && settings.right.length) { %>\n <div class=\"media-control-right-panel\" data-media-control>\n <% render(settings.right); %>\n </div>\n <% } %>\n</div>\n";
|
|
43404
43404
|
|
|
@@ -44841,7 +44841,7 @@ const templateHtml$2 = "<div class=\"big-mute-icon-wrapper\" data-big-mute id=\"
|
|
|
44841
44841
|
|
|
44842
44842
|
insertStyle(".big-mute-icon-wrapper[data-big-mute] {\n position: absolute;\n z-index: 9998;\n background-color: transparent;\n display: flex;\n justify-content: center;\n width: 100%;\n height: calc(100% - 50px);\n margin: 0 auto;\n opacity: 0.75;\n transition: opacity 0.1s ease;\n pointer-events: auto;\n}\n.big-mute-icon-wrapper[data-big-mute].hide {\n display: none;\n}\n.big-mute-icon-wrapper[data-big-mute]:hover {\n cursor: pointer;\n}\n\n.big-mute-icon[data-big-mute-icon] {\n display: flex;\n align-items: center;\n justify-content: center;\n align-self: center;\n width: 120px;\n height: 120px;\n border: 2px solid white;\n border-radius: 50%;\n filter: \"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)\";\n filter: alpha(opacity=60);\n opacity: 1;\n box-shadow: 0 0 1px 0 white;\n background: rgba(240, 243, 247, 0.9411764706);\n z-index: 10000;\n}\n.big-mute-icon[data-big-mute-icon] svg {\n margin-left: 5px;\n width: 80px;\n height: 80px;\n}\n.big-mute-icon[data-big-mute-icon] svg path {\n fill: #1f1e1e !important;\n}\n.big-mute-icon[data-big-mute-icon]:hover {\n background: rgba(240, 243, 247, 0.8784313725);\n}\n.big-mute-icon[data-big-mute-icon]:hover svg path {\n fill: #151515 !important;\n}");
|
|
44843
44843
|
|
|
44844
|
-
const T$
|
|
44844
|
+
const T$a = 'plugins.big_mute_button';
|
|
44845
44845
|
// TODO rewrite as a container plugin
|
|
44846
44846
|
/**
|
|
44847
44847
|
* `PLUGIN` that displays a big mute button over the video when it's being played muted.
|
|
@@ -44904,7 +44904,7 @@ class BigMuteButton extends UICorePlugin {
|
|
|
44904
44904
|
if (autoPlay) {
|
|
44905
44905
|
this.autoPlay = true;
|
|
44906
44906
|
}
|
|
44907
|
-
trace(`${T$
|
|
44907
|
+
trace(`${T$a} onPlay`, {
|
|
44908
44908
|
autoPlay: this.autoPlay});
|
|
44909
44909
|
if (this.autoPlay && !wasMuted && volume === 0) {
|
|
44910
44910
|
this.mount();
|
|
@@ -44978,7 +44978,7 @@ class BigMuteButton extends UICorePlugin {
|
|
|
44978
44978
|
|
|
44979
44979
|
const pluginHtml$3 = "<button class=\"media-control-button gplayer-lite-btn gcore-skin-button-color gear-icon\"\n id=\"gear-button\"\n aria-expanded=\"false\"\n aria-controls=\"gear-options\">\n <%= icon %>\n</button>\n<div class=\"gear-wrapper gcore-skin-bg-color\" id=\"gear-options-wrapper\">\n <ul class=\"gear-options-list\" id=\"gear-options\" role=\"menu\"></ul>\n</div>\n";
|
|
44980
44980
|
|
|
44981
|
-
insertStyle(".media-control-skin-1
|
|
44981
|
+
insertStyle(".media-control-skin-1 .gplayer-mc-panel-item.media-control-gear {\n order: 99;\n height: 20px;\n}\n.media-control-skin-1 .gplayer-mc-panel-item.media-control-gear .gear-wrapper {\n position: absolute;\n right: 16px;\n bottom: 52px;\n width: 250px;\n min-height: 48px;\n z-index: 9999;\n border-radius: 4px;\n box-shadow: 0 0 1px 1px var(--gplayer-mc-popup-border-color);\n}\n.media-control-skin-1 .gplayer-mc-panel-item.media-control-gear .gear-options-list {\n padding: 8px 0;\n}\n.media-control-skin-1 .gplayer-mc-panel-item.media-control-gear .gear-option {\n margin: 0;\n text-align: left;\n line-height: 22px;\n padding: 5px 14px;\n width: 250px;\n font-size: 12px;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n gap: 8px;\n}\n.media-control-skin-1 .gplayer-mc-panel-item.media-control-gear .gear-option_icon {\n flex: 24px 0 0;\n height: 24px;\n}\n.media-control-skin-1 .gplayer-mc-panel-item.media-control-gear .gear-option_icon.hidden {\n visibility: hidden;\n display: inline-block;\n}\n.media-control-skin-1 .gplayer-mc-panel-item.media-control-gear .gear-option_label {\n flex: 0 1 100%;\n}\n.media-control-skin-1 .gplayer-mc-panel-item.media-control-gear .gear-option_arrow-right-icon {\n flex: 0 0 14px;\n height: 24px;\n}\n.media-control-skin-1 .gplayer-mc-panel-item.media-control-gear .gear-option_value {\n flex: 1 0 auto;\n}");
|
|
44982
44982
|
|
|
44983
44983
|
insertStyle("*, :focus, :visited {\n outline: none !important;\n}\n\n.gear-wrapper .go-back {\n font-weight: 600;\n font-size: 14px;\n line-height: 20px;\n width: 100%;\n text-align: left;\n padding: 12px;\n}\n.gear-wrapper .go-back .arrow-left-icon {\n float: left;\n padding-top: 2px;\n padding-right: 2px;\n}\n.gear-wrapper .go-back .arrow-left-icon svg {\n height: 16px;\n}\n.gear-wrapper ul.gear-sub-menu {\n width: 100%;\n list-style-type: none;\n min-width: 60px;\n border-top: 2px solid rgb(36, 36, 36);\n overflow-y: auto;\n}\n.gear-wrapper ul.gear-sub-menu li {\n font-size: 12px;\n text-align: left;\n}\n.gear-wrapper ul.gear-sub-menu li[data-title] {\n background-color: #c3c2c2;\n padding: 5px;\n}\n.gear-wrapper ul.gear-sub-menu li a {\n display: block;\n text-decoration: none;\n height: 32px;\n padding: 5px 10px;\n line-height: 22px;\n color: #fffffe;\n}\n.gear-wrapper ul.gear-sub-menu li a:hover {\n color: white;\n background-color: rgba(0, 0, 0, 0.4);\n}\n.gear-wrapper ul.gear-sub-menu li a:hover a {\n color: white;\n text-decoration: none;\n}\n.gear-wrapper ul.gear-sub-menu li a .check-icon {\n width: 30px;\n height: 20px;\n float: left;\n display: block;\n}\n.gear-wrapper ul.gear-sub-menu li a .check-icon svg {\n display: none;\n}\n.gear-wrapper ul.gear-sub-menu li.current a .check-icon svg {\n display: inline;\n}");
|
|
44984
44984
|
|
|
@@ -48103,7 +48103,7 @@ class Clips extends UICorePlugin {
|
|
|
48103
48103
|
*/
|
|
48104
48104
|
get attributes() {
|
|
48105
48105
|
return {
|
|
48106
|
-
class: '
|
|
48106
|
+
class: 'gplayer-mc-clips',
|
|
48107
48107
|
};
|
|
48108
48108
|
}
|
|
48109
48109
|
get version() {
|
|
@@ -48162,8 +48162,7 @@ class Clips extends UICorePlugin {
|
|
|
48162
48162
|
this.listenTo(mediaControl, Events$1.MEDIACONTROL_RENDERED, this.onMcRender);
|
|
48163
48163
|
}
|
|
48164
48164
|
onMcRender() {
|
|
48165
|
-
|
|
48166
|
-
mediaControl.slot('clips', this.$el);
|
|
48165
|
+
this.core.getPlugin('media_control')?.slot('clips', this.$el);
|
|
48167
48166
|
}
|
|
48168
48167
|
onContainerChanged() {
|
|
48169
48168
|
// TODO figure out the conditions of changing the container (without destroying the previous one)
|
|
@@ -48476,7 +48475,7 @@ const templateHtml = "<div class=\"player-error-screen__content\" data-error-scr
|
|
|
48476
48475
|
|
|
48477
48476
|
insertStyle("div.player-error-screen, [data-player] div.player-error-screen {\n color: #CCCACA;\n position: absolute;\n top: 0;\n height: 100%;\n width: 100%;\n background-color: rgba(0, 0, 0, 0.7);\n z-index: 2000;\n display: flex;\n flex-direction: column;\n justify-content: center;\n}\ndiv.player-error-screen__content[data-error-screen], [data-player] div.player-error-screen__content[data-error-screen] {\n font-size: 14px;\n color: #CCCACA;\n margin-top: 45px;\n}\ndiv.player-error-screen__title[data-error-screen], [data-player] div.player-error-screen__title[data-error-screen] {\n font-weight: bold;\n line-height: 30px;\n font-size: 18px;\n}\ndiv.player-error-screen__message[data-error-screen], [data-player] div.player-error-screen__message[data-error-screen] {\n width: 90%;\n margin: 0 auto;\n}\ndiv.player-error-screen__code[data-error-screen], [data-player] div.player-error-screen__code[data-error-screen] {\n font-size: 13px;\n margin-top: 15px;\n}\ndiv.player-error-screen__reload, [data-player] div.player-error-screen__reload {\n cursor: pointer;\n width: 30px;\n margin: 15px auto 0;\n}");
|
|
48478
48477
|
|
|
48479
|
-
const T$
|
|
48478
|
+
const T$9 = 'plugins.error_screen';
|
|
48480
48479
|
/**
|
|
48481
48480
|
* `PLUGIN` that displays fatal errors nicely in the overlay on top of the player.
|
|
48482
48481
|
* @public
|
|
@@ -48552,7 +48551,7 @@ class ErrorScreen extends UICorePlugin {
|
|
|
48552
48551
|
}, 0);
|
|
48553
48552
|
}
|
|
48554
48553
|
onActiveContainerChanged() {
|
|
48555
|
-
trace(`${T$
|
|
48554
|
+
trace(`${T$9} onActiveContainerChanged`, {
|
|
48556
48555
|
reloading: this.core.options.reloading,
|
|
48557
48556
|
});
|
|
48558
48557
|
this.err = null;
|
|
@@ -48602,16 +48601,16 @@ class ErrorScreen extends UICorePlugin {
|
|
|
48602
48601
|
|
|
48603
48602
|
insertStyle(".player-logo[data-logo] {\n position: absolute;\n z-index: 2;\n width: 100%;\n height: 100%;\n}\n\n.clappr-logo {\n position: absolute;\n}");
|
|
48604
48603
|
|
|
48605
|
-
insertStyle("
|
|
48604
|
+
insertStyle("*,\n:focus,\n:visited {\n outline: none !important;\n}\n\n.multicamera[data-multicamera] {\n float: right;\n margin-top: 4px;\n position: relative;\n margin-right: 20px;\n width: 20px;\n}\n.multicamera[data-multicamera] button {\n background-color: transparent;\n color: #fff;\n font-family: Roboto, \"Open Sans\", Arial, sans-serif;\n -webkit-font-smoothing: antialiased;\n border: none;\n font-size: 14px;\n padding: 0;\n}\n.multicamera[data-multicamera] button svg {\n height: 20px;\n position: relative;\n margin-top: 6px;\n}\n.multicamera[data-multicamera] button:hover {\n color: #c9c9c9;\n}\n.multicamera[data-multicamera] button.changing {\n animation: pulse 0.5s infinite alternate;\n}\n.multicamera[data-multicamera] button span.quality-arrow {\n width: 9px;\n height: 6px;\n margin-top: 11px;\n margin-left: 5px;\n}\n.multicamera[data-multicamera] > ul {\n padding: 6px 0;\n right: -24px;\n width: 245px;\n list-style-type: none;\n position: absolute;\n bottom: 48px;\n border-radius: 4px;\n display: none;\n background-color: rgba(74, 74, 74, 0.9);\n}\n.multicamera[data-multicamera] > ul::after {\n content: \"\";\n position: absolute;\n top: 100%;\n left: 85%;\n margin-left: -10px;\n width: 0;\n height: 0;\n border-top: 10px solid rgba(74, 74, 74, 0.9);\n border-right: 10px solid transparent;\n border-left: 10px solid transparent;\n}\n.multicamera[data-multicamera] li {\n font-size: 10px;\n cursor: pointer;\n}\n.multicamera[data-multicamera] li .multicamera-item {\n display: flex;\n padding: 10px 0;\n justify-content: center;\n position: relative;\n}\n.multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] {\n pointer-events: none;\n}\n.multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] .multicamera-screenshot {\n opacity: 0.5;\n}\n.multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false] .multicamera-text {\n opacity: 0.5;\n}\n.multicamera[data-multicamera] li .multicamera-item[data-mulitcamera-selector-live=false]:hover {\n background-color: rgba(0, 0, 0, 0);\n}\n.multicamera[data-multicamera] li .multicamera-item:hover, .multicamera[data-multicamera] li .multicamera-item.multicamera-active {\n background-color: rgba(0, 0, 0, 0.3);\n}\n.multicamera[data-multicamera] li .multicamera-item .multicamera-screenshot {\n width: 80px;\n height: 60px;\n}\n.multicamera[data-multicamera] li .multicamera-item .multicamera-screenshot img {\n width: 80px;\n height: 60px;\n}\n.multicamera[data-multicamera] li .multicamera-item .multicamera-text {\n width: 120px;\n text-align: left;\n margin-left: 15px;\n}\n.multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-title,\n.multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-description {\n width: 120px;\n height: 20px;\n font-family: Roboto, \"Open Sans\", Arial, sans-serif;\n font-size: 14px;\n font-weight: normal;\n font-style: normal;\n font-stretch: normal;\n line-height: 1.43;\n letter-spacing: normal;\n text-align: left;\n color: #fff;\n text-overflow: ellipsis;\n overflow: hidden;\n}\n.multicamera[data-multicamera] li .multicamera-item .multicamera-text .multicamera-description {\n opacity: 0.6;\n}\n.multicamera[data-multicamera] li[data-title] {\n background-color: #c3c2c2;\n padding: 5px;\n}\n.multicamera[data-multicamera] li a {\n color: #444;\n padding: 2px 10px;\n display: block;\n text-decoration: none;\n}\n.multicamera[data-multicamera] li a:hover {\n background-color: #555;\n color: white;\n}\n.multicamera[data-multicamera] li a:hover a {\n color: white;\n text-decoration: none;\n}\n.multicamera[data-multicamera] li.current a {\n color: #f00;\n}");
|
|
48606
48605
|
|
|
48607
48606
|
const pipIcon = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M21.05 3.00001C21.302 3.00001 21.5435 3.10003 21.7217 3.27833C21.9 3.45646 22 3.69802 22 3.95003V10.6H20.1V4.90003H4.90001V18.2H10.6V20.1H3.95001C3.69802 20.1 3.45647 20 3.27832 19.8217C3.10002 19.6436 3 19.402 3 19.15V3.95001C3 3.69802 3.10002 3.45647 3.27832 3.27832C3.45644 3.10002 3.69801 3 3.95001 3L21.05 3.00001ZM21.05 12.5C21.302 12.5 21.5435 12.6 21.7217 12.7783C21.9 12.9565 22 13.198 22 13.45V19.15C22 19.402 21.9 19.6436 21.7217 19.8217C21.5436 20 21.302 20.1 21.05 20.1H13.45C13.198 20.1 12.9564 20 12.7783 19.8217C12.6 19.6436 12.5 19.402 12.5 19.15V13.45C12.5 13.198 12.6 12.9565 12.7783 12.7783C12.9564 12.6 13.198 12.5 13.45 12.5H21.05ZM7.47178 6.12823L9.60928 8.26572L11.5501 6.32492V11.5499H6.32509L8.26589 9.60911L6.12839 7.47161L7.47178 6.12823Z\"\n fill=\"#C9C9C9\"/>\n</svg>\n";
|
|
48608
48607
|
|
|
48609
48608
|
const buttonHtml$2 = "<button class=\"gplayer-lite-btn gcore-skin-button-color\">\n <%= pipIcon %>\n</button>\n";
|
|
48610
48609
|
|
|
48611
|
-
insertStyle(".media-control-pip {\n order: 95;\n display: flex;\n}\n.media-control-pip button {\n height: 20px;\n}\n.media-control-pip button svg {\n height: 20px;\n}");
|
|
48610
|
+
insertStyle(".media-control-skin-1 .gplayer-mc-panel-item.media-control-pip {\n order: 95;\n display: flex;\n}\n.media-control-skin-1 .gplayer-mc-panel-item.media-control-pip button {\n height: 20px;\n}\n.media-control-skin-1 .gplayer-mc-panel-item.media-control-pip button svg {\n height: 20px;\n}");
|
|
48612
48611
|
|
|
48613
48612
|
const VERSION$3 = '0.0.1';
|
|
48614
|
-
const T$
|
|
48613
|
+
const T$8 = `plugins.pip`;
|
|
48615
48614
|
/**
|
|
48616
48615
|
* `PLUGIN` that enables picture in picture mode.
|
|
48617
48616
|
* @beta
|
|
@@ -48694,7 +48693,7 @@ class PictureInPicture extends UICorePlugin {
|
|
|
48694
48693
|
}
|
|
48695
48694
|
}
|
|
48696
48695
|
requestPictureInPicture() {
|
|
48697
|
-
trace(`${T$
|
|
48696
|
+
trace(`${T$8} requestPictureInPicture`, {
|
|
48698
48697
|
videoElement: !!this.videoElement,
|
|
48699
48698
|
});
|
|
48700
48699
|
this.videoElement.requestPictureInPicture();
|
|
@@ -48726,7 +48725,7 @@ const DEFAULT_PLAYBACK_RATES = [
|
|
|
48726
48725
|
{ value: 2.0, label: '2x' },
|
|
48727
48726
|
];
|
|
48728
48727
|
const DEFAULT_PLAYBACK_RATE = 1;
|
|
48729
|
-
const T$
|
|
48728
|
+
const T$7 = 'plugins.playback_rate';
|
|
48730
48729
|
/**
|
|
48731
48730
|
* `PLUGIN` that allows changing the playback speed of the video.
|
|
48732
48731
|
* @beta
|
|
@@ -48833,7 +48832,7 @@ class PlaybackRate extends UICorePlugin {
|
|
|
48833
48832
|
this.mount();
|
|
48834
48833
|
}
|
|
48835
48834
|
mount() {
|
|
48836
|
-
trace(`${T$
|
|
48835
|
+
trace(`${T$7} mount`, {
|
|
48837
48836
|
shouldMount: this.shouldMount(),
|
|
48838
48837
|
});
|
|
48839
48838
|
if (!this.shouldMount()) {
|
|
@@ -48850,7 +48849,7 @@ class PlaybackRate extends UICorePlugin {
|
|
|
48850
48849
|
})));
|
|
48851
48850
|
}
|
|
48852
48851
|
onMetaDataLoaded() {
|
|
48853
|
-
trace(`${T$
|
|
48852
|
+
trace(`${T$7} onMetaDataLoaded`, {
|
|
48854
48853
|
playbackType: this.core.activePlayback.getPlaybackType(),
|
|
48855
48854
|
dvrEnabled: this.core.activePlayback.dvrEnabled,
|
|
48856
48855
|
});
|
|
@@ -48872,13 +48871,13 @@ class PlaybackRate extends UICorePlugin {
|
|
|
48872
48871
|
this.core.activePlayback?.setPlaybackRate(this.selectedRate);
|
|
48873
48872
|
}
|
|
48874
48873
|
else {
|
|
48875
|
-
trace(`${T$
|
|
48874
|
+
trace(`${T$7} onPlaybackRateChange not steering to the selected rate, it is seemingly a catchup algorithm working`, {
|
|
48876
48875
|
selectedRate: this.selectedRate,
|
|
48877
48876
|
});
|
|
48878
48877
|
}
|
|
48879
48878
|
}
|
|
48880
48879
|
shouldMount() {
|
|
48881
|
-
trace(`${T$
|
|
48880
|
+
trace(`${T$7} shouldMount`, {
|
|
48882
48881
|
playbackType: this.core.activePlayback?.getPlaybackType(),
|
|
48883
48882
|
dvrEnabled: this.core.activePlayback?.dvrEnabled,
|
|
48884
48883
|
});
|
|
@@ -48895,7 +48894,7 @@ class PlaybackRate extends UICorePlugin {
|
|
|
48895
48894
|
* @internal
|
|
48896
48895
|
*/
|
|
48897
48896
|
render() {
|
|
48898
|
-
trace(`${T$
|
|
48897
|
+
trace(`${T$7} render`, {
|
|
48899
48898
|
shouldMount: this.shouldMount(),
|
|
48900
48899
|
});
|
|
48901
48900
|
this.$el.html(PlaybackRate.listTemplate({
|
|
@@ -48941,13 +48940,13 @@ class PlaybackRate extends UICorePlugin {
|
|
|
48941
48940
|
}
|
|
48942
48941
|
}
|
|
48943
48942
|
syncRate() {
|
|
48944
|
-
trace(`${T$
|
|
48943
|
+
trace(`${T$7} syncRate`, {
|
|
48945
48944
|
selectedRate: this.selectedRate,
|
|
48946
48945
|
});
|
|
48947
48946
|
this.core.activePlayback?.setPlaybackRate(this.selectedRate);
|
|
48948
48947
|
}
|
|
48949
48948
|
resetPlaybackRate() {
|
|
48950
|
-
trace(`${T$
|
|
48949
|
+
trace(`${T$7} resetPlaybackRate`, {
|
|
48951
48950
|
selectedRate: this.selectedRate,
|
|
48952
48951
|
});
|
|
48953
48952
|
this.core.activePlayback?.setPlaybackRate(DEFAULT_PLAYBACK_RATE);
|
|
@@ -48982,7 +48981,7 @@ class PlaybackRate extends UICorePlugin {
|
|
|
48982
48981
|
?.label || `x${rate}`);
|
|
48983
48982
|
}
|
|
48984
48983
|
highlightCurrentRate() {
|
|
48985
|
-
trace(`${T$
|
|
48984
|
+
trace(`${T$7} highlightCurrentRate`, {
|
|
48986
48985
|
selectedRate: this.selectedRate,
|
|
48987
48986
|
});
|
|
48988
48987
|
this.allRateElements().removeClass('current');
|
|
@@ -48993,7 +48992,7 @@ class PlaybackRate extends UICorePlugin {
|
|
|
48993
48992
|
.addClass('gcore-skin-active');
|
|
48994
48993
|
}
|
|
48995
48994
|
updateGearOptionLabel() {
|
|
48996
|
-
trace(`${T$
|
|
48995
|
+
trace(`${T$7} updateGearOptionLabel`, {
|
|
48997
48996
|
selectedRate: this.selectedRate,
|
|
48998
48997
|
});
|
|
48999
48998
|
this.mount();
|
|
@@ -49007,7 +49006,7 @@ const posterHTML = "<div class=\"play-wrapper\" id=\"gplayer-poster\">\n <div
|
|
|
49007
49006
|
//Copyright 2014 Globo.com Player authors. All rights reserved.
|
|
49008
49007
|
// Use of this source code is governed by a BSD-style
|
|
49009
49008
|
// license that can be found in the LICENSE file.
|
|
49010
|
-
const T$
|
|
49009
|
+
const T$6 = 'plugins.poster';
|
|
49011
49010
|
/**
|
|
49012
49011
|
* `PLUGIN` that displays a poster image in the background and a big play button on top when playback is stopped
|
|
49013
49012
|
* @beta
|
|
@@ -49111,7 +49110,7 @@ class Poster extends UIContainerPlugin {
|
|
|
49111
49110
|
super.disable();
|
|
49112
49111
|
}
|
|
49113
49112
|
onError(error) {
|
|
49114
|
-
trace(`${T$
|
|
49113
|
+
trace(`${T$6} onError`, {
|
|
49115
49114
|
enabled: this.enabled,
|
|
49116
49115
|
});
|
|
49117
49116
|
if (this.hasFatalError) {
|
|
@@ -49244,7 +49243,7 @@ const hdIcon = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"non
|
|
|
49244
49243
|
|
|
49245
49244
|
insertStyle(".quality-levels li.disabled {\n opacity: 0.5;\n pointer-events: none;\n}\n.quality-levels li.current {\n background-color: #000;\n}");
|
|
49246
49245
|
|
|
49247
|
-
const T$
|
|
49246
|
+
const T$5 = 'plugins.quality_levels';
|
|
49248
49247
|
const VERSION$2 = 'v2.22.5';
|
|
49249
49248
|
/**
|
|
49250
49249
|
* `PLUGIN` that provides a UI to select the desired quality level of the playback.
|
|
@@ -49487,7 +49486,7 @@ class QualityLevels extends UICorePlugin {
|
|
|
49487
49486
|
this.highlightCurrentLevel();
|
|
49488
49487
|
}
|
|
49489
49488
|
highlightCurrentLevel() {
|
|
49490
|
-
trace(`${T$
|
|
49489
|
+
trace(`${T$5} highlightCurrentLevel`, {
|
|
49491
49490
|
selectedLevelId: this.selectedLevelId,
|
|
49492
49491
|
});
|
|
49493
49492
|
this.allLevelElements()
|
|
@@ -49515,7 +49514,7 @@ insertStyle(".seek-time {\n position: absolute;\n white-space: nowrap;\n heig
|
|
|
49515
49514
|
// Use of this source code is governed by a BSD-style
|
|
49516
49515
|
// license that can be found at https://github.com/clappr/clappr-plugins/blob/master/LICENSE
|
|
49517
49516
|
const { formatTime } = Utils;
|
|
49518
|
-
|
|
49517
|
+
const T$4 = 'plugins.seek_time';
|
|
49519
49518
|
/**
|
|
49520
49519
|
* `PLUGIN` that adds a seek time indicator when the mouse pointer is over the seek bar.
|
|
49521
49520
|
* @beta
|
|
@@ -49574,6 +49573,9 @@ class SeekTime extends UICorePlugin {
|
|
|
49574
49573
|
showTime(event) {
|
|
49575
49574
|
this.hoveringOverSeekBar = true;
|
|
49576
49575
|
this.calculateHoverPosition(event);
|
|
49576
|
+
trace(`${T$4} showTime`, {
|
|
49577
|
+
hoverPosition: this.hoverPosition,
|
|
49578
|
+
});
|
|
49577
49579
|
this.update();
|
|
49578
49580
|
}
|
|
49579
49581
|
hideTime() {
|
|
@@ -49648,7 +49650,7 @@ class SeekTime extends UICorePlugin {
|
|
|
49648
49650
|
return this;
|
|
49649
49651
|
}
|
|
49650
49652
|
mount() {
|
|
49651
|
-
this.core.getPlugin('media_control').$el.append(this.$el); // TODO
|
|
49653
|
+
this.core.getPlugin('media_control').$el.append(this.$el); // TODO MediaControl.mount('root', this.$el)
|
|
49652
49654
|
}
|
|
49653
49655
|
}
|
|
49654
49656
|
|
|
@@ -50173,7 +50175,7 @@ class SourceController extends CorePlugin {
|
|
|
50173
50175
|
}
|
|
50174
50176
|
}
|
|
50175
50177
|
|
|
50176
|
-
insertStyle("
|
|
50178
|
+
insertStyle(".media-control-skin-1 .media-control-cc button.media-control-button {\n display: flex;\n justify-content: center;\n padding: 0;\n align-items: center;\n vertical-align: top;\n}\n.media-control-skin-1 .media-control-cc button.media-control-button:hover {\n color: white;\n}\n.media-control-skin-1 .media-control-cc ul {\n width: auto;\n border-radius: 4px;\n bottom: 52px;\n margin-left: -28px;\n}\n.media-control-skin-1 .media-control-cc ul li {\n font-size: 16px;\n text-align: center;\n white-space: nowrap;\n height: 30px;\n}\n.media-control-skin-1 .media-control-cc ul li a {\n height: 30px;\n padding: 5px 10px;\n color: #fffffe;\n}\n.media-control-skin-1 .media-control-cc ul li a:hover {\n background-color: rgba(0, 0, 0, 0.4);\n}\n.media-control-skin-1 .media-control-cc ul li.current a {\n background-color: rgba(0, 0, 0, 0.4);\n}\n.media-control-skin-1 .media-control-cc ul li:first-child a {\n border-bottom-left-radius: 4px;\n border-bottom-right-radius: 4px;\n}\n.media-control-skin-1 .media-control-cc ul li:last-child a {\n border-top-left-radius: 4px;\n border-top-right-radius: 4px;\n}\n.media-control-skin-1 .media-control-cc {\n position: relative;\n order: 85;\n}\n.media-control-skin-1 .media-control-cc button {\n background-color: transparent;\n color: #fff;\n -webkit-font-smoothing: antialiased;\n border: none;\n cursor: pointer;\n}\n.media-control-skin-1 .media-control-cc button .cc-text svg {\n fill: white;\n}\n.media-control-skin-1 .media-control-cc button:hover {\n color: #c9c9c9;\n}\n.media-control-skin-1 .media-control-cc button.changing {\n animation: pulse 0.5s infinite alternate;\n}\n.media-control-skin-1 .media-control-cc ul {\n width: 80px;\n overflow: hidden;\n list-style-type: none;\n position: absolute;\n bottom: 25px;\n border: none;\n background-color: #e6e6e6;\n padding: 8px 0;\n box-shadow: 0 0 1px 1px var(--gplayer-mc-popup-border-color);\n}\n.media-control-skin-1 .media-control-cc li a {\n color: #444;\n padding: 2px 10px;\n display: block;\n text-decoration: none;\n}\n.media-control-skin-1 .media-control-cc li a:hover {\n background-color: #555;\n color: white;\n}\n.media-control-skin-1 .media-control-cc li a:hover a {\n color: white;\n text-decoration: none;\n}\n.media-control-skin-1 .media-control-cc li.current a {\n color: #f00;\n background-color: #555;\n}");
|
|
50177
50179
|
|
|
50178
50180
|
const subtitlesOffIcon = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M16.238 16.1C13.979 16.1 12.578 14.538 12.578 11.997C12.578 9.462 13.973 7.9 16.238 7.9C18.087 7.9 19.5029 9.127 19.6219 10.824H18.032C17.876 9.927 17.168 9.338 16.238 9.338C15.011 9.338 14.249 10.354 14.249 11.997C14.249 13.641 15.011 14.662 16.243 14.662C17.178 14.662 17.881 14.111 18.038 13.251H19.627C19.492 14.938 18.119 16.1 16.238 16.1ZM8.03198 16.1C5.77298 16.1 4.37299 14.538 4.37299 11.997C4.37299 9.462 5.76798 7.9 8.03198 7.9C9.88098 7.9 11.298 9.127 11.416 10.824H9.82697C9.67097 9.927 8.96198 9.338 8.03198 9.338C6.80598 9.338 6.04297 10.354 6.04297 11.997C6.04297 13.641 6.80596 14.662 8.03796 14.662C8.97296 14.662 9.67601 14.111 9.83301 13.251H11.422C11.287 14.938 9.91398 16.1 8.03198 16.1ZM22.5 3H1.5C0.672 3 0 3.671 0 4.5V19.5C0 20.329 0.672 21 1.5 21H22.5C23.329 21 24 20.329 24 19.5V4.5C24 3.671 23.329 3 22.5 3Z\"\n fill=\"#C9C9C9\"/>\n</svg>\n";
|
|
50179
50181
|
|