f2b932bc93
Squash-merge commit. Covers four areas: native video player, chat reliability, multi-tab, and hardening. ## Native video player - Direct HLS playback via `better_native_video_player` (forked from `plug-and-pay/flutter-native-video-player`, patched on `frosty-patches` branch) - Twitch GQL playback token fetching with platform cookie extraction (iOS Swift + Android Kotlin plugins) for authenticated streams - Quality selection (source, 720p, 480p, 360p, 160p, audio-only) persisted per channel - Picture-in-picture: iOS automatic inline PiP, Android auto-PiP on API 31+ guarded against older devices - Latency polling, chat latency sync, stall detection/recovery, startup auto-pause recovery, watchdog timers - **Twitch stitched-ad break detection** (HLS `EXT-X-DATERANGE`) on both platforms, emitting `adBreakChanged` so the host suspends latency/stall recovery and chat sync during ads (program-date-time is unreliable then). Matches `CLASS="twitch-stitched-ad"` / `ID="stitched-ad-"` **and** the `X-TV-TWITCH-AD-*` attribute prefix (the durable signal streamlink/yt-dlp use) - Shared `VideoPlayerInterface` so WebView and native paths are interchangeable via settings toggle - `PlaybackAccessToken` model, `TwitchGqlApi` client ## Chat delay & send reliability - **Optimistic send-finalize**: Twitch acks a sent message with a per-PRIVMSG USERSTATE (not an echo), which it can intermittently drop — more so under a long chat delay. A missing ack no longer shows a false "message may not have been sent" error; the send is finalized optimistically (local echo rendered), and only genuine rejection NOTICEs surface an error. Ack timeout scaled by the chat delay. - **Per-line chat-delay bypass**: control/state lines (USERSTATE/ROOMSTATE/GLOBALUSERSTATE), rejection NOTICEs, the reconnect notice, and untagged server lines bypass the delay so send-acks and PONGs aren't stalled; only displayable chat content is delayed, staying in sync with delayed video. - **Measured chat bottom-bar height**: the message list reflows to the composer's real measured height, fixing the input overlapping messages when a long message expands it (replaces a fixed-constant estimate). - IRC tag parsing handles valueless and escaped tags per the IRCv3 message-tags spec (fixes a recent-messages RangeError on certain tags). ## Chat / multi-tab - Redesigned tab chips: unread dot indicator, chips dim until WebSocket connects - Animated tab options popover replacing `MenuAnchor` (no animation hook in Flutter 3.44) - Simplified `ChatTabs` from `StatefulWidget` to `StatelessWidget` - Focus-current-channel fade bump to 0.55; section-header alpha lifted to match the muted-label tier - `addTab` now calls `setActiveTab` to snapshot outgoing tab's `lastSeenMessageId` — fixes spurious unread dots after adding a tab - `onActivateSourceTab` threaded into `ChatUserModal` so Reply in merged mode switches to the correct source tab's composer ## Bug fixes and hardening - **Reverted the experimental iOS low-latency mode** (5s live-edge join + 1.05x catch-up): AVPlayer can't sustain <~18s on Twitch (declared `TARGETDURATION:6` paces playlist refreshes), and the offset starved the buffer into pause-on-launch. Default join distance restored. - Fork (Android): **cap `BEHIND_LIVE_WINDOW` recovery** so a stream repeatedly falling off the live window can't silently re-prepare forever; emits `error` on exhaustion so the host recovery ladder takes over - Guard all Android `setAutoPipMode` calls with `_autoPipAvailable` — prevents `PlatformException` on Android 8–11; check `_disposed` after `isAutoPipAvailable` await to prevent post-dispose auto-PiP re-enable - Remove `_isInPipMode` guard from `_onPaused` so `_paused` tracks actual state, fixing PiP play/pause toggle getting stuck - Tighten iOS cookie domain check to exact `twitch.tv` / `.twitch.tv` suffix - Invalidate the stored web session token when Twitch rejects it with a 401 (profile card flips back to unlinked; future loads skip the doomed authenticated request), and re-extract the cookie on launch when logged in without a linked session - Send `play_session_id` and `player_backend=mediaplayer` to Usher, matching the web client / streamlink - Fork (iOS): restore program-date-time latency measurement (a prior rev measured distance to the manifest edge, reading ~0s and silently disabling high-latency recovery / chat-delay auto-sync); release platform views on dispose (per-stream view + AVPlayerViewController leak), track the observed AVPlayerItem for KVO removal (sibling-view crash), main-thread seek results, resolve superseded load futures - Fork (Android): clean up method handlers orphaned by PiP-time view disposal (leaked audio-focus listeners), drop the live-offset re-anchoring seekTo on metadata updates (latency creep), restore pre-duck volume, respect user pause in the stall watchdog, resolve superseded load futures - Deep review pass: expire the quality-switch flag so stall recovery isn't disabled for the session, cap latency-driven recovery (clock-skew loop), generation-guard the error overlay, two-strike offline confirmation, controller null-safety on quality switch - Tighten `/me` local-echo match (no longer renders `/meow ...` as an action); clear pending send text on disconnect ## Web / docs - Remove stale Cloudflare Images binding from `wrangler.jsonc` (covered by `images.unoptimized: true`) - Correct `web/AGENTS.md` Cache Components claim (feature not enabled) - Repo and agent config cleanup ## Test plan - [x] `flutter analyze` — clean (frosty + plugin lib) - [x] `flutter test` — 319/319 pass (adds `ChatLatencySync`, `StreamInfoPoller`, video timing invariants, `PlaybackAccessToken`, IRC tag parsing) - [x] Android plugin Kotlin compiles against the bumped fork rev - [ ] Native player plays live streams on iOS and Android - [ ] Quality switching works and persists across channel reopens - [ ] PiP enters/exits correctly; pause/resume toggle in PiP window works - [ ] Audio-only mode does not crash on Android < API 31 - [ ] Sending under a long synced chat delay no longer shows a false "may not have been sent" error - [ ] Long composer text reflows the message list (no input/message overlap) - [ ] Multi-tab: adding a tab does not mark previous tab as unread - [ ] Merged chat: Reply from user modal targets the correct tab's composer 🤖 Generated with [Claude Code](https://claude.com/claude-code)
425 lines
18 KiB
Dart
425 lines
18 KiB
Dart
import 'package:extended_text_field/extended_text_field.dart';
|
|
import 'package:flutter/material.dart';
|
|
import 'package:flutter/services.dart';
|
|
import 'package:flutter_mobx/flutter_mobx.dart';
|
|
import 'package:frosty/constants.dart';
|
|
import 'package:frosty/models/irc.dart';
|
|
import 'package:frosty/screens/channel/chat/details/chat_details.dart';
|
|
import 'package:frosty/screens/channel/chat/stores/chat_store.dart';
|
|
import 'package:frosty/utils/context_extensions.dart';
|
|
import 'package:frosty/utils/modal_bottom_sheet.dart';
|
|
import 'package:frosty/widgets/blurred_container.dart';
|
|
import 'package:frosty/widgets/chat_input/emote_text_span_builder.dart';
|
|
import 'package:frosty/widgets/frosty_cached_network_image.dart';
|
|
import 'package:frosty/widgets/measure_size.dart';
|
|
|
|
class ChatBottomBar extends StatelessWidget {
|
|
final ChatStore chatStore;
|
|
|
|
/// Callback to add a new chat tab.
|
|
/// Passes this to ChatDetails to show "Add chat" option.
|
|
final VoidCallback onAddChat;
|
|
|
|
/// When set, indicates merged mode — shown in hint text (e.g., "Chat in xQc").
|
|
final String? channelDisplayName;
|
|
|
|
const ChatBottomBar({
|
|
super.key,
|
|
required this.chatStore,
|
|
required this.onAddChat,
|
|
this.channelDisplayName,
|
|
});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final isEmotesEnabled =
|
|
chatStore.settings.showTwitchEmotes ||
|
|
chatStore.settings.show7TVEmotes ||
|
|
chatStore.settings.showBTTVEmotes ||
|
|
chatStore.settings.showFFZEmotes;
|
|
|
|
final emoteMenuButton = isEmotesEnabled
|
|
? Tooltip(
|
|
message: 'Emote menu',
|
|
preferBelow: false,
|
|
child: IconButton(
|
|
color: chatStore.assetsStore.showEmoteMenu
|
|
? Theme.of(context).colorScheme.secondary
|
|
: null,
|
|
icon: Icon(
|
|
chatStore.assetsStore.showEmoteMenu
|
|
? Icons.emoji_emotions_rounded
|
|
: Icons.emoji_emotions_outlined,
|
|
),
|
|
onPressed: () {
|
|
chatStore.unfocusInput();
|
|
chatStore.assetsStore.showEmoteMenu =
|
|
!chatStore.assetsStore.showEmoteMenu;
|
|
},
|
|
),
|
|
)
|
|
: null;
|
|
|
|
return Observer(
|
|
builder: (context) {
|
|
final matchingEmotes = chatStore.matchingEmotes;
|
|
final matchingChatters = chatStore.matchingChatters;
|
|
|
|
final isFullscreenOverlay =
|
|
chatStore.settings.fullScreen && context.isLandscape;
|
|
|
|
final effectiveChatDelay = chatStore.settings.effectiveChatDelay;
|
|
|
|
// Check if chat delay is active (for indicator only, doesn't block input)
|
|
final hasChatDelay =
|
|
chatStore.settings.showVideo && effectiveChatDelay > 0;
|
|
|
|
const loginTooltipMessage = 'Log in to chat';
|
|
|
|
final bottomBarContent = Column(
|
|
children: [
|
|
if (chatStore.replyingToMessage != null) ...[
|
|
const Divider(),
|
|
TextFieldTapRegion(
|
|
child: Container(
|
|
height: 40,
|
|
decoration: BoxDecoration(
|
|
border: Border(
|
|
left: BorderSide(
|
|
color: Theme.of(context).colorScheme.secondary,
|
|
width: 4,
|
|
),
|
|
),
|
|
),
|
|
// Left: 8px so text aligns at 12px (4px border + 8px padding)
|
|
// Right: 4px to give close button some breathing room
|
|
padding: const EdgeInsets.only(left: 8, right: 4),
|
|
alignment: Alignment.centerLeft,
|
|
child: Row(
|
|
children: [
|
|
Expanded(
|
|
child: Tooltip(
|
|
message: chatStore.replyingToMessage!.message ?? '',
|
|
preferBelow: false,
|
|
child: Text.rich(
|
|
TextSpan(
|
|
children: chatStore.replyingToMessage!
|
|
.generateSpan(
|
|
context,
|
|
assetsStore: chatStore.assetsStore,
|
|
emoteScale: chatStore.settings.emoteScale,
|
|
badgeScale: chatStore.settings.badgeScale,
|
|
launchExternal:
|
|
chatStore.settings.launchUrlExternal,
|
|
timestamp: chatStore.settings.timestampType,
|
|
currentChannelId: chatStore.channelId,
|
|
),
|
|
),
|
|
maxLines: 1,
|
|
overflow: TextOverflow.ellipsis,
|
|
style: context.defaultTextStyle.copyWith(
|
|
fontSize: chatStore.settings.fontSize,
|
|
),
|
|
),
|
|
),
|
|
),
|
|
IconButton(
|
|
tooltip: 'Cancel reply',
|
|
visualDensity: VisualDensity.compact,
|
|
onPressed: () => chatStore.replyingToMessage = null,
|
|
icon: const Icon(Icons.close, size: 20),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
],
|
|
// Wrap autocomplete sections with TextFieldTapRegion so taps
|
|
// on them don't trigger TextField's onTapOutside callback.
|
|
if (chatStore.settings.autocomplete &&
|
|
chatStore.showEmoteAutocomplete &&
|
|
matchingEmotes.isNotEmpty) ...[
|
|
const Divider(),
|
|
TextFieldTapRegion(
|
|
child: SizedBox(
|
|
height: 50,
|
|
child: ListView.builder(
|
|
padding: const EdgeInsets.all(4),
|
|
itemCount: matchingEmotes.length,
|
|
scrollDirection: Axis.horizontal,
|
|
itemBuilder: (context, index) => InkWell(
|
|
onTap: () => chatStore.addEmote(
|
|
matchingEmotes[index],
|
|
autocompleteMode: true,
|
|
),
|
|
onLongPress: () {
|
|
HapticFeedback.lightImpact();
|
|
|
|
IRCMessage.showEmoteDetailsBottomSheet(
|
|
context,
|
|
emote: matchingEmotes[index],
|
|
launchExternal: chatStore.settings.launchUrlExternal,
|
|
);
|
|
},
|
|
child: Padding(
|
|
padding: const EdgeInsets.symmetric(horizontal: 8),
|
|
child: Center(
|
|
child: FrostyCachedNetworkImage(
|
|
imageUrl: matchingEmotes[index].url,
|
|
useFade: false,
|
|
height:
|
|
matchingEmotes[index].height?.toDouble() ??
|
|
defaultEmoteSize,
|
|
width: matchingEmotes[index].width?.toDouble(),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
if (chatStore.settings.autocomplete &&
|
|
chatStore.showMentionAutocomplete &&
|
|
matchingChatters.isNotEmpty) ...[
|
|
const Divider(),
|
|
TextFieldTapRegion(
|
|
child: SizedBox(
|
|
height: 50,
|
|
child: ListView.builder(
|
|
padding: const EdgeInsets.all(4),
|
|
itemCount: matchingChatters.length,
|
|
scrollDirection: Axis.horizontal,
|
|
itemBuilder: (context, index) => TextButton(
|
|
style: TextButton.styleFrom(
|
|
padding: const EdgeInsets.symmetric(horizontal: 8),
|
|
),
|
|
onPressed: () {
|
|
final split = chatStore.textController.text.split(' ')
|
|
..removeLast()
|
|
..add('@${matchingChatters[index]} ');
|
|
|
|
chatStore.textController.text = split.join(' ');
|
|
chatStore.textController.selection =
|
|
TextSelection.fromPosition(
|
|
TextPosition(
|
|
offset: chatStore.textController.text.length,
|
|
),
|
|
);
|
|
},
|
|
child: Text(matchingChatters[index]),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
Padding(
|
|
padding: const EdgeInsets.only(left: 12, top: 8, bottom: 8),
|
|
child: Row(
|
|
children: [
|
|
if (!chatStore.expandChat &&
|
|
chatStore.settings.chatWidth < 0.3 &&
|
|
chatStore.settings.showVideo &&
|
|
context.isLandscape)
|
|
Builder(
|
|
builder: (context) {
|
|
final isDisabled = !chatStore.auth.isLoggedIn;
|
|
|
|
return GestureDetector(
|
|
onTap: isDisabled
|
|
? () {
|
|
chatStore.updateNotification(
|
|
loginTooltipMessage,
|
|
);
|
|
}
|
|
: null,
|
|
child: IconButton(
|
|
tooltip: 'Enter a message',
|
|
onPressed: isDisabled
|
|
? null
|
|
: () {
|
|
chatStore.expandChat = true;
|
|
chatStore.safeRequestFocus();
|
|
},
|
|
icon: const Icon(Icons.edit),
|
|
),
|
|
);
|
|
},
|
|
)
|
|
else
|
|
Expanded(
|
|
child: Observer(
|
|
builder: (context) {
|
|
final isLoggedIn = chatStore.auth.isLoggedIn;
|
|
final isWaitingForAck = chatStore.isWaitingForAck;
|
|
final isConnected = chatStore.isConnected;
|
|
final hasConnected = chatStore.hasConnected;
|
|
final isEnabled =
|
|
isLoggedIn && !isWaitingForAck && isConnected;
|
|
|
|
return GestureDetector(
|
|
onTap: !isLoggedIn
|
|
? () {
|
|
chatStore.updateNotification(
|
|
loginTooltipMessage,
|
|
);
|
|
}
|
|
: null,
|
|
child: ExtendedTextField(
|
|
textInputAction: TextInputAction.send,
|
|
focusNode: chatStore.textFieldFocusNode,
|
|
minLines: 1,
|
|
maxLines: 3,
|
|
enabled: isEnabled,
|
|
specialTextSpanBuilder: EmoteTextSpanBuilder(
|
|
emoteToObject:
|
|
chatStore.assetsStore.emoteToObject,
|
|
userEmoteToObject:
|
|
chatStore.assetsStore.userEmoteToObject,
|
|
emoteSize:
|
|
chatStore.settings.emoteScale *
|
|
defaultEmoteSize,
|
|
),
|
|
decoration: InputDecoration(
|
|
prefixIcon:
|
|
chatStore.settings.emoteMenuButtonOnLeft
|
|
? emoteMenuButton
|
|
: null,
|
|
suffixIcon: Row(
|
|
mainAxisSize: MainAxisSize.min,
|
|
spacing: 8,
|
|
children: [
|
|
if (!chatStore
|
|
.settings
|
|
.emoteMenuButtonOnLeft &&
|
|
emoteMenuButton != null)
|
|
emoteMenuButton,
|
|
],
|
|
),
|
|
hintMaxLines: 1,
|
|
hintText: !isLoggedIn
|
|
? loginTooltipMessage
|
|
: !isConnected
|
|
? (hasConnected
|
|
? 'Chat disconnected'
|
|
: 'Connecting...')
|
|
: isWaitingForAck
|
|
? 'Sending...'
|
|
: chatStore.replyingToMessage != null
|
|
? channelDisplayName != null
|
|
? 'Reply in ${channelDisplayName!}'
|
|
: 'Reply'
|
|
: hasChatDelay
|
|
? channelDisplayName != null
|
|
? 'Chat in ${channelDisplayName!} (${effectiveChatDelay.toInt()}s delay)'
|
|
: 'Chat (${effectiveChatDelay.toInt()}s delay)'
|
|
: channelDisplayName != null
|
|
? 'Chat in ${channelDisplayName!}'
|
|
: 'Chat',
|
|
),
|
|
controller: chatStore.textController,
|
|
onSubmitted: chatStore.sendMessage,
|
|
onTapOutside: (_) {
|
|
chatStore.textFieldFocusNode.unfocus();
|
|
},
|
|
),
|
|
);
|
|
},
|
|
),
|
|
),
|
|
TextFieldTapRegion(
|
|
child:
|
|
chatStore.showSendButton &&
|
|
(chatStore.settings.chatWidth >= 0.3 ||
|
|
chatStore.expandChat ||
|
|
context.isPortrait)
|
|
? Observer(
|
|
builder: (context) => IconButton(
|
|
tooltip: chatStore.isWaitingForAck
|
|
? 'Sending...'
|
|
: 'Send',
|
|
icon: chatStore.isWaitingForAck
|
|
? const SizedBox(
|
|
width: 20,
|
|
height: 20,
|
|
child: CircularProgressIndicator(
|
|
strokeWidth: 2,
|
|
),
|
|
)
|
|
: const Icon(Icons.send_rounded),
|
|
onPressed:
|
|
chatStore.auth.isLoggedIn &&
|
|
!chatStore.isWaitingForAck &&
|
|
chatStore.isConnected
|
|
? () => chatStore.sendMessage(
|
|
chatStore.textController.text,
|
|
)
|
|
: null,
|
|
),
|
|
)
|
|
: IconButton(
|
|
icon: Icon(Icons.adaptive.more_rounded),
|
|
tooltip: 'More',
|
|
onPressed: () =>
|
|
showModalBottomSheetWithProperFocus(
|
|
isScrollControlled: true,
|
|
context: context,
|
|
builder: (_) => ChatDetails(
|
|
chatDetailsStore:
|
|
chatStore.chatDetailsStore,
|
|
chatStore: chatStore,
|
|
userLogin: chatStore.channelName,
|
|
onAddChat: onAddChat,
|
|
),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
);
|
|
|
|
// Don't add bottom padding when:
|
|
// - Emote menu is open: The emote menu provides its own bottom boundary
|
|
// - In horizontal landscape mode: System is in immersive mode and home
|
|
// indicator is on the side (left/right), not the content bottom.
|
|
// SafeArea handles left/right insets for the notch.
|
|
// Note: landscapeForceVerticalChat uses portrait layout in landscape
|
|
// orientation with normal (non-immersive) system UI, so it still needs
|
|
// bottom padding.
|
|
final isHorizontalLandscape =
|
|
context.isLandscape &&
|
|
!chatStore.settings.landscapeForceVerticalChat;
|
|
final needsBottomPadding =
|
|
!chatStore.assetsStore.showEmoteMenu && !isHorizontalLandscape;
|
|
|
|
// Measured once here; the list pads itself by this height so the bar
|
|
// never overlaps messages. Shared by both container branches below.
|
|
final measuredBar = MeasureSize(
|
|
onChange: (size) => chatStore.setBottomBarHeight(size.height),
|
|
child: bottomBarContent,
|
|
);
|
|
|
|
return isFullscreenOverlay
|
|
? Padding(
|
|
padding: EdgeInsets.only(
|
|
bottom: needsBottomPadding
|
|
? MediaQuery.of(context).padding.bottom
|
|
: 0,
|
|
),
|
|
child: measuredBar,
|
|
)
|
|
: BlurredContainer(
|
|
gradientDirection: GradientDirection.down,
|
|
padding: EdgeInsets.only(
|
|
bottom: needsBottomPadding
|
|
? MediaQuery.of(context).padding.bottom
|
|
: 0,
|
|
),
|
|
child: measuredBar,
|
|
);
|
|
},
|
|
);
|
|
}
|
|
}
|