@x-edu/live-player 0.0.1

package/src/component/VideoBase/index.jsx

@@ -0,0 +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>
+  )
+}

package/src/component/VideoBase/style.less

@@ -0,0 +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;
+    }
+  }
+}

package/src/component/VideoBase/utils.js

@@ -0,0 +1,81 @@
+export function srt2webvtt(data) {
+  // remove dos newlines
+  let srt = data.replace(/\r+/g, '')
+  // trim white space start and end
+  srt = srt.replace(/^\s+|\s+$/g, '')
+
+  // get cues
+  const cuelist = srt.split('\n\n')
+  let result = ''
+
+  if (cuelist.length > 0) {
+    result += 'WEBVTT\n\n'
+    for (let i = 0; i < cuelist.length; i += 1) {
+      result += convertSrtCue(cuelist[i])
+    }
+  }
+
+  return result
+}
+
+function convertSrtCue(caption) {
+  let cue = ''
+  const s = caption.split(/\n/)
+
+  // concatenate muilt-line string separated in array into one
+  while (s.length > 3) {
+    for (let i = 3; i < s.length; i++) {
+      s[2] += `\n${s[i]}`
+    }
+    s.splice(3, s.length - 3)
+  }
+
+  let line = 0
+
+  // detect identifier
+  if (!s[0].match(/\d+:\d+:\d+/) && s[1].match(/\d+:\d+:\d+/)) {
+    cue += `${s[0].match(/\w+/)}\n`
+    line += 1
+  }
+
+  // get time strings
+  if (s[line].match(/\d+:\d+:\d+/)) {
+    // convert time string
+    const m = s[1].match(
+      /(\d+):(\d+):(\d+)(?:,(\d+))?\s*--?>\s*(\d+):(\d+):(\d+)(?:,(\d+))?/
+    )
+    if (m) {
+      cue += `${m[1]}:${m[2]}:${m[3]}.${m[4]} --> ${m[5]}:${m[6]}:${m[7]}.${m[8]}\n`
+      line += 1
+    } else {
+      // Unrecognized timestring
+      return ''
+    }
+  } else {
+    // file format error or comment lines
+    return ''
+  }
+
+  // get cue text
+  if (s[line]) {
+    cue += `${s[line]}\n\n`
+  }
+
+  return cue
+}
+
+export function string2buffer(str) {
+  // 首先将字符串转为16进制
+  let val = ''
+  for (let i = 0; i < str.length; i++) {
+    if (val === '') {
+      val = str.charCodeAt(i).toString(16)
+    } else {
+      val += `,${str.charCodeAt(i).toString(16)}`
+    }
+  }
+  // 将16进制转化为ArrayBuffer
+  return new Uint8Array(
+    val.match(/[\da-f]{2}/gi).map((h) => parseInt(h, 16))
+  ).buffer
+}

package/src/component/mixin.less

@@ -0,0 +1,10 @@
+.ellipsis() {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.bgCompact(@url) {
+  background-image: url(@url);
+  background-repeat: no-repeat;
+}

package/src/component/status/403.jsx

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

package/src/component/status/404/index.jsx

@@ -0,0 +1,73 @@
+import React, { useEffect, useState } from 'react'
+import { Link, useLocation } from 'react-router-dom'
+import classNames from 'classnames'
+import Cookies from 'js-cookie'
+import Image from '@/component/Image'
+import { getAreaSiteList, getSiteInfo } from '@/service/area-site'
+import Area from '@/page/area'
+
+import style from './index.module.less'
+
+const errorImg = '@/component/status/404/img/404.png'
+
+const Error404 = ({ className, tip = '服务器开小差了，请稍后再试试', isBack = true }) => {
+  const { pathname, search } = useLocation()
+  const [loading, setLoading] = useState(true)
+  const [microAreaSite, setMicroAreaSite] = useState(null)
+  const [microAreaSiteList, setMicroAreaSiteList] = useState(null)
+
+  useEffect(() => {
+    async function load() {
+      try {
+        let siteList = window.areaSiteList
+        if (!siteList) {
+          // TODO: 后续可能做本地持久化优化，以及子站路由地址优化
+          siteList = await getAreaSiteList()
+        }
+        const skipAreaSiteList = search.includes('_skip_area_sitelist=1') || !!Cookies.get('skipAreaSiteList') || false
+        if (skipAreaSiteList) {
+          // 有很多页面是新页面打开，会话cookie是在浏览器关闭时才会清除，所以要用会话cookie 存储 skipAreaSiteList
+          Cookies.set('skipAreaSiteList', '1')
+        }
+        setMicroAreaSiteList(siteList)
+        if (siteList || skipAreaSiteList) {
+          window.areaSiteList = siteList
+          const code = window.location.pathname.split('/')[1]
+          const site = siteList.find((t) => t.code === code)
+          if ((site && site.domain) || skipAreaSiteList) {
+            const siteInfo = await getSiteInfo(code)
+            setMicroAreaSite(siteInfo)
+            setLoading(false)
+            // window.location.replace(site.domain + window.location.pathname.replace(code, 'area') + window.location.search + window.location.hash)
+          } else {
+            setLoading(false)
+          }
+        }
+      } catch (e) {
+        setLoading(false)
+      }
+    }
+    setLoading(true)
+    load()
+  }, [pathname, search])
+
+  if (loading) {
+    return null
+  }
+
+  if (microAreaSite) {
+    return (
+      <Area siteList={microAreaSiteList} site={microAreaSite} />
+    )
+  }
+
+  return (
+    <div className={classNames(style.error, className)}>
+      <Image src={errorImg} />
+      <div className={style.text}>{tip}</div>
+      {isBack && <Link className={style.back} to="/">返回首页</Link>}
+    </div>
+  )
+}
+
+export default Error404

package/src/component/status/404/index.module.less

@@ -0,0 +1,36 @@
+.error {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background: #FFFFFF;
+  border-radius: 8px;
+  padding: 80px 0;
+  min-height: 70vh;
+
+  img {
+    width: 254px;
+    height: 174px;
+  }
+
+ .text {
+    font-size: 16px;
+    color: #666666;
+    line-height: 24px;
+    margin-top: 38px;
+  }
+  
+  .back {
+    margin-top: 24px;
+    width: 119px;
+    background: #EAEEFD;
+    height: 38px;
+    line-height: 38px;
+    border-radius: 20px;
+    font-size: 16px;
+    color: #206CED;
+    text-align: center;
+  }
+}

package/src/component/status/Error/error.module.less

@@ -0,0 +1,14 @@
+.error-wrap {
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+
+  :global {
+    .fish-collapse > .fish-collapse-item > .fish-collapse-header {
+      padding-top: 5px;
+      padding-bottom: 5px;
+    }
+  }
+}

package/src/component/status/Error/index.jsx

@@ -0,0 +1,47 @@
+import React from 'react'
+import { Collapse } from 'fish'
+import Image from '@/component/Image'
+
+import style from './error.module.less'
+
+const { Panel } = Collapse
+const errorImg = '@/component/status/Error/img/error.png'
+
+export default function Error({
+  title,
+  desc,
+  error
+}) {
+  let displayTitle = title
+  // 此类错误 toast已经拦截
+  if (error && error.isAxiosError) {
+    if (!title) {
+      displayTitle = '很抱歉，网络开小差了，请重试'
+    }
+  }
+  return (
+    <div className={style['error-wrap']}>
+      <Image src={errorImg} alt="" />
+      <h2>
+        {displayTitle || '加载组件时发生了一些异常'}
+      </h2>
+      { desc ? <span>{desc}</span> : null }
+      {
+        error ? (
+          <>
+            <Collapse>
+              <Panel header="错误信息" key="1">
+                <pre style={{
+                  color: 'red'
+                }}
+                >
+                  { error && error.stack}
+                </pre>
+              </Panel>
+            </Collapse>
+          </>
+        ) : null
+      }
+    </div>
+  )
+}