From d45b365e67e6680ec43f24fea5f0f7054c344fe4 Mon Sep 17 00:00:00 2001
From: Sergii Stotskyi <sergii.stotskyi@concreteplatform.com>
Date: Mon, 5 Jun 2017 09:48:19 +0300
Subject: [PATCH] fix(tooltip): adds detection for mobile youtube video

This allows to convert m.youtube.com and www.youtube.com to embedded url as well

Finishes work of #1155
---
 test/unit.js                    |  1 +
 test/unit/theme/base/tooltip.js | 57 +++++++++++++++++++++++++++++++++
 themes/base.js                  | 23 +++++++++----
 3 files changed, 74 insertions(+), 7 deletions(-)
 create mode 100644 test/unit/theme/base/tooltip.js

diff --git a/test/unit.js b/test/unit.js
index ed8be3b2f1..9007079bfd 100644
--- a/test/unit.js
+++ b/test/unit.js
@@ -27,6 +27,7 @@ import './unit/modules/keyboard';
 import './unit/modules/toolbar';
 
 import './unit/ui/picker';
+import './unit/theme/base/tooltip';
 
 
 export default Quill;
diff --git a/test/unit/theme/base/tooltip.js b/test/unit/theme/base/tooltip.js
new file mode 100644
index 0000000000..4e839393a2
--- /dev/null
+++ b/test/unit/theme/base/tooltip.js
@@ -0,0 +1,57 @@
+import Quill from '../../../../core';
+import { BaseTooltip } from '../../../../themes/base'
+
+class Tooltip extends BaseTooltip {
+}
+
+Tooltip.TEMPLATE = '<input type="text">';
+
+describe('BaseTooltip', function() {
+  describe('save', function() {
+    beforeEach(function() {
+      this.quill = this.initialize(Quill, '');
+      this.tooltip = new Tooltip(this.quill)
+    });
+
+    it('converts youtube video url to embedded', function() {
+      insertVideo(this.tooltip, 'http://youtube.com/watch?v=QHH3iSeDBLo');
+      expect(this.container.querySelector('.ql-video').src).toContain('http://www.youtube.com/embed/QHH3iSeDBLo');
+    });
+
+    it('converts www.youtube video url to embedded', function() {
+      insertVideo(this.tooltip, 'http://www.youtube.com/watch?v=QHH3iSeDBLo');
+      expect(this.container.querySelector('.ql-video').src).toContain('http://www.youtube.com/embed/QHH3iSeDBLo');
+    });
+
+    it('converts m.youtube video url to embedded', function() {
+      insertVideo(this.tooltip, 'http://m.youtube.com/watch?v=QHH3iSeDBLo');
+      expect(this.container.querySelector('.ql-video').src).toContain('http://www.youtube.com/embed/QHH3iSeDBLo');
+    });
+
+    it('preserves youtube video url protocol', function() {
+      insertVideo(this.tooltip, 'https://m.youtube.com/watch?v=QHH3iSeDBLo');
+      expect(this.container.querySelector('.ql-video').src).toContain('https://www.youtube.com/embed/QHH3iSeDBLo');
+    });
+
+    it('converts vimeo video url to embedded', function() {
+      insertVideo(this.tooltip, 'http://vimeo.com/47762693');
+      expect(this.container.querySelector('.ql-video').src).toContain('http://player.vimeo.com/video/47762693/');
+    });
+
+    it('converts www.vimeo video url to embedded', function() {
+      insertVideo(this.tooltip, 'http://www.vimeo.com/47762693');
+      expect(this.container.querySelector('.ql-video').src).toContain('http://player.vimeo.com/video/47762693/');
+    });
+
+    it('preserves vimeo video url protocol', function() {
+      insertVideo(this.tooltip, 'https://www.vimeo.com/47762693');
+      expect(this.container.querySelector('.ql-video').src).toContain('https://player.vimeo.com/video/47762693/');
+    });
+
+    function insertVideo(tooltip, url) {
+      tooltip.textbox.value = url;
+      tooltip.root.setAttribute('data-mode', 'video');
+      tooltip.save();
+    }
+  });
+});
diff --git a/themes/base.js b/themes/base.js
index 7110c6340b..2846904e02 100644
--- a/themes/base.js
+++ b/themes/base.js
@@ -196,6 +196,21 @@ class BaseTooltip extends Tooltip {
     this.quill.scrollingContainer.scrollTop = scrollTop;
   }
 
+  convertVideoUrlToEmbeded(url) {
+    let match = url.match(/^(https?):\/\/(?:(?:www|m)\.)?youtube\.com\/watch.*v=([a-zA-Z0-9_-]+)/) ||
+                url.match(/^(https?):\/\/(?:(?:www|m)\.)?youtu\.be\/([a-zA-Z0-9_-]+)/);
+
+    if (match) {
+      return match[1] + '://www.youtube.com/embed/' + match[2] + '?showinfo=0';
+    }
+
+    if (match = url.match(/^(https?):\/\/(?:www\.)?vimeo\.com\/(\d+)/)) {  // eslint-disable-line no-cond-assign
+      return match[1] + '://player.vimeo.com/video/' + match[2] + '/';
+    }
+
+    return url;
+  }
+
   save() {
     let value = this.textbox.value;
     switch(this.root.getAttribute('data-mode')) {
@@ -212,13 +227,7 @@ class BaseTooltip extends Tooltip {
         break;
       }
       case 'video': {
-        let match = value.match(/^(https?):\/\/(www\.)?youtube\.com\/watch.*v=([a-zA-Z0-9_-]+)/) ||
-                    value.match(/^(https?):\/\/(www\.)?youtu\.be\/([a-zA-Z0-9_-]+)/);
-        if (match) {
-          value = match[1] + '://www.youtube.com/embed/' + match[3] + '?showinfo=0';
-        } else if (match = value.match(/^(https?):\/\/(www\.)?vimeo\.com\/(\d+)/)) {  // eslint-disable-line no-cond-assign
-          value = match[1] + '://player.vimeo.com/video/' + match[3] + '/';
-        }
+        value = this.convertVideoUrlToEmbeded(value);
       } // eslint-disable-next-line no-fallthrough
       case 'formula': {
         if (!value) break;