1'use strict'; 2 3var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); 4 5function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 6 7var zAudio = function () { 8 function zAudio(props, trackList) { 9 _classCallCheck(this, zAudio); 10 11 this.DOMElement = document.getElementById(props.divId); 12 this.autoPlay = props.autoplay; 13 this.playList = trackList; 14 this.playlistOpen = false; 15 this.miniPlayer = props.miniplayer; 16 this.repeatAll = false; 17 this.shuffle = props.shuffle; 18 this.themeColor = props.color ? props.color : '#FF9900'; 19 20 //Link roboto font and material icons 21 // this._linkStylesheet('https://fonts.googleapis.com/css?family=Roboto:400,500'); 22 // this._linkStylesheet('https://fonts.googleapis.com/icon?family=Material+Icons'); 23 24 if (this.playList.length > 1) { 25 this._renderPlaylist(this.playList); 26 } else { 27 this._initialize(); //Initialize without playlist 28 } 29 } 30 31 _createClass(zAudio, [{ 32 key: '_initialize', 33 value: function _initialize() { 34 var _this2 = this; 35 36 var playlist = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false; 37 38 39 this._initTemplate(playlist); 40 41 this.trackTitle = this.DOMElement.getElementsByClassName('zaudio_songtitle')[0]; 42 this.trackArtist = this.DOMElement.getElementsByClassName('zaudio_songartist')[0]; 43 this.albumArt = this.DOMElement.getElementsByClassName('zaudio_art')[0]; 44 45 this.playButton = this.DOMElement.getElementsByClassName('zaudio_btn_play')[0]; 46 this.stopButton = this.DOMElement.getElementsByClassName('zaudio_btn_stop')[0]; 47 this.repeatButton = this.DOMElement.getElementsByClassName('zaudio_btn_repeat')[0]; 48 this.playlistButton = this.DOMElement.getElementsByClassName('zaudio_btn_playlist')[0]; 49 this.volumeButton = this.DOMElement.getElementsByClassName('zaudio_btn_mute')[0]; 50 this.seekbar = this.DOMElement.getElementsByClassName('zaudio_seekbg')[0]; 51 this.volumebar = this.DOMElement.getElementsByClassName('zaudio_seekbg')[1]; 52 53 //Setup mini layout if the parent div is not wide enough; 54 if (this.DOMElement.offsetWidth < 600) { 55 this.DOMElement.getElementsByClassName('zaudio_art')[0].style.flex = 1; 56 this.DOMElement.getElementsByClassName('zaudio_art')[0].style.backgroundPosition = 'center'; 57 this.DOMElement.getElementsByClassName('zaudio_art')[0].style.backgroundColor = '#5e5e5e'; 58 } 59 60 if (this.playlistButton) this.playlistButton.style.color = this.themeColor; 61 62 this.seekbar.children[0].style.backgroundColor = this.themeColor; 63 this.seekbar.children[0].children[0].style.borderColor = this.themeColor; 64 65 this.volumebar.children[0].style.backgroundColor = this.themeColor; 66 this.volumebar.children[0].children[0].style.borderColor = this.themeColor; 67 68 this.audioElement = document.getElementById(this.tagId); 69 70 if (this._mobileCheck()) { 71 this.volumebar.style.display = 'none'; 72 } else this.audioElement.volume = 0.2; 73 74 this.audioElement.autoplay = this.autoPlay; 75 76 if (this.shuffle) this.changeTrack(this._getRandomTrackIndex());else this.changeTrack(0); 77 78 if (this.autoPlay) this.audioElement.play(); 79 80 this.audioElement.onplaying = function () { 81 _this2.playButton.innerHTML = 'pause'; 82 }; 83 84 this.audioElement.onpause = function () { 85 _this2.playButton.innerHTML = 'play_arrow'; 86 }; 87 88 var circle = document.createElement('DIV'); 89 var text = document.createTextNode('Streaming'); 90 91 //On stall 92 this.audioElement.onstalled = function () { 93 text.nodeValue = 'Media Unavailable'; 94 circle.style.backgroundColor = '#dbd7d7'; 95 }; 96 97 //Buffering 98 this.audioElement.onwaiting = function () { 99 _this2.DOMElement.getElementsByClassName('zaudio_tracktime')[0].innerHTML = '<div class="zaudio_spinner"></div>'; 100 _this2.DOMElement.getElementsByClassName('zaudio_tracktime')[0].children[0].style.borderTopColor = _this2.themeColor; 101 }; 102 103 //Set Track duration 104 105 this.audioElement.oncanplay = function () { 106 if (_this2.audioElement.duration == 'Infinity') { 107 _this2.seekbar.style.display = 'none'; 108 109 circle.className = 'zaudio_stream_circle'; 110 _this2.DOMElement.getElementsByClassName('zaudio_seekbar')[0].appendChild(circle); 111 _this2.DOMElement.getElementsByClassName('zaudio_seekbar')[0].appendChild(text); 112 _this2.DOMElement.getElementsByClassName('zaudio_tracktime')[0].style.fontSize = '20px'; 113 _this2.DOMElement.getElementsByClassName('zaudio_tracktime')[0].style.paddingLeft = '0px'; 114 _this2.stopButton.style.display = 'none'; 115 _this2.repeatButton.style.display = 'none'; 116 } else { 117 _this2.DOMElement.getElementsByClassName('zaudio_tracktime')[0].innerHTML = _this2.formatTime(_this2.audioElement.duration); 118 if (!_this2.miniPlayer) { 119 _this2.seekbar.removeAttribute('style'); 120 _this2.stopButton.removeAttribute('style'); 121 _this2.DOMElement.getElementsByClassName('zaudio_tracktime')[0].removeAttribute('style'); 122 } 123 } 124 }; 125 126 //Handle the end of playing 127 this.audioElement.onended = function (e) { 128 _this2.playButton.innerHTML = 'play_arrow'; 129 if (playlist) { 130 if (_this2.shuffle) { 131 _this2.changeTrack(_this2._getRandomTrackIndex()); 132 _this2.audioElement.play(); 133 } else { 134 if (_this2.repeatAll && _this2.nowPlayingIndex + 1 == _this2.playList.length) { 135 _this2.changeTrack(0); 136 _this2.audioElement.play(); 137 _this2.playlistElement.scrollTop = 0; 138 } else { 139 if (_this2.nowPlayingIndex + 1 != _this2.playList.length) { 140 _this2.changeTrack(_this2.nowPlayingIndex + 1); 141 _this2.audioElement.play(); 142 } 143 } 144 } 145 } 146 }; 147 148 this.audioElement.onerror = function (e) {}; 149 150 //Update current time and seekbar 151 this.audioElement.ontimeupdate = function () { 152 var precentage = _this2.audioElement.currentTime / _this2.audioElement.duration * 100; 153 _this2.DOMElement.getElementsByClassName('zaudio_seekfill')[0].style.width = precentage + '%'; 154 155 _this2.DOMElement.getElementsByClassName('zaudio_tracktime')[0].innerHTML = _this2.formatTime(_this2.audioElement.currentTime); 156 }; 157 158 this._handleInputs(); 159 } 160 }, { 161 key: '_mobileCheck', 162 value: function _mobileCheck() { 163 var check = false;
164 (function (a) { 165 if (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0, 4))) check = true; 166 })(navigator.userAgent || navigator.vendor || window.opera); 167 return check; 168 } 169 }, { 170 key: '_handleInputs', 171 value: function _handleInputs() { 172 var _this3 = this; 173 174 var that = this; 175 this.changeVolume = function (event) { 176 177 var mouseX = event.pageX - that._getOffsetLeft(that.volumebar); 178 var volume = mouseX / that._getOffsetWidth(that.volumebar); 179 if (volume > 0 & volume < 1) { 180 that.volumebar.children[0].style.width = Math.floor(volume * 100) + '%'; 181 that.audioElement.volume = volume.toFixed(2); 182 volume = volume.toFixed(2); 183 //update volume button 184 if (volume > 0.8) that.volumeButton.innerHTML = 'volume_up';else if (volume < 0.8 & volume > 0.1) that.volumeButton.innerHTML = 'volume_down';else if (volume < 0.1) { 185 that.volumeButton.innerHTML = 'volume_mute'; 186 } 187 } 188 }; 189 190 this.volumebar.addEventListener('mousedown', function (e) { 191 window.addEventListener('mousemove', _this3.changeVolume, true); 192 }); 193 194 window.addEventListener('mouseup', function (e) { 195 window.removeEventListener('mousemove', _this3.changeVolume, true); 196 }); 197 198 //var seekbar = this.DOMElement.getElementsByClassName('zaudio_seekbg')[0]; 199 this.seekbar.addEventListener('click', function (e) { 200 var mouseX = e.pageX - _this3._getOffsetLeft(_this3.seekbar); 201 var seekpos = mouseX * _this3.audioElement.duration / _this3._getOffsetWidth(_this3.seekbar); 202 _this3.audioElement.currentTime = seekpos; 203 }); 204 205 this.DOMElement.getElementsByClassName('zaudio_buttonwrapper')[0].addEventListener('click', function (e) { 206 207 switch (e.target.innerHTML) { 208 case 'play_arrow': 209 this.audioElement.play(); 210 this._pauseOtherInstances(); 211 e.target.innerHTML = 'pause'; 212 break; 213 case 'pause': 214 this.audioElement.pause(); 215 e.target.innerHTML = 'play_arrow'; 216 break; 217 case 'volume_down': 218 case 'volume_mute': 219 this.audioElement.muted = true; 220 e.target.innerHTML = 'volume_off'; 221 break; 222 case 'volume_off': 223 this.audioElement.muted = false; 224 e.target.innerHTML = 'volume_down'; 225 break; 226 case 'fast_forward': 227 this.audioElement.playbackRate += 0.5; 228 if (this.audioElement.playbackRate > 2) { 229 this.audioElement.playbackRate = 1.0; 230 } 231 break; 232 case 'stop': 233 this.audioElement.pause(); 234 this.playButton.innerHTML = 'play_arrow'; 235 this.audioElement.currentTime = 0; 236 break; 237 case 'skip_next': 238 this.changeTrack(this.nowPlayingIndex + 1); 239 this.audioElement.play(); 240 break; 241 case 'skip_previous': 242 this.changeTrack(this.nowPlayingIndex - 1); 243 this.audioElement.play(); 244 break; 245 case 'queue_music': 246 e.target.style.color = this.playlistOpen ? '' : this.themeColor; 247 this._togglePlaylist(); 248 break; 249 case 'repeat': 250 if (!this.repeatAll) { 251 this.audioElement.loop = true; 252 e.target.innerHTML = 'repeat_one'; 253 } else { 254 this.audioElement.loop = false;
255 e.target.removeAttribute('style'); 256 this.repeatAll = false; 257 } 258 break; 259 case 'repeat_one': 260 if (this.repeatAll) { 261 this.audioElement.loop = false; 262 e.target.innerHTML = 'repeat'; 263 } else { 264 if (this.playList.length > 1) { 265 e.target.style.color = this.themeColor; 266 this.repeatAll = true; 267 this.audioElement.loop = false; 268 e.target.innerHTML = 'repeat'; 269 } else { 270 this.audioElement.loop = false; 271 e.target.innerHTML = 'repeat'; 272 } 273 } 274 break; 275 276 } 277 }.bind(this)); 278 } 279 }, { 280 key: '_pauseOtherInstances', 281 value: function _pauseOtherInstances() { 282 var audios = document.getElementsByTagName('audio'); 283 for (var i = 0, len = audios.length; i < len; i++) { 284 if (audios[i] != this.audioElement) { 285 audios[i].pause(); 286 } 287 } 288 } 289 }, { 290 key: '_getRandomTrackIndex', 291 value: function _getRandomTrackIndex() { 292 var num = Math.floor(Math.random() * this.playList.length); 293 return num == this.nowPlayingIndex ? this._getRandomTrackIndex() : num; 294 } 295 }, { 296 key: '_getOffsetLeft', 297 value: function _getOffsetLeft(element) { 298 var rect = element.getBoundingClientRect(); 299 return rect.left; 300 } 301 }, { 302 key: '_getOffsetWidth', 303 value: function _getOffsetWidth(element) { 304 var rect = element.getBoundingClientRect(); 305 return rect.right - rect.left; 306 } 307 }, { 308 key: 'changeTrack', 309 value: function changeTrack(index) { 310 if (index != this.nowPlayingIndex && this.playList.length > index && index >= 0) { 311 var track = this.playList[index]; 312 this.trackTitle.innerHTML = track.title ? track.title : ''; 313 this.trackArtist.innerHTML = track.artist ? track.artist : ''; 314 this.albumArt.style.backgroundImage = 'url(' + track.albumArturl + ')'; 315 316 this.audioElement.src = track.url; 317 this.nowPlayingIndex = index; 318 319 if (this.playList.length > 1) this._setActiveItem(this.playlistElement.children[index]); 320 } 321 } 322 }, { 323 key: '_togglePlaylist', 324 value: function _togglePlaylist() { 325 this.DOMElement.getElementsByClassName('zaudio_playlist')[0].style.maxHeight = this.playlistOpen ? '0px' : '200px'; 326 this.playlistOpen = !this.playlistOpen; 327 } 328 }, { 329 key: 'formatTime', 330 value: function formatTime(seconds) { 331 var m = Math.floor(seconds / 60); 332 var s = ("0" + Math.floor(seconds - m * 60)).slice(-2); 333 334 return m + ':' + s; 335 } 336 }, { 337 key: '_initTemplate', 338 value: function _initTemplate(playlist) { 339 340 var altWrapClass = this.miniPlayer ? 'zaudio_wrapper_min' : !playlist ? 'zaudio_wrapper_noplaylist' : ''; 341 this.tagId = 'a_' + new Date().getUTCMilliseconds(); 342 343 var template = '\n\t\t\t<div class="zaudio_wrapper ' + altWrapClass + '">\n\t\t\t\t<audio id="' + this.tagId + '"></audio>\n\t\t\t\t<div class="zaudio_container">\n\t\t\t\t\t\t<div class="zaudio_art" ' + (this.miniPlayer ? 'style="display:none"' : '') + '>\n\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div class="zaudio_player">\n\t\t\t\t\t\t\t<div class="zaudio_trackinfo">\n\t\t\t\t\t\t\t\t<span ' + (this.miniPlayer ? 'style="font-size:16px;"' : '') + ' class="zaudio_songtitle"></span>\n\t\t\t\t\t\t\t\t<span ' + (this.miniPlayer ? 'style="font-size:14px;"' : '') + ' class="zaudio_songartist"></span>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<div class="zaudio_playercontrols">\n\t\t\t\t\t\t\t\t<div class="zaudio_seekbar">\n\t\t\t\t\t\t\t\t\t<div ' + (this.miniPlayer ? 'style="display:none"' : '') + ' class="zaudio_seekbg">\n\t\t\t\t\t\t\t\t\t\t<div class="zaudio_seekfill">\n\t\t\t\t\t\t\t\t\t\t\t<div class="zaudio_seeker"></div>\n\t\t\t\t\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t' + (!this.miniPlayer ? '<span class="zaudio_tracktime">0:00</span>' : '') + '\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div class="zaudio_buttonwrapper">\n\t\t\t\t\t\t\t\t\t<div class="zaudio_playercontrolbuttons noselect">\n\t\t\t\t\t\t\t\t\t\t' + (playlist ? '<i class="material-icons zaudio_icons zaudio_btn_prev">skip_previous</i>' : '') + '\n\t\t\t\t\t\t\t\t\t\t<i class="material-icons zaudio_icons zaudio_btn_play" style="color:' + this.themeColor + ';">play_arrow</i>\n\t\t\t\t\t\t\t\t\t\t<i ' + (this.miniPlayer ? 'style="display:none"' : '') + ' class="material-icons zaudio_icons zaudio_btn_stop">stop</i>\n\t\t\t\t\t\t\t\t\t\t' + (playlist ? '<i class="material-icons zaudio_icons zaudio_btn_next">skip_next</i>' : '') + '\n\t\t\t\t\t\t\t\t\t\t<i ' + (this.miniPlayer ? 'style="display:none"' : '') + 'class="material-icons zaudio_icons zaudio_btn_repeat">repeat</i>\n\t\t\t\t\t\t\t\t\t\t' + (this.miniPlayer ? '<span class="zaudio_tracktime zaudio_tracktime_mini">0:00</span>' : '') + '\n\t\t\t\t\t\t\t\t\t\t' + (playlist && !this.miniPlayer ? '<i class="material-icons zaudio_icons zaudio_btn_playlist" style="color:${this.themeColor}">queue_music</i>' : '') + '\n\t\t\t\t\t\t\t\t\t\t<i class="material-icons zaudio_icons zaudio_btn_mute">volume_down</i>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t<div class="zaudio_seekbg" style="height:5px; max-width:20%;">\n\t\t\t\t\t\t\t\t\t\t<div class="zaudio_seekfill" style="height:5px;width:20%;">\n\t\t\t\t\t\t\t\t\t\t\t<div class="zaudio_seeker" style="height:12px;min-width:12px;"></div>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t</div>\n\t\t'; 344 this.DOMElement.innerHTML = template; 345 } 346 }, { 347 key: '_setActiveItem', 348 value: function _setActiveItem(li) { 349 if (this.activeItem != li) { 350 if (this.activeItem) { 351 this.activeItem.removeAttribute('style'); 352 this.activeItem.children[4].innerHTML = 'play_arrow'; 353 } 354 355 li.style.backgroundColor = '#ececec'; 356 li.children[4].innerHTML = 'volume_up'; 357 this.activeItem = li; 358 } 359 } 360 }, { 361 key: '_renderPlaylist', 362 value: function _renderPlaylist(list) { 363 364 var playlistHTML = ''; 365 for (var i = 0; i < list.length; i++) { 366 var item = list[i]; 367 playlistHTML += '\n\t\t\t\t<li data-id="' + i + '">\n\t\t\t\t\t<img src="' + item.albumArturl + '"/>\n\t\t\t\t\t<span>' + item.title + '</span>\n\t\t\t\t\t<span>' + item.artist + '</span>\n\t\t\t\t\t<span style="flex-grow:1;"></span>\n\t\t\t\t\t<i class="material-icons" style="color:#a3a3a3;">play_arrow</i>\n\t\t\t\t</li>\n\t\t\t'; 368 } 369 370 var playlistElement = document.createElement('UL'); 371 playlistElement.className = 'zaudio_playlist noselect'; 372 playlistElement.style.display = this.miniPlayer ? 'none' : ''; 373 playlistElement.innerHTML = playlistHTML; 374 this.playlistElement = playlistElement; 375 this._initialize(true); 376 this.DOMElement.children[0].appendChild(playlistElement); 377 this._togglePlaylist(); //Keep playlist expanded by default 378 var _this = this; 379 380 playlistElement.addEventListener('click', function (e) { 381 var target = e.target; 382 while (target && target.parentNode != playlistElement) { 383 target = target.parentNode; 384 if (!target) { 385 return; 386 } 387 } 388 if (target.tagName === 'LI') { 389 _this.changeTrack(parseInt(target.dataset.id)); 390 _this.audioElement.play(); 391 } 392 }); 393 } 394 }]); 395 396 return zAudio; 397}();
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.