adjust quality monitor ui

Signed-off-by: 21pages <pages21@163.com>
This commit is contained in:
21pages 2023-01-30 21:40:13 +08:00
parent 00a3b04aab
commit 61389bc11f
2 changed files with 40 additions and 34 deletions

View File

@ -1,3 +1,4 @@
import 'package:auto_size_text/auto_size_text.dart';
import 'package:flutter/material.dart';
import 'package:flutter_hbb/common.dart';
import 'package:provider/provider.dart';
@ -316,44 +317,49 @@ class _DraggableState extends State<Draggable> {
}
class QualityMonitor extends StatelessWidget {
static const textStyle = TextStyle(color: MyTheme.grayBg);
final QualityMonitorModel qualityMonitorModel;
QualityMonitor(this.qualityMonitorModel);
Widget _row(String info, String? value) {
return Row(
children: [
Expanded(
flex: 8,
child: AutoSizeText(info,
style: TextStyle(color: MyTheme.grayBg),
textAlign: TextAlign.right,
maxLines: 1)),
Spacer(flex: 1),
Expanded(
flex: 8,
child: AutoSizeText(value ?? '',
style: TextStyle(color: MyTheme.grayBg), maxLines: 1)),
],
);
}
@override
Widget build(BuildContext context) => ChangeNotifierProvider.value(
value: qualityMonitorModel,
child: Consumer<QualityMonitorModel>(
builder: (context, qualityMonitorModel, child) =>
qualityMonitorModel.show
? Container(
padding: const EdgeInsets.all(8),
color: MyTheme.canvasColor.withAlpha(120),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Speed: ${qualityMonitorModel.data.speed ?? ''}",
style: textStyle,
),
Text(
"FPS: ${qualityMonitorModel.data.fps ?? ''}",
style: textStyle,
),
Text(
"Delay: ${qualityMonitorModel.data.delay ?? ''} ms",
style: textStyle,
),
Text(
"Target Bitrate: ${qualityMonitorModel.data.targetBitrate ?? ''}kb",
style: textStyle,
),
Text(
"Codec: ${qualityMonitorModel.data.codecFormat ?? ''}",
style: textStyle,
),
],
),
)
: const SizedBox.shrink()));
builder: (context, qualityMonitorModel, child) => qualityMonitorModel
.show
? Container(
constraints: BoxConstraints(maxWidth: 200),
padding: const EdgeInsets.all(8),
color: MyTheme.canvasColor.withAlpha(120),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
_row("Speed", qualityMonitorModel.data.speed ?? ''),
_row("FPS", qualityMonitorModel.data.fps ?? ''),
_row(
"Delay", "${qualityMonitorModel.data.delay ?? ''}ms"),
_row("Target Bitrate",
"${qualityMonitorModel.data.targetBitrate ?? ''}kb"),
_row("Codec", qualityMonitorModel.data.codecFormat ?? ''),
],
),
)
: const SizedBox.shrink()));
}

View File

@ -16,7 +16,7 @@ div#quality-monitor {
padding: 5px;
min-width: 150px;
color: azure;
border: solid azure;
border: 0.5px solid azure;
}
video#handler {