LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

force https thumbs or handle img src error

Browse source
This commit is contained in:
jessop 2020-06-08 09:16:56 -04:00 committed by Sean Yesmunt
parent 59e80721a2
commit 91662a9d57
3 changed files with 20 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
ui/component/channelThumbnail/view.jsx
View file

@ -1,5 +1,5 @@
// @flow // @flow
import React from 'react'; import React, { useState } from 'react';
import { parseURI } from 'lbry-redux'; import { parseURI } from 'lbry-redux';
import classnames from 'classnames'; import classnames from 'classnames';
import Gerbil from './gerbil.png'; import Gerbil from './gerbil.png';
@ -16,9 +16,20 @@ type Props = {
}; };
function ChannelThumbnail(props: Props) { function ChannelThumbnail(props: Props) {
const { thumbnail, uri, className, thumbnailPreview, obscure, small = false, allowGifs = false } = props; const {
thumbnail: rawThumbnail,
uri,
className,
thumbnailPreview: rawThumbnailPreview,
obscure,
small = false,
allowGifs = false,
} = props;
const thumbnail = rawThumbnail && rawThumbnail.trim().replace(/^http:\/\//i, 'https://');
const thumbnailPreview = rawThumbnailPreview && rawThumbnailPreview.trim().replace(/^http:\/\//i, 'https://');
const channelThumbnail = thumbnail || thumbnailPreview; const channelThumbnail = thumbnail || thumbnailPreview;
const [thumbError, setThumbError] = useState(false);
if (channelThumbnail && channelThumbnail.endsWith('gif') && !allowGifs) { if (channelThumbnail && channelThumbnail.endsWith('gif') && !allowGifs) {
return <FreezeframeWrapper src={channelThumbnail} className="channel-thumbnail" />; return <FreezeframeWrapper src={channelThumbnail} className="channel-thumbnail" />;
} }
@ -54,7 +65,8 @@ function ChannelThumbnail(props: Props) {
<img <img
alt={__('Channel profile picture')} alt={__('Channel profile picture')}
className="channel-thumbnail__custom" className="channel-thumbnail__custom"
src={thumbnailPreview || thumbnail} src={!thumbError ? thumbnailPreview || thumbnail : Gerbil}
onError={() => setThumbError(true)} // if thumb fails (including due to https replace, show gerbil.
/> />
)} )}
</div> </div>

3
ui/component/fileThumbnail/view.jsx
View file

@ -14,7 +14,8 @@ const className = 'media__thumb';
class FileThumbnail extends React.PureComponent<Props> { class FileThumbnail extends React.PureComponent<Props> {
render() { render() {
const { thumbnail, children, allowGifs = false } = this.props; const { thumbnail: rawThumbnail, children, allowGifs = false } = this.props;
const thumbnail = rawThumbnail && rawThumbnail.trim().replace(/^http:\/\//i, 'https://');
if (!allowGifs && thumbnail && thumbnail.endsWith('gif')) { if (!allowGifs && thumbnail && thumbnail.endsWith('gif')) {
return <FreezeframeWrapper src={thumbnail} className={className} />; return <FreezeframeWrapper src={thumbnail} className={className} />;

4
ui/page/channel/view.jsx
View file

@ -82,6 +82,7 @@ function ChannelPage(props: Props) {
const { search } = location; const { search } = location;
const urlParams = new URLSearchParams(search); const urlParams = new URLSearchParams(search);
const currentView = urlParams.get(PAGE_VIEW_QUERY) || undefined; const currentView = urlParams.get(PAGE_VIEW_QUERY) || undefined;
const [coverError, setCoverError] = useState(false);
const { permanent_url: permanentUrl } = claim; const { permanent_url: permanentUrl } = claim;
const [editing, setEditing] = useState(false); const [editing, setEditing] = useState(false);
const [thumbPreview, setThumbPreview] = useState(thumbnail); const [thumbPreview, setThumbPreview] = useState(thumbnail);
@ -223,10 +224,11 @@ function ChannelPage(props: Props) {
{!channelIsBlocked && (!channelIsBlackListed || isSubscribed) && <SubscribeButton uri={permanentUrl} />} {!channelIsBlocked && (!channelIsBlackListed || isSubscribed) && <SubscribeButton uri={permanentUrl} />}
{!isSubscribed && <BlockButton uri={permanentUrl} />} {!isSubscribed && <BlockButton uri={permanentUrl} />}
</div> </div>
{!editing && cover && ( {!editing && cover && !coverError && (
<img <img
className={classnames('channel-cover__custom', { 'channel__image--blurred': channelIsBlocked })} className={classnames('channel-cover__custom', { 'channel__image--blurred': channelIsBlocked })}
src={cover} src={cover}
onError={() => setCoverError(true)}
/> />
)} )}
{editing && <img className="channel-cover__custom" src={coverPreview} />} {editing && <img className="channel-cover__custom" src={coverPreview} />}