Mirrors/Dispatcharr
1
0
Fork 1
mirror of https://github.com/Dispatcharr/Dispatcharr.git synced 2026-07-23 10:08:36 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Modified spacing for channel number and logo inside logo box.

Browse source
This commit is contained in:
SergeantPanda 2025-04-11 10:02:50 -05:00
parent 41cb194281
commit eda21437de
1 changed files with 75 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

87
frontend/src/pages/Guide.jsx
View file

@ -56,6 +56,9 @@ export default function TVChannelGuide({ startDate, endDate }) {
const guideRef = useRef(null);
const timelineRef = useRef(null); // New ref for timeline scrolling
// Add new state to track hovered logo
const [hoveredChannelId, setHoveredChannelId] = useState(null);
// Load program data once
useEffect(() => {
if (!Object.keys(channels).length === 0) {
@ -286,6 +289,21 @@ export default function TVChannelGuide({ startDate, endDate }) {
showVideo(vidUrl);
}
// Function to handle logo click to play channel
function handleLogoClick(channel, event) {
// Prevent event from bubbling up
event.stopPropagation();
// Build a playable stream URL for the channel
let vidUrl = `/proxy/ts/stream/${channel.uuid}`;
if (env_mode === 'dev') {
vidUrl = `${window.location.protocol}//${window.location.hostname}:5656${vidUrl}`;
}
// Use the existing showVideo function
showVideo(vidUrl);
}
// On program click, toggle the expanded state
function handleProgramClick(program, event) {
// Prevent event from bubbling up to parent elements
@ -1014,38 +1032,83 @@ export default function TVChannelGuide({ startDate, endDate }) {
zIndex: 30, // Higher than expanded programs to prevent overlap
height: rowHeight,
transition: 'height 0.2s ease',
cursor: 'pointer', // Add cursor pointer to indicate clickable
position: 'relative', // Remove duplicate, keep only this one
}}
onClick={(e) => handleLogoClick(channel, e)}
onMouseEnter={() => setHoveredChannelId(channel.id)}
onMouseLeave={() => setHoveredChannelId(null)}
>
{/* Logo content */}
{/* Play icon overlay - visible on hover (moved outside to cover entire box) */}
{hoveredChannelId === channel.id && (
<Flex
align="center"
justify="center"
style={{
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
width: '100%',
height: '100%',
backgroundColor: 'rgba(0, 0, 0, 0.7)',
zIndex: 10,
animation: 'fadeIn 0.2s',
}}
>
<Video size={24} color="#fff" />
</Flex>
)}
{/* Logo content - restructured for better positioning */}
<Flex
direction="column"
align="center"
justify="center"
justify="space-between" // Changed from center to space-between
style={{
maxWidth: CHANNEL_WIDTH * 0.8,
maxHeight: rowHeight * 0.9,
width: '100%',
height: '100%',
padding: '2px 2px',
boxSizing: 'border-box',
zIndex: 5,
}}
>
<img
src={channel.logo?.cache_url || logo}
alt={channel.name}
{/* Logo container with fixed height */}
<Box
style={{
width: '100%',
height: 'auto',
objectFit: 'contain',
maxHeight: rowHeight * 0.65,
height: `${rowHeight * 0.65}px`, // Fixed height based on row height
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
overflow: 'hidden',
}}
/>
>
<img
src={channel.logo?.cache_url || logo}
alt={channel.name}
style={{
maxWidth: '100%',
maxHeight: '100%',
objectFit: 'contain',
}}
/>
</Box>
{/* Channel number - pinned to bottom with padding */}
<Text
size="sm"
weight={600}
style={{
marginTop: 4,
marginTop: 'auto', // Push to bottom
marginBottom: '4px', // Bottom padding
backgroundColor: '#2d3748',
padding: '2px 6px',
borderRadius: 4,
fontSize: '0.85em',
border: '1px solid #4a5568',
alignSelf: 'center', // Center horizontally
}}
>
{channel.channel_number || '-'}