feat: improve code

angular.json

@@ -35,13 +35,13 @@
               "budgets": [
                 {
                   "type": "initial",
-                  "maximumWarning": "500kb",
-                  "maximumError": "1mb"
+                  "maximumWarning": "5mb",
+                  "maximumError": "5mb"
                 },
                 {
                   "type": "anyComponentStyle",
-                  "maximumWarning": "2kb",
-                  "maximumError": "4kb"
+                  "maximumWarning": "50kb",
+                  "maximumError": "50kb"
                 }
               ],
               "outputHashing": "all"

src/app/app-routing.module.ts

@@ -4,7 +4,7 @@ import { HomeComponent } from './home/home.component';
 import { AboutComponent } from './about/about.component';
 import { ClipComponent } from './clip/clip.component';
 import { NotFoundComponent } from './not-found/not-found.component';
-
+import { ClipService } from './services/clip.service';
 const routes: Routes = [
   {
     path: '',
@@ -17,6 +17,14 @@ const routes: Routes = [
   {
     path: 'clip/:id',
     component: ClipComponent,
+    resolve: {
+      clip: ClipService,
+    },
+  },
+  {
+    path: '',
+    loadChildren: async () =>
+      (await import('./video/video.module')).VideoModule,
   },
   {
     path: '**',

src/app/app.module.ts

@@ -11,7 +11,6 @@ import { AngularFireAuthModule } from '@angular/fire/compat/auth';
 import { AngularFirestoreModule } from '@angular/fire/compat/firestore';
 import { HomeComponent } from './home/home.component';
 import { AboutComponent } from './about/about.component';
-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';
@@ -35,7 +34,6 @@ import { FbTimestampPipe } from './pipes/fb-timestamp.pipe';
     AngularFireModule.initializeApp(environment.firebaseConfig),
     AngularFireAuthModule,
     AngularFirestoreModule,
-    VideoModule,
     AppRoutingModule,
     AngularFireStorageModule,
   ],

src/app/clip/clip.component.css

@@ -0,0 +1,90 @@
+@import "node_modules/video.js/dist/video-js.css";
+@import "node_modules/@videojs/themes/fantasy/index.css";
+
+.vjs-theme-forest {
+  --vjs-theme-forest--primary: rgb(129, 140, 248);
+}
+
+.vjs-theme-forest.vjs-big-play-button:focus,
+.vjs-theme-forest:hover .vjs-big-play-button {
+  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='88' fill='%23818cf8'%3E%3Cpath fill-rule='evenodd' d='M44 88C19.738 88 0 68.262 0 44S19.738 0 44 0s44 19.738 44 44-19.738 44-44 44zm0-85C21.393 3 3 21.393 3 44c0 22.608 18.393 41 41 41s41-18.392 41-41C85 21.393 66.607 3 44 3zm16.063 43.898L39.629 60.741a3.496 3.496 0 01-3.604.194 3.492 3.492 0 01-1.859-3.092V30.158c0-1.299.712-2.483 1.859-3.092a3.487 3.487 0 013.604.194l20.433 13.843a3.497 3.497 0 01.001 5.795zm-1.683-3.311L37.946 29.744a.49.49 0 00-.276-.09.51.51 0 00-.239.062.483.483 0 00-.265.442v27.685c0 .262.166.389.265.442.1.053.299.118.515-.028L58.38 44.414A.489.489 0 0058.6 44a.49.49 0 00-.22-.413z'/%3E%3C/svg%3E");
+}
+
+.video-js {
+  position: initial;
+  position: initial;
+  width: 100%;
+}
+
+.video-js .vjs-control-bar {
+  height: 6em;
+}
+
+.vjs-button > .vjs-icon-placeholder:before {
+  font-size: 3.8em;
+}
+
+.video-js .vjs-button {
+  width: 6em;
+}
+
+.vjs-theme-forest .vjs-volume-bar.vjs-slider-horizontal,
+.vjs-theme-forest .vjs-volume-panel,
+.vjs-theme-forest
+  .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active,
+.vjs-theme-forest .vjs-volume-panel.vjs-volume-panel-horizontal:hover,
+.vjs-theme-forest
+  .vjs-volume-panel:active
+  .vjs-volume-control.vjs-volume-horizontal,
+.vjs-theme-forest .vjs-volume-panel:hover,
+.vjs-theme-forest
+  .vjs-volume-panel:hover
+  .vjs-volume-control.vjs-volume-horizontal {
+  width: 8em;
+}
+
+.video-js
+  .vjs-volume-panel
+  .vjs-volume-control.vjs-slider-active.vjs-volume-horizontal,
+.video-js .vjs-volume-panel .vjs-volume-control:active.vjs-volume-horizontal,
+.video-js
+  .vjs-volume-panel.vjs-hover
+  .vjs-mute-control
+  ~ .vjs-volume-control.vjs-volume-horizontal,
+.video-js .vjs-volume-panel.vjs-hover .vjs-volume-control.vjs-volume-horizontal,
+.video-js .vjs-volume-panel:active .vjs-volume-control.vjs-volume-horizontal,
+.video-js .vjs-volume-panel:focus .vjs-volume-control.vjs-volume-horizontal {
+  width: 8em;
+  height: 6em;
+  margin-right: 0;
+}
+
+.vjs-theme-forest .vjs-volume-bar:before {
+  border-left-width: 8em;
+  border-bottom-width: 5em;
+}
+
+.vjs-theme-forest .vjs-volume-level::before {
+  border-left-width: 8em;
+  border-bottom-width: 5em;
+}
+
+.vjs-theme-forest .vjs-progress-holder {
+  height: 2em;
+}
+
+.video-js
+  .vjs-progress-control:hover
+  .vjs-progress-holder:focus
+  .vjs-time-tooltip,
+.video-js .vjs-progress-control:hover .vjs-time-tooltip {
+  font-size: 2em;
+}
+
+.video-js .vjs-time-tooltip {
+  top: -2em;
+}
+
+.video-js .vjs-time-control {
+  font-size: 2em;
+}

src/app/clip/clip.component.html

@@ -2,17 +2,16 @@
 <section class="container mx-auto my-8 bg-secondary p-6">
   <div class="rounded relative flex flex-col">
     <!-- Title and Uploader -->
-    <h1 class="font-bold mb-2 text-3xl">{{ id }}</h1>
+    <h1 class="font-bold mb-2 text-3xl">{{ clip?.title }}</h1>
     <div class="text-gray-400 mb-6">
-      Uploaded By Luis on
-      <span>March 25, 2022</span>
+      Uploaded By {{clip?.displayName}}
+      <span>{{ clip?.timestamp | fbTimestamp }}</span>
     </div>
 
     <!-- Video Editor -->
-    <div class="relative">
+    <div class="relative aspect-video overflow-hidden">
       <!-- Video Player -->
-      <video #videoPlayer controls class="video-js vjs-theme-forest mx-auto">
-        <source src="assets/video/hero.webm" type="video/webm">
+      <video #videoPlayer crossorigin controls class="video-js vjs-theme-forest mx-auto">
       </video>
     </div>
   </div>

src/app/clip/clip.component.ts

@@ -1,21 +1,39 @@
-import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
+import {
+  Component,
+  OnInit,
+  ViewChild,
+  ElementRef,
+  ViewEncapsulation,
+} from '@angular/core';
 import { ActivatedRoute, Params } from '@angular/router';
 import videojs from 'video.js';
+import IClip from '../models/clips.model';
+import { DatePipe } from '@angular/common';
 
 @Component({
   selector: 'app-clip',
   templateUrl: './clip.component.html',
   styleUrls: ['./clip.component.css'],
+  encapsulation: ViewEncapsulation.None,
+  providers: [DatePipe],
 })
 export class ClipComponent implements OnInit {
   id: string = '';
+  clip?: IClip;
+
   @ViewChild('videoPlayer', { static: true }) target?: ElementRef;
   player?: videojs.Video;
   constructor(public route: ActivatedRoute) {}
   ngOnInit(): void {
     this.player = videojs(this.target?.nativeElement);
-    this.route.params.subscribe((params: Params) => {
-      this.id = params['id'];
+    console.log();
+    this.route.data.subscribe((data) => {
+      console.log(data);
+      this.clip = data['clip'] as IClip;
+      this.player?.src({
+        src: this.clip.url,
+        type: 'video/mp4',
+      });
     });
   }
 }

src/app/pipes/fb-timestamp.pipe.ts

@@ -7,7 +7,8 @@ import { DatePipe } from '@angular/common';
 })
 export class FbTimestampPipe implements PipeTransform {
   constructor(private datePipe: DatePipe) {}
-  transform(value: firebase.firestore.FieldValue) {
+  transform(value: firebase.firestore.FieldValue | undefined) {
+    if (!value) return '';
     const date = (value as firebase.firestore.Timestamp).toDate();
     return this.datePipe.transform(date, 'mediumDate');
   }

src/app/services/clip.service.ts

@@ -8,20 +8,34 @@ import {
 import { AngularFireStorage } from '@angular/fire/compat/storage';
 import IClip from '../models/clips.model';
 import { AngularFireAuth } from '@angular/fire/compat/auth';
-import { map, of, switchMap, BehaviorSubject, combineLatest } from 'rxjs';
+import {
+  map,
+  of,
+  switchMap,
+  BehaviorSubject,
+  combineLatest,
+  Observable,
+} from 'rxjs';
+import {
+  ActivatedRouteSnapshot,
+  Resolve,
+  Router,
+  RouterStateSnapshot,
+} from '@angular/router';
 
 @Injectable({
   providedIn: 'root',
 })
-export class ClipService {
+export class ClipService implements Resolve<IClip | null> {
   public clipsCollection: AngularFirestoreCollection<IClip>;
   pagesClips: IClip[] = [];
   pendingRequest: boolean = false;
 
   constructor(
     private db: AngularFirestore,
     private auth: AngularFireAuth,
-    private storage: AngularFireStorage
+    private storage: AngularFireStorage,
+    private router: Router
   ) {
     this.clipsCollection = db.collection('clips');
   }
@@ -84,4 +98,26 @@ export class ClipService {
     });
     this.pendingRequest = false;
   }
+
+  resolve(
+    route: ActivatedRouteSnapshot,
+    state: RouterStateSnapshot
+  ): IClip | Observable<IClip | null> | Promise<IClip | null> | null {
+    console.log('-------------------------------');
+    console.log(route.params['id']);
+    console.log('-------------------------------');
+    return this.clipsCollection
+      .doc(route.params['id'])
+      .get()
+      .pipe(
+        map((snapshot) => {
+          const data = snapshot.data();
+          if (!data) {
+            this.router.navigate(['/']);
+            return null;
+          }
+          return data;
+        })
+      );
+  }
 }

src/app/video/manage/manage.component.html

@@ -18,18 +18,19 @@
     <div class="mt-6 rounded-tl-2xl rounded-br-2xl shadow-xl bg-secondary flex flex-col justify-start">
 
       <!-- Image -->
-      <a href="#">
-        <img class="card-img-top rounded-tl-2xl w-full" src="assets/img/1.jpg">
+      <a [routerLink]="['/','clip', clip.docID]">
+        <img class="card-img-top rounded-tl-2xl w-full" [src]="clip.screenshotURl" crossorigin>
       </a>
 
       <!-- Body -->
       <div class="p-6 text-2xl">
 
         <!-- Link -->
-        <a href="#" class="font-bold mb-2">
+        <a [routerLink]="['/', 'clip', clip.docID]" class="font-bold mb-2">
           {{clip.title}}
         </a>
-        <a href="#" class="bg-gray-400 text-white px-2 py-1 ml-2 text-sm rounded">
+        <a (click)="copyToClipboard($event, clip.docID)" href="#"
+          class="bg-gray-400 text-white px-2 py-1 ml-2 text-sm rounded">
           Copy Link
         </a>
 
@@ -49,4 +50,4 @@
     </div>
   </div>
 </div>
-<app-edit [activeClip]='activeClip' (update)="update($event)"></app-edit>
+<app-edit [activeClip]='activeClip' (update)="update($event)"></app-edit>

src/app/video/manage/manage.component.ts

@@ -73,4 +73,16 @@ export class ManageComponent implements OnInit {
       }
     });
   }
+
+  async copyToClipboard(
+    $event: MouseEvent,
+    docID: string | undefined
+  ): Promise<void> {
+    $event.preventDefault();
+    if (!docID) return;
+    const url = `${location.origin}/clip/${docID}`;
+    await navigator.clipboard.writeText(url);
+
+    alert('Link Copied!');
+  }
 }