Fix background image in slides

www/common/inner/common-mediatag.js

@@ -26,6 +26,17 @@ define([
     // Cache of the avatars outer html (including <media-tag>)
     var avatars = {};
 
+    MT.getMediaTag = function (common, data) {
+        var metadataMgr = common.getMetadataMgr();
+        var privateDat = metadataMgr.getPrivateData();
+        var origin = privateDat.fileHost || privateDat.origin;
+        var src = data.src = data.src.slice(0,1) === '/' ? origin + data.src : data.src;
+        return h('media-tag', {
+            src: src,
+            'data-crypto-key': 'cryptpad:'+data.key
+        });
+    };
+
     MT.getCursorAvatar = function (cursor) {
         var html = '<span class="cp-cursor-avatar">';
         html += (cursor.avatar && avatars[cursor.avatar]) || '';

www/common/sframe-common.js

@@ -106,6 +106,7 @@ define([
     funcs.addMentions = callWithCommon(UIElements.addMentions);
     funcs.importMediaTagMenu = callWithCommon(MT.importMediaTagMenu);
     funcs.getMediaTagPreview = callWithCommon(MT.getMediaTagPreview);
+    funcs.getMediaTag = callWithCommon(MT.getMediaTag);
 
     // Thumb
     funcs.displayThumbnail = callWithCommon(Thumb.displayThumbnail);

www/slide/app-slide.less

@@ -12,12 +12,13 @@
         @color: @colortheme_slide-color
     );
 
+    @slide-default-bg: #e3e3e3;
+
     // body
     font-size: unset;
     display: flex;
     flex-flow: column;
 
-    @slide-default-bg: #000;
     .size (@n) {
         // font-size: @n * 1vmin;
         // line-height: @n * 1.1vmin;
@@ -124,7 +125,7 @@
                             &> img {
                                 width: 50vw;
                                 height: 28.125vw;
-                                max-height: ~"calc(100vh - 96px)";
+                                max-height: ~"calc(100vh - 96px)" !important;
                                 max-width: ~"calc(16 / 9 * (100vh - 96px))";
                                 position: absolute;
                                 left: 0;

www/slide/inner.js

@@ -130,7 +130,6 @@ define([
 
     // Flag to check if a file from the filepicker is a mediatag for the slides or a background image
     var Background = {
-        isBackground: false
     };
 
     var mkSlideOptionsButton = function (framework, slideOptions) {
@@ -208,7 +207,6 @@ define([
                     style: 'font-size: 17px',
                     id: 'cp-app-slide-options-bg'
                 }).click(function () {
-                    Background.isBackground = true;
                     var pickerCfg = {
                         types: ['file'],
                         where: ['root'],
@@ -216,7 +214,12 @@ define([
                             fileType: ['image/']
                         }
                     };
-                    common.openFilePicker(pickerCfg);
+                    common.openFilePicker(pickerCfg, function (data) {
+                        if (data.type === 'file') {
+                            data.mt = common.getMediaTag(data).outerHTML;
+                            Background.todo(data);
+                        }
+                    });
                 }).text(Messages.printBackgroundButton).appendTo($p);
             }
             $p.append($('<br>'));
@@ -330,7 +333,7 @@ define([
         });
     };
 
-    var mkColorConfiguration = function (framework, $modal) {
+    var mkColorConfiguration = function (framework, $modal, slideOptions) {
         var textColor;
         var backColor;
         var metadataMgr = framework._.cpNfInner.metadataMgr;
@@ -341,11 +344,13 @@ define([
                 $modal.css('color', text);
                 $modal.css('border-color', text);
                 $('#' + SLIDE_COLOR_ID).find('i').css('color', text);
+                slideOptions.textColor = text;
             }
             if (back) {
                 backColor = back;
-                $modal.css('background-color', back);
+                //$modal.css('background-color', back);
                 $('#' + SLIDE_BACKCOLOR_ID).find('i').css('color', back);
+                slideOptions.bgColor = back;
             }
         };
         var updateLocalColors = function (text, back) {
@@ -411,14 +416,6 @@ define([
 
     var mkFilePicker = function (framework, editor) {
         framework.setMediaTagEmbedder(function (mt, data) {
-            if (Background.isBackground) {
-                if (data.type === 'file') {
-                    data.mt = mt[0].outerHTML;
-                    Background.todo(data);
-                }
-                Background.isBackground = false;
-                return;
-            }
             editor.replaceSelection($(mt)[0].outerHTML);
         });
     };
@@ -477,7 +474,7 @@ define([
         mkThemeButton(framework);
         mkPrintButton(framework, editor, $content, $print);
         mkSlideOptionsButton(framework, slideOptions, $toolbarDrawer);
-        var colors = mkColorConfiguration(framework, $modal);
+        var colors = mkColorConfiguration(framework, $modal, slideOptions);
         mkFilePicker(framework, editor);
         mkSlidePreviewPane(framework, $contentContainer);
 

www/slide/slide.js

@@ -93,7 +93,11 @@ define([
         if (options.background && options.background.mt) {
             mediatagBg = options.background.mt;
         }
-        var m = '<span class="cp-app-slide-container">' + mediatagBg + '<span class="'+slideClass+'">'+DiffMd.render(c).replace(separatorReg, '</span></span><span class="cp-app-slide-container">' + mediatagBg + '<span class="'+slideClass+'">')+'</span></span>';
+        var bgColor = '';
+        if (options.bgColor && !mediatagBg) {
+            bgColor = 'style="background-color:'+options.bgColor+';"';
+        }
+        var m = '<span class="cp-app-slide-container">' + mediatagBg + '<span class="'+slideClass+'" '+bgColor+'>'+DiffMd.render(c).replace(separatorReg, '</span></span><span class="cp-app-slide-container">' + mediatagBg + '<span class="'+slideClass+'" '+bgColor+'>')+'</span></span>';
 
         try { DiffMd.apply(m, $content, Common); } catch (e) { return console.error(e); }