srizan/archived-osu-radio
1
0
Fork 0
mirror of https://github.com/SrIzan10/osu-radio.git synced 2026-05-01 10:55:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

format

Browse Source
This commit is contained in:
Tnixc
2024-10-11 16:15:44 -04:00
parent d45d8178c1
commit 0c2f14a226
14 changed files with 76 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
electron.vite.config.1728674597190.mjs
View File

@@ -2,22 +2,21 @@
import { defineConfig, externalizeDepsPlugin } from "electron-vite";
import { resolve } from "path";
import solid from "vite-plugin-solid";
var electron_vite_config_default = defineConfig({
main: {
plugins: [externalizeDepsPlugin()]
plugins: [externalizeDepsPlugin()],
},
preload: {
plugins: [externalizeDepsPlugin()]
plugins: [externalizeDepsPlugin()],
},
renderer: {
resolve: {
alias: {
"@renderer": resolve("src/renderer/src")
}
"@renderer": resolve("src/renderer/src"),
},
},
plugins: [solid()]
}
plugins: [solid()],
},
});
export {
electron_vite_config_default as default
};
export { electron_vite_config_default as default };

2
postcss.config.js
View File

@@ -3,4 +3,4 @@ export default {
tailwindcss: {},
autoprefixer: {},
},
}
};

2
src/renderer/src/components/song/SongHint.tsx
View File

@@ -8,4 +8,4 @@ export default function SongHint(): HTMLElement {
</div>
</div>
) as HTMLElement;
}
}

1
src/renderer/src/components/song/context-menu/SongContextMenu.tsx
View File

@@ -69,7 +69,6 @@ const SongContextMenu: Component<SongContextMenuProps> = (props) => {
);
};
export default SongContextMenu;
export function ignoreClickInContextMenu(fn: (evt: MouseEvent) => any): (evt: MouseEvent) => void {

2
src/renderer/src/components/song/context-menu/SongContextMenuItem.tsx
View File

@@ -27,4 +27,4 @@ const SongContextMenuItem: Component<SongContextMenuItemProps> = (props) => {
);
};
export default SongContextMenuItem;
export default SongContextMenuItem;

2
src/renderer/src/components/song/context-menu/items/PlayNext.tsx
View File

@@ -26,4 +26,4 @@ const PlayNext: Component<SongPlayNextProps> = (props) => {
);
};
export default PlayNext;
export default PlayNext;

2
src/renderer/src/components/song/song-detail/SongControls.tsx
View File

@@ -99,4 +99,4 @@ const SongControls: Component<SongControlsProps> = () => {
);
};
export default SongControls;
export default SongControls;

6
src/renderer/src/components/song/song-detail/SongDetail.tsx
View File

@@ -11,7 +11,11 @@ const SongDetail: Component = () => {
return (
<div class="flex flex-col h-full p-8 max-w-2xl w-full">
<div class="flex-grow mb-8 grid place-items-center">
<SongImage src={song().bg} instantLoad={true} class="size-80 bg-cover bg-center object-cover rounded-lg shadow-lg" />
<SongImage
src={song().bg}
instantLoad={true}
class="size-80 bg-cover bg-center object-cover rounded-lg shadow-lg"
/>
</div>
<div class="space-y-4">

15
src/renderer/src/components/song/song-item/SongItem.tsx
View File

@@ -42,7 +42,7 @@ const SongItem: Component<SongItemProps> = ({
onMount(() => {
draggable(item, {
onClick: ignoreClickInContextMenu(() => onSelect(song.path)),
onDrop: onDrop ?? (() => { }),
onDrop: onDrop ?? (() => {}),
createHint: SongHint,
useOnlyAsOnClickBinder: !isDraggable || selectedSong().path === song.path,
});
@@ -54,10 +54,11 @@ const SongItem: Component<SongItemProps> = ({
return (
<div
class={`relative isolate my-4 select-none rounded-md ${selectedSong().path === song.path
? "data-[active=true]:after:bg-black/30 data-[active=true]:outline data-[active=true]:outline-2 data-[active=true]:outline-accent"
: ""
} hover:after:bg-overlay`}
class={`relative isolate my-4 select-none rounded-md ${
selectedSong().path === song.path
? "data-[active=true]:after:bg-black/30 data-[active=true]:outline data-[active=true]:outline-2 data-[active=true]:outline-accent"
: ""
} hover:after:bg-overlay`}
data-active={selectedSong().path === song.path}
ref={item}
data-url={song.bg}
@@ -70,7 +71,9 @@ const SongItem: Component<SongItemProps> = ({
/>
<div class="flex flex-col justify-center min-h-[72px] p-3 bg-black/50 overflow-hidden rounded-md">
<h3 class="text-[22px] leading-7 font-extrabold text-shadow shadow-black/60">{song.title}</h3>
<h3 class="text-[22px] leading-7 font-extrabold text-shadow shadow-black/60">
{song.title}
</h3>
<p class="text-base text-subtext">{song.artist}</p>
</div>
</div>

21
src/renderer/src/components/song/song-list-search/SongListSearch.tsx
View File

@@ -74,7 +74,10 @@ const SongListSearch: Component<SearchProps> = (props) => {
setSongsSearch(e.target.value);
}}
/>
<label class="absolute left-3 top-1/2 transform -translate-y-1/2 text-text-600" for="search_input">
<label
class="absolute left-3 top-1/2 transform -translate-y-1/2 text-text-600"
for="search_input"
>
<i class="ri-search-2-line" />
</label>
</div>
@@ -83,10 +86,11 @@ const SongListSearch: Component<SearchProps> = (props) => {
<SongListSearchOrderBy setOrder={props.setOrder} />
</div>
</div>
)
}
);
};
{/* <div class="results row">
{
/* <div class="results row">
<button
title={
props.count() === 0 ? "Can not save results as playlist" : "Save results as playlist"
@@ -99,11 +103,14 @@ const SongListSearch: Component<SearchProps> = (props) => {
<OrderSelect setOrder={props.setOrder} disabled={props.count() === 0} />
<TagSelect tags={props.tags} disabled={props.count() === 0} />
</div>
</div> */}
</div> */
}
{/* <div class="error-container" classList={{ 'display-none': !doShowError() }}>
{
/* <div class="error-container" classList={{ 'display-none': !doShowError() }}>
<p class="message" ref={errorMessage}></p>
<button class="suggestion" ref={suggestion} classList={{ 'display-none': !doShowSuggestion() }}></button>
</div> */}
</div> */
}
export default SongListSearch;

11
src/renderer/src/components/song/song-list-search/SongListSearchOrderBy.tsx
View File

@@ -74,7 +74,9 @@ const SongListSearchOrderBy: Component<OrderSelectProps> = (props) => {
</Switch>
</IconButton>
<Dropdown isOpen={isOpen} onValueChange={setIsOpen}>
<Dropdown.Trigger class="px-3 py-1 bg-thin-material rounded-md">{optionLabel()}</Dropdown.Trigger>
<Dropdown.Trigger class="px-3 py-1 bg-thin-material rounded-md">
{optionLabel()}
</Dropdown.Trigger>
<Dropdown.List
class="bg-surface shadow-lg rounded-md overflow-hidden"
onValueChange={(newSelectedOption) => {
@@ -85,7 +87,10 @@ const SongListSearchOrderBy: Component<OrderSelectProps> = (props) => {
value={option}
>
{orderOptions.map((option) => (
<Dropdown.Item class="px-4 py-2 hover:bg-accent/20 transition-colors duration-200" value={option.value}>
<Dropdown.Item
class="px-4 py-2 hover:bg-accent/20 transition-colors duration-200"
value={option.value}
>
{option.text}
</Dropdown.Item>
))}
@@ -95,4 +100,4 @@ const SongListSearchOrderBy: Component<OrderSelectProps> = (props) => {
);
};
export default SongListSearchOrderBy;
export default SongListSearchOrderBy;

2
src/renderer/src/components/song/song-queue/SongQueue.tsx
View File

@@ -118,4 +118,4 @@ const SongQueue: Component = () => {
);
};
export default SongQueue;
export default SongQueue;

16
src/renderer/src/scenes/main-scene/MainScene.tsx
View File

@@ -26,7 +26,11 @@ const MainScene: Component = () => {
</main>
<div class="absolute inset-0 z-[-1] pointer-events-none opacity-[0.072]">
<SongImage src={song().bg} instantLoad={true} class="w-full h-full bg-cover filter blur-xl" />
<SongImage
src={song().bg}
instantLoad={true}
class="w-full h-full bg-cover filter blur-xl"
/>
</div>
</div>
);
@@ -41,7 +45,7 @@ const Nav: Component = () => {
<div class="ml-auto">
<IconButton
class={`text-text-700 ${songQueueModalOpen() ? 'text-text-900' : ''}`}
class={`text-text-700 ${songQueueModalOpen() ? "text-text-900" : ""}`}
onClick={toggleSongQueueModalOpen}
>
<i class="ri-stack-fill" />
@@ -58,11 +62,13 @@ const NavItem: Component<NavItemProps> = ({ children, value, icon }) => {
return (
<button
class={`flex items-center gap-4 px-4 py-1 rounded-sm hover:bg-surface
${mainActiveTab() === value ? 'bg-surface' : ''}`}
${mainActiveTab() === value ? "bg-surface" : ""}`}
onclick={() => setMainActiveTab(value)}
>
<i class={`${icon} ${mainActiveTab() === value ? 'text-text-900' : 'text-text-600'}`} />
<span class={`text-base font-semibold ${mainActiveTab() === value ? 'text-on-background' : 'text-text-600'}`}>
<i class={`${icon} ${mainActiveTab() === value ? "text-text-900" : "text-text-600"}`} />
<span
class={`text-base font-semibold ${mainActiveTab() === value ? "text-on-background" : "text-text-600"}`}
>
{children}
</span>
</button>

32
tailwind.config.js
View File

@@ -1,23 +1,21 @@
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./src/**/*.{js,ts,jsx,tsx}",
],
content: ["./src/**/*.{js,ts,jsx,tsx}"],
theme: {
extend: {
colors: {
'thick-material': 'var(--color-thick-material)',
'regular-material': 'var(--color-regular-material)',
'text': 'var(--color-text)',
'subtext': 'var(--color-subtext)',
'stroke': 'var(--color-stroke)',
'overlay': 'var(--color-overlay)',
'accent': 'var(--color-accent)',
'surface': 'var(--color-surface)',
'black': 'var(--color-black)',
'red': 'var(--color-red)',
'green': 'var(--color-green)',
'thin-material': 'var(--color-thin-material)',
"thick-material": "var(--color-thick-material)",
"regular-material": "var(--color-regular-material)",
text: "var(--color-text)",
subtext: "var(--color-subtext)",
stroke: "var(--color-stroke)",
overlay: "var(--color-overlay)",
accent: "var(--color-accent)",
surface: "var(--color-surface)",
black: "var(--color-black)",
red: "var(--color-red)",
green: "var(--color-green)",
"thin-material": "var(--color-thin-material)",
},
},
},
@@ -25,5 +23,5 @@ export default {
extend: {},
},
plugins: [],
darkMode: 'media', // or 'class' if you prefer manual dark mode switching
}
darkMode: "media", // or 'class' if you prefer manual dark mode switching
};