From 05697babaad9b676d5225b4e59f86bc5e0a19d69 Mon Sep 17 00:00:00 2001 From: Rafael Miranda Date: Tue, 2 Mar 2021 22:50:16 -0500 Subject: [PATCH] feat(player): Added new events for custom controls to expand control over each custom element --- dist/esm/controls.js | 34 +++++++++++++++++++++-- dist/openplayer.js | 44 ++++++++++++++++++++++++++++-- dist/openplayer.min.js | 2 +- docs/customize.md | 9 ++++-- src/js/controls.ts | 34 +++++++++++++++++++++-- src/js/interfaces/control-item.ts | 5 ++++ types/interfaces/control-item.d.ts | 5 ++++ 7 files changed, 124 insertions(+), 9 deletions(-) diff --git a/dist/esm/controls.js b/dist/esm/controls.js index 054b3f02..32a3483c 100644 --- a/dist/esm/controls.js +++ b/dist/esm/controls.js @@ -302,9 +302,24 @@ class Controls { control.addEventListener('click', (e) => this._toggleCustomMenu(e, menu, item), EVENT_OPTIONS); this.player.getElement().addEventListener('controlshidden', () => this._hideCustomMenu(menu), EVENT_OPTIONS); } - else if (typeof item.click === 'function') { + else if (item.click && typeof item.click === 'function') { control.addEventListener('click', item.click, EVENT_OPTIONS); } + if (item.mouseenter && typeof item.mouseenter === 'function') { + control.addEventListener('mouseenter', item.mouseenter, EVENT_OPTIONS); + } + if (item.mouseleave && typeof item.mouseleave === 'function') { + control.addEventListener('mouseenter', item.mouseleave, EVENT_OPTIONS); + } + if (item.keydown && typeof item.keydown === 'function') { + control.addEventListener('keydown', item.keydown, EVENT_OPTIONS); + } + if (item.blur && typeof item.blur === 'function') { + control.addEventListener('blur', item.blur, EVENT_OPTIONS); + } + if (item.focus && typeof item.focus === 'function') { + control.addEventListener('focus', item.focus, EVENT_OPTIONS); + } if (item.layer) { if (item.layer === 'main') { this.player.getContainer().appendChild(control); @@ -332,9 +347,24 @@ class Controls { removeElement(menu); } } - if (typeof item.click === 'function') { + if (item.click && typeof item.click === 'function') { control.removeEventListener('click', item.click); } + if (item.mouseenter && typeof item.mouseenter === 'function') { + control.removeEventListener('mouseenter', item.mouseenter); + } + if (item.mouseleave && typeof item.mouseleave === 'function') { + control.removeEventListener('mouseenter', item.mouseleave); + } + if (item.keydown && typeof item.keydown === 'function') { + control.removeEventListener('keydown', item.keydown); + } + if (item.blur && typeof item.blur === 'function') { + control.removeEventListener('blur', item.blur); + } + if (item.focus && typeof item.focus === 'function') { + control.removeEventListener('focus', item.focus); + } removeElement(control); } } diff --git a/dist/openplayer.js b/dist/openplayer.js index 516c590f..a090e589 100644 --- a/dist/openplayer.js +++ b/dist/openplayer.js @@ -5190,10 +5190,30 @@ var Controls = function () { this.player.getElement().addEventListener('controlshidden', function () { return _this6._hideCustomMenu(menu); }, constants_1.EVENT_OPTIONS); - } else if (typeof item.click === 'function') { + } else if (item.click && typeof item.click === 'function') { control.addEventListener('click', item.click, constants_1.EVENT_OPTIONS); } + if (item.mouseenter && typeof item.mouseenter === 'function') { + control.addEventListener('mouseenter', item.mouseenter, constants_1.EVENT_OPTIONS); + } + + if (item.mouseleave && typeof item.mouseleave === 'function') { + control.addEventListener('mouseenter', item.mouseleave, constants_1.EVENT_OPTIONS); + } + + if (item.keydown && typeof item.keydown === 'function') { + control.addEventListener('keydown', item.keydown, constants_1.EVENT_OPTIONS); + } + + if (item.blur && typeof item.blur === 'function') { + control.addEventListener('blur', item.blur, constants_1.EVENT_OPTIONS); + } + + if (item.focus && typeof item.focus === 'function') { + control.addEventListener('focus', item.focus, constants_1.EVENT_OPTIONS); + } + if (item.layer) { if (item.layer === 'main') { this.player.getContainer().appendChild(control); @@ -5232,10 +5252,30 @@ var Controls = function () { } } - if (typeof item.click === 'function') { + if (item.click && typeof item.click === 'function') { control.removeEventListener('click', item.click); } + if (item.mouseenter && typeof item.mouseenter === 'function') { + control.removeEventListener('mouseenter', item.mouseenter); + } + + if (item.mouseleave && typeof item.mouseleave === 'function') { + control.removeEventListener('mouseenter', item.mouseleave); + } + + if (item.keydown && typeof item.keydown === 'function') { + control.removeEventListener('keydown', item.keydown); + } + + if (item.blur && typeof item.blur === 'function') { + control.removeEventListener('blur', item.blur); + } + + if (item.focus && typeof item.focus === 'function') { + control.removeEventListener('focus', item.focus); + } + general_1.removeElement(control); } } diff --git a/dist/openplayer.min.js b/dist/openplayer.min.js index df6c03e6..50043201 100644 --- a/dist/openplayer.min.js +++ b/dist/openplayer.min.js @@ -1 +1 @@ -!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.OpenPlayer=t():e.OpenPlayer=t()}(this,(function(){return function(e){var t={};function n(i){if(t[i])return t[i].exports;var r=t[i]={i:i,l:!1,exports:{}};return e[i].call(r.exports,r,r.exports,n),r.l=!0,r.exports}return n.m=e,n.c=t,n.d=function(e,t,i){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:i})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var i=Object.create(null);if(n.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)n.d(i,r,function(t){return e[t]}.bind(null,r));return i},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="/dist/",n(n.s=50)}([function(e,t){var n=function(e){return e&&e.Math==Math&&e};e.exports=n("object"==typeof globalThis&&globalThis)||n("object"==typeof window&&window)||n("object"==typeof self&&self)||n("object"==typeof global&&global)||function(){return this}()||Function("return this")()},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.EVENT_OPTIONS=t.DVR_THRESHOLD=t.SUPPORTS_HLS=t.HAS_MSE=t.IS_STOCK_ANDROID=t.IS_SAFARI=t.IS_FIREFOX=t.IS_CHROME=t.IS_EDGE=t.IS_IE=t.IS_ANDROID=t.IS_IOS=t.IS_IPOD=t.IS_IPHONE=t.IS_IPAD=t.UA=t.NAV=void 0,t.NAV="undefined"!=typeof window?window.navigator:null,t.UA=t.NAV?t.NAV.userAgent.toLowerCase():null,t.IS_IPAD=!!t.UA&&(/ipad/i.test(t.UA)&&!window.MSStream),t.IS_IPHONE=!!t.UA&&(/iphone/i.test(t.UA)&&!window.MSStream),t.IS_IPOD=!!t.UA&&(/ipod/i.test(t.UA)&&!window.MSStream),t.IS_IOS=!!t.UA&&(/ipad|iphone|ipod/i.test(t.UA)&&!window.MSStream),t.IS_ANDROID=!!t.UA&&/android/i.test(t.UA),t.IS_IE=!!t.UA&&/(trident|microsoft)/i.test(t.NAV.appName),t.IS_EDGE=!!t.NAV&&("msLaunchUri"in t.NAV&&!("documentMode"in document)),t.IS_CHROME=!!t.UA&&/chrome/i.test(t.UA),t.IS_FIREFOX=!!t.UA&&/firefox/i.test(t.UA),t.IS_SAFARI=!!t.UA&&(/safari/i.test(t.UA)&&!t.IS_CHROME),t.IS_STOCK_ANDROID=!!t.UA&&/^mozilla\/\d+\.\d+\s\(linux;\su;/i.test(t.UA),t.HAS_MSE="undefined"!=typeof window&&"MediaSource"in window,t.SUPPORTS_HLS=function(){if("undefined"==typeof window)return!1;var e=window.MediaSource||window.WebKitMediaSource,n=window.SourceBuffer||window.WebKitSourceBuffer,i=e&&"function"==typeof e.isTypeSupported&&e.isTypeSupported('video/mp4; codecs="avc1.42E01E,mp4a.40.2"'),r=!n||n.prototype&&"function"==typeof n.prototype.appendBuffer&&"function"==typeof n.prototype.remove;return!!i&&!!r&&!t.IS_SAFARI},t.DVR_THRESHOLD=120,t.EVENT_OPTIONS=!t.IS_IE&&{passive:!1}},function(e,t,n){"use strict";function i(e){if(e){var t=e.parentNode;t&&t.removeChild(e)}}Object.defineProperty(t,"__esModule",{value:!0}),t.isXml=t.offset=t.hasClass=t.request=t.removeElement=t.loadScript=t.isAudio=t.isVideo=t.getAbsoluteUrl=void 0,t.getAbsoluteUrl=function(e){var t=document.createElement("a");return t.href=e,t.href},t.isVideo=function(e){return"video"===e.tagName.toLowerCase()},t.isAudio=function(e){return"audio"===e.tagName.toLowerCase()},t.loadScript=function(e){return new Promise((function(t,n){var r=document.createElement("script");r.src=e,r.async=!0,r.onload=function(){i(r),t({})},r.onerror=function(){i(r),n()},document.head.appendChild(r)}))},t.removeElement=i,t.request=function(e,t,n,i){var r,s=window.XMLHttpRequest?new XMLHttpRequest:new ActiveXObject("Microsoft.XMLHTTP");switch(t){case"text":r="text/plain";break;case"json":r="application/json, text/javascript";break;case"html":r="text/html";break;case"xml":r="application/xml, text/xml";break;default:r="application/x-www-form-urlencoded; charset=UTF-8"}var a=!1,o="application/x-www-form-urlencoded"!==r?"".concat(r,", */*; q=0.01"):"*/".concat("*");s&&(s.open("GET",e,!0),s.setRequestHeader("Accept",o),s.onreadystatechange=function(){if(!a&&4===s.readyState)if(200===s.status){var e;switch(a=!0,t){case"json":e=JSON.parse(s.responseText);break;case"xml":e=s.responseXML;break;default:e=s.responseText}n(e)}else"function"==typeof i&&i(s.status)},s.send())},t.hasClass=function(e,t){return!!(e.className.split(" ").indexOf(t)>-1)},t.offset=function(e){var t=e.getBoundingClientRect();return{left:t.left+(window.pageXOffset||document.documentElement.scrollLeft),top:t.top+(window.pageYOffset||document.documentElement.scrollTop)}},t.isXml=function(e){var t;if(void 0!==window.DOMParser)t=function(e){return(new window.DOMParser).parseFromString(e,"text/xml")};else{if(void 0===window.ActiveXObject||!new window.ActiveXObject("Microsoft.XMLDOM"))return!1;t=function(e){var t=new window.ActiveXObject("Microsoft.XMLDOM");return t.async=!1,t.loadXML(e),t}}try{var n=t(e);if(n.getElementsByTagName("parsererror").length>0)return!1;if(n.parseError&&0!==n.parseError.errorCode)return!1}catch(e){return!1}return!0}},function(e,t,n){var i=n(0),r=n(53),s=n(7),a=n(54),o=n(58),l=n(91),u=r("wks"),c=i.Symbol,d=l?c:c&&c.withoutSetter||a;e.exports=function(e){return s(u,e)||(o&&s(c,e)?u[e]=c[e]:u[e]=d("Symbol."+e)),u[e]}},function(e,t,n){var i=n(0),r=n(31).f,s=n(11),a=n(15),o=n(36),l=n(83),u=n(57);e.exports=function(e,t){var n,c,d,h,p,f=e.target,v=e.global,m=e.stat;if(n=v?i:m?i[f]||o(f,{}):(i[f]||{}).prototype)for(c in t){if(h=t[c],d=e.noTargetGet?(p=r(n,c))&&p.value:n[c],!u(v?c:f+(m?".":"#")+c,e.forced)&&void 0!==d){if(typeof h==typeof d)continue;l(h,d)}(e.sham||d&&d.sham)&&s(h,"sham",!0),a(n,c,h,e)}}},function(e,t){e.exports=function(e){try{return!!e()}catch(e){return!0}}},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.events=t.addEvent=void 0,t.addEvent=function(e,t){if("string"!=typeof e)throw new Error("Event name must be a string");var n={};return t&&(n=t.detail?{detail:t.detail}:{detail:t}),new CustomEvent(e,n)},t.events=["loadstart","durationchange","loadedmetadata","loadeddata","progress","canplay","canplaythrough","suspend","abort","error","emptied","stalled","play","playing","pause","waiting","seeking","seeked","timeupdate","ended","ratechange","volumechange"]},function(e,t){var n={}.hasOwnProperty;e.exports=function(e,t){return n.call(e,t)}},function(e,t,n){var i=n(10);e.exports=function(e){if(!i(e))throw TypeError(String(e)+" is not an object");return e}},function(e,t,n){var i=n(5);e.exports=!i((function(){return 7!=Object.defineProperty({},1,{get:function(){return 7}})[1]}))},function(e,t){e.exports=function(e){return"object"==typeof e?null!==e:"function"==typeof e}},function(e,t,n){var i=n(9),r=n(12),s=n(17);e.exports=i?function(e,t,n){return r.f(e,t,s(1,n))}:function(e,t,n){return e[t]=n,e}},function(e,t,n){var i=n(9),r=n(52),s=n(8),a=n(34),o=Object.defineProperty;t.f=i?o:function(e,t,n){if(s(e),t=a(t,!0),s(n),r)try{return o(e,t,n)}catch(e){}if("get"in n||"set"in n)throw TypeError("Accessors not supported");return"value"in n&&(e[t]=n.value),e}},function(e,t,n){var i=n(19),r=n(0),s=function(e){return"function"==typeof e?e:void 0};e.exports=function(e,t){return arguments.length<2?s(i[e])||s(r[e]):i[e]&&i[e][t]||r[e]&&r[e][t]}},function(e,t,n){"use strict";function i(e){if("string"!=typeof e)throw new Error("`url` argument must be a string");var t=e.split("?")[0],n=t?t.split("\\"):null,i=n?n.pop():null,r=i?i.split("/"):null,s=r?r.pop():null;return s&&s.indexOf(".")>-1?s.substring(s.lastIndexOf(".")+1):""}Object.defineProperty(t,"__esModule",{value:!0}),t.isAutoplaySupported=t.predictType=t.isFlvSource=t.isDashSource=t.isM3USource=t.isHlsSource=t.getExtension=void 0,t.getExtension=i,t.isHlsSource=function(e){return/\.m3u8$/i.test(e.src)||["application/x-mpegURL","application/vnd.apple.mpegurl"].indexOf(e.type)>-1},t.isM3USource=function(e){return/\.m3u$/i.test(e.src)},t.isDashSource=function(e){return/\.mpd/i.test(e.src)||"application/dash+xml"===e.type},t.isFlvSource=function(e){return/(^rtmp:\/\/|\.flv$)/i.test(e.src)||["video/x-flv","video/flv"].indexOf(e.type)>-1},t.predictType=function(e){var t,n=i(e);if(!n)return"video/mp4";switch(n){case"m3u8":case"m3u":t="application/x-mpegURL";break;case"mpd":t="application/dash+xml";break;case"mp3":t="audio/mp3";break;case"webm":t="video/webm";break;default:t="video/mp4"}return t},t.isAutoplaySupported=function(e,t,n,i){var r=e.play();void 0!==r?r.then((function(){return e.pause(),t(!0),n(!1),i()})).catch((function(){e.volume=0,e.muted=!0,e.play().then((function(){return e.pause(),t(!0),n(!0),i()})).catch((function(){e.volume=1,e.muted=!1,t(!1),n(!1),i()}))})):(t(!e.paused||"Promise"in window&&r instanceof Promise),e.pause(),n(!1),i())}},function(e,t,n){var i=n(0),r=n(11),s=n(7),a=n(36),o=n(37),l=n(26),u=l.get,c=l.enforce,d=String(String).split("String");(e.exports=function(e,t,n,o){var l,u=!!o&&!!o.unsafe,h=!!o&&!!o.enumerable,p=!!o&&!!o.noTargetGet;"function"==typeof n&&("string"!=typeof t||s(n,"name")||r(n,"name",t),(l=c(n)).source||(l.source=d.join("string"==typeof t?t:""))),e!==i?(u?!p&&e[t]&&(h=!0):delete e[t],h?e[t]=n:r(e,t,n)):h?e[t]=n:a(t,n)})(Function.prototype,"toString",(function(){return"function"==typeof this&&u(this).source||o(this)}))},function(e,t){e.exports=function(e){if("function"!=typeof e)throw TypeError(String(e)+" is not a function");return e}},function(e,t){e.exports=function(e,t){return{enumerable:!(1&e),configurable:!(2&e),writable:!(4&e),value:t}}},function(e,t){e.exports=!1},function(e,t,n){var i=n(0);e.exports=i},function(e,t,n){var i=n(16);e.exports=function(e,t,n){if(i(e),void 0===t)return e;switch(n){case 0:return function(){return e.call(t)};case 1:return function(n){return e.call(t,n)};case 2:return function(n,i){return e.call(t,n,i)};case 3:return function(n,i,r){return e.call(t,n,i,r)}}return function(){return e.apply(t,arguments)}}},function(e,t,n){var i=n(33);e.exports=function(e){return Object(i(e))}},function(e,t){e.exports={}},function(e,t,n){"use strict";var i=n(16),r=function(e){var t,n;this.promise=new e((function(e,i){if(void 0!==t||void 0!==n)throw TypeError("Bad Promise constructor");t=e,n=i})),this.resolve=i(t),this.reject=i(n)};e.exports.f=function(e){return new r(e)}},function(e,t,n){var i=n(32),r=n(33);e.exports=function(e){return i(r(e))}},function(e,t){var n={}.toString;e.exports=function(e){return n.call(e).slice(8,-1)}},function(e,t,n){var i,r,s,a=n(82),o=n(0),l=n(10),u=n(11),c=n(7),d=n(38),h=n(39),p=n(40),f=o.WeakMap;if(a){var v=d.state||(d.state=new f),m=v.get,y=v.has,g=v.set;i=function(e,t){return t.facade=e,g.call(v,e,t),t},r=function(e){return m.call(v,e)||{}},s=function(e){return y.call(v,e)}}else{var b=h("state");p[b]=!0,i=function(e,t){return t.facade=e,u(e,b,t),t},r=function(e){return c(e,b)?e[b]:{}},s=function(e){return c(e,b)}}e.exports={set:i,get:r,has:s,enforce:function(e){return s(e)?r(e):i(e,{})},getterFor:function(e){return function(t){var n;if(!l(t)||(n=r(t)).type!==e)throw TypeError("Incompatible receiver, "+e+" required");return n}}}},function(e,t,n){var i=n(41),r=Math.min;e.exports=function(e){return e>0?r(i(e),9007199254740991):0}},function(e,t,n){var i=n(8),r=n(66),s=n(27),a=n(20),o=n(67),l=n(65),u=function(e,t){this.stopped=e,this.result=t};e.exports=function(e,t,n){var c,d,h,p,f,v,m,y=n&&n.that,g=!(!n||!n.AS_ENTRIES),b=!(!n||!n.IS_ITERATOR),E=!(!n||!n.INTERRUPTED),_=a(t,y,1+g+E),A=function(e){return c&&l(c),new u(!0,e)},O=function(e){return g?(i(e),E?_(e[0],e[1],A):_(e[0],e[1])):E?_(e,A):_(e)};if(b)c=e;else{if("function"!=typeof(d=o(e)))throw TypeError("Target is not iterable");if(r(d)){for(h=0,p=s(e.length);p>h;h++)if((f=O(e[h]))&&f instanceof u)return f;return new u(!1)}c=d.call(e)}for(v=c.next;!(m=v.call(c)).done;){try{f=O(m.value)}catch(e){throw l(c),e}if("object"==typeof f&&f&&f instanceof u)return f}return new u(!1)}},function(e,t){e.exports=function(e){try{return{error:!1,value:e()}}catch(e){return{error:!0,value:e}}}},function(e,t,n){"use strict";function i(e,t){for(var n=0;n0?i:n)(e)}},function(e,t){e.exports=["constructor","hasOwnProperty","isPrototypeOf","propertyIsEnumerable","toLocaleString","toString","valueOf"]},function(e,t,n){var i,r=n(8),s=n(92),a=n(42),o=n(40),l=n(60),u=n(35),c=n(39),d=c("IE_PROTO"),h=function(){},p=function(e){return"