chiu
/
AsiaHomeB
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Updated

This commit is contained in:
rulingcom 2022-09-02 10:57:56 +08:00
parent 9c1fa5d794
commit be17e78244
1 changed files with 83 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
modules/ad_banner/_ad_banner_widget2_video.html.erb
View File

@ -37,17 +37,46 @@
if (typeof ad_banners_count === 'undefined'){ if (typeof ad_banners_count === 'undefined'){
var ad_banners_count = 0; 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){ function ad_audio_button(ele,is_stop){
var $self = $(ele); var $self = $(ele);
var button_container = $self.parents('.ba-banner-widget-youtube').eq(0); var button_container = $self.parents('.ba-banner-widget-youtube').eq(0);
var append_class = "";
if (is_stop){ if (is_stop){
button_container.find('.jarallax-video-audio').remove(); 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{ }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; var audio_div;
if ($self.hasClass('have-audio')){ if ($self.hasClass('have-audio')){
audio_div = $('<button title="<%= I18n.t("ad_banner.muted") %>" class="jarallax-video-audio"><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>'); 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{ }else{
audio_div = $('<button title="<%= I18n.t("ad_banner.unmuted") %>" class="jarallax-video-audio"><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 = $('<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.find('p').css('display','none'); //fix CSP
audio_div.click(function(event) { audio_div.click(function(event) {
@ -79,8 +108,48 @@
}); });
button_container.find('.jarallax-video-audio').remove(); button_container.find('.jarallax-video-audio').remove();
button_container.append(audio_div); 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){ if(document.getElementById("youtube-iframe-api") == null){
var tag = document.createElement('script'); var tag = document.createElement('script');
tag.setAttribute("id", "youtube-iframe-api"); tag.setAttribute("id", "youtube-iframe-api");
@ -347,7 +416,7 @@ if (typeof onYouTubeIframeAPIReady !== 'function'){
}) })
</script> </script>
<style type="text/css"> <style type="text/css">
.jarallax-video-audio{ .jarallax-video-audio, .jarallax-video-control-play{
z-index: 201; z-index: 201;
font-size: 2em; font-size: 2em;
color: #FFF; color: #FFF;
@ -364,12 +433,21 @@ if (typeof onYouTubeIframeAPIReady !== 'function'){
background-color: rgba(0,0,0,.6); background-color: rgba(0,0,0,.6);
transition: all 1.2s ease; transition: all 1.2s ease;
} }
.jarallax-video-control-play{
margin-top: 66px;
}
@media (max-width: 768px){ @media (max-width: 768px){
.jarallax-video-audio{ .jarallax-video-audio, .jarallax-video-control-play{
top: 50%; top: 50%;
} }
.jarallax-video-audio.accessibility_mode_btn{
margin-top: -33px;
} }
.jarallax-video-audio:hover,.jarallax-video-audio:focus{ .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; color: #FFC500;
transition: all 0.6s ease; transition: all 0.6s ease;
} }