ref(TS) Convert always-on-top to TS (#13332)

globals.d.ts

         JitsiMeetElectron?: any;
         // selenium tests handler
         _sharedVideoPlayer: any;
+        alwaysOnTop: { api: any };
     }
 
     interface Document {

react/features/always-on-top/AlwaysOnTop.js → react/features/always-on-top/AlwaysOnTop.tsx

-// @flow
-
 import React, { Component } from 'react';
 
 // We need to reference these files directly to avoid loading things that are not available
 /**
  * The type of the React {@code Component} state of {@link AlwaysOnTop}.
  */
-type State = {
-    avatarURL: string,
-    customAvatarBackgrounds: Array<string>,
-    displayName: string,
-    formattedDisplayName: string,
-    isVideoDisplayed: boolean,
-    userID: string,
-    visible: boolean
-};
+interface IState {
+    avatarURL: string;
+    customAvatarBackgrounds: Array<string>;
+    displayName: string;
+    formattedDisplayName: string;
+    isVideoDisplayed: boolean;
+    userID: string;
+    visible: boolean;
+}
 
 /**
  * Represents the always on top page.
  * @class AlwaysOnTop
  * @augments Component
  */
-export default class AlwaysOnTop extends Component<*, State> {
+export default class AlwaysOnTop extends Component<any, IState> {
     _hovered: boolean;
 
     /**
      * @param {*} props - The read-only properties with which the new instance
      * is to be initialized.
      */
-    constructor(props: *) {
+    constructor(props: any) {
         super(props);
 
         this.state = {
         this._onMouseOver = this._onMouseOver.bind(this);
     }
 
-    _avatarChangedListener: () => void;
-
     /**
      * Handles avatar changed api events.
      *
      * @returns {void}
      */
-    _avatarChangedListener({ avatarURL, id }) {
+    _avatarChangedListener({ avatarURL, id }: { avatarURL: string; id: string; }) {
         if (api._getOnStageParticipant() === id
                 && avatarURL !== this.state.avatarURL) {
             this.setState({ avatarURL });
         }
     }
 
-    _displayNameChangedListener: () => void;
-
     /**
      * Handles display name changed api events.
      *
      * @returns {void}
      */
-    _displayNameChangedListener({ displayname, formattedDisplayName, id }) {
+    _displayNameChangedListener({ displayname, formattedDisplayName, id }: { displayname: string;
+        formattedDisplayName: string; id: string; }) {
         if (api._getOnStageParticipant() === id
                 && (formattedDisplayName !== this.state.formattedDisplayName
                     || displayname !== this.state.displayName)) {
             TOOLBAR_TIMEOUT);
     }
 
-    _videoChangedListener: () => void;
-
     /**
      * Handles large video changed api events.
      *
         });
     }
 
-    _mouseMove: () => void;
-
     /**
      * Handles mouse move events.
      *
         this.state.visible || this.setState({ visible: true });
     }
 
-    _onMouseOut: () => void;
-
     /**
      * Toolbar mouse out handler.
      *
         this._hovered = false;
     }
 
-    _onMouseOver: () => void;
-
     /**
      * Toolbar mouse over handler.
      *
 
         this._hideToolbarAfterTimeout();
         api.getCustomAvatarBackgrounds()
-            .then(res =>
+            .then((res: { avatarBackgrounds?: string[]; }) =>
                 this.setState({
                     customAvatarBackgrounds: res.avatarBackgrounds || []
                 }))
      * @inheritdoc
      * @returns {void}
      */
-    componentDidUpdate(prevProps: *, prevState: State) {
+    componentDidUpdate(_prevProps: any, prevState: IState) {
         if (!prevState.visible && this.state.visible) {
             this._hideToolbarAfterTimeout();
         }

react/features/always-on-top/AudioMuteButton.js → react/features/always-on-top/AudioMuteButton.tsx

-// @flow
-
 import React, { Component } from 'react';
 
 // We need to reference these files directly to avoid loading things that are not available
 // in this environment (e.g. JitsiMeetJS or interfaceConfig)
 import { IconMic, IconMicSlash } from '../base/icons/svg';
-import type { Props } from '../base/toolbox/components/AbstractButton';
+import { IProps } from '../base/toolbox/components/AbstractButton';
 
 import ToolbarButton from './ToolbarButton';
 
 /**
  * The type of the React {@code Component} state of {@link AudioMuteButton}.
  */
-type State = {
+interface IState {
 
     /**
      * Whether audio is available is not.
      */
-    audioAvailable: boolean,
+    audioAvailable: boolean;
 
     /**
      * Whether audio is muted or not.
      */
-    audioMuted: boolean
-};
+    audioMuted: boolean;
+}
+
+type Props = Partial<IProps>;
 
 /**
  * Stateless "mute/unmute audio" button for the Always-on-Top windows.
  */
-export default class AudioMuteButton extends Component<Props, State> {
+export default class AudioMuteButton extends Component<Props, IState> {
     icon = IconMic;
     toggledIcon = IconMicSlash;
     accessibilityLabel = 'Audio mute';
     /**
      * Initializes a new {@code AudioMuteButton} instance.
      *
-     * @param {Props} props - The React {@code Component} props to initialize
+     * @param {IProps} props - The React {@code Component} props to initialize
      * the new {@code AudioMuteButton} instance with.
      */
     constructor(props: Props) {
             this._audioMutedListener);
     }
 
-    _audioAvailabilityListener: ({ available: boolean }) => void;
-
     /**
      * Handles audio available api events.
      *
      * @param {{ available: boolean }} status - The new available status.
      * @returns {void}
      */
-    _audioAvailabilityListener({ available }) {
+    _audioAvailabilityListener({ available }: { available: boolean; }) {
         this.setState({ audioAvailable: available });
     }
 
-    _audioMutedListener: ({ muted: boolean }) => void;
-
     /**
      * Handles audio muted api events.
      *
      * @param {{ muted: boolean }} status - The new muted status.
      * @returns {void}
      */
-    _audioMutedListener({ muted }) {
+    _audioMutedListener({ muted }: { muted: boolean; }) {
         this.setState({ audioMuted: muted });
     }
 
      * Changes the muted state.
      *
      * @override
-     * @param {boolean} audioMuted - Whether audio should be muted or not.
+     * @param {boolean} _audioMuted - Whether audio should be muted or not.
      * @protected
      * @returns {void}
      */
-    _setAudioMuted(audioMuted: boolean) { // eslint-disable-line no-unused-vars
+    _setAudioMuted(_audioMuted: boolean) {
         this.state.audioAvailable && api.executeCommand('toggleAudio');
     }
 
-    _onClick: () => {};
-
     /**
      * Handles clicking / pressing the button, and toggles the audio mute state
      * accordingly.

react/features/always-on-top/HangupButton.js → react/features/always-on-top/HangupButton.tsx

-// @flow
 import React, { Component } from 'react';
 
 // We need to reference these files directly to avoid loading things that are not available
 // in this environment (e.g. JitsiMeetJS or interfaceConfig)
 import { IconHangup } from '../base/icons/svg';
-import type { Props } from '../base/toolbox/components/AbstractButton';
+import { IProps } from '../base/toolbox/components/AbstractButton';
 
 import ToolbarButton from './ToolbarButton';
 
 const { api } = window.alwaysOnTop;
 
+type Props = Partial<IProps>;
+
 /**
  * Stateless hangup button for the Always-on-Top windows.
  */
-export default class HangupButton extends Component<Props, *> {
+export default class HangupButton extends Component<Props> {
 
     accessibilityLabel = 'Hangup';
     icon = IconHangup;
     /**
      * Initializes a new {@code HangupButton} instance.
      *
-     * @param {Props} props - The React {@code Component} props to initialize
+     * @param {IProps} props - The React {@code Component} props to initialize
      * the new {@code HangupButton} instance with.
      */
     constructor(props: Props) {
         this._onClick = this._onClick.bind(this);
     }
 
-    _onClick: () => {};
-
     /**
      * Handles clicking / pressing the button, and disconnects the conference.
      *

react/features/always-on-top/Toolbar.js → react/features/always-on-top/Toolbar.tsx

-// @flow
-
 import React, { Component } from 'react';
 
 import AudioMuteButton from './AudioMuteButton';
 /**
  * The type of the React {@code Component} props of {@link Toolbar}.
  */
-type Props = {
+interface IProps {
 
     /**
      * Additional CSS class names to add to the root of the toolbar.
      */
-    className: string,
+    className: string;
 
     /**
      * Callback invoked when no longer moused over the toolbar.
      */
-    onMouseOut: Function,
+    onMouseOut: (e?: React.MouseEvent) => void;
 
     /**
      * Callback invoked when the mouse has moved over the toolbar.
      */
-    onMouseOver: Function
-};
+    onMouseOver: (e?: React.MouseEvent) => void;
+}
 
 /**
  * Represents the toolbar in the Always On Top window.
  *
  * @augments Component
  */
-export default class Toolbar extends Component<Props> {
+export default class Toolbar extends Component<IProps> {
     /**
      * Implements React's {@link Component#render()}.
      *

react/features/always-on-top/ToolbarButton.js → react/features/always-on-top/ToolbarButton.tsx

 
 import Icon from '../base/icons/components/Icon';
 
-type Props = {
+interface IProps {
 
     /**
      * Accessibility label for button.
      */
-    accessibilityLabel: string,
+    accessibilityLabel: string;
 
     /**
      * An extra class name to be added at the end of the element's class name
      * in order to enable custom styling.
      */
-    customClass?: string,
+    customClass?: string;
 
     /**
      * Whether or not the button is disabled.
      */
-    disabled?: boolean,
+    disabled?: boolean;
 
     /**
-     * Click handler.
+     * Button icon.
      */
-    onClick: Function,
+    icon: Function;
 
     /**
-     * Button icon.
+     * Click handler.
      */
-    icon: Object,
+    onClick: (e?: React.MouseEvent) => void;
 
     /**
      * Whether or not the button is toggled.
      */
-    toggled?: boolean
+    toggled?: boolean;
 }
 
 const ToolbarButton = ({
     onClick,
     icon,
     toggled = false
-}: Props) => {
+}: IProps) => {
     const onKeyPress = useCallback(event => {
         if (event.key === 'Enter' || event.key === ' ') {
             event.preventDefault();

react/features/always-on-top/VideoMuteButton.js → react/features/always-on-top/VideoMuteButton.tsx

-// @flow
 import React, { Component } from 'react';
 
 // We need to reference these files directly to avoid loading things that are not available
 // in this environment (e.g. JitsiMeetJS or interfaceConfig)
 import { IconVideo, IconVideoOff } from '../base/icons/svg';
-import type { Props } from '../base/toolbox/components/AbstractButton';
+import { IProps } from '../base/toolbox/components/AbstractButton';
 
 import ToolbarButton from './ToolbarButton';
 
 const { api } = window.alwaysOnTop;
 
+type Props = Partial<IProps>;
+
 /**
  * The type of the React {@code Component} state of {@link VideoMuteButton}.
  */
     /**
      * Whether video is available is not.
      */
-    videoAvailable: boolean,
+    videoAvailable: boolean;
 
     /**
      * Whether video is muted or not.
      */
-    videoMuted: boolean
+    videoMuted: boolean;
 };
 
 /**
      * Changes the muted state.
      *
      * @override
-     * @param {boolean} videoMuted - Whether video should be muted or not.
+     * @param {boolean} _videoMuted - Whether video should be muted or not.
      * @protected
      * @returns {void}
      */
-    _setVideoMuted(videoMuted: boolean) { // eslint-disable-line no-unused-vars
+    _setVideoMuted(_videoMuted: boolean) {
         this.state.videoAvailable && api.executeCommand('toggleVideo', false, true);
     }
 
-    _videoAvailabilityListener: ({ available: boolean }) => void;
-
     /**
      * Handles video available api events.
      *
      * @param {{ available: boolean }} status - The new available status.
      * @returns {void}
      */
-    _videoAvailabilityListener({ available }) {
+    _videoAvailabilityListener({ available }: { available: boolean; }) {
         this.setState({ videoAvailable: available });
     }
 
-    _videoMutedListener: ({ muted: boolean }) => void;
-
     /**
      * Handles video muted api events.
      *
      * @param {{ muted: boolean }} status - The new muted status.
      * @returns {void}
      */
-    _videoMutedListener({ muted }) {
+    _videoMutedListener({ muted }: { muted: boolean; }) {
         this.setState({ videoMuted: muted });
     }
 
-    _onClick: () => {};
-
     /**
      * Handles clicking / pressing the button, and toggles the video mute state
      * accordingly.

react/features/always-on-top/index.js → react/features/always-on-top/index.tsx

-// @flow
-
 import React from 'react';
 import ReactDOM from 'react-dom';
 
 import AlwaysOnTop from './AlwaysOnTop';
 
 // Render the main/root Component.
-// $FlowExpectedError
 ReactDOM.render(<AlwaysOnTop />, document.getElementById('react'));
 
 window.addEventListener(
     'beforeunload',
-    () => ReactDOM.unmountComponentAtNode(document.getElementById('react')));
+    () => ReactDOM.unmountComponentAtNode(document.getElementById('react') ?? document.body));

tsconfig.native.json

     },
     "exclude": [
         "node_modules",
+        "react/features/always-on-top",
         "react/features/analytics/handlers/GoogleAnalyticsHandler.ts",
         "react/features/base/components/participants-pane-list",
         "react/features/base/tooltip",

webpack.config.js

         }),
         Object.assign({}, config, {
             entry: {
-                'alwaysontop': './react/features/always-on-top/index.js'
+                'alwaysontop': './react/features/always-on-top/index.tsx'
             },
             plugins: [
                 ...config.plugins,