mirror of
https://github.com/AynaLivePlayer/AynaLivePlayer.git
synced 2025-12-06 18:32:50 +08:00
add frontend requirement
This commit is contained in:
Aynakeya
@@ -1,6 +1,7 @@
|
||||
package webinfo
|
||||
|
||||
import (
|
||||
"AynaLivePlayer/config"
|
||||
"context"
|
||||
"encoding/json"
|
||||
"fmt"
|
||||
@@ -35,7 +36,7 @@ func NewWebInfoServer(port int) *WebInfoServer {
|
||||
Clients: map[*Client]int{},
|
||||
}
|
||||
mux := http.NewServeMux()
|
||||
mux.Handle("/", http.FileServer(http.Dir("./assets/webinfo")))
|
||||
mux.Handle("/", http.FileServer(http.Dir(config.GetAssetPath("webinfo"))))
|
||||
mux.HandleFunc("/ws/info", server.handleInfo)
|
||||
mux.HandleFunc("/api/info", server.getInfo)
|
||||
server.Server = &http.Server{
|
||||
|
||||
206
前端要求.md
Normal file
206
前端要求.md
Normal file
@@ -0,0 +1,206 @@
|
||||
# IDK what to write
|
||||
|
||||
|
||||
开源地址: [https://github.com/aynakeya/AynaLivePlayer](https://github.com/aynakeya/AynaLivePlayer)
|
||||
|
||||
|
||||
# 要求
|
||||
|
||||
- 开源项目.jpg
|
||||
- 给OBS用的，用来显示信息
|
||||
- 访问的时候先获取全部的数据渲染，然后用websocket获取更新的数据
|
||||
- 能够单个输出所有的数据 @1
|
||||
- 能自定义输出的模板(?暂定) @2
|
||||
- 最好用vue
|
||||
|
||||
### @1 单个输出所有的数据
|
||||
|
||||
类似[https://github.com/aynakeya/BiliAudioBot](https://github.com/aynakeya/BiliAudioBot)里的frontend(用vue写的)，可以单个输出所有的数据。release有打包好发布的测试用例。
|
||||
|
||||
- 适合简单的输出
|
||||
- 得有一个css的class，这样子用户可以自己在obs自定义css，虽然大部分用户不知道怎么搞
|
||||
|
||||
比如GET `/info/CurrentTitle` 或者 `info?target=Current.Title` 返回
|
||||
```
|
||||
<p class=".current-title">外婆桥</p>
|
||||
```
|
||||
|
||||
比如 GET `info?target=Current.Cover` 返回
|
||||
```
|
||||
<img class=".current-title" src="..." />
|
||||
```
|
||||
|
||||
比如 GET `info?target=Playlist` 返回
|
||||
```
|
||||
<ol>
|
||||
<li v-for="item in playlist">
|
||||
<h2 class="playlist-info">#{{ playlist.indexOf(item) }} - {{ item.title }} - {{ item.artist }} - {{ item.username }}</h2>
|
||||
</li>
|
||||
</ol>
|
||||
```
|
||||
|
||||
### @2 自定义输出的模板
|
||||
|
||||
- **第一目标** 不整了/没想好怎么整
|
||||
- **第儿目标** 最简单的还是和TextInfo一样，用户给一个模板(通过get?会不会太长了，或者本地读取?这样的话我后端获取还得加一个api来返回模板) 然后渲染出对应的html的代码，当然也要有css这样子用户可以自定义
|
||||
```
|
||||
Title: {{ .Current.Title }}
|
||||
Artist: {{ .Current.Artist }}
|
||||
Album: {{ .Current.Album}}
|
||||
Username: {{ .Current.Username }}
|
||||
Progress(in seconds): {{.CurrentTime}} / {{.TotalTime}}
|
||||
Progress(in minutes:seconds): {{ GetMinutes .CurrentTime}}:{{ GetSeconds .CurrentTime}} / {{ GetMinutes .TotalTime}}:{{ GetSeconds .TotalTime}}
|
||||
Lyric: {{.Lyric}}
|
||||
|
||||
{{range .Playlist}}
|
||||
Index: # {{ .Index}}
|
||||
Title: {{ .Title }}
|
||||
Artist: {{ .Artist }}
|
||||
Album: {{ .Album}}
|
||||
Username: {{ .Username }}
|
||||
{{end}}
|
||||
```
|
||||
- **终极目标**不知道能不能想做的像[https://github.com/xfgryujk/blivechat](https://github.com/xfgryujk/blivechat) / [https://link.bilibili.com/ctool/vtuber/index.html](https://link.bilibili.com/ctool/vtuber/index.html), 但是感觉挺麻烦的
|
||||
|
||||
|
||||
# 后端接口
|
||||
|
||||
|
||||
前端的页面在/地址下
|
||||
|
||||
两个接口
|
||||
|
||||
```
|
||||
|
||||
mux.Handle("/", http.FileServer(http.Dir(config.GetAssetPath("webinfo")))) # ./assets/webinfo
|
||||
mux.HandleFunc("/ws/info", server.handleInfo)
|
||||
mux.HandleFunc("/api/info", server.getInfo)
|
||||
|
||||
```
|
||||
|
||||
|
||||
## api详情
|
||||
|
||||
|
||||
### GET /api/info
|
||||
|
||||
**http://127.0.0.1:4000/api/info**
|
||||
|
||||
返回一个`OutInfo`, 当前的所有数据
|
||||
|
||||
```
|
||||
{
|
||||
"Current": {
|
||||
"Index": 0,
|
||||
"Title": "外婆桥",
|
||||
"Artist": "任然",
|
||||
"Album": "外婆桥",
|
||||
"Username": "System",
|
||||
"Cover": {
|
||||
"Url": "https://p1.music.126.net/Ep-CjAsRL5yvZkDreiWsMQ==/109951164390004861.jpg",
|
||||
"Data": null
|
||||
}
|
||||
},
|
||||
"CurrentTime": 6,
|
||||
"TotalTime": 261,
|
||||
"Lyric": " 编曲 : 闫津",
|
||||
"Playlist": [
|
||||
{
|
||||
"Index": 0,
|
||||
"Title": "Melody",
|
||||
"Artist": "ZIV,KIPES",
|
||||
"Album": "倒叙爱情",
|
||||
"Username": "System",
|
||||
"Cover": {
|
||||
"Url": "",
|
||||
"Data": null
|
||||
}
|
||||
},
|
||||
{
|
||||
"Index": 1,
|
||||
"Title": "Cure For Me",
|
||||
"Artist": "AURORA",
|
||||
"Album": "Cure For Me",
|
||||
"Username": "System",
|
||||
"Cover": {
|
||||
"Url": "",
|
||||
"Data": null
|
||||
}
|
||||
},
|
||||
{
|
||||
"Index": 2,
|
||||
"Title": "填满",
|
||||
"Artist": "苏星婕",
|
||||
"Album": "填满",
|
||||
"Username": "System",
|
||||
"Cover": {
|
||||
"Url": "",
|
||||
"Data": null
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
### websocket /ws/info
|
||||
|
||||
**ws://127.0.0.1:4000/ws/info**
|
||||
|
||||
返回一个`WebsocketData`, 更新的数据
|
||||
|
||||
```
|
||||
{
|
||||
"Update": "Lyric",
|
||||
"Data": {
|
||||
"Current": {
|
||||
"Index": 0,
|
||||
"Title": "",
|
||||
"Artist": "",
|
||||
"Album": "",
|
||||
"Username": "",
|
||||
"Cover": {
|
||||
"Url": "",
|
||||
"Data": null
|
||||
}
|
||||
},
|
||||
"CurrentTime": 0,
|
||||
"TotalTime": 0,
|
||||
"Lyric": " 混音 : KIPES",
|
||||
"Playlist": null
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
## Structures
|
||||
|
||||
```
|
||||
# Url == "" && Data == nil 或者Url != "" || Data != nil
|
||||
type Picture struct {
|
||||
Url string # 如果是url就会给url
|
||||
Data []byte # 如果是二进制数据就是base64
|
||||
}
|
||||
|
||||
type MediaInfo struct {
|
||||
Index int
|
||||
Title string
|
||||
Artist string
|
||||
Album string
|
||||
Username string
|
||||
Cover player.Picture
|
||||
}
|
||||
|
||||
type OutInfo struct {
|
||||
Current MediaInfo
|
||||
CurrentTime int
|
||||
TotalTime int
|
||||
Lyric string
|
||||
Playlist []MediaInfo
|
||||
}
|
||||
|
||||
type WebsocketData struct {
|
||||
Update string
|
||||
Data OutInfo
|
||||
}
|
||||
```
|
||||
Reference in New Issue
Block a user