lbry-desktop/ui/page/file/index.js
saltrafael b75a4014b6
Re-design comment threads (#1489)
* Redesign threadline and fetching state

- threadline goes right below channel avatar, mimicking reddits implementation, has a increase effect on hover and is slimmer, creating more space for comments on screen
- fetching state now replaces show/hide button, also mimicking reddit, and now says that it is loading, instead of a blank spinner, and also improves space a bit

* Redesign comment threads

- Allow for infinite comment chains
- Can go back and forth between the pages
- Can go back to all comments or to the first comment in the chain
- Some other improvements, which include:
- add title on non-drawer comment sections (couldn't see amount of comments)
- fix Expandable component (would begin expanded and collapse after the effect runs, which looked bad and shifted the layout, now each comments greater than the set length begins collapsed)
- used constants for consistency

* Fix replying to last thread comment

* Fix buttons condition (only on fetched comment to avoid deleted case)

* Fix auto-scroll

* Bring back instant feedback for Show More replies

* Improve thread back links

- Now going back to all comments links the top-level comment for easier navigation
- Going back to ~ previous ~ now goes back into the chain instead of topmost level

* Clear timeouts due to unrelated issue

* Fix deep thread linked comment case and more scroll improvements

* More minor changes

* Flow

* Fix commentList tile style

* Fix long channel names overflowing on small screens

* More scroll changes

* Fix threadline

* Revert "Fix long channel names overflowing on small screens"

This reverts commit e4d2dc7da5861ed8136a60f3352e41a690cd4d33.

* Fix replies fetch

* Revert "Fix replies fetch"

This reverts commit ec70054675a604a7a5f3764ba07c36bf7b0f49c8.

* Cleanup and make smooth

* Always use linked comment on threads

* Cleanup

* Higlight thread comment

* Fix comment body styles
2022-05-16 06:22:13 -04:00

66 lines
2.9 KiB
JavaScript

import { connect } from 'react-redux';
import { doSetContentHistoryItem, doSetPrimaryUri, clearPosition } from 'redux/actions/content';
import { withRouter } from 'react-router-dom';
import {
selectClaimIsNsfwForUri,
makeSelectTagInClaimOrChannelForUri,
selectIsStreamPlaceholderForUri,
selectClaimForUri,
selectClaimWasPurchasedForUri,
} from 'redux/selectors/claims';
import { makeSelectFileInfoForUri } from 'redux/selectors/file_info';
import { makeSelectCollectionForId } from 'redux/selectors/collections';
import * as COLLECTIONS_CONSTS from 'constants/collections';
import { LINKED_COMMENT_QUERY_PARAM, THREAD_COMMENT_QUERY_PARAM } from 'constants/comment';
import * as SETTINGS from 'constants/settings';
import { selectCostInfoForUri, doFetchCostInfoForUri } from 'lbryinc';
import { selectShowMatureContent, selectClientSetting } from 'redux/selectors/settings';
import { makeSelectFileRenderModeForUri, selectContentPositionForUri } from 'redux/selectors/content';
import { selectCommentsListTitleForUri, selectSettingsByChannelId } from 'redux/selectors/comments';
import { DISABLE_COMMENTS_TAG } from 'constants/tags';
import { doToggleAppDrawer } from 'redux/actions/app';
import { getChannelIdFromClaim } from 'util/claim';
import { doFileGet } from 'redux/actions/file';
import FilePage from './view';
const select = (state, props) => {
const { uri } = props;
const { search } = location;
const urlParams = new URLSearchParams(search);
const collectionId = urlParams.get(COLLECTIONS_CONSTS.COLLECTION_ID);
const claim = selectClaimForUri(state, uri);
return {
channelId: getChannelIdFromClaim(claim),
linkedCommentId: urlParams.get(LINKED_COMMENT_QUERY_PARAM),
threadCommentId: urlParams.get(THREAD_COMMENT_QUERY_PARAM),
costInfo: selectCostInfoForUri(state, uri),
obscureNsfw: !selectShowMatureContent(state),
isMature: selectClaimIsNsfwForUri(state, uri),
fileInfo: makeSelectFileInfoForUri(uri)(state),
renderMode: makeSelectFileRenderModeForUri(uri)(state),
videoTheaterMode: selectClientSetting(state, SETTINGS.VIDEO_THEATER_MODE),
contentCommentsDisabled: makeSelectTagInClaimOrChannelForUri(uri, DISABLE_COMMENTS_TAG)(state),
settingsByChannelId: selectSettingsByChannelId(state),
isLivestream: selectIsStreamPlaceholderForUri(state, uri),
hasCollectionById: Boolean(makeSelectCollectionForId(collectionId)(state)),
collectionId,
position: selectContentPositionForUri(state, uri),
audioVideoDuration: claim?.value?.video?.duration || claim?.value?.audio?.duration,
commentsListTitle: selectCommentsListTitleForUri(state, uri),
claimWasPurchased: selectClaimWasPurchasedForUri(state, uri),
};
};
const perform = {
doFetchCostInfoForUri,
doSetContentHistoryItem,
doSetPrimaryUri,
clearPosition,
doToggleAppDrawer,
doFileGet,
};
export default withRouter(connect(select, perform)(FilePage));