Merge pull request #334 from cheeaun/main

Update from main

package.json

@@ -25,17 +25,17 @@
     "idb-keyval": "~6.2.1",
     "just-debounce-it": "~3.2.0",
     "lz-string": "~1.5.0",
-    "masto": "~6.5.0",
+    "masto": "~6.5.1",
     "moize": "~6.1.6",
     "p-retry": "~6.1.0",
-    "p-throttle": "~5.1.0",
+    "p-throttle": "~6.0.0",
     "preact": "~10.19.2",
     "react-hotkeys-hook": "~4.4.1",
     "react-intersection-observer": "~9.5.3",
-    "react-quick-pinch-zoom": "~5.0.0",
+    "react-quick-pinch-zoom": "~5.1.0",
     "react-router-dom": "6.6.2",
     "string-length": "5.0.1",
-    "swiped-events": "~1.1.7",
+    "swiped-events": "~1.1.9",
     "toastify-js": "~1.12.0",
     "uid": "~2.0.2",
     "use-debounce": "~10.0.0",
@@ -44,16 +44,16 @@
     "valtio": "1.9.0"
   },
   "devDependencies": {
-    "@preact/preset-vite": "~2.6.0",
+    "@preact/preset-vite": "~2.7.0",
     "@trivago/prettier-plugin-sort-imports": "~4.3.0",
     "postcss": "~8.4.31",
     "postcss-dark-theme-class": "~1.0.0",
     "postcss-preset-env": "~9.3.0",
     "twitter-text": "~3.1.0",
-    "vite": "~4.5.0",
-    "vite-plugin-generate-file": "~0.0.4",
+    "vite": "~5.0.2",
+    "vite-plugin-generate-file": "~0.1.1",
     "vite-plugin-html-config": "~1.0.11",
-    "vite-plugin-pwa": "~0.16.7",
+    "vite-plugin-pwa": "~0.17.0",
     "vite-plugin-remove-console": "~2.1.1",
     "workbox-cacheable-response": "~7.0.0",
     "workbox-expiration": "~7.0.0",
@@ -70,6 +70,11 @@
       }
     }
   },
+  "overrides": {
+    "vite": {
+      "rollup": ">=4.5.1"
+    }
+  },
   "browserslist": [
     "defaults",
     "android >= 4"

src/app.jsx

@@ -72,7 +72,9 @@ window.__STATES_STATS__ = () => {
   const { statuses } = states;
   const unmountedPosts = [];
   for (const key in statuses) {
-    const $post = document.querySelector(`[data-state-post-id="${key}"]`);
+    const $post = document.querySelector(
+      `[data-state-post-id~="${key}"], [data-state-post-ids~="${key}"]`,
+    );
     if (!$post) {
       unmountedPosts.push(key);
     }
@@ -89,8 +91,11 @@ setInterval(() => {
   let keysCount = 0;
   const { instance } = api();
   for (const key in statuses) {
+    if (!window.__IDLE__) break;
     try {
-      const $post = document.querySelector(`[data-state-post-id~="${key}"]`);
+      const $post = document.querySelector(
+        `[data-state-post-id~="${key}"], [data-state-post-ids~="${key}"]`,
+      );
       const postInNotifications = notifications.some(
         (n) => key === statusKey(n.status?.id, instance),
       );

src/components/media.jsx

@@ -328,6 +328,7 @@ function Media({
     const formattedDuration = formatDuration(original.duration);
     const hoverAnimate = !showOriginal && !autoAnimate && isGIF;
     const autoGIFAnimate = !showOriginal && autoAnimate && isGIF;
+    const showProgress = original.duration > 5;
 
     const videoHTML = `
     <video
@@ -343,6 +344,11 @@ function Media({
       playsinline
       loop="${loopable}"
       ${isGIF ? 'ondblclick="this.paused ? this.play() : this.pause()"' : ''}
+      ${
+        isGIF && showProgress
+          ? "ontimeupdate=\"this.closest('.media-gif') && this.closest('.media-gif').style.setProperty('--progress', `${~~((this.currentTime / this.duration) * 100)}%`)\""
+          : ''
+      }
     ></video>
   `;
 
@@ -431,6 +437,22 @@ function Media({
               playsinline
               loop
               muted
+              onTimeUpdate={
+                showProgress
+                  ? (e) => {
+                      const { target } = e;
+                      const container = target?.closest('.media-gif');
+                      if (container) {
+                        const percentage =
+                          (target.currentTime / target.duration) * 100;
+                        container.style.setProperty(
+                          '--progress',
+                          `${percentage}%`,
+                        );
+                      }
+                    }
+                  : undefined
+              }
             />
           ) : (
             <>

src/components/status.css

@@ -940,6 +940,28 @@ body:has(#modal-container .carousel) .status .media img:hover {
   border-radius: 4px;
   padding: 0 4px;
 }
+.media-gif {
+  position: relative;
+
+  &:before {
+    content: '';
+    position: absolute;
+    top: auto !important;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 2px;
+    background-color: var(--media-outline-color);
+    transform: translateX(calc(var(--progress, 0%) - 100%));
+    border-radius: 0 !important;
+    border: 0 !important;
+    border-right: 1px solid var(--media-fg-color) !important;
+    transition: transform 0.15s linear;
+  }
+  &:before {
+    height: 3px;
+  }
+}
 .status .media-gif video {
   object-fit: cover;
   pointer-events: none;

src/components/translation-block.jsx

@@ -20,6 +20,7 @@ const throttle = pThrottle({
 // Using other API instances instead of lingva.ml because of this bug (slashes don't work):
 // https://github.com/thedaviddelta/lingva-translate/issues/68
 const LINGVA_INSTANCES = [
+  'lingva.phanpy.social',
   'lingva.lunar.icu',
   'lingva.garudalinux.org',
   'translate.plausibility.cloud',

src/pages/status.jsx

@@ -810,7 +810,7 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
               />
               {ancestor && isThread && repliesCount > 1 && (
                 <div class="replies-link">
-                  <Icon icon="comment" />{' '}
+                  <Icon icon="comment2" />{' '}
                   <span title={repliesCount}>
                     {shortenNumber(repliesCount)}
                   </span>
@@ -1137,6 +1137,10 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
                 disabled={uiState === 'loading'}
                 onClick={() => setLimit((l) => l + LIMIT)}
                 style={{ marginBlockEnd: '6em' }}
+                data-state-post-ids={statuses
+                  .slice(limit)
+                  .map((s) => statusKey(s.id, instance))
+                  .join(' ')}
               >
                 <div class="ib avatars-bunch">
                   {/* show avatars for first 5 statuses */}
@@ -1319,7 +1323,7 @@ function SubComments({
               />
               {!r.replies?.length && r.repliesCount > 0 && (
                 <div class="replies-link">
-                  <Icon icon="comment" />{' '}
+                  <Icon icon="comment2" />{' '}
                   <span title={r.repliesCount}>
                     {shortenNumber(r.repliesCount)}
                   </span>