[bugs] multi-player fixs && shaka instead dash

Author: Hiram

src/renderer/src/style/player/artplayer.css

@@ -22,7 +22,13 @@
   width: 13px !important;
 }
 
-.art-danmuku-emitter .art-danmuku-left .art-danmuku-style .art-danmuku-style-panel .art-danmuku-style-panel-inner .art-danmuku-style-panel-modes .art-danmuku-style-panel-mode.art-current {
+.art-danmuku-emitter
+  .art-danmuku-left
+  .art-danmuku-style
+  .art-danmuku-style-panel
+  .art-danmuku-style-panel-inner
+  .art-danmuku-style-panel-modes
+  .art-danmuku-style-panel-mode.art-current {
   background-color: #00e038 !important;
   border: 1px solid #00e038 !important;
 }
@@ -35,3 +41,50 @@
 .art-icon-switchOn .icon path {
   fill: #00d157 !important;
 }
+
+.art-video-player.art-setting-show .art-settings {
+  border-radius: 8px !important;
+}
+
+/* 5.1 版本弹幕 css */
+.artplayer-plugin-danmuku .apd-config .apd-config-panel .apd-config-panel-inner {
+  background: #000000bf !important;
+  backdrop-filter: saturate(180%) blur(20px) !important;
+  border-radius: 8px !important;
+}
+
+.artplayer-plugin-danmuku .apd-slider .apd-slider-progress {
+  background: linear-gradient(270deg, #00e038, #32ccff) !important;
+}
+
+.apd-slider .apd-slider-dot {
+  background: #fff !important;
+  box-shadow: 0 0 15px 0 #00d157;
+}
+
+.artplayer-plugin-danmuku .apd-toggle svg.apd-toggle-on path:nth-of-type(2) {
+  fill: #00d157 !important;
+}
+
+.artplayer-plugin-danmuku .apd-slider .apd-slider-points .apd-slider-point {
+  background-color: #fff !important;
+}
+
+.artplayer-plugin-danmuku .apd-config-other .apd-other:hover,
+.artplayer-plugin-danmuku .apd-modes .apd-mode:hover {
+  color: #00d157 !important;
+}
+
+.apd-mode svg.apd-mode-0-off path,
+.apd-mode svg.apd-mode-1-off path,
+.apd-mode svg.apd-mode-2-off path {
+  fill: #00d157 !important;
+}
+
+.apd-config-other .apd-other svg.apd-check-on path {
+  fill: #00d157 !important;
+}
+
+.artplayer-plugin-danmuku .apd-slider .apd-slider-steps .apd-slider-step {
+  color: #ddd !important;
+}

src/renderer/src/style/player/dplayer.css

@@ -44,6 +44,7 @@
 .dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-box {
   border-radius: 8px !important;
   background-color: rgba(17, 18, 20, 0.8) !important;
+  backdrop-filter: saturate(180%) blur(20px) !important;
 }
 
 .dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-item:hover,

src/renderer/src/style/player/nplayer.css

@@ -45,7 +45,7 @@
 
 .nplayer_control_volume_bars {
   background: rgba(17, 18, 20, 0.8) !important;
-  box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 20px 1px;
+  backdrop-filter: saturate(180%) blur(20px) !important;
   border-radius: 8px;
   font-size: 14px;
   height: 130px;
@@ -136,6 +136,8 @@
 .nplayer_popover-active .nplayer_popover_panel {
   border-radius: 8px;
   background-color: rgba(17, 18, 20, 0.8);
+  backdrop-filter: saturate(180%) blur(20px);
+  box-shadow: none !important;
 }
 
 .nplayer_control_setting_item:hover,
@@ -157,11 +159,30 @@
   background: #00d157 !important;
 }
 
+.nplayer_tooltip_content {
+  background: rgba(17, 18, 20, 0.8);
+  backdrop-filter: saturate(180%) blur(20px);
+  border-radius: 8px;
+}
+
+.nplayer_danmaku_reset {
+  height: 28px;
+  line-height: 28px;
+  border-radius: 14px;
+  background-color: #2b2b2b;
+  text-align: center;
+  font-size: 12px;
+}
+
 .xg-icon-setting,
 .xg-icon-danmu {
   fill: #fff;
 }
 
+svg.xgplayer-danmu-open-svg circle {
+  fill: #fff;
+}
+
 @media not all and (hover: none) {
   .nplayer_tooltip:hover {
     background: transparent !important;

src/renderer/src/utils/common/player/index.ts

@@ -2,8 +2,8 @@
  * @module multi-player
  * @brief 多播放器集成方案
  * @author HiramWong <admin@catni.cn>
- * @update 2024-06-01
- * @version 0.0.7
+ * @update 2024-06-02
+ * @version 0.0.8
  *
  * **ChangeLog说明**:
  * - 2024.5.12:
@@ -33,6 +33,9 @@
  *   - 修复mpd无法播放问题-类型映射
  *   - 修复xgplayer初始化播放器失败-plugin赋值错误
  *   - 优化mpd播放-使用shaka库替代dash库[dash库经常卡死|反复请求同一分片]
+ *   - 修复artplayer弹幕库5.1版本-参数对齐
+ *   - 修复nplayer弹幕不滚动-BulletOption中type赋值错误
+ *   - 修复dplayer弹幕控制不生效-弹幕开关控制逻辑误删
  *
  *
  * ---
@@ -122,7 +125,7 @@ const playerBarrage = async (player: any, playerMode: string, data: any, options
         color: item[color],
         text: item[content],
         time: parseInt(item[start]),
-        type: ['left', 'right'].includes(item[mode]) ? 'scroll' : item[mode],
+        type: item[mode] === 'top' || item[mode] === 'bottom' ? item[mode] : 'scroll',
         isMe: false,
         force: true,
       }));

src/renderer/src/utils/common/player/playerModule/artplayer.ts

@@ -25,7 +25,9 @@ const options = {
     artplayerPluginDanmuku({
       speed: 5,
       danmuku: [],
-      useWorker: true,
+      // useWorker: true, // 5.0.1 版本参数
+      synchronousPlayback: true, // 5.1.0 版本参数
+      emitter: false, // 5.1.0 版本参数
     }),
   ],
   icons: {
@@ -109,7 +111,7 @@ const barrge = (player: Artplayer, comments: any, url: string, id: string) => {
 const create = (options: any): Artplayer => {
   if (options.isLive) {
     delete options?.plugins;
-  };
+  }
 
   Artplayer.PLAYBACK_RATE = [0.5, 0.75, 1, 1.25, 1.5, 2];
   return new Artplayer({ ...options });

src/renderer/src/utils/common/player/playerModule/dplayer.ts

@@ -171,6 +171,20 @@ const create = (options: any): any => {
       </div>
     `,
     );
+  }
+
+  // 弹幕事件处理
+  const handleDanmuClick = () => {
+    let showDanmaku: any = document.querySelector('.dplayer-setting-showdan');
+    (player.template.showDanmakuToggle.checked = !player.template.showDanmakuToggle.checked),
+      player.template.showDanmakuToggle.checked
+        ? ((showDanmaku = !0),
+          player.danmaku.show(),
+          elementDeal.replace('.dplayer-subtitle-icon', publicIcons.openDanmu))
+        : ((showDanmaku = !1),
+          player.danmaku.hide(),
+          elementDeal.replace('.dplayer-subtitle-icon', publicIcons.closeDanmu)),
+      player.user.set('danmaku', showDanmaku ? 1 : 0);
   };
 
   const handlePipClick = () => {
@@ -186,6 +200,8 @@ const create = (options: any): any => {
 
   const pipButton = document.querySelector('.dplayer-pip-icon');
   if (pipButton) pipButton.addEventListener('click', handlePipClick);
+  const danmuButton = document.querySelector('.dplayer-subtitle-icon');
+  if (danmuButton) danmuButton.addEventListener('click', handleDanmuClick);
   return player;
 };