Detail.vue 6.74 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
      <div class="segment-content">
        <h2 class="ui center aligned icon header">
Agate's avatar
Agate committed
9
          <i class="circular inverted list warning icon"></i>
10
11
          <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"
Jo Vuit's avatar
Jo Vuit committed
16
                :translate-params="{count: playlist.tracks_count, username: playlist.user.username}"
17
                translate-context="Content/Playlist/Header.Subtitle">
18
              Playlist containing %{ count } track, by %{ username }
19
20
21
              </translate><br>
              <duration :seconds="playlist.duration" />
            </div>
22
23
24
          </div>
        </h2>
        <div class="ui hidden divider"></div>
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
        <div class="header-buttons">
          <div class="ui buttons">
            <play-button class="vibrant" :is-playable="playlist.is_playable" :tracks="tracks"><translate translate-context="Content/Queue/Button.Label/Short, Verb">Play all</translate></play-button>
          </div>
          <div class="ui buttons">
            <button
              class="ui icon labeled button"
              v-if="$store.state.auth.profile && playlist.user.id === $store.state.auth.profile.id"
              @click="edit = !edit">
              <i class="pencil icon"></i>
              <template v-if="edit"><translate translate-context="Content/Playlist/Button.Label/Verb">Stop Editing</translate></template>
              <template v-else><translate translate-context="Content/*/Button.Label/Verb">Edit</translate></template>
            </button>
          </div>
          <div class="ui buttons">	
            <button
              class="ui icon labeled button"
              v-if="playlist.privacy_level === 'everyone' && playlist.is_playable"
              @click="showEmbedModal = !showEmbedModal">
              <i class="code icon"></i>
              <translate translate-context="Content/*/Button.Label/Verb">Embed</translate>
            </button>
            <dangerous-button v-if="$store.state.auth.profile && playlist.user.id === $store.state.auth.profile.id" class="ui labeled danger icon button" :action="deletePlaylist">
              <i class="trash icon"></i> <translate translate-context="*/*/*/Verb">Delete</translate>
              <p slot="modal-header" v-translate="{playlist: playlist.name}" translate-context="Popup/Playlist/Title/Call to action" :translate-params="{playlist: playlist.name}">
              Do you want to delete the playlist "%{ playlist }"?
              </p>
              <p slot="modal-content"><translate translate-context="Popup/Playlist/Paragraph">This will completely delete this playlist and cannot be undone.</translate></p>
              <div slot="modal-confirm"><translate translate-context="Popup/Playlist/Button.Label/Verb">Delete playlist</translate></div>
            </dangerous-button>
          </div>
        </div>
        <modal v-if="playlist.privacy_level === 'everyone' && playlist.is_playable" :show.sync="showEmbedModal">
58
        <h4 class="header">
Eliot Berriot's avatar
Eliot Berriot committed
59
          <translate translate-context="Popup/Album/Title/Verb">Embed this playlist on your website</translate>
60
        </h4>
61
        <div class="scrolling content">
Eliot Berriot's avatar
Eliot Berriot committed
62
63
64
65
66
          <div class="description">
            <embed-wizard type="playlist" :id="playlist.id" />
          </div>
        </div>
        <div class="actions">
67
          <button class="ui basic deny button">
Eliot Berriot's avatar
Eliot Berriot committed
68
            <translate translate-context="*/*/Button.Label/Verb">Cancel</translate>
69
          </button>
Eliot Berriot's avatar
Eliot Berriot committed
70
        </div>
71
72
        </modal>
      </div>
73
74
    </section>
    <section class="ui vertical stripe segment">
75
      <template v-if="edit">
Eliot Berriot's avatar
Eliot Berriot committed
76
77
78
79
        <playlist-editor
          @playlist-updated="playlist = $event"
          @tracks-updated="updatePlts"
          :playlist="playlist" :playlist-tracks="playlistTracks"></playlist-editor>
80
      </template>
81
      <template v-else-if="tracks.length > 0">
Eliot Berriot's avatar
Eliot Berriot committed
82
        <h2><translate translate-context="*/*/*">Tracks</translate></h2>
83
84
        <track-table :display-position="true" :tracks="tracks"></track-table>
      </template>
85
86
87
88
89
      <div v-else class="ui placeholder segment">
        <div class="ui icon header">
          <i class="list icon"></i>
          <translate translate-context="Content/Home/Placeholder">There are no tracks in this playlist yet</translate>
        </div>
Agate's avatar
Agate committed
90
        <button @click="edit = !edit" class="ui success icon labeled button">
91
92
93
94
          <i class="pencil icon"></i>
          <translate translate-context="Content/Home/CreatePlaylist">Edit</translate>
        </button>
      </div>
95
96
    </section>
  </main>
97
98
</template>
<script>
99
100
101
102
103
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"
Eliot Berriot's avatar
Eliot Berriot committed
104
105
import EmbedWizard from "@/components/audio/EmbedWizard"
import Modal from '@/components/semantic/Modal'
106
107
108

export default {
  props: {
109
110
    id: { required: true },
    defaultEdit: { type: Boolean, default: false }
111
112
113
114
115
  },
  components: {
    PlaylistEditor,
    TrackTable,
    PlayButton,
Eliot Berriot's avatar
Eliot Berriot committed
116
117
118
    RadioButton,
    Modal,
    EmbedWizard,
119
  },
120
  data: function() {
121
    return {
Eliot Berriot's avatar
Eliot Berriot committed
122
123
      edit: this.defaultEdit,
      isLoading: false,
124
125
      playlist: null,
      tracks: [],
Eliot Berriot's avatar
Eliot Berriot committed
126
127
      playlistTracks: [],
      showEmbedModal: false,
128
129
    }
  },
130
  created: function() {
131
132
    this.fetch()
  },
Eliot Berriot's avatar
Eliot Berriot committed
133
  computed: {
134
    labels() {
Eliot Berriot's avatar
Eliot Berriot committed
135
      return {
Eliot Berriot's avatar
Eliot Berriot committed
136
        playlist: this.$pgettext('*/*/*', 'Playlist')
Eliot Berriot's avatar
Eliot Berriot committed
137
138
139
      }
    }
  },
140
  methods: {
141
    updatePlts(v) {
142
143
144
145
146
147
148
      this.playlistTracks = v
      this.tracks = v.map((e, i) => {
        let track = e.track
        track.position = i + 1
        return track
      })
    },
149
    fetch: function() {
150
      let self = this
Eliot Berriot's avatar
Eliot Berriot committed
151
      self.isLoading = true
152
153
      let url = "playlists/" + this.id + "/"
      axios.get(url).then(response => {
154
        self.playlist = response.data
155
156
157
158
159
160
161
162
        axios
          .get(url + "tracks/")
          .then(response => {
            self.updatePlts(response.data.results)
          })
          .then(() => {
            self.isLoading = false
          })
Eliot Berriot's avatar
Eliot Berriot committed
163
164
      })
    },
165
    deletePlaylist() {
Eliot Berriot's avatar
Eliot Berriot committed
166
      let self = this
167
168
169
      let url = "playlists/" + this.id + "/"
      axios.delete(url).then(response => {
        self.$store.dispatch("playlists/fetchOwn")
Eliot Berriot's avatar
Eliot Berriot committed
170
        self.$router.push({
171
          path: "/library"
172
173
174
175
176
177
        })
      })
    }
  }
}
</script>