Shared image view (#2951)

* init shared file view image

* [shared image file view] rewrote it with react

* [shared image file view] modification

frontend/config/webpack.config.dev.js

@@ -94,6 +94,11 @@ module.exports = {
       require.resolve('react-dev-utils/webpackHotDevClient'),
       paths.appSrc + "/shared-file-view-text.js",
     ],
+    sharedFileViewImage: [
+      require.resolve('./polyfills'),
+      require.resolve('react-dev-utils/webpackHotDevClient'),
+      paths.appSrc + "/shared-file-view-image.js",
+    ],
     viewFileText: [
       require.resolve('./polyfills'),
       require.resolve('react-dev-utils/webpackHotDevClient'),

frontend/config/webpack.config.prod.js

@@ -67,6 +67,7 @@ module.exports = {
     draw: [require.resolve('./polyfills'), paths.appSrc + "/draw/draw.js"],
     sharedFileViewMarkdown: [require.resolve('./polyfills'), paths.appSrc + "/shared-file-view-markdown.js"],
     sharedFileViewText: [require.resolve('./polyfills'), paths.appSrc + "/shared-file-view-text.js"],
+    sharedFileViewImage: [require.resolve('./polyfills'), paths.appSrc + "/shared-file-view-image.js"],
     viewFileText: [require.resolve('./polyfills'), paths.appSrc + "/view-file-text.js"],
   },
 

frontend/src/css/image-file-view.css

@@ -0,0 +1,19 @@
+.image-file-view:before {
+    content: ' '; 
+    display: inline-block;
+    vertical-align: middle;
+    height: 100%;
+    font-size: 0;
+    line-height: 0;
+}
+#image-view {
+    padding: 1px; 
+    background: #fff;
+    border: 1px solid #eee;
+    width: auto;
+    height: auto;
+    max-width: calc(100% - 4px);
+    max-height: calc(100% - 4px);
+    font-size: 0;
+    line-height: 0;
+}

frontend/src/shared-file-view-image.js

@@ -0,0 +1,144 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Account from './components/common/account';
+import { serviceURL, gettext, siteRoot, mediaUrl, logoPath, logoWidth, logoHeight, siteTitle } from './utils/constants';
+import { Button } from 'reactstrap';
+import { Utils } from './utils/utils';
+import SaveSharedFileDialog from './components/dialog/save-shared-file-dialog';
+import toaster from './components/toast';
+import watermark from 'watermark-dom';
+
+import './assets/css/fa-solid.css';
+import './assets/css/fa-regular.css';
+import './assets/css/fontawesome.css';
+import './css/shared-file-view.css';
+import './css/image-file-view.css';
+
+let loginUser = window.app.pageOptions.name;
+const { repoID, sharedToken, trafficOverLimit, fileName, fileSize, rawPath, sharedBy, siteName, enableWatermark, download, err } = window.shared.pageOptions;
+
+class SharedFileViewImage extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      showSaveSharedFileDialog: false
+    };
+  }
+
+  handleSaveSharedFileDialog = () => {
+    this.setState({
+      showSaveSharedFileDialog: true
+    });
+  }
+
+  toggleCancel = () => {
+    this.setState({
+      showSaveSharedFileDialog: false
+    });
+  }
+
+  handleSaveSharedFile = () => {
+    toaster.success(gettext('Successfully saved'), {
+      duration: 3
+    });
+  }
+
+  componentDidMount() {
+    if (trafficOverLimit == 'True') {
+      toaster.danger(gettext('File download is disabled: the share link traffic of owner is used up.'), {
+        duration: 3
+      });
+    }
+  }
+
+  getContent() {
+    if (err) {
+      let errorMsg;
+      if (err == 'File preview unsupported') {
+        errorMsg = <p>{gettext('Online view is not applicable to this file format')}</p>;
+      } else {
+        errorMsg = <p className="error">{err}</p>;
+      }
+      return (
+        <div className="shared-file-view-body">
+          <div className="file-view-tip">
+            {errorMsg}
+          </div>
+        </div>
+      );
+    } else {
+      return (
+        <div className="shared-file-view-body d-flex text-center">
+          <div className="image-file-view flex-1">
+            <img src={rawPath} alt={fileName} id="image-view" />
+          </div>
+        </div>
+      );
+    }
+  }
+
+  render() {
+    return (
+      <div className="shared-file-view-md">
+        <div className="shared-file-view-md-header d-flex">
+          <React.Fragment>
+            <a href={siteRoot}>
+              <img src={mediaUrl + logoPath} height={logoHeight} width={logoWidth} title={siteTitle} alt="logo" />
+            </a>
+          </React.Fragment>
+          { loginUser && <Account /> }
+        </div>
+        <div className="shared-file-view-md-main">
+          <div className="shared-file-view-head">
+            <div className="float-left">
+              <h2 className="ellipsis" title={fileName}>{fileName}</h2>
+              <p className="share-by ellipsis">{gettext('Shared by:')}{'  '}{sharedBy}</p>
+            </div>
+            {download &&
+              <div className="float-right">
+                {(loginUser && loginUser !== sharedBy) &&
+                  <Button color="secondary" id="save" className="shared-file-op-btn"
+                    onClick={this.handleSaveSharedFileDialog}>{gettext('Save as ...')}
+                  </Button>
+                }{' '}
+                {(trafficOverLimit === 'False') &&
+                  <Button color="success" className="shared-file-op-btn">
+                    <a href="?dl=1">{gettext('Download')}({Utils.bytesToSize(fileSize)})</a>
+                  </Button>
+                }
+              </div>
+            }
+          </div>
+          {this.getContent()}
+        </div>
+        {this.state.showSaveSharedFileDialog &&
+          <SaveSharedFileDialog
+            repoID={repoID}
+            sharedToken={sharedToken}
+            toggleCancel={this.toggleCancel}
+            handleSaveSharedFile={this.handleSaveSharedFile}
+          />
+        }
+      </div>
+    );
+  }
+}
+
+if (enableWatermark) {
+  let watermark_txt;
+  if (loginUser) {
+    watermark_txt = siteName + '  ' + loginUser;
+  } else {
+    watermark_txt = gettext('Anonymous User');
+  }
+  watermark.init({
+    watermark_txt: watermark_txt,
+    watermark_alpha: 0.075
+  });
+}
+
+ReactDOM.render(
+  <SharedFileViewImage />,
+  document.getElementById('wrapper')
+);

media/css/seahub_react.css

@@ -1076,3 +1076,18 @@ a.table-sort-op:focus {
     
 }
 
+.file-view-tip {
+    min-height: 130px;
+    padding: 30px 10px 10px;
+    margin: 0 20px;
+    background: #fff;
+    border: 1px solid #ccc;
+    box-shadow: 0 0 6px #ccc;
+    text-align: center;
+}
+@media (min-width: 992px) {
+    .file-view-tip {
+        width: 950px;
+        margin: 0 auto;
+    }
+}

seahub/templates/shared_file_view_react.html

@@ -29,5 +29,7 @@
     {% render_bundle 'sharedFileViewMarkdown' %}
 {% elif filetype == 'Text' %}
     {% render_bundle 'sharedFileViewText' %}
+{% elif filetype == 'Image' %}
+    {% render_bundle 'sharedFileViewImage' %}
 {% endif %}
 {% endblock %}

seahub/views/file.py

@@ -1190,7 +1190,7 @@ def view_shared_file(request, fileshare):
 
     template = 'shared_file_view.html'
 
-    if is_textual_file(file_type=filetype):
+    if is_textual_file(file_type=filetype) or filetype == IMAGE:
         template = 'shared_file_view_react.html'
 
     return render(request, template, {