AlbumDetail.vue 14.3 KB
Newer Older
1
2
3
4
5
6
<template>
  <main>
    <div v-if="isLoading" class="ui vertical segment">
      <div :class="['ui', 'centered', 'active', 'inline', 'loader']"></div>
    </div>
    <template v-if="object">
7
      <section :class="['ui', 'head', 'vertical', 'stripe', 'segment']" v-title="object.title">
8
9
10
11
        <div class="ui stackable one column grid">
          <div class="ui column">
            <div class="segment-content">
              <h2 class="ui header">
12
                <img alt="" v-if="object.cover && object.cover.urls.original" v-lazy="$store.getters['instance/absoluteUrl'](object.cover.urls.medium_square_crop)">
13
                <img alt="" v-else src="../../../assets/audio/default-cover.png">
14
15
16
17
                <div class="content">
                  {{ object.title | truncate(100) }}
                  <div class="sub header">
                    <template v-if="object.is_local">
Agate's avatar
Agate committed
18
                      <span class="ui tiny accent label">
19
20
21
22
23
24
25
26
                        <i class="home icon"></i>
                        <translate translate-context="Content/Moderation/*/Short, Noun">Local</translate>
                      </span>
                      &nbsp;
                    </template>
                  </div>
                </div>
              </h2>
27
28
29
30
31
32

              <template v-if="object.tags && object.tags.length > 0">
                <tags-list :limit="5" detail-route="manage.library.tags.detail" :tags="object.tags"></tags-list>
                <div class="ui hidden divider"></div>
              </template>

33
34
35
36
37
38
39
              <div class="header-buttons">

                <div class="ui icon buttons">
                  <router-link class="ui labeled icon button" :to="{name: 'library.albums.detail', params: {id: object.id }}">
                    <i class="info icon"></i>
                    <translate translate-context="Content/Moderation/Link/Verb">Open local profile</translate>&nbsp;
                  </router-link>
40
                  <button class="ui floating dropdown icon button" v-dropdown>
41
42
43
                    <i class="dropdown icon"></i>
                    <div class="menu">
                      <a
44
                        v-if="$store.state.auth.profile && $store.state.auth.profile.is_superuser"
45
46
47
48
49
50
51
52
53
54
                        class="basic item"
                        :href="$store.getters['instance/absoluteUrl'](`/api/admin/music/album/${object.id}`)"
                        target="_blank" rel="noopener noreferrer">
                        <i class="wrench icon"></i>
                        <translate translate-context="Content/Moderation/Link/Verb">View in Django's admin</translate>&nbsp;
                      </a>
                      <a class="basic item" v-if="object.mbid" :href="`https://musicbrainz.org/release/${object.mbid}`" target="_blank" rel="noopener noreferrer">
                        <i class="external icon"></i>
                        <translate translate-context="Content/Moderation/Link/Verb">Open on MusicBrainz</translate>&nbsp;
                      </a>
55
56
57
58
                      <fetch-button @refresh="fetchData" v-if="!object.is_local" class="basic item" :url="`albums/${object.id}/fetches/`">
                        <i class="refresh icon"></i>&nbsp;
                        <translate translate-context="Content/Moderation/Button/Verb">Refresh from remote server</translate>&nbsp;
                      </fetch-button>
59
60
61
62
63
                      <a class="basic item" :href="object.url || object.fid" target="_blank" rel="noopener noreferrer">
                        <i class="external icon"></i>
                        <translate translate-context="Content/Moderation/Link/Verb">Open remote profile</translate>&nbsp;
                      </a>
                    </div>
64
                  </button>
65
66
67
68
69
70
71
72
73
74
75
76
                </div>
                <div class="ui buttons">
                  <router-link
                    v-if="object.is_local"
                    :to="{name: 'library.albums.edit', params: {id: object.id }}"
                    class="ui labeled icon button">
                    <i class="edit icon"></i>
                    <translate translate-context="Content/*/Button.Label/Verb">Edit</translate>
                  </router-link>
                </div>
                <div class="ui buttons">
                  <dangerous-button
Agate's avatar
Agate committed
77
                    :class="['ui', {loading: isLoading}, 'basic danger button']"
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
                    :action="remove">
                    <translate translate-context="*/*/*/Verb">Delete</translate>
                    <p slot="modal-header"><translate translate-context="Popup/Library/Title">Delete this album?</translate></p>
                    <div slot="modal-content">
                      <p><translate translate-context="Content/Moderation/Paragraph">The album will be removed, as well as associated uploads, tracks, favorites and listening history. This action is irreversible.</translate></p>
                    </div>
                    <p slot="modal-confirm"><translate translate-context="*/*/*/Verb">Delete</translate></p>
                  </dangerous-button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      <div class="ui vertical stripe segment">
        <div class="ui stackable three column grid">
          <div class="column">
            <section>
              <h3 class="ui header">
                <i class="info icon"></i>
                <div class="content">
                  <translate translate-context="Content/Moderation/Title">Album data</translate>
                </div>
              </h3>
              <table class="ui very basic table">
                <tbody>
                  <tr>
                    <td>
                      <translate translate-context="*/*/*/Noun">Title</translate>
                    </td>
                    <td>
                      {{ object.title }}
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <router-link :to="{name: 'manage.library.artists.detail', params: {id: object.artist.id }}">
                        <translate translate-context="*/*/*/Noun">Artist</translate>
                      </router-link>
                    </td>
                    <td>
                      {{ object.artist.name }}
                    </td>
                  </tr>
                  <tr v-if="!object.is_local">
                    <td>
                      <router-link :to="{name: 'manage.moderation.domains.detail', params: {id: object.domain }}">
125
                        <translate translate-context="Content/Moderation/*/Noun">Domain</translate>
126
127
                      </router-link>
                    </td>
128
129
130
                    <td>
                      {{ object.domain }}
                    </td>
131
                  </tr>
132
133
134
135
136
137
                  <tr v-if="object.description">
                    <td>
                      <translate translate-context="'*/*/*/Noun">Description</translate>
                    </td>
                    <td v-html="object.description.html"></td>
                  </tr>
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
                </tbody>
              </table>
            </section>
          </div>
          <div class="column">
            <section>
              <h3 class="ui header">
                <i class="feed icon"></i>
                <div class="content">
                  <translate translate-context="Content/Moderation/Title">Activity</translate>&nbsp;
                  <span :data-tooltip="labels.statsWarning"><i class="question circle icon"></i></span>

                </div>
              </h3>
              <div v-if="isLoadingStats" class="ui placeholder">
                <div class="full line"></div>
                <div class="short line"></div>
                <div class="medium line"></div>
                <div class="long line"></div>
              </div>
              <table v-else class="ui very basic table">
                <tbody>
160
161
162
163
164
165
166
167
                  <tr>
                    <td>
                      <translate translate-context="Content/Moderation/Table.Label/Short (Value is a date)">First seen</translate>
                    </td>
                    <td>
                      <human-date :date="object.creation_date"></human-date>
                    </td>
                  </tr>
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
                  <tr>
                    <td>
                      <translate translate-context="*/*/*/Noun">Listenings</translate>
                    </td>
                    <td>
                      {{ stats.listenings }}
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <translate translate-context="*/*/*">Favorited tracks</translate>
                    </td>
                    <td>
                      {{ stats.track_favorites }}
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <translate translate-context="*/*/*">Playlists</translate>
                    </td>
                    <td>
                      {{ stats.playlists }}
                    </td>
                  </tr>
192
193
194
195
196
197
198
199
200
201
                  <tr>
                    <td>
                      <router-link :to="{name: 'manage.moderation.reports.list', query: {q: getQuery('target', `album:${object.id}`) }}">
                        <translate translate-context="Content/Moderation/Table.Label/Noun">Linked reports</translate>
                      </router-link>
                    </td>
                    <td>
                      {{ stats.reports }}
                    </td>
                  </tr>
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
                  <tr>
                    <td>
                      <router-link :to="{name: 'manage.library.edits', query: {q: getQuery('target', 'album ' + object.id)}}">
                        <translate translate-context="*/Admin/*/Noun">Edits</translate>
                      </router-link>
                    </td>
                    <td>
                      {{ stats.mutations }}
                    </td>
                  </tr>
                </tbody>
              </table>
            </section>
          </div>
          <div class="column">
            <section>
              <h3 class="ui header">
                <i class="music icon"></i>
                <div class="content">
                  <translate translate-context="Content/Moderation/Title">Audio content</translate>&nbsp;
                  <span :data-tooltip="labels.statsWarning"><i class="question circle icon"></i></span>

                </div>
              </h3>
              <div v-if="isLoadingStats" class="ui placeholder">
                <div class="full line"></div>
                <div class="short line"></div>
                <div class="medium line"></div>
                <div class="long line"></div>
              </div>
              <table v-else class="ui very basic table">
                <tbody>

                  <tr>
                    <td>
                      <translate translate-context="Content/Moderation/Table.Label/Noun">Cached size</translate>
                    </td>
                    <td>
                      {{ stats.media_downloaded_size | humanSize }}
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <translate translate-context="Content/Moderation/Table.Label">Total size</translate>
                    </td>
                    <td>
                      {{ stats.media_total_size | humanSize }}
                    </td>
                  </tr>

                  <tr>
                    <td>
254
255
256
                      <router-link :to="{name: 'manage.library.libraries', query: {q: getQuery('album_id', object.id) }}">
                        <translate translate-context="*/*/*/Noun">Libraries</translate>
                      </router-link>
257
258
259
260
261
262
263
                    </td>
                    <td>
                      {{ stats.libraries }}
                    </td>
                  </tr>
                  <tr>
                    <td>
264
                      <router-link :to="{name: 'manage.library.uploads', query: {q: getQuery('album_id', object.id) }}">
Eliot Berriot's avatar
Eliot Berriot committed
265
                        <translate translate-context="*/*/*">Uploads</translate>
266
                      </router-link>
267
268
269
270
271
272
273
274
275
276
277
278
                    </td>
                    <td>
                      {{ stats.uploads }}
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <router-link :to="{name: 'manage.library.tracks', query: {q: getQuery('album_id', object.id) }}">
                        <translate translate-context="*/*/*">Tracks</translate>
                      </router-link>
                    </td>
                    <td>
Agate's avatar
Agate committed
279
                      {{ object.tracks_count }}
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
                    </td>
                  </tr>
                </tbody>
              </table>

            </section>
          </div>
        </div>
      </div>

    </template>
  </main>
</template>

<script>
import axios from "axios"
import logger from "@/logging"
297
import FetchButton from "@/components/federation/FetchButton"
298
import TagsList from "@/components/tags/List"
299
300
301

export default {
  props: ["id"],
302
  components: {
303
304
    FetchButton,
    TagsList
305
  },
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
  data() {
    return {
      isLoading: true,
      isLoadingStats: false,
      object: null,
      stats: null,
    }
  },
  created() {
    this.fetchData()
    this.fetchStats()
  },
  methods: {
    fetchData() {
      var self = this
      this.isLoading = true
      let url = `manage/library/albums/${this.id}/`
      axios.get(url).then(response => {
        self.object = response.data
        self.isLoading = false
      })
    },
    fetchStats() {
      var self = this
      this.isLoadingStats = true
      let url = `manage/library/albums/${this.id}/stats/`
      axios.get(url).then(response => {
        self.stats = response.data
        self.isLoadingStats = false
      })
    },
    remove () {
      var self = this
      this.isLoading = true
      let url = `manage/library/albums/${this.id}/`
      axios.delete(url).then(response => {
        self.$router.push({name: 'manage.library.albums'})
      })
    },
    getQuery (field, value) {
      return `${field}:"${value}"`
    }
  },
  computed: {
    labels() {
      return {
        statsWarning: this.$pgettext('Content/Moderation/Help text', 'Statistics are computed from known activity and content on your instance, and do not reflect general activity for this object'),
      }
    },
  }
}
</script>