feat: Add object-fit

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

@@ -37,10 +37,26 @@
   }
 }
 
+.preview::before {
+  display: block;
+  padding-top: 100%;
+  width: 100%;
+  content: "";
+}
+
+.preview--novideo::before,
+.preview--novideo::after {
+  content: none;
+}
+
 .preview-visual {
   position: absolute;
-  display: block;
-  max-width: none;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+
+  object-fit: cover;
 }
 
 .preview-visualImg {

src/assets/css/7-rwd/_rwd-landscape.css

@@ -25,6 +25,14 @@
     align-items: center;
   }
 
+  .welcome-title {
+    margin-bottom: 4rem;
+  }
+
+  .welcome-about {
+    margin-bottom: 2rem;
+  }
+
   /* Capture screen
   -------------------------------------------------------------- */
 

src/views/screens/capture.vue

@@ -5,8 +5,8 @@
     </div>
     <capture-options v-else></capture-options>
 
-    <div ref="previewcontainer" class="preview">
-      <video ref="preview" class="preview-visual" preload="yes" :srcObject.prop="mediaStream" autoplay muted playsinline webkit-playsinline></video>
+    <div class="preview">
+      <video class="preview-visual" preload="yes" :srcObject.prop="mediaStream" autoplay muted playsinline webkit-playsinline></video>
     </div>
 
     <button class="capture-btn" :class="{ 'capture-btn--capturing': capturing.status }" @click.prevent="startCapture">Capture</button>
@@ -24,12 +24,6 @@ import { mapState } from 'vuex'
 
 export default {
   name: 'capture',
-  data () {
-    return {
-      loadListener: null,
-      resizeListener: null
-    }
-  },
   components: {
     captureOptions,
     captureProgress,
@@ -46,64 +40,7 @@ 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.getpreviewcontainerSquare()
-
-    // 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/screens/download.vue

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