Merge pull request #15 from prateekjadhwani/multiple-players

prateekjadhwani · prateekjadhwani · commit 084ea33cb836 · 2015-07-13T21:25:53.000-04:00
Fixing multiple players
diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "podcast-player",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "authors": [
     "Prateek Jadhwani <prateekjadhwani@users.noreply.github.com>",
 		"Andrew Bone <AndrewB05@gmail.com>"
diff --git a/demo.html b/demo.html
@@ -14,20 +14,33 @@
 			}
 
 			/* position and size of player */
-			podcast-player {
+			#somewhere {
+				top: 50px;
+			}
+			#bottom {
 				position: fixed;
 				bottom: 0px;
 				width: 100%;
 			}
 		</style>
 	</head>
 	<body>
-		<podcast-player 
-										wavecolor="#ffffff" 
-										progresscolor="#CFD8DC" 
-										src="Baseball_Project_-_10_-_Interview.mp3"
-										name="Interview (by The Baseball Project)"
-										episode="10"
-										coverart="cover_290x290.jpg"></podcast-player>
+
+		<podcast-player id="somewhere"
+			wavecolor="#F3AEF3" 
+			progresscolor="#2A3F55" 
+			src="Baseball_Project_-_10_-_Interview.mp3"
+			name="Interview (by The Baseball Project)"
+			episode="10"
+			coverart="cover_290x290.jpg"></podcast-player>
+
+		<podcast-player id="bottom"
+			wavecolor="#ffffff" 
+			progresscolor="#CFD8DC" 
+			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
@@ -14,7 +14,7 @@
 			width: 100%;
 			height: 150px;
 			background-color: var(--dark-primary-color);
-			position: relative;
+			position: absolute;
 			font-family: 'Roboto', sans-serif;
 		}
 		neon-animated-pages {
@@ -26,18 +26,18 @@
 	</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" 
-												src="{{src}}"
-												wavecolor="{{wavecolor}}"
-												progresscolor="{{progresscolor}}"></song-file-player>
+			<song-file-display
+				on-play-click="goToPlayer"
+				name="{{name}}"
+				episode="{{episode}}"
+				coverart="{{coverart}}"></song-file-display>
+			<song-file-player
+				on-pause-click="goToDisplay"
+				src="{{src}}"
+				wavecolor="{{wavecolor}}"
+				progresscolor="{{progresscolor}}"></song-file-player>
 		</neon-animated-pages>
-		<script type="text/javascript" src="wavesurfer.min.js" onload='document.querySelector("song-file-player").updateWavesurfer();'></script>
+		<script id="wavesurferscript" type="text/javascript" src="wavesurfer.min.js" ></script>
 	</template>
 </dom-module>
 <script>
@@ -84,22 +84,29 @@
 				},
 				initPlayer: false
 			},
+			listeners: {
+				'wavesurferscript.load': 'updatewavesurfer'
+			},
 			goToPlayer : function(event) {
+				var self = Polymer.dom(this.root).querySelector("song-file-player");
         this.$.pages.selected = 1;
 				if(this.initPlayer) {
-					document.querySelector("song-file-player").play();
+					Polymer.dom(this.root).querySelector("song-file-player").play();
 				} else {
-					document.querySelector("song-file-player").initWaveSurfer();
+					Polymer.dom(this.root).querySelector("song-file-player").initWaveSurfer();
 					this.initPlayer = true;
 				}
 				setTimeout( function() {
-					document.querySelector("#wavecontainer").style.opacity = 1;
-					document.querySelector("#controls").style.opacity = 1;
+					self.querySelector("#wavecontainer").style.opacity = 1;
+					self.querySelector("#controls").style.opacity = 1;
 				}, 1000);
       },
       goToDisplay : function(event) {
         this.$.pages.selected = 0;
-      }
+      },
+			updatewavesurfer: function(e) {
+				Polymer.dom(this.root).querySelector("song-file-player").updateWavesurfer();
+			}
 		});
 	})();
 </script>
diff --git a/song-file-display.html b/song-file-display.html
@@ -42,13 +42,15 @@
 			overflow: hidden;
 			margin: 10px 0 0 0;
 			font-weight: 100;
+			text-overflow: ellipsis;
 		}
 		h5 {
 			color: var(--light-primary-color);
 			white-space: nowrap;
 			overflow: hidden;
 			margin: 0 0 10px 0;
 			font-weight: 100;
+			text-overflow: ellipsis;
 		}
 	</style>
 	<template>
diff --git a/song-file-player.html b/song-file-player.html
@@ -157,7 +157,7 @@
 					fillParent: true,
 					height: 100
 				});
-				
+
 				this.wavesurfer.on('ready', function () {
 					self.wavesurfer.play();
 				});

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "podcast-player",`
`3`		`- "version": "1.0.0",`
	`3`	`+ "version": "1.0.1",`
`4`	`4`	`"authors": [`
`5`	`5`	`"Prateek Jadhwani <[email protected]>",`
`6`	`6`	`"Andrew Bone <[email protected]>"`