1/* 2* Copyright (C) 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 Utils from '../common/Utils'; 17import { ProviderFeature } from '../feature/ProviderFeature'; 18import avSession from '@ohos.multimedia.avsession'; 19 20@Entry 21@Component 22struct Index { 23 @State message: string = 'Hello World' 24 @StorageLink('IsPlaying') isPlaying: boolean = false; 25 @StorageLink('CurrentPlayItem') currentPlayItem: avSession.AVQueueItem | null = null; 26 @StorageLink('CurrentAVMetadata') currentAVMetadata: avSession.AVMetadata | null = null; 27 @StorageLink('CurrentImage') currentImage: PixelMap | null = null; 28 @StorageLink('CurrentLyric') currentLyric: string = ''; 29 private providerFeature: ProviderFeature = new ProviderFeature(); 30 31 async aboutToAppear() { 32 let createAVSessionResult: Boolean = await this.providerFeature.CreateAVSession(); 33 if (!createAVSessionResult) { 34 Utils.showPrompt(`Failed to init AVSession`); 35 } 36 await this.providerFeature.RegisterListener(); 37 } 38 39 build() { 40 Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) { 41 Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) { 42 Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) { 43 Text(this.isPlaying ? $r('app.string.In_play') : $r('app.string.Not_in_play')) 44 .fontSize('20sp') 45 .fontColor('#182431') 46 .margin({ top: '55vp' }) 47 .width('80vp') 48 .height('26vp') 49 .id('PageTitle') 50 51 Image(this.currentImage ? this.currentImage : '') 52 .width('100%') 53 .margin({ top: '15vp' }) 54 .id('CurrentImage') 55 56 Text(this.currentAVMetadata!.title ? this.currentAVMetadata!.title : 'No title') 57 .width('100%') 58 .height('32vp') 59 .fontSize('24fp') 60 .fontColor('#556B89') 61 .id('Title') 62 63 Text(this.currentAVMetadata!.artist ? this.currentAVMetadata!.artist : 'No artist') 64 .width('100%') 65 .height('19vp') 66 .margin({ top: '12vp' }) 67 .fontSize('14fp') 68 .fontColor('#556B89') 69 .id('Artist') 70 71 Text(this.currentLyric ? this.currentLyric : '') 72 .width('100%') 73 .height('19vp') 74 .opacity(0.8) 75 .margin({ top: '8vp' }) 76 .fontSize('14fp') 77 .fontColor('#556B89') 78 .id('Lyric') 79 80 Flex({ 81 direction: FlexDirection.Row, 82 alignItems: ItemAlign.Center, 83 alignContent: FlexAlign.Center, 84 justifyContent: FlexAlign.Center 85 }) { 86 Button({ stateEffect: true }) { 87 Image($r('app.media.previous')) 88 } 89 .width('30vp') 90 .height('30vp') 91 .backgroundColor('#00000000') 92 .id('Previous') 93 .onClick(async () => { 94 this.providerFeature.previous(); 95 }) 96 97 Button({ stateEffect: true }) { 98 Image(this.isPlaying ? $r('app.media.pause') : $r('app.media.play')) 99 } 100 .width('64vp') 101 .height('64vp') 102 .margin({ left: '48vp' }) 103 .backgroundColor('#00000000') 104 .id('PlayOrPause') 105 .onClick(async () => { 106 if (!this.isPlaying) { 107 await this.providerFeature.play(); 108 } else { 109 await this.providerFeature.pause(); 110 } 111 }) 112 113 Button({ stateEffect: true }) { 114 Image($r('app.media.next')) 115 } 116 .width('30vp') 117 .height('30vp') 118 .margin({ left: '48vp' }) 119 .backgroundColor('#00000000') 120 .id('Next') 121 .onClick(async () => { 122 this.providerFeature.next(); 123 }) 124 } 125 .height('64vp') 126 .margin({ left: '36vp', right: '36vp' }) 127 .margin({ top: '80vp' }) 128 } 129 .height('100%') 130 .width('100%') 131 } 132 .margin({ left: '34vp', right: '34vp' }) 133 } 134 .width('100%') 135 .height('100%') 136 .backgroundImage($r('app.media.background1')) 137 .backgroundImageSize(ImageSize.Cover) 138 } 139} 140