c8418d127c
* Updating calcs for firefox * Removing unused code * Fixed up browser discrepencies * Review updates * Review updates * Added debouncing to scroll * Fixed a janky scroll issue with overscrolling * Cleaned up the code to use renderer and injectable document for SSR. * Removing sticky tabs Co-authored-by: Joseph Milazzo <joseph.v.milazzo@gmail.com>
286 lines
21 KiB
HTML
286 lines
21 KiB
HTML
<div #companionBar>
|
|
<app-side-nav-companion-bar *ngIf="series !== undefined" [hasExtras]="true" [extraDrawer]="extrasDrawer">
|
|
<ng-container title>
|
|
<h2 style="margin-bottom: 0px">
|
|
<app-card-actionables [disabled]="actionInProgress" (actionHandler)="performAction($event)" [actions]="seriesActions" [labelBy]="series.name" iconClass="fa-ellipsis-v"></app-card-actionables>
|
|
<span>{{series?.name}}</span>
|
|
</h2>
|
|
</ng-container>
|
|
<ng-container subtitle *ngIf="series?.localizedName !== series?.name">
|
|
<h6 class="subtitle-with-actionables" title="Localized Name">{{series?.localizedName}}</h6>
|
|
</ng-container>
|
|
|
|
<ng-template #extrasDrawer let-offcanvas>
|
|
<div class="offcanvas-header">
|
|
<h4 class="offcanvas-title" id="offcanvas-basic-title">Page Settings</h4>
|
|
<button type="button" class="btn-close" aria-label="Close" (click)="offcanvas.dismiss()"></button>
|
|
</div>
|
|
<div class="offcanvas-body">
|
|
<form [formGroup]="pageExtrasGroup">
|
|
<!-- <div class="row g-0">
|
|
<div class="col-md-12 col-sm-12 pe-2 mb-3">
|
|
<label for="settings-book-reading-direction" class="form-label">Sort Order</label>
|
|
<button class="btn btn-sm btn-secondary-outline" (click)="updateSortOrder()" style="height: 25px; padding-bottom: 0px;">
|
|
<i class="fa fa-arrow-up" title="Ascending" *ngIf="isAscendingSort; else descSort"></i>
|
|
<ng-template #descSort>
|
|
<i class="fa fa-arrow-down" title="Descending"></i>
|
|
</ng-template>
|
|
</button>
|
|
|
|
<select class="form-select" aria-describedby="settings-reading-direction-help" formControlName="sortingOption">
|
|
<option *ngFor="let opt of sortingOptions" [value]="opt.value">{{opt.text | titlecase}}</option>
|
|
</select>
|
|
</div>
|
|
</div> -->
|
|
<div class="row g-0">
|
|
<div class="col-md-12 col-sm-12 pe-2 mb-3">
|
|
<label id="list-layout-mode-label" class="form-label">Layout Mode</label>
|
|
<br/>
|
|
<div class="btn-group d-flex justify-content-center" role="group" aria-label="Layout Mode">
|
|
<input type="radio" formControlName="renderMode" [value]="PageLayoutMode.Cards" class="btn-check" id="layout-mode-default" autocomplete="off">
|
|
<label class="btn btn-outline-primary" for="layout-mode-default">Card</label>
|
|
|
|
<input type="radio" formControlName="renderMode" [value]="PageLayoutMode.List" class="btn-check" id="layout-mode-col1" autocomplete="off">
|
|
<label class="btn btn-outline-primary" for="layout-mode-col1">List</label>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</ng-template>
|
|
|
|
|
|
</app-side-nav-companion-bar>
|
|
</div>
|
|
|
|
<div [ngStyle]="{'height': ScrollingBlockHeight}" class="main-container container-fluid pt-2" *ngIf="series !== undefined" #scrollingBlock>
|
|
<div class="row mb-3 info-container">
|
|
<div class="col-md-2 col-xs-4 col-sm-6 d-none d-sm-block">
|
|
<app-image maxWidth="300px" [imageUrl]="seriesImage"></app-image>
|
|
<!-- NOTE: We can put continue point here as Vol X Ch Y or just Ch Y or Book Z ?-->
|
|
</div>
|
|
<div class="col-md-10 col-xs-8 col-sm-6 mt-2">
|
|
<div class="row g-0">
|
|
<div class="col-auto">
|
|
<button class="btn btn-primary" (click)="read()">
|
|
<span>
|
|
<i class="fa {{showBook ? 'fa-book-open' : 'fa-book'}} me-1"></i>
|
|
</span>
|
|
<span class="d-none d-sm-inline-block">{{(hasReadingProgress) ? 'Continue' : 'Read'}}</span>
|
|
</button>
|
|
</div>
|
|
<div class="col-auto ms-2" *ngIf="isAdmin">
|
|
<button class="btn btn-secondary" (click)="openEditSeriesModal()" title="Edit Series information">
|
|
<span>
|
|
<i class="fa fa-pen" aria-hidden="true"></i>
|
|
</span>
|
|
</button>
|
|
</div>
|
|
<div class="col-auto ms-2 d-none d-sm-block">
|
|
<div class="card-actions">
|
|
<app-card-actionables [disabled]="actionInProgress" (actionHandler)="performAction($event)" [actions]="seriesActions" [labelBy]="series.name" iconClass="fa-ellipsis-h" btnClass="btn-secondary"></app-card-actionables>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-auto ms-2" *ngIf="isAdmin || hasDownloadingRole">
|
|
<button class="btn btn-secondary" (click)="downloadSeries()" title="Download Series" [disabled]="downloadInProgress">
|
|
<ng-container *ngIf="downloadInProgress; else notDownloading">
|
|
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
|
|
<span class="visually-hidden">Downloading...</span>
|
|
</ng-container>
|
|
<ng-template #notDownloading>
|
|
<i class="fa fa-arrow-alt-circle-down" aria-hidden="true"></i>
|
|
</ng-template>
|
|
</button>
|
|
</div>
|
|
<div class="col-auto ms-2">
|
|
<ngb-rating class="rating-star" [(rate)]="series!.userRating" (rateChange)="updateRating($event)" (click)="promptToReview()"></ngb-rating>
|
|
<button *ngIf="series?.userRating || series.userRating" class="btn btn-sm btn-icon" (click)="openReviewModal(true)" placement="top" ngbTooltip="Edit Review" attr.aria-label="Edit Review"><i class="fa fa-pen" aria-hidden="true"></i></button>
|
|
</div>
|
|
</div>
|
|
<div class="row g-0">
|
|
<!-- TODO: This will be the first of reviews section. Reviews will show your plus other peoples reviews in media cards like Plex does and this will be below metadata -->
|
|
<app-read-more class="user-review {{userReview ? 'mt-1' : ''}}" [text]="series?.userReview || ''" [maxLength]="250"></app-read-more>
|
|
</div>
|
|
<div *ngIf="seriesMetadata" class="mt-2">
|
|
<app-series-metadata-detail [seriesMetadata]="seriesMetadata" [readingLists]="readingLists" [series]="series" [hasReadingProgress]="hasReadingProgress"></app-series-metadata-detail>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<ng-container *ngIf="series">
|
|
<app-bulk-operations [actionCallback]="bulkActionCallback"></app-bulk-operations>
|
|
<ul ngbNav #nav="ngbNav" [(activeId)]="activeTabId" class="nav nav-tabs mb-2" [destroyOnHide]="false" (navChange)="onNavChange($event)">
|
|
<li [ngbNavItem]="TabID.Storyline" *ngIf="libraryType !== LibraryType.Book && (volumes.length > 0 || chapters.length > 0)">
|
|
<a ngbNavLink>Storyline</a>
|
|
<ng-template ngbNavContent>
|
|
<virtual-scroller #scroll [items]="storylineItems" [bufferAmount]="1" [parentScroll]="scrollingBlock">
|
|
<ng-container *ngIf="renderMode === PageLayoutMode.Cards; else storylineListLayout">
|
|
<div class="card-container row g-0" #container>
|
|
<ng-container *ngFor="let item of scroll.viewPortItems; let idx = index; trackBy: trackByStoryLineIdentity">
|
|
<ng-container *ngIf="!item.isChapter; else chapterCardItem">
|
|
<app-card-item class="col-auto mt-2 mb-2" *ngIf="item.volume.number != 0" [entity]="item.volume" [title]="item.volume.name" (click)="openVolume(item.volume)"
|
|
[imageUrl]="imageService.getVolumeCoverImage(item.volume.id)"
|
|
[read]="item.volume.pagesRead" [total]="item.volume.pages" [actions]="volumeActions" (selection)="bulkSelectionService.handleCardSelection('volume', idx, volumes.length, $event)" [selected]="bulkSelectionService.isCardSelected('volume', idx)" [allowSelection]="true"></app-card-item>
|
|
</ng-container>
|
|
<ng-template #chapterCardItem>
|
|
<app-card-item class="col-auto mt-2 mb-2" *ngIf="!item.chapter.isSpecial" [entity]="item.chapter" [title]="item.chapter.title" (click)="openChapter(item.chapter)"
|
|
[imageUrl]="imageService.getChapterCoverImage(item.chapter.id)"
|
|
[read]="item.chapter.pagesRead" [total]="item.chapter.pages" [actions]="chapterActions" (selection)="bulkSelectionService.handleCardSelection('chapter', idx, storyChapters.length, $event)" [selected]="bulkSelectionService.isCardSelected('chapter', idx)" [allowSelection]="true"></app-card-item>
|
|
</ng-template>
|
|
</ng-container>
|
|
</div>
|
|
</ng-container>
|
|
<ng-template #storylineListLayout>
|
|
<ng-container *ngFor="let item of scroll.viewPortItems; let idx = index; trackBy: trackByStoryLineIdentity">
|
|
<ng-container *ngIf="!item.isChapter; else chapterListItem">
|
|
<app-list-item [imageUrl]="imageService.getVolumeCoverImage(item.volume.id)"
|
|
[seriesName]="series.name" [entity]="item.volume" *ngIf="item.volume.number != 0"
|
|
[actions]="volumeActions" [libraryType]="libraryType" imageWidth="130px" imageHeight=""
|
|
[pagesRead]="item.volume.pagesRead" [totalPages]="item.volume.pages" (read)="openVolume(item.volume)">
|
|
<ng-container title>
|
|
<app-entity-title [libraryType]="libraryType" [entity]="item.volume" [seriesName]="series.name" [prioritizeTitleName]="false"></app-entity-title>
|
|
</ng-container>
|
|
</app-list-item>
|
|
</ng-container>
|
|
<ng-template #chapterListItem>
|
|
<app-list-item [imageUrl]="imageService.getChapterCoverImage(item.chapter.id)"
|
|
[seriesName]="series.name" [entity]="item.chapter" *ngIf="!item.chapter.isSpecial"
|
|
[actions]="chapterActions" [libraryType]="libraryType" imageWidth="130px" imageHeight=""
|
|
[pagesRead]="item.chapter.pagesRead" [totalPages]="item.chapter.pages" (read)="openChapter(item.chapter)">
|
|
<ng-container title>
|
|
<app-entity-title [libraryType]="libraryType" [entity]="item.chapter" [seriesName]="series.name" [prioritizeTitleName]="false"></app-entity-title>
|
|
</ng-container>
|
|
</app-list-item>
|
|
</ng-template>
|
|
</ng-container>
|
|
</ng-template>
|
|
</virtual-scroller>
|
|
</ng-template>
|
|
</li>
|
|
|
|
<li [ngbNavItem]="TabID.Volumes" *ngIf="volumes.length > 0">
|
|
<a ngbNavLink>{{libraryType === LibraryType.Book ? 'Books': 'Volumes'}}</a>
|
|
<ng-template ngbNavContent>
|
|
<virtual-scroller #scroll [items]="volumes" [parentScroll]="scrollingBlock">
|
|
<ng-container *ngIf="renderMode === PageLayoutMode.Cards; else volumeListLayout">
|
|
<div class="card-container row g-0" #container>
|
|
<ng-container *ngFor="let item of scroll.viewPortItems; let idx = index; trackBy: trackByVolumeIdentity">
|
|
<app-card-item class="col-auto mt-2 mb-2" [entity]="item" [title]="item.name" (click)="openVolume(item)"
|
|
[imageUrl]="imageService.getVolumeCoverImage(item.id)"
|
|
[read]="item.pagesRead" [total]="item.pages" [actions]="volumeActions"
|
|
(selection)="bulkSelectionService.handleCardSelection('volume', idx, volumes.length, $event)"
|
|
[selected]="bulkSelectionService.isCardSelected('volume', idx)" [allowSelection]="true">
|
|
</app-card-item>
|
|
</ng-container>
|
|
</div>
|
|
</ng-container>
|
|
<ng-template #volumeListLayout>
|
|
<ng-container *ngFor="let volume of scroll.viewPortItems; let idx = index; trackBy: trackByVolumeIdentity">
|
|
<app-list-item [imageUrl]="imageService.getVolumeCoverImage(volume.id)"
|
|
[seriesName]="series.name" [entity]="volume" *ngIf="volume.number != 0"
|
|
[actions]="volumeActions" [libraryType]="libraryType" imageWidth="130px" imageHeight=""
|
|
[pagesRead]="volume.pagesRead" [totalPages]="volume.pages" (read)="openVolume(volume)">
|
|
<ng-container title>
|
|
<app-entity-title [libraryType]="libraryType" [entity]="volume" [seriesName]="series.name"></app-entity-title>
|
|
</ng-container>
|
|
</app-list-item>
|
|
</ng-container>
|
|
|
|
</ng-template>
|
|
</virtual-scroller>
|
|
</ng-template>
|
|
</li>
|
|
|
|
<li [ngbNavItem]="TabID.Chapters" *ngIf="chapters.length > 0">
|
|
<a ngbNavLink>{{utilityService.formatChapterName(libraryType) + 's'}}</a>
|
|
<ng-template ngbNavContent>
|
|
<virtual-scroller #scroll [items]="chapters" [parentScroll]="scrollingBlock">
|
|
<ng-container *ngIf="renderMode === PageLayoutMode.Cards; else chapterListLayout">
|
|
<div class="card-container row g-0" #container>
|
|
<div *ngFor="let item of scroll.viewPortItems; let idx = index; trackBy: trackByChapterIdentity">
|
|
<app-card-item class="col-auto mt-2 mb-2" *ngIf="!item.isSpecial" [entity]="item" [title]="item.title" (click)="openChapter(item)"
|
|
[imageUrl]="imageService.getChapterCoverImage(item.id)"
|
|
[read]="item.pagesRead" [total]="item.pages" [actions]="chapterActions"
|
|
(selection)="bulkSelectionService.handleCardSelection('chapter', idx, chapters.length, $event)"
|
|
[selected]="bulkSelectionService.isCardSelected('chapter', idx)" [allowSelection]="true">
|
|
<ng-container title>
|
|
<app-entity-title [libraryType]="libraryType" [entity]="item" [seriesName]="series.name" [includeVolume]="true"></app-entity-title>
|
|
</ng-container>
|
|
</app-card-item>
|
|
</div>
|
|
</div>
|
|
</ng-container>
|
|
<ng-template #chapterListLayout>
|
|
<div *ngFor="let chapter of scroll.viewPortItems; let idx = index; trackBy: trackByChapterIdentity">
|
|
<app-list-item [imageUrl]="imageService.getChapterCoverImage(chapter.id)"
|
|
[seriesName]="series.name" [entity]="chapter" *ngIf="!chapter.isSpecial"
|
|
[actions]="chapterActions" [libraryType]="libraryType" imageWidth="130px" imageHeight=""
|
|
[pagesRead]="chapter.pagesRead" [totalPages]="chapter.pages" (read)="openChapter(chapter)"
|
|
[includeVolume]="true">
|
|
<ng-container title>
|
|
<app-entity-title [libraryType]="libraryType" [entity]="chapter" [seriesName]="series.name" [includeVolume]="true" [prioritizeTitleName]="false"></app-entity-title>
|
|
</ng-container>
|
|
</app-list-item>
|
|
</div>
|
|
</ng-template>
|
|
</virtual-scroller>
|
|
</ng-template>
|
|
</li>
|
|
|
|
<li [ngbNavItem]="TabID.Specials" *ngIf="hasSpecials">
|
|
<a ngbNavLink>Specials</a>
|
|
<ng-template ngbNavContent>
|
|
<virtual-scroller #scroll [items]="specials" [parentScroll]="scrollingBlock">
|
|
<ng-container *ngIf="renderMode === PageLayoutMode.Cards; else specialListLayout">
|
|
<div class="card-container row g-0" #container>
|
|
<ng-container *ngFor="let item of scroll.viewPortItems; let idx = index; trackBy: trackByChapterIdentity">
|
|
<app-card-item class="col-auto mt-2 mb-2" [entity]="item" [title]="item.title || item.range" (click)="openChapter(item)"
|
|
[imageUrl]="imageService.getChapterCoverImage(item.id)"
|
|
[read]="item.pagesRead" [total]="item.pages" [actions]="chapterActions"
|
|
(selection)="bulkSelectionService.handleCardSelection('special', idx, chapters.length, $event)"
|
|
[selected]="bulkSelectionService.isCardSelected('special', idx)" [allowSelection]="true">
|
|
</app-card-item>
|
|
</ng-container>
|
|
</div>
|
|
</ng-container>
|
|
<ng-template #specialListLayout>
|
|
<ng-container *ngFor="let chapter of scroll.viewPortItems; let idx = index; trackBy: trackByChapterIdentity">
|
|
<app-list-item [imageUrl]="imageService.getChapterCoverImage(chapter.id)"
|
|
[seriesName]="series.name" [entity]="chapter"
|
|
[actions]="chapterActions" [libraryType]="libraryType" imageWidth="130px" imageHeight=""
|
|
[pagesRead]="chapter.pagesRead" [totalPages]="chapter.pages" (read)="openChapter(chapter)">
|
|
<ng-container title>
|
|
{{chapter.title || chapter.range}}
|
|
</ng-container>
|
|
</app-list-item>
|
|
</ng-container>
|
|
</ng-template>
|
|
</virtual-scroller>
|
|
</ng-template>
|
|
</li>
|
|
|
|
<li [ngbNavItem]="TabID.Related" *ngIf="hasRelations">
|
|
<a ngbNavLink>Related</a>
|
|
<ng-template ngbNavContent>
|
|
<virtual-scroller #scroll [items]="relations" [parentScroll]="scrollingBlock">
|
|
<div class="card-container row g-0" #container>
|
|
<ng-container *ngFor="let item of scroll.viewPortItems let idx = index; trackBy: trackByRelatedSeriesIdentiy">
|
|
<app-series-card class="col-auto mt-2 mb-2" [data]="item.series" [libraryId]="item.series.libraryId" [relation]="item.relation"></app-series-card>
|
|
</ng-container>
|
|
</div>
|
|
</virtual-scroller>
|
|
</ng-template>
|
|
</li>
|
|
</ul>
|
|
<div [ngbNavOutlet]="nav"></div>
|
|
</ng-container>
|
|
|
|
<div class="mx-auto" *ngIf="isLoading" style="width: 200px;">
|
|
<div class="spinner-border text-secondary loading" role="status">
|
|
<span class="invisible">Loading...</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|