song-file-player.html

<link rel="import" href="../paper-material/paper-material.html" />
<link rel="import" href="../paper-fab/paper-fab.html" />
<link rel="import" href="../paper-icon-button/paper-icon-button.html" />
<link rel="import" href="../paper-button/paper-button.html" />
<link rel="import" href="../iron-icons/iron-icons.html" />
<link rel="import" href="../iron-icons/av-icons.html" />
<link rel="import" href="../neon-animation/neon-shared-element-animatable-behavior.html">
<link rel="import" href="../paper-progress/paper-progress.html" />
<link rel="import" href="../neon-animation/neon-animated-pages.html" />
<link rel="import" href="../neon-animation/neon-animations.html" />
<link rel="import" href="../paper-toast/paper-toast.html" />

<dom-module id="song-file-player">
	<style>
		:host {
			width: 100%;
			height: 100%;
		}
		paper-progress {
			position: absolute;
			top: 1px;
			width: 100%;
			z-index: 5;
			--paper-progress-active-color: var(--text-primary-color);
			--paper-progress-container-color: transparent;
		}
		paper-material#container {
			height: 100%;
			background: var(--accent-color);
		}
		paper-material#wavecontainer {
			opacity: 0;
			transition: opacity 0.5s;
		}
		#controls {
			text-align: center;
			opacity: 0;
			transition: opacity 1s;
		}
		paper-icon-button::shadow #icon {
			width: 30px;
			height: 30px;
		}
		paper-icon-button[toggles] {
			transition: background-color 0.3s;
		}
		paper-icon-button[toggles][active] {
			background-color: rgba(0, 0, 0, 0.25);
		}

		#error {
			z-index: 999;
		}

		@keyframes flickerAnimation {
			0%   { opacity:1; }
			50%  { opacity:0; }
			100% { opacity:1; }
		}
		@-o-keyframes flickerAnimation{
			0%   { opacity:1; }
			50%  { opacity:0; }
			100% { opacity:1; }
		}
		@-moz-keyframes flickerAnimation{
			0%   { opacity:1; }
			50%  { opacity:0; }
			100% { opacity:1; }
		}
		@-webkit-keyframes flickerAnimation{
			0%   { opacity:1; }
			50%  { opacity:0; }
			100% { opacity:1; }
		}
		#notification {
			position: absolute;
			width: 100%;
			height: 2px;
			top: 50px;
			margin: 0;
			left: 0px;
			vertical-align: middle;
			border-top: 2px solid var(--text-primary-color);
			-webkit-animation: flickerAnimation 3s infinite;
			-moz-animation:    flickerAnimation 3s infinite;
			-o-animation:      flickerAnimation 3s infinite;
			animation:         flickerAnimation 3s infinite;
		}
		@media (min-width: 600px) {
			#container {
				display: block;
			}
			#wavecontainer {
				opacity: 0;
				width: 70%;
				display: inline-block;
				vertical-align: middle;
				margin: 25px 0;
			}
			#controls {
				opacity: 0;
				width: 29%;
				display: inline-block;
				vertical-align: middle;
			}
		}
	</style>
	<template>
		<paper-progress id="loadmeter" value="{{loadingval}}"></paper-progress>
		<paper-material id="container" elevation="0">
			<paper-material id="wavecontainer" elevation="0">
				<p id="notification"></p>
			</paper-material>
			<div id="controls" class="horizontal layout">
				<paper-icon-button class="flex" id='replaybutton' icon="av:replay-30" on-tap="replay"></paper-icon-button>
				<paper-icon-button class="flex"  id='pausebutton' icon="av:pause" on-tap="togglePlay"></paper-icon-button>
				<paper-icon-button class="flex"  id='mutebutton' icon="av:volume-off" on-tap="mute" toggles></paper-icon-button>
			</div>
		</paper-material>
		<paper-toast id="error" duration="3000" text="An error occured while downloading the file"></paper-toast>
	</template>
</dom-module>
<script>
	( function () {
		Polymer({
			is: 'song-file-player',
			behaviors: [
				Polymer.NeonSharedElementAnimatableBehavior
			],
			properties: {
				src: {
					type: String,
					value: '',
					notify: true
				},
				wavesurfer: {
					type: Object,
					value: null
				},
				wavecolor: {
					type: String,
					value: '#ffffff',
					notify: true
				},
				progresscolor: {
					type: String,
					value: '#CFD8DC',
					notify: true
				},
				loadingval: {
					type: String,
					value: 0
				},
				isInitialized: {
					type: Boolean,
					value: false
				},
				datapoints: {
					type: Array,
					value: []
				},
				sharedElements: {
					value: function() {
						return {
							'hero': this.$.container,
							'ripple': this.$.container,
							'reverse-ripple' : this.$.pausebutton
						}
					}
				},
				animationConfig: {
					value: function() {
						return {
							'entry': [{
								name: 'ripple-animation',
								id: 'ripple',
								toPage: this,
								timing: {
									duration: 500
								}
							}],
							'exit': [{
								name: 'fade-out-animation',
								node: this.$.container,
								timing: {
									duration: 1000
								}
							}]
						}
					}
				}
			},
			togglePlay: function() {
				this.pause();
				this.handlePause();
			},
			handlePause: function() {
				this.$.wavecontainer.style.opacity = 0;
				this.$.controls.style.opacity = 0;
				this.fire('pause-click');
			},
			bindWaveSurferEvents: function() {
				return new Promise((resolve, reject) => {
					this.wavesurfer.on('ready', () => {
						this.wavesurfer.play();
						this.$.notification.style.borderColor = this.wavecolor;
						this.showControls();
					});

					this.wavesurfer.on('error', (e) => {
						setTimeout( () => {
							this.$.error.show();
						}, 2000);
						setTimeout( () => {
							this.togglePlay();
							this.fire('error');
						}, 5000);
					});

					this.wavesurfer.on('finish', () => {
						this.togglePlay();
					});

					this.wavesurfer.on('loading', (e) => {
						this.loadingval = e;
						if(e == 100) {
							this.showControls();
						}
					});

					resolve();
				});
			},
			showControls: function() {
				// We need a setTimeout here because the animation applies on
				// inner elements as well, which makes it look weird
				setTimeout( () => {
					this.$.controls.style.opacity = 1;
					this.$.wavecontainer.style.opacity = 1;
				}, 1000);
				this.$.loadmeter.style.display = "none";
			},
			initWaveSurfer: function() {
				this.$.controls.style.opacity = 0;

				return new Promise((resolve, reject)=> {
					this.wavesurfer.init({
						container: this.$.wavecontainer,
						waveColor: this.wavecolor,
						progressColor: this.progresscolor,
						fillParent: true,
						height: 100,
						backend: 'AudioElement'
					});

					this.isInitialized = true;
					resolve();
				});
			},
			updateWavesurfer: function() {
				this.wavesurfer = Object.create(WaveSurfer);
			},
			play: function() {

				// If player is not initialized
				// i.e. if it is the first run
				// then call the initialization script
				if(!this.isInitialized) {
					this.initWaveSurfer()
					.then(() => {
						return this.bindWaveSurferEvents();
					})
					.then(() => {
						if(this.datapoints.length == 0) {
							this.wavesurfer.load(this.src);
						} else {
							this.wavesurfer.load(this.src, this.datapoints);
						}
					});
					return;
				}

				this.wavesurfer.play();
				this.showControls();
			},
			pause: function() {
				this.wavesurfer.pause();
			},
			mute: function() {
				this.wavesurfer.toggleMute();
			},
			replay: function() {
				this.wavesurfer.skip(-30);
			}
		});
	})();
</script>