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

Update thumbnail cards URL (#1748)

Browse source 
And function name - was confusing that we had 2 with different paths.

Use 1280x720 to improve caching (used on mobile/tablets). There's no real spec for size.
This commit is contained in:
Thomas Zarebczan 2022-06-23 18:09:48 -04:00 committed by GitHub
parent 305673999b
commit 017df02816
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 18 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
.env.defaults
View file

@ -21,7 +21,7 @@ RECSYS_FYP_ENDPOINT=https://recsys.odysee.tv/v1/u
# -Disable boost due to instability: # -Disable boost due to instability:
# IMAGE_PROXY_URL=https://boost.vanwanet.com/index.php # IMAGE_PROXY_URL=https://boost.vanwanet.com/index.php
THUMBNAIL_CDN_URL=https://thumbnails.odycdn.com/optimize/ THUMBNAIL_CDN_URL=https://thumbnails.odycdn.com/optimize/
THUMBNAIL_CARDS_CDN_URL=https://cards.odycdn.com/ THUMBNAIL_CARDS_CDN_URL=https://thumbnails.odycdn.com/optimize/s:1280:720/quality:85/plain/
LOCALE_API=https://api.odysee.com/legal/requirements LOCALE_API=https://api.odysee.com/legal/requirements
THUMBNAIL_HEIGHT=220 THUMBNAIL_HEIGHT=220
THUMBNAIL_HEIGHT_POSTER=720 THUMBNAIL_HEIGHT_POSTER=720

9
ui/util/web.js
View file

@ -50,18 +50,17 @@ function generateNewestUrl(channelName, newestType) {
return `${URL}/$/${newestType}/${channelName}`; return `${URL}/$/${newestType}/${channelName}`;
} }
function getThumbnailCdnUrl(url) { function getThumbnailCardCdnUrl(url) {
if ( if (
!THUMBNAIL_CARDS_CDN_URL || !THUMBNAIL_CARDS_CDN_URL ||
!url || !url ||
(url && (url.includes('https://twitter-card') || url.includes('https://cards.odysee.com'))) (url && (url.includes('https://twitter-card') || url.includes('https://cards.odycdn.com')))
) { ) {
return url; return url;
} }
if (url && !url.startsWith('data:image')) { if (url && !url.startsWith('data:image')) {
const encodedURL = Buffer.from(url).toString('base64'); return `${THUMBNAIL_CARDS_CDN_URL}${url}`;
return `${THUMBNAIL_CARDS_CDN_URL}${encodedURL}.jpg`;
} }
} }
@ -101,7 +100,7 @@ module.exports = {
generateEmbedUrl, generateEmbedUrl,
generateEmbedUrlEncoded, generateEmbedUrlEncoded,
getParameterByName, getParameterByName,
getThumbnailCdnUrl, getThumbnailCardCdnUrl,
escapeHtmlProperty, escapeHtmlProperty,
unscapeHtmlProperty, unscapeHtmlProperty,
generateNewestUrl, generateNewestUrl,

12
web/src/html.js
View file

@ -13,7 +13,7 @@ const {
const { const {
generateEmbedUrl, generateEmbedUrl,
getParameterByName, getParameterByName,
getThumbnailCdnUrl, getThumbnailCardCdnUrl,
escapeHtmlProperty, escapeHtmlProperty,
unscapeHtmlProperty, unscapeHtmlProperty,
} = require('../../ui/util/web'); } = require('../../ui/util/web');
@ -98,7 +98,7 @@ function buildOgMetadata(overrideOptions = {}) {
`<meta property="og:site_name" content="${SITE_NAME || SITE_TITLE}"/>\n` + `<meta property="og:site_name" content="${SITE_NAME || SITE_TITLE}"/>\n` +
`<meta property="og:description" content="${cleanDescription}" />\n` + `<meta property="og:description" content="${cleanDescription}" />\n` +
`<meta property="og:image" content="${ `<meta property="og:image" content="${
getThumbnailCdnUrl(image) || getThumbnailCdnUrl(OG_IMAGE_URL) || `${URL}/public/v2-og.png` getThumbnailCardCdnUrl(image) || getThumbnailCardCdnUrl(OG_IMAGE_URL) || `${URL}/public/v2-og.png`
}" />\n` + }" />\n` +
`<meta property="og:type" content="website"/>\n` + `<meta property="og:type" content="website"/>\n` +
'<meta name="twitter:card" content="summary_large_image"/>\n' + '<meta name="twitter:card" content="summary_large_image"/>\n' +
@ -107,7 +107,7 @@ function buildOgMetadata(overrideOptions = {}) {
}" />\n` + }" />\n` +
`<meta name="twitter:description" content="${cleanDescription}" />\n` + `<meta name="twitter:description" content="${cleanDescription}" />\n` +
`<meta name="twitter:image" content="${ `<meta name="twitter:image" content="${
getThumbnailCdnUrl(image) || getThumbnailCdnUrl(OG_IMAGE_URL) || `${URL}/public/v2-og.png` getThumbnailCardCdnUrl(image) || getThumbnailCardCdnUrl(OG_IMAGE_URL) || `${URL}/public/v2-og.png`
}"/>\n` + }"/>\n` +
'<meta property="fb:app_id" content="1673146449633983" />\n' + '<meta property="fb:app_id" content="1673146449633983" />\n' +
`<link rel="canonical" content="${SITE_CANONICAL_URL || URL}"/>` + `<link rel="canonical" content="${SITE_CANONICAL_URL || URL}"/>` +
@ -158,7 +158,7 @@ async function buildClaimOgMetadata(uri, claim, overrideOptions = {}, referrerQu
const media = value && (value.video || value.audio || value.image); const media = value && (value.video || value.audio || value.image);
const source = value && value.source; const source = value && value.source;
const channel = signing_channel && signing_channel.name; const channel = signing_channel && signing_channel.name;
let thumbnail = value && value.thumbnail && value.thumbnail.url && getThumbnailCdnUrl(value.thumbnail.url); let thumbnail = value && value.thumbnail && value.thumbnail.url && getThumbnailCardCdnUrl(value.thumbnail.url);
const mediaType = source && source.media_type; const mediaType = source && source.media_type;
const mediaDuration = media && media.duration; const mediaDuration = media && media.duration;
const claimTitle = escapeHtmlProperty((value && value.title) || claimName); const claimTitle = escapeHtmlProperty((value && value.title) || claimName);
@ -184,8 +184,8 @@ async function buildClaimOgMetadata(uri, claim, overrideOptions = {}, referrerQu
const claimThumbnail = const claimThumbnail =
escapeHtmlProperty(thumbnail) || escapeHtmlProperty(thumbnail) ||
getThumbnailCdnUrl(imageThumbnail) || getThumbnailCardCdnUrl(imageThumbnail) ||
getThumbnailCdnUrl(OG_IMAGE_URL) || getThumbnailCardCdnUrl(OG_IMAGE_URL) ||
`${URL}/public/v2-og.png`; `${URL}/public/v2-og.png`;
const getOgType = (streamType, liveStream) => { const getOgType = (streamType, liveStream) => {

8
web/src/metadata/googleVideo.js
View file

@ -5,7 +5,7 @@ const removeMd = require('remove-markdown');
const { generateContentUrl } = require('../fetchStreamUrl'); const { generateContentUrl } = require('../fetchStreamUrl');
const { parseURI } = require('../lbryURI'); const { parseURI } = require('../lbryURI');
const { OG_IMAGE_URL, SITE_NAME, URL } = require('../../../config.js'); const { OG_IMAGE_URL, SITE_NAME, URL } = require('../../../config.js');
const { generateEmbedUrl, getThumbnailCdnUrl, escapeHtmlProperty } = require('../../../ui/util/web'); const { generateEmbedUrl, getThumbnailCardCdnUrl, escapeHtmlProperty } = require('../../../ui/util/web');
// **************************************************************************** // ****************************************************************************
// Utils // Utils
@ -81,7 +81,7 @@ async function buildGoogleVideoMetadata(uri, claim) {
const { meta, value } = claim; const { meta, value } = claim;
const media = value && value.video; const media = value && value.video;
const source = value && value.source; const source = value && value.source;
let thumbnail = value && value.thumbnail && value.thumbnail.url && getThumbnailCdnUrl(value.thumbnail.url); let thumbnail = value && value.thumbnail && value.thumbnail.url && getThumbnailCardCdnUrl(value.thumbnail.url);
const mediaType = source && source.media_type; const mediaType = source && source.media_type;
const mediaDuration = media && media.duration; const mediaDuration = media && media.duration;
const claimTitle = escapeHtmlProperty((value && value.title) || claimName); const claimTitle = escapeHtmlProperty((value && value.title) || claimName);
@ -96,7 +96,9 @@ async function buildGoogleVideoMetadata(uri, claim) {
return ''; return '';
} }
const claimThumbnail = escapeHtmlProperty(thumbnail) || getThumbnailCdnUrl(OG_IMAGE_URL) || `${URL}/public/v2-og.png`; const claimThumbnail =
escapeHtmlProperty(thumbnail) || getThumbnailCardCdnUrl(OG_IMAGE_URL) || `${URL}/public/v2-og.png`;
const claimStreamUrl = generateContentUrl(claim); const claimStreamUrl = generateContentUrl(claim);
// https://developers.google.com/search/docs/data-types/video // https://developers.google.com/search/docs/data-types/video

4
web/src/oEmbed.js
View file

@ -4,7 +4,7 @@ const {
generateEmbedIframeData, generateEmbedIframeData,
generateEmbedUrlEncoded, generateEmbedUrlEncoded,
getParameterByName, getParameterByName,
getThumbnailCdnUrl, getThumbnailCardCdnUrl,
escapeHtmlProperty, escapeHtmlProperty,
} = require('../../ui/util/web'); } = require('../../ui/util/web');
const { lbryProxy: Lbry } = require('../lbry'); const { lbryProxy: Lbry } = require('../lbry');
@ -50,7 +50,7 @@ function generateOEmbedData(claim, embedlyReferrer, timestamp, referral) {
const authorName = authorClaim ? authorClaim.value.title || authorClaim.name : 'Anonymous'; const authorName = authorClaim ? authorClaim.value.title || authorClaim.name : 'Anonymous';
const authorUrlPath = authorClaim && authorClaim.canonical_url.replace('lbry://', '').replace('#', ':'); const authorUrlPath = authorClaim && authorClaim.canonical_url.replace('lbry://', '').replace('#', ':');
const authorUrl = authorClaim ? `${URL}/${authorUrlPath}` : null; const authorUrl = authorClaim ? `${URL}/${authorUrlPath}` : null;
const thumbnailUrl = value && value.thumbnail && value.thumbnail.url && getThumbnailCdnUrl(value.thumbnail.url); const thumbnailUrl = value && value.thumbnail && value.thumbnail.url && getThumbnailCardCdnUrl(value.thumbnail.url);
const embedUrl = generateEmbedUrlEncoded(claim.name, claim.claim_id, timestamp, referral); const embedUrl = generateEmbedUrlEncoded(claim.name, claim.claim_id, timestamp, referral);
const videoUrl = const videoUrl =