about summary refs log tree commit diff
path: root/app/javascript
diff options
context:
space:
mode:
Diffstat (limited to 'app/javascript')
-rw-r--r--app/javascript/mastodon/actions/accounts.js2
-rw-r--r--app/javascript/mastodon/actions/importer/index.js4
-rw-r--r--app/javascript/mastodon/actions/importer/normalizer.js4
-rw-r--r--app/javascript/mastodon/actions/statuses.js4
-rw-r--r--app/javascript/mastodon/components/status_content.js2
-rw-r--r--app/javascript/mastodon/db/modifier.js93
-rw-r--r--app/javascript/mastodon/features/account_gallery/index.js2
-rw-r--r--app/javascript/mastodon/reducers/notifications.js4
-rw-r--r--app/javascript/mastodon/service_worker/entry.js30
-rw-r--r--app/javascript/mastodon/storage/db.js (renamed from app/javascript/mastodon/db/async.js)0
-rw-r--r--app/javascript/mastodon/storage/modifier.js151
-rw-r--r--app/javascript/styles/mastodon/components.scss60
-rw-r--r--app/javascript/styles/mastodon/variables.scss5
13 files changed, 227 insertions, 134 deletions
diff --git a/app/javascript/mastodon/actions/accounts.js b/app/javascript/mastodon/actions/accounts.js
index 1d1947aca..7cacff909 100644
--- a/app/javascript/mastodon/actions/accounts.js
+++ b/app/javascript/mastodon/actions/accounts.js
@@ -1,5 +1,5 @@
 import api, { getLinks } from '../api';
-import asyncDB from '../db/async';
+import asyncDB from '../storage/db';
 import { importAccount, importFetchedAccount, importFetchedAccounts } from './importer';
 
 export const ACCOUNT_FETCH_REQUEST = 'ACCOUNT_FETCH_REQUEST';
diff --git a/app/javascript/mastodon/actions/importer/index.js b/app/javascript/mastodon/actions/importer/index.js
index d1ea40c36..e671d417c 100644
--- a/app/javascript/mastodon/actions/importer/index.js
+++ b/app/javascript/mastodon/actions/importer/index.js
@@ -1,4 +1,4 @@
-import { putAccounts, putStatuses } from '../../db/modifier';
+import { putAccounts, putStatuses } from '../../storage/modifier';
 import { normalizeAccount, normalizeStatus } from './normalizer';
 
 export const ACCOUNT_IMPORT = 'ACCOUNT_IMPORT';
@@ -39,7 +39,7 @@ export function importFetchedAccounts(accounts) {
     pushUnique(normalAccounts, normalizeAccount(account));
 
     if (account.moved) {
-      processAccount(account);
+      processAccount(account.moved);
     }
   }
 
diff --git a/app/javascript/mastodon/actions/importer/normalizer.js b/app/javascript/mastodon/actions/importer/normalizer.js
index c88f6946f..1b09f319f 100644
--- a/app/javascript/mastodon/actions/importer/normalizer.js
+++ b/app/javascript/mastodon/actions/importer/normalizer.js
@@ -10,6 +10,10 @@ export function normalizeAccount(account) {
   account.display_name_html = emojify(escapeTextContentForBrowser(displayName));
   account.note_emojified = emojify(account.note);
 
+  if (account.moved) {
+    account.moved = account.moved.id;
+  }
+
   return account;
 }
 
diff --git a/app/javascript/mastodon/actions/statuses.js b/app/javascript/mastodon/actions/statuses.js
index dcd813dd9..d28aef880 100644
--- a/app/javascript/mastodon/actions/statuses.js
+++ b/app/javascript/mastodon/actions/statuses.js
@@ -1,6 +1,6 @@
 import api from '../api';
-import asyncDB from '../db/async';
-import { evictStatus } from '../db/modifier';
+import asyncDB from '../storage/db';
+import { evictStatus } from '../storage/modifier';
 
 import { deleteFromTimelines } from './timelines';
 import { fetchStatusCard } from './cards';
diff --git a/app/javascript/mastodon/components/status_content.js b/app/javascript/mastodon/components/status_content.js
index b6082f008..9b86592f6 100644
--- a/app/javascript/mastodon/components/status_content.js
+++ b/app/javascript/mastodon/components/status_content.js
@@ -158,7 +158,7 @@ export default class StatusContent extends React.PureComponent {
           <p style={{ marginBottom: hidden && status.get('mentions').isEmpty() ? '0px' : null }}>
             <span dangerouslySetInnerHTML={spoilerContent} />
             {' '}
-            <button tabIndex='0' className='status__content__spoiler-link' onClick={this.handleSpoilerClick}>{toggleText}</button>
+            <button tabIndex='0' className={`status__content__spoiler-link ${hidden ? 'status__content__spoiler-link--show-more' : 'status__content__spoiler-link--show-less'}`} onClick={this.handleSpoilerClick}>{toggleText}</button>
           </p>
 
           {mentionsPlaceholder}
diff --git a/app/javascript/mastodon/db/modifier.js b/app/javascript/mastodon/db/modifier.js
deleted file mode 100644
index eb951905a..000000000
--- a/app/javascript/mastodon/db/modifier.js
+++ /dev/null
@@ -1,93 +0,0 @@
-import asyncDB from './async';
-
-const limit = 1024;
-
-function put(name, objects, callback) {
-  asyncDB.then(db => {
-    const putTransaction = db.transaction(name, 'readwrite');
-    const putStore = putTransaction.objectStore(name);
-    const putIndex = putStore.index('id');
-
-    objects.forEach(object => {
-      function add() {
-        putStore.add(object);
-      }
-
-      putIndex.getKey(object.id).onsuccess = retrieval => {
-        if (retrieval.target.result) {
-          putStore.delete(retrieval.target.result).onsuccess = add;
-        } else {
-          add();
-        }
-      };
-    });
-
-    putTransaction.oncomplete = () => {
-      const readTransaction = db.transaction(name, 'readonly');
-      const readStore = readTransaction.objectStore(name);
-
-      readStore.count().onsuccess = count => {
-        const excess = count.target.result - limit;
-
-        if (excess > 0) {
-          readStore.getAll(null, excess).onsuccess =
-            retrieval => callback(retrieval.target.result.map(({ id }) => id));
-        }
-      };
-    };
-  });
-}
-
-export function evictAccounts(ids) {
-  asyncDB.then(db => {
-    const transaction = db.transaction(['accounts', 'statuses'], 'readwrite');
-    const accounts = transaction.objectStore('accounts');
-    const accountsIdIndex = accounts.index('id');
-    const accountsMovedIndex = accounts.index('moved');
-    const statuses = transaction.objectStore('statuses');
-    const statusesIndex = statuses.index('account');
-
-    function evict(toEvict) {
-      toEvict.forEach(id => {
-        accountsMovedIndex.getAllKeys(id).onsuccess =
-          ({ target }) => evict(target.result);
-
-        statusesIndex.getAll(id).onsuccess =
-          ({ target }) => evictStatuses(target.result.map(({ id }) => id));
-
-        accountsIdIndex.getKey(id).onsuccess =
-          ({ target }) => target.result && accounts.delete(target.result);
-      });
-    }
-
-    evict(ids);
-  });
-}
-
-export function evictStatus(id) {
-  return evictStatuses([id]);
-}
-
-export function evictStatuses(ids) {
-  asyncDB.then(db => {
-    const store = db.transaction('statuses', 'readwrite').objectStore('statuses');
-    const idIndex = store.index('id');
-    const reblogIndex = store.index('reblog');
-
-    ids.forEach(id => {
-      reblogIndex.getAllKeys(id).onsuccess =
-        ({ target }) => target.result.forEach(reblogKey => store.delete(reblogKey));
-
-      idIndex.getKey(id).onsuccess =
-        ({ target }) => target.result && store.delete(target.result);
-    });
-  });
-}
-
-export function putAccounts(records) {
-  put('accounts', records, evictAccounts);
-}
-
-export function putStatuses(records) {
-  put('statuses', records, evictStatuses);
-}
diff --git a/app/javascript/mastodon/features/account_gallery/index.js b/app/javascript/mastodon/features/account_gallery/index.js
index 9a40d139c..5f564d3a9 100644
--- a/app/javascript/mastodon/features/account_gallery/index.js
+++ b/app/javascript/mastodon/features/account_gallery/index.js
@@ -67,7 +67,7 @@ export default class AccountGallery extends ImmutablePureComponent {
 
   handleScrollToBottom = () => {
     if (this.props.hasMore) {
-      this.handleLoadMore(this.props.medias.last().get('id'));
+      this.handleLoadMore(this.props.medias.last().getIn(['status', 'id']));
     }
   }
 
diff --git a/app/javascript/mastodon/reducers/notifications.js b/app/javascript/mastodon/reducers/notifications.js
index f023984b8..1ac7eb706 100644
--- a/app/javascript/mastodon/reducers/notifications.js
+++ b/app/javascript/mastodon/reducers/notifications.js
@@ -82,7 +82,7 @@ const expandNormalizedNotifications = (state, notifications, next) => {
 };
 
 const filterNotifications = (state, relationship) => {
-  return state.update('items', list => list.filterNot(item => item.get('account') === relationship.id));
+  return state.update('items', list => list.filterNot(item => item !== null && item.get('account') === relationship.id));
 };
 
 const updateTop = (state, top) => {
@@ -94,7 +94,7 @@ const updateTop = (state, top) => {
 };
 
 const deleteByStatus = (state, statusId) => {
-  return state.update('items', list => list.filterNot(item => item.get('status') === statusId));
+  return state.update('items', list => list.filterNot(item => item !== null && item.get('status') === statusId));
 };
 
 export default function notifications(state = initialState, action) {
diff --git a/app/javascript/mastodon/service_worker/entry.js b/app/javascript/mastodon/service_worker/entry.js
index 8b65f27a3..160c3fbf2 100644
--- a/app/javascript/mastodon/service_worker/entry.js
+++ b/app/javascript/mastodon/service_worker/entry.js
@@ -1,6 +1,10 @@
 import './web_push_notifications';
 
-function openCache() {
+function openSystemCache() {
+  return caches.open('mastodon-system');
+}
+
+function openWebCache() {
   return caches.open('mastodon-web');
 }
 
@@ -11,7 +15,7 @@ function fetchRoot() {
 // Cause a new version of a registered Service Worker to replace an existing one
 // that is already installed, and replace the currently active worker on open pages.
 self.addEventListener('install', function(event) {
-  event.waitUntil(Promise.all([openCache(), fetchRoot()]).then(([cache, root]) => cache.put('/', root)));
+  event.waitUntil(Promise.all([openWebCache(), fetchRoot()]).then(([cache, root]) => cache.put('/', root)));
 });
 self.addEventListener('activate', function(event) {
   event.waitUntil(self.clients.claim());
@@ -21,7 +25,7 @@ self.addEventListener('fetch', function(event) {
 
   if (url.pathname.startsWith('/web/')) {
     const asyncResponse = fetchRoot();
-    const asyncCache = openCache();
+    const asyncCache = openWebCache();
 
     event.respondWith(asyncResponse.then(async response => {
       if (response.ok) {
@@ -31,10 +35,10 @@ self.addEventListener('fetch', function(event) {
       }
 
       throw null;
-    }).catch(() => caches.match('/')));
+    }).catch(() => asyncCache.then(cache => cache.match('/'))));
   } else if (url.pathname === '/auth/sign_out') {
     const asyncResponse = fetch(event.request);
-    const asyncCache = openCache();
+    const asyncCache = openWebCache();
 
     event.respondWith(asyncResponse.then(async response => {
       if (response.ok || response.type === 'opaqueredirect') {
@@ -44,5 +48,21 @@ self.addEventListener('fetch', function(event) {
 
       return response;
     }));
+  } else if (process.env.CDN_HOST ? url.host === process.env.CDN_HOST : url.pathname.startsWith('/system/')) {
+    event.respondWith(openSystemCache().then(async cache => {
+      const cached = await cache.match(event.request.url);
+
+      if (cached === undefined) {
+        const fetched = await fetch(event.request);
+
+        if (fetched.ok) {
+          await cache.put(event.request.url, fetched.clone());
+        }
+
+        return fetched;
+      }
+
+      return cached;
+    }));
   }
 });
diff --git a/app/javascript/mastodon/db/async.js b/app/javascript/mastodon/storage/db.js
index e08fc3f3d..e08fc3f3d 100644
--- a/app/javascript/mastodon/db/async.js
+++ b/app/javascript/mastodon/storage/db.js
diff --git a/app/javascript/mastodon/storage/modifier.js b/app/javascript/mastodon/storage/modifier.js
new file mode 100644
index 000000000..63e49fe6e
--- /dev/null
+++ b/app/javascript/mastodon/storage/modifier.js
@@ -0,0 +1,151 @@
+import asyncDB from './db';
+import { autoPlayGif } from '../initial_state';
+
+const accountAssetKeys = ['avatar', 'avatar_static', 'header', 'header_static'];
+const avatarKey = autoPlayGif ? 'avatar' : 'avatar_static';
+const limit = 1024;
+const asyncCache = caches.open('mastodon-system');
+
+function put(name, objects, onupdate, oncreate) {
+  return asyncDB.then(db => new Promise((resolve, reject) => {
+    const putTransaction = db.transaction(name, 'readwrite');
+    const putStore = putTransaction.objectStore(name);
+    const putIndex = putStore.index('id');
+
+    objects.forEach(object => {
+      putIndex.getKey(object.id).onsuccess = retrieval => {
+        function addObject() {
+          putStore.add(object);
+        }
+
+        function deleteObject() {
+          putStore.delete(retrieval.target.result).onsuccess = addObject;
+        }
+
+        if (retrieval.target.result) {
+          if (onupdate) {
+            onupdate(object, retrieval.target.result, putStore, deleteObject);
+          } else {
+            deleteObject();
+          }
+        } else {
+          if (oncreate) {
+            oncreate(object, addObject);
+          } else {
+            addObject();
+          }
+        }
+      };
+    });
+
+    putTransaction.oncomplete = () => {
+      const readTransaction = db.transaction(name, 'readonly');
+      const readStore = readTransaction.objectStore(name);
+      const count = readStore.count();
+
+      count.onsuccess = () => {
+        const excess = count.result - limit;
+
+        if (excess > 0) {
+          const retrieval = readStore.getAll(null, excess);
+
+          retrieval.onsuccess = () => resolve(retrieval.result);
+          retrieval.onerror = reject;
+        } else {
+          resolve([]);
+        }
+      };
+
+      count.onerror = reject;
+    };
+
+    putTransaction.onerror = reject;
+  }));
+}
+
+function evictAccountsByRecords(records) {
+  asyncDB.then(db => {
+    const transaction = db.transaction(['accounts', 'statuses'], 'readwrite');
+    const accounts = transaction.objectStore('accounts');
+    const accountsIdIndex = accounts.index('id');
+    const accountsMovedIndex = accounts.index('moved');
+    const statuses = transaction.objectStore('statuses');
+    const statusesIndex = statuses.index('account');
+
+    function evict(toEvict) {
+      toEvict.forEach(record => {
+        asyncCache.then(cache => accountAssetKeys.forEach(key => cache.delete(records[key])));
+
+        accountsMovedIndex.getAll(record.id).onsuccess = ({ target }) => evict(target.result);
+
+        statusesIndex.getAll(record.id).onsuccess =
+          ({ target }) => evictStatusesByRecords(target.result);
+
+        accountsIdIndex.getKey(record.id).onsuccess =
+          ({ target }) => target.result && accounts.delete(target.result);
+      });
+    }
+
+    evict(records);
+  });
+}
+
+export function evictStatus(id) {
+  return evictStatuses([id]);
+}
+
+export function evictStatuses(ids) {
+  asyncDB.then(db => {
+    const store = db.transaction('statuses', 'readwrite').objectStore('statuses');
+    const idIndex = store.index('id');
+    const reblogIndex = store.index('reblog');
+
+    ids.forEach(id => {
+      reblogIndex.getAllKeys(id).onsuccess =
+        ({ target }) => target.result.forEach(reblogKey => store.delete(reblogKey));
+
+      idIndex.getKey(id).onsuccess =
+        ({ target }) => target.result && store.delete(target.result);
+    });
+  });
+}
+
+function evictStatusesByRecords(records) {
+  evictStatuses(records.map(({ id }) => id));
+}
+
+export function putAccounts(records) {
+  const newURLs = [];
+
+  put('accounts', records, (newRecord, oldKey, store, oncomplete) => {
+    store.get(oldKey).onsuccess = ({ target }) => {
+      accountAssetKeys.forEach(key => {
+        const newURL = newRecord[key];
+        const oldURL = target.result[key];
+
+        if (newURL !== oldURL) {
+          asyncCache.then(cache => cache.delete(oldURL));
+        }
+      });
+
+      const newURL = newRecord[avatarKey];
+      const oldURL = target.result[avatarKey];
+
+      if (newURL !== oldURL) {
+        newURLs.push(newURL);
+      }
+
+      oncomplete();
+    };
+  }, (newRecord, oncomplete) => {
+    newURLs.push(newRecord[avatarKey]);
+    oncomplete();
+  }).then(records => {
+    evictAccountsByRecords(records);
+    asyncCache.then(cache => cache.addAll(newURLs));
+  });
+}
+
+export function putStatuses(records) {
+  put('statuses', records).then(evictStatusesByRecords);
+}
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index 5c6189bae..042a84742 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -1435,14 +1435,19 @@
   position: relative;
   width: 100%;
   height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 
-  &.image-loader--loading {
-    display: flex;
-    align-content: center;
+  .image-loader__preview-canvas {
+    max-width: $media-modal-media-max-width;
+    max-height: $media-modal-media-max-height;
+    background: url('~images/void.png') repeat;
+    object-fit: contain;
+  }
 
-    .image-loader__preview-canvas {
-      filter: blur(2px);
-    }
+  &.image-loader--loading .image-loader__preview-canvas {
+    filter: blur(2px);
   }
 
   &.image-loader--amorphous .image-loader__preview-canvas {
@@ -1455,7 +1460,16 @@
   width: 100%;
   height: 100%;
   display: flex;
-  align-content: center;
+  align-items: center;
+  justify-content: center;
+
+  img {
+    max-width: $media-modal-media-max-width;
+    max-height: $media-modal-media-max-height;
+    width: auto;
+    height: auto;
+    object-fit: contain;
+  }
 }
 
 .navigation-bar {
@@ -3423,25 +3437,17 @@ a.status-card {
   height: 100%;
   position: relative;
 
-  img,
-  canvas,
-  video {
-    max-width: 100%;
-    /*
-    put margins on top and bottom of image to avoid the screen coverd by
-    image.
-     */
-    max-height: 80%;
-    width: auto;
-    height: auto;
-    margin: auto;
-  }
+  .extended-video-player {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 
-  img,
-  canvas {
-    display: block;
-    background: url('~images/void.png') repeat;
-    object-fit: contain;
+    video {
+      max-width: $media-modal-media-max-width;
+      max-height: $media-modal-media-max-height;
+    }
   }
 }
 
@@ -4418,8 +4424,8 @@ a.status-card {
   border-radius: 4px;
 
   video {
-    height: 100%;
-    width: 100%;
+    max-width: 100vw;
+    max-height: 80vh;
     z-index: 1;
   }
 
diff --git a/app/javascript/styles/mastodon/variables.scss b/app/javascript/styles/mastodon/variables.scss
index dcc2857ff..e456c27ee 100644
--- a/app/javascript/styles/mastodon/variables.scss
+++ b/app/javascript/styles/mastodon/variables.scss
@@ -30,3 +30,8 @@ $ui-highlight-color: $classic-highlight-color !default;        // Vibrant
 
 // Language codes that uses CJK fonts
 $cjk-langs: ja, ko, zh-CN, zh-HK, zh-TW;
+
+// Variables for components
+$media-modal-media-max-width: 100%;
+// put margins on top and bottom of image to avoid the screen covered by image.
+$media-modal-media-max-height: 80%;
generated by cgit-pink (git 2.37.1) at 2024-12-12 04:01:04 +0000