Improved video support, all tinymce related resources moved to program/js/tinymce/roundcube dir

11 files changed, 122 insertions, 212 deletions

diff --git a/program/include/rcmail.php b/program/include/rcmail.php
index a6ba18312..a9e717b86 100644
--- a/program/include/rcmail.php
+++ b/program/include/rcmail.php
@@ -1795,8 +1795,9 @@ class rcmail extends rcube
             'spelldict'  => intval($this->config->get('spellcheck_dictionary'))
         );
 
-        $this->output->add_label('selectimage', 'addimage');
+        $this->output->add_label('selectimage', 'addimage', 'selectmedia', 'addmedia');
         $this->output->set_env('editor_config', $config);
+        $this->output->include_css('program/js/tinymce/roundcube/browser.css');
         $this->output->include_script('tinymce/tinymce.min.js');
         $this->output->include_script('editor.js');
     }
diff --git a/program/js/editor.js b/program/js/editor.js
index 6540bd56a..c5ceddd0f 100644
--- a/program/js/editor.js
+++ b/program/js/editor.js
@@ -40,7 +40,7 @@ function rcube_text_editor(config, id)
       selector: '#' + ($('#' + id).is('.mce_editor') ? id : 'fake-editor-id'),
       theme: 'modern',
       language: config.lang,
-      content_css: config.skin_path + '/editor_content.css?v2',
+      content_css: 'program/js/tinymce/roundcube/content.css?v1',
       menubar: false,
       statusbar: false,
       toolbar_items_size: 'small',
@@ -84,7 +84,7 @@ function rcube_text_editor(config, id)
       accessibility_focus: false,
       file_browser_callback: function(name, url, type, win) { ref.file_browser_callback(name, url, type); },
       // @todo: support more than image (types: file, image, media)
-      file_browser_callback_types: 'image'
+      file_browser_callback_types: 'image media'
     });
   }
 
@@ -582,9 +582,25 @@ function rcube_text_editor(config, id)
       return;
     }
 
-    if (file.mimetype.startsWith('image/')) {
+    var rx, img_src;
+
+    switch (rcmail.env.file_browser_type) {
+      case 'image':
+        rx = /^image\//i;
+        break;
+
+      case 'media':
+        rx = /^video\//i;
+        img_src = 'program/js/tinymce/roundcube/video.png';
+        break;
+
+      default:
+        return;
+    }
+
+    if (rx.test(file.mimetype)) {
       var href = rcmail.env.comm_path+'&_id='+rcmail.env.compose_id+'&_action=display-attachment&_file='+file_id,
-        img = $('<img>').attr({title: file.name, src: href + '&_thumbnail=1'});
+        img = $('<img>').attr({title: file.name, src: img_src ? img_src : href + '&_thumbnail=1'});
 
       return $('<li>').data('url', href)
         .append($('<span class="img">').append(img))
diff --git a/program/js/tinymce/roundcube/browser.css b/program/js/tinymce/roundcube/browser.css
new file mode 100644
index 000000000..1787226f3
--- /dev/null
+++ b/program/js/tinymce/roundcube/browser.css
@@ -0,0 +1,91 @@
+/* This file contains the CSS data for media file selector of TinyMCE */
+#image-selector-list {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 152px;
+	height: 100%;
+	overflow-x: hidden;
+	overflow-y: auto;
+}
+
+#image-selector-form {
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	right: 0;
+	width: 150px;
+	border: 0;
+	border: 1px solid #FFF;
+	border-left: 1px solid #DDD;
+	text-align: center;
+	padding-top: 10px;
+}
+
+#image-upload-button {
+	width: 80%;
+	height: 30px;
+}
+
+#image-upload-button span {
+	position: absolute;
+	width: 100%;
+	text-align: center;
+	line-height: 30px;
+}
+
+#image-selector-list li {
+	line-height: 80px;
+	padding: 2px 0 2px 3px;
+	cursor: pointer;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+#image-selector-list li:hover {
+	background-color: #F0F0F0;
+}
+
+#image-selector-list ul li img {
+	vertical-align: middle;
+	max-height: 80px;
+}
+
+#image-selector-list ul li span.name {
+	vertical-align: middle;
+	font-weight: bold;
+	padding-left: 10px;
+}
+
+#image-selector-list ul li span.img {
+	height: 80px;
+	width: 80px;
+	text-align: center;
+	display: inline-block;
+	overflow: hidden;
+	line-height: 80px;
+}
+
+#image-selector-form.droptarget.hover,
+#image-selector-form.droptarget.active {
+	border: 1px solid #019bc6;
+	box-shadow: 0 0 3px 2px rgba(71,135,177, 0.5);
+	-moz-box-shadow: 0 0 3px 2px rgba(71,135,177, 0.5);
+	-webkit-box-shadow: 0 0 3px 2px rgba(71,135,177, 0.5);
+	-o-box-shadow: 0 0 3px 2px rgba(71,135,177, 0.5);
+}
+
+#image-selector-form.droptarget.hover {
+	background-color: #d9ecf4;
+	box-shadow: 0 0 5px 2px rgba(71,135,177, 0.9);
+	-moz-box-shadow: 0 0 5px 2px rgba(71,135,177, 0.9);
+	-webkit-box-shadow: 0 0 5px 2px rgba(71,135,177, 0.9);
+	-o-box-shadow: 0 0 5px 2px rgba(71,135,177, 0.9);
+}
+
+div.mce-abs-end div.hint {
+	line-height: 50px;
+	padding-left: 10px;
+	color: #999;
+	text-shadow: 0 1px 1px #FFF;
+}
diff --git a/skins/classic/editor_content.css b/program/js/tinymce/roundcube/content.css
index 67480ab77..67480ab77 100644
--- a/skins/classic/editor_content.css
+++ b/program/js/tinymce/roundcube/content.css
diff --git a/program/js/tinymce/roundcube/video.png b/program/js/tinymce/roundcube/video.png
new file mode 100644
index 000000000..faf657000
--- /dev/null
+++ b/program/js/tinymce/roundcube/video.png
diff --git a/program/lib/Roundcube/rcube_washtml.php b/program/lib/Roundcube/rcube_washtml.php
index 984294376..b93d3b117 100644
--- a/program/lib/Roundcube/rcube_washtml.php
+++ b/program/lib/Roundcube/rcube_washtml.php
@@ -95,6 +95,7 @@ class rcube_washtml
         'ins', 'label', 'legend', 'li', 'map', 'menu', 'nobr', 'ol', 'p', 'pre', 'q',
         's', 'samp', 'small', 'span', 'strike', 'strong', 'sub', 'sup', 'table',
         'tbody', 'td', 'tfoot', 'th', 'thead', 'tr', 'tt', 'u', 'ul', 'var', 'wbr', 'img',
+        'video', 'source',
         // form elements
         'button', 'input', 'textarea', 'select', 'option', 'optgroup'
     );
@@ -246,7 +247,10 @@ class rcube_washtml
                 $quot = strpos($style, '"') !== false ? "'" : '"';
                 $t .= ' style=' . $quot . $style . $quot;
             }
-            else if ($key == 'background' || ($key == 'src' && strtolower($node->tagName) == 'img')) { //check tagName anyway
+            else if ($key == 'background'
+                || ($key == 'src' && preg_match('/^(img|source)$/i', $node->tagName))
+                || ($key == 'poster' && strtolower($node->tagName) == 'video')
+            ) {
                 if (($src = $this->config['cid_map'][$value])
                     || ($src = $this->config['cid_map'][$this->config['base_url'].$value])
                 ) {
diff --git a/program/localization/en_US/labels.inc b/program/localization/en_US/labels.inc
index 20992e50e..2da99105f 100644
--- a/program/localization/en_US/labels.inc
+++ b/program/localization/en_US/labels.inc
@@ -232,6 +232,8 @@ $labels['mailreplyintro'] = 'On $date, $sender wrote:';
 $labels['originalmessage'] = 'Original Message';
 $labels['selectimage']    = 'Select image';
 $labels['addimage']       = 'Add image';
+$labels['selectmedia']    = 'Select movie';
+$labels['addmedia']       = 'Add movie';
 
 $labels['editidents']    = 'Edit identities';
 $labels['spellcheck']    = 'Spell';
diff --git a/program/steps/mail/sendmail.inc b/program/steps/mail/sendmail.inc
index 4737ce368..b70b18b6b 100644
--- a/program/steps/mail/sendmail.inc
+++ b/program/steps/mail/sendmail.inc
@@ -428,7 +428,7 @@ if (is_array($COMPOSE['attachments'])) {
         $attachment = $RCMAIL->plugins->exec_hook('attachment_get', $attachment);
 
         if ($isHtml) {
-            $dispurl      = '/\ssrc\s*=\s*[\'"]*\S+display-attachment\S+file=rcmfile'
+            $dispurl      = '/\s(poster|src)\s*=\s*[\'"]*\S+display-attachment\S+file=rcmfile'
                 . preg_quote($attachment['id']) . '[\s\'"]*/';
             $message_body = $MAIL_MIME->getHTMLBody();
             $is_inline    = preg_match($dispurl, $message_body);
@@ -449,7 +449,7 @@ if (is_array($COMPOSE['attachments'])) {
                 $cid .= '@localhost';
             }
 
-            $message_body = preg_replace($dispurl, ' src="cid:' . $cid . '" ', $message_body);
+            $message_body = preg_replace($dispurl, ' \\1="cid:' . $cid . '" ', $message_body);
 
             $MAIL_MIME->setHTMLBody($message_body);
 
diff --git a/skins/classic/common.css b/skins/classic/common.css
index bdc7501f3..813df9ed3 100644
--- a/skins/classic/common.css
+++ b/skins/classic/common.css
@@ -1246,84 +1246,6 @@ fieldset.tabbed
   border: 0 !important;
 }
 
-#image-selector-list
-{
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 152px;
-  height: 100%;
-  overflow-x: hidden;
-  overflow-y: auto;
-}
-
-#image-selector-form
-{
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  right: 0;
-  width: 150px;
-  border: 0;
-  border: 1px solid #FFF;
-  border-left: 1px solid #DDD;
-  text-align: center;
-  padding-top: 10px;
-}
-
-#image-upload-button
-{
-  width: 80%;
-  height: 30px;
-}
-
-#image-upload-button span
-{
-  position: absolute;
-  width: 100%;
-  text-align: center;
-  line-height: 30px;
-}
-
-#image-selector-list li
-{
-  line-height: 80px;
-  padding: 2px 0 2px 3px;
-  cursor: pointer;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-#image-selector-list li:hover
-{
-  background-color: #F0F0F0;
-}
-
-#image-selector-list ul li img
-{
-  vertical-align: middle;
-  max-height: 80px;
-}
-
-#image-selector-list ul li span.name
-{
-  vertical-align: middle;
-  font-weight: bold;
-  padding-left: 10px;
-  line-height: 80px;
-  vertical-align: middle;
-}
-
-#image-selector-list ul li span.img
-{
-  width: 80px;
-  text-align: center;
-  display: inline-block;
-  overflow: hidden;
-  line-height: 80px;
-  vertical-align: middle;
-}
-
 #image-selector-form.droptarget {
   background: url(images/filedrop.png) center bottom no-repeat;
 }
@@ -1335,11 +1257,3 @@ fieldset.tabbed
   -moz-box-shadow: 0 0 5px 0 #999;
   -o-box-shadow: 0 0 5px 0 #999;
 }
-
-div.mce-abs-end div.hint
-{
-  line-height: 50px;
-  padding-left: 10px;
-  color: #999;
-  text-shadow: 0 1px 1px #FFF;
-}
diff --git a/skins/larry/editor_content.css b/skins/larry/editor_content.css
deleted file mode 100644
index 67480ab77..000000000
--- a/skins/larry/editor_content.css
+++ /dev/null
@@ -1,26 +0,0 @@
-/* This file contains the CSS data for the editable area(iframe) of TinyMCE */
-
-body, td, pre {
-	font-family: "Lucida Grande", Verdana,  Arial, Helvetica, sans-serif;
-	font-size: 12px;
-}
-
-body {
-	background-color: #FFFFFF;
-	margin-left: 4px;
-	margin-right: 4px;
-	margin-top: 2px;
-}
-
-div.pre {
-	margin: 0;
-	padding: 0;
-	font-family: monospace;
-}
-
-blockquote
-{
-	border-left: #1010ff 2px solid;
-	margin: 0;
-	padding: 0 0.4em;
-}
diff --git a/skins/larry/styles.css b/skins/larry/styles.css
index 6eceb772e..d1e45012b 100644
--- a/skins/larry/styles.css
+++ b/skins/larry/styles.css
@@ -2721,98 +2721,6 @@ fieldset.tab {
 	margin-left: 0;
 }
 
-/*** image selector in HTML editor ***/
-#image-selector-list {
-	position: absolute;
-	top: 0;
-	left: 0;
-	right: 152px;
-	height: 100%;
-	overflow-x: hidden;
-	overflow-y: auto;
-}
-
-#image-selector-form {
-	position: absolute;
-	top: 0;
-	bottom: 0;
-	right: 0;
-	width: 150px;
-	border: 0;
-	border: 1px solid #FFF;
-	border-left: 1px solid #DDD;
-	text-align: center;
-	padding-top: 10px;
-}
-
-#image-upload-button {
-	width: 80%;
-	height: 30px;
-}
-
-#image-upload-button span {
-	position: absolute;
-	width: 100%;
-	text-align: center;
-	line-height: 30px;
-}
-
-#image-selector-list li {
-	line-height: 80px;
-	padding: 2px 0 2px 3px;
-	cursor: pointer;
-	overflow: hidden;
-	text-overflow: ellipsis;
-}
-
-#image-selector-list li:hover {
-	background-color: #F0F0F0;
-}
-
-#image-selector-list ul li img {
-	vertical-align: middle;
-	max-height: 80px;
-}
-
-#image-selector-list ul li span.name {
-	vertical-align: middle;
-	font-weight: bold;
-	padding-left: 10px;
-}
-
-#image-selector-list ul li span.img {
-	height: 80px;
-	width: 80px;
-	text-align: center;
-	display: inline-block;
-	overflow: hidden;
-	line-height: 80px;
-}
-
 #image-selector-form.droptarget {
 	background: url(images/filedrop.png) center bottom no-repeat;
 }
-
-#image-selector-form.droptarget.hover,
-#image-selector-form.droptarget.active {
-	border: 1px solid #019bc6;
-	box-shadow: 0 0 3px 2px rgba(71,135,177, 0.5);
-	-moz-box-shadow: 0 0 3px 2px rgba(71,135,177, 0.5);
-	-webkit-box-shadow: 0 0 3px 2px rgba(71,135,177, 0.5);
-	-o-box-shadow: 0 0 3px 2px rgba(71,135,177, 0.5);
-}
-
-#image-selector-form.droptarget.hover {
-	background-color: #d9ecf4;
-	box-shadow: 0 0 5px 2px rgba(71,135,177, 0.9);
-	-moz-box-shadow: 0 0 5px 2px rgba(71,135,177, 0.9);
-	-webkit-box-shadow: 0 0 5px 2px rgba(71,135,177, 0.9);
-	-o-box-shadow: 0 0 5px 2px rgba(71,135,177, 0.9);
-}
-
-div.mce-abs-end div.hint {
-	line-height: 50px;
-	padding-left: 10px;
-	color: #999;
-	text-shadow: 0 1px 1px #FFF;
-}