@gcorevideo/player 2.25.5 → 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.
@@ -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}\n\n@keyframes pulse {\n 0% {\n color: #fff;\n }\n 50% {\n color: #ff0101;\n }\n 100% {\n color: #B80000;\n }\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 .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}");
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
 
@@ -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[data-media-control-skin-1] .media-control-gear {\n order: 99;\n height: 20px;\n}\n.media-control-skin-1[data-media-control-skin-1] .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}\n.media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list {\n padding: 8px 0;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .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[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option_icon {\n flex: 24px 0 0;\n height: 24px;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option_icon.hidden {\n visibility: hidden;\n display: inline-block;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option_label {\n flex: 0 1 100%;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option_arrow-right-icon {\n flex: 0 0 14px;\n height: 24px;\n}\n.media-control-skin-1[data-media-control-skin-1] .media-control-gear .gear-wrapper .gear-options-list .gear-option_value {\n flex: 1 0 auto;\n}");
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
 
@@ -48601,13 +48601,13 @@ class ErrorScreen extends UICorePlugin {
48601
48601
 
48602
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}");
48603
48603
 
48604
- insertStyle("*, :focus, :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, .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}\n\n@keyframes pulse {\n 0% {\n color: #fff;\n }\n 50% {\n color: #ff0101;\n }\n 100% {\n color: #B80000;\n }\n}");
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}");
48605
48605
 
48606
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";
48607
48607
 
48608
48608
  const buttonHtml$2 = "<button class=\"gplayer-lite-btn gcore-skin-button-color\">\n <%= pipIcon %>\n</button>\n";
48609
48609
 
48610
- 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}");
48611
48611
 
48612
48612
  const VERSION$3 = '0.0.1';
48613
48613
  const T$8 = `plugins.pip`;
@@ -50175,7 +50175,7 @@ class SourceController extends CorePlugin {
50175
50175
  }
50176
50176
  }
50177
50177
 
50178
- insertStyle("*,\n:focus,\n:visited {\n outline: none !important;\n}\n\n.media-control-cc[data-cc] {\n position: relative;\n order: 85;\n}\n.media-control-cc[data-cc] button {\n background-color: transparent;\n color: #fff;\n -webkit-font-smoothing: antialiased;\n border: none;\n cursor: pointer;\n}\n.media-control-cc[data-cc] button .cc-text svg {\n fill: white;\n}\n.media-control-cc[data-cc] button:hover {\n color: #c9c9c9;\n}\n.media-control-cc[data-cc] button.changing {\n animation: pulse 0.5s infinite alternate;\n}\n.media-control-cc[data-cc] ul {\n width: 80px;\n list-style-type: none;\n position: absolute;\n bottom: 25px;\n border: 1px solid black;\n background-color: #e6e6e6;\n padding: 8px 0;\n}\n.media-control-cc[data-cc] li a {\n color: #444;\n padding: 2px 10px;\n display: block;\n text-decoration: none;\n}\n.media-control-cc[data-cc] li a:hover {\n background-color: #555;\n color: white;\n}\n.media-control-cc[data-cc] li a:hover a {\n color: white;\n text-decoration: none;\n}\n.media-control-cc[data-cc] li.current a {\n color: #f00;\n background-color: #555;\n}\n\n@keyframes pulse {\n 0% {\n color: #fff;\n }\n 50% {\n color: #ff0101;\n }\n 100% {\n color: #B80000;\n }\n}\n::cue {\n visibility: hidden !important;\n font-size: 0 !important;\n}\n\n.ios-fullscreen::cue {\n visibility: visible !important;\n font-size: 1em !important;\n}");
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}");
50179
50179
 
50180
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";
50181
50181
 
package/dist/index.js CHANGED
@@ -43314,7 +43314,7 @@ class Player {
43314
43314
  }
43315
43315
  }
43316
43316
 
43317
- var version$1 = "2.25.5";
43317
+ var version$1 = "2.25.6";
43318
43318
 
43319
43319
  var packages = {
43320
43320
  "node_modules/@clappr/core": {
@@ -1,5 +1,5 @@
1
1
  import { UICorePlugin } from '@clappr/core';
2
- import '../../../assets/picture-in-picture/button.scss';
2
+ import '../../../assets/picture-in-picture/style.scss';
3
3
  /**
4
4
  * `PLUGIN` that enables picture in picture mode.
5
5
  * @beta
@@ -1 +1 @@
1
- {"version":3,"file":"PictureInPicture.d.ts","sourceRoot":"","sources":["../../../src/plugins/picture-in-picture/PictureInPicture.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAoB,MAAM,cAAc,CAAC;AAO9D,OAAO,gDAAgD,CAAC;AAOxD;;;;;;;;;GASG;AACH,qBAAa,gBAAiB,SAAQ,YAAY;IAChD;;OAEG;IACH,IAAI,IAAI,WAEP;IAED;;OAEG;IACH,IAAI,gBAAgB;;MAEnB;IAED;;OAEG;IACH,MAAM,KAAK,OAAO,WAEjB;IAED,OAAO,CAAC,MAAM,CAAC,cAAc,CAAwB;IAErD;;OAEG;IACH,IAAa,MAAM;;MAIlB;IAED,IAAa,UAAU;;MAItB;IAED,OAAO,KAAK,YAAY,GAEvB;IAED;;OAEG;IACM,UAAU;IAQnB,OAAO,CAAC,cAAc;IAStB;;OAEG;IACM,MAAM;IAef,OAAO,CAAC,sBAAsB;IAS9B,OAAO,CAAC,uBAAuB;IAO/B,OAAO,CAAC,oBAAoB;CAI7B"}
1
+ {"version":3,"file":"PictureInPicture.d.ts","sourceRoot":"","sources":["../../../src/plugins/picture-in-picture/PictureInPicture.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAoB,MAAM,cAAc,CAAC;AAO9D,OAAO,+CAA+C,CAAC;AAOvD;;;;;;;;;GASG;AACH,qBAAa,gBAAiB,SAAQ,YAAY;IAChD;;OAEG;IACH,IAAI,IAAI,WAEP;IAED;;OAEG;IACH,IAAI,gBAAgB;;MAEnB;IAED;;OAEG;IACH,MAAM,KAAK,OAAO,WAEjB;IAED,OAAO,CAAC,MAAM,CAAC,cAAc,CAAwB;IAErD;;OAEG;IACH,IAAa,MAAM;;MAIlB;IAED,IAAa,UAAU;;MAItB;IAED,OAAO,KAAK,YAAY,GAEvB;IAED;;OAEG;IACM,UAAU;IAQnB,OAAO,CAAC,cAAc;IAStB;;OAEG;IACM,MAAM;IAef,OAAO,CAAC,sBAAsB;IAS9B,OAAO,CAAC,uBAAuB;IAO/B,OAAO,CAAC,oBAAoB;CAI7B"}
@@ -3,7 +3,7 @@ import { trace } from '@gcorevideo/utils';
3
3
  import { CLAPPR_VERSION } from '../../build.js';
4
4
  import pipIcon from '../../../assets/icons/new/pip.svg';
5
5
  import buttonHtml from '../../../assets/picture-in-picture/button.ejs';
6
- import '../../../assets/picture-in-picture/button.scss';
6
+ import '../../../assets/picture-in-picture/style.scss';
7
7
  import assert from 'assert';
8
8
  const VERSION = '0.0.1';
9
9
  const T = `plugins.pip`;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gcorevideo/player",
3
- "version": "2.25.5",
3
+ "version": "2.25.6",
4
4
  "description": "Gcore JavaScript video player",
5
5
  "main": "dist/index.js",
6
6
  "type": "module",
@@ -5,7 +5,7 @@ import { CLAPPR_VERSION } from '../../build.js';
5
5
 
6
6
  import pipIcon from '../../../assets/icons/new/pip.svg';
7
7
  import buttonHtml from '../../../assets/picture-in-picture/button.ejs';
8
- import '../../../assets/picture-in-picture/button.scss';
8
+ import '../../../assets/picture-in-picture/style.scss';
9
9
  import assert from 'assert';
10
10
 
11
11
  const VERSION = '0.0.1';