feat(css-maps): add missing maps and introduce new maps for watch feed modal #3560

sanoojes · 2025-10-20T17:08:27Z

This PR adds maps for some of the Artist About Modal classes and introduces new Class Names for the Explicit Icon and the Watch Feed Modal. (also sort the css-map)

Watch Feed Modal Preview

New Classes added are

+ main-watchFeed-actionBodyWrapper
+ main-watchFeed-actionFooterWrapper
+ main-watchFeed-actionHeaderWrapper
+ main-watchFeed-actionSection
+ main-watchFeed-addToPlaylistButton
+ main-watchFeed-artistContainer
+ main-watchFeed-artistMetadataContainer
+ main-watchFeed-artistWrapper
+ main-watchFeed-background
+ main-watchFeed-backgroundPill
+ main-watchFeed-backgroundSpacer
+ main-watchFeed-canvasContainer
+ main-watchFeed-canvasWrapper
+ main-watchFeed-columnContainer
+ main-watchFeed-container
+ main-watchFeed-content
+ main-watchFeed-contentAnimation
+ main-watchFeed-contentRow
+ main-watchFeed-contentSection
+ main-watchFeed-contentSelected
+ main-watchFeed-contentWrapper
+ main-watchFeed-equalizerIcon
+ main-watchFeed-flipContainer
+ main-watchFeed-followButton
+ main-watchFeed-genreContainer
+ main-watchFeed-genreContent
+ main-watchFeed-image
+ main-watchFeed-imageWrapper
+ main-watchFeed-menuButton
+ main-watchFeed-metadataSection
+ main-watchFeed-metadataWrapper
+ main-watchFeed-modal
+ main-watchFeed-nextButtonInner
+ main-watchFeed-nextButtonWrapper
+ main-watchFeed-pillAnimationFour
+ main-watchFeed-pillAnimationOne
+ main-watchFeed-pillAnimationThree
+ main-watchFeed-pillAnimationTwo
+ main-watchFeed-playerContainer
+ main-watchFeed-playerImage
+ main-watchFeed-playlistTitle
+ main-watchFeed-progressBar
+ main-watchFeed-queueButton
+ main-watchFeed-scrollToBottomButton
+ main-watchFeed-scrollToTopButton
+ main-watchFeed-shareButton
+ main-watchFeed-showBackground
+ main-watchFeed-songArtist
+ main-watchFeed-songArtistListeners
+ main-watchFeed-songTitle
+ main-watchFeed-songTitleWrapper
+ main-watchFeed-soundButtonWrapper
+ main-watchFeed-willChange
+ watchFeed-pillFour-keyframe
+ watchFeed-pillOne-keyframe
+ watchFeed-pillThree-keyframe
+ watchFeed-pillTwo-keyframe

View the Watch Feed Modal HTML Diff (between patched and unpatched)

--- unpatched
+++ patched
@@ -1,34 +1,37 @@
-<div class="DJxOEatMU2PHk0cCYWoX" role="presentation">
+<div class="main-watchFeed-modal" role="presentation">
   <div
-    class="FP_XXx0FMQPJEu3WzfpM"
+    class="main-watchFeed-container"
     role="presentation"
     tabindex="-1"
     style="background-color: rgb(0, 52, 102)"
   >
-    <div class="JYvxp3Y58xF59FA7Mnaf">
-      <div class="hK5DaTfJaFpo2BJuoy5k">
+    <div class="main-watchFeed-columnContainer">
+      <div class="main-watchFeed-metadataSection">
         <div>
           <span
-            class="e-9890-text encore-text-body-medium encore-internal-color-text-base AkStH5UDLsXzudcPz_J_"
+            class="e-9890-text encore-text-body-medium encore-internal-color-text-base main-watchFeed-playlistTitle"
             data-encore-id="text"
             >Hot Hits India</span
           >
         </div>
-        <div data-flipper-id="0.05086">
-          <div class="E0LdRRiYvrkUdZCmAXqQ" style="position: relative">
+        <div data-flipper-id="0.84075">
+          <div
+            class="main-watchFeed-metadataWrapper"
+            style="position: relative"
+          >
             <div
-              class="TaaunKIj990MWZKrBWHW"
+              class="main-watchFeed-willChange"
               data-flip-config='{"translate":true}'
               data-flip-id="wf-title-spotify:track:4Q0qVhFQa7j6jRKzo3HDmP"
               data-portal-key="portal"
               style="opacity: 0"
             >
               <span
-                class="e-9890-text encore-text-title-small encore-internal-color-text-base yJJKqce9DPVQnrFseKKU"
+                class="e-9890-text encore-text-title-small encore-internal-color-text-base main-watchFeed-songTitleWrapper"
                 data-encore-id="text"
                 ><a
                   draggable="false"
-                  class="kJqlixofqKau1v1r3YSE"
+                  class="main-watchFeed-songTitle"
                   href="/track/4Q0qVhFQa7j6jRKzo3HDmP"
                   >Sapphire</a
                 ></span
@@ -40,19 +43,22 @@
               data-flip-id="wf-artist-spotify:artist:6eUKZXaKkcviH0Ku9w2n3V"
               data-portal-key="portal"
             >
-              <div class="TaaunKIj990MWZKrBWHW BKbRtjcDGVGtwX86D6Q4">
+              <div class="main-watchFeed-willChange BKbRtjcDGVGtwX86D6Q4">
                 <a draggable="false" href="/artist/6eUKZXaKkcviH0Ku9w2n3V"
                   ><span
-                    class="e-9890-text encore-text-body-medium Cypiobiw1yGi5E9N48gJ"
+                    class="e-9890-text encore-text-body-medium main-watchFeed-songArtist"
                     data-encore-id="text"
                     >Ed Sheeran</span
                   ></a
                 >
               </div>
             </div>
-            <div class="omghgDzOcUFl6oOXYNHX" style="position: relative">
+            <div
+              class="main-watchFeed-playerContainer"
+              style="position: relative"
+            >
               <div
-                class="TaaunKIj990MWZKrBWHW"
+                class="main-watchFeed-willChange"
                 data-flip-config='{"translate":true,"opacity":true,"scale":true}'
                 data-flip-id="wf-coverart-spotify:track:4Q0qVhFQa7j6jRKzo3HDmP"
                 data-portal-key="portal"
@@ -60,23 +66,23 @@
               >
                 <img
                   src="https://i.scdn.co/image/ab67616d000048516fbb60d6a7e03ccb940a518e"
-                  class="Image-sc-1u215sg-3 jobNoT _bMlIQGXEMMBRZOVM71Z"
+                  class="Image-sc-1u215sg-3 Image-image main-watchFeed-playerImage"
                   data-encore-id="image"
                 />
               </div>
               <div
                 role="progressbar"
-                aria-valuenow="46.10013370970138"
+                aria-valuenow="14.539691972465706"
                 aria-valuemin="0"
                 aria-valuemax="100"
                 data-encore-id="progressBar"
-                class="e-9890-progress-bar edeYmiJw2Fd9EFB2SQZo cpE_cN95GCusnLJ3Mssy"
+                class="e-9890-progress-bar main-watchFeed-progressBar cpE_cN95GCusnLJ3Mssy"
                 dir="ltr"
               >
                 <div
                   class="e-9890-progress-bar__indicator"
                   style="
-                    inline-size: 46.1001%;
+                    inline-size: 14.5397%;
                     --progress-bar-color: var(--essential-base, #000000);
                   "
                 ></div>
@@ -84,19 +90,22 @@
             </div>
           </div>
         </div>
-        <div data-flipper-id="0.33299">
-          <div class="dkbQiFBHMdijQeINl_ij">
-            <div class="aiSwqZguOk1P52s9o9xP">
-              <div class="dErRUxXewpEkZd52uLTh" style="position: relative">
+        <div data-flipper-id="0.21574">
+          <div class="main-watchFeed-artistContainer">
+            <div class="main-watchFeed-artistWrapper">
+              <div
+                class="main-watchFeed-flipContainer"
+                style="position: relative"
+              >
                 <div
-                  class="dErRUxXewpEkZd52uLTh"
+                  class="main-watchFeed-flipContainer"
                   data-flip-config='{"translate":true,"opacity":true,"scale":true}'
                   data-flip-id="wf-artist-avatar-spotify:track:4Q0qVhFQa7j6jRKzo3HDmP"
                   data-portal-key="portal"
                   style="opacity: 0"
                 >
                   <figure
-                    class="tp8rO9vtqBGPLOhwcdYv"
+                    class="main-avatar-avatar"
                     title="Ed Sheeran"
                     style="width: 32px; height: 32px"
                   >
@@ -110,22 +119,22 @@
                         loading="eager"
                         src="https://i.scdn.co/image/ab6761610000101fd55c95ad400aed87da52daec"
                         alt="Ed Sheeran"
-                        class="mMx2LUixlnN_Fu45JpFB Xz3tlahv16UpqKBW5HdK Yn2Ei5QZn19gria6LjZj"
+                        class="main-image-image main-avatar-image main-image-loaded"
                       />
                     </div>
                   </figure>
                 </div>
               </div>
-              <div class="bl3iefJaRs18m1sL93Eh">
+              <div class="main-watchFeed-artistMetadataContainer">
                 <div
-                  class="dErRUxXewpEkZd52uLTh"
+                  class="main-watchFeed-flipContainer"
                   data-flip-config='{"translate":true}'
                   data-flip-id="wf-artist-name"
                   data-portal-key="portal"
                   style="position: relative; transform-origin: 0px 0px"
                 >
                   <div
-                    class="dErRUxXewpEkZd52uLTh"
+                    class="main-watchFeed-flipContainer"
                     data-flip-config='{"translate":true,"opacity":true,"scale":true}'
                     data-flip-id="Ed Sheeran"
                     data-portal-key="portal"
@@ -143,89 +152,93 @@
                   </div>
                 </div>
                 <div
-                  class="dErRUxXewpEkZd52uLTh"
+                  class="main-watchFeed-flipContainer"
                   data-flip-config='{"translate":true}'
                   data-flip-id="wf-listeners"
                   data-portal-key="portal"
                   style="transform-origin: 0px 0px"
                 >
                   <span
-                    class="e-9890-text encore-text-body-small encore-internal-color-text-subdued q2y15bQqkJDcBixyP5oa"
+                    class="e-9890-text encore-text-body-small encore-internal-color-text-subdued main-watchFeed-songArtistListeners"
                     data-encore-id="text"
                     >92M</span
                   >
                 </div>
               </div>
               <div
-                class="dErRUxXewpEkZd52uLTh"
+                class="main-watchFeed-flipContainer"
                 data-flip-config='{"translate":true}'
                 data-flip-id="wf-follow-button"
                 data-portal-key="portal"
                 style="transform-origin: 0px 0px"
               >
                 <button
-                  class="Button-sc-y0gtbx-0 iEnZvo encore-text-body-small-bold e-9890-button--small g47sxYAVvWCq_6T4Ba5L"
+                  class="Button-sc-y0gtbx-0 Button-buttonSecondary-small-useBrowserDefaultFocusStyle encore-text-body-small-bold e-9890-button--small main-watchFeed-followButton"
                   data-encore-id="buttonSecondary"
                 >
                   Follow
                 </button>
               </div>
             </div>
-            <div class="zrFS4My93WidFfSAb0u6">
+            <div class="main-watchFeed-genreContainer">
               <div
-                class="dErRUxXewpEkZd52uLTh"
+                class="main-watchFeed-flipContainer"
                 data-flip-config='{"translate":true}'
                 data-flip-id="0"
                 data-portal-key="portal"
                 style="transform-origin: 0px 0px"
               >
                 <button
-                  class="LegacyChip__LegacyChipComponent-sc-tzfq94-0 fJQBhR encore-text-body-small"
+                  class="LegacyChip__LegacyChipComponent-sc-tzfq94-0 LegacyChipComponent-checkbox-chip-sm-useBrowserDefaultFocusStyle encore-text-body-small"
                   role="checkbox"
                   aria-checked="false"
                   data-encore-id="chip"
                 >
                   <span
-                    class="LegacyChipInner__ChipInnerComponent-sc-1qguixk-0 jVBuxI"
-                    ><span class="mENWYVW_PAl8OWp2Ut6e">uk pop</span></span
+                    class="LegacyChipInner__ChipInnerComponent-sc-1qguixk-0 ChipInnerComponent-sm"
+                    ><span class="main-watchFeed-genreContent"
+                      >uk pop</span
+                    ></span
                   >
                 </button>
               </div>
               <div
-                class="dErRUxXewpEkZd52uLTh"
+                class="main-watchFeed-flipContainer"
                 data-flip-config='{"translate":true}'
                 data-flip-id="1"
                 data-portal-key="portal"
                 style="transform-origin: 0px 0px"
               >
                 <button
-                  class="LegacyChip__LegacyChipComponent-sc-tzfq94-0 fJQBhR encore-text-body-small"
+                  class="LegacyChip__LegacyChipComponent-sc-tzfq94-0 LegacyChipComponent-checkbox-chip-sm-useBrowserDefaultFocusStyle encore-text-body-small"
                   role="checkbox"
                   aria-checked="false"
                   data-encore-id="chip"
                 >
                   <span
-                    class="LegacyChipInner__ChipInnerComponent-sc-1qguixk-0 jVBuxI"
-                    ><span class="mENWYVW_PAl8OWp2Ut6e">pop</span></span
+                    class="LegacyChipInner__ChipInnerComponent-sc-1qguixk-0 ChipInnerComponent-sm"
+                    ><span class="main-watchFeed-genreContent">pop</span></span
                   >
                 </button>
               </div>
               <div
-                class="dErRUxXewpEkZd52uLTh"
+                class="main-watchFeed-flipContainer"
                 data-flip-config='{"translate":true}'
                 data-flip-id="2"
                 data-portal-key="portal"
                 style="transform-origin: 0px 0px"
               >
                 <button
-                  class="LegacyChip__LegacyChipComponent-sc-tzfq94-0 fJQBhR encore-text-body-small"
+                  class="LegacyChip__LegacyChipComponent-sc-tzfq94-0 LegacyChipComponent-checkbox-chip-sm-useBrowserDefaultFocusStyle encore-text-body-small"
                   role="checkbox"
                   aria-checked="false"
                   data-encore-id="chip"
                 >
                   <span
-                    class="LegacyChipInner__ChipInnerComponent-sc-1qguixk-0 jVBuxI"
-                    ><span class="mENWYVW_PAl8OWp2Ut6e">good mood</span></span
+                    class="LegacyChipInner__ChipInnerComponent-sc-1qguixk-0 ChipInnerComponent-sm"
+                    ><span class="main-watchFeed-genreContent"
+                      >good mood</span
+                    ></span
                   >
                 </button>
               </div>
@@ -233,395 +246,395 @@
           </div>
         </div>
       </div>
-      <div class="ZRarvpz5og3ifOVHzGOv">
-        <div class="YHeDUF3aquXRxYmKOs1A" tabindex="-1">
-          <div class="sJnarE2UKqyhLo0LFNqy">
+      <div class="main-watchFeed-contentSection">
+        <div class="main-watchFeed-contentWrapper" tabindex="-1">
+          <div class="main-watchFeed-contentRow">
             <div
-              class="qgczwXDFdF_gy4gRs3LN"
+              class="main-watchFeed-content"
               style="--background-color: #3a836d"
             >
-              <div class="bPMdcQr8gSb4AgWfkolx">
+              <div class="main-watchFeed-imageWrapper">
                 <img
                   aria-hidden="false"
                   draggable="false"
                   loading="lazy"
                   src="https://i.scdn.co/image/ab67ba6900002e9f212fde37fbce98506ca7f724"
                   alt=""
-                  class="mMx2LUixlnN_Fu45JpFB iQnF1gu0Mg2rGsKVHIFn Yn2Ei5QZn19gria6LjZj"
+                  class="main-image-image main-watchFeed-image main-image-loaded"
                   width="100%"
                   style="border-radius: 12px"
                 />
               </div>
             </div>
           </div>
-          <div class="sJnarE2UKqyhLo0LFNqy">
+          <div class="main-watchFeed-contentRow">
             <div
-              class="qgczwXDFdF_gy4gRs3LN rCxYvbE1hq2_VEMOM6M_"
+              class="main-watchFeed-content main-watchFeed-contentSelected"
               style="--background-color: #457bb0"
             >
-              <div class="bPMdcQr8gSb4AgWfkolx">
+              <div class="main-watchFeed-imageWrapper">
                 <img
                   aria-hidden="false"
                   draggable="false"
                   loading="lazy"
                   src="https://i.scdn.co/image/ab67ba6900002e9fa399f376ef087474ed04d017"
                   alt=""
-                  class="mMx2LUixlnN_Fu45JpFB iQnF1gu0Mg2rGsKVHIFn Yn2Ei5QZn19gria6LjZj"
+                  class="main-image-image main-watchFeed-image main-image-loaded"
                   width="100%"
                   style="border-radius: 12px"
                 />
               </div>
             </div>
-            <div class="Ul_Er3t8veggCi1APkwp">
+            <div class="main-watchFeed-canvasContainer">
               <div
-                class="canvasContainerWatchFeed fhmiZPVDhaOYIlNd7Myq huMHH_FySIW5UhSrJfy8"
+                class="canvasContainerWatchFeed main-watchFeed-canvasWrapper huMHH_FySIW5UhSrJfy8"
               >
                 <video
                   playsinline=""
                   loop=""
-                  src="blob:https://xpui.app.spotify.com/13bd0ae7-07f8-42ca-8f93-5bf4eaa94c42"
+                  src="blob:https://xpui.app.spotify.com/2a98a023-becc-4fe6-acee-7284868af227"
                   crossorigin="anonymous"
                   autoplay=""
                 ></video>
               </div>
             </div>
           </div>
-          <div class="sJnarE2UKqyhLo0LFNqy">
+          <div class="main-watchFeed-contentRow">
             <div
-              class="qgczwXDFdF_gy4gRs3LN cjZ23zZucJkKFMIrGZa4"
+              class="main-watchFeed-content main-watchFeed-contentAnimation"
               style="--background-color: #535353"
             >
-              <div class="bPMdcQr8gSb4AgWfkolx">
+              <div class="main-watchFeed-imageWrapper">
                 <img
                   aria-hidden="false"
                   draggable="false"
                   loading="lazy"
                   src="https://i.scdn.co/image/ab67616d0000b273b2d278666b1150e827de324d"
                   alt=""
-                  class="mMx2LUixlnN_Fu45JpFB iQnF1gu0Mg2rGsKVHIFn Yn2Ei5QZn19gria6LjZj"
+                  class="main-image-image main-watchFeed-image main-image-loaded"
                   width="100%"
                   style="border-radius: 12px"
                 />
               </div>
             </div>
           </div>
-          <div class="sJnarE2UKqyhLo0LFNqy">
+          <div class="main-watchFeed-contentRow">
             <div
-              class="qgczwXDFdF_gy4gRs3LN cjZ23zZucJkKFMIrGZa4"
+              class="main-watchFeed-content main-watchFeed-contentAnimation"
               style="--background-color: #306080"
             >
-              <div class="bPMdcQr8gSb4AgWfkolx">
+              <div class="main-watchFeed-imageWrapper">
                 <img
                   aria-hidden="false"
                   draggable="false"
                   loading="lazy"
                   src="https://i.scdn.co/image/ab67616d0000b27396e4cfdd4c3aa8088685b262"
                   alt=""
-                  class="mMx2LUixlnN_Fu45JpFB iQnF1gu0Mg2rGsKVHIFn Yn2Ei5QZn19gria6LjZj"
+                  class="main-image-image main-watchFeed-image main-image-loaded"
                   width="100%"
                   style="border-radius: 12px"
                 />
               </div>
             </div>
           </div>
-          <div class="sJnarE2UKqyhLo0LFNqy">
+          <div class="main-watchFeed-contentRow">
             <div
-              class="qgczwXDFdF_gy4gRs3LN cjZ23zZucJkKFMIrGZa4"
+              class="main-watchFeed-content main-watchFeed-contentAnimation"
               style="--background-color: #404040"
             >
-              <div class="bPMdcQr8gSb4AgWfkolx">
+              <div class="main-watchFeed-imageWrapper">
                 <img
                   aria-hidden="false"
                   draggable="false"
                   loading="lazy"
                   src="https://i.scdn.co/image/ab67616d0000b273006a58c9d359ba942cb7fc91"
                   alt=""
-                  class="mMx2LUixlnN_Fu45JpFB iQnF1gu0Mg2rGsKVHIFn"
+                  class="main-image-image main-watchFeed-image"
                   width="100%"
                   style="border-radius: 12px"
                 />
               </div>
             </div>
           </div>
-          <div class="sJnarE2UKqyhLo0LFNqy">
+          <div class="main-watchFeed-contentRow">
             <div
-              class="qgczwXDFdF_gy4gRs3LN"
+              class="main-watchFeed-content"
               style="--background-color: #603008"
             >
-              <div class="bPMdcQr8gSb4AgWfkolx">
+              <div class="main-watchFeed-imageWrapper">
                 <img
                   aria-hidden="false"
                   draggable="false"
                   loading="lazy"
                   src="https://i.scdn.co/image/ab67ba6900002e9f6f5cae85685fdc6aaf85dfce"
                   alt=""
-                  class="mMx2LUixlnN_Fu45JpFB iQnF1gu0Mg2rGsKVHIFn"
+                  class="main-image-image main-watchFeed-image"
                   width="100%"
                   style="border-radius: 12px"
                 />
               </div>
             </div>
           </div>
-          <div class="sJnarE2UKqyhLo0LFNqy">
+          <div class="main-watchFeed-contentRow">
             <div
-              class="qgczwXDFdF_gy4gRs3LN"
+              class="main-watchFeed-content"
               style="--background-color: #637c76"
             >
-              <div class="bPMdcQr8gSb4AgWfkolx">
+              <div class="main-watchFeed-imageWrapper">
                 <img
                   aria-hidden="false"
                   draggable="false"
                   loading="lazy"
                   src="https://i.scdn.co/image/ab67ba6900002e9ff4bef6e76c616f3c183e45b0"
                   alt=""
-                  class="mMx2LUixlnN_Fu45JpFB iQnF1gu0Mg2rGsKVHIFn"
+                  class="main-image-image main-watchFeed-image"
                   width="100%"
                   style="border-radius: 12px"
                 />
               </div>
             </div>
           </div>
-          <div class="sJnarE2UKqyhLo0LFNqy">
+          <div class="main-watchFeed-contentRow">
             <div
-              class="qgczwXDFdF_gy4gRs3LN"
+              class="main-watchFeed-content"
               style="--background-color: #887260"
             >
-              <div class="bPMdcQr8gSb4AgWfkolx">
+              <div class="main-watchFeed-imageWrapper">
                 <img
                   aria-hidden="false"
                   draggable="false"
                   loading="lazy"
                   src="https://i.scdn.co/image/ab67ba6900002e9fa49dc30d5fb91c88e83e2180"
                   alt=""
-                  class="mMx2LUixlnN_Fu45JpFB iQnF1gu0Mg2rGsKVHIFn"
+                  class="main-image-image main-watchFeed-image"
                   width="100%"
                   style="border-radius: 12px"
                 />
               </div>
             </div>
           </div>
-          <div class="sJnarE2UKqyhLo0LFNqy">
+          <div class="main-watchFeed-contentRow">
             <div
-              class="qgczwXDFdF_gy4gRs3LN"
+              class="main-watchFeed-content"
               style="--background-color: #3a836d"
             >
-              <div class="bPMdcQr8gSb4AgWfkolx">
+              <div class="main-watchFeed-imageWrapper">
                 <img
                   aria-hidden="false"
                   draggable="false"
                   loading="lazy"
                   src="https://i.scdn.co/image/ab67ba6900002e9ffb3d1c5dd1730c1bf2a274d0"
                   alt=""
-                  class="mMx2LUixlnN_Fu45JpFB iQnF1gu0Mg2rGsKVHIFn"
+                  class="main-image-image main-watchFeed-image"
                   width="100%"
                   style="border-radius: 12px"
                 />
               </div>
             </div>
           </div>
-          <div class="sJnarE2UKqyhLo0LFNqy">
+          <div class="main-watchFeed-contentRow">
             <div
-              class="qgczwXDFdF_gy4gRs3LN"
+              class="main-watchFeed-content"
               style="--background-color: #66788f"
             >
-              <div class="bPMdcQr8gSb4AgWfkolx">
+              <div class="main-watchFeed-imageWrapper">
                 <img
                   aria-hidden="false"
                   draggable="false"
                   loading="lazy"
                   src="https://i.scdn.co/image/ab67ba6900002e9f6d7f7aae80d392e44d8b04f8"
                   alt=""
-                  class="mMx2LUixlnN_Fu45JpFB iQnF1gu0Mg2rGsKVHIFn"
+                  class="main-image-image main-watchFeed-image"
                   width="100%"
                   style="border-radius: 12px"
                 />
               </div>
             </div>
           </div>
-          <div class="sJnarE2UKqyhLo0LFNqy">
+          <div class="main-watchFeed-contentRow">
             <div
-              class="qgczwXDFdF_gy4gRs3LN"
+              class="main-watchFeed-content"
               style="--background-color: #c00808"
             >
-              <div class="bPMdcQr8gSb4AgWfkolx">
+              <div class="main-watchFeed-imageWrapper">
                 <img
                   aria-hidden="false"
                   draggable="false"
                   loading="lazy"
                   src="https://i.scdn.co/image/ab67ba6900002e9fdd162ed7b0d009782d52f2e8"
                   alt=""
-                  class="mMx2LUixlnN_Fu45JpFB iQnF1gu0Mg2rGsKVHIFn"
+                  class="main-image-image main-watchFeed-image"
                   width="100%"
                   style="border-radius: 12px"
                 />
               </div>
             </div>
           </div>
-          <div class="sJnarE2UKqyhLo0LFNqy">
+          <div class="main-watchFeed-contentRow">
             <div
-              class="qgczwXDFdF_gy4gRs3LN"
+              class="main-watchFeed-content"
               style="--background-color: #202838"
             >
-              <div class="bPMdcQr8gSb4AgWfkolx">
+              <div class="main-watchFeed-imageWrapper">
                 <img
                   aria-hidden="false"
                   draggable="false"
                   loading="lazy"
                   src="https://i.scdn.co/image/ab67ba6900002e9fb1eb0d8e29affe53cc5b95f0"
                   alt=""
-                  class="mMx2LUixlnN_Fu45JpFB iQnF1gu0Mg2rGsKVHIFn"
+                  class="main-image-image main-watchFeed-image"
                   width="100%"
                   style="border-radius: 12px"
                 />
               </div>
             </div>
           </div>
-          <div class="sJnarE2UKqyhLo0LFNqy">
+          <div class="main-watchFeed-contentRow">
             <div
-              class="qgczwXDFdF_gy4gRs3LN"
+              class="main-watchFeed-content"
               style="--background-color: #401800"
             >
-              <div class="bPMdcQr8gSb4AgWfkolx">
+              <div class="main-watchFeed-imageWrapper">
                 <img
                   aria-hidden="false"
                   draggable="false"
                   loading="lazy"
                   src="https://i.scdn.co/image/ab67ba6900002e9fc3a2651ed99650502ad822ad"
                   alt=""
-                  class="mMx2LUixlnN_Fu45JpFB iQnF1gu0Mg2rGsKVHIFn"
+                  class="main-image-image main-watchFeed-image"
                   width="100%"
                   style="border-radius: 12px"
                 />
               </div>
             </div>
           </div>
-          <div class="sJnarE2UKqyhLo0LFNqy">
+          <div class="main-watchFeed-contentRow">
             <div
-              class="qgczwXDFdF_gy4gRs3LN cjZ23zZucJkKFMIrGZa4"
+              class="main-watchFeed-content main-watchFeed-contentAnimation"
               style="--background-color: #b06050"
             >
-              <div class="bPMdcQr8gSb4AgWfkolx">
+              <div class="main-watchFeed-imageWrapper">
                 <img
                   aria-hidden="false"
                   draggable="false"
                   loading="lazy"
                   src="https://i.scdn.co/image/ab67616d0000b273bed9c7b9e33025a81d4d02e4"
                   alt=""
-                  class="mMx2LUixlnN_Fu45JpFB iQnF1gu0Mg2rGsKVHIFn"
+                  class="main-image-image main-watchFeed-image"
                   width="100%"
                   style="border-radius: 12px"
                 />
               </div>
             </div>
           </div>
-          <div class="sJnarE2UKqyhLo0LFNqy">
+          <div class="main-watchFeed-contentRow">
             <div
-              class="qgczwXDFdF_gy4gRs3LN"
+              class="main-watchFeed-content"
               style="--background-color: #4a8450"
             >
-              <div class="bPMdcQr8gSb4AgWfkolx">
+              <div class="main-watchFeed-imageWrapper">
                 <img
                   aria-hidden="false"
                   draggable="false"
                   loading="lazy"
                   src="https://i.scdn.co/image/ab67ba6900002e9f28b166239564d6dde9ae3f7d"
                   alt=""
-                  class="mMx2LUixlnN_Fu45JpFB iQnF1gu0Mg2rGsKVHIFn"
+                  class="main-image-image main-watchFeed-image"
                   width="100%"
                   style="border-radius: 12px"
                 />
               </div>
             </div>
           </div>
-          <div class="sJnarE2UKqyhLo0LFNqy">
+          <div class="main-watchFeed-contentRow">
             <div
-              class="qgczwXDFdF_gy4gRs3LN"
+              class="main-watchFeed-content"
               style="--background-color: #5e7b8d"
             >
-              <div class="bPMdcQr8gSb4AgWfkolx">
+              <div class="main-watchFeed-imageWrapper">
                 <img
                   aria-hidden="false"
                   draggable="false"
                   loading="lazy"
                   src="https://i.scdn.co/image/ab67ba6900002e9ff752015437ca3367fd353a4c"
                   alt=""
-                  class="mMx2LUixlnN_Fu45JpFB iQnF1gu0Mg2rGsKVHIFn"
+                  class="main-image-image main-watchFeed-image"
                   width="100%"
                   style="border-radius: 12px"
                 />
               </div>
             </div>
           </div>
-          <div class="sJnarE2UKqyhLo0LFNqy">
+          <div class="main-watchFeed-contentRow">
             <div
-              class="qgczwXDFdF_gy4gRs3LN"
+              class="main-watchFeed-content"
               style="--background-color: #78786c"
             >
-              <div class="bPMdcQr8gSb4AgWfkolx">
+              <div class="main-watchFeed-imageWrapper">
                 <img
                   aria-hidden="false"
                   draggable="false"
                   loading="lazy"
                   src="https://i.scdn.co/image/ab67ba6900002e9fb1c9e3f216e177979bedcba5"
                   alt=""
-                  class="mMx2LUixlnN_Fu45JpFB iQnF1gu0Mg2rGsKVHIFn"
+                  class="main-image-image main-watchFeed-image"
                   width="100%"
                   style="border-radius: 12px"
                 />
               </div>
             </div>
           </div>
-          <div class="sJnarE2UKqyhLo0LFNqy">
+          <div class="main-watchFeed-contentRow">
             <div
-              class="qgczwXDFdF_gy4gRs3LN"
+              class="main-watchFeed-content"
               style="--background-color: #401800"
             >
-              <div class="bPMdcQr8gSb4AgWfkolx">
+              <div class="main-watchFeed-imageWrapper">
                 <img
                   aria-hidden="false"
                   draggable="false"
                   loading="lazy"
                   src="https://i.scdn.co/image/ab67ba6900002e9f16e9fc0865554ed30cb447b8"
                   alt=""
-                  class="mMx2LUixlnN_Fu45JpFB iQnF1gu0Mg2rGsKVHIFn"
+                  class="main-image-image main-watchFeed-image"
                   width="100%"
                   style="border-radius: 12px"
                 />
               </div>
             </div>
           </div>
-          <div class="sJnarE2UKqyhLo0LFNqy">
+          <div class="main-watchFeed-contentRow">
             <div
-              class="qgczwXDFdF_gy4gRs3LN"
+              class="main-watchFeed-content"
               style="--background-color: #405820"
             >
-              <div class="bPMdcQr8gSb4AgWfkolx">
+              <div class="main-watchFeed-imageWrapper">
                 <img
                   aria-hidden="false"
                   draggable="false"
                   loading="lazy"
                   src="https://i.scdn.co/image/ab67ba6900002e9f5ec640d51434ffe9de45263f"
                   alt=""
-                  class="mMx2LUixlnN_Fu45JpFB iQnF1gu0Mg2rGsKVHIFn"
+                  class="main-image-image main-watchFeed-image"
                   width="100%"
                   style="border-radius: 12px"
                 />
               </div>
             </div>
           </div>
-          <div class="sJnarE2UKqyhLo0LFNqy">
+          <div class="main-watchFeed-contentRow">
             <div
-              class="qgczwXDFdF_gy4gRs3LN"
+              class="main-watchFeed-content"
               style="--background-color: #c00808"
             >
-              <div class="bPMdcQr8gSb4AgWfkolx">
+              <div class="main-watchFeed-imageWrapper">
                 <img
                   aria-hidden="false"
                   draggable="false"
                   loading="lazy"
                   src="https://i.scdn.co/image/ab67ba6900002e9f1a6786f72037b7b8d25147d7"
                   alt=""
-                  class="mMx2LUixlnN_Fu45JpFB iQnF1gu0Mg2rGsKVHIFn"
+                  class="main-image-image main-watchFeed-image"
                   width="100%"
                   style="border-radius: 12px"
                 />
@@ -631,11 +644,11 @@
         </div>
         <div class="RQaEu8T4LvqfvRmirqJy"></div>
       </div>
-      <div class="ji0qx5PBc5_4aMgNLGrp">
-        <div class="YmJS4xMTXdNQLvbP2VAt">
-          <div class="Qtx4b7Wc1c7NEX49CMeH">
+      <div class="main-watchFeed-actionSection">
+        <div class="main-watchFeed-actionHeaderWrapper">
+          <div class="main-watchFeed-soundButtonWrapper">
             <button
-              class="Button-sc-1dqy6lx-0 giZtyl encore-text-body-medium-bold e-9890-overflow-wrap-anywhere e-9890-button-tertiary--condensed"
+              class="Button-sc-1dqy6lx-0 Button-buttonTertiary-medium-useBrowserDefaultFocusStyle-condensedAll encore-text-body-medium-bold e-9890-overflow-wrap-anywhere e-9890-button-tertiary--condensed"
               aria-label="Mute"
               data-encore-id="buttonTertiary"
             >
@@ -651,7 +664,7 @@
                 ></path>
                 <path d="M17 16.032V7.968a4.5 4.5 0 0 1 0 8.064z"></path></svg
               ><img
-                class="IQsUjbPtrVLyyA5iu3zQ"
+                class="main-watchFeed-equalizerIcon"
                 width="14"
                 height="14"
                 alt=""
@@ -660,7 +673,7 @@
             </button>
           </div>
           <button
-            class="Button-sc-1dqy6lx-0 giZtyl encore-text-body-medium-bold e-9890-overflow-wrap-anywhere e-9890-button-tertiary--condensed"
+            class="Button-sc-1dqy6lx-0 Button-buttonTertiary-medium-useBrowserDefaultFocusStyle-condensedAll encore-text-body-medium-bold e-9890-overflow-wrap-anywhere e-9890-button-tertiary--condensed"
             aria-label="Close"
             data-encore-id="buttonTertiary"
           >
@@ -678,7 +691,7 @@
           </button>
         </div>
         <div
-          class="SliTY9e8oKOiypDQdhlw"
+          class="main-watchFeed-actionBodyWrapper"
           style="
             --background-base: #003466ff;
             --background-highlight: #00274d;
@@ -709,8 +722,7 @@
         >
           <button
             aria-haspopup="menu"
-            data-testid="more-button"
-            class="Button-sc-1dqy6lx-0 iwlsM e-9890-overflow-wrap-anywhere e-9890-button-tertiary--icon-only e-9890-button-tertiary--condensed OGPXh73aLJDzhfFAdPvM"
+            class="Button-sc-1dqy6lx-0 Button-buttonTertiary-large-iconOnly-useBrowserDefaultFocusStyle-condensed e-9890-overflow-wrap-anywhere e-9890-button-tertiary--icon-only e-9890-button-tertiary--condensed main-watchFeed-menuButton"
             aria-label="More options for Sapphire"
             data-encore-id="buttonTertiary"
           >
@@ -736,7 +748,7 @@
             ></span></button
           ><button
             tabindex="0"
-            class="Button-sc-1dqy6lx-0 imSSKJ e-9890-overflow-wrap-anywhere e-9890-button-tertiary--icon-only e-9890-button-tertiary--condensed pvGZ831aNzHTQMZ8CA_u"
+            class="Button-sc-1dqy6lx-0 Button-buttonTertiary-medium-iconOnly-useBrowserDefaultFocusStyle-condensed e-9890-overflow-wrap-anywhere e-9890-button-tertiary--icon-only e-9890-button-tertiary--condensed main-watchFeed-shareButton"
             aria-label="Copy Song Link"
             aria-hidden="false"
             data-encore-id="buttonTertiary"
@@ -758,7 +770,7 @@
             ></span></button
           ><button
             data-testid="add-button"
-            class="Button-sc-1dqy6lx-0 LlNsd e-9890-overflow-wrap-anywhere e-9890-button-tertiary--icon-only d9bbNw4YiAXpQpjrSgBJ"
+            class="Button-sc-1dqy6lx-0 Button-buttonTertiary-textSubdued-medium-iconOnly-useBrowserDefaultFocusStyle e-9890-overflow-wrap-anywhere e-9890-button-tertiary--icon-only main-watchFeed-queueButton"
             aria-label="Add to queue"
             data-encore-id="buttonTertiary"
           >
@@ -781,7 +793,7 @@
             ></span></button
           ><button
             aria-checked="true"
-            class="Button-sc-1dqy6lx-0 ynGAh e-9890-overflow-wrap-anywhere e-9890-button-tertiary--icon-only e-9890-button-tertiary--condensed BLIxyum1wPNrFibaQ9wr"
+            class="Button-sc-1dqy6lx-0 Button-buttonTertiary-textBrightAccent-large-iconOnly-useBrowserDefaultFocusStyle-condensed e-9890-overflow-wrap-anywhere e-9890-button-tertiary--icon-only e-9890-button-tertiary--condensed main-watchFeed-addToPlaylistButton"
             aria-label="Add to playlist"
             data-encore-id="buttonTertiary"
           >
@@ -808,10 +820,10 @@
             ></span>
           </button>
         </div>
-        <div class="NazSI1w8xaruwFqTP3sS">
+        <div class="main-watchFeed-actionFooterWrapper">
           <button
             label="Previous"
-            class="Button-sc-1dqy6lx-0 LlNsd e-9890-overflow-wrap-anywhere e-9890-button-tertiary--icon-only fCykqEza3WtgKmxjL0C1"
+            class="Button-sc-1dqy6lx-0 Button-buttonTertiary-medium-iconOnly-useBrowserDefaultFocusStyle e-9890-overflow-wrap-anywhere e-9890-button-tertiary--icon-only main-watchFeed-scrollToTopButton"
             aria-label="Previous"
             data-encore-id="buttonTertiary"
           >
@@ -829,7 +841,7 @@
             ></span></button
           ><button
             label="Next"
-            class="Button-sc-1dqy6lx-0 LlNsd e-9890-overflow-wrap-anywhere e-9890-button-tertiary--icon-only bsYqS4l_sJOvBGGeudDj"
+            class="Button-sc-1dqy6lx-0 Button-buttonTertiary-medium-iconOnly-useBrowserDefaultFocusStyle e-9890-overflow-wrap-anywhere e-9890-button-tertiary--icon-only main-watchFeed-scrollToBottomButton"
             aria-label="Next"
             data-encore-id="buttonTertiary"
           >

Summary by CodeRabbit

Improvements & Enhancements
- Enhanced styling and layout infrastructure supporting improved user interface organization across artist information displays, modal dialogs, media playback controls, search functionality, watch feed features, and explicit content indicators. Updated component structure for better visual presentation and rendering consistency.

I think this works for 1.2.6x too

New classnames for `1.2.5x ` till `1.2.75 `

Add Watch Feed classes for `1.2.6x` till `1.2.75`

coderabbitai · 2025-10-20T17:10:38Z

Walkthrough

This pull request expands css-map.json with numerous new UI component ID-to-CSS-class mappings. Additions span artist profiles, desktop modals, watch feed components, playback controls, search interfaces, and explicit content indicators, alongside reorganization of existing entries.

Changes

Cohort / File(s)	Change Summary
CSS Component Mappings `css-map.json`	Added 100+ new key-to-value mappings for UI component identifiers, including artist bio sections, desktop modals (about Spotify, version status), watch feed elements, playback progress bar controls, search modal components, category grid items, and explicit content indicators. Existing mappings reorganized with some entries reordered.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

The change involves a large volume of homogeneous additions (similar key-value pair patterns repeated across multiple UI sections), but requires careful verification of mapping correctness, absence of duplicates or conflicts, and proper structural organization across distinct feature areas (artist, modals, playback, search).

Possibly related PRs

spicetify/cli#3541: Adds overlapping UI key-to-value mappings for artist/top-bar/player UI elements with subdued variants.
spicetify/cli#3529: Adds playback/now-playing/progress-bar related class mappings in css-map.json.
spicetify/cli#3511: Modifies css-map.json to add/rekey hashed ID-to-CSS-class mappings for UI components.

Suggested reviewers

rxri
kyrie25

Poem

🐰✨ New entries bloom across the map,
Artist bios, modals, playback—no gap!
Watch feeds dance and searches align,
Component IDs shine divine! 🎨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.
Title Check	✅ Passed	The title "feat(css-maps): add missing maps and introduce new maps for watch feed modal" accurately refers to significant aspects of the changeset. Based on the raw summary and PR objectives, the pull request substantially adds watch feed-related mappings (main-watchFeed-* entries) along with artist about modal classes, explicit icon classnames, and other UI component mappings. The phrase "add missing maps" appropriately captures the broader scope of new CSS map entries, while "watch feed modal" highlights a major component of the changes. The title is clear, specific, and accurately reflects real parts of the changeset without being misleading.

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

sanoojes added 7 commits October 20, 2025 17:58

feat(css-map): add desktop modal classes for 1.2.73

d4cec13

feat(css-map): add artist about modal classes for 1.2.73

23fc35f

I think this works for 1.2.6x too

chore(css-map): sort maps

c1fa5d1

feat(css-map): add explicit label classes

c200637

New classnames for `1.2.5x ` till `1.2.75 `

feat(css-map): add watch feed modal classes

0dff379

Add Watch Feed classes for `1.2.6x` till `1.2.75`

Delete patched.html

1433c88

Delete watchfeed.css

f4cb342

sanoojes changed the title ~~feat(css-maps): add new watch feed, missing artist about modal classes and new explicit icon classnames~~ feat(css-maps): add new watch feed, missing artist about modal classes and new explicit icon classnames, and sort some classes Oct 20, 2025

sanoojes changed the title ~~feat(css-maps): add new watch feed, missing artist about modal classes, missing artist about spotify modal and new explicit icon classnames, and sort some classes~~ feat(css-maps): add missing maps and introduce new maps for watch feed modal Oct 21, 2025

sanoojes added 2 commits October 23, 2025 10:12

Merge branch 'main' into css-maps

a05a907

Merge branch 'main' into css-maps

41bb182

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

feat(css-maps): add missing maps and introduce new maps for watch feed modal #3560

feat(css-maps): add missing maps and introduce new maps for watch feed modal #3560

sanoojes commented Oct 20, 2025 •

edited by coderabbitai bot

Loading

Uh oh!

coderabbitai bot commented Oct 20, 2025 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

feat(css-maps): add missing maps and introduce new maps for watch feed modal #3560

Are you sure you want to change the base?

feat(css-maps): add missing maps and introduce new maps for watch feed modal #3560

Conversation

sanoojes commented Oct 20, 2025 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

coderabbitai bot commented Oct 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Suggested reviewers

Poem

Pre-merge checks and finishing touches

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

sanoojes commented Oct 20, 2025 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Oct 20, 2025 •

edited

Loading