feat(capture preview): Add ratio 1/1

src/assets/css/4-modules/preview.css

@@ -6,6 +6,8 @@
   position: relative;
   overflow: hidden;
   margin-bottom: 2rem;
+  max-width: 100%;
+  width: 35rem;
   border-radius: .5rem;
   background-color: rgba(0, 0, 0, .5);
   box-shadow: 0 .4rem 5rem rgba(0, 0, 0, .5);
@@ -36,9 +38,11 @@
 }
 
 .preview-visual {
-  position: relative;
+  position: absolute;
   display: block;
-  max-width: 100%;
-  width: 35rem;
-  height: 100%;
+  max-width: none;
+}
+
+.preview-visualImg {
+  width: 100%;
 }

src/views/capture.vue

@@ -5,8 +5,8 @@
     </div>
     <capture-options v-else/>
 
-    <div class="preview">
-      <video ref="preview" class="preview-visual" height="200px" preload="yes" autoplay muted playsinline webkit-playsinline></video>
+    <div class="preview" ref="previewcontainer">
+      <video ref="preview" class="preview-visual" preload="yes" autoplay muted playsinline webkit-playsinline></video>
     </div>
 
     <button class="capture-btn" :class="{ 'capture-btn--capturing': capturing.status }" @click.prevent="startCapture">Capture</button>
@@ -40,10 +40,55 @@ export default {
   methods: {
     startCapture () {
       this.$store.dispatch('capture')
+    },
+    getpreviewcontainerSquare () {
+      this.$refs.previewcontainer.style.height = this.$refs.previewcontainer.getBoundingClientRect().width + 'px'
+    },
+    applyScaling () {
+      const containerRect = this.$refs.previewcontainer.getBoundingClientRect()
+      const { left, top, width, height } = this.calcImageDimens(
+        containerRect.width,
+        containerRect.height,
+        this.$refs.preview.videoWidth,
+        this.$refs.preview.videoHeight
+      )
+
+      this.$refs.preview.style.left = `${left}px`
+      this.$refs.preview.style.top = `${top}px`
+      this.$refs.preview.style.width = `${width}px`
+      this.$refs.preview.style.height = `${height}px`
+    },
+    calcImageDimens (targetWidth, targetHeight, sourceWidth, sourceHeight) {
+      let left = 0
+      let top = 0
+      let width = targetWidth
+      let height = targetHeight
+
+      const targetAspect = width / height
+      const actualAspect = sourceWidth / sourceHeight
+
+      if (targetAspect > actualAspect) {
+        // cut off the top/bottom
+        height = Math.round(width / actualAspect)
+      } else {
+        // cut off the left/right
+        width = Math.round(height * actualAspect)
       }
+
+      left = -Math.floor((width - targetWidth) / 2)
+      top = -Math.floor((height - targetHeight) / 2)
+
+      return { left, top, width, height }
+    }
+
   },
   mounted: function () {
     this.$refs.preview.srcObject = this.mediaStream
+
+    this.getpreviewcontainerSquare()
+    this.$refs.preview.addEventListener('resize', ev => {
+      this.applyScaling()
+    }, false)
   }
 }
 </script>

src/views/download.vue

@@ -6,7 +6,7 @@
     </div>
 
     <div class="preview">
-      <img class="preview-visual" :src="downloading.objectUrl" alt="">
+      <img class="preview-visualImg" :src="downloading.objectUrl" alt="">
     </div>
 
     <a class="download-btn btn btn--primary w100" :href="downloading.objectUrl" :download="`souvenir${downloading.timestamp}.gif`">Download GIF</a>