Fix raw GitHub URL being output to content (#2147)

* fix thumbnail quality

* Revert "fix(git-gateway): fix previews for GitHub images not in Large Media (#2125)"

This reverts commit d17f896f479292db06d3a4b39f2e51b6c41101bd.

* wip

* Stop using thunks to load media display URLs

* Revert changes to dev-test

* Revert changes to large media docs

* fix lint error

* Update docs to point to the upcoming version with non-broken media
This commit is contained in:
Shawn Erquhart
2019-03-07 21:28:14 -05:00
committed by Benaiah Mischenko
parent 40df666151
commit 37138834d6
12 changed files with 161 additions and 115 deletions

View File

@ -159,16 +159,14 @@ export function persistMedia(file, opts = {}) {
try {
const id = await getBlobSHA(file);
const getDisplayURL = () => URL.createObjectURL(file);
const displayURL = URL.createObjectURL(file);
const assetProxy = await createAssetProxy(fileName, file, false, privateUpload);
dispatch(addAsset(assetProxy));
if (!integration) {
const asset = await backend.persistMedia(state.config, assetProxy);
return dispatch(mediaPersisted({ id, getDisplayURL, ...asset }));
return dispatch(mediaPersisted({ id, displayURL, ...asset }));
}
return dispatch(
mediaPersisted({ id, getDisplayURL, ...assetProxy.asset }, { privateUpload }),
);
return dispatch(mediaPersisted({ id, displayURL, ...assetProxy.asset }, { privateUpload }));
} catch (error) {
console.error(error);
dispatch(
@ -231,28 +229,41 @@ export function deleteMedia(file, opts = {}) {
export function loadMediaDisplayURL(file) {
return async (dispatch, getState) => {
const { getDisplayURL, id, url, urlIsPublicPath } = file;
const { mediaLibrary: mediaLibraryState } = getState();
const displayURLPath = ['displayURLs', id];
const shouldLoadDisplayURL =
id &&
((url && urlIsPublicPath) ||
(getDisplayURL &&
!mediaLibraryState.getIn([...displayURLPath, 'url']) &&
!mediaLibraryState.getIn([...displayURLPath, 'isFetching']) &&
!mediaLibraryState.getIn([...displayURLPath, 'err'])));
if (shouldLoadDisplayURL) {
try {
dispatch(mediaDisplayURLRequest(id));
const newURL = (urlIsPublicPath && url) || (await getDisplayURL());
if (newURL) {
dispatch(mediaDisplayURLSuccess(id, newURL));
return newURL;
}
const { displayURL, id, url } = file;
const state = getState();
const displayURLState = state.mediaLibrary.getIn(['displayURLs', id], Map());
if (
!id ||
// displayURL is used by most backends; url (like urlIsPublicPath) is used exclusively by the
// assetStore integration. Only the assetStore uses URLs which can actually be inserted into
// an entry - other backends create a domain-relative URL using the public_folder from the
// config and the file's name.
(!displayURL && !url) ||
displayURLState.get('url') ||
displayURLState.get('isFetching') ||
displayURLState.get('err')
) {
return Promise.resolve();
}
if (typeof url === 'string') {
dispatch(mediaDisplayURLRequest(id));
return dispatch(mediaDisplayURLSuccess(id, displayURL));
}
if (typeof displayURL === 'string') {
dispatch(mediaDisplayURLRequest(id));
return dispatch(mediaDisplayURLSuccess(id, displayURL));
}
try {
const backend = currentBackend(state.config);
dispatch(mediaDisplayURLRequest(id));
const newURL = await backend.getMediaDisplayURL(displayURL);
if (newURL) {
return dispatch(mediaDisplayURLSuccess(id, newURL));
} else {
throw new Error('No display URL was returned!');
} catch (err) {
dispatch(mediaDisplayURLFailure(id, err));
}
} catch (err) {
return dispatch(mediaDisplayURLFailure(id, err));
}
};
}
@ -322,6 +333,7 @@ export function mediaDisplayURLSuccess(key, url) {
}
export function mediaDisplayURLFailure(key, err) {
console.error(err);
return {
type: MEDIA_DISPLAY_URL_FAILURE,
payload: { key, err },

View File

@ -486,6 +486,17 @@ class Backend {
return this.implementation.getMedia();
}
getMediaDisplayURL(displayURL) {
if (this.implementation.getMediaDisplayURL) {
return this.implementation.getMediaDisplayURL(displayURL);
}
const err = new Error(
'getMediaDisplayURL is not implemented by the current backend, but the backend returned a displayURL which was not a string!',
);
err.displayURL = displayURL;
return Promise.reject(err);
}
entryWithFormat(collectionOrEntity) {
return entry => {
const format = resolveFormat(collectionOrEntity, entry);

View File

@ -24,14 +24,14 @@ const IMAGE_EXTENSIONS_VIEWABLE = ['jpg', 'jpeg', 'webp', 'gif', 'png', 'bmp', '
const IMAGE_EXTENSIONS = [...IMAGE_EXTENSIONS_VIEWABLE];
const fileShape = {
key: PropTypes.string.isRequired,
displayURL: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired,
id: PropTypes.string.isRequired,
key: PropTypes.string.isRequired,
name: PropTypes.string.isRequired,
size: PropTypes.number,
queryOrder: PropTypes.number,
size: PropTypes.number,
url: PropTypes.string,
urlIsPublicPath: PropTypes.bool,
getDisplayURL: PropTypes.func,
};
class MediaLibrary extends React.Component {
@ -119,7 +119,7 @@ class MediaLibrary extends React.Component {
toTableData = files => {
const tableData =
files &&
files.map(({ key, name, id, size, queryOrder, url, urlIsPublicPath, getDisplayURL }) => {
files.map(({ key, name, id, size, queryOrder, url, urlIsPublicPath, displayURL }) => {
const ext = fileExtension(name).toLowerCase();
return {
key,
@ -130,7 +130,7 @@ class MediaLibrary extends React.Component {
queryOrder,
url,
urlIsPublicPath,
getDisplayURL,
displayURL,
isImage: IMAGE_EXTENSIONS.includes(ext),
isViewableImage: IMAGE_EXTENSIONS_VIEWABLE.includes(ext),
};

View File

@ -62,9 +62,9 @@ class MediaLibraryCard extends React.Component {
</Card>
);
}
UNSAFE_componentWillMount() {
componentDidMount() {
const { displayURL, loadDisplayURL } = this.props;
if (!displayURL || (!displayURL.url && !displayURL.isFetching && !displayURL.err)) {
if (!displayURL.get('url')) {
loadDisplayURL();
}
}

View File

@ -48,7 +48,7 @@ const MediaLibraryCardGrid = ({
width={cardWidth}
margin={cardMargin}
isPrivate={isPrivate}
displayURL={displayURLs.get(file.id, Map())}
displayURL={displayURLs.get(file.id, file.url ? Map({ url: file.url }) : Map())}
loadDisplayURL={() => loadDisplayURL(file)}
type={file.type}
/>
@ -65,10 +65,13 @@ MediaLibraryCardGrid.propTypes = {
setScrollContainerRef: PropTypes.func.isRequired,
mediaItems: PropTypes.arrayOf(
PropTypes.shape({
displayURL: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
id: PropTypes.string.isRequired,
key: PropTypes.string.isRequired,
isViewableImage: PropTypes.bool,
name: PropTypes.string.isRequired,
type: PropTypes.string.isRequired,
url: PropTypes.string,
name: PropTypes.string,
urlIsPublicPath: PropTypes.bool,
}),
).isRequired,
isSelectedFile: PropTypes.func.isRequired,

View File

@ -180,14 +180,14 @@ const MediaLibraryModal = ({
};
const fileShape = {
key: PropTypes.string.isRequired,
displayURL: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired,
id: PropTypes.string.isRequired,
key: PropTypes.string.isRequired,
name: PropTypes.string.isRequired,
size: PropTypes.number,
queryOrder: PropTypes.number,
size: PropTypes.number,
url: PropTypes.string,
urlIsPublicPath: PropTypes.bool,
getDisplayURL: PropTypes.func.isRequired,
};
MediaLibraryModal.propTypes = {