TrackBase.vue 6.14 KB
Newer Older
1
<template>
2
  <main>
Eliot Berriot's avatar
Eliot Berriot committed
3
    <div v-if="isLoadingTrack" class="ui vertical segment" v-title="labels.title">
4 5 6
      <div :class="['ui', 'centered', 'active', 'inline', 'loader']"></div>
    </div>
    <template v-if="track">
Eliot Berriot's avatar
Eliot Berriot committed
7 8 9 10 11
      <section
        :class="['ui', 'head', {'with-background': cover}, 'vertical', 'center', 'aligned', 'stripe', 'segment']"
        :style="headerStyle"
        v-title="track.title"
      >
12 13 14 15 16 17
        <div class="segment-content">
          <h2 class="ui center aligned icon header">
            <i class="circular inverted music orange icon"></i>
            <div class="content">
              {{ track.title }}
              <div class="sub header">
18
                <div translate-context="Content/Track/Paragraph"
19 20
                  v-translate="{album: track.album.title, artist: track.artist.name, albumUrl: albumUrl, artistUrl: artistUrl}"
                >From album <a class="internal" href="%{ albumUrl }">%{ album }</a> by <a class="internal" href="%{ artistUrl }">%{ artist }</a></div>
21 22 23 24
              </div>
            </div>
          </h2>

Eliot Berriot's avatar
Eliot Berriot committed
25
          <play-button class="orange" :track="track">
26
            <translate translate-context="*/Queue/Button.Label/Short, Verb">Play</translate>
Eliot Berriot's avatar
Eliot Berriot committed
27
          </play-button>
28
          <track-favorite-icon :track="track" :button="true"></track-favorite-icon>
Eliot Berriot's avatar
Eliot Berriot committed
29
          <track-playlist-icon :button="true" v-if="$store.state.auth.authenticated" :track="track"></track-playlist-icon>
Eliot Berriot's avatar
Eliot Berriot committed
30

jovuit's avatar
jovuit committed
31
          <a :href="wikipediaUrl" target="_blank" class="ui icon labeled button">
32
            <i class="wikipedia w icon"></i>
33
            <translate translate-context="Content/*/Link/Verb">Search on Wikipedia</translate>
34
          </a>
jovuit's avatar
jovuit committed
35
          <a v-if="musicbrainzUrl" :href="musicbrainzUrl" target="_blank" class="ui icon labeled button">
36
            <i class="external icon"></i>
37
            <translate translate-context="Content/*/Link/Verb">View on MusicBrainz</translate>
38
          </a>
jovuit's avatar
jovuit committed
39
          <a v-if="upload" :href="downloadUrl" target="_blank" class="ui icon labeled button">
40
            <i class="download icon"></i>
41
            <translate translate-context="Content/Track/Link/Verb">Download</translate>
42
          </a>
43 44 45
          <template v-if="publicLibraries.length > 0">
            <button
              @click="showEmbedModal = !showEmbedModal"
jovuit's avatar
jovuit committed
46
              class="ui icon labeled button">
47
              <i class="code icon"></i>
48
              <translate translate-context="Content/Track/Button.Label/Verb">Embed</translate>
49 50 51
            </button>
            <modal :show.sync="showEmbedModal">
              <div class="header">
52
                <translate translate-context="Popup/Track/Title">Embed this track on your website</translate>
53 54 55 56 57 58 59 60 61
              </div>
              <div class="content">
                <div class="description">
                  <embed-wizard type="track" :id="track.id" />

                </div>
              </div>
              <div class="actions">
                <div class="ui deny button">
62
                  <translate translate-context="Popup/Track/Button/Verb">Cancel</translate>
63 64 65 66
                </div>
              </div>
            </modal>
          </template>
67 68 69 70
          <router-link
            :to="{name: 'library.tracks.edit', params: {id: track.id }}"
            class="ui icon labeled button">
            <i class="edit icon"></i>
71
            <translate translate-context="Content/Track/Button.Label/Verb">Edit…</translate>
72
          </router-link>
73
        </div>
74
      </section>
75
      <router-view v-if="track" @libraries-loaded="libraries = $event" :track="track" :object="track" object-type="track" :key="$route.fullPath"></router-view>
76
    </template>
77
  </main>
78 79 80
</template>

<script>
81 82 83 84 85 86 87
import time from "@/utils/time"
import axios from "axios"
import url from "@/utils/url"
import logger from "@/logging"
import PlayButton from "@/components/audio/PlayButton"
import TrackFavoriteIcon from "@/components/favorites/TrackFavoriteIcon"
import TrackPlaylistIcon from "@/components/playlists/TrackPlaylistIcon"
Eliot Berriot's avatar
Eliot Berriot committed
88
import Modal from '@/components/semantic/Modal'
89
import EmbedWizard from "@/components/audio/EmbedWizard"
90

91
const FETCH_URL = "tracks/"
92 93

export default {
94
  props: ["id"],
95 96
  components: {
    PlayButton,
Eliot Berriot's avatar
Eliot Berriot committed
97
    TrackPlaylistIcon,
98
    TrackFavoriteIcon,
99 100
    Modal,
    EmbedWizard
101
  },
102
  data() {
103
    return {
104
      time,
105 106
      isLoadingTrack: true,
      track: null,
107 108
      showEmbedModal: false,
      libraries: []
109 110
    }
  },
111
  created() {
112 113 114
    this.fetchData()
  },
  methods: {
115
    fetchData() {
116 117
      var self = this
      this.isLoadingTrack = true
118
      let url = FETCH_URL + this.id + "/"
119
      logger.default.debug('Fetching track "' + this.id + '"')
120
      axios.get(url).then(response => {
121 122 123 124 125 126
        self.track = response.data
        self.isLoadingTrack = false
      })
    },
  },
  computed: {
127 128 129 130 131
    publicLibraries () {
      return this.libraries.filter(l => {
        return l.privacy_level === 'everyone'
      })
    },
132
    upload() {
133 134 135 136
      if (this.track.uploads) {
        return this.track.uploads[0]
      }
    },
137 138 139 140 141
    labels() {
      return {
        title: this.$pgettext('Head/Track/Title', "Track")
      }
    },
142 143 144 145 146
    wikipediaUrl() {
      return (
        "https://en.wikipedia.org/w/index.php?search=" +
        encodeURI(this.track.title + " " + this.track.artist.name)
      )
147
    },
148
    musicbrainzUrl() {
149
      if (this.track.mbid) {
150
        return "https://musicbrainz.org/recording/" + this.track.mbid
151
      }
152
    },
153 154 155 156
    downloadUrl() {
      let u = this.$store.getters["instance/absoluteUrl"](
        this.upload.listen_url
      )
Eliot Berriot's avatar
Eliot Berriot committed
157
      return u
158
    },
159
    cover() {
160 161
      return null
    },
162 163 164 165 166 167 168 169
    albumUrl () {
      let route = this.$router.resolve({name: 'library.albums.detail', params: {id: this.track.album.id }})
      return route.location.path
    },
    artistUrl () {
      let route = this.$router.resolve({name: 'library.artists.detail', params: {id: this.track.artist.id }})
      return route.location.path
    },
170
    headerStyle() {
171
      if (!this.cover) {
172
        return ""
173
      }
174 175 176 177 178
      return (
        "background-image: url(" +
        this.$store.getters["instance/absoluteUrl"](this.cover) +
        ")"
      )
Eliot Berriot's avatar
Eliot Berriot committed
179
    },
180 181
  },
  watch: {
182
    id() {
183
      this.fetchData()
Eliot Berriot's avatar
Eliot Berriot committed
184
    },
185 186 187
  }
}
</script>