199 lines
9.3 KiB
HTML
199 lines
9.3 KiB
HTML
<ng-container *transloco="let t; read: 'series-detail'">
|
|
|
|
<div [ngStyle]="{'height': ScrollingBlockHeight}" class="main-container container-fluid" #scrollingBlock>
|
|
|
|
@if (chapter && series && libraryType !== null) {
|
|
<div class="row mb-0 mb-xl-3 info-container">
|
|
<div [ngClass]="mobileSeriesImgBackground === 'true' ? 'mobile-bg' : ''" class="image-container col-5 col-sm-12 col-md-12 col-lg-5 col-xl-2 col-xxl-2 col-xxxl-2 d-none d-sm-block mb-3 position-relative">
|
|
<app-cover-image [entity]="chapter" [coverImage]="imageService.getChapterCoverImage(chapter.id)" (read)="read()"></app-cover-image>
|
|
</div>
|
|
<div class="col-xl-10 col-lg-7 col-md-12 col-xs-12 col-sm-12">
|
|
<h4 class="title mb-2">
|
|
<a routerLink="/library/{{series.libraryId}}/series/{{series.id}}" class="dark-exempt btn-icon">{{series.name}}</a>
|
|
</h4>
|
|
<div class="subtitle mt-2 mb-2">
|
|
<span class="me-2">
|
|
<app-entity-title [libraryType]="libraryType" [entity]="chapter" [prioritizeTitleName]="true" [includeChapter]="true"></app-entity-title>
|
|
</span>
|
|
</div>
|
|
|
|
<app-metadata-detail-row [entity]="chapter"
|
|
[ageRating]="chapter.ageRating"
|
|
[hasReadingProgress]="chapter.pagesRead > 0"
|
|
[readingTimeEntity]="chapter"
|
|
[libraryType]="libraryType"
|
|
[mangaFormat]="series.format">
|
|
</app-metadata-detail-row>
|
|
|
|
|
|
|
|
<!-- Rating goes here (after I implement support for rating individual issues -->
|
|
<!-- <div class="mt-2 mb-2">-->
|
|
<!-- <app-external-rating [seriesId]="series.id"-->
|
|
<!-- [ratings]="[]"-->
|
|
<!-- [userRating]="series.userRating"-->
|
|
<!-- [hasUserRated]="series.hasUserRated"-->
|
|
<!-- [libraryType]="libraryType!">-->
|
|
<!-- </app-external-rating>-->
|
|
<!-- </div>-->
|
|
|
|
<div class="mt-3 mb-3">
|
|
<div class="row g-0">
|
|
<div class="col-auto">
|
|
<div class="btn-group">
|
|
<button type="button" class="btn btn-outline-primary" (click)="read()">
|
|
<span>
|
|
<i class="fa {{chapter.pagesRead > 0 ? 'fa-book-open' : 'fa-book'}}" aria-hidden="true"></i>
|
|
<span class="read-btn--text"> {{(chapter.pagesRead > 0) ? t('continue') : t('read')}}</span>
|
|
</span>
|
|
</button>
|
|
<div class="btn-group" ngbDropdown role="group" display="dynamic" [attr.aria-label]="t('read-options-alt')">
|
|
<button type="button" class="btn btn-outline-primary dropdown-toggle-split" ngbDropdownToggle></button>
|
|
<div class="dropdown-menu" ngbDropdownMenu>
|
|
<button ngbDropdownItem (click)="read(true)">
|
|
<span>
|
|
<i class="fa fa-glasses" aria-hidden="true"></i>
|
|
<span class="read-btn--text"> {{(chapter.pagesRead > 0) ? t('continue-incognito') : t('read-incognito')}}</span>
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
@if (accountService.isAdmin$ | async) {
|
|
<div class="col-auto ms-2">
|
|
<button class="btn btn-actions" id="edit-btn--komf" (click)="openEditModal()" [ngbTooltip]="t('edit-series-alt')">
|
|
<span><i class="fa fa-pen" aria-hidden="true"></i></span>
|
|
</button>
|
|
</div>
|
|
}
|
|
|
|
<div class="col-auto ms-2k">
|
|
<div class="card-actions" [ngbTooltip]="t('more-alt')">
|
|
<app-card-actionables (actionHandler)="performAction($event)" [actions]="chapterActions" [labelBy]="series.name + ' ' + chapter.minNumber" iconClass="fa-ellipsis-h" btnClass="btn-actions btn"></app-card-actionables>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-auto ms-2 d-none d-md-block">
|
|
<app-download-button [download$]="download$" [entity]="chapter" entityType="chapter"></app-download-button>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-2 mb-3">
|
|
<app-read-more [text]="chapter.summary || ''" [maxLength]="utilityService.getActiveBreakpoint() >= Breakpoint.Desktop ? 170 : 200"></app-read-more>
|
|
</div>
|
|
|
|
<div class="mt-2">
|
|
<div class="row g-0">
|
|
<div class="col-6">
|
|
<span class="fw-bold">{{t('writers-title')}}</span>
|
|
<div>
|
|
<app-badge-expander [items]="chapter.writers" [allowToggle]="false" (toggle)="switchTabsToDetail()">
|
|
<ng-template #badgeExpanderItem let-item let-position="idx" let-last="last">
|
|
<a routerLink="/person/{{encodeURIComponent(item.name)}}/" class="dark-exempt btn-icon">{{item.name}}</a>
|
|
</ng-template>
|
|
</app-badge-expander>
|
|
</div>
|
|
</div>
|
|
<div class="col-6">
|
|
@if (chapter.releaseDate !== '0001-01-01T00:00:00' && (libraryType === LibraryType.ComicVine || libraryType === LibraryType.Comic)) {
|
|
<span class="fw-bold">{{t('release-date-title')}}</span>
|
|
<div>
|
|
<a class="dark-exempt btn-icon" href="javascript:void(0);">{{chapter.releaseDate | date: 'shortDate' | defaultDate:'—'}}</a>
|
|
</div>
|
|
} @else {
|
|
<span class="fw-bold">{{t('cover-artists-title')}}</span>
|
|
<div>
|
|
<app-badge-expander [items]="chapter.coverArtists" [allowToggle]="false" (toggle)="switchTabsToDetail()">
|
|
<ng-template #badgeExpanderItem let-item let-position="idx" let-last="last">
|
|
<a routerLink="/person/{{encodeURIComponent(item.name)}}/" class="dark-exempt btn-icon">{{item.name}}</a>
|
|
</ng-template>
|
|
</app-badge-expander>
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-3 mb-2 upper-details">
|
|
<div class="row g-0">
|
|
<div class="col-6 pe-5">
|
|
<span class="fw-bold">{{t('genres-title')}}</span>
|
|
<div>
|
|
<app-badge-expander [items]="chapter.genres"
|
|
[itemsTillExpander]="3"
|
|
[allowToggle]="false"
|
|
(toggle)="switchTabsToDetail()">
|
|
<ng-template #badgeExpanderItem let-item let-position="idx" let-last="last">
|
|
<a href="javascript:void(0)" class="dark-exempt btn-icon" (click)="openFilter(FilterField.Genres, item.id)">{{item.title}}</a>
|
|
</ng-template>
|
|
</app-badge-expander>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-6">
|
|
<span class="fw-bold">{{t('tags-title')}}</span>
|
|
<div>
|
|
<app-badge-expander [items]="chapter.tags"
|
|
[itemsTillExpander]="3"
|
|
[allowToggle]="false"
|
|
(toggle)="switchTabsToDetail()">
|
|
<ng-template #badgeExpanderItem let-item let-position="idx" let-last="last">
|
|
<a href="javascript:void(0)" class="dark-exempt btn-icon" (click)="openFilter(FilterField.Tags, item.id)">{{item.title}}</a>
|
|
</ng-template>
|
|
</app-badge-expander>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="carousel-tabs-container mb-2">
|
|
<ul ngbNav #nav="ngbNav" [(activeId)]="activeTabId" class="nav nav-tabs" (navChange)="onNavChange($event)">
|
|
|
|
@if (showDetailsTab) {
|
|
<li [ngbNavItem]="TabID.Details">
|
|
<a ngbNavLink>{{t('details-tab')}}</a>
|
|
<ng-template ngbNavContent>
|
|
@defer (when activeTabId === TabID.Details; prefetch on idle) {
|
|
<app-details-tab [metadata]="chapter"
|
|
[genres]="chapter.genres"
|
|
[tags]="chapter.tags"
|
|
[webLinks]="weblinks"
|
|
[readingTime]="chapter"
|
|
[language]="chapter.language"
|
|
[format]="series.format"></app-details-tab>
|
|
}
|
|
</ng-template>
|
|
</li>
|
|
}
|
|
|
|
@if(readingLists.length > 0) {
|
|
<li [ngbNavItem]="TabID.Related">
|
|
<a ngbNavLink>{{t('related-tab')}}</a>
|
|
<ng-template ngbNavContent>
|
|
@defer (when activeTabId === TabID.Related; prefetch on idle) {
|
|
<app-related-tab [readingLists]="readingLists"></app-related-tab>
|
|
}
|
|
</ng-template>
|
|
</li>
|
|
}
|
|
</ul>
|
|
</div>
|
|
<div [ngbNavOutlet]="nav"></div>
|
|
|
|
}
|
|
|
|
|
|
|
|
<app-loading [loading]="isLoading" style="min-height: 300px"></app-loading>
|
|
</div>
|
|
|
|
</ng-container>
|