Permalink
Browse files

Merge branch 'master' of github.com:ericmatthys/plex-web-client

  • Loading branch information...
2 parents 18df423 + 9499c74 commit 7e3922417b6f20cc998075881323b88a5a3b1142 @ericmatthys ericmatthys committed May 9, 2012
View
7 app/css/plex.css
@@ -7733,7 +7733,7 @@ h1.plex-icon {
}
#login-form input[type=text],
#login-form input[type=password] {
- padding: 4px 15px;
+ padding: 18px 15px 15px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
@@ -7743,7 +7743,7 @@ h1.plex-icon {
-ms-box-sizing: border-box;
box-sizing: border-box;
height: 50px;
- line-height: 50px;
+ line-height: 24px;
font-size: 24px;
}
#login-form .login-actions {
@@ -8713,7 +8713,8 @@ ul.nav .dropdown-menu:after {
padding: 10px 8px 0;
font-size: 14px;
}
-.now-playing-label {
+.now-playing-label,
+.next-label {
margin-right: 4px;
opacity: 0.5;
filter: alpha(opacity=50);
View
19 app/js/plex/control/commands/GetAlbumsCommand.js
@@ -15,12 +15,21 @@ define(
function onFetchAlbumsSuccess(response) {
cachedArtist.set('children', response);
+ var count = 0;
var pending = 0;
+ var unsortedTracks = [];
+ var tracks = new TrackCollection();
+
+ // Keep a collection of all the tracks on the artist model
+ cachedArtist.set('tracks', tracks);
response.each(function (album) {
if (album.get('leafCount') > 0) {
pending++;
+ // We need to sort tracks in the order they were requested
+ var sort = count;
+
var children = new MediaItemCollection({
url: album.get('key')
});
@@ -30,17 +39,25 @@ define(
pending--;
album.set('children', response);
+ unsortedTracks[sort] = response;
// Hide the loading indicator
dispatcher.trigger('command:ShowLoading', false);
if (pending === 0) {
+ // Now that all the tracks have been fetched, insert them in sorted order
+ for (var i = 0; i < unsortedTracks.length; i++) {
+ tracks.add(unsortedTracks[i].models);
+ }
+
// Notify that albums have loaded
dispatcher.trigger('response:GetAlbums', true);
}
},
error: onError
- })
+ });
+
+ count++;
}
});
View
16 app/js/plex/control/commands/GetSeasonsCommand.js
@@ -15,7 +15,9 @@ define(
function onFetchSeasonsSuccess(response) {
cachedShow.set('children', response);
+ var count = 0;
var pending = 0;
+ var unsortedEpisodes = [];
var episodes = new VideoCollection();
// Keep a collection of all the episodes on the show model
@@ -33,6 +35,9 @@ define(
if (season.get('leafCount') > 0) {
pending++;
+ // We need to sort episodes in the order they were requested
+ var sort = count;
+
var children = new MediaItemCollection({
url: season.get('key')
});
@@ -42,18 +47,25 @@ define(
pending--;
season.set('children', response);
- episodes.add(response.models);
+ unsortedEpisodes[sort] = response;
// Hide the loading indicator
dispatcher.trigger('command:ShowLoading', false);
if (pending === 0) {
+ // Now that all the episodes have been fetched, insert them in sorted order
+ for (var i = 0; i < unsortedEpisodes.length; i++) {
+ episodes.add(unsortedEpisodes[i].models);
+ }
+
// Notify that seasons have loaded
dispatcher.trigger('response:GetSeasons', true);
}
},
error: onError
- })
+ });
+
+ count++;
}
});
View
3 app/js/plex/control/utils/Transcoder.js
@@ -69,7 +69,8 @@ define(
headers: {
'X-Plex-Proxy-Host': server.get('host'),
- 'X-Plex-Proxy-Port': server.get('port')
+ 'X-Plex-Proxy-Port': server.get('port'),
+ 'Accept-Encoding': 'gzip'
},
success: function (response) {
View
15 app/js/plex/view/AppView.js
@@ -32,6 +32,7 @@ define(
this.model.on('change:showHeader', this.onShowHeaderChange, this);
dispatcher.on('play:music', this.onPlayMusic, this);
+ dispatcher.on('stop:music', this.onStopMusic, this);
// Listen for changing and destroying subviews
this.model.on('change:view', this.onViewChange, this);
@@ -77,19 +78,27 @@ define(
}
},
- onPlayMusic: function (model) {
+ onPlayMusic: function (artist, track) {
this.$el.addClass('music-player-active');
if (typeof(this.musicPlayerView) === 'undefined') {
- this.musicPlayerView = new MusicPlayerView({ model: model });
+ this.musicPlayerView = new MusicPlayerView({ collection: artist.get('tracks'), model: track });
this.$el.prepend(this.musicPlayerView.render().el);
} else {
- this.musicPlayerView.model = model;
+ this.musicPlayerView.model = track;
}
this.musicPlayerView.play();
},
+ onStopMusic: function () {
+ this.$el.removeClass('music-player-active');
+
+ if (typeof(this.musicPlayerView) !== 'undefined') {
+ this.musicPlayerView.destroy();
+ }
+ },
+
onViewChange: function (model, view) {
// Destroy previous views
for (var i = this.views.length - 1; i >= 0; i--) {
View
2 app/js/plex/view/lists/media/items/TrackListItem.js
@@ -30,7 +30,7 @@ define(
onClick: function (event) {
event.preventDefault();
- dispatcher.trigger('play:music', this.model);
+ dispatcher.trigger('play:music', appModel.get('item'), this.model);
}
});
View
47 app/js/plex/view/players/MusicPlayerView.js
@@ -1,6 +1,7 @@
define(
[
'text!templates/players/MusicPlayerView.tpl',
+ 'plex/control/Dispatcher',
'plex/control/utils/Transcoder',
'plex/model/AppModel',
'plex/view/BaseView',
@@ -11,7 +12,7 @@ define(
'use!mediaelement'
],
- function (template, Transcoder, appModel, BaseView) {
+ function (template, dispatcher, Transcoder, appModel, BaseView) {
var tpl = Handlebars.compile(template);
@@ -20,39 +21,73 @@ define(
className: 'animated slideDown',
player: undefined,
+ nextTrack: undefined,
+
+ initialize: function () {
+ _.bindAll(this, 'onEnded');
+
+ var currentTrack = this.collection.get(this.model.id);
+ var i = this.collection.indexOf(currentTrack);
+
+ if (i + 1 < this.collection.length) {
+ this.nextTrack = this.collection.at(i + 1);
+ } else {
+ this.nextTrack = undefined;
+ }
+ },
render: function () {
- this.$el.html(tpl(this.model.toJSON()));
+ var data = {
+ currentTrack: this.model.toJSON()
+ };
+
+ if (typeof(this.nextTrack) !== 'undefined') {
+ data.nextTrack = this.nextTrack.toJSON();
+ }
+
+ this.$el.html(tpl(data));
return this;
},
play: function () {
var file = Transcoder.file(this.model.get('Media').Part.key);
- console.log(file);
+ console.log('now playing ' + file);
this.$('audio').attr('src', file);
this.$('.now-playing-title').html(this.model.get('title'));
+ if (typeof(this.nextTrack) !== 'undefined') {
+ this.$('.next-title').html(this.nextTrack.get('title'));
+ }
+
if (typeof(this.player) === 'undefined') {
this.player = new MediaElementPlayer('#music-player audio', {
plugins: ['flash'],
pluginPath: 'swf/',
flashName: 'flashmediaelement.swf',
success: function (player, element) {
- console.log('success!');
- player.addEventListener('ended', this.onEnded, false);
+ console.log('loaded media element player!');
}
});
+
+ this.player.$media.on('ended', this.onEnded);
}
this.player.load();
this.player.play();
},
onEnded: function (event) {
- console.log('ended!');
+ if (typeof(this.nextTrack) !== 'undefined') {
+ this.model = this.nextTrack;
+
+ this.initialize();
+ this.play();
+ } else {
+ dispatcher.trigger('stop:music');
+ }
}
});
View
4 app/less/login.less
@@ -15,10 +15,10 @@ h1.plex-icon {
.clearfix();
input[type=text], input[type=password] {
- padding: 4px 15px;
+ padding: 18px 15px 15px;
.box-sizing(border-box);
height: 50px;
- line-height: 50px;
+ line-height: 24px;
font-size: 24px;
}
View
3 app/less/player.less
@@ -15,7 +15,8 @@
font-size: 14px;
}
-.now-playing-label {
+.now-playing-label,
+.next-label {
margin-right: 4px;
.opacity(50);
}
View
24 app/templates/MediaView.tpl
@@ -1,15 +1,15 @@
<div class="sidebar">
<div class="sidebar-options">
<div class="btn-group" data-toggle="buttons-radio">
- <a class="poster-view-btn btn btn-inverse {{eq view "poster" "selected active"}}">
+ <a class="poster-view-btn btn btn-inverse {{eq view "poster" "selected active" ""}}">
<i class="icon-th-large icon-white"></i>
</a>
- <a class="expanded-view-btn btn btn-inverse {{eq view "expanded" "selected active"}}">
+ <a class="expanded-view-btn btn btn-inverse {{eq view "expanded" "selected active" ""}}">
<i class="icon-th-list icon-white"></i>
</a>
- <a class="compact-view-btn btn btn-inverse {{eq view "compact" "selected active"}}">
+ <a class="compact-view-btn btn btn-inverse {{eq view "compact" "selected active" ""}}">
<i class="icon-align-justify icon-white"></i>
</a>
</div>
@@ -19,23 +19,23 @@
</form>
<ul class="sidebar-filter-list">
- <li class="filter all-filter {{eq filter "all" "selected"}}"><a href="#">All</a></li>
+ <li class="filter all-filter {{eq filter "all" "selected" ""}}"><a href="#">All</a></li>
{{#if_eq type "movies"}}
- <li class="filter added-filter {{eq filter "added" "selected"}}"><a href="#">Recently Added</a></li>
- <li class="filter released-filter {{eq filter "released" "selected"}}"><a href="#">Recently Released</a></li>
- <li class="filter rated-filter {{eq filter "rated" "selected"}}"><a href="#">Highest Rated</a></li>
- <li class="filter unwatched-filter {{eq filter "unwatched" "selected"}}"><a href="#">Unwatched</a></li>
- <li class="filter watched-filter {{eq filter "watched" "selected"}}"><a href="#">Watched</a></li>
+ <li class="filter added-filter {{eq ../filter "added" "selected" ""}}"><a href="#">Recently Added</a></li>
+ <li class="filter released-filter {{eq ../filter "released" "selected" ""}}"><a href="#">Recently Released</a></li>
+ <li class="filter rated-filter {{eq ../filter "rated" "selected" ""}}"><a href="#">Highest Rated</a></li>
+ <li class="filter unwatched-filter {{eq ../filter "unwatched" "selected" ""}}"><a href="#">Unwatched</a></li>
+ <li class="filter watched-filter {{eq ../filter "watched" "selected" ""}}"><a href="#">Watched</a></li>
{{/if_eq}}
{{#if_eq type "shows"}}
- <li class="filter added-filter {{eq filter "added" "selected"}}"><a href="#">Recently Added</a></li>
- <li class="filter rated-filter {{eq filter "rated" "selected"}}"><a href="#">Highest Rated</a></li>
+ <li class="filter added-filter {{eq ../filter "added" "selected" ""}}"><a href="#">Recently Added</a></li>
+ <li class="filter rated-filter {{eq ../filter "rated" "selected" ""}}"><a href="#">Highest Rated</a></li>
{{/if_eq}}
{{#if_eq type "music"}}
- <li class="filter added-filter {{eq filter "added" "selected"}}"><a href="#">Recently Added</a></li>
+ <li class="filter added-filter {{eq ../filter "added" "selected" ""}}"><a href="#">Recently Added</a></li>
{{/if_eq}}
</ul>
</div>
View
6 app/templates/QueueView.tpl
@@ -1,7 +1,7 @@
<ul class="filter-list">
- <li class="filter all-filter {{eq view "all" "selected"}}"><a href="#">All</a></li>
- <li class="filter unwatched-filter {{eq view "unwatched" "selected"}}"><a href="#">{{unwatched}} Unwatched</a></li>
- <li class="filter watched-filter {{eq view "watched" "selected"}}"><a href="#">{{watched}} Watched</a></li>
+ <li class="filter all-filter {{eq view "all" "selected" ""}}"><a href="#">All</a></li>
+ <li class="filter unwatched-filter {{eq view "unwatched" "selected" ""}}"><a href="#">{{unwatched}} Unwatched</a></li>
+ <li class="filter watched-filter {{eq view "watched" "selected" ""}}"><a href="#">{{watched}} Watched</a></li>
</ul>
<h1>Queue</h1>
View
9 app/templates/players/MusicPlayerView.tpl
@@ -1,6 +1,13 @@
<div class="now-playing">
+ {{#if nextTrack}}
+ <div class="pull-right">
+ <span class="next-label">Next</span>
+ <span class="next-title">{{nextTrack.title}}</span>
+ </div>
+ {{/if}}
+
<span class="now-playing-label"><i class="icon-music icon-white"></i> Now Playing</span>
- <span class="now-playing-title">{{title}}</span>
+ <span class="now-playing-title">{{currentTrack.title}}</span>
</div>
<audio width="100%" controls></audio>

0 comments on commit 7e39224

Please sign in to comment.