[fix/doc] 完善一起听 主机模式

public/listen_together_host.html

@@ -0,0 +1,242 @@
+<!-- eslint-disable prettier/prettier -->
+<!DOCTYPE html>
+<html lang="zh">
+
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>一起听 - 主机模式</title>
+    <script src="https://unpkg.com/petite-vue"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/axios.min.js"></script>
+    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/mdui.min.css" />
+    <script src="https://unpkg.com/[email protected]/dist/js/mdui.min.js"></script>
+</head>
+
+<body class="mdui-container">
+    <h1>一起听 - 主机模式</h1>
+    <div>消息: {{message}}</div>
+    <audio
+    id="player"
+    autoplay
+        controls>
+    </audio>
+    <br />
+    <br />
+    <button v-if="!account.login" @click="login">获取登录状态</button>
+    <div>您的当前登录账号为: {{account.nickname}}</div>
+    <br />
+    <div v-if="account.login">
+        <button v-if="!roomInfo.roomId" @click="createRoom">创建房间</button>
+
+        <div v-if="roomInfo.roomId">
+            <div>分享链接为:
+                https://st.music.163.com/listen-together/share/?songId=1372188635&roomId={{roomInfo.roomId}}&inviterId={{account.userId}}
+            </div>
+            <br />
+            <button @click="refreshRoom">刷新房间状态</button>
+            <div>在线用户: </div>
+            <ul class="mdui-list">
+                <li v-for="user in roomInfo.roomUsers" class="mdui-list-item mdui-ripple">
+                    <div class="mdui-list-item-avatar">
+                        <img :src="user.avatarUrl" />
+                    </div>
+                    <div class="mdui-list-item-content">{{user.nickname}}</div>
+                </li>
+            </ul>
+            <button v-if="roomInfo.roomId" @click="closeRoom">关闭房间</button>
+        </div>
+    </div>
+    <button @click="playTrack">播放</button>
+    <button @click="pauseTrack">暂停</button>
+    <button @click="seekTrack">同步进度</button>
+    <details>
+        <summary>播放列表</summary>
+        <br />
+        <div><span>歌单ID: </span><input v-model="playlistInfo.playlistId" /></div>
+        <button @click="loadPlaylist">加载歌单到播放列表</button>
+        <span>{{playlistInfo.playlistName}}</span>
+        <br />
+        <br />
+        <div>歌单内容: </div>
+        <ul class="mdui-list">
+            <li @click="gotoTrack(track.id)" v-for="track in playlistInfo.playlistTracks"
+                class="mdui-list-item mdui-ripple">
+                <div class="mdui-list-item-avatar">
+                    <img :src="track.al.picUrl" />
+                </div>
+                <div class="mdui-list-item-content">{{track.name}}</div>
+            </li>
+        </ul>
+    </details>
+
+</body>
+<script>
+    PetiteVue.createApp({
+      message: '请点击获取登录状态',
+      account: {
+        login: false,
+        userId: 0,
+        nickname: '未登录',
+      },
+      roomInfo: {
+        roomId: null,
+        roomUsers: [],
+      },
+      playlistInfo: {
+        playlistId: 0,
+        playlistName: '未获取',
+        playlistTrackIds: [],
+        playlistTracks: [],
+      },
+      playingInfo: {
+        trackId: 0,
+        status: 'PLAY',
+        progress: 1,
+      },
+      clientSeq: 1,
+      login: async function () {
+        const res = await axios({
+          url: `/login/status`,
+          method: 'get',
+        })
+        if (res.data.data.code != 200) {
+          alert('请先使用登录 API 登录到网易云音乐')
+        } else {
+          this.account.userId = res.data.data.profile.userId
+          this.account.nickname = res.data.data.profile.nickname
+          this.account.login = true
+          this.message = '成功登录, 请创建房间'
+        }
+      },
+      createRoom: async function () {
+        const res = await axios({
+          url: 'listentogether/room/create',
+          method: 'get',
+        })
+        console.log(res)
+        if (res.data.code != 200) {
+          this.message = '创建房间出现问题: ' + res.data.message
+        } else {
+          this.message = '创建房间成功: ' + res.data.data.roomInfo.roomId
+          this.roomInfo.roomId = res.data.data.roomInfo.roomId
+          res = await axios({
+            url: 'listentogether/room/check',
+            method: 'post',
+            data: {
+              roomId: this.roomInfo.roomId,
+            },
+          })
+          console.log(res)
+        }
+      },
+      refreshRoom: async function () {
+        const res = await axios({
+          url: '/listentogether/status',
+        })
+        console.log(res)
+        if (res.data.code != 200 || !res.data.data.inRoom) {
+          this.message = '房间状态获取失败, 可能退出了房间'
+        } else {
+          this.roomInfo.roomUsers = res.data.data.roomInfo.roomUsers
+        }
+      },
+      closeRoom: async function () {
+        const res = await axios({
+          url: '/listentogether/end',
+          method: 'post',
+          data: {
+            roomId: this.roomInfo.roomId,
+          },
+        })
+        console.log(res)
+        if (res.data.code != 200 || !res.data.data.success) {
+          this.message = '房间关闭失败'
+        } else {
+          this.message = '房间关闭成功'
+          this.roomInfo.roomId = null
+        }
+      },
+      loadPlaylist: async function () {
+        const res = await axios({
+          url: '/playlist/detail',
+          method: 'post',
+          data: {
+            id: this.playlistInfo.playlistId,
+          },
+        })
+        console.log(res)
+        this.playlistInfo.playlistName = res.data.playlist.name
+        this.playlistInfo.playlistTrackIds = res.data.playlist.trackIds
+          .map((track) => track.id)
+          .join(',')
+        const resa = await axios({
+          url: '/song/detail',
+          method: 'post',
+          data: {
+            ids: this.playlistInfo.playlistTrackIds,
+          },
+        })
+        console.log(resa)
+        this.playlistInfo.playlistTracks = resa.data.songs
+        if (this.roomInfo.roomId) {
+          const resb = await axios({
+            url: 'listentogether/sync/list/command',
+            method: 'post',
+            data: {
+              roomId: this.roomInfo.roomId,
+              commandType: 'REPLACE',
+              userId: this.account.userId,
+              version: this.clientSeq++,
+              playMode: 'ORDER_LOOP',
+              displayList: this.playlistInfo.playlistTrackIds,
+              randomList: this.playlistInfo.playlistTrackIds,
+            },
+          })
+          console.log(resb)
+        }
+      },
+      gotoTrack: async function (trackId) {
+        this.playingInfo.trackId = trackId
+        if (this.roomInfo.roomId) {
+          await this.playCommand('GOTO')
+        }
+        document.getElementById('player').src =
+          'https://music.163.com/song/media/outer/url?id=' + trackId + '.mp3'
+      },
+      playTrack: async function () {
+        this.playingInfo.status = 'PLAY'
+        await this.playCommand('PLAY')
+        document.getElementById('player').play()
+      },
+      pauseTrack: async function () {
+        this.playingInfo.status = 'PAUSE'
+        await this.playCommand('PAUSE')
+        document.getElementById('player').pause()
+      },
+      seekTrack: async function () {
+        this.playingInfo.status = 'PLAY'
+        await this.playCommand('seek')
+        document.getElementById('player').play()
+      },
+      playCommand: async function (action) {
+        const res = await axios({
+          url: 'listentogether/play/command',
+          method: 'post',
+          data: {
+            roomId: this.roomInfo.roomId,
+            progress: Math.floor(
+              document.getElementById('player').currentTime * 1000,
+            ),
+            commandType: action,
+            formerSongId: '-1',
+            targetSongId: this.playingInfo.trackId,
+            clientSeq: this.clientSeq++,
+            playStatus: this.playingInfo.status,
+          },
+        })
+        console.log(res)
+      },
+    }).mount()
+</script>
+
+</html>