repo_binary_viewer.vue 1.64 KB
Newer Older
Luke "Jared" Bennett's avatar
Luke "Jared" Bennett committed
1 2 3 4 5 6 7 8 9
<script>
import Store from './repo_store';
import RepoHelper from './repo_helper';

const RepoBinaryViewer = {
  data: () => Store,

  computed: {
    pngBlobWithDataURI() {
10 11 12 13 14 15 16 17 18 19 20 21
      if(this.binaryTypes.png){
        return `data:image/png;base64,${this.blobRaw}`;  
      }
      return '';
      
    },

    svgBlobWithDataURI() {
      if(this.binaryTypes.svg){
        return `data:image/svg+xml;utf8,${this.blobRaw}`;
      }
      return '';
Luke "Jared" Bennett's avatar
Luke "Jared" Bennett committed
22 23 24 25
    },
  },

  methods: {
26 27 28 29 30 31 32 33
    errored() {
      Store.binaryLoaded = false;
    },

    loaded() {
      Store.binaryLoaded = true;
    },

34 35 36 37 38 39
    getBinaryType() {
      if(this.binaryTypes.hasOwnProperty(this.activeFile.extension)) {
        return this.activeFile.extension;
      }
      return 'unknown';
    }
Luke "Jared" Bennett's avatar
Luke "Jared" Bennett committed
40 41 42 43
  },

  watch: {
    blobRaw() {
44 45
      Store.resetBinaryTypes();
      if (RepoHelper.isKindaBinary()) {
Luke "Jared" Bennett's avatar
Luke "Jared" Bennett committed
46 47 48 49 50
        this.activeFile.raw = false;
        // counts as binaryish so we use the binary viewer in this case.
        this.binary = true;
      }
      if (!this.binary) return;
51
      this.binaryTypes[this.getBinaryType()] = true;
Luke "Jared" Bennett's avatar
Luke "Jared" Bennett committed
52 53 54 55 56 57 58 59
    },
  },
};

export default RepoBinaryViewer;
</script>

<template>
60
<div id="binary-viewer" v-if="binary && !activeFile.raw">
61
  <img v-show="binaryTypes.png && binaryLoaded" @error="errored" @load="loaded" :src="pngBlobWithDataURI" :alt="activeFile.name"/>
62
  <img v-show="binaryTypes.svg" @error="errored" @load="loaded" :src="svgBlobWithDataURI" :alt="activeFile.name"/>
63
  <div v-if="binaryTypes.markdown" v-html="activeFile.html"></div>
64
  <div class="binary-unknown" v-if="binaryTypes.unknown">
65
    <span>Binary file. No preview available.</span>
66
  </div>
Luke "Jared" Bennett's avatar
Luke "Jared" Bennett committed
67 68
</div>
</template>