{!!onClose && (
@@ -2396,6 +2412,7 @@ function GIFPickerModal({ onClose = () => {}, onSelect = () => {} }) {
autocapitalize="off"
spellCheck="false"
dir="auto"
+ onInput={debouncedOnInput}
/>
{
- return store.session.get('currentAccount');
+ return getCurrentAccountID();
}, []);
const isSelf = useMemo(() => {
return currentAccount && currentAccount === accountId;
diff --git a/src/components/media.jsx b/src/components/media.jsx
index b12a6e9..ce2f13a 100644
--- a/src/components/media.jsx
+++ b/src/components/media.jsx
@@ -341,13 +341,15 @@ function Media({
if (!hasDimensions) {
const $media = e.target.closest('.media');
if ($media) {
+ const { naturalWidth, naturalHeight } = e.target;
$media.dataset.orientation =
- e.target.naturalWidth > e.target.naturalHeight
- ? 'landscape'
- : 'portrait';
- $media.style['--width'] = `${e.target.naturalWidth}px`;
- $media.style['--height'] = `${e.target.naturalHeight}px`;
- $media.style.aspectRatio = `${e.target.naturalWidth}/${e.target.naturalHeight}`;
+ naturalWidth > naturalHeight ? 'landscape' : 'portrait';
+ $media.style.setProperty('--width', `${naturalWidth}px`);
+ $media.style.setProperty(
+ '--height',
+ `${naturalHeight}px`,
+ );
+ $media.style.aspectRatio = `${naturalWidth}/${naturalHeight}`;
}
}
}}
@@ -386,7 +388,7 @@ function Media({
data-orientation="${orientation}"
preload="auto"
autoplay
- muted="${isGIF}"
+ ${isGIF ? 'muted' : ''}
${isGIF ? '' : 'controls'}
playsinline
loop="${loopable}"
@@ -511,19 +513,25 @@ function Media({
height={height}
data-orientation={orientation}
loading="lazy"
+ decoding="async"
onLoad={(e) => {
if (!hasDimensions) {
const $media = e.target.closest('.media');
if ($media) {
+ const { naturalHeight, naturalWidth } = e.target;
$media.dataset.orientation =
- e.target.naturalWidth > e.target.naturalHeight
+ naturalWidth > naturalHeight
? 'landscape'
: 'portrait';
- $media.style['--width'] = `${e.target.naturalWidth}px`;
- $media.style[
- '--height'
- ] = `${e.target.naturalHeight}px`;
- $media.style.aspectRatio = `${e.target.naturalWidth}/${e.target.naturalHeight}`;
+ $media.style.setProperty(
+ '--width',
+ `${naturalWidth}px`,
+ );
+ $media.style.setProperty(
+ '--height',
+ `${naturalHeight}px`,
+ );
+ $media.style.aspectRatio = `${naturalWidth}/${naturalHeight}`;
}
}
}}
diff --git a/src/components/nav-menu.jsx b/src/components/nav-menu.jsx
index 2b622fe..74f2567 100644
--- a/src/components/nav-menu.jsx
+++ b/src/components/nav-menu.jsx
@@ -11,6 +11,8 @@ import { getLists } from '../utils/lists';
import safeBoundingBoxPadding from '../utils/safe-bounding-box-padding';
import states from '../utils/states';
import store from '../utils/store';
+import { getCurrentAccountID } from '../utils/store-utils';
+import supports from '../utils/supports';
import Avatar from './avatar';
import Icon from './icon';
@@ -24,9 +26,8 @@ function NavMenu(props) {
const [currentAccount, moreThanOneAccount] = useMemo(() => {
const accounts = store.local.getJSON('accounts') || [];
const acc =
- accounts.find(
- (account) => account.info.id === store.session.get('currentAccount'),
- ) || accounts[0];
+ accounts.find((account) => account.info.id === getCurrentAccountID()) ||
+ accounts[0];
return [acc, accounts.length > 1];
}, []);
@@ -83,8 +84,10 @@ function NavMenu(props) {
return results;
}
+ const supportsLists = supports('@mastodon/lists');
const [lists, setLists] = useState([]);
useEffect(() => {
+ if (!supportsLists) return;
if (menuState === 'open') {
getLists().then(setLists);
}
@@ -186,9 +189,11 @@ function NavMenu(props) {
Catch-up
-
- Mentions
-
+ {supports('@mastodon/mentions') && (
+
+ Mentions
+
+ )}
Notifications
{snapStates.notificationsShowNew && (
@@ -232,10 +237,12 @@ function NavMenu(props) {
)}
) : (
-
-
- Lists
-
+ supportsLists && (
+
+
+ Lists
+
+ )
)}
Bookmarks
@@ -260,10 +267,12 @@ function NavMenu(props) {
Followed Hashtags
-
-
- Filters
-
+ {supports('@mastodon/filters') && (
+
+
+ Filters
+
+ )}