From 7aa4539016852e4ede87b19f10c11bb0e9746be8 Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Thu, 23 Jan 2020 15:41:14 -0500
Subject: [PATCH] improve how we add metadata _slightly_ and add custom
 metadata for invite links

---
 lbrytv/src/html.js                  | 129 ++++++++++++++++++++--------
 package.json                        |   2 +-
 static/index-web.html               |  12 +--
 ui/component/commentCreate/view.jsx |  16 ++--
 yarn.lock                           |   8 +-
 5 files changed, 115 insertions(+), 52 deletions(-)

diff --git a/lbrytv/src/html.js b/lbrytv/src/html.js
index 7e5088964..adbfb927c 100644
--- a/lbrytv/src/html.js
+++ b/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 =
-  '<title>lbry.tv</title>\n' +
-  `<meta property="og:url" content="${URL}" />\n` +
-  '<meta property="og:title" content="lbry.tv" />\n' +
-  '<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 insertToHead(fullHtml, htmlToInsert) {
+  return fullHtml.replace(
+    /<!-- VARIABLE_HEAD_BEGIN -->.*<!-- VARIABLE_HEAD_END -->/s,
+    htmlToInsert || buildOgMetadata()
+  );
 }
 
 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 += `<meta name="description" content="${claimDescription}"/>`;
+  head += `<title>${title}</title>`;
+  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) {
-  const path = ctx.path;
-
-  if (path.length === 0 || path[1] === '$') {
-    return insertToHead(html);
-  }
-
-  const claimUri = path.slice(1).replace(/:/g, '#');
-  const { isChannel, streamName, channelName, channelClaimId, streamClaimId } = parseURI(claimUri);
+async function getClaimFromChainquery(url) {
+  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) {
+  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 ogMetadata = buildOgMetadata(claimUri, claim);
-  return insertToHead(html, ogMetadata);
+  const invitePath = `/$/${PAGES.INVITE}/`;
+
+  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);
 };
diff --git a/package.json b/package.json
index 8afa413cc..ebeaab8c0 100644
--- a/package.json
+++ b/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",
diff --git a/static/index-web.html b/static/index-web.html
index 6338113ff..9eb25e285 100644
--- a/static/index-web.html
+++ b/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/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/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/700i.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/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/700.woff" as="font" type="font/woff" />
+    <link rel="preload" href="/public/font/v1/700i.woff" as="font" type="font/woff" />
 
     <style>
       @font-face {
diff --git a/ui/component/commentCreate/view.jsx b/ui/component/commentCreate/view.jsx
index 5f7f6e89a..55f34f74c 100644
--- a/ui/component/commentCreate/view.jsx
+++ b/ui/component/commentCreate/view.jsx
@@ -71,13 +71,15 @@ export function CommentCreate(props: Props) {
         charCount={charCount}
         onChange={handleCommentChange}
       />
-      <Button
-        button="primary"
-        disabled={channel === CHANNEL_NEW || !commentValue.length}
-        type="submit"
-        label={__('Post')}
-        requiresAuth={IS_WEB}
-      />
+      <div className="section__actions">
+        <Button
+          button="primary"
+          disabled={channel === CHANNEL_NEW || !commentValue.length}
+          type="submit"
+          label={__('Post')}
+          requiresAuth={IS_WEB}
+        />
+      </div>
     </Form>
   );
 }
diff --git a/yarn.lock b/yarn.lock
index c29938dbe..873a7d349 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1033,10 +1033,10 @@
     prop-types "^15.6.2"
     scheduler "^0.15.0"
 
-"@lbry/components@^3.0.7":
-  version "3.0.7"
-  resolved "https://registry.yarnpkg.com/@lbry/components/-/components-3.0.7.tgz#97bcc5a5c89dce92e88ad0e5575b18833151ec85"
-  integrity sha512-M0uRCQQP9cBYhtln5p2qmVsL/4pBo1bVUACyWrbx+W74h729rLVPvY712nE6P+WW/H2C/Co5KH6za09z+ykhWQ==
+"@lbry/components@^3.0.8":
+  version "3.0.8"
+  resolved "https://registry.yarnpkg.com/@lbry/components/-/components-3.0.8.tgz#d3a5075866a74685b0f344e944c4aac1f7c6117d"
+  integrity sha512-Of+nc8CyL4bYllacS/7GBmLmkWAKLGgWvOyzQ8+HN+HC7NOMa3Nf5pcTU9VzAbU2dscKK16N4N2xaUlNq9WyfQ==
 
 "@mapbox/hast-util-table-cell-style@^0.1.3":
   version "0.1.3"