Main.vue 8.52 KB
Newer Older
1
<template>
Bat's avatar
Bat committed
2
  <div v-title="'Import Music'">
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
    <div class="ui vertical stripe segment">
      <div class="ui top three attached ordered steps">
        <a @click="currentStep = 0" :class="['step', {'active': currentStep === 0}, {'completed': currentStep > 0}]">
          <div class="content">
            <div class="title">Import source</div>
            <div class="description">
              Uploaded files or external source
            </div>
          </div>
        </a>
        <a @click="currentStep = 1" :class="['step', {'active': currentStep === 1}, {'completed': currentStep > 1}]">
          <div class="content">
            <div class="title">Metadata</div>
            <div class="description">Grab corresponding metadata</div>
          </div>
        </a>
        <a @click="currentStep = 2" :class="['step', {'active': currentStep === 2}, {'completed': currentStep > 2}]">
          <div class="content">
            <div class="title">Music</div>
            <div class="description">Select relevant sources or files for import</div>
          </div>
        </a>
      </div>
26
27
28
29
30
31
32
33
34
35
36
37
      <div class="ui hidden divider"></div>
      <div class="ui centered buttons">
        <button @click="currentStep -= 1" :disabled="currentStep === 0" class="ui icon button"><i class="left arrow icon"></i> Previous step</button>
        <button @click="currentStep += 1" v-if="currentStep < 2" class="ui icon button">Next step <i class="right arrow icon"></i></button>
        <button
          @click="$refs.import.launchImport()"
          v-if="currentStep === 2"
          :class="['ui', 'positive', 'icon', {'loading': isImporting}, 'button']"
          :disabled="isImporting || importData.count === 0"
          >Import {{ importData.count }} tracks <i class="check icon"></i></button>
      </div>
      <div class="ui hidden divider"></div>
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
      <div class="ui attached segment">
        <template v-if="currentStep === 0">
          <p>First, choose where you want to import the music from :</p>
          <form class="ui form">
            <div class="field">
              <div class="ui radio checkbox">
                <input type="radio" id="external" value="external" v-model="currentSource">
                <label for="external">External source. Supported backends:
                  <div v-for="backend in backends" class="ui basic label">
                    <i v-if="backend.icon" :class="[backend.icon, 'icon']"></i>
                    {{ backend.label }}
                  </div>
                </label>
              </div>
            </div>
            <div class="field">
Eliot Berriot's avatar
Eliot Berriot committed
54
55
              <div class="ui radio checkbox">
                <input type="radio" id="upload" value="upload" v-model="currentSource">
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
                <label for="upload">File upload</label>
              </div>
            </div>
          </form>
        </template>
        <div v-if="currentStep === 1" class="ui stackable two column grid">
          <div class="column">
            <form class="ui form" @submit.prevent="">
              <div class="field">
                <label>Search an entity you want to import:</label>
                <metadata-search
                  :mb-type="mbType"
                  :mb-id="mbId"
                  @id-changed="updateId"
                  @type-changed="updateType"></metadata-search>
              </div>
            </form>
              <div class="ui horizontal divider">
               Or
             </div>
            <form class="ui form" @submit.prevent="">
              <div class="field">
                <label>Input a MusicBrainz ID manually:</label>
                <input type="text" v-model="currentId" />
              </div>
            </form>
            <div class="ui hidden divider"></div>
            <template v-if="currentType && currentId">
              <h4 class="ui header">You will import:</h4>
              <component
                :mbId="currentId"
                :is="metadataComponent"
                @metadata-changed="this.updateMetadata"
                ></component>
            </template>
            <p>You can also skip this step and enter metadata manually.</p>
          </div>
          <div class="column">
            <h5 class="ui header">What is metadata?</h5>
            <p>Metadata is the data related to the music you want to import. This includes all the information about the artists, albums and tracks. In order to have a high quality library, it is recommended to grab data from the <a href="http://musicbrainz.org/" target="_blank">MusicBrainz project</a>, which you can think about as the Wikipedia of music.</p>
          </div>
        </div>
        <div v-if="currentStep === 2">
Eliot Berriot's avatar
Eliot Berriot committed
99
100
101
102
103
          <file-upload
            ref="import"
            v-if="currentSource == 'upload'"
            ></file-upload>

104
105
          <component
            ref="import"
Eliot Berriot's avatar
Eliot Berriot committed
106
            v-if="currentSource == 'external'"
107
            :request="currentRequest"
108
109
110
111
112
113
114
115
116
117
            :metadata="metadata"
            :is="importComponent"
            :backends="backends"
            :default-backend-id="backends[0].id"
            @import-data-changed="updateImportData"
            @import-state-changed="updateImportState"
            ></component>
        </div>
      </div>
    </div>
118
119
120
121
    <div class="ui vertical stripe segment" v-if="currentRequest">
      <h3 class="ui header">Music request</h3>
      <p>This import will be associated with the music request below. After the import is finished, the request will be marked as fulfilled.</p>
      <request-card :request="currentRequest" :import-action="false"></request-card>
122
123
124
125
126
127
128

    </div>
  </div>
</template>

<script>

129
import RequestCard from '@/components/requests/Card'
130
131
132
133
import MetadataSearch from '@/components/metadata/Search'
import ReleaseCard from '@/components/metadata/ReleaseCard'
import ArtistCard from '@/components/metadata/ArtistCard'
import ReleaseImport from './ReleaseImport'
Eliot Berriot's avatar
Eliot Berriot committed
134
import FileUpload from './FileUpload'
135
136
import ArtistImport from './ArtistImport'

137
import axios from 'axios'
138
139
140
141
142
143
144
145
146
import router from '@/router'
import $ from 'jquery'

export default {
  components: {
    MetadataSearch,
    ArtistCard,
    ReleaseCard,
    ArtistImport,
Eliot Berriot's avatar
Eliot Berriot committed
147
    ReleaseImport,
148
149
    FileUpload,
    RequestCard
150
151
152
  },
  props: {
    mbType: {type: String, required: false},
153
    request: {type: String, required: false},
154
155
156
157
158
    source: {type: String, required: false},
    mbId: {type: String, required: false}
  },
  data: function () {
    return {
159
      currentRequest: null,
160
161
162
      currentType: this.mbType || 'artist',
      currentId: this.mbId,
      currentStep: 0,
163
      currentSource: this.source,
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
      metadata: {},
      isImporting: false,
      importData: {
        tracks: []
      },
      backends: [
        {
          id: 'youtube',
          label: 'YouTube',
          icon: 'youtube'
        }
      ]
    }
  },
  created () {
179
180
181
    if (this.request) {
      this.fetchRequest(this.request)
    }
182
183
184
185
186
187
188
189
190
191
192
193
194
    if (this.currentSource) {
      this.currentStep = 1
    }
  },
  mounted: function () {
    $(this.$el).find('.ui.checkbox').checkbox()
  },
  methods: {
    updateRoute () {
      router.replace({
        query: {
          source: this.currentSource,
          type: this.currentType,
195
196
          id: this.currentId,
          request: this.request
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
        }
      })
    },
    updateImportData (newValue) {
      this.importData = newValue
    },
    updateImportState (newValue) {
      this.isImporting = newValue
    },
    updateMetadata (newValue) {
      this.metadata = newValue
    },
    updateType (newValue) {
      this.currentType = newValue
    },
    updateId (newValue) {
      this.currentId = newValue
214
215
216
217
218
219
    },
    fetchRequest (id) {
      let self = this
      axios.get(`requests/import-requests/${id}`).then((response) => {
        self.currentRequest = response.data
      })
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
    }
  },
  computed: {
    metadataComponent () {
      if (this.currentType === 'artist') {
        return 'ArtistCard'
      }
      if (this.currentType === 'release') {
        return 'ReleaseCard'
      }
      if (this.currentType === 'recording') {
        return 'RecordingCard'
      }
    },
    importComponent () {
      if (this.currentType === 'artist') {
        return 'ArtistImport'
      }
      if (this.currentType === 'release') {
        return 'ReleaseImport'
      }
      if (this.currentType === 'recording') {
        return 'RecordingImport'
      }
    }
  },
  watch: {
    currentType (newValue) {
      this.currentId = ''
      this.updateRoute()
    },
    currentId (newValue) {
      this.updateRoute()
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>