@gcorevideo/player 2.25.5 → 2.25.7
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/template.ejs +5 -4
- package/assets/bottom-gear/gear.scss +40 -39
- package/assets/media-control/media-control.scss +343 -284
- package/assets/media-control/width270.scss +2 -10
- package/assets/media-control/width370.scss +3 -41
- package/assets/multi-camera/style.scss +9 -19
- package/assets/picture-in-picture/style.scss +13 -0
- package/assets/subtitles/style.scss +108 -68
- package/dist/core.js +1 -1
- package/dist/index.css +1346 -1422
- package/dist/index.embed.js +47 -28
- package/dist/index.js +85 -66
- package/lib/plugins/audio-selector/AudioTracks.d.ts +4 -3
- package/lib/plugins/audio-selector/AudioTracks.d.ts.map +1 -1
- package/lib/plugins/audio-selector/AudioTracks.js +41 -23
- package/lib/plugins/media-control/MediaControl.js +1 -1
- 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/package.json +1 -1
- package/src/plugins/audio-selector/AudioTracks.ts +53 -29
- package/src/plugins/audio-selector/__tests__/AudioTracks.test.ts +60 -45
- package/src/plugins/audio-selector/__tests__/__snapshots__/AudioSelector.test.ts.snap +24 -24
- package/src/plugins/audio-selector/__tests__/__snapshots__/AudioTracks.test.ts.snap +21 -18
- package/src/plugins/media-control/MediaControl.ts +1 -1
- package/src/plugins/media-control/__tests__/__snapshots__/MediaControl.test.ts.snap +6 -6
- package/src/plugins/picture-in-picture/PictureInPicture.ts +1 -1
- package/tsconfig.tsbuildinfo +1 -1
- package/assets/audio-tracks/style.scss +0 -124
- package/assets/picture-in-picture/button.scss +0 -12
package/dist/index.embed.js
CHANGED
|
@@ -43134,9 +43134,7 @@ function insertStyle(css) {
|
|
|
43134
43134
|
|
|
43135
43135
|
insertStyle("@import \"https://fonts.googleapis.com/css?family=Roboto\";\n:root {\n --theme-background-color: rgb(0 0 0 / 70%);\n --theme-text-color: rgb(255 255 255 / 100%);\n --theme-foreground-color: rgb(201 201 201 / 100%);\n --theme-hover-color: rgb(255 255 255 / 100%);\n}\n\n.gcore-skin-bg-color {\n background-color: var(--theme-background-color) !important;\n}\n\n.gcore-skin-text-color {\n color: var(--theme-text-color) !important;\n}\n\n.gcore-skin-text-color svg {\n fill: var(--theme-text-color) !important;\n}\n\n.gcore-skin-text-color svg path {\n fill: var(--theme-text-color) !important;\n}\n\n.gcore-skin-border-textarea-color {\n border-color: var(--theme-text-color) !important;\n}\n\n.gcore-skin-button-color {\n color: var(--theme-foreground-color) !important;\n}\n.gcore-skin-button-color svg {\n fill: var(--theme-foreground-color) !important;\n}\n.gcore-skin-button-color svg path {\n fill: var(--theme-foreground-color) !important;\n}\n.gcore-skin-button-color svg path.icon-hover {\n fill: var(--theme-foreground-color) !important;\n}\n.gcore-skin-button-color[data-fullscreen] svg {\n stroke: var(--theme-foreground-color) !important;\n}\n.gcore-skin-button-color[data-fullscreen] svg path {\n stroke: var(--theme-foreground-color) !important;\n}\n\n.gcore-skin-main-color {\n background-color: var(--theme-foreground-color);\n}\n\n.gcore-skin-border-color {\n border-color: var(--theme-foreground-color) !important;\n}\n\n.gcore-skin-button-color:hover {\n color: var(--theme-hover-color) !important;\n}\n\n.gcore-skin-button-color:hover svg {\n fill: var(--theme-hover-color) !important;\n}\n\n.gcore-skin-button-color:hover svg path {\n fill: var(--theme-hover-color) !important;\n}\n\n.gcore-skin-border-color:hover {\n border-color: var(--theme-hover-color) !important;\n}\n\n.gcore-skin-button-with-bg-color:hover svg path.icon-hover {\n fill: var(--theme-hover-color) !important;\n}\n\n.gcore-skin-active {\n color: var(--theme-hover-color) !important;\n}\n\n.gcore-skin-active svg {\n fill: var(--theme-hover-color) !important;\n}\n\n.gcore-skin-active svg path {\n fill: var(--theme-hover-color) !important;\n}\n\n* {\n -webkit-tap-highlight-color: transparent;\n -webkit-touch-callout: none;\n user-select: none;\n}\n\n.player-poster {\n background-size: contain !important;\n}\n\n.spinner-three-bounce > .gcore-skin-main-color {\n box-shadow: 4px 4px 9px 1px rgba(36, 61, 81, 0.51);\n}\n\n.gplayer-lite-btn {\n cursor: pointer;\n border: none;\n margin: 0;\n padding: 0;\n width: auto;\n overflow: visible;\n background: transparent;\n /* inherit font & color from ancestor */\n color: inherit;\n font: inherit;\n /* Normalize `line-height`. Cannot be changed from `normal` in Firefox 4+. */\n line-height: normal;\n /* Corrects font smoothing for webkit */\n -webkit-font-smoothing: inherit;\n -moz-osx-font-smoothing: inherit;\n /* Corrects inability to style clickable `input` types in iOS */\n appearance: none;\n /* Remove excess padding and border in Firefox 4+ */\n}\n.gplayer-lite-btn::-moz-focus-inner {\n border: 0;\n padding: 0;\n}");
|
|
43136
43136
|
|
|
43137
|
-
const pluginHtml$4 = "<button
|
|
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}\n\n@keyframes pulse {\n 0% {\n color: #fff;\n }\n 50% {\n color: #ff0101;\n }\n 100% {\n color: #B80000;\n }\n}");
|
|
43137
|
+
const pluginHtml$4 = "<button class='gcore-skin-button-color media-control-dd' id=\"gplayer-audiotracks-button\" aria-haspopup=\"menu\" aria-expanded=\"false\">\n <span class=\"media-control-dd__text\" id=\"gplayer-audiotracks-button-text\"><%= title %></span>\n <span class=\"media-control-dd__arrow\"><%= icon %></span>\n</button>\n<ul class=\"gcore-skin-bg-color menu media-control-dd__popup\" id=\"gplayer-audiotracks-menu\" role=\"menu\">\n <% for (const track of tracks) { %>\n <li>\n <a href=\"#\" class=\"gcore-skin-text-color\" data-item=\"<%= track.id %>\" role=\"menuitemradio\" aria-checked=\"<%= track.id === current %>\">\n <%= track.label %>\n </a>\n </li>\n <% }; %>\n</ul>\n";
|
|
43140
43138
|
|
|
43141
43139
|
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
43140
|
|
|
@@ -43398,7 +43396,7 @@ const FullscreenIOS = {
|
|
|
43398
43396
|
},
|
|
43399
43397
|
};
|
|
43400
43398
|
|
|
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 .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[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.media-control-skin-1[data-media-control-skin-1].w370 .media-control-layer[data-controls] .media-control-button,\n.media-control-skin-1[data-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}\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] .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}");
|
|
43399
|
+
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-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 margin: 0;\n top: -40px;\n padding: 0;\n margin-left: -32px;\n margin-top: -3px;\n width: 80px;\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 display: block;\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] .media-control-item {\n height: 32px;\n}\n\n:root {\n --font-size-media-controls: 14px;\n --font-size-media-controls-dropdown: 16px;\n --gplayer-mc-font-size-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: rgb(255 255 255 / 10%);\n --gplayer-mc-popup-bg: rgb(74 74 74 / 60%);\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 .media-control-item {\n order: 50;\n}\n.media-control-skin-1 .media-control-item {\n display: flex;\n align-items: center;\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 }\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.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.media-control-skin-1 .media-control-dd {\n display: flex;\n height: 32px;\n line-height: 32px;\n align-items: baseline;\n gap: 4px;\n vertical-align: baseline;\n padding: 0;\n background-color: transparent;\n color: var(--gplayer-mc-text-color);\n -webkit-font-smoothing: antialiased;\n border: none;\n cursor: pointer;\n}\n.media-control-skin-1 .media-control-dd__text {\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n max-width: 100px;\n}\n.media-control-skin-1 .media-control-dd.changing {\n animation: pulse 0.5s infinite alternate;\n}\n.media-control-skin-1 .media-control-dd__arrow {\n width: 9px;\n height: 6px;\n}\n.media-control-skin-1 .media-control-dd__wrap {\n position: relative;\n}\n.media-control-skin-1 .media-control-dd__popup {\n max-width: 114px;\n list-style-type: none;\n position: absolute;\n box-shadow: 0 0 1px 1px var(--gplayer-mc-popup-border-color);\n border: none;\n min-width: 60px;\n border-radius: 4px;\n bottom: 40px;\n right: -2px;\n overflow: hidden;\n}\n.media-control-skin-1 .media-control-dd__popup li {\n font-size: var(--gplayer-mc-font-size-dropdown);\n text-align: right;\n height: 30px;\n}\n.media-control-skin-1 .media-control-dd__popup li[data-title] {\n background-color: #c3c2c2;\n padding: 5px;\n}\n.media-control-skin-1 .media-control-dd__popup 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 line-height: 20px;\n color: #fffffe;\n}\n.media-control-skin-1 .media-control-dd__popup li a:hover {\n text-decoration: none;\n background-color: rgba(0, 0, 0, 0.4);\n color: white;\n}\n.media-control-skin-1 .media-control-dd__popup li.current a {\n color: #f00;\n}\n.media-control-skin-1 .media-control-dd__popup li:first-child a {\n border-bottom-left-radius: 4px;\n border-bottom-right-radius: 4px;\n}\n.media-control-skin-1 .media-control-dd__popup li:last-child a {\n border-top-left-radius: 4px;\n border-top-right-radius: 4px;\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
43400
|
|
|
43403
43401
|
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
43402
|
|
|
@@ -44285,7 +44283,7 @@ class MediaControl extends UICorePlugin {
|
|
|
44285
44283
|
const panel = this.getElementLocation(name);
|
|
44286
44284
|
if (panel) {
|
|
44287
44285
|
element.attr(`data-${name}`, '');
|
|
44288
|
-
element.addClass('
|
|
44286
|
+
element.addClass('media-control-item');
|
|
44289
44287
|
mountTo(panel, element);
|
|
44290
44288
|
}
|
|
44291
44289
|
}
|
|
@@ -44666,6 +44664,7 @@ function mergeElements(a, b) {
|
|
|
44666
44664
|
}
|
|
44667
44665
|
|
|
44668
44666
|
const VERSION$6 = '2.22.4';
|
|
44667
|
+
// const T = 'plugins.audiotracks'
|
|
44669
44668
|
/**
|
|
44670
44669
|
* `PLUGIN` that makes possible to switch audio tracks via the media control UI.
|
|
44671
44670
|
* @beta
|
|
@@ -44678,6 +44677,7 @@ const VERSION$6 = '2.22.4';
|
|
|
44678
44677
|
*/
|
|
44679
44678
|
class AudioTracks extends UICorePlugin {
|
|
44680
44679
|
currentTrack = null;
|
|
44680
|
+
open = false;
|
|
44681
44681
|
tracks = [];
|
|
44682
44682
|
/**
|
|
44683
44683
|
* @internal
|
|
@@ -44703,7 +44703,7 @@ class AudioTracks extends UICorePlugin {
|
|
|
44703
44703
|
*/
|
|
44704
44704
|
get attributes() {
|
|
44705
44705
|
return {
|
|
44706
|
-
class: 'media-control-audiotracks',
|
|
44706
|
+
class: 'media-control-audiotracks media-control-dd__wrap',
|
|
44707
44707
|
};
|
|
44708
44708
|
}
|
|
44709
44709
|
/**
|
|
@@ -44711,8 +44711,8 @@ class AudioTracks extends UICorePlugin {
|
|
|
44711
44711
|
*/
|
|
44712
44712
|
get events() {
|
|
44713
44713
|
return {
|
|
44714
|
-
'click [data-
|
|
44715
|
-
'click #audiotracks-button': 'toggleMenu',
|
|
44714
|
+
'click #gplayer-audiotracks-menu [data-item]': 'onTrackSelect',
|
|
44715
|
+
'click #gplayer-audiotracks-button': 'toggleMenu',
|
|
44716
44716
|
};
|
|
44717
44717
|
}
|
|
44718
44718
|
/**
|
|
@@ -44726,8 +44726,9 @@ class AudioTracks extends UICorePlugin {
|
|
|
44726
44726
|
const mediaControl = this.core.getPlugin('media_control');
|
|
44727
44727
|
assert(mediaControl, 'media_control plugin is required');
|
|
44728
44728
|
this.listenTo(mediaControl, Events$1.MEDIACONTROL_RENDERED, () => {
|
|
44729
|
-
|
|
44729
|
+
this.mount();
|
|
44730
44730
|
});
|
|
44731
|
+
// TODO when tracks change, re-render and re-attach
|
|
44731
44732
|
this.listenTo(mediaControl, Events$1.MEDIACONTROL_HIDE, this.hideMenu);
|
|
44732
44733
|
this.listenTo(mediaControl, ExtendedEvents.MEDIACONTROL_MENU_COLLAPSE, (from) => {
|
|
44733
44734
|
if (from !== this.name) {
|
|
@@ -44742,6 +44743,7 @@ class AudioTracks extends UICorePlugin {
|
|
|
44742
44743
|
tracks.find((track) => track.kind === 'main') ?? null; // TODO test
|
|
44743
44744
|
this.tracks = tracks;
|
|
44744
44745
|
this.render();
|
|
44746
|
+
this.mount();
|
|
44745
44747
|
});
|
|
44746
44748
|
this.listenTo(this.core.activeContainer, Events$1.CONTAINER_AUDIO_CHANGED, (track) => {
|
|
44747
44749
|
this.currentTrack = track;
|
|
@@ -44749,6 +44751,10 @@ class AudioTracks extends UICorePlugin {
|
|
|
44749
44751
|
this.buttonElement().removeClass('changing');
|
|
44750
44752
|
this.updateText();
|
|
44751
44753
|
});
|
|
44754
|
+
// TODO test
|
|
44755
|
+
this.listenTo(this.core.activeContainer, Events$1.CONTAINER_CLICK, () => {
|
|
44756
|
+
this.hideMenu();
|
|
44757
|
+
});
|
|
44752
44758
|
}
|
|
44753
44759
|
shouldRender() {
|
|
44754
44760
|
// Render is called from the parent class constructor so tracks aren't available
|
|
@@ -44759,21 +44765,19 @@ class AudioTracks extends UICorePlugin {
|
|
|
44759
44765
|
* @internal
|
|
44760
44766
|
*/
|
|
44761
44767
|
render() {
|
|
44762
|
-
if (!this.shouldRender()) {
|
|
44763
|
-
return this;
|
|
44764
|
-
}
|
|
44765
44768
|
this.$el.html(AudioTracks.template({
|
|
44766
|
-
tracks: this.tracks,
|
|
44769
|
+
tracks: this.tracks ?? [],
|
|
44767
44770
|
title: this.getTitle(),
|
|
44768
44771
|
icon: audioArrow,
|
|
44769
44772
|
current: this.currentTrack?.id,
|
|
44770
44773
|
}));
|
|
44774
|
+
this.$el.find('#gplayer-audiotracks-menu').hide();
|
|
44771
44775
|
this.updateText();
|
|
44772
44776
|
this.highlightCurrentTrack();
|
|
44773
44777
|
return this;
|
|
44774
44778
|
}
|
|
44775
44779
|
onTrackSelect(event) {
|
|
44776
|
-
const id = event.currentTarget?.dataset?.
|
|
44780
|
+
const id = event.currentTarget?.dataset?.item;
|
|
44777
44781
|
if (id) {
|
|
44778
44782
|
this.selectAudioTrack(id);
|
|
44779
44783
|
}
|
|
@@ -44787,24 +44791,34 @@ class AudioTracks extends UICorePlugin {
|
|
|
44787
44791
|
this.updateText();
|
|
44788
44792
|
}
|
|
44789
44793
|
hideMenu() {
|
|
44790
|
-
this
|
|
44791
|
-
this.$el.find('#audiotracks-
|
|
44794
|
+
this.open = false;
|
|
44795
|
+
this.$el.find('#gplayer-audiotracks-menu').hide();
|
|
44796
|
+
this.$el.find('#gplayer-audiotracks-button').attr('aria-expanded', 'false');
|
|
44792
44797
|
}
|
|
44793
44798
|
toggleMenu() {
|
|
44794
|
-
this.
|
|
44795
|
-
this
|
|
44796
|
-
|
|
44797
|
-
|
|
44799
|
+
this.open = !this.open;
|
|
44800
|
+
this.core
|
|
44801
|
+
.getPlugin('media_control')
|
|
44802
|
+
.trigger(ExtendedEvents.MEDIACONTROL_MENU_COLLAPSE, this.name);
|
|
44803
|
+
if (this.open) {
|
|
44804
|
+
this.$el.find('#gplayer-audiotracks-menu').show();
|
|
44805
|
+
}
|
|
44806
|
+
else {
|
|
44807
|
+
this.$el.find('#gplayer-audiotracks-menu').hide();
|
|
44808
|
+
}
|
|
44809
|
+
this.$el
|
|
44810
|
+
.find('#gplayer-audiotracks-button')
|
|
44811
|
+
.attr('aria-expanded', this.open);
|
|
44798
44812
|
}
|
|
44799
44813
|
buttonElement() {
|
|
44800
|
-
return this.$('button');
|
|
44814
|
+
return this.$('#gplayer-audiotracks-button');
|
|
44801
44815
|
}
|
|
44802
44816
|
buttonElementText() {
|
|
44803
|
-
return this.$('button
|
|
44817
|
+
return this.$el.find('#gplayer-audiotracks-button-text');
|
|
44804
44818
|
}
|
|
44805
44819
|
trackElement(id) {
|
|
44806
|
-
return this.$('#audiotracks-
|
|
44807
|
-
(id !== undefined ? `[data-
|
|
44820
|
+
return this.$('#gplayer-audiotracks-menu a' +
|
|
44821
|
+
(id !== undefined ? `[data-item="${id}"]` : '')).parent();
|
|
44808
44822
|
}
|
|
44809
44823
|
getTitle() {
|
|
44810
44824
|
if (!this.currentTrack) {
|
|
@@ -44835,6 +44849,11 @@ class AudioTracks extends UICorePlugin {
|
|
|
44835
44849
|
.attr('aria-checked', 'true');
|
|
44836
44850
|
}
|
|
44837
44851
|
}
|
|
44852
|
+
mount() {
|
|
44853
|
+
if (this.shouldRender()) {
|
|
44854
|
+
this.core.getPlugin('media_control')?.slot('audiotracks', this.$el);
|
|
44855
|
+
}
|
|
44856
|
+
}
|
|
44838
44857
|
}
|
|
44839
44858
|
|
|
44840
44859
|
const templateHtml$2 = "<div class=\"big-mute-icon-wrapper\" data-big-mute id=\"gplayer-big-mute-button\">\n <div class=\"big-mute-icon gcore-skin-border-color\" data-big-mute-icon id=\"gplayer-big-mute-icon\"></div>\n</div>\n";
|
|
@@ -44978,7 +44997,7 @@ class BigMuteButton extends UICorePlugin {
|
|
|
44978
44997
|
|
|
44979
44998
|
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
44999
|
|
|
44981
|
-
insertStyle(".media-control-skin-1
|
|
45000
|
+
insertStyle(".media-control-skin-1 .media-control-item.media-control-gear {\n order: 99;\n}\n.media-control-skin-1 .media-control-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 .media-control-item.media-control-gear .gear-options-list {\n padding: 8px 0;\n}\n.media-control-skin-1 .media-control-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 .media-control-item.media-control-gear .gear-option_icon {\n flex: 24px 0 0;\n height: 24px;\n}\n.media-control-skin-1 .media-control-item.media-control-gear .gear-option_icon.hidden {\n visibility: hidden;\n display: inline-block;\n}\n.media-control-skin-1 .media-control-item.media-control-gear .gear-option_label {\n flex: 0 1 100%;\n}\n.media-control-skin-1 .media-control-item.media-control-gear .gear-option_arrow-right-icon {\n flex: 0 0 14px;\n height: 24px;\n}\n.media-control-skin-1 .media-control-item.media-control-gear .gear-option_value {\n flex: 1 0 auto;\n}");
|
|
44982
45001
|
|
|
44983
45002
|
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
45003
|
|
|
@@ -48601,13 +48620,13 @@ class ErrorScreen extends UICorePlugin {
|
|
|
48601
48620
|
|
|
48602
48621
|
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}");
|
|
48603
48622
|
|
|
48604
|
-
insertStyle("
|
|
48623
|
+
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}");
|
|
48605
48624
|
|
|
48606
48625
|
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";
|
|
48607
48626
|
|
|
48608
48627
|
const buttonHtml$2 = "<button class=\"gplayer-lite-btn gcore-skin-button-color\">\n <%= pipIcon %>\n</button>\n";
|
|
48609
48628
|
|
|
48610
|
-
insertStyle(".media-control-pip {\n order: 95;\n
|
|
48629
|
+
insertStyle(".media-control-skin-1 .media-control-item.media-control-pip {\n order: 95;\n}\n.media-control-skin-1 .media-control-item.media-control-pip button {\n height: 20px;\n}\n.media-control-skin-1 .media-control-item.media-control-pip button svg {\n height: 20px;\n}");
|
|
48611
48630
|
|
|
48612
48631
|
const VERSION$3 = '0.0.1';
|
|
48613
48632
|
const T$8 = `plugins.pip`;
|
|
@@ -50175,7 +50194,7 @@ class SourceController extends CorePlugin {
|
|
|
50175
50194
|
}
|
|
50176
50195
|
}
|
|
50177
50196
|
|
|
50178
|
-
insertStyle("
|
|
50197
|
+
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}");
|
|
50179
50198
|
|
|
50180
50199
|
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";
|
|
50181
50200
|
|