Move video overlay to new widget, add title param

This commit is contained in:
tommyxchow 2021-11-15 00:03:18 -05:00
parent df864bc511
commit 11db07a7d2
7 changed files with 139 additions and 104 deletions

View file

@ -80,8 +80,9 @@ class _SearchState extends State<Search> {
MaterialPageRoute(
builder: (_) {
return VideoChat(
userLogin: channel.broadcasterLogin,
title: channel.title,
userName: channel.displayName,
userLogin: channel.broadcasterLogin,
);
},
),

View file

@ -11,10 +11,16 @@ import 'package:frosty/widgets/video.dart';
import 'package:provider/provider.dart';
class VideoChat extends StatelessWidget {
final String userLogin;
final String title;
final String userName;
final String userLogin;
const VideoChat({Key? key, required this.userLogin, required this.userName}) : super(key: key);
const VideoChat({
Key? key,
required this.title,
required this.userName,
required this.userLogin,
}) : super(key: key);
@override
Widget build(BuildContext context) {
@ -30,10 +36,10 @@ class VideoChat extends StatelessWidget {
return AspectRatio(
aspectRatio: 16 / 9,
child: Video(
userLogin: userLogin,
title: title,
userName: userName,
userLogin: userLogin,
videoStore: VideoStore(),
settingsStore: context.read<SettingsStore>(),
),
);
}

View file

@ -39,8 +39,9 @@ abstract class _SearchStoreBase with Store {
MaterialPageRoute(
builder: (_) {
return VideoChat(
userLogin: channelInfo.broadcasterLogin,
title: channelInfo.title,
userName: channelInfo.broadcasterName,
userLogin: channelInfo.broadcasterLogin,
);
},
),

View file

@ -1,5 +1,5 @@
import 'dart:async';
import 'package:flutter/foundation.dart';
import 'dart:io';
import 'package:mobx/mobx.dart';
import 'package:webview_flutter/webview_flutter.dart';
@ -40,7 +40,6 @@ abstract class _VideoStoreBase with Store {
} else {
timer.cancel();
timer = Timer(const Duration(seconds: 5), () {
debugPrint('timer thing');
menuVisible = false;
});
@ -59,7 +58,8 @@ abstract class _VideoStoreBase with Store {
}
void requestFullscreen() {
controller.runJavascript('document.getElementsByTagName("video")[0].requestFullscreen();');
controller.runJavascript('document.getElementsByTagName("video")[0].webkitEnterFullscreen();');
Platform.isIOS
? controller.runJavascript('document.getElementsByTagName("video")[0].webkitEnterFullscreen();')
: controller.runJavascript('document.getElementsByTagName("video")[0].requestFullscreen();');
}
}

View file

@ -19,8 +19,9 @@ class StreamCard extends StatelessWidget {
MaterialPageRoute(
builder: (context) {
return VideoChat(
userLogin: streamInfo.userLogin,
title: streamInfo.title,
userName: streamInfo.userName,
userLogin: streamInfo.userLogin,
);
},
),

View file

@ -1,23 +1,21 @@
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter_mobx/flutter_mobx.dart';
import 'package:frosty/screens/settings.dart';
import 'package:frosty/stores/settings_store.dart';
import 'package:frosty/stores/video_store.dart';
import 'package:frosty/widgets/video_overlay.dart';
import 'package:webview_flutter/webview_flutter.dart';
class Video extends StatelessWidget {
final String userLogin;
final String userName;
final String title;
final VideoStore videoStore;
final SettingsStore settingsStore;
const Video({
Key? key,
required this.userLogin,
required this.title,
required this.userName,
required this.userLogin,
required this.videoStore,
required this.settingsStore,
}) : super(key: key);
@override
@ -36,93 +34,10 @@ class Video extends StatelessWidget {
videoStore.initVideo();
},
),
GestureDetector(
onTap: videoStore.handleVideoTap,
child: SizedBox.expand(
child: Observer(
builder: (_) {
return AnimatedOpacity(
opacity: videoStore.menuVisible ? 1.0 : 0.0,
duration: const Duration(milliseconds: 100),
child: ColoredBox(
color: Colors.black.withOpacity(0.5),
child: Visibility(
visible: videoStore.menuVisible,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
children: [
IconButton(
icon: const Icon(
Icons.arrow_back,
color: Colors.white,
),
onPressed: () => Navigator.of(context).pop(),
),
Text(
userName,
style: const TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
const Spacer(),
IconButton(
icon: const Icon(
Icons.settings,
color: Colors.white,
),
onPressed: () {
showModalBottomSheet(
context: context,
builder: (context) {
return Settings(settingsStore: settingsStore);
},
);
},
),
],
),
IconButton(
icon: videoStore.paused
? const Icon(
Icons.play_arrow,
color: Colors.white,
)
: const Icon(
Icons.pause,
color: Colors.white,
),
onPressed: videoStore.handlePausePlay,
),
Row(
children: [
IconButton(
icon: const Icon(
Icons.refresh,
color: Colors.white,
),
onPressed: videoStore.enterPictureInPicture,
),
const Spacer(),
IconButton(
icon: const Icon(
Icons.fullscreen,
color: Colors.white,
),
onPressed: videoStore.requestFullscreen,
)
],
)
],
),
),
),
);
},
),
),
VideoOverlay(
title: title,
userName: userName,
videoStore: videoStore,
),
],
);

View file

@ -0,0 +1,111 @@
import 'package:flutter/material.dart';
import 'package:flutter_mobx/flutter_mobx.dart';
import 'package:frosty/screens/settings.dart';
import 'package:frosty/stores/settings_store.dart';
import 'package:frosty/stores/video_store.dart';
import 'package:provider/provider.dart';
class VideoOverlay extends StatelessWidget {
final String title;
final String userName;
final VideoStore videoStore;
const VideoOverlay({
Key? key,
required this.title,
required this.userName,
required this.videoStore,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: videoStore.handleVideoTap,
child: SizedBox.expand(
child: Observer(
builder: (_) {
return AnimatedOpacity(
opacity: videoStore.menuVisible ? 1.0 : 0.0,
duration: const Duration(milliseconds: 100),
child: ColoredBox(
color: Colors.black.withOpacity(0.5),
child: Visibility(
visible: videoStore.menuVisible,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
children: [
IconButton(
icon: const Icon(
Icons.arrow_back,
color: Colors.white,
),
onPressed: () => Navigator.of(context).pop(),
),
Text(
userName,
style: const TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
const Spacer(),
IconButton(
icon: const Icon(
Icons.settings,
color: Colors.white,
),
onPressed: () {
showModalBottomSheet(
context: context,
builder: (context) {
return Settings(settingsStore: context.read<SettingsStore>());
},
);
},
),
],
),
IconButton(
icon: videoStore.paused
? const Icon(
Icons.play_arrow,
color: Colors.white,
)
: const Icon(
Icons.pause,
color: Colors.white,
),
onPressed: videoStore.handlePausePlay,
),
Row(
children: [
const Spacer(),
IconButton(
icon: const Icon(
Icons.picture_in_picture_alt_rounded,
color: Colors.white,
),
onPressed: videoStore.enterPictureInPicture,
),
IconButton(
icon: const Icon(
Icons.fullscreen,
color: Colors.white,
),
onPressed: videoStore.requestFullscreen,
)
],
)
],
),
),
),
);
},
),
),
);
}
}