@x-edu/live-player 0.0.19 → 0.0.21

package/src/detail/index.module.less

@@ -1,189 +1,189 @@
-.public-live-detail-wrapper {
-  max-width: 1300px;
-  margin: 0 auto;
-
-  .live-panel {
-    margin-top: 42px;
-    padding: 32px 50px 24px;
-    border-radius: 12px;
-    background-color: #fff;
-    box-shadow: 0px 0px 20px 0px rgba(153, 153, 153, 0.1);
-  }
-  .live-title {
-    display: flex;
-    align-items: center;
-  }
-  .live-online-count {
-    margin: 0 8px;
-  }
-  
-  .live-end {
-    color: #7F7F7F;
-    padding: 2px 5px;
-    margin-left: 10px;
-    border-radius: 5px;
-    background-color: #D7D7D7;
-  }
-
-  .live-video-wrapper {
-    height: auto;
-
-    .live-line-switch {
-      margin-top: 5px;
-    }
-  }
-
-  .live-name {
-    font-size: 20px;
-    line-height: 36px;
-    font-weight: bold;
-  }
-
-  .live-info {
-    display: flex;
-    align-items: center;
-    height: 30px;
-    line-height: 30px;
-    margin-top: 12px;
-    font-size: 14px;
-    color: #333;
-    margin-bottom: 26px;
-
-    .live-user {
-      display: flex;
-      margin-right: 41px;
-      align-items: center;
-
-      span {
-        display: inline-block;
-        max-width: 500px;
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-      }
-
-      &.empty-user {
-        display: none;
-      }
-    }
-
-    .avatar {
-      display: inline-block;
-      width: 30px;
-      height: 30px;
-      margin-right: 8px;
-      border-radius: 15px;
-    }
-
-    .live-time {
-      display: flex;
-      align-items: center;
-      span {
-        color: #7F7F7F;
-        vertical-align: middle;
-      }
-    }
-
-    .icon-time {
-      font-size: 16px;
-      color: #7F7F7F;
-      vertical-align: middle;
-      margin-right: 6px;
-    }
-  }
-  
-  .live-description-panel {
-    padding: 16px 50px;
-    margin: 32px 0;
-    border-radius: 12px;
-    background-color: #fff;
-    box-shadow: 0px 0px 20px 0px rgba(153, 153, 153, 0.1);
-
-    .desc-title {
-      font-size: 20px;
-      margin: 10px 0;
-      font-weight: bold;
-    }
-
-    .desc-content {
-      margin-top: 10px;
-      display: flex;
-      justify-content: flex-start;
-      align-items: center;
-    }
-
-    .desc-content-img {
-      max-width: 100%;
-    }
-  }
-}
-
-.live-empty {
-  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);
-  }
-  .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 {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  height: 675px;
-
-  .chatroom-wrap {
-    border: 1px solid #eee;
-    flex: 0 0 300px;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    .chatroom-title {
-      height: 50px;
-      font-size: 18px;
-      padding: 10px;
-      width: 100%;
-      border-bottom: 1px solid #eee;
-    }
-    .chatroom-top-hint {
-      background: #efefef;
-      height: 80px;
-      padding: 6px;
-    }
-    :global {
-      .pc {
-        height: calc(100% - 130px);
-        flex: 1 1 auto;
-        width: 100%;
-      }
-    }
-  }
+.public-live-detail-wrapper {
+  max-width: 1300px;
+  margin: 0 auto;
+
+  .live-panel {
+    margin-top: 42px;
+    padding: 32px 50px 24px;
+    border-radius: 12px;
+    background-color: #fff;
+    box-shadow: 0px 0px 20px 0px rgba(153, 153, 153, 0.1);
+  }
+  .live-title {
+    display: flex;
+    align-items: center;
+  }
+  .live-online-count {
+    margin: 0 8px;
+  }
+  
+  .live-end {
+    color: #7F7F7F;
+    padding: 2px 5px;
+    margin-left: 10px;
+    border-radius: 5px;
+    background-color: #D7D7D7;
+  }
+
+  .live-video-wrapper {
+    height: auto;
+
+    .live-line-switch {
+      margin-top: 5px;
+    }
+  }
+
+  .live-name {
+    font-size: 20px;
+    line-height: 36px;
+    font-weight: bold;
+  }
+
+  .live-info {
+    display: flex;
+    align-items: center;
+    height: 30px;
+    line-height: 30px;
+    margin-top: 12px;
+    font-size: 14px;
+    color: #333;
+    margin-bottom: 26px;
+
+    .live-user {
+      display: flex;
+      margin-right: 41px;
+      align-items: center;
+
+      span {
+        display: inline-block;
+        max-width: 500px;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+
+      &.empty-user {
+        display: none;
+      }
+    }
+
+    .avatar {
+      display: inline-block;
+      width: 30px;
+      height: 30px;
+      margin-right: 8px;
+      border-radius: 15px;
+    }
+
+    .live-time {
+      display: flex;
+      align-items: center;
+      span {
+        color: #7F7F7F;
+        vertical-align: middle;
+      }
+    }
+
+    .icon-time {
+      font-size: 16px;
+      color: #7F7F7F;
+      vertical-align: middle;
+      margin-right: 6px;
+    }
+  }
+  
+  .live-description-panel {
+    padding: 16px 50px;
+    margin: 32px 0;
+    border-radius: 12px;
+    background-color: #fff;
+    box-shadow: 0px 0px 20px 0px rgba(153, 153, 153, 0.1);
+
+    .desc-title {
+      font-size: 20px;
+      margin: 10px 0;
+      font-weight: bold;
+    }
+
+    .desc-content {
+      margin-top: 10px;
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+    }
+
+    .desc-content-img {
+      max-width: 100%;
+    }
+  }
+}
+
+.live-empty {
+  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);
+  }
+  .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 {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 675px;
+
+  .chatroom-wrap {
+    border: 1px solid #eee;
+    flex: 0 0 300px;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    .chatroom-title {
+      height: 50px;
+      font-size: 18px;
+      padding: 10px;
+      width: 100%;
+      border-bottom: 1px solid #eee;
+    }
+    .chatroom-top-hint {
+      background: #efefef;
+      height: 80px;
+      padding: 6px;
+    }
+    :global {
+      .pc {
+        height: calc(100% - 130px);
+        flex: 1 1 auto;
+        width: 100%;
+      }
+    }
+  }
 }

package/src/hook/useAsync.js

@@ -1,84 +1,84 @@
-import { useState, useMemo, useEffect } from 'react'
-import throttle from 'lodash/throttle'
-import reactDom from 'react-dom'
-
-/**
- * useAsync
- *
- * Notice: 所有参数不应发生变化
- *
- * @param {function} fn 执行函数
- * @param {object} options
- * @param {number?} options.throttleInterval 默认0不生效
- * @param {number?} options.loadingDelay 默认0不生效
- * @param {string?} options.cacheKey 默认不Cache
- * @returns {object} { }
- */
-export default function useAsync(fn, {
-  throttleInterval = 0,
-  loadingDelay = 0,
-  immediate = false
-} = {}) {
-  const [hasRequested, setHasRequested] = useState(false)
-  const [loading, setLoading] = useState(false)
-  const [data, setData] = useState()
-  const [error, setError] = useState()
-
-  const run = useMemo(() => {
-    const execFn = async (...args) => {
-      let result
-      setLoading(true)
-      setHasRequested(true)
-      try {
-        result = await fn(...args)
-      } catch (e) {
-        if (loadingDelay) {
-          await sleep(loadingDelay)
-        }
-        batchSet(() => {
-          setLoading(false)
-          setError(e)
-        })
-      }
-      if (loadingDelay) {
-        await sleep(loadingDelay)
-      }
-      batchSet(() => {
-        setLoading(false)
-        setData(result)
-      })
-    }
-    if (throttleInterval) {
-      return throttle(execFn, throttleInterval, {
-        leading: true,
-        trailing: true
-      })
-    } else {
-      return execFn
-    }
-  }, [])
-
-  useEffect(() => {
-    if (immediate) {
-      run()
-    }
-  }, [immediate])
-
-  return {
-    hasRequested,
-    loading,
-    data,
-    error,
-    run
-  }
-}
-
-function batchSet(fn) {
-  reactDom.unstable_batchedUpdates(fn)
-}
-
-function sleep(ms) {
-  return new Promise((resolve) => {
-    setTimeout(resolve, ms)
-  })
-}
+import { useState, useMemo, useEffect } from 'react'
+import throttle from 'lodash/throttle'
+import reactDom from 'react-dom'
+
+/**
+ * useAsync
+ *
+ * Notice: 所有参数不应发生变化
+ *
+ * @param {function} fn 执行函数
+ * @param {object} options
+ * @param {number?} options.throttleInterval 默认0不生效
+ * @param {number?} options.loadingDelay 默认0不生效
+ * @param {string?} options.cacheKey 默认不Cache
+ * @returns {object} { }
+ */
+export default function useAsync(fn, {
+  throttleInterval = 0,
+  loadingDelay = 0,
+  immediate = false
+} = {}) {
+  const [hasRequested, setHasRequested] = useState(false)
+  const [loading, setLoading] = useState(false)
+  const [data, setData] = useState()
+  const [error, setError] = useState()
+
+  const run = useMemo(() => {
+    const execFn = async (...args) => {
+      let result
+      setLoading(true)
+      setHasRequested(true)
+      try {
+        result = await fn(...args)
+      } catch (e) {
+        if (loadingDelay) {
+          await sleep(loadingDelay)
+        }
+        batchSet(() => {
+          setLoading(false)
+          setError(e)
+        })
+      }
+      if (loadingDelay) {
+        await sleep(loadingDelay)
+      }
+      batchSet(() => {
+        setLoading(false)
+        setData(result)
+      })
+    }
+    if (throttleInterval) {
+      return throttle(execFn, throttleInterval, {
+        leading: true,
+        trailing: true
+      })
+    } else {
+      return execFn
+    }
+  }, [])
+
+  useEffect(() => {
+    if (immediate) {
+      run()
+    }
+  }, [immediate])
+
+  return {
+    hasRequested,
+    loading,
+    data,
+    error,
+    run
+  }
+}
+
+function batchSet(fn) {
+  reactDom.unstable_batchedUpdates(fn)
+}
+
+function sleep(ms) {
+  return new Promise((resolve) => {
+    setTimeout(resolve, ms)
+  })
+}