From 600d0d94b824d25d76763ca05d8b61ef82f9270c Mon Sep 17 00:00:00 2001
From: Bohung <bohung@rulingcom.com>
Date: Wed, 10 Nov 2021 12:01:02 +0800
Subject: [PATCH] Fix frontend autoplay bug.

---
 app/controllers/ad_banners_controller.rb    | 12 +++++++-----
 app/views/admin/ad_images/_jplayer.html.erb | 15 +++++++++------
 2 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/app/controllers/ad_banners_controller.rb b/app/controllers/ad_banners_controller.rb
index 4eb82fd..515bab3 100644
--- a/app/controllers/ad_banners_controller.rb
+++ b/app/controllers/ad_banners_controller.rb
@@ -67,7 +67,7 @@ class AdBannersController < ApplicationController
   def video_widget(adbanner)
     subpart = OrbitHelper.get_current_widget
     custom_data_field = subpart.custom_data_field || {}
-    @autoplay_video = custom_data_field[:autoplay_video] == "1" rescue false
+    @autoplay_video = custom_data_field[:autoplay_video] rescue "0"
     @hide_video_tools = custom_data_field[:hide_video_tools] == "1" rescue false
     images = []
     has_jplayer = false
@@ -109,8 +109,9 @@ class AdBannersController < ApplicationController
                              data-overlay-template=\"<h3>#{ad_b.title}</h3><p>#{context}</p>\"
                              data-target=\"#{target}\"
                              style=\"height: 100%;\"
+                             data-autoplay=\"#{@autoplay_video}\"
                              >
-                          #{ render_to_string(partial: "admin/ad_images/jplayer",locals:{i: i,file_name: title,file_url: video_url,file_webm_url: video_webm_url,:@autoplay_video=>(@autoplay_video && i == 0),:@apply_autoplay_script=>@autoplay_video,:@hide_video_tools=>@hide_video_tools}, layout: false).to_str }
+                          #{ render_to_string(partial: "admin/ad_images/jplayer",locals:{i: (subpart.id.to_s+i.to_s),file_name: title,file_url: video_url,file_webm_url: video_webm_url,:@autoplay_video=>(@autoplay_video == "1" && i == 0),:@apply_autoplay_script=>true,:@hide_video_tools=>@hide_video_tools,:@is_frontend=>true}, layout: false).to_str }
                         </div>"
           has_jplayer = true
         elsif ad_b.exchange_item == "2"
@@ -123,6 +124,7 @@ class AdBannersController < ApplicationController
                              data-cycle-desc=\"#{context}\"
                              data-overlay-template=\"<h3>#{ad_b.title}</h3><p>#{context}</p>\"
                              data-target=\"#{target}\"
+                             data-autoplay=\"#{@autoplay_video}\"
                              >
                             <div style=\"padding-bottom: 56.25%;position: relative;height: 0;\">
                               <iframe height=\"100%\" width=\"100%\" 
@@ -156,9 +158,9 @@ class AdBannersController < ApplicationController
         "desc" => adbanner.title,
         "extra_brefore_html" => extra_before_html,
         "extra_after_html" => extra_after_html,
-        "extra_ready_script" => (@autoplay_video ? "if(i == 0) event.target.mute().playVideo();" : ""),
-        "extra_state_chnage_script" => (@autoplay_video ? "if(event.data == YT.PlayerState.ENDED){ var current_cycle; cyclediv.cycle(\"pause\") && cyclediv.cycle(\"next\") && (current_cycle=cyclediv.find(\".cycle-slide-active\"), (current_cycle.hasClass(\"jplayer_slide\") ? current_cycle.find('.jp-jplayer').jPlayer(\"mute\", true).jPlayer(\"play\",0) : current_cycle.find('iframe').data(\"yt_player\").mute().playVideo()));}" : ""),
-        "extra_document_ready_script" => (@autoplay_video ? "opts.API.pause() && opts.API.jump(0);" : "")
+        "extra_ready_script" => "if(i == 0 && banner_wrap.find('[data-autoplay=1]').length != 0) event.target.mute().playVideo();",
+        "extra_state_chnage_script" => "if(cyclediv.find('[data-autoplay=1]').length != 0){if(event.data == YT.PlayerState.ENDED){ var current_cycle; cyclediv.cycle(\"pause\") && cyclediv.cycle(\"next\") && (current_cycle=cyclediv.find(\".cycle-slide-active\"), (current_cycle.hasClass(\"jplayer_slide\") ? current_cycle.find('.jp-jplayer').jPlayer(\"mute\", true).jPlayer(\"play\",0) : current_cycle.find('iframe').data(\"yt_player\").mute().playVideo()));}}",
+        "extra_document_ready_script" => ((@autoplay_video == "1") ? "opts.API.pause() && opts.API.jump(0);" : "")
         },
       "images" => images
     }
diff --git a/app/views/admin/ad_images/_jplayer.html.erb b/app/views/admin/ad_images/_jplayer.html.erb
index c56066b..abb6c69 100644
--- a/app/views/admin/ad_images/_jplayer.html.erb
+++ b/app/views/admin/ad_images/_jplayer.html.erb
@@ -250,13 +250,16 @@
         $(this).parents('.jp-video').eq(0).removeClass('hide-ui');
         <% end %>
         <% if @apply_autoplay_script %>
+        var is_frontend = <%= @is_frontend ? true : false %>;
         var cyclediv = $(this).parents("div.cycle-slideshow").eq(0);
-        cyclediv.cycle("pause").cycle("next");
-        var current_cycle = cyclediv.find(".cycle-slide-active")
-        if(current_cycle.hasClass("jplayer_slide")) 
-          current_cycle.find('.jp-jplayer').jPlayer("mute", true).jPlayer("play",0);
-        else
-          current_cycle.find('iframe').data("yt_player").mute().playVideo();
+        if(!is_frontend || (is_frontend && cyclediv.find('[data-autoplay=1]').length != 0)){
+          cyclediv.cycle("pause").cycle("next");
+          var current_cycle = cyclediv.find(".cycle-slide-active")
+          if(current_cycle.hasClass("jplayer_slide"))
+            current_cycle.find('.jp-jplayer').jPlayer("mute", true).jPlayer("play",0);
+          else
+            current_cycle.find('iframe').data("yt_player").mute().playVideo();
+        }
         <% end %>
         window.console.log("end");
       },