Showing
8 changed files
with
93 additions
and
23 deletions
| @@ -4,6 +4,7 @@ import { Logger } from 'wdKit/Index'; | @@ -4,6 +4,7 @@ import { Logger } from 'wdKit/Index'; | ||
| 4 | import { performJSCallNative } from './JsBridgeBiz'; | 4 | import { performJSCallNative } from './JsBridgeBiz'; |
| 5 | import { H5CallNativeType } from './H5CallNativeType'; | 5 | import { H5CallNativeType } from './H5CallNativeType'; |
| 6 | import { Message } from 'wdJsBridge/src/main/ets/bean/Message'; | 6 | import { Message } from 'wdJsBridge/src/main/ets/bean/Message'; |
| 7 | +import { DateTimeUtils } from 'wdKit' | ||
| 7 | 8 | ||
| 8 | const TAG = 'WdWebLocalComponent'; | 9 | const TAG = 'WdWebLocalComponent'; |
| 9 | 10 | ||
| @@ -22,6 +23,13 @@ export struct WdWebLocalComponent { | @@ -22,6 +23,13 @@ export struct WdWebLocalComponent { | ||
| 22 | @State positionLeft: number = 0 | 23 | @State positionLeft: number = 0 |
| 23 | @State positionTop: number = 0 | 24 | @State positionTop: number = 0 |
| 24 | @State videoLandscape: string = '1' | 25 | @State videoLandscape: string = '1' |
| 26 | + @State curRate: PlaybackSpeed = PlaybackSpeed.Speed_Forward_1_00_X | ||
| 27 | + @State sliderStartTime: string = ''; | ||
| 28 | + @State currentTime: number = 0; | ||
| 29 | + @State durationTime: number = 0; | ||
| 30 | + @State durationStringTime: string = ''; | ||
| 31 | + @State isPause: boolean = true; | ||
| 32 | + controller: VideoController = new VideoController() | ||
| 25 | 33 | ||
| 26 | build() { | 34 | build() { |
| 27 | Column() { | 35 | Column() { |
| @@ -77,22 +85,87 @@ export struct WdWebLocalComponent { | @@ -77,22 +85,87 @@ export struct WdWebLocalComponent { | ||
| 77 | }) | 85 | }) |
| 78 | 86 | ||
| 79 | if (this.videoUrl) { | 87 | if (this.videoUrl) { |
| 80 | - Video({ src: this.videoUrl }) | ||
| 81 | - .autoPlay(true) | ||
| 82 | - .objectFit(ImageFit.Contain) | ||
| 83 | - .width(this.positionWidth) | ||
| 84 | - .height(this.positionHeight) | ||
| 85 | - .borderRadius(5) | ||
| 86 | - .alignRules({ | ||
| 87 | - top: { anchor: "__container__", align: VerticalAlign.Top }, | 88 | + Stack({ alignContent: Alignment.Bottom }) { |
| 89 | + Video({ | ||
| 90 | + src: this.videoUrl, | ||
| 91 | + currentProgressRate: this.curRate, | ||
| 92 | + controller: this.controller | ||
| 88 | }) | 93 | }) |
| 89 | - .offset({ | ||
| 90 | - x: this.positionLeft, | ||
| 91 | - y: this.positionTop | ||
| 92 | - }) | ||
| 93 | - .id("video") | ||
| 94 | - } | 94 | + .borderRadius(5) |
| 95 | + .controls(false) | ||
| 96 | + .autoPlay(true) | ||
| 97 | + .objectFit(ImageFit.Contain) | ||
| 98 | + .onStart(() => { | ||
| 99 | + this.isPause = false | ||
| 100 | + }) | ||
| 101 | + .onPause(() => { | ||
| 102 | + this.isPause = true | ||
| 103 | + }) | ||
| 104 | + .onPrepared((event) => { | ||
| 105 | + if (event) { | ||
| 106 | + this.durationTime = event.duration | ||
| 107 | + } | ||
| 108 | + }) | ||
| 109 | + .onUpdate((event) => { | ||
| 110 | + if (event) { | ||
| 111 | + this.currentTime = event.time | ||
| 112 | + } | ||
| 113 | + }) | ||
| 114 | + Row() { | ||
| 115 | + Image($r(this.isPause ? 'app.media.icon_play' : 'app.media.icon_pause')) | ||
| 116 | + .width(24) | ||
| 117 | + .height(24) | ||
| 118 | + .onClick(()=>{ | ||
| 119 | + if(this.isPause){ | ||
| 120 | + this.controller.start() | ||
| 121 | + }else{ | ||
| 122 | + this.controller.pause() | ||
| 123 | + } | ||
| 124 | + }) | ||
| 125 | + Row() { | ||
| 126 | + Text(DateTimeUtils.getFormattedDuration(this.currentTime * 1000)).fontSize(12).fontColor(Color.White).fontWeight(600) | ||
| 127 | + Slider({ | ||
| 128 | + value: this.currentTime, | ||
| 129 | + min: 0, | ||
| 130 | + max: this.durationTime | ||
| 131 | + }) | ||
| 132 | + .width("50%") | ||
| 133 | + .selectedColor('#ED2800') | ||
| 134 | + .margin({ left: 4, right: 4 }) | ||
| 135 | + // .blockStyle({ | ||
| 136 | + // type: SliderBlockType.IMAGE, | ||
| 137 | + // image: $r('app.media.slider_block') | ||
| 138 | + // }) | ||
| 139 | + // .blockSize({ width: 18, height: 12 }) | ||
| 140 | + .onChange((value: number, mode: SliderChangeMode) => { | ||
| 141 | + this.controller.setCurrentTime(value); | ||
| 142 | + }) | ||
| 143 | + Text(DateTimeUtils.getFormattedDuration(this.durationTime * 1000)).fontSize(12).fontColor(Color.White).fontWeight(600) | ||
| 144 | + } | ||
| 145 | + .justifyContent(FlexAlign.Center) | ||
| 95 | 146 | ||
| 147 | + Image($r('app.media.icon_full_screen')) | ||
| 148 | + .width(24) | ||
| 149 | + .height(24) | ||
| 150 | + .onClick(()=>{ | ||
| 151 | + this.controller.requestFullscreen(true) | ||
| 152 | + }) | ||
| 153 | + } | ||
| 154 | + .opacity(0.8) | ||
| 155 | + .width("100%") | ||
| 156 | + .justifyContent(FlexAlign.SpaceAround) | ||
| 157 | + } | ||
| 158 | + .width(this.positionWidth) | ||
| 159 | + .height(this.positionHeight) | ||
| 160 | + .alignRules({ | ||
| 161 | + top: { anchor: "__container__", align: VerticalAlign.Top }, | ||
| 162 | + }) | ||
| 163 | + .offset({ | ||
| 164 | + x: this.positionLeft, | ||
| 165 | + y: this.positionTop | ||
| 166 | + }) | ||
| 167 | + .id("video") | ||
| 168 | + } | ||
| 96 | } | 169 | } |
| 97 | }.width('100%') | 170 | }.width('100%') |
| 98 | .height(this.webHeight) | 171 | .height(this.webHeight) |
289 Bytes
339 Bytes
293 Bytes
1.79 KB
497 Bytes
| @@ -169,15 +169,12 @@ export struct ImageAndTextPageComponent { | @@ -169,15 +169,12 @@ export struct ImageAndTextPageComponent { | ||
| 169 | detailedSkeleton() | 169 | detailedSkeleton() |
| 170 | } | 170 | } |
| 171 | } | 171 | } |
| 172 | - | ||
| 173 | //底部交互区 | 172 | //底部交互区 |
| 174 | - if (this.contentDetailData?.length) { | ||
| 175 | - OperRowListView({ | ||
| 176 | - contentDetailData: this.contentDetailData[0], | ||
| 177 | - publishCommentModel: this.publishCommentModel, | ||
| 178 | - operationButtonList: this.operationButtonList, | ||
| 179 | - }) | ||
| 180 | - } | 173 | + OperRowListView({ |
| 174 | + contentDetailData: this.contentDetailData[0], | ||
| 175 | + publishCommentModel: this.publishCommentModel, | ||
| 176 | + operationButtonList: this.operationButtonList, | ||
| 177 | + }) | ||
| 181 | } | 178 | } |
| 182 | 179 | ||
| 183 | } | 180 | } |
| @@ -319,7 +319,7 @@ struct ChannelDialog { | @@ -319,7 +319,7 @@ struct ChannelDialog { | ||
| 319 | } | 319 | } |
| 320 | } | 320 | } |
| 321 | }), | 321 | }), |
| 322 | - PanGesture({ fingers: 1, direction: null, distance: 0 }) | 322 | + PanGesture({ fingers: 1, direction: this.isEditIng ? PanDirection.All:PanDirection.None, distance: 0 }) |
| 323 | .onActionStart((event: GestureEvent) => { | 323 | .onActionStart((event: GestureEvent) => { |
| 324 | this.dragItem = item.num | 324 | this.dragItem = item.num |
| 325 | this.dragRefOffsetX = 0 | 325 | this.dragRefOffsetX = 0 |
-
Please register or login to post a comment