[favicon] use file type icon as favicon for 'file view, shared file view' pages for different types of files (#5775)

frontend/src/components/file-view/file-view.js

@@ -38,6 +38,11 @@ class FileView extends React.Component {
     };
   }
 
+  componentDidMount() {
+    const fileIcon = Utils.getFileIconUrl(fileName, 192);
+    document.getElementById('favicon').href = fileIcon;
+  }
+
   toggleDetailsPanel = () => {
     this.setState({isDetailsPanelOpen: !this.state.isDetailsPanelOpen});
   };

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

@@ -56,6 +56,10 @@ class SharedFileView extends React.Component {
   };
 
   componentDidMount() {
+
+    const fileIcon = Utils.getFileIconUrl(fileName, 192);
+    document.getElementById('favicon').href = fileIcon;
+
     if (trafficOverLimit) {
       toaster.danger(gettext('File download is disabled: the share link traffic of owner is used up.'), {
         duration: 3

frontend/src/pages/markdown-editor/index.js

@@ -261,6 +261,9 @@ class MarkdownEditor extends React.Component {
 
   async componentDidMount() {
 
+    const fileIcon = Utils.getFileIconUrl(fileName, 192);
+    document.getElementById('favicon').href = fileIcon;
+
     // get file info
     const fileInfoRes = await seafileAPI.getFileInfo(repoID, filePath);
     const { mtime, size, starred, permission, last_modifier_name, id } = fileInfoRes.data;

frontend/src/pages/sdoc/sdoc-editor/index.js

@@ -1,6 +1,7 @@
 import React, { Fragment } from 'react';
 import { SimpleEditor } from '@seafile/sdoc-editor';
 import ExternalOperations from './external-operations';
+import { Utils } from '../../../utils/utils';
 
 export default class SdocEditor extends React.Component {
 
@@ -13,6 +14,12 @@ export default class SdocEditor extends React.Component {
     };
   }
 
+  componentDidMount() {
+    const { docName } = window.seafile;
+    const fileIcon = Utils.getFileIconUrl(docName, 192);
+    document.getElementById('favicon').href = fileIcon;
+  }
+
   toggleStar = (isStarred) => {
     this.setState({isStarred: isStarred});
   };

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

@@ -39,6 +39,11 @@ window.seafile = {
   assetsUrl,
 };
 
+(function() {
+  const fileIcon = Utils.getFileIconUrl(docName, 192);
+  document.getElementById('favicon').href = fileIcon;
+})();
+
 ReactDom.render(
   <I18nextProvider i18n={ i18n } >
     <Suspense fallback={<Loading />}>

frontend/src/utils/utils.js

@@ -87,7 +87,9 @@ export const Utils = {
     'mp3' : 'music.png',
     'oga' : 'music.png',
     'ogg' : 'music.png',
+    'wav' : 'music.png',
     'flac' : 'music.png',
+    'opus' : 'music.png',
     'aac' : 'music.png',
     'ac3' : 'music.png',
     'wma' : 'music.png',

seahub/templates/base.html

@@ -11,7 +11,7 @@
 <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
 {% endblock %}
 <meta http-equiv="x-ua-compatible" content="ie=edge" />
-<link rel="icon" href="{{ MEDIA_URL }}{% if filetype == 'dtable' %}{{ dtable_favicon_path }}{% else %}{{ favicon_path }}{% endif %}" type="image/x-icon">
+<link rel="icon" href="{{ MEDIA_URL }}{{ favicon_path }}" type="image/x-icon">
 <link rel="apple-touch-icon" href="{{ MEDIA_URL }}{{ apple_touch_icon_path }}">
 {% block extra_base_style %}
 <link rel="stylesheet" type="text/css" href="{% static "css/bootstrap.min.css" %}"/>

seahub/templates/base_for_react.html

@@ -13,7 +13,7 @@
 {% endblock %}
 {% block extra_ogp_tags %}{% endblock %}
 <meta http-equiv="x-ua-compatible" content="ie=edge" />
-<link rel="icon" href="{{ MEDIA_URL }}{% if filetype == 'dtable' %}{{ dtable_favicon_path }}{% else %}{{ favicon_path }}{% endif %}" type="image/x-icon">
+<link rel="icon" href="{{ MEDIA_URL }}{{ favicon_path }}" type="image/x-icon" id="favicon">
 <link rel="apple-touch-icon" href="{{ MEDIA_URL }}{{ apple_touch_icon_path }}">
 <link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}fontawesome/css/fontawesome-all.min.css" />
 <link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}css/sf_font3/iconfont.css" />

seahub/templates/markdown_file_view_react.html

@@ -7,7 +7,7 @@
         <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
         <title>{{ filename }}</title>
 
-        <link rel="shortcut icon" href="{{ MEDIA_URL }}{{ favicon_path }}" />
+        <link rel="icon" href="{{ MEDIA_URL }}{{ favicon_path }}" id="favicon" />
         <link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}fontawesome/css/fontawesome-all.min.css" />
         <link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}css/sf_font3/iconfont.css" />
         <link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}css/seafile-editor-font/seafile-editor-font.css" />
@@ -46,7 +46,7 @@
                   hasDraft: '{{ has_draft }}' === 'True',
                   draftFilePath: '{{ draft_file_path }}',
                   draftOriginFilePath: '{{ draft_origin_file_path }}',
-		  shareLinkForceUsePassword: {% if share_link_force_use_password %} true {% else %} false {% endif %},
+                  shareLinkForceUsePassword: {% if share_link_force_use_password %} true {% else %} false {% endif %},
                   shareLinkPasswordMinLength: {{ share_link_password_min_length }},
                   shareLinkPasswordStrengthLevel: {{ share_link_password_strength_level }},
                   shareLinkExpireDaysDefault: {{ share_link_expire_days_default }},