Moved build image proxy url to utils file

src/components/MoviesListItem.vue

@@ -29,6 +29,7 @@
 <script>
 import { mapActions } from "vuex";
 import img from "../directives/v-image";
+import { buildImageProxyUrl } from "../utils";
 
 export default {
   props: {
@@ -43,25 +44,7 @@ export default {
   data() {
     return {
       poster: null,
-      observed: false,
-      posterSizes: [
-        {
-          id: "w500",
-          minWidth: 500
-        },
-        {
-          id: "w342",
-          minWidth: 342
-        },
-        {
-          id: "w185",
-          minWidth: 185
-        },
-        {
-          id: "w154",
-          minWidth: 0
-        }
-      ]
+      observed: false
     };
   },
   computed: {
@@ -71,19 +54,33 @@ export default {
       return this.movie.poster
         ? `Poster for ${type} ${title}`
         : `Missing image for ${type} ${title}`;
+    },
+    imageWidth() {
+      if (this.image)
+        return Math.ceil(this.image.getBoundingClientRect().width);
+    },
+    imageHeight() {
+      if (this.image)
+        return Math.ceil(this.image.getBoundingClientRect().height);
     }
   },
   beforeMount() {
-    if (this.movie.poster != null) {
-      this.poster = "https://image.tmdb.org/t/p/w500" + this.movie.poster;
-    } else {
+    if (this.movie.poster == null) {
       this.poster = "/assets/no-image.svg";
+      return;
     }
+
+    this.poster = `https://image.tmdb.org/t/p/w500${this.movie.poster}`;
+    // this.poster = this.buildProxyURL(
+    //   this.imageWidth,
+    //   this.imageHeight,
+    //   assetUrl
+    // );
   },
   mounted() {
     const poster = this.$refs["poster"];
-    const image = poster.getElementsByTagName("img")[0];
-    if (image == null) return;
+    this.image = poster.getElementsByTagName("img")[0];
+    if (this.image == null) return;
 
     const imageObserver = new IntersectionObserver((entries, imgObserver) => {
       entries.forEach(entry => {
@@ -96,7 +93,7 @@ export default {
       });
     });
 
-    imageObserver.observe(image);
+    imageObserver.observe(this.image);
   },
   methods: {
     ...mapActions("popup", ["open"]),

src/utils.js

@@ -1,4 +1,4 @@
-const sortableSize = string => {
+export const sortableSize = string => {
   const UNITS = ["B", "kB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
   const [numStr, unit] = string.split(" ");
 
@@ -8,7 +8,7 @@ const sortableSize = string => {
   return numStr * Math.pow(10, exponent);
 };
 
-const parseJwt = token => {
+export const parseJwt = token => {
   var base64Url = token.split(".")[1];
   var base64 = base64Url.replace(/-/g, "+").replace(/_/g, "/");
   var jsonPayload = decodeURIComponent(
@@ -23,4 +23,12 @@ const parseJwt = token => {
   return JSON.parse(jsonPayload);
 };
 
-export { sortableSize, parseJwt };
+export const buildImageProxyUrl = (width, height, asset) => {
+  const proxyHost = `http://imgproxy.schleppe:8080/insecure/`;
+  const proxySizeOptions = `resize:fill:${Math.floor(width / 1)}:${Math.floor(
+    height / 1
+  )}:ce/q:85/plain/`;
+  const assetUrl = `https://image.tmdb.org/t/p/w500/${asset}`;
+
+  return `${proxyHost}${proxySizeOptions}${assetUrl}`;
+};