wait #7559 @0:40

diff --git a/wp-content/themes/miranui_new/resources/css/widgets/_bannerText.scss b/wp-content/themes/miranui_new/resources/css/widgets/_bannerText.scss
index 9108b8d3dfdc5f1f99acbbe3b2bcf3db5921b960..a35be47503d90eba649dc90810a1419a0bd747f3 100644 (file)
--- a/wp-content/themes/miranui_new/resources/css/widgets/_bannerText.scss
+++ b/wp-content/themes/miranui_new/resources/css/widgets/_bannerText.scss
@@ -29,6 +29,29 @@
       }
     }
 
+    .controls {
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+      z-index: 2;
+      bottom: 24px;
+      @include above($mdScreen) {
+        bottom: 49px;
+      }
+
+      svg {
+        cursor: pointer;
+        position: absolute;
+        bottom: 0;
+        &.hide {
+          display: none;
+        }
+        &:hover rect{
+          fill: #22335C;
+        }
+      }
+    }
+
     h1 {
       position: relative;
       max-width: 828px;

diff --git a/wp-content/themes/miranui_new/resources/js/app.js b/wp-content/themes/miranui_new/resources/js/app.js
index 172bf0bf7714432161d677710dd2e45af327a20a..ae5f8f21d31e1508fcdf8be11364ab289461f269 100644 (file)
--- a/wp-content/themes/miranui_new/resources/js/app.js
+++ b/wp-content/themes/miranui_new/resources/js/app.js
@@ -58,6 +58,33 @@ document.addEventListener("DOMContentLoaded", () => {
     })
   })
 
+  //
+  var media = document.querySelector("video");
+
+  var play = document.getElementById("play");
+  var stop = document.getElementById("pause");
+
+  play.addEventListener("click", playPauseMedia);
+  function playPauseMedia() {
+    this.classList.add('hide')
+    stop.classList.remove('hide')
+    if (media.paused) {
+      play.setAttribute("data-icon", "u");
+      media.play();
+    } else {
+      play.setAttribute("data-icon", "P");
+      media.pause();
+    }
+  }
+
+  stop.addEventListener("click", stopMedia);
+  function stopMedia() {
+    this.classList.add('hide')
+    play.classList.remove('hide')
+    media.pause();
+    play.setAttribute("data-icon", "P");
+  }
+
   //
   new Splide( '.splide', {
     drag: false,

diff --git a/wp-content/themes/miranui_new/resources/views/widgets/bannerText.blade.php b/wp-content/themes/miranui_new/resources/views/widgets/bannerText.blade.php
index 3b69d01996ad5bbf31014f79719583b544c8f4cc..1e4a8e4dc31c5ac37898ed26a60695b1988d669f 100644 (file)
--- a/wp-content/themes/miranui_new/resources/views/widgets/bannerText.blade.php
+++ b/wp-content/themes/miranui_new/resources/views/widgets/bannerText.blade.php
@@ -7,6 +7,23 @@
     <video class="elementor-video" autoplay="true" loop muted="1">
       <source src="{{ esc_attr( $video_url ) }}" type="video/mp4" />
     </video>
+    <div class="controls mira-container">
+      <svg id="play" class="hide" xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40">
+        <g  transform="translate(-114 -961)">
+          <rect id="Rectangle_143" data-name="Rectangle 143" width="40" height="40" rx="20" transform="translate(114 961)" fill="#6f7bb6"/>
+          <path id="Tracé_113" data-name="Tracé 113" d="M2.338,2.926V16.583a1.171,1.171,0,0,0,1.725,1.032l12.746-6.829a1.171,1.171,0,0,0,0-2.065L4.063,1.894A1.171,1.171,0,0,0,2.338,2.926Z" transform="translate(126.175 971.245)" fill="#fff"/>
+        </g>
+      </svg>
+      <svg id="pause" xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40">
+        <g transform="translate(-114 -901)">
+          <rect id="Rectangle_144" data-name="Rectangle 144" width="40" height="40" rx="20" transform="translate(114 901)" fill="#6f7bb6"/>
+          <g id="Groupe_83" data-name="Groupe 83" transform="translate(122 909)">
+            <path id="Tracé_114" data-name="Tracé 114" d="M6.75,3.75h1.5a1.469,1.469,0,0,1,1.5,1.5v13.5a1.469,1.469,0,0,1-1.5,1.5H6.75a1.469,1.469,0,0,1-1.5-1.5V5.25a1.469,1.469,0,0,1,1.5-1.5" fill="#fff"/>
+            <path id="Tracé_115" data-name="Tracé 115" d="M15.75,3.75h1.5a1.469,1.469,0,0,1,1.5,1.5v13.5a1.469,1.469,0,0,1-1.5,1.5h-1.5a1.469,1.469,0,0,1-1.5-1.5V5.25a1.469,1.469,0,0,1,1.5-1.5" fill="#fff"/>
+          </g>
+        </g>
+      </svg>
+    </div>
   @endif
   @if($settings['title'])
     <h1 class="bigtitle" data-aos="fade-up" data-aos-duration="1000">{{ $settings['title'] }}</h1>