• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1/*
2 * Copyright (c) 2022-2023 Huawei Device 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 */
15
16import { songList } from '../model/SongList'
17import MyDataSource from '../model/SongModule'
18
19@Component
20export default struct PlayList {
21  @StorageProp('currentBreakpoint') currentBreakpoint: string = 'sm'
22  @StorageProp('fontSize') fontSize: number = 0
23  @Consume coverHeight: number
24
25  @Builder
26  PlayAll() {
27    Row() {
28      Image($r("app.media.ic_play_all"))
29        .height(23)
30        .width(23)
31      Text($r('app.string.play_all'))
32        .maxLines(1)
33        .padding({ left: 10 })
34        .fontColor('#000000')
35        .fontSize(this.fontSize)
36      Blank()
37      Image($r('app.media.ic_order_play'))
38        .width(24)
39        .height(24)
40        .margin({ right: 16 })
41      Image($r('app.media.ic_sort_list'))
42        .height(24)
43        .width(24)
44    }
45    .height(60)
46    .width('100%')
47    .padding({ left: 12, right: 12 })
48  }
49
50  @Builder
51  SongItem(title: string, label: Resource, singer: string) {
52    Row() {
53      Column() {
54        Text(title)
55          .fontColor('#000000')
56          .fontSize(this.fontSize)
57          .margin({ bottom: 4 })
58        Row() {
59          Image(label)
60            .width(16)
61            .height(16)
62            .margin({ right: 4 })
63          Text(singer)
64            .opacity(0.38)
65            .fontColor('#000000')
66            .fontSize(this.fontSize - 4)
67        }
68      }
69      .alignItems(HorizontalAlign.Start)
70
71      Blank()
72      Image($r('app.media.ic_list_more'))
73        .height(24)
74        .width(24)
75    }
76    .height(60)
77    .width('100%')
78  }
79
80  build() {
81    Column() {
82      this.PlayAll()
83      Scroll() {
84        List() {
85          LazyForEach(new MyDataSource(songList), item => {
86            ListItem() {
87              Column() {
88                this.SongItem(item.title, item.label, item.singer)
89                Divider()
90                  .strokeWidth(0.5)
91                  .color('#000')
92                  .opacity(0.1)
93              }
94              .width('100%')
95              .height(50)
96              .padding({ left: 14, right: 14 })
97            }
98          }, item => item.id.toString())
99        }
100        .width('100%')
101        .lanes(this.currentBreakpoint === 'lg' ? 2 : 1)
102      }
103      .height('100%')
104      .flexGrow(1)
105      .flexShrink(1)
106    }
107    .width('100%')
108    .height('100%')
109    .borderRadius({ topLeft: 20, topRight: 20 })
110    .backgroundColor(Color.White)
111    .padding({ bottom: this.currentBreakpoint === 'sm' ? this.coverHeight : 0 })
112  }
113}