Web: Better home page

This commit is contained in:
genteure 2022-06-07 13:44:50 +08:00
parent c12d2c1cb0
commit 58722d1443
3 changed files with 160 additions and 163 deletions

View File

@ -0,0 +1,38 @@
using System;
using System.IO;
using System.Text;
using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.FileProviders;
namespace BililiveRecorder.Web
{
[Controller, Route("/", Name = "Home Page")]
[ApiExplorerSettings(IgnoreApi = true)]
public class IndexController : Controller
{
private static string? result;
private readonly ManifestEmbeddedFileProvider fileProvider;
public IndexController(ManifestEmbeddedFileProvider fileProvider)
{
this.fileProvider = fileProvider ?? throw new ArgumentNullException(nameof(fileProvider));
}
[HttpGet]
public ActionResult Get()
{
if (result is null)
{
using var file = this.fileProvider.GetFileInfo("/index.html").CreateReadStream();
using var reader = new StreamReader(file, Encoding.UTF8);
var html = reader.ReadToEnd();
result = html
.Replace("__VERSION__", GitVersionInformation.FullSemVer)
.Replace("__FULL_VERSION__", GitVersionInformation.InformationalVersion)
;
}
return this.Content(result, "text/html", Encoding.UTF8);
}
}
}

View File

@ -68,6 +68,8 @@ namespace BililiveRecorder.Web
.AddCors(o => o.AddDefaultPolicy(p => p.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader())) .AddCors(o => o.AddDefaultPolicy(p => p.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader()))
; ;
services.AddSingleton(new ManifestEmbeddedFileProvider(typeof(Startup).Assembly));
// Graphql API // Graphql API
GraphQL.MicrosoftDI.GraphQLBuilderExtensions.AddGraphQL(services) GraphQL.MicrosoftDI.GraphQLBuilderExtensions.AddGraphQL(services)
.AddServer(true) .AddServer(true)
@ -179,10 +181,11 @@ namespace BililiveRecorder.Web
ctp.Mappings[".mjs"] = "text/javascript; charset=utf-8"; ctp.Mappings[".mjs"] = "text/javascript; charset=utf-8";
ctp.Mappings[".json"] = "application/json; charset=utf-8"; ctp.Mappings[".json"] = "application/json; charset=utf-8";
var manifestEmbeddedFileProvider = app.ApplicationServices.GetRequiredService<ManifestEmbeddedFileProvider>();
var sharedStaticFiles = new SharedOptions() var sharedStaticFiles = new SharedOptions()
{ {
// 在运行的 exe 旁边新建一个 wwwroot 文件夹,会优先使用里面的内容,然后 fallback 到打包的资源文件 // 在运行的 exe 旁边新建一个 wwwroot 文件夹,会优先使用里面的内容,然后 fallback 到打包的资源文件
FileProvider = new CompositeFileProvider(env.WebRootFileProvider, new ManifestEmbeddedFileProvider(typeof(Startup).Assembly)), FileProvider = new CompositeFileProvider(env.WebRootFileProvider, manifestEmbeddedFileProvider),
RedirectToAppendTrailingSlash = true, RedirectToAppendTrailingSlash = true,
}; };

View File

@ -1,181 +1,137 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html class="enable-dark">
<head> <head>
<meta charset=utf-8> <meta charset=utf-8>
<meta content="width=device-width,initial-scale=1" name=viewport> <meta content="width=device-width,initial-scale=1" name=viewport>
<title>B站录播姬</title> <title>B站录播姬 __VERSION__</title>
<style> <style>
a { html {
margin: 5px font-family: -apple-system, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Microsoft YaHei", SimHei, sans-serif;
} }
textarea { @media (prefers-color-scheme: dark) {
width: 300px; html.enable-dark {
height: 200px background-color: #292a2d;
color: #eee;
}
html.enable-dark a {
color: #eee;
}
}
.links {
margin: auto;
max-width: 240px;
}
.group h2 {
margin-bottom: 0;
}
.group {
margin: 40px 0;
}
a {
text-decoration: none;
color: black;
}
.card:hover {
box-shadow: 0px 0px 8px 2px #4682b4;
}
.card {
color: black;
background: gainsboro;
margin: 5px 0;
padding: 0 10px;
border: 2px solid lightblue;
border-radius: 5px;
}
@media (min-width: 769px) {
.links {
display: flex;
justify-content: space-evenly;
max-width: 840px;
}
.card {
width: 230px;
}
}
.name {
font-size: 1.1em;
margin: 1rem 0 0 0;
}
.path {
font-family: monospace;
} }
</style> </style>
</head> </head>
<body> <body>
<h1>B站录播姬</h1> <h1 style="text-align: center">B站录播姬</h1>
<p> <p style="text-align: center;font-family:'Courier New', Courier, monospace;" title="__FULL_VERSION__">
<span style="color:red;font-weight:700">录播姬管理界面</span> __VERSION__
<a href="/ui">WebUI</a>
</p> </p>
<p> <p style="text-align: center;"><a href="https://rec.danmuji.org">https://rec.danmuji.org</a></p>
<span style="color:red;font-weight:700">REST API 界面</span>
<a href="/swagger">Swagger</a>
</p>
<p>
<span style="color:red;font-weight:700">GraphiQL API 界面</span>
<a href="/graphql/graphiql">GraphiQL</a>
<a href="/graphql/playground">Playground</a>
<a href="/graphql/altair">Altair</a>
<a href="/graphql/voyager">Voyager</a>
</p>
<p>录播姬 API 里的 objectId 在重启后会重新生成,是不保存到配置文件里的</p>
<div> <div>
<hr style="margin-top: 50px;"> <div class="links">
<h2>GraphQL API 用法示例</h2> <div class="group">
<p> <h2>录播姬管理界面</h2>
graphql 的<b>语法</b>请查看官方文档 <p>&nbsp;</p>
<a href="https://graphql.org/learn/">https://graphql.org/learn/</a> <a href="/ui">
或中文翻译镜像 <div class="card">
<a href="https://graphql.cn/learn/">https://graphql.cn/learn/</a> <p class="name">B站录播姬 WebUI</p>
</p>x <p class="path">/ui</p>
<div> </div>
<h3>列出所有直播间和基本信息</h3> </a>
</div>
<textarea> <div class="group">
query { <h2>REST API</h2>
rooms { <p>API 路径: <span style="font-family: monospace;">/api</span></p>
objectId <a href="/swagger">
roomConfig { <div class="card">
roomId <p class="name">Swagger UI</p>
autoRecord <p class="path">/swagger</p>
} </div>
shortId </a>
name </div>
streaming <div class="group">
title <h2>GraphiQL API</h2>
areaNameParent <p>API 路径: <span style="font-family: monospace;">/graphql</span></p>
areaNameChild <a href="/graphql/graphiql">
} <div class="card">
}</textarea> <p class="name">GraphiQL</p>
<p class="path">/graphql/graphiql</p>
</div>
</a>
<a href="/graphql/playground">
<div class="card">
<p class="name">Playground</p>
<p class="path">/graphql/playground</p>
</div>
</a>
<a href="/graphql/altair">
<div class="card">
<p class="name">Altair</p>
<p class="path">/graphql/altair</p>
</div>
</a>
<a href="/graphql/voyager">
<div class="card">
<p class="name">Voyager</p>
<p class="path">/graphql/voyager</p>
</div>
</a>
</div>
</div> </div>
<div>
<h3>列出所有直播间的所有信息截至编写此页面时具体最新属性见API界面的文档</h3><textarea>
query {
rooms {
objectId
shortId
recording
roomConfig {
roomId
autoRecord
optionalRecordingQuality {
value
hasValue
}
optionalRecordMode {
value
hasValue
}
optionalRecordDanmakuSuperChat {
value
hasValue
}
optionalRecordDanmakuRaw {
value
hasValue
}
optionalRecordDanmakuGuard {
value
hasValue
}
optionalRecordDanmakuGift {
value
hasValue
}
optionalRecordDanmaku {
value
hasValue
}
optionalCuttingNumber {
value
hasValue
}
optionalCuttingMode {
value
hasValue
}
}
stats {
durationRatio
fileMaxTimestamp
networkMbps
sessionDuration
totalInputBytes
sessionMaxTimestamp
totalOutputBytes
}
streaming
title
name
danmakuConnected
autoRecordForThisSession
areaNameParent
areaNameChild
}
}
</textarea>
</div>
<div>
<h3>添加一个房间</h3><textarea>
mutation {
addRoom(roomId: 3, autoRecord: false) {
objectId
shortId
roomConfig {
roomId
autoRecord
}
}
}
</textarea>
</div>
<div>
<h3>添加一个房间,用变量传参版</h3><textarea>
mutation AddRoom($roomid: Int, $autoRecord: Boolean) {
addRoom(roomId: $roomid, autoRecord: $autoRecord) {
objectId
shortId
roomConfig {
roomId
autoRecord
}
}
}
</textarea> <textarea>{'roomid': 4, 'autoRecord': false}</textarea>
</div>
<div>
<h3>启用自动录制</h3><textarea>
mutation {
setRoomConfig(roomId: 3, config: { autoRecord: true }) {
objectId
shortId
recording
roomConfig {
roomId
autoRecord
}
}
}
</textarea>
</div>
<div>开始录制、结束录制、手动切分,都是 mutation在 graphql 文档页面里可以看到</div>
</div> </div>
</body> </body>