+ {`Are you sure you want to set names from EPG for ${channelIds?.length || 0} selected channels?
+
+This will replace the current channel names with the names from their assigned EPG data.
+
+This action cannot be undone.`}
+
+ }
+ confirmLabel="Set Names"
+ cancelLabel="Cancel"
+ actionKey="batch-set-names-from-epg"
+ onSuppressChange={suppressWarning}
+ size="md"
+ />
+
+
+ {`Are you sure you want to set logos from EPG for ${channelIds?.length || 0} selected channels?
+
+This will replace the current channel logos with logos from their assigned EPG data. New logos will be created if needed.
+
+This action cannot be undone.`}
+
+ }
+ confirmLabel="Set Logos"
+ cancelLabel="Cancel"
+ actionKey="batch-set-logos-from-epg"
+ onSuppressChange={suppressWarning}
+ size="md"
+ />
+
+
+ {`Are you sure you want to set TVG-IDs from EPG for ${channelIds?.length || 0} selected channels?
+
+This will replace the current TVG-IDs with the TVG-IDs from their assigned EPG data.
+
+This action cannot be undone.`}
+
+ }
+ confirmLabel="Set TVG-IDs"
+ cancelLabel="Cancel"
+ actionKey="batch-set-tvg-ids-from-epg"
+ onSuppressChange={suppressWarning}
+ size="md"
+ />
+
+
+
+ You are about to apply the following changes to{' '}
+ {channelIds?.length || 0} selected channel
+ {(channelIds?.length || 0) !== 1 ? 's' : ''}:
+
+
+
+ {getConfirmationMessage().map((change, index) => (
+
+ {change}
+
+ ))}
+
+
+
+ This action cannot be undone.
+
+
+ }
+ confirmLabel="Apply Changes"
+ cancelLabel="Cancel"
+ actionKey="batch-update-channels"
+ onSuppressChange={suppressWarning}
+ size="md"
+ />
);
};
diff --git a/frontend/src/components/forms/Channels.jsx b/frontend/src/components/forms/Channels.jsx
deleted file mode 100644
index 97efea54b..000000000
--- a/frontend/src/components/forms/Channels.jsx
+++ /dev/null
@@ -1,729 +0,0 @@
-import React, { useState, useEffect, useRef, useMemo } from 'react';
-import { useFormik } from 'formik';
-import * as Yup from 'yup';
-import useChannelsStore from '../../store/channels';
-import API from '../../api';
-import useStreamProfilesStore from '../../store/streamProfiles';
-import useStreamsStore from '../../store/streams';
-import { useChannelLogoSelection } from '../../hooks/useSmartLogos';
-import LazyLogo from '../LazyLogo';
-import ChannelGroupForm from './ChannelGroup';
-import usePlaylistsStore from '../../store/playlists';
-import logo from '../../images/logo.png';
-import {
- Box,
- Button,
- Modal,
- TextInput,
- NativeSelect,
- Text,
- Group,
- ActionIcon,
- Center,
- Grid,
- Flex,
- Select,
- Divider,
- Stack,
- useMantineTheme,
- Popover,
- ScrollArea,
- Tooltip,
- NumberInput,
- Image,
- UnstyledButton,
-} from '@mantine/core';
-import { ListOrdered, SquarePlus, SquareX, X } from 'lucide-react';
-import useEPGsStore from '../../store/epgs';
-import { Dropzone } from '@mantine/dropzone';
-import { notifications } from '@mantine/notifications';
-import { FixedSizeList as List } from 'react-window';
-
-const ChannelsForm = ({ channel = null, isOpen, onClose }) => {
- const theme = useMantineTheme();
-
- const listRef = useRef(null);
- const logoListRef = useRef(null);
- const groupListRef = useRef(null);
-
- const channelGroups = useChannelsStore((s) => s.channelGroups);
- const { logos, ensureLogosLoaded } = useChannelLogoSelection();
- const streams = useStreamsStore((state) => state.streams);
- const streamProfiles = useStreamProfilesStore((s) => s.profiles);
- const playlists = usePlaylistsStore((s) => s.playlists);
- const epgs = useEPGsStore((s) => s.epgs);
- const tvgs = useEPGsStore((s) => s.tvgs);
- const tvgsById = useEPGsStore((s) => s.tvgsById);
-
- const [logoPreview, setLogoPreview] = useState(null);
- const [channelStreams, setChannelStreams] = useState([]);
- const [channelGroupModelOpen, setChannelGroupModalOpen] = useState(false);
- const [epgPopoverOpened, setEpgPopoverOpened] = useState(false);
- const [logoPopoverOpened, setLogoPopoverOpened] = useState(false);
- const [selectedEPG, setSelectedEPG] = useState('');
- const [tvgFilter, setTvgFilter] = useState('');
- const [logoFilter, setLogoFilter] = useState('');
-
- const [groupPopoverOpened, setGroupPopoverOpened] = useState(false);
- const [groupFilter, setGroupFilter] = useState('');
- const groupOptions = Object.values(channelGroups);
-
- const addStream = (stream) => {
- const streamSet = new Set(channelStreams);
- streamSet.add(stream);
- setChannelStreams(Array.from(streamSet));
- };
-
- const removeStream = (stream) => {
- const streamSet = new Set(channelStreams);
- streamSet.delete(stream);
- setChannelStreams(Array.from(streamSet));
- };
-
- const handleLogoChange = async (files) => {
- if (files.length === 1) {
- const file = files[0];
-
- // Validate file size on frontend first
- if (file.size > 5 * 1024 * 1024) {
- // 5MB
- notifications.show({
- title: 'Error',
- message: 'File too large. Maximum size is 5MB.',
- color: 'red',
- });
- return;
- }
-
- try {
- const retval = await API.uploadLogo(file);
- // Note: API.uploadLogo already adds the logo to the store, no need to fetch
- setLogoPreview(retval.cache_url);
- formik.setFieldValue('logo_id', retval.id);
- } catch (error) {
- console.error('Logo upload failed:', error);
- // Error notification is already handled in API.uploadLogo
- }
- } else {
- setLogoPreview(null);
- }
- };
-
- const formik = useFormik({
- initialValues: {
- name: '',
- channel_number: '', // Change from 0 to empty string for consistency
- channel_group_id:
- Object.keys(channelGroups).length > 0
- ? Object.keys(channelGroups)[0]
- : '',
- stream_profile_id: '0',
- tvg_id: '',
- tvc_guide_stationid: '',
- epg_data_id: '',
- logo_id: '',
- },
- validationSchema: Yup.object({
- name: Yup.string().required('Name is required'),
- channel_group_id: Yup.string().required('Channel group is required'),
- }),
- onSubmit: async (values, { setSubmitting }) => {
- let response;
-
- try {
- const formattedValues = { ...values };
-
- // Convert empty or "0" stream_profile_id to null for the API
- if (
- !formattedValues.stream_profile_id ||
- formattedValues.stream_profile_id === '0'
- ) {
- formattedValues.stream_profile_id = null;
- }
-
- // Ensure tvg_id is properly included (no empty strings)
- formattedValues.tvg_id = formattedValues.tvg_id || null;
-
- // Ensure tvc_guide_stationid is properly included (no empty strings)
- formattedValues.tvc_guide_stationid =
- formattedValues.tvc_guide_stationid || null;
-
- if (channel) {
- // If there's an EPG to set, use our enhanced endpoint
- if (values.epg_data_id !== (channel.epg_data_id ?? '')) {
- // Use the special endpoint to set EPG and trigger refresh
- const epgResponse = await API.setChannelEPG(
- channel.id,
- values.epg_data_id
- );
-
- // Remove epg_data_id from values since we've handled it separately
- const { epg_data_id, ...otherValues } = formattedValues;
-
- // Update other channel fields if needed
- if (Object.keys(otherValues).length > 0) {
- response = await API.updateChannel({
- id: channel.id,
- ...otherValues,
- streams: channelStreams.map((stream) => stream.id),
- });
- }
- } else {
- // No EPG change, regular update
- response = await API.updateChannel({
- id: channel.id,
- ...formattedValues,
- streams: channelStreams.map((stream) => stream.id),
- });
- }
- } else {
- // New channel creation - use the standard method
- response = await API.addChannel({
- ...formattedValues,
- streams: channelStreams.map((stream) => stream.id),
- });
- }
- } catch (error) {
- console.error('Error saving channel:', error);
- }
-
- formik.resetForm();
- API.requeryChannels();
-
- // Refresh channel profiles to update the membership information
- useChannelsStore.getState().fetchChannelProfiles();
-
- setSubmitting(false);
- setTvgFilter('');
- setLogoFilter('');
- onClose();
- },
- });
-
- useEffect(() => {
- if (channel) {
- if (channel.epg_data_id) {
- const epgSource = epgs[tvgsById[channel.epg_data_id]?.epg_source];
- setSelectedEPG(epgSource ? `${epgSource.id}` : '');
- }
-
- formik.setValues({
- name: channel.name || '',
- channel_number:
- channel.channel_number !== null ? channel.channel_number : '',
- channel_group_id: channel.channel_group_id
- ? `${channel.channel_group_id}`
- : '',
- stream_profile_id: channel.stream_profile_id
- ? `${channel.stream_profile_id}`
- : '0',
- tvg_id: channel.tvg_id || '',
- tvc_guide_stationid: channel.tvc_guide_stationid || '',
- epg_data_id: channel.epg_data_id ?? '',
- logo_id: channel.logo_id ? `${channel.logo_id}` : '',
- });
-
- setChannelStreams(channel.streams || []);
- } else {
- formik.resetForm();
- setTvgFilter('');
- setLogoFilter('');
- }
- }, [channel, tvgsById, channelGroups]);
-
- // Memoize logo options to prevent infinite re-renders during background loading
- const logoOptions = useMemo(() => {
- return [{ id: '0', name: 'Default' }].concat(Object.values(logos));
- }, [logos]); // Only depend on logos object
-
- const renderLogoOption = ({ option, checked }) => {
- return (
-