@eluvio/elv-player-js 1.0.125 → 1.0.127
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/main.bundle.js +1 -1
- package/package.json +2 -2
- package/src/PlayerControls.js +137 -4
- package/src/index.js +52 -28
- package/src/static/stylesheets/player.scss +137 -5
package/dist/main.bundle.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
/*! For license information please see main.bundle.js.LICENSE.txt */
|
|
2
|
-
(()=>{var e,t,o,r,i,n={6887:(e,t,o)=>{"use strict";var r=o(3379),i=o.n(r),n=o(7795),l=o.n(n),a=o(569),p=o.n(a),u=o(3565),s=o.n(u),c=o(9216),_=o.n(c),y=o(4589),v=o.n(y),h=o(9290),d={};d.styleTagTransform=v(),d.setAttributes=s(),d.insert=p().bind(null,"head"),d.domAPI=l(),d.insertStyleElement=_(),i()(h.Z,d),h.Z&&h.Z.locals&&h.Z.locals,o(2875),o(9250),o(6609),o(2542),o.p;var g=o(9328);function f(e){return f="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},f(e)}function m(){m=function(){return t};var e,t={},o=Object.prototype,r=o.hasOwnProperty,i=Object.defineProperty||function(e,t,o){e[t]=o.value},n="function"==typeof Symbol?Symbol:{},l=n.iterator||"@@iterator",a=n.asyncIterator||"@@asyncIterator",p=n.toStringTag||"@@toStringTag";function u(e,t,o){return Object.defineProperty(e,t,{value:o,enumerable:!0,configurable:!0,writable:!0}),e[t]}try{u({},"")}catch(e){u=function(e,t,o){return e[t]=o}}function s(e,t,o,r){var n=t&&t.prototype instanceof g?t:g,l=Object.create(n.prototype),a=new N(r||[]);return i(l,"_invoke",{value:z(e,o,a)}),l}function c(e,t,o){try{return{type:"normal",arg:e.call(t,o)}}catch(e){return{type:"throw",arg:e}}}t.wrap=s;var _="suspendedStart",y="suspendedYield",v="executing",h="completed",d={};function g(){}function b(){}function x(){}var w={};u(w,l,(function(){return this}));var k=Object.getPrototypeOf,O=k&&k(k(T([])));O&&O!==o&&r.call(O,l)&&(w=O);var E=x.prototype=g.prototype=Object.create(w);function L(e){["next","throw","return"].forEach((function(t){u(e,t,(function(e){return this._invoke(t,e)}))}))}function j(e,t){function o(i,n,l,a){var p=c(e[i],e,n);if("throw"!==p.type){var u=p.arg,s=u.value;return s&&"object"==f(s)&&r.call(s,"__await")?t.resolve(s.__await).then((function(e){o("next",e,l,a)}),(function(e){o("throw",e,l,a)})):t.resolve(s).then((function(e){u.value=e,l(u)}),(function(e){return o("throw",e,l,a)}))}a(p.arg)}var n;i(this,"_invoke",{value:function(e,r){function i(){return new t((function(t,i){o(e,r,t,i)}))}return n=n?n.then(i,i):i()}})}function z(t,o,r){var i=_;return function(n,l){if(i===v)throw new Error("Generator is already running");if(i===h){if("throw"===n)throw l;return{value:e,done:!0}}for(r.method=n,r.arg=l;;){var a=r.delegate;if(a){var p=F(a,r);if(p){if(p===d)continue;return p}}if("next"===r.method)r.sent=r._sent=r.arg;else if("throw"===r.method){if(i===_)throw i=h,r.arg;r.dispatchException(r.arg)}else"return"===r.method&&r.abrupt("return",r.arg);i=v;var u=c(t,o,r);if("normal"===u.type){if(i=r.done?h:y,u.arg===d)continue;return{value:u.arg,done:r.done}}"throw"===u.type&&(i=h,r.method="throw",r.arg=u.arg)}}}function F(t,o){var r=o.method,i=t.iterator[r];if(i===e)return o.delegate=null,"throw"===r&&t.iterator.return&&(o.method="return",o.arg=e,F(t,o),"throw"===o.method)||"return"!==r&&(o.method="throw",o.arg=new TypeError("The iterator does not provide a '"+r+"' method")),d;var n=c(i,t.iterator,o.arg);if("throw"===n.type)return o.method="throw",o.arg=n.arg,o.delegate=null,d;var l=n.arg;return l?l.done?(o[t.resultName]=l.value,o.next=t.nextLoc,"return"!==o.method&&(o.method="next",o.arg=e),o.delegate=null,d):l:(o.method="throw",o.arg=new TypeError("iterator result is not an object"),o.delegate=null,d)}function S(e){var t={tryLoc:e[0]};1 in e&&(t.catchLoc=e[1]),2 in e&&(t.finallyLoc=e[2],t.afterLoc=e[3]),this.tryEntries.push(t)}function A(e){var t=e.completion||{};t.type="normal",delete t.arg,e.completion=t}function N(e){this.tryEntries=[{tryLoc:"root"}],e.forEach(S,this),this.reset(!0)}function T(t){if(t||""===t){var o=t[l];if(o)return o.call(t);if("function"==typeof t.next)return t;if(!isNaN(t.length)){var i=-1,n=function o(){for(;++i<t.length;)if(r.call(t,i))return o.value=t[i],o.done=!1,o;return o.value=e,o.done=!0,o};return n.next=n}}throw new TypeError(f(t)+" is not iterable")}return b.prototype=x,i(E,"constructor",{value:x,configurable:!0}),i(x,"constructor",{value:b,configurable:!0}),b.displayName=u(x,p,"GeneratorFunction"),t.isGeneratorFunction=function(e){var t="function"==typeof e&&e.constructor;return!!t&&(t===b||"GeneratorFunction"===(t.displayName||t.name))},t.mark=function(e){return Object.setPrototypeOf?Object.setPrototypeOf(e,x):(e.__proto__=x,u(e,p,"GeneratorFunction")),e.prototype=Object.create(E),e},t.awrap=function(e){return{__await:e}},L(j.prototype),u(j.prototype,a,(function(){return this})),t.AsyncIterator=j,t.async=function(e,o,r,i,n){void 0===n&&(n=Promise);var l=new j(s(e,o,r,i),n);return t.isGeneratorFunction(o)?l:l.next().then((function(e){return e.done?e.value:l.next()}))},L(E),u(E,p,"Generator"),u(E,l,(function(){return this})),u(E,"toString",(function(){return"[object Generator]"})),t.keys=function(e){var t=Object(e),o=[];for(var r in t)o.push(r);return o.reverse(),function e(){for(;o.length;){var r=o.pop();if(r in t)return e.value=r,e.done=!1,e}return e.done=!0,e}},t.values=T,N.prototype={constructor:N,reset:function(t){if(this.prev=0,this.next=0,this.sent=this._sent=e,this.done=!1,this.delegate=null,this.method="next",this.arg=e,this.tryEntries.forEach(A),!t)for(var o in this)"t"===o.charAt(0)&&r.call(this,o)&&!isNaN(+o.slice(1))&&(this[o]=e)},stop:function(){this.done=!0;var e=this.tryEntries[0].completion;if("throw"===e.type)throw e.arg;return this.rval},dispatchException:function(t){if(this.done)throw t;var o=this;function i(r,i){return a.type="throw",a.arg=t,o.next=r,i&&(o.method="next",o.arg=e),!!i}for(var n=this.tryEntries.length-1;n>=0;--n){var l=this.tryEntries[n],a=l.completion;if("root"===l.tryLoc)return i("end");if(l.tryLoc<=this.prev){var p=r.call(l,"catchLoc"),u=r.call(l,"finallyLoc");if(p&&u){if(this.prev<l.catchLoc)return i(l.catchLoc,!0);if(this.prev<l.finallyLoc)return i(l.finallyLoc)}else if(p){if(this.prev<l.catchLoc)return i(l.catchLoc,!0)}else{if(!u)throw new Error("try statement without catch or finally");if(this.prev<l.finallyLoc)return i(l.finallyLoc)}}}},abrupt:function(e,t){for(var o=this.tryEntries.length-1;o>=0;--o){var i=this.tryEntries[o];if(i.tryLoc<=this.prev&&r.call(i,"finallyLoc")&&this.prev<i.finallyLoc){var n=i;break}}n&&("break"===e||"continue"===e)&&n.tryLoc<=t&&t<=n.finallyLoc&&(n=null);var l=n?n.completion:{};return l.type=e,l.arg=t,n?(this.method="next",this.next=n.finallyLoc,d):this.complete(l)},complete:function(e,t){if("throw"===e.type)throw e.arg;return"break"===e.type||"continue"===e.type?this.next=e.arg:"return"===e.type?(this.rval=this.arg=e.arg,this.method="return",this.next="end"):"normal"===e.type&&t&&(this.next=t),d},finish:function(e){for(var t=this.tryEntries.length-1;t>=0;--t){var o=this.tryEntries[t];if(o.finallyLoc===e)return this.complete(o.completion,o.afterLoc),A(o),d}},catch:function(e){for(var t=this.tryEntries.length-1;t>=0;--t){var o=this.tryEntries[t];if(o.tryLoc===e){var r=o.completion;if("throw"===r.type){var i=r.arg;A(o)}return i}}throw new Error("illegal catch attempt")},delegateYield:function(t,o,r){return this.delegate={iterator:T(t),resultName:o,nextLoc:r},"next"===this.method&&(this.arg=e),d}},t}function b(e,t,o,r,i,n,l){try{var a=e[n](l),p=a.value}catch(e){return void o(e)}a.done?t(p):Promise.resolve(p).then(r,i)}var x,w={DEFAULT:"default",LOW_LATENCY:"low_latency"},k={FAIRPLAY:"fairplay",SAMPLE_AES:"sample-aes",AES128:"aes-128",WIDEVINE:"widevine",CLEAR:"clear"},O={HLS:"hls",DASH:"dash"},E={OFF:!1,WHEN_VISIBLE:"when visible",ON:!0},L={OFF:!1,OFF_WITH_VOLUME_TOGGLE:"off_with_volume_toggle",AUTO_HIDE:"autohide",ON:!0,DEFAULT:"default"},j={OFF:!1,ON:!0},z={OFF:!1,WHEN_NOT_VISIBLE:"when_not_visible",OFF_IF_POSSIBLE:"off_if_possible",ON:!0},F={OFF:!1,ON:!0},S={OFF:!1,ON:!0};O.HLS,O.DASH,k.FAIRPLAY,k.SAMPLE_AES,k.AES128,k.WIDEVINE,k.CLEAR,L.AUTO_HIDE,E.OFF,z.OFF,j.OFF,F.ON,S.OFF,w.DEFAULT,x=m().mark((function e(t){return m().wrap((function(e){for(;;)switch(e.prev=e.next){case 0:case"end":return e.stop()}}),e)})),g.Utils.LiveHLSJSSettings({lowLatency:!0})},9290:(e,t,o)=>{"use strict";o.d(t,{Z:()=>a});var r=o(8515),i=o.n(r),n=o(2616),l=o.n(n)()(i());l.push([e.id,'@keyframes fade-out{0%{opacity:1}100%{opacity:0}}.eluvio-player{align-items:center;display:flex;height:100%;justify-content:center;max-height:100%;max-width:100%;object-fit:contain;position:relative;width:100%}.eluvio-player--error .eluvio-player__controls,.eluvio-player--error .eluvio-player__big-play-button{display:none}.eluvio-player__error-message{align-items:center;display:flex;height:100%;justify-content:center;padding:20px;position:absolute;width:100%;z-index:1000}.eluvio-player__error-message__text{color:#a32;font-size:24px;max-width:600px;text-align:center}.eluvio-player--seek-left::after,.eluvio-player--seek-right::after{animation:fade-out .5s ease;content:"";height:100%;opacity:0;pointer-events:none;position:absolute;transition:background-color 1s ease;width:100%;z-index:100}.eluvio-player--seek-left::after{background:linear-gradient(90deg, rgba(100, 100, 100, 0.15), transparent 15%)}.eluvio-player--seek-right::after{background:linear-gradient(90deg, transparent 85%, rgba(100, 100, 100, 0.15))}.eluvio-player.eluvio-player-restarted .eluvio-player__big-play-button{display:none}.eluvio-player *{box-sizing:border-box;font-family:"Helvetica Neue",Helvetica,sans-serif;overscroll-behavior-y:contain}.eluvio-player input[type=range],.eluvio-player button{background:rgba(0,0,0,0);border:0;cursor:pointer;justify-content:center;transition:opacity .1s linear}.eluvio-player input[type=range]:hover,.eluvio-player button:hover{opacity:1}.eluvio-player input[type=range]:focus,.eluvio-player button:focus{outline:0}.eluvio-player input[type=range].focus-visible,.eluvio-player button.focus-visible{box-shadow:0 0 2px rgba(225,225,255,.7);outline:0}.eluvio-player input[type=range]{-webkit-tap-highlight-color:rgba(0,0,0,0);appearance:none;background:rgba(0,0,0,0);border-radius:3px;height:3px;margin:0;padding:15px 0;z-index:100}.eluvio-player input[type=range]::-webkit-slider-thumb{appearance:none;height:15px;opacity:0;width:15px}.eluvio-player input[type=range]::-moz-range-thumb{appearance:none;height:15px;opacity:0;width:15px}.eluvio-player input[type=range]::-webkit-slider-runnable-track{-webkit-tap-highlight-color:rgba(0,0,0,0);background:rgba(0,0,0,0);height:3px}.eluvio-player input[type=range]::-moz-range-track{-webkit-tap-highlight-color:rgba(0,0,0,0);background:rgba(0,0,0,0);height:3px}.eluvio-player progress{appearance:none;background-color:rgba(0,0,0,0);border:0;border-radius:3px;height:3px}.eluvio-player ::-webkit-progress-value{background-color:#0885fb}.eluvio-player ::-webkit-progress-bar{background-color:rgba(0,0,0,0)}.eluvio-player ::-moz-progress-bar{background-color:#0885fb}.eluvio-player__poster-image{cursor:pointer;height:100%;left:0;object-fit:contain;object-position:center;position:absolute;top:0;width:100%}.eluvio-player__video{background:#000;height:100%;margin:auto;object-fit:contain;object-position:center;width:100%;z-index:1}.eluvio-player__watermark{height:15px;left:15px;pointer-events:none;position:absolute;top:15px;width:auto;z-index:10}.eluvio-player__account-watermark{color:#fff;font-size:8px;opacity:.5;pointer-events:none;position:absolute;right:15px;top:15px;z-index:10}.eluvio-player__hidden-audio-controls{bottom:10px;height:max-content;left:10px;opacity:1;position:absolute;transition:opacity .25s linear;width:max-content;z-index:10}.eluvio-player__hidden-audio-controls button{background:rgba(0,0,0,.8);border-radius:100%;padding:6px}.eluvio-player__controls{align-items:center;background:rgba(0,0,0,.8);bottom:0;display:flex;height:max-content;padding:5px;position:absolute;transition:opacity .25s linear;width:100%;z-index:10}.eluvio-player__controls__button{-webkit-tap-highlight-color:rgba(0,0,0,0);height:35px;max-height:35px;max-width:35px;min-height:35px;min-width:35px;overflow:visible;padding:6px;transition:opacity .25s linear;width:35px}.eluvio-player__controls__button:not(:last-child){margin-right:2px}.eluvio-player__controls__button-volume{padding-right:0}.eluvio-player__controls__button svg{height:100%;max-height:100%;max-width:100%;overflow:visible;width:100%}.eluvio-player__controls__button-multiview-spinning svg{animation:spin 1s ease-in-out infinite}.eluvio-player__controls__volume-container{flex:1 1 auto;max-width:75px;min-width:0}.eluvio-player__controls__volume{background-color:rgba(113,113,113,.5) !important}.eluvio-player__controls__volume::-webkit-progress-value{background-color:#fff}.eluvio-player__controls__volume::-moz-progress-bar{background-color:#fff}.eluvio-player__controls__slider-container{align-items:center;display:flex;flex:1 1 auto;height:100%;justify-content:center;min-width:0;position:relative}.eluvio-player__controls__slider-container__input,.eluvio-player__controls__slider-container__progress{flex:1 1 auto;left:0;margin:0 5px;min-width:0;position:absolute;width:calc(100% - 10px)}.eluvio-player__controls__slider-container__input{width:100%;z-index:0}.eluvio-player__controls__slider-container__progress{pointer-events:none;z-index:2}.eluvio-player__controls__progress-buffer{background-color:rgba(113,113,113,.5) !important;z-index:1}.eluvio-player__controls__progress-buffer::-webkit-progress-value{background-color:rgba(113,113,113,.5)}.eluvio-player__controls__progress-buffer::-moz-progress-bar{background-color:rgba(113,113,113,.5)}.eluvio-player__controls__time{color:#fff;font-size:11px;text-align:center;width:55px}.eluvio-player__controls__right-buttons{align-items:center;display:flex;flex-wrap:nowrap;height:100%}.eluvio-player__controls.eluvio-player__controls-no-progress .eluvio-player__controls__time,.eluvio-player__controls.eluvio-player__controls-no-progress .eluvio-player__controls__progress-slider{visibility:hidden}.eluvio-player__controls__tooltip{background:rgba(0,0,0,.8);border-radius:3px;bottom:45px;color:#fff;font-size:14px;font-weight:300;max-height:calc(100% - 54px);max-width:225px;min-height:20px;opacity:1;padding:10px 5px;pointer-events:none;position:absolute;right:10px;text-align:center;transition:opacity .1s linear;user-select:none;z-index:100}.eluvio-player__controls__tooltip *{line-height:1.2em}.eluvio-player__controls__tooltip:empty{display:none;opacity:0}.eluvio-player__controls__tooltip svg{height:20px;margin-bottom:5px;width:auto}.eluvio-player__controls__settings-menu{background:rgba(0,0,0,.8);border-radius:3px 0 0;bottom:calc(35px + 5px + 5px);color:#fff;max-height:min(90%,100% - (25px + 35px + 5px + 5px));min-height:20px;overflow-y:auto;position:absolute;right:0;width:250px;z-index:100}.eluvio-player__controls__settings-menu-hidden{display:none}.eluvio-player__controls__settings-menu button{border:1px solid rgba(0,0,0,0)}.eluvio-player__controls__settings-menu button.eluvio-player__controls__settings-menu__close{border:1.5px solid #fff;border-radius:100%}.eluvio-player__controls__settings-menu__close{display:none;position:absolute;right:20px;top:20px}.eluvio-player__controls__settings-menu__close *{color:#fff}.eluvio-player__controls__settings-menu__option{border:1px solid rgba(0,0,0,0);color:rgba(255,255,255,.7);cursor:pointer;display:block;font-size:14px;height:max-content;line-height:1.4;padding:9px 20px;text-align:left;width:100%}.eluvio-player__controls__settings-menu__option-back{align-items:center;display:flex;position:relative;width:100%}.eluvio-player__controls__settings-menu__option-back__icon{height:15px;left:20px;margin-right:5px;position:absolute;width:15px}.eluvio-player__controls__settings-menu__option-back__icon svg{height:100%;width:100%}.eluvio-player__controls__settings-menu__option-back__text{padding-inline:25px;width:100%}.eluvio-player__controls__settings-menu__option-selected{color:#fff;font-weight:500}.eluvio-player__controls__settings-menu__option:hover{background:rgba(255,255,255,.1);color:#fff}.eluvio-player__controls__settings-menu__option.focus-visible{border:1px solid rgba(225,225,255,.7)}.eluvio-player__big-play-button{max-height:100px;max-width:100px;min-height:100px;min-width:100px;position:absolute;z-index:10}.eluvio-player__big-play-button svg{height:100%;opacity:.7;overflow:visible;padding:2px;transition:opacity .1s linear;width:100%;z-index:11}.eluvio-player__big-play-button:hover svg{opacity:1}.eluvio-player:fullscreen{margin:0;padding:0}.eluvio-player__ticket-modal{align-items:center;background:#000;display:flex;height:100%;justify-content:center;position:absolute;width:100%}.eluvio-player__ticket-modal__form{align-items:center;background:#121212;border:2px solid #252525;border-radius:3px;display:flex;flex-direction:column;justify-content:center;padding:20px 30px;width:300px}.eluvio-player__ticket-modal__form__text,.eluvio-player__ticket-modal__form__error-text,.eluvio-player__ticket-modal__form__input{margin-bottom:10px}.eluvio-player__ticket-modal__form__text{color:#fff;font-size:16px;font-weight:300;letter-spacing:.05em}.eluvio-player__ticket-modal__form__error-text{color:#a32;font-size:16px}.eluvio-player__ticket-modal__form__error-text:empty{display:none}.eluvio-player__ticket-modal__form__input{background:#fff;border:0;border-radius:3px;font-size:18px;font-weight:bold;letter-spacing:.16em;margin:5px 0 15px;min-height:36px;padding:0 10px;text-align:center;width:100%}.eluvio-player__ticket-modal__form__submit{border-radius:3px;color:#fff;font-size:14px;font-weight:500;height:40px;letter-spacing:.1em;text-transform:uppercase;width:100%}.eluvio-player__ticket-modal__form__submit:disabled{color:rgba(113,113,113,.5)}.eluvio-player__ticket-modal__form button.eluvio-player__ticket-modal__form__submit{background:#252525;margin:0}.eluvio-player__hotspot-overlay{bottom:0;left:0;position:absolute;right:0;top:0;z-index:5}.eluvio-player__hotspot-overlay__target{align-items:center;cursor:pointer;display:flex;justify-content:center;position:absolute;transition:background-color .3s}.eluvio-player__hotspot-overlay__target__title{color:#fff;display:none;font-size:24px;font-weight:300;letter-spacing:.08em;transition:letter-spacing 5s}.eluvio-player__hotspot-overlay__target:hover{background-color:rgba(113,113,113,.3)}.eluvio-player__hotspot-overlay__target:hover .eluvio-player__hotspot-overlay__target__title{display:block;text-shadow:1px 1px #717171}.eluvio-player__hotspot-overlay__target-switching{animation:hotspot-select 1s ease-out}.eluvio-player__hotspot-overlay-visible .eluvio-player__hotspot-overlay__target{background-color:rgba(113,113,113,.3)}.eluvio-player__hotspot-overlay-visible .eluvio-player__hotspot-overlay__target__title{display:block;text-shadow:1px 1px #717171}.eluvio-player.eluvio-player-xl .eluvio-player__controls{padding:calc(5px*1.5)}.eluvio-player.eluvio-player-xl .eluvio-player__controls__tooltip{bottom:65px}.eluvio-player.eluvio-player-xl .eluvio-player__controls__settings-menu{bottom:calc(5px + 35px + 5px + 5px)}.eluvio-player.eluvio-player-m .eluvio-player__error-message__text,.eluvio-player.eluvio-player-s .eluvio-player__error-message__text{font-size:18px}.eluvio-player.eluvio-player-m .eluvio-player__watermark,.eluvio-player.eluvio-player-s .eluvio-player__watermark{height:10px;top:10px}.eluvio-player.eluvio-player-m .eluvio-player__controls,.eluvio-player.eluvio-player-s .eluvio-player__controls{padding:calc(5px*.5)}.eluvio-player.eluvio-player-m .eluvio-player__controls__button:not(.eluvio-player__big-play-button),.eluvio-player.eluvio-player-s .eluvio-player__controls__button:not(.eluvio-player__big-play-button){height:calc(35px*.9);max-height:calc(35px*.9);max-width:calc(35px*.9);min-height:calc(35px*.9);min-width:calc(35px*.9)}.eluvio-player.eluvio-player-m .eluvio-player__controls__settings-menu,.eluvio-player.eluvio-player-s .eluvio-player__controls__settings-menu{bottom:calc(31.5px + 5px);max-height:min(90%,100% - (25px + 31.5px + 5px));right:0}.eluvio-player.eluvio-player-m .eluvio-player__controls__volume-container,.eluvio-player.eluvio-player-s .eluvio-player__controls__volume-container{display:none}.eluvio-player.eluvio-player-m .eluvio-player__big-play-button,.eluvio-player.eluvio-player-s .eluvio-player__big-play-button{max-height:55px;max-width:55px;min-height:55px;min-width:55px}.eluvio-player.eluvio-player-m .eluvio-player__ticket-modal__form,.eluvio-player.eluvio-player-s .eluvio-player__ticket-modal__form{max-height:70%;max-width:70%}.eluvio-player.eluvio-player-m .eluvio-player__hotspot-overlay .eluvio-player__hotspot-overlay__target .eluvio-player__hotspot-overlay__target__title,.eluvio-player.eluvio-player-s .eluvio-player__hotspot-overlay .eluvio-player__hotspot-overlay__target .eluvio-player__hotspot-overlay__target__title{font-size:16px}.eluvio-player.eluvio-player-s .eluvio-player__error-message__text{font-size:14px}.eluvio-player.eluvio-player-s .eluvio-player__controls__time{display:none}.eluvio-player.eluvio-player-s .eluvio-player__controls__tooltip{font-size:10px;max-width:180px}.eluvio-player.eluvio-player-s .eluvio-player__controls__tooltip svg{height:15px;width:15px}.eluvio-player.eluvio-player-s .eluvio-player__controls__settings-menu{align-items:center;height:100%;max-height:100%;padding:80px 0 100px;right:0;top:0;width:100%}.eluvio-player.eluvio-player-s .eluvio-player__controls__settings-menu__option{font-size:20px;margin-bottom:5px;text-align:center}.eluvio-player.eluvio-player-s .eluvio-player__controls__settings-menu__option-back{font-size:24px;margin-bottom:20px}.eluvio-player.eluvio-player-s .eluvio-player__controls__settings-menu__close{display:unset;z-index:100}.eluvio-player.eluvio-player-s.eluvio-player-landscape .eluvio-player__controls__settings-menu{padding:20px 0 50px}.eluvio-player.eluvio-player-s.eluvio-player-landscape .eluvio-player__controls__settings-menu__option{font-size:14px;margin-bottom:5px;text-align:center}.eluvio-player.eluvio-player-s.eluvio-player-landscape .eluvio-player__controls__settings-menu__option-back{font-size:24px;margin-bottom:20px}.eluvio-player.eluvio-player-s.eluvio-player-landscape .eluvio-player__controls__settings-menu__close{display:unset}.eluvio-player.eluvio-player-s .eluvio-player__hotspot-overlay .eluvio-player__hotspot-overlay__target .eluvio-player__hotspot-overlay__target__title{font-size:14px}.-elv-fade-in,.-elv-fade-out{transition:opacity .25s linear}.-elv-fade-out{opacity:0 !important;pointer-events:none !important}.-elv-fade-in{opacity:1}.-elv-no-cursor{cursor:none !important}.-elv-no-cursor *{cursor:none !important}@keyframes hotspot-select{0%{background-color:rgba(255,255,255,.2);opacity:1}50%{background-color:rgba(255,255,255,.7);opacity:.7}100%{background-color:rgba(255,255,255,0);opacity:0}}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}',""]);const a=l},5876:e=>{"use strict";e.exports=crypto},3904:()=>{},6601:()=>{},9657:()=>{},4654:()=>{},9862:()=>{},964:()=>{}},l={};function a(e){var t=l[e];if(void 0!==t)return t.exports;var o=l[e]={id:e,loaded:!1,exports:{}};return n[e].call(o.exports,o,o.exports,a),o.loaded=!0,o.exports}a.m=n,a.amdO={},e=[],a.O=(t,o,r,i)=>{if(!o){var n=1/0;for(s=0;s<e.length;s++){for(var[o,r,i]=e[s],l=!0,p=0;p<o.length;p++)(!1&i||n>=i)&&Object.keys(a.O).every((e=>a.O[e](o[p])))?o.splice(p--,1):(l=!1,i<n&&(n=i));if(l){e.splice(s--,1);var u=r();void 0!==u&&(t=u)}}return t}i=i||0;for(var s=e.length;s>0&&e[s-1][2]>i;s--)e[s]=e[s-1];e[s]=[o,r,i]},a.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return a.d(t,{a:t}),t},o=Object.getPrototypeOf?e=>Object.getPrototypeOf(e):e=>e.__proto__,a.t=function(e,r){if(1&r&&(e=this(e)),8&r)return e;if("object"==typeof e&&e){if(4&r&&e.__esModule)return e;if(16&r&&"function"==typeof e.then)return e}var i=Object.create(null);a.r(i);var n={};t=t||[null,o({}),o([]),o(o)];for(var l=2&r&&e;"object"==typeof l&&!~t.indexOf(l);l=o(l))Object.getOwnPropertyNames(l).forEach((t=>n[t]=()=>e[t]));return n.default=()=>e,a.d(i,n),i},a.d=(e,t)=>{for(var o in t)a.o(t,o)&&!a.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:t[o]})},a.f={},a.e=e=>Promise.all(Object.keys(a.f).reduce(((t,o)=>(a.f[o](e,t),t)),[])),a.u=e=>"bundle."+e+"."+{333:"56cecff855c747d06da1",552:"f55e941d82c928e09395",688:"deaafcaddb0a963835f3",978:"5b37f5b0d74481e4be10"}[e]+".js",a.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),a.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r={},i="@eluvio/elv-player-js:",a.l=(e,t,o,n)=>{if(r[e])r[e].push(t);else{var l,p;if(void 0!==o)for(var u=document.getElementsByTagName("script"),s=0;s<u.length;s++){var c=u[s];if(c.getAttribute("src")==e||c.getAttribute("data-webpack")==i+o){l=c;break}}l||(p=!0,(l=document.createElement("script")).charset="utf-8",l.timeout=120,a.nc&&l.setAttribute("nonce",a.nc),l.setAttribute("data-webpack",i+o),l.src=e),r[e]=[t];var _=(t,o)=>{l.onerror=l.onload=null,clearTimeout(y);var i=r[e];if(delete r[e],l.parentNode&&l.parentNode.removeChild(l),i&&i.forEach((e=>e(o))),t)return t(o)},y=setTimeout(_.bind(null,void 0,{type:"timeout",target:l}),12e4);l.onerror=_.bind(null,l.onerror),l.onload=_.bind(null,l.onload),p&&document.head.appendChild(l)}},a.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.nmd=e=>(e.paths=[],e.children||(e.children=[]),e),a.p="/",(()=>{var e={179:0};a.f.j=(t,o)=>{var r=a.o(e,t)?e[t]:void 0;if(0!==r)if(r)o.push(r[2]);else{var i=new Promise(((o,i)=>r=e[t]=[o,i]));o.push(r[2]=i);var n=a.p+a.u(t),l=new Error;a.l(n,(o=>{if(a.o(e,t)&&(0!==(r=e[t])&&(e[t]=void 0),r)){var i=o&&("load"===o.type?"missing":o.type),n=o&&o.target&&o.target.src;l.message="Loading chunk "+t+" failed.\n("+i+": "+n+")",l.name="ChunkLoadError",l.type=i,l.request=n,r[1](l)}}),"chunk-"+t,t)}},a.O.j=t=>0===e[t];var t=(t,o)=>{var r,i,[n,l,p]=o,u=0;if(n.some((t=>0!==e[t]))){for(r in l)a.o(l,r)&&(a.m[r]=l[r]);if(p)var s=p(a)}for(t&&t(o);u<n.length;u++)i=n[u],a.o(e,i)&&e[i]&&e[i][0](),e[i]=0;return a.O(s)},o=self.webpackChunk_eluvio_elv_player_js=self.webpackChunk_eluvio_elv_player_js||[];o.forEach(t.bind(null,0)),o.push=t.bind(null,o.push.bind(o))})(),a.nc=void 0;var p=a.O(void 0,[514],(()=>a(6887)));p=a.O(p)})();
|
|
2
|
+
(()=>{var e,t,o,r,i,l={6887:(e,t,o)=>{"use strict";var r=o(3379),i=o.n(r),l=o(7795),n=o.n(l),a=o(569),p=o.n(a),s=o(3565),u=o.n(s),_=o(9216),c=o.n(_),y=o(4589),v=o.n(y),h=o(9290),d={};d.styleTagTransform=v(),d.setAttributes=u(),d.insert=p().bind(null,"head"),d.domAPI=n(),d.insertStyleElement=c(),i()(h.Z,d),h.Z&&h.Z.locals&&h.Z.locals,o(2875),o(9250),o(6609),o(2542),o.p;var f=o(9328);function g(e){return g="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},g(e)}function m(){m=function(){return t};var e,t={},o=Object.prototype,r=o.hasOwnProperty,i=Object.defineProperty||function(e,t,o){e[t]=o.value},l="function"==typeof Symbol?Symbol:{},n=l.iterator||"@@iterator",a=l.asyncIterator||"@@asyncIterator",p=l.toStringTag||"@@toStringTag";function s(e,t,o){return Object.defineProperty(e,t,{value:o,enumerable:!0,configurable:!0,writable:!0}),e[t]}try{s({},"")}catch(e){s=function(e,t,o){return e[t]=o}}function u(e,t,o,r){var l=t&&t.prototype instanceof f?t:f,n=Object.create(l.prototype),a=new N(r||[]);return i(n,"_invoke",{value:z(e,o,a)}),n}function _(e,t,o){try{return{type:"normal",arg:e.call(t,o)}}catch(e){return{type:"throw",arg:e}}}t.wrap=u;var c="suspendedStart",y="suspendedYield",v="executing",h="completed",d={};function f(){}function b(){}function x(){}var w={};s(w,n,(function(){return this}));var k=Object.getPrototypeOf,O=k&&k(k(T([])));O&&O!==o&&r.call(O,n)&&(w=O);var E=x.prototype=f.prototype=Object.create(w);function L(e){["next","throw","return"].forEach((function(t){s(e,t,(function(e){return this._invoke(t,e)}))}))}function j(e,t){function o(i,l,n,a){var p=_(e[i],e,l);if("throw"!==p.type){var s=p.arg,u=s.value;return u&&"object"==g(u)&&r.call(u,"__await")?t.resolve(u.__await).then((function(e){o("next",e,n,a)}),(function(e){o("throw",e,n,a)})):t.resolve(u).then((function(e){s.value=e,n(s)}),(function(e){return o("throw",e,n,a)}))}a(p.arg)}var l;i(this,"_invoke",{value:function(e,r){function i(){return new t((function(t,i){o(e,r,t,i)}))}return l=l?l.then(i,i):i()}})}function z(t,o,r){var i=c;return function(l,n){if(i===v)throw new Error("Generator is already running");if(i===h){if("throw"===l)throw n;return{value:e,done:!0}}for(r.method=l,r.arg=n;;){var a=r.delegate;if(a){var p=F(a,r);if(p){if(p===d)continue;return p}}if("next"===r.method)r.sent=r._sent=r.arg;else if("throw"===r.method){if(i===c)throw i=h,r.arg;r.dispatchException(r.arg)}else"return"===r.method&&r.abrupt("return",r.arg);i=v;var s=_(t,o,r);if("normal"===s.type){if(i=r.done?h:y,s.arg===d)continue;return{value:s.arg,done:r.done}}"throw"===s.type&&(i=h,r.method="throw",r.arg=s.arg)}}}function F(t,o){var r=o.method,i=t.iterator[r];if(i===e)return o.delegate=null,"throw"===r&&t.iterator.return&&(o.method="return",o.arg=e,F(t,o),"throw"===o.method)||"return"!==r&&(o.method="throw",o.arg=new TypeError("The iterator does not provide a '"+r+"' method")),d;var l=_(i,t.iterator,o.arg);if("throw"===l.type)return o.method="throw",o.arg=l.arg,o.delegate=null,d;var n=l.arg;return n?n.done?(o[t.resultName]=n.value,o.next=t.nextLoc,"return"!==o.method&&(o.method="next",o.arg=e),o.delegate=null,d):n:(o.method="throw",o.arg=new TypeError("iterator result is not an object"),o.delegate=null,d)}function S(e){var t={tryLoc:e[0]};1 in e&&(t.catchLoc=e[1]),2 in e&&(t.finallyLoc=e[2],t.afterLoc=e[3]),this.tryEntries.push(t)}function A(e){var t=e.completion||{};t.type="normal",delete t.arg,e.completion=t}function N(e){this.tryEntries=[{tryLoc:"root"}],e.forEach(S,this),this.reset(!0)}function T(t){if(t||""===t){var o=t[n];if(o)return o.call(t);if("function"==typeof t.next)return t;if(!isNaN(t.length)){var i=-1,l=function o(){for(;++i<t.length;)if(r.call(t,i))return o.value=t[i],o.done=!1,o;return o.value=e,o.done=!0,o};return l.next=l}}throw new TypeError(g(t)+" is not iterable")}return b.prototype=x,i(E,"constructor",{value:x,configurable:!0}),i(x,"constructor",{value:b,configurable:!0}),b.displayName=s(x,p,"GeneratorFunction"),t.isGeneratorFunction=function(e){var t="function"==typeof e&&e.constructor;return!!t&&(t===b||"GeneratorFunction"===(t.displayName||t.name))},t.mark=function(e){return Object.setPrototypeOf?Object.setPrototypeOf(e,x):(e.__proto__=x,s(e,p,"GeneratorFunction")),e.prototype=Object.create(E),e},t.awrap=function(e){return{__await:e}},L(j.prototype),s(j.prototype,a,(function(){return this})),t.AsyncIterator=j,t.async=function(e,o,r,i,l){void 0===l&&(l=Promise);var n=new j(u(e,o,r,i),l);return t.isGeneratorFunction(o)?n:n.next().then((function(e){return e.done?e.value:n.next()}))},L(E),s(E,p,"Generator"),s(E,n,(function(){return this})),s(E,"toString",(function(){return"[object Generator]"})),t.keys=function(e){var t=Object(e),o=[];for(var r in t)o.push(r);return o.reverse(),function e(){for(;o.length;){var r=o.pop();if(r in t)return e.value=r,e.done=!1,e}return e.done=!0,e}},t.values=T,N.prototype={constructor:N,reset:function(t){if(this.prev=0,this.next=0,this.sent=this._sent=e,this.done=!1,this.delegate=null,this.method="next",this.arg=e,this.tryEntries.forEach(A),!t)for(var o in this)"t"===o.charAt(0)&&r.call(this,o)&&!isNaN(+o.slice(1))&&(this[o]=e)},stop:function(){this.done=!0;var e=this.tryEntries[0].completion;if("throw"===e.type)throw e.arg;return this.rval},dispatchException:function(t){if(this.done)throw t;var o=this;function i(r,i){return a.type="throw",a.arg=t,o.next=r,i&&(o.method="next",o.arg=e),!!i}for(var l=this.tryEntries.length-1;l>=0;--l){var n=this.tryEntries[l],a=n.completion;if("root"===n.tryLoc)return i("end");if(n.tryLoc<=this.prev){var p=r.call(n,"catchLoc"),s=r.call(n,"finallyLoc");if(p&&s){if(this.prev<n.catchLoc)return i(n.catchLoc,!0);if(this.prev<n.finallyLoc)return i(n.finallyLoc)}else if(p){if(this.prev<n.catchLoc)return i(n.catchLoc,!0)}else{if(!s)throw new Error("try statement without catch or finally");if(this.prev<n.finallyLoc)return i(n.finallyLoc)}}}},abrupt:function(e,t){for(var o=this.tryEntries.length-1;o>=0;--o){var i=this.tryEntries[o];if(i.tryLoc<=this.prev&&r.call(i,"finallyLoc")&&this.prev<i.finallyLoc){var l=i;break}}l&&("break"===e||"continue"===e)&&l.tryLoc<=t&&t<=l.finallyLoc&&(l=null);var n=l?l.completion:{};return n.type=e,n.arg=t,l?(this.method="next",this.next=l.finallyLoc,d):this.complete(n)},complete:function(e,t){if("throw"===e.type)throw e.arg;return"break"===e.type||"continue"===e.type?this.next=e.arg:"return"===e.type?(this.rval=this.arg=e.arg,this.method="return",this.next="end"):"normal"===e.type&&t&&(this.next=t),d},finish:function(e){for(var t=this.tryEntries.length-1;t>=0;--t){var o=this.tryEntries[t];if(o.finallyLoc===e)return this.complete(o.completion,o.afterLoc),A(o),d}},catch:function(e){for(var t=this.tryEntries.length-1;t>=0;--t){var o=this.tryEntries[t];if(o.tryLoc===e){var r=o.completion;if("throw"===r.type){var i=r.arg;A(o)}return i}}throw new Error("illegal catch attempt")},delegateYield:function(t,o,r){return this.delegate={iterator:T(t),resultName:o,nextLoc:r},"next"===this.method&&(this.arg=e),d}},t}function b(e,t,o,r,i,l,n){try{var a=e[l](n),p=a.value}catch(e){return void o(e)}a.done?t(p):Promise.resolve(p).then(r,i)}var x,w={DEFAULT:"default",LOW_LATENCY:"low_latency"},k={FAIRPLAY:"fairplay",SAMPLE_AES:"sample-aes",AES128:"aes-128",WIDEVINE:"widevine",CLEAR:"clear"},O={HLS:"hls",DASH:"dash"},E={OFF:!1,WHEN_VISIBLE:"when visible",ON:!0},L={OFF:!1,OFF_WITH_VOLUME_TOGGLE:"off_with_volume_toggle",AUTO_HIDE:"autohide",ON:!0,DEFAULT:"default"},j={OFF:!1,ON:!0},z={OFF:!1,WHEN_NOT_VISIBLE:"when_not_visible",OFF_IF_POSSIBLE:"off_if_possible",ON:!0},F={OFF:!1,ON:!0},S={OFF:!1,ON:!0};O.HLS,O.DASH,k.FAIRPLAY,k.SAMPLE_AES,k.AES128,k.WIDEVINE,k.CLEAR,L.AUTO_HIDE,E.OFF,z.OFF,j.OFF,F.ON,S.OFF,w.DEFAULT,x=m().mark((function e(t){return m().wrap((function(e){for(;;)switch(e.prev=e.next){case 0:case"end":return e.stop()}}),e)})),f.Utils.LiveHLSJSSettings({lowLatency:!0})},9290:(e,t,o)=>{"use strict";o.d(t,{Z:()=>a});var r=o(8515),i=o.n(r),l=o(2616),n=o.n(l)()(i());n.push([e.id,'@keyframes fade-out{0%{opacity:1}100%{opacity:0}}.eluvio-player{align-items:center;display:flex;height:100%;justify-content:center;max-height:100%;max-width:100%;object-fit:contain;position:relative;width:100%}.eluvio-player--error .eluvio-player__controls,.eluvio-player--error .eluvio-player__big-play-button{display:none}.eluvio-player__error-message{align-items:center;display:flex;height:100%;justify-content:center;padding:20px;position:absolute;width:100%;z-index:1000}.eluvio-player__error-message__text{color:#a32;font-size:24px;max-width:600px;text-align:center}.eluvio-player--seek-left::after,.eluvio-player--seek-right::after{animation:fade-out .5s ease;content:"";height:100%;opacity:0;pointer-events:none;position:absolute;transition:background-color 1s ease;width:100%;z-index:100}.eluvio-player--seek-left::after{background:linear-gradient(90deg, rgba(100, 100, 100, 0.15), transparent 15%)}.eluvio-player--seek-right::after{background:linear-gradient(90deg, transparent 85%, rgba(100, 100, 100, 0.15))}.eluvio-player.eluvio-player-restarted .eluvio-player__big-play-button{display:none}.eluvio-player *{box-sizing:border-box;font-family:"Helvetica Neue",Helvetica,sans-serif;overscroll-behavior-y:contain}.eluvio-player input[type=range],.eluvio-player button{background:rgba(0,0,0,0);border:0;cursor:pointer;justify-content:center;transition:opacity .1s linear}.eluvio-player input[type=range]:hover,.eluvio-player button:hover{opacity:1}.eluvio-player input[type=range]:focus,.eluvio-player button:focus{outline:0}.eluvio-player input[type=range].focus-visible,.eluvio-player button.focus-visible{box-shadow:0 0 2px rgba(225,225,255,.7);outline:0}.eluvio-player input[type=range]{-webkit-tap-highlight-color:rgba(0,0,0,0);appearance:none;background:rgba(0,0,0,0);border-radius:3px;height:3px;margin:0;padding:15px 0;z-index:100}.eluvio-player input[type=range]::-webkit-slider-thumb{appearance:none;height:15px;opacity:0;width:15px}.eluvio-player input[type=range]::-moz-range-thumb{appearance:none;height:15px;opacity:0;width:15px}.eluvio-player input[type=range]::-webkit-slider-runnable-track{-webkit-tap-highlight-color:rgba(0,0,0,0);background:rgba(0,0,0,0);height:3px}.eluvio-player input[type=range]::-moz-range-track{-webkit-tap-highlight-color:rgba(0,0,0,0);background:rgba(0,0,0,0);height:3px}.eluvio-player progress{appearance:none;background-color:rgba(0,0,0,0);border:0;border-radius:3px;height:3px}.eluvio-player ::-webkit-progress-value{background-color:#3784eb}.eluvio-player ::-webkit-progress-bar{background-color:rgba(0,0,0,0)}.eluvio-player ::-moz-progress-bar{background-color:#3784eb}.eluvio-player__poster-image{cursor:pointer;height:100%;left:0;object-fit:contain;object-position:center;position:absolute;top:0;width:100%}.eluvio-player__video{background:#000;height:100%;margin:auto;object-fit:contain;object-position:center;width:100%;z-index:1}.eluvio-player__watermark{height:15px;left:15px;pointer-events:none;position:absolute;top:15px;width:auto;z-index:10}.eluvio-player__account-watermark{color:#fff;font-size:8px;opacity:.5;pointer-events:none;position:absolute;right:15px;top:15px;z-index:10}.eluvio-player__hidden-audio-controls{bottom:10px;height:max-content;left:10px;opacity:1;position:absolute;transition:opacity .25s linear;width:max-content;z-index:10}.eluvio-player__hidden-audio-controls button{background:rgba(0,0,0,.8);border-radius:100%;padding:6px}.eluvio-player__controls{align-items:center;background:rgba(0,0,0,.8);bottom:0;display:flex;height:max-content;padding:5px;position:absolute;transition:opacity .25s linear;width:100%;z-index:10}.eluvio-player__controls__button{-webkit-tap-highlight-color:rgba(0,0,0,0);height:35px;max-height:35px;max-width:35px;min-height:35px;min-width:35px;overflow:visible;padding:6px;transition:opacity .25s linear;width:35px}.eluvio-player__controls__button:not(:last-child){margin-right:2px}.eluvio-player__controls__button-volume{padding-right:0}.eluvio-player__controls__button svg{height:100%;max-height:100%;max-width:100%;overflow:visible;width:100%}.eluvio-player__controls__button-multiview-spinning svg{animation:spin 1s ease-in-out infinite}.eluvio-player__controls__volume-container{flex:1 1 auto;max-width:75px;min-width:0}.eluvio-player__controls__volume{background-color:rgba(113,113,113,.5) !important}.eluvio-player__controls__volume::-webkit-progress-value{background-color:#fff}.eluvio-player__controls__volume::-moz-progress-bar{background-color:#fff}.eluvio-player__controls__slider-container{align-items:center;display:flex;flex:1 1 auto;height:100%;justify-content:center;min-width:0;position:relative}.eluvio-player__controls__slider-container__input,.eluvio-player__controls__slider-container__progress{flex:1 1 auto;left:0;margin:0 5px;min-width:0;position:absolute;width:calc(100% - 10px)}.eluvio-player__controls__slider-container__input{width:100%;z-index:0}.eluvio-player__controls__slider-container__progress{pointer-events:none;z-index:2}.eluvio-player__controls__progress-buffer{background-color:rgba(113,113,113,.5) !important;z-index:1}.eluvio-player__controls__progress-buffer::-webkit-progress-value{background-color:rgba(113,113,113,.5)}.eluvio-player__controls__progress-buffer::-moz-progress-bar{background-color:rgba(113,113,113,.5)}.eluvio-player__controls__time{color:#fff;font-size:11px;text-align:center;width:55px}.eluvio-player__controls__right-buttons{align-items:center;display:flex;flex-wrap:nowrap;height:100%}.eluvio-player__controls.eluvio-player__controls-no-progress .eluvio-player__controls__time,.eluvio-player__controls.eluvio-player__controls-no-progress .eluvio-player__controls__progress-slider{visibility:hidden}.eluvio-player__controls__tooltip{background:rgba(0,0,0,.8);border-radius:3px;bottom:45px;color:#fff;font-size:14px;font-weight:300;max-height:calc(100% - 54px);max-width:225px;min-height:20px;opacity:1;padding:10px 5px;pointer-events:none;position:absolute;right:10px;text-align:center;transition:opacity .1s linear;user-select:none;z-index:100}.eluvio-player__controls__tooltip *{line-height:1.2em}.eluvio-player__controls__tooltip:empty{display:none;opacity:0}.eluvio-player__controls__tooltip svg{height:20px;margin-bottom:5px;width:auto}.eluvio-player__controls__settings-menu{background:rgba(0,0,0,.8);border-radius:3px 0 0;bottom:calc(35px + 5px + 5px);color:#fff;max-height:min(90%,100% - (25px + 35px + 5px + 5px));min-height:20px;overflow-y:auto;position:absolute;right:0;width:250px;z-index:100}.eluvio-player__controls__settings-menu-hidden{display:none}.eluvio-player__controls__settings-menu button{border:1px solid rgba(0,0,0,0)}.eluvio-player__controls__settings-menu button.eluvio-player__controls__settings-menu__close{border:1.5px solid #fff;border-radius:100%}.eluvio-player__controls__settings-menu__close{display:none;position:absolute;right:20px;top:20px}.eluvio-player__controls__settings-menu__close *{color:#fff}.eluvio-player__controls__settings-menu__option{border:1px solid rgba(0,0,0,0);color:rgba(255,255,255,.7);cursor:pointer;display:block;font-size:14px;height:max-content;line-height:1.4;padding:9px 20px;text-align:left;width:100%}.eluvio-player__controls__settings-menu__option-back{align-items:center;display:flex;position:relative;width:100%}.eluvio-player__controls__settings-menu__option-back__icon{height:15px;left:20px;margin-right:5px;position:absolute;width:15px}.eluvio-player__controls__settings-menu__option-back__icon svg{height:100%;width:100%}.eluvio-player__controls__settings-menu__option-back__text{padding-inline:25px;width:100%}.eluvio-player__controls__settings-menu__option-selected{color:#fff;font-weight:500}.eluvio-player__controls__settings-menu__option:hover{background:rgba(255,255,255,.1);color:#fff}.eluvio-player__controls__settings-menu__option.focus-visible{border:1px solid rgba(225,225,255,.7)}.eluvio-player__big-play-button{max-height:100px;max-width:100px;min-height:100px;min-width:100px;position:absolute;z-index:10}.eluvio-player__big-play-button svg{height:100%;opacity:.7;overflow:visible;padding:2px;transition:opacity .1s linear;width:100%;z-index:11}.eluvio-player__big-play-button:hover svg{opacity:1}.eluvio-player:fullscreen{margin:0;padding:0}.eluvio-player__hls-options-form-container{align-items:center;background-color:rgba(0,0,0,.5);bottom:0;display:flex;justify-content:center;left:0;position:absolute;right:0;top:0;z-index:100}.eluvio-player__hls-options-form{background-color:rgba(0,0,0,.8);border-radius:5px;color:#fff;display:flex;flex-direction:column;height:360px;max-height:100%;max-width:100%;padding:30px 30px 20px;width:500px}.eluvio-player__hls-options-form__title{font-size:16px;margin-top:0}.eluvio-player__hls-options-form__input{background-color:rgba(0,0,0,.8);border:1px solid #252525;color:#fff;flex:1 1 100%;font-size:14px;padding:.5rem;width:100%}.eluvio-player__hls-options-form__input:focus{outline:none}.eluvio-player__hls-options-form__input.focus-visible{outline:1px solid rgba(225,225,255,.7)}.eluvio-player__hls-options-form__input--invalid{border:1px solid #a32}.eluvio-player__hls-options-form__api-info{align-items:center;display:flex;font-size:10px;justify-content:space-between;padding:3px}.eluvio-player__hls-options-form__version{opacity:.5}.eluvio-player__hls-options-form__api-link{color:#fff}.eluvio-player__hls-options-form__actions{align-items:center;display:flex;justify-content:flex-end;margin-top:10px}.eluvio-player__hls-options-form button.eluvio-player__hls-options-form__action{align-items:center;background-color:#ddd;border-radius:3px;color:#000;cursor:pointer;display:flex;height:30px;justify-content:center;width:100px}.eluvio-player__hls-options-form button.eluvio-player__hls-options-form__action.focus-visible{border:1px solid rgba(225,225,255,.7);box-shadow:2px 2px 5px rgba(225,225,255,.7)}.eluvio-player__hls-options-form button.eluvio-player__hls-options-form__action:disabled{opacity:.5}.eluvio-player__hls-options-form button.eluvio-player__hls-options-form__action:not(:last-child){margin-right:10px}.eluvio-player__hls-options-form button.eluvio-player__hls-options-form__submit{background-color:#3784eb;color:#fff}.eluvio-player__ticket-modal{align-items:center;background:#000;display:flex;height:100%;justify-content:center;position:absolute;width:100%}.eluvio-player__ticket-modal__form{align-items:center;background:#121212;border:2px solid #252525;border-radius:3px;display:flex;flex-direction:column;justify-content:center;padding:20px 30px;width:300px}.eluvio-player__ticket-modal__form__text,.eluvio-player__ticket-modal__form__error-text,.eluvio-player__ticket-modal__form__input{margin-bottom:10px}.eluvio-player__ticket-modal__form__text{color:#fff;font-size:16px;font-weight:300;letter-spacing:.05em}.eluvio-player__ticket-modal__form__error-text{color:#a32;font-size:16px}.eluvio-player__ticket-modal__form__error-text:empty{display:none}.eluvio-player__ticket-modal__form__input{background:#fff;border:0;border-radius:3px;font-size:18px;font-weight:bold;letter-spacing:.16em;margin:5px 0 15px;min-height:36px;padding:0 10px;text-align:center;width:100%}.eluvio-player__ticket-modal__form__submit{border-radius:3px;color:#fff;font-size:14px;font-weight:500;height:40px;letter-spacing:.1em;text-transform:uppercase;width:100%}.eluvio-player__ticket-modal__form__submit:disabled{color:rgba(113,113,113,.5)}.eluvio-player__ticket-modal__form button.eluvio-player__ticket-modal__form__submit{background:#252525;margin:0}.eluvio-player__hotspot-overlay{bottom:0;left:0;position:absolute;right:0;top:0;z-index:5}.eluvio-player__hotspot-overlay__target{align-items:center;cursor:pointer;display:flex;justify-content:center;position:absolute;transition:background-color .3s}.eluvio-player__hotspot-overlay__target__title{color:#fff;display:none;font-size:24px;font-weight:300;letter-spacing:.08em;transition:letter-spacing 5s}.eluvio-player__hotspot-overlay__target:hover{background-color:rgba(113,113,113,.3)}.eluvio-player__hotspot-overlay__target:hover .eluvio-player__hotspot-overlay__target__title{display:block;text-shadow:1px 1px #717171}.eluvio-player__hotspot-overlay__target-switching{animation:hotspot-select 1s ease-out}.eluvio-player__hotspot-overlay-visible .eluvio-player__hotspot-overlay__target{background-color:rgba(113,113,113,.3)}.eluvio-player__hotspot-overlay-visible .eluvio-player__hotspot-overlay__target__title{display:block;text-shadow:1px 1px #717171}.eluvio-player.eluvio-player-xl .eluvio-player__controls{padding:calc(5px*1.5)}.eluvio-player.eluvio-player-xl .eluvio-player__controls__tooltip{bottom:65px}.eluvio-player.eluvio-player-xl .eluvio-player__controls__settings-menu{bottom:calc(5px + 35px + 5px + 5px)}.eluvio-player.eluvio-player-m .eluvio-player__error-message__text,.eluvio-player.eluvio-player-s .eluvio-player__error-message__text{font-size:18px}.eluvio-player.eluvio-player-m .eluvio-player__watermark,.eluvio-player.eluvio-player-s .eluvio-player__watermark{height:10px;top:10px}.eluvio-player.eluvio-player-m .eluvio-player__controls,.eluvio-player.eluvio-player-s .eluvio-player__controls{padding:calc(5px*.5)}.eluvio-player.eluvio-player-m .eluvio-player__controls__button:not(.eluvio-player__big-play-button),.eluvio-player.eluvio-player-s .eluvio-player__controls__button:not(.eluvio-player__big-play-button){height:calc(35px*.9);max-height:calc(35px*.9);max-width:calc(35px*.9);min-height:calc(35px*.9);min-width:calc(35px*.9)}.eluvio-player.eluvio-player-m .eluvio-player__controls__settings-menu,.eluvio-player.eluvio-player-s .eluvio-player__controls__settings-menu{bottom:calc(31.5px + 5px);max-height:min(90%,100% - (25px + 31.5px + 5px));right:0}.eluvio-player.eluvio-player-m .eluvio-player__controls__volume-container,.eluvio-player.eluvio-player-s .eluvio-player__controls__volume-container{display:none}.eluvio-player.eluvio-player-m .eluvio-player__big-play-button,.eluvio-player.eluvio-player-s .eluvio-player__big-play-button{max-height:55px;max-width:55px;min-height:55px;min-width:55px}.eluvio-player.eluvio-player-m .eluvio-player__ticket-modal__form,.eluvio-player.eluvio-player-s .eluvio-player__ticket-modal__form{max-height:70%;max-width:70%}.eluvio-player.eluvio-player-m .eluvio-player__hotspot-overlay .eluvio-player__hotspot-overlay__target .eluvio-player__hotspot-overlay__target__title,.eluvio-player.eluvio-player-s .eluvio-player__hotspot-overlay .eluvio-player__hotspot-overlay__target .eluvio-player__hotspot-overlay__target__title{font-size:16px}.eluvio-player.eluvio-player-s .eluvio-player__error-message__text{font-size:14px}.eluvio-player.eluvio-player-s .eluvio-player__controls__time{display:none}.eluvio-player.eluvio-player-s .eluvio-player__controls__tooltip{font-size:10px;max-width:180px}.eluvio-player.eluvio-player-s .eluvio-player__controls__tooltip svg{height:15px;width:15px}.eluvio-player.eluvio-player-s .eluvio-player__controls__settings-menu{align-items:center;height:100%;max-height:100%;padding:80px 0 100px;right:0;top:0;width:100%}.eluvio-player.eluvio-player-s .eluvio-player__controls__settings-menu__option{font-size:20px;margin-bottom:5px;text-align:center}.eluvio-player.eluvio-player-s .eluvio-player__controls__settings-menu__option-back{font-size:24px;margin-bottom:20px}.eluvio-player.eluvio-player-s .eluvio-player__controls__settings-menu__close{display:unset;z-index:100}.eluvio-player.eluvio-player-s.eluvio-player-landscape .eluvio-player__controls__settings-menu{padding:20px 0 50px}.eluvio-player.eluvio-player-s.eluvio-player-landscape .eluvio-player__controls__settings-menu__option{font-size:14px;margin-bottom:5px;text-align:center}.eluvio-player.eluvio-player-s.eluvio-player-landscape .eluvio-player__controls__settings-menu__option-back{font-size:24px;margin-bottom:20px}.eluvio-player.eluvio-player-s.eluvio-player-landscape .eluvio-player__controls__settings-menu__close{display:unset}.eluvio-player.eluvio-player-s .eluvio-player__hotspot-overlay .eluvio-player__hotspot-overlay__target .eluvio-player__hotspot-overlay__target__title{font-size:14px}.-elv-fade-in,.-elv-fade-out{transition:opacity .25s linear}.-elv-fade-out{opacity:0 !important;pointer-events:none !important}.-elv-fade-in{opacity:1}.-elv-no-cursor{cursor:none !important}.-elv-no-cursor *{cursor:none !important}@keyframes hotspot-select{0%{background-color:rgba(255,255,255,.2);opacity:1}50%{background-color:rgba(255,255,255,.7);opacity:.7}100%{background-color:rgba(255,255,255,0);opacity:0}}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}',""]);const a=n},5876:e=>{"use strict";e.exports=crypto},3904:()=>{},6601:()=>{},9657:()=>{},4654:()=>{},9862:()=>{},964:()=>{}},n={};function a(e){var t=n[e];if(void 0!==t)return t.exports;var o=n[e]={id:e,loaded:!1,exports:{}};return l[e].call(o.exports,o,o.exports,a),o.loaded=!0,o.exports}a.m=l,a.amdO={},e=[],a.O=(t,o,r,i)=>{if(!o){var l=1/0;for(u=0;u<e.length;u++){for(var[o,r,i]=e[u],n=!0,p=0;p<o.length;p++)(!1&i||l>=i)&&Object.keys(a.O).every((e=>a.O[e](o[p])))?o.splice(p--,1):(n=!1,i<l&&(l=i));if(n){e.splice(u--,1);var s=r();void 0!==s&&(t=s)}}return t}i=i||0;for(var u=e.length;u>0&&e[u-1][2]>i;u--)e[u]=e[u-1];e[u]=[o,r,i]},a.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return a.d(t,{a:t}),t},o=Object.getPrototypeOf?e=>Object.getPrototypeOf(e):e=>e.__proto__,a.t=function(e,r){if(1&r&&(e=this(e)),8&r)return e;if("object"==typeof e&&e){if(4&r&&e.__esModule)return e;if(16&r&&"function"==typeof e.then)return e}var i=Object.create(null);a.r(i);var l={};t=t||[null,o({}),o([]),o(o)];for(var n=2&r&&e;"object"==typeof n&&!~t.indexOf(n);n=o(n))Object.getOwnPropertyNames(n).forEach((t=>l[t]=()=>e[t]));return l.default=()=>e,a.d(i,l),i},a.d=(e,t)=>{for(var o in t)a.o(t,o)&&!a.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:t[o]})},a.f={},a.e=e=>Promise.all(Object.keys(a.f).reduce(((t,o)=>(a.f[o](e,t),t)),[])),a.u=e=>"bundle."+e+"."+{333:"56cecff855c747d06da1",552:"f55e941d82c928e09395",688:"deaafcaddb0a963835f3",978:"5b37f5b0d74481e4be10"}[e]+".js",a.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),a.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r={},i="@eluvio/elv-player-js:",a.l=(e,t,o,l)=>{if(r[e])r[e].push(t);else{var n,p;if(void 0!==o)for(var s=document.getElementsByTagName("script"),u=0;u<s.length;u++){var _=s[u];if(_.getAttribute("src")==e||_.getAttribute("data-webpack")==i+o){n=_;break}}n||(p=!0,(n=document.createElement("script")).charset="utf-8",n.timeout=120,a.nc&&n.setAttribute("nonce",a.nc),n.setAttribute("data-webpack",i+o),n.src=e),r[e]=[t];var c=(t,o)=>{n.onerror=n.onload=null,clearTimeout(y);var i=r[e];if(delete r[e],n.parentNode&&n.parentNode.removeChild(n),i&&i.forEach((e=>e(o))),t)return t(o)},y=setTimeout(c.bind(null,void 0,{type:"timeout",target:n}),12e4);n.onerror=c.bind(null,n.onerror),n.onload=c.bind(null,n.onload),p&&document.head.appendChild(n)}},a.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.nmd=e=>(e.paths=[],e.children||(e.children=[]),e),a.p="/",(()=>{var e={179:0};a.f.j=(t,o)=>{var r=a.o(e,t)?e[t]:void 0;if(0!==r)if(r)o.push(r[2]);else{var i=new Promise(((o,i)=>r=e[t]=[o,i]));o.push(r[2]=i);var l=a.p+a.u(t),n=new Error;a.l(l,(o=>{if(a.o(e,t)&&(0!==(r=e[t])&&(e[t]=void 0),r)){var i=o&&("load"===o.type?"missing":o.type),l=o&&o.target&&o.target.src;n.message="Loading chunk "+t+" failed.\n("+i+": "+l+")",n.name="ChunkLoadError",n.type=i,n.request=l,r[1](n)}}),"chunk-"+t,t)}},a.O.j=t=>0===e[t];var t=(t,o)=>{var r,i,[l,n,p]=o,s=0;if(l.some((t=>0!==e[t]))){for(r in n)a.o(n,r)&&(a.m[r]=n[r]);if(p)var u=p(a)}for(t&&t(o);s<l.length;s++)i=l[s],a.o(e,i)&&e[i]&&e[i][0](),e[i]=0;return a.O(u)},o=self.webpackChunk_eluvio_elv_player_js=self.webpackChunk_eluvio_elv_player_js||[];o.forEach(t.bind(null,0)),o.push=t.bind(null,o.push.bind(o))})(),a.nc=void 0;var p=a.O(void 0,[514],(()=>a(6887)));p=a.O(p)})();
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@eluvio/elv-player-js",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.127",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "src/index.js",
|
|
6
6
|
"license": "MIT",
|
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
"webpack.config.js"
|
|
37
37
|
],
|
|
38
38
|
"dependencies": {
|
|
39
|
-
"@eluvio/elv-client-js": "^4.0.
|
|
39
|
+
"@eluvio/elv-client-js": "^4.0.58",
|
|
40
40
|
"dashjs": "^4.7.0",
|
|
41
41
|
"focus-visible": "^5.2.0",
|
|
42
42
|
"hls.js": "^1.4.12",
|
package/src/PlayerControls.js
CHANGED
|
@@ -63,8 +63,11 @@ export const CreateElement = ({parent, type="div", label, options={}, classes=[]
|
|
|
63
63
|
return element;
|
|
64
64
|
};
|
|
65
65
|
|
|
66
|
-
const CreateImageButton = ({parent, svg, label, options={}, classes=[], prepend=false}) => {
|
|
67
|
-
|
|
66
|
+
const CreateImageButton = ({parent, svg, label, options={}, classes=[], noDefaultClass, prepend=false}) => {
|
|
67
|
+
if(!noDefaultClass) {
|
|
68
|
+
classes.unshift("eluvio-player__controls__button");
|
|
69
|
+
}
|
|
70
|
+
|
|
68
71
|
const button = CreateElement({parent, type: "button", label, options, classes, prepend});
|
|
69
72
|
button.innerHTML = svg;
|
|
70
73
|
|
|
@@ -356,6 +359,7 @@ class PlayerControls {
|
|
|
356
359
|
classes: ["eluvio-player__watermark"]
|
|
357
360
|
});
|
|
358
361
|
|
|
362
|
+
watermark.setAttribute("aria-label", "Eluvio");
|
|
359
363
|
watermark.src = Logo;
|
|
360
364
|
}
|
|
361
365
|
|
|
@@ -521,6 +525,7 @@ class PlayerControls {
|
|
|
521
525
|
},
|
|
522
526
|
classes: ["eluvio-player__controls__volume-slider", "eluvio-player__controls__slider-container__input"]
|
|
523
527
|
});
|
|
528
|
+
volumeSlider.setAttribute("aria-label", "Volume");
|
|
524
529
|
|
|
525
530
|
// Progress Bar
|
|
526
531
|
const volumeBar = CreateElement({
|
|
@@ -533,6 +538,7 @@ class PlayerControls {
|
|
|
533
538
|
},
|
|
534
539
|
classes: ["eluvio-player__controls__volume", "eluvio-player__controls__slider-container__progress"]
|
|
535
540
|
});
|
|
541
|
+
volumeBar.setAttribute("aria-label", "Volume");
|
|
536
542
|
|
|
537
543
|
volumeButton.addEventListener("click", () => {
|
|
538
544
|
this.video.muted = !this.video.muted;
|
|
@@ -584,6 +590,7 @@ class PlayerControls {
|
|
|
584
590
|
|
|
585
591
|
this.video.currentTime = this.video.duration * parseFloat(progressSlider.value || 0);
|
|
586
592
|
});
|
|
593
|
+
progressSlider.setAttribute("aria-label", "Video Progress");
|
|
587
594
|
|
|
588
595
|
// Progress Bar
|
|
589
596
|
const progressBar = CreateElement({
|
|
@@ -596,6 +603,7 @@ class PlayerControls {
|
|
|
596
603
|
},
|
|
597
604
|
classes: ["eluvio-player__controls__slider-container__progress", "eluvio-player__controls__progress"]
|
|
598
605
|
});
|
|
606
|
+
progressBar.setAttribute("aria-label", "Video Progress");
|
|
599
607
|
|
|
600
608
|
// Progress Bar
|
|
601
609
|
const bufferProgressBar = CreateElement({
|
|
@@ -787,7 +795,6 @@ class PlayerControls {
|
|
|
787
795
|
event.preventDefault();
|
|
788
796
|
break;
|
|
789
797
|
|
|
790
|
-
case "Enter":
|
|
791
798
|
case " ":
|
|
792
799
|
PlayPause(this.video, this.video.paused);
|
|
793
800
|
event.preventDefault();
|
|
@@ -800,6 +807,131 @@ class PlayerControls {
|
|
|
800
807
|
}
|
|
801
808
|
}
|
|
802
809
|
|
|
810
|
+
ShowHLSOptionsForm({hlsOptions={}, SetPlayerProfile, hlsVersion}) {
|
|
811
|
+
let options = JSON.stringify({ ...hlsOptions }, null, 2);
|
|
812
|
+
|
|
813
|
+
this.hlsOptionsFormContainer = CreateElement({
|
|
814
|
+
parent: this.target,
|
|
815
|
+
classes: ["eluvio-player__hls-options-form-container"]
|
|
816
|
+
});
|
|
817
|
+
|
|
818
|
+
// Hide on clicking container, prevent play/pause/fullscreen listeners
|
|
819
|
+
this.hlsOptionsFormContainer.addEventListener("click", event => {
|
|
820
|
+
event.stopPropagation();
|
|
821
|
+
|
|
822
|
+
this.HideHLSOptionsMenu();
|
|
823
|
+
});
|
|
824
|
+
|
|
825
|
+
const hlsOptionsForm = CreateElement({
|
|
826
|
+
parent: this.hlsOptionsFormContainer,
|
|
827
|
+
type: "form",
|
|
828
|
+
classes: ["eluvio-player__hls-options-form"]
|
|
829
|
+
});
|
|
830
|
+
|
|
831
|
+
// Prevent keyboard shortcuts and container close listeners
|
|
832
|
+
hlsOptionsForm.addEventListener("keydown", event => event.stopPropagation());
|
|
833
|
+
hlsOptionsForm.addEventListener("click", event => event.stopPropagation());
|
|
834
|
+
hlsOptionsForm.addEventListener("dblclick", event => event.stopPropagation());
|
|
835
|
+
|
|
836
|
+
const title = CreateElement({
|
|
837
|
+
parent: hlsOptionsForm,
|
|
838
|
+
type: "h2",
|
|
839
|
+
classes: ["eluvio-player__hls-options-form__title"]
|
|
840
|
+
});
|
|
841
|
+
|
|
842
|
+
title.innerHTML = "Custom HLS.js Options";
|
|
843
|
+
|
|
844
|
+
const hlsOptionsInput = CreateElement({
|
|
845
|
+
parent: hlsOptionsForm,
|
|
846
|
+
type: "textarea",
|
|
847
|
+
classes: ["eluvio-player__hls-options-form__input"]
|
|
848
|
+
});
|
|
849
|
+
|
|
850
|
+
hlsOptionsInput.setAttribute("aria-label", "HLS.js options");
|
|
851
|
+
hlsOptionsInput.value = options;
|
|
852
|
+
hlsOptionsInput.addEventListener("change", event => {
|
|
853
|
+
options = event.currentTarget.value;
|
|
854
|
+
});
|
|
855
|
+
hlsOptionsInput.addEventListener("blur", event => {
|
|
856
|
+
try {
|
|
857
|
+
options = JSON.stringify(JSON.parse(options), null, 2);
|
|
858
|
+
hlsOptionsInput.value = options;
|
|
859
|
+
|
|
860
|
+
event.currentTarget.classList.remove("eluvio-player__hls-options-form__input--invalid");
|
|
861
|
+
document.querySelector(".eluvio-player__hls-options-form__submit")
|
|
862
|
+
.removeAttribute("disabled");
|
|
863
|
+
hlsOptionsInput.title = "";
|
|
864
|
+
// eslint-disable-next-line no-empty
|
|
865
|
+
} catch (error) {
|
|
866
|
+
event.currentTarget.classList.add("eluvio-player__hls-options-form__input--invalid");
|
|
867
|
+
document.querySelector(".eluvio-player__hls-options-form__submit")
|
|
868
|
+
.setAttribute("disabled", true);
|
|
869
|
+
hlsOptionsInput.title = error.toString();
|
|
870
|
+
}
|
|
871
|
+
});
|
|
872
|
+
|
|
873
|
+
const apiInfo = CreateElement({
|
|
874
|
+
parent: hlsOptionsForm,
|
|
875
|
+
classes: ["eluvio-player__hls-options-form__api-info"]
|
|
876
|
+
});
|
|
877
|
+
|
|
878
|
+
const apiLink = CreateElement({
|
|
879
|
+
parent: apiInfo,
|
|
880
|
+
type: "a",
|
|
881
|
+
classes: ["eluvio-player__hls-options-form__api-link"]
|
|
882
|
+
});
|
|
883
|
+
apiLink.setAttribute("target", "_blank");
|
|
884
|
+
apiLink.setAttribute("rel", "noopener");
|
|
885
|
+
apiLink.href = "https://github.com/video-dev/hls.js/blob/master/docs/API.md";
|
|
886
|
+
apiLink.innerHTML = "API Docs";
|
|
887
|
+
|
|
888
|
+
const version = CreateElement({
|
|
889
|
+
parent: apiInfo,
|
|
890
|
+
classes: ["eluvio-player__hls-options-form__version"]
|
|
891
|
+
});
|
|
892
|
+
version.innerHTML = `HLS.js ${hlsVersion}`;
|
|
893
|
+
|
|
894
|
+
const actions = CreateElement({
|
|
895
|
+
parent: hlsOptionsForm,
|
|
896
|
+
classes: ["eluvio-player__hls-options-form__actions"]
|
|
897
|
+
});
|
|
898
|
+
const cancel = CreateElement({
|
|
899
|
+
parent: actions,
|
|
900
|
+
type: "button",
|
|
901
|
+
classes: ["eluvio-player__hls-options-form__action"]
|
|
902
|
+
});
|
|
903
|
+
cancel.innerHTML = "Cancel";
|
|
904
|
+
cancel.setAttribute("type", "button");
|
|
905
|
+
cancel.addEventListener("click", event => {
|
|
906
|
+
event.preventDefault();
|
|
907
|
+
this.HideHLSOptionsMenu();
|
|
908
|
+
});
|
|
909
|
+
|
|
910
|
+
const submit = CreateElement({
|
|
911
|
+
parent: actions,
|
|
912
|
+
type: "button",
|
|
913
|
+
classes: ["eluvio-player__hls-options-form__action", "eluvio-player__hls-options-form__submit"]
|
|
914
|
+
});
|
|
915
|
+
submit.innerHTML = "Submit";
|
|
916
|
+
submit.setAttribute("type", "button");
|
|
917
|
+
|
|
918
|
+
submit.addEventListener("click", () => {
|
|
919
|
+
try {
|
|
920
|
+
SetPlayerProfile({
|
|
921
|
+
profile: "custom",
|
|
922
|
+
customHLSOptions: JSON.parse(options)
|
|
923
|
+
});
|
|
924
|
+
|
|
925
|
+
this.HideHLSOptionsMenu();
|
|
926
|
+
// eslint-disable-next-line no-empty
|
|
927
|
+
} catch (error) {}
|
|
928
|
+
});
|
|
929
|
+
}
|
|
930
|
+
|
|
931
|
+
HideHLSOptionsMenu() {
|
|
932
|
+
this.hlsOptionsFormContainer && this.hlsOptionsFormContainer.remove();
|
|
933
|
+
}
|
|
934
|
+
|
|
803
935
|
InitializeMenu(mode) {
|
|
804
936
|
this.settingsMenu.innerHTML = "";
|
|
805
937
|
this.settingsMenu.classList.remove("eluvio-player__controls__settings-menu-hidden");
|
|
@@ -809,7 +941,8 @@ class PlayerControls {
|
|
|
809
941
|
parent: this.settingsMenu,
|
|
810
942
|
svg: CloseIcon,
|
|
811
943
|
type: "button",
|
|
812
|
-
classes: ["eluvio-player__controls__settings-menu__close"]
|
|
944
|
+
classes: ["eluvio-player__controls__settings-menu__close"],
|
|
945
|
+
noDefaultClass: true
|
|
813
946
|
});
|
|
814
947
|
|
|
815
948
|
closeButton.addEventListener("click", () => this.HideSettingsMenu());
|
package/src/index.js
CHANGED
|
@@ -145,6 +145,10 @@ const PlayerProfiles = {
|
|
|
145
145
|
low_latency: {
|
|
146
146
|
label: "Low Latency",
|
|
147
147
|
hlsSettings: Utils.LiveHLSJSSettings({lowLatency: true})
|
|
148
|
+
},
|
|
149
|
+
custom: {
|
|
150
|
+
label: "Custom",
|
|
151
|
+
hlsSettings: {}
|
|
148
152
|
}
|
|
149
153
|
};
|
|
150
154
|
|
|
@@ -586,7 +590,7 @@ export class EluvioPlayer {
|
|
|
586
590
|
|
|
587
591
|
// Detect live video
|
|
588
592
|
this.video.addEventListener("durationchange", () => {
|
|
589
|
-
if(this.videoDuration > 0 && this.video.duration !== this.videoDuration) {
|
|
593
|
+
if(this.video.duration && this.videoDuration > 0 && this.video.duration !== this.videoDuration) {
|
|
590
594
|
this.isLive = true;
|
|
591
595
|
}
|
|
592
596
|
|
|
@@ -798,6 +802,14 @@ export class EluvioPlayer {
|
|
|
798
802
|
playoutUrl.searchParams.delete("authorization");
|
|
799
803
|
|
|
800
804
|
const profileSettings = (PlayerProfiles[this.playerOptions.playerProfile] || {}).hlsSettings || {};
|
|
805
|
+
const customProfileSettings = this.playerOptions.playerProfile === "custom" ? this.customHLSOptions : {};
|
|
806
|
+
|
|
807
|
+
this.hlsOptions = {
|
|
808
|
+
capLevelToPlayerSize: this.playerOptions.capLevelToPlayerSize,
|
|
809
|
+
...profileSettings,
|
|
810
|
+
...(this.playerOptions.hlsjsOptions || {}),
|
|
811
|
+
...customProfileSettings
|
|
812
|
+
};
|
|
801
813
|
|
|
802
814
|
const hlsPlayer = new HLSPlayer({
|
|
803
815
|
xhrSetup: xhr => {
|
|
@@ -809,9 +821,7 @@ export class EluvioPlayer {
|
|
|
809
821
|
|
|
810
822
|
return xhr;
|
|
811
823
|
},
|
|
812
|
-
|
|
813
|
-
...profileSettings,
|
|
814
|
-
...(this.playerOptions.hlsjsOptions || {})
|
|
824
|
+
...this.hlsOptions
|
|
815
825
|
});
|
|
816
826
|
hlsPlayer.loadSource(playoutUrl.toString());
|
|
817
827
|
hlsPlayer.attachMedia(this.video);
|
|
@@ -891,31 +901,46 @@ export class EluvioPlayer {
|
|
|
891
901
|
this.controls.SetPlayerProfileControls({
|
|
892
902
|
GetProfile: () => ({
|
|
893
903
|
label: "Player Profile",
|
|
894
|
-
options: Object.keys(PlayerProfiles)
|
|
895
|
-
|
|
896
|
-
|
|
897
|
-
|
|
898
|
-
|
|
899
|
-
|
|
904
|
+
options: Object.keys(PlayerProfiles)
|
|
905
|
+
.map(key => ({
|
|
906
|
+
index: key,
|
|
907
|
+
label: PlayerProfiles[key].label,
|
|
908
|
+
active: this.playerOptions.playerProfile === key,
|
|
909
|
+
activeLabel: `Player Profile: ${PlayerProfiles[key].label}`
|
|
910
|
+
}))
|
|
900
911
|
}),
|
|
901
912
|
SetProfile: async key => {
|
|
902
|
-
|
|
903
|
-
|
|
904
|
-
|
|
905
|
-
|
|
906
|
-
|
|
907
|
-
|
|
908
|
-
|
|
909
|
-
|
|
910
|
-
|
|
911
|
-
|
|
912
|
-
|
|
913
|
-
|
|
914
|
-
|
|
915
|
-
|
|
916
|
-
|
|
917
|
-
|
|
918
|
-
this.video
|
|
913
|
+
const SetPlayerProfile = async ({profile, customHLSOptions={}}) => {
|
|
914
|
+
this.videoDuration = undefined;
|
|
915
|
+
this.playerOptions.playerProfile = profile;
|
|
916
|
+
this.customHLSOptions = customHLSOptions;
|
|
917
|
+
|
|
918
|
+
const playing = !this.video.paused;
|
|
919
|
+
const currentTime = this.video.currentTime;
|
|
920
|
+
|
|
921
|
+
this.hlsPlayer.destroy();
|
|
922
|
+
await this.InitializeHLS({
|
|
923
|
+
playoutUrl,
|
|
924
|
+
authorizationToken,
|
|
925
|
+
drm,
|
|
926
|
+
multiviewOptions
|
|
927
|
+
});
|
|
928
|
+
|
|
929
|
+
PlayPause(this.video, playing);
|
|
930
|
+
|
|
931
|
+
if(!this.isLive) {
|
|
932
|
+
this.video.currentTime = currentTime;
|
|
933
|
+
}
|
|
934
|
+
};
|
|
935
|
+
|
|
936
|
+
if(key === "custom") {
|
|
937
|
+
this.controls.ShowHLSOptionsForm({
|
|
938
|
+
hlsOptions: this.hlsOptions,
|
|
939
|
+
SetPlayerProfile,
|
|
940
|
+
hlsVersion: HLSPlayer.version
|
|
941
|
+
});
|
|
942
|
+
} else {
|
|
943
|
+
SetPlayerProfile({profile: key});
|
|
919
944
|
}
|
|
920
945
|
}
|
|
921
946
|
});
|
|
@@ -1092,7 +1117,6 @@ export class EluvioPlayer {
|
|
|
1092
1117
|
dashPlayer.on(DashPlayer.MediaPlayer.events.MANIFEST_LOADED, () => {
|
|
1093
1118
|
UpdateQualityOptions();
|
|
1094
1119
|
UpdateAudioTracks();
|
|
1095
|
-
this.UpdateTextTracks({dashPlayer});
|
|
1096
1120
|
});
|
|
1097
1121
|
|
|
1098
1122
|
this.player = dashPlayer;
|
|
@@ -6,11 +6,14 @@ $black: #000;
|
|
|
6
6
|
|
|
7
7
|
$background-color: $black;
|
|
8
8
|
$controls-color: rgba(0, 0, 0, 0.8);
|
|
9
|
+
$modal-background-color: rgba(0, 0, 0, 0.5);
|
|
9
10
|
$menu-color: rgba(0, 0, 0, 0.8);
|
|
10
11
|
$menu-active-color: rgba(255, 255, 255, 0.1);
|
|
11
12
|
$button-inactive-color: rgba($white, 0.7);
|
|
12
13
|
$button-color: rgba($white, 1);
|
|
13
|
-
$
|
|
14
|
+
$form-button-color: #ddd;
|
|
15
|
+
$form-submit-color: #3784eb;
|
|
16
|
+
$progress-color: #3784eb;
|
|
14
17
|
$slider-color: rgba($gray, 0.5);
|
|
15
18
|
$hotspot-color: rgba($gray, 0.3);
|
|
16
19
|
$focus-color: rgba(225, 225, 255, 0.7);
|
|
@@ -445,10 +448,14 @@ $button-height: 35px;
|
|
|
445
448
|
}
|
|
446
449
|
|
|
447
450
|
&__close {
|
|
451
|
+
align-items: center;
|
|
448
452
|
display: none;
|
|
453
|
+
height: 20px;
|
|
454
|
+
justify-content: center;
|
|
449
455
|
position: absolute;
|
|
450
456
|
right: 20px;
|
|
451
457
|
top: 20px;
|
|
458
|
+
width: 20px;
|
|
452
459
|
|
|
453
460
|
* {
|
|
454
461
|
color: $button-color;
|
|
@@ -539,6 +546,114 @@ $button-height: 35px;
|
|
|
539
546
|
padding: 0;
|
|
540
547
|
}
|
|
541
548
|
|
|
549
|
+
&__hls-options-form-container {
|
|
550
|
+
align-items: center;
|
|
551
|
+
background-color: $modal-background-color;
|
|
552
|
+
bottom: 0;
|
|
553
|
+
display: flex;
|
|
554
|
+
justify-content: center;
|
|
555
|
+
left: 0;
|
|
556
|
+
position: absolute;
|
|
557
|
+
right: 0;
|
|
558
|
+
top: 0;
|
|
559
|
+
z-index: 100;
|
|
560
|
+
}
|
|
561
|
+
|
|
562
|
+
&__hls-options-form {
|
|
563
|
+
background-color: $menu-color;
|
|
564
|
+
border-radius: 5px;
|
|
565
|
+
color: $white;
|
|
566
|
+
display: flex;
|
|
567
|
+
flex-direction: column;
|
|
568
|
+
height: 360px;
|
|
569
|
+
max-height: 100%;
|
|
570
|
+
max-width: 100%;
|
|
571
|
+
padding: 30px 30px 20px;
|
|
572
|
+
width: 500px;
|
|
573
|
+
|
|
574
|
+
&__title {
|
|
575
|
+
font-size: 16px;
|
|
576
|
+
margin-top: 0;
|
|
577
|
+
}
|
|
578
|
+
|
|
579
|
+
&__input {
|
|
580
|
+
background-color: $menu-color;
|
|
581
|
+
border: 1px solid $border-color;
|
|
582
|
+
color: $white;
|
|
583
|
+
flex: 1 1 100%;
|
|
584
|
+
font-size: 14px;
|
|
585
|
+
padding: 0.5rem;
|
|
586
|
+
width: 100%;
|
|
587
|
+
|
|
588
|
+
&:focus {
|
|
589
|
+
outline: none;
|
|
590
|
+
}
|
|
591
|
+
|
|
592
|
+
&.focus-visible {
|
|
593
|
+
outline: 1px solid $focus-color;
|
|
594
|
+
}
|
|
595
|
+
|
|
596
|
+
&--invalid {
|
|
597
|
+
border: 1px solid $error-color;
|
|
598
|
+
}
|
|
599
|
+
}
|
|
600
|
+
|
|
601
|
+
&__api-info {
|
|
602
|
+
align-items: center;
|
|
603
|
+
display: flex;
|
|
604
|
+
font-size: 10px;
|
|
605
|
+
justify-content: space-between;
|
|
606
|
+
padding: 3px;
|
|
607
|
+
}
|
|
608
|
+
|
|
609
|
+
&__version {
|
|
610
|
+
opacity: 0.5;
|
|
611
|
+
}
|
|
612
|
+
|
|
613
|
+
&__api-link {
|
|
614
|
+
color: $white;
|
|
615
|
+
}
|
|
616
|
+
|
|
617
|
+
&__actions {
|
|
618
|
+
align-items: center;
|
|
619
|
+
display: flex;
|
|
620
|
+
justify-content: flex-end;
|
|
621
|
+
margin-top: 10px;
|
|
622
|
+
}
|
|
623
|
+
|
|
624
|
+
button {
|
|
625
|
+
&.eluvio-player__hls-options-form__action {
|
|
626
|
+
align-items: center;
|
|
627
|
+
background-color: $form-button-color;
|
|
628
|
+
border-radius: 3px;
|
|
629
|
+
color: $black;
|
|
630
|
+
cursor: pointer;
|
|
631
|
+
display: flex;
|
|
632
|
+
height: 30px;
|
|
633
|
+
justify-content: center;
|
|
634
|
+
width: 100px;
|
|
635
|
+
|
|
636
|
+
&.focus-visible {
|
|
637
|
+
border: 1px solid $focus-color;
|
|
638
|
+
box-shadow: 2px 2px 5px $focus-color;
|
|
639
|
+
}
|
|
640
|
+
|
|
641
|
+
&:disabled {
|
|
642
|
+
opacity: 0.5;
|
|
643
|
+
}
|
|
644
|
+
|
|
645
|
+
&:not(:last-child) {
|
|
646
|
+
margin-right: 10px;
|
|
647
|
+
}
|
|
648
|
+
}
|
|
649
|
+
|
|
650
|
+
&.eluvio-player__hls-options-form__submit {
|
|
651
|
+
background-color: $form-submit-color;
|
|
652
|
+
color: $white;
|
|
653
|
+
}
|
|
654
|
+
}
|
|
655
|
+
}
|
|
656
|
+
|
|
542
657
|
&__ticket-modal {
|
|
543
658
|
align-items: center;
|
|
544
659
|
background: $background-color;
|
|
@@ -778,13 +893,12 @@ $button-height: 35px;
|
|
|
778
893
|
text-align: center;
|
|
779
894
|
|
|
780
895
|
&-back {
|
|
781
|
-
font-size: 24px;
|
|
782
896
|
margin-bottom: 20px;
|
|
783
897
|
}
|
|
784
898
|
}
|
|
785
899
|
|
|
786
900
|
&__close {
|
|
787
|
-
display:
|
|
901
|
+
display: flex;
|
|
788
902
|
z-index: 100;
|
|
789
903
|
}
|
|
790
904
|
}
|
|
@@ -800,17 +914,35 @@ $button-height: 35px;
|
|
|
800
914
|
text-align: center;
|
|
801
915
|
|
|
802
916
|
&-back {
|
|
803
|
-
font-size: 24px;
|
|
804
917
|
margin-bottom: 20px;
|
|
805
918
|
}
|
|
806
919
|
}
|
|
807
920
|
|
|
808
921
|
&__close {
|
|
809
|
-
display:
|
|
922
|
+
display: flex;
|
|
810
923
|
}
|
|
811
924
|
}
|
|
812
925
|
}
|
|
813
926
|
|
|
927
|
+
.eluvio-player__hls-options-form {
|
|
928
|
+
padding: 10px;
|
|
929
|
+
|
|
930
|
+
&__title {
|
|
931
|
+
font-size: 12px;
|
|
932
|
+
margin-bottom: 5px;
|
|
933
|
+
}
|
|
934
|
+
|
|
935
|
+
&__input {
|
|
936
|
+
font-size: 12px;
|
|
937
|
+
}
|
|
938
|
+
|
|
939
|
+
&__action {
|
|
940
|
+
font-size: 12px;
|
|
941
|
+
height: 20px;
|
|
942
|
+
width: 60px;
|
|
943
|
+
}
|
|
944
|
+
}
|
|
945
|
+
|
|
814
946
|
.eluvio-player__hotspot-overlay {
|
|
815
947
|
.eluvio-player__hotspot-overlay__target {
|
|
816
948
|
.eluvio-player__hotspot-overlay__target__title {
|