Merge pull request #11 from prateekjadhwani/player-events

Fixing player events
prateekjadhwani · Jul 12, 2015 · bb4c09b · bb4c09b
2 parents cf58bd2 + 10413fc
commit bb4c09b
Show file tree

Hide file tree

Showing 9 changed files with 92 additions and 12 deletions.
diff --git a/Baseball_Project_-_10_-_Interview.mp3 b/Baseball_Project_-_10_-_Interview.mp3
diff --git a/Project_5am_-_01_-_June_8th_-There_is_another_waycourage.mp3 b/Project_5am_-_01_-_June_8th_-There_is_another_waycourage.mp3
diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "podcast-player",
-  "version": "0.0.2",
+  "version": "1.0.0",
   "authors": [
     "Prateek Jadhwani <[email protected]>",
 		"Andrew Bone <[email protected]>"

diff --git a/cover_290x290.jpg b/cover_290x290.jpg
diff --git a/cover_290x290.png b/cover_290x290.png
diff --git a/demo.html b/demo.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
 	<head>
+		<link href='http://fonts.googleapis.com/css?family=Roboto:100' rel='stylesheet' type='text/css'>
 		<link rel="import" href="podcast-player.html" />
 		<link rel="import" href="app-theme.html" />
 		<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=no">
@@ -9,6 +10,7 @@
 			html, body {
 				margin: 0;
 				padding: 0;
+				background: #e44d26;
 			}
 
 			/* position and size of player */
@@ -23,9 +25,9 @@
 		<podcast-player 
 										wavecolor="#ffffff" 
 										progresscolor="#CFD8DC" 
-										src="Project_5am_-_01_-_June_8th_-There_is_another_waycourage.mp3"
-										name="June 8th -There is another way...(courage)"
-										episode="12"
-										coverart="cover_290x290.png"></podcast-player>
+										src="Baseball_Project_-_10_-_Interview.mp3"
+										name="Interview (by The Baseball Project)"
+										episode="10"
+										coverart="cover_290x290.jpg"></podcast-player>
 	</body>
 </html>
diff --git a/podcast-player.html b/podcast-player.html
@@ -15,6 +15,7 @@
 			height: 150px;
 			background-color: var(--dark-primary-color);
 			position: relative;
+			font-family: 'Roboto', sans-serif;
 		}
 		neon-animated-pages {
 			height: 150px;
@@ -93,6 +94,7 @@
 				}
 				setTimeout( function() {
 					document.querySelector("#wavecontainer").style.opacity = 1;
+					document.querySelector("#controls").style.opacity = 1;
 				}, 1000);
       },
       goToDisplay : function(event) {

diff --git a/song-file-display.html b/song-file-display.html
@@ -41,12 +41,14 @@
 			white-space: nowrap;
 			overflow: hidden;
 			margin: 10px 0 0 0;
+			font-weight: 100;
 		}
 		h5 {
 			color: var(--light-primary-color);
 			white-space: nowrap;
 			overflow: hidden;
 			margin: 0 0 10px 0;
+			font-weight: 100;
 		}
 	</style>
 	<template>
@@ -99,21 +101,22 @@ <h5 class="flex">Episode - <span>{{episode}}</span></h5>
 								name: 'fade-in-animation',
 								node: this.$.coverimage,
 								timing: {
-									delay: 1000
+									delay: 750
 								}
 							}, {
 								name: 'slide-from-left-animation',
 								node: this.$.details,
 								transformOrigin: "0 90%",
 								timing: {
-									delay: 1500,
-									duration: 500
+									delay: 1000,
+									duration: 250
 								}
 							}],
 							'exit': [{
 								name: 'ripple-animation',
 								id: 'ripple',
-								fromPage: this
+								fromPage: this,
+								timing: {duration: 500}
 							},{
 								name: 'scale-down-animation',
   							node: this.$.playbutton,

diff --git a/song-file-player.html b/song-file-player.html
@@ -1,9 +1,11 @@
 <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" />
 
@@ -13,6 +15,14 @@
 			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);
@@ -21,16 +31,51 @@
 			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);
+    }
+		@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">
 			</paper-material>
-			<div id="controls">
-				<paper-icon-button id='pausebutton' icon="av:pause" on-click="togglePlay"></paper-icon-button>
+			<div id="controls" class="horizontal layout">
+				<paper-icon-button class="flex" id='replaybutton' icon="av:replay-30" on-click="replay"></paper-icon-button>
+				<paper-icon-button class="flex"  id='pausebutton' icon="av:pause" on-click="togglePlay"></paper-icon-button>
+				<paper-icon-button class="flex"  id='mutebutton' icon="av:volume-off" on-click="mute" toggles></paper-icon-button>
 			</div>
 		</paper-material>
-
 	</template>
 </dom-module>
 <script>
@@ -60,6 +105,10 @@
 					value: '#CFD8DC',
 					notify: true
 				},
+				loadingval: {
+					type: String,
+					value: 0
+				},
 				sharedElements: {
 					value: function() {
 						return {
@@ -93,28 +142,52 @@
 			},
 			togglePlay: function() {
 				this.$.wavecontainer.style.opacity = 0;
+				this.$.controls.style.opacity = 0;
 				this.wavesurfer.pause();
 				this.fire('pause-click');
 			},
 			initWaveSurfer: function() {
 				var self = this;
+				this.$.controls.style.opacity = 0;
+
 				this.wavesurfer.init({
 					container: this.$.wavecontainer,
 					waveColor: this.wavecolor,
 					progressColor: this.progresscolor, // --primary-background-color
 					fillParent: true,
 					height: 100
 				});
+
 				this.wavesurfer.on('ready', function () {
 					self.wavesurfer.play();
 				});
 				this.wavesurfer.load(this.src);
+
+				this.wavesurfer.on('finish', function () {
+					self.togglePlay();
+				});
+
+				this.wavesurfer.on('loading', function (e) {
+					self.loadingval = e;
+					if(e == 100) {
+						self.$.controls.style.opacity = 1;
+						self.$.loadmeter.style.display = "none";
+					} else {
+						self.$.controls.style.opacity = 0;
+					}
+				});
 			},
 			updateWavesurfer: function() {
 				this.wavesurfer = Object.create(WaveSurfer);
 			},
 			play: function() {
 				this.wavesurfer.play();
+			},
+			mute: function() {
+				this.wavesurfer.toggleMute();
+			},
+			replay: function() {
+				this.wavesurfer.skip(-30);
 			}
 		});
 	})();