1/* 2 * Copyright (c) 2023 Hunan OpenValley Digital Industry Development Co., Ltd. 3 * Licensed under the Apache License, Version 2.0 (the "License"); 4 * you may not use this file except in compliance with the License. 5 * You may obtain a copy of the License at 6 * 7 * http://www.apache.org/licenses/LICENSE-2.0 8 * 9 * Unless required by applicable law or agreed to in writing, software 10 * distributed under the License is distributed on an "AS IS" BASIS, 11 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 * See the License for the specific language governing permissions and 13 * limitations under the License. 14 */ 15import emitter from '@ohos.events.emitter'; 16 17import { VideoDetailInfo } from '../appsampled/data/SearchResult'; 18import AVPlayerModel from '../model/AVPlayerModel' 19import Constant from '../utils/Constant'; 20import Logger from '../utils/Logger'; 21 22const TAG: string = '[SearchPlayVideoComponent]'; 23 24@Component 25export default struct SearchPlayVideoComponent { 26 private videoDetailInfo?: VideoDetailInfo; 27 private xComponentController: XComponentController = new XComponentController(); 28 private avPlayerModel: AVPlayerModel = new AVPlayerModel(getContext(this)); 29 @State surfaceId: string = '-1'; 30 @State isPlay: boolean = false; 31 @State isInit: boolean = false; 32 33 aboutToAppear() { 34 // 监听暂停事件，当有其他音乐播放时当前播放 35 emitter.on({ eventId: Constant.EVENT_PAUSED_VIDEO }, data => { 36 Logger.info(TAG, `emitter on data = ${JSON.stringify(data)}`) 37 if (data) { 38 // 拿出传过来的ID 39 let videoDetailId: number = data.data?.videoDetailId; 40 Logger.info(TAG, `emitter on data videoId= ${JSON.stringify(videoDetailId)}`) 41 // 不与当前ID相同则暂停，规避自身也会暂停的问题 42 if (videoDetailId && videoDetailId !== this.videoDetailInfo?.videoDetailId) { 43 Logger.info(TAG, `emitter on data this.isPlay= ${JSON.stringify(this.isPlay)}`) 44 if (this.isPlay) { 45 this.avPlayerModel.paused(); 46 this.isPlay = false; 47 } 48 } 49 } 50 }); 51 } 52 53 build() { 54 Column() { 55 // 作者信息 56 Row({ space: 8 }) { 57 Image($r('app.media.app_icon')) 58 .width(48) 59 .height(48) 60 .objectFit(ImageFit.Contain) 61 .borderRadius(24) 62 Column({ space: 5 }) { 63 Text(this.videoDetailInfo?.videoDetailAuthorName) 64 .height(18) 65 .fontColor($r('app.color.COLOR_FFFFFF')) 66 .fontSize(18) 67 .fontFamily($r('app.string.Font_family_medium')) 68 .textAlign(TextAlign.Start) 69 Text(this.videoDetailInfo?.videoDetailTime) 70 .height(18) 71 .fontColor($r('app.color.COLOR_CCFFFFFF')) 72 .fontSize(14) 73 .fontFamily($r('app.string.Font_family_regular')) 74 .textAlign(TextAlign.Start) 75 } 76 .height(80) 77 .justifyContent(FlexAlign.Center) 78 .alignItems(HorizontalAlign.Start) 79 80 Blank() 81 Image($r('app.media.app_icon')) 82 .width(22) 83 .height(30) 84 .objectFit(ImageFit.Contain) 85 .margin({ right: 5 }) 86 } 87 .width('100%') 88 .height(70) 89 90 // 视频Title 91 Column({ space: 5 }) { 92 Text(this.videoDetailInfo?.videoDetailTitle) 93 .fontColor($r('app.color.COLOR_FFFFFF')) 94 .fontSize(18) 95 .fontFamily($r('app.string.Font_family_regular')) 96 .textAlign(TextAlign.Start) 97 .textOverflow({ overflow: TextOverflow.Ellipsis }) 98 Text(this.videoDetailInfo?.videoDetailLabel) 99 .fontColor($r('app.color.COLOR_EEC934')) 100 .fontSize(18) 101 .maxLines(3) 102 .fontFamily($r('app.string.Font_family_regular')) 103 .textAlign(TextAlign.Start) 104 .textOverflow({ overflow: TextOverflow.Ellipsis }) 105 } 106 .width('100%') 107 .height(60) 108 .justifyContent(FlexAlign.Center) 109 .alignItems(HorizontalAlign.Start) 110 111 // 视频 112 Stack() { 113 XComponent({ 114 id: 'xComponentId', 115 type: 'surface', 116 controller: this.xComponentController 117 }) 118 .onLoad(() => { 119 Logger.info(TAG, 'onLoad is called') 120 this.xComponentController.setXComponentSurfaceSize({ surfaceWidth: 640, surfaceHeight: 480 }) 121 this.surfaceId = this.xComponentController.getXComponentSurfaceId() 122 Logger.info(TAG, `onLoad surfaceId: ${this.surfaceId}`) 123 }) 124 .height('100%') 125 .width('100%') 126 .borderRadius(14) 127 Row() { 128 Image(this.isPlay ? $r('app.media.app_icon') : $r('app.media.app_icon')) 129 .width(24) 130 .height(24) 131 .objectFit(ImageFit.Contain) 132 } 133 .width(56) 134 .height(56) 135 .justifyContent(FlexAlign.Center) 136 .onClick(e => { 137 Logger.info(TAG, `onClick this.isPlay= ${JSON.stringify(this.isPlay)}`) 138 // 播放的视频点击则暂停 139 if (this.isPlay) { 140 this.avPlayerModel.paused(); 141 } else { 142 // 播放当前视频时发送事件暂停其他视频播放事件 143 emitter.emit({ eventId: Constant.EVENT_PAUSED_VIDEO }, { 144 data: { 145 'videoDetailId': this.videoDetailInfo?.videoDetailId 146 } 147 }); 148 149 // 第一次点击播放先初始化音乐 150 if (!this.isInit) { 151 this.avPlayerModel.avPlayerFdSrcDemo(this.videoDetailInfo?.videoDetail, this.surfaceId); 152 this.isInit = !this.isInit; 153 } else { 154 Logger.info(TAG, `onClick Play= ${JSON.stringify(this.isInit)}`) 155 // 初始化过的直接播放 156 this.avPlayerModel.play(); 157 } 158 } 159 this.isPlay = !this.isPlay; 160 }) 161 } 162 .width('100%') 163 .height(300) 164 .alignContent(Alignment.BottomEnd) 165 166 // 视频点赞等信息 167 Row() { 168 this.Item($r('app.media.app_icon'), this.videoDetailInfo?.videoDetailLike) 169 this.Item($r('app.media.app_icon'), this.videoDetailInfo?.videoDetailComment) 170 this.Item($r('app.media.app_icon'), this.videoDetailInfo?.videoDetailCollect) 171 this.Item($r('app.media.app_icon'), this.videoDetailInfo?.videoDetailTransmit) 172 } 173 .width('100%') 174 .height(50) 175 .padding({ left: 10, right: 10 }) 176 .justifyContent(FlexAlign.SpaceBetween) 177 178 // 视频具体评论信息 179 Row({ space: 8 }) { 180 Image($r('app.media.app_icon')) 181 .width(36) 182 .height(36) 183 .objectFit(ImageFit.Contain) 184 .borderRadius(18) 185 Column({ space: 5 }) { 186 Text(this.videoDetailInfo?.commenterName) 187 .height(18) 188 .fontColor($r('app.color.COLOR_FFFFFF')) 189 .fontSize(18) 190 .fontFamily($r('app.string.Font_family_medium')) 191 .textAlign(TextAlign.Start) 192 Text(this.videoDetailInfo?.commenterContent) 193 .height(18) 194 .fontColor($r('app.color.COLOR_CCFFFFFF')) 195 .fontSize(14) 196 .fontFamily($r('app.string.Font_family_regular')) 197 .textAlign(TextAlign.Start) 198 } 199 .height(60) 200 .justifyContent(FlexAlign.Center) 201 .alignItems(HorizontalAlign.Start) 202 203 Blank() 204 Column() { 205 Image($r('app.media.app_icon')) 206 .width(22) 207 .height(30) 208 .objectFit(ImageFit.Contain) 209 Text(this.videoDetailInfo?.commenterLike) 210 .height(18) 211 .fontColor($r('app.color.COLOR_CCFFFFFF')) 212 .fontSize(14) 213 .fontFamily($r('app.string.Font_family_regular')) 214 .textAlign(TextAlign.Start) 215 } 216 .width(48) 217 .height(48) 218 .justifyContent(FlexAlign.Center) 219 } 220 .width('100%') 221 .height(70) 222 .padding({ left: 10, right: 10 }) 223 } 224 .width('100%') 225 .height(550) 226 .backgroundColor($r('app.color.COLOR_151724')) 227 } 228 229 @Builder 230 Item(img: Resource, num: string) { 231 Row({ space: 8 }) { 232 Image($r('app.media.app_icon')) 233 .width(24) 234 .height(24) 235 .objectFit(ImageFit.Contain) 236 Text(num) 237 .fontColor($r('app.color.COLOR_FFFFFF')) 238 .fontSize(16) 239 .fontFamily($r('app.string.Font_family_regular')) 240 .textAlign(TextAlign.Center) 241 } 242 .width(64) 243 .height(48) 244 .justifyContent(FlexAlign.Center) 245 } 246}