派发播放器模式切换事件 修正播放器置顶组件样式 | Dispatch player mode switching event, modify the style of the player-on-top-new

[ZiuChen]

PR Desc

之前的这个PR是为了处理body上类名的的响应问题，以便添加静态CSS，根据不同播放器模式给UP主卡片/弹幕列表应用不同的样式

但是实际写起来我发现，弹幕列表的marginTop属性并不是固定的（依据是屏幕宽度），不能像下述代码一样在静态CSS中写死：

// player-on-top-new.scss
// 播放器宽屏模式下 调整UP主信息和弹幕列表的样式
body[class*='player-mode-wide'] {
  // UP主信息
  .up-panel-container {
    margin-top: 631px; // should be dynamicly
  }

  // 弹幕列表
  #danmukuBox {
    margin-top: 0;
  }
}

// player-on-top-new/index.ts
...
  instantStyles: [
    {
      name: 'playerOnTop',
      style: () => import('./player-on-top-new.scss'),
    },
  ],
...

在B站混淆后的内联JS中找到了计算动态样式的代码，稍作修改应用到了此处，可以按照B站的规则，在不同的屏幕宽度下获得类似的marginTop结果

这里我使用CustomEvent这个接口，在播放器播放模式切换时派发全局自定义事件，根据不同的播放器模式，给UP主卡片和弹幕列表设置不同的样式

Screenshots

修改前：

在应用“播放器置顶组件后”，UP主信息被移动到了弹幕列表之下

修改后：

恢复了二者的顺序，在宽屏模式下也能正常展示

Commit Details

feat: 当播放器模式发生变化时 派发事件

• 动态创建自定义事件并通过dispatchEvent派发
• 仅在播放器模式发生变化时派发事件

feat: 播放器置顶功能根据播放器模式动态修改样式

• 监听全局事件playerModeChange 并修改样式
• 为什么不用静态CSS：弹幕列表的marginTop在不同宽度设备是不同的，具体规则并不确定，需要用JS即时获取
• 【组件开发】是否有监听播放器模式切换的API #4178

fix: 修正marginTop计算规则 增加resize的监听

• 之前是通过获取#danmukuBox原始marginTop来设置UP主信息的marginTop的
• 现在可以通过实时计算 获得目标marginTop值
• 用于计算的代码来自B站混淆后的内联JS 做了一些适应性修改

[ZiuChen]

@the1812 冲突已解决，待Merge~

[MaxHasBeenUsed]

@ZiuChen 请问有可能让该样式提早一点处理吗？体验起来是看了几秒钟视频之后标题栏突然跳到下面，分散注意力的同时也不方便播放器控件操作（调音量、调倍速、拉进度条等）。

目前粗略看来它的加载比自定义顶栏（customNavbar）要慢，所以可能有优化的空间？

Edit: #4273

[ZiuChen]

@MaxHasBeenUsed
我也遇到了这样的问题，进入新的视频页面后需要经过一段时间的动作，页面才最终稳定
目前是用JS监听事件并处理的样式与DOM顺序，JS的执行受限于脚本加载插件的顺序，不可避免的会产生延时
如果写成静态的CSS能否让样式更早的应用到页面？或者提高当前插件的执行优先级？🤔@the1812

[the1812]

• 静态的 CSS 写在 instantStyles 里可以获得较高的优先级
• 使用者在通用设置中修改功能加载模式为 同时 可以提前 JS 加载的时机