daniel543x/artcraft
1
0 Fork 0
mirror of https://github.com/storytold/artcraft.git synced 2026-11-12 21:02:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

Explore voices

Browse Source
This commit is contained in:
Brandon Thomas committed 2023-01-18 17:35:29 -05:00
1 parent 409e9065b3
commit 69138e877a
4 files changed
+154 -126
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

package.json
+2 -1
View File
@@ -9,7 +9,8 @@
},
"scripts": {
"build-fakeyou": "lerna exec --scope @storyteller/fakeyou.com -- yarn build",
"start-fakeyou": "PORT=80 BROWSER=none lerna exec --scope @storyteller/fakeyou.com -- yarn start",
"start-fakeyou": "PORT=7000 BROWSER=none lerna exec --scope @storyteller/fakeyou.com -- yarn start",
"start-fakeyou-80": "PORT=80 BROWSER=none lerna exec --scope @storyteller/fakeyou.com -- yarn start",
"start-fakeyou-w": "set PORT=7000 && lerna exec --scope @storyteller/fakeyou.com -- yarn start-w",
"build-storyteller": "lerna exec --scope @storyteller/storyteller.io -- yarn build",
"start-storyteller": "PORT=7008 BROWSER=none lerna exec --scope @storyteller/storyteller.io -- yarn start",
packages/components/src/api/ApiConfig.ts
+1 -1
View File
@@ -91,7 +91,7 @@ class ApiConfig {
}
this.domain = domain;
this.useSsl = false;
this.useSsl = useSsl;
this.v2ApiHost = v2ApiHost;
}
packages/fakeyou.com/src/v2/view/tts/tts_model_list/ExploreVoicesModal.tsx
+149
View File
@@ -0,0 +1,149 @@
import React from "react";
import { faArrowRightLong, faCompass, faGlobe, faTags } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import Select from "react-select";
import AsyncSelect from "react-select/async";
import { SearchFieldClass } from "./SearchFieldClass";
interface Props {
}
export function ExploreVoicesModal(props: Props) {
const options = [
{ value: "chocolate", label: "Chocolate" },
{ value: "strawberry", label: "Strawberry" },
{ value: "vanilla", label: "Vanilla" },
{ value: "chocolate", label: "Chocolate" },
{ value: "strawberry", label: "Strawberry" },
{ value: "vanilla", label: "Vanilla" },
];
return (
<div
className="modal fade"
id="exploreModal"
aria-labelledby="ModalLabel"
aria-hidden="true"
>
<div className="modal-dialog modal-xl modal-fullscreen-lg-down modal-dialog-centered modal-dialog-scrollable">
<div className="modal-content">
<div className="modal-header p-3">
<h5 className="modal-title fw-semibold" id="ModalLabel">
<FontAwesomeIcon icon={faCompass} className="me-3" />
Explore Voices
</h5>
<button
type="button"
className="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
<div className="modal-body p-3 p-lg-4">
<div className="row gx-3 gy-3">
<div className="col-12 col-lg-3 input-icon-search">
<label className="sub-title">Language</label>
<div>
<span className="form-control-feedback">
<FontAwesomeIcon icon={faGlobe} />
</span>
<Select
defaultValue={options[2]}
options={options}
classNames={SearchFieldClass}
/>
</div>
</div>
<div className="col-12 col-md-12 col-lg-9 input-icon-search">
<div className="d-flex">
<label className="sub-title flex-grow-1">
Category
</label>
<a href="/" className="ms-3 fw-medium">
Clear category filters
</a>
</div>
<div className="d-flex flex-column flex-md-row gap-2">
<div className="w-100">
<span className="form-control-feedback">
<FontAwesomeIcon icon={faTags} />
</span>
<Select
defaultValue={options[2]}
options={options}
classNames={SearchFieldClass}
className="w-100"
/>
</div>
<div className="d-none d-md-flex align-items-center">
<FontAwesomeIcon
icon={faArrowRightLong}
className="fs-6 opacity-75"
/>
</div>
<div className="w-100">
<span className="form-control-feedback">
<FontAwesomeIcon icon={faTags} />
</span>
<Select
defaultValue={options[2]}
options={options}
classNames={SearchFieldClass}
className="w-100"
/>
</div>
<div className="d-none d-md-flex align-items-center">
<FontAwesomeIcon
icon={faArrowRightLong}
className="fs-6 opacity-75"
/>
</div>
<div className="w-100">
<span className="form-control-feedback">
<FontAwesomeIcon icon={faTags} />
</span>
<Select
defaultValue={options[2]}
options={options}
classNames={SearchFieldClass}
className="w-100"
/>
</div>
</div>
</div>
{/* <div className="col-12 col-lg-3 input-icon-search">
<label className="sub-title">Sub-category 1</label>
<div>
<span className="form-control-feedback">
<FontAwesomeIcon icon={faTags} />
</span>
<Select
defaultValue={options[2]}
options={options}
classNames={SearchFieldClass}
/>
</div>
</div>
<div className="col-12 col-lg-3 input-icon-search">
<label className="sub-title">Sub-category 2</label>
<div>
<span className="form-control-feedback">
<FontAwesomeIcon icon={faTags} />
</span>
<Select
defaultValue={options[2]}
options={options}
classNames={SearchFieldClass}
/>
</div>
</div> */}
</div>
</div>
</div>
</div>
</div>
)
}
packages/fakeyou.com/src/v2/view/tts/tts_model_list/TtsModelListPage.tsx
+2 -124
View File
@@ -73,6 +73,7 @@ import Select from "react-select";
import AsyncSelect from "react-select/async";
import { SearchFieldClass } from "./SearchFieldClass";
import { AVAILABLE_LANGUAGE_MAP, ENGLISH_LANGUAGE } from "../../../../_i18n/AvailableLanguageMap";
import { ExploreVoicesModal } from "./ExploreVoicesModal";
export interface EnqueueJobResponsePayload {
success: boolean;
@@ -509,130 +510,7 @@ function TtsModelListPage(props: Props) {
</div>
{/* Explore Modal */}
<div
className="modal fade"
id="exploreModal"
aria-labelledby="ModalLabel"
aria-hidden="true"
>
<div className="modal-dialog modal-xl modal-fullscreen-lg-down modal-dialog-centered modal-dialog-scrollable">
<div className="modal-content">
<div className="modal-header p-3">
<h5 className="modal-title fw-semibold" id="ModalLabel">
<FontAwesomeIcon icon={faCompass} className="me-3" />
Explore Voices
</h5>
<button
type="button"
className="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
<div className="modal-body p-3 p-lg-4">
<div className="row gx-3 gy-3">
<div className="col-12 col-lg-3 input-icon-search">
<label className="sub-title">Language</label>
<div>
<span className="form-control-feedback">
<FontAwesomeIcon icon={faGlobe} />
</span>
<Select
defaultValue={options[2]}
options={options}
classNames={SearchFieldClass}
/>
</div>
</div>
<div className="col-12 col-md-12 col-lg-9 input-icon-search">
<div className="d-flex">
<label className="sub-title flex-grow-1">
Category
</label>
<a href="/" className="ms-3 fw-medium">
Clear category filters
</a>
</div>
<div className="d-flex flex-column flex-md-row gap-2">
<div className="w-100">
<span className="form-control-feedback">
<FontAwesomeIcon icon={faTags} />
</span>
<Select
defaultValue={options[2]}
options={options}
classNames={SearchFieldClass}
className="w-100"
/>
</div>
<div className="d-none d-md-flex align-items-center">
<FontAwesomeIcon
icon={faArrowRightLong}
className="fs-6 opacity-75"
/>
</div>
<div className="w-100">
<span className="form-control-feedback">
<FontAwesomeIcon icon={faTags} />
</span>
<Select
defaultValue={options[2]}
options={options}
classNames={SearchFieldClass}
className="w-100"
/>
</div>
<div className="d-none d-md-flex align-items-center">
<FontAwesomeIcon
icon={faArrowRightLong}
className="fs-6 opacity-75"
/>
</div>
<div className="w-100">
<span className="form-control-feedback">
<FontAwesomeIcon icon={faTags} />
</span>
<Select
defaultValue={options[2]}
options={options}
classNames={SearchFieldClass}
className="w-100"
/>
</div>
</div>
</div>
{/* <div className="col-12 col-lg-3 input-icon-search">
<label className="sub-title">Sub-category 1</label>
<div>
<span className="form-control-feedback">
<FontAwesomeIcon icon={faTags} />
</span>
<Select
defaultValue={options[2]}
options={options}
classNames={SearchFieldClass}
/>
</div>
</div>
<div className="col-12 col-lg-3 input-icon-search">
<label className="sub-title">Sub-category 2</label>
<div>
<span className="form-control-feedback">
<FontAwesomeIcon icon={faTags} />
</span>
<Select
defaultValue={options[2]}
options={options}
classNames={SearchFieldClass}
/>
</div>
</div> */}
</div>
</div>
</div>
</div>
</div>
<ExploreVoicesModal />
{directViewLink}