From 09b0ce711718db5c4ff60f7abe4c0ff68cc76c49 Mon Sep 17 00:00:00 2001
From: Brandon Thomas <echelon@gmail.com>
Date: Fri, 3 Sep 2021 03:04:27 -0400
Subject: [PATCH] better icons

---
 vocodes/src/v2/view/_icons/FileAudioIcon.tsx       | 14 ++++++++++++++
 vocodes/src/v2/view/_icons/FilmIcon.tsx            | 14 ++++++++++++++
 vocodes/src/v2/view/_icons/PlayCircleIcon.tsx      | 14 ++++++++++++++
 vocodes/src/v2/view/_icons/VolumeUpIcon.tsx        | 14 ++++++++++++++
 .../Profile_TtsInferenceResultListFc.tsx           |  8 +++++++-
 .../Profile_W2lInferenceResultListFc.tsx           |  9 ++++++++-
 6 files changed, 71 insertions(+), 2 deletions(-)
 create mode 100644 vocodes/src/v2/view/_icons/FileAudioIcon.tsx
 create mode 100644 vocodes/src/v2/view/_icons/FilmIcon.tsx
 create mode 100644 vocodes/src/v2/view/_icons/PlayCircleIcon.tsx
 create mode 100644 vocodes/src/v2/view/_icons/VolumeUpIcon.tsx

diff --git a/vocodes/src/v2/view/_icons/FileAudioIcon.tsx b/vocodes/src/v2/view/_icons/FileAudioIcon.tsx
new file mode 100644
index 0000000000..f5e6fc4128
--- /dev/null
+++ b/vocodes/src/v2/view/_icons/FileAudioIcon.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faFileAudio } from '@fortawesome/free-solid-svg-icons'
+
+interface Props {
+  title?: string,
+}
+
+export function FileAudioIcon(props: Props) {
+  return (
+      <FontAwesomeIcon icon={faFileAudio} title={props.title} />
+  );
+}
+
diff --git a/vocodes/src/v2/view/_icons/FilmIcon.tsx b/vocodes/src/v2/view/_icons/FilmIcon.tsx
new file mode 100644
index 0000000000..0e14e285ce
--- /dev/null
+++ b/vocodes/src/v2/view/_icons/FilmIcon.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faFilm } from '@fortawesome/free-solid-svg-icons'
+
+interface Props {
+  title?: string,
+}
+
+export function FilmIcon(props: Props) {
+  return (
+      <FontAwesomeIcon icon={faFilm} title={props.title} />
+  );
+}
+
diff --git a/vocodes/src/v2/view/_icons/PlayCircleIcon.tsx b/vocodes/src/v2/view/_icons/PlayCircleIcon.tsx
new file mode 100644
index 0000000000..9fa6c20432
--- /dev/null
+++ b/vocodes/src/v2/view/_icons/PlayCircleIcon.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faPlayCircle } from '@fortawesome/free-solid-svg-icons'
+
+interface Props {
+  title?: string,
+}
+
+export function PlayCircleIcon(props: Props) {
+  return (
+      <FontAwesomeIcon icon={faPlayCircle} title={props.title} />
+  );
+}
+
diff --git a/vocodes/src/v2/view/_icons/VolumeUpIcon.tsx b/vocodes/src/v2/view/_icons/VolumeUpIcon.tsx
new file mode 100644
index 0000000000..3940419ae2
--- /dev/null
+++ b/vocodes/src/v2/view/_icons/VolumeUpIcon.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faVolumeUp } from '@fortawesome/free-solid-svg-icons'
+
+interface Props {
+  title?: string,
+}
+
+export function VolumeUpIcon(props: Props) {
+  return (
+      <FontAwesomeIcon icon={faVolumeUp} title={props.title} />
+  );
+}
+
diff --git a/vocodes/src/v2/view/profile/profile_view/Profile_TtsInferenceResultListFc.tsx b/vocodes/src/v2/view/profile/profile_view/Profile_TtsInferenceResultListFc.tsx
index c82297d24e..f7654168ab 100644
--- a/vocodes/src/v2/view/profile/profile_view/Profile_TtsInferenceResultListFc.tsx
+++ b/vocodes/src/v2/view/profile/profile_view/Profile_TtsInferenceResultListFc.tsx
@@ -4,6 +4,7 @@ import { Link } from 'react-router-dom';
 import { formatDistance } from 'date-fns';
 import { VisibleIconFc } from '../../_icons/VisibleIcon';
 import { HiddenIconFc } from '../../_icons/HiddenIcon';
+import { PlayCircleIcon } from '../../_icons/PlayCircleIcon';
 
 interface TtsInferenceResultListResponsePayload {
   success: boolean,
@@ -109,7 +110,12 @@ function ProfileTtsInferenceResultsListFc(props: Props) {
         <td>{result.maybe_creator_result_id}</td>
         <td>{visibilityIcon}</td>
         <th className="overflow-fix">
-          <Link to={inferenceLink}><span role="img" aria-label="result link">▶️</span> {text}</Link>
+
+          <Link to={inferenceLink}>
+            <PlayCircleIcon title="play" />
+            &nbsp;
+            {text}
+          </Link>
           &nbsp;
         </th>
         <th><Link to={modelLink}>Model: {result.tts_model_title}</Link></th>
diff --git a/vocodes/src/v2/view/profile/profile_view/Profile_W2lInferenceResultListFc.tsx b/vocodes/src/v2/view/profile/profile_view/Profile_W2lInferenceResultListFc.tsx
index bc925b98c1..0428e037aa 100644
--- a/vocodes/src/v2/view/profile/profile_view/Profile_W2lInferenceResultListFc.tsx
+++ b/vocodes/src/v2/view/profile/profile_view/Profile_W2lInferenceResultListFc.tsx
@@ -4,6 +4,7 @@ import { Link } from 'react-router-dom';
 import { formatDistance } from 'date-fns'
 import { VisibleIconFc } from '../../_icons/VisibleIcon';
 import { HiddenIconFc } from '../../_icons/HiddenIcon';
+import { FilmIcon } from '../../_icons/FilmIcon';
 
 interface W2lInferenceResultListResponsePayload {
   success: boolean,
@@ -109,7 +110,13 @@ function ProfileW2lInferenceResultsListFc(props: Props) {
       <tr key={result.w2l_result_token}>
         <td>{result.maybe_creator_result_id}</td>
         <td>{visibilityIcon}</td>
-          <th><Link to={inferenceLink}><span role="img" aria-label="result link">▶️</span> Result</Link></th>
+        <th>
+          <Link to={inferenceLink}>
+            <FilmIcon title="Play &amp; Download" />
+            &nbsp;
+            Result
+          </Link>
+        </th>
         <th><Link to={templateLink}>{templateTitle}</Link></th>
         <td>(custom audio)</td>
         <td>{duration_seconds} s</td>