song-file-display.html

<link rel="import" href="../paper-material/paper-material.html" />
<link rel="import" href="../paper-fab/paper-fab.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="../neon-animation/neon-animations.html" >
<link rel="import" href="../iron-image/iron-image.html" />

<dom-module id="song-file-display">
	<style>
		:host {
			width: 100%;
			height: 100%;
			position: relative;
			overflow: hidden;
		}
		paper-fab {
			position: absolute;
			top: -25px;
			left: 25px;
			z-index: 25;
			height: 56px !important;
		}
		paper-material {
			opacity: 1;
			height: 100%;
			width: 	100%;
			overflow: hidden;
			@apply(--layout-horizontal);
		}
		iron-image {
			width: 100px;
			height: 100px;
			margin: 25px;
		}
		.details {
			@apply(--layout-flex);
			@apply(--layout-vertical);
			padding: 25px 0 25px 25px;
			text-align: right;
		}
		h2 {
			color: var(--light-primary-color);
			white-space: nowrap;
			overflow: hidden;
			margin: 10px 0 0 0;
			font-weight: 100;
			text-overflow: ellipsis;
			@apply(--layout-flex);
		}
		h5 {
			color: var(--light-primary-color);
			white-space: nowrap;
			overflow: hidden;
			margin: 0 0 10px 0;
			font-weight: 100;
			text-overflow: ellipsis;
			@apply(--layout-flex);
		}
	</style>
	<template>
		<paper-fab id="playbutton" icon="av:play-arrow" on-tap="togglePlay"></paper-fab>
		<paper-material elevation="0">
			<div class="details" id="details">
				<h2>{{name}}</h2>
				<h5>Episode - <span>{{episode}}</span></h5>
			</div>
			<div>
				<iron-image id="coverimage" style="width:100px; height:100px;" sizing="contain"
  src="{{coverart}}"></iron-image>
			</div>
		</paper-material>
	</template>
</dom-module>
<script>
	( function () {
		Polymer({
			is: 'song-file-display',
			behaviors: [
				Polymer.NeonSharedElementAnimatableBehavior
			],
			properties: {
				coverart: {
					type: String,
					value: '',
					notify: true
				},
				name: {
					type: String,
					value: '',
					notify: true
				},
				episode: {
					type: String,
					value: '',
					notify: true
				},
				animationConfig: {
					value: function() {
						return {
							'entry': [{
								name: 'scale-up-animation',
								node: this.$.playbutton,
								timing: {
									delay: 500
								}
							}, {
								name: 'fade-in-animation',
								node: this.$.coverimage,
								timing: {
									delay: 750
								}
							}, {
								name: 'slide-from-left-animation',
								node: this.$.details,
								transformOrigin: "0 90%",
								timing: {
									delay: 1000,
									duration: 250
								}
							}],
							'exit': [{
								name: 'ripple-animation',
								id: 'ripple',
								fromPage: this,
								timing: {duration: 500}
							},{
								name: 'scale-down-animation',
								node: this.$.playbutton,
								timing: {
									delay: 500
								}
							}]
						};
					}
				},
				sharedElements: {
					value: function() {
						return {
							'hero': this.$.playbutton,
							'ripple': this.$.playbutton
						}
					}
				}
			},
			togglePlay: function() {
				this.fire('play-click');
			}
		});
	})();
</script>