feat: add streaming services filter (#3247)

* feat: add streaming services filter

* fix: count watch region/provider as one filter
This commit is contained in:
Ryan Cohen
2023-01-16 17:05:21 +09:00
committed by GitHub
parent cb650745f6
commit 1154156459
11 changed files with 532 additions and 28 deletions

View File

@@ -18,6 +18,8 @@ interface RegionSelectorProps {
value: string;
name: string;
isUserSetting?: boolean;
disableAll?: boolean;
watchProviders?: boolean;
onChange?: (fieldName: string, region: string) => void;
}
@@ -25,11 +27,15 @@ const RegionSelector = ({
name,
value,
isUserSetting = false,
disableAll = false,
watchProviders = false,
onChange,
}: RegionSelectorProps) => {
const { currentSettings } = useSettings();
const intl = useIntl();
const { data: regions } = useSWR<Region[]>('/api/v1/regions');
const { data: regions } = useSWR<Region[]>(
watchProviders ? '/api/v1/watchproviders/regions' : '/api/v1/regions'
);
const [selectedRegion, setSelectedRegion] = useState<Region | null>(null);
const allRegion: Region = useMemo(
@@ -166,32 +172,34 @@ const RegionSelector = ({
)}
</Listbox.Option>
)}
<Listbox.Option value={isUserSetting ? allRegion : null}>
{({ selected, active }) => (
<div
className={`${
active ? 'bg-indigo-600 text-white' : 'text-gray-300'
} relative cursor-default select-none py-2 pl-8 pr-4`}
>
<span
{!disableAll && (
<Listbox.Option value={isUserSetting ? allRegion : null}>
{({ selected, active }) => (
<div
className={`${
selected ? 'font-semibold' : 'font-normal'
} block truncate pl-8`}
active ? 'bg-indigo-600 text-white' : 'text-gray-300'
} relative cursor-default select-none py-2 pl-8 pr-4`}
>
{intl.formatMessage(messages.regionDefault)}
</span>
{selected && (
<span
className={`${
active ? 'text-white' : 'text-indigo-600'
} absolute inset-y-0 left-0 flex items-center pl-1.5`}
selected ? 'font-semibold' : 'font-normal'
} block truncate pl-8`}
>
<CheckIcon className="h-5 w-5" />
{intl.formatMessage(messages.regionDefault)}
</span>
)}
</div>
)}
</Listbox.Option>
{selected && (
<span
className={`${
active ? 'text-white' : 'text-indigo-600'
} absolute inset-y-0 left-0 flex items-center pl-1.5`}
>
<CheckIcon className="h-5 w-5" />
</span>
)}
</div>
)}
</Listbox.Option>
)}
{sortedRegions?.map((region) => (
<Listbox.Option key={region.iso_3166_1} value={region}>
{({ selected, active }) => (