Add O-Count to performer page (#6171)

ui/v2.5/src/components/Performers/PerformerDetails/Performer.tsx

@@ -42,6 +42,7 @@ import {
 import { DetailTitle } from "src/components/Shared/DetailsPage/DetailTitle";
 import { ExpandCollapseButton } from "src/components/Shared/CollapseButton";
 import { FavoriteIcon } from "src/components/Shared/FavoriteIcon";
+import { SweatDrops } from "src/components/Shared/SweatDrops";
 import { AliasList } from "src/components/Shared/DetailsPage/AliasList";
 import { HeaderImage } from "src/components/Shared/DetailsPage/HeaderImage";
 import { LightboxLink } from "src/hooks/Lightbox/LightboxLink";
@@ -423,12 +424,22 @@ const PerformerPage: React.FC<IProps> = PatchComponent(
                   </span>
                 </DetailTitle>
                 <AliasList aliases={performer.alias_list} />
-                <RatingSystem
-                  value={performer.rating100}
-                  onSetRating={(value) => setRating(value)}
-                  clickToRate
-                  withoutContext
-                />
+                <div className="quality-group">
+                  <RatingSystem
+                    value={performer.rating100}
+                    onSetRating={(value) => setRating(value)}
+                    clickToRate
+                    withoutContext
+                  />
+                  {!!performer.o_counter && (
+                    <span className="o-counter">
+                      <span className="fa-icon">
+                        <SweatDrops />
+                      </span>
+                      <span>{performer.o_counter}</span>
+                    </span>
+                  )}
+                </div>
                 {!isEditing && (
                   <PerformerDetailsPanel
                     performer={performer}

ui/v2.5/src/components/Performers/styles.scss

@@ -35,12 +35,33 @@
     .rating-number .form-control {
       width: inherit;
     }
+
+    // The following min-width declarations prevent
+    // the performer's O-Count from moving around
+    // when hovering over rating stars
+    .rating-stars-precision-full .star-rating-number {
+      min-width: 0.75rem;
+    }
+
+    .rating-stars-precision-half .star-rating-number,
+    .rating-stars-precision-tenth .star-rating-number {
+      min-width: 1.45rem;
+    }
+
+    .rating-stars-precision-quarter .star-rating-number {
+      min-width: 2rem;
+    }
   }
 
   .alias {
     font-weight: bold;
   }
 
+  .quality-group {
+    display: inline-flex;
+    margin-top: 0.25rem;
+  }
+
   // the detail element ids are the same as field type name
   // which don't follow the correct convention
   /* stylelint-disable selector-class-pattern */

ui/v2.5/src/components/Shared/Rating/RatingStars.tsx

@@ -228,21 +228,16 @@ export const RatingStars = PatchComponent(
       );
     };
 
-    const maybeRenderStarRatingNumber = () => {
+    const maybeGetStarRatingNumber = () => {
       const ratingFraction = getCurrentSelectedRating();
       if (
         !ratingFraction ||
         (ratingFraction.rating == 0 && ratingFraction.fraction == 0)
       ) {
-        return;
+        return "";
       }
 
-      return (
-        <span className="star-rating-number">
-          {ratingFraction.rating + ratingFraction.fraction}
-          {suffix}
-        </span>
-      );
+      return ratingFraction.rating + ratingFraction.fraction + suffix;
     };
 
     const precisionClassName = `rating-stars-precision-${props.precision}`;
@@ -252,7 +247,7 @@ export const RatingStars = PatchComponent(
         {Array.from(Array(max)).map((value, index) =>
           renderRatingButton(index + 1)
         )}
-        {maybeRenderStarRatingNumber()}
+        <span className="star-rating-number">{maybeGetStarRatingNumber()}</span>
       </div>
     );
   }