|
@@ -97,7 +97,7 @@
|
|
|
<input class='input' type='text' v-model='editing.song.skipDuration'>
|
|
|
</p>
|
|
|
<hr>
|
|
|
- <h5 class='has-text-centered'>Spotify info</h5>
|
|
|
+ <h5 class='has-text-centered'>Spotify Information</h5>
|
|
|
<label class='label'>Song title</label>
|
|
|
<p class='control'>
|
|
|
<input class='input' type='text' v-model='spotify.title'>
|
|
@@ -109,24 +109,25 @@
|
|
|
<button class='button is-success' @click='getSpotifySongs()'>
|
|
|
Get Spotify songs
|
|
|
</button>
|
|
|
- <hr v-if="spotify.songs.length > 0">
|
|
|
- <h5 class='has-text-centered' v-if="spotify.songs.length > 0">Spotify results</h5>
|
|
|
- <div v-for='song in spotify.songs'>
|
|
|
- <p><b>Title:</b> {{song.title}}</p>
|
|
|
- <p>
|
|
|
- <b>Artists:</b>
|
|
|
- <ul>
|
|
|
- <li v-for='artist in song.artists'>{{artist}}</li>
|
|
|
- </ul>
|
|
|
- </p>
|
|
|
- <p><b>Duration:</b> {{song.duration}}</p>
|
|
|
- <p><b>Explicit:</b> {{song.explicit}}</p>
|
|
|
- <p>
|
|
|
- <b>Thumbnail:</b> {{song.thumbnail}}
|
|
|
- <img :src='song.thumbnail' onerror="this.src='/assets/notes-transparent.png'">
|
|
|
- </p>
|
|
|
- <hr>
|
|
|
- </div>
|
|
|
+ <hr />
|
|
|
+ <article class="media" v-for='song in spotify.songs'>
|
|
|
+ <figure class="media-left">
|
|
|
+ <p class="image is-64x64">
|
|
|
+ <img :src="song.thumbnail" onerror="this.src='/assets/notes-transparent.png'">
|
|
|
+ </p>
|
|
|
+ </figure>
|
|
|
+ <div class="media-content">
|
|
|
+ <div class="content">
|
|
|
+ <p>
|
|
|
+ <strong>{{song.title}}</strong>
|
|
|
+ <br />
|
|
|
+ <small>Artists: {{song.artists}}</small>, <small>Duration: {{song.duration}}</small>, <small>Explicit: {{song.explicit}}</small>
|
|
|
+ <br />
|
|
|
+ <small>Thumbnail: {{song.thumbnail}}</small>
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </article>
|
|
|
</div>
|
|
|
<div slot='footer'>
|
|
|
<button class='button is-success' @click='save(editing.song, false)'>
|