@ecency/render-helper 2.2.10 → 2.2.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ecency/render-helper",
-  "version": "2.2.10",
+  "version": "2.2.14",
   "description": "Markdown+Html Render helper",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",

package/src/consts/allowed-attributes.const.ts

@@ -12,6 +12,8 @@ export const ALLOWED_ATTRIBUTES: XSSWhiteList = {
     'data-community',
     'data-filter',
     'data-embed-src',
+    'data-youtube',
+    'data-start-time',
     'data-video-href',
     'data-proposal',
     'class',

package/src/consts/regexes.const.ts

@@ -11,7 +11,7 @@ export const INTERNAL_TOPIC_REGEX = /^\/(trending|hot|created|promoted|muted|pay
 export const INTERNAL_POST_TAG_REGEX = /\/(.*)\/(@[\w.\d-]+)\/(.*)/i
 export const INTERNAL_POST_REGEX = /^\/(@[\w.\d-]+)\/(.*)$/i
 export const CUSTOM_COMMUNITY_REGEX = /^https?:\/\/(.*)\/c\/(hive-\d+)(.*)/i
-export const YOUTUBE_REGEX = /(?:https?:\/\/)?(?:www\.)?(?:youtube\.com\/watch\?v=|youtu\.be\/)([^& \n<]+)(?:[^ \n<]+)?/g
+export const YOUTUBE_REGEX = /(?:youtube.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu.be\/)([^"&?\/\s]{11})/g
 export const YOUTUBE_EMBED_REGEX = /^(https?:)?\/\/www.youtube.com\/(embed|shorts)\/.*/i
 export const VIMEO_REGEX = /(https?:\/\/)?(www\.)?(?:vimeo)\.com.*(?:videos|video|channels|)\/([\d]+)/i
 export const VIMEO_EMBED_REGEX = /https:\/\/player\.vimeo\.com\/video\/([0-9]+)/
@@ -39,3 +39,4 @@ export const BRAND_NEW_TUBE_REGEX = /^https:\/\/brandnewtube\.com\/embed\/[a-z0-
 export const LOOM_REGEX = /^(https?:)?\/\/www.loom.com\/share\/(.*)/i
 export const LOOM_EMBED_REGEX = /^(https?:)?\/\/www.loom.com\/embed\/(.*)/i
 export const AUREAL_EMBED_REGEX = /^(https?:\/\/)?(www\.)?(?:aureal-embed)\.web\.app\/([0-9]+)/i
+export const ENTITY_REGEX = /&([a-z0-9]+|#[0-9]{1,6}|#x[0-9a-fA-F]{1,6});/ig;

package/src/helper.ts

@@ -14,3 +14,14 @@ export function makeEntryCacheKey(entry: any): string {
   return `${entry.author}-${entry.permlink}-${entry.last_update}`
 }
 
+export function extractYtStartTime(url:string):string {
+  const urlObj = new URL(url);
+  const params = new URLSearchParams(urlObj.search);
+  if(params.has('t')){
+    return '' + parseInt(params.get('t')); //parsing is important as sometimes t is famated '123s';
+  }else if (params.has('start')){
+    return params.get('start');
+  }
+
+  return '';
+}

package/src/markdown-2-html.spec.ts

@@ -70,7 +70,7 @@ describe('Markdown2Html', () => {
         last_update: '2019-05-10T09:15:21',
         body: 'https://www.youtube.com/watch?v=qK3d1eoH-Qs'
       }
-      const expected = '<p><a class="markdown-video-link markdown-video-link-youtube" data-embed-src="https://www.youtube.com/embed/qK3d1eoH-Qs?autoplay=1"><img class="no-replace video-thumbnail" src="https://images.ecency.com/p/S5Eokt4BcQdk7EHeT1aYjzebg2hC7hkthT45eMZRVYW6mkGBWKemLWWzXbRhNG7Z3h1qjGS.png?format=match&amp;mode=fit" /><span class="markdown-video-play"></span></a></p>'
+      const expected = '<p><a class="markdown-video-link markdown-video-link-youtube" data-embed-src="https://www.youtube.com/embed/qK3d1eoH-Qs?autoplay=1" data-youtube="qK3d1eoH-Qs"><img class="no-replace video-thumbnail" src="https://images.ecency.com/p/S5Eokt4BcQdk7EHeT1aYjzebg2hC7hkthT45eMZRVYW6mkGBWKemLWWzXbRhNG7Z3h1qjGS.png?format=match&amp;mode=fit" /><span class="markdown-video-play"></span></a></p>'
 
       expect(markdown2Html(input)).toBe(expected)
     })
@@ -142,7 +142,7 @@ describe('Markdown2Html', () => {
         last_update: '2019-05-10T09:15:21',
         body: '<iframe width="560" height="315" src="https://www.youtube.com/embed/I3f9ixg59no?foo=bar&baz=000" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>'
       }
-      const expected = '<iframe src=\"https://www.youtube.com/embed/I3f9ixg59no\" allowfullscreen=\"allowfullscreen\"></iframe>'
+      const expected = '<iframe src=\"https://www.youtube.com/embed/I3f9ixg59no\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"></iframe>'
 
       expect(markdown2Html(input)).toBe(expected)
     })
@@ -445,9 +445,9 @@ describe('Markdown2Html', () => {
         author: 'foo329',
         permlink: 'bar329',
         last_update: '2019-05-10T09:15:21',
-        body: 'https://youtu.be/_-6hJ8sltdI'
+        body: 'https://youtu.be/UuyS7YAkECA?t=295s'
       }
-      const expected = '<p><a class="markdown-video-link markdown-video-link-youtube" data-embed-src="https://www.youtube.com/embed/_-6hJ8sltdI?autoplay=1"><img class="no-replace video-thumbnail" src="https://images.ecency.com/p/S5Eokt4BcQdk7EHeT1aYjzebg2hC7hkthT45eEGc5AMBA14JMjkkxrUAj3mV5QR9D6zfstr.png?format=match&amp;mode=fit" /><span class="markdown-video-play"></span></a></p>'
+      const expected = '<p><a class="markdown-video-link markdown-video-link-youtube" data-embed-src="https://www.youtube.com/embed/UuyS7YAkECA?autoplay=1" data-youtube="UuyS7YAkECA" data-start-time="295"><img class="no-replace video-thumbnail" src="https://images.ecency.com/p/S5Eokt4BcQdk7EHeT1aYjzebg2hC7hkthT45eAMp88bZ44hfAQDm6BtJw2H53aq1Tpn1cu4.png?format=match&amp;mode=fit" /><span class="markdown-video-play"></span></a></p>'
 
       expect(markdown2Html(input)).toBe(expected)
     })
@@ -877,6 +877,18 @@ describe('Markdown2Html', () => {
 
       expect(markdown2Html(input, false)).toBe(expected)
     })
+
+    it('65- Should handle youtube.com/embed videos', () => {
+      const input = {
+        author: 'foo329',
+        permlink: 'bar329',
+        last_update: '2019-05-10T09:15:21',
+        body: 'https://www.youtube.com/embed/UuyS7YAkECA?start=295&autoplay=1'
+      }
+      const expected = '<p><a class="markdown-video-link markdown-video-link-youtube" data-embed-src="https://www.youtube.com/embed/UuyS7YAkECA?autoplay=1" data-youtube="UuyS7YAkECA" data-start-time="295"><img class="no-replace video-thumbnail" src="https://images.ecency.com/p/S5Eokt4BcQdk7EHeT1aYjzebg2hC7hkthT45eAMp88bZ44hfAQDm6BtJw2H53aq1Tpn1cu4.png?format=match&amp;mode=fit" /><span class="markdown-video-play"></span></a></p>'
+
+      expect(markdown2Html(input)).toBe(expected)
+    })
   })
 
   describe("Rumble support", () => {

package/src/methods/a.method.ts

@@ -28,6 +28,7 @@ import {
 import { getSerializedInnerHTML } from './get-inner-html.method'
 import { proxifyImageSrc } from '../proxify-image-src'
 import { removeChildNodes } from './remove-child-nodes.method'
+import { extractYtStartTime } from '../helper'
 
 export function a(el: HTMLElement, forApp: boolean, webp: boolean): void {
   let href = el.getAttribute('href')
@@ -412,8 +413,15 @@ export function a(el: HTMLElement, forApp: boolean, webp: boolean): void {
       const embedSrc = `https://www.youtube.com/embed/${vid}?autoplay=1`
 
       el.textContent = ''
-
-      el.setAttribute('data-embed-src', embedSrc)
+     
+      el.setAttribute('data-embed-src', embedSrc);
+      el.setAttribute('data-youtube', vid);
+
+      //extract start time if available
+      const startTime = extractYtStartTime(href);
+      if(startTime){
+        el.setAttribute('data-start-time', startTime);
+      }
 
       const thumbImg = el.ownerDocument.createElement('img')
       thumbImg.setAttribute('class', 'no-replace video-thumbnail')
@@ -664,6 +672,20 @@ export function a(el: HTMLElement, forApp: boolean, webp: boolean): void {
 
   if (forApp) {
     el.setAttribute('data-href', href)
+    const match = href.match(YOUTUBE_REGEX)
+    if (match) {
+      const e = YOUTUBE_REGEX.exec(href)
+      if (e[1]) {
+        const vid = e[1]
+        el.setAttribute('data-youtube', vid);
+
+        //extract start time if available
+        const startTime = extractYtStartTime(href);
+        if(startTime){
+          el.setAttribute('data-start-time', startTime);
+        }
+      }
+    }
     el.removeAttribute('href')
   } else {
     const externalRegex =/(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
@@ -675,3 +697,6 @@ export function a(el: HTMLElement, forApp: boolean, webp: boolean): void {
     }
   }
 }
+
+
+

package/src/methods/clean-reply.method.ts

@@ -18,8 +18,8 @@ export function cleanReply(s: string): string {
     .filter(item => item.toLowerCase().includes('read this post on travelfeed.io for the best experience') === false)
     .filter(item => item.toLowerCase().includes('posted via <a href="https://www.dporn.co/"') === false)
     .filter(item => item.toLowerCase().includes('▶️ [watch on 3speak](https://3speak') === false)
-    .filter(item => item.toLowerCase().includes('<sup><sub>Posted via [inji.com]') === false)
-    .filter(item => item.toLowerCase().includes('view this post on [Liketu]') === false)
+    .filter(item => item.toLowerCase().includes('<sup><sub>posted via [inji.com]') === false)
+    .filter(item => item.toLowerCase().includes('view this post on [liketu]') === false)
     .join('\n') : '')
     .replace('Posted via <a href="https://d.buzz" data-link="promote-link">D.Buzz</a>', '')
     .replace('<div class="pull-right"><a href="/@hive.engage">![](https://i.imgur.com/XsrNmcl.png)</a></div>', '')

package/src/methods/markdown-to-html.method.ts

@@ -1,6 +1,6 @@
 import { traverse } from './traverse.method'
 import { sanitizeHtml } from './sanitize-html.method'
-import { DOMParser } from '../consts'
+import { DOMParser, ENTITY_REGEX } from '../consts'
 import xmldom from 'xmldom'
 
 const lolight = require('lolight')
@@ -47,7 +47,7 @@ export function markdownToHTML(input: string, forApp: boolean, webp: boolean): s
   let output = '';
 
   //encrypt entities
-  const entities = input.match(/&(.*?);/g);
+  const entities = input.match(ENTITY_REGEX);
   const encEntities:string[] = [];
 
   try{

package/src/methods/text.method.ts

@@ -1,4 +1,5 @@
 import { IMG_REGEX, YOUTUBE_REGEX, WHITE_LIST, DOMParser, POST_REGEX,  } from '../consts'
+import { extractYtStartTime } from '../helper'
 import { proxifyImageSrc } from '../proxify-image-src'
 import { linkify } from './linkify.method'
 
@@ -34,7 +35,12 @@ export function text(node: HTMLElement, forApp: boolean, webp: boolean): void {
       const thumbnail = proxifyImageSrc(`https://img.youtube.com/vi/${vid.split('?')[0]}/hqdefault.jpg`, 0, 0, webp ? 'webp' : 'match')
       const embedSrc = `https://www.youtube.com/embed/${vid}?autoplay=1`
 
-      const attrs = `class="markdown-video-link markdown-video-link-youtube" data-embed-src="${embedSrc}"`
+      let attrs = `class="markdown-video-link markdown-video-link-youtube" data-embed-src="${embedSrc}" data-youtube="${vid}"`
+      //extract start time if available
+      const startTime = extractYtStartTime(node.nodeValue);
+      if(startTime){
+        attrs = attrs.concat(` data-start-time="${startTime}"`);
+      }
 
       const thumbImg = node.ownerDocument.createElement('img')
       thumbImg.setAttribute('class', 'no-replace video-thumbnail')

package/src/post-body-summary.ts

@@ -3,6 +3,8 @@ import { makeEntryCacheKey } from './helper'
 import { cacheGet, cacheSet } from './cache'
 import { Entry } from './types'
 import { cleanReply } from './methods'
+import { ENTITY_REGEX } from './consts'
+
 
 const { Remarkable } = require('remarkable')
 const { linkify } = require('remarkable/linkify')
@@ -58,7 +60,7 @@ function postBodySummary(entryBody: string, length?: number, platform:'ios'|'and
   ]);
 
   //encrypt entities
-  const entities = entryBody.match(/&(.*?);/g);
+  const entities = entryBody.match(ENTITY_REGEX);
   const encEntities:string[] = [];
   if(entities && platform !== 'web'){
     entities.forEach((entity)=>{

package/src/test/data/legacy/23.json

@@ -1,5 +1,5 @@
 {
   "id": 23,
   "input": "<IMG SRC=/ onerror=\"alert(String.fromCharCode(88,83,83))\"></img> <img src=x onerror=\"&#0000106&#0000097&#0000118&#0000097&#0000115&#0000099&#0000114&#0000105&#0000112&#0000116&#0000058&#0000097&#0000108&#0000101&#0000114&#0000116&#0000040&#0000039&#0000088&#0000083&#0000083&#0000039&#0000041\"> <IMG SRC=&#106;&#97;&#118;&#97;&#115;&#99;&#114;&#105;&#112;&#116;&#58;&#97;&#108;&#101;&#114;&#116;&#40;&#39;&#88;&#83;&#83;&#39;&#41;> <IMG SRC=&#x6A&#x61&#x76&#x61&#x73&#x63&#x72&#x69&#x70&#x74&#x3A&#x61&#x6C&#x65&#x72&#x74&#x28&#x27&#x58&#x53&#x53&#x27&#x29> <IMG SRC=\" &#14;  javascript:alert('XSS');\">",
-  "result": "<p>&lt;IMG SRC=/ onerror=\"alert(String.fromCharCode(88,83,83))\"&gt; <img src=\"https://images.ecency.com/p/35.png?format=match&amp;mode=fit\"> <img> <img> <img /></p>"
+  "result": "<p>&lt;IMG SRC=/ onerror=\"alert(String.fromCharCode(88,83,83))\"&gt; <img src=\"https://images.ecency.com/p/35.png?format=match&amp;mode=fit\" /> &lt;IMG SRC=&#106;&#97;&#118;&#97;&#115;&#99;&#114;&#105;&#112;&#116;&#58;&#97;&#108;&#101;&#114;&#116;&#40;&#39;&#88;&#83;&#83;&#39;&#41;&gt; <img /> <img /></p>"
 }

package/src/test/data/legacy/27.JSON

@@ -1,5 +1,5 @@
 {
   "id": 27,
   "input": "<BR SIZE=\"&{alert('XSS')}\"> <LINK REL=\"stylesheet\" HREF=\"javascript:alert('XSS');\"> <STYLE>body{}</STYLE> <META HTTP-EQUIV=\"Link\" Content=\"<http://xss.rocks/xss.css>; REL=stylesheet\"> <IFRAME SRC=\"javascript:alert('XSS');\"></IFRAME> foo <IFRAME SRC=# onmouseover=\"alert(document.cookie)\"></IFRAME> bar <FRAMESET><FRAME SRC=\"javascript:alert('XSS');\"></FRAMESET> baz ",
-  "result": "<p><br>     foo  bar  baz\n</p>"
+  "result": "<p><br />     foo  bar  baz\n</p>"
 }