From fab8b14bec8a8a55322d36f5c5aa468dd7421cec Mon Sep 17 00:00:00 2001
From: Brandon Thomas <echelon@gmail.com>
Date: Mon, 30 Jan 2023 19:34:31 -0500
Subject: [PATCH] select random voice

---
 .../public/sitemap_static_pages.html          |  3 ++
 packages/fakeyou.com/src/common/Analytics.ts  |  4 +++
 .../tts_model_list/search/SearchOmnibar.tsx   |  1 +
 .../search/components/VoiceCountLabel.tsx     | 33 ++++++++++++++-----
 4 files changed, 32 insertions(+), 9 deletions(-)

diff --git a/packages/fakeyou.com/public/sitemap_static_pages.html b/packages/fakeyou.com/public/sitemap_static_pages.html
index 64627e2ae5..2cd88e6c7c 100644
--- a/packages/fakeyou.com/public/sitemap_static_pages.html
+++ b/packages/fakeyou.com/public/sitemap_static_pages.html
@@ -6,4 +6,7 @@
   <url>
     <loc>https://fakeyou.com/pricing</loc>
   </url>
+  <url>
+    <loc>https://fakeyou.com/video</loc>
+  </url>
 </urlset>
\ No newline at end of file
diff --git a/packages/fakeyou.com/src/common/Analytics.ts b/packages/fakeyou.com/src/common/Analytics.ts
index d847b68da9..fb91e0ffe9 100644
--- a/packages/fakeyou.com/src/common/Analytics.ts
+++ b/packages/fakeyou.com/src/common/Analytics.ts
@@ -152,6 +152,10 @@ class Analytics {
     Analytics.sendCategorizedEvent(this.TTS, 'open_explore_voices_modal');
   }
 
+  static ttsClickRandomVoice() {
+    Analytics.sendCategorizedEvent(this.TTS, 'click_random_voice');
+  }
+
   static ttsClickTextInputBox() {
     Analytics.sendCategorizedEvent(this.TTS, 'click_text_input_box');
   }
diff --git a/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/search/SearchOmnibar.tsx b/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/search/SearchOmnibar.tsx
index 0bc72e9e5d..9c1b2cb812 100644
--- a/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/search/SearchOmnibar.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/search/SearchOmnibar.tsx
@@ -45,6 +45,7 @@ export function SearchOmnibar(props: Props) {
           ttsModelsByCategoryToken={props.ttsModelsByCategoryToken}
           selectedCategories={props.selectedCategories}
           selectedTtsLanguageScope={props.selectedTtsLanguageScope}
+          setMaybeSelectedTtsModel={props.setMaybeSelectedTtsModel}
         />
 
         <div className="d-flex flex-column flex-lg-row gap-3">
diff --git a/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/search/components/VoiceCountLabel.tsx b/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/search/components/VoiceCountLabel.tsx
index 16b76aee9f..668aec7f77 100644
--- a/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/search/components/VoiceCountLabel.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_list/search/components/VoiceCountLabel.tsx
@@ -1,13 +1,18 @@
 import React from "react";
+import { Trans } from "react-i18next";
 import { TtsModelListItem } from "@storyteller/components/src/api/tts/ListTtsModels";
 import { TtsCategoryType } from "../../../../../../../AppWrapper";
-import { Trans } from "react-i18next";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faShuffle } from "@fortawesome/pro-light-svg-icons";
+import { Analytics } from "../../../../../../../common/Analytics";
+import { GetRandomArrayValue } from "@storyteller/components/src/utils/GetRandomArrayValue";
 
 interface Props {
   allTtsModels: TtsModelListItem[];
   ttsModelsByCategoryToken: Map<string, Set<TtsModelListItem>>;
   selectedCategories: TtsCategoryType[];
   selectedTtsLanguageScope: string;
+  setMaybeSelectedTtsModel: (maybeSelectedTtsModel: TtsModelListItem) => void;
 }
 
 // NB/TODO: This duplicates the work of a sister component, but it was the fastest way
@@ -33,7 +38,7 @@ export function VoiceCountLabel(props: Props) {
     leafiestCategoryModels = Array.from(new Set(allTtsModels));
   }
 
-  let options = leafiestCategoryModels
+  let possibleVoices = leafiestCategoryModels
     .filter((ttsModel) => {
       // Scope to currently selected language
       if (props.selectedTtsLanguageScope === "*") {
@@ -42,13 +47,17 @@ export function VoiceCountLabel(props: Props) {
       return (
         ttsModel.ietf_primary_language_subtag === props.selectedTtsLanguageScope
       );
-    })
-    .map((ttsModel) => {
-      return true; // NB: We're only counting voices.
     });
 
+  const selectRandomVoice = () => {
+    // TODO: Prefer to select a random *good* voice or *popular* voice.
+    const randomVoice = GetRandomArrayValue(possibleVoices);
+    if (randomVoice !== undefined) {
+      props.setMaybeSelectedTtsModel(randomVoice);
+    }
+  }
 
-  const voiceCount = options.length;
+  const voiceCount = possibleVoices.length;
 
   return (
     <>
@@ -61,10 +70,16 @@ export function VoiceCountLabel(props: Props) {
             Voice ({voiceCount} to choose from)
           </Trans>
         </label>
-
-        {/*<a href="/" className="ms-1">
+        <button
+          onClick={() => {
+            Analytics.ttsClickRandomVoice();
+            selectRandomVoice();
+          }}
+          className="btn btn-link btn-small pt-0 ps-0"
+          type="button"
+        >
           <FontAwesomeIcon icon={faShuffle} />
-        </a>*/}
+        </button>
       </div>
     </>
   );