feat(web): add Exif-Rating (#11580)

* Add Exif-Rating

* Integrate star rating as own component

* Add e2e tests for rating and validation

* Rename component and async handleChangeRating

* Display rating can be enabled in app settings

* Correct i18n reference

Co-authored-by: Michel Heusschen <59014050+michelheusschen@users.noreply.github.com>

* Star rating: change from slider to buttons

* Star rating for clarity

* Design updates.

* Renaming and code optimization

* chore: clean up

* chore: e2e formatting

* light mode border and default value

---------

Co-authored-by: Christoph Suter <christoph@suter-burri.ch>
Co-authored-by: Michel Heusschen <59014050+michelheusschen@users.noreply.github.com>
Co-authored-by: Mert <101130780+mertalev@users.noreply.github.com>
Co-authored-by: Jason Rasmussen <jrasm91@gmail.com>
Co-authored-by: Alex Tran <alex.tran1502@gmail.com>

e2e/src/api/specs/asset.e2e-spec.ts

@@ -43,6 +43,7 @@ const makeUploadDto = (options?: { omit: string }): Record<string, any> => {
 const TEN_TIMES = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
 
 const locationAssetFilepath = `${testAssetDir}/metadata/gps-position/thompson-springs.jpg`;
+const ratingAssetFilepath = `${testAssetDir}/metadata/rating/mongolels.jpg`;
 
 const readTags = async (bytes: Buffer, filename: string) => {
   const filepath = join(tempDir, filename);
@@ -72,6 +73,7 @@ describe('/asset', () => {
   let user2Assets: AssetMediaResponseDto[];
   let stackAssets: AssetMediaResponseDto[];
   let locationAsset: AssetMediaResponseDto;
+  let ratingAsset: AssetMediaResponseDto;
 
   const setupTests = async () => {
     await utils.resetDatabase();
@@ -99,6 +101,16 @@ describe('/asset', () => {
 
     await utils.waitForWebsocketEvent({ event: 'assetUpload', id: locationAsset.id });
 
+    // asset rating
+    ratingAsset = await utils.createAsset(admin.accessToken, {
+      assetData: {
+        filename: 'mongolels.jpg',
+        bytes: await readFile(ratingAssetFilepath),
+      },
+    });
+
+    await utils.waitForWebsocketEvent({ event: 'assetUpload', id: ratingAsset.id });
+
     user1Assets = await Promise.all([
       utils.createAsset(user1.accessToken),
       utils.createAsset(user1.accessToken),
@@ -214,6 +226,22 @@ describe('/asset', () => {
       expect(body).toMatchObject({ id: user1Assets[0].id });
     });
 
+    it('should get the asset rating', async () => {
+      await utils.waitForWebsocketEvent({
+        event: 'assetUpload',
+        id: ratingAsset.id,
+      });
+
+      const { status, body } = await request(app)
+        .get(`/assets/${ratingAsset.id}`)
+        .set('Authorization', `Bearer ${admin.accessToken}`);
+      expect(status).toBe(200);
+      expect(body).toMatchObject({
+        id: ratingAsset.id,
+        exifInfo: expect.objectContaining({ rating: 3 }),
+      });
+    });
+
     it('should work with a shared link', async () => {
       const sharedLink = await utils.createSharedLink(user1.accessToken, {
         type: SharedLinkType.Individual,
@@ -575,6 +603,31 @@ describe('/asset', () => {
       expect(status).toEqual(200);
     });
 
+    it('should set the rating', async () => {
+      const { status, body } = await request(app)
+        .put(`/assets/${user1Assets[0].id}`)
+        .set('Authorization', `Bearer ${user1.accessToken}`)
+        .send({ rating: 2 });
+      expect(body).toMatchObject({
+        id: user1Assets[0].id,
+        exifInfo: expect.objectContaining({
+          rating: 2,
+        }),
+      });
+      expect(status).toEqual(200);
+    });
+
+    it('should reject invalid rating', async () => {
+      for (const test of [{ rating: 7 }, { rating: 3.5 }, { rating: null }]) {
+        const { status, body } = await request(app)
+          .put(`/assets/${user1Assets[0].id}`)
+          .send(test)
+          .set('Authorization', `Bearer ${user1.accessToken}`);
+        expect(status).toBe(400);
+        expect(body).toEqual(errorDto.badRequest());
+      }
+    });
+
     it('should return tagged people', async () => {
       const { status, body } = await request(app)
         .put(`/assets/${user1Assets[0].id}`)