top bar more/less

LiveTL · May 27, 2024 · f761119 · f761119
1 parent 56f6a0b
commit f761119
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 5 deletions.
diff --git a/src/components/Hyperchat.svelte b/src/components/Hyperchat.svelte
@@ -679,7 +679,7 @@
   }
   let isPopout = false;
   onMount(async () => {
-    await redirectIfInitialSetup();
+    if (await redirectIfInitialSetup()) return;
     try {
       if (window.parent === window) {
         isPopout = true;
@@ -695,6 +695,8 @@
       $ytDark = paramsYtDark === 'true';
     }
     onLoad();
+    toggleTopBar();
+    (window as any).toggleTopBar = toggleTopBar;
   });
   const openSettings = () => createPopup(chrome.runtime.getURL((isLiveTL ? 'ytcfilter' : '') + '/options.html'));
 
@@ -729,6 +731,16 @@
       type: 'archiveViewCloseRequest'
     }, '*');
   };
+
+  let topBarVisible = true;
+  const toggleTopBar = () => {
+    const elem = window.parent.document.querySelector('.ytcf-button-wrapper') as HTMLDivElement;
+    if (!elem) return;
+    const iframe = window.parent.document.querySelector('.ytcf-iframe') as HTMLDivElement;
+    if (!iframe || (topBarVisible && iframe.style.display != 'block')) return;
+    elem.style.display = topBarVisible ? 'none' : 'flex';
+    topBarVisible = !topBarVisible;
+  };
 </script>
 
 <ReportBanDialog />
@@ -794,6 +806,13 @@
             settings
           </div>
         </button>
+      {:else}
+        <button use:exioButton on:click={toggleTopBar} class="inline-flex gap-1 items-center">
+          {topBarVisible ? 'Less' : 'More'}
+          <div use:exioIcon class="inline-block" style="color: inherit;">
+            unfold_{topBarVisible ? 'less' : 'more'}_double
+          </div>
+        </button>
       {/if}
     </div>
   </div>

diff --git a/src/components/YtcFilterButtons.svelte b/src/components/YtcFilterButtons.svelte
@@ -3,7 +3,8 @@
   import { exioButton, exioIcon } from 'exio/svelte';
   import { onDestroy, onMount } from 'svelte';
   import { embedHeight } from '../ts/storage';
-  import '../stylesheets/ui.css';
+  // @ts-ignore
+  import inline from '../stylesheets/ui.css?inline';
   const logo = chrome.runtime.getURL((isLiveTL ? 'ytcfilter' : 'assets') + '/logo-48.png');
   let dark = document.documentElement.hasAttribute('dark');
   let attrObserver: MutationObserver;
@@ -15,6 +16,9 @@
   // TODO FIX RESIZE SAVING
   onMount(async () => {
     await embedHeight.ready();
+    const styleElem = document.createElement('style');
+    styleElem.innerHTML = inline;
+    document.head.appendChild(styleElem);
     if ($embedHeight !== null) {
       height = $embedHeight * windowHeight;
     }

diff --git a/src/components/YtcFilterWelcome.svelte b/src/components/YtcFilterWelcome.svelte
@@ -34,9 +34,9 @@
       <span>Unknown</span>
     {/if}
     <br />
-    <strong>New in v{version}:</strong>
+    <strong>v{version}:</strong>
     <span>
-      auto-open setting.
+      auto-open setting + more.
     </span>
   </p>
 </div>

diff --git a/src/scripts/chat-injector.ts b/src/scripts/chat-injector.ts
@@ -154,6 +154,8 @@ const chatLoaded = async (): Promise<void> => {
     resizeBar.style.display = 'flex';
     if (frame && frame.src !== source) {
       frame.src = source;
+    } else {
+      (frame?.contentWindow as any).toggleTopBar();
     }
   };
   // eslint-disable-next-line @typescript-eslint/no-misused-promises

diff --git a/src/ts/ytcf-logic.ts b/src/ts/ytcf-logic.ts
@@ -664,7 +664,7 @@ export const readFromJson = async (): Promise<any> => {
   });
 };
 
-export const redirectIfInitialSetup = async (): Promise<void> => {
+export const redirectIfInitialSetup = async (): Promise<boolean> => {
   await initialSetupDone.ready();
   await currentStorageVersion.ready();
   if (!get(initialSetupDone)) {
@@ -673,9 +673,11 @@ export const redirectIfInitialSetup = async (): Promise<void> => {
     const params = new URLSearchParams(query);
     params.set('referrer', window.location.href);
     window.location.href = chrome.runtime.getURL(`${(isLiveTL ? 'ytcfilter' : '')}/setup.html?${params.toString()}`);
+    return true;
   } else {
     await currentStorageVersion.set('v3');
   }
+  return false;
 };
 
 export const detectForceReload = async (): Promise<void> => {