avoids downloading content for googlebot and loads fallback images for missing thumbnails
This commit is contained in:
parent
373ee83c13
commit
302442385e
7 changed files with 66 additions and 20 deletions
|
@ -23,7 +23,6 @@
|
|||
"publishing": {
|
||||
"primaryClaimAddress": null,
|
||||
"uploadDirectory": "/home/lbry/Uploads",
|
||||
"lbrynetHome": "/CURRENTLYUNUSED",
|
||||
"thumbnailChannel": null,
|
||||
"thumbnailChannelId": null,
|
||||
"additionalClaimAddresses": [],
|
||||
|
|
|
@ -2,19 +2,19 @@ import React from 'react';
|
|||
import { Link } from 'react-router-dom';
|
||||
import createCanonicalLink from '@globalutils/createCanonicalLink';
|
||||
import * as Icon from 'react-feather';
|
||||
import Img from 'react-image';
|
||||
|
||||
const AssetPreview = ({ defaultThumbnail, claimData }) => {
|
||||
const {name, fileExt, contentType, thumbnail, title, blocked, transactionTime} = claimData;
|
||||
const {name, fileExt, contentType, thumbnail, title, blocked, transactionTime = 0} = claimData;
|
||||
const showUrl = createCanonicalLink({asset: {...claimData}});
|
||||
console.log(transactionTime)
|
||||
const embedUrl = `${showUrl}.${fileExt}`;
|
||||
const ago = Date.now()/1000 - transactionTime;
|
||||
const ago = Date.now() / 1000 - transactionTime;
|
||||
const dayInSeconds = 60 * 60 * 24;
|
||||
const monthInSeconds = dayInSeconds * 30;
|
||||
const yearInSeconds = dayInSeconds * 365;
|
||||
let when;
|
||||
|
||||
if (ago < dayInSeconds) {
|
||||
if (ago < dayInSeconds || transactionTime < 1) {
|
||||
when = 'Just today';
|
||||
} else if (ago < monthInSeconds) {
|
||||
when = `${Math.floor(ago / dayInSeconds)} d ago`;
|
||||
|
@ -52,10 +52,14 @@ const AssetPreview = ({ defaultThumbnail, claimData }) => {
|
|||
return (
|
||||
<Link to={showUrl} className='asset-preview'>
|
||||
<div className='asset-preview__image-box'>
|
||||
<img
|
||||
className={'asset-preview__image'}
|
||||
src={thumb || defaultThumbnail}
|
||||
<Img
|
||||
src={[
|
||||
thumb,
|
||||
defaultThumbnail,
|
||||
'/assets/img/default_thumb.jpg',
|
||||
]}
|
||||
alt={name}
|
||||
className={'asset-preview__image'}
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
|
|
@ -4,6 +4,8 @@ import ProgressBar from '@components/ProgressBar';
|
|||
import { LOCAL_CHECK, UNAVAILABLE, ERROR, AVAILABLE } from '../../constants/asset_display_states';
|
||||
import createCanonicalLink from '@globalutils/createCanonicalLink';
|
||||
import FileViewer from '@components/FileViewer';
|
||||
import isBot from 'isbot';
|
||||
import Img from 'react-image';
|
||||
|
||||
class AvailableContent extends React.Component {
|
||||
render () {
|
||||
|
@ -15,20 +17,23 @@ class AvailableContent extends React.Component {
|
|||
case 'image/gif':
|
||||
case 'image/svg+xml':
|
||||
return (
|
||||
<img
|
||||
className='asset-image'
|
||||
src={sourceUrl}
|
||||
<Img
|
||||
src={[
|
||||
sourceUrl,
|
||||
'/assets/img/default_thumb.jpg',
|
||||
]}
|
||||
alt={name}
|
||||
className={'asset-image'}
|
||||
/>
|
||||
);
|
||||
case 'video/mp4':
|
||||
return (
|
||||
<video
|
||||
className='asset-video'
|
||||
controls poster={thumbnail}
|
||||
controls poster={!!thumbnail && thumbnail || '/assets/img/default_thumb.jpg'}
|
||||
>
|
||||
<source
|
||||
src={sourceUrl}
|
||||
src={!!sourceUrl && sourceUrl}
|
||||
/>
|
||||
<p>Your browser does not support the <code>video</code> element.</p>
|
||||
</video>
|
||||
|
@ -36,14 +41,25 @@ class AvailableContent extends React.Component {
|
|||
case 'text/markdown':
|
||||
|
||||
return (
|
||||
<div className={'asset-document'}><FileViewer sourceUrl={sourceUrl}/></div>
|
||||
(isBot(window.navigator.userAgent))
|
||||
? (
|
||||
<img
|
||||
className='asset-image'
|
||||
src={'/assets/img/default_thumb.jpg'}
|
||||
alt={'markdown available on page load'}
|
||||
/>
|
||||
)
|
||||
: <div className={'asset-document'}><FileViewer sourceUrl={!!sourceUrl && sourceUrl}/></div>
|
||||
);
|
||||
default:
|
||||
return (
|
||||
<img
|
||||
className='asset-image'
|
||||
src={thumbnail}
|
||||
<Img
|
||||
src={[
|
||||
thumbnail,
|
||||
'/assets/img/default_thumb.jpg',
|
||||
]}
|
||||
alt={name}
|
||||
className={'asset-image'}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
16
package-lock.json
generated
16
package-lock.json
generated
|
@ -7592,6 +7592,11 @@
|
|||
"buffer-alloc": "^1.2.0"
|
||||
}
|
||||
},
|
||||
"isbot": {
|
||||
"version": "2.2.1",
|
||||
"resolved": "https://registry.npmjs.org/isbot/-/isbot-2.2.1.tgz",
|
||||
"integrity": "sha512-z0idtpC0uKKKTBhd1g73GREBWhCQdnJq8U5o+8XhgPvuPiRb/vkpNreLvtoneaZX9FNxDFOU0ohEj9hTWm/tPw=="
|
||||
},
|
||||
"isemail": {
|
||||
"version": "3.2.0",
|
||||
"resolved": "https://registry.npmjs.org/isemail/-/isemail-3.2.0.tgz",
|
||||
|
@ -8552,7 +8557,7 @@
|
|||
},
|
||||
"minimist": {
|
||||
"version": "0.0.10",
|
||||
"resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.10.tgz",
|
||||
"resolved": "http://registry.npmjs.org/minimist/-/minimist-0.0.10.tgz",
|
||||
"integrity": "sha1-3j+YVD2/lggr5IrRoMfNqDYwHc8="
|
||||
},
|
||||
"mississippi": {
|
||||
|
@ -13287,6 +13292,15 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"react-image": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/react-image/-/react-image-2.0.0.tgz",
|
||||
"integrity": "sha512-yWf+UAtkavJFSG1Qa4p111KncN7/a8dAOUUi5On3jjwZU1tzMXFpBnOFp04vYQr8fJmS/7ePp1OsK440WZ4fLA==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.0.0",
|
||||
"prop-types": "15.6.2"
|
||||
}
|
||||
},
|
||||
"react-input-autosize": {
|
||||
"version": "2.2.1",
|
||||
"resolved": "https://registry.npmjs.org/react-input-autosize/-/react-input-autosize-2.2.1.tgz",
|
||||
|
|
|
@ -51,6 +51,7 @@
|
|||
"image-size": "^0.6.3",
|
||||
"inquirer": "^5.2.0",
|
||||
"ip": "^1.1.5",
|
||||
"isbot": "^2.2.1",
|
||||
"lodash": "^4.17.11",
|
||||
"make-dir": "^1.3.0",
|
||||
"mime-types": "^2.1.21",
|
||||
|
@ -66,6 +67,7 @@
|
|||
"react-feather": "^1.1.4",
|
||||
"react-ga": "^2.5.3",
|
||||
"react-helmet": "^5.2.0",
|
||||
"react-image": "^2.0.0",
|
||||
"react-markdown": "^4.0.6",
|
||||
"react-redux": "^5.1.1",
|
||||
"react-router-dom": "^4.3.1",
|
||||
|
|
BIN
public/assets/img/default_thumb.jpg
Normal file
BIN
public/assets/img/default_thumb.jpg
Normal file
Binary file not shown.
After Width: | Height: | Size: 50 KiB |
|
@ -1,4 +1,4 @@
|
|||
const { getClaim } = require('server/lbrynet');
|
||||
const { getClaim, resolveUri } = require('server/lbrynet');
|
||||
const { createFileRecordDataAfterGet } = require('server/models/utils/createFileRecordData.js');
|
||||
const { handleErrorResponse } = require('../../../utils/errorHandlers.js');
|
||||
const getClaimData = require('server/utils/getClaimData');
|
||||
|
@ -6,6 +6,7 @@ const chainquery = require('chainquery').default;
|
|||
const db = require('server/models');
|
||||
const logger = require('winston');
|
||||
const awaitFileSize = require('server/utils/awaitFileSize');
|
||||
const isBot = require('isbot');
|
||||
|
||||
/*
|
||||
|
||||
|
@ -13,7 +14,7 @@ const awaitFileSize = require('server/utils/awaitFileSize');
|
|||
|
||||
*/
|
||||
|
||||
const claimGet = async ({ ip, originalUrl, params }, res) => {
|
||||
const claimGet = async ({ ip, originalUrl, params, headers }, res) => {
|
||||
const name = params.name;
|
||||
const claimId = params.claimId;
|
||||
|
||||
|
@ -28,6 +29,16 @@ const claimGet = async ({ ip, originalUrl, params }, res) => {
|
|||
if (!claimInfo) {
|
||||
throw new Error('claim/get: resolveClaim: No matching uri found in Claim table');
|
||||
}
|
||||
if (headers && headers['user-agent'] && isBot(headers['user-agent'])) {
|
||||
let lbrynetResolveResult = await resolveUri(`${name}#${claimId}`);
|
||||
const { message, completed } = lbrynetResolveResult;
|
||||
res.status(200).json({
|
||||
success: true,
|
||||
message,
|
||||
completed: false,
|
||||
});
|
||||
return true;
|
||||
}
|
||||
let lbrynetResult = await getClaim(`${name}#${claimId}`);
|
||||
if (!lbrynetResult) {
|
||||
throw new Error(`claim/get: getClaim Unable to Get ${name}#${claimId}`);
|
||||
|
|
Loading…
Reference in a new issue