Skip to content

Commit bb4c09b

Browse files
prateekjadhwaniprateekjadhwani
committed
Merge pull request #11 from prateekjadhwani/player-events
Fixing player events
2 parents cf58bd2 + 10413fc commit bb4c09b

9 files changed

+92
-12
lines changed

‎Baseball_Project_-_10_-_Interview.mp3‎

19.9 MB
Binary file not shown.

‎Project_5am_-_01_-_June_8th_-There_is_another_waycourage.mp3‎

-10.5 MB
Binary file not shown.

‎bower.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "podcast-player",
3-
"version": "0.0.2",
3+
"version": "1.0.0",
44
"authors": [
55
"Prateek Jadhwani <[email protected]>",
66
"Andrew Bone <[email protected]>"

‎cover_290x290.jpg‎

55.5 KB
Loading

‎cover_290x290.png‎

-38.1 KB
Binary file not shown.

‎demo.html‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<!DOCTYPE html>
22
<html>
33
<head>
4+
<link href='http://fonts.googleapis.com/css?family=Roboto:100' rel='stylesheet' type='text/css'>
45
<link rel="import" href="podcast-player.html" />
56
<link rel="import" href="app-theme.html" />
67
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=no">
@@ -9,6 +10,7 @@
910
html, body {
1011
margin: 0;
1112
padding: 0;
13+
background: #e44d26;
1214
}
1315

1416
/* position and size of player */
@@ -23,9 +25,9 @@
2325
<podcast-player
2426
wavecolor="#ffffff"
2527
progresscolor="#CFD8DC"
26-
src="Project_5am_-_01_-_June_8th_-There_is_another_waycourage.mp3"
27-
name="June 8th -There is another way...(courage)"
28-
episode="12"
29-
coverart="cover_290x290.png"></podcast-player>
28+
src="Baseball_Project_-_10_-_Interview.mp3"
29+
name="Interview (by The Baseball Project)"
30+
episode="10"
31+
coverart="cover_290x290.jpg"></podcast-player>
3032
</body>
3133
</html>

‎podcast-player.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
height: 150px;
1616
background-color: var(--dark-primary-color);
1717
position: relative;
18+
font-family: 'Roboto', sans-serif;
1819
}
1920
neon-animated-pages {
2021
height: 150px;
@@ -93,6 +94,7 @@
9394
}
9495
setTimeout( function() {
9596
document.querySelector("#wavecontainer").style.opacity = 1;
97+
document.querySelector("#controls").style.opacity = 1;
9698
}, 1000);
9799
},
98100
goToDisplay : function(event) {

‎song-file-display.html‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -41,12 +41,14 @@
4141
white-space: nowrap;
4242
overflow: hidden;
4343
margin: 10px 0 0 0;
44+
font-weight: 100;
4445
}
4546
h5 {
4647
color: var(--light-primary-color);
4748
white-space: nowrap;
4849
overflow: hidden;
4950
margin: 0 0 10px 0;
51+
font-weight: 100;
5052
}
5153
</style>
5254
<template>
@@ -99,21 +101,22 @@ <h5 class="flex">Episode - <span>{{episode}}</span></h5>
99101
name: 'fade-in-animation',
100102
node: this.$.coverimage,
101103
timing: {
102-
delay: 1000
104+
delay: 750
103105
}
104106
}, {
105107
name: 'slide-from-left-animation',
106108
node: this.$.details,
107109
transformOrigin: "0 90%",
108110
timing: {
109-
delay: 1500,
110-
duration: 500
111+
delay: 1000,
112+
duration: 250
111113
}
112114
}],
113115
'exit': [{
114116
name: 'ripple-animation',
115117
id: 'ripple',
116-
fromPage: this
118+
fromPage: this,
119+
timing: {duration: 500}
117120
},{
118121
name: 'scale-down-animation',
119122
node: this.$.playbutton,

‎song-file-player.html‎

Lines changed: 76 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
<link rel="import" href="../paper-material/paper-material.html" />
22
<link rel="import" href="../paper-fab/paper-fab.html" />
33
<link rel="import" href="../paper-icon-button/paper-icon-button.html" />
4+
<link rel="import" href="../paper-button/paper-button.html" />
45
<link rel="import" href="../iron-icons/iron-icons.html" />
56
<link rel="import" href="../iron-icons/av-icons.html" />
67
<link rel="import" href="../neon-animation/neon-shared-element-animatable-behavior.html">
8+
<link rel="import" href="../paper-progress/paper-progress.html" />
79
<link rel="import" href="../neon-animation/neon-animated-pages.html" />
810
<link rel="import" href="../neon-animation/neon-animations.html" />
911

@@ -13,6 +15,14 @@
1315
width: 100%;
1416
height: 100%;
1517
}
18+
paper-progress {
19+
position: absolute;
20+
top: 1px;
21+
width: 100%;
22+
z-index: 5;
23+
--paper-progress-active-color: var(--text-primary-color);
24+
--paper-progress-container-color: transparent;
25+
}
1626
paper-material#container {
1727
height: 100%;
1828
background: var(--accent-color);
@@ -21,16 +31,51 @@
2131
opacity: 0;
2232
transition: opacity 0.5s;
2333
}
34+
#controls {
35+
text-align: center;
36+
opacity: 0;
37+
transition: opacity 1s;
38+
}
39+
paper-icon-button::shadow #icon {
40+
width: 30px;
41+
height: 30px;
42+
}
43+
paper-icon-button[toggles] {
44+
transition: background-color 0.3s;
45+
}
46+
paper-icon-button[toggles][active] {
47+
background-color: rgba(0, 0, 0, 0.25);
48+
}
49+
@media (min-width: 600px) {
50+
#container {
51+
display: block;
52+
}
53+
#wavecontainer {
54+
opacity: 0;
55+
width: 70%;
56+
display: inline-block;
57+
vertical-align: middle;
58+
margin: 25px 0;
59+
}
60+
#controls {
61+
opacity: 0;
62+
width: 29%;
63+
display: inline-block;
64+
vertical-align: middle;
65+
}
66+
}
2467
</style>
2568
<template>
69+
<paper-progress id="loadmeter" value="{{loadingval}}"></paper-progress>
2670
<paper-material id="container" elevation="0">
2771
<paper-material id="wavecontainer" elevation="0">
2872
</paper-material>
29-
<div id="controls">
30-
<paper-icon-button id='pausebutton' icon="av:pause" on-click="togglePlay"></paper-icon-button>
73+
<div id="controls" class="horizontal layout">
74+
<paper-icon-button class="flex" id='replaybutton' icon="av:replay-30" on-click="replay"></paper-icon-button>
75+
<paper-icon-button class="flex" id='pausebutton' icon="av:pause" on-click="togglePlay"></paper-icon-button>
76+
<paper-icon-button class="flex" id='mutebutton' icon="av:volume-off" on-click="mute" toggles></paper-icon-button>
3177
</div>
3278
</paper-material>
33-
3479
</template>
3580
</dom-module>
3681
<script>
@@ -60,6 +105,10 @@
60105
value: '#CFD8DC',
61106
notify: true
62107
},
108+
loadingval: {
109+
type: String,
110+
value: 0
111+
},
63112
sharedElements: {
64113
value: function() {
65114
return {
@@ -93,28 +142,52 @@
93142
},
94143
togglePlay: function() {
95144
this.$.wavecontainer.style.opacity = 0;
145+
this.$.controls.style.opacity = 0;
96146
this.wavesurfer.pause();
97147
this.fire('pause-click');
98148
},
99149
initWaveSurfer: function() {
100150
var self = this;
151+
this.$.controls.style.opacity = 0;
152+
101153
this.wavesurfer.init({
102154
container: this.$.wavecontainer,
103155
waveColor: this.wavecolor,
104156
progressColor: this.progresscolor, // --primary-background-color
105157
fillParent: true,
106158
height: 100
107159
});
160+
108161
this.wavesurfer.on('ready', function () {
109162
self.wavesurfer.play();
110163
});
111164
this.wavesurfer.load(this.src);
165+
166+
this.wavesurfer.on('finish', function () {
167+
self.togglePlay();
168+
});
169+
170+
this.wavesurfer.on('loading', function (e) {
171+
self.loadingval = e;
172+
if(e == 100) {
173+
self.$.controls.style.opacity = 1;
174+
self.$.loadmeter.style.display = "none";
175+
} else {
176+
self.$.controls.style.opacity = 0;
177+
}
178+
});
112179
},
113180
updateWavesurfer: function() {
114181
this.wavesurfer = Object.create(WaveSurfer);
115182
},
116183
play: function() {
117184
this.wavesurfer.play();
185+
},
186+
mute: function() {
187+
this.wavesurfer.toggleMute();
188+
},
189+
replay: function() {
190+
this.wavesurfer.skip(-30);
118191
}
119192
});
120193
})();

0 commit comments

Comments
 (0)