Merge pull request #886 from lbryio/fix-oembed-data

Fix oEmbed data, remove bad og: data

client/src/utils/createAssetMetaTags.js

@@ -4,22 +4,15 @@ import createMetaTagsArray from './createMetaTagsArray';
 import createCanonicalLink from '@globalutils/createCanonicalLink';
 
 const {
-  details: {
-    host,
-    title: siteTitle,
-    twitter,
-  },
-  assetDefaults: {
-    description: defaultDescription,
-    thumbnail: defaultThumbnail,
-  },
+  details: { host, title: siteTitle, twitter },
+  assetDefaults: { description: defaultDescription, thumbnail: defaultThumbnail },
 } = siteConfig;
 
 const VIDEO = 'VIDEO';
 const IMAGE = 'IMAGE';
 const GIF = 'GIF';
 
-const determineMediaType = (contentType) => {
+const determineMediaType = contentType => {
   switch (contentType) {
     case 'image/jpg':
     case 'image/jpeg':
@@ -35,10 +28,12 @@ const determineMediaType = (contentType) => {
   }
 };
 
-const createAssetMetaTags = (asset) => {
+const createAssetMetaTags = asset => {
   const { claimData } = asset;
   const { contentType } = claimData;
-  const canonicalLink = createCanonicalLink({ asset: { ...asset.claimData, shortId: asset.shortId }});
+  const canonicalLink = createCanonicalLink({
+    asset: { ...asset.claimData, shortId: asset.shortId },
+  });
   const showUrl = `${host}${canonicalLink}`;
   const serveUrl = `${showUrl}.${claimData.fileExt}`;
 
@@ -46,16 +41,19 @@ const createAssetMetaTags = (asset) => {
   const ogDescription = claimData.description || defaultDescription;
   const ogThumbnailContentType = determineContentTypeFromExtension(claimData.thumbnail);
   const ogThumbnail = claimData.thumbnail || defaultThumbnail;
+
+  console.log('asset.claimData', asset.claimData);
+
   // {property: 'og:title'] = ogTitle},
   const metaTags = {
-    'og:title'           : ogTitle,
-    'twitter:title'      : ogTitle,
-    'og:description'     : ogDescription,
+    'og:title': ogTitle,
+    'twitter:title': ogTitle,
+    'og:description': ogDescription,
     'twitter:description': ogDescription,
-    'og:url'             : showUrl,
-    'og:site_name'       : siteTitle,
-    'twitter:site'       : twitter,
-    'fb:app_id'          : '1371961932852223',
+    'og:url': showUrl,
+    'og:site_name': siteTitle,
+    'twitter:site': twitter,
+    'fb:app_id': '1371961932852223',
   };
   if (determineMediaType(contentType) === VIDEO) {
     const videoEmbedUrl = `${host}/video-embed${canonicalLink}`;
@@ -85,8 +83,6 @@ const createAssetMetaTags = (asset) => {
     // image tags
     metaTags['og:image'] = serveUrl;
     metaTags['og:image'] = serveUrl;
-    metaTags['og:image:width'] = 600;
-    metaTags['og:image:height'] = 315;
     metaTags['og:image:type'] = contentType;
     metaTags['twitter:image'] = serveUrl;
   }

package-lock.json

@@ -5620,12 +5620,14 @@
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -5640,17 +5642,20 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -5767,7 +5772,8 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -5779,6 +5785,7 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -5793,6 +5800,7 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -5800,12 +5808,14 @@
         "minimist": {
           "version": "0.0.8",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "minipass": {
           "version": "2.2.4",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.1",
             "yallist": "^3.0.0"
@@ -5824,6 +5834,7 @@
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -5904,7 +5915,8 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -5916,6 +5928,7 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -6037,6 +6050,7 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",

server/controllers/api/oEmbed/getOEmbedDataForAsset.js

@@ -3,19 +3,16 @@ const db = require('../../../models');
 const getClaimId = require('../../utils/getClaimId');
 
 const {
-  details: {
-    host,
-    title: siteTitle,
-  },
+  details: { host, title: siteTitle },
 } = require('@config/siteConfig');
 
 const getOEmbedDataForAsset = (channelName, channelClaimId, claimName, claimId) => {
   let fileData, claimData;
   let data = {
-    version      : '1.0',
+    version: '1.0',
     provider_name: siteTitle,
-    provider_url : host,
-    cache_age    : 86400, // one day in seconds
+    provider_url: host,
+    cache_age: 86400, // one day in seconds
   };
 
   return getClaimId(channelName, channelClaimId, claimName, claimId)
@@ -23,7 +20,7 @@ const getOEmbedDataForAsset = (channelName, channelClaimId, claimName, claimId)
       claimId = fullClaimId;
       return db.Claim.findOne({
         where: {
-          name   : claimName,
+          name: claimName,
           claimId: fullClaimId,
         },
       });
@@ -43,19 +40,23 @@ const getOEmbedDataForAsset = (channelName, channelClaimId, claimName, claimId)
     .then(fileRecord => {
       fileData = fileRecord.dataValues;
       logger.debug('file data:', fileData);
-      const serveUrl = `${host}/${fileData.claimId}/${fileData.name}.${fileData.fileType.substring(fileData.fileType.indexOf('/') + 1)}`;
+      const serveUrl = `${host}/${fileData.claimId}/${fileData.name}.${fileData.fileType.substring(
+        fileData.fileType.indexOf('/') + 1
+      )}`;
       // set the resource type
       if (fileData.fileType === 'video/mp4') {
         data['type'] = 'video';
-        data['html'] = `<video width="100%" controls poster="${claimData.thumbnail}" src="${serveUrl}"/></video>`;
+        data['html'] = `<video width="100%" controls poster="${
+          claimData.thumbnail
+        }" src="${serveUrl}"/></video>`;
       } else {
         data['type'] = 'picture';
         data['url'] = serveUrl;
       }
       // get the data
       data['title'] = claimData.title;
-      data['width'] = fileData.width || 600;
-      data['height'] = fileData.height || 400;
+      data['width'] = fileData.fileWidth || 600;
+      data['height'] = fileData.fileHeight || 400;
       data['author_name'] = siteTitle;
       data['author_url'] = host;
     })