From 03f15ada4e668d8f4282f8eb02fc999293de7a57 Mon Sep 17 00:00:00 2001
From: Eliot Berriot <contact@eliotberriot.com>
Date: Mon, 11 Dec 2017 21:09:17 +0100
Subject: [PATCH] added shortcuts for play, volume and restore
---
front/package.json | 1 +
front/src/audio/queue.js | 6 +++++-
front/src/components/Sidebar.vue | 8 +++++++-
front/src/components/audio/Player.vue | 13 ++++++++++++-
4 files changed, 25 insertions(+), 3 deletions(-)
diff --git a/front/package.json b/front/package.json
index 7cec50319..55e773fba 100644
--- a/front/package.json
+++ b/front/package.json
@@ -18,6 +18,7 @@
"js-logger": "^1.3.0",
"semantic-ui-css": "^2.2.10",
"vue": "^2.3.3",
+ "vue-global-events": "^1.0.2",
"vue-resource": "^1.3.4",
"vue-router": "^2.3.1",
"vuedraggable": "^2.14.1"
diff --git a/front/src/audio/queue.js b/front/src/audio/queue.js
index 25b27f00e..77fe6bf2b 100644
--- a/front/src/audio/queue.js
+++ b/front/src/audio/queue.js
@@ -86,6 +86,8 @@ class Queue {
cache.remove('queue')
}
setVolume (newValue) {
+ newValue = Math.min(newValue, 1)
+ newValue = Math.max(newValue, 0)
this.state.volume = newValue
if (this.audio.setVolume) {
this.audio.setVolume(newValue)
@@ -94,7 +96,9 @@ class Queue {
}
cache.set('volume', newValue)
}
-
+ incrementVolume (value) {
+ this.setVolume(this.state.volume + value)
+ }
reorder (oldIndex, newIndex) {
// called when the user uses drag / drop to reorder
// tracks in queue
diff --git a/front/src/components/Sidebar.vue b/front/src/components/Sidebar.vue
index e39dd16b9..0ce16a75f 100644
--- a/front/src/components/Sidebar.vue
+++ b/front/src/components/Sidebar.vue
@@ -87,10 +87,15 @@
<div class="ui inverted segment player-wrapper">
<player></player>
</div>
+ <GlobalEvents
+ @keydown.r.stop="queue.restore"
+ />
</div>
</template>
<script>
+import GlobalEvents from 'vue-global-events'
+
import Player from '@/components/audio/Player'
import favoriteTracks from '@/favorites/tracks'
import Logo from '@/components/Logo'
@@ -109,7 +114,8 @@ export default {
Player,
SearchBar,
Logo,
- draggable
+ draggable,
+ GlobalEvents
},
data () {
return {
diff --git a/front/src/components/audio/Player.vue b/front/src/components/audio/Player.vue
index b72f37c5c..92ea9d0a4 100644
--- a/front/src/components/audio/Player.vue
+++ b/front/src/components/audio/Player.vue
@@ -56,10 +56,20 @@
<i title="Clear your queue" @click="queue.clean()" :class="['ui', 'trash', 'secondary', {'disabled': queue.tracks.length === 0}, 'icon']" :disabled="queue.tracks.length === 0"></i>
</div>
</div>
+ <GlobalEvents
+ @keydown.space.prevent="pauseOrPlay"
+ @keydown.ctrl.left.prevent="queue.previous"
+ @keydown.ctrl.right.prevent="queue.next"
+ @keydown.ctrl.down.prevent="queue.incrementVolume(-0.1)"
+ @keydown.ctrl.up.prevent="queue.incrementVolume(0.1)"
+ />
+
</div>
</template>
<script>
+import GlobalEvents from 'vue-global-events'
+
import queue from '@/audio/queue'
import Track from '@/audio/track'
import TrackFavoriteIcon from '@/components/favorites/TrackFavoriteIcon'
@@ -68,7 +78,8 @@ import radios from '@/radios'
export default {
name: 'player',
components: {
- TrackFavoriteIcon
+ TrackFavoriteIcon,
+ GlobalEvents
},
data () {
return {
--
GitLab