mirror of
https://github.com/DanielnetoDotCom/YouPHPTube
synced 2025-10-05 19:42:38 +02:00
Separating the FloatVideo functions and CSS into the plugin
This commit is contained in:
DanielnetoDotCom
parent
9d50a85169
commit
fd6cf8841c
6 changed files with 176 additions and 153 deletions
|
|
@ -4120,11 +4120,11 @@ function ogSite() {
|
|||
return $pag;
|
||||
}
|
||||
|
||||
function getShareMenu($title, $permaLink, $URLFriendly, $embedURL) {
|
||||
function getShareMenu($title, $permaLink, $URLFriendly, $embedURL, $class="row bgWhite list-group-item menusDiv") {
|
||||
global $global, $advancedCustom;
|
||||
$objSecure = AVideoPlugin::getObjectDataIfEnabled('SecureVideosDirectory');
|
||||
?>
|
||||
<div class="row bgWhite list-group-item menusDiv" id="shareDiv">
|
||||
<div class="<?php echo $class; ?>" id="shareDiv">
|
||||
<div class="tabbable-panel">
|
||||
<div class="tabbable-line text-muted">
|
||||
<ul class="nav nav-tabs">
|
||||
|
|
|
|||
|
|
@ -23,9 +23,27 @@ class FloatVideo extends PluginAbstract {
|
|||
return $obj;
|
||||
}
|
||||
|
||||
public function getHeadCode() {
|
||||
global $global;
|
||||
$str = "";
|
||||
if(isVideo()){
|
||||
$o = $this->getDataObject();
|
||||
if(empty($o->doNotFloatVideo)){
|
||||
$str .= "<style> ".(file_get_contents($global['systemRootPath'] . 'plugin/FloatVideo/floatVideo.css'))."</style>";
|
||||
}
|
||||
}
|
||||
return $str;
|
||||
}
|
||||
|
||||
public function getFooterCode() {
|
||||
$o = $this->getDataObject();
|
||||
$str = "<script> doNotFloatVideo = ".($o->doNotFloatVideo?"true":"false").";</script>";
|
||||
global $global;
|
||||
$str = "";
|
||||
if(isVideo()){
|
||||
$o = $this->getDataObject();
|
||||
if(empty($o->doNotFloatVideo)){
|
||||
$str .= "<script> ".(file_get_contents($global['systemRootPath'] . 'plugin/FloatVideo/floatVideo.js'))."</script>";
|
||||
}
|
||||
}
|
||||
return $str;
|
||||
}
|
||||
|
||||
|
|
|
|||
57
plugin/FloatVideo/floatVideo.css
Normal file
57
plugin/FloatVideo/floatVideo.css
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
|
||||
#floatButtons {
|
||||
z-index: 110;
|
||||
position: absolute;
|
||||
right: -10px;
|
||||
top: -10px;
|
||||
}
|
||||
#floatButtons .btn-outline:hover,
|
||||
#floatButtons .btn-outline:focus,
|
||||
#floatButtons .btn-outline:active {
|
||||
color: rgba(255, 255, 255, 1);
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
#floatButtons .btn-outline {
|
||||
color: rgba(255, 255, 255, 0.3);
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.3s ease-in-out;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.floatVideo {
|
||||
position: fixed !important;
|
||||
width: 550px;
|
||||
top: 70px;
|
||||
left: 10px;
|
||||
z-index: 100;
|
||||
overflow: visible;
|
||||
}
|
||||
.floatVideo > #main-video {
|
||||
-webkit-box-shadow: 2px 0px 19px 2px rgba(0, 0, 0, 1);
|
||||
-moz-box-shadow: 2px 0px 19px 2px rgba(0, 0, 0, 1);
|
||||
box-shadow: 2px 0px 19px 2px rgba(0, 0, 0, 1);
|
||||
-webkit-border-radius: 5px;
|
||||
-moz-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
@media (max-width: 1200px) {
|
||||
.floatVideo {
|
||||
width: 500px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 992px) {
|
||||
.floatVideo {
|
||||
width: 450px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.floatVideo {
|
||||
top: 0 !important;
|
||||
left: 0 !important;
|
||||
width: 100% !important;
|
||||
z-index: 1050;
|
||||
}
|
||||
#floatButtons{
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
96
plugin/FloatVideo/floatVideo.js
Normal file
96
plugin/FloatVideo/floatVideo.js
Normal file
|
|
@ -0,0 +1,96 @@
|
|||
|
||||
function closeFloatVideo() {
|
||||
$('#videoContainer').fadeOut('fast', function () {
|
||||
// this is to remove the dragable and resize
|
||||
floatLeft = $("#videoContainer").css("left");
|
||||
floatTop = $("#videoContainer").css("top");
|
||||
floatWidth = $("#videoContainer").css("width");
|
||||
floatHeight = $("#videoContainer").css("height");
|
||||
$("#videoContainer").css({"top": ""});
|
||||
$("#videoContainer").css({"left": ""});
|
||||
$("#videoContainer").css({"height": ""});
|
||||
$("#videoContainer").css({"width": ""});
|
||||
$('#videoContainer').parent().css('height', '');
|
||||
$('#videoContainer').removeClass('floatVideo');
|
||||
$("#videoContainer").resizable('destroy');
|
||||
$("#videoContainer").draggable('destroy');
|
||||
$('#floatButtons').hide();
|
||||
changingVideoFloat = 0;
|
||||
});
|
||||
$('#videoContainer').fadeIn();
|
||||
}
|
||||
|
||||
function setFloatVideo() {
|
||||
if (!videoContainerDragged) {
|
||||
if (!floatLeft || parseInt(floatLeft) < 10 || parseInt(floatLeft) === 310) {
|
||||
floatLeft = "10px";
|
||||
}
|
||||
if (parseInt(floatLeft) === 10 && youTubeMenuIsOpened) {
|
||||
floatLeft = "310px";
|
||||
}
|
||||
$("#videoContainer").css({"left": floatLeft});
|
||||
}
|
||||
if (!$('#videoContainer').hasClass("floatVideo") && !floatClosed) {
|
||||
$('#videoContainer').hide();
|
||||
$('#videoContainer').addClass('floatVideo');
|
||||
$('#videoContainer').parent().css('height', mainVideoHeight);
|
||||
if (parseInt(floatTop) < 70) {
|
||||
floatTop = "70px";
|
||||
}
|
||||
$("#videoContainer").css({"top": floatTop});
|
||||
$("#videoContainer").css({"height": floatHeight});
|
||||
$("#videoContainer").css({"width": floatWidth});
|
||||
$("#videoContainer").resizable({
|
||||
aspectRatio: 16 / 9,
|
||||
minHeight: 150,
|
||||
minWidth: 266
|
||||
});
|
||||
$("#videoContainer").draggable({
|
||||
handle: ".move",
|
||||
containment: ".principalContainer",
|
||||
drag: function () {
|
||||
videoContainerDragged = true;
|
||||
}
|
||||
});
|
||||
changingVideoFloat = 0;
|
||||
$('#videoContainer').fadeIn();
|
||||
$('#floatButtons').fadeIn();
|
||||
} else {
|
||||
changingVideoFloat = 0;
|
||||
}
|
||||
}
|
||||
|
||||
var setFloatVideoYouTubeMenuIsOpened;
|
||||
$(document).ready(function () {
|
||||
mainVideoHeight = $('#videoContainer').innerHeight();
|
||||
$(window).resize(function () {
|
||||
mainVideoHeight = $('#videoContainer').innerHeight();
|
||||
});
|
||||
$(window).scroll(function () {
|
||||
if (changingVideoFloat) {
|
||||
return false;
|
||||
}
|
||||
changingVideoFloat = 1;
|
||||
var s = $(window).scrollTop();
|
||||
//console.log("$(window).scrollTop()= " + s);
|
||||
//console.log("mainVideoHeight = $('#videoContainer').innerHeight()= " + mainVideoHeight);
|
||||
if (s > mainVideoHeight) {
|
||||
setFloatVideo();
|
||||
} else {
|
||||
floatClosed = 0;
|
||||
if ($('#videoContainer').hasClass("floatVideo")) {
|
||||
closeFloatVideo();
|
||||
} else {
|
||||
changingVideoFloat = 0;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
setInterval(function () {
|
||||
if (setFloatVideoYouTubeMenuIsOpened === youTubeMenuIsOpened || !$('#videoContainer').hasClass("floatVideo")) {
|
||||
return false;
|
||||
}
|
||||
setFloatVideoYouTubeMenuIsOpened = youTubeMenuIsOpened;
|
||||
setFloatVideo();
|
||||
}, 1000);
|
||||
});
|
||||
|
|
@ -154,15 +154,6 @@ footer ul.list-inline li {
|
|||
.navbar-form {
|
||||
padding: 0;
|
||||
}
|
||||
.floatVideo {
|
||||
top: 0 !important;
|
||||
left: 0 !important;
|
||||
width: 100% !important;
|
||||
z-index: 1050;
|
||||
}
|
||||
#floatButtons{
|
||||
display: none !important;
|
||||
}
|
||||
#modeYoutubeBottomContent, .principalContainer{
|
||||
padding: 0;
|
||||
}
|
||||
|
|
@ -605,40 +596,6 @@ nav ul.items-container li ul.right-menus li li {
|
|||
}
|
||||
/* End Play List */
|
||||
|
||||
.floatVideo {
|
||||
position: fixed !important;
|
||||
width: 550px;
|
||||
top: 70px;
|
||||
left: 10px;
|
||||
z-index: 100;
|
||||
overflow: visible;
|
||||
}
|
||||
.floatVideo > #main-video {
|
||||
-webkit-box-shadow: 2px 0px 19px 2px rgba(0, 0, 0, 1);
|
||||
-moz-box-shadow: 2px 0px 19px 2px rgba(0, 0, 0, 1);
|
||||
box-shadow: 2px 0px 19px 2px rgba(0, 0, 0, 1);
|
||||
-webkit-border-radius: 5px;
|
||||
-moz-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
#floatButtons {
|
||||
z-index: 110;
|
||||
position: absolute;
|
||||
right: -10px;
|
||||
top: -10px;
|
||||
}
|
||||
#floatButtons .btn-outline:hover,
|
||||
#floatButtons .btn-outline:focus,
|
||||
#floatButtons .btn-outline:active {
|
||||
color: rgba(255, 255, 255, 1);
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
#floatButtons .btn-outline {
|
||||
color: rgba(255, 255, 255, 0.3);
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.3s ease-in-out;
|
||||
border-radius: 10px;
|
||||
}
|
||||
#videoContainer {
|
||||
overflow: visible;
|
||||
background: black;
|
||||
|
|
@ -701,16 +658,6 @@ nav ul.items-container li ul.right-menus li li {
|
|||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@media (max-width: 1200px) {
|
||||
.floatVideo {
|
||||
width: 500px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 992px) {
|
||||
.floatVideo {
|
||||
width: 450px;
|
||||
}
|
||||
}
|
||||
.navbar-collapse.in {
|
||||
overflow-y: visible; /* Bootstrap default is "auto" */
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,7 +9,6 @@ var floatClosed = 0;
|
|||
var fullDuration = 0;
|
||||
var isPlayingAd = false;
|
||||
var mainVideoHeight = 0;
|
||||
var doNotFloatVideo = false;
|
||||
var mouseX;
|
||||
var mouseY;
|
||||
var videoContainerDragged = false;
|
||||
|
|
@ -138,57 +137,8 @@ try {
|
|||
}
|
||||
} catch (e) {
|
||||
}
|
||||
|
||||
function setFloatVideo() {
|
||||
if (!videoContainerDragged) {
|
||||
if (!floatLeft || parseInt(floatLeft) < 10 || parseInt(floatLeft) === 310) {
|
||||
floatLeft = "10px";
|
||||
}
|
||||
if (parseInt(floatLeft) === 10 && youTubeMenuIsOpened) {
|
||||
floatLeft = "310px";
|
||||
}
|
||||
$("#videoContainer").css({"left": floatLeft});
|
||||
}
|
||||
if (!$('#videoContainer').hasClass("floatVideo") && !floatClosed) {
|
||||
$('#videoContainer').hide();
|
||||
$('#videoContainer').addClass('floatVideo');
|
||||
$('#videoContainer').parent().css('height', mainVideoHeight);
|
||||
if (parseInt(floatTop) < 70) {
|
||||
floatTop = "70px";
|
||||
}
|
||||
$("#videoContainer").css({"top": floatTop});
|
||||
$("#videoContainer").css({"height": floatHeight});
|
||||
$("#videoContainer").css({"width": floatWidth});
|
||||
$("#videoContainer").resizable({
|
||||
aspectRatio: 16 / 9,
|
||||
minHeight: 150,
|
||||
minWidth: 266
|
||||
});
|
||||
$("#videoContainer").draggable({
|
||||
handle: ".move",
|
||||
containment: ".principalContainer",
|
||||
drag: function () {
|
||||
videoContainerDragged = true;
|
||||
}
|
||||
});
|
||||
changingVideoFloat = 0;
|
||||
$('#videoContainer').fadeIn();
|
||||
$('#floatButtons').fadeIn();
|
||||
} else {
|
||||
changingVideoFloat = 0;
|
||||
}
|
||||
}
|
||||
|
||||
var pleaseWaitIsINUse = false;
|
||||
var setFloatVideoYouTubeMenuIsOpened;
|
||||
$(document).ready(function () {
|
||||
setInterval(function () {
|
||||
if (setFloatVideoYouTubeMenuIsOpened === youTubeMenuIsOpened || !$('#videoContainer').hasClass("floatVideo")) {
|
||||
return false;
|
||||
}
|
||||
setFloatVideoYouTubeMenuIsOpened = youTubeMenuIsOpened;
|
||||
setFloatVideo();
|
||||
}, 1000);
|
||||
modal = modal || (function () {
|
||||
var pleaseWaitDiv = $("#pleaseWaitDialog");
|
||||
if (pleaseWaitDiv.length === 0) {
|
||||
|
|
@ -255,29 +205,7 @@ $(document).ready(function () {
|
|||
}
|
||||
});
|
||||
}
|
||||
mainVideoHeight = $('#videoContainer').innerHeight();
|
||||
$(window).resize(function () {
|
||||
mainVideoHeight = $('#videoContainer').innerHeight();
|
||||
});
|
||||
$(window).scroll(function () {
|
||||
if (changingVideoFloat || doNotFloatVideo) {
|
||||
return false;
|
||||
}
|
||||
changingVideoFloat = 1;
|
||||
var s = $(window).scrollTop();
|
||||
//console.log("$(window).scrollTop()= " + s);
|
||||
//console.log("mainVideoHeight = $('#videoContainer').innerHeight()= " + mainVideoHeight);
|
||||
if (s > mainVideoHeight) {
|
||||
setFloatVideo();
|
||||
} else {
|
||||
floatClosed = 0;
|
||||
if ($('#videoContainer').hasClass("floatVideo")) {
|
||||
closeFloatVideo();
|
||||
} else {
|
||||
changingVideoFloat = 0;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$("a").each(function () {
|
||||
var location = window.location.toString()
|
||||
var res = location.split("?");
|
||||
|
|
@ -493,29 +421,6 @@ function subscribeNotify(email, user_id) {
|
|||
}
|
||||
});
|
||||
}
|
||||
|
||||
function closeFloatVideo() {
|
||||
$('#videoContainer').fadeOut('fast', function () {
|
||||
// this is to remove the dragable and resize
|
||||
floatLeft = $("#videoContainer").css("left");
|
||||
floatTop = $("#videoContainer").css("top");
|
||||
floatWidth = $("#videoContainer").css("width");
|
||||
floatHeight = $("#videoContainer").css("height");
|
||||
$("#videoContainer").css({"top": ""});
|
||||
$("#videoContainer").css({"left": ""});
|
||||
$("#videoContainer").css({"height": ""});
|
||||
$("#videoContainer").css({"width": ""});
|
||||
$('#videoContainer').parent().css('height', '');
|
||||
$('#videoContainer').removeClass('floatVideo');
|
||||
$("#videoContainer").resizable('destroy');
|
||||
$("#videoContainer").draggable('destroy');
|
||||
$('#floatButtons').hide();
|
||||
changingVideoFloat = 0;
|
||||
});
|
||||
$('#videoContainer').fadeIn();
|
||||
}
|
||||
|
||||
|
||||
function mouseEffect() {
|
||||
|
||||
$(".thumbsImage").on("mouseenter", function () {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue