first commit

resources/client/admin/settings/content-settings/content-settings-automation-panel.tsx

@@ -0,0 +1,152 @@
+import {Fragment} from 'react';
+import {FormSwitch} from '@common/ui/forms/toggle/switch';
+import {Trans} from '@common/i18n/trans';
+import {FormSelect} from '@common/ui/forms/select/select';
+import {Item} from '@common/ui/forms/listbox/item';
+import {SettingsSeparator} from '@common/admin/settings/settings-separator';
+import {useFormContext} from 'react-hook-form';
+import {AdminSettings} from '@common/admin/settings/admin-settings';
+import {SettingsErrorGroup} from '@common/admin/settings/settings-error-group';
+import {FormTextField} from '@common/ui/forms/input-field/text-field/text-field';
+import {useValueLists} from '@common/http/value-lists';
+
+export function ContentSettingsAutomationPanel() {
+  const {watch} = useFormContext<AdminSettings>();
+  return (
+    <Fragment>
+      <SearchMethodSelect />
+      <FormSwitch
+        className="mb-24"
+        name="client.content.title_provider"
+        value="tmdb"
+        description={
+          <Trans message="This will automatically import, and periodically update, all metadata available on TheMovieDB about the title when user visits that title's page." />
+        }
+      >
+        <Trans message="Title automation" />
+      </FormSwitch>
+      <FormSwitch
+        className="mb-24"
+        name="client.content.force_season_update"
+        value="tmdb"
+        description={
+          <Trans message="When this is enabled, season episodes will be automatically updated, even if title automation is disabled." />
+        }
+      >
+        <Trans message="Always update seasons" />
+      </FormSwitch>
+      <SettingsSeparator />
+      <FormSwitch
+        className="mb-24"
+        name="client.content.people_provider"
+        value="tmdb"
+        description={
+          <Trans message="This will automatically import, and periodically update, all metadata available on TheMovieDB about a person, when user visits that person's page." />
+        }
+      >
+        <Trans message="People automation" />
+      </FormSwitch>
+      {watch('client.content.people_provider') === 'tmdb' && (
+        <FormSwitch
+          className="mb-24"
+          name="client.content.automate_filmography"
+          description={
+            <Trans message="Whether full filmograpy for a person should be imported from TheMovieDB when auto updating the person metadata." />
+          }
+        >
+          <Trans message="Full filmography" />
+        </FormSwitch>
+      )}
+      <TmdbFields />
+    </Fragment>
+  );
+}
+
+function SearchMethodSelect() {
+  return (
+    <FormSelect
+      className="mb-24"
+      name="client.content.search_provider"
+      selectionMode="single"
+      label={<Trans message="Search method" />}
+      description={
+        <Trans message="Which method should be used for user facing search on the site." />
+      }
+    >
+      <Item
+        value="tmdb"
+        description={
+          <Trans message="Search on the site will directly connect to, and search TheMovieDB. Any movie, series and artist available on TheMovieDB will be discoverable via search, without needing to import or create it first." />
+        }
+      >
+        <Trans message="TheMovieDB" />
+      </Item>
+      <Item
+        value="local"
+        description={
+          <Trans message="Will only search content that was created or imported from admin area. This can be further configured from 'Local search' settings page." />
+        }
+      >
+        <Trans message="Local" />
+      </Item>
+      <Item
+        value="all"
+        description={
+          <Trans message="Will combine search results from both 'Local' and 'TheMovieDB' methods. If there are identical matches, local results will be preferred." />
+        }
+      >
+        <Trans message="Local and TheMovieDB" />
+      </Item>
+    </FormSelect>
+  );
+}
+
+function TmdbFields() {
+  const {data} = useValueLists(['tmdbLanguages']);
+  const {watch: w} = useFormContext<AdminSettings>();
+  const shouldShow = [
+    w('client.content.people_provider'),
+    w('client.content.title_provider'),
+    w('client.content.search_provider'),
+  ].some(provider => `${provider}`.toLowerCase().includes('tmdb'));
+
+  if (!shouldShow) {
+    return null;
+  }
+
+  return (
+    <SettingsErrorGroup name="tmdb_group" separatorBottom={false}>
+      {isInvalid => (
+        <Fragment>
+          <FormTextField
+            invalid={isInvalid}
+            name="server.tmdb_api_key"
+            label={<Trans message="TheMovieDB API Key" />}
+            className="mb-24"
+            required
+          />
+          <FormSelect
+            className="mb-24"
+            selectionMode="single"
+            showSearchField
+            invalid={isInvalid}
+            name="client.tmdb.language"
+            label={<Trans message="TheMovieDB language" />}
+            description={
+              <Trans message="In what language should content be fetched from TMDb. If translation is not available, data will be in original language for that movie or series." />
+            }
+          >
+            {data?.tmdbLanguages.map(({code, name}) => (
+              <Item value={code} key={code}>
+                {name}
+              </Item>
+            ))}
+          </FormSelect>
+          <FormSwitch name="client.tmdb.includeAdult">
+            <Trans message="Import adult content" />
+          </FormSwitch>
+        </Fragment>
+      )}
+    </SettingsErrorGroup>
+  );
+}

resources/client/admin/settings/content-settings/content-settings-general-panel.tsx

@@ -0,0 +1,80 @@
+import {useFormContext} from 'react-hook-form';
+import {AdminSettings} from '@common/admin/settings/admin-settings';
+import {Fragment} from 'react';
+import {FormSwitch} from '@common/ui/forms/toggle/switch';
+import {Trans} from '@common/i18n/trans';
+import {FormSelect} from '@common/ui/forms/select/select';
+import {Item} from '@common/ui/forms/listbox/item';
+
+export function ContentSettingsGeneralPanel() {
+  const {watch} = useFormContext<AdminSettings>();
+  return (
+    <Fragment>
+      <SortingMethodSelect />
+      <FormSwitch
+        className="mb-24"
+        name="client.titles.enable_reviews"
+        description={
+          <Trans
+            message={
+              'Enable or disable all review functionality across the site.'
+            }
+          />
+        }
+      >
+        <Trans message="Enable reviews" />
+      </FormSwitch>
+      <FormSwitch
+        className="mb-24"
+        name="client.titles.enable_comments"
+        description={
+          <Trans
+            message={
+              'Enable or disable all comment functionality across the site.'
+            }
+          />
+        }
+      >
+        <Trans message="Enable comments" />
+      </FormSwitch>
+      {watch('client.titles.enable_comments') && (
+        <FormSwitch
+          name="client.comments.per_video"
+          description={
+            <Trans
+              message={
+                'When enabled, individual videos will have their own separate comment section (if there are multiple videos), otherwise comments will be shared by all videos for the same title.'
+              }
+            />
+          }
+        >
+          <Trans message="Per video comments" />
+        </FormSwitch>
+      )}
+    </Fragment>
+  );
+}
+
+function SortingMethodSelect() {
+  return (
+    <FormSelect
+      className="mb-24"
+      name="server.rating_column"
+      label={<Trans message="Rating used for sorting" />}
+      selectionMode="single"
+      description={
+        <Trans
+          message="When ordering titles by rating, should local user rating or TheMovieDB rating average be
+            used."
+        />
+      }
+    >
+      <Item value="tmdb_vote_average">
+        <Trans message="TheMovieDB" />
+      </Item>
+      <Item value="local_vote_average">
+        <Trans message="Local (Ratings and reviews from site users)" />
+      </Item>
+    </FormSelect>
+  );
+}

resources/client/admin/settings/content-settings/content-settings-title-page-panel.tsx

@@ -0,0 +1,156 @@
+import {Trans} from '@common/i18n/trans';
+import React, {Fragment, ReactNode, useRef, useState} from 'react';
+import {DragPreviewRenderer} from '@common/ui/interactions/dnd/use-draggable';
+import {useFormContext} from 'react-hook-form';
+import {AdminSettingsWithFiles} from '@common/admin/settings/requests/update-admin-settings';
+import {moveItemInNewArray} from '@common/utils/array/move-item-in-new-array';
+import {IconButton} from '@common/ui/buttons/icon-button';
+import {DragHandleIcon} from '@common/icons/material/DragHandle';
+import {Checkbox} from '@common/ui/forms/toggle/checkbox';
+import {DragPreview} from '@common/ui/interactions/dnd/drag-preview';
+import clsx from 'clsx';
+import {TitlePageSections} from '@app/titles/pages/title-page/sections/title-page-sections';
+import {MessageDescriptor} from '@common/i18n/message-descriptor';
+import {AdminSettings} from '@common/admin/settings/admin-settings';
+import {useSortable} from '@common/ui/interactions/dnd/sortable/use-sortable';
+
+interface SectionItem {
+  name: (typeof TitlePageSections)[number];
+  title: MessageDescriptor;
+}
+
+const defaultItems: SectionItem[] = [
+  {name: 'episodes', title: {message: 'Episode grid'}},
+  {name: 'seasons', title: {message: 'Season grid'}},
+  {name: 'videos', title: {message: 'Video grid'}},
+  {name: 'images', title: {message: 'Image grid'}},
+  {name: 'reviews', title: {message: 'Reviews'}},
+  {name: 'cast', title: {message: 'Cast grid'}},
+  {name: 'related', title: {message: 'Related titles'}},
+];
+
+export function ContentSettingsTitlePagePanel() {
+  const {getValues, setValue} = useFormContext<AdminSettings>();
+  const getSavedValue = (): string[] => {
+    return getValues('client.title_page.sections') || [];
+  };
+
+  const [items, setItems] = useState(() => {
+    const savedValue = getSavedValue();
+    const sortFn = (x: string) =>
+      savedValue.includes(x) ? savedValue.indexOf(x) : savedValue.length;
+    return [...defaultItems].sort((a, b) => sortFn(a.name) - sortFn(b.name));
+  });
+
+  return (
+    <div>
+      <div className="mb-14 text-sm">
+        <Trans message="Title page sections" />
+        <div className="text-xs text-muted">
+          <Trans message="Select which sections should appear on title page and in which order." />
+        </div>
+      </div>
+      {items.map((section, index) => (
+        <ListItemLayout
+          items={items}
+          isFirst={index === 0}
+          key={section.name}
+          section={section}
+          title={<Trans {...section.title} />}
+          onToggle={(section, checked) => {
+            const savedValue = getSavedValue();
+            const newValue = checked
+              ? [...savedValue, section.name]
+              : savedValue.filter(x => x !== section.name);
+            setValue('client.title_page.sections', newValue as any);
+          }}
+          onSortEnd={(oldIndex, newIndex) => {
+            const sortedItems = moveItemInNewArray(items, oldIndex, newIndex);
+            setItems(sortedItems);
+            const savedValue = getSavedValue();
+            const newValue = sortedItems
+              .filter(x => savedValue.includes(x.name))
+              .map(x => x.name);
+            setValue('client.title_page.sections', newValue);
+          }}
+        />
+      ))}
+    </div>
+  );
+}
+
+interface ListItemLayoutProps {
+  isFirst: boolean;
+  items: SectionItem[];
+  section: SectionItem;
+  title: ReactNode;
+  onSortEnd: (oldIndex: number, newIndex: number) => void;
+  onToggle: (section: SectionItem, checked: boolean) => void;
+}
+function ListItemLayout({
+  isFirst,
+  title,
+  items,
+  section,
+  onSortEnd,
+  onToggle,
+}: ListItemLayoutProps) {
+  const ref = useRef<HTMLDivElement>(null);
+  const previewRef = useRef<DragPreviewRenderer>(null);
+  const {watch} = useFormContext<AdminSettingsWithFiles>();
+
+  const savedValue = watch('client.title_page.sections') || [];
+  const isChecked = savedValue.includes(section.name);
+
+  const {sortableProps, dragHandleRef} = useSortable({
+    ref,
+    item: section,
+    items,
+    type: 'titlePageSections',
+    preview: previewRef,
+    strategy: 'line',
+    onSortEnd,
+  });
+
+  return (
+    <Fragment>
+      <div
+        className={clsx(
+          'flex w-full items-center gap-8 border-b py-6',
+          isFirst && 'border-t border-t-transparent',
+        )}
+        ref={ref}
+        {...sortableProps}
+      >
+        <IconButton ref={dragHandleRef}>
+          <DragHandleIcon />
+        </IconButton>
+        <div className="flex-auto">
+          <div className="text-sm">{title}</div>
+        </div>
+        <Checkbox
+          checked={isChecked}
+          onChange={() => {
+            onToggle(section, !isChecked);
+          }}
+        />
+      </div>
+      <TabDragPreview title={title} ref={previewRef} />
+    </Fragment>
+  );
+}
+
+interface DragPreviewProps {
+  title: ReactNode;
+}
+const TabDragPreview = React.forwardRef<DragPreviewRenderer, DragPreviewProps>(
+  ({title}, ref) => {
+    return (
+      <DragPreview ref={ref}>
+        {() => (
+          <div className="rounded bg-chip p-8 text-sm shadow">{title}</div>
+        )}
+      </DragPreview>
+    );
+  },
+);

resources/client/admin/settings/content-settings/content-settings.tsx

@@ -0,0 +1,45 @@
+import {Trans} from '@common/i18n/trans';
+import {SettingsPanel} from '@common/admin/settings/settings-panel';
+import {Tabs} from '@common/ui/tabs/tabs';
+import {TabList} from '@common/ui/tabs/tab-list';
+import {Tab} from '@common/ui/tabs/tab';
+import {TabPanel, TabPanels} from '@common/ui/tabs/tab-panels';
+import {ContentSettingsGeneralPanel} from '@app/admin/settings/content-settings/content-settings-general-panel';
+import {ContentSettingsAutomationPanel} from '@app/admin/settings/content-settings/content-settings-automation-panel';
+import {ContentSettingsTitlePagePanel} from '@app/admin/settings/content-settings/content-settings-title-page-panel';
+
+export function ContentSettings() {
+  return (
+    <SettingsPanel
+      title={<Trans message="Content" />}
+      description={
+        <Trans message="Control how content is displayed across the site." />
+      }
+    >
+      <Tabs>
+        <TabList>
+          <Tab width="min-w-132">
+            <Trans message="General" />
+          </Tab>
+          <Tab width="min-w-132">
+            <Trans message="Automation" />
+          </Tab>
+          <Tab width="min-w-132">
+            <Trans message="Title page" />
+          </Tab>
+        </TabList>
+        <TabPanels className="pt-24">
+          <TabPanel>
+            <ContentSettingsGeneralPanel />
+          </TabPanel>
+          <TabPanel>
+            <ContentSettingsAutomationPanel />
+          </TabPanel>
+          <TabPanel>
+            <ContentSettingsTitlePagePanel />
+          </TabPanel>
+        </TabPanels>
+      </Tabs>
+    </SettingsPanel>
+  );
+}