Skip to content
GitLab
Explore
Sign in
Register
Primary navigation
Search or go to…
Project
funkwhale
Manage
Activity
Members
Labels
Plan
Issues
Issue boards
Milestones
Wiki
Code
Merge requests
Repository
Branches
Commits
Tags
Repository graph
Compare revisions
Snippets
Build
Pipelines
Jobs
Pipeline schedules
Artifacts
Deploy
Releases
Package registry
Container registry
Model registry
Operate
Environments
Terraform modules
Monitor
Incidents
Service Desk
Analyze
Value stream analytics
Contributor analytics
CI/CD analytics
Repository analytics
Model experiments
Help
Help
Support
GitLab documentation
Compare GitLab plans
Community forum
Contribute to GitLab
Provide feedback
Keyboard shortcuts
?
Snippets
Groups
Projects
Show more breadcrumbs
Jeff
funkwhale
Commits
5a74d1d3
Commit
5a74d1d3
authored
3 years ago
by
Georg Krause
Browse files
Options
Downloads
Patches
Plain Diff
Fix linting errors in touched files
parent
9bef2304
No related branches found
No related tags found
No related merge requests found
Changes
3
Expand all
Show whitespace changes
Inline
Side-by-side
Showing
3 changed files
front/src/components/Queue.vue
+47
-51
47 additions, 51 deletions
front/src/components/Queue.vue
front/src/components/audio/Player.vue
+134
-140
134 additions, 140 deletions
front/src/components/audio/Player.vue
front/src/store/player.js
+20
-21
20 additions, 21 deletions
front/src/store/player.js
with
201 additions
and
212 deletions
front/src/components/Queue.vue
+
47
−
51
View file @
5a74d1d3
...
@@ -207,20 +207,18 @@
...
@@ -207,20 +207,18 @@
</section>
</section>
</template>
</template>
<
script
>
<
script
>
import
{
mapState
,
mapGetters
,
mapActions
}
from
"
vuex
"
import
{
mapState
,
mapGetters
,
mapActions
}
from
'
vuex
'
import
$
from
'
jquery
'
import
$
from
'
jquery
'
import
moment
from
"
moment
"
import
moment
from
'
moment
'
import
lodash
from
'
@/lodash
'
import
lodash
from
'
@/lodash
'
import
time
from
"
@/utils/time
"
import
time
from
'
@/utils/time
'
import
createFocusTrap
from
'
focus-trap
'
import
createFocusTrap
from
'
focus-trap
'
import
store
from
"
@/store
"
export
default
{
export
default
{
components
:
{
components
:
{
TrackFavoriteIcon
:
()
=>
import
(
/* webpackChunkName: "auth-audio" */
"
@/components/favorites/TrackFavoriteIcon
"
),
TrackFavoriteIcon
:
()
=>
import
(
/* webpackChunkName: "auth-audio" */
'
@/components/favorites/TrackFavoriteIcon
'
),
TrackPlaylistIcon
:
()
=>
import
(
/* webpackChunkName: "auth-audio" */
"
@/components/playlists/TrackPlaylistIcon
"
),
TrackPlaylistIcon
:
()
=>
import
(
/* webpackChunkName: "auth-audio" */
'
@/components/playlists/TrackPlaylistIcon
'
),
VolumeControl
:
()
=>
import
(
/* webpackChunkName: "audio" */
"
@/components/audio/VolumeControl
"
),
draggable
:
()
=>
import
(
/* webpackChunkName: "draggable" */
'
vuedraggable
'
)
draggable
:
()
=>
import
(
/* webpackChunkName: "draggable" */
"
vuedraggable
"
),
},
},
data
()
{
data
()
{
return
{
return
{
...
@@ -232,14 +230,13 @@ export default {
...
@@ -232,14 +230,13 @@ export default {
}
}
},
},
mounted
()
{
mounted
()
{
let
self
=
this
this
.
focusTrap
=
createFocusTrap
(
this
.
$el
,
{
allowOutsideClick
:
()
=>
{
return
true
}
})
this
.
focusTrap
=
createFocusTrap
(
this
.
$el
,
{
allowOutsideClick
:
()
=>
{
return
true
}
})
this
.
focusTrap
.
activate
()
this
.
focusTrap
.
activate
()
this
.
$nextTick
(()
=>
{
this
.
$nextTick
(()
=>
{
setTimeout
(()
=>
{
setTimeout
(()
=>
{
this
.
scrollToCurrent
()
this
.
scrollToCurrent
()
// delay is to let transition work
// delay is to let transition work
},
400
)
;
},
400
)
})
})
},
},
computed
:
{
computed
:
{
...
@@ -256,12 +253,12 @@ export default {
...
@@ -256,12 +253,12 @@ export default {
queue
:
state
=>
state
.
queue
queue
:
state
=>
state
.
queue
}),
}),
...
mapGetters
({
...
mapGetters
({
currentTrack
:
"
queue/currentTrack
"
,
currentTrack
:
'
queue/currentTrack
'
,
hasNext
:
"
queue/hasNext
"
,
hasNext
:
'
queue/hasNext
'
,
emptyQueue
:
"
queue/isEmpty
"
,
emptyQueue
:
'
queue/isEmpty
'
,
durationFormatted
:
"
player/durationFormatted
"
,
durationFormatted
:
'
player/durationFormatted
'
,
currentTimeFormatted
:
"
player/currentTimeFormatted
"
,
currentTimeFormatted
:
'
player/currentTimeFormatted
'
,
progress
:
"
player/progress
"
progress
:
'
player/progress
'
}),
}),
tracks
:
{
tracks
:
{
get
()
{
get
()
{
...
@@ -276,11 +273,11 @@ export default {
...
@@ -276,11 +273,11 @@ export default {
queue
:
this
.
$pgettext
(
'
*/*/*
'
,
'
Queue
'
),
queue
:
this
.
$pgettext
(
'
*/*/*
'
,
'
Queue
'
),
duration
:
this
.
$pgettext
(
'
*/*/*
'
,
'
Duration
'
),
duration
:
this
.
$pgettext
(
'
*/*/*
'
,
'
Duration
'
),
addArtistContentFilter
:
this
.
$pgettext
(
'
Sidebar/Player/Icon.Tooltip/Verb
'
,
'
Hide content from this artist…
'
),
addArtistContentFilter
:
this
.
$pgettext
(
'
Sidebar/Player/Icon.Tooltip/Verb
'
,
'
Hide content from this artist…
'
),
restart
:
this
.
$pgettext
(
'
*/*/*
'
,
'
Restart track
'
)
,
restart
:
this
.
$pgettext
(
'
*/*/*
'
,
'
Restart track
'
)
}
}
},
},
timeLeft
()
{
timeLeft
()
{
le
t
seconds
=
lodash
.
sum
(
cons
t
seconds
=
lodash
.
sum
(
this
.
queue
.
tracks
.
slice
(
this
.
queue
.
currentIndex
).
map
((
t
)
=>
{
this
.
queue
.
tracks
.
slice
(
this
.
queue
.
currentIndex
).
map
((
t
)
=>
{
return
(
t
.
uploads
||
[]).
map
((
u
)
=>
{
return
(
t
.
uploads
||
[]).
map
((
u
)
=>
{
return
u
.
duration
||
0
return
u
.
duration
||
0
...
@@ -294,7 +291,7 @@ export default {
...
@@ -294,7 +291,7 @@ export default {
return
this
.
volume
return
this
.
volume
},
},
set
(
v
)
{
set
(
v
)
{
this
.
$store
.
commit
(
"
player/volume
"
,
v
)
this
.
$store
.
commit
(
'
player/volume
'
,
v
)
}
}
},
},
playerFocused
()
{
playerFocused
()
{
...
@@ -303,58 +300,57 @@ export default {
...
@@ -303,58 +300,57 @@ export default {
},
},
methods
:
{
methods
:
{
...
mapActions
({
...
mapActions
({
cleanTrack
:
"
queue/cleanTrack
"
,
cleanTrack
:
'
queue/cleanTrack
'
,
mute
:
"
player/mute
"
,
mute
:
'
player/mute
'
,
unmute
:
"
player/unmute
"
,
unmute
:
'
player/unmute
'
,
clean
:
"
queue/clean
"
,
clean
:
'
queue/clean
'
,
toggleMute
:
"
player/toggleMute
"
,
toggleMute
:
'
player/toggleMute
'
,
resumePlayback
:
"
player/resumePlayback
"
,
resumePlayback
:
'
player/resumePlayback
'
,
pausePlayback
:
"
player/pausePlayback
"
,
pausePlayback
:
'
player/pausePlayback
'
}),
}),
reorder
:
function
(
event
)
{
reorder
:
function
(
event
)
{
this
.
$store
.
commit
(
"
queue/reorder
"
,
{
this
.
$store
.
commit
(
'
queue/reorder
'
,
{
tracks
:
this
.
tracksChangeBuffer
,
tracks
:
this
.
tracksChangeBuffer
,
oldIndex
:
event
.
oldIndex
,
oldIndex
:
event
.
oldIndex
,
newIndex
:
event
.
newIndex
newIndex
:
event
.
newIndex
})
})
},
},
scrollToCurrent
()
{
scrollToCurrent
()
{
le
t
current
=
$
(
this
.
$el
).
find
(
'
.queue-item.active
'
)[
0
]
cons
t
current
=
$
(
this
.
$el
).
find
(
'
.queue-item.active
'
)[
0
]
if
(
!
current
)
{
if
(
!
current
)
{
return
return
}
}
const
elementRect
=
current
.
getBoundingClientRect
()
;
const
elementRect
=
current
.
getBoundingClientRect
()
const
absoluteElementTop
=
elementRect
.
top
+
window
.
pageYOffset
;
const
absoluteElementTop
=
elementRect
.
top
+
window
.
pageYOffset
const
middle
=
absoluteElementTop
-
(
window
.
innerHeight
/
2
)
;
const
middle
=
absoluteElementTop
-
(
window
.
innerHeight
/
2
)
window
.
scrollTo
({
top
:
middle
,
behaviour
:
'
smooth
'
})
;
window
.
scrollTo
({
top
:
middle
,
behaviour
:
'
smooth
'
})
},
},
touchProgress
(
e
)
{
touchProgress
(
e
)
{
let
time
const
target
=
this
.
$refs
.
progress
let
target
=
this
.
$refs
.
progress
const
time
=
(
e
.
layerX
/
target
.
offsetWidth
)
*
this
.
duration
time
=
(
e
.
layerX
/
target
.
offsetWidth
)
*
this
.
duration
this
.
$emit
(
'
touch-progress
'
,
time
)
this
.
$emit
(
'
touch-progress
'
,
time
)
},
},
shuffle
()
{
shuffle
()
{
le
t
disabled
=
this
.
queue
.
tracks
.
length
===
0
cons
t
disabled
=
this
.
queue
.
tracks
.
length
===
0
if
(
this
.
isShuffling
||
disabled
)
{
if
(
this
.
isShuffling
||
disabled
)
{
return
return
}
}
le
t
self
=
this
cons
t
self
=
this
le
t
msg
=
this
.
$pgettext
(
'
Content/Queue/Message
'
,
"
Queue shuffled!
"
)
cons
t
msg
=
this
.
$pgettext
(
'
Content/Queue/Message
'
,
'
Queue shuffled!
'
)
this
.
isShuffling
=
true
this
.
isShuffling
=
true
setTimeout
(()
=>
{
setTimeout
(()
=>
{
self
.
$store
.
dispatch
(
"
queue/shuffle
"
,
()
=>
{
self
.
$store
.
dispatch
(
'
queue/shuffle
'
,
()
=>
{
self
.
isShuffling
=
false
self
.
isShuffling
=
false
self
.
$store
.
commit
(
"
ui/addMessage
"
,
{
self
.
$store
.
commit
(
'
ui/addMessage
'
,
{
content
:
msg
,
content
:
msg
,
date
:
new
Date
()
date
:
new
Date
()
})
})
})
})
},
100
)
},
100
)
}
,
}
},
},
watch
:
{
watch
:
{
"
$store.state.ui.queueFocused
"
:
{
'
$store.state.ui.queueFocused
'
:
{
handler
(
v
)
{
handler
(
v
)
{
if
(
v
===
'
queue
'
)
{
if
(
v
===
'
queue
'
)
{
this
.
$nextTick
(()
=>
{
this
.
$nextTick
(()
=>
{
...
@@ -369,7 +365,7 @@ export default {
...
@@ -369,7 +365,7 @@ export default {
this
.
$nextTick
(()
=>
{
this
.
$nextTick
(()
=>
{
this
.
scrollToCurrent
()
this
.
scrollToCurrent
()
})
})
}
,
}
},
},
'
$store.state.queue.tracks
'
:
{
'
$store.state.queue.tracks
'
:
{
handler
(
v
)
{
handler
(
v
)
{
...
@@ -379,7 +375,7 @@ export default {
...
@@ -379,7 +375,7 @@ export default {
},
},
immediate
:
true
immediate
:
true
},
},
"
$route.fullPath
"
()
{
'
$route.fullPath
'
()
{
this
.
$store
.
commit
(
'
ui/queueFocused
'
,
null
)
this
.
$store
.
commit
(
'
ui/queueFocused
'
,
null
)
}
}
}
}
...
...
This diff is collapsed.
Click to expand it.
front/src/components/audio/Player.vue
+
134
−
140
View file @
5a74d1d3
This diff is collapsed.
Click to expand it.
front/src/store/player.js
+
20
−
21
View file @
5a74d1d3
...
@@ -126,8 +126,7 @@ export default {
...
@@ -126,8 +126,7 @@ export default {
if
(
state
.
volume
>
0
)
{
if
(
state
.
volume
>
0
)
{
commit
(
'
tempVolume
'
,
state
.
volume
)
commit
(
'
tempVolume
'
,
state
.
volume
)
commit
(
'
volume
'
,
0
)
commit
(
'
volume
'
,
0
)
}
}
else
{
else
{
commit
(
'
volume
'
,
state
.
tempVolume
)
commit
(
'
volume
'
,
state
.
tempVolume
)
}
}
},
},
...
@@ -135,12 +134,12 @@ export default {
...
@@ -135,12 +134,12 @@ export default {
if
(
!
rootState
.
auth
.
authenticated
)
{
if
(
!
rootState
.
auth
.
authenticated
)
{
return
return
}
}
return
axios
.
post
(
'
history/listenings/
'
,
{
'
track
'
:
track
.
id
}).
then
((
response
)
=>
{},
(
response
)
=>
{
return
axios
.
post
(
'
history/listenings/
'
,
{
track
:
track
.
id
}).
then
((
response
)
=>
{},
(
response
)
=>
{
logger
.
default
.
error
(
'
Could not record track in history
'
)
logger
.
default
.
error
(
'
Could not record track in history
'
)
})
})
},
},
trackEnded
({
commit
,
dispatch
,
rootState
},
track
)
{
trackEnded
({
commit
,
dispatch
,
rootState
},
track
)
{
le
t
queueState
=
rootState
.
queue
cons
t
queueState
=
rootState
.
queue
if
(
queueState
.
currentIndex
===
queueState
.
tracks
.
length
-
1
)
{
if
(
queueState
.
currentIndex
===
queueState
.
tracks
.
length
-
1
)
{
// we've reached last track of queue, trigger a reload
// we've reached last track of queue, trigger a reload
// from radio if any
// from radio if any
...
...
This diff is collapsed.
Click to expand it.
Preview
0%
Loading
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Save comment
Cancel
Please
register
or
sign in
to comment