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:
committed by
Benaiah Mischenko
parent
40df666151
commit
37138834d6
@ -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 },
|
||||
|
@ -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);
|
||||
|
@ -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),
|
||||
};
|
||||
|
@ -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();
|
||||
}
|
||||
}
|
||||
|
@ -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,
|
||||
|
@ -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 = {
|
||||
|
Reference in New Issue
Block a user