diff --git a/frontend/src/WebSocket.jsx b/frontend/src/WebSocket.jsx index bb7b78c1..d12665fd 100644 --- a/frontend/src/WebSocket.jsx +++ b/frontend/src/WebSocket.jsx @@ -12,7 +12,7 @@ import { notifications } from '@mantine/notifications'; import useChannelsStore from './store/channels'; import usePlaylistsStore from './store/playlists'; import useEPGsStore from './store/epgs'; -import { Box, Button, Stack, Alert } from '@mantine/core'; +import { Box, Button, Stack, Alert, Group } from '@mantine/core'; import API from './api'; import useSettingsStore from './store/settings'; @@ -160,32 +160,6 @@ export const WebsocketProvider = ({ children }) => { }); break; - case 'm3u_group_refresh': - fetchChannelGroups(); - fetchPlaylists(); - - notifications.show({ - title: 'Group processing finished!', - autoClose: 5000, - message: ( - - Refresh M3U or filter out groups to pull in streams. - - - ), - color: 'green.5', - }); - break; - case 'm3u_refresh': // Update the store with progress information setRefreshProgress(parsedEvent.data); diff --git a/frontend/src/components/M3URefreshNotification.jsx b/frontend/src/components/M3URefreshNotification.jsx index 99c5a50d..1fbdaaec 100644 --- a/frontend/src/components/M3URefreshNotification.jsx +++ b/frontend/src/components/M3URefreshNotification.jsx @@ -6,6 +6,8 @@ import { IconCheck } from '@tabler/icons-react'; import useStreamsStore from '../store/streams'; import useChannelsStore from '../store/channels'; import useEPGsStore from '../store/epgs'; +import { Stack, Button, Group } from '@mantine/core'; +import API from '../api'; export default function M3URefreshNotification() { const playlists = usePlaylistsStore((s) => s.playlists); @@ -37,9 +39,37 @@ export default function M3URefreshNotification() { // Special handling for pending setup status if (data.status === "pending_setup") { + fetchChannelGroups(); + fetchPlaylists(); + notifications.show({ title: `M3U Setup: ${playlist.name}`, - message: data.message || "M3U groups loaded. Please select groups or refresh M3U to complete setup.", + message: ( + + {data.message || "M3U groups loaded. Please select groups or refresh M3U to complete setup."} + + + + + + ), color: 'orange.5', autoClose: 5000, // Keep visible a bit longer }); diff --git a/frontend/src/components/tables/M3UsTable.jsx b/frontend/src/components/tables/M3UsTable.jsx index 6876e639..e2b38f0d 100644 --- a/frontend/src/components/tables/M3UsTable.jsx +++ b/frontend/src/components/tables/M3UsTable.jsx @@ -62,6 +62,8 @@ const M3UTable = () => { const playlists = usePlaylistsStore((s) => s.playlists); const refreshProgress = usePlaylistsStore((s) => s.refreshProgress); const setRefreshProgress = usePlaylistsStore((s) => s.setRefreshProgress); + const editPlaylistId = usePlaylistsStore((s) => s.editPlaylistId); + const setEditPlaylistId = usePlaylistsStore((s) => s.setEditPlaylistId); const theme = useMantineTheme(); const [tableSize] = useLocalStorage('table-size', 'default'); @@ -491,6 +493,18 @@ const M3UTable = () => { } }, [sorting]); + // Listen for edit playlist requests from notifications + useEffect(() => { + if (editPlaylistId) { + const playlistToEdit = playlists.find(p => p.id === editPlaylistId); + if (playlistToEdit) { + editPlaylist(playlistToEdit); + // Reset the ID after handling + setEditPlaylistId(null); + } + } + }, [editPlaylistId, playlists]); + const tableDensity = tableSize === 'compact' ? 'xs' : tableSize === 'large' ? 'xl' : 'md'; const table = useMantineReactTable({ diff --git a/frontend/src/store/playlists.jsx b/frontend/src/store/playlists.jsx index bcdfff27..87d8f3b8 100644 --- a/frontend/src/store/playlists.jsx +++ b/frontend/src/store/playlists.jsx @@ -11,6 +11,14 @@ const usePlaylistsStore = create((set) => ({ profileSearchPreview: '', profileResult: '', + // Add a state variable to trigger M3U editing + editPlaylistId: null, + + setEditPlaylistId: (id) => + set((state) => ({ + editPlaylistId: id, + })), + fetchPlaylists: async () => { set({ isLoading: true, error: null }); try {