调整css为scss

CONTRIBUTING.md

@@ -65,6 +65,7 @@ pnpm install
 // @require      https://raw.githubusercontent.com/lodash/lodash/4.17.15/dist/lodash.min.js
 // @icon         https://raw.githubusercontent.com/the1812/Bilibili-Evolved/preview/images/logo-small.png
 // @icon64       https://raw.githubusercontent.com/the1812/Bilibili-Evolved/preview/images/logo.png
+// @require      file://{{ bilibili-evolved.dev.user.js的绝对路径 }}
 // ==/UserScript==
 ```
 6. 在那些 `@require` 下面再添加一行 `@require file://{{ bilibili-evolved.dev.user.js的绝对路径 }}`
@@ -73,6 +74,10 @@ pnpm install
 > macOS 例子: `@require file:///Users/xxx/Documents/Bilibili-Evolved/bilibili-evolved.dev.user.js`
 
 > 上面那些其他的 @require 跟 `src/client/common.meta.json` 里的保持一致就行, 偶尔这些依赖项会变动导致这个本地调试脚本失效, 到时候照着改一下就行.
+
+> 必须放到// ==/UserScript== 之前 不然会加载不到该脚本
+
+> 该bilibili-evolved.dev.user.js脚本 需要在vs code->终端>运行任务..->本地：编辑开发版本生成 目录为Bilibili-Evolved/dist/bilibili-evolved.dev.user.js
 7. 保存脚本, 运行 `启动开发服务 dev-server` 任务
 8. 进入 b 站, 安装 `DevClient` 组件, 功能中显示已连接时就是成功了
 

registry/lib/components/style/dark-mode/dark-fix.scss

@@ -0,0 +1,105 @@
+[class*="numberListItem_number_list_item"] {
+    background-color: #555;
+    border: 1px solid #555;
+}
+
+[class*="review_review_module"] [class*="review_module_content"] [class*="review_review_item"] [class*="review_review_item_fill"] [class*="review_review_header"] [class*="review_review_author"],
+[class*="seasonlist_season_list"] [class*="seasonlist_ss_list_wrapper"] [class*="seasonlist_ss_item"] [class*="seasonlist_ss_info"] [class*="seasonlist_ss_title"],
+[class*="review_review_module"] [class*="review_module_title"],
+[class*="mediainfo_media_info"] [class*="mediainfo_media_right"] [class*="mediainfo_media_desc"] i,
+[class*="mediainfo_media_info"] [class*="mediainfo_media_right"] [class*="mediainfo_media_desc"],
+[class*="mediainfo_media_info"] [class*="mediainfo_media_right"] [class*="mediainfo_media_title"],
+[class*="epitem_ep_item"] a,
+[class*="section_ep_section_module"] [class*="section_section_title"],
+[class*="RecommendItem_wrap"] [class*="RecommendItem_right_wrap"] [class*="RecommendItem_title"],
+[class*="eplist_ep_list_wrapper"] [class*="eplist_list_title"] [class*="eplist_left_wrap"]  h4,
+[class*="numberListItem_title"] {
+    color: #eee;
+}
+
+[class*="numberListItem_number_list_item"][class*="numberListItem_select"] {
+    border: 2px solid #747474;
+    background-color: #555;
+}
+
+[class*="numberListItem_number_list_item"][class*="numberListItem_select"] [class*="numberListItem_title"] {
+    color: #00a1d6;
+    font-weight: 700;
+}
+
+[class*="numberListItem_number_list_item"]:hover {
+    border: 2px solid #747474;
+    color: #747474
+}
+
+[class*="epitem_ep_item"]:hover {
+    background-color: #555;
+}
+
+[class*="epitem_ep_item"][class*="epitem_cursor"] {
+    background-color: #555;
+    color: #00a1d6
+}
+
+[class*="epitem_cursor"] > a {
+    color: #00a1d6
+}
+
+[class*="review_review_module"] [class*="review_module_content"] [class*="review_review_item"] [class*="review_review_item_fill"] [class*="review_review_body"] [class*="review_review_title"],
+[class*="review_review_module"] [class*="review_module_content"] [class*="review_review_item"] [class*="review_review_item_fill"] [class*="review_review_body"] [class*="review_review_content"],
+[class*="mediainfo_media_info"] [class*="mediainfo_media_right"] [class*="mediainfo_media_pub"] [class*="mediainfo_home_link"],
+[class*="mediainfo_media_info"] [class*="mediainfo_media_right"] [class*="mediainfo_media_pub"] [class*="mediainfo_av_link"],
+[class*="mediainfo_media_info"] [class*="mediainfo_media_right"] [class*="mediainfo_media_pub"] {
+    color: #aaa;
+}
+
+[class*="mediainfo_media_info"] [class*="mediainfo_media_right"] [class*="mediainfo_media_desc"] i {
+    font-weight: 700;
+}
+
+
+[class*="mediainfo_media_info"] [class*="mediainfo_media_right"] [class*="mediainfo_media_desc"] i,
+[class*="mediainfo_media_info"] [class*="mediainfo_media_right"] [class*="mediainfo_media_desc_section"] [class*="mediainfo_display_area"] [class*="mediainfo_ellipsis"] {
+    background: none;
+    color: #eee;
+    font-weight: 700;
+}
+
+[class*="operation_split_line"],
+[class*="mediainfo_media_info"] {
+    border-top: 1px solid #444;
+}
+
+[class*="review_review_module"] {
+    border-bottom: 1px solid #444
+}
+
+.bb-comment .reply-notice .notice-item {
+    background-color: #444 !important;
+}
+
+.bb-comment .comment-header .tabs-order li.on {
+    color: #eee !important;
+}
+
+.bb-comment .comment-header .tabs-order li {
+    color: #888 !important;
+}
+
+[id*="weslie-media-info-review"],
+[class^="eplist_ep_list_wrapper"],
+[id^="list_module"],
+[class*="section_ep_section_module"],
+[class*="review_review_item_fill"] {
+ background-color: #444 !important;   
+}
+
+[class*="DanmukuBox_wrap"] {
+    background: none;
+}
+
+[class*="seasonlist_season_list"] [class*="seasonlist_ss_list_wrapper"] [class*="seasonlist_expand_more"] {
+    background-color: #444;
+    color: #eee;
+}
+

registry/lib/components/style/dark-mode/dark-mode.scss

@@ -17,3 +17,4 @@
 @import "./dark-slice-17.scss";
 @import "./dark-navbar.scss";
 @import "./dark-variables.scss";
+@import "./dark-fix.scss";

registry/lib/components/video/player/auto-light/index.ts

@@ -1,44 +1,136 @@
-import { defineComponentMetadata } from '@/components/define'
 import { playerAgent } from '@/components/video/player-agent'
+import { lightOn, lightOff } from '@/components/video/player-light'
 import { videoChange } from '@/core/observer'
 import { allVideoUrls } from '@/core/utils/urls'
+import { newSwitchComponentWrapper, defineSwitchMetadata } from '@/components/switch-options'
+import { getComponentSettings } from '@/core/settings'
 
 let playerAgentInstance
 
-export const component = defineComponentMetadata({
+const CreateAnim = (): void => {
+  const biliMainHeader = document.getElementById('biliMainHeader')
+  if (biliMainHeader == null) {
+    return
+  }
+  const mstars1 = document.createElement('div')
+  mstars1.id = 'mstars1'
+  const mstars2 = document.createElement('div')
+  mstars2.id = 'mstars2'
+  biliMainHeader.appendChild(mstars1)
+  biliMainHeader.appendChild(mstars2)
+
+  // 添加一段css 样式到document最后
+  const style = document.createElement('style')
+  // generate random stars
+  function generate(numCtrl) {
+    let star = ''
+    const max = window.innerWidth * window.innerHeight
+    for (let i = 0; i < max / numCtrl; i++) {
+      const x = Math.floor(Math.random() * window.innerWidth * 1.5)
+      const y = Math.floor(Math.random() * (window.innerHeight + 2000))
+      star += `${x}px ${y}px #FFF,`
+    }
+    const x = Math.floor(Math.random() * window.innerWidth * 1.5)
+    const y = Math.floor(Math.random() * (window.innerHeight + 2000))
+    star += `${x}px ${y}px #FFF;`
+    return star
+  }
+  const starNumCtl = 400
+  const stars1Shadow = generate(starNumCtl)
+  const stars2Shadow = generate(starNumCtl * 2)
+  const stars3Shadow = generate(starNumCtl * 4)
+  const stars4Shadow = generate(starNumCtl * 8)
+  style.innerHTML = `
+  #mstars1{z-index: 1009;position: fixed;left:0px; width:1px;height:1px;background:transparent;box-shadow:${stars1Shadow};animation:animStar 50s linear infinite}
+  #mstars1:after{content:' ';position:fixed;left:0px;top:0px;width:1px;height:1px;background:transparent;box-shadow:${stars2Shadow}}
+  #mstars2{z-index: 1009;position: fixed;left:0px;width:2px;height:2px;background:transparent;box-shadow:${stars3Shadow};animation:animStar 100s linear infinite}
+  #mstars2:after{content:' ';position:fixed;left:0px;top:0px;width:2px;height:2px;background:transparent;box-shadow:${stars4Shadow}}
+  @keyframes animStar{from{transform:translateY(-200px)}to{transform:translateY(-2200px)}}
+  `
+  document.body.appendChild(style)
+}
+
+const StarAnim = (on: boolean) => {
+  // 查找id mstars1 的div
+  let mstars1 = document.getElementById('mstars1')
+  let mstars2 = document.getElementById('mstars2')
+  // 如果没有找到id biliMainHeader 的div创建2个id为 mstars1 mstars2 的div
+  if (on) {
+    if (mstars1 == null) {
+      CreateAnim()
+      mstars1 = document.getElementById('mstars1')
+      mstars2 = document.getElementById('mstars2')
+    }
+    // 设置mstars1 mstars2 visible 为true
+    mstars1.style.visibility = 'visible'
+    mstars2.style.visibility = 'visible'
+  } else if (mstars1 != null) {
+    mstars1.style.visibility = 'hidden'
+    mstars2.style.visibility = 'hidden'
+  }
+}
+
+const switchMetadata = defineSwitchMetadata({
+  name: 'simplifyOptions',
+  dimAt: 'checked',
+  switchProps: {
+    checkedIcon: 'mdi-eye-off-outline',
+    notCheckedIcon: 'mdi-eye-outline',
+  },
+  switches: {
+    anim: {
+      defaultValue: false,
+      displayName: '隐藏星光动画',
+    },
+  },
+})
+
+export const component = newSwitchComponentWrapper(switchMetadata)({
   name: 'playerAutoLight',
   displayName: '播放时自动关灯',
   urlInclude: allVideoUrls,
   tags: [componentsTags.video],
   description: {
     'zh-CN': '在视频播放时自动关灯, 暂停或结束时再自动打开.',
   },
-  entry: async () => {
+  entry: async ({ metadata }) => {
     const { isEmbeddedPlayer } = await import('@/core/utils')
-    const { lightOn, lightOff } = await import('@/components/video/player-light')
+    const { options } = getComponentSettings(metadata.name)
 
     if (isEmbeddedPlayer()) {
       return
     }
 
+    const makeLightOn = () => {
+      lightOn()
+      StarAnim(false)
+    }
+
+    const makeLightOff = () => {
+      lightOff()
+      if (!options['switch-anim']) {
+        StarAnim(true)
+      }
+    }
+
     videoChange(async () => {
       if (playerAgentInstance != null) {
         const oldVideo = await playerAgentInstance.query.video.element()
-        oldVideo.removeEventListener('ended', lightOn)
-        oldVideo.removeEventListener('pause', lightOn)
-        oldVideo.removeEventListener('play', lightOff)
+        oldVideo.removeEventListener('ended', makeLightOn)
+        oldVideo.removeEventListener('pause', makeLightOn)
+        oldVideo.removeEventListener('play', makeLightOff)
       }
 
       playerAgentInstance = playerAgent
       const video = await playerAgentInstance.query.video.element()
 
       if (playerAgentInstance.isAutoPlay()) {
-        lightOff()
+        makeLightOff()
       }
 
-      video.addEventListener('ended', lightOn)
-      video.addEventListener('pause', lightOn)
-      video.addEventListener('play', lightOff)
+      video.addEventListener('ended', makeLightOn)
+      video.addEventListener('pause', makeLightOn)
+      video.addEventListener('play', makeLightOff)
     })
   },
 })