Implement a preview mode that bypasses the Spotify authentication and uses sample data.

app.js

@@ -1,4 +1,4 @@
-let app = new Vue({
+var vue_config = {
 	el: `#app`,
 	data: {
 		api_base: `https://api.spotify.com/v1`,
@@ -29,8 +29,8 @@ let app = new Vue({
 			scopes: [
 				`user-top-read`
 			],
-			show_dialog: true,
+			show_dialog: false,
-			use_state: false
+			use_state: true
 		},
 		user: {
 			name: ``,
@@ -81,4 +81,4 @@ let app = new Vue({
 			this.show.modal.playlist_export = false;
 		}
 	}
-})
+};

index.html

@@ -21,7 +21,7 @@
 	<script src="https://unpkg.com/v-tooltip"></script>
 	<script src="./js/text_computation.js"></script>
 	<script src="./js/prototypes.js" async></script>
-	<script src="./app.js" defer></script>
+	<script src="./js/dev/data.js" async></script>
 	<script src="./js/auth.js"></script>
 	<script src="./js/data.js"></script>
 </head>
@@ -110,5 +110,10 @@
 		</transition>
 	</div>
 </div>
+<script src="./app.js"></script>
+<script src="./js/dev/app_modifications.js"></script>
+<script>
+	let app = new Vue(vue_config)
+</script>
 </body>
 </html>

js/dev/app_modifications.js

@@ -0,0 +1,28 @@
+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; };
+};

js/dev/data.js

@@ -0,0 +1 @@
+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}];