feat(live-demo): 房间页

pili-engineering · Jul 11, 2022 · bda216b · bda216b
1 parent 7953f44
commit bda216b
Show file tree

Hide file tree

Showing 31 changed files with 1,417 additions and 555 deletions.
diff --git a/packages/live-demo/package.json b/packages/live-demo/package.json
@@ -13,6 +13,8 @@
     "classnames": "^2.3.1",
     "clipboard": "^2.0.11",
     "immutability-helper": "^3.1.1",
+    "qn-rtplayer-web": "^1.0.4",
+    "qnweb-im": "^1.0.5",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-router-dom": "5.3.3"

diff --git a/packages/live-demo/src/App.tsx b/packages/live-demo/src/App.tsx
@@ -65,7 +65,7 @@ function App() {
 const WrapperApp = () => {
   return <ConfigProvider locale={zhCN}>
     <UserStore>
-      <IMStore value={{ appKey: imConfig.appKey }}>
+      <IMStore>
         <App/>
       </IMStore>
     </UserStore>

diff --git a/packages/live-demo/src/api/index.ts b/packages/live-demo/src/api/index.ts
@@ -1,2 +1,2 @@
-export * from './main';
+export * from './services';
 export * from './types';
diff --git a/...s/live-demo/src/api/main/BaseCommonApi.ts → ...ve-demo/src/api/services/BaseCommonApi.ts b/...s/live-demo/src/api/main/BaseCommonApi.ts → ...ve-demo/src/api/services/BaseCommonApi.ts
@@ -15,15 +15,15 @@ export class BaseCommonApi {
    * @param params
    */
   static signUpOrIn(params: SignUpOrInParams) {
-    return request.post<SignUpOrInResult['data'], SignUpOrInResult['data']>(`${PREFIX}/signUpOrIn`, params);
+    return request.post<SignUpOrInResult, SignUpOrInResult>(`${PREFIX}/signUpOrIn`, params);
   }
 
   /**
    * 获取短信验证码
    * @param params
    */
   static getSmsCode(params: GetSmsCodeParams) {
-    return request.post<GetSmsCodeResult['data'], GetSmsCodeResult['data']>(`${PREFIX}/getSmsCode`, params);
+    return request.post<GetSmsCodeResult, GetSmsCodeResult>(`${PREFIX}/getSmsCode`, params);
   }
 
   /**
@@ -32,7 +32,7 @@ export class BaseCommonApi {
    */
   static getAccountInfo(params?: GetAccountInfoAccountIdParams) {
     const url = params?.accountId ? `${PREFIX}/accountInfo/${params.accountId}` : `${PREFIX}/accountInfo`;
-    return request.get<GetAccountInfoAccountIdResult['data'], GetAccountInfoAccountIdResult['data']>(url, {
+    return request.get<GetAccountInfoAccountIdResult, GetAccountInfoAccountIdResult>(url, {
       headers: {
         Authorization: getAuthorization()
       }

diff --git a/packages/live-demo/src/api/main/LiveApi.ts → ...ges/live-demo/src/api/services/LiveApi.ts b/packages/live-demo/src/api/main/LiveApi.ts → ...ges/live-demo/src/api/services/LiveApi.ts
@@ -4,7 +4,7 @@ import {
   GetLiveAuthTokenResult,
   GetLiveRoomHeartbeatLiveIdParams,
   GetLiveRoomHeartbeatLiveIdResult,
-  GetLiveRoomInfoLiveIdParams,
+  GetLiveRoomInfoLiveIdParams, GetLiveRoomInfoLiveIdResult,
   GetLiveRoomListParams,
   GetLiveRoomListResult,
   GetLiveRoomParams,
@@ -22,7 +22,7 @@ export class LiveApi {
    * @param params
    */
   static getLiveAuthToken(params: GetLiveAuthTokenParams) {
-    return request.get<GetLiveAuthTokenResult['data'], GetLiveAuthTokenResult['data']>(`/v1/live/auth_token`, {
+    return request.get<GetLiveAuthTokenResult, GetLiveAuthTokenResult>(`/v1/live/auth_token`, {
       headers: {
         Authorization: getAuthorization()
       },
@@ -34,10 +34,10 @@ export class LiveApi {
    * 房间用户
    * @param params
    */
-  getRoomUserList(params: GetLiveRoomUserListParams) {
+  static getRoomUserList(params: GetLiveRoomUserListParams) {
     return liveRequest.get(`${PREFIX}/room/user_list`, {
       headers: {
-        Authorization: getAuthorization()
+        Authorization: getAccessToken()
       },
       params
     });
@@ -48,9 +48,9 @@ export class LiveApi {
    * @param params
    */
   static search(params: GetLiveRoomParams) {
-    return liveRequest.get<GetLiveRoomResult['data'], GetLiveRoomResult['data']>(`${PREFIX}/room`, {
+    return liveRequest.get<GetLiveRoomResult, GetLiveRoomResult>(`${PREFIX}/room`, {
       headers: {
-        Authorization: getAuthorization()
+        Authorization: getAccessToken()
       },
       params
     });
@@ -60,10 +60,10 @@ export class LiveApi {
    * 查询直播详情
    * @param params
    */
-  getRoomInfo(params: GetLiveRoomInfoLiveIdParams) {
-    return liveRequest.get(`${PREFIX}/room/info/${params.live_id}`, {
+  static getRoomInfo(params: GetLiveRoomInfoLiveIdParams) {
+    return liveRequest.get<GetLiveRoomInfoLiveIdResult, GetLiveRoomInfoLiveIdResult>(`${PREFIX}/room/info/${params.live_id}`, {
       headers: {
-        Authorization: getAuthorization()
+        Authorization: getAccessToken()
       }
     });
   }
@@ -73,7 +73,7 @@ export class LiveApi {
    * @param params
    */
   static getRoomList(params: GetLiveRoomListParams) {
-    return liveRequest.get<GetLiveRoomListResult['data'], GetLiveRoomListResult['data']>(`${PREFIX}/room/list`, {
+    return liveRequest.get<GetLiveRoomListResult, GetLiveRoomListResult>(`${PREFIX}/room/list`, {
       headers: {
         Authorization: getAccessToken()
       },
@@ -86,10 +86,10 @@ export class LiveApi {
    * @param params
    */
   static join(params: LiveRoomUserLiveIdParams) {
-    return liveRequest.post<LiveRoomUserLiveIdResult['data'], LiveRoomUserLiveIdResult['data']>(`${PREFIX}/room/user/${params.live_id}`, {
+    return liveRequest.post<LiveRoomUserLiveIdResult, LiveRoomUserLiveIdResult>(`${PREFIX}/room/user/${params.live_id}`, null, {
       headers: {
         Authorization: getAccessToken()
-      },
+      }
     });
   }
 
@@ -110,7 +110,7 @@ export class LiveApi {
    * @param params
    */
   static heartbeat(params: GetLiveRoomHeartbeatLiveIdParams) {
-    return liveRequest.get<GetLiveRoomHeartbeatLiveIdResult['data'], GetLiveRoomHeartbeatLiveIdResult['data']>(`${PREFIX}/room/heartbeat/${params.live_id}`, {
+    return liveRequest.get<GetLiveRoomHeartbeatLiveIdResult, GetLiveRoomHeartbeatLiveIdResult>(`${PREFIX}/room/heartbeat/${params.live_id}`, {
       headers: {
         Authorization: getAccessToken()
       },

diff --git a/packages/live-demo/src/api/main/index.ts → packages/live-demo/src/api/services/index.ts b/packages/live-demo/src/api/main/index.ts → packages/live-demo/src/api/services/index.ts
diff --git a/packages/live-demo/src/api/utils/request.ts b/packages/live-demo/src/api/utils/request.ts
@@ -1,7 +1,13 @@
-import axios  from 'axios';
+import axios from 'axios';
 import { message, Modal } from 'antd';
 
-import { ApiResponseCode, liveRequestConfig, requestConfig } from '@/config';
+import { liveRequestConfig, requestConfig } from '@/config';
+
+export interface AxiosResponseData<T = any> {
+  code: number;
+  data: T;
+  request_id: string;
+}
 
 const request = axios.create(requestConfig);
 
@@ -11,26 +17,31 @@ request.interceptors.request.use(function (config) {
   return Promise.reject(error);
 });
 
-request.interceptors.response.use(function (response ) {
-  const responseCode: keyof typeof ApiResponseCode = response.data.code;
+request.interceptors.response.use<AxiosResponseData>(function (response) {
+  const responseCode = response.data.code;
   if (responseCode === 0) {
-    return response.data.data;
-  } else if ([401001, 401003].includes(responseCode)) { // 用户未登录或TOKEN过期
+    return response.data;
+  }
+  if ([401001, 401003].includes(responseCode)) {
     Modal.error({
       title: '提示',
-      content: response.data.message,
-      onOk() {
-        localStorage.clear();
-        window.location.href = '/';
-      },
-    })
-    return Promise.reject('重新登录');
-  } else {
-    message.error(response.data.message);
-    return Promise.reject(`${response.config.url} 接口响应错误: ${response.data.message}`);
+      content: '登录已过期，请重新登录',
+      onOk: () => {
+        window.location.href = '/login';
+      }
+    });
+    return Promise.reject(response.data);
   }
+  Modal.error({
+    title: '接口请求错误',
+    content: response.data.message,
+  });
+  return Promise.reject(response.data);
 }, function (error) {
-  message.error(error.message)
+  Modal.error({
+    title: '接口请求错误',
+    content: error.message,
+  });
   return Promise.reject(error);
 });
 
@@ -42,20 +53,22 @@ liveRequest.interceptors.request.use(function (config) {
   return Promise.reject(error);
 });
 
-liveRequest.interceptors.response.use(function (response ) {
+liveRequest.interceptors.response.use<AxiosResponseData>(function (response) {
   const responseCode = response.data.code;
-  if (responseCode === 200) {
-    return response.data.data;
-  } else {
-    Modal.error({
-      title: '提示',
-      content: response.data.message,
-    })
-    message.error(response.data.message);
-    return Promise.reject(`${response.config.url} 接口响应错误: ${response.data.message}`);
+  if ([0, 200].includes(responseCode)) {
+    return response.data;
   }
+  Modal.error({
+    title: '接口请求错误',
+    content: response.data.message,
+  });
+  message.error(response.data.message);
+  return Promise.reject(response.data);
 }, function (error) {
-  message.error(error.message)
+  Modal.error({
+    title: '接口请求错误',
+    content: error.message,
+  });
   return Promise.reject(error);
 });
 

diff --git a/packages/live-demo/src/layouts/auth/index.tsx b/packages/live-demo/src/layouts/auth/index.tsx
@@ -9,33 +9,32 @@ import './index.scss';
 export const Auth: React.FC = (props) => {
   const { children } = props;
   const { dispatch: dispatchUserStoreState } = useUserStore();
-  const [loading, setLoading] = useState(true);
+  const [authenticated, setAuthenticated] = useState(false);
 
   /**
    * 初始化用户信息
    */
   useEffect(() => {
     let state = {};
     BaseCommonApi.getAccountInfo().then(result => {
-      state = Object.assign(state, result);
+      state = Object.assign(state, result.data);
       return LiveApi.getLiveAuthToken({
-        userID: result.accountId,
+        userID: result.data.accountId,
         deviceID: encodeURIComponent(window.navigator.userAgent)
       });
     }).then(result => {
-      state = Object.assign(state, result);
+      state = Object.assign(state, result.data);
       dispatchUserStoreState({
         type: 'PATCH',
         payload: state
       });
-    }).finally(() => {
-      setLoading(false);
+      setAuthenticated(true);
     });
   }, []);
 
   return <div className="auth">
     {
-      loading ? <Spin className="auth-loading" tip="数据正在拼命加载中..."/> : children
+      authenticated ? children : <Spin className="auth-loading" tip="数据正在拼命加载中..."/>
     }
   </div>;
 };
diff --git a/packages/live-demo/src/pages/login/index.tsx b/packages/live-demo/src/pages/login/index.tsx
@@ -84,12 +84,12 @@ export const Login: React.FC<LoginProps> = (props) => {
       dispatchUserStoreState({
         type: 'PATCH',
         payload: {
-          loginToken: result?.loginToken || ''
+          loginToken: result?.data?.loginToken || ''
         }
       });
       dispatchIMStoreState({
         type: 'PATCH',
-        payload: result?.imConfig || {}
+        payload: result?.data?.imConfig || {}
       });
       setIsLoading(false);
       history.push(nextUrl);

diff --git a/packages/live-demo/src/pages/room-list/index.tsx b/packages/live-demo/src/pages/room-list/index.tsx
@@ -18,7 +18,7 @@ function getLoadMoreList(nextId: number, limit: number): Promise<Data> {
     page_size: `${limit}`,
   }).then(result => {
     return {
-      ...result,
+      ...result.data,
       nextId: page + 1
     };
   });

diff --git a/packages/live-demo/src/pages/room/components/_hooks/index.ts b/packages/live-demo/src/pages/room/components/_hooks/index.ts
@@ -0,0 +1 @@
+export * from './useQNRTPlayer';
diff --git a/packages/live-demo/src/pages/room/components/_hooks/useQNRTPlayer.tsx b/packages/live-demo/src/pages/room/components/_hooks/useQNRTPlayer.tsx
@@ -0,0 +1,77 @@
+import { useEffect, useState } from 'react';
+import { QNRTPlayer } from 'qn-rtplayer-web';
+
+import { Config, PlayerState, SDKError, StatReport } from '../_types';
+
+export interface UseQNRTPlayerProps {
+  url?: string;
+  container?: HTMLElement | null;
+  initConfig?: Config;
+}
+
+export const useQNRTPlayer = (props?: UseQNRTPlayerProps | null) => {
+  const [player, setPlayer] = useState<QNRTPlayer | null>(null);
+  const [playerState, setPlayerState] = useState<PlayerState>(PlayerState.STATE_IDLE);
+  const [statReport, setStatReport] = useState<StatReport | null>(null);
+  const [error, setError] = useState<SDKError | null>(null);
+
+  /**
+   * 初始化播放器
+   */
+  useEffect(() => {
+    if (!props) return;
+    const { url, container, initConfig } = props;
+    if (!url || !container) {
+      return;
+    }
+    const player = new QNRTPlayer();
+    const config = initConfig || {};
+    player.init(config);
+    setPlayer(player);
+  }, [props?.url, props?.container, props?.initConfig]);
+
+  /**
+   * 事件监听
+   */
+  useEffect(() => {
+    if (player) {
+      /**
+       * 播放器内部状态改变时，会触发该事件。
+       * @param state
+       */
+      const handlePlayerStateChanged = (state: PlayerState) => {
+        setPlayerState(state);
+      };
+      /**
+       * 监听 stats 事件，可以获得当前媒体流的状态数据。
+       * @param data
+       */
+      const handleStats = (data: StatReport) => {
+        setStatReport(data);
+      };
+      /**
+       * SDK 内部对常见的错误进行了封装，可以通过监听 error 事件获取错误信息。
+       * 当连接因网络等原因异常断开时，会触发 disconnect 事件。
+       * @param error
+       */
+      const handleError = (error: SDKError) => {
+        setError(error);
+      };
+      player.on('playerStateChanged', handlePlayerStateChanged);
+      player.on('stats', handleStats);
+      player.on('error', handleError);
+      return () => {
+        player.off('playerStateChanged', handlePlayerStateChanged);
+        player.off('stats', handleStats);
+        player.off('error', handleError);
+      };
+    }
+  }, [player]);
+
+  return {
+    player,
+    playerState,
+    statReport,
+    error,
+  };
+};
diff --git a/packages/live-demo/src/pages/room/components/_images/icon-nolive.svg b/packages/live-demo/src/pages/room/components/_images/icon-nolive.svg
diff --git a/packages/live-demo/src/pages/room/components/_images/icon-notice.svg b/packages/live-demo/src/pages/room/components/_images/icon-notice.svg
diff --git a/packages/live-demo/src/pages/room/components/_images/icon-share.svg b/packages/live-demo/src/pages/room/components/_images/icon-share.svg