diff options
Diffstat (limited to 'app/javascript')
14 files changed, 166 insertions, 28 deletions
diff --git a/app/javascript/flavours/glitch/features/status/components/card.js b/app/javascript/flavours/glitch/features/status/components/card.js index 14abe9838..0ca2508e7 100644 --- a/app/javascript/flavours/glitch/features/status/components/card.js +++ b/app/javascript/flavours/glitch/features/status/components/card.js @@ -24,7 +24,7 @@ const trim = (text, len) => { return text; } - return text.substring(0, cut) + (text.length > len ? '…' : ''); + return text.slice(0, cut) + (text.length > len ? '…' : ''); }; const domParser = new DOMParser(); diff --git a/app/javascript/flavours/glitch/features/video/index.js b/app/javascript/flavours/glitch/features/video/index.js index 53e3dfda3..25c94bb2c 100644 --- a/app/javascript/flavours/glitch/features/video/index.js +++ b/app/javascript/flavours/glitch/features/video/index.js @@ -90,7 +90,7 @@ export const fileNameFromURL = str => { const pathname = url.pathname; const index = pathname.lastIndexOf('/'); - return pathname.substring(index + 1); + return pathname.slice(index + 1); }; export default @injectIntl diff --git a/app/javascript/flavours/glitch/reducers/timelines.js b/app/javascript/flavours/glitch/reducers/timelines.js index 7d815d850..29e02a864 100644 --- a/app/javascript/flavours/glitch/reducers/timelines.js +++ b/app/javascript/flavours/glitch/reducers/timelines.js @@ -16,7 +16,7 @@ import { ACCOUNT_MUTE_SUCCESS, ACCOUNT_UNFOLLOW_SUCCESS, } from 'flavours/glitch/actions/accounts'; -import { Map as ImmutableMap, List as ImmutableList, fromJS } from 'immutable'; +import { Map as ImmutableMap, List as ImmutableList, OrderedSet as ImmutableOrderedSet, fromJS } from 'immutable'; import compareId from 'flavours/glitch/util/compare_id'; const initialState = ImmutableMap(); @@ -32,6 +32,13 @@ const initialTimeline = ImmutableMap({ }); const expandNormalizedTimeline = (state, timeline, statuses, next, isPartial, isLoadingRecent, usePendingItems) => { + // This method is pretty tricky because: + // - existing items in the timeline might be out of order + // - the existing timeline may have gaps, most often explicitly noted with a `null` item + // - ideally, we don't want it to reorder existing items of the timeline + // - `statuses` may include items that are already included in the timeline + // - this function can be called either to fill in a gap, or load newer items + return state.update(timeline, initialTimeline, map => map.withMutations(mMap => { mMap.set('isLoading', false); mMap.set('isPartial', isPartial); @@ -45,15 +52,43 @@ const expandNormalizedTimeline = (state, timeline, statuses, next, isPartial, is mMap.update(usePendingItems ? 'pendingItems' : 'items', ImmutableList(), oldIds => { const newIds = statuses.map(status => status.get('id')); + + // Now this gets tricky, as we don't necessarily know for sure where the gap to fill is + // and some items in the timeline may not be properly ordered. + + // However, we know that `newIds.last()` is the oldest item that was requested and that + // there is no “hole” between `newIds.last()` and `newIds.first()`. + + // First, find the furthest (if properly sorted, oldest) item in the timeline that is + // newer than the oldest fetched one, as it's most likely that it delimits the gap. + // Start the gap *after* that item. const lastIndex = oldIds.findLastIndex(id => id !== null && compareId(id, newIds.last()) >= 0) + 1; - const firstIndex = oldIds.take(lastIndex).findLastIndex(id => id !== null && compareId(id, newIds.first()) > 0); - if (firstIndex < 0) { - return (isPartial ? newIds.unshift(null) : newIds).concat(oldIds.skip(lastIndex)); + // Then, try to find the furthest (if properly sorted, oldest) item in the timeline that + // is newer than the most recent fetched one, as it delimits a section comprised of only + // items older or within `newIds` (or that were deleted from the server, so should be removed + // anyway). + // Stop the gap *after* that item. + const firstIndex = oldIds.take(lastIndex).findLastIndex(id => id !== null && compareId(id, newIds.first()) > 0) + 1; + + let insertedIds = ImmutableOrderedSet(newIds).withMutations(insertedIds => { + // It is possible, though unlikely, that the slice we are replacing contains items older + // than the elements we got from the API. Get them and add them back at the back of the + // slice. + const olderIds = oldIds.slice(firstIndex, lastIndex).filter(id => id !== null && compareId(id, newIds.last()) < 0); + insertedIds.union(olderIds); + + // Make sure we aren't inserting duplicates + insertedIds.subtract(oldIds.take(firstIndex), oldIds.skip(lastIndex)); + }).toList(); + + // Finally, insert a gap marker if the data is marked as partial by the server + if (isPartial && (firstIndex === 0 || oldIds.get(firstIndex - 1) !== null)) { + insertedIds = insertedIds.unshift(null); } - return oldIds.take(firstIndex + 1).concat( - isPartial && oldIds.get(firstIndex) !== null ? newIds.unshift(null) : newIds, + return oldIds.take(firstIndex).concat( + insertedIds, oldIds.skip(lastIndex), ); }); diff --git a/app/javascript/flavours/glitch/styles/components/composer.scss b/app/javascript/flavours/glitch/styles/components/composer.scss index 96ea096e1..3137b2dea 100644 --- a/app/javascript/flavours/glitch/styles/components/composer.scss +++ b/app/javascript/flavours/glitch/styles/components/composer.scss @@ -206,7 +206,12 @@ sub { font-size: smaller; - text-align: sub; + vertical-align: sub; + } + + sup { + font-size: smaller; + vertical-align: super; } ul, ol { diff --git a/app/javascript/flavours/glitch/styles/components/status.scss b/app/javascript/flavours/glitch/styles/components/status.scss index d39069410..d7c8f2716 100644 --- a/app/javascript/flavours/glitch/styles/components/status.scss +++ b/app/javascript/flavours/glitch/styles/components/status.scss @@ -125,7 +125,7 @@ sub { font-size: smaller; - text-align: sub; + vertical-align: sub; } sup { diff --git a/app/javascript/flavours/glitch/util/emoji/emoji_mart_search_light.js b/app/javascript/flavours/glitch/util/emoji/emoji_mart_search_light.js index e4519a13e..70694ab6d 100644 --- a/app/javascript/flavours/glitch/util/emoji/emoji_mart_search_light.js +++ b/app/javascript/flavours/glitch/util/emoji/emoji_mart_search_light.js @@ -124,7 +124,7 @@ function search(value, { emojisToShowFilter, maxResults, include, exclude, custo for (let id in aPool) { let emoji = aPool[id], { search } = emoji, - sub = value.substr(0, length), + sub = value.slice(0, length), subIndex = search.indexOf(sub); if (subIndex !== -1) { diff --git a/app/javascript/mastodon/actions/trends.js b/app/javascript/mastodon/actions/trends.js index 304bbebef..edda0b5b5 100644 --- a/app/javascript/mastodon/actions/trends.js +++ b/app/javascript/mastodon/actions/trends.js @@ -1,4 +1,4 @@ -import api from '../api'; +import api, { getLinks } from '../api'; import { importFetchedStatuses } from './importer'; export const TRENDS_TAGS_FETCH_REQUEST = 'TRENDS_TAGS_FETCH_REQUEST'; @@ -13,6 +13,10 @@ export const TRENDS_STATUSES_FETCH_REQUEST = 'TRENDS_STATUSES_FETCH_REQUEST'; export const TRENDS_STATUSES_FETCH_SUCCESS = 'TRENDS_STATUSES_FETCH_SUCCESS'; export const TRENDS_STATUSES_FETCH_FAIL = 'TRENDS_STATUSES_FETCH_FAIL'; +export const TRENDS_STATUSES_EXPAND_REQUEST = 'TRENDS_STATUSES_EXPAND_REQUEST'; +export const TRENDS_STATUSES_EXPAND_SUCCESS = 'TRENDS_STATUSES_EXPAND_SUCCESS'; +export const TRENDS_STATUSES_EXPAND_FAIL = 'TRENDS_STATUSES_EXPAND_FAIL'; + export const fetchTrendingHashtags = () => (dispatch, getState) => { dispatch(fetchTrendingHashtagsRequest()); @@ -68,11 +72,16 @@ export const fetchTrendingLinksFail = error => ({ }); export const fetchTrendingStatuses = () => (dispatch, getState) => { + if (getState().getIn(['status_lists', 'trending', 'isLoading'])) { + return; + } + dispatch(fetchTrendingStatusesRequest()); - api(getState).get('/api/v1/trends/statuses').then(({ data }) => { - dispatch(importFetchedStatuses(data)); - dispatch(fetchTrendingStatusesSuccess(data)); + api(getState).get('/api/v1/trends/statuses').then(response => { + const next = getLinks(response).refs.find(link => link.rel === 'next'); + dispatch(importFetchedStatuses(response.data)); + dispatch(fetchTrendingStatusesSuccess(response.data, next ? next.uri : null)); }).catch(err => dispatch(fetchTrendingStatusesFail(err))); }; @@ -81,9 +90,10 @@ export const fetchTrendingStatusesRequest = () => ({ skipLoading: true, }); -export const fetchTrendingStatusesSuccess = statuses => ({ +export const fetchTrendingStatusesSuccess = (statuses, next) => ({ type: TRENDS_STATUSES_FETCH_SUCCESS, statuses, + next, skipLoading: true, }); @@ -93,3 +103,37 @@ export const fetchTrendingStatusesFail = error => ({ skipLoading: true, skipAlert: true, }); + + +export const expandTrendingStatuses = () => (dispatch, getState) => { + const url = getState().getIn(['status_lists', 'trending', 'next'], null); + + if (url === null || getState().getIn(['status_lists', 'trending', 'isLoading'])) { + return; + } + + dispatch(expandTrendingStatusesRequest()); + + api(getState).get(url).then(response => { + const next = getLinks(response).refs.find(link => link.rel === 'next'); + dispatch(importFetchedStatuses(response.data)); + dispatch(expandTrendingStatusesSuccess(response.data, next ? next.uri : null)); + }).catch(error => { + dispatch(expandTrendingStatusesFail(error)); + }); +}; + +export const expandTrendingStatusesRequest = () => ({ + type: TRENDS_STATUSES_EXPAND_REQUEST, +}); + +export const expandTrendingStatusesSuccess = (statuses, next) => ({ + type: TRENDS_STATUSES_EXPAND_SUCCESS, + statuses, + next, +}); + +export const expandTrendingStatusesFail = error => ({ + type: TRENDS_STATUSES_EXPAND_FAIL, + error, +}); diff --git a/app/javascript/mastodon/features/emoji/emoji_mart_search_light.js b/app/javascript/mastodon/features/emoji/emoji_mart_search_light.js index e4519a13e..70694ab6d 100644 --- a/app/javascript/mastodon/features/emoji/emoji_mart_search_light.js +++ b/app/javascript/mastodon/features/emoji/emoji_mart_search_light.js @@ -124,7 +124,7 @@ function search(value, { emojisToShowFilter, maxResults, include, exclude, custo for (let id in aPool) { let emoji = aPool[id], { search } = emoji, - sub = value.substr(0, length), + sub = value.slice(0, length), subIndex = search.indexOf(sub); if (subIndex !== -1) { diff --git a/app/javascript/mastodon/features/explore/statuses.js b/app/javascript/mastodon/features/explore/statuses.js index 4e5530d84..33e5b4179 100644 --- a/app/javascript/mastodon/features/explore/statuses.js +++ b/app/javascript/mastodon/features/explore/statuses.js @@ -4,11 +4,13 @@ import ImmutablePropTypes from 'react-immutable-proptypes'; import StatusList from 'mastodon/components/status_list'; import { FormattedMessage } from 'react-intl'; import { connect } from 'react-redux'; -import { fetchTrendingStatuses } from 'mastodon/actions/trends'; +import { fetchTrendingStatuses, expandTrendingStatuses } from 'mastodon/actions/trends'; +import { debounce } from 'lodash'; const mapStateToProps = state => ({ statusIds: state.getIn(['status_lists', 'trending', 'items']), isLoading: state.getIn(['status_lists', 'trending', 'isLoading'], true), + hasMore: !!state.getIn(['status_lists', 'trending', 'next']), }); export default @connect(mapStateToProps) @@ -17,6 +19,7 @@ class Statuses extends React.PureComponent { static propTypes = { statusIds: ImmutablePropTypes.list, isLoading: PropTypes.bool, + hasMore: PropTypes.bool, multiColumn: PropTypes.bool, dispatch: PropTypes.func.isRequired, }; @@ -26,8 +29,13 @@ class Statuses extends React.PureComponent { dispatch(fetchTrendingStatuses()); } + handleLoadMore = debounce(() => { + const { dispatch } = this.props; + dispatch(expandTrendingStatuses()); + }, 300, { leading: true }) + render () { - const { isLoading, statusIds, multiColumn } = this.props; + const { isLoading, hasMore, statusIds, multiColumn } = this.props; const emptyMessage = <FormattedMessage id='empty_column.explore_statuses' defaultMessage='Nothing is trending right now. Check back later!' />; @@ -36,8 +44,9 @@ class Statuses extends React.PureComponent { trackScroll statusIds={statusIds} scrollKey='explore-statuses' - hasMore={false} + hasMore={hasMore} isLoading={isLoading} + onLoadMore={this.handleLoadMore} emptyMessage={emptyMessage} bindToDocument={!multiColumn} withCounters diff --git a/app/javascript/mastodon/features/status/components/card.js b/app/javascript/mastodon/features/status/components/card.js index 90f9ae7ae..3d81bcb29 100644 --- a/app/javascript/mastodon/features/status/components/card.js +++ b/app/javascript/mastodon/features/status/components/card.js @@ -32,7 +32,7 @@ const trim = (text, len) => { return text; } - return text.substring(0, cut) + (text.length > len ? '…' : ''); + return text.slice(0, cut) + (text.length > len ? '…' : ''); }; const domParser = new DOMParser(); diff --git a/app/javascript/mastodon/features/video/index.js b/app/javascript/mastodon/features/video/index.js index 8d47e479a..4f90e955f 100644 --- a/app/javascript/mastodon/features/video/index.js +++ b/app/javascript/mastodon/features/video/index.js @@ -91,7 +91,7 @@ export const fileNameFromURL = str => { const pathname = url.pathname; const index = pathname.lastIndexOf('/'); - return pathname.substring(index + 1); + return pathname.slice(index + 1); }; export default @injectIntl diff --git a/app/javascript/mastodon/reducers/status_lists.js b/app/javascript/mastodon/reducers/status_lists.js index 49bc94a40..a7c56cc19 100644 --- a/app/javascript/mastodon/reducers/status_lists.js +++ b/app/javascript/mastodon/reducers/status_lists.js @@ -21,6 +21,9 @@ import { TRENDS_STATUSES_FETCH_REQUEST, TRENDS_STATUSES_FETCH_SUCCESS, TRENDS_STATUSES_FETCH_FAIL, + TRENDS_STATUSES_EXPAND_REQUEST, + TRENDS_STATUSES_EXPAND_SUCCESS, + TRENDS_STATUSES_EXPAND_FAIL, } from '../actions/trends'; import { Map as ImmutableMap, List as ImmutableList } from 'immutable'; import { @@ -111,11 +114,15 @@ export default function statusLists(state = initialState, action) { case BOOKMARKED_STATUSES_EXPAND_SUCCESS: return appendToList(state, 'bookmarks', action.statuses, action.next); case TRENDS_STATUSES_FETCH_REQUEST: + case TRENDS_STATUSES_EXPAND_REQUEST: return state.setIn(['trending', 'isLoading'], true); case TRENDS_STATUSES_FETCH_FAIL: + case TRENDS_STATUSES_EXPAND_FAIL: return state.setIn(['trending', 'isLoading'], false); case TRENDS_STATUSES_FETCH_SUCCESS: return normalizeList(state, 'trending', action.statuses, action.next); + case TRENDS_STATUSES_EXPAND_SUCCESS: + return appendToList(state, 'trending', action.statuses, action.next); case FAVOURITE_SUCCESS: return prependOneToList(state, 'favourites', action.status); case UNFAVOURITE_SUCCESS: diff --git a/app/javascript/mastodon/reducers/timelines.js b/app/javascript/mastodon/reducers/timelines.js index b66c19fd5..53a644e47 100644 --- a/app/javascript/mastodon/reducers/timelines.js +++ b/app/javascript/mastodon/reducers/timelines.js @@ -16,7 +16,7 @@ import { ACCOUNT_MUTE_SUCCESS, ACCOUNT_UNFOLLOW_SUCCESS, } from '../actions/accounts'; -import { Map as ImmutableMap, List as ImmutableList, fromJS } from 'immutable'; +import { Map as ImmutableMap, List as ImmutableList, OrderedSet as ImmutableOrderedSet, fromJS } from 'immutable'; import compareId from '../compare_id'; const initialState = ImmutableMap(); @@ -32,6 +32,13 @@ const initialTimeline = ImmutableMap({ }); const expandNormalizedTimeline = (state, timeline, statuses, next, isPartial, isLoadingRecent, usePendingItems) => { + // This method is pretty tricky because: + // - existing items in the timeline might be out of order + // - the existing timeline may have gaps, most often explicitly noted with a `null` item + // - ideally, we don't want it to reorder existing items of the timeline + // - `statuses` may include items that are already included in the timeline + // - this function can be called either to fill in a gap, or load newer items + return state.update(timeline, initialTimeline, map => map.withMutations(mMap => { mMap.set('isLoading', false); mMap.set('isPartial', isPartial); @@ -46,15 +53,42 @@ const expandNormalizedTimeline = (state, timeline, statuses, next, isPartial, is mMap.update(usePendingItems ? 'pendingItems' : 'items', ImmutableList(), oldIds => { const newIds = statuses.map(status => status.get('id')); + // Now this gets tricky, as we don't necessarily know for sure where the gap to fill is + // and some items in the timeline may not be properly ordered. + + // However, we know that `newIds.last()` is the oldest item that was requested and that + // there is no “hole” between `newIds.last()` and `newIds.first()`. + + // First, find the furthest (if properly sorted, oldest) item in the timeline that is + // newer than the oldest fetched one, as it's most likely that it delimits the gap. + // Start the gap *after* that item. const lastIndex = oldIds.findLastIndex(id => id !== null && compareId(id, newIds.last()) >= 0) + 1; - const firstIndex = oldIds.take(lastIndex).findLastIndex(id => id !== null && compareId(id, newIds.first()) > 0); - if (firstIndex < 0) { - return (isPartial ? newIds.unshift(null) : newIds).concat(oldIds.skip(lastIndex)); + // Then, try to find the furthest (if properly sorted, oldest) item in the timeline that + // is newer than the most recent fetched one, as it delimits a section comprised of only + // items older or within `newIds` (or that were deleted from the server, so should be removed + // anyway). + // Stop the gap *after* that item. + const firstIndex = oldIds.take(lastIndex).findLastIndex(id => id !== null && compareId(id, newIds.first()) > 0) + 1; + + let insertedIds = ImmutableOrderedSet(newIds).withMutations(insertedIds => { + // It is possible, though unlikely, that the slice we are replacing contains items older + // than the elements we got from the API. Get them and add them back at the back of the + // slice. + const olderIds = oldIds.slice(firstIndex, lastIndex).filter(id => id !== null && compareId(id, newIds.last()) < 0); + insertedIds.union(olderIds); + + // Make sure we aren't inserting duplicates + insertedIds.subtract(oldIds.take(firstIndex), oldIds.skip(lastIndex)); + }).toList(); + + // Finally, insert a gap marker if the data is marked as partial by the server + if (isPartial && (firstIndex === 0 || oldIds.get(firstIndex - 1) !== null)) { + insertedIds = insertedIds.unshift(null); } - return oldIds.take(firstIndex + 1).concat( - isPartial && oldIds.get(firstIndex) !== null ? newIds.unshift(null) : newIds, + return oldIds.take(firstIndex).concat( + insertedIds, oldIds.skip(lastIndex), ); }); diff --git a/app/javascript/styles/mailer.scss b/app/javascript/styles/mailer.scss index 34852178e..18fe522eb 100644 --- a/app/javascript/styles/mailer.scss +++ b/app/javascript/styles/mailer.scss @@ -435,6 +435,10 @@ h5 { background: $success-green; } + &.warning-icon td { + background: $gold-star; + } + &.alert-icon td { background: $error-red; } |