Move video overlay to new widget, add title param
This commit is contained in:
parent
df864bc511
commit
11db07a7d2
7 changed files with 139 additions and 104 deletions
|
|
@ -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,
|
||||
);
|
||||
},
|
||||
),
|
||||
|
|
|
|||
|
|
@ -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>(),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
);
|
||||
},
|
||||
),
|
||||
|
|
|
|||
|
|
@ -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();');
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
);
|
||||
},
|
||||
),
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
),
|
||||
],
|
||||
);
|
||||
|
|
|
|||
111
lib/widgets/video_overlay.dart
Normal file
111
lib/widgets/video_overlay.dart
Normal 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,
|
||||
)
|
||||
],
|
||||
)
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue