mirror of
https://github.com/HChaZZY/PiliPlus.git
synced 2025-12-06 09:13:48 +08:00
feat: video seek preview
Signed-off-by: bggRGjQaUbCoE <githubaccount56556@proton.me>
This commit is contained in:
@@ -1922,6 +1922,14 @@ List<SettingsModel> get extraSettings => [
|
||||
setKey: SettingBoxKey.enableLivePhoto,
|
||||
defaultVal: true,
|
||||
),
|
||||
SettingsModel(
|
||||
settingsType: SettingsType.sw1tch,
|
||||
title: '视频进度条缩略图',
|
||||
subtitle: '滑动进度条时显示视频缩略图',
|
||||
leading: Icon(Icons.preview_outlined),
|
||||
setKey: SettingBoxKey.showSeekPreview,
|
||||
defaultVal: true,
|
||||
),
|
||||
SettingsModel(
|
||||
settingsType: SettingsType.sw1tch,
|
||||
enableFeedback: true,
|
||||
|
||||
@@ -5,8 +5,10 @@ import 'dart:typed_data';
|
||||
|
||||
import 'package:PiliPlus/common/constants.dart';
|
||||
import 'package:PiliPlus/common/widgets/segment_progress_bar.dart';
|
||||
import 'package:PiliPlus/http/init.dart';
|
||||
import 'package:PiliPlus/models/common/audio_normalization.dart';
|
||||
import 'package:PiliPlus/utils/extension.dart';
|
||||
import 'package:PiliPlus/utils/id_utils.dart';
|
||||
import 'package:PiliPlus/utils/utils.dart';
|
||||
import 'package:canvas_danmaku/canvas_danmaku.dart';
|
||||
import 'package:easy_debounce/easy_throttle.dart';
|
||||
@@ -509,6 +511,12 @@ class PlPlayerController {
|
||||
_subType = subType;
|
||||
_enableHeart = enableHeart;
|
||||
|
||||
if (showSeekPreview) {
|
||||
videoShot = null;
|
||||
showPreview.value = false;
|
||||
localPosition.value = Offset.zero;
|
||||
}
|
||||
|
||||
if (_videoPlayerController != null &&
|
||||
_videoPlayerController!.state.playing) {
|
||||
await pause(notify: false);
|
||||
@@ -1564,4 +1572,33 @@ class PlPlayerController {
|
||||
videoPlayerController?.setVideoTrack(
|
||||
_onlyPlayAudio.value ? VideoTrack.no() : VideoTrack.auto());
|
||||
}
|
||||
|
||||
late final showSeekPreview = GStorage.showSeekPreview;
|
||||
late bool _isQueryingVideoShot = false;
|
||||
Map? videoShot;
|
||||
late final RxBool showPreview = false.obs;
|
||||
late final Rx<Offset> localPosition = Offset.zero.obs;
|
||||
|
||||
void getVideoShot() async {
|
||||
if (_isQueryingVideoShot) {
|
||||
return;
|
||||
}
|
||||
_isQueryingVideoShot = true;
|
||||
dynamic res = await Request().get(
|
||||
'https://api.bilibili.com/x/player/videoshot',
|
||||
queryParameters: {
|
||||
'aid': IdUtils.bv2av(_bvid),
|
||||
'cid': _cid,
|
||||
},
|
||||
);
|
||||
if (res.data['code'] == 0) {
|
||||
videoShot = {
|
||||
'status': true,
|
||||
'data': res.data['data'],
|
||||
};
|
||||
} else {
|
||||
videoShot = {'status': false};
|
||||
}
|
||||
_isQueryingVideoShot = false;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5,7 +5,9 @@ import 'package:PiliPlus/common/widgets/segment_progress_bar.dart';
|
||||
import 'package:PiliPlus/http/loading_state.dart';
|
||||
import 'package:PiliPlus/models/common/super_resolution_type.dart';
|
||||
import 'package:PiliPlus/pages/video/detail/introduction/controller.dart';
|
||||
import 'package:PiliPlus/utils/extension.dart';
|
||||
import 'package:PiliPlus/utils/id_utils.dart';
|
||||
import 'package:cached_network_image/cached_network_image.dart';
|
||||
import 'package:easy_debounce/easy_throttle.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_smart_dialog/flutter_smart_dialog.dart';
|
||||
@@ -1090,6 +1092,7 @@ class _PLVideoPlayerState extends State<PLVideoPlayer>
|
||||
value: '${(value / max * 100).round()}%',
|
||||
// enabled: false,
|
||||
child: Stack(
|
||||
clipBehavior: Clip.none,
|
||||
alignment: Alignment.bottomCenter,
|
||||
children: [
|
||||
if (plPlayerController.viewPointList.isNotEmpty &&
|
||||
@@ -1137,35 +1140,28 @@ class _PLVideoPlayerState extends State<PLVideoPlayer>
|
||||
thumbColor: colorTheme,
|
||||
barHeight: 3.5,
|
||||
thumbRadius: draggingFixedProgressBar.value ? 7 : 2.5,
|
||||
// onDragStart: (duration) {
|
||||
// draggingFixedProgressBar.value = true;
|
||||
// feedBack();
|
||||
// _.onChangedSliderStart();
|
||||
// },
|
||||
// onDragUpdate: (duration) {
|
||||
// double newProgress = duration.timeStamp.inSeconds / max;
|
||||
// if ((newProgress - _lastAnnouncedValue).abs() > 0.02) {
|
||||
// _accessibilityDebounce?.cancel();
|
||||
// _accessibilityDebounce =
|
||||
// Timer(const Duration(milliseconds: 200), () {
|
||||
// SemanticsService.announce(
|
||||
// "${(newProgress * 100).round()}%",
|
||||
// TextDirection.ltr);
|
||||
// _lastAnnouncedValue = newProgress;
|
||||
// });
|
||||
// }
|
||||
// _.onUpdatedSliderProgress(duration.timeStamp);
|
||||
// },
|
||||
// onSeek: (duration) {
|
||||
// draggingFixedProgressBar.value = false;
|
||||
// _.onChangedSliderEnd();
|
||||
// _.onChangedSlider(duration.inSeconds.toDouble());
|
||||
// _.seekTo(Duration(seconds: duration.inSeconds),
|
||||
// type: 'slider');
|
||||
// SemanticsService.announce(
|
||||
// "${(duration.inSeconds / max * 100).round()}%",
|
||||
// TextDirection.ltr);
|
||||
// },
|
||||
onDragStart: (duration) {
|
||||
feedBack();
|
||||
plPlayerController.onChangedSliderStart();
|
||||
},
|
||||
onDragUpdate: (duration) {
|
||||
plPlayerController
|
||||
.onUpdatedSliderProgress(duration.timeStamp);
|
||||
if (plPlayerController.showPreview.value.not) {
|
||||
plPlayerController.showPreview.value = true;
|
||||
}
|
||||
plPlayerController.localPosition.value =
|
||||
duration.localPosition;
|
||||
},
|
||||
onSeek: (duration) {
|
||||
plPlayerController.showPreview.value = false;
|
||||
plPlayerController.onChangedSliderEnd();
|
||||
plPlayerController
|
||||
.onChangedSlider(duration.inSeconds.toDouble());
|
||||
plPlayerController.seekTo(
|
||||
Duration(seconds: duration.inSeconds),
|
||||
type: 'slider');
|
||||
},
|
||||
),
|
||||
if (plPlayerController.segmentList.isNotEmpty)
|
||||
Positioned(
|
||||
@@ -1196,6 +1192,13 @@ class _PLVideoPlayerState extends State<PLVideoPlayer>
|
||||
),
|
||||
),
|
||||
),
|
||||
if (plPlayerController.showSeekPreview)
|
||||
Positioned(
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 12,
|
||||
child: buildSeekPreviewWidget(plPlayerController),
|
||||
),
|
||||
],
|
||||
),
|
||||
// SlideTransition(
|
||||
@@ -1478,3 +1481,90 @@ class _PLVideoPlayerState extends State<PLVideoPlayer>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Widget buildSeekPreviewWidget(PlPlayerController plPlayerController) {
|
||||
return Obx(() {
|
||||
if (plPlayerController.showPreview.value.not) {
|
||||
return SizedBox.shrink(
|
||||
key: ValueKey(plPlayerController.localPosition.value),
|
||||
);
|
||||
}
|
||||
if (plPlayerController.videoShot == null) {
|
||||
plPlayerController.getVideoShot();
|
||||
return SizedBox.shrink(
|
||||
key: ValueKey(plPlayerController.localPosition.value),
|
||||
);
|
||||
} else if (plPlayerController.videoShot!['status'] == false) {
|
||||
return SizedBox.shrink(
|
||||
key: ValueKey(plPlayerController.localPosition.value),
|
||||
);
|
||||
}
|
||||
|
||||
return LayoutBuilder(
|
||||
key: ValueKey(plPlayerController.localPosition.value),
|
||||
builder: (context, constraints) {
|
||||
try {
|
||||
double scale = 1.5;
|
||||
// offset
|
||||
double left =
|
||||
(plPlayerController.localPosition.value.dx - 48 * scale / 2)
|
||||
.clamp(8, constraints.maxWidth - 48 * scale - 8);
|
||||
|
||||
// index
|
||||
int index = plPlayerController.sliderPositionSeconds.value ~/ 5;
|
||||
|
||||
// pageIndex
|
||||
int pageIndex = (index ~/ 100).clamp(
|
||||
0,
|
||||
(plPlayerController.videoShot!['data']['image'] as List).length,
|
||||
);
|
||||
|
||||
// alignment
|
||||
double cal(m) {
|
||||
return -1 + 2 / 9 * m;
|
||||
}
|
||||
|
||||
int align = index % 100;
|
||||
int x = align % 10;
|
||||
int y = align ~/ 10;
|
||||
double dx = cal(x);
|
||||
double dy = cal(y);
|
||||
Alignment alignment = Alignment(dx, dy);
|
||||
|
||||
// url
|
||||
String parseUrl(String url) {
|
||||
return url.startsWith('//') ? 'https:$url' : url;
|
||||
}
|
||||
|
||||
return Container(
|
||||
alignment: Alignment.centerLeft,
|
||||
padding: EdgeInsets.only(left: left),
|
||||
child: SizedBox(
|
||||
width: 48 * scale,
|
||||
height: 27 * scale,
|
||||
child: UnconstrainedBox(
|
||||
child: ClipRRect(
|
||||
borderRadius: BorderRadius.circular(4),
|
||||
child: Align(
|
||||
widthFactor: 0.1,
|
||||
heightFactor: 0.1,
|
||||
alignment: alignment,
|
||||
child: CachedNetworkImage(
|
||||
width: 480 * scale,
|
||||
height: 270 * scale,
|
||||
imageUrl: parseUrl(plPlayerController.videoShot!['data']
|
||||
['image'][pageIndex]),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
} catch (_) {
|
||||
return SizedBox.shrink(
|
||||
key: ValueKey(plPlayerController.localPosition.value),
|
||||
);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
@@ -1,11 +1,13 @@
|
||||
import 'dart:async';
|
||||
|
||||
import 'package:PiliPlus/common/widgets/segment_progress_bar.dart';
|
||||
import 'package:PiliPlus/utils/extension.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter/rendering.dart';
|
||||
import 'package:get/get.dart';
|
||||
import 'package:nil/nil.dart';
|
||||
import 'package:PiliPlus/plugin/pl_player/index.dart';
|
||||
import 'package:PiliPlus/plugin/pl_player/index.dart'
|
||||
show PlPlayerController, buildSeekPreviewWidget;
|
||||
import 'package:PiliPlus/utils/feed_back.dart';
|
||||
|
||||
import '../../../common/widgets/audio_video_progress_bar.dart';
|
||||
@@ -30,7 +32,7 @@ class BottomControl extends StatelessWidget implements PreferredSizeWidget {
|
||||
double lastAnnouncedValue = -1;
|
||||
return Container(
|
||||
color: Colors.transparent,
|
||||
height: 90,
|
||||
height: 120,
|
||||
padding: const EdgeInsets.symmetric(horizontal: 10),
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.end,
|
||||
@@ -50,6 +52,7 @@ class BottomControl extends StatelessWidget implements PreferredSizeWidget {
|
||||
value: '${(value / max * 100).round()}%',
|
||||
// enabled: false,
|
||||
child: Stack(
|
||||
clipBehavior: Clip.none,
|
||||
alignment: Alignment.bottomCenter,
|
||||
children: [
|
||||
if (controller?.viewPointList.isNotEmpty == true &&
|
||||
@@ -101,6 +104,11 @@ class BottomControl extends StatelessWidget implements PreferredSizeWidget {
|
||||
onDragUpdate: (duration) {
|
||||
double newProgress =
|
||||
duration.timeStamp.inSeconds / max;
|
||||
if (controller!.showPreview.value.not) {
|
||||
controller!.showPreview.value = true;
|
||||
}
|
||||
controller!.localPosition.value =
|
||||
duration.localPosition;
|
||||
if ((newProgress - lastAnnouncedValue).abs() > 0.02) {
|
||||
accessibilityDebounce?.cancel();
|
||||
accessibilityDebounce =
|
||||
@@ -115,6 +123,7 @@ class BottomControl extends StatelessWidget implements PreferredSizeWidget {
|
||||
.onUpdatedSliderProgress(duration.timeStamp);
|
||||
},
|
||||
onSeek: (duration) {
|
||||
controller!.showPreview.value = false;
|
||||
controller!.onChangedSliderEnd();
|
||||
controller!
|
||||
.onChangedSlider(duration.inSeconds.toDouble());
|
||||
@@ -155,6 +164,13 @@ class BottomControl extends StatelessWidget implements PreferredSizeWidget {
|
||||
),
|
||||
),
|
||||
),
|
||||
if (controller?.showSeekPreview == true)
|
||||
Positioned(
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 16,
|
||||
child: buildSeekPreviewWidget(controller!),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
|
||||
@@ -357,6 +357,9 @@ class GStorage {
|
||||
static bool get enableLivePhoto =>
|
||||
GStorage.setting.get(SettingBoxKey.enableLivePhoto, defaultValue: true);
|
||||
|
||||
static bool get showSeekPreview =>
|
||||
GStorage.setting.get(SettingBoxKey.showSeekPreview, defaultValue: true);
|
||||
|
||||
static List<double> get dynamicDetailRatio => List<double>.from(setting
|
||||
.get(SettingBoxKey.dynamicDetailRatio, defaultValue: [60.0, 40.0]));
|
||||
|
||||
@@ -585,6 +588,7 @@ class SettingBoxKey {
|
||||
searchSuggestion = 'searchSuggestion',
|
||||
showDynDecorate = 'showDynDecorate',
|
||||
enableLivePhoto = 'enableLivePhoto',
|
||||
showSeekPreview = 'showSeekPreview',
|
||||
|
||||
// Sponsor Block
|
||||
enableSponsorBlock = 'enableSponsorBlock',
|
||||
|
||||
Reference in New Issue
Block a user