feat(BlockVideoOembed): add multiple size options

* feat(BlockVideoOembed): add size options * feat(BlockVideoOembed): add smaller play button on small size * feat(BlockVideoOembed): update readme * refactor(BlockVideoOembed): translatable labels, remove width from wrapper, add png to mime types
flyntwp · Jul 1, 2020 · a26a933 · a26a933
1 parent 4e84112
commit a26a933
Show file tree

Hide file tree

Showing 7 changed files with 76 additions and 8 deletions.
diff --git a/Components/BlockVideoOembed/Partials/_figure.twig b/Components/BlockVideoOembed/Partials/_figure.twig
@@ -3,9 +3,13 @@
     src="{{ image.src|resizeDynamic(1280, 720) }}"
     srcset="{{ placeholderImage(1280, 720) }}"
     data-srcset="
+      {{ image.src|resizeDynamic(2048, 1152) }} 2048w,
       {{ image.src|resizeDynamic(1920, 1080) }} 1920w,
-      {{ image.src|resizeDynamic(1280, 720) }} 1280w,
-      {{ image.src|resizeDynamic(750, 422) }} 750w"
+      {{ image.src|resizeDynamic(1440, 810) }} 1440w,
+      {{ image.src|resizeDynamic(1320, 743) }} 1320w,
+      {{ image.src|resizeDynamic(800, 450) }} 800w,
+      {{ image.src|resizeDynamic(600, 338) }} 600w,
+      {{ image.src|resizeDynamic(375, 211) }} 375w"
     data-sizes="auto"
     alt="{{ image.alt|e }}">
   {% if image.caption %}

diff --git a/Components/BlockVideoOembed/Partials/_video.scss b/Components/BlockVideoOembed/Partials/_video.scss
@@ -3,6 +3,7 @@
 @import 'videoLoader';
 
 .video {
+  margin: 0 auto;
   position: relative;
 
   &-player {

diff --git a/Components/BlockVideoOembed/Partials/_videoPlayButton.scss b/Components/BlockVideoOembed/Partials/_videoPlayButton.scss
@@ -73,7 +73,6 @@ $play-button-triangle-size: (
 
 .video-playButton {
   @include play-button($color-gray, $background-opacity, $border-width, $color-white, $play-button-circle-diameter, $color-white, $play-button-triangle-size);
-
   cursor: pointer;
   display: block;
   height: 100%;
@@ -84,3 +83,27 @@ $play-button-triangle-size: (
   width: 100%;
   z-index: 2;
 }
+
+&.flyntComponent--sizeSmall {
+  $play-button-small-circle-diameter: (
+    'desktop': 60px,
+    'mobile': 40px
+  );
+
+  $play-button-small-triangle-size: (
+    'desktop': 20px,
+    'mobile': 10px
+  );
+
+  .video-playButton {
+    @include play-button(
+      $color-gray,
+      $background-opacity,
+      $border-width,
+      $color-white,
+      $play-button-small-circle-diameter,
+      $color-white,
+      $play-button-small-triangle-size
+    );
+  }
+}
diff --git a/Components/BlockVideoOembed/README.md b/Components/BlockVideoOembed/README.md
@@ -1,3 +1,3 @@
 # Block Video oEmbed
 
-Instead of embedding a video player directly, this component shows a poster image with an overlaying play button at first only. When clicked, the iframe based embed player is loaded autoplays the video, if the browser supports autoplay.
+Instead of embedding a video player directly, this component shows a poster image with an overlaying play button at first only. When clicked, the iframe based embed player is loaded autoplays the video, if the browser supports autoplay. Multiple size options available.
diff --git a/Components/BlockVideoOembed/_style.scss b/Components/BlockVideoOembed/_style.scss
@@ -1,3 +1,27 @@
 [is='flynt-block-video-oembed'] {
   @import 'Partials/video';
+
+  &.flyntComponent--sizeSmall {
+    .video {
+      max-width: 375px;
+    }
+  }
+
+  &.flyntComponent--sizeMedium {
+    .video {
+      max-width: $content-max-width;
+    }
+  }
+
+  &.flyntComponent--sizeLarge {
+    .video {
+      max-width: 800px;
+    }
+  }
+
+  &.flyntComponent--sizeFull {
+    .figure-caption {
+      margin-left: 0.625rem;
+    }
+  }
 }
diff --git a/Components/BlockVideoOembed/functions.php b/Components/BlockVideoOembed/functions.php
@@ -35,7 +35,7 @@ function getACFLayout()
                 'type' => 'image',
                 'preview_size' => 'medium',
                 'mime_types' => 'jpg,jpeg,png',
-                'instructions' => __('Recommended Size: Min-Width 1200px; Min-Height: 675px; Image-Format: JPG, PNG. Aspect Ratio 16/9.', 'flynt'),
+                'instructions' => __('Recommended Size: Min-Width 1920px; Min-Height: 1080px; Image-Format: JPG, PNG. Aspect Ratio 16/9.', 'flynt'),
                 'required' => 1
             ],
             [
@@ -57,7 +57,23 @@ function getACFLayout()
                 'type' => 'group',
                 'layout' => 'row',
                 'sub_fields' => [
-                    FieldVariables\getTheme()
+                    FieldVariables\getTheme(),
+                    [
+                        'label' => __('Size', 'flynt'),
+                        'name' => 'size',
+                        'type' => 'radio',
+                        'other_choice' => 0,
+                        'save_other_choice' => 0,
+                        'layout' => 'horizontal',
+                        'choices' => [
+                            'sizeSmall' => __('Small', 'flynt'),
+                            'sizeMedium' => __('Medium', 'flynt'),
+                            'sizeLarge' => __('Large (Default)', 'flynt'),
+                            'sizeHuge' => __('Huge', 'flynt'),
+                            'sizeFull' => __('Full', 'flynt'),
+                        ],
+                        'default_value' => 'sizeLarge',
+                    ],
                 ]
             ]
         ]

diff --git a/Components/BlockVideoOembed/index.twig b/Components/BlockVideoOembed/index.twig
@@ -1,5 +1,5 @@
-<div class="flyntComponent componentSpacing {{ options.theme }}" is="flynt-block-video-oembed">
-  <div class="container centerMaxWidthContainer">
+<div class="flyntComponent flyntComponent--{{ options.size }} componentSpacing {{ options.theme }}" is="flynt-block-video-oembed">
+  <div class="container{% if options.size != 'sizeFull' %} centerMaxWidthContainer{% endif %}">
     {% include 'Partials/_video.twig' ignore missing with {video: video, image: posterImage} only %}
   </div>
 </div>