| function BasicPlayer() {} |
| |
| BasicPlayer.prototype.setAnimationItem = function (item) { |
| }; |
| |
| BasicPlayer.prototype.playStarted = function () { |
| this.playButton.style.display = 'none'; |
| this.pauseButton.style.display = 'block'; |
| this.pauseAnimation.goToAndStop(0); |
| this.pauseAnimation.play(); |
| }; |
| |
| BasicPlayer.prototype.pauseStarted = function () { |
| this.playButton.style.display = 'block'; |
| this.pauseButton.style.display = 'none'; |
| this.playAnimation.goToAndStop(0); |
| this.playAnimation.play(); |
| }; |
| |
| BasicPlayer.prototype.buildControls = function (item, wrapper) { |
| var self = this; |
| this.animationItem = item; |
| wrapper.addEventListener('bmPlay', function () { self.playStarted(); }); |
| wrapper.addEventListener('bmPause', function () { self.pauseStarted(); }); |
| |
| this.controls = createTag('div'); |
| this.controls.style.width = '100%'; |
| this.controls.style.height = '70px'; |
| this.controls.style.position = 'absolute'; |
| this.controls.style.left = 0; |
| this.controls.style.bottom = 0; |
| this.controls.style.backgroundColor = 'rgba(0,0,0,.3)'; |
| wrapper.appendChild(this.controls); |
| |
| this.scrollBar = createTag('div'); |
| this.scrollBar.style.width = '100%'; |
| this.scrollBar.style.height = '14px'; |
| this.scrollBar.style.backgroundColor = 'rgba(25,25,25,1)'; |
| this.controls.appendChild(this.scrollBar); |
| |
| this.scrollBarThumb = createTag('div'); |
| this.scrollBarThumb.style.width = '18px'; |
| this.scrollBarThumb.style.height = '18px'; |
| this.scrollBarThumb.style.position = 'absolute'; |
| this.scrollBarThumb.style.transform = this.scrollBarThumb.style.webkitTransform = 'translate(-7px,0px)'; |
| this.scrollBarThumb.style.top = '-3px'; |
| this.scrollBarThumb.style.left = '0px'; |
| this.scrollBarThumb.style.borderRadius = '11px'; |
| this.scrollBarThumb.style.border = 'solid 2px #000000'; |
| this.scrollBarThumb.style.backgroundColor = 'rgba(255,255,255,1)'; |
| this.scrollBarThumb.style.cursor = 'pointer'; |
| this.controls.appendChild(this.scrollBarThumb); |
| |
| this.scrollBar.addEventListener('mousedown', function (ev) { |
| var mousePos = ev.layerX; |
| var width = self.scrollBar.clientWidth; |
| self.scrollAnimation(mousePos / width); |
| }); |
| this.scrollBarThumb.addEventListener('mousedown', function (ev) { |
| self.scrollAnimation(); |
| }); |
| |
| this.playButton = createTag('div'); |
| this.playButton.style.width = '40px'; |
| this.playButton.style.height = '30px'; |
| this.playButton.style.marginTop = '12px'; |
| this.playButton.style.marginLeft = '10px'; |
| this.playButton.style.backgroundColor = 'rgba(25,25,25,1)'; |
| this.playButton.style.cursor = 'pointer'; |
| this.playButton.setAttribute('data-animation-path', 'exports/pause'); |
| this.playButton.setAttribute('data-bm-player', '0'); |
| this.playButton.setAttribute('data-anim-type', 'svg'); |
| this.playButton.setAttribute('data-anim-name', 'play'); |
| this.playButton.setAttribute('data-anim-repeat', '0'); |
| this.playButton.style.display = 'none'; |
| this.playAnimation = animationManager.registerAnimation(this.playButton); |
| this.playAnimation.loop = false; |
| this.controls.appendChild(this.playButton); |
| this.playButton.addEventListener('click', function () { |
| self.animationItem.play(); |
| }); |
| |
| this.pauseButton = createTag('div'); |
| this.pauseButton.style.width = '40px'; |
| this.pauseButton.style.height = '30px'; |
| this.pauseButton.style.marginTop = '12px'; |
| this.pauseButton.style.marginLeft = '10px'; |
| this.pauseButton.style.backgroundColor = 'rgba(25,25,25,1)'; |
| this.pauseButton.style.cursor = 'pointer'; |
| this.pauseButton.setAttribute('data-animation-path', 'exports/play'); |
| this.pauseButton.setAttribute('data-bm-player', '0'); |
| this.pauseButton.setAttribute('data-anim-type', 'svg'); |
| this.pauseButton.setAttribute('data-anim-name', 'pause'); |
| this.pauseButton.setAttribute('data-anim-repeat', '0'); |
| this.pauseAnimation = animationManager.registerAnimation(this.pauseButton); |
| this.pauseAnimation.wrapper.addEventListener('bmLoaded', function () { self.pauseAnimation.goToAndStop(self.pauseAnimation.totalFrames - 1); }); |
| this.pauseAnimation.loop = false; |
| this.controls.appendChild(this.pauseButton); |
| this.pauseButton.addEventListener('click', function () { |
| self.animationItem.pause(); |
| }); |
| }; |
| |
| BasicPlayer.prototype.setProgress = function (val) { |
| this.progress = val; |
| this.scrollBarThumb.style.left = (this.progress) * 100 + '%'; |
| }; |
| |
| BasicPlayer.prototype.scrollAnimation = function (perc) { |
| this.animationItem.isScrolling = true; |
| this.boundingRect = this.scrollBar.getBoundingClientRect(); |
| this.scrollBarWidth = this.scrollBar.clientWidth; |
| var self = this; |
| var mouseMoveFunc = function (ev) { |
| var mousePos = ev.pageX - self.boundingRect.left; |
| if (mousePos < 0) { |
| mousePos = 0; |
| } else if (mousePos >= self.scrollBarWidth) { |
| mousePos = self.scrollBarWidth - 1; |
| } |
| self.animationItem.updateAnimation(mousePos / self.scrollBarWidth); |
| }; |
| var mouseUpFunc = function () { |
| window.removeEventListener('mousemove', mouseMoveFunc); |
| window.removeEventListener('mouseup', mouseUpFunc); |
| self.animationItem.isScrolling = false; |
| }; |
| window.addEventListener('mousemove', mouseMoveFunc); |
| window.addEventListener('mouseup', mouseUpFunc); |
| if (perc !== undefined) { |
| self.animationItem.updateAnimation(perc); |
| } |
| }; |