mirrors/Equicord
1
1
Fork 0
mirror of https://github.com/Equicord/Equicord.git synced 2025-06-15 17:43:08 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 5

SpotifyControls plugin (#190)

Browse source
This commit is contained in:
Ven 2022-11-07 22:28:29 +01:00 • committed by GitHub
parent 7d5ade21fc
commit 6a8564089b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 852 additions and 64 deletions
Download patch file Download diff file Expand all files Collapse all files

118
src/components/ErrorBoundary.tsx
View file

@ -16,6 +16,7 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
import { LazyComponent } from "../utils";
import Logger from "../utils/logger";
import { Margins, React } from "../webpack/common";
import { ErrorCard } from "./ErrorCard";
@ -32,68 +33,75 @@ const logger = new Logger("React ErrorBoundary", color);
const NO_ERROR = {};
export default class ErrorBoundary extends React.Component<React.PropsWithChildren<Props>> {
static wrap<T = any>(Component: React.ComponentType<T>): (props: T) => React.ReactElement {
return props => (
<ErrorBoundary>
<Component {...props as any/* I hate react typings ??? */} />
</ErrorBoundary>
);
}
// We might want to import this in a place where React isn't ready yet.
// Thus, wrap in a LazyComponent
const ErrorBoundary = LazyComponent(() => {
return class ErrorBoundary extends React.PureComponent<React.PropsWithChildren<Props>> {
state = {
error: NO_ERROR as any,
stack: "",
message: ""
};
state = {
error: NO_ERROR as any,
stack: "",
message: ""
};
static getDerivedStateFromError(error: any) {
let stack = error?.stack ?? "";
let message = error?.message || String(error);
static getDerivedStateFromError(error: any) {
let stack = error?.stack ?? "";
let message = error?.message || String(error);
if (error instanceof Error && stack) {
const eolIdx = stack.indexOf("\n");
if (eolIdx !== -1) {
message = stack.slice(0, eolIdx);
stack = stack.slice(eolIdx + 1).replace(/https:\/\/\S+\/assets\//g, "");
if (error instanceof Error && stack) {
const eolIdx = stack.indexOf("\n");
if (eolIdx !== -1) {
message = stack.slice(0, eolIdx);
stack = stack.slice(eolIdx + 1).replace(/https:\/\/\S+\/assets\//g, "");
}
}
return { error, stack, message };
}
return { error, stack, message };
}
componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
this.props.onError?.(error, errorInfo);
logger.error("A component threw an Error\n", error);
logger.error("Component Stack", errorInfo.componentStack);
}
componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
this.props.onError?.(error, errorInfo);
logger.error("A component threw an Error\n", error);
logger.error("Component Stack", errorInfo.componentStack);
}
render() {
if (this.state.error === NO_ERROR) return this.props.children;
render() {
if (this.state.error === NO_ERROR) return this.props.children;
if (this.props.fallback)
return <this.props.fallback
children={this.props.children}
{...this.state}
/>;
if (this.props.fallback)
return <this.props.fallback
children={this.props.children}
{...this.state}
/>;
const msg = this.props.message || "An error occurred while rendering this Component. More info can be found below and in your console.";
const msg = this.props.message || "An error occurred while rendering this Component. More info can be found below and in your console.";
return (
<ErrorCard style={{
overflow: "hidden",
}}>
<h1>Oh no!</h1>
<p>{msg}</p>
<code>
{this.state.message}
{!!this.state.stack && (
<pre className={Margins.marginTop8}>
{this.state.stack}
</pre>
)}
</code>
</ErrorCard>
);
}
};
}) as
React.ComponentType<React.PropsWithChildren<Props>> & {
wrap<T extends JSX.IntrinsicAttributes = any>(Component: React.ComponentType<T>): React.ComponentType<T>;
};
return (
<ErrorCard style={{
overflow: "hidden",
}}>
<h1>Oh no!</h1>
<p>{msg}</p>
<code>
{this.state.message}
{!!this.state.stack && (
<pre className={Margins.marginTop8}>
{this.state.stack}
</pre>
)}
</code>
</ErrorCard>
);
}
}
ErrorBoundary.wrap = Component => props => (
<ErrorBoundary>
<Component {...props} />
</ErrorBoundary>
);
export default ErrorBoundary;

6
src/components/Flex.tsx
View file

@ -24,9 +24,11 @@ export function Flex(props: React.PropsWithChildren<{
className?: string;
} & React.HTMLProps<HTMLDivElement>>) {
props.style ??= {};
props.style.flexDirection ||= props.flexDirection;
props.style.gap ??= "1em";
props.style.display = "flex";
// TODO(ven): Remove me, what was I thinking??
props.style.gap ??= "1em";
props.style.flexDirection ||= props.flexDirection;
delete props.flexDirection;
return (
<div {...props}>
{props.children}