i got bored idk
This commit is contained in:
Samidy
parent
ce79d6d4c6
commit
4ce3bb42e0
8 changed files with 51 additions and 291 deletions
|
|
@ -26,14 +26,16 @@ Thank you for your interest in contributing to Monochrome! This guide will help
|
|||
|
||||
### Quick Start
|
||||
|
||||
1. **Fork and clone the repository:**
|
||||
1. Fork the Repository
|
||||
|
||||
2. clone the repository:
|
||||
|
||||
```bash
|
||||
git clone https://github.com/YOUR_USERNAME/monochrome.git
|
||||
cd monochrome
|
||||
```
|
||||
|
||||
2. **Install dependencies:**
|
||||
3. Install dependencies:
|
||||
|
||||
```bash
|
||||
bun install
|
||||
|
|
@ -41,7 +43,7 @@ Thank you for your interest in contributing to Monochrome! This guide will help
|
|||
npm install
|
||||
```
|
||||
|
||||
3. **Start the development server:**
|
||||
4. Start the development server:
|
||||
|
||||
```bash
|
||||
bun run dev
|
||||
|
|
@ -49,7 +51,7 @@ Thank you for your interest in contributing to Monochrome! This guide will help
|
|||
npm run dev
|
||||
```
|
||||
|
||||
4. **Open your browser:**
|
||||
5. Open your browser:
|
||||
Navigate to `http://localhost:5173/`
|
||||
|
||||
---
|
||||
|
|
@ -118,12 +120,12 @@ monochrome/
|
|||
- **`/js`** - All JavaScript source code
|
||||
- Keep modules focused and single-purpose
|
||||
- Use ES6+ features
|
||||
- Add JSDoc comments for complex functions
|
||||
- Keep the code easy to work with/maintain
|
||||
|
||||
- **`/public`** - Static assets copied directly to build
|
||||
- Images should be optimized before adding
|
||||
- Keep file sizes reasonable
|
||||
- Use appropriate formats (WebP where possible)
|
||||
- Use appropriate formats (PNG where possible)
|
||||
|
||||
---
|
||||
|
||||
|
|
|
|||
13
DOCKER.md
13
DOCKER.md
|
|
@ -10,19 +10,6 @@ docker compose up -d
|
|||
|
||||
Visit `http://localhost:3000`
|
||||
|
||||
### With PocketBase
|
||||
|
||||
```bash
|
||||
cp .env.example .env
|
||||
# Edit .env -- set PB_ADMIN_EMAIL and PB_ADMIN_PASSWORD
|
||||
docker compose --profile pocketbase up -d
|
||||
```
|
||||
|
||||
- Monochrome: `http://localhost:3000`
|
||||
- PocketBase admin: `http://localhost:8090/_/`
|
||||
|
||||
Configure PocketBase collections per [self-hosted-database.md](self-hosted-database.md).
|
||||
|
||||
### Development
|
||||
|
||||
```bash
|
||||
|
|
|
|||
13
INSTANCES.md
13
INSTANCES.md
|
|
@ -17,6 +17,14 @@ The official Monochrome instance maintained by the core team:
|
|||
|
||||
## Community Instances
|
||||
|
||||
### Community Monochrome Instances
|
||||
|
||||
These instances are community instances of Monochrome & its WebUI:
|
||||
|
||||
| Provider | URL | Status |
|
||||
| ------------- | ------------------------------------------- | --------- |
|
||||
| **Squid.WTF** | [mono.squid.wtf](https://mono.squid.wtf) | Community |
|
||||
|
||||
### UI-Only Instances
|
||||
|
||||
These instances provide the tidal-ui web interface, not monochrome:
|
||||
|
|
@ -42,7 +50,7 @@ These are available API endpoints that can be used with Monochrome or other Hi-F
|
|||
|
||||
| Provider | URL | Notes |
|
||||
| ----------------- | ----------------------------------- | ---------------------------------------------------------- |
|
||||
| **Monochrome** | `https://monochrome-api.samidy.com` | Official API - [See Note](https://rentry.co/monochromeapi) |
|
||||
| **Monochrome** | `https://monochrome-api.samidy.com` | Official API |
|
||||
| | `https://api.monochrome.tf` | Official API |
|
||||
| | `https://arran.monochrome.tf` | Official API |
|
||||
| **squid.wtf** | `https://triton.squid.wtf` | Community hosted |
|
||||
|
|
@ -95,6 +103,5 @@ Want to add your instance to this list?
|
|||
|
||||
## Related Resources
|
||||
|
||||
- [Self-Hosting Guide](self-hosted-database.md) - Host your own instance
|
||||
- [Contributing Guide](CONTRIBUTE.md) - Contribute to the project
|
||||
- [Main Repository](https://github.com/SamidyFR/monochrome) - Source code
|
||||
- [Main Repository](https://github.com/monochrome-music/monochrome) - Source code
|
||||
|
|
|
|||
40
README.md
40
README.md
|
|
@ -11,12 +11,11 @@
|
|||
</p>
|
||||
|
||||
<p align="center">
|
||||
<a href="https://monochrome.tf">Website</a> •
|
||||
<a href="https://ko-fi.com/monochromemusic">Donate</a> •
|
||||
<a href="#features">Features</a> •
|
||||
<a href="#installation">Installation</a> •
|
||||
<a href="#usage">Usage</a> •
|
||||
<a href="#self-hosting">Self-Hosting</a> •
|
||||
<a href="https://monochrome.tf">Website</a> -
|
||||
<a href="https://ko-fi.com/monochromemusic">Donate</a> -
|
||||
<a href="#features">Features</a> -
|
||||
<a href="#usage">Usage</a> -
|
||||
<a href="#self-hosting">Self-Hosting</a> -
|
||||
<a href="CONTRIBUTING.md">Contributing</a>
|
||||
</p>
|
||||
|
||||
|
|
@ -39,8 +38,14 @@
|
|||
**Monochrome** is an open-source, privacy-respecting, ad-free [TIDAL](https://tidal.com) web UI, built on top of [Hi-Fi](https://github.com/binimum/hifi-api). It provides a beautiful, minimalist interface for streaming high-quality music without the clutter of traditional streaming platforms.
|
||||
|
||||
<p align="center">
|
||||
<a href="https://monochrome.tf/#album/90502209">
|
||||
<img width="2559" height="1439" alt="image" src="https://github.com/user-attachments/assets/7973ea9f-c4aa-4c12-b476-f388f614db38" alt="Monochrome UI" width="800">
|
||||
<a href="https://monochrome.tf/album/90502209">
|
||||
<img width="2559" height="1439" alt="Image of 'NASIR' By Nas On Monochrome" src="https://i.samidy.xyz/NASIR.png" alt="Monochrome UI" width="800">
|
||||
</a>
|
||||
</p>
|
||||
|
||||
<p align="center">
|
||||
<a href="https://monochrome.tf/album/413189044">
|
||||
<img width="2559" height="1439" alt="Image of 'Jump Out' By Osamason On Monochrome" src="https://i.samidy.xyz/jumpout.png" alt="Monochrome UI" width="800">
|
||||
</a>
|
||||
</p>
|
||||
|
||||
|
|
@ -50,15 +55,16 @@
|
|||
|
||||
### Audio Quality
|
||||
|
||||
- High-quality Hi-Res/lossless audio streaming
|
||||
- High-quality High-Res/lossless audio streaming
|
||||
- Support for local music files
|
||||
- Intelligent API caching for improved performance
|
||||
- API caching for improved performance
|
||||
|
||||
### Interface
|
||||
|
||||
- Dark, minimalist interface optimized for focus
|
||||
- Customizable themes
|
||||
- Community Theme Store
|
||||
- Animated Album Covers For Supported Albums
|
||||
- High-quality Music Videos
|
||||
- Customizable themes & Community Theme Store
|
||||
- Accurate and unique audio visualizer
|
||||
- Offline-capable Progressive Web App (PWA)
|
||||
- Media Session API integration for system controls
|
||||
|
|
@ -71,6 +77,8 @@
|
|||
- Playlist import from other platforms
|
||||
- Public playlists for social sharing
|
||||
- Smart recommendations for new songs, albums & artists
|
||||
- Infinite Recommendation Radio
|
||||
- Explore Page (Hot & New) for discovering newly added music and whats trending overall or within each genre
|
||||
|
||||
### Lyrics & Metadata
|
||||
|
||||
|
|
@ -85,8 +93,10 @@
|
|||
- Last.fm and ListenBrainz integration for scrobbling
|
||||
- Unreleased music from [ArtistGrid](https://artistgrid.cx)
|
||||
- Dynamic Discord Embeds
|
||||
- Artist Biography + Social Links for learning more about your favorite artists
|
||||
- Multiple API instance support with failover
|
||||
|
||||
|
||||
### Power User Features
|
||||
|
||||
- Keyboard shortcuts & Command Palette (CTRL+K) for power users
|
||||
|
|
@ -107,7 +117,9 @@ For alternative instances, check [INSTANCES.md](INSTANCES.md).
|
|||
|
||||
## Self-Hosting
|
||||
|
||||
NOTE: We only allow authorized domains to use our firebase authentication system, so unless you switch to your own firebase project, accounts wont work.
|
||||
NOTE: Accounts will not work on self-hosted instances. Our Appwrite authentication system only allows authorized domains.
|
||||
|
||||
We had to heavily customize the authentication system and write several custom scripts to support features like SMTP and Google OAuth (which are currently bugged in Appwrite). Because of this, we can no longer provide a self-hostable accounts system.
|
||||
|
||||
### Option 1: Docker (Recommended)
|
||||
|
||||
|
|
@ -144,7 +156,7 @@ docker compose down
|
|||
docker compose up -d
|
||||
```
|
||||
|
||||
For PocketBase, development mode, and advanced setups, see [DOCKER.md](DOCKER.md).
|
||||
For development mode and advanced setups, see [DOCKER.md](DOCKER.md).
|
||||
|
||||
### Option 2: Manual Installation
|
||||
|
||||
|
|
|
|||
|
|
@ -5912,4 +5912,4 @@
|
|||
<script src="https://cdn.jsdelivr.net/npm/pocketbase@0.21.3/dist/pocketbase.umd.js"></script>
|
||||
<script type="module" src="/js/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
|
@ -1,6 +1,9 @@
|
|||
// js/qobuz-api.js
|
||||
// Qobuz API integration for Monochrome Music
|
||||
|
||||
|
||||
// LMFAOOOO this shit is useless now qobuz killing accounts every time a dude takes their breath
|
||||
|
||||
const QOBUZ_API_BASE = 'https://qobuz.squid.wtf/api';
|
||||
|
||||
export class QobuzAPI {
|
||||
|
|
|
|||
|
|
@ -5,12 +5,12 @@
|
|||
<link rel="icon" href="favicon.ico" type="image/x-icon" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Redirecting...</title>
|
||||
<meta http-equiv="refresh" content="0; URL='https://monochrome.binimum.org/legacy'" />
|
||||
<meta http-equiv="refresh" content="0; URL='https://legacy.monochrome.tf'" />
|
||||
<script>
|
||||
window.location.href = 'https://monochrome.binimum.org/legacy';
|
||||
window.location.href = 'https://legacy.monochrome.tf';
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<p>If you are not redirected, <a href="https://monochrome.binimum.org/legacy">click here</a>.</p>
|
||||
<p>If you are not redirected, <a href="https://legacy.monochrome.tf">click here</a>.</p>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,251 +0,0 @@
|
|||
# Self-Hosted Database Setup Guide
|
||||
|
||||
This guide will show you how to set up your own authentication system and database for Monochrome accounts.
|
||||
|
||||
> ⚠️ **Note:** You will need to enter the same configurations on each device where you want to use your custom database.
|
||||
|
||||
---
|
||||
|
||||
## Table of Contents
|
||||
|
||||
- [Prerequisites](#prerequisites)
|
||||
- [Step 1: Setup Firebase Authentication](#step-1-setup-firebase-authentication)
|
||||
- [Step 2: PocketBase Setup](#step-2-pocketbase-setup)
|
||||
- [Step 3: Cloudflare Tunnel Setup](#step-3-cloudflare-tunnel-setup)
|
||||
- [Step 4: Getting Configurations](#step-4-getting-configurations)
|
||||
- [Step 5: Linking with Monochrome](#step-5-linking-with-monochrome)
|
||||
- [Troubleshooting](#troubleshooting)
|
||||
|
||||
---
|
||||
|
||||
## Prerequisites
|
||||
|
||||
Before starting, ensure you have:
|
||||
|
||||
- A computer to host the database (can also use a VPS)
|
||||
- A [Firebase](https://firebase.google.com) account (for authentication only)
|
||||
- [PocketBase](https://pocketbase.io) installed on your host machine
|
||||
- A domain name (free options available at [DigitalPlat](https://domain.digitalplat.org/))
|
||||
|
||||
> 💡 **This guide assumes you're setting everything up on your local machine. The process is identical for a VPS.**
|
||||
|
||||
---
|
||||
|
||||
## Step 1: Setup Firebase Authentication
|
||||
|
||||
### 1.1 Create a Firebase Project
|
||||
|
||||
1. Go to the [Firebase Console](https://console.firebase.google.com)
|
||||
2. Create a new project
|
||||
3. On the left sidebar, click **Build** → **Authentication**
|
||||
4. Click **Get Started**
|
||||
|
||||
### 1.2 Enable Sign-in Methods
|
||||
|
||||
1. Go to the **Sign-in method** tab
|
||||
2. Enable **Google** and **Email** providers
|
||||
3. Set your project support email
|
||||
4. Click **Save**
|
||||
|
||||
### 1.3 Authorize Your Domain
|
||||
|
||||
Firebase requires authorized domains for authentication:
|
||||
|
||||
1. In **Authentication** → **Settings** → **Authorized domains**
|
||||
2. Click **Add domain**
|
||||
3. Add your hosting domain:
|
||||
- If using the official Monochrome site: `monochrome.samidy.com` or your preferred mirror (e.g., `monochrome.tf`)
|
||||
- If self-hosting the website: add your custom domain
|
||||
|
||||
> 💡 `localhost` is usually added by default for local testing. You can leave this enabled.
|
||||
|
||||
---
|
||||
|
||||
## Step 2: PocketBase Setup
|
||||
|
||||
### 2.1 Install and Configure
|
||||
|
||||
1. Download [PocketBase](https://pocketbase.io) and follow their setup guide
|
||||
2. Access the PocketBase Admin UI (typically at `http://127.0.0.1:8090/_/`)
|
||||
|
||||
### 2.2 Create Collections
|
||||
|
||||
Create two collections: `DB_users` and `public_playlists` (do NOT use the default "users" collection)
|
||||
|
||||
#### DB_users Fields
|
||||
|
||||
| Field Name | Type | Description |
|
||||
| --------------------- | --------------- | --------------------------------- |
|
||||
| `firebase_id` | Plain Text | Links to Firebase user ID |
|
||||
| `lastUpdated` | Number | Timestamp of last update |
|
||||
| `history` | JSON | User listening history |
|
||||
| `library` | JSON | User's saved library |
|
||||
| `user_playlists` | JSON | User's custom playlists |
|
||||
| `user_folders` | JSON | User's playlist folders |
|
||||
| `deleted_playlists` | JSON | Soft-deleted playlists |
|
||||
| `username` | Plain Text | Unique username |
|
||||
| `display_name` | Plain Text | Profile display name |
|
||||
| `avatar_url` | URL | Profile avatar URL |
|
||||
| `banner` | URL | Profile banner URL |
|
||||
| `status` | Plain Text | User status |
|
||||
| `about` | Plain Text | About me bio |
|
||||
| `website` | URL | Personal website URL |
|
||||
| `lastfm_username` | Plain Text | Last.fm username |
|
||||
| `privacy` | JSON | Privacy settings |
|
||||
| `profile_data_source` | Select (lastfm) | Preferred data source for profile |
|
||||
| `favorite_albums` | JSON | User's favorite albums |
|
||||
|
||||
#### public_playlists Fields
|
||||
|
||||
| Field Name | Type | Description |
|
||||
| ---------------- | ---------- | -------------------------- |
|
||||
| `firebase_id` | Plain Text | Creator's Firebase user ID |
|
||||
| `addedAt` | Number | Creation timestamp |
|
||||
| `numberOfTracks` | Number | Total track count |
|
||||
| `OriginalId` | Plain Text | Original playlist ID |
|
||||
| `publishedAt` | Number | Publication timestamp |
|
||||
| `title` | Plain Text | Playlist title |
|
||||
| `uid` | Plain Text | Unique identifier |
|
||||
| `uuid` | Plain Text | UUID for the playlist |
|
||||
| `tracks` | JSON | Playlist tracks data |
|
||||
| `image` | URL | Playlist cover image |
|
||||
|
||||
### 2.3 Configure API Rules
|
||||
|
||||
Set the API rules for both collections to allow read/write access:
|
||||
|
||||
**DB_users API Rules:**
|
||||
|
||||
- List/Search Rule: `firebase_id = @request.query.f_id || username != ""`
|
||||
- View Rule: `firebase_id = @request.query.f_id || username != ""`
|
||||
- Create Rule: `firebase_id = @request.query.f_id`
|
||||
- Update Rule: `firebase_id = @request.query.f_id`
|
||||
- Delete Rule: `firebase_id = @request.query.f_id`
|
||||
|
||||
**public_playlists API Rules:**
|
||||
|
||||
- List/Search Rule: `uuid = @request.query.p_id`
|
||||
- View Rule: `id != ""`
|
||||
- Create Rule: `firebase_id = @request.query.f_id`
|
||||
- Update Rule: `uid = @request.query.f_id`
|
||||
- Delete Rule: `uid = @request.query.f_id`
|
||||
|
||||
---
|
||||
|
||||
## Step 3: Cloudflare Tunnel Setup
|
||||
|
||||
To make your PocketBase instance accessible from other devices securely:
|
||||
|
||||
### 3.1 Create a Cloudflare Account
|
||||
|
||||
1. Sign up at the [Cloudflare Dashboard](https://dash.cloudflare.com)
|
||||
2. Set up **Zero Trust** (free plan available)
|
||||
|
||||
### 3.2 Create a Tunnel
|
||||
|
||||
1. In the Cloudflare dashboard, go to **Zero Trust** → **Networks** → **Connectors**
|
||||
2. Select **Cloudflared**
|
||||
3. Give your tunnel a name (e.g., `monochrome-database`)
|
||||
4. Follow the installation guide for your operating system
|
||||
|
||||
### 3.3 Configure Hostname
|
||||
|
||||
1. In the tunnel setup, add a **Public Hostname**
|
||||
2. **Subdomain:** Choose a subdomain (e.g., `db` for `db.yourdomain.com`)
|
||||
3. **Domain:** Select your domain from the dropdown
|
||||
4. **Service:** Select **HTTP**
|
||||
5. **URL:** Enter your PocketBase local address (e.g., `127.0.0.1:8090`)
|
||||
|
||||
> ⚠️ **Note:** Cloudflare requires a valid domain. Free `.pages.dev` domains won't work for this. Get a free domain at [DigitalPlat](https://domain.digitalplat.org/).
|
||||
|
||||
6. Save the configuration
|
||||
|
||||
Your database will now be accessible at your chosen domain!
|
||||
|
||||
---
|
||||
|
||||
## Step 4: Getting Configurations
|
||||
|
||||
### 4.1 Get Firebase Configuration
|
||||
|
||||
1. In the [Firebase Console](https://console.firebase.google.com), open your project
|
||||
2. Click the **⚙️ Settings** icon next to "Project Overview"
|
||||
3. Select **Project settings**
|
||||
4. In the **General** tab, scroll to "Your apps"
|
||||
5. Click the **Web icon** (`</>`)
|
||||
6. Register your app (e.g., "Monochrome Auth")
|
||||
7. Copy the `firebaseConfig` object:
|
||||
|
||||
```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: '...',
|
||||
};
|
||||
```
|
||||
|
||||
> ⚠️ **Copy only the object content inside the curly braces `{ ... }`**
|
||||
|
||||
### 4.2 Get Database URL
|
||||
|
||||
Simply copy your PocketBase domain from Cloudflare (e.g., `https://db.yourdomain.com`)
|
||||
|
||||
---
|
||||
|
||||
## Step 5: Linking with Monochrome
|
||||
|
||||
Now configure Monochrome to use your custom backend:
|
||||
|
||||
1. Open Monochrome in your browser
|
||||
2. Go to **Settings** (gear icon)
|
||||
3. Click **ADVANCED: Custom Account Database**
|
||||
4. Enter your configurations:
|
||||
- **Database Config:** Your PocketBase domain (e.g., `https://db.yourdomain.com`)
|
||||
- **Authentication Config:** The Firebase config JSON object from Step 4.1
|
||||
5. Click **Save**
|
||||
|
||||
✅ **Done!** Your Monochrome instance is now connected to your custom database.
|
||||
|
||||
> 📝 **Important:** Repeat Step 5 on every device where you want to use your custom database.
|
||||
|
||||
---
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
### Cannot sign in
|
||||
|
||||
- Ensure your domain is added to Firebase's authorized domains
|
||||
- Check that the Firebase config JSON is correctly formatted
|
||||
|
||||
### Database connection errors
|
||||
|
||||
- Verify your Cloudflare tunnel is running
|
||||
- Check that PocketBase is accessible at your domain
|
||||
- Ensure API rules are configured correctly
|
||||
|
||||
### Data not syncing
|
||||
|
||||
- Make sure you're signed in with the same account on all devices
|
||||
- Check the browser console for error messages
|
||||
- Verify your database collections have the correct fields
|
||||
|
||||
---
|
||||
|
||||
## Security Tips
|
||||
|
||||
- Keep your Firebase API key secure (it's okay to expose it for client-side auth, but don't share it unnecessarily)
|
||||
- Regularly backup your PocketBase database
|
||||
- Use strong, unique passwords for your Cloudflare and Firebase accounts
|
||||
- Consider enabling 2FA on all accounts
|
||||
|
||||
---
|
||||
|
||||
## Need Help?
|
||||
|
||||
- Join our [Discord community](https://monochrome.tf/discord) (if available)
|
||||
- Open an issue on [GitHub](https://github.com/monochrome-music/monochrome/issues)
|
||||
- Check existing [GitHub issues](https://github.com/monochrome-music/monochrome/issues) for solutions
|
||||
Loading…
Reference in a new issue