Skip to content

Commit

Permalink
feat: update home page
Browse files Browse the repository at this point in the history
  • Loading branch information
dpaniq committed Jul 9, 2024
1 parent 55c0cee commit 7823090
Show file tree
Hide file tree
Showing 14 changed files with 306 additions and 213 deletions.
98 changes: 34 additions & 64 deletions src/app/app.component.css
Original file line number Diff line number Diff line change
@@ -1,18 +1,18 @@
app-header {
height: 15vh;
height: 10vh;
}

main {
width: 1200px;
height: 70vh;
width: 1100px;
height: 80vh;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}

app-footer {
height: 15vh;
height: 10vh;
}

/* TODO mobile; use https://tproger.ru/articles/novye-edinicy-izmereniya-svh-lvh-dvh-dlya-adaptivnoj-verstki */
Expand Down Expand Up @@ -55,79 +55,49 @@ dialog {
}
}

.camera {
pointer-events: none;
:host {
position: relative;

/* .camera-corners {
#battery,
#quality,
#timer {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
margin: 50px;
mix-blend-mode: color;
--lineWidth: 5px;
--lineLength: 140px;
--lineLength: calc(50px + 2vh);
--lineColor: whitesmoke;
--linearGradientColor: linear-gradient(var(--lineColor), var(--lineColor));
--lineColorPair: var(--linearGradientColor), var(--linearGradientColor);
--lineHorizontal: var(--lineLength) var(--lineWidth);
--lineVertical: var(--lineWidth) var(--lineLength);
background-image: var(--lineColorPair), var(--lineColorPair),
var(--lineColorPair), var(--lineColorPair);
background-repeat: no-repeat;
background-size: var(--lineVertical), var(--lineHorizontal),
var(--lineVertical), var(--lineHorizontal), var(--lineVertical),
var(--lineHorizontal), var(--lineVertical), var(--lineHorizontal);
background-position:
left top,
left top,
left bottom,
left bottom,
right top,
right top,
right bottom,
right bottom;
} */

.rec {
bottom: 70px;
right: 90px;
color: rgba(245, 245, 245, 0.5);
font-size: 30px;
font-weight: 700;
}

#quality {
right: unset;
left: 90px;
}

#battery {
top: 80px;
bottom: unset;
right: unset;
left: 110px;
writing-mode: vertical-lr;
text-orientation: sideways-right;
}

#rec {
display: flex;
justify-content: center;
align-items: center;
gap: 15px;

position: absolute;
margin: 120px;
top: 0;
right: 0;
top: 70px;
right: 90px;

color: rgba(245, 245, 245, 0.5);
font-size: 60px;
font-size: 40px;

animation: rec 3s infinite forwards step-end;
z-index: 20px;
}

/* .brand-wrapper {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
img.timeline-active-image {
position: absolute;
width: 100vw;
height: 100vh;
object-fit: cover !important;
transition: object-fit 2s;
opacity: 0.8;
animation: switch 10s infinite forwards step-end;
}
} */
}

@keyframes rec {
Expand Down
39 changes: 17 additions & 22 deletions src/app/app.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,23 @@
<main>
<router-outlet />
</main>

<div id="quality">2160p</div>

<app-camera-timer id="timer" />
<app-camera-battery id="battery" />

<div id="rec">
<img
width="35px"
src="assets/brand/dot.svg"
/>
<img
width="80px"
src="assets/brand/rec.svg"
/>
</div>

<app-footer />

<dialog #dialog>
Expand All @@ -24,25 +41,3 @@
<mat-icon fontIcon="close"></mat-icon>
</button>
</dialog>

<div class="camera">
<!-- Camera angles -->
<div class="camera-corners"></div>
<div class="rec">
<img
width="35px"
src="assets/brand/dot.svg"
/>
<img
width="80px"
src="assets/brand/rec.svg"
/>
</div>

<!-- <div class="brand-wrapper">
<img
class="timeline-active-image"
[src]="timelineImage()"
/>
</div> -->
</div>
24 changes: 14 additions & 10 deletions src/app/app.component.ts
Original file line number Diff line number Diff line change
@@ -1,26 +1,27 @@
import { CommonModule } from '@angular/common';
import {
AfterViewInit,
Component,
computed,
DestroyRef,
ElementRef,
Inject,
PLATFORM_ID,
ViewChild,
ViewRef,
computed,
inject,
PLATFORM_ID,
signal,
ViewChild,
} from '@angular/core';
import { CommonModule, isPlatformBrowser } from '@angular/common';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { MatIconModule } from '@angular/material/icon';
import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
import { HeaderComponent } from './core/header/header.component';
import { filter } from 'rxjs';
import { PORTFOLIO_TIMELINE_LIST } from './constants';
import { FooterComponent } from './core/footer/footer.component';
import { HeaderComponent } from './core/header/header.component';
import { CameraBatteryComponent } from './features/camera-battery/camera-battery.component';
import { CameraTimerComponent } from './features/camera-timer/camera-timer.component';
import { VideoService } from './services/video.service';
import { SafePipe } from './shared/pipes/safe.pipe';
import { MatIconModule } from '@angular/material/icon';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { filter, interval } from 'rxjs';
import { PORTFOLIO_TIMELINE_LIST } from './constants';

@Component({
selector: 'app-root',
Expand All @@ -36,6 +37,9 @@ import { PORTFOLIO_TIMELINE_LIST } from './constants';
HeaderComponent,
FooterComponent,

CameraTimerComponent,
CameraBatteryComponent,

SafePipe,
],
templateUrl: './app.component.html',
Expand Down
53 changes: 53 additions & 0 deletions src/app/features/camera-battery/camera-battery.component.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
import { CommonModule, isPlatformBrowser } from '@angular/common';
import {
Component,
DestroyRef,
inject,
PLATFORM_ID,
signal,
} from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { MatIconModule } from '@angular/material/icon';
import { interval, map } from 'rxjs';

const initialDate = new Date().setHours(0, 0, 0, 0);

@Component({
selector: 'app-camera-battery',
standalone: true,
imports: [CommonModule, MatIconModule],
template: `
@if (batterySignal()) {
<mat-icon fontIcon="battery_5_bar"></mat-icon>
} @else {
<mat-icon fontIcon="battery_4_bar"></mat-icon>
}
`,
styles: `
mat-icon {
transform: scale(4);
}
`,
})
export class CameraBatteryComponent {
private readonly destroyRef = inject(DestroyRef);
private readonly platformId = inject(PLATFORM_ID);

protected readonly batterySignal = signal<boolean>(true);

ngOnInit() {
// Run on browser;
if (isPlatformBrowser(this.platformId)) {
const date = new Date(Date.UTC(2024, 0, 1, 0, 0, 0, 0));

interval(1000)
.pipe(
map(timer => timer % 2 === 0),
takeUntilDestroyed(this.destroyRef),
)
.subscribe(timer => {
this.batterySignal.update(() => timer);
});
}
}
}
53 changes: 53 additions & 0 deletions src/app/features/camera-timer/camera-timer.component.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
import { CommonModule, isPlatformBrowser } from '@angular/common';
import {
Component,
DestroyRef,
inject,
PLATFORM_ID,
signal,
} from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { interval, map, scan } from 'rxjs';

const initialDate = new Date().setHours(0, 0, 0, 0);

@Component({
selector: 'app-camera-timer',
standalone: true,
imports: [CommonModule],
template: `
{{ timerSignal() | date: 'HH:mm:ss:SSS' }}
`,
styles: `
:host {
font-size: 40px;
font-weight: 900;
}
`,
})
export class CameraTimerComponent {
private readonly destroyRef = inject(DestroyRef);
private readonly platformId = inject(PLATFORM_ID);

protected readonly timerSignal = signal('2024-12-31T00:00:00.000Z');

ngOnInit() {
// Run on browser;
if (isPlatformBrowser(this.platformId)) {
const date = new Date(Date.UTC(2024, 0, 1, 0, 0, 0, 0));

interval(1)
.pipe(
scan((acc, curr) => {
acc.setMilliseconds(acc.getMilliseconds() + 1);
return acc;
}, date),
map(timer => timer.toISOString().slice(0, 23)),
takeUntilDestroyed(this.destroyRef),
)
.subscribe(timer => {
this.timerSignal.update(() => timer);
});
}
}
}
Loading

0 comments on commit 7823090

Please sign in to comment.