bump 1.0.3.0 (#14)

* 主页显示视频浮窗

* 添加主页番剧浮动信息

* 添加首页导航栏

dist/manifest.json

@@ -80,5 +80,5 @@
         "declarativeNetRequest",
         "declarativeNetRequestWithHostAccess"
     ],
-    "version": "1.0.2.0"
+    "version": "1.0.3.0"
 }

scripts/arbitrary-extensions.mjs

@@ -6,7 +6,6 @@ import fs from 'fs/promises';
 /** 非代码文件所在路径 */
 const paths = [
     'src/player/assets/svg',
-    'src/main/bilibili/comment/style',
 ];
 
 for (const path of paths) {

src/main/bilibili/comment/card.ts

@@ -117,7 +117,7 @@ export class IdCard extends HTMLElement {
         if (target && !this.contains(<HTMLElement>target)) {
             const node = (<HTMLElement>target)?.closest<HTMLElement>('[data-mid]');
             if (node) {
-                const mid = node.dataset.mid;
+                const { mid } = node.dataset;
                 if (mid) {
                     const id = crypto.randomUUID();
                     node.style.setProperty('anchor-name', `--${id}`);

src/main/bilibili/comment/style/comment.css

@@ -32,7 +32,7 @@
             inline-size: 20px;
             block-size: 20px;
             inset-inline-end: 0;
-            inset-block-start: 0;
+            inset-block-end: 0;
             background-image: url(//s1.hdslb.com/bfs/static/jinkela/videoplay/asserts/user-auth.png);
             background-repeat: no-repeat;
             z-index: 3;

src/main/bilibili/home/index.ts

@@ -16,6 +16,7 @@ import { Format } from "../../../utils/fomat";
 import { https } from "../../../utils/https";
 import { Ranking } from "./ranking";
 import { Timeline } from "./timeline";
+import { VideoInfo } from "./video-info";
 
 /** 顶栏 */
 @customElement('div')
@@ -39,10 +40,14 @@ export class Home extends HTMLDivElement {
     // #inited = false;
 
     /** 每当元素添加到文档中时调用。 */
-    // connectedCallback() {}
+    connectedCallback() {
+        document.body.appendChild(this.$form);
+    }
 
     /** 每当元素从文档中移除时调用。 */
-    // disconnectedCallback() {}
+    disconnectedCallback() {
+        this.$form.remove();
+    }
 
     /** 每当元素被移动到新文档中时调用。 */
     // adoptedCallback() {}
@@ -113,6 +118,8 @@ export class Home extends HTMLDivElement {
 
     private $bili_documentary = this.appendChild(new Ranking('纪录片', '/documentary', REGION.DOCUMENTARY));
 
+    private $form = Element.add('form', { class: 'nav-form' })
+
     constructor() {
         super();
         this.insertAdjacentHTML('beforeend', `<style>${__BILI_HOME_STYLE__}</style>`);
@@ -138,6 +145,26 @@ export class Home extends HTMLDivElement {
         this.$bili_documentary.classList.add('bili-documentary');
         this.$timeline_bangumi.classList.add('timeline-bangumi');
         this.$timeline_guochuang.classList.add('timeline-guochuang');
+        this.$form.insertAdjacentHTML('afterbegin', `<label><input type="radio" name=${id} value="0" checked>直播</label>
+<label><input type="radio" name=${id} value="1">动画</label>
+<label><input type="radio" name=${id} value="2">番剧</label>
+<label><input type="radio" name=${id} value="3">国创</label>
+<label><input type="radio" name=${id} value="4">音乐</label>
+<label><input type="radio" name=${id} value="5">舞蹈</label>
+<label><input type="radio" name=${id} value="6">游戏</label>
+<label><input type="radio" name=${id} value="7">知识</label>
+<label><input type="radio" name=${id} value="8">科技</label>
+<label><input type="radio" name=${id} value="9">生活</label>
+<label><input type="radio" name=${id} value="10">鬼畜</label>
+<label><input type="radio" name=${id} value="11">时尚</label>
+<label><input type="radio" name=${id} value="12">资讯</label>
+<label><input type="radio" name=${id} value="13">娱乐</label>
+<label><input type="radio" name=${id} value="14">电影</label>
+<label><input type="radio" name=${id} value="15">电视剧</label>
+<label><input type="radio" name=${id} value="16">影视</label>
+<label><input type="radio" name=${id} value="17">纪录片</label>`)
+
+        new VideoInfo();
 
         locs(4694, 34).then(d => {
             // 主推荐滚动图
@@ -228,6 +255,85 @@ export class Home extends HTMLDivElement {
                 });
             }
         });
+        this.$form.addEventListener('change', () => {
+            const d = new FormData(this.$form);
+            const i = +[...d.values()][0];
+            switch (i) {
+                case 0: {
+                    this.$bili_live.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                    break;
+                }
+                case 1: {
+                    this.$bili_douga.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                    break;
+                }
+                case 2: {
+                    this.$timeline_bangumi.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                    break;
+                }
+                case 3: {
+                    this.$timeline_guochuang.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                    break;
+                }
+                case 4: {
+                    this.$bili_music.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                    break;
+                }
+                case 5: {
+                    this.$bili_dance.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                    break;
+                }
+                case 6: {
+                    this.$bili_game.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                    break;
+                }
+                case 7: {
+                    this.$bili_knowledge.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                    break;
+                }
+                case 8: {
+                    this.$bili_technology.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                    break;
+                }
+                case 9: {
+                    this.$bili_life.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                    break;
+                }
+                case 10: {
+                    this.$bili_kichiku.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                    break;
+                }
+                case 11: {
+                    this.$bili_fashion.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                    break;
+                }
+                case 12: {
+                    this.$bili_news.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                    break;
+                }
+                case 13: {
+                    this.$bili_ent.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                    break;
+                }
+                case 14: {
+                    this.$bili_movie.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                    break;
+                }
+                case 15: {
+                    this.$bili_tv.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                    break;
+                }
+                case 16: {
+                    this.$bili_cinephile.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                    break;
+                }
+                case 17: {
+                    this.$bili_documentary.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                    break;
+                }
+            }
+        });
+
         this.carouselPointerLeave();
     }
 

src/main/bilibili/home/ranking.ts

@@ -102,7 +102,7 @@ export class Ranking extends HTMLDivElement {
 
     private rankRegion() {
         rankingRegion(this.rid).then(d => {
-            d && ((<HTMLElement>this.$rCon.childNodes[1]).innerHTML = AV.fromStr(https(d.map((d, i) => `<div class="item"><div class="number"><span>${i + 1}</span></div>${i ? '' : `<img loading="lazy" src="${d.pic}@.webp">`}<a class="ri" target="_blank" href="/video/av${d.aid}">${d.title}</a>${i ? '' : `<div class="wl" title="稍后再看" data-aid="${d.aid}"></div>`}</div>`).join(''))));
+            d && ((<HTMLElement>this.$rCon.childNodes[1]).innerHTML = AV.fromStr(https(d.map((d, i) => `<div class="item" data-v-aid="${d.aid}"><div class="number"><span>${i + 1}</span></div>${i ? '' : `<img loading="lazy" src="${d.pic}@.webp">`}<a class="ri" target="_blank" href="/video/av${d.aid}">${d.title}</a>${i ? '' : `<div class="wl" title="稍后再看" data-aid="${d.aid}"></div>`}</div>`).join(''))));
         })
     }
 }

src/main/bilibili/home/style/index.css

@@ -710,4 +710,59 @@
 
 .timeline-guochuang>.l-con .icon-promote {
     background-position: -140px -1611px;
+}
+
+.nav-form {
+    position: fixed;
+    inset-inline-end: calc((100vi - 980px) / 2);
+    inset-block-start: 50%;
+    padding-block-start: 6px;
+    font-size: 12px;
+    background-color: #f6f9fa;
+    border: 1px solid #e5e9ef;
+    overflow: hidden;
+    border-radius: 4px;
+    border-start-end-radius: 4px;
+    border-start-start-radius: 4px;
+    translate: 150% -50%;
+    display: flex;
+    flex-direction: column;
+
+    @media screen and (min-width:1400px) {
+
+        & {
+            inset-inline-end: calc((100vi - 1160px) / 2);
+        }
+    }
+
+    @media screen and (min-width:2500px) {
+
+        & {
+            inset-inline-end: calc((100vi - 1920px) / 2);
+        }
+    }
+
+    >label {
+        block-size: 24px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        transition: background-color .3s, color .3s;
+        cursor: pointer;
+        user-select: none;
+
+        >input {
+            appearance: none;
+        }
+
+        &:hover,
+        &:has(input:checked) {
+            background-color: #00a1d6;
+            color: #fff;
+        }
+
+        &:has(input:checked) {
+            pointer-events: none;
+        }
+    }
 }

src/main/bilibili/home/style/video-info.css

@@ -0,0 +1,107 @@
+@scope {
+    :scope {
+        inset-area: block-start;
+        inline-size: 320px;
+        border: 1px solid #ccd0d7;
+        border-radius: 4px;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, .16);
+        box-sizing: border-box;
+        overflow: hidden;
+        background-color: #fff;
+        padding: 12px;
+        font-size: 12px;
+        row-gap: .75em;
+        margin: 0;
+
+        &:popover-open,
+        &:hover {
+            display: flex;
+            flex-direction: column;
+        }
+    }
+}
+
+.v-title {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    &:empty {
+        display: none;
+    }
+}
+
+.v-info {
+    color: #99a2aa;
+    display: flex;
+    column-gap: 10px;
+
+    &:empty {
+        display: none;
+    }
+}
+
+.v-preview {
+    padding-block: 8px;
+    padding-block-end: 12px;
+    border-block-end: 1px solid #e5e9ef;
+    display: flex;
+    column-gap: 8px;
+
+    >img {
+        block-size: 63px;
+    }
+
+    >p {
+        margin: 0;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 3;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        color: #99a2aa;
+        line-height: 21px;
+    }
+}
+
+.v-data {
+    display: flex;
+    column-gap: 2em;
+
+    >span {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        color: #99a2aa;
+        display: flex;
+        align-items: center;
+        column-gap: 4px;
+
+        >i {
+            display: inline-block;
+            inline-size: 12px;
+            block-size: 12px;
+            background-image: url(//static.hdslb.com/images/base/icons.png);
+        }
+
+        &.play>i {
+            background-position: -282px -90px;
+        }
+
+        &.danmu>i {
+            background-position: -282px -218px;
+        }
+
+        &.star>i {
+            background-position: -282px -346px;
+        }
+
+        &.coin>i {
+            background-position: -282px -410px;
+        }
+
+        &.play>i {
+            background-position: -282px -90px;
+        }
+    }
+}

src/main/bilibili/home/style/video-info.d.css.ts

@@ -0,0 +1,2 @@
+declare const css_video_info: string;
+export default css_video_info;

src/main/bilibili/home/timeline.ts

@@ -97,7 +97,7 @@ export class Timeline extends HTMLDivElement {
         });
 
         list(type).then(d => {
-            (<HTMLElement>this.$rCon.childNodes[1]).innerHTML = AV.fromStr(https(d.map((d, i) => `<div class="item"><div class="number"><span>${i + 1}</span></div><a class="ri-title" target="_blank" href="${d.url}">${d.title}<span class="ri-total">${d.new_ep.index_show}</span></a></div>`).join('')))
+            (<HTMLElement>this.$rCon.childNodes[1]).innerHTML = AV.fromStr(https(d.map((d, i) => `<div class="item" data-v-ssid="${d.season_id}"><div class="number"><span>${i + 1}</span></div><a class="ri-title" target="_blank" href="${d.url}">${d.title}<span class="ri-total">${d.new_ep.index_show}</span></a></div>`).join('')))
         })
     }