<commit_before><template>
  <div>
    <webview class="preview"
      v-observe-visibility="{ callback: visibilityChanged, once: true, }" />
  </div>
</template>

<script>
  const debounce = require("lodash.debounce");
  export default {
    name: "saver-preview",
    props: ["screenshot", "bus", "saver"],
    data() {
      return {
        options: {}
      }
    },
    created() {
      this.debounceHandleResize = debounce(this.handleResize, 200);
      this.debounceHandleOptionsChange = debounce(this.handleOptionsChange, 200);
    },
    async mounted() {
      if ( this.bus !== undefined ) {
        this.bus.$on("options-changed", this.debounceHandleOptionsChange);
        this.bus.$on("saver-changed", this.handleSaverChange);
      }

      window.addEventListener("resize", this.debounceHandleResize);
    },
    beforeDestroy: function () {
      window.removeEventListener("resize", this.debounceHandleResize);
    },
    computed: {
      aspectRatio() {
        var screen = this.$electron.screen;
        var size = screen.getPrimaryDisplay().bounds;
        var ratio = size.height / size.width;
        return ratio;
      },
      isLoaded() {
        return this.saver !== undefined;
      }
    },
    methods: {
      visibilityChanged(isVisible, entry) {
        if ( isVisible ) {
          // webview will have scrollbars by default and you can't
          // easily hide them
          var webview = this.$el.querySelector("webview");
          webview.addEventListener("dom-ready", () => {
            webview.insertCSS("html,body{ overflow: hidden !important; }");
          });

          this.handleSaverChange(this.saver);
          this.$nextTick(this.handleResize);
        }
      },
      webviewWidth() {
        if ( this.$el === undefined || this.$el.clientWidth <= 0 ) {
          return 0;
        }
        return this.$el.clientWidth - 4;
      },
      webviewHeight() {
        return this.webviewWidth() * this.aspectRatio;
      },
      urlOpts(s) {
        var base = {
          width: this.webviewWidth(),
          height: this.webviewHeight(),
          preview: 1,
          screenshot: this.screenshot,
          _: Math.random()
        };

        if ( typeof(s) === "undefined" ) {
          s = this.saver;
        }
        
        var mergedOpts = Object.assign(
          base,
          s.settings,
          this.options);

        return mergedOpts;
      },
      handleOptionsChange(data) {
        this.options = data;
        this.handleRedraw();
      },
      handleSaverChange(s) {
        this.handleRedraw();
      },
      handleResize() {
        var webview = this.$el.querySelector("webview");
        if ( this.webviewWidth() > 0 ) {
          console.log("resize to", this.webviewWidth(), this.webviewHeight());
          // only set the height manually! use css to set one dimension
          webview.style.height = this.webviewHeight() + "px";
          this.handleRedraw();
        }
      },
      handleRedraw() {
        if ( this.$el === undefined || this.saver === undefined ) {
          return;
        }
        let webview = this.$el.querySelector("webview");
        webview.src = this.saver.getUrl(this.urlOpts(this.saver))
      }
    },
  };
</script>

<style>
</style><commit_msg>Zoom preview to fit more<commit_after><template>
  <div>
    <webview class="preview"
      v-observe-visibility="{ callback: visibilityChanged, once: true, }" />
  </div>
</template>

<script>
  const debounce = require("lodash.debounce");
  export default {
    name: "saver-preview",
    props: ["screenshot", "bus", "saver"],
    data() {
      return {
        options: {},
        webview: undefined
      }
    },
    created() {
      this.debounceHandleResize = debounce(this.handleResize, 200);
      this.debounceHandleOptionsChange = debounce(this.handleOptionsChange, 200);
    },
    async mounted() {
      this.webview = this.$el.querySelector("webview");
      this.webview.addEventListener('dom-ready', () => {
        this.webview.insertCSS("html,body{ overflow: hidden !important; }");
        this.webview.zoomable = true;
        this.setZoom();
      }, {once: true});

      if ( this.bus !== undefined ) {
        this.bus.$on("options-changed", this.debounceHandleOptionsChange);
        this.bus.$on("saver-changed", this.handleSaverChange);
      }

      window.addEventListener("resize", this.debounceHandleResize);
    },
    beforeDestroy: function () {
      //console.log("soon i will be dead");
      this.webview.zoomable = false;
      window.removeEventListener("resize", this.debounceHandleResize);
    },
    destroyed() {
      //console.log("i am dead!");
    },
    computed: {
      aspectRatio() {
        var screen = this.$electron.screen;
        var size = screen.getPrimaryDisplay().bounds;
        var ratio = size.height / size.width;
        return ratio;
      },
      screenWidth() {
        var screen = this.$electron.screen;
        var size = screen.getPrimaryDisplay().bounds;
        return size.width;
      },
      isLoaded() {
        return this.saver !== undefined;
      }
    },
    methods: {
      webviewWidth() {
        if ( this.$el === undefined || this.$el.clientWidth <= 0 ) {
          return 0;
        }
        return this.$el.clientWidth;
      },
      webviewHeight() {
        return this.webviewWidth() * this.aspectRatio;
      },
      webviewZoomLevel() {
        return this.webviewWidth() / this.screenWidth;
      },
      urlOpts(s) {
        var base = {
          width: this.screenWidth,
          height: this.screenWidth * this.aspectRatio,
          preview: 1,
          screenshot: this.screenshot,
          _: Math.random()
        };

        if ( typeof(s) === "undefined" ) {
          s = this.saver;
        }
        
        var mergedOpts = Object.assign(
          base,
          s.settings,
          this.options);

        return mergedOpts;
      },
      handleOptionsChange(data) {
        this.options = data;
        this.handleRedraw();
      },
      handleSaverChange(s) {
        this.handleRedraw();
      },
      handleResize() {
        var webview = this.webview; //this.$el.querySelector("webview");
        if ( this.webviewWidth() > 0 ) {
          // only set the height manually! use css to set one dimension
          webview.style.height = this.webviewHeight() + "px";
          this.handleRedraw();
        }
      },
      handleRedraw() {
        if ( this.$el === undefined || this.saver === undefined ) {
          return;
        }
        let webview = this.webview; //this.$el.querySelector("webview");
        webview.src = this.saver.getUrl(this.urlOpts(this.saver));
        this.setZoom();
      },
      setZoom() {
        let webview = this.webview; //this.$el.querySelector("webview");
        if ( webview.zoomable ) {
          //console.log(webview);
          webview.setZoomFactor(this.webviewZoomLevel());
        }
      },
      visibilityChanged(isVisible, entry) {
        if ( isVisible ) {
          // webview will have scrollbars by default and you can't
          // easily hide them
          // var webview = this.webview; //this.$el.querySelector("webview");
          // let self = this;
          // webview.addEventListener("dom-ready", () => {
          //   webview.insertCSS("html,body{ overflow: hidden !important; }");
          // });

          this.handleSaverChange(this.saver);
          this.$nextTick(this.handleResize);
        }
      }
    },
  };
</script>

<style>
</style>
{'fraction_non_alphanumeric': 0.1413619501854796, 'fraction_numerical': 0.0027821939586645467, 'mean_word_length': 1.9732178022843638, 'pattern_counts': {'":': 0, '<': 23, '<?xml version=': 0, '>': 26, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6600710', 'n_tokens_mistral': 2208, 'n_tokens_neox': 2186, 'n_words': 413}