lain speaking issue and other minor bugfixes

src/components/EndScene/EndCylinder.tsx

@@ -1,9 +1,9 @@
-import React from "react";
+import React, { memo } from "react";
 import * as THREE from "three";
 import { useLoader } from "react-three-fiber";
 import mainCylinder from "../../static/sprites/end/end_cylinder_1.png";
 
-const EndCylinder = () => {
+const EndCylinder = memo(() => {
   const mainCylinderTex = useLoader(THREE.TextureLoader, mainCylinder);
 
   return (
@@ -54,6 +54,6 @@ const EndCylinder = () => {
       </mesh>
     </>
   );
-};
+});
 
 export default EndCylinder;

src/components/EndScene/EndSphere.tsx

@@ -1,4 +1,4 @@
-import React, { useRef } from "react";
+import React, { useRef, memo } from "react";
 import * as THREE from "three";
 import { useFrame, useLoader } from "react-three-fiber";
 import secondCylinder from "../../static/sprites/end/end_cylinder_2.png";
@@ -8,7 +8,7 @@ type EndSphereProps = {
   outroAnim: boolean;
 };
 
-const EndSphere = (props: EndSphereProps) => {
+const EndSphere = memo((props: EndSphereProps) => {
   const secondCylinderTex = useLoader(THREE.TextureLoader, secondCylinder);
 
   const meshRef = useRef<THREE.Object3D>();
@@ -46,6 +46,6 @@ const EndSphere = (props: EndSphereProps) => {
       />
     </mesh>
   );
-};
+});
 
 export default EndSphere;

src/components/LainSpeak.tsx

@@ -44,14 +44,22 @@ const LainSpeak = (props: LainTaKProps) => {
 
   useFrame(() => {
     if (audioAnalyser) {
-      const freq = audioAnalyser.getAverageFrequency() * 1.2;
+      const buffer = new Uint8Array(audioAnalyser.analyser.fftSize / 2);
+      audioAnalyser.analyser.getByteTimeDomainData(buffer);
+
+      let rms = 0;
+      for (let i = 0; i < buffer.length; i++) {
+        rms += buffer[i] * buffer[i];
+      }
+
+      rms = Math.sqrt(rms / buffer.length);
 
       if (mouthRef.current) {
-        if (freq >= 50) {
+        if (rms >= 130) {
           mouthRef.current.map = mouth4Tex;
-        } else if (freq >= 40 && freq <= 50) {
+        } else if (rms >= 129 && rms <= 130) {
           mouthRef.current.map = mouth3Tex;
-        } else if (freq >= 30 && freq <= 40) {
+        } else if (rms > 128 && rms <= 129) {
           mouthRef.current.map = mouth2Tex;
         } else {
           mouthRef.current.map = mouth1Tex;

src/components/MediaPlayer.tsx

@@ -67,7 +67,7 @@ const MediaPlayer = () => {
 
   return (
     <>
-      <video id="media" ref={videoRef}>
+      <video id="media" ref={videoRef} disablePictureInPicture>
         <track id={"track"} ref={trackRef} kind="metadata" default />
       </video>
       <div id={"subtitle-container"}>

src/components/MediaScene/AudioVisualizer/AudioVisualizer.tsx

@@ -5,7 +5,7 @@ import AudioVisualizerColumn from "./AudioVisualizerColumn";
 import { useStore } from "../../../store";
 
 const AudioVisualizer = memo(() => {
-  const audioAnalyser = useStore(state=> state.audioAnalyser)
+  const audioAnalyser = useStore((state) => state.audioAnalyser);
   const columnRefs = useMemo(
     () =>
       Array.from({ length: 15 }, () => [
@@ -27,9 +27,7 @@ const AudioVisualizer = memo(() => {
         const ref3 = refArray[2];
         const ref4 = refArray[3];
 
-        // we up it by 1.2 just so it becomes a bit more noticable, otherwise
-        // the visualizer is a bit too "calm"
-        const currentFrequency = frequencyData[16 * idx] * 1.2;
+        const currentFrequency = frequencyData[16 * idx];
 
         switch (true) {
           case currentFrequency >= 255:

src/core/input-handlers/handleMediaSceneInput.ts

@@ -1,7 +1,4 @@
-import {
-  findNodeFromWord,
-  playMediaElement,
-} from "../../helpers/media-helpers";
+import { findNodeFromWord } from "../../helpers/media-helpers";
 import {
   changeLeftMediaComponent,
   changeMediaSide,

src/dom-components/Notes.tsx

@@ -49,17 +49,22 @@ const Notes = () => {
           </tr>
           <tr>
             <td>
-              <p>Browser settings</p>
+              <p>Browser Settings</p>
             </td>
             <td>
               <p>
-                This part might be updated from time to time as more issues pop
-                up. <br />
-                <br />
-                Firefox: <br />
-                privacy.resistFingerprinting needs to be set to false (it should
-                be by default). Otherwise, it limits the maximum WebGL texture size to
-                2048, resulting in poor sprite quality.
+                <span className="text-center">Firefox</span>
+                <div className="browser-notes">
+                  privacy.resistFingerprinting should be set to false (it should
+                  be by default). Otherwise, it limits the maximum WebGL texture
+                  size to 2048, resulting in poor sprite quality.
+                  <br />
+                  <br />
+                  Picture-In-Picture functionality should not be used (you most
+                  likely have it disabled already). Just having it enabled won't
+                  break anything, but actually using it might lead to some funny
+                  visual bugs with media files.
+                </div>
               </p>
             </td>
           </tr>