Verified Commit 27801ce5 authored by Agate's avatar Agate 💬

See #170: revamped track detail page

parent c43fe461
Pipeline #10091 passed with stages
in 4 minutes and 24 seconds
......@@ -28,6 +28,7 @@
"register-service-worker": "^1.6.2",
"sanitize-html": "^1.20.1",
"showdown": "^1.8.6",
"text-clipper": "^1.3.0",
"vue": "^2.6.10",
"vue-gettext": "^2.1.0",
"vue-lazyload": "^1.2.6",
......
......@@ -7,7 +7,7 @@
:disabled="!playable"
:class="buttonClasses.concat(['ui', {loading: isLoading}, {'mini': discrete}, {disabled: !playable}])">
<i :class="[playIconClass, 'icon']"></i>
<template v-if="!discrete && !iconOnly"><slot><translate translate-context="*/Queue/Button.Label/Short, Verb">Play</translate></slot></template>
<template v-if="!discrete && !iconOnly">&nbsp;<slot><translate translate-context="*/Queue/Button.Label/Short, Verb">Play</translate></slot></template>
</button>
<div
v-if="!discrete && !iconOnly"
......
<template>
<div>
<div v-html="html" v-if="content && !isUpdating"></div>
<template v-if="content && !isUpdating">
<div v-html="html"></div>
<template v-if="isTruncated">
<div class="ui small hidden divider"></div>
<a @click.stop.prevent="showMore = true" v-if="showMore === false">
<translate translate-context="*/*/Button,Label">Show more</translate>
</a>
<a @click.stop.prevent="showMore = false" v-else="showMore === true">
<translate translate-context="*/*/Button,Label">Show less</translate>
</a>
</template>
</template>
<p v-else-if="!isUpdating">
<translate translate-context="*/*/Placeholder">No description available</translate>
</p>
......@@ -33,6 +45,7 @@
<script>
import {secondsToObject} from '@/filters'
import axios from 'axios'
import clip from 'text-clipper'
export default {
props: {
......@@ -42,11 +55,13 @@ export default {
canUpdate: {required: false, default: true, type: Boolean},
fetchHtml: {required: false, default: false, type: Boolean},
permissive: {required: false, default: false, type: Boolean},
truncateLength: {required: false, default: 500, type: Number},
},
data () {
return {
isUpdating: false,
showMore: false,
newText: (this.content || {text: ''}).text,
errors: null,
isLoading: false,
......@@ -64,7 +79,16 @@ export default {
if (this.fetchHtml) {
return this.preview
}
if (this.truncateLength > 0 && !this.showMore) {
return this.truncatedHtml
}
return this.content.html
},
truncatedHtml () {
return clip(this.content.html, this.truncateLength)
},
isTruncated () {
return this.truncateLength > 0 && this.truncatedHtml.length < this.content.html.length
}
},
methods: {
......
......@@ -7,7 +7,7 @@
<button
v-else
@click.stop="$store.dispatch('favorites/toggle', track.id)"
:class="['ui', 'favorite-icon', {'pink': isFavorite}, {'favorited': isFavorite}, 'basic', 'circular', 'icon', 'really', 'button']"
:class="['ui', 'favorite-icon', {'pink': isFavorite}, {'favorited': isFavorite}, 'basic', 'circular', 'icon', {'really': !border}, 'button']"
:aria-label="title"
:title="title">
<i :class="['heart', {'pink': isFavorite}, 'basic', 'icon']"></i>
......@@ -18,7 +18,8 @@
export default {
props: {
track: {type: Object},
button: {type: Boolean, default: false}
button: {type: Boolean, default: false},
border: {type: Boolean, default: false},
},
computed: {
title () {
......
......@@ -5,63 +5,44 @@
</div>
<template v-if="track">
<section
:class="['ui', 'head', {'with-background': cover}, 'vertical', 'center', 'aligned', 'stripe', 'segment']"
:style="headerStyle"
:class="['ui', 'head', 'vertical', 'center', 'aligned', 'stripe', 'segment']"
v-title="track.title"
>
<div class="segment-content">
<h2 class="ui center aligned icon header">
<i class="circular inverted music orange icon"></i>
<div class="content">
{{ track.title }}
<div class="sub header" v-html="subtitle"></div>
<div class="ui basic padded segment">
<div class="ui stackable grid row container">
<div class="eight wide left aligned column">
<h1 class="ui header">
{{ track.title }}
<div class="sub header" v-html="subtitle"></div>
</h1>
</div>
</h2>
<tags-list v-if="track.tags && track.tags.length > 0" :tags="track.tags"></tags-list>
<div class="ui hidden divider"></div>
<div class="header-buttons">
<div class="ui buttons">
<div class="eight wide right aligned column button-group">
<play-button class="orange" :track="track">
<translate translate-context="*/Queue/Button.Label/Short, Verb">Play</translate>
</play-button>
</div>
<div class="ui buttons">
<track-favorite-icon :track="track" :button="true"></track-favorite-icon>
</div>
<div class="ui buttons">
<track-playlist-icon :button="true" v-if="$store.state.auth.authenticated" :track="track"></track-playlist-icon>
</div>
<div class="ui buttons">
<a v-if="upload" :href="downloadUrl" target="_blank" class="ui icon labeled button">
<track-favorite-icon v-if="$store.state.auth.authenticated" :border="true" :track="track"></track-favorite-icon>
<track-playlist-icon class="circular" v-if="$store.state.auth.authenticated" :border="true" :track="track"></track-playlist-icon>
<a v-if="upload" :href="downloadUrl" target="_blank" class="ui basic circular icon button" :title="labels.download">
<i class="download icon"></i>
<translate translate-context="Content/Track/Link/Verb">Download</translate>
</a>
</div>
<modal v-if="publicLibraries.length > 0" :show.sync="showEmbedModal">
<div class="header">
<translate translate-context="Popup/Track/Title">Embed this track on your website</translate>
</div>
<div class="content">
<div class="description">
<embed-wizard type="track" :id="track.id" />
<modal v-if="publicLibraries.length > 0" :show.sync="showEmbedModal">
<div class="header">
<translate translate-context="Popup/Track/Title">Embed this track on your website</translate>
</div>
</div>
<div class="actions">
<div class="ui basic deny button">
<translate translate-context="*/*/Button.Label/Verb">Cancel</translate>
<div class="content">
<div class="description">
<embed-wizard type="track" :id="track.id" />
</div>
</div>
</div>
</modal>
<div class="ui buttons">
<button class="ui button" @click="$refs.dropdown.click()">
<translate translate-context="*/*/Button.Label/Noun">More…</translate>
</button>
<div class="ui floating dropdown icon button" ref="dropdown" v-dropdown>
<i class="dropdown icon"></i>
<div class="menu">
<div class="actions">
<div class="ui basic deny button">
<translate translate-context="*/*/Button.Label/Verb">Cancel</translate>
</div>
</div>
</modal>
<div class="ui floating dropdown circular icon basic button" :title="labels.more" v-dropdown="{direction: 'downward'}">
<i class="ellipsis vertical icon"></i>
<div class="menu" style="right: 0; left: auto">
<div
role="button"
v-if="publicLibraries.length > 0"
......@@ -74,14 +55,10 @@
<i class="wikipedia w icon"></i>
<translate translate-context="Content/*/Button.Label/Verb">Search on Wikipedia</translate>
</a>
<a v-if="musicbrainzUrl" :href="musicbrainzUrl" target="_blank" rel="noreferrer noopener" class="basic item">
<a v-if="discogsUrl ":href="discogsUrl" target="_blank" rel="noreferrer noopener" class="basic item">
<i class="external icon"></i>
<translate translate-context="Content/*/*/Clickable, Verb">View on MusicBrainz</translate>
<translate translate-context="Content/*/Button.Label/Verb">Search on Discogs</translate>
</a>
<a v-if="discogsUrl ":href="discogsUrl" target="_blank" rel="noreferrer noopener" class="basic item">
<i class="external icon"></i>
<translate translate-context="Content/*/Button.Label/Verb">Search on Discogs</translate>
</a>
<router-link
v-if="track.is_local"
:to="{name: 'library.tracks.edit', params: {id: track.id }}"
......@@ -144,11 +121,23 @@ import TrackFavoriteIcon from "@/components/favorites/TrackFavoriteIcon"
import TrackPlaylistIcon from "@/components/playlists/TrackPlaylistIcon"
import Modal from '@/components/semantic/Modal'
import EmbedWizard from "@/components/audio/EmbedWizard"
import TagsList from "@/components/tags/List"
import ReportMixin from '@/components/mixins/Report'
import {momentFormat} from '@/filters'
const FETCH_URL = "tracks/"
function escapeHtml(unsafe) {
return unsafe
.replace(/&/g, "&amp;")
.replace(/</g, "&lt;")
.replace(/>/g, "&gt;")
.replace(/"/g, "&quot;")
.replace(/'/g, "&#039;");
}
export default {
props: ["id"],
mixins: [ReportMixin],
......@@ -158,7 +147,6 @@ export default {
TrackFavoriteIcon,
Modal,
EmbedWizard,
TagsList,
},
data() {
return {
......@@ -213,7 +201,9 @@ export default {
},
labels() {
return {
title: this.$pgettext('*/*/*/Noun', "Track")
title: this.$pgettext('*/*/*/Noun', "Track"),
download: this.$pgettext('Content/Track/Link/Verb', "Download"),
more: this.$pgettext('*/*/Button.Label/Noun', "More…"),
}
},
wikipediaUrl() {
......@@ -222,11 +212,6 @@ export default {
encodeURI(this.track.title + " " + this.track.artist.name)
)
},
musicbrainzUrl() {
if (this.track.mbid) {
return "https://musicbrainz.org/recording/" + this.track.mbid
}
},
discogsUrl() {
if (this.track.album) {
return (
......@@ -251,10 +236,15 @@ export default {
}
return u
},
cover() {
if (this.track.cover) {
return this.track.cover
}
attributedToUrl () {
let route = this.$router.resolve({
name: 'profile.full.overview',
params: {
username: this.track.attributed_to.preferred_username,
domain: this.track.attributed_to.domain
}
})
return route.href
},
albumUrl () {
let route = this.$router.resolve({name: 'library.albums.detail', params: {id: this.track.album.id }})
......@@ -276,12 +266,20 @@ export default {
},
subtitle () {
let msg
if (this.track.album) {
msg = this.$pgettext('Content/Track/Paragraph', 'From album <a class="internal" href="%{ albumUrl }">%{ album }</a> by <a class="internal" href="%{ artistUrl }">%{ artist }</a>')
return this.$gettextInterpolate(msg, {album: this.track.album.title, artist: this.track.artist.name, albumUrl: this.albumUrl, artistUrl: this.artistUrl})
if (this.track.attributed_to) {
msg = this.$pgettext('Content/Track/Paragraph', 'Uploaded by <a class="internal" href="%{ uploaderUrl }">%{ uploader }</a> on <time title="%{ date }" datetime="%{ date }">%{ prettyDate }</time>')
return this.$gettextInterpolate(msg, {
uploaderUrl: this.attributedToUrl,
uploader: escapeHtml(`@${this.track.attributed_to.full_username}`),
date: escapeHtml(this.track.creation_date),
prettyDate: escapeHtml(momentFormat(this.track.creation_date, 'LL')),
})
} else {
msg = this.$pgettext('Content/Track/Paragraph', 'By <a class="internal" href="%{ artistUrl }">%{ artist }</a>')
return this.$gettextInterpolate(msg, {artist: this.track.artist.name, artistUrl: this.artistUrl})
msg = this.$pgettext('Content/Track/Paragraph', 'Uploaded by on <time title="%{ date }" datetime="%{ date }">%{ prettyDate }</time>')
return this.$gettextInterpolate(msg, {
date: escapeHtml(this.track.creation_date),
prettyDate: escapeHtml(momentFormat(this.track.creation_date, 'LL')),
})
}
}
},
......
......@@ -9,7 +9,7 @@
<button
v-else
@click.stop="$store.commit('playlists/chooseTrack', track)"
:class="['ui', 'basic', 'circular', 'icon', 'really', 'button']"
:class="['ui', 'basic', 'circular', 'icon', {'really': !border}, 'button']"
:aria-label="labels.addToPlaylist"
:title="labels.addToPlaylist">
<i :class="['list', 'basic', 'icon']"></i>
......@@ -21,7 +21,8 @@
export default {
props: {
track: {type: Object},
button: {type: Boolean, default: false}
button: {type: Boolean, default: false},
border: {type: Boolean, default: false},
},
data () {
return {
......
......@@ -206,7 +206,27 @@ html {
white-space: nowrap;
overflow: hidden;
}
.ellipsis-rows tr > {
td:nth-child(1) {
max-width: 4em;
}
td:nth-child(2) {
position: relative;
&:before {
content: '&nbsp;';
visibility: hidden;
}
> * {
position: absolute;
left: 0;
right: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-right: 0.5em;
}
}
}
.ui.small.text.container {
max-width: 500px !important;
}
......@@ -686,5 +706,10 @@ input + .help {
font-size: 0.8em;
}
}
.button-group {
> *:not(:first-child) {
margin-left: 0.5em;
}
}
@import "./themes/_light.scss";
@import "./themes/_dark.scss";
......@@ -9589,6 +9589,11 @@ terser@^4.4.3:
source-map "~0.6.1"
source-map-support "~0.5.12"
text-clipper@^1.3.0:
version "1.3.0"
resolved "https://registry.yarnpkg.com/text-clipper/-/text-clipper-1.3.0.tgz#9cdda9a36f955b3600d73dfffd7487143aac890f"
integrity sha512-6MjWFsTsXI8VyqqpGxTkb7685IPUInyJzG8sNhHHD2xbrnwv9xENQg5dAAabaFLIUa1QXDtRd406HYTauM010Q==
text-table@^0.2.0:
version "0.2.0"
resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
......
Markdown is supported
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