Fix displaying BetterFolders sidebar when watching streams in fullscreen
This commit is contained in:
parent
9af2ec65ae
commit
9d78233afa
|
@ -18,16 +18,19 @@
|
||||||
|
|
||||||
import ErrorBoundary from "@components/ErrorBoundary";
|
import ErrorBoundary from "@components/ErrorBoundary";
|
||||||
import { LazyComponent } from "@utils/react";
|
import { LazyComponent } from "@utils/react";
|
||||||
import { find, findByPropsLazy } from "@webpack";
|
import { find, findByPropsLazy, findStoreLazy } from "@webpack";
|
||||||
import { React, useStateFromStores } from "@webpack/common";
|
import { useStateFromStores } from "@webpack/common";
|
||||||
|
import type { CSSProperties } from "react";
|
||||||
|
|
||||||
import { ExpandedGuildFolderStore, settings } from ".";
|
import { ExpandedGuildFolderStore, settings } from ".";
|
||||||
|
|
||||||
|
const ChannelRTCStore = findStoreLazy("ChannelRTCStore");
|
||||||
const Animations = findByPropsLazy("a", "animated", "useTransition");
|
const Animations = findByPropsLazy("a", "animated", "useTransition");
|
||||||
const GuildsBar = LazyComponent(() => find(m => m.type?.toString().includes('("guildsnav")')));
|
const GuildsBar = LazyComponent(() => find(m => m.type?.toString().includes('("guildsnav")')));
|
||||||
|
|
||||||
export default ErrorBoundary.wrap(guildsBarProps => {
|
export default ErrorBoundary.wrap(guildsBarProps => {
|
||||||
const expandedFolders = useStateFromStores([ExpandedGuildFolderStore], () => ExpandedGuildFolderStore.getExpandedFolders());
|
const expandedFolders = useStateFromStores([ExpandedGuildFolderStore], () => ExpandedGuildFolderStore.getExpandedFolders());
|
||||||
|
const isFullscreen = useStateFromStores([ChannelRTCStore], () => ChannelRTCStore.isFullscreenInContext());
|
||||||
|
|
||||||
const Sidebar = (
|
const Sidebar = (
|
||||||
<GuildsBar
|
<GuildsBar
|
||||||
|
@ -40,9 +43,15 @@ export default ErrorBoundary.wrap(guildsBarProps => {
|
||||||
const visible = !!expandedFolders.size;
|
const visible = !!expandedFolders.size;
|
||||||
const guilds = document.querySelector(guildsBarProps.className.split(" ").map(c => `.${c}`).join(""));
|
const guilds = document.querySelector(guildsBarProps.className.split(" ").map(c => `.${c}`).join(""));
|
||||||
|
|
||||||
|
// We need to display none if we are in fullscreen. Yes this seems horrible doing with css, but it's literally how Discord does it.
|
||||||
|
// Also display flex otherwise to fix scrolling
|
||||||
|
const barStyle = {
|
||||||
|
display: isFullscreen ? "none" : "flex",
|
||||||
|
} as CSSProperties;
|
||||||
|
|
||||||
if (!guilds || !settings.store.sidebarAnim) {
|
if (!guilds || !settings.store.sidebarAnim) {
|
||||||
return visible
|
return visible
|
||||||
? <div style={{ display: "flex " }}>{Sidebar}</div>
|
? <div style={barStyle}>{Sidebar}</div>
|
||||||
: null;
|
: null;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -54,9 +63,9 @@ export default ErrorBoundary.wrap(guildsBarProps => {
|
||||||
leave={{ width: 0 }}
|
leave={{ width: 0 }}
|
||||||
config={{ duration: 200 }}
|
config={{ duration: 200 }}
|
||||||
>
|
>
|
||||||
{(style, show) =>
|
{(animationStyle, show) =>
|
||||||
show && (
|
show && (
|
||||||
<Animations.animated.div style={{ ...style, display: "flex" }}>
|
<Animations.animated.div style={{ ...animationStyle, ...barStyle }}>
|
||||||
{Sidebar}
|
{Sidebar}
|
||||||
</Animations.animated.div>
|
</Animations.animated.div>
|
||||||
)
|
)
|
||||||
|
|
Loading…
Reference in a new issue