Skip to content
GitLab
Projects
Groups
Snippets
Help
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
funkwhale
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Issues
165
Issues
165
List
Boards
Labels
Service Desk
Milestones
Merge Requests
4
Merge Requests
4
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Operations
Operations
Incidents
Environments
Packages & Registries
Packages & Registries
Container Registry
Analytics
Analytics
CI / CD
Repository
Value Stream
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
funkwhale
funkwhale
Commits
f6c939db
Verified
Commit
f6c939db
authored
Dec 17, 2017
by
Agate
💬
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Added looping controls
parent
fcf75260
Changes
3
Hide whitespace changes
Inline
Side-by-side
Showing
3 changed files
with
103 additions
and
14 deletions
+103
-14
CHANGELOG
CHANGELOG
+1
-0
front/src/audio/queue.js
front/src/audio/queue.js
+21
-2
front/src/components/audio/Player.vue
front/src/components/audio/Player.vue
+81
-12
No files found.
CHANGELOG
View file @
f6c939db
...
...
@@ -8,6 +8,7 @@ Changelog
- Shortcuts: can now use the ``f`` shortcut to toggle the currently playing track
as a favorite (#53)
- Shortcuts: avoid collisions between shortcuts by using the exact modifier (#53)
- Player: Added looping controls and shortcuts (#52)
0.2.6 (2017-12-15)
...
...
front/src/audio/queue.js
View file @
f6c939db
...
...
@@ -17,6 +17,7 @@ class Queue {
this
.
currentTrack
=
null
this
.
ended
=
true
this
.
state
=
{
looping
:
0
,
// 0 -> no, 1 -> on track, 2 -> on queue
volume
:
cache
.
get
(
'
volume
'
,
0.5
)
}
this
.
audio
=
{
...
...
@@ -267,12 +268,22 @@ class Queue {
handleAudioEnded
(
e
)
{
this
.
recordListen
(
this
.
currentTrack
)
if
(
this
.
state
.
looping
===
1
)
{
// we loop on the same track
logger
.
default
.
info
(
'
Looping on the same track
'
)
return
this
.
play
(
this
.
currentIndex
)
}
if
(
this
.
currentIndex
<
this
.
tracks
.
length
-
1
)
{
logger
.
default
.
info
(
'
Audio track ended, playing next one
'
)
this
.
next
()
return
this
.
next
()
}
else
{
logger
.
default
.
info
(
'
We reached the end of the queue
'
)
this
.
ended
=
true
if
(
this
.
state
.
looping
===
2
)
{
logger
.
default
.
info
(
'
Going back to the beginning of the queue
'
)
return
this
.
play
(
0
)
}
else
{
this
.
ended
=
true
}
}
}
...
...
@@ -297,6 +308,14 @@ class Queue {
}
}
toggleLooping
()
{
if
(
this
.
state
.
looping
>
1
)
{
this
.
state
.
looping
=
0
}
else
{
this
.
state
.
looping
+=
1
}
}
}
let
queue
=
new
Queue
()
...
...
front/src/components/audio/Player.vue
View file @
f6c939db
...
...
@@ -39,21 +39,71 @@
</div>
</div>
<div
class=
"controls ui grid"
>
<div
class=
"volume-control four wide center aligned column"
>
<input
type=
"range"
step=
"0.05"
min=
"0"
max=
"1"
v-model=
"sliderVolume"
/>
<div
class=
"two wide column controls ui grid"
>
<div
@
click=
"queue.previous()"
title=
"Previous track"
class=
"two wide column control"
:disabled=
"!hasPrevious"
>
<i
:class=
"['ui',
{'disabled': !hasPrevious}, 'step', 'backward', 'big', 'icon']" >
</i>
</div>
<div
v-if=
"!queue.audio.state.playing"
@
click=
"pauseOrPlay"
title=
"Play track"
class=
"two wide column control"
>
<i
:class=
"['ui', 'play',
{'disabled': !queue.currentTrack}, 'big', 'icon']">
</i>
</div>
<div
v-else
@
click=
"pauseOrPlay"
title=
"Pause track"
class=
"two wide column control"
>
<i
:class=
"['ui', 'pause',
{'disabled': !queue.currentTrack}, 'big', 'icon']">
</i>
</div>
<div
@
click=
"queue.next()"
title=
"Next track"
class=
"two wide column control"
:disabled=
"!hasNext"
>
<i
:class=
"['ui',
{'disabled': !hasPrevious}, 'step', 'forward', 'big', 'icon']" >
</i>
</div>
<div
class=
"two wide column control volume-control"
>
<i
title=
"Unmute"
@
click=
"queue.setVolume(1)"
v-if=
"currentVolume === 0"
class=
"volume off secondary icon"
></i>
<i
title=
"Mute"
@
click=
"queue.setVolume(0)"
v-else-if=
"currentVolume
<
0.5"
class=
"volume down secondary icon"
></i>
<i
title=
"Mute"
@
click=
"queue.setVolume(0)"
v-else
class=
"volume up secondary icon"
></i>
<input
type=
"range"
step=
"0.05"
min=
"0"
max=
"1"
v-model=
"sliderVolume"
/>
</div>
<div
class=
"eight wide center aligned column"
>
<i
title=
"Previous track"
@
click=
"queue.previous()"
:class=
"['ui',
{'disabled': !hasPrevious}, 'step', 'backward', 'big', 'icon']" :disabled="!hasPrevious">
</i>
<i
title=
"Play track"
v-if=
"!queue.audio.state.playing"
:class=
"['ui', 'play',
{'disabled': !queue.currentTrack}, 'big', 'icon']" @click="pauseOrPlay">
</i>
<i
title=
"Pause track"
v-else
:class=
"['ui', 'pause',
{'disabled': !queue.currentTrack}, 'big', 'icon']" @click="pauseOrPlay">
</i>
<i
title=
"Next track"
@
click=
"queue.next()"
:class=
"['ui', 'step', 'forward',
{'disabled': !hasNext}, 'big', 'icon']" :disabled="!hasNext">
</i>
<div
class=
"two wide column control looping"
>
<i
title=
"Looping disabled. Click to switch to single-track looping."
v-if=
"queue.state.looping === 0"
@
click=
"queue.state.looping = 1"
:disabled=
"!queue.currentTrack"
:class=
"['ui',
{'disabled': !queue.currentTrack}, 'step', 'repeat', 'secondary', 'icon']">
</i>
<i
title=
"Looping on a single track. Click to switch to whole queue looping."
v-if=
"queue.state.looping === 1"
@
click=
"queue.state.looping = 2"
:disabled=
"!queue.currentTrack"
class=
"repeat secondary icon"
>
<span
class=
"ui circular tiny orange label"
>
1
</span>
</i>
<i
title=
"Looping on whole queue. Click to disable looping."
v-if=
"queue.state.looping === 2"
@
click=
"queue.state.looping = 0"
:disabled=
"!queue.currentTrack"
class=
"repeat orange secondary icon"
>
</i>
</div>
<div
class=
"four wide center aligned column"
>
<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
class=
"three wide column"
></div>
<div
@
click=
"queue.clean()"
:disabled=
"queue.tracks.length === 0"
title=
"Clear your queue"
class=
"two wide column control"
>
<i
:class=
"['ui', 'trash', 'secondary',
{'disabled': queue.tracks.length === 0}, 'icon']" >
</i>
</div>
</div>
<GlobalEvents
...
...
@@ -63,6 +113,7 @@
@
keydown.ctrl.down.prevent.exact=
"queue.incrementVolume(-0.1)"
@
keydown.ctrl.up.prevent.exact=
"queue.incrementVolume(0.1)"
@
keydown.f.prevent.exact=
"favoriteTracks.toggle(queue.currentTrack.id)"
@
keydown.l.prevent.exact=
"queue.toggleLooping"
/>
</div>
...
...
@@ -187,14 +238,32 @@ export default {
.volume-control
{
position
:
relative
;
.icon
{
margin
:
0
;
//
margin: 0;
}
[
type
=
"range"
]
{
max-width
:
75
%
;
max-width
:
100
%
;
position
:
absolute
;
bottom
:
5px
;
left
:
10%
;
cursor
:
pointer
;
display
:
none
;
}
&
:hover
{
[
type
=
"range"
]
{
display
:
block
;
}
}
}
.looping.control
{
i
{
position
:
relative
;
}
.label
{
position
:
absolute
;
font-size
:
0
.7rem
;
bottom
:
-0
.7rem
;
right
:
-0
.7rem
;
}
}
.ui.feed.icon
{
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment