improve how we add metadata _slightly_ and add custom metadata for invite links

lbrytv/src/html.js

@@ -1,5 +1,6 @@
 const { URL } = require('../../config.js');
 const { generateStreamUrl } = require('../../ui/util/lbrytv');
+const PAGES = require('../../ui/constants/pages');
 const { getClaim } = require('./chainquery');
 const { parseURI } = require('lbry-redux');
 const fs = require('fs');
@@ -7,19 +8,11 @@ const path = require('path');
 
 let html = fs.readFileSync(path.join(__dirname, '/../dist/index.html'), 'utf8');
 
-const defaultHead =
+function insertToHead(fullHtml, htmlToInsert) {
-  '<title>lbry.tv</title>\n' +
+  return fullHtml.replace(
-  `<meta property="og:url" content="${URL}" />\n` +
+    /<!-- VARIABLE_HEAD_BEGIN -->.*<!-- VARIABLE_HEAD_END -->/s,
-  '<meta property="og:title" content="lbry.tv" />\n' +
+    htmlToInsert || buildOgMetadata()
-  '<meta property="og:site_name" content="lbry.tv | Content Freedom"/>\n' +
+  );
-  '<meta property="og:description" content="Meet LBRY, an open, free, and community-controlled content wonderland." />\n' +
-  `<meta property="og:image" content="${URL}/og.png" />\n` +
-  '<meta name="twitter:card" content="summary_large_image"/>\n' +
-  `<meta name="twitter:image" content="${URL}/og.png"/>\n` +
-  '<meta property="fb:app_id" content="1673146449633983" />';
-
-function insertToHead(fullHtml, htmlToInsert = defaultHead) {
-  return fullHtml.replace(/<!-- VARIABLE_HEAD_BEGIN -->.*<!-- VARIABLE_HEAD_END -->/s, htmlToInsert);
 }
 
 function truncateDescription(description) {
@@ -37,33 +30,63 @@ function escapeHtmlProperty(property) {
     : '';
 }
 
-function buildOgMetadata(uri, claim) {
+//
+// Normal metadata with option to override certain values
+// 
+function buildOgMetadata(overrideOptions = {}) {
+  const { title, description } = overrideOptions;
+  const head =
+    '<title>lbry.tv</title>\n' +
+    `<meta property="og:url" content="${URL}" />\n` +
+    `<meta property="og:title" content="${title || 'lbry.tv'}" />\n` +
+    '<meta property="og:site_name" content="lbry.tv | Content Freedom"/>\n' +
+    `<meta property="og:description" content="${description ||
+      'Meet LBRY, an open, free, and community-controlled content wonderland.'}" />\n` +
+    `<meta property="og:image" content="${URL}/og.png" />\n` +
+    '<meta name="twitter:card" content="summary_large_image"/>\n' +
+    `<meta name="twitter:image" content="${URL}/og.png"/>\n` +
+    '<meta property="fb:app_id" content="1673146449633983" />';
+
+  return head;
+}
+
+//
+// Metadata used for urls that need claim information
+// Also has option to override defaults
+// 
+function buildClaimOgMetadata(uri, claim, overrideOptions = {}) {
+  // Initial setup for claim based og metadata
   const { isChannel, claimName } = parseURI(uri);
-  const title = escapeHtmlProperty(claim.title ? claim.title : claimName);
+  const claimTitle = escapeHtmlProperty(claim.title ? claim.title : claimName);
   const claimDescription =
     claim.description && claim.description.length > 0
       ? escapeHtmlProperty(truncateDescription(claim.description))
-      : `Watch ${title} on LBRY.tv`;
+      : `Watch ${claimTitle} on LBRY.tv`;
   const claimLanguage = escapeHtmlProperty(claim.language) || 'en_US';
   const claimThumbnail = escapeHtmlProperty(claim.thumbnail_url) || `${URL}/og.png`;
-  const claimTitle = claim.channel && !isChannel ? `${title} from ${claim.channel} on LBRY.tv` : `${title} on LBRY.tv`;
+  const defaultClaimTitle =
+    claim.channel && !isChannel ? `${claimTitle} from ${claim.channel} on LBRY.tv` : `${claimTitle} on LBRY.tv`;
+
+  // Allow for ovverriding default claim based og metadata
+  const title = overrideOptions.title || claimTitle;
+  const description = overrideOptions.description || claimDescription;
 
   let head = '';
 
   head += '<meta charset="utf8"/>';
-  head += `<title>${claimTitle}</title>`;
+  head += `<title>${title}</title>`;
-  head += `<meta name="description" content="${claimDescription}"/>`;
+  head += `<meta name="description" content="${description}"/>`;
   if (claim.tags) {
     head += `<meta name="keywords" content="${claim.tags.toString()}"/>`;
   }
   head += `<meta name="twitter:card" content="summary_large_image"/>`;
   head += `<meta name="twitter:image" content="${claimThumbnail}"/>`;
-  head += `<meta property="og:description" content="${claimDescription}"/>`;
+  head += `<meta property="og:description" content="${description}"/>`;
   head += `<meta property="og:image" content="${claimThumbnail}"/>`;
   head += `<meta property="og:locale" content="${claimLanguage}"/>`;
   head += `<meta property="og:site_name" content="LBRY.tv"/>`;
   head += `<meta property="og:type" content="website"/>`;
-  head += `<meta property="og:title" content="${claimTitle}"/>`;
+  head += `<meta property="og:title" content="${title}"/>`;
   // below should be canonical_url, but not provided by chainquery yet
   head += `<meta property="og:url" content="${URL}/${claim.name}:${claim.claim_id}"/>`;
 
@@ -81,24 +104,62 @@ function buildOgMetadata(uri, claim) {
   return head;
 }
 
-module.exports.getHtml = async function getHtml(ctx) {
+async function getClaimFromChainquery(url) {
-  const path = ctx.path;
+  const { isChannel, streamName, channelName, channelClaimId, streamClaimId } = parseURI(url);
-
-  if (path.length === 0 || path[1] === '$') {
-    return insertToHead(html);
-  }
-
-  const claimUri = path.slice(1).replace(/:/g, '#');
-  const { isChannel, streamName, channelName, channelClaimId, streamClaimId } = parseURI(claimUri);
   const claimName = isChannel ? '@' + channelName : streamName;
   const claimId = isChannel ? channelClaimId : streamClaimId;
 
   const rows = await getClaim(claimName, claimId, channelName, channelClaimId);
-  if (!rows || !rows.length) {
+  if (rows && rows.length) {
+    const claim = rows[0];
+    return claim;
+  }
+
+  return undefined;
+}
+
+module.exports.getHtml = async function getHtml(ctx) {
+  const path = ctx.path;
+
+  if (path.length === 0) {
     return insertToHead(html);
   }
 
-  const claim = rows[0];
+  const invitePath = `/$/${PAGES.INVITE}/`;
-  const ogMetadata = buildOgMetadata(claimUri, claim);
+
+  if (path.includes(invitePath)) {
+    const inviteChannel = path.slice(invitePath.length).replace(/:/g, '#');
+    const inviteChannelUrl = `lbry://${inviteChannel}`;
+
+    try {
+      parseURI(inviteChannelUrl);
+      const claim = await getClaimFromChainquery(inviteChannelUrl);
+      const invitePageMetadata = buildClaimOgMetadata(inviteChannelUrl, claim, {
+        title: `Join ${claim.name} on LBRY`,
+        description: `Join ${claim.name} on LBRY, a content wonderland owned by everyone (and no one).`,
+      });
+
+      return insertToHead(html, invitePageMetadata);
+    } catch (e) {
+      // Something about the invite channel is messed up
+      // Enter generic invite metadata
+      const invitePageMetadata = buildOgMetadata({
+        title: `Join a friend on LBRY`,
+        description: `Join a friend on LBRY, a content wonderland owned by everyone (and no one).`,
+      });
+      return insertToHead(html, invitePageMetadata);
+    }
+  }
+
+  if (!path.includes('$')) {
+    const claimUri = path.slice(1).replace(/:/g, '#');
+    const claim = await getClaimFromChainquery(claimUri);
+
+    if (claim) {
+      const ogMetadata = buildClaimOgMetadata(claimUri, claim);
       return insertToHead(html, ogMetadata);
+    }
+  }
+
+  return insertToHead(html);
 };

package.json

@@ -68,7 +68,7 @@
     "@babel/register": "^7.0.0",
     "@exponent/electron-cookies": "^2.0.0",
     "@hot-loader/react-dom": "^16.8",
-    "@lbry/components": "^3.0.7",
+    "@lbry/components": "^3.0.8",
     "@reach/menu-button": "^0.1.18",
     "@reach/rect": "^0.2.1",
     "@reach/tabs": "^0.1.5",

static/index-web.html

@@ -6,12 +6,12 @@
     <script src="/public/ui.js" async></script>
     <link rel="icon" type="image/png" href="/public/favicon.png" />
 
-    <link rel="preload" href="public/font/v1/300.woff" as="font" type="font/woff" />
+    <link rel="preload" href="/public/font/v1/300.woff" as="font" type="font/woff" />
-    <link rel="preload" href="public/font/v1/300i.woff" as="font" type="font/woff" />
+    <link rel="preload" href="/public/font/v1/300i.woff" as="font" type="font/woff" />
-    <link rel="preload" href="public/font/v1/400.woff" as="font" type="font/woff" />
+    <link rel="preload" href="/public/font/v1/400.woff" as="font" type="font/woff" />
-    <link rel="preload" href="public/font/v1/400i.woff" as="font" type="font/woff" />
+    <link rel="preload" href="/public/font/v1/400i.woff" as="font" type="font/woff" />
-    <link rel="preload" href="public/font/v1/700.woff" as="font" type="font/woff" />
+    <link rel="preload" href="/public/font/v1/700.woff" as="font" type="font/woff" />
-    <link rel="preload" href="public/font/v1/700i.woff" as="font" type="font/woff" />
+    <link rel="preload" href="/public/font/v1/700i.woff" as="font" type="font/woff" />
 
     <style>
       @font-face {

ui/component/commentCreate/view.jsx

@@ -71,6 +71,7 @@ export function CommentCreate(props: Props) {
         charCount={charCount}
         onChange={handleCommentChange}
       />
+      <div className="section__actions">
         <Button
           button="primary"
           disabled={channel === CHANNEL_NEW || !commentValue.length}
@@ -78,6 +79,7 @@ export function CommentCreate(props: Props) {
           label={__('Post')}
           requiresAuth={IS_WEB}
         />
+      </div>
     </Form>
   );
 }

yarn.lock

@@ -1033,10 +1033,10 @@
     prop-types "^15.6.2"
     scheduler "^0.15.0"
 
-"@lbry/components@^3.0.7":
+"@lbry/components@^3.0.8":
-  version "3.0.7"
+  version "3.0.8"
-  resolved "https://registry.yarnpkg.com/@lbry/components/-/components-3.0.7.tgz#97bcc5a5c89dce92e88ad0e5575b18833151ec85"
+  resolved "https://registry.yarnpkg.com/@lbry/components/-/components-3.0.8.tgz#d3a5075866a74685b0f344e944c4aac1f7c6117d"
-  integrity sha512-M0uRCQQP9cBYhtln5p2qmVsL/4pBo1bVUACyWrbx+W74h729rLVPvY712nE6P+WW/H2C/Co5KH6za09z+ykhWQ==
+  integrity sha512-Of+nc8CyL4bYllacS/7GBmLmkWAKLGgWvOyzQ8+HN+HC7NOMa3Nf5pcTU9VzAbU2dscKK16N4N2xaUlNq9WyfQ==
 
 "@mapbox/hast-util-table-cell-style@^0.1.3":
   version "0.1.3"