@x-edu/live-player 0.0.21 → 0.0.23

package/src/component/VideoBase/index.jsx

@@ -1,242 +1,242 @@
-import React, { useState, useEffect } from 'react'
-import { Video } from 'fish'
-
-import config from '@/config/env'
-import api from '@/config/request/raw'
-import { showPlayerTip } from '@/util/video'
-import {
-  srt2webvtt
-} from './utils'
-import PlayerTip from '../PlayerTip'
-
-import './style.less'
-
-Video.url = config.app.videoUrl
-
-const hlsOptions = {
-  nativeAudioTracks: false,
-  nativeVideoTracks: false,
-  hls: {
-    overrideNative: true
-  }
-}
-
-const defaultOptions = {
-  controls: true,
-  techOrder: ['html5', 'flash'],
-  plugins: {
-    videoJsResolutionSwitcher: {
-      default: 'high',
-      dynamicLabel: true
-    }
-  },
-  playbackRates: [0.5, 1, 1.25, 1.5, 2],
-  width: 788,
-  height: 444,
-  flash: hlsOptions,
-  html5: hlsOptions
-}
-
-let player = null
-
-/**
- * @typedef {Object} Options 兼容fish Video的所有参数
- * @property {Array<{src: string}>?} Options.tracks 字幕文件地址
- * @property {string?} Options.mediaType mediaType
- *
- * @param {Object} props
- * @param {Options} props.options
- * @param {Object} props.currentResource //TODO 获取视频总长度
- * @param {(time: string) => void} props.onTimeUpdate 播放时间变化事件
- * @param {(state: boolean) => void} props.onPlayChange 播放状态变化事件true为正在播放，false为暂停
- * @param {(state: player) => void} props.onPlayFinish 播放完成事件
- * @param {string?} props.beginTime 开始时间, 单位秒
- * @param {boolean} props.showReload 是否显示再学一遍, 默认显示
- * @returns
- */
-export default function VideoBase({
-  options,
-  onReady = () => undefined,
-  onTimeUpdate: handleTimeUpdate = () => undefined,
-  onReload = () => undefined,
-  onPlayChange = () => undefined,
-  onPlayFinish = () => undefined,
-  showReload = true,
-  aspectRatio,
-  beginTime,
-  ...restProps
-}) {
-  const [readyToInitVideo, setReadyToInitVideo] = useState(false)
-  const [isEnd, setIsEnd] = useState(false)
-
-  const model = {
-    playerSources: [],
-    duration: 0, // 视频时长
-    isFirstPlay: true,
-    player: null,
-    resourceData: {
-      beginPos: beginTime || 0
-    },
-    location: null // 笔记路由位置信息
-  }
-
-  const getVttText = (url, tracks, i, count, callback) => {
-    api
-      .get(url)
-      .then((data) => {
-        const vttText = srt2webvtt(data.data.toString())
-        const vttBlob = new Blob([vttText], {
-          type: 'text/vtt'
-        })
-        tracks[i].src = URL.createObjectURL(vttBlob)
-        callback()
-        if (count === tracks.length) {
-          setReadyToInitVideo(true)
-        }
-      })
-      .catch(() => {
-        callback()
-        if (count === tracks.length) {
-          setReadyToInitVideo(true)
-        }
-      })
-  }
-
-  useEffect(() => {
-    const tracks = options.tracks || []
-    let count = 0 // 计数，确保每一个字幕都转vtt
-    const callback = () => { count += 1 }
-    if (tracks.length) {
-      for (let i = 0; i < tracks.length; i++) {
-        const url = tracks[i].src
-        if (url) {
-          getVttText(url, tracks, i, count, callback)
-        }
-      }
-    }
-    setReadyToInitVideo(true)
-
-    // win7 IE11 m3u8：提示升级浏览器
-    const sources = options?.sources || []
-    if (sources.length !== 0 && showPlayerTip(sources[0].src)) {
-      PlayerTip()
-    }
-  }, [])
-
-  const quit = () => {
-    // quitSensors()
-  }
-
-  useEffect(() => {
-    // 关闭页面、刷新时触发
-    window.addEventListener('beforeunload', quit)
-
-    return () => {
-      quit()
-      window.removeEventListener('beforeunload', quit)
-    }
-  }, [])
-
-  const onCanplay = () => {
-    const { beginPos } = model.resourceData
-    if (
-      model.isFirstPlay && beginPos
-    ) {
-      player.currentTime(
-        model.location !== undefined && model.location !== null
-          ? model.location
-          : beginPos
-      ) // 如果从笔记路由跳转则定位到笔记记录观看点 || 上次观看位置
-      if (player.currentTime()) {
-        model.isFirstPlay = false
-      }
-    }
-  }
-
-  const getCurrentTime = () => player.currentTime().toFixed?.(0) * 1
-
-  const onTimeUpdate = () => {
-    handleTimeUpdate(getCurrentTime(), player)
-  }
-
-  const onPause = () => {
-    onPlayChange(false, player)
-  }
-
-  const onFinish = () => {
-    model.isFinish = true
-    onPlayChange(false, player)
-    setIsEnd(true)
-    onPlayFinish(player)
-  }
-
-  const onStart = () => {
-    onPlayChange(true, player)
-    model.resourceData.beginTime = (new Date().getTime() / 1000).toFixed(0) * 1
-  }
-
-  const onSeeking = () => {
-    onPlayChange(false, player)
-  }
-
-  const handleReady = (v, playerIns) => {
-    onReady(v, playerIns)
-    player = playerIns
-    player.on('canplay', onCanplay)
-    player.on('play', onStart)
-    player.on('timeupdate', onTimeUpdate)
-    player.on('pause', onPause)
-    player.on('seeking', onSeeking)
-    player.on('ended', onFinish)
-  }
-
-  const getCourseVideoStyle = () => {
-    let paddingBottom = ''
-    if (aspectRatio) {
-      paddingBottom = `${(aspectRatio * 100).toFixed(2)}%`
-    }
-
-    if (!paddingBottom) return null
-    return {
-      height: 0,
-      paddingBottom
-    }
-  }
-
-  return (
-    <div
-      className={`course-video ${aspectRatio ? 'fixed-radio' : ''}`}
-      style={getCourseVideoStyle()}
-    >
-      {isEnd && showReload && (
-        <div className="course-video-reload-main">
-          <div className="course-video-none" />
-          <div
-            className="course-video-reload"
-            onClick={() => {
-              player.play()
-              setIsEnd(false)
-              onReload()
-            }}
-          >
-            再学一遍
-            <div className="course-video-reload-icon" />
-          </div>
-        </div>
-      )}
-      {readyToInitVideo && (
-        <Video
-          className="fish-ndrVideo vjs-big-play-centered"
-          options={{
-            ...defaultOptions,
-            ...options,
-            dragTime: model.resourceData.beginPos
-          }}
-          onReady={handleReady}
-          mediaType={options.mediaType || 'video'}
-          {...restProps}
-        />
-      )}
-    </div>
-  )
-}
+import React, { useState, useEffect } from 'react'
+import { Video } from 'fish'
+
+import config from '@/config/env'
+import api from '@/config/request/raw'
+import { showPlayerTip } from '@/util/video'
+import {
+  srt2webvtt
+} from './utils'
+import PlayerTip from '../PlayerTip'
+
+import './style.less'
+
+Video.url = config.app.videoUrl
+
+const hlsOptions = {
+  nativeAudioTracks: false,
+  nativeVideoTracks: false,
+  hls: {
+    overrideNative: true
+  }
+}
+
+const defaultOptions = {
+  controls: true,
+  techOrder: ['html5', 'flash'],
+  plugins: {
+    videoJsResolutionSwitcher: {
+      default: 'high',
+      dynamicLabel: true
+    }
+  },
+  playbackRates: [0.5, 1, 1.25, 1.5, 2],
+  width: 788,
+  height: 444,
+  flash: hlsOptions,
+  html5: hlsOptions
+}
+
+let player = null
+
+/**
+ * @typedef {Object} Options 兼容fish Video的所有参数
+ * @property {Array<{src: string}>?} Options.tracks 字幕文件地址
+ * @property {string?} Options.mediaType mediaType
+ *
+ * @param {Object} props
+ * @param {Options} props.options
+ * @param {Object} props.currentResource //TODO 获取视频总长度
+ * @param {(time: string) => void} props.onTimeUpdate 播放时间变化事件
+ * @param {(state: boolean) => void} props.onPlayChange 播放状态变化事件true为正在播放，false为暂停
+ * @param {(state: player) => void} props.onPlayFinish 播放完成事件
+ * @param {string?} props.beginTime 开始时间, 单位秒
+ * @param {boolean} props.showReload 是否显示再学一遍, 默认显示
+ * @returns
+ */
+export default function VideoBase({
+  options,
+  onReady = () => undefined,
+  onTimeUpdate: handleTimeUpdate = () => undefined,
+  onReload = () => undefined,
+  onPlayChange = () => undefined,
+  onPlayFinish = () => undefined,
+  showReload = true,
+  aspectRatio,
+  beginTime,
+  ...restProps
+}) {
+  const [readyToInitVideo, setReadyToInitVideo] = useState(false)
+  const [isEnd, setIsEnd] = useState(false)
+
+  const model = {
+    playerSources: [],
+    duration: 0, // 视频时长
+    isFirstPlay: true,
+    player: null,
+    resourceData: {
+      beginPos: beginTime || 0
+    },
+    location: null // 笔记路由位置信息
+  }
+
+  const getVttText = (url, tracks, i, count, callback) => {
+    api
+      .get(url)
+      .then((data) => {
+        const vttText = srt2webvtt(data.data.toString())
+        const vttBlob = new Blob([vttText], {
+          type: 'text/vtt'
+        })
+        tracks[i].src = URL.createObjectURL(vttBlob)
+        callback()
+        if (count === tracks.length) {
+          setReadyToInitVideo(true)
+        }
+      })
+      .catch(() => {
+        callback()
+        if (count === tracks.length) {
+          setReadyToInitVideo(true)
+        }
+      })
+  }
+
+  useEffect(() => {
+    const tracks = options.tracks || []
+    let count = 0 // 计数，确保每一个字幕都转vtt
+    const callback = () => { count += 1 }
+    if (tracks.length) {
+      for (let i = 0; i < tracks.length; i++) {
+        const url = tracks[i].src
+        if (url) {
+          getVttText(url, tracks, i, count, callback)
+        }
+      }
+    }
+    setReadyToInitVideo(true)
+
+    // win7 IE11 m3u8：提示升级浏览器
+    const sources = options?.sources || []
+    if (sources.length !== 0 && showPlayerTip(sources[0].src)) {
+      PlayerTip()
+    }
+  }, [])
+
+  const quit = () => {
+    // quitSensors()
+  }
+
+  useEffect(() => {
+    // 关闭页面、刷新时触发
+    window.addEventListener('beforeunload', quit)
+
+    return () => {
+      quit()
+      window.removeEventListener('beforeunload', quit)
+    }
+  }, [])
+
+  const onCanplay = () => {
+    const { beginPos } = model.resourceData
+    if (
+      model.isFirstPlay && beginPos
+    ) {
+      player.currentTime(
+        model.location !== undefined && model.location !== null
+          ? model.location
+          : beginPos
+      ) // 如果从笔记路由跳转则定位到笔记记录观看点 || 上次观看位置
+      if (player.currentTime()) {
+        model.isFirstPlay = false
+      }
+    }
+  }
+
+  const getCurrentTime = () => player.currentTime().toFixed?.(0) * 1
+
+  const onTimeUpdate = () => {
+    handleTimeUpdate(getCurrentTime(), player)
+  }
+
+  const onPause = () => {
+    onPlayChange(false, player)
+  }
+
+  const onFinish = () => {
+    model.isFinish = true
+    onPlayChange(false, player)
+    setIsEnd(true)
+    onPlayFinish(player)
+  }
+
+  const onStart = () => {
+    onPlayChange(true, player)
+    model.resourceData.beginTime = (new Date().getTime() / 1000).toFixed(0) * 1
+  }
+
+  const onSeeking = () => {
+    onPlayChange(false, player)
+  }
+
+  const handleReady = (v, playerIns) => {
+    onReady(v, playerIns)
+    player = playerIns
+    player.on('canplay', onCanplay)
+    player.on('play', onStart)
+    player.on('timeupdate', onTimeUpdate)
+    player.on('pause', onPause)
+    player.on('seeking', onSeeking)
+    player.on('ended', onFinish)
+  }
+
+  const getCourseVideoStyle = () => {
+    let paddingBottom = ''
+    if (aspectRatio) {
+      paddingBottom = `${(aspectRatio * 100).toFixed(2)}%`
+    }
+
+    if (!paddingBottom) return null
+    return {
+      height: 0,
+      paddingBottom
+    }
+  }
+
+  return (
+    <div
+      className={`course-video ${aspectRatio ? 'fixed-radio' : ''}`}
+      style={getCourseVideoStyle()}
+    >
+      {isEnd && showReload && (
+        <div className="course-video-reload-main">
+          <div className="course-video-none" />
+          <div
+            className="course-video-reload"
+            onClick={() => {
+              player.play()
+              setIsEnd(false)
+              onReload()
+            }}
+          >
+            再学一遍
+            <div className="course-video-reload-icon" />
+          </div>
+        </div>
+      )}
+      {readyToInitVideo && (
+        <Video
+          className="fish-ndrVideo vjs-big-play-centered"
+          options={{
+            ...defaultOptions,
+            ...options,
+            dragTime: model.resourceData.beginPos
+          }}
+          onReady={handleReady}
+          mediaType={options.mediaType || 'video'}
+          {...restProps}
+        />
+      )}
+    </div>
+  )
+}

package/src/component/VideoBase/style.less

@@ -1,66 +1,66 @@
-@import '@/component/mixin.less';
-@imgPath: '/src/asset/img/course';
-
-.course-video {
-  position: relative;
-  height: 100%;
-  width: 100%;
-  background-color: #000;
-  .course-video-reload-main {
-    position: absolute;
-    height: 100%;
-    width: 100%;
-    top: 0;
-    left: 0;
-    z-index: 100;
-    vertical-align: middle;
-    text-align: center;
-
-    .course-video-none {
-      height: 100%;
-      width: 0;
-      vertical-align: middle;
-      display: inline-block;
-    }
-
-    .course-video-reload {
-      vertical-align: middle;
-      display: inline-block;
-      font-size: 16px;
-      padding: 11px 45px;
-      color: #FFFFFF;
-      background: rgba(0, 0, 0, 0.6);
-      border-radius: 23px;
-      cursor: pointer;
-    }
-
-    .course-video-reload-icon {
-      margin-left: 8px;
-      display: inline-block;
-      height: 19px;
-      width: 19px;
-      vertical-align: middle;
-      background-size: contain;
-      background-position: center;
-      background-repeat: no-repeat;
-      .bgCompact('@{imgPath}/reload.png');
-    }
-  }
-  &.fixed-radio {
-    .fish-video {
-      position: absolute;
-      top: 0;
-      bottom:0;
-      left: 0;
-      right: 0;
-      height: 100%;
-      width: 100%;
-    }
-
-    .fish-ndrVideo {
-      padding-top: 0 !important;
-      height: 100% !important;
-      width: 100% !important;
-    }
-  }
+@import '@/component/mixin.less';
+@imgPath: '/src/asset/img/course';
+
+.course-video {
+  position: relative;
+  height: 100%;
+  width: 100%;
+  background-color: #000;
+  .course-video-reload-main {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    top: 0;
+    left: 0;
+    z-index: 100;
+    vertical-align: middle;
+    text-align: center;
+
+    .course-video-none {
+      height: 100%;
+      width: 0;
+      vertical-align: middle;
+      display: inline-block;
+    }
+
+    .course-video-reload {
+      vertical-align: middle;
+      display: inline-block;
+      font-size: 16px;
+      padding: 11px 45px;
+      color: #FFFFFF;
+      background: rgba(0, 0, 0, 0.6);
+      border-radius: 23px;
+      cursor: pointer;
+    }
+
+    .course-video-reload-icon {
+      margin-left: 8px;
+      display: inline-block;
+      height: 19px;
+      width: 19px;
+      vertical-align: middle;
+      background-size: contain;
+      background-position: center;
+      background-repeat: no-repeat;
+      .bgCompact('@{imgPath}/reload.png');
+    }
+  }
+  &.fixed-radio {
+    .fish-video {
+      position: absolute;
+      top: 0;
+      bottom:0;
+      left: 0;
+      right: 0;
+      height: 100%;
+      width: 100%;
+    }
+
+    .fish-ndrVideo {
+      padding-top: 0 !important;
+      height: 100% !important;
+      width: 100% !important;
+    }
+  }
 }