From 2f7bda6bf779ff37da2447b770062016cac58e90 Mon Sep 17 00:00:00 2001 From: sphinxrave <62570796+sphinxrave@users.noreply.github.com> Date: Sun, 9 Jun 2024 20:16:14 -0700 Subject: [PATCH] better settings page --- .../src/components/settings/SettingsItem.tsx | 4 +- .../react/src/components/sidebar/sidebar.tsx | 4 +- packages/react/src/locales/en/ui.yml | 80 ++++++------ .../react/src/routes/settings/homepage.tsx | 115 ++++++++---------- packages/react/vite.config.ts | 4 + 5 files changed, 102 insertions(+), 105 deletions(-) diff --git a/packages/react/src/components/settings/SettingsItem.tsx b/packages/react/src/components/settings/SettingsItem.tsx index 7a290d58c..2b467aa70 100644 --- a/packages/react/src/components/settings/SettingsItem.tsx +++ b/packages/react/src/components/settings/SettingsItem.tsx @@ -12,11 +12,11 @@ export function SettingsItem({ fullWidth, }: SettingsItemProps) { return ( -
+

{label}

- {Children.only(children)} +
{children}
); } diff --git a/packages/react/src/components/sidebar/sidebar.tsx b/packages/react/src/components/sidebar/sidebar.tsx index 2900a7c09..680f3118f 100644 --- a/packages/react/src/components/sidebar/sidebar.tsx +++ b/packages/react/src/components/sidebar/sidebar.tsx @@ -87,7 +87,7 @@ export function Sidebar({ className, id, onClose }: SidebarProps) { className="text-base-11" label={t("component.mainNav.tlclient")} icon="i-heroicons:language" - href="/settings" + href="/tlclient" onClose={onClose} /> )} @@ -98,7 +98,7 @@ export function Sidebar({ className, id, onClose }: SidebarProps) { // icon="i-solar:subtitles-linear" // icon="i-gravity-ui:timeline" icon="i-fluent:gantt-chart-16-regular" - href="/settings" + href="/scripteditor" onClose={onClose} /> )} diff --git a/packages/react/src/locales/en/ui.yml b/packages/react/src/locales/en/ui.yml index 94cdaf3b5..c94461620 100644 --- a/packages/react/src/locales/en/ui.yml +++ b/packages/react/src/locales/en/ui.yml @@ -1,8 +1,8 @@ component: apiError: title: Gomenasorry! - textBeforeTwitter: 'There was an error retrieving content, please check twitter ' - textAfterTwitter: ' or report an error through the' + textBeforeTwitter: "There was an error retrieving content, please check twitter " + textAfterTwitter: " or report an error through the" aboutPage: About page afterAboutPageHyperlink: . text: >- @@ -17,9 +17,9 @@ component: loadMore: Load More channelInfo: stats: Stats - videoCount: '{0} Videos' - clipCount: '{n} Clips' - subscriberCount: '{n} Subscribers' + videoCount: "{0} Videos" + clipCount: "{n} Clips" + subscriberCount: "{n} Subscribers" subscriberNA: Subscriber count unavailable totalViews: Total Views channelSocials: @@ -47,8 +47,8 @@ component: tlclient: TL Client scriptEditor: TL Editor videoCard: - clips: '{n} Clips' - watching: '{0} Watching' + clips: "{n} Clips" + watching: "{0} Watching" liveNow: Live Now edit: Edit copiedToClipboard: Link copied to clipboard. @@ -167,19 +167,19 @@ component: clear-playlist: Clear playlist save-error-not-logged-in: You need to be logged in to save playlists placeholderVideo: - discordCredit: 'Event data provided by {0} from: {1}' + discordCredit: "Event data provided by {0} from: {1}" datasourceCredit: Event data fetched from {0} datasource. botCredit: Event data provided via {0} datasource, created by {1}. streamPageBtn: Stream Page eventPageBtn: Event Page scheduledEvent: Scheduled editorCredit: Event setup by Holodex editor {0}. - creditTitleText: 'Credits:' + creditTitleText: "Credits:" channelPicker: notFound: No channel found addPlaceholder: creditName: Editor Credit Name - channelLabel: 'Create Placeholder into Channel:' + channelLabel: "Create Placeholder into Channel:" titleLabel: Video / Event Title titleHint: The title of placeholder jpTitleLabel: Japanese Event Title @@ -320,7 +320,7 @@ views: scrollModeMsg: Use scroll/tap to turn pages resetAllSettings: Reset All Settings/Data resetAllSettingsWarning: You will lose all data. Continue? - clipLanguageSelection: 'See Clips in these Languages:' + clipLanguageSelection: "See Clips in these Languages:" tlLanguageSelection: See live-chat TL in these languages defaultPage: Default Page defaultPageMsg: >- @@ -332,9 +332,9 @@ views: gridSizeLabel: Thumbnail/Grid Size gridSizeMsg: Change thumbnail/video grid size on Home/Favorites page gridSize: - - Grid + - Large Thumbnails + - Small Thumbnails - List - - Dense List hideCollabStreamsLabel: Hide Collab Streams hideCollabStreamsMsg: Hide collab streams from your favorites feed hidePlaceholderStreams: Hide Placeholder Streams @@ -520,10 +520,10 @@ views: everyone, please refresh the page. playlist: playlist-is-modified: Not saved - item-last-updated: 'Last Updated:' + item-last-updated: "Last Updated:" login-prompt: Login to save playlists and have more than one playlist new-playlist-btn-label: Create a new Playlist - page-heading: 'Your Playlists:' + page-heading: "Your Playlists:" page-instruction: Click a playlist to set it as active. change-loss-warning: You will lose unsaved changes. Continue? extension: @@ -538,10 +538,10 @@ views: streams, waiting room thumbnail not showing) and more! raycast: features: - '0': Show ongoing live streams - '1': Search archives - '2': Search clips - '3': Search channels + "0": Show ongoing live streams + "1": Search archives + "2": Search clips + "3": Search channels tlClient: menu: title: Menu @@ -616,7 +616,7 @@ views: time: soon: soon diff_future_date: Starts {0} ({1}) - distance_past_date: '{0}' + distance_past_date: "{0}" editor: music: add: Add @@ -627,8 +627,8 @@ editor: href='/about'>discord to notify editors of issues / abuse, or apply to become an editor. titles: - addSong: 'Song Metadata: Add a new Song' - songList: 'Song List : {0}' + addSong: "Song Metadata: Add a new Song" + songList: "Song List : {0}" help: Guide itunesLookupPlaceholder: (Optional) Lookup on iTunes moveRight2s: Move right 2s @@ -639,8 +639,8 @@ editor: originalArtistInput: Original Artist testStart: Test the start startInput: Start - endInput: 'Duration in seconds: (end @ {0})' - inheritItunesMusic: 'Set Duration via iTunes: {0}' + endInput: "Duration in seconds: (end @ {0})" + inheritItunesMusic: "Set Duration via iTunes: {0}" exitMode: Exit Edit Mode enterMode: Edit Video about: @@ -698,7 +698,7 @@ about: We are working on it! In the mean time, please use the "Add to Home" feature on your browser. We have tuned it a lot to behave like an app android: - - 'Android Chrome: Navigate to the site, click the three dots' + - "Android Chrome: Navigate to the site, click the three dots" - on the top right and find "Add to Home Screen". ios: - >- @@ -734,7 +734,7 @@ about: support: title: How do I support Holodex? contents: - '0': >- + "0": >- Our self-hosted server is a 28-core 60GB RAM machine that take about $60 USD / mo to run, and we're looking to expanding more and more in our feature set, so we've started a - + "0": >- Holodex is a fan-built platform for watching VTubers. We are built by DD for DDs. - '1': >- + "1": >- We organize clips and collabs by talents included, tabulate songs sang inside individual videos and as part of karaoke streams, compile agencies and groups by generation and branch, provide ways to favorite clips and streams, and allow you to watch livestreams with TLs (or produce TLs live or in VODs with community-caption-alike features). - '2': >- + "2": >- We comply with the Derivative Work Agreement of hololive production and attempt to extend that to other orgs and agencies. We also operate within the specifications of Youtube Data API and Embed Player Terms of @@ -800,10 +800,10 @@ about: service inquiries. title: About Holodex credits: - '0': >- + "0": >- Big shout out to Jet/HoloTools for helping us with the API and inspiring the Multiview. - '1': 'We''d like to thank our long list of contributors and over 100 editors:' + "1": "We'd like to thank our long list of contributors and over 100 editors:" addRequest: >- (If you'd like to add your name to this list, drop us a poke on Discord!) @@ -813,9 +813,9 @@ about: github: Issues / Source Code apiDocs: API Documentation contact: - discord: 'Join Holodex Discord:' + discord: "Join Holodex Discord:" twitter: DM us on Twitter - email: 'Email us:' + email: "Email us:" title: Contact contactForm: name: Name @@ -829,13 +829,13 @@ about: privacy: title: Privacy Policy heading: - '1': 1. Collection and Use of Personal Data - '2': 2. Third-Party Data Collection and Tracking - '3': 3. User Data Removal - '4': 4. Changes to this Privacy Policy - '5': 5. Contact Us + "1": 1. Collection and Use of Personal Data + "2": 2. Third-Party Data Collection and Tracking + "3": 3. User Data Removal + "4": 4. Changes to this Privacy Policy + "5": 5. Contact Us top: Holodex Privacy Policy - lastUpdated: 'Last updated: {date}' + lastUpdated: "Last updated: {date}" text: 1-1: >- When you use our platform, we collect your data solely for @@ -874,7 +874,7 @@ about: with our website, you can contact us on Twitter DMs or Discord ModMail. 5-2: Links can be found here. channelRequest: - RequestType: 'Request Type:' + RequestType: "Request Type:" Types: AddVtuber: Add a Vtuber ▶️ for Holodex to track the channel and clips. AddClipper: Add a clipping/subbing channel to Holodex diff --git a/packages/react/src/routes/settings/homepage.tsx b/packages/react/src/routes/settings/homepage.tsx index cb8722709..9407373b3 100644 --- a/packages/react/src/routes/settings/homepage.tsx +++ b/packages/react/src/routes/settings/homepage.tsx @@ -2,7 +2,9 @@ import { SettingsItem } from "@/components/settings/SettingsItem"; import { TopicPicker } from "@/components/topic/TopicPicker"; import { cn } from "@/lib/utils"; import { Badge } from "@/shadcn/ui/badge"; +import { Checkbox } from "@/shadcn/ui/checkbox"; import { Label } from "@/shadcn/ui/label"; +import { Popover, PopoverContent, PopoverTrigger } from "@/shadcn/ui/popover"; import { RadioGroup, RadioGroupItem } from "@/shadcn/ui/radio-group"; import { Switch } from "@/shadcn/ui/switch"; import { @@ -44,15 +46,15 @@ export function SettingsHomepage() { }, { value: "md", - label: t("views.settings.gridSize.0"), + label: t("views.settings.gridSize.1"), icon: "i-lucide:grid-3x3", }, { value: "sm", - label: t("views.settings.gridSize.1"), + label: t("views.settings.gridSize.2"), icon: "i-lucide:list", }, - ]; + ] as const; const hideFeatures = [ { @@ -74,55 +76,47 @@ export function SettingsHomepage() { return (
- - setDefaultOpen(val)} - > - {defaultPages.map(({ label, value }) => ( -
- - + +
+
setDefaultOpen("Home")} + > +
+
{t("views.settings.defaultHomepage.lastVisitedOrgHome")}
+
+
setDefaultOpen("Favorites")} + > +
+
+ {t("views.settings.defaultHomepage.favoritesWhenLoggedIn")}
- ))} - +
+
- - setSize(val)} - > + +
{gridSizes.map(({ label, value, icon }) => ( - +
+
{label}
+
))} - +
- -
+ +
setIgnoredTopics([...ignoredTopics, topic])} /> @@ -140,25 +134,24 @@ export function SettingsHomepage() {
- -
+ +
{hideFeatures.map(({ label, value, onChange }, index) => ( - + +
))}
diff --git a/packages/react/vite.config.ts b/packages/react/vite.config.ts index 049e4a287..6ebbc9a52 100644 --- a/packages/react/vite.config.ts +++ b/packages/react/vite.config.ts @@ -29,6 +29,9 @@ export default defineConfig({ "ffprobe-core.wasm", "ffmpeg.min.js", ], + output: { + experimentalMinChunkSize: 6000, + }, }, }, server: { @@ -61,6 +64,7 @@ export default defineConfig({ analyzerMode: process.env["HOME"]?.includes("/home/holodex") ? "static" // don't use server mode when compiling on the linux server : "server", + port: 9821, }), react({ babel: {