add project files
parent
57a1013018
commit
a86bd04da2
@ -0,0 +1,6 @@
|
|||||||
|
VUE_APP_SPOTIFY_CLIENT_ID=
|
||||||
|
VUE_APP_SPOTIFY_REDIRECT_URI="http://127.0.0.1:8080/auth/callback"
|
||||||
|
|
||||||
|
VUE_APP_API_BASEURL="/api/v1"
|
||||||
|
VUE_APP_API_AUTH_BASEURL="/api/auth"
|
||||||
|
VUE_APP_API_PUBLIC_BASEURL="/api/public"
|
||||||
@ -0,0 +1,15 @@
|
|||||||
|
/* eslint-env node */
|
||||||
|
require("@rushstack/eslint-patch/modern-module-resolution");
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
"root": true,
|
||||||
|
"extends": [
|
||||||
|
"plugin:vue/vue3-essential",
|
||||||
|
"eslint:recommended",
|
||||||
|
"@vue/eslint-config-typescript/recommended",
|
||||||
|
"@vue/eslint-config-prettier"
|
||||||
|
],
|
||||||
|
"env": {
|
||||||
|
"vue/setup-compiler-macros": true
|
||||||
|
},
|
||||||
|
}
|
||||||
@ -1,19 +0,0 @@
|
|||||||
module.exports = {
|
|
||||||
root: true,
|
|
||||||
env: {
|
|
||||||
node: true,
|
|
||||||
},
|
|
||||||
extends: [
|
|
||||||
"plugin:vue/vue3-essential",
|
|
||||||
"eslint:recommended",
|
|
||||||
"@vue/typescript/recommended",
|
|
||||||
"plugin:prettier/recommended",
|
|
||||||
],
|
|
||||||
parserOptions: {
|
|
||||||
ecmaVersion: 2020,
|
|
||||||
},
|
|
||||||
rules: {
|
|
||||||
"no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
|
|
||||||
"no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
|
|
||||||
},
|
|
||||||
};
|
|
||||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,81 @@
|
|||||||
|
import axios from "axios";
|
||||||
|
import type { AxiosInstance } from "axios";
|
||||||
|
import type { App } from "vue";
|
||||||
|
|
||||||
|
type ApiConfig = {
|
||||||
|
baseURL: string;
|
||||||
|
authBaseURL: string;
|
||||||
|
publicBaseURL: string;
|
||||||
|
accessToken: string | null;
|
||||||
|
};
|
||||||
|
|
||||||
|
export class Api {
|
||||||
|
private axios: AxiosInstance;
|
||||||
|
private axiosPublic: AxiosInstance;
|
||||||
|
private baseURL: string;
|
||||||
|
private authBaseURL: string;
|
||||||
|
private publicBaseURL: string;
|
||||||
|
private accessToken: string | null;
|
||||||
|
|
||||||
|
constructor({ baseURL, accessToken, authBaseURL, publicBaseURL }: ApiConfig) {
|
||||||
|
this.baseURL = baseURL;
|
||||||
|
this.authBaseURL = authBaseURL;
|
||||||
|
this.publicBaseURL = publicBaseURL;
|
||||||
|
this.accessToken = accessToken ?? localStorage.getItem("access-token");
|
||||||
|
this.axios = axios.create({ baseURL });
|
||||||
|
this.axios.interceptors.request.use(({ headers = {}, ...config }) => ({
|
||||||
|
...config,
|
||||||
|
headers: { ...headers, ["access-token"]: this.accessToken },
|
||||||
|
}));
|
||||||
|
this.axiosPublic = axios.create({ baseURL: publicBaseURL });
|
||||||
|
this.testConnection().catch(() => {
|
||||||
|
this.accessToken = null;
|
||||||
|
localStorage.removeItem("access-token");
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
async auth({ code, state }: { code: string; state: string }) {
|
||||||
|
const tokens = (await axios.post(`${this.authBaseURL}`, { code, state }))
|
||||||
|
?.data;
|
||||||
|
if (tokens.accessToken) {
|
||||||
|
this.accessToken = tokens.accessToken as string;
|
||||||
|
localStorage.setItem("access-token", this.accessToken);
|
||||||
|
return tokens;
|
||||||
|
}
|
||||||
|
throw "got no access token from spotify :/";
|
||||||
|
}
|
||||||
|
|
||||||
|
isAuthorized() {
|
||||||
|
return !!this.accessToken;
|
||||||
|
}
|
||||||
|
|
||||||
|
async testConnection() {
|
||||||
|
return (await this.axios.get(`/test`))?.data;
|
||||||
|
}
|
||||||
|
async getRole() {
|
||||||
|
return (await this.axios.get(`/user/role`))?.data;
|
||||||
|
}
|
||||||
|
async getCurrentlyPlaying() {
|
||||||
|
return (await this.axios.get(`/user/currentlyPlaying`))?.data;
|
||||||
|
}
|
||||||
|
|
||||||
|
async getUserInfo(userId: string) {
|
||||||
|
return (await this.axiosPublic.get(`/users/${userId}/info`))?.data;
|
||||||
|
}
|
||||||
|
|
||||||
|
async joinSession(userId: string) {
|
||||||
|
return (await this.axios.post(`/user/joinSession`, { userId }))?.data;
|
||||||
|
}
|
||||||
|
async leaveSession(userId: string) {
|
||||||
|
return (await this.axios.post(`/user/leaveSession`, { userId }))?.data;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
let api = null as Api | null;
|
||||||
|
|
||||||
|
export const useApi = () => api;
|
||||||
|
|
||||||
|
export const createApi = (vue: App, config: ApiConfig) => {
|
||||||
|
api = new Api(config);
|
||||||
|
vue.config.globalProperties.$api = api;
|
||||||
|
};
|
||||||
@ -0,0 +1,9 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<svg width='200px' height='200px' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="uil-ring-alt">
|
||||||
|
<rect x="0" y="0" width="100" height="100" fill="none" class="bk"></rect>
|
||||||
|
<circle cx="50" cy="50" r="40" stroke="#d9d9d9" fill="none" stroke-width="10" stroke-linecap="round"></circle>
|
||||||
|
<circle cx="50" cy="50" r="40" stroke="#009eff" fill="none" stroke-width="10" stroke-linecap="round">
|
||||||
|
<animate attributeName="stroke-dashoffset" dur="2s" repeatCount="indefinite" from="502" to="0"></animate>
|
||||||
|
<animate attributeName="stroke-dasharray" dur="2s" repeatCount="indefinite" values="125.5 125.5;1 250;125.5 125.5"></animate>
|
||||||
|
</circle>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 751 B |
@ -0,0 +1,54 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { defineProps } from "vue";
|
||||||
|
|
||||||
|
defineProps({
|
||||||
|
currentlyPlaying: Object,
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="currentlyPlaying card">
|
||||||
|
<div class="card-header">
|
||||||
|
<b>{{ currentlyPlaying.item.name }}</b>
|
||||||
|
{{ currentlyPlaying.item.artists.map(artist => artist.name).join(', ') }}
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md">
|
||||||
|
<img :src="currentlyPlaying.item.album.images[0].url" alt="album cover" class="card-img">
|
||||||
|
<p>
|
||||||
|
listening from {{ currentlyPlaying.context.type }}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="col-md">
|
||||||
|
<p class="my-2">
|
||||||
|
<a
|
||||||
|
:href="currentlyPlaying.item.externalURL.spotify"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener norefferrer"
|
||||||
|
class="btn btn-outline-dark m-1"
|
||||||
|
>
|
||||||
|
view track on Spotify
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
:href="currentlyPlaying.context.externalURL.spotify"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener norefferrer"
|
||||||
|
class="btn btn-outline-dark m-1"
|
||||||
|
>
|
||||||
|
view playlist on Spotify
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.currentlyPlaying {
|
||||||
|
.card-img {
|
||||||
|
max-width: 20rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -1,140 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="hello">
|
|
||||||
<h1>{{ msg }}</h1>
|
|
||||||
<p>
|
|
||||||
For a guide and recipes on how to configure / customize this project,<br />
|
|
||||||
check out the
|
|
||||||
<a href="https://cli.vuejs.org" target="_blank" rel="noopener"
|
|
||||||
>vue-cli documentation</a
|
|
||||||
>.
|
|
||||||
</p>
|
|
||||||
<h3>Installed CLI Plugins</h3>
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<a
|
|
||||||
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener"
|
|
||||||
>babel</a
|
|
||||||
>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a
|
|
||||||
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener"
|
|
||||||
>pwa</a
|
|
||||||
>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a
|
|
||||||
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener"
|
|
||||||
>router</a
|
|
||||||
>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a
|
|
||||||
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener"
|
|
||||||
>eslint</a
|
|
||||||
>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a
|
|
||||||
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener"
|
|
||||||
>typescript</a
|
|
||||||
>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<h3>Essential Links</h3>
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="https://forum.vuejs.org" target="_blank" rel="noopener"
|
|
||||||
>Forum</a
|
|
||||||
>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="https://chat.vuejs.org" target="_blank" rel="noopener"
|
|
||||||
>Community Chat</a
|
|
||||||
>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="https://twitter.com/vuejs" target="_blank" rel="noopener"
|
|
||||||
>Twitter</a
|
|
||||||
>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<h3>Ecosystem</h3>
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<a href="https://router.vuejs.org" target="_blank" rel="noopener"
|
|
||||||
>vue-router</a
|
|
||||||
>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a
|
|
||||||
href="https://github.com/vuejs/vue-devtools#vue-devtools"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener"
|
|
||||||
>vue-devtools</a
|
|
||||||
>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener"
|
|
||||||
>vue-loader</a
|
|
||||||
>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a
|
|
||||||
href="https://github.com/vuejs/awesome-vue"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener"
|
|
||||||
>awesome-vue</a
|
|
||||||
>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts">
|
|
||||||
import { defineComponent } from "vue";
|
|
||||||
|
|
||||||
export default defineComponent({
|
|
||||||
name: "HelloWorld",
|
|
||||||
props: {
|
|
||||||
msg: String,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
|
||||||
<style scoped lang="scss">
|
|
||||||
h3 {
|
|
||||||
margin: 40px 0 0;
|
|
||||||
}
|
|
||||||
ul {
|
|
||||||
list-style-type: none;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
li {
|
|
||||||
display: inline-block;
|
|
||||||
margin: 0 10px;
|
|
||||||
}
|
|
||||||
a {
|
|
||||||
color: #42b983;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -0,0 +1,90 @@
|
|||||||
|
<template>
|
||||||
|
<div
|
||||||
|
class="position-relative PromiseResolver"
|
||||||
|
:class="{ loading: loading && showThrobber }"
|
||||||
|
>
|
||||||
|
<slot
|
||||||
|
v-if="!error && (!loading || (overlay && data !== null))"
|
||||||
|
:data="getter(data)"
|
||||||
|
:update="update"
|
||||||
|
/>
|
||||||
|
<slot v-if="error" name="error">
|
||||||
|
<div class="alert alert-danger">
|
||||||
|
{{ error.message || 'Oops! Something went wrong :/' }}
|
||||||
|
</div>
|
||||||
|
</slot>
|
||||||
|
<slot v-else-if="loading && showThrobber" name="loading">
|
||||||
|
<div class="overlay">
|
||||||
|
<div class="wrapper">
|
||||||
|
<ThrobberLoading />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</slot>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, defineProps } from "vue";
|
||||||
|
import ThrobberLoading from "@/components/ThrobberLoading.vue";
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
promise: [Promise, Object],
|
||||||
|
getter: {
|
||||||
|
type: Function,
|
||||||
|
default: (data: unknown) => data,
|
||||||
|
},
|
||||||
|
overlay: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const loading = ref(true);
|
||||||
|
const showThrobber = ref(true);
|
||||||
|
const error = ref(null);
|
||||||
|
const data = ref(null);
|
||||||
|
|
||||||
|
const update = async (promise: Promise | unknown) => {
|
||||||
|
loading.value = true;
|
||||||
|
setTimeout(() => {
|
||||||
|
if (loading.value) showThrobber.value = true;
|
||||||
|
}, 100);
|
||||||
|
try {
|
||||||
|
data.value = await (promise.isPromiseList
|
||||||
|
? Promise.all(promise.promises)
|
||||||
|
: promise);
|
||||||
|
} catch (e) {
|
||||||
|
error.value = e;
|
||||||
|
} finally {
|
||||||
|
loading.value = false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
update(props.promise);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.PromiseResolver {
|
||||||
|
&.loading {
|
||||||
|
min-height: 5rem;
|
||||||
|
}
|
||||||
|
.overlay {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
min-height: 5rem;
|
||||||
|
background-color: #fffd;
|
||||||
|
z-index: 9000;
|
||||||
|
.wrapper {
|
||||||
|
position: sticky;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
top: 0;
|
||||||
|
height: 100%;
|
||||||
|
max-height: 100vh;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,19 @@
|
|||||||
|
<template>
|
||||||
|
<div class="Throbber">
|
||||||
|
<img src="../assets/throbber.svg" alt="throbber" />
|
||||||
|
<div class="info"><slot>loading</slot></div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.Throbber {
|
||||||
|
padding: 0.5rem;
|
||||||
|
display: flex;
|
||||||
|
flex-flow: column;
|
||||||
|
align-items: center;
|
||||||
|
img {
|
||||||
|
height: 3rem;
|
||||||
|
width: 3rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,6 @@
|
|||||||
|
import { getCurrentInstance } from "vue";
|
||||||
|
|
||||||
|
export const useAdminApi = () => {
|
||||||
|
const vm = getCurrentInstance();
|
||||||
|
return vm?.appContext.config.globalProperties.$adminApi;
|
||||||
|
};
|
||||||
@ -0,0 +1,14 @@
|
|||||||
|
@import "bootstrap/scss/bootstrap.scss";
|
||||||
|
//@import "bootstrap-darkmode/scss/darktheme.scss";
|
||||||
|
|
||||||
|
html, body {
|
||||||
|
//background-color: $dark-body-bg;
|
||||||
|
line-break: loose;
|
||||||
|
word-break: break-word;
|
||||||
|
}
|
||||||
|
|
||||||
|
#app {
|
||||||
|
font-family: Avenir, Helvetica, Arial, sans-serif;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
@ -0,0 +1,18 @@
|
|||||||
|
import { useApi } from "@/Api";
|
||||||
|
import type {
|
||||||
|
NavigationGuardNext,
|
||||||
|
RouteLocationNormalized,
|
||||||
|
Router,
|
||||||
|
} from "vue-router";
|
||||||
|
|
||||||
|
type Context = {
|
||||||
|
from: RouteLocationNormalized;
|
||||||
|
to: RouteLocationNormalized;
|
||||||
|
next: NavigationGuardNext;
|
||||||
|
router: Router;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const auth = ({ next }: Context) => {
|
||||||
|
if (!useApi()?.isAuthorized()) next({ name: "auth" });
|
||||||
|
else next();
|
||||||
|
};
|
||||||
@ -1,5 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="about">
|
|
||||||
<h1>This is an about page</h1>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
@ -0,0 +1,21 @@
|
|||||||
|
<script setup>
|
||||||
|
import PromiseResolver from "@/components/PromiseResolver.vue";
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<h1>Connect to Spotify</h1>
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-body">
|
||||||
|
<PromiseResolver :promise="$api.auth({ code, state })">
|
||||||
|
<div class="alert alert-success">
|
||||||
|
Authorization completed
|
||||||
|
</div>
|
||||||
|
<router-link to="/connect" class="btn btn-primary">
|
||||||
|
Join a Session
|
||||||
|
</router-link>
|
||||||
|
</PromiseResolver>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
@ -0,0 +1,35 @@
|
|||||||
|
<script setup>
|
||||||
|
import querystring from "querystring";
|
||||||
|
|
||||||
|
const randomString = (length) => {
|
||||||
|
const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
|
||||||
|
let result = '';
|
||||||
|
for ( let i = 0; i < length; i++ )
|
||||||
|
result += characters.charAt(Math.floor(Math.random() * characters.length));
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
|
||||||
|
const authUrl = 'https://accounts.spotify.com/authorize?' + querystring.stringify({
|
||||||
|
response_type: 'code',
|
||||||
|
// eslint-disable-next-line
|
||||||
|
client_id: process.env.VUE_APP_SPOTIFY_CLIENT_ID,
|
||||||
|
// eslint-disable-next-line
|
||||||
|
redirect_uri: process.env.VUE_APP_SPOTIFY_REDIRECT_URI,
|
||||||
|
scope: 'user-read-email app-remote-control user-read-playback-state user-read-currently-playing user-modify-playback-state',
|
||||||
|
state: randomString(16),
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<h1>Login</h1>
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-header">
|
||||||
|
Authenticate with Spotify
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<a class="btn btn-primary" :href="authUrl">Authenticate</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
@ -0,0 +1,54 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import PromiseResolver from "@/components/PromiseResolver.vue";
|
||||||
|
import CurrentlyPlaying from "@/components/CurrentlyPlaying.vue";
|
||||||
|
import { useRoute } from "vue-router";
|
||||||
|
|
||||||
|
const route = useRoute();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="about">
|
||||||
|
<h1>Connect</h1>
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-header">
|
||||||
|
test
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<PromiseResolver
|
||||||
|
:promise="$api.testConnection()"
|
||||||
|
v-slot="{ data }"
|
||||||
|
>
|
||||||
|
{{ data }}
|
||||||
|
</PromiseResolver>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-header">
|
||||||
|
role
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<PromiseResolver
|
||||||
|
:promise="$api.getRole()"
|
||||||
|
v-slot="{ data }"
|
||||||
|
>
|
||||||
|
{{ data }}
|
||||||
|
</PromiseResolver>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-header">
|
||||||
|
currently playing
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<PromiseResolver
|
||||||
|
:promise="$api.getCurrentlyPlaying()"
|
||||||
|
v-slot="{ data: { currentlyPlaying }, update }"
|
||||||
|
class="col-md-4"
|
||||||
|
>
|
||||||
|
<CurrentlyPlaying :currently-playing="currentlyPlaying" />
|
||||||
|
<button @click="update($api.getCurrentlyPlaying())" class="btn btn-secondary">update</button>
|
||||||
|
</PromiseResolver>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
@ -0,0 +1,8 @@
|
|||||||
|
<template>
|
||||||
|
<div class="home">
|
||||||
|
<h1>Spot2Gether</h1>
|
||||||
|
<p>
|
||||||
|
listen to music with your friends
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
@ -1,18 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="home">
|
|
||||||
<img alt="Vue logo" src="../assets/logo.png" />
|
|
||||||
<HelloWorld msg="Welcome to Your Vue.js + TypeScript App" />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts">
|
|
||||||
import { defineComponent } from "vue";
|
|
||||||
import HelloWorld from "@/components/HelloWorld.vue"; // @ is an alias to /src
|
|
||||||
|
|
||||||
export default defineComponent({
|
|
||||||
name: "HomeView",
|
|
||||||
components: {
|
|
||||||
HelloWorld,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
@ -0,0 +1,45 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import PromiseResolver from "@/components/PromiseResolver.vue";
|
||||||
|
import CurrentlyPlaying from "@/components/CurrentlyPlaying.vue";
|
||||||
|
import { useRoute } from "vue-router";
|
||||||
|
|
||||||
|
const route = useRoute();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<h1>User</h1>
|
||||||
|
<PromiseResolver
|
||||||
|
:promise="$api.getUserInfo($route.params.id)"
|
||||||
|
v-slot="{ data: { user, currentlyPlaying } }"
|
||||||
|
class="row"
|
||||||
|
>
|
||||||
|
<div class="col-md-4">
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-header">
|
||||||
|
{{ user.displayName }}
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<img :src="user.images[0].url" alt="user image" class="card-img">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
v-if="$api.isAuthorized()"
|
||||||
|
@click="$api.joinSession($route.params.id)"
|
||||||
|
class="btn btn-primary my-2"
|
||||||
|
>
|
||||||
|
Join Session
|
||||||
|
</button>
|
||||||
|
<router-link
|
||||||
|
v-else
|
||||||
|
to="/auth"
|
||||||
|
class="btn btn-primary my-2"
|
||||||
|
>
|
||||||
|
login with Spotify and join session
|
||||||
|
</router-link>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<h2>Currently listening to:</h2>
|
||||||
|
<CurrentlyPlaying v-if="currentlyPlaying?.item" :currently-playing="currentlyPlaying" />
|
||||||
|
</div>
|
||||||
|
</PromiseResolver>
|
||||||
|
</template>
|
||||||
Loading…
Reference in New Issue