mirror of
https://github.com/janishutz/MusicPlayer.git
synced 2026-09-10 14:25:24 +02:00
feat: dev token loading, basic setup for musickit
This commit is contained in:
+71
-29
@@ -1,15 +1,15 @@
|
||||
import vue from 'eslint-plugin-vue';
|
||||
import eslint from '@eslint/js';
|
||||
import globals from 'globals';
|
||||
import typescript from '@typescript-eslint/eslint-plugin';
|
||||
import stylistic from '@stylistic/eslint-plugin';
|
||||
import tseslint from 'typescript-eslint';
|
||||
import typescript from '@typescript-eslint/eslint-plugin';
|
||||
import vue from 'eslint-plugin-vue';
|
||||
|
||||
const style = {
|
||||
'plugins': {
|
||||
'@stylistic': stylistic,
|
||||
'@stylistic/js': stylistic,
|
||||
'@stylistic/ts': stylistic,
|
||||
'@stylistic/ts': stylistic
|
||||
},
|
||||
'files': [
|
||||
'**/*.ts',
|
||||
@@ -20,11 +20,26 @@ const style = {
|
||||
'**/*.jsx'
|
||||
],
|
||||
'rules': {
|
||||
'sort-imports': [
|
||||
'warn',
|
||||
{
|
||||
'ignoreCase': false,
|
||||
'ignoreDeclarationSort': false,
|
||||
'ignoreMemberSort': false,
|
||||
'memberSyntaxSortOrder': [
|
||||
'none',
|
||||
'all',
|
||||
'multiple',
|
||||
'single'
|
||||
],
|
||||
'allowSeparatedGroups': false
|
||||
}
|
||||
],
|
||||
// Formatting
|
||||
'@stylistic/array-bracket-newline': [
|
||||
'error',
|
||||
{
|
||||
'multiline': true,
|
||||
'multiline': false,
|
||||
'minItems': 2
|
||||
}
|
||||
],
|
||||
@@ -35,7 +50,8 @@ const style = {
|
||||
'@stylistic/array-element-newline': [
|
||||
'error',
|
||||
{
|
||||
'multiline': true,
|
||||
'consistent': false,
|
||||
'multiline': false,
|
||||
'minItems': 2
|
||||
}
|
||||
],
|
||||
@@ -56,7 +72,14 @@ const style = {
|
||||
],
|
||||
'@stylistic/brace-style': [
|
||||
'error',
|
||||
'1tbs'
|
||||
'1tbs',
|
||||
{
|
||||
'allowSingleLine': false
|
||||
}
|
||||
],
|
||||
'@stylistic/comma-dangle': [
|
||||
'error',
|
||||
'never'
|
||||
],
|
||||
'@stylistic/comma-spacing': [
|
||||
'error',
|
||||
@@ -73,9 +96,9 @@ const style = {
|
||||
'error',
|
||||
'property'
|
||||
],
|
||||
'@stylistic/eol-last': [
|
||||
'@stylistic/function-call-argument-newline': [
|
||||
'error',
|
||||
'always'
|
||||
'consistent'
|
||||
],
|
||||
'@stylistic/function-call-spacing': [
|
||||
'error',
|
||||
@@ -83,11 +106,7 @@ const style = {
|
||||
],
|
||||
'@stylistic/function-paren-newline': [
|
||||
'error',
|
||||
'multiline'
|
||||
],
|
||||
'@stylistic/function-call-argument-newline': [
|
||||
'error',
|
||||
'consistent'
|
||||
'multiline-arguments'
|
||||
],
|
||||
'@stylistic/implicit-arrow-linebreak': [
|
||||
'error',
|
||||
@@ -97,6 +116,10 @@ const style = {
|
||||
'error',
|
||||
4
|
||||
],
|
||||
'@stylistic/indent-binary-ops': [
|
||||
'error',
|
||||
4
|
||||
],
|
||||
'@stylistic/key-spacing': [
|
||||
'error',
|
||||
{
|
||||
@@ -118,18 +141,31 @@ const style = {
|
||||
'@stylistic/max-len': [
|
||||
'warn',
|
||||
{
|
||||
'code': 90,
|
||||
'comments': 100,
|
||||
'code': 140,
|
||||
'comments': 160,
|
||||
'ignoreComments': false,
|
||||
'ignoreUrls': true,
|
||||
'ignoreStrings': false
|
||||
'ignoreStrings': true,
|
||||
'ignoreTemplateLiterals': true,
|
||||
'ignoreRegExpLiterals': true
|
||||
}
|
||||
],
|
||||
'@stylistic/max-statements-per-line': [
|
||||
'error',
|
||||
{
|
||||
'max': 1
|
||||
}
|
||||
],
|
||||
'@stylistic/multiline-ternary': [
|
||||
'error',
|
||||
'always-multiline'
|
||||
],
|
||||
'@stylistic/new-parens': [
|
||||
'error',
|
||||
'always'
|
||||
],
|
||||
'@stylistic/newline-per-chained-call': [ 'error' ],
|
||||
'@stylistic/newline-per-chained-call': 'error',
|
||||
'@stylistic/no-confusing-arrow': 'error',
|
||||
'@stylistic/no-extra-parens': [
|
||||
'error',
|
||||
'all',
|
||||
@@ -167,17 +203,17 @@ const style = {
|
||||
'always'
|
||||
],
|
||||
'@stylistic/object-property-newline': 'error',
|
||||
'@stylistic/one-var-declaration-per-line': 'error',
|
||||
'@stylistic/operator-linebreak': [
|
||||
'error',
|
||||
'before'
|
||||
],
|
||||
'@stylistic/one-var-declaration-per-line': 'error',
|
||||
'@stylistic/padded-blocks': [
|
||||
'error',
|
||||
{
|
||||
'blocks': 'never',
|
||||
'classes': 'always',
|
||||
'switches': 'never',
|
||||
'switches': 'never'
|
||||
}
|
||||
],
|
||||
|
||||
@@ -561,7 +597,7 @@ const style = {
|
||||
'blankLine': 'always',
|
||||
'prev': 'class',
|
||||
'next': '*'
|
||||
},
|
||||
}
|
||||
],
|
||||
'@stylistic/quote-props': [
|
||||
'error',
|
||||
@@ -613,17 +649,23 @@ const style = {
|
||||
'error',
|
||||
'always'
|
||||
],
|
||||
'@stylistic/switch-colon-spacing': 'error',
|
||||
'@stylistic/template-curly-spacing': [
|
||||
'error',
|
||||
'always'
|
||||
],
|
||||
'@stylistic/switch-colon-spacing': 'error',
|
||||
'@stylistic/template-tag-spacing': [
|
||||
'error',
|
||||
'always'
|
||||
],
|
||||
'@stylistic/type-generic-spacing': 'error',
|
||||
'@stylistic/type-named-tuple-spacing': 'error',
|
||||
'@stylistic/wrap-iife': [
|
||||
'error',
|
||||
'inside'
|
||||
],
|
||||
'@stylistic/wrap-regex': 'error',
|
||||
'@stylistic/ts/type-annotation-spacing': 'error',
|
||||
'@stylistic/ts/type-annotation-spacing': 'error'
|
||||
}
|
||||
};
|
||||
|
||||
@@ -642,15 +684,15 @@ export default tseslint.config(
|
||||
'ecmaVersion': 'latest',
|
||||
'globals': globals.browser,
|
||||
'parserOptions': {
|
||||
'parser': tseslint.parser,
|
||||
},
|
||||
'parser': tseslint.parser
|
||||
}
|
||||
},
|
||||
'plugins': {
|
||||
'vue': vue,
|
||||
'@stylistic': stylistic,
|
||||
'@stylistic/js': stylistic,
|
||||
'@stylistic/ts': stylistic,
|
||||
'@typescript-eslint': typescript,
|
||||
'@typescript-eslint': typescript
|
||||
},
|
||||
'extends': [
|
||||
eslint.configs.recommended,
|
||||
@@ -694,9 +736,9 @@ export default tseslint.config(
|
||||
'error',
|
||||
{
|
||||
'singleline': 3,
|
||||
'multiline': 1,
|
||||
'multiline': 1
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
],
|
||||
},
|
||||
},
|
||||
);
|
||||
|
||||
@@ -0,0 +1,19 @@
|
||||
{
|
||||
"dependencies": {
|
||||
"express": "^5.2.1",
|
||||
"express-session": "^1.19.0",
|
||||
"jsonwebtoken": "^9.0.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"eslint": "^10.9.0",
|
||||
"@types/express": "^5.0.6",
|
||||
"@types/express-session": "^1.19.0",
|
||||
"@types/node": "^26.2.0",
|
||||
"@eslint/js": "^10.0.1",
|
||||
"@stylistic/eslint-plugin": "^5.10.0",
|
||||
"@types/jsonwebtoken": "^9.0.10",
|
||||
"eslint-plugin-vue": "^10.10.0",
|
||||
"globals": "^17.11.0",
|
||||
"typescript-eslint": "^8.67.0"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,54 @@
|
||||
import express from 'express';
|
||||
import expressSession from 'express-session';
|
||||
import fs from 'fs';
|
||||
import jwt from 'jsonwebtoken';
|
||||
import path from 'path';
|
||||
|
||||
const app = express();
|
||||
|
||||
app.use( expressSession( {
|
||||
'secret': '',
|
||||
'resave': true,
|
||||
'saveUninitialized': false
|
||||
} ) );
|
||||
|
||||
|
||||
app.get( '/', ( request: express.Request, response: express.Response ) => {
|
||||
response.send( 'HELLO WORLD' );
|
||||
} );
|
||||
|
||||
|
||||
|
||||
const privateKey = fs.readFileSync( path.join(
|
||||
__dirname,
|
||||
'/config/apple_private_key.p8'
|
||||
) ).toString();
|
||||
const musicApiConfig = JSON.parse( fs.readFileSync( path.join(
|
||||
__dirname,
|
||||
'/config/apple-music-api.config.secret.json'
|
||||
) ).toString() );
|
||||
|
||||
app.get( '/dev-token', ( request: express.Request, response: express.Response ) => {
|
||||
// sign dev token
|
||||
const now = new Date().getTime();
|
||||
const tomorrow = now + ( 24 * 3600 * 1000 );
|
||||
const jwtToken = jwt.sign( {
|
||||
'iss': musicApiConfig.teamID,
|
||||
'iat': Math.floor( now / 1000 ),
|
||||
'exp': Math.floor( tomorrow / 1000 )
|
||||
}, privateKey, {
|
||||
'algorithm': 'ES256',
|
||||
'keyid': musicApiConfig.keyID
|
||||
} );
|
||||
|
||||
response.send( jwtToken );
|
||||
} );
|
||||
|
||||
app.use( ( _request: express.Request, response: express.Response ) => {
|
||||
response.sendFile( path.join( __dirname, '' ) );
|
||||
} );
|
||||
|
||||
|
||||
const PORT = process.env.PORT || 8080;
|
||||
|
||||
app.listen( PORT );
|
||||
|
||||
@@ -25,6 +25,7 @@
|
||||
"eslint-plugin-vue": "^10.10.0",
|
||||
"globals": "^17.11.0",
|
||||
"npm-run-all2": "^9.0.2",
|
||||
"sass-embedded": "^1.103.1",
|
||||
"typescript": "~6.0.0",
|
||||
"typescript-eslint": "^8.67.0",
|
||||
"vite": "^8.1.5",
|
||||
|
||||
@@ -1,5 +1,23 @@
|
||||
export const useMusicKit = () => {
|
||||
const init = () => {
|
||||
export const useMusicKit = ( storefront: string = 'ch' ) => {
|
||||
const init = async () => {
|
||||
const res = await fetch( import.meta.env.VITE_BACKEND_URL + '/', {
|
||||
'credentials': 'include'
|
||||
} );
|
||||
|
||||
if ( res.status === 200 ) {
|
||||
const token = await res.text();
|
||||
|
||||
window.MusicKit.configure( {
|
||||
'developerToken': token,
|
||||
'app': {
|
||||
'name': 'MusicPlayer',
|
||||
'build': '4',
|
||||
'icon': 'https://music.janishutz.com/logo.jpg'
|
||||
},
|
||||
'storefront': storefront.toUpperCase()
|
||||
} );
|
||||
}
|
||||
|
||||
isInit = true;
|
||||
};
|
||||
|
||||
|
||||
@@ -2,22 +2,24 @@
|
||||
<div class="not-found-view">
|
||||
<h1>404</h1>
|
||||
<p>Page not found</p>
|
||||
<RouterLink to="/" class="button primary">
|
||||
<RouterLink to="/" class="fancy-button">
|
||||
Home
|
||||
</RouterLink>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
<style scoped lang="scss">
|
||||
.not-found-view {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
|
||||
h1 {
|
||||
font-size: 20vh;
|
||||
line-height: 100%;
|
||||
margin: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user