avoids downloading content for googlebot and loads fallback images for missing thumbnails

This commit is contained in:
jessop 2019-03-17 22:51:57 -04:00
parent 373ee83c13
commit 302442385e
7 changed files with 66 additions and 20 deletions

View file

@ -23,7 +23,6 @@
"publishing": {
"primaryClaimAddress": null,
"uploadDirectory": "/home/lbry/Uploads",
"lbrynetHome": "/CURRENTLYUNUSED",
"thumbnailChannel": null,
"thumbnailChannelId": null,
"additionalClaimAddresses": [],

View file

@ -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 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>

View file

@ -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
View file

@ -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",

View file

@ -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",

Binary file not shown.

After

Width:  |  Height:  |  Size: 50 KiB

View file

@ -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}`);