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

调整进度条自动隐藏

parent d215459d
...@@ -23,8 +23,14 @@ cc.Class({ ...@@ -23,8 +23,14 @@ cc.Class({
playBtn: null, // 播放按钮 playBtn: null, // 播放按钮
pauseBtn: null, // 暂停按钮 pauseBtn: null, // 暂停按钮
replayBtn: null, // 重播按钮 replayBtn: null, // 重播按钮
properties: {
setTimeoutIDs: [],
setIntervalIDs: [],
},
init() { init() {
console.log("Init video control component.") // console.log("Init video control component.")
this.bgProgress = cc.find('progress', this.node); this.bgProgress = cc.find('progress', this.node);
this.bar = cc.find('progress/bar', this.node); this.bar = cc.find('progress/bar', this.node);
this.dragBtn = cc.find('dragButton', this.node); this.dragBtn = cc.find('dragButton', this.node);
...@@ -80,9 +86,8 @@ cc.Class({ ...@@ -80,9 +86,8 @@ cc.Class({
this.node.emit('on_drag_percent', percent) this.node.emit('on_drag_percent', percent)
}); });
this.dragBtn.off(cc.Node.EventType.TOUCH_ENDED); this.dragBtn.off(cc.Node.EventType.TOUCH_END);
this.dragBtn.on(cc.Node.EventType.TOUCH_ENDED, (e) => { this.dragBtn.on(cc.Node.EventType.TOUCH_END, (e) => {
// console.log("用户抬手-1");
if(this.userDragStart) { if(this.userDragStart) {
this.userDragStart = false; this.userDragStart = false;
this.node.emit('on_drag_button', false); this.node.emit('on_drag_button', false);
...@@ -91,7 +96,6 @@ cc.Class({ ...@@ -91,7 +96,6 @@ cc.Class({
this.dragBtn.off(cc.Node.EventType.MOUSE_UP); this.dragBtn.off(cc.Node.EventType.MOUSE_UP);
this.dragBtn.on(cc.Node.EventType.MOUSE_UP, (e) => { this.dragBtn.on(cc.Node.EventType.MOUSE_UP, (e) => {
// console.log("用户抬手-2");
if(this.userDragStart) { if(this.userDragStart) {
this.userDragStart = false; this.userDragStart = false;
this.node.emit('on_drag_button', false); this.node.emit('on_drag_button', false);
...@@ -100,7 +104,6 @@ cc.Class({ ...@@ -100,7 +104,6 @@ cc.Class({
this.dragBtn.off(cc.Node.EventType.TOUCH_CANCEL); this.dragBtn.off(cc.Node.EventType.TOUCH_CANCEL);
this.dragBtn.on(cc.Node.EventType.TOUCH_CANCEL, (e) => { this.dragBtn.on(cc.Node.EventType.TOUCH_CANCEL, (e) => {
// console.log("用户抬手-3");
if(this.userDragStart) { if(this.userDragStart) {
this.userDragStart = false; this.userDragStart = false;
this.node.emit('on_drag_button', false); this.node.emit('on_drag_button', false);
...@@ -108,7 +111,6 @@ cc.Class({ ...@@ -108,7 +111,6 @@ cc.Class({
}); });
}, },
// 0:暂停 1:播放中 2:重播 // 0:暂停 1:播放中 2:重播
videoStatus: null, videoStatus: null,
refreshVideoBtnState(status) { refreshVideoBtnState(status) {
...@@ -139,7 +141,7 @@ cc.Class({ ...@@ -139,7 +141,7 @@ cc.Class({
addListener() { addListener() {
this.node.on('video_play_end', () => { this.node.on('video_play_end', () => {
console.log("video_play_end"); // console.log("video_play_end");
this.refreshVideoBtnState(); this.refreshVideoBtnState();
}) })
...@@ -153,12 +155,20 @@ cc.Class({ ...@@ -153,12 +155,20 @@ cc.Class({
}) })
this.node.on('update_video_status', (status)=>{ this.node.on('update_video_status', (status)=>{
console.log("update_video_status", status); // console.log("update_video_status", status);
this.refreshVideoBtnState(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)=>{ 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 markPoint = cc.find("markPoint", this.node);
const markPointsContainer = cc.find("markNode", this.node); const markPointsContainer = cc.find("markNode", this.node);
for(let i=0; i<data.length; i++) { for(let i=0; i<data.length; i++) {
...@@ -170,6 +180,49 @@ cc.Class({ ...@@ -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) { setProgress(progress) {
const dragStartX = -520; const dragStartX = -520;
setTimeout(() => { setTimeout(() => {
...@@ -180,4 +233,10 @@ cc.Class({ ...@@ -180,4 +233,10 @@ cc.Class({
} }
}, 1); }, 1);
}, },
onDestroy() {
for(let i=0; i<this.setIntervalIDs.length; i++) {
clearInterval(this.setIntervalIDs[i]);
}
}
}); });
...@@ -749,8 +749,8 @@ ...@@ -749,8 +749,8 @@
"__type__": "TypedArray", "__type__": "TypedArray",
"ctor": "Float64Array", "ctor": "Float64Array",
"array": [ "array": [
0, 100,
-320, -370,
0, 0,
0, 0,
0, 0,
...@@ -1697,15 +1697,15 @@ ...@@ -1697,15 +1697,15 @@
"__id__": 15 "__id__": 15
}, },
"_enabled": true, "_enabled": true,
"alignMode": 1, "alignMode": 2,
"_target": null, "_target": null,
"_alignFlags": 20, "_alignFlags": 20,
"_left": 0, "_left": 0,
"_right": 0, "_right": 0,
"_top": 100, "_top": 100,
"_bottom": 150, "_bottom": 100,
"_verticalCenter": 0, "_verticalCenter": 0,
"_horizontalCenter": 0, "_horizontalCenter": 100,
"_isAbsLeft": true, "_isAbsLeft": true,
"_isAbsRight": true, "_isAbsRight": true,
"_isAbsTop": true, "_isAbsTop": true,
......
...@@ -199,66 +199,245 @@ cc.Class({ ...@@ -199,66 +199,245 @@ cc.Class({
getDefaultData() { getDefaultData() {
return { return {
// jumpTime: '4', "quesArr": [
// isDebug: true, {
quesArr: [ "itemType": "jump",
{ "ques_end": "12",
itemType: "jump", "ques_start": "0",
bgItem: { "bgItem": {
url: "http://staging-teach.cdn.ireadabc.com/50fe1264135d63c082fa6fb9b7c9dbc2.png", "url": "http://staging-teach.cdn.ireadabc.com/50b1b7f2d7b1718b6daf00884d356119.png",
rect: { x: 10.61, y: 0, width: 1201.78, height: 676 }, "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: [ {
{ "itemType": "jump",
id: "1666086880680", "ques_end": "29",
index: 0, "ques_start": "12",
itemType: "rect", "bgItem": {
fontScale: 0.95546875, "url": "http://staging-teach.cdn.ireadabc.com/98b98a011abefb0f6d60fcf5fc5f6ac1.png",
imgScale: 1, "rect": {
imgSizeW: 0, "x": 258.22,
imgSizeH: 0, "y": 0,
mapScale: 0.95546875, "width": 706.57,
dragDot: { x: 611.5, y: 337.9992270947921 }, "height": 451
gIdx: "0", }
posX: 344.2576312800029, },
posY: 542.6844069496866, "hotZoneItemArr": [
rect: { x: 204.9, y: 261.35, width: 266.77, height: 408.16 }, {
}, "id": "1668134323523",
], "index": 0,
ques_start: "0", "itemType": "rect",
ques_end: "3", "fontScale": 0.95546875,
}, "imgScale": 1,
{ "imgSizeW": 0,
itemType: "jump", "imgSizeH": 0,
ques_start: "3", "mapScale": 0.95546875,
ques_end: "7", "dragDot": {
bgItem: { "x": 611.5,
url: "http://staging-teach.cdn.ireadabc.com/50fe1264135d63c082fa6fb9b7c9dbc2.png", "y": 225.5
rect: { x: 10.61, y: 0, width: 1201.78, height: 676 }, },
"gIdx": "0",
"posX": 484.5,
"posY": 189.5,
"rect": {
"x": 177.78,
"y": 141,
"width": 97,
"height": 97
}
}
]
}, },
hotZoneItemArr: [ {
{ "itemType": "jump",
id: "1666160708755", "ques_start": "29",
index: 0, "ques_end": "55",
itemType: "rect", "bgItem": {
fontScale: 0.95546875, "url": "http://staging-teach.cdn.ireadabc.com/feed50b453939eb1591b73e5d282bb98.png",
imgScale: 1, "rect": {
imgSizeW: 0, "x": 258.22,
imgSizeH: 0, "y": 0,
mapScale: 0.95546875, "width": 706.57,
dragDot: { x: 611.5, y: 338.0006033081422 }, "height": 451
gIdx: "0", }
posX: 821.5, },
posY: 559, "hotZoneItemArr": [
rect: { x: 653.46, y: 304.59, width: 307.57, height: 353.75 }, {
}, "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: "videoType": "940_600",
"http://staging-teach.cdn.ireadabc.com/6c03006397a8309aa510210322ae1572.mp4", "video_url": "http://staging-teach.cdn.ireadabc.com/527fe2dc673ff50393f55b5e8dbc0e25.mp4"
videoType: "1920_1080", };
};
}, },
preload() { preload() {
...@@ -348,7 +527,7 @@ cc.Class({ ...@@ -348,7 +527,7 @@ cc.Class({
this.initData(); this.initData();
this.initMask(); this.initMask();
this.showProgressBar();
this.getState(() => { this.getState(() => {
this.initView(); this.initView();
...@@ -512,7 +691,7 @@ cc.Class({ ...@@ -512,7 +691,7 @@ cc.Class({
console.log(" in addServerListener"); console.log(" in addServerListener");
const c = window.courseware; const c = window.courseware;
// this.loadEnd(()=>{}); this.loadEnd(()=>{});
if (!c) { if (!c) {
return; return;
} }
...@@ -1341,8 +1520,8 @@ cc.Class({ ...@@ -1341,8 +1520,8 @@ cc.Class({
const touchStart = (e) => { const touchStart = (e) => {
this.canvasTouchStart(e); this.canvasTouchStart(e);
// console.log("touch start"); console.log("touch start");
this.showProgressBar(true);
if (canvas.hasEventListener(cc.Node.EventType.MOUSE_DOWN)) { if (canvas.hasEventListener(cc.Node.EventType.MOUSE_DOWN)) {
canvas.off(cc.Node.EventType.MOUSE_DOWN, mouseDown); canvas.off(cc.Node.EventType.MOUSE_DOWN, mouseDown);
} }
...@@ -1354,6 +1533,7 @@ cc.Class({ ...@@ -1354,6 +1533,7 @@ cc.Class({
} }
this.canvasTouchStart(e); this.canvasTouchStart(e);
console.log("mouse down"); console.log("mouse down");
this.showProgressBar(true);
if (canvas.hasEventListener(cc.Node.EventType.TOUCH_MOVE)) { if (canvas.hasEventListener(cc.Node.EventType.TOUCH_MOVE)) {
canvas.off(cc.Node.EventType.TOUCH_MOVE, touchMove); canvas.off(cc.Node.EventType.TOUCH_MOVE, touchMove);
...@@ -1453,6 +1633,27 @@ cc.Class({ ...@@ -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) { canvasTouchStart(e) {
const pos = e.getLocation(); const pos = e.getLocation();
// this.knife.x = pos.x - e.currentTarget.width / 2; // this.knife.x = pos.x - e.currentTarget.width / 2;
...@@ -2753,6 +2954,11 @@ cc.Class({ ...@@ -2753,6 +2954,11 @@ cc.Class({
cc.Tween.stopAll(); cc.Tween.stopAll();
cc.game.canvas.style.backgroundColor = "#000000"; cc.game.canvas.style.backgroundColor = "#000000";
// 清除进度条隐藏定时器
if(this.timeoutHideBarId) {
clearTimeout(this.timeoutHideBarId);
}
// this.pauseVideo(); // 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