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
F
front
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Issues
0
Issues
0
List
Boards
Labels
Service Desk
Milestones
Merge Requests
0
Merge Requests
0
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
front
Commits
0b967cee
Commit
0b967cee
authored
Jun 14, 2017
by
Agate
💬
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Added more options on big play buttons, see
#8
parent
44ac55b7
Changes
6
Hide whitespace changes
Inline
Side-by-side
Showing
6 changed files
with
134 additions
and
33 deletions
+134
-33
src/audio/queue.js
src/audio/queue.js
+13
-4
src/components/audio/PlayButton.vue
src/components/audio/PlayButton.vue
+67
-0
src/components/audio/album/Card.vue
src/components/audio/album/Card.vue
+5
-8
src/components/audio/artist/Card.vue
src/components/audio/artist/Card.vue
+30
-9
src/components/audio/track/Table.vue
src/components/audio/track/Table.vue
+5
-7
src/components/browse/Artist.vue
src/components/browse/Artist.vue
+14
-5
No files found.
src/audio/queue.js
View file @
0b967cee
...
...
@@ -89,18 +89,27 @@ class Queue {
}
cache
.
set
(
'
volume
'
,
newValue
)
}
append
(
track
)
{
this
.
tracks
.
push
(
track
)
append
(
track
,
index
)
{
index
=
index
||
this
.
tracks
.
length
-
1
if
(
index
>
this
.
tracks
.
length
-
1
)
{
// we simply push to the end
this
.
tracks
.
push
(
track
)
}
else
{
// we insert the track at given position
this
.
tracks
.
splice
(
index
,
0
,
track
)
}
if
(
this
.
currentIndex
<
0
)
{
this
.
play
(
0
)
}
this
.
cache
()
}
appendMany
(
tracks
)
{
appendMany
(
tracks
,
index
)
{
let
self
=
this
index
=
index
||
this
.
tracks
.
length
-
1
tracks
.
forEach
((
t
)
=>
{
self
.
append
(
t
)
self
.
append
(
t
,
index
)
index
+=
1
})
}
...
...
src/components/audio/PlayButton.vue
0 → 100644
View file @
0b967cee
<
template
>
<div
:class=
"['ui',
{'teal': !discrete}, {'tiny': discrete}, 'buttons']">
<button
title=
"Add to current queue"
@
click=
"add"
:class=
"['ui',
{'mini': discrete}, 'icon', {'labeled': !discrete}, '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"
>
<i
class=
"dropdown icon"
></i>
<div
class=
"menu"
>
<div
class=
"item"
@
click=
"add"
><i
class=
"plus icon"
></i>
Add to queue
</div>
<div
class=
"item"
@
click=
"addNext()"
><i
class=
"step forward icon"
></i>
Play next
</div>
<div
class=
"item"
@
click=
"addNext(true)"
><i
class=
"arrow down icon"
></i>
Play now
</div>
</div>
</div>
</div>
</template>
<
script
>
import
logger
from
'
@/logging
'
import
queue
from
'
@/audio/queue
'
import
jQuery
from
'
jquery
'
export
default
{
props
:
{
// we can either have a single or multiple tracks to play when clicked
tracks
:
{
type
:
Array
,
required
:
false
},
track
:
{
type
:
Object
,
required
:
false
},
discrete
:
{
type
:
Boolean
,
default
:
false
}
},
created
()
{
if
(
!
this
.
track
&
!
this
.
tracks
)
{
logger
.
default
.
error
(
'
You have to provide eigher a track or tracks property
'
)
}
},
mounted
()
{
if
(
!
this
.
discrete
)
{
jQuery
(
this
.
$el
).
find
(
'
.ui.dropdown
'
).
dropdown
()
}
},
methods
:
{
add
()
{
if
(
this
.
track
)
{
queue
.
append
(
this
.
track
)
}
else
{
queue
.
appendMany
(
this
.
tracks
)
}
},
addNext
(
next
)
{
if
(
this
.
track
)
{
queue
.
append
(
this
.
track
,
queue
.
currentIndex
+
1
)
}
else
{
queue
.
appendMany
(
this
.
tracks
,
queue
.
currentIndex
+
1
)
}
if
(
next
)
{
queue
.
next
()
}
}
}
}
</
script
>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<
style
scoped
>
i
{
cursor
:
pointer
;
}
</
style
>
src/components/audio/album/Card.vue
View file @
0b967cee
...
...
@@ -16,9 +16,7 @@
<tbody>
<tr
v-for=
"track in tracks"
>
<td>
<button
@
click=
"queue.append(track)"
class=
"ui tiny icon button"
>
<i
class=
"play icon"
></i>
</button>
<play-button
:track=
"track"
:discrete=
"true"
></play-button>
</td>
<td
colspan=
"6"
>
{{
track
.
title
}}
</td>
<td>
...
...
@@ -34,10 +32,7 @@
</div>
</div>
<div
class=
"extra content"
>
<button
@
click=
"queue.appendMany(album.tracks)"
class=
"ui mini icon right floated teal labeled button"
>
<i
class=
"ui play icon"
></i>
Play
</button>
<play-button
class=
"mini right floated"
:tracks=
"album.tracks"
>
Play all
</play-button>
<span>
<i
class=
"music icon"
></i>
{{
album
.
tracks
.
length
}}
tracks
...
...
@@ -50,6 +45,7 @@
import
queue
from
'
@/audio/queue
'
import
backend
from
'
@/audio/backend
'
import
TrackFavoriteIcon
from
'
@/components/favorites/TrackFavoriteIcon
'
import
PlayButton
from
'
@/components/audio/PlayButton
'
export
default
{
props
:
{
...
...
@@ -57,7 +53,8 @@ export default {
mode
:
{
type
:
String
,
default
:
'
rich
'
}
},
components
:
{
TrackFavoriteIcon
TrackFavoriteIcon
,
PlayButton
},
data
()
{
return
{
...
...
src/components/audio/artist/Card.vue
View file @
0b967cee
...
...
@@ -9,7 +9,7 @@
<div
class=
"description"
>
<table
class=
"ui compact very basic fixed single line table"
>
<tbody>
<tr
v-for=
"album in a
rtist.albums.slice(0, 3)
"
>
<tr
v-for=
"album in a
lbums
"
>
<td>
<img
class=
"ui mini image"
v-if=
"album.cover"
:src=
"backend.absoluteUrl(album.cover)"
>
<img
class=
"ui mini image"
v-else
src=
"../../../assets/audio/default-cover.png"
>
...
...
@@ -19,19 +19,19 @@
{{
album
.
tracks
.
length
}}
tracks
</td>
<td>
<button
@
click=
"queue.appendMany(album.tracks)"
class=
"ui mini icon right floated teal button"
>
<i
class=
"ui play icon"
></i>
</button>
<play-button
class=
"right floated"
:discrete=
"true"
:tracks=
"album.tracks"
></play-button>
</td>
</tr>
</tbody>
</table>
<div
class=
"center aligned segment"
v-if=
"artist.albums.length > initialAlbums"
>
<em
v-if=
"!showAllAlbums"
@
click=
"showAllAlbums = true"
class=
"expand"
>
Show
{{
artist
.
albums
.
length
-
initialAlbums
}}
more albums
</em>
<em
v-else
@
click=
"showAllAlbums = false"
class=
"expand"
>
Collapse
</em>
</div>
</div>
</div>
<div
class=
"extra content"
>
<!--
<button
@
click=
"queue.appendMany(artist.tracks)"
class=
"ui right floated button"
>
Play
</button>
-->
<play-button
class=
"mini right floated"
:tracks=
"tracks"
>
Play all
</play-button>
<span>
<i
class=
"sound icon"
></i>
{{
artist
.
albums
.
length
}}
albums
...
...
@@ -41,15 +41,36 @@
</
template
>
<
script
>
import
queue
from
'
@/audio/queue
'
import
backend
from
'
@/audio/backend
'
import
PlayButton
from
'
@/components/audio/PlayButton
'
export
default
{
props
:
[
'
artist
'
],
components
:
{
PlayButton
},
data
()
{
return
{
backend
:
backend
,
queue
:
queue
initialAlbums
:
3
,
showAllAlbums
:
false
}
},
computed
:
{
albums
()
{
if
(
this
.
showAllAlbums
)
{
return
this
.
artist
.
albums
}
return
this
.
artist
.
albums
.
slice
(
0
,
this
.
initialAlbums
)
},
allTracks
()
{
let
tracks
=
[]
this
.
artist
.
albums
.
forEach
(
album
=>
{
album
.
tracks
.
forEach
(
track
=>
{
tracks
.
push
(
track
)
})
})
return
tracks
}
}
}
...
...
src/components/audio/track/Table.vue
View file @
0b967cee
...
...
@@ -13,9 +13,7 @@
<tbody>
<tr
v-for=
"track in tracks"
>
<td>
<button
@
click=
"queue.append(track)"
class=
"ui tiny icon button"
>
<i
class=
"play icon"
></i>
</button>
<play-button
:discrete=
"true"
:track=
"track"
></play-button>
</td>
<td>
<img
class=
"ui mini image"
v-if=
"track.album.cover"
:src=
"backend.absoluteUrl(track.album.cover)"
>
...
...
@@ -39,19 +37,19 @@
</
template
>
<
script
>
import
queue
from
'
@/audio/queue
'
import
backend
from
'
@/audio/backend
'
import
TrackFavoriteIcon
from
'
@/components/favorites/TrackFavoriteIcon
'
import
PlayButton
from
'
@/components/audio/PlayButton
'
export
default
{
props
:
[
'
tracks
'
],
components
:
{
TrackFavoriteIcon
TrackFavoriteIcon
,
PlayButton
},
data
()
{
return
{
backend
:
backend
,
queue
:
queue
backend
:
backend
}
}
}
...
...
src/components/browse/Artist.vue
View file @
0b967cee
...
...
@@ -11,10 +11,8 @@
<div
class=
"ui hidden divider"
></div>
<radio-button
type=
"artist"
:object-id=
"artist.id"
></radio-button>
</button>
<button
class=
"ui labeled teal icon button"
@
click=
"playAllALbums"
>
<i
class=
"play icon"
></i>
Play all albums
</button>
<play-button
:tracks=
"allTracks"
>
Play all albums
</play-button>
<a
:href=
"wikipediaUrl"
target=
"_blank"
class=
"ui labeled icon button"
>
<i
class=
"wikipedia icon"
></i>
Search on wikipedia
...
...
@@ -41,6 +39,7 @@ import backend from '@/audio/backend'
import
queue
from
'
@/audio/queue
'
import
AlbumCard
from
'
@/components/audio/album/Card
'
import
RadioButton
from
'
@/components/radios/Button
'
import
PlayButton
from
'
@/components/audio/PlayButton
'
import
config
from
'
@/config
'
const
FETCH_URL
=
config
.
API_URL
+
'
artists/
'
...
...
@@ -49,7 +48,8 @@ export default {
props
:
[
'
id
'
],
components
:
{
AlbumCard
,
RadioButton
RadioButton
,
PlayButton
},
data
()
{
return
{
...
...
@@ -94,6 +94,15 @@ export default {
},
musicbrainzUrl
()
{
return
'
https://musicbrainz.org/artist/
'
+
this
.
artist
.
mbid
},
allTracks
()
{
let
tracks
=
[]
this
.
albums
.
forEach
(
album
=>
{
album
.
tracks
.
forEach
(
track
=>
{
tracks
.
push
(
track
)
})
})
return
tracks
}
}
}
...
...
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