Function ChannelForm

frontend/src/components/forms/Channel.jsx:96–1341

({ channel: channelProp = null, isOpen, onClose })

};

const ChannelForm = ({ channel: channelProp = null, isOpen, onClose }) => {
  const theme = useMantineTheme();

  const listRef = useRef(null);
  const logoListRef = useRef(null);
  const groupListRef = useRef(null);

  // Local copy so in-modal mutations (clear overrides, etc.) update the
  // form immediately. Reset on each open from `channelProp`; mutated in
  // place with API responses.
  const [channel, setChannel] = useState(channelProp);
  useEffect(() => {
    setChannel(channelProp);
  }, [channelProp]);

  const channelGroups = useChannelsStore((s) => s.channelGroups);

  const {
    logos: channelLogos,
    ensureLogosLoaded,
    isLoading: logosLoading,
  } = useChannelLogoSelection();

  // Import the full logos store for duplicate checking
  const allLogos = useLogosStore((s) => s.logos);

  // Ensure logos are loaded when component mounts
  useEffect(() => {
    ensureLogosLoaded();
  }, [ensureLogosLoaded]);

  const streamProfiles = useStreamProfilesStore((s) => s.profiles);
  const epgs = useEPGsStore((s) => s.epgs);
  const tvgs = useEPGsStore((s) => s.tvgs);
  const tvgsById = useEPGsStore((s) => s.tvgsById);

  const [logoModalOpen, setLogoModalOpen] = useState(false);
  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 [autoMatchLoading, setAutoMatchLoading] = useState(false);
  const groupOptions = Object.values(channelGroups);

  const handleLogoSuccess = ({ logo }) => {
    if (logo && logo.id) {
      setValue('logo_id', logo.id);
      ensureLogosLoaded(); // Refresh logos
    }
    setLogoModalOpen(false);
  };