saurabh
/
adbanner-test
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix frontend autoplay bug.

This commit is contained in:
BoHung Chiu 2021-11-10 12:01:02 +08:00
parent d39b6e2139
commit 600d0d94b8
2 changed files with 16 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
app/controllers/ad_banners_controller.rb
View File

@ -67,7 +67,7 @@ class AdBannersController < ApplicationController
def video_widget(adbanner) def video_widget(adbanner)
subpart = OrbitHelper.get_current_widget subpart = OrbitHelper.get_current_widget
custom_data_field = subpart.custom_data_field || {} 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 @hide_video_tools = custom_data_field[:hide_video_tools] == "1" rescue false
images = [] images = []
has_jplayer = false has_jplayer = false
@ -109,8 +109,9 @@ class AdBannersController < ApplicationController
data-overlay-template=\"<h3>#{ad_b.title}</h3><p>#{context}</p>\" data-overlay-template=\"<h3>#{ad_b.title}</h3><p>#{context}</p>\"
data-target=\"#{target}\" data-target=\"#{target}\"
style=\"height: 100%;\" 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>" </div>"
has_jplayer = true has_jplayer = true
elsif ad_b.exchange_item == "2" elsif ad_b.exchange_item == "2"
@ -123,6 +124,7 @@ class AdBannersController < ApplicationController
data-cycle-desc=\"#{context}\" data-cycle-desc=\"#{context}\"
data-overlay-template=\"<h3>#{ad_b.title}</h3><p>#{context}</p>\" data-overlay-template=\"<h3>#{ad_b.title}</h3><p>#{context}</p>\"
data-target=\"#{target}\" data-target=\"#{target}\"
data-autoplay=\"#{@autoplay_video}\"
> >
<div style=\"padding-bottom: 56.25%;position: relative;height: 0;\"> <div style=\"padding-bottom: 56.25%;position: relative;height: 0;\">
<iframe height=\"100%\" width=\"100%\" <iframe height=\"100%\" width=\"100%\"
@ -156,9 +158,9 @@ class AdBannersController < ApplicationController
"desc" => adbanner.title, "desc" => adbanner.title,
"extra_brefore_html" => extra_before_html, "extra_brefore_html" => extra_before_html,
"extra_after_html" => extra_after_html, "extra_after_html" => extra_after_html,
"extra_ready_script" => (@autoplay_video ? "if(i == 0) event.target.mute().playVideo();" : ""), "extra_ready_script" => "if(i == 0 && banner_wrap.find('[data-autoplay=1]').length != 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_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 ? "opts.API.pause() && opts.API.jump(0);" : "") "extra_document_ready_script" => ((@autoplay_video == "1") ? "opts.API.pause() && opts.API.jump(0);" : "")
}, },
"images" => images "images" => images
} }

3
app/views/admin/ad_images/_jplayer.html.erb
View File

@ -250,13 +250,16 @@
$(this).parents('.jp-video').eq(0).removeClass('hide-ui'); $(this).parents('.jp-video').eq(0).removeClass('hide-ui');
<% end %> <% end %>
<% if @apply_autoplay_script %> <% if @apply_autoplay_script %>
var is_frontend = <%= @is_frontend ? true : false %>;
var cyclediv = $(this).parents("div.cycle-slideshow").eq(0); var cyclediv = $(this).parents("div.cycle-slideshow").eq(0);
if(!is_frontend || (is_frontend && cyclediv.find('[data-autoplay=1]').length != 0)){
cyclediv.cycle("pause").cycle("next"); cyclediv.cycle("pause").cycle("next");
var current_cycle = cyclediv.find(".cycle-slide-active") var current_cycle = cyclediv.find(".cycle-slide-active")
if(current_cycle.hasClass("jplayer_slide")) if(current_cycle.hasClass("jplayer_slide"))
current_cycle.find('.jp-jplayer').jPlayer("mute", true).jPlayer("play",0); current_cycle.find('.jp-jplayer').jPlayer("mute", true).jPlayer("play",0);
else else
current_cycle.find('iframe').data("yt_player").mute().playVideo(); current_cycle.find('iframe').data("yt_player").mute().playVideo();
}
<% end %> <% end %>
window.console.log("end"); window.console.log("end");
}, },