Front: Release Tracklist: Better colors for 'playing' + video icons

* tmp

* Front: Easy Gapless playback

* Front: Gapless Playback: Only between audio tracks

* Front: Settings: Crossfade

.env.example

@@ -1,3 +1,10 @@
+#################### Version
+# The version of meelo to use (edge, latest, vX.X.X)
+# See available tags here: https://hub.docker.com/r/arthichaud/meelo-front/tags
+# The default value is 'latest'
+# Please read the changelog before changing this value
+# https://github.com/Arthi-chaud/Meelo/releases
+TAG=
 #################### Database
 # The port on the host where meelo will be accessible
 PORT=
@@ -7,6 +14,10 @@ POSTGRES_USER=
 POSTGRES_PASSWORD=
 # Name of Meelo's database 
 POSTGRES_DB=
+# Username of Meelo's Message Queue 
+RABBITMQ_USER=
+# Password of Meelo's Message Queue 
+RABBITMQ_PASSWORD=
 #################### Config
 # The directory that contains the `settings.json` file (and where the illustrations will be stored) (on the host machine)
 CONFIG_DIR=
@@ -17,16 +28,19 @@ DATA_DIR=
 # This will not affect front-end behaviour
 ALLOW_ANONYMOUS=
 #################### Web app
-# URL of the server/api that would be accessible to the front app's server or any client
-# If PORT=5000, it should look like 'http://0.0.0.0:5000/api' (mind the '/api')
-PUBLIC_SERVER_URL=
+# Public URL to access Meelo, without trailing slash
+# Example: http://localhost:5000
+PUBLIC_URL=
 #################### Security
 # Random String used to sign JWT Tokens
 JWT_SIGNATURE=
 # Key used to authenticate the Meilisearch Instance
 # Should be a random string, must be at least 16 bytes
 MEILI_MASTER_KEY=
+# A coma-separated list of random strings used for internal authentication
+# Example: API_KEYS=azertyuip,qwertyuiop
+API_KEYS=
 #################### Internal
 # Do not change this
 INTERNAL_DATA_DIR=/data
-INTERNAL_CONFIG_DIR=/config
+INTERNAL_CONFIG_DIR=/config

.github/actions/cache-front/action.yml

@@ -12,5 +12,5 @@ runs:
           path: |
             ./front/node_modules
             ./front/.next
-          key: front
-          restore-keys: front
+          key: front-${{ hashFiles('front/yarn.lock') }}
+          restore-keys: front-

.github/actions/cache-matcher/action.yml

@@ -0,0 +1,20 @@
+name: 'Cache (Matcher)'
+description: 'Cache for Matcher'
+runs:
+  using: "composite"
+  steps:
+    - run: apk add --update --no-progress lsb-release python3 py3-pip tar
+      shell: sh
+    - run: mkdir ./pip-cache
+      shell: sh
+    - name: Cache
+      uses: actions/cache@v3
+      with:
+          path: |
+            ./pip-cache
+          key: matcher-${{ hashFiles('matcher/requirements.txt') }}
+          restore-keys: matcher-
+    - run: pip3 install -r matcher/requirements.txt
+      shell: sh
+      env:
+        PIP_CACHE_DIR: ./pip-cache

.github/actions/cache-scanner/action.yml

@@ -0,0 +1,16 @@
+name: 'Cache (Scanner)'
+description: 'Cache for Scanner'
+runs:
+  using: "composite"
+  steps:
+    - run: |
+        cd scanner
+        go install github.com/swaggo/swag/cmd/swag@latest
+        ~/go/bin/swag init -d app -o ./app/docs
+      shell: bash
+    - uses: actions/setup-go@v5
+      with:
+        check-latest: true
+        go-version-file: 'scanner/go.mod'
+        cache-dependency-path: scanner/go.sum
+        go-version: '1.24.1'

.github/actions/cache-server/action.yml

@@ -12,5 +12,5 @@ runs:
           path: |
             ./server/node_modules
             ./server/dist
-          key: server
-          restore-keys: server
+          key: server-${{ hashFiles('server/yarn.lock') }}
+          restore-keys: server-

.github/actions/dockerize/action.yml

@@ -0,0 +1,59 @@
+name: 'Dockerisation'
+description: 'Build using Docker, and publish if necessary'
+inputs:
+  docker-username: 
+    description: 'Username to publish Docker image under'
+    required: true
+  docker-token: 
+    description: 'Token to publish Docker image'
+    required: true
+  github-token:
+    description: 'GitHub Token'
+    required: true
+  image-suffix: 
+    description: "Suffix to 'meelo-'"
+    required: true
+  publish: 
+    description: 'Publish to registry'
+    default: 'false'
+  context: 
+    description: 'Directory of the Dockerfile'
+    required: true
+
+runs:
+  using: "composite"
+  steps: 
+    - name: Check out the repo
+      uses: actions/checkout@v3
+    - name: Log in to Docker Hub
+      uses: docker/login-action@v2
+      with:
+        username: ${{ inputs.docker-username }}
+        password: ${{ inputs.docker-token }}
+    - name: Log in to the GitHub Container registry
+      uses: docker/login-action@v2
+      with:
+        registry: ghcr.io
+        username: ${{ github.actor }}
+        password: ${{ inputs.github-token }}
+    - name: Set up QEMU
+      uses: docker/setup-qemu-action@v3
+    - name: Set up Docker Buildx
+      uses: docker/setup-buildx-action@v3
+    - name: Extract metadata (tags, labels) for Docker
+      id: meta
+      uses: docker/metadata-action@v4
+      with:
+        images: |
+          arthichaud/meelo-${{ inputs.image-suffix }}
+          ghcr.io/${{ github.repository }}-${{ inputs.image-suffix }}
+    - name: Build and push Docker images
+      uses: docker/build-push-action@v3
+      with:
+        context: ${{ inputs.context }} 
+        platforms: linux/amd64,linux/arm64
+        push: ${{ inputs.publish == 'true' || inputs.publish == true }}
+        cache-from: type=gha
+        cache-to: type=gha,mode=max
+        tags: ${{ github.event_name == 'release' && steps.meta.outputs.tags || format('arthichaud/meelo-{0}:edge', inputs.image-suffix) }}
+        labels: ${{ steps.meta.outputs.labels }}

.github/workflows/documentation.yml

@@ -1,40 +0,0 @@
-name: Documentation
-on:
-  push:
-    branches: [ main ]
-
-permissions:
-  contents: write
-
-jobs:
-  Changes:
-    runs-on: ubuntu-latest
-    permissions:
-      pull-requests: read
-    outputs:
-      docs: ${{ steps.filter.outputs.docs }}
-    steps:
-      - name: Check out the repo
-        uses: actions/checkout@v3
-      - uses: dorny/paths-filter@v2
-        id: filter
-        with:
-          filters: |
-            docs:
-              - 'docs/**'
-              - '.github/workflows/documentation.yml'
-              - 'assets/**'
-  Build:
-    needs: changes
-    name: Deploy
-    runs-on: ubuntu-latest
-    if: ${{ needs.changes.outputs.docs == 'true' }}
-    steps:
-      - name: Checkout main
-        uses: actions/checkout@v3
-      - name: Deploy docs
-        uses: mhausenblas/mkdocs-deploy-gh-pages@master
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          CONFIG_FILE: docs/mkdocs.yml
-          REQUIREMENTS: docs/requirements.txt

.github/workflows/front.yml

@@ -1,9 +1,9 @@
 name: "Front"
 on:
   pull_request:
-    branches: [ main, v2 ]
+    branches: [ main, v3 ]
   push:
-    branches: [ main, v2 ]
+    branches: [ main, v3 ]
   release:
     types: [ published ]
 
@@ -28,6 +28,7 @@ jobs:
             front:
               - 'front/**'
               - '.github/workflows/front.yml'
+              - '.github/actions/cache-front/**'
   Build:
     needs: changes
     if: ${{ needs.changes.outputs.front == 'true' && github.event_name == 'pull_request' }}
@@ -42,11 +43,14 @@ jobs:
         run: yarn install
       - name: Build
         run: yarn build
-  Lint:
+  Biome:
     if: ${{ needs.changes.outputs.front == 'true' && github.event_name == 'pull_request' }}
-    container: node:18-alpine3.18
+    container: node:22-alpine3.20
     runs-on: ubuntu-latest
     needs: [ Build ]
+    permissions:
+      contents: read
+      pull-requests: write
     steps:
       - name: Check out the repo
         uses: actions/checkout@v3
@@ -55,21 +59,7 @@ jobs:
       - name: Install Dependencies
         run: yarn install
       - name: Run Linter
-        run: yarn lint
-  Format:
-    if: ${{ needs.changes.outputs.front == 'true' && github.event_name == 'pull_request' }}
-    container: node:18-alpine3.18
-    runs-on: ubuntu-latest
-    needs: [ Build ]
-    steps:
-      - name: Check out the repo
-        uses: actions/checkout@v3
-      - name: Restore Dependencies
-        uses: ./.github/actions/cache-front
-      - name: Install Dependencies
-        run: yarn install
-      - name: Check Format
-        run: yarn prettier --check src
+        run: yarn run biome ci .
   Tests:
     runs-on: ubuntu-latest
     container: node:19-alpine
@@ -86,7 +76,7 @@ jobs:
         run: yarn test:cov
       - name: Upload Unit Tests artifact
         if: ${{ always() }}
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
           name: coverage-report-front
           path: ./front/coverage
@@ -98,75 +88,32 @@ jobs:
     steps:
       - uses: actions/checkout@v3
       - name: Downlad Coverage artifact
-        uses: actions/download-artifact@v3
+        uses: actions/download-artifact@v4
         with:
           name: coverage-report-front
           path: ./front/coverage
       - name: Run SonarCloud Scan
-        uses: SonarSource/sonarcloud-github-action@master
+        uses: SonarSource/sonarqube-scan-action@master
         with:
           projectBaseDir: ./front
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           SONAR_TOKEN: ${{ secrets.SONAR_TOKEN_FRONT }}
   Dockerize:
-    if: ${{ needs.changes.outputs.front == 'true' && github.event_name == 'pull_request' }}
-    needs: [ Build ]
     runs-on: ubuntu-latest
-    permissions:
-      packages: read
-      contents: read
-    steps:
-      - name: Check out the repo
-        uses: actions/checkout@v3
-      - name: Log in to Docker Hub
-        uses: docker/login-action@v2
-        with:
-          username: ${{ secrets.DOCKERHUB_USERNAME }}
-          password: ${{ secrets.DOCKERHUB_TOKEN }}
-      - name: Log in to the GitHub Container registry
-        uses: docker/login-action@v2
-        with:
-          registry: ghcr.io
-          username: ${{ github.actor }}
-          password: ${{ secrets.GITHUB_TOKEN }}
-      - name: Build Docker
-        uses: docker/build-push-action@v3
-        with:
-          context: ./front
-          push: false
-  Publish:
     needs: changes
-    runs-on: ubuntu-latest
-    if: ${{ github.event_name == 'release' || (needs.changes.outputs.front == 'true' && github.event_name == 'push' && github.ref == 'refs/heads/main') }}
+    if: ${{ github.event_name == 'release' || (needs.changes.outputs.front == 'true' && (github.event_name == 'pull_request' || (github.event_name == 'push' && github.ref == 'refs/heads/main'))) }}
     permissions:
       packages: write
       contents: read
     steps:
       - name: Check out the repo
         uses: actions/checkout@v3
-      - name: Log in to Docker Hub
-        uses: docker/login-action@v2
-        with:
-          username: ${{ secrets.DOCKERHUB_USERNAME }}
-          password: ${{ secrets.DOCKERHUB_TOKEN }}
-      - name: Log in to the GitHub Container registry
-        uses: docker/login-action@v2
-        with:
-          registry: ghcr.io
-          username: ${{ github.actor }}
-          password: ${{ secrets.GITHUB_TOKEN }}
-      - name: Extract metadata (tags, labels) for Docker
-        id: meta
-        uses: docker/metadata-action@v4
-        with:
-          images: |
-            arthichaud/meelo-front
-            ghcr.io/${{ github.repository }}-front
-      - name: Build and push Docker images
-        uses: docker/build-push-action@v3
-        with:
+      - uses: ./.github/actions/dockerize
+        with: 
+          docker-username: ${{ secrets.DOCKERHUB_USERNAME }}
+          docker-token: ${{ secrets.DOCKERHUB_TOKEN }}
+          github-token: ${{ secrets.GITHUB_TOKEN }}
           context: ./front
-          push: true
-          tags: ${{ github.event_name == 'release' && steps.meta.outputs.tags || 'arthichaud/meelo-front:edge' }}
-          labels: ${{ steps.meta.outputs.labels }}
+          image-suffix: front
+          publish: ${{ github.event_name == 'release' || (needs.changes.outputs.front == 'true' && github.event_name == 'push' && github.ref == 'refs/heads/main') }}

.github/workflows/matcher.yml

@@ -0,0 +1,90 @@
+name: "Matcher"
+on:
+  pull_request:
+    branches: [ main, v3 ]
+  push:
+    branches: [ main, v3 ]
+  release:
+    types: [ published ]
+
+defaults:
+  run:
+    working-directory: ./matcher
+
+jobs:
+  Changes:
+    runs-on: ubuntu-latest
+    permissions:
+      pull-requests: read
+    outputs:
+      matcher: ${{ steps.filter.outputs.matcher }}
+    steps:
+      - name: Check out the repo
+        uses: actions/checkout@v3
+      - uses: dorny/paths-filter@v2
+        id: filter
+        with:
+          filters: |
+            matcher:
+              - 'matcher/**'
+              - '.github/workflows/matcher.yml'
+              - '.github/actions/cache-matcher/**'
+  Typecheck:
+    needs: changes
+    if: ${{ needs.changes.outputs.matcher == 'true' && github.event_name == 'pull_request' }}
+    container: python:3.14.0a2-alpine3.21
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out the repo
+        uses: actions/checkout@v3
+      - name: Restore Dependencies
+        uses: ./.github/actions/cache-matcher
+      - uses: jakebailey/pyright-action@v2
+        with: 
+          working-directory: './matcher/matcher'
+  Lint:
+    if: ${{ needs.changes.outputs.matcher == 'true' && github.event_name == 'pull_request' }}
+    container: python:3.14.0a2-alpine3.21
+    runs-on: ubuntu-latest
+    needs: [ Typecheck ]
+    steps:
+      - name: Check out the repo
+        uses: actions/checkout@v3
+      - name: Restore Dependencies
+        uses: ./.github/actions/cache-matcher
+      - run: pip install ruff
+      - run: ruff check matcher
+  Tests:
+    runs-on: ubuntu-latest
+    needs: [ Typecheck ]
+    container: python:3.14.0a2-alpine3.21
+    if: ${{ needs.changes.outputs.matcher == 'true' && always() }}
+    env:
+      GENIUS_ACCESS_TOKEN: "${{ secrets.GENIUS_ACCESS_TOKEN }}"
+      DISCOGS_ACCESS_TOKEN: "${{ secrets.DISCOGS_ACCESS_TOKEN }}"
+      CI: "1"
+    steps:
+      - name: Check out the repo
+        uses: actions/checkout@v3
+      - name: Restore Dependencies
+        uses: ./.github/actions/cache-matcher
+      - run: python3 -m tests 
+  Dockerize:
+    runs-on: ubuntu-latest
+    needs: changes
+    if: ${{ github.event_name == 'release' || (needs.changes.outputs.matcher == 'true' && (github.event_name == 'pull_request' || (github.event_name == 'push' && github.ref == 'refs/heads/main'))) }}
+    permissions:
+      packages: write
+      contents: read
+    steps:
+      - name: Check out the repo
+        uses: actions/checkout@v3
+      - uses: ./.github/actions/dockerize
+        with: 
+          docker-username: ${{ secrets.DOCKERHUB_USERNAME }}
+          docker-token: ${{ secrets.DOCKERHUB_TOKEN }}
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          context: ./matcher
+          image-suffix: matcher
+          publish: ${{ github.event_name == 'release' || (needs.changes.outputs.matcher == 'true' && github.event_name == 'push' && github.ref == 'refs/heads/main') }}
+

.github/workflows/scanner.yml

@@ -0,0 +1,113 @@
+name: "Scanner"
+on:
+  pull_request:
+    branches: [ main, v3 ]
+  push:
+    branches: [ main, v3 ]
+  release:
+    types: [ published ]
+
+defaults:
+  run:
+    shell: bash
+    working-directory: ./scanner
+
+jobs:
+  Changes:
+    runs-on: ubuntu-latest
+    permissions:
+      pull-requests: read
+    outputs:
+      scanner: ${{ steps.filter.outputs.scanner }}
+    steps:
+      - name: Check out the repo
+        uses: actions/checkout@v4
+      - uses: dorny/paths-filter@v3
+        id: filter
+        with:
+          filters: |
+            scanner:
+              - 'scanner/**'
+              - '.github/workflows/scanner.yml'
+  Build:
+    needs: changes
+    if: ${{ needs.changes.outputs.scanner == 'true' && github.event_name == 'pull_request' }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out the repo
+        uses: actions/checkout@v4
+      - name: Setup Go
+        uses: ./.github/actions/cache-scanner
+      - name: Install Dependencies and Build
+        run: go build -o scanner ./app
+  Format:
+    if: ${{ needs.changes.outputs.scanner == 'true' && github.event_name == 'pull_request' }}
+    runs-on: ubuntu-latest
+    needs: [ Build ]
+    steps:
+      - name: Check out the repo
+        uses: actions/checkout@v4
+      - name: Setup Go
+        uses: ./.github/actions/cache-scanner
+      - uses: Jerome1337/gofmt-action@v1.0.5
+        with:
+          gofmt-path: './scanner'
+          gofmt-flags: '-l'
+  Tests:
+    runs-on: ubuntu-latest
+    needs: [ Build ]
+    if: ${{ needs.changes.outputs.scanner == 'true' && always() }}
+    steps:
+      - name: Check out the repo
+        uses: actions/checkout@v4
+      - name: Setup Go
+        uses: ./.github/actions/cache-scanner
+      - run: sudo apt-get update -y && sudo apt-get install -y ffmpeg
+      - name: Install Coverage Report
+        run: go install github.com/jandelgado/gcov2lcov@latest
+      - name: Run tests
+        run: go test ./... -coverprofile=coverage.out
+      - name: Upload Unit Tests artifact
+        if: ${{ always() }}
+        uses: actions/upload-artifact@v4
+        with:
+          name: coverage-report-scanner
+          path: ./scanner/coverage.out
+  Analysis:
+    needs: [ Tests ]
+    name: "Static Analysis"
+    runs-on: ubuntu-latest
+    if: ${{ needs.changes.outputs.scanner == 'true' && always() }}
+    steps:
+      - uses: actions/checkout@v4
+      - name: Downlad Coverage artifact
+        uses: actions/download-artifact@v4
+        with:
+          name: coverage-report-scanner
+          path: ./scanner
+      - name: Run SonarCloud Scan
+        uses: SonarSource/sonarqube-scan-action@master
+        with:
+          projectBaseDir: ./scanner
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          SONAR_TOKEN: ${{ secrets.SONAR_TOKEN_SCANNER }}
+  Dockerize:
+    runs-on: ubuntu-latest
+    needs: changes
+    if: ${{ github.event_name == 'release' || (needs.changes.outputs.scanner == 'true' && (github.event_name == 'pull_request' || (github.event_name == 'push' && github.ref == 'refs/heads/main'))) }}
+    permissions:
+      packages: write
+      contents: read
+    steps:
+      - name: Check out the repo
+        uses: actions/checkout@v3
+      - uses: ./.github/actions/dockerize
+        with: 
+          docker-username: ${{ secrets.DOCKERHUB_USERNAME }}
+          docker-token: ${{ secrets.DOCKERHUB_TOKEN }}
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          context: ./scanner
+          image-suffix: scanner
+          publish: ${{ github.event_name == 'release' || (needs.changes.outputs.scanner == 'true' && github.event_name == 'push' && github.ref == 'refs/heads/main') }}
+

.github/workflows/server.yml

@@ -1,9 +1,9 @@
 name: "Server"
 on:
   pull_request:
-    branches: [ main, v2 ]
+    branches: [ main, v3 ]
   push:
-    branches: [ main, v2 ]
+    branches: [ main, v3 ]
   release:
     types: [ published ]
 
@@ -28,10 +28,11 @@ jobs:
             server:
               - 'server/**'
               - '.github/workflows/server.yml'
+              - '.github/actions/cache-server/**'
   Build:
     needs: changes
     if: ${{ needs.changes.outputs.server == 'true' && github.event_name == 'pull_request' }}
-    container: node:18-alpine3.18
+    container: node:22-alpine3.20
     runs-on: ubuntu-latest
     steps:
       - name: Check out the repo
@@ -42,11 +43,14 @@ jobs:
         run: yarn install
       - name: Build
         run: yarn build
-  Lint:
+  Biome:
     if: ${{ needs.changes.outputs.server == 'true' && github.event_name == 'pull_request' }}
-    container: node:18-alpine3.18
+    container: node:22-alpine3.20
     runs-on: ubuntu-latest
     needs: [ Build ]
+    permissions:
+      contents: read
+      pull-requests: write
     steps:
       - name: Check out the repo
         uses: actions/checkout@v3
@@ -55,29 +59,14 @@ jobs:
       - name: Install Dependencies
         run: yarn install
       - name: Run Linter
-        run: yarn lint
-  Format:
-    if: ${{ needs.changes.outputs.server == 'true' && github.event_name == 'pull_request' }}
-    container: node:18-alpine3.18
-    runs-on: ubuntu-latest
-    needs: [ Build ]
-    steps:
-      - name: Check out the repo
-        uses: actions/checkout@v3
-      - name: Restore Dependencies
-        uses: ./.github/actions/cache-server
-      - name: Install Dependencies
-        run: yarn install
-      - name: Check Format
-        run: yarn prettier --check src
+        run: yarn run biome ci .
   Tests:
     runs-on: ubuntu-latest
-    container: node:18-alpine3.18
+    container: node:22-alpine3.20
     needs: [ Build ]
     if: ${{ needs.changes.outputs.server == 'true' && always() }}
     env:
       NODE_OPTIONS: "--max_old_space_size=4096"
-      REDIS_HOST: "redis"
       DATABASE_URL: "postgresql://test:test@postgres:5432/test?schema=public"
       JWT_SIGNATURE: "12345"
       GENIUS_ACCESS_TOKEN: "${{ secrets.GENIUS_ACCESS_TOKEN }}"
@@ -97,15 +86,6 @@ jobs:
           --health-interval 10s
           --health-timeout 5s
           --health-retries 5
-      redis:
-        image: redis:7.0-alpine
-        ports:
-          - 6379:6379
-        options: >-
-          --health-cmd "redis-cli ping"
-          --health-interval 10s
-          --health-timeout 5s
-          --health-retries 5
       meilisearch:
         image: getmeili/meilisearch:v1.5
         ports:
@@ -125,7 +105,7 @@ jobs:
         run: yarn --cwd server test --coverage --ci --no-cache --maxConcurrency=1
       - name: Upload Unit Tests artifact
         if: ${{ always() }}
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
           name: coverage-report-server
           path: ./server/coverage
@@ -137,75 +117,32 @@ jobs:
     steps:
       - uses: actions/checkout@v3
       - name: Downlad Coverage artifact
-        uses: actions/download-artifact@v3
+        uses: actions/download-artifact@v4
         with:
           name: coverage-report-server
           path: ./server/coverage
       - name: Run SonarCloud Scan
-        uses: SonarSource/sonarcloud-github-action@master
+        uses: SonarSource/sonarqube-scan-action@master
         with:
           projectBaseDir: ./server
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           SONAR_TOKEN: ${{ secrets.SONAR_TOKEN_BACK }}
   Dockerize:
-    if: ${{ needs.changes.outputs.server == 'true' && github.event_name == 'pull_request' }}
-    needs: [ Build ]
     runs-on: ubuntu-latest
-    permissions:
-      packages: read
-      contents: read
-    steps:
-      - name: Check out the repo
-        uses: actions/checkout@v3
-      - name: Log in to Docker Hub
-        uses: docker/login-action@v2
-        with:
-          username: ${{ secrets.DOCKERHUB_USERNAME }}
-          password: ${{ secrets.DOCKERHUB_TOKEN }}
-      - name: Log in to the GitHub Container registry
-        uses: docker/login-action@v2
-        with:
-          registry: ghcr.io
-          username: ${{ github.actor }}
-          password: ${{ secrets.GITHUB_TOKEN }}
-      - name: Build Docker
-        uses: docker/build-push-action@v3
-        with:
-          context: ./server
-          push: false
-  Publish:
     needs: changes
-    runs-on: ubuntu-latest
-    if: ${{ github.event_name == 'release' || (needs.changes.outputs.server == 'true' && github.event_name == 'push' && github.ref == 'refs/heads/main') }}
+    if: ${{ github.event_name == 'release' || (needs.changes.outputs.server == 'true' && (github.event_name == 'pull_request' || (github.event_name == 'push' && github.ref == 'refs/heads/main'))) }}
     permissions:
       packages: write
       contents: read
     steps:
       - name: Check out the repo
         uses: actions/checkout@v3
-      - name: Log in to Docker Hub
-        uses: docker/login-action@v2
-        with:
-          username: ${{ secrets.DOCKERHUB_USERNAME }}
-          password: ${{ secrets.DOCKERHUB_TOKEN }}
-      - name: Log in to the GitHub Container registry
-        uses: docker/login-action@v2
-        with:
-          registry: ghcr.io
-          username: ${{ github.actor }}
-          password: ${{ secrets.GITHUB_TOKEN }}
-      - name: Extract metadata (tags, labels) for Docker
-        id: meta
-        uses: docker/metadata-action@v4
-        with:
-          images: |
-            arthichaud/meelo-server
-            ghcr.io/${{ github.repository }}-server
-      - name: Build and push Docker images
-        uses: docker/build-push-action@v3
-        with:
+      - uses: ./.github/actions/dockerize
+        with: 
+          docker-username: ${{ secrets.DOCKERHUB_USERNAME }}
+          docker-token: ${{ secrets.DOCKERHUB_TOKEN }}
+          github-token: ${{ secrets.GITHUB_TOKEN }}
           context: ./server
-          push: true
-          tags: ${{ github.event_name == 'release' && steps.meta.outputs.tags || 'arthichaud/meelo-server:edge' }}
-          labels: ${{ steps.meta.outputs.labels }}
+          image-suffix: server
+          publish: ${{ github.event_name == 'release' || (needs.changes.outputs.server == 'true' && github.event_name == 'push' && github.ref == 'refs/heads/main') }}

README.md

@@ -1,4 +1,4 @@
-# <img alt="Icon" src="./front/public/banner.png" width="150px">
+# <img alt="Icon" src="./front/public/banner1-white.png" width="150px">
 
 Welcome! Meelo is a self-hosted music server and web app. It works similarly to Plex, Jellyfin, Koel and Black Candy, but focuses on flexibility, browsing and listening experiences. Actually, Meelo is designed for music collectors. What does it mean? Scroll down to see our killer features :arrow_heading_down:
 
@@ -10,8 +10,8 @@ While the software wants to be a flexible as possible, it requires a little bit
 
 Meelo has all the basic features you might expect from a music player/server (playback, browsing, search, playlists, libraries ...). But it comes with a handful of features that make it unique :star_struck:
 
-- Music Videos
-  - Access them directly from an album's or an artist's page
+- Music Videos are first-class citizens
+  - Access them directly from an album's, artist's or song's page
   - We also differentiate music video from interviews, behind-the-scenes, trailers...
 - Identifies B-Sides
   - Meelo shows you any tracks that could be related to an album directly on the album's page!
@@ -26,6 +26,7 @@ Meelo has all the basic features you might expect from a music player/server (pl
   - It is pretty much the same as for albums and releases
   - No duplicated songs when browsing your library!
 - Song Versions
+- Browse Songs [grouped by version](./assets/examples/song-groups.png)
 - Album and Song types
   - Finding instrumental songs or live recordings has never been this simple!
 - Filter Songs that are exclusive to an album (compilations only)
@@ -36,7 +37,7 @@ Meelo has all the basic features you might expect from a music player/server (pl
   - Use either the embedded metadata or the file's name (or both!) to extract metadata
   - Also works with album covers!
 - Get genres, descriptions, and ratings using MusicBrainz, Genius, Wikipedia and many more providers!
-- Download lyrics
+- Download (synced) lyrics or get them from embedded metadata and `.lrc` files
 
 Keep track of the upcoming features [here](https://github.com/Arthi-chaud/Meelo/issues)
 
@@ -45,7 +46,7 @@ Keep track of the upcoming features [here](https://github.com/Arthi-chaud/Meelo/
 To use Meelo, you'll need a 'clean' collection: either with embedded metadata or standard file/folder architecture. Using iTunes or Beets is a great way to start.
 
 Meelo is shipped though Docker images. You might need to know a bit about Regexes.
-Look over [here](https://arthi-chaud.github.io/Meelo/) for setup instructions.
+Look over [here](https://github.com/Arthi-chaud/Meelo/wiki) for setup instructions.
 
 ## :desktop_computer: Live Demo
 
@@ -56,10 +57,15 @@ We are actively working on a public demo, so that you can try out Meelo. Stay tu
 <details>
   <summary>Unfold to see what the web application looks like!</summary>
 
+https://github.com/user-attachments/assets/48141241-25ec-4570-a4f1-696c0cdfcaaa
+
+---
+
 ![Album View](./assets/examples/album-page.png)
 ![Artist Page](./assets/examples/artist-page.png)
 ![Player Page](./assets/examples/player.png)
 ![Release Page](./assets/examples/releases.png)
+![Synced Lyrics](./assets/examples/synced-lyrics.gif)
 
 More screenshots [here](./assets/examples/)
 
@@ -67,12 +73,14 @@ More screenshots [here](./assets/examples/)
 
 ## :handshake: Contributing and Bugs reporting
 
-:hammer: Would you like to contribute to Meelo? Feel free to [open a pull request](https://github.com/Arthi-chaud/Meelo/compare).
-
 :thinking: Is there a feature you would like to have? [Open an issue](https://github.com/Arthi-chaud/Meelo/issues/new/choose), and we will be happy to discuss it!
 
+:wrench: Need help with the setup process? Open a discussion [here](https://github.com/Arthi-chaud/Meelo/discussions/categories/need-help-with-setting-up).
+
 :bug: Have you encountered a bug? Ugh we don't like 'em here! Report it by [opening an issue](https://github.com/Arthi-chaud/Meelo/issues/new/choose).
 
+:hammer: Would you like to contribute to Meelo? Feel free to [open a pull request](https://github.com/Arthi-chaud/Meelo/compare).
+
 ---
 
 Get ready to make the most out of you music collection!

biome.json

@@ -0,0 +1,50 @@
+{
+	"$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
+	"vcs": {
+		"enabled": false,
+		"clientKind": "git",
+		"useIgnoreFile": true,
+		"defaultBranch": "main"
+	},
+	"files": {
+		"ignore": ["**/.yarn/**", "**/dist/**", "**/package.json"]
+	},
+	"formatter": {
+		"enabled": true,
+		"indentStyle": "tab",
+		"indentWidth": 4
+	},
+	"organizeImports": {
+		"enabled": true
+	},
+	"linter": {
+		"enabled": true,
+		"rules": {
+			"recommended": true,
+			"style": {
+				"noParameterAssign": "off"
+			},
+			"performance": {
+				"noAccumulatingSpread": "off"
+			},
+			"complexity": {
+				"noBannedTypes": "off"
+			},
+			"suspicious": {
+				"noExplicitAny": "off",
+				"noConsole": "error"
+			},
+			"correctness": {
+				"noUnusedImports": "warn"
+			}
+		}
+	},
+	"javascript": {
+		"formatter": {
+			"quoteStyle": "double"
+		},
+		"parser": {
+			"unsafeParameterDecoratorsEnabled": true
+		}
+	}
+}

docker-compose.dev.yml

@@ -10,12 +10,20 @@ services:
     depends_on:
       db:
         condition: service_healthy
+      mq:
+        condition: service_healthy
+    healthcheck:
+      test: ["CMD-SHELL", "wget -qO- localhost:4000"]
+      interval: 5s
+      timeout: 5s
+      retries: 10
     volumes:
       - ./server/src:/app/src
       - ./server/prisma:/app/prisma
       - ./server/test:/app/test
       - ./server/package.json:/app/package.json
       - ./server/.yarn:/app/.yarn
+      - server_deps:/app/node_modules
       - ./server/.yarnrc.yml:/app/.yarnrc.yml
       - ./server/tsconfig.json:/app/tsconfig.json
       - ./server/tsconfig.build.json:/app/tsconfig.build.json
@@ -26,16 +34,44 @@ services:
       - .env
     environment:
       - TRANSCODER_URL=http://transcoder:7666
-      - POSTGRES_HOST=db
       - MEILI_HOST=http://meilisearch:7700
-      - REDIS_HOST=redis
-      - DATABASE_URL=postgresql://${POSTGRES_USER}:${POSTGRES_PASSWORD}@${POSTGRES_HOST}:5432/${POSTGRES_DB}?schema=public
+      - RABBITMQ_URL=amqp://${RABBITMQ_USER}:${RABBITMQ_PASSWORD}@mq:5672
+      - DATABASE_URL=postgresql://${POSTGRES_USER}:${POSTGRES_PASSWORD}@db:5432/${POSTGRES_DB}?schema=public
+  scanner:
+    build:
+      context: ./scanner
+      dockerfile: Dockerfile.dev
+    restart: on-failure
+    depends_on:
+      server:
+        condition: service_healthy
+    healthcheck:
+      test: ["CMD-SHELL", "wget -qO- localhost:8133"]
+      interval: 5s
+      timeout: 5s
+      retries: 5
+    ports:
+      - "8133:8133"
+    environment:
+      - API_URL=http://server:4000
+      - INTERNAL_CONFIG_DIR=${INTERNAL_CONFIG_DIR}
+      - INTERNAL_DATA_DIR=${INTERNAL_DATA_DIR}
+      - API_KEYS=${API_KEYS}
+    volumes:
+      - ./scanner:/app
+      - ${DATA_DIR}:${INTERNAL_DATA_DIR}:ro
+      - ${CONFIG_DIR}:${INTERNAL_CONFIG_DIR}:ro
   front:
     build:
       context: ./front
       dockerfile: Dockerfile.dev
     ports:
       - "3000:3000"
+    depends_on:
+      server:
+        condition: service_healthy
+      scanner:
+        condition: service_healthy
     volumes:
       - ./front/src:/app/src
       - ./front/public:/app/public
@@ -43,17 +79,30 @@ services:
       - ./front/package.json:/app/package.json
       - ./front/tsconfig.json:/app/tsconfig.json
       - ./front/yarn.lock:/app/yarn.lock
+      - front_deps:/app/node_modules
     environment:
       # This can be commented out. see front/next.config.js
       - PUBLIC_SERVER_URL=http://localhost:4000
       - SSR_SERVER_URL=http://server:4000
-  redis:
-    image: redis:7.0-alpine
-    healthcheck:
-      test: ["CMD", "redis-cli","ping"]
-      interval: 5s
-      timeout: 5s
-      retries: 5
+      - PUBLIC_SCANNER_URL=http://localhost:8133
+      - SSR_SCANNER_URL=http://scanner:8133
+  matcher:
+    build:
+      context: ./matcher
+    restart: on-failure
+    depends_on:
+      server:
+        condition: service_healthy
+      mq:
+        condition: service_healthy
+    environment:
+      - API_URL=http://server:4000
+      - INTERNAL_CONFIG_DIR=${INTERNAL_CONFIG_DIR}
+      - API_KEYS=${API_KEYS}
+      - RABBITMQ_URL=amqp://${RABBITMQ_USER}:${RABBITMQ_PASSWORD}@mq:5672
+    volumes:
+      - ./matcher:/app
+      - ${CONFIG_DIR}:${INTERNAL_CONFIG_DIR}:ro
   meilisearch:
     image: getmeili/meilisearch:v1.5
     restart: on-failure
@@ -64,6 +113,7 @@ services:
     environment:
       - MEILI_ENV=development
       - MEILI_MASTER_KEY=${MEILI_MASTER_KEY}
+      - MEILI_LOG_LEVEL=WARN
     healthcheck:
       test: ["CMD", "wget", "--no-verbose", "--spider", "http://0.0.0.0:7700/health"]
       timeout: 5s
@@ -84,7 +134,9 @@ services:
     volumes:
       - ${DATA_DIR}:${INTERNAL_DATA_DIR}:ro
       - transcoder_cache:/cache
-    profiles: ['', 'cpu']
+    depends_on:
+      db:
+        condition: service_healthy
   db:
     image: postgres:alpine3.16
     healthcheck:
@@ -94,7 +146,22 @@ services:
       retries: 5
     env_file:
       - .env
-
+  mq:
+    image: rabbitmq:4.0-alpine
+    environment:
+      - RABBITMQ_NODENAME=meelo
+      - RABBITMQ_DEFAULT_USER=${RABBITMQ_USER}
+      - RABBITMQ_DEFAULT_PASS=${RABBITMQ_PASSWORD}
+    healthcheck:
+      test: rabbitmq-diagnostics -q ping
+      interval: 5s
+      timeout: 5s
+      retries: 10
+    volumes:
+      - rabbitmq_data:/var/lib/rabbitmq
 volumes:
   search:
-  transcoder_cache:
+  transcoder_cache:
+  front_deps:
+  server_deps:
+  rabbitmq_data:

docker-compose.prod.yml

@@ -1,7 +1,7 @@
 # This compose allows to setup the whole project in the production environment 
 services:
   server:
-    image: ghcr.io/arthi-chaud/meelo-server:latest
+    image: arthichaud/meelo-server:${TAG:-latest}
     expose:
       - 4000
     restart: on-failure
@@ -10,6 +10,8 @@ services:
         condition: service_healthy
       meilisearch:
         condition: service_healthy
+      mq:
+        condition: service_healthy
     volumes:
       - ${DATA_DIR}:${INTERNAL_DATA_DIR}
       - ${CONFIG_DIR}:${INTERNAL_CONFIG_DIR}
@@ -18,31 +20,62 @@ services:
     environment:
       - TRANSCODER_URL=http://transcoder:7666
       - MEILI_HOST=http://meilisearch:7700
-      - REDIS_HOST=redis
-      - POSTGRES_HOST=db
-      - DATABASE_URL=postgresql://${POSTGRES_USER}:${POSTGRES_PASSWORD}@${POSTGRES_HOST}:5432/${POSTGRES_DB}?schema=public
+      - RABBITMQ_URL=amqp://${RABBITMQ_USER}:${RABBITMQ_PASSWORD}@mq:5672
+      - DATABASE_URL=postgresql://${POSTGRES_USER}:${POSTGRES_PASSWORD}@db:5432/${POSTGRES_DB}?schema=public
     healthcheck:
       test: ["CMD-SHELL", "wget -qO- localhost:4000"]
       interval: 5s
       timeout: 5s
       retries: 5
+  scanner:
+    image: arthichaud/meelo-scanner:${TAG:-latest}
+    expose:
+      - 8133
+    depends_on:
+      server:
+        condition: service_healthy
+    healthcheck:
+      test: ["CMD-SHELL", "wget -qO- localhost:8133"]
+      interval: 5s
+      timeout: 5s
+      retries: 10
+    environment:
+      - API_URL=http://server:4000
+      - INTERNAL_CONFIG_DIR=${INTERNAL_CONFIG_DIR}
+      - INTERNAL_DATA_DIR=${INTERNAL_DATA_DIR}
+      - API_KEYS=${API_KEYS}
+    volumes:
+      - ${DATA_DIR}:${INTERNAL_DATA_DIR}:ro
+      - ${CONFIG_DIR}:${INTERNAL_CONFIG_DIR}:ro
   front:
-    image: ghcr.io/arthi-chaud/meelo-front:latest
+    image: arthichaud/meelo-front:${TAG:-latest}
     expose:
       - 3000
     depends_on:
       server:
         condition: service_healthy
+      scanner:
+        condition: service_healthy
     environment:
-      - PUBLIC_SERVER_URL=${PUBLIC_SERVER_URL}
+      - PUBLIC_SERVER_URL=${PUBLIC_URL}/api
       - SSR_SERVER_URL=http://server:4000
-  redis:
-    image: redis:7.0-alpine
-    healthcheck:
-      test: ["CMD", "redis-cli","ping"]
-      interval: 5s
-      timeout: 5s
-      retries: 5
+      - PUBLIC_SCANNER_URL=${PUBLIC_URL}/scanner
+      - SSR_SCANNER_URL=http://scanner:8133
+  matcher:
+    image: arthichaud/meelo-matcher:${TAG:-latest}
+    restart: on-failure
+    depends_on:
+      server:
+        condition: service_healthy
+      mq:
+        condition: service_healthy
+    environment:
+      - API_URL=http://server:4000
+      - INTERNAL_CONFIG_DIR=${INTERNAL_CONFIG_DIR}
+      - API_KEYS=${API_KEYS}
+      - RABBITMQ_URL=amqp://${RABBITMQ_USER}:${RABBITMQ_PASSWORD}@mq:5672
+    volumes:
+      - ${CONFIG_DIR}:${INTERNAL_CONFIG_DIR}:ro
   db:
     image: postgres:alpine3.14
     healthcheck:
@@ -64,6 +97,7 @@ services:
     environment:
       - MEILI_ENV=production
       - MEILI_MASTER_KEY=${MEILI_MASTER_KEY}
+      - MEILI_LOG_LEVEL=WARN
     healthcheck:
       test: ["CMD", "wget", "--no-verbose", "--spider", "http://0.0.0.0:7700/health"]
       timeout: 5s
@@ -84,7 +118,22 @@ services:
     volumes:
       - ${DATA_DIR}:${INTERNAL_DATA_DIR}:ro
       - transcoder_cache:/cache
-    profiles: ['', 'cpu']
+    depends_on:
+      db:
+        condition: service_healthy
+  mq:
+    image: rabbitmq:4.0-alpine
+    environment:
+      - RABBITMQ_NODENAME=meelo
+      - RABBITMQ_DEFAULT_USER=${RABBITMQ_USER}
+      - RABBITMQ_DEFAULT_PASS=${RABBITMQ_PASSWORD}
+    healthcheck:
+      test: rabbitmq-diagnostics -q ping
+      interval: 5s
+      timeout: 5s
+      retries: 10
+    volumes:
+      - rabbitmq_data:/var/lib/rabbitmq
   nginx:
     restart: on-failure
     image: nginx:1.24.0-alpine
@@ -99,6 +148,7 @@ services:
       - PORT=5000
       - FRONT_URL=http://front:3000
       - SERVER_URL=http://server:4000
+      - SCANNER_URL=http://scanner:8133
     volumes:
       - ./nginx.conf.template:/etc/nginx/templates/meelo.conf.template:ro
 volumes:
@@ -107,3 +157,4 @@ volumes:
   data:
   search:
   transcoder_cache:
+  rabbitmq_data:

docker-compose.yml

@@ -11,6 +11,8 @@ services:
         condition: service_healthy
       meilisearch:
         condition: service_healthy
+      mq:
+        condition: service_healthy
     volumes:
       - ${DATA_DIR}:${INTERNAL_DATA_DIR}
       - ${CONFIG_DIR}:${INTERNAL_CONFIG_DIR}
@@ -19,9 +21,8 @@ services:
     environment:
       - TRANSCODER_URL=http://transcoder:7666
       - MEILI_HOST=http://meilisearch:7700
-      - REDIS_HOST=redis
-      - POSTGRES_HOST=db
-      - DATABASE_URL=postgresql://${POSTGRES_USER}:${POSTGRES_PASSWORD}@${POSTGRES_HOST}:5432/${POSTGRES_DB}?schema=public
+      - RABBITMQ_URL=amqp://${RABBITMQ_USER}:${RABBITMQ_PASSWORD}@mq:5672
+      - DATABASE_URL=postgresql://${POSTGRES_USER}:${POSTGRES_PASSWORD}@db:5432/${POSTGRES_DB}?schema=public
     healthcheck:
       test: ["CMD-SHELL", "wget -qO- localhost:4000"]
       interval: 5s
@@ -35,22 +36,59 @@ services:
     depends_on:
       server:
         condition: service_healthy
+      scanner:
+        condition: service_healthy
     environment:
-      - PUBLIC_SERVER_URL=${PUBLIC_SERVER_URL}
+      - PUBLIC_SERVER_URL=${PUBLIC_URL}/api
       - SSR_SERVER_URL=http://server:4000
-  redis:
-    image: redis:7.0-alpine
+      - PUBLIC_SCANNER_URL=${PUBLIC_URL}/scanner
+      - SSR_SCANNER_URL=http://scanner:8133
+  scanner:
+    build:
+      context: ./scanner
+    expose:
+      - 8133
+    depends_on:
+      server:
+        condition: service_healthy
     healthcheck:
-      test: ["CMD", "redis-cli","ping"]
+      test: ["CMD-SHELL", "wget -qO- localhost:8133"]
       interval: 5s
       timeout: 5s
-      retries: 5
+      retries: 10
+    environment:
+      - API_URL=http://server:4000
+      - INTERNAL_CONFIG_DIR=${INTERNAL_CONFIG_DIR}
+      - INTERNAL_DATA_DIR=${INTERNAL_DATA_DIR}
+      - API_KEYS=${API_KEYS}
+    volumes:
+      - ${DATA_DIR}:${INTERNAL_DATA_DIR}:ro
+      - ${CONFIG_DIR}:${INTERNAL_CONFIG_DIR}:ro
+  matcher:
+    build:
+      context: ./matcher
+    restart: on-failure
+    depends_on:
+      server:
+        condition: service_healthy
+      mq:
+        condition: service_healthy
+    environment:
+      - API_URL=http://server:4000
+      - INTERNAL_CONFIG_DIR=${INTERNAL_CONFIG_DIR}
+      - API_KEYS=${API_KEYS}
+      - RABBITMQ_URL=amqp://${RABBITMQ_USER}:${RABBITMQ_PASSWORD}@mq:5672
+    volumes:
+      - ${CONFIG_DIR}:${INTERNAL_CONFIG_DIR}:ro
   transcoder:
     image: ghcr.io/zoriya/kyoo_transcoder:master
     restart: on-failure
     cpus: 1
     expose:
       - 7666
+    depends_on:
+      db:
+        condition: service_healthy
     environment:
       - GOCODER_SAFE_PATH=${INTERNAL_DATA_DIR}
       - POSTGRES_USER=${POSTGRES_USER}
@@ -61,7 +99,6 @@ services:
     volumes:
       - ${DATA_DIR}:${INTERNAL_DATA_DIR}:ro
       - transcoder_cache:/cache
-    profiles: ['', 'cpu']
   db:
     image: postgres:alpine3.14
     healthcheck:
@@ -83,10 +120,24 @@ services:
     environment:
       - MEILI_ENV=production
       - MEILI_MASTER_KEY=${MEILI_MASTER_KEY}
+      - MEILI_LOG_LEVEL=WARN
     healthcheck:
       test: ["CMD", "wget", "--no-verbose", "--spider", "http://0.0.0.0:7700/health"]
       timeout: 5s
       retries: 5
+  mq:
+    image: rabbitmq:4.0-alpine
+    environment:
+      - RABBITMQ_NODENAME=meelo
+      - RABBITMQ_DEFAULT_USER=${RABBITMQ_USER}
+      - RABBITMQ_DEFAULT_PASS=${RABBITMQ_PASSWORD}
+    healthcheck:
+      test: rabbitmq-diagnostics -q ping
+      interval: 5s
+      timeout: 5s
+      retries: 10
+    volumes:
+      - rabbitmq_data:/var/lib/rabbitmq
   nginx:
     restart: on-failure
     image: nginx:1.24.0-alpine
@@ -101,6 +152,7 @@ services:
       - PORT=5000
       - FRONT_URL=http://front:3000
       - SERVER_URL=http://server:4000
+      - SCANNER_URL=http://scanner:8133
     volumes:
       - ./nginx.conf.template:/etc/nginx/templates/meelo.conf.template:ro
 volumes:
@@ -109,3 +161,4 @@ volumes:
   data:
   search:
   transcoder_cache:
+  rabbitmq_data:

docs/.gitignore

@@ -1 +0,0 @@
-site/

docs/mkdocs.yml

@@ -1,45 +0,0 @@
-site_name: Meelo - User Documentation
-docs_dir: './src'
-repo_url: https://github.com/Arthi-chaud/Meelo
-nav:
-  - Setup:
-    - TLDR: setup/tldr.md
-    - Requirements: setup/requirements.md
-    - Prepare Music Library: setup/prepare-music-library.md
-    - Create Configuration Folder: setup/create-conf-folder.md
-    - Prepare Your Settings: setup/settings.md
-    - Configure Providers: setup/providers.md
-    - Environment Variables: setup/env.md
-    - Docker: setup/docker.md
-    - Start: setup/startup.md
-    - Create First Library: setup/create-library.md
-  - Album Types: album-types.md
-  - Song Types: song-types.md
-  - Featuring Artists: featuring-artists.md
-theme:
-  name: material
-  language: en
-  palette:
-    scheme: default
-  titles_only: true
-  icon: 
-    repo: fontawesome/brands/github
-  font:
-    text: Noto Sans
-  logo: ./icon.png
-  favicon: ./favicon.ico
-  features:
-    - navigation.instant
-    - navigation.tracking
-    - navigation.tabs
-    - navigation.tabs.sticky
-    - navigation.sections
-    - navigation.indexes
-    - toc.integrate
-    - navigation.top
-extra_css:
-  - stylesheets/extra.css
-plugins:
-  - search
-markdown_extensions:
-  - mdx_truly_sane_lists

docs/requirements.txt

@@ -1,2 +0,0 @@
-mkdocs-material
-mdx_truly_sane_lists

docs/src/album-types.md

@@ -1,42 +0,0 @@
-# Meelo's Album Types
-
-In Music Apps, we usually call any song container an *Album*. While this is technically incorrect, many music streaming services categorizes these *Albums* in sub-categories: Albums, Singles, Live, Compilations, etc.
-
-## Available Types
-
-Meelo supports this categorization, and the following album types:
-
-- Studio Recording
-  - What we would usually call *Albums*
-- Live Recording
-- Compilation
-- Single
-- Soundtrack
-- Remix Album
-  - Collections that would mainly have remixes of songs by a single artist, while not being a Single
-- Video Album
-  - Any kind of collection that would only contain video tracks
-
-## Type recognition
-
-Meelo tries to be as independent of user interactions as possible. Therefore, type recognition is done automatically, when a new album is registered.
-
-For now, Type recognition is solely based on the Album's title. Keywords to recognize an album's type were inspired by the way other music streaming services would categorize an album. Therefore, if your music collection's naming convention work a similar way to Spotify, Apple Music, ..., there might not be a lot to change if you want to fully enjoy this feature. However, if you consider that one of the following ways to recognize a type is incomplete or incorrect, feel free to [open an issue](https://github.com/Arthi-chaud/Meelo/issues).
-
-### Keywords
-
-| Album Type | Keywords |
-|---|---|
-| Studio Album | See note below |
-| Compilations | - `best of`<br>- `hits`<br>- `greatest hits`<br>- `singles`<br>- `collection`<br>+ See note below |
-| Live Recording | - '` tour`' (Notice the leading whitespace)<br>- `live from`<br>- `live at`<br>- `unplugged`<br>- `(live)` |
-| Single | - `- single`<br>- `- ep`<br>- `(remixes)` |
-| Video Album | - `music videos`<br>- `the video`<br>- `dvd` |
-| Remix Album | - `remix album`<br>- `mixes`<br>- `the remixes`<br>- `remixed`<br>- `remixes`<br>- `best mixes` |
-| Soundtrack | - `soundtrack`<br>- `from the motion picture`<br>- `music from and inspired by` |
-
-Notes:
-
-- Keywords are case-insensitive.
-- Any album that would not fall into the other categories will be considered to be a Compilation IF the album is a 'compilation' album (see metadata)
-- Any album that would not fall into the other categories will be considered to be a Studio Recording

docs/src/banner-black.png

@@ -1 +0,0 @@
-../../front/public/banner-black.png

docs/src/favicon.ico

@@ -1 +0,0 @@
-../../front/public/favicon.ico

docs/src/featuring-artists.md

@@ -1,53 +0,0 @@
-# Meelo's Featuring Artist Management
-
-Meelo is now able to parse and recognise featuring artists on a song, based on:
-
-- Its name
-- Its artist field (from the metadata)
-
-It does not leverage the album artist.
-
-For example, a song named 'My Song (feat. Another Artist)' by 'Primary Artist & Other Artist' would be parsed to 'My Song' by artist 'Primary artist', featuring 'Other Artist' and 'Another Artist'.
-
-Therefore, each featuring artist will be added to the database, and treated like any other artist.
-
-Parsing works with `()`, `[]` and `-` as delimiters.
-
-## Examples
-
-In this section, we list examples that would be successfully parsed by Meelo
-
-- 'My Song (feat. B)' by 'A'
-  - Name: 'My Song'
-  - Artist: 'A'
-  - Featuring: 'B'
-- 'My Song (Remix) [feat. B]' by 'A'
-  - Name: 'My Song (Remix)'
-  - Artist: 'A'
-  - Featuring: 'B'
-- 'My Song' by 'A & B'
-  - Name: 'My Song'
-  - Artist: 'A'
-  - Featuring: 'B'
-- 'My Song' by 'A, B & C'
-  - Name: 'My Song'
-  - Artist: 'A'
-  - Featuring: 'B', 'C'
-- 'My Song - With D' by 'A, B & C'
-  - Name: 'My Song'
-  - Artist: 'A'
-  - Featuring: 'B', 'C', 'D'
-- 'My Song - Version With Drums' by 'A'
-  - Name: 'My Song - Version With Drums'
-  - Artist: 'A'
-  - Featuring: None
-- 'My Song' by 'A Vs. B'
-  - Name: 'My Song'
-  - Artist: 'A'
-  - Featuring: 'B'
-
-## Special Case: Artist is already known
-
-By default, we use '&' to find and split a list of artist. However, this behaviour changes if an artist containing '&' already exists.
-
-For example, if we had an *album* artist named 'A & B' (since album artist are not parsed as much as song artists), a song named 'My Song (feat. A & B)' would be parsed as 'My Song', with featuring artist 'A & B'.

docs/src/icon.png

@@ -1 +0,0 @@
-../../front/public/icon.png

docs/src/index.md

@@ -1,3 +0,0 @@
-![Meelo](./banner-black.png)
-
-# Welcome to Meelo's User Documentation

docs/src/setup/create-conf-folder.md

@@ -1,7 +0,0 @@
-# Create a configuration folder
-
-Meelo is runnable through a Docker container. But it needs a way to be parameterized and persist some data.
-
-Therefore, it is recommended that you create a dedicated folder on your computer for Meelo.
-
-For the sake of clarity, in this documentation, we'll refer to this folder as `Meelo`.

docs/src/setup/create-library.md

@@ -1,8 +0,0 @@
-# Create your first library
-
-After creating the admin account (from Web App),
-Visit the `/settings/libraries`, and click `Create Library` to create your first library.
-
-Once your library is created, you should run a scan to collect the related files. To do so, click the *Scan* button.
-
-Your Meelo server is ready to be used! Visit the `/` route on your favourite browser to enjoy your favourite music :).

docs/src/setup/docker.md

@@ -1,5 +0,0 @@
-# Docker and Docker-compose
-
-In your `Meelo` folder, copy this [docker-compose file](https://raw.githubusercontent.com/Arthi-chaud/Meelo/master/docker-compose.prod.yml) as `docker-compose.yml`. It can be used as-is.
-
-Additionally, you should copy [nginx configuration file](https://raw.githubusercontent.com/Arthi-chaud/Meelo/master/nginx.conf.template) as is in your `Meelo` folder.

docs/src/setup/env.md

@@ -1,3 +0,0 @@
-# Environment variables
-
-In your `Meelo` directory, copy this [`.env.example`](https://raw.githubusercontent.com/Arthi-chaud/Meelo/master/.env.example) as `.env` and fill the variables

docs/src/setup/prepare-music-library.md

@@ -1,18 +0,0 @@
-# Prepare your music library
-
-The toughest part is to have an structured music library. The way files are organised are up to you! But here is a recommended architecture:
-
-```tree
-Library's Folder   
-│
-Artist 1
-│   │
-│   └───Album 1
-│       │   01 Track 1.m4a
-│       │   02 Track 2.m4a
-|       |   cover.jpg
-│       │   ...
-│   ...
-```
-
-Meelo provides two ways of collecting metadata: using embedded tags, or using the path of the file. If a metadata source does not provide a specific field, you can use the other as a fallback. (You will configure this behaviour in the next sections). But before going any further, you should decide which metadata collection method to use.

docs/src/setup/providers.md

@@ -1,40 +0,0 @@
-# Providers
-
-## Enabling Providers
-
-In the `settings.json`, ff the `provider` object does not contain a provider's settings, this provider will be disabled.
-
-Providers can also be disabled explicitly by setting the Provider's settings' field `enabled` at `false`. For example:
-
-```json
-// In settings.json
-{
-  //... Other properties
-  "providers": {
-    "provider1": {}, // Provider 1 is enabled
-    // Provider 2 was not specified, it is therefore disabled
-    "provider3": {
-      "enabled": true // Provider 3 is enabled
-    },
-    "provider4": {
-      "enabled": false, // Provider 4 is disabled
-      "apiKey": "" // Other property of provider 4
-    } 
-  }
-}
-```
-
-If a provider is disabled, no call to its service will be done.
-
-## Providers' properties and features
-
-| Provider Name | Key           | Additional Properties                                                                      | Artist Description | Artist Illustration | Album Description | Album Rating | Song Description | Song Lyrics | Release Identification | Album Genres |
-|---------------|---------------|--------------------------------------------------------------------------------------------|--------------------|---------------------|-------------------|--------------|------------------|-------------|------------------------|--------------|
-| Genius        | `genius`      | `apiKey`: Access Token, you can get it [here](https://genius.com/api-clients)              | x                  | x                   | x                 |              |                  | x           |                        |              |
-| MusicBrainz   | `musicbrainz` | None                                                                                       |                    |                     |                   |              |                  |             |                        | x            |
-| AllMusic      | `allmusic`    | None                                                                                       |                    |                     | x                 | x            |                  |             |                        |              |
-| MetaCritic    | `metacritic`  | None                                                                                       |                    |                     | x                 | x            |                  |             |                        |              |
-| Wikipedia     | `wikipedia`   | None                                                                                       | x                  |                     | x                 |              | x                |             |                        |              |
-| Discogs       | `discogs`     | `apiKey`: Access Token, you can get it [here](https://www.discogs.com/settings/developers) | x                  |                     |                   |              |                  |             | x                      | x            |
-
-**Warning**: Meelo heavily relies on Wikidata to optimize the metadata fetching. It is used if, and only if the MusicBrainz Provider is enabled. It is not possible to use one without the other.

docs/src/setup/requirements.md

@@ -1,8 +0,0 @@
-# Requirements
-
-Meelo is easy to setup! But you'll need the following things before continuing
-
-- Have you music library ready (see [*this step*](../prepare-music-library))
-- Know how `Docker` and `docker-compose` work
-- Know how to create a `.env` file
-- Know how to manipulate Regular Expressions (Especially the ECMAScript flavor)

docs/src/setup/settings.md

@@ -1,32 +0,0 @@
-# Prepare your settings
-
-In your `Meelo` folder, download and fill [this `settings.json` file](https://raw.githubusercontent.com/Arthi-chaud/Meelo/master/settings.json)
-
-All fields are **required**
-
-- `trackRegex`: Probably the most important setting for Meelo. This field takes an array of strings, each string being a Regular Expression string. The RegExp will be used to find the files to import (It will be matched against the **absolute path** of the file). As mentioned before, the path of the file can be used as a metadata source. Therefore, **the Regular Expression accepts groups to find metadata**:
-  - `AlbumArtist`: The artist of the parent album.
-    - Special Case: If it equals `Compilations`, related album will be considered as compilation albums (with no main artist, like soundtrack albums)
-  - `Artist`: The artist of the track. If it is not present, it will use the `AlbumArtist` field.
-  - `Release`: Usually no present in a standard file architecture; the name of the *release*. When it is not present, the `Album` field will be used.
-  - `Album`: The name of the album of the material. This field will then be parsed to group related album releases.
-  - `Year`: The Year of the release of the material
-  - `Disc`: The Index of the disc the track is on.
-  - `Index`: The index of the track in a playlist/on a disc.
-  - `Track`: The name of the track
-  - `Genre`: The genre of the material
-  - `DiscogsID`: The Discogs ID of the parent release. A Discogs ID should take the form of a digit-only string. This ID can be found in the URL of the release's Discogs page or in the top-right corner of that page (displayed as `[rXXXXXXXX]`)
-- `metadata`: Configuration of the **metadata extraction** system:
-  - `source`: The **primary metadata source** to use:
-    - `embedded`: Using the embedded tags
-    - `path`: Using the Regular Expression's groups.
-  - `order`: Define the missing metadata fallback behaviour. *Note*: if this method is enabled, it will consider 'cover.*' file in the same directory as the media file as an illustration candidate.
-    - `only`: If a field is missing from the primary metadata source, will not use the other method to get it.
-    - `preferred`: If a field is missing from the primary metadata source, will try to use the other method to get it.
-  - `useExternalProviderGenres`: Set to `true` if you want genres from external metadata providers to be used. These genres will be used alongside with embedded genres (if parsing embedded metadata is enabled)
-- `providers`: Please refer to [*Providers*](../providers)
-- `compilations`:
-  - `artists`: Optional field. If an album artist in this list, their albums will be considered to be compilation albums.
-  - `useID3CompTag`: If true, use iTunes' non-standard ID3 tags for compilations.
-
-*Note*: The provided Regular Expression uses the iTunes file architecture.

docs/src/setup/startup.md

@@ -1,16 +0,0 @@
-# Start Meelo
-
-Once these three files are ready, run the following command from your `Meelo` folder:
-
-```bash
-docker-compose up
-```
-
-## Troubleshooting
-
-Two things can prevent Meelo from starting normally:
-
-- A bad `settings.json` file
-  - In that case, a message should tell you what went wrong
-- Connection to database failed
-  - In that case, you should have a red message telling you a query failed. To fix, simply restart the server

docs/src/setup/tldr.md

@@ -1,12 +0,0 @@
-# TLDR
-
-Don't feel like reading? Here's how to setup Meelo quickly
-
-- Download and fill [this `docker-compose` file](https://raw.githubusercontent.com/Arthi-chaud/Meelo/master/docker-compose.prod.yml)
-- Download and fill [this `nginx` configuration file](https://raw.githubusercontent.com/Arthi-chaud/Meelo/master/nginx.conf.template)
-- Download and fill [this `.env` file](https://raw.githubusercontent.com/Arthi-chaud/Meelo/master/.env.example)
-- Download and fill [this `settings.json` file](https://raw.githubusercontent.com/Arthi-chaud/Meelo/master/settings.json)
-
-You should be ready to go! If something goes wrong, please take the time to read the `Setup` section of this documentation.
-
-Enjoy!

docs/src/song-types.md

@@ -1,29 +0,0 @@
-# Meelo's Album Types
-
-It is possible to filter songs based on their *type*. 
-
-## Available Types
-
-Meelo supports the following song types:
-
-- Original
-- Live
-- Acoustic
-- Remix
-- Instrumental
-- Acapella
-- Edit
-  - Of the original version.
-  - If the song is an edit of a remix, it will be categorised as 'Remix'
-- Clean
-- Demo
-
-## Type recognition
-
-Songs' type recognition is solely based on keywords present in their name. For example:
-
-- 'My Song (Remix)' would be typed as 'Remix'
-- 'My Song (Live)' would be recognised as a Live rendition
-- 'My Song (Rough Mix)' would be defined as 'Demo'
-- 'My Song (Instrumental Mix)' would be an 'Instrumental'
-- 'My Song (Instrumental Break Down Mix)' would be a 'Remix'

docs/src/stylesheets/extra.css

@@ -1,3 +0,0 @@
-:root {
-	--md-primary-fg-color:        #2F2C2B;
-}

front/.prettierignore

@@ -1,3 +0,0 @@
-.next/
-node_modules/
-.yarn/

front/.prettierrc

@@ -1,15 +0,0 @@
-{
-	"printWidth": 80,
-	"tabWidth": 4,
-	"useTabs": true,
-	"semi": true,
-	"singleQuote": false,
-	"quoteProps": "as-needed",
-	"jsxSingleQuote": false,
-	"trailingComma": "all",
-	"bracketSpacing": true,
-	"bracketSameLine": false,
-	"arrowParens": "always",
-	"endOfLine": "lf",
-	"singleAttributePerLine": false
-}

front/__tests__/state/userSlice.ts

@@ -1,28 +0,0 @@
-import userReducer, {
-	setAccessToken,
-	setUserProfile,
-	unsetAccessToken,
-} from "../../src/state/userSlice";
-
-describe("User Slice", () => {
-	let state: ReturnType<typeof userReducer> | undefined = undefined;
-
-	it("Should set the access token", () => {
-		state = userReducer({}, setAccessToken("1234"));
-
-		expect(state).toStrictEqual({ accessToken: "1234" });
-	});
-
-	it("Should set the user profile", () => {
-		const user = { id: 1, name: "user", admin: true, enabled: true };
-		state = userReducer(state, setUserProfile(user));
-
-		expect(state).toStrictEqual({ accessToken: "1234", user });
-	});
-
-	it("Should unset the access token, and user profile", () => {
-		state = userReducer(state, unsetAccessToken());
-
-		expect(state.accessToken).toBeUndefined();
-	});
-});

front/biome.json

@@ -0,0 +1,37 @@
+{
+	"extends": ["../biome.json"],
+	"formatter": {
+		"lineWidth": 80
+	},
+	"files": {
+		"ignore": ["**/.next/**"]
+	},
+	"linter": {
+		"rules": {
+			"style": {
+				"noNonNullAssertion": "off"
+			},
+			"suspicious": {
+				"noExtraNonNullAssertion": "warn",
+				"noArrayIndexKey": "off"
+			},
+			"correctness": {
+				"useExhaustiveDependencies": "off",
+				"noUnusedVariables": "warn"
+			},
+			"complexity": {
+				"noForEach": "off"
+			},
+			"nursery": {
+				"noRestrictedImports": {
+					"options": {
+						"paths": {
+							"format-duration": "Use wrapper from 'theme/provider'",
+							"@mui/icons-material": "Use icons in 'src/components/icons'"
+						}
+					}
+				}
+			}
+		}
+	}
+}

front/next.config.js

@@ -27,6 +27,12 @@ if (process.env.NODE_ENV !== "production") {
 				? `${process.env.SSR_SERVER_URL}/:path*`
 				: "/api/:path*",
 		},
+		{
+			source: "/scanner/:path*",
+			destination: process.env.SSR_SCANNER_URL
+				? `${process.env.SSR_SCANNER_URL}/:path*`
+				: "/scanner/:path*",
+		},
 	];
 }
 

front/package.json

@@ -6,34 +6,35 @@
 		"start:dev": "next dev",
 		"build": "next build",
 		"start:prod": "next start",
-		"lint": "next lint",
-		"format": "prettier --write .",
+		"lint": "biome lint .",
+		"format": "biome format .",
 		"test": "jest -i",
 		"test:cov": "jest -i --coverage"
 	},
 	"dependencies": {
-		"@emotion/cache": "^11.10.0",
-		"@emotion/react": "^11.10.0",
+		"@emotion/cache": "^11.14.0",
+		"@emotion/react": "^11.14.0",
 		"@emotion/server": "^11.11.0",
-		"@emotion/styled": "^11.10.0",
-		"@mui/material": "^5.10.1",
-		"@mui/utils": "^5.10.6",
-		"@mui/x-data-grid": "^5.17.14",
-		"@mui/x-date-pickers": "^5.0.8",
-		"@reduxjs/toolkit": "^1.8.5",
+		"@emotion/styled": "^11.14.0",
+		"@mui/material": "^7.0.1",
+		"@mui/material-nextjs": "^7.0.0",
+		"@mui/utils": "^7.0.1",
+		"@mui/x-data-grid": "^7.28.3",
+		"@mui/x-date-pickers": "^7.28.3",
 		"accept-language-parser": "^1.5.0",
 		"blurhash": "^2.0.5",
 		"change-case": "^5.1.2",
-		"cookies-next": "^2.1.1",
+		"cookies-next": "^5.1.0",
 		"core-js": "^3.26.1",
 		"d3-array": "^3.2.0",
 		"format-duration": "^2.0.0",
 		"hls.js": "^1.5.11",
 		"i18next": "^23.7.16",
 		"iconsax-react": "^0.0.8",
+		"jotai": "^2.12.1",
 		"material-ui-confirm": "^3.0.7",
 		"mui-react-hook-form-plus": "^1.3.2",
-		"next": "14.2.5",
+		"next": "14.2.25",
 		"react": "18.2.0",
 		"react-beautiful-dnd": "^13.1.1",
 		"react-blurhash": "^0.3.0",
@@ -43,18 +44,16 @@
 		"react-hot-toast": "^2.3.0",
 		"react-i18next": "^12.2.2",
 		"react-infinite-scroller": "^1.2.6",
-		"react-loader-spinner": "^5.2.0",
 		"react-query": "^3.39.2",
-		"react-redux": "^8.0.2",
 		"react-use": "^17.5.1",
-		"redux-persist": "^6.0.0",
 		"sharp": "^0.33.4",
-		"type-fest": "^2.19.0",
+		"type-fest": "^4.33.0",
 		"usehooks-ts": "^2.9.5",
 		"uuid": "^10.0.0",
 		"yup": "^1.0.0"
 	},
 	"devDependencies": {
+		"@biomejs/biome": "1.9.4",
 		"@types/accept-language-parser": "^1.5.3",
 		"@types/d3-array": "^3.0.3",
 		"@types/node": "18.7.7",
@@ -63,17 +62,7 @@
 		"@types/react-dom": "18.0.6",
 		"@types/react-infinite-scroller": "^1.2.3",
 		"@types/uuid": "^9.0.8",
-		"@typescript-eslint/eslint-plugin": "^6.14.0",
-		"@typescript-eslint/parser": "^6.14.0",
-		"eslint": "^8.57.0",
-		"eslint-config-next": "12.2.5",
-		"eslint-config-prettier": "^9.1.0",
-		"eslint-plugin-header": "^3.1.1",
-		"eslint-plugin-prettier": "^5.0.0",
-		"eslint-plugin-react": "^7.31.11",
-		"eslint-plugin-unused-imports": "^3.0.0",
 		"jest": "^29.7.0",
-		"prettier": "^3.1.1",
 		"typescript": "5.3.3"
 	},
 	"packageManager": "yarn@4.4.0"

front/src/@types/i18next.d.ts

@@ -16,8 +16,8 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import en from "../i18n/translations/en.json";
-import fr from "../i18n/translations/fr.json";
+import type en from "../i18n/translations/en.json";
+import type fr from "../i18n/translations/fr.json";
 import "i18next";
 
 declare module "i18next" {

front/src/api/use-query.ts

@@ -18,16 +18,17 @@
 
 /* eslint-disable no-restricted-imports */
 
+import { useEffect, useState } from "react";
 import {
-	QueryFunctionContext,
+	type QueryFunctionContext,
 	useInfiniteQuery as useReactInfiniteQuery,
 	useQueries as useReactQueries,
 	useQuery as useReactQuery,
 	useQueryClient as useReactQueryClient,
 } from "react-query";
-import API from "./api";
-import { InfiniteFetchFn, Page } from "../components/infinite/infinite-scroll";
-import Resource from "../models/resource";
+import type { InfiniteFetchFn, Page } from "~/components/infinite/scroll";
+import type Resource from "~/models/resource";
+import API from "./";
 
 type Key = string | number;
 
@@ -62,7 +63,7 @@ export const DefaultMeeloQueryOptions = {
 	cacheTime: 10 * (60 * 1000),
 	refetchOnMount: true,
 	// We want this in dev, not in prod to avoid useless refecthes.
-	refetchOnWindowFocus: process.env.NODE_ENV != "production",
+	refetchOnWindowFocus: process.env.NODE_ENV !== "production",
 	refetchOnReconnect: true,
 };
 
@@ -169,8 +170,7 @@ const useInfiniteQuery = <ReturnType extends Resource, Params extends any[]>(
 	...queryParams: Partial<Params>
 ) => {
 	const pageSize = API.defaultPageSize;
-
-	return useReactInfiniteQuery({
+	const { data, ...res } = useReactInfiniteQuery({
 		...prepareMeeloInfiniteQuery(query, ...queryParams),
 		getNextPageParam: (
 			lastPage: Page<ReturnType>,
@@ -181,6 +181,12 @@ const useInfiniteQuery = <ReturnType extends Resource, Params extends any[]>(
 			return lastPage;
 		},
 	});
+	const [items, setItems] = useState(data?.pages.at(0)?.items);
+	useEffect(() => {
+		setItems(data?.pages.flatMap((p) => p.items));
+	}, [data?.pages]);
+
+	return { ...res, data, items };
 };
 
 /**
@@ -217,6 +223,9 @@ export const transformPage = <To, From>(
 	q: InfiniteQuery<From>,
 	transformer: (item: From, index: number) => To,
 ): InfiniteQuery<To> => {
+	//TODO This will fill the cache with the 'transformed' data
+	//which is undesirable.
+	//We might want to use the 'select' property from react-query
 	return {
 		key: q.key,
 		exec: (p) =>

front/src/components/actions/album-type.tsx

@@ -1,94 +0,0 @@
-/*
- * Meelo is a music server and application to enjoy your personal music files anywhere, anytime you want.
- * Copyright (C) 2023
- *
- * Meelo is free software: you can redistribute it and/or modify
- * it under the terms of the GNU General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * Meelo is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with this program.  If not, see <http://www.gnu.org/licenses/>.
- */
-
-import { QueryClient } from "../../api/use-query";
-import Action from "../actions/action";
-import { useConfirm } from "material-ui-confirm";
-import Album, { AlbumType } from "../../models/album";
-import store from "../../state/store";
-import { Chip, Grid } from "@mui/material";
-import { useState } from "react";
-import toast from "react-hot-toast";
-import API from "../../api/api";
-import { useMutation } from "react-query";
-import { EditIcon } from "../icons";
-import { useTranslation } from "react-i18next";
-
-const AlbumTypeForm = (props: {
-	defaultValue: AlbumType;
-	onSelect: (type: AlbumType) => void;
-}) => {
-	const [currentType, setType] = useState(props.defaultValue);
-	const { t } = useTranslation();
-
-	return (
-		<>
-			<Grid container spacing={2} justifyContent="center">
-				{AlbumType.map((type) => (
-					<Grid item key={type}>
-						<Chip
-							label={t(type)}
-							variant={
-								type == currentType ? "filled" : "outlined"
-							}
-							onClick={() => {
-								setType(type);
-								props.onSelect(type);
-							}}
-						/>
-					</Grid>
-				))}
-			</Grid>
-		</>
-	);
-};
-
-const ChangeAlbumType = (
-	album: Album,
-	queryClient: QueryClient,
-	confirm: ReturnType<typeof useConfirm>,
-): Action => {
-	const { t } = useTranslation();
-	const mutation = useMutation((newType: AlbumType) => {
-		return API.updateAlbum(album.id, newType)
-			.then(() => {
-				queryClient.client.invalidateQueries("albums");
-			})
-			.catch((error: Error) => toast.error(error.message));
-	});
-
-	return {
-		label: "changeAlbumType",
-		icon: <EditIcon />,
-		disabled: store.getState().user.user?.admin !== true,
-		onClick: () =>
-			confirm({
-				title: t("changeAlbumType"),
-				description: (
-					<AlbumTypeForm
-						defaultValue={album.type}
-						onSelect={(type) => mutation.mutate(type)}
-					/>
-				),
-				cancellationButtonProps: { sx: { display: "none" } },
-				confirmationText: t("done"),
-			}),
-	};
-};
-
-export default ChangeAlbumType;

front/src/components/actions/auth.tsx

@@ -16,14 +16,14 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { LogoutIcon } from "../icons";
-import store from "../../state/store";
-import { unsetAccessToken } from "../../state/userSlice";
-import Action from "./action";
+import { LogoutIcon } from "~/components/icons";
+import { store } from "~/state/store";
+import { accessTokenAtom } from "~/state/user";
+import type Action from "./";
 
 export const LogoutAction: Action = {
 	label: "logout",
 	icon: <LogoutIcon />,
 	href: "/",
-	onClick: () => store.dispatch(unsetAccessToken()),
+	onClick: () => store.set(accessTokenAtom, undefined),
 };

front/src/components/actions/download.tsx

@@ -16,12 +16,12 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import Action from "./action";
-import { useConfirm } from "material-ui-confirm";
-import API from "../../api/api";
-import confirmDownloadAction from "../confirm-download-action";
-import { ArchiveIcon, DownloadIcon } from "../icons";
-import { Translator } from "../../i18n/i18n";
+import type { useConfirm } from "material-ui-confirm";
+import API from "~/api";
+import confirmDownloadAction from "~/components/confirm-download-action";
+import { ArchiveIcon, DownloadIcon } from "~/components/icons";
+import type { Translator } from "~/i18n/i18n";
+import type Action from "./";
 
 export const DownloadAction = (
 	confirm: ReturnType<typeof useConfirm>,

front/src/components/actions/index.ts

@@ -16,8 +16,8 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { RequireExactlyOne } from "type-fest";
-import { TranslationKey } from "../../i18n/i18n";
+import type { RequireExactlyOne } from "type-fest";
+import type { TranslationKey } from "~/i18n/i18n";
 
 /**
  * Props for a generic component to run an action/go to page

front/src/components/actions/library-task.tsx

@@ -17,19 +17,21 @@
  */
 
 import toast from "react-hot-toast";
-import API from "../../api/api";
-import LibraryTaskResponse from "../../models/library-task-response";
-import Action from "./action";
-import { CleanIcon, MetadataRefreshIcon, ScanIcon } from "../icons";
+import API from "~/api";
+import { CleanIcon, ScanIcon } from "~/components/icons";
+import type { TaskResponse } from "~/models/task";
+import type Action from "./";
 
 /**
  * Using the resolved value of the task porimise, triggers an appropriate toast
  * @param task the returned promised from an API call to run a task
  */
-const handleTask = <T extends LibraryTaskResponse>(task: Promise<T>) =>
+const handleTask = <T extends TaskResponse>(task: Promise<T>) =>
 	task
-		.then(({ status }) => toast.success(status))
-		.catch(({ status }) => toast.error(status));
+		.then((s) => toast.success(s.message))
+		.catch((s) =>
+			toast.error(s.message ?? s.status ?? "Task request failed"),
+		);
 
 export const ScanAllLibrariesAction: Action = {
 	label: "scanLibraries",
@@ -58,9 +60,3 @@ export const CleanLibraryAction = (
 	icon: CleanAllLibrariesAction.icon,
 	onClick: () => handleTask(API.cleanLibrary(librarySlugOrId)),
 });
-
-export const FetchExternalMetadata: Action = {
-	label: "fetchMetadata",
-	icon: <MetadataRefreshIcon />,
-	onClick: () => handleTask(API.fetchExternalMetadata()),
-};

front/src/components/actions/link.tsx

@@ -16,17 +16,19 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
+import type { NextRouter } from "next/router";
+import toast from "react-hot-toast";
 import {
 	AlbumIcon,
 	ArtistIcon,
+	InfoIcon,
 	LyricsIcon,
 	RelatedTracksIcon,
 	SearchIcon,
 	SettingsIcon,
 	SongIcon,
-} from "../icons";
-import { NextRouter } from "next/router";
-import Action from "./action";
+} from "~/components/icons";
+import type Action from "./";
 
 export const GoToSongLyricsAction = (
 	songIdentifier: string | number,
@@ -36,6 +38,14 @@ export const GoToSongLyricsAction = (
 	icon: <LyricsIcon />,
 });
 
+export const GoToSongInfoAction = (
+	songIdentifier: string | number,
+): Action => ({
+	href: `/songs/${songIdentifier}/info`,
+	label: "songInfo",
+	icon: <InfoIcon />,
+});
+
 export const GoToArtistAction = (
 	artistIdentifier: string | number,
 ): Action => ({
@@ -76,10 +86,16 @@ export const GoToReleaseAction = (
 
 export const GoToReleaseAsyncAction = (
 	router: NextRouter,
-	albumIdentifier: () => PromiseLike<number | string>,
+	albumIdentifier: () => PromiseLike<number | string | null>,
 ): Action => ({
 	onClick: () =>
-		albumIdentifier().then((id) => router.push(`/releases/${id}`)),
+		albumIdentifier().then((id) => {
+			if (id === null) {
+				toast.error("This resource is not attached to any album.");
+			} else {
+				router.push(`/releases/${id}`);
+			}
+		}),
 	label: "goToAlbum",
 	icon: <AlbumIcon />,
 });

front/src/components/actions/playlist.tsx

@@ -16,42 +16,49 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import Action from "./action";
+import {
+	Button,
+	Dialog,
+	DialogActions,
+	DialogContent,
+	DialogTitle,
+	Divider,
+} from "@mui/material";
+import { Add, Edit } from "iconsax-react";
+import type { useConfirm } from "material-ui-confirm";
+import { HookTextField, useHookForm } from "mui-react-hook-form-plus";
+import { useState } from "react";
+import toast from "react-hot-toast";
+import { useTranslation } from "react-i18next";
+import { useMutation } from "react-query";
+import API from "~/api";
+import {
+	type MeeloInfiniteQueryFn,
+	type QueryClient,
+	useQueryClient,
+} from "~/api/use-query";
 import {
 	AddItemToPlaylistIcon,
 	AddToPlaylistIcon,
 	DeleteIcon,
 	PlayAfterIcon,
 	PlayNextIcon,
-} from "../icons";
-import toast from "react-hot-toast";
-import {
-	Button,
-	DialogActions,
-	DialogContent,
-	DialogTitle,
-} from "@mui/material";
-import { HookTextField, useHookForm } from "mui-react-hook-form-plus";
-import { MeeloInfiniteQueryFn, QueryClient } from "../../api/use-query";
-import { useMutation } from "react-query";
-import API from "../../api/api";
-import Playlist, { PlaylistWithRelations } from "../../models/playlist";
-import InfiniteList from "../infinite/infinite-list";
-import { WideLoadingComponent } from "../loading/loading";
-import ListItem from "../list-item/item";
-import Illustration from "../illustration";
-import { useConfirm } from "material-ui-confirm";
-import { Add, Edit } from "iconsax-react";
-import { useTranslation } from "react-i18next";
-import { PlayerActions, TrackState } from "../../contexts/player";
+} from "~/components/icons";
+import Illustration from "~/components/illustration";
+import InfiniteList from "~/components/infinite/list";
+import ListItem from "~/components/list-item";
+import type Playlist from "~/models/playlist";
+import type { PlaylistWithRelations } from "~/models/playlist";
+import { type TrackState, playAfterAtom, playNextAtom } from "~/state/player";
+import { store } from "~/state/store";
+import type Action from "./";
 
 export const PlayNextAction = (
 	getTrack: () => PromiseLike<TrackState>,
-	playNext: PlayerActions["playNext"],
 ): Action => ({
 	onClick: () =>
 		getTrack().then((track) => {
-			playNext(track);
+			store.set(playNextAtom, track);
 			toast.success(`'${track.track.name}' will play next!`);
 		}),
 	label: "playNext",
@@ -60,11 +67,10 @@ export const PlayNextAction = (
 
 export const PlayAfterAction = (
 	getTrack: () => PromiseLike<TrackState>,
-	playAfter: PlayerActions["playAfter"],
 ): Action => ({
 	onClick: () =>
 		getTrack().then((track) => {
-			playAfter(track);
+			store.set(playAfterAtom, track);
 			toast.success(`'${track.track.name}' will play after!`);
 		}),
 	label: "playAfter",
@@ -72,7 +78,7 @@ export const PlayAfterAction = (
 });
 
 type CreateOrUpdatePlaylistFormProps = {
-	onSubmit: (newUrl: string) => void;
+	onSubmit: (playlistName: string) => void;
 	onClose: () => void;
 	defaultValue?: string;
 };
@@ -125,16 +131,19 @@ const CreateOrUpdatePlaylistForm = (props: CreateOrUpdatePlaylistFormProps) => {
 	);
 };
 
-export const CreatePlaylistAction = (queryClient: QueryClient): Action => ({
+export const CreatePlaylistAction = (
+	queryClient: QueryClient,
+	onCreated?: (playlistId: number) => void,
+): Action => ({
 	label: "new",
 	icon: <Add />,
 	dialog: ({ close }) => {
-		// eslint-disable-next-line react-hooks/rules-of-hooks
 		const mutation = useMutation((playlistName: string) => {
 			return API.createPlaylist(playlistName)
-				.then(() => {
+				.then((playlist) => {
 					toast.success("Playlist created!");
 					queryClient.client.invalidateQueries("playlists");
+					onCreated?.(playlist.id);
 				})
 				.catch((error: Error) => toast.error(error.message));
 		});
@@ -155,7 +164,6 @@ export const UpdatePlaylistAction = (
 	label: "update",
 	icon: <Edit />,
 	dialog: ({ close }) => {
-		// eslint-disable-next-line react-hooks/rules-of-hooks
 		const mutation = useMutation((playlistName: string) => {
 			return API.updatePlaylist(playlistName, playlist.slug)
 				.then(() => {
@@ -214,15 +222,39 @@ type SelectPlaylistFormProps = {
 
 const SelectPlaylistForm = (props: SelectPlaylistFormProps) => {
 	const { t } = useTranslation();
+	const queryClient = useQueryClient();
+	const createPlaylistAction = CreatePlaylistAction(queryClient);
+	const [openModal, setOpenModal] = useState(false);
+	const closeModal = () => setOpenModal(false);
 
 	return (
 		<>
+			<Dialog
+				open={openModal}
+				onClose={closeModal}
+				fullWidth
+				sx={{ zIndex: 999999 }}
+			>
+				{createPlaylistAction.dialog?.({ close: closeModal })}
+			</Dialog>
 			<DialogTitle>Select a playlist</DialogTitle>
 			<DialogContent>
+				<ListItem
+					title={t(createPlaylistAction.label!)}
+					icon={
+						<Illustration
+							illustration={null}
+							fallback={createPlaylistAction.icon}
+							quality="low"
+						/>
+					}
+					onClick={() => setOpenModal(true)}
+					secondTitle={null}
+				/>
+				<Divider sx={{ paddingTop: 1 }} />
 				<InfiniteList
-					loader={() => <WideLoadingComponent />}
 					query={props.playlistQuery}
-					render={(item, index) => (
+					render={(item, _, index) => (
 						<ListItem
 							key={index}
 							title={item?.name}
@@ -261,7 +293,6 @@ export const AddToPlaylistAction = (
 	icon: <AddToPlaylistIcon />,
 	label: "addToPlaylist",
 	dialog: ({ close }) => {
-		// eslint-disable-next-line react-hooks/rules-of-hooks
 		const mutation = useMutation((playlistId: number) => {
 			return API.addSongToPlaylist(songId, playlistId)
 				.then(() => {

front/src/components/actions/refresh-metadata.tsx

@@ -16,22 +16,75 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { MetadataRefreshIcon } from "../icons";
-import API from "../../api/api";
-import Action from "./action";
+import { Button, Checkbox, Grid } from "@mui/material";
+import { useState } from "react";
 import toast from "react-hot-toast";
-import { Translator } from "../../i18n/i18n";
+import type { ArraySlice } from "type-fest";
+import API from "~/api";
+import { MetadataRefreshIcon } from "~/components/icons";
+import type { Translator } from "~/i18n/i18n";
+import type Action from "./";
+
+type APIMethodParams = ArraySlice<
+	Parameters<typeof API.refreshMetadata>,
+	0,
+	-1
+>;
+
+const RefreshMetadataActionContent = ({
+	t,
+	params,
+	close,
+}: { t: Translator; params: APIMethodParams; close: () => void }) => {
+	const [force, setForce] = useState(false);
+
+	return (
+		<Grid container spacing={2} sx={{ padding: 2 }}>
+			<Grid
+				size={{ xs: 12 }}
+				sx={{
+					display: "flex",
+					justifyContent: "center",
+					alignItems: "center",
+				}}
+			>
+				<Checkbox
+					checked={force}
+					onChange={(_, isChecked) => setForce(isChecked)}
+				/>
+				{t("refreshMetadataForceLabel")}
+			</Grid>
+			<Grid size={{ xs: 12 }}>
+				<Button
+					fullWidth
+					variant="contained"
+					onClick={() => {
+						API.refreshMetadata(...[...params, force])
+							.then(() =>
+								toast.success(t("refreshMetadataStarted")),
+							)
+							.catch(() =>
+								toast.error(t("refreshMetadataFailed")),
+							);
+						close();
+					}}
+				>
+					{t("refreshMetadata")}
+				</Button>
+			</Grid>
+		</Grid>
+	);
+};
 
 const RefreshMetadataAction = (
 	t: Translator,
-	...params: Parameters<typeof API.refreshMetadata>
+	...params: APIMethodParams
 ): Action => ({
 	label: "refreshMetadata",
 	icon: <MetadataRefreshIcon />,
-	onClick: () =>
-		API.refreshMetadata(...params)
-			.then(() => toast.success(t("refreshMetadataStarted")))
-			.catch(() => toast.error(t("refreshMetadataFailed"))),
+	dialog: ({ close }) => (
+		<RefreshMetadataActionContent t={t} params={params} close={close} />
+	),
 });
 
 export const RefreshLibraryMetadataAction = (

front/src/components/actions/resource-type.tsx

@@ -0,0 +1,181 @@
+/*
+ * Meelo is a music server and application to enjoy your personal music files anywhere, anytime you want.
+ * Copyright (C) 2023
+ *
+ * Meelo is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * Meelo is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { Chip, Grid } from "@mui/material";
+import type { useConfirm } from "material-ui-confirm";
+import { useState } from "react";
+import toast from "react-hot-toast";
+import { useTranslation } from "react-i18next";
+import API from "~/api";
+import type { QueryClient } from "~/api/use-query";
+import { EditIcon } from "~/components/icons";
+import type { TranslationKey } from "~/i18n/i18n";
+import type Album from "~/models/album";
+import { AlbumType } from "~/models/album";
+import type Song from "~/models/song";
+import { SongType } from "~/models/song";
+import type Video from "~/models/video";
+import { VideoType } from "~/models/video";
+import { store } from "~/state/store";
+import { userAtom } from "~/state/user";
+import type Action from "./";
+
+const ResourceTypeForm = <Enum extends TranslationKey>(props: {
+	defaultValue?: Enum;
+	values: readonly Enum[];
+	onSelect: (type: Enum) => void;
+}) => {
+	const [currentType, setType] = useState(props.defaultValue);
+	const { t } = useTranslation();
+
+	return (
+		<>
+			<Grid container spacing={2} justifyContent="center">
+				{props.values.map((type) => (
+					<Grid key={type}>
+						<Chip
+							label={t(type) as string}
+							variant={
+								type === currentType ? "filled" : "outlined"
+							}
+							onClick={() => {
+								setType(type);
+								props.onSelect(type);
+							}}
+						/>
+					</Grid>
+				))}
+			</Grid>
+		</>
+	);
+};
+
+const ChangeResourceType = <
+	T extends { type: TypeEnum },
+	TypeEnum extends TranslationKey,
+>(
+	resource: T,
+	types: readonly TypeEnum[],
+	label: TranslationKey,
+	queryClient: QueryClient,
+	onSelect: (newType: TypeEnum) => Promise<void>,
+	confirm: ReturnType<typeof useConfirm>,
+): Action => {
+	return {
+		label: label,
+		icon: <EditIcon />,
+		disabled: store.get(userAtom)?.admin !== true,
+		onClick: () =>
+			confirm({
+				title: <br />,
+				description: (
+					<ResourceTypeForm
+						defaultValue={resource.type}
+						values={types}
+						onSelect={(type) =>
+							toast
+								.promise(onSelect(type), {
+									loading: null,
+									success: "Update successful!",
+									error: "Update failed...",
+								})
+								.then(() => {
+									queryClient.client.invalidateQueries(
+										"songs",
+									);
+									queryClient.client.invalidateQueries(
+										"release",
+									);
+									queryClient.client.invalidateQueries(
+										"tracks",
+									);
+									queryClient.client.invalidateQueries(
+										"videos",
+									);
+									queryClient.client.invalidateQueries(
+										"bsides",
+									);
+								})
+						}
+					/>
+				),
+				cancellationButtonProps: { sx: { display: "none" } },
+				confirmationText: "OK",
+			}),
+	};
+};
+
+const ChangeSongType = (
+	s: Song,
+	client: QueryClient,
+	confirm: ReturnType<typeof useConfirm>,
+) =>
+	ChangeResourceType(
+		s,
+		SongType.filter((t) => t !== "Unknown"),
+		"changeSongType",
+		client,
+		(newType: SongType) =>
+			API.updateSong(s.id, { type: newType }).then((res) => {
+				client.client.invalidateQueries("songs");
+				client.client.invalidateQueries("release");
+				client.client.invalidateQueries("tracks");
+				client.client.invalidateQueries("videos");
+				client.client.invalidateQueries("bsides");
+				return res;
+			}),
+		confirm,
+	);
+
+const ChangeAlbumType = (
+	a: Album,
+	client: QueryClient,
+	confirm: ReturnType<typeof useConfirm>,
+) =>
+	ChangeResourceType(
+		a,
+		AlbumType,
+		"changeAlbumType",
+		client,
+		(newType: AlbumType) =>
+			API.updateAlbum(a.id, { type: newType }).then((res) => {
+				client.client.invalidateQueries("albums");
+				return res;
+			}),
+		confirm,
+	);
+
+const ChangeVideoType = (
+	v: Video,
+	client: QueryClient,
+	confirm: ReturnType<typeof useConfirm>,
+) =>
+	ChangeResourceType(
+		v,
+		VideoType,
+		"changeVideoType",
+		client,
+		(newType: VideoType) =>
+			API.updateVideo(v.id, { type: newType }).then((res) => {
+				client.client.invalidateQueries("videos");
+				return res;
+			}),
+		confirm,
+	);
+
+export { ChangeSongType, ChangeAlbumType, ChangeVideoType };

front/src/components/actions/share.tsx

@@ -16,10 +16,10 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Translator } from "../../i18n/i18n";
-import copyLinkToClipboard from "../../utils/copy-link";
-import { ShareIcon } from "../icons";
-import Action from "./action";
+import { ShareIcon } from "~/components/icons";
+import type { Translator } from "~/i18n/i18n";
+import copyLinkToClipboard from "~/utils/copy-link";
+import type Action from "./";
 
 export const ShareAction = (url: string, t: Translator): Action => ({
 	onClick: () => copyLinkToClipboard(url, t),

front/src/components/actions/show-track-info.tsx

@@ -16,19 +16,19 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { InfoIcon } from "../icons";
-import Action from "./action";
-import { useConfirm } from "material-ui-confirm";
-import API from "../../api/api";
-import { openTrackFileInfoModal } from "../track-file-info";
-import { QueryClient } from "../../api/use-query";
+import type { useConfirm } from "material-ui-confirm";
+import API from "~/api";
+import type { QueryClient } from "~/api/use-query";
+import { InfoIcon } from "~/components/icons";
+import { openTrackFileInfoModal } from "~/components/track-file-info";
+import type Action from "./";
 
 export const ShowTrackFileInfoAction = (
 	confirm: ReturnType<typeof useConfirm>,
 	trackId: number,
 ): Action => ({
 	icon: <InfoIcon />,
-	label: "moreInfo",
+	label: "trackInfo",
 	onClick: () => openTrackFileInfoModal(confirm, trackId),
 });
 
@@ -38,9 +38,9 @@ export const ShowMasterTrackFileInfoAction = (
 	songId: number,
 ): Action => ({
 	icon: <InfoIcon />,
-	label: "moreInfo",
+	label: "trackInfo",
 	onClick: () =>
 		queryClient
-			.fetchQuery(API.getMasterTrack(songId))
+			.fetchQuery(API.getSongMasterTrack(songId))
 			.then((track) => openTrackFileInfoModal(confirm, track.id)),
 });

front/src/components/actions/song-type.tsx

@@ -1,99 +0,0 @@
-/*
- * Meelo is a music server and application to enjoy your personal music files anywhere, anytime you want.
- * Copyright (C) 2023
- *
- * Meelo is free software: you can redistribute it and/or modify
- * it under the terms of the GNU General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * Meelo is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with this program.  If not, see <http://www.gnu.org/licenses/>.
- */
-
-import { QueryClient } from "../../api/use-query";
-import Action from "./action";
-import { useConfirm } from "material-ui-confirm";
-import store from "../../state/store";
-import { Chip, Grid } from "@mui/material";
-import { useState } from "react";
-import toast from "react-hot-toast";
-import API from "../../api/api";
-import { useMutation } from "react-query";
-import { EditIcon } from "../icons";
-import Song, { SongType } from "../../models/song";
-import { useTranslation } from "react-i18next";
-
-const SongTypeForm = (props: {
-	defaultValue: SongType;
-	onSelect: (type: SongType) => void;
-}) => {
-	const [currentType, setType] = useState(props.defaultValue);
-	const { t } = useTranslation();
-
-	return (
-		<>
-			<Grid container spacing={2} justifyContent="center">
-				{SongType.filter((type) => type != "Unknown").map((type) => (
-					<Grid item key={type}>
-						<Chip
-							label={t(type)}
-							variant={
-								type == currentType ? "filled" : "outlined"
-							}
-							onClick={() => {
-								setType(type);
-								props.onSelect(type);
-							}}
-						/>
-					</Grid>
-				))}
-			</Grid>
-		</>
-	);
-};
-
-const ChangeSongType = (
-	song: Song,
-	queryClient: QueryClient,
-	confirm: ReturnType<typeof useConfirm>,
-): Action => {
-	const { t } = useTranslation();
-	const mutation = useMutation((newType: SongType) => {
-		return API.updateSong(song.id, newType)
-			.then(() => {
-				toast.success("Update successful!");
-				queryClient.client.invalidateQueries("songs");
-				queryClient.client.invalidateQueries("release");
-				queryClient.client.invalidateQueries("tracks");
-				queryClient.client.invalidateQueries("videos");
-				queryClient.client.invalidateQueries("bsides");
-			})
-			.catch((error: Error) => toast.error(error.message));
-	});
-
-	return {
-		label: "changeSongType",
-		icon: <EditIcon />,
-		disabled: store.getState().user.user?.admin !== true,
-		onClick: () =>
-			confirm({
-				title: t("changeSongType"),
-				description: (
-					<SongTypeForm
-						defaultValue={song.type}
-						onSelect={(type) => mutation.mutate(type)}
-					/>
-				),
-				cancellationButtonProps: { sx: { display: "none" } },
-				confirmationText: t("done"),
-			}),
-	};
-};
-
-export default ChangeSongType;

front/src/components/actions/update-illustration.tsx

@@ -16,21 +16,22 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { QueryClient } from "../../api/use-query";
 import {
 	Button,
 	DialogActions,
 	DialogContent,
 	DialogTitle,
 } from "@mui/material";
-import Action from "./action";
-import store from "../../state/store";
-import { toast } from "react-hot-toast";
-import API from "../../api/api";
-import { useMutation } from "react-query";
 import { HookTextField, useHookForm } from "mui-react-hook-form-plus";
-import { UpdateIllustrationIcon } from "../icons";
+import { toast } from "react-hot-toast";
 import { useTranslation } from "react-i18next";
+import { useMutation } from "react-query";
+import API from "~/api";
+import type { QueryClient } from "~/api/use-query";
+import { UpdateIllustrationIcon } from "~/components/icons";
+import { store } from "~/state/store";
+import { userAtom } from "~/state/user";
+import type Action from "./";
 
 type IllustrationUpdateFormType = {
 	onSubmit: (newUrl: string) => void;
@@ -83,17 +84,16 @@ const IllustrationUpdateForm = (props: IllustrationUpdateFormType) => {
 
 const UpdateIllustrationAction = (
 	queryClient: QueryClient,
-	resourceId: number | string,
+	resourceId: number,
 	resourceType: "artist" | "track" | "release" | "playlist",
 ): Action => {
-	const textFieldId = `update-illustration-${resourceType}-${resourceId}`;
 	const mutation = useMutation(async (newUrl: string) => {
 		const updator =
-			resourceType == "artist"
+			resourceType === "artist"
 				? API.updateArtistIllustration
-				: resourceType == "release"
+				: resourceType === "release"
 					? API.updateReleaseIllustration
-					: resourceType == "playlist"
+					: resourceType === "playlist"
 						? API.updatePlaylistIllustration
 						: API.updateTrackIllustration;
 
@@ -101,14 +101,14 @@ const UpdateIllustrationAction = (
 			.then(() => {
 				toast.success("Illustration updated!");
 				queryClient.client.invalidateQueries(resourceType);
-				queryClient.client.invalidateQueries(resourceType + "s");
+				queryClient.client.invalidateQueries(`${resourceType}s`);
 			})
 			.catch(() => toast.error("Illustration update failed"));
 	});
 
 	return {
 		label: "changeIllutration",
-		disabled: store.getState().user.user?.admin !== true,
+		disabled: store.get(userAtom)?.admin !== true,
 		icon: <UpdateIllustrationIcon />,
 		dialog: (controls) => (
 			<IllustrationUpdateForm
@@ -121,23 +121,23 @@ const UpdateIllustrationAction = (
 
 const UpdateArtistIllustrationAction = (
 	queryClient: QueryClient,
-	artistSlugOrId: number | string,
-) => UpdateIllustrationAction(queryClient, artistSlugOrId, "artist");
+	artistId: number,
+) => UpdateIllustrationAction(queryClient, artistId, "artist");
 
 const UpdateReleaseIllustrationAction = (
 	queryClient: QueryClient,
-	releaseSlugOrId: number | string,
-) => UpdateIllustrationAction(queryClient, releaseSlugOrId, "release");
+	releaseId: number,
+) => UpdateIllustrationAction(queryClient, releaseId, "release");
 
 const UpdateTrackIllustrationAction = (
 	queryClient: QueryClient,
-	trackSlugOrId: number | string,
-) => UpdateIllustrationAction(queryClient, trackSlugOrId, "track");
+	trackId: number,
+) => UpdateIllustrationAction(queryClient, trackId, "track");
 
 const UpdatePlaylistIllustrationAction = (
 	queryClient: QueryClient,
-	playlistSlugOrId: number | string,
-) => UpdateIllustrationAction(queryClient, playlistSlugOrId, "playlist");
+	playlistId: number,
+) => UpdateIllustrationAction(queryClient, playlistId, "playlist");
 
 export {
 	UpdateArtistIllustrationAction,

front/src/components/admin-grid.tsx

@@ -16,11 +16,11 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { DataGrid, GridColDef } from "@mui/x-data-grid";
+import { DataGrid, type GridColDef } from "@mui/x-data-grid";
 import { useEffect, useMemo, useState } from "react";
-import API from "../api/api";
-import { MeeloInfiniteQueryFn, useInfiniteQuery } from "../api/use-query";
-import Resource from "../models/resource";
+import API from "~/api";
+import { type MeeloInfiniteQueryFn, useInfiniteQuery } from "~/api/use-query";
+import type Resource from "~/models/resource";
 
 type AdminGridProps<DataType extends Resource> = {
 	infiniteQuery: MeeloInfiniteQueryFn<DataType>;
@@ -36,41 +36,36 @@ const AdminGrid = <DataType extends Resource>({
 }: AdminGridProps<DataType>) => {
 	const {
 		data,
+		items,
 		hasNextPage,
 		hasPreviousPage,
 		fetchNextPage,
 		fetchPreviousPage,
 	} = useInfiniteQuery(infiniteQuery);
 	const [currentPage, setCurrentPage] = useState(0);
-	const itemsCount = useMemo(
-		() =>
-			data?.pages
-				.map((page) => page.items.length)
-				.reduce((pageSize, sum) => pageSize + sum, 0) ?? 0,
-		[data?.pages],
-	);
+	const itemsCount = useMemo(() => items?.length, [items]);
 
 	useEffect(() => {
 		hasNextPage && fetchNextPage();
-		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [hasNextPage]);
 	return (
 		<DataGrid
-			loading={data?.pages[currentPage] == undefined}
+			loading={data?.pages.at(currentPage) === undefined}
 			rows={data?.pages[currentPage]?.items ?? []}
 			rowCount={itemsCount}
-			pageSize={API.defaultPageSize}
-			rowsPerPageOptions={[API.defaultPageSize]}
-			page={currentPage}
+			paginationModel={{
+				pageSize: API.defaultPageSize,
+				page: currentPage,
+			}}
+			pageSizeOptions={[API.defaultPageSize]}
 			disableColumnSelector
+			disableRowSelectionOnClick
 			disableColumnMenu
-			disableSelectionOnClick
 			paginationMode="server"
-			autoHeight
-			onPageChange={(page) => {
-				if (page == currentPage + 1 && hasNextPage) {
+			onPaginationModelChange={({ page }) => {
+				if (page === currentPage + 1 && hasNextPage) {
 					fetchNextPage();
-				} else if (page == currentPage - 1 && hasPreviousPage) {
+				} else if (page === currentPage - 1 && hasPreviousPage) {
 					fetchPreviousPage();
 				}
 				setCurrentPage(page);

front/src/components/artist-avatar.tsx

@@ -17,9 +17,10 @@
  */
 
 import { Avatar } from "@mui/material";
+import type { ComponentProps } from "react";
+import type IllustrationModel from "~/models/illustration";
+import { ArtistIcon } from "./icons";
 import Illustration from "./illustration";
-import IllustrationModel from "../models/illustration";
-import { ComponentProps } from "react";
 
 const ArtistAvatar = (props: {
 	illustration: IllustrationModel | undefined | null;
@@ -39,6 +40,7 @@ const ArtistAvatar = (props: {
 				imgProps={{ objectFit: "cover" }}
 				illustration={props.illustration}
 				quality={props.quality}
+				fallback={<ArtistIcon />}
 			/>
 		</Avatar>
 	);

front/src/components/authentication/form.tsx

@@ -16,24 +16,24 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Button, Divider, Grid } from "@mui/material";
+import { Box, Button, Divider, Stack } from "@mui/material";
+import { useAtom } from "jotai";
 import { HookTextField, useHookForm } from "mui-react-hook-form-plus";
 import { useState } from "react";
 import { toast } from "react-hot-toast";
-import { useDispatch } from "react-redux";
-import API from "../../api/api";
-import { setAccessToken } from "../../state/userSlice";
 import { useTranslation } from "react-i18next";
+import API from "~/api";
+import { accessTokenAtom } from "~/state/user";
 
 /**
  * Authentication form
  * On successful authentication, update store with access token
  */
 const AuthenticationForm = () => {
-	const dispatch = useDispatch();
 	const [formType, setFormType] = useState<"login" | "signup">("login");
 	const defaultValues = { username: "", password: "", confirm: "" };
 	const [password, setPassword] = useState(defaultValues.password);
+	const [_, setAccessToken] = useAtom(accessTokenAtom);
 	const { registerState, handleSubmit } = useHookForm({
 		defaultValues,
 	});
@@ -41,7 +41,7 @@ const AuthenticationForm = () => {
 
 	const onSubmit = async (values: typeof defaultValues) => {
 		try {
-			if (formType == "signup") {
+			if (formType === "signup") {
 				const createdUser = await API.register(values);
 
 				if (!createdUser.enabled) {
@@ -50,7 +50,7 @@ const AuthenticationForm = () => {
 					return;
 				}
 			}
-			dispatch(setAccessToken((await API.login(values)).access_token));
+			setAccessToken((await API.login(values)).access_token);
 		} catch (error: any) {
 			toast.error(error.message);
 		}
@@ -61,9 +61,7 @@ const AuthenticationForm = () => {
 			onSubmit={handleSubmit(onSubmit)}
 			style={{ width: "100%", height: "100%" }}
 		>
-			<Grid
-				container
-				direction="column"
+			<Stack
 				spacing={3}
 				sx={{
 					display: "flex",
@@ -110,7 +108,7 @@ const AuthenticationForm = () => {
 						},
 					}}
 				/>
-				{formType == "signup" && (
+				{formType === "signup" && (
 					<HookTextField
 						{...registerState("confirm")}
 						textFieldProps={{
@@ -131,33 +129,33 @@ const AuthenticationForm = () => {
 						}}
 					/>
 				)}
-				<Grid item>
+				<Box>
 					<Button
 						type="submit"
 						variant="contained"
 						onClick={() => {}}
 					>
-						{formType == "login" ? "Login" : "Signup"}
+						{formType === "login" ? "Login" : "Signup"}
 					</Button>
-				</Grid>
-				<Divider sx={{ width: "100%", paddingY: 1 }} variant="middle" />
-				<Grid item>
+				</Box>
+				<Divider sx={{ width: "100%" }} variant="middle" />
+				<Box>
 					<Button
 						variant="outlined"
 						onClick={() =>
 							setFormType(
-								formType == "login" ? "signup" : "login",
+								formType === "login" ? "signup" : "login",
 							)
 						}
 					>
 						{t(
-							formType == "login"
+							formType === "login"
 								? "signupButton"
 								: "signinButton",
 						)}
 					</Button>
-				</Grid>
-			</Grid>
+				</Box>
+			</Stack>
 		</form>
 	);
 };

front/src/components/authentication/wall.tsx

@@ -16,28 +16,24 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { prepareMeeloQuery } from "../../api/use-query";
-import ModalPage from "../modal-page";
-import AuthenticationForm from "./authentication-form";
-import { Grid } from "@mui/material";
+import { Box, Stack } from "@mui/material";
+import { useAtom } from "jotai";
 import { useEffect, useState } from "react";
-import API from "../../api/api";
-import { RootState } from "../../state/store";
-import { useDispatch, useSelector } from "react-redux";
-import { setUserProfile } from "../../state/userSlice";
-// eslint-disable-next-line no-restricted-imports
 import { useQuery as useReactQuery } from "react-query";
-import ThemedImage from "../themed-image";
+import API from "~/api";
+import { prepareMeeloQuery } from "~/api/use-query";
+import ModalPage from "~/components/modal-page";
+import ThemedImage from "~/components/themed-image";
+import { accessTokenAtom, userAtom } from "~/state/user";
+import AuthenticationForm from "./form";
 
 const AuthenticationWall = (props: { children: any }) => {
-	const accessToken = useSelector(
-		(store: RootState) => store.user.accessToken,
-	);
+	const [accessToken] = useAtom(accessTokenAtom);
+	const [_, setUser] = useAtom(userAtom);
 	const status = useReactQuery({
 		...prepareMeeloQuery(API.getCurrentUserStatus),
 		useErrorBoundary: false,
 	});
-	const dispatch = useDispatch();
 	const [authentified, setAuthenticationStatus] = useState(
 		status.data?.id !== undefined,
 	);
@@ -49,33 +45,29 @@ const AuthenticationWall = (props: { children: any }) => {
 		if (accessToken && status.data?.id && !status.error) {
 			setAuthenticationStatus(true);
 		}
-		if (status.error || accessToken?.valueOf() == undefined) {
+		if (status.error || accessToken === undefined) {
 			setAuthenticationStatus(false);
 		}
 	}, [accessToken, status, authentified]);
 	useEffect(() => {
 		if (accessToken && status.data && !status.error) {
-			dispatch(setUserProfile(status.data));
+			setUser(status.data);
 		}
-	}, [accessToken, status, dispatch]);
+	}, [accessToken, status]);
 	if (!authentified || !status.data?.id) {
 		return (
 			<ModalPage open>
-				<Grid
-					container
-					direction="column"
+				<Stack
 					sx={{
 						width: "100%",
 						height: "100%",
 						display: "flex",
 						flexWrap: "nowrap",
-						justifyContent: "center",
+						justifyContent: "space-evenly",
 						alignItems: "center",
 					}}
 				>
-					<Grid
-						xs={2}
-						item
+					<Box
 						sx={{
 							position: "relative",
 							width: "100%",
@@ -84,19 +76,19 @@ const AuthenticationWall = (props: { children: any }) => {
 						}}
 					>
 						<ThemedImage
-							light={"/banner-black.png"}
-							dark={"/banner.png"}
+							light={"/banner1-black.png"}
+							dark={"/banner1-white.png"}
 							alt="title"
 							width={200}
 							height={150}
 							priority
 							style={{ objectFit: "contain" }}
 						/>
-					</Grid>
-					<Grid item xs>
+					</Box>
+					<Box flexGrow={1}>
 						<AuthenticationForm />
-					</Grid>
-				</Grid>
+					</Box>
+				</Stack>
 			</ModalPage>
 		);
 	}

front/src/components/blurhash.tsx

@@ -17,9 +17,9 @@
  */
 
 import { Box } from "@mui/material";
-import { blurHashToDataURL } from "../utils/blurhashToDataUrl";
+import { type ComponentProps, useEffect, useMemo, useState } from "react";
 import { Blurhash as RBlurhash } from "react-blurhash";
-import { ComponentProps, useEffect, useMemo, useState } from "react";
+import { blurHashToDataURL } from "~/utils/blurhashToDataUrl";
 
 type BlurhashProps = ComponentProps<typeof Box> & {
 	blurhash?: string;

front/src/components/confirm-download-action.tsx

@@ -16,8 +16,8 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { useConfirm } from "material-ui-confirm";
-import { Translator } from "../i18n/i18n";
+import type { useConfirm } from "material-ui-confirm";
+import type { Translator } from "~/i18n/i18n";
 
 const confirmDownloadAction = (
 	confirm: ReturnType<typeof useConfirm>,

front/src/components/contextual-menu/contextual-menu-item.tsx

@@ -1,72 +0,0 @@
-/*
- * Meelo is a music server and application to enjoy your personal music files anywhere, anytime you want.
- * Copyright (C) 2023
- *
- * Meelo is free software: you can redistribute it and/or modify
- * it under the terms of the GNU General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * Meelo is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with this program.  If not, see <http://www.gnu.org/licenses/>.
- */
-
-import { Dialog, ListItemIcon, ListItemText, MenuItem } from "@mui/material";
-import Link from "next/link";
-import Action from "../actions/action";
-import { useState } from "react";
-import { useTranslation } from "react-i18next";
-
-const ContextualMenuItem = (props: Action & { onDialogClose: () => void }) => {
-	const { t } = useTranslation();
-	const [modalOpen, setModalOpen] = useState(false);
-	const onClick = () => {
-		if (props.disabled === true) {
-			return;
-		}
-		props.onClick && props.onClick();
-		if (props.dialog) {
-			setModalOpen(true);
-		}
-	};
-	const closeModal = () => {
-		setModalOpen(false);
-		props.onDialogClose();
-	};
-	const item = (
-		<MenuItem
-			disabled={props.disabled}
-			onClick={onClick}
-			sx={{ borderRadius: "0" }}
-		>
-			{props.icon && <ListItemIcon>{props.icon}</ListItemIcon>}
-			<ListItemText>{t(props.label)}</ListItemText>
-		</MenuItem>
-	);
-
-	if (props.href && !props.disabled) {
-		return <Link href={props.href}>{item}</Link>;
-	}
-	return (
-		<>
-			{item}
-			{props.dialog && (
-				<Dialog
-					open={modalOpen}
-					onClose={closeModal}
-					fullWidth
-					sx={{ zIndex: 999999 }}
-				>
-					{props.dialog({ close: closeModal })}
-				</Dialog>
-			)}
-		</>
-	);
-};
-
-export default ContextualMenuItem;

front/src/components/contextual-menu/contextual-menu.tsx

@@ -1,93 +0,0 @@
-/*
- * Meelo is a music server and application to enjoy your personal music files anywhere, anytime you want.
- * Copyright (C) 2023
- *
- * Meelo is free software: you can redistribute it and/or modify
- * it under the terms of the GNU General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * Meelo is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with this program.  If not, see <http://www.gnu.org/licenses/>.
- */
-
-import { ContextualMenuIcon } from "../icons";
-import { Box, Divider, IconButton, Menu } from "@mui/material";
-import { useState } from "react";
-import Action from "../actions/action";
-import ContextualMenuItem from "./contextual-menu-item";
-
-type ContextualMenuProps = {
-	actions: Action[][];
-	onSelect?: (action: Action) => void;
-	buttonIcon?: JSX.Element;
-};
-const ContextualMenu = (props: ContextualMenuProps) => {
-	const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
-	const open = Boolean(anchorEl);
-	const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-		setAnchorEl(event.currentTarget);
-	};
-	const handleClose = () => setAnchorEl(null);
-
-	return (
-		<>
-			<IconButton
-				id="basic-button"
-				aria-controls={open ? "basic-menu" : undefined}
-				aria-haspopup="true"
-				aria-expanded={open ? "true" : undefined}
-				onClick={handleClick}
-				color="inherit"
-			>
-				{props.buttonIcon ?? <ContextualMenuIcon />}
-			</IconButton>
-			<Menu
-				anchorEl={anchorEl}
-				open={open}
-				onClose={handleClose}
-				style={{ zIndex: 99999 }}
-			>
-				{props.actions.map((actions, actionGroupIndex, allActions) =>
-					[
-						actions.map((action, actionIndex) => (
-							<Box
-								key={`${actionGroupIndex}/${actionIndex}`}
-								onClick={() => {
-									// If the action is NOT a dialog, close and unmount the menu.
-									// If it is a dialog, we need to keep it mounted, so we have to keep it open
-									if (!action.dialog) {
-										handleClose();
-									}
-									props.onSelect && props.onSelect(action);
-								}}
-							>
-								<ContextualMenuItem
-									{...action}
-									onDialogClose={handleClose}
-								/>
-							</Box>
-						)),
-					].concat(
-						actionGroupIndex < allActions.length - 1
-							? [
-									<Divider
-										key={actionGroupIndex}
-										sx={{ marginY: 0.5 }}
-										variant="middle"
-									/>,
-								]
-							: [],
-					),
-				)}
-			</Menu>
-		</>
-	);
-};
-
-export default ContextualMenu;

front/src/components/contextual-menu/index.tsx

@@ -0,0 +1,153 @@
+/*
+ * Meelo is a music server and application to enjoy your personal music files anywhere, anytime you want.
+ * Copyright (C) 2023
+ *
+ * Meelo is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * Meelo is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import {
+	Box,
+	Dialog,
+	Divider,
+	IconButton,
+	ListItemIcon,
+	ListItemText,
+	Menu,
+	MenuItem,
+} from "@mui/material";
+import Link from "next/link";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import type Action from "~/components/actions";
+import { ContextualMenuIcon } from "~/components/icons";
+
+export type ContextualMenuProps = {
+	actions: Action[][];
+	onSelect?: (action: Action) => void;
+	buttonIcon?: JSX.Element;
+};
+
+export const ContextualMenu = (props: ContextualMenuProps) => {
+	const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+	const open = Boolean(anchorEl);
+	const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+		setAnchorEl(event.currentTarget);
+	};
+	const handleClose = () => setAnchorEl(null);
+
+	return (
+		<>
+			<IconButton
+				id="basic-button"
+				aria-controls={open ? "basic-menu" : undefined}
+				aria-haspopup="true"
+				aria-expanded={open ? "true" : undefined}
+				onClick={handleClick}
+				color="inherit"
+			>
+				{props.buttonIcon ?? <ContextualMenuIcon />}
+			</IconButton>
+			<Menu
+				anchorEl={anchorEl}
+				open={open}
+				onClose={handleClose}
+				style={{ zIndex: 99999 }}
+			>
+				{props.actions
+					.filter((actionList) => actionList.length > 0)
+					.map((actions, actionGroupIndex, allActions) =>
+						[
+							actions.map((action, actionIndex) => (
+								<Box
+									key={`${actionGroupIndex}/${actionIndex}`}
+									onClick={() => {
+										// If the action is NOT a dialog, close and unmount the menu.
+										// If it is a dialog, we need to keep it mounted, so we have to keep it open
+										if (!action.dialog) {
+											handleClose();
+										}
+										props.onSelect?.(action);
+									}}
+								>
+									<ContextualMenuItem
+										{...action}
+										onDialogClose={handleClose}
+									/>
+								</Box>
+							)),
+						].concat(
+							actionGroupIndex < allActions.length - 1
+								? [
+										<Divider
+											key={actionGroupIndex}
+											sx={{ marginY: 0.5 }}
+											variant="middle"
+										/>,
+									]
+								: [],
+						),
+					)}
+			</Menu>
+		</>
+	);
+};
+
+export const ContextualMenuItem = (
+	props: Action & { onDialogClose: () => void },
+) => {
+	const { t } = useTranslation();
+	const [modalOpen, setModalOpen] = useState(false);
+	const onClick = () => {
+		if (props.disabled === true) {
+			return;
+		}
+		props.onClick?.();
+		if (props.dialog) {
+			setModalOpen(true);
+		}
+	};
+	const closeModal = () => {
+		setModalOpen(false);
+		props.onDialogClose();
+	};
+	const item = (
+		<MenuItem
+			disabled={props.disabled}
+			onClick={onClick}
+			sx={{ borderRadius: "0" }}
+		>
+			{props.icon && <ListItemIcon>{props.icon}</ListItemIcon>}
+			<ListItemText>{t(props.label)}</ListItemText>
+		</MenuItem>
+	);
+
+	if (props.href && !props.disabled) {
+		return <Link href={props.href}>{item}</Link>;
+	}
+	return (
+		<>
+			{item}
+			{props.dialog && (
+				<Dialog
+					open={modalOpen}
+					onClose={closeModal}
+					fullWidth
+					sx={{ zIndex: 999999 }}
+				>
+					{props.dialog({ close: closeModal })}
+				</Dialog>
+			)}
+		</>
+	);
+};

front/src/components/contextual-menu/resource/album.tsx

@@ -17,16 +17,16 @@
  */
 
 import { useConfirm } from "material-ui-confirm";
-import API from "../../api/api";
-import { DownloadReleaseAsyncAction } from "../actions/download";
-import { GoToArtistAction } from "../actions/link";
-import { ShareAlbumAction } from "../actions/share";
-import ContextualMenu from "./contextual-menu";
-import { AlbumWithRelations } from "../../models/album";
-import { useQueryClient } from "../../api/use-query";
-import ChangeAlbumType from "../actions/album-type";
-import { RefreshAlbumMetadataAction } from "../actions/refresh-metadata";
 import { useTranslation } from "react-i18next";
+import API from "~/api";
+import { useQueryClient } from "~/api/use-query";
+import { DownloadReleaseAsyncAction } from "~/components/actions/download";
+import { GoToArtistAction } from "~/components/actions/link";
+import { RefreshAlbumMetadataAction } from "~/components/actions/refresh-metadata";
+import { ChangeAlbumType } from "~/components/actions/resource-type";
+import { ShareAlbumAction } from "~/components/actions/share";
+import type { AlbumWithRelations } from "~/models/album";
+import { ContextualMenu } from "..";
 
 type AlbumContextualMenuProps = {
 	album: AlbumWithRelations<"artist">;

front/src/components/contextual-menu/resource/artist.tsx

@@ -16,17 +16,17 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import Artist from "../../models/artist";
-import ContextualMenu from "./contextual-menu";
+import { useTranslation } from "react-i18next";
+import { useQueryClient } from "~/api/use-query";
 import {
 	GoToArtistAction,
 	GoToArtistAlbumsAction,
 	GoToArtistSongsAction,
-} from "../actions/link";
-import { ShareArtistAction } from "../actions/share";
-import { UpdateArtistIllustrationAction } from "../actions/update-illustration";
-import { useQueryClient } from "../../api/use-query";
-import { useTranslation } from "react-i18next";
+} from "~/components/actions/link";
+import { ShareArtistAction } from "~/components/actions/share";
+import { UpdateArtistIllustrationAction } from "~/components/actions/update-illustration";
+import type Artist from "~/models/artist";
+import { ContextualMenu } from "..";
 
 type ArtistContextualMenuProps = {
 	artist: Artist;

front/src/components/contextual-menu/resource/playlist.tsx

@@ -16,18 +16,18 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import Playlist from "../../models/playlist";
-import { SharePlaylistAction } from "../actions/share";
-import { UpdatePlaylistIllustrationAction } from "../actions/update-illustration";
-import ContextualMenu from "./contextual-menu";
-import { useQueryClient } from "../../api/use-query";
-import {
-	DeletePlaylistAction,
-	UpdatePlaylistAction,
-} from "../actions/playlist";
 import { useConfirm } from "material-ui-confirm";
 import { useRouter } from "next/router";
 import { useTranslation } from "react-i18next";
+import { useQueryClient } from "~/api/use-query";
+import {
+	DeletePlaylistAction,
+	UpdatePlaylistAction,
+} from "~/components/actions/playlist";
+import { SharePlaylistAction } from "~/components/actions/share";
+import { UpdatePlaylistIllustrationAction } from "~/components/actions/update-illustration";
+import type Playlist from "~/models/playlist";
+import { ContextualMenu } from "..";
 
 type PlaylistContextualMenuProps = {
 	playlist: Playlist;
@@ -48,7 +48,7 @@ const PlaylistContextualMenu = (props: PlaylistContextualMenuProps) => {
 				[
 					UpdatePlaylistIllustrationAction(
 						queryClient,
-						props.playlist.slug,
+						props.playlist.id,
 					),
 				],
 				[SharePlaylistAction(props.playlist.slug, t)],

front/src/components/contextual-menu/resource/release-track.tsx

@@ -16,30 +16,30 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import Artist from "../../models/artist";
-import ContextualMenu from "./contextual-menu";
 import { useConfirm } from "material-ui-confirm";
-import { DownloadAction } from "../actions/download";
+import { useTranslation } from "react-i18next";
+import { useQueryClient } from "~/api/use-query";
+import { DownloadAction } from "~/components/actions/download";
 import {
 	GoToArtistAction,
 	GoToRelatedTracksAction,
+	GoToSongInfoAction,
 	GoToSongLyricsAction,
 	GoToSongVersionAction,
-} from "../actions/link";
+} from "~/components/actions/link";
 import {
 	AddToPlaylistAction,
 	PlayAfterAction,
 	PlayNextAction,
-} from "../actions/playlist";
-import { ShareSongAction } from "../actions/share";
-import { ShowTrackFileInfoAction } from "../actions/show-track-info";
-import { TrackWithRelations } from "../../models/track";
-import { UpdateTrackIllustrationAction } from "../actions/update-illustration";
-import { useQueryClient } from "../../api/use-query";
-import { RefreshTrackMetadataAction } from "../actions/refresh-metadata";
-import ChangeSongType from "../actions/song-type";
-import { useTranslation } from "react-i18next";
-import { usePlayerContext } from "../../contexts/player";
+} from "~/components/actions/playlist";
+import { RefreshTrackMetadataAction } from "~/components/actions/refresh-metadata";
+import { ChangeSongType } from "~/components/actions/resource-type";
+import { ShareSongAction } from "~/components/actions/share";
+import { ShowTrackFileInfoAction } from "~/components/actions/show-track-info";
+import { UpdateTrackIllustrationAction } from "~/components/actions/update-illustration";
+import type Artist from "~/models/artist";
+import type { TrackWithRelations } from "~/models/track";
+import { ContextualMenu } from "..";
 
 type ReleaseTrackContextualMenuProps = {
 	track: TrackWithRelations<"song" | "illustration">;
@@ -48,36 +48,52 @@ type ReleaseTrackContextualMenuProps = {
 };
 
 const ReleaseTrackContextualMenu = (props: ReleaseTrackContextualMenuProps) => {
-	const songSlug = props.track.song.slug;
+	const songSlug = props.track.song?.slug;
 	const confirm = useConfirm();
 	const queryClient = useQueryClient();
 	const { t } = useTranslation();
-	const { playNext, playAfter } = usePlayerContext();
 
 	return (
 		<ContextualMenu
 			onSelect={props.onSelect}
 			actions={[
 				[GoToArtistAction(props.artist.slug)],
-				[GoToSongLyricsAction(songSlug)],
+				songSlug
+					? [
+							GoToSongLyricsAction(songSlug),
+							GoToSongInfoAction(songSlug),
+						]
+					: [],
 				[
-					PlayNextAction(async () => props, playNext),
-					PlayAfterAction(async () => props, playAfter),
+					PlayNextAction(async () => props),
+					PlayAfterAction(async () => props),
 				],
-				[AddToPlaylistAction(props.track.song.id, queryClient)],
+				props.track.songId
+					? [AddToPlaylistAction(props.track.songId, queryClient)]
+					: [],
+				songSlug
+					? [
+							GoToSongVersionAction(songSlug),
+							GoToRelatedTracksAction(songSlug),
+						]
+					: [],
 				[
-					GoToSongVersionAction(songSlug),
-					GoToRelatedTracksAction(songSlug),
-				],
-				[
-					ChangeSongType(props.track.song, queryClient, confirm),
+					...(props.track.song
+						? [
+								ChangeSongType(
+									props.track.song,
+									queryClient,
+									confirm,
+								),
+							]
+						: []),
 					UpdateTrackIllustrationAction(queryClient, props.track.id),
 					RefreshTrackMetadataAction(props.track.id, t),
 				],
 				[ShowTrackFileInfoAction(confirm, props.track.id)],
 				[
 					DownloadAction(confirm, props.track.sourceFileId, t),
-					ShareSongAction(songSlug, t),
+					...(songSlug ? [ShareSongAction(songSlug, t)] : []),
 				],
 			]}
 		/>

front/src/components/contextual-menu/resource/release.tsx

@@ -16,37 +16,38 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { MasterIcon, UpgradeIcon } from "../icons";
-import { toast } from "react-hot-toast";
-import { useMutation } from "react-query";
-import { useQueryClient } from "../../api/use-query";
-import API from "../../api/api";
-import ContextualMenu from "./contextual-menu";
-import { GoToAlbumAction, GoToArtistAction } from "../actions/link";
-import { useSelector } from "react-redux";
-import { RootState } from "../../state/store";
-import { ShareReleaseAction } from "../actions/share";
-import { DownloadReleaseAction } from "../actions/download";
+import { useAtom } from "jotai";
 import { useConfirm } from "material-ui-confirm";
-import { ReleaseWithRelations } from "../../models/release";
-import { UpdateReleaseIllustrationAction } from "../actions/update-illustration";
-import ChangeAlbumType from "../actions/album-type";
-import { RefreshReleaseMetadataAction } from "../actions/refresh-metadata";
+import { toast } from "react-hot-toast";
 import { useTranslation } from "react-i18next";
+import { useMutation } from "react-query";
+import API from "~/api";
+import { useQueryClient } from "~/api/use-query";
+import { DownloadReleaseAction } from "~/components/actions/download";
+import { GoToAlbumAction, GoToArtistAction } from "~/components/actions/link";
+import { RefreshReleaseMetadataAction } from "~/components/actions/refresh-metadata";
+import { ChangeAlbumType } from "~/components/actions/resource-type";
+import { ShareReleaseAction } from "~/components/actions/share";
+import { UpdateReleaseIllustrationAction } from "~/components/actions/update-illustration";
+import { MasterIcon, UpgradeIcon } from "~/components/icons";
+import type { ReleaseWithRelations } from "~/models/release";
+import { userAtom } from "~/state/user";
+import { ContextualMenu } from "..";
 
 type ReleaseContextualMenuProps = {
 	release: ReleaseWithRelations<"album">;
 };
 
 const ReleaseContextualMenu = (props: ReleaseContextualMenuProps) => {
-	const userIsAdmin = useSelector(
-		(state: RootState) => state.user.user?.admin == true,
-	);
+	const [user] = useAtom(userAtom);
+	const userIsAdmin = user?.admin === true;
 	const queryClient = useQueryClient();
 	const confirm = useConfirm();
 	const { t } = useTranslation();
 	const masterMutation = useMutation(async () => {
-		return API.setReleaseAsMaster(props.release.id)
+		return API.updateAlbum(props.release.albumId, {
+			masterReleaseId: props.release.id,
+		})
 			.then(() => {
 				toast.success(t("releaseSetAsMaster"));
 				queryClient.client.invalidateQueries();
@@ -64,7 +65,12 @@ const ReleaseContextualMenu = (props: ReleaseContextualMenuProps) => {
 				Promise.allSettled(
 					tracks
 						.reverse()
-						.map((track) => API.setTrackAsMaster(track.id)),
+						.filter((track) => track.songId != null)
+						.map((track) =>
+							API.updateSong(track.songId!, {
+								masterTrackId: track.id,
+							}),
+						),
 				)
 					.then(() => {
 						toast.success(t("tracksUpdated"));
@@ -85,7 +91,7 @@ const ReleaseContextualMenu = (props: ReleaseContextualMenuProps) => {
 					{
 						label: "setAsMaster",
 						disabled:
-							props.release.id == props.release.album.masterId ||
+							props.release.id === props.release.album.masterId ||
 							!userIsAdmin,
 						icon: <MasterIcon />,
 						onClick: () => masterMutation.mutate(),

front/src/components/contextual-menu/resource/song.tsx

@@ -16,33 +16,33 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { useRouter } from "next/router";
-import API from "../../api/api";
-import ContextualMenu from "./contextual-menu";
 import { useConfirm } from "material-ui-confirm";
-import { DownloadAsyncAction } from "../actions/download";
+import { useRouter } from "next/router";
+import { toast } from "react-hot-toast";
+import { useTranslation } from "react-i18next";
+import API from "~/api";
+import { useQueryClient } from "~/api/use-query";
+import { DownloadAsyncAction } from "~/components/actions/download";
 import {
 	GoToArtistAction,
 	GoToRelatedTracksAction,
 	GoToReleaseAsyncAction,
+	GoToSongInfoAction,
 	GoToSongLyricsAction,
 	GoToSongVersionAction,
-} from "../actions/link";
+} from "~/components/actions/link";
 import {
 	AddToPlaylistAction,
 	PlayAfterAction,
 	PlayNextAction,
-} from "../actions/playlist";
-import { ShareSongAction } from "../actions/share";
-import { ShowMasterTrackFileInfoAction } from "../actions/show-track-info";
-import { SongWithRelations } from "../../models/song";
-import { useQueryClient } from "../../api/use-query";
-import { toast } from "react-hot-toast";
-import ChangeSongType from "../actions/song-type";
-import { RefreshSongMetadataAction } from "../actions/refresh-metadata";
-import { DeleteIcon } from "../icons";
-import { useTranslation } from "react-i18next";
-import { usePlayerContext } from "../../contexts/player";
+} from "~/components/actions/playlist";
+import { RefreshSongMetadataAction } from "~/components/actions/refresh-metadata";
+import { ChangeSongType } from "~/components/actions/resource-type";
+import { ShareSongAction } from "~/components/actions/share";
+import { ShowMasterTrackFileInfoAction } from "~/components/actions/show-track-info";
+import { DeleteIcon } from "~/components/icons";
+import type { SongWithRelations } from "~/models/song";
+import { ContextualMenu } from "..";
 
 type SongContextualMenuProps = {
 	song: SongWithRelations<"artist">;
@@ -55,10 +55,9 @@ const SongContextualMenu = (props: SongContextualMenuProps) => {
 	const songSlug = props.song.slug;
 	const queryClient = useQueryClient();
 	const { t } = useTranslation();
-	const { playNext, playAfter } = usePlayerContext();
 	const getMasterTrack = () =>
 		queryClient.fetchQuery(
-			API.getMasterTrack(songSlug, ["release", "illustration"]),
+			API.getSongMasterTrack(songSlug, ["release", "illustration"]),
 		);
 	const router = useRouter();
 	const confirm = useConfirm();
@@ -76,13 +75,14 @@ const SongContextualMenu = (props: SongContextualMenuProps) => {
 					GoToArtistAction(props.song.artist.slug),
 					GoToReleaseAsyncAction(
 						router,
-						async () => (await getMasterTrack()).release.slug,
+						async () =>
+							(await getMasterTrack()).release?.slug ?? null,
 					),
 				],
-				[GoToSongLyricsAction(songSlug)],
+				[GoToSongLyricsAction(songSlug), GoToSongInfoAction(songSlug)],
 				[
-					PlayNextAction(getPlayNextProps, playNext),
-					PlayAfterAction(getPlayNextProps, playAfter),
+					PlayNextAction(getPlayNextProps),
+					PlayAfterAction(getPlayNextProps),
 				],
 				[AddToPlaylistAction(props.song.id, queryClient)],
 				[

front/src/components/contextual-menu/resource/track.tsx

@@ -0,0 +1,136 @@
+/*
+ * Meelo is a music server and application to enjoy your personal music files anywhere, anytime you want.
+ * Copyright (C) 2023
+ *
+ * Meelo is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * Meelo is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { useAtom } from "jotai";
+import { useConfirm } from "material-ui-confirm";
+import { toast } from "react-hot-toast";
+import { useTranslation } from "react-i18next";
+import { useMutation } from "react-query";
+import API from "~/api";
+import { useQueryClient } from "~/api/use-query";
+import type Action from "~/components/actions";
+import { DownloadAction } from "~/components/actions/download";
+import {
+	GoToReleaseAction,
+	GoToSongInfoAction,
+	GoToSongLyricsAction,
+} from "~/components/actions/link";
+import {
+	AddToPlaylistAction,
+	PlayAfterAction,
+	PlayNextAction,
+} from "~/components/actions/playlist";
+import { RefreshTrackMetadataAction } from "~/components/actions/refresh-metadata";
+import { ChangeSongType } from "~/components/actions/resource-type";
+import { ShowTrackFileInfoAction } from "~/components/actions/show-track-info";
+import { UpdateTrackIllustrationAction } from "~/components/actions/update-illustration";
+import { MasterIcon } from "~/components/icons";
+import type { TrackWithRelations } from "~/models/track";
+import { userAtom } from "~/state/user";
+import { ContextualMenu } from "..";
+
+type TrackContextualMenuProps = {
+	track: TrackWithRelations<"video" | "song" | "illustration">;
+	onSelect?: () => void;
+};
+
+const TrackContextualMenu = (props: TrackContextualMenuProps) => {
+	const [user] = useAtom(userAtom);
+	const userIsAdmin = user?.admin === true;
+	const queryClient = useQueryClient();
+	const confirm = useConfirm();
+	const isMaster = props.track.song?.masterId === props.track.id;
+	const getPlayNextProps = () =>
+		Promise.all([
+			queryClient.fetchQuery(
+				API.getArtist(
+					(props.track.song ?? props.track.video)!.artistId,
+				),
+			),
+			props.track.releaseId &&
+				queryClient.fetchQuery(API.getRelease(props.track.releaseId)),
+		]).then(([artist, release]) => ({
+			track: props.track,
+			artist,
+			release,
+		}));
+	const { t } = useTranslation();
+	const masterMutation = useMutation(async () => {
+		return API.updateSong(props.track.songId!, {
+			masterTrackId: props.track.id,
+		})
+			.then(() => {
+				toast.success(t("trackSetAsMaster"));
+				queryClient.client.invalidateQueries();
+			})
+			.catch((error: Error) => toast.error(error.message));
+	});
+
+	return (
+		<ContextualMenu
+			onSelect={props.onSelect}
+			actions={[
+				[
+					props.track.releaseId
+						? GoToReleaseAction(props.track.releaseId)
+						: undefined,
+				].filter((a): a is Action => a !== undefined),
+				props.track.song
+					? [
+							GoToSongLyricsAction(props.track.song.slug),
+							GoToSongInfoAction(props.track.song.slug),
+						]
+					: [],
+				[
+					PlayNextAction(getPlayNextProps),
+					PlayAfterAction(getPlayNextProps),
+				],
+				props.track.songId
+					? [AddToPlaylistAction(props.track.songId, queryClient)]
+					: [],
+				props.track.songId
+					? [
+							{
+								label: "setAsMaster",
+								disabled: isMaster || !userIsAdmin,
+								icon: <MasterIcon />,
+								onClick: () => masterMutation.mutate(),
+							},
+						]
+					: [],
+				[
+					...(props.track.song
+						? [
+								ChangeSongType(
+									props.track.song,
+									queryClient,
+									confirm,
+								),
+							]
+						: []),
+					UpdateTrackIllustrationAction(queryClient, props.track.id),
+					RefreshTrackMetadataAction(props.track.id, t),
+				],
+				[ShowTrackFileInfoAction(confirm, props.track.id)],
+				[DownloadAction(confirm, props.track.sourceFileId, t)],
+			]}
+		/>
+	);
+};
+
+export default TrackContextualMenu;

front/src/components/contextual-menu/resource/video.tsx

@@ -0,0 +1,106 @@
+/*
+ * Meelo is a music server and application to enjoy your personal music files anywhere, anytime you want.
+ * Copyright (C) 2023
+ *
+ * Meelo is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * Meelo is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { useConfirm } from "material-ui-confirm";
+import { useTranslation } from "react-i18next";
+import API from "~/api";
+import { useQueryClient } from "~/api/use-query";
+import type Action from "~/components/actions";
+import { DownloadAction } from "~/components/actions/download";
+import {
+	GoToArtistAction,
+	GoToReleaseAction,
+	GoToSongInfoAction,
+	GoToSongLyricsAction,
+} from "~/components/actions/link";
+import {
+	AddToPlaylistAction,
+	PlayAfterAction,
+	PlayNextAction,
+} from "~/components/actions/playlist";
+import { RefreshTrackMetadataAction } from "~/components/actions/refresh-metadata";
+import { ChangeVideoType } from "~/components/actions/resource-type";
+import { ShowTrackFileInfoAction } from "~/components/actions/show-track-info";
+import { UpdateTrackIllustrationAction } from "~/components/actions/update-illustration";
+import type { VideoWithRelations } from "~/models/video";
+import { ContextualMenu } from "..";
+
+type VideoContextualMenuProps = {
+	video: VideoWithRelations<"master" | "illustration">;
+	onSelect?: () => void;
+};
+
+const VideoContextualMenu = (props: VideoContextualMenuProps) => {
+	const queryClient = useQueryClient();
+	const confirm = useConfirm();
+	const getPlayNextProps = () =>
+		Promise.all([
+			queryClient.fetchQuery(API.getArtist(props.video.artistId)),
+			props.video.master.releaseId &&
+				queryClient.fetchQuery(
+					API.getRelease(props.video.master.releaseId),
+				),
+		]).then(([artist, release]) => ({
+			track: {
+				...props.video.master,
+				illustration: props.video.illustration,
+			},
+			artist,
+			release,
+		}));
+	const { t } = useTranslation();
+
+	return (
+		<ContextualMenu
+			onSelect={props.onSelect}
+			actions={[
+				[
+					GoToArtistAction(props.video.artistId),
+					props.video.master.releaseId
+						? GoToReleaseAction(props.video.master.releaseId)
+						: undefined,
+				].filter((a): a is Action => a !== undefined),
+				props.video.songId
+					? [
+							GoToSongLyricsAction(props.video.songId),
+							GoToSongInfoAction(props.video.songId),
+						]
+					: [],
+				[
+					PlayNextAction(getPlayNextProps),
+					PlayAfterAction(getPlayNextProps),
+				],
+				props.video.songId
+					? [AddToPlaylistAction(props.video.songId, queryClient)]
+					: [],
+				[
+					ChangeVideoType(props.video, queryClient, confirm),
+					UpdateTrackIllustrationAction(
+						queryClient,
+						props.video.master.id,
+					),
+					RefreshTrackMetadataAction(props.video.master.id, t),
+				],
+				[ShowTrackFileInfoAction(confirm, props.video.master.id)],
+				[DownloadAction(confirm, props.video.master.sourceFileId, t)],
+			]}
+		/>
+	);
+};
+
+export default VideoContextualMenu;

front/src/components/contextual-menu/track-contextual-menu.tsx

@@ -1,116 +0,0 @@
-/*
- * Meelo is a music server and application to enjoy your personal music files anywhere, anytime you want.
- * Copyright (C) 2023
- *
- * Meelo is free software: you can redistribute it and/or modify
- * it under the terms of the GNU General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * Meelo is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with this program.  If not, see <http://www.gnu.org/licenses/>.
- */
-
-import { MasterIcon } from "../icons";
-import { toast } from "react-hot-toast";
-import { useMutation } from "react-query";
-import { useQueryClient } from "../../api/use-query";
-import { useSelector } from "react-redux";
-import API from "../../api/api";
-import { RootState } from "../../state/store";
-import ContextualMenu from "./contextual-menu";
-import { useConfirm } from "material-ui-confirm";
-import { DownloadAction } from "../actions/download";
-import {
-	GoToArtistAction,
-	GoToReleaseAction,
-	GoToSongLyricsAction,
-} from "../actions/link";
-import {
-	AddToPlaylistAction,
-	PlayAfterAction,
-	PlayNextAction,
-} from "../actions/playlist";
-import { ShowTrackFileInfoAction } from "../actions/show-track-info";
-import { TrackWithRelations } from "../../models/track";
-import { UpdateTrackIllustrationAction } from "../actions/update-illustration";
-import { RefreshTrackMetadataAction } from "../actions/refresh-metadata";
-import ChangeSongType from "../actions/song-type";
-import { useTranslation } from "react-i18next";
-import { usePlayerContext } from "../../contexts/player";
-
-type TrackContextualMenuProps = {
-	track: TrackWithRelations<"song" | "illustration">;
-	isVideo?: true; // If true, will add 'go to artist' to menu
-	onSelect?: () => void;
-};
-
-const TrackContextualMenu = (props: TrackContextualMenuProps) => {
-	const userIsAdmin = useSelector(
-		(state: RootState) => state.user.user?.admin == true,
-	);
-	const queryClient = useQueryClient();
-	const confirm = useConfirm();
-	const isMaster = props.track.song.masterId == props.track.id;
-	const getPlayNextProps = () =>
-		Promise.all([
-			queryClient.fetchQuery(API.getArtist(props.track.song.artistId)),
-			queryClient.fetchQuery(API.getRelease(props.track.releaseId)),
-		]).then(([artist, release]) => ({
-			track: props.track,
-			artist,
-			release,
-		}));
-	const { t } = useTranslation();
-	const { playNext, playAfter } = usePlayerContext();
-	const masterMutation = useMutation(async () => {
-		return API.setTrackAsMaster(props.track.id)
-			.then(() => {
-				toast.success(t("trackSetAsMaster"));
-				queryClient.client.invalidateQueries();
-			})
-			.catch((error: Error) => toast.error(error.message));
-	});
-
-	return (
-		<ContextualMenu
-			onSelect={props.onSelect}
-			actions={[
-				props.isVideo
-					? [
-							GoToArtistAction(props.track.song.artistId),
-							GoToReleaseAction(props.track.releaseId),
-						]
-					: [GoToReleaseAction(props.track.releaseId)],
-				[GoToSongLyricsAction(props.track.song.slug)],
-				[
-					PlayNextAction(getPlayNextProps, playNext),
-					PlayAfterAction(getPlayNextProps, playAfter),
-				],
-				[AddToPlaylistAction(props.track.songId, queryClient)],
-				[
-					{
-						label: "setAsMaster",
-						disabled: isMaster || !userIsAdmin,
-						icon: <MasterIcon />,
-						onClick: () => masterMutation.mutate(),
-					},
-				],
-				[
-					ChangeSongType(props.track.song, queryClient, confirm),
-					UpdateTrackIllustrationAction(queryClient, props.track.id),
-					RefreshTrackMetadataAction(props.track.id, t),
-				],
-				[ShowTrackFileInfoAction(confirm, props.track.id)],
-				[DownloadAction(confirm, props.track.sourceFileId, t)],
-			]}
-		/>
-	);
-};
-
-export default TrackContextualMenu;

front/src/components/controls/controls.tsx

@@ -1,344 +0,0 @@
-/*
- * Meelo is a music server and application to enjoy your personal music files anywhere, anytime you want.
- * Copyright (C) 2023
- *
- * Meelo is free software: you can redistribute it and/or modify
- * it under the terms of the GNU General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * Meelo is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with this program.  If not, see <http://www.gnu.org/licenses/>.
- */
-
-import { AscIcon, DescIcon, GridIcon, ListIcon } from "../icons";
-import {
-	Button,
-	ButtonGroup,
-	Dialog,
-	Grid,
-	Tooltip,
-	useTheme,
-} from "@mui/material";
-import { NextRouter } from "next/router";
-import { useEffect, useMemo, useState } from "react";
-import Option from "./option";
-import OptionButton from "./option-button";
-import { LayoutOption, getLayoutParams } from "../../utils/layout";
-import { Order, getOrderParams } from "../../utils/sorting";
-import parseQueryParam from "../../utils/parse-query-param";
-import Action from "../actions/action";
-import { TranslationKey } from "../../i18n/i18n";
-import toast from "react-hot-toast";
-import API from "../../api/api";
-import { prepareMeeloInfiniteQuery } from "../../api/use-query";
-// eslint-disable-next-line no-restricted-imports
-import { useInfiniteQuery as useReactInfiniteQuery } from "react-query";
-import Fade from "../fade";
-import globalLibrary from "../../utils/global-library";
-import { useTranslation } from "react-i18next";
-
-export type OptionState<
-	SortingKeys extends readonly string[],
-	AdditionalProps extends object = object,
-> = {
-	view: LayoutOption;
-	order: Order;
-	sortBy: SortingKeys[number];
-	library: string | null;
-} & AdditionalProps;
-
-type ControllerProps<
-	SortingKeys extends readonly string[],
-	Options extends Option<Values[number]>[],
-	Values extends string[][],
-> = {
-	options?: Options;
-	actions?: Action[];
-	disableSorting?: true;
-	sortingKeys: SortingKeys;
-	defaultSortingKey?: SortingKeys[number];
-	defaultSortingOrder?: Order;
-	defaultLayout: LayoutOption;
-	disableLayoutToggle?: boolean;
-	onChange: (state: OptionState<SortingKeys>) => void;
-	/**
-	 * If defined, will push changes as query parameters in router
-	 */
-	router?: NextRouter;
-	disableLibrarySelector?: true;
-};
-
-const Controls = <
-	SortingKeys extends readonly string[],
-	Options extends Option<Values[number]>[],
-	Values extends string[][],
->(
-	props: ControllerProps<SortingKeys, Options, Values>,
-) => {
-	const theme = useTheme();
-	const { t } = useTranslation();
-	const librariesQuery = useReactInfiniteQuery({
-		...prepareMeeloInfiniteQuery(API.getLibraries),
-		useErrorBoundary: false,
-		onError: () => {
-			toast.error(t("librariesLoadFail"));
-		},
-	});
-	const libraries = useMemo(
-		() => librariesQuery.data?.pages.at(0)?.items ?? null,
-		[librariesQuery.data],
-	);
-	const [optionsState, setOptionState] = useState<OptionState<SortingKeys>>(
-		() => {
-			const libraryQuery = Array.isArray(props.router?.query.library)
-				? props.router?.query.library?.at(0)
-				: props.router?.query.library;
-			const baseOptions: OptionState<SortingKeys> = {
-				view:
-					((props.disableLayoutToggle !== true &&
-						getLayoutParams(props.router?.query.view)) ||
-						undefined) ??
-					props.defaultLayout,
-				sortBy:
-					parseQueryParam(
-						props.router?.query.sortBy,
-						props.sortingKeys,
-					) ??
-					props.defaultSortingKey ??
-					props.sortingKeys[0],
-				order:
-					getOrderParams(props.router?.query.order) ??
-					props.defaultSortingOrder ??
-					"asc",
-				library: props.disableLibrarySelector
-					? null
-					: libraryQuery ?? null,
-			};
-
-			props.options?.forEach((option) => {
-				// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-				// @ts-ignore
-				baseOptions[option.name] =
-					parseQueryParam(
-						props.router?.query[option.name],
-						option.values,
-					) ?? option.values[0];
-			});
-			return baseOptions;
-		},
-	);
-	const [openActionModal, setOpenActionModal] = useState<string | null>(null);
-	const closeModal = () => setOpenActionModal(null);
-
-	/**
-	 * To pass the options to parent after initialization
-	 */
-	useEffect(() => {
-		props.onChange(optionsState);
-	}, [optionsState]);
-
-	const updateOptionState = ({
-		name,
-		value,
-	}: {
-		name: string;
-		value: string | null;
-	}) => {
-		setOptionState({ ...optionsState, [name]: value });
-		if (props.router) {
-			const path = props.router.asPath.split("?")[0];
-			const params = new URLSearchParams(
-				props.router.asPath.split("?").at(1) ?? "",
-			);
-
-			if (value) {
-				params.set(name, value);
-			} else {
-				params.delete(name);
-			}
-			props.router.push(`${path}?${params.toString()}`, undefined, {
-				shallow: true,
-			});
-		}
-	};
-
-	if (libraries === null) {
-		return <></>;
-	}
-
-	return (
-		<Fade in>
-			<Grid
-				container
-				gap={1}
-				sx={{
-					zIndex: 1000,
-					width: "100%",
-					display: "flex",
-					justifyContent: "center",
-					marginBottom: 2,
-					position: "sticky",
-					top: 16,
-					left: 0,
-				}}
-			>
-				<Grid item>
-					<ButtonGroup variant="contained">
-						{props.disableLibrarySelector !== true && (
-							<OptionButton
-								optionGroup={{
-									name:
-										optionsState.library ??
-										t("allLibraries"),
-									options: [
-										{
-											name: "library",
-											values: [
-												globalLibrary,
-												...libraries,
-											].map((library) => library.name),
-											currentValue:
-												[
-													globalLibrary,
-													...libraries,
-												].find(
-													({ slug }) =>
-														slug ==
-														optionsState.library,
-												)?.name ?? globalLibrary.name,
-										},
-									],
-								}}
-								onSelect={({ name, value }) => {
-									if (value == globalLibrary.name) {
-										updateOptionState({
-											name,
-											value: null,
-										});
-									} else {
-										updateOptionState({
-											name,
-											value:
-												libraries.find(
-													(lib) => lib.name == value,
-												)?.slug ?? null,
-										});
-									}
-								}}
-							/>
-						)}
-						{!props.disableSorting && (
-							<OptionButton
-								optionGroup={{
-									name: `${t("sortBy")} ${t(
-										optionsState.sortBy as TranslationKey,
-									)}`,
-									icon:
-										optionsState.order == "desc" ? (
-											<DescIcon />
-										) : (
-											<AscIcon />
-										),
-									options: [
-										{
-											name: "sortBy",
-											values: props.sortingKeys,
-											currentValue: optionsState.sortBy,
-										},
-										{
-											name: "order",
-											values: ["asc", "desc"],
-											currentValue: optionsState.order,
-										},
-									],
-								}}
-								onSelect={updateOptionState}
-							/>
-						)}
-						{props.options?.map((option) => {
-							return (
-								<OptionButton
-									key={option.name}
-									optionGroup={{
-										name: option.label ?? option.name,
-										icon: option.icon,
-										options: [
-											{
-												...option,
-												// eslint-disable-next-line max-len
-												currentValue:
-													optionsState[
-														option.name as keyof typeof optionsState
-													] ?? undefined,
-											},
-										],
-									}}
-									onSelect={updateOptionState}
-								/>
-							);
-						})}
-						{props.disableLayoutToggle !== true && (
-							<Tooltip title={t("changeLayout")}>
-								<Button
-									onClick={() =>
-										updateOptionState({
-											name: "view",
-											value:
-												optionsState.view == "grid"
-													? "list"
-													: "grid",
-										})
-									}
-								>
-									{optionsState.view == "grid" ? (
-										<ListIcon />
-									) : (
-										<GridIcon />
-									)}
-								</Button>
-							</Tooltip>
-						)}
-					</ButtonGroup>
-				</Grid>
-				<Grid item>
-					<ButtonGroup variant="contained">
-						{props.actions?.map((action, index) => (
-							<Button
-								key={"action-" + action.label}
-								startIcon={action.icon}
-								variant="contained"
-								onClickCapture={() => {
-									if (action.disabled === true) {
-										return;
-									}
-									action.onClick && action.onClick();
-									action.dialog &&
-										setOpenActionModal(action.label);
-								}}
-							>
-								{t(action.label)}
-								{action.dialog && (
-									<Dialog
-										open={openActionModal === action.label}
-										onClose={closeModal}
-										fullWidth
-									>
-										{action.dialog({ close: closeModal })}
-									</Dialog>
-								)}
-							</Button>
-						)) ?? []}
-					</ButtonGroup>
-				</Grid>
-			</Grid>
-		</Fade>
-	);
-};
-
-export default Controls;

front/src/components/controls/option-button.tsx

@@ -1,98 +0,0 @@
-/*
- * Meelo is a music server and application to enjoy your personal music files anywhere, anytime you want.
- * Copyright (C) 2023
- *
- * Meelo is free software: you can redistribute it and/or modify
- * it under the terms of the GNU General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * Meelo is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with this program.  If not, see <http://www.gnu.org/licenses/>.
- */
-
-import { CheckIcon } from "../icons";
-import { Button, Divider, ListItemIcon, Menu, MenuItem } from "@mui/material";
-import Option, { OptionGroup } from "./option";
-import { useState } from "react";
-import { TranslationKey } from "../../i18n/i18n";
-import { useTranslation } from "react-i18next";
-
-type OptionButtonProps<
-	Options extends Option<OptionsKeys[number]>[],
-	OptionsKeys extends (readonly string[])[],
-> = {
-	optionGroup: OptionGroup<Options, OptionsKeys>;
-	onSelect?: (selected: {
-		name: Options[number]["name"];
-		value: OptionsKeys[number][number];
-	}) => void;
-};
-
-/**
- * @param props an option group
- * @returns Dropdown Button with selector.
- */
-
-const OptionButton = <
-	Options extends Option<OptionsKeys[number]>[],
-	OptionsKeys extends (readonly string[])[],
->(
-	props: OptionButtonProps<Options, OptionsKeys>,
-) => {
-	const { t } = useTranslation();
-	const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
-	const menuOpen = Boolean(anchorEl);
-	const handleMenuOpen = (event: React.MouseEvent<HTMLButtonElement>) =>
-		setAnchorEl(event.currentTarget);
-	const handleMenuClose = () => setAnchorEl(null);
-
-	return (
-		<>
-			<Button onClick={handleMenuOpen} endIcon={props.optionGroup.icon}>
-				{t(props.optionGroup.name as TranslationKey)}
-			</Button>
-			<Menu anchorEl={anchorEl} open={menuOpen} onClose={handleMenuClose}>
-				{props.optionGroup.options.map((option, index, array) =>
-					option.values
-						.map((value: OptionsKeys[number][number]) => (
-							<MenuItem
-								key={value}
-								sx={{ borderRadius: "0" }}
-								selected={option.currentValue == value}
-								onClick={() => {
-									if (props.onSelect) {
-										props.onSelect({
-											name: option.name,
-											value: value,
-										});
-									}
-									handleMenuClose();
-								}}
-							>
-								<ListItemIcon>
-									{option.currentValue == value && (
-										<CheckIcon />
-									)}
-								</ListItemIcon>
-								{/* If value is not a Translation Key, will fall through */}
-								{t(value as TranslationKey)}
-							</MenuItem>
-						))
-						.concat(
-							index + 1 != array.length
-								? [<Divider key={index} />]
-								: [],
-						),
-				)}
-			</Menu>
-		</>
-	);
-};
-
-export default OptionButton;

front/src/components/empty-state.tsx

@@ -0,0 +1,63 @@
+/*
+ * Meelo is a music server and application to enjoy your personal music files anywhere, anytime you want.
+ * Copyright (C) 2023
+ *
+ * Meelo is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * Meelo is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { Box, Button, Grid, Stack, Typography } from "@mui/material";
+import { useTranslation } from "react-i18next";
+import type { TranslationKey } from "~/i18n/i18n";
+import type Action from "./actions";
+
+export type EmptyStateProps = {
+	icon: React.ReactNode;
+	text: TranslationKey;
+	actions: Action[];
+};
+
+export const EmptyState = (props: EmptyStateProps) => {
+	const { t } = useTranslation();
+
+	return (
+		<Stack
+			direction="column"
+			spacing={3}
+			sx={{
+				paddingTop: 3,
+				width: "100%",
+				height: "100%",
+				justifyContent: "center",
+				display: "flex",
+				alignItems: "center",
+				color: "text.disabled",
+			}}
+		>
+			<Box>{props.icon}</Box>
+			<Typography>{t(props.text)}</Typography>
+			<Grid container sx={{ display: "flex", justifyContent: "center" }}>
+				{props.actions?.map((a, i) => (
+					<Button
+						variant="outlined"
+						key={i}
+						href={a.href}
+						onClick={a.onClick}
+					>
+						{t(a.label)}
+					</Button>
+				))}
+			</Grid>
+		</Stack>
+	);
+};

front/src/components/external-metadata-badge.tsx

@@ -17,35 +17,37 @@
  */
 
 import { Box, Button, Skeleton } from "@mui/material";
-import ExternalId from "../models/external-id";
-import Illustration from "./illustration";
 import Link from "next/link";
+import type { ExternalMetadataSource } from "~/models/external-metadata";
+import { ProviderIcon } from "./icons";
+import Illustration from "./illustration";
 
-type ExternalIdBadgeProps = {
-	externalId: ExternalId | undefined;
+type ExternalMetadataBadgeProps = {
+	source: ExternalMetadataSource | undefined;
 };
 
-const ExternalIdBadge = ({ externalId }: ExternalIdBadgeProps) => {
+const ExternalMetadataBadge = ({ source }: ExternalMetadataBadgeProps) => {
 	const badge = (
 		<Button
 			variant="outlined"
 			startIcon={
 				<Box sx={{ width: 30 }}>
 					<Illustration
-						url={externalId?.provider.icon ?? undefined}
+						url={source?.providerIcon ?? undefined}
 						quality="original"
+						fallback={<ProviderIcon />}
 					/>
 				</Box>
 			}
 		>
-			{externalId?.provider.name ?? <Skeleton width="50px" />}
+			{source?.providerName ?? <Skeleton width="50px" />}
 		</Button>
 	);
 
-	if (externalId?.url) {
+	if (source?.url) {
 		return (
 			<Link
-				href={externalId.url ?? undefined}
+				href={source.url ?? undefined}
 				rel="noopener noreferrer"
 				target="_blank"
 			>
@@ -56,4 +58,4 @@ const ExternalIdBadge = ({ externalId }: ExternalIdBadgeProps) => {
 	return badge;
 };
 
-export default ExternalIdBadge;
+export default ExternalMetadataBadge;

front/src/components/fade.tsx

@@ -16,10 +16,9 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-// eslint-disable-next-line no-restricted-imports
 import { Fade as MUIFade } from "@mui/material";
-import { isClientSideRendering } from "../utils/is-ssr";
-import React, { ComponentProps } from "react";
+import type { ComponentProps } from "react";
+import { isClientSideRendering } from "~/utils/is-ssr";
 /**
  * Wrapper around MUI's Fade.
  * Fade is the main animation used in the app.

front/src/components/genre-button.tsx

@@ -16,10 +16,10 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import Link from "next/link";
-import Genre from "../models/genre";
 import { Chip, Skeleton } from "@mui/material";
-import { ComponentProps } from "react";
+import Link from "next/link";
+import type { ComponentProps } from "react";
+import type Genre from "~/models/genre";
 
 type GenreButtonProps = {
 	genre: Pick<Genre, "name" | "slug"> | undefined;

front/src/components/head.tsx

@@ -17,7 +17,7 @@
  */
 
 import NextHead from "next/head";
-import { DefaultWindowTitle } from "../utils/constants";
+import { DefaultWindowTitle } from "~/utils/constants";
 
 export const Head = ({
 	title,

front/src/components/highlight-card/index.tsx

@@ -16,12 +16,20 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Chip, Grid, Skeleton, Typography, useTheme } from "@mui/material";
+import {
+	Box,
+	Chip,
+	Grid,
+	Skeleton,
+	Stack,
+	Typography,
+	useTheme,
+} from "@mui/material";
 import Link from "next/link";
-import IllustrationModel from "../../models/illustration";
-import Illustration from "../illustration";
 import { useMemo } from "react";
-import { useAccentColor } from "../../utils/accent-color";
+import Illustration from "~/components/illustration";
+import type IllustrationModel from "~/models/illustration";
+import { useAccentColor } from "~/utils/accent-color";
 
 type HighlightCardProps = {
 	title: string | undefined;
@@ -35,7 +43,6 @@ type HighlightCardProps = {
 const HighlightCard = (props: HighlightCardProps) => {
 	const theme = useTheme();
 	const accentColor = useAccentColor(props.illustration);
-
 	const cardColor = useMemo(() => {
 		if (accentColor !== null) {
 			const themePaperColor = `rgba(${theme.vars.palette.background.defaultChannel} / 0.75)`;
@@ -52,6 +59,16 @@ const HighlightCard = (props: HighlightCardProps) => {
 			backgroundColor: `rgba(${theme.vars.palette.background.defaultChannel} / 0.40)`,
 		};
 	}, [accentColor, theme]);
+	const scrollbarColorStyle = useMemo(() => {
+		return {
+			[theme.getColorSchemeSelector("light")]: {
+				scrollbarColor: `${accentColor?.light} transparent`,
+			},
+			[theme.getColorSchemeSelector("dark")]: {
+				scrollbarColor: `${accentColor?.dark} transparent`,
+			},
+		};
+	}, [accentColor, theme]);
 	const style = {
 		...cardColor,
 		boxShadow: "none",
@@ -78,72 +95,74 @@ const HighlightCard = (props: HighlightCardProps) => {
 				}}
 				style={{ borderRadius: theme.shape.borderRadius }}
 			>
-				<Grid item sx={{ aspectRatio: "1", height: "100%" }}>
+				<Grid sx={{ aspectRatio: "1", height: "100%" }}>
 					<Illustration
 						illustration={props.illustration}
 						imgProps={{ borderRadius: 0 }}
 						quality="medium"
 					/>
 				</Grid>
-				<Grid
-					item
-					container
-					sx={{ width: "100%", overflow: "hidden" }}
-					direction="column"
-					padding={2}
-				>
-					<Grid item sx={{ width: "100%" }}>
-						<Typography
-							variant="h6"
-							noWrap
-							style={{
-								overflow: "hidden",
-								textOverflow: "ellipsis",
-								width: "100%",
-								paddingRight: 1,
-							}}
-						>
-							{props.headline ?? <Skeleton variant="text" />}
-						</Typography>
-					</Grid>
-					<Grid
-						item
-						xs
+				<Grid container size="grow" sx={{ height: "100%" }}>
+					<Stack
 						sx={{
-							overflow: "scroll",
-							marginRight: -2,
-							paddingY: 1,
-							paddingRight: 2,
+							width: "100%",
+							height: "100%",
+							padding: 2,
 						}}
 					>
-						<Typography
-							variant="body1"
-							color="text.disabled"
-							lineHeight={1.5}
+						<Box sx={{ width: "100%" }}>
+							<Typography
+								variant="h6"
+								noWrap
+								style={{
+									overflow: "hidden",
+									textOverflow: "ellipsis",
+									width: "100%",
+									paddingRight: 1,
+								}}
+							>
+								{props.headline ?? <Skeleton variant="text" />}
+							</Typography>
+						</Box>
+						<Box
+							sx={{
+								overflowY: "scroll",
+								overflowX: "clip",
+								flexGrow: 1,
+								marginRight: -2,
+								paddingY: 1,
+								paddingRight: 2,
+								...scrollbarColorStyle,
+							}}
 						>
-							{props.body ?? <Skeleton variant="text" />}
-						</Typography>
-					</Grid>
-					{props.tags.length > 0 && (
-						<Grid
-							item
-							container
-							columnSpacing={1}
-							sx={{ height: 32, overflow: "hidden" }}
-						>
-							{props.tags.map((tag, index) => (
-								<Grid key={index} item>
-									<Link href={tag.href} key={index}>
-										<Chip
-											variant="filled"
-											clickable
-											label={tag.label}
-										/>
-									</Link>
-								</Grid>
-							))}
-						</Grid>
-					)}
+							<Typography
+								variant="body1"
+								color="text.disabled"
+								lineHeight={1.5}
+							>
+								{props.body ?? <Skeleton variant="text" />}
+							</Typography>
+						</Box>
+						{props.tags.length > 0 && (
+							<Grid
+								container
+								spacing={1}
+								sx={{ marginTop: 1, height: 24 }}
+							>
+								{props.tags.map((tag, index) => (
+									<Grid key={index}>
+										<Link href={tag.href} key={index}>
+											<Chip
+												variant="filled"
+												clickable
+												label={tag.label}
+											/>
+										</Link>
+									</Grid>
+								))}
+							</Grid>
+						)}
+					</Stack>
 				</Grid>
 			</Grid>
 		</Link>

front/src/components/highlight-card/resource/album.tsx

@@ -17,35 +17,30 @@
  */
 
 import { useTranslation } from "react-i18next";
-import { AlbumWithRelations } from "../../models/album";
-import getYear from "../../utils/getYear";
-import HighlightCard from "./highlight-card";
+import HighlightCard from "~/components/highlight-card";
+import type { AlbumWithRelations } from "~/models/album";
+import type { AlbumExternalMetadata } from "~/models/external-metadata";
+import { getYear } from "~/utils/date";
 
 type AlbumHighlightCardProps = {
-	album:
-		| AlbumWithRelations<
-				"artist" | "externalIds" | "genres" | "illustration"
-		  >
-		| undefined;
+	album: AlbumWithRelations<"artist" | "genres" | "illustration"> | undefined;
+	externalMetadata: AlbumExternalMetadata | undefined;
 };
-const AlbumHighlightCard = ({ album }: AlbumHighlightCardProps) => {
+const AlbumHighlightCard = ({
+	album,
+	externalMetadata,
+}: AlbumHighlightCardProps) => {
 	const { t } = useTranslation();
 	return (
 		<HighlightCard
 			title={album?.name}
 			headline={album?.name}
 			body={
-				album?.externalIds
-					.filter(
-						({ provider }) =>
-							provider.name.toLowerCase() !== "discogs",
-					)
-					.map((id) => id.description)
-					.filter((desc): desc is string => desc !== null)
-					.sort((descA, descB) => descA.length - descB.length)
-					.at(0) ||
+				externalMetadata?.description ||
 				[
-					album ? album.artist?.name ?? t("compilation") : undefined,
+					album
+						? (album.artist?.name ?? t("compilation"))
+						: undefined,
 					album ? getYear(album.releaseDate) : undefined,
 				]
 					.filter((elem) => elem != null)