nodebb-plugin-cplayer/static/cplayer.js

cPlayer's simple and naive plugin for nodebb.

"use strict";function _classCallCheck(i,t){if(!(i instanceof t))throw new TypeError("Cannot call a class as a function")}var _createClass=function(){function i(i,t){for(var e=0;e<t.length;e++){var s=t[e];s.enumerable=s.enumerable||!1,s.configurable=!0,"value"in s&&(s.writable=!0),Object.defineProperty(i,s.key,s)}}return function(t,e,s){return e&&i(t.prototype,e),s&&i(t,s),t}}(),cPlayer=function(){function i(t){var e=this;_classCallCheck(this,i);var s={element:document.getElementById("cplayer"),list:[],mdicon:!0};if(void 0!==Object.assign&&(this.options=Object.assign({},s,t)),this.options.mdicon!==!1){var n=document.createElement("link");n.rel="stylesheet","string"==typeof this.options.mdicon?n.href=this.options.mdicon:n.href="https://cdn.bootcss.com/material-design-icons/2.2.3/iconfont/material-icons.css",document.head.appendChild(n)}var o=function(i,t){return void 0!==t?t.getElementsByClassName(i)[0]:e.options.element.getElementsByClassName(i)[0]},r=function(i){return e.options.element.getElementsByTagName(i)[0]};this.now=0,this.dragging={contain:!1,target:void 0},this.options.element.innerHTML='\n    <c-player>\n        <div class="lyric invisible">\n            <lyric-body>\n            </lyric-body>\n        </div>\n        <div class="controls">\n            <div class="c-left">\n                <div class="music-description">\n                    <div class="image">\n                        <img class="meta-bak" src="" alt="">\n                    </div>\n                    <div class="music-meta">\n                        <span class="music-name"></span>\n                        <span class="music-artist"></span>\n                    </div>\n                </div>\n                <a class="play-icon"><i class="material-icons">play_arrow</i></a>\n            </div>\n            <div class="c-center">\n                <div class="time">\n                    <div class="time-body">\n                        <div class="time-line"></div>\n                        <div class="time-point"></div>\n                    </div>\n                </div>\n            </div>\n            <div class="c-right">\n                <div class="volume">\n                    <div class="volume-button">\n                        <a class="volume-power">\n                            <i class="material-icons">volume_up</i>\n                        </a>\n                    </div>\n                    <div class="volume-body">\n                        <div class="volume-line"></div>\n                        <div class="volume-point"></div>\n                    </div>\n                </div>\n                <div class="list-button">\n                    <a class="list-power">\n                        <i class="material-icons">playlist_play</i>\n                    </a>\n                </div>\n                <div class="lyric-button">\n                    <a class="lyric-power">\n                        <i class="material-icons">note</i>\n                    </a>\n                </div>\n            </div>\n        </div>\n\n        <div class="list invisible">\n            <list-body>\n            </list-body>\n        </div>\n    </c-player>',this.__LIST__={lyric:o("lyric"),lyricBody:r("lyric-body"),toggle:o("play-icon"),img:o("meta-bak"),name:o("music-name"),artist:o("music-artist"),time:o("time"),timeLine:o("time-line"),timePoint:o("time-point"),lyricPower:o("lyric-power"),volumePower:o("volume-power"),volumeLine:o("volume-line"),volumePoint:o("volume-point"),listPower:o("list-power"),list:o("list"),listBody:r("list-body")},this.__LIST__.toggleIcon=o("material-icons",this.__LIST__.toggle),this.__LIST__.volumeIcon=o("material-icons",this.__LIST__.volumePower),this.music=new Audio,this.toggle(),this.__LIST__.toggle.addEventListener("click",function(){e.isPaused()?e.play():e.pause()}),this.__LIST__.lyricPower.addEventListener("click",function(){e.hasLyric(e.now)&&e.__LIST__.lyric.classList.contains("invisible")?e.showLyric():e.hasLyric(e.now)&&!e.__LIST__.lyric.classList.contains("invisible")&&e.hideLyric()}),this.__LIST__.listPower.addEventListener("click",function(){e.hasList()&&e.__LIST__.list.classList.contains("invisible")?e.showList():e.hasLyric()&&!e.__LIST__.list.classList.contains("invisible")&&e.hideList()}),this.__LIST__.volumePower.addEventListener("click",function(){e.isMuted()?e.music.muted=!1:e.volume(0)}),this.music.addEventListener("volumechange",function(){e.volume()}),this.music.addEventListener("timeupdate",function(){e.updateTime(),e.hasLyric(e.now)&&e.slideLyric(e.music.currentTime)}),this.music.addEventListener("canplaythrough",function(){}),this.music.addEventListener("pause",function(){e.__LIST__.toggleIcon.innerHTML="play_arrow"}),this.music.addEventListener("play",function(){e.__LIST__.toggleIcon.innerHTML="pause"}),this.music.addEventListener("ended",function(){e.__LIST__.lyricBody.style.transform="",e.__LIST__.toggleIcon.innerHTML="play_arrow",e.options.list[e.now].loop===!0?(e.updateTime(0),e.play()):e.hasList()&&e.now!==e.options.list.length-1&&e.next()}),this.options.element.addEventListener("mousedown",function(i){return e.dragPercentage(i)}),this.options.element.addEventListener("mousemove",function(i){return e.dragPercentage(i)}),this.options.element.addEventListener("mouseup",function(i){return e.dragPercentage(i)}),this.volume(),this.refreshList()}return _createClass(i,[{key:"dragPercentage",value:function(i){switch(i.type){case"mousedown":if(i.target===this.__LIST__.timePoint&&i.target===this.__LIST__.volumePoint)return;this.dragging.contain=!0,this.dragging.target=i.target;break;case"mousemove":if(this.dragging.contain===!1)return;if(this.dragging.target.parentNode.classList.contains("volume-body")?this.__LIST__.volumeLine.style.width=(i.clientX-this.dragging.target.parentNode.offsetLeft)/this.dragging.target.parentNode.offsetWidth*100+"%":this.dragging.target.parentNode.classList.contains("time-body")&&(this.__LIST__.timeLine.style.width=(i.clientX-this.dragging.target.parentNode.offsetLeft)/this.dragging.target.parentNode.offsetWidth*100+"%"),this.dragging.target.parentNode.classList.contains("volume-body")){var t=(i.clientX-this.dragging.target.parentNode.offsetLeft)/this.dragging.target.parentNode.offsetWidth;t=t>1?1:t,t=t<0?0:t,this.music.volume=t}break;case"mouseup":if(this.dragging.contain===!1)return;if(this.dragging.target.parentNode.classList.contains("volume-body")){var e=(i.clientX-this.dragging.target.parentNode.offsetLeft)/this.dragging.target.parentNode.offsetWidth;e=e>1?1:e,e=e<0?0:e,this.music.volume=e}else if(this.dragging.target.parentNode.classList.contains("time-body")){var s=(i.clientX-this.dragging.target.parentNode.offsetLeft)/this.dragging.target.parentNode.offsetWidth;s=s>1?1:s,s=s<0?0:s,this.music.currentTime=s*this.music.duration}this.dragging.contain=!1,this.dragging.target=void 0}}},{key:"volume",value:function(){var i=arguments.length<=0||void 0===arguments[0]?void 0:arguments[0];return void 0===i?(this.__LIST__.volumeLine.style.width=100*this.music.volume+"%",this.isMuted()||(this.__LIST__.volumeIcon.innerHTML="volume_up"),this.isMuted()?0:this.music.volume):void(0===i?(this.music.muted=!0,this.__LIST__.volumeIcon.innerHTML="volume_mute"):(this.music.volume=i,this.__LIST__.volumeIcon.innerHTML="volume_up"))}},{key:"isMuted",value:function(){return this.music.muted}},{key:"play",value:function(){if(this.music.seeking!==!0)return this.music.play(),this}},{key:"pause",value:function(){if(this.music.seeking!==!0)return this.music.pause(),this}},{key:"last",value:function(){if(0!==this.now)return this.now--,this.toggle(),this.play(),this}},{key:"next",value:function(){if(this.now!==this.options.list.length-1)return this.now++,this.toggle(),this.play(),this}},{key:"to",value:function(i){return this.now=i,this.toggle(),this.play(),this}},{key:"toggle",value:function(){var i=arguments.length<=0||void 0===arguments[0]?this.now:arguments[0],t=this.options.list[i],e=this.__LIST__,s=[t.image,t.name,t.artist,t.url];return e.img.src=s[0],e.name.innerHTML=s[1],e.artist.innerHTML=s[2],this.music.src=s[3],this.refreshLyric(),this.hasLyric(this.now)||this.hideLyric(),this.__LIST__.lyricBody.style.transform="",this}},{key:"isPaused",value:function(i){return void 0!==i&&i(),this.music.paused}},{key:"hasLyric",value:function(){var i=arguments.length<=0||void 0===arguments[0]?0:arguments[0],t=arguments[1];return void 0!==t&&t(),void 0!==this.options.list[i].lyric}},{key:"showLyric",value:function(){return this.hasLyric(this.now)&&this.__LIST__.lyric.classList.remove("invisible"),this.__LIST__.list.classList.contains("invisible")||this.hideList(),this}},{key:"hideLyric",value:function(){return this.__LIST__.lyric.classList.add("invisible"),this}},{key:"hasList",value:function(i){return void 0!==i&&i(),this.options.list.length>1}},{key:"showList",value:function(i){return this.__LIST__.list.classList.remove("invisible"),this.__LIST__.lyric.classList.contains("invisible")||this.hideLyric(),void 0!==i&&i(),this}},{key:"hideList",value:function(i){return this.__LIST__.list.classList.add("invisible"),void 0!==i&&i(),this}},{key:"refreshList",value:function(i){var t=this,e=this.options.list,s=this.__LIST__.listBody;s.innerHTML="";for(var n=function(i){var n=document.createElement("div");n.innerHTML='<span class="music-name">'+e[i].name+'</span><span class="music-artist">'+e[i].artist+"</span>",n=s.appendChild(n),n.addEventListener("click",function(){t.to(i)})},o=0;o<=e.length-1;o++)n(o);void 0!==i&&i()}},{key:"add",value:function(i,t){var e=this,s=this.options.list.push(i),n=document.createElement("div");n.innerHTML='<span class="music-name">'+i.name+'</span><span class="music-artist">'+i.artist+"</span>",n=this.__LIST__.listBody.appendChild(n),n.addEventListener("click",function(){e.to(s-1)}),void 0!==t&&t()}},{key:"lyric",value:function(){var i=arguments.length<=0||void 0===arguments[0]?void 0:arguments[0];if(void 0===i){if(this.hasLyric(this.now))return this.options.list[this.now].lyric}else this.options.list[this.now].lyric=i,this.refreshLyric();return this}},{key:"refreshLyric",value:function(){if(this.__LIST__.lyricBody.innerHTML="",this.hasLyric(this.now)){var i=this.options.list[this.now].lyric;i=i.split("\n");var t=[],e=!0,s=!1,n=void 0;try{for(var o,r=i[Symbol.iterator]();!(e=(o=r.next()).done);e=!0){var a=o.value;if("string"!=typeof a)break;for(var l=a.split(/\[|\]\[|\]/gi),c=0;c<l.length-1;c++)if(""!==l[c]||c===l.length-1){if(l[c].match(/\d{1,}\:\d{1,}/gi)){var d=l[c].split(/\:|\./gi);switch(d.length){case 2:l[c]=60*parseInt(d[0])+parseInt(d[1]);break;case 3:l[c]=60*parseInt(d[0])+parseInt(d[1])+parseFloat("0."+d[2]);break;default:throw new Error("Time not be Found!")}}}else l.splice(c,1),c--;t.push(l)}}catch(h){s=!0,n=h}finally{try{!e&&r["return"]&&r["return"]()}finally{if(s)throw n}}for(var u=[],_=t.length-1;_>=0;_--)if(t[_].length>2)for(var v=t[_].length-1;v>=0;v--)v!==t[_].length-1&&u.push({time:t[_][v],content:t[_][t[_].length-1]});else u.push({time:t[_][0],content:t[_][1]});u.sort(function(i,t){return i.time-t.time}),this.__LYRIC__=u;for(var m=0;m<=u.length-1;m++){var g=document.createElement("lrc");g.innerHTML=u[m].content,this.__LIST__.lyricBody.appendChild(g)}}}},{key:"updateTime",value:function(){var i=arguments.length<=0||void 0===arguments[0]?void 0:arguments[0],t=arguments[1];return void 0!==i&&(this.music.currentTime=parseInt(i)),this.dragging.contain===!1&&(this.__LIST__.timeLine.style.width=this.music.currentTime/this.music.duration*100+"%"),void 0!==t&&t(this.music.currentTime),this.music.currentTime}},{key:"slideLyric",value:function(i){if(!this.__LIST__.lyric.classList.contains("invisible"))for(var t=this.__LYRIC__.length-1;t>=0;t--)if(void 0!==this.__LYRIC__[t+1]&&this.__LYRIC__[t].time<i&&this.__LYRIC__[t+1].time>i||void 0===this.__LYRIC__[t+1]&&this.__LYRIC__[t].time<i){null!==this.__LIST__.lyricBody.querySelector(".now")&&this.__LIST__.lyricBody.querySelector(".now")!==this.__LIST__.lyricBody.childNodes[t+1]&&this.__LIST__.lyricBody.querySelector(".now").classList.toggle("now"),this.__LIST__.lyricBody.childNodes[t].classList.toggle("now");var e=this.__LIST__.lyricBody.childNodes[t].offsetTop-this.__LIST__.lyricBody.childNodes[0].offsetTop-.5*this.__LIST__.lyricBody.childNodes[t].clientHeight,s=.5*this.__LIST__.lyric.clientHeight-this.__LIST__.lyricBody.childNodes[t].clientHeight,n=-(e-s);this.__LIST__.lyricBody.style.transform="translateY("+n+"px)"}}}]),i}();"function"!=typeof Object.assign&&(Object.assign=function(i){if(null==i)throw new TypeError("Cannot convert undefined or null to object");i=Object(i);for(var t=1;t<arguments.length;t++){var e=arguments[t];if(null!=e)for(var s in e)Object.prototype.hasOwnProperty.call(e,s)&&(i[s]=e[s])}return i});