@@ -12,7 +12,7 @@ import useLiveTasks from 'apps/dashboard/features/tasks/hooks/useLiveTasks';
1212import Button from '@mui/material/Button' ;
1313import RefreshIcon from '@mui/icons-material/Refresh' ;
1414import AddIcon from '@mui/icons-material/Add' ;
15- import { Form , Link , useNavigate } from 'react-router-dom' ;
15+ import { Link , useNavigate } from 'react-router-dom' ;
1616import { useStartTask } from 'apps/dashboard/features/tasks/api/useStartTask' ;
1717import { TaskState } from '@jellyfin/sdk/lib/generated-client/models/task-state' ;
1818import TaskProgress from 'apps/dashboard/features/tasks/components/TaskProgress' ;
@@ -22,6 +22,7 @@ import ListItemText from '@mui/material/ListItemText';
2222import Alert from '@mui/material/Alert' ;
2323import List from '@mui/material/List' ;
2424import Provider from 'apps/dashboard/features/livetv/components/Provider' ;
25+ import Grid from '@mui/material/Grid' ;
2526
2627const CONFIG_KEY = 'livetv' ;
2728
@@ -81,33 +82,44 @@ export const Component = () => {
8182 className = 'mainAnimatedPage type-interior'
8283 >
8384 < Box className = 'content-primary' >
84- < Form >
85- { ( isConfigError || isTasksError ) ? (
86- < Alert severity = 'error' > { globalize . translate ( 'HeaderError' ) } </ Alert >
87- ) : (
88- < Stack spacing = { 3 } >
89- < Typography variant = 'h2' > { globalize . translate ( 'HeaderTunerDevices' ) } </ Typography >
90-
91- < Button
92- sx = { { alignSelf : 'flex-start' } }
93- startIcon = { < AddIcon /> }
94- component = { Link }
95- to = '/dashboard/livetv/tuner'
96- >
97- { globalize . translate ( 'ButtonAddTunerDevice' ) }
98- </ Button >
99-
100- < Stack direction = 'row' spacing = { 2 } >
101- { config . TunerHosts ?. map ( tunerHost => (
102- < TunerDeviceCard
85+ { ( isConfigError || isTasksError ) ? (
86+ < Alert severity = 'error' > { globalize . translate ( 'HeaderError' ) } </ Alert >
87+ ) : (
88+ < Stack spacing = { 3 } >
89+ < Typography variant = 'h2' > { globalize . translate ( 'HeaderTunerDevices' ) } </ Typography >
90+
91+ < Button
92+ sx = { { alignSelf : 'flex-start' } }
93+ startIcon = { < AddIcon /> }
94+ component = { Link }
95+ to = '/dashboard/livetv/tuner'
96+ >
97+ { globalize . translate ( 'ButtonAddTunerDevice' ) }
98+ </ Button >
99+
100+ < Box >
101+ < Grid container spacing = { 2 } >
102+ { config . TunerHosts ?. map ( tunerHost => (
103+ < Grid
103104 key = { tunerHost . Id }
104- tunerHost = { tunerHost }
105- />
106- ) ) }
107- </ Stack >
105+ item
106+ xs = { 12 }
107+ sm = { 6 }
108+ md = { 3 }
109+ lg = { 2.4 }
110+ >
111+ < TunerDeviceCard
112+ key = { tunerHost . Id }
113+ tunerHost = { tunerHost }
114+ />
115+ </ Grid >
116+ ) ) }
117+ </ Grid >
118+ </ Box >
108119
109- < Typography variant = 'h2' > { globalize . translate ( 'HeaderGuideProviders' ) } </ Typography >
120+ < Typography variant = 'h2' > { globalize . translate ( 'HeaderGuideProviders' ) } </ Typography >
110121
122+ < Stack sx = { { alignSelf : 'flex-start' } } spacing = { 2 } >
111123 < Stack direction = 'row' spacing = { 1.5 } >
112124 < Button
113125 sx = { { alignSelf : 'flex-start' } }
@@ -132,32 +144,33 @@ export const Component = () => {
132144 { ( refreshGuideTask && refreshGuideTask . State === TaskState . Running ) && (
133145 < TaskProgress task = { refreshGuideTask } />
134146 ) }
135- < Menu
136- anchorEl = { anchorEl }
137- open = { isMenuOpen }
138- onClose = { onMenuClose }
139- >
140- < MenuItem onClick = { navigateToSchedulesDirect } >
141- < ListItemText > Schedules Direct</ ListItemText >
142- </ MenuItem >
143- < MenuItem onClick = { navigateToXMLTV } >
144- < ListItemText > XMLTV</ ListItemText >
145- </ MenuItem >
146- </ Menu >
147-
148- { ( config . ListingProviders && config . ListingProviders ?. length > 0 ) && (
149- < List sx = { { backgroundColor : 'background.paper' } } >
150- { config . ListingProviders ?. map ( provider => (
151- < Provider
152- key = { provider . Id }
153- provider = { provider }
154- />
155- ) ) }
156- </ List >
157- ) }
158147 </ Stack >
159- ) }
160- </ Form >
148+
149+ < Menu
150+ anchorEl = { anchorEl }
151+ open = { isMenuOpen }
152+ onClose = { onMenuClose }
153+ >
154+ < MenuItem onClick = { navigateToSchedulesDirect } >
155+ < ListItemText > Schedules Direct</ ListItemText >
156+ </ MenuItem >
157+ < MenuItem onClick = { navigateToXMLTV } >
158+ < ListItemText > XMLTV</ ListItemText >
159+ </ MenuItem >
160+ </ Menu >
161+
162+ { ( config . ListingProviders && config . ListingProviders ?. length > 0 ) && (
163+ < List sx = { { backgroundColor : 'background.paper' } } >
164+ { config . ListingProviders ?. map ( provider => (
165+ < Provider
166+ key = { provider . Id }
167+ provider = { provider }
168+ />
169+ ) ) }
170+ </ List >
171+ ) }
172+ </ Stack >
173+ ) }
161174 </ Box >
162175 </ Page >
163176 ) ;
0 commit comments