UI: Add ChannelTile with logos, search/filter, and design improvements
This commit is contained in:
@@ -1,11 +1,18 @@
|
||||
class StreamEntry {
|
||||
final String title;
|
||||
final String url;
|
||||
final String? logo; // optional TVG logo URL
|
||||
|
||||
StreamEntry({required this.title, required this.url});
|
||||
StreamEntry({required this.title, required this.url, this.logo});
|
||||
|
||||
StreamEntry copyWith({String? title, String? url, String? logo}) =>
|
||||
StreamEntry(
|
||||
title: title ?? this.title,
|
||||
url: url ?? this.url,
|
||||
logo: logo ?? this.logo);
|
||||
|
||||
@override
|
||||
String toString() => 'StreamEntry(title: $title, url: $url)';
|
||||
String toString() => 'StreamEntry(title: $title, url: $url, logo: $logo)';
|
||||
|
||||
@override
|
||||
bool operator ==(Object other) =>
|
||||
@@ -13,8 +20,9 @@ class StreamEntry {
|
||||
other is StreamEntry &&
|
||||
runtimeType == other.runtimeType &&
|
||||
title == other.title &&
|
||||
url == other.url;
|
||||
url == other.url &&
|
||||
logo == other.logo;
|
||||
|
||||
@override
|
||||
int get hashCode => title.hashCode ^ url.hashCode;
|
||||
int get hashCode => title.hashCode ^ url.hashCode ^ (logo?.hashCode ?? 0);
|
||||
}
|
||||
|
||||
@@ -60,16 +60,25 @@ class M3UService {
|
||||
final line = raw.trim();
|
||||
if (line.isEmpty) continue;
|
||||
if (line.startsWith('#EXTINF')) {
|
||||
// Format: #EXTINF:-1 tvg-id="" tvg-name="Channel" tvg-logo="" group-title="...") ,Display title
|
||||
// Format: #EXTINF:-1 tvg-id="" tvg-name="Channel" tvg-logo="https://..." group-title="...",Display title
|
||||
final parts = line.split(',');
|
||||
|
||||
// Try to extract attributes like tvg-logo="..."
|
||||
final logoMatch = RegExp(r'tvg-logo\s*=\s*"([^"]+)"').firstMatch(line);
|
||||
final logo = logoMatch?.group(1);
|
||||
|
||||
if (parts.length >= 2) {
|
||||
pendingTitle = parts.sublist(1).join(',').trim();
|
||||
} else {
|
||||
// Fallback: try to extract text after the last space
|
||||
final idx = line.indexOf(',');
|
||||
if (idx >= 0 && idx < line.length - 1)
|
||||
pendingTitle = line.substring(idx + 1).trim();
|
||||
}
|
||||
|
||||
// Attach logo information to the pending title token using a simple marker so the
|
||||
// subsequent URL line can pick it up.
|
||||
if (logo != null && pendingTitle != null)
|
||||
pendingTitle = '$pendingTitle||logo:$logo';
|
||||
continue;
|
||||
}
|
||||
|
||||
@@ -77,8 +86,14 @@ class M3UService {
|
||||
|
||||
// At this point 'line' is a URL
|
||||
final url = line;
|
||||
final title = pendingTitle ?? url;
|
||||
entries.add(StreamEntry(title: title, url: url));
|
||||
String title = pendingTitle ?? url;
|
||||
String? logo;
|
||||
if (title.contains('||logo:')) {
|
||||
final parts = title.split('||logo:');
|
||||
title = parts[0];
|
||||
logo = parts[1];
|
||||
}
|
||||
entries.add(StreamEntry(title: title, url: url, logo: logo));
|
||||
pendingTitle = null;
|
||||
}
|
||||
|
||||
|
||||
@@ -3,32 +3,58 @@ import 'package:flutter_riverpod/flutter_riverpod.dart';
|
||||
import '../models/stream_entry.dart';
|
||||
import '../providers/m3u_provider.dart';
|
||||
import '../player_screen.dart';
|
||||
import 'channel_tile.dart';
|
||||
|
||||
class ChannelList extends ConsumerWidget {
|
||||
class ChannelList extends ConsumerStatefulWidget {
|
||||
final TextEditingController m3uController;
|
||||
|
||||
const ChannelList({super.key, required this.m3uController});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context, WidgetRef ref) {
|
||||
ConsumerState<ChannelList> createState() => _ChannelListState();
|
||||
}
|
||||
|
||||
class _ChannelListState extends ConsumerState<ChannelList> {
|
||||
String _query = '';
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final state = ref.watch(channelListProvider);
|
||||
final selected = ref.watch(selectedChannelProvider);
|
||||
|
||||
return Container(
|
||||
width: 320,
|
||||
width: 360,
|
||||
decoration: BoxDecoration(color: Colors.grey[900]),
|
||||
child: Column(children: [
|
||||
Padding(
|
||||
padding: const EdgeInsets.all(12.0),
|
||||
child: Row(children: [
|
||||
const Expanded(
|
||||
child: Text('실시간 채널',
|
||||
style:
|
||||
TextStyle(fontSize: 18, fontWeight: FontWeight.bold))),
|
||||
Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
const Text('실시간 채널',
|
||||
style:
|
||||
TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
|
||||
const SizedBox(height: 6),
|
||||
TextField(
|
||||
onChanged: (v) => setState(() => _query = v),
|
||||
decoration: InputDecoration(
|
||||
hintText: 'Search channels',
|
||||
filled: true,
|
||||
fillColor: Colors.grey[850],
|
||||
prefixIcon:
|
||||
const Icon(Icons.search, color: Colors.white70),
|
||||
border: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
borderSide: BorderSide.none),
|
||||
),
|
||||
)
|
||||
])),
|
||||
IconButton(
|
||||
onPressed: () => ref
|
||||
.read(channelListProvider.notifier)
|
||||
.fetch(m3uController.text.trim()),
|
||||
.fetch(widget.m3uController.text.trim()),
|
||||
icon: const Icon(Icons.refresh)),
|
||||
]),
|
||||
),
|
||||
@@ -36,29 +62,28 @@ class ChannelList extends ConsumerWidget {
|
||||
Expanded(
|
||||
child: state.when(
|
||||
data: (list) {
|
||||
if (list.isEmpty)
|
||||
return const Center(child: Text('채널이 없습니다. M3U를 불러오세요.'));
|
||||
return ListView.separated(
|
||||
itemCount: list.length,
|
||||
separatorBuilder: (_, __) => const Divider(height: 1),
|
||||
final filtered = list
|
||||
.where((s) =>
|
||||
s.title.toLowerCase().contains(_query.toLowerCase()) ||
|
||||
s.url.toLowerCase().contains(_query.toLowerCase()))
|
||||
.toList();
|
||||
if (filtered.isEmpty)
|
||||
return const Center(child: Text('채널이 없습니다. 검색어를 변경해보세요.'));
|
||||
return ListView.builder(
|
||||
itemCount: filtered.length,
|
||||
itemBuilder: (context, idx) {
|
||||
final s = list[idx];
|
||||
final s = filtered[idx];
|
||||
final isSelected = selected?.url == s.url;
|
||||
return ListTile(
|
||||
return ChannelTile(
|
||||
entry: s,
|
||||
selected: isSelected,
|
||||
title: Text(s.title, overflow: TextOverflow.ellipsis),
|
||||
subtitle: Text(s.url,
|
||||
overflow: TextOverflow.ellipsis, maxLines: 1),
|
||||
onTap: () =>
|
||||
ref.read(selectedChannelProvider.notifier).state = s,
|
||||
trailing: IconButton(
|
||||
icon: const Icon(Icons.open_in_full),
|
||||
onPressed: () => Navigator.push(
|
||||
context,
|
||||
MaterialPageRoute(
|
||||
builder: (_) => PlayerScreen(
|
||||
videoPath: s.url, videoName: s.title))),
|
||||
),
|
||||
onOpen: () => Navigator.push(
|
||||
context,
|
||||
MaterialPageRoute(
|
||||
builder: (_) => PlayerScreen(
|
||||
videoPath: s.url, videoName: s.title))),
|
||||
);
|
||||
},
|
||||
);
|
||||
@@ -71,7 +96,7 @@ class ChannelList extends ConsumerWidget {
|
||||
ElevatedButton(
|
||||
onPressed: () => ref
|
||||
.read(channelListProvider.notifier)
|
||||
.fetch(m3uController.text.trim()),
|
||||
.fetch(widget.m3uController.text.trim()),
|
||||
child: const Text('다시시도'))
|
||||
])),
|
||||
),
|
||||
|
||||
82
lib/widgets/channel_tile.dart
Normal file
82
lib/widgets/channel_tile.dart
Normal file
@@ -0,0 +1,82 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:cached_network_image/cached_network_image.dart';
|
||||
import '../models/stream_entry.dart';
|
||||
|
||||
class ChannelTile extends StatelessWidget {
|
||||
final StreamEntry entry;
|
||||
final bool selected;
|
||||
final VoidCallback? onTap;
|
||||
final VoidCallback? onOpen;
|
||||
|
||||
const ChannelTile(
|
||||
{super.key,
|
||||
required this.entry,
|
||||
this.selected = false,
|
||||
this.onTap,
|
||||
this.onOpen});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final border = selected
|
||||
? Border.all(color: Theme.of(context).colorScheme.primary, width: 2)
|
||||
: null;
|
||||
|
||||
return Card(
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(10), side: BorderSide.none),
|
||||
color: selected ? Colors.grey[850] : Colors.transparent,
|
||||
margin: const EdgeInsets.symmetric(horizontal: 8, vertical: 6),
|
||||
child: InkWell(
|
||||
borderRadius: BorderRadius.circular(10),
|
||||
onTap: onTap,
|
||||
child: Container(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
|
||||
decoration: BoxDecoration(
|
||||
border: border, borderRadius: BorderRadius.circular(10)),
|
||||
child: Row(children: [
|
||||
ClipRRect(
|
||||
borderRadius: BorderRadius.circular(6),
|
||||
child: SizedBox(
|
||||
width: 56,
|
||||
height: 40,
|
||||
child: entry.logo != null
|
||||
? CachedNetworkImage(
|
||||
imageUrl: entry.logo!,
|
||||
fit: BoxFit.cover,
|
||||
placeholder: (c, s) =>
|
||||
Container(color: Colors.grey[800]),
|
||||
errorWidget: (c, s, e) => Container(
|
||||
color: Colors.grey[800],
|
||||
child: const Icon(Icons.tv, color: Colors.white30)),
|
||||
)
|
||||
: Container(
|
||||
color: Colors.grey[800],
|
||||
child: const Icon(Icons.tv, color: Colors.white30)),
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 12),
|
||||
Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(entry.title,
|
||||
style: const TextStyle(
|
||||
fontSize: 15,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: Colors.white)),
|
||||
const SizedBox(height: 4),
|
||||
Text(entry.url,
|
||||
style: TextStyle(fontSize: 11, color: Colors.white70),
|
||||
overflow: TextOverflow.ellipsis,
|
||||
maxLines: 1),
|
||||
])),
|
||||
IconButton(
|
||||
icon: const Icon(Icons.open_in_new, color: Colors.white70),
|
||||
onPressed: onOpen,
|
||||
tooltip: 'Open full screen')
|
||||
]),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user