~phw/discourse-listenbrainz

a35a42002cf67a3e02b2135a6fc44386920fdee3 — Philipp Wolfer 9 months ago 2ffbbf0
Truncate the displayed pin blurb after 280 characters

This is the maximum allowed by the LB UI. This makes sure
and overly long blurb does not break the layout. The full
blurb is available as title attribute tooltip.
M assets/javascripts/discourse/components/listenbrainz-listening.js => assets/javascripts/discourse/components/listenbrainz-listening.js +12 -0
@@ 3,6 3,10 @@ import { tracked } from '@glimmer/tracking'
import { ajax } from 'discourse/lib/ajax'
import { buildMbUrl } from '../lib/listenbrainz-utils'

// 280 characters is the maximum length of the blurb allowed by ListenBrainz UI.
// But it might be longer if created by API.
const maxBlurbLength = 280

export default class ListeningComponent extends Component {

    constructor(owner, args) {


@@ 142,6 146,14 @@ export default class ListeningComponent extends Component {
        return this.listen?.blurb_content
    }

    get truncatedBlurb() {
        let blurb = (this.blurb || '').trim()
        if (blurb.length > maxBlurbLength) {
            blurb = blurb.substring(0, maxBlurbLength - 1) + '…'
        }
        return blurb
    }

    async loadNowPlaying() {
        this.loading = true
        try {

M assets/javascripts/discourse/templates/components/listenbrainz-listening.hbs => assets/javascripts/discourse/templates/components/listenbrainz-listening.hbs +1 -1
@@ 60,7 60,7 @@
    </div>
    {{#if blurb}}
    <div class="listenbrainz-card-additional-content">
        <blockquote>{{blurb}}</blockquote>
        <blockquote title="{{blurb}}">{{truncatedBlurb}}</blockquote>
    </div>
    {{/if}}
</div>