Merge branch 'preview'

README.md

@@ -19,7 +19,7 @@
 # 功能概览
 为保证最佳体验,设备分辨率建议在1080P及以上,并且已登录哔哩哔哩账户.
 ## 新样式
-改变顶栏的样式,并有一些界面微调,适用于主站和新版播放器.暂不支持直播,相簿.
+改变顶栏的样式,并有一些界面微调,适用于主站,新版播放器和直播间.暂不支持相簿.
 ### 效果
 ![主站](images/new-navbar.png)
 ![播放](images/new-navbar-stardust.png)
@@ -42,6 +42,7 @@
 - 个人空间
 - 消息中心
 - 搜索
+- 直播间
 
 之后会陆续添加其他页面,不支持推广板块(会被`删除广告`功能去除的部分).
 #### 启用前
@@ -96,25 +97,75 @@
 将稍后再看的链接重定向为普通播放网址,以使用新版播放页面.
 ## 隐藏热搜词
 将搜索框的热搜词替换为`搜索`.
+## 全屏修复
+修复点击全屏按钮无响应的问题.
+
+点击全屏时, b站的源代码中会检查浏览器是否为`Chrome XX.X.XXX5.1`和`window.Element`是否包含`ALLOW_KEYBOARD_INPUT`属性, 然后向`requsetFullscreen`传递不同的参数. 而部分浏览器不允许向此API传参数, 全屏操作就会失败.
+
+附:视频全屏代码
+```js
+request: function(c) {
+    var f = d.requestFullscreen;
+    c = c || document.documentElement;
+    if (/5\.1[\.\d]* Safari/.test(navigator.userAgent))
+        c[f]();
+    else
+        try {
+            var b = Element;
+            c[f](g && b.ALLOW_KEYBOARD_INPUT)
+        } catch (e) {
+            c[f]()
+        }
+},
+```
+直播间全屏代码
+```js
+b.request = function(b) {
+    var a = c.requestFullscreen;
+    b = b || document.documentElement;
+    if (/5\.1[\.\d]* Safari/.test(window.navigator.userAgent))
+        b[a]();
+    else {
+        var g = Element
+            , d = !1;
+        g && "ALLOW_KEYBOARD_INPUT"in g && g.ALLOW_KEYBOARD_INPUT && (d = !0);
+        b[a](d)
+    }
+}
+```
+## 直播间
+### 缩放看板娘
+根据屏幕DPI缩放看板娘的大小以提高像素的清晰度.
+### 删除直播水印
+删除观看直播时角落的水印.
 
 # 设置
 脚本启用后,在网页左侧中央会有一个齿轮图标,点击即可打开设置.
 
 **设置保存后,需要刷新网页才能生效.**
 ![设置](images/gui-settings.png)
 ## 默认值
+### 样式
 - 新样式: `开启`
     - 自定义颜色: `浅蓝色(#00A0D8)`
     - 顶栏(对横幅)不透明度: `0.382`
     - 夜间模式: `关闭`
     - 搜索栏位置调整: `开启`
         - 显示顶部横幅: `开启`
-- 顶栏触摸优化: `关闭`
-- 播放器触摸支持: `关闭`
+### 工具
 - 自动展开弹幕列表: `开启`
 - 删除广告: `开启`
 - 稍后再看重定向: `开启`
 - 隐藏热搜词: `关闭`
+- 全屏修复: `关闭`
+### 直播间
+- 缩放看板娘: `开启`
+- 删除直播水印: `开启`
+### 触摸
+- 顶栏触摸优化: `关闭`
+- 播放器触摸支持: `关闭`
+    - 启用实验性动画效果: `关闭`
+    > 因为部分浏览器对包含实验性效果的动画没有优化会很卡, 所以开放此选项.
 
 # 关于新版播放器
 目前新版播放器不是默认开启的,可在旧版播放页面右侧找到入口.
@@ -129,11 +180,9 @@
 - 触摸调整框的背景模糊效果无效.
 - 触摸调整的进度预览有弹跳现象.(来自`transition: all 0.2s;`. 短时间内总是从原数值开始变化,而不是当前数值)
 ## ![Edge:部分兼容](https://img.shields.io/badge/Edge-部分兼容-yellow.svg?style=flat-square&colorB=1976D2)
-- 自定义颜色与滚动条样式无效.
-- 部分半透明颜色(`#rrggbbaa`)无效*.
+- 滚动条样式无效.
+- 由于Edge的CSS渲染bug(主要集中在`filter`和`color`), 部分自定义颜色错乱.
 - 顶栏触摸体验不佳.
 - 触摸功能需要手动在`about:flags`中开启.
-
-*Edge将考虑用`rgba()`实现半透明颜色.
 ## ![Safari:未知](https://img.shields.io/badge/Safari-未知-lightgrey.svg?style=flat-square&colorB=323232)
 尚未在Safari中测试.

bilibili-evolved.preview.user.js

@@ -1,6 +1,6 @@
 // ==UserScript==
 // @name         Bilibili Evolved (Preview)
-// @version      1.1.1
+// @version      1.1.5
 // @description  增强哔哩哔哩Web端体验. (预览版分支)
 // @author       Grant Howard
 // @match        *://*.bilibili.com/*
@@ -20,8 +20,12 @@
 {
     const $ = unsafeWindow.$ || self$;
     const settings = {
+        fixFullscreen: false,
+        removeLiveWatermark: true,
+        harunaScale: true,
         removeAds: true,
         hideTopSearch: false,
+        touchVideoPlayerAnimation: false,
         touchNavBar: false,
         touchVideoPlayer: false,
         watchLaterRedirect: true,
@@ -114,15 +118,66 @@
         {
             return this.hexToRgb(this.hex);
         }
+        getHexRegex(alpha, shorthand)
+        {
+            const repeat = shorthand ? "" : "{2}";
+            const part = `([a-f\\d]${repeat})`;
+            const count = alpha ? 4 : 3;
+            const pattern = `#?${part.repeat(count)}`;
+            return new RegExp(pattern, "ig");
+        }
+        _hexToRgb(hex, alpha)
+        {
+            const isShortHand = hex.length < 6;
+            if (isShortHand)
+            {
+                const shorthandRegex = this.getHexRegex(alpha, true);
+                hex = hex.replace(shorthandRegex, function ()
+                {
+                    let result = "";
+                    let i = 1;
+                    while (arguments[i])
+                    {
+                        result += arguments[i].repeat(2);
+                        i++;
+                    }
+                    return result;
+                });
+            }
+
+            const regex = this.getHexRegex(alpha, false);
+            const regexResult = regex.exec(hex);
+            if (regexResult)
+            {
+                const color = {
+                    r: parseInt(regexResult[1], 16),
+                    g: parseInt(regexResult[2], 16),
+                    b: parseInt(regexResult[3], 16)
+                };
+                if (regexResult[4])
+                {
+                    color.a = parseInt(regexResult[4], 16) / 255;
+                }
+                return color;
+            }
+            else if (alpha)
+            {
+                const rgb = this._hexToRgb(hex, false);
+                if (rgb)
+                {
+                    rgb.a = 1;
+                    return rgb;
+                }
+            }
+            return null;
+        }
         hexToRgb(hex)
         {
-            const regex = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-            const color = regex ? {
-                r: parseInt(regex[1], 16),
-                g: parseInt(regex[2], 16),
-                b: parseInt(regex[3], 16)
-            } : undefined;
-            return color;
+            return this._hexToRgb(hex, false);
+        }
+        hexToRgba(hex)
+        {
+            return this._hexToRgb(hex, true);
         }
         rgbToHsb(rgb)
         {
@@ -218,7 +273,7 @@
     {
         constructor()
         {
-            // Offline build placeholder
+            // [Offline build placeholder]
             this.data = {};
             this.attributes = {};
             this.color = new ColorProcessor(settings.customStyleColor);
@@ -249,7 +304,10 @@
                 expandDanmakuList: "utils/expand-danmaku.min.js",
                 removeAds: "utils/remove-promotions.min.js",
                 watchLaterRedirect: "utils/watchlater.min.js",
-                hideTopSearch: "utils/hide-top-search.min.js"
+                hideTopSearch: "utils/hide-top-search.min.js",
+                harunaScale: "live/haruna-scale.min.js",
+                removeLiveWatermark: "live/remove-watermark.min.js",
+                fixFullscreen: "utils/fix-fullscreen.min.js"
             };
             for (const key in urls)
             {
@@ -264,11 +322,36 @@
         fetch(callback)
         {
             this.callback = callback;
-            const replaceCustomColor = (style) =>
+            const replaceCustomColor = (url, style) =>
             {
-                for (const key of Object.keys(settings))
+                if (url.indexOf(".scss") !== -1 || url.indexOf(".css") !== -1)
                 {
-                    style = style.replace(new RegExp("\\$" + key, "g"), settings[key]);
+                    const hexToRgba = text =>
+                    {
+                        const replaceColor = (text, shorthand) =>
+                        {
+                            const part = `([a-f\\d]${shorthand ? "" : "{2}"})`.repeat(4);
+                            return text.replace(new RegExp(`(#${part})[^a-f\\d]`, "ig"), (original, it) =>
+                            {
+                                const rgba = this.color.hexToRgba(it);
+                                if (rgba)
+                                {
+                                    return `rgba(${rgba.r},${rgba.g},${rgba.b},${rgba.a})${original.slice(-1)}`;
+                                }
+                                else
+                                {
+                                    return original;
+                                }
+                            });
+                        };
+                        return replaceColor(replaceColor(text, false), true);
+                    };
+                    for (const key of Object.keys(settings))
+                    {
+                        style = style
+                            .replace(new RegExp("\\$" + key, "g"), settings[key]);
+                    }
+                    style = hexToRgba(style);
                 }
                 return style;
             };
@@ -280,14 +363,7 @@
                 const url = urls[key];
                 this.ajax(url, data =>
                 {
-                    if (url.indexOf(".scss") !== -1)
-                    {
-                        this.data[key] = replaceCustomColor(data);
-                    }
-                    else
-                    {
-                        this.data[key] = data;
-                    }
+                    this.data[key] = replaceCustomColor(url, data);
                     downloadedCount++;
                     if (downloadedCount >= resourceCount)
                     {
@@ -308,7 +384,7 @@
         {
             if ($(`#${id}`).length === 0)
             {
-                $("html").prepend(this.getStyle(key, id));
+                $("head").prepend(this.getStyle(key, id));
             }
         }
         apply()