developOne / harmonyPool

Go to a project
Toggle navigation Toggle navigation pinning
fanmingyou3_wd
6b876e2a 1 parent a0303487

短视频详情播放页面

Inline Side-by-side
Showing 17 changed files with 425 additions and 77 deletions
{
"code":"0",
"data":[
{
"activityInfos":[
],
"appstyle":2,
"audioList":[
],
"authorList":[
{
"authorName":""
}
],
"bestNoticer":1,
"commentDisplay":1,
"editorName":"舒健",
"firstFrameImageUri":"https://cdnjdout.aikan.pdnews.cn/zhbj-20240116/vod/content/output/c72f4170db2c4d34befa453f60d39a69_opt.png",
"fullColumnImgUrls":[
{
"format":null,
"height":534,
"landscape":1,
"size":479486,
"url":"https://cdnjdphoto.aikan.pdnews.cn/sjbj-20240116/image/display/2ec7bccff2324b05ac4b6503d868a381.png",
"weight":949
}
],
"hasPopUp":null,
"itemId":"",
"itemTypeCode":"",
"keyArticle":0,
"likesStyle":1,
"liveInfo":null,
"menuShow":1,
"newIntroduction":"我是生活在长江里的一头江豚，是长江中唯一的水生哺乳动物，更是国家一级保护动物。但曾几何时，我和我的江中小伙伴出现了生存危机……直到有一天，我突然发现，打渔人变成护渔人，江水变清澈了，长江逐渐恢复了生机，我的家族数量上升到了1249头。当长江之水再一次悠悠流淌，我们相拥在清澈波光中起舞。长江，我的家园。",
"newLinkObject":null,
"newsBodyTitle":"",
"newsContent":"",
"newsContentBak":"",
"newsDownTitle":"",
"newsId":30002089437,
"newsLinkUrl":"",
"newsShortTitle":"",
"newsSource":"",
"newsSourceName":"",
"newsSummary":"我是生活在长江里的一头江豚，是长江中唯一的水生哺乳动物，更是国家一级保护动物。但曾几何时，我和我的江中小伙伴出现了生存危机……直到有一天，我突然发现，打渔人变成护渔人，江水变清澈了，长江逐渐恢复了生机，我的家族数量上升到了1249头。当长江之水再一次悠悠流淌，我们相拥在清澈波光中起舞。长江，我的家园。",
"newsTags":"",
"newsTitle":"一头江豚的自述",
"newsType":1,
"openAudio":1,
"openComment":1,
"openLikes":1,
"photoList":[
],
"popUps":[
],
"preCommentFlag":0,
"publishTime":"2024-01-16 17:34:29",
"reLInfo":{
"channelId":2002,
"relId":"500000259325",
"relObjectId":2002,
"relType":"1"
},
"readFlag":0,
"recommendShow":1,
"rmhInfo":null,
"rmhPlatform":0,
"sceneId":"",
"shareInfo":{
"shareCoverUrl":"https://cdnjdphoto.aikan.pdnews.cn/zhbj-20240116/image/content/7e0e58dc57a743f1b1b4904811f2a231.png?x-oss-process=image/resize,w_200",
"shareOpen":1,
"sharePosterCoverUrl":"https://cdnjdphoto.aikan.pdnews.cn/sjbj-20240116/image/display/2ec7bccff2324b05ac4b6503d868a381.png",
"sharePosterOpen":0,
"shareSummary":"我是生活在长江里的一头江豚，是长江中唯一的水生哺乳动物，更是国家一级保护动物。但曾几何时，我和我的江中小伙伴出现了生存危机……直到有一天，我突然发现，打渔人变成护渔人，江水变清澈了，长江逐渐恢复了生机，我的家族数量上升到了1249头。当长江之水再一次悠悠流淌，我们相拥在清澈波光中起舞。长江，我的家园。",
"shareTitle":"一头江豚的自述",
"shareUrl":"https://people.pdnews.cn/column/30002089437-500000259325"
},
"specialColumnId":null,
"specialColumnName":"",
"subSceneId":"",
"timeline":null,
"topicInfo":null,
"traceId":"",
"traceInfo":"",
"userInfo":null,
"videoInfo":[
{
"clarity":5,
"resolutionHeight":720,
"resolutionWidth":1280,
"videoDuration":229,
"videoLandScape":1,
"videoType":1,
"videoUrl":"https://cdnjdout.aikan.pdnews.cn/zhbj-20240116/vod/content/output/c72f4170db2c4d34befa453f60d39a69_opt.mp4"
}
],
"viewCount":0,
"visitorComment":1,
"voteInfo":null
}
],
"message":"Success",
"meta":null,
"requestId":"",
"success":true,
"timestamp":1707029290421
}
\ No newline at end of file
... ...
... ... @@ -16,20 +16,20 @@ export interface ContentDetailRequestParams {
export class ContentDetailRequest {
static getContentDetailDataMock(context: Context): Promise<ResponseDTO<ContentDetailDTO[]>> {
Logger.info(TAG, `getContentDetailDataMock start`);
return ResourcesUtils.getResourcesJson<ResponseDTO<ContentDetailDTO[]>>(context, 'content_detail.json')
return ResourcesUtils.getResourcesJson<ResponseDTO<ContentDetailDTO[]>>(context, 'content_detail2.json')
}
/**
* 现网-新闻内容详情域名
*/
static readonly HOST2: string = "https://pdapis.pdnews.cn";
// /**
// * 现网-新闻内容详情域名
// */
// static readonly HOST2: string = "https://pdapis.pdnews.cn";
/**
* 新闻内容详情【get】接口
*/
static readonly CONTENT_DETAIL_PATH: string = "/api/rmrb-bff-display-zh/content/zh/c/content/detail";
static getContentDetailUrl(contentId: string, relId: string, relType: string) {
let url = ContentDetailRequest.HOST2 + ContentDetailRequest.CONTENT_DETAIL_PATH
let url = HttpUrlUtils.getHost() + ContentDetailRequest.CONTENT_DETAIL_PATH
url = url + "?&contentId=" + contentId
+ "&relId=" + relId
+ "&relType=" + relType;
... ...
... ... @@ -19,8 +19,8 @@ const TAG = 'DetailPlayShortVideoPage';
@Component
export struct DetailPlayShortVideoPage {
private contentId?: string = undefined
private relId?:string = undefined
private relType?:string = undefined
private relId?: string = undefined
private relType?: string = undefined
private playerController: WDPlayerController = new WDPlayerController();
@Watch("urlChanged") @State url?: string = undefined
@Watch('changeContinue') @Provide nextContId?: string = '';
... ... @@ -32,6 +32,8 @@ export struct DetailPlayShortVideoPage {
@Provide userId: string = '';
@Provide title?: string = undefined
@Provide message?: string = undefined
@Provide newsSummary?: string = undefined
@Provide progressVal: number = 0;
playVMChanged(name: string) {
this.url = this.playVM.url
... ... @@ -40,13 +42,14 @@ export struct DetailPlayShortVideoPage {
this.nextContId = this.playVM.nextContId
this.canStart = this.playVM.canStart;
this.message = this.playVM.message
this.newsSummary = this.playVM.newsSummary
}
aboutToAppear() {
let action: Action = router.getParams() as Action
if (action) {
this.contentId = action.params?.contentID
if (action.params && action.params.extra){
if (action.params && action.params.extra) {
this.relId = action.params.extra.relId
this.relType = action.params.extra.relType
}
... ... @@ -86,7 +89,7 @@ export struct DetailPlayShortVideoPage {
onLoad: async () => {
// this.playVM.playWithContentId(this.contentId ?? "846899373")
this.playVM.playWithIds(this.contentId ?? "846899373",
this.relId ?? "500000301942", this.relType ?? "1")
this.relId ?? "500000301942", this.relType ?? "1")
}
})
.height('100%')
... ... @@ -104,7 +107,9 @@ export struct DetailPlayShortVideoPage {
@Builder
detailContainer() {
// DetailTabBarPageComponent({ pageId: this.pageId }).backgroundColor(Color.Black)
DetailContainer()
DetailContainer({
playerController: this.playerController
})
}
build() {
... ...
import { WDPlayerController } from 'wdPlayer';
import { PlayerTitleComment } from './PlayerTitleComment'
/**
... ... @@ -5,8 +6,12 @@ import { PlayerTitleComment } from './PlayerTitleComment'
*/
@Component
export struct DetailContainer {
private playerController?: WDPlayerController;
build() {
PlayerTitleComment()
PlayerTitleComment({
playerController: this.playerController
})
.width('100%')
}
}
\ No newline at end of file
... ...
import router from '@ohos.router';
const FULL_PARENT: string = '100%';
const TAG = 'DetailTitleSummaryView';
@Entry
@Component
export struct DetailTitleSummaryView {
@State title: string = 'title'
@State newsSummary: string = 'newsSummary'
aboutToAppear() {
this.newsSummary = 'newsSummary 0 newsSummary newsSummary newsSummary newsSummary newsSummary 0 newsSummary newsSummary newsSummary newsSummary'
}
build() {
Stack() {
Text('1')
.width('100%')
.margin({ top: 10 })
.fontColor(Color.White)
.fontSize(30)
.maxLines(1)
}
.height('60%')
.backgroundColor(Color.Black)
// Column() {
// Text(this.title)
// .width('100%')
// .margin({ top: 10 })
// .fontColor(Color.White)
// .fontSize(30)
// .maxLines(1)
//
// List() {
// ListItem() {
// Text(this.newsSummary)
// .width(FULL_PARENT)
// .fontWeight(FontWeight.Bold)
// .fontColor(Color.White)
// .maxLines(10)
// .textOverflow({ overflow: TextOverflow.Ellipsis })
// }
// }
// .constraintSize({ maxHeight: '40%' })
// .margin({ top: 5 })
//
// Image($r('app.media.ic_close'))
// .height(24)
// .width(24)
// .margin({ top: 10 })
// .alignRules({
// right: { anchor: "__container__", align: HorizontalAlign.End },
// center: { anchor: "__container__", align: VerticalAlign.Center } })
// .id('img_close')
// .onClick((event: ClickEvent) => {
// // console.info(TAG, "img_close")
// router.back()
// })
// }
// .margin({ left: 14, right: 14 })
// .backgroundColor(Color.Black)
}
}
\ No newline at end of file
... ...
import router from '@ohos.router';
import { ToastUtils } from 'wdKit';
export interface OperationItem {
icon: Resource;
// icon_selected: Resource;
text: string | Resource;
num?: number; // 个数
}
const FULL_PARENT: string = '100%';
const TAG = 'OperationListView';
@Entry
@Component
export struct OperationListView {
@State operationList: OperationItem[] = [
{
icon: $r('app.media.ic_like_uncheck'),
text: "点赞",
num: 6622
},
{
icon: $r('app.media.ic_collect_uncheck'),
text: "收藏",
num: 662,
},
{
icon: $r('app.media.ic_comment'),
text: "评论",
num: 500,
},
{
icon: $r('app.media.ic_share'),
text: "分享"
}
]
aboutToAppear() {
}
build() {
List({ space: 0, initialIndex: 0 }) {
ForEach(this.operationList, (item: OperationItem, index: number) => {
ListItem() {
this.buildOperationItem(item, index)
}
}, (item: OperationItem, index: number) => JSON.stringify(item))
}
.width(48)
// .margin({ bottom: 100 })
//.backgroundColor(Color.Red)
// .listDirection(Axis.Vertical) // 默认值：Axis.Vertical
// .lanes(this.buildLanes()) // 行/列数，一列 // 默认值：1
.cachedCount(2)
.scrollBar(BarState.Off)
.nestedScroll({
scrollForward: NestedScrollMode.PARENT_FIRST,
scrollBackward: NestedScrollMode.SELF_FIRST
})
// Stack({alignContent:Alignment.End}) {
// }
// .width('100%')
}
/**
* 组件项
*
* @param programmeBean item 组件项
*/
@Builder
buildOperationItem(item: OperationItem, index: number) {
Column() {
Image(item.icon)
.width('100%')
.aspectRatio(1)
// .borderRadius(6)
Text(item.text)
.width('100%')
// .margin({ top: 4, left: 6, right: 6 })// .backgroundColor(Color.Brown)
.fontWeight(FontWeight.Normal)
.textAlign(TextAlign.Center)
.fontSize(13)
.fontColor('#FFFFFF')
.maxLines(1)
.textOverflow({ overflow: TextOverflow.Ellipsis })
}
.margin(10)
// .backgroundColor(Color.Black)
.alignItems(HorizontalAlign.Center)
.hoverEffect(HoverEffect.Scale)
.onClick((event: ClickEvent) => {
console.info(TAG, `buildOperationItem onClick event index: ${index}`);
ToastUtils.showToast('体验版本功能暂未开放', 1000);
})
}
}
\ No newline at end of file
... ...
... ... @@ -14,7 +14,7 @@ export struct PlayControlViewContainer {
@Consume status: number;
@Provide currentTime: string = "00:00";
@Provide totalTime: string = "00:00";
@Provide progressVal: number = 0;
@Consume progressVal: number;
@Provide isShowVolume: boolean = false;
@Provide volumeProgress: number = 1;
@Consume isFullScreen: boolean;
... ...
... ... @@ -51,60 +51,60 @@ export struct PlayerProgressBar {
build() {
Column() {
Row() {
Column() {
Image(this.status === PlayerConstants.STATUS_START ?
$r('app.media.ic_pause') : $r('app.media.ic_play'))
.width($r('app.float.control_image_width'))
.aspectRatio(1)
.onClick(() => {
let curStatus = (this.status === PlayerConstants.STATUS_START);
this.status = curStatus ? PlayerConstants.STATUS_PAUSE : PlayerConstants.STATUS_START;
this.playerController?.switchPlayOrPause();
})
}
.justifyContent(FlexAlign.Center)
.alignItems(HorizontalAlign.Center)
.width(44)
.height('100%')
Text(this.currentTime)
.fontSize($r("app.float.font_size_14"))
.fontColor(Color.White)
Slider({
value: this.progressVal,
step: 1,
style: SliderStyle.OutSet
})
.blockColor(Color.White)
.trackColor($r('app.color.track_color'))
.selectedColor($r('app.color.index_tab_selected_font_color'))
.trackThickness(1)
.layoutWeight(1)
.onChange((value: number, mode: SliderChangeMode) => {
this.playerController?.setSeekTime(value, mode);
})
Text(this.totalTime)
.fontSize($r("app.float.font_size_14"))
.fontColor(Color.White)
Column() {
Image($r('app.media.ic_fullscreen'))
.width($r('app.float.control_image_width'))
.aspectRatio(1)
.onClick(() => {
this.isFullScreen = !this.isFullScreen;
WindowModel.shared.setPreferredOrientation(window.Orientation.LANDSCAPE);
devicePLSensorManager.devicePLSensorOn(window.Orientation.LANDSCAPE);
})
}
.justifyContent(FlexAlign.Center)
.alignItems(HorizontalAlign.Center)
.width(44)
.height('100%')
}
.width('100%')
.visibility(this.isFullScreen ? Visibility.None : Visibility.Visible)
// Row() {
// Column() {
// Image(this.status === PlayerConstants.STATUS_START ?
// $r('app.media.ic_pause') : $r('app.media.ic_play'))
// .width($r('app.float.control_image_width'))
// .aspectRatio(1)
// .onClick(() => {
// let curStatus = (this.status === PlayerConstants.STATUS_START);
// this.status = curStatus ? PlayerConstants.STATUS_PAUSE : PlayerConstants.STATUS_START;
// this.playerController?.switchPlayOrPause();
// })
// }
// .justifyContent(FlexAlign.Center)
// .alignItems(HorizontalAlign.Center)
// .width(44)
// .height('100%')
//
// Text(this.currentTime)
// .fontSize($r("app.float.font_size_14"))
// .fontColor(Color.White)
// Slider({
// value: this.progressVal,
// step: 1,
// style: SliderStyle.OutSet
// })
// .blockColor(Color.White)
// .trackColor($r('app.color.track_color'))
// .selectedColor($r('app.color.index_tab_selected_font_color'))
// .trackThickness(1)
// .layoutWeight(1)
// .onChange((value: number, mode: SliderChangeMode) => {
// this.playerController?.setSeekTime(value, mode);
// })
// Text(this.totalTime)
// .fontSize($r("app.float.font_size_14"))
// .fontColor(Color.White)
//
// Column() {
// Image($r('app.media.ic_fullscreen'))
// .width($r('app.float.control_image_width'))
// .aspectRatio(1)
// .onClick(() => {
// this.isFullScreen = !this.isFullScreen;
// WindowModel.shared.setPreferredOrientation(window.Orientation.LANDSCAPE);
// devicePLSensorManager.devicePLSensorOn(window.Orientation.LANDSCAPE);
// })
// }
// .justifyContent(FlexAlign.Center)
// .alignItems(HorizontalAlign.Center)
// .width(44)
// .height('100%')
// }
// .width('100%')
// .visibility(this.isFullScreen ? Visibility.None : Visibility.Visible)
Column() {
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) {
... ...
... ... @@ -4,14 +4,17 @@ import deviceInfo from '@ohos.deviceInfo'
import { WindowModel } from 'wdKit';
import { WDPlayerController } from 'wdPlayer';
import { devicePLSensorManager } from 'wdDetailPlayApi';
import { OperationListView } from './OperationListView';
@Component
export struct PlayerTitleComment {
private playerController?: WDPlayerController;
@Consume title?: string
@Consume newsSummary?: string;
@State @Watch('watchSpeed') playSpeed: number = 1;
@Consume isFullScreen: boolean;
@State comment: string = '';
@Consume progressVal: number;
aboutToAppear() {
}
... ... @@ -22,17 +25,68 @@ export struct PlayerTitleComment {
build() {
Column() {
Text(this.title)
.fontColor(Color.White)
.fontSize(14)
.maxLines(1)
Column() {
Row() {
Image($r('app.media.ic_switch_orientation'))
.width(34)
.aspectRatio(1)
.objectFit(ImageFit.Contain)
.padding({ left: 10, right: 5 })
Text("全屏观看")
.fontColor(Color.White)
.fontSize('14fp')
.maxLines(2)
.layoutWeight(1)
}
.width(100)
.backgroundColor(Color.Gray)
.borderRadius(10)
.alignItems(VerticalAlign.Center)
.onClick(() => {
this.isFullScreen = !this.isFullScreen;
WindowModel.shared.setPreferredOrientation(window.Orientation.LANDSCAPE);
devicePLSensorManager.devicePLSensorOn(window.Orientation.LANDSCAPE);
})
}
.width('100%')
.margin({ bottom: 120 })
.alignItems(HorizontalAlign.Center)
Text('查看详情 > ')
.fontColor(Color.White)
.fontSize('14fp')
.maxLines(2)
Row() {
Column() {
Text(this.title)
.fontColor(Color.White)
.fontSize(14)
.maxLines(1)
Text('查看详情 > ')
.fontColor(Color.White)
.fontSize('14fp')
.maxLines(2)
}
.layoutWeight(1)
.alignItems(HorizontalAlign.Start)
// OperationListView()
// .width(48)
// .height(150)
// .zIndex(3)
}
.width('100%')
Divider().height(30)
Slider({
value: this.progressVal,
step: 1,
style: SliderStyle.OutSet
})
.blockColor(Color.White)
.trackColor($r('app.color.track_color'))
.selectedColor($r('app.color.index_tab_selected_font_color'))
.trackThickness(1)
.width('100%')
.onChange((value: number, mode: SliderChangeMode) => {
this.playerController?.setSeekTime(value, mode);
})
Row() {
Image($r('app.media.ic_back'))
... ... @@ -72,6 +126,7 @@ export struct PlayerTitleComment {
}.alignItems(VerticalAlign.Center)
}
.width('100%')
// .height('40%')
.alignItems(HorizontalAlign.Start)
}
}
\ No newline at end of file
... ...
import { BusinessError } from '@ohos.base'
import { Logger, ToastUtils } from 'wdKit'
import { ResponseDTO} from 'wdNetwork'
import { ResponseDTO } from 'wdNetwork'
import { ContentDetailRequest } from 'wdDetailPlayApi'
import { ContentDetailDTO } from 'wdBean'
... ... @@ -16,6 +16,7 @@ export class PlayViewModel {
nextContId?: string
canStart?: boolean
message?: string
newsSummary?: string
constructor() {
// todo:
... ... @@ -57,6 +58,7 @@ export class PlayViewModel {
this.url = resDTO.data[0].videoInfo[0].videoUrl
this.canStart = true;
this.message = '';
this.newsSummary = resDTO.data[0].newsSummary
}).catch((err: BusinessError) => {
Logger.error(TAG, `getContentDetailData catch, error.code : ${err.code}, error.message:${err.message}`);
// todo:
... ...