Detail.vue 4.25 KB
Newer Older
1
<template>
Eliot Berriot's avatar
Eliot Berriot committed
2
  <div>
Eliot Berriot's avatar
Eliot Berriot committed
3
    <div v-if="isLoading" class="ui vertical segment" v-title="labels.playlist">
Eliot Berriot's avatar
Eliot Berriot committed
4
5
      <div :class="['ui', 'centered', 'active', 'inline', 'loader']"></div>
    </div>
Bat's avatar
Bat committed
6
    <div v-if="!isLoading && playlist" class="ui head vertical center aligned stripe segment" v-title="playlist.name">
7
8
9
10
11
      <div class="segment-content">
        <h2 class="ui center aligned icon header">
          <i class="circular inverted list yellow icon"></i>
          <div class="content">
            {{ playlist.name }}
12
13
14
15
16
17
18
19
20
            <div class="sub header">
              <translate
                translate-plural="Playlist containing %{ count } tracks, by %{ username }"
                :translate-n="playlistTracks.length"
                :translate-params="{count: playlistTracks.length, username: playlist.user.username}">
                Playlist containing %{ count } track, by %{ username }
              </translate><br>
              <duration :seconds="playlist.duration" />
            </div>
21
22
23
          </div>
        </h2>
        <div class="ui hidden divider"></div>
24
        <play-button class="orange" :tracks="tracks"><translate>Play all</translate></play-button>
25
26
        <button
          class="ui icon button"
27
          v-if="$store.state.auth.profile && playlist.user.id === $store.state.auth.profile.id"
28
29
          @click="edit = !edit">
          <i class="pencil icon"></i>
30
31
          <template v-if="edit"><translate>End edition</translate></template>
          <template v-else><translate>Edit...</translate></template>
32
        </button>
33
        <dangerous-button v-if="$store.state.auth.profile && playlist.user.id === $store.state.auth.profile.id" class="labeled icon" :action="deletePlaylist">
34
          <i class="trash icon"></i> <translate>Delete</translate>
Eliot Berriot's avatar
Eliot Berriot committed
35
36
37
          <p slot="modal-header">
            <translate :translate-params="{playlist: playlist.name}">Do you want to delete the playlist "%{ playlist }"?</translate>
          </p>
38
39
          <p slot="modal-content"><translate>This will completely delete this playlist and cannot be undone.</translate></p>
          <p slot="modal-confirm"><translate>Delete playlist</translate></p>
Eliot Berriot's avatar
Eliot Berriot committed
40
        </dangerous-button>
41
42
      </div>
    </div>
Eliot Berriot's avatar
Eliot Berriot committed
43
    <div class="ui vertical stripe segment">
44
      <template v-if="edit">
Eliot Berriot's avatar
Eliot Berriot committed
45
46
47
48
        <playlist-editor
          @playlist-updated="playlist = $event"
          @tracks-updated="updatePlts"
          :playlist="playlist" :playlist-tracks="playlistTracks"></playlist-editor>
49
50
      </template>
      <template v-else>
Eliot Berriot's avatar
Eliot Berriot committed
51
        <h2><translate>Tracks</translate></h2>
52
53
54
55
56
57
58
59
60
61
62
63
64
65
        <track-table :display-position="true" :tracks="tracks"></track-table>
      </template>
    </div>
  </div>
</template>
<script>
import axios from 'axios'
import TrackTable from '@/components/audio/track/Table'
import RadioButton from '@/components/radios/Button'
import PlayButton from '@/components/audio/PlayButton'
import PlaylistEditor from '@/components/playlists/Editor'

export default {
  props: {
Eliot Berriot's avatar
Eliot Berriot committed
66
67
    id: {required: true},
    defaultEdit: {type: Boolean, default: false}
68
69
70
71
72
73
74
75
76
  },
  components: {
    PlaylistEditor,
    TrackTable,
    PlayButton,
    RadioButton
  },
  data: function () {
    return {
Eliot Berriot's avatar
Eliot Berriot committed
77
78
      edit: this.defaultEdit,
      isLoading: false,
79
80
81
82
83
84
85
86
      playlist: null,
      tracks: [],
      playlistTracks: []
    }
  },
  created: function () {
    this.fetch()
  },
Eliot Berriot's avatar
Eliot Berriot committed
87
88
89
90
91
92
93
  computed: {
    labels () {
      return {
        playlist: this.$gettext('Playlist')
      }
    }
  },
94
95
96
97
98
99
100
101
102
103
104
  methods: {
    updatePlts (v) {
      this.playlistTracks = v
      this.tracks = v.map((e, i) => {
        let track = e.track
        track.position = i + 1
        return track
      })
    },
    fetch: function () {
      let self = this
Eliot Berriot's avatar
Eliot Berriot committed
105
      self.isLoading = true
106
107
108
      let url = 'playlists/' + this.id + '/'
      axios.get(url).then((response) => {
        self.playlist = response.data
109
        axios.get(url + 'tracks/').then((response) => {
110
          self.updatePlts(response.data.results)
Eliot Berriot's avatar
Eliot Berriot committed
111
112
113
114
115
116
117
118
119
120
121
122
        }).then(() => {
          self.isLoading = false
        })
      })
    },
    deletePlaylist () {
      let self = this
      let url = 'playlists/' + this.id + '/'
      axios.delete(url).then((response) => {
        self.$store.dispatch('playlists/fetchOwn')
        self.$router.push({
          path: '/library'
123
124
125
126
127
128
        })
      })
    }
  }
}
</script>