Selector/Selector.Web/scripts/Now/Spotify.ts

140 lines
4.2 KiB
TypeScript
Raw Normal View History

import * as Vue from "vue";
2021-11-11 19:54:28 +00:00
import { KeyString, ModeString } from "../Helper";
import { Chart, RadarController, RadialLinearScale, PointElement, LineElement } from "chart.js";
Chart.register(RadarController, RadialLinearScale, PointElement, LineElement);
export let PopularityCard: Vue.Component = {
props: ['track'],
computed: {
progressBarWidth() {
return `width: ${this.track.popularity}%`;
}
},
template:
`
<div class="card info-card">
<h3>Popularity</h3>
<div class="progress popularity-progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" :style="progressBarWidth" :aria-valuenow="track.popularity" aria-valuemin="0" aria-valuemax="100">{{ track.popularity }}%</div>
</div>
<spotify-logo :link="track.externalUrls.spotify" />
</div>
`
}
export let SpotifyLogoLink: Vue.Component = {
props: ['link'],
template:
`
2021-11-10 01:49:20 +00:00
<a :href="link" target="_blank" class="spotify-logo" v-if="link != null && link != undefined">
2021-11-11 19:54:28 +00:00
<img src="/Spotify_Icon_RGB_White.png" >
</a>
2021-11-11 19:54:28 +00:00
<img src="/Spotify_Icon_RGB_White.png" class="spotify-logo" v-else>
`
}
export let AudioFeatureCard: Vue.Component = {
props: ['feature'],
computed: {
Key(): string
{
return KeyString(this.feature.key);
},
Mode(): string
{
return ModeString(this.feature.mode);
}
},
template:
`
<div class="card info-card">
2021-11-21 09:21:08 +00:00
<h5>{{ Key }} {{ Mode }}</h5>
<h5>{{ feature.tempo }} BPM</h5>
<h5>{{ feature.timeSignature }}/4</h5>
<h5>{{ feature.loudness }} dB</h5>
2021-11-11 19:54:28 +00:00
<spotify-logo />
</div>
`
}
export let AudioFeatureChartCard: Vue.Component = {
props: ['feature'],
data() {
return {
chartData: {
labels: [
'Energy',
'Dance',
'Speech',
'Live',
'Instrumental',
'Acoustic',
'Valence'
],
datasets: [{
// label: '# of Votes',
data: [
this.feature.energy,
this.feature.danceability,
this.feature.speechiness,
this.feature.liveness,
this.feature.instrumentalness,
this.feature.acousticness,
this.feature.valence
],
}]
}
}
},
template:
`
2021-11-11 19:54:28 +00:00
<div class="card info-card">
<canvas id="feature-chart"></canvas>
<spotify-logo />
</div>
`,
mounted() {
new Chart("feature-chart", {
type: "radar",
data: this.chartData,
options: {
elements: {
line: {
borderWidth: 4,
borderColor: "#3a3a3a",
backgroundColor: "#727272",
borderCapStyle: "round",
borderJoinStyle: "round"
2021-11-11 19:54:28 +00:00
},
point: {
radius: 4,
pointStyle: "circle",
borderColor: "black",
backgroundColor: "white"
2021-11-11 19:54:28 +00:00
}
},
scales: {
r: {
angleLines: {
display: true
},
pointLabels: {
color: 'white',
font: {
size: 12
}
2021-11-11 19:54:28 +00:00
},
beginAtZero: true,
suggestedMin: 0,
suggestedMax: 1,
ticks: {
display: false
}
}
}
}
})
}
}