+
+
+ Back to settings
+
+
+
+
+
+
-
+
About %{ instance }
-
- About this instance
+
+ About this instance
- About %{instanceName}
+
+ About %{instanceName}
- About page
+ About page
-
-
+
@@ -27,31 +27,31 @@
- Using Funkwhale
+ Using Funkwhale
- Documentation
- Mobile and desktop apps
- Keyboard shortcuts
+ Documentation
+ Mobile and desktop apps
+ Keyboard shortcuts
- Getting help
+ Getting help
- About Funkwhale
+ About Funkwhale
- The funkwhale logo was kindly designed and provided by Francis Gading.
+ The funkwhale logo was kindly designed and provided by Francis Gading.
@@ -66,18 +66,6 @@ import axios from 'axios'
export default {
props: ["version"],
- methods: {
- switchInstance() {
- let confirm = window.confirm(
- this.$gettext(
- "This will erase your local data and disconnect you, do you want to continue?"
- )
- )
- if (confirm) {
- this.$store.commit("instance/instanceUrl", null)
- }
- }
- },
computed: {
...mapState({
messages: state => state.ui.messages
@@ -88,13 +76,6 @@ export default {
parser.href = url
return parser.hostname
},
- suggestedInstances() {
- let instances = [
- this.$store.getters["instance/defaultUrl"](),
- "https://demo.funkwhale.audio"
- ]
- return instances
- }
}
}
@@ -102,4 +83,8 @@ export default {
footer p {
color: grey;
}
+
+footer#footer div.item:hover {
+ color: rgba(0, 0, 0, 0.87);
+}
diff --git a/front/src/components/Home.vue b/front/src/components/Home.vue
index bdca00005..b88369d95 100644
--- a/front/src/components/Home.vue
+++ b/front/src/components/Home.vue
@@ -3,15 +3,15 @@
- Welcome on Funkwhale
+ Welcome on Funkwhale
- We think listening to music should be simple.
+ We think listening to music should be simple.
- Learn more about this instance
+ Learn more about this instance
- Get me to the library
+ Get me to the library
@@ -22,9 +22,9 @@
- Why funkwhale?
+ Why funkwhale?
- That's simple: we loved Grooveshark and we want to build something even better.
+ That's simple: we loved Grooveshark and we want to build something even better.
@@ -35,26 +35,26 @@
- Unlimited music
+ Unlimited music
- Funkwhale is designed to make it easy to listen to music you like, or to discover new artists.
+ Funkwhale is designed to make it easy to listen to music you like, or to discover new artists.
- Click once, listen for hours using built-in radios
+ Click once, listen for hours using built-in radios
- Keep a track of your favorite songs
+ Keep a track of your favorite songs
- Playlists? We got them
+ Playlists? We got them
@@ -62,28 +62,23 @@
- Clean library
+ A clean library
- Funkwhale takes care of handling your music .
+ Funkwhale takes care of handling your music .
-
-
-
- Import music from various platforms, such as YouTube or SoundCloud
-
-
+ v-translate="{url: musicbrainzUrl}"
+ translate-context="Content/Home/List item/Verb">
Get quality metadata about your music thanks to MusicBrainz
- Covers, lyrics, our goal is to have them all ;)
+ Covers, lyrics, our goal is to have them all ;)
@@ -91,20 +86,20 @@
- Easy to use
+ Easy to use
- Funkwhale is dead simple to use.
+ Funkwhale is dead simple to use.
- No add-ons, no plugins : you only need a web library
+ No add-ons, no plugins : you only need a web library
- Access your music from a clean interface that focus on what really matters
+ Access your music from a clean interface that focuses on what really matters
@@ -112,26 +107,26 @@
- Your music, your way
+ Your music, your way
- Funkwhale is free and gives you control on your music.
+ Funkwhale is free and gives you control on your music.
- The plaform is free and open-source, you can install it and modify it without worries
+ The plaform is free and open-source, you can install it and modify it without worries
- We do not track you or bother you with ads
+ We do not track you or bother you with ads
- You can invite friends and family to your instance so they can enjoy your music
+ You can invite friends and family to your instance so they can enjoy your music
@@ -150,7 +145,7 @@ export default {
computed: {
labels() {
return {
- title: this.$gettext("Welcome")
+ title: this.$pgettext('Head/Home/Title', "Welcome")
}
}
}
diff --git a/front/src/components/Logo.vue b/front/src/components/Logo.vue
index ff87dc299..9785437c9 100644
--- a/front/src/components/Logo.vue
+++ b/front/src/components/Logo.vue
@@ -1,21 +1,21 @@
diff --git a/front/src/components/PageNotFound.vue b/front/src/components/PageNotFound.vue
index ef4e66f45..4dce665bb 100644
--- a/front/src/components/PageNotFound.vue
+++ b/front/src/components/PageNotFound.vue
@@ -5,14 +5,14 @@
- Page not found!
+ Page not found!
- We're sorry, the page you asked for does not exist:
+ Sorry, the page you asked for does not exist:
{{ path }}
-
- Go to home page
+
+ Go to home page
@@ -30,7 +30,7 @@ export default {
computed: {
labels() {
return {
- title: this.$gettext("Page Not Found")
+ title: this.$pgettext('Head/*/Title', "Page Not Found")
}
}
}
diff --git a/front/src/components/Pagination.vue b/front/src/components/Pagination.vue
index 963b000a8..482082238 100644
--- a/front/src/components/Pagination.vue
+++ b/front/src/components/Pagination.vue
@@ -36,7 +36,7 @@ export default {
computed: {
labels() {
return {
- pagination: this.$gettext("Pagination")
+ pagination: this.$pgettext('Content/*/Hidden text/Noun', "Pagination")
}
},
pages: function() {
diff --git a/front/src/components/SetInstanceModal.vue b/front/src/components/SetInstanceModal.vue
new file mode 100644
index 000000000..b2c278564
--- /dev/null
+++ b/front/src/components/SetInstanceModal.vue
@@ -0,0 +1,147 @@
+
+
+ Choose your instance
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/front/src/components/ShortcutsModal.vue b/front/src/components/ShortcutsModal.vue
index 2338658dd..5b1a7349d 100644
--- a/front/src/components/ShortcutsModal.vue
+++ b/front/src/components/ShortcutsModal.vue
@@ -1,11 +1,11 @@
- Keyboard shortcuts
+ Keyboard shortcuts
{{ section.title }}
@@ -18,7 +18,7 @@
@@ -35,11 +35,11 @@ export default {
sections () {
return [
{
- title: this.$gettext('General shortcuts'),
+ title: this.$pgettext('Popup/Keyboard shortcuts/Title', 'General shortcuts'),
shortcuts: [
{
key: 'h',
- summary: this.$gettext('Show available keyboard shortcuts')
+ summary: this.$pgettext('Popup/Keyboard shortcuts/Table.Label/Verb', 'Show available keyboard shortcuts')
}
]
},
@@ -52,35 +52,35 @@ export default {
// s.prevent.exact="shuffle"
{
- title: this.$gettext('Audio player shortcuts'),
+ title: this.$pgettext('Popup/Keyboard shortcuts/Title', 'Audio player shortcuts'),
shortcuts: [
{
key: 'space',
- summary: this.$gettext('Pause/play the current track')
+ summary: this.$pgettext('Popup/Keyboard shortcuts/Table.Label/Verb', 'Pause/play the current track')
},
{
key: 'ctrl left',
- summary: this.$gettext('Play previous track')
+ summary: this.$pgettext('Popup/Keyboard shortcuts/Table.Label/Verb', 'Play previous track')
},
{
key: 'ctrl right',
- summary: this.$gettext('Play next track')
+ summary: this.$pgettext('Popup/Keyboard shortcuts/Table.Label/Verb', 'Play next track')
},
{
key: 'ctrl up',
- summary: this.$gettext('Increase volume')
+ summary: this.$pgettext('Popup/Keyboard shortcuts/Table.Label/Verb', 'Increase volume')
},
{
key: 'ctrl down',
- summary: this.$gettext('Decrease volume')
+ summary: this.$pgettext('Popup/Keyboard shortcuts/Table.Label/Verb', 'Decrease volume')
},
{
key: 'l',
- summary: this.$gettext('Toggle queue looping')
+ summary: this.$pgettext('Popup/Keyboard shortcuts/Table.Label/Verb', 'Toggle queue looping')
},
{
key: 's',
- summary: this.$gettext('Shuffle queue')
+ summary: this.$pgettext('Popup/Keyboard shortcuts/Table.Label/Verb', 'Shuffle queue')
},
]
}
diff --git a/front/src/components/Sidebar.vue b/front/src/components/Sidebar.vue
index 8c44d6041..8b183b215 100644
--- a/front/src/components/Sidebar.vue
+++ b/front/src/components/Sidebar.vue
@@ -16,13 +16,13 @@
@@ -41,7 +47,8 @@ export default {
let d = {
width: null,
height: 150,
- minHeight: 100
+ minHeight: 100,
+ copied: false
}
if (this.type === 'album') {
d.height = 330
@@ -70,6 +77,11 @@ export default {
copy () {
this.$refs.textarea.select()
document.execCommand("Copy")
+ let self = this
+ self.copied = true
+ this.timeout = setTimeout(() => {
+ self.copied = false
+ }, 5000)
}
}
}
@@ -77,4 +89,9 @@ export default {
diff --git a/front/src/components/audio/PlayButton.vue b/front/src/components/audio/PlayButton.vue
index d438a14a0..c1eeeedd4 100644
--- a/front/src/components/audio/PlayButton.vue
+++ b/front/src/components/audio/PlayButton.vue
@@ -1,5 +1,5 @@
-
+
-
-
+
+
@@ -36,13 +47,13 @@ export default {
discrete: {type: Boolean, default: false},
dropdownOnly: {type: Boolean, default: false},
iconOnly: {type: Boolean, default: false},
- artist: {type: Number, required: false},
- album: {type: Number, required: false},
+ artist: {type: Object, required: false},
+ album: {type: Object, required: false},
isPlayable: {type: Boolean, required: false, default: null}
},
data () {
return {
- isLoading: false
+ isLoading: false,
}
},
mounted () {
@@ -60,17 +71,18 @@ export default {
computed: {
labels () {
return {
- playNow: this.$gettext('Play now'),
- addToQueue: this.$gettext('Add to current queue'),
- playNext: this.$gettext('Play next')
+ playNow: this.$pgettext('*/Queue/Dropdown/Button/Title', 'Play now'),
+ addToQueue: this.$pgettext('*/Queue/Dropdown/Button/Title', 'Add to current queue'),
+ playNext: this.$pgettext('*/Queue/Dropdown/Button/Title', 'Play next'),
+ startRadio: this.$pgettext('*/Queue/Dropdown/Button/Title', 'Play similar songs')
}
},
title () {
if (this.playable) {
- return this.$gettext('Play...')
+ return this.$pgettext('*/Queue/Button/Title', 'Play...')
} else {
if (this.track) {
- return this.$gettext('This track is not available in any library you have access to')
+ return this.$pgettext('*/Queue/Button/Title', 'This track is not available in any library you have access to')
}
}
},
@@ -81,7 +93,7 @@ export default {
if (this.track) {
return this.track.uploads && this.track.uploads.length > 0
} else if (this.artist) {
- return this.albums.filter((a) => {
+ return this.artist.albums.filter((a) => {
return a.is_playable === true
}).length > 0
} else if (this.tracks) {
@@ -90,9 +102,24 @@ export default {
}).length > 0
}
return false
+ },
+ filterableArtist () {
+ if (this.track) {
+ return this.track.artist
+ }
+ if (this.album) {
+ return this.album.artist
+ }
+ if (this.artist) {
+ return this.artist
+ }
}
},
methods: {
+
+ filterArtist () {
+ this.$store.dispatch('moderation/hide', {type: 'artist', target: this.filterableArtist})
+ },
getTracksPage (page, params, resolve, tracks) {
if (page > 10) {
// it's 10 * 100 tracks already, let's stop here
@@ -103,6 +130,7 @@ export default {
let self = this
params['page_size'] = 100
params['page'] = page
+ params['hidden'] = ''
tracks = tracks || []
axios.get('tracks/', {params: params}).then((response) => {
response.data.results.forEach(t => {
@@ -133,15 +161,27 @@ export default {
} else if (self.playlist) {
let url = 'playlists/' + self.playlist.id + '/'
axios.get(url + 'tracks/').then((response) => {
- resolve(response.data.results.map(plt => {
+ let artistIds = self.$store.getters['moderation/artistFilters']().map((f) => {
+ return f.target.id
+ })
+ let tracks = response.data.results.map(plt => {
return plt.track
- }))
+ })
+ if (artistIds.length > 0) {
+ // skip tracks from hidden artists
+ tracks = tracks.filter((t) => {
+ let matchArtist = artistIds.indexOf(t.artist.id) > -1
+ return !(matchArtist || t.album && artistIds.indexOf(t.album.artist.id) > -1)
+ })
+ }
+
+ resolve(tracks)
})
} else if (self.artist) {
- let params = {'artist': self.artist, 'ordering': 'album__release_date,position'}
+ let params = {'artist': self.artist.id, 'ordering': 'album__release_date,position'}
self.getTracksPage(1, params, resolve)
} else if (self.album) {
- let params = {'album': self.album, 'ordering': 'position'}
+ let params = {'album': self.album.id, 'ordering': 'position'}
self.getTracksPage(1, params, resolve)
}
})
@@ -177,12 +217,12 @@ 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)
+ let msg = this.$npgettext('*/Queue/Message', '%{ count } track was added to your queue', '%{ count } tracks were added to your queue', tracks.length)
this.$store.commit('ui/addMessage', {
content: this.$gettextInterpolate(msg, {count: tracks.length}),
date: new Date()
})
- }
+ },
}
}
diff --git a/front/src/components/audio/Player.vue b/front/src/components/audio/Player.vue
index 575f68736..ea15ebc87 100644
--- a/front/src/components/audio/Player.vue
+++ b/front/src/components/audio/Player.vue
@@ -1,16 +1,6 @@
-
-
@@ -38,6 +28,14 @@
v-if="$store.state.auth.authenticated"
:class="['inverted']"
:track="currentTrack">
+
@@ -45,7 +43,7 @@
- {{currentTimeFormatted}}
+ {{currentTimeFormatted}}
@@ -62,14 +60,14 @@
@@ -200,7 +198,11 @@
v-if="!showVolume"
@click.prevent.stop="clean()"
class="two wide column control">
-
+
+
+
+
+
{
+ data = response.data
+ }, error => {
+ data = null
+ })
+ } else {
+ return trackData
+ }
+ if (data === null) {
+ return
+ }
+ return data
+ },
shuffle() {
let disabled = this.queue.tracks.length === 0
if (this.isShuffling || disabled) {
return
}
let self = this
- let msg = this.$gettext("Queue shuffled!")
+ let msg = this.$pgettext('Content/Queue/Message', "Queue shuffled!")
this.isShuffling = true
setTimeout(() => {
self.$store.dispatch("queue/shuffle", () => {
@@ -308,7 +347,7 @@ export default {
let time
let target = this.$refs.progress
time = (e.layerX / target.offsetWidth) * this.duration
- this.$refs.currentAudio.setCurrentTime(time)
+ this.setCurrentTime(time)
},
updateBackground() {
// delete existing canvas, if any
@@ -323,6 +362,239 @@ export default {
handleError({ sound, error }) {
this.$store.commit("player/isLoadingAudio", false)
this.$store.dispatch("player/trackErrored")
+ },
+ getSound (trackData) {
+ let cached = this.getSoundFromCache(trackData)
+ if (cached) {
+ return cached.sound
+ }
+ let srcs = this.getSrcs(trackData)
+ let self = this
+ let sound = new Howl({
+ src: srcs.map((s) => { return s.url }),
+ format: srcs.map((s) => { return s.type }),
+ autoplay: false,
+ loop: false,
+ html5: true,
+ preload: true,
+ volume: this.volume,
+ onend: function () {
+ self.ended()
+ },
+ onunlock: function () {
+ if (this.$store.state.player.playing) {
+ self.soundId = self.sound.play(self.soundId)
+ }
+ },
+ onload: function () {
+ let sound = this
+ let node = this._sounds[0]._node;
+ node.addEventListener('progress', () => {
+ if (sound != self.currentSound) {
+ return
+ }
+ self.updateBuffer(node)
+ })
+ },
+ onplay: function () {
+ self.$store.commit('player/isLoadingAudio', false)
+ self.$store.commit('player/resetErrorCount')
+ self.$store.commit('player/errored', false)
+ self.$store.commit('player/duration', this.duration())
+ },
+ onloaderror: function (sound, error) {
+ self.removeFromCache(this)
+ if (this != self.currentSound) {
+ return
+ }
+ console.log('Error while playing:', sound, error)
+ self.handleError({sound, error})
+ },
+ })
+ this.addSoundToCache(sound, trackData)
+ return sound
+ },
+ getSrcs: function (trackData) {
+ let sources = trackData.uploads.map(u => {
+ return {
+ type: u.extension,
+ url: this.$store.getters['instance/absoluteUrl'](u.listen_url),
+ }
+ })
+ // We always add a transcoded MP3 src at the end
+ // because transcoding is expensive, but we want browsers that do
+ // not support other codecs to be able to play it :)
+ sources.push({
+ type: 'mp3',
+ url: url.updateQueryString(
+ this.$store.getters['instance/absoluteUrl'](trackData.listen_url),
+ 'to',
+ 'mp3'
+ )
+ })
+ if (this.$store.state.auth.authenticated) {
+ // we need to send the token directly in url
+ // so authentication can be checked by the backend
+ // because for audio files we cannot use the regular Authentication
+ // header
+ sources.forEach(e => {
+ e.url = url.updateQueryString(e.url, 'jwt', this.$store.state.auth.token)
+ })
+ }
+ return sources
+ },
+
+ updateBuffer (node) {
+ // from https://github.com/goldfire/howler.js/issues/752#issuecomment-372083163
+ let range = 0;
+ let bf = node.buffered;
+ let time = node.currentTime;
+ try {
+ while(!(bf.start(range) <= time && time <= bf.end(range))) {
+ range += 1;
+ }
+ } catch (IndexSizeError) {
+ return
+ }
+ let loadPercentage
+ let start = bf.start(range)
+ let end = bf.end(range)
+ if (range === 0) {
+ // easy case, no user-seek
+ let loadStartPercentage = start / node.duration;
+ let loadEndPercentage = end / node.duration;
+ loadPercentage = loadEndPercentage - loadStartPercentage;
+ } else {
+ let loaded = end - start
+ let remainingToLoad = node.duration - start
+ // user seeked a specific position in the audio, our progress must be
+ // computed based on the remaining portion of the track
+ loadPercentage = loaded / remainingToLoad;
+ }
+ if (loadPercentage * 100 === this.bufferProgress) {
+ return
+ }
+ this.$store.commit('player/bufferProgress', loadPercentage * 100)
+ },
+ updateProgress: function () {
+ this.isUpdatingTime = true
+ if (this.currentSound && this.currentSound.state() === 'loaded') {
+ let t = this.currentSound.seek()
+ let d = this.currentSound.duration()
+ this.$store.dispatch('player/updateProgress', t)
+ this.updateBuffer(this.currentSound._sounds[0]._node)
+ let toPreload = this.$store.state.queue.tracks[this.currentIndex + 1]
+ if (!this.nextTrackPreloaded && toPreload && !this.getSoundFromCache(toPreload) && (t > this.preloadDelay || d - t < 30)) {
+ this.getSound(toPreload)
+ this.nextTrackPreloaded = true
+ }
+ }
+ },
+ observeProgress: function (enable) {
+ let self = this
+ if (enable) {
+ if (self.progressInterval) {
+ clearInterval(self.progressInterval)
+ }
+ self.progressInterval = setInterval(() => {
+ self.updateProgress()
+ }, 1000)
+ } else {
+ clearInterval(self.progressInterval)
+ }
+ },
+ setCurrentTime (t) {
+ if (t < 0 | t > this.duration) {
+ return
+ }
+ if (!this.currentSound || !this.currentSound._sounds[0]) {
+ return
+ }
+ if (t === this.currentSound.seek()) {
+ return
+ }
+ if (t === 0) {
+ this.updateProgressThrottled.cancel()
+ }
+ this.currentSound.seek(t)
+ },
+ ended: function () {
+ let onlyTrack = this.$store.state.queue.tracks.length === 1
+ if (this.looping === 1 || (onlyTrack && this.looping === 2)) {
+ this.currentSound.seek(0)
+ this.$store.dispatch('player/updateProgress', 0)
+ this.soundId = this.currentSound.play(this.soundId)
+ } else {
+ this.$store.dispatch('player/trackEnded', this.currentTrack)
+ }
+ },
+ getSoundFromCache (trackData) {
+ return this.soundsCache.filter((d) => {
+ if (d.track.id !== trackData.id) {
+ return false
+ }
+
+ return true
+ })[0]
+ },
+ addSoundToCache (sound, trackData) {
+ let data = {
+ date: new Date(),
+ track: trackData,
+ sound: sound
+ }
+ this.soundsCache.push(data)
+ this.checkCache()
+ },
+ checkCache () {
+ let self = this
+ let toKeep = []
+ _.reverse(this.soundsCache).forEach((e) => {
+ if (toKeep.length < self.maxPreloaded) {
+ toKeep.push(e)
+ } else {
+ let src = e.sound._src
+ e.sound.unload()
+ }
+ })
+ this.soundsCache = _.reverse(toKeep)
+ },
+ removeFromCache (sound) {
+ let toKeep = []
+ this.soundsCache.forEach((e) => {
+ if (e.sound === sound) {
+ e.sound.unload()
+ } else {
+ toKeep.push(e)
+ }
+ })
+ this.soundsCache = toKeep
+ },
+ async loadSound (newValue, oldValue) {
+ let trackData = newValue
+ let oldSound = this.currentSound
+ if (oldSound && trackData !== oldValue) {
+ oldSound.stop(this.soundId)
+ this.soundId = null
+ }
+ if (!trackData) {
+ return
+ }
+ if (!this.isShuffling && trackData != oldValue) {
+ trackData = await this.getTrackData(trackData)
+ if (trackData === null) {
+ this.handleError({})
+ }
+ this.currentSound = this.getSound(trackData)
+ this.$store.commit('player/isLoadingAudio', true)
+ if (this.playing) {
+ this.soundId = this.currentSound.play()
+ this.$store.commit('player/errored', false)
+ this.$store.commit('player/playing', true)
+ this.$store.dispatch('player/updateProgress', 0)
+ this.observeProgress(true)
+ }
+ }
}
},
computed: {
@@ -335,6 +607,7 @@ export default {
duration: state => state.player.duration,
bufferProgress: state => state.player.bufferProgress,
errored: state => state.player.errored,
+ currentTime: state => state.player.currentTime,
queue: state => state.queue
}),
...mapGetters({
@@ -345,25 +618,29 @@ export default {
currentTimeFormatted: "player/currentTimeFormatted",
progress: "player/progress"
}),
+ updateProgressThrottled () {
+ return _.throttle(this.updateProgress, 250)
+ },
labels() {
- let audioPlayer = this.$gettext("Media player")
- let previousTrack = this.$gettext("Previous track")
- let play = this.$gettext("Play track")
- let pause = this.$gettext("Pause track")
- let next = this.$gettext("Next track")
- let unmute = this.$gettext("Unmute")
- let mute = this.$gettext("Mute")
- let loopingDisabled = this.$gettext(
+ let audioPlayer = this.$pgettext('Sidebar/Player/Hidden text', "Media player")
+ let previousTrack = this.$pgettext('Sidebar/Player/Icon.Tooltip', "Previous track")
+ let play = this.$pgettext('Sidebar/Player/Icon.Tooltip/Verb', "Play track")
+ let pause = this.$pgettext('Sidebar/Player/Icon.Tooltip/Verb', "Pause track")
+ let next = this.$pgettext('Sidebar/Player/Icon.Tooltip', "Next track")
+ let unmute = this.$pgettext('Sidebar/Player/Icon.Tooltip/Verb', "Unmute")
+ let mute = this.$pgettext('Sidebar/Player/Icon.Tooltip/Verb', "Mute")
+ let loopingDisabled = this.$pgettext('Sidebar/Player/Icon.Tooltip',
"Looping disabled. Click to switch to single-track looping."
)
- let loopingSingle = this.$gettext(
+ let loopingSingle = this.$pgettext('Sidebar/Player/Icon.Tooltip',
"Looping on a single track. Click to switch to whole queue looping."
)
- let loopingWhole = this.$gettext(
+ let loopingWhole = this.$pgettext('Sidebar/Player/Icon.Tooltip',
"Looping on whole queue. Click to disable looping."
)
- let shuffle = this.$gettext("Shuffle your queue")
- let clear = this.$gettext("Clear your queue")
+ let shuffle = this.$pgettext('Sidebar/Player/Icon.Tooltip/Verb', "Shuffle your queue")
+ let clear = this.$pgettext('Sidebar/Player/Icon.Tooltip/Verb', "Clear your queue")
+ let addArtistContentFilter = this.$pgettext('Sidebar/Player/Icon.Tooltip/Verb', 'Hide content from this artist…')
return {
audioPlayer,
previousTrack,
@@ -376,7 +653,8 @@ export default {
loopingSingle,
loopingWhole,
shuffle,
- clear
+ clear,
+ addArtistContentFilter,
}
},
style: function() {
@@ -404,22 +682,62 @@ export default {
})
.join(", ")
return gradients
- }
+ },
},
watch: {
- currentTrack(newValue, oldValue) {
- if (!this.isShuffling && newValue != oldValue) {
- this.audioKey = String(new Date())
- }
- if (!newValue || !newValue.album.cover) {
- this.ambiantColors = this.defaultAmbiantColors
- }
+ currentTrack: {
+ async handler (newValue, oldValue) {
+ if (newValue === oldValue) {
+ return
+ }
+ this.nextTrackPreloaded = false
+ clearTimeout(this.playTimeout)
+ let self = this
+ if (this.currentSound) {
+ this.currentSound.pause()
+ }
+ this.$store.commit("player/isLoadingAudio", true)
+ this.playTimeout = setTimeout(async () => {
+ await self.loadSound(newValue, oldValue)
+ if (!newValue || !newValue.album.cover) {
+ self.ambiantColors = self.defaultAmbiantColors
+ }
+ }, 500);
+ },
+ immediate: false
},
volume(newValue) {
this.sliderVolume = newValue
+ if (this.currentSound) {
+ this.currentSound.volume(newValue)
+ }
},
sliderVolume(newValue) {
this.$store.commit("player/volume", newValue)
+ },
+ playing: async function (newValue) {
+ if (this.currentSound) {
+ if (newValue === true) {
+ this.soundId = this.currentSound.play(this.soundId)
+ } else {
+ this.currentSound.pause(this.soundId)
+ }
+ } else {
+ await this.loadSound(this.currentTrack, null)
+ }
+
+ this.observeProgress(newValue)
+ },
+ currentTime (newValue) {
+ if (!this.isUpdatingTime) {
+ this.setCurrentTime(newValue)
+ }
+ this.isUpdatingTime = false
+ },
+ emptyQueue (newValue) {
+ if (newValue) {
+ Howler.unload()
+ }
}
}
}
@@ -491,6 +809,7 @@ export default {
bottom: 1.1rem;
left: 25%;
cursor: pointer;
+ background-color: transparent;
}
input[type="range"]:focus {
outline: none;
@@ -607,4 +926,8 @@ export default {
animation-timing-function: linear;
animation-iteration-count: infinite;
}
+i.icons .corner.icon {
+ font-size: 1em;
+ right: -0.3em;
+}
diff --git a/front/src/components/audio/Search.vue b/front/src/components/audio/Search.vue
index 307ca878f..40dbe403d 100644
--- a/front/src/components/audio/Search.vue
+++ b/front/src/components/audio/Search.vue
@@ -1,6 +1,6 @@
- Search for some music
+ Search for some music
@@ -8,22 +8,22 @@
- Artists
+ Artists
No artist matched your query
+ No artist matched your query
- Albums
+ Albums
No album matched your query
+ No album matched your query
@@ -62,7 +62,7 @@ export default {
computed: {
labels () {
return {
- searchPlaceholder: this.$gettext('Artist, album, track…')
+ searchPlaceholder: this.$pgettext('*/Search/Input.Placeholder', 'Artist, album, track…')
}
}
},
diff --git a/front/src/components/audio/SearchBar.vue b/front/src/components/audio/SearchBar.vue
index 534ac0ac4..28b11b040 100644
--- a/front/src/components/audio/SearchBar.vue
+++ b/front/src/components/audio/SearchBar.vue
@@ -17,14 +17,14 @@ export default {
computed: {
labels () {
return {
- placeholder: this.$gettext('Search for artists, albums, tracks…')
+ placeholder: this.$pgettext('Sidebar/Search/Input.Placeholder', 'Search for artists, albums, tracks…')
}
}
},
mounted () {
- let artistLabel = this.$gettext('Artist')
- let albumLabel = this.$gettext('Album')
- let trackLabel = this.$gettext('Track')
+ let artistLabel = this.$pgettext('*/*/*/Noun', 'Artist')
+ let albumLabel = this.$pgettext('*/*/*', 'Album')
+ let trackLabel = this.$pgettext('*/*/*/Noun', 'Track')
let self = this
jQuery(this.$el).search({
type: 'category',
diff --git a/front/src/components/audio/Track.vue b/front/src/components/audio/Track.vue
deleted file mode 100644
index 2e0f8c421..000000000
--- a/front/src/components/audio/Track.vue
+++ /dev/null
@@ -1,225 +0,0 @@
-
-
-
-
-
-
-
-
diff --git a/front/src/components/audio/album/Card.vue b/front/src/components/audio/album/Card.vue
index 258b0f9d1..bdc0dd6cb 100644
--- a/front/src/components/audio/album/Card.vue
+++ b/front/src/components/audio/album/Card.vue
@@ -11,7 +11,7 @@
@@ -36,21 +36,21 @@
- Show %{ count } more track
+ Show %{ count } more track
- Collapse
+ Collapse
-
- Play all
+
+ Play all
- %{ count } track
+ %{ count } track
@@ -83,6 +83,20 @@ export default {
return this.album.tracks
}
return this.album.tracks.slice(0, this.initialTracks)
+ },
+ tracksWithAlbum () {
+ // needed to include album data (especially cover)
+ // with tracks appended in queue (#795)
+ let self = this
+ return this.album.tracks.map(t => {
+ return {
+ ...t,
+ album: {
+ ...self.album,
+ tracks: []
+ }
+ }
+ })
}
}
}
diff --git a/front/src/components/audio/album/Widget.vue b/front/src/components/audio/album/Widget.vue
index f7100a9b8..ecc0a280e 100644
--- a/front/src/components/audio/album/Widget.vue
+++ b/front/src/components/audio/album/Widget.vue
@@ -5,6 +5,7 @@
+
@@ -12,7 +13,7 @@
-
@@ -28,7 +29,7 @@
-
- Show 1 more album
+ Show 1 more album
- Collapse
+ Collapse
@@ -39,10 +39,10 @@
- 1 album
+ 1 album
-
- Play all
+
+ Play all
diff --git a/front/src/components/audio/track/Row.vue b/front/src/components/audio/track/Row.vue
index e391977f3..abc4137bf 100644
--- a/front/src/components/audio/track/Row.vue
+++ b/front/src/components/audio/track/Row.vue
@@ -38,9 +38,9 @@
{{ time.parse(track.uploads[0].duration) }}
- N/A
+ N/A
-
+
-
-
-
- Title Artist Album Duration
-
-
-
+
+
+
+
+ Title Artist Album Duration
+
+
+
+
+
diff --git a/front/src/components/auth/ApplicationForm.vue b/front/src/components/auth/ApplicationForm.vue
new file mode 100644
index 000000000..c2eefbfdf
--- /dev/null
+++ b/front/src/components/auth/ApplicationForm.vue
@@ -0,0 +1,185 @@
+
+
+
+
+
+
+
+
+
diff --git a/front/src/components/auth/ApplicationNew.vue b/front/src/components/auth/ApplicationNew.vue
new file mode 100644
index 000000000..ba1a575fe
--- /dev/null
+++ b/front/src/components/auth/ApplicationNew.vue
@@ -0,0 +1,46 @@
+
+
+
+
+
+
diff --git a/front/src/components/auth/Authorize.vue b/front/src/components/auth/Authorize.vue
new file mode 100644
index 000000000..dd9bf6eeb
--- /dev/null
+++ b/front/src/components/auth/Authorize.vue
@@ -0,0 +1,201 @@
+
+
+
+
+ Authorize third-party app
+
+
+
+
+
+
+ Copy-paste the following code in the application:
+
+
+
+
+
+
+
+
diff --git a/front/src/components/auth/Login.vue b/front/src/components/auth/Login.vue
index 09a9c6c29..20aff3236 100644
--- a/front/src/components/auth/Login.vue
+++ b/front/src/components/auth/Login.vue
@@ -2,20 +2,20 @@
- Log in to your Funkwhale account
+ Log in to your Funkwhale account
@@ -43,7 +43,7 @@ export default {
profile: state => state.auth.profile
}),
labels() {
- let msg = this.$gettext("%{ username }'s profile")
+ let msg = this.$pgettext('Head/Profile/Title', "%{ username }'s profile")
let usernameProfile = this.$gettextInterpolate(msg, {
username: this.username
})
diff --git a/front/src/components/auth/Settings.vue b/front/src/components/auth/Settings.vue
index 8305d0e05..6e2516ed8 100644
--- a/front/src/components/auth/Settings.vue
+++ b/front/src/components/auth/Settings.vue
@@ -1,18 +1,18 @@
-
+
- Account settings
+ Account settings
-
-
+
+
- Avatar
+ Avatar
- Upload a new avatar
- PNG, GIF or JPG. At most 2MB. Will be downscaled to 400x400px.
+ Upload a new avatar
+ PNG, GIF or JPG. At most 2MB. Will be downscaled to 400x400px.
- Current avatar
+ Current avatar
![]()
-
-
+
+
+
- Change my password
+ Change my password
+
+
+
+
+
+
+ Content filters
+
+
+ Content filters help you hide content you don't want to see on the service.
+
+
+
+ Hidden artists
+
+
+
+
+ Name Creation date
+
+
+
+
+
+ {{ filter.target.name }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Authorized apps
+
+
+ This is the list of applications that have access to your account data.
+
+
+
+
+ Application Permissions
+
+
+
+
+ {{ app.name }}
+
+
+ {{ app.scopes }}
+
+
+
+ Revoke
+ Revoke access for application "%{ application }"?
+ This will prevent this application from accessing the service on your behalf.
+ Revoke access
+
+
+
+
+
+
+
+ You don't have any application connected with your account.
+
+
+ If you authorize third-party applications to access your data, those applications will be listed here.
+
+
+
+
+
+
+
+
+ Your applications
+
+
+ This is the list of applications that you have created.
+
+ Create a new application
+
+
+
+
+ Application Scopes Creation date
+
+
+
+
+
+ {{ app.name }}
+
+
+
+ {{ app.scopes }}
+
+
+
+
+
+ Edit
+
+
+ Delete
+ Delete application "%{ application }"?
+ This will permanently delete the application and all the associated tokens.
+ Delete application
+
+
+
+
+
+
+
+ You don't have any configured application yet.
+
+
+ Create one to integrate Funkwhale with third-party applications.
+
+
+
@@ -137,6 +297,8 @@ export default {
isLoadingAvatar: false,
avatarErrors: [],
avatar: null,
+ apps: [],
+ ownedApps: [],
settings: {
success: false,
errors: [],
@@ -156,6 +318,10 @@ export default {
})
return d
},
+ created () {
+ this.fetchApps()
+ this.fetchOwnedApps()
+ },
mounted() {
$("select.dropdown").dropdown()
},
@@ -181,6 +347,56 @@ export default {
}
)
},
+ fetchApps() {
+ this.apps = []
+ let self = this
+ let url = `oauth/grants/`
+ return axios.get(url).then(
+ response => {
+ self.apps = response.data
+ },
+ error => {
+ }
+ )
+ },
+ fetchOwnedApps() {
+ this.ownedApps = []
+ let self = this
+ let url = `oauth/apps/`
+ return axios.get(url).then(
+ response => {
+ self.ownedApps = response.data.results
+ },
+ error => {
+ }
+ )
+ },
+ revokeApp (id) {
+ let self = this
+ let url = `oauth/grants/${id}/`
+ return axios.delete(url).then(
+ response => {
+ self.apps = self.apps.filter(a => {
+ return a.client_id != id
+ })
+ },
+ error => {
+ }
+ )
+ },
+ deleteApp (id) {
+ let self = this
+ let url = `oauth/apps/${id}/`
+ return axios.delete(url).then(
+ response => {
+ self.ownedApps = self.ownedApps.filter(a => {
+ return a.client_id != id
+ })
+ },
+ error => {
+ }
+ )
+ },
submitAvatar() {
this.isLoadingAvatar = true
this.avatarErrors = []
@@ -260,7 +476,7 @@ export default {
computed: {
labels() {
return {
- title: this.$gettext("Account Settings")
+ title: this.$pgettext('Head/Settings/Title', "Account Settings")
}
},
orderedSettingsFields() {
diff --git a/front/src/components/auth/Signup.vue b/front/src/components/auth/Signup.vue
index 815f0253a..974d082bd 100644
--- a/front/src/components/auth/Signup.vue
+++ b/front/src/components/auth/Signup.vue
@@ -2,22 +2,22 @@
- Create a funkwhale account
+ Create a funkwhale account
@@ -94,12 +94,13 @@ export default {
},
computed: {
labels() {
- let title = this.$gettext("Sign Up")
- let placeholder = this.$gettext(
+ let title = this.$pgettext("*/Signup/Title", "Sign Up")
+ let placeholder = this.$pgettext(
+ "Content/Signup/Form/Placeholder",
"Enter your invitation code (case insensitive)"
)
- let usernamePlaceholder = this.$gettext("Enter your username")
- let emailPlaceholder = this.$gettext("Enter your email")
+ let usernamePlaceholder = this.$pgettext("Content/Signup/Form/Placeholder", "Enter your username")
+ let emailPlaceholder = this.$pgettext("Content/Signup/Form/Placeholder", "Enter your email")
return {
title,
usernamePlaceholder,
diff --git a/front/src/components/auth/SubsonicTokenForm.vue b/front/src/components/auth/SubsonicTokenForm.vue
index ac752d921..0184074e2 100644
--- a/front/src/components/auth/SubsonicTokenForm.vue
+++ b/front/src/components/auth/SubsonicTokenForm.vue
@@ -1,23 +1,23 @@
+
+
diff --git a/front/src/components/common/HumanDate.vue b/front/src/components/common/HumanDate.vue
index eed245ea6..fde04f141 100644
--- a/front/src/components/common/HumanDate.vue
+++ b/front/src/components/common/HumanDate.vue
@@ -1,10 +1,16 @@
-
+
diff --git a/front/src/components/federation/LibraryWidget.vue b/front/src/components/federation/LibraryWidget.vue
index b9554d01f..7d2418087 100644
--- a/front/src/components/federation/LibraryWidget.vue
+++ b/front/src/components/federation/LibraryWidget.vue
@@ -4,7 +4,7 @@
- No matching library.
+ No matching library.
diff --git a/front/src/components/forms/PasswordInput.vue b/front/src/components/forms/PasswordInput.vue
index 26454048e..d57e3017f 100644
--- a/front/src/components/forms/PasswordInput.vue
+++ b/front/src/components/forms/PasswordInput.vue
@@ -23,7 +23,7 @@ export default {
computed: {
labels () {
return {
- title: this.$gettext('Show/hide password')
+ title: this.$pgettext('Content/Settings/Button.Tooltip/Verb', 'Show/hide password')
}
},
passwordInputType () {
diff --git a/front/src/components/globals.js b/front/src/components/globals.js
index 99e57095c..711b227ae 100644
--- a/front/src/components/globals.js
+++ b/front/src/components/globals.js
@@ -44,5 +44,8 @@ import Tooltip from '@/components/common/Tooltip'
Vue.component('tooltip', Tooltip)
+import EmptyState from '@/components/common/EmptyState'
+
+Vue.component('empty-state', EmptyState)
export default {}
diff --git a/front/src/components/instance/Stats.vue b/front/src/components/instance/Stats.vue
index 78632f6d2..9b08d2f37 100644
--- a/front/src/components/instance/Stats.vue
+++ b/front/src/components/instance/Stats.vue
@@ -3,7 +3,7 @@
- User activity
+ User activity
@@ -11,48 +11,48 @@
{{ stats.users }}
- users
+ users
{{ stats.listenings }}
- tracks listened
+ tracks listened
{{ stats.trackFavorites }}
- Tracks favorited
+ Tracks favorited
- Library
+ Library
{{ parseInt(stats.musicDuration) }}
- Hours of music
+ Hours of music
{{ stats.artists }}
- Artists
+ Artists
{{ stats.albums }}
- Albums
+ Albums
{{ stats.tracks }}
- tracks
+ Tracks
diff --git a/front/src/components/library/Album.vue b/front/src/components/library/Album.vue
deleted file mode 100644
index bb33b7e7f..000000000
--- a/front/src/components/library/Album.vue
+++ /dev/null
@@ -1,197 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
- {{ album.title }}
-
-
-
-
-
-
- Play all
-
-
-
-
- Search on Wikipedia
-
-
-
- View on MusicBrainz
-
-
-
-
-
- Embed this album on your website
-
-
-
-
-
-
-
-
-
- Volume %{ number }
-
- Play all
-
-
-
-
-
-
- Tracks
-
-
-
-
-
- User libraries
-
-
- This album is present in the following libraries:
-
-
-
-
-
-
-
-
-
-
diff --git a/front/src/components/library/AlbumBase.vue b/front/src/components/library/AlbumBase.vue
new file mode 100644
index 000000000..1f89bef88
--- /dev/null
+++ b/front/src/components/library/AlbumBase.vue
@@ -0,0 +1,193 @@
+
+
+
+
+
+
+
+
+
+
+
+ {{ object.title }}
+
+
+
+
+
+
+
+
+
+
+
diff --git a/front/src/components/library/AlbumDetail.vue b/front/src/components/library/AlbumDetail.vue
new file mode 100644
index 000000000..d695b6e59
--- /dev/null
+++ b/front/src/components/library/AlbumDetail.vue
@@ -0,0 +1,62 @@
+
+
+
+
+ Volume %{ number }
+
+ Play all
+
+
+
+
+
+
+ Tracks
+
+
+
+
+
+ User libraries
+
+
+ This album is present in the following libraries:
+
+
+
+
+
+
+
+
+
diff --git a/front/src/components/library/AlbumEdit.vue b/front/src/components/library/AlbumEdit.vue
new file mode 100644
index 000000000..b7c24737c
--- /dev/null
+++ b/front/src/components/library/AlbumEdit.vue
@@ -0,0 +1,41 @@
+
+
+
+
+
+ Edit this album
+ Suggest an edit on this album
+
+
+
+
+
+
diff --git a/front/src/components/library/Albums.vue b/front/src/components/library/Albums.vue
new file mode 100644
index 000000000..9817af830
--- /dev/null
+++ b/front/src/components/library/Albums.vue
@@ -0,0 +1,189 @@
+
+
+
+
+ Browsing albums
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/front/src/components/library/Artist.vue b/front/src/components/library/Artist.vue
deleted file mode 100644
index dd2be35ae..000000000
--- a/front/src/components/library/Artist.vue
+++ /dev/null
@@ -1,195 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
- {{ artist.name }}
-
-
- %{ count } track in %{ albumsCount } albums
-
-
-
-
-
-
- Play all albums
-
-
-
-
- Search on Wikipedia
-
-
-
- View on MusicBrainz
-
-
-
-
-
-
-
-
- Albums by this artist
-
-
-
-
-
- Tracks by this artist
-
-
-
-
- User libraries
-
-
- This artist is present in the following libraries:
-
-
-
-
-
-
-
-
-
-
diff --git a/front/src/components/library/ArtistBase.vue b/front/src/components/library/ArtistBase.vue
new file mode 100644
index 000000000..5da7370ba
--- /dev/null
+++ b/front/src/components/library/ArtistBase.vue
@@ -0,0 +1,246 @@
+
+
+
+
+
+
+
+
+
+
+
+ {{ object.name }}
+
+
+ %{ count } track in %{ albumsCount } albums
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/front/src/components/library/ArtistDetail.vue b/front/src/components/library/ArtistDetail.vue
new file mode 100644
index 000000000..1dfbdd0d2
--- /dev/null
+++ b/front/src/components/library/ArtistDetail.vue
@@ -0,0 +1,102 @@
+
+
+
+
+
+
+
+
+
+
+
+ Albums by this artist
+
+
+
+
+
+ Tracks by this artist
+
+
+
+
+ User libraries
+
+
+ This artist is present in the following libraries:
+
+
+
+
+
+
+
+
+
diff --git a/front/src/components/library/ArtistEdit.vue b/front/src/components/library/ArtistEdit.vue
new file mode 100644
index 000000000..80a9ae0c3
--- /dev/null
+++ b/front/src/components/library/ArtistEdit.vue
@@ -0,0 +1,41 @@
+
+
+
+
+
+ Edit this artist
+ Suggest an edit on this artist
+
+
+
+
+
+
diff --git a/front/src/components/library/Artists.vue b/front/src/components/library/Artists.vue
index 41b3b2c6f..5f4102ab1 100644
--- a/front/src/components/library/Artists.vue
+++ b/front/src/components/library/Artists.vue
@@ -2,18 +2,18 @@
- Browsing artists
+ Browsing artists
-
+
-
+
-
+
+
+
+
+
diff --git a/front/src/components/library/EditList.vue b/front/src/components/library/EditList.vue
new file mode 100644
index 000000000..2ff1fc72a
--- /dev/null
+++ b/front/src/components/library/EditList.vue
@@ -0,0 +1,74 @@
+
+
+
+
+ Upload new tracks
+ Upload new tracks
@@ -49,17 +48,25 @@
-
- This reference will be used to group imported files together.
+
+ This reference will be used to group imported files together.
-
+
-
+
+
+
+ Remaining storage space
+
+
+ {{ remainingSpace * 1000 * 1000 | humanSize}}
+
+
- Click to select files to upload or drag and drop files or directories
+ Click to select files to upload or drag and drop files or directories
- Supported extensions: %{ extensions }
+ Supported extensions: %{ extensions }
-
-
-
- Filename Size Status
-
-
-
- {{ file.name | truncate(60) }}
- {{ file.size | humanSize }}
-
-
-
- {{ file.error }}
+
+
+
+
+
+ Filename Size Status
+
+
+
+ {{ file.name | truncate(60) }}
+ {{ file.size | humanSize }}
+
+
+
+ {{ file.error }}
+
-
-
- Uploaded
-
-
- Uploading…
- ({{ parseInt(file.progress) }}%)
-
-
- Pending
-
-
-
-
-
-
+
+ Uploaded
+
+
+ Uploading…
+ ({{ parseInt(file.progress) }}%)
+
+
+ Pending
+
+
+
+
+
+
+
@@ -149,6 +159,8 @@ export default {
uploadUrl: this.$store.getters['instance/absoluteUrl']("/api/v1/uploads/"),
importReference,
supportedExtensions: ["flac", "ogg", "mp3", "opus"],
+ isLoadingQuota: false,
+ quotaStatus: null,
uploads: {
pending: 0,
finished: 0,
@@ -161,6 +173,7 @@ export default {
},
created() {
this.fetchStatus();
+ this.fetchQuota();
this.$store.commit("ui/addWebsocketEventHandler", {
eventName: "import.status_updated",
id: "fileUpload",
@@ -184,8 +197,23 @@ export default {
});
return returnValue;
},
+ fetchQuota () {
+ let self = this
+ self.isLoadingQuota = true
+ axios.get('users/users/me/').then((response) => {
+ self.quotaStatus = response.data.quota_status
+ self.isLoadingQuota = false
+ })
+ },
inputFile(newFile, oldFile) {
- this.$refs.upload.active = true;
+ if (!newFile) {
+ return
+ }
+ if (this.remainingSpace < newFile.size / (1000 * 1000)) {
+ newFile.error = 'denied'
+ } else {
+ this.$refs.upload.active = true;
+ }
},
fetchStatus() {
let self = this;
@@ -227,17 +255,17 @@ export default {
},
computed: {
labels() {
- let denied = this.$gettext(
+ let denied = this.$pgettext('Content/Library/Help text',
"Upload denied, ensure the file is not too big and that you have not reached your quota"
);
- let server = this.$gettext(
+ let server = this.$pgettext('Content/Library/Help text',
"Cannot upload this file, ensure it is not too big"
);
- let network = this.$gettext(
+ let network = this.$pgettext('Content/Library/Help text',
"A network error occured while uploading this file"
);
- let timeout = this.$gettext("Upload timeout, please try again");
- let extension = this.$gettext(
+ let timeout = this.$pgettext('Content/Library/Help text', "Upload timeout, please try again");
+ let extension = this.$pgettext('Content/Library/Help text',
"Invalid file type, ensure you are uploading an audio file. Supported file extensions are %{ extensions }"
);
return {
@@ -304,6 +332,19 @@ export default {
},
hasActiveUploads () {
return this.sortedFiles.filter((f) => { return f.active }).length > 0
+ },
+ remainingSpace () {
+ if (!this.quotaStatus) {
+ return 0
+ }
+ return Math.max(0, this.quotaStatus.remaining - (this.uploadedSize / (1000 * 1000)))
+ },
+ uploadedSize () {
+ let uploaded = 0
+ this.files.forEach((f) => {
+ uploaded += f.size * (f.progress / 100)
+ })
+ return uploaded
}
},
watch: {
@@ -315,7 +356,12 @@ export default {
},
importReference: _.debounce(function() {
this.$router.replace({ query: { import: this.importReference } });
- }, 500)
+ }, 500),
+ remainingSpace (newValue) {
+ if (newValue <= 0) {
+ this.$refs.upload.active = false;
+ }
+ }
}
};
diff --git a/front/src/components/library/Home.vue b/front/src/components/library/Home.vue
index 19b667335..eea8f22c5 100644
--- a/front/src/components/library/Home.vue
+++ b/front/src/components/library/Home.vue
@@ -4,17 +4,17 @@
- Recently listened
+ Recently listened
- Recently favorited
+ Recently favorited
- Playlists
+ Playlists
@@ -22,7 +22,7 @@
- Recently added
+ Recently added
@@ -62,7 +62,7 @@ export default {
computed: {
labels() {
return {
- title: this.$gettext("Home")
+ title: this.$pgettext('Head/Home/Title', "Home")
}
}
},
diff --git a/front/src/components/library/ImportStatusModal.vue b/front/src/components/library/ImportStatusModal.vue
new file mode 100644
index 000000000..5632e9594
--- /dev/null
+++ b/front/src/components/library/ImportStatusModal.vue
@@ -0,0 +1,164 @@
+
+
+
+
+ Import detail
+
+
+
+
+
+
+
+
+
+
+
+
+ Error type
+
+
+ {{ getErrorData(upload).label }}
+
+
+
+
+ Error detail
+
+
+ {{ getErrorData(upload).detail }}
+
+ -
+ {{ row.key}}: {{ row.value}}
+
+
+
+
+
+
+ Getting help
+
+
+
+
+
+
+
+ Debug information
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/front/src/components/library/Library.vue b/front/src/components/library/Library.vue
index c0371fe58..ea4d98e65 100644
--- a/front/src/components/library/Library.vue
+++ b/front/src/components/library/Library.vue
@@ -2,16 +2,19 @@
- Browsing radios
+ Browsing radios
- Instance radios
+ Instance radios
-
- User radios
+ User radios
- Create your own radio
+ Create your own radio
-
+
-
+
-
+
-
+
-
+
@@ -27,31 +27,31 @@
Using Funkwhale
+Using Funkwhale
- Documentation
- Mobile and desktop apps
- Keyboard shortcuts
+ Documentation
+ Mobile and desktop apps
+ Keyboard shortcuts
Getting help
+Getting help
About Funkwhale
+About Funkwhale
-
- Welcome on Funkwhale
+ Welcome on Funkwhale
-
- Why funkwhale?
+ Why funkwhale?
-
@@ -35,26 +35,26 @@
- Unlimited music
+ Unlimited music
-
- Click once, listen for hours using built-in radios
+ Click once, listen for hours using built-in radios
- Keep a track of your favorite songs
+ Keep a track of your favorite songs
- Playlists? We got them
+ Playlists? We got them
- Clean library
+ A clean library
-
-
@@ -91,20 +86,20 @@
-
-
- Import music from various platforms, such as YouTube or SoundCloud
-
-
+ v-translate="{url: musicbrainzUrl}"
+ translate-context="Content/Home/List item/Verb">
Get quality metadata about your music thanks to MusicBrainz
- Covers, lyrics, our goal is to have them all ;)
+ Covers, lyrics, our goal is to have them all ;)
- Easy to use
+ Easy to use
-
- No add-ons, no plugins : you only need a web library
+ No add-ons, no plugins : you only need a web library
- Access your music from a clean interface that focus on what really matters
+ Access your music from a clean interface that focuses on what really matters
- Your music, your way
+ Your music, your way
-
- The plaform is free and open-source, you can install it and modify it without worries
+ The plaform is free and open-source, you can install it and modify it without worries
- We do not track you or bother you with ads
+ We do not track you or bother you with ads
- You can invite friends and family to your instance so they can enjoy your music
+ You can invite friends and family to your instance so they can enjoy your music
- Page not found!
+ Page not found!
-
+
+
+
+
+
+
+
+
+
-
+
@@ -28,7 +29,7 @@
-
@@ -39,10 +39,10 @@
+
@@ -36,13 +47,13 @@ export default {
discrete: {type: Boolean, default: false},
dropdownOnly: {type: Boolean, default: false},
iconOnly: {type: Boolean, default: false},
- artist: {type: Number, required: false},
- album: {type: Number, required: false},
+ artist: {type: Object, required: false},
+ album: {type: Object, required: false},
isPlayable: {type: Boolean, required: false, default: null}
},
data () {
return {
- isLoading: false
+ isLoading: false,
}
},
mounted () {
@@ -60,17 +71,18 @@ export default {
computed: {
labels () {
return {
- playNow: this.$gettext('Play now'),
- addToQueue: this.$gettext('Add to current queue'),
- playNext: this.$gettext('Play next')
+ playNow: this.$pgettext('*/Queue/Dropdown/Button/Title', 'Play now'),
+ addToQueue: this.$pgettext('*/Queue/Dropdown/Button/Title', 'Add to current queue'),
+ playNext: this.$pgettext('*/Queue/Dropdown/Button/Title', 'Play next'),
+ startRadio: this.$pgettext('*/Queue/Dropdown/Button/Title', 'Play similar songs')
}
},
title () {
if (this.playable) {
- return this.$gettext('Play...')
+ return this.$pgettext('*/Queue/Button/Title', 'Play...')
} else {
if (this.track) {
- return this.$gettext('This track is not available in any library you have access to')
+ return this.$pgettext('*/Queue/Button/Title', 'This track is not available in any library you have access to')
}
}
},
@@ -81,7 +93,7 @@ export default {
if (this.track) {
return this.track.uploads && this.track.uploads.length > 0
} else if (this.artist) {
- return this.albums.filter((a) => {
+ return this.artist.albums.filter((a) => {
return a.is_playable === true
}).length > 0
} else if (this.tracks) {
@@ -90,9 +102,24 @@ export default {
}).length > 0
}
return false
+ },
+ filterableArtist () {
+ if (this.track) {
+ return this.track.artist
+ }
+ if (this.album) {
+ return this.album.artist
+ }
+ if (this.artist) {
+ return this.artist
+ }
}
},
methods: {
+
+ filterArtist () {
+ this.$store.dispatch('moderation/hide', {type: 'artist', target: this.filterableArtist})
+ },
getTracksPage (page, params, resolve, tracks) {
if (page > 10) {
// it's 10 * 100 tracks already, let's stop here
@@ -103,6 +130,7 @@ export default {
let self = this
params['page_size'] = 100
params['page'] = page
+ params['hidden'] = ''
tracks = tracks || []
axios.get('tracks/', {params: params}).then((response) => {
response.data.results.forEach(t => {
@@ -133,15 +161,27 @@ export default {
} else if (self.playlist) {
let url = 'playlists/' + self.playlist.id + '/'
axios.get(url + 'tracks/').then((response) => {
- resolve(response.data.results.map(plt => {
+ let artistIds = self.$store.getters['moderation/artistFilters']().map((f) => {
+ return f.target.id
+ })
+ let tracks = response.data.results.map(plt => {
return plt.track
- }))
+ })
+ if (artistIds.length > 0) {
+ // skip tracks from hidden artists
+ tracks = tracks.filter((t) => {
+ let matchArtist = artistIds.indexOf(t.artist.id) > -1
+ return !(matchArtist || t.album && artistIds.indexOf(t.album.artist.id) > -1)
+ })
+ }
+
+ resolve(tracks)
})
} else if (self.artist) {
- let params = {'artist': self.artist, 'ordering': 'album__release_date,position'}
+ let params = {'artist': self.artist.id, 'ordering': 'album__release_date,position'}
self.getTracksPage(1, params, resolve)
} else if (self.album) {
- let params = {'album': self.album, 'ordering': 'position'}
+ let params = {'album': self.album.id, 'ordering': 'position'}
self.getTracksPage(1, params, resolve)
}
})
@@ -177,12 +217,12 @@ 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)
+ let msg = this.$npgettext('*/Queue/Message', '%{ count } track was added to your queue', '%{ count } tracks were added to your queue', tracks.length)
this.$store.commit('ui/addMessage', {
content: this.$gettextInterpolate(msg, {count: tracks.length}),
date: new Date()
})
- }
+ },
}
}
diff --git a/front/src/components/audio/Player.vue b/front/src/components/audio/Player.vue
index 575f68736..ea15ebc87 100644
--- a/front/src/components/audio/Player.vue
+++ b/front/src/components/audio/Player.vue
@@ -1,16 +1,6 @@
-
-
@@ -45,7 +43,7 @@
{
+ data = response.data
+ }, error => {
+ data = null
+ })
+ } else {
+ return trackData
+ }
+ if (data === null) {
+ return
+ }
+ return data
+ },
shuffle() {
let disabled = this.queue.tracks.length === 0
if (this.isShuffling || disabled) {
return
}
let self = this
- let msg = this.$gettext("Queue shuffled!")
+ let msg = this.$pgettext('Content/Queue/Message', "Queue shuffled!")
this.isShuffling = true
setTimeout(() => {
self.$store.dispatch("queue/shuffle", () => {
@@ -308,7 +347,7 @@ export default {
let time
let target = this.$refs.progress
time = (e.layerX / target.offsetWidth) * this.duration
- this.$refs.currentAudio.setCurrentTime(time)
+ this.setCurrentTime(time)
},
updateBackground() {
// delete existing canvas, if any
@@ -323,6 +362,239 @@ export default {
handleError({ sound, error }) {
this.$store.commit("player/isLoadingAudio", false)
this.$store.dispatch("player/trackErrored")
+ },
+ getSound (trackData) {
+ let cached = this.getSoundFromCache(trackData)
+ if (cached) {
+ return cached.sound
+ }
+ let srcs = this.getSrcs(trackData)
+ let self = this
+ let sound = new Howl({
+ src: srcs.map((s) => { return s.url }),
+ format: srcs.map((s) => { return s.type }),
+ autoplay: false,
+ loop: false,
+ html5: true,
+ preload: true,
+ volume: this.volume,
+ onend: function () {
+ self.ended()
+ },
+ onunlock: function () {
+ if (this.$store.state.player.playing) {
+ self.soundId = self.sound.play(self.soundId)
+ }
+ },
+ onload: function () {
+ let sound = this
+ let node = this._sounds[0]._node;
+ node.addEventListener('progress', () => {
+ if (sound != self.currentSound) {
+ return
+ }
+ self.updateBuffer(node)
+ })
+ },
+ onplay: function () {
+ self.$store.commit('player/isLoadingAudio', false)
+ self.$store.commit('player/resetErrorCount')
+ self.$store.commit('player/errored', false)
+ self.$store.commit('player/duration', this.duration())
+ },
+ onloaderror: function (sound, error) {
+ self.removeFromCache(this)
+ if (this != self.currentSound) {
+ return
+ }
+ console.log('Error while playing:', sound, error)
+ self.handleError({sound, error})
+ },
+ })
+ this.addSoundToCache(sound, trackData)
+ return sound
+ },
+ getSrcs: function (trackData) {
+ let sources = trackData.uploads.map(u => {
+ return {
+ type: u.extension,
+ url: this.$store.getters['instance/absoluteUrl'](u.listen_url),
+ }
+ })
+ // We always add a transcoded MP3 src at the end
+ // because transcoding is expensive, but we want browsers that do
+ // not support other codecs to be able to play it :)
+ sources.push({
+ type: 'mp3',
+ url: url.updateQueryString(
+ this.$store.getters['instance/absoluteUrl'](trackData.listen_url),
+ 'to',
+ 'mp3'
+ )
+ })
+ if (this.$store.state.auth.authenticated) {
+ // we need to send the token directly in url
+ // so authentication can be checked by the backend
+ // because for audio files we cannot use the regular Authentication
+ // header
+ sources.forEach(e => {
+ e.url = url.updateQueryString(e.url, 'jwt', this.$store.state.auth.token)
+ })
+ }
+ return sources
+ },
+
+ updateBuffer (node) {
+ // from https://github.com/goldfire/howler.js/issues/752#issuecomment-372083163
+ let range = 0;
+ let bf = node.buffered;
+ let time = node.currentTime;
+ try {
+ while(!(bf.start(range) <= time && time <= bf.end(range))) {
+ range += 1;
+ }
+ } catch (IndexSizeError) {
+ return
+ }
+ let loadPercentage
+ let start = bf.start(range)
+ let end = bf.end(range)
+ if (range === 0) {
+ // easy case, no user-seek
+ let loadStartPercentage = start / node.duration;
+ let loadEndPercentage = end / node.duration;
+ loadPercentage = loadEndPercentage - loadStartPercentage;
+ } else {
+ let loaded = end - start
+ let remainingToLoad = node.duration - start
+ // user seeked a specific position in the audio, our progress must be
+ // computed based on the remaining portion of the track
+ loadPercentage = loaded / remainingToLoad;
+ }
+ if (loadPercentage * 100 === this.bufferProgress) {
+ return
+ }
+ this.$store.commit('player/bufferProgress', loadPercentage * 100)
+ },
+ updateProgress: function () {
+ this.isUpdatingTime = true
+ if (this.currentSound && this.currentSound.state() === 'loaded') {
+ let t = this.currentSound.seek()
+ let d = this.currentSound.duration()
+ this.$store.dispatch('player/updateProgress', t)
+ this.updateBuffer(this.currentSound._sounds[0]._node)
+ let toPreload = this.$store.state.queue.tracks[this.currentIndex + 1]
+ if (!this.nextTrackPreloaded && toPreload && !this.getSoundFromCache(toPreload) && (t > this.preloadDelay || d - t < 30)) {
+ this.getSound(toPreload)
+ this.nextTrackPreloaded = true
+ }
+ }
+ },
+ observeProgress: function (enable) {
+ let self = this
+ if (enable) {
+ if (self.progressInterval) {
+ clearInterval(self.progressInterval)
+ }
+ self.progressInterval = setInterval(() => {
+ self.updateProgress()
+ }, 1000)
+ } else {
+ clearInterval(self.progressInterval)
+ }
+ },
+ setCurrentTime (t) {
+ if (t < 0 | t > this.duration) {
+ return
+ }
+ if (!this.currentSound || !this.currentSound._sounds[0]) {
+ return
+ }
+ if (t === this.currentSound.seek()) {
+ return
+ }
+ if (t === 0) {
+ this.updateProgressThrottled.cancel()
+ }
+ this.currentSound.seek(t)
+ },
+ ended: function () {
+ let onlyTrack = this.$store.state.queue.tracks.length === 1
+ if (this.looping === 1 || (onlyTrack && this.looping === 2)) {
+ this.currentSound.seek(0)
+ this.$store.dispatch('player/updateProgress', 0)
+ this.soundId = this.currentSound.play(this.soundId)
+ } else {
+ this.$store.dispatch('player/trackEnded', this.currentTrack)
+ }
+ },
+ getSoundFromCache (trackData) {
+ return this.soundsCache.filter((d) => {
+ if (d.track.id !== trackData.id) {
+ return false
+ }
+
+ return true
+ })[0]
+ },
+ addSoundToCache (sound, trackData) {
+ let data = {
+ date: new Date(),
+ track: trackData,
+ sound: sound
+ }
+ this.soundsCache.push(data)
+ this.checkCache()
+ },
+ checkCache () {
+ let self = this
+ let toKeep = []
+ _.reverse(this.soundsCache).forEach((e) => {
+ if (toKeep.length < self.maxPreloaded) {
+ toKeep.push(e)
+ } else {
+ let src = e.sound._src
+ e.sound.unload()
+ }
+ })
+ this.soundsCache = _.reverse(toKeep)
+ },
+ removeFromCache (sound) {
+ let toKeep = []
+ this.soundsCache.forEach((e) => {
+ if (e.sound === sound) {
+ e.sound.unload()
+ } else {
+ toKeep.push(e)
+ }
+ })
+ this.soundsCache = toKeep
+ },
+ async loadSound (newValue, oldValue) {
+ let trackData = newValue
+ let oldSound = this.currentSound
+ if (oldSound && trackData !== oldValue) {
+ oldSound.stop(this.soundId)
+ this.soundId = null
+ }
+ if (!trackData) {
+ return
+ }
+ if (!this.isShuffling && trackData != oldValue) {
+ trackData = await this.getTrackData(trackData)
+ if (trackData === null) {
+ this.handleError({})
+ }
+ this.currentSound = this.getSound(trackData)
+ this.$store.commit('player/isLoadingAudio', true)
+ if (this.playing) {
+ this.soundId = this.currentSound.play()
+ this.$store.commit('player/errored', false)
+ this.$store.commit('player/playing', true)
+ this.$store.dispatch('player/updateProgress', 0)
+ this.observeProgress(true)
+ }
+ }
}
},
computed: {
@@ -335,6 +607,7 @@ export default {
duration: state => state.player.duration,
bufferProgress: state => state.player.bufferProgress,
errored: state => state.player.errored,
+ currentTime: state => state.player.currentTime,
queue: state => state.queue
}),
...mapGetters({
@@ -345,25 +618,29 @@ export default {
currentTimeFormatted: "player/currentTimeFormatted",
progress: "player/progress"
}),
+ updateProgressThrottled () {
+ return _.throttle(this.updateProgress, 250)
+ },
labels() {
- let audioPlayer = this.$gettext("Media player")
- let previousTrack = this.$gettext("Previous track")
- let play = this.$gettext("Play track")
- let pause = this.$gettext("Pause track")
- let next = this.$gettext("Next track")
- let unmute = this.$gettext("Unmute")
- let mute = this.$gettext("Mute")
- let loopingDisabled = this.$gettext(
+ let audioPlayer = this.$pgettext('Sidebar/Player/Hidden text', "Media player")
+ let previousTrack = this.$pgettext('Sidebar/Player/Icon.Tooltip', "Previous track")
+ let play = this.$pgettext('Sidebar/Player/Icon.Tooltip/Verb', "Play track")
+ let pause = this.$pgettext('Sidebar/Player/Icon.Tooltip/Verb', "Pause track")
+ let next = this.$pgettext('Sidebar/Player/Icon.Tooltip', "Next track")
+ let unmute = this.$pgettext('Sidebar/Player/Icon.Tooltip/Verb', "Unmute")
+ let mute = this.$pgettext('Sidebar/Player/Icon.Tooltip/Verb', "Mute")
+ let loopingDisabled = this.$pgettext('Sidebar/Player/Icon.Tooltip',
"Looping disabled. Click to switch to single-track looping."
)
- let loopingSingle = this.$gettext(
+ let loopingSingle = this.$pgettext('Sidebar/Player/Icon.Tooltip',
"Looping on a single track. Click to switch to whole queue looping."
)
- let loopingWhole = this.$gettext(
+ let loopingWhole = this.$pgettext('Sidebar/Player/Icon.Tooltip',
"Looping on whole queue. Click to disable looping."
)
- let shuffle = this.$gettext("Shuffle your queue")
- let clear = this.$gettext("Clear your queue")
+ let shuffle = this.$pgettext('Sidebar/Player/Icon.Tooltip/Verb', "Shuffle your queue")
+ let clear = this.$pgettext('Sidebar/Player/Icon.Tooltip/Verb', "Clear your queue")
+ let addArtistContentFilter = this.$pgettext('Sidebar/Player/Icon.Tooltip/Verb', 'Hide content from this artist…')
return {
audioPlayer,
previousTrack,
@@ -376,7 +653,8 @@ export default {
loopingSingle,
loopingWhole,
shuffle,
- clear
+ clear,
+ addArtistContentFilter,
}
},
style: function() {
@@ -404,22 +682,62 @@ export default {
})
.join(", ")
return gradients
- }
+ },
},
watch: {
- currentTrack(newValue, oldValue) {
- if (!this.isShuffling && newValue != oldValue) {
- this.audioKey = String(new Date())
- }
- if (!newValue || !newValue.album.cover) {
- this.ambiantColors = this.defaultAmbiantColors
- }
+ currentTrack: {
+ async handler (newValue, oldValue) {
+ if (newValue === oldValue) {
+ return
+ }
+ this.nextTrackPreloaded = false
+ clearTimeout(this.playTimeout)
+ let self = this
+ if (this.currentSound) {
+ this.currentSound.pause()
+ }
+ this.$store.commit("player/isLoadingAudio", true)
+ this.playTimeout = setTimeout(async () => {
+ await self.loadSound(newValue, oldValue)
+ if (!newValue || !newValue.album.cover) {
+ self.ambiantColors = self.defaultAmbiantColors
+ }
+ }, 500);
+ },
+ immediate: false
},
volume(newValue) {
this.sliderVolume = newValue
+ if (this.currentSound) {
+ this.currentSound.volume(newValue)
+ }
},
sliderVolume(newValue) {
this.$store.commit("player/volume", newValue)
+ },
+ playing: async function (newValue) {
+ if (this.currentSound) {
+ if (newValue === true) {
+ this.soundId = this.currentSound.play(this.soundId)
+ } else {
+ this.currentSound.pause(this.soundId)
+ }
+ } else {
+ await this.loadSound(this.currentTrack, null)
+ }
+
+ this.observeProgress(newValue)
+ },
+ currentTime (newValue) {
+ if (!this.isUpdatingTime) {
+ this.setCurrentTime(newValue)
+ }
+ this.isUpdatingTime = false
+ },
+ emptyQueue (newValue) {
+ if (newValue) {
+ Howler.unload()
+ }
}
}
}
@@ -491,6 +809,7 @@ export default {
bottom: 1.1rem;
left: 25%;
cursor: pointer;
+ background-color: transparent;
}
input[type="range"]:focus {
outline: none;
@@ -607,4 +926,8 @@ export default {
animation-timing-function: linear;
animation-iteration-count: infinite;
}
+i.icons .corner.icon {
+ font-size: 1em;
+ right: -0.3em;
+}
diff --git a/front/src/components/audio/Search.vue b/front/src/components/audio/Search.vue
index 307ca878f..40dbe403d 100644
--- a/front/src/components/audio/Search.vue
+++ b/front/src/components/audio/Search.vue
@@ -1,6 +1,6 @@
@@ -83,6 +83,20 @@ export default {
return this.album.tracks
}
return this.album.tracks.slice(0, this.initialTracks)
+ },
+ tracksWithAlbum () {
+ // needed to include album data (especially cover)
+ // with tracks appended in queue (#795)
+ let self = this
+ return this.album.tracks.map(t => {
+ return {
+ ...t,
+ album: {
+ ...self.album,
+ tracks: []
+ }
+ }
+ })
}
}
}
diff --git a/front/src/components/audio/album/Widget.vue b/front/src/components/audio/album/Widget.vue
index f7100a9b8..ecc0a280e 100644
--- a/front/src/components/audio/album/Widget.vue
+++ b/front/src/components/audio/album/Widget.vue
@@ -5,6 +5,7 @@
+
@@ -38,6 +28,14 @@
v-if="$store.state.auth.authenticated"
:class="['inverted']"
:track="currentTrack">
+
-
{{currentTimeFormatted}}
+{{currentTimeFormatted}}
@@ -62,14 +60,14 @@
@@ -200,7 +198,11 @@
v-if="!showVolume"
@click.prevent.stop="clean()"
class="two wide column control">
-
+
+
+
+
+
-
+
-
+
+
@@ -62,7 +62,7 @@ export default {
computed: {
labels () {
return {
- searchPlaceholder: this.$gettext('Artist, album, track…')
+ searchPlaceholder: this.$pgettext('*/Search/Input.Placeholder', 'Artist, album, track…')
}
}
},
diff --git a/front/src/components/audio/SearchBar.vue b/front/src/components/audio/SearchBar.vue
index 534ac0ac4..28b11b040 100644
--- a/front/src/components/audio/SearchBar.vue
+++ b/front/src/components/audio/SearchBar.vue
@@ -17,14 +17,14 @@ export default {
computed: {
labels () {
return {
- placeholder: this.$gettext('Search for artists, albums, tracks…')
+ placeholder: this.$pgettext('Sidebar/Search/Input.Placeholder', 'Search for artists, albums, tracks…')
}
}
},
mounted () {
- let artistLabel = this.$gettext('Artist')
- let albumLabel = this.$gettext('Album')
- let trackLabel = this.$gettext('Track')
+ let artistLabel = this.$pgettext('*/*/*/Noun', 'Artist')
+ let albumLabel = this.$pgettext('*/*/*', 'Album')
+ let trackLabel = this.$pgettext('*/*/*/Noun', 'Track')
let self = this
jQuery(this.$el).search({
type: 'category',
diff --git a/front/src/components/audio/Track.vue b/front/src/components/audio/Track.vue
deleted file mode 100644
index 2e0f8c421..000000000
--- a/front/src/components/audio/Track.vue
+++ /dev/null
@@ -1,225 +0,0 @@
-
-
-
-
-
-
-
-
diff --git a/front/src/components/audio/album/Card.vue b/front/src/components/audio/album/Card.vue
index 258b0f9d1..bdc0dd6cb 100644
--- a/front/src/components/audio/album/Card.vue
+++ b/front/src/components/audio/album/Card.vue
@@ -11,7 +11,7 @@
@@ -36,21 +36,21 @@
Search for some music
+ Search for some music
@@ -8,22 +8,22 @@
Artists
+ Artists
Albums
+ Albums
- Show %{ count } more track
+ Show %{ count } more track
- Collapse
+ Collapse
-
- Play all
+
+ Play all
- %{ count } track
+ %{ count } track
@@ -12,7 +13,7 @@
-
- Show 1 more album
+ Show 1 more album
- Collapse
+ Collapse
- 1 album
+ 1 album
-
- Play all
+
+ Play all
| - | - | - | |||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
+
+
+
+
+
diff --git a/front/src/components/auth/ApplicationForm.vue b/front/src/components/auth/ApplicationForm.vue
new file mode 100644
index 000000000..c2eefbfdf
--- /dev/null
+++ b/front/src/components/auth/ApplicationForm.vue
@@ -0,0 +1,185 @@
+
+
+
+
+
+
+
+
+
diff --git a/front/src/components/auth/ApplicationNew.vue b/front/src/components/auth/ApplicationNew.vue
new file mode 100644
index 000000000..ba1a575fe
--- /dev/null
+++ b/front/src/components/auth/ApplicationNew.vue
@@ -0,0 +1,46 @@
+
+ | + | + | + | |||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
+
+
+
+ Authorize third-party app
+
+
+
+
+
+
+
+
-
+
@@ -43,7 +43,7 @@ export default {
profile: state => state.auth.profile
}),
labels() {
- let msg = this.$gettext("%{ username }'s profile")
+ let msg = this.$pgettext('Head/Profile/Title', "%{ username }'s profile")
let usernameProfile = this.$gettextInterpolate(msg, {
username: this.username
})
diff --git a/front/src/components/auth/Settings.vue b/front/src/components/auth/Settings.vue
index 8305d0e05..6e2516ed8 100644
--- a/front/src/components/auth/Settings.vue
+++ b/front/src/components/auth/Settings.vue
@@ -1,18 +1,18 @@
Log in to your Funkwhale account
+ Log in to your Funkwhale account
-
+
-
-
-
+
+
-
-
-
+
+
+
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ You don't have any application connected with your account.
+
+
+ If you authorize third-party applications to access your data, those applications will be listed here.
+
+
+
+
+
+
+
+
+
+ Create a new application
+
+
+
+
+
+
+ You don't have any configured application yet.
+
+
+ Create one to integrate Funkwhale with third-party applications.
+
+
+
- Account settings
+ Account settings
- Avatar
+ Avatar
-
-
+
Upload a new avatar
- Upload a new avatar
+
-
+
![]()
Current avatar
+ Current avatar
- Change my password
+ Change my password
+
+
+ Content filters
+
+
+
+ Hidden artists
+
+ | + | ||
|---|---|---|
|
+ |
+
+ |
+ + + | +
+
+
+ Authorized apps
+
+
+ | + | ||
|---|---|---|
| + {{ app.name }} + | ++ {{ app.scopes }} + | +
+ Revoke access for application "%{ application }"? + |
+
+
+
+ Your applications
+
+
+ | + | |||
|---|---|---|---|
|
+ |
+ + {{ app.scopes }} + | +
+ |
+
+ Delete application "%{ application }"? + |
+
-
+
@@ -94,12 +94,13 @@ export default {
},
computed: {
labels() {
- let title = this.$gettext("Sign Up")
- let placeholder = this.$gettext(
+ let title = this.$pgettext("*/Signup/Title", "Sign Up")
+ let placeholder = this.$pgettext(
+ "Content/Signup/Form/Placeholder",
"Enter your invitation code (case insensitive)"
)
- let usernamePlaceholder = this.$gettext("Enter your username")
- let emailPlaceholder = this.$gettext("Enter your email")
+ let usernamePlaceholder = this.$pgettext("Content/Signup/Form/Placeholder", "Enter your username")
+ let emailPlaceholder = this.$pgettext("Content/Signup/Form/Placeholder", "Enter your email")
return {
title,
usernamePlaceholder,
diff --git a/front/src/components/auth/SubsonicTokenForm.vue b/front/src/components/auth/SubsonicTokenForm.vue
index ac752d921..0184074e2 100644
--- a/front/src/components/auth/SubsonicTokenForm.vue
+++ b/front/src/components/auth/SubsonicTokenForm.vue
@@ -1,23 +1,23 @@
+
+
diff --git a/front/src/components/common/HumanDate.vue b/front/src/components/common/HumanDate.vue
index eed245ea6..fde04f141 100644
--- a/front/src/components/common/HumanDate.vue
+++ b/front/src/components/common/HumanDate.vue
@@ -1,10 +1,16 @@
-
+
diff --git a/front/src/components/federation/LibraryWidget.vue b/front/src/components/federation/LibraryWidget.vue
index b9554d01f..7d2418087 100644
--- a/front/src/components/federation/LibraryWidget.vue
+++ b/front/src/components/federation/LibraryWidget.vue
@@ -4,7 +4,7 @@
Create a funkwhale account
+ Create a funkwhale account
- User activity
+ User activity
@@ -11,48 +11,48 @@
{{ stats.users }}
-
{{ stats.listenings }}
-
{{ stats.trackFavorites }}
-
-
+
Hours of music
+ Hours of music
Artists
+ Artists
Albums
+ Albums
tracks
+ Tracks
diff --git a/front/src/components/library/Album.vue b/front/src/components/library/Album.vue
deleted file mode 100644
index bb33b7e7f..000000000
--- a/front/src/components/library/Album.vue
+++ /dev/null
@@ -1,197 +0,0 @@
-
- Library
+ Library
{{ parseInt(stats.musicDuration) }}
-
{{ stats.artists }}
-
{{ stats.albums }}
-
{{ stats.tracks }}
-
-
-
-
-
-
-
-
-
-
- Play all
-
-
-
-
- Search on Wikipedia
-
-
-
- View on MusicBrainz
-
-
-
-
-
-
-
-
-
-
- {{ album.title }}
-
-
-
-
-
-
- Embed this album on your website
-
-
-
-
-
-
-
-
-
- Tracks
-
-
- User libraries
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ object.title }}
+
+
+
+
+
+
+
+
+ Volume %{ number }
+
+ Play all
+
+
+
+
+
+
+
+
+
+
+
+
+
+ This album is present in the following libraries:
+
+
+
+
+
+
+
+
+
diff --git a/front/src/components/library/AlbumEdit.vue b/front/src/components/library/AlbumEdit.vue
new file mode 100644
index 000000000..b7c24737c
--- /dev/null
+++ b/front/src/components/library/AlbumEdit.vue
@@ -0,0 +1,41 @@
+
+
+
+ Tracks
+
+
+ User libraries
+
+
+
+
+
+
+
+ Edit this album
+ Suggest an edit on this album
+
+
+
+ Browsing albums
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
- Play all albums
-
-
-
-
- Search on Wikipedia
-
-
-
- View on MusicBrainz
-
-
-
-
-
- {{ artist.name }}
-
-
- %{ count } track in %{ albumsCount } albums
-
-
-
-
-
-
-
- %{ count } track in %{ albumsCount } albums
-
-
-
- Albums by this artist
-
-
-
-
- Tracks by this artist
-
-
- User libraries
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ object.name }}
+
+
+ %{ count } track in %{ albumsCount } albums
+
+
+
+
+
+
+
+
+ %{ count } track in %{ albumsCount } albums
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ This artist is present in the following libraries:
+
+
+
+
+
+
+
+
+
diff --git a/front/src/components/library/ArtistEdit.vue b/front/src/components/library/ArtistEdit.vue
new file mode 100644
index 000000000..80a9ae0c3
--- /dev/null
+++ b/front/src/components/library/ArtistEdit.vue
@@ -0,0 +1,41 @@
+
+
+
+
+
+
+
+ Albums by this artist
+
+
+
+
+
+
+ Tracks by this artist
+
+
+ User libraries
+
+
+
+
+
+
+
+ Edit this artist
+ Suggest an edit on this artist
+
+
+
- Browsing artists
+ Browsing artists
-
+
-
+
-
+
+
+
+
+
diff --git a/front/src/components/library/EditList.vue b/front/src/components/library/EditList.vue
new file mode 100644
index 000000000..2ff1fc72a
--- /dev/null
+++ b/front/src/components/library/EditList.vue
@@ -0,0 +1,74 @@
+
+
+
+
+
+
+
+
diff --git a/front/src/components/library/FileUpload.vue b/front/src/components/library/FileUpload.vue
index 7b7673b5a..a8a5d2f37 100644
--- a/front/src/components/library/FileUpload.vue
+++ b/front/src/components/library/FileUpload.vue
@@ -1,9 +1,9 @@
+
+
+
+
+
-
+
@@ -49,17 +48,25 @@
-
+
Upload new tracks
+ Upload new tracks
@@ -49,17 +48,25 @@
-
-
-
+
-
-
+
+
- Click to select files to upload or drag and drop files or directories
+ Click to select files to upload or drag and drop files or directories
- Supported extensions: %{ extensions }
+ Supported extensions: %{ extensions }
-
+
+ Remaining storage space
+
+
+ {{ remainingSpace * 1000 * 1000 | humanSize}}
+
+ -
| {{ file.name | truncate(60) }} | -{{ file.size | humanSize }} | -
-
-
- {{ file.error }}
+
+
+
|
+
@@ -149,6 +159,8 @@ export default {
uploadUrl: this.$store.getters['instance/absoluteUrl']("/api/v1/uploads/"),
importReference,
supportedExtensions: ["flac", "ogg", "mp3", "opus"],
+ isLoadingQuota: false,
+ quotaStatus: null,
uploads: {
pending: 0,
finished: 0,
@@ -161,6 +173,7 @@ export default {
},
created() {
this.fetchStatus();
+ this.fetchQuota();
this.$store.commit("ui/addWebsocketEventHandler", {
eventName: "import.status_updated",
id: "fileUpload",
@@ -184,8 +197,23 @@ export default {
});
return returnValue;
},
+ fetchQuota () {
+ let self = this
+ self.isLoadingQuota = true
+ axios.get('users/users/me/').then((response) => {
+ self.quotaStatus = response.data.quota_status
+ self.isLoadingQuota = false
+ })
+ },
inputFile(newFile, oldFile) {
- this.$refs.upload.active = true;
+ if (!newFile) {
+ return
+ }
+ if (this.remainingSpace < newFile.size / (1000 * 1000)) {
+ newFile.error = 'denied'
+ } else {
+ this.$refs.upload.active = true;
+ }
},
fetchStatus() {
let self = this;
@@ -227,17 +255,17 @@ export default {
},
computed: {
labels() {
- let denied = this.$gettext(
+ let denied = this.$pgettext('Content/Library/Help text',
"Upload denied, ensure the file is not too big and that you have not reached your quota"
);
- let server = this.$gettext(
+ let server = this.$pgettext('Content/Library/Help text',
"Cannot upload this file, ensure it is not too big"
);
- let network = this.$gettext(
+ let network = this.$pgettext('Content/Library/Help text',
"A network error occured while uploading this file"
);
- let timeout = this.$gettext("Upload timeout, please try again");
- let extension = this.$gettext(
+ let timeout = this.$pgettext('Content/Library/Help text', "Upload timeout, please try again");
+ let extension = this.$pgettext('Content/Library/Help text',
"Invalid file type, ensure you are uploading an audio file. Supported file extensions are %{ extensions }"
);
return {
@@ -304,6 +332,19 @@ export default {
},
hasActiveUploads () {
return this.sortedFiles.filter((f) => { return f.active }).length > 0
+ },
+ remainingSpace () {
+ if (!this.quotaStatus) {
+ return 0
+ }
+ return Math.max(0, this.quotaStatus.remaining - (this.uploadedSize / (1000 * 1000)))
+ },
+ uploadedSize () {
+ let uploaded = 0
+ this.files.forEach((f) => {
+ uploaded += f.size * (f.progress / 100)
+ })
+ return uploaded
}
},
watch: {
@@ -315,7 +356,12 @@ export default {
},
importReference: _.debounce(function() {
this.$router.replace({ query: { import: this.importReference } });
- }, 500)
+ }, 500),
+ remainingSpace (newValue) {
+ if (newValue <= 0) {
+ this.$refs.upload.active = false;
+ }
+ }
}
};
diff --git a/front/src/components/library/Home.vue b/front/src/components/library/Home.vue
index 19b667335..eea8f22c5 100644
--- a/front/src/components/library/Home.vue
+++ b/front/src/components/library/Home.vue
@@ -4,17 +4,17 @@
- Recently listened
+ Recently listened
- Recently favorited
+ Recently favorited
- Playlists
+ Playlists
@@ -22,7 +22,7 @@
- Recently added
+ Recently added
@@ -62,7 +62,7 @@ export default {
computed: {
labels() {
return {
- title: this.$gettext("Home")
+ title: this.$pgettext('Head/Home/Title', "Home")
}
}
},
diff --git a/front/src/components/library/ImportStatusModal.vue b/front/src/components/library/ImportStatusModal.vue
new file mode 100644
index 000000000..5632e9594
--- /dev/null
+++ b/front/src/components/library/ImportStatusModal.vue
@@ -0,0 +1,164 @@
+
+
+
+
+
+
diff --git a/front/src/components/library/Library.vue b/front/src/components/library/Library.vue
index c0371fe58..ea4d98e65 100644
--- a/front/src/components/library/Library.vue
+++ b/front/src/components/library/Library.vue
@@ -2,16 +2,19 @@
-
-
-
- Create your own radio
+ Create your own radio
+ Import detail
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ |
+ |
+ + {{ getErrorData(upload).label }} + | +
|
+ |
+
+ {{ getErrorData(upload).detail }}
+
|
+
|
+ |
+ + + | +
|
+ |
+
+
+
+
+ |
+
+
+
+
- Browsing radios
+ Browsing radios
- Instance radios
+ Instance radios
-
- User radios
+ User radios
-
+
-
+
-
+
-
+