Commit 35ac3460 authored by 李维's avatar 李维

调整进度条自动隐藏

parent d215459d
......@@ -23,8 +23,14 @@ cc.Class({
playBtn: null, // 播放按钮
pauseBtn: null, // 暂停按钮
replayBtn: null, // 重播按钮
properties: {
setTimeoutIDs: [],
setIntervalIDs: [],
},
init() {
console.log("Init video control component.")
// console.log("Init video control component.")
this.bgProgress = cc.find('progress', this.node);
this.bar = cc.find('progress/bar', this.node);
this.dragBtn = cc.find('dragButton', this.node);
......@@ -80,9 +86,8 @@ cc.Class({
this.node.emit('on_drag_percent', percent)
});
this.dragBtn.off(cc.Node.EventType.TOUCH_ENDED);
this.dragBtn.on(cc.Node.EventType.TOUCH_ENDED, (e) => {
// console.log("用户抬手-1");
this.dragBtn.off(cc.Node.EventType.TOUCH_END);
this.dragBtn.on(cc.Node.EventType.TOUCH_END, (e) => {
if(this.userDragStart) {
this.userDragStart = false;
this.node.emit('on_drag_button', false);
......@@ -91,7 +96,6 @@ cc.Class({
this.dragBtn.off(cc.Node.EventType.MOUSE_UP);
this.dragBtn.on(cc.Node.EventType.MOUSE_UP, (e) => {
// console.log("用户抬手-2");
if(this.userDragStart) {
this.userDragStart = false;
this.node.emit('on_drag_button', false);
......@@ -100,7 +104,6 @@ cc.Class({
this.dragBtn.off(cc.Node.EventType.TOUCH_CANCEL);
this.dragBtn.on(cc.Node.EventType.TOUCH_CANCEL, (e) => {
// console.log("用户抬手-3");
if(this.userDragStart) {
this.userDragStart = false;
this.node.emit('on_drag_button', false);
......@@ -108,7 +111,6 @@ cc.Class({
});
},
// 0:暂停 1:播放中 2:重播
videoStatus: null,
refreshVideoBtnState(status) {
......@@ -139,7 +141,7 @@ cc.Class({
addListener() {
this.node.on('video_play_end', () => {
console.log("video_play_end");
// console.log("video_play_end");
this.refreshVideoBtnState();
})
......@@ -153,12 +155,20 @@ cc.Class({
})
this.node.on('update_video_status', (status)=>{
console.log("update_video_status", status);
// console.log("update_video_status", status);
this.refreshVideoBtnState(status);
})
this.node.on('hide_bar', (withAnimation)=>{
this.hideBar(withAnimation);
})
this.node.on('show_bar', (withAnimation)=>{
this.showBar(withAnimation);
})
this.node.on("set_mark_points", (data)=>{
console.log("set_mark_points")
// console.log("set_mark_points")
const markPoint = cc.find("markPoint", this.node);
const markPointsContainer = cc.find("markNode", this.node);
for(let i=0; i<data.length; i++) {
......@@ -170,6 +180,49 @@ cc.Class({
})
},
// 显示进度条
showBar(withAnimation) {
const widget = this.node.getComponent(cc.Widget);
if(withAnimation) {
widget.bottom = -100;
let count = 10;
let step = 200 / count;
const _intervalId = setInterval(()=>{
widget.bottom+=step;
count--;
if(count <=0) {
widget.bottom = 100;
clearInterval(_intervalId)
}
},30)
this.setIntervalIDs.push(_intervalId);
} else {
widget.bottom = 100;
}
},
// 隐藏进度条
hideBar(withAnimation) {
const widget = this.node.getComponent(cc.Widget);
if(withAnimation) {
widget.bottom = 100;
let count = 10;
let step = 200 / count;
const _intervalId = setInterval(()=>{
widget.bottom-=step;
count--;
if(count <=0) {
widget.bottom = -100;
clearInterval(_intervalId)
}
},30)
this.setIntervalIDs.push(_intervalId);
} else {
widget.bottom = -100;
}
},
setProgress(progress) {
const dragStartX = -520;
setTimeout(() => {
......@@ -180,4 +233,10 @@ cc.Class({
}
}, 1);
},
onDestroy() {
for(let i=0; i<this.setIntervalIDs.length; i++) {
clearInterval(this.setIntervalIDs[i]);
}
}
});
......@@ -749,8 +749,8 @@
"__type__": "TypedArray",
"ctor": "Float64Array",
"array": [
0,
-320,
100,
-370,
0,
0,
0,
......@@ -1697,15 +1697,15 @@
"__id__": 15
},
"_enabled": true,
"alignMode": 1,
"alignMode": 2,
"_target": null,
"_alignFlags": 20,
"_left": 0,
"_right": 0,
"_top": 100,
"_bottom": 150,
"_bottom": 100,
"_verticalCenter": 0,
"_horizontalCenter": 0,
"_horizontalCenter": 100,
"_isAbsLeft": true,
"_isAbsRight": true,
"_isAbsTop": true,
......
......@@ -199,66 +199,245 @@ cc.Class({
getDefaultData() {
return {
// jumpTime: '4',
// isDebug: true,
quesArr: [
{
itemType: "jump",
bgItem: {
url: "http://staging-teach.cdn.ireadabc.com/50fe1264135d63c082fa6fb9b7c9dbc2.png",
rect: { x: 10.61, y: 0, width: 1201.78, height: 676 },
"quesArr": [
{
"itemType": "jump",
"ques_end": "12",
"ques_start": "0",
"bgItem": {
"url": "http://staging-teach.cdn.ireadabc.com/50b1b7f2d7b1718b6daf00884d356119.png",
"rect": {
"x": 258.22,
"y": 0,
"width": 706.57,
"height": 451
}
},
"hotZoneItemArr": [
{
"id": "1668133708637",
"index": 0,
"itemType": "rect",
"fontScale": 0.95546875,
"imgScale": 1,
"imgSizeW": 0,
"imgSizeH": 0,
"mapScale": 0.95546875,
"dragDot": {
"x": 611.5,
"y": 225.5
},
"gIdx": "0",
"posX": 555.5,
"posY": 277.5,
"rect": {
"x": 262.78,
"y": 243,
"width": 69,
"height": 69
}
}
]
},
hotZoneItemArr: [
{
id: "1666086880680",
index: 0,
itemType: "rect",
fontScale: 0.95546875,
imgScale: 1,
imgSizeW: 0,
imgSizeH: 0,
mapScale: 0.95546875,
dragDot: { x: 611.5, y: 337.9992270947921 },
gIdx: "0",
posX: 344.2576312800029,
posY: 542.6844069496866,
rect: { x: 204.9, y: 261.35, width: 266.77, height: 408.16 },
},
],
ques_start: "0",
ques_end: "3",
},
{
itemType: "jump",
ques_start: "3",
ques_end: "7",
bgItem: {
url: "http://staging-teach.cdn.ireadabc.com/50fe1264135d63c082fa6fb9b7c9dbc2.png",
rect: { x: 10.61, y: 0, width: 1201.78, height: 676 },
{
"itemType": "jump",
"ques_end": "29",
"ques_start": "12",
"bgItem": {
"url": "http://staging-teach.cdn.ireadabc.com/98b98a011abefb0f6d60fcf5fc5f6ac1.png",
"rect": {
"x": 258.22,
"y": 0,
"width": 706.57,
"height": 451
}
},
"hotZoneItemArr": [
{
"id": "1668134323523",
"index": 0,
"itemType": "rect",
"fontScale": 0.95546875,
"imgScale": 1,
"imgSizeW": 0,
"imgSizeH": 0,
"mapScale": 0.95546875,
"dragDot": {
"x": 611.5,
"y": 225.5
},
"gIdx": "0",
"posX": 484.5,
"posY": 189.5,
"rect": {
"x": 177.78,
"y": 141,
"width": 97,
"height": 97
}
}
]
},
hotZoneItemArr: [
{
id: "1666160708755",
index: 0,
itemType: "rect",
fontScale: 0.95546875,
imgScale: 1,
imgSizeW: 0,
imgSizeH: 0,
mapScale: 0.95546875,
dragDot: { x: 611.5, y: 338.0006033081422 },
gIdx: "0",
posX: 821.5,
posY: 559,
rect: { x: 653.46, y: 304.59, width: 307.57, height: 353.75 },
},
],
},
{
"itemType": "jump",
"ques_start": "29",
"ques_end": "55",
"bgItem": {
"url": "http://staging-teach.cdn.ireadabc.com/feed50b453939eb1591b73e5d282bb98.png",
"rect": {
"x": 258.22,
"y": 0,
"width": 706.57,
"height": 451
}
},
"hotZoneItemArr": [
{
"id": "1668134374725",
"index": 0,
"itemType": "rect",
"fontScale": 0.95546875,
"imgScale": 1,
"imgSizeW": 0,
"imgSizeH": 0,
"mapScale": 0.95546875,
"dragDot": {
"x": 611.5,
"y": 225.5
},
"gIdx": "0",
"posX": 557.5,
"posY": 269.5,
"rect": {
"x": 253.78,
"y": 224,
"width": 91,
"height": 91
}
}
]
},
{
"itemType": "jump",
"ques_start": "55",
"ques_end": "65",
"bgItem": {
"url": "http://staging-teach.cdn.ireadabc.com/30ef6004735117f09f7f689e5118b45a.png",
"rect": {
"x": 258.22,
"y": 0,
"width": 706.57,
"height": 451
}
},
"hotZoneItemArr": [
{
"id": "1668134384739",
"index": 0,
"itemType": "rect",
"fontScale": 0.95546875,
"imgScale": 1,
"imgSizeW": 0,
"imgSizeH": 0,
"mapScale": 0.95546875,
"dragDot": {
"x": 611.5,
"y": 225.5
},
"gIdx": "0",
"posX": 837.5,
"posY": 183.5,
"rect": {
"x": 534.78,
"y": 139,
"width": 89,
"height": 89
}
}
]
},
{
"itemType": "jump",
"ques_end": "82",
"ques_start": "65",
"bgItem": {
"url": "http://staging-teach.cdn.ireadabc.com/c45dc1e2f2c7cc43e50b0f682c575a75.png",
"rect": {
"x": 258.22,
"y": 0,
"width": 706.57,
"height": 451
}
},
"hotZoneItemArr": [
{
"id": "1668134393657",
"index": 0,
"itemType": "rect",
"fontScale": 0.95546875,
"imgScale": 1,
"imgSizeW": 0,
"imgSizeH": 0,
"mapScale": 0.95546875,
"dragDot": {
"x": 611.5,
"y": 225.5
},
"gIdx": "0",
"posX": 705.5,
"posY": 211.5,
"rect": {
"x": 399.78,
"y": 164,
"width": 95,
"height": 95
}
}
]
},
{
"itemType": "jump",
"ques_end": "110",
"ques_start": "82",
"bgItem": {
"url": "http://staging-teach.cdn.ireadabc.com/99bdeb87ff53a23e04a4d193af0e114d.png",
"rect": {
"x": 258.22,
"y": 0,
"width": 706.57,
"height": 451
}
},
"hotZoneItemArr": [
{
"id": "1668134406640",
"index": 0,
"itemType": "rect",
"fontScale": 0.95546875,
"imgScale": 1,
"imgSizeW": 0,
"imgSizeH": 0,
"mapScale": 0.95546875,
"dragDot": {
"x": 611.5,
"y": 225.5
},
"gIdx": "0",
"posX": 420.5,
"posY": 260.5,
"rect": {
"x": 122.78,
"y": 221,
"width": 79,
"height": 79
}
}
]
}
],
video_url:
"http://staging-teach.cdn.ireadabc.com/6c03006397a8309aa510210322ae1572.mp4",
videoType: "1920_1080",
};
"videoType": "940_600",
"video_url": "http://staging-teach.cdn.ireadabc.com/527fe2dc673ff50393f55b5e8dbc0e25.mp4"
};
},
preload() {
......@@ -348,7 +527,7 @@ cc.Class({
this.initData();
this.initMask();
this.showProgressBar();
this.getState(() => {
this.initView();
......@@ -512,7 +691,7 @@ cc.Class({
console.log(" in addServerListener");
const c = window.courseware;
// this.loadEnd(()=>{});
this.loadEnd(()=>{});
if (!c) {
return;
}
......@@ -1341,8 +1520,8 @@ cc.Class({
const touchStart = (e) => {
this.canvasTouchStart(e);
// console.log("touch start");
console.log("touch start");
this.showProgressBar(true);
if (canvas.hasEventListener(cc.Node.EventType.MOUSE_DOWN)) {
canvas.off(cc.Node.EventType.MOUSE_DOWN, mouseDown);
}
......@@ -1354,6 +1533,7 @@ cc.Class({
}
this.canvasTouchStart(e);
console.log("mouse down");
this.showProgressBar(true);
if (canvas.hasEventListener(cc.Node.EventType.TOUCH_MOVE)) {
canvas.off(cc.Node.EventType.TOUCH_MOVE, touchMove);
......@@ -1453,6 +1633,27 @@ cc.Class({
})
},
// 显示进度条 2秒没有操作后消失
// 进度条是否正在显示
isShowProgressBar: null,
// 隐藏进度条定时器
timeoutHideBarId : null,
showProgressBar(withAnimation = false) {
if(this.timeoutHideBarId) {
clearTimeout(this.timeoutHideBarId);
}
if(!this.isShowProgressBar) {
// 如果当前没有显示进度条
this.videoControlBar.emit("show_bar", withAnimation);
}
this.isShowProgressBar = true;
this.timeoutHideBarId = setTimeout(()=>{
this.videoControlBar.emit("hide_bar", true);
this.isShowProgressBar = false;
}, 2000)
},
canvasTouchStart(e) {
const pos = e.getLocation();
// this.knife.x = pos.x - e.currentTarget.width / 2;
......@@ -2753,6 +2954,11 @@ cc.Class({
cc.Tween.stopAll();
cc.game.canvas.style.backgroundColor = "#000000";
// 清除进度条隐藏定时器
if(this.timeoutHideBarId) {
clearTimeout(this.timeoutHideBarId);
}
// this.pauseVideo();
},
});
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment