From 69e31c330419c81dc984218f8ea6afef4b988d07 Mon Sep 17 00:00:00 2001
From: Tixie <admin@glitch.family>
Date: Mon, 11 Mar 2019 01:14:00 +0100
Subject: [PATCH] feat(capture preview): Add ratio 1/1

---
 src/assets/css/4-modules/preview.css | 12 ++++---
 src/views/capture.vue                | 49 ++++++++++++++++++++++++++--
 src/views/download.vue               |  2 +-
 3 files changed, 56 insertions(+), 7 deletions(-)

diff --git a/src/assets/css/4-modules/preview.css b/src/assets/css/4-modules/preview.css
index dffb314..e6e2adc 100644
--- a/src/assets/css/4-modules/preview.css
+++ b/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%;
 }
diff --git a/src/views/capture.vue b/src/views/capture.vue
index 6d51204..01bc149 100644
--- a/src/views/capture.vue
+++ b/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>
diff --git a/src/views/download.vue b/src/views/download.vue
index 7f7340f..09887af 100644
--- a/src/views/download.vue
+++ b/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>