hanyixuanten/HyperBilibili
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

improvements: 1. 主页重构与优化，适配更多设备 2. 更新喵喵输入法 3. 升级ts-loader版本并选用es2020规范 4. 适配toolkit v2代码规范 5. 移除interconnect支持

Browse Source
This commit is contained in:
Searchstars
2024-11-09 19:39:41 +08:00
parent 2911b9c977
commit cf019de76c
11 changed files with 85 additions and 207 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app.ux
+7 -3
View File
@@ -7,7 +7,6 @@ import * as funnytips from "./funnytips"
import * as settings from "./settings"
import * as ambientlight from "./ambientlight"
import * as jumpcheck from "./jumpcheck"
import * as interconnecter from "./interconnecter"
import * as htmlparser from "./htmlparser"
import * as savedcontent from "./savedcontent"
import * as buildinfo from "./buildinfo"
@@ -19,16 +18,21 @@ export default {
settings: settings,
ambientlight: ambientlight,
jumpcheck: jumpcheck,
interconnecter: interconnecter,
articletools: articletools,
htmlparser: htmlparser,
savedcontent: savedcontent,
buildinfo: buildinfo,
DEVICE_INFO: null,
async onCreate() {
console.log("app created")
console.log("appinit > loadSettings")
settings.loadSettings()
console.log("appinit > initSavedContentManager")
await this.savedcontent.SavedContentManager.initialize()
this.biliclient = new BilibiliClient(this.settings.SETTINGS.enableInterconnectMode, this.interconnecter)
console.log("appinit > initDeviceInfo")
this.DEVICE_INFO = await this.tools.getDeviceInformation()
console.log("appinit > createBiliClient")
this.biliclient = new BilibiliClient()
},
onDestroy() {
console.log("app destroyed")
src/bilibiliclient.ts
+2 -10
View File
@@ -1,5 +1,4 @@
import { fetch, storage, crypto, prompt } from './tsimports';
import * as interconnectfetch from './interconnectfetch'
import * as eula from './eula'
// Wbi签名混淆表
@@ -59,16 +58,9 @@ class BilibiliClient {
return ("x" === name ? randomInt : 3 & randomInt | 8).toString(16).toUpperCase()
}));
constructor(interconnectMode = false, interconnecter = null) {
constructor() {
this.updateBUVID();
this.interconnect_mode = interconnectMode;
if (interconnectMode) {
this.fetch = new interconnectfetch.fetch(interconnecter);
this.interconnecter = interconnecter
}
else {
this.fetch = fetch;
}
this.fetch = fetch;
}
// 获取请求头，用于模拟正常浏览器环境，降低风控概率
src/components/FullScreenInput/FullScreenInput.ux
+1 -1
View File
@@ -46,7 +46,7 @@ export default {
},
async InitScreenType(){
if(!this.screentype){
this.screentype = (await this.$app.$def.tools.getDeviceInformation).screenShape
this.screentype = this.$app.$def.DEVICE_INFO.screenShape
}
},
onInit(){
src/components/InputMethod/InputMethod.ux
+11 -11
View File
@@ -129,7 +129,7 @@
</div>
</div>
<!-- 方屏67 -->
<div if="{{screentype==='horizontal'}}" style="width: 336px;height: 255px;">
<div if="{{screentype==='rect'}}" style="width: 336px;height: 255px;">
<div static style="position:absolute;left:0px;top:-11px;width:336px;height:276px;">
<progress percent="{{percent67}}" style="position: absolute;width:80px;top:258px;left:128px;color:#ffffff;stroke-width:6px;layer-color:#262626"></progress>
<scroll id="keyboard67" scroll-x="{{true}}" onscroll="handelScroll">
@@ -145,14 +145,14 @@
<img static src="./assets/horizontal/space.png" style="width: 60px;height: 60px;" @click="onBtnClick('space')" />
</div>
</div>
<div else style="left: 6px;width:640px;height:170px;">
<div static style="position: absolute;left: 0px;top: 0px;width: 640px;height: 60px;">
<div else style="left: 6px;width:{{Math.max(keys['sign'][0].length*64, keys['sign'][1].length*64+32, keys['sign'][2].length*64+64)}}px;height:170px;">
<div static style="position: absolute;left: 0px;top: 0px;width: {{keys['sign'][0].length*64}}px;height: 60px;">
<text class="calbtn67" for="{{item in keys['sign'][0]}}" @click="onSelect(item)">{{item}}</text>
</div>
<div static style="position: absolute;left: 32px;top: 55px;width: 576px;height: 60px;">
<div static style="position: absolute;left: 32px;top: 55px;width: {{keys['sign'][1].length*64}}px;height: 60px;">
<text class="calbtn67" for="{{item in keys['sign'][1]}}" @click="onSelect(item)">{{item}}</text>
</div>
<div static style="position: absolute;left: 64px;top: 110px;width: 516px;height: 60px;">
<div static style="position: absolute;left: 64px;top: 110px;width: {{keys['sign'][2].length*64}}px;height: 60px;">
<text class="calbtn67" for="{{item in keys['sign'][2]}}" @click="onSelect(item)">{{item}}</text>
</div>
</div>
@@ -188,7 +188,7 @@
</div>
</div>
<!-- 胶囊屏66 -->
<div if="{{screentype==='arc'}}" style="width: 192px;height: 305px">
<div if="{{screentype==='pill-shaped'}}" style="width: 192px;height: 305px">
<div static style="position:absolute;left:0px;top:34px;width:192px;height:276px;">
<progress percent="{{30+percent66}}" type="arc" style="start-angle:204deg;total-angle:-48deg;width:188px;height:188px;top:86px;left:2px;position:absolute;color:#ffffff;stroke-width:6px;layer-color:#262626"></progress>
<scroll id="keyboard66" scroll-x="{{true}}" onscroll="handelScroll">
@@ -204,14 +204,14 @@
<img static src="./assets/arc/space.png" style="width: 60px;height: 60px;" @click="onBtnClick('space')" />
</div>
</div>
<div else style="left: 3px;width:630px;height:170px;">
<div else style="left: 3px;width:660px;height:170px;">
<div static style="position: absolute;left: 0px;top: 0px;width: 630px;height: 60px;">
<text class="calbtn66" for="{{item in keys['sign'][0]}}" @click="onSelect(item)">{{item}}</text>
</div>
<div static style="position: absolute;left: 32px;top: 55px;width: 567px;height: 60px;">
<div static style="position: absolute;left: 32px;top: 55px;width: 627px;height: 60px;">
<text class="calbtn66" for="{{item in keys['sign'][1]}}" @click="onSelect(item)">{{item}}</text>
</div>
<div static style="position: absolute;left: 64px;top: 110px;width: 504px;height: 60px;">
<div static style="position: absolute;left: 64px;top: 110px;width: 564px;height: 60px;">
<text class="calbtn66" for="{{item in keys['sign'][2]}}" @click="onSelect(item)">{{item}}</text>
</div>
</div>
@@ -304,8 +304,8 @@ export default {
],
sign: [
["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"],
["~", "!", "@", "#", "%", "“", "”", "*", "?"],
["(", ")", "-", "_", ":", ";", "，", "。"],
["~", "!", "@", "#", "%", "“", "”", "*", "?", "/"],
["(", ")", "-", "_", ":", ";", "，", "。", "."],
],
sign62: [
["2", "3", "4", "5", "6", "7", "8", "9"],
src/components/TitleBar/TitleBar.ux
+1 -10
View File
@@ -1,8 +1,6 @@
<template>
<div class="titlebar" @click="RouterBack()">
<div style="width: 40px; height: 40px; position: absolute; left: 0px">
<image src="/common/icons8-back-100.png" style="width: 40px; height: 40px"></image>
</div>
<image src="/common/icons8-back-100.png" style="width: 40px; height: 40px; margin-right: 20px"></image>
<text style="font-size: 40px; font-weight: bold">{{ _parentVM.$t(title) }}</text>
</div>
</template>
@@ -19,15 +17,8 @@ export default {
<style>
.titlebar {
width: 55%;
margin-top: 45px;
align-items: center;
justify-content: center;
}
@media (width: 336) {
.titlebar {
width: 90%;
}
}
</style>
src/components/Video/Video.ux
+52 -28
View File
@@ -2,12 +2,13 @@
<template>
<div class="vid">
<div class="vidinfo">
<div class="vidpicture">
<online-image class="vidpicture_img" src="{{video.pic}}@160w_100h" alt="/common/fullgray.png"></online-image>
<div style="{{vidinfo_style}}" class="vidinfo">
<div class="vidpicture" style="{{vidpicture_style}}">
<online-image width="{{vidpicture_style['max-width']}}" height="{{vidpicture_style['max-height']}}" lock-size="true" border-radius="30px" src="{{video.pic}}@{{onlineimg_width}}w_{{onlineimg_height}}h"></online-image>
</div>
<text class="vidtitle">{{ video.title }}</text>
<text class="vidtitle" if="{{!useColumnTitle}}">{{ video.title }}</text>
</div>
<text class="vidtitle_column" if="{{useColumnTitle}}">{{ video.title }}</text>
<div class="vidstat">
<text class="upinfo">UP：{{ video.owner.name }}</text>
<div class="stat_view">
@@ -23,64 +24,87 @@
<script>
export default {
props: ["video"],
data: {
useColumnTitle: false,
vidpicture_style: {
"min-width": "160px",
"min-height": "100px",
"max-width": "160px",
"max-height": "100px"
},
onlineimg_width: "160",
onlineimg_height: "100"
},
SetOnlineImageSize(width, height){
this.vidpicture_style["min-width"] = width + "px";
this.vidpicture_style["max-width"] = width + "px";
this.vidpicture_style["min-height"] = height + "px";
this.vidpicture_style["max-height"] = height + "px";
this.onlineimg_width = width;
this.onlineimg_height = height;
},
onInit(){
if(!(this.video.pic.includes("http://") || this.video.pic.includes("https://"))){
this.video.pic = "https:" + this.video.pic
}
const deviceInfo = this.$app.$def.DEVICE_INFO;
if (deviceInfo.screenWidth <= 336 || this.video.title.length > 25){
this.useColumnTitle = true;
if (deviceInfo.screenWidth <= 336)
this.SetOnlineImageSize(200, 120);
else
this.SetOnlineImageSize(300, 150);
}
}
}
</script>
<style>
.vid {
margin-top: 10px;
padding: 15px 15px;
border-radius: 50px;
background-color: #262626af;
height: 100%;
width: 100%;
justify-content: center;
align-items: center;
flex-direction: column;
}
.vidinfo {
flex-direction: row;
height: 130px;
width: 100%;
justify-content: center;
flex-direction: row;
}
.vidpicture {
margin-left: 26px;
margin-top: 20px;
min-width: 160px;
min-height: 100px;
max-width: 160px;
max-height: 100px;
border-radius: 30px;
background-color: rgba(255, 255, 255, 0.2);
justify-content: center;
align-items: center;
}
.vidpicture_img {
min-width: 160px;
min-height: 100px;
max-width: 160px;
max-height: 100px;
border-radius: 30px;
}
.vidtitle {
margin-left: 20px;
margin-top: 20px;
padding-left: 20px;
width: 145px;
font-size: 20px;
font-weight: 600;
text-overflow: ellipsis;
}
.vidtitle_column {
margin-top: 10px;
font-size: 20px;
font-weight: 600;
width: 145px;
text-overflow: ellipsis;
}
.vidstat {
padding: 0px 10px;
margin-top: 5px;
flex-direction: row;
margin-left: 30px;
align-items: center;
align-items: flex-start;
min-width: 100%;
}
.upinfo {
@@ -92,7 +116,7 @@ export default {
.stat_view {
position: absolute;
margin-left: 230px;
right: 2px;
align-items: center;
}
src/interconnecter.ts
-87
View File
@@ -1,87 +0,0 @@
import { interconnect, prompt } from "./tsimports";
export let CONNECTION_OPEN = false;
// 生成唯一ID的工具函数
function generateUniqueId(): string {
return Math.random().toString(36).substr(2, 9);
}
interface PendingRequest {
resolve: (data: any) => void;
reject: (error: any) => void;
}
// 用于存储未完成请求的映射表
const pendingRequests: { [id: string]: PendingRequest } = {};
// 获取连接对象
const conn = interconnect.instance();
// 设置连接打开的回调
conn.onopen = () => {
console.log(`connection opened`);
setTimeout(async() => {
await sendMessage(JSON.stringify({
msgtype: "HELLO",
message: ""
}))
}, 500)
CONNECTION_OPEN = true;
};
// 设置连接关闭的回调
conn.onclose = (data) => {
console.log(`connection closed, reason = ${data.data}, code = ${data.code}`);
};
// 设置连接错误的回调
conn.onerror = (data) => {
console.log(`connection error, errMsg = ${data.data}, errCode = ${data.code}`);
};
// 处理收到消息的回调
conn.onmessage = (data) => {
const { id, response } = JSON.parse(data.data);
if (id && pendingRequests[id]) {
// 如果ID存在且匹配，则认为是对号入座的响应
pendingRequests[id].resolve(response);
// 完成请求后，删除对应的映射
delete pendingRequests[id];
} else {
console.log(`Received unrecognized message: ${data.data}`);
}
};
// 异步发送字符串并等待回应的函数
export async function sendMessage(message: string): Promise<any> {
return new Promise((resolve, reject) => {
const id = generateUniqueId();
// 将请求添加到待处理请求映射表中
pendingRequests[id] = { resolve, reject };
// 发送数据
conn.send({
data: {
id,
message,
},
success: () => {
console.log('Message sent successfully');
},
fail: (data: { data: any, code: number }) => {
prompt.showToast({
message: "interconnect通信失败：" + data.data + " 错误代码：" + data.code,
duration: 5000
})
console.log(`handling fail, errMsg = ${data.data}, errCode = ${data.code}`);
// 如果发送失败，则执行 reject
reject(new Error(`Failed to send message, errCode = ${data.code}`));
// 失败后，删除对应的映射
delete pendingRequests[id];
},
});
});
}
src/interconnectfetch.ts
-23
View File
@@ -1,23 +0,0 @@
import { prompt } from "./tsimports";
export class fetch{
private interconnecter: any;
constructor(interconnecter){
this.interconnecter = interconnecter
}
async fetch(params: any){
var result = JSON.parse(await this.interconnecter.sendMessage(JSON.stringify({
msgtype: "FETCH",
message: JSON.stringify(params)
})))
if(params.responseType === "json"){
result.data = JSON.parse(result.data)
}
return {
data: result
};
}
}
src/pages/about/about.ux
+3 -3
View File
@@ -74,7 +74,7 @@ export default {
}
.appbar {
width: 376px;
width: 81%;
height: 84px;
border-radius: 60px;
background-color: #262626;
@@ -83,7 +83,7 @@ export default {
}
.developersbar {
width: 376px;
width: 81%;
height: 155px;
border-radius: 50px;
background-color: #262626;
@@ -91,7 +91,7 @@ export default {
}
.developer {
width: 320px;
width: 69%;
flex-direction: row;
}
</style>
src/pages/introduction/introduction.ux
+1 -1
View File
@@ -39,7 +39,7 @@ export default {
}
},
async UpdateImage(){
const deviceinfo = await this.$app.$def.tools.getDeviceInformation();
const deviceinfo = this.$app.$def.DEVICE_INFO;
const shape = deviceinfo.screenShape;
this.steps = this.steps_map[shape] || [];
src/pages/main/main.ux
+7 -30
View File
@@ -3,7 +3,7 @@
<template>
<div class="page">
<image src="/common/rounddevices_bg.png"
<image if="{{this.$app.$def.DEVICE_INFO.screenShape == 'circle'}}" src="/common/rounddevices_bg.png"
style="position: absolute; transform: rotate({{ambientlight.rotatedeg}}); transform-origin: {{ambientlight.transform_origin}}; left: 0px">
</image>
<scroll scroll-y="true" class="scroll" bounces="true">
@@ -12,13 +12,8 @@
<image style="position: absolute; margin-top: 265px" if="{{show_loading}}" src="{{anims.loading_src.value}}">
</image>
<div class="recommend_div" if="{{show_recommend_div}}">
<list class="recommend_list">
<list-item type="recommend_videos" for="{{recommend_vids}}" class="recommend_listitem"
style="height: {{calcSpace($item.title, true)}}" onclick="OpenVideo({{$item.bvid}})">
<videoshow video="{{$item}}"></videoshow>
<text style="margin-top: {{calcSpace($item.title, false)}}; height: 0px"></text>
</list-item>
</list>
<videoshow for="{{recommend_vids}}" video="{{$item}}" onclick="OpenVideo({{$item.bvid}})"></videoshow>
<text style="margin-top: 25px"></text>
</div>
</scroll>
<div style="position: absolute; bottom: 0px" @click="Refresh()">
@@ -102,13 +97,6 @@ export default {
this.show_recommend_div = true
}
},
calcSpace(vid_title, isListItem) {
const isLastItem = vid_title === this.recommend_vids[this.recommend_vids.length - 1]?.title
if (isListItem) {
return isLastItem ? "270px" : "170px"
}
return isLastItem ? "80px" : "0px"
},
async checkUpdates() {
try {
const result = await this.$app.$def.biliclient.checkHyperbilibiliUpdates()
@@ -188,22 +176,11 @@ export default {
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
width: 100%;
max-width: 76%;
min-width: 76%;
}
.recommend_list {
width: 77%;
height: 100%;
}
.recommend_listitem {
height: 170px;
width: 100%;
margin-top: 5px;
display: flex;
flex-direction: column;
align-items: center;
position: absolute;
.recommend_item {
width: 300px;
}
</style>