feat: reduce luminosity in dark mode (#988)

lib/pages/setting/models/style_settings.dart

@@ -2,6 +2,8 @@ import 'dart:io';
 import 'dart:math';
 
 import 'package:PiliPlus/common/widgets/custom_toast.dart';
+import 'package:PiliPlus/common/widgets/dialog/dialog.dart';
+import 'package:PiliPlus/common/widgets/image/network_img_layer.dart';
 import 'package:PiliPlus/common/widgets/scroll_physics.dart';
 import 'package:PiliPlus/main.dart';
 import 'package:PiliPlus/models/common/dynamic/dynamic_badge_mode.dart';
@@ -15,6 +17,7 @@ import 'package:PiliPlus/pages/main/controller.dart';
 import 'package:PiliPlus/pages/mine/controller.dart';
 import 'package:PiliPlus/pages/setting/models/model.dart';
 import 'package:PiliPlus/pages/setting/pages/color_select.dart';
+import 'package:PiliPlus/pages/setting/slide_color_picker.dart';
 import 'package:PiliPlus/pages/setting/widgets/multi_select_dialog.dart';
 import 'package:PiliPlus/pages/setting/widgets/select_dialog.dart';
 import 'package:PiliPlus/pages/setting/widgets/slide_dialog.dart';
@@ -451,6 +454,67 @@ List<SettingsModel> get styleSettings => [
       ),
     ),
   ),
+  SettingsModel(
+    settingsType: SettingsType.normal,
+    onTap: (setState) {
+      showDialog(
+        context: Get.context!,
+        builder: (context) => AlertDialog(
+          clipBehavior: Clip.hardEdge,
+          contentPadding: const EdgeInsets.symmetric(vertical: 16),
+          title: const Text('Color Picker'),
+          content: SlideColorPicker(
+            showResetBtn: false,
+            color: Pref.reduceLuxColor ?? Colors.white,
+            callback: (Color? color) async {
+              if (color != null && color != Pref.reduceLuxColor) {
+                if (color == Colors.white) {
+                  NetworkImgLayer.reduceLuxColor = null;
+                  GStorage.setting.delete(SettingBoxKey.reduceLuxColor);
+                  SmartDialog.showToast('设置成功');
+                  setState();
+                } else {
+                  void onConfirm() {
+                    NetworkImgLayer.reduceLuxColor = color;
+                    GStorage.setting.put(
+                      SettingBoxKey.reduceLuxColor,
+                      color.toARGB32(),
+                    );
+                    SmartDialog.showToast('设置成功');
+                    setState();
+                  }
+
+                  if (color.computeLuminance() < 0.2) {
+                    await showConfirmDialog(
+                      context: context,
+                      title:
+                          '确认使用#${(color.toARGB32() & 0xFFFFFF).toRadixString(16).toUpperCase().padLeft(6)}？',
+                      content: '所选颜色过于昏暗，可能会影响图片观看',
+                      onConfirm: onConfirm,
+                    );
+                  } else {
+                    onConfirm();
+                  }
+                }
+              }
+            },
+          ),
+        ),
+      );
+    },
+    title: '深色下图片颜色叠加',
+    subtitle: '显示颜色=图片原色x所选颜色，大图查看不受影响',
+    leading: const Icon(Icons.format_color_fill_outlined),
+    getTrailing: () => Container(
+      padding: const EdgeInsets.only(right: 8.0),
+      width: 20,
+      height: 20,
+      decoration: BoxDecoration(
+        color: Pref.reduceLuxColor ?? Colors.white,
+        shape: BoxShape.circle,
+      ),
+    ),
+  ),
   SettingsModel(
     settingsType: SettingsType.normal,
     onTap: (setState) async {

lib/pages/video/view.dart

@@ -5,6 +5,7 @@ import 'dart:ui';
 
 import 'package:PiliPlus/common/constants.dart';
 import 'package:PiliPlus/common/widgets/custom_icon.dart';
+import 'package:PiliPlus/common/widgets/image/network_img_layer.dart';
 import 'package:PiliPlus/common/widgets/scroll_physics.dart';
 import 'package:PiliPlus/grpc/bilibili/main/community/reply/v1.pb.dart'
     show ReplyInfo;
@@ -50,7 +51,6 @@ import 'package:PiliPlus/utils/page_utils.dart';
 import 'package:PiliPlus/utils/storage.dart';
 import 'package:PiliPlus/utils/storage_key.dart';
 import 'package:auto_orientation/auto_orientation.dart';
-import 'package:cached_network_image/cached_network_image.dart';
 import 'package:easy_debounce/easy_throttle.dart';
 import 'package:extended_nested_scroll_view/extended_nested_scroll_view.dart';
 import 'package:floating/floating.dart';
@@ -1640,17 +1640,14 @@ class _VideoDetailPageVState extends State<VideoDetailPageV>
                 child: GestureDetector(
                   onTap: handlePlay,
                   child: Obx(
-                    () => CachedNetworkImage(
-                      imageUrl: videoDetailController.cover.value.http2https,
+                    () => NetworkImgLayer(
+                      src: videoDetailController.cover.value,
                       width: width,
                       height: height,
-                      fit: BoxFit.cover,
+                      boxFit: BoxFit.cover,
                       fadeOutDuration: const Duration(milliseconds: 120),
                       fadeInDuration: const Duration(milliseconds: 120),
-                      memCacheWidth: width.cacheSize(context),
-                      placeholder: (context, url) => Center(
-                        child: Image.asset('assets/images/loading.png'),
-                      ),
+                      forceUseCacheWidth: true,
                     ),
                   ),
                 ),