feat: display static until camera is loaded (#18)

thisdot · Mar 22, 2023 · 7d6a7f8 · 7d6a7f8
1 parent ead3d4b
commit 7d6a7f8
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 6 deletions.
diff --git a/src/app/controller/controller.component.scss b/src/app/controller/controller.component.scss
@@ -20,10 +20,10 @@
     content: '';
     display: block;
     position: absolute;
-    left: 2%;
+    left: 2.2%;
     right: 3.4%;
     top: 6%;
-    bottom: 9%;
+    bottom: 9.5%;
     background: $orange;
     background: linear-gradient(215deg, $orange 0%, $orange--saturated 50%);
     box-shadow: rgba(0, 0, 0, 0.05) -3px -3px 6px 1px inset;

diff --git a/src/app/controller/webcam/webcam.component.html b/src/app/controller/webcam/webcam.component.html
@@ -7,3 +7,26 @@
   (cameraFeedCreated)="cameraFeedCreated()"
   (directionChange)="estimatedDirectionChange($event)"
 ></video>
+
+<div class="placeholder">
+  <div
+    class="placeholder__noise"
+    [ngClass]="{
+      'placeholder__noise--fadeout':
+        cameraFeedInitialized && handDetectorInitialized
+    }"
+  ></div>
+  <svg>
+    <filter id="noise">
+      <feTurbulence id="turbulence">
+        <animate
+          attributeName="baseFrequency"
+          dur="75s"
+          values="0.9 0.9;0.8 0.8; 0.9 0.9"
+          repeatCount="indefinite"
+        ></animate>
+      </feTurbulence>
+      <feDisplacementMap in="SourceGraphic" scale="60"></feDisplacementMap>
+    </filter>
+  </svg>
+</div>
diff --git a/src/app/controller/webcam/webcam.component.scss b/src/app/controller/webcam/webcam.component.scss
@@ -18,13 +18,46 @@
 
 video {
   display: block;
-  object-fit: cover;
-  aspect-ratio: 4/3;
   box-sizing: border-box;
   border: 4px solid $red--200;
   border-radius: 10px;
+  object-fit: cover;
+  aspect-ratio: 4/3;
   min-width: 100%;
   min-height: 100%;
   // trick to flip the video
   transform: scaleX(-1);
 }
+
+.placeholder {
+  position: absolute;
+  top: 8px;
+  left: 8px;
+  right: 8px;
+  bottom: 8px;
+  aspect-ratio: 4/3;
+  object-fit: cover;
+  overflow: hidden;
+  border-radius: 15px;
+
+  &__noise {
+    position: absolute;
+    top: -50px;
+    left: -50px;
+    width: calc(100% + 50px);
+    height: calc(100% + 50px);
+    background: repeating-linear-gradient(#111, #111 50%, white 50%, white);
+    background-size: 5px 5px;
+    filter: url(#noise);
+    opacity: 0.7;
+    transition: opacity 0.5s ease-in-out;
+    &--fadeout {
+      opacity: 0;
+    }
+  }
+
+  svg {
+    width: 0;
+    height: 0;
+  }
+}
diff --git a/src/app/controller/webcam/webcam.component.ts b/src/app/controller/webcam/webcam.component.ts
@@ -1,6 +1,6 @@
 import { Component, EventEmitter, Output } from '@angular/core';
 
-import { AsyncPipe } from '@angular/common';
+import { AsyncPipe, NgClass } from '@angular/common';
 import { HandDetectorDirective } from './hand-detector.directive';
 import { CameraFeedDirective } from './camera-feed.directive';
 import { GameService } from '../../game/game.service';
@@ -11,7 +11,7 @@ import { Direction } from '../../game/game.model';
   templateUrl: './webcam.component.html',
   styleUrls: ['./webcam.component.scss'],
   standalone: true,
-  imports: [AsyncPipe, CameraFeedDirective, HandDetectorDirective],
+  imports: [AsyncPipe, CameraFeedDirective, HandDetectorDirective, NgClass],
 })
 export class WebcamComponent {
   private cameraFeedInitializedInternal = false;