wangliang_wd

feat:增加动态详情页重播展示

@@ -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 }