Skip to content

Commit

Permalink
feat: scroll infinty
Browse files Browse the repository at this point in the history
  • Loading branch information
Leonardo committed Mar 21, 2023
1 parent 19a2f58 commit 1ea88c7
Show file tree
Hide file tree
Showing 11 changed files with 539 additions and 326 deletions.
8 changes: 8 additions & 0 deletions cors.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
[
{
"origin": ["*"],
"responseHeaders": ["Content-Type"],
"method": ["GET"],
"maxAgeSeconds": 3600
}
]
410 changes: 405 additions & 5 deletions package-lock.json

Large diffs are not rendered by default.

3 changes: 3 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -23,18 +23,21 @@
"@ffmpeg/ffmpeg": "^0.11.6",
"@types/node": "^18.15.3",
"@types/uuid": "^9.0.1",
"@videojs/themes": "^1.0.1",
"firebase": "^9.17.2",
"ngx-mask": "^14.2.4",
"rxjs": "~7.5.0",
"tslib": "^2.3.0",
"uuid": "^9.0.0",
"video.js": "^8.0.4",
"zone.js": "~0.12.0"
},
"devDependencies": {
"@angular-devkit/build-angular": "^15.0.4",
"@angular/cli": "~15.0.4",
"@angular/compiler-cli": "^15.0.0",
"@types/jasmine": "~4.3.0",
"@types/video.js": "^7.3.51",
"autoprefixer": "^10.4.13",
"jasmine-core": "~4.5.0",
"karma": "~6.4.0",
Expand Down
4 changes: 4 additions & 0 deletions src/app/app.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,8 @@ import { VideoModule } from './video/video.module';
import { ClipComponent } from './clip/clip.component';
import { NotFoundComponent } from './not-found/not-found.component';
import { AngularFireStorageModule } from '@angular/fire/compat/storage';
import { ClipListComponent } from './clip-list/clip-list.component';
import { FbTimestampPipe } from './pipes/fb-timestamp.pipe';

@NgModule({
declarations: [
Expand All @@ -24,6 +26,8 @@ import { AngularFireStorageModule } from '@angular/fire/compat/storage';
AboutComponent,
ClipComponent,
NotFoundComponent,
ClipListComponent,
FbTimestampPipe,
],
imports: [
BrowserModule,
Expand Down
Empty file.
38 changes: 38 additions & 0 deletions src/app/clip-list/clip-list.component.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
<!-- Clips List -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
<a *ngFor="let clip of clipService.pagesClips" [routerLink]="['/','clip', clip.docID]"
class="mt-6 rounded-tl-2xl rounded-br-2xl shadow-xl bg-secondary transform hover:-translate-y-2 hover:shadow-2xl transition duration-300">

<!-- Image -->
<img class="card-img-top rounded-tl-2xl w-full" [src]="clip.screenshotURl" crossorigin>

<!-- Shape -->
<div class="relative">
<div class="absolute pointer-events-none bottom-full w-full bg-secondary text-white">
<div class="absolute bottom-full w-full pb-5 overflow-hidden">
<svg viewBox="0 0 100 50" preserveAspectRatio="none" class="absolute bottom-0 w-full h-full tranform"
style="transform-origin: top center; transform: scale(2);">
<path d="M0 25h25L75 0h25v50H0z" fill="#283046"></path>
</svg>
</div>
</div>
</div>

<!-- Body -->
<div class="p-8">

<!-- Heading -->
<h2 class="text-3xl mb-2">
{{clip.title}}
</h2>

<!-- Name & Date -->
<p class="mb-0">
{{clip.displayName}} &#183;
<span class="text-gray-400">{{clip.timestamp | fbTimestamp}}</span>
</p>

</div>

</a>
</div>
36 changes: 36 additions & 0 deletions src/app/clip-list/clip-list.component.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
import { Component, OnDestroy, OnInit, Input } from '@angular/core';
import { ClipService } from '../services/clip.service';
import { DatePipe } from '@angular/common';

@Component({
selector: 'app-clip-list',
templateUrl: './clip-list.component.html',
styleUrls: ['./clip-list.component.css'],
providers: [DatePipe],
})
export class ClipListComponent implements OnInit, OnDestroy {
@Input() scrollable = true;
constructor(public clipService: ClipService) {
this.clipService.getClips();
}
ngOnInit(): void {
if (this.scrollable) window.addEventListener('scroll', this.handleScroll);
}

ngOnDestroy(): void {
if (this.scrollable)
window.removeEventListener('scroll', this.handleScroll);

this.clipService.pagesClips = [];
}
handleScroll = () => {
const { scrollTop, offsetHeight } = document.documentElement;
const { innerHeight } = window;
const bottomOfWindows =
Math.round(scrollTop) + innerHeight === offsetHeight;

if (bottomOfWindows) {
this, this.clipService.getClips();
}
};
}
108 changes: 1 addition & 107 deletions src/app/clip/clip.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -23,111 +23,5 @@ <h1 class="font-bold mb-2 text-3xl">{{ id }}</h1>
<h2 class="mt-6 text-2xl">More Clips</h2>

<!-- Video List -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
<a routerLink="/clip/b"
class="mt-6 rounded-tl-2xl rounded-br-2xl shadow-xl bg-secondary transform hover:-translate-y-2 hover:shadow-2xl transition duration-300">

<!-- Image -->
<img class="card-img-top rounded-tl-2xl w-full" src="assets/img/1.jpg">

<!-- Shape -->
<div class="relative">
<div class="absolute pointer-events-none bottom-full w-full bg-secondary text-white">
<div class="absolute bottom-full w-full pb-5 overflow-hidden">
<svg viewBox="0 0 100 50" preserveAspectRatio="none" class="absolute bottom-0 w-full h-full tranform"
style="transform-origin: top center; transform: scale(2);">
<path d="M0 25h25L75 0h25v50H0z" fill="#283046"></path>
</svg>
</div>
</div>
</div>

<!-- Body -->
<div class="p-8">

<!-- Heading -->
<h2 class="text-3xl mb-2">
Game Highlighting Clip
</h2>

<!-- Name & Date -->
<p class="mb-0">
Luis Ramirez &#183;
<span class="text-gray-400">March 31, 2020</span>
</p>

</div>

</a>
<a href="#"
class="mt-6 rounded-tl-2xl rounded-br-2xl shadow-xl bg-secondary transform hover:-translate-y-2 hover:shadow-2xl transition duration-300">

<!-- Image -->
<img class="card-img-top rounded-tl-2xl w-full" src="assets/img/2.jpg">

<!-- Shape -->
<div class="relative">
<div class="absolute pointer-events-none bottom-full w-full bg-secondary text-white">
<div class="absolute bottom-full w-full pb-5 overflow-hidden">
<svg viewBox="0 0 100 50" preserveAspectRatio="none" class="absolute bottom-0 w-full h-full tranform"
style="transform-origin: top center; transform: scale(2);">
<path d="M0 25h25L75 0h25v50H0z" fill="#283046"></path>
</svg>
</div>
</div>
</div>

<!-- Body -->
<div class="p-8">

<!-- Heading -->
<h2 class="text-3xl mb-2">
Game Highlighting Clip
</h2>

<!-- Name & Date -->
<p class="mb-0">
Luis Ramirez &#183;
<span class="text-gray-400">March 31, 2020</span>
</p>

</div>

</a>
<a href="#"
class="mt-6 rounded-tl-2xl rounded-br-2xl shadow-xl bg-secondary transform hover:-translate-y-2 hover:shadow-2xl transition duration-300">

<!-- Image -->
<img class="card-img-top rounded-tl-2xl w-full" src="assets/img/3.jpg">

<!-- Shape -->
<div class="relative">
<div class="absolute pointer-events-none bottom-full w-full bg-secondary text-white">
<div class="absolute bottom-full w-full pb-5 overflow-hidden">
<svg viewBox="0 0 100 50" preserveAspectRatio="none" class="absolute bottom-0 w-full h-full tranform"
style="transform-origin: top center; transform: scale(2);">
<path d="M0 25h25L75 0h25v50H0z" fill="#283046"></path>
</svg>
</div>
</div>
</div>

<!-- Body -->
<div class="p-8">

<!-- Heading -->
<h2 class="text-3xl mb-2">
Game Highlighting Clip
</h2>

<!-- Name & Date -->
<p class="mb-0">
Luis Ramirez &#183;
<span class="text-gray-400">March 31, 2020</span>
</p>

</div>

</a>
</div>
<app-clip-list [scrollable]="false"></app-clip-list>
</div>
Loading

0 comments on commit 1ea88c7

Please sign in to comment.