Detail.vue 4.84 KB
Newer Older
1
<template>
2
  <main>
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>
6
    <section 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
            <div class="sub header">
              <translate
                translate-plural="Playlist containing %{ count } tracks, by %{ username }"
15
                :translate-n="playlist.tracks_count"
jovuit's avatar
jovuit committed
16
                :translate-params="{count: playlist.tracks_count, username: playlist.user.username}"
17
                :translate-context="'Content/Playlist/Header.Subtitle'">
18 19 20 21
                Playlist containing %{ count } track, by %{ username }
              </translate><br>
              <duration :seconds="playlist.duration" />
            </div>
22 23 24
          </div>
        </h2>
        <div class="ui hidden divider"></div>
jovuit's avatar
jovuit committed
25
        <play-button class="orange" :is-playable="playlist.is_playable" :tracks="tracks"><translate :translate-context="'Content/*/Button.Label/Verb, Short'">Play all</translate></play-button>
26
        <button
jovuit's avatar
jovuit committed
27
          class="ui icon labeled button"
28
          v-if="$store.state.auth.profile && playlist.user.id === $store.state.auth.profile.id"
29 30
          @click="edit = !edit">
          <i class="pencil icon"></i>
jovuit's avatar
jovuit committed
31 32
          <template v-if="edit"><translate :translate-context="'Content/Playlist/Button.Label/Verb'">End edition</translate></template>
          <template v-else><translate :translate-context="'Content/*/Button.Label/Verb'">Edit…</translate></template>
33
        </button>
34
        <dangerous-button v-if="$store.state.auth.profile && playlist.user.id === $store.state.auth.profile.id" class="labeled icon" :action="deletePlaylist">
jovuit's avatar
jovuit committed
35
          <i class="trash icon"></i> <translate :translate-context="'Content/*/Button.Label/Verb'">Delete</translate>
Eliot Berriot's avatar
Eliot Berriot committed
36
          <p slot="modal-header">
jovuit's avatar
jovuit committed
37
            <translate :translate-params="{playlist: playlist.name}" :translate-context="'Popup/Playlist/Title/Call to action'">Do you want to delete the playlist "%{ playlist }"?</translate>
Eliot Berriot's avatar
Eliot Berriot committed
38
          </p>
jovuit's avatar
jovuit committed
39
          <p slot="modal-content"><translate :translate-context="'Popup/Playlist/Paragraph'">This will completely delete this playlist and cannot be undone.</translate></p>
40
          <div slot="modal-confirm"><translate :translate-context="'Popup/Playlist/Button.Label/Verb'">Delete playlist</translate></div>
Eliot Berriot's avatar
Eliot Berriot committed
41
        </dangerous-button>
42
      </div>
43 44
    </section>
    <section class="ui vertical stripe segment">
45
      <template v-if="edit">
Eliot Berriot's avatar
Eliot Berriot committed
46 47 48 49
        <playlist-editor
          @playlist-updated="playlist = $event"
          @tracks-updated="updatePlts"
          :playlist="playlist" :playlist-tracks="playlistTracks"></playlist-editor>
50 51
      </template>
      <template v-else>
jovuit's avatar
jovuit committed
52
        <h2><translate :translate-context="'Content/*/Title/Name'">Tracks</translate></h2>
53 54
        <track-table :display-position="true" :tracks="tracks"></track-table>
      </template>
55 56
    </section>
  </main>
57 58
</template>
<script>
59 60 61 62 63
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"
64 65 66

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