mirror of
https://github.com/storytold/artcraft.git
synced 2026-11-04 17:38:10 +00:00
update to voice preview picker
This commit is contained in:
bflatastic committed
1 parent
1d80829480
commit
bb1170b238
2 files changed
+148
-111
No files matched your search
@@ -104,7 +104,6 @@
|
||||
background-color: rgba($action, 0.8);
|
||||
border: 2px solid lighten($action, 12%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
transition: all 0.2s;
|
||||
cursor: pointer;
|
||||
|
||||
@@ -112,6 +111,19 @@
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
&.fy-weight-picker-preview-selected {
|
||||
border-radius: 0.5rem 0.5rem 0 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.fy-weight-picker-preview-text {
|
||||
font-size: 20px !important;
|
||||
font-weight: 600;
|
||||
|
||||
+135
-110
@@ -20,6 +20,10 @@ import { ActionButton, ActionButtonProps } from "components/common";
|
||||
import { faThumbsUp as faThumbsUpOutline } from "@fortawesome/pro-regular-svg-icons";
|
||||
import { FetchStatus } from "@storyteller/components/src/api";
|
||||
import LoadingSpinner from "components/common/LoadingSpinner";
|
||||
import {
|
||||
LanguageLabels,
|
||||
LanguageTag,
|
||||
} from "@storyteller/components/src/api/Languages";
|
||||
|
||||
interface VoicePickerPreviewProps {
|
||||
selectedVoice: any;
|
||||
@@ -71,125 +75,146 @@ const VoicePickerPreview: React.FC<VoicePickerPreviewProps> = ({
|
||||
style: { minHeight: "1.75rem", fontSize: "14px" },
|
||||
};
|
||||
|
||||
const languageLabel =
|
||||
LanguageLabels[
|
||||
selectedVoice?.maybe_ietf_primary_language_subtag as LanguageTag
|
||||
] || "-";
|
||||
|
||||
const { t } = useLocalize("NewTTS");
|
||||
|
||||
return (
|
||||
<div className="fy-weight-picker-preview" onClick={openModal}>
|
||||
<WeightCoverImage
|
||||
{...{
|
||||
src: preview,
|
||||
height: isMobile ? 70 : 80,
|
||||
width: isMobile ? 70 : 80,
|
||||
}}
|
||||
/>
|
||||
<div className="d-flex flex-column justify-content-center flex-grow-1">
|
||||
<h2 className="mb-1 fw-semibold d-flex gap-2 align-items-center fs-5 fy-weight-picker-preview-text flex-wrap">
|
||||
<div>{selectedVoice?.title || t("button.labelNoVoice")}</div>
|
||||
<>
|
||||
<div
|
||||
className={`fy-weight-picker-preview ${
|
||||
selectedVoice ? "fy-weight-picker-preview-selected" : ""
|
||||
}`.trim()}
|
||||
onClick={openModal}
|
||||
>
|
||||
<WeightCoverImage
|
||||
{...{
|
||||
src: preview,
|
||||
height: isMobile ? 85 : 95,
|
||||
width: isMobile ? 85 : 95,
|
||||
}}
|
||||
/>
|
||||
<div className="d-flex flex-column justify-content-center flex-grow-1">
|
||||
<div className="d-flex gap-2 align-items-center fy-weight-picker-preview-text flex-wrap mb-1">
|
||||
<h2 className="mb-1">
|
||||
{selectedVoice?.title || t("button.labelNoVoice")}
|
||||
</h2>
|
||||
</div>
|
||||
{selectedVoice?.weight_type && (
|
||||
<>
|
||||
<CardBadge
|
||||
className={`d-none d-lg-flex py-1 fy-entity-type-${
|
||||
selectedVoice?.weight_type || ""
|
||||
}`}
|
||||
label={weightType || ""}
|
||||
small={true}
|
||||
color={weightTagColor || ""}
|
||||
/>
|
||||
<div className="opacity-75">
|
||||
<Stat
|
||||
count={selectedVoice?.usage_count}
|
||||
icon={faWaveformLines}
|
||||
<div className="d-flex flex-column flex-lg-row gap-2 align-items-lg-center mb-lg-1">
|
||||
<div className="d-flex align-items-center gap-1">
|
||||
<CardBadge
|
||||
className={`h-auto fy-entity-type-${
|
||||
selectedVoice?.weight_type || ""
|
||||
}`}
|
||||
label={weightType || ""}
|
||||
small={true}
|
||||
color={weightTagColor || ""}
|
||||
/>
|
||||
{selectedVoice?.maybe_ietf_primary_language_subtag && (
|
||||
<CardBadge label={languageLabel} small={true} color="gray" />
|
||||
)}
|
||||
</div>
|
||||
|
||||
{loggedIn ? (
|
||||
<>
|
||||
{status === FetchStatus.success ? (
|
||||
<div onClick={e => e.stopPropagation()}>
|
||||
<ActionButton {...ratingButtonProps} />
|
||||
</div>
|
||||
) : (
|
||||
<div
|
||||
className="d-flex align-items-center"
|
||||
style={{ minHeight: "1.75rem" }}
|
||||
>
|
||||
<LoadingSpinner thin={true} size={20} padding={false} />
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<span className="d-none d-lg-flex align-items-center gap-1 fs-7 opacity-75">
|
||||
<FontAwesomeIcon icon={faThumbsUp} />
|
||||
{selectedVoice?.stats?.positive_rating_count}
|
||||
</span>
|
||||
)}
|
||||
</>
|
||||
<div className="d-flex gap-2 align-items-center">
|
||||
<div className="opacity-75">
|
||||
<Stat
|
||||
count={selectedVoice?.usage_count}
|
||||
icon={faWaveformLines}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{loggedIn ? (
|
||||
<>
|
||||
{status === FetchStatus.success ? (
|
||||
<div onClick={e => e.stopPropagation()}>
|
||||
<ActionButton {...ratingButtonProps} />
|
||||
</div>
|
||||
) : (
|
||||
<div
|
||||
className="d-flex align-items-center"
|
||||
style={{ minHeight: "1.75rem" }}
|
||||
>
|
||||
<LoadingSpinner thin={true} size={20} padding={false} />
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<span className="d-flex align-items-center gap-1 fs-7 opacity-75">
|
||||
<FontAwesomeIcon icon={faThumbsUp} />
|
||||
{selectedVoice?.stats?.positive_rating_count}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</h2>
|
||||
{selectedVoice ? (
|
||||
<span className="fs-7 d-flex gap-1 flex-column flex-lg-row">
|
||||
<div className="d-flex align-items-center">
|
||||
<Link
|
||||
className="fw-medium d-flex align-items-center"
|
||||
to={`/profile/${selectedVoice?.creator?.username || ""}`}
|
||||
onClick={e => e.stopPropagation()}
|
||||
style={{ gap: "6px" }}
|
||||
>
|
||||
<Gravatar
|
||||
size={20}
|
||||
noHeight={true}
|
||||
email_hash={selectedVoice?.creator?.gravatar_hash}
|
||||
avatarIndex={
|
||||
selectedVoice?.creator?.default_avatar?.image_index || 0
|
||||
}
|
||||
backgroundIndex={
|
||||
selectedVoice?.creator?.default_avatar?.color_index || 0
|
||||
}
|
||||
/>
|
||||
{" " + selectedVoice?.creator?.display_name || ""}
|
||||
</Link>
|
||||
<CardBadge
|
||||
className={`ms-2 d-flex d-lg-none fy-entity-type-${
|
||||
selectedVoice?.weight_type || ""
|
||||
}`}
|
||||
label={weightType || ""}
|
||||
small={true}
|
||||
color={weightTagColor || ""}
|
||||
{selectedVoice ? null : (
|
||||
<span className="fs-7 opacity-75">
|
||||
{t("button.labelClickToSelect")}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="d-flex gap-2 align-items-center">
|
||||
<span className="fw-medium opacity-75 pe-1 d-none d-lg-block">
|
||||
{selectedVoice
|
||||
? t("button.labelChangeVoice")
|
||||
: t("button.labelSelectVoice")}
|
||||
</span>
|
||||
<FontAwesomeIcon icon={faChevronRight} className="fs-5 me-1" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{selectedVoice && (
|
||||
<div
|
||||
className="fs-7 d-flex gap-1 flex-wrap panel-inner mb-1"
|
||||
style={{
|
||||
padding: "0.75rem",
|
||||
borderRadius: "0rem 0rem 0.5rem 0.5rem",
|
||||
}}
|
||||
>
|
||||
<div className="d-flex gap-1 align-items-center">
|
||||
<div className="opacity-75">
|
||||
<span className="d-none d-lg-inline-block">Created</span> by
|
||||
</div>
|
||||
|
||||
<Link
|
||||
className="fw-medium d-flex align-items-center"
|
||||
to={`/profile/${selectedVoice?.creator?.username || ""}`}
|
||||
onClick={e => e.stopPropagation()}
|
||||
style={{ gap: "6px" }}
|
||||
>
|
||||
{selectedVoice?.creator?.display_name || ""}
|
||||
<Gravatar
|
||||
size={18}
|
||||
noHeight={true}
|
||||
email_hash={selectedVoice?.creator?.gravatar_hash}
|
||||
avatarIndex={
|
||||
selectedVoice?.creator?.default_avatar?.image_index || 0
|
||||
}
|
||||
backgroundIndex={
|
||||
selectedVoice?.creator?.default_avatar?.color_index || 0
|
||||
}
|
||||
/>
|
||||
{!loggedIn && (
|
||||
<span className="ms-2 d-flex d-lg-none align-items-center gap-1 fs-7 opacity-75">
|
||||
<FontAwesomeIcon icon={faThumbsUp} />
|
||||
{selectedVoice?.stats?.positive_rating_count}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="d-flex gap-1 align-items-center">
|
||||
<span className="d-none d-lg-block px-1 opacity-50">|</span>
|
||||
<Link
|
||||
to={`/weight/${selectedVoice.weight_token}`}
|
||||
className="fw-medium"
|
||||
onClick={e => e.stopPropagation()}
|
||||
>
|
||||
{t("link.viewDetails")}
|
||||
<FontAwesomeIcon icon={faArrowRight} className="ms-2" />
|
||||
</Link>
|
||||
</div>
|
||||
</span>
|
||||
) : (
|
||||
<span className="fs-7 opacity-75">
|
||||
{t("button.labelClickToSelect")}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="d-flex gap-2 align-items-center">
|
||||
<span className="fw-medium opacity-75 pe-1 d-none d-lg-block">
|
||||
{selectedVoice
|
||||
? t("button.labelChangeVoice")
|
||||
: t("button.labelSelectVoice")}
|
||||
</span>
|
||||
<FontAwesomeIcon icon={faChevronRight} className="fs-5 me-1" />
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="d-flex gap-1 align-items-center">
|
||||
<span className="px-1 opacity-50">|</span>
|
||||
<Link
|
||||
to={`/weight/${selectedVoice.weight_token}`}
|
||||
className="fw-medium"
|
||||
onClick={e => e.stopPropagation()}
|
||||
>
|
||||
{t("link.viewDetails")}
|
||||
<FontAwesomeIcon icon={faArrowRight} className="ms-2" />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
Reference in new issue
Block a user