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)
537 lines
22 KiB
Dart
537 lines
22 KiB
Dart
import 'dart:io';
|
|
|
|
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/screens/channel/chat/details/chat_users_list.dart';
|
|
import 'package:frosty/screens/channel/chat/stores/chat_store.dart';
|
|
import 'package:frosty/screens/channel/video/native_video_store.dart';
|
|
import 'package:frosty/screens/channel/video/stream_info_bar.dart';
|
|
import 'package:frosty/screens/channel/video/video_player_interface.dart';
|
|
import 'package:frosty/screens/settings/stores/settings_store.dart';
|
|
import 'package:frosty/theme.dart';
|
|
import 'package:frosty/utils.dart';
|
|
import 'package:frosty/utils/context_extensions.dart';
|
|
import 'package:frosty/utils/modal_bottom_sheet.dart';
|
|
import 'package:frosty/widgets/live_indicator.dart';
|
|
import 'package:frosty/widgets/section_header.dart';
|
|
import 'package:frosty/widgets/uptime.dart';
|
|
import 'package:intl/intl.dart';
|
|
import 'package:native_device_orientation/native_device_orientation.dart';
|
|
import 'package:shared_preferences/shared_preferences.dart';
|
|
|
|
/// Creates a widget containing controls which enable interactions with an underlying [Video] widget.
|
|
class VideoOverlay extends StatelessWidget {
|
|
final VideoPlayerInterface videoStore;
|
|
final ChatStore chatStore;
|
|
final SettingsStore settingsStore;
|
|
|
|
const VideoOverlay({
|
|
super.key,
|
|
required this.videoStore,
|
|
required this.chatStore,
|
|
required this.settingsStore,
|
|
});
|
|
|
|
static BoxDecoration _overlayGradient({required bool fromTop}) =>
|
|
BoxDecoration(
|
|
gradient: LinearGradient(
|
|
begin: fromTop ? Alignment.topCenter : Alignment.bottomCenter,
|
|
end: fromTop ? Alignment.bottomCenter : Alignment.topCenter,
|
|
colors: const [
|
|
Colors.black,
|
|
Color.fromRGBO(0, 0, 0, 0.78),
|
|
Color.fromRGBO(0, 0, 0, 0.48),
|
|
Color.fromRGBO(0, 0, 0, 0.12),
|
|
Colors.transparent,
|
|
],
|
|
stops: const [0.0, 0.25, 0.5, 0.8, 1.0],
|
|
),
|
|
);
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final surfaceColor = context.frostyColors.overlayOnSurface;
|
|
|
|
final backButton = IconButton(
|
|
tooltip: 'Back',
|
|
icon: Icon(
|
|
Icons.adaptive.arrow_back_rounded,
|
|
color: surfaceColor,
|
|
shadows: kOverlayShadow,
|
|
),
|
|
onPressed: Navigator.of(context).pop,
|
|
);
|
|
|
|
final chatOverlayButton = Observer(
|
|
builder: (_) => IconButton(
|
|
tooltip: videoStore.settingsStore.fullScreenChatOverlay
|
|
? 'Hide chat overlay'
|
|
: 'Show chat overlay',
|
|
onPressed: () => videoStore.settingsStore.fullScreenChatOverlay =
|
|
!videoStore.settingsStore.fullScreenChatOverlay,
|
|
icon: videoStore.settingsStore.fullScreenChatOverlay
|
|
? Icon(Icons.chat_rounded, shadows: kOverlayShadow)
|
|
: Icon(Icons.chat_outlined, shadows: kOverlayShadow),
|
|
color: surfaceColor,
|
|
),
|
|
);
|
|
|
|
final videoSettingsButton = IconButton(
|
|
icon: Icon(Icons.settings, shadows: kOverlayShadow),
|
|
color: surfaceColor,
|
|
onPressed: () {
|
|
videoStore.updateStreamQualities();
|
|
showModalBottomSheetWithProperFocus(
|
|
context: context,
|
|
builder: (context) => Column(
|
|
mainAxisSize: MainAxisSize.min,
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
const SectionHeader(
|
|
'Quality',
|
|
padding: EdgeInsets.fromLTRB(16, 0, 16, 8),
|
|
isFirst: true,
|
|
),
|
|
Flexible(
|
|
child: Observer(
|
|
builder: (context) => ListView(
|
|
shrinkWrap: true,
|
|
primary: false,
|
|
children: [
|
|
...videoStore.availableStreamQualities.map(
|
|
(quality) => ListTile(
|
|
trailing: videoStore.streamQuality == quality
|
|
? const Icon(Icons.check_rounded)
|
|
: null,
|
|
title: Text(quality),
|
|
onTap: () {
|
|
videoStore.setStreamQuality(quality);
|
|
SharedPreferences.getInstance().then(
|
|
(prefs) => prefs.setString(
|
|
lastStreamQualityKey(videoStore.userLogin),
|
|
quality,
|
|
),
|
|
);
|
|
Navigator.pop(context);
|
|
},
|
|
),
|
|
),
|
|
// Qualities the broadcaster offers only to subscribers
|
|
// (from the playback token's restricted_bitrates).
|
|
...videoStore.restrictedStreamQualities.map(
|
|
(quality) => ListTile(
|
|
enabled: false,
|
|
title: Text(quality),
|
|
subtitle: const Text('Subscribers only'),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
},
|
|
);
|
|
|
|
final refreshButton = Tooltip(
|
|
message: 'Refresh',
|
|
preferBelow: false,
|
|
child: IconButton(
|
|
icon: Icon(
|
|
Icons.refresh_rounded,
|
|
color: surfaceColor,
|
|
shadows: kOverlayShadow,
|
|
),
|
|
onPressed: videoStore.handleRefresh,
|
|
),
|
|
);
|
|
|
|
final fullScreenButton = Observer(
|
|
builder: (_) => Tooltip(
|
|
message: videoStore.settingsStore.fullScreen
|
|
? 'Exit fullscreen mode'
|
|
: 'Enter fullscreen mode',
|
|
preferBelow: false,
|
|
child: IconButton(
|
|
icon: Icon(
|
|
videoStore.settingsStore.fullScreen
|
|
? Icons.fullscreen_exit_rounded
|
|
: Icons.fullscreen_rounded,
|
|
color: surfaceColor,
|
|
shadows: kOverlayShadow,
|
|
),
|
|
onPressed: () => videoStore.settingsStore.fullScreen =
|
|
!videoStore.settingsStore.fullScreen,
|
|
),
|
|
),
|
|
);
|
|
|
|
final rotateButton = Tooltip(
|
|
message: context.isPortrait
|
|
? 'Enter landscape mode'
|
|
: 'Exit landscape mode',
|
|
preferBelow: false,
|
|
child: IconButton(
|
|
icon: Icon(
|
|
Icons.screen_rotation_rounded,
|
|
color: surfaceColor,
|
|
shadows: kOverlayShadow,
|
|
),
|
|
onPressed: () async {
|
|
if (context.isPortrait) {
|
|
// Detect physical device tilt to rotate to optimal orientation
|
|
final physicalOrientation =
|
|
await NativeDeviceOrientationCommunicator().orientation(
|
|
useSensor: true,
|
|
);
|
|
|
|
// Map native orientation to Flutter's DeviceOrientation
|
|
// iOS: native landscapeLeft = notch left, needs swap to Flutter's landscapeRight
|
|
// Android: direct mapping works correctly
|
|
final needsSwap = Platform.isIOS;
|
|
|
|
if (physicalOrientation == NativeDeviceOrientation.landscapeLeft) {
|
|
SystemChrome.setPreferredOrientations([
|
|
needsSwap
|
|
? DeviceOrientation.landscapeRight
|
|
: DeviceOrientation.landscapeLeft,
|
|
]);
|
|
} else if (physicalOrientation ==
|
|
NativeDeviceOrientation.landscapeRight) {
|
|
SystemChrome.setPreferredOrientations([
|
|
needsSwap
|
|
? DeviceOrientation.landscapeLeft
|
|
: DeviceOrientation.landscapeRight,
|
|
]);
|
|
} else {
|
|
// Not tilted to landscape yet, allow both
|
|
SystemChrome.setPreferredOrientations([
|
|
DeviceOrientation.landscapeLeft,
|
|
DeviceOrientation.landscapeRight,
|
|
]);
|
|
}
|
|
} else {
|
|
SystemChrome.setPreferredOrientations([
|
|
DeviceOrientation.portraitUp,
|
|
]);
|
|
SystemChrome.setPreferredOrientations([]);
|
|
}
|
|
},
|
|
),
|
|
);
|
|
|
|
return Observer(
|
|
builder: (context) {
|
|
final streamInfo = videoStore.streamInfo;
|
|
final offlineChannelInfo = videoStore.offlineChannelInfo;
|
|
|
|
final topGradient = _overlayGradient(fromTop: true);
|
|
final bottomGradient = _overlayGradient(fromTop: false);
|
|
|
|
if (streamInfo == null) {
|
|
return Stack(
|
|
children: [
|
|
// Top gradient behind top cluster
|
|
Positioned(
|
|
top: 0,
|
|
left: 0,
|
|
right: 0,
|
|
height: 100, // Covers top area around controls (extended)
|
|
child: Container(decoration: topGradient),
|
|
),
|
|
// Bottom gradient behind bottom cluster
|
|
Positioned(
|
|
bottom: 0,
|
|
left: 0,
|
|
right: 0,
|
|
height: 80, // Covers bottom area around controls
|
|
child: Container(decoration: bottomGradient),
|
|
),
|
|
// Content
|
|
Stack(
|
|
children: [
|
|
Row(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Expanded(
|
|
child: Padding(
|
|
padding: const EdgeInsets.symmetric(vertical: 8),
|
|
child: Row(
|
|
children: [
|
|
backButton,
|
|
if (offlineChannelInfo != null)
|
|
Flexible(
|
|
child: StreamInfoBar(
|
|
offlineChannelInfo: offlineChannelInfo,
|
|
displayName: chatStore.displayName,
|
|
showUptime: false,
|
|
showViewerCount: false,
|
|
textColor: surfaceColor,
|
|
isOffline: true,
|
|
isInSharedChatMode:
|
|
chatStore.isInSharedChatMode,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
if (videoStore.settingsStore.fullScreen &&
|
|
context.isLandscape)
|
|
chatOverlayButton,
|
|
],
|
|
),
|
|
Align(
|
|
alignment: Alignment.bottomRight,
|
|
child: Row(
|
|
mainAxisAlignment: MainAxisAlignment.end,
|
|
children: [
|
|
refreshButton,
|
|
// On iPad, hide the rotate button on the overlay
|
|
// Flutter doesn't allow programmatic rotation on iPad unless multitasking is disabled.
|
|
if (!isIPad()) rotateButton,
|
|
if (context.isLandscape) fullScreenButton,
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
],
|
|
);
|
|
}
|
|
|
|
return Stack(
|
|
children: [
|
|
// Top gradient behind top cluster
|
|
Positioned(
|
|
top: 0,
|
|
left: 0,
|
|
right: 0,
|
|
height: 100, // Covers top area around controls (extended)
|
|
child: Container(decoration: topGradient),
|
|
),
|
|
// Bottom gradient behind bottom cluster
|
|
Positioned(
|
|
bottom: 0,
|
|
left: 0,
|
|
right: 0,
|
|
height: 80, // Covers bottom area around controls
|
|
child: Container(decoration: bottomGradient),
|
|
),
|
|
// Content
|
|
Stack(
|
|
children: [
|
|
Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Expanded(
|
|
child: Padding(
|
|
padding: const EdgeInsets.symmetric(vertical: 8),
|
|
child: Row(
|
|
children: [
|
|
backButton,
|
|
Flexible(
|
|
child: Observer(
|
|
builder: (context) => StreamInfoBar(
|
|
streamInfo: streamInfo,
|
|
showUptime: false,
|
|
showViewerCount: false,
|
|
textColor: surfaceColor,
|
|
isInSharedChatMode:
|
|
chatStore.isInSharedChatMode,
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
if (videoStore.settingsStore.fullScreen &&
|
|
context.isLandscape)
|
|
chatOverlayButton,
|
|
if (!Platform.isIOS ||
|
|
isIPad() ||
|
|
videoStore is NativeVideoStore)
|
|
videoSettingsButton,
|
|
],
|
|
),
|
|
if (!videoStore.loading)
|
|
Center(
|
|
child: Tooltip(
|
|
message: videoStore.paused ? 'Play' : 'Pause',
|
|
preferBelow: false,
|
|
child: IconButton(
|
|
iconSize: 56,
|
|
icon: Icon(
|
|
videoStore.paused
|
|
? Icons.play_arrow_rounded
|
|
: Icons.pause_rounded,
|
|
color: surfaceColor,
|
|
shadows: [
|
|
Shadow(
|
|
offset: const Offset(0, 3),
|
|
blurRadius: 8,
|
|
color: Colors.black.withValues(alpha: 0.6),
|
|
),
|
|
],
|
|
),
|
|
onPressed: videoStore.handlePausePlay,
|
|
),
|
|
),
|
|
),
|
|
Align(
|
|
alignment: Alignment.bottomLeft,
|
|
child: Row(
|
|
crossAxisAlignment: CrossAxisAlignment.end,
|
|
children: [
|
|
Expanded(
|
|
child: Padding(
|
|
padding: const EdgeInsets.symmetric(
|
|
horizontal: 12,
|
|
vertical: 10,
|
|
),
|
|
child: Row(
|
|
spacing: 8,
|
|
children: [
|
|
Tooltip(
|
|
message: 'Stream uptime',
|
|
preferBelow: false,
|
|
triggerMode: TooltipTriggerMode.tap,
|
|
child: Row(
|
|
spacing: 6,
|
|
children: [
|
|
const LiveIndicator(),
|
|
Uptime(
|
|
startTime: streamInfo.startedAt,
|
|
style: TextStyle(
|
|
color: surfaceColor,
|
|
fontWeight: FontWeight.w500,
|
|
shadows: kOverlayShadow,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
Tooltip(
|
|
message: 'Viewer count',
|
|
preferBelow: false,
|
|
child: GestureDetector(
|
|
onTap: () =>
|
|
showModalBottomSheetWithProperFocus(
|
|
isScrollControlled: true,
|
|
context: context,
|
|
builder: (context) => GestureDetector(
|
|
onTap: FocusScope.of(context).unfocus,
|
|
child: ChattersList(
|
|
chatDetailsStore:
|
|
chatStore.chatDetailsStore,
|
|
chatStore: chatStore,
|
|
userLogin: streamInfo.userLogin,
|
|
),
|
|
),
|
|
),
|
|
child: Row(
|
|
spacing: 4,
|
|
children: [
|
|
Icon(
|
|
Icons.visibility,
|
|
size: 14,
|
|
shadows: kOverlayShadow,
|
|
color: surfaceColor,
|
|
),
|
|
Text(
|
|
NumberFormat().format(
|
|
videoStore.streamInfo?.viewerCount,
|
|
),
|
|
style: TextStyle(
|
|
color: surfaceColor,
|
|
fontWeight: FontWeight.w500,
|
|
fontFeatures: const [
|
|
FontFeature.tabularFigures(),
|
|
],
|
|
shadows: kOverlayShadow,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
if (settingsStore.showLatency)
|
|
Tooltip(
|
|
message: 'Latency to broadcaster',
|
|
preferBelow: false,
|
|
triggerMode: TooltipTriggerMode.tap,
|
|
child: Row(
|
|
spacing: 4,
|
|
children: [
|
|
Icon(
|
|
Icons.speed_rounded,
|
|
size: 14,
|
|
color: surfaceColor,
|
|
shadows: kOverlayShadow,
|
|
),
|
|
Observer(
|
|
builder: (context) => Text(
|
|
videoStore.latency ?? '—',
|
|
style: TextStyle(
|
|
color: surfaceColor,
|
|
fontWeight: FontWeight.w500,
|
|
fontFeatures: const [
|
|
FontFeature.tabularFigures(),
|
|
],
|
|
shadows: kOverlayShadow,
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
Builder(
|
|
builder: (_) {
|
|
// On iOS, show toggle behavior. On Android, always show enter PiP.
|
|
final isIOS = Platform.isIOS;
|
|
final showExitState = isIOS && videoStore.isInPipMode;
|
|
|
|
return Tooltip(
|
|
message: showExitState
|
|
? 'Exit picture-in-picture'
|
|
: 'Enter picture-in-picture',
|
|
preferBelow: false,
|
|
child: IconButton(
|
|
icon: Icon(
|
|
showExitState
|
|
? Icons.picture_in_picture_alt_outlined
|
|
: Icons.picture_in_picture_alt_rounded,
|
|
color: surfaceColor,
|
|
shadows: kOverlayShadow,
|
|
),
|
|
onPressed: videoStore.togglePictureInPicture,
|
|
),
|
|
);
|
|
},
|
|
),
|
|
refreshButton,
|
|
// On iPad, hide the rotate button on the overlay
|
|
// Flutter doesn't allow programmatic rotation on iPad unless multitasking is disabled.
|
|
if (!isIPad()) rotateButton,
|
|
if (context.isLandscape) fullScreenButton,
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
],
|
|
);
|
|
},
|
|
);
|
|
}
|
|
}
|