diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml index d2139f9..e9c8bfe 100644 --- a/.github/workflows/deploy.yml +++ b/.github/workflows/deploy.yml @@ -1,35 +1,35 @@ name: Deploy to GitHub Pages on: - push: - branches: [ main ] + push: + branches: [main] jobs: - deploy: - runs-on: ubuntu-latest - permissions: - contents: write # Needed to push to the gh-pages branch + deploy: + runs-on: ubuntu-latest + permissions: + contents: write # Needed to push to the gh-pages branch - steps: - - name: Checkout Code - uses: actions/checkout@v3 + steps: + - name: Checkout Code + uses: actions/checkout@v3 - - name: Setup Node.js - uses: actions/setup-node@v3 - with: - node-version: '22' - cache: 'npm' + - name: Setup Node.js + uses: actions/setup-node@v3 + with: + node-version: '22' + cache: 'npm' - - name: Install Dependencies - run: npm ci + - name: Install Dependencies + run: npm ci - - name: Build - run: npm run build + - name: Build + run: npm run build - - name: Deploy to GitHub Pages - uses: peaceiris/actions-gh-pages@v3 - with: - github_token: ${{ secrets.GITHUB_TOKEN }} - publish_dir: ./dist - publish_branch: deployed-ver - force_orphan: true + - name: Deploy to GitHub Pages + uses: peaceiris/actions-gh-pages@v3 + with: + github_token: ${{ secrets.GITHUB_TOKEN }} + publish_dir: ./dist + publish_branch: deployed-ver + force_orphan: true diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml new file mode 100644 index 0000000..c7a1671 --- /dev/null +++ b/.github/workflows/lint.yml @@ -0,0 +1,53 @@ +name: Lint Codebase + +on: + push: + branches: [main] + pull_request: + branches: [main] + +permissions: + contents: write + +jobs: + lint: + runs-on: ubuntu-latest + + steps: + - uses: actions/checkout@v4 + if: github.event_name == 'pull_request' + with: + ref: ${{ github.head_ref }} + repository: ${{ github.event.pull_request.head.repo.full_name }} + + - uses: actions/checkout@v4 + if: github.event_name != 'pull_request' + + - name: Use Node.js + uses: actions/setup-node@v4 + with: + node-version: '20' + cache: 'npm' + + - name: Install dependencies + run: npm ci + + - name: Fix JS Lint + run: npm run lint:js -- --fix + continue-on-error: true + + - name: Fix CSS Lint + run: npm run lint:css -- --fix + continue-on-error: true + + - name: Format with Prettier + run: npm run format + continue-on-error: true + + - name: Commit and Push changes + uses: stefanzweifel/git-auto-commit-action@v5 + with: + commit_message: 'style: auto-fix linting issues' + + - name: Run HTML Lint + run: npm run lint:html \ No newline at end of file diff --git a/.htmlhintignore b/.htmlhintignore new file mode 100644 index 0000000..2730e75 --- /dev/null +++ b/.htmlhintignore @@ -0,0 +1,3 @@ +dist/ +node_modules/ +legacy/ diff --git a/.htmlhintrc b/.htmlhintrc new file mode 100644 index 0000000..33b528e --- /dev/null +++ b/.htmlhintrc @@ -0,0 +1,12 @@ +{ + "tag-pair": true, + "tagname-lowercase": true, + "attr-lowercase": true, + "attr-value-double-quotes": true, + "doctype-first": true, + "id-unique": true, + "src-not-empty": true, + "alt-require": true, + "head-script-disabled": false, + "spec-char-escape": true +} diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 0000000..df8a97b --- /dev/null +++ b/.prettierignore @@ -0,0 +1,6 @@ +dist/ +node_modules/ +legacy/ +package-lock.json +*.min.js +.github/ \ No newline at end of file diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..b6c80cc --- /dev/null +++ b/.prettierrc @@ -0,0 +1,8 @@ +{ + "semi": true, + "singleQuote": true, + "tabWidth": 4, + "trailingComma": "es5", + "printWidth": 120, + "endOfLine": "auto" +} diff --git a/.stylelintrc.json b/.stylelintrc.json new file mode 100644 index 0000000..b828468 --- /dev/null +++ b/.stylelintrc.json @@ -0,0 +1,12 @@ +{ + "extends": "stylelint-config-standard", + "rules": { + "no-empty-source": null, + "selector-class-pattern": null, + "media-feature-range-notation": null, + "declaration-block-no-redundant-longhand-properties": null, + "color-function-notation": null, + "alpha-value-notation": null + }, + "ignoreFiles": ["dist/**/*.css", "node_modules/**/*.css", "legacy/**/*.css"] +} diff --git a/CONTRIBUTE.md b/CONTRIBUTE.md index 74b24a2..791e441 100644 --- a/CONTRIBUTE.md +++ b/CONTRIBUTE.md @@ -1,33 +1,57 @@ - # Development + This project uses [Vite](https://vitejs.dev/) for local development and optimized builds. ### Prerequisites + - [Node.js](https://nodejs.org/) (Version 20+ or 22+ recommended) ### Getting Started + 1. Install dependencies: - ```bash - npm install - ``` + ```bash + npm install + ``` 2. Start the development server: - ```bash - npm run dev - ``` - The app will be available at `http://localhost:5173/`. + ```bash + npm run dev + ``` + The app will be available at `http://localhost:5173/`. ### Why Vite? + - **Instant Updates**: Support for Hot Module Replacement (HMR) means changes to JS/CSS are reflected instantly in the browser. - **Dependency Management**: No more manual path tracking or broken internal imports. - **Automated PWA**: Service Worker generation and asset hashing are handled automatically. +## Code Quality & Linting + +We use a standard stack to ensure code quality and consistency: + +- **JS**: [ESLint](https://eslint.org/) +- **CSS**: [Stylelint](https://stylelint.io/) +- **HTML**: [HTMLHint](https://htmlhint.com/) +- **Formatting**: [Prettier](https://prettier.io/) + +### Commands + +- **Check everything:** `npm run lint` +- **Auto-format code:** `npm run format` (Runs Prettier) +- **Fix JS issues:** `npm run lint:js -- --fix` +- **Fix CSS issues:** `npm run lint:css -- --fix` + +> [!IMPORTANT] +> A GitHub Action automatically runs these checks on every push and pull request. Please ensure `npm run lint` passes before committing. + ## Project Structure + - `/js`: Application source code. - `/public`: Static assets (images, manifest, instances.json) that are copied directly to the build folder. - `index.html`: The entry point of the application. - `vite.config.js`: Build and PWA configuration. ## Deployment + Deployment is automated via **GitHub Actions**. > [!NOTE] diff --git a/INSTANCES.md b/INSTANCES.md index eebf78d..367adca 100644 --- a/INSTANCES.md +++ b/INSTANCES.md @@ -1,24 +1,22 @@ API: -| Provider | Instance URL | +| Provider | Instance URL | |----------------|---------------------------------| -| Monochrome | https://monochrome-api.samidy.com ([NOTE](https://rentry.co/monochromeapi)) | -| squid.wtf | https://triton.squid.wtf | -| Lucida (QQDL) | https://wolf.qqdl.site | -| | https://maus.qqdl.site | -| | https://vogel.qqdl.site | -| | https://katze.qqdl.site | -| | https://hund.qqdl.site | -| Kinoplus | https://tidal.kinoplus.online | -| Binimum | https://tidal-api.binimum.org | +| Monochrome | https://monochrome-api.samidy.com ([NOTE](https://rentry.co/monochromeapi)) | +| squid.wtf | https://triton.squid.wtf | +| Lucida (QQDL) | https://wolf.qqdl.site | +| | https://maus.qqdl.site | +| | https://vogel.qqdl.site | +| | https://katze.qqdl.site | +| | https://hund.qqdl.site | +| Kinoplus | https://tidal.kinoplus.online | +| Binimum | https://tidal-api.binimum.org | UI: -| Provider | Instance URL | +| Provider | Instance URL | |-------------------|------------------------------------| -| Monochrome | https://monochrome.samidy.com | -| tidal-ui (bini) | https://music.binimum.org | -| squid.wtf | https://tidal.squid.wtf | -| QQDL | https://tidal.qqdl.site/ | -| Arjix | https://music.arjix.dev/ | -| Spofree | https://spo.free.nf | - - +| Monochrome | https://monochrome.samidy.com | +| tidal-ui (bini) | https://music.binimum.org | +| squid.wtf | https://tidal.squid.wtf | +| QQDL | https://tidal.qqdl.site/ | +| Arjix | https://music.arjix.dev/ | +| Spofree | https://spo.free.nf | diff --git a/README.md b/README.md index 5c12f0f..0c36c0d 100644 --- a/README.md +++ b/README.md @@ -1,18 +1,38 @@

- Monochrome Logo + Monochrome Logo

-

Monochrome

-**Monochrome** is an open-source, privacy-respecting, ad-free [TIDAL](https://tidal.com) web UI, built on top of [Hi-Fi](https://github.com/sachinsenal0x64/hifi). +### **Monochrome** is an open-source, privacy-respecting, ad-free [TIDAL](https://tidal.com) web UI, built on top of [Hi-Fi](https://github.com/sachinsenal0x64/hifi). +
[Monochrome UI](https://monochrome.samidy.com/#album/378149557) - -Check it out live at: [**monochrome.samidy.com**](https://monochrome.samidy.com) + +### Features + + + +### Check it out live at: [**monochrome.samidy.com**](https://monochrome.samidy.com) + +
[![GitHub stars](https://img.shields.io/github/stars/SamidyFR/monochrome?style=for-the-badge&color=ffffff&labelColor=000000)](https://github.com/SamidyFR/monochrome/stargazers) [![GitHub forks](https://img.shields.io/github/forks/SamidyFR/monochrome?style=for-the-badge&color=ffffff&labelColor=000000)](https://github.com/SamidyFR/monochrome/forks) diff --git a/eslint.config.js b/eslint.config.js new file mode 100644 index 0000000..6b2eb91 --- /dev/null +++ b/eslint.config.js @@ -0,0 +1,25 @@ +import js from '@eslint/js'; +import globals from 'globals'; +import prettierConfig from 'eslint-config-prettier'; + +export default [ + { + ignores: ['dist/', 'node_modules/', 'legacy/', 'sw.js'], + }, + js.configs.recommended, + prettierConfig, + { + languageOptions: { + ecmaVersion: 2022, + sourceType: 'module', + globals: { + ...globals.browser, + ...globals.node, + }, + }, + rules: { + 'no-unused-vars': ['warn', { argsIgnorePattern: '^_' }], + 'no-console': ['warn', { allow: ['warn', 'error'] }], + }, + }, +]; diff --git a/firebase-setup.md b/firebase-setup.md index dfb509f..c65ee67 100644 --- a/firebase-setup.md +++ b/firebase-setup.md @@ -3,12 +3,14 @@ Follow these steps to enable cross-device synchronization for your library, history, and settings using your own Firebase project. ## 1. Create a Firebase Project + 1. Go to the [Firebase Console](https://console.firebase.google.com/). 2. Click **Add project** and give it a name (e.g., "Monochrome Sync"). 3. (Optional) Disable Gemini and Google Analytics if you want to keep it simple. 4. Click **Create project**. ## 2. Enable Authentication + 1. In the left sidebar, click **Build** > **Authentication**. 2. Click **Get Started**. 3. Go to the **Sign-in method** tab. @@ -16,63 +18,71 @@ Follow these steps to enable cross-device synchronization for your library, hist 5. Set your project support email and click **Save**. ### 2.1 Authorized Domains (CRITICAL) + Firebase will block login attempts from unknown domains. + 1. In the **Authentication** section, go to the **Settings** tab. 2. Click **Authorized domains** in the left sub-menu. 3. Click **Add domain**. 4. Add your hosting domain (e.g., `julienmaille.github.io`). - * *Note: `localhost` and `127.0.0.1` are usually added by default for local testing.* + - _Note: `localhost` and `127.0.0.1` are usually added by default for local testing._ ## 3. Enable Realtime Database + 1. In the left sidebar, click **Build** > **Realtime Database**. 2. Click **Create Database**. 3. Choose a location near you and click **Next**. 4. Select **Start in test mode** (we will change the rules in the next step) and click **Enable**. ## 4. Set Security Rules + 1. In the Realtime Database section, go to the **Rules** tab. 2. Replace the existing rules with the following to ensure users can only see their own data: + ```json { - "rules": { - "users": { - "$uid": { - ".read": "$uid === auth.uid", - ".write": "$uid === auth.uid" - } - }, - "public_playlists": { - ".read": true, - "$playlistId": { - ".write": "auth != null && (!data.exists() || data.child('uid').val() === auth.uid)" - } + "rules": { + "users": { + "$uid": { + ".read": "$uid === auth.uid", + ".write": "$uid === auth.uid" + } + }, + "public_playlists": { + ".read": true, + "$playlistId": { + ".write": "auth != null && (!data.exists() || data.child('uid').val() === auth.uid)" + } + } } - } } ``` - * **Note:** The `public_playlists` rule allows anyone to read the playlists. The write rule ensures that only authenticated users can publish, and only the owner (creator) of a playlist can modify or delete it. + + - **Note:** The `public_playlists` rule allows anyone to read the playlists. The write rule ensures that only authenticated users can publish, and only the owner (creator) of a playlist can modify or delete it. 3. Click **Publish**. ## 5. Get Your Configuration + 1. Click the gear icon (⚙️) next to "Project Overview" and select **Project settings**. 2. In the **General** tab, scroll down to "Your apps" and click the **Web icon (``)**. 3. Register the app (e.g., "Monochrome App"). 4. You will see a `firebaseConfig` object. It looks like this: ```javascript const firebaseConfig = { - apiKey: "AIzaSy...", - authDomain: "your-project.firebaseapp.com", - databaseURL: "https://your-project.firebaseio.com", - projectId: "your-project", - storageBucket: "your-project.appspot.com", - messagingSenderId: "...", - appId: "..." + apiKey: 'AIzaSy...', + authDomain: 'your-project.firebaseapp.com', + databaseURL: 'https://your-project.firebaseio.com', + projectId: 'your-project', + storageBucket: 'your-project.appspot.com', + messagingSenderId: '...', + appId: '...', }; ``` 5. **Copy only the part with the curly braces `{ ... }`**. ## 6. Configure Monochrome + 1. Open the Monochrome app and go to **Settings**. 2. Find the **Firebase Configuration** section. 3. Paste the JSON object you copied into the textarea. diff --git a/index.html b/index.html index e084ede..58bd7ab 100644 --- a/index.html +++ b/index.html @@ -1,999 +1,1806 @@ - + - - - - Monochrome Music - - - - - - - - - - - - - - - - -
- -
- -
-
-

Panel

-
- -
+ + + + Monochrome Music + + + + + + + + + + + + + + + + +
+
    +
  • Like
    • +
  • Add to Playlist
    • +
  • Track Mix
    • +
  • Play Next
    • +
  • Add to Queue
    • +
  • Download
    • +
-
- -
-
-