Merge branch 'dev'

.lintstagedrc.json

@@ -1,7 +1,9 @@
 {
   "linters": {
     "ui/**/*.{js,jsx,scss,json}": ["prettier --write", "git add"],
-    "lbrytv/component/*.{js,jsx,scss,json}": ["prettier --write", "git add"],
+    "lbrytv/**/*.{js,jsx,scss,json}": ["prettier --write", "git add"],
-    "ui/**/*.{js,jsx}": ["eslint", "flow focus-check --color always", "git add"]
+    "ui/**/*.{js,jsx}": ["eslint", "flow focus-check --color always", "git add"],
-  }
+    "lbrytv/**/*.{js,jsx,scss,json}": ["eslint", "git add"]
+  },
+  "ignore": ["node_modules", "dist", "package-lock.json"]
 }

lbrytv/src/html.js

@@ -1,5 +1,5 @@
 const { URL } = require('../../config.js');
-const { generateStreamUrl } = require('../../ui/util/lbrytv');
+const { generateEmbedUrl } = require('../../ui/util/lbrytv');
 const PAGES = require('../../ui/constants/pages');
 const { getClaim } = require('./chainquery');
 const { parseURI } = require('lbry-redux');
@@ -32,7 +32,7 @@ function escapeHtmlProperty(property) {
 
 //
 // Normal metadata with option to override certain values
-// 
+//
 function buildOgMetadata(overrideOptions = {}) {
   const { title, description } = overrideOptions;
   const head =
@@ -53,10 +53,10 @@ function buildOgMetadata(overrideOptions = {}) {
 //
 // 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 { claimName } = parseURI(uri);
   const claimTitle = escapeHtmlProperty(claim.title ? claim.title : claimName);
   const claimDescription =
     claim.description && claim.description.length > 0
@@ -64,8 +64,6 @@ function buildClaimOgMetadata(uri, claim, overrideOptions = {}) {
       : `Watch ${claimTitle} on LBRY.tv`;
   const claimLanguage = escapeHtmlProperty(claim.language) || 'en_US';
   const claimThumbnail = escapeHtmlProperty(claim.thumbnail_url) || `${URL}/og.png`;
-  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;
@@ -79,7 +77,7 @@ function buildClaimOgMetadata(uri, claim, overrideOptions = {}) {
   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="${description}"/>`;
   head += `<meta property="og:image" content="${claimThumbnail}"/>`;
@@ -91,14 +89,20 @@ function buildClaimOgMetadata(uri, claim, overrideOptions = {}) {
   head += `<meta property="og:url" content="${URL}/${claim.name}:${claim.claim_id}"/>`;
 
   if (claim.source_media_type && claim.source_media_type.startsWith('video/')) {
-    const videoUrl = generateStreamUrl(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:secure_url" content="${videoUrl}" />`;
     head += `<meta property="og:video:type" content="${claim.source_media_type}" />`;
+    head += `<meta name="twitter:card" content="player"/>`;
+    head += `<meta name="twitter:player" content="${videoUrl}" />`;
     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}">`;
     }
+  } else {
+    head += `<meta name="twitter:card" content="summary_large_image"/>`;
   }
 
   return head;
@@ -126,6 +130,7 @@ module.exports.getHtml = async function getHtml(ctx) {
   }
 
   const invitePath = `/$/${PAGES.INVITE}/`;
+  const embedPath = `/$/${PAGES.EMBED}/`;
 
   if (path.includes(invitePath)) {
     const inviteChannel = path.slice(invitePath.length).replace(/:/g, '#');
@@ -151,6 +156,18 @@ module.exports.getHtml = async function getHtml(ctx) {
     }
   }
 
+  if (path.includes(embedPath)) {
+    const claimUri = path.replace(embedPath, '').replace(/:/g, '#');
+    const claim = await getClaimFromChainquery(claimUri);
+
+    if (claim) {
+      const ogMetadata = buildClaimOgMetadata(claimUri, claim);
+      return insertToHead(html, ogMetadata);
+    }
+
+    return insertToHead(html);
+  }
+
   if (!path.includes('$')) {
     const claimUri = path.slice(1).replace(/:/g, '#');
     const claim = await getClaimFromChainquery(claimUri);