Skip to content

Commit

Permalink
Upgrade TTS Seed Explorer (#119)
Browse files Browse the repository at this point in the history 
## About The Pull Request
Улучшенный ТТС эксплорер, адаптированные под ТГ
Пришлось насрать точечным хардкодом, но оно того стоит
В частности в квирках перетащить 1 аргумент в правильное место и
добавить grow к page content

## Картиночки

![image](https://github.com/ss220club/Bandastation/assets/69762909/c3130c47-7f62-4d43-b82b-98178a0664c9)

![image](https://github.com/ss220club/Bandastation/assets/69762909/ff4cbdc9-5acd-4d0c-ad16-0e472a64583c)


## Changelog

:cl:
qol: Выбор голоса ТТС стал красивее и удобнее
/:cl:
  • Loading branch information
@AyIong
AyIong authored Apr 18, 2024
1 parent a1a07f1 commit 7bad57e
Show file tree
Hide file tree
Showing 3 changed files with 95 additions and 47 deletions.
4 changes: 2 additions & 2 deletions tgui/packages/tgui/interfaces/PreferencesMenu/CharacterPreferenceWindow.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,7 @@ export const CharacterPreferenceWindow = (props) => {

return (
<Window title="Character Preferences" width={920} height={770}>
<Window.Content scrollable>
<Window.Content scrollable style={{ overflowY: 'auto' }}>
<Stack vertical fill>
<Stack.Item>
<CharacterProfiles
Expand Down Expand Up @@ -173,7 +173,7 @@ export const CharacterPreferenceWindow = (props) => {

<Stack.Divider />

<Stack.Item>{pageContents}</Stack.Item>
<Stack.Item grow>{pageContents}</Stack.Item>
</Stack>
</Window.Content>
</Window>
Expand Down
4 changes: 2 additions & 2 deletions tgui/packages/tgui/interfaces/PreferencesMenu/QuirksPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -391,7 +391,7 @@ export function QuirksPage(props) {
};

return (
<Stack align="center" fill>
<Stack fill>
<Stack.Item basis="50%">
<Stack vertical fill align="center">
<Stack.Item>
Expand Down Expand Up @@ -450,7 +450,7 @@ export function QuirksPage(props) {
</Stack>
</Stack.Item>

<Stack.Item>
<Stack.Item align="center">
<Icon name="exchange-alt" size={1.5} ml={2} mr={2} />
</Stack.Item>

Expand Down
134 changes: 91 additions & 43 deletions tgui/packages/tgui/interfaces/PreferencesMenu/VoicePage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,23 +3,24 @@ import { useState } from 'react';
import { useBackend } from '../../backend';
import {
BlockQuote,
Box,
Button,
Dropdown,
Icon,
Input,
LabeledList,
Section,
Stack,
Table,
} from '../../components';
import { PreferencesMenuData } from './data';

const donatorTiers = {
0: 'Бесплатные',
0: 'Free',
1: 'Tier I',
2: 'Tier II',
3: 'Tier III',
4: 'Tier IV',
5: 'Tier V',
};

const gendersIcons = {
Expand Down Expand Up @@ -69,9 +70,16 @@ const getCheckboxGroup = (
export const VoicePage = (props) => {
const { act, data } = useBackend<PreferencesMenuData>();

const { providers, seeds, phrases, tts_seed } = data;
const {
providers,
seeds,
tts_seed,
phrases,
// donator_level,
// character_gender,
} = data;

const donator_level = 5;
const donator_level = 5; // Remove after tiers implementation

const categories = seeds
.map((seed) => seed.category)
Expand All @@ -82,6 +90,7 @@ export const VoicePage = (props) => {
const donatorLevels = seeds
.map((seed) => seed.donator_level)
.filter((level, i, a) => a.indexOf(level) === i)
.sort((a, b) => a - b)
.map((level) => donatorTiers[level]);

const [selectedProviders, setSelectedProviders] = useState(providers);
Expand Down Expand Up @@ -117,16 +126,15 @@ export const VoicePage = (props) => {
let phrasesSelect = (
<Dropdown
options={phrases}
selected={selectedPhrase.replace(/(.{25})..+/, '$1...')}
width="220px"
selected={selectedPhrase.replace(/(.{60})..+/, '$1...')}
onSelected={(value) => setSelectedPhrase(value)}
/>
);

let searchBar = (
<Input
placeholder="Название..."
fluid
width="100%"
onInput={(e, value) => setSearchtext(value)}
/>
);
Expand Down Expand Up @@ -167,25 +175,24 @@ export const VoicePage = (props) => {
donator_level < seed.donator_level &&
'Требуется более высокий уровень подписки'
}
tooltipPosition="right"
textAlign="left"
onClick={() => act('select_voice', { seed: seed.name })}
onClick={() => act('select', { seed: seed.name })}
/>
</Table.Cell>
<Table.Cell collapsing textAlign="center">
<Button
fluid
icon="music"
color={tts_seed === seed.name ? 'green' : 'transparent'}
content=""
tooltip="Прослушать пример"
color="transparent"
onClick={() =>
act('listen', { seed: seed.name, phrase: selectedPhrase })
}
/>
</Table.Cell>
<Table.Cell
bold
collapsing
textColor={
seed.donator_level > 0 && tts_seed !== seed.name
? 'orange'
Expand All @@ -195,7 +202,6 @@ export const VoicePage = (props) => {
{seed.name}
</Table.Cell>
<Table.Cell
collapsing
opacity={tts_seed === seed.name ? 0.5 : 0.25}
textAlign="left"
>
Expand Down Expand Up @@ -229,36 +235,78 @@ export const VoicePage = (props) => {
});

return (
<>
<Section title="Фильтры">
<LabeledList>
<LabeledList.Item label="Провайдеры">
{providerCheckboxes}
</LabeledList.Item>
<LabeledList.Item label="Пол">{genderesCheckboxes}</LabeledList.Item>
<LabeledList.Item label="Категории">
{categoriesCheckboxes}
</LabeledList.Item>
<LabeledList.Item label="Уровень подписки">
{donatorLevelsCheckboxes}
</LabeledList.Item>
<LabeledList.Item label="Фраза">{phrasesSelect}</LabeledList.Item>
<LabeledList.Item label="Поиск">{searchBar}</LabeledList.Item>
</LabeledList>
</Section>
<Section title={`Голоса (${availableSeeds.length}/${seeds.length})`}>
<Table>{seedsRow}</Table>
</Section>
<Section>
<BlockQuote>
<Box>
{`Для поддержания и развития сообщества в условиях растущих расходов часть голосов пришлось сделать доступными только за материальную поддержку сообщества.`}
</Box>
<Box mt={2} italic>
{`Подробнее об этом можно узнать в нашем Discord-сообществе.`}
</Box>
</BlockQuote>
</Section>
</>
<Stack fill>
<Stack.Item basis={'40%'}>
<Stack fill vertical>
<Stack.Item>
<Section title="Фильтры">
<LabeledList>
<LabeledList.Item label="Провайдеры">
{providerCheckboxes}
</LabeledList.Item>
<LabeledList.Item label="Пол">
{genderesCheckboxes}
</LabeledList.Item>
<LabeledList.Item label="Тир">
{donatorLevelsCheckboxes}
</LabeledList.Item>
<LabeledList.Item label="Фраза">
{phrasesSelect}
</LabeledList.Item>
<LabeledList.Item label="Поиск">{searchBar}</LabeledList.Item>
</LabeledList>
</Section>
</Stack.Item>
<Stack.Item grow>
<Section
fill
scrollable
title="Категории"
buttons={
<>
<Button
icon="times"
content="Убрать всё"
disabled={selectedCategories.length === 0}
onClick={() => setSelectedCategories([])}
/>
<Button
icon="check"
content="Выбрать всё"
disabled={selectedCategories.length === categories.length}
onClick={() => setSelectedCategories(categories)}
/>
</>
}
>
{categoriesCheckboxes}
</Section>
</Stack.Item>
<Stack.Item>
<Section>
<BlockQuote>
<Stack.Item>
{`Для поддержания и развития сообщества в условиях растущих расходов часть голосов пришлось сделать доступными только за материальную поддержку сообщества.`}
</Stack.Item>
<Stack.Item mt={1} italic>
{`Подробнее об этом можно узнать в нашем Discord-сообществе.`}
</Stack.Item>
</BlockQuote>
</Section>
</Stack.Item>
</Stack>
</Stack.Item>
<Stack.Item grow>
<Stack fill vertical>
<Section
fill
scrollable
title={`Голоса (${availableSeeds.length}/${seeds.length})`}
>
<Table>{seedsRow}</Table>
</Section>
</Stack>
</Stack.Item>
</Stack>
);
};

0 comments on commit 7bad57e

Please sign in to comment.