sct
4 years ago
parent
33da7e9df3
commit
47714b698c
@ -0,0 +1,89 @@
|
|||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
interface LibraryItemProps {
|
||||||
|
isEnabled?: boolean;
|
||||||
|
name: string;
|
||||||
|
onToggle: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const LibraryItem: React.FC<LibraryItemProps> = ({
|
||||||
|
isEnabled,
|
||||||
|
name,
|
||||||
|
onToggle,
|
||||||
|
}) => {
|
||||||
|
return (
|
||||||
|
<li className="col-span-1 flex shadow-sm rounded-md">
|
||||||
|
<div className="flex-1 flex items-center justify-between border-t border-r border-b border-cool-gray-700 bg-cool-gray-600 rounded-md truncate">
|
||||||
|
<div className="flex-1 px-4 py-6 text-sm leading-5 truncate cursor-default">
|
||||||
|
{name}
|
||||||
|
</div>
|
||||||
|
<div className="flex-shrink-0 pr-2">
|
||||||
|
{/* <!-- On: "bg-indigo-600", Off: "bg-gray-200" --> */}
|
||||||
|
<span
|
||||||
|
role="checkbox"
|
||||||
|
tabIndex={0}
|
||||||
|
aria-checked={isEnabled}
|
||||||
|
onClick={() => onToggle()}
|
||||||
|
onKeyDown={(e) => {
|
||||||
|
if (e.key === 'Enter') {
|
||||||
|
onToggle();
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
className={`${
|
||||||
|
isEnabled ? 'bg-indigo-600' : 'bg-cool-gray-700'
|
||||||
|
} relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:shadow-outline`}
|
||||||
|
>
|
||||||
|
{/* <!-- On: "translate-x-5", Off: "translate-x-0" --> */}
|
||||||
|
<span
|
||||||
|
aria-hidden="true"
|
||||||
|
className={`${
|
||||||
|
isEnabled ? 'translate-x-5' : 'translate-x-0'
|
||||||
|
} relative inline-block h-5 w-5 rounded-full bg-white shadow transform transition ease-in-out duration-200`}
|
||||||
|
>
|
||||||
|
{/* <!-- On: "opacity-0 ease-out duration-100", Off: "opacity-100 ease-in duration-200" --> */}
|
||||||
|
<span
|
||||||
|
className={`${
|
||||||
|
isEnabled
|
||||||
|
? 'opacity-0 ease-out duration-100'
|
||||||
|
: 'opacity-100 ease-in duration-200'
|
||||||
|
} absolute inset-0 h-full w-full flex items-center justify-center transition-opacity`}
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
className="h-3 w-3 text-gray-400"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 12 12"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M4 8l2-2m0 0l2-2M6 6L4 4m2 2l2 2"
|
||||||
|
stroke="currentColor"
|
||||||
|
strokeWidth="2"
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
{/* <!-- On: "opacity-100 ease-in duration-200", Off: "opacity-0 ease-out duration-100" --> */}
|
||||||
|
<span
|
||||||
|
className={`${
|
||||||
|
isEnabled
|
||||||
|
? 'opacity-100 ease-in duration-200'
|
||||||
|
: 'opacity-0 ease-out duration-100'
|
||||||
|
} absolute inset-0 h-full w-full flex items-center justify-center transition-opacity`}
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
className="h-3 w-3 text-indigo-600"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 12 12"
|
||||||
|
>
|
||||||
|
<path d="M3.707 5.293a1 1 0 00-1.414 1.414l1.414-1.414zM5 8l-.707.707a1 1 0 001.414 0L5 8zm4.707-3.293a1 1 0 00-1.414-1.414l1.414 1.414zm-7.414 2l2 2 1.414-1.414-2-2-1.414 1.414zm3.414 2l4-4-1.414-1.414-4 4 1.414 1.414z" />
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default LibraryItem;
|
||||||
@ -0,0 +1,210 @@
|
|||||||
|
import React, { useState } from 'react';
|
||||||
|
import LoadingSpinner from '../Common/LoadingSpinner';
|
||||||
|
import type { PlexSettings } from '../../../server/lib/settings';
|
||||||
|
import useSWR from 'swr';
|
||||||
|
import { useFormik } from 'formik';
|
||||||
|
import Button from '../Common/Button';
|
||||||
|
import axios from 'axios';
|
||||||
|
import LibraryItem from './LibraryItem';
|
||||||
|
|
||||||
|
const SettingsPlex: React.FC = () => {
|
||||||
|
const { data, error, revalidate } = useSWR<PlexSettings>(
|
||||||
|
'/api/v1/settings/plex'
|
||||||
|
);
|
||||||
|
const [isSyncing, setIsSyncing] = useState(false);
|
||||||
|
const [isUpdating, setIsUpdating] = useState(false);
|
||||||
|
const [submitError, setSubmitError] = useState<string | null>(null);
|
||||||
|
const formik = useFormik({
|
||||||
|
initialValues: {
|
||||||
|
hostname: data?.ip,
|
||||||
|
port: data?.port,
|
||||||
|
},
|
||||||
|
onSubmit: async (values) => {
|
||||||
|
setIsUpdating(true);
|
||||||
|
try {
|
||||||
|
await axios.post('/api/v1/settings/plex', {
|
||||||
|
ip: values.hostname,
|
||||||
|
port: values.port,
|
||||||
|
} as PlexSettings);
|
||||||
|
|
||||||
|
revalidate();
|
||||||
|
} catch (e) {
|
||||||
|
setSubmitError(e.message);
|
||||||
|
} finally {
|
||||||
|
setIsUpdating(false);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const activeLibraries =
|
||||||
|
data?.libraries
|
||||||
|
.filter((library) => library.enabled)
|
||||||
|
.map((library) => library.id) ?? [];
|
||||||
|
|
||||||
|
const syncLibraries = async () => {
|
||||||
|
setIsSyncing(true);
|
||||||
|
await axios.get('/api/v1/settings/plex/library', {
|
||||||
|
params: {
|
||||||
|
sync: true,
|
||||||
|
enable:
|
||||||
|
activeLibraries.length > 0 ? activeLibraries.join(',') : undefined,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
setIsSyncing(false);
|
||||||
|
revalidate();
|
||||||
|
};
|
||||||
|
|
||||||
|
const toggleLibrary = async (libraryId: string) => {
|
||||||
|
setIsSyncing(true);
|
||||||
|
if (activeLibraries.includes(libraryId)) {
|
||||||
|
await axios.get('/api/v1/settings/plex/library', {
|
||||||
|
params: {
|
||||||
|
enable:
|
||||||
|
activeLibraries.length > 0
|
||||||
|
? activeLibraries.filter((id) => id !== libraryId).join(',')
|
||||||
|
: undefined,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
await axios.get('/api/v1/settings/plex/library', {
|
||||||
|
params: {
|
||||||
|
enable: [...activeLibraries, libraryId].join(','),
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
setIsSyncing(false);
|
||||||
|
revalidate();
|
||||||
|
};
|
||||||
|
|
||||||
|
if (!data && !error) {
|
||||||
|
return <LoadingSpinner />;
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div>
|
||||||
|
<h3 className="text-lg leading-6 font-medium text-cool-gray-200">
|
||||||
|
Plex Settings
|
||||||
|
</h3>
|
||||||
|
<p className="mt-1 max-w-2xl text-sm leading-5 text-cool-gray-500">
|
||||||
|
Configure the settings for your Plex server. Overseerr uses your Plex
|
||||||
|
server to scan your library at an interval and see what content is
|
||||||
|
available.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<form onSubmit={formik.handleSubmit}>
|
||||||
|
<div className="mt-6 sm:mt-5">
|
||||||
|
<div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800 sm:pt-5">
|
||||||
|
<label
|
||||||
|
htmlFor="name"
|
||||||
|
className="block text-sm font-medium leading-5 text-cool-gray-400 sm:mt-px sm:pt-2"
|
||||||
|
>
|
||||||
|
Server Name (Automatically set)
|
||||||
|
</label>
|
||||||
|
<div className="mt-1 sm:mt-0 sm:col-span-2">
|
||||||
|
<div className="max-w-lg flex rounded-md shadow-sm">
|
||||||
|
<input
|
||||||
|
id="name"
|
||||||
|
name="name"
|
||||||
|
placeholder="Plex Server Name (will be set automatically)"
|
||||||
|
value={data?.name}
|
||||||
|
readOnly
|
||||||
|
className="flex-1 form-input block w-full min-w-0 rounded-md transition duration-150 ease-in-out sm:text-sm sm:leading-5 bg-cool-gray-700 border border-cool-gray-500"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="mt-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800 sm:pt-5">
|
||||||
|
<label
|
||||||
|
htmlFor="hostname"
|
||||||
|
className="block text-sm font-medium leading-5 text-cool-gray-400 sm:mt-px sm:pt-2"
|
||||||
|
>
|
||||||
|
Hostname/IP
|
||||||
|
</label>
|
||||||
|
<div className="mt-1 sm:mt-0 sm:col-span-2">
|
||||||
|
<div className="max-w-lg flex rounded-md shadow-sm">
|
||||||
|
<input
|
||||||
|
id="hostname"
|
||||||
|
name="hostname"
|
||||||
|
placeholder="127.0.0.1"
|
||||||
|
value={formik.values.hostname}
|
||||||
|
onChange={formik.handleChange}
|
||||||
|
className="flex-1 form-input block w-full min-w-0 rounded-md transition duration-150 ease-in-out sm:text-sm sm:leading-5 bg-cool-gray-700 border border-cool-gray-500"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5">
|
||||||
|
<label
|
||||||
|
htmlFor="port"
|
||||||
|
className="block text-sm font-medium leading-5 text-cool-gray-400 sm:mt-px sm:pt-2"
|
||||||
|
>
|
||||||
|
Port
|
||||||
|
</label>
|
||||||
|
<div className="mt-1 sm:mt-0 sm:col-span-2">
|
||||||
|
<div className="max-w-lg rounded-md shadow-sm sm:max-w-xs">
|
||||||
|
<input
|
||||||
|
id="port"
|
||||||
|
name="port"
|
||||||
|
placeholder="32400"
|
||||||
|
value={formik.values.port}
|
||||||
|
onChange={formik.handleChange}
|
||||||
|
className="form-input block w-24 transition duration-150 ease-in-out sm:text-sm sm:leading-5 bg-cool-gray-700 border border-cool-gray-500"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="mt-8 border-t border-cool-gray-700 pt-5">
|
||||||
|
<div className="flex justify-end">
|
||||||
|
<span className="ml-3 inline-flex rounded-md shadow-sm">
|
||||||
|
<Button buttonType="primary" type="submit" disabled={isUpdating}>
|
||||||
|
{isUpdating ? 'Saving...' : 'Save Changes'}
|
||||||
|
</Button>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="mt-10">
|
||||||
|
<h3 className="text-lg leading-6 font-medium text-cool-gray-200">
|
||||||
|
Plex Libraries
|
||||||
|
</h3>
|
||||||
|
<p className="mt-1 max-w-2xl text-sm leading-5 text-cool-gray-500">
|
||||||
|
These are the libraries Overseerr will scan for titles. If you see
|
||||||
|
no libraries listed, you will need to run at least one sync by
|
||||||
|
clicking the button below. You must first configure and save your
|
||||||
|
plex connection settings before you will be able to retrieve your
|
||||||
|
libraries.
|
||||||
|
</p>
|
||||||
|
<div className="mt-6">
|
||||||
|
<Button onClick={() => syncLibraries()} disabled={isSyncing}>
|
||||||
|
<svg
|
||||||
|
className={`${isSyncing ? 'animate-spin' : ''} w-5 h-5 mr-1`}
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
fillRule="evenodd"
|
||||||
|
d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z"
|
||||||
|
clipRule="evenodd"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
{isSyncing ? 'Syncing...' : 'Sync Plex Libraries'}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
<ul className="mt-6 grid grid-cols-1 gap-5 sm:gap-6 sm:grid-cols-2 lg:grid-cols-4">
|
||||||
|
{data?.libraries.map((library) => (
|
||||||
|
<LibraryItem
|
||||||
|
name={library.name}
|
||||||
|
isEnabled={library.enabled}
|
||||||
|
key={`setting-library-${library.id}`}
|
||||||
|
onToggle={() => toggleLibrary(library.id)}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default SettingsPlex;
|
||||||
@ -0,0 +1,14 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import type { NextPage } from 'next';
|
||||||
|
import SettingsLayout from '../../components/Settings/SettingsLayout';
|
||||||
|
import SettingsPlex from '../../components/Settings/SettingsPlex';
|
||||||
|
|
||||||
|
const PlexSettingsPage: NextPage = () => {
|
||||||
|
return (
|
||||||
|
<SettingsLayout>
|
||||||
|
<SettingsPlex />
|
||||||
|
</SettingsLayout>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default PlexSettingsPage;
|
||||||
Loading…
Reference in new issue