Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-05-03 21:19:06 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

refactor(player): momoize menus
Some checks failed
Build / build (push) Has been cancelled
Details

Browse source
This commit is contained in:
Tim 2026-04-02 09:56:21 +02:00
parent 1b9e2a194f
commit 6dfd0fcbde
4 changed files with 9 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/routes/Player/AudioMenu/AudioMenu.tsx
View file

@ -1,4 +1,4 @@
import React, { forwardRef, MouseEvent, useCallback } from 'react'; import React, { forwardRef, memo, MouseEvent, useCallback } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import classNames from 'classnames'; import classNames from 'classnames';
import { languages } from 'stremio/common'; import { languages } from 'stremio/common';
@ -12,7 +12,7 @@ type Props = {
onAudioTrackSelected: (id: string) => void, onAudioTrackSelected: (id: string) => void,
}; };
const AudioMenu = forwardRef<HTMLDivElement, Props>(({ className, selectedAudioTrackId, audioTracks, onAudioTrackSelected }: Props, ref) => { const AudioMenu = memo(forwardRef<HTMLDivElement, Props>(({ className, selectedAudioTrackId, audioTracks, onAudioTrackSelected }: Props, ref) => {
const { t } = useTranslation(); const { t } = useTranslation();
const onAudioTrackClick = useCallback(({ currentTarget }: MouseEvent) => { const onAudioTrackClick = useCallback(({ currentTarget }: MouseEvent) => {
@ -62,6 +62,6 @@ const AudioMenu = forwardRef<HTMLDivElement, Props>(({ className, selectedAudioT
</div> </div>
</div> </div>
); );
}); }));
export default AudioMenu; export default AudioMenu;

4
src/routes/Player/OptionsMenu/OptionsMenu.js
View file

@ -9,7 +9,7 @@ const { useServices } = require('stremio/services');
const Option = require('./Option'); const Option = require('./Option');
const styles = require('./styles'); const styles = require('./styles');
const OptionsMenu = React.forwardRef(({ className, stream, playbackDevices, extraSubtitlesTracks, selectedExtraSubtitlesTrackId }, ref) => { const OptionsMenu = React.memo(React.forwardRef(({ className, stream, playbackDevices, extraSubtitlesTracks, selectedExtraSubtitlesTrackId }, ref) => {
const { t } = useTranslation(); const { t } = useTranslation();
const { core } = useServices(); const { core } = useServices();
const platform = usePlatform(); const platform = usePlatform();
@ -167,7 +167,7 @@ const OptionsMenu = React.forwardRef(({ className, stream, playbackDevices, extr
} }
</div> </div>
); );
}); }));
OptionsMenu.propTypes = { OptionsMenu.propTypes = {
className: PropTypes.string, className: PropTypes.string,

4
src/routes/Player/SpeedMenu/SpeedMenu.js
View file

@ -9,7 +9,7 @@ const styles = require('./styles');
const RATES = Array.from(Array(8).keys(), (n) => n * 0.25 + 0.25).reverse(); const RATES = Array.from(Array(8).keys(), (n) => n * 0.25 + 0.25).reverse();
const SpeedMenu = React.forwardRef(({ className, playbackSpeed, onPlaybackSpeedChanged }, ref) => { const SpeedMenu = React.memo(React.forwardRef(({ className, playbackSpeed, onPlaybackSpeedChanged }, ref) => {
const { t } = useTranslation(); const { t } = useTranslation();
const onMouseDown = React.useCallback((event) => { const onMouseDown = React.useCallback((event) => {
event.nativeEvent.speedMenuClosePrevented = true; event.nativeEvent.speedMenuClosePrevented = true;
@ -39,7 +39,7 @@ const SpeedMenu = React.forwardRef(({ className, playbackSpeed, onPlaybackSpeedC
</div> </div>
</div> </div>
); );
}); }));
SpeedMenu.propTypes = { SpeedMenu.propTypes = {
className: PropTypes.string, className: PropTypes.string,

4
src/routes/Player/StatisticsMenu/StatisticsMenu.js
View file

@ -6,7 +6,7 @@ const classNames = require('classnames');
const PropTypes = require('prop-types'); const PropTypes = require('prop-types');
const styles = require('./styles.less'); const styles = require('./styles.less');
const StatisticsMenu = React.forwardRef(({ className, peers, speed, completed, infoHash }, ref) => { const StatisticsMenu = React.memo(React.forwardRef(({ className, peers, speed, completed, infoHash }, ref) => {
const { t } = useTranslation(); const { t } = useTranslation();
return ( return (
<div ref={ref} className={classNames(className, styles['statistics-menu-container'])}> <div ref={ref} className={classNames(className, styles['statistics-menu-container'])}>
@ -49,7 +49,7 @@ const StatisticsMenu = React.forwardRef(({ className, peers, speed, completed, i
</div> </div>
</div> </div>
); );
}); }));
StatisticsMenu.propTypes = { StatisticsMenu.propTypes = {
className: PropTypes.string, className: PropTypes.string,