mirror of
https://github.com/Dispatcharr/Dispatcharr.git
synced 2026-07-18 09:06:06 +00:00
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:
parent
ada7e03a10
commit
fc01a6d04d
2 changed files with 12 additions and 40 deletions
|
|
@ -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>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue