Started implementing home tab
This commit is contained in:
RemixDev
parent
497e86b6b3
commit
f5455ab580
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
@ -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'
|
||||
|
|
|
|||
|
|
@ -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')) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue