Implemented Favorites tab

public/js/modules/components/favorites-tab.js

@@ -0,0 +1,45 @@
+import { socket } from '../socket.js'
+import { playlistView, artistView, albumView } 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 FavoritesTab = new Vue({
+	data() {
+		return {
+			tracks: [],
+			albums: [],
+			artists: [],
+			playlists: []
+		}
+	},
+	methods: {
+		playlistView,
+		artistView,
+		albumView,
+		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)
+		},
+		initFavorites(data) {
+			this.tracks = data.tracks
+			this.albums = data.albums
+			this.artists = data.artists
+			this.playlists = data.playlists
+			document.getElementById('favorites_playlist_tab').click()
+		}
+	},
+	mounted() {
+		socket.on('init_favorites', this.initFavorites)
+	}
+}).$mount('#favorites_tab')
+
+export default FavoritesTab

public/js/modules/tabs.js

@@ -3,6 +3,7 @@ import TracklistTab from './components/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 { socket } from './socket.js'
 import SettingsTab from './components/settings-tab.js'
 import MainSearch from './components/main-search.js'
@@ -53,7 +54,8 @@ function analyzeLink(link) {
 }
 
 function linkListeners() {
-	document.getElementById('search_tab').addEventListener('click', handleTabClick)
+	document.getElementById('search_tab').addEventListener('click', handleSearchTabClick)
+	document.getElementById('favorites_tab').addEventListener('click', handleFavoritesTabClick)
 	document.getElementById('sidebar').addEventListener('click', handleSidebarClick)
 
 	const backButtons = Array.from(document.getElementsByClassName('back-button'))
@@ -106,7 +108,7 @@ function handleSidebarClick(event) {
 	}
 }
 
-function handleTabClick(event) {
+function handleSearchTabClick(event) {
 	let targetID = event.target.id
 
 	switch (targetID) {
@@ -131,6 +133,28 @@ function handleTabClick(event) {
 	}
 }
 
+function handleFavoritesTabClick(event) {
+	let targetID = event.target.id
+
+	switch (targetID) {
+		case 'favorites_playlist_tab':
+			changeTab(event.target, 'favorites', 'playlist_favorites')
+			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 changeTab(sidebarEl, section, tabName) {
 	windows_stack = []
 	currentStack = {}