Added track preview funciton

This commit is contained in:
RemixDev
2020-04-25 11:01:30 +02:00
parent c8625db3e0
commit c4e45462bd
8 changed files with 146 additions and 16 deletions

View File

@@ -16,19 +16,19 @@
<body>
<aside id="sidebar" role="navigation">
<i class="material-icons side_icon">menu</i>
<span id="main_search_tablink" class="main_tablinks" role="link" aria-label="home"><i></i></span>
<span id="main_home_tablink" class="main_tablinks" role="link" aria-label="home"><i
class="material-icons side_icon">home</i><span class="main_tablinks_text">Home</span></span>
<span id="main_charts_tablink" class="main_tablinks" role="link" aria-label="home"><i
<span id="main_home_tablink" class="main_tablinks" role="link" aria-label="home"><i
class="material-icons side_icon">home</i><span class="main_tablinks_text">Home</span></span>
<span id="main_search_tablink" class="main_tablinks" role="link" aria-label="search"><i
class="material-icons side_icon">search</i><span class="main_tablinks_text">Search</span></span>
<span id="main_charts_tablink" class="main_tablinks" role="link" aria-label="charts"><i
class="material-icons side_icon">bubble_chart</i><span class="main_tablinks_text">Charts</span></span>
<span id="main_favorites_tablink" class="main_tablinks" role="link" aria-label="home"><i
<span id="main_favorites_tablink" class="main_tablinks" role="link" aria-label="favorites"><i
class="material-icons side_icon">album</i><span class="main_tablinks_text">Favorites</span></span>
<span id="main_analyzer_tablink" class="main_tablinks" role="link" aria-label="home"><i
<span id="main_analyzer_tablink" class="main_tablinks" role="link" aria-label="link analyzer"><i
class="material-icons side_icon">link</i><span class="main_tablinks_text">Link Analyzer</span></span>
<span id="main_settings_tablink" class="main_tablinks" role="link" aria-label="home"><i
<span id="main_settings_tablink" class="main_tablinks" role="link" aria-label="settings"><i
class="material-icons side_icon">settings</i><span class="main_tablinks_text">Settings</span></span>
<span id="main_about_tablink" class="main_tablinks" role="link" aria-label="home"><i
<span id="main_about_tablink" class="main_tablinks" role="link" aria-label="info"><i
class="material-icons side_icon">info</i><span class="main_tablinks_text">Info</span></span>
</aside>
<main id="main_content">
@@ -159,8 +159,9 @@
<th style="width: 56px;"></th>
</tr>
<tr v-for="track in results.trackTab.data" class="track_row">
<td style="width: 48px; text-align: center;"><img class="rounded coverart"
v-bind:src="track.album.cover_small"></td>
<td style="width: 48px; text-align: center;">
<a href="#" @click="playPausePreview" v-bind:class="'rounded' + (track.preview ? ' single-cover' : '')" v-bind: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" v-bind:src="track.album.cover_small">
</td>
<td class="breakline">{{track.title + (track.title_version ? ' '+track.title_version : '')}}</td>
<td class="breakline clickable" @click="artistView" v-bind:data-id="track.artist.id">
{{track.artist.name}}</td>
@@ -533,11 +534,10 @@
<tbody>
<template v-for="track in body">
<tr v-if="track.type == 'track'">
<td><i class="material-icons">play_arrow</i></td>
<td><i @click=playPausePreview v-bind:class="'material-icons' + (track.preview ? ' preview_playlist_controls' : '')" v-bind: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 }} <span
v-if="track.title_version">{{track.title_version}}</span></td>
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" v-bind:data-id="track.artist.id">
{{ track.artist.name }}</td>
<td class="clickable" v-if="type == 'Playlist'" @click="albumView" v-bind:data-id="track.album.id">
@@ -578,7 +578,12 @@
<div id="download_list"></div>
</div>
</main>
<div id="modal_quality" class="smallmodal">
<audio id="preview-track">
<source id="preview-track_source" src="" type="audio/mpeg">
</audio>
<div id="modal_quality" class="smallmodal">
<!-- Modal content -->
<div class="smallmodal-content">
<button class="quality-button" data-quality-value="9">Download FLAC</button><br>
@@ -598,4 +603,4 @@
<script type="module" src="/public/js/app.js"></script>
</html>
</html>