Skip to content

Commit

Permalink
feat(ui): added the music settings to the user UIs
Browse files Browse the repository at this point in the history
  • Loading branch information
@ano0002
ano0002 committed Aug 31, 2024
1 parent c105f10 commit 6c07d22
Show file tree
Hide file tree
Showing 5 changed files with 158 additions and 16 deletions.
4 changes: 4 additions & 0 deletions server/interfaces/api/userSettingsInterfaces.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,14 @@ export interface UserSettingsGeneralResponse {
movieQuotaDays?: number;
tvQuotaLimit?: number;
tvQuotaDays?: number;
musicQuotaLimit?: number;
musicQuotaDays?: number;
globalMovieQuotaDays?: number;
globalMovieQuotaLimit?: number;
globalTvQuotaLimit?: number;
globalTvQuotaDays?: number;
globalMusicQuotaLimit?: number;
globalMusicQuotaDays?: number;
watchlistSyncMovies?: boolean;
watchlistSyncTv?: boolean;
}
Expand Down
6 changes: 6 additions & 0 deletions server/routes/user/usersettings.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,10 +59,14 @@ userSettingsRoutes.get<{ id: string }, UserSettingsGeneralResponse>(
movieQuotaDays: user.movieQuotaDays,
tvQuotaLimit: user.tvQuotaLimit,
tvQuotaDays: user.tvQuotaDays,
musicQuotaLimit: user.musicQuotaLimit,
musicQuotaDays: user.musicQuotaDays,
globalMovieQuotaDays: defaultQuotas.movie.quotaDays,
globalMovieQuotaLimit: defaultQuotas.movie.quotaLimit,
globalTvQuotaDays: defaultQuotas.tv.quotaDays,
globalTvQuotaLimit: defaultQuotas.tv.quotaLimit,
globalMusicQuotaDays: defaultQuotas.music.quotaDays,
globalMusicQuotaLimit: defaultQuotas.music.quotaLimit,
watchlistSyncMovies: user.settings?.watchlistSyncMovies,
watchlistSyncTv: user.settings?.watchlistSyncTv,
});
Expand Down Expand Up @@ -107,6 +111,8 @@ userSettingsRoutes.post<
user.movieQuotaLimit = req.body.movieQuotaLimit;
user.tvQuotaDays = req.body.tvQuotaDays;
user.tvQuotaLimit = req.body.tvQuotaLimit;
user.musicQuotaDays = req.body.musicQuotaDays;
user.musicQuotaLimit = req.body.musicQuotaLimit;
}

if (!user.settings) {
Expand Down
29 changes: 29 additions & 0 deletions src/components/Layout/UserDropdown/MiniQuotaDisplay/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import useSWR from 'swr';
const messages = defineMessages({
movierequests: 'Movie Requests',
seriesrequests: 'Series Requests',
musicrequests: 'Music Requests',
});

type MiniQuotaDisplayProps = {
Expand Down Expand Up @@ -84,6 +85,34 @@ const MiniQuotaDisplay = ({ userId }: MiniQuotaDisplayProps) => {
)}
</div>
</div>
<div className="flex basis-1/2 flex-col space-y-2">
<div className="text-sm text-gray-200">
{intl.formatMessage(messages.musicrequests)}
</div>
<div className="flex h-full items-center space-x-2 text-gray-200">
{data?.music.limit ?? 0 > 0 ? (
<>
<ProgressCircle
className="h-8 w-8"
progress={Math.round(
((data?.music.remaining ?? 0) /
(data?.music.limit ?? 1)) *
100
)}
useHeatLevel
/>
<span className="text-lg font-bold">
{data?.music.remaining} / {data?.music.limit}
</span>
</>
) : (
<>
<Infinity className="w-7" />
<span className="font-bold">Unlimited</span>
</>
)}
</div>
</div>
</div>
)}
</>
Expand Down
47 changes: 47 additions & 0 deletions src/components/UserProfile/UserSettings/UserGeneralSettings/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@ const messages = defineMessages({
originallanguageTip: 'Filter content by original language',
movierequestlimit: 'Movie Request Limit',
seriesrequestlimit: 'Series Request Limit',
musicrequestlimit: 'Music Request Limit',
enableOverride: 'Override Global Limit',
applanguage: 'Display Language',
languageDefault: 'Default ({language})',
Expand All @@ -63,6 +64,7 @@ const UserGeneralSettings = () => {
const { locale, setLocale } = useLocale();
const [movieQuotaEnabled, setMovieQuotaEnabled] = useState(false);
const [tvQuotaEnabled, setTvQuotaEnabled] = useState(false);
const [musicQuotaEnabled, setMusicQuotaEnabled] = useState(false);
const router = useRouter();
const {
user,
Expand Down Expand Up @@ -94,6 +96,9 @@ const UserGeneralSettings = () => {
setTvQuotaEnabled(
data?.tvQuotaLimit != undefined && data?.tvQuotaDays != undefined
);
setMusicQuotaEnabled(
data?.musicQuotaLimit != undefined && data?.musicQuotaDays != undefined
);
}, [data]);

if (!data && !error) {
Expand Down Expand Up @@ -128,6 +133,8 @@ const UserGeneralSettings = () => {
movieQuotaDays: data?.movieQuotaDays,
tvQuotaLimit: data?.tvQuotaLimit,
tvQuotaDays: data?.tvQuotaDays,
musicQuotaLimit: data?.musicQuotaLimit,
musicQuotaDays: data?.musicQuotaDays,
watchlistSyncMovies: data?.watchlistSyncMovies,
watchlistSyncTv: data?.watchlistSyncTv,
}}
Expand Down Expand Up @@ -417,6 +424,46 @@ const UserGeneralSettings = () => {
</div>
</div>
</div>
<div className="form-row">
<label htmlFor="musicQuotaLimit" className="text-label">
<span>
{intl.formatMessage(messages.musicrequestlimit)}
</span>
</label>
<div className="form-input-area">
<div className="flex flex-col">
<div className="mb-4 flex items-center">
<input
type="checkbox"
checked={musicQuotaEnabled}
onChange={() => setMusicQuotaEnabled((s) => !s)}
/>
<span className="ml-2 text-gray-300">
{intl.formatMessage(messages.enableOverride)}
</span>
</div>
<QuotaSelector
isDisabled={!musicQuotaEnabled}
dayFieldName="musicQuotaDays"
limitFieldName="musicQuotaLimit"
mediaType="music"
onChange={setFieldValue}
defaultDays={values.musicQuotaDays}
defaultLimit={values.musicQuotaLimit}
dayOverride={
!musicQuotaEnabled
? data?.globalMusicQuotaDays
: undefined
}
limitOverride={
!musicQuotaEnabled
? data?.globalMusicQuotaLimit
: undefined
}
/>
</div>
</div>
</div>
</>
)}
{hasPermission(
Expand Down
88 changes: 72 additions & 16 deletions src/components/UserProfile/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ const messages = defineMessages({
pastdays: '{type} (past {days} days)',
movierequests: 'Movie Requests',
seriesrequest: 'Series Requests',
musicrequests: 'Music Requests',
recentlywatched: 'Recently Watched',
plexwatchlist: 'Plex Watchlist',
emptywatchlist:
Expand Down Expand Up @@ -147,22 +148,6 @@ const UserProfile = () => {
)) && (
<div className="relative z-40">
<dl className="mt-5 grid grid-cols-1 gap-5 lg:grid-cols-3">
<div className="overflow-hidden rounded-lg bg-gray-800 bg-opacity-50 px-4 py-5 shadow ring-1 ring-gray-700 sm:p-6">
<dt className="truncate text-sm font-bold text-gray-300">
{intl.formatMessage(messages.totalrequests)}
</dt>
<dd className="mt-1 text-3xl font-semibold text-white">
<Link
href={
user.id === currentUser?.id
? '/profile/requests?filter=all'
: `/users/${user?.id}/requests?filter=all`
}
>
{intl.formatNumber(user.requestCount)}
</Link>
</dd>
</div>
<div
className={`overflow-hidden rounded-lg bg-gray-800 bg-opacity-50 px-4 py-5 shadow ring-1 ${
quota.movie.restricted
Expand Down Expand Up @@ -273,6 +258,77 @@ const UserProfile = () => {
)}
</dd>
</div>
<div
className={`overflow-hidden rounded-lg bg-gray-800 bg-opacity-50 px-4 py-5 shadow ring-1 ${
quota.music.restricted
? 'bg-gradient-to-t from-red-900 to-transparent ring-red-500'
: 'ring-gray-700'
} sm:p-6`}
>
<dt
className={`truncate text-sm font-bold ${
quota.music.restricted ? 'text-red-500' : 'text-gray-300'
}`}
>
{quota.music.limit
? intl.formatMessage(messages.pastdays, {
type: intl.formatMessage(messages.musicrequests),
days: quota?.music.days,
})
: intl.formatMessage(messages.musicrequests)}
</dt>
<dd
className={`mt-1 flex items-center text-sm ${
quota.music.restricted ? 'text-red-500' : 'text-white'
}`}
>
{quota.music.limit ? (
<>
<ProgressCircle
progress={Math.round(
((quota?.music.remaining ?? 0) /
(quota?.music.limit ?? 1)) *
100
)}
useHeatLevel
className="mr-2 h-8 w-8"
/>
<div>
{intl.formatMessage(messages.requestsperdays, {
limit: (
<span className="text-3xl font-semibold">
{intl.formatMessage(messages.limit, {
remaining: quota.music.remaining,
limit: quota.music.limit,
})}
</span>
),
})}
</div>
</>
) : (
<span className="text-3xl font-semibold">
{intl.formatMessage(messages.unlimited)}
</span>
)}
</dd>
</div>
<div className="overflow-hidden rounded-lg bg-gray-800 bg-opacity-50 px-4 py-5 shadow ring-1 ring-gray-700 sm:p-6">
<dt className="truncate text-sm font-bold text-gray-300">
{intl.formatMessage(messages.totalrequests)}
</dt>
<dd className="mt-1 text-3xl font-semibold text-white">
<Link
href={
user.id === currentUser?.id
? '/profile/requests?filter=all'
: `/users/${user?.id}/requests?filter=all`
}
>
{intl.formatNumber(user.requestCount)}
</Link>
</dd>
</div>
</dl>
</div>
)}
Expand Down

0 comments on commit 6c07d22

Please sign in to comment.