mirrors/webamp
1
0
Fork 0
mirror of https://github.com/captbaritone/webamp synced 2024-11-22 16:20:49 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Upgrade rc-slider and lift React.StrictMode

Browse Source 
rc-slider was preventing us from enabling this more broadly. With https://github.com/react-component/slider/pull/591 merged and released, we can make more of the app strict
This commit is contained in:
Jordan Eldredge 2019-09-06 08:29:56 -07:00
parent ffc2423629
commit 10c6dfed85
8 changed files with 189 additions and 199 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
js/components/App.tsx
View File

@ -145,17 +145,19 @@ class App extends React.Component<Props> {
return null;
}
return ReactDOM.createPortal(
<div onBlur={this._handleBlur}>
<Skin />
<ContextMenuWrapper
renderContents={() => <MainContextMenu filePickers={filePickers} />}
>
<WindowManager
windows={this._renderWindows()}
container={container}
/>
</ContextMenuWrapper>
</div>,
<React.StrictMode>
<div onBlur={this._handleBlur}>
<Skin />
<ContextMenuWrapper
renderContents={() => <MainContextMenu filePickers={filePickers} />}
>
<WindowManager
windows={this._renderWindows()}
container={container}
/>
</ContextMenuWrapper>
</div>
</React.StrictMode>,
this._webampNode
);
}

35
js/components/EqualizerWindow/index.tsx
View File

@ -58,30 +58,23 @@ const EqualizerWindow = (props: StateProps & DispatchProps) => {
<div id="equalizer-window" className={className}>
<FocusTarget windowId={WINDOWS.EQUALIZER}>
{props.shade ? (
<React.StrictMode>
<EqualizerShade />
</React.StrictMode>
<EqualizerShade />
) : (
<div>
<React.StrictMode>
<div
className="equalizer-top title-bar draggable"
onDoubleClick={props.toggleEqualizerShadeMode}
>
<div
className="equalizer-top title-bar draggable"
onDoubleClick={props.toggleEqualizerShadeMode}
>
<div
id="equalizer-shade"
onClick={props.toggleEqualizerShadeMode}
/>
<div
id="equalizer-close"
onClick={props.closeEqualizerWindow}
/>
</div>
<EqOn />
<EqAuto />
<EqGraph />
<PresetsContextMenu />
</React.StrictMode>
id="equalizer-shade"
onClick={props.toggleEqualizerShadeMode}
/>
<div id="equalizer-close" onClick={props.closeEqualizerWindow} />
</div>
<EqOn />
<EqAuto />
<EqGraph />
<PresetsContextMenu />
<Band id="preamp" band="preamp" onChange={props.setPreampValue} />
<div id="plus12db" onClick={props.setEqToMax} />
<div id="zerodb" onClick={props.setEqToMid} />

126
js/components/MainWindow/index.tsx
View File

@ -73,72 +73,70 @@ const MainWindow = React.memo(({ analyser, filePickers }: Props) => {
const loadMedia = useActionCreator(loadMediaAndPlay);
return (
<React.StrictMode>
<DropTarget
id="main-window"
className={className}
handleDrop={loadMedia}
onWheel={scrollVolume}
>
<FocusTarget windowId={WINDOWS.MAIN}>
<div
id="title-bar"
className="selected draggable"
onDoubleClick={toggleMainWindowShadeMode}
<DropTarget
id="main-window"
className={className}
handleDrop={loadMedia}
onWheel={scrollVolume}
>
<FocusTarget windowId={WINDOWS.MAIN}>
<div
id="title-bar"
className="selected draggable"
onDoubleClick={toggleMainWindowShadeMode}
>
<ContextMenuTarget
id="option-context"
bottom
handle={<ClickedDiv id="option" title="Winamp Menu" />}
>
<ContextMenuTarget
id="option-context"
bottom
handle={<ClickedDiv id="option" title="Winamp Menu" />}
>
<MainContextMenu filePickers={filePickers} />
</ContextMenuTarget>
{mainShade && <MiniTime />}
<Minimize />
<Shade />
<Close />
</div>
<div className="status">
<ClutterBar />
{!working && <div id="play-pause" />}
<div
id="work-indicator"
className={classnames({ selected: working })}
/>
<Time />
</div>
<Visualizer
// @ts-ignore Visualizer is not typed yet
analyser={analyser}
<MainContextMenu filePickers={filePickers} />
</ContextMenuTarget>
{mainShade && <MiniTime />}
<Minimize />
<Shade />
<Close />
</div>
<div className="status">
<ClutterBar />
{!working && <div id="play-pause" />}
<div
id="work-indicator"
className={classnames({ selected: working })}
/>
<div className="media-info">
<Marquee />
<Kbps />
<Khz />
<MonoStereo />
</div>
<MainVolume />
<MainBalance />
<div className="windows">
<EqToggleButton />
<PlaylistToggleButton />
</div>
<Position />
<ActionButtons />
<Eject />
<div className="shuffle-repeat">
<Shuffle />
<Repeat />
</div>
<a
id="about"
target="_blank"
href="https://webamp.org/about"
title="About"
/>
</FocusTarget>
</DropTarget>
</React.StrictMode>
<Time />
</div>
<Visualizer
// @ts-ignore Visualizer is not typed yet
analyser={analyser}
/>
<div className="media-info">
<Marquee />
<Kbps />
<Khz />
<MonoStereo />
</div>
<MainVolume />
<MainBalance />
<div className="windows">
<EqToggleButton />
<PlaylistToggleButton />
</div>
<Position />
<ActionButtons />
<Eject />
<div className="shuffle-repeat">
<Shuffle />
<Repeat />
</div>
<a
id="about"
target="_blank"
href="https://webamp.org/about"
title="About"
/>
</FocusTarget>
</DropTarget>
);
});

14
js/components/MediaLibraryWindow/index.tsx
View File

@ -9,14 +9,12 @@ import LibraryLayout from "./LibraryLayout";
export default class MediaLibraryWindow extends React.Component<{}> {
render() {
return (
<React.StrictMode>
<LibraryLayout
sidebar={<Sidebar />}
artists={<ArtistsTable />}
albums={<AlbumsTable />}
tracks={<TracksTable />}
/>
</React.StrictMode>
<LibraryLayout
sidebar={<Sidebar />}
artists={<ArtistsTable />}
albums={<AlbumsTable />}
tracks={<TracksTable />}
/>
);
}
}

54
js/components/MilkdropWindow/index.tsx
View File

@ -137,34 +137,32 @@ function Milkdrop(props: Props) {
}
return (
<React.StrictMode>
<GenWindow
title={"Milkdrop"}
windowId={WINDOWS.MILKDROP}
onKeyDown={handleKeyDown}
>
{(genWindowSize: { width: number; height: number }) => {
const size = props.fullscreen ? screenSize : genWindowSize;
return (
<MilkdropContextMenu>
<Background>
<DropTarget handleDrop={props.handlePresetDrop}>
{props.overlay && <PresetOverlay {...size} />}
<Fullscreen
enabled={props.fullscreen}
onChange={props.setFullscreen}
>
<div onDoubleClick={props.toggleFullscreen}>
<Visualizer {...size} analyser={props.analyser} />
</div>
</Fullscreen>
</DropTarget>
</Background>
</MilkdropContextMenu>
);
}}
</GenWindow>
</React.StrictMode>
<GenWindow
title={"Milkdrop"}
windowId={WINDOWS.MILKDROP}
onKeyDown={handleKeyDown}
>
{(genWindowSize: { width: number; height: number }) => {
const size = props.fullscreen ? screenSize : genWindowSize;
return (
<MilkdropContextMenu>
<Background>
<DropTarget handleDrop={props.handlePresetDrop}>
{props.overlay && <PresetOverlay {...size} />}
<Fullscreen
enabled={props.fullscreen}
onChange={props.setFullscreen}
>
<div onDoubleClick={props.toggleFullscreen}>
<Visualizer {...size} analyser={props.analyser} />
</div>
</Fullscreen>
</DropTarget>
</Background>
</MilkdropContextMenu>
);
}}
</GenWindow>
);
}

110
js/components/PlaylistWindow/index.tsx
View File

@ -111,71 +111,65 @@ class PlaylistWindow extends React.Component<Props> {
handleDrop={this._handleDrop}
onWheel={this.props.scrollVolume}
>
<React.StrictMode>
<div className="playlist-top draggable" onDoubleClick={toggleShade}>
<div className="playlist-top-left draggable" />
{showSpacers && (
<div className="playlist-top-left-spacer draggable" />
)}
<div className="playlist-top-left-fill draggable" />
<div className="playlist-top-title draggable" />
{showSpacers && (
<div className="playlist-top-right-spacer draggable" />
)}
<div className="playlist-top-right-fill draggable" />
<div className="playlist-top-right draggable">
<div id="playlist-shade-button" onClick={toggleShade} />
<div id="playlist-close-button" onClick={close} />
</div>
<div className="playlist-top draggable" onDoubleClick={toggleShade}>
<div className="playlist-top-left draggable" />
{showSpacers && (
<div className="playlist-top-left-spacer draggable" />
)}
<div className="playlist-top-left-fill draggable" />
<div className="playlist-top-title draggable" />
{showSpacers && (
<div className="playlist-top-right-spacer draggable" />
)}
<div className="playlist-top-right-fill draggable" />
<div className="playlist-top-right draggable">
<div id="playlist-shade-button" onClick={toggleShade} />
<div id="playlist-close-button" onClick={close} />
</div>
</React.StrictMode>
</div>
<div className="playlist-middle draggable">
<React.StrictMode>
<div className="playlist-middle-left draggable" />
<div className="playlist-middle-center">
<TrackList />
</div>
</React.StrictMode>
<div className="playlist-middle-left draggable" />
<div className="playlist-middle-center">
<TrackList />
</div>
<div className="playlist-middle-right draggable">
<ScrollBar />
</div>
</div>
<React.StrictMode>
<div className="playlist-bottom draggable">
<div className="playlist-bottom-left draggable">
<AddMenu />
<RemoveMenu />
<SelectionMenu />
<MiscMenu />
</div>
<div className="playlist-bottom-center draggable" />
<div className="playlist-bottom-right draggable">
{showVisualizer && (
<div className="playlist-visualizer">
{activateVisualizer && (
<div className="visualizer-wrapper">
<Visualizer
// @ts-ignore Visualizer is not yet typed
analyser={analyser}
/>
</div>
)}
</div>
)}
<PlaylistActionArea />
<ListMenu />
<div
id="playlist-scroll-up-button"
onClick={this.props.scrollUpFourTracks}
/>
<div
id="playlist-scroll-down-button"
onClick={this.props.scrollDownFourTracks}
/>
<PlaylistResizeTarget />
</div>
<div className="playlist-bottom draggable">
<div className="playlist-bottom-left draggable">
<AddMenu />
<RemoveMenu />
<SelectionMenu />
<MiscMenu />
</div>
</React.StrictMode>
<div className="playlist-bottom-center draggable" />
<div className="playlist-bottom-right draggable">
{showVisualizer && (
<div className="playlist-visualizer">
{activateVisualizer && (
<div className="visualizer-wrapper">
<Visualizer
// @ts-ignore Visualizer is not yet typed
analyser={analyser}
/>
</div>
)}
</div>
)}
<PlaylistActionArea />
<ListMenu />
<div
id="playlist-scroll-up-button"
onClick={this.props.scrollUpFourTracks}
/>
<div
id="playlist-scroll-down-button"
onClick={this.props.scrollDownFourTracks}
/>
<PlaylistResizeTarget />
</div>
</div>
</DropTarget>
</FocusTarget>
);

2
package.json
View File

@ -117,7 +117,7 @@
"puppeteer": "^1.15.0",
"raven-for-redux": "^1.3.1",
"raven-js": "^3.19.1",
"rc-slider": "^8.6.9",
"rc-slider": "^8.7.1",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-redux": "^7.1.0",

23
yarn.lock
View File

@ -8731,17 +8731,18 @@ rc-animate@2.x:
css-animation "^1.3.2"
prop-types "15.x"
rc-slider@^8.6.9:
version "8.6.9"
resolved "https://registry.yarnpkg.com/rc-slider/-/rc-slider-8.6.9.tgz#b32148a498c927c93f20dc1f95e8682c4924bf8e"
integrity sha512-v5XwSARCyKGkalV7c54jwiuPNh8pGUg0i1opVD8YJVd8zQqbxepRoGmEE4xwRTxjR7Goao6/ARc7l2dGoPwZsg==
rc-slider@^8.7.1:
version "8.7.1"
resolved "https://registry.yarnpkg.com/rc-slider/-/rc-slider-8.7.1.tgz#9ed07362dc93489a38e654b21b8122ad70fd3c42"
integrity sha512-WMT5mRFUEcrLWwTxsyS8jYmlaMsTVCZIGENLikHsNv+tE8ThU2lCoPfi/xFNUfJFNFSBFP3MwPez9ZsJmNp13g==
dependencies:
babel-runtime "6.x"
classnames "^2.2.5"
prop-types "^15.5.4"
rc-tooltip "^3.7.0"
rc-util "^4.0.4"
shallowequal "^1.0.1"
react-lifecycles-compat "^3.0.4"
shallowequal "^1.1.0"
warning "^4.0.3"
rc-tooltip@^3.7.0:
@ -8808,6 +8809,11 @@ react-is@^16.8.4, react-is@^16.8.6:
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.6.tgz#5bbc1e2d29141c9fbdfed456343fe2bc430a6a16"
integrity sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA==
react-lifecycles-compat@^3.0.4:
version "3.0.4"
resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
react-redux@^7.1.0:
version "7.1.0"
resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.1.0.tgz#72af7cf490a74acdc516ea9c1dd80e25af9ea0b2"
@ -9613,9 +9619,10 @@ shallowequal@^0.2.2:
dependencies:
lodash.keys "^3.1.2"
shallowequal@^1.0.1:
version "1.0.2"
resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.0.2.tgz#1561dbdefb8c01408100319085764da3fcf83f8f"
shallowequal@^1.1.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8"
integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==
shebang-command@^1.2.0:
version "1.2.0"