Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Sign in / Register
Toggle navigation
Menu
Open sidebar
Maxence Bothorel
funkwhale
Commits
38a45590
Verified
Commit
38a45590
authored
Mar 21, 2018
by
Eliot Berriot
Browse files
PlayButton is now able to handle playlists
parent
bf6fe44b
Changes
1
Hide whitespace changes
Inline
Side-by-side
front/src/components/audio/PlayButton.vue
View file @
38a45590
...
...
@@ -3,11 +3,11 @@
<button
title=
"Add to current queue"
@
click=
"add"
:class=
"['ui',
{loading: isLoading}, {'mini': discrete}, {disabled: playable
Tracks.length === 0
}, 'button']">
:class=
"['ui',
{loading: isLoading}, {'mini': discrete}, {disabled:
!
playable}, 'button']">
<i
class=
"ui play icon"
></i>
<template
v-if=
"!discrete"
><slot>
Play
</slot></
template
>
</button>
<div
v-if=
"!discrete"
class=
"
ui
floating
dropdown
icon
button"
>
<div
v-if=
"!discrete"
:
class=
"
['ui', {disabled: !playable}, '
floating
', '
dropdown
', 'icon', '
button
']
"
>
<i
class=
"dropdown icon"
></i>
<div
class=
"menu"
>
<div
class=
"item"
@
click=
"add"
><i
class=
"plus icon"
></i>
Add to queue
</div>
...
...
@@ -19,6 +19,7 @@
</template>
<
script
>
import
axios
from
'
axios
'
import
logger
from
'
@/logging
'
import
jQuery
from
'
jquery
'
...
...
@@ -27,6 +28,7 @@ export default {
// we can either have a single or multiple tracks to play when clicked
tracks
:
{
type
:
Array
,
required
:
false
},
track
:
{
type
:
Object
,
required
:
false
},
playlist
:
{
type
:
Object
,
required
:
false
},
discrete
:
{
type
:
Boolean
,
default
:
false
}
},
data
()
{
...
...
@@ -35,8 +37,8 @@ export default {
}
},
created
()
{
if
(
!
this
.
track
&
!
this
.
tracks
)
{
logger
.
default
.
error
(
'
You have to provide either a track or tracks property
'
)
if
(
!
this
.
playlist
&&
!
this
.
track
&
&
!
this
.
tracks
)
{
logger
.
default
.
error
(
'
You have to provide either a track
playlist
or tracks property
'
)
}
},
mounted
()
{
...
...
@@ -45,19 +47,40 @@ export default {
}
},
computed
:
{
playableTracks
()
{
let
tracks
playable
()
{
if
(
this
.
track
)
{
tracks
=
[
this
.
track
]
}
else
{
tracks
=
this
.
tracks
return
true
}
else
if
(
this
.
tracks
)
{
return
this
.
tracks
.
length
>
0
}
else
if
(
this
.
playlist
)
{
return
true
}
return
tracks
.
filter
(
e
=>
{
return
e
.
files
.
length
>
0
})
return
false
}
},
methods
:
{
getPlayableTracks
()
{
let
self
=
this
let
getTracks
=
new
Promise
((
resolve
,
reject
)
=>
{
if
(
self
.
track
)
{
resolve
([
self
.
track
])
}
else
if
(
self
.
tracks
)
{
resolve
(
self
.
tracks
)
}
else
if
(
self
.
playlist
)
{
let
url
=
'
playlists/
'
+
self
.
playlist
.
id
+
'
/
'
axios
.
get
(
url
+
'
tracks
'
).
then
((
response
)
=>
{
resolve
(
response
.
data
.
results
.
map
(
plt
=>
{
return
plt
.
track
}))
})
}
})
return
getTracks
.
then
((
tracks
)
=>
{
return
tracks
.
filter
(
e
=>
{
return
e
.
files
.
length
>
0
})
})
},
triggerLoad
()
{
let
self
=
this
this
.
isLoading
=
true
...
...
@@ -66,15 +89,21 @@ export default {
},
500
)
},
add
()
{
let
self
=
this
this
.
triggerLoad
()
this
.
$store
.
dispatch
(
'
queue/appendMany
'
,
{
tracks
:
this
.
playableTracks
})
this
.
getPlayableTracks
().
then
((
tracks
)
=>
{
self
.
$store
.
dispatch
(
'
queue/appendMany
'
,
{
tracks
:
tracks
})
})
},
addNext
(
next
)
{
let
self
=
this
this
.
triggerLoad
()
this
.
$store
.
dispatch
(
'
queue/appendMany
'
,
{
tracks
:
this
.
playableTracks
,
index
:
this
.
$store
.
state
.
queue
.
currentIndex
+
1
})
if
(
next
)
{
this
.
$store
.
dispatch
(
'
queue/next
'
)
}
this
.
getPlayableTracks
().
then
((
tracks
)
=>
{
self
.
$store
.
dispatch
(
'
queue/appendMany
'
,
{
tracks
:
tracks
,
index
:
self
.
$store
.
state
.
queue
.
currentIndex
+
1
})
if
(
next
)
{
self
.
$store
.
dispatch
(
'
queue/next
'
)
}
})
}
}
}
...
...
Write
Preview
Supports
Markdown
0%
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!
Cancel
Please
register
or
sign in
to comment