Code Monkey home page Code Monkey logo

bilibili-uwp's Introduction

哔哩

GitHub release (latest by date) GitHub Release Date GitHub All Releases GitHub stars GitHub forks

哔哩是一款设计精美的第三方UWP应用

该版本目前停止支持,新版正在准备

项目声明

我做这个应用一方面是出于对B站的喜爱,另一方面是对自己的一个挑战。我想尝试将一款移动应用解构并移植到桌面上,这能让我对移动交互与桌面交互有更深的理解。

但该项目由于一些不可抗力,已经停止开发。不再主动尝试修复bug(除非我自己遇到),也不再开发新的功能,目前已经在 Microsoft Store 中下架。

本应用出于学习的目的进行开发,不进行任何商业相关的行为。同时尽管应用能显示4K清晰度选项,但如果你不是大会员,则片源也不会是 4K。

尽管是原生 UWP ,但应用在 ARM 设备,比如 Surface Pro X 上可能无法运行,我也不知道具体原因,可能要等有相关设备了才能测试。

应用不提供观看直播及视频下载的功能,原因固然是多方面的,但主要原因还是我没这需求。

简介

应用提供了两种显示模式:桌面模式平板模式,截图如下:

桌面模式

桌面

平板模式

平板

桌面模式适用于1080P以上的显示器,信息密度较高,由于同屏渲染资源较多,对配置要求也相对较高。

平板模式适用于小平板或者XBOX,在操作上比较适合触摸,信息密度较低,所以对配置要求也更低一些。

开发环境

开发工具 Visual Studio 2019
最低版本 Windows10 1809
目标版本 Windows10 2004

常见问题

https://www.richasy.cn/document/bilibili/qa.html

如何使用及安装

  1. 克隆项目到本地
  2. 使用 Visual Studio 2019 打开项目
  3. package.appxmanifest 中的 Package 选项卡下,重新生成一个测试证书
  4. 重新生成项目并部署

如果你要安装,请在旁边Release中下载对应你系统的压缩包,解压后右键install.ps1,根据提示进行安装。

如果出现需要手动安装证书的情况,请双击包内的证书,将其导入到本地计算机->受信任的根证书目录中,然后再走一遍应用安装流程即可。

设计思路

BiliBili是以移动应用为主的,在尝试将BiliBili移植到桌面端或平板端的时候,我会用自己浅薄的知识去尝试进行解构并重组,使之符合桌面的审美及操作逻辑。

哔哩的页面分为桌面页面、平板页面和共享页面。顾名思义,这是根据不同的模式创建的UI页面。在哔哩的UI设计中,副页(Sub)是一个非常重要的模块,由于其独立性,在桌面和平板模式中都可以使用,所以共享页面的主体就是副页,这能为我节约很多时间。

同时由于API的限制(比如根据设备返回固定的视频条目),不是所有的模块都能完成转化,所以副页就成了沟通移动应用与桌面应用的桥梁。用户能在副页中找到移动界面操作的感觉,不会有很高的迁移成本。这算是我想出来的比较优雅的解决方案了。

在整体的应用界面设计上,桌面模式是一种相对经典的Master-Detail设计思路,即左侧导航,右侧显示详情。当然,应用根据实际情况进行了一些改动,丰富了左侧的导航界面,比如将分区集成在导航栏右上角,在导航栏中显示用户信息等。

平板模式的设计思路来源于XBOX新界面的游戏详情,以及以前的WIN8卷轴式设计。在不播放视频的时候会有很大的留白(出于实际设备机能的考虑,比如我的小surface go,无力承担大量图片的渲染),在滚动方向上基本都是以横向滚动为主。为了丰富视觉表现,在选择视频后,应用的背景会变成虚化的视频封面,以提供一种相对比较*气的界面。

虽然在整体界面设计上我行我素,但对于细分控件则尽量向官方应用看齐。比如图标、动态卡片、评论等,这些控件的排版和移动界面上相差不大。这同样是为了保留一种B站的味道。

我的想法是,尽管是第三方应用,但总要让人能找到熟悉的感觉。红烧牛肉面如果换了紫色的包装,就算配料不变,那也“不是那个味儿”了;反之,只要保留了那熟悉的包装,即便logo不是康师傅,也会让人感觉“有那味儿了”。

代码说明

除了Warframe Alerting Prime,哔哩算是我写过的最大的软件了,单论结构复杂性,哔哩还犹有过之。

都是摸着石头过河,我的代码结构可能显得有些凌乱,注释也并不多,但总体结构如下:

  • BiliBili-Controls:这里存放的是一些比较特殊的控件,要么是协作者开发的,要么是我从其他地方移植过来的,当时还考虑到后续的扩展性,还单独创建了一个类库(现在嘛……杞人忧天了)
  • BiliBili-Lib:这里放着一些公共类、枚举定义以及哔哩哔哩的核心服务(在Service文件夹中)
  • BiliBili-Notification:这是一个运行时组件,用于创建后台任务,进行动态的通知提醒。原本还打算做消息通知的,出了那档子事儿就没再做了
  • BiliBili-UWP:应用主程序。主程序通过AppViewModel作为应用内的运行时状态管理器,BiliViewModel作为与BiliBili服务挂钩的处理模块来连接控件、改变状态以及管理数据。与UI有关的数据类、接口以及枚举定义等,我都放在了主项目中,而不是Lib类库里,主要还是为了调用方便以及分开来方便管理。应用创建了大量的自定义控件以及控件样式模板,这些被分别放在了ComponentsTemplate文件夹中,主题定义在Theme文件夹内。由于哔哩是一款中文应用,上面的视频基本都是中文的,所以不提供多语言配置

应用的核心播放器被命名为VideoPlayer,放在Components -> Controls文件夹中,魔改的MediaTransportControls在Models -> UI -> Others文件夹中,MTC的样式定义在Template -> Media.xaml资源字典内。

其它的基本没啥好说的了,项目文件比较多,结构也稍微复杂一些,全写到说明文件里不太现实。好在我写代码的时候喜欢用有意义的名字命名(尽管名字有时候会比较长),通过阅读代码,你应该也可以找到你想要的。

API 定义

Api.cs

鸣谢

(排名不分先后)

bilibili-uwp's People

Contributors

cnbluefire avatar dinochan avatar richasy avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

bilibili-uwp's Issues

新功能提议

建议添加判断视频可播放的分辨率,这个用bilibili的api可以做出来的
不然非常影响体验

平板模式UI问题

为什么平板的UI中间很大一部分区域都标注成文字了,视频相关反倒是只有下面一行。。。

希望加入老板键的功能并支持自定义

很希望有那种快捷键可以缩小窗口,缩小后视频自动停止播放,然后同一个键可以还原,还原后继续播放的老板键功能,不知道能否实现呢?非常想要了,摸鱼必备啊

pc端音量问题

能否出一个突破100%音量的功能,因为有些视频声音本身就小,系统声音拉满后依旧不够大,所以希望能更新一个突破100%音量的功能。
效果类似chrome插件——Volume Master能够把声音放大至600%

播放视频后无法自动锁屏和睡眠

操作系统:win10 20H2(台式)、win10 1907(平板)
在两台设备上均会出现如下问题:
在视频播放结束后,系统无法自动锁屏和睡眠,即使由播放界面返回主界面或其他界面仍存在该问题。
注:在打开应用未播放过视频时,系统可以自动锁屏和睡眠。

一些视频无法观看

可能该软件尚未对B站竖屏的视频进行支持,希望能对该种尺寸的视频提供支持,故该软件暂时无法观看尼老头的视频

关于视频区域的拖动操作逻辑 (鼠标 and 触控)

当视频处于小窗模式或是影院模式时, 我经常会通过 鼠标 去拖动窗口.
然而根据类似于PotPlayer的使用习惯, 最直观的是选中视频的任意一块区域进行拖动, 而非特意去寻找顶部状态栏去拖动 (事实上这个顶部栏在小窗及影院这些模式下还是看不见的, 从形象上也不够直观)

在视频区域拖动作为视频的快进/后退似乎应该是触摸的操作逻辑, 而非鼠标?
考虑到鼠标的精确性, 应当直接选中进度条拖动才更为合适?

对于PotPlayer这样的win32程序而言, 视频区域鼠标与触控拖动能作出有所区分的, 更符合操作的逻辑. (触控时可以快进/后退, 鼠标选中时则为窗口拖动) UWP这边不知道有没有类似接口.
直接覆写Window.Current.SetTitleBar可能会对触摸时的进度调整有影响. 那至少小窗模式下, 这种快进/后退的逻辑似乎并没有拖动来得重要?

虽然这个功能可能不会更新, 但突然想到这个还是想探讨一下.

关于视频播放后应用阻止操作系统自动锁屏和睡眠的问题

操作系统:win10 20H2(台式)、win10 1907(平板)
在两台设备上均会出现如下问题:
在视频播放结束后,系统无法自动锁屏和睡眠,即使由播放界面返回主界面或其他界面仍存在该问题。
注:在打开应用未播放过视频时,系统可以自动锁屏和睡眠。

提议

有些视频加载失败,还有些视频播放着就加载失败了,能不能在优化优化

观看番剧时, 播放至6分钟会自动卡死,

观看番剧时, 播放至6分钟会自动卡死, 其他时间段正常, 短视频正常. 不确定是否所有的长视频都有此问题.
已尝试过清除应用所有数据 恢复默认设置, 仍然存在问题.
如果可以, 希望能尝试修复一下此bug.
测试番剧: 镇魂街2 第4 5集
应用版本: 1.3.12

话题功能bug很迷

从主界面偏右上位置查看订阅的话题,目前遇到以下问题
1.有时内容与实际不符,因为我对照网页来看的。
2.评论加载有bug。

对于第二个问题,我尝试debug了1个小时,发现 Components\Controls\TopicCard.xaml.cs line:348 的最后一个参数rid经常会传入错误的数据。具体引发方法:先打开一个视频,查看评论,然后回到主页,打开一个话题,然后任意查看一个专栏,就会引起rid和doc.id不符。建议将 Components\Controls\TopicCard.xaml.cs line:348 的最后一个参数使用doc.id代替Data.desc.rid_str。

Setup CI for automatic packages build

Hello,
Thanks for your excellent project.

Could you please setup a CI pipeline to automatically build release artifacts from push, so that users can get the latest packages without need of building it from source manually.

If you're not familiar with it, I'm willing to provide help.

在使用Clash for window后无法联网

PC :win10专业版

使用代理工具clash for window魔法上网时,使用规则代理,该软件无法连接网络,希望加入网络设置选项 :比如
1:不使用任何代理
2: 使用系统代理
3: 自定义配置代理端

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.