yetangitu/funkwhale
1
0
Fork 0
mirror of https://code.eliotberriot.com/funkwhale/funkwhale.git synced 2025-10-06 03:09:55 +02:00
Code Issues Releases Wiki Activity

I18n: library

Browse source
This commit is contained in:
Bat 2018-04-15 11:45:56 +01:00
parent 18e8e4fa3b
commit c7b39cf9c9
8 changed files with 129 additions and 52 deletions
Download patch file Download diff file Expand all files Collapse all files

16
front/src/components/library/Album.vue
View file

@ -10,30 +10,30 @@
<i class="circular inverted sound yellow icon"></i>
<div class="content">
{{ album.title }}
<div class="sub header">
Album containing {{ album.tracks.length }} tracks,
by <router-link :to="{name: 'library.artists.detail', params: {id: album.artist.id }}">
<i18next tag="div" class="sub header" path="Album containing {%0%} tracks, by {%1%}">
{{ album.tracks.length }}
<router-link :to="{name: 'library.artists.detail', params: {id: album.artist.id }}">
{{ album.artist.name }}
</router-link>
</div>
</i18next>
</div>
</h2>
<div class="ui hidden divider"></div>
</button>
<play-button class="orange" :tracks="album.tracks">Play all</play-button>
<play-button class="orange" :tracks="album.tracks"><i18next path="Play all"/></play-button>
<a :href="wikipediaUrl" target="_blank" class="ui button">
<i class="wikipedia icon"></i>
Search on wikipedia
<i18next path="Search on Wikipedia"/>
</a>
<a :href="musicbrainzUrl" target="_blank" class="ui button">
<i class="external icon"></i>
View on MusicBrainz
<i18next path="View on MusicBrainz"/>
</a>
</div>
</div>
<div class="ui vertical stripe segment">
<h2>Tracks</h2>
<h2><i18next path="Tracks"/></h2>
<track-table v-if="album" :display-position="true" :tracks="album.tracks"></track-table>
</div>
</template>

15
front/src/components/library/Artist.vue
View file

@ -10,26 +10,31 @@
<i class="circular inverted users violet icon"></i>
<div class="content">
{{ artist.name }}
<div class="sub header">{{ totalTracks }} tracks in {{ albums.length }} albums</div>
<div class="sub header">
<i18next path="{%0%} tracks in {%1%} albums">
{{ totalTracks }}
{{ albums.length }}
</i18next>
</div>
</div>
</h2>
<div class="ui hidden divider"></div>
<radio-button type="artist" :object-id="artist.id"></radio-button>
</button>
<play-button class="orange" :tracks="allTracks">Play all albums</play-button>
<play-button class="orange" :tracks="allTracks"><i18next path="Play all albums"/></play-button>
<a :href="wikipediaUrl" target="_blank" class="ui button">
<i class="wikipedia icon"></i>
Search on wikipedia
<i18next path="Search on Wikipedia"/>
</a>
<a :href="musicbrainzUrl" target="_blank" class="ui button">
<i class="external icon"></i>
View on MusicBrainz
<i18next path="View on MusicBrainz"/>
</a>
</div>
</div>
<div class="ui vertical stripe segment">
<h2>Albums by this artist</h2>
<h2><i18next path="Albums by this artist"/></h2>
<div class="ui stackable doubling three column grid">
<div class="column" :key="album.id" v-for="album in sortedAlbums">
<album-card :mode="'rich'" class="fluid" :album="album"></album-card>

10
front/src/components/library/Artists.vue
View file

@ -1,15 +1,15 @@
<template>
<div v-title="'Artists'">
<div class="ui vertical stripe segment">
<h2 class="ui header">Browsing artists</h2>
<h2 class="ui header"><i18next path="Browsing artists"/></h2>
<div :class="['ui', {'loading': isLoading}, 'form']">
<div class="fields">
<div class="field">
<label>Search</label>
<label><i18next path="Search"/></label>
<input type="text" v-model="query" placeholder="Enter an artist name..."/>
</div>
<div class="field">
<label>Ordering</label>
<i18next tag="label" path="Ordering"/>
<select class="ui dropdown" v-model="ordering">
<option v-for="option in orderingOptions" :value="option[0]">
{{ option[1] }}
@ -17,14 +17,14 @@
</select>
</div>
<div class="field">
<label>Ordering direction</label>
<i18next tag="label" path="Ordering direction"/>
<select class="ui dropdown" v-model="orderingDirection">
<option value="">Ascending</option>
<option value="-">Descending</option>
</select>
</div>
<div class="field">
<label>Results per page</label>
<i18next tag="label" path="Results per page"/>
<select class="ui dropdown" v-model="paginateBy">
<option :value="parseInt(12)">12</option>
<option :value="parseInt(25)">25</option>

6
front/src/components/library/Home.vue
View file

@ -6,20 +6,20 @@
<div class="ui vertical stripe segment">
<div class="ui stackable three column grid">
<div class="column">
<h2 class="ui header">Latest artists</h2>
<h2 class="ui header"><i18next path="Latest artists"/></h2>
<div :class="['ui', {'active': isLoadingArtists}, 'inline', 'loader']"></div>
<div v-if="artists.length > 0" v-for="artist in artists.slice(0, 3)" :key="artist.id" class="ui cards">
<artist-card :artist="artist"></artist-card>
</div>
</div>
<div class="column">
<h2 class="ui header">Radios</h2>
<h2 class="ui header"><i18next path="Radios"/></h2>
<radio-card :type="'favorites'"></radio-card>
<radio-card :type="'random'"></radio-card>
<radio-card :type="'less-listened'"></radio-card>
</div>
<div class="column">
<h2 class="ui header">Music requests</h2>
<h2 class="ui header"><i18next path="Music requests"/></h2>
<request-form v-if="$store.state.auth.authenticated"></request-form>
</div>
</div>

17
front/src/components/library/Library.vue
View file

@ -1,17 +1,20 @@
<template>
<div class="main library pusher">
<div class="ui secondary pointing menu">
<router-link class="ui item" to="/library" exact>Browse</router-link>
<router-link class="ui item" to="/library/artists" exact>Artists</router-link>
<router-link class="ui item" to="/library/radios" exact>Radios</router-link>
<router-link class="ui item" to="/library/playlists" exact>Playlists</router-link>
<router-link class="ui item" to="/library" exact><i18next path="Browse"/></router-link>
<router-link class="ui item" to="/library/artists" exact><i18next path="Artists"/></router-link>
<router-link class="ui item" to="/library/radios" exact><i18next path="Radios"/></router-link>
<router-link class="ui item" to="/library/playlists" exact><i18next path="Playlists"/></router-link>
<div class="ui secondary right menu">
<router-link v-if="$store.state.auth.authenticated" class="ui item" to="/library/requests/" exact>
Requests
<i18next path="Requests"/>
<div class="ui teal label">{{ requestsCount }}</div>
</router-link>
<router-link v-if="$store.state.auth.availablePermissions['import.launch']" class="ui item" to="/library/import/launch" exact>Import</router-link>
<router-link v-if="$store.state.auth.availablePermissions['import.launch']" class="ui item" to="/library/import/batches">Import batches
<router-link v-if="$store.state.auth.availablePermissions['import.launch']" class="ui item" to="/library/import/launch" exact>
<i18next path="Import"/>
</router-link>
<router-link v-if="$store.state.auth.availablePermissions['import.launch']" class="ui item" to="/library/import/batches">
<i18next path="Import batches"/>
</router-link>
</div>
</div>

18
front/src/components/library/Radios.vue
View file

@ -1,17 +1,19 @@
<template>
<div v-title="'Radios'">
<div class="ui vertical stripe segment">
<h2 class="ui header">Browsing radios</h2>
<router-link class="ui green basic button" to="/library/radios/build" exact>Create your own radio</router-link>
<h2 class="ui header"><i18next path="Browsing radios"/></h2>
<router-link class="ui green basic button" to="/library/radios/build" exact>
<i18next path="Create your own radio"/>
</router-link>
<div class="ui hidden divider"></div>
<div :class="['ui', {'loading': isLoading}, 'form']">
<div class="fields">
<div class="field">
<label>Search</label>
<i18next tag="label" path="Search"/>
<input type="text" v-model="query" placeholder="Enter a radio name..."/>
</div>
<div class="field">
<label>Ordering</label>
<i18next tag="label" path="Ordering"/>
<select class="ui dropdown" v-model="ordering">
<option v-for="option in orderingOptions" :value="option[0]">
{{ option[1] }}
@ -19,14 +21,14 @@
</select>
</div>
<div class="field">
<label>Ordering direction</label>
<i18next tag="label" path="Ordering direction"/>
<select class="ui dropdown" v-model="orderingDirection">
<option value="">Ascending</option>
<option value="-">Descending</option>
<option value=""><i18next path="Ascending"/></option>
<option value="-"><i18next path="Descending"/></option>
</select>
</div>
<div class="field">
<label>Results per page</label>
<i18next tag="label" path="Results per page"/>
<select class="ui dropdown" v-model="paginateBy">
<option :value="parseInt(12)">12</option>
<option :value="parseInt(25)">25</option>

31
front/src/components/library/Track.vue
View file

@ -11,18 +11,19 @@
<div class="content">
{{ track.title }}
<div class="sub header">
From album
<router-link :to="{name: 'library.albums.detail', params: {id: track.album.id }}">
{{ track.album.title }}
</router-link>
by <router-link :to="{name: 'library.artists.detail', params: {id: track.artist.id }}">
{{ track.artist.name }}
</router-link>
<i18next path="From album {%0%} by {%1%}">
<router-link :to="{name: 'library.albums.detail', params: {id: track.album.id }}">
{{ track.album.title }}
</router-link>
<router-link :to="{name: 'library.artists.detail', params: {id: track.artist.id }}">
{{ track.artist.name }}
</router-link>
</i18next>
</div>
</div>
</h2>
<play-button class="orange" :track="track">Play</play-button>
<play-button class="orange" :track="track"><i18next path="Play"/></play-button>
<track-favorite-icon :track="track" :button="true"></track-favorite-icon>
<track-playlist-icon
:button="true"
@ -31,32 +32,30 @@
<a :href="wikipediaUrl" target="_blank" class="ui button">
<i class="wikipedia icon"></i>
Search on wikipedia
<i18next path="Search on Wikipedia"/>
</a>
<a :href="musicbrainzUrl" target="_blank" class="ui button">
<i class="external icon"></i>
View on MusicBrainz
<i18next path="View on MusicBrainz"/>
</a>
<a v-if="downloadUrl" :href="downloadUrl" target="_blank" class="ui button">
<i class="download icon"></i>
Download
<i18next path="Download"/>
</a>
</div>
</div>
<div class="ui vertical stripe center aligned segment">
<h2>Lyrics</h2>
<h2><i18next path="Lyrics"/></h2>
<div v-if="isLoadingLyrics" class="ui vertical segment">
<div :class="['ui', 'centered', 'active', 'inline', 'loader']"></div>
</div>
<div v-if="lyrics" v-html="lyrics.content_rendered">
</div>
<template v-if="!isLoadingLyrics & !lyrics">
<p>
No lyrics available for this track.
</p>
<i18next tag="p" path="No lyrics available for this track."/>
<a class="ui button" target="_blank" :href="lyricsSearchUrl">
<i class="search icon"></i>
Search on lyrics.wikia.com
<i18next path="Search on lyrics.wikia.com"/>
</a>
</template>
</div>