feat(capture preview): Rescale on screen resize

src/assets/css/3-base/_03-layout.css

@@ -9,5 +9,6 @@
   flex-grow: 1;
   margin-right: auto;
   margin-left: auto;
-  max-width: 32rem;
+  max-width: calc(100% - 2rem);
+  width: 32rem;
 }

src/assets/css/5-screens/capture.css

@@ -6,6 +6,7 @@
   display: flex;
   flex-direction: column;
   flex-grow: 1;
+  max-width: 100%;
 }
 
 /* Progress bar

src/assets/css/5-screens/download.css

@@ -6,6 +6,7 @@
   display: flex;
   flex-direction: column;
   flex-grow: 1;
+  max-width: 100%;
 }
 
 .download-btn,

src/views/capture.vue

@@ -24,6 +24,12 @@ import { mapState } from 'vuex'
 
 export default {
   name: 'capture',
+  data () {
+    return {
+      loadListener: null,
+      resizeListener: null
+    }
+  },
   components: {
     captureOptions,
     captureProgress,
@@ -84,11 +90,21 @@ export default {
   },
   mounted: function () {
     this.$refs.preview.srcObject = this.mediaStream
-
     this.getpreviewcontainerSquare()
-    this.$refs.preview.addEventListener('resize', ev => {
+
+    // On load
+    this.loadListener = this.$refs.preview.addEventListener('resize', () => {
       this.applyScaling()
     }, false)
+    // On window resize
+    this.resizeListener = window.addEventListener('resize', () => {
+      this.getpreviewcontainerSquare()
+      this.applyScaling()
+    }, false)
+  },
+  destroyed: function () {
+    this.loadListener = null
+    this.resizeListener = null
   }
 }
 </script>

src/views/download.vue

@@ -5,7 +5,7 @@
       <button class="options__btn" @click="back">← back</button>
     </div>
 
-    <div class="preview">
+    <div class="preview" ref="previewcontainer">
       <img class="preview-visualImg" :src="downloading.objectUrl" alt="">
     </div>