| {{t('user-header')}} | \r\n{{t('page-read-header')}} | \r\n{{t('date-created-header')}} | \r\n{{t('date-updated-header')}} | \r\n\r\n
|---|---|---|---|
| \r\n {{progressEvents[idx].userName | sentenceCase}}\r\n | \r\n\r\n @if(editMode[idx]) {\r\n \r\n } @else {\r\n {{progressEvents[idx].pagesRead}}\r\n }\r\n | \r\n\r\n {{progressEvents[idx].createdUtc}}\r\n | \r\n\r\n {{progressEvents[idx].lastModifiedUtc}}\r\n | \r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n\r\n\r\n
\r\n - \r\n
- \r\n {{t(tabs[TabID.General].title)}}\r\n
\r\n \r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n \r\n\r\n0; else noSummary\">\r\n \r\n\r\n \r\n {{t('no-summary')}}\r\n \r\n\r\n\r\n \r\n\r\n - \r\n {{t(tabs[TabID.Metadata].title)}}\r\n
\r\n \r\n\r\n \r\n\r\n - \r\n {{t(tabs[TabID.Progress].title)}}\r\n
\r\n \r\n\r\n \r\n\r\n - \r\n {{t(tabs[TabID.Cover].title)}}\r\n
\r\n \r\n\r\n \r\n\r\n - \r\n {{t(tabs[TabID.Files].title)}}\r\n
\r\n @if (!utilityService.isChapter(data)) {\r\n \r\n{{utilityService.formatChapterName(libraryType) + 's'}}
\r\n }\r\n- \r\n
- \r\n \r\n
\r\n \r\n \r\n\r\n\r\n \r\n \r\n
\r\n\r\n \r\n {{utilityService.formatChapterName(libraryType, true, false) }} {{formatChapterNumber(chapter)}}\r\n \r\n \r\n \r\n 0 && chapter.pagesRead < chapter.pages\">{{chapter.pagesRead}} / {{chapter.pages}}\r\n {{t('unread') | uppercase}}\r\n {{t('read') | uppercase}}\r\n \r\n \r\n{{t('files')}} \r\n- \r\n @for (file of chapter.files; track file.id) {\r\n
- \r\n {{file.filePath}}\r\n \r\n\r\n\r\n {{t('pages')}} {{file.pages | number:''}}\r\n\r\n @if (data.hasOwnProperty('created')) {\r\n\r\n {{t('added')}} {{file.created | date: 'short' | defaultDate}}\r\n\r\n }\r\n\r\n {{t('size')}} {{file.bytes | bytes}}\r\n\r\n \r\n }\r\n
\r\n - \r\n {{file.filePath}}\r\n
\r\n - \r\n \r\n
\r\n
\r\n\r\n
\r\n {{t('title')}}
\r\n \r\n\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n","import {\r\n ChangeDetectionStrategy,\r\n Component,\r\n ElementRef, inject,\r\n Input,\r\n ViewChild\r\n} from '@angular/core';\r\nimport {CommonModule, NgOptimizedImage} from '@angular/common';\r\nimport {ExternalSeries} from \"../../_models/series-detail/external-series\";\r\nimport {RouterLinkActive} from \"@angular/router\";\r\nimport {ImageComponent} from \"../../shared/image/image.component\";\r\nimport {NgbOffcanvas, NgbProgressbar, NgbTooltip} from \"@ng-bootstrap/ng-bootstrap\";\r\nimport {ReactiveFormsModule} from \"@angular/forms\";\r\nimport {TranslocoDirective} from \"@ngneat/transloco\";\r\nimport {SeriesPreviewDrawerComponent} from \"../../_single-module/series-preview-drawer/series-preview-drawer.component\";\r\nimport {ProviderImagePipe} from \"../../_pipes/provider-image.pipe\";\r\nimport {SafeHtmlPipe} from \"../../_pipes/safe-html.pipe\";\r\n\r\n@Component({\r\n selector: 'app-external-series-card',\r\n standalone: true,\r\n imports: [CommonModule, ImageComponent, NgbProgressbar, NgbTooltip, ReactiveFormsModule, RouterLinkActive, TranslocoDirective, NgOptimizedImage, ProviderImagePipe, SafeHtmlPipe],\r\n templateUrl: './external-series-card.component.html',\r\n styleUrls: ['./external-series-card.component.scss'],\r\n changeDetection: ChangeDetectionStrategy.OnPush\r\n})\r\nexport class ExternalSeriesCardComponent {\r\n @Input({required: true}) data!: ExternalSeries;\r\n /**\r\n * When clicking on the series, instead of opening, opens a preview drawer\r\n */\r\n @Input() previewOnClick: boolean = false;\r\n @ViewChild('link', {static: false}) link!: ElementRef\r\n
\r\n \r\n
\r\n\r\n \r\n
\r\n @if (summary && summary.length > 0) {\r\n
\r\n \r\n
\r\n @if (summary && summary.length > 0) {\r\n \r\n
\r\n }\r\n \r\n \r\n\r\n @if (data.name.length > 0) {\r\n
\r\n\r\n \r\n
\r\n }\r\n\r\n \r\n \r\n ![\"\"]()
\r\n {{data.name}}\r\n \r\n
\r\n {{t('open-external')}}\r\n \r\n
\r\n\r\n\r\n
\r\n 0\">
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n\r\n 0\">\r\n \r\n
\r\n \r\n
\r\n\r\n 0}\" *ngIf=\"Title !== '' && showTitle\">{{Title}}
\r\n\r\n
\r\n \r\n
\r\n \r\n {{t('click-to-show')}}\r\n \r\n \r\n \r\n
\r\n\r\n
\r\n\r\n \r\n {{t('user-review', {username: review.username})}}\r\n @if(review.isExternal) {\r\n
\r\n \r\n
\r\n \r\n {{t('user-review', {username: review.username})}}\r\n @if(review.isExternal) {\r\n ![\"\"]()
\r\n }\r\n
\r\n \r\n \r\n @if (review.tagline) {\r\n \r\n }\r\n \r\n
\r\n \r\n \r\n
\r\n\r\n
\r\n \r\n \r\n @if (isMyReview) {\r\n
\r\n \r\n \r\n {{t('your-review')}}\r\n
\r\n }\r\n \r\n
\r\n\r\n \r\n
\r\n \r\n {{review.isExternal ? t('external-review') : t('local-review')}}\r\n
\r\n\r\n
\r\n
\r\n \r\n @if (isMyReview) {\r\n \r\n ![\"\"]()
\r\n {{review.username}}\r\n } @else {\r\n ![\"\"]()
\r\n }\r\n\r\n {{(isMyReview ? '' : review.username | defaultValue:'')}}\r\n
\r\n @if (review.isExternal){\r\n {{t('rating-percentage', {r: review.score})}}\r\n }\r\n \r\n
\r\n\r\n Breakpoint.Mobile ? 'md-popover' : 'lg-popover'\">\r\n \r\n\r\n {{userRating * 20}} \r\n N/A \r\n 0\"> + {{overallRating}} \r\n 0\">% \r\n \r\n
\r\n\r\n \r\n \r\n ![\"\"]()
\r\n {{rating.averageScore}}%\r\n \r\n
\r\n \r\n
\r\n {{rating.favoriteCount}}
\r\n Entry\r\n\r\n 0\">\r\n \r\n\r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n\r\n \r\n \r\n\r\n \r\n \r\n\r\n \r\n \r\n \r\n\r\n \r\n \r\n\r\n \r\n 0\">\r\n \r\n\r\n \r\n \r\n \r\n\r\n 0 || series.format !== MangaFormat.EPUB\">\r\n \r\n\r\n \r\n \r\n \r\n \r\n
\r\n\r\n\r\n \r\n {{seriesMetadata.releaseYear}}\r\n \r\n
\r\n \r\n \r\n \r\n {{this.seriesMetadata.ageRating | ageRating}}\r\n \r\n
\r\n \r\n \r\n \r\n {{seriesMetadata.language | defaultValue:'en' | languageName | async}}\r\n \r\n
\r\n \r\n \r\n \r\n \r\n {{pubStatus}}\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n {{ isScrobbling ? t('on') : t('off') }}\r\n \r\n \r\n {{t('disabled')}}\r\n \r\n\r\n \r\n
\r\n \r\n \r\n \r\n {{series.format | mangaFormat}}\r\n \r\n
\r\n \r\n \r\n \r\n {{series.latestReadDate | timeAgo}}\r\n \r\n
\r\n \r\n \r\n \r\n {{t('words-count', {num: series.wordCount | compactNumber})}}\r\n \r\n
\r\n \r\n \r\n \r\n {{t('pages-count', {num: series.pages | compactNumber})}}\r\n \r\n
\r\n \r\n \r\n \r\n {{t('less-than-hour')}} \r\n \r\n {{readingTime.minHours}}{{readingTime.maxHours !== readingTime.minHours ? ('-' + readingTime.maxHours) : ''}} {{readingTime.minHours > 1 ? t('hours') : t('hour')}}\r\n \r\n \r\n
\r\n \r\n \r\n ~{{readingTimeLeft.avgHours}} {{readingTimeLeft.avgHours > 1 ? t('hours') : t('hour')}}\r\n \r\n
\r\n ');\r\n this.cdRef.markForCheck();\r\n }\r\n\r\n toggleView() {\r\n this.isCollapsed = !this.isCollapsed;\r\n this.cdRef.markForCheck();\r\n }\r\n\r\n handleGoTo(event: {queryParamName: FilterField, filter: any}) {\r\n this.goTo(event.queryParamName, event.filter);\r\n }\r\n\r\n goTo(queryParamName: FilterField, filter: any) {\r\n this.filterUtilityService.applyFilter(['library', this.series.libraryId], queryParamName,\r\n FilterComparison.Equal, filter).subscribe();\r\n }\r\n\r\n navigate(basePage: string, id: number) {\r\n this.router.navigate([basePage, id]);\r\n }\r\n}\r\n","
\r\n = Breakpoint.Desktop ? 1000 : 250\"> \r\n
\r\n\r\n \r\n \r\n\r\n\r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n {{item.name}}\r\n \r\n \r\n\r\n \r\n \r\n {{item.name}}\r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n {{item.name}}\r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n\r\n
\r\n\r\n \r\n\r\n \r\n \r\n\r\n
\r\n","import {\r\n AsyncPipe,\r\n DecimalPipe,\r\n DOCUMENT,\r\n NgClass,\r\n NgFor,\r\n NgIf,\r\n NgOptimizedImage,\r\n NgStyle,\r\n NgSwitch,\r\n NgSwitchCase,\r\n NgTemplateOutlet\r\n} from '@angular/common';\r\nimport {\r\n AfterContentChecked,\r\n ChangeDetectionStrategy,\r\n ChangeDetectorRef,\r\n Component,\r\n DestroyRef,\r\n ElementRef,\r\n HostListener,\r\n Inject,\r\n inject,\r\n OnInit,\r\n ViewChild\r\n} from '@angular/core';\r\nimport {FormControl, FormGroup, ReactiveFormsModule} from '@angular/forms';\r\nimport {Title} from '@angular/platform-browser';\r\nimport {ActivatedRoute, Router} from '@angular/router';\r\nimport {\r\n NgbDropdown,\r\n NgbDropdownItem,\r\n NgbDropdownMenu,\r\n NgbDropdownToggle,\r\n NgbModal,\r\n NgbNav,\r\n NgbNavChangeEvent,\r\n NgbNavContent,\r\n NgbNavItem,\r\n NgbNavLink,\r\n NgbNavOutlet,\r\n NgbOffcanvas,\r\n NgbProgressbar,\r\n NgbTooltip\r\n} from '@ng-bootstrap/ng-bootstrap';\r\nimport {ToastrService} from 'ngx-toastr';\r\nimport {catchError, forkJoin, Observable, of} from 'rxjs';\r\nimport {map, take} from 'rxjs/operators';\r\nimport {BulkSelectionService} from 'src/app/cards/bulk-selection.service';\r\nimport {CardDetailDrawerComponent} from 'src/app/cards/card-detail-drawer/card-detail-drawer.component';\r\nimport {\r\n EditSeriesModalCloseResult,\r\n EditSeriesModalComponent\r\n} from 'src/app/cards/_modals/edit-series-modal/edit-series-modal.component';\r\nimport {TagBadgeCursor} from 'src/app/shared/tag-badge/tag-badge.component';\r\nimport {DownloadEvent, DownloadService} from 'src/app/shared/_services/download.service';\r\nimport {KEY_CODES, UtilityService} from 'src/app/shared/_services/utility.service';\r\nimport {Chapter, LooseLeafOrDefaultNumber, SpecialVolumeNumber} from 'src/app/_models/chapter';\r\nimport {Device} from 'src/app/_models/device/device';\r\nimport {ScanSeriesEvent} from 'src/app/_models/events/scan-series-event';\r\nimport {SeriesRemovedEvent} from 'src/app/_models/events/series-removed-event';\r\nimport {LibraryType} from 'src/app/_models/library/library';\r\nimport {ReadingList} from 'src/app/_models/reading-list';\r\nimport {Series} from 'src/app/_models/series';\r\nimport {RelatedSeries} from 'src/app/_models/series-detail/related-series';\r\nimport {RelationKind} from 'src/app/_models/series-detail/relation-kind';\r\nimport {SeriesMetadata} from 'src/app/_models/metadata/series-metadata';\r\nimport {User} from 'src/app/_models/user';\r\nimport {Volume} from 'src/app/_models/volume';\r\nimport {AccountService} from 'src/app/_services/account.service';\r\nimport {Action, ActionFactoryService, ActionItem} from 'src/app/_services/action-factory.service';\r\nimport {ActionService} from 'src/app/_services/action.service';\r\nimport {DeviceService} from 'src/app/_services/device.service';\r\nimport {ImageService} from 'src/app/_services/image.service';\r\nimport {LibraryService} from 'src/app/_services/library.service';\r\nimport {EVENTS, MessageHubService} from 'src/app/_services/message-hub.service';\r\nimport {NavService} from 'src/app/_services/nav.service';\r\nimport {ReaderService} from 'src/app/_services/reader.service';\r\nimport {ReadingListService} from 'src/app/_services/reading-list.service';\r\nimport {ScrollService} from 'src/app/_services/scroll.service';\r\nimport {SeriesService} from 'src/app/_services/series.service';\r\nimport {\r\n ReviewSeriesModalCloseAction,\r\n ReviewSeriesModalCloseEvent,\r\n ReviewSeriesModalComponent\r\n} from '../../../_single-module/review-series-modal/review-series-modal.component';\r\nimport {PageLayoutMode} from 'src/app/_models/page-layout-mode';\r\nimport {takeUntilDestroyed} from \"@angular/core/rxjs-interop\";\r\nimport {UserReview} from \"../../../_single-module/review-card/user-review\";\r\nimport {LoadingComponent} from '../../../shared/loading/loading.component';\r\nimport {ExternalListItemComponent} from '../../../cards/external-list-item/external-list-item.component';\r\nimport {ExternalSeriesCardComponent} from '../../../cards/external-series-card/external-series-card.component';\r\nimport {SeriesCardComponent} from '../../../cards/series-card/series-card.component';\r\nimport {EntityTitleComponent} from '../../../cards/entity-title/entity-title.component';\r\nimport {ListItemComponent} from '../../../cards/list-item/list-item.component';\r\nimport {CardItemComponent} from '../../../cards/card-item/card-item.component';\r\nimport {VirtualScrollerModule} from '@iharbeck/ngx-virtual-scroller';\r\nimport {BulkOperationsComponent} from '../../../cards/bulk-operations/bulk-operations.component';\r\nimport {ReviewCardComponent} from '../../../_single-module/review-card/review-card.component';\r\nimport {CarouselReelComponent} from '../../../carousel/_components/carousel-reel/carousel-reel.component';\r\nimport {SeriesMetadataDetailComponent} from '../series-metadata-detail/series-metadata-detail.component';\r\nimport {ImageComponent} from '../../../shared/image/image.component';\r\nimport {TagBadgeComponent} from '../../../shared/tag-badge/tag-badge.component';\r\nimport {\r\n SideNavCompanionBarComponent\r\n} from '../../../sidenav/_components/side-nav-companion-bar/side-nav-companion-bar.component';\r\nimport {translate, TranslocoDirective, TranslocoService} from \"@ngneat/transloco\";\r\nimport {CardActionablesComponent} from \"../../../_single-module/card-actionables/card-actionables.component\";\r\nimport {ExternalSeries} from \"../../../_models/series-detail/external-series\";\r\nimport {\r\n SeriesPreviewDrawerComponent\r\n} from \"../../../_single-module/series-preview-drawer/series-preview-drawer.component\";\r\nimport {PublicationStatus} from \"../../../_models/metadata/publication-status\";\r\nimport {NextExpectedChapter} from \"../../../_models/series-detail/next-expected-chapter\";\r\nimport {NextExpectedCardComponent} from \"../../../cards/next-expected-card/next-expected-card.component\";\r\nimport {ProviderImagePipe} from \"../../../_pipes/provider-image.pipe\";\r\nimport {MetadataService} from \"../../../_services/metadata.service\";\r\nimport {Rating} from \"../../../_models/rating\";\r\n\r\ninterface RelatedSeriesPair {\r\n series: Series;\r\n relation: RelationKind;\r\n}\r\n\r\nenum TabID {\r\n Related = 0,\r\n Specials = 1,\r\n Storyline = 2,\r\n Volumes = 3,\r\n Chapters = 4,\r\n Recommendations = 5\r\n}\r\n\r\ninterface StoryLineItem {\r\n chapter?: Chapter;\r\n volume?: Volume;\r\n isChapter: boolean;\r\n}\r\n\r\n@Component({\r\n selector: 'app-series-detail',\r\n templateUrl: './series-detail.component.html',\r\n styleUrls: ['./series-detail.component.scss'],\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n standalone: true,\r\n imports: [NgIf, SideNavCompanionBarComponent, CardActionablesComponent, ReactiveFormsModule, NgStyle,\r\n TagBadgeComponent, ImageComponent, NgbTooltip, NgbProgressbar, NgbDropdown, NgbDropdownToggle, NgbDropdownMenu,\r\n NgbDropdownItem, SeriesMetadataDetailComponent, CarouselReelComponent, ReviewCardComponent, BulkOperationsComponent,\r\n NgbNav, NgbNavItem, NgbNavLink, NgbNavContent, VirtualScrollerModule, NgFor, CardItemComponent, ListItemComponent,\r\n EntityTitleComponent, SeriesCardComponent, ExternalSeriesCardComponent, ExternalListItemComponent, NgbNavOutlet,\r\n LoadingComponent, DecimalPipe, TranslocoDirective, NgTemplateOutlet, NgSwitch, NgSwitchCase, NextExpectedCardComponent,\r\n NgClass, NgOptimizedImage, ProviderImagePipe, AsyncPipe]\r\n})\r\nexport class SeriesDetailComponent implements OnInit, AfterContentChecked {\r\n\r\n private readonly destroyRef = inject(DestroyRef);\r\n private readonly route = inject(ActivatedRoute);\r\n private readonly seriesService = inject(SeriesService);\r\n private readonly metadataService = inject(MetadataService);\r\n private readonly router = inject(Router);\r\n private readonly modalService = inject(NgbModal);\r\n private readonly toastr = inject(ToastrService);\r\n private readonly accountService = inject(AccountService);\r\n private readonly actionFactoryService = inject(ActionFactoryService);\r\n private readonly libraryService = inject(LibraryService);\r\n private readonly titleService = inject(Title);\r\n private readonly downloadService = inject(DownloadService);\r\n private readonly actionService = inject(ActionService);\r\n private readonly messageHub = inject(MessageHubService);\r\n private readonly readingListService = inject(ReadingListService);\r\n private readonly offcanvasService = inject(NgbOffcanvas);\r\n private readonly cdRef = inject(ChangeDetectorRef);\r\n private readonly scrollService = inject(ScrollService);\r\n private readonly deviceService = inject(DeviceService);\r\n private readonly translocoService = inject(TranslocoService);\r\n\r\n protected readonly bulkSelectionService = inject(BulkSelectionService);\r\n protected readonly utilityService = inject(UtilityService);\r\n protected readonly imageService = inject(ImageService);\r\n protected readonly navService = inject(NavService);\r\n protected readonly readerService = inject(ReaderService);\r\n protected readonly LibraryType = LibraryType;\r\n protected readonly PageLayoutMode = PageLayoutMode;\r\n protected readonly TabID = TabID;\r\n protected readonly TagBadgeCursor = TagBadgeCursor;\r\n protected readonly LooseLeafOrSpecialNumber = LooseLeafOrDefaultNumber;\r\n protected readonly SpecialVolumeNumber = SpecialVolumeNumber;\r\n\r\n @ViewChild('scrollingBlock') scrollingBlock: ElementRef\r\n {{title}}\r\n
\r\n\r\n @if (series) {\r\n \r\n \r\n \r\n
\r\n \r\n @if (series.localizedName !== series.name) {\r\n \r\n \r\n }\r\n\r\n\r\n \r\n \r\n\r\n\r\n \r\n }\r\n\r\n
\r\n\r\n \r\n
\r\n {{series.localizedName}}
\r\n\r\n
\r\n \r\n
\r\n {{t('page-settings-title')}}
\r\n \r\n\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n\r\n @if (series) {\r\n \r\n @if (unreadCount > 0 && unreadCount !== totalCount) {\r\n
\r\n \r\n {{unreadCount}} \r\n
\r\n }\r\n\r\n \r\n {{t('continue-from', {title: ContinuePointTitle})}}\r\n
\r\n }\r\n \r\n
\r\n\r\n \r\n
\r\n\r\n @if (seriesMetadata) {\r\n \r\n
\r\n\r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n @if (isAdmin) {\r\n \r\n \r\n
\r\n }\r\n\r\n \r\n
\r\n\r\n @if (isAdmin || hasDownloadingRole) {\r\n \r\n
\r\n \r\n @if (download$ | async; as download) {\r\n \r\n } @else {\r\n \r\n }\r\n
\r\n }\r\n\r\n \r\n
\r\n }\r\n\r\n \r\n 0 ? 'pen' : 'plus'}}\"\r\n [clickableTitle]=\"true\" (sectionClick)=\"openReviewModal()\">\r\n \r\n \r\n \r\n
\r\n - \r\n\r\n @if (showStorylineTab) {\r\n
- \r\n {{t('storyline-tab')}}\r\n
\r\n \r\n\r\n\r\n @switch (renderMode) {\r\n @case (PageLayoutMode.Cards) {\r\n \r\n\r\n @for(item of scroll.viewPortItems; let idx = $index; track item.id + '_' + item.pagesRead) {\r\n @if (item.isChapter) {\r\n\r\n }\r\n @case (PageLayoutMode.List) {\r\n @for(item of scroll.viewPortItems; let idx = $index; track item.id + '_' + item.pagesRead) {\r\n @if (item.isChapter) {\r\n\r\n } @else {\r\n \r\n }\r\n }\r\n\r\n \r\n \r\n } @else {\r\n \r\n }\r\n }\r\n }\r\n }\r\n\r\n \r\n }\r\n\r\n\r\n @if (showVolumeTab) {\r\n - \r\n {{UseBookLogic ? t('books-tab') : t('volumes-tab')}}\r\n
\r\n\r\n \r\n\r\n\r\n @switch (renderMode) {\r\n @case (PageLayoutMode.Cards) {\r\n \r\n\r\n @for (item of scroll.viewPortItems; let idx = $index; track item.id + '_' + item.pagesRead) {\r\n\r\n }\r\n @case (PageLayoutMode.List) {\r\n @for (item of scroll.viewPortItems; let idx = $index; track item.id + '_' + item.pagesRead) {\r\n\r\n }\r\n \r\n \r\n }\r\n }\r\n }\r\n \r\n }\r\n\r\n @if (showChapterTab) {\r\n - \r\n {{utilityService.formatChapterName(libraryType) + 's'}}\r\n
\r\n \r\n\r\n @switch (renderMode) {\r\n @case (PageLayoutMode.Cards) {\r\n \r\n\r\n @for (item of scroll.viewPortItems; let idx = $index; track item.id + '_' + item.pagesRead) {\r\n\r\n }\r\n @case (PageLayoutMode.List) {\r\n @for (item of scroll.viewPortItems; let idx = $index; track item.id + '_' + item.pagesRead) {\r\n\r\n }\r\n \r\n \r\n }\r\n }\r\n }\r\n \r\n }\r\n\r\n @if (hasSpecials) {\r\n - \r\n {{t('specials-tab')}}\r\n
\r\n \r\n\r\n @switch (renderMode) {\r\n @case (PageLayoutMode.Cards) {\r\n \r\n\r\n @for(item of scroll.viewPortItems; let idx = $index; track item.id + '_' + item.pagesRead) {\r\n\r\n }\r\n @case (PageLayoutMode.List) {\r\n @for(item of scroll.viewPortItems; let idx = $index; track item.id + '_' + item.pagesRead) {\r\n\r\n }\r\n \r\n }\r\n }\r\n }\r\n \r\n }\r\n\r\n @if (hasRelations) {\r\n - \r\n {{t('related-tab')}}\r\n
\r\n \r\n\r\n \r\n\r\n @for(item of scroll.viewPortItems; let idx = $index; track item.id) {\r\n\r\n\r\n }\r\n \r\n }\r\n\r\n @if (hasRecommendations) {\r\n - \r\n {{t('recommendations-tab')}}\r\n
\r\n \r\n\r\n @switch (renderMode) {\r\n @case (PageLayoutMode.Cards) {\r\n \r\n\r\n @for(item of scroll.viewPortItems; let idx = $index; track idx) {\r\n @if (!item.hasOwnProperty('coverUrl')) {\r\n\r\n }\r\n @case (PageLayoutMode.List) {\r\n @for(item of scroll.viewPortItems; let idx = $index; track idx) {\r\n @if (!item.hasOwnProperty('coverUrl')) {\r\n\r\n } @else {\r\n \r\n }\r\n }\r\n \r\n \r\n } @else {\r\n\r\n \r\n {{item.name}}\r\n \r\n \r\n\r\n \r\n }\r\n }\r\n }\r\n }\r\n\r\n \r\n {{item.name}}\r\n \r\n \r\n \r\n }\r\n\r\n\r\n