zedcode/bs-manager
1
0
Fork 0
mirror of https://github.com/Zagrios/bs-manager.git synced 2026-07-03 14:08:25 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'master' into feature/add-changelog-modal/178

Browse Source
This commit is contained in:
Shidorien
2024-01-08 09:43:59 +01:00
parent 86c1f5aa7b f908acefd6
commit b02cd7fc77
63 changed files with 662 additions and 512 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/main/helpers/fs.helpers.ts
+12
View File
@@ -5,6 +5,8 @@ import { Observable, concatMap, from } from "rxjs";
import log from "electron-log";
import { BsmException } from "shared/models/bsm-exception.model";
import crypto from "crypto";
import { execSync } from "child_process";
import { tryit } from "../../shared/helpers/error.helpers";
export async function pathExist(path: string): Promise<boolean> {
try {
@@ -232,6 +234,16 @@ export async function isJunction(path: string): Promise<boolean>{
return lstats.isSymbolicLink() && stats.isDirectory();
}
export function resolveGUIDPath(guidPath: string): string {
const guidVolume = path.parse(guidPath).root;
const command = `powershell -command "(Get-WmiObject -Class Win32_Volume | Where-Object { $_.DeviceID -like '${guidVolume}' }).DriveLetter"`;
const {result: driveLetter, error} = tryit(() => execSync(command).toString().trim());
if (!driveLetter || error) {
throw new Error("Unable to resolve GUID path", error);
}
return path.join(driveLetter, path.relative(guidVolume, guidPath));
}
export interface Progression<T = unknown> {
total: number;
current: number;
src/main/services/additional-content/local-maps-manager.service.ts
+7 -7
View File
@@ -7,7 +7,7 @@ import { InstallationLocationService } from "../installation-location.service";
import { UtilsService } from "../utils.service";
import crypto from "crypto";
import { lstatSync } from "fs";
import { copy, createReadStream, ensureDir, realpath, unlink } from "fs-extra";
import { copy, createReadStream, ensureDir, pathExists, realpath, unlink } from "fs-extra";
import StreamZip from "node-stream-zip";
import { RequestService } from "../request.service";
import sanitize from "sanitize-filename";
@@ -255,10 +255,12 @@ export class LocalMapsManagerService {
const mapFolderName = sanitize(`${map.id}-${map.name}`);
const mapsFolder = await this.getMapsFolderPath(version);
const installedMap = await this.loadMapInfoFromPath(path.join(mapsFolder, mapFolderName)).catch(e => {
log.error("loadMapInfoFromPath", e);
return null;
});
const mapPath = path.join(mapsFolder, mapFolderName);
const installedMap = await pathExists(mapPath).then(exists => {
if(!exists){ return null; }
return this.loadMapInfoFromPath(mapPath);
}).catch(() => null);
if(map.versions.every(version => version.hash === installedMap?.hash)) {
return installedMap;
@@ -270,8 +272,6 @@ export class LocalMapsManagerService {
throw `Cannot download ${zipUrl}`;
}
const mapPath = path.join(mapsFolder, mapFolderName);
await ensureFolderExist(mapPath);
await zip.extract(null, mapPath);
src/main/services/bs-launcher/oculus-launcher.service.ts
+3 -1
View File
@@ -34,7 +34,9 @@ export class OculusLauncherService extends AbstractLauncherService implements St
this.pathsService = InstallationLocationService.getInstance();
this.oculus.tryGetGameFolder([OCULUS_BS_DIR, OCULUS_BS_BACKUP_DIR]).then(async dirPath => {
if(dirPath){ return this.oculusLib$.next( path.join(dirPath, "..") ); }
if(dirPath){
return this.oculusLib$.next( path.join(dirPath, "..") );
}
const defaultLib = ((await this.oculus.getOculusLibs()) || []).find(lib => lib.isDefault);
if(defaultLib?.path){ return this.oculusLib$.next(path.join(defaultLib.path, "Software")); }
this.oculusLib$.next(null);
src/main/services/oculus.service.ts
+10 -4
View File
@@ -1,8 +1,9 @@
import { list } from "regedit-rs";
import path from "path";
import { pathExist } from "../helpers/fs.helpers";
import { pathExist, resolveGUIDPath } from "../helpers/fs.helpers";
import log from "electron-log";
import { lstat } from "fs-extra";
import { tryit } from "../../shared/helpers/error.helpers";
export class OculusService {
private static instance: OculusService;
@@ -42,11 +43,16 @@ export class OculusService {
await Promise.all(libsRegData.keys.map(async key => {
const originalPath = await list([`${oculusLibsRegKey}\\${key}`]).then(res => res[`${oculusLibsRegKey}\\${key}`]);
if (!originalPath.values?.OriginalPath) {
return null;
if (originalPath.values?.OriginalPath) {
return { id: key, path: originalPath.values.OriginalPath.value, isDefault: defaultLibraryId === key } as OculusLibrary;
}
if(originalPath.values?.Path) {
const { result } = tryit(() => resolveGUIDPath(originalPath.values.Path.value as string));
return result ? { id: key, path: result, isDefault: defaultLibraryId === key } as OculusLibrary : null;
}
return { id: key, path: originalPath.values.OriginalPath.value, isDefault: defaultLibraryId === key } as OculusLibrary
return null;
}, []))
).filter(Boolean);
src/renderer/components/available-versions/available-versions-slider.component.tsx
+1 -1
View File
@@ -8,7 +8,7 @@ import { useObservable } from "renderer/hooks/use-observable.hook";
export function AvailableVersionsSlider() {
const versionManagerService = useService(BSVersionManagerService);
const availableVersions = useObservable(versionManagerService.availableVersions$);
const availableVersions = useObservable(() => versionManagerService.availableVersions$);
const [yearIndex, setYearIndex] = useState(0);
const availableYears = (() => {
src/renderer/components/maps-mangement-components/filter-panel.component.tsx
+7 -6
View File
@@ -56,7 +56,7 @@ export function FilterPanel({ className, ref, playlist = false, filter, onChange
const renderDurationLabel = (sec: number): JSX.Element => {
const textValue = (() => {
if (sec === MIN_DURATION) {
return t("maps.map-filter-panel.duration");
return MIN_DURATION;
}
if (sec === MAX_DURATION) {
return "∞";
@@ -72,7 +72,7 @@ export function FilterPanel({ className, ref, playlist = false, filter, onChange
const renderNpsLabel = (nps: number): JSX.Element => {
const textValue = (() => {
if (nps === MIN_NPS) {
return "NPS";
return MIN_NPS;
}
if (nps === MAX_NPS) {
return "∞";
@@ -167,9 +167,11 @@ export function FilterPanel({ className, ref, playlist = false, filter, onChange
return !playlist ? (
<motion.div ref={ref} className={`${className} bg-light-main-color-2 dark:bg-main-color-3`} initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}>
<div className="w-full h-6 grid grid-cols-2 gap-x-12 px-4 mb-6 pt-2">
<BsmRange min={MIN_NPS} max={MAX_NPS} values={npss} onChange={onNpssChange} renderLabel={renderNpsLabel} step={0.1} />
<BsmRange min={MIN_DURATION} max={MAX_DURATION} values={durations} onChange={onDurationsChange} renderLabel={renderDurationLabel} step={5} />
<div className="w-full h-6 grid grid-cols-2 gap-x-12 px-4 mb-6 pt-1">
<BsmRange min={MIN_NPS} max={MAX_NPS} values={npss} onChange={onNpssChange} renderLabel={renderNpsLabel} step={0.1} />
<BsmRange min={MIN_DURATION} max={MAX_DURATION} values={durations} onChange={onDurationsChange} renderLabel={renderDurationLabel} step={5} />
<span className=" text-sm font-bold text-center mt-2.5">{t("maps.map-filter-panel.nps")}</span>
<span className=" text-sm font-bold text-center mt-2.5">{t("maps.map-filter-panel.duration")}</span>
</div>
<div className="w-full h-full flex gap-x-2">
<section className="shrink-0">
@@ -180,7 +182,6 @@ export function FilterPanel({ className, ref, playlist = false, filter, onChange
<span className="grow capitalize">{translateMapSpecificity(specificity)}</span>
</div>
))}
<h2 className="my-1 uppercase text-sm">{t("maps.map-filter-panel.requirements")}</h2>
{MAP_REQUIREMENTS.map(requirement => (
<div key={requirement} className="flex justify-start items-center h-[22px] z-20 relative py-0.5 cursor-pointer" onClick={() => handleCheckbox(requirement)}>
src/renderer/components/maps-mangement-components/link-button.component.tsx
+44 -36
View File
@@ -1,48 +1,56 @@
import { motion } from "framer-motion";
import { forwardRef } from "react";
import { useThemeColor } from "renderer/hooks/use-theme-color.hook";
import { BsmIcon } from "../svgs/bsm-icon.component";
import { useTranslation } from "renderer/hooks/use-translation.hook";
import { FolderLinkState } from "renderer/services/version-folder-linker.service";
type Props = {
export type LinkBtnProps = {
className?: string;
title?: string;
linked?: boolean;
disabled?: boolean;
onClick?: () => void;
state: FolderLinkState;
onClick?: () => unknown;
};
export const LinkButton = motion(
forwardRef((props: Props, ref) => {
const t = useTranslation();
const color = useThemeColor("first-color");
export const LinkButton = ({className, title, state, onClick}: LinkBtnProps) => {
const t = useTranslation();
const color = useThemeColor("first-color");
const disabled = state === FolderLinkState.Processing || state === FolderLinkState.Pending;
const linkedColor = (() => {
if (props.disabled) {
return "orange";
}
if (props.linked) {
const btnColor = () => {
switch (state) {
case FolderLinkState.Linked:
return color;
}
return "red";
})();
case FolderLinkState.Pending:
case FolderLinkState.Processing:
return "orange";
case FolderLinkState.Unlinked:
return "red";
default:
return "red";
}
}
return (
<div
ref={ref}
className={props.className}
title={props.title ? t(props.title) : undefined}
onClick={e => {
e.preventDefault();
e.stopPropagation();
!props.disabled && props.onClick?.();
}}
style={{ pointerEvents: props.disabled ? "none" : "auto" }}
tabIndex={-1}
>
<span className="absolute top-0 left-0 h-full w-full rounded-full brightness-50 opacity-75 dark:opacity-20 dark:filter-none" style={{ backgroundColor: linkedColor }} />
<BsmIcon className="p-1 absolute top-0 left-0 h-full w-full !bg-transparent -rotate-45 brightness-150" icon={props.linked ? "link" : "unlink"} style={{ color: linkedColor }} />
</div>
);
})
);
const handleClick = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
e.preventDefault();
e.stopPropagation();
!disabled && onClick?.();
}
return (
<motion.div
variants={{ hover: { rotate: 22.5 }, tap: { rotate: 45 } }}
whileHover="hover"
whileTap="tap"
initial={{ rotate: 0 }}
className={className}
title={title ? t(title) : null}
onClick={handleClick}
style={{ pointerEvents: disabled ? "none" : "auto" }}
tabIndex={-1}
>
<span className="absolute top-0 left-0 h-full w-full rounded-full brightness-50 opacity-75 dark:opacity-20 dark:filter-none" style={{ backgroundColor: btnColor() }} />
<BsmIcon className="p-1 absolute top-0 left-0 h-full w-full !bg-transparent -rotate-45 brightness-150" icon={state === FolderLinkState.Linked ? "link" : "unlink"} style={{ color: btnColor() }} />
</motion.div>
);
}
src/renderer/components/maps-mangement-components/local-maps-list-panel.component.tsx
+1 -1
View File
@@ -429,7 +429,7 @@ export const LocalMapsListPanel = forwardRef(({ version, className, filter, sear
return (
<div ref={ref} className={className}>
<VariableSizeList className="p-0 scrollbar-thin scrollbar-thumb-rounded-full scrollbar-thumb-neutral-900" width="100%" height={listHeight} itemSize={() => 108} itemCount={preppedMaps.length} itemData={preppedMaps} layout="vertical" style={{ scrollbarGutter: "stable both-edges" }} itemKey={(i, data) => data[i].map(map => map.hash).join()}>
<VariableSizeList className="scrollbar-thin scrollbar-thumb-rounded-full scrollbar-thumb-neutral-900" width="100%" height={listHeight} itemSize={() => 108} itemCount={preppedMaps.length} itemData={preppedMaps} layout="vertical" style={{ scrollbarGutter: "stable both-edges" }} itemKey={(i, data) => data[i].map(map => map.hash).join()}>
{props => <MapsRow maps={props.data[props.index]} style={props.style} selectedMaps$={selectedMaps$} onMapSelect={onMapSelected} onMapDelete={handleDelete} />}
</VariableSizeList>
</div>
src/renderer/components/maps-mangement-components/map-item.component.tsx
+84 -58
View File
@@ -21,6 +21,7 @@ import useDoubleClick from "use-double-click";
import { GlowEffect } from "../shared/glow-effect.component";
import { useDelayedState } from "renderer/hooks/use-delayed-state.hook";
import { useService } from "renderer/hooks/use-service.hook";
import Tippy from "@tippyjs/react";
export type ParsedMapDiff = { type: BsvMapDifficultyType; name: string; stars: number };
@@ -51,7 +52,6 @@ export type MapItemProps<T = unknown> = {
};
export const MapItem = memo(({ hash, title, autor, songAutor, coverUrl, songUrl, autorId, mapId, diffs, ranked, bpm, duration, likes, createdAt, selected, downloading, showOwned, callBackParam, onDelete, onDownload, onSelected, onCancelDownload, onDoubleClick }: MapItemProps) => {
const linkOpener = useService(LinkOpenerService);
const audioPlayer = useService(AudioPlayerService);
@@ -70,7 +70,7 @@ export const MapItem = memo(({ hash, title, autor, songAutor, coverUrl, songUrl,
onDoubleClick: () => onDoubleClick?.(callBackParam),
});
const songPlaying = useObservable(audioPlayer.playing$.pipe(map(playing => playing && audioPlayer.src === songUrl)));
const songPlaying = useObservable(() => audioPlayer.playing$.pipe(map(playing => playing && audioPlayer.src === songUrl)));
const previewUrl = mapId ? `https://allpoland.github.io/ArcViewer/?id=${mapId}` : null;
const mapUrl = mapId ? `https://beatsaver.com/maps/${mapId}` : null;
@@ -156,25 +156,25 @@ export const MapItem = memo(({ hash, title, autor, songAutor, coverUrl, songUrl,
return (
<motion.li className="relative h-[100px] w-[400px] min-w-[370px] shrink-0 grow basis-0 text-white group cursor-pointer" onHoverStart={() => setHovered(true)} onHoverEnd={() => setHovered(false)} style={{ zIndex: hovered && 5, transform: "translateZ(0) scale(1.0, 1.0)", backfaceVisibility: "hidden" }}>
<GlowEffect visible={hovered || (selected && !!onSelected)} />
<AnimatePresence>
{(diffsPanelHovered || bottomBarHovered) && (
<motion.ul key={hash} className="absolute top-[calc(100%-10px)] w-full h-fit max-h-[200%] pt-4 pb-2 px-2 overflow-y-scroll bg-light-main-color-3 dark:bg-main-color-3 text-main-color-1 dark:text-current brightness-125 rounded-md flex flex-col gap-3 scrollbar-thin scrollbar-thumb-rounded-full scrollbar-thumb-neutral-900 shadow-sm shadow-black" initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} transition={{ duration: 0.15 }} onHoverStart={diffsPanelHoverStart} onHoverEnd={diffsPanelHoverEnd}>
{Array.from(diffs.entries()).map(([charac, diffSet]) => (
<ol key={crypto.randomUUID()} className="flex flex-col w-full gap-1">
{diffSet.map(({ type, name, stars }) => (
<li key={`${type}${name}${stars}`} className="w-full h-4 flex items-center gap-1">
<BsmIcon className="h-full w-fit p-px" icon={charac} />
<span className="h-full px-2 flex items-center text-xs font-bold bg-current rounded-full" style={{ color: MAP_DIFFICULTIES_COLORS[type] }}>
{stars ? <span className="h-full block brightness-[.25]">★ {stars}</span> : <span className="h-full brightness-[.25] leading-4 pb-[2px] capitalize">{parseDiffLabel(type)}</span>}
</span>
<span className="text-sm leading-4 pb-[2px] capitalize">{parseDiffLabel(name)}</span>
</li>
))}
</ol>
))}
</motion.ul>
)}
</AnimatePresence>
<AnimatePresence>
{(diffsPanelHovered || bottomBarHovered) && (
<motion.ul key={hash} className="absolute top-[calc(100%-10px)] w-full h-fit max-h-[200%] pt-4 pb-2 px-2 overflow-y-scroll bg-light-main-color-3 dark:bg-main-color-3 text-main-color-1 dark:text-current brightness-125 rounded-md flex flex-col gap-3 scrollbar-thin scrollbar-thumb-rounded-full scrollbar-thumb-neutral-900 shadow-sm shadow-black" initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} transition={{ duration: 0.15 }} onHoverStart={diffsPanelHoverStart} onHoverEnd={diffsPanelHoverEnd}>
{Array.from(diffs.entries()).map(([charac, diffSet]) => (
<ol key={crypto.randomUUID()} className="flex flex-col w-full gap-1">
{diffSet.map(({ type, name, stars }) => (
<li key={`${type}${name}${stars}`} className="w-full h-4 flex items-center gap-1">
<BsmIcon className="h-full w-fit p-px" icon={charac} />
<span className="h-full px-2 flex items-center text-xs font-bold bg-current rounded-full" style={{ color: MAP_DIFFICULTIES_COLORS[type] }}>
{stars ? <span className="h-full block brightness-[.25]">★ {stars}</span> : <span className="h-full brightness-[.25] leading-4 pb-[2px] capitalize">{parseDiffLabel(type)}</span>}
</span>
<span className="text-sm leading-4 pb-[2px] capitalize">{parseDiffLabel(name)}</span>
</li>
))}
</ol>
))}
</motion.ul>
)}
</AnimatePresence>
<div className="h-full w-full relative pl-[100px] rounded-md overflow-hidden flex flex-row justify-end">
<div className={`absolute top-0 left-0 h-full aspect-square cursor-pointer ${showOwned && "border-l-[5px]"}`} style={{ borderColor: showOwned && color }}>
<BsmImage className="w-full h-full object-cover" image={coverUrl} placeholder={defaultImage} errorImage={defaultImage} loading="lazy" />
@@ -191,8 +191,8 @@ export const MapItem = memo(({ hash, title, autor, songAutor, coverUrl, songUrl,
</span>
</div>
<div className="relative h-full w-full z-[1] rounded-md overflow-hidden -translate-x-1" ref={ref}>
<BsmImage className="absolute top-0 left-0 w-full h-full -z-[1] object-cover" image={coverUrl} placeholder={defaultImage} errorImage={defaultImage} loading="lazy" />
<div className="pt-1 pl-2 pr-7 top-0 left-0 w-full h-full bg-gray-600 bg-opacity-80 flex flex-col justify-between group-hover:bg-main-color-1 group-hover:bg-opacity-80">
<BsmImage className="absolute top-0 left-0 w-full h-full -z-[1] object-cover saturate-200" image={coverUrl} placeholder={defaultImage} errorImage={defaultImage} loading="lazy" />
<div className="pt-1 pl-2 pr-7 top-0 left-0 w-full h-full bg-neutral-600 bg-opacity-80 flex flex-col justify-between group-hover:bg-main-color-1 group-hover:bg-opacity-80">
<h1 className="font-bold whitespace-nowrap text-ellipsis overflow-hidden w-full leading-5 tracking-wide text-lg" title={title}>
<BsmLink className="hover:underline" href={mapUrl}>
{title}
@@ -240,52 +240,72 @@ export const MapItem = memo(({ hash, title, autor, songAutor, coverUrl, songUrl,
</motion.div>
</div>
</div>
<div className="absolute bg-light-main-color-1 dark:bg-main-color-3 top-0 h-full z-[1] w-[30px] -right-5 group-hover:right-0 transition-all">
<div className="absolute bg-light-main-color-3 dark:bg-main-color-3 top-0 h-full z-[1] w-[30px] -right-5 group-hover:right-0 transition-all">
<span className="absolute w-[10px] h-[10px] top-0 right-full bg-inherit" style={{ clipPath: 'path("M11 -1 L11 10 L10 10 A10 10 0 0 0 0 0 L0 -1 Z")' }} />
<span className="absolute w-[10px] h-[10px] bottom-0 right-full bg-inherit" style={{ clipPath: 'path("M11 11 L11 0 L10 0 A10 10 0 0 1 0 10 L 0 11 Z")' }} />
<div className="flex flex-col justify-center items-center gap-1 w-full h-full overflow-hidden opacity-0 group-hover:opacity-100">
{onDelete && !downloading && (
<BsmButton
className="w-6 h-6 p-[2px] rounded-md !bg-inherit hover:!bg-light-main-color-2 hover:dark:!bg-main-color-2"
iconClassName="w-full h-full brightness-75 dark:brightness-200"
iconColor={color}
icon="trash"
withBar={false}
onClick={e => {
e.stopPropagation();
onDelete(callBackParam);
}}
/>
<Tippy content={t("maps.map-item.delete")} placement="left" theme="default">
<div>
<BsmButton
className="w-6 h-6 p-[2px] rounded-md !bg-inherit hover:!bg-light-main-color-2 hover:dark:!bg-main-color-2"
iconClassName="w-full h-full brightness-75 dark:brightness-200"
iconColor={color}
icon="trash"
withBar={false}
onClick={e => {
e.stopPropagation();
onDelete(callBackParam);
}}
/>
</div>
</Tippy>
)}
{onDownload && !downloading && (
<BsmButton
className="w-6 h-6 p-[2px] rounded-md !bg-inherit hover:!bg-light-main-color-2 hover:dark:!bg-main-color-2"
iconClassName="w-full h-full brightness-75 dark:brightness-200"
iconColor={color}
icon="download"
withBar={false}
onClick={e => {
e.stopPropagation();
onDownload(callBackParam);
}}
/>
<Tippy content={t("maps.map-item.download")} placement="left" theme="default">
<div>
<BsmButton
className="w-6 h-6 p-[2px] rounded-md !bg-inherit hover:!bg-light-main-color-2 hover:dark:!bg-main-color-2"
iconClassName="w-full h-full brightness-75 dark:brightness-200"
iconColor={color}
icon="download"
withBar={false}
onClick={e => {
e.stopPropagation();
onDownload(callBackParam);
}}
/>
</div>
</Tippy>
)}
{onCancelDownload && !downloading && (
<BsmButton
className="w-6 h-6 p-1 rounded-md !bg-inherit hover:!bg-light-main-color-2 hover:dark:!bg-main-color-2"
iconClassName="w-full h-full brightness-75 dark:brightness-200"
iconColor="red"
icon="cross"
withBar={false}
onClick={e => {
e.stopPropagation();
onCancelDownload(callBackParam);
}}
/>
<Tippy content={t("maps.map-item.cancel-download")} placement="left" theme="default">
<div>
<BsmButton
className="w-6 h-6 p-1 rounded-md !bg-inherit hover:!bg-light-main-color-2 hover:dark:!bg-main-color-2"
iconClassName="w-full h-full brightness-75 dark:brightness-200"
iconColor="red"
icon="cross"
withBar={false}
onClick={e => {
e.stopPropagation();
onCancelDownload(callBackParam);
}}
/>
</div>
</Tippy>
)}
{downloading && <BsmBasicSpinner className="w-6 h-6 p-1 rounded-md !bg-inherit hover:!bg-light-main-color-2 hover:dark:!bg-main-color-2 flex items-center justify-center" spinnerClassName="brightness-75 dark:brightness-200" style={{ color }} thikness="3px" />}
{downloading &&
<Tippy content={t("maps.map-item.downloading")} placement="left" theme="default">
<div>
<BsmBasicSpinner className="w-6 h-6 p-1 rounded-md !bg-inherit hover:!bg-light-main-color-2 hover:dark:!bg-main-color-2 flex items-center justify-center" spinnerClassName="brightness-75 dark:brightness-200" style={{ color }} thikness="3px" />
</div>
</Tippy>
}
{previewUrl && (
<Tippy content={t("maps.map-item.preview")} placement="left" theme="default">
<div>
<BsmButton
className="w-6 h-6 p-[2px] rounded-md !bg-inherit hover:!bg-light-main-color-2 hover:dark:!bg-main-color-2"
iconClassName="w-full h-full brightness-75 dark:brightness-200"
@@ -297,8 +317,12 @@ export const MapItem = memo(({ hash, title, autor, songAutor, coverUrl, songUrl,
openPreview();
}}
/>
</div>
</Tippy>
)}
{mapId && (
<Tippy content={t("maps.map-item.bsr-code")} placement="left" theme="default">
<div>
<BsmButton
className="w-6 h-6 p-1 rounded-md !bg-inherit hover:!bg-light-main-color-2 hover:dark:!bg-main-color-2"
iconClassName="w-full h-full brightness-75 dark:brightness-200"
@@ -310,6 +334,8 @@ export const MapItem = memo(({ hash, title, autor, songAutor, coverUrl, songUrl,
copyBsr();
}}
/>
</div>
</Tippy>
)}
</div>
</div>
src/renderer/components/maps-mangement-components/maps-playlists-panel.component.tsx
+45 -72
View File
@@ -1,24 +1,22 @@
import { DetailedHTMLProps, useEffect, useRef, useState } from "react";
import { useEffect, useRef, useState } from "react";
import { BSVersion } from "shared/bs-version.interface";
import { TabNavBar } from "../shared/tab-nav-bar.component";
import { LocalMapsListPanel } from "./local-maps-list-panel.component";
import { BsmDropdownButton, DropDownItem } from "../shared/bsm-dropdown-button.component";
import { FilterPanel } from "./filter-panel.component";
import { MapFilter } from "shared/models/maps/beat-saver.model";
import { useThemeColor } from "renderer/hooks/use-theme-color.hook";
import { MapsManagerService } from "renderer/services/maps-manager.service";
import { motion, Variants } from "framer-motion";
import { MapsDownloaderService } from "renderer/services/maps-downloader.service";
import { BsmImage } from "../shared/bsm-image.component";
import wipGif from "../../../../assets/images/gifs/wip.gif";
import { OsDiagnosticService } from "renderer/services/os-diagnostic.service";
import { useObservable } from "renderer/hooks/use-observable.hook";
import { BsmIcon } from "../svgs/bsm-icon.component";
import { useTranslation } from "renderer/hooks/use-translation.hook";
import { LinkButton } from "./link-button.component";
import { debounceTime } from "rxjs/operators";
import { VersionFolderLinkerService, VersionLinkerActionListener } from "renderer/services/version-folder-linker.service";
import { FolderLinkState, VersionFolderLinkerService, VersionLinkerActionListener } from "renderer/services/version-folder-linker.service";
import { useService } from "renderer/hooks/use-service.hook";
import { BsContentTabPanel } from "../shared/bs-content-tab-panel/bs-content-tab-panel.component";
import { BsmButton } from "../shared/bsm-button.component";
import { MapIcon } from "../svgs/icons/map-icon.component";
import { PlaylistIcon } from "../svgs/icons/playlist-icon.component";
import { useObservable } from "renderer/hooks/use-observable.hook";
import { of } from "rxjs";
type Props = {
version?: BSVersion;
@@ -29,7 +27,6 @@ export function MapsPlaylistsPanel({ version, isActive }: Props) {
const mapsService = useService(MapsManagerService);
const mapsDownloader = useService(MapsDownloaderService);
const osDiagnostic = useService(OsDiagnosticService);
const linker = useService(VersionFolderLinkerService);
const [tabIndex, setTabIndex] = useState(0);
@@ -37,9 +34,7 @@ export function MapsPlaylistsPanel({ version, isActive }: Props) {
const [mapSearch, setMapSearch] = useState("");
const [playlistSearch, setPlaylistSearch] = useState("");
const [mapsLinked, setMapsLinked] = useState(false);
const [linkingPending, setLinkingPending] = useState(false);
const isOnline = useObservable(osDiagnostic.isOnline$);
const color = useThemeColor("first-color");
const mapsLinkedState = useObservable(() => version ? mapsService.$mapsFolderLinkState(version) : of(null), FolderLinkState.Unlinked, [version]);
const t = useTranslation();
const mapsRef = useRef<any>();
@@ -50,8 +45,6 @@ export function MapsPlaylistsPanel({ version, isActive }: Props) {
loadMapIsLinked();
const sub = mapsService.$mapsLinkingPending(version).pipe(debounceTime(50)).subscribe(setLinkingPending);
const onMapsLinked: VersionLinkerActionListener = action => {
if (!action.relativeFolder.includes(MapsManagerService.RELATIVE_MAPS_FOLDER)) {
return;
@@ -63,7 +56,6 @@ export function MapsPlaylistsPanel({ version, isActive }: Props) {
linker.onVersionFolderUnlinked(onMapsLinked);
return () => {
sub.unsubscribe();
linker.removeVersionFolderLinkedListener(onMapsLinked);
linker.removeVersionFolderUnlinkedListener(onMapsLinked);
};
@@ -80,6 +72,10 @@ export function MapsPlaylistsPanel({ version, isActive }: Props) {
return setPlaylistSearch(() => value);
};
const handleMapsAddClick = () => {
mapsDownloader.openDownloadMapModal(version, mapsRef.current.getMaps?.());
};
const handleMapsLinkClick = () => {
if (!mapsLinked) {
return mapsService.linkVersion(version);
@@ -87,56 +83,6 @@ export function MapsPlaylistsPanel({ version, isActive }: Props) {
return mapsService.unlinkVersion(version);
};
const handleMapsAddClick = () => {
mapsDownloader.openDownloadMapModal(version, mapsRef.current.getMaps?.());
};
const renderTab = (props: DetailedHTMLProps<React.HTMLAttributes<HTMLLIElement>, HTMLLIElement>, text: string, index: number): JSX.Element => {
const onClickLink = (index: number) => {
if (index === 0) {
handleMapsLinkClick();
}
};
const onClickAdd = (index: number) => {
if (index === 0) {
handleMapsAddClick();
}
};
const variants: Variants = { hover: { rotate: 22.5 }, tap: { rotate: 45 } };
return (
<li className="relative text-center text-lg font-bold hover:backdrop-brightness-75 flex justify-center items-center content-center" onClick={props.onClick}>
<span className="text-main-color-1 dark:text-gray-200">{text}</span>
{index === 0 && (
<div className="h-full flex absolute right-0 top-0 gap-1.5 items-center pr-2">
{isOnline && (
<motion.div
whileHover="hover"
whileTap="tap"
className="relative h-[calc(100%-5px)] flex flex-row justify-center items-center shrink-0 rounded-full overflow-hidden pr-2"
style={{ color }}
onClick={e => {
e.stopPropagation();
onClickAdd(index);
}}
tabIndex={-1}
>
<span className="absolute top-0 left-0 h-full w-full brightness-50 opacity-75 dark:opacity-20 dark:filter-none" style={{ backgroundColor: "currentcolor" }} />
<motion.div className="h-full p-0.5" variants={variants}>
<BsmIcon className="block h-full aspect-square brightness-150" icon="add" />
</motion.div>
<span className="text-sm brightness-150">{t("misc.add")}</span>
</motion.div>
)}
{!!version && <LinkButton variants={variants} disabled={linkingPending} whileHover="hover" whileTap="tap" initial={{ rotate: 0 }} className="block p-0.5 h-[calc(100%-5px)] aspect-square blur-0 hover:brightness-75" linked={mapsLinked} title={mapsLinked ? "pages.version-viewer.maps.tabs.maps.actions.link-maps.tooltips.unlink" : "pages.version-viewer.maps.tabs.maps.actions.link-maps.tooltips.link"} onClick={() => onClickLink(index)} />}
</div>
)}
</li>
);
};
const dropDownItems = ((): DropDownItem[] => {
if (tabIndex === 1) {
return [];
@@ -150,6 +96,15 @@ export function MapsPlaylistsPanel({ version, isActive }: Props) {
return (
<div className="w-full h-full flex flex-col items-center justify-center gap-4">
<nav className="w-full shrink-0 flex h-9 justify-center px-40 gap-2 text-main-color-1 dark:text-white">
<BsmButton
className="flex items-center justify-center w-fit rounded-full px-2 py-1 font-bold"
icon="add"
text="misc.add"
typeColor="primary"
withBar={false}
disabled={tabIndex === 1}
onClick={handleMapsAddClick}
/>
<div className="h-full rounded-full bg-light-main-color-2 dark:bg-main-color-2 grow p-[6px]">
<input type="text" className="h-full w-full bg-light-main-color-1 dark:bg-main-color-1 rounded-full px-2" placeholder={t("pages.version-viewer.maps.search-bar.search-placeholder")} value={tabIndex === 0 ? mapSearch : playlistSearch} onChange={e => handleSearch(e.target.value)} tabIndex={-1} />
</div>
@@ -158,16 +113,34 @@ export function MapsPlaylistsPanel({ version, isActive }: Props) {
</BsmDropdownButton>
<BsmDropdownButton className="h-full flex aspect-square relative rounded-full z-[1] bg-light-main-color-1 dark:bg-main-color-3" buttonClassName="rounded-full h-full w-full p-[6px]" icon="three-dots" withBar={false} items={dropDownItems} menuTranslationY="6px" align="center" />
</nav>
<div className="w-full h-full flex flex-col bg-light-main-color-3 dark:bg-main-color-2 rounded-md shadow-black shadow-md overflow-hidden">
<TabNavBar className="!rounded-none shadow-sm" tabIndex={tabIndex} tabsText={["misc.maps", "misc.playlists"]} onTabChange={setTabIndex} renderTab={renderTab} />
<div className="w-full grow min-h-0 flex flex-row items-center transition-transform duration-300" style={{ transform: `translate(${-(tabIndex * 100)}%, 0)` }}>
<BsContentTabPanel
tabIndex={tabIndex}
onTabChange={index => setTabIndex(index)}
tabs={[
{
text: "misc.maps",
icon: MapIcon,
onClick: () => setTabIndex(0),
linkProps: version ? {
state: mapsLinkedState,
onClick: handleMapsLinkClick,
} : null,
},
{
text: "misc.playlists",
icon: PlaylistIcon,
onClick: () => setTabIndex(1),
},
]}
>
<>
<LocalMapsListPanel isActive={isActive && tabIndex === 0} ref={mapsRef} className="w-full h-full shrink-0 flex flex-col" version={version} filter={mapFilter} search={mapSearch} linked={mapsLinked} />
<div className="w-full h-full shrink-0 flex flex-col justify-center items-center content-center gap-2 overflow-hidden text-gray-800 dark:text-gray-200">
<BsmImage className="rounded-md" image={wipGif} />
<span>Coming soon</span>
</div>
</div>
</div>
</>
</BsContentTabPanel>
</div>
);
}
src/renderer/components/maps-mangement-components/maps-row.component.tsx
+24 -8
View File
@@ -16,13 +16,10 @@ type Props = {
};
export const MapsRow = memo(({ maps, style, selectedMaps$, onMapSelect, onMapDelete }: Props) => {
const selectedMaps = useObservable<BsmLocalMap[]>(
selectedMaps$.pipe(
const selectedMaps = useObservable<BsmLocalMap[]>(() => selectedMaps$.pipe(
map(selectedMaps => selectedMaps.filter(selected => maps.some(map => map.hash === selected.hash))),
distinctUntilChanged(equal)
),
[]
);
distinctUntilChanged(equal),
), []);
const extractMapDiffs = (map: BsmLocalMap): Map<BsvMapCharacteristic, ParsedMapDiff[]> => {
const res = new Map<BsvMapCharacteristic, ParsedMapDiff[]>();
@@ -48,11 +45,30 @@ export const MapsRow = memo(({ maps, style, selectedMaps$, onMapSelect, onMapDel
};
const renderMapItem = (map: BsmLocalMap) => {
return <MapItem key={map.hash} hash={map.hash} title={map.rawInfo._songName} coverUrl={map.coverUrl} songUrl={map.songUrl} autor={map.rawInfo._levelAuthorName} songAutor={map.rawInfo._songAuthorName} bpm={map.rawInfo._beatsPerMinute} duration={map.bsaverInfo?.metadata?.duration} selected={selectedMaps.some(selected => selected.hash === map.hash)} diffs={extractMapDiffs(map)} mapId={map.bsaverInfo?.id} ranked={map.bsaverInfo?.ranked} autorId={map.bsaverInfo?.uploader?.id} likes={map.bsaverInfo?.stats?.upvotes} createdAt={map.bsaverInfo?.createdAt} onDelete={onMapDelete} onSelected={onMapSelect} callBackParam={map} />;
return <MapItem
key={map.hash}
hash={map.hash}
title={map.rawInfo._songName}
coverUrl={map.coverUrl}
songUrl={map.songUrl}
autor={map.rawInfo._levelAuthorName}
songAutor={map.rawInfo._songAuthorName}
bpm={map.rawInfo._beatsPerMinute}
duration={map.bsaverInfo?.metadata?.duration}
selected={selectedMaps.some(selected => selected.hash === map.hash)}
diffs={extractMapDiffs(map)} mapId={map.bsaverInfo?.id}
ranked={map.bsaverInfo?.ranked}
autorId={map.bsaverInfo?.uploader?.id}
likes={map.bsaverInfo?.stats?.upvotes}
createdAt={map.bsaverInfo?.createdAt}
onDelete={onMapDelete}
onSelected={onMapSelect}
callBackParam={map}
/>;
};
return (
<ul className="h-fit w-full flex flex-nowrap basis-0 gap-x-[8px] py-1 px-3" style={style}>
<ul className="h-fit w-full flex flex-nowrap basis-0 gap-x-2 p-2" style={style}>
{maps?.map(renderMapItem)}
</ul>
);
src/renderer/components/modal/modal-types/bs-downgrade/login-to-steam-modal.component.tsx
+1 -1
View File
@@ -21,7 +21,7 @@ export const LoginToSteamModal: ModalComponent<
const [password, setPassword] = useState("");
const [stay, setStay] = useState(false);
const [showPassword, setShowPassword] = useState(false);
const qrCodeUrl = useObservable(data.qrCode$);
const qrCodeUrl = useObservable(() => data.qrCode$);
const t = useTranslation();
useEffect(() => {
src/renderer/components/modal/modal-types/download-maps-modal.component.tsx
+3 -3
View File
@@ -27,8 +27,8 @@ export const DownloadMapsModal: ModalComponent<void, { version: BSVersion; owned
const progressBar = useService(ProgressBarService);
const os = useService(OsDiagnosticService);
const currentDownload = useObservable(mapsDownloader.currentMapDownload$);
const mapsInQueue = useObservable(mapsDownloader.mapsInQueue$);
const currentDownload = useObservable(() => mapsDownloader.currentMapDownload$);
const mapsInQueue = useObservable(() => mapsDownloader.mapsInQueue$);
const t = useTranslation();
const filterContainerRef = useRef(null);
const [filter, setFilter] = useState<MapFilter>({});
@@ -37,7 +37,7 @@ export const DownloadMapsModal: ModalComponent<void, { version: BSVersion; owned
const [sortOrder, setSortOrder] = useState<SearchOrder>(BSV_SORT_ORDER.at(0));
const [ownedMapHashs, setOwnedMapHashs] = useState<string[]>(ownedMaps?.map(map => map.hash) ?? []);
const [loading, setLoading] = useState(false);
const isOnline = useObservable(os.isOnline$);
const isOnline = useObservable(() => os.isOnline$);
const [searchParams, setSearchParams] = useState<SearchParams>({
sortOrder,
filter,
src/renderer/components/modal/modal-types/models/download-models-modal.component.tsx
+3 -3
View File
@@ -44,10 +44,10 @@ export const DownloadModelsModal: ModalComponent<void, { version: BSVersion; typ
}))
);
const currentDownload = useObservable(modelsDownloader.currentDownload$(), null);
const downloadQueue = useObservable(modelsDownloader.getQueue$(), []);
const currentDownload = useObservable(() => modelsDownloader.currentDownload$(), null);
const downloadQueue = useObservable(() => modelsDownloader.getQueue$(), []);
const [msModels, msModels$] = useBehaviorSubject<MSModel[]>([]);
const isOnline = useObservable(os.isOnline$, true);
const isOnline = useObservable(() => os.isOnline$, true);
const [error, error$] = useBehaviorSubject(false);
const [isLoading, isLoading$] = useBehaviorSubject(false);
const [ownedModels, setOwnedModels] = useState<BsmLocalModel[]>(owned ?? []);
src/renderer/components/modal/modal-types/share-folders-modal.component.tsx
+12 -31
View File
@@ -1,5 +1,4 @@
import Tippy from "@tippyjs/react";
import { Variants } from "framer-motion";
import { useEffect, useState } from "react";
import { LinkButton } from "renderer/components/maps-mangement-components/link-button.component";
import { BsmBasicSpinner } from "renderer/components/shared/bsm-basic-spinner/bsm-basic-spinner.component";
@@ -12,7 +11,7 @@ import { BSVersionManagerService } from "renderer/services/bs-version-manager.se
import { ConfigurationService } from "renderer/services/configuration.service";
import { IpcService } from "renderer/services/ipc.service";
import { ModalComponent } from "renderer/services/modale.service";
import { VersionFolderLinkerService, VersionLinkerActionType } from "renderer/services/version-folder-linker.service";
import { FolderLinkState, VersionFolderLinkerService, VersionLinkerActionType } from "renderer/services/version-folder-linker.service";
import { BSVersion } from "shared/bs-version.interface";
export const ShareFoldersModal: ModalComponent<void, BSVersion> = ({ data }) => {
@@ -107,33 +106,12 @@ const FolderItem = ({ version, relativeFolder, onDelete }: FolderProps) => {
const t = useTranslation();
const name = relativeFolder.split(window.electron.path.sep).at(-1);
const color = useThemeColor("first-color");
const variants: Variants = {
hover: { rotate: 22.5 },
tap: { rotate: 45 },
};
const pending = useObservable(linker.isPending(version, relativeFolder));
const processing = useObservable(linker.isProcessing(version, relativeFolder));
const linkDisabled = pending || processing;
const [linked, setLinked] = useState(false);
useEffect(() => {
if (pending) {
return;
}
loadFolderIsLinked();
}, [version, relativeFolder, pending]);
const loadFolderIsLinked = () => {
linker.isVersionFolderLinked(version, relativeFolder).toPromise().then(setLinked);
};
const state = useObservable(() => linker.$folderLinkedState(version, relativeFolder), FolderLinkState.Unlinked, [version, relativeFolder]);
const name = relativeFolder.split(window.electron.path.sep).at(-1);
const onClickLink = () => {
if (linked) {
if (state === FolderLinkState.Linked) {
return linker.unlinkVersionFolder({
version,
relativeFolder,
@@ -150,7 +128,6 @@ const FolderItem = ({ version, relativeFolder, onDelete }: FolderProps) => {
const cancelLink = () => {
linker.cancelAction(version, relativeFolder);
loadFolderIsLinked();
};
return (
@@ -159,14 +136,18 @@ const FolderItem = ({ version, relativeFolder, onDelete }: FolderProps) => {
{name}
</span>
<div className="flex flex-row gap-1.5">
<Tippy placement="left" content={t(`modals.shared-folders.buttons.${linked ? "unlink-folder" : "link-folder"}`)} arrow={false}>
<LinkButton variants={variants} linked={linked} disabled={linkDisabled} whileHover="hover" whileTap="tap" className="p-0.5 h-7 shrink-0 aspect-square blur-0 cursor-pointer hover:brightness-75" onClick={onClickLink} />
<Tippy placement="left" content={t(`modals.shared-folders.buttons.${state === FolderLinkState.Linked ? "unlink-folder" : "link-folder"}`)} arrow={false}>
<LinkButton
className="p-0.5 h-7 shrink-0 aspect-square blur-0 cursor-pointer hover:brightness-75"
state={state}
onClick={onClickLink}
/>
</Tippy>
{(() => {
if (processing) {
if (state === FolderLinkState.Processing) {
return <BsmBasicSpinner className="aspect-square h-7 rounded-md p-1 dark:bg-main-color-2" thikness="3.5px" style={{ color }} />;
}
if (pending) {
if (state === FolderLinkState.Pending) {
return (
<BsmButton
className="aspect-square h-7 rounded-md p-1"
src/renderer/components/modal/modal.component.tsx
+1 -1
View File
@@ -8,7 +8,7 @@ import { BsmIcon } from "../svgs/bsm-icon.component";
export function Modal() {
const modalSevice = ModalService.getInstance();
const ModalComponent = useObservable(modalSevice.getModalToShow());
const ModalComponent = useObservable(() => modalSevice.getModalToShow());
const modalData = modalSevice.getModalData();
const resolver = modalSevice.getResolver();
src/renderer/components/models-management/models-panel.component.tsx
+68 -16
View File
@@ -1,6 +1,5 @@
import { BSVersion } from "shared/bs-version.interface";
import { useRef, useState } from "react";
import { ModelsTabsNavbar } from "./models-tabs-navbar.component";
import { ModelsGrid } from "./models-grid.component";
import { MSModelType } from "shared/models/models/model-saber.model";
import { BsmDropdownButton, DropDownItem } from "../shared/bsm-dropdown-button.component";
@@ -14,6 +13,16 @@ import { NotificationService } from "renderer/services/notification.service";
import { ConfigurationService } from "renderer/services/configuration.service";
import { useTranslation } from "renderer/hooks/use-translation.hook";
import { lt } from "semver";
import { lastValueFrom, of, take } from "rxjs";
import { FolderLinkState } from "renderer/services/version-folder-linker.service";
import { BsContentTabItemProps } from "../shared/bs-content-tab-panel/bs-content-tab-item.component";
import { BsContentTabPanel } from "../shared/bs-content-tab-panel/bs-content-tab-panel.component";
import { ModelTypeAvatarIcon } from "../svgs/icons/model-type-avatar-icon.component";
import { SvgIcon } from "../svgs/svg-icon.type";
import { ModelTypeSaberIcon } from "../svgs/icons/model-type-saber-icon.component";
import { ModelTypePlatformIcon } from "../svgs/icons/model-type-platform-icon.component";
import { ModelTypeBloqIcon } from "../svgs/icons/model-type-bloq-icon.component";
import { useObservable } from "renderer/hooks/use-observable.hook";
export function ModelsPanel({ version, isActive, goToMods }: { version?: BSVersion; isActive: boolean; goToMods?: () => void }) {
const modelsManager = useService(ModelsManagerService);
@@ -29,9 +38,15 @@ export function ModelsPanel({ version, isActive, goToMods }: { version?: BSVersi
const [modelTypeTab, setModelTypeTab] = useState<MSModelType>(MSModelType.Avatar);
const [currentTabIndex, setCurrentTabIndex] = useState<number>(0);
const [search, setSearch] = useState<string>("");
const modelsLinkStats = {
[MSModelType.Avatar]: useObservable(() => version ? modelsManager.$modelsLinkingState(version, MSModelType.Avatar) : of(null), FolderLinkState.Unlinked, [version]),
[MSModelType.Saber]: useObservable(() => version ? modelsManager.$modelsLinkingState(version, MSModelType.Saber) : of(null), FolderLinkState.Unlinked, [version]),
[MSModelType.Platfrom]: useObservable(() => version ? modelsManager.$modelsLinkingState(version, MSModelType.Platfrom) : of(null), FolderLinkState.Unlinked, [version]),
[MSModelType.Bloq]: useObservable(() => version ? modelsManager.$modelsLinkingState(version, MSModelType.Bloq) : of(null), FolderLinkState.Unlinked, [version]),
}
useOnUpdate(() => {
if (!isActive || !goToMods) {
return;
@@ -93,6 +108,44 @@ export function ModelsPanel({ version, isActive, goToMods }: { version?: BSVersi
{ text: "models.panel.actions.drop-down.delete", onClick: deleteModels, icon: "trash" },
];
const getModelTabProps = (model: MSModelType): BsContentTabItemProps => {
const onClick = async () => {
const state = await lastValueFrom(modelsManager.$modelsLinkingState(version, model).pipe(take(1)));
if (state === FolderLinkState.Pending || state === FolderLinkState.Processing) { return; }
if (state === FolderLinkState.Linked) {
modelsManager.unlinkModels(model, version);
} else {
modelsManager.linkModels(model, version);
}
}
const getModelIcon = (model: MSModelType): SvgIcon => {
switch (model) {
case MSModelType.Avatar:
return ModelTypeAvatarIcon;
case MSModelType.Saber:
return ModelTypeSaberIcon;
case MSModelType.Platfrom:
return ModelTypePlatformIcon;
case MSModelType.Bloq:
return ModelTypeBloqIcon;
default:
return ModelTypeAvatarIcon;
}
}
return {
text: `models.types.plural.${model}`,
icon: getModelIcon(model),
onClick: () => setModelTypeTab(model),
linkProps: version ? {
onClick,
state: modelsLinkStats[model],
} : null
}
};
return (
<div ref={ref} className="w-full h-full flex flex-col items-center justify-center gap-4">
<div className="w-full shrink-0 flex h-9 justify-center px-40 gap-2 text-main-color-1 dark:text-white">
@@ -112,24 +165,23 @@ export function ModelsPanel({ version, isActive, goToMods }: { version?: BSVersi
</div>
<BsmDropdownButton items={threeDotsItems} className="h-full flex aspect-square relative rounded-full z-[1] bg-light-main-color-1 dark:bg-main-color-3" buttonClassName="rounded-full h-full w-full p-[6px]" icon="three-dots" withBar={false} menuTranslationY="6px" align="center" />
</div>
<div className="w-full h-full flex flex-row bg-light-main-color-3 dark:bg-main-color-2 rounded-md shadow-black shadow-md overflow-hidden">
<ModelsTabsNavbar
className="flex-shrink-0"
version={version}
tabIndex={currentTabIndex}
onTabChange={(index, tab) => {
setModelTypeTab(() => tab.extra);
setCurrentTabIndex(() => index);
}}
/>
<div className="flex-grow h-full flex flex-col transition-all duration-300" style={{ translate: `0 ${0 - currentTabIndex * 100}%` }}>
<BsContentTabPanel
tabIndex={currentTabIndex}
onTabChange={(index) => setCurrentTabIndex(index)}
tabs={[
getModelTabProps(MSModelType.Avatar),
getModelTabProps(MSModelType.Saber),
getModelTabProps(MSModelType.Platfrom),
getModelTabProps(MSModelType.Bloq),
]}
>
<>
<ModelsGrid ref={modelsGridRefs[0]} version={version} type={MSModelType.Avatar} active={isActive && modelTypeTab === MSModelType.Avatar} search={search} downloadModels={openDownloadModal} />
<ModelsGrid ref={modelsGridRefs[1]} version={version} type={MSModelType.Saber} active={isActive && modelTypeTab === MSModelType.Saber} search={search} downloadModels={openDownloadModal} />
<ModelsGrid ref={modelsGridRefs[2]} version={version} type={MSModelType.Platfrom} active={isActive && modelTypeTab === MSModelType.Platfrom} search={search} downloadModels={openDownloadModal} />
<ModelsGrid ref={modelsGridRefs[3]} version={version} type={MSModelType.Bloq} active={isActive && modelTypeTab === MSModelType.Bloq} search={search} downloadModels={openDownloadModal} />
</div>
</div>
</>
</BsContentTabPanel>
</div>
);
}
src/renderer/components/models-management/models-tabs-navbar.component.tsx
-87
View File
@@ -1,87 +0,0 @@
import { BSVersion } from "shared/bs-version.interface";
import { MSModelType } from "../../../shared/models/models/model-saber.model";
import { LinkButton } from "../maps-mangement-components/link-button.component";
import { useState } from "react";
import { useOnUpdate } from "renderer/hooks/use-on-update.hook";
import { ModelsManagerService } from "renderer/services/models-management/models-manager.service";
import { BsContentNavBar, BsContentNavBarTab } from "../shared/bs-content-nav-bar.component";
import { useConstant } from "renderer/hooks/use-constant.hook";
import { BsmIcon } from "../svgs/bsm-icon.component";
import { MODEL_TYPES } from "../../../shared/models/models/constants";
import { useService } from "renderer/hooks/use-service.hook";
import { useTranslation } from "renderer/hooks/use-translation.hook";
type Props = {
className?: string;
version?: BSVersion;
tabIndex: number;
onTabChange: (index: number, tab: BsContentNavBarTab<MSModelType>) => void;
};
export function ModelsTabsNavbar({ className, version, tabIndex, onTabChange }: Props) {
const tabs = useConstant<BsContentNavBarTab<MSModelType>[]>(() => {
return MODEL_TYPES.map(type => ({
text: type,
extra: type,
}));
});
return <BsContentNavBar className={`!rounded-none shadow-sm ${className ?? ""}`} tabIndex={tabIndex} onTabChange={onTabChange} tabs={tabs} renderTab={(props, tab, activeTab) => <ModelTab version={version} modelType={tab.extra} {...props} active={tab === activeTab} />} />;
}
type TabProps = {
version?: BSVersion;
modelType: MSModelType;
active?: boolean;
} & React.ComponentProps<"li">;
function ModelTab({ version, modelType, active, onClick }: TabProps) {
const modelsManager = useService(ModelsManagerService);
const t = useTranslation();
const [modelsAreLinked, setModelsAreLinked] = useState(false);
const [linkBtnDisabled, setLinkBtnDisabled] = useState(false);
useOnUpdate(() => {
if (!version) {
return;
}
const sub = modelsManager.$modelsLinkingPending(version, modelType).subscribe(async pending => {
if (pending) {
return setLinkBtnDisabled(() => pending);
}
const modelsLinked = await modelsManager.isModelsLinked(version, modelType);
setModelsAreLinked(() => modelsLinked);
setLinkBtnDisabled(() => pending);
});
return () => {
sub.unsubscribe();
};
}, [version]);
const linkModels = () => modelsManager.linkModels(modelType, version);
const unlinkModels = () => modelsManager.unlinkModels(modelType, version);
const onClickLink = () => {
if (!version) {
return Promise.resolve();
}
if (modelsAreLinked) {
return unlinkModels();
}
return linkModels();
};
return (
<li className={`relative w-full cursor-pointer flex-1 text-center text-lg font-bold flex justify-center items-center content-center px-7 dim-on-hover ${active ? "dim" : ""}`} onClick={onClick}>
<div className="flex flex-col gap-0.5 justify-start items-center text-main-color-1 dark:text-gray-200">
<BsmIcon icon={modelType} className="w-7 h-7" />
<span className=" font-thin italic text-xs">{t(`models.types.plural.${modelType}`)}</span>
</div>
<div className="flex items-center absolute top-1.5 left-1.5">{!!version && <LinkButton variants={{ hover: { rotate: 22.5 }, tap: { rotate: 45 } }} disabled={linkBtnDisabled} whileHover="hover" whileTap="tap" initial={{ rotate: 0 }} className="block w-6 h-6 aspect-square blur-0 cursor-pointer hover:brightness-75" linked={modelsAreLinked} title={modelsAreLinked ? "models.panel.actions.unlink-models" : "models.panel.actions.link-models"} onClick={onClickLink} />}</div>
</li>
);
}
src/renderer/components/nav-bar/bsmanager-icon.component.tsx
+1 -1
View File
@@ -12,7 +12,7 @@ export const BsManagerIcon = memo(({ className }: { className?: string }) => {
const audioPlayer = useService(AudioPlayerService);
const { firstColor, secondColor } = useThemeColor();
const playing = useObservable(audioPlayer.playing$);
const playing = useObservable(() => audioPlayer.playing$);
const { bpm } = audioPlayer;
src/renderer/components/nav-bar/nav-bar-items/shared-nav-bar-item.component.tsx
+1 -1
View File
@@ -12,7 +12,7 @@ export function SharedNavBarItem() {
const pageState = useService(PageStateService);
const t = useTranslation();
const route = useObservable(pageState.route$);
const route = useObservable(() => pageState.route$);
const color = useThemeColor("first-color");
return (
src/renderer/components/nav-bar/nav-bar.component.tsx
+2 -2
View File
@@ -19,8 +19,8 @@ export function NavBar() {
const versionManager = useService(BSVersionManagerService);
const versionDownloader = useService(BsDownloaderService);
const downloadingVersion = useObservable(versionDownloader.downloadingVersion$.pipe(distinctUntilChanged(equal)));
const installedVersions = useObservable(versionManager.installedVersions$);
const downloadingVersion = useObservable(() => versionDownloader.downloadingVersion$.pipe(distinctUntilChanged(equal)));
const installedVersions = useObservable(() => versionManager.installedVersions$);
const color = useThemeColor("first-color");
const t = useTranslation();
src/renderer/components/notification/notification-overlay.component.tsx
+1 -1
View File
@@ -7,7 +7,7 @@ import { useService } from "renderer/hooks/use-service.hook";
export function NotificationOverlay() {
const notificationService = useService(NotificationService);
const notifications = useObservable(notificationService.notifications$);
const notifications = useObservable(() => notificationService.notifications$);
return (
<ul className="absolute h-full w-0 top-0 right-0 z-[100] pt-10">
src/renderer/components/progress-bar/bsm-progress-bar.component.tsx
+3 -3
View File
@@ -9,9 +9,9 @@ import { useService } from "renderer/hooks/use-service.hook";
export function BsmProgressBar() {
const progressBarService = useService(ProgressBarService);
const progressData = useObservable(progressBarService.progressData$);
const visible = useObservable(progressBarService.visible$);
const style = useObservable(progressBarService.style$);
const progressData = useObservable(() => progressBarService.progressData$);
const visible = useObservable(() => progressBarService.visible$);
const style = useObservable(() => progressBarService.style$);
const progressLabel = (() => {
if (!progressData) {
src/renderer/components/progress-bar/text-progress-bar.component.tsx
+1 -1
View File
@@ -9,7 +9,7 @@ type Props = {
};
export default function TextProgressBar({ value$, className, style }: Props) {
const value = useObservable(value$);
const value = useObservable(() => value$);
const prefix = typeof value === "number" ? "%" : "";
src/renderer/components/settings/setting-radio-array.component.tsx
+1 -1
View File
@@ -21,7 +21,7 @@ export function SettingRadioArray<T>({ id, items, selectedItemId, selectedItemVa
return (
<div id={id} className="w-full flex gap-1.5" style={{flexDirection: direction}}>
{items.map(i => (
<div onClick={() => onItemSelected(i)} key={i.id} className={`py-3 w-full flex cursor-pointer justify-between items-center rounded-md px-2 transition-colors duration-200 ${isSelected(i) ? "bg-light-main-color-3 dark:bg-main-color-3" : "bg-light-main-color-1 dark:bg-main-color-1"} ${i.className}`}>
<div onClick={() => onItemSelected(i)} key={i.id} className={`py-3 w-full flex cursor-pointer justify-between items-center rounded-md px-2 transition-colors duration-300 ${isSelected(i) ? "bg-light-main-color-3 dark:bg-main-color-3" : "bg-light-main-color-1 dark:bg-main-color-1"} ${i.className}`}>
<div className="flex items-center">
<div className="h-5 rounded-full aspect-square border-2 border-gray-800 dark:border-white p-[3px] mr-2">
<motion.span initial={{ scale: 0 }} animate={{ scale: isSelected(i) ? 1 : 0 }} className="h-full w-full block bg-gray-800 dark:bg-white rounded-full" />
src/renderer/components/shared/bs-content-nav-bar.component.tsx
-30
View File
@@ -1,30 +0,0 @@
import { DetailedHTMLProps, Fragment } from "react";
import { BsmIconType } from "../svgs/bsm-icon.component";
type Props<T> = {
className?: string;
tabIndex: number;
tabs: BsContentNavBarTab<T>[];
renderTab: (props: DetailedHTMLProps<React.HTMLAttributes<any>, any>, tab?: BsContentNavBarTab<T>, activeTab?: BsContentNavBarTab<T>) => JSX.Element;
onTabChange?: (index: number, tab?: BsContentNavBarTab<T>) => void;
};
export type BsContentNavBarTab<T = unknown> = {
text: string;
icon?: BsmIconType;
extra?: T;
};
export function BsContentNavBar<T>({ className, tabIndex, tabs, renderTab, onTabChange }: Props<T>) {
const handleTabClick = (index: number) => {
onTabChange?.(index, tabs[index]);
};
return (
<nav className={`h-full grid grid-flow-row ${className ?? ""}`}>
{tabs.map((tab, i) => (
<Fragment key={JSON.stringify(tab)}>{renderTab({ onClick: () => handleTabClick(i) }, tab, tabs[tabIndex])}</Fragment>
))}
</nav>
);
}
src/renderer/components/shared/bs-content-tab-panel/bs-content-tab-item.component.tsx
+44
View File
@@ -0,0 +1,44 @@
import { LinkBtnProps, LinkButton } from "renderer/components/maps-mangement-components/link-button.component";
import { SvgIcon } from "renderer/components/svgs/svg-icon.type";
import { useTranslation } from "renderer/hooks/use-translation.hook";
export type BsContentTabItemProps<T = unknown> = {
text: string;
icon: SvgIcon;
active?: boolean;
value?: T;
linkProps?: LinkBtnProps;
onClick: (value?: T) => void;
};
type BsContentTabItemComponent<T = unknown> = ({text, icon, active, value, linkProps, onClick}: BsContentTabItemProps<T>) => JSX.Element;
export const BsContentTabItem: BsContentTabItemComponent = ({ text, icon: Icon, active, value, linkProps, onClick }) => {
const t = useTranslation();
const handleClick = (e: React.MouseEvent<HTMLLIElement, MouseEvent>) => {
e.preventDefault();
e.stopPropagation();
onClick(value);
}
return (
<li className={`relative w-full cursor-pointer flex-1 text-center text-lg font-bold flex justify-center items-center content-center px-7 bg-light-main-color-2 dark:bg-main-color-2 hover:bg-light-main-color-1 dark:hover:bg-main-color-1 ${active && "!bg-light-main-color-1 dark:!bg-main-color-1"}`} onClick={handleClick}>
<div className="flex flex-col gap-0.5 justify-start items-center text-main-color-1 dark:text-gray-200">
<Icon className="w-7 h-7"/>
<span className=" font-thin italic text-xs">{t(text)}</span>
</div>
{linkProps && (
<div className="flex items-center absolute top-1.5 left-1.5">
<LinkButton
state={linkProps.state}
className={linkProps.className ?? "block w-6 h-6 aspect-square blur-0 cursor-pointer hover:brightness-75"}
title={linkProps.title}
onClick={linkProps.onClick}
/>
</div>
)}
</li>
);
}
src/renderer/components/shared/bs-content-tab-panel/bs-content-tab-panel.component.tsx
+35
View File
@@ -0,0 +1,35 @@
import { useThemeColor } from "renderer/hooks/use-theme-color.hook";
import { LaserSlider } from "../laser-slider.component";
import { BsContentTabItem, BsContentTabItemProps } from "./bs-content-tab-item.component";
type Props<T = unknown> = Readonly<{
className?: string;
tabs: BsContentTabItemProps<T>[];
tabIndex: number;
onTabChange: (index: number, tab: BsContentTabItemProps<T>) => void;
children: JSX.Element;
}>;
export function BsContentTabPanel({className, tabIndex, tabs, onTabChange, children}: Props) {
const sliderColor = useThemeColor("second-color");
return (
<div className={className ?? "w-full h-full flex flex-row bg-light-main-color-1 dark:bg-main-color-1 rounded-md shadow-black shadow-md overflow-hidden"}>
<nav className="h-full grid grid-flow-row !rounded-none shadow-sm flex-shrink-0">
{tabs.map((tab, i) => (
<BsContentTabItem
key={`${tab.text}${tab.icon}`}
{...tab}
active={tab.active ?? tabIndex === i}
onClick={value => {onTabChange(i, tab); tab.onClick(value);}}
/>
))}
</nav>
<LaserSlider className="h-full w-1 relative shrink-0" mode="vertical" color={sliderColor} nbSteps={tabs.length} step={tabIndex}/>
<div className="flex-grow h-full flex flex-col transition-all duration-300" style={{ translate: `0 ${0 - tabIndex * 100}%` }}>
{children}
</div>
</div>
)
}
src/renderer/components/shared/iframe-view.component.tsx
+1 -1
View File
@@ -8,7 +8,7 @@ import { LinkOpenerService } from "renderer/services/link-opener.service";
export function BsmIframeView() {
const linkService = useService(LinkOpenerService);
const iframeUrl = useObservable(linkService.iframeLink$);
const iframeUrl = useObservable(() => linkService.iframeLink$);
const ref = useRef(null);
useClickOutside(ref, () => linkService.closeIframe());
src/renderer/components/shared/laser-slider.component.tsx
+35
View File
@@ -0,0 +1,35 @@
import { CSSProperties } from "react";
type Props = Readonly<{
mode: "horizontal" | "vertical";
color: string;
className?: string;
nbSteps: number;
step: number;
}>
export function LaserSlider({mode, color, className, nbSteps, step}: Props) {
const sliderStyle = ((): CSSProperties => {
if(mode === "vertical"){
return {
transform: `translate(0, ${step * 100}%)`,
height: `calc(100% / ${nbSteps})`,
width: "100%"
}
}
return {
transform: `translate(${step * 100}%, 0)`,
width: `calc(100% / ${nbSteps})`,
height: "100%"
}
})();
return (
<div className={className} style={{ color }}>
<span className="absolute h-full w-full bg-current brightness-50" />
<span className="absolute block bg-current transition-transform duration-300 shadow-center shadow-current" style={sliderStyle} />
</div>
)
}
src/renderer/components/shared/tab-nav-bar.component.tsx
+2 -4
View File
@@ -1,6 +1,7 @@
import { DetailedHTMLProps, Fragment } from "react";
import { useThemeColor } from "renderer/hooks/use-theme-color.hook";
import { useTranslation } from "renderer/hooks/use-translation.hook";
import { LaserSlider } from "./laser-slider.component";
type Props = {
tabIndex: number;
@@ -22,10 +23,7 @@ export function TabNavBar(props: Props) {
return (
<nav className={`relative h-8 shrink-0 cursor-pointer rounded-md overflow-hidden shadow-md shadow-black bg-light-main-color-2 dark:bg-main-color-2 ${props.className}`}>
<div className="absolute w-full h-1 bottom-0" style={{ color: secondColor }}>
<span className="absolute h-full w-full bg-current brightness-50" />
<span className="absolute h-full block bg-current transition-transform duration-300 shadow-center shadow-current" style={{ transform: `translate(${currentIndex * 100}%, 0)`, width: `calc(100% / ${props.tabsText.length})` }} />
</div>
<LaserSlider className="absolute w-full h-1 bottom-0" mode="horizontal" color={secondColor} nbSteps={props.tabsText.length} step={currentIndex} />
<ul className="grid" style={{ gridTemplateColumns: `repeat(${props.tabsText.length}, minmax(0, 1fr))` }}>
{props.tabsText.map((text, index) =>
props.renderTab ? (
src/renderer/components/svgs/bsm-icon.component.tsx
+2 -19
View File
@@ -56,20 +56,16 @@ import { RussianIcon } from "./flags/russian-icon.component";
import { ChineseIcon } from "./flags/chinese-icon.component";
import { ChineseTraditionalIcon } from "./flags/chineseTraditional-icon.component";
import { JapanIcon } from "./flags/japan-icon.component";
import { MSModelType } from "shared/models/models/model-saber.model";
import { ModelTypeAvatarIcon } from "./icons/model-type-avatar-icon.component";
import { ModelTypeSaberIcon } from "./icons/model-type-saber-icon.component";
import { ModelTypePlatformIcon } from "./icons/model-type-platform-icon.component";
import { ModelTypeBloqIcon } from "./icons/model-type-bloq-icon.component";
import { ChevronTopIcon } from "./icons/chevron-top-icon.component";
import { EyeCrossIcon } from "./icons/eye-cross-icon.component";
import { ShortcutIcon } from "./icons/shortcut-icon.component";
import { BackupRestoreIcon } from "./icons/backup-restore-icon.component";
export type BsmIconType = BsvMapCharacteristic | MSModelType | ("settings" | "trash" | "favorite" | "folder" | "bsNote" | "check" | "three-dots" | "twitch" | "eye" | "play" | "checkCircleIcon" | "discord" | "info" | "eye-cross" | "terminal" | "desktop" | "oculus" | "add" | "cross" | "task" | "github" | "close" | "thumbUpFill" | "timerFill" | "pause" | "twitter" | "sync" | "chevron-top" | "copy" | "steam" | "edit" | "export" | "patreon" | "search" | "bsMapDifficulty" | "link" | "unlink" | "download" | "filter" | "mee6" | "volume-up" | "volume-off" | "volume-down" | "shortcut" | "backup-restore" | "fr-FR-flag" | "es-ES-flag" | "en-US-flag" | "en-EN-flag" | "de-DE-flag" | "ru-RU-flag" | "zh-CN-flag" | "zh-TW-flag" | "ja-JP-flag");
export type BsmIconType = BsvMapCharacteristic | ("settings" | "trash" | "favorite" | "folder" | "bsNote" | "check" | "three-dots" | "twitch" | "eye" | "play" | "checkCircleIcon" | "discord" | "info" | "eye-cross" | "terminal" | "desktop" | "oculus" | "add" | "cross" | "task" | "github" | "close" | "thumbUpFill" | "timerFill" | "pause" | "twitter" | "sync" | "chevron-top" | "copy" | "steam" | "edit" | "export" | "patreon" | "search" | "bsMapDifficulty" | "link" | "unlink" | "download" | "filter" | "mee6" | "volume-up" | "volume-off" | "volume-down" | "shortcut" | "backup-restore" | "fr-FR-flag" | "es-ES-flag" | "en-US-flag" | "en-EN-flag" | "de-DE-flag" | "ru-RU-flag" | "zh-CN-flag" | "zh-TW-flag" | "ja-JP-flag");
export const BsmIcon = memo(({ className, icon, style }: { className?: string; icon: BsmIconType; style?: CSSProperties }) => {
// TODO : Very ugly very messy, need to find a better way to do this
// the rework have started, see `svg-icon.type.ts`
const renderIcon = () => {
if (icon === "settings") {
@@ -254,19 +250,6 @@ export const BsmIcon = memo(({ className, icon, style }: { className?: string; i
if (icon === "backup-restore") {
return <BackupRestoreIcon className={className} style={style} />;
}
if (icon === MSModelType.Avatar) {
return <ModelTypeAvatarIcon className={className} style={style} />;
}
if (icon === MSModelType.Saber) {
return <ModelTypeSaberIcon className={className} style={style} />;
}
if (icon === MSModelType.Platfrom) {
return <ModelTypePlatformIcon className={className} style={style} />;
}
if (icon === MSModelType.Bloq) {
return <ModelTypeBloqIcon className={className} style={style} />;
}
return <TrashIcon className={className} style={style} />;
};
src/renderer/components/svgs/icons/map-icon.component.tsx
+9
View File
@@ -0,0 +1,9 @@
import { createSvgIcon } from "../svg-icon.type";
export const MapIcon = createSvgIcon((props, ref) => {
return (
<svg ref={ref} {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="currentColor">
<path d="m574-129-214-75-186 72q-10 4-19.5 2.5T137-136q-8-5-12.5-13.5T120-169v-561q0-13 7.5-23t20.5-15l186-63q6-2 12.5-3t13.5-1q7 0 13.5 1t12.5 3l214 75 186-72q10-4 19.5-2.5T823-824q8 5 12.5 13.5T840-791v561q0 13-7.5 23T812-192l-186 63q-6 2-12.5 3t-13.5 1q-7 0-13.5-1t-12.5-3Zm-14-89v-468l-160-56v468l160 56Z"/>
</svg>
)
});
src/renderer/components/svgs/icons/model-type-avatar-icon.component.tsx
+5 -5
View File
@@ -1,9 +1,9 @@
import { CSSProperties } from "react";
import { createSvgIcon } from "../svg-icon.type";
export function ModelTypeAvatarIcon(props: { className?: string; style?: CSSProperties }) {
export const ModelTypeAvatarIcon = createSvgIcon((props, ref) => {
return (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" {...props} fill="currentColor">
<svg ref={ref} {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor">
<path d="M64 416L168.6 180.7c15.3-34.4 40.3-63.5 72-83.7l146.9-94c3-1.9 6.5-2.9 10-2.9C407.7 0 416 8.3 416 18.6v1.6c0 2.6-.5 5.1-1.4 7.5L354.8 176.9c-1.9 4.7-2.8 9.7-2.8 14.7c0 5.5 1.2 11 3.4 16.1L448 416H240.9l11.8-35.4 40.4-13.5c6.5-2.2 10.9-8.3 10.9-15.2s-4.4-13-10.9-15.2l-40.4-13.5-13.5-40.4C237 276.4 230.9 272 224 272s-13 4.4-15.2 10.9l-13.5 40.4-40.4 13.5C148.4 339 144 345.1 144 352s4.4 13 10.9 15.2l40.4 13.5L207.1 416H64zM279.6 141.5c-1.1-3.3-4.1-5.5-7.6-5.5s-6.5 2.2-7.6 5.5l-6.7 20.2-20.2 6.7c-3.3 1.1-5.5 4.1-5.5 7.6s2.2 6.5 5.5 7.6l20.2 6.7 6.7 20.2c1.1 3.3 4.1 5.5 7.6 5.5s6.5-2.2 7.6-5.5l6.7-20.2 20.2-6.7c3.3-1.1 5.5-4.1 5.5-7.6s-2.2-6.5-5.5-7.6l-20.2-6.7-6.7-20.2zM32 448H480c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32z" />
</svg>
);
}
)
});
src/renderer/components/svgs/icons/model-type-bloq-icon.component.tsx
+4 -4
View File
@@ -1,9 +1,9 @@
import { CSSProperties } from "react";
import { createSvgIcon } from "../svg-icon.type";
export function ModelTypeBloqIcon(props: { className?: string; style?: CSSProperties }) {
export const ModelTypeBloqIcon = createSvgIcon((props, ref) => {
return (
<svg xmlns="http://www.w3.org/2000/svg" id="Bloq" viewBox="0 0 300 300" {...props} fill="currentColor">
<svg ref={ref} {...props} xmlns="http://www.w3.org/2000/svg" id="Bloq" viewBox="0 0 300 300" fill="currentColor">
<path d="M264,0H36.05A36,36,0,0,0,0,36.05V264A36,36,0,0,0,36.05,300H264A36,36,0,0,0,300,264V36.05A36,36,0,0,0,264,0Zm2.38,52.68a5.86,5.86,0,0,1-3.53,5.37L152.08,106a5.87,5.87,0,0,1-4.7,0L39.19,58.07a5.87,5.87,0,0,1-3.48-5.35V36.46a5.85,5.85,0,0,1,5.86-5.85H260.48a5.85,5.85,0,0,1,5.85,5.85Z" />
</svg>
);
}
});
src/renderer/components/svgs/icons/model-type-platform-icon.component.tsx
+4 -4
View File
@@ -1,9 +1,9 @@
import { CSSProperties } from "react";
import { createSvgIcon } from "../svg-icon.type";
export function ModelTypePlatformIcon(props: { className?: string; style?: CSSProperties }) {
export const ModelTypePlatformIcon = createSvgIcon((props, ref) => {
return (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" {...props} fill="currentColor">
<svg ref={ref} {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor">
<path d="M0 80c0 26.5 21.5 48 48 48H64v64h64V128h96v64h64V128h96v64h64V128h16c26.5 0 48-21.5 48-48V13.4C512 6 506 0 498.6 0c-1.7 0-3.4 .3-5 1l-49 19.6C425.7 28.1 405.5 32 385.2 32H126.8c-20.4 0-40.5-3.9-59.4-11.4L18.4 1c-1.6-.6-3.3-1-5-1C6 0 0 6 0 13.4V80zM64 288V480c0 17.7 14.3 32 32 32s32-14.3 32-32V288H384V480c0 17.7 14.3 32 32 32s32-14.3 32-32V288h32c17.7 0 32-14.3 32-32s-14.3-32-32-32H32c-17.7 0-32 14.3-32 32s14.3 32 32 32H64z" />
</svg>
);
}
});
src/renderer/components/svgs/icons/model-type-saber-icon.component.tsx
+5 -5
View File
@@ -1,9 +1,9 @@
import { CSSProperties } from "react";
import { createSvgIcon } from "../svg-icon.type";
export function ModelTypeSaberIcon(props: { className?: string; style?: CSSProperties }) {
export const ModelTypeSaberIcon = createSvgIcon((props, ref) => {
return (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" {...props} fill="currentColor">
<svg ref={ref} {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" fill="currentColor">
<path d="M234.7 42.7L197 56.8c-3 1.1-5 4-5 7.2s2 6.1 5 7.2l37.7 14.1L248.8 123c1.1 3 4 5 7.2 5s6.1-2 7.2-5l14.1-37.7L315 71.2c3-1.1 5-4 5-7.2s-2-6.1-5-7.2L277.3 42.7 263.2 5c-1.1-3-4-5-7.2-5s-6.1 2-7.2 5L234.7 42.7zM46.1 395.4c-18.7 18.7-18.7 49.1 0 67.9l34.6 34.6c18.7 18.7 49.1 18.7 67.9 0L529.9 116.5c18.7-18.7 18.7-49.1 0-67.9L495.3 14.1c-18.7-18.7-49.1-18.7-67.9 0L46.1 395.4zM484.6 82.6l-105 105-23.3-23.3 105-105 23.3 23.3zM7.5 117.2C3 118.9 0 123.2 0 128s3 9.1 7.5 10.8L64 160l21.2 56.5c1.7 4.5 6 7.5 10.8 7.5s9.1-3 10.8-7.5L128 160l56.5-21.2c4.5-1.7 7.5-6 7.5-10.8s-3-9.1-7.5-10.8L128 96 106.8 39.5C105.1 35 100.8 32 96 32s-9.1 3-10.8 7.5L64 96 7.5 117.2zm352 256c-4.5 1.7-7.5 6-7.5 10.8s3 9.1 7.5 10.8L416 416l21.2 56.5c1.7 4.5 6 7.5 10.8 7.5s9.1-3 10.8-7.5L480 416l56.5-21.2c4.5-1.7 7.5-6 7.5-10.8s-3-9.1-7.5-10.8L480 352l-21.2-56.5c-1.7-4.5-6-7.5-10.8-7.5s-9.1 3-10.8 7.5L416 352l-56.5 21.2z" />
</svg>
);
}
)
});
src/renderer/components/svgs/icons/playlist-icon.component.tsx
+9
View File
@@ -0,0 +1,9 @@
import { createSvgIcon } from "../svg-icon.type";
export const PlaylistIcon = createSvgIcon((props, ref) => {
return (
<svg ref={ref} {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="currentColor">
<path d="M500-360q42 0 71-29t29-71v-220h80q17 0 28.5-11.5T720-720q0-17-11.5-28.5T680-760h-80q-17 0-28.5 11.5T560-720v180q-13-10-28-15t-32-5q-42 0-71 29t-29 71q0 42 29 71t71 29ZM320-240q-33 0-56.5-23.5T240-320v-480q0-33 23.5-56.5T320-880h480q33 0 56.5 23.5T880-800v480q0 33-23.5 56.5T800-240H320ZM160-80q-33 0-56.5-23.5T80-160v-520q0-17 11.5-28.5T120-720q17 0 28.5 11.5T160-680v520h520q17 0 28.5 11.5T720-120q0 17-11.5 28.5T680-80H160Z"/>
</svg>
)
})
src/renderer/components/svgs/svg-icon.type.ts
+10
View File
@@ -0,0 +1,10 @@
// These types and functions are meant replace the current clunky SVG system (the one with `bsm-icon.component.tsx`)
import { ForwardedRef, forwardRef } from "react"
export type SvgIcon = React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement>, "ref"> & React.RefAttributes<SVGSVGElement>>;
export type SvgRenderFunction = (props: React.SVGProps<SVGSVGElement>, ref: ForwardedRef<SVGSVGElement>) => JSX.Element;
export function createSvgIcon(render: SvgRenderFunction): SvgIcon {
return forwardRef(render);
}
src/renderer/components/title-bar/title-bar.component.tsx
+1 -1
View File
@@ -16,7 +16,7 @@ export default function TitleBar({ template = "index.html" }: { template: AppWin
const ipcService = useService(IpcService);
const audio = useService(AudioPlayerService);
const volume = useObservable(audio.volume$, audio.volume);
const volume = useObservable(() => audio.volume$, audio.volume);
const color = useThemeColor("first-color");
const [previewVersion, setPreviewVersion] = useState(null);
src/renderer/components/version-viewer/slides/launch/launch-slide.component.tsx
+2 -2
View File
@@ -29,9 +29,9 @@ export function LaunchSlide({ version }: Props) {
const [debugMode, setDebugMode] = useState(!!configService.get<boolean>(LaunchMods.DEBUG_MOD));
const [advancedLaunch, setAdvancedLaunch] = useState(false);
const [additionalArgsString, setAdditionalArgsString] = useState<string>(configService.get<string>("additionnal-args") || "");
const versionDownloading = useObservable(bsDownloader.downloadingVersion$);
const versionDownloading = useObservable(() => bsDownloader.downloadingVersion$);
const versionRunning = useObservable(bsLauncherService.versionRunning$);
const versionRunning = useObservable(() => bsLauncherService.versionRunning$);
useEffect(() => {
configService.set("additionnal-args", additionalArgsString);
src/renderer/components/version-viewer/slides/mods/mod-item.component.tsx
+1 -1
View File
@@ -17,7 +17,7 @@ export function ModItem({ className, mod, installedVersion, isDependency, isSele
const pageState = useService(PageStateService);
const themeColor = useThemeColor("second-color");
const uninstalling = useObservable(modsManager.isUninstalling$);
const uninstalling = useObservable(() => modsManager.isUninstalling$);
const clickRef = useRef();
useDoubleClick({
src/renderer/components/version-viewer/slides/mods/mods-slide.component.tsx
+2 -2
View File
@@ -35,8 +35,8 @@ export function ModsSlide({ version, onDisclamerDecline }: { version: BSVersion;
const [modsInstalled, setModsInstalled] = useState(null as Map<string, Mod[]>);
const [modsSelected, setModsSelected] = useState([] as Mod[]);
const [moreInfoMod, setMoreInfoMod] = useState(null as Mod);
const isOnline = useObservable(os.isOnline$);
const installing = useObservable(modsManager.isInstalling$);
const isOnline = useObservable(() => os.isOnline$);
const installing = useObservable(() => modsManager.isInstalling$);
const downloadRef = useRef(null);
const [downloadWith, setDownloadWidth] = useState(0);
src/renderer/hooks/use-behavior-subject.hook.ts
+1 -1
View File
@@ -4,7 +4,7 @@ import { useConstant } from "./use-constant.hook";
export function useBehaviorSubject<T>(value: T): [T, BehaviorSubject<T>] {
const subject$ = useConstant(() => new BehaviorSubject(value));
const subjectValue = useObservable(subject$, value);
const subjectValue = useObservable(() => subject$, value);
return [subjectValue, subject$];
}
src/renderer/hooks/use-observable.hook.ts
+4 -4
View File
@@ -1,13 +1,13 @@
import { Observable } from "rxjs";
import { useState, useEffect } from "react";
export function useObservable<T>(observable: Observable<T>, defaultValue?: T): T {
const [obsValue, setObsValue] = useState(defaultValue ?? (null as T));
export function useObservable<T>(factory: () => Observable<T>, initValue?: T, deps?: unknown[]): T {
const [obsValue, setObsValue] = useState<T>(initValue);
useEffect(() => {
const sub = observable.subscribe(val => setObsValue(() => val));
const sub = factory().subscribe(val => setObsValue(() => val));
return () => sub.unsubscribe();
}, []);
}, deps ?? []);
return obsValue;
}
src/renderer/hooks/use-theme-color.hook.ts
+2 -2
View File
@@ -9,8 +9,8 @@ export function useThemeColor(themeColor: ThemeColor): string;
export function useThemeColor(themeColor?: ThemeColor): string | { firstColor: string; secondColor: string } {
const configService = useService(ConfigurationService);
const firstColor = useObservable(!themeColor ? configService.watch<string>("first-color" as DefaultConfigKey).pipe(throttleTime(16)) : configService.watch<string>(themeColor).pipe(throttleTime(16)));
const secondColor = useObservable(!themeColor ? configService.watch<string>("second-color" as DefaultConfigKey).pipe(throttleTime(16)) : of(""));
const firstColor = useObservable(() => !themeColor ? configService.watch<string>("first-color" as DefaultConfigKey).pipe(throttleTime(16)) : configService.watch<string>(themeColor).pipe(throttleTime(16)));
const secondColor = useObservable(() => !themeColor ? configService.watch<string>("second-color" as DefaultConfigKey).pipe(throttleTime(16)) : of(""));
if (themeColor) {
return firstColor;
src/renderer/hooks/use-translation.hook.ts
+1 -1
View File
@@ -6,7 +6,7 @@ export function useTranslation(): (translationKey: string, args?: Record<string,
const i18nService = useService(I18nService);
useObservable(i18nService.currentLanguage$);
useObservable(() => i18nService.currentLanguage$);
return (key: string, args?: Record<string, string>) => {
if (!key) {
src/renderer/index.css
+18
View File
@@ -78,6 +78,24 @@
background: rgba(0, 0, 0, 0.25);
}
.tippy-box[data-theme~='default'] {
@apply bg-neutral-900;
@apply text-white;
}
.tippy-box[data-theme~='default'][data-placement^='top'] > .tippy-arrow::before {
@apply border-t-neutral-900
}
.tippy-box[data-theme~='default'][data-placement^='bottom'] > .tippy-arrow::before {
@apply border-b-neutral-900
}
.tippy-box[data-theme~='default'][data-placement^='left'] > .tippy-arrow::before {
@apply border-l-neutral-900
}
.tippy-box[data-theme~='default'][data-placement^='right'] > .tippy-arrow::before {
@apply border-r-neutral-900
}
@keyframes glowing {
0% {
background-position: 0 0;
src/renderer/pages/available-versions-list.components.tsx
+1 -1
View File
@@ -22,7 +22,7 @@ export function AvailableVersionsList() {
const [selectedVersion, setSelectedVersion] = useState<BSVersion>(null);
const contextValue = useMemo(() => ({ selectedVersion, setSelectedVersion }), [selectedVersion]);
const downloading = useObservable(bsDownloader.downloadingVersion$.pipe(map(v => !!v)));
const downloading = useObservable(() => bsDownloader.downloadingVersion$.pipe(map(v => !!v)));
const t = useTranslation();
const startDownload = async () => {
src/renderer/pages/settings-page.component.tsx
+5 -5
View File
@@ -81,9 +81,9 @@ export function SettingsPage() {
const nav = useNavigate();
const t = useTranslation();
const themeSelected = useObservable(themeService.theme$, "os");
const languageSelected = useObservable(i18nService.currentLanguage$, i18nService.getFallbackLanguage());
const downloadStore = useObservable(bsDownloader.defaultStore$);
const themeSelected = useObservable(() => themeService.theme$, "os");
const languageSelected = useObservable(() => i18nService.currentLanguage$, i18nService.getFallbackLanguage());
const downloadStore = useObservable(() => bsDownloader.defaultStore$);
const [installationFolder, setInstallationFolder] = useState(null);
const [showSupporters, setShowSupporters] = useState(false);
@@ -91,7 +91,7 @@ export function SettingsPage() {
const [playlistsDeepLinkEnabled, setPlaylistsDeepLinkEnabled] = useState(false);
const [modelsDeepLinkEnabled, setModelsDeepLinkEnabled] = useState(false);
const [hasDownloaderSession, setHasDownloaderSession] = useState(false);
const appVersion = useObservable(ipcService.sendV2<string>("current-version"));
const appVersion = useObservable(() => ipcService.sendV2<string>("current-version"));
const [isChangelogAvailable, setIsChangelogAvailable] = useState(true);
const [changlogsLoading, setChanglogsLoading] = useState(false);
@@ -280,7 +280,7 @@ export function SettingsPage() {
</div>
</div>
<SettingContainer minorTitle="pages.settings.appearance.sub-title" className="mt-3">
<SettingRadioArray items={themeItem} selectedItemValue={themeSelected} onItemSelected={handleChangeTheme} />
<SettingRadioArray items={themeItem} selectedItemValue={themeSelected as ThemeConfig} onItemSelected={handleChangeTheme} />
</SettingContainer>
</SettingContainer>
src/renderer/services/maps-manager.service.ts
+6 -2
View File
@@ -13,7 +13,7 @@ import { ConfigurationService } from "./configuration.service";
import { ArchiveProgress } from "shared/models/archive.interface";
import { map, last, catchError } from "rxjs/operators";
import { ProgressionInterface } from "shared/models/progress-bar";
import { VersionFolderLinkerService, VersionLinkerActionType } from "./version-folder-linker.service";
import { FolderLinkState, VersionFolderLinkerService, VersionLinkerActionType } from "./version-folder-linker.service";
export class MapsManagerService {
private static instance: MapsManagerService;
@@ -176,6 +176,10 @@ export class MapsManagerService {
}
public $mapsLinkingPending(version: BSVersion): Observable<boolean> {
return this.linker.$isVersionFolderPending(version, MapsManagerService.RELATIVE_MAPS_FOLDER);
return this.linker.$isPending(version, MapsManagerService.RELATIVE_MAPS_FOLDER);
}
public $mapsFolderLinkState(version: BSVersion): Observable<FolderLinkState> {
return this.linker.$folderLinkedState(version, MapsManagerService.RELATIVE_MAPS_FOLDER);
}
}
src/renderer/services/models-management/models-manager.service.ts
+6 -2
View File
@@ -1,6 +1,6 @@
import { MSModelType } from "shared/models/models/model-saber.model";
import { IpcService } from "../ipc.service";
import { VersionFolderLinkerService, VersionLinkerActionListener, VersionLinkerActionType } from "../version-folder-linker.service";
import { FolderLinkState, VersionFolderLinkerService, VersionLinkerActionListener, VersionLinkerActionType } from "../version-folder-linker.service";
import { MODEL_TYPE_FOLDERS } from "shared/models/models/constants";
import { Observable, lastValueFrom, map } from "rxjs";
import { BSVersion } from "shared/bs-version.interface";
@@ -49,7 +49,11 @@ export class ModelsManagerService {
}
public $modelsLinkingPending(version: BSVersion, type: MSModelType): Observable<boolean> {
return this.versionFolderLinked.$isVersionFolderPending(version, MODEL_TYPE_FOLDERS[type]);
return this.versionFolderLinked.$isPending(version, MODEL_TYPE_FOLDERS[type]);
}
public $modelsLinkingState(version: BSVersion, type: MSModelType): Observable<FolderLinkState> {
return this.versionFolderLinked.$folderLinkedState(version, MODEL_TYPE_FOLDERS[type]);
}
public onModelsFolderLinked(callback: VersionLinkerActionListener): void {
src/renderer/services/version-folder-linker.service.ts
+40 -26
View File
@@ -1,6 +1,6 @@
import { LinkOptions, UnlinkOptions } from "main/services/folder-linker.service";
import { map, distinctUntilChanged, filter, mergeMap, shareReplay } from "rxjs/operators";
import { BehaviorSubject, Observable } from "rxjs";
import { BehaviorSubject, Observable, of } from "rxjs";
import { BSVersion } from "shared/bs-version.interface";
import { IpcService } from "./ipc.service";
import { ProgressBarService } from "./progress-bar.service";
@@ -62,6 +62,13 @@ export class VersionFolderLinkerService {
return this.ipcService.sendV2<boolean, VersionLinkerAction>("link-version-folder-action", { args: action });
}
private get currentAction$(): Observable<VersionLinkerAction> {
return this._queue$.pipe(
map(actions => actions.at(0)),
distinctUntilChanged()
);
}
public linkVersionFolder(action: VersionLinkFolderAction): Promise<boolean> {
const promise = new Promise<boolean>(resolve => {
const callBack: VersionLinkerActionListener = (performedAction, linked) => {
@@ -122,12 +129,33 @@ export class VersionFolderLinkerService {
return this.ipcService.sendV2("is-version-folder-linked", { args: { version, relativeFolder } });
}
public isPending(version: BSVersion, relativeFolder: string): Observable<boolean> {
return this.queue$.pipe(map(queue => queue.length > 0 && queue.some(action => action.version === version && action.relativeFolder === relativeFolder), distinctUntilChanged()));
public $folderLinkedState(version: BSVersion, relativeFolder: string): Observable<FolderLinkState> {
return this._queue$.pipe(
mergeMap(queue => {
const currentAction = queue.at(0);
if(currentAction && equal(currentAction.version, version) && currentAction.relativeFolder === relativeFolder) {
return of(FolderLinkState.Processing)
}
if(queue.some(action => equal(action.version, version) && action.relativeFolder === relativeFolder)) {
return of(FolderLinkState.Pending);
}
return this.isVersionFolderLinked(version, relativeFolder).pipe(
map(linked => linked ? FolderLinkState.Linked : FolderLinkState.Unlinked)
);
}),
distinctUntilChanged(),
shareReplay(1)
);
}
public isProcessing(version: BSVersion, relativeFolder: string): Observable<boolean> {
return this.currentAction$.pipe(map(action => action && action.version === version && action.relativeFolder === relativeFolder));
public $isPending(version: BSVersion, relativeFolder: string): Observable<boolean> {
return this.$folderLinkedState(version, relativeFolder).pipe(map(state => state === FolderLinkState.Pending));
}
public $isProcessing(version: BSVersion, relativeFolder: string): Observable<boolean> {
return this.$folderLinkedState(version, relativeFolder).pipe(map(state => state === FolderLinkState.Processing));
}
public getLinkedFolders(version: BSVersion, options?: { relative?: boolean }): Observable<string[]> {
@@ -137,27 +165,6 @@ export class VersionFolderLinkerService {
public relinkAllVersionsFolders(): Observable<void> {
return this.ipcService.sendV2("relink-all-versions-folders");
}
public $isVersionFolderPending(version: BSVersion, relativeFolder: string): Observable<boolean> {
return this.queue$.pipe(
mergeMap(async queue => {
return queue.some(q => q.relativeFolder.includes(relativeFolder) && equal(q.version, version));
}),
distinctUntilChanged(),
shareReplay(1)
);
}
public get currentAction$(): Observable<VersionLinkerAction> {
return this._queue$.pipe(
map(actions => actions.at(0)),
distinctUntilChanged()
);
}
public get queue$(): Observable<VersionLinkerAction[]> {
return this._queue$.asObservable();
}
}
export const enum VersionLinkerActionType {
@@ -182,3 +189,10 @@ export interface VersionUnlinkFolderAction extends VersionLinkerAction {
}
export type VersionLinkerActionListener = (action: VersionLinkerAction, linked: boolean) => void;
export enum FolderLinkState {
Linked,
Unlinked,
Pending,
Processing
}
src/renderer/windows/OneClick/OneClickDownloadPlaylist.tsx
+2 -2
View File
@@ -24,8 +24,8 @@ export default function OneClickDownloadPlaylist() {
const mapsContainer = useRef<HTMLDivElement>(null);
const playlistUrl = useConstant(() => new URLSearchParams(window.location.search).get("playlistUrl"));
const download$ = useConstant(() => playlistDownloader.oneClickInstallPlaylist(playlistUrl));
const playlistInfos = useObservable<BPList>(download$.pipe(filter(progress => !!progress.data?.playlistInfos), map(progress => progress.data.playlistInfos), take(1)));
const downloadedMaps = useObservable(download$.pipe(filter(progress => !!progress.data?.downloadedMaps), map(progress => progress.data.downloadedMaps)));
const playlistInfos = useObservable<BPList>(() => download$.pipe(filter(progress => !!progress.data?.playlistInfos), map(progress => progress.data.playlistInfos), take(1)));
const downloadedMaps = useObservable(() => download$.pipe(filter(progress => !!progress.data?.downloadedMaps), map(progress => progress.data.downloadedMaps)));
useEffect(() => {
src/renderer/windows/ShortcutLaunch.tsx
+1 -1
View File
@@ -26,7 +26,7 @@ export default function ShortcutLaunch() {
const t = useTranslation();
const color = useThemeColor("second-color");
const launchOptions = useObservable(ipc.sendV2<LaunchOption>("shortcut-launch-options").pipe(take(1)), null)
const launchOptions = useObservable(() => ipc.sendV2<LaunchOption>("shortcut-launch-options").pipe(take(1)), null)
const [rotation, setRotation] = useState(0);
const [status, setStatus] = useState<BSLaunchEventType>();