Skip to content

Commit e30a053

Browse files
damongoldingdamongolding
authored
Merge pull request #421 from damongolding/feature/about
Feature/about-page
2 parents 8d26ad8 + cdd756a commit e30a053

13 files changed

Lines changed: 436 additions & 22 deletions

File tree

‎frontend/public/assets/images/immich-logo.svg‎

Lines changed: 29 additions & 0 deletions
Loading

‎frontend/public/assets/images/kiosk-logo.svg‎

Lines changed: 27 additions & 0 deletions
Loading

‎frontend/src/css/about.css‎

Lines changed: 140 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
1+
html,
2+
body {
3+
margin: 0;
4+
padding: 0;
5+
font-family: Arial, sans-serif;
6+
overflow: auto;
7+
}
8+
9+
.about-container {
10+
display: flex;
11+
align-items: center;
12+
min-height: 100vh;
13+
width: 100vw;
14+
}
15+
16+
.about-container--immich,
17+
.about-container--kiosk {
18+
position: relative;
19+
display: flex;
20+
align-content: center;
21+
justify-content: center;
22+
align-items: center;
23+
width: 50%;
24+
min-height: 100vh;
25+
z-index: var(--z-base);
26+
}
27+
28+
.about-container--immich {
29+
background-color: rgb(27, 27, 29);
30+
}
31+
32+
.about-container--kiosk {
33+
background-color: var(--cool-grey);
34+
}
35+
36+
.about-container--immich--content,
37+
.about-container--kiosk--content {
38+
max-width: 31.25rem;
39+
width: 100%;
40+
margin: 0 auto;
41+
padding: 2rem;
42+
}
43+
44+
.logo {
45+
position: relative;
46+
z-index: var(--z-base);
47+
}
48+
49+
.logo img {
50+
max-width: 6.25rem;
51+
height: auto;
52+
display: block;
53+
margin: 1rem auto;
54+
}
55+
56+
.content {
57+
position: relative;
58+
background-color: white;
59+
border-radius: 1rem;
60+
padding: 2rem;
61+
z-index: var(--z-base);
62+
}
63+
64+
h1 {
65+
font-size: 3rem;
66+
font-weight: bold;
67+
color: #333;
68+
margin: 0.5rem 0 1.5rem 0;
69+
}
70+
71+
.stats {
72+
display: flex;
73+
flex-direction: column;
74+
}
75+
76+
.stats > div {
77+
border-top: 1px solid #eee;
78+
padding: 1.3rem 0;
79+
}
80+
81+
.stats > div:last-child {
82+
padding-bottom: 0;
83+
}
84+
85+
.label {
86+
font-size: 1rem;
87+
color: #6d727a;
88+
margin-bottom: 0.3rem;
89+
}
90+
91+
.value {
92+
font-size: 1.8rem;
93+
font-weight: bold;
94+
color: black;
95+
}
96+
97+
.value .service-online {
98+
margin-top: 0.3rem;
99+
padding: 0.5rem 1rem;
100+
border: 1px solid #18c249;
101+
background-color: rgba(24, 194, 73, 0.1);
102+
color: #0f762c;
103+
border-radius: 0.5rem;
104+
display: inline-block;
105+
}
106+
107+
.value .service-offline {
108+
margin-top: 0.3rem;
109+
padding: 0.5rem 1rem;
110+
border: 1px solid #fa2921;
111+
background-color: rgba(250, 41, 33, 0.1);
112+
color: #d10800;
113+
border-radius: 0.5rem;
114+
display: inline-block;
115+
}
116+
117+
.background {
118+
position: absolute;
119+
top: 0;
120+
left: 0;
121+
width: 100%;
122+
height: 100%;
123+
background-size: cover;
124+
background-position: center;
125+
z-index: var(--z-below);
126+
filter: blur(64px);
127+
opacity: 0.4;
128+
}
129+
130+
@media (orientation: portrait) {
131+
.about-container {
132+
flex-direction: column;
133+
}
134+
135+
.about-container--immich,
136+
.about-container--kiosk {
137+
width: 100%;
138+
min-height: unset;
139+
}
140+
}

‎frontend/src/css/kiosk.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,3 +20,4 @@
2020
@import url("./redirects.css");
2121
@import url("./utils.css");
2222
@import url("./iframe.css");
23+
@import url("./about.css");

‎frontend/src/ts/immichframe.ts‎

Lines changed: 29 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -19,37 +19,55 @@ class ImmichFrame {
1919

2020
inSleepMode: boolean = false;
2121

22+
private timeoutId: number | null = null;
23+
2224
public static getInstance(): ImmichFrame {
2325
if (!ImmichFrame.instance) {
2426
ImmichFrame.instance = new ImmichFrame();
2527
}
2628
return ImmichFrame.instance;
2729
}
2830

29-
public dimScreen(): void {
30-
fetch(`${this.BASE_URL}/${this.endpoints.DIM}`).catch((error) =>
31-
console.error("Error dimming ImmichFrame screen:", error),
32-
);
31+
public async dimScreen(): Promise<void> {
32+
try {
33+
await fetch(`${this.BASE_URL}/${this.endpoints.DIM}`, {
34+
signal: AbortSignal.timeout(5000),
35+
});
36+
} catch (error) {
37+
console.debug("Error dimming ImmichFrame screen:", error);
38+
}
3339
}
3440

35-
public undimScreen(): void {
36-
fetch(`${this.BASE_URL}/${this.endpoints.UNDIM}`).catch((error) =>
37-
console.error("Error undimming ImmichFrame screen:", error),
38-
);
41+
public async undimScreen(): Promise<void> {
42+
try {
43+
await fetch(`${this.BASE_URL}/${this.endpoints.UNDIM}`, {
44+
signal: AbortSignal.timeout(5000),
45+
});
46+
} catch (error) {
47+
console.debug("Error undimming ImmichFrame screen:", error);
48+
}
3949
}
4050

41-
public setScreensaverState(enable: boolean): void {
51+
public async setScreensaverState(enable: boolean): Promise<void> {
4252
try {
53+
if (this.timeoutId) {
54+
clearTimeout(this.timeoutId);
55+
this.timeoutId = null;
56+
}
57+
4358
if (enable) {
4459
if (this.inSleepMode) return;
4560

4661
this.inSleepMode = true;
4762

48-
setTimeout(() => this.dimScreen(), this.SCREENSAVER_DELAY_MS);
63+
this.timeoutId = setTimeout(async () => {
64+
await this.dimScreen();
65+
this.timeoutId = null;
66+
}, this.SCREENSAVER_DELAY_MS);
4967
} else {
5068
if (!this.inSleepMode) return;
5169

52-
this.undimScreen();
70+
await this.undimScreen();
5371

5472
this.inSleepMode = false;
5573

‎frontend/src/ts/kiosk.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -166,7 +166,7 @@ async function init(): Promise<void> {
166166

167167
if ("serviceWorker" in navigator) {
168168
navigator.serviceWorker.register("/assets/js/sw.js").then(
169-
function (registration) {
169+
function () {
170170
console.log("ServiceWorker registration successful");
171171
},
172172
function (err) {

0 commit comments

Comments
 (0)