diff --git a/src/App.tsx b/src/App.tsx index 69249b3..6ed8a9b 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -25,17 +25,13 @@ const AccountMastodonOAuth2Callback = lazy( const TimelineHome = lazy(() => import("./timelines/Home.js")); const Settings = lazy(() => import("./settings/Settings.js")); const TootBottomSheet = lazy(() => import("./timelines/TootBottomSheet.js")); -const MotionSettings = lazy(() => import("./settings/Motions.js")); const Routing: Component = () => { return ( - - - - + diff --git a/src/material/BottomSheet.tsx b/src/material/BottomSheet.tsx index 92eabc9..89440e2 100644 --- a/src/material/BottomSheet.tsx +++ b/src/material/BottomSheet.tsx @@ -62,14 +62,12 @@ const BottomSheet: ParentComponent = (props) => { }); const onClose = () => { - hero()!.style.visibility = 'unset' element.close(); setHero(); }; const animatedClose = () => { - const srcElement = hero() - const endRect = srcElement?.getBoundingClientRect(); + const endRect = hero(); if (endRect) { const startRect = element.getBoundingClientRect(); const animation = animateHero(startRect, endRect, element, true); @@ -83,10 +81,8 @@ const BottomSheet: ParentComponent = (props) => { const animatedOpen = () => { element.showModal(); - const srcElement = hero() - const startRect = srcElement?.getBoundingClientRect(); + const startRect = hero(); if (!startRect) return; - srcElement!.style.visibility = 'hidden' const endRect = element.getBoundingClientRect(); animateHero(startRect, endRect, element); }; diff --git a/src/material/Img.tsx b/src/material/Img.tsx index 774460c..f85b6d3 100644 --- a/src/material/Img.tsx +++ b/src/material/Img.tsx @@ -44,7 +44,7 @@ const Img: Component = (props) => { object-position: center; width: 100%; height: 100%; - visibility: ${isBlurEnabled() ? "hidden" : "initial"}; + visibility: ${isBlurEnabled() ? "hidden" : "visible"}; } } diff --git a/src/platform/anim.ts b/src/platform/anim.ts index 3108448..7b87333 100644 --- a/src/platform/anim.ts +++ b/src/platform/anim.ts @@ -9,7 +9,7 @@ import { } from "solid-js"; export type HeroSource = { - [key: string | symbol | number]: HTMLElement | undefined; + [key: string | symbol | number]: DOMRect | undefined; }; const HeroSourceContext = createContext>( @@ -27,10 +27,10 @@ function useHeroSource() { */ export function useHeroSignal( key: string | symbol | number, -): Signal { +): Signal { const source = useHeroSource(); if (source) { - const [get, set] = createSignal(); + const [get, set] = createSignal(); createRenderEffect(() => { const value = source[0](); diff --git a/src/settings/Motions.tsx b/src/settings/Motions.tsx deleted file mode 100644 index 2f111fd..0000000 --- a/src/settings/Motions.tsx +++ /dev/null @@ -1,89 +0,0 @@ -import type { Component } from "solid-js"; -import Scaffold from "../material/Scaffold"; -import { - AppBar, - Divider, - IconButton, - List, - ListItemButton, - ListItemSecondaryAction, - ListItemText, - ListSubheader, - Switch, - Toolbar, -} from "@suid/material"; -import { Title } from "../material/typography"; -import { useNavigate } from "@solidjs/router"; -import { Close as CloseIcon } from "@suid/icons-material"; -import { createTranslator } from "../platform/i18n"; -import { useStore } from "@nanostores/solid"; -import { $settings } from "./stores"; - -const Motions: Component = () => { - const navigate = useNavigate(); - const [t] = createTranslator( - (code) => - import(`./i18n/${code}.json`) as Promise<{ - default: Record; - }>, - ); - const settings = useStore($settings); - return ( - - - - - - {t("motions")} - - - } - > - -
  • -
      - {t("motions.gifs")} - - $settings.setKey("autoPlayGIFs", !settings().autoPlayGIFs) - } - > - {t("motions.gifs.autoplay")} - - - - - -
    -
    • -
  • -
      - {t("motions.vids")} - - $settings.setKey("autoPlayVideos", !settings().autoPlayVideos) - } - > - {t("motions.vids.autoplay")} - - - - - -
    -
    • -     -     - ); -}; - -export default Motions; diff --git a/src/settings/Settings.tsx b/src/settings/Settings.tsx index e27443a..ad9f66b 100644 --- a/src/settings/Settings.tsx +++ b/src/settings/Settings.tsx @@ -1,10 +1,4 @@ -import { - children, - createSignal, - For, - Show, - type ParentComponent, -} from "solid-js"; +import { createSignal, For, Show, type ParentComponent } from "solid-js"; import Scaffold from "../material/Scaffold.js"; import { AppBar, @@ -17,18 +11,18 @@ import { ListItemSecondaryAction, ListItemText, ListSubheader, + NativeSelect, Switch, Toolbar, } from "@suid/material"; import { - Animation as AnimationIcon, Close as CloseIcon, Logout, Public as PublicIcon, Refresh as RefreshIcon, Translate as TranslateIcon, } from "@suid/icons-material"; -import { A, useNavigate } from "@solidjs/router"; +import { useNavigate } from "@solidjs/router"; import { Title } from "../material/typography.jsx"; import { css } from "solid-styled"; import { useSignedInProfiles } from "../masto/acct.js"; @@ -49,13 +43,12 @@ import { type Template } from "@solid-primitives/i18n"; import BottomSheet from "../material/BottomSheet.jsx"; import ChooseLang from "./ChooseLang.jsx"; import ChooseRegion from "./ChooseRegion.jsx"; -import { Portal } from "solid-js/web"; type Strings = { ["lang.auto"]: Template<{ detected: string }>; } & Record; -const Settings: ParentComponent = (props) => { +const Settings: ParentComponent = () => { const [t] = createTranslator( (code) => import(`./i18n/${code}.json`) as Promise<{ @@ -78,8 +71,6 @@ const Settings: ParentComponent = (props) => { signOut((a) => a.site === acct.site && a.accessToken === acct.accessToken); }; - const subpage = children(() => props.children); - css` ul { padding: 0; @@ -105,10 +96,6 @@ const Settings: ParentComponent = (props) => { } > - navigate(-1)}> - {subpage()} - -
    • @@ -148,7 +135,7 @@ const Settings: ParentComponent = (props) => {
    • - {t("timelines")} + {t("Reading")} $settings.setKey( @@ -165,13 +152,6 @@ const Settings: ParentComponent = (props) => { - - - - - {t("motions")} - -
    • {t("This Application")} diff --git a/src/settings/i18n/en.json b/src/settings/i18n/en.json index 98424be..095bc04 100644 --- a/src/settings/i18n/en.json +++ b/src/settings/i18n/en.json @@ -3,7 +3,7 @@ "Accounts": "Accounts", "All Notifications": "All Notifications", "Sign in...": "Sign in...", - "timelines": "Timelines and Toot Lists", + "Reading": "Reading", "Prefetch Toots": "Prefetch Toots", "Prefetch Toots.2nd": "Tutu will download the toots before you need.", "This Application": "This Application", @@ -26,11 +26,5 @@ "Choose Language": "Choose Language", "Supported": "Supported", "Unsupported": "Unsupported", - "Choose Region": "Choose Region", - - "motions": "GIFs and Videos", - "motions.gifs": "GIFs", - "motions.gifs.autoplay": "Auto-play GIFs", - "motions.vids": "Videos", - "motions.vids.autoplay": "Auto-play Videos" + "Choose Region": "Choose Region" } \ No newline at end of file diff --git a/src/settings/i18n/zh-Hans.json b/src/settings/i18n/zh-Hans.json index 481d57c..8fd70d1 100644 --- a/src/settings/i18n/zh-Hans.json +++ b/src/settings/i18n/zh-Hans.json @@ -3,7 +3,7 @@ "Accounts": "所有账户", "All Notifications": "所有通知", "Sign in...": "登录新账户...", - "timelines": "时间线和嘟文列表", + "Reading": "阅读", "Prefetch Toots": "提前下载嘟文", "Prefetch Toots.2nd": "图图会在你可能需要的时候提前下载嘟文。", "This Application": "本应用", @@ -26,11 +26,5 @@ "Choose Language": "选择语言", "Supported": "已支持", "Unsupported": "尚未支持", - "Choose Region": "选择区域", - - "motions": "动图和视频", - "motions.gifs": "动图", - "motions.gifs.autoplay": "自动播放动图", - "motions.vids": "视频", - "motions.vids.autoplay": "自动播放视频" + "Choose Region": "选择区域" } \ No newline at end of file diff --git a/src/settings/stores.ts b/src/settings/stores.ts index 0d392e2..151f449 100644 --- a/src/settings/stores.ts +++ b/src/settings/stores.ts @@ -5,10 +5,6 @@ type Settings = { prefetchTootsDisabled?: boolean; language?: string; region?: string; - - // GIFs and Videos - autoPlayGIFs?: boolean; - autoPlayVideos?: boolean; }; export const $settings = persistentMap( diff --git a/src/timelines/Home.tsx b/src/timelines/Home.tsx index 8321872..5c74795 100644 --- a/src/timelines/Home.tsx +++ b/src/timelines/Home.tsx @@ -340,7 +340,8 @@ const Home: ParentComponent = (props) => { console.warn("no account info?"); return; } - setHeroSrc((x) => Object.assign({}, x, { [BOTTOM_SHEET_HERO]: srcElement })); + const rect = srcElement?.getBoundingClientRect(); + setHeroSrc((x) => Object.assign({}, x, { [BOTTOM_SHEET_HERO]: rect })); const acct = `${inf.username}@${p.account.site}`; setTootBottomSheetCache(acct, toot); navigate(`/${encodeURIComponent(acct)}/${toot.id}`, { diff --git a/src/timelines/MediaAttachmentGrid.tsx b/src/timelines/MediaAttachmentGrid.tsx index 0fa0b1c..5748f0d 100644 --- a/src/timelines/MediaAttachmentGrid.tsx +++ b/src/timelines/MediaAttachmentGrid.tsx @@ -13,8 +13,6 @@ import tootStyle from "./toot.module.css"; import MediaViewer from "./MediaViewer"; import { render } from "solid-js/web"; import { useWindowSize } from "@solid-primitives/resize-observer"; -import { useStore } from "@nanostores/solid"; -import { $settings } from "../settings/stores"; const MediaAttachmentGrid: Component<{ attachments: mastodon.v1.MediaAttachment[]; @@ -24,7 +22,6 @@ const MediaAttachmentGrid: Component<{ const viewerOpened = () => typeof viewerIndex() !== "undefined"; const windowSize = useWindowSize(); const vh35 = () => Math.floor(windowSize.height * 0.35); - const settings = useStore($settings); createRenderEffect((lastDispose?: () => void) => { lastDispose?.(); @@ -73,11 +70,7 @@ const MediaAttachmentGrid: Component<{
      { - if (e.target !== e.currentTarget) { - e.stopImmediatePropagation(); - } - }} + onClick={(e) => e.stopImmediatePropagation()} > {(item, index) => { @@ -116,23 +109,20 @@ const MediaAttachmentGrid: Component<{ src={item.url || undefined} style={style()} onLoadedMetadata={[setLoaded, true]} - autoplay={settings().autoPlayVideos} - playsinline={settings().autoPlayVideos ? true : undefined} + autoplay={false} controls - poster={item.previewUrl} /> ); - case "gifv": + case "gifv": // Later we can handle the preview return (