Started implementing home tab

public/index.html

@@ -249,6 +249,76 @@ <h1>No Playlists found</h1>
 
 					<div id="home_tab" class="main_tabcontent">
 						<h1>Home</h1>
+            <div v-if="tracks.length">
+              <h2>Top Tracks</h2>
+              <table>
+                <tr v-for="track in tracks" class="track_row">
+                  <td style="width: 48px; text-align: center;">
+                    <a href="#" @click="playPausePreview" :class="'rounded' + (track.preview ? ' single-cover' : '')"
+                      :data-preview="track.preview"><i @mouseenter="previewMouseEnter" @mouseleave="previewMouseLeave"
+                        v-if="track.preview" class="material-icons preview_controls">play_arrow</i><img
+                        class="rounded coverart" :src="track.album.cover_small">
+                  </td>
+                  <td class="breakline">{{track.title + (track.title_version ? ' '+track.title_version : '')}}</td>
+                  <td class="breakline clickable" @click="artistView" :data-id="track.artist.id">
+                    {{track.artist.name}}</td>
+                  <td class="breakline clickable" @click="albumView" :data-id="track.album.id">
+                    {{track.album.title}}</td>
+                  <td>{{convertDuration(track.duration)}}</td>
+                  <td role="button" aria-label="download" @contextmenu.prevent="openQualityModal"
+                    @click.stop="addToQueue" :data-link="track.link" style="width: 56px; text-align: center;"
+                    class="clickable"><i class="material-icons">get_app</i>
+                  </td>
+                </tr>
+              </table>
+            </div>
+            <div v-if="albums.length">
+              <h2>Top Albums</h2>
+              <div class="release_grid">
+                <div v-for="release in albums" class="release clickable" @click="albumView"
+                  :data-id="release.id">
+                  <div class="cover_container">
+                    <img class="rounded coverart" :src="release.cover_medium">
+                    <div role="button" aria-label="download" @contextmenu.prevent="openQualityModal"
+                      @click.stop="addToQueue" :data-link="release.link" class="download_overlay"><i
+                        class="material-icons">get_app</i></div>
+                  </div>
+                  <p class="primary-text">{{ release.title }}</p>
+                  <p class="secondary-text">{{ 'by '+release.artist.name }}</p>
+                </div>
+              </div>
+            </div>
+            <div v-if="artists.length">
+              <h2>Top Artists</h2>
+              <div class="release_grid">
+                <div v-for="release in artists" class="release clickable" @click="artistView"
+                  :data-id="release.id">
+                  <div class="cover_container">
+                    <img class="circle coverart" :src="release.picture_medium">
+                    <div role="button" aria-label="download" @contextmenu.prevent="openQualityModal"
+                      @click.stop="addToQueue" :data-link="release.link" class="download_overlay"><i
+                        class="material-icons">get_app</i></div>
+                  </div>
+                  <p class="primary-text">{{ release.name }}</p>
+                </div>
+              </div>
+            </div>
+            <div v-if="playlists.length">
+              <h2>Top Playlists</h2>
+              <div class="release_grid">
+                <div v-for="release in playlists" class="release clickable" @click="playlistView"
+                  :data-id="release.id">
+                  <div class="cover_container">
+                    <img class="rounded coverart" :src="release.picture_medium">
+                    <div role="button" aria-label="download" @contextmenu.prevent="openQualityModal"
+                      @click.stop="addToQueue" :data-link="release.link" class="download_overlay"><i
+                        class="material-icons">get_app</i></div>
+                  </div>
+                  <p class="primary-text">{{ release.title }}</p>
+                  <p class="secondary-text">{{ 'by '+release.user.name+' - '+release.nb_tracks+' tracks' }}</p>
+                </div>
+              </div>
+            </div>
 					</div>
 
 					<div id="charts_tab" class="main_tabcontent">
@@ -655,4 +725,4 @@ <h2 class="inline-flex"><span v-if="metadata">{{ metadata }}</span><span class="
 
 <script type="module" src="/public/js/app.js"></script>
 
-</html>
+</html>

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

@@ -0,0 +1,46 @@
+import { socket } from '../socket.js'
+import { artistView, albumView, playlistView } 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 HomeTab = new Vue({
+	data() {
+		return {
+      tracks: [],
+      albums: [],
+      artists: [],
+      playlists: []
+		}
+	},
+	methods: {
+    artistView,
+		albumView,
+		playlistView,
+		playPausePreview: TrackPreview.playPausePreview,
+		previewMouseEnter: TrackPreview.previewMouseEnter,
+		previewMouseLeave: TrackPreview.previewMouseLeave,
+    numberWithDots: Utils.numberWithDots,
+		convertDuration: Utils.convertDuration,
+    addToQueue: function (e) {
+			e.stopPropagation()
+			Downloads.sendAddToQueue(e.currentTarget.dataset.link)
+		},
+		openQualityModal: function (e) {
+			e.preventDefault()
+			QualityModal.open(e.currentTarget.dataset.link)
+		},
+		initHome(data) {
+      this.tracks = data.tracks.data
+      this.albums = data.albums.data
+      this.artists = data.artists.data
+			this.playlists = data.playlists.data
+		}
+	},
+	mounted() {
+		socket.on('init_home', this.initHome)
+	}
+}).$mount('#home_tab')
+
+export default HomeTab

public/js/modules/tabs.js

@@ -1,6 +1,7 @@
 import ArtistTab from './components/artist-tab.js'
 import TracklistTab from './components/tracklist-tab.js'
 import LinkAnalyzerTab from './components/link-analyzer-tab.js'
+import HomeTab from './components/home-tab.js'
 import { socket } from './socket.js'
 import SettingsTab from './components/settings-tab.js'
 import MainSearch from './components/main-search.js'

public/js/modules/track-preview.js

@@ -63,7 +63,6 @@ function previewMouseLeave(e) {
 // on click event
 function playPausePreview(e) {
 	e.preventDefault()
-	console.log('PlayPause')
 	let obj = e.currentTarget
 	var icon = obj.tagName == 'I' ? $(obj) : $(obj).children('i')
 	if ($(obj).attr('playing')) {