diff --git a/ace/ace_standard/src/main/js/default/pages/video/index.css b/ace/ace_standard/src/main/js/default/pages/video/index.css deleted file mode 100644 index 19cd84b30f2d2547b5cdc95259fd1884e3bd30c3..0000000000000000000000000000000000000000 --- a/ace/ace_standard/src/main/js/default/pages/video/index.css +++ /dev/null @@ -1,376 +0,0 @@ -/** - * Copyright (c) 2022 Shenzhen kaiHong Digital Industry Development Co., Ltd. - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * 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; - overflow:scroll; -} - -.event5{ - flex-direction: column; - width: 100%; - height: 90px; - overflow:scroll; -} - -.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/src/main/js/default/pages/video/index.hml b/ace/ace_standard/src/main/js/default/pages/video/index.hml deleted file mode 100644 index 7a3b0aa7df79d565ca2ed791c12128e0478f63b0..0000000000000000000000000000000000000000 --- a/ace/ace_standard/src/main/js/default/pages/video/index.hml +++ /dev/null @@ -1,183 +0,0 @@ -
-
- - 通用样式 - - - 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 - - -
-
-
diff --git a/ace/ace_standard/src/main/js/default/pages/video/index.js b/ace/ace_standard/src/main/js/default/pages/video/index.js deleted file mode 100644 index e8a9bb9ebed3e961064ffe44f3410e5cb231b0af..0000000000000000000000000000000000000000 --- a/ace/ace_standard/src/main/js/default/pages/video/index.js +++ /dev/null @@ -1,610 +0,0 @@ -// @ts-nocheck -/** - * Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd. - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * 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 - }); - - var styleValues = this.getStyleValues(); - var propsValues = this.getPropValues(); - - globalThis.value = { - styleValues:styleValues, - propsValues:propsValues - } - }, - - getStyleValues(){ - var styleValue1 = this.$element("style1").getInspector() - var styleValue2 = this.$element("style2").getInspector() - var styleValue3 = this.$element("style3").getInspector() - var styleValue4 = this.$element("style4").getInspector() - var styleValue5 = this.$element("style5").getInspector() - var styleValue6 = this.$element("style6").getInspector() - var styleValue7 = this.$element("style7").getInspector() - - return { - style1:styleValue1, - style2:styleValue2, - style3:styleValue3, - style4:styleValue4, - style5:styleValue5, - style6:styleValue6, - style7:styleValue7 - } - }, - - getPropValues(){ - var propValue1 = this.$element("prop1").getInspector() - var propValue2 = this.$element("prop2").getInspector() - var propValue3 = this.$element("prop3").getInspector() - - return { - prop1:propValue1, - prop2:propValue2, - prop3:propValue3 - } - }, - - 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' - }); - } -} diff --git a/ace/ace_standard/src/main/js/default/pages/video/prop/index.css b/ace/ace_standard/src/main/js/default/pages/video/prop/index.css new file mode 100644 index 0000000000000000000000000000000000000000..e4d31190459eed185729978089597513de3d6032 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/video/prop/index.css @@ -0,0 +1,573 @@ +/** + * Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +.container { + flex-direction:row; + width:100%; + height:100%; +} + +.title{ + width: 100%; + font-size: 18px; + margin: 2px; + padding: 2px; + font-weight: bold; + text-align: center; +} + +.sub-title{ + width: 100%; + font-size: 14px; + text-align: left; + margin: 2px; + padding: 2px; +} + +.prop-container{ + flex-direction: column; + flex-weight: 1; +} + +#idProp { + flex-weight: 1; + background-color:#f00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +.classProp { + flex-weight: 1; + background-color:#0f0000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#classPropNone { + flex-weight: 1; + background-color:#0000e0; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#refProp { + flex-weight: 1; + background-color:#00f000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#refPropNone { + flex-weight: 1; + background-color:#00000e; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#disabledPropTrue { + flex-weight: 1; + background-color:#000f00; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#disabledPropFalse { + flex-weight: 1; + background-color:#0000f0; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#disabledPropNone { + flex-weight: 1; + background-color:#d00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#focusablePropTrue { + flex-weight: 1; + background-color:#00000f; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#focusablePropFalse { + flex-weight: 1; + background-color:#ff0000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#focusablePropNone { + flex-weight: 1; + background-color:#0d0000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#dataProp { + flex-weight: 1; + background-color:#0ff000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#dataPropNone { + flex-weight: 1; + background-color:#00d000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#clickEffectPropSmall { + height: 15px; + background-color:#00ff00; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#clickEffectPropMedium { + height: 15px; + background-color:#000ff0; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#clickEffectPropLarge { + height: 15px; + background-color:#fff000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#clickEffectPropNone{ + height: 15px; + background-color:#000d00; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#dirPropRtl { + flex-weight: 1; + background-color:#0fff00; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#dirPropAuto { + flex-weight: 1; + background-color:#00fff0; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#dirPropLtr { + flex-weight: 1; + background-color:#000fff; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#dirPropNone { + flex-weight: 1; + background-color:#0000d0; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#forPropNull { + flex-weight: 1; + background-color:#ffff00; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#forPropOne { + flex-weight: 1; + background-color:#00e000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#forPropThree { + flex-weight: 1; + background-color:#000e00; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#ifPropTrue { + flex-weight: 1; + background-color:#0ffff0; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#ifPropFalse { + flex-weight: 1; + background-color:#00ffff; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#ifPropNone { + flex-weight: 1; + background-color:#00000d; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#showPropTrue { + flex-weight: 1; + background-color:#e00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#showPropFalse { + flex-weight: 1; + background-color:#0e0000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#showPropNone { + flex-weight: 1; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +.specific-container{ + flex-direction: column; + flex-weight: 1; +} + +#mutedPropFalse { + flex-weight: 1; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} +#mutedPropTrue { + flex-weight: 1; + background-color:#0e0000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} +#mutedPropNone { + flex-weight: 1; + background-color:#00e000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#srcProp { + flex-weight: 1; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} +#srcPropNone { + flex-weight: 1; + background-color:#0e0000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#autoplayPropFalse { + flex-weight: 1; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} +#autoplayPropTrue { + flex-weight: 1; + background-color:#0e0000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} +#autoplayPropNone { + flex-weight: 1; + background-color:#00e000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#posterProp { + flex-weight: 1; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} +#posterPropNone { + flex-weight: 1; + background-color:#0e0000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#controlsPropFalse { + flex-weight: 1; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} +#controlsPropTrue { + flex-weight: 1; + background-color:#0e0000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} +#controlsPropNone { + flex-weight: 1; + background-color:#00e000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#loopPropFalse { + flex-weight: 1; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} +#loopPropTrue { + flex-weight: 1; + background-color:#0e0000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} +#loopPropNone { + flex-weight: 1; + background-color:#00e000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#starttimeProp { + flex-weight: 1; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#directionPropAuto { + flex-weight: 1; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} +#directionPropVertical { + flex-weight: 1; + background-color:#0e0000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} +#directionPropHorizontal { + flex-weight: 1; + background-color:#00e000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} +#directionPropAdapt { + flex-weight: 1; + background-color:#000ee0; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#directionPropNone{ + flex-weight: 1; + background-color:#00000e; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#speedProp { + flex-weight: 1; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} +#speedPropNone { + flex-weight: 1; + background-color:#0e0000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} \ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/pages/video/prop/index.hml b/ace/ace_standard/src/main/js/default/pages/video/prop/index.hml new file mode 100644 index 0000000000000000000000000000000000000000..96d14fc33612eb2a7160c390d7d2e0dbb18956a0 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/video/prop/index.hml @@ -0,0 +1,241 @@ + + +
+
+ + video通用属性 + + + + 通用属性 -- id + + + + + 通用属性 -- class + + + + + + + 通用属性 -- style + + + + + 通用属性 -- ref + + + + + + 通用属性 -- disabled + + + + + + + 通用属性 -- focusable + + + + + + + 通用属性 -- data-* + + + + + + 渲染属性 -- for + + + + + + + 渲染属性 -- if + + + + + 渲染属性 -- show + + + + +
+ +
+
+
+ + video特有属性 + + + 静音播放属性 -- muted + + + + + + + 视频路径属性 -- src + + + + + + 自动播放属性 -- autoplay + + + + + + + 预览海报属性 -- poster + + + + + + 显隐控制栏属性 -- controls + + + + + + + 重头循环属性 -- loop + + + + + + + 起始时间属性 -- starttime + + + + + 全屏下布局属性 -- direction + + + + + + + + + 播放速度属性 -- speed + + + + +
+
diff --git a/ace/ace_standard/src/main/js/default/pages/video/prop/index.js b/ace/ace_standard/src/main/js/default/pages/video/prop/index.js new file mode 100644 index 0000000000000000000000000000000000000000..3fffd01d41cdf9ebcbd5d6f1561b6f6091bfa8bf --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/video/prop/index.js @@ -0,0 +1,170 @@ +/** + * Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import prompt from '@system.prompt'; + +export default { + data:{ + listOne:[{}], + listThree:[{},{},{}], + idProp : null, + classProp : null, + classPropNone : null, + styleProp : null, + refProp : null, + refPropNone : null, + disabledPropTrue : null, + disabledPropFalse : null, + disabledPropNone : null, + focusablePropTrue : null, + focusablePropFalse : null, + focusablePropNone : null, + dataProp : null, + dataPropNone : null, + forPropNull : null, + forPropOne : null, + forPropThree : null, + ifPropTrue : null, + ifPropFalse : null, + ifPropNone : null, + showPropTrue : null, + showPropFalse : null, + showPropNone : null, + mutedPropFalse : null, + mutedPropTrue : null, + mutedPropNone : null, + srcProp : null, + srcPropNone : null, + autoplayPropFalse : null, + autoplayPropTrue : null, + autoplayPropNone : null, + posterProp : null, + posterPropNone : null, + controlsPropFalse : null, + controlsPropTrue : null, + controlsPropNone : null, + loopPropFalse : null, + loopPropTrue : null, + loopPropNone : null, + starttimeProp : null, + directionPropAuto : null, + directionPropVertical : null, + directionPropHorizontal : null, + directionPropAdapt : null, + directionPropNone : null, + speedProp : null, + speedPropNone : null, + }, + + onShow(){ + this.getCommonPropValues(); + globalThis.value = { + idProp : this.idProp, + classProp : this.classProp, + classPropNone : this.classPropNone, + styleProp : this.styleProp, + refProp : this.refProp, + refPropNone : this.refPropNone, + disabledPropTrue : this.disabledPropTrue, + disabledPropFalse : this.disabledPropFalse, + disabledPropNone : this.disabledPropNone, + focusablePropTrue : this.focusablePropTrue, + focusablePropFalse : this.focusablePropFalse, + focusablePropNone : this.focusablePropNone, + dataProp : this.dataProp, + dataPropNone : this.dataPropNone, + forPropNull : this.forPropNull, + forPropOne : this.forPropOne, + forPropThree : this.forPropThree, + ifPropTrue : this.ifPropTrue, + showPropTrue : this.showPropTrue, + showPropFalse : this.showPropFalse, + showPropNone : this.showPropNone, + mutedPropFalse : this.mutedPropFalse, + mutedPropTrue : this.mutedPropTrue, + mutedPropNone : this.mutedPropNone, + srcProp : this.srcProp, + srcPropNone : this.srcPropNone, + autoplayPropFalse : this.autoplayPropFalse, + autoplayPropTrue : this.autoplayPropTrue, + autoplayPropNone : this.autoplayPropNone, + posterProp : this.posterProp, + posterPropNone : this.posterPropNone, + controlsPropFalse : this.controlsPropFalse, + controlsPropTrue : this.controlsPropTrue, + controlsPropNone : this.controlsPropNone, + loopPropFalse : this.loopPropFalse, + loopPropTrue : this.loopPropTrue, + loopPropNone : this.loopPropNone, + starttimeProp : this.starttimeProp, + directionPropAuto : this.directionPropAuto, + directionPropVertical : this.directionPropVertical, + directionPropHorizontal : this.directionPropHorizontal, + directionPropAdapt : this.directionPropAdapt, + directionPropNone : this.directionPropNone, + speedProp : this.speedProp, + speedPropNone : this.speedPropNone, + } + }, + + getCommonPropValues(){ + this.idProp = this.$element("idProp").getInspector() + this.classProp = this.$element("classProp").getInspector() + this.classPropNone = this.$element("classPropNone").getInspector() + this.styleProp = this.$element("styleProp").getInspector() + this.refProp = this.$element("refProp").getInspector() + this.refPropNone = this.$element("refPropNone").getInspector() + this.disabledPropTrue = this.$element("disabledPropTrue").getInspector() + this.disabledPropFalse = this.$element("disabledPropFalse").getInspector() + this.disabledPropNone = this.$element("disabledPropNone").getInspector() + this.focusablePropTrue = this.$element("focusablePropTrue").getInspector() + this.focusablePropFalse = this.$element("focusablePropFalse").getInspector() + this.focusablePropNone = this.$element("focusablePropNone").getInspector() + this.dataProp = this.$element("dataProp").getInspector() + this.dataPropNone = this.$element("dataPropNone").getInspector() + this.forPropNull = this.$element("forPropNull").getInspector() + this.forPropOne = this.$element("forPropOne").getInspector() + this.forPropThree = this.$element("forPropThree").getInspector() + this.ifPropTrue = this.$element("ifPropTrue").getInspector() + this.showPropTrue = this.$element("showPropTrue").getInspector() + this.showPropFalse = this.$element("showPropFalse").getInspector() + this.showPropNone = this.$element("showPropNone").getInspector() + this.mutedPropFalse = this.$element("mutedPropFalse").getInspector() + this.mutedPropTrue = this.$element("mutedPropTrue").getInspector() + this.mutedPropNone = this.$element("mutedPropNone").getInspector() + this.srcProp = this.$element("srcProp").getInspector() + this.srcPropNone = this.$element("srcPropNone").getInspector() + this.autoplayPropFalse = this.$element("autoplayPropFalse").getInspector() + this.autoplayPropTrue = this.$element("autoplayPropTrue").getInspector() + this.autoplayPropNone = this.$element("autoplayPropNone").getInspector() + this.posterProp = this.$element("posterProp").getInspector() + this.posterPropNone = this.$element("posterPropNone").getInspector() + this.controlsPropFalse = this.$element("controlsPropFalse").getInspector() + this.controlsPropTrue = this.$element("controlsPropTrue").getInspector() + this.controlsPropNone = this.$element("controlsPropNone").getInspector() + this.loopPropFalse = this.$element("loopPropFalse").getInspector() + this.loopPropTrue = this.$element("loopPropTrue").getInspector() + this.loopPropNone = this.$element("loopPropNone").getInspector() + this.starttimeProp = this.$element("starttimeProp").getInspector() + this.directionPropAuto = this.$element("directionPropAuto").getInspector() + this.directionPropVertical = this.$element("directionPropVertical").getInspector() + this.directionPropHorizontal = this.$element("directionPropHorizontal").getInspector() + this.directionPropAdapt = this.$element("directionPropAdapt").getInspector() + this.directionPropNone = this.$element("directionPropNone").getInspector() + this.speedProp = this.$element("speedProp").getInspector() + this.speedPropNone = this.$element("speedPropNone").getInspector() + return + }, +}