Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
W
ww_test_text
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Boards
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
template admin
ww_test_text
Commits
1f535d89
Commit
1f535d89
authored
Oct 30, 2019
by
limingzhe
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
add hotZone
parent
a4d93283
Changes
10
Hide whitespace changes
Inline
Side-by-side
Showing
10 changed files
with
1933 additions
and
63 deletions
+1933
-63
app.module.ts
src/app/app.module.ts
+2
-0
Unit.ts
src/app/common/custom-hot-zone/Unit.ts
+765
-0
custom-hot-zone.component.html
...app/common/custom-hot-zone/custom-hot-zone.component.html
+89
-0
custom-hot-zone.component.scss
...app/common/custom-hot-zone/custom-hot-zone.component.scss
+203
-0
custom-hot-zone.component.ts
src/app/common/custom-hot-zone/custom-hot-zone.component.ts
+811
-0
arrow.png
src/assets/common/arrow.png
+0
-0
arrow_right.png
src/assets/common/arrow_right.png
+0
-0
arrow_top.png
src/assets/common/arrow_top.png
+0
-0
video.js
src/assets/libs/video-js-7.0.0/video.js
+62
-62
video.min.js
src/assets/libs/video-js-7.0.0/video.min.js
+1
-1
No files found.
src/app/app.module.ts
View file @
1f535d89
...
@@ -24,6 +24,7 @@ import {BackgroundImagePipe} from "./pipes/background-image.pipe";
...
@@ -24,6 +24,7 @@ import {BackgroundImagePipe} from "./pipes/background-image.pipe";
import
{
UploadVideoComponent
}
from
"
./common/upload-video/upload-video.component
"
;
import
{
UploadVideoComponent
}
from
"
./common/upload-video/upload-video.component
"
;
import
{
ResourcePipe
}
from
"
./pipes/resource.pipe
"
;
import
{
ResourcePipe
}
from
"
./pipes/resource.pipe
"
;
import
{
TimePipe
}
from
"
./pipes/time.pipe
"
;
import
{
TimePipe
}
from
"
./pipes/time.pipe
"
;
import
{
CustomHotZoneComponent
}
from
"
./common/custom-hot-zone/custom-hot-zone.component
"
;
registerLocaleData
(
zh
);
registerLocaleData
(
zh
);
@
NgModule
({
@
NgModule
({
...
@@ -38,6 +39,7 @@ registerLocaleData(zh);
...
@@ -38,6 +39,7 @@ registerLocaleData(zh);
ResourcePipe
,
ResourcePipe
,
TimePipe
,
TimePipe
,
UploadVideoComponent
,
UploadVideoComponent
,
CustomHotZoneComponent
,
PlayerContentWrapperComponent
PlayerContentWrapperComponent
],
],
...
...
src/app/common/custom-hot-zone/Unit.ts
0 → 100644
View file @
1f535d89
import
TWEEN
from
'
@tweenjs/tween.js
'
;
class
Sprite
{
x
=
0
;
y
=
0
;
color
=
''
;
radius
=
0
;
alive
=
false
;
margin
=
0
;
angle
=
0
;
ctx
;
constructor
(
ctx
)
{
this
.
ctx
=
ctx
;
}
update
(
$event
)
{
this
.
draw
();
}
draw
()
{
}
}
export
class
MySprite
extends
Sprite
{
width
=
0
;
height
=
0
;
_anchorX
=
0
;
_anchorY
=
0
;
_offX
=
0
;
_offY
=
0
;
scaleX
=
1
;
scaleY
=
1
;
alpha
=
1
;
rotation
=
0
;
visible
=
true
;
children
=
[
this
];
img
;
_z
=
0
;
init
(
imgObj
=
null
,
anchorX
:
number
=
0.5
,
anchorY
:
number
=
0.5
)
{
if
(
imgObj
)
{
this
.
img
=
imgObj
;
this
.
width
=
this
.
img
.
width
;
this
.
height
=
this
.
img
.
height
;
}
this
.
anchorX
=
anchorX
;
this
.
anchorY
=
anchorY
;
}
update
(
$event
=
null
)
{
if
(
this
.
visible
)
{
this
.
draw
();
}
}
draw
()
{
this
.
ctx
.
save
();
this
.
drawInit
();
this
.
updateChildren
();
this
.
ctx
.
restore
();
}
drawInit
()
{
this
.
ctx
.
translate
(
this
.
x
,
this
.
y
);
this
.
ctx
.
rotate
(
this
.
rotation
*
Math
.
PI
/
180
);
this
.
ctx
.
scale
(
this
.
scaleX
,
this
.
scaleY
);
this
.
ctx
.
globalAlpha
=
this
.
alpha
;
}
drawSelf
()
{
if
(
this
.
img
)
{
this
.
ctx
.
drawImage
(
this
.
img
,
this
.
_offX
,
this
.
_offY
);
}
}
updateChildren
()
{
if
(
this
.
children
.
length
<=
0
)
{
return
;
}
for
(
let
i
=
0
;
i
<
this
.
children
.
length
;
i
++
)
{
if
(
this
.
children
[
i
]
===
this
)
{
this
.
drawSelf
();
}
else
{
this
.
children
[
i
].
update
();
}
}
}
load
(
url
,
anchorX
=
0.5
,
anchorY
=
0.5
)
{
return
new
Promise
((
resolve
,
reject
)
=>
{
const
img
=
new
Image
();
img
.
onload
=
()
=>
resolve
(
img
);
img
.
onerror
=
reject
;
img
.
src
=
url
;
}).
then
(
img
=>
{
this
.
init
(
img
,
anchorX
,
anchorY
);
return
img
;
});
}
addChild
(
child
,
z
=
1
)
{
if
(
this
.
children
.
indexOf
(
child
)
===
-
1
)
{
this
.
children
.
push
(
child
);
child
.
_z
=
z
;
child
.
parent
=
this
;
}
this
.
children
.
sort
((
a
,
b
)
=>
{
return
a
.
_z
-
b
.
_z
;
});
}
removeChild
(
child
)
{
const
index
=
this
.
children
.
indexOf
(
child
);
if
(
index
!==
-
1
)
{
this
.
children
.
splice
(
index
,
1
);
}
}
set
anchorX
(
value
)
{
this
.
_anchorX
=
value
;
this
.
refreshAnchorOff
();
}
get
anchorX
()
{
return
this
.
_anchorX
;
}
set
anchorY
(
value
)
{
this
.
_anchorY
=
value
;
this
.
refreshAnchorOff
();
}
get
anchorY
()
{
return
this
.
_anchorY
;
}
refreshAnchorOff
()
{
this
.
_offX
=
-
this
.
width
*
this
.
anchorX
;
this
.
_offY
=
-
this
.
height
*
this
.
anchorY
;
}
setScaleXY
(
value
)
{
this
.
scaleX
=
this
.
scaleY
=
value
;
}
getBoundingBox
()
{
const
x
=
this
.
x
+
this
.
_offX
*
this
.
scaleX
;
const
y
=
this
.
y
+
this
.
_offY
*
this
.
scaleY
;
const
width
=
this
.
width
*
this
.
scaleX
;
const
height
=
this
.
height
*
this
.
scaleY
;
return
{
x
,
y
,
width
,
height
};
}
}
export
class
Item
extends
MySprite
{
baseX
;
move
(
targetY
,
callBack
)
{
const
self
=
this
;
const
tween
=
new
TWEEN
.
Tween
(
this
)
.
to
({
y
:
targetY
},
2500
)
.
easing
(
TWEEN
.
Easing
.
Quintic
.
Out
)
.
onComplete
(
function
()
{
self
.
hide
(
callBack
);
// if (callBack) {
// callBack();
// }
})
.
start
();
}
show
(
callBack
=
null
)
{
const
tween
=
new
TWEEN
.
Tween
(
this
)
.
to
({
alpha
:
1
},
800
)
// .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth.
.
onComplete
(
function
()
{
if
(
callBack
)
{
callBack
();
}
})
.
start
();
// Start the tween immediately.
}
hide
(
callBack
=
null
)
{
const
tween
=
new
TWEEN
.
Tween
(
this
)
.
to
({
alpha
:
0
},
800
)
// .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth.
.
onComplete
(
function
()
{
if
(
callBack
)
{
callBack
();
}
})
.
start
();
// Start the tween immediately.
}
shake
(
id
)
{
if
(
!
this
.
baseX
)
{
this
.
baseX
=
this
.
x
;
}
const
baseX
=
this
.
baseX
;
const
baseTime
=
50
;
const
sequence
=
[
{
target
:
{
x
:
baseX
+
40
*
id
},
time
:
baseTime
-
25
},
{
target
:
{
x
:
baseX
-
20
*
id
},
time
:
baseTime
},
{
target
:
{
x
:
baseX
+
10
*
id
},
time
:
baseTime
},
{
target
:
{
x
:
baseX
-
5
*
id
},
time
:
baseTime
},
{
target
:
{
x
:
baseX
+
2
*
id
},
time
:
baseTime
},
{
target
:
{
x
:
baseX
-
1
*
id
},
time
:
baseTime
},
{
target
:
{
x
:
baseX
},
time
:
baseTime
},
];
const
self
=
this
;
function
runSequence
()
{
if
(
self
[
'
shakeTween
'
])
{
self
[
'
shakeTween
'
].
stop
();
}
const
tween
=
new
TWEEN
.
Tween
(
self
);
if
(
sequence
.
length
>
0
)
{
// console.log('sequence.length: ', sequence.length);
const
action
=
sequence
.
shift
();
tween
.
to
(
action
[
'
target
'
],
action
[
'
time
'
]);
tween
.
onComplete
(
()
=>
{
runSequence
();
});
tween
.
start
();
self
[
'
shakeTween
'
]
=
tween
;
}
}
runSequence
();
}
drop
(
targetY
,
callBack
=
null
)
{
const
self
=
this
;
const
time
=
Math
.
abs
(
targetY
-
this
.
y
)
*
2.4
;
this
.
alpha
=
1
;
const
tween
=
new
TWEEN
.
Tween
(
this
)
.
to
({
y
:
targetY
},
time
)
.
easing
(
TWEEN
.
Easing
.
Cubic
.
In
)
.
onComplete
(
function
()
{
// self.hideItem(callBack);
if
(
callBack
)
{
callBack
();
}
})
.
start
();
}
}
export
class
EndSpr
extends
MySprite
{
show
(
s
)
{
this
.
scaleX
=
this
.
scaleY
=
0
;
this
.
alpha
=
0
;
const
tween
=
new
TWEEN
.
Tween
(
this
)
.
to
({
alpha
:
1
,
scaleX
:
s
,
scaleY
:
s
},
800
)
.
easing
(
TWEEN
.
Easing
.
Elastic
.
Out
)
// Use an easing function to make the animation smooth.
.
onComplete
(
function
()
{
})
.
start
();
// Start the tween immediately.
}
}
export
class
ShapeRect
extends
MySprite
{
fillColor
=
'
#FF0000
'
;
setSize
(
w
,
h
)
{
this
.
width
=
w
;
this
.
height
=
h
;
console
.
log
(
'
w:
'
,
w
);
console
.
log
(
'
h:
'
,
h
);
}
drawShape
()
{
this
.
ctx
.
fillStyle
=
this
.
fillColor
;
this
.
ctx
.
fillRect
(
this
.
_offX
,
this
.
_offY
,
this
.
width
,
this
.
height
);
}
drawSelf
()
{
super
.
drawSelf
();
this
.
drawShape
();
}
}
export
class
HotZoneItem
extends
MySprite
{
lineDashFlag
=
false
;
arrow
:
MySprite
;
label
:
Label
;
text
;
arrowTop
;
arrowRight
;
setSize
(
w
,
h
)
{
this
.
width
=
w
;
this
.
height
=
h
;
const
rect
=
new
ShapeRect
(
this
.
ctx
);
rect
.
x
=
-
w
/
2
;
rect
.
y
=
-
h
/
2
;
rect
.
setSize
(
w
,
h
);
rect
.
fillColor
=
'
#ffffff
'
;
rect
.
alpha
=
0.2
;
this
.
addChild
(
rect
);
}
showLabel
(
text
=
null
)
{
if
(
!
this
.
label
)
{
this
.
label
=
new
Label
(
this
.
ctx
);
this
.
label
.
anchorY
=
0
;
this
.
label
.
fontSize
=
'
40px
'
;
this
.
label
.
textAlign
=
'
center
'
;
this
.
addChild
(
this
.
label
);
// this.label.scaleX = 1 / this.scaleX;
// this.label.scaleY = 1 / this.scaleY;
this
.
refreshLabelScale
();
}
if
(
text
)
{
this
.
label
.
text
=
text
;
}
else
if
(
this
.
text
)
{
this
.
label
.
text
=
this
.
text
;
}
this
.
label
.
visible
=
true
;
}
hideLabel
()
{
if
(
!
this
.
label
)
{
return
;
}
this
.
label
.
visible
=
false
;
}
refreshLabelScale
()
{
if
(
this
.
scaleX
==
this
.
scaleY
)
{
this
.
label
.
setScaleXY
(
1
);
}
if
(
this
.
scaleX
>
this
.
scaleY
)
{
this
.
label
.
scaleX
=
this
.
scaleY
/
this
.
scaleX
;
}
else
{
this
.
label
.
scaleY
=
this
.
scaleX
/
this
.
scaleY
;
}
}
showLineDash
()
{
this
.
lineDashFlag
=
true
;
if
(
this
.
arrow
)
{
this
.
arrow
.
visible
=
true
;
}
else
{
this
.
arrow
=
new
MySprite
(
this
.
ctx
);
this
.
arrow
.
load
(
'
assets/common/arrow.png
'
,
1
,
0
);
this
.
arrow
.
setScaleXY
(
0.06
);
this
.
arrowTop
=
new
MySprite
(
this
.
ctx
);
this
.
arrowTop
.
load
(
'
assets/common/arrow_top.png
'
,
0.5
,
0
);
this
.
arrowTop
.
setScaleXY
(
0.06
);
this
.
arrowRight
=
new
MySprite
(
this
.
ctx
);
this
.
arrowRight
.
load
(
'
assets/common/arrow_right.png
'
,
1
,
0.5
);
this
.
arrowRight
.
setScaleXY
(
0.06
);
}
this
.
showLabel
();
}
hideLineDash
()
{
this
.
lineDashFlag
=
false
;
if
(
this
.
arrow
)
{
this
.
arrow
.
visible
=
false
;
}
this
.
hideLabel
();
}
drawArrow
()
{
if
(
!
this
.
arrow
)
{
return
;
}
const
rect
=
this
.
getBoundingBox
();
this
.
arrow
.
x
=
rect
.
x
+
rect
.
width
;
this
.
arrow
.
y
=
rect
.
y
;
this
.
arrow
.
update
();
this
.
arrowTop
.
x
=
rect
.
x
+
rect
.
width
/
2
;
this
.
arrowTop
.
y
=
rect
.
y
;
this
.
arrowTop
.
update
();
this
.
arrowRight
.
x
=
rect
.
x
+
rect
.
width
;
this
.
arrowRight
.
y
=
rect
.
y
+
rect
.
height
/
2
;
this
.
arrowRight
.
update
();
}
drawFrame
()
{
this
.
ctx
.
save
();
const
rect
=
this
.
getBoundingBox
();
const
w
=
rect
.
width
;
const
h
=
rect
.
height
;
const
x
=
rect
.
x
+
w
/
2
;
const
y
=
rect
.
y
+
h
/
2
;
this
.
ctx
.
setLineDash
([
5
,
5
]);
this
.
ctx
.
lineWidth
=
2
;
this
.
ctx
.
strokeStyle
=
'
#1bfff7
'
;
// this.ctx.fillStyle = '#ffffff';
this
.
ctx
.
beginPath
();
this
.
ctx
.
moveTo
(
x
-
w
/
2
,
y
-
h
/
2
);
this
.
ctx
.
lineTo
(
x
+
w
/
2
,
y
-
h
/
2
);
this
.
ctx
.
lineTo
(
x
+
w
/
2
,
y
+
h
/
2
);
this
.
ctx
.
lineTo
(
x
-
w
/
2
,
y
+
h
/
2
);
this
.
ctx
.
lineTo
(
x
-
w
/
2
,
y
-
h
/
2
);
// this.ctx.fill();
this
.
ctx
.
stroke
();
this
.
ctx
.
restore
();
}
draw
()
{
super
.
draw
();
if
(
this
.
lineDashFlag
)
{
this
.
drawFrame
();
this
.
drawArrow
();
}
}
}
export
class
EditorItem
extends
MySprite
{
lineDashFlag
=
false
;
arrow
:
MySprite
;
label
:
Label
;
text
;
showLabel
(
text
=
null
)
{
if
(
!
this
.
label
)
{
this
.
label
=
new
Label
(
this
.
ctx
);
this
.
label
.
anchorY
=
0
;
this
.
label
.
fontSize
=
'
50px
'
;
this
.
label
.
textAlign
=
'
center
'
;
this
.
addChild
(
this
.
label
);
this
.
label
.
setScaleXY
(
1
/
this
.
scaleX
);
}
if
(
text
)
{
this
.
label
.
text
=
text
;
}
else
if
(
this
.
text
)
{
this
.
label
.
text
=
this
.
text
;
}
this
.
label
.
visible
=
true
;
}
hideLabel
()
{
if
(
!
this
.
label
)
{
return
;
}
this
.
label
.
visible
=
false
;
}
showLineDash
()
{
this
.
lineDashFlag
=
true
;
if
(
this
.
arrow
)
{
this
.
arrow
.
visible
=
true
;
}
else
{
this
.
arrow
=
new
MySprite
(
this
.
ctx
);
this
.
arrow
.
load
(
'
assets/common/arrow.png
'
,
1
,
0
);
this
.
arrow
.
setScaleXY
(
0.06
);
}
this
.
showLabel
();
}
hideLineDash
()
{
this
.
lineDashFlag
=
false
;
if
(
this
.
arrow
)
{
this
.
arrow
.
visible
=
false
;
}
this
.
hideLabel
();
}
drawArrow
()
{
if
(
!
this
.
arrow
)
{
return
;
}
const
rect
=
this
.
getBoundingBox
();
this
.
arrow
.
x
=
rect
.
x
+
rect
.
width
;
this
.
arrow
.
y
=
rect
.
y
;
this
.
arrow
.
update
();
}
drawFrame
()
{
this
.
ctx
.
save
();
const
rect
=
this
.
getBoundingBox
();
const
w
=
rect
.
width
;
const
h
=
rect
.
height
;
const
x
=
rect
.
x
+
w
/
2
;
const
y
=
rect
.
y
+
h
/
2
;
this
.
ctx
.
setLineDash
([
5
,
5
]);
this
.
ctx
.
lineWidth
=
2
;
this
.
ctx
.
strokeStyle
=
'
#1bfff7
'
;
// this.ctx.fillStyle = '#ffffff';
this
.
ctx
.
beginPath
();
this
.
ctx
.
moveTo
(
x
-
w
/
2
,
y
-
h
/
2
);
this
.
ctx
.
lineTo
(
x
+
w
/
2
,
y
-
h
/
2
);
this
.
ctx
.
lineTo
(
x
+
w
/
2
,
y
+
h
/
2
);
this
.
ctx
.
lineTo
(
x
-
w
/
2
,
y
+
h
/
2
);
this
.
ctx
.
lineTo
(
x
-
w
/
2
,
y
-
h
/
2
);
// this.ctx.fill();
this
.
ctx
.
stroke
();
this
.
ctx
.
restore
();
}
draw
()
{
super
.
draw
();
if
(
this
.
lineDashFlag
)
{
this
.
drawFrame
();
this
.
drawArrow
();
}
}
}
export
class
Label
extends
MySprite
{
text
:
String
;
fontSize
:
String
=
'
40px
'
;
fontName
:
String
=
'
Verdana
'
;
textAlign
:
String
=
'
left
'
;
constructor
(
ctx
)
{
super
(
ctx
);
this
.
init
();
}
drawText
()
{
// console.log('in drawText', this.text);
if
(
!
this
.
text
)
{
return
;
}
this
.
ctx
.
font
=
`
${
this
.
fontSize
}
${
this
.
fontName
}
`
;
this
.
ctx
.
textAlign
=
this
.
textAlign
;
this
.
ctx
.
textBaseline
=
'
middle
'
;
this
.
ctx
.
fontWeight
=
900
;
this
.
ctx
.
lineWidth
=
5
;
this
.
ctx
.
strokeStyle
=
'
#ffffff
'
;
this
.
ctx
.
strokeText
(
this
.
text
,
0
,
0
);
this
.
ctx
.
fillStyle
=
'
#000000
'
;
this
.
ctx
.
fillText
(
this
.
text
,
0
,
0
);
}
drawSelf
()
{
super
.
drawSelf
();
this
.
drawText
();
}
}
export
function
getPosByAngle
(
angle
,
len
)
{
const
radian
=
angle
*
Math
.
PI
/
180
;
const
x
=
Math
.
sin
(
radian
)
*
len
;
const
y
=
Math
.
cos
(
radian
)
*
len
;
return
{
x
,
y
};
}
export
function
getAngleByPos
(
px
,
py
,
mx
,
my
)
{
// const _x = p2x - p1x;
// const _y = p2y - p1y;
// const tan = _y / _x;
//
// const radina = Math.atan(tan); // 用反三角函数求弧度
// const angle = Math.floor(180 / (Math.PI / radina)); //
//
// console.log('r: ' , angle);
// return angle;
//
const
x
=
Math
.
abs
(
px
-
mx
);
const
y
=
Math
.
abs
(
py
-
my
);
// const x = Math.abs(mx - px);
// const y = Math.abs(my - py);
const
z
=
Math
.
sqrt
(
Math
.
pow
(
x
,
2
)
+
Math
.
pow
(
y
,
2
));
const
cos
=
y
/
z
;
const
radina
=
Math
.
acos
(
cos
);
// 用反三角函数求弧度
let
angle
=
Math
.
floor
(
180
/
(
Math
.
PI
/
radina
)
*
100
)
/
100
;
// 将弧度转换成角度
if
(
mx
>
px
&&
my
>
py
)
{
// 鼠标在第四象限
angle
=
180
-
angle
;
}
if
(
mx
===
px
&&
my
>
py
)
{
// 鼠标在y轴负方向上
angle
=
180
;
}
if
(
mx
>
px
&&
my
===
py
)
{
// 鼠标在x轴正方向上
angle
=
90
;
}
if
(
mx
<
px
&&
my
>
py
)
{
// 鼠标在第三象限
angle
=
180
+
angle
;
}
if
(
mx
<
px
&&
my
===
py
)
{
// 鼠标在x轴负方向
angle
=
270
;
}
if
(
mx
<
px
&&
my
<
py
)
{
// 鼠标在第二象限
angle
=
360
-
angle
;
}
// console.log('angle: ', angle);
return
angle
;
}
src/app/common/custom-hot-zone/custom-hot-zone.component.html
0 → 100644
View file @
1f535d89
<div
class=
"p-image-children-editor"
>
<h5
style=
"margin-left: 2.5%;"
>
preview:
</h5>
<div
class=
"preview-box"
#
wrap
>
<canvas
id=
"canvas"
#
canvas
></canvas>
</div>
<div
nz-row
nzType=
"flex"
nzAlign=
"middle"
>
<div
nz-col
nzSpan=
"5"
nzOffset=
"1"
>
<h5>
add background:
</h5>
<div
class=
"bg-box"
>
<app-upload-image-with-preview
[
picUrl
]="
bgItem
.
url
"
(
imageUploaded
)="
onBackgroundUploadSuccess
($
event
)"
>
</app-upload-image-with-preview>
</div>
</div>
<div
nz-col
nzSpan=
"5"
nzOffset=
"1"
class=
"img-box"
*
ngFor=
"let it of hotZoneArr; let i = index"
>
<div
style=
" height: 40px;"
>
<h5>
item-{{i+1}}
<i
style=
"margin-left: 20px; margin-top: 2px; float: right; cursor:pointer"
(
click
)="
deleteItem
($
event
,
i
)"
nz-icon
[
nzTheme
]="'
twotone
'"
[
nzType
]="'
close-circle
'"
[
nzTwotoneColor
]="'#
ff0000
'"
></i>
</h5>
</div>
<!--<div class="img-box-upload">-->
<!--<app-upload-image-with-preview-->
<!--[picUrl]="it.pic_url"-->
<!--(imageUploaded)="onImgUploadSuccessByImg($event, it)">-->
<!--</app-upload-image-with-preview>-->
<!--</div>-->
<!--<app-audio-recorder-->
<!--[audioUrl]="it.audio_url ? it.audio_url : null "-->
<!--(audioUploaded)="onAudioUploadSuccessByImg($event, it)"-->
<!--></app-audio-recorder>-->
</div>
<div
nz-col
nzSpan=
"5"
nzOffset=
"1"
>
<div
class=
"bg-box"
>
<button
nz-button
nzType=
"dashed"
(
click
)="
addBtnClick
()"
class=
"add-btn"
>
<i
nz-icon
nzType=
"plus-circle"
nzTheme=
"outline"
></i>
<!--Add Image-->
Add hot zone
</button>
</div>
</div>
</div>
<nz-divider></nz-divider>
<div
class=
"save-box"
>
<button
class=
"save-btn"
nz-button
nzType=
"primary"
[
nzSize
]="'
large
'"
nzShape=
"round"
(
click
)="
saveClick
()"
>
<i
nz-icon
type=
"save"
></i>
Save
</button>
</div>
</div>
src/app/common/custom-hot-zone/custom-hot-zone.component.scss
0 → 100644
View file @
1f535d89
.p-image-children-editor
{
width
:
100%
;
height
:
100%
;
border-radius
:
0
.5rem
;
border
:
2px
solid
#ddd
;
.preview-box
{
margin
:
auto
;
width
:
95%
;
height
:
35vw
;
border
:
2px
dashed
#ddd
;
border-radius
:
0
.5rem
;
background-color
:
#fafafa
;
text-align
:
center
;
color
:
#aaa
;
.preview-img
{
height
:
100%
;
width
:
auto
;
}
}
.bg-box
{
//width: 100%;
margin-bottom
:
1rem
;
}
.img-box
{
margin-bottom
:
1rem
;
display
:
flex
;
flex-direction
:
column
;
align-items
:
center
;
justify-content
:
center
;
}
.img-box-upload
{
width
:
80%
;
}
.add-btn
{
margin-top
:
1rem
;
width
:
200px
;
height
:
90px
;
display
:
flex
;
align-items
:
center
;
justify-content
:
center
;
}
}
.save-box
{
width
:
100%
;
display
:
flex
;
align-items
:
center
;
justify-content
:
center
;
.save-btn
{
width
:
160px
;
height
:
40px
;
//margin-top: 20px;
margin-bottom
:
20px
;
display
:
flex
;
align-items
:
center
;
justify-content
:
center
;
}
}
h5
{
margin-top
:
1rem
;
}
//@import '../../../style/common_mixin';
//
//.p-image-uploader {
// position: relative;
// display: block;
// width: 100%;
// height: 0;
// padding-bottom: 56.25%;
// .p-box {
// position: absolute;
// left: 0;
// top: 0;
// right: 0;
// bottom: 0;
// border: 2px dashed #ddd;
// border-radius: 0.5rem;
// background-color: #fafafa;
// text-align: center;
// color: #aaa;
// .p-upload-icon {
// text-align: center;
// margin: auto;
// .anticon-upload {
// color: #888;
// font-size: 5rem;
// }
// .p-progress-bar {
// position: relative;
// width: 20rem;
// height: 1.5rem;
// border: 1px solid #ccc;
// border-radius: 1rem;
// .p-progress-bg {
// background-color: #1890ff;
// border-radius: 1rem;
// height: 100%;
// }
// .p-progress-value {
// position: absolute;
// top: 0;
// left: 0;
// width: 100%;
// height: 100%;
// text-shadow: 0 0 4px #000;
// color: white;
// text-align: center;
// font-size: 0.9rem;
// line-height: 1.5rem;
// }
// }
// }
// .p-preview {
// width: 100%;
// height: 100%;
// //background-image: url("https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png");
// @include k-img-bg();
// }
// }
//}
//
//.p-btn-delete {
// position: absolute;
// right: -0.5rem;
// top: -0.5rem;
// width: 2rem;
// height: 2rem;
// border: 0.2rem solid white;
// border-radius: 50%;
// font-size: 1.2rem;
// background-color: #fb781a;
// color: white;
// text-align: center;
//}
//
//.p-upload-progress-bg {
// position: absolute;
// width: 100%;
// height: 100%;
// display: flex;
// align-items: center;
// justify-content: center;
// & .i-text {
// position: absolute;
// text-align: center;
// color: white;
// text-shadow: 0 0 2px rgba(0, 0, 0, .85);
// }
// & .i-bg {
// position: absolute;
// left: 0;
// top: 0;
// height: 100%;
// background-color: #27b43f;
// border-radius: 0.5rem;
// }
//}
//
//
//:host ::ng-deep .ant-upload {
// display: block;
//}
src/app/common/custom-hot-zone/custom-hot-zone.component.ts
0 → 100644
View file @
1f535d89
import
{
Component
,
ElementRef
,
EventEmitter
,
HostListener
,
Input
,
OnChanges
,
OnDestroy
,
OnInit
,
Output
,
ViewChild
}
from
'
@angular/core
'
;
import
{
Subject
}
from
'
rxjs
'
;
import
{
debounceTime
}
from
'
rxjs/operators
'
;
import
{
EditorItem
,
HotZoneItem
,
Label
,
MySprite
}
from
'
./Unit
'
;
import
TWEEN
from
'
@tweenjs/tween.js
'
;
@
Component
({
selector
:
'
app-custom-hot-zone
'
,
templateUrl
:
'
./custom-hot-zone.component.html
'
,
styleUrls
:
[
'
./custom-hot-zone.component.scss
'
]
})
export
class
CustomHotZoneComponent
implements
OnInit
,
OnDestroy
,
OnChanges
{
_bgItem
=
null
;
@
Input
()
set
bgItem
(
v
)
{
this
.
_bgItem
=
v
;
this
.
init
();
}
get
bgItem
()
{
return
this
.
_bgItem
;
}
@
Input
()
imgItemArr
=
null
;
@
Input
()
hotZoneItemArr
=
null
;
@
Input
()
hotZoneArr
=
null
;
@
Output
()
save
=
new
EventEmitter
();
@
ViewChild
(
'
canvas
'
)
canvas
:
ElementRef
;
@
ViewChild
(
'
wrap
'
)
wrap
:
ElementRef
;
@
HostListener
(
'
window:resize
'
,
[
'
$event
'
])
canvasWidth
=
1280
;
canvasHeight
=
720
;
canvasBaseW
=
1280
;
canvasBaseH
=
720
;
mapScale
=
1
;
ctx
;
mx
;
my
;
// 点击坐标
// 资源
// rawImages = new Map(res);
// 声音
bgAudio
=
new
Audio
();
images
=
new
Map
();
animationId
:
any
;
winResizeEventStream
=
new
Subject
();
canvasLeft
;
canvasTop
;
renderArr
;
imgArr
=
[];
oldPos
;
curItem
;
bg
:
MySprite
;
changeSizeFlag
=
false
;
changeTopSizeFlag
=
false
;
changeRightSizeFlag
=
false
;
constructor
()
{
}
onResize
(
event
)
{
this
.
winResizeEventStream
.
next
();
}
ngOnInit
()
{
this
.
initListener
();
// this.init();
this
.
update
();
}
ngOnDestroy
()
{
window
.
cancelAnimationFrame
(
this
.
animationId
);
}
ngOnChanges
()
{
}
onBackgroundUploadSuccess
(
e
)
{
console
.
log
(
'
e:
'
,
e
);
this
.
bgItem
.
url
=
e
.
url
;
this
.
refreshBackground
();
}
refreshBackground
(
callBack
=
null
)
{
if
(
!
this
.
bg
)
{
this
.
bg
=
new
MySprite
(
this
.
ctx
);
this
.
renderArr
.
push
(
this
.
bg
);
}
const
bg
=
this
.
bg
;
if
(
this
.
bgItem
.
url
)
{
bg
.
load
(
this
.
bgItem
.
url
).
then
(()
=>
{
const
rate1
=
this
.
canvasWidth
/
bg
.
width
;
const
rate2
=
this
.
canvasHeight
/
bg
.
height
;
const
rate
=
Math
.
min
(
rate1
,
rate2
);
bg
.
setScaleXY
(
rate
);
bg
.
x
=
this
.
canvasWidth
/
2
;
bg
.
y
=
this
.
canvasHeight
/
2
;
if
(
callBack
)
{
callBack
();
}
});
}
}
addBtnClick
()
{
// this.imgArr.push({});
// this.hotZoneArr.push({});
const
item
=
this
.
getHotZoneItem
();
this
.
hotZoneArr
.
push
(
item
);
this
.
refreshHotZoneId
();
console
.
log
(
'
hotZoneArr:
'
,
this
.
hotZoneArr
);
}
onImgUploadSuccessByImg
(
e
,
img
)
{
img
.
pic_url
=
e
.
url
;
this
.
refreshImage
(
img
);
}
refreshImage
(
img
)
{
this
.
hideAllLineDash
();
img
.
picItem
=
this
.
getPicItem
(
img
);
this
.
refreshImageId
();
}
refreshHotZoneId
()
{
for
(
let
i
=
0
;
i
<
this
.
hotZoneArr
.
length
;
i
++
)
{
this
.
hotZoneArr
[
i
].
index
=
i
;
if
(
this
.
hotZoneArr
[
i
])
{
this
.
hotZoneArr
[
i
].
text
=
'
item-
'
+
(
i
+
1
);
}
}
}
refreshImageId
()
{
for
(
let
i
=
0
;
i
<
this
.
imgArr
.
length
;
i
++
)
{
this
.
imgArr
[
i
].
id
=
i
;
if
(
this
.
imgArr
[
i
].
picItem
)
{
this
.
imgArr
[
i
].
picItem
.
text
=
'
Image-
'
+
(
i
+
1
);
}
}
}
getHotZoneItem
(
saveData
=
null
)
{
const
itemW
=
200
;
const
itemH
=
200
;
const
item
=
new
HotZoneItem
(
this
.
ctx
);
item
.
setSize
(
itemW
,
itemH
);
item
.
anchorX
=
0.5
;
item
.
anchorY
=
0.5
;
item
.
x
=
this
.
canvasWidth
/
2
;
item
.
y
=
this
.
canvasHeight
/
2
;
if
(
saveData
)
{
const
saveRect
=
saveData
.
rect
;
item
.
scaleX
=
saveRect
.
width
/
item
.
width
;
item
.
scaleY
=
saveRect
.
height
/
item
.
height
;
item
.
x
=
saveRect
.
x
+
saveRect
.
width
/
2
;
item
.
y
=
saveRect
.
y
+
saveRect
.
height
/
2
;
}
item
.
showLineDash
();
return
item
;
}
getPicItem
(
img
,
saveData
=
null
)
{
const
item
=
new
EditorItem
(
this
.
ctx
);
item
.
load
(
img
.
pic_url
).
then
(
img
=>
{
let
maxW
,
maxH
;
if
(
this
.
bg
)
{
maxW
=
this
.
bg
.
width
*
this
.
bg
.
scaleX
;
maxH
=
this
.
bg
.
height
*
this
.
bg
.
scaleY
;
}
else
{
maxW
=
this
.
canvasWidth
;
maxH
=
this
.
canvasHeight
;
}
let
scaleX
=
maxW
/
3
/
item
.
width
;
let
scaleY
=
maxH
/
3
/
item
.
height
;
if
(
item
.
height
*
scaleX
<
this
.
canvasHeight
)
{
item
.
setScaleXY
(
scaleX
);
}
else
{
item
.
setScaleXY
(
scaleY
);
}
item
.
x
=
this
.
canvasWidth
/
2
;
item
.
y
=
this
.
canvasHeight
/
2
;
if
(
saveData
)
{
const
saveRect
=
saveData
.
rect
;
item
.
setScaleXY
(
saveRect
.
width
/
item
.
width
);
item
.
x
=
saveRect
.
x
+
saveRect
.
width
/
2
;
item
.
y
=
saveRect
.
y
+
saveRect
.
height
/
2
;
}
else
{
item
.
showLineDash
();
}
});
return
item
;
}
onAudioUploadSuccessByImg
(
e
,
img
)
{
img
.
audio_url
=
e
.
url
;
}
deleteItem
(
e
,
i
)
{
// this.imgArr.splice(i , 1);
// this.refreshImageId();
this
.
hotZoneArr
.
splice
(
i
,
1
);
this
.
refreshHotZoneId
();
}
init
()
{
this
.
initData
();
this
.
initCtx
();
this
.
initItem
();
}
initItem
()
{
if
(
!
this
.
bgItem
)
{
this
.
bgItem
=
{};
}
else
{
this
.
refreshBackground
(()
=>
{
// if (!this.imgItemArr) {
// this.imgItemArr = [];
// } else {
// this.initImgArr();
// }
// console.log('aaaaa');
if
(
!
this
.
hotZoneItemArr
)
{
this
.
hotZoneItemArr
=
[];
}
else
{
this
.
initHotZoneArr
();
}
});
}
}
initHotZoneArr
()
{
// console.log('this.hotZoneArr: ', this.hotZoneArr);
let
curBgRect
;
if
(
this
.
bg
)
{
curBgRect
=
this
.
bg
.
getBoundingBox
();
}
else
{
curBgRect
=
{
x
:
0
,
y
:
0
,
width
:
this
.
canvasWidth
,
height
:
this
.
canvasHeight
};
}
let
oldBgRect
=
this
.
bgItem
.
rect
;
if
(
!
oldBgRect
)
{
oldBgRect
=
curBgRect
;
}
const
rate
=
curBgRect
.
width
/
oldBgRect
.
width
;
console
.
log
(
'
rate:
'
,
rate
);
this
.
hotZoneArr
=
[];
const
arr
=
this
.
hotZoneItemArr
.
concat
();
for
(
let
i
=
0
;
i
<
arr
.
length
;
i
++
)
{
const
data
=
JSON
.
parse
(
JSON
.
stringify
(
arr
[
i
]));
// const img = {pic_url: data.pic_url};
data
.
rect
.
x
*=
rate
;
data
.
rect
.
y
*=
rate
;
data
.
rect
.
width
*=
rate
;
data
.
rect
.
height
*=
rate
;
data
.
rect
.
x
+=
curBgRect
.
x
;
data
.
rect
.
y
+=
curBgRect
.
y
;
// img['picItem'] = this.getPicItem(img, data);
// img['audio_url'] = arr[i].audio_url;
// this.imgArr.push(img);
const
item
=
this
.
getHotZoneItem
(
data
);
console
.
log
(
'
item:
'
,
item
);
this
.
hotZoneArr
.
push
(
item
);
}
this
.
refreshHotZoneId
();
// this.refreshImageId();
}
initImgArr
()
{
console
.
log
(
'
this.imgItemArr:
'
,
this
.
imgItemArr
);
let
curBgRect
;
if
(
this
.
bg
)
{
curBgRect
=
this
.
bg
.
getBoundingBox
();
}
else
{
curBgRect
=
{
x
:
0
,
y
:
0
,
width
:
this
.
canvasWidth
,
height
:
this
.
canvasHeight
};
}
let
oldBgRect
=
this
.
bgItem
.
rect
;
if
(
!
oldBgRect
)
{
oldBgRect
=
curBgRect
;
}
const
rate
=
curBgRect
.
width
/
oldBgRect
.
width
;
console
.
log
(
'
rate:
'
,
rate
);
this
.
imgArr
=
[];
const
arr
=
this
.
imgItemArr
.
concat
();
for
(
let
i
=
0
;
i
<
arr
.
length
;
i
++
)
{
const
data
=
JSON
.
parse
(
JSON
.
stringify
(
arr
[
i
]));
const
img
=
{
pic_url
:
data
.
pic_url
};
data
.
rect
.
x
*=
rate
;
data
.
rect
.
y
*=
rate
;
data
.
rect
.
width
*=
rate
;
data
.
rect
.
height
*=
rate
;
data
.
rect
.
x
+=
curBgRect
.
x
;
data
.
rect
.
y
+=
curBgRect
.
y
;
img
[
'
picItem
'
]
=
this
.
getPicItem
(
img
,
data
);
img
[
'
audio_url
'
]
=
arr
[
i
].
audio_url
;
this
.
imgArr
.
push
(
img
);
}
this
.
refreshImageId
();
}
initData
()
{
this
.
canvasWidth
=
this
.
wrap
.
nativeElement
.
clientWidth
;
this
.
canvasHeight
=
this
.
wrap
.
nativeElement
.
clientHeight
;
this
.
mapScale
=
this
.
canvasWidth
/
this
.
canvasBaseW
;
this
.
renderArr
=
[];
this
.
bg
=
null
;
this
.
imgArr
=
[];
this
.
hotZoneArr
=
[];
}
initCtx
()
{
this
.
ctx
=
this
.
canvas
.
nativeElement
.
getContext
(
'
2d
'
);
this
.
canvas
.
nativeElement
.
width
=
this
.
canvasWidth
;
this
.
canvas
.
nativeElement
.
height
=
this
.
canvasHeight
;
}
mapDown
(
event
)
{
this
.
oldPos
=
{
x
:
this
.
mx
,
y
:
this
.
my
};
const
arr
=
this
.
hotZoneArr
;
for
(
let
i
=
arr
.
length
-
1
;
i
>=
0
;
i
--
)
{
const
item
=
arr
[
i
];
if
(
item
)
{
if
(
this
.
checkClickTarget
(
item
))
{
if
(
item
.
lineDashFlag
&&
this
.
checkClickTarget
(
item
.
arrow
))
{
this
.
changeItemSize
(
item
);
}
else
if
(
item
.
lineDashFlag
&&
this
.
checkClickTarget
(
item
.
arrowTop
))
{
this
.
changeItemTopSize
(
item
);
}
else
if
(
item
.
lineDashFlag
&&
this
.
checkClickTarget
(
item
.
arrowRight
))
{
this
.
changeItemRightSize
(
item
);
}
else
{
this
.
changeCurItem
(
item
);
}
return
;
}
}
}
// this.hideAllLineDash();
}
mapMove
(
event
)
{
if
(
!
this
.
curItem
)
{
return
;
}
if
(
this
.
changeSizeFlag
)
{
this
.
changeSize
();
}
else
if
(
this
.
changeTopSizeFlag
)
{
this
.
changeTopSize
();
}
else
if
(
this
.
changeRightSizeFlag
)
{
this
.
changeRightSize
();
}
else
{
const
addX
=
this
.
mx
-
this
.
oldPos
.
x
;
const
addY
=
this
.
my
-
this
.
oldPos
.
y
;
this
.
curItem
.
x
+=
addX
;
this
.
curItem
.
y
+=
addY
;
}
this
.
oldPos
=
{
x
:
this
.
mx
,
y
:
this
.
my
};
}
mapUp
(
event
)
{
this
.
curItem
=
null
;
this
.
changeSizeFlag
=
false
;
this
.
changeTopSizeFlag
=
false
;
this
.
changeRightSizeFlag
=
false
;
}
changeSize
()
{
const
rect
=
this
.
curItem
.
getBoundingBox
();
let
lenW
=
(
this
.
mx
-
(
rect
.
x
+
rect
.
width
/
2
)
)
*
2
;
let
lenH
=
(
(
rect
.
y
+
rect
.
height
/
2
)
-
this
.
my
)
*
2
;
let
minLen
=
20
;
let
s
;
if
(
lenW
<
lenH
)
{
if
(
lenW
<
minLen
)
{
lenW
=
minLen
;
}
s
=
lenW
/
this
.
curItem
.
width
;
}
else
{
if
(
lenH
<
minLen
)
{
lenH
=
minLen
;
}
s
=
lenH
/
this
.
curItem
.
height
;
}
// console.log('s: ', s);
this
.
curItem
.
setScaleXY
(
s
);
this
.
curItem
.
refreshLabelScale
();
}
changeTopSize
()
{
const
rect
=
this
.
curItem
.
getBoundingBox
();
// let lenW = ( this.mx - (rect.x + rect.width / 2) ) * 2;
let
lenH
=
(
(
rect
.
y
+
rect
.
height
/
2
)
-
this
.
my
)
*
2
;
let
minLen
=
20
;
let
s
;
// if (lenW < lenH) {
// if (lenW < minLen) {
// lenW = minLen;
// }
// s = lenW / this.curItem.width;
//
// } else {
if
(
lenH
<
minLen
)
{
lenH
=
minLen
;
}
s
=
lenH
/
this
.
curItem
.
height
;
// }
// console.log('s: ', s);
this
.
curItem
.
scaleY
=
s
;
this
.
curItem
.
refreshLabelScale
();
}
changeRightSize
()
{
const
rect
=
this
.
curItem
.
getBoundingBox
();
let
lenW
=
(
this
.
mx
-
(
rect
.
x
+
rect
.
width
/
2
)
)
*
2
;
// let lenH = ( (rect.y + rect.height / 2) - this.my ) * 2;
let
minLen
=
20
;
let
s
;
if
(
lenW
<
minLen
)
{
lenW
=
minLen
;
}
s
=
lenW
/
this
.
curItem
.
width
;
this
.
curItem
.
scaleX
=
s
;
this
.
curItem
.
refreshLabelScale
();
}
changeItemSize
(
item
)
{
this
.
curItem
=
item
;
this
.
changeSizeFlag
=
true
;
}
changeItemTopSize
(
item
)
{
this
.
curItem
=
item
;
this
.
changeTopSizeFlag
=
true
;
}
changeItemRightSize
(
item
)
{
this
.
curItem
=
item
;
this
.
changeRightSizeFlag
=
true
;
}
changeCurItem
(
item
)
{
this
.
hideAllLineDash
();
this
.
curItem
=
item
;
this
.
curItem
.
showLineDash
();
}
hideAllLineDash
()
{
for
(
let
i
=
0
;
i
<
this
.
imgArr
.
length
;
i
++
)
{
if
(
this
.
imgArr
[
i
].
picItem
)
{
this
.
imgArr
[
i
].
picItem
.
hideLineDash
();
}
}
}
update
()
{
this
.
animationId
=
window
.
requestAnimationFrame
(
this
.
update
.
bind
(
this
));
// 清除画布内容
this
.
ctx
.
clearRect
(
0
,
0
,
this
.
canvasWidth
,
this
.
canvasHeight
);
for
(
let
i
=
0
;
i
<
this
.
renderArr
.
length
;
i
++
)
{
this
.
renderArr
[
i
].
update
(
this
);
}
// for (let i = 0; i < this.imgArr.length; i++) {
// const picItem = this.imgArr[i].picItem;
// if (picItem) {
// picItem.update(this);
// }
// }
this
.
updateArr
(
this
.
hotZoneArr
);
TWEEN
.
update
();
}
updateArr
(
arr
)
{
if
(
arr
)
{
for
(
let
i
=
0
;
i
<
arr
.
length
;
i
++
)
{
arr
[
i
].
update
();
}
}
}
renderAfterResize
()
{
this
.
canvasWidth
=
this
.
wrap
.
nativeElement
.
clientWidth
;
this
.
canvasHeight
=
this
.
wrap
.
nativeElement
.
clientHeight
;
this
.
init
();
}
initListener
()
{
this
.
winResizeEventStream
.
pipe
(
debounceTime
(
500
))
.
subscribe
(
data
=>
{
this
.
renderAfterResize
();
});
if
(
this
.
IsPC
())
{
this
.
canvas
.
nativeElement
.
addEventListener
(
'
mousedown
'
,
(
event
)
=>
{
setMxMyByMouse
(
event
);
this
.
mapDown
(
event
);
});
this
.
canvas
.
nativeElement
.
addEventListener
(
'
mousemove
'
,
(
event
)
=>
{
setMxMyByMouse
(
event
);
this
.
mapMove
(
event
);
});
this
.
canvas
.
nativeElement
.
addEventListener
(
'
mouseup
'
,
(
event
)
=>
{
setMxMyByMouse
(
event
);
this
.
mapUp
(
event
);
});
const
setMxMyByMouse
=
(
event
)
=>
{
this
.
mx
=
event
.
offsetX
;
this
.
my
=
event
.
offsetY
;
};
}
else
{
this
.
canvas
.
nativeElement
.
addEventListener
(
'
touchstart
'
,
(
event
)
=>
{
setMxMyByTouch
(
event
);
this
.
mapDown
(
event
);
});
this
.
canvas
.
nativeElement
.
addEventListener
(
'
touchmove
'
,
(
event
)
=>
{
setMxMyByTouch
(
event
);
this
.
mapMove
(
event
);
});
this
.
canvas
.
nativeElement
.
addEventListener
(
'
touchend
'
,
(
event
)
=>
{
setMxMyByTouch
(
event
);
this
.
mapUp
(
event
);
});
this
.
canvas
.
nativeElement
.
addEventListener
(
'
touchcancel
'
,
(
event
)
=>
{
setMxMyByTouch
(
event
);
this
.
mapUp
(
event
);
});
const
setMxMyByTouch
=
(
event
)
=>
{
if
(
event
.
touches
.
length
<=
0
)
{
return
;
}
if
(
this
.
canvasLeft
==
null
)
{
setParentOffset
();
}
this
.
mx
=
event
.
touches
[
0
].
pageX
-
this
.
canvasLeft
;
this
.
my
=
event
.
touches
[
0
].
pageY
-
this
.
canvasTop
;
};
const
setParentOffset
=
()
=>
{
const
rect
=
this
.
canvas
.
nativeElement
.
getBoundingClientRect
();
this
.
canvasLeft
=
rect
.
left
;
this
.
canvasTop
=
rect
.
top
;
};
}
}
IsPC
()
{
if
(
window
[
'
ELECTRON
'
])
{
return
false
;
// 封装客户端标记
}
if
(
document
.
body
.
ontouchstart
!==
undefined
)
{
return
false
;
}
else
{
return
true
;
}
}
checkClickTarget
(
target
)
{
const
rect
=
target
.
getBoundingBox
();
if
(
this
.
checkPointInRect
(
this
.
mx
,
this
.
my
,
rect
))
{
return
true
;
}
return
false
;
}
checkPointInRect
(
x
,
y
,
rect
)
{
if
(
x
>=
rect
.
x
&&
x
<=
rect
.
x
+
rect
.
width
)
{
if
(
y
>=
rect
.
y
&&
y
<=
rect
.
y
+
rect
.
height
)
{
return
true
;
}
}
return
false
;
}
saveClick
()
{
const
bgItem
=
this
.
bgItem
;
if
(
this
.
bg
)
{
bgItem
[
'
rect
'
]
=
this
.
bg
.
getBoundingBox
();
}
else
{
bgItem
[
'
rect
'
]
=
{
x
:
0
,
y
:
0
,
width
:
Math
.
round
(
this
.
canvasWidth
*
100
)
/
100
,
height
:
Math
.
round
(
this
.
canvasHeight
*
100
)
/
100
};
}
// const imgItemArr = [];
// const imgArr = this.imgArr;
// for (let i = 0; i < imgArr.length; i++) {
//
// const imgItem = {
// id: imgArr[i].id,
// pic_url: imgArr[i].pic_url,
// audio_url: imgArr[i].audio_url,
// };
// if (imgArr[i].picItem) {
// imgItem['rect'] = imgArr[i].picItem.getBoundingBox();
// imgItem['rect'].x -= bgItem['rect'].x;
// imgItem['rect'].y -= bgItem['rect'].y;
// }
// imgItemArr.push(imgItem);
// }
const
hotZoneItemArr
=
[];
const
hotZoneArr
=
this
.
hotZoneArr
;
for
(
let
i
=
0
;
i
<
hotZoneArr
.
length
;
i
++
)
{
const
hotZoneItem
=
{
index
:
hotZoneArr
[
i
].
index
,
};
hotZoneItem
[
'
rect
'
]
=
hotZoneArr
[
i
].
getBoundingBox
();
hotZoneItem
[
'
rect
'
].
x
=
Math
.
round
(
(
hotZoneItem
[
'
rect
'
].
x
-
bgItem
[
'
rect
'
].
x
)
*
100
)
/
100
;
hotZoneItem
[
'
rect
'
].
y
=
Math
.
round
(
(
hotZoneItem
[
'
rect
'
].
y
-
bgItem
[
'
rect
'
].
y
)
*
100
)
/
100
;
hotZoneItem
[
'
rect
'
].
width
=
Math
.
round
(
(
hotZoneItem
[
'
rect
'
].
width
)
*
100
)
/
100
;
hotZoneItem
[
'
rect
'
].
height
=
Math
.
round
(
(
hotZoneItem
[
'
rect
'
].
height
)
*
100
)
/
100
;
hotZoneItemArr
.
push
(
hotZoneItem
);
}
console
.
log
(
'
hotZoneItemArr:
'
,
hotZoneItemArr
);
this
.
save
.
emit
({
bgItem
,
hotZoneItemArr
});
}
}
src/assets/common/arrow.png
0 → 100644
View file @
1f535d89
18.5 KB
src/assets/common/arrow_right.png
0 → 100644
View file @
1f535d89
15.7 KB
src/assets/common/arrow_top.png
0 → 100644
View file @
1f535d89
15.6 KB
src/assets/libs/video-js-7.0.0/video.js
View file @
1f535d89
...
@@ -5103,7 +5103,7 @@
...
@@ -5103,7 +5103,7 @@
* Silence a Promise-like object.
* Silence a Promise-like object.
*
*
* This is useful for avoiding non-harmful, but potentially confusing "uncaught
* This is useful for avoiding non-harmful, but potentially confusing "uncaught
* play promise" rejection error messages.
* play
Old
promise" rejection error messages.
*
*
* @param {Object} value
* @param {Object} value
* An object that may or may not be `Promise`-like.
* An object that may or may not be `Promise`-like.
...
@@ -10856,8 +10856,8 @@
...
@@ -10856,8 +10856,8 @@
/**
/**
* Boolean indicating whether the `Tech` supports changing the speed at which the video
* Boolean indicating whether the `Tech` supports changing the speed at which the video
* plays. Examples:
* plays. Examples:
* - Set player to play 2x (twice) as fast
* - Set player to play
Old
2x (twice) as fast
* - Set player to play 0.5x (half) as fast
* - Set player to play
Old
0.5x (half) as fast
*
*
* @type {boolean}
* @type {boolean}
* @default
* @default
...
@@ -12492,11 +12492,11 @@
...
@@ -12492,11 +12492,11 @@
Component.registerComponent('Button', Button);
Component.registerComponent('Button', Button);
/**
/**
* @file big-play-button.js
* @file big-play
Old
-button.js
*/
*/
/**
/**
* The initial play button that shows before the video has played. The hiding of the
* The initial play
Old
button that shows before the video has played. The hiding of the
* `BigPlayButton` get done via CSS and `Player` states.
* `BigPlayButton` get done via CSS and `Player` states.
*
*
* @extends Button
* @extends Button
...
@@ -12520,12 +12520,12 @@
...
@@ -12520,12 +12520,12 @@
* Builds the default DOM `className`.
* Builds the default DOM `className`.
*
*
* @return {string}
* @return {string}
* The DOM `className` for this object. Always returns 'vjs-big-play-button'.
* The DOM `className` for this object. Always returns 'vjs-big-play
Old
-button'.
*/
*/
BigPlayButton.prototype.buildCSSClass = function buildCSSClass() {
BigPlayButton.prototype.buildCSSClass = function buildCSSClass() {
return 'vjs-big-play-button';
return 'vjs-big-play
Old
-button';
};
};
/**
/**
...
@@ -12674,11 +12674,11 @@
...
@@ -12674,11 +12674,11 @@
Component.registerComponent('CloseButton', CloseButton);
Component.registerComponent('CloseButton', CloseButton);
/**
/**
* @file play-toggle.js
* @file play
Old
-toggle.js
*/
*/
/**
/**
* Button to toggle between play and pause.
* Button to toggle between play
Old
and pause.
*
*
* @extends Button
* @extends Button
*/
*/
...
@@ -12715,7 +12715,7 @@
...
@@ -12715,7 +12715,7 @@
PlayToggle.prototype.buildCSSClass = function buildCSSClass() {
PlayToggle.prototype.buildCSSClass = function buildCSSClass() {
return 'vjs-play-control ' + _Button.prototype.buildCSSClass.call(this);
return 'vjs-play
Old
-control ' + _Button.prototype.buildCSSClass.call(this);
};
};
/**
/**
...
@@ -12741,7 +12741,7 @@
...
@@ -12741,7 +12741,7 @@
/**
/**
* This gets called once after the video has ended and the user seeks so that
* This gets called once after the video has ended and the user seeks so that
* we can change the replay button back to a play button.
* we can change the replay button back to a play
Old
button.
*
*
* @param {EventTarget~Event} [event]
* @param {EventTarget~Event} [event]
* The event that caused this function to run.
* The event that caused this function to run.
...
@@ -14131,7 +14131,7 @@
...
@@ -14131,7 +14131,7 @@
Component.registerComponent('TimeTooltip', TimeTooltip);
Component.registerComponent('TimeTooltip', TimeTooltip);
/**
/**
* @file play-progress-bar.js
* @file play
Old
-progress-bar.js
*/
*/
/**
/**
...
@@ -14157,7 +14157,7 @@
...
@@ -14157,7 +14157,7 @@
*/
*/
PlayProgressBar.prototype.createEl = function createEl() {
PlayProgressBar.prototype.createEl = function createEl() {
return _Component.prototype.createEl.call(this, 'div', {
return _Component.prototype.createEl.call(this, 'div', {
className: 'vjs-play-progress vjs-slider-bar',
className: 'vjs-play
Old
-progress vjs-slider-bar',
innerHTML: '<span class="vjs-control-text"><span>' + this.localize('Progress') + '</span>: 0%</span>'
innerHTML: '<span class="vjs-control-text"><span>' + this.localize('Progress') + '</span>: 0%</span>'
});
});
};
};
...
@@ -14365,7 +14365,7 @@
...
@@ -14365,7 +14365,7 @@
this.on(this.player_, 'timeupdate', this.update);
this.on(this.player_, 'timeupdate', this.update);
this.on(this.player_, 'ended', this.handleEnded);
this.on(this.player_, 'ended', this.handleEnded);
// when playing, let's ensure we smoothly update the play progress bar
// when playing, let's ensure we smoothly update the play
Old
progress bar
// via an interval
// via an interval
this.updateInterval = null;
this.updateInterval = null;
...
@@ -14403,7 +14403,7 @@
...
@@ -14403,7 +14403,7 @@
};
};
/**
/**
* This function updates the play progress bar and accessibility
* This function updates the play
Old
progress bar and accessibility
* attributes to whatever is passed in.
* attributes to whatever is passed in.
*
*
* @param {number} currentTime
* @param {number} currentTime
...
@@ -14694,7 +14694,7 @@
...
@@ -14694,7 +14694,7 @@
/**
/**
* The Progress Control component contains the seek bar, load progress,
* The Progress Control component contains the seek bar, load progress,
* and play progress.
* and play
Old
progress.
*
*
* @extends Component
* @extends Component
*/
*/
...
@@ -20000,7 +20000,7 @@
...
@@ -20000,7 +20000,7 @@
this.el_.play();
this.el_.play();
// playing and pausing synchronously during the transition to fullscreen
// playing and pausing synchronously during the transition to fullscreen
// can get iOS ~6.1 devices into a play/pause loop
// can get iOS ~6.1 devices into a play
Old
/pause loop
this.setTimeout(function () {
this.setTimeout(function () {
video.pause();
video.pause();
video.webkitEnterFullScreen();
video.webkitEnterFullScreen();
...
@@ -20432,8 +20432,8 @@
...
@@ -20432,8 +20432,8 @@
/**
/**
* Boolean indicating whether the `Tech` supports changing the speed at which the media
* Boolean indicating whether the `Tech` supports changing the speed at which the media
* plays. Examples:
* plays. Examples:
* - Set player to play 2x (twice) as fast
* - Set player to play
Old
2x (twice) as fast
* - Set player to play 0.5x (half) as fast
* - Set player to play
Old
0.5x (half) as fast
*
*
* @type {boolean}
* @type {boolean}
* @default {@link Html5.canControlPlaybackRate}
* @default {@link Html5.canControlPlaybackRate}
...
@@ -20516,7 +20516,7 @@
...
@@ -20516,7 +20516,7 @@
Html5.patchCanPlayType = function () {
Html5.patchCanPlayType = function () {
// Android 4.0 and above can play HLS to some extent but it reports being unable to do so
// Android 4.0 and above can play
Old
HLS to some extent but it reports being unable to do so
// Firefox and Chrome report correctly
// Firefox and Chrome report correctly
if (ANDROID_VERSION >= 4.0 && !IS_FIREFOX && !IS_CHROME) {
if (ANDROID_VERSION >= 4.0 && !IS_FIREFOX && !IS_CHROME) {
Html5.TEST_VID.constructor.prototype.canPlayType = function (type) {
Html5.TEST_VID.constructor.prototype.canPlayType = function (type) {
...
@@ -20635,7 +20635,7 @@
...
@@ -20635,7 +20635,7 @@
/**
/**
* Get the value of `autoplay` from the media element. `autoplay` indicates
* Get the value of `autoplay` from the media element. `autoplay` indicates
* that the media should start to play as soon as the page is ready.
* that the media should start to play
Old
as soon as the page is ready.
*
*
* @method Html5#autoplay
* @method Html5#autoplay
* @return {boolean}
* @return {boolean}
...
@@ -20686,8 +20686,8 @@
...
@@ -20686,8 +20686,8 @@
* @method Html5#playsinline
* @method Html5#playsinline
* @return {boolean}
* @return {boolean}
* - The value of `playsinline` from the media element.
* - The value of `playsinline` from the media element.
* - True indicates that the media should play inline.
* - True indicates that the media should play
Old
inline.
* - False indicates that the media should not play inline.
* - False indicates that the media should not play
Old
inline.
*
*
* @see [Spec]{@link https://html.spec.whatwg.org/#attr-video-playsinline}
* @see [Spec]{@link https://html.spec.whatwg.org/#attr-video-playsinline}
*/
*/
...
@@ -20730,7 +20730,7 @@
...
@@ -20730,7 +20730,7 @@
/**
/**
* Set the value of `autoplay` on the media element. `autoplay` indicates
* Set the value of `autoplay` on the media element. `autoplay` indicates
* that the media should start to play as soon as the page is ready.
* that the media should start to play
Old
as soon as the page is ready.
*
*
* @method Html5#setAutoplay
* @method Html5#setAutoplay
* @param {boolean} autoplay
* @param {boolean} autoplay
...
@@ -20764,8 +20764,8 @@
...
@@ -20764,8 +20764,8 @@
*
*
* @method Html5#setPlaysinline
* @method Html5#setPlaysinline
* @param {boolean} playsinline
* @param {boolean} playsinline
* - True indicates that the media should play inline.
* - True indicates that the media should play
Old
inline.
* - False indicates that the media should not play inline.
* - False indicates that the media should not play
Old
inline.
*
*
* @see [Spec]{@link https://html.spec.whatwg.org/#attr-video-playsinline}
* @see [Spec]{@link https://html.spec.whatwg.org/#attr-video-playsinline}
*/
*/
...
@@ -20927,8 +20927,8 @@
...
@@ -20927,8 +20927,8 @@
/**
/**
* Get the value of `playbackRate` from the media element. `playbackRate` indicates
* Get the value of `playbackRate` from the media element. `playbackRate` indicates
* the rate at which the media is currently playing back. Examples:
* the rate at which the media is currently playing back. Examples:
* - if playbackRate is set to 2, media will play twice as fast.
* - if playbackRate is set to 2, media will play
Old
twice as fast.
* - if playbackRate is set to 0.5, media will play half as fast.
* - if playbackRate is set to 0.5, media will play
Old
half as fast.
*
*
* @method Html5#playbackRate
* @method Html5#playbackRate
* @return {number}
* @return {number}
...
@@ -20945,8 +20945,8 @@
...
@@ -20945,8 +20945,8 @@
* `playbackRate` after playback has started, use {@link Html5#playbackRate} for that.
* `playbackRate` after playback has started, use {@link Html5#playbackRate} for that.
*
*
* Examples:
* Examples:
* - if defaultPlaybackRate is set to 2, media will play twice as fast.
* - if defaultPlaybackRate is set to 2, media will play
Old
twice as fast.
* - if defaultPlaybackRate is set to 0.5, media will play half as fast.
* - if defaultPlaybackRate is set to 0.5, media will play
Old
half as fast.
*
*
* @method Html5.prototype.defaultPlaybackRate
* @method Html5.prototype.defaultPlaybackRate
* @return {number}
* @return {number}
...
@@ -21100,9 +21100,9 @@
...
@@ -21100,9 +21100,9 @@
/**
/**
* Set the value of `playbackRate` on the media element. `playbackRate` indicates
* Set the value of `playbackRate` on the media element. `playbackRate` indicates
* the rate at which the media should play back. Examples:
* the rate at which the media should play
Old
back. Examples:
* - if playbackRate is set to 2, media will play twice as fast.
* - if playbackRate is set to 2, media will play
Old
twice as fast.
* - if playbackRate is set to 0.5, media will play half as fast.
* - if playbackRate is set to 0.5, media will play
Old
half as fast.
*
*
* @method Html5#setPlaybackRate
* @method Html5#setPlaybackRate
* @return {number}
* @return {number}
...
@@ -21115,12 +21115,12 @@
...
@@ -21115,12 +21115,12 @@
/**
/**
* Set the value of `defaultPlaybackRate` on the media element. `defaultPlaybackRate` indicates
* Set the value of `defaultPlaybackRate` on the media element. `defaultPlaybackRate` indicates
* the rate at which the media should play back upon initial startup. Changing this value
* the rate at which the media should play
Old
back upon initial startup. Changing this value
* after a video has started will do nothing. Instead you should used {@link Html5#setPlaybackRate}.
* after a video has started will do nothing. Instead you should used {@link Html5#setPlaybackRate}.
*
*
* Example Values:
* Example Values:
* - if playbackRate is set to 2, media will play twice as fast.
* - if playbackRate is set to 2, media will play
Old
twice as fast.
* - if playbackRate is set to 0.5, media will play half as fast.
* - if playbackRate is set to 0.5, media will play
Old
half as fast.
*
*
* @method Html5.prototype.setDefaultPlaybackRate
* @method Html5.prototype.setDefaultPlaybackRate
* @return {number}
* @return {number}
...
@@ -21137,7 +21137,7 @@
...
@@ -21137,7 +21137,7 @@
// wrap native functions with a function
// wrap native functions with a function
// The list is as follows:
// The list is as follows:
// pause, load, play
// pause, load, play
Old
[
[
/**
/**
* A wrapper around the media elements `pause` function. This will call the `HTML5`
* A wrapper around the media elements `pause` function. This will call the `HTML5`
...
@@ -21158,10 +21158,10 @@
...
@@ -21158,10 +21158,10 @@
'load',
'load',
/**
/**
* A wrapper around the media elements `play` function. This will call the `HTML5`s
* A wrapper around the media elements `play
Old
` function. This will call the `HTML5`s
* media element `play` function.
* media element `play
Old
` function.
*
*
* @method Html5#play
* @method Html5#play
Old
* @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-play}
* @see [Spec]{@link https://www.w3.org/TR/html5/embedded-content-0.html#dom-media-play}
*/
*/
'play'].forEach(function (prop) {
'play'].forEach(function (prop) {
...
@@ -21184,7 +21184,7 @@
...
@@ -21184,7 +21184,7 @@
Html5.nativeSourceHandler = {};
Html5.nativeSourceHandler = {};
/**
/**
* Check if the media element can play the given mime type.
* Check if the media element can play
Old
the given mime type.
*
*
* @param {string} type
* @param {string} type
* The mimetype to check
* The mimetype to check
...
@@ -22409,7 +22409,7 @@
...
@@ -22409,7 +22409,7 @@
this.error(null);
this.error(null);
// If it's already playing we want to trigger a firstplay event now.
// If it's already playing we want to trigger a firstplay event now.
// The firstplay event relies on both the play and loadstart events
// The firstplay event relies on both the play
Old
and loadstart events
// which can happen in any order for a new source
// which can happen in any order for a new source
if (!this.paused()) {
if (!this.paused()) {
/**
/**
...
@@ -22614,7 +22614,7 @@
...
@@ -22614,7 +22614,7 @@
this.removeClass('vjs-paused');
this.removeClass('vjs-paused');
this.addClass('vjs-playing');
this.addClass('vjs-playing');
// hide the poster when the user hits play
// hide the poster when the user hits play
Old
this.hasStarted(true);
this.hasStarted(true);
/**
/**
* Triggered whenever an {@link Tech#play} event happens. Indicates that
* Triggered whenever an {@link Tech#play} event happens. Indicates that
...
@@ -22806,7 +22806,7 @@
...
@@ -22806,7 +22806,7 @@
/**
/**
* Fired the first time a video is played. Not part of the HLS spec, and this is
* Fired the first time a video is played. Not part of the HLS spec, and this is
* probably not the best implementation yet, so use sparingly. If you don't have a
* probably not the best implementation yet, so use sparingly. If you don't have a
* reason to prevent playback, use `myPlayer.one('play');` instead.
* reason to prevent playback, use `myPlayer.one('play
Old
');` instead.
*
*
* @event Player#firstplay
* @event Player#firstplay
* @deprecated As of 6.0 firstplay event is deprecated.
* @deprecated As of 6.0 firstplay event is deprecated.
...
@@ -22876,7 +22876,7 @@
...
@@ -22876,7 +22876,7 @@
};
};
/**
/**
* Handle a click on the media element to play/pause
* Handle a click on the media element to play
Old
/pause
*
*
* @param {EventTarget~Event} event
* @param {EventTarget~Event} event
* the event that caused this function to trigger
* the event that caused this function to trigger
...
@@ -23165,13 +23165,13 @@
...
@@ -23165,13 +23165,13 @@
Player.prototype.play = function play() {
Player.prototype.play = function play() {
var _this6 = this;
var _this6 = this;
// If this is called while we have a play queued up on a loadstart, remove
// If this is called while we have a play
Old
queued up on a loadstart, remove
// that listener to avoid getting in a potentially bad state.
// that listener to avoid getting in a potentially bad state.
if (this.playOnLoadstart_) {
if (this.playOnLoadstart_) {
this.off('loadstart', this.playOnLoadstart_);
this.off('loadstart', this.playOnLoadstart_);
}
}
// If the player/tech is not ready, queue up another call to `play()` for
// If the player/tech is not ready, queue up another call to `play
Old
()` for
// when it is. This will loop back into this method for another attempt at
// when it is. This will loop back into this method for another attempt at
// playback when the tech is ready.
// playback when the tech is ready.
if (!this.isReady_) {
if (!this.isReady_) {
...
@@ -23195,7 +23195,7 @@
...
@@ -23195,7 +23195,7 @@
// for both the `ready` and a `loadstart` when the source is finally
// for both the `ready` and a `loadstart` when the source is finally
// resolved by middleware and set on the player.
// resolved by middleware and set on the player.
//
//
// This can happen if `play()` is called while changing sources or before
// This can happen if `play
Old
()` is called while changing sources or before
// one has been set on the player.
// one has been set on the player.
} else {
} else {
...
@@ -23221,7 +23221,7 @@
...
@@ -23221,7 +23221,7 @@
};
};
/**
/**
* Check if the player is paused or has yet to play
* Check if the player is paused or has yet to play
Old
*
*
* @return {boolean}
* @return {boolean}
* - false: if the media is currently playing
* - false: if the media is currently playing
...
@@ -23752,7 +23752,7 @@
...
@@ -23752,7 +23752,7 @@
};
};
/**
/**
* Check whether the player can play a given mimetype
* Check whether the player can play
Old
a given mimetype
*
*
* @see https://www.w3.org/TR/2011/WD-html5-20110113/video.html#dom-navigator-canplaytype
* @see https://www.w3.org/TR/2011/WD-html5-20110113/video.html#dom-navigator-canplaytype
*
*
...
@@ -23958,7 +23958,7 @@
...
@@ -23958,7 +23958,7 @@
/**
/**
* Set the source object on the tech, returns a boolean that indicates whether
* Set the source object on the tech, returns a boolean that indicates whether
* there is a tech that can play the source or not
* there is a tech that can play
Old
the source or not
*
*
* @param {Tech~SourceObject} source
* @param {Tech~SourceObject} source
* The source object to set on the Tech
* The source object to set on the Tech
...
@@ -24136,7 +24136,7 @@
...
@@ -24136,7 +24136,7 @@
* Playsinline tells the browser that non-fullscreen playback is preferred.
* Playsinline tells the browser that non-fullscreen playback is preferred.
*
*
* @param {boolean} [value]
* @param {boolean} [value]
* - true means that we should try to play inline by default
* - true means that we should try to play
Old
inline by default
* - false means that we should use the browser's default playback mode,
* - false means that we should use the browser's default playback mode,
* which in most cases is inline. iOS Safari is a notable exception
* which in most cases is inline. iOS Safari is a notable exception
* and plays fullscreen by default.
* and plays fullscreen by default.
...
@@ -24229,7 +24229,7 @@
...
@@ -24229,7 +24229,7 @@
* Some techs (e.g. YouTube) can provide a poster source in an
* Some techs (e.g. YouTube) can provide a poster source in an
* asynchronous way. We want the poster component to use this
* asynchronous way. We want the poster component to use this
* poster source so that it covers up the tech's controls.
* poster source so that it covers up the tech's controls.
* (YouTube's play button). However we only want to use this
* (YouTube's play
Old
button). However we only want to use this
* source if the player user hasn't set a poster through
* source if the player user hasn't set a poster through
* the normal APIs.
* the normal APIs.
*
*
...
@@ -31635,7 +31635,7 @@
...
@@ -31635,7 +31635,7 @@
if (!playlist.attributes) {
if (!playlist.attributes) {
// Although the spec states an #EXT-X-STREAM-INF tag MUST have a
// Although the spec states an #EXT-X-STREAM-INF tag MUST have a
// BANDWIDTH attribute, we can play the stream without it. This means a poorly
// BANDWIDTH attribute, we can play
Old
the stream without it. This means a poorly
// formatted master playlist may not have an attribute list. An attributes
// formatted master playlist may not have an attribute list. An attributes
// property is added here to prevent undefined references when we encounter
// property is added here to prevent undefined references when we encounter
// this scenario.
// this scenario.
...
@@ -40693,7 +40693,7 @@
...
@@ -40693,7 +40693,7 @@
/**
/**
* Calculates the MIME type strings for a working configuration of
* Calculates the MIME type strings for a working configuration of
* SourceBuffers to play variant streams in a master playlist. If
* SourceBuffers to play
Old
variant streams in a master playlist. If
* there is no possible working configuration, an empty array will be
* there is no possible working configuration, an empty array will be
* returned.
* returned.
*
*
...
@@ -41255,7 +41255,7 @@
...
@@ -41255,7 +41255,7 @@
// If we have a seekable range use that as the limit for what can be removed safely
// If we have a seekable range use that as the limit for what can be removed safely
removeToTime = seekable$$1.start(0);
removeToTime = seekable$$1.start(0);
} else {
} else {
// otherwise remove anything older than 30 seconds before the current play head
// otherwise remove anything older than 30 seconds before the current play
Old
head
removeToTime = currentTime - 30;
removeToTime = currentTime - 30;
}
}
...
@@ -45656,10 +45656,10 @@
...
@@ -45656,10 +45656,10 @@
var media = this.masterPlaylistLoader_.media();
var media = this.masterPlaylistLoader_.media();
// Check that everything is ready to begin buffering for the first call to play
// Check that everything is ready to begin buffering for the first call to play
Old
// If 1) there is no active media
// If 1) there is no active media
// 2) the player is paused
// 2) the player is paused
// 3) the first play has already been setup
// 3) the first play
Old
has already been setup
// then exit early
// then exit early
if (!media || this.tech_.paused() || this.hasPlayed_()) {
if (!media || this.tech_.paused() || this.hasPlayed_()) {
return false;
return false;
...
@@ -45722,12 +45722,12 @@
...
@@ -45722,12 +45722,12 @@
}
}
// if autoplay is enabled, begin playback. This is duplicative of
// if autoplay is enabled, begin playback. This is duplicative of
// code in video.js but is required because play() must be invoked
// code in video.js but is required because play
Old
() must be invoked
// *after* the media source has opened.
// *after* the media source has opened.
if (this.tech_.autoplay()) {
if (this.tech_.autoplay()) {
var playPromise = this.tech_.play();
var playPromise = this.tech_.play();
// Catch/silence error when a pause interrupts a play request
// Catch/silence error when a pause interrupts a play
Old
request
// on browsers which return a promise
// on browsers which return a promise
if (typeof playPromise !== 'undefined' && typeof playPromise.then === 'function') {
if (typeof playPromise !== 'undefined' && typeof playPromise.then === 'function') {
playPromise.then(null, function (e) {
playPromise.then(null, function (e) {
...
@@ -46805,9 +46805,9 @@
...
@@ -46805,9 +46805,9 @@
};
};
/**
/**
* Set the source on the player element, play, and seek if necessary
* Set the source on the player element, play
Old
, and seek if necessary
*
*
* @param {Object} sourceObj An object specifying the source url and mime-type to play
* @param {Object} sourceObj An object specifying the source url and mime-type to play
Old
* @private
* @private
*/
*/
var setSource = function setSource(sourceObj) {
var setSource = function setSource(sourceObj) {
src/assets/libs/video-js-7.0.0/video.min.js
View file @
1f535d89
This source diff could not be displayed because it is too large. You can
view the blob
instead.
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