Skip to content

Commit

Permalink
Misc changes (#1157)
Browse files Browse the repository at this point in the history 
* Add more links to collection stats panel

* Fix utility titles, add first run titles
  • Loading branch information
@harshithmohan
harshithmohan authored Dec 10, 2024
1 parent 6d1714b commit ea3a28d
Show file tree
Hide file tree
Showing 19 changed files with 391 additions and 352 deletions.
149 changes: 76 additions & 73 deletions src/components/ErrorBoundary.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,89 +44,92 @@ const ErrorBoundary = ({ error, resetError }: { error?: Error, resetError?: () =
console.error(error, routeError);

return (
<div className="relative flex grow items-center justify-center overflow-hidden p-6">
<div className="z-20 flex h-full max-w-[56.4375rem] flex-col items-center justify-center gap-y-4 overflow-y-auto md:gap-y-6">
<div className="text-4xl text-panel-text md:text-7xl">Congratulations!</div>
<div className="text-2xl text-panel-text md:text-5xl">You Broke The Web UI!</div>
<pre className="flex max-h-[25rem] max-w-full flex-col overflow-y-auto whitespace-pre-wrap rounded-lg border border-panel-border bg-panel-input p-4 md:p-6">
The information below is absolutely (maybe) useless!
<br />
<br />
{error ? `${error.message}\n${error.stack}` : routeError.data}
</pre>
{routeError?.status === 404
? (
<Button
onClick={() => navigate('/webui', { replace: true })}
className="px-4 py-2 drop-shadow-md"
buttonType="primary"
>
Go back home
</Button>
)
: (
<>
<div className="flex flex-col gap-y-4">
<div>Lets get you back into the Web UI.</div>
<div>
If you are seeing this page after updating, select&nbsp;
<span className="font-semibold text-panel-text-important">Force Update to Stable Web UI</span>
, otherwise select&nbsp;
<span className="font-semibold text-panel-text-important">Logout of Web UI</span>
&nbsp;to clear local storage.
<>
<title>Error! | Shoko</title>
<div className="relative flex grow items-center justify-center overflow-hidden p-6">
<div className="z-20 flex h-full max-w-[56.4375rem] flex-col items-center justify-center gap-y-4 overflow-y-auto md:gap-y-6">
<div className="text-4xl text-panel-text md:text-7xl">Congratulations!</div>
<div className="text-2xl text-panel-text md:text-5xl">You Broke The Web UI!</div>
<pre className="flex max-h-[25rem] max-w-full flex-col overflow-y-auto whitespace-pre-wrap rounded-lg border border-panel-border bg-panel-input p-4 md:p-6">
The information below is absolutely (maybe) useless!
<br />
<br />
{error ? `${error.message}\n${error.stack}` : routeError.data}
</pre>
{routeError?.status === 404
? (
<Button
onClick={() => navigate('/webui', { replace: true })}
className="px-4 py-2 drop-shadow-md"
buttonType="primary"
>
Go back home
</Button>
)
: (
<>
<div className="flex flex-col gap-y-4">
<div>Lets get you back into the Web UI.</div>
<div>
If you are seeing this page after updating, select&nbsp;
<span className="font-semibold text-panel-text-important">Force Update to Stable Web UI</span>
, otherwise select&nbsp;
<span className="font-semibold text-panel-text-important">Logout of Web UI</span>
&nbsp;to clear local storage.
</div>
<div>
Still need help? Hop on our&nbsp;
<a
href="https://discord.gg/vpeHDsg"
target="_blank"
rel="noopener noreferrer"
className="font-semibold text-panel-text-primary"
>
Discord
</a>
&nbsp;server and provide the above error.
</div>
</div>
<div>
Still need help? Hop on our&nbsp;
<a
href="https://discord.gg/vpeHDsg"
target="_blank"
rel="noopener noreferrer"
className="font-semibold text-panel-text-primary"
<div className="flex flex-col gap-y-2 md:flex-row md:gap-x-4">
<Button
onClick={handleStableWebUiUpdate}
className="px-4 py-2 drop-shadow-md"
buttonType="primary"
loading={updateChannel === 'Stable' && isUpdateWebuiPending}
>
Discord
</a>
&nbsp;server and provide the above error.
</div>
</div>
<div className="flex flex-col gap-y-2 md:flex-row md:gap-x-4">
<Button
onClick={handleStableWebUiUpdate}
className="px-4 py-2 drop-shadow-md"
buttonType="primary"
loading={updateChannel === 'Stable' && isUpdateWebuiPending}
>
Force update to Stable Web UI
</Button>
Force update to Stable Web UI
</Button>

{versionQuery.data?.Server.ReleaseChannel !== 'Stable' && (
<Button
onClick={handleDevWebUiUpdate}
className="px-4 py-2 drop-shadow-md"
buttonType="primary"
loading={updateChannel === 'Dev' && isUpdateWebuiPending}
>
Force update to Dev Web UI
</Button>
)}

{versionQuery.data?.Server.ReleaseChannel !== 'Stable' && (
<Button
onClick={handleDevWebUiUpdate}
onClick={handleLogout}
className="px-4 py-2 drop-shadow-md"
buttonType="primary"
loading={updateChannel === 'Dev' && isUpdateWebuiPending}
>
Force update to Dev Web UI
Logout of Web UI
</Button>
)}
</div>
</>
)}
</div>

<Button
onClick={handleLogout}
className="px-4 py-2 drop-shadow-md"
buttonType="primary"
>
Logout of Web UI
</Button>
</div>
</>
)}
<img
src={ShokoMascot}
alt="mascot"
className="absolute -bottom-40 -right-36 z-10 opacity-30"
/>
</div>

<img
src={ShokoMascot}
alt="mascot"
className="absolute -bottom-40 -right-36 z-10 opacity-30"
/>
</div>
</>
);
};

Expand Down
16 changes: 13 additions & 3 deletions src/pages/dashboard/panels/CollectionStats.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,12 @@ function CollectionStats() {
title="Collection Size"
value={`${prettyBytes(statsQuery.data?.FileSize ?? 0, { binary: true })}`}
/>,
<Item key="files" title="Files" value={statsQuery.data?.FileCount} />,
<Item
key="files"
title="Files"
value={statsQuery.data?.FileCount}
link="/webui/utilities/file-search"
/>,
<Item
key="unrecognized-files"
title="Unknown Files"
Expand All @@ -73,9 +78,14 @@ function CollectionStats() {
key="multiple-files"
title="Duplicate Episodes"
value={statsQuery.data?.EpisodesWithMultipleFiles}
link="/webui/utilities/release-management"
link="/webui/utilities/release-management/multiples"
/>,
<Item
key="duplicate-files"
title="Duplicate Hashes"
value={statsQuery.data?.EpisodesWithMultipleFiles}
link="/webui/utilities/release-management/duplicates"
/>,
<Item key="duplicate-files" title="Duplicate Hashes" value={statsQuery.data?.FilesWithDuplicateLocations} />,
];

const childrenThird = [
Expand Down
73 changes: 38 additions & 35 deletions src/pages/firstrun/Acknowledgement.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,42 +20,45 @@ function Acknowledgement() {
};

return (
<TransitionDiv className="flex max-w-[38rem] flex-col justify-center gap-y-6 text-justify">
<div className="text-xl font-semibold">Acknowledgement</div>
<div>
It is important to clarify that Shoko is an anime cataloging program and not a standalone streaming service.
Therefore, it requires access to physical files for playback. Additionally, Shoko does not offer any services
for obtaining or downloading anime series.
</div>
<div>
THE SOFTWARE IS PROVIDED &quot;AS IS&quot;, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT
LIMITED TO THE WARRANTIES OF MERCHANTABILITY,FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT
SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
DEALINGS IN THE SOFTWARE.
</div>
<div className="font-semibold text-panel-text-important">
We are constantly seeking talented individuals to join our team! If you believe you have the skills and
expertise to contribute, we invite you to come and chat with us on&nbsp;
<a
href="https://discord.gg/vpeHDsg"
target="_blank"
rel="noopener noreferrer"
className="text-panel-text-primary hover:underline"
<>
<title>First Run &gt; Acknowledgement | Shoko</title>
<TransitionDiv className="flex max-w-[38rem] flex-col justify-center gap-y-6 text-justify">
<div className="text-xl font-semibold">Acknowledgement</div>
<div>
It is important to clarify that Shoko is an anime cataloging program and not a standalone streaming service.
Therefore, it requires access to physical files for playback. Additionally, Shoko does not offer any services
for obtaining or downloading anime series.
</div>
<div>
THE SOFTWARE IS PROVIDED &quot;AS IS&quot;, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT
NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO
EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE
OR OTHER DEALINGS IN THE SOFTWARE.
</div>
<div className="font-semibold text-panel-text-important">
We are constantly seeking talented individuals to join our team! If you believe you have the skills and
expertise to contribute, we invite you to come and chat with us on&nbsp;
<a
href="https://discord.gg/vpeHDsg"
target="_blank"
rel="noopener noreferrer"
className="text-panel-text-primary hover:underline"
>
Discord
</a>
.
</div>
<Button
onClick={handleNext}
buttonType="primary"
className="py-2 font-semibold"
disabled={serverStatusQuery.data?.State !== 4}
>
Discord
</a>
.
</div>
<Button
onClick={handleNext}
buttonType="primary"
className="py-2 font-semibold"
disabled={serverStatusQuery.data?.State !== 4}
>
Continue
</Button>
</TransitionDiv>
Continue
</Button>
</TransitionDiv>
</>
);
}

Expand Down
101 changes: 52 additions & 49 deletions src/pages/firstrun/AniDBAccount.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,56 +52,59 @@ function AniDBAccount() {
};

return (
<TransitionDiv className="flex max-w-[38rem] flex-col justify-center gap-y-6">
<div className="text-xl font-semibold">Adding Your AniDB Account</div>
<div className="text-justify">
Shoko utilizes AniDB to compare file hashes with its vast database, enabling a quick identification and addition
of series to your collection. Additionally, AniDB provides supplementary information about series and episodes,
enhancing your user experience.
</div>
<div className="text-justify">
An AniDB account is required to use Shoko. If you don&lsquo;t already have an account,
<a
href="https://anidb.net/"
target="_blank"
rel="noreferrer"
className="font-semibold text-panel-text-primary hover:underline"
>
{' '}
Click Here
{' '}
</a>
to create one. Please note that, due to limitations with AniDB&lsquo;s API, your password must consist of only
<span className="font-semibold text-panel-text-important">{' alphanumeric '}</span>
characters. Using any other characters will result in a ban when you attempt to log in.
</div>
<form className="flex flex-col" onSubmit={handleTest}>
<Input
id="Username"
value={Username ?? ''}
label="Username"
type="text"
placeholder="Username"
onChange={handleInputChange}
<>
<title>First Run &gt; AniDB Account | Shoko</title>
<TransitionDiv className="flex max-w-[38rem] flex-col justify-center gap-y-6">
<div className="text-xl font-semibold">Adding Your AniDB Account</div>
<div className="text-justify">
Shoko utilizes AniDB to compare file hashes with its vast database, enabling a quick identification and
addition of series to your collection. Additionally, AniDB provides supplementary information about series and
episodes, enhancing your user experience.
</div>
<div className="text-justify">
An AniDB account is required to use Shoko. If you don&lsquo;t already have an account,
<a
href="https://anidb.net/"
target="_blank"
rel="noreferrer"
className="font-semibold text-panel-text-primary hover:underline"
>
{' '}
Click Here
{' '}
</a>
to create one. Please note that, due to limitations with AniDB&lsquo;s API, your password must consist of only
<span className="font-semibold text-panel-text-important">{' alphanumeric '}</span>
characters. Using any other characters will result in a ban when you attempt to log in.
</div>
<form className="flex flex-col" onSubmit={handleTest}>
<Input
id="Username"
value={Username ?? ''}
label="Username"
type="text"
placeholder="Username"
onChange={handleInputChange}
/>
<Input
id="Password"
value={Password ?? ''}
label="Password"
type="password"
placeholder="Password"
onChange={handleInputChange}
className="mt-9"
/>
<input type="submit" hidden />
</form>
<Footer
nextDisabled={!Username || !Password}
saveFunction={handleTest}
isFetching={isAnidbLoginPending}
status={anidbStatus}
/>
<Input
id="Password"
value={Password ?? ''}
label="Password"
type="password"
placeholder="Password"
onChange={handleInputChange}
className="mt-9"
/>
<input type="submit" hidden />
</form>
<Footer
nextDisabled={!Username || !Password}
saveFunction={handleTest}
isFetching={isAnidbLoginPending}
status={anidbStatus}
/>
</TransitionDiv>
</TransitionDiv>
</>
);
}

Expand Down
Loading

0 comments on commit ea3a28d

Please sign in to comment.