From 7a781bd2cfd23f2a9d86aa3b01aed9823d6b8e4c Mon Sep 17 00:00:00 2001 From: yinguohui Date: Mon, 13 Aug 2018 15:48:09 +0800 Subject: [PATCH] feat: add music-plugin xgplayer support music with xgplayer-music --- packages/xgplayer-music/.gitignore | 2 + packages/xgplayer-music/browser/index.js | 1 + packages/xgplayer-music/dist/index.js | 1 + packages/xgplayer-music/package.json | 51 +++++++ packages/xgplayer-music/postcss.config.js | 7 + .../src/controls/theme-default.js | 57 ++++++++ .../src/controls/theme-default.scss | 79 +++++++++++ .../src/controls/theme-lyric.js | 10 ++ .../src/controls/theme-lyric.scss | 4 + packages/xgplayer-music/src/index.js | 5 + packages/xgplayer-music/src/lyric.js | 79 +++++++++++ packages/xgplayer-music/src/music.js | 126 ++++++++++++++++++ packages/xgplayer-music/webpack.config.js | 79 +++++++++++ 13 files changed, 501 insertions(+) create mode 100644 packages/xgplayer-music/.gitignore create mode 100644 packages/xgplayer-music/browser/index.js create mode 100644 packages/xgplayer-music/dist/index.js create mode 100644 packages/xgplayer-music/package.json create mode 100644 packages/xgplayer-music/postcss.config.js create mode 100644 packages/xgplayer-music/src/controls/theme-default.js create mode 100644 packages/xgplayer-music/src/controls/theme-default.scss create mode 100644 packages/xgplayer-music/src/controls/theme-lyric.js create mode 100644 packages/xgplayer-music/src/controls/theme-lyric.scss create mode 100644 packages/xgplayer-music/src/index.js create mode 100644 packages/xgplayer-music/src/lyric.js create mode 100644 packages/xgplayer-music/src/music.js create mode 100644 packages/xgplayer-music/webpack.config.js diff --git a/packages/xgplayer-music/.gitignore b/packages/xgplayer-music/.gitignore new file mode 100644 index 000000000..93cab344d --- /dev/null +++ b/packages/xgplayer-music/.gitignore @@ -0,0 +1,2 @@ +node_modules +yarn-error.log diff --git a/packages/xgplayer-music/browser/index.js b/packages/xgplayer-music/browser/index.js new file mode 100644 index 000000000..95dfaa71e --- /dev/null +++ b/packages/xgplayer-music/browser/index.js @@ -0,0 +1 @@ +window.Music=function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}return r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:n})},r.r=function(e){Object.defineProperty(e,"__esModule",{value:!0})},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=13)}([function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=function(){function e(e,t){for(var r=0;r-1&&this.list.length>0&&(this.index--,this.src=this.list[this.index].src);break;default:var e=this.random();e&&(this.src=e.src)}}},{key:"lyric",set:function(e){"Array"===l.typeOf(e)?(this.__lyric__&&this.__lyric__.unbind(this),this.__lyric__=new i.default(e[0],e[1]),this.__lyric__.bind(this)):"String"===l.typeOf(e)&&(this.__lyric__&&this.__lyric__.unbind(this),this.__lyric__=new i.default(e),this.__lyric__.bind(this))},get:function(){return this.__lyric__?this.__lyric__.rawTxt:""}},{key:"lyricLine",get:function(){return this.__lyric__?this.__lyric__.line:-1}},{key:"lyricList",get:function(){return this.__lyric__?this.__lyric__.list:[]}},{key:"mode",get:function(){return s||t.ModeType[0]},set:function(e){switch(e){case 0:case 1:case 2:s=t.ModeType[e]}}}],[{key:"ModeType",get:function(){return["order","random","loop"]}}]),t}();t.default=p,e.exports=t.default},function(e,t,r){var n,o,i={},a=(n=function(){return window&&document&&document.all&&!window.atob},function(){return void 0===o&&(o=n.apply(this,arguments)),o}),s=function(e){var t={};return function(e){if("function"==typeof e)return e();if(void 0===t[e]){var r=function(e){return document.querySelector(e)}.call(this,e);if(window.HTMLIFrameElement&&r instanceof window.HTMLIFrameElement)try{r=r.contentDocument.head}catch(e){r=null}t[e]=r}return t[e]}}(),l=null,p=0,c=[],u=r(6);function f(e,t){for(var r=0;r=0&&c.splice(t,1)}function y(e){var t=document.createElement("style");return void 0===e.attrs.type&&(e.attrs.type="text/css"),h(t,e.attrs),x(e,t),t}function h(e,t){Object.keys(t).forEach(function(r){e.setAttribute(r,t[r])})}function m(e,t){var r,n,o,i;if(t.transform&&e.css){if(!(i=t.transform(e.css)))return function(){};e.css=i}if(t.singleton){var a=p++;r=l||(l=y(t)),n=_.bind(null,r,a,!1),o=_.bind(null,r,a,!0)}else e.sourceMap&&"function"==typeof URL&&"function"==typeof URL.createObjectURL&&"function"==typeof URL.revokeObjectURL&&"function"==typeof Blob&&"function"==typeof btoa?(r=function(e){var t=document.createElement("link");return void 0===e.attrs.type&&(e.attrs.type="text/css"),e.attrs.rel="stylesheet",h(t,e.attrs),x(e,t),t}(t),n=function(e,t,r){var n=r.css,o=r.sourceMap,i=void 0===t.convertToAbsoluteUrls&&o;(t.convertToAbsoluteUrls||i)&&(n=u(n));o&&(n+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(o))))+" */");var a=new Blob([n],{type:"text/css"}),s=e.href;e.href=URL.createObjectURL(a),s&&URL.revokeObjectURL(s)}.bind(null,r,t),o=function(){g(r),r.href&&URL.revokeObjectURL(r.href)}):(r=y(t),n=function(e,t){var r=t.css,n=t.media;n&&e.setAttribute("media",n);if(e.styleSheet)e.styleSheet.cssText=r;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(r))}}.bind(null,r),o=function(){g(r)});return n(e),function(t){if(t){if(t.css===e.css&&t.media===e.media&&t.sourceMap===e.sourceMap)return;n(e=t)}else o()}}e.exports=function(e,t){if("undefined"!=typeof DEBUG&&DEBUG&&"object"!=typeof document)throw new Error("The style-loader cannot be used in a non-browser environment");(t=t||{}).attrs="object"==typeof t.attrs?t.attrs:{},t.singleton||"boolean"==typeof t.singleton||(t.singleton=a()),t.insertInto||(t.insertInto="head"),t.insertAt||(t.insertAt="bottom");var r=d(e,t);return f(r,t),function(e){for(var n=[],o=0;o*{height:3px;margin-top:8.5px}.xgplayer-music .xgplayer-controls .xgplayer-progress .xgplayer-progress-played:after{top:-4px;width:10px;height:10px;content:" ";display:block}.xgplayer-music .xgplayer-controls .xgplayer-progress .xgplayer-tips{display:none!important}.xgplayer-music .xgplayer-controls .xgplayer-time{-webkit-box-ordinal-group:6;-ms-flex-order:5;order:5;margin-left:30px;line-height:1;position:relative;top:55%}.xgplayer-music .xgplayer-controls .xgplayer-placeholder{-webkit-box-ordinal-group:1000;-ms-flex-order:999;order:999;width:0}.xgplayer-music .xgplayer-controls .xgplayer-icon{padding-top:5px}.xgplayer-music .xgplayer-controls .xgplayer-name{position:absolute;left:175px;bottom:50%;font-size:12px;color:#ddd}.xgplayer-music{font-size:14px}',""])},function(e,t,r){var n=r(3);"string"==typeof n&&(n=[[e.i,n,""]]);var o={hmr:!0,transform:void 0,insertInto:void 0};r(1)(n,o);n.locals&&(e.exports=n.locals)},function(e,t,r){"use strict";var n,o=r(0),i=(n=o)&&n.__esModule?n:{default:n};r(4);i.default.install("theme-lyric",function(e){e.config.theme})},function(e,t){e.exports=function(e){var t="undefined"!=typeof window&&window.location;if(!t)throw new Error("fixUrls requires window.location");if(!e||"string"!=typeof e)return e;var r=t.protocol+"//"+t.host,n=r+t.pathname.replace(/\/[^\/]*$/,"/");return e.replace(/url\s*\(((?:[^)(]|\((?:[^)(]+|\([^)(]*\))*\))*)\)/gi,function(e,t){var o,i=t.trim().replace(/^"(.*)"$/,function(e,t){return t}).replace(/^'(.*)'$/,function(e,t){return t});return/^(#|data:|http:\/\/|https:\/\/|file:\/\/\/|\s*$)/i.test(i)?e:(o=0===i.indexOf("//")?i:0===i.indexOf("/")?r+i:n+i.replace(/^\.\//,""),"url("+JSON.stringify(o)+")")})}},function(e,t,r){(e.exports=r(2)(!1)).push([e.i,'.xgplayer-music .xgplayer-controls{display:-webkit-box;display:-ms-flexbox;display:flex;height:50px;cursor:default}.xgplayer-music .xgplayer-controls .xgplayer-prev{-webkit-box-ordinal-group:1;-ms-flex-order:0;order:0;cursor:pointer}.xgplayer-music .xgplayer-controls .xgplayer-play{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.xgplayer-music .xgplayer-controls .xgplayer-play .xgplayer-tips{display:none}.xgplayer-music .xgplayer-controls .xgplayer-next{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;cursor:pointer}.xgplayer-music .xgplayer-controls .xgplayer-poster{position:static;-webkit-box-ordinal-group:4;-ms-flex-order:3;order:3;width:40px;height:40px;text-align:center;vertical-align:middle;position:relative;top:50%;margin-top:-17px}.xgplayer-music .xgplayer-controls .xgplayer-poster img{max-width:100%;max-height:100%}.xgplayer-music .xgplayer-controls .xgplayer-progress{position:relative;-webkit-box-ordinal-group:5;-ms-flex-order:4;order:4;top:70%;left:20px;margin-top:-11px;-webkit-box-flex:99;-ms-flex:99;flex:99}.xgplayer-music .xgplayer-controls .xgplayer-progress>*{height:3px;margin-top:8.5px}.xgplayer-music .xgplayer-controls .xgplayer-progress .xgplayer-progress-played:after{top:-4px;width:10px;height:10px;content:" ";display:block}.xgplayer-music .xgplayer-controls .xgplayer-progress .xgplayer-tips{display:none!important}.xgplayer-music .xgplayer-controls .xgplayer-time{-webkit-box-ordinal-group:6;-ms-flex-order:5;order:5;margin-left:30px;line-height:1;position:relative;top:55%}.xgplayer-music .xgplayer-controls .xgplayer-placeholder{-webkit-box-ordinal-group:1000;-ms-flex-order:999;order:999;width:0}.xgplayer-music .xgplayer-controls .xgplayer-icon{padding-top:5px}.xgplayer-music .xgplayer-controls .xgplayer-name{position:absolute;left:175px;bottom:50%;font-size:12px;color:#ddd}',""])},function(e,t,r){var n=r(7);"string"==typeof n&&(n=[[e.i,n,""]]);var o={hmr:!0,transform:void 0,insertInto:void 0};r(1)(n,o);n.locals&&(e.exports=n.locals)},function(e,t,r){"use strict";var n,o=r(0),i=(n=o)&&n.__esModule?n:{default:n};r(8);i.default.install("theme-default",function(e){var t=e.config,r=e.constructor.util,n=e.controls;if(t.controls){r.addClass(e.root,"xgplayer-music-default"),t.theme&&"default"!==t.theme||(t.width||(e.config.width="100%",e.root.style.width="100%"),t.height||(e.config.height="50px",e.root.style.height="50px"));var o=r.createDom("xg-prev",'\n \n ',{},"xgplayer-prev");n.appendChild(o);var i=["click","touchstart"];i.forEach(function(t){o.addEventListener(t,function(t){t.preventDefault(),t.stopPropagation(),e.prev()},!1)});var a=r.createDom("xg-next",'\n \n ',{},"xgplayer-next");n.appendChild(a),i.forEach(function(t){a.addEventListener(t,function(t){t.preventDefault(),t.stopPropagation(),e.next()},!1)});var s=r.createDom("xg-name",""+e.config.name,{},"xgplayer-name");n.appendChild(s);var l=r.createDom("xg-poster",'',{},"xgplayer-poster");n.appendChild(l)}else e.root.style.display="none"})},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=function(){function e(e,t){for(var r=0;r1&&void 0!==arguments[1]?arguments[1]:0;o(this,e),this.rawTxt=t,this.txt=t.replace(/^[\r\n]|[\r\n]$/g,"").match(/(\[.*\])[^[]+/g),this.isDynamic=[].concat(t.match(/\[\d{2}:\d{2}\.\d{2,3}\]/g)).length===this.txt.length&&this.txt.length>1,this.animateInterval=r,this.list=this.txt.map(function(e,t){var r=/(\[[\d:\S]+\])([^[]+)/g.test(e),n=RegExp.$1,o=RegExp.$2;return{time:r?new i(n).time:-1,lyric:o,idx:t}}),this.line=0}return n(e,[{key:"adjust",value:function(){for(var e,t,r=this.list,n=0,o=r.length;nr[n].time);e++);if(e=i&&t[o++]&&1*e+1*r<=t[o++].time})}},{key:"bind",value:function(e){var t=this;return!!this.isDynamic&&(this.__handle__=function(){var r=t.find(e.currentTime)[0];r.idx!==t.line&&(t.line=r.idx,e.emit("lyricUpdate",r))}.bind(this,e),e.on("timeupdate",this.__handle__),!0)}},{key:"unbind",value:function(e){this.__handle__&&(e.off("lybricUpdate",this.__handle__),delete this.__handle__)}}]),e}();t.default=a},function(e,t){e.exports=window.Player},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n,o=r(0),i=(n=o)&&n.__esModule?n:{default:n};r(9),r(5),t.default=i.default,e.exports=t.default},function(e,t,r){e.exports=r(12)}]); \ No newline at end of file diff --git a/packages/xgplayer-music/dist/index.js b/packages/xgplayer-music/dist/index.js new file mode 100644 index 000000000..b3536d151 --- /dev/null +++ b/packages/xgplayer-music/dist/index.js @@ -0,0 +1 @@ +!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("xgplayer")):"function"==typeof define&&define.amd?define(["xgplayer"],t):"object"==typeof exports?exports["xgplayer-music.js"]=t(require("xgplayer")):e["xgplayer-music.js"]=t(e.xgplayer)}(window,function(e){return function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}return r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:n})},r.r=function(e){Object.defineProperty(e,"__esModule",{value:!0})},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=13)}([function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=function(){function e(e,t){for(var r=0;r-1&&this.list.length>0&&(this.index--,this.src=this.list[this.index].src);break;default:var e=this.random();e&&(this.src=e.src)}}},{key:"lyric",set:function(e){"Array"===l.typeOf(e)?(this.__lyric__&&this.__lyric__.unbind(this),this.__lyric__=new i.default(e[0],e[1]),this.__lyric__.bind(this)):"String"===l.typeOf(e)&&(this.__lyric__&&this.__lyric__.unbind(this),this.__lyric__=new i.default(e),this.__lyric__.bind(this))},get:function(){return this.__lyric__?this.__lyric__.rawTxt:""}},{key:"lyricLine",get:function(){return this.__lyric__?this.__lyric__.line:-1}},{key:"lyricList",get:function(){return this.__lyric__?this.__lyric__.list:[]}},{key:"mode",get:function(){return s||t.ModeType[0]},set:function(e){switch(e){case 0:case 1:case 2:s=t.ModeType[e]}}}],[{key:"ModeType",get:function(){return["order","random","loop"]}}]),t}();t.default=p,e.exports=t.default},function(e,t,r){var n,o,i={},a=(n=function(){return window&&document&&document.all&&!window.atob},function(){return void 0===o&&(o=n.apply(this,arguments)),o}),s=function(e){var t={};return function(e){if("function"==typeof e)return e();if(void 0===t[e]){var r=function(e){return document.querySelector(e)}.call(this,e);if(window.HTMLIFrameElement&&r instanceof window.HTMLIFrameElement)try{r=r.contentDocument.head}catch(e){r=null}t[e]=r}return t[e]}}(),l=null,p=0,c=[],u=r(6);function f(e,t){for(var r=0;r=0&&c.splice(t,1)}function y(e){var t=document.createElement("style");return void 0===e.attrs.type&&(e.attrs.type="text/css"),h(t,e.attrs),x(e,t),t}function h(e,t){Object.keys(t).forEach(function(r){e.setAttribute(r,t[r])})}function m(e,t){var r,n,o,i;if(t.transform&&e.css){if(!(i=t.transform(e.css)))return function(){};e.css=i}if(t.singleton){var a=p++;r=l||(l=y(t)),n=_.bind(null,r,a,!1),o=_.bind(null,r,a,!0)}else e.sourceMap&&"function"==typeof URL&&"function"==typeof URL.createObjectURL&&"function"==typeof URL.revokeObjectURL&&"function"==typeof Blob&&"function"==typeof btoa?(r=function(e){var t=document.createElement("link");return void 0===e.attrs.type&&(e.attrs.type="text/css"),e.attrs.rel="stylesheet",h(t,e.attrs),x(e,t),t}(t),n=function(e,t,r){var n=r.css,o=r.sourceMap,i=void 0===t.convertToAbsoluteUrls&&o;(t.convertToAbsoluteUrls||i)&&(n=u(n));o&&(n+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(o))))+" */");var a=new Blob([n],{type:"text/css"}),s=e.href;e.href=URL.createObjectURL(a),s&&URL.revokeObjectURL(s)}.bind(null,r,t),o=function(){g(r),r.href&&URL.revokeObjectURL(r.href)}):(r=y(t),n=function(e,t){var r=t.css,n=t.media;n&&e.setAttribute("media",n);if(e.styleSheet)e.styleSheet.cssText=r;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(r))}}.bind(null,r),o=function(){g(r)});return n(e),function(t){if(t){if(t.css===e.css&&t.media===e.media&&t.sourceMap===e.sourceMap)return;n(e=t)}else o()}}e.exports=function(e,t){if("undefined"!=typeof DEBUG&&DEBUG&&"object"!=typeof document)throw new Error("The style-loader cannot be used in a non-browser environment");(t=t||{}).attrs="object"==typeof t.attrs?t.attrs:{},t.singleton||"boolean"==typeof t.singleton||(t.singleton=a()),t.insertInto||(t.insertInto="head"),t.insertAt||(t.insertAt="bottom");var r=d(e,t);return f(r,t),function(e){for(var n=[],o=0;o*{height:3px;margin-top:8.5px}.xgplayer-music .xgplayer-controls .xgplayer-progress .xgplayer-progress-played:after{top:-4px;width:10px;height:10px;content:" ";display:block}.xgplayer-music .xgplayer-controls .xgplayer-progress .xgplayer-tips{display:none!important}.xgplayer-music .xgplayer-controls .xgplayer-time{-webkit-box-ordinal-group:6;-ms-flex-order:5;order:5;margin-left:30px;line-height:1;position:relative;top:55%}.xgplayer-music .xgplayer-controls .xgplayer-placeholder{-webkit-box-ordinal-group:1000;-ms-flex-order:999;order:999;width:0}.xgplayer-music .xgplayer-controls .xgplayer-icon{padding-top:5px}.xgplayer-music .xgplayer-controls .xgplayer-name{position:absolute;left:175px;bottom:50%;font-size:12px;color:#ddd}.xgplayer-music{font-size:14px}',""])},function(e,t,r){var n=r(3);"string"==typeof n&&(n=[[e.i,n,""]]);var o={hmr:!0,transform:void 0,insertInto:void 0};r(1)(n,o);n.locals&&(e.exports=n.locals)},function(e,t,r){"use strict";var n,o=r(0),i=(n=o)&&n.__esModule?n:{default:n};r(4);i.default.install("theme-lyric",function(e){e.config.theme})},function(e,t){e.exports=function(e){var t="undefined"!=typeof window&&window.location;if(!t)throw new Error("fixUrls requires window.location");if(!e||"string"!=typeof e)return e;var r=t.protocol+"//"+t.host,n=r+t.pathname.replace(/\/[^\/]*$/,"/");return e.replace(/url\s*\(((?:[^)(]|\((?:[^)(]+|\([^)(]*\))*\))*)\)/gi,function(e,t){var o,i=t.trim().replace(/^"(.*)"$/,function(e,t){return t}).replace(/^'(.*)'$/,function(e,t){return t});return/^(#|data:|http:\/\/|https:\/\/|file:\/\/\/|\s*$)/i.test(i)?e:(o=0===i.indexOf("//")?i:0===i.indexOf("/")?r+i:n+i.replace(/^\.\//,""),"url("+JSON.stringify(o)+")")})}},function(e,t,r){(e.exports=r(2)(!1)).push([e.i,'.xgplayer-music .xgplayer-controls{display:-webkit-box;display:-ms-flexbox;display:flex;height:50px;cursor:default}.xgplayer-music .xgplayer-controls .xgplayer-prev{-webkit-box-ordinal-group:1;-ms-flex-order:0;order:0;cursor:pointer}.xgplayer-music .xgplayer-controls .xgplayer-play{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.xgplayer-music .xgplayer-controls .xgplayer-play .xgplayer-tips{display:none}.xgplayer-music .xgplayer-controls .xgplayer-next{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;cursor:pointer}.xgplayer-music .xgplayer-controls .xgplayer-poster{position:static;-webkit-box-ordinal-group:4;-ms-flex-order:3;order:3;width:40px;height:40px;text-align:center;vertical-align:middle;position:relative;top:50%;margin-top:-17px}.xgplayer-music .xgplayer-controls .xgplayer-poster img{max-width:100%;max-height:100%}.xgplayer-music .xgplayer-controls .xgplayer-progress{position:relative;-webkit-box-ordinal-group:5;-ms-flex-order:4;order:4;top:70%;left:20px;margin-top:-11px;-webkit-box-flex:99;-ms-flex:99;flex:99}.xgplayer-music .xgplayer-controls .xgplayer-progress>*{height:3px;margin-top:8.5px}.xgplayer-music .xgplayer-controls .xgplayer-progress .xgplayer-progress-played:after{top:-4px;width:10px;height:10px;content:" ";display:block}.xgplayer-music .xgplayer-controls .xgplayer-progress .xgplayer-tips{display:none!important}.xgplayer-music .xgplayer-controls .xgplayer-time{-webkit-box-ordinal-group:6;-ms-flex-order:5;order:5;margin-left:30px;line-height:1;position:relative;top:55%}.xgplayer-music .xgplayer-controls .xgplayer-placeholder{-webkit-box-ordinal-group:1000;-ms-flex-order:999;order:999;width:0}.xgplayer-music .xgplayer-controls .xgplayer-icon{padding-top:5px}.xgplayer-music .xgplayer-controls .xgplayer-name{position:absolute;left:175px;bottom:50%;font-size:12px;color:#ddd}',""])},function(e,t,r){var n=r(7);"string"==typeof n&&(n=[[e.i,n,""]]);var o={hmr:!0,transform:void 0,insertInto:void 0};r(1)(n,o);n.locals&&(e.exports=n.locals)},function(e,t,r){"use strict";var n,o=r(0),i=(n=o)&&n.__esModule?n:{default:n};r(8);i.default.install("theme-default",function(e){var t=e.config,r=e.constructor.util,n=e.controls;if(t.controls){r.addClass(e.root,"xgplayer-music-default"),t.theme&&"default"!==t.theme||(t.width||(e.config.width="100%",e.root.style.width="100%"),t.height||(e.config.height="50px",e.root.style.height="50px"));var o=r.createDom("xg-prev",'\n \n ',{},"xgplayer-prev");n.appendChild(o);var i=["click","touchstart"];i.forEach(function(t){o.addEventListener(t,function(t){t.preventDefault(),t.stopPropagation(),e.prev()},!1)});var a=r.createDom("xg-next",'\n \n ',{},"xgplayer-next");n.appendChild(a),i.forEach(function(t){a.addEventListener(t,function(t){t.preventDefault(),t.stopPropagation(),e.next()},!1)});var s=r.createDom("xg-name",""+e.config.name,{},"xgplayer-name");n.appendChild(s);var l=r.createDom("xg-poster",'',{},"xgplayer-poster");n.appendChild(l)}else e.root.style.display="none"})},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=function(){function e(e,t){for(var r=0;r1&&void 0!==arguments[1]?arguments[1]:0;o(this,e),this.rawTxt=t,this.txt=t.replace(/^[\r\n]|[\r\n]$/g,"").match(/(\[.*\])[^[]+/g),this.isDynamic=[].concat(t.match(/\[\d{2}:\d{2}\.\d{2,3}\]/g)).length===this.txt.length&&this.txt.length>1,this.animateInterval=r,this.list=this.txt.map(function(e,t){var r=/(\[[\d:\S]+\])([^[]+)/g.test(e),n=RegExp.$1,o=RegExp.$2;return{time:r?new i(n).time:-1,lyric:o,idx:t}}),this.line=0}return n(e,[{key:"adjust",value:function(){for(var e,t,r=this.list,n=0,o=r.length;nr[n].time);e++);if(e=i&&t[o++]&&1*e+1*r<=t[o++].time})}},{key:"bind",value:function(e){var t=this;return!!this.isDynamic&&(this.__handle__=function(){var r=t.find(e.currentTime)[0];r.idx!==t.line&&(t.line=r.idx,e.emit("lyricUpdate",r))}.bind(this,e),e.on("timeupdate",this.__handle__),!0)}},{key:"unbind",value:function(e){this.__handle__&&(e.off("lybricUpdate",this.__handle__),delete this.__handle__)}}]),e}();t.default=a},function(t,r){t.exports=e},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n,o=r(0),i=(n=o)&&n.__esModule?n:{default:n};r(9),r(5),t.default=i.default,e.exports=t.default},function(e,t,r){e.exports=r(12)}])}); \ No newline at end of file diff --git a/packages/xgplayer-music/package.json b/packages/xgplayer-music/package.json new file mode 100644 index 000000000..e5e7a052c --- /dev/null +++ b/packages/xgplayer-music/package.json @@ -0,0 +1,51 @@ +{ + "name": "xgplayer-music", + "version": "1.0.7", + "description": "xgplayer plugin for music", + "main": "./dist/index.js", + "scripts": { + "prepare": "npm run build", + "build": "webpack --progress --display-chunks -p", + "watch": "webpack --progress --display-chunks -p --watch" + }, + "repository": { + "type": "git", + "url": "git@github.com:bytedance/xgplayer.git" + }, + "babel": { + "presets": [ + "es2015" + ], + "plugins": [ + "add-module-exports" + ] + }, + "keywords": [ + "mp4", + "fmp4", + "player", + "video" + ], + "author": "yinguohui@bytedance.com", + "license": "MIT", + "dependencies": { + "babel-core": "^6.26.3", + "babel-loader": "^7.1.4", + "babel-plugin-add-module-exports": "^0.2.1", + "deepmerge": "^2.0.1", + "event-emitter": "^0.3.5", + "hls.js": "^0.8.9", + "node-sass": "^4.9.2", + "postcss-cssnext": "^3.1.0", + "postcss-loader": "^3.0.0", + "sass-loader": "^7.1.0", + "webpack": "^4.11.0" + }, + "peerDependency": { + "xgplayer": "^0.1.0" + }, + "devDependencies": { + "babel-preset-es2015": "^6.24.1", + "webpack-cli": "^3.0.2" + } +} diff --git a/packages/xgplayer-music/postcss.config.js b/packages/xgplayer-music/postcss.config.js new file mode 100644 index 000000000..ed4ffc3de --- /dev/null +++ b/packages/xgplayer-music/postcss.config.js @@ -0,0 +1,7 @@ +module.exports = { + plugins: { + 'postcss-cssnext': { + browserslist: ['cover 99.5%'] + } + } +} diff --git a/packages/xgplayer-music/src/controls/theme-default.js b/packages/xgplayer-music/src/controls/theme-default.js new file mode 100644 index 000000000..69d8c0df1 --- /dev/null +++ b/packages/xgplayer-music/src/controls/theme-default.js @@ -0,0 +1,57 @@ +import Player from '../music' +import './theme-default.scss' + +const defualtTheme = function (player) { + const config = player.config + const util = player.constructor.util + const controlEl = player.controls + + if (!config.controls) { + player.root.style.display = 'none' + return + } + util.addClass(player.root, 'xgplayer-music-default') + if (!config.theme || config.theme === 'default') { + if (!config.width) { + player.config.width = '100%' + player.root.style.width = '100%' + } + if (!config.height) { + player.config.height = '50px' + player.root.style.height = '50px' + } + } + const prev = util.createDom('xg-prev', ` + + `, {}, 'xgplayer-prev') + controlEl.appendChild(prev) + const ev = ['click', 'touchstart'] + ev.forEach(item => { + prev.addEventListener(item, function (e) { + e.preventDefault() + e.stopPropagation() + player.prev() + }, false) + }) + const next = util.createDom('xg-next', ` + + `, {}, 'xgplayer-next') + controlEl.appendChild(next) + ev.forEach(item => { + next.addEventListener(item, function (e) { + e.preventDefault() + e.stopPropagation() + player.next() + }, false) + }) + + const name = util.createDom('xg-name', `${player.config.name}`, {}, 'xgplayer-name') + controlEl.appendChild(name) + + const poster = util.createDom('xg-poster', ``, {}, 'xgplayer-poster') + controlEl.appendChild(poster) +} + +Player.install('theme-default', defualtTheme) diff --git a/packages/xgplayer-music/src/controls/theme-default.scss b/packages/xgplayer-music/src/controls/theme-default.scss new file mode 100644 index 000000000..5510001a4 --- /dev/null +++ b/packages/xgplayer-music/src/controls/theme-default.scss @@ -0,0 +1,79 @@ +.xgplayer-music{ + .xgplayer-controls { + display: flex; + height: 50px; + cursor: default; + .xgplayer-prev { + order: 0; + cursor: pointer; + } + .xgplayer-play { + order: 1; + .xgplayer-tips { + display: none; + } + } + .xgplayer-next { + order: 2; + cursor: pointer; + } + .xgplayer-poster { + position: static; + order: 3; + width: 40px; + height: 40px; + text-align: center; + vertical-align: middle; + position: relative; + top: 50%; + margin-top: -17px; + img { + max-width: 100%; + max-height: 100%; + } + } + .xgplayer-progress { + position: relative; + order: 4; + top: 70%; + left: 20px; + margin-top: -11px; + flex: 99; + >* { + height: 3px; + margin-top: 8.5px; + } + .xgplayer-progress-played:after { + top: -4px; + width: 10px; + height: 10px; + content: " "; + display: block; + } + .xgplayer-tips { + display: none !important; + } + } + .xgplayer-time { + order: 5; + margin-left: 30px; + line-height: 1; + position: relative; + top: 55%; + } + .xgplayer-placeholder { + order: 999; + width: 0; + } + .xgplayer-icon { + padding-top: 5px; + } + .xgplayer-name { + position: absolute; + left: 175px; + bottom: 50%; + font-size: 12px; + color: #ddd; + } + } +} diff --git a/packages/xgplayer-music/src/controls/theme-lyric.js b/packages/xgplayer-music/src/controls/theme-lyric.js new file mode 100644 index 000000000..c878135c7 --- /dev/null +++ b/packages/xgplayer-music/src/controls/theme-lyric.js @@ -0,0 +1,10 @@ +import Player from '../music' +import './theme-lyric.scss' + +const defualtTheme = function (player) { + if (player.config.theme === 'lyric') { + + } +} + +Player.install('theme-lyric', defualtTheme) diff --git a/packages/xgplayer-music/src/controls/theme-lyric.scss b/packages/xgplayer-music/src/controls/theme-lyric.scss new file mode 100644 index 000000000..b5ca0b777 --- /dev/null +++ b/packages/xgplayer-music/src/controls/theme-lyric.scss @@ -0,0 +1,4 @@ +@import './theme-default.scss'; +.xgplayer-music{ + font-size: 14px; +} \ No newline at end of file diff --git a/packages/xgplayer-music/src/index.js b/packages/xgplayer-music/src/index.js new file mode 100644 index 000000000..6c928afd2 --- /dev/null +++ b/packages/xgplayer-music/src/index.js @@ -0,0 +1,5 @@ +import Music from './music' +import './controls/theme-default' +import './controls/theme-lyric' + +export default Music diff --git a/packages/xgplayer-music/src/lyric.js b/packages/xgplayer-music/src/lyric.js new file mode 100644 index 000000000..6af12e439 --- /dev/null +++ b/packages/xgplayer-music/src/lyric.js @@ -0,0 +1,79 @@ +class LyricTime { + constructor (timeTxt) { + this.regRule = /(\d{2}(?=:)):(\d{2}(?=\.))\.(\d{2,3})/g + if (this.regRule.test(timeTxt)) { + this.time = RegExp.$1 * 60 + RegExp.$2 * 1 + ('0.' + RegExp.$3) * 1 + } else { + this.time = -1 + } + } +} + +export {LyricTime} + +class Lyric { + constructor (txt, interval = 0) { + this.rawTxt = txt + this.txt = txt.replace(/^[\r\n]|[\r\n]$/g, '').match(/(\[.*\])[^[]+/g) + this.isDynamic = [].concat(txt.match(/\[\d{2}:\d{2}\.\d{2,3}\]/g)).length === this.txt.length && this.txt.length > 1 + this.animateInterval = interval + this.list = this.txt.map((item, idx) => { + const reg = /(\[[\d:\S]+\])([^[]+)/g.test(item) + const time = RegExp.$1 + const lyric = RegExp.$2 + return { + time: reg ? new LyricTime(time).time : -1, + lyric, + idx + } + }) + this.line = 0 + } + adjust () { + let list = this.list + for (let i = 0, j, k, len = list.length; i < len; i++) { + for (j = i + 1; j < len; j++) { + if (list[j].time > list[i].time) { + break + } + } + if (j < len) { + let sep = (list[j].time - list[i].time) / (j - i) + for (k = i + 1; k < j; k++) { + list[k].time = list[k - 1].time + sep + } + } + } + } + find (curTime) { + const list = this.list + const interval = this.animateInterval + return list.filter(({time}, idx) => { + return curTime >= time && list[idx++] && curTime * 1 + interval * 1 <= list[idx++].time + }) + } + bind (player) { + let self = this + if (self.isDynamic) { + self.__handle__ = (() => { + const f = this.find(player.currentTime)[0] + if (f.idx !== this.line) { + this.line = f.idx + player.emit('lyricUpdate', f) + } + }).bind(self, player) + player.on('timeupdate', self.__handle__) + return true + } else { + return false + } + } + unbind (player) { + if (this.__handle__) { + player.off('lybricUpdate', this.__handle__) + delete this.__handle__ + } + } +} + +export default Lyric diff --git a/packages/xgplayer-music/src/music.js b/packages/xgplayer-music/src/music.js new file mode 100644 index 000000000..108a2dbb2 --- /dev/null +++ b/packages/xgplayer-music/src/music.js @@ -0,0 +1,126 @@ +import Player from 'xgplayer' +import Lyric from './lyric' +let mode +const util = Player.util + +class Music extends Player { + constructor (options) { + let util = Player.util + let opts = util.deepCopy({ + controls: true, + mediaType: 'audio', + ignores: ['fullscreen', 'start', 'definition', 'makeBullet', 'textTrack', 'loading', 'pc', 'mobile', 'playbackRate', 'replay', 'volume', 'error', 'poster'] + }, options) + super(opts) + this.rawConfig = options + this.list = util.typeOf(opts.url) === 'Array' ? opts.url : [{ + src: opts.url, + name: opts.name + }] + this.history = [] + this.index = 0 + if (opts.lyric) { + this.__lyric__ = new Lyric(opts.lyric, opts.animateInterval) + this.__lyric__.bind(this) + } + util.addClass(this.root, 'xgplayer-music') + Object.defineProperty(this, 'src', { + get () { + return this.video.currentSrc + }, + set (v) { + let cur = util.typeOf(v) === 'String' ? {src: v, name: ''} : v + this.history.push(cur) + this.video.src = cur.src + }, + configurable: true + }) + this.start() + } + set lyric (lyricTxt) { + if (util.typeOf(lyricTxt) === 'Array') { + if (this.__lyric__) { + this.__lyric__.unbind(this) + } + this.__lyric__ = new Lyric(lyricTxt[0], lyricTxt[1]) + this.__lyric__.bind(this) + } else if (util.typeOf(lyricTxt) === 'String') { + if (this.__lyric__) { + this.__lyric__.unbind(this) + } + this.__lyric__ = new Lyric(lyricTxt) + this.__lyric__.bind(this) + } + } + get lyric () { + return this.__lyric__ ? this.__lyric__.rawTxt : '' + } + get lyricLine () { + return this.__lyric__ ? this.__lyric__.line : -1 + } + get lyricList () { + return this.__lyric__ ? this.__lyric__.list : [] + } + get mode () { + return mode || Music.ModeType[0] + } + set mode (idx) { + switch (idx) { + case 0: + case 1: + case 2: + mode = Music.ModeType[idx] + } + } + + add () {} + remove () {} + random () { + const len = this.list.length + this.index = Math.ceil(Math.random() * len) + return this.list[this.index] + } + next () { + switch (this.mode) { + case 'order': + case 'loop': + if (this.index + 1 < this.list.length) { + this.index++ + this.emit('change', this.list[this.index]) + this.src = this.list[this.index].src + } + break + default: + const next = this.random() + if (next) { + this.emit('change', next) + this.src = next.src + } + break + } + } + prev () { + switch (this.mode) { + case 'order': + case 'loop': + if (this.index - 1 > -1 && this.list.length > 0) { + this.index-- + this.emit('change', this.list[this.index]) + this.src = this.list[this.index].src + } + break + default: + const pre = this.random() + if (pre) { + this.emit('change', pre) + this.src = pre.src + } + break + } + } + static get ModeType () { + return ['order', 'random', 'loop'] + } +} + +export default Music diff --git a/packages/xgplayer-music/webpack.config.js b/packages/xgplayer-music/webpack.config.js new file mode 100644 index 000000000..419026013 --- /dev/null +++ b/packages/xgplayer-music/webpack.config.js @@ -0,0 +1,79 @@ +const polyfill = [] + +const umd = { + entry: polyfill.concat(['./src/index.js']), + output: { + path: `${__dirname}/dist`, + filename: 'index.js', + library: 'xgplayer-music.js', + libraryTarget: 'umd' + }, + mode: 'production', + module: { + rules: [{ + test: /\.js$/, + loader: 'babel-loader', + exclude: /node_modules/ + }, { + test: /\.scss$/, + use: [ + 'style-loader', + { + loader: 'css-loader', + options: { + importLoaders: 1, + minimize: true + } + }, + 'postcss-loader', + 'sass-loader' + ] + }] + }, + externals: { + 'xgplayer': 'xgplayer' + }, + optimization: { + minimize: true + } +} + +const client = { + entry: polyfill.concat(['./src/index.js']), + output: { + path: `${__dirname}/browser`, + filename: 'index.js', + library: 'Music', + libraryTarget: 'window' + }, + module: { + rules: [{ + test: /\.js$/, + loader: 'babel-loader', + exclude: /node_modules/ + }, { + test: /\.scss$/, + use: [ + 'style-loader', + { + loader: 'css-loader', + options: { + importLoaders: 1, + minimize: true + } + }, + 'postcss-loader', + 'sass-loader' + ] + }] + }, + externals: { + 'xgplayer': 'Player' + }, + mode: 'production', + optimization: { + minimize: true + } +} + +module.exports = [umd, client]