Skip to content

Commit

Permalink
Resolving #330
Browse files Browse the repository at this point in the history
  • Loading branch information
MeoMix committed May 7, 2015
1 parent c50b915 commit c9138d5
Show file tree
Hide file tree
Showing 11 changed files with 147 additions and 66 deletions.
5 changes: 4 additions & 1 deletion Streamus Chrome Extension.csproj
Original file line number Diff line number Diff line change
Expand Up @@ -97,6 +97,7 @@
<Content Include="src\template\icon\deleteIcon_18.svg" />
<Content Include="src\template\icon\menuIcon_24.svg" />
<Content Include="src\template\icon\extraActionsIcon_18.svg" />
<Content Include="src\template\icon\pauseIcon_18.svg" />
<Content Include="src\template\icon\settingsIcon_24.svg" />
<Content Include="src\template\icon\pauseIcon_30.svg" />
<Content Include="src\template\icon\playIcon_18.svg" />
Expand Down Expand Up @@ -281,7 +282,7 @@
<Content Include="src\js\foreground\view\dialog\updateStreamusDialogView.js" />
<Content Include="src\js\foreground\view\listItemButton\saveSongButtonView.js" />
<Content Include="src\js\foreground\view\appBar\playlistTitleView.js" />
<Content Include="src\js\foreground\view\listItemButton\playSongButtonView.js" />
<Content Include="src\js\foreground\view\listItemButton\playPauseSongButtonView.js" />
<Content Include="src\js\foreground\view\playlist\playlistsAreaView.js" />
<Content Include="src\js\foreground\view\playlist\playlistView.js" />
<Content Include="src\js\foreground\view\contextMenu\contextMenuView.js" />
Expand Down Expand Up @@ -377,6 +378,7 @@
<Content Include="src\template\leftPane\playlistItems.html" />
<Content Include="src\template\listItemButton\addListItemButton.html" />
<Content Include="src\template\listItemButton\extraActionsListItemButton.html" />
<Content Include="src\template\listItemButton\playPauseSongButton.html" />
<Content Include="src\template\playlist\playlists.html" />
<Content Include="src\template\dialog\browserSettings.html" />
<Content Include="src\template\dialog\exportPlaylist.html" />
Expand Down Expand Up @@ -457,6 +459,7 @@
<Content Include="src\_locales\cs\messages.json" />
<Content Include="src\_locales\ko\messages.json" />
<Content Include="src\_locales\ro\messages.json" />
<Content Include="src\_locales\pt_BR\messages.json" />
</ItemGroup>
<ItemGroup>
<Content Include="src\manifest.json" />
Expand Down
11 changes: 11 additions & 0 deletions src/js/background/collection/streamItems.js
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,17 @@
return this.findWhere({ active: true });
},

getActiveSongId: function() {
var activeItem = this.getActiveItem();
var activeSongId = undefined;

if (!_.isUndefined(activeItem)) {
activeSongId = activeItem.get('song').get('id');
}

return activeSongId;
},

notPlayedRecently: function() {
return this.where({ playedRecently: false });
},
Expand Down
7 changes: 7 additions & 0 deletions src/js/background/model/player.js
Original file line number Diff line number Diff line change
Expand Up @@ -200,6 +200,13 @@ define(function(require) {
this.activateSong(loadedSong, this.get('currentTime'));
}
},

isPausable: function() {
var state = this.get('state');
var isPausable = state === PlayerState.Playing || state === PlayerState.Buffering;

return isPausable;
},

// Ensure that the initial state of the player properly reflects the state of its APIs
_ensureInitialState: function() {
Expand Down
4 changes: 2 additions & 2 deletions src/js/foreground/view/leftPane/playlistItemView.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
var SpinnerView = require('foreground/view/element/spinnerView');
var AddSongButtonView = require('foreground/view/listItemButton/addSongButtonView');
var DeleteSongButtonView = require('foreground/view/listItemButton/deleteSongButtonView');
var PlaySongButtonView = require('foreground/view/listItemButton/playSongButtonView');
var PlayPauseSongButtonView = require('foreground/view/listItemButton/playPauseSongButtonView');
var PlaylistItemTemplate = require('text!template/leftPane/playlistItem.html');
var Tooltip = require('foreground/view/behavior/tooltip');

Expand All @@ -31,7 +31,7 @@
}
}),

buttonViews: [PlaySongButtonView, AddSongButtonView, DeleteSongButtonView],
buttonViews: [PlayPauseSongButtonView, AddSongButtonView, DeleteSongButtonView],

streamItems: null,
player: null,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
initialize: function() {
// Debounced to defend against accidental/spam clicking. Bound in initialize because
// the debounce timer will be shared between all ListItemButtonViews if bound before initialize.
this._debounceOnClickAction = _.debounce(this._doOnClickAction.bind(this), 1000, true);
this._debounceOnClickAction = _.debounce(this._doOnClickAction.bind(this), 100, true);
},

// TODO: I actually do need to have these bubble up because global events don't fire.
Expand Down
107 changes: 107 additions & 0 deletions src/js/foreground/view/listItemButton/playPauseSongButtonView.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,107 @@
define(function(require) {
'use strict';

var ListItemButtonView = require('foreground/view/listItemButton/listItemButtonView');
var PlayPauseSongButtonTemplate = require('text!template/listItemButton/playPauseSongButton.html');
var PlayIconTemplate = require('text!template/icon/playIcon_18.svg');
var PauseIconTemplate = require('text!template/icon/pauseIcon_18.svg');
var PlayerState = require('common/enum/playerState');

var PlayPauseSongButtonView = ListItemButtonView.extend({
template: _.template(PlayPauseSongButtonTemplate),
templateHelpers: {
playIcon: _.template(PlayIconTemplate)(),
pauseIcon: _.template(PauseIconTemplate)()
},

attributes: {
title: chrome.i18n.getMessage('play')
},

ui: function() {
return {
playIcon: '.playIcon',
pauseIcon: '.pauseIcon'
};
},

streamItems: null,
player: null,

initialize: function() {
this.streamItems = Streamus.backgroundPage.stream.get('items');
this.player = Streamus.backgroundPage.player;

this.listenTo(this.player, 'change:state', this._onPlayerChangeState);
this.listenTo(this.streamItems, 'change:active', this._onStreamItemsChangeActive);

ListItemButtonView.prototype.initialize.apply(this, arguments);
},

onRender: function() {
this._setState();
},

doOnClickAction: function() {
var isPausable = this._isPausable();

if (isPausable) {
this.player.pause();
} else {
this._playSong();
}
},

_onPlayerChangeState: function() {
this._setState();
},

_onStreamItemsChangeActive: function() {
this._setState();
},

_setState: function() {
var isPausable = this._isPausable();

// TODO: There's a difference between buffering-->play and buffering-->paused. Don't want to change button when buffering-->paused. How to tell the difference?
this.ui.pauseIcon.toggleClass('is-hidden', !isPausable);
this.ui.playIcon.toggleClass('is-hidden', isPausable);
},

_isPausable: function() {
var activeSongId = this.streamItems.getActiveSongId();
// The pause icon is visible only if the player is playing/buffering and the song is this model's song.
var songId = this.model.get('song').get('id');
var isPlayerPausable = this.player.isPausable();
var isPausable = activeSongId === songId && isPlayerPausable;

return isPausable;
},

_playSong: function() {
var song = this.model.get('song');

// If there's only one song to be played - check if it's already in the stream.
var streamItem = this.streamItems.getBySong(song);

if (_.isUndefined(streamItem)) {
this.streamItems.addSongs(song, {
playOnAdd: true
});
} else {
this._playStreamItem(streamItem);
}
},

_playStreamItem: function(streamItem) {
if (streamItem.get('active')) {
this.player.play();
} else {
this.player.set('playOnActivate', true);
streamItem.save({ active: true });
}
}
});

return PlayPauseSongButtonView;
});
58 changes: 0 additions & 58 deletions src/js/foreground/view/listItemButton/playSongButtonView.js

This file was deleted.

4 changes: 2 additions & 2 deletions src/js/foreground/view/search/searchResultView.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,15 @@
var ListItemView = require('foreground/view/listItemView');
var ListItemMultiSelect = require('foreground/view/behavior/itemViewMultiSelect');
var AddSongButtonView = require('foreground/view/listItemButton/addSongButtonView');
var PlaySongButtonView = require('foreground/view/listItemButton/playSongButtonView');
var PlayPauseSongButtonView = require('foreground/view/listItemButton/playPauseSongButtonView');
var SaveSongButtonView = require('foreground/view/listItemButton/saveSongButtonView');
var SearchResultTemplate = require('text!template/search/searchResult.html');

var SearchResultView = ListItemView.extend({
className: ListItemView.prototype.className + ' search-result listItem--medium listItem--hasButtons listItem--selectable',
template: _.template(SearchResultTemplate),

buttonViews: [PlaySongButtonView, AddSongButtonView, SaveSongButtonView],
buttonViews: [PlayPauseSongButtonView, AddSongButtonView, SaveSongButtonView],

events: _.extend({}, ListItemView.prototype.events, {
'dblclick': '_onDblClick'
Expand Down
4 changes: 2 additions & 2 deletions src/js/foreground/view/stream/streamItemView.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
var ListItemView = require('foreground/view/listItemView');
var ListItemMultiSelect = require('foreground/view/behavior/itemViewMultiSelect');
var DeleteSongButtonView = require('foreground/view/listItemButton/deleteSongButtonView');
var PlaySongButtonView = require('foreground/view/listItemButton/playSongButtonView');
var PlayPauseSongButtonView = require('foreground/view/listItemButton/playPauseSongButtonView');
var SaveSongButtonView = require('foreground/view/listItemButton/saveSongButtonView');
var ExtraActionsButtonView = require('foreground/view/listItemButton/extraActionsButtonView');
var StreamItemTemplate = require('text!template/stream/streamItem.html');
Expand All @@ -30,7 +30,7 @@
}
}),

buttonViews: [PlaySongButtonView, SaveSongButtonView, DeleteSongButtonView],
buttonViews: [PlayPauseSongButtonView, SaveSongButtonView, DeleteSongButtonView],

player: null,
playPauseButton: null,
Expand Down
4 changes: 4 additions & 0 deletions src/template/icon/pauseIcon_18.svg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
7 changes: 7 additions & 0 deletions src/template/listItemButton/playPauseSongButton.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
<span class="pauseIcon">
<%= pauseIcon %>
</span>

<span class="playIcon">
<%= playIcon %>
</span>

0 comments on commit c9138d5

Please sign in to comment.