Skip to content

Commit 8ad749e

Browse files
rodzykrodzyk
authored
Merge pull request #16 from chytanka/develop
add hint-page
2 parents 67e9bd3 + 1d63cef commit 8ad749e

33 files changed

+1158
-185
lines changed

‎src/app/history/ui/history-list/history-list.component.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
</div>
66

77
@if (historyItems() | async; as items) { @if (items.length > 0) {
8-
<button [title]="lang.ph().clearHistory" class="button small" (click)="clearHistory()">
8+
<button [title]="lang.ph().clearHistory" class="button delete small" (click)="clearHistory()">
99
🧹 {{lang.ph().clearHistory}}
1010
</button>
1111
} @else {}}

‎src/app/link-parser/link-parser/link-parser.component.html

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,28 +4,22 @@
44
<h1 class="logo-text">@defer{ <app-text-embracer [text]="lang.ph().shortTitle" /> }</h1>
55
<div style="display: flex; gap: 1ch;">
66
<form (submit)="onSubmit()">
7-
87
<input name="chtnk_url" type="url" required autofocus [placeholder]="lang.ph().enterLink"
98
(input)="inputLink($event)" [value]="link()">
10-
11-
129
</form>
13-
1410
</div>
1511
</div>
1612

1713
<div class="slogan-wrapper">
1814
<h2 class="slogan-header">{{lang.ph().slogan}}</h2>
1915
@if (linkParams()) {
20-
<a style="display: flex; gap: 1ch;" class="button primary" [routerLink]="['',linkParams()?.site, linkParams64()?.id]">
16+
<a style="display: flex; gap: 1ch; align-items: center;" class="button primary" [routerLink]="['',linkParams()?.site, linkParams64()?.id]">
2117
<span>{{lang.ph().letsgo}} </span>
2218
<img class="favicon" [src]="favicons[linkParams()?.site]" [alt]="linkParams()?.site">
23-
<!-- <span class="site-name">{{linkParams()?.site}}</span> -->
24-
<span class="site-address" [title]="linkParams()?.id">{{'/'+linkParams()?.id | truncate}}</span>
19+
<small class="site-address" [title]="linkParams()?.id">{{linkParams()?.id | truncate}}</small>
2520
</a>
2621
}
2722
</div>
28-
2923
</div>
3024

3125
<section style="text-align: center;">

‎src/app/link-parser/link-parser/link-parser.component.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -111,9 +111,9 @@ export class LinkParserComponent {
111111

112112
favicons: any = {
113113
reddit: '//reddit.com/favicon.ico',
114-
imgur: 'imgur.com/favicon.ico',
115-
mangadex: 'mangadex.org/favicon.ico',
116-
telegraph: 'telegra.ph/favicon.ico',
114+
imgur: '//imgur.com/favicon.ico',
115+
mangadex: '//mangadex.org/favicon.ico',
116+
telegraph: '//telegra.ph/favicon.ico',
117117
read: 'data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🗯️</text></svg>'
118118
}
119119

‎src/app/shared/data-access/download.service.ts

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
import { Injectable } from '@angular/core';
2+
import { CompositionEpisode, CompositionImage } from '../../common/common-read';
3+
4+
enum DownloadStatus {
5+
Downloading = "downloading",
6+
Paused = "paused",
7+
Error = "error",
8+
Done = "done",
9+
Queued = "queued"
10+
}
11+
12+
type DownloadQueue<T> = {
13+
id: string;
14+
status: DownloadStatus;
15+
object: T;
16+
dateAdded: Date;
17+
dateDownloaded: Date | undefined;
18+
}
19+
20+
interface DownloadCompositionImage extends CompositionImage {
21+
image: number[]
22+
status: DownloadStatus;
23+
}
24+
interface DowloadCompositionEpisode extends CompositionEpisode {
25+
images: DownloadCompositionImage[]
26+
}
27+
28+
29+
@Injectable({
30+
providedIn: 'root'
31+
})
32+
export class DownloadService {
33+
/**
34+
* -[ ] add to queue
35+
* -[ ] dowload queue
36+
* -[ ] save to db
37+
* -[ ]
38+
*/
39+
40+
queue: DownloadQueue<CompositionEpisode>[] = []
41+
42+
constructor() { }
43+
44+
map(ep: CompositionEpisode): DowloadCompositionEpisode {
45+
return {
46+
title: ep.title,
47+
chapter: ep.chapter,
48+
episode: ep.episode,
49+
extra: ep.extra,
50+
mangaId: ep.mangaId,
51+
nsfw: ep.nsfw,
52+
part: ep.part,
53+
volume: ep.volume,
54+
images: ep.images.map(img => {
55+
return {
56+
image: [],
57+
status: DownloadStatus.Queued,
58+
src: img.src,
59+
alt: img.alt,
60+
height: img.height,
61+
nsfw: img.nsfw,
62+
size: img.size,
63+
type: img.type,
64+
width: img.width
65+
}
66+
67+
})
68+
}
69+
}
70+
71+
addToQueue(episode: CompositionEpisode, id: string) {
72+
const qi = this.getFromQueue(id)
73+
if (qi) return;
74+
this.queue.push(
75+
{
76+
id,
77+
object: this.map(episode),
78+
status: DownloadStatus.Queued,
79+
dateAdded: new Date(),
80+
dateDownloaded: undefined
81+
})
82+
}
83+
84+
getFromQueue(id: string) {
85+
const result = this.queue.filter(e => e.id == id)
86+
87+
return result[0] ?? undefined;
88+
}
89+
}

‎src/app/shared/shared.module.ts

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,11 @@ import { LangToggleComponent } from './ui/lang-toggle/lang-toggle.component';
1717
import { TitleCardComponent } from './ui/title-card/title-card.component';
1818
import { LoadingComponent } from './ui/loading/loading.component';
1919
import { SeparatorComponent } from './ui/separator/separator.component';
20+
import { MangaPageComponent } from './ui/manga-page/manga-page.component';
21+
import { HintPageComponent } from './ui/viewer/components/hint-page/hint-page.component';
22+
import { ViewerFooterComponent } from './ui/viewer/components/viewer-footer/viewer-footer.component';
23+
import { ViewerHeaderComponent } from './ui/viewer/components/viewer-header/viewer-header.component';
24+
import { MangaPageEvenComponent } from './ui/manga-page/manga-page-even.component';
2025

2126

2227

@@ -36,7 +41,12 @@ import { SeparatorComponent } from './ui/separator/separator.component';
3641
LangToggleComponent,
3742
TitleCardComponent,
3843
LoadingComponent,
39-
SeparatorComponent
44+
SeparatorComponent,
45+
MangaPageComponent,
46+
HintPageComponent,
47+
ViewerFooterComponent,
48+
ViewerHeaderComponent,
49+
MangaPageEvenComponent
4050
],
4151
imports: [
4252
CommonModule,

‎src/app/shared/ui/manga-page/manga-page-even.component.html

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<section>
2+
<ng-content select="[frame=1]"></ng-content>
3+
</section>
4+
<section>
5+
<ng-content select="[frame=2]"></ng-content>
6+
</section>
7+
<section>
8+
<ng-content select="[frame=3]"></ng-content>
9+
</section>
10+
<section>
11+
<ng-content select="[frame=4]"></ng-content>
12+
</section>
13+
<section>
14+
<ng-content select="[frame=5]"></ng-content>
15+
</section>

‎src/app/shared/ui/manga-page/manga-page-even.component.scss

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
:host {
2+
display: grid;
3+
max-height: 100vh;
4+
aspect-ratio: 2/3;
5+
--side-gap: 2rem;
6+
7+
background-color: #fff;
8+
color: #000;
9+
10+
gap: 2ch 1ch;
11+
position: relative;
12+
13+
grid-template-columns: var(--side-gap) repeat(4, 1fr);
14+
grid-template-rows: 1fr 2fr 1fr var(--side-gap);
15+
16+
counter-reset: read-order;
17+
font-family: 'Troubleside';
18+
}
19+
20+
section {
21+
opacity: .8;
22+
border: .4ch solid;
23+
border-radius: .4ch;
24+
position: relative;
25+
display: grid;
26+
place-items: center;
27+
overflow: hidden;
28+
29+
counter-increment: read-order;
30+
31+
&:nth-child(1),
32+
&:nth-child(2) {
33+
border-top: 0;
34+
border-top-left-radius: unset;
35+
border-top-right-radius: unset;
36+
}
37+
38+
&:nth-child(1) {
39+
grid-column: 2/span 2;
40+
}
41+
42+
&:nth-child(2) {
43+
grid-column: 4/span 2;
44+
grid-row: 1;
45+
}
46+
47+
&:nth-child(3) {
48+
grid-column: 2/span 4
49+
}
50+
51+
&:nth-child(4) {
52+
grid-column: 2/span 3;
53+
}
54+
55+
&:nth-child(5) {
56+
grid-column: 5;
57+
}
58+
}
59+
60+
61+
:host[dir=rtl] {
62+
section {
63+
64+
&:nth-child(2),
65+
&:nth-child(3),
66+
&:nth-child(5) {
67+
border-left: 0;
68+
border-bottom-left-radius: unset;
69+
border-top-left-radius: unset;
70+
}
71+
}
72+
}
73+
74+
:host[dir=ltr] {
75+
section {
76+
&::after {
77+
right: unset;
78+
left: 1ch;
79+
}
80+
81+
&:nth-child(2),
82+
&:nth-child(3),
83+
&:nth-child(5) {
84+
border-right: 0;
85+
border-top-right-radius: unset;
86+
border-bottom-right-radius: unset;
87+
}
88+
}
89+
}

‎src/app/shared/ui/manga-page/manga-page-even.component.ts

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { Component } from '@angular/core';
2+
3+
@Component({
4+
selector: 'app-manga-page-even',
5+
templateUrl: './manga-page-even.component.html',
6+
styleUrl: './manga-page-even.component.scss'
7+
})
8+
export class MangaPageEvenComponent {
9+
10+
}

‎src/app/shared/ui/manga-page/manga-page.component.html

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<section>
2+
<ng-content select="[frame=1]"></ng-content>
3+
</section>
4+
<section>
5+
<ng-content select="[frame=2]"></ng-content>
6+
</section>
7+
<section>
8+
<ng-content select="[frame=3]"></ng-content>
9+
</section>
10+
<section>
11+
<ng-content select="[frame=4]"></ng-content>
12+
</section>
13+
<section>
14+
<ng-content select="[frame=5]"></ng-content>
15+
</section>
16+
<!-- <section>
17+
<ng-content select="[frame=6]"></ng-content>
18+
</section> -->

0 commit comments

Comments
 (0)