@x-edu/live-player 0.0.11 → 0.0.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/.gem-mine +11 -11
  2. package/dist/XEduLivePlayer.common.js +987 -480
  3. package/dist/XEduLivePlayerPre.common.js +1042 -535
  4. package/package.json +1 -1
  5. package/public/JsBridge.js +1602 -1602
  6. package/src/component/AliPlayer/index.jsx +7 -4
  7. package/src/detail/LiveStatus/index.jsx +186 -186
  8. package/src/detail/LiveVideo/index.jsx +0 -2
  9. package/src/detail/RecordVideo/index.jsx +148 -150
  10. package/src/detail/index.jsx +501 -475
package/src/detail/RecordVideo/index.jsx CHANGED
@@ -1,150 +1,148 @@
1
- import React, { useState, useEffect, useRef } from 'react'
2
- import { Video } from 'fish'
3
- import dayjs from 'dayjs'
4
- import { PUBLIC_LIVE_STATUS } from '@/config/publicLive'
5
- import { getUrlType, getType } from '@/util/video'
6
- import { getRecordLiveStatus } from '@/util/live'
7
- import LiveStatus from '../LiveStatus'
8
- import style from './index.module.less'
9
-
10
- export default function RecordVideo({
11
- isStreamLive,
12
- userInfo,
13
- liveInfo,
14
- visitTime,
15
- diffTime,
16
- onStatusChange,
17
- onPlayReplay,
18
- onVideoPlay = () => undefined,
19
- onRequestFullScreen = () => undefined
20
- }) {
21
- const isFullScreenRef = useRef(false)
22
- const [isLiveLoading, setIsLiveLoading] = useState(false)
23
- const [isLiveLoadError, setIsLiveLoadError] = useState(false)
24
- const hasPlayed = useRef(false)
25
- const player = useRef()
26
- const endTimer = useRef()
27
- const needLogin = !userInfo && liveInfo.login
28
-
29
- useEffect(() => {
30
- const isLiving = liveInfo.status === PUBLIC_LIVE_STATUS.LIVEING
31
- if (isLiving && needLogin) {
32
- const timeToEnd = dayjs(liveInfo.end_time).valueOf() - (Date.now() - diffTime)
33
- if (timeToEnd > 0) {
34
- endTimer.current = setTimeout(() => {
35
- onStatusChange(PUBLIC_LIVE_STATUS.COMPLETEED)
36
- }, timeToEnd)
37
- }
38
- }
39
-
40
- if (player.current) {
41
- player.current.controls(isLiving && !needLogin)
42
-
43
- // 显示成封面
44
- if (liveInfo.status === PUBLIC_LIVE_STATUS.COMPLETEED || liveInfo.status === PUBLIC_LIVE_STATUS.OFFLINE) {
45
- player.current.autoplay(false)
46
- player.current.load()
47
- }
48
- }
49
-
50
- return () => {
51
- clearTimeout(endTimer.current)
52
- }
53
- }, [liveInfo.status, userInfo])
54
-
55
- const handleVideoReady = (v, playerIns) => {
56
- player.current = playerIns
57
-
58
- playerIns.on('fullscreenchange', () => {
59
- const isFullScreenNow = playerIns.isFullscreen()
60
- if (isFullScreenNow) {
61
- if (!isFullScreenRef.current) {
62
- onRequestFullScreen()
63
- }
64
- isFullScreenRef.current = true
65
- } else {
66
- isFullScreenRef.current = false
67
- }
68
- })
69
- playerIns.on('waiting', () => {
70
- setIsLiveLoading(true)
71
- })
72
- playerIns.on('playing', () => {
73
- setIsLiveLoading(false)
74
- })
75
- playerIns.on('ended', () => {
76
- onStatusChange(PUBLIC_LIVE_STATUS.COMPLETEED)
77
- })
78
- playerIns.on('play', () => {
79
- const currentTime = Date.now() - diffTime
80
- const status = getRecordLiveStatus(liveInfo.status, currentTime, liveInfo.begin_time, liveInfo.end_time)
81
- onStatusChange(status)
82
- if (status === PUBLIC_LIVE_STATUS.LIVEING) {
83
- player.current.currentTime(Math.max(0, (currentTime - dayjs(liveInfo.begin_time).valueOf()) / 1000))
84
- }
85
-
86
- if (!hasPlayed.current) {
87
- onVideoPlay()
88
- }
89
- hasPlayed.current = true
90
-
91
- player.current.autoplay(false)
92
- setIsLiveLoadError(false)
93
- })
94
- playerIns.on('error', () => {
95
- setIsLiveLoadError(true)
96
- })
97
-
98
- const isLiving = liveInfo.status === PUBLIC_LIVE_STATUS.LIVEING
99
- player.current.controls(isLiving && !needLogin)
100
- if (isLiving) {
101
- const currentTime = Math.max(0, (visitTime - dayjs(liveInfo.begin_time).valueOf()) / 1000)
102
- player.current.currentTime(currentTime)
103
- }
104
- }
105
-
106
- const handleVideoReload = () => {
107
- if (player.current) {
108
- player.current.autoplay(true)
109
- player.current.load()
110
- }
111
- }
112
-
113
- const handleStatusChange = (status, params = {}) => {
114
- onStatusChange(status)
115
- if (status === PUBLIC_LIVE_STATUS.LIVEING && params.play) {
116
- player.current.play()
117
- }
118
- }
119
-
120
- const options = {
121
- sources: [{
122
- src: liveInfo.video_url,
123
- type: getType(getUrlType(liveInfo.video_url))
124
- }],
125
- poster: liveInfo.cover_pic_web_url,
126
- autoplay: false
127
- }
128
-
129
- return (
130
- <div className={style['record-video']}>
131
- <Video
132
- className="vjs-big-play-centered"
133
- options={options}
134
- onReady={handleVideoReady}
135
- />
136
- <LiveStatus
137
- isStreamLive={isStreamLive}
138
- userInfo={userInfo}
139
- visitTime={visitTime}
140
- diffTime={diffTime}
141
- liveInfo={liveInfo}
142
- isLiveLoading={isLiveLoading}
143
- isLiveLoadError={isLiveLoadError}
144
- onStatusChange={handleStatusChange}
145
- onPlayReplay={onPlayReplay}
146
- onReloadLive={handleVideoReload}
147
- />
148
- </div>
149
- )
150
- }
1
+ import React, { useState, useEffect, useRef } from 'react'
2
+ import { Video } from 'fish'
3
+ import dayjs from 'dayjs'
4
+ import { PUBLIC_LIVE_STATUS } from '@/config/publicLive'
5
+ import { getUrlType, getType } from '@/util/video'
6
+ import { getRecordLiveStatus } from '@/util/live'
7
+ import LiveStatus from '../LiveStatus'
8
+ import style from './index.module.less'
9
+
10
+ export default function RecordVideo({
11
+ userInfo,
12
+ liveInfo,
13
+ visitTime,
14
+ diffTime,
15
+ onStatusChange,
16
+ onPlayReplay,
17
+ onVideoPlay = () => undefined,
18
+ onRequestFullScreen = () => undefined
19
+ }) {
20
+ const isFullScreenRef = useRef(false)
21
+ const [isLiveLoading, setIsLiveLoading] = useState(false)
22
+ const [isLiveLoadError, setIsLiveLoadError] = useState(false)
23
+ const hasPlayed = useRef(false)
24
+ const player = useRef()
25
+ const endTimer = useRef()
26
+ const needLogin = !userInfo && liveInfo.login
27
+
28
+ useEffect(() => {
29
+ const isLiving = liveInfo.status === PUBLIC_LIVE_STATUS.LIVEING
30
+ if (isLiving && needLogin) {
31
+ const timeToEnd = dayjs(liveInfo.end_time).valueOf() - (Date.now() - diffTime)
32
+ if (timeToEnd > 0) {
33
+ endTimer.current = setTimeout(() => {
34
+ onStatusChange(PUBLIC_LIVE_STATUS.COMPLETEED)
35
+ }, timeToEnd)
36
+ }
37
+ }
38
+
39
+ if (player.current) {
40
+ player.current.controls(isLiving && !needLogin)
41
+
42
+ // 显示成封面
43
+ if (liveInfo.status === PUBLIC_LIVE_STATUS.COMPLETEED || liveInfo.status === PUBLIC_LIVE_STATUS.OFFLINE) {
44
+ player.current.autoplay(false)
45
+ player.current.load()
46
+ }
47
+ }
48
+
49
+ return () => {
50
+ clearTimeout(endTimer.current)
51
+ }
52
+ }, [liveInfo.status, userInfo])
53
+
54
+ const handleVideoReady = (v, playerIns) => {
55
+ player.current = playerIns
56
+
57
+ playerIns.on('fullscreenchange', () => {
58
+ const isFullScreenNow = playerIns.isFullscreen()
59
+ if (isFullScreenNow) {
60
+ if (!isFullScreenRef.current) {
61
+ onRequestFullScreen()
62
+ }
63
+ isFullScreenRef.current = true
64
+ } else {
65
+ isFullScreenRef.current = false
66
+ }
67
+ })
68
+ playerIns.on('waiting', () => {
69
+ setIsLiveLoading(true)
70
+ })
71
+ playerIns.on('playing', () => {
72
+ setIsLiveLoading(false)
73
+ })
74
+ playerIns.on('ended', () => {
75
+ onStatusChange(PUBLIC_LIVE_STATUS.COMPLETEED)
76
+ })
77
+ playerIns.on('play', () => {
78
+ const currentTime = Date.now() - diffTime
79
+ const status = getRecordLiveStatus(liveInfo.status, currentTime, liveInfo.begin_time, liveInfo.end_time)
80
+ onStatusChange(status)
81
+ if (status === PUBLIC_LIVE_STATUS.LIVEING) {
82
+ player.current.currentTime(Math.max(0, (currentTime - dayjs(liveInfo.begin_time).valueOf()) / 1000))
83
+ }
84
+
85
+ if (!hasPlayed.current) {
86
+ onVideoPlay()
87
+ }
88
+ hasPlayed.current = true
89
+
90
+ player.current.autoplay(false)
91
+ setIsLiveLoadError(false)
92
+ })
93
+ playerIns.on('error', () => {
94
+ setIsLiveLoadError(true)
95
+ })
96
+
97
+ const isLiving = liveInfo.status === PUBLIC_LIVE_STATUS.LIVEING
98
+ player.current.controls(isLiving && !needLogin)
99
+ if (isLiving) {
100
+ const currentTime = Math.max(0, (visitTime - dayjs(liveInfo.begin_time).valueOf()) / 1000)
101
+ player.current.currentTime(currentTime)
102
+ }
103
+ }
104
+
105
+ const handleVideoReload = () => {
106
+ if (player.current) {
107
+ player.current.autoplay(true)
108
+ player.current.load()
109
+ }
110
+ }
111
+
112
+ const handleStatusChange = (status, params = {}) => {
113
+ onStatusChange(status)
114
+ if (status === PUBLIC_LIVE_STATUS.LIVEING && params.play) {
115
+ player.current.play()
116
+ }
117
+ }
118
+
119
+ const options = {
120
+ sources: [{
121
+ src: liveInfo.video_url,
122
+ type: getType(getUrlType(liveInfo.video_url))
123
+ }],
124
+ poster: liveInfo.cover_pic_web_url,
125
+ autoplay: false
126
+ }
127
+
128
+ return (
129
+ <div className={style['record-video']}>
130
+ <Video
131
+ className="vjs-big-play-centered"
132
+ options={options}
133
+ onReady={handleVideoReady}
134
+ />
135
+ <LiveStatus
136
+ userInfo={userInfo}
137
+ visitTime={visitTime}
138
+ diffTime={diffTime}
139
+ liveInfo={liveInfo}
140
+ isLiveLoading={isLiveLoading}
141
+ isLiveLoadError={isLiveLoadError}
142
+ onStatusChange={handleStatusChange}
143
+ onPlayReplay={onPlayReplay}
144
+ onReloadLive={handleVideoReload}
145
+ />
146
+ </div>
147
+ )
148
+ }