Merge branch 'master' of git.flexites.org:Students/ITRadio
This commit is contained in:
Mike0001-droid
commit
5a38e5da80
|
|
@ -0,0 +1 @@
|
||||||
|
ITRadio/ITRadioBackend/db.sqlite3
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
VUE_APP_API_URL=http://127.0.0.1:8000
|
||||||
|
|
@ -0,0 +1,25 @@
|
||||||
|
/* eslint-env node */
|
||||||
|
require('@rushstack/eslint-patch/modern-module-resolution')
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
root: true,
|
||||||
|
'extends': [
|
||||||
|
'plugin:vue/vue3-essential',
|
||||||
|
'eslint:recommended',
|
||||||
|
'@vue/eslint-config-prettier/skip-formatting'
|
||||||
|
],
|
||||||
|
overrides: [
|
||||||
|
{
|
||||||
|
files: [
|
||||||
|
'cypress/e2e/**/*.{cy,spec}.{js,ts,jsx,tsx}',
|
||||||
|
'cypress/support/**/*.{js,ts,jsx,tsx}'
|
||||||
|
],
|
||||||
|
'extends': [
|
||||||
|
'plugin:cypress/recommended'
|
||||||
|
]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
parserOptions: {
|
||||||
|
ecmaVersion: 'latest'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,30 @@
|
||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
|
node_modules
|
||||||
|
.DS_Store
|
||||||
|
dist
|
||||||
|
dist-ssr
|
||||||
|
coverage
|
||||||
|
*.local
|
||||||
|
|
||||||
|
/cypress/videos/
|
||||||
|
/cypress/screenshots/
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/extensions.json
|
||||||
|
.idea
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
|
|
||||||
|
*.tsbuildinfo
|
||||||
|
|
@ -0,0 +1,8 @@
|
||||||
|
{
|
||||||
|
"$schema": "https://json.schemastore.org/prettierrc",
|
||||||
|
"semi": false,
|
||||||
|
"tabWidth": 2,
|
||||||
|
"singleQuote": true,
|
||||||
|
"printWidth": 100,
|
||||||
|
"trailingComma": "none"
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
{
|
||||||
|
"recommendations": [
|
||||||
|
"Vue.volar",
|
||||||
|
"dbaeumer.vscode-eslint",
|
||||||
|
"esbenp.prettier-vscode"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,57 @@
|
||||||
|
# ITRadioFrontend
|
||||||
|
|
||||||
|
This template should help get you started developing with Vue 3 in Vite.
|
||||||
|
|
||||||
|
## Recommended IDE Setup
|
||||||
|
|
||||||
|
[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
|
||||||
|
|
||||||
|
## Customize configuration
|
||||||
|
|
||||||
|
See [Vite Configuration Reference](https://vitejs.dev/config/).
|
||||||
|
|
||||||
|
## Project Setup
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm install
|
||||||
|
```
|
||||||
|
|
||||||
|
### Compile and Hot-Reload for Development
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm run dev
|
||||||
|
```
|
||||||
|
|
||||||
|
### Compile and Minify for Production
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm run build
|
||||||
|
```
|
||||||
|
|
||||||
|
### Run Unit Tests with [Vitest](https://vitest.dev/)
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm run test:unit
|
||||||
|
```
|
||||||
|
|
||||||
|
### Run End-to-End Tests with [Cypress](https://www.cypress.io/)
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm run test:e2e:dev
|
||||||
|
```
|
||||||
|
|
||||||
|
This runs the end-to-end tests against the Vite development server.
|
||||||
|
It is much faster than the production build.
|
||||||
|
|
||||||
|
But it's still recommended to test the production build with `test:e2e` before deploying (e.g. in CI environments):
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm run build
|
||||||
|
npm run test:e2e
|
||||||
|
```
|
||||||
|
|
||||||
|
### Lint with [ESLint](https://eslint.org/)
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm run lint
|
||||||
|
```
|
||||||
|
|
@ -0,0 +1,8 @@
|
||||||
|
import { defineConfig } from 'cypress'
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
e2e: {
|
||||||
|
specPattern: 'cypress/e2e/**/*.{cy,spec}.{js,jsx,ts,tsx}',
|
||||||
|
baseUrl: 'http://localhost:4173'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
@ -0,0 +1,8 @@
|
||||||
|
// https://on.cypress.io/api
|
||||||
|
|
||||||
|
describe('My First Test', () => {
|
||||||
|
it('visits the app root url', () => {
|
||||||
|
cy.visit('/')
|
||||||
|
cy.contains('h1', 'You did it!')
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
@ -0,0 +1,8 @@
|
||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "es5",
|
||||||
|
"lib": ["es5", "dom"],
|
||||||
|
"types": ["cypress"]
|
||||||
|
},
|
||||||
|
"include": ["./**/*", "../support/**/*"]
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
{
|
||||||
|
"name": "Using fixtures to represent data",
|
||||||
|
"email": "hello@cypress.io",
|
||||||
|
"body": "Fixtures are a great way to mock data for responses to routes"
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,25 @@
|
||||||
|
// ***********************************************
|
||||||
|
// This example commands.js shows you how to
|
||||||
|
// create various custom commands and overwrite
|
||||||
|
// existing commands.
|
||||||
|
//
|
||||||
|
// For more comprehensive examples of custom
|
||||||
|
// commands please read more here:
|
||||||
|
// https://on.cypress.io/custom-commands
|
||||||
|
// ***********************************************
|
||||||
|
//
|
||||||
|
//
|
||||||
|
// -- This is a parent command --
|
||||||
|
// Cypress.Commands.add('login', (email, password) => { ... })
|
||||||
|
//
|
||||||
|
//
|
||||||
|
// -- This is a child command --
|
||||||
|
// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
|
||||||
|
//
|
||||||
|
//
|
||||||
|
// -- This is a dual command --
|
||||||
|
// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
|
||||||
|
//
|
||||||
|
//
|
||||||
|
// -- This will overwrite an existing command --
|
||||||
|
// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
|
||||||
|
|
@ -0,0 +1,20 @@
|
||||||
|
// ***********************************************************
|
||||||
|
// This example support/index.js is processed and
|
||||||
|
// loaded automatically before your test files.
|
||||||
|
//
|
||||||
|
// This is a great place to put global configuration and
|
||||||
|
// behavior that modifies Cypress.
|
||||||
|
//
|
||||||
|
// You can change the location of this file or turn off
|
||||||
|
// automatically serving support files with the
|
||||||
|
// 'supportFile' configuration option.
|
||||||
|
//
|
||||||
|
// You can read more here:
|
||||||
|
// https://on.cypress.io/configuration
|
||||||
|
// ***********************************************************
|
||||||
|
|
||||||
|
// Import commands.js using ES2015 syntax:
|
||||||
|
import './commands'
|
||||||
|
|
||||||
|
// Alternatively you can use CommonJS syntax:
|
||||||
|
// require('./commands')
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<link rel="icon" href="/favicon.ico">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Vite App</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
<script type="module" src="/src/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,8 @@
|
||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"paths": {
|
||||||
|
"@/*": ["./src/*"]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"exclude": ["node_modules", "dist"]
|
||||||
|
}
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,41 @@
|
||||||
|
{
|
||||||
|
"name": "itradiofrontend",
|
||||||
|
"version": "0.0.0",
|
||||||
|
"private": true,
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "vite build",
|
||||||
|
"preview": "vite preview",
|
||||||
|
"test:unit": "vitest",
|
||||||
|
"test:e2e": "start-server-and-test preview http://localhost:4173 'cypress run --e2e'",
|
||||||
|
"test:e2e:dev": "start-server-and-test 'vite dev --port 4173' http://localhost:4173 'cypress open --e2e'",
|
||||||
|
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",
|
||||||
|
"format": "prettier --write src/"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@vuelidate/core": "^2.0.3",
|
||||||
|
"@vuelidate/validators": "^2.0.4",
|
||||||
|
"howler": "^2.2.4",
|
||||||
|
"pinia": "^2.1.7",
|
||||||
|
"vue": "^3.4.21",
|
||||||
|
"vue-router": "^4.3.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@rushstack/eslint-patch": "^1.8.0",
|
||||||
|
"@vitejs/plugin-vue": "^5.0.4",
|
||||||
|
"@vitejs/plugin-vue-jsx": "^3.1.0",
|
||||||
|
"@vue/eslint-config-prettier": "^9.0.0",
|
||||||
|
"@vue/test-utils": "^2.4.5",
|
||||||
|
"cypress": "^13.7.2",
|
||||||
|
"eslint": "^8.57.0",
|
||||||
|
"eslint-plugin-cypress": "^2.15.1",
|
||||||
|
"eslint-plugin-vue": "^9.23.0",
|
||||||
|
"jsdom": "^24.0.0",
|
||||||
|
"prettier": "^3.2.5",
|
||||||
|
"start-server-and-test": "^2.0.3",
|
||||||
|
"vite": "^5.2.8",
|
||||||
|
"vite-plugin-vue-devtools": "^7.0.25",
|
||||||
|
"vitest": "^1.4.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
|
|
@ -0,0 +1,88 @@
|
||||||
|
<script setup>
|
||||||
|
import { RouterLink, RouterView } from 'vue-router'
|
||||||
|
import HelloWorld from './components/HelloWorld.vue'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<header>
|
||||||
|
<img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />
|
||||||
|
|
||||||
|
<div class="wrapper">
|
||||||
|
<HelloWorld msg="ITRadio" />
|
||||||
|
|
||||||
|
<nav>
|
||||||
|
<RouterLink to="/">Home</RouterLink>
|
||||||
|
<RouterLink to="/about">About</RouterLink>
|
||||||
|
<RouterLink to="/test">Player</RouterLink>
|
||||||
|
<RouterLink to="/login">Login</RouterLink>
|
||||||
|
<RouterLink to="/liked-songs">Liked Songs</RouterLink>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<RouterView />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
header {
|
||||||
|
line-height: 1.5;
|
||||||
|
max-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
display: block;
|
||||||
|
margin: 0 auto 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav {
|
||||||
|
width: 100%;
|
||||||
|
font-size: 12px;
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav a.router-link-exact-active {
|
||||||
|
color: var(--color-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
nav a.router-link-exact-active:hover {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav a {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 0 1rem;
|
||||||
|
border-left: 1px solid var(--color-border);
|
||||||
|
}
|
||||||
|
|
||||||
|
nav a:first-of-type {
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1024px) {
|
||||||
|
header {
|
||||||
|
display: flex;
|
||||||
|
place-items: center;
|
||||||
|
padding-right: calc(var(--section-gap) / 2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
margin: 0 2rem 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
header .wrapper {
|
||||||
|
display: flex;
|
||||||
|
place-items: flex-start;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav {
|
||||||
|
text-align: left;
|
||||||
|
margin-left: -1rem;
|
||||||
|
font-size: 1rem;
|
||||||
|
|
||||||
|
padding: 1rem 0;
|
||||||
|
margin-top: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,86 @@
|
||||||
|
/* color palette from <https://github.com/vuejs/theme> */
|
||||||
|
:root {
|
||||||
|
--vt-c-white: #ffffff;
|
||||||
|
--vt-c-white-soft: #f8f8f8;
|
||||||
|
--vt-c-white-mute: #f2f2f2;
|
||||||
|
|
||||||
|
--vt-c-black: #181818;
|
||||||
|
--vt-c-black-soft: #222222;
|
||||||
|
--vt-c-black-mute: #282828;
|
||||||
|
|
||||||
|
--vt-c-indigo: #2c3e50;
|
||||||
|
|
||||||
|
--vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
|
||||||
|
--vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
|
||||||
|
--vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
|
||||||
|
--vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
|
||||||
|
|
||||||
|
--vt-c-text-light-1: var(--vt-c-indigo);
|
||||||
|
--vt-c-text-light-2: rgba(60, 60, 60, 0.66);
|
||||||
|
--vt-c-text-dark-1: var(--vt-c-white);
|
||||||
|
--vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* semantic color variables for this project */
|
||||||
|
:root {
|
||||||
|
--color-background: var(--vt-c-white);
|
||||||
|
--color-background-soft: var(--vt-c-white-soft);
|
||||||
|
--color-background-mute: var(--vt-c-white-mute);
|
||||||
|
|
||||||
|
--color-border: var(--vt-c-divider-light-2);
|
||||||
|
--color-border-hover: var(--vt-c-divider-light-1);
|
||||||
|
|
||||||
|
--color-heading: var(--vt-c-text-light-1);
|
||||||
|
--color-text: var(--vt-c-text-light-1);
|
||||||
|
|
||||||
|
--section-gap: 160px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
:root {
|
||||||
|
--color-background: var(--vt-c-black);
|
||||||
|
--color-background-soft: var(--vt-c-black-soft);
|
||||||
|
--color-background-mute: var(--vt-c-black-mute);
|
||||||
|
|
||||||
|
--color-border: var(--vt-c-divider-dark-2);
|
||||||
|
--color-border-hover: var(--vt-c-divider-dark-1);
|
||||||
|
|
||||||
|
--color-heading: var(--vt-c-text-dark-1);
|
||||||
|
--color-text: var(--vt-c-text-dark-2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
*,
|
||||||
|
*::before,
|
||||||
|
*::after {
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: 0;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
min-height: 100vh;
|
||||||
|
color: var(--color-text);
|
||||||
|
background: var(--color-background);
|
||||||
|
transition:
|
||||||
|
color 0.5s,
|
||||||
|
background-color 0.5s;
|
||||||
|
line-height: 1.6;
|
||||||
|
font-family:
|
||||||
|
Inter,
|
||||||
|
-apple-system,
|
||||||
|
BlinkMacSystemFont,
|
||||||
|
'Segoe UI',
|
||||||
|
Roboto,
|
||||||
|
Oxygen,
|
||||||
|
Ubuntu,
|
||||||
|
Cantarell,
|
||||||
|
'Fira Sans',
|
||||||
|
'Droid Sans',
|
||||||
|
'Helvetica Neue',
|
||||||
|
sans-serif;
|
||||||
|
font-size: 15px;
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
|
||||||
|
After Width: | Height: | Size: 276 B |
|
|
@ -0,0 +1,35 @@
|
||||||
|
@import './base.css';
|
||||||
|
|
||||||
|
#app {
|
||||||
|
max-width: 1280px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 2rem;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
a,
|
||||||
|
.green {
|
||||||
|
text-decoration: none;
|
||||||
|
color: hsla(160, 100%, 37%, 1);
|
||||||
|
transition: 0.4s;
|
||||||
|
padding: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (hover: hover) {
|
||||||
|
a:hover {
|
||||||
|
background-color: hsla(160, 100%, 37%, 0.2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1024px) {
|
||||||
|
body {
|
||||||
|
display: flex;
|
||||||
|
place-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#app {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
padding: 0 2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,54 @@
|
||||||
|
<script setup>
|
||||||
|
import { useUserStore } from "../stores/userCred";
|
||||||
|
|
||||||
|
import PlayerComponent from "@/components/PlayerComponent.vue";
|
||||||
|
|
||||||
|
const userStore = useUserStore();
|
||||||
|
const userName = localStorage.getItem('user');
|
||||||
|
defineProps({
|
||||||
|
msg: {
|
||||||
|
type: String,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="greetings">
|
||||||
|
<h1 class="green">{{ msg }}</h1>
|
||||||
|
<h3>
|
||||||
|
Фронт ITR.
|
||||||
|
</h3>
|
||||||
|
<p v-if="userStore.isLoggedIn()">
|
||||||
|
Logged in: {{ userName }}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<PlayerComponent />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
h1 {
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 2.6rem;
|
||||||
|
position: relative;
|
||||||
|
top: -10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.greetings h1,
|
||||||
|
.greetings h3 {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1024px) {
|
||||||
|
.greetings h1,
|
||||||
|
.greetings h3 {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,211 @@
|
||||||
|
<template>
|
||||||
|
<div
|
||||||
|
v-for="song in playerStore.likedSongsList"
|
||||||
|
:key="song.id"
|
||||||
|
class="player-container"
|
||||||
|
@click="setSongDetails(song)"
|
||||||
|
:class="{ 'selected-song': state.currentSong && song.id === state.currentSong.id }"
|
||||||
|
>
|
||||||
|
<div v-if="song" class="player-container">
|
||||||
|
<img :src="song.art" alt="Album Art" />
|
||||||
|
<div class="info-container">
|
||||||
|
<h2>{{ song.title }}</h2>
|
||||||
|
<h3>{{ song.artist }}</h3>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
v-if="state.isTokenValid"
|
||||||
|
:class="['float-right-button', 'liked']"
|
||||||
|
@click.stop="LikeSongWrapper(song)"
|
||||||
|
>
|
||||||
|
Like
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import axios from "axios";
|
||||||
|
import { reactive, onMounted } from "vue";
|
||||||
|
import { usePlayerStore } from "../stores/playerStore";
|
||||||
|
import { LikeSong } from "../util/likeSong";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "LikedSongs",
|
||||||
|
setup() {
|
||||||
|
const playerStore = usePlayerStore();
|
||||||
|
const state = reactive({
|
||||||
|
likedSongs: [],
|
||||||
|
isTokenValid: true, // This should be dynamically checked
|
||||||
|
volume: 0.5,
|
||||||
|
currentSong: null,
|
||||||
|
});
|
||||||
|
|
||||||
|
const fetchLikedSongs = async () => {
|
||||||
|
try {
|
||||||
|
const token = localStorage.getItem("token");
|
||||||
|
const response = await axios.get("http://127.0.0.1:8000/liked-songs/", {
|
||||||
|
headers: {
|
||||||
|
Authorization: `Bearer ${token}`,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
state.likedSongs = response.data.map((song) => ({
|
||||||
|
...song,
|
||||||
|
isLiked: true, // Initialize or set based on response
|
||||||
|
}));
|
||||||
|
playerStore.likedSongsList = state.likedSongs;
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error fetching liked songs:", error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
playerStore
|
||||||
|
.getLikedSongs()
|
||||||
|
.then((likedSongsList) => {
|
||||||
|
playerStore.likedSongsList = likedSongsList;
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
console.error("Failed to get liked songs:", error);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
function LikeSongWrapper(song) {
|
||||||
|
LikeSong(song, true);
|
||||||
|
}
|
||||||
|
function setSongDetails(song) {
|
||||||
|
playerStore.changeSong(song);
|
||||||
|
state.currentSong = song;
|
||||||
|
}
|
||||||
|
|
||||||
|
const play = (song) => {
|
||||||
|
// Implement play functionality
|
||||||
|
console.log("Play:", song);
|
||||||
|
};
|
||||||
|
|
||||||
|
const pause = (song) => {
|
||||||
|
// Implement pause functionality
|
||||||
|
console.log("Pause:", song);
|
||||||
|
};
|
||||||
|
return {
|
||||||
|
state,
|
||||||
|
playerStore,
|
||||||
|
LikeSongWrapper,
|
||||||
|
setSongDetails,
|
||||||
|
play,
|
||||||
|
pause,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.player-container {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.player-container img {
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
margin-right: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.player-container h2 {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.player-container h3 {
|
||||||
|
margin: 0;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
margin: 10px;
|
||||||
|
padding: 10px 20px;
|
||||||
|
font-size: 16px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 5px;
|
||||||
|
color: white;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.play {
|
||||||
|
background-color: #4caf50;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pause {
|
||||||
|
background-color: #ff9800;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="range"] {
|
||||||
|
width: 100%;
|
||||||
|
margin: 10px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
button,
|
||||||
|
input[type="range"] {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
.info-container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
input[type="range"] {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
width: 100%;
|
||||||
|
height: 8px;
|
||||||
|
border-radius: 4px;
|
||||||
|
background: #d3d3d3;
|
||||||
|
outline: none;
|
||||||
|
opacity: 0.7;
|
||||||
|
transition: opacity 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="range"]:hover {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="range"]::-webkit-slider-thumb {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
appearance: none;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: #4caf50;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="range"]::-moz-range-thumb {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: #4caf50;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.float-right-button {
|
||||||
|
margin-left: auto;
|
||||||
|
background-color: #007bff; /* Blue background */
|
||||||
|
color: white;
|
||||||
|
padding: 10px 20px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 5px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background-color 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.float-right-button:hover {
|
||||||
|
background-color: #0056b3; /* Darker blue on hover */
|
||||||
|
}
|
||||||
|
.liked {
|
||||||
|
background-color: #d11e69; /* Green background for liked state */
|
||||||
|
}
|
||||||
|
|
||||||
|
.liked:hover {
|
||||||
|
background-color: #8f1344; /* Slightly darker shade of the original liked background color */
|
||||||
|
}
|
||||||
|
.selected-song {
|
||||||
|
border: 2px solid #007bff; /* Blue border */
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,132 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div class="login-container">
|
||||||
|
<input v-model="username" placeholder="Username" class="login-input" />
|
||||||
|
<input v-model="email" placeholder="Email" class="login-input" /> <!-- New email input -->
|
||||||
|
<input type="password" v-model="password" placeholder="Password" class="login-input" />
|
||||||
|
<button @click="handleAuth('token/')" class="login-button">Login</button>
|
||||||
|
<button @click="handleAuth('register/')" class="register-button">Register</button> <!-- New register button -->
|
||||||
|
<button @click="logout" class="logout-button">Logout</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { ref } from "vue";
|
||||||
|
import axios from "axios";
|
||||||
|
import { useUserStore } from "../stores/userCred";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
setup() {
|
||||||
|
const username = ref("");
|
||||||
|
const email = ref("");
|
||||||
|
const password = ref("");
|
||||||
|
const userStore = useUserStore(); // Create an instance of the user store
|
||||||
|
const logout = () => {
|
||||||
|
userStore.clearUser();
|
||||||
|
showMessage("You have been logged out.");
|
||||||
|
// Optionally redirect or change UI state here
|
||||||
|
};
|
||||||
|
const handleAuth = async (endpoint) => {
|
||||||
|
if (username.value === "" || password.value === "") {
|
||||||
|
showMessage("Please enter a username and password.");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const api = axios.create({
|
||||||
|
baseURL: "http://127.0.0.1:8000/api/",
|
||||||
|
});
|
||||||
|
|
||||||
|
const payload = {
|
||||||
|
username: username.value,
|
||||||
|
email: email.value,
|
||||||
|
password: password.value,
|
||||||
|
};
|
||||||
|
|
||||||
|
if (endpoint === "register") {
|
||||||
|
payload.email = email.value; // Assuming you have an email field for registration
|
||||||
|
}
|
||||||
|
|
||||||
|
api.post(endpoint, payload)
|
||||||
|
.then((response) => {
|
||||||
|
userStore.setUser(username.value, response.data.access, response.data.refresh);
|
||||||
|
showMessage(endpoint === "register" ? "Registration successful." : "Login successful.");
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
centralizedErrorHandler(error);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const centralizedErrorHandler = (error) => {
|
||||||
|
console.error("Error:", error);
|
||||||
|
showMessage("An error occurred. Please try again.");
|
||||||
|
};
|
||||||
|
|
||||||
|
const showMessage = (message) => {
|
||||||
|
console.log(message);
|
||||||
|
};
|
||||||
|
|
||||||
|
return {
|
||||||
|
username,
|
||||||
|
password,
|
||||||
|
email,
|
||||||
|
handleAuth,
|
||||||
|
logout,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.login-container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-input {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
padding: 8px;
|
||||||
|
width: 200px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-button {
|
||||||
|
padding: 10px 20px;
|
||||||
|
background-color: #007bff;
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
border-radius: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-button:hover {
|
||||||
|
background-color: #0056b3;
|
||||||
|
}
|
||||||
|
.logout-button {
|
||||||
|
padding: 10px 20px;
|
||||||
|
background-color: #f44336; /* Red color for distinction */
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
border-radius: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logout-button:hover {
|
||||||
|
background-color: #d32f2f;
|
||||||
|
}
|
||||||
|
.register-button {
|
||||||
|
padding: 10px 20px;
|
||||||
|
background-color: #4CAF50; /* Green color for distinction */
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
border-radius: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.register-button:hover {
|
||||||
|
background-color: #45a049;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,198 @@
|
||||||
|
<template>
|
||||||
|
<div class="bottom-player" :style="{ bottom: playerBottom }">
|
||||||
|
<div class="toggle-arrow" @click="togglePlayer">{{ arrowDirection }}</div>
|
||||||
|
<div class="player-wrapper">
|
||||||
|
<div class="player-container-fixed">
|
||||||
|
<div v-if="playerStore.nowPlayingSong" class="player-container-fixed">
|
||||||
|
<img :src="playerStore.art" alt="Album Art" />
|
||||||
|
<div class="info-container">
|
||||||
|
<h2>{{ playerStore.title }}</h2>
|
||||||
|
<h3>{{ playerStore.author }}</h3>
|
||||||
|
</div>
|
||||||
|
<button class="radio-control-button" @click="playerStore.togglePlay()">
|
||||||
|
{{ playerStore.isPlaying ? "Pause" : "Play" }}
|
||||||
|
</button>
|
||||||
|
<button class="radio-control-button" @click="playerStore.toggleMode()">
|
||||||
|
{{ this.playerStore.isRadioMode ? "To Music" : "To Radio" }}
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
v-if="state.isTokenValid"
|
||||||
|
:class="{ 'float-right-button': true, liked: this.playerStore.isSongLiked }"
|
||||||
|
@click="LikeSongWrapper(playerStore.nowPlayingSong)"
|
||||||
|
>
|
||||||
|
Like
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { onMounted, onUnmounted, reactive, watch } from "vue";
|
||||||
|
import { usePlayerStore } from "../stores/playerStore";
|
||||||
|
import { useUserStore } from "../stores/userCred";
|
||||||
|
import { LikeSong } from "../util/likeSong";
|
||||||
|
import { Howl } from "howler";
|
||||||
|
import axios from "axios";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "BottomPlayer",
|
||||||
|
setup() {
|
||||||
|
const playerStore = usePlayerStore();
|
||||||
|
const userStore = useUserStore();
|
||||||
|
userStore.verifyToken();
|
||||||
|
const state = reactive({
|
||||||
|
isTokenValid: false,
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
return {
|
||||||
|
playerStore,
|
||||||
|
userStore,
|
||||||
|
state,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
playerBottom: "0px", // Start visible
|
||||||
|
arrowDirection: "▼",
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.userStore
|
||||||
|
.verifyToken()
|
||||||
|
.then((isValid) => {
|
||||||
|
this.state.isTokenValid = isValid;
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
console.error("Failed to verify token:", error);
|
||||||
|
});
|
||||||
|
|
||||||
|
this.playerStore
|
||||||
|
.getLikedSongs()
|
||||||
|
.then((likedSongsList) => {
|
||||||
|
this.playerStore.likedSongsList = likedSongsList;
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
console.error("Failed to get liked songs:", error);
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
this.playerStore.getNowPlaying();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
togglePlayer() {
|
||||||
|
if (this.playerBottom === "0px") {
|
||||||
|
this.playerBottom = "-70px";
|
||||||
|
this.arrowDirection = "▲"; // Arrow points up when player is hidden
|
||||||
|
} else {
|
||||||
|
this.playerBottom = "0px";
|
||||||
|
this.arrowDirection = "▼"; // Arrow points down when player is visible
|
||||||
|
}
|
||||||
|
},
|
||||||
|
LikeSongWrapper(song) {
|
||||||
|
LikeSong(song, this.playerStore.isSongLiked);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.bottom-player {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
background-color: #333;
|
||||||
|
color: white;
|
||||||
|
text-align: center;
|
||||||
|
padding: 10px 0;
|
||||||
|
transition: bottom 0.5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.player-wrapper {
|
||||||
|
height: 50px;
|
||||||
|
display: flex; /* Use flexbox to align child elements */
|
||||||
|
align-items: center; /* Center items vertically */
|
||||||
|
justify-content: center; /* Center items horizontally */
|
||||||
|
}
|
||||||
|
|
||||||
|
.player-container-fixed {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between; /* Distribute space between elements */
|
||||||
|
width: 90%; /* Adjust width as needed */
|
||||||
|
padding: 5px; /* Add padding for spacing */
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-container {
|
||||||
|
flex-grow: 1; /* Allow the info container to take up remaining space */
|
||||||
|
padding: 0 10px; /* Add padding on the sides */
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 50px; /* Adjust image size */
|
||||||
|
height: 50px; /* Adjust image height */
|
||||||
|
margin-right: 10px; /* Space between image and info */
|
||||||
|
}
|
||||||
|
.toggle-arrow {
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 20px;
|
||||||
|
color: #fff;
|
||||||
|
position: absolute;
|
||||||
|
top: -35px;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
transition: transform 0.5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.controls button {
|
||||||
|
padding: 10px 20px;
|
||||||
|
margin: 0 5px;
|
||||||
|
background-color: #4caf50;
|
||||||
|
border: none;
|
||||||
|
border-radius: 5px;
|
||||||
|
color: white;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.controls button:hover {
|
||||||
|
background-color: #45a049;
|
||||||
|
}
|
||||||
|
.radio-control-button {
|
||||||
|
padding: 10px 20px;
|
||||||
|
margin: 0 5px;
|
||||||
|
background-color: #4caf50;
|
||||||
|
border: none;
|
||||||
|
border-radius: 5px;
|
||||||
|
color: white;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background-color 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.radio-control-button:hover {
|
||||||
|
background-color: #45a049;
|
||||||
|
}
|
||||||
|
.float-right-button {
|
||||||
|
margin-left: auto;
|
||||||
|
background-color: #007bff; /* Blue background */
|
||||||
|
color: white;
|
||||||
|
padding: 10px 20px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 5px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background-color 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.float-right-button:hover {
|
||||||
|
background-color: #0056b3; /* Darker blue on hover */
|
||||||
|
}
|
||||||
|
.liked {
|
||||||
|
background-color: #d11e69; /* Green background for liked state */
|
||||||
|
}
|
||||||
|
|
||||||
|
.liked:hover {
|
||||||
|
background-color: #8f1344; /* Slightly darker shade of the original liked background color */
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,333 @@
|
||||||
|
<template>
|
||||||
|
<div class="player-container">
|
||||||
|
<div v-if="nowPlaying.song" class="player-container">
|
||||||
|
<img :src="nowPlaying.song.art" alt="Album Art" />
|
||||||
|
<div class="info-container">
|
||||||
|
<h2>{{ nowPlaying.song.title }}</h2>
|
||||||
|
<h3>{{ nowPlaying.song.artist }}</h3>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
v-if="state.isTokenValid"
|
||||||
|
:class="{ 'float-right-button': true, liked: state.isLiked }"
|
||||||
|
@click="songLiked"
|
||||||
|
>
|
||||||
|
Like
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="player-container">
|
||||||
|
<button class="play" @click="play">Play</button>
|
||||||
|
<button class="pause" @click="pause">Pause</button>
|
||||||
|
<input type="range" v-model="state.volume" min="0" max="1" step="0.01" />
|
||||||
|
</div>
|
||||||
|
<div class="player-container">
|
||||||
|
<button class="play" @click="play2">Play</button>
|
||||||
|
<button class="pause" @click="pause2">Pause</button>
|
||||||
|
<input type="range" v-model="state.slider" min="0" step="1" @input="changePosition" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { onMounted, onUnmounted, reactive, watch } from "vue";
|
||||||
|
import axios from "axios";
|
||||||
|
import { Howl } from "howler";
|
||||||
|
import { useUserStore } from "../stores/userCred";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "TestComponent",
|
||||||
|
setup() {
|
||||||
|
const state = reactive({
|
||||||
|
volume: 0.5,
|
||||||
|
slider: 0,
|
||||||
|
isTokenValid: false,
|
||||||
|
isLiked: false,
|
||||||
|
likedSongs: {},
|
||||||
|
});
|
||||||
|
|
||||||
|
const store = useUserStore();
|
||||||
|
const nowPlaying = reactive({ song: null });
|
||||||
|
|
||||||
|
const verifyUserToken = async () => {
|
||||||
|
if (store.verifyToken()) {
|
||||||
|
state.isTokenValid = true;
|
||||||
|
const fetchLikedSongs = async () => {
|
||||||
|
try {
|
||||||
|
const token = localStorage.getItem("token");
|
||||||
|
const response = await axios.get("http://127.0.0.1:8000/liked-songs/", {
|
||||||
|
headers: {
|
||||||
|
Authorization: `Bearer ${token}`,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
state.likedSongs = response.data;
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error fetching liked songs:", error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
await fetchLikedSongs();
|
||||||
|
isLiked();
|
||||||
|
} else {
|
||||||
|
state.isTokenValid = false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const songLiked = async () => {
|
||||||
|
const token = localStorage.getItem("token");
|
||||||
|
const axiosInstance = axios.create({
|
||||||
|
baseURL: "http://127.0.0.1:8000/",
|
||||||
|
headers: {
|
||||||
|
Authorization: `Bearer ${token}`,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
if (state.isLiked) {
|
||||||
|
// If the song is already liked, send a request to delete it
|
||||||
|
axiosInstance
|
||||||
|
.post("delete-song/", {
|
||||||
|
id: nowPlaying.song.id,
|
||||||
|
})
|
||||||
|
.then((response) => {
|
||||||
|
state.isLiked = false;
|
||||||
|
delete state.likedSongs[nowPlaying.song.id];
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
console.error("Error:", error);
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
axiosInstance
|
||||||
|
.post("add-song/", {
|
||||||
|
new_song: nowPlaying.song,
|
||||||
|
})
|
||||||
|
.then((response) => {
|
||||||
|
state.isLiked = true;
|
||||||
|
state.likedSongs[nowPlaying.song.id] = nowPlaying.song;
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
console.error("Error:", error);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
function isLiked() {
|
||||||
|
// Check if the song is in the likedSongs list
|
||||||
|
state.isLiked = Object.values(state.likedSongs).some(
|
||||||
|
(song) => song.id === nowPlaying.song.id
|
||||||
|
);
|
||||||
|
}
|
||||||
|
//Howler
|
||||||
|
const sound = new Howl({
|
||||||
|
src: ["http://localhost:8000/radio.mp3"],
|
||||||
|
html5: true,
|
||||||
|
});
|
||||||
|
|
||||||
|
const sound2 = new Howl({
|
||||||
|
src: ["http://localhost/api/station/1/file/8e68726a6b45fddd6397eae0/play"],
|
||||||
|
format: ["mp3"],
|
||||||
|
onload: function () {
|
||||||
|
state.slider = sound2.duration();
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const fetchNowPlaying = async () => {
|
||||||
|
try {
|
||||||
|
const response = await axios.get("http://localhost/api/nowplaying/1");
|
||||||
|
nowPlaying.song = response.data.now_playing.song;
|
||||||
|
isLiked();
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Failed to fetch now playing data:", error);
|
||||||
|
nowPlaying.song = null;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const play = () => {
|
||||||
|
sound.play();
|
||||||
|
};
|
||||||
|
|
||||||
|
const pause = () => {
|
||||||
|
sound.pause();
|
||||||
|
};
|
||||||
|
|
||||||
|
const play2 = () => {
|
||||||
|
sound2.play();
|
||||||
|
};
|
||||||
|
|
||||||
|
const pause2 = () => {
|
||||||
|
sound2.pause();
|
||||||
|
};
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => state.volume,
|
||||||
|
(newVolume) => {
|
||||||
|
sound.volume(newVolume);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
let animationId;
|
||||||
|
|
||||||
|
const updateSlider = () => {
|
||||||
|
state.slider = sound2.seek() || 0;
|
||||||
|
animationId = requestAnimationFrame(updateSlider);
|
||||||
|
};
|
||||||
|
|
||||||
|
const sseBaseUri = "https://localhost/api/live/station/1/nowplaying/sse";
|
||||||
|
const sseUriParams = new URLSearchParams({
|
||||||
|
cf_connect: JSON.stringify({
|
||||||
|
subs: {
|
||||||
|
"station:itr": {},
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
const sseUri = sseBaseUri + "?" + sseUriParams.toString();
|
||||||
|
const sse = new EventSource(sseUri);
|
||||||
|
|
||||||
|
// This is a now-playing event from a station. Update your now-playing data accordingly.
|
||||||
|
function handleData(payload) {
|
||||||
|
const jsonData = payload?.pub?.data ?? {};
|
||||||
|
currentTime = jsonData.current_time;
|
||||||
|
nowplaying = jsonData.np;
|
||||||
|
}
|
||||||
|
|
||||||
|
sse.onmessage = (e) => {
|
||||||
|
const jsonData = JSON.parse(e.data);
|
||||||
|
if ("connect" in jsonData) {
|
||||||
|
// Initial data is sent in the "connect" response as an array of rows similar to individual messages.
|
||||||
|
const initialData = jsonData.connect.data ?? [];
|
||||||
|
initialData.forEach((initialRow) => handleData(initialRow));
|
||||||
|
} else if ("channel" in jsonData) {
|
||||||
|
handleData(jsonData);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
fetchNowPlaying();
|
||||||
|
animationId = requestAnimationFrame(updateSlider);
|
||||||
|
|
||||||
|
verifyUserToken();
|
||||||
|
});
|
||||||
|
|
||||||
|
onUnmounted(() => {
|
||||||
|
cancelAnimationFrame(animationId);
|
||||||
|
});
|
||||||
|
|
||||||
|
const changePosition = () => {
|
||||||
|
sound2.seek(state.slider);
|
||||||
|
};
|
||||||
|
|
||||||
|
return {
|
||||||
|
play,
|
||||||
|
pause,
|
||||||
|
state,
|
||||||
|
play2,
|
||||||
|
pause2,
|
||||||
|
changePosition,
|
||||||
|
nowPlaying,
|
||||||
|
songLiked,
|
||||||
|
sse,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.player-container {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.player-container img {
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
margin-right: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.player-container h2 {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.player-container h3 {
|
||||||
|
margin: 0;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
margin: 10px;
|
||||||
|
padding: 10px 20px;
|
||||||
|
font-size: 16px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 5px;
|
||||||
|
color: white;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.play {
|
||||||
|
background-color: #4caf50;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pause {
|
||||||
|
background-color: #ff9800;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="range"] {
|
||||||
|
width: 100%;
|
||||||
|
margin: 10px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
button,
|
||||||
|
input[type="range"] {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
.info-container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
input[type="range"] {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
width: 100%;
|
||||||
|
height: 8px;
|
||||||
|
border-radius: 4px;
|
||||||
|
background: #d3d3d3;
|
||||||
|
outline: none;
|
||||||
|
opacity: 0.7;
|
||||||
|
transition: opacity 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="range"]:hover {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="range"]::-webkit-slider-thumb {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
appearance: none;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: #4caf50;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="range"]::-moz-range-thumb {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: #4caf50;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.float-right-button {
|
||||||
|
margin-left: auto;
|
||||||
|
background-color: #007bff; /* Blue background */
|
||||||
|
color: white;
|
||||||
|
padding: 10px 20px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 5px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background-color 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.float-right-button:hover {
|
||||||
|
background-color: #0056b3; /* Darker blue on hover */
|
||||||
|
}
|
||||||
|
.liked {
|
||||||
|
background-color: #d11e69; /* Green background for liked state */
|
||||||
|
}
|
||||||
|
.liked:hover {
|
||||||
|
background-color: #8f1344; /* Slightly darker shade of the original liked background color */
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,88 @@
|
||||||
|
<script setup>
|
||||||
|
import WelcomeItem from './WelcomeItem.vue'
|
||||||
|
import DocumentationIcon from './icons/IconDocumentation.vue'
|
||||||
|
import ToolingIcon from './icons/IconTooling.vue'
|
||||||
|
import EcosystemIcon from './icons/IconEcosystem.vue'
|
||||||
|
import CommunityIcon from './icons/IconCommunity.vue'
|
||||||
|
import SupportIcon from './icons/IconSupport.vue'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<WelcomeItem>
|
||||||
|
<template #icon>
|
||||||
|
<DocumentationIcon />
|
||||||
|
</template>
|
||||||
|
<template #heading>Documentation</template>
|
||||||
|
|
||||||
|
Vue’s
|
||||||
|
<a href="https://vuejs.org/" target="_blank" rel="noopener">official documentation</a>
|
||||||
|
provides you with all information you need to get started.
|
||||||
|
</WelcomeItem>
|
||||||
|
|
||||||
|
<WelcomeItem>
|
||||||
|
<template #icon>
|
||||||
|
<ToolingIcon />
|
||||||
|
</template>
|
||||||
|
<template #heading>Tooling</template>
|
||||||
|
|
||||||
|
This project is served and bundled with
|
||||||
|
<a href="https://vitejs.dev/guide/features.html" target="_blank" rel="noopener">Vite</a>. The
|
||||||
|
recommended IDE setup is
|
||||||
|
<a href="https://code.visualstudio.com/" target="_blank" rel="noopener">VSCode</a> +
|
||||||
|
<a href="https://github.com/johnsoncodehk/volar" target="_blank" rel="noopener">Volar</a>. If
|
||||||
|
you need to test your components and web pages, check out
|
||||||
|
<a href="https://www.cypress.io/" target="_blank" rel="noopener">Cypress</a> and
|
||||||
|
<a href="https://on.cypress.io/component" target="_blank" rel="noopener"
|
||||||
|
>Cypress Component Testing</a
|
||||||
|
>.
|
||||||
|
|
||||||
|
<br />
|
||||||
|
|
||||||
|
More instructions are available in <code>README.md</code>.
|
||||||
|
</WelcomeItem>
|
||||||
|
|
||||||
|
<WelcomeItem>
|
||||||
|
<template #icon>
|
||||||
|
<EcosystemIcon />
|
||||||
|
</template>
|
||||||
|
<template #heading>Ecosystem</template>
|
||||||
|
|
||||||
|
Get official tools and libraries for your project:
|
||||||
|
<a href="https://pinia.vuejs.org/" target="_blank" rel="noopener">Pinia</a>,
|
||||||
|
<a href="https://router.vuejs.org/" target="_blank" rel="noopener">Vue Router</a>,
|
||||||
|
<a href="https://test-utils.vuejs.org/" target="_blank" rel="noopener">Vue Test Utils</a>, and
|
||||||
|
<a href="https://github.com/vuejs/devtools" target="_blank" rel="noopener">Vue Dev Tools</a>. If
|
||||||
|
you need more resources, we suggest paying
|
||||||
|
<a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">Awesome Vue</a>
|
||||||
|
a visit.
|
||||||
|
</WelcomeItem>
|
||||||
|
|
||||||
|
<WelcomeItem>
|
||||||
|
<template #icon>
|
||||||
|
<CommunityIcon />
|
||||||
|
</template>
|
||||||
|
<template #heading>Community</template>
|
||||||
|
|
||||||
|
Got stuck? Ask your question on
|
||||||
|
<a href="https://chat.vuejs.org" target="_blank" rel="noopener">Vue Land</a>, our official
|
||||||
|
Discord server, or
|
||||||
|
<a href="https://stackoverflow.com/questions/tagged/vue.js" target="_blank" rel="noopener"
|
||||||
|
>StackOverflow</a
|
||||||
|
>. You should also subscribe to
|
||||||
|
<a href="https://news.vuejs.org" target="_blank" rel="noopener">our mailing list</a> and follow
|
||||||
|
the official
|
||||||
|
<a href="https://twitter.com/vuejs" target="_blank" rel="noopener">@vuejs</a>
|
||||||
|
twitter account for latest news in the Vue world.
|
||||||
|
</WelcomeItem>
|
||||||
|
|
||||||
|
<WelcomeItem>
|
||||||
|
<template #icon>
|
||||||
|
<SupportIcon />
|
||||||
|
</template>
|
||||||
|
<template #heading>Support Vue</template>
|
||||||
|
|
||||||
|
As an independent project, Vue relies on community backing for its sustainability. You can help
|
||||||
|
us by
|
||||||
|
<a href="https://vuejs.org/sponsor/" target="_blank" rel="noopener">becoming a sponsor</a>.
|
||||||
|
</WelcomeItem>
|
||||||
|
</template>
|
||||||
|
|
@ -0,0 +1,86 @@
|
||||||
|
<template>
|
||||||
|
<div class="item">
|
||||||
|
<i>
|
||||||
|
<slot name="icon"></slot>
|
||||||
|
</i>
|
||||||
|
<div class="details">
|
||||||
|
<h3>
|
||||||
|
<slot name="heading"></slot>
|
||||||
|
</h3>
|
||||||
|
<slot></slot>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.item {
|
||||||
|
margin-top: 2rem;
|
||||||
|
display: flex;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.details {
|
||||||
|
flex: 1;
|
||||||
|
margin-left: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
i {
|
||||||
|
display: flex;
|
||||||
|
place-items: center;
|
||||||
|
place-content: center;
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
color: var(--color-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
font-weight: 500;
|
||||||
|
margin-bottom: 0.4rem;
|
||||||
|
color: var(--color-heading);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1024px) {
|
||||||
|
.item {
|
||||||
|
margin-top: 0;
|
||||||
|
padding: 0.4rem 0 1rem calc(var(--section-gap) / 2);
|
||||||
|
}
|
||||||
|
|
||||||
|
i {
|
||||||
|
top: calc(50% - 25px);
|
||||||
|
left: -26px;
|
||||||
|
position: absolute;
|
||||||
|
border: 1px solid var(--color-border);
|
||||||
|
background: var(--color-background);
|
||||||
|
border-radius: 8px;
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item:before {
|
||||||
|
content: ' ';
|
||||||
|
border-left: 1px solid var(--color-border);
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
bottom: calc(50% + 25px);
|
||||||
|
height: calc(50% - 25px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.item:after {
|
||||||
|
content: ' ';
|
||||||
|
border-left: 1px solid var(--color-border);
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: calc(50% + 25px);
|
||||||
|
height: calc(50% - 25px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.item:first-of-type:before {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item:last-of-type:after {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,11 @@
|
||||||
|
import { describe, it, expect } from 'vitest'
|
||||||
|
|
||||||
|
import { mount } from '@vue/test-utils'
|
||||||
|
import HelloWorld from '../HelloWorld.vue'
|
||||||
|
|
||||||
|
describe('HelloWorld', () => {
|
||||||
|
it('renders properly', () => {
|
||||||
|
const wrapper = mount(HelloWorld, { props: { msg: 'Hello Vitest' } })
|
||||||
|
expect(wrapper.text()).toContain('Hello Vitest')
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
<template>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
|
||||||
|
<path
|
||||||
|
d="M15 4a1 1 0 1 0 0 2V4zm0 11v-1a1 1 0 0 0-1 1h1zm0 4l-.707.707A1 1 0 0 0 16 19h-1zm-4-4l.707-.707A1 1 0 0 0 11 14v1zm-4.707-1.293a1 1 0 0 0-1.414 1.414l1.414-1.414zm-.707.707l-.707-.707.707.707zM9 11v-1a1 1 0 0 0-.707.293L9 11zm-4 0h1a1 1 0 0 0-1-1v1zm0 4H4a1 1 0 0 0 1.707.707L5 15zm10-9h2V4h-2v2zm2 0a1 1 0 0 1 1 1h2a3 3 0 0 0-3-3v2zm1 1v6h2V7h-2zm0 6a1 1 0 0 1-1 1v2a3 3 0 0 0 3-3h-2zm-1 1h-2v2h2v-2zm-3 1v4h2v-4h-2zm1.707 3.293l-4-4-1.414 1.414 4 4 1.414-1.414zM11 14H7v2h4v-2zm-4 0c-.276 0-.525-.111-.707-.293l-1.414 1.414C5.42 15.663 6.172 16 7 16v-2zm-.707 1.121l3.414-3.414-1.414-1.414-3.414 3.414 1.414 1.414zM9 12h4v-2H9v2zm4 0a3 3 0 0 0 3-3h-2a1 1 0 0 1-1 1v2zm3-3V3h-2v6h2zm0-6a3 3 0 0 0-3-3v2a1 1 0 0 1 1 1h2zm-3-3H3v2h10V0zM3 0a3 3 0 0 0-3 3h2a1 1 0 0 1 1-1V0zM0 3v6h2V3H0zm0 6a3 3 0 0 0 3 3v-2a1 1 0 0 1-1-1H0zm3 3h2v-2H3v2zm1-1v4h2v-4H4zm1.707 4.707l.586-.586-1.414-1.414-.586.586 1.414 1.414z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</template>
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
<template>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" fill="currentColor">
|
||||||
|
<path
|
||||||
|
d="M11 2.253a1 1 0 1 0-2 0h2zm-2 13a1 1 0 1 0 2 0H9zm.447-12.167a1 1 0 1 0 1.107-1.666L9.447 3.086zM1 2.253L.447 1.42A1 1 0 0 0 0 2.253h1zm0 13H0a1 1 0 0 0 1.553.833L1 15.253zm8.447.833a1 1 0 1 0 1.107-1.666l-1.107 1.666zm0-14.666a1 1 0 1 0 1.107 1.666L9.447 1.42zM19 2.253h1a1 1 0 0 0-.447-.833L19 2.253zm0 13l-.553.833A1 1 0 0 0 20 15.253h-1zm-9.553-.833a1 1 0 1 0 1.107 1.666L9.447 14.42zM9 2.253v13h2v-13H9zm1.553-.833C9.203.523 7.42 0 5.5 0v2c1.572 0 2.961.431 3.947 1.086l1.107-1.666zM5.5 0C3.58 0 1.797.523.447 1.42l1.107 1.666C2.539 2.431 3.928 2 5.5 2V0zM0 2.253v13h2v-13H0zm1.553 13.833C2.539 15.431 3.928 15 5.5 15v-2c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM5.5 15c1.572 0 2.961.431 3.947 1.086l1.107-1.666C9.203 13.523 7.42 13 5.5 13v2zm5.053-11.914C11.539 2.431 12.928 2 14.5 2V0c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM14.5 2c1.573 0 2.961.431 3.947 1.086l1.107-1.666C18.203.523 16.421 0 14.5 0v2zm3.5.253v13h2v-13h-2zm1.553 12.167C18.203 13.523 16.421 13 14.5 13v2c1.573 0 2.961.431 3.947 1.086l1.107-1.666zM14.5 13c-1.92 0-3.703.523-5.053 1.42l1.107 1.666C11.539 15.431 12.928 15 14.5 15v-2z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</template>
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
<template>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="20" fill="currentColor">
|
||||||
|
<path
|
||||||
|
d="M11.447 8.894a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm0 1.789a1 1 0 1 0 .894-1.789l-.894 1.789zM7.447 7.106a1 1 0 1 0-.894 1.789l.894-1.789zM10 9a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0H8zm9.447-5.606a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm2 .789a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zM18 5a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0h-2zm-5.447-4.606a1 1 0 1 0 .894-1.789l-.894 1.789zM9 1l.447-.894a1 1 0 0 0-.894 0L9 1zm-2.447.106a1 1 0 1 0 .894 1.789l-.894-1.789zm-6 3a1 1 0 1 0 .894 1.789L.553 4.106zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zm-2-.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 2.789a1 1 0 1 0 .894-1.789l-.894 1.789zM2 5a1 1 0 1 0-2 0h2zM0 7.5a1 1 0 1 0 2 0H0zm8.553 12.394a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 1a1 1 0 1 0 .894 1.789l-.894-1.789zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zM8 19a1 1 0 1 0 2 0H8zm2-2.5a1 1 0 1 0-2 0h2zm-7.447.394a1 1 0 1 0 .894-1.789l-.894 1.789zM1 15H0a1 1 0 0 0 .553.894L1 15zm1-2.5a1 1 0 1 0-2 0h2zm12.553 2.606a1 1 0 1 0 .894 1.789l-.894-1.789zM17 15l.447.894A1 1 0 0 0 18 15h-1zm1-2.5a1 1 0 1 0-2 0h2zm-7.447-5.394l-2 1 .894 1.789 2-1-.894-1.789zm-1.106 1l-2-1-.894 1.789 2 1 .894-1.789zM8 9v2.5h2V9H8zm8.553-4.894l-2 1 .894 1.789 2-1-.894-1.789zm.894 0l-2-1-.894 1.789 2 1 .894-1.789zM16 5v2.5h2V5h-2zm-4.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zm-2.894-1l-2 1 .894 1.789 2-1L8.553.106zM1.447 5.894l2-1-.894-1.789-2 1 .894 1.789zm-.894 0l2 1 .894-1.789-2-1-.894 1.789zM0 5v2.5h2V5H0zm9.447 13.106l-2-1-.894 1.789 2 1 .894-1.789zm0 1.789l2-1-.894-1.789-2 1 .894 1.789zM10 19v-2.5H8V19h2zm-6.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zM2 15v-2.5H0V15h2zm13.447 1.894l2-1-.894-1.789-2 1 .894 1.789zM18 15v-2.5h-2V15h2z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</template>
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
<template>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
|
||||||
|
<path
|
||||||
|
d="M10 3.22l-.61-.6a5.5 5.5 0 0 0-7.666.105 5.5 5.5 0 0 0-.114 7.665L10 18.78l8.39-8.4a5.5 5.5 0 0 0-.114-7.665 5.5 5.5 0 0 0-7.666-.105l-.61.61z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</template>
|
||||||
|
|
@ -0,0 +1,19 @@
|
||||||
|
<!-- This icon is from <https://github.com/Templarian/MaterialDesign>, distributed under Apache 2.0 (https://www.apache.org/licenses/LICENSE-2.0) license-->
|
||||||
|
<template>
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||||
|
aria-hidden="true"
|
||||||
|
role="img"
|
||||||
|
class="iconify iconify--mdi"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
preserveAspectRatio="xMidYMid meet"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M20 18v-4h-3v1h-2v-1H9v1H7v-1H4v4h16M6.33 8l-1.74 4H7v-1h2v1h6v-1h2v1h2.41l-1.74-4H6.33M9 5v1h6V5H9m12.84 7.61c.1.22.16.48.16.8V18c0 .53-.21 1-.6 1.41c-.4.4-.85.59-1.4.59H4c-.55 0-1-.19-1.4-.59C2.21 19 2 18.53 2 18v-4.59c0-.32.06-.58.16-.8L4.5 7.22C4.84 6.41 5.45 6 6.33 6H7V5c0-.55.18-1 .57-1.41C7.96 3.2 8.44 3 9 3h6c.56 0 1.04.2 1.43.59c.39.41.57.86.57 1.41v1h.67c.88 0 1.49.41 1.83 1.22l2.34 5.39z"
|
||||||
|
fill="currentColor"
|
||||||
|
></path>
|
||||||
|
</svg>
|
||||||
|
</template>
|
||||||
|
|
@ -0,0 +1,14 @@
|
||||||
|
import './assets/main.css'
|
||||||
|
|
||||||
|
import { createApp } from 'vue'
|
||||||
|
import { createPinia } from 'pinia'
|
||||||
|
|
||||||
|
import App from './App.vue'
|
||||||
|
import router from './router'
|
||||||
|
|
||||||
|
const app = createApp(App)
|
||||||
|
|
||||||
|
app.use(createPinia())
|
||||||
|
app.use(router)
|
||||||
|
|
||||||
|
app.mount('#app')
|
||||||
|
|
@ -0,0 +1,59 @@
|
||||||
|
//import NotFoundView from '../views/NotFoundView.vue'
|
||||||
|
import { createRouter, createWebHistory } from 'vue-router'
|
||||||
|
import HomeView from '../views/HomeView.vue'
|
||||||
|
|
||||||
|
const router = createRouter({
|
||||||
|
history: createWebHistory(import.meta.env.BASE_URL),
|
||||||
|
routes: [
|
||||||
|
|
||||||
|
{
|
||||||
|
path: '/',
|
||||||
|
name: 'home',
|
||||||
|
component: HomeView
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/about',
|
||||||
|
name: 'about',
|
||||||
|
// route level code-splitting
|
||||||
|
// this generates a separate chunk (About.[hash].js) for this route
|
||||||
|
// which is lazy-loaded when the route is visited.
|
||||||
|
component: () => import('../views/AboutView.vue')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/test',
|
||||||
|
name: 'Test',
|
||||||
|
component: () => import('../views/TestPage.vue')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/liked-songs',
|
||||||
|
name: 'LikedSongs',
|
||||||
|
component: () => import('../views/LikedSongsView.vue')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/login',
|
||||||
|
name: 'Login',
|
||||||
|
component: () => import('../views/LoginRegistration.vue'),
|
||||||
|
// meta: {
|
||||||
|
// requiresAuth: true
|
||||||
|
// },
|
||||||
|
// beforeEnter: (to, from, next) => {
|
||||||
|
// if (isAuthenticated()) {
|
||||||
|
// next()
|
||||||
|
// } else {
|
||||||
|
// next('/login')
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// {
|
||||||
|
// path: '/:catchAll(.*)',
|
||||||
|
// name: 'NotFound',
|
||||||
|
// component: NotFoundView
|
||||||
|
// },
|
||||||
|
]
|
||||||
|
})
|
||||||
|
|
||||||
|
export default router
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
import { ref, computed } from 'vue'
|
||||||
|
import { defineStore } from 'pinia'
|
||||||
|
|
||||||
|
export const useCounterStore = defineStore('counter', () => {
|
||||||
|
const count = ref(0)
|
||||||
|
const doubleCount = computed(() => count.value * 2)
|
||||||
|
function increment() {
|
||||||
|
count.value++
|
||||||
|
}
|
||||||
|
|
||||||
|
return { count, doubleCount, increment }
|
||||||
|
})
|
||||||
|
|
@ -0,0 +1,169 @@
|
||||||
|
// userStore.js
|
||||||
|
import { defineStore } from 'pinia'
|
||||||
|
import axios from 'axios'
|
||||||
|
import { Howl } from 'howler'
|
||||||
|
|
||||||
|
const api = axios.create({
|
||||||
|
baseURL: 'http://127.0.0.1:8000/'
|
||||||
|
})
|
||||||
|
const defaultSong = {
|
||||||
|
id: 'ae669cbe730229f1ea0d2ff63ead1013',
|
||||||
|
text: 'Amaris - Eve',
|
||||||
|
artist: 'Amaris',
|
||||||
|
title: 'Eve',
|
||||||
|
album: '',
|
||||||
|
genre: '',
|
||||||
|
isrc: '',
|
||||||
|
lyrics: '',
|
||||||
|
art: 'http://localhost/api/station/itr/art/b91a45533bb991d3a62ea9f5-1713028289.jpg',
|
||||||
|
custom_fields: []
|
||||||
|
}
|
||||||
|
|
||||||
|
api.interceptors.request.use((config) => {
|
||||||
|
const token = localStorage.getItem('accessToken')
|
||||||
|
if (token) {
|
||||||
|
config.headers.Authorization = `Bearer ${token}`
|
||||||
|
}
|
||||||
|
return config
|
||||||
|
})
|
||||||
|
|
||||||
|
export const usePlayerStore = defineStore({
|
||||||
|
id: 'player',
|
||||||
|
state: () => ({
|
||||||
|
nowPlayingSong: null,
|
||||||
|
isRadioMode: true,
|
||||||
|
isPlaying: false,
|
||||||
|
id: null,
|
||||||
|
title: null,
|
||||||
|
author: null,
|
||||||
|
art: null,
|
||||||
|
duration: null,
|
||||||
|
isSongLiked: false,
|
||||||
|
likedSongsList: [],
|
||||||
|
volume: 0.5,
|
||||||
|
radioHowl: new Howl({
|
||||||
|
src: ['http://localhost:8000/radio.mp3'],
|
||||||
|
html5: true
|
||||||
|
}),
|
||||||
|
musicHowl: new Howl({
|
||||||
|
src: ['http://localhost/api/station/1/file/8e68726a6b45fddd6397eae0/play'],
|
||||||
|
format: ['mp3']
|
||||||
|
})
|
||||||
|
}),
|
||||||
|
actions: {
|
||||||
|
setSongDetails(song) {
|
||||||
|
this.nowPlayingSong = song
|
||||||
|
this.id = song.id
|
||||||
|
this.title = song.title
|
||||||
|
this.author = song.artist
|
||||||
|
this.art = song.art
|
||||||
|
this.duration = song.duration || null
|
||||||
|
this.isSongLiked = false
|
||||||
|
if (this.likedSongsList) this.isSongLiked = this.isLiked(song)
|
||||||
|
},
|
||||||
|
isLiked(songToCheck) {
|
||||||
|
// Check if the song is in the likedSongs list
|
||||||
|
return Object.values(this.likedSongsList).some((song) => song.id === songToCheck.id)
|
||||||
|
},
|
||||||
|
async getNowPlaying() {
|
||||||
|
try {
|
||||||
|
const response = await axios.get('http://localhost/api/nowplaying/1')
|
||||||
|
const song = response.data.now_playing.song
|
||||||
|
console.log(response.data)
|
||||||
|
this.setSongDetails(song)
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Failed to fetch now playing data:', error)
|
||||||
|
this.nowPlayingSong = null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
async getLikedSongs() {
|
||||||
|
try {
|
||||||
|
const response = await axios.get('http://127.0.0.1:8000/liked-songs/', {
|
||||||
|
headers: {
|
||||||
|
Authorization: `Bearer ${localStorage.getItem('token')}`
|
||||||
|
}
|
||||||
|
})
|
||||||
|
return response.data
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error fetching liked songs:', error)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
//Howler
|
||||||
|
playRadio() {
|
||||||
|
this.radioHowl.play()
|
||||||
|
},
|
||||||
|
pauseRadio() {
|
||||||
|
this.radioHowl.pause()
|
||||||
|
},
|
||||||
|
playMusic() {
|
||||||
|
this.musicHowl.play()
|
||||||
|
},
|
||||||
|
pauseMusic() {
|
||||||
|
this.musicHowl.pause()
|
||||||
|
},
|
||||||
|
|
||||||
|
//Player controls
|
||||||
|
togglePlay(toggleArgument) {
|
||||||
|
if (typeof toggleArgument === 'boolean') {
|
||||||
|
this.isPlaying = toggleArgument
|
||||||
|
} else {
|
||||||
|
this.isPlaying = !this.isPlaying
|
||||||
|
}
|
||||||
|
if (this.isPlaying) {
|
||||||
|
if (this.isRadioMode) {
|
||||||
|
this.radioHowl.play()
|
||||||
|
} else {
|
||||||
|
this.musicHowl.play()
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
this.radioHowl.pause()
|
||||||
|
this.musicHowl.pause()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
async changeSong(song) {
|
||||||
|
// try {
|
||||||
|
// const response = await axios.get(`http://localhost/api/station/1/file/${song.id}`)
|
||||||
|
|
||||||
|
this.musicHowl.stop()
|
||||||
|
// this.musicHowl.unload()
|
||||||
|
|
||||||
|
// this.musicHowl = new Howl({
|
||||||
|
// src: [`http://localhost/api/station/1/file/${response.data.id}/play`],
|
||||||
|
// format: ['mp3']
|
||||||
|
// })
|
||||||
|
|
||||||
|
this.setSongDetails(song)
|
||||||
|
this.isPlaying = true
|
||||||
|
this.isRadioMode = false
|
||||||
|
this.radioHowl.stop()
|
||||||
|
this.musicHowl.play()
|
||||||
|
// } catch (error) {
|
||||||
|
// console.error('Error fetching song link:', error)
|
||||||
|
// }
|
||||||
|
},
|
||||||
|
toggleMode(){
|
||||||
|
this.radioHowl.pause()
|
||||||
|
this.musicHowl.pause()
|
||||||
|
if (this.isRadioMode) {
|
||||||
|
this.setSongDetails({
|
||||||
|
id: "ae669cbe730229f1ea0d2ff63ead1013",
|
||||||
|
text: "Amaris - Eve",
|
||||||
|
artist: "Amaris",
|
||||||
|
title: "Eve",
|
||||||
|
album: "",
|
||||||
|
genre: "",
|
||||||
|
isrc: "",
|
||||||
|
lyrics: "",
|
||||||
|
art:
|
||||||
|
"http://localhost/api/station/itr/art/b91a45533bb991d3a62ea9f5-1713028289.jpg",
|
||||||
|
custom_fields: [],
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
this.getNowPlaying();
|
||||||
|
}
|
||||||
|
this.isPlaying = false;
|
||||||
|
this.isRadioMode = !this.isRadioMode;
|
||||||
|
},
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
@ -0,0 +1,73 @@
|
||||||
|
// userStore.js
|
||||||
|
import { defineStore } from 'pinia'
|
||||||
|
import axios from "axios";
|
||||||
|
import isLoggedIn from '@/util/isLoggedIn';
|
||||||
|
|
||||||
|
const api = axios.create({
|
||||||
|
baseURL: "http://127.0.0.1:8000/api/",
|
||||||
|
});
|
||||||
|
|
||||||
|
api.interceptors.request.use((config) => {
|
||||||
|
const token = localStorage.getItem("accessToken");
|
||||||
|
if (token) {
|
||||||
|
config.headers.Authorization = `Bearer ${token}`;
|
||||||
|
}
|
||||||
|
return config;
|
||||||
|
});
|
||||||
|
|
||||||
|
export const useUserStore = defineStore({
|
||||||
|
id: 'user',
|
||||||
|
state: () => ({
|
||||||
|
isUserLoggedIn: false,
|
||||||
|
user: null,
|
||||||
|
token: null,
|
||||||
|
refreshToken: null,
|
||||||
|
}),
|
||||||
|
actions: {
|
||||||
|
setUser(user, token, refreshToken) {
|
||||||
|
this.user = user;
|
||||||
|
this.isUserLoggedIn = true;
|
||||||
|
localStorage.setItem('user', user)
|
||||||
|
localStorage.setItem('token', token)
|
||||||
|
localStorage.setItem('refreshToken', refreshToken)
|
||||||
|
},
|
||||||
|
clearUser() {
|
||||||
|
this.user = null;
|
||||||
|
this.isUserLoggedIn = false;
|
||||||
|
localStorage.removeItem('user')
|
||||||
|
localStorage.removeItem('token')
|
||||||
|
localStorage.removeItem('refreshToken')
|
||||||
|
},
|
||||||
|
isLoggedIn() {
|
||||||
|
return localStorage.getItem('token') !== null
|
||||||
|
},
|
||||||
|
async verifyToken() {
|
||||||
|
try {
|
||||||
|
const token = localStorage.getItem('token')
|
||||||
|
if (!token) throw new Error('No token found')
|
||||||
|
|
||||||
|
const response = await api.post('token/verify/', { token })
|
||||||
|
return true;
|
||||||
|
} catch (error) {
|
||||||
|
if (localStorage.getItem('refreshToken')){
|
||||||
|
return await this.refreshToken();
|
||||||
|
}
|
||||||
|
console.error('Error verifying token:', error)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
async refreshToken() {
|
||||||
|
try {
|
||||||
|
const refresh = localStorage.getItem('refreshToken')
|
||||||
|
if (!refresh) throw new Error('No refresh token found')
|
||||||
|
|
||||||
|
const response = await api.post('token/refresh/', { refresh })
|
||||||
|
console.log('Token refreshed successfully:', response.data)
|
||||||
|
localStorage.setItem('token', response.data.access) // Update token in localStorage
|
||||||
|
return true;
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error refreshing token:', error)
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
@ -0,0 +1,25 @@
|
||||||
|
|
||||||
|
import { useUserStore } from "../stores/userCred";
|
||||||
|
import axios from "axios";
|
||||||
|
|
||||||
|
export default async function isLoggedIn() {
|
||||||
|
const userStore = useUserStore();
|
||||||
|
const api = axios.create({
|
||||||
|
baseURL: "http://127.0.0.1:8000/api/",
|
||||||
|
headers: {
|
||||||
|
Authorization: `Bearer ${localStorage.getItem("accessToken")}`,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
try {
|
||||||
|
const response = await api.post("token/verify/", {
|
||||||
|
token: userStore.token,
|
||||||
|
});
|
||||||
|
if (response.status === 200) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error verifying token:", error);
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,42 @@
|
||||||
|
import axios from 'axios'
|
||||||
|
import { usePlayerStore } from '../stores/playerStore'
|
||||||
|
|
||||||
|
export function LikeSong(song, isLiked) {
|
||||||
|
const playerStore = usePlayerStore()
|
||||||
|
const token = localStorage.getItem('token')
|
||||||
|
const axiosInstance = axios.create({
|
||||||
|
baseURL: 'http://127.0.0.1:8000/',
|
||||||
|
headers: {
|
||||||
|
Authorization: `Bearer ${token}`
|
||||||
|
}
|
||||||
|
})
|
||||||
|
if (isLiked) {
|
||||||
|
// If the song is already liked, send a request to delete it
|
||||||
|
axiosInstance
|
||||||
|
.post('delete-song/', {
|
||||||
|
id: song.id
|
||||||
|
})
|
||||||
|
.then((response) => {
|
||||||
|
playerStore.likedSongsList = playerStore.likedSongsList.filter(s => s.id !== song.id);
|
||||||
|
if (song.id == playerStore.id) playerStore.isSongLiked = !playerStore.isSongLiked;
|
||||||
|
return true
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
console.error('Error:', error)
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
axiosInstance
|
||||||
|
.post('add-song/', {
|
||||||
|
new_song: song
|
||||||
|
})
|
||||||
|
.then((response) => {
|
||||||
|
playerStore.likedSongsList.push(song);
|
||||||
|
if (song.id == playerStore.id) playerStore.isSongLiked = !playerStore.isSongLiked;
|
||||||
|
return false
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
console.error('Error:', error)
|
||||||
|
})
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,16 @@
|
||||||
|
|
||||||
|
import axios from "axios";
|
||||||
|
|
||||||
|
import { useUserStore } from "../stores/userCred";
|
||||||
|
|
||||||
|
const store = useUserStore();
|
||||||
|
const fetchNowPlaying = async () => {
|
||||||
|
try {
|
||||||
|
const response = await axios.get("http://localhost/api/nowplaying/1");
|
||||||
|
store.nowPlayingSong = response.data.now_playing.song;
|
||||||
|
isLiked();
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Failed to fetch now playing data:", error);
|
||||||
|
store.nowPlayingSong = null;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,15 @@
|
||||||
|
<template>
|
||||||
|
<div class="about">
|
||||||
|
<h1>This is an about page</h1>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
@media (min-width: 1024px) {
|
||||||
|
.about {
|
||||||
|
min-height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
<script setup>
|
||||||
|
import TheWelcome from "../components/TheWelcome.vue";
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<main>
|
||||||
|
<TheWelcome />
|
||||||
|
</main>
|
||||||
|
</template>
|
||||||
|
|
@ -0,0 +1,17 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<LikedSongsComponent />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import LikedSongsComponent from "@/components/LikedSongs.vue";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "LikedSongsView",
|
||||||
|
components: {
|
||||||
|
LikedSongsComponent,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
@ -0,0 +1,16 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<LoginComponent />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import LoginComponent from "@/components/LoginComponent.vue";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "LoginRegisration",
|
||||||
|
components: {
|
||||||
|
LoginComponent,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,16 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<PlayerComponent />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import PlayerComponent from "@/components/PlayerComponent.vue";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "PlayerVue",
|
||||||
|
components: {
|
||||||
|
PlayerComponent,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,16 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<TestComponent />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import TestComponent from "@/components/TestPlayerComponent.vue";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "TestPage",
|
||||||
|
components: {
|
||||||
|
TestComponent,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,20 @@
|
||||||
|
import { fileURLToPath, URL } from 'node:url'
|
||||||
|
|
||||||
|
import { defineConfig } from 'vite'
|
||||||
|
import vue from '@vitejs/plugin-vue'
|
||||||
|
import vueJsx from '@vitejs/plugin-vue-jsx'
|
||||||
|
import VueDevTools from 'vite-plugin-vue-devtools'
|
||||||
|
|
||||||
|
// https://vitejs.dev/config/
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [
|
||||||
|
vue(),
|
||||||
|
vueJsx(),
|
||||||
|
VueDevTools(),
|
||||||
|
],
|
||||||
|
resolve: {
|
||||||
|
alias: {
|
||||||
|
'@': fileURLToPath(new URL('./src', import.meta.url))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
@ -0,0 +1,14 @@
|
||||||
|
import { fileURLToPath } from 'node:url'
|
||||||
|
import { mergeConfig, defineConfig, configDefaults } from 'vitest/config'
|
||||||
|
import viteConfig from './vite.config'
|
||||||
|
|
||||||
|
export default mergeConfig(
|
||||||
|
viteConfig,
|
||||||
|
defineConfig({
|
||||||
|
test: {
|
||||||
|
environment: 'jsdom',
|
||||||
|
exclude: [...configDefaults.exclude, 'e2e/**'],
|
||||||
|
root: fileURLToPath(new URL('./', import.meta.url))
|
||||||
|
}
|
||||||
|
})
|
||||||
|
)
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
{
|
||||||
|
"name": "ITRadioFrontendVue",
|
||||||
|
"lockfileVersion": 3,
|
||||||
|
"requires": true,
|
||||||
|
"packages": {}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,32 @@
|
||||||
|
# ITRadio Project
|
||||||
|
|
||||||
|
## ITRadio Backend
|
||||||
|
|
||||||
|
|
||||||
|
1. Start the virtual environment:
|
||||||
|
```
|
||||||
|
pip install -r requirements.txt
|
||||||
|
```
|
||||||
|
2. cd
|
||||||
|
```
|
||||||
|
cd ITRadioBackend
|
||||||
|
```
|
||||||
|
3. Run the server:
|
||||||
|
```
|
||||||
|
python manage.py runserver
|
||||||
|
```
|
||||||
|
|
||||||
|
## ITRadio Frontend
|
||||||
|
|
||||||
|
To run the frontend, navigate to the `ITRadioFrontend` directory and run the development server:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
cd ITRadioFrontendVue/ITRadioFrontend
|
||||||
|
npm run dev
|
||||||
|
```
|
||||||
|
|
||||||
|
## AzuraCast
|
||||||
|
AzuraCast is used in this project. For installation and getting started, visit the AzuraCast Documentation.
|
||||||
|
https://www.azuracast.com/docs/getting-started/installation/
|
||||||
|
|
||||||
|
|
||||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -0,0 +1,16 @@
|
||||||
|
"""
|
||||||
|
ASGI config for ITRadioBackend project.
|
||||||
|
|
||||||
|
It exposes the ASGI callable as a module-level variable named ``application``.
|
||||||
|
|
||||||
|
For more information on this file, see
|
||||||
|
https://docs.djangoproject.com/en/5.0/howto/deployment/asgi/
|
||||||
|
"""
|
||||||
|
|
||||||
|
import os
|
||||||
|
|
||||||
|
from django.core.asgi import get_asgi_application
|
||||||
|
|
||||||
|
os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'ITRadioBackend.settings')
|
||||||
|
|
||||||
|
application = get_asgi_application()
|
||||||
|
|
@ -0,0 +1,181 @@
|
||||||
|
"""
|
||||||
|
Django settings for ITRadioBackend project.
|
||||||
|
|
||||||
|
Generated by 'django-admin startproject' using Django 5.0.4.
|
||||||
|
|
||||||
|
For more information on this file, see
|
||||||
|
https://docs.djangoproject.com/en/5.0/topics/settings/
|
||||||
|
|
||||||
|
For the full list of settings and their values, see
|
||||||
|
https://docs.djangoproject.com/en/5.0/ref/settings/
|
||||||
|
"""
|
||||||
|
|
||||||
|
from pathlib import Path
|
||||||
|
import os
|
||||||
|
# Build paths inside the project like this: BASE_DIR / 'subdir'.
|
||||||
|
BASE_DIR = Path(__file__).resolve().parent.parent
|
||||||
|
|
||||||
|
|
||||||
|
# Quick-start development settings - unsuitable for production
|
||||||
|
# See https://docs.djangoproject.com/en/5.0/howto/deployment/checklist/
|
||||||
|
|
||||||
|
# SECURITY WARNING: keep the secret key used in production secret!
|
||||||
|
SECRET_KEY = 'django-insecure-z242=*-knp4h=0l1*o-nyid^y0bwt4bvg3tf*wvr(qszj&!8$c'
|
||||||
|
|
||||||
|
# SECURITY WARNING: don't run with debug turned on in production!
|
||||||
|
DEBUG = False
|
||||||
|
if DEBUG:
|
||||||
|
ALLOWED_HOSTS = ['*']
|
||||||
|
else:
|
||||||
|
ALLOWED_HOSTS = ['83.147.244.32', 'localhost']
|
||||||
|
|
||||||
|
STATIC_URL = '/static/'
|
||||||
|
if DEBUG:
|
||||||
|
STATIC_DIR = os.path.join(BASE_DIR, 'static')
|
||||||
|
STATICFILES_DIRS = [
|
||||||
|
STATIC_DIR,
|
||||||
|
'/var/www/static/',
|
||||||
|
]
|
||||||
|
else:
|
||||||
|
STATIC_ROOT = os.path.join(BASE_DIR, 'static/')
|
||||||
|
STATICFILES_FINDERS = (
|
||||||
|
'django.contrib.staticfiles.finders.FileSystemFinder',
|
||||||
|
'django.contrib.staticfiles.finders.AppDirectoriesFinder',
|
||||||
|
)
|
||||||
|
MEDIA_URL = '/media/'
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
# Application definition
|
||||||
|
|
||||||
|
INSTALLED_APPS = [
|
||||||
|
'django.contrib.admin',
|
||||||
|
'django.contrib.auth',
|
||||||
|
'django.contrib.contenttypes',
|
||||||
|
'django.contrib.sessions',
|
||||||
|
'django.contrib.messages',
|
||||||
|
'django.contrib.staticfiles',
|
||||||
|
|
||||||
|
'rest_framework',
|
||||||
|
'corsheaders',
|
||||||
|
'rest_framework_simplejwt',
|
||||||
|
'rest_framework.authtoken',
|
||||||
|
|
||||||
|
'news',
|
||||||
|
'rubricks',
|
||||||
|
'loginApi',
|
||||||
|
'userProfile',
|
||||||
|
|
||||||
|
]
|
||||||
|
|
||||||
|
MIDDLEWARE = [
|
||||||
|
'django.middleware.security.SecurityMiddleware',
|
||||||
|
'django.contrib.sessions.middleware.SessionMiddleware',
|
||||||
|
'django.middleware.common.CommonMiddleware',
|
||||||
|
'django.middleware.csrf.CsrfViewMiddleware',
|
||||||
|
'django.contrib.auth.middleware.AuthenticationMiddleware',
|
||||||
|
'django.contrib.messages.middleware.MessageMiddleware',
|
||||||
|
'django.middleware.clickjacking.XFrameOptionsMiddleware',
|
||||||
|
'corsheaders.middleware.CorsMiddleware',
|
||||||
|
]
|
||||||
|
|
||||||
|
ROOT_URLCONF = 'ITRadioBackend.urls'
|
||||||
|
|
||||||
|
TEMPLATES = [
|
||||||
|
{
|
||||||
|
'BACKEND': 'django.template.backends.django.DjangoTemplates',
|
||||||
|
'DIRS': [],
|
||||||
|
'APP_DIRS': True,
|
||||||
|
'OPTIONS': {
|
||||||
|
'context_processors': [
|
||||||
|
'django.template.context_processors.debug',
|
||||||
|
'django.template.context_processors.request',
|
||||||
|
'django.contrib.auth.context_processors.auth',
|
||||||
|
'django.contrib.messages.context_processors.messages',
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
|
WSGI_APPLICATION = 'ITRadioBackend.wsgi.application'
|
||||||
|
|
||||||
|
|
||||||
|
# Database
|
||||||
|
# https://docs.djangoproject.com/en/5.0/ref/settings/#databases
|
||||||
|
|
||||||
|
DATABASES = {
|
||||||
|
'default': {
|
||||||
|
'ENGINE': 'django.db.backends.sqlite3',
|
||||||
|
'NAME': BASE_DIR / 'db.sqlite3',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
# Password validation
|
||||||
|
# https://docs.djangoproject.com/en/5.0/ref/settings/#auth-password-validators
|
||||||
|
|
||||||
|
AUTH_PASSWORD_VALIDATORS = [
|
||||||
|
{
|
||||||
|
'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
|
|
||||||
|
# Internationalization
|
||||||
|
# https://docs.djangoproject.com/en/5.0/topics/i18n/
|
||||||
|
|
||||||
|
LANGUAGE_CODE = 'en-us'
|
||||||
|
|
||||||
|
TIME_ZONE = 'UTC'
|
||||||
|
|
||||||
|
USE_I18N = True
|
||||||
|
|
||||||
|
USE_TZ = True
|
||||||
|
|
||||||
|
|
||||||
|
# Static files (CSS, JavaScript, Images)
|
||||||
|
# https://docs.djangoproject.com/en/5.0/howto/static-files/
|
||||||
|
|
||||||
|
STATIC_URL = 'static/'
|
||||||
|
|
||||||
|
# Default primary key field type
|
||||||
|
# https://docs.djangoproject.com/en/5.0/ref/settings/#default-auto-field
|
||||||
|
|
||||||
|
DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'
|
||||||
|
|
||||||
|
|
||||||
|
REST_FRAMEWORK = {
|
||||||
|
'DEFAULT_PERMISSION_CLASSES': [
|
||||||
|
'rest_framework.permissions.DjangoModelPermissionsOrAnonReadOnly'
|
||||||
|
],
|
||||||
|
'DEFAULT_AUTHENTICATION_CLASSES': (
|
||||||
|
'rest_framework_simplejwt.authentication.JWTAuthentication',
|
||||||
|
'rest_framework_simplejwt.authentication.JWTStatelessUserAuthentication',
|
||||||
|
),
|
||||||
|
'DEFAULT_SCHEMA_CLASS': 'rest_framework.schemas.coreapi.AutoSchema'
|
||||||
|
}
|
||||||
|
CORS_ALLOWED_ORIGINS = [
|
||||||
|
'http://localhost:5173', # Adjust the port if your Vue app is served on a different one
|
||||||
|
'http://127.0.0.1:5173',
|
||||||
|
]
|
||||||
|
|
||||||
|
from datetime import timedelta
|
||||||
|
|
||||||
|
SIMPLE_JWT = {
|
||||||
|
'ACCESS_TOKEN_LIFETIME': timedelta(minutes=180),
|
||||||
|
'REFRESH_TOKEN_LIFETIME': timedelta(days=30),
|
||||||
|
}
|
||||||
|
|
||||||
|
CORS_ALLOW_CREDENTIALS = True
|
||||||
|
CORS_ALLOWED_ORIGINS = [
|
||||||
|
'http://localhost:5173',
|
||||||
|
]
|
||||||
|
|
@ -0,0 +1,39 @@
|
||||||
|
from django.contrib import admin
|
||||||
|
from rest_framework.documentation import include_docs_urls
|
||||||
|
from django.urls import path, include
|
||||||
|
# from api.views import AzuraNowPlayingWebhookView
|
||||||
|
from loginApi.views import login, register
|
||||||
|
from rest_framework_simplejwt.views import (
|
||||||
|
TokenObtainPairView,
|
||||||
|
TokenRefreshView,
|
||||||
|
TokenVerifyView,
|
||||||
|
)
|
||||||
|
from django.conf.urls.static import static
|
||||||
|
from news import views as newsViews
|
||||||
|
from rest_framework import routers, serializers, viewsets
|
||||||
|
from userProfile.views import ProfileViewSet
|
||||||
|
from django.conf import settings
|
||||||
|
|
||||||
|
|
||||||
|
router = routers.DefaultRouter()
|
||||||
|
router.register(r'news', newsViews.NewsViewSet)
|
||||||
|
router.register(r'profiles', ProfileViewSet, basename='profiles')
|
||||||
|
|
||||||
|
urlpatterns = [
|
||||||
|
path('admin/', admin.site.urls),
|
||||||
|
|
||||||
|
path('api/token/', TokenObtainPairView.as_view(), name='token_obtain_pair'),
|
||||||
|
path('api/token/refresh/', TokenRefreshView.as_view(), name='token_refresh'),
|
||||||
|
path('api/token/verify/', TokenVerifyView.as_view(), name='token_verify'),
|
||||||
|
path('api/', include_docs_urls(title='API docs')),
|
||||||
|
path('', include(router.urls)),
|
||||||
|
path('api-auth/', include('rest_framework.urls', namespace='rest_framework')),
|
||||||
|
|
||||||
|
# path('webhook/', AzuraNowPlayingWebhookView.as_view(), name='webhook-receiver'),
|
||||||
|
path('api/login/', login, name='login'),
|
||||||
|
path('api/register/', register, name='register'),
|
||||||
|
]
|
||||||
|
|
||||||
|
if settings.DEBUG:
|
||||||
|
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
|
||||||
|
urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
|
||||||
|
|
@ -0,0 +1,16 @@
|
||||||
|
"""
|
||||||
|
WSGI config for ITRadioBackend project.
|
||||||
|
|
||||||
|
It exposes the WSGI callable as a module-level variable named ``application``.
|
||||||
|
|
||||||
|
For more information on this file, see
|
||||||
|
https://docs.djangoproject.com/en/5.0/howto/deployment/wsgi/
|
||||||
|
"""
|
||||||
|
|
||||||
|
import os
|
||||||
|
|
||||||
|
from django.core.wsgi import get_wsgi_application
|
||||||
|
|
||||||
|
os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'ITRadioBackend.settings')
|
||||||
|
|
||||||
|
application = get_wsgi_application()
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
# from django.contrib import admin
|
||||||
|
# from .models import NowPlayingSong
|
||||||
|
|
||||||
|
# # Register your models here.
|
||||||
|
# admin.site.register(NowPlayingSong)
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
from django.apps import AppConfig
|
||||||
|
|
||||||
|
|
||||||
|
class ApiConfig(AppConfig):
|
||||||
|
default_auto_field = 'django.db.models.BigAutoField'
|
||||||
|
name = 'api'
|
||||||
|
|
@ -0,0 +1,26 @@
|
||||||
|
# Generated by Django 5.0.4 on 2024-04-21 17:43
|
||||||
|
|
||||||
|
from django.db import migrations, models
|
||||||
|
|
||||||
|
|
||||||
|
class Migration(migrations.Migration):
|
||||||
|
|
||||||
|
initial = True
|
||||||
|
|
||||||
|
dependencies = [
|
||||||
|
]
|
||||||
|
|
||||||
|
operations = [
|
||||||
|
migrations.CreateModel(
|
||||||
|
name='NowPlayingSong',
|
||||||
|
fields=[
|
||||||
|
('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
|
||||||
|
('title', models.CharField(max_length=255)),
|
||||||
|
('artist', models.CharField(max_length=255)),
|
||||||
|
('album', models.CharField(blank=True, max_length=255, null=True)),
|
||||||
|
('genre', models.CharField(blank=True, max_length=100, null=True)),
|
||||||
|
('art_url', models.URLField(blank=True, null=True)),
|
||||||
|
('duration', models.IntegerField()),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
]
|
||||||
|
|
@ -0,0 +1,17 @@
|
||||||
|
# Generated by Django 5.0.4 on 2024-04-21 18:13
|
||||||
|
|
||||||
|
from django.db import migrations
|
||||||
|
|
||||||
|
|
||||||
|
class Migration(migrations.Migration):
|
||||||
|
|
||||||
|
dependencies = [
|
||||||
|
('api', '0001_initial'),
|
||||||
|
]
|
||||||
|
|
||||||
|
operations = [
|
||||||
|
migrations.RemoveField(
|
||||||
|
model_name='nowplayingsong',
|
||||||
|
name='duration',
|
||||||
|
),
|
||||||
|
]
|
||||||
|
|
@ -0,0 +1,18 @@
|
||||||
|
# Generated by Django 5.0.4 on 2024-04-21 18:51
|
||||||
|
|
||||||
|
from django.db import migrations
|
||||||
|
|
||||||
|
|
||||||
|
class Migration(migrations.Migration):
|
||||||
|
|
||||||
|
dependencies = [
|
||||||
|
('api', '0002_remove_nowplayingsong_duration'),
|
||||||
|
]
|
||||||
|
|
||||||
|
operations = [
|
||||||
|
migrations.RenameField(
|
||||||
|
model_name='nowplayingsong',
|
||||||
|
old_name='art_url',
|
||||||
|
new_name='art',
|
||||||
|
),
|
||||||
|
]
|
||||||
|
|
@ -0,0 +1,16 @@
|
||||||
|
# Generated by Django 5.0.4 on 2024-04-24 14:17
|
||||||
|
|
||||||
|
from django.db import migrations
|
||||||
|
|
||||||
|
|
||||||
|
class Migration(migrations.Migration):
|
||||||
|
|
||||||
|
dependencies = [
|
||||||
|
('api', '0003_rename_art_url_nowplayingsong_art'),
|
||||||
|
]
|
||||||
|
|
||||||
|
operations = [
|
||||||
|
migrations.DeleteModel(
|
||||||
|
name='NowPlayingSong',
|
||||||
|
),
|
||||||
|
]
|
||||||
|
|
@ -0,0 +1,10 @@
|
||||||
|
# from django.db import models
|
||||||
|
|
||||||
|
# class NowPlayingSong(models.Model):
|
||||||
|
# title = models.CharField(max_length=255)
|
||||||
|
# artist = models.CharField(max_length=255)
|
||||||
|
# album = models.CharField(max_length=255, blank=True, null=True)
|
||||||
|
# genre = models.CharField(max_length=100, blank=True, null=True)
|
||||||
|
# art = models.URLField(blank=True, null=True)
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -0,0 +1,16 @@
|
||||||
|
# from rest_framework import serializers
|
||||||
|
# from .models import NowPlayingSong
|
||||||
|
|
||||||
|
|
||||||
|
# class NowPlayingSongSerializer(serializers.ModelSerializer):
|
||||||
|
# class Meta:
|
||||||
|
# model = NowPlayingSong
|
||||||
|
# fields = ['title', 'artist', 'album', 'genre', 'art']
|
||||||
|
|
||||||
|
# class WebhookSerializer(serializers.Serializer):
|
||||||
|
# song = NowPlayingSongSerializer()
|
||||||
|
# def create(self, validated_data):
|
||||||
|
# print("create")
|
||||||
|
# song_data = validated_data.get('song')
|
||||||
|
# print(song_data)
|
||||||
|
# return NowPlayingSong.objects.create(**song_data)
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
from django.test import TestCase
|
||||||
|
|
||||||
|
# Create your tests here.
|
||||||
|
|
@ -0,0 +1,18 @@
|
||||||
|
# from rest_framework.views import APIView
|
||||||
|
# from rest_framework.response import Response
|
||||||
|
# from .models import NowPlayingSong
|
||||||
|
# from .serializers import WebhookSerializer
|
||||||
|
# import json
|
||||||
|
|
||||||
|
# class AzuraNowPlayingWebhookView(APIView):
|
||||||
|
# queryset = NowPlayingSong.objects.all()
|
||||||
|
# def post(self, request, *args, **kwargs):
|
||||||
|
# # Ensure the 'now_playing' data includes a 'song' key
|
||||||
|
# data = request.data.get('now_playing')
|
||||||
|
# serializer = WebhookSerializer(data=data)
|
||||||
|
# print(data)
|
||||||
|
# if serializer.is_valid():
|
||||||
|
# song = serializer.save()
|
||||||
|
# print("valid")
|
||||||
|
# return Response(data, status=201)
|
||||||
|
# return Response(serializer.errors, status=400)
|
||||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -0,0 +1,3 @@
|
||||||
|
from django.contrib import admin
|
||||||
|
|
||||||
|
# Register your models here.
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
from django.apps import AppConfig
|
||||||
|
|
||||||
|
|
||||||
|
class LoginapiConfig(AppConfig):
|
||||||
|
default_auto_field = 'django.db.models.BigAutoField'
|
||||||
|
name = 'loginApi'
|
||||||
Binary file not shown.
|
|
@ -0,0 +1,3 @@
|
||||||
|
from django.db import models
|
||||||
|
|
||||||
|
# Create your models here.
|
||||||
|
|
@ -0,0 +1,18 @@
|
||||||
|
from django.contrib.auth.models import User
|
||||||
|
from rest_framework import serializers
|
||||||
|
|
||||||
|
class UserSerializer(serializers.ModelSerializer):
|
||||||
|
class Meta:
|
||||||
|
model = User
|
||||||
|
fields = ['username', 'email', 'password']
|
||||||
|
extra_kwargs = {
|
||||||
|
'password': {'write_only': True}
|
||||||
|
}
|
||||||
|
|
||||||
|
def create(self, validated_data):
|
||||||
|
user = User.objects.create_user(
|
||||||
|
username=validated_data['username'],
|
||||||
|
email=validated_data['email'],
|
||||||
|
password=validated_data['password']
|
||||||
|
)
|
||||||
|
return user
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
from django.test import TestCase
|
||||||
|
|
||||||
|
# Create your tests here.
|
||||||
|
|
@ -0,0 +1,53 @@
|
||||||
|
from rest_framework import status
|
||||||
|
from rest_framework.response import Response
|
||||||
|
from rest_framework.views import APIView
|
||||||
|
from django.contrib.auth import authenticate
|
||||||
|
from rest_framework_simplejwt.tokens import RefreshToken
|
||||||
|
from rest_framework import generics
|
||||||
|
from django.contrib.auth.models import User
|
||||||
|
|
||||||
|
from rest_framework.decorators import api_view, permission_classes
|
||||||
|
from rest_framework.permissions import AllowAny
|
||||||
|
from userProfile.serializers import ProfileSerializer
|
||||||
|
from loginApi.serializers import UserSerializer
|
||||||
|
|
||||||
|
@api_view(['POST'])
|
||||||
|
@permission_classes([AllowAny])
|
||||||
|
def login(request):
|
||||||
|
def post(self, request):
|
||||||
|
username = request.data.get('username')
|
||||||
|
password = request.data.get('password')
|
||||||
|
user = authenticate(username=username, password=password)
|
||||||
|
if user is not None:
|
||||||
|
refresh = RefreshToken.for_user(user)
|
||||||
|
return Response({
|
||||||
|
'refresh': str(refresh),
|
||||||
|
'access': str(refresh.access_token),
|
||||||
|
})
|
||||||
|
return Response({'error': 'Invalid Credentials'}, status=status.HTTP_401_UNAUTHORIZED)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
@api_view(['POST'])
|
||||||
|
@permission_classes([AllowAny])
|
||||||
|
def register(request):
|
||||||
|
user_serializer = UserSerializer(data=request.data)
|
||||||
|
if user_serializer.is_valid():
|
||||||
|
user = user_serializer.save()
|
||||||
|
profile_data = request.data.get('profile', {})
|
||||||
|
profile_data['user'] = user.id # Ensure the user ID is included in the profile data
|
||||||
|
|
||||||
|
profile_serializer = ProfileSerializer(data=profile_data)
|
||||||
|
if profile_serializer.is_valid():
|
||||||
|
profile_serializer.save()
|
||||||
|
refresh = RefreshToken.for_user(user)
|
||||||
|
return Response({
|
||||||
|
'user': user_serializer.data,
|
||||||
|
'profile': profile_serializer.data,
|
||||||
|
'refresh': str(refresh),
|
||||||
|
'access': str(refresh.access_token),
|
||||||
|
}, status=status.HTTP_201_CREATED)
|
||||||
|
else:
|
||||||
|
return Response(profile_serializer.errors, status=status.HTTP_400_BAD_REQUEST)
|
||||||
|
return Response(user_serializer.errors, status=status.HTTP_400_BAD_REQUEST)
|
||||||
|
|
@ -0,0 +1,22 @@
|
||||||
|
#!/usr/bin/env python
|
||||||
|
"""Django's command-line utility for administrative tasks."""
|
||||||
|
import os
|
||||||
|
import sys
|
||||||
|
|
||||||
|
|
||||||
|
def main():
|
||||||
|
"""Run administrative tasks."""
|
||||||
|
os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'ITRadioBackend.settings')
|
||||||
|
try:
|
||||||
|
from django.core.management import execute_from_command_line
|
||||||
|
except ImportError as exc:
|
||||||
|
raise ImportError(
|
||||||
|
"Couldn't import Django. Are you sure it's installed and "
|
||||||
|
"available on your PYTHONPATH environment variable? Did you "
|
||||||
|
"forget to activate a virtual environment?"
|
||||||
|
) from exc
|
||||||
|
execute_from_command_line(sys.argv)
|
||||||
|
|
||||||
|
|
||||||
|
if __name__ == '__main__':
|
||||||
|
main()
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
from django.contrib import admin
|
||||||
|
|
||||||
|
# Register your models here.
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
from django.apps import AppConfig
|
||||||
|
|
||||||
|
|
||||||
|
class MediaConfig(AppConfig):
|
||||||
|
default_auto_field = 'django.db.models.BigAutoField'
|
||||||
|
name = 'media'
|
||||||
|
|
@ -0,0 +1,14 @@
|
||||||
|
from django.db import models
|
||||||
|
|
||||||
|
# class Song(models.Model):
|
||||||
|
# name = models.CharField(max_length=255)
|
||||||
|
# artist = models.CharField(max_length=255)
|
||||||
|
# album = models.ForeignKey('Album', on_delete=models.CASCADE)
|
||||||
|
# ...
|
||||||
|
|
||||||
|
# class Playlist(models.Model):
|
||||||
|
# songs = models.ManyToManyField(Song)
|
||||||
|
|
||||||
|
# class Podcast(models.Model):
|
||||||
|
# name = models.CharField(max_length=255)
|
||||||
|
# hosts = models.CharField(max_length=255)
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
from django.test import TestCase
|
||||||
|
|
||||||
|
# Create your tests here.
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
from django.shortcuts import render
|
||||||
|
|
||||||
|
# Create your views here.
|
||||||
Binary file not shown.
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue