+
{/* Simple header row with a close button */}
-
-
+
+ e.stopPropagation()}
+ onTouchStart={(e) => e.stopPropagation()}
+ style={{
+ minHeight: '32px',
+ minWidth: '32px',
+ cursor: 'pointer',
+ touchAction: 'manipulation',
+ }}
+ />
- {/* The
);
diff --git a/frontend/src/components/GuideRow.jsx b/frontend/src/components/GuideRow.jsx
new file mode 100644
index 00000000..7780ecff
--- /dev/null
+++ b/frontend/src/components/GuideRow.jsx
@@ -0,0 +1,206 @@
+import React from "react";
+import {
+ CHANNEL_WIDTH,
+ EXPANDED_PROGRAM_HEIGHT,
+ HOUR_WIDTH,
+ PROGRAM_HEIGHT,
+} from '../pages/guideUtils.js';
+import {Box, Flex, Text} from "@mantine/core";
+import {Play} from "lucide-react";
+import logo from "../images/logo.png";
+
+const GuideRow = React.memo(({ index, style, data }) => {
+ const {
+ filteredChannels,
+ programsByChannelId,
+ expandedProgramId,
+ rowHeights,
+ logos,
+ hoveredChannelId,
+ setHoveredChannelId,
+ renderProgram,
+ handleLogoClick,
+ contentWidth,
+ } = data;
+
+ const channel = filteredChannels[index];
+ if (!channel) {
+ return null;
+ }
+
+ const channelPrograms = programsByChannelId.get(channel.id) || [];
+ const rowHeight =
+ rowHeights[index] ??
+ (channelPrograms.some((program) => program.id === expandedProgramId)
+ ? EXPANDED_PROGRAM_HEIGHT
+ : PROGRAM_HEIGHT);
+
+ const PlaceholderProgram = () => {
+ return <>
+ {Array.from({length: Math.ceil(24 / 2)}).map(
+ (_, placeholderIndex) => (
+
+ No program data
+
+ )
+ )}
+ ;
+ }
+
+ return (
+
+
+ handleLogoClick(channel, event)}
+ onMouseEnter={() => setHoveredChannelId(channel.id)}
+ onMouseLeave={() => setHoveredChannelId(null)}
+ >
+ {hoveredChannelId === channel.id && (
+
+
+
+ )}
+
+
+
+ 
+
+
+
+ {channel.channel_number || '-'}
+
+
+
+
+
+ {channelPrograms.length > 0 ? (
+ channelPrograms.map((program) =>
+ renderProgram(program, undefined, channel)
+ )
+ ) : }
+
+
+
{
+ if (!hasError) {
+ setHasError(true);
+ e.target.src = fallbackSrc;
+ }
+ }}
+ {...props}
+ />
+ );
+};
+
+export default LazyLogo;
diff --git a/frontend/src/components/M3URefreshNotification.jsx b/frontend/src/components/M3URefreshNotification.jsx
index 9e469f43..b9819b4e 100644
--- a/frontend/src/components/M3URefreshNotification.jsx
+++ b/frontend/src/components/M3URefreshNotification.jsx
@@ -2,20 +2,27 @@
import React, { useEffect, useState } from 'react';
import usePlaylistsStore from '../store/playlists';
import { notifications } from '@mantine/notifications';
-import { IconCheck } from '@tabler/icons-react';
import useStreamsStore from '../store/streams';
import useChannelsStore from '../store/channels';
import useEPGsStore from '../store/epgs';
+import useVODStore from '../store/useVODStore';
+import { Stack, Button, Group } from '@mantine/core';
+import API from '../api';
+import { useNavigate } from 'react-router-dom';
+import { CircleCheck } from 'lucide-react';
export default function M3URefreshNotification() {
const playlists = usePlaylistsStore((s) => s.playlists);
const refreshProgress = usePlaylistsStore((s) => s.refreshProgress);
const fetchStreams = useStreamsStore((s) => s.fetchStreams);
const fetchChannelGroups = useChannelsStore((s) => s.fetchChannelGroups);
+ const fetchChannels = useChannelsStore((s) => s.fetchChannels);
const fetchPlaylists = usePlaylistsStore((s) => s.fetchPlaylists);
const fetchEPGData = useEPGsStore((s) => s.fetchEPGData);
+ const fetchCategories = useVODStore((s) => s.fetchCategories);
const [notificationStatus, setNotificationStatus] = useState({});
+ const navigate = useNavigate();
const handleM3UUpdate = (data) => {
if (
@@ -24,18 +31,87 @@ export default function M3URefreshNotification() {
return;
}
- console.log(data);
const playlist = playlists.find((pl) => pl.id == data.account);
+ if (!playlist) {
+ return;
+ }
+ // Store the updated status first
setNotificationStatus({
...notificationStatus,
[data.account]: data,
});
+ // 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. Configure group filters and auto channel sync settings.'}
+
+
+
+
+
+ ),
+ color: 'orange.5',
+ autoClose: 5000, // Keep visible a bit longer
+ });
+ return;
+ }
+
+ // Check for error status FIRST before doing anything else
+ if (data.status === 'error') {
+ // Only show the error notification if we have a complete task (progress=100)
+ // or if it's explicitly flagged as an error
+ if (data.progress === 100) {
+ notifications.show({
+ title: `M3U Processing: ${playlist.name}`,
+ message: `${data.action || 'Processing'} failed: ${data.error || 'Unknown error'}`,
+ color: 'red',
+ autoClose: 5000, // Keep error visible a bit longer
+ });
+ }
+ return; // Exit early for any error status
+ }
+
+ // Check if we already have an error stored for this account, and if so, don't show further notifications
+ const currentStatus = notificationStatus[data.account];
+ if (currentStatus && currentStatus.status === 'error') {
+ // Don't show any other notifications once we've hit an error
+ return;
+ }
+
const taskProgress = data.progress;
+ // Only show start and completion notifications for normal operation
if (data.progress != 0 && data.progress != 100) {
- console.log('not 0 or 100');
return;
}
@@ -52,6 +128,10 @@ export default function M3URefreshNotification() {
case 'processing_groups':
message = 'Group parsing';
break;
+
+ case 'vod_refresh':
+ message = 'VOD content refresh';
+ break;
}
if (taskProgress == 0) {
@@ -59,13 +139,20 @@ export default function M3URefreshNotification() {
} else if (taskProgress == 100) {
message = `${message} complete!`;
+ // Only trigger additional fetches on successful completion
if (data.action == 'parsing') {
fetchStreams();
+ API.requeryChannels();
+ fetchChannels();
} else if (data.action == 'processing_groups') {
fetchStreams();
fetchChannelGroups();
fetchEPGData();
fetchPlaylists();
+ } else if (data.action == 'vod_refresh') {
+ // VOD refresh completed, trigger VOD categories refresh
+ fetchPlaylists(); // Refresh playlist data to show updated VOD info
+ fetchCategories(); // Refresh VOD categories to make them visible
}
}
@@ -74,11 +161,23 @@ export default function M3URefreshNotification() {
message,
loading: taskProgress == 0,
autoClose: 2000,
- icon: taskProgress == 100 ? : null,
+ icon: taskProgress == 100 ? : null,
});
};
useEffect(() => {
+ // Reset notificationStatus when playlists change to prevent stale data
+ if (playlists.length > 0 && Object.keys(notificationStatus).length > 0) {
+ const validIds = playlists.map((p) => p.id);
+ const currentIds = Object.keys(notificationStatus).map(Number);
+
+ // If we have notification statuses for playlists that no longer exist, reset the state
+ if (!currentIds.every((id) => validIds.includes(id))) {
+ setNotificationStatus({});
+ }
+ }
+
+ // Process all refresh progress updates
Object.values(refreshProgress).map((data) => handleM3UUpdate(data));
}, [playlists, refreshProgress]);
diff --git a/frontend/src/components/Navigation.js b/frontend/src/components/Navigation.js
deleted file mode 100644
index 21a4337d..00000000
--- a/frontend/src/components/Navigation.js
+++ /dev/null
@@ -1,11 +0,0 @@
-// ...existing imports...
-
-const menuItems = [
- // existing items go here,
- {
- key: 'proxy',
- label: 'Proxy Manager',
- icon: ,
- path: '/proxy',
- },
-];
\ No newline at end of file
diff --git a/frontend/src/components/ProxyManager.js b/frontend/src/components/ProxyManager.js
deleted file mode 100644
index 7baa3154..00000000
--- a/frontend/src/components/ProxyManager.js
+++ /dev/null
@@ -1,82 +0,0 @@
-import React, { useState } from 'react';
-import { Button, Form, Input, Select, message } from 'antd';
-import axios from 'axios';
-
-const { Option } = Select;
-
-const ProxyManager = () => {
- const [form] = Form.useForm();
- const [loading, setLoading] = useState(false);
-
- const handleSubmit = async (values) => {
- setLoading(true);
- try {
- const { action, ...data } = values;
- await axios.post(`/proxy/api/proxy/${action}/`, data);
- message.success(`Proxy ${action} successful`);
- form.resetFields();
- } catch (error) {
- message.error(error.response?.data?.error || 'An error occurred');
- } finally {
- setLoading(false);
- }
- };
-
- return (
-
-
Proxy Manager
-
-
- );
-};
-
-export default ProxyManager;
\ No newline at end of file
diff --git a/frontend/src/components/RecordingSynopsis.jsx b/frontend/src/components/RecordingSynopsis.jsx
new file mode 100644
index 00000000..bf668afe
--- /dev/null
+++ b/frontend/src/components/RecordingSynopsis.jsx
@@ -0,0 +1,26 @@
+import { Text, } from '@mantine/core';
+
+// Short preview that triggers the details modal when clicked
+const RecordingSynopsis = ({ description, onOpen }) => {
+ const truncated = description?.length > 140;
+ const preview = truncated
+ ? `${description.slice(0, 140).trim()}...`
+ : description;
+
+ if (!description) return null;
+
+ return (
+ onOpen?.()}
+ style={{ cursor: 'pointer' }}
+ >
+ {preview}
+
+ );
+};
+
+export default RecordingSynopsis;
\ No newline at end of file
diff --git a/frontend/src/components/SeriesModal.jsx b/frontend/src/components/SeriesModal.jsx
new file mode 100644
index 00000000..05023712
--- /dev/null
+++ b/frontend/src/components/SeriesModal.jsx
@@ -0,0 +1,950 @@
+import React, { useState, useEffect } from 'react';
+import {
+ Box,
+ Button,
+ Flex,
+ Group,
+ Image,
+ Text,
+ Title,
+ Select,
+ Badge,
+ Loader,
+ Stack,
+ ActionIcon,
+ Modal,
+ Tabs,
+ Table,
+ Divider,
+} from '@mantine/core';
+import { Play, Copy } from 'lucide-react';
+import { notifications } from '@mantine/notifications';
+import { copyToClipboard } from '../utils';
+import useVODStore from '../store/useVODStore';
+import useVideoStore from '../store/useVideoStore';
+import useSettingsStore from '../store/settings';
+
+const imdbUrl = (imdb_id) =>
+ imdb_id ? `https://www.imdb.com/title/${imdb_id}` : '';
+const tmdbUrl = (tmdb_id, type = 'movie') =>
+ tmdb_id ? `https://www.themoviedb.org/${type}/${tmdb_id}` : '';
+const formatDuration = (seconds) => {
+ if (!seconds) return '';
+ const hours = Math.floor(seconds / 3600);
+ const mins = Math.floor((seconds % 3600) / 60);
+ const secs = seconds % 60;
+ return hours > 0 ? `${hours}h ${mins}m` : `${mins}m ${secs}s`;
+};
+
+const formatStreamLabel = (relation) => {
+ // Create a label for the stream that includes provider name and stream-specific info
+ const provider = relation.m3u_account.name;
+ const streamId = relation.stream_id;
+
+ // Try to extract quality info - prioritizing the new quality_info field from backend
+ let qualityInfo = '';
+
+ // 1. Check the new quality_info field from backend (PRIMARY)
+ if (relation.quality_info) {
+ if (relation.quality_info.quality) {
+ qualityInfo = ` - ${relation.quality_info.quality}`;
+ } else if (relation.quality_info.resolution) {
+ qualityInfo = ` - ${relation.quality_info.resolution}`;
+ } else if (relation.quality_info.bitrate) {
+ qualityInfo = ` - ${relation.quality_info.bitrate}`;
+ }
+ }
+
+ // 2. Fallback: Check custom_properties detailed info structure
+ if (qualityInfo === '' && relation.custom_properties) {
+ const props = relation.custom_properties;
+
+ // Check detailed_info structure (where the real data is!)
+ if (qualityInfo === '' && props.detailed_info) {
+ const detailedInfo = props.detailed_info;
+
+ // Extract from video resolution
+ if (
+ detailedInfo.video &&
+ detailedInfo.video.width &&
+ detailedInfo.video.height
+ ) {
+ const width = detailedInfo.video.width;
+ const height = detailedInfo.video.height;
+
+ // Prioritize width for quality detection (handles ultrawide/cinematic aspect ratios)
+ if (width >= 3840) {
+ qualityInfo = ' - 4K';
+ } else if (width >= 1920) {
+ qualityInfo = ' - 1080p';
+ } else if (width >= 1280) {
+ qualityInfo = ' - 720p';
+ } else if (width >= 854) {
+ qualityInfo = ' - 480p';
+ } else {
+ qualityInfo = ` - ${width}x${height}`;
+ }
+ }
+
+ // Extract from movie name in detailed_info
+ if (qualityInfo === '' && detailedInfo.name) {
+ const name = detailedInfo.name;
+ if (name.includes('4K') || name.includes('2160p')) {
+ qualityInfo = ' - 4K';
+ } else if (name.includes('1080p') || name.includes('FHD')) {
+ qualityInfo = ' - 1080p';
+ } else if (name.includes('720p') || name.includes('HD')) {
+ qualityInfo = ' - 720p';
+ } else if (name.includes('480p')) {
+ qualityInfo = ' - 480p';
+ }
+ }
+ }
+ }
+
+ // 3. Final fallback: Check stream name for quality markers
+ if (qualityInfo === '' && relation.stream_name) {
+ const streamName = relation.stream_name;
+ if (streamName.includes('4K') || streamName.includes('2160p')) {
+ qualityInfo = ' - 4K';
+ } else if (streamName.includes('1080p') || streamName.includes('FHD')) {
+ qualityInfo = ' - 1080p';
+ } else if (streamName.includes('720p') || streamName.includes('HD')) {
+ qualityInfo = ' - 720p';
+ } else if (streamName.includes('480p')) {
+ qualityInfo = ' - 480p';
+ }
+ }
+
+ return `${provider}${qualityInfo}${streamId ? ` (Stream ${streamId})` : ''}`;
+};
+
+const SeriesModal = ({ series, opened, onClose }) => {
+ const { fetchSeriesInfo, fetchSeriesProviders } = useVODStore();
+ const showVideo = useVideoStore((s) => s.showVideo);
+ const env_mode = useSettingsStore((s) => s.environment.env_mode);
+ const [detailedSeries, setDetailedSeries] = useState(null);
+ const [loadingDetails, setLoadingDetails] = useState(false);
+ const [activeTab, setActiveTab] = useState(null);
+ const [expandedEpisode, setExpandedEpisode] = useState(null);
+ const [trailerModalOpened, setTrailerModalOpened] = useState(false);
+ const [trailerUrl, setTrailerUrl] = useState('');
+ const [providers, setProviders] = useState([]);
+ const [selectedProvider, setSelectedProvider] = useState(null);
+ const [loadingProviders, setLoadingProviders] = useState(false);
+
+ useEffect(() => {
+ if (opened && series) {
+ // Fetch detailed series info which now includes episodes
+ setLoadingDetails(true);
+ fetchSeriesInfo(series.id)
+ .then((details) => {
+ setDetailedSeries(details);
+ // Check if episodes were fetched
+ if (!details.episodes_fetched) {
+ // Episodes not yet fetched, may need to wait for background fetch
+ }
+ })
+ .catch((error) => {
+ console.warn(
+ 'Failed to fetch series details, using basic info:',
+ error
+ );
+ setDetailedSeries(series); // Fallback to basic data
+ })
+ .finally(() => {
+ setLoadingDetails(false);
+ });
+
+ // Fetch available providers
+ setLoadingProviders(true);
+ fetchSeriesProviders(series.id)
+ .then((providersData) => {
+ setProviders(providersData);
+ // Set the first provider as default if none selected
+ if (providersData.length > 0 && !selectedProvider) {
+ setSelectedProvider(providersData[0]);
+ }
+ })
+ .catch((error) => {
+ console.error('Failed to fetch series providers:', error);
+ setProviders([]);
+ })
+ .finally(() => {
+ setLoadingProviders(false);
+ });
+ }
+ }, [opened, series, fetchSeriesInfo, fetchSeriesProviders, selectedProvider]);
+
+ useEffect(() => {
+ if (!opened) {
+ setDetailedSeries(null);
+ setLoadingDetails(false);
+ setProviders([]);
+ setSelectedProvider(null);
+ setLoadingProviders(false);
+ }
+ }, [opened]);
+
+ // Get episodes from the store based on the series ID
+ const seriesEpisodes = React.useMemo(() => {
+ if (!detailedSeries) return [];
+
+ // Try to get episodes from the fetched data
+ if (detailedSeries.episodesList) {
+ return detailedSeries.episodesList.sort((a, b) => {
+ if (a.season_number !== b.season_number) {
+ return (a.season_number || 0) - (b.season_number || 0);
+ }
+ return (a.episode_number || 0) - (b.episode_number || 0);
+ });
+ }
+
+ // If no episodes in detailed series, return empty array
+ return [];
+ }, [detailedSeries]);
+
+ // Group episodes by season
+ const episodesBySeason = React.useMemo(() => {
+ const grouped = {};
+ seriesEpisodes.forEach((episode) => {
+ const season = episode.season_number || 1;
+ if (!grouped[season]) {
+ grouped[season] = [];
+ }
+ grouped[season].push(episode);
+ });
+ return grouped;
+ }, [seriesEpisodes]);
+
+ // Get available seasons sorted
+ const seasons = React.useMemo(() => {
+ return Object.keys(episodesBySeason)
+ .map(Number)
+ .sort((a, b) => a - b);
+ }, [episodesBySeason]);
+
+ // Update active tab when seasons change or modal opens
+ React.useEffect(() => {
+ if (seasons.length > 0) {
+ if (
+ !activeTab ||
+ !seasons.includes(parseInt(activeTab.replace('season-', '')))
+ ) {
+ setActiveTab(`season-${seasons[0]}`);
+ }
+ }
+ }, [seasons, activeTab]);
+
+ // Reset tab when modal closes
+ React.useEffect(() => {
+ if (!opened) {
+ setActiveTab(null);
+ }
+ }, [opened]);
+
+ const handlePlayEpisode = (episode) => {
+ let streamUrl = `/proxy/vod/episode/${episode.uuid}`;
+
+ // Add selected provider as query parameter if available
+ if (selectedProvider) {
+ // Use stream_id for most specific selection, fallback to account_id
+ if (selectedProvider.stream_id) {
+ streamUrl += `?stream_id=${encodeURIComponent(selectedProvider.stream_id)}`;
+ } else {
+ streamUrl += `?m3u_account_id=${selectedProvider.m3u_account.id}`;
+ }
+ }
+
+ if (env_mode === 'dev') {
+ streamUrl = `${window.location.protocol}//${window.location.hostname}:5656${streamUrl}`;
+ } else {
+ streamUrl = `${window.location.origin}${streamUrl}`;
+ }
+ showVideo(streamUrl, 'vod', episode);
+ };
+
+ const getEpisodeStreamUrl = (episode) => {
+ let streamUrl = `/proxy/vod/episode/${episode.uuid}`;
+
+ // Add selected provider as query parameter if available
+ if (selectedProvider) {
+ // Use stream_id for most specific selection, fallback to account_id
+ if (selectedProvider.stream_id) {
+ streamUrl += `?stream_id=${encodeURIComponent(selectedProvider.stream_id)}`;
+ } else {
+ streamUrl += `?m3u_account_id=${selectedProvider.m3u_account.id}`;
+ }
+ }
+
+ if (env_mode === 'dev') {
+ streamUrl = `${window.location.protocol}//${window.location.hostname}:5656${streamUrl}`;
+ } else {
+ streamUrl = `${window.location.origin}${streamUrl}`;
+ }
+ return streamUrl;
+ };
+
+ const handleCopyEpisodeLink = async (episode) => {
+ const streamUrl = getEpisodeStreamUrl(episode);
+ const success = await copyToClipboard(streamUrl);
+ notifications.show({
+ title: success ? 'Link Copied!' : 'Copy Failed',
+ message: success
+ ? 'Episode link copied to clipboard'
+ : 'Failed to copy link to clipboard',
+ color: success ? 'green' : 'red',
+ });
+ };
+
+ const handleEpisodeRowClick = (episode) => {
+ setExpandedEpisode(expandedEpisode === episode.id ? null : episode.id);
+ };
+
+ // Helper to get embeddable YouTube URL
+ const getEmbedUrl = (url) => {
+ if (!url) return '';
+ // Accepts full YouTube URLs or just IDs
+ const match = url.match(/(?:youtube\.com\/watch\?v=|youtu\.be\/)([\w-]+)/);
+ const videoId = match ? match[1] : url;
+ return `https://www.youtube.com/embed/${videoId}`;
+ };
+
+ if (!series) return null;
+
+ // Use detailed data if available, otherwise use basic series data
+ const displaySeries = detailedSeries || series;
+
+ return (
+ <>
+
+
+ {/* Backdrop image as background */}
+ {displaySeries.backdrop_path &&
+ displaySeries.backdrop_path.length > 0 && (
+ <>
+
+ {/* Overlay for readability */}
+
+
+ )}
+
+ {/* Modal content above backdrop */}
+
+
+ {loadingDetails && (
+
+
+
+ Loading series details and episodes...
+
+
+ )}
+
+ {/* Series poster and basic info */}
+
+ {displaySeries.series_image || displaySeries.logo?.url ? (
+
+
+
+ ) : (
+
+
+
+ )}
+
+
+ {displaySeries.name}
+
+ {/* Original name if different */}
+ {displaySeries.o_name &&
+ displaySeries.o_name !== displaySeries.name && (
+
+ Original: {displaySeries.o_name}
+
+ )}
+
+
+ {displaySeries.year && (
+ {displaySeries.year}
+ )}
+ {displaySeries.rating && (
+ {displaySeries.rating}
+ )}
+ {displaySeries.age && (
+ {displaySeries.age}
+ )}
+ Series
+ {displaySeries.episode_count && (
+
+ {displaySeries.episode_count} episodes
+
+ )}
+ {/* imdb_id and tmdb_id badges */}
+ {displaySeries.imdb_id && (
+
+ IMDb
+
+ )}
+ {displaySeries.tmdb_id && (
+
+ TMDb
+
+ )}
+
+
+ {/* Release date */}
+ {displaySeries.release_date && (
+
+ Release Date:{' '}
+ {displaySeries.release_date}
+
+ )}
+
+ {displaySeries.genre && (
+
+ Genre: {displaySeries.genre}
+
+ )}
+
+ {displaySeries.director && (
+
+ Director: {displaySeries.director}
+
+ )}
+
+ {displaySeries.cast && (
+
+ Cast: {displaySeries.cast}
+
+ )}
+
+ {displaySeries.country && (
+
+ Country: {displaySeries.country}
+
+ )}
+
+ {/* Description */}
+ {displaySeries.description && (
+
+
+ Description
+
+ {displaySeries.description}
+
+ )}
+
+ {/* Watch Trailer button if available */}
+ {displaySeries.youtube_trailer && (
+
+ )}
+
+
+
+ {/* Provider Information */}
+
+
+ Stream Selection
+ {loadingProviders && (
+
+ )}
+
+ {providers.length === 0 &&
+ !loadingProviders &&
+ displaySeries.m3u_account ? (
+
+
+ {displaySeries.m3u_account.name}
+
+
+ ) : providers.length === 1 ? (
+
+
+ {providers[0].m3u_account.name}
+
+ {providers[0].stream_id && (
+
+ Stream {providers[0].stream_id}
+
+ )}
+
+ ) : providers.length > 1 ? (
+
+
+
+
+
+ Episodes
+ {seriesEpisodes.length > 0 && <> ({seriesEpisodes.length})</>}
+
+
+ {loadingDetails ? (
+
+
+
+ ) : seasons.length > 0 ? (
+
+
+ {seasons.map((season) => (
+
+ Season {season}
+
+ ))}
+
+
+ {seasons.map((season) => (
+
+
+
+
+ Ep
+ Title
+
+ Duration
+
+ Date
+
+ Action
+
+
+
+
+ {episodesBySeason[season]?.map((episode) => (
+
+ handleEpisodeRowClick(episode)}
+ >
+
+
+ {episode.episode_number || '?'}
+
+
+
+
+
+ {episode.name}
+
+ {episode.genre && (
+
+ {episode.genre}
+
+ )}
+
+
+
+
+ {formatDuration(episode.duration_secs)}
+
+
+
+
+ {episode.air_date
+ ? new Date(
+ episode.air_date
+ ).toLocaleDateString()
+ : 'N/A'}
+
+
+
+
+ 0 &&
+ !selectedProvider
+ }
+ onClick={(e) => {
+ e.stopPropagation();
+ handlePlayEpisode(episode);
+ }}
+ >
+
+
+ {
+ e.stopPropagation();
+ handleCopyEpisodeLink(episode);
+ }}
+ >
+
+
+
+
+
+ {expandedEpisode === episode.id && (
+
+
+
+ {/* Episode Image and Description Row */}
+
+ {/* Episode Image */}
+ {episode.movie_image && (
+
+
+
+ )}
+
+ {/* Episode Description */}
+
+ {episode.description && (
+
+
+ Description
+
+
+ {episode.description}
+
+
+ )}
+
+
+
+ {/* Additional Episode Details */}
+
+ {episode.rating && (
+
+
+ Rating
+
+
+ {episode.rating}
+
+
+ )}
+ {/* IMDb and TMDb badges for episode */}
+ {(episode.imdb_id ||
+ displaySeries.tmdb_id) && (
+
+
+ Links
+
+ {episode.imdb_id && (
+
+ IMDb
+
+ )}
+ {displaySeries.tmdb_id && (
+
+ TMDb
+
+ )}
+
+ )}
+
+ {episode.director && (
+
+
+ Director
+
+
+ {episode.director}
+
+
+ )}
+
+ {episode.actors && (
+
+
+ Cast
+
+
+ {episode.actors}
+
+
+ )}
+
+
+ {/* Technical Details */}
+ {(episode.bitrate ||
+ episode.video ||
+ episode.audio) && (
+
+
+ Technical Details
+
+
+ {episode.bitrate &&
+ episode.bitrate > 0 && (
+
+ Bitrate:{' '}
+ {episode.bitrate} kbps
+
+ )}
+ {episode.video &&
+ Object.keys(episode.video)
+ .length > 0 && (
+
+ Video:{' '}
+ {episode.video
+ .codec_long_name ||
+ episode.video.codec_name}
+ {episode.video.width &&
+ episode.video.height
+ ? `, ${episode.video.width}x${episode.video.height}`
+ : ''}
+
+ )}
+ {episode.audio &&
+ Object.keys(episode.audio)
+ .length > 0 && (
+
+ Audio:{' '}
+ {episode.audio
+ .codec_long_name ||
+ episode.audio.codec_name}
+ {episode.audio.channels
+ ? `, ${episode.audio.channels} channels`
+ : ''}
+
+ )}
+
+
+ )}
+
+ {/* Provider Information */}
+ {episode.m3u_account && (
+
+
+ Provider:
+
+
+ {episode.m3u_account.name ||
+ episode.m3u_account}
+
+
+ )}
+
+
+
+ )}
+
+ ))}
+
+
+
+ ))}
+
+ ) : (
+
+ No episodes found for this series.
+
+ )}
+
+
+
+
+
+ {/* YouTube Trailer Modal */}
+ setTrailerModalOpened(false)}
+ title="Trailer"
+ size="xl"
+ centered
+ >
+
+ {trailerUrl && (
+
+ )}
+
+
+
+ );
+};
+
+export default SeriesModal;
diff --git a/frontend/src/components/Sidebar.jsx b/frontend/src/components/Sidebar.jsx
index eb5a2226..d8c3fae8 100644
--- a/frontend/src/components/Sidebar.jsx
+++ b/frontend/src/components/Sidebar.jsx
@@ -1,5 +1,6 @@
import React, { useRef, useEffect, useState } from 'react';
import { Link, useLocation } from 'react-router-dom';
+import { copyToClipboard } from '../utils';
import {
ListOrdered,
Play,
@@ -10,6 +11,10 @@ import {
Copy,
ChartLine,
Video,
+ PlugZap,
+ LogOut,
+ User,
+ FileImage,
} from 'lucide-react';
import {
Avatar,
@@ -21,13 +26,17 @@ import {
UnstyledButton,
TextInput,
ActionIcon,
+ Menu,
} from '@mantine/core';
+import { notifications } from '@mantine/notifications';
import logo from '../images/logo.png';
import useChannelsStore from '../store/channels';
import './sidebar.css';
import useSettingsStore from '../store/settings';
import useAuthStore from '../store/auth'; // Add this import
import API from '../api';
+import { USER_LEVELS } from '../constants';
+import UserForm from './forms/User';
const NavLink = ({ item, isActive, collapsed }) => {
return (
@@ -63,11 +72,77 @@ const NavLink = ({ item, isActive, collapsed }) => {
const Sidebar = ({ collapsed, toggleDrawer, drawerWidth, miniDrawerWidth }) => {
const location = useLocation();
+
const channels = useChannelsStore((s) => s.channels);
const environment = useSettingsStore((s) => s.environment);
const isAuthenticated = useAuthStore((s) => s.isAuthenticated);
+ const authUser = useAuthStore((s) => s.user);
+ const logout = useAuthStore((s) => s.logout);
+
const publicIPRef = useRef(null);
- const [appVersion, setAppVersion] = useState({ version: '', timestamp: null });
+
+ const [appVersion, setAppVersion] = useState({
+ version: '',
+ timestamp: null,
+ });
+ const [userFormOpen, setUserFormOpen] = useState(false);
+
+ const closeUserForm = () => setUserFormOpen(false);
+
+ // Navigation Items
+ const navItems =
+ authUser && authUser.user_level == USER_LEVELS.ADMIN
+ ? [
+ {
+ label: 'Channels',
+ icon: ,
+ path: '/channels',
+ badge: `(${Object.keys(channels).length})`,
+ },
+ {
+ label: 'VODs',
+ path: '/vods',
+ icon: ,
+ },
+ {
+ label: 'M3U & EPG Manager',
+ icon: ,
+ path: '/sources',
+ },
+ { label: 'TV Guide', icon: , path: '/guide' },
+ { label: 'DVR', icon: , path: '/dvr' },
+ { label: 'Stats', icon: , path: '/stats' },
+ { label: 'Plugins', icon: , path: '/plugins' },
+ {
+ label: 'Users',
+ icon: ,
+ path: '/users',
+ },
+ {
+ label: 'Logo Manager',
+ icon: ,
+ path: '/logos',
+ },
+ {
+ label: 'Settings',
+ icon: ,
+ path: '/settings',
+ },
+ ]
+ : [
+ {
+ label: 'Channels',
+ icon: ,
+ path: '/channels',
+ badge: `(${Object.keys(channels).length})`,
+ },
+ { label: 'TV Guide', icon: , path: '/guide' },
+ {
+ label: 'Settings',
+ icon: ,
+ path: '/settings',
+ },
+ ];
// Fetch environment settings including version on component mount
useEffect(() => {
@@ -99,42 +174,25 @@ const Sidebar = ({ collapsed, toggleDrawer, drawerWidth, miniDrawerWidth }) => {
fetchVersion();
}, []);
- // Navigation Items
- const navItems = [
- {
- label: 'Channels',
- icon: ,
- path: '/channels',
- badge: `(${Object.keys(channels).length})`,
- },
- { label: 'M3U & EPG Manager', icon: , path: '/sources' },
- { label: 'TV Guide', icon: , path: '/guide' },
- { label: 'DVR', icon: , path: '/dvr' },
- { label: 'Stats', icon: , path: '/stats' },
- {
- label: 'Settings',
- icon: ,
- path: '/settings',
- },
- ];
const copyPublicIP = async () => {
- try {
- await navigator.clipboard.writeText(environment.public_ip);
- } catch (err) {
- const inputElement = publicIPRef.current; // Get the actual input
- console.log(inputElement);
-
- if (inputElement) {
- inputElement.focus();
- inputElement.select();
-
- // For older browsers
- document.execCommand('copy');
- }
+ const success = await copyToClipboard(environment.public_ip);
+ if (success) {
+ notifications.show({
+ title: 'Success',
+ message: 'Public IP copied to clipboard',
+ color: 'green',
+ });
+ } else {
+ console.error('Failed to copy public IP to clipboard');
}
};
+ const onLogout = async () => {
+ await logout();
+ window.location.reload();
+ };
+
return (
{
label="Public IP"
ref={publicIPRef}
value={environment.public_ip}
+ readOnly={true}
leftSection={
environment.country_code && (
![]()
{
/>
)}
-
- {!collapsed && (
+
+ {!collapsed && authUser && (
{
whiteSpace: 'nowrap',
}}
>
-
- John Doe
-
-
- •••
-
+ setUserFormOpen(true)}>
+ {authUser.first_name || authUser.username}
+
+
+
+
+
)}
@@ -269,6 +329,8 @@ const Sidebar = ({ collapsed, toggleDrawer, drawerWidth, miniDrawerWidth }) => {
{appVersion?.timestamp ? `-${appVersion.timestamp}` : ''}
)}
+
+
);
};
diff --git a/frontend/src/components/SystemEvents.jsx b/frontend/src/components/SystemEvents.jsx
new file mode 100644
index 00000000..855603c0
--- /dev/null
+++ b/frontend/src/components/SystemEvents.jsx
@@ -0,0 +1,333 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import {
+ ActionIcon,
+ Box,
+ Button,
+ Card,
+ Group,
+ NumberInput,
+ Pagination,
+ Select,
+ Stack,
+ Text,
+ Title,
+} from '@mantine/core';
+import { useElementSize } from '@mantine/hooks';
+import {
+ ChevronDown,
+ CirclePlay,
+ Download,
+ Gauge,
+ HardDriveDownload,
+ List,
+ LogIn,
+ LogOut,
+ RefreshCw,
+ Shield,
+ ShieldAlert,
+ SquareX,
+ Timer,
+ Users,
+ Video,
+ XCircle,
+} from 'lucide-react';
+import dayjs from 'dayjs';
+import API from '../api';
+import useLocalStorage from '../hooks/useLocalStorage';
+
+const SystemEvents = () => {
+ const [events, setEvents] = useState([]);
+ const [totalEvents, setTotalEvents] = useState(0);
+ const [isExpanded, setIsExpanded] = useState(false);
+ const { ref: cardRef, width: cardWidth } = useElementSize();
+ const isNarrow = cardWidth < 650;
+ const [isLoading, setIsLoading] = useState(false);
+ const [dateFormatSetting] = useLocalStorage('date-format', 'mdy');
+ const dateFormat = dateFormatSetting === 'mdy' ? 'MM/DD' : 'DD/MM';
+ const [eventsRefreshInterval, setEventsRefreshInterval] = useLocalStorage(
+ 'events-refresh-interval',
+ 0
+ );
+ const [eventsLimit, setEventsLimit] = useLocalStorage('events-limit', 100);
+ const [currentPage, setCurrentPage] = useState(1);
+
+ // Calculate offset based on current page and limit
+ const offset = (currentPage - 1) * eventsLimit;
+ const totalPages = Math.ceil(totalEvents / eventsLimit);
+
+ const fetchEvents = useCallback(async () => {
+ try {
+ setIsLoading(true);
+ const response = await API.getSystemEvents(eventsLimit, offset);
+ if (response && response.events) {
+ setEvents(response.events);
+ setTotalEvents(response.total || 0);
+ }
+ } catch (error) {
+ console.error('Error fetching system events:', error);
+ } finally {
+ setIsLoading(false);
+ }
+ }, [eventsLimit, offset]);
+
+ // Fetch events on mount and when eventsRefreshInterval changes
+ useEffect(() => {
+ fetchEvents();
+
+ // Set up polling if interval is set and events section is expanded
+ if (eventsRefreshInterval > 0 && isExpanded) {
+ const interval = setInterval(fetchEvents, eventsRefreshInterval * 1000);
+ return () => clearInterval(interval);
+ }
+ }, [fetchEvents, eventsRefreshInterval, isExpanded]);
+
+ // Reset to first page when limit changes
+ useEffect(() => {
+ setCurrentPage(1);
+ }, [eventsLimit]);
+
+ const getEventIcon = (eventType) => {
+ switch (eventType) {
+ case 'channel_start':
+ return ;
+ case 'channel_stop':
+ return ;
+ case 'channel_reconnect':
+ return ;
+ case 'channel_buffering':
+ return ;
+ case 'channel_failover':
+ return ;
+ case 'client_connect':
+ return ;
+ case 'client_disconnect':
+ return ;
+ case 'recording_start':
+ return ;
+ case 'recording_end':
+ return ;
+ case 'stream_switch':
+ return ;
+ case 'm3u_refresh':
+ return ;
+ case 'm3u_download':
+ return ;
+ case 'epg_refresh':
+ return ;
+ case 'epg_download':
+ return ;
+ case 'login_success':
+ return ;
+ case 'login_failed':
+ return ;
+ case 'logout':
+ return ;
+ case 'm3u_blocked':
+ return ;
+ case 'epg_blocked':
+ return ;
+ default:
+ return ;
+ }
+ };
+
+ const getEventColor = (eventType) => {
+ switch (eventType) {
+ case 'channel_start':
+ case 'client_connect':
+ case 'recording_start':
+ case 'login_success':
+ return 'green';
+ case 'channel_reconnect':
+ return 'yellow';
+ case 'channel_stop':
+ case 'client_disconnect':
+ case 'recording_end':
+ case 'logout':
+ return 'gray';
+ case 'channel_buffering':
+ return 'yellow';
+ case 'channel_failover':
+ case 'channel_error':
+ return 'orange';
+ case 'stream_switch':
+ return 'blue';
+ case 'm3u_refresh':
+ case 'epg_refresh':
+ return 'cyan';
+ case 'm3u_download':
+ case 'epg_download':
+ return 'teal';
+ case 'login_failed':
+ case 'm3u_blocked':
+ case 'epg_blocked':
+ return 'red';
+ default:
+ return 'gray';
+ }
+ };
+
+ return (
+
+
+
+
+ System Events
+
+
+ {(isExpanded || !isNarrow) && (
+ <>
+ setEventsLimit(value || 10)}
+ min={10}
+ max={1000}
+ step={10}
+ style={{ width: 130 }}
+ />
+
+
+
+ {isExpanded && (
+ <>
+ {totalEvents > eventsLimit && (
+
+
+ Showing {offset + 1}-
+ {Math.min(offset + eventsLimit, totalEvents)} of {totalEvents}
+
+
+
+ )}
+
+ {events.length === 0 ? (
+
+ No events recorded yet
+
+ ) : (
+ events.map((event) => (
+
+
+
+
+ {getEventIcon(event.event_type)}
+
+
+
+
+ {event.event_type_display || event.event_type}
+
+ {event.channel_name && (
+
+ {event.channel_name}
+
+ )}
+
+ {event.details &&
+ Object.keys(event.details).length > 0 && (
+
+ {Object.entries(event.details)
+ .filter(
+ ([key]) =>
+ !['stream_url', 'new_url'].includes(key)
+ )
+ .map(([key, value]) => `${key}: ${value}`)
+ .join(', ')}
+
+ )}
+
+
+
+ {dayjs(event.timestamp).format(`${dateFormat} HH:mm:ss`)}
+
+
+
+ ))
+ )}
+
+
+ )}
+
+ );
+};
+
+export default SystemEvents;
diff --git a/frontend/src/components/VODModal.jsx b/frontend/src/components/VODModal.jsx
new file mode 100644
index 00000000..7df90ec0
--- /dev/null
+++ b/frontend/src/components/VODModal.jsx
@@ -0,0 +1,716 @@
+import React, { useState, useEffect } from 'react';
+import {
+ Box,
+ Button,
+ Flex,
+ Group,
+ Image,
+ Text,
+ Title,
+ Select,
+ Badge,
+ Loader,
+ Stack,
+ Modal,
+} from '@mantine/core';
+import { Play, Copy } from 'lucide-react';
+import { notifications } from '@mantine/notifications';
+import { copyToClipboard } from '../utils';
+import useVODStore from '../store/useVODStore';
+import useVideoStore from '../store/useVideoStore';
+import useSettingsStore from '../store/settings';
+
+const imdbUrl = (imdb_id) =>
+ imdb_id ? `https://www.imdb.com/title/${imdb_id}` : '';
+const tmdbUrl = (tmdb_id, type = 'movie') =>
+ tmdb_id ? `https://www.themoviedb.org/${type}/${tmdb_id}` : '';
+const formatDuration = (seconds) => {
+ if (!seconds) return '';
+ const hours = Math.floor(seconds / 3600);
+ const mins = Math.floor((seconds % 3600) / 60);
+ const secs = seconds % 60;
+ return hours > 0 ? `${hours}h ${mins}m` : `${mins}m ${secs}s`;
+};
+
+const formatStreamLabel = (relation) => {
+ // Create a label for the stream that includes provider name and stream-specific info
+ const provider = relation.m3u_account.name;
+ const streamId = relation.stream_id;
+
+ // Try to extract quality info - prioritizing the new quality_info field from backend
+ let qualityInfo = '';
+
+ // 1. Check the new quality_info field from backend (PRIMARY)
+ if (relation.quality_info) {
+ if (relation.quality_info.quality) {
+ qualityInfo = ` - ${relation.quality_info.quality}`;
+ } else if (relation.quality_info.resolution) {
+ qualityInfo = ` - ${relation.quality_info.resolution}`;
+ } else if (relation.quality_info.bitrate) {
+ qualityInfo = ` - ${relation.quality_info.bitrate}`;
+ }
+ }
+
+ // 2. Fallback: Check custom_properties detailed info structure
+ if (qualityInfo === '' && relation.custom_properties) {
+ const props = relation.custom_properties;
+
+ // Check detailed_info structure (where the real data is!)
+ if (qualityInfo === '' && props.detailed_info) {
+ const detailedInfo = props.detailed_info;
+
+ // Extract from video resolution
+ if (
+ detailedInfo.video &&
+ detailedInfo.video.width &&
+ detailedInfo.video.height
+ ) {
+ const width = detailedInfo.video.width;
+ const height = detailedInfo.video.height;
+
+ // Prioritize width for quality detection (handles ultrawide/cinematic aspect ratios)
+ if (width >= 3840) {
+ qualityInfo = ' - 4K';
+ } else if (width >= 1920) {
+ qualityInfo = ' - 1080p';
+ } else if (width >= 1280) {
+ qualityInfo = ' - 720p';
+ } else if (width >= 854) {
+ qualityInfo = ' - 480p';
+ } else {
+ qualityInfo = ` - ${width}x${height}`;
+ }
+ }
+
+ // Extract from movie name in detailed_info
+ if (qualityInfo === '' && detailedInfo.name) {
+ const name = detailedInfo.name;
+ if (name.includes('4K') || name.includes('2160p')) {
+ qualityInfo = ' - 4K';
+ } else if (name.includes('1080p') || name.includes('FHD')) {
+ qualityInfo = ' - 1080p';
+ } else if (name.includes('720p') || name.includes('HD')) {
+ qualityInfo = ' - 720p';
+ } else if (name.includes('480p')) {
+ qualityInfo = ' - 480p';
+ }
+ }
+ }
+ }
+
+ // 3. Final fallback: Check stream name for quality markers
+ if (qualityInfo === '' && relation.stream_name) {
+ const streamName = relation.stream_name;
+ if (streamName.includes('4K') || streamName.includes('2160p')) {
+ qualityInfo = ' - 4K';
+ } else if (streamName.includes('1080p') || streamName.includes('FHD')) {
+ qualityInfo = ' - 1080p';
+ } else if (streamName.includes('720p') || streamName.includes('HD')) {
+ qualityInfo = ' - 720p';
+ } else if (streamName.includes('480p')) {
+ qualityInfo = ' - 480p';
+ }
+ }
+
+ return `${provider}${qualityInfo}${streamId ? ` (Stream ${streamId})` : ''}`;
+};
+
+const getTechnicalDetails = (selectedProvider, defaultVOD) => {
+ let source = defaultVOD; // Default fallback
+
+ // If a provider is selected, try to get technical details from various locations
+ if (selectedProvider) {
+ // 1. First try the movie/episode relation content
+ const content = selectedProvider.movie || selectedProvider.episode;
+
+ if (content && (content.bitrate || content.video || content.audio)) {
+ source = content;
+ }
+ // 2. Try technical details directly on the relation object
+ else if (
+ selectedProvider.bitrate ||
+ selectedProvider.video ||
+ selectedProvider.audio
+ ) {
+ source = selectedProvider;
+ }
+ // 3. Try to extract from custom_properties detailed_info (where quality data is stored)
+ else if (selectedProvider.custom_properties?.detailed_info) {
+ const detailedInfo = selectedProvider.custom_properties.detailed_info;
+
+ // Create a synthetic source from detailed_info
+ const syntheticSource = {
+ bitrate: detailedInfo.bitrate || null,
+ video: detailedInfo.video || null,
+ audio: detailedInfo.audio || null,
+ };
+
+ if (
+ syntheticSource.bitrate ||
+ syntheticSource.video ||
+ syntheticSource.audio
+ ) {
+ source = syntheticSource;
+ }
+ }
+ }
+
+ return {
+ bitrate: source?.bitrate,
+ video: source?.video,
+ audio: source?.audio,
+ };
+};
+
+const VODModal = ({ vod, opened, onClose }) => {
+ const [detailedVOD, setDetailedVOD] = useState(null);
+ const [loadingDetails, setLoadingDetails] = useState(false);
+ const [trailerModalOpened, setTrailerModalOpened] = useState(false);
+ const [trailerUrl, setTrailerUrl] = useState('');
+ const [providers, setProviders] = useState([]);
+ const [selectedProvider, setSelectedProvider] = useState(null);
+ const [loadingProviders, setLoadingProviders] = useState(false);
+ const { fetchMovieDetailsFromProvider, fetchMovieProviders } = useVODStore();
+ const showVideo = useVideoStore((s) => s.showVideo);
+ const env_mode = useSettingsStore((s) => s.environment.env_mode);
+
+ useEffect(() => {
+ if (opened && vod) {
+ // Fetch detailed VOD info if not already loaded
+ if (!detailedVOD) {
+ setLoadingDetails(true);
+ fetchMovieDetailsFromProvider(vod.id)
+ .then((details) => {
+ setDetailedVOD(details);
+ })
+ .catch((error) => {
+ console.warn(
+ 'Failed to fetch provider details, using basic info:',
+ error
+ );
+ setDetailedVOD(vod); // Fallback to basic data
+ })
+ .finally(() => {
+ setLoadingDetails(false);
+ });
+ }
+
+ // Fetch available providers
+ setLoadingProviders(true);
+ fetchMovieProviders(vod.id)
+ .then((providersData) => {
+ setProviders(providersData);
+ // Set the first provider as default if none selected
+ if (providersData.length > 0 && !selectedProvider) {
+ setSelectedProvider(providersData[0]);
+ }
+ })
+ .catch((error) => {
+ console.error('Failed to fetch providers:', error);
+ setProviders([]);
+ })
+ .finally(() => {
+ setLoadingProviders(false);
+ });
+ }
+ }, [
+ opened,
+ vod,
+ detailedVOD,
+ fetchMovieDetailsFromProvider,
+ fetchMovieProviders,
+ selectedProvider,
+ ]);
+
+ useEffect(() => {
+ if (!opened) {
+ setDetailedVOD(null);
+ setLoadingDetails(false);
+ setTrailerModalOpened(false);
+ setTrailerUrl('');
+ setProviders([]);
+ setSelectedProvider(null);
+ setLoadingProviders(false);
+ }
+ }, [opened]);
+
+ const getStreamUrl = () => {
+ const vodToPlay = detailedVOD || vod;
+ if (!vodToPlay) return null;
+
+ let streamUrl = `/proxy/vod/movie/${vod.uuid}`;
+
+ // Add selected provider as query parameter if available
+ if (selectedProvider) {
+ // Use stream_id for most specific selection, fallback to account_id
+ if (selectedProvider.stream_id) {
+ streamUrl += `?stream_id=${encodeURIComponent(selectedProvider.stream_id)}`;
+ } else {
+ streamUrl += `?m3u_account_id=${selectedProvider.m3u_account.id}`;
+ }
+ }
+
+ if (env_mode === 'dev') {
+ streamUrl = `${window.location.protocol}//${window.location.hostname}:5656${streamUrl}`;
+ } else {
+ streamUrl = `${window.location.origin}${streamUrl}`;
+ }
+ return streamUrl;
+ };
+
+ const handlePlayVOD = () => {
+ const streamUrl = getStreamUrl();
+ if (!streamUrl) return;
+ const vodToPlay = detailedVOD || vod;
+ showVideo(streamUrl, 'vod', vodToPlay);
+ };
+
+ const handleCopyLink = async () => {
+ const streamUrl = getStreamUrl();
+ if (!streamUrl) return;
+ const success = await copyToClipboard(streamUrl);
+ notifications.show({
+ title: success ? 'Link Copied!' : 'Copy Failed',
+ message: success
+ ? 'Stream link copied to clipboard'
+ : 'Failed to copy link to clipboard',
+ color: success ? 'green' : 'red',
+ });
+ };
+
+ // Helper to get embeddable YouTube URL
+ const getEmbedUrl = (url) => {
+ if (!url) return '';
+ // Accepts full YouTube URLs or just IDs
+ const match = url.match(/(?:youtube\.com\/watch\?v=|youtu\.be\/)([\w-]+)/);
+ const videoId = match ? match[1] : url;
+ return `https://www.youtube.com/embed/${videoId}`;
+ };
+
+ if (!vod) return null;
+
+ // Use detailed data if available, otherwise use basic vod data
+ const displayVOD = detailedVOD || vod;
+
+ return (
+ <>
+
+
+ {/* Backdrop image as background */}
+ {displayVOD.backdrop_path && displayVOD.backdrop_path.length > 0 && (
+ <>
+
+ {/* Overlay for readability */}
+
+
+ )}
+ {/* Modal content above backdrop */}
+
+
+ {loadingDetails && (
+
+
+
+ Loading additional details...
+
+
+ )}
+
+ {/* Movie poster and basic info */}
+
+ {/* Use movie_image or logo */}
+ {displayVOD.movie_image || displayVOD.logo?.url ? (
+
+
+
+ ) : (
+
+
+
+ )}
+
+
+ {displayVOD.name}
+
+ {/* Original name if different */}
+ {displayVOD.o_name &&
+ displayVOD.o_name !== displayVOD.name && (
+
+ Original: {displayVOD.o_name}
+
+ )}
+
+
+ {displayVOD.year && (
+ {displayVOD.year}
+ )}
+ {displayVOD.duration_secs && (
+
+ {formatDuration(displayVOD.duration_secs)}
+
+ )}
+ {displayVOD.rating && (
+ {displayVOD.rating}
+ )}
+ {displayVOD.age && (
+ {displayVOD.age}
+ )}
+ Movie
+ {/* imdb_id and tmdb_id badges */}
+ {displayVOD.imdb_id && (
+
+ IMDb
+
+ )}
+ {displayVOD.tmdb_id && (
+
+ TMDb
+
+ )}
+
+
+ {/* Release date */}
+ {displayVOD.release_date && (
+
+ Release Date: {displayVOD.release_date}
+
+ )}
+
+ {displayVOD.genre && (
+
+ Genre: {displayVOD.genre}
+
+ )}
+
+ {displayVOD.director && (
+
+ Director: {displayVOD.director}
+
+ )}
+
+ {displayVOD.actors && (
+
+ Cast: {displayVOD.actors}
+
+ )}
+
+ {displayVOD.country && (
+
+ Country: {displayVOD.country}
+
+ )}
+
+ {/* Description */}
+ {displayVOD.description && (
+
+
+ Description
+
+ {displayVOD.description}
+
+ )}
+
+ {/* Play and Watch Trailer buttons */}
+
+ }
+ variant="filled"
+ color="blue"
+ size="sm"
+ onClick={handlePlayVOD}
+ disabled={providers.length > 0 && !selectedProvider}
+ style={{ alignSelf: 'flex-start' }}
+ >
+ Play Movie
+
+ {displayVOD.youtube_trailer && (
+
+ )}
+ }
+ variant="outline"
+ color="gray"
+ size="sm"
+ onClick={handleCopyLink}
+ style={{ alignSelf: 'flex-start' }}
+ >
+ Copy Link
+
+
+
+
+
+ {/* Provider Information & Play Button Row */}
+
+ {/* Provider Selection */}
+ {providers.length > 0 && (
+
+
+ Stream Selection
+ {loadingProviders && (
+
+ )}
+
+ {providers.length === 1 ? (
+
+
+ {providers[0].m3u_account.name}
+
+
+ ) : (
+
+ )}
+
+ {/* Fallback provider info if no providers loaded yet */}
+ {providers.length === 0 &&
+ !loadingProviders &&
+ vod?.m3u_account && (
+
+
+ Stream Selection
+
+
+
+ {vod.m3u_account.name}
+
+
+
+ )}
+
+ {/* Play button moved to top next to Watch Trailer */}
+
+
+ {/* Technical Details */}
+ {(() => {
+ const techDetails = getTechnicalDetails(
+ selectedProvider,
+ displayVOD
+ );
+ const hasDetails =
+ techDetails.bitrate || techDetails.video || techDetails.audio;
+
+ return (
+ hasDetails && (
+
+
+ Technical Details:
+ {selectedProvider && (
+
+ (from {selectedProvider.m3u_account.name}
+ {selectedProvider.stream_id &&
+ ` - Stream ${selectedProvider.stream_id}`}
+ )
+
+ )}
+
+ {techDetails.bitrate && techDetails.bitrate > 0 && (
+
+ Bitrate: {techDetails.bitrate} kbps
+
+ )}
+ {techDetails.video &&
+ Object.keys(techDetails.video).length > 0 && (
+
+ Video:{' '}
+ {techDetails.video.codec_long_name &&
+ techDetails.video.codec_long_name !== 'unknown'
+ ? techDetails.video.codec_long_name
+ : techDetails.video.codec_name}
+ {techDetails.video.profile
+ ? ` (${techDetails.video.profile})`
+ : ''}
+ {techDetails.video.width && techDetails.video.height
+ ? `, ${techDetails.video.width}x${techDetails.video.height}`
+ : ''}
+ {techDetails.video.display_aspect_ratio
+ ? `, Aspect Ratio: ${techDetails.video.display_aspect_ratio}`
+ : ''}
+ {techDetails.video.bit_rate
+ ? `, Bitrate: ${Math.round(Number(techDetails.video.bit_rate) / 1000)} kbps`
+ : ''}
+ {techDetails.video.r_frame_rate
+ ? `, Frame Rate: ${techDetails.video.r_frame_rate.replace('/', '/')} fps`
+ : ''}
+ {techDetails.video.tags?.encoder
+ ? `, Encoder: ${techDetails.video.tags.encoder}`
+ : ''}
+
+ )}
+ {techDetails.audio &&
+ Object.keys(techDetails.audio).length > 0 && (
+
+ Audio:{' '}
+ {techDetails.audio.codec_long_name &&
+ techDetails.audio.codec_long_name !== 'unknown'
+ ? techDetails.audio.codec_long_name
+ : techDetails.audio.codec_name}
+ {techDetails.audio.profile
+ ? ` (${techDetails.audio.profile})`
+ : ''}
+ {techDetails.audio.channel_layout
+ ? `, Channels: ${techDetails.audio.channel_layout}`
+ : techDetails.audio.channels
+ ? `, Channels: ${techDetails.audio.channels}`
+ : ''}
+ {techDetails.audio.sample_rate
+ ? `, Sample Rate: ${techDetails.audio.sample_rate} Hz`
+ : ''}
+ {techDetails.audio.bit_rate
+ ? `, Bitrate: ${Math.round(Number(techDetails.audio.bit_rate) / 1000)} kbps`
+ : ''}
+ {techDetails.audio.tags?.handler_name
+ ? `, Handler: ${techDetails.audio.tags.handler_name}`
+ : ''}
+
+ )}
+
+ )
+ );
+ })()}
+ {/* YouTube trailer if available */}
+
+
+
+
+ {/* YouTube Trailer Modal */}
+ setTrailerModalOpened(false)}
+ title="Trailer"
+ size="xl"
+ centered
+ withCloseButton
+ >
+
+ {trailerUrl && (
+
+ )}
+
+
+
+ );
+};
+
+export default VODModal;
diff --git a/frontend/src/components/backups/BackupManager.jsx b/frontend/src/components/backups/BackupManager.jsx
new file mode 100644
index 00000000..dc130254
--- /dev/null
+++ b/frontend/src/components/backups/BackupManager.jsx
@@ -0,0 +1,978 @@
+import { useEffect, useMemo, useState } from 'react';
+import {
+ ActionIcon,
+ Box,
+ Button,
+ FileInput,
+ Flex,
+ Group,
+ Loader,
+ Modal,
+ NumberInput,
+ Paper,
+ Select,
+ Stack,
+ Switch,
+ Text,
+ TextInput,
+ Tooltip,
+} from '@mantine/core';
+import {
+ Download,
+ RefreshCcw,
+ RotateCcw,
+ SquareMinus,
+ SquarePlus,
+ UploadCloud,
+} from 'lucide-react';
+import { notifications } from '@mantine/notifications';
+import dayjs from 'dayjs';
+
+import API from '../../api';
+import ConfirmationDialog from '../ConfirmationDialog';
+import useLocalStorage from '../../hooks/useLocalStorage';
+import useWarningsStore from '../../store/warnings';
+import { CustomTable, useTable } from '../tables/CustomTable';
+
+const RowActions = ({
+ row,
+ handleDownload,
+ handleRestoreClick,
+ handleDeleteClick,
+ downloading,
+}) => {
+ return (
+
+
+ handleDownload(row.original.name)}
+ loading={downloading === row.original.name}
+ disabled={downloading !== null}
+ >
+
+
+
+
+ handleRestoreClick(row.original)}
+ >
+
+
+
+
+ handleDeleteClick(row.original)}
+ >
+
+
+
+
+ );
+};
+
+// Convert 24h time string to 12h format with period
+function to12Hour(time24) {
+ if (!time24) return { time: '12:00', period: 'AM' };
+ const [hours, minutes] = time24.split(':').map(Number);
+ const period = hours >= 12 ? 'PM' : 'AM';
+ const hours12 = hours % 12 || 12;
+ return {
+ time: `${hours12}:${String(minutes).padStart(2, '0')}`,
+ period,
+ };
+}
+
+// Convert 12h time + period to 24h format
+function to24Hour(time12, period) {
+ if (!time12) return '00:00';
+ const [hours, minutes] = time12.split(':').map(Number);
+ let hours24 = hours;
+ if (period === 'PM' && hours !== 12) {
+ hours24 = hours + 12;
+ } else if (period === 'AM' && hours === 12) {
+ hours24 = 0;
+ }
+ return `${String(hours24).padStart(2, '0')}:${String(minutes).padStart(2, '0')}`;
+}
+
+// Get default timezone (same as Settings page)
+function getDefaultTimeZone() {
+ try {
+ return Intl.DateTimeFormat().resolvedOptions().timeZone || 'UTC';
+ } catch {
+ return 'UTC';
+ }
+}
+
+// Validate cron expression
+function validateCronExpression(expression) {
+ if (!expression || expression.trim() === '') {
+ return { valid: false, error: 'Cron expression is required' };
+ }
+
+ const parts = expression.trim().split(/\s+/);
+ if (parts.length !== 5) {
+ return {
+ valid: false,
+ error:
+ 'Cron expression must have exactly 5 parts: minute hour day month weekday',
+ };
+ }
+
+ const [minute, hour, dayOfMonth, month, dayOfWeek] = parts;
+
+ // Validate each part (allowing *, */N steps, ranges, lists, steps)
+ // Supports: *, */2, 5, 1-5, 1-5/2, 1,3,5, etc.
+ const cronPartRegex =
+ /^(\*\/\d+|\*|\d+(-\d+)?(\/\d+)?(,\d+(-\d+)?(\/\d+)?)*)$/;
+
+ if (!cronPartRegex.test(minute)) {
+ return {
+ valid: false,
+ error: 'Invalid minute field (0-59, *, or cron syntax)',
+ };
+ }
+ if (!cronPartRegex.test(hour)) {
+ return {
+ valid: false,
+ error: 'Invalid hour field (0-23, *, or cron syntax)',
+ };
+ }
+ if (!cronPartRegex.test(dayOfMonth)) {
+ return {
+ valid: false,
+ error: 'Invalid day field (1-31, *, or cron syntax)',
+ };
+ }
+ if (!cronPartRegex.test(month)) {
+ return {
+ valid: false,
+ error: 'Invalid month field (1-12, *, or cron syntax)',
+ };
+ }
+ if (!cronPartRegex.test(dayOfWeek)) {
+ return {
+ valid: false,
+ error: 'Invalid weekday field (0-6, *, or cron syntax)',
+ };
+ }
+
+ // Additional range validation for numeric values
+ const validateRange = (value, min, max, name) => {
+ // Skip if it's * or contains special characters
+ if (
+ value === '*' ||
+ value.includes('/') ||
+ value.includes('-') ||
+ value.includes(',')
+ ) {
+ return null;
+ }
+ const num = parseInt(value, 10);
+ if (isNaN(num) || num < min || num > max) {
+ return `${name} must be between ${min} and ${max}`;
+ }
+ return null;
+ };
+
+ const minuteError = validateRange(minute, 0, 59, 'Minute');
+ if (minuteError) return { valid: false, error: minuteError };
+
+ const hourError = validateRange(hour, 0, 23, 'Hour');
+ if (hourError) return { valid: false, error: hourError };
+
+ const dayError = validateRange(dayOfMonth, 1, 31, 'Day');
+ if (dayError) return { valid: false, error: dayError };
+
+ const monthError = validateRange(month, 1, 12, 'Month');
+ if (monthError) return { valid: false, error: monthError };
+
+ const weekdayError = validateRange(dayOfWeek, 0, 6, 'Weekday');
+ if (weekdayError) return { valid: false, error: weekdayError };
+
+ return { valid: true, error: null };
+}
+
+const DAYS_OF_WEEK = [
+ { value: '0', label: 'Sunday' },
+ { value: '1', label: 'Monday' },
+ { value: '2', label: 'Tuesday' },
+ { value: '3', label: 'Wednesday' },
+ { value: '4', label: 'Thursday' },
+ { value: '5', label: 'Friday' },
+ { value: '6', label: 'Saturday' },
+];
+
+function formatBytes(bytes) {
+ if (bytes === 0) return '0 B';
+ const k = 1024;
+ const sizes = ['B', 'KB', 'MB', 'GB'];
+ const i = Math.floor(Math.log(bytes) / Math.log(k));
+ return `${(bytes / Math.pow(k, i)).toFixed(2)} ${sizes[i]}`;
+}
+
+export default function BackupManager() {
+ const [backups, setBackups] = useState([]);
+ const [loading, setLoading] = useState(false);
+ const [creating, setCreating] = useState(false);
+ const [downloading, setDownloading] = useState(null);
+ const [uploadFile, setUploadFile] = useState(null);
+ const [uploadModalOpen, setUploadModalOpen] = useState(false);
+ const [restoreConfirmOpen, setRestoreConfirmOpen] = useState(false);
+ const [deleteConfirmOpen, setDeleteConfirmOpen] = useState(false);
+ const [selectedBackup, setSelectedBackup] = useState(null);
+ const [restoring, setRestoring] = useState(false);
+ const [deleting, setDeleting] = useState(false);
+
+ // Read user's preferences from settings
+ const [timeFormat] = useLocalStorage('time-format', '12h');
+ const [dateFormatSetting] = useLocalStorage('date-format', 'mdy');
+ const [tableSize] = useLocalStorage('table-size', 'default');
+ const [userTimezone] = useLocalStorage('time-zone', getDefaultTimeZone());
+ const is12Hour = timeFormat === '12h';
+
+ // Format date according to user preferences
+ const formatDate = (dateString) => {
+ const date = dayjs(dateString);
+ const datePart = dateFormatSetting === 'mdy' ? 'MM/DD/YYYY' : 'DD/MM/YYYY';
+ const timePart = is12Hour ? 'h:mm:ss A' : 'HH:mm:ss';
+ return date.format(`${datePart}, ${timePart}`);
+ };
+
+ // Warning suppression for confirmation dialogs
+ const suppressWarning = useWarningsStore((s) => s.suppressWarning);
+
+ // Schedule state
+ const [schedule, setSchedule] = useState({
+ enabled: false,
+ frequency: 'daily',
+ time: '03:00',
+ day_of_week: 0,
+ retention_count: 0,
+ cron_expression: '',
+ });
+ const [scheduleLoading, setScheduleLoading] = useState(false);
+ const [scheduleSaving, setScheduleSaving] = useState(false);
+ const [scheduleChanged, setScheduleChanged] = useState(false);
+ const [advancedMode, setAdvancedMode] = useState(false);
+ const [cronError, setCronError] = useState(null);
+
+ // For 12-hour display mode
+ const [displayTime, setDisplayTime] = useState('3:00');
+ const [timePeriod, setTimePeriod] = useState('AM');
+
+ const columns = useMemo(
+ () => [
+ {
+ header: 'Filename',
+ accessorKey: 'name',
+ grow: true,
+ cell: ({ cell }) => (
+
+ {cell.getValue()}
+
+ ),
+ },
+ {
+ header: 'Size',
+ accessorKey: 'size',
+ size: 80,
+ cell: ({ cell }) => (
+ {formatBytes(cell.getValue())}
+ ),
+ },
+ {
+ header: 'Created',
+ accessorKey: 'created',
+ minSize: 180,
+ cell: ({ cell }) => (
+
+ {formatDate(cell.getValue())}
+
+ ),
+ },
+ {
+ id: 'actions',
+ header: 'Actions',
+ size: tableSize === 'compact' ? 75 : 100,
+ },
+ ],
+ [tableSize]
+ );
+
+ const renderHeaderCell = (header) => {
+ return (
+
+ {header.column.columnDef.header}
+
+ );
+ };
+
+ const renderBodyCell = ({ cell, row }) => {
+ switch (cell.column.id) {
+ case 'actions':
+ return (
+
+ );
+ }
+ };
+
+ const table = useTable({
+ columns,
+ data: backups,
+ allRowIds: backups.map((b) => b.name),
+ bodyCellRenderFns: {
+ actions: renderBodyCell,
+ },
+ headerCellRenderFns: {
+ name: renderHeaderCell,
+ size: renderHeaderCell,
+ created: renderHeaderCell,
+ actions: renderHeaderCell,
+ },
+ });
+
+ const loadBackups = async () => {
+ setLoading(true);
+ try {
+ const backupList = await API.listBackups();
+ setBackups(backupList);
+ } catch (error) {
+ notifications.show({
+ title: 'Error',
+ message: error?.message || 'Failed to load backups',
+ color: 'red',
+ });
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ const loadSchedule = async () => {
+ setScheduleLoading(true);
+ try {
+ const settings = await API.getBackupSchedule();
+
+ // Check if using cron expression (advanced mode)
+ if (settings.cron_expression) {
+ setAdvancedMode(true);
+ }
+
+ setSchedule(settings);
+
+ // Initialize 12-hour display values
+ const { time, period } = to12Hour(settings.time);
+ setDisplayTime(time);
+ setTimePeriod(period);
+
+ setScheduleChanged(false);
+ } catch (error) {
+ // Ignore errors on initial load - settings may not exist yet
+ } finally {
+ setScheduleLoading(false);
+ }
+ };
+
+ useEffect(() => {
+ loadBackups();
+ loadSchedule();
+ }, []);
+
+ // Validate cron expression when switching to advanced mode
+ useEffect(() => {
+ if (advancedMode && schedule.cron_expression) {
+ const validation = validateCronExpression(schedule.cron_expression);
+ setCronError(validation.valid ? null : validation.error);
+ } else {
+ setCronError(null);
+ }
+ }, [advancedMode, schedule.cron_expression]);
+
+ const handleScheduleChange = (field, value) => {
+ setSchedule((prev) => ({ ...prev, [field]: value }));
+ setScheduleChanged(true);
+
+ // Validate cron expression if in advanced mode
+ if (field === 'cron_expression' && advancedMode) {
+ const validation = validateCronExpression(value);
+ setCronError(validation.valid ? null : validation.error);
+ }
+ };
+
+ // Handle time changes in 12-hour mode
+ const handleTimeChange12h = (newTime, newPeriod) => {
+ const time = newTime ?? displayTime;
+ const period = newPeriod ?? timePeriod;
+ setDisplayTime(time);
+ setTimePeriod(period);
+ // Convert to 24h and update schedule
+ const time24 = to24Hour(time, period);
+ handleScheduleChange('time', time24);
+ };
+
+ // Handle time changes in 24-hour mode
+ const handleTimeChange24h = (value) => {
+ handleScheduleChange('time', value);
+ // Also update 12h display state in case user switches formats
+ const { time, period } = to12Hour(value);
+ setDisplayTime(time);
+ setTimePeriod(period);
+ };
+
+ const handleSaveSchedule = async () => {
+ setScheduleSaving(true);
+ try {
+ const scheduleToSave = advancedMode
+ ? schedule
+ : { ...schedule, cron_expression: '' };
+
+ const updated = await API.updateBackupSchedule(scheduleToSave);
+ setSchedule(updated);
+ setScheduleChanged(false);
+
+ notifications.show({
+ title: 'Success',
+ message: 'Backup schedule saved',
+ color: 'green',
+ });
+ } catch (error) {
+ notifications.show({
+ title: 'Error',
+ message: error?.message || 'Failed to save schedule',
+ color: 'red',
+ });
+ } finally {
+ setScheduleSaving(false);
+ }
+ };
+
+ const handleCreateBackup = async () => {
+ setCreating(true);
+ try {
+ await API.createBackup();
+ notifications.show({
+ title: 'Success',
+ message: 'Backup created successfully',
+ color: 'green',
+ });
+ await loadBackups();
+ } catch (error) {
+ notifications.show({
+ title: 'Error',
+ message: error?.message || 'Failed to create backup',
+ color: 'red',
+ });
+ } finally {
+ setCreating(false);
+ }
+ };
+
+ const handleDownload = async (filename) => {
+ setDownloading(filename);
+ try {
+ await API.downloadBackup(filename);
+ notifications.show({
+ title: 'Download Started',
+ message: `Downloading ${filename}...`,
+ color: 'blue',
+ });
+ } catch (error) {
+ notifications.show({
+ title: 'Error',
+ message: error?.message || 'Failed to download backup',
+ color: 'red',
+ });
+ } finally {
+ setDownloading(null);
+ }
+ };
+
+ const handleDeleteClick = (backup) => {
+ setSelectedBackup(backup);
+ setDeleteConfirmOpen(true);
+ };
+
+ const handleDeleteConfirm = async () => {
+ setDeleting(true);
+ try {
+ await API.deleteBackup(selectedBackup.name);
+ notifications.show({
+ title: 'Success',
+ message: 'Backup deleted successfully',
+ color: 'green',
+ });
+ await loadBackups();
+ } catch (error) {
+ notifications.show({
+ title: 'Error',
+ message: error?.message || 'Failed to delete backup',
+ color: 'red',
+ });
+ } finally {
+ setDeleting(false);
+ setDeleteConfirmOpen(false);
+ setSelectedBackup(null);
+ }
+ };
+
+ const handleRestoreClick = (backup) => {
+ setSelectedBackup(backup);
+ setRestoreConfirmOpen(true);
+ };
+
+ const handleRestoreConfirm = async () => {
+ setRestoring(true);
+ try {
+ await API.restoreBackup(selectedBackup.name);
+ notifications.show({
+ title: 'Success',
+ message:
+ 'Backup restored successfully. You may need to refresh the page.',
+ color: 'green',
+ });
+ setTimeout(() => window.location.reload(), 2000);
+ } catch (error) {
+ notifications.show({
+ title: 'Error',
+ message: error?.message || 'Failed to restore backup',
+ color: 'red',
+ });
+ } finally {
+ setRestoring(false);
+ setRestoreConfirmOpen(false);
+ setSelectedBackup(null);
+ }
+ };
+
+ const handleUploadSubmit = async () => {
+ if (!uploadFile) return;
+
+ try {
+ await API.uploadBackup(uploadFile);
+ notifications.show({
+ title: 'Success',
+ message: 'Backup uploaded successfully',
+ color: 'green',
+ });
+ setUploadModalOpen(false);
+ setUploadFile(null);
+ await loadBackups();
+ } catch (error) {
+ notifications.show({
+ title: 'Error',
+ message: error?.message || 'Failed to upload backup',
+ color: 'red',
+ });
+ }
+ };
+
+ return (
+
+ {/* Schedule Settings */}
+
+
+
+ Scheduled Backups
+
+
+ handleScheduleChange('enabled', e.currentTarget.checked)
+ }
+ label={schedule.enabled ? 'Enabled' : 'Disabled'}
+ />
+
+
+
+
+ Advanced (Cron Expression)
+
+ setAdvancedMode(e.currentTarget.checked)}
+ label={advancedMode ? 'Enabled' : 'Disabled'}
+ disabled={!schedule.enabled}
+ size="sm"
+ />
+
+
+ {scheduleLoading ? (
+
+ ) : (
+ <>
+ {advancedMode ? (
+ <>
+
+
+ handleScheduleChange(
+ 'cron_expression',
+ e.currentTarget.value
+ )
+ }
+ placeholder="0 3 * * *"
+ description="Format: minute hour day month weekday (e.g., '0 3 * * *' = 3:00 AM daily)"
+ disabled={!schedule.enabled}
+ error={cronError}
+ />
+
+ Examples:
• 0 3 * * * - Every day at 3:00
+ AM
+
• 0 2 * * 0 - Every Sunday at 2:00 AM
+
• 0 */6 * * * - Every 6 hours
+
• 30 14 1 * * - 1st of every month at
+ 2:30 PM
+
+
+
+
+ handleScheduleChange('retention_count', value || 0)
+ }
+ min={0}
+ disabled={!schedule.enabled}
+ />
+
+
+
+ ) : (
+
+
+
+
+
+ handleScheduleChange('retention_count', value || 0)
+ }
+ min={0}
+ disabled={!schedule.enabled}
+ />
+
+
+
+ )}
+
+ {/* Timezone info - only show in simple mode */}
+ {!advancedMode && schedule.enabled && schedule.time && (
+
+ System Timezone: {userTimezone} • Backup will run at{' '}
+ {schedule.time} {userTimezone}
+
+ )}
+
+ )}
+
+
+ {/* Backups List */}
+
+
+
+
+
+ }
+ variant="light"
+ size="xs"
+ onClick={() => setUploadModalOpen(true)}
+ p={5}
+ >
+ Upload
+
+
+
+ }
+ variant="light"
+ size="xs"
+ onClick={loadBackups}
+ loading={loading}
+ p={5}
+ >
+ Refresh
+
+
+
+ }
+ variant="light"
+ size="xs"
+ onClick={handleCreateBackup}
+ loading={creating}
+ p={5}
+ color="green"
+ style={{
+ borderWidth: '1px',
+ borderColor: 'green',
+ color: 'white',
+ }}
+ >
+ Create Backup
+
+
+
+
+
+
+
+
+ {loading ? (
+
+
+
+ ) : backups.length === 0 ? (
+
+ No backups found. Create one to get started.
+
+ ) : (
+
+
+
+ )}
+
+
+
+
+ {
+ setUploadModalOpen(false);
+ setUploadFile(null);
+ }}
+ title="Upload Backup"
+ >
+
+
+
+
+
+
+
+
+
+ {
+ setRestoreConfirmOpen(false);
+ setSelectedBackup(null);
+ }}
+ onConfirm={handleRestoreConfirm}
+ title="Restore Backup"
+ message={`Are you sure you want to restore from "${selectedBackup?.name}"? This will replace all current data with the backup data. This action cannot be undone.`}
+ confirmLabel="Restore"
+ cancelLabel="Cancel"
+ actionKey="restore-backup"
+ onSuppressChange={suppressWarning}
+ loading={restoring}
+ />
+
+ {
+ setDeleteConfirmOpen(false);
+ setSelectedBackup(null);
+ }}
+ onConfirm={handleDeleteConfirm}
+ title="Delete Backup"
+ message={`Are you sure you want to delete "${selectedBackup?.name}"? This action cannot be undone.`}
+ confirmLabel="Delete"
+ cancelLabel="Cancel"
+ actionKey="delete-backup"
+ onSuppressChange={suppressWarning}
+ loading={deleting}
+ />
+
+ );
+}
diff --git a/frontend/src/components/cards/PluginCard.jsx b/frontend/src/components/cards/PluginCard.jsx
new file mode 100644
index 00000000..78725781
--- /dev/null
+++ b/frontend/src/components/cards/PluginCard.jsx
@@ -0,0 +1,258 @@
+import React, { useState } from 'react';
+import { showNotification } from '../../utils/notificationUtils.js';
+import { Field } from '../Field.jsx';
+import {
+ ActionIcon,
+ Button,
+ Card,
+ Divider,
+ Group,
+ Stack,
+ Switch,
+ Text,
+} from '@mantine/core';
+import { Trash2 } from 'lucide-react';
+import { getConfirmationDetails } from '../../utils/cards/PluginCardUtils.js';
+
+const PluginFieldList = ({ plugin, settings, updateField }) => {
+ return plugin.fields.map((f) => (
+
+ ));
+};
+
+const PluginActionList = ({ plugin, enabled, running, handlePluginRun }) => {
+ return plugin.actions.map((action) => (
+
+
+ {action.label}
+ {action.description && (
+
+ {action.description}
+
+ )}
+
+
+
+ ));
+};
+
+const PluginActionStatus = ({ running, lastResult }) => {
+ return (
+ <>
+ {running && (
+
+ Running action… please wait
+
+ )}
+ {!running && lastResult?.file && (
+
+ Output: {lastResult.file}
+
+ )}
+ {!running && lastResult?.error && (
+
+ Error: {String(lastResult.error)}
+
+ )}
+
+ );
+};
+
+const PluginCard = ({
+ plugin,
+ onSaveSettings,
+ onRunAction,
+ onToggleEnabled,
+ onRequireTrust,
+ onRequestDelete,
+ onRequestConfirm,
+}) => {
+ const [settings, setSettings] = useState(plugin.settings || {});
+ const [saving, setSaving] = useState(false);
+ const [running, setRunning] = useState(false);
+ const [enabled, setEnabled] = useState(!!plugin.enabled);
+ const [lastResult, setLastResult] = useState(null);
+
+ // Keep local enabled state in sync with props (e.g., after import + enable)
+ React.useEffect(() => {
+ setEnabled(!!plugin.enabled);
+ }, [plugin.enabled]);
+ // Sync settings if plugin changes identity
+ React.useEffect(() => {
+ setSettings(plugin.settings || {});
+ }, [plugin.key]);
+
+ const updateField = (id, val) => {
+ setSettings((prev) => ({ ...prev, [id]: val }));
+ };
+
+ const save = async () => {
+ setSaving(true);
+ try {
+ await onSaveSettings(plugin.key, settings);
+ showNotification({
+ title: 'Saved',
+ message: `${plugin.name} settings updated`,
+ color: 'green',
+ });
+ } finally {
+ setSaving(false);
+ }
+ };
+
+ const missing = plugin.missing;
+
+ const handleEnableChange = () => {
+ return async (e) => {
+ const next = e.currentTarget.checked;
+ if (next && !plugin.ever_enabled && onRequireTrust) {
+ const ok = await onRequireTrust(plugin);
+ if (!ok) {
+ // Revert
+ setEnabled(false);
+ return;
+ }
+ }
+ setEnabled(next);
+ const resp = await onToggleEnabled(plugin.key, next);
+ if (next && resp?.ever_enabled) {
+ plugin.ever_enabled = true;
+ }
+ };
+ };
+
+ const handlePluginRun = async (a) => {
+ setRunning(true);
+ setLastResult(null);
+ try {
+ // Determine if confirmation is required from action metadata or fallback field
+ const { requireConfirm, confirmTitle, confirmMessage } =
+ getConfirmationDetails(a, plugin, settings);
+
+ if (requireConfirm) {
+ const confirmed = await onRequestConfirm(confirmTitle, confirmMessage);
+
+ if (!confirmed) {
+ // User canceled, abort the action
+ return;
+ }
+ }
+
+ // Save settings before running to ensure backend uses latest values
+ try {
+ await onSaveSettings(plugin.key, settings);
+ } catch (e) {
+ /* ignore, run anyway */
+ }
+ const resp = await onRunAction(plugin.key, a.id);
+ if (resp?.success) {
+ setLastResult(resp.result || {});
+ const msg = resp.result?.message || 'Plugin action completed';
+ showNotification({
+ title: plugin.name,
+ message: msg,
+ color: 'green',
+ });
+ } else {
+ const err = resp?.error || 'Unknown error';
+ setLastResult({ error: err });
+ showNotification({
+ title: `${plugin.name} error`,
+ message: String(err),
+ color: 'red',
+ });
+ }
+ } finally {
+ setRunning(false);
+ }
+ };
+
+ return (
+
+
+
+ {plugin.name}
+
+ {plugin.description}
+
+
+
+ onRequestDelete && onRequestDelete(plugin)}
+ >
+
+
+
+ v{plugin.version || '1.0.0'}
+
+
+
+
+
+ {missing && (
+
+ Missing plugin files. Re-import or delete this entry.
+
+ )}
+
+ {!missing && plugin.fields && plugin.fields.length > 0 && (
+
+
+
+
+
+
+ )}
+
+ {!missing && plugin.actions && plugin.actions.length > 0 && (
+ <>
+
+
+
+
+
+
+ )}
+
+ );
+};
+
+export default PluginCard;
\ No newline at end of file
diff --git a/frontend/src/components/cards/RecordingCard.jsx b/frontend/src/components/cards/RecordingCard.jsx
new file mode 100644
index 00000000..6f90e0f5
--- /dev/null
+++ b/frontend/src/components/cards/RecordingCard.jsx
@@ -0,0 +1,422 @@
+import useChannelsStore from '../../store/channels.jsx';
+import useSettingsStore from '../../store/settings.jsx';
+import useVideoStore from '../../store/useVideoStore.jsx';
+import { useDateTimeFormat, useTimeHelpers } from '../../utils/dateTimeUtils.js';
+import { notifications } from '@mantine/notifications';
+import React from 'react';
+import {
+ ActionIcon,
+ Badge,
+ Box,
+ Button,
+ Card,
+ Center,
+ Flex,
+ Group,
+ Image,
+ Modal,
+ Stack,
+ Text,
+ Tooltip,
+} from '@mantine/core';
+import { AlertTriangle, SquareX } from 'lucide-react';
+import RecordingSynopsis from '../RecordingSynopsis';
+import {
+ deleteRecordingById,
+ deleteSeriesAndRule,
+ getPosterUrl,
+ getRecordingUrl,
+ getSeasonLabel,
+ getSeriesInfo,
+ getShowVideoUrl,
+ removeRecording,
+ runComSkip,
+} from './../../utils/cards/RecordingCardUtils.js';
+
+const RecordingCard = ({ recording, onOpenDetails, onOpenRecurring }) => {
+ const channels = useChannelsStore((s) => s.channels);
+ const env_mode = useSettingsStore((s) => s.environment.env_mode);
+ const showVideo = useVideoStore((s) => s.showVideo);
+ const fetchRecordings = useChannelsStore((s) => s.fetchRecordings);
+ const { toUserTime, userNow } = useTimeHelpers();
+ const [timeformat, dateformat] = useDateTimeFormat();
+
+ const channel = channels?.[recording.channel];
+
+ const customProps = recording.custom_properties || {};
+ const program = customProps.program || {};
+ const recordingName = program.title || 'Custom Recording';
+ const subTitle = program.sub_title || '';
+ const description = program.description || customProps.description || '';
+ const isRecurringRule = customProps?.rule?.type === 'recurring';
+
+ // Poster or channel logo
+ const posterUrl = getPosterUrl(
+ customProps.poster_logo_id, customProps, channel?.logo?.cache_url, env_mode);
+
+ const start = toUserTime(recording.start_time);
+ const end = toUserTime(recording.end_time);
+ const now = userNow();
+ const status = customProps.status;
+ const isTimeActive = now.isAfter(start) && now.isBefore(end);
+ const isInterrupted = status === 'interrupted';
+ const isInProgress = isTimeActive; // Show as recording by time, regardless of status glitches
+ const isUpcoming = now.isBefore(start);
+ const isSeriesGroup = Boolean(
+ recording._group_count && recording._group_count > 1
+ );
+ // Season/Episode display if present
+ const season = customProps.season ?? program?.custom_properties?.season;
+ const episode = customProps.episode ?? program?.custom_properties?.episode;
+ const onscreen =
+ customProps.onscreen_episode ??
+ program?.custom_properties?.onscreen_episode;
+ const seLabel = getSeasonLabel(season, episode, onscreen);
+
+ const handleWatchLive = () => {
+ if (!channel) return;
+ showVideo(getShowVideoUrl(channel, env_mode), 'live');
+ };
+
+ const handleWatchRecording = () => {
+ // Only enable if backend provides a playable file URL in custom properties
+ const fileUrl = getRecordingUrl(customProps, env_mode);
+ if (!fileUrl) return;
+
+ showVideo(fileUrl, 'vod', {
+ name: recordingName,
+ logo: { url: posterUrl },
+ });
+ };
+
+ const handleRunComskip = async (e) => {
+ e?.stopPropagation?.();
+ try {
+ await runComSkip(recording);
+ notifications.show({
+ title: 'Removing commercials',
+ message: 'Queued comskip for this recording',
+ color: 'blue.5',
+ autoClose: 2000,
+ });
+ } catch (error) {
+ console.error('Failed to queue comskip for recording', error);
+ }
+ };
+
+ // Cancel handling for series groups
+ const [cancelOpen, setCancelOpen] = React.useState(false);
+ const [busy, setBusy] = React.useState(false);
+ const handleCancelClick = (e) => {
+ e.stopPropagation();
+ if (isRecurringRule) {
+ onOpenRecurring?.(recording, true);
+ return;
+ }
+ if (isSeriesGroup) {
+ setCancelOpen(true);
+ } else {
+ removeRecording(recording.id);
+ }
+ };
+
+ const seriesInfo = getSeriesInfo(customProps);
+
+ const removeUpcomingOnly = async () => {
+ try {
+ setBusy(true);
+ await deleteRecordingById(recording.id);
+ } finally {
+ setBusy(false);
+ setCancelOpen(false);
+ try {
+ await fetchRecordings();
+ } catch (error) {
+ console.error('Failed to refresh recordings', error);
+ }
+ }
+ };
+
+ const removeSeriesAndRule = async () => {
+ try {
+ setBusy(true);
+ await deleteSeriesAndRule(seriesInfo);
+ } finally {
+ setBusy(false);
+ setCancelOpen(false);
+ try {
+ await fetchRecordings();
+ } catch (error) {
+ console.error(
+ 'Failed to refresh recordings after series removal',
+ error
+ );
+ }
+ }
+ };
+
+ const handleOnMainCardClick = () => {
+ if (isRecurringRule) {
+ onOpenRecurring?.(recording, false);
+ } else {
+ onOpenDetails?.(recording);
+ }
+ }
+
+ const WatchLive = () => {
+ return ;
+ }
+
+ const WatchRecording = () => {
+ return
+
+ ;
+ }
+
+ const MainCard = (
+
+
+
+
+ {isInterrupted
+ ? 'Interrupted'
+ : isInProgress
+ ? 'Recording'
+ : isUpcoming
+ ? 'Scheduled'
+ : 'Completed'}
+
+ {isInterrupted && }
+
+
+
+ {recordingName}
+
+ {isSeriesGroup && (
+
+ Series
+
+ )}
+ {isRecurringRule && (
+
+ Recurring
+
+ )}
+ {seLabel && !isSeriesGroup && (
+
+ {seLabel}
+
+ )}
+
+
+
+
+
+
+ e.stopPropagation()}
+ onClick={handleCancelClick}
+ >
+
+
+
+
+
+
+
+
+
+ {!isSeriesGroup && subTitle && (
+
+
+ Episode
+
+
+ {subTitle}
+
+
+ )}
+
+
+ Channel
+
+
+ {channel ? `${channel.channel_number} • ${channel.name}` : '—'}
+
+
+
+
+
+ {isSeriesGroup ? 'Next recording' : 'Time'}
+
+
+ {start.format(`${dateformat}, YYYY ${timeformat}`)} – {end.format(timeformat)}
+
+
+
+ {!isSeriesGroup && description && (
+ onOpenDetails?.(recording)}
+ />
+ )}
+
+ {isInterrupted && customProps.interrupted_reason && (
+
+ {customProps.interrupted_reason}
+
+ )}
+
+
+ {isInProgress && }
+
+ {!isUpcoming && }
+ {!isUpcoming &&
+ customProps?.status === 'completed' &&
+ (!customProps?.comskip ||
+ customProps?.comskip?.status !== 'completed') && (
+
+ )}
+
+
+
+ {/* If this card is a grouped upcoming series, show count */}
+ {recording._group_count > 1 && (
+
+ Next of {recording._group_count}
+
+ )}
+
+ );
+ if (!isSeriesGroup) return MainCard;
+
+ // Stacked look for series groups: render two shadow layers behind the main card
+ return (
+
+ setCancelOpen(false)}
+ title="Cancel Series"
+ centered
+ size="md"
+ zIndex={9999}
+ >
+
+ This is a series rule. What would you like to cancel?
+
+
+
+
+
+
+
+
+ {MainCard}
+
+ );
+};
+
+export default RecordingCard;
\ No newline at end of file
diff --git a/frontend/src/components/cards/SeriesCard.jsx b/frontend/src/components/cards/SeriesCard.jsx
new file mode 100644
index 00000000..f010cb44
--- /dev/null
+++ b/frontend/src/components/cards/SeriesCard.jsx
@@ -0,0 +1,85 @@
+import {
+ Badge,
+ Box,
+ Card,
+ CardSection,
+ Group,
+ Image,
+ Stack,
+ Text,
+} from '@mantine/core';
+import {Calendar, Play, Star} from "lucide-react";
+import React from "react";
+
+const SeriesCard = ({ series, onClick }) => {
+ return (
+ onClick(series)}
+ >
+
+
+ {series.logo?.url ? (
+
+ ) : (
+
+
+
+ )}
+ {/* Add Series badge in the same position as Movie badge */}
+
+ Series
+
+
+
+
+
+ {series.name}
+
+
+ {series.year && (
+
+
+
+ {series.year}
+
+
+ )}
+ {series.rating && (
+
+
+
+ {series.rating}
+
+
+ )}
+
+
+ {series.genre && (
+
+ {series.genre}
+
+ )}
+
+
+ );
+};
+
+export default SeriesCard;
\ No newline at end of file
diff --git a/frontend/src/components/cards/StreamConnectionCard.jsx b/frontend/src/components/cards/StreamConnectionCard.jsx
new file mode 100644
index 00000000..62d6e62f
--- /dev/null
+++ b/frontend/src/components/cards/StreamConnectionCard.jsx
@@ -0,0 +1,613 @@
+import { useLocation } from 'react-router-dom';
+import React, { useEffect, useMemo, useState } from 'react';
+import useLocalStorage from '../../hooks/useLocalStorage.jsx';
+import usePlaylistsStore from '../../store/playlists.jsx';
+import useSettingsStore from '../../store/settings.jsx';
+import {
+ ActionIcon,
+ Badge,
+ Box,
+ Card,
+ Center,
+ Flex,
+ Group,
+ Select,
+ Stack,
+ Text,
+ Tooltip,
+} from '@mantine/core';
+import {
+ Gauge,
+ HardDriveDownload,
+ HardDriveUpload,
+ SquareX,
+ Timer,
+ Users,
+ Video,
+} from 'lucide-react';
+import { toFriendlyDuration } from '../../utils/dateTimeUtils.js';
+import { CustomTable, useTable } from '../tables/CustomTable/index.jsx';
+import { TableHelper } from '../../helpers/index.jsx';
+import logo from '../../images/logo.png';
+import { formatBytes, formatSpeed } from '../../utils/networkUtils.js';
+import { showNotification } from '../../utils/notificationUtils.js';
+import {
+ connectedAccessor,
+ durationAccessor,
+ getBufferingSpeedThreshold,
+ getChannelStreams,
+ getLogoUrl,
+ getM3uAccountsMap,
+ getMatchingStreamByUrl,
+ getSelectedStream,
+ getStartDate,
+ getStreamOptions,
+ getStreamsByIds,
+ switchStream,
+} from '../../utils/cards/StreamConnectionCardUtils.js';
+
+// Create a separate component for each channel card to properly handle the hook
+const StreamConnectionCard = ({
+ channel,
+ clients,
+ stopClient,
+ stopChannel,
+ logos,
+ channelsByUUID,
+}) => {
+ const location = useLocation();
+ const [availableStreams, setAvailableStreams] = useState([]);
+ const [isLoadingStreams, setIsLoadingStreams] = useState(false);
+ const [activeStreamId, setActiveStreamId] = useState(null);
+ const [currentM3UProfile, setCurrentM3UProfile] = useState(null); // Add state for current M3U profile
+ const [data, setData] = useState([]);
+ const [previewedStream, setPreviewedStream] = useState(null);
+
+ // Get M3U account data from the playlists store
+ const m3uAccounts = usePlaylistsStore((s) => s.playlists);
+ // Get settings for speed threshold
+ const settings = useSettingsStore((s) => s.settings);
+
+ // Get Date-format from localStorage
+ const [dateFormatSetting] = useLocalStorage('date-format', 'mdy');
+ const dateFormat = dateFormatSetting === 'mdy' ? 'MM/DD' : 'DD/MM';
+ const [tableSize] = useLocalStorage('table-size', 'default');
+
+ // Create a map of M3U account IDs to names for quick lookup
+ const m3uAccountsMap = useMemo(() => {
+ return getM3uAccountsMap(m3uAccounts);
+ }, [m3uAccounts]);
+
+ // Update M3U profile information when channel data changes
+ useEffect(() => {
+ // If the channel data includes M3U profile information, update our state
+ if (channel.m3u_profile || channel.m3u_profile_name) {
+ setCurrentM3UProfile({
+ name:
+ channel.m3u_profile?.name ||
+ channel.m3u_profile_name ||
+ 'Default M3U',
+ });
+ }
+ }, [channel.m3u_profile, channel.m3u_profile_name, channel.stream_id]);
+
+ // Fetch available streams for this channel
+ useEffect(() => {
+ const fetchStreams = async () => {
+ setIsLoadingStreams(true);
+ try {
+ // Get channel ID from UUID
+ const channelId = channelsByUUID[channel.channel_id];
+ if (channelId) {
+ const streamData = await getChannelStreams(channelId);
+
+ // Use streams in the order returned by the API without sorting
+ setAvailableStreams(streamData);
+
+ // If we have a channel URL, try to find the matching stream
+ if (channel.url && streamData.length > 0) {
+ // Try to find matching stream based on URL
+ const matchingStream = getMatchingStreamByUrl(
+ streamData,
+ channel.url
+ );
+
+ if (matchingStream) {
+ setActiveStreamId(matchingStream.id.toString());
+
+ // If the stream has M3U profile info, save it
+ if (matchingStream.m3u_profile) {
+ setCurrentM3UProfile(matchingStream.m3u_profile);
+ }
+ }
+ }
+ }
+ } catch (error) {
+ console.error('Error fetching streams:', error);
+ } finally {
+ setIsLoadingStreams(false);
+ }
+ };
+
+ fetchStreams();
+ }, [channel.channel_id, channel.url, channelsByUUID]);
+
+ useEffect(() => {
+ setData(
+ clients
+ .filter((client) => client.channel.channel_id === channel.channel_id)
+ .map((client) => ({
+ id: client.client_id,
+ ...client,
+ }))
+ );
+ }, [clients, channel.channel_id]);
+
+ const renderHeaderCell = (header) => {
+ switch (header.id) {
+ default:
+ return (
+
+
+ {header.column.columnDef.header}
+
+
+ );
+ }
+ };
+
+ const renderBodyCell = ({ cell, row }) => {
+ switch (cell.column.id) {
+ case 'actions':
+ return (
+
+
+
+
+ stopClient(
+ row.original.channel.uuid,
+ row.original.client_id
+ )
+ }
+ >
+
+
+
+
+
+ );
+ }
+ };
+
+ const checkStreamsAfterChange = (streamId) => {
+ return async () => {
+ try {
+ const channelId = channelsByUUID[channel.channel_id];
+ if (channelId) {
+ const updatedStreamData = await getChannelStreams(channelId);
+ console.log('Channel streams after switch:', updatedStreamData);
+
+ // Update current stream information with fresh data
+ const updatedStream = getSelectedStream(updatedStreamData, streamId);
+ if (updatedStream?.m3u_profile) {
+ setCurrentM3UProfile(updatedStream.m3u_profile);
+ }
+ }
+ } catch (error) {
+ console.error('Error checking streams after switch:', error);
+ }
+ };
+ };
+
+ // Handle stream switching
+ const handleStreamChange = async (streamId) => {
+ try {
+ console.log('Switching to stream ID:', streamId);
+ // Find the selected stream in availableStreams for debugging
+ const selectedStream = getSelectedStream(availableStreams, streamId);
+ console.log('Selected stream details:', selectedStream);
+
+ // Make sure we're passing the correct ID to the API
+ const response = await switchStream(channel, streamId);
+ console.log('Stream switch API response:', response);
+
+ // Update the local active stream ID immediately
+ setActiveStreamId(streamId);
+
+ // Update M3U profile information if available in the response
+ if (response?.m3u_profile) {
+ setCurrentM3UProfile(response.m3u_profile);
+ } else if (selectedStream && selectedStream.m3u_profile) {
+ // Fallback to the profile from the selected stream
+ setCurrentM3UProfile(selectedStream.m3u_profile);
+ }
+
+ // Show detailed notification with stream name
+ showNotification({
+ title: 'Stream switching',
+ message: `Switching to "${selectedStream?.name}" for ${channel.name}`,
+ color: 'blue.5',
+ });
+
+ // After a short delay, fetch streams again to confirm the switch
+ setTimeout(checkStreamsAfterChange(streamId), 2000);
+ } catch (error) {
+ console.error('Stream switch error:', error);
+ showNotification({
+ title: 'Error switching stream',
+ message: error.toString(),
+ color: 'red.5',
+ });
+ }
+ };
+
+ const clientsColumns = useMemo(
+ () => [
+ {
+ id: 'expand',
+ size: 20,
+ },
+ {
+ header: 'IP Address',
+ accessorKey: 'ip_address',
+ },
+ // Updated Connected column with tooltip
+ {
+ id: 'connected',
+ header: 'Connected',
+ accessorFn: connectedAccessor(dateFormat),
+ cell: ({ cell }) => (
+
+ {cell.getValue()}
+
+ ),
+ },
+ // Update Duration column with tooltip showing exact seconds
+ {
+ id: 'duration',
+ header: 'Duration',
+ accessorFn: durationAccessor(),
+ cell: ({ cell, row }) => {
+ const exactDuration =
+ row.original.connected_since || row.original.connection_duration;
+ return (
+
+ {cell.getValue()}
+
+ );
+ },
+ },
+ {
+ id: 'actions',
+ header: 'Actions',
+ size: tableSize == 'compact' ? 75 : 100,
+ },
+ ],
+ []
+ );
+
+ const channelClientsTable = useTable({
+ ...TableHelper.defaultProperties,
+ columns: clientsColumns,
+ data,
+ allRowIds: data.map((client) => client.id),
+ tableCellProps: () => ({
+ padding: 4,
+ borderColor: '#444',
+ color: '#E0E0E0',
+ fontSize: '0.85rem',
+ }),
+ headerCellRenderFns: {
+ ip_address: renderHeaderCell,
+ connected: renderHeaderCell,
+ duration: renderHeaderCell,
+ actions: renderHeaderCell,
+ },
+ bodyCellRenderFns: {
+ actions: renderBodyCell,
+ },
+ getExpandedRowHeight: (row) => {
+ return 20 + 28 * row.original.streams.length;
+ },
+ expandedRowRenderer: ({ row }) => {
+ return (
+
+
+
+ User Agent:
+
+ {row.original.user_agent || 'Unknown'}
+
+
+ );
+ },
+ mantineExpandButtonProps: ({ row, table }) => ({
+ size: 'xs',
+ style: {
+ transform: row.getIsExpanded() ? 'rotate(180deg)' : 'rotate(-90deg)',
+ transition: 'transform 0.2s',
+ },
+ }),
+ displayColumnDefOptions: {
+ 'mrt-row-expand': {
+ size: 15,
+ header: '',
+ },
+ 'mrt-row-actions': {
+ size: 74,
+ },
+ },
+ });
+
+ // Get logo URL from the logos object if available
+ const logoUrl = getLogoUrl(channel.logo_id, logos, previewedStream);
+
+ useEffect(() => {
+ let isMounted = true;
+ // Only fetch if we have a stream_id and NO channel.name
+ if (!channel.name && channel.stream_id) {
+ getStreamsByIds(channel.stream_id).then((streams) => {
+ if (isMounted && streams && streams.length > 0) {
+ setPreviewedStream(streams[0]);
+ }
+ });
+ }
+ return () => {
+ isMounted = false;
+ };
+ }, [channel.name, channel.stream_id]);
+
+ const channelName =
+ channel.name || previewedStream?.name || 'Unnamed Channel';
+ const uptime = channel.uptime || 0;
+ const bitrates = channel.bitrates || [];
+ const totalBytes = channel.total_bytes || 0;
+ const clientCount = channel.client_count || 0;
+ const avgBitrate = channel.avg_bitrate || '0 Kbps';
+ const streamProfileName = channel.stream_profile?.name || 'Unknown Profile';
+
+ // Use currentM3UProfile if available, otherwise fall back to channel data
+ const m3uProfileName =
+ currentM3UProfile?.name ||
+ channel.m3u_profile?.name ||
+ channel.m3u_profile_name ||
+ 'Unknown M3U Profile';
+
+ // Create select options for available streams
+ const streamOptions = getStreamOptions(availableStreams, m3uAccountsMap);
+
+ if (location.pathname !== '/stats') {
+ return <>;
+ }
+
+ // Safety check - if channel doesn't have required data, don't render
+ if (!channel || !channel.channel_id) {
+ return null;
+ }
+
+ return (
+
+
+
+
+ 
+
+
+
+
+
+
+
+ {toFriendlyDuration(uptime, 'seconds')}
+
+
+
+
+
+ stopChannel(channel.channel_id)}
+ >
+
+
+
+
+
+
+
+
+
+ {channelName}
+
+
+
+
+
+ {streamProfileName}
+
+
+
+
+ {/* Display M3U profile information */}
+
+
+
+
+ {m3uProfileName}
+
+
+
+
+ {/* Add stream selection dropdown */}
+ {availableStreams.length > 0 && (
+
+
+
+ )}
+
+ {/* Add stream information badges */}
+
+ {channel.resolution && (
+
+
+ {channel.resolution}
+
+
+ )}
+ {channel.source_fps && (
+
+
+ {channel.source_fps} FPS
+
+
+ )}
+ {channel.video_codec && (
+
+
+ {channel.video_codec.toUpperCase()}
+
+
+ )}
+ {channel.audio_codec && (
+
+
+ {channel.audio_codec.toUpperCase()}
+
+
+ )}
+ {channel.audio_channels && (
+
+
+ {channel.audio_channels}
+
+
+ )}
+ {channel.stream_type && (
+
+
+ {channel.stream_type.toUpperCase()}
+
+
+ )}
+ {channel.ffmpeg_speed && (
+
+ =
+ getBufferingSpeedThreshold(settings['proxy_settings'])
+ ? 'green'
+ : 'red'
+ }
+ >
+ {parseFloat(channel.ffmpeg_speed).toFixed(2)}x
+
+
+ )}
+
+
+
+
+
+
+
+ {formatSpeed(bitrates.at(-1) || 0)}
+
+
+
+
+
+
+ Avg: {avgBitrate}
+
+
+
+
+
+
+
+ {formatBytes(totalBytes)}
+
+
+
+
+
+
+
+
+ {clientCount}
+
+
+
+
+
+
+
+
+ );
+};
+
+export default StreamConnectionCard;
diff --git a/frontend/src/components/cards/VODCard.jsx b/frontend/src/components/cards/VODCard.jsx
new file mode 100644
index 00000000..42468dae
--- /dev/null
+++ b/frontend/src/components/cards/VODCard.jsx
@@ -0,0 +1,143 @@
+import {
+ ActionIcon,
+ Badge,
+ Box,
+ Card,
+ CardSection,
+ Group,
+ Image,
+ Stack,
+ Text,
+} from '@mantine/core';
+import { Calendar, Clock, Play, Star } from 'lucide-react';
+import React from 'react';
+import {
+ formatDuration,
+ getSeasonLabel,
+} from '../../utils/cards/VODCardUtils.js';
+
+const VODCard = ({ vod, onClick }) => {
+ const isEpisode = vod.type === 'episode';
+
+ const getDisplayTitle = () => {
+ if (isEpisode && vod.series) {
+ return (
+
+
+ {vod.series.name}
+
+
+ {getSeasonLabel(vod)} - {vod.name}
+
+
+ );
+ }
+ return {vod.name};
+ };
+
+ const handleCardClick = async () => {
+ // Just pass the basic vod info to the parent handler
+ onClick(vod);
+ };
+
+ return (
+
+
+
+ {vod.logo?.url ? (
+
+ ) : (
+
+
+
+ )}
+
+ {
+ e.stopPropagation();
+ onClick(vod);
+ }}
+ >
+
+
+
+
+ {isEpisode ? 'Episode' : 'Movie'}
+
+
+
+
+
+ {getDisplayTitle()}
+
+
+ {vod.year && (
+
+
+
+ {vod.year}
+
+
+ )}
+
+ {vod.duration && (
+
+
+
+ {formatDuration(vod.duration_secs)}
+
+
+ )}
+
+ {vod.rating && (
+
+
+
+ {vod.rating}
+
+
+ )}
+
+
+ {vod.genre && (
+
+ {vod.genre}
+
+ )}
+
+
+ );
+};
+
+export default VODCard;
\ No newline at end of file
diff --git a/frontend/src/components/cards/VodConnectionCard.jsx b/frontend/src/components/cards/VodConnectionCard.jsx
new file mode 100644
index 00000000..57564dce
--- /dev/null
+++ b/frontend/src/components/cards/VodConnectionCard.jsx
@@ -0,0 +1,422 @@
+// Format duration for content length
+import useLocalStorage from '../../hooks/useLocalStorage.jsx';
+import React, { useCallback, useEffect, useState } from 'react';
+import logo from '../../images/logo.png';
+import { ActionIcon, Badge, Box, Card, Center, Flex, Group, Progress, Stack, Text, Tooltip } from '@mantine/core';
+import { convertToSec, fromNow, toFriendlyDuration } from '../../utils/dateTimeUtils.js';
+import { ChevronDown, HardDriveUpload, SquareX, Timer, Video } from 'lucide-react';
+import {
+ calculateConnectionDuration,
+ calculateConnectionStartTime,
+ calculateProgress,
+ formatDuration,
+ formatTime,
+ getEpisodeDisplayTitle,
+ getEpisodeSubtitle,
+ getMovieDisplayTitle,
+ getMovieSubtitle,
+} from '../../utils/cards/VodConnectionCardUtils.js';
+
+const ClientDetails = ({ connection, connectionStartTime }) => {
+ return (
+
+ {connection.user_agent &&
+ connection.user_agent !== 'Unknown' && (
+
+
+ User Agent:
+
+
+ {connection.user_agent.length > 100
+ ? `${connection.user_agent.substring(0, 100)}...`
+ : connection.user_agent}
+
+
+ )}
+
+
+
+ Client ID:
+
+
+ {connection.client_id || 'Unknown'}
+
+
+
+ {connection.connected_at && (
+
+
+ Connected:
+
+ {connectionStartTime}
+
+ )}
+
+ {connection.duration && connection.duration > 0 && (
+
+
+ Watch Duration:
+
+
+ {toFriendlyDuration(connection.duration, 'seconds')}
+
+
+ )}
+
+ {/* Seek/Position Information */}
+ {(connection.last_seek_percentage > 0 ||
+ connection.last_seek_byte > 0) && (
+ <>
+
+
+ Last Seek:
+
+
+ {connection.last_seek_percentage?.toFixed(1)}%
+ {connection.total_content_size > 0 && (
+
+ {' '}
+ ({Math.round(connection.last_seek_byte / (1024 * 1024))}
+ MB /{' '}
+ {Math.round(
+ connection.total_content_size / (1024 * 1024)
+ )}
+ MB)
+
+ )}
+
+
+
+ {Number(connection.last_seek_timestamp) > 0 && (
+
+
+ Seek Time:
+
+
+ {fromNow(convertToSec(Number(connection.last_seek_timestamp)))}
+
+
+ )}
+
+ )}
+
+ {connection.bytes_sent > 0 && (
+
+
+ Data Sent:
+
+
+ {(connection.bytes_sent / (1024 * 1024)).toFixed(1)} MB
+
+
+ )}
+
+ );
+}
+
+// Create a VOD Card component similar to ChannelCard
+const VodConnectionCard = ({ vodContent, stopVODClient }) => {
+ const [dateFormatSetting] = useLocalStorage('date-format', 'mdy');
+ const dateFormat = dateFormatSetting === 'mdy' ? 'MM/DD' : 'DD/MM';
+ const [isClientExpanded, setIsClientExpanded] = useState(false);
+ const [, setUpdateTrigger] = useState(0); // Force re-renders for progress updates
+
+ // Get metadata from the VOD content
+ const metadata = vodContent.content_metadata || {};
+ const contentType = vodContent.content_type;
+ const isMovie = contentType === 'movie';
+ const isEpisode = contentType === 'episode';
+
+ // Set up timer to update progress every second
+ useEffect(() => {
+ const interval = setInterval(() => {
+ setUpdateTrigger((prev) => prev + 1);
+ }, 1000);
+
+ return () => clearInterval(interval);
+ }, []);
+
+ // Get the individual connection (since we now separate cards per connection)
+ const connection =
+ vodContent.individual_connection ||
+ (vodContent.connections && vodContent.connections[0]);
+
+ // Get poster/logo URL
+ const posterUrl = metadata.logo_url || logo;
+
+ // Get display title
+ const getDisplayTitle = () => {
+ if (isMovie) {
+ return getMovieDisplayTitle(vodContent);
+ } else if (isEpisode) {
+ return getEpisodeDisplayTitle(metadata);
+ }
+ return vodContent.content_name;
+ };
+
+ // Get subtitle info
+ const getSubtitle = () => {
+ if (isMovie) {
+ return getMovieSubtitle(metadata);
+ } else if (isEpisode) {
+ return getEpisodeSubtitle(metadata);
+ }
+ return [];
+ };
+
+ // Render subtitle
+ const renderSubtitle = () => {
+ const subtitleParts = getSubtitle();
+ if (subtitleParts.length === 0) return null;
+
+ return (
+
+ {subtitleParts.join(' • ')}
+
+ );
+ };
+
+ // Calculate progress percentage and time
+ const getProgressInfo = useCallback(() => {
+ return calculateProgress(connection, metadata.duration_secs);
+ }, [connection, metadata.duration_secs]);
+
+ // Calculate duration for connection
+ const getConnectionDuration = useCallback((connection) => {
+ return calculateConnectionDuration(connection);
+ }, []);
+
+ // Get connection start time for tooltip
+ const getConnectionStartTime = useCallback(
+ (connection) => {
+ return calculateConnectionStartTime(connection, dateFormat);
+ },
+ [dateFormat]
+ );
+
+ return (
+
+
+ {/* Header with poster and basic info */}
+
+
+ 
+
+
+
+ {connection && (
+
+
+
+ {getConnectionDuration(connection)}
+
+
+ )}
+ {connection && stopVODClient && (
+
+
+ stopVODClient(connection.client_id)}
+ >
+
+
+
+
+ )}
+
+
+
+ {/* Title and type */}
+
+
+ {getDisplayTitle()}
+
+
+
+
+
+ {isMovie ? 'Movie' : 'TV Episode'}
+
+
+
+
+ {/* Display M3U profile information - matching channel card style */}
+ {connection &&
+ connection.m3u_profile &&
+ (connection.m3u_profile.profile_name ||
+ connection.m3u_profile.account_name) && (
+
+
+
+
+
+
+ {connection.m3u_profile.account_name || 'Unknown Account'}
+
+
+
+
+ {connection.m3u_profile.profile_name || 'Default Profile'}
+
+
+
+
+
+ )}
+
+ {/* Subtitle/episode info */}
+ {getSubtitle().length > 0 && (
+
+ {renderSubtitle()}
+
+ )}
+
+ {/* Content information badges - streamlined to avoid duplication */}
+
+ {metadata.year && (
+
+
+ {metadata.year}
+
+
+ )}
+
+ {metadata.duration_secs && (
+
+
+ {formatDuration(metadata.duration_secs)}
+
+
+ )}
+
+ {metadata.rating && (
+
+
+ {parseFloat(metadata.rating).toFixed(1)}/10
+
+
+ )}
+
+
+ {/* Progress bar - show current position in content */}
+ {connection &&
+ metadata.duration_secs &&
+ (() => {
+ const { totalTime, currentTime, percentage} = getProgressInfo();
+ return totalTime > 0 ? (
+
+
+
+ Progress
+
+
+ {formatTime(currentTime)} /{' '}
+ {formatTime(totalTime)}
+
+
+
+
+ {percentage.toFixed(1)}% watched
+
+
+ ) : null;
+ })()}
+
+ {/* Client information section - collapsible like channel cards */}
+ {connection && (
+
+ {/* Client summary header - always visible */}
+ setIsClientExpanded(!isClientExpanded)}
+ >
+
+
+ Client:
+
+
+ {connection.client_ip || 'Unknown IP'}
+
+
+
+
+
+ {isClientExpanded ? 'Hide Details' : 'Show Details'}
+
+
+
+
+
+ {/* Expanded client details */}
+ {isClientExpanded && (
+
+ )}
+
+ )}
+
+
+ );
+};
+
+export default VodConnectionCard;
\ No newline at end of file
diff --git a/frontend/src/components/forms/AccountInfoModal.jsx b/frontend/src/components/forms/AccountInfoModal.jsx
new file mode 100644
index 00000000..b8522638
--- /dev/null
+++ b/frontend/src/components/forms/AccountInfoModal.jsx
@@ -0,0 +1,462 @@
+import React, { useState, useMemo } from 'react';
+import {
+ Modal,
+ Text,
+ Box,
+ Group,
+ Badge,
+ Table,
+ Stack,
+ Divider,
+ Alert,
+ Loader,
+ Center,
+ ActionIcon,
+ Tooltip,
+} from '@mantine/core';
+import { notifications } from '@mantine/notifications';
+import {
+ Info,
+ Clock,
+ Users,
+ CheckCircle,
+ XCircle,
+ AlertTriangle,
+ RefreshCw,
+} from 'lucide-react';
+import API from '../../api';
+import usePlaylistsStore from '../../store/playlists';
+
+const AccountInfoModal = ({ isOpen, onClose, profile, onRefresh }) => {
+ const [isRefreshing, setIsRefreshing] = useState(false);
+
+ // Get fresh profile data from store to ensure we have the latest custom_properties
+ const profiles = usePlaylistsStore((state) => state.profiles);
+ const currentProfile = useMemo(() => {
+ if (!profile?.id || !profile?.account?.id) return profile;
+
+ // Find the current profile in the store by ID
+ const accountProfiles = profiles[profile.account.id] || [];
+ const freshProfile = accountProfiles.find((p) => p.id === profile.id);
+
+ // Return fresh profile if found, otherwise fall back to the passed profile
+ return freshProfile || profile;
+ }, [profile, profiles]);
+
+ const handleRefresh = async () => {
+ if (!currentProfile?.id) {
+ notifications.show({
+ title: 'Error',
+ message: 'Unable to refresh: Profile information not available',
+ color: 'red',
+ icon: ,
+ });
+ return;
+ }
+
+ setIsRefreshing(true);
+
+ try {
+ const data = await API.refreshAccountInfo(currentProfile.id);
+
+ if (data.success) {
+ notifications.show({
+ title: 'Success',
+ message:
+ 'Account info refresh initiated. The information will be updated shortly.',
+ color: 'green',
+ icon: ,
+ });
+
+ // Call the parent's refresh function if provided
+ if (onRefresh) {
+ // Wait a moment for the backend to process, then refresh
+ setTimeout(onRefresh, 2000);
+ }
+ } else {
+ notifications.show({
+ title: 'Error',
+ message: data.error || 'Failed to refresh account information',
+ color: 'red',
+ icon: ,
+ });
+ }
+ } catch {
+ // Error notification is already handled by the API function
+ // Just need to handle the UI state
+ } finally {
+ setIsRefreshing(false);
+ }
+ };
+ if (!currentProfile || !currentProfile.custom_properties) {
+ return (
+
+
+
+
+ No account information available
+
+ Account information will be available after the next refresh for
+ XtreamCodes accounts.
+
+
+
+
+ );
+ }
+
+ const { user_info, server_info, last_refresh } =
+ currentProfile.custom_properties || {};
+
+ // Helper function to format timestamps
+ const formatTimestamp = (timestamp) => {
+ if (!timestamp) return 'Unknown';
+ try {
+ const date =
+ typeof timestamp === 'string' && timestamp.includes('T')
+ ? new Date(timestamp) // This should handle ISO format properly
+ : new Date(parseInt(timestamp) * 1000);
+
+ // Convert to user's local time and display with timezone
+ return date.toLocaleString(undefined, {
+ year: 'numeric',
+ month: 'short',
+ day: 'numeric',
+ hour: '2-digit',
+ minute: '2-digit',
+ timeZoneName: 'short',
+ });
+ } catch {
+ return 'Invalid date';
+ }
+ };
+
+ // Helper function to get time remaining
+ const getTimeRemaining = (expTimestamp) => {
+ if (!expTimestamp) return null;
+ try {
+ const expDate = new Date(parseInt(expTimestamp) * 1000);
+ const now = new Date();
+ const diffMs = expDate - now;
+
+ if (diffMs <= 0) return 'Expired';
+
+ const days = Math.floor(diffMs / (1000 * 60 * 60 * 24));
+ const hours = Math.floor(
+ (diffMs % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
+ );
+
+ if (days > 0) {
+ return `${days} day${days !== 1 ? 's' : ''} ${hours} hour${hours !== 1 ? 's' : ''}`;
+ } else {
+ return `${hours} hour${hours !== 1 ? 's' : ''}`;
+ }
+ } catch {
+ return 'Unknown';
+ }
+ };
+
+ // Helper function to get status badge
+ const getStatusBadge = (status) => {
+ const statusConfig = {
+ Active: { color: 'green', icon: CheckCircle },
+ Expired: { color: 'red', icon: XCircle },
+ Disabled: { color: 'red', icon: XCircle },
+ Banned: { color: 'red', icon: XCircle },
+ };
+
+ const config = statusConfig[status] || {
+ color: 'gray',
+ icon: AlertTriangle,
+ };
+ const Icon = config.icon;
+
+ return (
+ }
+ >
+ {status || 'Unknown'}
+
+ );
+ };
+
+ const timeRemaining = user_info?.exp_date
+ ? getTimeRemaining(user_info.exp_date)
+ : null;
+ const isExpired = timeRemaining === 'Expired';
+
+ return (
+
+
+
+ Account Information - {currentProfile.name}
+
+
+ }
+ size="lg"
+ >
+
+ {/* Account Status Overview */}
+
+
+
+ Account Status
+
+ {getStatusBadge(user_info?.status)}
+
+
+ {isExpired && (
+ }
+ color="red"
+ variant="light"
+ mb="md"
+ >
+ This account has expired!
+
+ )}
+
+
+
+
+ {/* Key Information Cards */}
+
+
+
+
+ Expires
+
+
+ {user_info?.exp_date
+ ? formatTimestamp(user_info.exp_date)
+ : 'Unknown'}
+
+ {timeRemaining && (
+
+ {timeRemaining === 'Expired'
+ ? 'Expired'
+ : `${timeRemaining} remaining`}
+
+ )}
+
+
+
+
+
+ Connections
+
+
+ {user_info?.active_cons || '0'} /{' '}
+ {user_info?.max_connections || 'Unknown'}
+
+
+ Active / Max
+
+
+
+
+ {/* Profile Notes */}
+ {currentProfile?.custom_properties?.notes && (
+ <>
+
+
+
+ Profile Notes
+
+
+
+ {currentProfile.custom_properties.notes}
+
+
+
+
+ )}
+
+
+
+ {/* Detailed Information Table */}
+
+
+ Account Details
+
+
+
+
+
+ Username
+
+ {user_info?.username || 'Unknown'}
+
+
+ Account Created
+
+ {user_info?.created_at
+ ? formatTimestamp(user_info.created_at)
+ : 'Unknown'}
+
+
+
+ Trial Account
+
+
+ {user_info?.is_trial === '1' ? 'Yes' : 'No'}
+
+
+
+ {user_info?.allowed_output_formats &&
+ user_info.allowed_output_formats.length > 0 && (
+
+ Allowed Formats
+
+
+ {user_info.allowed_output_formats.map(
+ (format, index) => (
+
+ {format.toUpperCase()}
+
+ )
+ )}
+
+
+
+ )}
+
+
+
+
+ {/* Server Information */}
+ {server_info && Object.keys(server_info).length > 0 && (
+ <>
+
+
+
+ Server Information
+
+
+
+ {server_info.url && (
+
+
+ Server URL
+
+
+
+ {server_info.url}
+
+
+
+ )}
+ {server_info.port && (
+
+ Port
+
+
+ {server_info.port}
+
+
+
+ )}
+ {server_info.https_port && (
+
+ HTTPS Port
+
+
+ {server_info.https_port}
+
+
+
+ )}
+ {server_info.timezone && (
+
+ Timezone
+ {server_info.timezone}
+
+ )}
+
+
+
+
+ )}
+
+ {/* Last Refresh Info */}
+
+
+
+ {/* Show refresh button for XtreamCodes accounts */}
+ {currentProfile?.account?.is_xtream_codes && (
+
+
+
+
+
+ )}
+
+
+ Last Account Info Refresh:
+
+
+ {last_refresh ? formatTimestamp(last_refresh) : 'Never'}
+
+
+
+
+
+
+ );
+};
+
+export default AccountInfoModal;
diff --git a/frontend/src/components/forms/AssignChannelNumbers.jsx b/frontend/src/components/forms/AssignChannelNumbers.jsx
new file mode 100644
index 00000000..7465cae7
--- /dev/null
+++ b/frontend/src/components/forms/AssignChannelNumbers.jsx
@@ -0,0 +1,88 @@
+import React, { useState, useEffect, useRef } from 'react';
+import API from '../../api';
+import {
+ Button,
+ Modal,
+ Text,
+ Group,
+ Flex,
+ useMantineTheme,
+ NumberInput,
+} from '@mantine/core';
+import { ListOrdered } from 'lucide-react';
+import { useForm } from '@mantine/form';
+import { notifications } from '@mantine/notifications';
+
+const AssignChannelNumbers = ({ channelIds, isOpen, onClose }) => {
+ const theme = useMantineTheme();
+
+ const form = useForm({
+ mode: 'uncontrolled',
+ initialValues: {
+ starting_number: 1,
+ },
+ });
+
+ const onSubmit = async () => {
+ const { starting_number } = form.getValues();
+
+ try {
+ const result = await API.assignChannelNumbers(
+ channelIds,
+ starting_number
+ );
+
+ notifications.show({
+ title: result.message || 'Channels assigned',
+ color: 'green.5',
+ });
+
+ API.requeryChannels();
+
+ onClose();
+ } catch (err) {
+ console.error(err);
+ notifications.show({
+ title: 'Failed to assign channels',
+ color: 'red.5',
+ });
+ }
+ };
+
+ if (!isOpen) {
+ return <>;
+ }
+
+ return (
+
+
+ Assign Channel #s
+
+ }
+ styles={{ hannontent: { '--mantine-color-body': '#27272A' } }}
+ >
+
+
+ );
+};
+
+export default AssignChannelNumbers;
diff --git a/frontend/src/components/forms/Channel.jsx b/frontend/src/components/forms/Channel.jsx
index 3253d67b..4f12dd2c 100644
--- a/frontend/src/components/forms/Channel.jsx
+++ b/frontend/src/components/forms/Channel.jsx
@@ -1,14 +1,18 @@
-import React, { useState, useEffect, useRef } from 'react';
-import { useFormik } from 'formik';
+import React, { useState, useEffect, useRef, useMemo } from 'react';
+import { useForm } from 'react-hook-form';
+import { yupResolver } from '@hookform/resolvers/yup';
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 { MantineReactTable, useMantineReactTable } from 'mantine-react-table';
import ChannelGroupForm from './ChannelGroup';
import usePlaylistsStore from '../../store/playlists';
import logo from '../../images/logo.png';
+import { useChannelLogoSelection } from '../../hooks/useSmartLogos';
+import useLogosStore from '../../store/logos';
+import LazyLogo from '../LazyLogo';
+import LogoForm from './Logo';
import {
Box,
Button,
@@ -32,12 +36,19 @@ import {
Image,
UnstyledButton,
} from '@mantine/core';
-import { ListOrdered, SquarePlus, SquareX, X } from 'lucide-react';
+import { notifications } from '@mantine/notifications';
+import { ListOrdered, SquarePlus, SquareX, X, Zap } from 'lucide-react';
import useEPGsStore from '../../store/epgs';
-import { Dropzone } from '@mantine/dropzone';
-import { FixedSizeList as List } from 'react-window';
-const Channel = ({ channel = null, isOpen, onClose }) => {
+import { FixedSizeList as List } from 'react-window';
+import { USER_LEVELS, USER_LEVEL_LABELS } from '../../constants';
+
+const validationSchema = Yup.object({
+ name: Yup.string().required('Name is required'),
+ channel_group_id: Yup.string().required('Channel group is required'),
+});
+
+const ChannelForm = ({ channel = null, isOpen, onClose }) => {
const theme = useMantineTheme();
const listRef = useRef(null);
@@ -45,8 +56,21 @@ const Channel = ({ channel = null, isOpen, onClose }) => {
const groupListRef = useRef(null);
const channelGroups = useChannelsStore((s) => s.channelGroups);
- const logos = useChannelsStore((s) => s.logos);
- const fetchLogos = useChannelsStore((s) => s.fetchLogos);
+ const canEditChannelGroup = useChannelsStore((s) => s.canEditChannelGroup);
+
+ 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 streams = useStreamsStore((state) => state.streams);
const streamProfiles = useStreamProfilesStore((s) => s.profiles);
const playlists = usePlaylistsStore((s) => s.playlists);
@@ -54,18 +78,18 @@ const Channel = ({ channel = null, isOpen, onClose }) => {
const tvgs = useEPGsStore((s) => s.tvgs);
const tvgsById = useEPGsStore((s) => s.tvgsById);
- const [logoPreview, setLogoPreview] = useState(null);
+ 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 [selectedEPG, setSelectedEPG] = useState('');
const [tvgFilter, setTvgFilter] = useState('');
const [logoFilter, setLogoFilter] = useState('');
- const [logoOptions, setLogoOptions] = useState([]);
const [groupPopoverOpened, setGroupPopoverOpened] = useState(false);
const [groupFilter, setGroupFilter] = useState('');
+ const [autoMatchLoading, setAutoMatchLoading] = useState(false);
const groupOptions = Object.values(channelGroups);
const addStream = (stream) => {
@@ -80,265 +104,343 @@ const Channel = ({ channel = null, isOpen, onClose }) => {
setChannelStreams(Array.from(streamSet));
};
- const handleLogoChange = async (files) => {
- if (files.length === 1) {
- const retval = await API.uploadLogo(files[0]);
- await fetchLogos();
- setLogoPreview(retval.cache_url);
- formik.setFieldValue('logo_id', retval.id);
- } else {
- setLogoPreview(null);
+ const handleLogoSuccess = ({ logo }) => {
+ if (logo && logo.id) {
+ setValue('logo_id', logo.id);
+ ensureLogosLoaded(); // Refresh logos
+ }
+ setLogoModalOpen(false);
+ };
+
+ const handleAutoMatchEpg = async () => {
+ // Only attempt auto-match for existing channels (editing mode)
+ if (!channel || !channel.id) {
+ notifications.show({
+ title: 'Info',
+ message: 'Auto-match is only available when editing existing channels.',
+ color: 'blue',
+ });
+ return;
+ }
+
+ setAutoMatchLoading(true);
+ try {
+ const response = await API.matchChannelEpg(channel.id);
+
+ if (response.matched) {
+ // Update the form with the new EPG data
+ if (response.channel && response.channel.epg_data_id) {
+ setValue('epg_data_id', response.channel.epg_data_id);
+ }
+
+ notifications.show({
+ title: 'Success',
+ message: response.message,
+ color: 'green',
+ });
+ } else {
+ notifications.show({
+ title: 'No Match Found',
+ message: response.message,
+ color: 'orange',
+ });
+ }
+ } catch (error) {
+ notifications.show({
+ title: 'Error',
+ message: 'Failed to auto-match EPG data',
+ color: 'red',
+ });
+ console.error('Auto-match error:', error);
+ } finally {
+ setAutoMatchLoading(false);
}
};
- const formik = useFormik({
- initialValues: {
- name: '',
- channel_number: 0,
- channel_group_id: Object.keys(channelGroups)[0],
- stream_profile_id: '0',
- tvg_id: '',
- 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;
+ const handleSetNameFromEpg = () => {
+ const epgDataId = watch('epg_data_id');
+ if (!epgDataId) {
+ notifications.show({
+ title: 'No EPG Selected',
+ message: 'Please select an EPG source first.',
+ color: 'orange',
+ });
+ return;
+ }
- try {
- const formattedValues = { ...values };
+ const tvg = tvgsById[epgDataId];
+ if (tvg && tvg.name) {
+ setValue('name', tvg.name);
+ notifications.show({
+ title: 'Success',
+ message: `Channel name set to "${tvg.name}"`,
+ color: 'green',
+ });
+ } else {
+ notifications.show({
+ title: 'No Name Available',
+ message: 'No name found in the selected EPG data.',
+ color: 'orange',
+ });
+ }
+ };
- // 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;
+ const handleSetLogoFromEpg = async () => {
+ const epgDataId = watch('epg_data_id');
+ if (!epgDataId) {
+ notifications.show({
+ title: 'No EPG Selected',
+ message: 'Please select an EPG source first.',
+ color: 'orange',
+ });
+ return;
+ }
+
+ const tvg = tvgsById[epgDataId];
+ if (!tvg || !tvg.icon_url) {
+ notifications.show({
+ title: 'No EPG Icon',
+ message: 'EPG data does not have an icon URL.',
+ color: 'orange',
+ });
+ return;
+ }
+
+ try {
+ // Try to find a logo that matches the EPG icon URL - check ALL logos to avoid duplicates
+ let matchingLogo = Object.values(allLogos).find(
+ (logo) => logo.url === tvg.icon_url
+ );
+
+ if (matchingLogo) {
+ setValue('logo_id', matchingLogo.id);
+ notifications.show({
+ title: 'Success',
+ message: `Logo set to "${matchingLogo.name}"`,
+ color: 'green',
+ });
+ } else {
+ // Logo doesn't exist - create it
+ notifications.show({
+ id: 'creating-logo',
+ title: 'Creating Logo',
+ message: `Creating new logo from EPG icon URL...`,
+ loading: true,
+ });
+
+ try {
+ const newLogoData = {
+ name: tvg.name || `Logo for ${tvg.icon_url}`,
+ url: tvg.icon_url,
+ };
+
+ // Create logo by calling the Logo API directly
+ const newLogo = await API.createLogo(newLogoData);
+
+ setValue('logo_id', newLogo.id);
+
+ notifications.update({
+ id: 'creating-logo',
+ title: 'Success',
+ message: `Created and assigned new logo "${newLogo.name}"`,
+ loading: false,
+ color: 'green',
+ autoClose: 5000,
+ });
+ } catch (createError) {
+ notifications.update({
+ id: 'creating-logo',
+ title: 'Error',
+ message: 'Failed to create logo from EPG icon URL',
+ loading: false,
+ color: 'red',
+ autoClose: 5000,
+ });
+ throw createError;
}
+ }
+ } catch (error) {
+ notifications.show({
+ title: 'Error',
+ message: 'Failed to set logo from EPG data',
+ color: 'red',
+ });
+ console.error('Set logo from EPG error:', error);
+ }
+ };
- // Ensure tvg_id is properly included (no empty strings)
- formattedValues.tvg_id = formattedValues.tvg_id || null;
+ const handleSetTvgIdFromEpg = () => {
+ const epgDataId = watch('epg_data_id');
+ if (!epgDataId) {
+ notifications.show({
+ title: 'No EPG Selected',
+ message: 'Please select an EPG source first.',
+ color: 'orange',
+ });
+ return;
+ }
- 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
- );
+ const tvg = tvgsById[epgDataId];
+ if (tvg && tvg.tvg_id) {
+ setValue('tvg_id', tvg.tvg_id);
+ notifications.show({
+ title: 'Success',
+ message: `TVG-ID set to "${tvg.tvg_id}"`,
+ color: 'green',
+ });
+ } else {
+ notifications.show({
+ title: 'No TVG-ID Available',
+ message: 'No TVG-ID found in the selected EPG data.',
+ color: 'orange',
+ });
+ }
+ };
- // Remove epg_data_id from values since we've handled it separately
- const { epg_data_id, ...otherValues } = formattedValues;
+ const defaultValues = useMemo(
+ () => ({
+ name: channel?.name || '',
+ channel_number:
+ channel?.channel_number !== null &&
+ channel?.channel_number !== undefined
+ ? channel.channel_number
+ : '',
+ channel_group_id: channel?.channel_group_id
+ ? `${channel.channel_group_id}`
+ : Object.keys(channelGroups).length > 0
+ ? Object.keys(channelGroups)[0]
+ : '',
+ 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}` : '',
+ user_level: `${channel?.user_level ?? '0'}`,
+ }),
+ [channel, channelGroups]
+ );
- // 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
+ const {
+ register,
+ handleSubmit,
+ setValue,
+ watch,
+ reset,
+ formState: { errors, isSubmitting },
+ } = useForm({
+ defaultValues,
+ resolver: yupResolver(validationSchema),
+ });
+
+ const onSubmit = async (values) => {
+ 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,
- ...formattedValues,
+ ...otherValues,
streams: channelStreams.map((stream) => stream.id),
});
}
} else {
- // New channel creation - use the standard method
- response = await API.addChannel({
+ // No EPG change, regular update
+ response = await API.updateChannel({
+ id: channel.id,
...formattedValues,
streams: channelStreams.map((stream) => stream.id),
});
}
- } catch (error) {
- console.error('Error saving channel:', error);
+ } 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();
- setSubmitting(false);
- setTvgFilter('');
- setLogoFilter('');
- onClose();
- },
- });
+ reset();
+ API.requeryChannels();
+
+ // Refresh channel profiles to update the membership information
+ useChannelsStore.getState().fetchChannelProfiles();
+
+ setTvgFilter('');
+ setLogoFilter('');
+ onClose();
+ };
useEffect(() => {
- if (channel) {
- if (channel.epg_data_id) {
- const epgSource = epgs[tvgsById[channel.epg_data_id].epg_source];
- setSelectedEPG(`${epgSource.id}`);
- }
+ reset(defaultValues);
+ setChannelStreams(channel?.streams || []);
- formik.setValues({
- name: channel.name,
- channel_number: 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,
- epg_data_id: channel.epg_data_id ?? '',
- logo_id: `${channel.logo_id}`,
- });
-
- setChannelStreams(channel.streams);
+ if (channel?.epg_data_id) {
+ const epgSource = epgs[tvgsById[channel.epg_data_id]?.epg_source];
+ setSelectedEPG(epgSource ? `${epgSource.id}` : '');
} else {
- formik.resetForm();
+ setSelectedEPG('');
+ }
+
+ if (!channel) {
setTvgFilter('');
setLogoFilter('');
}
- }, [channel, tvgsById, channelGroups]);
+ }, [defaultValues, channel, reset, epgs, tvgsById]);
- useEffect(() => {
- setLogoOptions([{ id: '0', name: 'Default' }].concat(Object.values(logos)));
- }, [logos]);
-
- const renderLogoOption = ({ option, checked }) => {
- return (
-
- 
-
+ // Memoize logo options to prevent infinite re-renders during background loading
+ const logoOptions = useMemo(() => {
+ const options = [{ id: '0', name: 'Default' }].concat(
+ Object.values(channelLogos)
);
+ return options;
+ }, [channelLogos]); // Only depend on channelLogos object
+
+ // Update the handler for when channel group modal is closed
+ const handleChannelGroupModalClose = (newGroup) => {
+ setChannelGroupModalOpen(false);
+
+ // If a new group was created and returned, update the form with it
+ if (newGroup && newGroup.id) {
+ // Preserve all current form values while updating just the channel_group_id
+ setValue('channel_group_id', `${newGroup.id}`);
+ }
};
- // const activeStreamsTable = useMantineReactTable({
- // data: channelStreams,
- // columns: useMemo(
- // () => [
- // {
- // header: 'Name',
- // accessorKey: 'name',
- // Cell: ({ cell }) => (
- //
- // {cell.getValue()}
- //
- // ),
- // },
- // {
- // header: 'M3U',
- // accessorKey: 'group_name',
- // Cell: ({ cell }) => (
- //
- // {cell.getValue()}
- //
- // ),
- // },
- // ],
- // []
- // ),
- // enableSorting: false,
- // enableBottomToolbar: false,
- // enableTopToolbar: false,
- // columnFilterDisplayMode: 'popover',
- // enablePagination: false,
- // enableRowVirtualization: true,
- // enableRowOrdering: true,
- // rowVirtualizerOptions: { overscan: 5 }, //optionally customize the row virtualizer
- // initialState: {
- // density: 'compact',
- // },
- // enableRowActions: true,
- // positionActionsColumn: 'last',
- // renderRowActions: ({ row }) => (
- // <>
- // removeStream(row.original)}
- // >
- // {/* Small icon size */}
- //
- //
- // ),
- // mantineTableContainerProps: {
- // style: {
- // height: '200px',
- // },
- // },
- // mantineRowDragHandleProps: ({ table }) => ({
- // onDragEnd: () => {
- // const { draggingRow, hoveredRow } = table.getState();
-
- // if (hoveredRow && draggingRow) {
- // channelStreams.splice(
- // hoveredRow.index,
- // 0,
- // channelStreams.splice(draggingRow.index, 1)[0]
- // );
-
- // setChannelStreams([...channelStreams]);
- // }
- // },
- // }),
- // });
-
- // const availableStreamsTable = useMantineReactTable({
- // data: streams,
- // columns: useMemo(
- // () => [
- // {
- // header: 'Name',
- // accessorKey: 'name',
- // },
- // {
- // header: 'M3U',
- // accessorFn: (row) =>
- // playlists.find((playlist) => playlist.id === row.m3u_account)?.name,
- // },
- // ],
- // []
- // ),
- // enableBottomToolbar: false,
- // enableTopToolbar: false,
- // columnFilterDisplayMode: 'popover',
- // enablePagination: false,
- // enableRowVirtualization: true,
- // rowVirtualizerOptions: { overscan: 5 }, //optionally customize the row virtualizer
- // initialState: {
- // density: 'compact',
- // },
- // enableRowActions: true,
- // renderRowActions: ({ row }) => (
- // <>
- // addStream(row.original)}
- // >
- // {/* Small icon size */}
- //
- //
- // ),
- // positionActionsColumn: 'last',
- // mantineTableContainerProps: {
- // style: {
- // height: '200px',
- // },
- // },
- // });
-
if (!isOpen) {
return <>;
}
@@ -373,17 +475,33 @@ const Channel = ({ channel = null, isOpen, onClose }) => {
}
styles={{ content: { '--mantine-color-body': '#27272A' } }}
>
-
@@ -804,10 +1028,16 @@ const Channel = ({ channel = null, isOpen, onClose }) => {
setChannelGroupModalOpen(false)}
+ onClose={handleChannelGroupModalClose}
+ />
+
+ setLogoModalOpen(false)}
+ onSuccess={handleLogoSuccess}
/>
);
};
-export default Channel;
+export default ChannelForm;
diff --git a/frontend/src/components/forms/ChannelBatch.jsx b/frontend/src/components/forms/ChannelBatch.jsx
new file mode 100644
index 00000000..14dd22f1
--- /dev/null
+++ b/frontend/src/components/forms/ChannelBatch.jsx
@@ -0,0 +1,1142 @@
+import React, { useState, useEffect, useMemo, useRef } from 'react';
+import useChannelsStore from '../../store/channels';
+import API from '../../api';
+import useStreamProfilesStore from '../../store/streamProfiles';
+import useEPGsStore from '../../store/epgs';
+import ChannelGroupForm from './ChannelGroup';
+import {
+ Box,
+ Button,
+ Modal,
+ TextInput,
+ Text,
+ Group,
+ ActionIcon,
+ Flex,
+ Select,
+ Stack,
+ useMantineTheme,
+ Popover,
+ ScrollArea,
+ Tooltip,
+ UnstyledButton,
+ Center,
+ Divider,
+ Checkbox,
+ Paper,
+} from '@mantine/core';
+import { ListOrdered, SquarePlus, SquareX, X } from 'lucide-react';
+import { FixedSizeList as List } from 'react-window';
+import { useForm } from '@mantine/form';
+import { notifications } from '@mantine/notifications';
+import { USER_LEVELS, USER_LEVEL_LABELS } from '../../constants';
+import { useChannelLogoSelection } from '../../hooks/useSmartLogos';
+import LazyLogo from '../LazyLogo';
+import logo from '../../images/logo.png';
+import ConfirmationDialog from '../ConfirmationDialog';
+import useWarningsStore from '../../store/warnings';
+
+const ChannelBatchForm = ({ channelIds, isOpen, onClose }) => {
+ const theme = useMantineTheme();
+
+ const groupListRef = useRef(null);
+ const logoListRef = useRef(null);
+
+ const channelGroups = useChannelsStore((s) => s.channelGroups);
+ const {
+ logos: channelLogos,
+ ensureLogosLoaded,
+ isLoading: logosLoading,
+ } = useChannelLogoSelection();
+
+ useEffect(() => {
+ ensureLogosLoaded();
+ }, [ensureLogosLoaded]);
+
+ const streamProfiles = useStreamProfilesStore((s) => s.profiles);
+ const epgs = useEPGsStore((s) => s.epgs);
+ const tvgs = useEPGsStore((s) => s.tvgs);
+ const fetchEPGs = useEPGsStore((s) => s.fetchEPGs);
+
+ const [channelGroupModelOpen, setChannelGroupModalOpen] = useState(false);
+ const [selectedChannelGroup, setSelectedChannelGroup] = useState('-1');
+ const [selectedLogoId, setSelectedLogoId] = useState('-1');
+ const [isSubmitting, setIsSubmitting] = useState(false);
+ const [regexFind, setRegexFind] = useState('');
+ const [regexReplace, setRegexReplace] = useState('');
+ const [selectedDummyEpgId, setSelectedDummyEpgId] = useState(null);
+
+ const [groupPopoverOpened, setGroupPopoverOpened] = useState(false);
+ const [groupFilter, setGroupFilter] = useState('');
+ const groupOptions = Object.values(channelGroups);
+
+ const [logoPopoverOpened, setLogoPopoverOpened] = useState(false);
+ const [logoFilter, setLogoFilter] = useState('');
+ // Confirmation dialog states
+ const [confirmSetNamesOpen, setConfirmSetNamesOpen] = useState(false);
+ const [confirmSetLogosOpen, setConfirmSetLogosOpen] = useState(false);
+ const [confirmSetTvgIdsOpen, setConfirmSetTvgIdsOpen] = useState(false);
+ const [confirmBatchUpdateOpen, setConfirmBatchUpdateOpen] = useState(false);
+ const [settingNames, setSettingNames] = useState(false);
+ const [settingLogos, setSettingLogos] = useState(false);
+ const [settingTvgIds, setSettingTvgIds] = useState(false);
+ const isWarningSuppressed = useWarningsStore((s) => s.isWarningSuppressed);
+ const suppressWarning = useWarningsStore((s) => s.suppressWarning);
+
+ // Fetch EPG sources when modal opens
+ useEffect(() => {
+ if (isOpen) {
+ fetchEPGs();
+ }
+ }, [isOpen, fetchEPGs]);
+
+ // Get dummy EPG sources
+ const dummyEpgSources = useMemo(() => {
+ return Object.values(epgs).filter((epg) => epg.source_type === 'dummy');
+ }, [epgs]);
+
+ const form = useForm({
+ mode: 'uncontrolled',
+ initialValues: {
+ channel_group: '(no change)',
+ logo: '(no change)',
+ stream_profile_id: '-1',
+ user_level: '-1',
+ },
+ });
+
+ // Build confirmation message based on selected changes
+ const getConfirmationMessage = () => {
+ const changes = [];
+ const values = form.getValues();
+
+ // Check for regex name changes
+ if (regexFind.trim().length > 0) {
+ changes.push(
+ `• Name Change: Apply regex find "${regexFind}" replace with "${regexReplace || ''}"`
+ );
+ }
+
+ // Check channel group
+ if (selectedChannelGroup && selectedChannelGroup !== '-1') {
+ const groupName = channelGroups[selectedChannelGroup]?.name || 'Unknown';
+ changes.push(`• Channel Group: ${groupName}`);
+ }
+
+ // Check logo
+ if (selectedLogoId && selectedLogoId !== '-1') {
+ if (selectedLogoId === '0') {
+ changes.push(`• Logo: Use Default`);
+ } else {
+ const logoName = channelLogos[selectedLogoId]?.name || 'Selected Logo';
+ changes.push(`• Logo: ${logoName}`);
+ }
+ }
+
+ // Check stream profile
+ if (values.stream_profile_id && values.stream_profile_id !== '-1') {
+ if (values.stream_profile_id === '0') {
+ changes.push(`• Stream Profile: Use Default`);
+ } else {
+ const profile = streamProfiles.find(
+ (p) => `${p.id}` === `${values.stream_profile_id}`
+ );
+ const profileName = profile?.name || 'Selected Profile';
+ changes.push(`• Stream Profile: ${profileName}`);
+ }
+ }
+
+ // Check user level
+ if (values.user_level && values.user_level !== '-1') {
+ const userLevelLabel =
+ USER_LEVEL_LABELS[values.user_level] || values.user_level;
+ changes.push(`• User Level: ${userLevelLabel}`);
+ }
+
+ // Check dummy EPG
+ if (selectedDummyEpgId) {
+ if (selectedDummyEpgId === 'clear') {
+ changes.push(`• EPG: Clear Assignment (use default dummy)`);
+ } else {
+ const epgName = epgs[selectedDummyEpgId]?.name || 'Selected EPG';
+ changes.push(`• Dummy EPG: ${epgName}`);
+ }
+ }
+
+ return changes;
+ };
+
+ const handleSubmit = () => {
+ const changes = getConfirmationMessage();
+
+ // If no changes detected, show notification
+ if (changes.length === 0) {
+ notifications.show({
+ title: 'No Changes',
+ message: 'Please select at least one field to update.',
+ color: 'orange',
+ });
+ return;
+ }
+
+ // Skip warning if suppressed
+ if (isWarningSuppressed('batch-update-channels')) {
+ return onSubmit();
+ }
+
+ setConfirmBatchUpdateOpen(true);
+ };
+
+ const onSubmit = async () => {
+ setConfirmBatchUpdateOpen(false);
+ setIsSubmitting(true);
+
+ const values = {
+ ...form.getValues(),
+ }; // Handle channel group ID - convert to integer if it exists
+ if (selectedChannelGroup && selectedChannelGroup !== '-1') {
+ values.channel_group_id = parseInt(selectedChannelGroup);
+ } else {
+ delete values.channel_group_id;
+ }
+
+ if (selectedLogoId && selectedLogoId !== '-1') {
+ if (selectedLogoId === '0') {
+ values.logo_id = null;
+ } else {
+ values.logo_id = parseInt(selectedLogoId);
+ }
+ }
+ delete values.logo;
+
+ // Handle stream profile ID - convert special values
+ if (!values.stream_profile_id || values.stream_profile_id === '-1') {
+ delete values.stream_profile_id;
+ } else if (
+ values.stream_profile_id === '0' ||
+ values.stream_profile_id === 0
+ ) {
+ values.stream_profile_id = null; // Convert "use default" to null
+ }
+
+ if (values.user_level == '-1') {
+ delete values.user_level;
+ }
+
+ // Remove the channel_group field from form values as we use channel_group_id
+ delete values.channel_group;
+
+ try {
+ const applyRegex = regexFind.trim().length > 0;
+
+ // First, handle standard field updates (name, group, logo, etc.)
+ if (applyRegex) {
+ // Build per-channel updates to apply unique names via regex
+ let flags = 'g';
+ let re;
+ try {
+ re = new RegExp(regexFind, flags);
+ } catch (e) {
+ console.error('Invalid regex:', e);
+ setIsSubmitting(false);
+ return;
+ }
+
+ const channelsMap = useChannelsStore.getState().channels;
+ const updates = channelIds.map((id) => {
+ const ch = channelsMap[id];
+ const currentName = ch?.name ?? '';
+ const newName = currentName.replace(re, regexReplace ?? '');
+ const update = { id };
+ if (newName !== currentName && newName.trim().length > 0) {
+ update.name = newName;
+ }
+ // Merge base values (group/profile/user_level) if present
+ Object.assign(update, values);
+ return update;
+ });
+
+ await API.bulkUpdateChannels(updates);
+ } else if (Object.keys(values).length > 0) {
+ await API.updateChannels(channelIds, values);
+ }
+
+ // Then, handle EPG assignment if a dummy EPG was selected
+ if (selectedDummyEpgId) {
+ if (selectedDummyEpgId === 'clear') {
+ // Clear EPG assignments
+ const associations = channelIds.map((id) => ({
+ channel_id: id,
+ epg_data_id: null,
+ }));
+ await API.batchSetEPG(associations);
+ } else {
+ // Assign the selected dummy EPG
+ const selectedEpg = epgs[selectedDummyEpgId];
+ if (selectedEpg && selectedEpg.epg_data_count > 0) {
+ // Convert to number for comparison since Select returns string
+ const epgSourceId = parseInt(selectedDummyEpgId, 10);
+
+ // Check if we already have EPG data loaded in the store
+ let epgData = tvgs.find((data) => data.epg_source === epgSourceId);
+
+ // If not in store, fetch it
+ if (!epgData) {
+ const epgDataList = await API.getEPGData();
+ epgData = epgDataList.find(
+ (data) => data.epg_source === epgSourceId
+ );
+ }
+
+ if (epgData) {
+ const associations = channelIds.map((id) => ({
+ channel_id: id,
+ epg_data_id: epgData.id,
+ }));
+ await API.batchSetEPG(associations);
+ }
+ }
+ }
+ }
+
+ // Refresh both the channels table data and the main channels store
+ await Promise.all([
+ API.requeryChannels(),
+ useChannelsStore.getState().fetchChannels(),
+ ]);
+ onClose();
+ } catch (error) {
+ console.error('Failed to update channels:', error);
+ } finally {
+ setIsSubmitting(false);
+ }
+ };
+
+ const handleSetNamesFromEpg = async () => {
+ if (!channelIds || channelIds.length === 0) {
+ notifications.show({
+ title: 'No Channels Selected',
+ message: 'No channels to update.',
+ color: 'orange',
+ });
+ return;
+ }
+
+ // Skip warning if suppressed
+ if (isWarningSuppressed('batch-set-names-from-epg')) {
+ return executeSetNamesFromEpg();
+ }
+
+ setConfirmSetNamesOpen(true);
+ };
+
+ const executeSetNamesFromEpg = async () => {
+ setSettingNames(true);
+ try {
+ // Start the backend task
+ await API.setChannelNamesFromEpg(channelIds);
+
+ // The task will send WebSocket updates for progress
+ // Just show that it started successfully
+ notifications.show({
+ title: 'Task Started',
+ message: `Started setting names from EPG for ${channelIds.length} channels. Progress will be shown in notifications.`,
+ color: 'blue',
+ });
+
+ // Close the modal since the task is now running in background
+ onClose();
+ } catch (error) {
+ console.error('Failed to start EPG name setting task:', error);
+ notifications.show({
+ title: 'Error',
+ message: 'Failed to start EPG name setting task.',
+ color: 'red',
+ });
+ } finally {
+ setSettingNames(false);
+ setConfirmSetNamesOpen(false);
+ }
+ };
+
+ const handleSetLogosFromEpg = async () => {
+ if (!channelIds || channelIds.length === 0) {
+ notifications.show({
+ title: 'No Channels Selected',
+ message: 'No channels to update.',
+ color: 'orange',
+ });
+ return;
+ }
+
+ // Skip warning if suppressed
+ if (isWarningSuppressed('batch-set-logos-from-epg')) {
+ return executeSetLogosFromEpg();
+ }
+
+ setConfirmSetLogosOpen(true);
+ };
+
+ const executeSetLogosFromEpg = async () => {
+ setSettingLogos(true);
+ try {
+ // Start the backend task
+ await API.setChannelLogosFromEpg(channelIds);
+
+ // The task will send WebSocket updates for progress
+ // Just show that it started successfully
+ notifications.show({
+ title: 'Task Started',
+ message: `Started setting logos from EPG for ${channelIds.length} channels. Progress will be shown in notifications.`,
+ color: 'blue',
+ });
+
+ // Close the modal since the task is now running in background
+ onClose();
+ } catch (error) {
+ console.error('Failed to start EPG logo setting task:', error);
+ notifications.show({
+ title: 'Error',
+ message: 'Failed to start EPG logo setting task.',
+ color: 'red',
+ });
+ } finally {
+ setSettingLogos(false);
+ setConfirmSetLogosOpen(false);
+ }
+ };
+
+ const handleSetTvgIdsFromEpg = async () => {
+ if (!channelIds || channelIds.length === 0) {
+ notifications.show({
+ title: 'No Channels Selected',
+ message: 'No channels to update.',
+ color: 'orange',
+ });
+ return;
+ }
+
+ // Skip warning if suppressed
+ if (isWarningSuppressed('batch-set-tvg-ids-from-epg')) {
+ return executeSetTvgIdsFromEpg();
+ }
+
+ setConfirmSetTvgIdsOpen(true);
+ };
+
+ const executeSetTvgIdsFromEpg = async () => {
+ setSettingTvgIds(true);
+ try {
+ // Start the backend task
+ await API.setChannelTvgIdsFromEpg(channelIds);
+
+ // The task will send WebSocket updates for progress
+ // Just show that it started successfully
+ notifications.show({
+ title: 'Task Started',
+ message: `Started setting TVG-IDs from EPG for ${channelIds.length} channels. Progress will be shown in notifications.`,
+ color: 'blue',
+ });
+
+ // Close the modal since the task is now running in background
+ onClose();
+ } catch (error) {
+ console.error('Failed to start EPG TVG-ID setting task:', error);
+ notifications.show({
+ title: 'Error',
+ message: 'Failed to start EPG TVG-ID setting task.',
+ color: 'red',
+ });
+ } finally {
+ setSettingTvgIds(false);
+ setConfirmSetTvgIdsOpen(false);
+ }
+ };
+
+ // useEffect(() => {
+ // // const sameStreamProfile = channels.every(
+ // // (channel) => channel.stream_profile_id == channels[0].stream_profile_id
+ // // );
+ // // const sameChannelGroup = channels.every(
+ // // (channel) => channel.channel_group_id == channels[0].channel_group_id
+ // // );
+ // // const sameUserLevel = channels.every(
+ // // (channel) => channel.user_level == channels[0].user_level
+ // // );
+ // // form.setValues({
+ // // ...(sameStreamProfile && {
+ // // stream_profile_id: `${channels[0].stream_profile_id}`,
+ // // }),
+ // // ...(sameChannelGroup && {
+ // // channel_group_id: `${channels[0].channel_group_id}`,
+ // // }),
+ // // ...(sameUserLevel && {
+ // // user_level: `${channels[0].user_level}`,
+ // // }),
+ // // });
+ // }, [channelIds, streamProfiles, channelGroups]);
+
+ const handleChannelGroupModalClose = (newGroup) => {
+ setChannelGroupModalOpen(false);
+
+ if (newGroup && newGroup.id) {
+ setSelectedChannelGroup(newGroup.id);
+ form.setValues({
+ channel_group: `${newGroup.name}`,
+ });
+ }
+ };
+ const filteredGroups = [
+ { id: '-1', name: '(no change)' },
+ ...groupOptions.filter((group) =>
+ group.name.toLowerCase().includes(groupFilter.toLowerCase())
+ ),
+ ];
+
+ const logoOptions = useMemo(() => {
+ return [
+ { id: '-1', name: '(no change)' },
+ { id: '0', name: 'Use Default', isDefault: true },
+ ...Object.values(channelLogos),
+ ];
+ }, [channelLogos]);
+
+ const filteredLogos = logoOptions.filter((logo) =>
+ logo.name.toLowerCase().includes(logoFilter.toLowerCase())
+ );
+
+ if (!isOpen) {
+ return <>;
+ }
+
+ return (
+ <>
+
+
+ Channels
+
+ }
+ styles={{ hannontent: { '--mantine-color-body': '#27272A' } }}
+ >
+
+
+
+
+
+ setConfirmSetNamesOpen(false)}
+ onConfirm={executeSetNamesFromEpg}
+ loading={settingNames}
+ title="Confirm Set Names from EPG"
+ message={
+
+ {`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"
+ />
+
+ setConfirmSetLogosOpen(false)}
+ onConfirm={executeSetLogosFromEpg}
+ loading={settingLogos}
+ title="Confirm Set Logos from EPG"
+ message={
+
+ {`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"
+ />
+
+ setConfirmSetTvgIdsOpen(false)}
+ onConfirm={executeSetTvgIdsFromEpg}
+ loading={settingTvgIds}
+ title="Confirm Set TVG-IDs from EPG"
+ message={
+
+ {`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"
+ />
+
+ setConfirmBatchUpdateOpen(false)}
+ onConfirm={onSubmit}
+ loading={isSubmitting}
+ title="Confirm Batch Update"
+ message={
+
+
+ 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.
+
+