Skip to content
Projects
Groups
Snippets
Help
This project
Loading...
Sign in / Register
Toggle navigation
M
mr-julyedu
Overview
Overview
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
baiguangyao
mr-julyedu
Commits
b02c4e5a
Commit
b02c4e5a
authored
Aug 23, 2019
by
zhanghaozhe
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
播放样式 选择视频
parent
d0b782ad
Expand all
Hide whitespace changes
Inline
Side-by-side
Showing
9 changed files
with
153 additions
and
103 deletions
+153
-103
src/App.js
+0
-2
src/components/detail/index.js
+0
-2
src/components/detail/single/index.js
+41
-46
src/components/video/CustomPlayButton/index.js
+54
-0
src/components/video/images/pause.png
+0
-0
src/components/video/images/play.png
+0
-0
src/components/video/index.js
+52
-49
src/components/video/video-catalog/video-catalog.scss
+6
-4
src/components/video/video.scss
+0
-0
No files found.
src/App.js
View file @
b02c4e5a
...
...
@@ -41,8 +41,6 @@ class App extends Component {
//平台信息
cookie
.
set
(
'plat'
,
'5'
,
{
domain
:
'.julyedu.com'
})
console
.
log
(
this
.
props
.
location
);
this
.
props
.
startFetchUser
()
http
.
get
(
`
${
API
.
home
}
/m/user_info`
).
then
(
res
=>
{
this
.
props
.
setCurrentUser
(
this
.
transformUser
(
res
))
...
...
src/components/detail/index.js
View file @
b02c4e5a
...
...
@@ -283,7 +283,6 @@ class Detail extends Component {
}
// 点击子组件单集购买按钮
toSingleset
=
(
item
)
=>
{
console
.
log
(
this
.
props
);
const
{
user
}
=
this
.
props
const
uid
=
user
&&
user
.
data
&&
user
.
data
.
uid
if
(
!
uid
)
{
...
...
@@ -415,7 +414,6 @@ class Detail extends Component {
render
()
{
const
{
course
:
{
course_info
=
{}
},
barInfo
,
singleBox
,
singleType
}
=
this
.
state
;
console
.
log
(
course_info
);
let
courseInfo
=
''
,
service
=
''
,
number
=
0
,
...
...
src/components/detail/single/index.js
View file @
b02c4e5a
...
...
@@ -104,6 +104,7 @@ class Single extends Component {
http
.
get
(
`
${
API
[
'base-api'
]}
/pay/wxpay/pub_charge/oid/
${
getParam
(
'oid'
)}
/code/
${
weixin_code
}
`
).
then
((
res
)
=>
{
if
(
res
.
data
.
errno
===
0
)
{
const
data
=
res
.
data
.
data
;
function
onBridgeReady
()
{
WeixinJSBridge
.
invoke
(
'getBrandWCPayRequest'
,
{
...
...
@@ -163,6 +164,7 @@ class Single extends Component {
}
)
}
if
(
typeof
WeixinJSBridge
==
"undefined"
)
{
if
(
document
.
addEventListener
)
{
document
.
addEventListener
(
'WeixinJSBridgeReady'
,
onBridgeReady
,
false
)
...
...
@@ -184,9 +186,9 @@ class Single extends Component {
// 支付完成之后获取状态
payCallback
=
()
=>
{
const
_this
=
this
;
if
(
!
getParam
(
'oid'
))
{
if
(
!
getParam
(
'oid'
))
{
return
;
}
else
{
}
else
{
_this
.
intervalPayStatus
=
setInterval
(
function
()
{
http
.
get
(
`
${
API
[
'base-api'
]}
/m/orderState/oid/
${
getParam
(
'oid'
)}
`
).
then
(
res
=>
{
if
(
res
.
data
.
errno
===
401
)
{
...
...
@@ -301,7 +303,7 @@ class Single extends Component {
}
render
()
{
const
{
showSingleBox
}
=
this
.
state
;
const
{
showSingleBox
}
=
this
.
state
;
if
(
this
.
state
.
endTime
)
{
let
date
=
this
.
state
.
endTime
*
1000
let
now
=
Date
.
now
()
...
...
@@ -317,53 +319,46 @@ class Single extends Component {
})
},
1000
)
}
const
{
singleType
}
=
this
.
props
;
console
.
log
(
this
.
state
.
singleBox
);
const
{
singleType
}
=
this
.
props
;
return
(
singleType
===
1
&&
<
div
>
<
div
className
=
'popup-box'
>
{
singleType
===
1
&&
<
div
className
=
'content singleset-payment'
>
<
div
className
=
'price-box'
>
<
span
>
实付款:
<
/span
>
<
p
>
{
this
.
props
.
data
.
class_price
}
元
<
/p
>
<
/div
>
<
div
className
=
'course-info'
>
<
p
className
=
'text-overflow-1'
><
span
>
课程:
<
/span
>
{
this
.
props
.
title
}
<
/p
>
<
p
className
=
'text-overflow-1'
><
span
>
课时:
<
/span
>
{
this
.
props
.
data
.
name
}
<
/p
>
<
/div
>
<
div
className
=
'payment-type'
>
<
label
>
支付方式:
<
/label
>
{
!
browser
.
isWeixin
&&
<
p
onClick
=
{
this
.
check
.
bind
(
this
,
'1'
)}
>
<
i
className
=
'iconfont iconalipay'
><
/i
>
<
span
>
支付宝
<
/span
>
<
i
className
=
{
`iconfont icondanseshixintubiao-5 redio
${
this
.
state
.
payType
===
'1'
?
'redioed'
:
''
}
`
}
><
/i
>
<
/p
>
}
<
div
className
=
'popup-box'
>
<
div
className
=
'content singleset-payment'
>
<
div
className
=
'price-box'
>
<
span
>
实付款:
<
/span
>
<
p
>
{
this
.
props
.
data
.
class_price
}
元
<
/p
>
<
/div
>
<
div
className
=
'course-info'
>
<
p
className
=
'text-overflow-1'
><
span
>
课程:
<
/span
>
{
this
.
props
.
title
}
<
/p
>
<
p
className
=
'text-overflow-1'
><
span
>
课时:
<
/span
>
{
this
.
props
.
data
.
name
}
<
/p
>
<
/div
>
<
div
className
=
'payment-type'
>
<
label
>
支付方式:
<
/label
>
{
!
browser
.
isWeixin
&&
<
p
onClick
=
{
this
.
check
.
bind
(
this
,
'1'
)}
>
<
i
className
=
'iconfont iconalipay'
><
/i
>
<
span
>
支付宝
<
/span
>
<
i
className
=
{
`iconfont icondanseshixintubiao-5 redio
${
this
.
state
.
payType
===
'1'
?
'redioed'
:
''
}
`
}
><
/i
>
<
/p
>
}
<
p
onClick
=
{
this
.
check
.
bind
(
this
,
'0'
)}
>
<
i
className
=
'iconfont iconweixinzhifu buy'
><
/i
>
<
span
>
微信支付
<
/span
>
<
i
className
=
{
`iconfont icondanseshixintubiao-5 redio
${
this
.
state
.
payType
===
'0'
?
'redioed'
:
''
}
`
}
><
/i
>
<
/p
>
<
/div
>
<
div
className
=
'btn btn-18B4ED'
onClick
=
{
this
.
toBuy
}
>
确认购买
<
/div
>
<
/div
>
}
<
i
onClick
=
{
this
.
colse
}
className
=
{
'iconfont iconiconfront-2 close'
}
><
/i
>
<
p
onClick
=
{
this
.
check
.
bind
(
this
,
'0'
)}
>
<
i
className
=
'iconfont iconweixinzhifu buy'
><
/i
>
<
span
>
微信支付
<
/span
>
<
i
className
=
{
`iconfont icondanseshixintubiao-5 redio
${
this
.
state
.
payType
===
'0'
?
'redioed'
:
''
}
`
}
><
/i
>
<
/p
>
<
/div
>
<
div
className
=
'btn btn-18B4ED'
onClick
=
{
this
.
toBuy
}
>
确认购买
<
/div
>
<
/div
>
<
i
onClick
=
{
this
.
colse
}
className
=
{
'iconfont iconiconfront-2 close'
}
><
/i
>
<
/div
>
<
/div
>
);
...
...
src/components/video/CustomPlayButton/index.js
0 → 100644
View file @
b02c4e5a
import
videojs
from
'video.js'
const
Component
=
videojs
.
getComponent
(
'Component'
)
const
Button
=
videojs
.
getComponent
(
'Button'
)
class
CustomPlayButtonCover
extends
Component
{
createEl
()
{
return
super
.
createEl
(
'div'
,
{
className
:
'vjs-custom-play-button-cover'
})
}
dispose
()
{
this
.
el_
&&
(
this
.
el_
=
null
)
}
}
class
CustomPlayButton
extends
Button
{
constructor
(
player
,
options
)
{
super
(
player
,
options
)
this
.
on
(
'tap'
,
this
.
tap
)
}
createEl
()
{
return
super
.
createEl
(
'button'
,
{
className
:
'vjs-custom-play-button'
},
{
type
:
'button'
})
}
tap
()
{
this
.
player_
.
play
()
}
dispose
()
{
if
(
this
.
el_
)
{
this
.
off
(
'tap'
,
this
.
tap
)
this
.
el_
=
null
}
}
}
Component
.
registerComponent
(
'CustomPlayButton'
,
CustomPlayButton
)
CustomPlayButtonCover
.
prototype
.
options_
=
{
children
:
[
'CustomPlayButton'
]
}
Component
.
registerComponent
(
'CustomPlayButtonCover'
,
CustomPlayButtonCover
)
\ No newline at end of file
src/components/video/images/pause.png
0 → 100644
View file @
b02c4e5a
887 Bytes
src/components/video/images/play.png
0 → 100644
View file @
b02c4e5a
1.28 KB
src/components/video/index.js
View file @
b02c4e5a
import
React
,
{
Component
}
from
'react'
import
React
,
{
Component
}
from
'react'
import
HeaderBar
from
'@/common/HeaderBar'
import
'./video.scss'
import
{
NavLink
,
Route
,
Redirect
,
Switch
,
Link
}
from
'react-router-dom'
import
{
http
,
getParam
}
from
'@/utils'
import
{
NavLink
,
Route
,
Redirect
,
Switch
,
Link
}
from
'react-router-dom'
import
{
http
,
getParam
}
from
'@/utils'
import
Recommendation
from
'./recommendation'
import
VideoCatalog
from
'./video-catalog'
import
DatumCatalog
from
'./datum-catalog'
import
{
Toast
}
from
'antd-mobile'
import
{
Toast
}
from
'antd-mobile'
import
videojs
from
'video.js'
import
'video.js/dist/video-js.min.css'
import
{
Modal
}
from
"antd-mobile"
import
{
Loading
}
from
'@/common'
import
{
connect
}
from
"react-redux"
import
{
Modal
}
from
"antd-mobile"
import
{
Loading
}
from
'@/common'
import
{
connect
}
from
"react-redux"
import
jsCookie
from
'js-cookie'
import
io
from
'socket.io-client'
import
Single
from
"@/components/detail/single"
;
import
'./CustomPlayButton'
let
alert
=
Modal
.
alert
...
...
@@ -58,7 +59,6 @@ function ProgressShareModal(props) {
)
}
class
Video
extends
Component
{
video
//video element
...
...
@@ -262,7 +262,7 @@ class Video extends Component {
this
.
player
=
videojs
(
this
.
video
,
{
controls
:
true
,
preload
:
'auto'
,
bigPlayButton
:
tru
e
,
bigPlayButton
:
fals
e
,
textTrackDisplay
:
false
,
posterImage
:
false
,
errorDisplay
:
false
,
...
...
@@ -271,6 +271,7 @@ class Video extends Component {
pictureInPictureToggle
:
false
}
})
this
.
player
.
addChild
(
'CustomPlayButtonCover'
)
this
.
player
.
on
(
'ready'
,
()
=>
{
this
.
recordSocket
.
emit
(
'load'
,
this
.
recordUserInfo
())
})
...
...
@@ -310,7 +311,6 @@ class Video extends Component {
}
selectVideo
=
index
=>
{
if
(
index
===
this
.
state
.
activeIndex
)
{
return
}
...
...
@@ -321,7 +321,7 @@ class Video extends Component {
activeIndex
:
index
},
()
=>
{
if
(
this
.
hasAuth
())
{
if
(
this
.
hasAuth
(
this
.
state
.
activeIndex
))
{
this
.
setPlayerSrc
(
this
.
state
.
videoList
[
index
][
'play_url'
])
this
.
sendLastRecord
()
this
.
playVideo
()
...
...
@@ -332,6 +332,9 @@ class Video extends Component {
)
}
getLastVideoIndex
=
lastIndex
=>
{
return
this
.
state
.
videoList
.
findIndex
(
item
=>
item
.
id
==
lastIndex
)
}
getVideoList
=
()
=>
{
let
url
=
''
...
...
@@ -356,29 +359,7 @@ class Video extends Component {
title
:
data
.
data
.
course
[
'course_title'
],
isLoading
:
false
}),
()
=>
{
if
(
this
.
state
.
course
.
is_aist
)
{
this
.
setupWS
()
this
.
setupTimer
()
}
if
(
this
.
lessonAvailable
())
{
if
(
this
.
hasAuth
())
{
Promise
.
resolve
().
then
(()
=>
{
this
.
initializePlayer
()
this
.
playWithAuth
()
})
}
else
{
this
.
getCoursePrice
();
}
}
else
{
alert
(
'暂无视频'
,
''
,
[{
text
:
'OK'
,
onPress
:
()
=>
{
this
.
props
.
history
.
push
(
'/'
)
}
}])
}
}
this
.
playSetup
)
}
else
{
Toast
.
info
(
data
.
msg
)
...
...
@@ -386,6 +367,37 @@ class Video extends Component {
})
}
playSetup
=
()
=>
{
if
(
this
.
state
.
course
.
is_aist
)
{
this
.
setupWS
()
this
.
setupTimer
()
}
let
index
=
this
.
getLastVideoIndex
(
this
.
state
.
course
.
last_video_id
)
index
=
index
>=
0
?
index
:
0
this
.
setState
({
activeIndex
:
index
},
()
=>
{
if
(
this
.
lessonAvailable
(
index
))
{
if
(
this
.
hasAuth
(
index
))
{
Promise
.
resolve
().
then
(()
=>
{
this
.
initializePlayer
()
this
.
playWithAuth
()
})
}
else
{
this
.
getCoursePrice
();
}
}
else
{
alert
(
'暂无视频'
,
''
,
[{
text
:
'OK'
,
onPress
:
()
=>
{
this
.
props
.
history
.
push
(
'/'
)
}
}])
}
})
}
setPlayerSrc
=
src
=>
{
if
(
!
this
.
player
)
{
this
.
initializePlayer
()
...
...
@@ -417,13 +429,8 @@ class Video extends Component {
})
}
lessonAvailable
=
()
=>
{
let
{
videoList
,
course
}
=
this
.
state
let
videoIndex
=
videoList
.
findIndex
(
item
=>
item
.
id
==
course
.
last_video_id
)
this
.
setState
({
activeIndex
:
videoIndex
})
return
videoList
[
videoIndex
][
'video_size'
]
!==
0
lessonAvailable
=
index
=>
{
return
this
.
state
.
videoList
[
index
][
'video_size'
]
!==
0
}
getCoursePrice
=
()
=>
{
...
...
@@ -441,19 +448,15 @@ class Video extends Component {
playWithAuth
=
()
=>
{
const
{
videoList
,
activeIndex
}
=
this
.
state
if
(
this
.
hasAuth
())
{
if
(
this
.
hasAuth
(
activeIndex
))
{
this
.
setPlayerSrc
(
videoList
[
activeIndex
][
'play_url'
])
}
}
hasAuth
=
()
=>
{
const
{
course
,
videoList
}
=
this
.
state
hasAuth
=
index
=>
{
const
{
videoList
}
=
this
.
state
let
videoIndex
=
videoList
.
findIndex
(
item
=>
item
.
id
==
course
.
last_video_id
)
this
.
setState
({
activeIndex
:
videoIndex
})
let
lesson
=
videoList
[
videoIndex
]
let
lesson
=
videoList
[
index
]
if
(
lesson
[
'video_auth'
])
{
this
.
setState
({
...
...
src/components/video/video-catalog/video-catalog.scss
View file @
b02c4e5a
...
...
@@ -9,12 +9,9 @@
&
.active
{
.title
,
.duration
{
color
:
$active
;
}
.video-title
{
background-color
:
#F5FBFF
;
color
:
$active
;
}
.exercise
{
border-top
:
1px
solid
#E7EAF1
;
...
...
@@ -73,4 +70,8 @@
float
:
right
;
}
.iconplay_hovericon
{
color
:
$active
;
}
}
\ No newline at end of file
src/components/video/video.scss
View file @
b02c4e5a
This diff is collapsed.
Click to expand it.
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment