linting

client/public/metadata.json

@@ -1 +1 @@
-{"buildMajor":1,"buildMinor":125,"buildRevision":258,"buildTag":"dev","buildDate":"Thu Aug 01 2024","build":"1.125.258 dev"}
+{"buildMajor":1,"buildMinor":125,"buildRevision":259,"buildTag":"dev","buildDate":"Fri Aug 02 2024","build":"1.125.259 dev"}

client/src/components/buttons/VoicePageButton.jsx

@@ -2,26 +2,24 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import './oabutton.css';
 
-export class VoicePageButton extends React.Component {
-  render() {
-    return (
-      <button
-        type="button"
-        className={
+export function VoicePageButton(props) {
+  return (
+    <button
+      type="button"
+      className={
         `oa-button-modern ${
-          this.props.highlighted && this.props.highlightRed ? 'button-off ' : ''
-        }${this.props.highlighted && this.props.highlightGreen ? 'button-on ' : ''
-        }${this.props.isDisabled ? 'disabled ' : ''}`
+          props.highlighted && props.highlightRed ? 'button-off ' : ''
+        }${props.highlighted && props.highlightGreen ? 'button-on ' : ''
+        }${props.isDisabled ? 'disabled ' : ''}`
       }
-        onClick={this.props.onClick}
-        disabled={this.props.isEnabled}
-      >
-        <div className="content">
-          {this.props.children}
-        </div>
-      </button>
-    );
-  }
+      onClick={props.onClick}
+      disabled={props.isEnabled}
+    >
+      <div className="content">
+        {props.children}
+      </div>
+    </button>
+  );
 }
 
 // default props

client/src/components/voice/VoicePeerBox.jsx

@@ -62,18 +62,16 @@ function VoicePeerBox(props) {
                 </div>
               </div>
             </div>
-
           </div>
         </div>
-
       </div>
     );
   }
 
   // is there anyone?
   if (peers.length === 0) {
     return (
-      <div className="w-full flex h-full justify-center align-middle">
+      <div className="w-full flex justify-center align-middle">
         <div className="content-section flex justify-center w-4/5">
           <div className="flex content-card-collection items-stretch">
             <div className="w-full content-card small-card order-2 2xl:order-1">

client/src/components/voice/VoicePeerRow.jsx

@@ -22,8 +22,6 @@ export class VoicePeerRow extends React.Component {
     speaking: PropTypes.bool,
     loading: PropTypes.bool,
     hideVolume: PropTypes.bool,
-    altText: PropTypes.string,
-    minimal: PropTypes.bool,
     spatialAudio: PropTypes.bool,
   };
 
@@ -35,8 +33,6 @@ export class VoicePeerRow extends React.Component {
     speaking: false,
     loading: false,
     hideVolume: false,
-    altText: null,
-    minimal: false,
     spatialAudio: false,
   };
 

client/src/components/voice/ui/GeneralVoiceSettings.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import './generalcettings.css';
 import { connect } from 'react-redux';
+import { Tooltip } from 'react-tooltip';
 import { getTranslation, msg } from '../../../client/OpenAudioAppContainer';
 import {
   addMicVolumeListener,
@@ -145,7 +146,11 @@ class GeneralVoiceSettings extends React.Component {
               <div
                 className="relative w-11 h-6 bg-gray-200 rounded-full peer dark:bg-gray-700 peer-focus:ring-4 peer-focus:ring-teal-300 dark:peer-focus:ring-teal-800 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-teal-600"
               />
-              <span className="ms-3 text-sm font-medium text-gray-900 dark:text-gray-300">{msg('vc.settings.monitoring.title')}</span>
+              <span
+                className="ms-3 text-sm font-medium text-gray-900 dark:text-gray-300"
+              >
+                {msg('vc.settings.monitoring.title')}
+              </span>
             </label>
 
             <label className="inline-flex items-center me-5 cursor-pointer" htmlFor="enable-spatialaudio">
@@ -215,6 +220,12 @@ class GeneralVoiceSettings extends React.Component {
               </div>
             </div>
 
+            <Tooltip
+              title={msg('vc.noMicInputYetTitle')}
+              text={msg('vc.noMicInputYetBody')}
+              visible={!this.props.voiceState.microphoneTriggeredOnce && this.props.voiceState.microphoneSanityPrompt}
+            />
+
             <div
               className="pt-2"
               dangerouslySetInnerHTML={{ __html: msg('vc.aboutSensitivity') }}

client/src/components/voice/ui/VoiceQuickSettings.jsx

@@ -2,25 +2,21 @@ import React from 'react';
 import { connect } from 'react-redux';
 import { setGlobalState } from '../../../state/store';
 import { reRenderAllGainNodes } from '../../../client/services/voice/VoiceModule';
-import { Tooltip } from '../../tooltip/tooltip';
 import { msg } from '../../../client/OpenAudioAppContainer';
 import { PipVector } from '../../dpip/PipVector';
 import { VoiceMicButtonContent } from '../../icons/VoiceMic';
 import { VoiceDeafenButtonContent } from '../../icons/VoicechatDeafenButton';
 import { VoicePageButton } from '../../buttons/VoicePageButton';
+import { DocumentPictureInPicture } from '../../dpip/DocumentPictureInPicture';
+import VoiceChatPiP from '../../dpip/VoiceChatPiP';
 
 import './quicksettings.css';
 
 class VoiceQuickSettings extends React.Component {
   constructor(props) {
     super(props);
 
-    this.state = {
-      advancedSettings: false,
-    };
-
     this.onVolumeChange = this.onVolumeChange.bind(this);
-    this.toggleAdvancedSettings = this.toggleAdvancedSettings.bind(this);
     this.toggleMicMute = this.toggleMicMute.bind(this);
     this.togglePiP = this.togglePiP.bind(this);
     this.toggleDeafen = this.toggleDeafen.bind(this);
@@ -40,10 +36,6 @@ class VoiceQuickSettings extends React.Component {
     setGlobalState({ settings: { voicePiPEnabled: !this.props.voicePiPEnabled } });
   }
 
-  toggleAdvancedSettings() {
-    this.setState({ advancedSettings: !this.state.advancedSettings });
-  }
-
   toggleMicMute() {
     const muted = !this.props.voicechatMuted;
     setGlobalState({ settings: { voicechatMuted: muted } });
@@ -158,6 +150,8 @@ class VoiceQuickSettings extends React.Component {
             </div>
           </div>
         </div>
+
+        {this.props.voicePiPEnabled ? <DocumentPictureInPicture><VoiceChatPiP /></DocumentPictureInPicture> : null}
       </div>
     );
   }

client/src/metadata.json

@@ -1 +1 @@
-{"buildMajor":1,"buildMinor":125,"buildRevision":258,"buildTag":"dev","buildDate":"Thu Aug 01 2024","build":"1.125.258 dev"}
+{"buildMajor":1,"buildMinor":125,"buildRevision":259,"buildTag":"dev","buildDate":"Fri Aug 02 2024","build":"1.125.259 dev"}

client/src/views/client/pages/settings/SettingsPage.jsx

@@ -186,7 +186,7 @@ function mapStateToProps(state) {
   };
 }
 
-export let pannerTrackers = {};
+export const pannerTrackers = {};
 
 export function untrackPanner(id) {
   delete pannerTrackers[id];

client/vite.config.js

@@ -29,7 +29,7 @@ export default defineConfig({
     },
   }, react({
     include: '**/*.jsx',
-  })],
+  }), eslint()],
   server: {
     port: 3000, host: true,
   },