@x-edu/live-player 0.0.1

package/src/asset/style/index.less

@@ -0,0 +1,114 @@
+@import '@/component/mixin.less';
+
+html,
+body {
+  height: 100%;
+  margin: 0;
+  line-height: 1.5;
+  box-sizing: border-box;
+}
+
+.gray {
+  filter: grayscale(100%);
+}
+
+#root {
+  overflow-x: hidden;
+}
+/**
+* IE 11 flex布局兼容性问题：
+* min-height 和 flex 共用时，.main 内容的实际高度小于 min-height 时，footer 布局异常（stick footer失效）
+* 解决：在 min-height 外的父div(.main-wrapper)需要设置成 display:flex
+*/
+.main-wrapper {
+  background: radial-gradient(29% 54% at 84% 95%, #f1f1f5 28%, #eff2f9 77%);
+  overflow-x: hidden;
+  height: 100%;
+  &.iframe {
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+}
+
+.main {
+  display: flex;
+  flex-flow: column;
+  overflow-x: hidden;
+}
+
+.content {
+  flex: 1;
+}
+
+// IE 11 flex布局兼容性问题
+@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+  .content {
+    flex-basis: auto;
+  }
+}
+
+// 飘窗
+.advertisement {
+  .bgCompact('/src/asset/img/advertisement.png');
+  background-size: cover;
+  width: 322px;
+  height: 172px;
+}
+
+.advertisement-placeholder {
+  width: 322px;
+  height: 172px;
+}
+
+.icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden; 
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  svg path,rect {
+    fill: currentColor;
+  }
+}
+
+symbol path {
+  fill: currentColor;
+}
+
+::-webkit-scrollbar {
+  height: 6px;
+  width: 6px;
+  background-color: #f5f5f5;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #ccc;
+  border-radius: 6px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #ddd;
+}
+
+.fish-video {
+  .vjs-poster {
+    filter: brightness(0.75);
+  }
+  .video-js.vjs-big-play-centered .vjs-big-play-button {
+    background-color: transparent;
+    border: none;
+    margin-top: -50px;
+    margin-left: -50px;
+    .vjs-icon-placeholder {
+      &::before {
+        content: url('../img/video-play.svg');
+        width: 100px;
+        height: 100px;
+      }
+    }
+  }
+}

package/src/asset/style/reset-theme.less

@@ -0,0 +1,142 @@
+@import '~@/asset/style/variable';
+
+.reset-theme{
+  /* 确认弹窗 */
+  &.fish-modal-confirm{
+    .fish-modal-close-x {
+      width: 62px;
+      height: 48px;
+      line-height: 48px;
+    }
+
+    .fish-modal-body {
+      padding: 0;
+      border-radius: 6px;
+      overflow: hidden;
+
+      .fishicon {
+        display: none;
+      }
+    }
+
+    .fish-modal-confirm-title {
+      padding: 14px 24px;
+      color: #000000;
+      background: #F8FAFE;
+    }
+
+    .fish-modal-confirm-content {
+      padding: 56px 24px;
+      text-align: center;
+      font-size: 16px;
+      margin: 0;
+    }
+
+    .fish-modal-confirm-body > .fishicon + .fish-modal-confirm-title + .fish-modal-confirm-content {
+      margin-left: 0;
+    }
+
+    .fish-modal-confirm-btns {
+      text-align: center;
+      float: inherit;
+      margin-top: 0;
+      padding-bottom: 20px;
+
+      .fish-btn {
+        padding: 0px 32px;
+      }
+
+      .fish-btn + .fish-btn {
+        margin-left: 24px;
+      }
+    }
+  }
+  /* 文本 */
+  .num-limit{
+    color:#666;
+    &>span{
+      color: #ccc;
+    }
+  }
+  /* 弹窗 */
+  .fish-modal-header{
+    height: 50px;
+    background: rgba(#1E62EC, 0.03);
+    border-bottom: 1px solid #eee;
+  }
+  .fish-modal-footer{
+    text-align: center;
+    border-top: none;
+    padding: 24px 16px;
+    .fish-btn{
+      min-width: 88px;
+    }
+  }
+  /* 按钮样式 */
+  .fish-btn{
+    border-radius: 16px;
+  }
+  .fish-btn-primary{
+    color: @white-color;
+    background: @primary-color;
+    border-color: @primary-color;
+  }
+  .fish-btn:hover, .fish-btn:focus{
+    color: @primary-color;
+    border-color: @primary-color;
+  }
+  .fish-btn-primary:hover, .fish-btn-primary:focus{
+    color: @white-color;
+  }
+  a{
+    color: @primary-color;
+  }
+  /* 菜单 */
+  .fish-menu, .fish-menu-item a{
+    color: @title-text-color;
+  }
+  .fish-menu-inline{
+    border-right: none;
+  }
+  .fish-menu-sub.fish-menu-inline{
+    background: transparent;
+  }
+  .fish-menu-submenu-expand-icon, .fish-menu-submenu-arrow{
+    color: #999;
+  }
+  .fish-menu-submenu-selected, .fish-menu-item-selected{
+    color: @primary-color;
+  }
+  .fish-menu-vertical .fish-menu-item::after, .fish-menu-vertical-left .fish-menu-item::after, .fish-menu-vertical-right .fish-menu-item::after, .fish-menu-inline .fish-menu-item::after{
+    border-left: 4px solid @primary-color;
+    border-radius: 4px 0px 0px 4px;
+    border-right: none;
+  }
+  .fish-menu:not(.fish-menu-horizontal) .fish-menu-item-selected{
+    background-color:rgba(@primary-color, 0.1);
+  }
+  .fish-menu-item-selected a, .fish-menu-item-selected a:hover{
+    color: @primary-color;
+  }
+  .fish-menu-light .fish-menu-item:hover, .fish-menu-light .fish-menu-item-active, .fish-menu-light .fish-menu:not(.fish-menu-inline) .fish-menu-submenu-open, .fish-menu-light .fish-menu-submenu-active, .fish-menu-light .fish-menu-submenu-title:hover{
+    color: @primary-color;
+  }
+  .fish-menu-item a:hover{
+    color: @primary-color;
+  }
+  .fish-menu-sub.fish-menu-inline > .fish-menu-item, .fish-menu-sub.fish-menu-inline > .fish-menu-submenu > .fish-menu-submenu-title{
+    height:50px;
+    line-height:50px;
+  }
+  .fish-menu-vertical > .fish-menu-item, .fish-menu-vertical-left > .fish-menu-item, .fish-menu-vertical-right > .fish-menu-item, .fish-menu-inline > .fish-menu-item, .fish-menu-vertical > .fish-menu-submenu > .fish-menu-submenu-title, .fish-menu-vertical-left > .fish-menu-submenu > .fish-menu-submenu-title, .fish-menu-vertical-right > .fish-menu-submenu > .fish-menu-submenu-title, .fish-menu-inline > .fish-menu-submenu > .fish-menu-submenu-title{
+    height:50px;
+    line-height:50px;
+  }
+  .fish-menu-item:active, .fish-menu-submenu-title:active{
+    background-color:rgba(@primary-color, 0.1);
+  }
+  .fish-menu-vertical .fish-menu-item, .fish-menu-vertical-left .fish-menu-item, .fish-menu-vertical-right .fish-menu-item, .fish-menu-inline .fish-menu-item, .fish-menu-vertical .fish-menu-submenu-title, .fish-menu-vertical-left .fish-menu-submenu-title, .fish-menu-vertical-right .fish-menu-submenu-title, .fish-menu-inline .fish-menu-submenu-title{
+    margin-top: 0px;
+    margin-bottom: 0px;
+  }
+}

package/src/asset/style/theme/index.less

@@ -0,0 +1,55 @@
+:global(#theme) {
+  .download-bar {
+  }
+
+  // .header-theme {
+  //   background-color: unset;
+  //   box-shadow: none;
+  //   color: #fff !important;
+  //   &:hover {
+  //     color: #ffe993 !important;
+  //   }
+  //   .login {
+  //     color: #fff;
+  //     &:hover {
+  //       color: #ffe993;
+  //     }
+  //   }
+  //   .username {
+  //     color: #fff;
+  //   }
+
+  //   .menu-left {
+  //     .menu-item {
+  //       .menu-item-text {
+  //         color: #fff;
+  //       }
+  //       &:hover {
+  //         .menu-item-text {
+  //           color: #ffe993;
+  //         }
+  //       }
+  //       &.cur {
+  //         .menu-item-text {
+  //           color: #ffe993;
+  //         }
+  //         &:after {
+  //           background-image: unset !important;
+  //           background-color: #ffe993;
+  //         }
+  //       }
+  //     }
+  //   }
+  // }
+
+  // .title {
+  //   color: #ffe993 !important;
+  // }
+
+  // .footer-theme {
+  //   background-color: unset;
+  //   // background-image: url(./img/footer-bg.png);
+  //   background-repeat: no-repeat;
+  //   background-size: cover;
+  // }
+}

package/src/asset/style/theme/party/global.less

@@ -0,0 +1,20 @@
+#theme {
+  .bg {
+    position: absolute;
+    // top: 84px;
+    width: 100%;
+    height: 286px;
+    background-image: url(./img/header-bg.png);
+    background-repeat: no-repeat;
+    background-position: top center;
+  }
+
+  .home {
+    height: 490px;
+  }
+
+  .home-outer {
+    height: 490px;
+    background-position-y: -84px;
+  }
+}

package/src/asset/style/theme/party/override.less

@@ -0,0 +1,57 @@
+:global(#theme) {
+  .download-bar {
+    background-color: rgba(126, 0, 0, 0.3);
+    background-image: unset !important;
+  }
+
+  .header-theme {
+    background-color: unset;
+    box-shadow: none;
+    color: #fff !important;
+    &:hover {
+      color: #ffe993 !important;
+    }
+    .login {
+      color: #fff;
+      &:hover {
+        color: #ffe993;
+      }
+    }
+    .username {
+      color: #fff;
+    }
+
+    .menu-left {
+      .menu-item {
+        .menu-item-text {
+          color: #fff;
+        }
+        &:hover {
+          .menu-item-text {
+            color: #ffe993;
+          }
+        }
+        &.cur {
+          .menu-item-text {
+            color: #ffe993;
+          }
+          &:after {
+            background-image: unset !important;
+            background-color: #ffe993;
+          }
+        }
+      }
+    }
+  }
+
+  .title {
+    color: #ffe993 !important;
+  }
+
+  .footer-theme {
+    background-color: unset;
+    background-image: url(./img/footer-bg.png);
+    background-repeat: no-repeat;
+    background-size: cover;
+  }
+}

package/src/asset/style/theme/test/global.less

@@ -0,0 +1,18 @@
+#theme {
+  .bg {
+    position: absolute;
+    top: 64px;
+    width: 100%;
+    height: 286px;
+    background-repeat: no-repeat;
+    background-position: top center;
+  }
+
+  .theme-bg {
+    height: 138px;
+  }
+
+  .home-outer {
+    height: 490px;
+  }
+}

package/src/asset/style/theme/test/override.less

@@ -0,0 +1,45 @@
+:global(#theme) {
+  .header-theme {
+    background-color: unset;
+    box-shadow: none;
+    color: #fff !important;
+    &:hover {
+      color: #ffe993 !important;
+    }
+    .login {
+      color: #fff;
+      &:hover {
+        color: #ffe993;
+      }
+    }
+    .username {
+      color: #fff;
+    }
+
+    .menu-left {
+      .menu-item {
+        .menu-item-text {
+          color: #fff;
+        }
+        &:hover {
+          .menu-item-text {
+            color: #ffe993;
+          }
+        }
+        &.cur {
+          .menu-item-text {
+            color: #ffe993;
+          }
+          &:after {
+            background-image: unset !important;
+            background-color: #ffe993;
+          }
+        }
+      }
+    }
+  }
+
+  .title {
+    color: #ffe993 !important;
+  }
+}

package/src/asset/style/variable.less

@@ -0,0 +1,12 @@
+@max-center-width: 1388px;
+@min-center-width: 960px;
+@primary-color: #1e62ec;
+@white-color: #fff;
+@orange-color: #faad14;
+@base-text-color: #666;
+@title-text-color: #333;
+@sub-title-text-color: #666;
+@grey-text-color: #999;
+
+@grey-bordr-color: #e8e8e8;
+@grey-bg-color: #f5f5f5;

package/src/component/AliPlayer/index.jsx

@@ -0,0 +1,46 @@
+import React, { useEffect } from 'react'
+import { Loader } from 'fish'
+
+const { loadCSS, loadJS } = Loader
+const playerJS = '/3rd/ali-player/aliplayer-min.js'
+const playerHLS = '/3rd/ali-player/aliplayer-hls-min.js'
+const playerComponents = '/3rd/ali-player/alipayercomponents-1.0.8.min.js'
+const playerCSS = '/3rd/ali-player/aliplayer-min.css'
+
+export default function AliPlayer({
+  className,
+  options,
+  onReady = () => undefined
+}) {
+  const { id = 'ali-player', components = [] } = options
+
+  useEffect(() => {
+    let aliPlayer
+    const init = async () => {
+      loadCSS(playerCSS)
+      await loadJS(playerJS)
+      await loadJS(playerHLS)
+      await loadJS(playerComponents)
+      aliPlayer = new window.Aliplayer({
+        id,
+        ...options,
+        components: components.map((comp) => ({
+          ...comp,
+          type: window.AliPlayerComponent[comp.name]
+        }))
+      }, (player) => {
+        onReady(player)
+      })
+    }
+    init()
+    return () => {
+      if (aliPlayer) {
+        aliPlayer.dispose()
+        aliPlayer = null
+      }
+    }
+  }, [])
+  return (
+    <div id={id} className={className} />
+  )
+}

package/src/component/Avatar/index.jsx

@@ -0,0 +1,52 @@
+import React, { useState } from 'react'
+import classNames from 'classnames'
+import { importImg } from '@/util/ImportImg'
+
+const defaultAvatar = importImg('@/asset/img/def-avatar.jpg')
+
+function Avatar({
+  onError = () => {},
+  errorImg,
+  title,
+  titleCls,
+  ...restProps
+}) {
+  const [isError, setIsError] = useState(false)
+  const [titleVisible, setTitleVisible] = useState(false)
+  const handleAvatarError = (e) => {
+    const fallbackImg = errorImg || defaultAvatar
+    if (fallbackImg !== e.target.src) {
+      e.target.src = errorImg || defaultAvatar
+      setTitleVisible(true)
+      setIsError(true)
+    }
+    onError()
+  }
+  if ((title && titleVisible) || (title && restProps.src === errorImg)) {
+    return (
+      <>
+        <div className={titleCls}>
+          {title}
+        </div>
+        <img
+          {...restProps}
+          className={classNames(restProps.className, {
+            'image-error': isError
+          })}
+          onError={handleAvatarError}
+        />
+      </>
+    )
+  }
+  return (
+    <img
+      {...restProps}
+      className={classNames(restProps.className, {
+        'image-error': isError
+      })}
+      onError={handleAvatarError}
+    />
+  )
+}
+
+export default Avatar

package/src/component/Empty/index.jsx

@@ -0,0 +1,36 @@
+import React from 'react'
+import classNames from 'classnames'
+
+import style from './index.module.less'
+
+const emptyImg = '@/component/Empty/img/empty.png'
+
+export default function Empty({
+  hideBack = false,
+  tip = '哎呀，该内容被下架了',
+  description,
+  buttonRender,
+  className,
+  url = '/'
+}) {
+  const handleLinkClick = () => {
+  }
+
+  return (
+    <div className={classNames(style['empty-wrap'], className)}>
+      <img src={emptyImg} alt="" />
+      <p>{tip}</p>
+      {description}
+      {!hideBack && (buttonRender
+        || (
+          <a
+            className={style['go-other']}
+            onClick={handleLinkClick}
+            to={url}
+          >
+            看看其它的
+          </a>
+        ))}
+    </div>
+  )
+}

package/src/component/Empty/index.module.less

@@ -0,0 +1,37 @@
+.empty-wrap {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  flex-wrap: wrap;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background: #FFFFFF;
+  border-radius: 8px;
+  padding: 80px 0;
+
+  img {
+    width: 258px;
+    height: 176px;
+  }
+
+  p {
+    font-size: 16px;
+    font-weight: 400;
+    color: #333333;
+    line-height: 24px;
+    margin-bottom: 24px;
+  }
+  
+  .go-other {
+    height: 32px;
+    line-height: 32px;
+    padding: 0 15px;
+    background: rgba(30, 98, 236, 0.1);
+    border-radius: 20px;
+    font-size: 16px;
+    font-weight: 400;
+    color: #1E62EC;
+    border: 0;
+  }
+}

package/src/component/IMChatroom/component/status/403.jsx

@@ -0,0 +1,13 @@
+import React from 'react'
+
+export default function Error403() {
+  return (
+    <div>
+      您没有权限访问此页面!
+      {}
+      <a href="#" onClick={() => {}}>
+        ❮ 返回
+      </a>
+    </div>
+  )
+}