750 lines
20 KiB
Dart
750 lines
20 KiB
Dart
import 'dart:async';
|
|
import 'dart:convert';
|
|
|
|
import 'package:flutter/foundation.dart';
|
|
import 'package:flutter/material.dart';
|
|
import 'package:flutter/services.dart';
|
|
import 'package:provider/provider.dart';
|
|
import 'package:video_player/video_player.dart';
|
|
|
|
import '../providers/auth_provider.dart';
|
|
import '../providers/settings_provider.dart';
|
|
import '../services/api_service.dart';
|
|
import '../services/chat_service.dart';
|
|
import '../widgets/web_stream_player.dart';
|
|
|
|
class PlayerPage extends StatefulWidget {
|
|
final String title;
|
|
final String playbackUrl;
|
|
final String roomId;
|
|
|
|
const PlayerPage({
|
|
super.key,
|
|
required this.title,
|
|
required this.playbackUrl,
|
|
required this.roomId,
|
|
});
|
|
|
|
@override
|
|
State<PlayerPage> createState() => _PlayerPageState();
|
|
}
|
|
|
|
class _PlayerPageState extends State<PlayerPage> {
|
|
VideoPlayerController? _controller;
|
|
final ChatService _chatService = ChatService();
|
|
final TextEditingController _msgController = TextEditingController();
|
|
final List<ChatMessage> _messages = [];
|
|
final List<_DanmakuEntry> _danmakus = [];
|
|
|
|
bool _isError = false;
|
|
String? _errorMessage;
|
|
bool _showDanmaku = true;
|
|
bool _isRefreshing = false;
|
|
bool _isFullscreen = false;
|
|
bool _controlsVisible = true;
|
|
int _playerVersion = 0;
|
|
String _selectedResolution = 'Source';
|
|
List<String> _availableResolutions = const ['Source'];
|
|
Timer? _controlsHideTimer;
|
|
|
|
@override
|
|
void initState() {
|
|
super.initState();
|
|
_loadPlaybackOptions();
|
|
if (!kIsWeb) {
|
|
_initializePlayer();
|
|
}
|
|
_initializeChat();
|
|
_showControls();
|
|
}
|
|
|
|
Future<void> _initializePlayer() async {
|
|
final playbackUrl = _currentPlaybackUrl();
|
|
_controller = VideoPlayerController.networkUrl(Uri.parse(playbackUrl));
|
|
try {
|
|
await _controller!.initialize();
|
|
_controller!.play();
|
|
if (mounted) setState(() {});
|
|
} catch (e) {
|
|
if (mounted) {
|
|
setState(() {
|
|
_isError = true;
|
|
_errorMessage = e.toString();
|
|
_isRefreshing = false;
|
|
});
|
|
}
|
|
return;
|
|
}
|
|
if (mounted) {
|
|
setState(() {
|
|
_isError = false;
|
|
_errorMessage = null;
|
|
_isRefreshing = false;
|
|
});
|
|
}
|
|
}
|
|
|
|
String _currentPlaybackUrl() {
|
|
final settings = context.read<SettingsProvider>();
|
|
final quality = _selectedResolution == 'Source'
|
|
? null
|
|
: _selectedResolution.toLowerCase();
|
|
return settings.playbackUrl(widget.roomId, quality: quality);
|
|
}
|
|
|
|
Future<void> _loadPlaybackOptions() async {
|
|
final settings = context.read<SettingsProvider>();
|
|
final auth = context.read<AuthProvider>();
|
|
final api = ApiService(settings, auth.token);
|
|
|
|
try {
|
|
final response = await api.getPlaybackOptions(widget.roomId);
|
|
if (response.statusCode != 200) {
|
|
return;
|
|
}
|
|
|
|
final data = jsonDecode(response.body) as Map<String, dynamic>;
|
|
final rawQualities =
|
|
(data['qualities'] as List<dynamic>? ?? const ['source'])
|
|
.map((item) => item.toString().trim().toLowerCase())
|
|
.where((item) => item.isNotEmpty)
|
|
.toList();
|
|
|
|
final normalized = <String>['Source'];
|
|
for (final quality in rawQualities) {
|
|
if (quality == 'source') {
|
|
continue;
|
|
}
|
|
normalized.add(quality);
|
|
}
|
|
|
|
if (!mounted) {
|
|
return;
|
|
}
|
|
|
|
setState(() {
|
|
_availableResolutions = normalized.toSet().toList();
|
|
if (!_availableResolutions.contains(_selectedResolution)) {
|
|
_selectedResolution = 'Source';
|
|
}
|
|
});
|
|
} catch (_) {
|
|
// Keep source-only playback when the capability probe fails.
|
|
}
|
|
}
|
|
|
|
void _initializeChat() {
|
|
final settings = context.read<SettingsProvider>();
|
|
final auth = context.read<AuthProvider>();
|
|
|
|
// 使用真实用户名建立连接
|
|
final currentUsername = auth.username ?? "Guest_${widget.roomId}";
|
|
_chatService.connect(settings.baseUrl, widget.roomId, currentUsername);
|
|
|
|
_chatService.messages.listen((msg) {
|
|
if (mounted) {
|
|
setState(() {
|
|
_messages.insert(0, msg);
|
|
if (!msg.isHistory && (msg.type == "chat" || msg.type == "danmaku")) {
|
|
if (_showDanmaku) {
|
|
_addDanmaku(msg.content);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
void _addDanmaku(String text) {
|
|
final key = UniqueKey();
|
|
final lane = DateTime.now().millisecondsSinceEpoch % 8;
|
|
final topFactor = 0.06 + lane * 0.045;
|
|
|
|
setState(() {
|
|
_danmakus.add(
|
|
_DanmakuEntry(
|
|
key: key,
|
|
text: text,
|
|
topFactor: topFactor,
|
|
onFinished: () {
|
|
if (mounted) {
|
|
setState(() => _danmakus.removeWhere((w) => w.key == key));
|
|
}
|
|
},
|
|
),
|
|
);
|
|
});
|
|
}
|
|
|
|
void _sendMsg() {
|
|
if (_msgController.text.isNotEmpty) {
|
|
final auth = context.read<AuthProvider>();
|
|
_chatService.sendMessage(
|
|
_msgController.text,
|
|
auth.username ?? "Anonymous",
|
|
widget.roomId,
|
|
);
|
|
_msgController.clear();
|
|
}
|
|
}
|
|
|
|
Future<void> _refreshPlayer() async {
|
|
if (_isRefreshing) {
|
|
return;
|
|
}
|
|
|
|
await _loadPlaybackOptions();
|
|
|
|
setState(() {
|
|
_isRefreshing = true;
|
|
_isError = false;
|
|
_errorMessage = null;
|
|
_danmakus.clear();
|
|
_playerVersion++;
|
|
});
|
|
_showControls();
|
|
|
|
if (kIsWeb) {
|
|
await Future<void>.delayed(const Duration(milliseconds: 150));
|
|
if (mounted) {
|
|
setState(() => _isRefreshing = false);
|
|
}
|
|
return;
|
|
}
|
|
|
|
if (_controller != null) {
|
|
await _controller!.dispose();
|
|
}
|
|
_controller = null;
|
|
if (mounted) {
|
|
setState(() {});
|
|
}
|
|
await _initializePlayer();
|
|
}
|
|
|
|
Future<void> _toggleFullscreen() async {
|
|
final nextValue = !_isFullscreen;
|
|
if (!kIsWeb) {
|
|
await SystemChrome.setEnabledSystemUIMode(
|
|
nextValue ? SystemUiMode.immersiveSticky : SystemUiMode.edgeToEdge,
|
|
);
|
|
await SystemChrome.setPreferredOrientations(
|
|
nextValue
|
|
? const [
|
|
DeviceOrientation.landscapeLeft,
|
|
DeviceOrientation.landscapeRight,
|
|
]
|
|
: DeviceOrientation.values,
|
|
);
|
|
}
|
|
|
|
if (mounted) {
|
|
setState(() => _isFullscreen = nextValue);
|
|
}
|
|
_showControls();
|
|
}
|
|
|
|
void _toggleDanmaku() {
|
|
setState(() {
|
|
_showDanmaku = !_showDanmaku;
|
|
if (!_showDanmaku) {
|
|
_danmakus.clear();
|
|
}
|
|
});
|
|
_showControls();
|
|
}
|
|
|
|
void _showControls() {
|
|
_controlsHideTimer?.cancel();
|
|
if (mounted) {
|
|
setState(() => _controlsVisible = true);
|
|
}
|
|
_controlsHideTimer = Timer(const Duration(seconds: 3), () {
|
|
if (mounted) {
|
|
setState(() => _controlsVisible = false);
|
|
}
|
|
});
|
|
}
|
|
|
|
void _toggleControlsVisibility() {
|
|
if (_controlsVisible) {
|
|
_controlsHideTimer?.cancel();
|
|
setState(() => _controlsVisible = false);
|
|
} else {
|
|
_showControls();
|
|
}
|
|
}
|
|
|
|
Future<void> _selectResolution() async {
|
|
_showControls();
|
|
await _loadPlaybackOptions();
|
|
if (!mounted) {
|
|
return;
|
|
}
|
|
|
|
final nextResolution = await showModalBottomSheet<String>(
|
|
context: context,
|
|
builder: (context) {
|
|
const options = ['Source', '720p', '480p'];
|
|
final available = _availableResolutions.toSet();
|
|
return SafeArea(
|
|
child: Column(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
ListTile(
|
|
title: Text('Playback Resolution'),
|
|
subtitle: Text(
|
|
available.length > 1
|
|
? 'Select an available transcoded stream.'
|
|
: 'Only the source stream is available right now.',
|
|
),
|
|
),
|
|
...options.map((option) {
|
|
final enabled = available.contains(option);
|
|
return ListTile(
|
|
enabled: enabled,
|
|
leading: Icon(
|
|
option == _selectedResolution
|
|
? Icons.radio_button_checked
|
|
: Icons.radio_button_off,
|
|
),
|
|
title: Text(option),
|
|
subtitle: enabled
|
|
? const Text('Available now')
|
|
: const Text('Waiting for backend transcoding output'),
|
|
onTap: enabled ? () => Navigator.pop(context, option) : null,
|
|
);
|
|
}),
|
|
],
|
|
),
|
|
);
|
|
},
|
|
);
|
|
|
|
if (nextResolution == null || nextResolution == _selectedResolution) {
|
|
return;
|
|
}
|
|
|
|
setState(() => _selectedResolution = nextResolution);
|
|
await _refreshPlayer();
|
|
}
|
|
|
|
@override
|
|
void dispose() {
|
|
if (!kIsWeb && _isFullscreen) {
|
|
SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);
|
|
SystemChrome.setPreferredOrientations(DeviceOrientation.values);
|
|
}
|
|
_controlsHideTimer?.cancel();
|
|
_controller?.dispose();
|
|
_chatService.dispose();
|
|
_msgController.dispose();
|
|
super.dispose();
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
bool isWide = MediaQuery.of(context).size.width > 900;
|
|
|
|
return Scaffold(
|
|
backgroundColor: _isFullscreen
|
|
? Colors.black
|
|
: Theme.of(context).colorScheme.surface,
|
|
appBar: _isFullscreen ? null : AppBar(title: Text(widget.title)),
|
|
body: _isFullscreen
|
|
? _buildFullscreenLayout()
|
|
: isWide
|
|
? _buildWideLayout()
|
|
: _buildMobileLayout(),
|
|
);
|
|
}
|
|
|
|
Widget _buildFullscreenLayout() {
|
|
return SizedBox.expand(child: _buildVideoPanel());
|
|
}
|
|
|
|
// 宽屏布局：左右分栏
|
|
Widget _buildWideLayout() {
|
|
return Row(
|
|
crossAxisAlignment: CrossAxisAlignment.stretch,
|
|
children: [
|
|
// 左侧视频区 (占比 75%)
|
|
Expanded(flex: 3, child: _buildVideoPanel()),
|
|
// 右侧聊天区 (占比 25%)
|
|
Container(
|
|
width: 350,
|
|
decoration: BoxDecoration(
|
|
border: Border(
|
|
left: BorderSide(color: Theme.of(context).dividerColor),
|
|
),
|
|
),
|
|
child: _buildChatSection(),
|
|
),
|
|
],
|
|
);
|
|
}
|
|
|
|
// 移动端布局：上下堆叠
|
|
Widget _buildMobileLayout() {
|
|
return Column(
|
|
children: [
|
|
SizedBox(
|
|
height: 310,
|
|
width: double.infinity,
|
|
child: _buildVideoPanel(),
|
|
),
|
|
Expanded(child: _buildChatSection()),
|
|
],
|
|
);
|
|
}
|
|
|
|
Widget _buildVideoPanel() {
|
|
return MouseRegion(
|
|
onHover: (_) => _showControls(),
|
|
onEnter: (_) => _showControls(),
|
|
child: GestureDetector(
|
|
behavior: HitTestBehavior.opaque,
|
|
onTap: _toggleControlsVisibility,
|
|
onDoubleTap: _toggleFullscreen,
|
|
child: Container(
|
|
color: Colors.black,
|
|
child: Stack(
|
|
children: [
|
|
Positioned.fill(child: _buildVideoWithDanmaku()),
|
|
Positioned(
|
|
left: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
child: _buildPlaybackControls(),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildVideoWithDanmaku() {
|
|
return LayoutBuilder(
|
|
builder: (context, constraints) {
|
|
return Stack(
|
|
children: [
|
|
Center(
|
|
child: _isError
|
|
? Text(
|
|
"Error: $_errorMessage",
|
|
style: TextStyle(color: Colors.white),
|
|
)
|
|
: kIsWeb
|
|
? WebStreamPlayer(
|
|
key: ValueKey('web-player-$_playerVersion'),
|
|
streamUrl: _currentPlaybackUrl(),
|
|
)
|
|
: _controller != null && _controller!.value.isInitialized
|
|
? AspectRatio(
|
|
aspectRatio: _controller!.value.aspectRatio,
|
|
child: VideoPlayer(_controller!),
|
|
)
|
|
: CircularProgressIndicator(),
|
|
),
|
|
if (_showDanmaku)
|
|
ClipRect(
|
|
child: Stack(
|
|
children: _danmakus
|
|
.map(
|
|
(item) => _DanmakuItem(
|
|
key: item.key,
|
|
text: item.text,
|
|
topFactor: item.topFactor,
|
|
containerWidth: constraints.maxWidth,
|
|
containerHeight: constraints.maxHeight,
|
|
onFinished: item.onFinished,
|
|
),
|
|
)
|
|
.toList(),
|
|
),
|
|
),
|
|
if (_isRefreshing)
|
|
const Positioned(
|
|
top: 16,
|
|
right: 16,
|
|
child: SizedBox(
|
|
width: 24,
|
|
height: 24,
|
|
child: CircularProgressIndicator(strokeWidth: 2),
|
|
),
|
|
),
|
|
],
|
|
);
|
|
},
|
|
);
|
|
}
|
|
|
|
Color _usernameColor(String username, String type) {
|
|
if (type == "system") {
|
|
return Colors.blue;
|
|
}
|
|
final normalized = username.trim().toLowerCase();
|
|
var hash = 5381;
|
|
for (final codeUnit in normalized.codeUnits) {
|
|
hash = ((hash << 5) + hash) ^ codeUnit;
|
|
}
|
|
final hue = (hash.abs() % 360).toDouble();
|
|
return HSLColor.fromAHSL(1, hue, 0.72, 0.68).toColor();
|
|
}
|
|
|
|
Widget _buildMessageItem(ChatMessage message) {
|
|
return Padding(
|
|
padding: const EdgeInsets.symmetric(vertical: 4.0),
|
|
child: RichText(
|
|
text: TextSpan(
|
|
style: TextStyle(
|
|
color: Theme.of(context).textTheme.bodyMedium?.color,
|
|
),
|
|
children: [
|
|
TextSpan(
|
|
text: "${message.username}: ",
|
|
style: TextStyle(
|
|
fontWeight: FontWeight.bold,
|
|
color: _usernameColor(message.username, message.type),
|
|
),
|
|
),
|
|
TextSpan(text: message.content),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildPlaybackControls() {
|
|
return IgnorePointer(
|
|
ignoring: !_controlsVisible,
|
|
child: AnimatedOpacity(
|
|
opacity: _controlsVisible ? 1 : 0,
|
|
duration: const Duration(milliseconds: 220),
|
|
child: Container(
|
|
width: double.infinity,
|
|
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
|
|
decoration: BoxDecoration(
|
|
gradient: LinearGradient(
|
|
begin: Alignment.bottomCenter,
|
|
end: Alignment.topCenter,
|
|
colors: [
|
|
Colors.black.withValues(alpha: 0.9),
|
|
Colors.black.withValues(alpha: 0.55),
|
|
Colors.transparent,
|
|
],
|
|
),
|
|
),
|
|
child: SafeArea(
|
|
top: false,
|
|
child: Align(
|
|
alignment: Alignment.bottomCenter,
|
|
child: Wrap(
|
|
spacing: 10,
|
|
runSpacing: 10,
|
|
alignment: WrapAlignment.center,
|
|
children: [
|
|
_buildControlButton(
|
|
icon: Icons.refresh,
|
|
label: "Refresh",
|
|
onPressed: _refreshPlayer,
|
|
),
|
|
_buildControlButton(
|
|
icon: _showDanmaku ? Icons.subtitles : Icons.subtitles_off,
|
|
label: _showDanmaku ? "Danmaku On" : "Danmaku Off",
|
|
onPressed: _toggleDanmaku,
|
|
),
|
|
_buildControlButton(
|
|
icon: _isFullscreen
|
|
? Icons.fullscreen_exit
|
|
: Icons.fullscreen,
|
|
label: _isFullscreen ? "Exit Fullscreen" : "Fullscreen",
|
|
onPressed: _toggleFullscreen,
|
|
),
|
|
_buildControlButton(
|
|
icon: Icons.high_quality,
|
|
label: _selectedResolution,
|
|
onPressed: _selectResolution,
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildControlButton({
|
|
required IconData icon,
|
|
required String label,
|
|
required FutureOr<void> Function() onPressed,
|
|
}) {
|
|
return FilledButton.tonalIcon(
|
|
onPressed: () async {
|
|
_showControls();
|
|
await onPressed();
|
|
},
|
|
icon: Icon(icon, size: 18),
|
|
label: Text(label),
|
|
style: FilledButton.styleFrom(
|
|
foregroundColor: Colors.white,
|
|
backgroundColor: Colors.white.withValues(alpha: 0.12),
|
|
),
|
|
);
|
|
}
|
|
|
|
// 抽离聊天区域组件
|
|
Widget _buildChatSection() {
|
|
return Column(
|
|
children: [
|
|
Container(
|
|
padding: EdgeInsets.symmetric(horizontal: 16, vertical: 12),
|
|
color: Theme.of(context).colorScheme.surfaceContainerHighest,
|
|
child: Row(
|
|
children: [
|
|
Icon(Icons.chat_bubble_outline, size: 16),
|
|
SizedBox(width: 8),
|
|
Text("Live Chat", style: TextStyle(fontWeight: FontWeight.bold)),
|
|
],
|
|
),
|
|
),
|
|
Expanded(
|
|
child: ListView.builder(
|
|
reverse: true,
|
|
padding: EdgeInsets.all(8),
|
|
itemCount: _messages.length,
|
|
itemBuilder: (context, index) {
|
|
final m = _messages[index];
|
|
return _buildMessageItem(m);
|
|
},
|
|
),
|
|
),
|
|
Divider(height: 1),
|
|
Padding(
|
|
padding: const EdgeInsets.all(8.0),
|
|
child: Row(
|
|
children: [
|
|
Expanded(
|
|
child: TextField(
|
|
controller: _msgController,
|
|
decoration: InputDecoration(
|
|
hintText: "Send a message...",
|
|
border: OutlineInputBorder(
|
|
borderRadius: BorderRadius.circular(20),
|
|
),
|
|
contentPadding: EdgeInsets.symmetric(
|
|
horizontal: 16,
|
|
vertical: 8,
|
|
),
|
|
),
|
|
onSubmitted: (_) => _sendMsg(),
|
|
),
|
|
),
|
|
IconButton(
|
|
icon: Icon(
|
|
Icons.send,
|
|
color: Theme.of(context).colorScheme.primary,
|
|
),
|
|
onPressed: _sendMsg,
|
|
),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
);
|
|
}
|
|
}
|
|
|
|
class _DanmakuEntry {
|
|
final Key key;
|
|
final String text;
|
|
final double topFactor;
|
|
final VoidCallback onFinished;
|
|
|
|
const _DanmakuEntry({
|
|
required this.key,
|
|
required this.text,
|
|
required this.topFactor,
|
|
required this.onFinished,
|
|
});
|
|
}
|
|
|
|
class _DanmakuItem extends StatefulWidget {
|
|
final String text;
|
|
final double topFactor;
|
|
final double containerWidth;
|
|
final double containerHeight;
|
|
final VoidCallback onFinished;
|
|
|
|
const _DanmakuItem({
|
|
super.key,
|
|
required this.text,
|
|
required this.topFactor,
|
|
required this.containerWidth,
|
|
required this.containerHeight,
|
|
required this.onFinished,
|
|
});
|
|
|
|
@override
|
|
__DanmakuItemState createState() => __DanmakuItemState();
|
|
}
|
|
|
|
class __DanmakuItemState extends State<_DanmakuItem>
|
|
with SingleTickerProviderStateMixin {
|
|
late AnimationController _animationController;
|
|
late Animation<double> _animation;
|
|
|
|
@override
|
|
void initState() {
|
|
super.initState();
|
|
_animationController = AnimationController(
|
|
duration: const Duration(seconds: 10),
|
|
vsync: this,
|
|
);
|
|
|
|
// 使用相对位置：从右向左
|
|
_animation = Tween<double>(
|
|
begin: 1.0,
|
|
end: -0.5,
|
|
).animate(_animationController);
|
|
|
|
_animationController.forward().then((_) => widget.onFinished());
|
|
}
|
|
|
|
@override
|
|
void dispose() {
|
|
_animationController.dispose();
|
|
super.dispose();
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return AnimatedBuilder(
|
|
animation: _animation,
|
|
builder: (context, child) {
|
|
return Positioned(
|
|
top: widget.containerHeight * widget.topFactor,
|
|
left: widget.containerWidth * _animation.value,
|
|
child: Text(
|
|
widget.text,
|
|
style: TextStyle(
|
|
color: Colors.white,
|
|
fontWeight: FontWeight.bold,
|
|
fontSize: 18,
|
|
shadows: [
|
|
Shadow(
|
|
blurRadius: 4,
|
|
color: Colors.black,
|
|
offset: Offset(1, 1),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
},
|
|
);
|
|
}
|
|
}
|