edit model visibility

vocodes/src/v2/tts/tts_model_edit/TtsModelEditFc.tsx

@@ -6,6 +6,10 @@ import { SessionWrapper } from '../../../session/SessionWrapper';
 import { TtsInferenceJob } from '../../../App';
 import { useParams, Link, useHistory } from 'react-router-dom';
 import { FrontendUrlConfig } from '../../../common/FrontendUrlConfig';
+import { VisibleIconFc } from '../../../icons/VisibleIconFc';
+import { HiddenIconFc } from '../../../icons/HiddenIconFc';
+
+const DEFAULT_VISIBILITY = 'public';
 
 interface TtsModelViewResponsePayload {
   success: boolean,
@@ -22,6 +26,7 @@ interface TtsModel {
   creator_display_name: string,
   description_markdown: string,
   description_rendered_html: string,
+  creator_set_visibility: string,
   updatable_slug: string,
   created_at: string,
   updated_at: string,
@@ -49,6 +54,7 @@ function TtsModelEditFc(props: Props) {
   const [ttsModel, setTtsModel] = useState<TtsModel|undefined>(undefined);
   const [title, setTitle] = useState<string>("");
   const [descriptionMarkdown, setDescriptionMarkdown] = useState<string>("");
+  const [visibility, setVisibility] = useState<string>(DEFAULT_VISIBILITY);
 
   const getModel = useCallback((token) => {
     const api = new ApiConfig();
@@ -70,6 +76,7 @@ function TtsModelEditFc(props: Props) {
 
       setTitle(modelsResponse.model.title || "")
       setDescriptionMarkdown(modelsResponse.model.description_markdown || "")
+      setVisibility(modelsResponse.model.creator_set_visibility || DEFAULT_VISIBILITY);
       setTtsModel(modelsResponse.model);
     })
     .catch(e => {});
@@ -94,6 +101,10 @@ function TtsModelEditFc(props: Props) {
     return false;
   };
 
+  const handleVisibilityChange = (ev: React.FormEvent<HTMLSelectElement>) => {
+    setVisibility((ev.target as HTMLSelectElement).value)
+  };
+
   const modelLink = FrontendUrlConfig.ttsModelPage(token);
 
   const handleFormSubmit = (ev: React.FormEvent<HTMLFormElement>) => { 
@@ -115,6 +126,7 @@ function TtsModelEditFc(props: Props) {
     const request = {
       title: title,
       description_markdown: descriptionMarkdown,
+      creator_set_visibility: visibility || DEFAULT_VISIBILITY,
     }
 
     fetch(endpointUrl, {
@@ -143,6 +155,8 @@ function TtsModelEditFc(props: Props) {
 
   let isDisabled = ttsModel === undefined;
 
+  const visibilityIcon = (visibility === 'public') ? <VisibleIconFc /> : <HiddenIconFc />;
+
   return (
     <div className="content">
       <h1 className="title is-1"> Edit Model </h1>
@@ -186,6 +200,22 @@ function TtsModelEditFc(props: Props) {
             </div>
           </div>
 
+          <div className="field">
+            <label className="label">
+              Model Visibility&nbsp;{visibilityIcon}
+            </label>
+            <div className="control select">
+              <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>
+
           <br />
 
           <button className="button is-link is-large is-fullwidth">Update</button>