Showing
1 changed file
with
67 additions
and
45 deletions
| @@ -35,6 +35,7 @@ export struct WdWebLocalComponent { | @@ -35,6 +35,7 @@ export struct WdWebLocalComponent { | ||
| 35 | @StorageProp('currentBreakpoint') @Watch("currentChanged")currentBreakpoint: string = 'sm'; | 35 | @StorageProp('currentBreakpoint') @Watch("currentChanged")currentBreakpoint: string = 'sm'; |
| 36 | 36 | ||
| 37 | @State isFullScreen: boolean = false; | 37 | @State isFullScreen: boolean = false; |
| 38 | + @State isEndPlay: boolean = false; | ||
| 38 | currentChanged(){ | 39 | currentChanged(){ |
| 39 | ///折叠屏转换 暂停播放器 | 40 | ///折叠屏转换 暂停播放器 |
| 40 | this.controller.pause() | 41 | this.controller.pause() |
| @@ -213,6 +214,9 @@ export struct WdWebLocalComponent { | @@ -213,6 +214,9 @@ export struct WdWebLocalComponent { | ||
| 213 | .controls(this.isFullScreen?true:false) | 214 | .controls(this.isFullScreen?true:false) |
| 214 | .autoPlay(true) | 215 | .autoPlay(true) |
| 215 | .objectFit(ImageFit.Contain) | 216 | .objectFit(ImageFit.Contain) |
| 217 | + .onFinish(()=>{ | ||
| 218 | + this.isEndPlay = true | ||
| 219 | + }) | ||
| 216 | .onStart(() => { | 220 | .onStart(() => { |
| 217 | this.isPause = false | 221 | this.isPause = false |
| 218 | }) | 222 | }) |
| @@ -239,57 +243,75 @@ export struct WdWebLocalComponent { | @@ -239,57 +243,75 @@ export struct WdWebLocalComponent { | ||
| 239 | WindowModel.shared.setPreferredOrientation(window.Orientation.PORTRAIT) | 243 | WindowModel.shared.setPreferredOrientation(window.Orientation.PORTRAIT) |
| 240 | } | 244 | } |
| 241 | }) | 245 | }) |
| 242 | - Row() { | ||
| 243 | - Image(this.isPause ? $r('app.media.icon_play') : $r('app.media.icon_pause')) | ||
| 244 | - .width(24) | ||
| 245 | - .height(24) | ||
| 246 | - .onClick(() => { | ||
| 247 | - if (this.isPause) { | 246 | + |
| 247 | + if (this.isEndPlay){ | ||
| 248 | + Column(){ | ||
| 249 | + Image($r('app.media.icon_replay')).width(40).height(40) | ||
| 250 | + .onClick(() => { | ||
| 251 | + this.isEndPlay = false | ||
| 248 | this.controller.start() | 252 | this.controller.start() |
| 249 | - } else { | ||
| 250 | - this.controller.pause() | ||
| 251 | - } | ||
| 252 | - }) | ||
| 253 | - Row() { | ||
| 254 | - Text(DateTimeUtils.getFormattedDuration(this.currentTime * 1000)) | ||
| 255 | - .fontSize(12) | ||
| 256 | - .fontColor(Color.White) | ||
| 257 | - .fontWeight(600) | ||
| 258 | - Slider({ | ||
| 259 | - value: this.currentTime, | ||
| 260 | - min: 0, | ||
| 261 | - max: this.durationTime | ||
| 262 | - }) | ||
| 263 | - .width("50%") | ||
| 264 | - .selectedColor('#ED2800') | ||
| 265 | - .trackColor("#1AFFFFFF") | ||
| 266 | - .trackThickness(2) | ||
| 267 | - .margin({ left: 4, right: 4 }) | ||
| 268 | - .blockStyle({ | ||
| 269 | - type: SliderBlockType.IMAGE, | ||
| 270 | - image: $r('app.media.slider_block') | ||
| 271 | }) | 253 | }) |
| 272 | - .blockSize({ width: 18, height: 12 }) | ||
| 273 | - .onChange((value: number, mode: SliderChangeMode) => { | ||
| 274 | - this.controller.setCurrentTime(value); | ||
| 275 | - }) | ||
| 276 | - Text(DateTimeUtils.getFormattedDuration(this.durationTime * 1000)) | ||
| 277 | - .fontSize(12) | ||
| 278 | - .fontColor(Color.White) | ||
| 279 | - .fontWeight(600) | 254 | + |
| 255 | + Text('重播').fontColor(Color.White).fontSize(14) | ||
| 280 | } | 256 | } |
| 257 | + .backgroundColor(Color.Black) | ||
| 258 | + .opacity(0.5) | ||
| 281 | .justifyContent(FlexAlign.Center) | 259 | .justifyContent(FlexAlign.Center) |
| 260 | + .width(this.positionWidth) | ||
| 261 | + .height(this.positionHeight) | ||
| 262 | + }else { | ||
| 263 | + Row() { | ||
| 264 | + Image(this.isPause ? $r('app.media.icon_play') : $r('app.media.icon_pause')) | ||
| 265 | + .width(24) | ||
| 266 | + .height(24) | ||
| 267 | + .onClick(() => { | ||
| 268 | + if (this.isPause) { | ||
| 269 | + this.controller.start() | ||
| 270 | + } else { | ||
| 271 | + this.controller.pause() | ||
| 272 | + } | ||
| 273 | + }) | ||
| 274 | + Row() { | ||
| 275 | + Text(DateTimeUtils.getFormattedDuration(this.currentTime * 1000)) | ||
| 276 | + .fontSize(12) | ||
| 277 | + .fontColor(Color.White) | ||
| 278 | + .fontWeight(600) | ||
| 279 | + Slider({ | ||
| 280 | + value: this.currentTime, | ||
| 281 | + min: 0, | ||
| 282 | + max: this.durationTime | ||
| 283 | + }) | ||
| 284 | + .width("50%") | ||
| 285 | + .selectedColor('#ED2800') | ||
| 286 | + .trackColor("#1AFFFFFF") | ||
| 287 | + .trackThickness(2) | ||
| 288 | + .margin({ left: 4, right: 4 }) | ||
| 289 | + .blockStyle({ | ||
| 290 | + type: SliderBlockType.IMAGE, | ||
| 291 | + image: $r('app.media.slider_block') | ||
| 292 | + }) | ||
| 293 | + .blockSize({ width: 18, height: 12 }) | ||
| 294 | + .onChange((value: number, mode: SliderChangeMode) => { | ||
| 295 | + this.controller.setCurrentTime(value); | ||
| 296 | + }) | ||
| 297 | + Text(DateTimeUtils.getFormattedDuration(this.durationTime * 1000)) | ||
| 298 | + .fontSize(12) | ||
| 299 | + .fontColor(Color.White) | ||
| 300 | + .fontWeight(600) | ||
| 301 | + } | ||
| 302 | + .justifyContent(FlexAlign.Center) | ||
| 282 | 303 | ||
| 283 | - // Image($r('app.media.icon_full_screen')) | ||
| 284 | - // .width(24) | ||
| 285 | - // .height(24) | ||
| 286 | - // .onClick(() => { | ||
| 287 | - // this.controller.requestFullscreen(true) | ||
| 288 | - // }) | 304 | + // Image($r('app.media.icon_full_screen')) |
| 305 | + // .width(24) | ||
| 306 | + // .height(24) | ||
| 307 | + // .onClick(() => { | ||
| 308 | + // this.controller.requestFullscreen(true) | ||
| 309 | + // }) | ||
| 310 | + } | ||
| 311 | + .opacity(0.8) | ||
| 312 | + .width("100%") | ||
| 313 | + .justifyContent(FlexAlign.SpaceAround) | ||
| 289 | } | 314 | } |
| 290 | - .opacity(0.8) | ||
| 291 | - .width("100%") | ||
| 292 | - .justifyContent(FlexAlign.SpaceAround) | ||
| 293 | } | 315 | } |
| 294 | 316 | ||
| 295 | } | 317 | } |
-
Please register or login to post a comment