podcast-player.html

<link rel="import" href="../polymer/polymer.html" />
<link rel="import" href = "../neon-animation/neon-animated-pages.html" / >
<link rel="import" href="song-file-display.html">
<link rel="import" href="song-file-player.html" />

<dom-module id="podcast-player">
	<style>
		:host {
			width: 100%;
			height: 150px;
			background-color: var(--dark-primary-color);
			position: absolute;
			font-family: 'Roboto', sans-serif;
		}
		neon-animated-pages {
			height: 150px;
		}
		song-file-player {
			overflow: hidden;
		}
	</style>
	<template>
		<neon-animated-pages id="pages" selected="0">
			<song-file-display
				on-play-click="goToPlayer"
				name="{{name}}"
				episode="{{episode}}"
				coverart="{{coverart}}"></song-file-display>
			<song-file-player
				on-pause-click="goToDisplay"
				on-error="handlePlayerError"
				src="{{src}}"
				wavecolor="{{wavecolor}}"
				progresscolor="{{progresscolor}}"
				datapoints="{{datapoints}}"></song-file-player>
		</neon-animated-pages>
		<script id="wavesurferscript" type="text/javascript" src="wavesurfer.min.js" ></script>
	</template>
</dom-module>
<script>
	( function () {
		Polymer({
			is: 'podcast-player',
			properties: {
				src: {
					type: String,
					value: '',
					notify: true
				},
				name: {
					type: String,
					value: '',
					notify: true
				},
				wavesurfer: {
					type: Object
				},
				wavecolor: {
					type: String,
					value: '#ffffff',
					notify: true
				},
				progresscolor: {
					type: String,
					value: '#CFD8DC',
					notify: true
				},
				coverart: {
					type: String,
					value: '',
					notify: true
				},
				episode: {
					type: String,
					value: '',
					notify: true
				},
				selectedPage :{
					type: Number,
					value: 0
				},
				datapoints: {
					type: Array,
					value: []
				},
				initPlayer: false
			},
			listeners: {
				'wavesurferscript.load': 'updatewavesurfer'
			},
			goToPlayer : function(event) {
				this.$.pages.selected = 1;
				Polymer.dom(this.root)
					.querySelector("song-file-player").play();
			},
			goToDisplay : function(event) {
				this.$.pages.selected = 0;
			},
			updatewavesurfer: function(e) {
				Polymer.dom(this.root)
					.querySelector("song-file-player").updateWavesurfer();
			},
			handlePlayerError: function(e) {
				this.initPlayer = false;
			}
		});
	})();
</script>