Improve ProgramDetailModal layout per feedback

- Move channel name/number into modal header title bar (was empty after removing duplicate title)
- Remove channel logo from modal (didn't fit well)
- Remove custom background color override, inherit from Mantine dark theme for consistency with VOD/Series modals
- Fix wrong channel shown in modal: pass channel directly from renderProgram instead of re-looking up by tvg_id
- Clean up unused imports (getChannelLogoUrl, Image/Group no longer needed in title)
This commit is contained in:
None 2026-03-12 21:33:58 -05:00
parent ada7e03a10
commit fc01a6d04d
2 changed files with 12 additions and 40 deletions

View file

@ -15,17 +15,11 @@ import { Calendar, Video } from 'lucide-react';
import API from '../api';
import useVideoStore from '../store/useVideoStore';
import useSettingsStore from '../store/settings';
import { getShowVideoUrl, getChannelLogoUrl } from '../utils/cards/RecordingCardUtils';
import { getShowVideoUrl } from '../utils/cards/RecordingCardUtils';
import { formatSeasonEpisode } from '../pages/guideUtils';
import { format, initializeTime, diff, useDateTimeFormat } from '../utils/dateTimeUtils';
import { imdbUrl, tmdbUrl } from '../utils/externalUrls';
const modalStyles = {
content: { backgroundColor: '#18181B', color: 'white' },
header: { backgroundColor: '#18181B', color: 'white' },
title: { color: 'white' },
};
const overlayProps = { color: '#000', backgroundOpacity: 0.55, blur: 0 };
function formatDurationMinutes(startTime, endTime) {
@ -136,7 +130,6 @@ export default function ProgramDetailModal({
const starRatings = d.star_ratings || [];
const description = d.description || program.description;
const subtitle = d.sub_title ?? program.sub_title;
const channelLogoUrl = getChannelLogoUrl(channel);
const posterUrl = resolveImageUrl(d);
const duration = formatDurationMinutes(program.start_time, program.end_time);
const programStart = initializeTime(program.start_time || program.startMs);
@ -146,11 +139,17 @@ export default function ProgramDetailModal({
<Modal
opened={opened}
onClose={onClose}
title={null}
title={
channel ? (
<Text size="sm" fw={600} c="white">
{channel.channel_number ? `${channel.channel_number} - ` : ''}
{channel.name}
</Text>
) : null
}
size="lg"
centered
overlayProps={overlayProps}
styles={modalStyles}
zIndex={9999}
>
<Stack gap="md">
@ -227,15 +226,6 @@ export default function ProgramDetailModal({
</Group>
)}
{channel && (
<Text size="sm" c="dimmed" fw={600}>
{channel.channel_number
? `${channel.channel_number} - `
: ''}
{channel.name}
</Text>
)}
<Group gap="xs" wrap="wrap">
<Text size="sm" c="dimmed">
{format(programStart, timeFormat)} {' '}
@ -402,23 +392,6 @@ export default function ProgramDetailModal({
)}
</Group>
)}
{channelLogoUrl && (
<Group justify="flex-end">
<Image
src={channelLogoUrl}
w="auto"
h="auto"
style={{
maxWidth: 120,
maxHeight: 40,
backgroundColor: 'rgba(255,255,255,0.09)',
borderRadius: 6,
padding: '4px 6px',
filter: 'drop-shadow(0 0 3px rgba(255,255,255,0.15))',
}}
/>
</Group>
)}
</Stack>
</Modal>
);

View file

@ -775,11 +775,10 @@ export default function TVChannelGuide({ startDate, endDate }) {
);
const handleProgramClick = useCallback(
(program, event) => {
(program, channel, event) => {
event.stopPropagation();
const matched = findChannelByTvgId(program.tvg_id);
setSelectedProgram(program);
setSelectedChannel(matched);
setSelectedChannel(channel || findChannelByTvgId(program.tvg_id));
setRecordingForProgram(recordingsByProgramId.get(program.id) || null);
},
[findChannelByTvgId, recordingsByProgramId]
@ -895,7 +894,7 @@ export default function TVChannelGuide({ startDate, endDate }) {
top={0}
w={widthPx}
h={PROGRAM_HEIGHT - 4}
onClick={(event) => handleProgramClick(program, event)}
onClick={(event) => handleProgramClick(program, channel, event)}
>
<Paper
elevation={2}