[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',