3243ce6e0a
## Issue 6068 ## Change Lock all images to fit a 16:9 container. We have implemented 'ZoomableImg', so no reason in trying to display in full size. This reduces CLS from 0.4xx to 0.01x. ## Flaws CLS could probably be zero if not for the spinner shifting things slightly. Also, mobile CLS is 0.07. The troublesome part in this PR is that FileRenderInitiator, FileRender and their subcomponents are broken apart and it's hard to synchronize their visibility and size. There are time gaps where none of them are visible, etc. This PR only tackles the major part (most bang for buck), which is the elimination of variable height of the rendered image. ## Aside I think `claimIsMine` is unused, so don't waste time requesting it.
50 lines
2 KiB
JavaScript
50 lines
2 KiB
JavaScript
import { connect } from 'react-redux';
|
|
import { doSetContentHistoryItem, doSetPrimaryUri } from 'redux/actions/content';
|
|
import { withRouter } from 'react-router';
|
|
import {
|
|
doFetchFileInfo,
|
|
makeSelectFileInfoForUri,
|
|
makeSelectMetadataForUri,
|
|
makeSelectClaimIsNsfw,
|
|
SETTINGS,
|
|
makeSelectTagInClaimOrChannelForUri,
|
|
makeSelectClaimIsStreamPlaceholder,
|
|
makeSelectCollectionForId,
|
|
COLLECTIONS_CONSTS,
|
|
} from 'lbry-redux';
|
|
import { makeSelectCostInfoForUri, doFetchCostInfoForUri } from 'lbryinc';
|
|
import { selectShowMatureContent, makeSelectClientSetting } from 'redux/selectors/settings';
|
|
import { makeSelectFileRenderModeForUri } from 'redux/selectors/content';
|
|
import { DISABLE_COMMENTS_TAG } from 'constants/tags';
|
|
|
|
import FilePage from './view';
|
|
|
|
const select = (state, props) => {
|
|
const { search } = props.location;
|
|
const urlParams = new URLSearchParams(search);
|
|
const collectionId = urlParams.get(COLLECTIONS_CONSTS.COLLECTION_ID);
|
|
|
|
return {
|
|
linkedCommentId: urlParams.get('lc'),
|
|
costInfo: makeSelectCostInfoForUri(props.uri)(state),
|
|
metadata: makeSelectMetadataForUri(props.uri)(state),
|
|
obscureNsfw: !selectShowMatureContent(state),
|
|
isMature: makeSelectClaimIsNsfw(props.uri)(state),
|
|
fileInfo: makeSelectFileInfoForUri(props.uri)(state),
|
|
renderMode: makeSelectFileRenderModeForUri(props.uri)(state),
|
|
videoTheaterMode: makeSelectClientSetting(SETTINGS.VIDEO_THEATER_MODE)(state),
|
|
commentsDisabled: makeSelectTagInClaimOrChannelForUri(props.uri, DISABLE_COMMENTS_TAG)(state),
|
|
isLivestream: makeSelectClaimIsStreamPlaceholder(props.uri)(state),
|
|
collection: makeSelectCollectionForId(collectionId)(state),
|
|
collectionId,
|
|
};
|
|
};
|
|
|
|
const perform = (dispatch) => ({
|
|
fetchFileInfo: (uri) => dispatch(doFetchFileInfo(uri)),
|
|
fetchCostInfo: (uri) => dispatch(doFetchCostInfoForUri(uri)),
|
|
setViewed: (uri) => dispatch(doSetContentHistoryItem(uri)),
|
|
setPrimaryUri: (uri) => dispatch(doSetPrimaryUri(uri)),
|
|
});
|
|
|
|
export default withRouter(connect(select, perform)(FilePage));
|