0
0
Fork 0

Add release date of album to track information

This commit is contained in:
Oliver-Akins 2020-08-13 21:25:45 -06:00
parent fa46bb44ef
commit 9bf551bd6d

View file

@ -7,7 +7,18 @@
> >
<transition name="burst" @after-leave="$emit('close')"> <transition name="burst" @after-leave="$emit('close')">
<div v-if="content" class="modal"> <div v-if="content" class="modal">
<h2>"{{ track.name }}" Information</h2> <h2 @click.self="show_all_feature_info = true">
"{{ track.name }}" Information
<div
class="release-date"
>
<span
v-tooltip="release_date_tooltip"
>
{{ track.album.release_date.replace(/-/g, `/`) }}
</span>
</div>
</h2>
<div class="audio-features-container"> <div class="audio-features-container">
<div <div
v-for="name in data_wanted" v-for="name in data_wanted"
@ -35,21 +46,23 @@
<script> <script>
import * as axios from "axios"; import * as axios from "axios";
import TrackAudioFeatureInfo from "./FeaturesInfo.vue";
export default { export default {
name: `DetailedTrackInfo`, name: `DetailedTrackInfo`,
components: {},
props: { props: {
track: { track: {
type: Object, type: Object,
required: true, required: true,
} }
}, },
created() {},
data() { return { data() { return {
container: false, container: false,
content: false, content: false,
show_feature_info: false,
show_all_feature_info: false,
data_populated: false, data_populated: false,
tooltips: {},
data_points: {}, data_points: {},
data_wanted: [ data_wanted: [
`acousticness`, `acousticness`,
@ -62,6 +75,20 @@ export default {
`valence`, `valence`,
`popularity`, `popularity`,
], ],
months: {
"01": "January",
"02": "Febuary",
"03": "March",
"04": "April",
"05": "May",
"06": "June",
"07": "July",
"08": "August",
"09": "September",
"10": "October",
"11": "November",
"12": "December",
}
}}, }},
mounted() { mounted() {
this.$nextTick(function() { this.$nextTick(function() {
@ -79,6 +106,21 @@ export default {
.catch(err => console.error(err)) .catch(err => console.error(err))
}) })
}, },
computed: {
release_date_tooltip() {
let parts = this.track.album.release_date.split(`-`);
switch (this.track.album.release_date_precision) {
case `year`:
return release[0];
case `month`:
return `${this.months[parts[1]]}, ${parts[0]}`
case `day`:
return `${this.months[parts[1]]} ${parts[2]}, ${parts[0]}`
default:
return ``;
};
},
},
methods: { methods: {
get_percentage(key) { get_percentage(key) {
let value = this.data_points[key]; let value = this.data_points[key];
@ -123,6 +165,13 @@ export default {
h2 { h2 {
text-align: center; text-align: center;
position: relative;
}
.release-date {
position: absolute;
font-size: 0.6em;
width: 100%;
} }
.audio-features-container { .audio-features-container {