YIM 2024 (#3105)

* YIM: Set up 2024 routes

* YIM: Create YIM '24 page

* Add gallery at the bottom

will be used for cover art composites, putting top albums as a placeholder

* YIM: update images

* YIM: tweak cover art mosaic gallery

* Fix get_listens_from_dump invocation

* fix top discoveries and allow 2024 in api call

* YIM: Add generated SVGs for 2024

still needs some tweaks, but setting everything in place

* YIM: fix buddies images

* YIM: continue work on generated SVG images

* YIM: Update Canvg library

* YIM: misc fixes

* YIM: Add season name to loaded SVGs

They're customized by season!

* YIM: add cover art mosaics gallery

* YIM: Add season selection icons

+ fix lazy loading

* Revert update of Canvg package

Having a build error after the minor update. Don't have time or headspace to fix now, and update is not required.
Do the de-volution !

* YIM: Fix SVGs styles

* YIM: Fix playlist svgs

* YIM: Fix mosaics fetch

* YIM: Fix mosaic images size

* YIM: update colors

* YIM: add header image

* feat: Add Genre Graph

* chore: Install @nivo/treemap

* feat: Display TreeMap for genre data

* format: PEP8 - Lint SQL Query

* feat: Improve wordings

* Update YearInMusic2024.tsx

* YIM24: rework SVG images

sasving the SVG as PNG does not support blend modes, so we do some modifications to simplify our lives

* YIM: continue fixing SVG images

* YIM: remove blend mode from SVG background images

* YIM: Guess what? more SVG fixes

* YIM: more SVG tweaks

* format: Lint YIM CSS

* feat: Use the season text colors for treemap graph

* feat: Hide Follow button on own YIM page

* Fix & escaping in YIM coverart templates

* YIM: limit mosaic image size

They get just too big

* YIM: fix image folder path

* Update YIM email templates

* YIM: max width for mosaic gallery images

they get toobig otherwise and you lose some of the mosaic effect from not seeing the whole image at once. Users can click the images to open them full size in their browser anyway to get a closer look, let the browser handle zooming and panning.

* YIM: Fix email max size

I was seeing a weird bug in the MacOS email client ("Mail" *rolls eyes*) with image centering/size, and I think this should fix it
Left the simpler `max-width: 600px` declaration as a fallback just in case because I know HTML clients' CSS support leaves to be desired.

* YIM: Load Inter font earlier for SVG rendering

Otherwise when saving or sharing the image the font is not rendered and the default one is used

* YIM: Tweak templates

Fix some issue with rendering the SVGs to canvas because of nested title elements.
Also fixes LB-1675 where links in the SVG are relative and point to non-existing pages on api.LB that should point to LB. Even better would be to detect beta-api.LB and test-api.LB and point to beta.LB and test.LB respectively.

* YIM: Define width and height for all images in SVG templates

Otherwise CanVG freaks out and placement of images is all wrong or they are not appearing at all.

* YIM: more SVG templates tweaks

* YIM: Transparent color for treemap root element

Otherwise it darkens all the other colors

* YIM template: force text color

* Update email templates according to feedback

* refactor: Lint files

* refactor: Cleanup

* fix: Tests

---------

Co-authored-by: Monkey Do <[email protected]>
Co-authored-by: anshg1214 <[email protected]>

Author: 3 people

frontend/css/explore.less

@@ -39,7 +39,7 @@
   opacity: 0.5;
   background: linear-gradient(
     0.36deg,
-    rgba(53, 48, 112, 0.8) 0.42%,
+    rgba(53, 48, 112, 0.6) 0.42%,
     rgba(53, 48, 112, 0.1) 99.8%
   );
   z-index: 10;

frontend/css/year-in-music.less

@@ -2,6 +2,7 @@
 @import "/node_modules/swiper/swiper.less";
 @import "/node_modules/swiper/modules/navigation/navigation.less";
 @import "/node_modules/swiper/modules/effect-coverflow/effect-coverflow.less";
+@import "/node_modules/swiper/modules/effect-cube/effect-cube.less";
 
 /* latin */
 @font-face {
@@ -112,8 +113,7 @@
       }
     }
   }
-
-  .swiper {
+  #top-albums .swiper {
     width: 100%;
     perspective: 900px;
     background-color: whitesmoke;
@@ -194,6 +194,7 @@
   }
 
   &.yim-2022,
+  &.yim-2024,
   &.yim-2023 {
     --swiper-theme-color: @2022red;
     /* Main header section at the top with logo */
@@ -409,7 +410,8 @@
       box-shadow: inset 0px 11px 8px -10px #ccc;
     }
   }
-  &.yim-2023 {
+  &.yim-2023,
+  &.yim-2024 {
     --selectedColor: #4c6c52;
     --swiper-navigation-color: var(--selectedColor);
     @cream: #f0eee2;
@@ -646,4 +648,83 @@
       }
     }
   }
+  &.yim-2024 {
+    --backgroundColor: #4c6c52;
+    --cardBackgroundColor: #fefff5;
+    --accentColor: #2b9f7a;
+    --selectedColor: var(--accentColor);
+    --swiper-navigation-color: var(--accentColor);
+    @text-color: var(--accentColor);
+    @content-background-color: var(--cardBackgroundColor);
+    background-color: var(--backgroundColor);
+    color: @text-color;
+    .content-card {
+      background: @content-background-color;
+      color: @text-color;
+      .heading,
+      .small-stat {
+        color: inherit;
+      }
+      .heading {
+        aspect-ratio: unset;
+        h3,
+        h4 {
+          margin: 0;
+        }
+      }
+      .img-header {
+        mix-blend-mode: multiply;
+      }
+    }
+    .small-stat {
+      font-weight: 300;
+    }
+    .scrollable-area::after {
+      background: linear-gradient(
+        0deg,
+        var(--cardBackgroundColor),
+        transparent
+      );
+    }
+    .btn-info,
+    .yim-share-button {
+      background-color: var(--accentColor);
+    }
+    .color-picker {
+      flex-wrap: wrap;
+      gap: 2em;
+      > div {
+        &:first-of-type {
+          width: 100%;
+          font-weight: bold;
+          font-size: larger;
+        }
+        text-align: center;
+        text-align: -webkit-center;
+        .color-selector {
+          background: none;
+        }
+      }
+    }
+    .swiper,
+    .graph-container {
+      background-color: var(--backgroundColor);
+    }
+    .swiper-cube .swiper-slide {
+      text-align: center;
+      img {
+        max-width: min(90vw, 90vh);
+      }
+    }
+    #buddies .buddy .img-container img {
+      width: 100%;
+      mix-blend-mode: multiply;
+    }
+    #main-header .header-image {
+      margin: 0;
+      width: initial;
+      mix-blend-mode: multiply;
+      margin-inline: auto;
+    }
+  }
 }

frontend/img/explore/year-in-music-2024.png

@@ -105,34 +105,13 @@ export default function ExplorePage() {
             <hr />
           </div>
           <div className="row">
-            <div className="explore-card-container">
-              <div className="explore-card">
-                <div
-                  className="explore-card-img-overlay"
-                  style={{ mixBlendMode: "difference" }}
-                >
-                  {" "}
-                </div>
-                <div className="explore-card-img-clip flex-center">
-                  <div
-                    style={{
-                      fontSize: "6em",
-                      fontWeight: "bold",
-                      fontFamily: "Roboto",
-                      transform: "rotate(-8deg)",
-                      color: COLOR_LB_ORANGE,
-                    }}
-                  >
-                    2024
-                  </div>
-                </div>
-                <div className="explore-card-text">
-                  <div className="explore-card-text-name">
-                    Your Year in Music 2024
-                  </div>
-                  <div>Coming Soon</div>
-                </div>
-              </div>
+            <div>
+              <ExploreCard
+                name="Your Year in Music 2024"
+                desc="Review"
+                img_name="year-in-music-2024.png"
+                url={`/user/${currentUser.name}/year-in-music/2024/`}
+              />
             </div>
             <div>
               <ExploreCard

frontend/img/year-in-music-24/autumn/buddies/yim24-buddy-01.png

@@ -13,10 +13,11 @@ const links: NavbarLink[] = [
   { to: "similar-users/", label: "Similar Users" },
   { to: "lb-radio/", label: "LB Radio" },
   { to: "art-creator/", label: "Art Creator" },
+  { to: "year-in-music/2024/", label: "Year in Music 2024" },
   { to: "year-in-music/2023/", label: "Year in Music 2023" },
   { to: "year-in-music/2022/", label: "Year in Music 2022" },
   { to: "year-in-music/2021/", label: "Year in Music 2021" },
-  { to: "year-in-music/", label: "Year in Music 2023" },
+  { to: "year-in-music/", label: "Year in Music 2024" },
   { to: "ai-brainz/", label: "AI Brainz" },
 ];
 

frontend/img/year-in-music-24/autumn/buddies/yim24-buddy-02.png

@@ -300,7 +300,8 @@ export default NiceModal.create(
       matchingTracks && Object.entries(matchingTracks);
     const hasMatches = Boolean(matchingTracksEntries?.length);
     const unmatchedItems =
-      unlinkedListens.filter((md) => !matchingTracks?.[md.recording_msid]) ?? [];
+      unlinkedListens.filter((md) => !matchingTracks?.[md.recording_msid]) ??
+      [];
 
     // We may need to escape or replace the Lucene search special characters
     // + - && || ! ( ) { } [ ] ^ " ~ * ? : \ /     as described in

frontend/img/year-in-music-24/autumn/buddies/yim24-buddy-03.png

@@ -127,13 +127,17 @@ const getUserRoutes = (): RouteObject[] => {
       children: [
         {
           index: true,
+          element: <Navigate to="./2024" replace />,
+        },
+        {
+          path: "2024/",
           lazy: async () => {
-            const YearInMusic2023 = await import(
-              "../year-in-music/2023/YearInMusic2023"
+            const YearInMusic2024 = await import(
+              "../year-in-music/2024/YearInMusic2024"
             );
-            return { Component: YearInMusic2023.YearInMusicWrapper };
+            return { Component: YearInMusic2024.YearInMusicWrapper };
           },
-          loader: RouteQueryLoader("year-in-music-2023"),
+          loader: RouteQueryLoader("year-in-music-2024"),
         },
         {
           path: "2023/",

frontend/img/year-in-music-24/autumn/buddies/yim24-buddy-04.png

@@ -491,7 +491,7 @@ export default class YearInMusic extends React.Component<
             </div>
 
             {yearInMusicData.top_releases ? (
-              <div id="releases-coverflow">
+              <div id="top-albums">
                 <Swiper
                   modules={[Navigation, Keyboard, EffectCoverflow]}
                   spaceBetween={15}