mirror of
https://github.com/koel/koel
synced 2024-11-10 06:34:14 +00:00
Bug fixes and enhancements
This commit is contained in:
An Phan
parent
474e9b945b
commit
0460d69f65
5 changed files with 73 additions and 88 deletions
|
|
@ -26,13 +26,24 @@
|
|||
|
||||
<add-to-menu
|
||||
:songs="selectedSongs"
|
||||
:showing.sync="showingAddToMenu"
|
||||
:showing.sync="showingAddToMenu && state.songs.length"
|
||||
:settings="{ canLike: false }">
|
||||
</add-to-menu>
|
||||
</div>
|
||||
</h1>
|
||||
|
||||
<song-list :items="state.songs" :selected-songs.sync="selectedSongs" type="favorites"></song-list>
|
||||
<song-list
|
||||
v-show="state.songs.length"
|
||||
:items="state.songs"
|
||||
:selected-songs.sync="selectedSongs"
|
||||
type="favorites">
|
||||
</song-list>
|
||||
|
||||
<div class="none" v-else>
|
||||
Start loving!
|
||||
Click the <i style="margin: 0 5px" class="fa fa-heart"></i> icon when a song is playing to add it
|
||||
to this list.
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
|
|
@ -67,18 +78,6 @@
|
|||
playback.queueAndPlay(this.state.songs, true);
|
||||
},
|
||||
},
|
||||
|
||||
watch: {
|
||||
/**
|
||||
* Watch the number of favorite songs.
|
||||
* If we don't have any, the "Add To..." menu shouldn't be left open.
|
||||
*/
|
||||
'state.songs': function () {
|
||||
if (!this.state.songs.length) {
|
||||
this.showingAddToMenu = false;
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
|
|
@ -92,5 +91,14 @@
|
|||
margin-right: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.none {
|
||||
color: $color2ndText;
|
||||
padding: 16px 24px;
|
||||
|
||||
a {
|
||||
color: $colorHighlight;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -31,17 +31,22 @@
|
|||
|
||||
<add-to-menu
|
||||
:songs="selectedSongs"
|
||||
:showing.sync="showingAddToMenu"
|
||||
:settings="{ hiddenPlaylists: [playlist] }">
|
||||
:showing.sync="showingAddToMenu && playlist.songs.length"
|
||||
</add-to-menu>
|
||||
</div>
|
||||
</h1>
|
||||
|
||||
<song-list :items="playlist.songs"
|
||||
<song-list v-show="playlist.songs.length"
|
||||
:items="playlist.songs"
|
||||
:selected-songs.sync="selectedSongs"
|
||||
type="playlist"
|
||||
:playlist="playlist">
|
||||
</song-list>
|
||||
|
||||
<div class="none" v-else>
|
||||
The playlist is currently empty. You can fill it up by dragging songs into its name in the sidebar,
|
||||
or use the "Add To…" button.
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
|
|
@ -102,18 +107,6 @@
|
|||
});
|
||||
},
|
||||
},
|
||||
|
||||
watch: {
|
||||
/**
|
||||
* Watch the number of songs in the current playlist.
|
||||
* If we don't have any, the "Add To..." menu shouldn't be left open.
|
||||
*/
|
||||
'playlist.songs': function () {
|
||||
if (!this.playlist.songs.length) {
|
||||
this.showingAddToMenu = false;
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
|
|
@ -135,5 +128,14 @@
|
|||
background-color: darken($colorRed, 10%) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.none {
|
||||
color: $color2ndText;
|
||||
padding: 16px 24px;
|
||||
|
||||
a {
|
||||
color: $colorHighlight;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -28,13 +28,26 @@
|
|||
|
||||
<add-to-menu
|
||||
:songs="songsToAddTo"
|
||||
:showing.sync="showingAddToMenu"
|
||||
:showing.sync="showingAddToMenu && state.songs.length"
|
||||
:settings="{ canQueue: false }">
|
||||
</add-to-menu>
|
||||
</div>
|
||||
</h1>
|
||||
|
||||
<song-list :items="state.songs" :selected-songs.sync="selectedSongs" type="queue"></song-list>
|
||||
<song-list
|
||||
v-show="state.songs.length"
|
||||
:items="state.songs"
|
||||
:selected-songs.sync="selectedSongs"
|
||||
type="queue">
|
||||
</song-list>
|
||||
|
||||
<div class="none" v-else>
|
||||
<p>Empty spaces. Abandoned places.</p>
|
||||
|
||||
<p v-if="showShufflingAllOption">How about
|
||||
<a class="start" @click.prevent="shuffleAll">shuffling all songs</a>?
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -46,6 +59,7 @@
|
|||
import addToMenu from '../../shared/add-to-menu.vue';
|
||||
import playlistStore from '../../../stores/playlist';
|
||||
import queueStore from '../../../stores/queue';
|
||||
import songStore from '../../../stores/song';
|
||||
import playback from '../../../services/playback';
|
||||
import shuffleSelectedMixin from '../../../mixins/shuffle-selected';
|
||||
|
||||
|
|
@ -73,17 +87,15 @@
|
|||
songsToAddTo() {
|
||||
return this.selectedSongs.length ? this.selectedSongs : queueStore.all();
|
||||
},
|
||||
},
|
||||
|
||||
watch: {
|
||||
/**
|
||||
* Watch the number of songs currently queued.
|
||||
* If we don't have any queuing song, the "Add To..." menu shouldn't be left open.
|
||||
* Determine if we should display a "Shuffling All" link.
|
||||
* This should be true if:
|
||||
* - The current list is queue, and
|
||||
* - We have songs to shuffle.
|
||||
*/
|
||||
'state.songs': function () {
|
||||
if (!queueStore.all().length) {
|
||||
this.showingAddToMenu = false;
|
||||
}
|
||||
showShufflingAllOption() {
|
||||
return songStore.all().length;
|
||||
},
|
||||
},
|
||||
|
||||
|
|
@ -95,6 +107,13 @@
|
|||
playback.queueAndPlay(queueStore.shuffle());
|
||||
},
|
||||
|
||||
/**
|
||||
* Shuffle all songs we have.
|
||||
*/
|
||||
shuffleAll() {
|
||||
playback.queueAndPlay(songStore.all(), true);
|
||||
},
|
||||
|
||||
/**
|
||||
* Clear the queue.
|
||||
*/
|
||||
|
|
@ -112,7 +131,11 @@
|
|||
#queueWrapper {
|
||||
.none {
|
||||
color: $color2ndText;
|
||||
margin-top: 16px;
|
||||
padding: 16px 24px;
|
||||
|
||||
a {
|
||||
color: $colorHighlight;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -44,20 +44,6 @@
|
|||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div class="none" v-else>
|
||||
<p>Empty spaces. Abandoned places.</p>
|
||||
|
||||
<p v-if="showShufflingAllOption">How about
|
||||
<a class="start" @click.prevent="shuffleAll">shuffling all songs</a>?
|
||||
</p>
|
||||
|
||||
<p v-if="type === 'favorites'">
|
||||
Start loving!
|
||||
Click the <i style="margin: 0 5px" class="fa fa-heart"></i> icon when a song is playing to add it
|
||||
to this list.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
|
@ -100,18 +86,6 @@
|
|||
},
|
||||
},
|
||||
|
||||
computed: {
|
||||
/**
|
||||
* Determine if we should display a "Shuffling All" link.
|
||||
* This should be true if:
|
||||
* - The current list is queue, and
|
||||
* - We have songs to shuffle.
|
||||
*/
|
||||
showShufflingAllOption() {
|
||||
return this.type == 'queue' && songStore.all().length;
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* Handle sorting the song list.
|
||||
|
|
@ -129,13 +103,6 @@
|
|||
this.order = 0 - this.order;
|
||||
},
|
||||
|
||||
/**
|
||||
* Shuffle all songs we have.
|
||||
*/
|
||||
shuffleAll() {
|
||||
playback.queueAndPlay(null, true);
|
||||
},
|
||||
|
||||
/**
|
||||
* Execute the corresponding reaction(s) when the user presses Delete.
|
||||
*/
|
||||
|
|
@ -392,11 +359,6 @@
|
|||
@import "resources/assets/sass/partials/_vars.scss";
|
||||
@import "resources/assets/sass/partials/_mixins.scss";
|
||||
|
||||
.none {
|
||||
color: $color2ndText;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.song-list-wrap {
|
||||
position: relative;
|
||||
|
||||
|
|
@ -427,14 +389,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
a.start {
|
||||
color: $colorHighlight;
|
||||
|
||||
&:hover {
|
||||
color: darken($colorHighlight, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Since the Queue screen doesn't allow sorting, we reset the cursor style.
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -292,8 +292,6 @@ export default {
|
|||
songs = _.shuffle(songs);
|
||||
}
|
||||
|
||||
queueStore.clear();
|
||||
|
||||
queueStore.queue(songs, true);
|
||||
|
||||
this.app.loadMainView('queue');
|
||||
|
|
|
|||
Loading…
Reference in a new issue