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

8 files changed, 148 insertions, 8 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/program/js/tinymce/roundcube/content.css b/program/js/tinymce/roundcube/content.css
new file mode 100644
index 000000000..67480ab77
--- /dev/null
+++ b/program/js/tinymce/roundcube/content.css
@@ -0,0 +1,26 @@
+/* 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/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);