add stats to search

src/website/packages/components/src/api/weights/GetWeight.ts

@@ -31,6 +31,7 @@ export interface Weight {
     bookmark_count: number;
     positive_rating_count: number;
   };
+  usage_count: number;
 }
 
 export interface GetWeightRequest {}

src/website/packages/fakeyou.com/src/components/common/Card/AudioCard/AudioCard.tsx

@@ -11,6 +11,8 @@ import WeightCoverImage from "components/common/WeightCoverImage";
 import { BucketConfig } from "@storyteller/components/src/api/BucketConfig";
 import getCardUrl from "../getCardUrl";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import Stat from "components/common/Stat/Stat";
+import { faVolumeHigh } from "@fortawesome/pro-duotone-svg-icons";
 // import getCardUrl from "../getCardUrl";
 
 interface AudioCardProps {
@@ -177,6 +179,11 @@ export default function AudioCard({
                         label={weightBadgeLabel}
                         color={weightBadgeColor}
                       />
+                      <span className="d-none d-lg-flex align-items-center gap-1 fs-7 opacity-50 text-white">
+                        <Stat 
+                          count={data?.usage_count}
+                          />
+                      </span>
                       <span className="d-none d-lg-flex align-items-center gap-1 fs-7 opacity-50 text-white">
                         <FontAwesomeIcon icon={faThumbsUp} />
                         {data?.stats?.positive_rating_count}

src/website/packages/fakeyou.com/src/components/common/Searcher/Searcher.tsx

@@ -14,6 +14,7 @@ import useSearcherStore from "hooks/useSearcherStore";
 import prepFilter from "resources/prepFilter";
 import { ListWeights } from "@storyteller/components/src/api/weights/ListWeights";
 import InfiniteScroll from "react-infinite-scroll-component";
+
 interface SearcherProps {
   type?: "page" | "modal";
   dataType?: "media" | "weights";

src/website/packages/fakeyou.com/src/components/common/Stat/Stat.tsx

@@ -0,0 +1,38 @@
+import { IconProp } from "@fortawesome/fontawesome-svg-core";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React from "react";
+
+const MILLION : number = 1000000;
+const THOUSAND : number = 1000;
+
+interface Props {
+  count: number,
+  icon?: IconProp,
+}
+
+export default function Stat(props: Props) {
+  let friendlyCount = toHumanNumber(props.count);
+
+  let icon = <></>;
+  if (props.icon !== undefined) {
+    icon = <FontAwesomeIcon icon={props.icon} />;
+  }
+
+  return (
+    <span>
+      {friendlyCount} {icon}
+    </span>
+  )
+}
+
+function toHumanNumber(count: number) : string {
+  if (count > MILLION) {
+    let digits = (count / MILLION).toFixed(2);
+    return `${digits}m`;
+  } else if (count > THOUSAND) {
+    let digits = (count / THOUSAND).toFixed(2);
+    return `${digits}k`;
+  } else {
+    return count.toString();
+  }
+}

src/website/packages/fakeyou.com/src/components/entities/WeightCard/WeightCard.tsx

@@ -9,6 +9,7 @@ import useWeightTypeInfo from "hooks/useWeightTypeInfo";
 import { WeightType } from "@storyteller/components/src/api/_common/enums";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faThumbsUp } from "@fortawesome/pro-solid-svg-icons";
+import Stat from "components/common/Stat/Stat";
 
 interface Props {
   data: any;
@@ -95,6 +96,11 @@ export default function WeightCard({
                   small={true}
                   color={weightTagColor || ""}
                 />
+                <span className="d-none d-lg-flex align-items-center gap-1 fs-7 opacity-50">
+                  <Stat
+                    count={data?.usage_count}
+                    />
+                </span>
                 <span className="d-none d-lg-flex align-items-center gap-1 fs-7 opacity-50">
                   <FontAwesomeIcon icon={faThumbsUp} />
                   {data?.stats?.positive_rating_count}

src/website/packages/fakeyou.com/src/v2/view/pages/lipsync/LipsyncTokens.ts

@@ -30,6 +30,7 @@ export const LipsyncTokenMap: { [key: string]: string } = {
   // Rick Sanchez (live portrait video is poor quality)
   weight_0f762jdzgsy1dhpb86qxy4ssm: "m_3b2yhzq4na7yg724k9tm4dn0513c36", // Rick Sanchez
   weight_qfz806d82b0qmxfn3vzgmtyme: "m_3b2yhzq4na7yg724k9tm4dn0513c36", // Rick Sanchez
+  weight_n99qccqtbb4fe3yj16dsfgfv4: "m_3b2yhzq4na7yg724k9tm4dn0513c36", // Rick Sanchez
   // Walter White (live portrait video looks funny)
   weight_0bsxzrwp6p77t67s8dcn607wf: "m_ft3y3vjyg2shssrqq0p51qh143pm0n", // Walter White (most popular)
   weight_x6vgpe83p2g9pxehhaq4e8823: "m_ft3y3vjyg2shssrqq0p51qh143pm0n", // Walter White