evan/deemixer
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added a style to the Link Analyzer tab

Browse Source
This commit is contained in:
RemixDev 2020-05-09 13:44:47 +02:00
parent b529f8b789
commit 303183fc3c
5 changed files with 42173 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
public/css/modules/tabs.css
View File

@ -5,6 +5,10 @@
display: none; display: none;
} }
.main_tabcontent h1{
margin-bottom: 12px;
}
.tab button{ .tab button{
background-color: var(--primary-background); background-color: var(--primary-background);
} }

110
public/index.html
View File

@ -477,54 +477,68 @@ <h1>No Favorite Tracks found</h1>
</div> </div>
</div> </div>
<div id="analyzer_tab" class="main_tabcontent"> <div id="analyzer_tab" class="main_tabcontent image_header">
<h1>Link Analyzer</h1> <h1>Link Analyzer</h1>
<h1>{{ title }}</h1> <div v-if="link == ''">
<h2>{{ subtitle }}</h2> <p>You can use this section to find out more information about the link you are trying to download<br/>This is usefull if you're trying to download some tracks that are not available in your country and want to know where they are available</p>
<table> </div>
<tr v-if="data.isrc"> <div v-else>
<td>ISRC</td> <header class="inline-flex"
<td>{{ data.isrc }}</td> :style="{ 'background-image': 'linear-gradient(to bottom, transparent 0%, var(--main-background) 100%), url(\''+image+'\')' }">
</tr> <div>
<tr v-if="data.upc"> <h1>{{ title }}</h1>
<td>UPC</td> <h2 v-if="type == 'track'">by <span class="clickable" @click="artistView" :data-id="data.artist.id">{{data.artist.name}}</span> • in <span class="clickable" @click="albumView" :data-id="data.album.id">{{data.album.title}}</span></h2>
<td>{{ data.upc }}</td> <h2 v-else-if="type == 'album'">by <span class="clickable" @click="artistView" :data-id="data.artist.id">{{data.artist.name}}</span> • {{data.nb_tracks}} tracks</h2>
</tr> </div>
<tr v-if="data.duration"> <div role="button" aria-label="download" @contextmenu.prevent="openQualityModal"
<td>Duration</td> @click.stop="addToQueue" :data-link="link" class="fab right"><i class="material-icons">get_app</i>
<td>{{ convertDuration(data.duration) }}</td> </div>
</tr> </header>
<tr v-if="data.disk_number"> <table>
<td>Disk Number</td> <tr v-if="data.isrc">
<td>{{ data.disk_number }}</td> <td>ISRC</td>
</tr> <td>{{ data.isrc }}</td>
<tr v-if="data.track_position"> </tr>
<td>Track Number</td> <tr v-if="data.upc">
<td>{{ data.track_position }}</td> <td>UPC</td>
</tr> <td>{{ data.upc }}</td>
<tr v-if="data.release_date"> </tr>
<td>Release Date</td> <tr v-if="data.duration">
<td>{{ data.release_date }}</td> <td>Duration</td>
</tr> <td>{{ convertDuration(data.duration) }}</td>
<tr v-if="data.bpm"> </tr>
<td>BPM</td> <tr v-if="data.disk_number">
<td>{{ data.bpm }}</td> <td>Disk Number</td>
</tr> <td>{{ data.disk_number }}</td>
<tr v-if="data.label"> </tr>
<td>Label</td> <tr v-if="data.track_position">
<td>{{ data.label }}</td> <td>Track Number</td>
</tr> <td>{{ data.track_position }}</td>
<tr v-if="data.record_type"> </tr>
<td>Record Type</td> <tr v-if="data.release_date">
<td>{{ data.record_type }}</td> <td>Release Date</td>
</tr> <td>{{ data.release_date }}</td>
<tr v-if="data.genres && data.genres.data.length"> </tr>
<td>Genres</td> <tr v-if="data.bpm">
<td>{{ data.genres.data.map(x => x.name).join("; ") }}</td> <td>BPM</td>
</tr> <td>{{ data.bpm }}</td>
</table> </tr>
<div v-if="countries.length"> <tr v-if="data.label">
<p v-for="country in countries">{{ country[0] }} - {{ country[1] }}</p> <td>Label</td>
<td>{{ data.label }}</td>
</tr>
<tr v-if="data.record_type">
<td>Record Type</td>
<td>{{ data.record_type }}</td>
</tr>
<tr v-if="data.genres && data.genres.data.length">
<td>Genres</td>
<td>{{ data.genres.data.map(x => x.name).join("; ") }}</td>
</tr>
</table>
<div v-if="countries.length">
<p v-for="country in countries">{{ country[0] }} - {{ country[1] }}</p>
</div>
</div> </div>
</div> </div>
@ -1104,4 +1118,4 @@ <h2 class="inline-flex"><span v-if="metadata">{{ metadata }}</span><span class="
<script src="/public/js/bundle.js"></script> <script src="/public/js/bundle.js"></script>
</html> </html>

42108
public/js/bundle.js
View File

File diff suppressed because one or more lines are too long

2
public/js/bundle.js.map
View File

File diff suppressed because one or more lines are too long

5
src/js/modules/components/link-analyzer-tab.js
View File

@ -1,6 +1,6 @@
import Vue from 'vue/dist/vue.esm' import Vue from 'vue/dist/vue.esm'
import { socket } from '../socket.js' import { socket } from '../socket.js'
import { albumView } from '../tabs.js' import { albumView, artistView } from '../tabs.js'
import Utils from '../utils.js' import Utils from '../utils.js'
const LinkAnalyzerTab = new Vue({ const LinkAnalyzerTab = new Vue({
@ -17,6 +17,7 @@ const LinkAnalyzerTab = new Vue({
}, },
methods: { methods: {
albumView, albumView,
artistView,
convertDuration: Utils.convertDuration, convertDuration: Utils.convertDuration,
reset() { reset() {
this.title = 'Loading...' this.title = 'Loading...'
@ -31,7 +32,6 @@ const LinkAnalyzerTab = new Vue({
this.title = this.title =
data.title + data.title +
(data.title_version && data.title.indexOf(data.title_version) == -1 ? ' ' + data.title_version : '') (data.title_version && data.title.indexOf(data.title_version) == -1 ? ' ' + data.title_version : '')
this.subtitle = `by ${data.artist.name}\nin ${data.album.title}`
this.image = data.album.cover_xl this.image = data.album.cover_xl
this.type = 'track' this.type = 'track'
this.link = data.link this.link = data.link
@ -47,7 +47,6 @@ const LinkAnalyzerTab = new Vue({
showAlbum(data) { showAlbum(data) {
console.log(data) console.log(data)
this.title = data.title this.title = data.title
this.subtitle = `by ${data.artist.name}\n${data.nb_tracks} tracks`
this.image = data.cover_xl this.image = data.cover_xl
this.type = 'album' this.type = 'album'
this.link = data.link this.link = data.link