diff --git a/client/src/utils/createAssetMetaTags.js b/client/src/utils/createAssetMetaTags.js new file mode 100644 index 00000000..539e2cd3 --- /dev/null +++ b/client/src/utils/createAssetMetaTags.js @@ -0,0 +1,81 @@ +const determineContentTypeFromExtension = require('determineContentTypeFromExtension.js'); + +const VIDEO = 'VIDEO'; +const IMAGE = 'IMAGE'; +const GIF = 'GIF'; + +const determineMediaType = (contentType) => { + switch (contentType) { + case 'image/jpg': + case 'image/jpeg': + case 'image/png': + return IMAGE; + case 'image/gif': + return GIF; + case 'video/mp4': + case 'video/webm': + return VIDEO; + default: + return ''; + } +}; + +const createAssetMetaTags = ({siteHost, siteTitle, siteTwitter, asset, defaultDescription, defaultThumbnail}) => { + const { claimData } = asset; + const { contentType } = claimData; + const videoEmbedUrl = `${siteHost}/video-embed/${claimData.name}/${claimData.claimId}`; + const showUrl = `${siteHost}/${claimData.claimId}/${claimData.name}`; + const source = `${siteHost}/${claimData.claimId}/${claimData.name}.${claimData.fileExt}`; + const ogTitle = claimData.title || claimData.name; + const ogDescription = claimData.description || defaultDescription; + const ogThumbnailContentType = determineContentTypeFromExtension(claimData.thumbnail); + const ogThumbnail = claimData.thumbnail || defaultThumbnail; + const metaTags = [ + // page details + {property: 'og:title', content: ogTitle}, + {property: 'twitter:title', content: ogTitle}, + {property: 'og:description', content: ogDescription}, + {property: 'twitter:description', content: ogDescription}, + // url + {property: 'og:url', content: showUrl}, + // site info + {property: 'og:site_name', content: siteTitle}, + {property: 'twitter:site', content: siteTwitter}, + {property: 'fb:app_id', content: '1371961932852223'}, + ]; + if (determineMediaType(contentType) === VIDEO) { + // card type tags + metaTags.push({property: 'og:type', content: 'video.other'}); + metaTags.push({property: 'twitter:card', content: 'player'}); + metaTags.push({property: 'twitter:player', content: videoEmbedUrl}); + metaTags.push({property: 'twitter:player:width', content: 600}); + metaTags.push({property: 'twitter:text:player_width', content: 600}); + metaTags.push({property: 'twitter:player:height', content: 350}); + metaTags.push({property: 'twitter:player:stream', content: source}); + metaTags.push({property: 'twitter:player:stream:content_type', content: contentType}); + // video tags + metaTags.push({property: 'og:video', content: source}); + metaTags.push({property: 'og:video:secure_url', content: source}); + metaTags.push({property: 'og:video:type', content: contentType}); + // image tags + metaTags.push({property: 'og:image', content: ogThumbnail}); + metaTags.push({property: 'og:image:width', content: 600}); + metaTags.push({property: 'og:image:height', content: 315}); + metaTags.push({property: 'og:image:type', content: ogThumbnailContentType}); + metaTags.push({property: 'twitter:image', content: ogThumbnail}); + } else { + // card type tags + metaTags.push({property: 'og:type', content: 'article'}); + metaTags.push({property: 'twitter:card', content: 'summary_large_image'}); + // image tags + metaTags.push({property: 'og:image', content: source}); + metaTags.push({property: 'og:image', content: source}); + metaTags.push({property: 'og:image:width', content: 600}); + metaTags.push({property: 'og:image:height', content: 315}); + metaTags.push({property: 'og:image:type', content: contentType}); + metaTags.push({property: 'twitter:image', content: source}); + } + return metaTags; +}; + +module.exports = createAssetMetaTags; diff --git a/client/src/utils/createBasicMetaTags.js b/client/src/utils/createBasicMetaTags.js new file mode 100644 index 00000000..1eac8331 --- /dev/null +++ b/client/src/utils/createBasicMetaTags.js @@ -0,0 +1,29 @@ +const determineContentTypeFromExtension = require('./determineContentTypeFromExtension.js'); + +const createBasicMetaTags = ({siteHost, siteDescription, siteTitle, siteTwitter, defaultThumbnail}) => { + return [ + // page details + {property: 'og:title', content: siteTitle}, + {property: 'twitter:title', content: siteTitle}, + {property: 'og:description', content: siteDescription}, + {property: 'twitter:description', content: siteDescription}, + // url + {property: 'og:url', content: siteHost}, + // site id + {property: 'og:site_name', content: siteTitle}, + {property: 'twitter:site', content: siteTwitter}, + {property: 'fb:app_id', content: '1371961932852223'}, + // card type + {property: 'og:type', content: 'article'}, + {property: 'twitter:card', content: 'summary_large_image'}, + // image + {property: 'og:image', content: defaultThumbnail}, + {property: 'og:image:width', content: 600}, + {property: 'og:image:height', content: 315}, + {property: 'og:image:type', content: determineContentTypeFromExtension(defaultThumbnail)}, + {property: 'twitter:image', content: defaultThumbnail}, + {property: 'twitter:image:alt', content: 'Spee.ch Logo'}, + ]; +}; + +module.exports = createBasicMetaTags; diff --git a/client/src/utils/createChannelMetaTags.js b/client/src/utils/createChannelMetaTags.js new file mode 100644 index 00000000..ffb82a3c --- /dev/null +++ b/client/src/utils/createChannelMetaTags.js @@ -0,0 +1,30 @@ +const determineContentTypeFromExtension = require('determineContentTypeFromExtension.js'); + +const createChannelMetaTags = ({siteHost, siteTitle, siteTwitter, channel, defaultThumbnail}) => { + const { name, longId } = channel; + return [ + // page detail tags + {property: 'og:title', content: `${name} on ${siteTitle}`}, + {property: 'twitter:title', content: `${name} on ${siteTitle}`}, + {property: 'og:description', content: `${name}, a channel on ${siteTitle}`}, + {property: 'twitter:description', content: `${name}, a channel on ${siteTitle}`}, + // url + {property: 'og:url', content: `${siteHost}/${name}:${longId}`}, + // site info + {property: 'og:site_name', content: siteTitle}, + {property: 'twitter:site', content: siteTwitter}, + {property: 'fb:app_id', content: '1371961932852223'}, + // card type tags + {property: 'og:type', content: 'article'}, + {property: 'twitter:card', content: 'summary_large_image'}, + // image tags + {property: 'og:image', content: defaultThumbnail}, + {property: 'og:image:width', content: 600}, + {property: 'og:image:height', content: 315}, + {property: 'og:image:type', content: determineContentTypeFromExtension(defaultThumbnail)}, + {property: 'twitter:image', content: defaultThumbnail}, + {property: 'twitter:image:alt', content: 'Spee.ch Logo'}, + ]; +}; + +module.exports = createChannelMetaTags; diff --git a/client/src/utils/determineContentTypeFromExtension.js b/client/src/utils/determineContentTypeFromExtension.js new file mode 100644 index 00000000..de2ed530 --- /dev/null +++ b/client/src/utils/determineContentTypeFromExtension.js @@ -0,0 +1,21 @@ +const determineContentTypeFromExtension = (thumbnail) => { + if (thumbnail) { + const fileExt = thumbnail.substring(thumbnail.lastIndexOf('.')); + switch (fileExt) { + case 'jpeg': + case 'jpg': + return 'image/jpg'; + case 'png': + return 'image/png'; + case 'gif': + return 'image/gif'; + case 'mp4': + return 'video/mp4'; + default: + return ''; + } + } + return ''; +}; + +module.exports = determineContentTypeFromExtension; diff --git a/client/src/utils/metaTags.js b/client/src/utils/metaTags.js index ba04e497..9dd8167d 100644 --- a/client/src/utils/metaTags.js +++ b/client/src/utils/metaTags.js @@ -1,143 +1,6 @@ -const VIDEO = 'VIDEO'; -const IMAGE = 'IMAGE'; -const GIF = 'GIF'; - -const determineContentTypeFromExtension = (thumbnail) => { - if (thumbnail) { - const fileExt = thumbnail.substring(thumbnail.lastIndexOf('.')); - switch (fileExt) { - case 'jpeg': - case 'jpg': - return 'image/jpg'; - case 'png': - return 'image/png'; - case 'gif': - return 'image/gif'; - case 'mp4': - return 'video/mp4'; - default: - return ''; - } - } - return ''; -}; - -const determineMediaType = (contentType) => { - switch (contentType) { - case 'image/jpg': - case 'image/jpeg': - case 'image/png': - return IMAGE; - case 'image/gif': - return GIF; - case 'video/mp4': - case 'video/webm': - return VIDEO; - default: - return ''; - } -}; - -const createBasicMetaTags = ({siteHost, siteDescription, siteTitle, siteTwitter, defaultThumbnail}) => { - return [ - // page details - {property: 'og:title', content: siteTitle}, - {property: 'twitter:title', content: siteTitle}, - {property: 'og:url', content: siteHost}, - {property: 'og:site_name', content: siteTitle}, - {property: 'og:description', content: siteDescription}, - {property: 'twitter:description', content: siteDescription}, - {property: 'twitter:site', content: siteTwitter}, - // card type - {property: 'og:type', content: 'article'}, - {property: 'twitter:card', content: 'summary_large_image'}, - // image - {property: 'og:image', content: defaultThumbnail}, - {property: 'og:image:width', content: 600}, - {property: 'og:image:height', content: 315}, - {property: 'og:image:type', content: determineContentTypeFromExtension(defaultThumbnail)}, - {property: 'twitter:image', content: defaultThumbnail}, - {property: 'twitter:image:alt', content: 'Spee.ch Logo'}, - ]; -}; - -const createChannelMetaTags = ({siteHost, siteTitle, siteTwitter, channel, defaultThumbnail}) => { - const { name, longId } = channel; - return [ - // page detail tags - {property: 'og:title', content: `${name} on ${siteTitle}`}, - {property: 'twitter:title', content: `${name} on ${siteTitle}`}, - {property: 'og:url', content: `${siteHost}/${name}:${longId}`}, - {property: 'og:site_name', content: siteTitle}, - {property: 'og:description', content: `${name}, a channel on ${siteTitle}`}, - {property: 'twitter:site', content: siteTwitter}, - // card type tags - {property: 'og:type', content: 'article'}, - {property: 'twitter:card', content: 'summary_large_image'}, - // image tags - {property: 'og:image', content: defaultThumbnail}, - {property: 'og:image:width', content: 600}, - {property: 'og:image:height', content: 315}, - {property: 'og:image:type', content: determineContentTypeFromExtension(defaultThumbnail)}, - {property: 'twitter:image', content: defaultThumbnail}, - {property: 'twitter:image:alt', content: 'Spee.ch Logo'}, - ]; -}; - -const createAssetMetaTags = ({siteHost, siteTitle, siteTwitter, asset, defaultDescription, defaultThumbnail}) => { - const { claimData } = asset; - const { contentType } = claimData; - const videoEmbedUrl = `${siteHost}/video-embed/${claimData.name}/${claimData.claimId}`; - const showUrl = `${siteHost}/${claimData.claimId}/${claimData.name}`; - const source = `${siteHost}/${claimData.claimId}/${claimData.name}.${claimData.fileExt}`; - const ogTitle = claimData.title || claimData.name; - const ogDescription = claimData.description || defaultDescription; - const ogThumbnailContentType = determineContentTypeFromExtension(claimData.thumbnail); - const ogThumbnail = claimData.thumbnail || defaultThumbnail; - // page details - const metaTags = [ - {property: 'og:title', content: ogTitle}, - {property: 'twitter:title', content: ogTitle}, - {property: 'og:url', content: showUrl}, - {property: 'og:site_name', content: siteTitle}, - {property: 'twitter:site', content: siteTwitter}, - {property: 'og:description', content: ogDescription}, - {property: 'twitter:description', content: ogDescription}, - ]; - if (determineMediaType(contentType) === VIDEO) { - // card type tags - metaTags.push({property: 'og:type', content: 'video.other'}); - metaTags.push({property: 'twitter:card', content: 'player'}); - metaTags.push({property: 'twitter:player', content: videoEmbedUrl}); - metaTags.push({property: 'twitter:player:width', content: 600}); - metaTags.push({property: 'twitter:text:player_width', content: 600}); - metaTags.push({property: 'twitter:player:height', content: 350}); - metaTags.push({property: 'twitter:player:stream', content: source}); - metaTags.push({property: 'twitter:player:stream:content_type', content: contentType}); - // video tags - metaTags.push({property: 'og:video', content: source}); - metaTags.push({property: 'og:video:secure_url', content: source}); - metaTags.push({property: 'og:video:type', content: contentType}); - // image tags - metaTags.push({property: 'og:image', content: ogThumbnail}); - metaTags.push({property: 'og:image:width', content: 600}); - metaTags.push({property: 'og:image:height', content: 315}); - metaTags.push({property: 'og:image:type', content: ogThumbnailContentType}); - metaTags.push({property: 'twitter:image', content: ogThumbnail}); - } else { - // card type tags - metaTags.push({property: 'og:type', content: 'article'}); - metaTags.push({property: 'twitter:card', content: 'summary_large_image'}); - // image tags - metaTags.push({property: 'og:image', content: source}); - metaTags.push({property: 'og:image', content: source}); - metaTags.push({property: 'og:image:width', content: 600}); - metaTags.push({property: 'og:image:height', content: 315}); - metaTags.push({property: 'og:image:type', content: contentType}); - metaTags.push({property: 'twitter:image', content: source}); - } - return metaTags; -}; +const createAssetMetaTags = require('createAssetMetaTags.js'); +const createChannelMetaTags = require('createChannelMetaTags.js'); +const createBasicMetaTags = require('createBasicMetaTags.js'); export const createMetaTags = ({ siteDescription, siteHost, siteTitle, siteTwitter, asset, channel, defaultDescription, defaultThumbnail }) => { if (asset) {