Revert "fix prejoin layout shift when video starts (#219)"

This reverts commit 6260a76.

Author: lukasIO

packages/react/src/prefabs/PreJoin.tsx

@@ -259,14 +259,11 @@ export const PreJoin = ({
 
   return (
     <div className="lk-prejoin" {...htmlProps}>
-      <div className="lk-video-container">
-        {localVideoTrack && <video ref={videoEl} />}
-        {/* {localVideoTrack?.isMuted === true && (
-          <div className="lk-placeholder">
-            <ParticipantPlaceholder />
-          </div>
-        )} */}
-      </div>
+      {localVideoTrack ? (
+        <video ref={videoEl} />
+      ) : (
+        <div className="lk-camera-off-note">Camera is off</div>
+      )}
       {localAudioTrack ? (
         <div className="lk-audio-container">
           <audio ref={audioEl} />
@@ -317,7 +314,7 @@ export const PreJoin = ({
 
       <form className="lk-username-container">
         <input
-          className="lk-form-control"
+          className="form-control"
           id="username"
           name="username"
           type="text"

packages/styles/scss/prefab-components/_prejoin.scss

@@ -7,29 +7,20 @@
   margin-inline: auto;
   background-color: var(--bg);
 
-  .video-container {
+  video {
+    display: block;
     width: 480px;
     max-width: 100%;
+    height: auto;
+    transform: rotateY(180deg);
     border-radius: var(--lk-border-radius);
-    aspect-ratio: 16 / 10;
-    overflow: hidden;
-
-    video {
-      max-height: 100%;
-      display: block;
-      transform: rotateY(180deg);
-      object-fit: cover;
-    }
+  }
 
-    .placeholder {
-      width: 100%;
-      height: 100%;
-      display: grid;
-      place-content: center;
-      svg {
-        padding: 20%;
-      }
-    }
+  .camera-off-note {
+    width: 100%;
+    height: 11.25rem;
+    background-color: #000;
+    border-radius: var(--lk-border-radius);
   }
 
   .audio-container {