From ab5653b81dff87055f7c2b41e48509b0352cc0e9 Mon Sep 17 00:00:00 2001 From: Brad Simpson Date: Wed, 14 Aug 2024 10:49:03 -0600 Subject: [PATCH 01/64] Remove memory leak in Internet Explorer workaround, remove mep.less --- js/mediaLibrariesOverrides.js | 22 - less/mep.less | 997 ---------------------------------- 2 files changed, 1019 deletions(-) delete mode 100644 less/mep.less diff --git a/js/mediaLibrariesOverrides.js b/js/mediaLibrariesOverrides.js index d9cdef2..e0d95fa 100644 --- a/js/mediaLibrariesOverrides.js +++ b/js/mediaLibrariesOverrides.js @@ -22,34 +22,12 @@ Object.assign(window.mejs.MepDefaults, { } }); -// The following function is used to to prevent a memory leak in Internet Explorer -// See: http://javascript.crockford.com/memory/leak.html -window.mejs.purge = function (d) { - let a = d.attributes; - if (a) { - for (let i = a.length - 1; i >= 0; i -= 1) { - const n = a[i].name; - if (typeof d[n] === 'function') { - d[n] = null; - } - } - } - a = d.childNodes; - if (a) { - for (let i = 0, count = a.length; i < count; i += 1) { - window.mejs.purge(d.childNodes[i]); - } - } -}; - /** * Overwrite mediaelement-and-player killContextMenuTimer to remove global delete */ window.mejs.MediaElementPlayer.prototype.killContextMenuTimer = function () { let timer = this.contextMenuTimer; - // - if (timer != null) { clearTimeout(timer); timer = null; diff --git a/less/mep.less b/less/mep.less deleted file mode 100644 index 7106502..0000000 --- a/less/mep.less +++ /dev/null @@ -1,997 +0,0 @@ -.mejs-offscreen{ -/* Accessibility: hide screen reader texts (and prefer "top" for RTL languages). Reference: http://blog.rrwd.nl/2015/04/04/the-screen-reader-text-class-why-and-how/ */ - clip: rect(1px 1px 1px 1px); /* IE6, IE7 - no likey commas */ - clip: rect(1px, 1px, 1px, 1px); /* IE8-IE11 - we likey commas, no support for clip-path */ - clip-path: polygon(0px 0px, 0px 0px,0px 0px, 0px 0px); - position: absolute !important; - height: 1px; - width: 1px; - overflow: hidden; -} - -.mejs-container { - position: relative; - background: #000; - font-family: Helvetica, Arial; - text-align: left; - vertical-align: top; - text-indent: 0; -} - -.mejs-container:focus-visible { - outline: none; -} - -.me-plugin { - position: absolute; -} - -.mejs-embed, .mejs-embed body { - width: 100%; - height: 100%; - margin: 0; - padding: 0; - background: #000; - overflow: hidden; -} - -.mejs-fullscreen { - /* set it to not show scroll bars so 100% will work */ - overflow: hidden !important; -} - -.mejs-container-fullscreen { - position: fixed; - left: 0; - top: 0; - right: 0; - bottom: 0; - overflow: hidden; - z-index: 1000; -} -.mejs-container-fullscreen .mejs-mediaelement, -.mejs-container-fullscreen video { - width: 100%; - height: 100%; -} - -.mejs-clear { - clear: both; -} - -/* Start: LAYERS */ -.mejs-background { - position: absolute; - top: 0; - left: 0; -} - -.mejs-mediaelement { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; -} - -.mejs-poster { - position: absolute; - top: 0; - left: 0; - background-size: contain; - background-position: 50% 50%; - background-repeat: no-repeat; -} -:root .mejs-poster img { - display: none; -} - -.mejs-poster img { - border: 0; - padding: 0; - border: 0; -} - -.mejs-overlay { - position: absolute; - top: 0; - left: 0; -} - -.mejs-overlay-play { - cursor: pointer; -} - -.mejs-overlay-button { - position: absolute; - top: 50%; - left: 50%; - width: 100px; - height: 100px; - margin: -50px 0 0 -50px; - background: url(bigplay.svg) no-repeat; -} - -.no-svg .mejs-overlay-button { - background-image: url(bigplay.png); -} - -.mejs-overlay:hover .mejs-overlay-button { - background-position: 0 -100px; -} - -.mejs-overlay-loading { - position: absolute; - top: 50%; - left: 50%; - width: 80px; - height: 80px; - margin: -40px 0 0 -40px; - background: #333; - background: url(background.png); - background: rgba(0, 0, 0, 0.9); - background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(50,50,50,0.9)), to(rgba(0,0,0,0.9))); - background: -webkit-linear-gradient(top, rgba(50,50,50,0.9), rgba(0,0,0,0.9)); - background: -moz-linear-gradient(top, rgba(50,50,50,0.9), rgba(0,0,0,0.9)); - background: -o-linear-gradient(top, rgba(50,50,50,0.9), rgba(0,0,0,0.9)); - background: -ms-linear-gradient(top, rgba(50,50,50,0.9), rgba(0,0,0,0.9)); - background: linear-gradient(rgba(50,50,50,0.9), rgba(0,0,0,0.9)); -} - -.mejs-overlay-loading span { - display: block; - width: 80px; - height: 80px; - background: transparent url(loading.gif) 50% 50% no-repeat; -} -/* End: LAYERS */ - -/* Start: CONTROL BAR */ -.mejs-container .mejs-controls { - position: absolute; - list-style-type: none; - margin: 0; - padding: 0; - bottom: 0; - left: 0; - background: url(background.png); - background: rgba(0, 0, 0, 0.7); - background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(50,50,50,0.7)), to(rgba(0,0,0,0.7))); - background: -webkit-linear-gradient(top, rgba(50,50,50,0.7), rgba(0,0,0,0.7)); - background: -moz-linear-gradient(top, rgba(50,50,50,0.7), rgba(0,0,0,0.7)); - background: -o-linear-gradient(top, rgba(50,50,50,0.7), rgba(0,0,0,0.7)); - background: -ms-linear-gradient(top, rgba(50,50,50,0.7), rgba(0,0,0,0.7)); - background: linear-gradient(rgba(50,50,50,0.7), rgba(0,0,0,0.7)); - height: 30px; - width: 100%; -} - -.mejs-container .mejs-controls div { - list-style-type: none; - background-image: none; - display: block; - float: left; - margin: 0; - padding: 0; - width: 26px; - height: 26px; - font-size: 11px; - line-height: 11px; - font-family: Helvetica, Arial; - border: 0; -} - -.mejs-controls .mejs-button button { - cursor: pointer; - display: block; - font-size: 0; - line-height: 0; - text-decoration: none; - margin: 7px 5px; - padding: 0; - position: absolute; - height: 16px; - width: 16px; - border: 0; - background: transparent url(controls.svg) no-repeat; -} - -.no-svg .mejs-controls .mejs-button button { - background-image: url(controls.png); -} - -/* :focus for accessibility */ -.mejs-controls .mejs-button button:focus-visible { - outline: dotted 1px #999; -} -/* End: CONTROL BAR */ - -/* Start: Time (Current / Duration) */ -.mejs-container .mejs-controls .mejs-time { - color: #fff; - display: block; - height: 17px; - width: auto; - padding: 10px 3px 0 3px ; - overflow: hidden; - text-align: center; - -moz-box-sizing: content-box; - -webkit-box-sizing: content-box; - box-sizing: content-box; -} - -.mejs-container .mejs-controls .mejs-time a { - color: #fff; - font-size: 11px; - line-height: 12px; - display: block; - float: left; - margin: 1px 2px 0 0; - width: auto; -} -/* End: Time (Current / Duration) */ - -/* Start: Play/Pause/Stop */ -.mejs-controls .mejs-play button { - background-position: 0 0; -} - -.mejs-controls .mejs-pause button { - background-position: 0 -16px; -} - -.mejs-controls .mejs-stop button { - background-position: -112px 0; -} -/* End: Play/Pause/Stop */ - -/* Start: Progress Bar */ -.mejs-controls div.mejs-time-rail { - direction: ltr; - width: 200px; - padding-top: 5px; -} - -.mejs-controls .mejs-time-rail span, .mejs-controls .mejs-time-rail a { - display: block; - position: absolute; - width: 180px; - height: 10px; - -webkit-border-radius: 2px; - -moz-border-radius: 2px; - border-radius: 2px; - cursor: pointer; -} - -.mejs-controls .mejs-time-rail .mejs-time-total { - margin: 5px; - background: #333; - background: rgba(50,50,50,0.8); - background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(30,30,30,0.8)), to(rgba(60,60,60,0.8))); - background: -webkit-linear-gradient(top, rgba(30,30,30,0.8), rgba(60,60,60,0.8)); - background: -moz-linear-gradient(top, rgba(30,30,30,0.8), rgba(60,60,60,0.8)); - background: -o-linear-gradient(top, rgba(30,30,30,0.8), rgba(60,60,60,0.8)); - background: -ms-linear-gradient(top, rgba(30,30,30,0.8), rgba(60,60,60,0.8)); - background: linear-gradient(rgba(30,30,30,0.8), rgba(60,60,60,0.8)); -} - -.mejs-controls .mejs-time-rail .mejs-time-buffering { - width: 100%; - background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); - background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent)); - background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); - background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); - background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); - background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); - -webkit-background-size: 15px 15px; - -moz-background-size: 15px 15px; - -o-background-size: 15px 15px; - background-size: 15px 15px; - -webkit-animation: buffering-stripes 2s linear infinite; - -moz-animation: buffering-stripes 2s linear infinite; - -ms-animation: buffering-stripes 2s linear infinite; - -o-animation: buffering-stripes 2s linear infinite; - animation: buffering-stripes 2s linear infinite; -} - -@-webkit-keyframes buffering-stripes { from {background-position: 0 0;} to {background-position: 30px 0;} } -@-moz-keyframes buffering-stripes { from {background-position: 0 0;} to {background-position: 30px 0;} } -@-ms-keyframes buffering-stripes { from {background-position: 0 0;} to {background-position: 30px 0;} } -@-o-keyframes buffering-stripes { from {background-position: 0 0;} to {background-position: 30px 0;} } -@keyframes buffering-stripes { from {background-position: 0 0;} to {background-position: 30px 0;} } - -.mejs-controls .mejs-time-rail .mejs-time-loaded { - background: #3caac8; - background: rgba(60,170,200,0.8); - background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(44,124,145,0.8)), to(rgba(78,183,212,0.8))); - background: -webkit-linear-gradient(top, rgba(44,124,145,0.8), rgba(78,183,212,0.8)); - background: -moz-linear-gradient(top, rgba(44,124,145,0.8), rgba(78,183,212,0.8)); - background: -o-linear-gradient(top, rgba(44,124,145,0.8), rgba(78,183,212,0.8)); - background: -ms-linear-gradient(top, rgba(44,124,145,0.8), rgba(78,183,212,0.8)); - background: linear-gradient(rgba(44,124,145,0.8), rgba(78,183,212,0.8)); - width: 0; -} - -.mejs-controls .mejs-time-rail .mejs-time-current { - background: #fff; - background: rgba(255,255,255,0.8); - background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,0.9)), to(rgba(200,200,200,0.8))); - background: -webkit-linear-gradient(top, rgba(255,255,255,0.9), rgba(200,200,200,0.8)); - background: -moz-linear-gradient(top, rgba(255,255,255,0.9), rgba(200,200,200,0.8)); - background: -o-linear-gradient(top, rgba(255,255,255,0.9), rgba(200,200,200,0.8)); - background: -ms-linear-gradient(top, rgba(255,255,255,0.9), rgba(200,200,200,0.8)); - background: linear-gradient(rgba(255,255,255,0.9), rgba(200,200,200,0.8)); - width: 0; -} - -.mejs-controls .mejs-time-rail .mejs-time-handle { - display: none; - position: absolute; - margin: 0; - width: 10px; - background: #fff; - -webkit-border-radius: 5px; - -moz-border-radius: 5px; - border-radius: 5px; - cursor: pointer; - border: solid 2px #333; - top: -2px; - text-align: center; -} - -.mejs-controls .mejs-time-rail .mejs-time-float { - position: absolute; - display: none; - background: #eee; - width: 36px; - height: 17px; - border: solid 1px #333; - top: -26px; - margin-left: -18px; - text-align: center; - color: #111; -} - -.mejs-controls .mejs-time-rail .mejs-time-float-current { - margin: 2px; - width: 30px; - display: block; - text-align: center; - left: 0; -} - -.mejs-controls .mejs-time-rail .mejs-time-float-corner { - position: absolute; - display: block; - width: 0; - height: 0; - line-height: 0; - border: solid 5px #eee; - border-color: #eee transparent transparent transparent; - -webkit-border-radius: 0; - -moz-border-radius: 0; - border-radius: 0; - top: 15px; - left: 13px; -} - -.mejs-long-video .mejs-controls .mejs-time-rail .mejs-time-float { - width: 48px; -} - -.mejs-long-video .mejs-controls .mejs-time-rail .mejs-time-float-current { - width: 44px; -} - -.mejs-long-video .mejs-controls .mejs-time-rail .mejs-time-float-corner { - left: 18px; -} - -/* -.mejs-controls .mejs-time-rail:hover .mejs-time-handle { - visibility:visible; -} -*/ -/* End: Progress Bar */ - -/* Start: Fullscreen */ -.mejs-controls .mejs-fullscreen-button button { - background-position: -32px 0; -} - -.mejs-controls .mejs-unfullscreen button { - background-position: -32px -16px; -} -/* End: Fullscreen */ - - -/* Start: Mute/Volume */ -.mejs-controls .mejs-volume-button { -} - -.mejs-controls .mejs-mute button { - background-position: -16px -16px; -} - -.mejs-controls .mejs-unmute button { - background-position: -16px 0; -} - -.mejs-controls .mejs-volume-button { - position: relative; -} - -.mejs-controls .mejs-volume-button .mejs-volume-slider { - display: none; - height: 115px; - width: 25px; - background: url(background.png); - background: rgba(50, 50, 50, 0.7); - -webkit-border-radius: 0; - -moz-border-radius: 0; - border-radius: 0; - top: -115px; - left: 0; - z-index: 1; - position: absolute; - margin: 0; -} - -.mejs-controls .mejs-volume-button:hover { - -webkit-border-radius: 0 0 4px 4px; - -moz-border-radius: 0 0 4px 4px; - border-radius: 0 0 4px 4px; -} - -/* -.mejs-controls .mejs-volume-button:hover .mejs-volume-slider { - display: block; -} -*/ - -.mejs-controls .mejs-volume-button .mejs-volume-slider .mejs-volume-total { - position: absolute; - left: 11px; - top: 8px; - width: 2px; - height: 100px; - background: #ddd; - background: rgba(255, 255, 255, 0.5); - margin: 0; -} - -.mejs-controls .mejs-volume-button .mejs-volume-slider .mejs-volume-current { - position: absolute; - left: 11px; - top: 8px; - width: 2px; - height: 100px; - background: #ddd; - background: rgba(255, 255, 255, 0.9); - margin: 0; -} - -.mejs-controls .mejs-volume-button .mejs-volume-slider .mejs-volume-handle { - position: absolute; - left: 4px; - top: -3px; - width: 16px; - height: 6px; - background: #ddd; - background: rgba(255, 255, 255, 0.9); - cursor: N-resize; - -webkit-border-radius: 1px; - -moz-border-radius: 1px; - border-radius: 1px; - margin: 0; -} - -/* horizontal version */ -.mejs-controls a.mejs-horizontal-volume-slider { - height: 26px; - width: 56px; - position: relative; - display: block; - float: left; - vertical-align: middle; -} - -.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total { - position: absolute; - left: 0; - top: 11px; - width: 50px; - height: 8px; - margin: 0; - padding: 0; - font-size: 1px; - -webkit-border-radius: 2px; - -moz-border-radius: 2px; - border-radius: 2px; - background: #333; - background: rgba(50,50,50,0.8); - background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(30,30,30,0.8)), to(rgba(60,60,60,0.8))); - background: -webkit-linear-gradient(top, rgba(30,30,30,0.8), rgba(60,60,60,0.8)); - background: -moz-linear-gradient(top, rgba(30,30,30,0.8), rgba(60,60,60,0.8)); - background: -o-linear-gradient(top, rgba(30,30,30,0.8), rgba(60,60,60,0.8)); - background: -ms-linear-gradient(top, rgba(30,30,30,0.8), rgba(60,60,60,0.8)); - background: linear-gradient(rgba(30,30,30,0.8), rgba(60,60,60,0.8)); -} - -.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current { - position: absolute; - left: 0; - top: 11px; - width: 50px; - height: 8px; - margin: 0; - padding: 0; - font-size: 1px; - -webkit-border-radius: 2px; - -moz-border-radius: 2px; - border-radius: 2px; - background: #fff; - background: rgba(255,255,255,0.8); - background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,0.9)), to(rgba(200,200,200,0.8))); - background: -webkit-linear-gradient(top, rgba(255,255,255,0.9), rgba(200,200,200,0.8)); - background: -moz-linear-gradient(top, rgba(255,255,255,0.9), rgba(200,200,200,0.8)); - background: -o-linear-gradient(top, rgba(255,255,255,0.9), rgba(200,200,200,0.8)); - background: -ms-linear-gradient(top, rgba(255,255,255,0.9), rgba(200,200,200,0.8)); - background: linear-gradient(rgba(255,255,255,0.9), rgba(200,200,200,0.8)); -} - -.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-handle { - display: none; -} -/* End: Mute/Volume */ - -/* Start: Track (Captions and Chapters) */ -.mejs-controls .mejs-captions-button { - position: relative; -} - -.mejs-controls .mejs-captions-button button { - background-position: -48px 0; -} - -.mejs-controls .mejs-captions-button .mejs-captions-selector { - visibility: hidden; - position: absolute; - bottom: 26px; - right: -51px; - width: 85px; - height: 100px; - background: url(background.png); - background: rgba(50,50,50,0.7); - border: solid 1px transparent; - padding: 10px 10px 0 10px; - overflow: hidden; - -webkit-border-radius: 0; - -moz-border-radius: 0; - border-radius: 0; -} - -.mejs-controls .mejs-captions-button:hover .mejs-captions-selector { - visibility: visible; -} - -.mejs-controls .mejs-captions-button .mejs-captions-selector ul { - margin: 0; - padding: 0; - display: block; - list-style-type: none !important; - overflow: hidden; -} - -.mejs-controls .mejs-captions-button .mejs-captions-selector ul li { - margin: 0 0 6px 0; - padding: 0; - list-style-type: none !important; - display: block; - color: #fff; - overflow: hidden; -} - -.mejs-controls .mejs-captions-button .mejs-captions-selector ul li input { - clear: both; - float: left; - margin: 3px 3px 0 5px; -} - -.mejs-controls .mejs-captions-button .mejs-captions-selector ul li label { - width: 55px; - float: left; - padding: 4px 0 0 0; - line-height: 15px; - font-family: helvetica, arial; - font-size: 10px; -} - -.mejs-controls .mejs-captions-button .mejs-captions-translations { - font-size: 10px; - margin: 0 0 5px 0; -} - -.mejs-chapters { - position: absolute; - top: 0; - left: 0; - -xborder-right: solid 1px #fff; - width: 10000px; - z-index: 1; -} - -.mejs-chapters .mejs-chapter { - position: absolute; - float: left; - background: #222; - background: rgba(0, 0, 0, 0.7); - background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(50,50,50,0.7)), to(rgba(0,0,0,0.7))); - background: -webkit-linear-gradient(top, rgba(50,50,50,0.7), rgba(0,0,0,0.7)); - background: -moz-linear-gradient(top, rgba(50,50,50,0.7), rgba(0,0,0,0.7)); - background: -o-linear-gradient(top, rgba(50,50,50,0.7), rgba(0,0,0,0.7)); - background: -ms-linear-gradient(top, rgba(50,50,50,0.7), rgba(0,0,0,0.7)); - background: linear-gradient(rgba(50,50,50,0.7), rgba(0,0,0,0.7)); - filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorstr=#323232,endColorstr=#000000); - overflow: hidden; - border: 0; -} - -.mejs-chapters .mejs-chapter .mejs-chapter-block { - font-size: 11px; - color: #fff; - padding: 5px; - display: block; - border-right: solid 1px #333; - border-bottom: solid 1px #333; - cursor: pointer; -} - -.mejs-chapters .mejs-chapter .mejs-chapter-block-last { - border-right: none; -} - -.mejs-chapters .mejs-chapter .mejs-chapter-block:hover { - background: #666; - background: rgba(102,102,102, 0.7); - background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(102,102,102,0.7)), to(rgba(50,50,50,0.6))); - background: -webkit-linear-gradient(top, rgba(102,102,102,0.7), rgba(50,50,50,0.6)); - background: -moz-linear-gradient(top, rgba(102,102,102,0.7), rgba(50,50,50,0.6)); - background: -o-linear-gradient(top, rgba(102,102,102,0.7), rgba(50,50,50,0.6)); - background: -ms-linear-gradient(top, rgba(102,102,102,0.7), rgba(50,50,50,0.6)); - background: linear-gradient(rgba(102,102,102,0.7), rgba(50,50,50,0.6)); - filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorstr=#666666,endColorstr=#323232); -} - -.mejs-chapters .mejs-chapter .mejs-chapter-block .ch-title { - font-size: 12px; - font-weight: bold; - display: block; - white-space: nowrap; - text-overflow: ellipsis; - margin: 0 0 3px 0; - line-height: 12px; -} - -.mejs-chapters .mejs-chapter .mejs-chapter-block .ch-timespan { - font-size: 12px; - line-height: 12px; - margin: 3px 0 4px 0; - display: block; - white-space: nowrap; - text-overflow: ellipsis; -} - -.mejs-captions-layer { - position: absolute; - bottom: 0; - left: 0; - text-align:center; - line-height: 20px; - font-size: 16px; - color: #fff; -} - -.mejs-captions-layer a { - color: #fff; - text-decoration: underline; -} - -.mejs-captions-layer[lang=ar] { - font-size: 20px; - font-weight: normal; -} - -.mejs-captions-position { - position: absolute; - width: 100%; - bottom: 15px; - left: 0; -} - -.mejs-captions-position-hover { - bottom: 35px; -} - -.mejs-captions-text { - padding: 3px 5px; - background: url(background.png); - background: rgba(20, 20, 20, 0.5); - white-space: pre-wrap; -} -/* End: Track (Captions and Chapters) */ - -/* Start: Error */ -.me-cannotplay { -} - -.me-cannotplay a { - color: #fff; - font-weight: bold; -} - -.me-cannotplay span { - padding: 15px; - display: block; -} -/* End: Error */ - - -/* Start: Loop */ -.mejs-controls .mejs-loop-off button { - background-position: -64px -16px; -} - -.mejs-controls .mejs-loop-on button { - background-position: -64px 0; -} -/* End: Loop */ - -/* Start: backlight */ -.mejs-controls .mejs-backlight-off button { - background-position: -80px -16px; -} - -.mejs-controls .mejs-backlight-on button { - background-position: -80px 0; -} -/* End: backlight */ - -/* Start: Picture Controls */ -.mejs-controls .mejs-picturecontrols-button { - background-position: -96px 0; -} -/* End: Picture Controls */ - -/* Start: Context menu */ -.mejs-contextmenu { - position: absolute; - width: 150px; - padding: 10px; - border-radius: 4px; - top: 0; - left: 0; - background: #fff; - border: solid 1px #999; - z-index: 1001; /* make sure it shows on fullscreen */ -} - -.mejs-contextmenu .mejs-contextmenu-separator { - height: 1px; - font-size: 0; - margin: 5px 6px; - background: #333; -} - -.mejs-contextmenu .mejs-contextmenu-item { - font-family: Helvetica, Arial; - font-size: 12px; - padding: 4px 6px; - cursor: pointer; - color: #333; -} - -.mejs-contextmenu .mejs-contextmenu-item:hover { - background: #2C7C91; - color: #fff; -} -/* End: Context menu */ - -/* Start: Source Chooser */ -.mejs-controls .mejs-sourcechooser-button { - position: relative; -} - -.mejs-controls .mejs-sourcechooser-button button { - background-position: -128px 0; -} - -.mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector { - visibility: hidden; - position: absolute; - bottom: 26px; - right: -10px; - width: 130px; - height: 100px; - background: url(background.png); - background: rgba(50,50,50,0.7); - border: solid 1px transparent; - padding: 10px; - overflow: hidden; - -webkit-border-radius: 0; - -moz-border-radius: 0; - border-radius: 0; -} - -.mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul { - margin: 0; - padding: 0; - display: block; - list-style-type: none !important; - overflow: hidden; -} - -.mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul li { - margin: 0 0 6px 0; - padding: 0; - list-style-type: none !important; - display: block; - color: #fff; - overflow: hidden; -} - -.mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul li input { - clear: both; - float: left; - margin: 3px 3px 0 5px; -} - -.mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul li label { - width: 100px; - float: left; - padding: 4px 0 0 0; - line-height: 15px; - font-family: helvetica, arial; - font-size: 10px; -} -/* End: Source Chooser */ - -/* Start: Postroll */ -.mejs-postroll-layer { - position: absolute; - bottom: 0; - left: 0; - width: 100%; - height: 100%; - background: url(background.png); - background: rgba(50,50,50,0.7); - z-index: 1000; - overflow: hidden; -} - -.mejs-postroll-layer-content { - width: 100%; - height: 100%; -} - -.mejs-postroll-close { - position: absolute; - right: 0; - top: 0; - background: url(background.png); - background: rgba(50,50,50,0.7); - color: #fff; - padding: 4px; - z-index: 100; - cursor: pointer; -} -/* End: Postroll */ - -/* Start: Speed */ -div.mejs-speed-button { - width: 46px !important; - position: relative; -} - -.mejs-controls .mejs-button.mejs-speed-button button { - background: transparent; - width: 36px; - font-size: 11px; - line-height: normal; - color: #ffffff; -} - -.mejs-controls .mejs-speed-button .mejs-speed-selector { - display: none; - position: absolute; - top: -100px; - left: -10px; - width: 60px; - height: 100px; - background: url(background.png); - background: rgba(50, 50, 50, 0.7); - border: solid 1px transparent; - padding: 0; - overflow: hidden; - -webkit-border-radius: 0; - -moz-border-radius: 0; - border-radius: 0; -} - -.mejs-controls .mejs-speed-button:hover > .mejs-speed-selector { - display: block; -} - -.mejs-controls .mejs-speed-button .mejs-speed-selector ul li label.mejs-speed-selected { - color: rgba(33, 248, 248, 1); -} - -.mejs-controls .mejs-speed-button .mejs-speed-selector ul { - margin: 0; - padding: 0; - display: block; - list-style-type: none !important; - overflow: hidden; -} - -.mejs-controls .mejs-speed-button .mejs-speed-selector ul li { - margin: 0 0 6px 0; - padding: 0 10px; - list-style-type: none !important; - display: block; - color: #fff; - overflow: hidden; -} - -.mejs-controls .mejs-speed-button .mejs-speed-selector ul li input { - clear: both; - float: left; - margin: 3px 3px 0 5px; - display: none; -} - -.mejs-controls .mejs-speed-button .mejs-speed-selector ul li label { - width: 60px; - float: left; - padding: 4px 0 0 0; - line-height: 15px; - font-family: helvetica, arial; - font-size: 11.5px; - color: white; - margin-left: 5px; - cursor: pointer; -} - -.mejs-controls .mejs-speed-button .mejs-speed-selector ul li:hover { - background-color: rgb(200, 200, 200) !important; - background-color: rgba(255,255,255,.4) !important; -} -/* End: Speed */ - -/* Start: Jump Forward */ -.mejs-controls .mejs-button.mejs-jump-forward-button { - background: transparent url(jumpforward.png) no-repeat; - background-position: 3px 3px; -} - -.mejs-controls .mejs-button.mejs-jump-forward-button button { - background: transparent; - font-size: 9px; - line-height: normal; - color: #ffffff; -} -/* End: Jump Forward */ - -/* Start: Skip Back */ -.mejs-controls .mejs-button.mejs-skip-back-button { - background: transparent url(skipback.png) no-repeat; - background-position: 3px 3px; -} - -.mejs-controls .mejs-button.mejs-skip-back-button button { - background: transparent; - font-size: 9px; - line-height: normal; - color: #ffffff; -} -/* End: Skip Back */ \ No newline at end of file From a1d40d470255e966f5ef3b787bed2943c781ddaa Mon Sep 17 00:00:00 2001 From: Brad Simpson Date: Wed, 14 Aug 2024 10:51:43 -0600 Subject: [PATCH 02/64] Removed 'killContextMenuTimer override to remove global delete' since it no longer exists --- js/mediaLibrariesOverrides.js | 12 ------------ 1 file changed, 12 deletions(-) diff --git a/js/mediaLibrariesOverrides.js b/js/mediaLibrariesOverrides.js index e0d95fa..2df1aba 100644 --- a/js/mediaLibrariesOverrides.js +++ b/js/mediaLibrariesOverrides.js @@ -22,18 +22,6 @@ Object.assign(window.mejs.MepDefaults, { } }); -/** - * Overwrite mediaelement-and-player killContextMenuTimer to remove global delete -*/ -window.mejs.MediaElementPlayer.prototype.killContextMenuTimer = function () { - let timer = this.contextMenuTimer; - - if (timer != null) { - clearTimeout(timer); - timer = null; - } -}; - /** * Overwrite mediaelement-and-player buildfullscreen to remove global delete */ From d7aad0d37b756e71f93b8ba2ea0e97a54c37379e Mon Sep 17 00:00:00 2001 From: Brad Simpson Date: Wed, 14 Aug 2024 10:54:45 -0600 Subject: [PATCH 03/64] Update base mediaelement JS and Less files --- less/mediaelementplayer.less | 824 ++ libraries/mediaelement-and-player.js | 11387 +++++++++++++++---------- 2 files changed, 7557 insertions(+), 4654 deletions(-) create mode 100644 less/mediaelementplayer.less diff --git a/less/mediaelementplayer.less b/less/mediaelementplayer.less new file mode 100644 index 0000000..526a9de --- /dev/null +++ b/less/mediaelementplayer.less @@ -0,0 +1,824 @@ +/* Accessibility: hide screen reader texts (and prefer "top" for RTL languages). +Reference: http://blog.rrwd.nl/2015/04/04/the-screen-reader-text-class-why-and-how/ */ +.mejs__offscreen { + border: 0; + clip: rect( 1px, 1px, 1px, 1px ); + -webkit-clip-path: inset( 50% ); + clip-path: inset( 50% ); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + word-wrap: normal; +} + +.mejs__container { + background: #000; + box-sizing: border-box; + font-family: 'Helvetica', Arial, serif; + position: relative; + text-align: left; + text-indent: 0; + vertical-align: top; +} + +.mejs__container * { + box-sizing: border-box; +} + +/* Hide native play button and control bar from iOS to favor plugin button */ +.mejs__container video::-webkit-media-controls, +.mejs__container video::-webkit-media-controls-panel, +.mejs__container video::-webkit-media-controls-panel-container, +.mejs__container video::-webkit-media-controls-start-playback-button { + -webkit-appearance: none; + display: none !important; +} + +.mejs__fill-container, +.mejs__fill-container .mejs__container { + height: 100%; + width: 100%; +} + +.mejs__fill-container { + background: transparent; + margin: 0 auto; + overflow: hidden; + position: relative; +} + +.mejs__container:focus { + outline-offset: 0.125rem; + outline-style: solid; + outline-width: 0.125rem; +} + +.mejs__iframe-overlay { + height: 100%; + position: absolute; + width: 100%; +} + +.mejs__embed, +.mejs__embed body { + background: #000; + height: 100%; + margin: 0; + overflow: hidden; + padding: 0; + width: 100%; +} + +.mejs__fullscreen { + overflow: hidden !important; +} + +.mejs__container-fullscreen { + bottom: 0; + left: 0; + overflow: hidden; + position: fixed; + right: 0; + top: 0; + z-index: 1000; +} + +/* Start: LAYERS */ +.mejs__background { + left: 0; + position: absolute; + top: 0; +} + +.mejs__mediaelement { + height: 100%; + left: 0; + position: absolute; + top: 0; + width: 100%; + z-index: 0; +} + +.mejs__poster { + background-position: 50% 50%; + background-repeat: no-repeat; + background-size: cover; + left: 0; + position: absolute; + top: 0; + z-index: 1; +} + +:root .mejs__poster-img { + display: none; +} + +.mejs__poster-img { + border: 0; + padding: 0; +} + +.mejs__overlay { + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + left: 0; + position: absolute; + top: 0; +} + +.mejs__layer { + z-index: 1; +} + +.mejs__overlay-play { + cursor: pointer; +} + +.mejs__overlay-button { + background: transparent; + border: 0; +} + +.mejs__overlay:hover .mejs__overlay-button svg { + opacity: 1; +} + +.mejs__overlay-button svg { + opacity: 0.75; +} + +.mejs__overlay-button:focus svg { + opacity: 1; +} + +.mejs__overlay-button, +.mejs__overlay-button svg { + height: 5rem; + width: 5rem; +} + +.mejs__overlay-loading, +.mejs__overlay-loading svg { + height: 5rem; + width: 5rem; +} + +.mejs__overlay-loading-bg-img { + -webkit-animation: mejs__loading-spinner 1s linear infinite; + animation: mejs__loading-spinner 1s linear infinite; + display: block; + height: 5rem; + width: 5rem; + z-index: 1; +} + +@-webkit-keyframes mejs__loading-spinner { + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} + +@keyframes mejs__loading-spinner { + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} + +/* End: LAYERS */ + +/* Start: CONTROL BAR */ +.mejs__controls { + bottom: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + height: 2.5rem; + left: 0; + list-style-type: none; + margin: 0; + padding: 0 0.625rem; + position: absolute; + width: 100%; + z-index: 3; +} + +.mejs__controls:not([style*='display: none']) { + background: rgba(255, 0, 0, 0.7); + background: -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.35)); + background: linear-gradient(transparent, rgba(0, 0, 0, 0.35)); +} + +.mejs__button, +.mejs__time, +.mejs__time-rail { + font-size: 0.625rem; + height: 2.5rem; + line-height: 0.625rem; + margin: 0; + width: 2rem; +} + +.mejs__button > button { + background-color: transparent; + border: 0; + color: #fff; + cursor: pointer; + display: block; + font-size: 0; + height: 1.125rem; + line-height: 0; + margin: 0.625rem 0.375rem; + overflow: hidden; + padding: 0; + position: absolute; + text-decoration: none; + width: 1.125rem; +} + +.mejs__button svg { + fill: currentColor; + height: 1.125rem; + width: 1.125rem; +} + +/* :focus for accessibility */ +.mejs__button > button:focus { + outline: dotted 0.125rem #fff; +} + +.mejs__container-keyboard-inactive a, +.mejs__container-keyboard-inactive a:focus, +.mejs__container-keyboard-inactive button, +.mejs__container-keyboard-inactive button:focus, +.mejs__container-keyboard-inactive [role=slider], +.mejs__container-keyboard-inactive [role=slider]:focus { + outline: 0; +} + +/* End: CONTROL BAR */ + +/* Start: Play (Play / Pause / Replay) */ +.mejs__playpause-button svg { + display: none; +} + +.mejs__play svg.mejs__icon-play { + display: block; +} + +.mejs__pause svg.mejs__icon-pause { + display: block; +} + +.mejs__replay svg.mejs__icon-replay { + display: block; +} +/* End: Play (Play / Pause / Replay) */ + +/* Start: Fullscreen (Fullscreen / Unfullscreen) */ +.mejs__fullscreen-button svg.mejs__icon-unfullscreen { + display: none; +} +.mejs__fullscreen svg.mejs__icon-fullscreen { + display: block; +} + +.mejs__fullscreen svg.mejs__icon-unfullscreen { + display: none; +} + +.mejs__unfullscreen svg.mejs__icon-unfullscreen { + display: block; +} + +.mejs__unfullscreen svg.mejs__icon-fullscreen { + display: none; +} +/* End: Fullscreen (Fullscreen / Unfullscreen) */ + +/* Start: Time (Current / Duration) */ +.mejs__time { + box-sizing: content-box; + color: #fff; + font-size: 0.6875rem; + font-weight: bold; + height: 1.5rem; + overflow: hidden; + padding: 1rem 0.375rem 0; + text-align: center; + width: auto; +} +/* End: Time (Current / Duration) */ + +/* Start: Progress Bar */ +.mejs__time-rail { + direction: ltr; + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; + height: 2.5rem; + margin: 0 0.625rem; + padding-top: 0.625rem; + position: relative; +} + +.mejs__time-total, +.mejs__time-buffering, +.mejs__time-loaded, +.mejs__time-current, +.mejs__time-float, +.mejs__time-hovered, +.mejs__time-float-current, +.mejs__time-float-corner, +.mejs__time-marker { + border-radius: 0.125rem; + cursor: pointer; + display: block; + height: 0.625rem; + position: absolute; +} + +.mejs__time-total { + background: rgba(255, 255, 255, 0.3); + margin: 0.3125rem 0 0; + width: 100%; +} + +.mejs__time-buffering { + -webkit-animation: buffering-stripes 2s linear infinite; + animation: buffering-stripes 2s linear infinite; + background: -webkit-linear-gradient(135deg, rgba(255, 255, 255, 0.4) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.4) 75%, transparent 75%, transparent); + background: linear-gradient(-45deg, rgba(255, 255, 255, 0.4) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.4) 75%, transparent 75%, transparent); + background-size: 0.9375rem 0.9375rem; + width: 100%; +} + +@-webkit-keyframes buffering-stripes { + from { + background-position: 0 0; + } + to { + background-position: 1.875rem 0; + } +} + +@keyframes buffering-stripes { + from { + background-position: 0 0; + } + to { + background-position: 1.875rem 0; + } +} + +.mejs__time-loaded { + background: rgba(255, 255, 255, 0.3); +} + +.mejs__time-current, +.mejs__time-handle-content { + background: rgba(255, 255, 255, 0.9); +} + +.mejs__time-hovered { + background: rgba(255, 255, 255, 0.5); + z-index: 10; +} + +.mejs__time-hovered.negative { + background: rgba(0, 0, 0, 0.2); +} + +.mejs__time-current, +.mejs__time-buffering, +.mejs__time-loaded, +.mejs__time-hovered { + left: 0; + -webkit-transform: scaleX(0); + -ms-transform: scaleX(0); + transform: scaleX(0); + -webkit-transform-origin: 0 0; + -ms-transform-origin: 0 0; + transform-origin: 0 0; + -webkit-transition: 0.15s ease-in all; + transition: 0.15s ease-in all; + width: 100%; +} + +.mejs__time-buffering { + -webkit-transform: scaleX(1); + -ms-transform: scaleX(1); + transform: scaleX(1); +} + +.mejs__time-hovered { + -webkit-transition: height 0.1s cubic-bezier(0.44, 0, 1, 1); + transition: height 0.1s cubic-bezier(0.44, 0, 1, 1); +} + +.mejs__time-hovered.no-hover { + -webkit-transform: scaleX(0) !important; + -ms-transform: scaleX(0) !important; + transform: scaleX(0) !important; +} + +.mejs__time-handle, +.mejs__time-handle-content { + border: 0.25rem solid transparent; + cursor: pointer; + left: 0; + position: absolute; + -webkit-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); + z-index: 11; +} + +.mejs__time-handle-content { + border: 0.25rem solid rgba(255, 255, 255, 0.9); + border-radius: 50%; + height: 0.625rem; + left: -0.4375rem; + top: -0.25rem; + -webkit-transform: scale(0); + -ms-transform: scale(0); + transform: scale(0); + width: 0.625rem; +} + +.mejs__time-rail:hover .mejs__time-handle-content, +.mejs__time-rail .mejs__time-handle-content:focus, +.mejs__time-rail .mejs__time-handle-content:active { + -webkit-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); +} + +.mejs__time-float { + background: #eee; + border: solid 1px #333; + bottom: 100%; + color: #111; + display: none; + height: 1.0625rem; + margin-bottom: 0.5625rem; + position: absolute; + text-align: center; + -webkit-transform: translateX(-50%); + -ms-transform: translateX(-50%); + transform: translateX(-50%); + width: 2.25rem; +} + +.mejs__time-float-current { + display: block; + left: 0; + margin: 0.125rem; + text-align: center; + width: 1.875rem; +} + +.mejs__time-float-corner { + border: solid 0.3125rem #eee; + border-color: #eee transparent transparent; + border-radius: 0; + display: block; + height: 0; + left: 50%; + line-height: 0; + position: absolute; + top: 100%; + -webkit-transform: translateX(-50%); + -ms-transform: translateX(-50%); + transform: translateX(-50%); + width: 0; +} + +.mejs__long-video .mejs__time-float { + margin-left: -1.4375rem; + width: 4rem; +} + +.mejs__long-video .mejs__time-float-current { + width: 3.75rem; +} + +.mejs__broadcast { + color: #fff; + height: 0.625rem; + position: absolute; + top: 0.9375rem; + width: 100%; +} + +/* End: Progress Bar */ + +/* Start: Mute/Volume */ +.mejs__volume-button { + position: relative; +} + +.mejs__volume-button > .mejs__volume-slider { + -webkit-backface-visibility: hidden; + background: rgba(50, 50, 50, 0.7); + border-radius: 0; + bottom: 100%; + display: none; + height: 7.1875rem; + left: 50%; + margin: 0; + position: absolute; + -webkit-transform: translateX(-50%); + -ms-transform: translateX(-50%); + transform: translateX(-50%); + width: 1.5625rem; + z-index: 1; +} + +.mejs__volume-button:hover { + border-radius: 0 0 0.25rem 0.25rem; +} + +.mejs__volume-total { + background: rgba(255, 255, 255, 0.5); + border: 0.06rem solid #fff; + height: 6.25rem; + left: 50%; + margin: 0; + position: absolute; + top: 0.5rem; + -webkit-transform: translateX(-50%); + -ms-transform: translateX(-50%); + transform: translateX(-50%); + width: 0.125rem; +} + +.mejs__volume-current { + background: rgba(255, 255, 255, 0.9); + left: 0; + margin: 0; + position: absolute; + width: 100%; +} + +.mejs__volume-handle { + background: rgba(255, 255, 255, 0.9); + border: 1px solid #fff; + border-radius: 1px; + cursor: ns-resize; + height: 0.375rem; + left: 50%; + position: absolute; + -webkit-transform: translateX(-50%); + -ms-transform: translateX(-50%); + transform: translateX(-50%); + width: 1rem; +} + +.mejs__horizontal-volume-slider { + display: block; + height: 2.25rem; + position: relative; + vertical-align: middle; + width: 3.5rem; +} + +.mejs__horizontal-volume-total { + background: rgba(50, 50, 50, 0.8); + border: 0.06rem solid #fff; + border-radius: 0.125rem; + font-size: 1px; + height: 0.5rem; + left: 0; + margin: 0; + padding: 0; + position: absolute; + top: 1rem; + width: 3.125rem; +} + +.mejs__horizontal-volume-current { + background: rgba(255, 255, 255, 0.8); + border-radius: 0.125rem; + border-right: 0.06rem solid #fff; + font-size: 1px; + height: 100%; + left: 0; + margin: 0; + padding: 0; + position: absolute; + top: 0; + width: 100%; +} + +.mejs__horizontal-volume-handle { + display: none; +} + +.mejs__mute svg, +.mejs__unmute svg { + stroke: currentColor; +} + +.mejs__volume-button svg { + display: none; +} + +.mejs__mute .mejs__icon-mute { + display: block; +} + +.mejs__unmute .mejs__icon-unmute { + display: block; +} +/* End: Mute/Volume */ + +/* Start: Track (Captions and Chapters) */ +.mejs__captions-button, +.mejs__chapters-button { + position: relative; +} + +.mejs__chapters-button svg, +.mejs__captions-button svg { + padding-top: 0.125rem; +} + +.mejs__captions-button > .mejs__captions-selector, +.mejs__chapters-button > .mejs__chapters-selector { + background: rgba(50, 50, 50, 0.7); + border: solid 1px transparent; + border-radius: 0; + bottom: 100%; + margin-right: -2.6875rem; + overflow: hidden; + padding: 0; + position: absolute; + right: 50%; + visibility: visible; + width: 5.375rem; +} + +/* reduced opacity if captions button is in toggle mode and deactivated */ +.mejs__captions-button-toggle { + opacity: 0.7; +} +/* normal opacity if captions button is in toggle mode and activated */ +.mejs__captions-button-toggle-on { + opacity: 1; +} + +.mejs__chapters-button > .mejs__chapters-selector { + margin-right: -3.4375rem; + width: 6.875rem; +} + +.mejs__captions-selector-list, +.mejs__chapters-selector-list { + list-style-type: none !important; + margin: 0; + overflow: hidden; + padding: 0; +} + +.mejs__captions-selector-list-item, +.mejs__chapters-selector-list-item { + color: #fff; + cursor: pointer; + display: block; + list-style-type: none !important; + margin: 0 0 0.375rem; + overflow: hidden; + padding: 0; +} + +.mejs__captions-selector-list-item:hover, +.mejs__chapters-selector-list-item:hover { + background-color: rgb(200, 200, 200) !important; + background-color: rgba(255, 255, 255, 0.4) !important; +} + +.mejs__captions-selector-input, +.mejs__chapters-selector-input { + clear: both; + float: left; + left: -62.5rem; + margin: 0.1875rem 0.1875rem 0 0.3125rem; + position: absolute; +} + +.mejs__captions-selector-label, +.mejs__chapters-selector-label { + cursor: pointer; + float: left; + font-size: 0.625rem; + line-height: 0.9375rem; + padding: 0.25rem 0.625rem 0; + width: 100%; +} + +.mejs__captions-selector-list-item:hover .mejs__captions-selector-label, +.mejs__chapters-selector-list-item:hover .mejs__chapters-selector-label { + text-decoration: underline; +} + +.mejs__captions-selected, +.mejs__chapters-selected { + color: rgba(33, 248, 248, 1); + font-weight: bold; +} + +.mejs__captions-translations { + font-size: 0.625rem; + margin: 0 0 0.3125rem; +} + +.mejs__captions-layer { + bottom: 0; + color: #fff; + font-size: 1rem; + left: 0; + line-height: 1.25rem; + position: absolute; + text-align: center; +} + +.mejs__captions-layer a { + color: #fff; + text-decoration: underline; +} + +.mejs__captions-layer[lang=ar] { + font-size: 1.25rem; + font-weight: normal; +} + +.mejs__captions-position { + bottom: 0.9375rem; + left: 0; + position: absolute; + width: 100%; +} + +.mejs__captions-position-hover { + bottom: 2.1875rem; +} + +.mejs__captions-text, +.mejs__captions-text * { + background: rgba(20, 20, 20, 0.5); + box-shadow: 0.3125rem 0 0 rgba(20, 20, 20, 0.5), -0.3125rem 0 0 rgba(20, 20, 20, 0.5); + padding: 0; + white-space: pre-wrap; +} + +.mejs__container.mejs__hide-cues video::-webkit-media-text-track-container { + display: none; +} +/* End: Track (Captions and Chapters) */ + +/* Start: Error */ +.mejs__overlay-error { + position: relative; +} +.mejs__overlay-error > img { + left: 0; + max-width: 100%; + position: absolute; + top: 0; + z-index: -1; +} +.mejs__cannotplay, +.mejs__cannotplay a { + color: #fff; + font-size: 0.8em; +} + +.mejs__cannotplay { + position: relative; +} + +.mejs__cannotplay p, +.mejs__cannotplay a { + display: inline-block; + padding: 0 0.9375rem; + width: 100%; +} +/* End: Error */ diff --git a/libraries/mediaelement-and-player.js b/libraries/mediaelement-and-player.js index bb6c465..da8facb 100644 --- a/libraries/mediaelement-and-player.js +++ b/libraries/mediaelement-and-player.js @@ -1,2336 +1,3663 @@ /*! - * * MediaElement.js - * HTML5