@x-edu/live-player 0.0.7 → 0.0.8

package/src/detail/index.jsx

@@ -3,7 +3,7 @@ import React, { useState, useEffect } from 'react'
 import { Icon } from 'fish'
 import dayjs from 'dayjs'
 import classNames from 'classnames'
-import Empty from '@/component/Empty'
+// import Empty from '@/component/Empty'
 import {
   getOpenClassLive
   // getServerTime
@@ -40,6 +40,8 @@ export default function PublicLiveDetail({
   infoClassName,
   playerClassName,
   descriptionClassName,
+  errorCover, // 当直播不存在或者错误时候的封面展示
+  errorText,
   replay: propRelay,
   liveId: propLiveId,
   sdpAppId: propSdpAppId,
@@ -258,7 +260,24 @@ export default function PublicLiveDetail({
 
   if (!isExist) {
     return (
-      <Empty hideBack tip="内容已失效" className={style['live-empty']} />
+      <div
+        className={classNames(
+          style['public-live-detail-wrapper'],
+          style['live-empty'],
+          containerClassName
+        )}
+        style={{
+          backgroundImage: 'url(https://ndcs-pre.101.com/preproduction_content_x_live/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20230526205119_1685361330548.png)'
+        }}
+      >
+        <div className={style['empty-marker']} />
+        <div className={style['empty-content']}>
+          {/* eslint-disable-next-line max-len */}
+          <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADYAAAA2CAYAAACMRWrdAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAALOSURBVHgB7VqLbeMwDGVugctt4BEygje4bFBv0G5y2SC5Rc4jpBNEneDaLtBXCVIA16asL50U8AMEA7ZF6pG0PqSJVqxYIYkNCQHAVl8a3Xa6/dTt1+Dxs25v5rrZbN7o3qHJtLoddDsjHmfXp6V7gvGMbo+JZHxQuj3QraEHsXeDqQ11E4JaaaNbD3kcjS5aAlrRDmEvmefmu+lgjbAd9N86GXv3ToysHUlCK3hA2MItJcIRPQVky4RmgFSPCiED693TYuScRX14osowMnV79eirE5bOimqG2JEEMKNX1YgOQjj2b0GupxLAzmqxkCJnPgMuLPeUC4+1TPyfFib3xOhSGCwjKcK6uYHfgFzP6EqfuMB7qxm9sxg52O9tjHOqkDZ2sAuT43S1KQIOjIBdosLq5DwGP6QIGB9BVESfpcipkfy4cITdpGZZZQly4KMpPDt63P2bIiFNDvxsHd5mwR4n0jt+lSFGDvzs2I3f+8H05Ui8UAJ0gqbTl7/Mo64COS75MwlFjtgEOZkkKXKeseQRKxhER3KemwVHbGIR5OzJHGqTix1LFDFiXJ2CyuQa5t5kLeOIPTP3WipERXINc++dQkDBAh2D0qUAuQu065y8pUpBCTnkbqlcZ84qLVVEDjnwSaWkTXD0saUEqeRQemxxQrgiQ0OVEUsO/FbqQqkAn2coyw75dQXJed5JT6DCzo6KEVY9QUo0Tw62TFXurYEybqdvUmEiRQLE5TDzvTVS1jNCFYTKO1gqQQvpVDOvc47cpZpe+LOx5p5EUeLRQ+oDtT8DzKe7j6hXRupnSHUkAYRz+ccci8JuCObC778YqcEgUkq1e/f+uFTbOCPFlGovkC7VDgbXIG1qzoEJvX9Yqrg+ImisrlAXhpDxUn6Z6M4IXj1kZsSiE3t1IP+Xoz+ofCyS/knMfPTX6xWvZI/yJgXx8i1+EluxYsUEn1PRdSb/XhDOAAAAAElFTkSuQmCC" alt="" />
+          <p>{errorText || '内容已失效'}</p>
+        </div>
+
+      </div>
     )
   }
 

package/src/detail/index.module.less

@@ -119,13 +119,38 @@
 }
 
 .live-empty {
-  > img {
-    width: 440px;
-    height: 300px;
+  width: 100%;
+  height:100%;
+  // height: 548px;
+  background-repeat:  no-repeat;
+  background-position: center center;
+  position: relative;
+  .empty-marker{
+    position: absolute;
+    top:0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.50);
   }
-  > p {
-    font-size: 18px;
+  .empty-content{
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    text-align: center;
+    p {
+        color: #FFFFFF;
+        font-size: 24px;
+      }
+
+      img {
+        width: 54px;
+        height: 54px;
+        margin-bottom: 8px;
+      }
   }
+ 
 }
 
 .live-wrap {