#6787 Use resolve for OG metadata
This commit is contained in:
infinite-persistence
commit
b7cbbd0694
3 changed files with 94 additions and 68 deletions
|
|
@ -18,6 +18,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
|
|||
- Improve twitter share _community pr!_ ([#6690](https://github.com/lbryio/lbry-desktop/pull/6690))
|
||||
- Update lighthouse search api _community pr!_ ([#6731](https://github.com/lbryio/lbry-desktop/pull/6731))
|
||||
- Update sockety api _community pr!_ ([#6747](https://github.com/lbryio/lbry-desktop/pull/6747))
|
||||
- Use resolve for OG metadata instead of chainquery _community pr!_ ([#6787](https://github.com/lbryio/lbry-desktop/pull/6787))
|
||||
|
||||
### Fixed
|
||||
- App now supports '#' and ':' for claimId separator ([#6496](https://github.com/lbryio/lbry-desktop/pull/6496))
|
||||
|
|
@ -29,6 +30,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
|
|||
- Fix yarn copyenv on windows _community pr!_ ([#6702](https://github.com/lbryio/lbry-desktop/pull/6702))
|
||||
- Fix unnecessary livestream api calls in channel page _community pr!_ ([#6652](https://github.com/lbryio/lbry-desktop/pull/6652))
|
||||
- Fix desktop app fails to resolve deep links _community pr!_ ([#6779](https://github.com/lbryio/lbry-desktop/pull/6779))
|
||||
- Fix wrong release date on GoogleVideo metadata _community pr!_ ([#6787](https://github.com/lbryio/lbry-desktop/pull/6787))
|
||||
- Fix markdown line breaking mid word _community pr!_ ([#6805](https://github.com/lbryio/lbry-desktop/pull/6805))
|
||||
- Added \ and = to reserved symbol warning _community pr!_ ([#6733](https://github.com/lbryio/lbry-desktop/pull/6733))
|
||||
- Don't break words in chat + fix text overflow past 3 dot menu _community pr!_ ([#6602](https://github.com/lbryio/lbry-desktop/pull/6602))
|
||||
|
|
|
|||
|
|
@ -12,10 +12,13 @@ import Card from 'component/common/card';
|
|||
import { formatLbryUrlForWeb } from 'util/url';
|
||||
import { parseURI, COLLECTIONS_CONSTS } from 'lbry-redux';
|
||||
|
||||
const AbandonedChannelPreview = lazyImport(() => import('component/abandonedChannelPreview' /* webpackChunkName: "abandonedChannelPreview" */));
|
||||
const AbandonedChannelPreview = lazyImport(() =>
|
||||
import('component/abandonedChannelPreview' /* webpackChunkName: "abandonedChannelPreview" */)
|
||||
);
|
||||
const FilePage = lazyImport(() => import('page/file' /* webpackChunkName: "filePage" */));
|
||||
const LivestreamPage = lazyImport(() => import('page/livestream' /* webpackChunkName: "livestream" */));
|
||||
const Yrbl = lazyImport(() => import('component/yrbl' /* webpackChunkName: "yrbl" */));
|
||||
const isDev = process.env.NODE_ENV !== 'production';
|
||||
|
||||
type Props = {
|
||||
isResolvingUri: boolean,
|
||||
|
|
@ -85,7 +88,8 @@ function ShowPage(props: Props) {
|
|||
const canonicalUrlPath = '/' + canonicalUrl.replace(/^lbry:\/\//, '').replace(/#/g, ':');
|
||||
// Only redirect if we are in lbry.tv land
|
||||
// replaceState will fail if on a different domain (like webcache.googleusercontent.com)
|
||||
if (canonicalUrlPath !== window.location.pathname && DOMAIN === window.location.hostname) {
|
||||
const hostname = isDev ? 'localhost' : DOMAIN;
|
||||
if (canonicalUrlPath !== window.location.pathname && hostname === window.location.hostname) {
|
||||
const urlParams = new URLSearchParams(search);
|
||||
if (urlParams.get(COLLECTIONS_CONSTS.COLLECTION_ID)) {
|
||||
const listId = urlParams.get(COLLECTIONS_CONSTS.COLLECTION_ID) || '';
|
||||
|
|
|
|||
152
web/src/html.js
152
web/src/html.js
|
|
@ -9,18 +9,23 @@ const {
|
|||
SITE_DESCRIPTION,
|
||||
SITE_NAME,
|
||||
FAVICON,
|
||||
LBRY_WEB_API,
|
||||
} = require('../../config.js');
|
||||
|
||||
const { Lbry } = require('lbry-redux');
|
||||
const { generateEmbedUrl, generateStreamUrl, generateDirectUrl } = require('../../ui/util/web');
|
||||
const PAGES = require('../../ui/constants/pages');
|
||||
const { CATEGORY_METADATA } = require('./category-metadata');
|
||||
const { getClaim } = require('./chainquery');
|
||||
const { parseURI } = require('lbry-redux');
|
||||
const { parseURI, normalizeURI } = require('lbry-redux');
|
||||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
const moment = require('moment');
|
||||
const removeMd = require('remove-markdown');
|
||||
const { getJsBundleId } = require('../bundle-id.js');
|
||||
const jsBundleId = getJsBundleId();
|
||||
const SDK_API_PATH = `${LBRY_WEB_API}/api/v1`;
|
||||
const PROXY_URL = `${SDK_API_PATH}/proxy`;
|
||||
Lbry.setDaemonConnectionString(PROXY_URL);
|
||||
|
||||
function insertToHead(fullHtml, htmlToInsert) {
|
||||
const beginStr = '<!-- VARIABLE_HEAD_BEGIN -->';
|
||||
|
|
@ -40,6 +45,10 @@ function truncateDescription(description) {
|
|||
return description.length > 200 ? description.substr(0, 200) + '...' : description;
|
||||
}
|
||||
|
||||
function normalizeClaimUrl(url) {
|
||||
return normalizeURI(url.replace(/:/g, '#'));
|
||||
}
|
||||
|
||||
function escapeHtmlProperty(property) {
|
||||
return property
|
||||
? String(property)
|
||||
|
|
@ -122,20 +131,33 @@ function buildBasicOgMetadata() {
|
|||
function buildClaimOgMetadata(uri, claim, overrideOptions = {}) {
|
||||
// Initial setup for claim based og metadata
|
||||
const { claimName } = parseURI(uri);
|
||||
const claimTitle = escapeHtmlProperty(claim.title ? claim.title : claimName);
|
||||
const { meta, value, signing_channel } = claim;
|
||||
const fee = value && value.fee && (Number(value.fee.amount) || 0);
|
||||
const tags = value && value.tags;
|
||||
const media = value && (value.video || value.audio || value.image);
|
||||
const source = value && value.source;
|
||||
const channel = signing_channel && signing_channel.name;
|
||||
const thumbnail = value && value.thumbnail && value.thumbnail.url;
|
||||
const mediaType = source && source.media_type;
|
||||
const mediaDuration = media && media.duration;
|
||||
const claimTitle = escapeHtmlProperty((value && value.title) || claimName);
|
||||
const releaseTime = (value && value.release_time) || (meta && meta.creation_timestamp) || 0;
|
||||
|
||||
const claimDescription =
|
||||
claim.description && claim.description.length > 0
|
||||
? escapeHtmlProperty(truncateDescription(claim.description))
|
||||
value && value.description && value.description.length > 0
|
||||
? escapeHtmlProperty(truncateDescription(value.description))
|
||||
: `View ${claimTitle} on ${SITE_NAME}`;
|
||||
const claimLanguage = escapeHtmlProperty(claim.language) || 'en_US';
|
||||
|
||||
const claimLanguage =
|
||||
value && value.languages && value.languages.length > 0 ? escapeHtmlProperty(value.languages[0]) : 'en_US';
|
||||
|
||||
let imageThumbnail;
|
||||
|
||||
if (Number(claim.fee) <= 0 && claim.source_media_type && claim.source_media_type.startsWith('image/')) {
|
||||
if (fee <= 0 && mediaType && mediaType.startsWith('image/')) {
|
||||
imageThumbnail = generateStreamUrl(claim.name, claim.claim_id);
|
||||
}
|
||||
const claimThumbnail =
|
||||
escapeHtmlProperty(claim.thumbnail_url) || imageThumbnail || OG_IMAGE_URL || `${URL}/public/v2-og.png`;
|
||||
|
||||
const claimThumbnail = escapeHtmlProperty(thumbnail) || imageThumbnail || OG_IMAGE_URL || `${URL}/public/v2-og.png`;
|
||||
|
||||
// Allow for ovverriding default claim based og metadata
|
||||
const title = overrideOptions.title || claimTitle;
|
||||
|
|
@ -148,8 +170,9 @@ function buildClaimOgMetadata(uri, claim, overrideOptions = {}) {
|
|||
head += '<meta charset="utf8"/>';
|
||||
head += `<title>${title}</title>`;
|
||||
head += `<meta name="description" content="${cleanDescription}"/>`;
|
||||
if (claim.tags) {
|
||||
head += `<meta name="keywords" content="${claim.tags.toString()}"/>`;
|
||||
|
||||
if (tags && tags.length > 0) {
|
||||
head += `<meta name="keywords" content="${tags.toString()}"/>`;
|
||||
}
|
||||
|
||||
head += `<meta name="twitter:image" content="${claimThumbnail}"/>`;
|
||||
|
|
@ -165,33 +188,28 @@ function buildClaimOgMetadata(uri, claim, overrideOptions = {}) {
|
|||
head += `<meta name="twitter:url" content="${URL}/${claim.name}:${claim.claim_id}"/>`;
|
||||
head += `<link rel="canonical" content="${SITE_CANONICAL_URL || URL}/${claim.name}:${claim.claim_id}"/>`;
|
||||
|
||||
if (
|
||||
claim.source_media_type &&
|
||||
(claim.source_media_type.startsWith('video/') || claim.source_media_type.startsWith('audio/'))
|
||||
) {
|
||||
if (mediaType && (mediaType.startsWith('video/') || mediaType.startsWith('audio/'))) {
|
||||
const videoUrl = generateEmbedUrl(claim.name, claim.claim_id);
|
||||
head += `<meta property="og:video" content="${videoUrl}" />`;
|
||||
head += `<meta property="og:video:secure_url" content="${videoUrl}" />`;
|
||||
head += `<meta property="og:video:type" content="${claim.source_media_type}" />`;
|
||||
if (claim.channel) {
|
||||
head += `<meta name="og:video:series" content="${claim.channel}"/>`;
|
||||
head += `<meta property="og:video:type" content="${mediaType}" />`;
|
||||
if (channel) {
|
||||
head += `<meta name="og:video:series" content="${channel}"/>`;
|
||||
}
|
||||
head += `<meta name="twitter:card" content="player"/>`;
|
||||
head += `<meta name="twitter:player" content="${videoUrl}" />`;
|
||||
if (claim.release_time) {
|
||||
var release = new Date(claim.release_time * 1000).toISOString();
|
||||
if (releaseTime) {
|
||||
var release = new Date(releaseTime * 1000).toISOString();
|
||||
head += `<meta property="og:video:release_date" content="${release}"/>`;
|
||||
}
|
||||
if (claim.duration) {
|
||||
head += `<meta property="og:video:duration" content="${claim.duration}"/>`;
|
||||
} else if (claim.audio_duration) {
|
||||
head += `<meta property="og:video:duration" content="${claim.audio_duration}"/>`;
|
||||
if (mediaDuration) {
|
||||
head += `<meta property="og:video:duration" content="${mediaDuration}"/>`;
|
||||
}
|
||||
if (claim.frame_width && claim.frame_height) {
|
||||
head += `<meta property="og:video:width" content="${claim.frame_width}"/>`;
|
||||
head += `<meta property="og:video:height" content="${claim.frame_height}"/>`;
|
||||
head += `<meta name="twitter:player:width" content="${claim.frame_width}">`;
|
||||
head += `<meta name="twitter:player:height" content="${claim.frame_height}">`;
|
||||
if (media && media.width && media.height) {
|
||||
head += `<meta property="og:video:width" content="${media.width}"/>`;
|
||||
head += `<meta property="og:video:height" content="${media.height}"/>`;
|
||||
head += `<meta name="twitter:player:width" content="${media.width}">`;
|
||||
head += `<meta name="twitter:player:height" content="${media.height}">`;
|
||||
}
|
||||
} else {
|
||||
head += `<meta name="twitter:card" content="summary_large_image"/>`;
|
||||
|
|
@ -200,19 +218,27 @@ function buildClaimOgMetadata(uri, claim, overrideOptions = {}) {
|
|||
return head;
|
||||
}
|
||||
|
||||
function buildGoogleVideoMetadata(claimUri, claim) {
|
||||
if (!claim.source_media_type || !claim.source_media_type.startsWith('video/')) {
|
||||
function buildGoogleVideoMetadata(uri, claim) {
|
||||
const { claimName } = parseURI(uri);
|
||||
const { meta, value } = claim;
|
||||
const media = value && value.video;
|
||||
const source = value && value.source;
|
||||
const thumbnail = value && value.thumbnail && value.thumbnail.url;
|
||||
const mediaType = source && source.media_type;
|
||||
const mediaDuration = media && media.duration;
|
||||
const claimTitle = escapeHtmlProperty((value && value.title) || claimName);
|
||||
const releaseTime = (value && value.release_time) || (meta && meta.creation_timestamp) || 0;
|
||||
|
||||
const claimDescription =
|
||||
value && value.description && value.description.length > 0
|
||||
? escapeHtmlProperty(truncateDescription(value.description))
|
||||
: `View ${claimTitle} on ${SITE_NAME}`;
|
||||
|
||||
if (!mediaType || !mediaType.startsWith('video/')) {
|
||||
return '';
|
||||
}
|
||||
|
||||
const { claimName } = parseURI(claimUri);
|
||||
const claimTitle = escapeHtmlProperty(claim.title ? claim.title : claimName);
|
||||
const claimDescription =
|
||||
claim.description && claim.description.length > 0
|
||||
? escapeHtmlProperty(truncateDescription(claim.description))
|
||||
: `View ${claimTitle} on ${SITE_NAME}`;
|
||||
const claimThumbnail = escapeHtmlProperty(claim.thumbnail_url) || OG_IMAGE_URL || `${URL}/public/v2-og.png`;
|
||||
const releaseTime = claim.release_time || 0;
|
||||
const claimThumbnail = escapeHtmlProperty(thumbnail) || OG_IMAGE_URL || `${URL}/public/v2-og.png`;
|
||||
|
||||
// https://developers.google.com/search/docs/data-types/video
|
||||
const googleVideoMetadata = {
|
||||
|
|
@ -224,7 +250,7 @@ function buildGoogleVideoMetadata(claimUri, claim) {
|
|||
thumbnailUrl: `${claimThumbnail}`,
|
||||
uploadDate: `${new Date(releaseTime * 1000).toISOString()}`,
|
||||
// --- Recommended ---
|
||||
duration: claim.duration ? moment.duration(claim.duration * 1000).toISOString() : undefined,
|
||||
duration: mediaDuration ? moment.duration(mediaDuration * 1000).toISOString() : undefined,
|
||||
contentUrl: generateDirectUrl(claim.name, claim.claim_id),
|
||||
embedUrl: generateEmbedUrl(claim.name, claim.claim_id),
|
||||
};
|
||||
|
|
@ -242,24 +268,20 @@ function buildGoogleVideoMetadata(claimUri, claim) {
|
|||
);
|
||||
}
|
||||
|
||||
async function getClaimFromChainqueryOrRedirect(ctx, url, ignoreRedirect = false) {
|
||||
const { isChannel, streamName, channelName, channelClaimId, streamClaimId } = parseURI(url);
|
||||
const claimName = isChannel ? '@' + channelName : streamName;
|
||||
const claimId = isChannel ? channelClaimId : streamClaimId;
|
||||
|
||||
const rows = await getClaim(claimName, claimId, channelName, channelClaimId);
|
||||
if (rows && rows.length) {
|
||||
const claim = rows[0];
|
||||
|
||||
if (claim.reposted_name && claim.reposted_claim_id && !ignoreRedirect) {
|
||||
ctx.redirect(`/${claim.reposted_name}:${claim.reposted_claim_id}`);
|
||||
return;
|
||||
async function resolveClaimOrRedirect(ctx, url, ignoreRedirect = false) {
|
||||
let claim;
|
||||
try {
|
||||
const response = await Lbry.resolve({ urls: [url] });
|
||||
if (response && response[url] && !response[url].error) {
|
||||
claim = response && response[url];
|
||||
const isRepost = claim.reposted_claim && claim.reposted_claim.name && claim.reposted_claim.claim_id;
|
||||
if (isRepost && !ignoreRedirect) {
|
||||
ctx.redirect(`/${claim.reposted_claim.name}:${claim.reposted_claim.claim_id}`);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
return claim;
|
||||
}
|
||||
|
||||
return undefined;
|
||||
} catch {}
|
||||
return claim;
|
||||
}
|
||||
|
||||
let html;
|
||||
|
|
@ -278,12 +300,10 @@ async function getHtml(ctx) {
|
|||
const embedPath = `/$/${PAGES.EMBED}/`;
|
||||
|
||||
if (requestPath.includes(invitePath)) {
|
||||
const inviteChannel = requestPath.slice(invitePath.length).replace(/:/g, '#');
|
||||
const inviteChannelUrl = `lbry://${inviteChannel}`;
|
||||
|
||||
try {
|
||||
parseURI(inviteChannelUrl);
|
||||
const claim = await getClaimFromChainqueryOrRedirect(ctx, inviteChannelUrl);
|
||||
const inviteChannel = requestPath.slice(invitePath.length);
|
||||
const inviteChannelUrl = normalizeClaimUrl(inviteChannel);
|
||||
const claim = await resolveClaimOrRedirect(ctx, inviteChannelUrl);
|
||||
const invitePageMetadata = buildClaimOgMetadata(inviteChannelUrl, claim, {
|
||||
title: `Join ${claim.name} on ${SITE_NAME}`,
|
||||
description: `Join ${claim.name} on ${SITE_NAME}, a content wonderland owned by everyone (and no one).`,
|
||||
|
|
@ -302,8 +322,8 @@ async function getHtml(ctx) {
|
|||
}
|
||||
|
||||
if (requestPath.includes(embedPath)) {
|
||||
const claimUri = requestPath.replace(embedPath, '').replace(/:/g, '#');
|
||||
const claim = await getClaimFromChainqueryOrRedirect(ctx, claimUri, true);
|
||||
const claimUri = normalizeClaimUrl(requestPath.replace(embedPath, ''));
|
||||
const claim = await resolveClaimOrRedirect(ctx, claimUri, true);
|
||||
|
||||
if (claim) {
|
||||
const ogMetadata = buildClaimOgMetadata(claimUri, claim);
|
||||
|
|
@ -325,8 +345,8 @@ async function getHtml(ctx) {
|
|||
}
|
||||
|
||||
if (!requestPath.includes('$')) {
|
||||
const claimUri = requestPath.slice(1).replace(/:/g, '#');
|
||||
const claim = await getClaimFromChainqueryOrRedirect(ctx, claimUri);
|
||||
const claimUri = normalizeClaimUrl(requestPath.slice(1));
|
||||
const claim = await resolveClaimOrRedirect(ctx, claimUri);
|
||||
|
||||
if (claim) {
|
||||
const ogMetadata = buildClaimOgMetadata(claimUri, claim);
|
||||
|
|
|
|||
Loading…
Reference in a new issue