Skip to content

Commit

Permalink
Updating Dependencies
Browse files Browse the repository at this point in the history 
No more procrastination!!! Updating all the dependencies and coding
practices.
  • Loading branch information
@prateekjadhwani
prateekjadhwani committed Mar 31, 2016
1 parent 3861fea commit 1492fbf
Show file tree
Hide file tree
Showing 5 changed files with 112 additions and 100 deletions.
22 changes: 11 additions & 11 deletions bower.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "podcast-player",
"version": "1.0.6",
"version": "1.1.0",
"authors": [
"Prateek Jadhwani <[email protected]>",
"Andrew Bone <[email protected]>"
Expand All @@ -24,16 +24,16 @@
"tests"
],
"dependencies": {
"paper-material": "PolymerElements/paper-material#~1.0.1",
"polymer": "Polymer/polymer#~1.0.7",
"paper-fab": "PolymerElements/paper-fab#~1.0.3",
"iron-image": "PolymerElements/iron-image#~1.0.2",
"iron-icons": "PolymerElements/iron-icons#~1.0.3",
"neon-animation": "PolymerElements/neon-animation#~1.0.6",
"paper-icon-button": "PolymerElements/paper-icon-button#~1.0.3",
"paper-button": "PolymerElements/paper-button#~1.0.3",
"paper-progress": "PolymerElements/paper-progress#~1.0.1",
"paper-toast": "PolymerElements/paper-toast#~1.0.0"
"paper-material": "PolymerElements/paper-material#~1.0.6",
"polymer": "Polymer/polymer#~1.4.0",
"paper-fab": "PolymerElements/paper-fab#~1.2.0",
"iron-image": "PolymerElements/iron-image#~1.2.3",
"iron-icons": "PolymerElements/iron-icons#~1.1.3",
"neon-animation": "PolymerElements/neon-animation#~1.1.1",
"paper-icon-button": "PolymerElements/paper-icon-button#~1.0.7",
"paper-button": "PolymerElements/paper-button#~1.0.11",
"paper-progress": "PolymerElements/paper-progress#~1.0.9",
"paper-toast": "PolymerElements/paper-toast#~1.2.1"
},
"repository": {
"type": "git",
Expand Down
2 changes: 1 addition & 1 deletion demo.html
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<!DOCTYPE html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Roboto:100' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Roboto:100' rel='stylesheet' type='text/css'>
<link rel="import" href="podcast-player.html" />
<link rel="import" href="examples/app-theme.html" />
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=no">
Expand Down
29 changes: 10 additions & 19 deletions podcast-player.html
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
<link rel="import" href="../polymer/polymer.html" />
<link rel="import" href="../neon-animation/neon-animated-pages.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" />

Expand Down Expand Up @@ -90,24 +89,16 @@
'wavesurferscript.load': 'updatewavesurfer'
},
goToPlayer : function(event) {
var self = Polymer.dom(this.root).querySelector("song-file-player");
this.$.pages.selected = 1;
if(this.initPlayer) {
Polymer.dom(this.root).querySelector("song-file-player").play();
} else {
Polymer.dom(this.root).querySelector("song-file-player").initWaveSurfer();
this.initPlayer = true;
}
setTimeout( function() {
self.querySelector("#wavecontainer").style.opacity = 1;
self.querySelector("#controls").style.opacity = 1;
}, 1000);
},
goToDisplay : function(event) {
this.$.pages.selected = 0;
},
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();
Polymer.dom(this.root)
.querySelector("song-file-player").updateWavesurfer();
},
handlePlayerError: function(e) {
this.initPlayer = false;
Expand Down
15 changes: 10 additions & 5 deletions song-file-display.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,13 +26,16 @@
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;
}
Expand All @@ -43,6 +46,7 @@
margin: 10px 0 0 0;
font-weight: 100;
text-overflow: ellipsis;
@apply(--layout-flex);
}
h5 {
color: var(--light-primary-color);
Expand All @@ -51,14 +55,15 @@
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" class="flex horizontal layout">
<div class="flex details vertical layout" id="details">
<h2 class="flex">{{name}}</h2>
<h5 class="flex">Episode - <span>{{episode}}</span></h5>
<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"
Expand Down Expand Up @@ -121,7 +126,7 @@ <h5 class="flex">Episode - <span>{{episode}}</span></h5>
timing: {duration: 500}
},{
name: 'scale-down-animation',
node: this.$.playbutton,
node: this.$.playbutton,
timing: {
delay: 500
}
Expand Down
144 changes: 80 additions & 64 deletions song-file-player.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,16 +42,16 @@
height: 30px;
}
paper-icon-button[toggles] {
transition: background-color 0.3s;
}
paper-icon-button[toggles][active] {
background-color: rgba(0, 0, 0, 0.25);
}
transition: background-color 0.3s;
}
paper-icon-button[toggles][active] {
background-color: rgba(0, 0, 0, 0.25);
}

#error {
z-index: 999;
}

@keyframes flickerAnimation {
0% { opacity:1; }
50% { opacity:0; }
Expand Down Expand Up @@ -82,9 +82,9 @@
vertical-align: middle;
border-top: 2px solid var(--text-primary-color);
-webkit-animation: flickerAnimation 3s infinite;
-moz-animation: flickerAnimation 3s infinite;
-o-animation: flickerAnimation 3s infinite;
animation: flickerAnimation 3s infinite;
-moz-animation: flickerAnimation 3s infinite;
-o-animation: flickerAnimation 3s infinite;
animation: flickerAnimation 3s infinite;
}
@media (min-width: 600px) {
#container {
Expand Down Expand Up @@ -174,7 +174,7 @@
'entry': [{
name: 'ripple-animation',
id: 'ripple',
toPage: this,
toPage: this,
timing: {
duration: 500
}
Expand All @@ -199,64 +199,89 @@
this.$.controls.style.opacity = 0;
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,
fillParent: true,
height: 100,
backend: 'AudioElement'
});
this.isInitialized = true;
bindWaveSurferEvents: function() {
return new Promise((resolve, reject) => {
this.wavesurfer.on('ready', () => {
this.wavesurfer.play();
this.$.notification.style.borderColor = this.wavecolor;
this.showControls();
});

this.wavesurfer.on('ready', function () {
self.wavesurfer.play();
self.$.notification.style.borderColor = self.wavecolor;
setTimeout( function () {
self.$.controls.style.opacity = 1;
}, 1000);
self.$.loadmeter.style.display = "none";
});
this.wavesurfer.on('error', (e) => {
setTimeout( () => {
this.$.error.show();
}, 2000);
setTimeout( () => {
this.togglePlay();
this.fire('error');
}, 5000);
});

this.wavesurfer.on('error', function(e) {
setTimeout( function () {
self.$.error.show();
}, 2000);
setTimeout( function () {
self.togglePlay();
self.fire('error');
}, 5000);
});
this.wavesurfer.on('finish', () => {
this.togglePlay();
});

if(this.datapoints.length == 0) {
this.wavesurfer.load(this.src);
} else {
this.wavesurfer.load(this.src, this.datapoints);
}
this.wavesurfer.on('loading', (e) => {
this.loadingval = e;
if(e == 100) {
this.showControls();
}
});

this.wavesurfer.on('finish', function () {
self.togglePlay();
resolve();
});
},
showControls: function() {
// We need a setTimeout here because the animation applies on
// inner elements as well, which makes it look weird
setTimeout( () => {
this.$.controls.style.opacity = 1;
this.$.wavecontainer.style.opacity = 1;
}, 1000);
this.$.loadmeter.style.display = "none";
},
initWaveSurfer: function() {
this.$.controls.style.opacity = 0;

this.wavesurfer.on('loading', function (e) {
self.loadingval = e;
if(e == 100) {
setTimeout( function () {
self.$.controls.style.opacity = 1;
}, 1000);
self.$.loadmeter.style.display = "none";
}
return new Promise((resolve, reject)=> {
this.wavesurfer.init({
container: this.$.wavecontainer,
waveColor: this.wavecolor,
progressColor: this.progresscolor,
fillParent: true,
height: 100,
backend: 'AudioElement'
});

this.isInitialized = true;
resolve();
});
},
updateWavesurfer: function() {
this.wavesurfer = Object.create(WaveSurfer);
},
play: function() {

// If player is not initialized
// i.e. if it is the first run
// then call the initialization script
if(!this.isInitialized) {
this.initWaveSurfer()
.then(() => {
return this.bindWaveSurferEvents();
})
.then(() => {
if(this.datapoints.length == 0) {
this.wavesurfer.load(this.src);
} else {
this.wavesurfer.load(this.src, this.datapoints);
}
});
return;
}

this.wavesurfer.play();
this.showControls();
},
pause: function() {
this.wavesurfer.pause();
Expand All @@ -266,15 +291,6 @@
},
replay: function() {
this.wavesurfer.skip(-30);
},
freeUpMemory: function(){
if(this.isInitialized && this.wavesurfer.isPlaying != "undefined") {
this.wavesurfer.pause();
this.wavesurfer.destroy();
this.isInitialized = false;
this.fire("error");
this.handlePause();
}
}
});
})();
Expand Down

0 comments on commit 1492fbf

Please sign in to comment.