Skip to content

Commit ff6ab26

Browse files
decatesdecates
committed
Switched back to jPlayer, with custom display. Working nicely in Chrome but missing unit tests.
1 parent 7779ab4 commit ff6ab26

14 files changed

+186
-156
lines changed

‎.gitignore

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
_NCrunch*
2+
3+
#NuGet
4+
packages/
5+
6+
#ignore thumbnails created by windows
7+
Thumbs.db
8+
#Ignore files build by Visual Studio
9+
*.obj
10+
*.exe
11+
*.pdb
12+
*.user
13+
*.aps
14+
*.pch
15+
*.vspscc
16+
*_i.c
17+
*_p.c
18+
*.ncb
19+
*.suo
20+
*.tlb
21+
*.tlh
22+
*.bak
23+
*.cache
24+
*.ilk
25+
*.log
26+
[Bb]in
27+
[Dd]ebug*/
28+
*.lib
29+
*.sbr
30+
obj/
31+
[Rr]elease*/
32+
_ReSharper*/
33+
[Tt]est[Rr]esult*

‎DhammaTalks.csproj

+2-7
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,8 @@
8282
<Content Include="jplayer\skin\controls.jpg" />
8383
<Content Include="jplayer\skin\progress.png" />
8484
<Content Include="jplayer\skin\progress_sprite.jpg" />
85+
<Content Include="js\app\directives.js" />
86+
<Content Include="js\app\filters.js" />
8587
<Content Include="js\lib\angular-audio-player.js" />
8688
<Content Include="js\lib\angular-mocks.js" />
8789
<Content Include="js\lib\angular.min.js" />
@@ -103,7 +105,6 @@
103105
<Content Include="views\talk.html" />
104106
<Content Include="views\teacher-talks.html" />
105107
<Content Include="views\teachers.html" />
106-
<Content Include="Web.config" />
107108
</ItemGroup>
108109
<ItemGroup>
109110
<Compile Include="Properties\AssemblyInfo.cs" />
@@ -113,12 +114,6 @@
113114
<Content Include="fonts\glyphicons-halflings-regular.ttf" />
114115
<Content Include="fonts\glyphicons-halflings-regular.woff" />
115116
<Content Include="packages.config" />
116-
<None Include="Web.Debug.config">
117-
<DependentUpon>Web.config</DependentUpon>
118-
</None>
119-
<None Include="Web.Release.config">
120-
<DependentUpon>Web.config</DependentUpon>
121-
</None>
122117
</ItemGroup>
123118
<ItemGroup />
124119
<PropertyGroup>

‎Web.Debug.config

-30
This file was deleted.

‎Web.Release.config

-31
This file was deleted.

‎Web.config

-14
This file was deleted.

‎index.html

+23-30
Original file line numberDiff line numberDiff line change
@@ -4,48 +4,41 @@
44
<title></title>
55
<link href="css/default.css" rel="stylesheet" />
66
<link href="css/bootstrap.min.css" rel="stylesheet" />
7+
8+
<!-- jQuery is needed by jAudio player. Put it before Angular to avoid interference. -->
9+
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
10+
<script type="text/javascript" src="jplayer/jquery.jplayer.min.js"></script>
11+
712
<script src="js/lib/bootstrap.min.js"></script>
813
<script src="js/lib/angular.min.js"></script>
9-
<script src="js/lib/angular-audio-player.js"></script>
1014
<script src="js/app/services.js"></script>
1115
<script src="js/app/controllers.js"></script>
16+
<script src="js/app/directives.js"></script>
17+
<script src="js/app/filters.js"></script>
1218
<script src="js/app/app.js"></script>
13-
<script src="phonegap.js"></script> <!-- Use phonegap -->
14-
<!-- jQuery is needed by jAudio player -->
15-
<!--<link type="text/css" href="jplayer/skin/circle.player.css" rel="stylesheet" />
16-
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
17-
<script src="jplayer/jquery.transform2d.js"></script>
18-
<script src="jplayer/jquery.grab.js"></script>
19-
<script type="text/javascript" src="jplayer/jquery.jplayer.min.js"></script>
20-
<script src="jplayer/mod.csstransforms.min.js"></script>
21-
<script src="jplayer/circle.player.js"></script>-->
2219
</head>
23-
<body ng-app="dharmaTalksApp">
24-
<!-- The jPlayer div must not be hidden. Keep it at the root of the body element to avoid any such problems. -->
25-
<div id="jquery_jplayer_1" class="cp-jplayer"></div>
26-
27-
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
28-
<div class="container">
29-
<div class="navbar-header">
30-
<a class="btn btn-default navbar-btn" href="#/home"><span class="glyphicon glyphicon-home"></span></a>
20+
<body ng-app="dharmaTalksApp">
21+
<div id="jplayer" style="width: 0; height: 0;" dharma-jplayer></div>
22+
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
23+
<div class="container">
24+
<div class="navbar-header">
25+
<a class="btn btn-default navbar-btn" href="#/home"><span class="glyphicon glyphicon-home"></span></a>
26+
</div>
27+
<span class="navbar-brand" style="margin-left: 0px;">Dharma Talks</span>
28+
<div class="navbar-right" ng-controller="NowPlayingCtrl">
29+
<button type="button" class="btn btn-default navbar-btn" ng-disabled="!isPlaying" ng-click="goTo()">Now playing</button>
30+
</div>
3131
</div>
32-
<span class="navbar-brand" style="margin-left: 0px;">Dharma Talks</span>
33-
<!--<div class="navbar-right" ng-controller="NowPlayingCtrl">
34-
<button type="button" class="btn btn-default navbar-btn" ng-disabled="!isPlaying" ng-href="{{url}}">Now playing</button>
35-
</div>-->
36-
</div>
37-
</nav>
38-
39-
<div class="container" ng-view>
40-
</div>
41-
<a href="audio-test.html">Audio Test</a>
32+
</nav>
4233

34+
<div class="container" ng-view>
35+
</div>
4336

44-
<!--
37+
<!--
4538
<ol class="breadcrumb">
4639
<li><a href="#">Home</a></li>
4740
<li><a href="#">Library</a></li>
4841
<li class="active">Data</li>
4942
</ol>-->
50-
</body>
43+
</body>
5144
</html>

‎js/app/app.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
angular.module('dharmaTalksApp', ['dharmaTalksServices', 'audioPlayer'])
1+
angular.module('dharmaTalksApp', ['dharmaTalksServices', 'dharmaTalksDirectives', 'dharmaTalksFilters'])
22
.config(['$routeProvider', function ($routeProvider) {
33
$routeProvider.
44
when('/home', {

‎js/app/controllers.js

+55-6
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,15 @@
88
};
99
}
1010

11-
function NowPlayingCtrl($scope, NowPlayingModel) {
11+
function NowPlayingCtrl($scope, $location, NowPlayingModel) {
1212
NowPlayingModel.bindTo(function(model) {
1313
$scope.url = model.url;
1414
$scope.isPlaying = model.isPlaying;
1515
});
16+
17+
$scope.goTo = function() {
18+
$location.url(NowPlayingModel.getModel().url);
19+
};
1620
}
1721

1822
function HomeCtrl($scope) {
@@ -25,17 +29,62 @@ function RecentTalksCtrl($scope, RecentTalks) {
2529
});
2630
}
2731

28-
function TalkCtrl($scope, $routeParams, TalkService) {
32+
function TalkCtrl($scope, $routeParams, $location, TalkService, NowPlayingModel) {
33+
$scope.safeApply = function (fn) {
34+
var phase = this.$root.$$phase;
35+
if (phase == '$apply' || phase == '$digest') {
36+
if (fn && (typeof (fn) === 'function')) {
37+
fn($scope);
38+
}
39+
} else {
40+
this.$apply(fn);
41+
}
42+
};
43+
44+
$scope.player = NowPlayingModel.player;
2945

3046
// Get the talk details
3147
var talk = TalkService.getTalk($routeParams.teacherId, $routeParams.talkId);
3248
$scope.talk = talk;
3349
$scope.isMediaLoaded = false;
3450

35-
// Load the audio file into the player, ready to play
36-
$scope.loadMedia = function() {
37-
$scope.audioPlayer.load({ src: talk.mediaUrl, type: 'audio/mp3' }, true);
51+
// Load and play the audio
52+
$scope.loadMedia = function(reset) {
53+
$scope.player.unbind(".TalkCtrl"); // Unbind any previous event listener
54+
$scope.player.bind($.jPlayer.event.timeupdate + ".TalkCtrl", function (event) {
55+
$scope.safeApply(function (scope) {
56+
scope.playerData = event.jPlayer;
57+
scope.currentTime = event.jPlayer.status.currentTime;
58+
});
59+
});
60+
61+
if (reset) {
62+
$scope.player.jPlayer('setMedia', { mp3: $scope.talk.mediaUrl });
63+
$scope.player.jPlayer('play');
64+
65+
// Record the fact that we're playing with the shared service
66+
NowPlayingModel.play($location.url());
67+
}
68+
3869
$scope.isMediaLoaded = true;
39-
//$scope.audioPlayer.play();
70+
$scope.isPlaying = true;
71+
};
72+
73+
$scope.playPause = function() {
74+
if ($scope.isPlaying) {
75+
$scope.player.jPlayer('pause');
76+
} else {
77+
$scope.player.jPlayer('play');
78+
NowPlayingModel.play($location.url());
79+
}
80+
81+
$scope.isPlaying = !$scope.isPlaying;
4082
};
83+
84+
85+
// Check if this talk is already being played
86+
if (NowPlayingModel.getModel().url == $location.url()) {
87+
// Already playing this one...
88+
$scope.loadMedia(false);
89+
}
4190
}

‎js/app/directives.js

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
angular.module('dharmaTalksDirectives', ['dharmaTalksServices'])
2+
.directive('dharmaJplayer', function (NowPlayingModel) {
3+
4+
function link(scope, element, attrs) {
5+
// TODO: Ensure we're only added to a div
6+
7+
// Get the ID for jPlayer
8+
var el = $("#" + attrs.id);
9+
10+
// Initialize jPlayer on the scope
11+
el.jPlayer({
12+
ready: function () {
13+
//$(this).jPlayer("setMedia", {
14+
// m4a: "http://www.jplayer.org/audio/m4a/Miaow-07-Bubble.m4a",
15+
// oga: "http://www.jplayer.org/audio/ogg/Miaow-07-Bubble.ogg"
16+
//});
17+
},
18+
swfPath: "../jplayer"
19+
});
20+
21+
// Clean up after ourselves
22+
//element.on('$destroy', function () {
23+
// el.jPlayer("destroy");
24+
//});
25+
26+
// Put the jPlayer function on the shared service model
27+
NowPlayingModel.player = el;
28+
}
29+
30+
return {
31+
link: link
32+
};
33+
});

‎js/app/filters.js

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
angular.module('dharmaTalksFilters', [])
2+
.filter('secondsToSpan', function() {
3+
return function(inputSeconds) {
4+
if (typeof inputSeconds !== "number") {
5+
return "";
6+
}
7+
8+
var date = new Date(inputSeconds * 1000);
9+
var hh = date.getUTCHours();
10+
var mm = date.getUTCMinutes();
11+
var ss = date.getSeconds();
12+
// This line gives you 12-hour (not 24) time
13+
if (hh > 12) { hh = hh - 12; }
14+
// These lines ensure you have two-digits
15+
if (hh < 10) { hh = "0" + hh; }
16+
if (mm < 10) { mm = "0" + mm; }
17+
if (ss < 10) { ss = "0" + ss; }
18+
// This formats your string to HH:MM:SS
19+
var t = hh + ":" + mm + ":" + ss;
20+
return t;
21+
};
22+
});

‎js/app/services.js

+9-3
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,8 @@
1717
self.callbacks.push(callback);
1818
callback(self.model);
1919
};
20-
21-
return {
20+
21+
var service = {
2222
play: function(url) {
2323
self.model.url = url;
2424
self.model.isPlaying = true;
@@ -31,8 +31,14 @@
3131
},
3232
bindTo: function(callback) {
3333
self.addCallback(callback);
34-
}
34+
},
35+
getModel: function() {
36+
return self.model;
37+
},
38+
player: null
3539
};
40+
41+
return service;
3642
})
3743
.service('XmlParser', function() {
3844
var parseXml;

‎js/lib/zepto.min.js

+2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)