mirror of
https://github.com/DanielnetoDotCom/YouPHPTube
synced 2025-10-03 09:49:28 +02:00
Add the autoplay button on the player menu bar
This commit is contained in:
parent
133ecc4941
commit
40dd7e1519
5 changed files with 108 additions and 34 deletions
|
@ -47,6 +47,7 @@ class PlayerSkins extends PluginAbstract {
|
|||
$obj->showLoopButton = true;
|
||||
$obj->showLogo = false;
|
||||
$obj->showShareSocial = true;
|
||||
$obj->showShareAutoplay = true;
|
||||
$obj->showLogoOnEmbed = false;
|
||||
$obj->showLogoAdjustScale = "0.4";
|
||||
$obj->showLogoAdjustLeft = "-74px";
|
||||
|
@ -244,6 +245,9 @@ class PlayerSkins extends PluginAbstract {
|
|||
if ($obj->showShareSocial && CustomizeUser::canShareVideosFromVideo(@$video['id'])) {
|
||||
$css .= "<link href=\"".getCDN()."plugin/PlayerSkins/shareButton.css\" rel=\"stylesheet\" type=\"text/css\"/>";
|
||||
}
|
||||
if ($obj->showShareAutoplay) {
|
||||
$css .= "<link href=\"".getCDN()."plugin/PlayerSkins/autoplayButton.css\" rel=\"stylesheet\" type=\"text/css\"/>";
|
||||
}
|
||||
}
|
||||
|
||||
$url = urlencode(getSelfURI());
|
||||
|
@ -277,6 +281,10 @@ class PlayerSkins extends PluginAbstract {
|
|||
$js .= $social['html'];
|
||||
$js .= "<script>function tooglePlayersocial(){showSharing{$social['id']}();}</script>";
|
||||
}
|
||||
|
||||
if ($obj->showShareAutoplay) {
|
||||
PlayerSkins::getStartPlayerJS(file_get_contents("{$global['systemRootPath']}plugin/PlayerSkins/autoplayButton.js"));
|
||||
}
|
||||
}
|
||||
if (isAudio()) {
|
||||
$videos_id = getVideos_id();
|
||||
|
|
17
plugin/PlayerSkins/autoplayButton.css
Normal file
17
plugin/PlayerSkins/autoplayButton.css
Normal file
|
@ -0,0 +1,17 @@
|
|||
.autoplay-button{
|
||||
outline: none;
|
||||
}
|
||||
.autoplay-button:before {
|
||||
display: inline-block;
|
||||
font-style: normal;
|
||||
font-variant: normal;
|
||||
text-rendering: auto;
|
||||
content: "\f204";
|
||||
font-size: 1.2em;
|
||||
line-height: 1.0em;
|
||||
font-family: "Font Awesome\ 5 Free";
|
||||
font-weight: 900;
|
||||
}
|
||||
.autoplay-button.checked:before {
|
||||
content: "\f205";
|
||||
}
|
23
plugin/PlayerSkins/autoplayButton.js
Normal file
23
plugin/PlayerSkins/autoplayButton.js
Normal file
|
@ -0,0 +1,23 @@
|
|||
var Button = videojs.getComponent('Button');
|
||||
|
||||
var autoplayButton = videojs.extend(Button, {
|
||||
//constructor: function(player, options) {
|
||||
constructor: function () {
|
||||
Button.apply(this, arguments);
|
||||
this.addClass('autoplay-button');
|
||||
this.controlText("autoplay");
|
||||
setTimeout(function(){avideoTooltip(".autoplay-button","Autoplay");},1000);
|
||||
},
|
||||
handleClick: function () {
|
||||
console.log('autoplayButton clicked');
|
||||
if($('.autoplay-button').hasClass('checked')){
|
||||
disableAutoPlay();
|
||||
}else{
|
||||
enableAutoPlay();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
videojs.registerComponent('autoplayButton', autoplayButton);
|
||||
player.getChild('controlBar').addChild('autoplayButton', {}, getPlayerButtonIndex('fullscreenToggle') - 1);
|
||||
checkAutoPlay();
|
|
@ -935,6 +935,38 @@ function setAutoplay(value) {
|
|||
});
|
||||
}
|
||||
|
||||
function showAutoPlayVideoDiv() {
|
||||
var auto = $("#autoplay").prop('checked');
|
||||
if (!auto) {
|
||||
$('#autoPlayVideoDiv').slideUp();
|
||||
} else {
|
||||
$('#autoPlayVideoDiv').slideDown();
|
||||
}
|
||||
}
|
||||
|
||||
function enableAutoPlay() {
|
||||
setAutoplay(true);
|
||||
checkAutoPlay();
|
||||
}
|
||||
|
||||
function disableAutoPlay() {
|
||||
setAutoplay(false);
|
||||
checkAutoPlay();
|
||||
}
|
||||
|
||||
function checkAutoPlay() {
|
||||
if (isAutoplayEnabled()) {
|
||||
$("#autoplay").prop('checked', true);
|
||||
$('.autoplay-button').addClass('checked');
|
||||
avideoTooltip(".autoplay-button","Autoplay is ON");
|
||||
}else{
|
||||
$("#autoplay").prop('checked', false);
|
||||
$('.autoplay-button').removeClass('checked');
|
||||
avideoTooltip(".autoplay-button","Autoplay is OFF");
|
||||
}
|
||||
showAutoPlayVideoDiv();
|
||||
}
|
||||
|
||||
function isPlayNextEnabled() {
|
||||
if (isPlayerLoop()) {
|
||||
return false;
|
||||
|
@ -1016,7 +1048,7 @@ function avideoModalIframeLarge(url) {
|
|||
function avideoModalIframeWithClassName(url, className) {
|
||||
var span = document.createElement("span");
|
||||
url = addGetParam(url, 'avideoIframe', 1);
|
||||
span.innerHTML = '<iframe src="' + url + '" />';
|
||||
span.innerHTML = '<iframe frameBorder="0" src="' + url + '" />';
|
||||
swal({
|
||||
content: span,
|
||||
closeModal: true,
|
||||
|
@ -1031,11 +1063,11 @@ function avideoModalIframeWithClassName(url, className) {
|
|||
|
||||
function avideoModalIframeIsVisible() {
|
||||
var modal = '';
|
||||
if($('.swal-modal-iframe-small').length){
|
||||
if ($('.swal-modal-iframe-small').length) {
|
||||
modal = $('.swal-modal-iframe-small');
|
||||
}else if($('.swal-modal-iframe-large').length){
|
||||
} else if ($('.swal-modal-iframe-large').length) {
|
||||
modal = $('.swal-modal-iframe-large');
|
||||
}else{
|
||||
} else {
|
||||
modal = $('.swal-modal-iframe');
|
||||
}
|
||||
|
||||
|
@ -1287,6 +1319,27 @@ $(document).ready(function () {
|
|||
}
|
||||
|
||||
}, 1000);
|
||||
|
||||
$("input.saveCookie").each(function () {
|
||||
var mycookie = Cookies.get($(this).attr('name'));
|
||||
if (mycookie && mycookie == "true") {
|
||||
$(this).prop('checked', mycookie);
|
||||
}
|
||||
});
|
||||
$("input.saveCookie").change(function () {
|
||||
var auto = $(this).prop('checked');
|
||||
Cookies.set($(this).attr("name"), auto, {
|
||||
path: '/',
|
||||
expires: 365
|
||||
});
|
||||
});
|
||||
if (isAutoplayEnabled()) {
|
||||
$("#autoplay").prop('checked', true);
|
||||
}
|
||||
$("#autoplay").change(function () {
|
||||
checkAutoPlay();
|
||||
});
|
||||
checkAutoPlay();
|
||||
});
|
||||
|
||||
function validURL(str) {
|
||||
|
|
|
@ -129,36 +129,9 @@ $modeYouTubeTime = microtime(true);
|
|||
var autoPlayPoster = '<?php echo @$autoPlayPoster; ?>';
|
||||
var autoPlayThumbsSprit = '<?php echo @$autoPlayThumbsSprit; ?>';
|
||||
|
||||
function showAutoPlayVideoDiv() {
|
||||
var auto = $("#autoplay").prop('checked');
|
||||
if (!auto) {
|
||||
$('#autoPlayVideoDiv').slideUp();
|
||||
} else {
|
||||
$('#autoPlayVideoDiv').slideDown();
|
||||
}
|
||||
}
|
||||
$(document).ready(function () {
|
||||
$("input.saveCookie").each(function () {
|
||||
var mycookie = Cookies.get($(this).attr('name'));
|
||||
if (mycookie && mycookie == "true") {
|
||||
$(this).prop('checked', mycookie);
|
||||
}
|
||||
});
|
||||
$("input.saveCookie").change(function () {
|
||||
var auto = $(this).prop('checked');
|
||||
Cookies.set($(this).attr("name"), auto, {
|
||||
path: '/',
|
||||
expires: 365
|
||||
});
|
||||
});
|
||||
|
||||
if (isAutoplayEnabled()) {
|
||||
$("#autoplay").prop('checked', true);
|
||||
}
|
||||
|
||||
$("#autoplay").change(function () {
|
||||
showAutoPlayVideoDiv();
|
||||
});
|
||||
showAutoPlayVideoDiv();
|
||||
|
||||
});
|
||||
</script>
|
Loading…
Add table
Add a link
Reference in a new issue