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 {
17  Action,
18  AlbumInfo,
19  BroadCast,
20  BroadCastConstants,
21  BroadCastManager,
22  BrowserConstants,
23  ColumnSize,
24  Constants,
25  Log,
26  MultimodalInputManager,
27  ScreenManager,
28  UiUtil,
29  UserFileManagerAccess
30} from '@ohos/common';
31import { EmptyAlbumComponent } from './EmptyAlbumComponent';
32import router from '@ohos.router';
33
34const TAG: string = 'browser_AlbumGridItemNewStyle';
35
36@Extend(Image) 
37function focusSetting(id: string) {
38  .key('AlbumFocus_' + id)
39  .focusable(true)
40}
41
42interface ParamAlbumInfo {
43  item: string;
44  isFromFACard?: boolean;
45}
46
47// The item of album grid, and it's new style.
48@Component
49export struct AlbumGridItemNewStyle {
50  @State @Watch('updateCard') item: AlbumInfo = new AlbumInfo(undefined);
51  @State isEmptyAlbum: boolean = false;
52  @State isSelected: boolean = false;
53  @State selectable: boolean = true;
54  @Provide gridHeight: number = 0;
55  @Provide gridWidth: number = 0;
56  @Link bottomHeight: number;
57  @StorageLink('isSidebar') isSidebar: boolean = ScreenManager.getInstance().isSidebar();
58  @StorageLink('isHorizontal') isHorizontal: boolean = ScreenManager.getInstance().isHorizontal();
59  @Consume broadCast: BroadCast;
60  @Consume('selectedCount') selectedCount: number;
61  @Consume @Watch('onModeChange') isAlbumSetSelectedMode: boolean;
62  @Consume rightClickMenuList: Array<Action>;
63  currentRightClickMenuList: Array<Action> = [];
64  onMenuClicked: Function = (): void => {};
65  onMenuClickedForSingleItem: Function = (): void => {};
66  gridAspectRatio = Constants.CARD_ASPECT_RATIO;
67  albumCountMarginRight = Constants.ALBUM_SET_NEW_ICON_SIZE + Constants.ALBUM_SET_NEW_ICON_MARGIN * 2;
68  iconMarkAnchorX = Constants.ALBUM_SET_NEW_ICON_SIZE + Constants.ALBUM_SET_NEW_ICON_MARGIN;
69  iconMarkAnchorY = Constants.ALBUM_SET_NEW_ICON_SIZE + Constants.ALBUM_SET_NEW_ICON_MARGIN;
70  @StorageLink('deviceType') deviceType: string | undefined = AppStorage.get<string>('deviceType');
71  @State transitionId: string = '';
72  @StorageLink('isShowPhotoGridView') isShowPhotoGridView: boolean = false;
73  private appBroadCast: BroadCast = BroadCastManager.getInstance().getBroadCast();
74  private keyIndex?: number;
75  private fp2vpUnit: number = px2vp(fp2px(Constants.NUMBER_1));
76  private recycleAlbumOfPhoneHeight: number = Constants.RECYCLE_ALBUM_OF_PHONE_HEIGHT;
77  private updateCardSizeFunc: Function = (): void => this.updateCardSize();
78
79  doAnimation(): void {
80    let albumToPhotoGridDuration: number;
81    let albumToPhotoGridScaleDuration: number;
82    let albumActionBarDuration: number;
83    let photoGridActionBarDuration: number;
84    let photoGridActionBarDelay: number;
85    if (this.deviceType !== Constants.PC_DEVICE_TYPE) {
86      albumToPhotoGridDuration = BrowserConstants.PHONE_LINK_ALBUM_TO_PHOTO_GRID_DURATION;
87      albumToPhotoGridScaleDuration = BrowserConstants.PHONE_LINK_ALBUM_TO_PHOTO_GRID_SCALE_DURATION;
88      albumActionBarDuration = BrowserConstants.PHONE_LINK_ALBUM_ACTIONBAR_DURATION;
89      photoGridActionBarDuration = BrowserConstants.PHONE_LINK_IN_PHOTO_GRID_ACTIONBAR_DURATION;
90      photoGridActionBarDelay = BrowserConstants.PHONE_LINK_PHOTO_GRID_ACTIONBAR_DELAY
91    } else {
92      albumToPhotoGridDuration = BrowserConstants.PC_LINK_ALBUM_TO_PHOTO_GRID_DURATION;
93      albumToPhotoGridScaleDuration = BrowserConstants.PC_LINK_ALBUM_TO_PHOTO_GRID_SCALE_DURATION;
94      albumActionBarDuration = BrowserConstants.PC_LINK_IN_ALBUM_ACTIONBAR_DURATION;
95      photoGridActionBarDuration = BrowserConstants.PC_LINK_IN_PHOTO_GRID_ACTIONBAR_DURATION;
96      photoGridActionBarDelay = BrowserConstants.PC_LINK_PHOTO_GRID_ACTIONBAR_DELAY;
97    }
98    animateTo({
99      duration: albumToPhotoGridDuration,
100      curve: Curve.Friction,
101    }, () => {
102      AppStorage.setOrCreate<boolean>(Constants.KEY_OF_IS_SHOW_PHOTO_GRID_VIEW,!this.isShowPhotoGridView);
103      AppStorage.setOrCreate<number>(Constants.KEY_OF_SELECTED_ALBUM_INDEX, this.keyIndex ? this.keyIndex : -1);
104      AppStorage.setOrCreate<string>(Constants.KEY_OF_SELECTED_ALBUM_URI, this.item.uri);
105    })
106    animateTo({
107      duration: albumActionBarDuration,
108      curve: Curve.Sharp
109    }, () => {
110      if (AppStorage.get<string>('deviceType') !== Constants.PC_DEVICE_TYPE) {
111        AppStorage.setOrCreate<number>(Constants.KEY_OF_ALBUM_OPACITY, 0);
112      }
113      AppStorage.setOrCreate<number>(Constants.KEY_OF_ALBUM_ACTIONBAR_OPACITY, 0);
114    })
115    animateTo({
116      duration: albumActionBarDuration,
117      curve: Curve.Sharp,
118      delay: BrowserConstants.LINK_IN_PHOTO_GRID_DELAY,
119    }, () => {
120      if (AppStorage.get<string>('deviceType') !== Constants.PC_DEVICE_TYPE) {
121        AppStorage.setOrCreate<number>(Constants.KEY_OF_PHOTO_GRID_VIEW_OPACITY, 1);
122      }
123    })
124    animateTo({
125      duration: albumToPhotoGridScaleDuration,
126      curve: Curve.Friction
127    }, () => {
128      AppStorage.setOrCreate<number>(Constants.KEY_OF_ALBUM_OTHER_SCALE, BrowserConstants.Album_Scale);
129    })
130    animateTo({
131      duration: photoGridActionBarDuration,
132      delay: photoGridActionBarDelay,
133      curve: Curve.Sharp
134    }, () => {
135      AppStorage.setOrCreate<number>(Constants.KEY_OF_PHOTO_GRID_ACTIONBAR_OPACITY, 1);
136    })
137
138    if (AppStorage.get<string>('deviceType') !== Constants.PC_DEVICE_TYPE) {
139      animateTo({
140        duration: BrowserConstants.PC_LINK_IN_PHOTO_GRID_DURATION,
141        delay: BrowserConstants.LINK_IN_PHOTO_GRID_DELAY,
142        curve: Curve.Sharp
143      }, () => {
144        AppStorage.setOrCreate<number>(Constants.KEY_OF_PHOTO_GRID_VIEW_OPACITY, 1);
145      })
146      animateTo({
147        duration: BrowserConstants.PC_LINK_ALBUM_DURATION,
148        curve: Curve.Sharp
149      }, () => {
150        AppStorage.setOrCreate<number>(Constants.KEY_OF_ALBUM_OPACITY, 0);
151      })
152      animateTo({
153        duration: BrowserConstants.PC_LINK_IN_SIDEBAR_DURATION,
154        curve: Curve.Sharp
155      }, () => {
156        AppStorage.setOrCreate<number>(Constants.KEY_OF_SIDE_BAR_OPACITY, 0);
157        AppStorage.setOrCreate<number>(Constants.KEY_OF_SIDE_BAR_BOUNDARY_LINE_OPACITY, 0);
158      })
159    }
160
161    Log.info(TAG, `doanimation`);
162  }
163
164  aboutToAppear(): void {
165    Log.debug(TAG, `aboutToAppear`);
166    this.selectable = !this.item.isTrashAlbum;
167
168    // 后续phone缩略图支持横竖屏后再放开
169    if (AppStorage.get('deviceType') as string !== Constants.DEFAULT_DEVICE_TYPE) {
170      ScreenManager.getInstance().on(ScreenManager.ON_WIN_SIZE_CHANGED, this.updateCardSizeFunc);
171    }
172    let isFirstPhotoItem = AppStorage.get<boolean>(Constants.KEY_OF_IS_FIRST_PHOTO_ITEM);
173    let lastTransitionId = AppStorage.get<string>(Constants.KEY_OF_GEOMETRY_TRANSITION_ID_HEIGHT) as string;
174    if (!isFirstPhotoItem && this.item.uri === AppStorage.get<string>(Constants.KEY_OF_ALBUM_URI)) {
175      this.transitionId = lastTransitionId;
176    } else {
177      if (!this.isRecycleAlbumOfPhoneLikeDevice() && this.item.mediaItem) {
178        let transitionId = `${this.item.mediaItem.getHashCode()}_${this.item.uri}`;
179        Log.info(TAG, `transitionId: ${this.item.mediaItem.getHashCode()}_${this.item.uri}`);
180        if (lastTransitionId === transitionId) {
181          this.transitionId = transitionId;
182        }
183      }
184    }
185    Log.debug(TAG, `aboutToAppear lastTransitionId: ${lastTransitionId}, transitionId: ${this.transitionId}`);
186    this.updateCardSize();
187    this.initCurrentRightClickMenuList();
188  }
189
190  aboutToDisappear(): void {
191    // 后续phone缩略图支持横竖屏后再放开
192    if (AppStorage.get('deviceType') as string !== Constants.DEFAULT_DEVICE_TYPE) {
193      ScreenManager.getInstance().off(ScreenManager.ON_WIN_SIZE_CHANGED, this.updateCardSizeFunc);
194    }
195  }
196
197  updateCard() {
198    Log.debug(TAG, 'Album changed and update card size.');
199    this.updateCardSize();
200  }
201
202  updateCardSize(): void {
203    let sideBarWidth: number = 0;
204    let count: number = 0;
205    let currentBreakpoint = AppStorage.get<string>('currentBreakpoint');
206    if (currentBreakpoint === Constants.BREAKPOINT_LG && this.deviceType == Constants.PAD_DEVICE_TYPE) {
207      sideBarWidth = Constants.PAD_TAB_BAR_WIDTH;
208      count = UiUtil.getAlbumGridCount(true);
209    } else {
210      sideBarWidth = this.isSidebar ? Constants.TAB_BAR_WIDTH : 0;
211      count = UiUtil.getAlbumGridCount(this.isSidebar);
212    }
213    let contentWidth = ScreenManager.getInstance().getWinWidth() - sideBarWidth;
214    this.gridWidth = ((contentWidth - Constants.ALBUM_SET_MARGIN *
215      2 - (Constants.ALBUM_SET_GUTTER * (count - 1))) / count);
216    let numberHeight = Constants.TEXT_SIZE_BODY2 * this.fp2vpUnit;
217    let nameHeight = Constants.TEXT_SIZE_SUB_TITLE1 * this.fp2vpUnit;
218
219    UiUtil.getResourceNumber($r('sys.float.ohos_id_elements_margin_vertical_m')).then((value: number) => {
220      this.bottomHeight = px2vp(value) + nameHeight + Constants.NUMBER_2 + numberHeight;
221      this.gridHeight = this.gridWidth + this.bottomHeight;
222
223      Log.info(TAG, 'updateCardSize gridWidth : ' + this.gridWidth + ',  gridHeight : ' + this.gridHeight);
224
225      AppStorage.setOrCreate(Constants.KEY_OF_ALBUM_HEIGHT, this.gridHeight);
226      AppStorage.setOrCreate(Constants.KEY_OF_ALBUM_WIDTH, this.gridWidth);
227    });
228
229  }
230
231  onModeChange(): void {
232    let multiIndex = this.currentRightClickMenuList.indexOf(Action.MULTISELECT);
233    if (this.isAlbumSetSelectedMode) {
234      // 移除多选项
235      this.currentRightClickMenuList.splice(multiIndex, 1);
236    } else {
237      this.isSelected = false;
238      // 添加多选项到第1个位置
239      if (multiIndex < 0) {
240        this.currentRightClickMenuList.splice(0, 0, Action.MULTISELECT);
241      }
242    }
243  }
244
245  selectStateChange() {
246    Log.info(TAG, `change selected.`);
247    if (!this.isAlbumSetSelectedMode) {
248      this.isAlbumSetSelectedMode = true;
249    }
250    if (this.selectable) {
251      let newState: boolean = !this.isSelected;
252      this.broadCast.emit(BroadCastConstants.SELECT,
253        [this.item.uri, newState, this.item.isSystemAlbum, this.item.isSystemAlbum, (): void => {
254          Log.info(TAG, 'enter callback');
255          this.isSelected = newState;
256        }]);
257    }
258  }
259
260  initCurrentRightClickMenuList() {
261    this.currentRightClickMenuList = [];
262    if (!this.isAlbumSetSelectedMode) {
263      this.currentRightClickMenuList.push(Action.MULTISELECT);
264    }
265    if (!this.item.isSystemAlbum) {
266      this.currentRightClickMenuList.push(Action.RENAME);
267      this.currentRightClickMenuList.push(Action.DELETE);
268    }
269  }
270
271  @Builder
272  RightClickMenuBuilder() {
273    Column() {
274      ForEach(this.isAlbumSetSelectedMode && this.isSelected ? this.rightClickMenuList : this.currentRightClickMenuList,
275        (menu: Action) => {
276          Text(this.changeTextResToPlural(menu))
277            .width('100%')
278            .height($r('app.float.menu_height'))
279            .fontColor(menu.fillColor)
280            .fontSize($r('sys.float.ohos_id_text_size_body1'))
281            .fontWeight(FontWeight.Regular)
282            .maxLines(2)
283            .textOverflow({ overflow: TextOverflow.Ellipsis })
284            .onClick(() => {
285              Log.info(TAG, 'on right click menu, action: ' + menu.actionID);
286              if (menu == Action.MULTISELECT) {
287                this.selectStateChange();
288              } else {
289                // 1.当鼠标对着被选中的项按右键时，菜单中的功能，针对所有被选中的项做处理
290                // 2.当鼠标对着未被选中的项按右键时，菜单中的功能，仅针对当前项处理，其他被选中的项不做任何处理
291                if (this.isAlbumSetSelectedMode && this.isSelected) {
292                  this.onMenuClicked && this.onMenuClicked(menu);
293                } else {
294                  this.onMenuClickedForSingleItem && this.onMenuClickedForSingleItem(menu, this.item);
295                }
296              }
297            })
298        }, (menu: Action) => menu.actionID.toString())
299    }
300    .width(ScreenManager.getInstance().getColumnsWidth(ColumnSize.COLUMN_ONE_POINT_FIVE))
301    .borderRadius($r('sys.float.ohos_id_corner_radius_card'))
302    .padding({
303      top: $r('app.float.menu_padding_vertical'),
304      bottom: $r('app.float.menu_padding_vertical'),
305      left: $r('app.float.menu_padding_horizontal'),
306      right: $r('app.float.menu_padding_horizontal')
307    })
308    .backgroundColor(Color.White)
309    .margin({
310      right: $r('sys.float.ohos_id_max_padding_end'),
311      bottom: $r('app.float.menu_margin_bottom')
312    })
313  }
314
315  isRecycleAlbumOfPhoneLikeDevice(): boolean {
316    return this.deviceType != Constants.PC_DEVICE_TYPE && this.item.isTrashAlbum;
317  }
318
319  @Builder
320  recycleCard() {
321    Flex({
322      direction: FlexDirection.Row,
323      justifyContent: FlexAlign.Center,
324      alignItems: ItemAlign.Center
325    }) {
326      Image($r('app.media.ic_gallery_public_delete_line'))
327        .width($r('app.float.phone_recycle_ico_size'))
328        .height($r('app.float.phone_recycle_ico_size'))
329        .fillColor($r('sys.color.ohos_id_color_button_normal'))
330        .focusSetting(this.item.uri)
331    }
332    .width(this.gridWidth)
333    .height(this.gridWidth)
334    .backgroundColor($r('sys.color.ohos_id_color_button_normal'))
335    .border({ radius: $r('sys.float.ohos_id_corner_radius_default_m')
336    })
337  }
338
339  @Builder
340  normalAlbumCard() {
341    Image(this.item.coverUri)
342      .border({ radius: $r('sys.float.ohos_id_corner_radius_default_m') })
343      .width('100%')
344      .height('100%')
345      .objectFit(ImageFit.Cover)
346      .onError(() => {
347        Log.debug(TAG, 'album is empty or its cover is error');
348        this.isEmptyAlbum = true;
349      })
350      .focusSetting(this.item.uri)
351  }
352
353  @Builder
354  albumCardInfo() {
355    Column() {
356      Text(this.getDisplayName(this.item))
357        .key('AlbumCardDisplayName')
358        .margin({ right: $r('app.float.album_set_name_margin_right') })
359        .textOverflow({ overflow: TextOverflow.Ellipsis })
360        .maxLines(1)
361        .fontWeight(FontWeight.Medium)
362        .fontSize($r('sys.float.ohos_id_text_size_body2'))
363        .fontColor($r('sys.color.ohos_id_color_text_primary'))
364
365      Text(String(this.item.count))
366        .key('AlbumCardItemCount')
367        .margin({ right: this.albumCountMarginRight, top: $r('app.float.photo_grid_gap') })
368        .textOverflow({ overflow: TextOverflow.Ellipsis })
369        .maxLines(1)
370        .fontColor($r('sys.color.ohos_id_color_text_secondary'))
371        .fontWeight(FontWeight.Regular)
372        .fontSize($r('sys.float.ohos_id_text_size_body3'))
373    }
374    .width('100%')
375    .margin({ bottom: this.gridWidth - this.gridHeight })
376    .alignItems(HorizontalAlign.Start)
377    .justifyContent(FlexAlign.End)
378    .padding({
379      left: $r('sys.float.ohos_id_elements_margin_horizontal_m')
380    })
381  }
382
383  @Builder
384  selectedModeCheckBox() {
385    Image(this.isSelected ? $r('app.media.ic_checkbox_on') : $r('app.media.ic_checkbox_off_overlay'))
386      .height($r('app.float.album_set_new_style_icon'))
387      .aspectRatio(1)
388      .position({ x: '100%', y: '100%' })
389      .markAnchor({ x: this.iconMarkAnchorX, y: this.iconMarkAnchorY })
390  }
391
392  @Builder
393  favorAndVideoAlbumIcoDisplay() {
394    Image(this.item.isFavorAlbum ? $r('app.media.ic_favorite_overlay') : $r('app.media.ic_video'))
395      .height($r('app.float.album_set_new_style_icon'))
396      .aspectRatio(1)
397      .position({ x: '0%', y: '100%' })
398      .markAnchor({ x: 0 - Constants.ALBUM_SET_NEW_ICON_MARGIN, y: this.iconMarkAnchorY })
399  }
400
401  @Builder
402  maskLayer() {
403    Image($r('app.media.gradient_mask_layer'))
404      .height('50%')
405      .width('100%')
406      .border({ radius: $r('sys.float.ohos_id_corner_radius_default_m') })
407  }
408
409  @Builder
410  selectedModeBg() {
411    Column()
412      .height(this.gridWidth)
413      .width(this.gridWidth)
414      .border({ radius: $r('sys.float.ohos_id_corner_radius_default_m') })
415      .backgroundColor(this.isSelected && this.isAlbumSetSelectedMode && this.selectable
416        ? $r('app.color.item_selection_bg_color') : $r('app.color.transparent'))
417  }
418
419  build() {
420    Column() {
421      Stack({ alignContent: Alignment.Bottom }) {
422        if (this.isEmptyAlbum) {
423          EmptyAlbumComponent()
424        }
425
426        if (this.item.isTrashAlbum) {
427          this.recycleCard()
428        } else {
429          this.normalAlbumCard()
430        }
431
432        if (!this.isSelected && (this.item.isFavorAlbum || this.item.isVideoAlbum ||
433          (this.isAlbumSetSelectedMode && this.selectable))) {
434          this.maskLayer()
435        }
436
437        this.albumCardInfo()
438
439        if (this.item.isFavorAlbum || this.item.isVideoAlbum) {
440          this.favorAndVideoAlbumIcoDisplay()
441        }
442
443        this.selectedModeBg()
444
445        if (this.isAlbumSetSelectedMode && this.selectable) {
446          this.selectedModeCheckBox()
447        }
448      }
449    }
450    .width(this.gridWidth)
451    .height(this.gridWidth)
452    .borderRadius($r('sys.float.ohos_id_corner_radius_default_m'))
453    .geometryTransition(this.transitionId)
454    .gesture(
455      LongPressGesture()
456        .onAction(() => {
457          this.selectStateChange();
458        })
459    )
460    .onClick(() => {
461      if (!this.isRecycleAlbumOfPhoneLikeDevice() && this.item.mediaItem) {
462        this.transitionId = `${this.item.mediaItem?.getHashCode()}_${this.item.uri}`;
463      }
464      this.albumOnClick();
465    })
466    .onKeyEvent((event?: KeyEvent) => {
467      if (event != null && KeyType.Up == event.type) {
468        switch (event.keyCode) {
469          case MultimodalInputManager.KEY_CODE_KEYBOARD_ENTER:
470            this.albumOnClick();
471            break;
472          default:
473            break;
474        }
475      }
476    })
477  }
478
479  private changeTextResToPlural(action: Action): Resource {
480    let textStr: Resource = action.textRes;
481    if (Action.RECOVER.equals(action)) {
482      textStr = this.isSelected
483        ? $r('app.plural.action_recover_count', this.selectedCount, this.selectedCount)
484        : $r('app.string.action_recover');
485    } else if (Action.DELETE.equals(action)) {
486      textStr = this.isSelected
487        ? $r('app.plural.action_delete_count', this.selectedCount, this.selectedCount)
488        : $r('app.string.action_delete');
489    } else if (Action.MOVE.equals(action)) {
490      textStr = this.isSelected
491        ? $r('app.plural.move_to_album_count', this.selectedCount, this.selectedCount)
492        : $r('app.string.move_to_album');
493    } else if (Action.ADD.equals(action)) {
494      textStr = this.isSelected
495        ? $r('app.plural.add_to_album_count', this.selectedCount, this.selectedCount)
496        : $r('app.string.add_to_album');
497    }
498    return textStr;
499  }
500
501  private albumOnClick() {
502    if (this.isAlbumSetSelectedMode) {
503      this.selectStateChange();
504    } else {
505      Log.info(TAG, `After onClick, MediaSet is: ${JSON.stringify(this.item)}`);
506      if (this.item.isTrashAlbum && (AppStorage.get<string>('deviceType') !== Constants.PC_DEVICE_TYPE)) {
507        router.pushUrl({
508          url: 'pages/PhotoGridPage',
509          params: {
510            item: JSON.stringify(this.item)
511          }
512        });
513      } else if (!this.isShowPhotoGridView) {
514        let albumInfo: ParamAlbumInfo = { item: JSON.stringify(this.item) }
515        AppStorage.setOrCreate<ParamAlbumInfo>(Constants.KEY_OF_PHOTO_GRID_VIEW_ALBUM_ITEM, albumInfo);
516        AppStorage.setOrCreate(Constants.KEY_OF_GEOMETRY_TRANSITION_ID_HEIGHT, this.transitionId);
517        AppStorage.setOrCreate(Constants.KEY_OF_ALBUM_URI, this.item.uri);
518        this.doAnimation();
519      } else {
520        Log.info(TAG, `PhotoGridView is show, has no focus, Users need to manually activate the focus.`);
521      }
522    }
523  }
524
525  private showRightClickPopup(): boolean {
526    if (this.isAlbumSetSelectedMode && this.isSelected) {
527      Log.debug(TAG, `Album ${this.item?.albumName} length1: ${this.rightClickMenuList.length}`);
528      return this.rightClickMenuList.length > 0
529    } else {
530      Log.debug(TAG, `Album ${this.item?.albumName} length2: ${this.currentRightClickMenuList.length}`);
531      return this.currentRightClickMenuList.length > 0
532    }
533  }
534
535  private getDisplayName(albumInfo : AlbumInfo): Resource | string {
536    let res = UiUtil.getDisplayNameResourceByAlbumInfo(albumInfo);
537    if (res != null) {
538      return res;
539    }
540    return this.item.albumName;
541  } 
542}