2025-summer/team-9
12
Fork 0
Code Issues Pull requests Projects Releases Activity

app first commit

Browse source
This commit is contained in:
Alessio Ganzarolli 2025-08-02 02:08:59 +02:00
parent 0e16d3e6be
commit 4441012687
45 changed files with 12987 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

9
app/capacitor.config.ts Normal file
View file

@ -0,0 +1,9 @@
import type { CapacitorConfig } from '@capacitor/cli';
const config: CapacitorConfig = {
appId: 'io.ionic.starter',
appName: 'Lido Vibes',
webDir: 'dist'
};
export default config;

10
app/cypress.config.ts Normal file
View file

@ -0,0 +1,10 @@
import { defineConfig } from "cypress";
export default defineConfig({
e2e: {
baseUrl: "http://localhost:5173",
setupNodeEvents(on, config) {
// implement node event listeners here
},
},
});

6
app/cypress/e2e/test.cy.ts Normal file
View file

@ -0,0 +1,6 @@
describe('My First Test', () => {
it('Visits the app root url', () => {
cy.visit('/')
cy.contains('ion-content', 'Tab 1 page')
})
})

5
app/cypress/fixtures/example.json Normal file
View file

@ -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"
}

37
app/cypress/support/commands.ts Normal file
View file

@ -0,0 +1,37 @@
/// <reference types="cypress" />
// ***********************************************
// This example commands.ts 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) => { ... })
//
// declare global {
// namespace Cypress {
// interface Chainable {
// login(email: string, password: string): Chainable<void>
// drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
// dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
// visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
// }
// }
// }

20
app/cypress/support/e2e.ts Normal file
View file

@ -0,0 +1,20 @@
// ***********************************************************
// This example support/e2e.ts 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')

30
app/eslint.config.js Normal file
View file

@ -0,0 +1,30 @@
import js from '@eslint/js'
import globals from 'globals'
import reactHooks from 'eslint-plugin-react-hooks'
import reactRefresh from 'eslint-plugin-react-refresh'
import tseslint from 'typescript-eslint'
export default tseslint.config(
{ ignores: ['dist', 'cypress.config.ts'] },
{
extends: [js.configs.recommended, ...tseslint.configs.recommended],
files: ['**/*.{ts,tsx}'],
languageOptions: {
ecmaVersion: 2020,
globals: globals.browser,
},
plugins: {
'react-hooks': reactHooks,
'react-refresh': reactRefresh,
},
rules: {
...reactHooks.configs.recommended.rules,
'react-refresh/only-export-components': [
'warn',
{ allowConstantExport: true },
],
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
},
},
)

30
app/index.html Normal file
View file

@ -0,0 +1,30 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Ionic App</title>
<base href="/" />
<meta name="color-scheme" content="light dark" />
<meta
name="viewport"
content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<link rel="manifest" href="/manifest.json" />
<link rel="shortcut icon" type="image/png" href="/favicon.png" />
<!-- add to homescreen for ios -->
<meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-title" content="Ionic App" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>

7
app/ionic.config.json Normal file
View file

@ -0,0 +1,7 @@
{
"name": "Lido Vibes",
"integrations": {
"capacitor": {}
},
"type": "react-vite"
}

11800
app/package-lock.json generated Normal file
View file

File diff suppressed because it is too large Load diff

58
app/package.json Normal file
View file

@ -0,0 +1,58 @@
{
"name": "lido-vibes",
"private": true,
"version": "0.0.1",
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"preview": "vite preview",
"test.e2e": "cypress run",
"test.unit": "vitest",
"lint": "eslint"
},
"dependencies": {
"@capacitor/app": "7.0.1",
"@capacitor/core": "7.4.2",
"@capacitor/haptics": "7.0.1",
"@capacitor/keyboard": "7.0.1",
"@capacitor/status-bar": "7.0.1",
"@ionic/react": "^8.5.0",
"@ionic/react-router": "^8.5.0",
"@types/react-router": "^5.1.20",
"@types/react-router-dom": "^5.3.3",
"ionicons": "^7.4.0",
"jotai": "^2.12.5",
"react": "19.0.0",
"react-dom": "19.0.0",
"react-router": "^5.3.4",
"react-router-dom": "^5.3.4"
},
"devDependencies": {
"@capacitor/cli": "7.4.2",
"@testing-library/dom": ">=7.21.4",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^16.2.0",
"@testing-library/user-event": "^14.4.3",
"@types/react": "19.0.10",
"@types/react-dom": "19.0.4",
"@vitejs/plugin-legacy": "^5.0.0",
"@vitejs/plugin-react": "^4.0.1",
"cypress": "^13.5.0",
"eslint": "^9.20.1",
"eslint-plugin-react": "^7.32.2",
"eslint-plugin-react-hooks": "^5.1.0",
"eslint-plugin-react-refresh": "^0.4.19",
"globals": "^15.15.0",
"jsdom": "^22.1.0",
"terser": "^5.4.0",
"typescript": "^5.1.6",
"typescript-eslint": "^8.24.0",
"vite": "5.2.14",
"vitest": "^0.34.6"
},
"overrides": {
"rollup": "4.44.0"
},
"description": "An Ionic project"
}

BIN
app/public/favicon.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 930 B

21
app/public/manifest.json Normal file
View file

@ -0,0 +1,21 @@
{
"short_name": "Ionic App",
"name": "My Ionic App",
"icons": [
{
"src": "assets/icon/favicon.png",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "assets/icon/icon.png",
"type": "image/png",
"sizes": "512x512",
"purpose": "maskable"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#ffffff",
"background_color": "#ffffff"
}

BIN
app/resources/icon.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 42 KiB

BIN
app/resources/splash.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 150 KiB

28
app/src/App.css Normal file
View file

@ -0,0 +1,28 @@
.floating-tab-bar {
/* position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
width: 90%;
max-width: 500px; */
height: 60px;
background: #ffffff10;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-top: 3px solid #ffffff20;
/* border-radius: 9999999999999px; */
/* box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); */
display: flex;
justify-content: space-around;
align-items: center;
padding: 0 10px;
z-index: 999;
--background: transparent;
--border: none;
}

8
app/src/App.test.tsx Normal file
View file

@ -0,0 +1,8 @@
import React from 'react';
import { render } from '@testing-library/react';
import App from './App';
test('renders without crashing', () => {
const { baseElement } = render(<App />);
expect(baseElement).toBeDefined();
});

54
app/src/App.tsx Normal file
View file

@ -0,0 +1,54 @@
import './App.css';
import './theme/variables.css';
import '@ionic/react/css/core.css';
import '@ionic/react/css/display.css';
import '@ionic/react/css/flex-utils.css';
import '@ionic/react/css/float-elements.css';
import '@ionic/react/css/normalize.css';
import '@ionic/react/css/padding.css';
import '@ionic/react/css/palettes/dark.system.css';
import '@ionic/react/css/structure.css';
import '@ionic/react/css/text-alignment.css';
import '@ionic/react/css/text-transformation.css';
import '@ionic/react/css/typography.css';
import { IonApp, IonIcon, IonLabel, IonRouterOutlet, IonTabBar, IonTabButton, IonTabs, setupIonicReact } from '@ionic/react';
import { IonReactRouter } from '@ionic/react-router';
import { list, musicalNote, search } from 'ionicons/icons';
import { useAtom } from 'jotai';
import { useEffect } from 'react';
import { Redirect, Route } from 'react-router-dom';
import { currentTrackAtom } from './atoms';
import { mocks } from './mocks';
import Tab1 from './pages/Tab1';
import Tab2 from './pages/Tab2';
import Tab3 from './pages/Tab3';
import Tab from './pages/Tab3';
/* Core CSS required for Ionic components to work properly */
/* Basic CSS for apps built with Ionic */
/* Optional CSS utils that can be commented out */
/* Dark mode */
/* Theme variables */
/* Custom CSS */
setupIonicReact();
const App: React.FC = () => {
const [current, setCurrent] = useAtom(currentTrackAtom)
useEffect(() => {
setCurrent(mocks.nowPlaying)
}, [])
return (
<IonApp>
{/* {current && <Background imageUrl={current.coverUrl} color={current.color}/>} */}
<IonReactRouter>
<Tab />
</IonReactRouter>
</IonApp>
);
};
export default App;

5
app/src/atoms/index.tsx Normal file
View file

@ -0,0 +1,5 @@
import { atom } from 'jotai';
import { NowPlayingData } from '../mocks';
export const themeAtom = atom<'light' | 'dark' | 'red'>('light');
export const currentTrackAtom = atom<NowPlayingData>()

43
app/src/components/Backendtest.tsx Normal file
View file

@ -0,0 +1,43 @@
import React, { useEffect, useState } from "react";
const FetchData = () => {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
fetch("https://fbbb261497e3.ngrok-free.app/api/data", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({}), // Body vuoto
})
.then((response) => {
if (!response.ok) {
throw new Error(`HTTP error! Status: ${response.status}`);
}
return response.json();
})
.then((json) => {
setData(json);
setLoading(false);
})
.catch((err) => {
setError(err.message);
setLoading(false);
});
}, []);
if (loading) return <p>Caricamento in corso...</p>;
if (error) return <p>Errore: {error}</p>;
return (
<div>
<h1>Risultato dalla POST</h1>
<pre>{JSON.stringify(data, null, 2)}</pre>
</div>
);
};
export default FetchData;

40
app/src/components/Background.tsx Normal file
View file

@ -0,0 +1,40 @@
import React from "react";
type BackgroundProps = {
imageUrl: string;
color: string;
};
const Background: React.FC<BackgroundProps> = ({ imageUrl, color }) => {
return (
<>
<div
style={{
position: "absolute",
top: 0,
left: 0,
width: "100vw",
height: "100vh",
backgroundImage: `url(${imageUrl})`,
backgroundSize: "cover",
backgroundPosition: "center",
filter: "blur(30px)",
zIndex: -2,
}}
/>
<div
style={{
position: "absolute",
top: 0,
left: 0,
width: "100vw",
height: "100vh",
backgroundColor: "rgba(0, 0, 0, 0.5)", // overlay nero semitrasparente
zIndex: -1,
}}
/>
</>
);
};
export default Background;

24
app/src/components/ExploreContainer.css Normal file
View file

@ -0,0 +1,24 @@
.container {
text-align: center;
position: absolute;
left: 0;
right: 0;
top: 50%;
transform: translateY(-50%);
}
.container strong {
font-size: 20px;
line-height: 26px;
}
.container p {
font-size: 16px;
line-height: 22px;
color: #8c8c8c;
margin: 0;
}
.container a {
text-decoration: none;
}

16
app/src/components/ExploreContainer.tsx Normal file
View file

@ -0,0 +1,16 @@
import './ExploreContainer.css';
interface ContainerProps {
name: string;
}
const ExploreContainer: React.FC<ContainerProps> = ({ name }) => {
return (
<div className="container">
<strong>{name}</strong>
<p>Explore <a target="_blank" rel="noopener noreferrer" href="https://ionicframework.com/docs/components">UI Components</a></p>
</div>
);
};
export default ExploreContainer;

54
app/src/components/NowPlayingDisc.css Normal file
View file

@ -0,0 +1,54 @@
/* @keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
} */
.now-playing-disc {
display: flex;
flex-direction: column;
align-items: center;
padding: 16px;
}
.cover-circle {
animation: spin 8s linear infinite;
width: 220px;
height: 220px;
border-radius: 50%;
background-size: cover;
background-position: center;
box-shadow: var(--box-shadow, 0 4px 10px rgba(0, 0, 0, 0.3));
margin-bottom: 16px;
outline: 4px solid rgba(218, 218, 218, 0.05);
}
.song-info {
display: flex;
flex-direction: column;
text-align: center;
}
.song-now-playing {
text-transform: uppercase;
font-size: 14px;
font-weight: 600;
color: var(--text-muted);
margin-bottom: 3px;
}
.song-title {
font-size: var(--title-font-size, 1.25rem);
font-weight: bold;
color: var(--text);
}
.song-artist {
font-size: var(--artist-font-size, 1rem);
font-weight: 800;
color: var(--text-shy);
}

28
app/src/components/NowPlayingDisc.tsx Normal file
View file

@ -0,0 +1,28 @@
import "./NowPlayingDisc.css";
import { IonText } from "@ionic/react";
import React from "react";
import { NowPlayingData } from "../mocks";
const NowPlayingDisc: React.FC<NowPlayingData> = ({
coverUrl,
title,
artist,
}) => {
return (
<div className="now-playing-disc">
<div
className="cover-circle"
style={{ backgroundImage: `url(${coverUrl})` }}
/>
<div className="song-info">
{/* <IonText className="song-now-playing">Now Playing</IonText> */}
<IonText className="song-title">{title}</IonText>
<IonText className="song-artist">{artist}</IonText>
</div>
</div>
);
};
export default NowPlayingDisc;

69
app/src/components/NowPlayingTab.css Normal file
View file

@ -0,0 +1,69 @@
.now-playing-cover {
margin-top: 25px;
margin-left: 25px;
width: calc(100% - 50px);
height: auto;
object-fit: cover;
display: block;
position: relative;
border-radius: 8px;
}
.now-playing-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 80px;
background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.4));
pointer-events: none;
}
.now-playing-info {
padding: 0;
text-align: center;
color: white;
}
.now-playing-title {
font-size: 1.3rem;
font-weight: bold;
color: var(--text);
margin-bottom: 4px;
}
.now-playing-artist {
font-size: 1.1rem;
font-weight: 600;
color: var(--text-shy);
margin-top: 0;
opacity: 0.8;
}
.now-playing-timeline-wrapper {
padding: 0 25px;
}
.now-playing-timeline-bg {
height: 6px;
width: 100%;
background-color: rgba(255, 255, 255, 0.3);
border-radius: 3px;
position: relative;
}
.now-playing-timeline-progress {
height: 100%;
background-color: white;
transition: width 1s linear;
border-radius: 3px;
}
.now-playing-time-labels {
display: flex;
justify-content: space-between;
font-size: 0.9rem;
color: white;
opacity: 0.7;
margin-top: 4px;
}

74
app/src/components/NowPlayingTab.tsx Normal file
View file

@ -0,0 +1,74 @@
import { IonContent } from "@ionic/react";
import React, { useEffect, useState } from "react";
import "./NowPlayingTab.css";
export interface NowPlayingData {
coverUrl: string;
title: string;
artist: string;
color: string;
}
interface NowPlayingTabProps {
data: NowPlayingData;
startTime: number; // timestamp in ms
duration: number; // duration in ms
}
const formatTime = (ms: number) => {
const totalSeconds = Math.floor(ms / 1000);
const minutes = Math.floor(totalSeconds / 60);
const seconds = totalSeconds % 60;
return `${minutes}:${seconds.toString().padStart(2, "0")}`;
};
const NowPlayingTab: React.FC<NowPlayingTabProps> = ({
data,
startTime,
duration,
}) => {
const [progress, setProgress] = useState(0);
const [elapsed, setElapsed] = useState(0);
useEffect(() => {
const updateProgress = () => {
const now = Date.now();
const newElapsed = now - startTime;
const percentage = Math.min(newElapsed / duration, 1);
setElapsed(newElapsed);
setProgress(percentage);
};
updateProgress();
const interval = setInterval(updateProgress, 1000);
return () => clearInterval(interval);
}, [startTime, duration]);
return (
<>
<div style={{ position: "relative" }}>
<img src={data.coverUrl} alt="cover" className="now-playing-cover" />
<div className="now-playing-overlay" />
</div>
<div className="now-playing-info">
<h2 className="now-playing-title">{data.title}</h2>
<p className="now-playing-artist">{data.artist}</p>
</div>
<div className="now-playing-timeline-wrapper">
<div className="now-playing-timeline-bg">
<div
className="now-playing-timeline-progress"
style={{ width: `${progress * 100}%` }}
/>
</div>
<div className="now-playing-time-labels">
<span>{formatTime(elapsed)}</span>
<span>{formatTime(duration)}</span>
</div>
</div>
</>
);
};
export default NowPlayingTab;

77
app/src/components/Queue.css Normal file
View file

@ -0,0 +1,77 @@
.queue-container {
width: calc(100% - 40px);
margin: 20px;
border-radius: 16px;
display: flex;
flex-direction: column;
overflow: hidden;
margin-bottom: 200px;
}
/* Header con titolo e icona */
.queue-header {
display: flex;
align-items: center;
justify-content: space-between;
}
h1.queue {
font-size: var(--title-font-size, 1.25rem);
font-weight: bold;
color: var(--text);
margin: 0;
}
/* Pulsante dell'icona di ricerca */
.icon-button {
background: none;
color: var(--text);
font-size: 1.4rem;
margin-left: auto;
/* padding: 4px; */
}
/* Elementi della coda */
.song-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 0;
border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}
.cover {
width: 48px;
height: 48px;
border-radius: 8px;
object-fit: cover;
flex-shrink: 0;
}
.text-info {
display: flex;
flex-direction: column;
justify-content: center;
}
.title {
font-weight: 700;
font-size: 1.1rem;
color: var(--text);
}
.artist {
font-size: 0.9rem;
font-weight: 800;
color: var(--text-muted);
}
/* Ionic modal override (optional styling) */
ion-modal {
--border-radius: 16px;
}
/* Optional: fix spacing inside modal */
ion-content {
padding: 16px;
}

73
app/src/components/Queue.tsx Normal file
View file

@ -0,0 +1,73 @@
import './Queue.css';
import { IonButton, IonContent, IonHeader, IonIcon, IonModal, IonSearchbar, IonTitle, IonToolbar } from '@ionic/react';
import { add } from 'ionicons/icons';
import React, { useState } from 'react';
interface NowPlayingDiscProps {
coverUrl: string;
title: string;
artist: string;
}
interface QueueProps {
songs: NowPlayingDiscProps[];
}
const Queue: React.FC<QueueProps> = ({ songs }) => {
const [showModal, setShowModal] = useState(false);
const [searchText, setSearchText] = useState("");
return (
<div className="queue-container">
<div className="queue-header">
<h1 className="queue">Up next</h1>
<IonButton
fill="clear"
onClick={() => setShowModal(true)}
className="icon-button"
>
<IonIcon icon={add} />
</IonButton>
</div>
{songs.map((song, index) => (
<div className="song-item" key={index}>
<img
className="cover"
src={song.coverUrl}
alt={`${song.title} cover`}
/>
<div className="text-info">
<div className="title">{song.title}</div>
<div className="artist">{song.artist}</div>
</div>
</div>
))}
<IonModal isOpen={showModal} onDidDismiss={() => setShowModal(false)}>
<IonHeader>
<IonToolbar>
<IonTitle>Add Songs</IonTitle>
<IonButton
slot="end"
fill="clear"
onClick={() => setShowModal(false)}
>
Close
</IonButton>
</IonToolbar>
</IonHeader>
<IonContent>
<IonSearchbar
value={searchText}
onIonInput={(e) => setSearchText(e.detail.value!)}
placeholder="Search..."
/>
</IonContent>
</IonModal>
</div>
);
};
export default Queue;

19
app/src/components/ThemeSelector.tsx Normal file
View file

@ -0,0 +1,19 @@
import { IonItem, IonLabel, IonSelect, IonSelectOption } from '@ionic/react';
import { useTheme } from '../hooks/useTheme';
export function ThemeSelector() {
const { theme, setTheme, themes } = useTheme();
return (
<IonItem>
<IonLabel>Seleziona tema</IonLabel>
<IonSelect value={theme} onIonChange={(e) => setTheme(e.detail.value)}>
{themes.map((t) => (
<IonSelectOption key={t} value={t}>
{t}
</IonSelectOption>
))}
</IonSelect>
</IonItem>
);
}

28
app/src/hooks/useTheme.tsx Normal file
View file

@ -0,0 +1,28 @@
// src/hooks/useTheme.ts
import { useEffect } from "react";
import { useAtom } from "jotai";
import { themeAtom } from "../atoms";
const ALL_THEMES = ["light", "dark", "red"];
export function useTheme() {
const [theme, setTheme] = useAtom(themeAtom);
useEffect(() => {
const body = document.body;
ALL_THEMES.forEach((t) => body.classList.remove(t));
body.classList.add(theme);
console.log('set ', theme)
}, [theme]);
const toggleTheme = () => {
setTheme((prev) => (prev === "light" ? "dark" : "light"));
};
return {
theme,
setTheme,
toggleTheme,
themes: ALL_THEMES,
};
}

11
app/src/main.tsx Normal file
View file

@ -0,0 +1,11 @@
import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';
const container = document.getElementById('root');
const root = createRoot(container!);
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);

81
app/src/mocks/index.tsx Normal file
View file

@ -0,0 +1,81 @@
export interface NowPlayingData {
coverUrl: string;
title: string;
artist: string;
color: string;
}
const nowPlayingMock: NowPlayingData = {
coverUrl: 'https://m.media-amazon.com/images/I/61ZE7JzxGgL._UXNaN_FMjpg_QL85_.jpg',
title: "Without Warning",
artist: "Kesha",
color: "#ff1012",
};
const QueueMock: NowPlayingData[] = [
{
coverUrl: "https://m.media-amazon.com/images/I/91YnHao9ZVL._SY200_QL15_.jpg",
title: "Eternal Groove",
artist: "Kesha",
color: "#FFD700", // oro
},
{
coverUrl: "https://upload.wikimedia.org/wikipedia/en/0/08/Future_56_Nights_%28mixtape%29.jpeg",
title: "56 Nights",
artist: "Future",
color: "#1E90FF", // blu intenso
},
{
coverUrl: "https://m.media-amazon.com/images/I/91YnHao9ZVL._SY200_QL15_.jpg",
title: "Eternal Groove",
artist: "Kesha",
color: "#FFD700",
},
{
coverUrl: "https://upload.wikimedia.org/wikipedia/en/0/08/Future_56_Nights_%28mixtape%29.jpeg",
title: "56 Nights",
artist: "Future",
color: "#1E90FF",
},
{
coverUrl: "https://m.media-amazon.com/images/I/91YnHao9ZVL._SY200_QL15_.jpg",
title: "Eternal Groove",
artist: "Kesha",
color: "#FFD700",
},
{
coverUrl: "https://upload.wikimedia.org/wikipedia/en/0/08/Future_56_Nights_%28mixtape%29.jpeg",
title: "56 Nights",
artist: "Future",
color: "#1E90FF",
},
{
coverUrl: "https://m.media-amazon.com/images/I/91YnHao9ZVL._SY200_QL15_.jpg",
title: "Eternal Groove",
artist: "Kesha",
color: "#FFD700",
},
{
coverUrl: "https://upload.wikimedia.org/wikipedia/en/0/08/Future_56_Nights_%28mixtape%29.jpeg",
title: "56 Nights",
artist: "Future",
color: "#1E90FF",
},
{
coverUrl: "https://m.media-amazon.com/images/I/91YnHao9ZVL._SY200_QL15_.jpg",
title: "Eternal Groove",
artist: "Kesha",
color: "#FFD700",
},
{
coverUrl: "https://upload.wikimedia.org/wikipedia/en/0/08/Future_56_Nights_%28mixtape%29.jpeg",
title: "56 Nights",
artist: "Future",
color: "#1E90FF",
},
];
export const mocks = {
nowPlaying: nowPlayingMock,
queue: QueueMock,
};

6
app/src/pages/Tab1.css Normal file
View file

@ -0,0 +1,6 @@
.tab-1-container {
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
}

30
app/src/pages/Tab1.tsx Normal file
View file

@ -0,0 +1,30 @@
import "./Tab1.css";
import { IonContent, IonPage } from "@ionic/react";
import { useAtom } from "jotai";
import { currentTrackAtom } from "../atoms";
import NowPlayingDisc from "../components/NowPlayingDisc";
const Tab1: React.FC = () => {
const [current] = useAtom(currentTrackAtom);
return (
<IonPage>
<IonContent fullscreen className="transparent-content">
<div className="tab-1-container">
{current && (
<NowPlayingDisc
coverUrl={current.coverUrl}
title={current.title}
artist={current.artist}
color={current.color}
/>
)}
</div>
</IonContent>
</IonPage>
);
};
export default Tab1;

0
app/src/pages/Tab2.css Normal file
View file

17
app/src/pages/Tab2.tsx Normal file
View file

@ -0,0 +1,17 @@
import Queue from '../components/Queue';
import { mocks } from '../mocks';
import './Tab2.css';
import { IonContent, IonPage } from '@ionic/react';
const Tab2: React.FC = () => {
return (
<IonPage>
<IonContent fullscreen className="transparent-content">
<Queue songs={mocks.queue} />
</IonContent>
</IonPage>
);
};
export default Tab2;

0
app/src/pages/Tab3.css Normal file
View file

31
app/src/pages/Tab3.tsx Normal file
View file

@ -0,0 +1,31 @@
import { IonContent, IonPage } from '@ionic/react';
import { useAtom } from 'jotai';
import React from 'react';
import { currentTrackAtom } from '../atoms';
import NowPlayingTab from '../components/NowPlayingTab';
import Queue from '../components/Queue';
import { mocks } from '../mocks';
const Tab: React.FC = () => {
const [current] = useAtom(currentTrackAtom);
const now = Date.now();
return (
<IonPage>
<IonContent fullscreen>
{current && (
<NowPlayingTab
data={current}
startTime={now - 15000} // es. iniziata 15 sec fa
duration={180000} // 3 minuti
/>
)}
<Queue songs={mocks.queue} />
</IonContent>
</IonPage>
);
};
export default Tab;

14
app/src/setupTests.ts Normal file
View file

@ -0,0 +1,14 @@
// jest-dom adds custom jest matchers for asserting on DOM nodes.
// allows you to do things like:
// expect(element).toHaveTextContent(/react/i)
// learn more: https://github.com/testing-library/jest-dom
import '@testing-library/jest-dom/extend-expect';
// Mock matchmedia
window.matchMedia = window.matchMedia || function() {
return {
matches: false,
addListener: function() {},
removeListener: function() {}
};
};

75
app/src/theme/variables.css Normal file
View file

@ -0,0 +1,75 @@
.transparent-content {
/* --background: transparent; */
/* --background: red */
}
:root {
--title-font-size: 1.5rem;
--artist-font-size: 1.2rem;
--cover-border: 6px solid var(--ion-color-tertiary);
--box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
--text: white;
--text-supporting: rgba(255, 255, 255, 0.8);
--text-shy: rgba(255, 255, 255, 0.6);
--text-muted: rgba(255, 255, 255, 0.4);
}
/* TEMA DI BASE (light) */
:root {
--ion-color-primary: #ff6f61; /* corallo caldo, energico */
--ion-color-secondary: #4a90e2; /* blu acceso, fresco */
--ion-color-tertiary: #f5a623; /* arancione luminoso, vivace */
--ion-color-success: #2ecc71; /* verde brillante, positivo */
--ion-color-warning: #f39c12; /* giallo oro, invitante */
--ion-color-danger: #e74c3c; /* rosso intenso, emozionante */
--ion-color-light: #fafafa; /* bianco sporco, morbido */
--ion-color-medium: #95a5a6; /* grigio neutro, equilibrato */
--ion-color-dark: #2c3e50; /* blu notte, elegante */
--ion-background-color: #1e1e1e; /* sfondo scuro per risaltare i contenuti */
--ion-text-color: #ffffff; /* testo bianco per leggibilità */
--ion-toolbar-background: #2c3e50; /* toolbar scura e raffinata */
--ion-toolbar-color: #ffffff; /* testo toolbar chiaro */
--ion-item-background: #34495e; /* background di elementi, tono medio */
}
/* TEMA SCURO */
body.dark {
--ion-color-primary: #222428;
--ion-color-secondary: #3dc2ff;
--ion-color-tertiary: #5260ff;
--ion-color-success: #2fdf75;
--ion-color-warning: #ffc409;
--ion-color-danger: #eb445a;
--ion-color-light: #1e1e1e;
--ion-color-medium: #92949c;
--ion-color-dark: #f4f5f8;
--ion-background-color: #121212;
--ion-text-color: #f4f4f4;
--ion-toolbar-background: #1f1f1f;
--ion-toolbar-color: #f4f4f4;
--ion-item-background: #1e1e1e;
}
/* TEMA ROSSO PERSONALIZZATO */
body.red {
--ion-color-primary: #ff4d4f;
--ion-color-secondary: #ffa39e;
--ion-color-tertiary: #d32029;
--ion-color-success: #52c41a;
--ion-color-warning: #faad14;
--ion-color-danger: #cf1322;
--ion-color-light: #fff1f0;
--ion-color-medium: #d9d9d9;
--ion-color-dark: #000000;
--ion-background-color: #fff2f0;
--ion-text-color: #330000;
--ion-toolbar-background: #fff1f0;
--ion-toolbar-color: #990000;
--ion-item-background: #fff0f0;
}

1
app/src/vite-env.d.ts vendored Normal file
View file

@ -0,0 +1 @@
/// <reference types="vite/client" />

21
app/tsconfig.json Normal file
View file

@ -0,0 +1,21 @@
{
"compilerOptions": {
"target": "ESNext",
"useDefineForClassFields": true,
"lib": ["DOM", "DOM.Iterable", "ESNext"],
"allowJs": false,
"skipLibCheck": true,
"esModuleInterop": false,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "ESNext",
"moduleResolution": "Node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
},
"include": ["src"],
"references": [{ "path": "./tsconfig.node.json" }]
}

9
app/tsconfig.node.json Normal file
View file

@ -0,0 +1,9 @@
{
"compilerOptions": {
"composite": true,
"module": "ESNext",
"moduleResolution": "Node",
"allowSyntheticDefaultImports": true
},
"include": ["vite.config.ts"]
}

18
app/vite.config.ts Normal file
View file

@ -0,0 +1,18 @@
/// <reference types="vitest" />
import legacy from '@vitejs/plugin-legacy'
import react from '@vitejs/plugin-react'
import { defineConfig } from 'vite'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
react(),
legacy()
],
test: {
globals: true,
environment: 'jsdom',
setupFiles: './src/setupTests.ts',
}
})