Compare commits

..

3 commits

Author SHA1 Message Date
thislight
99bbd3eeab
add settings for autoplay gifs and vids
All checks were successful
/ depoly (push) Successful in 1m0s
2024-10-09 18:45:19 +08:00
thislight
d44a90ab49
PullDownToRefresh: fix wheeling switch page 2024-10-09 18:40:40 +08:00
thislight
bcfb846115
BottomSheet: improve hero animation 2024-10-09 17:33:27 +08:00
13 changed files with 166 additions and 25 deletions

View file

@ -25,13 +25,17 @@ const AccountMastodonOAuth2Callback = lazy(
const TimelineHome = lazy(() => import("./timelines/Home.js")); const TimelineHome = lazy(() => import("./timelines/Home.js"));
const Settings = lazy(() => import("./settings/Settings.js")); const Settings = lazy(() => import("./settings/Settings.js"));
const TootBottomSheet = lazy(() => import("./timelines/TootBottomSheet.js")); const TootBottomSheet = lazy(() => import("./timelines/TootBottomSheet.js"));
const MotionSettings = lazy(() => import("./settings/Motions.js"));
const Routing: Component = () => { const Routing: Component = () => {
return ( return (
<Router> <Router>
<Route path="/" component={TimelineHome}> <Route path="/" component={TimelineHome}>
<Route path=""></Route> <Route path=""></Route>
<Route path="/settings" component={Settings}></Route> <Route path="/settings" component={Settings}>
<Route path=""></Route>
<Route path="/motions" component={MotionSettings}></Route>
</Route>
<Route path="/:acct/:id" component={TootBottomSheet}></Route> <Route path="/:acct/:id" component={TootBottomSheet}></Route>
</Route> </Route>
<Route path={"/accounts"}> <Route path={"/accounts"}>

View file

@ -62,12 +62,14 @@ const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
}); });
const onClose = () => { const onClose = () => {
hero()!.style.visibility = 'unset'
element.close(); element.close();
setHero(); setHero();
}; };
const animatedClose = () => { const animatedClose = () => {
const endRect = hero(); const srcElement = hero()
const endRect = srcElement?.getBoundingClientRect();
if (endRect) { if (endRect) {
const startRect = element.getBoundingClientRect(); const startRect = element.getBoundingClientRect();
const animation = animateHero(startRect, endRect, element, true); const animation = animateHero(startRect, endRect, element, true);
@ -81,8 +83,10 @@ const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
const animatedOpen = () => { const animatedOpen = () => {
element.showModal(); element.showModal();
const startRect = hero(); const srcElement = hero()
const startRect = srcElement?.getBoundingClientRect();
if (!startRect) return; if (!startRect) return;
srcElement!.style.visibility = 'hidden'
const endRect = element.getBoundingClientRect(); const endRect = element.getBoundingClientRect();
animateHero(startRect, endRect, element); animateHero(startRect, endRect, element);
}; };

View file

@ -44,7 +44,7 @@ const Img: Component<ImgProps> = (props) => {
object-position: center; object-position: center;
width: 100%; width: 100%;
height: 100%; height: 100%;
visibility: ${isBlurEnabled() ? "hidden" : "visible"}; visibility: ${isBlurEnabled() ? "hidden" : "initial"};
} }
} }

View file

@ -9,7 +9,7 @@ import {
} from "solid-js"; } from "solid-js";
export type HeroSource = { export type HeroSource = {
[key: string | symbol | number]: DOMRect | undefined; [key: string | symbol | number]: HTMLElement | undefined;
}; };
const HeroSourceContext = createContext<Signal<HeroSource>>( const HeroSourceContext = createContext<Signal<HeroSource>>(
@ -27,10 +27,10 @@ function useHeroSource() {
*/ */
export function useHeroSignal( export function useHeroSignal(
key: string | symbol | number, key: string | symbol | number,
): Signal<DOMRect | undefined> { ): Signal<HTMLElement | undefined> {
const source = useHeroSource(); const source = useHeroSource();
if (source) { if (source) {
const [get, set] = createSignal<DOMRect>(); const [get, set] = createSignal<HTMLElement>();
createRenderEffect(() => { createRenderEffect(() => {
const value = source[0](); const value = source[0]();

89
src/settings/Motions.tsx Normal file
View file

@ -0,0 +1,89 @@
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<string, string | undefined>;
}>,
);
const settings = useStore($settings);
return (
<Scaffold
topbar={
<AppBar position="static">
<Toolbar
variant="dense"
sx={{ paddingTop: "var(--safe-area-inset-top, 0px)" }}
>
<IconButton color="inherit" onClick={[navigate, -1]} disableRipple>
<CloseIcon />
</IconButton>
<Title>{t("motions")}</Title>
</Toolbar>
</AppBar>
}
>
<List
sx={{
paddingBottom: "calc(var(--safe-area-inset-bottom, 0px) + 16px)",
}}
>
<li>
<ul style={{ "padding-left": 0 }}>
<ListSubheader>{t("motions.gifs")}</ListSubheader>
<ListItemButton
onClick={() =>
$settings.setKey("autoPlayGIFs", !settings().autoPlayGIFs)
}
>
<ListItemText>{t("motions.gifs.autoplay")}</ListItemText>
<ListItemSecondaryAction>
<Switch checked={settings().autoPlayGIFs}></Switch>
</ListItemSecondaryAction>
</ListItemButton>
<Divider />
</ul>
</li>
<li>
<ul style={{ "padding-left": 0 }}>
<ListSubheader>{t("motions.vids")}</ListSubheader>
<ListItemButton
onClick={() =>
$settings.setKey("autoPlayVideos", !settings().autoPlayVideos)
}
>
<ListItemText>{t("motions.vids.autoplay")}</ListItemText>
<ListItemSecondaryAction>
<Switch checked={settings().autoPlayVideos}></Switch>
</ListItemSecondaryAction>
</ListItemButton>
<Divider />
</ul>
</li>
</List>
</Scaffold>
);
};
export default Motions;

View file

@ -1,4 +1,10 @@
import { createSignal, For, Show, type ParentComponent } from "solid-js"; import {
children,
createSignal,
For,
Show,
type ParentComponent,
} from "solid-js";
import Scaffold from "../material/Scaffold.js"; import Scaffold from "../material/Scaffold.js";
import { import {
AppBar, AppBar,
@ -11,18 +17,18 @@ import {
ListItemSecondaryAction, ListItemSecondaryAction,
ListItemText, ListItemText,
ListSubheader, ListSubheader,
NativeSelect,
Switch, Switch,
Toolbar, Toolbar,
} from "@suid/material"; } from "@suid/material";
import { import {
Animation as AnimationIcon,
Close as CloseIcon, Close as CloseIcon,
Logout, Logout,
Public as PublicIcon, Public as PublicIcon,
Refresh as RefreshIcon, Refresh as RefreshIcon,
Translate as TranslateIcon, Translate as TranslateIcon,
} from "@suid/icons-material"; } from "@suid/icons-material";
import { useNavigate } from "@solidjs/router"; import { A, useNavigate } from "@solidjs/router";
import { Title } from "../material/typography.jsx"; import { Title } from "../material/typography.jsx";
import { css } from "solid-styled"; import { css } from "solid-styled";
import { useSignedInProfiles } from "../masto/acct.js"; import { useSignedInProfiles } from "../masto/acct.js";
@ -43,12 +49,13 @@ import { type Template } from "@solid-primitives/i18n";
import BottomSheet from "../material/BottomSheet.jsx"; import BottomSheet from "../material/BottomSheet.jsx";
import ChooseLang from "./ChooseLang.jsx"; import ChooseLang from "./ChooseLang.jsx";
import ChooseRegion from "./ChooseRegion.jsx"; import ChooseRegion from "./ChooseRegion.jsx";
import { Portal } from "solid-js/web";
type Strings = { type Strings = {
["lang.auto"]: Template<{ detected: string }>; ["lang.auto"]: Template<{ detected: string }>;
} & Record<string, string | undefined>; } & Record<string, string | undefined>;
const Settings: ParentComponent = () => { const Settings: ParentComponent = (props) => {
const [t] = createTranslator( const [t] = createTranslator(
(code) => (code) =>
import(`./i18n/${code}.json`) as Promise<{ import(`./i18n/${code}.json`) as Promise<{
@ -71,6 +78,8 @@ const Settings: ParentComponent = () => {
signOut((a) => a.site === acct.site && a.accessToken === acct.accessToken); signOut((a) => a.site === acct.site && a.accessToken === acct.accessToken);
}; };
const subpage = children(() => props.children);
css` css`
ul { ul {
padding: 0; padding: 0;
@ -96,6 +105,10 @@ const Settings: ParentComponent = () => {
</AppBar> </AppBar>
} }
> >
<BottomSheet open={!!subpage()} onClose={() => navigate(-1)}>
{subpage()}
</BottomSheet>
<List class="setting-list" use:solid-styled> <List class="setting-list" use:solid-styled>
<li> <li>
<ul> <ul>
@ -135,7 +148,7 @@ const Settings: ParentComponent = () => {
</For> </For>
</li> </li>
<li> <li>
<ListSubheader>{t("Reading")}</ListSubheader> <ListSubheader>{t("timelines")}</ListSubheader>
<ListItemButton <ListItemButton
onClick={(e) => onClick={(e) =>
$settings.setKey( $settings.setKey(
@ -152,6 +165,13 @@ const Settings: ParentComponent = () => {
</ListItemSecondaryAction> </ListItemSecondaryAction>
</ListItemButton> </ListItemButton>
<Divider /> <Divider />
<ListItemButton component={A} href="./motions">
<ListItemIcon>
<AnimationIcon></AnimationIcon>
</ListItemIcon>
<ListItemText>{t("motions")}</ListItemText>
</ListItemButton>
<Divider />
</li> </li>
<li> <li>
<ListSubheader>{t("This Application")}</ListSubheader> <ListSubheader>{t("This Application")}</ListSubheader>

View file

@ -3,7 +3,7 @@
"Accounts": "Accounts", "Accounts": "Accounts",
"All Notifications": "All Notifications", "All Notifications": "All Notifications",
"Sign in...": "Sign in...", "Sign in...": "Sign in...",
"Reading": "Reading", "timelines": "Timelines and Toot Lists",
"Prefetch Toots": "Prefetch Toots", "Prefetch Toots": "Prefetch Toots",
"Prefetch Toots.2nd": "Tutu will download the toots before you need.", "Prefetch Toots.2nd": "Tutu will download the toots before you need.",
"This Application": "This Application", "This Application": "This Application",
@ -26,5 +26,11 @@
"Choose Language": "Choose Language", "Choose Language": "Choose Language",
"Supported": "Supported", "Supported": "Supported",
"Unsupported": "Unsupported", "Unsupported": "Unsupported",
"Choose Region": "Choose Region" "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"
} }

View file

@ -3,7 +3,7 @@
"Accounts": "所有账户", "Accounts": "所有账户",
"All Notifications": "所有通知", "All Notifications": "所有通知",
"Sign in...": "登录新账户...", "Sign in...": "登录新账户...",
"Reading": "阅读", "timelines": "时间线和嘟文列表",
"Prefetch Toots": "提前下载嘟文", "Prefetch Toots": "提前下载嘟文",
"Prefetch Toots.2nd": "图图会在你可能需要的时候提前下载嘟文。", "Prefetch Toots.2nd": "图图会在你可能需要的时候提前下载嘟文。",
"This Application": "本应用", "This Application": "本应用",
@ -26,5 +26,11 @@
"Choose Language": "选择语言", "Choose Language": "选择语言",
"Supported": "已支持", "Supported": "已支持",
"Unsupported": "尚未支持", "Unsupported": "尚未支持",
"Choose Region": "选择区域" "Choose Region": "选择区域",
"motions": "动图和视频",
"motions.gifs": "动图",
"motions.gifs.autoplay": "自动播放动图",
"motions.vids": "视频",
"motions.vids.autoplay": "自动播放视频"
} }

View file

@ -5,6 +5,10 @@ type Settings = {
prefetchTootsDisabled?: boolean; prefetchTootsDisabled?: boolean;
language?: string; language?: string;
region?: string; region?: string;
// GIFs and Videos
autoPlayGIFs?: boolean;
autoPlayVideos?: boolean;
}; };
export const $settings = persistentMap<Settings>( export const $settings = persistentMap<Settings>(

View file

@ -340,8 +340,7 @@ const Home: ParentComponent = (props) => {
console.warn("no account info?"); console.warn("no account info?");
return; return;
} }
const rect = srcElement?.getBoundingClientRect(); setHeroSrc((x) => Object.assign({}, x, { [BOTTOM_SHEET_HERO]: srcElement }));
setHeroSrc((x) => Object.assign({}, x, { [BOTTOM_SHEET_HERO]: rect }));
const acct = `${inf.username}@${p.account.site}`; const acct = `${inf.username}@${p.account.site}`;
setTootBottomSheetCache(acct, toot); setTootBottomSheetCache(acct, toot);
navigate(`/${encodeURIComponent(acct)}/${toot.id}`, { navigate(`/${encodeURIComponent(acct)}/${toot.id}`, {

View file

@ -13,6 +13,8 @@ import tootStyle from "./toot.module.css";
import MediaViewer from "./MediaViewer"; import MediaViewer from "./MediaViewer";
import { render } from "solid-js/web"; import { render } from "solid-js/web";
import { useWindowSize } from "@solid-primitives/resize-observer"; import { useWindowSize } from "@solid-primitives/resize-observer";
import { useStore } from "@nanostores/solid";
import { $settings } from "../settings/stores";
const MediaAttachmentGrid: Component<{ const MediaAttachmentGrid: Component<{
attachments: mastodon.v1.MediaAttachment[]; attachments: mastodon.v1.MediaAttachment[];
@ -22,6 +24,7 @@ const MediaAttachmentGrid: Component<{
const viewerOpened = () => typeof viewerIndex() !== "undefined"; const viewerOpened = () => typeof viewerIndex() !== "undefined";
const windowSize = useWindowSize(); const windowSize = useWindowSize();
const vh35 = () => Math.floor(windowSize.height * 0.35); const vh35 = () => Math.floor(windowSize.height * 0.35);
const settings = useStore($settings);
createRenderEffect((lastDispose?: () => void) => { createRenderEffect((lastDispose?: () => void) => {
lastDispose?.(); lastDispose?.();
@ -70,7 +73,11 @@ const MediaAttachmentGrid: Component<{
<section <section
ref={rootRef!} ref={rootRef!}
class={[tootStyle.tootAttachmentGrp, "attachments"].join(" ")} class={[tootStyle.tootAttachmentGrp, "attachments"].join(" ")}
onClick={(e) => e.stopImmediatePropagation()} onClick={(e) => {
if (e.target !== e.currentTarget) {
e.stopImmediatePropagation();
}
}}
> >
<For each={props.attachments}> <For each={props.attachments}>
{(item, index) => { {(item, index) => {
@ -109,20 +116,23 @@ const MediaAttachmentGrid: Component<{
src={item.url || undefined} src={item.url || undefined}
style={style()} style={style()}
onLoadedMetadata={[setLoaded, true]} onLoadedMetadata={[setLoaded, true]}
autoplay={false} autoplay={settings().autoPlayVideos}
playsinline={settings().autoPlayVideos ? true : undefined}
controls controls
poster={item.previewUrl}
/> />
); );
case "gifv": // Later we can handle the preview case "gifv":
return ( return (
<video <video
src={item.url || undefined} src={item.url || undefined}
style={style()} style={style()}
onLoadedMetadata={[setLoaded, true]} onLoadedMetadata={[setLoaded, true]}
autoplay={false} autoplay={settings().autoPlayGIFs}
controls controls
playsinline /* or safari on iOS will play in full-screen */ playsinline /* or safari on iOS will play in full-screen */
loop loop
poster={item.previewUrl}
/> />
); );

View file

@ -95,7 +95,7 @@ const PullDownToRefresh: Component<{
const scrollTop = (event.target as HTMLElement).scrollTop; const scrollTop = (event.target as HTMLElement).scrollTop;
if (scrollTop >= 0 && scrollTop < 1) { if (scrollTop >= 0 && scrollTop < 1) {
const d = untrack(pullDown); const d = untrack(pullDown);
if (event.deltaY <= 0 || d > 0) event.preventDefault(); if (d > 1) event.preventDefault();
ds = -(event.deltaY / window.devicePixelRatio / 2); ds = -(event.deltaY / window.devicePixelRatio / 2);
holding = d < stopPos(); holding = d < stopPos();
if (wheelTimeout) { if (wheelTimeout) {
@ -129,7 +129,6 @@ const PullDownToRefresh: Component<{
return; return;
} }
const item = event.targetTouches.item(0)!; const item = event.targetTouches.item(0)!;
if (untrack(pullDown) > 0) event.preventDefault();
if (lastTouchId && item.identifier !== lastTouchId) { if (lastTouchId && item.identifier !== lastTouchId) {
lastTouchId = undefined; lastTouchId = undefined;
lastTouchScreenY = 0; lastTouchScreenY = 0;
@ -140,6 +139,7 @@ const PullDownToRefresh: Component<{
if (lastTouchScreenY !== 0) { if (lastTouchScreenY !== 0) {
ds = item.screenY - lastTouchScreenY; ds = item.screenY - lastTouchScreenY;
} }
if (Math.abs(ds) > 1 && untrack(pullDown) > 1) event.preventDefault();
lastTouchScreenY = item.screenY; lastTouchScreenY = item.screenY;
if (released) { if (released) {
released = false; released = false;

View file

@ -185,7 +185,6 @@ function randomChoose<T extends any[]>(
K: T, K: T,
): T extends Array<infer E> ? E : never { ): T extends Array<infer E> ? E : never {
const idx = Math.floor(rn * K.length); const idx = Math.floor(rn * K.length);
console.log(idx, K.length);
return K[idx]; return K[idx];
} }