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: {