• 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 { optionList } from '../model/SongList'
17
18@Component
19export default struct PlayListCover {
20  @State imgHeight: number = 0
21  @StorageProp('coverMargin') coverMargin: number = 0
22  @StorageProp('currentBreakpoint') currentBreakpoint: string = 'sm'
23  @StorageProp('fontSize') fontSize: number = 0
24
25  @Builder
26  CoverImage() {
27    Stack({ alignContent: Alignment.BottomStart }) {
28      Image($r('app.media.pic_album'))
29        .width('100%')
30        .aspectRatio(1)
31        .borderRadius(8)
32        .onAreaChange((oldArea: Area, newArea: Area) => {
33          this.imgHeight = newArea.height as number
34        })
35      Text($r('app.string.collection_num'))
36        .letterSpacing(1)
37        .fontColor('#fff')
38        .fontSize(this.fontSize - 4)
39        .translate({ x: 10, y: '-100%' })
40    }
41    .width('100%')
42    .height('100%')
43    .aspectRatio(1)
44  }
45
46  @Builder
47  CoverIntroduction() {
48    Column() {
49      Text($r('app.string.list_name'))
50        .opacity(0.9)
51        .fontWeight(500)
52        .fontColor('#556B89')
53        .fontSize(this.fontSize + 2)
54        .margin({ bottom: 10 })
55
56      Text($r('app.string.playlist_Introduction'))
57        .opacity(0.6)
58        .width('100%')
59        .fontWeight(400)
60        .fontColor('#556B89')
61        .fontSize(this.fontSize - 2)
62    }
63    .width('100%')
64    .height(this.currentBreakpoint === 'sm' ? this.imgHeight : 70)
65    .alignItems(HorizontalAlign.Start)
66    .justifyContent(FlexAlign.Center)
67    .padding({ left: this.currentBreakpoint === 'sm' ? 20 : 0 })
68    .margin({
69      top: this.currentBreakpoint === 'sm' ? 0 : 30,
70      bottom: this.currentBreakpoint === 'sm' ? 0 : 20
71    })
72  }
73
74  @Builder
75  CoverOptions() {
76    Row() {
77      ForEach(optionList, item => {
78        Column({ space: 4 }) {
79          Image(item.image).height(30).width(30)
80          Text(item.text)
81            .fontColor('#556B89')
82            .fontSize(this.fontSize - 1)
83        }
84      })
85    }
86    .width('100%')
87    .height(70)
88    .padding({
89      left: this.currentBreakpoint === 'sm' ? 20 : 0,
90      right: this.currentBreakpoint === 'sm' ? 20 : 0
91    })
92    .margin({
93      top: this.currentBreakpoint === 'sm' ? 15 : 0,
94      bottom: this.currentBreakpoint === 'sm' ? 15 : 0
95    })
96    .justifyContent(FlexAlign.SpaceBetween)
97  }
98
99  build() {
100    if (this.currentBreakpoint === 'sm') {
101      Column() {
102        GridRow() {
103          GridCol({ span: { xs: 4, sm: 4, md: 10 }, offset: { xs: 0, sm: 0, md: 1, lg: 1 } }) {
104            this.CoverImage()
105          }
106
107          GridCol({ span: { xs: 8, sm: 8, md: 10 }, offset: { xs: 0, sm: 0, md: 2, lg: 2 } }) {
108            this.CoverIntroduction()
109          }
110
111          GridCol({ span: { xs: 12, sm: 12, md: 10 }, offset: { xs: 0, sm: 0, md: 2, lg: 2 } }) {
112            this.CoverOptions()
113          }
114        }
115        .margin({ left: this.coverMargin, right: this.coverMargin })
116        .padding({ top: this.currentBreakpoint === 'sm' ? 50 : 70 })
117      }
118    } else {
119      Column() {
120        GridRow() {
121          GridCol({ span: { xs: 4, sm: 4, md: 10 }, offset: { xs: 0, sm: 0, md: 1, lg: 1 } }) {
122            this.CoverImage()
123          }
124
125          GridCol({ span: { xs: 8, sm: 8, md: 10 }, offset: { xs: 0, sm: 0, md: 2, lg: 2 } }) {
126            this.CoverIntroduction()
127          }
128
129          GridCol({ span: { xs: 12, sm: 12, md: 10 }, offset: { xs: 0, sm: 0, md: 2, lg: 2 } }) {
130            this.CoverOptions()
131          }.margin({
132            top: this.currentBreakpoint === 'sm' ? 15 : 0,
133            bottom: this.currentBreakpoint === 'sm' ? 15 : 0
134          })
135        }
136        .margin({ left: this.coverMargin, right: this.coverMargin })
137        .padding({ top: this.currentBreakpoint === 'sm' ? 50 : 70 })
138      }
139      .height('100%')
140    }
141  }
142}