From 8ab32e206cd9e15772f3a25b227a078f4553bbc7 Mon Sep 17 00:00:00 2001 From: Aryan Layes Date: Wed, 13 May 2020 00:58:03 +0200 Subject: [PATCH] v6 --- public/index.html | 184 ++++++++++++ src/js/modules/components/spotify-tab.js | 87 ++++++ .../components/spotify-tracklist-tab.js | 263 ++++++++++++++++++ src/js/modules/tabs.js | 43 +++ 4 files changed, 577 insertions(+) create mode 100644 src/js/modules/components/spotify-tab.js create mode 100644 src/js/modules/components/spotify-tracklist-tab.js diff --git a/public/index.html b/public/index.html index 54065de..d759cce 100644 --- a/public/index.html +++ b/public/index.html @@ -43,6 +43,10 @@ album Favorites + + extension + Spotify + link Link @@ -484,6 +488,67 @@

No Favorite Tracks found

+
+

Spotify

+
+ + +
+
+
+

No (native) Playlists found

+
+
+

native Spotify Playlists

+ + + + + + + + + + + + + +
comparetitletracksid
{{cPlaylist.name}}{{cPlaylist.tracks.total}}{{cPlaylist.id}}
+
+
+

No Playlists found

+
+
+ + + + + + + + + + + + + + + +
comparetitlecreatortracksid
{{release.title}}{{release.creator.name}}{{release.nb_tracks}}{{release.id}}
+
+
+
+ + + + +
+
+

Link Analyzer

@@ -1105,6 +1170,125 @@

{{ metadata }} +
+

{{ title }} explicit

+

{{ metadata }}{{ release_date }}

+
+
+

No included Playlist found

+
+
+
+

Options

+ showTracksInSinglePlaylistOnly + hideTrackIfNoPlaylistSelected + showTracksInMultiplePlaylistOnly +
+ + + + + + + + + + + + + + + + + + + + + +
includenameownertracksiduri
{{playlist.name}} + + {{owner.display_name}}
+ + 		{{playlist.numTracks}}{{playlist.id}}{{playlist.uri}}
+
+ + + + + + + + + + + +
DL +
+ {{ label }} +
+ + + +
+

+
diff --git a/src/js/modules/components/spotify-tab.js b/src/js/modules/components/spotify-tab.js new file mode 100644 index 0000000..f84765f --- /dev/null +++ b/src/js/modules/components/spotify-tab.js @@ -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 diff --git a/src/js/modules/components/spotify-tracklist-tab.js b/src/js/modules/components/spotify-tracklist-tab.js new file mode 100644 index 0000000..bc1cac8 --- /dev/null +++ b/src/js/modules/components/spotify-tracklist-tab.js @@ -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: 'music_note', width: '24px' }, + { title: '#' }, + { title: 'Song' }, + { title: 'Artist' }, + { title: 'timer', 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: 'music_note', width: '24px' }, + { title: '#' }, + { title: 'Song' }, + { title: 'Artist' }, + { title: 'Album' }, + { title: 'timer', 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: 'music_note', width: '24px' }, + { title: '#' }, + { title: 'Song' }, + { title: 'Artist' }, + { title: 'Album' }, + { title: 'Length timer', width: '40px' }, + { title: 'Playlist playlist_play', 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 diff --git a/src/js/modules/tabs.js b/src/js/modules/tabs.js index 6f38b07..6844d85 100644 --- a/src/js/modules/tabs.js +++ b/src/js/modules/tabs.js @@ -1,9 +1,11 @@ import ArtistTab from './components/artist-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 HomeTab from './components/home-tab.js' import ChartsTab from './components/charts-tab.js' import FavoritesTab from './components/favorites-tab.js' +import SpotifyTab from './components/spotify-tab.js' import { socket } from './socket.js' import SettingsTab from './components/settings-tab.js' import MainSearch from './components/main-search.js' @@ -54,6 +56,13 @@ export function spotifyPlaylistView(ev) { 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) { console.log('Analyzing: ' + link) LinkAnalyzerTab.reset() @@ -63,6 +72,7 @@ function analyzeLink(link) { function linkListeners() { document.getElementById('search_tab').addEventListener('click', handleSearchTabClick) document.getElementById('favorites_tab').addEventListener('click', handleFavoritesTabClick) + document.getElementById('spotify_tab').addEventListener('click', handleSpotifyTabClick) document.getElementById('sidebar').addEventListener('click', handleSidebarClick) const backButtons = Array.from(document.getElementsByClassName('back-button')) @@ -100,6 +110,9 @@ function handleSidebarClick(event) { case 'main_favorites_tablink': changeTab(sidebarEl, 'main', 'favorites_tab') break + case 'main_spotify_tablink': + changeTab(sidebarEl, 'main', 'spotify_tab') + break case 'main_analyzer_tablink': changeTab(sidebarEl, 'main', 'analyzer_tab') 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) { let targetID = event.target.id @@ -211,6 +250,10 @@ function showTab(type, id, back = false) { window.tab = type == 'artist' ? 'artist_tab' : 'tracklist_tab' + if (type == 'spotifytracklistresult') { + window.tab = 'spotifytracklist_tab' + } + currentStack = { type: type, id: id } let tabcontent = document.getElementsByClassName('main_tabcontent')