Merge pull request #2802 from aignatov-bio/ai-sci-4930-add-office-preview-attachments

Add WOPI preview for office files [SCI-4930]

app/assets/javascripts/sitewide/file_preview.js

@@ -429,7 +429,7 @@ var FilePreviewModal = (function() {
         }
       }).done(function() {
         closeEditor();
-        
+
       });
       if (typeof refreshProtocolStatusBar === 'function') refreshProtocolStatusBar();
     });
@@ -457,16 +457,21 @@ var FilePreviewModal = (function() {
         link.attr('data-status', 'asset-present');
         if (data.type === 'previewable') {
           animateSpinner('.file-preview-container', false);
-          modal.find('.file-preview-container')
-            .append($('<img>')
-              .css('opacity', 0)
-              .attr('src', data['large-preview-url'])
-              .attr('alt', name)
-              .on('error', ActiveStoragePreviews.reCheckPreview)
-              .on('load', ActiveStoragePreviews.showPreview)
-              .click(function(ev) {
-                ev.stopPropagation();
-              }));
+          if (data['wopi-preview-url']) {
+            modal.find('.file-preview-container')
+              .html(`<iframe class="wopi-file-preview" src="${data['wopi-preview-url']}"></iframe>`);
+          } else {
+            modal.find('.file-preview-container')
+              .append($('<img>')
+                .css('opacity', 0)
+                .attr('src', data['large-preview-url'])
+                .attr('alt', name)
+                .on('error', ActiveStoragePreviews.reCheckPreview)
+                .on('load', ActiveStoragePreviews.showPreview)
+                .click(function(ev) {
+                  ev.stopPropagation();
+                }));
+          }
           if (!readOnly && data.editable) {
             modal.find('.file-edit-link').css('display', '');
             modal.find('.file-edit-link').off().click(function(ev) {

app/assets/stylesheets/themes/scinote.scss

@@ -1464,6 +1464,10 @@ ul.content-activities {
     color: $color-white;
     height: 100%;
     width: auto;
+
+    .modal-body {
+      width: 100%;
+    }
   }
 
   .file-preview-container {
@@ -1475,7 +1479,7 @@ ul.content-activities {
     height: 100%;
     justify-content: center;
     text-align: center;
-    width: 60%;
+    width: 100%;
 
     &.processing {
       background-image: url("/images/medium/processing.gif");
@@ -1487,6 +1491,12 @@ ul.content-activities {
       color: $color-black;
       margin: 30px 0;
     }
+
+    .wopi-file-preview {
+      border: 0;
+      height: 100%;
+      width: 100%;
+    }
   }
 
   img {

app/controllers/assets_controller.rb

@@ -60,6 +60,7 @@ class AssetsController < ApplicationController
 
     if wopi_enabled? && wopi_file?(@asset)
       edit_supported, title = wopi_file_edit_button_status
+      response_json['wopi-preview-url'] = @asset.get_action_url(current_user, 'embedview')
       response_json['wopi-controls'] = render_to_string(
         partial: 'assets/wopi/file_wopi_controls.html.erb',
         locals: {

app/utilities/wopi_util.rb

@@ -55,7 +55,7 @@ module WopiUtil
       wopi_app.save!
       app.xpath('action').each do |action|
         name = action.xpath('@name').first.value
-        next unless %w(view edit editnew wopitest).include?(name)
+        next unless %w(view edit editnew embedview wopitest).include?(name)
 
         wopi_action = WopiAction.new
         wopi_action.action = name