diff options
Diffstat (limited to 'app/javascript/flavours/glitch')
5 files changed, 58 insertions, 13 deletions
diff --git a/app/javascript/flavours/glitch/actions/streaming.js b/app/javascript/flavours/glitch/actions/streaming.js index 223924534..90d6a0231 100644 --- a/app/javascript/flavours/glitch/actions/streaming.js +++ b/app/javascript/flavours/glitch/actions/streaming.js @@ -7,6 +7,10 @@ import { expandHomeTimeline, connectTimeline, disconnectTimeline, + fillHomeTimelineGaps, + fillPublicTimelineGaps, + fillCommunityTimelineGaps, + fillListTimelineGaps, } from './timelines'; import { updateNotifications, expandNotifications } from './notifications'; import { updateConversations } from './conversations'; @@ -35,6 +39,7 @@ const randomUpTo = max => * @param {Object.<string, string>} params * @param {Object} options * @param {function(Function, Function): void} [options.fallback] + * @param {function(): void} [options.fillGaps] * @param {function(object): boolean} [options.accept] * @return {function(): void} */ @@ -61,6 +66,10 @@ export const connectTimelineStream = (timelineId, channelName, params = {}, opti clearTimeout(pollingId); pollingId = null; } + + if (options.fillGaps) { + dispatch(options.fillGaps()); + } }, onDisconnect() { @@ -119,7 +128,7 @@ const refreshHomeTimelineAndNotification = (dispatch, done) => { * @return {function(): void} */ export const connectUserStream = () => - connectTimelineStream('home', 'user', {}, { fallback: refreshHomeTimelineAndNotification }); + connectTimelineStream('home', 'user', {}, { fallback: refreshHomeTimelineAndNotification, fillGaps: fillHomeTimelineGaps }); /** * @param {Object} options @@ -127,7 +136,7 @@ export const connectUserStream = () => * @return {function(): void} */ export const connectCommunityStream = ({ onlyMedia } = {}) => - connectTimelineStream(`community${onlyMedia ? ':media' : ''}`, `public:local${onlyMedia ? ':media' : ''}`); + connectTimelineStream(`community${onlyMedia ? ':media' : ''}`, `public:local${onlyMedia ? ':media' : ''}`, {}, { fillGaps: () => (fillCommunityTimelineGaps({ onlyMedia })) }); /** * @param {Object} options @@ -137,7 +146,7 @@ export const connectCommunityStream = ({ onlyMedia } = {}) => * @return {function(): void} */ export const connectPublicStream = ({ onlyMedia, onlyRemote, allowLocalOnly } = {}) => - connectTimelineStream(`public${onlyRemote ? ':remote' : (allowLocalOnly ? ':allow_local_only' : '')}${onlyMedia ? ':media' : ''}`, `public${onlyRemote ? ':remote' : (allowLocalOnly ? ':allow_local_only' : '')}${onlyMedia ? ':media' : ''}`); + connectTimelineStream(`public${onlyRemote ? ':remote' : (allowLocalOnly ? ':allow_local_only' : '')}${onlyMedia ? ':media' : ''}`, `public${onlyRemote ? ':remote' : (allowLocalOnly ? ':allow_local_only' : '')}${onlyMedia ? ':media' : ''}`, {}, { fillGaps: () => fillPublicTimelineGaps({ onlyMedia, onlyRemote, allowLocalOnly }) }); /** * @param {string} columnId @@ -160,4 +169,4 @@ export const connectDirectStream = () => * @return {function(): void} */ export const connectListStream = listId => - connectTimelineStream(`list:${listId}`, 'list', { list: listId }); + connectTimelineStream(`list:${listId}`, 'list', { list: listId }, { fillGaps: () => fillListTimelineGaps(listId) }); diff --git a/app/javascript/flavours/glitch/actions/timelines.js b/app/javascript/flavours/glitch/actions/timelines.js index 24cc0d63f..0b36d8ac3 100644 --- a/app/javascript/flavours/glitch/actions/timelines.js +++ b/app/javascript/flavours/glitch/actions/timelines.js @@ -138,6 +138,22 @@ export function expandTimeline(timelineId, path, params = {}, done = noOp) { }; }; +export function fillTimelineGaps(timelineId, path, params = {}, done = noOp) { + return (dispatch, getState) => { + const timeline = getState().getIn(['timelines', timelineId], ImmutableMap()); + const items = timeline.get('items'); + const nullIndexes = items.map((statusId, index) => statusId === null ? index : null); + const gaps = nullIndexes.map(index => index > 0 ? items.get(index - 1) : null); + + // Only expand at most two gaps to avoid doing too many requests + done = gaps.take(2).reduce((done, maxId) => { + return (() => dispatch(expandTimeline(timelineId, path, { ...params, maxId }, done))); + }, done); + + done(); + }; +} + export const expandHomeTimeline = ({ maxId } = {}, done = noOp) => expandTimeline('home', '/api/v1/timelines/home', { max_id: maxId }, done); export const expandPublicTimeline = ({ maxId, onlyMedia, onlyRemote, allowLocalOnly } = {}, done = noOp) => expandTimeline(`public${onlyRemote ? ':remote' : (allowLocalOnly ? ':allow_local_only' : '')}${onlyMedia ? ':media' : ''}`, '/api/v1/timelines/public', { remote: !!onlyRemote, allow_local_only: !!allowLocalOnly, max_id: maxId, only_media: !!onlyMedia }, done); export const expandCommunityTimeline = ({ maxId, onlyMedia } = {}, done = noOp) => expandTimeline(`community${onlyMedia ? ':media' : ''}`, '/api/v1/timelines/public', { local: true, max_id: maxId, only_media: !!onlyMedia }, done); @@ -156,6 +172,11 @@ export const expandHashtagTimeline = (hashtag, { maxId, tags, local } = }, done); }; +export const fillHomeTimelineGaps = (done = noOp) => fillTimelineGaps('home', '/api/v1/timelines/home', {}, done); +export const fillPublicTimelineGaps = ({ onlyMedia, onlyRemote, allowLocalOnly } = {}, done = noOp) => fillTimelineGaps(`public${onlyRemote ? ':remote' : (allowLocalOnly ? ':allow_local_only' : '')}${onlyMedia ? ':media' : ''}`, '/api/v1/timelines/public', { remote: !!onlyRemote, only_media: !!onlyMedia, allow_local_only: !!allowLocalOnly }, done); +export const fillCommunityTimelineGaps = ({ onlyMedia } = {}, done = noOp) => fillTimelineGaps(`community${onlyMedia ? ':media' : ''}`, '/api/v1/timelines/public', { local: true, only_media: !!onlyMedia }, done); +export const fillListTimelineGaps = (id, done = noOp) => fillTimelineGaps(`list:${id}`, `/api/v1/timelines/list/${id}`, {}, done); + export function expandTimelineRequest(timeline, isLoadingMore) { return { type: TIMELINE_EXPAND_REQUEST, @@ -199,6 +220,7 @@ export function connectTimeline(timeline) { return { type: TIMELINE_CONNECT, timeline, + usePendingItems: preferPendingItems, }; }; diff --git a/app/javascript/flavours/glitch/components/status.js b/app/javascript/flavours/glitch/components/status.js index 02ff9ab28..21f0e3a6f 100644 --- a/app/javascript/flavours/glitch/components/status.js +++ b/app/javascript/flavours/glitch/components/status.js @@ -581,10 +581,7 @@ class Status extends ImmutablePureComponent { // backgrounds for collapsed statuses are enabled. attachments = status.get('media_attachments'); - if (status.get('poll')) { - media.push(<PollContainer pollId={status.get('poll')} />); - mediaIcons.push('tasks'); - } + if (usingPiP) { media.push(<PictureInPicturePlaceholder width={this.props.cachedMediaWidth} />); mediaIcons.push('video-camera'); @@ -684,6 +681,11 @@ class Status extends ImmutablePureComponent { mediaIcons.push('link'); } + if (status.get('poll')) { + media.push(<PollContainer pollId={status.get('poll')} />); + mediaIcons.push('tasks'); + } + // Here we prepare extra data-* attributes for CSS selectors. // Users can use those for theming, hiding avatars etc via UserStyle const selectorAttribs = { diff --git a/app/javascript/flavours/glitch/features/status/components/detailed_status.js b/app/javascript/flavours/glitch/features/status/components/detailed_status.js index 528d2eb73..f4e6c24c5 100644 --- a/app/javascript/flavours/glitch/features/status/components/detailed_status.js +++ b/app/javascript/flavours/glitch/features/status/components/detailed_status.js @@ -134,10 +134,6 @@ class DetailedStatus extends ImmutablePureComponent { outerStyle.height = `${this.state.height}px`; } - if (status.get('poll')) { - media.push(<PollContainer pollId={status.get('poll')} />); - mediaIcons.push('tasks'); - } if (usingPiP) { media.push(<PictureInPicturePlaceholder />); mediaIcons.push('video-camera'); @@ -202,6 +198,11 @@ class DetailedStatus extends ImmutablePureComponent { mediaIcons.push('link'); } + if (status.get('poll')) { + media.push(<PollContainer pollId={status.get('poll')} />); + mediaIcons.push('tasks'); + } + if (status.get('application')) { applicationLink = <React.Fragment> · <a className='detailed-status__application' href={status.getIn(['application', 'website'])} target='_blank' rel='noopener noreferrer'>{status.getIn(['application', 'name'])}</a></React.Fragment>; } diff --git a/app/javascript/flavours/glitch/reducers/timelines.js b/app/javascript/flavours/glitch/reducers/timelines.js index 29e02a864..afd9d12cb 100644 --- a/app/javascript/flavours/glitch/reducers/timelines.js +++ b/app/javascript/flavours/glitch/reducers/timelines.js @@ -177,6 +177,17 @@ const updateTop = (state, timeline, top) => { })); }; +const reconnectTimeline = (state, usePendingItems) => { + if (state.get('online')) { + return state; + } + + return state.withMutations(mMap => { + mMap.update(usePendingItems ? 'pendingItems' : 'items', items => items.first() ? items.unshift(null) : items); + mMap.set('online', true); + }); +}; + export default function timelines(state = initialState, action) { switch(action.type) { case TIMELINE_LOAD_PENDING: @@ -202,7 +213,7 @@ export default function timelines(state = initialState, action) { case TIMELINE_SCROLL_TOP: return updateTop(state, action.timeline, action.top); case TIMELINE_CONNECT: - return state.update(action.timeline, initialTimeline, map => map.set('online', true)); + return state.update(action.timeline, initialTimeline, map => reconnectTimeline(map, action.usePendingItems)); case TIMELINE_DISCONNECT: return state.update( action.timeline, |