@fortawesome/free-solid-svg-icons#faFileAudio TypeScript Examples
The following examples show how to use
@fortawesome/free-solid-svg-icons#faFileAudio.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: BgmDescriptor.tsx From apps with MIT License | 5 votes |
|
export default function BgmDescriptor(props: {
region: Region;
bgm: Bgm.Bgm;
showName?: string;
showLink?: boolean;
style?: React.CSSProperties;
}) {
const bgm = props.bgm;
if (bgm.id === 0) {
return null;
} else if (bgm.audioAsset !== undefined) {
const showName = getBgmName(bgm);
const toLink = props.showLink ? (
<>
<Button variant="primary" as={Link} to={`/${props.region}/bgm/${bgm.id}`}>
<FontAwesomeIcon icon={faShare} title={`Go to ${props.region} BGM ${showName}`} />
</Button>
</>
) : null;
const downloadButton = bgm.notReleased ? (
<Button disabled variant="secondary" target="_blank" title={showName}>
{showName}
</Button>
) : (
<Button variant={"info"} href={bgm.audioAsset} target="_blank" title={`Download ${showName}`}>
{props.showName ?? showName}
<FontAwesomeIcon icon={faFileAudio} />
</Button>
);
return (
<>
<ButtonGroup size="sm" style={props.style}>
<VoiceLinePlayer audioAssetUrls={[bgm.audioAsset]} delay={[0]} title={bgm.name} />
{downloadButton}
{toLink}
</ButtonGroup>
</>
);
} else {
return (
<Button variant={"info"} disabled style={props.style}>
{bgm.name}
</Button>
);
}
}
Example #2
| Source File: ServantVoiceLines.tsx From apps with MIT License | 4 votes |
|
VoiceLinesTable = ({
region,
voice,
mergedDownloadNamePrefix,
servants,
costumes,
}: {
region: Region;
voice: Profile.VoiceGroup;
mergedDownloadNamePrefix: string;
servants: Map<number, Servant.ServantBasic>;
costumes?: {
[key: string]: Profile.CostumeDetail;
};
}) => {
const voiceLines = voice.voiceLines.sort((a, b) => (b.priority || 0) - (a.priority || 0));
const voiceLineNames: string[] = [];
const voiceNameCount: Record<string, number> = {};
for (const line of voiceLines) {
line.conds = line.conds.filter(
(cond) => !(cond.condType === Profile.VoiceCondType.EVENT_END && cond.value === 0)
);
let lineName = line.overwriteName || line.name || "";
if (lineName in voiceNameCount) {
voiceNameCount[lineName]++;
} else {
voiceNameCount[lineName] = 1;
}
voiceLineNames.push(lineName.replace("{0}", voiceNameCount[lineName].toString()));
}
return (
<Table bordered className="mb-0">
<tbody>
{voiceLines.map((line, index) => (
<tr key={`line_${index}`}>
<td style={{ verticalAlign: "middle" }}>
<b className="newline">{voiceLineNames[index]}</b>
<br />
<div className="newline">
{voiceTextField(region, voice.type) ? (
line.text.map((line, i) => (
<VoiceSubtitleFormat key={i} region={region} inputString={line} />
))
) : (
<VoiceSubtitleFormat region={region} inputString={line.subtitle} />
)}
</div>
{line.conds.length || line.playConds.length || line.summonScript ? (
<>
<Alert variant="info" style={{ marginBottom: 0, marginTop: "1em" }}>
{line.summonScript === undefined ? null : (
<>
Summoning Script:{" "}
<ScriptDescriptor
region={region}
scriptId={line.summonScript.scriptId}
scriptType=""
/>
</>
)}
{line.conds.length > 1 && (
<>
<b>Unlock Requirements (all of the following):</b>
<br />
<ul style={{ marginBottom: 0 }}>
{line.conds.map((cond, index) => (
<li key={index}>
<VoiceCondTypeDescriptor
region={region}
servants={servants}
costumes={costumes}
cond={cond}
/>
</li>
))}
</ul>
</>
)}
{line.conds.length === 1 && (
<>
<b>Unlock Requirement:</b>
<br />
<VoiceCondTypeDescriptor
region={region}
servants={servants}
costumes={costumes}
cond={line.conds[0]}
/>
<br />
</>
)}
<VoicePlayCondDescriptor
region={region}
playConds={line.playConds}
servants={servants}
/>
</Alert>
</>
) : (
""
)}
</td>
<td style={{ verticalAlign: "middle", width: "1px" }}>
<ButtonGroup>
<VoiceLinePlayer
audioAssetUrls={line.audioAssets}
delay={line.delay}
title={voiceLineNames[index]}
/>
<Dropdown as={ButtonGroup}>
<Dropdown.Toggle variant={"info"} title={`Download ${voiceLineNames[index]}`}>
<FontAwesomeIcon icon={faFileAudio} />
</Dropdown.Toggle>
<Dropdown.Menu title={`Download ${voiceLineNames[index]}`}>
<Dropdown.Item
title={`Download ${voiceLineNames[index]} merged file`}
onClick={() => {
const fileName = `${mergedDownloadNamePrefix} - ${voiceLineNames[index]}`;
mergeVoiceLine(line.audioAssets, line.delay, fileName);
}}
>
Merged
</Dropdown.Item>
{line.audioAssets.map((asset, i) => (
<Dropdown.Item
key={i}
href={asset}
target="_blank"
title={`Download ${voiceLineNames[index]} part ${i + 1}`}
>
Part {i + 1}
</Dropdown.Item>
))}
</Dropdown.Menu>
</Dropdown>
</ButtonGroup>
</td>
</tr>
))}
</tbody>
</Table>
);
}
