Improve safari theme color

mantou132 · May 10, 2023 · 2ef0021 · 2ef0021
1 parent f44b6d9
commit 2ef0021
Show file tree

Hide file tree

Showing 10 changed files with 35 additions and 13 deletions.
diff --git a/packages/webapp/src/constants.ts b/packages/webapp/src/constants.ts
@@ -12,6 +12,7 @@ export const COMMAND = process.env.COMMAND as 'serve' | 'build';
 export const isTauriMacApp = navigator.appName === 'nesbox-macos';
 export const isTauriWinApp = navigator.appName === 'nesbox-windows';
 export const isApp = window.__TAURI__ || mediaQuery.isPWA || isMtApp;
+export const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
 
 export const githubUrl = 'https://github.com/mantou132/nesbox';
 export const githubIssue = `${githubUrl}/issues`;

diff --git a/packages/webapp/src/index.ts b/packages/webapp/src/index.ts
@@ -83,7 +83,7 @@ render(
         padding: 0;
         font-size: 1rem;
         color: ${theme.textColor};
-        background-color: ${mediaQuery.isPhone ? theme.titleBarColor : theme.backgroundColor};
+        background: ${theme.backgroundColor};
       }
       dy-drop-area {
         display: flex;

diff --git a/packages/webapp/src/modules/game-item.ts b/packages/webapp/src/modules/game-item.ts
@@ -52,16 +52,18 @@ const style = createCSSSheet(css`
     image-rendering: pixelated;
     filter: ${theme.imageFilter};
   }
-  :host(:hover) .cover {
-    opacity: 0.7;
-  }
   .title {
     padding: 0.3em 0.5em;
     text-align: center;
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
   }
+  @media (hover) {
+    :host(:hover) .cover {
+      opacity: 0.7;
+    }
+  }
 `);
 
 /**

diff --git a/packages/webapp/src/modules/game-list.ts b/packages/webapp/src/modules/game-list.ts
@@ -13,6 +13,7 @@ import {
 import { isNotNullish } from 'duoyun-ui/lib/types';
 import { mediaQuery } from '@mantou/gem/helper/mediaquery';
 import { locationStore } from 'src/routes';
+import { isMtApp } from '@nesbox/mtapp';
 
 import { changeQuery } from 'src/utils/common';
 import { queryKeys } from 'src/constants';
@@ -153,7 +154,8 @@ export class MGameListElement extends GemElement {
       },
       () => [
         store.topGameIds,
-        store.favoriteIds,
+        // mt app need immediately update
+        isMtApp && store.favoriteIds,
         // filter
         this.all ? locationStore.query.toString() : '',
       ],

diff --git a/packages/webapp/src/modules/meta.ts b/packages/webapp/src/modules/meta.ts
@@ -3,6 +3,8 @@ import { mediaQuery } from '@mantou/gem/helper/mediaquery';
 
 import { i18n } from 'src/i18n/basic';
 import { themeStore } from 'src/theme';
+import { isSafari } from 'src/constants';
+import { navStore } from 'src/modules/nav';
 
 import 'duoyun-ui/elements/title';
 import 'duoyun-ui/elements/reflect';
@@ -18,14 +20,18 @@ const style = createCSSSheet(css`
  */
 @customElement('m-meta')
 @connectStore(themeStore)
+@connectStore(navStore)
 @connectStore(i18n.store)
 @adoptedStyle(style)
 export class ModuleMetaElement extends GemElement {
   render = () => {
     return html`
       <dy-title suffix=${mediaQuery.isPWA ? '' : ` - ${i18n.get('title')}`}></dy-title>
       <dy-reflect>
-        <meta name="theme-color" content=${themeStore.titleBarColor} />
+        <meta
+          name="theme-color"
+          content=${navStore.room ? '#000' : isSafari ? themeStore.backgroundColor : themeStore.titleBarColor}
+        />
         <meta name="description" content=${i18n.get('sloganDesc')} />
       </dy-reflect>
     `;

diff --git a/packages/webapp/src/modules/nav.ts b/packages/webapp/src/modules/nav.ts
@@ -127,7 +127,7 @@ const style = createCSSSheet(css`
   }
 `);
 
-const navStore = createStore({
+export const navStore = createStore({
   room: false,
 });
 

diff --git a/packages/webapp/src/modules/side-nav.ts b/packages/webapp/src/modules/side-nav.ts
@@ -29,7 +29,7 @@ const style = createCSSSheet(css`
     justify-content: space-between;
     align-items: stretch;
     width: 100vw;
-    height: 100vh;
+    height: 100%;
     top: 0;
     left: 0;
     transition: all 0.3s ${theme.timingEasingFunction};
@@ -84,6 +84,13 @@ export class MSideNavElement extends GemElement {
     this.open = !!configure.sideNavState;
 
     return html`
+      <dy-reflect>
+        <style>
+          body {
+            background: black !important;
+          }
+        </style>
+      </dy-reflect>
       <dy-gesture class="nav" @swipe=${this.#onSwipe}>
         <dy-side-navigation
           .items=${[routes.games, routes.favorites].filter((e) => !!e.getContent)}

diff --git a/packages/webapp/src/pages/homepage.ts b/packages/webapp/src/pages/homepage.ts
@@ -47,6 +47,7 @@ const style = createCSSSheet(css`
   :host {
     display: block;
     height: 100vh;
+    height: 100dvh;
     overflow: auto;
     scrollbar-width: thin;
   }
@@ -66,7 +67,7 @@ const style = createCSSSheet(css`
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    background: black;
+    background: ${theme.backgroundColor};
     overflow: hidden;
   }
   .bg {

diff --git a/packages/webapp/src/services/index.ts b/packages/webapp/src/services/index.ts
@@ -106,8 +106,6 @@ export function subscribe<Result, InputVar = Record<string, any>>(
     },
   );
 
-  addEventListener('unload', () => client.close());
-
   let deferred: {
     resolve: (done: boolean) => void;
     reject: (err: unknown) => void;
@@ -149,6 +147,7 @@ export function subscribe<Result, InputVar = Record<string, any>>(
     },
     async return() {
       dispose.unsubscribe();
+      client.close();
       return { done: true, value: undefined };
     },
   };

diff --git a/packages/webapp/src/utils/common.ts b/packages/webapp/src/utils/common.ts
@@ -85,10 +85,14 @@ export const saveFile = async (file: File) => {
     const a = document.createElement('a');
     a.download = file.name;
     a.href = URL.createObjectURL(file);
+    a.style.display = 'none';
     document.body.append(a);
     a.click();
-    a.remove();
-    addEventListener('focus', () => setTimeout(() => URL.revokeObjectURL(a.href), 1000), { once: true });
+    setTimeout(() => {
+      // UA has already held a blob ref
+      URL.revokeObjectURL(a.href);
+      a.remove();
+    }, 1000);
     return undefined;
   }
 };