update template

modules/ad_banner/_ad_banner_widget2_video.html.erb

@@ -34,10 +34,53 @@
   </div>
 </div>
 <script type="text/javascript">
+  var ad_trigger_time;
   if (typeof ad_banners_count === 'undefined'){
     var ad_banners_count = 0;
   }
-
+  function ad_audio_button(ele,is_stop){
+    var $self = $(ele);
+    var button_container = $self.parents('.ba-banner-widget-youtube').eq(0);
+    if (is_stop){
+      $self.find('.jarallax-video-audio').remove();
+    }else{
+      var audio_div;
+      if ($self.hasClass('have-audio')){
+        audio_div = $('<div class="jarallax-video-audio"><i class="fas fa-volume-up"></i></div>');
+      }else{
+        audio_div = $('<div class="jarallax-video-audio"><i class="fas fa-volume-mute"></i></div>');
+      }
+      audio_div.click(function(event) {
+        var currentTime = new Date();
+        if (ad_trigger_time&&currentTime-ad_trigger_time<500){
+          return false;
+        }else{
+          ad_trigger_time = currentTime;
+        }
+        event.stopPropagation();
+        var $video = $self.find('video');
+        if ($self.hasClass('have-audio')){
+          $self.removeClass('have-audio');
+          $(this).find('i.fas').attr('class','fas fa-volume-mute');
+        }else{
+          $self.addClass('have-audio');
+          $(this).find('i.fas').attr('class','fas fa-volume-up');
+        }
+        if ($video.length>0){
+          $self.jPlayer("mute", !$self.data().jPlayer.options.muted);
+        }else{//youtube
+          var player = $self.find('iframe').data("yt_player");
+          if (player.isMuted()){
+            player.unMute();
+          }else{
+            player.mute();
+          }
+        }
+      });
+      button_container.find('.jarallax-video-audio').remove();
+      button_container.append(audio_div);
+    }
+  }
   if(document.getElementById("youtube-iframe-api") == null){
     var tag = document.createElement('script');
     tag.setAttribute("id", "youtube-iframe-api");
@@ -52,6 +95,11 @@
     ad_banners_count++;
   })
 if (typeof onYouTubeIframeAPIReady !== 'function'){
+  $(document).ready(function() {
+    $(document).on('touchstart click mousedown',".jarallax-video-audio",function(){
+      $(this).trigger('click');
+    });
+  });
   if(window.yt_players == undefined)
     window.yt_players = {};
   function onYouTubeIframeAPIReady(){
@@ -80,7 +128,7 @@ if (typeof onYouTubeIframeAPIReady !== 'function'){
                 events: {
                   'onReady': function(event){
                     var height = $(event.target.getIframe()).height();
-                    var banner_wrap = $(".w-ba-banner__wrap[data-overlay=\".w-ad-banner__overlay_"+id+"\"]");
+                    var banner_wrap = $(iframe).parents('.w-ba-banner__wrap').eq(0);
                     banner_wrap.height(height).css({"padding-bottom":"","padding-top":""});
                     banner_wrap.find(".cycle-carousel-wrap").css("top","3em");
                     delete (event.target.B || event.target.H).onStateChange;
@@ -105,7 +153,6 @@ if (typeof onYouTubeIframeAPIReady !== 'function'){
       }
     })
   }
-
   function onPlayerStateChange(event){
     var iframe = $(event.target.h),
         cyclediv = iframe.parents("div.cycle-slideshow");
@@ -114,10 +161,12 @@ if (typeof onYouTubeIframeAPIReady !== 'function'){
       cyclediv[0].need_resume = !(cyclediv.hasClass("cycle-paused"));
       cyclediv.cycle("pause");
       widget.find('.banner-pager,.controlplay,.button-mid,.ad-overlay').css('visibility','hidden')
+      ad_audio_button(iframe.parents(".w-ad-banner__slide").eq(0),false);
     }else if(event.data == YT.PlayerState.UNSTARTED || event.data == YT.PlayerState.PAUSED || event.data == YT.PlayerState.ENDED){
       if(cyclediv[0].need_resume)
         cyclediv.cycle("resume");
       widget.find('.banner-pager,.controlplay,.button-mid,.ad-overlay').css('visibility','')
+      ad_audio_button(iframe.parents(".w-ad-banner__slide").eq(0),true);
     }
     {{extra_state_chnage_script}}
   }
@@ -178,6 +227,33 @@ if (typeof onYouTubeIframeAPIReady !== 'function'){
   })
 </script>
 <style type="text/css">
+  .jarallax-video-audio{
+    z-index: 201;
+    font-size: 36px;
+    color: #FFF;
+    text-align: center;
+    position: absolute;
+    top: 2%;
+    right: 2%;
+    height: 66px;
+    width: 66px;
+    border-radius: 50%;
+    line-height: 1.8;
+    cursor: pointer;
+    border: 2px solid rgba(255,255,255,.6);
+    background-color: rgba(0,0,0,.6);
+    transition: all 1.2s ease;
+  }
+  @media (max-width: 768px){
+    .jarallax-video-audio{
+      top: 50%;
+    }
+  }
+  .jarallax-video-audio:hover{
+    color: #FFC500;
+    transition: all 0.6s ease;
+  }
+
   .w-ba-banner .controlplay .resume-slide.active i{
     color: #32D9C3;
   }