UI fixes encountered while testing

Main fixes:
- Reduce head size when video is in portrait mode. (Size was based on video width only, not it's on both width and height.)
- Fix VideoReview styling (centering, constrained width) when shown
  outside a lesson.
- Audio: counting down for step training was too fast.

Author: jakmeier

bouncy_frontend/src/lib/components/review/VideoReview.svelte

@@ -54,7 +54,7 @@
   $: beatsPerStep =
     detectedSteps.length > 0 ? detectedSteps[0].poses.length : 4;
   $: avatarSizePixels = videoSrcHeight;
-  $: headRadius = 0.075 * videoSrcHeight;
+  $: headRadius = 0.075 * Math.min(videoSrcHeight, videoSrcWidth);
   let markedSegments = [];
   $: if (keypointSkeleton) {
     markedSegments = limbErrors.map((limb) => limb.render(keypointSkeleton));
@@ -359,13 +359,15 @@ once per 250ms. -->
   .poses-details {
     display: flex;
     overflow-x: auto;
+    max-width: 100%;
   }
 
   .background-strip {
     margin: 10px -25px;
     padding: 10px 30px;
     border-radius: 10px;
     box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.55);
+    text-align: center;
   }
 
   .beat-label {

bouncy_frontend/src/routes/collection/step/[stepName]/[recordMode]/+page.svelte

@@ -24,7 +24,8 @@
   const tracker = Tracker.UniqueStepTracker(instructorStep.id);
   registerTracker(tracker);
   setBpm(120);
-  setHalfSpeed(isLearnMode);
+  // setHalfSpeed(isLearnMode);
+  setHalfSpeed(true);
 
   const userCtx = getContext('user');
 
@@ -132,7 +133,7 @@
     if (isLearnMode) {
       showLearnModeHint.set(true);
       showLearnModeHint.subscribe((hintShown) => {
-        if (!$showLearnModeHint && isLearnMode && !isModelOn) {
+        if (!$showLearnModeHint && !hintShown && !isModelOn) {
           turnOnRecording();
         }
       });
@@ -141,7 +142,7 @@
     if (isTrainMode) {
       showTrainModeHint.set(true);
       showTrainModeHint.subscribe((hintShown) => {
-        if (!$showTrainModeHint && isTrainMode && !isModelOn) {
+        if (!$showTrainModeHint && !hintShown && !isModelOn) {
           turnOnRecording();
         }
       });
@@ -169,10 +170,10 @@
       ></VideoReview>
       <div>
         <a href={reviewVideoSrc} download>
-          <Button class="light" symbol="download" text="record.download" />
+          <Button class="light wide" symbol="download" text="record.download" />
         </a>
         <Button
-          class="light"
+          class="light wide"
           on:click={closeReview}
           symbol="arrow_back"
           text="record.back-button"
@@ -187,19 +188,19 @@
     </div>
     <div class="buttons">
       <Button
-        class="light"
+        class="light wide"
         on:click={openReview}
         symbol="tv"
         text="record.review-button"
       />
       <Button
-        class="light"
+        class="light wide"
         on:click={reset}
         symbol="videocam"
         text="record.reset-button"
       />
       <Button
-        class="light"
+        class="light wide"
         on:click={goBackToStep}
         symbol="arrow_back"
         text="record.back-button"
@@ -223,8 +224,9 @@
     <div>
       <Button
         on:click={stopCameraAndRecording}
+        class="light wide"
         symbol="camera"
-        text="record.stop-button"
+        text="record.stop-record"
       />
     </div>
     <LiveRecordingSettings
@@ -265,7 +267,7 @@
 
   .buttons {
     display: grid;
-    grid-template-columns: auto auto auto;
+    grid-template-columns: auto;
   }
 
   div.title {

bouncy_frontend/src/routes/courses/[courseId]/exercise/[lessonIndex]/record/+page.svelte

@@ -151,7 +151,7 @@
     const detected = tracker.lastDetection;
     hitRate =
       detected.poseMatches / (detected.poseMisses + detected.poseMatches);
-    passed = hitRate > 0.6;
+    passed = hitRate >= 0.6;
     if (passed) {
       recordFinishedLesson(id, lessonIndex, 1);
     }