@eluvio/elv-player-js 1.0.124 → 1.0.126

package/dist/bundle.978.5b37f5b0d74481e4be10.js

@@ -0,0 +1 @@
+(self.webpackChunk_eluvio_elv_player_js=self.webpackChunk_eluvio_elv_player_js||[]).push([[978],{522:()=>{},6882:()=>{}}]);

package/dist/main.bundle.js

@@ -0,0 +1,2 @@
+/*! For license information please see main.bundle.js.LICENSE.txt */
+(()=>{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/dist/main.bundle.js.LICENSE.txt

@@ -0,0 +1 @@
+/*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */

package/package.json

@@ -1,20 +1,19 @@
 {
   "name": "@eluvio/elv-player-js",
-  "version": "1.0.124",
+  "version": "1.0.126",
   "description": "![Eluvio Logo](src/static/images/Logo.png \"Eluvio Logo\")",
   "main": "src/index.js",
   "license": "MIT",
   "homepage": "https://github.com/eluv-io/elv-player-js",
   "scripts": {
     "bump-version": "npm --git-tag-version --no-commit-hooks version patch",
-    "serve": "TEST_PAGE=true webpack-dev-server --hot --port 8089 --host=0.0.0.0 --disable-host-check --useLocalIp",
-    "serve-example": "EXAMPLE_PAGE=true webpack-dev-server --hot --port 8089 --host=0.0.0.0 --disable-host-check --useLocalIp",
-    "build": "npm run build-icons && rm -rf dist/* && NODE_ENV=production node ./node_modules/webpack-cli/bin/cli.js -p --progress --colors --devtool none",
+    "serve": "TEST_PAGE=true webpack-dev-server --hot --port 8089 --host=0.0.0.0",
+    "serve-example": "EXAMPLE_PAGE=true webpack-dev-server --hot --port 8089 --host=0.0.0.0",
+    "build": "node ./node_modules/webpack-cli/bin/cli.js --mode=production --devtool false",
+    "build-test": "TEST_PAGE=true node ./node_modules/webpack-cli/bin/cli.js --mode=production --devtool false",
+    "build-example": "EXAMPLE_PAGE=true node ./node_modules/webpack-cli/bin/cli.js --mode=production --devtool false",
+    "build-analyze": "ANALYZE_BUNDLE=true node ./node_modules/webpack-cli/bin/cli.js --mode=production --devtool false",
     "build-icons": "node src/BuildIcons.js",
-    "build-analyze": "rm -rf dist/* && NODE_ENV=production ANALYZE_BUNDLE=true node ./node_modules/webpack-cli/bin/cli.js -p --progress --colors --devtool none",
-    "build-test": " rm -rf test/dist/* && TEST_PAGE=true NODE_ENV=production node ./node_modules/webpack-cli/bin/cli.js -p --progress --colors --devtool none",
-    "build-example": " rm -rf examples/dist/* && EXAMPLE_PAGE=true NODE_ENV=production node ./node_modules/webpack-cli/bin/cli.js -p --progress --colors --devtool none",
-    "add-build": "COMMIT=`git rev-parse HEAD` ; echo $COMMIT > dist/version.txt ; git add dist",
     "lint": "npm run fix-scss ; npm run lint-scss ; npm run fix-js",
     "lint-show": "npm run lint-scss ; npm run lint-js",
     "lint-js": "eslint \"src/**/*.js\"",
@@ -37,71 +36,45 @@
     "webpack.config.js"
   ],
   "dependencies": {
-    "@eluvio/elv-client-js": "^4.0.9",
+    "@eluvio/elv-client-js": "^4.0.58",
     "dashjs": "^4.7.0",
     "focus-visible": "^5.2.0",
-    "hls.js": "^1.2.9",
+    "hls.js": "^1.4.12",
     "lodash": "^4.17.21",
     "resize-observer-polyfill": "^1.5.1",
-    "urijs": "^1.19.11",
     "url-join": "^4.0.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.4.3",
-    "@babel/plugin-proposal-object-rest-spread": "^7.4.3",
-    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
-    "@babel/plugin-syntax-jsx": "^7.2.0",
-    "@babel/plugin-syntax-object-rest-spread": "^7.2.0",
-    "@babel/plugin-transform-react-jsx": "^7.3.0",
-    "@babel/plugin-transform-regenerator": "^7.4.3",
-    "@babel/plugin-transform-runtime": "^7.4.3",
-    "@babel/preset-env": "^7.4.3",
-    "@babel/preset-react": "^7.0.0",
-    "@babel/runtime": "^7.4.3",
-    "autoprefixer": "^9.5.0",
+    "@babel/core": "^7.23.0",
+    "@babel/preset-env": "^7.22.20",
+    "@babel/preset-react": "^7.22.15",
+    "@babel/runtime": "^7.23.1",
+    "autoprefixer": "^10.4.16",
     "babel-cli": "^6.26.0",
     "babel-core": "^7.0.0-bridge.0",
     "babel-eslint": "^10.0.1",
-    "babel-loader": "^8.0.5",
-    "babel-plugin-syntax-async-functions": "^6.13.0",
-    "babel-preset-mobx": "^2.0.0",
-    "css-loader": "^1.0.1",
+    "babel-loader": "^9.1.3",
+    "css-loader": "^6.8.1",
     "eslint": "^5.16.0",
     "eslint-plugin-react": "^7.12.4",
-    "file-loader": "^2.0.0",
-    "html-webpack-inline-source-plugin": "0.0.10",
-    "html-webpack-plugin": "^3.2.0",
-    "image-webpack-loader": "^4.6.0",
-    "postcss-loader": "^3.0.0",
-    "pre-commit": "^1.2.2",
-    "raw-loader": "^0.5.1",
+    "html-webpack-plugin": "^5.5.3",
+    "postcss-loader": "^7.3.3",
     "regenerator-runtime": "^0.12.1",
-    "sass": "^1.51.0",
-    "sass-lint": "^1.12.1",
+    "sass": "^1.69.2",
+    "sass-lint": "^1.13.1",
     "sass-lint-auto-fix": "^0.21.0",
-    "sass-loader": "^10.2.1",
-    "source-map-loader": "^0.2.4",
-    "style-loader": "^0.22.1",
+    "sass-loader": "^13.3.2",
+    "stream-browserify": "^3.0.0",
+    "style-loader": "^3.3.3",
     "svg-inline-loader": "^0.8.0",
     "svg-inline-react": "^3.1.0",
+    "url": "^0.11.3",
     "uuid": "^7.0.2",
-    "webpack": "^4.46.0",
-    "webpack-bundle-analyzer": "^3.3.2",
-    "webpack-cli": "^3.3.0",
-    "webpack-dev-server": "^3.11.2"
-  },
-  "babel": {
-    "comments": true,
-    "presets": [
-      "@babel/preset-env"
-    ],
-    "plugins": [
-      "syntax-async-functions",
-      "@babel/plugin-syntax-dynamic-import",
-      "@babel/plugin-syntax-object-rest-spread",
-      "@babel/plugin-proposal-object-rest-spread",
-      "@babel/plugin-transform-regenerator"
-    ]
+    "webpack": "^5.88.2",
+    "webpack-bundle-analyzer": "^4.9.1",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^4.15.1",
+    "yaml-loader": "^0.8.0"
   },
   "directories": {
     "test": "test"

package/src/PlayerControls.js

@@ -356,6 +356,7 @@ class PlayerControls {
         classes: ["eluvio-player__watermark"]
       });
 
+      watermark.setAttribute("aria-label", "Eluvio");
       watermark.src = Logo;
     }
 
@@ -521,6 +522,7 @@ class PlayerControls {
       },
       classes: ["eluvio-player__controls__volume-slider", "eluvio-player__controls__slider-container__input"]
     });
+    volumeSlider.setAttribute("aria-label", "Volume");
 
     // Progress Bar
     const volumeBar = CreateElement({
@@ -533,6 +535,7 @@ class PlayerControls {
       },
       classes: ["eluvio-player__controls__volume", "eluvio-player__controls__slider-container__progress"]
     });
+    volumeBar.setAttribute("aria-label", "Volume");
 
     volumeButton.addEventListener("click", () => {
       this.video.muted = !this.video.muted;
@@ -584,6 +587,7 @@ class PlayerControls {
 
       this.video.currentTime = this.video.duration * parseFloat(progressSlider.value || 0);
     });
+    progressSlider.setAttribute("aria-label", "Video Progress");
 
     // Progress Bar
     const progressBar = CreateElement({
@@ -596,6 +600,7 @@ class PlayerControls {
       },
       classes: ["eluvio-player__controls__slider-container__progress", "eluvio-player__controls__progress"]
     });
+    progressBar.setAttribute("aria-label", "Video Progress");
 
     // Progress Bar
     const bufferProgressBar = CreateElement({
@@ -787,7 +792,6 @@ class PlayerControls {
           event.preventDefault();
           break;
 
-        case "Enter":
         case " ":
           PlayPause(this.video, this.video.paused);
           event.preventDefault();
@@ -800,6 +804,131 @@ class PlayerControls {
     }
   }
 
+  ShowHLSOptionsForm({hlsOptions={}, SetPlayerProfile, hlsVersion}) {
+    let options = JSON.stringify({ ...hlsOptions }, null, 2);
+
+    this.hlsOptionsFormContainer = CreateElement({
+      parent: this.target,
+      classes: ["eluvio-player__hls-options-form-container"]
+    });
+
+    // Hide on clicking container, prevent play/pause/fullscreen listeners
+    this.hlsOptionsFormContainer.addEventListener("click", event => {
+      event.stopPropagation();
+
+      this.HideHLSOptionsMenu();
+    });
+
+    const hlsOptionsForm = CreateElement({
+      parent: this.hlsOptionsFormContainer,
+      type: "form",
+      classes: ["eluvio-player__hls-options-form"]
+    });
+
+    // Prevent keyboard shortcuts and container close listeners
+    hlsOptionsForm.addEventListener("keydown", event => event.stopPropagation());
+    hlsOptionsForm.addEventListener("click", event => event.stopPropagation());
+    hlsOptionsForm.addEventListener("dblclick", event => event.stopPropagation());
+
+    const title = CreateElement({
+      parent: hlsOptionsForm,
+      type: "h2",
+      classes: ["eluvio-player__hls-options-form__title"]
+    });
+
+    title.innerHTML = "Custom HLS.js Options";
+
+    const hlsOptionsInput = CreateElement({
+      parent: hlsOptionsForm,
+      type: "textarea",
+      classes: ["eluvio-player__hls-options-form__input"]
+    });
+
+    hlsOptionsInput.setAttribute("aria-label", "HLS.js options");
+    hlsOptionsInput.value = options;
+    hlsOptionsInput.addEventListener("change", event => {
+      options = event.currentTarget.value;
+    });
+    hlsOptionsInput.addEventListener("blur", event => {
+      try {
+        options = JSON.stringify(JSON.parse(options), null, 2);
+        hlsOptionsInput.value = options;
+
+        event.currentTarget.classList.remove("eluvio-player__hls-options-form__input--invalid");
+        document.querySelector(".eluvio-player__hls-options-form__submit")
+          .removeAttribute("disabled");
+        hlsOptionsInput.title = "";
+      // eslint-disable-next-line no-empty
+      } catch (error) {
+        event.currentTarget.classList.add("eluvio-player__hls-options-form__input--invalid");
+        document.querySelector(".eluvio-player__hls-options-form__submit")
+          .setAttribute("disabled", true);
+        hlsOptionsInput.title = error.toString();
+      }
+    });
+
+    const apiInfo = CreateElement({
+      parent: hlsOptionsForm,
+      classes: ["eluvio-player__hls-options-form__api-info"]
+    });
+
+    const apiLink = CreateElement({
+      parent: apiInfo,
+      type: "a",
+      classes: ["eluvio-player__hls-options-form__api-link"]
+    });
+    apiLink.setAttribute("target", "_blank");
+    apiLink.setAttribute("rel", "noopener");
+    apiLink.href = "https://github.com/video-dev/hls.js/blob/master/docs/API.md";
+    apiLink.innerHTML = "API Docs";
+
+    const version = CreateElement({
+      parent: apiInfo,
+      classes: ["eluvio-player__hls-options-form__version"]
+    });
+    version.innerHTML = `HLS.js ${hlsVersion}`;
+
+    const actions = CreateElement({
+      parent: hlsOptionsForm,
+      classes: ["eluvio-player__hls-options-form__actions"]
+    });
+    const cancel = CreateElement({
+      parent: actions,
+      type: "button",
+      classes: ["eluvio-player__hls-options-form__action"]
+    });
+    cancel.innerHTML = "Cancel";
+    cancel.setAttribute("type", "button");
+    cancel.addEventListener("click", event => {
+      event.preventDefault();
+      this.HideHLSOptionsMenu();
+    });
+
+    const submit = CreateElement({
+      parent: actions,
+      type: "button",
+      classes: ["eluvio-player__hls-options-form__action", "eluvio-player__hls-options-form__submit"]
+    });
+    submit.innerHTML = "Submit";
+    submit.setAttribute("type", "button");
+
+    submit.addEventListener("click", () => {
+      try {
+        SetPlayerProfile({
+          profile: "custom",
+          customHLSOptions: JSON.parse(options)
+        });
+
+        this.HideHLSOptionsMenu();
+      // eslint-disable-next-line no-empty
+      } catch (error) {}
+    });
+  }
+
+  HideHLSOptionsMenu() {
+    this.hlsOptionsFormContainer && this.hlsOptionsFormContainer.remove();
+  }
+
   InitializeMenu(mode) {
     this.settingsMenu.innerHTML = "";
     this.settingsMenu.classList.remove("eluvio-player__controls__settings-menu-hidden");

package/src/index.js

@@ -5,7 +5,6 @@ import "focus-visible";
 import MergeWith from "lodash/mergeWith";
 import Clone from "lodash/cloneDeep";
 
-import URI from "urijs";
 import ResizeObserver from "resize-observer-polyfill";
 
 import {InitializeFairPlayStream} from "./FairPlay";
@@ -146,6 +145,10 @@ const PlayerProfiles = {
   low_latency: {
     label: "Low Latency",
     hlsSettings: Utils.LiveHLSJSSettings({lowLatency: true})
+  },
+  custom: {
+    label: "Custom",
+    hlsSettings: {}
   }
 };
 
@@ -587,7 +590,7 @@ export class EluvioPlayer {
 
       // Detect live video
       this.video.addEventListener("durationchange", () => {
-        if(this.videoDuration > 0 && this.video.duration !== this.videoDuration) {
+        if(this.video.duration && this.videoDuration > 0 && this.video.duration !== this.videoDuration) {
           this.isLive = true;
         }
 
@@ -643,10 +646,10 @@ export class EluvioPlayer {
 
       multiviewOptions.target = this.target;
 
-      playoutUrl = URI(playoutUrl);
+      playoutUrl = new URL(playoutUrl);
       const authorizationToken =
         this.sourceOptions.playoutParameters.authorizationToken ||
-        playoutUrl.query(true).authorization;
+        playoutUrl.searchParams.get("authorization");
 
       if(protocol === "hls") {
         await this.InitializeHLS({playoutUrl, authorizationToken, drm, drms, multiviewOptions});
@@ -796,9 +799,17 @@ export class EluvioPlayer {
       }
     } else {
       // HLS JS
-      playoutUrl.removeQuery("authorization");
+      playoutUrl.searchParams.delete("authorization");
 
       const profileSettings = (PlayerProfiles[this.playerOptions.playerProfile] || {}).hlsSettings || {};
+      const customProfileSettings = this.playerOptions.playerProfile === "custom" ? this.customHLSOptions : {};
+
+      this.hlsOptions = {
+        capLevelToPlayerSize: this.playerOptions.capLevelToPlayerSize,
+        ...profileSettings,
+        ...(this.playerOptions.hlsjsOptions || {}),
+        ...customProfileSettings
+      };
 
       const hlsPlayer = new HLSPlayer({
         xhrSetup: xhr => {
@@ -810,9 +821,7 @@ export class EluvioPlayer {
 
           return xhr;
         },
-        capLevelToPlayerSize: this.playerOptions.capLevelToPlayerSize,
-        ...profileSettings,
-        ...(this.playerOptions.hlsjsOptions || {})
+        ...this.hlsOptions
       });
       hlsPlayer.loadSource(playoutUrl.toString());
       hlsPlayer.attachMedia(this.video);
@@ -892,31 +901,46 @@ export class EluvioPlayer {
         this.controls.SetPlayerProfileControls({
           GetProfile: () => ({
             label: "Player Profile",
-            options: Object.keys(PlayerProfiles).map(key => ({
-              index: key,
-              label: PlayerProfiles[key].label,
-              active: this.playerOptions.playerProfile === key,
-              activeLabel: `Player Profile: ${PlayerProfiles[key].label}`
-            }))
+            options: Object.keys(PlayerProfiles)
+              .map(key => ({
+                index: key,
+                label: PlayerProfiles[key].label,
+                active: this.playerOptions.playerProfile === key,
+                activeLabel: `Player Profile: ${PlayerProfiles[key].label}`
+              }))
           }),
           SetProfile: async key => {
-            this.playerOptions.playerProfile = key;
-
-            const playing = !this.video.paused;
-            const currentTime = this.video.currentTime;
-
-            this.hlsPlayer.destroy();
-            await this.InitializeHLS({
-              playoutUrl,
-              authorizationToken,
-              drm,
-              multiviewOptions
-            });
-
-            PlayPause(this.video, playing);
-
-            if(!this.isLive) {
-              this.video.currentTime = currentTime;
+            const SetPlayerProfile = async ({profile, customHLSOptions={}}) => {
+              this.videoDuration = undefined;
+              this.playerOptions.playerProfile = profile;
+              this.customHLSOptions = customHLSOptions;
+
+              const playing = !this.video.paused;
+              const currentTime = this.video.currentTime;
+
+              this.hlsPlayer.destroy();
+              await this.InitializeHLS({
+                playoutUrl,
+                authorizationToken,
+                drm,
+                multiviewOptions
+              });
+
+              PlayPause(this.video, playing);
+
+              if(!this.isLive) {
+                this.video.currentTime = currentTime;
+              }
+            };
+
+            if(key === "custom") {
+              this.controls.ShowHLSOptionsForm({
+                hlsOptions: this.hlsOptions,
+                SetPlayerProfile,
+                hlsVersion: HLSPlayer.version
+              });
+            } else {
+              SetPlayerProfile({profile: key});
             }
           }
         });
@@ -993,7 +1017,7 @@ export class EluvioPlayer {
       });
     }
 
-    playoutUrl.removeQuery("authorization");
+    playoutUrl.searchParams.delete("authorization");
     dashPlayer.extend("RequestModifier", function () {
       return {
         modifyRequestHeader: xhr => {
@@ -1093,7 +1117,6 @@ export class EluvioPlayer {
     dashPlayer.on(DashPlayer.MediaPlayer.events.MANIFEST_LOADED, () => {
       UpdateQualityOptions();
       UpdateAudioTracks();
-      this.UpdateTextTracks({dashPlayer});
     });
 
     this.player = dashPlayer;

package/src/static/stylesheets/player.scss

@@ -6,11 +6,14 @@ $black: #000;
 
 $background-color: $black;
 $controls-color: rgba(0, 0, 0, 0.8);
+$modal-background-color: rgba(0, 0, 0, 0.5);
 $menu-color: rgba(0, 0, 0, 0.8);
 $menu-active-color: rgba(255, 255, 255, 0.1);
 $button-inactive-color: rgba($white, 0.7);
 $button-color: rgba($white, 1);
-$progress-color: #0885fb;
+$form-button-color: #ddd;
+$form-submit-color: #3784eb;
+$progress-color: #3784eb;
 $slider-color: rgba($gray, 0.5);
 $hotspot-color: rgba($gray, 0.3);
 $focus-color: rgba(225, 225, 255, 0.7);
@@ -539,6 +542,114 @@ $button-height: 35px;
     padding: 0;
   }
 
+  &__hls-options-form-container {
+    align-items: center;
+    background-color: $modal-background-color;
+    bottom: 0;
+    display: flex;
+    justify-content: center;
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+    z-index: 100;
+  }
+
+  &__hls-options-form {
+    background-color: $menu-color;
+    border-radius: 5px;
+    color: $white;
+    display: flex;
+    flex-direction: column;
+    height: 360px;
+    max-height: 100%;
+    max-width: 100%;
+    padding: 30px 30px 20px;
+    width: 500px;
+
+    &__title {
+      font-size: 16px;
+      margin-top: 0;
+    }
+
+    &__input {
+      background-color: $menu-color;
+      border: 1px solid $border-color;
+      color: $white;
+      flex: 1 1 100%;
+      font-size: 14px;
+      padding: 0.5rem;
+      width: 100%;
+
+      &:focus {
+        outline: none;
+      }
+
+      &.focus-visible {
+        outline: 1px solid $focus-color;
+      }
+
+      &--invalid {
+        border: 1px solid $error-color;
+      }
+    }
+
+    &__api-info {
+      align-items: center;
+      display: flex;
+      font-size: 10px;
+      justify-content: space-between;
+      padding: 3px;
+    }
+
+    &__version {
+      opacity: 0.5;
+    }
+
+    &__api-link {
+      color: $white;
+    }
+
+    &__actions {
+      align-items: center;
+      display: flex;
+      justify-content: flex-end;
+      margin-top: 10px;
+    }
+
+    button {
+      &.eluvio-player__hls-options-form__action {
+        align-items: center;
+        background-color: $form-button-color;
+        border-radius: 3px;
+        color: $black;
+        cursor: pointer;
+        display: flex;
+        height: 30px;
+        justify-content: center;
+        width: 100px;
+
+        &.focus-visible {
+          border: 1px solid $focus-color;
+          box-shadow: 2px 2px 5px $focus-color;
+        }
+
+        &:disabled {
+          opacity: 0.5;
+        }
+
+        &:not(:last-child) {
+          margin-right: 10px;
+        }
+      }
+
+      &.eluvio-player__hls-options-form__submit {
+        background-color: $form-submit-color;
+        color: $white;
+      }
+    }
+  }
+
   &__ticket-modal {
     align-items: center;
     background: $background-color;