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
d6f2c7d4
Verified
Commit
d6f2c7d4
authored
Mar 19, 2018
by
Eliot Berriot
Browse files
Form, modal and player icon to add track to playlist
parent
a34b1afd
Changes
4
Hide whitespace changes
Inline
Side-by-side
front/src/components/audio/Player.vue
View file @
d6f2c7d4
...
...
@@ -30,7 +30,12 @@
</router-link>
</div>
<div
class=
"description"
>
<track-favorite-icon
:track=
"currentTrack"
></track-favorite-icon>
<track-favorite-icon
v-if=
"$store.state.auth.authenticated"
:track=
"currentTrack"
></track-favorite-icon>
<track-playlist-icon
v-if=
"$store.state.auth.authenticated"
:track=
"currentTrack"
></track-playlist-icon>
</div>
</div>
</div>
...
...
@@ -140,11 +145,13 @@ import ColorThief from '@/vendor/color-thief'
import
Track
from
'
@/audio/track
'
import
AudioTrack
from
'
@/components/audio/Track
'
import
TrackFavoriteIcon
from
'
@/components/favorites/TrackFavoriteIcon
'
import
TrackPlaylistIcon
from
'
@/components/playlists/TrackPlaylistIcon
'
export
default
{
name
:
'
player
'
,
components
:
{
TrackFavoriteIcon
,
TrackPlaylistIcon
,
GlobalEvents
,
AudioTrack
},
...
...
@@ -281,6 +288,7 @@ export default {
cursor
:
pointer
}
.track-area
{
margin-top
:
0
;
.header
,
.meta
,
.artist
,
.album
{
color
:
white
!
important
;
}
...
...
@@ -384,4 +392,5 @@ export default {
.ui.feed.icon
{
margin
:
0
;
}
</
style
>
front/src/components/playlists/Form.vue
0 → 100644
View file @
d6f2c7d4
<
template
>
<form
class=
"ui form"
@
submit.prevent=
"submit()"
>
<h4
class=
"ui header"
>
Create a new playlist
</h4>
<div
v-if=
"success"
class=
"ui positive message"
>
<div
class=
"header"
>
Playlist created
</div>
</div>
<div
v-if=
"errors.length > 0"
class=
"ui negative message"
>
<div
class=
"header"
>
We cannot create the playlist
</div>
<ul
class=
"list"
>
<li
v-for=
"error in errors"
>
{{
error
}}
</li>
</ul>
</div>
<div
class=
"fields"
>
<div
class=
"field"
>
<label>
Playlist name
</label>
<input
v-model=
"name"
required
type=
"text"
placeholder=
"My awesome playlist"
/>
</div>
<div
class=
"field"
>
<label>
Playlist visibility
</label>
<select
class=
"ui dropdown"
v-model=
"privacyLevel"
>
<option
:value=
"c.value"
v-for=
"c in privacyLevelChoices"
>
{{
c
.
label
}}
</option>
</select>
</div>
</div>
<button
:class=
"['ui',
{'loading': isLoading}, 'button']" type="submit">Create playlist
</button>
</form>
</
template
>
<
script
>
import
$
from
'
jquery
'
import
axios
from
'
axios
'
import
logger
from
'
@/logging
'
export
default
{
mounted
()
{
$
(
this
.
$el
).
find
(
'
.dropdown
'
).
dropdown
()
},
data
()
{
return
{
privacyLevel
:
this
.
$store
.
state
.
auth
.
profile
.
privacy_level
,
name
:
''
,
errors
:
[],
success
:
false
,
isLoading
:
false
,
privacyLevelChoices
:
[
{
value
:
'
me
'
,
label
:
'
Nobody except me
'
},
{
value
:
'
instance
'
,
label
:
'
Everyone on this instance
'
},
{
value
:
'
everyone
'
,
label
:
'
Everyone
'
}
]
}
},
methods
:
{
submit
()
{
this
.
isLoading
=
true
this
.
success
=
false
this
.
errors
=
[]
let
self
=
this
let
payload
=
{
name
:
this
.
name
,
privacy_level
:
this
.
privacyLevel
}
let
url
=
`playlists/`
return
axios
.
post
(
url
,
payload
).
then
(
response
=>
{
logger
.
default
.
info
(
'
Successfully created playlist
'
)
self
.
success
=
true
self
.
isLoading
=
false
self
.
$store
.
dispatch
(
'
playlists/fetchOwn
'
)
},
error
=>
{
logger
.
default
.
error
(
'
Error while creating playlist
'
)
self
.
isLoading
=
false
self
.
errors
=
error
.
backendErrors
})
}
}
}
</
script
>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<
style
scoped
>
</
style
>
front/src/components/playlists/PlaylistModal.vue
0 → 100644
View file @
d6f2c7d4
<
template
>
<modal
@
update:show=
"update"
:show=
"show"
>
<div
class=
"header"
>
Add track "
{{
track
.
title
}}
" by
{{
track
.
artist
.
name
}}
to playlist
</div>
<div
class=
"content"
>
<div
class=
"description"
>
<playlist-form></playlist-form>
<div
class=
"ui divider"
></div>
<div
v-if=
"errors.length > 0"
class=
"ui negative message"
>
<div
class=
"header"
>
We cannot add the track to a playlist
</div>
<ul
class=
"list"
>
<li
v-for=
"error in errors"
>
{{
error
}}
</li>
</ul>
</div>
<div
class=
"ui items"
>
<div
class=
"item"
v-for=
"playlist in sortedPlaylists"
>
<div
class=
"content"
>
<div
class=
"header"
>
{{
playlist
.
name
}}
</div>
<div
class=
"meta"
>
<span
class=
"tracks"
>
45 tracks
</span>
</div>
<div
class=
"extra"
>
<div
class=
"ui basic green button"
@
click=
"addToPlaylist(playlist.id)"
>
Add to this playlist
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</modal>
</
template
>
<
script
>
import
axios
from
'
axios
'
import
{
mapState
}
from
'
vuex
'
import
logger
from
'
@/logging
'
import
Modal
from
'
@/components/semantic/Modal
'
import
PlaylistForm
from
'
@/components/playlists/Form
'
export
default
{
components
:
{
Modal
,
PlaylistForm
},
props
:
{
track
:
{
type
:
Object
},
show
:
{
type
:
Boolean
}
},
data
()
{
return
{
errors
:
[]
}
},
methods
:
{
update
(
v
)
{
this
.
$emit
(
'
update:show
'
,
v
)
},
addToPlaylist
(
playlistId
)
{
let
self
=
this
let
payload
=
{
track
:
this
.
track
.
id
,
playlist
:
playlistId
}
return
axios
.
post
(
'
playlist-tracks/
'
,
payload
).
then
(
response
=>
{
logger
.
default
.
info
(
'
Successfully added track to playlist
'
)
self
.
$emit
(
'
update:show
'
,
false
)
self
.
$store
.
dispatch
(
'
playlists/fetchOwn
'
)
},
error
=>
{
logger
.
default
.
error
(
'
Error while adding track to playlist
'
)
self
.
errors
=
error
.
backendErrors
})
}
},
computed
:
{
...
mapState
({
playlists
:
state
=>
state
.
playlists
.
playlists
}),
sortedPlaylists
()
{
return
this
.
playlists
}
}
}
</
script
>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<
style
scoped
>
</
style
>
front/src/components/playlists/TrackPlaylistIcon.vue
0 → 100644
View file @
d6f2c7d4
<
template
>
<button
@
click=
"showModal = true"
v-if=
"button"
:class=
"['ui', 'button']"
>
<i
class=
"list icon"
></i>
Add to playlist...
<playlist-modal
:track=
"track"
:show.sync=
"showModal"
></playlist-modal>
</button>
<i
v-else
@
click=
"showModal = true"
:class=
"['favorite-icon', 'list', 'link', 'icon']"
title=
"Add to playlist..."
>
<playlist-modal
:track=
"track"
:show.sync=
"showModal"
></playlist-modal>
</i>
</
template
>
<
script
>
import
PlaylistModal
from
'
@/components/playlists/PlaylistModal
'
export
default
{
components
:
{
PlaylistModal
},
props
:
{
track
:
{
type
:
Object
},
button
:
{
type
:
Boolean
,
default
:
false
}
},
data
()
{
return
{
showModal
:
false
}
}
}
</
script
>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<
style
scoped
>
</
style
>
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