From 03beba5436c095bd03fbdb5d7aef58230dedf5a8 Mon Sep 17 00:00:00 2001 From: wangqing Date: Wed, 23 Mar 2022 00:56:02 +0800 Subject: [PATCH] add test cases Signed-off-by: wangqing --- .../js/default/pages/video/router/index.css | 358 ----------- .../js/default/pages/video/router/index.hml | 191 +----- .../js/default/pages/video/router/index.js | 589 +----------------- 3 files changed, 40 insertions(+), 1098 deletions(-) diff --git a/ace/ace_standard_video/src/main/js/default/pages/video/router/index.css b/ace/ace_standard_video/src/main/js/default/pages/video/router/index.css index 645083090..422c1e2da 100644 --- a/ace/ace_standard_video/src/main/js/default/pages/video/router/index.css +++ b/ace/ace_standard_video/src/main/js/default/pages/video/router/index.css @@ -13,362 +13,4 @@ * limitations under the License. */ -.container { - flex-direction:row; - width:100%; - height:100%; - padding: 1px; -} -.sub-container{ - flex-direction: column; - height: 100%; - flex-weight: 1; -} - -.title{ - width: 100%; - height: 50px; - font-size: 18px; - margin: 2px; - padding: 2px; - font-weight: bold; - text-align: center; -} -.title-style-2{ - height: 30px; -} - -.sub-title{ - width: 100%; - height: 50px; - font-size: 14px; - text-align: left; - margin: 2px; - padding: 2px; -} -.sub-title-2{ - height: 20px; -} -.sub-title-3{ - font-size: 12px; -} - -.style1{ - width: 100%; - height: 100%; - min-width: 25px; - min-height: 10px; - max-width: 300px; - max-height: 100px; - padding-left: 5px; - padding-top: 5px; - padding-right: 5px; - padding-bottom: 5px; - margin-left: 5px; - margin-top: 5px; - margin-right: 5px; - margin-bottom: 5px; - border-left-style: solid; - border-right-style: dashed; - border-top-style: dashed; - border-bottom-style: dotted; - border-left-width: 1px; - border-right-width: 2px; - border-top-width: 2px; - border-bottom-width: 1px; - border-left-color: #ff0000; - border-right-color: #00ff00; - border-top-color: #0000ff; - border-bottom-color: #fff000; - border-bottom-left-radius: 10px; - border-bottom-right-radius: 15px; - border-top-left-radius: 8px; - border-top-right-radius: 12px; - background: linear-gradient(pink,#fff000); - box-shadow: 2px 4px 6px 8px #888888; - opacity: 0.5; - display: flex; - visibility: visible; - align-self: center; - image-fill: #000fff; - clip-path: margin-box; -} - -.style2{ - width: 300px; - height: 100px; - padding-start: 10px; - padding-end: 15px; - margin-start: 5px; - margin-end: 10px; - border-style: dotted; - border-width: 2px; - border-color:#000000; - border-radius:5px; - background-color:#ffaa00; - mask-image: url('common/images/icon.png'); - mask-size: cover; - mask-position: center; -} - -.style3{ - width: 100%; - height: 100px; - padding: 10px; - margin: 5px; - border-left: 1px solid #000000; - border-right: 2px dashed #00ff00; - border-top: 1.5px dotted #0000ff; - border-bottom: 2.5px dotted #fff000; - background-image:url('common/images/image.png'); - background-size:cover; - background-repeat: repeat-x; - background-position: center; - flex:1; - flex-grow: 2; - flex-shrink: 1; -} - -.style4{ - width: 100%; - height: 15%; - padding: 10px; - margin: 5px; - border: 2px solid #000000; -} - -.contain1{ - width: 100%; -} - -.style5{ - width: 90%; - height: 60px; - background-color: yellow; - border-image-source: url('/common/images/image.png'); - border-image-slice: 1px 2px 3px 4px; - border-image-width: 2px 3px 4px 5px; - border-image-outset: 3px 4px 5px 6px; - border-image-repeat: repeat; -} - -.style6{ - width: 100px; - height: 70px; - position: absolute; - left: 10px; - top: 70px; - bottom: 5px; - right: 10px; - background-color: pink; - border-image: url('common/images/icon.png') 1px 2px 3px 4px 2px 3px 4px 5px 3px 4px 5px 6px round; -} - -.style7 { - width: 100px; - height: 100px; - border: 1px solid #000000; - object-fit: fill; -} - -.color-primary { - background-color: mediumpurple; -} - -.color-warning { - background-color: pink; -} - -.color-success { - background-color: cornflowerblue; -} - -.grid-child { - width: 100%; - border-radius: 2px; -} - -.grid-left-top { - width: 20px; - height: 20px; - border-radius: 10px; - border: 1px solid plum; - background: linear-gradient(pink, purple); - box-shadow: 0px 0px 1px 1px pink; - grid-row-start: 0; - grid-column-start: 0; - grid-row-end: 0; - grid-column-end: 0; -} - -.grid-left-bottom { - width: 20px; - height: 20px; - border-radius: 5px; - border: 1px solid plum; - background: linear-gradient(pink, #00aaee); - box-shadow: 0px 0px 1px 1px pink; - grid-row-start: 1; - grid-column-start: 0; - grid-row-end: 1; - grid-column-end: 0; -} - -.grid-right-top { - width: 20px; - height: 20px; - border-radius: 3px; - border: 1px dotted plum; - background: linear-gradient(mediumpurple, #00aaee); - box-shadow: 0px 0px 1px 1px pink; - grid-row-start: 0; - grid-column-start: 1; - grid-row-end: 0; - grid-column-end: 1; -} - -.grid-right-bottom { - width: 20px; - height: 20px; - border-radius: 5px; - border: 1px dotted plum; - background: linear-gradient(pink, mediumpurple); - box-shadow: 0px 0px 2px 2px pink; - grid-row-start: 1; - grid-column-start: 1; - grid-row-end: 1; - grid-column-end: 1; -} - -.event-container{ - flex-direction: column; - flex-weight: 1; -} - -.event1{ - width: 90%; - flex-weight: 1; - background-color: yellow; -} - -.event2{ - width: 90%; - flex-weight: 1; - background-color: red; -} - -.event3{ - width: 90%; - flex-weight: 1; - background-color: #ad4e2a; -} - -.event4{ - flex-direction: row; - width: 90%; - flex-weight: 1; -} - -.event5{ - flex-direction: column; - width: 100%; - height: 90px; -} - -.prop-container{ - flex-direction: column; -} - -#prop1 { - height: 20px; - background-color: mediumslateblue; - width: 100%; - margin: 5px; -} - -.prop2 { - height: 20px; - background-color: pink; - width: 100%; - margin: 5px; -} - -.prop3 { - height: 20px; - background-color: darkseagreen; - width: 100%; - margin: 5px; -} - -.prop4 { - height: 50px; - background-color: darkseagreen; - width: 100%; - margin: 5px; -} - -.prop5 { - height: 50px; - background-color: darkseagreen; - width: 100%; - margin: 5px; -} - -.atom-container{ - flex-direction: column; -} - -.function-container{ - flex-direction: column; -} - -.function1{ - background-color: #ff0000; - width: 90%; - height: 45px; -} - -.function2{ - background-color: #00ff00; - width: 90%; - height: 45px; -} - -.function3{ - background-color: #0000ff; - width: 90%; - height: 45px; -} - -.function4{ - flex-direction: row; - width: 90%; - height: 45px; -} - -.function5{ - flex-direction: row; - width: 90%; - height: 45px; -} -.function6{ - flex-direction: row; - width: 90%; - height: 45px; -} -.function7{ - flex-direction: row; - width: 90%; - height: 45px; -} -.function8{ - flex-direction: row; - width: 90%; - height: 45px; -} -.function9{ - flex-direction: row; - width: 90%; - height: 45px; -} \ No newline at end of file diff --git a/ace/ace_standard_video/src/main/js/default/pages/video/router/index.hml b/ace/ace_standard_video/src/main/js/default/pages/video/router/index.hml index 11144f9ba..3ee30fe25 100644 --- a/ace/ace_standard_video/src/main/js/default/pages/video/router/index.hml +++ b/ace/ace_standard_video/src/main/js/default/pages/video/router/index.hml @@ -13,187 +13,10 @@ * limitations under the License. */--> -
-
- - 通用样式 - - - video通用样式1 - - - - video通用样式2 - - - - video通用样式3 - - - - video通用样式4 - - - - div通用样式5 - -
- - -
- - video特有样式 - - -
-
-
-
-
- - 通用属性 - - - video通用属性1 - - - - video通用属性2 - - - - video通用属性3 - - - - video特有属性 - - - -
-
-
-
- - 通用事件 - - - video通用事件1 - - - - video通用事件2 - - - - video通用事件3 - - - - video特有事件1 - - -
-
- -
-
- -
-
- - 特有方法 - - - video特有方法1 - - - - video特有方法2 - - - - video特有方法3 - - - - video特有方法4 - - - - video特有方法5 - - - - video特有方法6 - - -
- -
-
-
- - 通用方法 - - - video通用方法1 - - - - div通用方法2 - - - - div通用方法3 - - -
-
-
+
+ +
\ No newline at end of file diff --git a/ace/ace_standard_video/src/main/js/default/pages/video/router/index.js b/ace/ace_standard_video/src/main/js/default/pages/video/router/index.js index bbc8e9a48..c2be7ca5b 100644 --- a/ace/ace_standard_video/src/main/js/default/pages/video/router/index.js +++ b/ace/ace_standard_video/src/main/js/default/pages/video/router/index.js @@ -13,562 +13,39 @@ * limitations under the License. */ -import prompt from '@system.prompt'; - -var options = { - duration: 1500, - easing: 'friction', - delay: 100, - fill: 'forwards', - iterations: 2, - direction: 'normal', -}; -var frames = [ - { - transform: { - translate: '-120px', - rotate:'10deg', - scale:0.2, - skew:'40deg' - }, - opacity: 0.1, - offset: 0.0, - width: '40%', - height:'20px', - backgroundColor:'#ff0000', - backgroundPosition:'10px 20px', - transformOrigin:'left top' - }, - { - transform: { - translateX: '0px', - translateY: '5px', - rotateX:'10deg', - rotateY:'10deg', - scaleX:0.5, - scaleY:0.7, - skewX:'22deg', - skewY:'30deg' - }, - opacity: 0.6, - offset: 2.0, - width: '60%', - height:'30px', - backgroundColor:'#ff00ff', - backgroundPosition:'15px 25px', - transformOrigin:'center top' - }, - { - transform: { - translateX: '100px', - translateY: '0px', - translateZ: '20px', - rotateX:'0deg', - rotateY:'0deg', - rotateZ:'30deg', - scaleX:1, - scaleY:1, - scaleZ:2, - skewX:'0', - skewY:'0', - skewZ:'30deg' - }, - opacity: 1, - offset: 0.0, - width: '100%', - height:'30px', - backgroundColor:'#ffff00', - backgroundPosition:'0px', - transformOrigin:'center center' - }, -]; - export default { - - onShow(){ - // 通用属性 - var prop1 = this.$element('prop1'); - var name1 = prop1.dataSet.name - var prop2 = this.$refs.prop2; - var name2 = prop2.dataSet.name - prompt.showToast({ - message: 'prop1--' + name1 + '\nprop2--' + name2 - }); - }, - - touchStart(event){ - var globalX = event.touches[0].globalX - var globalY = event.touches[0].globalY - var localX = event.touches[0].localX - var localY = event.touches[0].localY - var size = event.touches[0].size - var force = event.touches[0].force - var changeGlobalX = event.changedTouches[0].globalX - var changeGlobalY = event.changedTouches[0].globalY - var changeLocalX = event.changedTouches[0].localX - var changeLocalY = event.changedTouches[0].localY - var changeSize = event.changedTouches[0].size - var changeForce = event.changedTouches[0].force - var message = 'globalX--' + globalX + ',globalY--' + globalY + - ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force + - ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY + - ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY + - ',changeSize--' + changeSize + ',changeForce--' + changeForce; - prompt.showToast({ - message: 'touchstart:\n' + message - }); - }, - - touchMove(event){ - var globalX = event.touches[0].globalX - var globalY = event.touches[0].globalY - var localX = event.touches[0].localX - var localY = event.touches[0].localY - var size = event.touches[0].size - var force = event.touches[0].force - var changeGlobalX = event.changedTouches[0].globalX - var changeGlobalY = event.changedTouches[0].globalY - var changeLocalX = event.changedTouches[0].localX - var changeLocalY = event.changedTouches[0].localY - var changeSize = event.changedTouches[0].size - var changeForce = event.changedTouches[0].force - var message = 'globalX--' + globalX + ',globalY--' + globalY + - ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force + - ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY + - ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY + - ',changeSize--' + changeSize + ',changeForce--' + changeForce; - prompt.showToast({ - message: 'touchMove:\n' +message - }); - }, - - touchEnd(event){ - var globalX = event.touches[0].globalX - var globalY = event.touches[0].globalY - var localX = event.touches[0].localX - var localY = event.touches[0].localY - var size = event.touches[0].size - var force = event.touches[0].force - var changeGlobalX = event.changedTouches[0].globalX - var changeGlobalY = event.changedTouches[0].globalY - var changeLocalX = event.changedTouches[0].localX - var changeLocalY = event.changedTouches[0].localY - var changeSize = event.changedTouches[0].size - var changeForce = event.changedTouches[0].force - var message = 'globalX--' + globalX + ',globalY--' + globalY + - ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force + - ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY + - ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY + - ',changeSize--' + changeSize + ',changeForce--' + changeForce; - prompt.showToast({ - message: 'touchEnd:\n' +message - }); - }, - - touchCancel(event){ - var globalX = event.touches[0].globalX - var globalY = event.touches[0].globalY - var localX = event.touches[0].localX - var localY = event.touches[0].localY - var size = event.touches[0].size - var force = event.touches[0].force - var changeGlobalX = event.changedTouches[0].globalX - var changeGlobalY = event.changedTouches[0].globalY - var changeLocalX = event.changedTouches[0].localX - var changeLocalY = event.changedTouches[0].localY - var changeSize = event.changedTouches[0].size - var changeForce = event.changedTouches[0].force - var message = 'globalX--' + globalX + ',globalY--' + globalY + - ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force + - ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY + - ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY + - ',changeSize--' + changeSize + ',changeForce--' + changeForce; - prompt.showToast({ - message: 'touchCancel:\n' +message - }); - }, - - click(){ - prompt.showToast({ - message: 'click' - }); - }, - - doubleClick(){ - prompt.showToast({ - message: 'doubleClick' - }); - }, - - longPress(){ - prompt.showToast({ - message: 'longPress' - }); - }, - - focus(){ - prompt.showToast({ - message: 'focus' - }); - }, - - blur(){ - prompt.showToast({ - message: 'blur' - }); - }, - - key(event){ - var code = event.code; - var action = event.action; - var repeatCount = event.repeatCount; - var timestampStart = event.timestampStart; - var message = 'code--' + code + ',action--' + action + - ',repeatCount--' + repeatCount + ',timestampStart--' + timestampStart; - prompt.showToast({ - message: 'key:\n' + message - }); - }, - - swipe(event){ - var direction = event.direction; - var distance = event.distance; - var message = 'direction--' + direction + ',distance--' + distance; - prompt.showToast({ - message: 'swipe:\n' + message - }); - }, - - attached(){ - prompt.showToast({ - message: 'attached' - }); - }, - - detached(){ - prompt.showToast({ - message: 'detached' - }); - }, - - pinchStart(event){ - var scale = event.scale - var pinchCenterX = event.pinchCenterX - var pinchCenterY = event.pinchCenterY - var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX + - ',pinchCenterY--' + pinchCenterY; - prompt.showToast({ - message: 'pinchStart:\n' + message - }); - }, - - pinchUpdate(event){ - var scale = event.scale - var pinchCenterX = event.pinchCenterX - var pinchCenterY = event.pinchCenterY - var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX + - ',pinchCenterY--' + pinchCenterY; - prompt.showToast({ - message: 'pinchUpdate:\n' + message - }); - }, - - pinchEnd(event){ - var scale = event.scale - var pinchCenterX = event.pinchCenterX - var pinchCenterY = event.pinchCenterY - var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX + - ',pinchCenterY--' + pinchCenterY; - prompt.showToast({ - message: 'pinchUpdate:\n' + message - }); - }, - - pinchCancel(event){ - var scale = event.scale - var pinchCenterX = event.pinchCenterX - var pinchCenterY = event.pinchCenterY - var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX + - ',pinchCenterY--' + pinchCenterY; - prompt.showToast({ - message: 'pinchCancel:\n' + message - }); - }, - - dragStart(event){ - var type = event.type - var globalX = event.globalX - var globalY = event.globalY - var timestamp = event.timestamp - var message = 'type--' + type + ',globalX--' + globalX + - ',globalY--' + globalY + ',timestamp--' + timestamp; - prompt.showToast({ - message: 'dragStart:\n' + message - }); - }, - - drag(event){ - var type = event.type - var globalX = event.globalX - var globalY = event.globalY - var timestamp = event.timestamp - var message = 'type--' + type + ',globalX--' + globalX + - ',globalY--' + globalY + ',timestamp--' + timestamp; - prompt.showToast({ - message: 'drag:\n' + message - }); - }, - - dragEnd(event){ - var type = event.type - var globalX = event.globalX - var globalY = event.globalY - var timestamp = event.timestamp - var message = 'type--' + type + ',globalX--' + globalX + - ',globalY--' + globalY + ',timestamp--' + timestamp; - prompt.showToast({ - message: 'dragEnd:\n' + message - }); - }, - - dragEnter(event){ - var type = event.type - var globalX = event.globalX - var globalY = event.globalY - var timestamp = event.timestamp - var message = 'type--' + type + ',globalX--' + globalX + - ',globalY--' + globalY + ',timestamp--' + timestamp; - prompt.showToast({ - message: 'dragEnter:\n' + message - }); - }, - - dragOver(event){ - var type = event.type - var globalX = event.globalX - var globalY = event.globalY - var timestamp = event.timestamp - var message = 'type--' + type + ',globalX--' + globalX + - ',globalY--' + globalY + ',timestamp--' + timestamp; - prompt.showToast({ - message: 'dragOver:\n' + message - }); - }, - - dragLeave(event){ - var type = event.type - var globalX = event.globalX - var globalY = event.globalY - var timestamp = event.timestamp - var message = 'type--' + type + ',globalX--' + globalX + - ',globalY--' + globalY + ',timestamp--' + timestamp; - prompt.showToast({ - message: 'dragLeave:\n' + message - }); - }, - - drop(event){ - var type = event.type - var globalX = event.globalX - var globalY = event.globalY - var timestamp = event.timestamp - var message = 'type--' + type + ',globalX--' + globalX + - ',globalY--' + globalY + ',timestamp--' + timestamp; - prompt.showToast({ - message: 'drop:\n' + message - }); - }, - - functionTest1(event){ - var function1 = this.$element('function1'); - function1.focus(true) - var rect = function1.getBoundingClientRect(); - var width = rect.width; - var height = rect.height; - var left = rect.left; - var top = rect.top; - var message = 'width--' + width + ',height--' + height + - ',left--' + left + ',top--' + top; - prompt.showToast({ - message: 'function1 rect:\n' + message - }); - }, - - functionTest2(event){ - var function2 = this.$element('function2'); - let observer = function2.createIntersectionObserver({ - ratios: [0.2, 0], // number - }); - observer.observe((isVisible, ratio)=> { - console.info('this element is ' + isVisible + 'ratio is ' + ratio) - prompt.showToast({ - message: 'function2 observer:\n' + 'isVisible--' + isVisible + ',ratio--' + ratio - }); - }) - - observer.unobserve() - }, - - functionTest3(event){ - var function3 = this.$element('function3'); - - var animation = function3.animate(frames, options); - animation.play() - animation.onfinish = function(){ - prompt.showToast({ - message: 'The animation is finished.' - }); - }; - - animation.oncancel = function(){ - prompt.showToast({ - message: 'The animation is canceled.' - }); - }; - - animation.onrepeat = function(){ - prompt.showToast({ - message: 'The animation is repeated.' - }); - }; - - setTimeout(() => { - animation.reverse() - }, 500) - - setTimeout(() => { - animation.pause() - }, 1000) - - setTimeout(() => { - animation.cancel() - }, 1500) - }, - - functionTest4(){ - var function4 = this.$element('function4'); - function4.start(); - prompt.showToast({ - message: 'function4 video start.' - }); - }, - functionTest5(){ - var function5 = this.$element('function5'); - function5.pause(); - prompt.showToast({ - message: 'function5 video pause.' - }) - }, - functionTest6(){ - var function6 = this.$element('function6'); - function6.setCurrentTime({ - currenttime: 2 - }); - prompt.showToast({ - message: 'function6 video setCurrentTime.' - }) - }, - functionTest7(){ - var function7 = this.$element('function7'); - function7.requestFullscreen({ - screenOrientation : "default" - }); - prompt.showToast({ - message: 'function7 video requestFullscreen.' - }) - - }, - functionTest8(){ - var function8 = this.$element('function8'); - function8.exitFullscreen(); - prompt.showToast({ - message: 'function8 video exitFullscreen.' - }) - }, - functionTest9(){ - var function9 = this.$element('function9'); - function9.stop(); - prompt.showToast({ - message: 'function9 video stop.' - }) - }, - - reachStart(){ - prompt.showToast({ - message: 'reachStart' - }); - }, - - reachEnd(){ - prompt.showToast({ - message: 'reachEnd' - }); - }, - - reachTop(){ - prompt.showToast({ - message: 'reachTop' - }); - }, - - reachBottom(){ - prompt.showToast({ - message: 'reachBottom' - }); - }, - prepared() { - prompt.showToast({ - message: 'prepared' - }); - }, - start() { - prompt.showToast({ - message: 'start' - }); - }, - pause() { - prompt.showToast({ - message: 'pause' - }); - }, - finish() { - prompt.showToast({ - message: 'finish' - }); - }, - error() { - prompt.showToast({ - message: 'error' - }); - }, - seeking() { - prompt.showToast({ - message: 'seeking' - }); - }, - seeked() { - prompt.showToast({ - message: 'seeked' - }); - }, - timeupdate() { - prompt.showToast({ - message: 'timeupdate' - }); - }, - fullscreenchange() { - prompt.showToast({ - message: 'fullscreenchange' - }); - }, - stop() { - prompt.showToast({ - message: 'stop' - }); - }, - onAccessibility() { - prompt.showToast({ - message: 'onAccessibility' - }); + data: { + event:'', + seekingtime:'', + timeupdatetime:'', + seekedtime:'', + isStart: true, + isfullscreenchange: false, + duration: '', + }, + preparedCallback:function(e){ this.event = '视频连接成功'; this.duration = e.duration;}, + startCallback:function(){ this.event = '视频开始播放';}, + pauseCallback:function(){ this.event = '视频暂停播放'; }, + finishCallback:function(){ this.event = '视频播放结束';}, + errorCallback:function(){ this.event = '视频播放错误';}, + seekingCallback:function(e){ this.seekingtime = e.currenttime; }, + timeupdateCallback:function(e){ this.timeupdatetime = e.currenttime;}, + change_start_pause: function() { + if(this.isStart) { + this.$element('videoId').pause(); + this.isStart = false; + } else { + this.$element('videoId').start(); + this.isStart = true; + } + }, + change_fullscreenchange: function() {//全屏 + if(!this.isfullscreenchange) { + this.$element('videoId').requestFullscreen({ screenOrientation : 'default' }); + this.isfullscreenchange = true; + } else { + this.$element('videoId').exitFullscreen(); + this.isfullscreenchange = false; + } } } -- GitLab