trafficlunar/jellyfin-spicetify
1
0
Fork 0
mirror of https://github.com/trafficlunar/jellyfin-spicetify.git synced 2026-06-13 19:07:06 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor: migrate to bun bundler

Browse source
This commit is contained in:
trafficlunar 2026-03-05 18:24:29 +00:00
parent 5aef2d1231
commit 6cc35f6100
10 changed files with 266 additions and 1816 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/app.tsx
View file

@ -116,4 +116,4 @@ async function main() {
});
}
export default main;
main();

20
src/settings.tsx
View file

@ -95,14 +95,14 @@ export default function SettingsModal() {
d="M434.834 62.776c0 6.012-4.874 10.885-10.885 10.885s-10.885-4.873-10.885-10.885s4.873-10.885 10.885-10.885c6.012-.001 10.885 4.873 10.885 10.885M46.324 11.894c-6.012 0-10.885 4.873-10.885 10.885s4.873 10.885 10.885 10.885S57.21 28.791 57.21 22.779s-4.874-10.885-10.886-10.885m170.681 142.057c1.231-2.414 2.749-5.163 4.356-8.073c8.154-14.771 19.32-34.999 19.992-58.559c.807-28.304-13.934-54.002-43.812-76.38c-5.187-3.885-12.539-2.828-16.421 2.357c-3.884 5.186-2.829 12.538 2.357 16.421c23.75 17.788 35.01 36.411 34.425 56.933c-.51 17.872-9.697 34.516-17.08 47.889c-1.701 3.083-3.309 5.994-4.713 8.747c-2.945 5.771-.654 12.836 5.116 15.781a11.7 11.7 0 0 0 5.323 1.285a11.73 11.73 0 0 0 10.457-6.401"
/>
</svg>
<p className={styles.logged_in}>You're logged in!</p>
<p className={styles.loggedIn}>You're logged in!</p>
<select name="" id="">
<option value="">Source</option>
</select>
<hr style={{ width: "100%", margin: "1rem 0" }} className={styles.hr} />
<button onClick={() => setIsLoggedIn(false)} className={styles.submit}>
<button onClick={() => setIsLoggedIn(false)} className={styles.button}>
Log out
</button>
</div>
@ -110,16 +110,16 @@ export default function SettingsModal() {
return (
<div className={styles.modal}>
<div className={styles.input_container}>
<div className={styles.inputContainer}>
<label htmlFor="url">URL</label>
<input id="url" type="text" placeholder="Enter Jellyfin URL..." value={url} onChange={(e) => setUrl(e.target.value)} />
</div>
{isUsingQuickConnect ? (
<div className={styles.input_container}>
<div className={styles.inputContainer}>
<label htmlFor="code">Code</label>
<div className={styles.quick_connect_wrapper}>
<div className={styles.quickConnectWrapper}>
<input
id="quick-connect"
type="text"
@ -140,11 +140,11 @@ export default function SettingsModal() {
const element = e.target as HTMLInputElement;
element.setSelectionRange(element.value.length, element.value.length);
}}
className={styles.quick_connect_input}
className={styles.quickConnectInput}
/>
{Array.from({ length: 6 }).map((_, i) => (
<div key={i} className={`${styles.quick_connect_box} ${isFocused && quickConnectCode.length === i ? styles.quick_connect_box_active : ""}`}>
<div key={i} className={`${styles.quickConnectBox} ${isFocused && quickConnectCode.length === i ? styles.quickConnectBoxActive : ""}`}>
{quickConnectCode[i]}
</div>
))}
@ -152,12 +152,12 @@ export default function SettingsModal() {
</div>
) : (
<>
<div className={styles.input_container}>
<div className={styles.inputContainer}>
<label htmlFor="username">Username</label>
<input id="username" type="text" placeholder="Enter username..." value={username} onChange={(e) => setUsername(e.target.value)} />
</div>
<div className={styles.input_container}>
<div className={styles.inputContainer}>
<label htmlFor="password">Password</label>
<input id="password" type="password" placeholder="Enter password..." value={password} onChange={(e) => setPassword(e.target.value)} />
</div>
@ -180,7 +180,7 @@ export default function SettingsModal() {
return !prev;
});
}}
className={`${styles.quick_connect} ${styles.button}`}
className={`${styles.quickConnect} ${styles.button}`}
>
{isUsingQuickConnect ? "Username/Password" : "Quick Connect"}
</button>

25
src/styles.module.css
View file

@ -21,24 +21,24 @@
gap: 0.5rem;
}
.logged_in {
.loggedIn {
font-size: 1.25rem;
font-weight: 600;
}
.input_container {
.inputContainer {
display: flex;
flex-direction: column;
width: 100%;
}
.input_container label {
.inputContainer label {
color: var(--spice-subtext);
margin-bottom: 0.25rem;
}
.input_container input,
.quick_connect_box {
.inputContainer input,
.quickConnectBox {
background-color: var(--spice-main-elevated);
color: var(--spice-text);
border: 1px solid var(--spice-card);
@ -47,12 +47,12 @@
transition: 200ms border-color;
}
.input_container input:focus,
.quick_connect_box_active {
.inputContainer input:focus,
.quickConnectBoxActive {
border-color: var(--spice-button);
}
.input_container input::placeholder {
.inputContainer input::placeholder {
color: var(--spice-subtext);
opacity: 0.5;
}
@ -69,15 +69,15 @@
background-color: var(--spice-main-elevated);
}
.quick_connect_wrapper {
.quickConnectWrapper {
position: relative;
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 0.25rem;
height: 3rem;
height: 2.5rem;
}
.quick_connect_input {
.quickConnectInput {
background-color: transparent !important;
border-color: transparent !important;
color: transparent !important;
@ -86,7 +86,7 @@
z-index: 5;
}
.quick_connect_box {
.quickConnectBox {
width: 100%;
height: 100%;
display: flex;
@ -95,4 +95,5 @@
border-radius: 0.25rem;
font-size: 1.25rem;
font-weight: 500;
padding: 0;
}