diff --git a/config.js b/config.js index 69ea0e060..aca1591b7 100644 --- a/config.js +++ b/config.js @@ -41,8 +41,7 @@ const config = { PINNED_URI_2: process.env.PINNED_URI_2, PINNED_LABEL_2: process.env.PINNED_LABEL_2, KNOWN_APP_DOMAINS: process.env.KNOWN_APP_DOMAINS ? process.env.KNOWN_APP_DOMAINS.split(',') : [], - CHANNEL_THUMBNAIL_FALLBACK: process.env.CHANNEL_THUMBNAIL_FALLBACK, - STREAM_THUMBNAIL_FALLBACK: process.env.STREAM_THUMBNAIL_FALLBACK, + THUMBNAIL_FALLBACK: process.env.THUMBNAIL_FALLBACK, }; config.URL_LOCAL = `http://localhost:${config.WEB_SERVER_PORT}`; diff --git a/package.json b/package.json index c78c543c2..e7414cc5d 100644 --- a/package.json +++ b/package.json @@ -53,9 +53,8 @@ "electron-updater": "^4.2.4", "express": "^4.17.1", "if-env": "^1.0.4", - "remove-markdown": "^0.3.0", - "react-image": "^4.0.3", - "remark-breaks": "^2.0.1", + "remark-breaks": "^2.0.1", + "remove-markdown": "^0.3.0", "tempy": "^0.6.0", "videojs-logo": "^2.1.4" }, diff --git a/ui/component/claimPreview/view.jsx b/ui/component/claimPreview/view.jsx index 00e0173bb..cd6b6d8d9 100644 --- a/ui/component/claimPreview/view.jsx +++ b/ui/component/claimPreview/view.jsx @@ -2,9 +2,8 @@ import type { Node } from 'react'; import React, { useEffect, forwardRef } from 'react'; import { NavLink, withRouter } from 'react-router-dom'; -import { useImage } from 'react-image'; import classnames from 'classnames'; -import { CHANNEL_THUMBNAIL_FALLBACK, STREAM_THUMBNAIL_FALLBACK, SIMPLE_SITE } from 'config'; +import { SIMPLE_SITE } from 'config'; import { parseURI, convertToShareLink } from 'lbry-redux'; import { openCopyLinkMenu } from 'util/context-menu'; import { formatLbryUrlForWeb } from 'util/url'; @@ -189,11 +188,6 @@ const ClaimPreview = forwardRef((props: Props, ref: any) => { // Weird placement warning // Make sure this happens after we figure out if this claim needs to be hidden const thumbnailUrl = useGetThumbnail(contentUri, claim, streamingUrl, getFile, shouldHide); - const isStream = claim && claim.value_type === 'stream'; - const { src: thumbnailUrlWithFallback } = useImage({ - srcList: [thumbnailUrl, isStream ? STREAM_THUMBNAIL_FALLBACK : CHANNEL_THUMBNAIL_FALLBACK], - useSuspense: false, - }); function handleContextMenu(e) { // @if TARGET='app' @@ -288,7 +282,7 @@ const ClaimPreview = forwardRef((props: Props, ref: any) => { <> {!pending ? ( - + {/* @if TARGET='app' */} {claim && (
@@ -304,7 +298,7 @@ const ClaimPreview = forwardRef((props: Props, ref: any) => { ) : ( - + )} )} diff --git a/ui/component/fileThumbnail/view.jsx b/ui/component/fileThumbnail/view.jsx index 8ee1d4c5e..e5fd1b18e 100644 --- a/ui/component/fileThumbnail/view.jsx +++ b/ui/component/fileThumbnail/view.jsx @@ -2,6 +2,7 @@ import type { Node } from 'react'; import { getThumbnailCdnUrl } from 'util/thumbnail'; import React from 'react'; +import { THUMBNAIL_FALLBACK } from 'config'; import FreezeframeWrapper from './FreezeframeWrapper'; import Placeholder from './placeholder.png'; import classnames from 'classnames'; @@ -14,10 +15,11 @@ type Props = { claim: ?StreamClaim, doResolveUri: string => void, className?: string, + fallbackThumbnail?: string, }; function FileThumbnail(props: Props) { - const { claim, uri, doResolveUri, thumbnail: rawThumbnail, children, allowGifs = false, className } = props; + const { claim, uri, doResolveUri, thumbnail: rawThumbnail, children, allowGifs = false, className, fallbackThumbnail = THUMBNAIL_FALLBACK } = props; const passedThumbnail = rawThumbnail && rawThumbnail.trim().replace(/^http:\/\//i, 'https://'); const thumbnailFromClaim = uri && claim && claim.value && claim.value.thumbnail ? claim.value.thumbnail.url : undefined; @@ -50,7 +52,7 @@ function FileThumbnail(props: Props) { return (