v6
This commit is contained in:
Aryan Layes
parent
cad9cd3f4c
commit
8ab32e206c
@ -43,6 +43,10 @@
|
|||||||
<i class="material-icons side_icon">album</i>
|
<i class="material-icons side_icon">album</i>
|
||||||
<span class="main_tablinks_text">Favorites</span>
|
<span class="main_tablinks_text">Favorites</span>
|
||||||
</span>
|
</span>
|
||||||
|
<span id="main_spotify_tablink" class="main_tablinks" role="link" aria-label="spotify">
|
||||||
|
<i class="material-icons side_icon">extension</i>
|
||||||
|
<span class="main_tablinks_text">Spotify</span>
|
||||||
|
</span>
|
||||||
<span id="main_analyzer_tablink" class="main_tablinks" role="link" aria-label="link analyzer">
|
<span id="main_analyzer_tablink" class="main_tablinks" role="link" aria-label="link analyzer">
|
||||||
<i class="material-icons side_icon">link</i>
|
<i class="material-icons side_icon">link</i>
|
||||||
<span class="main_tablinks_text">Link
|
<span class="main_tablinks_text">Link
|
||||||
@ -484,6 +488,67 @@ <h1>No Favorite Tracks found</h1>
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div id="spotify_tab" class="main_tabcontent">
|
||||||
|
<h1>Spotify</h1>
|
||||||
|
<div class="tab">
|
||||||
|
<button class="spotify_tablinks" id="spotify_playlist_tab">Playlists</button>
|
||||||
|
<button class="spotify_tablinks" id="spotify_result_tab">Result</button>
|
||||||
|
</div>
|
||||||
|
<div id="playlist_spotify" class="spotify_tabcontent">
|
||||||
|
<div v-if="spotifyNativePlaylists.length == 0">
|
||||||
|
<h1>No (native) Playlists found</h1>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<h1>native Spotify Playlists</h1>
|
||||||
|
<table>
|
||||||
|
<tr>
|
||||||
|
<th>compare</th>
|
||||||
|
<th>title</th>
|
||||||
|
<th>tracks</th>
|
||||||
|
<th>id</th>
|
||||||
|
</tr>
|
||||||
|
<tr v-for="cPlaylist in spotifyNativePlaylists" :key="cPlaylist.uri">
|
||||||
|
<td><input class="playlistCheckbox" type="checkbox" v-model="cPlaylist.selected"></td>
|
||||||
|
<td>{{cPlaylist.name}}</td>
|
||||||
|
<td>{{cPlaylist.tracks.total}}</td>
|
||||||
|
<td class="clickable" @click="spotifyPlaylistView" :data-id="cPlaylist.id">{{cPlaylist.id}}</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<div v-if="spotifyPlaylists.length == 0">
|
||||||
|
<h1>No Playlists found</h1>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<table>
|
||||||
|
<tr>
|
||||||
|
<th>compare</th>
|
||||||
|
<th>title</th>
|
||||||
|
<th>creator</th>
|
||||||
|
<th>tracks</th>
|
||||||
|
<th>id</th>
|
||||||
|
</tr>
|
||||||
|
<tr v-for="release in spotifyPlaylists">
|
||||||
|
<td><input class="playlistCheckbox" type="checkbox" v-model="release.selected"></td>
|
||||||
|
<td>{{release.title}}</td>
|
||||||
|
<td>{{release.creator.name}}</td>
|
||||||
|
<td>{{release.nb_tracks}}</td>
|
||||||
|
<td class="clickable" @click="spotifyPlaylistView" :data-id="release.id">{{release.id}}</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<footer>
|
||||||
|
<button class="with_icon" @contextmenu.prevent="openQualityModal" @click.stop="comparePlaylists"
|
||||||
|
:data-link="selectedLinksNative()">compare (native) selection<i class="material-icons">compare</i></button>
|
||||||
|
<button class="with_icon" @contextmenu.prevent="openQualityModal" @click.stop="comparePlaylists"
|
||||||
|
:data-link="selectedLinks()">compare selection<i class="material-icons">compare</i></button>
|
||||||
|
<button class="with_icon" @contextmenu.prevent="openQualityModal" @click.stop="mergePlaylists"
|
||||||
|
:data-link="selectedLinks()">merge selection<i class="material-icons">call_merge</i></button>
|
||||||
|
<button class="with_icon" @contextmenu.prevent="openQualityModal" @click.stop="addToBucket"
|
||||||
|
:data-link="selectedLinks()">add selection to bucket<i class="material-icons">archive</i></button>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div id="analyzer_tab" class="main_tabcontent image_header">
|
<div id="analyzer_tab" class="main_tabcontent image_header">
|
||||||
<h1>Link Analyzer</h1>
|
<h1>Link Analyzer</h1>
|
||||||
<div v-if="link == ''">
|
<div v-if="link == ''">
|
||||||
@ -1105,6 +1170,125 @@ <h2 class="inline-flex"><span v-if="metadata">{{ metadata }}</span><span class="
|
|||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div id="spotifytracklist_tab" class="main_tabcontent fixed_footer image_header">
|
||||||
|
<header
|
||||||
|
:style="{ 'background-image': 'linear-gradient(to bottom, transparent 0%, var(--main-background) 100%), url(\''+image+'\')' }">
|
||||||
|
<h1 class="inline-flex">{{ title }} <i v-if="explicit" class="material-icons">explicit</i></h1>
|
||||||
|
<h2 class="inline-flex"><span v-if="metadata">{{ metadata }}</span><span class="right"
|
||||||
|
v-if="release_date">{{ release_date }}</span></h2>
|
||||||
|
</header>
|
||||||
|
<div v-if="includedPlaylists.length == 0">
|
||||||
|
<h1>No included Playlist found</h1>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<div>
|
||||||
|
<h1>Options</h1>
|
||||||
|
<span><input class="playlistCheckbox" type="checkbox" v-model="showTracksInSinglePlaylistOnly">showTracksInSinglePlaylistOnly</span>
|
||||||
|
<span><input class="playlistCheckbox" type="checkbox" v-model="hideTrackIfNoPlaylistSelected">hideTrackIfNoPlaylistSelected</span>
|
||||||
|
<span><input class="playlistCheckbox" type="checkbox" v-model="showTracksInMultiplePlaylistOnly">showTracksInMultiplePlaylistOnly</span>
|
||||||
|
</div>
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>include</th>
|
||||||
|
<th>name</th>
|
||||||
|
<th>owner</th>
|
||||||
|
<th>tracks</th>
|
||||||
|
<th>id</th>
|
||||||
|
<th>uri</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr v-for="playlist in includedPlaylists">
|
||||||
|
<td><input class="playlistCheckbox" type="checkbox" v-model="playlist.selected"></td>
|
||||||
|
<td><span>{{playlist.name}}</span></td>
|
||||||
|
<td>
|
||||||
|
<span v-for="owner in playlist.owner">
|
||||||
|
{{owner.display_name}}<br />
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td><span>{{playlist.numTracks}}</span></td>
|
||||||
|
<td class="clickable" @click="spotifyPlaylistView" :data-id="playlist.id">{{playlist.id}}</td>
|
||||||
|
<td class="clickable" @click="spotifyPlaylistView" :data-id="playlist.uri">{{playlist.uri}}</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th style="width: 32px">DL<input @click="toggleAll" class="selectAll" type="checkbox"></th>
|
||||||
|
<th v-for="data in head" v-html="data.title" :style="{ 'width': data.width ? data.width : 'auto'}">
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<template v-if="type!='Spotify Playlist'">
|
||||||
|
<template v-for="track in body">
|
||||||
|
<tr v-if="track.type == 'track'">
|
||||||
|
<td><i @click=playPausePreview
|
||||||
|
:class="'material-icons' + (track.preview ? ' preview_playlist_controls' : '')"
|
||||||
|
:data-preview="track.preview">play_arrow</i></td>
|
||||||
|
<td>{{ track.track_position }}</td>
|
||||||
|
<td class="inline-flex"><i v-if="track.explicit_lyrics"
|
||||||
|
class="material-icons">explicit</i>{{ track.title + (track.title_version && track.title.indexOf(track.title_version) == -1 ? ' '+ track.title_version : '') }}
|
||||||
|
</td>
|
||||||
|
<td class="clickable" @click="artistView" :data-id="track.artist.id">
|
||||||
|
{{ track.artist.name }}</td>
|
||||||
|
<td class="clickable" v-if="type == 'Playlist'" @click="albumView" :data-id="track.album.id">
|
||||||
|
{{ track.album.title }}</td>
|
||||||
|
<td>{{ convertDuration(track.duration) }}</td>
|
||||||
|
<td><input class="trackCheckbox" type="checkbox" v-model="track.selected"></td>
|
||||||
|
</tr>
|
||||||
|
<tr v-else-if="track.type == 'disc_separator'">
|
||||||
|
<td colspan="6" style="opacity: 0.54;"><i class="material-icons">album</i>{{ track.number }}</td>
|
||||||
|
</tr>
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
<tr v-for="(track, i) in body">
|
||||||
|
<template v-if="(!hideTrackIfNoPlaylistSelected || trackInVisiblePlaylist(track)) &&
|
||||||
|
(!showTracksInSinglePlaylistOnly || (!trackInMoreThanOnePlaylist(track) && showTracksInSinglePlaylistOnly)) &&
|
||||||
|
(!showTracksInMultiplePlaylistOnly || (trackInMoreThanOnePlaylist(track) && showTracksInMultiplePlaylistOnly))">
|
||||||
|
|
||||||
|
<!-- <template v-for="pl in track.inPlaylists">
|
||||||
|
<template v-if="includedPlaylists.includes(pl)">
|
||||||
|
<template v-if="includedPlaylists[includedPlaylists.indexOf(pl)].selected"> -->
|
||||||
|
<td><input class="trackCheckbox" type="checkbox" v-model="track.selected"></td>
|
||||||
|
<td><i @click=playPausePreview
|
||||||
|
:class="'material-icons' + (track.preview_url ? ' preview_playlist_controls' : '')"
|
||||||
|
:data-preview="track.preview_url">play_arrow</i></td>
|
||||||
|
<td>{{ i+1 }}</td>
|
||||||
|
<td class="inline-flex"><i v-if="track.explicit" class="material-icons">explicit</i>{{ track.name }}
|
||||||
|
</td>
|
||||||
|
<td v-for="artist in track.artists">
|
||||||
|
{{ artist.name }}<br />
|
||||||
|
</td>
|
||||||
|
<td>{{ track.album.name }}</td>
|
||||||
|
<td>{{ convertDuration(Math.floor(track.duration_ms/1000)) }}</td>
|
||||||
|
<td v-for="playlistId in track.inPlaylists">
|
||||||
|
<input class="trackCheckbox" type="checkbox" v-model="getPlaylistObj(playlistId).selected">{{ getPlaylistObj(playlistId).name }}<br />
|
||||||
|
</td>
|
||||||
|
<!-- </template>
|
||||||
|
</template>
|
||||||
|
</template> -->
|
||||||
|
|
||||||
|
</template>
|
||||||
|
</tr>
|
||||||
|
</template>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
<span v-if="label"
|
||||||
|
style="opacity: 0.40;margin-top: 8px;display: inline-block;font-size: 13px;">{{ label }}</span>
|
||||||
|
<footer>
|
||||||
|
<button @contextmenu.prevent="openQualityModal" @click.stop="addToQueue" :data-link="link">Download
|
||||||
|
{{ type }}</button>
|
||||||
|
<button class="with_icon" @contextmenu.prevent="openQualityModal" @click.stop="addToQueue"
|
||||||
|
:data-link="selectedLinks()">Download selection<i class="material-icons">file_download</i></button>
|
||||||
|
<button class="back-button">Back</button>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
87
src/js/modules/components/spotify-tab.js
Normal file
87
src/js/modules/components/spotify-tab.js
Normal file
@ -0,0 +1,87 @@
|
|||||||
|
import Vue from 'vue/dist/vue.esm'
|
||||||
|
import { socket } from '../socket.js'
|
||||||
|
import { playlistView, artistView, albumView, spotifyPlaylistView } from '../tabs.js'
|
||||||
|
import Downloads from '../downloads.js'
|
||||||
|
import QualityModal from '../quality-modal.js'
|
||||||
|
import TrackPreview from '../track-preview.js'
|
||||||
|
import Utils from '../utils.js'
|
||||||
|
|
||||||
|
const SpotifyTab = new Vue({
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
tracks: [],
|
||||||
|
albums: [],
|
||||||
|
artists: [],
|
||||||
|
playlists: [],
|
||||||
|
spotifyPlaylists: [],
|
||||||
|
spotifyNativePlaylists: [],
|
||||||
|
spotifyTracks: []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
playlistView,
|
||||||
|
artistView,
|
||||||
|
albumView,
|
||||||
|
spotifyPlaylistView,
|
||||||
|
playPausePreview: TrackPreview.playPausePreview,
|
||||||
|
previewMouseEnter: TrackPreview.previewMouseEnter,
|
||||||
|
previewMouseLeave: TrackPreview.previewMouseLeave,
|
||||||
|
convertDuration: Utils.convertDuration,
|
||||||
|
addToQueue(e) {
|
||||||
|
e.stopPropagation()
|
||||||
|
Downloads.sendAddToQueue(e.currentTarget.dataset.link)
|
||||||
|
},
|
||||||
|
openQualityModal(e) {
|
||||||
|
QualityModal.open(e.currentTarget.dataset.link)
|
||||||
|
},
|
||||||
|
updated_userSpotifyPlaylists(data){this.spotifyPlaylists = data},
|
||||||
|
updated_userSpotifyNativePlaylists(data){this.spotifyNativePlaylists = data},
|
||||||
|
initSpotify(data) {
|
||||||
|
console.log(data)
|
||||||
|
this.tracks = []
|
||||||
|
this.albums = []
|
||||||
|
this.artists = []
|
||||||
|
this.playlists = []
|
||||||
|
this.updated_userSpotifyNativePlaylists(data)
|
||||||
|
this.spotifyTracks = []
|
||||||
|
document.getElementById('spotify_playlist_tab').click()
|
||||||
|
},
|
||||||
|
selectedLinks() {
|
||||||
|
var selected = []
|
||||||
|
if (this.spotifyPlaylists) {
|
||||||
|
this.spotifyPlaylists.forEach(item => {
|
||||||
|
if (item.selected)
|
||||||
|
selected.push(item.id)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
return selected.join(';')
|
||||||
|
},
|
||||||
|
selectedLinksNative() {
|
||||||
|
var selected = []
|
||||||
|
if (this.spotifyNativePlaylists) {
|
||||||
|
this.spotifyNativePlaylists.forEach(item => {
|
||||||
|
if (item.selected)
|
||||||
|
selected.push(item.id)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
return selected.join(';')
|
||||||
|
},
|
||||||
|
comparePlaylists(e) {
|
||||||
|
e.stopPropagation()
|
||||||
|
//console.log(e) // e == MouseEvent
|
||||||
|
console.log(e.currentTarget.dataset.link)
|
||||||
|
socket.emit('getTracklistFromSpotifyPlaylists', { playlists: e.currentTarget.dataset.link })
|
||||||
|
},
|
||||||
|
mergePlaylists(e) {
|
||||||
|
e.stopPropagation()
|
||||||
|
//console.log(e) // e == MouseEvent
|
||||||
|
console.log(e.currentTarget.dataset.link)
|
||||||
|
socket.emit('mergeSpotifyPlaylists', { playlists: e.currentTarget.dataset.link })
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
socket.on('init_spotify', this.initSpotify)
|
||||||
|
}
|
||||||
|
}).$mount('#spotify_tab')
|
||||||
|
|
||||||
|
export default SpotifyTab
|
||||||
263
src/js/modules/components/spotify-tracklist-tab.js
Normal file
263
src/js/modules/components/spotify-tracklist-tab.js
Normal file
@ -0,0 +1,263 @@
|
|||||||
|
import _ from 'lodash'
|
||||||
|
import Vue from 'vue/dist/vue.esm'
|
||||||
|
import { socket } from '../socket.js'
|
||||||
|
import { albumView, artistView, spotifyTracklistResultView, spotifyPlaylistView } from '../tabs.js'
|
||||||
|
import Downloads from '../downloads.js'
|
||||||
|
import QualityModal from '../quality-modal.js'
|
||||||
|
import TrackPreview from '../track-preview.js'
|
||||||
|
|
||||||
|
const SpotifyTracklistTab = new Vue({
|
||||||
|
data: () => ({
|
||||||
|
title: '',
|
||||||
|
metadata: '',
|
||||||
|
release_date: '',
|
||||||
|
label: '',
|
||||||
|
explicit: false,
|
||||||
|
image: '',
|
||||||
|
type: '',
|
||||||
|
link: '',
|
||||||
|
head: null,
|
||||||
|
body: [],
|
||||||
|
includedPlaylists: [],
|
||||||
|
showTracksInSinglePlaylistOnly: false,
|
||||||
|
hideTrackIfNoPlaylistSelected: false,
|
||||||
|
showTracksInMultiplePlaylistOnly: false
|
||||||
|
|
||||||
|
}),
|
||||||
|
methods: {
|
||||||
|
artistView,
|
||||||
|
albumView,
|
||||||
|
spotifyPlaylistView,
|
||||||
|
playPausePreview: TrackPreview.playPausePreview,
|
||||||
|
reset() {
|
||||||
|
this.title = 'Loading...'
|
||||||
|
this.image = ''
|
||||||
|
this.metadata = ''
|
||||||
|
this.label = ''
|
||||||
|
this.release_date = ''
|
||||||
|
this.explicit = false
|
||||||
|
this.type = ''
|
||||||
|
this.head = []
|
||||||
|
this.body = []
|
||||||
|
this.includedPlaylists = []
|
||||||
|
this.showTracksInSinglePlaylistOnly = false
|
||||||
|
this.hideTrackIfNoPlaylistSelected = false
|
||||||
|
this.showTracksInMultiplePlaylistOnly = false
|
||||||
|
},
|
||||||
|
addToQueue(e) {
|
||||||
|
e.stopPropagation()
|
||||||
|
Downloads.sendAddToQueue(e.currentTarget.dataset.link)
|
||||||
|
},
|
||||||
|
openQualityModal(e) {
|
||||||
|
QualityModal.open(e.currentTarget.dataset.link)
|
||||||
|
},
|
||||||
|
toggleAll(e) {
|
||||||
|
this.body.forEach(item => {
|
||||||
|
if (item.type == 'track') {
|
||||||
|
item.selected = e.currentTarget.checked
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
selectedLinks() {
|
||||||
|
var selected = []
|
||||||
|
if (this.body) {
|
||||||
|
this.body.forEach(item => {
|
||||||
|
if (item.type == 'track' && item.selected)
|
||||||
|
selected.push(this.type == 'Spotify Playlist' ? item.uri : item.link)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
return selected.join(';')
|
||||||
|
},
|
||||||
|
convertDuration(duration) {
|
||||||
|
//convert from seconds only to mm:ss format
|
||||||
|
let mm, ss
|
||||||
|
mm = Math.floor(duration / 60)
|
||||||
|
ss = duration - mm * 60
|
||||||
|
//add leading zero if ss < 0
|
||||||
|
if (ss < 10) {
|
||||||
|
ss = '0' + ss
|
||||||
|
}
|
||||||
|
return mm + ':' + ss
|
||||||
|
},
|
||||||
|
showAlbum(data) {
|
||||||
|
this.type = 'Album'
|
||||||
|
this.link = `https://www.deezer.com/album/${data.id}`
|
||||||
|
this.title = data.title
|
||||||
|
this.explicit = data.explicit_lyrics
|
||||||
|
this.label = data.label
|
||||||
|
this.metadata = `${data.artist.name} • ${data.tracks.length} songs`
|
||||||
|
this.release_date = data.release_date.substring(0, 10)
|
||||||
|
this.image = data.cover_xl
|
||||||
|
this.head = [
|
||||||
|
{ title: '<i class="material-icons">music_note</i>', width: '24px' },
|
||||||
|
{ title: '#' },
|
||||||
|
{ title: 'Song' },
|
||||||
|
{ title: 'Artist' },
|
||||||
|
{ title: '<i class="material-icons">timer</i>', width: '40px' }
|
||||||
|
]
|
||||||
|
if (_.isEmpty(data.tracks)) {
|
||||||
|
console.log('show e lodash ok')
|
||||||
|
|
||||||
|
this.body = null
|
||||||
|
} else {
|
||||||
|
this.body = data.tracks
|
||||||
|
}
|
||||||
|
},
|
||||||
|
showPlaylist(data) {
|
||||||
|
this.type = 'Playlist'
|
||||||
|
this.link = `https://www.deezer.com/playlist/${data.id}`
|
||||||
|
this.title = data.title
|
||||||
|
this.image = data.picture_xl
|
||||||
|
this.release_date = data.creation_date.substring(0, 10)
|
||||||
|
this.metadata = `by ${data.creator.name} • ${data.tracks.length} songs`
|
||||||
|
this.head = [
|
||||||
|
{ title: '<i class="material-icons">music_note</i>', width: '24px' },
|
||||||
|
{ title: '#' },
|
||||||
|
{ title: 'Song' },
|
||||||
|
{ title: 'Artist' },
|
||||||
|
{ title: 'Album' },
|
||||||
|
{ title: '<i class="material-icons">timer</i>', width: '40px' }
|
||||||
|
]
|
||||||
|
if (_.isEmpty(data.tracks)) {
|
||||||
|
this.body = null
|
||||||
|
} else {
|
||||||
|
this.body = data.tracks
|
||||||
|
}
|
||||||
|
},
|
||||||
|
showSpotifyPlaylist(data) {
|
||||||
|
console.log(data)
|
||||||
|
this.type = 'Spotify Playlist'
|
||||||
|
this.link = data.uri
|
||||||
|
this.title = `from ${data.name}`
|
||||||
|
//this.title = `from ${data.name.split(";").forEach(function(e){return " • " + e})}`
|
||||||
|
this.image = data.images.length
|
||||||
|
? data.images[0].url
|
||||||
|
: 'https://e-cdns-images.dzcdn.net/images/cover/d41d8cd98f00b204e9800998ecf8427e/1000x1000-000000-80-0-0.jpg'
|
||||||
|
this.release_date = ''
|
||||||
|
this.metadata = `by ${data.owner.display_name} • ${data.tracks.length} songs`
|
||||||
|
this.head = [
|
||||||
|
{ title: '<i class="material-icons">music_note</i>', width: '24px' },
|
||||||
|
{ title: '#' },
|
||||||
|
{ title: 'Song' },
|
||||||
|
{ title: 'Artist' },
|
||||||
|
{ title: 'Album' },
|
||||||
|
{ title: 'Length <i class="material-icons">timer</i>', width: '40px' },
|
||||||
|
{ title: 'Playlist <i class="material-icons">playlist_play</i>', width: '40px' }
|
||||||
|
]
|
||||||
|
if (_.isEmpty(data.tracks)) {
|
||||||
|
this.body = null
|
||||||
|
} else {
|
||||||
|
this.body = data.tracks
|
||||||
|
}
|
||||||
|
|
||||||
|
if (_.isEmpty(data.includedPlaylists)) {
|
||||||
|
this.includedPlaylists = null
|
||||||
|
} else {
|
||||||
|
// select all
|
||||||
|
data.includedPlaylists.forEach(function(pl) {
|
||||||
|
pl.selected = true
|
||||||
|
})
|
||||||
|
this.includedPlaylists = data.includedPlaylists
|
||||||
|
}
|
||||||
|
document.getElementById('spotify_result_tab').click()
|
||||||
|
// // let map = new Map(data)
|
||||||
|
// // console.log(map)
|
||||||
|
|
||||||
|
|
||||||
|
// let tracks = []
|
||||||
|
// for (obj in data) {
|
||||||
|
// tracks.push(obj)
|
||||||
|
// //tracks.push(obj.track.name)
|
||||||
|
// }
|
||||||
|
// console.log(tracks)
|
||||||
|
|
||||||
|
// if (_.isEmpty(data.tracks)){
|
||||||
|
// this.body = null
|
||||||
|
// } else {
|
||||||
|
// this.body = data.tracks
|
||||||
|
// }
|
||||||
|
|
||||||
|
// if (_.isEmpty(data.tracks)) {
|
||||||
|
// this.body = null
|
||||||
|
// } else {
|
||||||
|
// this.body = data.tracks
|
||||||
|
// }
|
||||||
|
},
|
||||||
|
getPlaylistObj(playlistId) {
|
||||||
|
|
||||||
|
for (k = 0; k < this.includedPlaylists.length; k++) {
|
||||||
|
includedPlId = this.includedPlaylists[k].id
|
||||||
|
if (includedPlId == playlistId) {
|
||||||
|
return this.includedPlaylists[k]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return null
|
||||||
|
},
|
||||||
|
trackInMoreThanOnePlaylist(track) {
|
||||||
|
if(track.inPlaylists.length>1)
|
||||||
|
return true
|
||||||
|
else
|
||||||
|
return false
|
||||||
|
|
||||||
|
},
|
||||||
|
trackInVisiblePlaylist(track) {
|
||||||
|
//console.log(this.includedPlaylists[0].id)
|
||||||
|
//console.log(track.inPlaylists[0])
|
||||||
|
|
||||||
|
for (i = 0; i < track.inPlaylists.length; i++) {
|
||||||
|
plId = track.inPlaylists[i]
|
||||||
|
for (k = 0; k < this.includedPlaylists.length; k++) {
|
||||||
|
includedPlId = this.includedPlaylists[k].id
|
||||||
|
if (includedPlId == plId) {
|
||||||
|
if (this.includedPlaylists[k].selected)
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return false
|
||||||
|
|
||||||
|
// warum auch immer, aber diese for-Schleife funktioniert nicht!
|
||||||
|
// die properties werden nicht richtig abgerufen!
|
||||||
|
// for (plId in track.inPlaylists) {
|
||||||
|
// for (includedPlaylist in this.includedPlaylists) {
|
||||||
|
// //console.log(includedPlaylist[includedPlaylist] + " = includedPlaylist.id")
|
||||||
|
// //console.log(plId[plId] + " = plId")
|
||||||
|
// if (includedPlaylist.id == plId) {
|
||||||
|
// if (includedPlaylist.selected) {
|
||||||
|
// return true
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// return false
|
||||||
|
},
|
||||||
|
getTracklistFromSpotifyPlaylists_done(data) {
|
||||||
|
console.log(data)
|
||||||
|
//deserialized = JSON.parse(data) // error
|
||||||
|
//console.log(deserialized)
|
||||||
|
|
||||||
|
// for (obj in data) {
|
||||||
|
// obj.id
|
||||||
|
// obj.name
|
||||||
|
// obj.duration_ms
|
||||||
|
// obj.playlists
|
||||||
|
// for (a in obj.artists) {
|
||||||
|
// a.name
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
|
// bodyData =
|
||||||
|
|
||||||
|
this.spotifyTracks = data
|
||||||
|
this.showSpotifyPlaylist(data)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
// socket.on('show_album', this.showAlbum)
|
||||||
|
// socket.on('show_playlist', this.showPlaylist)
|
||||||
|
// socket.on('show_spotifyplaylist', this.showSpotifyPlaylist)
|
||||||
|
socket.on('getTracklistFromSpotifyPlaylists_done', this.getTracklistFromSpotifyPlaylists_done)
|
||||||
|
}
|
||||||
|
}).$mount('#spotifytracklist_tab')
|
||||||
|
|
||||||
|
export default SpotifyTracklistTab
|
||||||
@ -1,9 +1,11 @@
|
|||||||
import ArtistTab from './components/artist-tab.js'
|
import ArtistTab from './components/artist-tab.js'
|
||||||
import TracklistTab from './components/tracklist-tab.js'
|
import TracklistTab from './components/tracklist-tab.js'
|
||||||
|
import SpotifyTracklistTab from './components/spotify-tracklist-tab.js'
|
||||||
import LinkAnalyzerTab from './components/link-analyzer-tab.js'
|
import LinkAnalyzerTab from './components/link-analyzer-tab.js'
|
||||||
import HomeTab from './components/home-tab.js'
|
import HomeTab from './components/home-tab.js'
|
||||||
import ChartsTab from './components/charts-tab.js'
|
import ChartsTab from './components/charts-tab.js'
|
||||||
import FavoritesTab from './components/favorites-tab.js'
|
import FavoritesTab from './components/favorites-tab.js'
|
||||||
|
import SpotifyTab from './components/spotify-tab.js'
|
||||||
import { socket } from './socket.js'
|
import { socket } from './socket.js'
|
||||||
import SettingsTab from './components/settings-tab.js'
|
import SettingsTab from './components/settings-tab.js'
|
||||||
import MainSearch from './components/main-search.js'
|
import MainSearch from './components/main-search.js'
|
||||||
@ -54,6 +56,13 @@ export function spotifyPlaylistView(ev) {
|
|||||||
showTab('spotifyplaylist', id)
|
showTab('spotifyplaylist', id)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function spotifyTracklistResultView(ev) {
|
||||||
|
let id = ev.currentTarget.dataset.id
|
||||||
|
SpotifyTracklistTab.reset()
|
||||||
|
//socket.emit('getTracklist', { type: 'spotifyplaylist', id: id })
|
||||||
|
showTab('spotifytracklistresult', id)
|
||||||
|
}
|
||||||
|
|
||||||
function analyzeLink(link) {
|
function analyzeLink(link) {
|
||||||
console.log('Analyzing: ' + link)
|
console.log('Analyzing: ' + link)
|
||||||
LinkAnalyzerTab.reset()
|
LinkAnalyzerTab.reset()
|
||||||
@ -63,6 +72,7 @@ function analyzeLink(link) {
|
|||||||
function linkListeners() {
|
function linkListeners() {
|
||||||
document.getElementById('search_tab').addEventListener('click', handleSearchTabClick)
|
document.getElementById('search_tab').addEventListener('click', handleSearchTabClick)
|
||||||
document.getElementById('favorites_tab').addEventListener('click', handleFavoritesTabClick)
|
document.getElementById('favorites_tab').addEventListener('click', handleFavoritesTabClick)
|
||||||
|
document.getElementById('spotify_tab').addEventListener('click', handleSpotifyTabClick)
|
||||||
document.getElementById('sidebar').addEventListener('click', handleSidebarClick)
|
document.getElementById('sidebar').addEventListener('click', handleSidebarClick)
|
||||||
|
|
||||||
const backButtons = Array.from(document.getElementsByClassName('back-button'))
|
const backButtons = Array.from(document.getElementsByClassName('back-button'))
|
||||||
@ -100,6 +110,9 @@ function handleSidebarClick(event) {
|
|||||||
case 'main_favorites_tablink':
|
case 'main_favorites_tablink':
|
||||||
changeTab(sidebarEl, 'main', 'favorites_tab')
|
changeTab(sidebarEl, 'main', 'favorites_tab')
|
||||||
break
|
break
|
||||||
|
case 'main_spotify_tablink':
|
||||||
|
changeTab(sidebarEl, 'main', 'spotify_tab')
|
||||||
|
break
|
||||||
case 'main_analyzer_tablink':
|
case 'main_analyzer_tablink':
|
||||||
changeTab(sidebarEl, 'main', 'analyzer_tab')
|
changeTab(sidebarEl, 'main', 'analyzer_tab')
|
||||||
break
|
break
|
||||||
@ -140,6 +153,32 @@ function handleSearchTabClick(event) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function handleSpotifyTabClick(event) {
|
||||||
|
let targetID = event.target.id
|
||||||
|
let id = event.currentTarget.dataset.id
|
||||||
|
switch (targetID) {
|
||||||
|
case 'spotify_playlist_tab':
|
||||||
|
changeTab(event.target, 'spotify', 'playlist_spotify')
|
||||||
|
break
|
||||||
|
case 'spotify_result_tab':
|
||||||
|
showTab('spotifytracklistresult', id)
|
||||||
|
//changeTab(event.target, 'spotify', 'album_favorites') // TODO
|
||||||
|
break
|
||||||
|
// case 'favorites_album_tab':
|
||||||
|
// changeTab(event.target, 'favorites', 'album_favorites')
|
||||||
|
// break
|
||||||
|
// case 'favorites_artist_tab':
|
||||||
|
// changeTab(event.target, 'favorites', 'artist_favorites')
|
||||||
|
// break
|
||||||
|
// case 'favorites_track_tab':
|
||||||
|
// changeTab(event.target, 'favorites', 'track_favorites')
|
||||||
|
// break
|
||||||
|
|
||||||
|
default:
|
||||||
|
break
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
function handleFavoritesTabClick(event) {
|
function handleFavoritesTabClick(event) {
|
||||||
let targetID = event.target.id
|
let targetID = event.target.id
|
||||||
|
|
||||||
@ -211,6 +250,10 @@ function showTab(type, id, back = false) {
|
|||||||
|
|
||||||
window.tab = type == 'artist' ? 'artist_tab' : 'tracklist_tab'
|
window.tab = type == 'artist' ? 'artist_tab' : 'tracklist_tab'
|
||||||
|
|
||||||
|
if (type == 'spotifytracklistresult') {
|
||||||
|
window.tab = 'spotifytracklist_tab'
|
||||||
|
}
|
||||||
|
|
||||||
currentStack = { type: type, id: id }
|
currentStack = { type: type, id: id }
|
||||||
let tabcontent = document.getElementsByClassName('main_tabcontent')
|
let tabcontent = document.getElementsByClassName('main_tabcontent')
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user