[feature] Query media description limit (#62)

fixes #61

Reviewed-on: https://codeberg.org/superseriousbusiness/masto-fe-standalone/pulls/62
Co-authored-by: Sqx. Flann <fl4nn+codeberg@opensuse.org>
Co-committed-by: Sqx. Flann <fl4nn+codeberg@opensuse.org>

app/javascript/flavours/glitch/actions/server.js

@@ -21,11 +21,18 @@ export const fetchServer = () => (dispatch, getState) => {
 
   dispatch(fetchServerRequest());
 
-  api(getState)
+  try {
-    .get('/api/v2/instance').then(({ data }) => {
+    api(getState)
+      .get('/api/v2/instance').then({ data })
       if (data.contact.account) dispatch(importFetchedAccount(data.contact.account));
       dispatch(fetchServerSuccess(data));
+  } catch (e) {
+    api(getState)
+      .get('/api/v1/instance').then(({ data }) => {
+        if (data.contact.account) dispatch(importFetchedAccount(data.contact.account));
+        dispatch(fetchServerSuccess(data));
     }).catch(err => dispatch(fetchServerFail(err)));
+  }
 };
 
 const fetchServerRequest = () => ({

app/javascript/flavours/glitch/features/ui/components/focal_point_modal.jsx

@@ -26,6 +26,7 @@ import { Tesseract as fetchTesseract } from 'flavours/glitch/features/ui/util/as
 import Video, { getPointerPosition } from 'flavours/glitch/features/video';
 import { me } from 'flavours/glitch/initial_state';
 import { assetHost } from 'flavours/glitch/utils/config';
+import { maxMediaDescChars } from 'flavours/glitch/initial_state';
 
 import { changeUploadCompose, uploadThumbnail, onChangeMediaDescription, onChangeMediaFocus } from '../../../actions/compose';
 
@@ -367,10 +368,10 @@ class FocalPointModal extends ImmutablePureComponent {
 
             <div className='setting-text__toolbar'>
               <button disabled={detecting || media.get('type') !== 'image' || is_changing_upload} className='link-button' onClick={this.handleTextDetection}><FormattedMessage id='upload_modal.detect_text' defaultMessage='Detect text from picture' /></button>
-              <CharacterCounter max={1500} text={detecting ? '' : description} />
+              <CharacterCounter max={maxMediaDescChars} text={detecting ? '' : description} />
             </div>
 
-            <Button disabled={!dirty || detecting || isUploadingThumbnail || length(description) > 1500 || is_changing_upload} text={intl.formatMessage(is_changing_upload ? messages.applying : messages.apply)} onClick={this.handleSubmit} />
+            <Button disabled={!dirty || detecting || isUploadingThumbnail || length(description) > maxMediaDescChars || is_changing_upload} text={intl.formatMessage(is_changing_upload ? messages.applying : messages.apply)} onClick={this.handleSubmit} />
           </div>
 
           <div className='focal-point-modal__content'>

app/javascript/flavours/glitch/initial_state.js

@@ -104,6 +104,7 @@ export const hasMultiColumnPath = initialPath === '/'
  * @property {object} local_settings
  * @property {number} max_toot_chars
  * @property {number} max_media_attachments
+ * @property {number} max_media_desc_chars
  * @property {number} poll_limits
  */
 
@@ -167,6 +168,7 @@ export const sso_redirect = getMeta('sso_redirect');
 // Glitch-soc-specific settings
 export const maxChars = (initialState && initialState.max_toot_chars) || 500;
 export const maxMediaAttachments = (initialState && initialState.max_media_attachments) || 4;
+export const maxMediaDescChars = (initialState && initialState.max_media_desc_chars) || 1500;
 export const favouriteModal = getMeta('favourite_modal');
 export const pollLimits = (initialState && initialState.poll_limits);
 export const defaultContentType = getMeta('default_content_type');

app/javascript/mastodon/actions/server.js

@@ -17,11 +17,18 @@ export const fetchServer = () => (dispatch, getState) => {
 
   dispatch(fetchServerRequest());
 
-  api(getState)
+  try {
-    .get('/api/v2/instance').then(({ data }) => {
+    api(getState)
+      .get('/api/v2/instance').then({ data });
       if (data.contact.account) dispatch(importFetchedAccount(data.contact.account));
       dispatch(fetchServerSuccess(data));
+  } catch (e) {
+    api(getState)
+      .get('/api/v1/instance').then(({ data }) => {
+        if (data.contact.account) dispatch(importFetchedAccount(data.contact.account));
+        dispatch(fetchServerSuccess(data));
     }).catch(err => dispatch(fetchServerFail(err)));
+  }
 };
 
 const fetchServerRequest = () => ({

app/javascript/mastodon/features/ui/components/focal_point_modal.jsx

@@ -25,6 +25,7 @@ import UploadProgress from 'mastodon/features/compose/components/upload_progress
 import { Tesseract as fetchTesseract } from 'mastodon/features/ui/util/async-components';
 import { me } from 'mastodon/initial_state';
 import { assetHost } from 'mastodon/utils/config';
+import { maxMediaDescChars } from 'mastodon/initial_state';
 
 import { changeUploadCompose, uploadThumbnail, onChangeMediaDescription, onChangeMediaFocus } from '../../../actions/compose';
 import Video, { getPointerPosition } from '../../video';
@@ -374,12 +375,12 @@ class FocalPointModal extends ImmutablePureComponent {
               >
                 <FormattedMessage id='upload_modal.detect_text' defaultMessage='Detect text from picture' />
               </button>
-              <CharacterCounter max={1500} text={detecting ? '' : description} />
+              <CharacterCounter max={maxMediaDescChars} text={detecting ? '' : description} />
             </div>
 
             <Button
               type='submit'
-              disabled={!dirty || detecting || isUploadingThumbnail || length(description) > 1500 || is_changing_upload}
+              disabled={!dirty || detecting || isUploadingThumbnail || length(description) > maxMediaDescChars || is_changing_upload}
               text={intl.formatMessage(is_changing_upload ? messages.applying : messages.apply)}
             />
           </form>

app/javascript/mastodon/initial_state.js

@@ -90,6 +90,7 @@
  * @property {boolean=} critical_updates_pending
  * @property {InitialStateMeta} meta
  * @property {number} max_toot_chars
+ * @property {number} max_media_desc_chars
  */
 
 const element = document.getElementById('initial-state');
@@ -149,5 +150,6 @@ export const sso_redirect = getMeta('sso_redirect');
 
 // Glitch-soc-specific settings
 export const maxChars = (initialState && initialState.max_toot_chars) || 500;
+export const maxMediaDescChars = (initialState && initialState.max_media_desc_chars) || 1500;
 
 export default initialState;

public/verify-state.js

@@ -23,7 +23,15 @@ async function loadState() {
   }
 
   const apiUrl = `${protocol}${domain}/api`;
-  const instance = await fetch(`${apiUrl}/v1/instance`).then(async p => await p.json());
+  let instance
+  try {
+    instance = await fetch(`${apiUrl}/v2/instance`).then(async p => await p.json());
+    if (!instance.configuration) {
+      throw new Error('Instance API v2 unavaialble');
+    }
+  } catch (e) {
+    instance = await fetch(`${apiUrl}/v1/instance`).then(async p => await p.json());
+  }
   const options = {headers: {Authorization: `Bearer ${access_token}`}};
   const credentials = await fetch(`${apiUrl}/v1/accounts/verify_credentials`, options).then(async p => await p.json());
   const state = {
@@ -93,6 +101,7 @@ async function loadState() {
     },
     "max_toot_chars": instance.configuration.statuses.max_characters,
     "max_media_attachments": instance.configuration.statuses.max_media_attachments,
+    "max_media_desc_chars": instance.configuration.media_attachments.description_limit,
     "poll_limits": {
       "max_expiration": instance.configuration.polls.max_expiration,
       "max_option_chars": instance.configuration.polls.max_characters_per_option,