feat: watch together
This commit is contained in:
edde746
@@ -0,0 +1,298 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:material_symbols_icons/symbols.dart';
|
||||
import 'package:provider/provider.dart';
|
||||
|
||||
import '../models/watch_session.dart';
|
||||
import '../providers/watch_together_provider.dart';
|
||||
import 'session_invite_dialog.dart';
|
||||
|
||||
/// Overlay shown on the video player when in a watch together session
|
||||
class WatchTogetherOverlay extends StatelessWidget {
|
||||
/// Callback when the user wants to leave the session
|
||||
final VoidCallback? onLeaveSession;
|
||||
|
||||
const WatchTogetherOverlay({super.key, this.onLeaveSession});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Consumer<WatchTogetherProvider>(
|
||||
builder: (context, provider, child) {
|
||||
if (!provider.isInSession) {
|
||||
return const SizedBox.shrink();
|
||||
}
|
||||
|
||||
return Positioned(
|
||||
top: 16,
|
||||
right: 16,
|
||||
child: _SessionIndicator(
|
||||
participantCount: provider.participantCount,
|
||||
isHost: provider.isHost,
|
||||
isSyncing: provider.isSyncing,
|
||||
controlMode: provider.controlMode,
|
||||
sessionId: provider.sessionId,
|
||||
onTap: () => _showSessionMenu(context, provider),
|
||||
),
|
||||
);
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
void _showSessionMenu(BuildContext context, WatchTogetherProvider provider) {
|
||||
showModalBottomSheet(
|
||||
context: context,
|
||||
builder: (context) => _SessionMenuSheet(provider: provider, onLeaveSession: onLeaveSession),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// Small indicator showing session status
|
||||
class _SessionIndicator extends StatelessWidget {
|
||||
final int participantCount;
|
||||
final bool isHost;
|
||||
final bool isSyncing;
|
||||
final ControlMode controlMode;
|
||||
final String? sessionId;
|
||||
final VoidCallback onTap;
|
||||
|
||||
const _SessionIndicator({
|
||||
required this.participantCount,
|
||||
required this.isHost,
|
||||
required this.isSyncing,
|
||||
required this.controlMode,
|
||||
required this.sessionId,
|
||||
required this.onTap,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final theme = Theme.of(context);
|
||||
|
||||
return Material(
|
||||
color: Colors.black54,
|
||||
borderRadius: BorderRadius.circular(20),
|
||||
child: InkWell(
|
||||
onTap: onTap,
|
||||
borderRadius: BorderRadius.circular(20),
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
// Sync indicator or group icon
|
||||
if (isSyncing)
|
||||
const SizedBox(
|
||||
width: 16,
|
||||
height: 16,
|
||||
child: CircularProgressIndicator(strokeWidth: 2, color: Colors.white),
|
||||
)
|
||||
else
|
||||
Icon(Symbols.group, size: 18, color: isHost ? theme.colorScheme.primary : Colors.white),
|
||||
|
||||
const SizedBox(width: 6),
|
||||
|
||||
// Participant count
|
||||
Text(
|
||||
'$participantCount',
|
||||
style: const TextStyle(color: Colors.white, fontWeight: FontWeight.bold, fontSize: 14),
|
||||
),
|
||||
|
||||
// Host badge
|
||||
if (isHost) ...[
|
||||
const SizedBox(width: 6),
|
||||
Container(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 2),
|
||||
decoration: BoxDecoration(color: theme.colorScheme.primary, borderRadius: BorderRadius.circular(4)),
|
||||
child: const Text(
|
||||
'HOST',
|
||||
style: TextStyle(color: Colors.white, fontSize: 10, fontWeight: FontWeight.bold),
|
||||
),
|
||||
),
|
||||
],
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// Bottom sheet showing session details and actions
|
||||
class _SessionMenuSheet extends StatelessWidget {
|
||||
final WatchTogetherProvider provider;
|
||||
final VoidCallback? onLeaveSession;
|
||||
|
||||
const _SessionMenuSheet({required this.provider, this.onLeaveSession});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final theme = Theme.of(context);
|
||||
|
||||
return SafeArea(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(16),
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
children: [
|
||||
// Header
|
||||
Row(
|
||||
children: [
|
||||
Icon(Symbols.group, color: theme.colorScheme.primary),
|
||||
const SizedBox(width: 12),
|
||||
Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text('Watch Together', style: theme.textTheme.titleMedium),
|
||||
Text(
|
||||
provider.isHost ? 'You are the host' : 'Watching with others',
|
||||
style: theme.textTheme.bodySmall?.copyWith(color: theme.colorScheme.onSurfaceVariant),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
// Control mode badge
|
||||
Container(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
|
||||
decoration: BoxDecoration(
|
||||
color: theme.colorScheme.surfaceContainerHighest,
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
),
|
||||
child: Text(
|
||||
provider.controlMode == ControlMode.hostOnly ? 'Host controls' : 'Anyone controls',
|
||||
style: theme.textTheme.labelSmall,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
|
||||
const SizedBox(height: 16),
|
||||
const Divider(),
|
||||
const SizedBox(height: 8),
|
||||
|
||||
// Participants list
|
||||
Text('Participants', style: theme.textTheme.titleSmall),
|
||||
const SizedBox(height: 8),
|
||||
...provider.participants.map(
|
||||
(p) => ListTile(
|
||||
leading: CircleAvatar(
|
||||
backgroundColor: p.isHost ? theme.colorScheme.primary : theme.colorScheme.surfaceContainerHighest,
|
||||
child: Icon(
|
||||
p.isHost ? Symbols.star : Symbols.person,
|
||||
color: p.isHost ? Colors.white : theme.colorScheme.onSurfaceVariant,
|
||||
size: 20,
|
||||
),
|
||||
),
|
||||
title: Text(p.displayName),
|
||||
subtitle: p.isHost ? const Text('Host') : null,
|
||||
trailing: p.isBuffering
|
||||
? const SizedBox(width: 16, height: 16, child: CircularProgressIndicator(strokeWidth: 2))
|
||||
: null,
|
||||
dense: true,
|
||||
contentPadding: EdgeInsets.zero,
|
||||
),
|
||||
),
|
||||
|
||||
const SizedBox(height: 16),
|
||||
const Divider(),
|
||||
const SizedBox(height: 8),
|
||||
|
||||
// Actions
|
||||
if (provider.isHost && provider.sessionId != null)
|
||||
ListTile(
|
||||
leading: const Icon(Symbols.share),
|
||||
title: const Text('Invite others'),
|
||||
onTap: () {
|
||||
Navigator.pop(context);
|
||||
showSessionInviteDialog(
|
||||
context,
|
||||
sessionId: provider.sessionId!,
|
||||
participantCount: provider.participantCount,
|
||||
);
|
||||
},
|
||||
contentPadding: EdgeInsets.zero,
|
||||
),
|
||||
|
||||
ListTile(
|
||||
leading: Icon(Symbols.logout, color: theme.colorScheme.error),
|
||||
title: Text(
|
||||
provider.isHost ? 'End session' : 'Leave session',
|
||||
style: TextStyle(color: theme.colorScheme.error),
|
||||
),
|
||||
onTap: () {
|
||||
Navigator.pop(context);
|
||||
_confirmLeave(context);
|
||||
},
|
||||
contentPadding: EdgeInsets.zero,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
void _confirmLeave(BuildContext context) {
|
||||
showDialog(
|
||||
context: context,
|
||||
builder: (context) => AlertDialog(
|
||||
title: Text(provider.isHost ? 'End Session?' : 'Leave Session?'),
|
||||
content: Text(
|
||||
provider.isHost
|
||||
? 'This will end the watch session for all participants.'
|
||||
: 'You will be disconnected from the watch session.',
|
||||
),
|
||||
actions: [
|
||||
TextButton(onPressed: () => Navigator.pop(context), child: const Text('Cancel')),
|
||||
FilledButton(
|
||||
onPressed: () {
|
||||
Navigator.pop(context);
|
||||
provider.leaveSession();
|
||||
onLeaveSession?.call();
|
||||
},
|
||||
child: Text(provider.isHost ? 'End Session' : 'Leave'),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// Compact sync indicator for showing during drift correction
|
||||
class SyncingIndicator extends StatelessWidget {
|
||||
const SyncingIndicator({super.key});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Consumer<WatchTogetherProvider>(
|
||||
builder: (context, provider, child) {
|
||||
if (!provider.isSyncing) {
|
||||
return const SizedBox.shrink();
|
||||
}
|
||||
|
||||
return Positioned(
|
||||
bottom: 80,
|
||||
left: 0,
|
||||
right: 0,
|
||||
child: Center(
|
||||
child: Container(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
|
||||
decoration: BoxDecoration(color: Colors.black54, borderRadius: BorderRadius.circular(20)),
|
||||
child: const Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
SizedBox(
|
||||
width: 14,
|
||||
height: 14,
|
||||
child: CircularProgressIndicator(strokeWidth: 2, color: Colors.white),
|
||||
),
|
||||
SizedBox(width: 8),
|
||||
Text('Syncing...', style: TextStyle(color: Colors.white, fontSize: 12)),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user