Extract, display and edit song metadata

Pipfile

@@ -20,6 +20,7 @@ authlib = "*"
 pymysql = "*"
 minio = "*"
 celery = {extras = ["redis"], version = "*"}
+mutagen = "*"
 
 [dev-packages]
 pytest = "*"

alembic/versions/e932aec0076e_add_metadata_fields_to_file.py

@@ -0,0 +1,38 @@
+"""add_metadata_fields_to_file
+
+Revision ID: e932aec0076e
+Revises: 20a525107a88
+Create Date: 2025-04-27 15:20:17.642151
+
+"""
+from typing import Sequence, Union
+
+from alembic import op
+import sqlalchemy as sa
+
+# revision identifiers, used by Alembic.
+revision: str = 'e932aec0076e'
+down_revision: Union[str, None] = '20a525107a88'
+branch_labels: Union[str, Sequence[str], None] = None
+depends_on: Union[str, Sequence[str], None] = None
+
+
+def upgrade() -> None:
+  # Add new metadata columns to files table
+  op.add_column('files', sa.Column('title', sa.String(1024), nullable=True))
+  op.add_column('files', sa.Column('artist', sa.String(1024), nullable=True))
+  op.add_column('files', sa.Column('album', sa.String(1024), nullable=True))
+  op.add_column('files', sa.Column('year', sa.String(4), nullable=True))
+  op.add_column('files', sa.Column('track_number', sa.String(10),
+                                   nullable=True))
+  op.add_column('files', sa.Column('genre', sa.String(1024), nullable=True))
+
+
+def downgrade() -> None:
+  # Remove metadata columns from files table
+  op.drop_column('files', 'title')
+  op.drop_column('files', 'artist')
+  op.drop_column('files', 'album')
+  op.drop_column('files', 'year')
+  op.drop_column('files', 'track_number')
+  op.drop_column('files', 'genre')

docker-compose-dev.yml

@@ -1,5 +1,3 @@
-version: '3.8'
-
 services:
   rainfall-db-dev:
     image: mariadb:latest

rainfall-frontend/cypress/e2e/edit_site.cy.ts

@@ -290,7 +290,7 @@ describe('Edit Site test', () => {
               calledDelete = true;
               req.reply(204, '', {});
             }).as('delete-song');
-            cy.get('.file-name').contains('song-2.mp3').siblings('button').click();
+            cy.get('.file-name').contains('song-2.mp3').siblings('button').first().click();
           });
 
           it('calls the delete endpoint', () => {
@@ -310,7 +310,7 @@ describe('Edit Site test', () => {
               calledDelete = true;
               req.reply(204, '', {});
             }).as('delete-song');
-            cy.get('.file-name').contains('a-great-song.mp3').siblings('button').click();
+            cy.get('.file-name').contains('a-great-song.mp3').siblings('button').first().click();
           });
 
           it('calls the delete endpoint', () => {
@@ -334,7 +334,7 @@ describe('Edit Site test', () => {
               calledDelete = true;
               req.reply(500, '', {});
             }).as('delete-song');
-            cy.get('.file-name').contains('song-2.mp3').siblings('button').click();
+            cy.get('.file-name').contains('song-2.mp3').siblings('button').first().click();
           });
 
           it('calls the delete endpoint', () => {

rainfall-frontend/cypress/e2e/metadata_editing.cy.ts

@@ -0,0 +1,114 @@
+describe('Metadata Editing', () => {
+  describe('when there is a welcomed user', () => {
+    beforeEach(() => {
+      cy.intercept('GET', 'api/v1/user', {
+        fixture: 'user_welcomed.json',
+      }).as('load-user');
+      cy.intercept('GET', 'api/v1/release/065f4a1a-f2e0-7d39-8000-0c3f69747e42', {
+        fixture: 'release-filled.json',
+      }).as('load-release');
+      cy.visit('/release/065f4a1a-f2e0-7d39-8000-0c3f69747e42');
+      cy.wait('@load-user');
+      cy.wait('@load-release');
+    });
+
+    describe('when viewing a file with metadata', () => {
+      it('displays the metadata fields', () => {
+        cy.get('.file-name')
+          .first()
+          .within(() => {
+            cy.get('.metadata-title').should('contain', 'Title:');
+            cy.get('.metadata-artist').should('contain', 'Artist:');
+            cy.get('.metadata-album').should('contain', 'Album:');
+          });
+      });
+
+      it('shows edit button for metadata', () => {
+        cy.get('.file-name').first().find('.edit-button').should('exist');
+      });
+    });
+
+    describe('when editing metadata', () => {
+      beforeEach(() => {
+        cy.get('.file-name').first().find('.edit-button').click();
+      });
+
+      it('shows input fields for metadata', () => {
+        cy.get('.file-name')
+          .first()
+          .within(() => {
+            cy.get('input').should('have.length', 3);
+          });
+      });
+
+      it('shows save and cancel buttons', () => {
+        cy.get('.file-name')
+          .first()
+          .within(() => {
+            cy.get('button').should('contain', 'Save');
+            cy.get('button').should('contain', 'Cancel');
+          });
+      });
+
+      describe('when editing and saving metadata', () => {
+        beforeEach(() => {
+          cy.intercept('POST', 'api/v1/file/*/metadata', {
+            statusCode: 204,
+          }).as('save-metadata');
+
+          cy.get('.file-name')
+            .first()
+            .within(() => {
+              cy.get('input').first().clear().type('New Title');
+              cy.get('input').eq(1).clear().type('New Artist');
+              cy.get('input').eq(2).clear().type('New Album');
+              cy.get('button').contains('Save').click();
+            });
+        });
+
+        it('sends the updated metadata to the server', () => {
+          cy.wait('@save-metadata').its('request.body').should('deep.equal', {
+            title: 'New Title',
+            artist: 'New Artist',
+            album: 'New Album',
+          });
+        });
+
+        it('updates the displayed metadata', () => {
+          cy.get('.file-name')
+            .first()
+            .within(() => {
+              cy.get('.metadata-title').should('contain', 'Title:');
+              cy.get('.metadata-artist').should('contain', 'Artist:');
+              cy.get('.metadata-album').should('contain', 'Album:');
+              cy.contains('New Title');
+              cy.contains('New Artist');
+              cy.contains('New Album');
+            });
+        });
+      });
+
+      describe('when canceling metadata edit', () => {
+        beforeEach(() => {
+          cy.get('.file-name')
+            .first()
+            .within(() => {
+              cy.get('input').first().clear().type('New Title');
+              cy.get('button').contains('Cancel').click();
+            });
+        });
+
+        it('reverts to original metadata display', () => {
+          cy.get('.file-name')
+            .first()
+            .within(() => {
+              cy.get('input').should('not.exist');
+              cy.get('.metadata-title').should('contain', 'Title:');
+              cy.get('.metadata-artist').should('contain', 'Artist:');
+              cy.get('.metadata-album').should('contain', 'Album:');
+            });
+        });
+      });
+    });
+  });
+});

rainfall-frontend/cypress/fixtures/release-filled.json

@@ -8,13 +8,19 @@
       "filename": "you-dont-care.mp3",
       "id": "065f4a3c-5389-76c7-8000-23a763092877",
       "original_filename": null,
-      "release_id": "065f4a1a-f2e0-7d39-8000-0c3f69747e42"
+      "release_id": "065f4a1a-f2e0-7d39-8000-0c3f69747e42",
+      "title": "You Don't Care",
+      "artist": "Travis Briggs",
+      "album": "songs.travisbriggs.com"
     },
     {
       "filename": "stupid-love-songs.mp3",
       "id": "065f4a43-e5c9-7824-8000-157a01af50be",
       "original_filename": null,
-      "release_id": "065f4a1a-f2e0-7d39-8000-0c3f69747e42"
+      "release_id": "065f4a1a-f2e0-7d39-8000-0c3f69747e42",
+      "title": "Stupid Love Songs",
+      "artist": "Travis Briggs",
+      "album": "songs.travisbriggs.com"
     }
   ],
   "id": "065f4a1a-f2e0-7d39-8000-0c3f69747e42",