@@ -1008,6 +1022,7 @@ This action cannot be undone.`}
opened={confirmBatchUpdateOpen}
onClose={() => setConfirmBatchUpdateOpen(false)}
onConfirm={onSubmit}
+ loading={isSubmitting}
title="Confirm Batch Update"
message={
diff --git a/frontend/src/components/forms/DummyEPG.jsx b/frontend/src/components/forms/DummyEPG.jsx
index bb787722..9f9346da 100644
--- a/frontend/src/components/forms/DummyEPG.jsx
+++ b/frontend/src/components/forms/DummyEPG.jsx
@@ -728,6 +728,16 @@ const DummyEPGForm = ({ epg, isOpen, onClose }) => {
const handleSubmit = async (values) => {
try {
if (epg?.id) {
+ // Validate that we have a valid EPG object before updating
+ if (!epg || typeof epg !== 'object' || !epg.id) {
+ notifications.show({
+ title: 'Error',
+ message: 'Invalid EPG data. Please close and reopen this form.',
+ color: 'red',
+ });
+ return;
+ }
+
await API.updateEPG({ ...values, id: epg.id });
notifications.show({
title: 'Success',
diff --git a/frontend/src/components/forms/EPG.jsx b/frontend/src/components/forms/EPG.jsx
index 8f8a3070..50c8553c 100644
--- a/frontend/src/components/forms/EPG.jsx
+++ b/frontend/src/components/forms/EPG.jsx
@@ -15,6 +15,7 @@ import {
Text,
} from '@mantine/core';
import { isNotEmpty, useForm } from '@mantine/form';
+import { notifications } from '@mantine/notifications';
const EPG = ({ epg = null, isOpen, onClose }) => {
const [sourceType, setSourceType] = useState('xmltv');
@@ -28,6 +29,7 @@ const EPG = ({ epg = null, isOpen, onClose }) => {
api_key: '',
is_active: true,
refresh_interval: 24,
+ priority: 0,
},
validate: {
@@ -40,6 +42,16 @@ const EPG = ({ epg = null, isOpen, onClose }) => {
const values = form.getValues();
if (epg?.id) {
+ // Validate that we have a valid EPG object before updating
+ if (!epg || typeof epg !== 'object' || !epg.id) {
+ notifications.show({
+ title: 'Error',
+ message: 'Invalid EPG data. Please close and reopen this form.',
+ color: 'red',
+ });
+ return;
+ }
+
await API.updateEPG({ id: epg.id, ...values });
} else {
await API.addEPG(values);
@@ -58,6 +70,7 @@ const EPG = ({ epg = null, isOpen, onClose }) => {
api_key: epg.api_key,
is_active: epg.is_active,
refresh_interval: epg.refresh_interval,
+ priority: epg.priority ?? 0,
};
form.setValues(values);
setSourceType(epg.source_type);
@@ -137,14 +150,24 @@ const EPG = ({ epg = null, isOpen, onClose }) => {
key={form.key('url')}
/>
-
+ )}
+
+
{/* Put checkbox at the same level as Refresh Interval */}
diff --git a/frontend/src/components/forms/GroupManager.jsx b/frontend/src/components/forms/GroupManager.jsx
index adcd55d3..453d9494 100644
--- a/frontend/src/components/forms/GroupManager.jsx
+++ b/frontend/src/components/forms/GroupManager.jsx
@@ -183,6 +183,7 @@ const GroupManager = React.memo(({ isOpen, onClose }) => {
const [confirmDeleteOpen, setConfirmDeleteOpen] = useState(false);
const [groupToDelete, setGroupToDelete] = useState(null);
const [confirmCleanupOpen, setConfirmCleanupOpen] = useState(false);
+ const [deletingGroup, setDeletingGroup] = useState(false);
// Memoize the channel groups array to prevent unnecessary re-renders
const channelGroupsArray = useMemo(
@@ -382,6 +383,7 @@ const GroupManager = React.memo(({ isOpen, onClose }) => {
const executeDeleteGroup = useCallback(
async (group) => {
+ setDeletingGroup(true);
try {
await API.deleteChannelGroup(group.id);
@@ -392,13 +394,14 @@ const GroupManager = React.memo(({ isOpen, onClose }) => {
});
await fetchGroupUsage(); // Refresh usage data
- setConfirmDeleteOpen(false);
} catch (error) {
notifications.show({
title: 'Error',
message: 'Failed to delete group',
color: 'red',
});
+ } finally {
+ setDeletingGroup(false);
setConfirmDeleteOpen(false);
}
},
@@ -680,6 +683,7 @@ const GroupManager = React.memo(({ isOpen, onClose }) => {
opened={confirmDeleteOpen}
onClose={() => setConfirmDeleteOpen(false)}
onConfirm={() => groupToDelete && executeDeleteGroup(groupToDelete)}
+ loading={deletingGroup}
title="Confirm Group Deletion"
message={
groupToDelete ? (
@@ -706,6 +710,7 @@ This action cannot be undone.`}
opened={confirmCleanupOpen}
onClose={() => setConfirmCleanupOpen(false)}
onConfirm={executeCleanup}
+ loading={isCleaningUp}
title="Confirm Group Cleanup"
message={
diff --git a/frontend/src/components/forms/LiveGroupFilter.jsx b/frontend/src/components/forms/LiveGroupFilter.jsx
index 3497957b..68f4db8c 100644
--- a/frontend/src/components/forms/LiveGroupFilter.jsx
+++ b/frontend/src/components/forms/LiveGroupFilter.jsx
@@ -96,28 +96,30 @@ const LiveGroupFilter = ({
}
setGroupStates(
- playlist.channel_groups.map((group) => {
- // Parse custom_properties if present
- let customProps = {};
- if (group.custom_properties) {
- try {
- customProps =
- typeof group.custom_properties === 'string'
- ? JSON.parse(group.custom_properties)
- : group.custom_properties;
- } catch {
- customProps = {};
+ playlist.channel_groups
+ .filter((group) => channelGroups[group.channel_group]) // Filter out groups that don't exist
+ .map((group) => {
+ // Parse custom_properties if present
+ let customProps = {};
+ if (group.custom_properties) {
+ try {
+ customProps =
+ typeof group.custom_properties === 'string'
+ ? JSON.parse(group.custom_properties)
+ : group.custom_properties;
+ } catch {
+ customProps = {};
+ }
}
- }
- return {
- ...group,
- name: channelGroups[group.channel_group].name,
- auto_channel_sync: group.auto_channel_sync || false,
- auto_sync_channel_start: group.auto_sync_channel_start || 1.0,
- custom_properties: customProps,
- original_enabled: group.enabled,
- };
- })
+ return {
+ ...group,
+ name: channelGroups[group.channel_group].name,
+ auto_channel_sync: group.auto_channel_sync || false,
+ auto_sync_channel_start: group.auto_sync_channel_start || 1.0,
+ custom_properties: customProps,
+ original_enabled: group.enabled,
+ };
+ })
);
}, [playlist, channelGroups]);
@@ -261,25 +263,42 @@ const LiveGroupFilter = ({
}}
>
{/* Group Enable/Disable Button */}
-
+
+
{/* Auto Sync Controls */}
@@ -367,7 +386,8 @@ const LiveGroupFilter = ({
if (
group.custom_properties?.custom_epg_id !==
undefined ||
- group.custom_properties?.force_dummy_epg
+ group.custom_properties?.force_dummy_epg ||
+ group.custom_properties?.force_epg_selected
) {
selectedValues.push('force_epg');
}
@@ -430,23 +450,20 @@ const LiveGroupFilter = ({
// Handle force_epg
if (selectedOptions.includes('force_epg')) {
- // Migrate from old force_dummy_epg if present
+ // Set default to force_dummy_epg if no EPG settings exist yet
if (
- newCustomProps.force_dummy_epg &&
- newCustomProps.custom_epg_id === undefined
+ newCustomProps.custom_epg_id ===
+ undefined &&
+ !newCustomProps.force_dummy_epg
) {
- // Migrate: force_dummy_epg=true becomes custom_epg_id=null
- newCustomProps.custom_epg_id = null;
- delete newCustomProps.force_dummy_epg;
- } else if (
- newCustomProps.custom_epg_id === undefined
- ) {
- // New configuration: initialize with null (no EPG/default dummy)
- newCustomProps.custom_epg_id = null;
+ // Default to "No EPG (Disabled)"
+ newCustomProps.force_dummy_epg = true;
}
} else {
- // Only remove custom_epg_id when deselected
+ // Remove all EPG settings when deselected
delete newCustomProps.custom_epg_id;
+ delete newCustomProps.force_dummy_epg;
+ delete newCustomProps.force_epg_selected;
}
// Handle group_override
@@ -1122,7 +1139,8 @@ const LiveGroupFilter = ({
{/* Show EPG selector when force_epg is selected */}
{(group.custom_properties?.custom_epg_id !== undefined ||
- group.custom_properties?.force_dummy_epg) && (
+ group.custom_properties?.force_dummy_epg ||
+ group.custom_properties?.force_epg_selected) && (
{
- // Handle migration from force_dummy_epg
+ // Show custom EPG if set
if (
group.custom_properties?.custom_epg_id !==
- undefined
+ undefined &&
+ group.custom_properties?.custom_epg_id !== null
) {
- // Convert to string, use '0' for null/no EPG
- return group.custom_properties.custom_epg_id ===
- null
- ? '0'
- : group.custom_properties.custom_epg_id.toString();
- } else if (
- group.custom_properties?.force_dummy_epg
- ) {
- // Show "No EPG" for old force_dummy_epg configs
+ return group.custom_properties.custom_epg_id.toString();
+ }
+ // Show "No EPG" if force_dummy_epg is set
+ if (group.custom_properties?.force_dummy_epg) {
return '0';
}
- return '0';
+ // Otherwise show empty/placeholder
+ return null;
})()}
onChange={(value) => {
- // Convert back: '0' means no EPG (null)
- const newValue =
- value === '0' ? null : parseInt(value);
- setGroupStates(
- groupStates.map((state) => {
- if (
- state.channel_group === group.channel_group
- ) {
- return {
- ...state,
- custom_properties: {
+ if (value === '0') {
+ // "No EPG (Disabled)" selected - use force_dummy_epg
+ setGroupStates(
+ groupStates.map((state) => {
+ if (
+ state.channel_group ===
+ group.channel_group
+ ) {
+ const newProps = {
...state.custom_properties,
- custom_epg_id: newValue,
- },
- };
- }
- return state;
- })
- );
+ };
+ delete newProps.custom_epg_id;
+ delete newProps.force_epg_selected;
+ newProps.force_dummy_epg = true;
+ return {
+ ...state,
+ custom_properties: newProps,
+ };
+ }
+ return state;
+ })
+ );
+ } else if (value) {
+ // Specific EPG source selected
+ const epgId = parseInt(value);
+ setGroupStates(
+ groupStates.map((state) => {
+ if (
+ state.channel_group ===
+ group.channel_group
+ ) {
+ const newProps = {
+ ...state.custom_properties,
+ };
+ newProps.custom_epg_id = epgId;
+ delete newProps.force_dummy_epg;
+ delete newProps.force_epg_selected;
+ return {
+ ...state,
+ custom_properties: newProps,
+ };
+ }
+ return state;
+ })
+ );
+ } else {
+ // Cleared - remove all EPG settings
+ setGroupStates(
+ groupStates.map((state) => {
+ if (
+ state.channel_group ===
+ group.channel_group
+ ) {
+ const newProps = {
+ ...state.custom_properties,
+ };
+ delete newProps.custom_epg_id;
+ delete newProps.force_dummy_epg;
+ delete newProps.force_epg_selected;
+ return {
+ ...state,
+ custom_properties: newProps,
+ };
+ }
+ return state;
+ })
+ );
+ }
}}
data={[
{ value: '0', label: 'No EPG (Disabled)' },
diff --git a/frontend/src/components/forms/Logo.jsx b/frontend/src/components/forms/Logo.jsx
index 8362b891..c6e63ba6 100644
--- a/frontend/src/components/forms/Logo.jsx
+++ b/frontend/src/components/forms/Logo.jsx
@@ -1,5 +1,6 @@
-import React, { useState, useEffect } from 'react';
-import { useFormik } from 'formik';
+import React, { useState, useEffect, useMemo } from 'react';
+import { useForm } from 'react-hook-form';
+import { yupResolver } from '@hookform/resolvers/yup';
import * as Yup from 'yup';
import {
Modal,
@@ -18,143 +19,148 @@ import { Upload, FileImage, X } from 'lucide-react';
import { notifications } from '@mantine/notifications';
import API from '../../api';
+const schema = Yup.object({
+ name: Yup.string().required('Name is required'),
+ url: Yup.string()
+ .required('URL is required')
+ .test(
+ 'valid-url-or-path',
+ 'Must be a valid URL or local file path',
+ (value) => {
+ if (!value) return false;
+ // Allow local file paths starting with /data/logos/
+ if (value.startsWith('/data/logos/')) return true;
+ // Allow valid URLs
+ try {
+ new URL(value);
+ return true;
+ } catch {
+ return false;
+ }
+ }
+ ),
+});
+
const LogoForm = ({ logo = null, isOpen, onClose, onSuccess }) => {
const [logoPreview, setLogoPreview] = useState(null);
const [uploading, setUploading] = useState(false);
const [selectedFile, setSelectedFile] = useState(null); // Store selected file
- const formik = useFormik({
- initialValues: {
- name: '',
- url: '',
- },
- validationSchema: Yup.object({
- name: Yup.string().required('Name is required'),
- url: Yup.string()
- .required('URL is required')
- .test(
- 'valid-url-or-path',
- 'Must be a valid URL or local file path',
- (value) => {
- if (!value) return false;
- // Allow local file paths starting with /data/logos/
- if (value.startsWith('/data/logos/')) return true;
- // Allow valid URLs
- try {
- new URL(value);
- return true;
- } catch {
- return false;
- }
- }
- ),
+ const defaultValues = useMemo(
+ () => ({
+ name: logo?.name || '',
+ url: logo?.url || '',
}),
- onSubmit: async (values, { setSubmitting }) => {
- try {
- setUploading(true);
- let uploadResponse = null; // Store upload response for later use
+ [logo]
+ );
- // If we have a selected file, upload it first
- if (selectedFile) {
- try {
- uploadResponse = await API.uploadLogo(selectedFile, values.name);
- // Use the uploaded file data instead of form values
- values.name = uploadResponse.name;
- values.url = uploadResponse.url;
- } catch (uploadError) {
- let errorMessage = 'Failed to upload logo file';
-
- if (
- uploadError.code === 'NETWORK_ERROR' ||
- uploadError.message?.includes('timeout')
- ) {
- errorMessage = 'Upload timed out. Please try again.';
- } else if (uploadError.status === 413) {
- errorMessage = 'File too large. Please choose a smaller file.';
- } else if (uploadError.body?.error) {
- errorMessage = uploadError.body.error;
- }
-
- notifications.show({
- title: 'Upload Error',
- message: errorMessage,
- color: 'red',
- });
- return; // Don't proceed with creation if upload fails
- }
- }
-
- // Now create or update the logo with the final values
- // Only proceed if we don't already have a logo from file upload
- if (logo) {
- const updatedLogo = await API.updateLogo(logo.id, values);
- notifications.show({
- title: 'Success',
- message: 'Logo updated successfully',
- color: 'green',
- });
- onSuccess?.({ type: 'update', logo: updatedLogo }); // Call onSuccess for updates
- } else if (!selectedFile) {
- // Only create a new logo entry if we're not uploading a file
- // (file upload already created the logo entry)
- const newLogo = await API.createLogo(values);
- notifications.show({
- title: 'Success',
- message: 'Logo created successfully',
- color: 'green',
- });
- onSuccess?.({ type: 'create', logo: newLogo }); // Call onSuccess for creates
- } else {
- // File was uploaded and logo was already created
- notifications.show({
- title: 'Success',
- message: 'Logo uploaded successfully',
- color: 'green',
- });
- onSuccess?.({ type: 'create', logo: uploadResponse });
- }
- onClose();
- } catch (error) {
- let errorMessage = logo
- ? 'Failed to update logo'
- : 'Failed to create logo';
-
- // Handle specific timeout errors
- if (
- error.code === 'NETWORK_ERROR' ||
- error.message?.includes('timeout')
- ) {
- errorMessage = 'Request timed out. Please try again.';
- } else if (error.response?.data?.error) {
- errorMessage = error.response.data.error;
- }
-
- notifications.show({
- title: 'Error',
- message: errorMessage,
- color: 'red',
- });
- } finally {
- setSubmitting(false);
- setUploading(false);
- }
- },
+ const {
+ register,
+ handleSubmit,
+ formState: { errors, isSubmitting },
+ reset,
+ setValue,
+ watch,
+ } = useForm({
+ defaultValues,
+ resolver: yupResolver(schema),
});
- useEffect(() => {
- if (logo) {
- formik.setValues({
- name: logo.name || '',
- url: logo.url || '',
+ const onSubmit = async (values) => {
+ try {
+ setUploading(true);
+ let uploadResponse = null; // Store upload response for later use
+
+ // If we have a selected file, upload it first
+ if (selectedFile) {
+ try {
+ uploadResponse = await API.uploadLogo(selectedFile, values.name);
+ // Use the uploaded file data instead of form values
+ values.name = uploadResponse.name;
+ values.url = uploadResponse.url;
+ } catch (uploadError) {
+ let errorMessage = 'Failed to upload logo file';
+
+ if (
+ uploadError.code === 'NETWORK_ERROR' ||
+ uploadError.message?.includes('timeout')
+ ) {
+ errorMessage = 'Upload timed out. Please try again.';
+ } else if (uploadError.status === 413) {
+ errorMessage = 'File too large. Please choose a smaller file.';
+ } else if (uploadError.body?.error) {
+ errorMessage = uploadError.body.error;
+ }
+
+ notifications.show({
+ title: 'Upload Error',
+ message: errorMessage,
+ color: 'red',
+ });
+ return; // Don't proceed with creation if upload fails
+ }
+ }
+
+ // Now create or update the logo with the final values
+ // Only proceed if we don't already have a logo from file upload
+ if (logo) {
+ const updatedLogo = await API.updateLogo(logo.id, values);
+ notifications.show({
+ title: 'Success',
+ message: 'Logo updated successfully',
+ color: 'green',
+ });
+ onSuccess?.({ type: 'update', logo: updatedLogo }); // Call onSuccess for updates
+ } else if (!selectedFile) {
+ // Only create a new logo entry if we're not uploading a file
+ // (file upload already created the logo entry)
+ const newLogo = await API.createLogo(values);
+ notifications.show({
+ title: 'Success',
+ message: 'Logo created successfully',
+ color: 'green',
+ });
+ onSuccess?.({ type: 'create', logo: newLogo }); // Call onSuccess for creates
+ } else {
+ // File was uploaded and logo was already created
+ notifications.show({
+ title: 'Success',
+ message: 'Logo uploaded successfully',
+ color: 'green',
+ });
+ onSuccess?.({ type: 'create', logo: uploadResponse });
+ }
+ onClose();
+ } catch (error) {
+ let errorMessage = logo
+ ? 'Failed to update logo'
+ : 'Failed to create logo';
+
+ // Handle specific timeout errors
+ if (
+ error.code === 'NETWORK_ERROR' ||
+ error.message?.includes('timeout')
+ ) {
+ errorMessage = 'Request timed out. Please try again.';
+ } else if (error.response?.data?.error) {
+ errorMessage = error.response.data.error;
+ }
+
+ notifications.show({
+ title: 'Error',
+ message: errorMessage,
+ color: 'red',
});
- setLogoPreview(logo.cache_url);
- } else {
- formik.resetForm();
- setLogoPreview(null);
+ } finally {
+ setUploading(false);
}
- // Clear any selected file when logo changes
+ };
+
+ useEffect(() => {
+ reset(defaultValues);
+ setLogoPreview(logo?.cache_url || null);
setSelectedFile(null);
- }, [logo, isOpen]);
+ }, [defaultValues, logo, reset]);
const handleFileSelect = (files) => {
if (files.length === 0) return;
@@ -180,18 +186,19 @@ const LogoForm = ({ logo = null, isOpen, onClose, onSuccess }) => {
setLogoPreview(previewUrl);
// Auto-fill the name field if empty
- if (!formik.values.name) {
+ const currentName = watch('name');
+ if (!currentName) {
const nameWithoutExtension = file.name.replace(/\.[^/.]+$/, '');
- formik.setFieldValue('name', nameWithoutExtension);
+ setValue('name', nameWithoutExtension);
}
// Set a placeholder URL (will be replaced after upload)
- formik.setFieldValue('url', 'file://pending-upload');
+ setValue('url', 'file://pending-upload');
};
const handleUrlChange = (event) => {
const url = event.target.value;
- formik.setFieldValue('url', url);
+ setValue('url', url);
// Clear any selected file when manually entering URL
if (selectedFile) {
@@ -219,7 +226,7 @@ const LogoForm = ({ logo = null, isOpen, onClose, onSuccess }) => {
const filename = pathname.substring(pathname.lastIndexOf('/') + 1);
const nameWithoutExtension = filename.replace(/\.[^/.]+$/, '');
if (nameWithoutExtension) {
- formik.setFieldValue('name', nameWithoutExtension);
+ setValue('name', nameWithoutExtension);
}
} catch (error) {
// If the URL is invalid, do nothing.
@@ -244,7 +251,7 @@ const LogoForm = ({ logo = null, isOpen, onClose, onSuccess }) => {
title={logo ? 'Edit Logo' : 'Add Logo'}
size="md"
>
-