wave-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="../iron-icons/iron-icons.html" />
<link rel="import" href="../iron-icons/av-icons.html" />

<!--
This is an element for play back of audio files
that generates and displays a waveform.

__Example__ of a native element demo

    <wave-player 
      wavecolor="#e44d26" 
      progresscolor="#f16529" 
      src="../mirror.mp3" 
      coverart="../art.jpg"
      lean="left"
      title="Main Bold title!"
      subtitle="Subtitle">
    </wave-player>

@element wave-player.html
@demo demo/index.html
-->

<dom-module id="wave-player">
	<style>
		:host {
			min-width: 480px;
			height: 150px;
			background-color: var(--dark-primary-color);
		}
		paper-icon-button {
			position: absolute;
		}
		.title, .subtitle {
			transition:all .5s ease;
			padding:10px 10px 10px 0;
			left:160px;
			position: absolute;
		}
		.subtitle {
			bottom: 0;
		}
		.controls {
			height:50px;
			width:100%;
			top:0;
			background:var(--accent-color);
			z-index:20
		}
		paper-fab {
			transition:all .5s ease;
			top:-25px;
			z-index:25;
			border-radius:0;
		}
		.albuminfo {
			position: relative;
			transition:all .5s ease;
			top:-156px;
			margin-bottom: -150px;
			z-index:20;
			height:150px;
			width:400px;
			background-color:rgba(0,0,0,.4);
			color:#fff;
			font-family:Roboto,sans-serif;
		}
		.albuminfoActive {
			top:-25;
			height:25px;
			width:100%;
			margin-bottom: -19px;
		}
		.waveContainer {
			top: -31px;
			transition:all .5s ease;
			background-color:var(--dark-primary-color);
			transform:scaleY(1.5)
		} 
		.circleAnimation {
			border-radius:50%;
			overflow:auto;
			-moz-box-shadow:0 2px 5px 0 rgba(0,0,0,.4);
			box-shadow:0 2px 5px 0 rgba(0,0,0,.4)
		}
		.circleAnimation:active {
			-moz-box-shadow:0 8px 17px 0 rgba(0,0,0,.2);
			box-shadow:0 8px 17px 0 rgba(0,0,0,.2)
		}
		.playActive {
			top:0;
			width:100%;
			height:50px
		}
		.waveActive {
			top: 0px;
			transform:scaleY(1)
		}
		.centred, .titleActive {
			transform:scaleY(0);
		}
		.titleActive {
			opacity: 0;
		}
		#playbutton {
			transition:all .5s ease
		}
		.coverart {
			transition:all .5s ease;
			width:150px;
			height:150px
		} 
		.title {
			font-size:24px;
		}
		.coverartActive {
			width:25px;
			height:25px
		}
		.nameActive {
			font-size:19px;
			padding:3px 3px 3px 0;
			left:30px
		}
		.centred {
			top:calc(50% - 20px);
			left:calc(50% - 20px);
			transition:all .3s ease
		} 
		.left,.middle,.right {
			transform:scale(1)
		} 
		.left {
			left:calc(25% - 20px)
		} 
		.right {
			left:calc(75% - 20px)
		}
		.hidden {
			display:none
		}
		
		@media only screen and (max-width: 500px) {
			.albuminfo {
				width:100%;
			}
		}
	</style>
	<template>

		<paper-fab id="playbutton" class="circleAnimation" disabled icon="av:play-arrow" on-click="togglePlay"></paper-fab>
		<paper-material  class="controls hidden" elevation="2">
			<paper-icon-button class="centred middle" style="color: white;" icon="av:pause" on-click="togglePlay"></paper-icon-button>
			<paper-icon-button id="replay" class="centred" style="color: white;" icon="av:replay-30" on-click="throwBack"></paper-icon-button>
			<paper-icon-button id="mute" class="centred" style="color: white;" icon="av:volume-up" on-click="toggleMute"></paper-icon-button>
		</paper-material>


		<paper-material id="container" class="waveContainer" elevation="0"></paper-material>
		
		<div class="albuminfo">
			<img class="coverart" src="{{coverart}}" /></img>
			<span class="title">{{title}}</span>
			<span class="subtitle">{{subtitle}}</span>
		</div>
		
		<script type="text/javascript" src="../wavesurfer.js/dist/wavesurfer.min.js" onload='document.querySelector("wave-player").updateWavesurfer();'></script>
	</template>
</dom-module>
<script>
	( function () {
		Polymer({
			is: 'wave-player',
			properties: {
				/**
				* The source of the audio file to be played
				*
				* @attribute src
				* @type String
				* @default NULL
				*/
				src: {
					type: String,
					value: '',
					notify: true
				},
				/**
				* The main (bold) title
				*
				* @attribute title
				* @type String
				* @default NULL
				*/
				title: {
					type: String,
					value: '',
					notify: true
				},
				/**
				* The smaller subtitle, for chapter heading or composer.
				*
				* @attribute subtitle
				* @type String
				* @default NULL
				*/
				subtitle: {
					type: String,
					value: '',
					notify: true
				},
				/**
				* The sourse for cover art
				*
				* @attribute coverart
				* @type String
				* @default art.jpg
				*/
				coverart: {
					type: String,
					value: 'art.jpg',
					notify: true
				},
				/**
				* container for the wave object
				*
				* @attribute wavesurfer
				* @type Object
				*/
				wavesurfer: {
					type: Object
				},
				/**
				* Determines if the FOB is on the left or the right
				*
				* @attribute lean
				* @type String
				* @default left
				*/
				lean: {
					type: String,
					value: 'left',
					notify: true
				},
				/**
				* Color of the Wave
				*
				* @attribute wavecolor
				* @type String
				* @default #ffffff
				*/
				wavecolor: {
					type: String,
					value: '#ffffff',
					notify: true
				},
				/**
				* Color of the completed section of the wave
				*
				* @attribute progresscolor
				* @type String
				* @default #CFD8DC
				*/
				progresscolor: {
					type: String,
					value: '#CFD8DC',
					notify: true
				}
			},
			ready: function() {
				if (this.lean === "right") {
					Polymer.dom(this.root).querySelector('paper-fab').style.right = "25";
					Polymer.dom(this.root).querySelector('.controls').style.right = "0";
				} else {
					Polymer.dom(this.root).querySelector('paper-fab').style.left = "25";
					Polymer.dom(this.root).querySelector('.controls').style.left = "0";
				}
				if (this.name === "") {
					Polymer.dom(this.root).querySelector('.albuminfo').classList.add("hidden");
				}
			},
			/**
			* Function to update classes (for activate)
			*/
			activateAnimation: function() {
				var self = this;
				var waveStyle = Polymer.dom(this.root).querySelector('.waveContainer');
				var buttonStyle = Polymer.dom(this.root).querySelector('#playbutton');
				var controlsStyle = Polymer.dom(this.root).querySelector('.controls');
				var muteStyle = Polymer.dom(this.root).querySelector('#mute');
				var replayStyle = Polymer.dom(this.root).querySelector('#replay');
				var albumStyle = Polymer.dom(this.root).querySelector('.albuminfo');
				var coverartStyle = albumStyle.querySelector('.coverart');
				var nameStyle = albumStyle.querySelector('.title');
				var titleStyle = albumStyle.querySelector('.subtitle');
				buttonStyle.setAttribute('icon', 'av:pause');
				buttonStyle.classList.remove("circleAnimation");
				buttonStyle.classList.add("playActive");
				albumStyle.classList.add("albuminfoActive");
				coverartStyle.classList.add("coverartActive");
				nameStyle.classList.add("nameActive");
				titleStyle.classList.add("titleActive");
				if (self.lean === "right") {
					Polymer.dom(this.root).querySelector('.playActive').style.right = "0";
				} else {
					Polymer.dom(this.root).querySelector('.playActive').style.left = "0";
				}
				waveStyle.classList.add("waveActive");
				setTimeout(function() {
					controlsStyle.classList.remove("hidden");
					buttonStyle.classList.add("hidden");
				},500);
				setTimeout (function() {
					muteStyle.classList.add("right");
					replayStyle.classList.add("left");
				},600);
			},
			/**
			* Function to update classes (for deactivate)
			*/
			deactivateAnimation: function() {
				var self = this;
				var waveStyle = Polymer.dom(this.root).querySelector('.waveContainer');
				var buttonStyle = Polymer.dom(this.root).querySelector('#playbutton');
				var controlsStyle = Polymer.dom(this.root).querySelector('.controls');
				var muteStyle = Polymer.dom(this.root).querySelector('#mute');
				var replayStyle = Polymer.dom(this.root).querySelector('#replay');
				var albumStyle = Polymer.dom(this.root).querySelector('.albuminfo');
				var coverartStyle = albumStyle.querySelector('.coverart');
				var nameStyle = albumStyle.querySelector('.title');
				var titleStyle = albumStyle.querySelector('.subtitle');
				muteStyle.classList.remove("right");
				replayStyle.classList.remove("left");
				setTimeout(function() {
					controlsStyle.classList.add("hidden");
					buttonStyle.classList.remove("hidden");
				},100);
				setTimeout(function() {
					buttonStyle.setAttribute('icon', 'av:play-arrow');
					buttonStyle.classList.add("circleAnimation");
					buttonStyle.classList.remove("playActive");
					albumStyle.classList.remove("albuminfoActive");
					coverartStyle.classList.remove("coverartActive");
					nameStyle.classList.remove("nameActive");
					titleStyle.classList.remove("titleActive");
					if (self.lean === "right") {
						buttonStyle.style.right = "25";
					} else {
						buttonStyle.style.left = "25";
					}
					waveStyle.classList.remove("waveActive");
				},200);
			},
			/**
			* Initializing wave object
			*/
			initWaveSurfer: function() {
				var self = this;
				this.wavesurfer.init({
					container: this.$.container,
//					progressColor: '#f16529',
//					waveColor: '#e44d26',
					waveColor: this.wavecolor,
					progressColor: this.progresscolor, // --primary-background-color
					fillParent: true,
					height: 100
				});
				this.wavesurfer.on('ready', function () {
					document.querySelector('#playbutton').removeAttribute('disabled');
				});
				this.wavesurfer.on('finish', function() {
					self.deactivateAnimation();
				});
				this.wavesurfer.load(this.src);
			},
			/**
			* Stores Object
			*/
			updateWavesurfer: function() {
				this.wavesurfer = Object.create(WaveSurfer);
				this.initWaveSurfer();
			},
			/**
			* Toggle play and pause
			*/
			togglePlay: function(e) {
				this.wavesurfer.playPause();
				var iconType = this.$.playbutton.getAttribute('icon');
				if(iconType === 'av:play-arrow') {
					this.activateAnimation();
				} else {
					this.deactivateAnimation();
				}
			},
			/**
			* Toggle mute on and off
			*/
			toggleMute: function(e) {
				var muteStyle = Polymer.dom(this.root).querySelector('#mute');
				var iconType = muteStyle.getAttribute('icon');
				this.wavesurfer.toggleMute();
				if(iconType === 'av:volume-up') {
					muteStyle.setAttribute('icon', 'av:volume-off');
				} else {
					muteStyle.setAttribute('icon', 'av:volume-up');
				};
			},
			/**
			* Jumps back 30 seconds
			*/
			throwBack: function(e) {
				this.wavesurfer.skipBackward(30);
			}
		});
	})();
</script>