From ce91b8f1811a3242b41e18a639d1229b90e2c701 Mon Sep 17 00:00:00 2001
From: Mantas Masalskis <mantas@idev.lt>
Date: Tue, 28 Apr 2020 01:43:33 +0300
Subject: [PATCH] Fixed #3039 - Embedding Youtube Videos in KB containing "-"
 does not work

---
 .../richtext_additions/popup_video.coffee     |  5 ++-
 app/views/tests/kb_video_embeding.html.erb    | 13 +++++++
 config/routes/test.rb                         |  1 +
 public/assets/tests/kb_video_embeding.js      | 38 +++++++++++++++++++
 spec/system/js/q_unit_spec.rb                 |  6 +++
 5 files changed, 61 insertions(+), 2 deletions(-)
 create mode 100644 app/views/tests/kb_video_embeding.html.erb
 create mode 100644 public/assets/tests/kb_video_embeding.js

diff --git a/app/assets/javascripts/app/controllers/_ui_element/richtext_additions/popup_video.coffee b/app/assets/javascripts/app/controllers/_ui_element/richtext_additions/popup_video.coffee
index a9677be24..903713436 100644
--- a/app/assets/javascripts/app/controllers/_ui_element/richtext_additions/popup_video.coffee
+++ b/app/assets/javascripts/app/controllers/_ui_element/richtext_additions/popup_video.coffee
@@ -4,8 +4,9 @@ class App.UiElement.richtext.additions.RichTextToolPopupVideo extends App.UiElem
 
   @regexps: {
     youtube: [
-      /youtube.com\/watch\?v=([\w]+)/
-      /youtu.be\/([\w]+)/
+      /youtube.com\/watch\?v=(\S[^:#?&/]+)/
+      /youtu.be\/(\S[^:#?&/]+)/
+      /youtube.com\/embed\/(\S[^:#?&/]+)/
     ],
     vimeo: [
       /vimeo.com\/([\w]+)/
diff --git a/app/views/tests/kb_video_embeding.html.erb b/app/views/tests/kb_video_embeding.html.erb
new file mode 100644
index 000000000..9fc1cea68
--- /dev/null
+++ b/app/views/tests/kb_video_embeding.html.erb
@@ -0,0 +1,13 @@
+<link rel="stylesheet" href="/assets/tests/qunit-1.21.0.css">
+<%= javascript_include_tag "/assets/tests/qunit-1.21.0.js", "/assets/tests/kb_video_embeding.js", nonce: true %>
+
+<style type="text/css">
+body {
+  padding-top: 0px;
+}
+</style>
+
+<%= javascript_tag nonce: true do -%>
+<% end -%>
+
+<div id="qunit" class="u-dontfold"></div>
diff --git a/config/routes/test.rb b/config/routes/test.rb
index b89c662a4..f31d43ffb 100644
--- a/config/routes/test.rb
+++ b/config/routes/test.rb
@@ -30,6 +30,7 @@ Zammad::Application.routes.draw do
   match '/tests_taskbar',                     to: 'tests#taskbar',                    via: :get
   match '/tests_text_module',                 to: 'tests#text_module',                via: :get
   match '/tests_color_object',                to: 'tests#color_object',               via: :get
+  match '/tests_kb_video_embeding',           to: 'tests#kb_video_embeding',          via: :get
   match '/tests/wait/:sec',                   to: 'tests#wait',                       via: :get
   match '/tests/raised_exception',            to: 'tests#error_raised_exception',     via: :get
 
diff --git a/public/assets/tests/kb_video_embeding.js b/public/assets/tests/kb_video_embeding.js
new file mode 100644
index 000000000..12138b0f3
--- /dev/null
+++ b/public/assets/tests/kb_video_embeding.js
@@ -0,0 +1,38 @@
+test('kb video url parsing and converting to embeding url', function() {
+  var klass = App.UiElement.richtext.additions.RichTextToolPopupVideo;
+
+  var parsed = klass.detectProviderAndId('https://www.youtube.com/watch?v=vTTzwJsHpU8')
+
+  equal(parsed[0], 'youtube')
+  equal(parsed[1], 'vTTzwJsHpU8')
+
+  var parsed = klass.detectProviderAndId('https://www.youtube.com/watch?v=vTTzwJsHpU8&other=true')
+
+  equal(parsed[0], 'youtube')
+  equal(parsed[1], 'vTTzwJsHpU8')
+
+  var parsed = klass.detectProviderAndId('https://www.youtube.com/watch?v=vTTzwJsHpU8#hashtag')
+
+  equal(parsed[0], 'youtube')
+  equal(parsed[1], 'vTTzwJsHpU8')
+
+  var parsed = klass.detectProviderAndId('https://www.youtube.com/watch?v=_EYF1-2uiIg')
+
+  equal(parsed[0], 'youtube')
+  equal(parsed[1], '_EYF1-2uiIg')
+
+  var parsed = klass.detectProviderAndId('https://www.youtu.be/vTTzwJsHpU8')
+
+  equal(parsed[0], 'youtube')
+  equal(parsed[1], 'vTTzwJsHpU8')
+
+  var parsed = klass.detectProviderAndId('https://www.youtube.com/embed/vTTzwJsHpU8')
+
+  equal(parsed[0], 'youtube')
+  equal(parsed[1], 'vTTzwJsHpU8')
+
+  var parsed = klass.detectProviderAndId('https://www.vimeo.com/358296442')
+
+  equal(parsed[0], 'vimeo')
+  equal(parsed[1], '358296442')
+})
diff --git a/spec/system/js/q_unit_spec.rb b/spec/system/js/q_unit_spec.rb
index 38ddfefab..3bf06d174 100644
--- a/spec/system/js/q_unit_spec.rb
+++ b/spec/system/js/q_unit_spec.rb
@@ -141,4 +141,10 @@ RSpec.describe 'QUnit', type: :system, authenticated_as: false, set_up: true, we
       q_unit_tests('taskbar')
     end
   end
+
+  context 'Knowlede Base Editor' do
+    it 'Vdeo Embeding' do
+      q_unit_tests('kb_video_embeding')
+    end
+  end
 end