Skip to content
GitLab
Menu
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
Menu
Open sidebar
Marcin Mikołajczak
funkwhale
Commits
833c0f16
Verified
Commit
833c0f16
authored
Jun 30, 2018
by
Eliot Berriot
Browse files
WIP replace
parent
ba094c3e
Changes
83
Hide whitespace changes
Inline
Side-by-side
front/src/components/About.vue
View file @
833c0f16
...
...
@@ -3,21 +3,23 @@
<div
class=
"ui vertical center aligned stripe segment"
>
<div
class=
"ui text container"
>
<h1
class=
"ui huge header"
>
<template
v-if=
"instance.name.value"
>
{{
$t
(
'
About {%instance%
}
'
,
{
instance
:
instance
.
name
.
value
}
)
}}
<
/template
>
<
template
v
-
else
=
"
instance.name.value
"
>
{{
$t
(
'
About this instance
'
)
}}
<
/template
>
<template
v-if=
"instance.name.value"
:template-params=
"
{instance: instance.name}">
About %{ instance }
</
template
>
<
template
v-else=
"instance.name.value"
>
{{
$gettext
(
'
About this instance
'
)
}}
</
template
>
</h1>
<stats></stats>
</div>
</div>
<div
class=
"ui vertical stripe segment"
>
<p
v-if=
"!instance.short_description.value && !instance.long_description.value"
>
{{
$t
(
'
Unfortunately, owners of this instance did not yet take the time to complete this page.
'
)
}}
{{ $
gettex
t('Unfortunately, owners of this instance did not yet take the time to complete this page.') }}
</p>
<router-link
class=
"ui button"
v-if=
"$store.state.auth.availablePermissions['settings']"
:to=
"{path: '/manage/settings', hash: 'instance'}"
>
<
i
class
=
"
pencil icon
"
><
/i>{{ $t
(
'Edit instance info'
)
}}
<i
class=
"pencil icon"
></i>
{{ $
gettex
t('Edit instance info') }}
</router-link>
<div
v-if=
"instance.short_description.value"
...
...
front/src/components/Home.vue
View file @
833c0f16
...
...
@@ -3,15 +3,15 @@
<div
class=
"ui vertical center aligned stripe segment"
>
<div
class=
"ui text container"
>
<h1
class=
"ui huge header"
>
{{
$t
(
'
Welcome on Funkwhale
'
)
}}
{{
$
gettex
t
(
'
Welcome on Funkwhale
'
)
}}
</h1>
<p>
{{
$t
(
'
We think listening to music should be simple.
'
)
}}
</p>
<p>
{{
$
gettex
t
(
'
We think listening to music should be simple.
'
)
}}
</p>
<router-link
class=
"ui icon button"
to=
"/about"
>
<i
class=
"info icon"
></i>
{{
$t
(
'
Learn more about this instance
'
)
}}
{{
$
gettex
t
(
'
Learn more about this instance
'
)
}}
</router-link>
<router-link
class=
"ui icon teal button"
to=
"/library"
>
{{
$t
(
'
Get me to the library
'
)
}}
{{
$
gettex
t
(
'
Get me to the library
'
)
}}
<i
class=
"right arrow icon"
></i>
</router-link>
</div>
...
...
@@ -22,9 +22,9 @@
<div
class=
"row"
>
<div
class=
"eight wide left floated column"
>
<h2
class=
"ui header"
>
{{
$t
(
'
Why funkwhale?
'
)
}}
{{
$
gettex
t
(
'
Why funkwhale?
'
)
}}
</h2>
<p>
{{
$t
(
'
That
\'
s simple: we loved Grooveshark and we want to build something even better.
'
)
}}
</p>
<p>
{{
$
gettex
t
(
'
That
\'
s simple: we loved Grooveshark and we want to build something even better.
'
)
}}
</p>
</div>
<div
class=
"four wide left floated column"
>
<img
class=
"ui medium image"
src=
"../assets/logo/logo.png"
/>
...
...
@@ -35,26 +35,26 @@
<div
class=
"ui middle aligned stackable text container"
>
<div
class=
"ui hidden divider"
></div>
<h2
class=
"ui header"
>
{{
$t
(
'
Unlimited music
'
)
}}
{{
$
gettex
t
(
'
Unlimited music
'
)
}}
</h2>
<p>
{{
$t
(
'
Funkwhale is designed to make it easy to listen to music you like, or to discover new artists.
'
)
}}
</p>
<p>
{{
$
gettex
t
(
'
Funkwhale is designed to make it easy to listen to music you like, or to discover new artists.
'
)
}}
</p>
<div
class=
"ui list"
>
<div
class=
"item"
>
<i
class=
"sound icon"
></i>
<div
class=
"content"
>
{{
$t
(
'
Click once, listen for hours using built-in radios
'
)
}}
{{
$
gettex
t
(
'
Click once, listen for hours using built-in radios
'
)
}}
</div>
</div>
<div
class=
"item"
>
<i
class=
"heart icon"
></i>
<div
class=
"content"
>
{{
$t
(
'
Keep a track of your favorite songs
'
)
}}
{{
$
gettex
t
(
'
Keep a track of your favorite songs
'
)
}}
</div>
</div>
<div
class=
"item"
>
<i
class=
"list icon"
></i>
<div
class=
"content"
>
{{
$t
(
'
Playlists? We got them
'
)
}}
{{
$
gettex
t
(
'
Playlists? We got them
'
)
}}
</div>
</div>
</div>
...
...
@@ -62,28 +62,31 @@
<div
class=
"ui middle aligned stackable text container"
>
<div
class=
"ui hidden divider"
></div>
<h2
class=
"ui header"
>
{{
$t
(
'
Clean library
'
)
}}
{{
$
gettex
t
(
'
Clean library
'
)
}}
</h2>
<p>
{{
$t
(
'
Funkwhale takes care of handling your music
'
)
}}
.
</p>
<p>
{{
$
gettex
t
(
'
Funkwhale takes care of handling your music
'
)
}}
.
</p>
<div
class=
"ui list"
>
<div
class=
"item"
>
<i
class=
"download icon"
></i>
<div
class=
"content"
>
{{
$t
(
'
Import music from various platforms, such as YouTube or SoundCloud
'
)
}}
{{
$
gettex
t
(
'
Import music from various platforms, such as YouTube or SoundCloud
'
)
}}
</div>
</div>
<div
class=
"item"
>
<i
class=
"tag icon"
></i>
<div
class=
"content"
>
<i18next
path=
"Get quality metadata about your music thanks to
{%0%}">
<a
href=
"https://musicbrainz.org"
target=
"_blank"
>
{{
$t
(
'
MusicBrainz
'
)
}}
</a>
</i18next>
<template
v-translate
>
Get quality metadata about your music thanks to
<a
href=
"https://musicbrainz.org"
target=
"_blank"
>
MusicBrainz
</a>
</
template
>
</div>
</div>
<div
class=
"item"
>
<i
class=
"plus icon"
></i>
<div
class=
"content"
>
{{
$t
(
'
Covers, lyrics, our goal is to have them all ;)
'
)
}}
{{ $
gettex
t('Covers, lyrics, our goal is to have them all ;)') }}
</div>
</div>
</div>
...
...
@@ -91,20 +94,20 @@
<div
class=
"ui middle aligned stackable text container"
>
<div
class=
"ui hidden divider"
></div>
<h2
class=
"ui header"
>
{{
$t
(
'
Easy to use
'
)
}}
{{ $
gettex
t('Easy to use') }}
</h2>
<p>
{{
$t
(
'
Funkwhale is dead simple to use.
'
)
}}
</p>
<p>
{{ $
gettex
t('Funkwhale is dead simple to use.') }}
</p>
<div
class=
"ui list"
>
<div
class=
"item"
>
<i
class=
"book icon"
></i>
<div
class=
"content"
>
{{
$t
(
'
No add-ons, no plugins : you only need a web library
'
)
}}
{{ $
gettex
t('No add-ons, no plugins : you only need a web library') }}
</div>
</div>
<div
class=
"item"
>
<i
class=
"wizard icon"
></i>
<div
class=
"content"
>
{{
$t
(
'
Access your music from a clean interface that focus on what really matters
'
)
}}
{{ $
gettex
t('Access your music from a clean interface that focus on what really matters') }}
</div>
</div>
</div>
...
...
@@ -112,26 +115,26 @@
<div
class=
"ui middle aligned stackable text container"
>
<div
class=
"ui hidden divider"
></div>
<h2
class=
"ui header"
>
{{
$t
(
'
Your music, your way
'
)
}}
{{ $
gettex
t('Your music, your way') }}
</h2>
<p>
{{
$t
(
'
Funkwhale is free and gives you control on your music.
'
)
}}
</p>
<p>
{{ $
gettex
t('Funkwhale is free and gives you control on your music.') }}
</p>
<div
class=
"ui list"
>
<div
class=
"item"
>
<i
class=
"smile icon"
></i>
<div
class=
"content"
>
{{
$t
(
'
The plaform is free and open-source, you can install it and modify it without worries
'
)
}}
{{ $
gettex
t('The plaform is free and open-source, you can install it and modify it without worries') }}
</div>
</div>
<div
class=
"item"
>
<i
class=
"protect icon"
></i>
<div
class=
"content"
>
{{
$t
(
'
We do not track you or bother you with ads
'
)
}}
{{ $
gettex
t('We do not track you or bother you with ads') }}
</div>
</div>
<div
class=
"item"
>
<i
class=
"users icon"
></i>
<div
class=
"content"
>
{{
$t
(
'
You can invite friends and family to your instance so they can enjoy your music
'
)
}}
{{ $
gettex
t('You can invite friends and family to your instance so they can enjoy your music') }}
</div>
</div>
</div>
...
...
front/src/components/PageNotFound.vue
View file @
833c0f16
...
...
@@ -5,13 +5,14 @@
<h1
class=
"ui huge header"
>
<i
class=
"warning icon"
></i>
<div
class=
"content"
>
<strike>
{{
$t
(
'
Whale
'
)
}}
</strike>
{{
$t
(
'
Page not found!
'
)
}}
<strike>
{{
$
gettex
t
(
'
Whale
'
)
}}
</strike>
{{
$
gettex
t
(
'
Page not found!
'
)
}}
</div>
</h1>
<p>
{{
$t
(
'
We
\'
re sorry, the page you asked for does not exists.
'
)
}}
</p>
<i18next
path=
"Requested URL:
{%0%}">
<a
:href=
"path"
>
{{
path
}}
</a></i18next>
<p>
{{
$gettext
(
'
We
\'
re sorry, the page you asked for does not exist:
'
)
}}
</p>
<a
:href=
"path"
>
{{
path
}}
</a>
<div
class=
"ui hidden divider"
></div>
<router-link
class=
"ui icon button"
to=
"/"
>
{{
$t
(
'
Go to home page
'
)
}}
{{
$
gettex
t
(
'
Go to home page
'
)
}}
<i
class=
"right arrow icon"
></i>
</router-link>
</div>
...
...
front/src/components/Sidebar.vue
View file @
833c0f16
...
...
@@ -18,13 +18,13 @@
<div
class=
"ui compact fluid two item inverted menu"
>
<a
class=
"active item"
@
click=
"selectedTab = 'library'"
data-tab=
"library"
>
Browse
</a>
<a
class=
"item"
@
click=
"selectedTab = 'queue'"
data-tab=
"queue"
>
{{
$t
(
'
Queue
'
)
}}
{{
$
gettex
t
(
'
Queue
'
)
}}
<template
v-if=
"queue.tracks.length === 0"
>
{{
$t
(
'
(empty)
'
)
}}
</
template
>
<
template
v-else
>
{{
$t
(
'
({%index%
}
of {%length%
}
)
'
,
{
index
:
queue
.
currentIndex
+
1
,
length
:
queue
.
tracks
.
length
}
)
}}
{{
$gettext
(
'
(empty)
'
)
}}
</
template
>
<translate
v-else
:translate-params=
"{index: queue.currentIndex + 1, length: queue.tracks.length}"
>
(%{ index } of %{ length })
</translate>
</a>
</div>
</div>
...
...
@@ -32,40 +32,45 @@
<div
class=
"ui bottom attached active tab"
data-tab=
"library"
>
<div
class=
"ui inverted vertical large fluid menu"
>
<div
class=
"item"
>
<
div
class
=
"
header
"
>
{{
$t
(
'
My account
'
)
}}
<
/div
>
<div
class=
"header"
>
{{ $
gettex
t('My account') }}
</div>
<div
class=
"menu"
>
<
router
-
link
class
=
"
item
"
v
-
if
=
"
$store.state.auth.authenticated
"
:
to
=
"
{name: 'profile', params: {username: $store.state.auth.username
}}
"
><
i
class
=
"
user icon
"
><
/i>{{ $t
(
'Logged in as {%name%
}
', { name: $store.state.auth.username
}
)
}}
</
router
-
link
>
<
router
-
link
class
=
"
item
"
v
-
if
=
"
$store.state.auth.authenticated
"
:
to
=
"
{name: 'logout'
}
"
><
i
class
=
"
sign out icon
"
><
/i>{{ $t
(
'Logout'
)
}}
</
router
-
link
>
<
router
-
link
class
=
"
item
"
v
-
else
:
to
=
"
{name: 'login'
}
"
><
i
class
=
"
sign in icon
"
><
/i>{{ $t
(
'Login'
)
}}
</
router
-
link
>
<router-link
class=
"item"
v-if=
"$store.state.auth.authenticated"
:to=
"{name: 'profile', params: {username: $store.state.auth.username}}"
>
<i
class=
"user icon"
></i>
<translate
:translate-params=
"{username: $store.state.auth.username}"
>
Logged in as %{ username }
</translate>
</router-link>
<router-link
class=
"item"
v-if=
"$store.state.auth.authenticated"
:to=
"{name: 'logout'}"
><i
class=
"sign out icon"
></i>
{{ $gettext('Logout') }}
</router-link>
<router-link
class=
"item"
v-else
:to=
"{name: 'login'}"
><i
class=
"sign in icon"
></i>
{{ $gettext('Login') }}
</router-link>
</div>
</div>
<div
class=
"item"
>
<
div
class
=
"
header
"
>
{{
$t
(
'
Music
'
)
}}
<
/div
>
<div
class=
"header"
>
{{ $
gettex
t('Music') }}
</div>
<div
class=
"menu"
>
<
router
-
link
class
=
"
item
"
:
to
=
"
{path: '/library'
}
"
><
i
class
=
"
sound icon
"
>
<
/i>{{ $t
(
'Browse library'
)
}}
</
router
-
link
>
<
router
-
link
class
=
"
item
"
v
-
if
=
"
$store.state.auth.authenticated
"
:
to
=
"
{path: '/favorites'
}
"
><
i
class
=
"
heart icon
"
><
/i>{{ $t
(
'Favorites'
)
}}
</
router
-
link
>
<router-link
class=
"item"
:to=
"{path: '/library'}"
><i
class=
"sound icon"
>
</i>
{{ $
gettex
t('Browse library') }}
</router-link>
<router-link
class=
"item"
v-if=
"$store.state.auth.authenticated"
:to=
"{path: '/favorites'}"
><i
class=
"heart icon"
></i>
{{ $
gettex
t('Favorites') }}
</router-link>
<a
@
click=
"$store.commit('playlists/chooseTrack', null)"
v-if=
"$store.state.auth.authenticated"
class=
"item"
>
<
i
class
=
"
list icon
"
><
/i>{{ $t
(
'Playlists'
)
}}
<i
class=
"list icon"
></i>
{{ $
gettex
t('Playlists') }}
</a>
<router-link
v-if=
"$store.state.auth.authenticated"
class
=
"
item
"
:
to
=
"
{path: '/activity'
}
"
><
i
class
=
"
bell icon
"
><
/i>{{ $t
(
'Activity'
)
}}
</
router
-
link
>
class=
"item"
:to=
"{path: '/activity'}"
><i
class=
"bell icon"
></i>
{{ $
gettex
t('Activity') }}
</router-link>
</div>
</div>
<div
class=
"item"
v-if=
"showAdmin"
>
<
div
class
=
"
header
"
>
{{
$t
(
'
Administration
'
)
}}
<
/div
>
<div
class=
"header"
>
{{ $
gettex
t('Administration') }}
</div>
<div
class=
"menu"
>
<router-link
class=
"item"
v-if=
"$store.state.auth.availablePermissions['library']"
:to=
"{name: 'manage.library.files'}"
>
<
i
class
=
"
book icon
"
><
/i>{{ $t
(
'Library'
)
}}
<i
class=
"book icon"
></i>
{{ $
gettex
t('Library') }}
<div
:class=
"['ui', {'teal': $store.state.ui.notifications.importRequests > 0}, 'label']"
:
title
=
"
$t('Pending import requests')
"
>
:title=
"$
gettex
t('Pending import requests')"
>
{{ $store.state.ui.notifications.importRequests }}
</div>
</router-link>
...
...
@@ -73,29 +78,29 @@
class=
"item"
v-else-if=
"$store.state.auth.availablePermissions['upload']"
to=
"/library/import/launch"
>
<
i
class
=
"
download icon
"
><
/i>{{ $t
(
'Import music'
)
}}
<i
class=
"download icon"
></i>
{{ $
gettex
t('Import music') }}
</router-link>
<router-link
class=
"item"
v-if=
"$store.state.auth.availablePermissions['federation']"
:to=
"{path: '/manage/federation/libraries'}"
>
<
i
class
=
"
sitemap icon
"
><
/i>{{ $t
(
'Federation'
)
}}
<i
class=
"sitemap icon"
></i>
{{ $
gettex
t('Federation') }}
<div
:class=
"['ui', {'teal': $store.state.ui.notifications.federation > 0}, 'label']"
:
title
=
"
$t('Pending follow requests')
"
>
:title=
"$
gettex
t('Pending follow requests')"
>
{{ $store.state.ui.notifications.federation }}
</div>
</router-link>
<router-link
class=
"item"
v-if=
"$store.state.auth.availablePermissions['settings']"
:to=
"{path: '/manage/settings'}"
>
<
i
class
=
"
settings icon
"
><
/i>{{ $t
(
'Settings'
)
}}
<i
class=
"settings icon"
></i>
{{ $
gettex
t('Settings') }}
</router-link>
<router-link
class=
"item"
v-if=
"$store.state.auth.availablePermissions['settings']"
:to=
"{name: 'manage.users.users.list'}"
>
<
i
class
=
"
users icon
"
><
/i>{{ $t
(
'Users'
)
}}
<i
class=
"users icon"
></i>
{{ $
gettex
t('Users') }}
</router-link>
</div>
</div>
...
...
@@ -105,12 +110,19 @@
<i
class=
"history icon"
></i>
<div
class=
"content"
>
<div
class=
"header"
>
{{
$t
(
'
Do you want to restore your previous queue?
'
)
}}
{{ $
gettex
t('Do you want to restore your previous queue?') }}
</div>
<
p
>
{{
$t
(
'
{%count%
}
tracks
'
,
{
count
:
queue
.
previousQueue
.
tracks
.
length
}
)
}}
<
/p
>
<p>
<translate
translate-plural=
"%{ count } tracks"
:translate-n=
"queue.previousQueue.tracks.length"
:translate-params=
"{count: queue.previousQueue.tracks.length}"
>
%{ count } track
</translate>
</p>
<div
class=
"ui two buttons"
>
<
div
@
click
=
"
queue.restore()
"
class
=
"
ui basic inverted green button
"
>
{{
$t
(
'
Yes
'
)
}}
<
/div
>
<
div
@
click
=
"
queue.removePrevious()
"
class
=
"
ui basic inverted red button
"
>
{{
$t
(
'
No
'
)
}}
<
/div
>
<div
@
click=
"queue.restore()"
class=
"ui basic inverted green button"
>
{{ $
gettex
t('Yes') }}
</div>
<div
@
click=
"queue.removePrevious()"
class=
"ui basic inverted red button"
>
{{ $
gettex
t('No') }}
</div>
</div>
</div>
</div>
...
...
@@ -141,10 +153,10 @@
<div
v-if=
"$store.state.radios.running"
class=
"ui black message"
>
<div
class=
"content"
>
<div
class=
"header"
>
<
i
class
=
"
feed icon
"
><
/i> {{ $t
(
'You have a radio playing'
)
}}
<i
class=
"feed icon"
></i>
{{ $
gettex
t('You have a radio playing') }}
</div>
<
p
>
{{
$t
(
'
New tracks will be appended here automatically.
'
)
}}
<
/p
>
<
div
@
click
=
"
$store.dispatch('radios/stop')
"
class
=
"
ui basic inverted red button
"
>
{{
$t
(
'
Stop radio
'
)
}}
<
/div
>
<p>
{{ $
gettex
t('New tracks will be appended here automatically.') }}
</p>
<div
@
click=
"$store.dispatch('radios/stop')"
class=
"ui basic inverted red button"
>
{{ $
gettex
t('Stop radio') }}
</div>
</div>
</div>
</div>
...
...
front/src/components/activity/Like.vue
View file @
833c0f16
...
...
@@ -5,20 +5,12 @@
</div>
<div
class=
"content"
>
<div
class=
"summary"
>
<i18next
path=
"
{%0%} favorited a track">
<username
class=
"user"
:username=
"event.actor.local_id"
/>
</i18next>
<translate
:translate-params=
"
{user: event.actor.local_id}">%{ user } favorited a track
</translate>
<human-date
class=
"date"
:date=
"event.published"
/>
</div>
<div
class=
"extra text"
>
<router-link
:to=
"
{name: 'library.tracks.detail', params: {id: event.object.local_id }}">
{{
event
.
object
.
name
}}
</router-link>
<i18next
path=
"from album
{%0%}, by {%1%}" v-if="event.object.album">
{{
event
.
object
.
album
}}
<em>
{{
event
.
object
.
artist
}}
</em>
</i18next>
<i18next
path=
", by
{%0%}" v-else>
<em>
{{
event
.
object
.
artist
}}
</em>
</i18next>
<translate
:translate-params=
"
{album: event.object.album, artist: event.object.artist}">from %{ album } by %{ artist }
</translate>
</div>
</div>
</div>
...
...
front/src/components/activity/Listen.vue
View file @
833c0f16
...
...
@@ -5,20 +5,12 @@
</div>
<div
class=
"content"
>
<div
class=
"summary"
>
<i18next
path=
"
{%0%} listened to a track">
<username
class=
"user"
:username=
"event.actor.local_id"
/>
</i18next>
<human-date
class=
"date"
:date=
"event.published"
/>
<translate
:translate-params=
"
{user: event.actor.local_id}">%{ user } listened to a track
</translate>
<human-date
class=
"date"
:date=
"event.published"
/>
</div>
<div
class=
"extra text"
>
<router-link
:to=
"
{name: 'library.tracks.detail', params: {id: event.object.local_id }}">
{{
event
.
object
.
name
}}
</router-link>
<i18next
path=
"from album
{%0%}, by {%1%}" v-if="event.object.album">
{{
event
.
object
.
album
}}
<em>
{{
event
.
object
.
artist
}}
</em>
</i18next>
<i18next
path=
", by
{%0%}" v-else>
<em>
{{
event
.
object
.
artist
}}
</em>
</i18next>
<translate
:translate-params=
"
{album: event.object.album, artist: event.object.artist}">from %{ album } by %{ artist }
</translate>
</div>
</div>
</div>
...
...
front/src/components/admin/SettingsGroup.vue
View file @
833c0f16
...
...
@@ -3,13 +3,13 @@
<div
class=
"ui divider"
/>
<h3
class=
"ui header"
>
{{
group
.
label
}}
</h3>
<div
v-if=
"errors.length > 0"
class=
"ui negative message"
>
<div
class=
"header"
>
{{
$t
(
'
Error while saving settings
'
)
}}
</div>
<div
class=
"header"
>
{{
$
gettex
t
(
'
Error while saving settings
'
)
}}
</div>
<ul
class=
"list"
>
<li
v-for=
"error in errors"
>
{{
error
}}
</li>
</ul>
</div>
<div
v-if=
"result"
class=
"ui positive message"
>
{{
$t
(
'
Settings updated successfully.
'
)
}}
{{
$
gettex
t
(
'
Settings updated successfully.
'
)
}}
</div>
<p
v-if=
"group.help"
>
{{
group
.
help
}}
</p>
<div
v-for=
"setting in settings"
class=
"ui field"
>
...
...
@@ -61,7 +61,7 @@
<button
type=
"submit"
:class=
"['ui', {'loading': isLoading}, 'right', 'floated', 'green', 'button']"
>
{{ $t('Save') }}
{{ $
gettex
t('Save') }}
</button>
</form>
</template>
...
...
front/src/components/audio/PlayButton.vue
View file @
833c0f16
<
template
>
<div
:title=
"title"
:class=
"['ui',
{'tiny': discrete}, 'buttons']">
<button
:title=
"$t('Add to current queue')"
:title=
"$
gettex
t('Add to current queue')"
@
click=
"addNext(true)"
:disabled=
"!playable"
:class=
"['ui',
{loading: isLoading}, {'mini': discrete}, {disabled: !playable}, 'button']">
<i
class=
"ui play icon"
></i>
<template
v-if=
"!discrete"
><slot>
<i18next
path=
"Play"
/>
</slot></
template
>
<template
v-if=
"!discrete"
><slot>
{{
$gettext
(
'
Play
'
)
}}
</slot></
template
>
</button>
<div
v-if=
"!discrete"
:class=
"['ui', {disabled: !playable}, 'floating', 'dropdown', 'icon', 'button']"
>
<i
class=
"dropdown icon"
></i>
<div
class=
"menu"
>
<div
class=
"item"
:disabled=
"!playable"
@
click=
"add"
><i
class=
"plus icon"
></i>
<i18next
path=
"
Add to queue
"
/>
</div>
<div
class=
"item"
:disabled=
"!playable"
@
click=
"addNext()"
><i
class=
"step forward icon"
></i>
<i18next
path=
"
Play next
"
/>
</div>
<div
class=
"item"
:disabled=
"!playable"
@
click=
"addNext(true)"
><i
class=
"arrow down icon"
></i>
<i18next
path=
"
Play now
"
/>
</div>
<div
class=
"item"
:disabled=
"!playable"
@
click=
"add"
><i
class=
"plus icon"
></i>
{{ $gettext('
Add to queue
') }}
</div>
<div
class=
"item"
:disabled=
"!playable"
@
click=
"addNext()"
><i
class=
"step forward icon"
></i>
{{ $gettext('
Play next
') }}
</div>
<div
class=
"item"
:disabled=
"!playable"
@
click=
"addNext(true)"
><i
class=
"arrow down icon"
></i>
{{ $gettext('
Play now
') }}
</div>
</div>
</div>
</div>
...
...
@@ -44,10 +44,10 @@ export default {
computed
:
{
title
()
{
if
(
this
.
playable
)
{
return
this
.
$t
(
'
Play immediatly
'
)
return
this
.
$
gettex
t
(
'
Play immediatly
'
)
}
else
{
if
(
this
.
track
)
{
return
this
.
$t
(
'
This track is not imported and cannot be played
'
)
return
this
.
$
gettex
t
(
'
This track is not imported and cannot be played
'
)
}
}
},
...
...
@@ -142,8 +142,9 @@ export default {
if
(
tracks
.
length
<
1
)
{
return
}
let
msg
=
this
.
$ngettext
(
'
%{ count } track was added to your queue
'
,
'
%{ count } tracks were added to your queue
'
,
tracks
.
length
)
this
.
$store
.
commit
(
'
ui/addMessage
'
,
{
content
:
this
.
$
t
(
'
{% tracks %} tracks were added to your queue.
'
,
{
tracks
:
tracks
.
length
}),
content
:
this
.
$
gettextInterpolate
(
msg
,
{
count
:
tracks
.
length
}),
date
:
new
Date
()
})
}
...
...
front/src/components/audio/Player.vue
View file @
833c0f16
...
...
@@ -57,44 +57,44 @@
<div
class=
"two wide column controls ui grid"
>
<div
:title=
"$t('Previous track')"
:title=
"$
gettex
t('Previous track')"
class=
"two wide column control"
:disabled=
"emptyQueue"
>
<i
@
click=
"previous"
:class=
"['ui', 'backward',
{'disabled': emptyQueue}, 'big', 'icon']">
</i>
</div>
<div
v-if=
"!playing"
:title=
"$t('Play track')"
:title=
"$
gettex
t('Play track')"
class=
"two wide column control"
>
<i
@
click=
"togglePlay"
:class=
"['ui', 'play',
{'disabled': !currentTrack}, 'big', 'icon']">
</i>
</div>
<div
v-else
:title=
"$t('Pause track')"
:title=
"$
gettex
t('Pause track')"
class=
"two wide column control"
>
<i
@
click=
"togglePlay"
:class=
"['ui', 'pause',
{'disabled': !currentTrack}, 'big', 'icon']">
</i>
</div>
<div
:title=
"$t('Next track')"
:title=
"$
gettex
t('Next track')"
class=
"two wide column control"
:disabled=
"!hasNext"
>
<i
@
click=
"next"
:class=
"['ui',
{'disabled': !hasNext}, 'step', 'forward', 'big', 'icon']" >
</i>
</div>
<div
class=
"two wide column control volume-control"
>
<i
:title=
"$t('Unmute')"
@
click=
"$store.commit('player/volume', 1)"
v-if=
"volume === 0"
class=
"volume off secondary icon"
></i>
<i
:title=
"$t('Mute')"
@
click=
"$store.commit('player/volume', 0)"
v-else-if=
"volume
<
0.5"
class=
"volume down secondary icon"
></i>
<i
:title=
"$t('Mute')"
@
click=
"$store.commit('player/volume', 0)"
v-else
class=
"volume up secondary icon"
></i>
<i
:title=
"$
gettex
t('Unmute')"
@
click=
"$store.commit('player/volume', 1)"
v-if=
"volume === 0"
class=
"volume off secondary icon"
></i>
<i
:title=
"$
gettex
t('Mute')"
@
click=
"$store.commit('player/volume', 0)"
v-else-if=
"volume
<
0.5"
class=
"volume down secondary icon"
></i>
<i
:title=
"$
gettex
t('Mute')"
@
click=
"$store.commit('player/volume', 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=
"two wide column control looping"
>
<i
:title=
"$t('Looping disabled. Click to switch to single-track looping.')"
:title=
"$
gettex
t('Looping disabled. Click to switch to single-track looping.')"
v-if=
"looping === 0"
@
click=
"$store.commit('player/looping', 1)"
:disabled=
"!currentTrack"
:class=
"['ui',
{'disabled': !currentTrack}, 'step', 'repeat', 'secondary', 'icon']">
</i>
<i
:title=
"$t('Looping on a single track. Click to switch to whole queue looping.')"
:title=
"$
gettex
t('Looping on a single track. Click to switch to whole queue looping.')"
v-if=
"looping === 1"
@
click=
"$store.commit('player/looping', 2)"
:disabled=
"!currentTrack"
...
...
@@ -102,7 +102,7 @@
<span
class=
"ui circular tiny orange label"
>
1
</span>
</i>
<i
:title=
"$t('Looping on whole queue. Click to disable looping.')"
:title=
"$
gettex
t('Looping on whole queue. Click to disable looping.')"
v-if=
"looping === 2"
@
click=
"$store.commit('player/looping', 0)"
:disabled=
"!currentTrack"
...
...
@@ -111,7 +111,7 @@
</div>
<div
:disabled=
"queue.tracks.length === 0"
:title=
"$t('Shuffle your queue')"
:title=
"$
gettex
t('Shuffle your queue')"
class=
"two wide column control"
>
<div
v-if=
"isShuffling"
class=
"ui inline shuffling inverted small active loader"
></div>
<i
v-else
@
click=
"shuffle()"
:class=
"['ui', 'random', 'secondary',
{'disabled': queue.tracks.length === 0}, 'icon']" >
</i>
...
...
@@ -119,7 +119,7 @@
<div
class=
"one wide column"
></div>
<div
:disabled=
"queue.tracks.length === 0"
:title=
"$t('Clear your queue')"
:title=
"$
gettex
t('Clear your queue')"
class=
"two wide column control"
>
<i
@
click=
"clean()"
:class=
"['ui', 'trash', 'secondary',
{'disabled': queue.tracks.length === 0}, 'icon']" >
</i>
</div>
...
...
@@ -185,7 +185,7 @@ export default {
self
.
$store
.
dispatch
(
'
queue/shuffle
'
,
()
=>
{
self
.
isShuffling
=
false
self
.
$store
.
commit
(
'
ui/addMessage
'
,
{
content
:
self
.
$t
(
'
Queue shuffled!
'
),
content
:
self
.
$
gettex
t
(
'
Queue shuffled!
'
),
date
:
new
Date
()
})
})
...
...
front/src/components/audio/Search.vue
View file @
833c0f16
<
template
>
<div>
<h2>
<i18next
path=
"
Search for some music
"
/>
</h2>
<h2>
{{
$gettext
(
'
Search for some music
'
)
}}
</h2>
<div
:class=
"['ui',
{'loading': isLoading }, 'search']">
<div
class=
"ui icon big input"
>
<i
class=
"search icon"
></i>
...
...
@@ -8,22 +8,22 @@
</div>
</div>
<template
v-if=
"query.length > 0"
>
<h3
class=
"ui title"
>
<i18next
path=
"
Artists
"
/>
</h3>
<h3
class=
"ui title"
>
{{
$gettext
(
'
Artists
'
)
}}
</h3>
<div
v-if=
"results.artists.length > 0"
class=
"ui stackable three column grid"
>
<div
class=
"column"
:key=
"artist.id"
v-for=
"artist in results.artists"
>
<artist-card
class=
"fluid"
:artist=
"artist"
></artist-card>
</div>
</div>
<p
v-else
>
<i18next
path=
"
Sorry, we did not found any artist matching your query
"
/>
</p>
<p
v-else
>
{{
$gettext
(
'
Sorry, we did not found any artist matching your query
'
)
}}
</p>
</
template
>
<
template
v-if=
"query.length > 0"
>
<h3
class=
"ui title"
>
<i18next
path=
"
Albums
"
/>
</h3>
<h3
class=
"ui title"
>
{{
$gettext
(
'
Albums
'
)
}}
</h3>
<div
v-if=
"results.albums.length > 0"
class=
"ui stackable three column grid"
>
<div
class=
"column"
:key=
"album.id"
v-for=
"album in results.albums"
>
<album-card
class=
"fluid"
:album=
"album"
></album-card>
</div>