From 0a36b69584f38be8862b71063af925bce4e56932 Mon Sep 17 00:00:00 2001
From: chiu <naruto0426@rulingcom.com>
Date: Mon, 29 Aug 2022 02:57:59 +0000
Subject: [PATCH] Update _ad_banner_widget2_video.html.erb

---
 _ad_banner_widget2_video.html.erb | 474 ++++++++++++++++++++++++++++++
 1 file changed, 474 insertions(+)
 create mode 100644 _ad_banner_widget2_video.html.erb

diff --git a/_ad_banner_widget2_video.html.erb b/_ad_banner_widget2_video.html.erb
new file mode 100644
index 0000000..5293190
--- /dev/null
+++ b/_ad_banner_widget2_video.html.erb
@@ -0,0 +1,474 @@
+<div class="w-ad-banner ad-banner-widget-2 w-ba-banner ba-banner-widget-1 ba-banner-widget-youtube">
+  <div class="w-ad-banner__wrap  w-ba-banner__wrap  cycle-slideshow"
+      data-list="images"
+      data-level="0"
+      data-cycle-slides=".w-ba-banner__slide"
+      data-cycle-log="false"
+      data-overlay=".w-ad-banner__overlay_{{subpart-id}}"
+      data-overlay-template="<h2><span>{{title}}</span></h2>{{desc}}"
+      data-cycle-auto-height="{{base_image}}"
+      data-cycle-speed="{{speed}}"
+      data-cycle-timeout="{{timeout}}"
+      data-cycle-fx="{{ad_fx}}"
+      data-pager=".banner_caption_{{subpart-id}}"
+      data-pager-template="<li><button title='pager'></button></li>"
+      data-pager-active-class="active-slide"
+      data-cycle-youtube="true"
+      data-cycle-youtube-autostart="false"
+      data-cycle-swipe="true"
+      data-cycle-prev=".banner_prev"
+      data-cycle-next=".banner_next"
+      data-cycle-pause-on-hover="true"
+      style="padding-bottom: 56.25%;"
+      >
+
+    {{html}}
+  </div>
+  <div class="ad-overlay w-ad-banner__overlay_{{subpart-id}}"></div>
+  <div class="w-ba-banner__caption w-ad-banner__pager-2 banner-pager banner_caption_{{subpart-id}}"></div>
+  <ul class="controlplay"><a href="javascript:;" class="resume-slide active" title="<%= I18n.t("ad_banner.resume") %>"><i aria-hidden="true" aria-label="<%= I18n.t("ad_banner.resume") %>"></i><p style="display: none;"><%= I18n.t("ad_banner.resume") %></p></a><a href="javascript:;" class="pause-slide" title="<%= I18n.t("ad_banner.pause") %>"><i aria-hidden="true" aria-label="<%= I18n.t("ad_banner.pause") %>"></i><p style="display: none;"><%= I18n.t("ad_banner.pause") %></p></a></ul>
+  <ul class="button-mid">
+    <i class="fa fa-angle-left prev-button" aria-label="<%= I18n.t("ad_banner.prev") %>"></i>
+    <i class="fa fa-angle-right next-button" aria-label="<%= I18n.t("ad_banner.next") %>"></i>
+  </ul>
+</div>
+<script type="text/javascript">
+  var ad_trigger_time;
+  if (typeof ad_banners_count === 'undefined'){
+    var ad_banners_count = 0;
+  }
+  var control_play_btn_pause = function(){
+    this.attr('aria-label', '<%= I18n.t("ad_banner.resume") %>');
+    this.attr('title', '<%= I18n.t("ad_banner.resume") %>');
+    this.find('p').text('<%= I18n.t("ad_banner.resume") %>');
+    this.find('i.fa-pause').removeClass('fa-pause').addClass('fa-play');
+  }
+  var control_play_btn_play = function(){
+    this.attr('aria-label', '<%= I18n.t("ad_banner.pause") %>');
+    this.attr('title', '<%= I18n.t("ad_banner.pause") %>');
+    this.find('p').text('<%= I18n.t("ad_banner.pause") %>');
+    this.find('i.fa-play').removeClass('fa-play').addClass('fa-pause');
+  }
+  function ad_audio_button(ele,is_stop){
+    var $self = $(ele);
+    var button_container = $self.parents('.ba-banner-widget-youtube').eq(0);
+    var append_class = "";
+    if (is_stop){
+      button_container.find('.jarallax-video-audio').remove();
+      var control_play_btn = $('.jarallax-video-control-play');
+      if(control_play_btn.length){
+        control_play_btn_pause.call(control_play_btn);
+      }
+    }else{
+      var control_play_btn = null;
+      if(window.accessibility_mode){
+        append_class = " accessibility_mode_btn";
+        var control_play_btn = $('.jarallax-video-control-play');
+        if(control_play_btn.length){
+
+          control_play_btn_play.call(control_play_btn);
+          control_play_btn = null;
+        }else{
+          control_play_btn = $('<button title="<%= I18n.t("ad_banner.pause") %>" class="jarallax-video-control-play"><i class="fas fa-pause" aria-label="<%= I18n.t("ad_banner.pause") %>" aria-hidden="true"></i><p style=\"display: none;\"><%= I18n.t("ad_banner.pause") %></p></button>');
+        }
+      }
+      var audio_div;
+      if ($self.hasClass('have-audio')){
+        audio_div = $('<button title="<%= I18n.t("ad_banner.muted") %>" class="jarallax-video-audio'+append_class+'"><i class="fas fa-volume-up" aria-label="<%= I18n.t("ad_banner.muted") %>" aria-hidden="true"></i><p style=\"display: none;\"><%= I18n.t("ad_banner.muted") %></p></button>');
+      }else{
+        audio_div = $('<button title="<%= I18n.t("ad_banner.unmuted") %>" class="jarallax-video-audio'+append_class+'"><i class="fas fa-volume-mute" aria-label="<%= I18n.t("ad_banner.unmuted") %>" aria-hidden="true"></i><p style=\"display: none;\"><%= I18n.t("ad_banner.unmuted") %></p></button>');
+      }
+      audio_div.find('p').css('display','none'); //fix CSP
+      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).attr('title','<%= I18n.t("ad_banner.unmuted") %>').find('i.fas').attr('class','fas fa-volume-mute').attr('aria-label','<%= I18n.t("ad_banner.unmuted") %>');
+        }else{
+          $self.addClass('have-audio');
+          $(this).attr('title','<%= I18n.t("ad_banner.muted") %>').find('i.fas').attr('class','fas fa-volume-up').attr('aria-label','<%= I18n.t("ad_banner.muted") %>');
+        }
+        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(control_play_btn != null){
+        audio_div.after(control_play_btn);
+        control_play_btn.click(function(){
+          var cycle_slideshow = button_container.find('.cycle-slideshow');
+          var opts = cycle_slideshow.data('cycle.opts');
+          var active_slide = opts.slides.filter('.'+opts.slideActiveClass);
+          if(active_slide.length){
+            var yt_iframe = active_slide.find('iframe');
+            if(yt_iframe.length == 0){
+              var jplayer = active_slide.find('.jp-jplayer').data('jPlayer');
+              if(jplayer){
+                if(jplayer.htmlElement.video.paused){
+                  jplayer.play();
+                }else{
+                  jplayer.pause();
+                }
+              }
+            }else{
+              if(window.yt_players){
+                var subpart_id = button_container.attr('data-subpart-id');
+                var subpart_yt_players = window.yt_players[subpart_id];
+                if(subpart_yt_players){
+                  var yt_player = subpart_yt_players[yt_iframe.attr('id')];
+                  var play_state = yt_player.getPlayerState();
+                  if(play_state == YT.PlayerState.PLAYING || play_state == YT.PlayerState.BUFFERING){
+                    yt_player.pauseVideo();
+                  }else if(play_state == YT.PlayerState.UNSTARTED || play_state == YT.PlayerState.PAUSED || play_state == YT.PlayerState.ENDED || play_state == YT.PlayerState.CUED){
+                    yt_player.playVideo();
+                    play_state = yt_player.getPlayerState();
+                    if(play_state == YT.PlayerState.UNSTARTED || play_state == YT.PlayerState.PAUSED || play_state == YT.PlayerState.ENDED || play_state == YT.PlayerState.CUED){
+                      yt_player.mute().playVideo();
+                    }
+                  }
+                }
+              }
+            }
+          }
+        })
+      }
+    }
+
+  }
+  if(document.getElementById("youtube-iframe-api") == null){
+    var tag = document.createElement('script');
+    tag.setAttribute("id", "youtube-iframe-api");
+    tag.src = "https://www.youtube.com/iframe_api";
+    var firstScriptTag = document.getElementsByTagName('script')[0];
+    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
+  }
+  if(window.init_yt_banner == undefined){
+    function init_yt_banner(banner__slide){
+      var $banner__slide = $(banner__slide);
+      if( $banner__slide.data("yt-binded")== "0" ){
+        $banner__slide.data("yt-binded","1");
+        var obj = $banner__slide.find("iframe");
+        obj.attr("id", $banner__slide.data("youtube-id") + "_" + ad_banners_count);
+        ad_banners_count++;
+      }
+    }
+  }
+  $("*[data-yt-binded=0]").each(function(){
+    init_yt_banner(this);
+  })
+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 find_out_yt_event_list_key(yt_player){
+    var defalt_key = 'o';
+    var all_keys = Object.keys(yt_player).filter(function(s){return s.length == 1});
+    var prop_nums_thresh = 6;
+    if(all_keys.indexOf(defalt_key) != -1){
+      if((yt_player[defalt_key] instanceof Object) && Object.keys(yt_player[defalt_key]).length > prop_nums_thresh){
+        return defalt_key;
+      }
+    }
+    var event_key;
+    all_keys.forEach(function(k){
+      if((yt_player[k] instanceof Object) && Object.keys(yt_player[k]).length > prop_nums_thresh){
+        event_key = k;
+        return false;
+      }
+    })
+    return event_key;
+  }
+  function find_out_yt_event_list_count_key(yt_player, event_list_key){
+    var defalt_key = 'v';
+    var all_keys = Object.keys(yt_player).filter(function(s){return s.length == 1});
+    var equal_count = yt_player[event_list_key].length;
+    if(all_keys.indexOf(defalt_key) != -1){
+      if(yt_player[defalt_key] == equal_count){
+        return defalt_key;
+      }
+    }
+    var count_key;
+    all_keys.forEach(function(k){
+      if(yt_player[k] == equal_count){
+        count_key = k;
+        return false;
+      }
+    })
+    return count_key;
+  }
+  function find_out_yt_event_list_array_key(event_dict){
+    var defalt_key = 'i';
+    var all_keys = Object.keys(event_dict);
+    if(all_keys.indexOf(defalt_key) != -1){
+      var tmp = event_dict[defalt_key];
+      if(Array.isArray(tmp) && tmp.indexOf('onStateChange') != -1){
+        return defalt_key;
+      }
+    }
+    var array_key;
+    all_keys.forEach(function(k){
+      var tmp = event_dict[k];
+      if(Array.isArray(tmp) && tmp.indexOf('onStateChange') != -1){
+        array_key = k;
+        return false;
+      }
+    })
+    return array_key;
+  }
+  function find_out_yt_event_relation_key(event_dict, is_obj){ // is_obj = true => store event idx array. false => store whether event init(true or false)
+    var defalt_key = 'j';
+    var all_keys = Object.keys(event_dict);
+    if(all_keys.indexOf(defalt_key) != -1){
+      var tmp = event_dict[defalt_key];
+      if((tmp instanceof Object) && tmp['onStateChange']){
+        if(!is_obj || (tmp['onStateChange'] instanceof Object)){
+          return defalt_key;
+        }
+      }
+    }
+    var relation_key;
+    all_keys.forEach(function(k){
+      var tmp = event_dict[k];
+      if((tmp instanceof Object) && tmp['onStateChange']){
+        if(!is_obj || (tmp['onStateChange'] instanceof Object)){
+          relation_key = k;
+          return false;
+        }
+      }
+    })
+    return relation_key;
+  }
+  function onYouTubeIframeAPIReady(){
+    $(".w-ba-banner").on('cycle-post-initialize', function(){
+      init_banner(this);
+    });
+    function init_banner(banner){
+      var $banner = $(banner);
+      $banner.find('.w-ad-banner__slide').each(function(j, banner__slide){
+        init_yt_banner(banner__slide);
+      })
+      var iframes = $banner.find("iframe");
+      if(iframes.length > 0){
+        var id = $banner.attr("data-subpart-id");
+        if(yt_players[id] == undefined)
+          yt_players[id] = {};
+        var remove_ids = [];
+        Object.keys(yt_players[id]).forEach(function(k){
+          var yt_player = yt_players[id][k];
+          if($(yt_player.getIframe()).length == 0){
+            yt_player.destroy();
+            remove_ids.push(k);
+          }
+        })
+        remove_ids.forEach(function(k){
+          delete yt_players[id][k];
+        })
+        iframes.each(function(i,iframe){
+          var yt_id = $(iframe).attr("id");
+          var yt_player = yt_players[id][$(iframe).attr("id")];
+          if(yt_player){
+          }else{
+            yt_player = new YT.Player($(iframe).attr("id"), {
+                events: {
+                  'onReady': function(event){
+                    var yt_player = event.target;
+                    var height = $(yt_player.getIframe()).height();
+                    var banner_wrap = $(iframe).parents('.w-ba-banner__wrap').eq(0);
+                    var carousel_wrap = banner_wrap.find(".cycle-carousel-wrap");
+                    if(carousel_wrap.length){
+                      carousel_wrap.css("top","3em");
+                      height += parseInt(carousel_wrap.css('font-size')) * 3;
+                    }
+                    banner_wrap.height(height).css({"padding-bottom":"","padding-top":""});
+                    var init_key = find_out_yt_event_relation_key(yt_player, false);
+                    if(init_key){
+                      delete yt_player[init_key].onStateChange;
+                    }
+                    else{
+                      console.log("{onReady: true, onStateChange: true} missing!");
+                    }
+                    var event_list_key = find_out_yt_event_list_key(yt_player);
+                    if(event_list_key){
+                      var event_dict = yt_player[event_list_key];
+                      var array_key = find_out_yt_event_list_array_key(event_dict);
+                      var count_key = find_out_yt_event_list_count_key(event_dict, array_key);
+                      var relation_key = find_out_yt_event_relation_key(event_dict, true);
+                      var onStateChange_idx = event_dict[relation_key].onStateChange;
+                      onStateChange_idx.reverse();
+                      var event_size = 3;
+                      onStateChange_idx.forEach(function(start_idx){
+                        event_dict[array_key].splice(start_idx,event_size);
+                      });
+                      event_dict[relation_key].onStateChange = [];
+                      event_dict[count_key] = event_dict[array_key].length;
+                      yt_player.addEventListener('onStateChange',onPlayerStateChange);
+                      banner_wrap.trigger('resize');
+                    }else{
+                      console.log("YT player changes its variables!")
+                    }
+                    {{extra_ready_script}}
+                  },
+                  'onStateChange': onPlayerStateChange
+                }
+            });
+            yt_players[id][$(iframe).attr("id")] = yt_player;
+            $(iframe).data("yt_player",yt_player);
+          }
+        })
+      }
+    }
+    $(".w-ba-banner").each(function(i,banner){
+      init_banner(banner);
+    })
+  }
+  function onPlayerStateChange(event){
+    var iframe = $(event.target.getIframe()),
+        cyclediv = iframe.parents("div.cycle-slideshow");
+    var widget = cyclediv.parents('.ba-banner-widget-youtube');
+    if(event.data == YT.PlayerState.PLAYING || event.data == YT.PlayerState.BUFFERING){
+      cyclediv[0].need_resume = !(cyclediv.hasClass("cycle-paused"));
+      cyclediv.cycle("pause");
+      widget.find('.banner-pager,.controlplay,.button-mid,.ad-overlay,.banner-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,.banner-overlay').css('visibility','')
+      ad_audio_button(iframe.parents(".w-ad-banner__slide").eq(0),true);
+    }
+    {{extra_state_chnage_script}}
+  }
+}
+  $(document).ready(function(){
+    window.onYouTubePlayerAPIReady = function() {
+      onYouTubeIframeAPIReady.apply(this,arguments);
+    };
+    var banner_wrap = $(".w-ba-banner__wrap[data-overlay=\".w-ad-banner__overlay_{{subpart-id}}\"]");
+    var opts = banner_wrap.data('cycle.opts');
+    banner_wrap.on('cycle-paused',function(opts){
+      var controlplay = $(this).nextAll(".controlplay");
+      if(controlplay.length != 0){
+        controlplay.find(".resume-slide").removeClass("active");
+        controlplay.find(".pause-slide").addClass("active");
+      }
+    })
+    banner_wrap.on('cycle-resumed',function(opts){
+      if(!($(this).data('paused'))){
+        var controlplay = $(this).nextAll(".controlplay");
+        if(controlplay.length != 0){
+          controlplay.find(".resume-slide").addClass("active");
+          controlplay.find(".pause-slide").removeClass("active");
+        }
+      }
+    })
+    /*
+    var height = opts.slides.filter('.active').height() || opts.slides.height();
+    banner_wrap.height(height)*/
+    banner_wrap.css("padding-bottom","");
+    {{extra_document_ready_script}}
+    $('[data-subpart-id="{{subpart-id}}"] .pause-slide').click(function(){
+      $(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").data('paused', true).cycle('pause');
+      $(this).addClass('active');
+      $(this).parents('.controlplay').eq(0).find('.resume-slide').removeClass('active');
+    });
+    $('[data-subpart-id="{{subpart-id}}"] .resume-slide').click(function(){
+      $(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").data('paused', false).cycle('resume');
+      $(this).addClass('active');
+      $(this).parents('.controlplay').eq(0).find('.pause-slide').removeClass('active');
+    });
+    $('[data-subpart-id="{{subpart-id}}"] .next-button').click(function(){
+      $(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle("next");
+    })
+    $('[data-subpart-id="{{subpart-id}}"] .prev-button').click(function(){
+      $(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle("prev");
+    })
+    var resize_timeout_id;
+    $(window).resize(function(){
+      if(resize_timeout_id){
+        window.clearTimeout(resize_timeout_id);
+      }
+      resize_timeout_id = window.setTimeout(function(){
+        var banner_wrap = $(".w-ba-banner__wrap[data-overlay=\".w-ad-banner__overlay_{{subpart-id}}\"]");
+        var opts = banner_wrap.data('cycle.opts');
+        var height = opts.slides.filter('.active').height() || opts.slides.height();
+        banner_wrap.height(height).css("padding-bottom","");
+      },300);
+    })
+  })
+</script>
+<style type="text/css">
+  .jarallax-video-audio, .jarallax-video-control-play{
+    z-index: 201;
+    font-size: 2em;
+    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;
+  }
+  .jarallax-video-control-play{
+    margin-top: 66px;
+  }
+  @media (max-width: 768px){
+    .jarallax-video-audio{
+      top: 50%;
+    }
+    .jarallax-video-audio.accessibility_mode_btn{
+      margin-top: -33px;
+    }
+    .jarallax-video-control-play{
+      margin-top: 33px;
+    }
+  }
+  .jarallax-video-audio:hover,.jarallax-video-audio:focus,.jarallax-video-control-play:hover,.jarallax-video-control-play:focus {
+    color: #FFC500;
+    transition: all 0.6s ease;
+  }
+
+  .w-ba-banner .controlplay .resume-slide.active i{
+    color: #32D9C3;
+  }
+  .w-ba-banner .controlplay .pause-slide.active i{
+    color: #ff4500;
+  }
+  .w-ba-banner .controlplay{
+    width: auto;
+  }
+  .w-ba-banner .button-mid{
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+  }
+  .next-button,.prev-button{
+    cursor: pointer;
+  }
+</style>