wait #7094 @2:00

diff --git a/wp-content/mu-plugins/cube/src/Elementor/Widgets/HeroBlock.php b/wp-content/mu-plugins/cube/src/Elementor/Widgets/HeroBlock.php
index 1ce65c8d3adc50787918983a644907b97508206a..f62565be2adf218d5f38202be682fb6d4d05061b 100644 (file)
--- a/wp-content/mu-plugins/cube/src/Elementor/Widgets/HeroBlock.php
+++ b/wp-content/mu-plugins/cube/src/Elementor/Widgets/HeroBlock.php
@@ -40,7 +40,15 @@ class HeroBlock extends Widget_Base {
      * @return array Widget scripts dependencies.
      */
     public function get_script_depends() {
-        return [];
+        wp_register_script(
+            'cube-video-popup',
+            \App\asset_path('scripts/video-popup.js'),
+            ['jquery'], // Dependencies
+            null, // Version
+            true // In footer?
+        );
+
+        return ['cube-video-popup'];
     }
     /**
      * Register the widget controls.
@@ -120,6 +128,19 @@ class HeroBlock extends Widget_Base {
                 'show_external' => true
             ]
         );
+
+        $this->add_control(
+            'url_video',
+            [
+                'label' => __('Video embed url', 'cube'),
+                'type' => Controls_Manager::URL,
+                'default' => [
+                    'url' => '',
+                    'is_external' => false,
+                ],
+                'show_external' => false
+            ]
+        );
         
         $this->end_controls_section();
     }
@@ -139,6 +160,7 @@ class HeroBlock extends Widget_Base {
         $body_image = $this->get_settings('body_image');
         $cta_text = $this->get_settings('cta_text');
         $cta_link = $this->get_settings('cta_link');
+        $url_video = $this->get_settings('url_video');
 
         if ( ! empty( $cta_link['url'] ) ) {
             $this->add_render_attribute( 'cta_text', 'href', $cta_link['url'] );
@@ -192,6 +214,11 @@ class HeroBlock extends Widget_Base {
                     <?= wp_get_attachment_image($body_image['id'], 'full', false, ['class' => 'hero-block-body-image']); ?>
                 <?php endif; ?>
 
+                <?php if (!empty($url_video['url'])): ?>
+                    <div class="hero-block-player-button">
+                        <?= \App\svg_image('player', 'svg player-button')->toHtml(); ?>
+                    </div>
+                <?php endif ?>
             </div>
 
 
@@ -213,6 +240,14 @@ class HeroBlock extends Widget_Base {
             }
         </style>
 
+        <script>
+            (function ($) {
+               $(document).on("click", ".hero-block-player-button", function() {
+                   $('#player-video .elementor-custom-embed-image-overlay').click()
+               })
+            })(jQuery)
+        </script>
+
         <?php
     }
 }

diff --git a/wp-content/themes/c6/resources/assets/images/player.svg b/wp-content/themes/c6/resources/assets/images/player.svg
new file mode 100644 (file)
index 0000000..1f45865
--- /dev/null
+++ b/wp-content/themes/c6/resources/assets/images/player.svg
@@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="274" height="274" viewBox="0 0 274 274">
+  <defs>
+    <filter id="Ellipse_202" x="0" y="0" width="274" height="274" filterUnits="userSpaceOnUse">
+      <feOffset dx="10" dy="10" input="SourceAlpha"/>
+      <feGaussianBlur stdDeviation="10" result="blur"/>
+      <feFlood flood-color="#501408" flood-opacity="0.502"/>
+      <feComposite operator="in" in2="blur"/>
+      <feComposite in="SourceGraphic"/>
+    </filter>
+    <clipPath id="clip-path">
+      <rect id="Rectangle_825" data-name="Rectangle 825" width="74.661" height="84.544" transform="translate(0 0)" fill="#fff"/>
+    </clipPath>
+  </defs>
+  <g id="Groupe_1376" data-name="Groupe 1376" transform="translate(-833 -569)">
+    <g transform="matrix(1, 0, 0, 1, 833, 569)" filter="url(#Ellipse_202)">
+      <circle id="Ellipse_202-2" data-name="Ellipse 202" cx="107" cy="107" r="107" transform="translate(20 20)" fill="#ff431d"/>
+    </g>
+    <g id="Groupe_1375" data-name="Groupe 1375" transform="translate(933 653.729)">
+      <g id="Groupe_1374" data-name="Groupe 1374" clip-path="url(#clip-path)">
+        <path id="Tracé_3892" data-name="Tracé 3892" d="M71.1,39.041,7.291,2.2a3.731,3.731,0,0,0-5.6,3.23V79.112a3.731,3.731,0,0,0,5.6,3.23L71.1,45.5A3.73,3.73,0,0,0,71.1,39.041Z" fill="#fff"/>
+      </g>
+    </g>
+  </g>
+</svg>

diff --git a/wp-content/themes/c6/resources/assets/styles/widgets/hero-block.styl b/wp-content/themes/c6/resources/assets/styles/widgets/hero-block.styl
index 3989aab0859e168e38919f43d5a559553fb824a1..550ddb4238efc8ac4b4a3df0d44034ccea3f87d6 100644 (file)
--- a/wp-content/themes/c6/resources/assets/styles/widgets/hero-block.styl
+++ b/wp-content/themes/c6/resources/assets/styles/widgets/hero-block.styl
@@ -106,3 +106,34 @@ $breakpoint-hero = 1024px
     // to be and overflow: hidden can work on animated arrows
     display: inline-flex
     margin-top: 2em
+
+  &-player-button
+    position: absolute
+    left: 50%
+    top: 50%
+    transform: translate(-50%,-50%)
+    cursor: pointer
+    +below(1300px)
+      top: 70%
+
+    svg
+      +below(1300px)
+        width: 185px
+      +below(768px)
+        width: 90px
+
+  &-video
+    display: none
+    position fixed
+    top: 0
+    left: 0
+    width: 100vw
+    height: 100vh
+    z-index: 99
+    align-items: center
+    justify-content: center
+    background-color: rgba(0,0,0,.5)
+
+#player-video
+  visibility: hidden
+  position: absolute