TTS results from old branch

packages/fakeyou/src/v2/view/tts/tts_result_delete/TtsResultDeleteFc.tsx

@@ -1,92 +1,100 @@
-import React, { useState, useEffect } from 'react';
-import { ApiConfig } from '@storyteller/components';
-import { SessionWrapper } from '@storyteller/components/src/session/SessionWrapper';
-import { useParams, Link, useHistory } from 'react-router-dom';
-import { Gravatar } from '@storyteller/components/src/elements/Gravatar';
-import { FrontendUrlConfig } from '../../../../common/FrontendUrlConfig';
+import React, { useState, useEffect } from "react";
+import { ApiConfig } from "@storyteller/components";
+import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper";
+import { useParams, Link, useHistory } from "react-router-dom";
+import { Gravatar } from "@storyteller/components/src/elements/Gravatar";
+import { FrontendUrlConfig } from "../../../../common/FrontendUrlConfig";
+import { distance, delay, delay2, duration } from "../../../../data/animation";
+
+const Fade = require("react-reveal/Fade");
 
 interface TtsInferenceResultResponsePayload {
-  success: boolean,
-  result: TtsInferenceResult,
+  success: boolean;
+  result: TtsInferenceResult;
 }
 
 interface TtsInferenceResult {
-  tts_result_token: string,
+  tts_result_token: string;
 
-  tts_model_token: string,
-  tts_model_title: string,
+  tts_model_token: string;
+  tts_model_title: string;
 
-  raw_inference_text: string,
+  raw_inference_text: string;
 
-  maybe_creator_user_token?: string,
-  maybe_creator_username?: string,
-  maybe_creator_display_name?: string,
-  maybe_creator_gravatar_hash?: string,
+  maybe_creator_user_token?: string;
+  maybe_creator_username?: string;
+  maybe_creator_display_name?: string;
+  maybe_creator_gravatar_hash?: string;
 
-  maybe_model_creator_user_token?: string,
-  maybe_model_creator_username?: string,
-  maybe_model_creator_display_name?: string,
-  maybe_model_creator_gravatar_hash?: string,
+  maybe_model_creator_user_token?: string;
+  maybe_model_creator_username?: string;
+  maybe_model_creator_display_name?: string;
+  maybe_model_creator_gravatar_hash?: string;
 
-  public_bucket_wav_audio_path: string,
-  public_bucket_spectrogram_path: string,
+  public_bucket_wav_audio_path: string;
+  public_bucket_spectrogram_path: string;
 
-  file_size_bytes: number,
-  duration_millis: number,
-  created_at: string,
-  updated_at: string,
+  file_size_bytes: number;
+  duration_millis: number;
+  created_at: string;
+  updated_at: string;
 
-  maybe_moderator_fields: TtsInferenceResultModeratorFields | null | undefined,
+  maybe_moderator_fields: TtsInferenceResultModeratorFields | null | undefined;
 }
 
 interface TtsInferenceResultModeratorFields {
-  creator_ip_address: string,
-  mod_deleted_at: string | undefined | null,
-  user_deleted_at: string | undefined | null,
+  creator_ip_address: string;
+  mod_deleted_at: string | undefined | null;
+  user_deleted_at: string | undefined | null;
 }
 
 interface Props {
-  sessionWrapper: SessionWrapper,
+  sessionWrapper: SessionWrapper;
 }
 
 function TtsResultDeleteFc(props: Props) {
   const history = useHistory();
 
-  let { token } : { token: string } = useParams();
+  let { token }: { token: string } = useParams();
 
-  const [ttsInferenceResult, setTtsInferenceResult] = useState<TtsInferenceResult|undefined>(undefined);
+  const [ttsInferenceResult, setTtsInferenceResult] = useState<
+    TtsInferenceResult | undefined
+  >(undefined);
 
   useEffect(() => {
     const api = new ApiConfig();
     const endpointUrl = api.viewTtsInferenceResult(token);
 
     fetch(endpointUrl, {
-      method: 'GET',
+      method: "GET",
       headers: {
-        'Accept': 'application/json',
+        Accept: "application/json",
       },
-      credentials: 'include',
+      credentials: "include",
     })
-    .then(res => res.json())
-    .then(res => {
-      const modelsResponse : TtsInferenceResultResponsePayload = res;
-      if (!modelsResponse.success) {
-        return;
-      }
+      .then((res) => res.json())
+      .then((res) => {
+        const modelsResponse: TtsInferenceResultResponsePayload = res;
+        if (!modelsResponse.success) {
+          return;
+        }
 
-      setTtsInferenceResult(modelsResponse.result)
-    })
-    .catch(e => {
-      //this.props.onSpeakErrorCallback();
-    });
+        setTtsInferenceResult(modelsResponse.result);
+      })
+      .catch((e) => {
+        //this.props.onSpeakErrorCallback();
+      });
   }, [token]); // NB: Empty array dependency sets to run ONLY on mount
 
-  const currentlyDeleted = !!ttsInferenceResult?.maybe_moderator_fields?.mod_deleted_at || 
+  const currentlyDeleted =
+    !!ttsInferenceResult?.maybe_moderator_fields?.mod_deleted_at ||
     !!ttsInferenceResult?.maybe_moderator_fields?.user_deleted_at;
 
   const resultLink = FrontendUrlConfig.ttsResultPage(token);
 
-  const handleDeleteFormSubmit = (ev: React.FormEvent<HTMLFormElement>) : boolean => {
+  const handleDeleteFormSubmit = (
+    ev: React.FormEvent<HTMLFormElement>
+  ): boolean => {
     ev.preventDefault();
 
     const api = new ApiConfig();
@@ -94,38 +102,41 @@ function TtsResultDeleteFc(props: Props) {
 
     const request = {
       set_delete: !currentlyDeleted,
-      as_mod: props.sessionWrapper.deleteTtsResultAsMod(ttsInferenceResult?.maybe_creator_user_token)
-    }
+      as_mod: props.sessionWrapper.deleteTtsResultAsMod(
+        ttsInferenceResult?.maybe_creator_user_token
+      ),
+    };
 
     fetch(endpointUrl, {
-      method: 'POST',
+      method: "POST",
       headers: {
-        'Accept': 'application/json',
-        'Content-Type': 'application/json',
+        Accept: "application/json",
+        "Content-Type": "application/json",
       },
-      credentials: 'include',
+      credentials: "include",
       body: JSON.stringify(request),
     })
-    .then(res => res.json())
-    .then(res => {
-      if (res.success) {
-        if (props.sessionWrapper.canDeleteOtherUsersTtsResults()) {
-          history.push(resultLink); // Mods can perform further actions
-        } else {
-          history.push('/');
+      .then((res) => res.json())
+      .then((res) => {
+        if (res.success) {
+          if (props.sessionWrapper.canDeleteOtherUsersTtsResults()) {
+            history.push(resultLink); // Mods can perform further actions
+          } else {
+            history.push("/");
+          }
         }
-      }
-    })
-    .catch(e => {
-    });
+      })
+      .catch((e) => {});
     return false;
-  }
+  };
 
   if (ttsInferenceResult === undefined) {
     return <div />; // Exit rendering until data loads.
   }
 
-  const modelLink = FrontendUrlConfig.ttsModelPage(ttsInferenceResult.tts_model_token);
+  const modelLink = FrontendUrlConfig.ttsModelPage(
+    ttsInferenceResult.tts_model_token
+  );
 
   let durationSeconds = ttsInferenceResult?.duration_millis / 1000;
   let modelName = ttsInferenceResult.tts_model_title;
@@ -137,11 +148,13 @@ function TtsResultDeleteFc(props: Props) {
       <span>
         <Gravatar
           size={15}
-          username={ttsInferenceResult.maybe_creator_display_name || ""} 
-          email_hash={ttsInferenceResult.maybe_creator_gravatar_hash || ""} 
-          />
+          username={ttsInferenceResult.maybe_creator_display_name || ""}
+          email_hash={ttsInferenceResult.maybe_creator_gravatar_hash || ""}
+        />
         &nbsp;
-        <Link to={creatorLink}>{ttsInferenceResult.maybe_creator_display_name}</Link>
+        <Link to={creatorLink}>
+          {ttsInferenceResult.maybe_creator_display_name}
+        </Link>
       </span>
     );
   }
@@ -153,11 +166,15 @@ function TtsResultDeleteFc(props: Props) {
       <span>
         <Gravatar
           size={15}
-          username={ttsInferenceResult.maybe_model_creator_display_name || ""} 
-          email_hash={ttsInferenceResult.maybe_model_creator_gravatar_hash || ""} 
-          />
+          username={ttsInferenceResult.maybe_model_creator_display_name || ""}
+          email_hash={
+            ttsInferenceResult.maybe_model_creator_gravatar_hash || ""
+          }
+        />
         &nbsp;
-        <Link to={modelCreatorLink}>{ttsInferenceResult.maybe_model_creator_display_name}</Link>
+        <Link to={modelCreatorLink}>
+          {ttsInferenceResult.maybe_model_creator_display_name}
+        </Link>
       </span>
     );
   }
@@ -166,87 +183,86 @@ function TtsResultDeleteFc(props: Props) {
 
   const buttonTitle = currentlyDeleted ? "Confirm Undelete" : "Confirm Delete";
 
-  const formLabel = currentlyDeleted ? 
-     "Recover the TTS Result (makes it visible again)" : 
-     "Delete TTS Result (hides from everyone but mods)";
+  const buttonCss = currentlyDeleted
+    ? "button is-warning is-large is-fullwidth"
+    : "button is-danger is-large is-fullwidth";
+
+  const formLabel = currentlyDeleted
+    ? "Recover the TTS Result (makes it visible again)"
+    : "Delete TTS Result (hides from everyone but mods)";
 
   return (
-    <div className="container-panel pt-3 pb-5">
-    <div className="panel p-3 p-lg-4">
     <div>
-      <h1 className="title is-1"> {h1Title} </h1>
+      <Fade cascade bottom duration={duration} distance={distance}>
+        <div className="container pt-5 pb-4 px-lg-5 px-xl-3">
+          <h1 className="display-5 fw-bold mb-3">{h1Title}</h1>
+          <div>
+            <Link to={resultLink}>&lt; Back to result</Link>
+          </div>
+        </div>
+      </Fade>
 
-      <div className="content">
-        <p>
-          <Link to={resultLink}>&lt; Back to result</Link>
-        </p>
+      <div className="container-panel pt-4 pb-5">
+        <Fade bottom duration={duration} distance={distance} delay={delay}>
+          <div className="panel p-3 p-lg-4">
+            <table className="table tts-result-table">
+              <thead>
+                <tr>
+                  <th>
+                    <abbr title="Detail">Detail</abbr>
+                  </th>
+                  <th>
+                    <abbr title="Value">Value</abbr>
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <th>Original Text</th>
+                  <td className="overflow-fix">
+                    {ttsInferenceResult.raw_inference_text}
+                  </td>
+                </tr>
+                <tr>
+                  <th>Audio Creator</th>
+                  <td>{creatorDetails}</td>
+                </tr>
+                <tr>
+                  <th>Model used</th>
+                  <td>
+                    <Link to={modelLink}>{modelName}</Link>
+                  </td>
+                </tr>
+                <tr>
+                  <th>Model creator</th>
+                  <td>{modelCreatorDetails}</td>
+                </tr>
+                <tr>
+                  <th>Duration</th>
+                  <td>{durationSeconds} seconds</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </Fade>
       </div>
 
-      <table className="table">
-        <thead>
-          <tr>
-            <th><abbr title="Detail">Detail</abbr></th>
-            <th><abbr title="Value">Value</abbr></th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <th>Original Text</th>
-            <td className="overflow-fix">
-              {ttsInferenceResult.raw_inference_text}
-            </td>
-          </tr>
-          <tr>
-            <th>Audio Creator</th>
-            <td>
-              {creatorDetails}
-            </td>
-          </tr>
-          <tr>
-            <th>Model used</th>
-            <td>
-              <Link to={modelLink}>
-                {modelName}
-              </Link>
-            </td>
-          </tr>
-          <tr>
-            <th>Model creator</th>
-            <td>
-              {modelCreatorDetails}
-            </td>
-          </tr>
-          <tr>
-            <th>Duration</th>
-            <td>{durationSeconds} seconds</td>
-          </tr>
-
-        </tbody>
-      </table>
-      </div>
-      </div>
-      <br />
-
       <form onSubmit={handleDeleteFormSubmit}>
-        <label className="panel-title fw-bold">{formLabel}</label>
-
-        <p className="control">
-          <button className=" btn btn-primary w-100 mt-4">
-            {buttonTitle}
-          </button>
-        </p>
+        <Fade
+          cascade
+          bottom
+          duration={duration}
+          distance={distance}
+          delay={delay2}
+        >
+          <div className="container pb-5">
+            <button className=" btn btn-primary w-100">{buttonTitle}</button>
+            <p className="mt-4">{formLabel}</p>
+          </div>
+        </Fade>
       </form>
-
-      <br />
-      
-      <div className="content">
-        <p>
-          <Link to={resultLink}>&lt; Back to result</Link>
-        </p>
-      </div>
-
     </div>
-  )
+  );
 }
 
 export { TtsResultDeleteFc };

packages/fakeyou/src/v2/view/tts/tts_result_edit/TtsResultEditFc.tsx

@@ -1,65 +1,70 @@
-import React, { useState, useEffect, useCallback } from 'react';
-import { ApiConfig } from '@storyteller/components';
-import { SessionWrapper } from '@storyteller/components/src/session/SessionWrapper';
-import { useParams, Link, useHistory } from 'react-router-dom';
-import { FrontendUrlConfig } from '../../../../common/FrontendUrlConfig';
-import { VisibleIconFc } from '../../_icons/VisibleIcon';
-import { HiddenIconFc } from '../../_icons/HiddenIcon';
+import React, { useState, useEffect, useCallback } from "react";
+import { ApiConfig } from "@storyteller/components";
+import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper";
+import { useParams, Link, useHistory } from "react-router-dom";
+import { FrontendUrlConfig } from "../../../../common/FrontendUrlConfig";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faEye, faEyeSlash } from "@fortawesome/free-solid-svg-icons";
+import { distance, delay, delay2, duration } from "../../../../data/animation";
 
-const DEFAULT_VISIBILITY = 'public';
+const Fade = require("react-reveal/Fade");
+
+const DEFAULT_VISIBILITY = "public";
 
 interface TtsInferenceResultResponsePayload {
-  success: boolean,
-  result: TtsInferenceResult,
+  success: boolean;
+  result: TtsInferenceResult;
 }
 
 interface TtsInferenceResult {
-  tts_result_token: string,
+  tts_result_token: string;
 
-  tts_model_token: string,
-  tts_model_title: string,
+  tts_model_token: string;
+  tts_model_title: string;
 
-  raw_inference_text: string,
+  raw_inference_text: string;
 
-  maybe_creator_user_token?: string,
-  maybe_creator_username?: string,
-  maybe_creator_display_name?: string,
-  maybe_creator_gravatar_hash?: string,
+  maybe_creator_user_token?: string;
+  maybe_creator_username?: string;
+  maybe_creator_display_name?: string;
+  maybe_creator_gravatar_hash?: string;
 
-  maybe_model_creator_user_token?: string,
-  maybe_model_creator_username?: string,
-  maybe_model_creator_display_name?: string,
-  maybe_model_creator_gravatar_hash?: string,
+  maybe_model_creator_user_token?: string;
+  maybe_model_creator_username?: string;
+  maybe_model_creator_display_name?: string;
+  maybe_model_creator_gravatar_hash?: string;
 
-  public_bucket_wav_audio_path: string,
-  public_bucket_spectrogram_path: string,
+  public_bucket_wav_audio_path: string;
+  public_bucket_spectrogram_path: string;
 
-  creator_set_visibility?: string,
+  creator_set_visibility?: string;
 
-  file_size_bytes: number,
-  duration_millis: number,
-  created_at: string,
-  updated_at: string,
+  file_size_bytes: number;
+  duration_millis: number;
+  created_at: string;
+  updated_at: string;
 
-  maybe_moderator_fields: TtsInferenceResultModeratorFields | null | undefined,
+  maybe_moderator_fields: TtsInferenceResultModeratorFields | null | undefined;
 }
 
 interface TtsInferenceResultModeratorFields {
-  creator_ip_address: string,
-  mod_deleted_at: string | undefined | null,
-  user_deleted_at: string | undefined | null,
+  creator_ip_address: string;
+  mod_deleted_at: string | undefined | null;
+  user_deleted_at: string | undefined | null;
 }
 
 interface Props {
-  sessionWrapper: SessionWrapper,
+  sessionWrapper: SessionWrapper;
 }
 
 function TtsResultEditFc(props: Props) {
-  let { token } : { token : string } = useParams();
+  let { token }: { token: string } = useParams();
 
   const history = useHistory();
 
-  const [ttsInferenceResult, setTtsInferenceResult] = useState<TtsInferenceResult|undefined>(undefined);
+  const [ttsInferenceResult, setTtsInferenceResult] = useState<
+    TtsInferenceResult | undefined
+  >(undefined);
   const [visibility, setVisibility] = useState<string>(DEFAULT_VISIBILITY);
 
   const getTtsResult = useCallback((token) => {
@@ -67,24 +72,25 @@ function TtsResultEditFc(props: Props) {
     const endpointUrl = api.viewTtsInferenceResult(token);
 
     fetch(endpointUrl, {
-      method: 'GET',
+      method: "GET",
       headers: {
-        'Accept': 'application/json',
+        Accept: "application/json",
       },
-      credentials: 'include',
+      credentials: "include",
     })
-    .then(res => res.json())
-    .then(res => {
-      const modelsResponse : TtsInferenceResultResponsePayload = res;
-      if (!modelsResponse.success) {
-        return;
-      }
+      .then((res) => res.json())
+      .then((res) => {
+        const modelsResponse: TtsInferenceResultResponsePayload = res;
+        if (!modelsResponse.success) {
+          return;
+        }
 
-      setTtsInferenceResult(modelsResponse.result);
-      setVisibility(modelsResponse?.result?.creator_set_visibility || DEFAULT_VISIBILITY);
-    })
-    .catch(e => {
-    });
+        setTtsInferenceResult(modelsResponse.result);
+        setVisibility(
+          modelsResponse?.result?.creator_set_visibility || DEFAULT_VISIBILITY
+        );
+      })
+      .catch((e) => {});
   }, []);
 
   useEffect(() => {
@@ -92,12 +98,12 @@ function TtsResultEditFc(props: Props) {
   }, [token, getTtsResult]);
 
   const handleVisibilityChange = (ev: React.FormEvent<HTMLSelectElement>) => {
-    setVisibility((ev.target as HTMLSelectElement).value)
+    setVisibility((ev.target as HTMLSelectElement).value);
   };
 
   const resultLink = FrontendUrlConfig.ttsResultPage(token);
 
-  const handleFormSubmit = (ev: React.FormEvent<HTMLFormElement>) => { 
+  const handleFormSubmit = (ev: React.FormEvent<HTMLFormElement>) => {
     ev.preventDefault();
 
     if (!ttsInferenceResult) {
@@ -108,79 +114,94 @@ function TtsResultEditFc(props: Props) {
 
     const api = new ApiConfig();
     const endpointUrl = api.editTtsInferenceResult(resultToken);
-    
+
     const request = {
       creator_set_visibility: visibility || DEFAULT_VISIBILITY,
-    }
+    };
 
     fetch(endpointUrl, {
-      method: 'POST',
+      method: "POST",
       headers: {
-        'Accept': 'application/json',
-        'Content-Type': 'application/json',
+        Accept: "application/json",
+        "Content-Type": "application/json",
       },
-      credentials: 'include',
+      credentials: "include",
       body: JSON.stringify(request),
     })
-    .then(res => res.json())
-    .then(res => {
-      if (res === undefined ||
-        !res.success) {
-        return; // Endpoint error?
-      }
+      .then((res) => res.json())
+      .then((res) => {
+        if (res === undefined || !res.success) {
+          return; // Endpoint error?
+        }
 
-      history.push(resultLink);
-    })
-    .catch(e => {
-    });
+        history.push(resultLink);
+      })
+      .catch((e) => {});
 
     return false;
   };
 
   let isDisabled = !ttsInferenceResult;
 
-  const visibilityIcon = (visibility === 'public') ? <VisibleIconFc /> : <HiddenIconFc />;
+  const visibilityIcon =
+    visibility === "public" ? (
+      <FontAwesomeIcon icon={faEye} />
+    ) : (
+      <FontAwesomeIcon icon={faEyeSlash} />
+    );
 
   return (
-    <div className="container">
-    <div className="container">
-      <h1 className="title is-1"> Edit Result Visibility </h1>
-
-      <p>
-        <Link to={resultLink}>&lt; Back to result </Link>
-      </p>
+    <div>
+      <Fade cascade bottom duration={duration} distance={distance}>
+        <div className="container pt-5 pb-4 px-lg-5 px-xl-3">
+          <h1 className="display-5 fw-bold mb-3">Edit Result Visibility</h1>
+          <div>
+            <Link to={resultLink}>&lt; Back to result</Link>
+          </div>
+        </div>
+      </Fade>
 
       <form onSubmit={handleFormSubmit}>
         <fieldset disabled={isDisabled}>
-
-          <div className="field">
-            <label className="sub-title">
-              Result Visibility&nbsp;{visibilityIcon}
-            </label>
-            <div className="control select">
-              <select 
-              className="form-select"
-                name="creator_set_visibility" 
-                onChange={handleVisibilityChange}
-                value={visibility}
-                >
-                <option value="public">Public (visible from your profile)</option>
-                <option value="hidden">Unlisted (shareable URLs)</option>
-              </select>
-            </div>
+          <div className="container-panel pt-4 pb-5">
+            <Fade bottom duration={duration} distance={distance} delay={delay}>
+              <div className="panel p-3 py-4 p-lg-4">
+                <div>
+                  <label className="sub-title">
+                    Result Visibility&nbsp;{visibilityIcon}
+                  </label>
+                  <div className="control select">
+                    <select
+                      className="form-select"
+                      name="creator_set_visibility"
+                      onChange={handleVisibilityChange}
+                      value={visibility}
+                    >
+                      <option value="public">
+                        Public (visible from your profile)
+                      </option>
+                      <option value="hidden">Unlisted (shareable URLs)</option>
+                    </select>
+                  </div>
+                </div>
+              </div>
+            </Fade>
           </div>
-
-          <br />
-
-          <button className="btn btn-primary btn-lg w-100">Update</button>
-
+          <Fade
+            cascade
+            bottom
+            duration={duration}
+            distance={distance}
+            delay={delay2}
+          >
+            <div className="container">
+              <button className="btn btn-primary w-100 mb-5">Update</button>
+            </div>
+          </Fade>
         </fieldset>
       </form>
-      
     </div>
-    </div>
-  )
+  );
 }
 
 export { TtsResultEditFc };
-

packages/fakeyou/src/v2/view/tts/tts_result_view/TtsResultViewFc.tsx

@@ -6,8 +6,7 @@ import { useParams, Link } from "react-router-dom";
 import { SpectrogramFc } from "./SpectrogramFc";
 import { ReportDiscordLinkFc } from "../../_common/DiscordReportLinkFc";
 import { FrontendUrlConfig } from "../../../../common/FrontendUrlConfig";
-import { HiddenIconFc } from "../../_icons/HiddenIcon";
-import { VisibleIconFc } from "../../_icons/VisibleIcon";
+
 import {
   GetTtsResult,
   GetTtsResultIsErr,
@@ -17,7 +16,17 @@ import {
 } from "../../../api/tts/GetTtsResult";
 import { TtsResultAudioPlayerFc } from "./TtsResultAudioPlayerFc";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faDownload, faEdit, faTrash } from "@fortawesome/free-solid-svg-icons";
+import {
+  faDownload,
+  faEdit,
+  faTrash,
+  faEye,
+  faEyeSlash,
+} from "@fortawesome/free-solid-svg-icons";
+import { distance, delay, duration } from "../../../../data/animation";
+
+const Fade = require("react-reveal/Fade");
+
 interface Props {
   sessionWrapper: SessionWrapper;
 }
@@ -105,56 +114,64 @@ function TtsResultViewFc(props: Props) {
   ) {
     moderatorRows = (
       <>
-        <div className="container-panel pt-3 pb-5">
-          <div className="panel p-3 p-lg-4">
-            <h2 className="panel-title fw-bold">Moderator Details</h2>
-            <div className="py-6">
-              <table className="table tts-result-table">
-                <tbody>
-                  <tr>
-                    <th>Model creator is banned</th>
-                    <td>
-                      {ttsInferenceResult?.maybe_moderator_fields
-                        ?.model_creator_is_banned
-                        ? "banned"
-                        : "good standing"}
-                    </td>
-                  </tr>
-                  <tr>
-                    <th>Result creator is banned (if user)</th>
-                    <td>
-                      {ttsInferenceResult?.maybe_moderator_fields
-                        ?.result_creator_is_banned_if_user
-                        ? "banned"
-                        : "good standing"}
-                    </td>
-                  </tr>
-                  <tr>
-                    <th>Result creator IP address</th>
-                    <td>
-                      {ttsInferenceResult?.maybe_moderator_fields
-                        ?.result_creator_ip_address || "server error"}
-                    </td>
-                  </tr>
-                  <tr>
-                    <th>Mod deleted at (UTC)</th>
-                    <td>
-                      {ttsInferenceResult?.maybe_moderator_fields
-                        ?.mod_deleted_at || "not deleted"}
-                    </td>
-                  </tr>
-                  <tr>
-                    <th>Result creator deleted at (UTC)</th>
-                    <td>
-                      {ttsInferenceResult?.maybe_moderator_fields
-                        ?.result_creator_deleted_at || "not deleted"}
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
+        <Fade
+          cascade
+          bottom
+          duration={duration}
+          distance={distance}
+          delay={delay}
+        >
+          <div className="container-panel pt-3 pb-5">
+            <div className="panel p-3 p-lg-4">
+              <h2 className="panel-title fw-bold">Moderator Details</h2>
+              <div className="py-6">
+                <table className="table">
+                  <tbody>
+                    <tr>
+                      <th>Model creator is banned</th>
+                      <td>
+                        {ttsInferenceResult?.maybe_moderator_fields
+                          ?.model_creator_is_banned
+                          ? "banned"
+                          : "good standing"}
+                      </td>
+                    </tr>
+                    <tr>
+                      <th>Result creator is banned (if user)</th>
+                      <td>
+                        {ttsInferenceResult?.maybe_moderator_fields
+                          ?.result_creator_is_banned_if_user
+                          ? "banned"
+                          : "good standing"}
+                      </td>
+                    </tr>
+                    <tr>
+                      <th>Result creator IP address</th>
+                      <td>
+                        {ttsInferenceResult?.maybe_moderator_fields
+                          ?.result_creator_ip_address || "server error"}
+                      </td>
+                    </tr>
+                    <tr>
+                      <th>Mod deleted at (UTC)</th>
+                      <td>
+                        {ttsInferenceResult?.maybe_moderator_fields
+                          ?.mod_deleted_at || "not deleted"}
+                      </td>
+                    </tr>
+                    <tr>
+                      <th>Result creator deleted at (UTC)</th>
+                      <td>
+                        {ttsInferenceResult?.maybe_moderator_fields
+                          ?.result_creator_deleted_at || "not deleted"}
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
             </div>
           </div>
-        </div>
+        </Fade>
       </>
     );
   }
@@ -200,11 +217,11 @@ function TtsResultViewFc(props: Props) {
   let resultVisibility =
     ttsInferenceResult?.creator_set_visibility === "hidden" ? (
       <span>
-        Hidden <HiddenIconFc />
+        Hidden <FontAwesomeIcon icon={faEyeSlash} />
       </span>
     ) : (
       <span>
-        Public <VisibleIconFc />
+        Public <FontAwesomeIcon icon={faEye} />
       </span>
     );
 
@@ -270,32 +287,41 @@ function TtsResultViewFc(props: Props) {
 
   return (
     <div>
-      <div className="container py-5">
-        <div className="d-flex flex-column">
-          <h1 className="display-5 fw-bold mb-4 text-center text-lg-start">
-            {headingTitle}
-          </h1>
-        </div>
-      </div>
-
-      <div className="container-panel pt-3 pb-5">
-        <div className="panel p-3 p-lg-4">
-          {subtitle}
-          <div className="py-6">
-            <TtsResultAudioPlayerFc ttsResult={ttsInferenceResult} />
-            <a
-              className=" btn btn-primary w-100 mt-4"
-              href={audioLink}
-              download={audioDownloadFilename}
-            >
-              <FontAwesomeIcon icon={faDownload} className="me-2" />
-              Download File{" "}
-            </a>
+      <Fade cascade bottom duration={duration} distance={distance}>
+        <div className="container py-5">
+          <div className="d-flex flex-column">
+            <h1 className="display-5 fw-bold mb-4 text-center text-lg-start">
+              {headingTitle}
+            </h1>
           </div>
         </div>
-      </div>
+      </Fade>
 
-      {/* Without wavesurfer, 
+      <Fade
+        cascade
+        bottom
+        duration={duration}
+        delay={delay}
+        distance={distance}
+      >
+        <div className="container-panel pt-3 pb-5">
+          <div className="panel p-3 p-lg-4">
+            {subtitle}
+            <div className="py-6">
+              <TtsResultAudioPlayerFc ttsResult={ttsInferenceResult} />
+              <a
+                className=" btn btn-primary w-100 mt-4"
+                href={audioLink}
+                download={audioDownloadFilename}
+              >
+                <FontAwesomeIcon icon={faDownload} className="me-2" />
+                Download File{" "}
+              </a>
+            </div>
+          </div>
+        </div>
+
+        {/* Without wavesurfer, 
       <audio
         controls
         src={audioLink}>
@@ -303,82 +329,91 @@ function TtsResultViewFc(props: Props) {
             <code>audio</code> element.
       </audio>*/}
 
-      <div className="container-panel pt-3 pb-5">
-        <div className="panel p-3 p-lg-4">
-          <h2 className="panel-title fw-bold">Spectrogram</h2>
-          <SpectrogramFc spectrogramJsonLink={spectrogramLink} />
-        </div>
-      </div>
-
-      <div className="container-panel pt-3 pb-5">
-        <div className="panel p-3 p-lg-4">
-          <h2 className="panel-title fw-bold">Result Details</h2>
-          <div className="py-6">
-            <table className="table tts-result-table">
-              <tbody>
-                <tr>
-                  <th scope="row">Original text</th>
-                  <td className="overflow-fix">
-                    {ttsInferenceResult.raw_inference_text}
-                  </td>
-                </tr>
-                <tr>
-                  <th scope="row">Audio creator</th>
-                  <td>{creatorDetails}</td>
-                </tr>
-                <tr>
-                  <th scope="row">Audio duration</th>
-                  <td>{durationSeconds} seconds</td>
-                </tr>
-                <tr>
-                  <th scope="row">Visibility</th>
-                  <td>{resultVisibility}</td>
-                </tr>
-              </tbody>
-            </table>
+        <div className="container-panel pt-3 pb-5">
+          <div className="panel p-3 p-lg-4">
+            <h2 className="panel-title fw-bold">Spectrogram</h2>
+            <SpectrogramFc spectrogramJsonLink={spectrogramLink} />
           </div>
         </div>
-      </div>
 
-      <div className="container-panel pt-3 pb-5">
-        <div className="panel p-3 p-lg-4">
-          <h2 className="panel-title fw-bold">Model Used</h2>
-          <div className="py-6">
-            <table className="table tts-result-table">
-              <tbody>
-                <tr>
-                  <th scope="row">Model name</th>
-                  <td>
-                    <Link to={modelLink}>{modelName}</Link>
-                  </td>
-                </tr>
-                <tr>
-                  <th scope="row">Model creator</th>
-                  <td>{modelCreatorDetails}</td>
-                </tr>
-                <tr>
-                  <th scope="row">Vocoder used</th>
-                  <td>{vocoderUsed}</td>
-                </tr>
-              </tbody>
-            </table>
+        <div className="container-panel pt-3 pb-5">
+          <div className="panel p-3 p-lg-4">
+            <h2 className="panel-title fw-bold">Result Details</h2>
+            <div className="py-6">
+              <table className="table tts-result-table">
+                <tbody>
+                  <tr>
+                    <th scope="row">Original text</th>
+                    <td className="overflow-fix">
+                      {ttsInferenceResult.raw_inference_text}
+                    </td>
+                  </tr>
+                  <tr>
+                    <th scope="row">Audio creator</th>
+                    <td>{creatorDetails}</td>
+                  </tr>
+                  <tr>
+                    <th scope="row">Audio duration</th>
+                    <td>{durationSeconds} seconds</td>
+                  </tr>
+                  <tr>
+                    <th scope="row">Visibility</th>
+                    <td>{resultVisibility}</td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
           </div>
         </div>
-      </div>
 
-      {debugRows}
-
-      {moderatorRows}
-
-      <div className="container pb-5">
-        <div className="d-flex flex-column flex-md-row gap-3 mb-4">
-          {editButton}
-          {deleteButton}
+        <div className="container-panel pt-3 pb-5">
+          <div className="panel p-3 p-lg-4">
+            <h2 className="panel-title fw-bold">Model Used</h2>
+            <div className="py-6">
+              <table className="table tts-result-table">
+                <tbody>
+                  <tr>
+                    <th scope="row">Model name</th>
+                    <td>
+                      <Link to={modelLink}>{modelName}</Link>
+                    </td>
+                  </tr>
+                  <tr>
+                    <th scope="row">Model creator</th>
+                    <td>{modelCreatorDetails}</td>
+                  </tr>
+                  <tr>
+                    <th scope="row">Vocoder used</th>
+                    <td>{vocoderUsed}</td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
         </div>
-        <p className="text-center text-lg-start">
-          <ReportDiscordLinkFc />
-        </p>
-      </div>
+      </Fade>
+
+      <div>{debugRows}</div>
+
+      <div>{moderatorRows}</div>
+
+      <Fade
+        cascade
+        bottom
+        duration={duration}
+        distance={distance}
+        delay={delay}
+      >
+        <div className="container pb-5">
+          <div className="d-flex flex-column flex-md-row gap-3 mb-4">
+            {editButton}
+            {deleteButton}
+          </div>
+          <p className="text-center text-lg-start">
+            <ReportDiscordLinkFc />
+          </p>
+        </div>
+      </Fade>
     </div>
   );
 }