diff --git a/app.js b/app.js deleted file mode 100644 index 41c96d2..0000000 --- a/app.js +++ /dev/null @@ -1,84 +0,0 @@ -var vue_config = { - el: `#app`, - data: { - api_base: `https://api.spotify.com/v1`, - duration: ``, - type: ``, - count: ``, - show: { - popularity_popup: false, - popularity_hover: false, - follower_hover: false, - modal_content: false, - modal: { - popularity: false, - track: false, - artist: false, - playlist_export: false, - } - }, - error: { - main: ``, - auth: ``, - }, - auth: { - alert: `We will only be able to access your top tracks and artists, nothing else. This is also only done on your browser. Our servers do not see any of the data from your account.`, - base_url: `https://accounts.spotify.com/authorize`, - redirect: `http://oliver.akins.me/top-lists`, - client_id: `3a1795e9d55445b0aa0c05dd74c866fb`, - scopes: [ - `user-top-read` - ], - show_dialog: false, - use_state: false - }, - user: { - name: ``, - image: `` - }, - data: { - tracks: [], - artists: [] - } - }, - computed: { - spotify_auth_url: auth_url, - is_authed: verify_auth, - button_type: get_button_text, - }, - methods: { - get_token: function () { - let params = new URLSearchParams(window.location.hash.slice(1)); - return params.get(`access_token`); - }, - get_user: function () { - axios.get( - `${this.api_base}/me`, - { headers: { Authorization: `Bearer ${this.get_token()}` } } - ).then((response) => { - if (response.error) { - window.location.hash = ``; - window.location.href = this.auth.redirect; - return - } - let data = response.data; - - // Set the Vue user object - this.user.name = data.display_name; - this.user.image = data.images.length > 0 ? data.images[0].url : ``; - - }).catch((err) => { - window.location.hash = ``; - window.location.href = this.auth.redirect; - return - }) - }, - get_data: fetch_data, - hide_modal: function () { - this.show.modal.popularity = false; - this.show.modal.track = false; - this.show.modal.artist = false; - this.show.modal.playlist_export = false; - } - } -}; diff --git a/components/artist.html b/components/artist.html deleted file mode 100644 index 8c2a55b..0000000 --- a/components/artist.html +++ /dev/null @@ -1,17 +0,0 @@ -
-
- -
- -
-
-
- - {{artist.name}} - -
- {{genres}} -
-
{{artist.popularity}}
-
{{artist.follower_count.toLocaleString()}}
-
\ No newline at end of file diff --git a/components/artist.js b/components/artist.js deleted file mode 100644 index 119fe2b..0000000 --- a/components/artist.js +++ /dev/null @@ -1,43 +0,0 @@ -Vue.component( - `artist`, - { - props: [ `artist` ], - data: function () { - return { - popularity_tooltip: `Popularity`, - followers_tooltip: `Followers`, - }; - }, - computed: { - genres: function () { - let genres = []; - for (var genre of this.artist.genres) { - genres.push(genre.toTitleCase()); - }; - return genres.join(`, `); - } - }, - methods: { - show_popularity_modal: function () { - this.$emit(`popularity_click`) - } - }, - template: `
-
- -
- -
-
-
- - {{artist.name}} - -
- {{genres}} -
-
{{artist.popularity}}
-
{{artist.follower_count.toLocaleString()}}
-
` - } -) \ No newline at end of file diff --git a/components/icons.js b/components/icons.js deleted file mode 100644 index 5686285..0000000 --- a/components/icons.js +++ /dev/null @@ -1,16 +0,0 @@ -Vue.component( - `music-note`, - { - props: [ `colour` ], - template: `` - } -); - - -Vue.component( - `close`, - { - props: [ `colour` ], - template: `` - } -) \ No newline at end of file diff --git a/components/track.html b/components/track.html deleted file mode 100644 index 9ab16e7..0000000 --- a/components/track.html +++ /dev/null @@ -1,22 +0,0 @@ -
-
- - - - -
- -
- -
-
- - {{track.name}} - - {{track.name}} -
- -
-
{{track.popularity}}
-
{{duration}}
-
\ No newline at end of file diff --git a/components/track.js b/components/track.js deleted file mode 100644 index 6d9feac..0000000 --- a/components/track.js +++ /dev/null @@ -1,70 +0,0 @@ -Vue.component( - `track-card`, - { - props: [ `track` ], - data: function () { - return { - popularity_tooltip: `Popularity` - } - }, - computed: { - duration: function () { - let timestamp = ``; - - // Converting to seconds - let duration = Math.trunc(this.track.duration / 1000); - let seconds = duration % 60; - - // Converting to minutes - duration = Math.trunc(duration / 60); - let minutes = duration % 60 - - // Converting to hours - duration = Math.trunc(duration / 60); - let hours = duration % 24; - - if (seconds < 10) { - seconds = `0${seconds}` - }; - - return `${hours > 0 ? `${hours}:` : ''}${minutes}:${seconds}`; - }, - artists: function () { - let artists = []; - for (var artist of this.track.artists) { - artists.push( - `${artist.name}` - ) - } - return artists.join(`, `) - }, - }, - methods: { - show_popularity_modal: function () { - this.$emit('popularity_click') - } - }, - template: `
-
- - - - -
- -
- -
-
- - {{track.name}} - - {{track.name}} -
- -
-
{{track.popularity}}
-
{{duration}}
-
` - } -); \ No newline at end of file diff --git a/css/card.css b/css/card.css deleted file mode 100644 index 471d401..0000000 --- a/css/card.css +++ /dev/null @@ -1,87 +0,0 @@ -div.card { - /* Card only variables */ - --border-radius: 5px; - - background-color: var(--card-colour); - color: var(--card-text); - border-radius: var(--border-radius); - border-style: none; - padding: 10px; - padding-top: 20px; - margin: 5px auto; - width: 90%; - position: relative; - - display: flex; - flex-direction: column; -} - - -div.card > div.image { - text-align: center; -} -div.card > div.image img { - --size: 200px; - width: var(--size); - height: var(--size); -} - -div.card div.missing-image { - background-color: #3a3a3aaa; - justify-content: center; - border-radius: 100px; - align-items: center; - margin-bottom: 5px; - margin: 0 auto; - display: flex; - height: 200px; - width: 200px; -} - - -div.card > div.info { - text-align: center; - padding-bottom: 20px; - margin: 0; -} -div.card > div.info > .title { font-size: larger; } -div.card > div.info > .subtitle { font-size: smaller; } - -/* Positioning For Absolute Elements */ -div.card .corner { - position: absolute; - padding: 1px 6px; - background-color: var(--on-card-colour); - color: var(--on-card-text); -} -div.card .right { right: 0; } -div.card .left { left: 0; } -div.card .top { top: 0; } -div.card .bottom { bottom: 0; } - - -/* border-radius: top-left top-right lower-right lower-left */ -div.card .popularity { - border-radius: 0 var(--border-radius) 0 var(--border-radius); - cursor: pointer; -} -div.card .followers, -div.card .duration { border-radius: var(--border-radius) 0 var(--border-radius) 0; } - - -div.card a { - color: var(--text-on-card); - text-decoration: none; -} -div.card a:hover { - text-decoration: underline; -} - - -/* DESKTOP STYLES */ -@media only screen and (min-width: 768px) { - div.card { - width: 230px; - margin: 5px; - } -} \ No newline at end of file diff --git a/css/modal.css b/css/modal.css deleted file mode 100644 index 0dfe5cb..0000000 --- a/css/modal.css +++ /dev/null @@ -1,56 +0,0 @@ -div.modal-container { - width: 100%; - height: 100%; - z-index: 5; - background-color: var(--modal-container-background); - position: fixed; - left: 0; - top: 0; - - display: flex; - align-items: center; - justify-content: center; -} - -div.modal { - z-index: 6; - width: 90%; - max-height: 85%; - background-color: var(--modal-background); - border-radius: 5px; - padding: 0 15px; - position: relative; -} - -div.modal * { color: var(--modal-text); } - -div.modal h2 { margin-top: 30px; } - -div.modal p { padding: 0px 5px 15px 5px; } - -div.modal .close-modal { - width: 25px; - height: 25px; - position: absolute; - right: 10px; - top: 10px; - color: var(--spotify-green); -} -div.modal .close-modal:hover { - color: var(--error); - transform: scale(1.2, 1.2); - transition: ease-in-out; - cursor: pointer; -} - - - -@media only screen and (min-width: 768px) { - div.modal { - width: 50%; - max-height: 75%; - } - div.modal h2 { - margin-top: 19.920px; - } -} \ No newline at end of file diff --git a/css/transitions.css b/css/transitions.css deleted file mode 100644 index 0b543dd..0000000 --- a/css/transitions.css +++ /dev/null @@ -1,62 +0,0 @@ -/* Transition for modal background appearing/disappearing */ -.fade-enter-active, .fade-leave-active { - transition: opacity .5s; -} - -.fade-enter, .fade-leave-to { - opacity: 0; -} - - - -/* Transition for modal card appearing disappearing */ -.burst-enter-active { - animation: burst-in .5s; -} -.burst-leave-active { animation: burst-out .5s; } - -@keyframes burst-in { - 0% { - transform: scale(0); - } - 100% { - transform: scale(1); - } -} - -@keyframes burst-out { - 0% { - transform: scale(1); - } - 100% { - transform: scale(0); - } -} - - - -@media only screen and (min-width: 768px) { - @keyframes burst-in { - 0% { - transform: scale(0); - } - 50% { - transform: scale(1.25); - } - 100% { - transform: scale(1); - } - } - - @keyframes burst-out { - 0% { - transform: scale(1); - } - 50% { - transform: scale(1.25); - } - 100% { - transform: scale(0); - } - } -} \ No newline at end of file diff --git a/index.html b/index.html deleted file mode 100644 index 2711fae..0000000 --- a/index.html +++ /dev/null @@ -1,119 +0,0 @@ - - - - - - Top Lists For Spotify - - - - - - - - - - - - - - - - - - - - - - -
-
-
- - - -

{{error.auth}}

-

{{auth.alert}}

-
-
-
-
- -
- -
-
- -
-
- -
-
- -
-
-
{{error.main}}
-
- -
-
- -
- - - -
- -
- - - -

How is Popularity Calculated?

-

- Popularity is a value between 0 and 100 that is calculated by Spotify based on how many plays the song/artist has recieved and how recent those plays are. -

-

- This means that an artist/song that has had 100 plays today will have a higher popularity than a song/artist that has 100 from a month ago. -

-

- This number is not updated in real time so refreshing the page will not reflect it's absolute accurate value. -

-
- -
- -
-
- - - - - diff --git a/js/auth.js b/js/auth.js deleted file mode 100644 index 24d8bdc..0000000 --- a/js/auth.js +++ /dev/null @@ -1,53 +0,0 @@ -function auth_url () { - let params = [ - `client_id=${this.auth.client_id}`, - `response_type=token`, - `redirect_uri=${encodeURIComponent(this.auth.redirect)}`, - `scope=${encodeURIComponent(this.auth.scopes.join(" "))}`, - `show_dialog=${this.auth.show_dialog}` - ]; - - // Create the state data if we are using it - if (this.auth.use_state) { - let state = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15); - params.push(`state=${state}`); - localStorage.setItem(`top-spotify-state`, state); - }; - - return `${this.auth.base_url}?${params.join("&")}`; -}; - - -function verify_auth () { - let params = new URLSearchParams(window.location.hash.slice(1)); - - // Check to ensure the authorization was a success - if (params.get(`access_token`)) { - this.get_user() - - // Check if we compare state - if (this.use_state) { - - // Compare given state to localstorage state - let LS_state = localStorage.getItem(`top-spotify-state`); - if (LS_state = params.get(`state`)) { - console.info(`State compare success`) - this.authed = true; - return true - } - console.error(`State compare failed`) - return false - } else { - return true - } - } else { - let error = (new URLSearchParams(window.location.search)).get(`error`) - - // Authorization failed, error to the user - if (error !== null) { - this.error.auth = `Authentication failed or was cancelled, please try again.`; - window.location.hash = ``; - } - return false; - } -} \ No newline at end of file diff --git a/js/data.js b/js/data.js deleted file mode 100644 index aa0ed14..0000000 --- a/js/data.js +++ /dev/null @@ -1,57 +0,0 @@ -function fetch_data () { - let url = `${this.api_base}/me/top/${this.type.toLowerCase()}`; - - let limit = parseInt(this.count); - if (!limit) { limit = 10; }; - - url += `?limit=${limit}&time_range=${this.duration}`; - - axios.get( - url, - { headers: { Authorization: `Bearer ${this.get_token()}` } } - ).then((response) => { - this.data.artists = []; - this.data.tracks = []; - this.error.main = ``; - switch (this.type) { - case `Tracks`: - for (var track of response.data.items) { - this.data.tracks.push({ - name: track.name, - popularity: track.popularity, - artists: track.artists, - link: track.external_urls.spotify, - duration: track.duration_ms, - locality: track.is_local, - id: track.uri, - album: { - name: track.album.name, - image: track.album.images[1], - link: track.album.external_urls.spotify - } - }); - }; - break; - - case `Artists`: - for (var artist of response.data.items) { - this.data.artists.push({ - name: artist.name, - id: artist.id, - popularity: artist.popularity, - follower_count: artist.followers.total, - image: artist.images[1], - genres: artist.genres, - link: artist.external_urls.spotify - }); - }; - break; - - default: - this.error.main = `TypeError: ${this.type} is not a supported category`; - break - }; - }).catch((err) => { - this.error.main = `${err.name}: ${err.message}` - }) -} \ No newline at end of file diff --git a/js/dev/app_modifications.js b/js/dev/app_modifications.js deleted file mode 100644 index 43ae4e7..0000000 --- a/js/dev/app_modifications.js +++ /dev/null @@ -1,28 +0,0 @@ -let params = new URLSearchParams(window.location.search); -let dev_mode = !(params.get(`dev`) == null || params.get(`dev`) === `false`); -let preview = !(params.get(`preview`) == null || params.get(`preview`) === `false`); - - -function get_dev_data () { - switch (this.type) { - case `Artists`: - this.data.artists = dev_artists; - this.data.tracks = []; - break; - case `Tracks`: - this.data.artists = []; - this.data.tracks = dev_tracks; - break; - default: - this.data.tracks = []; - this.data.artists = []; - break; - } -} - - -if (dev_mode || preview) { - vue_config.data.user.name = `Preview Mode`; - vue_config.methods.get_data = get_dev_data; - vue_config.computed.is_authed = function () { return true; }; -}; \ No newline at end of file diff --git a/js/dev/data.js b/js/dev/data.js deleted file mode 100644 index af7c0f2..0000000 --- a/js/dev/data.js +++ /dev/null @@ -1 +0,0 @@ -const dev_tracks = [{name:"Into the Unknown",popularity:34,locality:false,link:"https://open.spotify.com/track/37POsvF7xupvgDnYYIXoYX",id:"spotify:track:37POsvF7xupvgDnYYIXoYX",duration:225273,artists:[{external_urls:{spotify:"https://open.spotify.com/artist/6ls5A8Wys9Swixpz4v6kj3"},href:"https://api.spotify.com/v1/artists/6ls5A8Wys9Swixpz4v6kj3",id:"6ls5A8Wys9Swixpz4v6kj3",name:"The Lighthouse And The Whaler",type:"artist",uri:"spotify:artist:6ls5A8Wys9Swixpz4v6kj3"}],album:{name:"Into the Unknown",link:"https://open.spotify.com/album/6NpAhMmG0TkOpapqs6NFnj",image:{url:"https://i.scdn.co/image/ab67616d00001e02e0f91ea6315c150d84e031be"}}},{name:"The Science Love Song",popularity:35,locality:false,link:"https://open.spotify.com/track/0DkvyLEW2VG5e2ruf7kTS9",id:"spotify:track:0DkvyLEW2VG5e2ruf7kTS9",duration:200054,artists:[{external_urls:{spotify:"https://open.spotify.com/artist/7E8gU2qkctwGqHBizPRH9A"},href:"https://api.spotify.com/v1/artists/7E8gU2qkctwGqHBizPRH9A",id:"7E8gU2qkctwGqHBizPRH9A",name:"AsapSCIENCE",type:"artist",uri:"spotify:artist:7E8gU2qkctwGqHBizPRH9A"}],album:{name:"The Science Love Song",link:"https://open.spotify.com/album/13sXGjZuZgXuvjAZfXOXfP",image:{url:"https://i.scdn.co/image/ab67616d00001e02d5e24468d455c3140f0581b2"}}}]; const dev_artists = [{popularity:87,name:"Avicii",link:"https://open.spotify.com/artist/1vCWHaC5f2uS3yhpwWbIA6",image:{url:"https://i.scdn.co/image/9c0d8fa969a9f5db6ff860203d6880a125e501d2"},id:"1vCWHaC5f2uS3yhpwWbIA6",genres:["big room","dance pop","edm","pop"],follower_count:17671212},{popularity:52,name:"'Come From Away' Company",link:"https://open.spotify.com/artist/3yVB4N2PhQy60dAxzCoNdQ",image:undefined,id:"3yVB4N2PhQy60dAxzCoNdQ",genres:["broadway","show tunes"],follower_count:3143}]; \ No newline at end of file diff --git a/js/prototypes.js b/js/prototypes.js deleted file mode 100644 index 69f5556..0000000 --- a/js/prototypes.js +++ /dev/null @@ -1,10 +0,0 @@ -String.prototype.toTitleCase = function () { - let words = this.split(` `); - let new_words = []; - for (var word of words) { - new_words.push( - `${word[0].toUpperCase()}${word.slice(1).toLowerCase()}` - ); - }; - return new_words.join(` `); -} \ No newline at end of file diff --git a/js/text_computation.js b/js/text_computation.js deleted file mode 100644 index 0b10959..0000000 --- a/js/text_computation.js +++ /dev/null @@ -1,19 +0,0 @@ -function get_button_text () { - if (this.count === ``) { - return this.type; - } - else if (this.count === `1`) { - this.error.main = ``; - return this.type.slice(0,-1); - } - else if (this.count <= 0) { - this.error.main = `Cannot get 0 or fewer ${this.type.toLowerCase()}`; - return false; - } - else if (this.count > 50) { - this.error.main = `Cannot get more than 50 ${this.type.toLowerCase()}`; - return false; - }; - this.error.main = ``; - return this.type; -}; \ No newline at end of file