copilot/frosty
1
0
Fork 0
Code Issues Pull requests Projects Releases 11 Packages Wiki Activity Actions

Fix incorrect video overlay state when playing

Browse source
This commit is contained in:
Tommy Chow 2022-05-25 14:19:33 -04:00
parent 9f691a7b12
commit c4a9b584e1
4 changed files with 85 additions and 79 deletions
Download patch file Download diff file Expand all files Collapse all files

12
lib/screens/channel/stores/video_store.dart
View file

@ -32,7 +32,7 @@ abstract class VideoStoreBase with Store {
var timeRemaining = const Duration();
@readonly
var _paused = true;
var _paused = false;
@readonly
var _overlayVisible = true;
@ -52,7 +52,10 @@ abstract class VideoStoreBase with Store {
),
JavascriptChannel(
name: 'Play',
onMessageReceived: (message) => _paused = false,
onMessageReceived: (message) {
_paused = false;
controller?.runJavascript('document.getElementsByTagName("video")[0].muted = false;');
},
),
};
@ -75,6 +78,7 @@ abstract class VideoStoreBase with Store {
try {
if (_paused) {
controller?.runJavascript('document.getElementsByTagName("video")[0].play();');
controller?.runJavascript('document.getElementsByTagName("video")[0].muted = false;');
} else {
controller?.runJavascript('document.getElementsByTagName("video")[0].pause();');
}
@ -106,8 +110,9 @@ abstract class VideoStoreBase with Store {
} catch (e) {
debugPrint(e.toString());
_streamInfo = null;
_overlayTimer.cancel();
_streamInfo = null;
_paused = true;
}
}
@ -151,7 +156,6 @@ abstract class VideoStoreBase with Store {
try {
controller?.runJavascript('document.getElementsByTagName("video")[0].addEventListener("pause", () => Pause.postMessage("video paused"));');
controller?.runJavascript('document.getElementsByTagName("video")[0].addEventListener("play", () => Play.postMessage("video playing"));');
controller?.runJavascript('document.getElementsByTagName("video")[0].muted = false;');
} catch (e) {
debugPrint(e.toString());
}

106
lib/screens/channel/video/video_overlay.dart
View file

@ -156,61 +156,61 @@ class VideoOverlay extends StatelessWidget {
onPressed: () => _showSleepTimerDialog(context),
);
final streamInfo = videoStore.streamInfo;
if (streamInfo == null) {
return Stack(
children: [
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
backButton,
const Spacer(),
settingsButton,
],
),
Align(
alignment: Alignment.bottomRight,
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
if (videoStore.settingsStore.fullScreen && orientation == Orientation.landscape) chatOverlayButton,
refreshButton,
if (orientation == Orientation.landscape) fullScreenButton,
],
),
),
],
);
}
final streamerName = regexEnglish.hasMatch(streamInfo.userName) ? streamInfo.userName : '${streamInfo.userName} (${streamInfo.userLogin})';
final streamer = Row(
children: [
ProfilePicture(
userLogin: streamInfo.userLogin,
radius: 10.0,
),
const SizedBox(width: 5.0),
Flexible(
child: Tooltip(
message: streamerName,
preferBelow: false,
child: Text(
streamerName,
style: const TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
color: Colors.white,
),
overflow: TextOverflow.ellipsis,
),
),
),
],
);
return Observer(
builder: (context) {
final streamInfo = videoStore.streamInfo;
if (streamInfo == null) {
return Stack(
children: [
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
backButton,
const Spacer(),
settingsButton,
],
),
Align(
alignment: Alignment.bottomRight,
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
if (videoStore.settingsStore.fullScreen && orientation == Orientation.landscape) chatOverlayButton,
refreshButton,
if (orientation == Orientation.landscape) fullScreenButton,
],
),
),
],
);
}
final streamerName = regexEnglish.hasMatch(streamInfo.userName) ? streamInfo.userName : '${streamInfo.userName} (${streamInfo.userLogin})';
final streamer = Row(
children: [
ProfilePicture(
userLogin: streamInfo.userLogin,
radius: 10.0,
),
const SizedBox(width: 5.0),
Flexible(
child: Tooltip(
message: streamerName,
preferBelow: false,
child: Text(
streamerName,
style: const TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
color: Colors.white,
),
overflow: TextOverflow.ellipsis,
),
),
),
],
);
return Stack(
children: [
Row(

32
lib/screens/channel/video_chat.dart
View file

@ -71,6 +71,8 @@ class _VideoChatState extends State<VideoChat> {
videoStore: _videoStore,
);
final overlay = VideoOverlay(videoStore: _videoStore);
final video = GestureDetector(
onLongPress: _videoStore.handleToggleOverlay,
onTap: () {
@ -90,24 +92,20 @@ class _VideoChatState extends State<VideoChat> {
return Stack(
children: [
player,
Observer(
builder: (_) {
if (_videoStore.paused) return VideoOverlay(videoStore: _videoStore);
return Observer(
builder: (_) => AnimatedOpacity(
opacity: _videoStore.overlayVisible ? 1.0 : 0.0,
duration: const Duration(milliseconds: 200),
child: ColoredBox(
color: const Color.fromRGBO(0, 0, 0, 0.5),
child: IgnorePointer(
ignoring: !_videoStore.overlayVisible,
child: VideoOverlay(videoStore: _videoStore),
),
),
if (_videoStore.paused || _videoStore.streamInfo == null)
overlay
else
AnimatedOpacity(
opacity: _videoStore.overlayVisible ? 1.0 : 0.0,
duration: const Duration(milliseconds: 200),
child: ColoredBox(
color: const Color.fromRGBO(0, 0, 0, 0.5),
child: IgnorePointer(
ignoring: !_videoStore.overlayVisible,
child: overlay,
),
);
},
)
),
),
],
);
}

14
lib/widgets/profile_picture.dart
View file

@ -19,11 +19,15 @@ class ProfilePicture extends StatelessWidget {
Widget build(BuildContext context) {
return FutureBuilder(
future: context.read<TwitchApi>().getUser(userLogin: userLogin, headers: context.read<AuthStore>().headersTwitch),
builder: (context, AsyncSnapshot<UserTwitch?> snapshot) {
return CircleAvatar(
radius: radius,
backgroundColor: Colors.transparent,
foregroundImage: !snapshot.hasError && snapshot.hasData ? CachedNetworkImageProvider(snapshot.data!.profileImageUrl) : null,
builder: (context, AsyncSnapshot<UserTwitch> snapshot) {
return AnimatedOpacity(
duration: const Duration(milliseconds: 500),
opacity: snapshot.data == null ? 0.0 : 1.0,
child: CircleAvatar(
radius: radius,
backgroundColor: Colors.transparent,
foregroundImage: snapshot.data != null ? CachedNetworkImageProvider(snapshot.data!.profileImageUrl) : null,
),
);
},
);