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

use resolve for og metadata

Browse source
This commit is contained in:
Baltazar Gomez 2021-08-05 00:41:06 -05:00 • committed by infinite-persistence
parent be4c75c047
commit 6d91d1c799
No known key found for this signature in database
GPG key ID: B9C3252EDC3D0AA0
1 changed files with 80 additions and 57 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

133
web/src/html.js
View file

@ -9,11 +9,13 @@ const {
SITE_DESCRIPTION, SITE_DESCRIPTION,
SITE_NAME, SITE_NAME,
FAVICON, FAVICON,
LBRY_WEB_API,
} = require('../../config.js'); } = require('../../config.js');
const { Lbry } = require('lbry-redux');
const { generateEmbedUrl, generateStreamUrl, generateDirectUrl } = require('../../ui/util/web'); const { generateEmbedUrl, generateStreamUrl, generateDirectUrl } = require('../../ui/util/web');
const PAGES = require('../../ui/constants/pages'); const PAGES = require('../../ui/constants/pages');
const { CATEGORY_METADATA } = require('./category-metadata'); const { CATEGORY_METADATA } = require('./category-metadata');
const { getClaim } = require('./chainquery');
const { parseURI } = require('lbry-redux'); const { parseURI } = require('lbry-redux');
const fs = require('fs'); const fs = require('fs');
const path = require('path'); const path = require('path');
@ -21,6 +23,9 @@ const moment = require('moment');
const removeMd = require('remove-markdown'); const removeMd = require('remove-markdown');
const { getJsBundleId } = require('../bundle-id.js'); const { getJsBundleId } = require('../bundle-id.js');
const jsBundleId = getJsBundleId(); 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) { function insertToHead(fullHtml, htmlToInsert) {
const beginStr = '<!-- VARIABLE_HEAD_BEGIN -->'; const beginStr = '<!-- VARIABLE_HEAD_BEGIN -->';
@ -122,20 +127,33 @@ function buildBasicOgMetadata() {
function buildClaimOgMetadata(uri, claim, overrideOptions = {}) { function buildClaimOgMetadata(uri, claim, overrideOptions = {}) {
// Initial setup for claim based og metadata // Initial setup for claim based og metadata
const { claimName } = parseURI(uri); 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 creationTimestamp = meta && (meta.creation_timestamp || 0);
const claimTitle = escapeHtmlProperty((value && value.title) || claimName);
const claimDescription = const claimDescription =
claim.description && claim.description.length > 0 value && value.description && value.description.length > 0
? escapeHtmlProperty(truncateDescription(claim.description)) ? escapeHtmlProperty(truncateDescription(value.description))
: `View ${claimTitle} on ${SITE_NAME}`; : `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; 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); 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 // Allow for ovverriding default claim based og metadata
const title = overrideOptions.title || claimTitle; const title = overrideOptions.title || claimTitle;
@ -148,8 +166,9 @@ function buildClaimOgMetadata(uri, claim, overrideOptions = {}) {
head += '<meta charset="utf8"/>'; head += '<meta charset="utf8"/>';
head += `<title>${title}</title>`; head += `<title>${title}</title>`;
head += `<meta name="description" content="${cleanDescription}"/>`; 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}"/>`; head += `<meta name="twitter:image" content="${claimThumbnail}"/>`;
@ -165,33 +184,28 @@ function buildClaimOgMetadata(uri, claim, overrideOptions = {}) {
head += `<meta name="twitter:url" content="${URL}/${claim.name}:${claim.claim_id}"/>`; 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}"/>`; head += `<link rel="canonical" content="${SITE_CANONICAL_URL || URL}/${claim.name}:${claim.claim_id}"/>`;
if ( if (mediaType && (mediaType.startsWith('video/') || mediaType.startsWith('audio/'))) {
claim.source_media_type &&
(claim.source_media_type.startsWith('video/') || claim.source_media_type.startsWith('audio/'))
) {
const videoUrl = generateEmbedUrl(claim.name, claim.claim_id); const videoUrl = generateEmbedUrl(claim.name, claim.claim_id);
head += `<meta property="og:video" content="${videoUrl}" />`; head += `<meta property="og:video" content="${videoUrl}" />`;
head += `<meta property="og:video:secure_url" content="${videoUrl}" />`; head += `<meta property="og:video:secure_url" content="${videoUrl}" />`;
head += `<meta property="og:video:type" content="${claim.source_media_type}" />`; head += `<meta property="og:video:type" content="${mediaType}" />`;
if (claim.channel) { if (channel) {
head += `<meta name="og:video:series" content="${claim.channel}"/>`; head += `<meta name="og:video:series" content="${channel}"/>`;
} }
head += `<meta name="twitter:card" content="player"/>`; head += `<meta name="twitter:card" content="player"/>`;
head += `<meta name="twitter:player" content="${videoUrl}" />`; head += `<meta name="twitter:player" content="${videoUrl}" />`;
if (claim.release_time) { if (creationTimestamp) {
var release = new Date(claim.release_time * 1000).toISOString(); var release = new Date(creationTimestamp * 1000).toISOString();
head += `<meta property="og:video:release_date" content="${release}"/>`; head += `<meta property="og:video:release_date" content="${release}"/>`;
} }
if (claim.duration) { if (mediaDuration) {
head += `<meta property="og:video:duration" content="${claim.duration}"/>`; head += `<meta property="og:video:duration" content="${mediaDuration}"/>`;
} else if (claim.audio_duration) {
head += `<meta property="og:video:duration" content="${claim.audio_duration}"/>`;
} }
if (claim.frame_width && claim.frame_height) { if (media && media.width && media.height) {
head += `<meta property="og:video:width" content="${claim.frame_width}"/>`; head += `<meta property="og:video:width" content="${media.width}"/>`;
head += `<meta property="og:video:height" content="${claim.frame_height}"/>`; head += `<meta property="og:video:height" content="${media.height}"/>`;
head += `<meta name="twitter:player:width" content="${claim.frame_width}">`; head += `<meta name="twitter:player:width" content="${media.width}">`;
head += `<meta name="twitter:player:height" content="${claim.frame_height}">`; head += `<meta name="twitter:player:height" content="${media.height}">`;
} }
} else { } else {
head += `<meta name="twitter:card" content="summary_large_image"/>`; head += `<meta name="twitter:card" content="summary_large_image"/>`;
@ -200,19 +214,27 @@ function buildClaimOgMetadata(uri, claim, overrideOptions = {}) {
return head; return head;
} }
function buildGoogleVideoMetadata(claimUri, claim) { function buildGoogleVideoMetadata(uri, claim) {
if (!claim.source_media_type || !claim.source_media_type.startsWith('video/')) { const { claimName } = parseURI(uri);
const { meta, value } = claim;
const media = value && (value.video || value.audio || value.image);
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 creationTimestamp = meta && (meta.creation_timestamp || 0);
const claimTitle = escapeHtmlProperty((value && value.title) || claimName);
const claimDescription =
value && value.description && value.description.length > 0
? escapeHtmlProperty(truncateDescription(value.description))
: `View ${claimTitle} on ${SITE_NAME}`;
if (!mediaType || !mediaType.startsWith('video/')) {
return ''; return '';
} }
const { claimName } = parseURI(claimUri); const claimThumbnail = escapeHtmlProperty(thumbnail) || OG_IMAGE_URL || `${URL}/public/v2-og.png`;
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;
// https://developers.google.com/search/docs/data-types/video // https://developers.google.com/search/docs/data-types/video
const googleVideoMetadata = { const googleVideoMetadata = {
@ -222,9 +244,9 @@ function buildGoogleVideoMetadata(claimUri, claim) {
name: `${claimTitle}`, name: `${claimTitle}`,
description: `${removeMd(claimDescription)}`, description: `${removeMd(claimDescription)}`,
thumbnailUrl: `${claimThumbnail}`, thumbnailUrl: `${claimThumbnail}`,
uploadDate: `${new Date(releaseTime * 1000).toISOString()}`, uploadDate: `${new Date(creationTimestamp * 1000).toISOString()}`,
// --- Recommended --- // --- 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), contentUrl: generateDirectUrl(claim.name, claim.claim_id),
embedUrl: generateEmbedUrl(claim.name, claim.claim_id), embedUrl: generateEmbedUrl(claim.name, claim.claim_id),
}; };
@ -242,24 +264,25 @@ function buildGoogleVideoMetadata(claimUri, claim) {
); );
} }
async function getClaimFromChainqueryOrRedirect(ctx, url, ignoreRedirect = false) { async function resolveClaimOrRedirect(ctx, url, ignoreRedirect = false) {
let claim;
const { isChannel, streamName, channelName, channelClaimId, streamClaimId } = parseURI(url); const { isChannel, streamName, channelName, channelClaimId, streamClaimId } = parseURI(url);
const claimName = isChannel ? '@' + channelName : streamName; const claimName = isChannel ? '@' + channelName : streamName;
const claimId = isChannel ? channelClaimId : streamClaimId; const claimId = isChannel ? channelClaimId : streamClaimId;
try {
const rows = await getClaim(claimName, claimId, channelName, channelClaimId); const url = `lbry://${claimName}:${claimId}`;
if (rows && rows.length) { const response = await Lbry.resolve({ urls: [url] });
const claim = rows[0]; if (response && response[url] && !response[url].error) {
claim = response && response[url];
if (claim.reposted_name && claim.reposted_claim_id && !ignoreRedirect) { if (claim.reposted_claim) {
ctx.redirect(`/${claim.reposted_name}:${claim.reposted_claim_id}`); if (claim.reposted_claim.name && claim.reposted_claim.claim_id && !ignoreRedirect) {
ctx.redirect(`/${claim.reposted_claim.name}:${claim.reposted_claim.claim_id}`);
return; return;
} }
return claim;
} }
}
return undefined; } catch {}
return claim;
} }
let html; let html;
@ -283,7 +306,7 @@ async function getHtml(ctx) {
try { try {
parseURI(inviteChannelUrl); parseURI(inviteChannelUrl);
const claim = await getClaimFromChainqueryOrRedirect(ctx, inviteChannelUrl); const claim = await resolveClaimOrRedirect(ctx, inviteChannelUrl);
const invitePageMetadata = buildClaimOgMetadata(inviteChannelUrl, claim, { const invitePageMetadata = buildClaimOgMetadata(inviteChannelUrl, claim, {
title: `Join ${claim.name} on ${SITE_NAME}`, title: `Join ${claim.name} on ${SITE_NAME}`,
description: `Join ${claim.name} on ${SITE_NAME}, a content wonderland owned by everyone (and no one).`, description: `Join ${claim.name} on ${SITE_NAME}, a content wonderland owned by everyone (and no one).`,
@ -303,7 +326,7 @@ async function getHtml(ctx) {
if (requestPath.includes(embedPath)) { if (requestPath.includes(embedPath)) {
const claimUri = requestPath.replace(embedPath, '').replace(/:/g, '#'); const claimUri = requestPath.replace(embedPath, '').replace(/:/g, '#');
const claim = await getClaimFromChainqueryOrRedirect(ctx, claimUri, true); const claim = await resolveClaimOrRedirect(ctx, claimUri, true);
if (claim) { if (claim) {
const ogMetadata = buildClaimOgMetadata(claimUri, claim); const ogMetadata = buildClaimOgMetadata(claimUri, claim);
@ -326,7 +349,7 @@ async function getHtml(ctx) {
if (!requestPath.includes('$')) { if (!requestPath.includes('$')) {
const claimUri = requestPath.slice(1).replace(/:/g, '#'); const claimUri = requestPath.slice(1).replace(/:/g, '#');
const claim = await getClaimFromChainqueryOrRedirect(ctx, claimUri); const claim = await resolveClaimOrRedirect(ctx, claimUri);
if (claim) { if (claim) {
const ogMetadata = buildClaimOgMetadata(claimUri, claim); const ogMetadata = buildClaimOgMetadata(claimUri, claim);