Skip to content

Commit

Permalink
Merge pull request rdubigny#6 from flyingrub/development
Browse files Browse the repository at this point in the history 
New Features : Shuffle & Repeat
  • Loading branch information
@m4dz
m4dz committed Mar 22, 2016
2 parents 34c2f50 + ca32a2d commit 451ea7d
Show file tree
Hide file tree
Showing 13 changed files with 274 additions and 55 deletions.
1 change: 1 addition & 0 deletions app/assets/icons/mute-sm.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
19 changes: 18 additions & 1 deletion app/collections/tracks.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,20 @@ const Tracks = Backbone.Collection.extend({
'reset:UpNext',
this.resetUpNext
);
this.listenTo(
application.appState,
'change:shuffle',
this.shuffleUpNext
);
}
},

// UpNext : shuffle
shuffleUpNext(appState, shuffle) {
if (shuffle) {
this.reset(this.shuffle(), {silent:true});
}
this.sort();
},

// UpNext : reset
Expand All @@ -39,7 +52,11 @@ const Tracks = Backbone.Collection.extend({
},

comparator(model) {
return model.get('metas').title;
if (this.type == 'upNext' && application.appState.get('shuffle')) {
return undefined;
} else {
return model.get('metas').title;
}
},

sync(method, model, options) {
Expand Down
7 changes: 7 additions & 0 deletions app/initialize.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,13 @@ function initLocale() {
window.t = polyglot.t.bind(polyglot)
}

$(document).keydown(function(e) {
let isScrollKey = [32, 37, 38, 39, 40].indexOf(e.which) > -1;
if (isScrollKey && e.target == document.body) {
e.preventDefault(); // prevent the scroll with keyboard
}
});

document.addEventListener('DOMContentLoaded', function () {
initLocale();
application.start();
Expand Down
4 changes: 2 additions & 2 deletions app/libs/file.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ function getAllTracksFileId(musicFiles) {
function deleteTrack(allTracks, musicFilesFileId) {
for (let i = 0; i < allTracks.length; i++) {
let t = allTracks[i];
if (musicFilesFileId.indexOf(t.get('ressource').fileID) <= -1) {
if (!_.includes(musicFilesFileId, t.get('ressource').fileID)) {
t.destroy({ success: () => {
application.allTracks.get('tracks').remove(t);
}});
Expand All @@ -64,7 +64,7 @@ function saveTrack(musicFiles, tracksFileId) {
}
});

if (tracksFileId.indexOf(fileid) <= -1) { // does not contains fileid
if (!_.includes(tracksFileId, fileid)) { // does not contains fileid
application.allTracks.get('tracks').create(t);
}
}
Expand Down
4 changes: 4 additions & 0 deletions app/models/appState.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,10 @@ const AppState = Backbone.Model.extend({
defaults: {
currentTrack: '',
currentPlaylist: '',
shuffle: false,
repeat: 'false', // can be 'false' / 'track' / 'playlist'
currentVolume: 0.5,
mute: false
},

sync(method, model, options) {
Expand Down
3 changes: 1 addition & 2 deletions app/models/track.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,8 +60,7 @@ const Track = Backbone.Model.extend({
let id = this.get('ressource').fileID;
cozysdk.getFileURL(id, 'file', (err, res) => {
if (res) {
let url = 'http://' + res.split('@')[1]; // to delete in prod
callback(url);
callback(res);
}
})
break;
Expand Down
112 changes: 75 additions & 37 deletions app/styles/content.styl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,45 +5,47 @@ div[role='contentinfo']
overflow: auto
margin-bottom: 71px;

h3
font-size: 24px
line-height: 0.8
height: 31px
color: $text-dark
display: inline-block

em
div[role='complementary']

h3
font-size: 24px
line-height: 0.8
height: 31px
color: $text-dark
display: inline-block

em
color: $text-light

button
padding: 0px 12px
height: 32px
float: right
display: inline-block
cursor: pointer
font-family: 'Source Sans Pro'
font-weight: bold
color: $text-light
background-color: $background-dark
border-radius: 2px
position: relative
padding-left: 32px
text-transform: uppercase
font-size: 16px

button
padding: 0px 12px
height: 32px
float: right
display: inline-block
cursor: pointer
font-family: 'Source Sans Pro'
font-weight: bold
color: $text-light
background-color: $background-dark
border-radius: 2px
position: relative
padding-left: 32px
text-transform: uppercase
font-size: 16px

svg
position: absolute
height: 20px
left: 9px
width: 20px
top: 6px

path
fill: #696d78
stroke: 2px

button:active
padding-top: 1px
svg
position: absolute
height: 20px
left: 9px
width: 20px
top: 6px

path
fill: #696d78
stroke: 2px

button:active
padding-top: 1px

table
width: 100%
Expand Down Expand Up @@ -84,6 +86,42 @@ div[role='contentinfo']
td
white-space: nowrap
overflow: hidden
position: relative

.all
#delete-from-upnext
display: none

.upNext
#add-to-upnext
display: none

.actions
height: 41px
visibility: hidden
position: absolute
right: 18px
top: 0px
button
height: 100%
width: 22px
svg
height: 20px
width: 20px
path
fill: #696d78

.help
position: absolute
visibility: hidden

button:hover
.help
visibility: visibile

tr:hover
.actions
visibility: visible

tr:hover
background-color: $background-dark
8 changes: 8 additions & 0 deletions app/styles/player.styl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -119,6 +119,14 @@
path
fill: #92a0b2

.active
path
fill: #f14a53

#repeat-one-sm
path
fill: #f14a53

#broadcast
margin-left: 100px
path
Expand Down
117 changes: 109 additions & 8 deletions app/views/player.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,15 +16,21 @@ const Player = Mn.LayoutView.extend({
volume: '#volume',
volumeBar: '#volume-bar',
playButton: '#play',
trackname: '#trackname'
trackname: '#trackname',
shuffle: '#shuffle',
repeat: '#repeat',
speaker: '#speaker'
},

events: {
'click #prev': 'prev',
'click #play': 'toggle',
'click #next': 'next',
'click @ui.progressBar': 'skip',
'click @ui.volumeBar': 'changeVol'
'click @ui.volumeBar': 'changeVol',
'click @ui.shuffle': 'toggleShuffle',
'click @ui.repeat': 'toggleRepeat',
'click @ui.speaker': 'toggleVolume'
},

initialize() {
Expand All @@ -35,6 +41,29 @@ const Player = Mn.LayoutView.extend({
this.load(currentTrack);
}
});
$(document).keyup((e) => {
e.preventDefault();
switch (e.key) {
case ' ':
this.toggle();
break;
case 'ArrowRight':
this.next();
break;
case 'ArrowLeft':
this.prev();
break;
case 'ArrowUp':
// increaseVol
break;
case 'ArrowDown':
// decreaseVol
break;
case 'm':
// mute
break;
}
});
},

onRender() {
Expand Down Expand Up @@ -92,23 +121,94 @@ const Player = Mn.LayoutView.extend({
prev() {
let upNext = application.upNext.get('tracks');
let currentTrack = application.appState.get('currentTrack');
let index = upNext.indexOf(currentTrack);
let prev = upNext.at(index - 1)
if (prev) {
let index = upNext.indexOf(currentTrack) - 1;
let prev = upNext.at(index)
if (prev && index > -1) {
application.appState.set('currentTrack', prev);
} else {
this.replayCurrent();
}
},

next() {
let repeat = application.appState.get('repeat');
let upNext = application.upNext.get('tracks');
let currentTrack = application.appState.get('currentTrack');
let index = upNext.indexOf(currentTrack);
let next = upNext.at(index + 1)
if (next) {
let index = upNext.indexOf(currentTrack) + 1;
let next = upNext.at(index)
if (repeat == 'track') {
this.replayCurrent();
} else if (next) {
application.appState.set('currentTrack', next);
} else if (repeat == 'playlist' && upNext.at(0)) {
if (upNext.length == 1) {
this.replayCurrent();
}
application.appState.set('currentTrack', upNext.at(0));
}
},

replayCurrent() {
let audio = this.ui.player.get(0);
audio.currentTime = 0;
audio.play();
this.ui.playButton.find('use').attr(
'xlink:href',
require('../assets/icons/pause-lg.svg')
);
},

toggleShuffle() {
let shuffle = application.appState.get('shuffle');
application.appState.set('shuffle', !shuffle);
$('#shuffle-sm').toggleClass('active', !shuffle);
},

toggleRepeat() {
let repeat = application.appState.get('repeat');
switch (repeat) {
case 'false':
application.appState.set('repeat', 'track');
$('#repeat-sm').toggleClass('active', true);
this.ui.repeat.find('use').attr(
'xlink:href',
require('../assets/icons/repeat-one-sm.svg')
);
break;
case 'track':
application.appState.set('repeat', 'playlist');
this.ui.repeat.find('use').attr(
'xlink:href',
require('../assets/icons/repeat-sm.svg')
);
break;
case 'playlist':
application.appState.set('repeat', 'false');
$('#repeat-sm').toggleClass('active', false);
break;
}
},

toggleVolume() {
let audio = this.ui.player.get(0);
let mute = application.appState.get('mute');
application.appState.set('mute', !mute);
if (!mute) {
this.ui.speaker.find('use').attr(
'xlink:href',
require('../assets/icons/mute-sm.svg')
);
audio.volume = 0;
} else {
this.ui.speaker.find('use').attr(
'xlink:href',
require('../assets/icons/speaker-sm.svg')
);
audio.volume = application.appState.get('currentVolume');
}

},

// Go to a certain time in the track
skip(e) {
let audio = this.ui.player.get(0);
Expand Down Expand Up @@ -142,6 +242,7 @@ const Player = Mn.LayoutView.extend({
let bar = this.ui.volumeBar.get(0);
let volume = (e.pageX - bar.offsetLeft) / bar.clientWidth;
audio.volume = volume;
application.appState.set('currentVolume', volume);
}
});

Expand Down
Loading

0 comments on commit 451ea7d

Please sign in to comment.