Fascinated/Vencord
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Fix displaying BetterFolders sidebar when watching streams in fullscreen

Browse Source
This commit is contained in:
Nuckyz 2023-10-28 20:32:53 -03:00 committed by Vendicated
parent 9af2ec65ae
commit 9d78233afa
No known key found for this signature in database
GPG Key ID: D66986BAF75ECF18
1 changed files with 14 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/plugins/betterFolders/FolderSideBar.tsx
View File

@ -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>
) )