@ecency/render-helper 2.2.10 → 2.2.11

package/package.json

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

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

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

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)
     })
@@ -447,7 +447,7 @@ describe('Markdown2Html', () => {
         last_update: '2019-05-10T09:15:21',
         body: 'https://youtu.be/_-6hJ8sltdI'
       }
-      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/_-6hJ8sltdI?autoplay=1" data-youtube="_-6hJ8sltdI"><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>'
 
       expect(markdown2Html(input)).toBe(expected)
     })

package/src/methods/a.method.ts

@@ -412,8 +412,9 @@ 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);
 
       const thumbImg = el.ownerDocument.createElement('img')
       thumbImg.setAttribute('class', 'no-replace video-thumbnail')
@@ -664,6 +665,14 @@ 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);
+      }
+    }
     el.removeAttribute('href')
   } else {
     const externalRegex =/(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;

package/src/methods/text.method.ts

@@ -34,7 +34,7 @@ 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}"`
+      const attrs = `class="markdown-video-link markdown-video-link-youtube" data-embed-src="${embedSrc}" data-youtube="${vid}"`
 
       const thumbImg = node.ownerDocument.createElement('img')
       thumbImg.setAttribute('class', 'no-replace video-thumbnail')