Pretty Seafile Discord embeds - full template

pretty-seafile-discord-embeds.md

Showcase / Screenshots

The default embeds for Seafile file share links are pretty barebones:

I tried to make them a little prettier. Image and video links show the image/video being shared. (There's a caveat with the video sharing - check the html comment)

All embeds have the Seafile accent color as the sidebar color. Other filetypes are unaffected.

Installing

I've only tested this on Seafile 12. Not sure how much - if at all - the template code changed from 11 to 12.

Applying this custom template is similar to customizing the help pages, but don't create a subfolder in custom/templates. Instead, copy the HTML file to the root of the templates folder. Restart Seafile after this.

shared_file_view_react.html

{% extends "base_for_react.html" %}
{% load seahub_tags i18n %}
{% load render_bundle from webpack_loader %}

{% block sub_title %}{{file_name}} - {% endblock %}

{% block extra_ogp_tags %}
<!-- <meta property="og:type" content="object" />
<meta property="og:site_name" content="{{ site_name }}">
<meta property="og:url" content="{{ service_url }}{{ file_share_link }}" />
<meta property="og:title" content="{{ file_name }}" />
<meta property="og:image" content="{{ service_url }}{{ MEDIA_URL }}img/file/{{ icon_path_for_ogp }}" />
<meta property="og:description" content="{{ desc_for_ogp }}" /> -->

<meta name="theme-color" content="#ec8000" />

<meta name="twitter:site" content="{{ site_name }}" />
<meta property="og:site_name" content="{{ site_name }}" />

<meta name="twitter:title" content="{{ file_name }}" />
<meta name="twitter:description" content="{{ desc_for_ogp }}" />
<meta property="og:description" content="{{ desc_for_ogp }}" />

{% if filetype == 'Image' or filetype == 'XMind' %}
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="{{ raw_path }}" />
<meta property="og:image" content="{{ raw_path }}" />
{% elif filetype == 'Video' %}
<!-- About the width and height: Seafile doesn't know/store the video
     resolution, so there's no way of putting the correct values
     here. I chose to use a square resolution. Use whatever fits
     the type of content your users will be sharing most often.  -->
<meta name="twitter:card" content="player" />
<meta name="twitter:player" content="{{ raw_path }}" />
<meta name="twitter:player:width" content="2048" />
<meta name="twitter:player:height" content="2048" />
<meta name="twitter:player:stream" content="{{ raw_path }}" />
<meta name="twitter:player:stream:content_type" content="video/{{ fileext }}" />

<meta property="og:url" content="" />
<meta property="og:video:secure_url" content="{{ raw_path }}" />
<meta property="og:video" content="{{ raw_path }}" />
<meta property="og:video:type" content="video/{{ fileext }}" />
<meta property="og:video:width" content="2048" />
<meta property="og:video:height" content="2048" />
{% else %}
<meta name="twitter:card" content="summary" />
<meta property="og:image" content="{{ service_url }}{{ MEDIA_URL }}img/file/{{ icon_path_for_ogp }}" />
{% endif %}


{% endblock %}

{% block extra_style %}
{% if filetype == 'Markdown' %}
    <link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}seafile-editor/seafile-editor-font.css" />
    {% render_bundle 'sharedFileViewMarkdown' 'css' %}
{% elif filetype == 'Text' %}
    {% render_bundle 'sharedFileViewText' 'css' %}
{% elif filetype == 'Image' or filetype == 'XMind' %}
    {% render_bundle 'sharedFileViewImage' 'css' %}
{% elif filetype == 'SVG' %}
    {% render_bundle 'sharedFileViewSVG' 'css' %}
{% elif filetype == 'Video' %}
    {% render_bundle 'sharedFileViewVideo' 'css' %}
{% elif filetype == 'Audio' %}
    {% render_bundle 'sharedFileViewAudio' 'css' %}
{% elif filetype == 'PDF' %}
    <link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}js/pdf/web/viewer.css" />
    <link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}js/pdf/web/custom.css" />
    <link rel="resource" type="application/l10n" href="{{ MEDIA_URL }}js/pdf/web/locale/locale.properties" />
    {% render_bundle 'sharedFileViewPDF' 'css' %}
{% elif filetype == 'Document' %}
    <link rel="resource" type="application/l10n" href="{{ MEDIA_URL }}js/pdf/web/locale/locale.properties" />
    {% render_bundle 'sharedFileViewDocument' 'css' %}
{% elif filetype == 'SpreadSheet' %}
    {% render_bundle 'sharedFileViewSpreadsheet' 'css' %}
{% elif filetype == 'SDoc' %}
    <link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}sdoc-editor/sdoc-editor-font.css" />
    {% render_bundle 'sharedFileViewSdoc' 'css' %}
{% elif filetype == 'Unknown' %}
    {% render_bundle 'sharedFileViewUnknown' 'css' %}
{% endif %}
{% if not permissions.can_download %}
<style type="text/css">
body {
  user-select:none;
}
@media print {
  html {
    display:none;
  }
}
</style>
{% endif %}
{% endblock %}

{% block extra_script %}
<script type="text/javascript">
  window.shared = {
    pageOptions: {
      repoID: '{{ repo.id }}',
      filePath: '{{ path|escapejs }}',
      sharedToken: '{{ shared_token }}',
      trafficOverLimit: {% if traffic_over_limit %}true{% else %}false{% endif %},
      fileName: '{{ file_name|escapejs }}',
      fileSize: {{ file_size }},
      rawPath: '{{ raw_path|escapejs }}',
      sharedBy: '{{ shared_by|email2nickname|escapejs }}',
      siteName: '{{ site_name }}',
      enableWatermark: {% if enable_watermark %}true{% else %}false{% endif %},
      canDownload: {% if permissions.can_download %}true{% else %}false{% endif %},
      canEdit: {% if permissions.can_edit %}true{% else %}false{% endif %},
      fileContent: '{{ file_content|escapejs }}',
      err: {% if err %}'{{ err }}'{% else %}''{% endif %},
      fileType: '{{ filetype }}',
      fileExt: '{{ fileext }}',
      commitID: '{{ current_commit.id }}' || '{{ repo.head_cmmt_id }}',
      enableShareLinkReportAbuse: {% if enable_share_link_report_abuse %}true{% else %}false{% endif %},
      
      // for 'view file in shared dir'
      {% if zipped %}
      zipped: (function() {
        var list = [];
        {% for name, path in zipped %}
        list.push({
          'name': '{{ name|escapejs }}',
          'path': '{{ path|escapejs }}'
        });
        {% endfor %}
        return list;
      })(),
      {% endif %}
      prevImgPath: {% if img_prev %}'{{ img_prev|escapejs }}'{% else %}''{% endif %},
      nextImgPath: {% if img_next %}'{{ img_next|escapejs }}'{% else %}''{% endif %},
      assetsUrl: '{{ assets_url }}',
      sharedFileDownloadURL: {% if shared_file_download_url %}'{{ shared_file_download_url }}'{% else %}''{% endif %},

      {% if filetype == 'SDoc' %}
        docPath: '{{ path|escapejs }}',
        docName: '{{ file_name|escapejs }}',
        docUuid: '{{ file_uuid }}',
        assetsUrl: '{{ assets_url }}',
        seadocAccessToken: '{{ seadoc_access_token }}',
        seadocServerUrl: '{{ seadoc_server_url }}',
        canEditFile: {% if can_edit_file %}true{% else %}false{% endif %},
        filePerm: '{{ file_perm }}',
      {% endif %}
    }
  };
</script>
{% if filetype == 'Markdown' %}
    {% render_bundle 'sharedFileViewMarkdown' 'js' %}
{% elif filetype == 'Text' %}
    {% render_bundle 'sharedFileViewText' 'js' %}
{% elif filetype == 'Image' or filetype == 'XMind' %}
    {% render_bundle 'sharedFileViewImage' 'js' %}
{% elif filetype == 'SVG' %}
    {% render_bundle 'sharedFileViewSVG' 'js' %}
{% elif filetype == 'Video' %}
    {% render_bundle 'sharedFileViewVideo' 'js' %}
{% elif filetype == 'Audio' %}
    {% render_bundle 'sharedFileViewAudio' 'js' %}
{% elif filetype == 'PDF' %}
    {% render_bundle 'sharedFileViewPDF' 'js' %}
    <script type="text/javascript">
      var SEAFILE_FILE_URL = '{{ raw_path|escapejs }}';
      var SEAFILE_PDFJS_DIR = '{{MEDIA_URL}}js/pdf';
    </script>
    <script type="text/javascript" src="{{MEDIA_URL}}js/pdf/build/pdf.js"></script>
    <script type="text/javascript" src="{{MEDIA_URL}}js/pdf/web/viewer.js"></script>
{% elif filetype == 'Document' %}
    {% render_bundle 'sharedFileViewDocument' 'js' %}
    <script type="text/javascript">
      var commit_id = '{{ current_commit.id }}' || '{{ repo.head_cmmt_id }}';
      var SEAFILE_FILE_URL = '{{ SITE_ROOT }}office-convert/static/{{ repo.id }}/' + commit_id + '{{ path|urlencode }}/fake.pdf?token={{shared_token}}';
      var SEAFILE_PDFJS_DIR = '{{MEDIA_URL}}js/pdf';
    </script>
    <script type="text/javascript" src="{{MEDIA_URL}}js/pdf/build/pdf.js"></script>
{% elif filetype == 'SpreadSheet' %}
    {% render_bundle 'sharedFileViewSpreadsheet' 'js' %}
{% elif filetype == 'SDoc' %}
    {% render_bundle 'sharedFileViewSdoc' 'js' %}
{% elif filetype == 'Unknown' %}
    {% render_bundle 'sharedFileViewUnknown' 'js' %}
{% endif %}
{% endblock %}