AlbumDetail.vue 2.72 KB
Newer Older
Eliot Berriot's avatar
Eliot Berriot committed
1
2
<template>
  <div v-if="object">
3
4
5
6
    <h2 class="ui header">
      <translate key="1" v-if="isSerie" translate-context="Content/Channels/*">Episodes</translate>
      <translate key="2" v-else translate-context="*/*/*">Tracks</translate>
    </h2>
7
    <channel-entries v-if="artist.channel && isSerie" :limit="50" :filters="{channel: artist.channel.uuid, album: object.id, ordering: '-creation_date'}">
8
9
    </channel-entries>
    <template v-else-if="discs && discs.length > 1">
10
      <div v-for="tracks in discs" :key="tracks.disc_number">
11
        <div class="ui hidden divider"></div>
12
        <play-button class="right floated mini inverted vibrant" :tracks="tracks"></play-button>
Eliot Berriot's avatar
Eliot Berriot committed
13
        <translate
14
          tag="h3"
15
          :translate-params="{number: tracks[0].disc_number}"
Eliot Berriot's avatar
Eliot Berriot committed
16
17
          translate-context="Content/Album/"
        >Volume %{ number }</translate>
18
19
        <album-entries :tracks="tracks"></album-entries>
      </div>
Eliot Berriot's avatar
Eliot Berriot committed
20
21
    </template>
    <template v-else>
22
      <album-entries :tracks="object.tracks"></album-entries>
Eliot Berriot's avatar
Eliot Berriot committed
23
    </template>
Ciarán Ainsworth's avatar
Ciarán Ainsworth committed
24
25
26
27
28
29
30
31
32
    <div class="ui center aligned basic segment">
      <pagination
        v-if="!isSerie && object.tracks && totalTracks > paginateBy"
        @page-changed="updatePage"
        :current="page"
        :paginate-by="paginateBy"
        :total="totalTracks"
      ></pagination>
    </div>
33
    <template v-if="!artist.channel && !isSerie">
Eliot Berriot's avatar
Eliot Berriot committed
34
35
36
37
38
39
      <h2>
        <translate translate-context="Content/*/Title/Noun">User libraries</translate>
      </h2>
      <library-widget @loaded="$emit('libraries-loaded', $event)" :url="'albums/' + object.id + '/libraries/'">
        <translate slot="subtitle" translate-context="Content/Album/Paragraph">This album is present in the following libraries:</translate>
      </library-widget>
40
    </template>
Eliot Berriot's avatar
Eliot Berriot committed
41
42
43
44
45
46
47
48
49
50
51
  </div>
</template>

<script>

import time from "@/utils/time"
import axios from "axios"
import url from "@/utils/url"
import logger from "@/logging"
import LibraryWidget from "@/components/federation/LibraryWidget"
import TrackTable from "@/components/audio/track/Table"
52
53
import ChannelEntries from '@/components/audio/ChannelEntries'
import AlbumEntries from '@/components/audio/AlbumEntries'
Ciarán Ainsworth's avatar
Ciarán Ainsworth committed
54
55
import Pagination from "@/components/Pagination"
import PaginationMixin from "@/components/mixins/Pagination"
56
import PlayButton from "@/components/audio/PlayButton"
Eliot Berriot's avatar
Eliot Berriot committed
57
58

export default {
Ciarán Ainsworth's avatar
Ciarán Ainsworth committed
59
  props: ["object", "libraries", "discs", "isSerie", "artist", "page", "paginateBy", "totalTracks"],
Eliot Berriot's avatar
Eliot Berriot committed
60
61
  components: {
    LibraryWidget,
62
63
    AlbumEntries,
    ChannelEntries,
Ciarán Ainsworth's avatar
Ciarán Ainsworth committed
64
    TrackTable,
65
66
    Pagination,
    PlayButton
Eliot Berriot's avatar
Eliot Berriot committed
67
68
69
70
71
72
73
  },
  data() {
    return {
      time,
      id: this.object.id,
    }
  },
Ciarán Ainsworth's avatar
Ciarán Ainsworth committed
74
75
76
77
78
  methods: {
    updatePage: function(page) {
      this.$emit('page-changed', page)
    }
  },
Eliot Berriot's avatar
Eliot Berriot committed
79
80
}
</script>