@gcorevideo/player 2.28.29 → 2.28.35
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/core.js +1 -1
- package/dist/index.css +400 -400
- package/dist/index.embed.js +92 -74
- package/dist/index.js +150 -134
- package/docs/api/player.closedcaptionspluginsettings.md +1 -0
- package/docs/api/player.md +9 -0
- package/docs/api/player.mediacontrol.md +16 -0
- package/docs/api/player.thumbnails.md +1 -1
- package/lib/Player.d.ts.map +1 -1
- package/lib/plugins/media-control/MediaControl.d.ts +5 -6
- package/lib/plugins/media-control/MediaControl.d.ts.map +1 -1
- package/lib/plugins/media-control/MediaControl.js +40 -38
- package/lib/plugins/subtitles/ClosedCaptions.d.ts +6 -2
- package/lib/plugins/subtitles/ClosedCaptions.d.ts.map +1 -1
- package/lib/plugins/subtitles/ClosedCaptions.js +37 -23
- package/lib/plugins/utils/mobile.d.ts +2 -0
- package/lib/plugins/utils/mobile.d.ts.map +1 -0
- package/lib/plugins/utils/mobile.js +4 -0
- package/lib/testUtils.d.ts +1 -0
- package/lib/testUtils.d.ts.map +1 -1
- package/lib/testUtils.js +1 -0
- package/package.json +4 -1
- package/src/Player.ts +12 -12
- package/src/plugins/media-control/MediaControl.ts +45 -43
- package/src/plugins/media-control/__tests__/MediaControl.test.ts +63 -35
- package/src/plugins/subtitles/ClosedCaptions.ts +42 -28
- package/src/plugins/subtitles/__tests__/ClosedCaptions.test.ts +293 -6
- package/src/plugins/utils/mobile.ts +5 -0
- package/src/testUtils.ts +1 -0
- package/tsconfig.tsbuildinfo +1 -1
package/dist/index.embed.js
CHANGED
|
@@ -51660,23 +51660,9 @@ const FullscreenIOS = {
|
|
|
51660
51660
|
},
|
|
51661
51661
|
};
|
|
51662
51662
|
|
|
51663
|
-
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 .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.media-control-skin-1.w270 .media-control-dd__popup {\n max-width: 114px;\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.media-control-skin-1.w370 .media-control-dd__popup {\n max-width: 150px;\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-text-dim-color: #fffffe;\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]::before {\n content: \"|\";\n margin-right: 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 .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-scrubber[data-seekbar] {\n position: absolute;\n transform: translateX(-50%);\n top: 0;\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 svg {\n fill: var(--gplayer-mc-text-color);\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: 200px;\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-x: hidden;\n overflow-y: auto;\n padding: 5px 0;\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 a {\n display: block;\n text-decoration: none;\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\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: var(--gplayer-mc-text-color);\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}");
|
|
51664
|
-
|
|
51665
|
-
|
|
51666
|
-
|
|
51667
|
-
const playIcon = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <g clip-path=\"url(#clip0_28_1564)\">\n <path d=\"M6 3V20L19.3571 11.5L6 3Z\" fill=\"#C9C9C9\"/>\n </g>\n <defs>\n <clipPath id=\"clip0_28_1564\">\n <rect width=\"24\" height=\"24\" fill=\"white\"/>\n </clipPath>\n </defs>\n</svg>\n";
|
|
51668
|
-
|
|
51669
|
-
const pauseIcon = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M18.05 3H15.35C14.6057 3 14 3.6057 14 4.35V19.65C14 20.3943 14.6057 21 15.35 21H18.05C18.7943 21 19.4 20.3943 19.4 19.65V4.35C19.4 3.6057 18.7943 3 18.05 3ZM10.4 4.35V19.65C10.4 20.3943 9.7943 21 9.05 21H6.35C5.6057 21 5 20.3943 5 19.65V4.35C5 3.6057 5.6057 3 6.35 3H9.05C9.7943 3 10.4 3.6057 10.4 4.35Z\"\n fill=\"#C9C9C9\"/>\n</svg>\n";
|
|
51670
|
-
|
|
51671
|
-
const stopIcon = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" fill=\"#C9C9C9\" d=\"M4.568 3.86h14.9v16.28h-14.9z\"/>\n</svg>\n";
|
|
51672
|
-
|
|
51673
|
-
const volumeMaxIcon = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M14.187 7.71405C13.759 8.06405 13.697 8.69307 14.046 9.12107C14.662 9.87207 15 10.8941 15 11.9961C15 13.0991 14.662 14.1201 14.046 14.8711C13.697 15.2991 13.759 15.9291 14.187 16.2781C14.373 16.4311 14.597 16.5051 14.82 16.5051C15.109 16.5051 15.396 16.3801 15.594 16.1391C16.501 15.0301 17 13.5601 17 11.9961C17 10.4331 16.501 8.96207 15.594 7.85407C15.245 7.42707 14.614 7.36405 14.187 7.71405ZM19.772 5.14408C19.443 4.70008 18.816 4.60907 18.374 4.94007C17.931 5.27007 17.839 5.89605 18.169 6.33905C19.367 7.94705 20 9.90307 20 11.9961C20 14.0891 19.367 16.0451 18.169 17.6531C17.839 18.0971 17.931 18.7231 18.374 19.0531C18.553 19.1871 18.762 19.2511 18.97 19.2511C19.275 19.2511 19.576 19.1121 19.772 18.8491C21.23 16.8921 22 14.5231 22 11.9961C22 9.47007 21.23 7.10108 19.772 5.14408ZM12 3.85108V20.1421C12 20.4881 11.793 20.7971 11.473 20.9291C11.368 20.9721 11.258 20.9921 11.149 20.9921C10.926 20.9921 10.708 20.9031 10.544 20.7371L6.317 16.4431C6.038 16.1591 5.648 15.9961 5.249 15.9961H3.5C2.673 15.9961 2 15.3231 2 14.4961V9.49607C2 8.66907 2.673 7.99607 3.5 7.99607H5.249C5.648 7.99607 6.038 7.83308 6.317 7.54908L10.544 3.25507C10.787 3.00807 11.151 2.93206 11.473 3.06406C11.793 3.19506 12 3.50408 12 3.85108Z\"\n fill=\"#C9C9C9\"/>\n</svg>\n";
|
|
51674
|
-
|
|
51675
|
-
const volumeMuteIcon = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M5.50025 8.00025C4.67125 8.00025 4.00025 8.67225 4.00025 9.50025V14.5003C4.00025 15.3283 4.67125 16.0003 5.50025 16.0003H7.24824C7.65024 16.0003 8.03627 16.1613 8.31727 16.4483L12.5443 20.7413C12.7083 20.9073 12.9262 20.9963 13.1492 20.9963C13.2572 20.9963 13.3672 20.9763 13.4722 20.9333C13.7932 20.8013 14.0003 20.4923 14.0003 20.1462V16.3283C14.0003 16.1963 13.9473 16.0683 13.8543 15.9753L6.02528 8.14625C5.93228 8.05325 5.80425 8.00025 5.67225 8.00025H5.50025ZM14.0003 3.85426C14.0003 3.50826 13.7932 3.19927 13.4722 3.06727C13.1502 2.93627 12.7873 3.01226 12.5443 3.25926L9.33827 6.51527C9.14627 6.71127 9.14626 7.02625 9.34126 7.22025L13.5733 11.4522C13.7313 11.6102 14.0003 11.4982 14.0003 11.2752V3.85426ZM20.8543 20.8543C20.7563 20.9513 20.6283 21.0003 20.5003 21.0003C20.3723 21.0003 20.2442 20.9513 20.1462 20.8543L3.14625 3.85426C2.95125 3.65826 2.95125 3.34225 3.14625 3.14625C3.34225 2.95125 3.65826 2.95125 3.85426 3.14625L20.8543 20.1462C21.0493 20.3422 21.0493 20.6583 20.8543 20.8543Z\"\n fill=\"#C9C9C9\"/>\n</svg>\n";
|
|
51676
|
-
|
|
51677
|
-
const fullscreenOffIcon = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M17.1999 4.85023H21.1498V8.80019C21.1498 9.0786 21.2604 9.34577 21.4574 9.54268C21.6283 9.71365 21.8523 9.81956 22.0906 9.84449L22.0965 9.85041H22.2001C22.4785 9.85041 22.7456 9.73981 22.9426 9.5429C23.1395 9.346 23.2501 9.07883 23.2501 8.80042V3.80024C23.2501 3.52182 23.1395 3.25465 22.9426 3.05775L22.7658 3.23453L22.9426 3.05775C22.7456 2.86085 22.4785 2.75024 22.2001 2.75024H17.1999C16.8247 2.75024 16.478 2.95039 16.2905 3.27526C16.103 3.6001 16.103 4.00037 16.2905 4.32521C16.478 4.65009 16.8247 4.85023 17.1999 4.85023Z\"\n fill=\"#C9C9C9\" stroke=\"#C9C9C9\" stroke-width=\"0.5\"/>\n <path\n d=\"M1.79999 9.85017H1.90368L1.90961 9.84423C2.14785 9.81928 2.37176 9.71338 2.54271 9.54243C2.73961 9.34553 2.85021 9.07836 2.85021 8.79995V4.84999H6.80017C7.17536 4.84999 7.52201 4.64984 7.70953 4.32497C7.89703 4.00013 7.89703 3.59986 7.70953 3.27502C7.52201 2.95014 7.17537 2.75 6.80017 2.75H1.79999C1.52158 2.75 1.25441 2.8606 1.05751 3.05751C0.860605 3.25441 0.75 3.52158 0.75 3.79999V8.80017C0.75 9.07859 0.860605 9.34576 1.05751 9.54266C1.25441 9.73956 1.52158 9.85017 1.79999 9.85017Z\"\n fill=\"#C9C9C9\" stroke=\"#C9C9C9\" stroke-width=\"0.5\"/>\n <path\n d=\"M21.1496 18.7498H17.1996C16.8245 18.7498 16.4778 18.95 16.2903 19.2748C16.1028 19.5997 16.1028 19.9999 16.2903 20.3248C16.4778 20.6497 16.8244 20.8498 17.1996 20.8498H21.5963L21.596 20.85H22.1996C22.478 20.85 22.7452 20.7394 22.9421 20.5425C23.139 20.3456 23.2496 20.0785 23.2496 19.8V14.7999C23.2496 14.4247 23.0494 14.078 22.7246 13.8905C22.3997 13.703 21.9995 13.703 21.6746 13.8905C21.3497 14.078 21.1496 14.4247 21.1496 14.7999V18.7498Z\"\n fill=\"#C9C9C9\" stroke=\"#C9C9C9\" stroke-width=\"0.5\"/>\n <path\n d=\"M2.85003 18.7498H6.79999C7.17518 18.7498 7.52183 18.95 7.70935 19.2748C7.89685 19.5997 7.89685 19.9999 7.70935 20.3248C7.52183 20.6497 7.17519 20.8498 6.79999 20.8498H2.40337L2.40359 20.85H1.80004C1.52163 20.85 1.25446 20.7394 1.05756 20.5425C0.860653 20.3456 0.750049 20.0785 0.750049 19.8V14.7999C0.750049 14.4247 0.950194 14.078 1.27507 13.8905C1.5999 13.703 2.00018 13.703 2.32501 13.8905C2.64989 14.078 2.85003 14.4247 2.85003 14.7999V18.7498Z\"\n fill=\"#C9C9C9\" stroke=\"#C9C9C9\" stroke-width=\"0.5\"/>\n</svg>\n";
|
|
51678
|
-
|
|
51679
|
-
const fullscreenOnIcon = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M15.1568 23.15C15.7408 23.15 16.2142 22.6766 16.2142 22.0926V17.1947C16.2142 16.7253 16.5948 16.3447 17.0642 16.3447H21.9621C22.5461 16.3447 23.0195 15.8713 23.0195 15.2873C23.0195 14.7034 22.5461 14.2299 21.9621 14.2299H16.0642C14.9832 14.2299 14.0995 15.1137 14.0995 16.1947V22.0926C14.0995 22.6766 14.5729 23.15 15.1568 23.15Z\"\n fill=\"#C9C9C9\" stroke=\"#C9C9C9\" stroke-width=\"0.3\"/>\n <path\n d=\"M1.90739 10.7701H7.80528C8.88627 10.7701 9.77006 9.88627 9.77006 8.80528V2.90739C9.77006 2.32341 9.29665 1.85 8.71267 1.85C8.12869 1.85 7.65528 2.32341 7.65528 2.90739V7.80528C7.65528 8.27472 7.27472 8.65528 6.80528 8.65528H1.90739C1.32341 8.65528 0.85 9.12869 0.85 9.71267C0.85 10.2966 1.32341 10.7701 1.90739 10.7701Z\"\n fill=\"#C9C9C9\" stroke=\"#C9C9C9\" stroke-width=\"0.3\"/>\n <path\n d=\"M8.71261 23.15C9.29659 23.15 9.77 22.6766 9.77 22.0926V16.1947C9.77 15.1137 8.88621 14.2299 7.80521 14.2299H1.90733C1.32335 14.2299 0.849939 14.7034 0.849939 15.2873C0.849939 15.8713 1.32335 16.3447 1.90733 16.3447H6.80521C7.27466 16.3447 7.65521 16.7253 7.65521 17.1947V22.0926C7.65521 22.6766 8.12862 23.15 8.71261 23.15Z\"\n fill=\"#C9C9C9\" stroke=\"#C9C9C9\" stroke-width=\"0.3\"/>\n <path\n d=\"M21.9621 10.7701C22.5461 10.7701 23.0195 10.2966 23.0195 9.71267C23.0195 9.12869 22.5461 8.65528 21.9621 8.65528H17.0642C16.5948 8.65528 16.2142 8.27472 16.2142 7.80528V2.90739C16.2142 2.32341 15.7408 1.85 15.1568 1.85C14.5729 1.85 14.0995 2.32341 14.0995 2.90739V8.80528C14.0995 9.88627 14.9832 10.7701 16.0642 10.7701H21.9621Z\"\n fill=\"#C9C9C9\" stroke=\"#C9C9C9\" stroke-width=\"0.3\"/>\n</svg>\n";
|
|
51663
|
+
function isMobile() {
|
|
51664
|
+
return Browser.isMobile;
|
|
51665
|
+
}
|
|
51680
51666
|
|
|
51681
51667
|
/**
|
|
51682
51668
|
*
|
|
@@ -51718,6 +51704,24 @@ function mediaControlClickaway(callback) {
|
|
|
51718
51704
|
};
|
|
51719
51705
|
}
|
|
51720
51706
|
|
|
51707
|
+
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 .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.media-control-skin-1.w270 .media-control-dd__popup {\n max-width: 114px;\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.media-control-skin-1.w370 .media-control-dd__popup {\n max-width: 150px;\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-text-dim-color: #fffffe;\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]::before {\n content: \"|\";\n margin-right: 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 .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-scrubber[data-seekbar] {\n position: absolute;\n transform: translateX(-50%);\n top: 0;\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 svg {\n fill: var(--gplayer-mc-text-color);\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: 200px;\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-x: hidden;\n overflow-y: auto;\n padding: 5px 0;\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 a {\n display: block;\n text-decoration: none;\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\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: var(--gplayer-mc-text-color);\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}");
|
|
51708
|
+
|
|
51709
|
+
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 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 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";
|
|
51710
|
+
|
|
51711
|
+
const playIcon = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <g clip-path=\"url(#clip0_28_1564)\">\n <path d=\"M6 3V20L19.3571 11.5L6 3Z\" fill=\"#C9C9C9\"/>\n </g>\n <defs>\n <clipPath id=\"clip0_28_1564\">\n <rect width=\"24\" height=\"24\" fill=\"white\"/>\n </clipPath>\n </defs>\n</svg>\n";
|
|
51712
|
+
|
|
51713
|
+
const pauseIcon = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M18.05 3H15.35C14.6057 3 14 3.6057 14 4.35V19.65C14 20.3943 14.6057 21 15.35 21H18.05C18.7943 21 19.4 20.3943 19.4 19.65V4.35C19.4 3.6057 18.7943 3 18.05 3ZM10.4 4.35V19.65C10.4 20.3943 9.7943 21 9.05 21H6.35C5.6057 21 5 20.3943 5 19.65V4.35C5 3.6057 5.6057 3 6.35 3H9.05C9.7943 3 10.4 3.6057 10.4 4.35Z\"\n fill=\"#C9C9C9\"/>\n</svg>\n";
|
|
51714
|
+
|
|
51715
|
+
const stopIcon = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" fill=\"#C9C9C9\" d=\"M4.568 3.86h14.9v16.28h-14.9z\"/>\n</svg>\n";
|
|
51716
|
+
|
|
51717
|
+
const volumeMaxIcon = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M14.187 7.71405C13.759 8.06405 13.697 8.69307 14.046 9.12107C14.662 9.87207 15 10.8941 15 11.9961C15 13.0991 14.662 14.1201 14.046 14.8711C13.697 15.2991 13.759 15.9291 14.187 16.2781C14.373 16.4311 14.597 16.5051 14.82 16.5051C15.109 16.5051 15.396 16.3801 15.594 16.1391C16.501 15.0301 17 13.5601 17 11.9961C17 10.4331 16.501 8.96207 15.594 7.85407C15.245 7.42707 14.614 7.36405 14.187 7.71405ZM19.772 5.14408C19.443 4.70008 18.816 4.60907 18.374 4.94007C17.931 5.27007 17.839 5.89605 18.169 6.33905C19.367 7.94705 20 9.90307 20 11.9961C20 14.0891 19.367 16.0451 18.169 17.6531C17.839 18.0971 17.931 18.7231 18.374 19.0531C18.553 19.1871 18.762 19.2511 18.97 19.2511C19.275 19.2511 19.576 19.1121 19.772 18.8491C21.23 16.8921 22 14.5231 22 11.9961C22 9.47007 21.23 7.10108 19.772 5.14408ZM12 3.85108V20.1421C12 20.4881 11.793 20.7971 11.473 20.9291C11.368 20.9721 11.258 20.9921 11.149 20.9921C10.926 20.9921 10.708 20.9031 10.544 20.7371L6.317 16.4431C6.038 16.1591 5.648 15.9961 5.249 15.9961H3.5C2.673 15.9961 2 15.3231 2 14.4961V9.49607C2 8.66907 2.673 7.99607 3.5 7.99607H5.249C5.648 7.99607 6.038 7.83308 6.317 7.54908L10.544 3.25507C10.787 3.00807 11.151 2.93206 11.473 3.06406C11.793 3.19506 12 3.50408 12 3.85108Z\"\n fill=\"#C9C9C9\"/>\n</svg>\n";
|
|
51718
|
+
|
|
51719
|
+
const volumeMuteIcon = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M5.50025 8.00025C4.67125 8.00025 4.00025 8.67225 4.00025 9.50025V14.5003C4.00025 15.3283 4.67125 16.0003 5.50025 16.0003H7.24824C7.65024 16.0003 8.03627 16.1613 8.31727 16.4483L12.5443 20.7413C12.7083 20.9073 12.9262 20.9963 13.1492 20.9963C13.2572 20.9963 13.3672 20.9763 13.4722 20.9333C13.7932 20.8013 14.0003 20.4923 14.0003 20.1462V16.3283C14.0003 16.1963 13.9473 16.0683 13.8543 15.9753L6.02528 8.14625C5.93228 8.05325 5.80425 8.00025 5.67225 8.00025H5.50025ZM14.0003 3.85426C14.0003 3.50826 13.7932 3.19927 13.4722 3.06727C13.1502 2.93627 12.7873 3.01226 12.5443 3.25926L9.33827 6.51527C9.14627 6.71127 9.14626 7.02625 9.34126 7.22025L13.5733 11.4522C13.7313 11.6102 14.0003 11.4982 14.0003 11.2752V3.85426ZM20.8543 20.8543C20.7563 20.9513 20.6283 21.0003 20.5003 21.0003C20.3723 21.0003 20.2442 20.9513 20.1462 20.8543L3.14625 3.85426C2.95125 3.65826 2.95125 3.34225 3.14625 3.14625C3.34225 2.95125 3.65826 2.95125 3.85426 3.14625L20.8543 20.1462C21.0493 20.3422 21.0493 20.6583 20.8543 20.8543Z\"\n fill=\"#C9C9C9\"/>\n</svg>\n";
|
|
51720
|
+
|
|
51721
|
+
const fullscreenOffIcon = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M17.1999 4.85023H21.1498V8.80019C21.1498 9.0786 21.2604 9.34577 21.4574 9.54268C21.6283 9.71365 21.8523 9.81956 22.0906 9.84449L22.0965 9.85041H22.2001C22.4785 9.85041 22.7456 9.73981 22.9426 9.5429C23.1395 9.346 23.2501 9.07883 23.2501 8.80042V3.80024C23.2501 3.52182 23.1395 3.25465 22.9426 3.05775L22.7658 3.23453L22.9426 3.05775C22.7456 2.86085 22.4785 2.75024 22.2001 2.75024H17.1999C16.8247 2.75024 16.478 2.95039 16.2905 3.27526C16.103 3.6001 16.103 4.00037 16.2905 4.32521C16.478 4.65009 16.8247 4.85023 17.1999 4.85023Z\"\n fill=\"#C9C9C9\" stroke=\"#C9C9C9\" stroke-width=\"0.5\"/>\n <path\n d=\"M1.79999 9.85017H1.90368L1.90961 9.84423C2.14785 9.81928 2.37176 9.71338 2.54271 9.54243C2.73961 9.34553 2.85021 9.07836 2.85021 8.79995V4.84999H6.80017C7.17536 4.84999 7.52201 4.64984 7.70953 4.32497C7.89703 4.00013 7.89703 3.59986 7.70953 3.27502C7.52201 2.95014 7.17537 2.75 6.80017 2.75H1.79999C1.52158 2.75 1.25441 2.8606 1.05751 3.05751C0.860605 3.25441 0.75 3.52158 0.75 3.79999V8.80017C0.75 9.07859 0.860605 9.34576 1.05751 9.54266C1.25441 9.73956 1.52158 9.85017 1.79999 9.85017Z\"\n fill=\"#C9C9C9\" stroke=\"#C9C9C9\" stroke-width=\"0.5\"/>\n <path\n d=\"M21.1496 18.7498H17.1996C16.8245 18.7498 16.4778 18.95 16.2903 19.2748C16.1028 19.5997 16.1028 19.9999 16.2903 20.3248C16.4778 20.6497 16.8244 20.8498 17.1996 20.8498H21.5963L21.596 20.85H22.1996C22.478 20.85 22.7452 20.7394 22.9421 20.5425C23.139 20.3456 23.2496 20.0785 23.2496 19.8V14.7999C23.2496 14.4247 23.0494 14.078 22.7246 13.8905C22.3997 13.703 21.9995 13.703 21.6746 13.8905C21.3497 14.078 21.1496 14.4247 21.1496 14.7999V18.7498Z\"\n fill=\"#C9C9C9\" stroke=\"#C9C9C9\" stroke-width=\"0.5\"/>\n <path\n d=\"M2.85003 18.7498H6.79999C7.17518 18.7498 7.52183 18.95 7.70935 19.2748C7.89685 19.5997 7.89685 19.9999 7.70935 20.3248C7.52183 20.6497 7.17519 20.8498 6.79999 20.8498H2.40337L2.40359 20.85H1.80004C1.52163 20.85 1.25446 20.7394 1.05756 20.5425C0.860653 20.3456 0.750049 20.0785 0.750049 19.8V14.7999C0.750049 14.4247 0.950194 14.078 1.27507 13.8905C1.5999 13.703 2.00018 13.703 2.32501 13.8905C2.64989 14.078 2.85003 14.4247 2.85003 14.7999V18.7498Z\"\n fill=\"#C9C9C9\" stroke=\"#C9C9C9\" stroke-width=\"0.5\"/>\n</svg>\n";
|
|
51722
|
+
|
|
51723
|
+
const fullscreenOnIcon = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M15.1568 23.15C15.7408 23.15 16.2142 22.6766 16.2142 22.0926V17.1947C16.2142 16.7253 16.5948 16.3447 17.0642 16.3447H21.9621C22.5461 16.3447 23.0195 15.8713 23.0195 15.2873C23.0195 14.7034 22.5461 14.2299 21.9621 14.2299H16.0642C14.9832 14.2299 14.0995 15.1137 14.0995 16.1947V22.0926C14.0995 22.6766 14.5729 23.15 15.1568 23.15Z\"\n fill=\"#C9C9C9\" stroke=\"#C9C9C9\" stroke-width=\"0.3\"/>\n <path\n d=\"M1.90739 10.7701H7.80528C8.88627 10.7701 9.77006 9.88627 9.77006 8.80528V2.90739C9.77006 2.32341 9.29665 1.85 8.71267 1.85C8.12869 1.85 7.65528 2.32341 7.65528 2.90739V7.80528C7.65528 8.27472 7.27472 8.65528 6.80528 8.65528H1.90739C1.32341 8.65528 0.85 9.12869 0.85 9.71267C0.85 10.2966 1.32341 10.7701 1.90739 10.7701Z\"\n fill=\"#C9C9C9\" stroke=\"#C9C9C9\" stroke-width=\"0.3\"/>\n <path\n d=\"M8.71261 23.15C9.29659 23.15 9.77 22.6766 9.77 22.0926V16.1947C9.77 15.1137 8.88621 14.2299 7.80521 14.2299H1.90733C1.32335 14.2299 0.849939 14.7034 0.849939 15.2873C0.849939 15.8713 1.32335 16.3447 1.90733 16.3447H6.80521C7.27466 16.3447 7.65521 16.7253 7.65521 17.1947V22.0926C7.65521 22.6766 8.12862 23.15 8.71261 23.15Z\"\n fill=\"#C9C9C9\" stroke=\"#C9C9C9\" stroke-width=\"0.3\"/>\n <path\n d=\"M21.9621 10.7701C22.5461 10.7701 23.0195 10.2966 23.0195 9.71267C23.0195 9.12869 22.5461 8.65528 21.9621 8.65528H17.0642C16.5948 8.65528 16.2142 8.27472 16.2142 7.80528V2.90739C16.2142 2.32341 15.7408 1.85 15.1568 1.85C14.5729 1.85 14.0995 2.32341 14.0995 2.90739V8.80528C14.0995 9.88627 14.9832 10.7701 16.0642 10.7701H21.9621Z\"\n fill=\"#C9C9C9\" stroke=\"#C9C9C9\" stroke-width=\"0.3\"/>\n</svg>\n";
|
|
51724
|
+
|
|
51721
51725
|
// This is a derived work from the {@link https://github.com/clappr/clappr-plugins/tree/ffaa9d27005fa5a8a7c243ffc47eb5655b84b371/src/plugins/media_control | Clappr MediaControl plugin}
|
|
51722
51726
|
// It is redistributed under the terms of the {@link ../../../../../LICENSE | Apache 2.0} license.
|
|
51723
51727
|
// Copyright 2014 Globo.com Player authors. All rights reserved.
|
|
@@ -51933,8 +51937,6 @@ class MediaControl extends UICorePlugin {
|
|
|
51933
51937
|
'touchmove .bar-container[data-seekbar]': 'mousemoveOnSeekBar',
|
|
51934
51938
|
'mouseleave .bar-container[data-seekbar]': 'mouseleaveOnSeekBar',
|
|
51935
51939
|
'touchend .bar-container[data-seekbar]': 'mouseleaveOnSeekBar',
|
|
51936
|
-
'mouseenter .media-control-layer[data-controls]': 'setUserKeepVisible',
|
|
51937
|
-
'mouseleave .media-control-layer[data-controls]': 'resetUserKeepVisible',
|
|
51938
51940
|
};
|
|
51939
51941
|
}
|
|
51940
51942
|
get currentSeekPos() {
|
|
@@ -52016,7 +52018,6 @@ class MediaControl extends UICorePlugin {
|
|
|
52016
52018
|
this.listenTo(this.core.activeContainer, Events$1.CONTAINER_PAUSE, this.changeTogglePlay);
|
|
52017
52019
|
this.listenTo(this.core.activeContainer, Events$1.CONTAINER_STOP, this.changeTogglePlay);
|
|
52018
52020
|
this.listenTo(this.core.activeContainer, Events$1.CONTAINER_DBLCLICK, this.toggleFullscreen);
|
|
52019
|
-
this.listenTo(this.core.activeContainer, Events$1.CONTAINER_CLICK, () => this.clickaway(this.core.activeContainer.$el[0]));
|
|
52020
52021
|
this.listenTo(this.core.activeContainer, Events$1.CONTAINER_TIMEUPDATE, this.onTimeUpdate);
|
|
52021
52022
|
this.listenTo(this.core.activeContainer, Events$1.CONTAINER_PROGRESS, this.updateProgressBar);
|
|
52022
52023
|
this.listenTo(this.core.activeContainer, Events$1.CONTAINER_SETTINGSUPDATE, this.updateSettings);
|
|
@@ -52030,12 +52031,10 @@ class MediaControl extends UICorePlugin {
|
|
|
52030
52031
|
this.listenTo(this.core.activeContainer, Events$1.CONTAINER_LOADEDMETADATA, this.onLoadedMetadata);
|
|
52031
52032
|
this.listenTo(this.core, Events$1.CONTAINER_DESTROYED, () => {
|
|
52032
52033
|
this.cancelRenderTimer();
|
|
52034
|
+
this.setKeepVisible(false);
|
|
52033
52035
|
});
|
|
52034
52036
|
this.listenTo(this.core.activeContainer, Events$1.CONTAINER_MOUSE_ENTER, this.show);
|
|
52035
52037
|
this.listenTo(this.core.activeContainer, Events$1.CONTAINER_MOUSE_LEAVE, this.delayHide);
|
|
52036
|
-
this.listenTo(this.core.activeContainer, Events$1.CONTAINER_DESTROYED, () => {
|
|
52037
|
-
this.clickaway(null);
|
|
52038
|
-
});
|
|
52039
52038
|
}
|
|
52040
52039
|
/**
|
|
52041
52040
|
* Hides the media control UI
|
|
@@ -52166,7 +52165,7 @@ class MediaControl extends UICorePlugin {
|
|
|
52166
52165
|
this.$playPauseToggle?.append(playIcon);
|
|
52167
52166
|
this.$playStopToggle?.append(playIcon);
|
|
52168
52167
|
this.trigger(Events$1.MEDIACONTROL_NOTPLAYING);
|
|
52169
|
-
if (
|
|
52168
|
+
if (isMobile()) {
|
|
52170
52169
|
this.show();
|
|
52171
52170
|
}
|
|
52172
52171
|
}
|
|
@@ -52216,7 +52215,7 @@ class MediaControl extends UICorePlugin {
|
|
|
52216
52215
|
if (skinWidth <= 370 || this.options.hideVolumeBar) {
|
|
52217
52216
|
this.$el.addClass('w370');
|
|
52218
52217
|
}
|
|
52219
|
-
if (skinWidth <= 270 && !
|
|
52218
|
+
if (skinWidth <= 270 && !isMobile()) {
|
|
52220
52219
|
this.verticalVolume = true;
|
|
52221
52220
|
this.$el.addClass('w270');
|
|
52222
52221
|
}
|
|
@@ -52228,6 +52227,15 @@ class MediaControl extends UICorePlugin {
|
|
|
52228
52227
|
this.container.isPlaying() ? this.container.pause() : this.container.play();
|
|
52229
52228
|
return false;
|
|
52230
52229
|
}
|
|
52230
|
+
play() {
|
|
52231
|
+
this.container && this.container.play();
|
|
52232
|
+
}
|
|
52233
|
+
pause() {
|
|
52234
|
+
this.container && this.container.pause();
|
|
52235
|
+
}
|
|
52236
|
+
stop() {
|
|
52237
|
+
this.container && this.container.stop();
|
|
52238
|
+
}
|
|
52231
52239
|
togglePlayStop() {
|
|
52232
52240
|
this.container.isPlaying()
|
|
52233
52241
|
? this.container.stop({ ui: true })
|
|
@@ -52328,11 +52336,11 @@ class MediaControl extends UICorePlugin {
|
|
|
52328
52336
|
}
|
|
52329
52337
|
}
|
|
52330
52338
|
toggleFullscreen() {
|
|
52331
|
-
if (!
|
|
52339
|
+
if (!isMobile()) {
|
|
52332
52340
|
this.trigger(Events$1.MEDIACONTROL_FULLSCREEN, this.name);
|
|
52333
52341
|
this.core.activeContainer.fullscreen();
|
|
52334
52342
|
this.core.toggleFullscreen();
|
|
52335
|
-
this.resetUserKeepVisible()
|
|
52343
|
+
// this.resetUserKeepVisible()
|
|
52336
52344
|
}
|
|
52337
52345
|
}
|
|
52338
52346
|
onActiveContainerChanged() {
|
|
@@ -52453,13 +52461,6 @@ class MediaControl extends UICorePlugin {
|
|
|
52453
52461
|
this.core.activeContainer && this.core.activeContainer.seekPercentage(pos);
|
|
52454
52462
|
this.setSeekPercentage(pos);
|
|
52455
52463
|
}
|
|
52456
|
-
setUserKeepVisible(e) {
|
|
52457
|
-
this.userKeepVisible = true;
|
|
52458
|
-
this.clickaway(this.core.activeContainer.$el[0]);
|
|
52459
|
-
}
|
|
52460
|
-
resetUserKeepVisible = (e) => {
|
|
52461
|
-
this.userKeepVisible = false;
|
|
52462
|
-
};
|
|
52463
52464
|
isVisible() {
|
|
52464
52465
|
return !this.$el.hasClass('media-control-hide');
|
|
52465
52466
|
}
|
|
@@ -52467,7 +52468,6 @@ class MediaControl extends UICorePlugin {
|
|
|
52467
52468
|
if (this.disabled || this.options.disableControlPanel) {
|
|
52468
52469
|
return;
|
|
52469
52470
|
}
|
|
52470
|
-
const timeout = DEFAULT_HIDE_DELAY;
|
|
52471
52471
|
const mousePointerMoved = event &&
|
|
52472
52472
|
event.clientX !== this.lastMouseX &&
|
|
52473
52473
|
event.clientY !== this.lastMouseY;
|
|
@@ -52476,26 +52476,25 @@ class MediaControl extends UICorePlugin {
|
|
|
52476
52476
|
clearTimeout(this.hideId);
|
|
52477
52477
|
this.hideId = null;
|
|
52478
52478
|
}
|
|
52479
|
+
this.hideId = setTimeout(() => this.hide(), DEFAULT_HIDE_DELAY);
|
|
52479
52480
|
this.$el.show();
|
|
52480
52481
|
this.trigger(Events$1.MEDIACONTROL_SHOW, this.name);
|
|
52481
52482
|
this.core.activeContainer?.trigger(Events$1.CONTAINER_MEDIACONTROL_SHOW, this.name);
|
|
52482
52483
|
this.$el.removeClass('media-control-hide');
|
|
52483
|
-
this.hideId = setTimeout(() => this.hide(), timeout);
|
|
52484
52484
|
if (event) {
|
|
52485
52485
|
this.lastMouseX = event.clientX;
|
|
52486
52486
|
this.lastMouseY = event.clientY;
|
|
52487
52487
|
}
|
|
52488
52488
|
}
|
|
52489
|
-
|
|
52490
|
-
this.updateCursorStyle(showing);
|
|
52489
|
+
this.updateCursorStyle(true);
|
|
52491
52490
|
}
|
|
52492
52491
|
hide(delay = 0) {
|
|
52493
52492
|
if (!this.isVisible()) {
|
|
52494
52493
|
return;
|
|
52495
52494
|
}
|
|
52496
|
-
const timeout = delay || 2000;
|
|
52497
52495
|
if (this.hideId !== null) {
|
|
52498
52496
|
clearTimeout(this.hideId);
|
|
52497
|
+
this.hideId = null;
|
|
52499
52498
|
}
|
|
52500
52499
|
if (!this.disabled && this.options.hideMediaControl === false) {
|
|
52501
52500
|
return;
|
|
@@ -52504,7 +52503,7 @@ class MediaControl extends UICorePlugin {
|
|
|
52504
52503
|
const hasDraggingAction = this.draggingSeekBar || this.draggingVolumeBar;
|
|
52505
52504
|
if (!this.disabled &&
|
|
52506
52505
|
(delay || hasKeepVisibleRequested || hasDraggingAction)) {
|
|
52507
|
-
this.hideId = setTimeout(() => this.hide(),
|
|
52506
|
+
this.hideId = setTimeout(() => this.hide(), delay || 2000);
|
|
52508
52507
|
}
|
|
52509
52508
|
else {
|
|
52510
52509
|
if (!this.options.controlsDontHide || isFullscreen(this.container.el)) {
|
|
@@ -52639,19 +52638,13 @@ class MediaControl extends UICorePlugin {
|
|
|
52639
52638
|
/**
|
|
52640
52639
|
* Set or reset the keep visibility state
|
|
52641
52640
|
*
|
|
52642
|
-
* Keep visibility state controls whether the media control is hidden automatically after a delay.
|
|
52643
|
-
* Keep visibility prevents the the auto-hide behaviour
|
|
52641
|
+
* Keep visibility state controls whether the media control is hidden automatically after a delay, which is a default behaviour.
|
|
52644
52642
|
*
|
|
52645
52643
|
* @param keepVisible - The state
|
|
52646
52644
|
*/
|
|
52647
52645
|
setKeepVisible(keepVisible) {
|
|
52648
52646
|
this.keepVisible = keepVisible;
|
|
52649
|
-
|
|
52650
|
-
this.clickaway(this.core.activeContainer.$el[0]);
|
|
52651
|
-
}
|
|
52652
|
-
else {
|
|
52653
|
-
this.clickaway(null);
|
|
52654
|
-
}
|
|
52647
|
+
this.clickaway(keepVisible ? this.core.activeContainer.$el[0] : null);
|
|
52655
52648
|
}
|
|
52656
52649
|
getMountParent(name) {
|
|
52657
52650
|
switch (name) {
|
|
@@ -52732,7 +52725,7 @@ class MediaControl extends UICorePlugin {
|
|
|
52732
52725
|
});
|
|
52733
52726
|
}
|
|
52734
52727
|
bindKeyEvents() {
|
|
52735
|
-
if (
|
|
52728
|
+
if (isMobile() || this.options.disableKeyboardShortcuts) {
|
|
52736
52729
|
return;
|
|
52737
52730
|
}
|
|
52738
52731
|
this.unbindKeyEvents();
|
|
@@ -52819,6 +52812,7 @@ class MediaControl extends UICorePlugin {
|
|
|
52819
52812
|
* @internal
|
|
52820
52813
|
*/
|
|
52821
52814
|
destroy() {
|
|
52815
|
+
this.cancelTimers();
|
|
52822
52816
|
this.cancelRenderTimer();
|
|
52823
52817
|
$(document).unbind('mouseup', this.stopDrag);
|
|
52824
52818
|
$(document).unbind('mousemove', this.updateDrag);
|
|
@@ -52827,6 +52821,17 @@ class MediaControl extends UICorePlugin {
|
|
|
52827
52821
|
this.unbindKeyEvents();
|
|
52828
52822
|
return super.destroy();
|
|
52829
52823
|
}
|
|
52824
|
+
cancelTimers() {
|
|
52825
|
+
if (this.hideId !== null) {
|
|
52826
|
+
clearTimeout(this.hideId);
|
|
52827
|
+
this.hideId = null;
|
|
52828
|
+
}
|
|
52829
|
+
if (this.hideVolumeId !== null) {
|
|
52830
|
+
clearTimeout(this.hideVolumeId);
|
|
52831
|
+
this.hideVolumeId = null;
|
|
52832
|
+
}
|
|
52833
|
+
this.cancelRenderTimer();
|
|
52834
|
+
}
|
|
52830
52835
|
cancelRenderTimer() {
|
|
52831
52836
|
if (this.renderTimerId) {
|
|
52832
52837
|
clearTimeout(this.renderTimerId);
|
|
@@ -52856,7 +52861,7 @@ class MediaControl extends UICorePlugin {
|
|
|
52856
52861
|
}
|
|
52857
52862
|
// Video volume cannot be changed with Safari on mobile devices
|
|
52858
52863
|
// Display mute/unmute icon only if Safari version >= 10
|
|
52859
|
-
if (Browser.isSafari &&
|
|
52864
|
+
if (Browser.isSafari && isMobile()) {
|
|
52860
52865
|
if (Browser.version < 10) {
|
|
52861
52866
|
this.$volumeContainer?.css({ display: 'none' });
|
|
52862
52867
|
}
|
|
@@ -52873,7 +52878,7 @@ class MediaControl extends UICorePlugin {
|
|
|
52873
52878
|
setTimeout(() => {
|
|
52874
52879
|
!this.settings.seekEnabled &&
|
|
52875
52880
|
this.$seekBarContainer?.addClass('seek-disabled');
|
|
52876
|
-
!
|
|
52881
|
+
!isMobile() &&
|
|
52877
52882
|
!this.options.disableKeyboardShortcuts &&
|
|
52878
52883
|
this.bindKeyEvents();
|
|
52879
52884
|
this.playerResize({
|
|
@@ -52897,6 +52902,7 @@ class MediaControl extends UICorePlugin {
|
|
|
52897
52902
|
this.container.fullscreen();
|
|
52898
52903
|
// TODO: fix after it full screen will be fixed on iOS
|
|
52899
52904
|
if (Browser.isiOS) {
|
|
52905
|
+
// TODO use isFullscreen utility function
|
|
52900
52906
|
if (this.core.isFullscreen()) {
|
|
52901
52907
|
Fullscreen.cancelFullscreen(this.core.el);
|
|
52902
52908
|
}
|
|
@@ -52907,7 +52913,6 @@ class MediaControl extends UICorePlugin {
|
|
|
52907
52913
|
else {
|
|
52908
52914
|
this.core.toggleFullscreen();
|
|
52909
52915
|
}
|
|
52910
|
-
this.resetUserKeepVisible();
|
|
52911
52916
|
}
|
|
52912
52917
|
static getPageX(event) {
|
|
52913
52918
|
return getPageX(event);
|
|
@@ -52952,7 +52957,7 @@ class MediaControl extends UICorePlugin {
|
|
|
52952
52957
|
delayHide() {
|
|
52953
52958
|
this.hide(this.options.hideMediaControlDelay || DEFAULT_HIDE_DELAY);
|
|
52954
52959
|
}
|
|
52955
|
-
clickaway = mediaControlClickaway(() => this.
|
|
52960
|
+
clickaway = mediaControlClickaway(() => this.setKeepVisible(false));
|
|
52956
52961
|
}
|
|
52957
52962
|
MediaControl.extend = function (properties) {
|
|
52958
52963
|
return extend(MediaControl, properties);
|
|
@@ -58555,7 +58560,6 @@ const comboboxHTML = "<button\n class='media-control-button media-control-ico
|
|
|
58555
58560
|
const stringHTML = "<div class=\"gplayer-cc-line\" id=\"gplayer-cc-line\">\n <p></p>\n</div>\n";
|
|
58556
58561
|
|
|
58557
58562
|
const VERSION = '2.19.14';
|
|
58558
|
-
const LOCAL_STORAGE_CC_ID = 'gplayer.plugins.cc.selected';
|
|
58559
58563
|
/**
|
|
58560
58564
|
* `PLUGIN` that provides a UI to select the subtitles when available.
|
|
58561
58565
|
* @public
|
|
@@ -58592,9 +58596,10 @@ const LOCAL_STORAGE_CC_ID = 'gplayer.plugins.cc.selected';
|
|
|
58592
58596
|
* ```
|
|
58593
58597
|
*/
|
|
58594
58598
|
class ClosedCaptions extends UICorePlugin {
|
|
58595
|
-
|
|
58599
|
+
isSelectedApplied = false;
|
|
58596
58600
|
active = false;
|
|
58597
58601
|
open = false;
|
|
58602
|
+
userSelectedItemId = -1;
|
|
58598
58603
|
track = null;
|
|
58599
58604
|
tracks = [];
|
|
58600
58605
|
$line = null;
|
|
@@ -58692,7 +58697,7 @@ class ClosedCaptions extends UICorePlugin {
|
|
|
58692
58697
|
video.classList.remove('ios-fullscreen');
|
|
58693
58698
|
}
|
|
58694
58699
|
});
|
|
58695
|
-
this.
|
|
58700
|
+
this.isSelectedApplied = false;
|
|
58696
58701
|
}
|
|
58697
58702
|
onPlaybackReady() {
|
|
58698
58703
|
this.core.activePlayback.oncueenter = (e) => {
|
|
@@ -58715,7 +58720,7 @@ class ClosedCaptions extends UICorePlugin {
|
|
|
58715
58720
|
this.activateTrack(id);
|
|
58716
58721
|
}
|
|
58717
58722
|
activateTrack(id) {
|
|
58718
|
-
if (['dash', 'hls'].includes(this.core.activePlayback
|
|
58723
|
+
if (this.core.activePlayback && ['dash', 'hls'].includes(this.core.activePlayback.name)) {
|
|
58719
58724
|
this.core.activePlayback.setTextTrack(id);
|
|
58720
58725
|
return;
|
|
58721
58726
|
}
|
|
@@ -58752,7 +58757,7 @@ class ClosedCaptions extends UICorePlugin {
|
|
|
58752
58757
|
try {
|
|
58753
58758
|
// TODO ensure to apply only once
|
|
58754
58759
|
this.currentTracks = this.core.activePlayback.closedCaptionsTracks;
|
|
58755
|
-
this.
|
|
58760
|
+
this.applySelectedSubtitles();
|
|
58756
58761
|
this.render();
|
|
58757
58762
|
}
|
|
58758
58763
|
catch (error) {
|
|
@@ -58857,22 +58862,36 @@ class ClosedCaptions extends UICorePlugin {
|
|
|
58857
58862
|
}
|
|
58858
58863
|
onItemSelect(event) {
|
|
58859
58864
|
// event.target does not exist for some reason in tests
|
|
58860
|
-
const id = (event.target ?? event.currentTarget).dataset?.item ??
|
|
58861
|
-
'-1';
|
|
58862
|
-
|
|
58863
|
-
|
|
58865
|
+
const id = Number((event.target ?? event.currentTarget).dataset?.item ??
|
|
58866
|
+
'-1');
|
|
58867
|
+
// TODO review, make configurable, and emit event in addition
|
|
58868
|
+
// localStorage.setItem(LOCAL_STORAGE_CC_ID, id) // TODO store language instead?
|
|
58869
|
+
this.userSelectedItemId = id;
|
|
58870
|
+
this.selectItem(this.findById(id));
|
|
58864
58871
|
this.hideMenu();
|
|
58865
58872
|
return false;
|
|
58866
58873
|
}
|
|
58867
|
-
|
|
58868
|
-
if (
|
|
58869
|
-
|
|
58870
|
-
|
|
58871
|
-
|
|
58872
|
-
|
|
58873
|
-
|
|
58874
|
-
|
|
58874
|
+
applySelectedSubtitles() {
|
|
58875
|
+
if (this.isSelectedApplied) {
|
|
58876
|
+
return;
|
|
58877
|
+
}
|
|
58878
|
+
this.isSelectedApplied = true;
|
|
58879
|
+
// If user selected a language, activate that
|
|
58880
|
+
// Otherwise, if there is no configured language, then let the engine decide
|
|
58881
|
+
// To hide the subtitles initially forcefully, set the language to 'none'
|
|
58882
|
+
let matcher;
|
|
58883
|
+
if (this.userSelectedItemId !== -1) {
|
|
58884
|
+
matcher = (track) => track.id === this.userSelectedItemId;
|
|
58875
58885
|
}
|
|
58886
|
+
else if (this.preselectedLanguage) {
|
|
58887
|
+
matcher = (track) => this.isPreselectedLanguage(track.track.language);
|
|
58888
|
+
}
|
|
58889
|
+
else {
|
|
58890
|
+
return;
|
|
58891
|
+
}
|
|
58892
|
+
setTimeout(() => {
|
|
58893
|
+
this.selectItem(this.tracks.find(matcher) ?? null);
|
|
58894
|
+
}, 0);
|
|
58876
58895
|
}
|
|
58877
58896
|
hideMenu() {
|
|
58878
58897
|
this.open = false;
|
|
@@ -58906,10 +58925,9 @@ class ClosedCaptions extends UICorePlugin {
|
|
|
58906
58925
|
return this.$el.find('#gplayer-cc-menu li'); // TODO fix semantically
|
|
58907
58926
|
}
|
|
58908
58927
|
selectSubtitles() {
|
|
58909
|
-
|
|
58910
|
-
|
|
58911
|
-
|
|
58912
|
-
// this.core.activePlayback.closedCaptionsTrackId = -1
|
|
58928
|
+
if (this.currentTrack) {
|
|
58929
|
+
this.core.activePlayback.closedCaptionsTrackId = this.currentTrack.id;
|
|
58930
|
+
}
|
|
58913
58931
|
}
|
|
58914
58932
|
getSubtitleText(track) {
|
|
58915
58933
|
const currentTime = this.core.activePlayback?.getCurrentTime() ?? 0;
|