@x-edu/live-player 0.0.21 → 0.0.23

package/src/component/Pagination/RemotePagination.jsx

@@ -1,32 +1,32 @@
-import React, { useState } from 'react'
-import Pagination from './index'
-
-export default function RemotePagination({
-  total = 0,
-  data,
-  pageSize,
-  defaultPage = 1,
-  renderData,
-  onChange = () => {},
-  ...restProps
-}) {
-  const [currentPage, setCurrentPage] = useState(defaultPage)
-
-  const handlePageChange = (options) => {
-    setCurrentPage(options)
-    onChange(options)
-  }
-
-  return (
-    <>
-      {data.map((dataItem, index) => renderData(dataItem, index))}
-      <Pagination
-        total={total || data.length || 0}
-        current={currentPage}
-        pageSize={pageSize}
-        onChange={handlePageChange}
-        {...restProps}
-      />
-    </>
-  )
-}
+import React, { useState } from 'react'
+import Pagination from './index'
+
+export default function RemotePagination({
+  total = 0,
+  data,
+  pageSize,
+  defaultPage = 1,
+  renderData,
+  onChange = () => {},
+  ...restProps
+}) {
+  const [currentPage, setCurrentPage] = useState(defaultPage)
+
+  const handlePageChange = (options) => {
+    setCurrentPage(options)
+    onChange(options)
+  }
+
+  return (
+    <>
+      {data.map((dataItem, index) => renderData(dataItem, index))}
+      <Pagination
+        total={total || data.length || 0}
+        current={currentPage}
+        pageSize={pageSize}
+        onChange={handlePageChange}
+        {...restProps}
+      />
+    </>
+  )
+}

package/src/component/Pagination/index.jsx

@@ -1,31 +1,32 @@
-import React from 'react'
-import classNames from 'classnames'
-import { Pagination as FishPagination } from 'fish'
-
-import style from './index.module.less'
-
-export default function Pagination(props) {
-  const { className, current, total, pageSize, onChange = () => { }, showSizeChanger = false } = props
-  const pageCount = Math.ceil(total / pageSize)
-
-  if (pageCount > 1) {
-    return (
-      <div className={classNames(style.pagination, className, 'custom-pagination')}>
-        <span className={style['pagination-text']}>
-          {`当前第 ${current} 页/共 ${pageCount} 页，共有 ${total} 条记录`}
-        </span>
-        <FishPagination
-          total={total}
-          current={current}
-          pageSize={pageSize}
-          onChange={onChange}
-          showSizeChanger={showSizeChanger}
-          showQuickJumper={{
-            goButton: false
-          }}
-        />
-      </div>
-    )
-  }
-  return null
-}
+import React from 'react'
+import classNames from 'classnames'
+import { Pagination as FishPagination } from 'fish'
+
+import style from './index.module.less'
+
+export default function Pagination(props) {
+  const { className, current, total, pageSize, onChange = () => { }, showSizeChanger = false } = props
+  const pageCount = Math.ceil(total / pageSize)
+
+  if (pageCount > 1) {
+    return (
+      <div className={classNames(style.pagination, className, 'custom-pagination')}>
+        <span className={style['pagination-text']}>
+          {/*`当前第 ${current} 页/共 ${pageCount} 页，共有 ${total} 条记录`*/}
+          {`共 ${total} 条`}
+        </span>
+        <FishPagination
+          total={total}
+          current={current}
+          pageSize={pageSize}
+          onChange={onChange}
+          showSizeChanger={showSizeChanger}
+          showQuickJumper={{
+            goButton: false
+          }}
+        />
+      </div>
+    )
+  }
+  return null
+}

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

@@ -1,110 +1,117 @@
-@primary-color: #1e62ec;
-
-.pagination {
-  padding-bottom: 24px;
-  margin-top: 64px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-
-  .pagination-text {
-    color: #333;
-    margin-right: 16px;
-  }
-
-  :global(.fish-pagination-prev), :global(.fish-pagination-next) {
-    // display: none;
-    button {
-      border: 0px;
-    }
-  }
-
-  :global(.fish-pagination-item) {
-    width: 32px;
-    height: 32px;
-    line-height: 32px;
-    background: #F5F7FA;
-    // border: 1px solid @primary-color;
-    border: 0px;
-    border-radius: 2px;
-    font-size: 14px;
-    font-weight: 400;
-    color: @primary-color;
-    margin-right: 10px;
-
-    a {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      padding: 0;
-    }
-  }
-
-  :global(.fish-pagination-item:hover) {
-    background: #F5F7FA;
-  }
-
-  :global(.fish-pagination-item-active:hover) {
-    background: @primary-color;
-  }
-
-  :global(.fish-pagination-item-link) {
-    background: #F5F7FA;
-  }
-
-  :global(.fish-pagination-item-link:hover) {
-    background: #F5F7FA;
-  }
-
-  :global(.fish-pagination-item-active) {
-    border-color: @primary-color;
-    background: @primary-color;
-    a {
-      color: #fff;
-    }
-  }
-
-  :global(.fish-pagination-options), :global(.fish-pagination-options-quick-jumper) {
-    margin-left: 8px;
-  }
-
-  :global(.fish-pagination-options-quick-jumper) {
-    :global(input) {
-      // border: 0;
-      background: transparent;
-      border-radius: 0;
-      outline: 0;
-      // border-bottom: 1px solid @primary-color;
-      height: 24px;
-      padding: 1px 7px;
-      width: 44px;
-      text-align: center;
-      &:focus {
-        outline: none;
-        box-shadow: none;
-        border-color: @primary-color;
-      }
-
-      &:hover {
-        border-color: @primary-color;
-      }
-    }
-
-    :global(.fish-pagination-options-quick-jumper-btn) {
-      min-width: 40px;
-      line-height: 32px;
-      height: 32px;
-      margin-left: 12px;
-      background: transparent;
-      border: 0;
-      font-weight: 700;
-      color: @primary-color;
-      &:hover {
-        border-color: @primary-color;
-        background: @primary-color;
-        color: #fff;
-      }
-    }
-  }
-}
+@primary-color: #1e62ec;
+
+.pagination {
+  padding-bottom: 24px;
+  margin-top: 64px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+
+  .pagination-text {
+    color: #666;
+    margin-right: 16px;
+  }
+  :global {
+    .fish-pagination-options-quick-jumper {
+      color: #666;
+    }
+  }
+
+  :global(.fish-pagination-prev), :global(.fish-pagination-next) {
+    // display: none;
+    button {
+      border: 0px;
+    }
+  }
+
+  :global(.fish-pagination-item) {
+    width: 32px;
+    height: 32px;
+    line-height: 32px;
+    background: #F5F7FA;
+    // border: 1px solid @primary-color;
+    border: 0px;
+    border-radius: 2px;
+    font-size: 14px;
+    font-weight: 400;
+    color: @primary-color;
+    margin-right: 10px;
+
+    a {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 0;
+    }
+  }
+
+  :global(.fish-pagination-item:hover) {
+    background: #F5F7FA;
+  }
+
+  :global(.fish-pagination-item-active:hover) {
+    background: @primary-color;
+  }
+
+  :global(.fish-pagination-item-link) {
+    background: #F5F7FA;
+  }
+
+  :global(.fish-pagination-item-link:hover) {
+    background: #F5F7FA;
+  }
+
+  :global(.fish-pagination-item-active) {
+    border-color: @primary-color;
+    background: @primary-color;
+    a {
+      color: #fff;
+    }
+  }
+
+  :global(.fish-pagination-options), :global(.fish-pagination-options-quick-jumper) {
+    margin-left: 8px;
+  }
+
+  :global(.fish-pagination-options-quick-jumper) {
+    :global(input) {
+      // border: 0;
+      background: transparent;
+      border-radius: 0;
+      outline: 0;
+      // border-bottom: 1px solid @primary-color;
+      height: 32px;
+      padding: 1px 7px;
+      width: 44px;
+      text-align: center;
+      border-radius: 2px;
+      border-color:#eee;
+      &:focus {
+        outline: none;
+        box-shadow: none;
+        border-color: @primary-color;
+      }
+
+      &:hover {
+        border-color: @primary-color;
+      }
+    }
+
+    :global(.fish-pagination-options-quick-jumper-btn) {
+      min-width: 40px;
+      line-height: 32px;
+      height: 32px;
+      margin-left: 12px;
+      background: transparent;
+      border: 0;
+      font-weight: 700;
+      color: @primary-color;
+      &:hover {
+        border-color: @primary-color;
+        background: @primary-color;
+        color: #fff;
+      }
+    }
+  }
+}

package/src/component/PlayerTip/index.jsx

@@ -1,34 +1,34 @@
-import React from 'react'
-import { Modal } from 'fish'
-import { updateUrl } from '@/config/constant/commonUrl'
-
-// 播放不支持的视频类型时，提示用户
-const PlayerTip = (top) => {
-  const content = (
-    <div>
-      您的浏览器版本过低，导致播放错误。为了保证更好的使用体验，请升级您的浏览器
-      <a
-        href={updateUrl}
-        target="_blank"
-        rel="noreferrer"
-      >
-        点击此处
-      </a>
-      升级您的浏览器
-    </div>
-  )
-  const position = top ? {
-    style: {
-      top
-    }
-  } : {
-    centered: true
-  }
-  Modal.error({
-    title: '视频无法播放',
-    content,
-    ...position
-  })
-}
-
-export default PlayerTip
+import React from 'react'
+import { Modal } from 'fish'
+import { updateUrl } from '@/config/constant/commonUrl'
+
+// 播放不支持的视频类型时，提示用户
+const PlayerTip = (top) => {
+  const content = (
+    <div>
+      您的浏览器版本过低，导致播放错误。为了保证更好的使用体验，请升级您的浏览器
+      <a
+        href={updateUrl}
+        target="_blank"
+        rel="noreferrer"
+      >
+        点击此处
+      </a>
+      升级您的浏览器
+    </div>
+  )
+  const position = top ? {
+    style: {
+      top
+    }
+  } : {
+    centered: true
+  }
+  Modal.error({
+    title: '视频无法播放',
+    content,
+    ...position
+  })
+}
+
+export default PlayerTip