Commit 619e18a5 authored by Baptiste Gelez's avatar Baptiste Gelez
Browse files

Merge branch 'i18n-playlists-components' into 'develop'

i18n: playlists components

See merge request funkwhale/funkwhale!137
parents 984abf77 81b84b48
......@@ -10,13 +10,16 @@
<i class="user icon"></i> {{ playlist.user.username }}
</div>
<div class="meta">
<i class="clock icon"></i> Updated <human-date :date="playlist.modification_date"></human-date>
<i class="clock icon"></i>
<i18next path="Updated {%date%}">
<human-date :date="playlist.modification_date" />
</i18next>
</div>
</div>
<div class="extra content">
<span>
<i class="sound icon"></i>
{{ playlist.tracks_count }} tracks
{{ $t('{%count%} tracks', { count: playlist.tracks_count }) }}
</span>
<play-button class="mini basic orange right floated" :playlist="playlist">Play all</play-button>
</div>
......
......@@ -2,16 +2,16 @@
<div class="ui text container">
<playlist-form @updated="$emit('playlist-updated', $event)" :title="false" :playlist="playlist"></playlist-form>
<h3 class="ui top attached header">
Playlist editor
{{ $t('Playlist editor') }}
</h3>
<div class="ui attached segment">
<template v-if="status === 'loading'">
<div class="ui active tiny inline loader"></div>
Syncing changes to server...
{{ $t('Syncing changes to server...') }}
</template>
<template v-else-if="status === 'errored'">
<i class="red close icon"></i>
An error occured while saving your changes
{{ $t('An error occured while saving your changes') }}
<div v-if="errors.length > 0" class="ui negative message">
<ul class="list">
<li v-for="error in errors">{{ error }}</li>
......@@ -19,7 +19,7 @@
</div>
</template>
<template v-else-if="status === 'saved'">
<i class="green check icon"></i> Changes synced with server
<i class="green check icon"></i> {{ $t('Changes synced with server') }}
</template>
</div>
<div class="ui bottom attached segment">
......@@ -28,13 +28,15 @@
:disabled="queueTracks.length === 0"
:class="['ui', {disabled: queueTracks.length === 0}, 'labeled', 'icon', 'button']"
title="Copy tracks from current queue to playlist">
<i class="plus icon"></i> Insert from queue ({{ queueTracks.length }} tracks)</div>
<i class="plus icon"></i>
{{ $t('Insert from queue ({%count%} tracks)', { count: queueTracks.length }) }}
</div>
<dangerous-button :disabled="plts.length === 0" class="labeled right floated icon" color='yellow' :action="clearPlaylist">
<i class="eraser icon"></i> Clear playlist
<p slot="modal-header">Do you want to clear the playlist "{{ playlist.name }}"?</p>
<p slot="modal-content">This will remove all tracks from this playlist and cannot be undone.</p>
<p slot="modal-confirm">Clear playlist</p>
<i class="eraser icon"></i> {{ $t('Clear playlist') }}
<p slot="modal-header">{{ $t('Do you want to clear the playlist "{%name%}"?', { name: playlist.name }) }}</p>
<p slot="modal-content">{{ $t('This will remove all tracks from this playlist and cannot be undone.') }}</p>
<p slot="modal-confirm">{{ $t('Clear playlist') }}</p>
</dangerous-button>
<div class="ui hidden divider"></div>
<template v-if="plts.length > 0">
......
<template>
<form class="ui form" @submit.prevent="submit()">
<h4 v-if="title" class="ui header">Create a new playlist</h4>
<h4 v-if="title" class="ui header">{{ $t('Create a new playlist') }}</h4>
<div v-if="success" class="ui positive message">
<div class="header">
<template v-if="playlist">
Playlist updated
{{ $t('Playlist updated') }}
</template>
<template v-else>
Playlist created
{{ $t('Playlist created') }}
</template>
</div>
</div>
<div v-if="errors.length > 0" class="ui negative message">
<div class="header">We cannot create the playlist</div>
<div class="header">{{ $t('We cannot create the playlist') }}</div>
<ul class="list">
<li v-for="error in errors">{{ error }}</li>
</ul>
</div>
<div class="three fields">
<div class="field">
<label>Playlist name</label>
<label>{{ $t('Playlist name') }}</label>
<input v-model="name" required type="text" placeholder="My awesome playlist" />
</div>
<div class="field">
<label>Playlist visibility</label>
<label>{{ $t('Playlist visibility') }}</label>
<select class="ui dropdown" v-model="privacyLevel">
<option :value="c.value" v-for="c in privacyLevelChoices">{{ c.label }}</option>
</select>
......@@ -31,8 +31,8 @@
<div class="field">
<label>&nbsp;</label>
<button :class="['ui', 'fluid', {'loading': isLoading}, 'button']" type="submit">
<template v-if="playlist">Update playlist</template>
<template v-else>Create playlist</template>
<template v-if="playlist">{{ $t('Update playlist') }}</template>
<template v-else>{{ $t('Create playlist') }}</template>
</button>
</div>
</div>
......@@ -57,30 +57,34 @@ export default {
let d = {
errors: [],
success: false,
isLoading: false,
privacyLevelChoices: [
isLoading: false
}
if (this.playlist) {
d.name = this.playlist.name
d.privacyLevel = this.playlist.privacy_level
} else {
d.privacyLevel = this.$store.state.auth.profile.privacy_level
d.name = ''
}
return d
},
computed: {
privacyLevelChoices: function () {
return [
{
value: 'me',
label: 'Nobody except me'
label: this.$t('Nobody except me')
},
{
value: 'instance',
label: 'Everyone on this instance'
label: this.$t('Everyone on this instance')
},
{
value: 'everyone',
label: 'Everyone'
label: this.$t('Everyone')
}
]
}
if (this.playlist) {
d.name = this.playlist.name
d.privacyLevel = this.playlist.privacy_level
} else {
d.privacyLevel = this.$store.state.auth.profile.privacy_level
d.name = ''
}
return d
},
methods: {
submit () {
......
<template>
<modal @update:show="update" :show="$store.state.playlists.showModal">
<div class="header">
Manage playlists
{{ $t('Manage playlists') }}
</div>
<div class="scrolling content">
<div class="description">
<template v-if="track">
<h4 class="ui header">Current track</h4>
<h4 class="ui header">{{ $t('Current track') }}</h4>
<div>
"{{ track.title }}" by {{ track.artist.name }}
{{ $t('"{%title%}" by {%artist%}', { title: track.title, artist: track.artist.name }) }}
</div>
<div class="ui divider"></div>
</template>
......@@ -16,20 +16,20 @@
<playlist-form></playlist-form>
<div class="ui divider"></div>
<div v-if="errors.length > 0" class="ui negative message">
<div class="header">We cannot add the track to a playlist</div>
<div class="header">{{ $t('We cannot add the track to a playlist') }}</div>
<ul class="list">
<li v-for="error in errors">{{ error }}</li>
</ul>
</div>
</div>
<h4 class="ui header">Available playlists</h4>
<h4 class="ui header">{{ $t('Available playlists') }}</h4>
<table class="ui unstackable very basic table">
<thead>
<tr>
<th></th>
<th>Name</th>
<th class="sorted descending">Last modification</th>
<th>Tracks</th>
<th>{{ $t('Name') }}</th>
<th class="sorted descending">{{ $t('Last modification') }}</th>
<th>{{ $t('Tracks') }}</th>
<th></th>
</tr>
</thead>
......@@ -48,9 +48,9 @@
<div
v-if="track"
class="ui green icon basic small right floated button"
title="Add to this playlist"
:title="{{ $t('Add to this playlist') }}"
@click="addToPlaylist(playlist.id)">
<i class="plus icon"></i> Add track
<i class="plus icon"></i> {{ $t('Add track') }}
</div>
</td>
</tr>
......@@ -59,7 +59,7 @@
</div>
</div>
<div class="actions">
<div class="ui cancel button">Cancel</div>
<div class="ui cancel button">{{ $t('Cancel') }}</div>
</div>
</modal>
</template>
......
......@@ -4,13 +4,13 @@
v-if="button"
:class="['ui', 'button']">
<i class="list icon"></i>
Add to playlist...
{{ $t('Add to playlist...') }}
</button>
<i
v-else
@click="$store.commit('playlists/chooseTrack', track)"
:class="['playlist-icon', 'list', 'link', 'icon']"
title="Add to playlist...">
:title="$t('Add to playlist...')">
</i>
</template>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment