warpbox-dev/backend/templates/pages/preview.html

{{define "preview.html"}}{{template "base" .}}{{end}}

{{define "content"}}
<section class="download-view preview-view" aria-labelledby="preview-title">
  <div class="card download-card preview-card">
    <div class="card-content">
      {{if .Data.Locked}}
        <div class="file-emblem" aria-hidden="true">
          <svg viewBox="0 0 24 24" role="img" focusable="false"><path d="M12 17a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z" /><path d="M19 11V8A7 7 0 0 0 5 8v3" /><path d="M5 11h14v10H5z" /></svg>
        </div>
        <h1 id="preview-title">Protected file</h1>
        <p class="download-subtitle">Unlock the box before viewing this file.</p>
        <a class="button button-primary button-wide" href="/d/{{.Data.Box.ID}}">Unlock box</a>
      {{else}}
        <header class="preview-header">
          <div class="preview-title-group">
            <h1 id="preview-title" class="file-name" title="{{.Data.File.Name}}">{{.Data.File.Name}}</h1>
            <p class="download-subtitle">{{.Data.File.Size}} · {{.Data.File.ContentType}}</p>
          </div>
          <a class="button button-primary" href="{{.Data.DownloadURL}}">
            <svg viewBox="0 0 24 24" role="img" focusable="false" aria-hidden="true"><path d="M12 3v12m0 0 4-4m-4 4-4-4M5 21h14" /></svg>
            Download
          </a>
        </header>

        <div class="preview-window" data-preview-kind="{{.Data.File.PreviewKind}}" data-file-name="{{.Data.File.Name}}" data-content-type="{{.Data.File.ContentType}}" data-size-bytes="{{.Data.File.SizeBytes}}" data-source-url="{{.Data.DownloadURL}}?inline=1" data-download-url="{{.Data.DownloadURL}}" data-icon-url="{{.Data.File.IconURL}}" data-file-size="{{.Data.File.Size}}">
          <div class="preview-window-titlebar">
            <div>
              <strong data-preview-mode-label>Preview</strong>
              <span>{{.Data.File.ContentType}}</span>
            </div>
            <div class="preview-window-tools">
              <button class="preview-fullscreen-button" type="button" data-render-fullscreen hidden>Full Screen</button>
              <div class="preview-window-actions" aria-hidden="true"><span></span><span></span><span></span></div>
            </div>
          </div>
          <div class="preview-tabs" data-preview-tabs></div>
          <div class="preview-stage">
            <div class="default-preview" data-default-preview hidden>
              <img src="{{.Data.File.IconURL}}" alt="" loading="lazy">
              <div>
                <strong title="{{.Data.File.Name}}">{{.Data.File.Name}}</strong>
                <span>{{.Data.File.Size}} · {{.Data.File.ContentType}}</span>
              </div>
              <a class="button button-primary" href="{{.Data.DownloadURL}}">
                <svg viewBox="0 0 24 24" role="img" focusable="false" aria-hidden="true"><path d="M12 3v12m0 0 4-4m-4 4-4-4M5 21h14" /></svg>
                Download
              </a>
            </div>
            <img class="native-preview native-image-preview" data-image-preview src="{{.Data.DownloadURL}}?inline=1" alt="{{.Data.File.Name}}" hidden>
            <video class="native-preview native-video-preview" data-video-preview src="{{.Data.DownloadURL}}?inline=1" poster="{{.Data.File.ThumbnailURL}}" controls preload="metadata" hidden></video>
            <audio class="native-preview native-audio-preview" data-browser-audio-preview src="{{.Data.DownloadURL}}?inline=1" controls preload="metadata" hidden></audio>
            <div class="code-preview raw-code-preview" data-raw-preview hidden>
              <pre><code data-raw-output></code></pre>
            </div>
            <div class="code-preview prism-code-preview" data-code-preview hidden>
              <pre class="line-numbers"><code data-code-output></code></pre>
            </div>
            <iframe class="render-preview" data-render-preview title="Rendered preview of {{.Data.File.Name}}" sandbox hidden></iframe>
            <div class="large-preview-gate" data-large-preview-gate hidden>
              <strong>Large preview</strong>
              <p>This file is larger than 500 KB. Loading this preview may be slow on some devices.</p>
              <div>
                <button class="button button-primary" type="button" data-large-preview-confirm>Load anyway</button>
                <button class="button button-outline" type="button" data-large-preview-cancel>Cancel</button>
              </div>
            </div>
            <div class="preview-placeholder" data-preview-placeholder hidden>
              <img src="{{.Data.File.IconURL}}" alt="">
              <p>Preparing preview...</p>
            </div>
          </div>
        </div>
      {{end}}
    </div>
  </div>
</section>
{{end}}