mirror of
https://github.com/DanielnetoDotCom/YouPHPTube
synced 2025-10-03 01:39:24 +02:00
Show a friends list
This commit is contained in:
Daniel Neto
parent
8b51fd6c72
commit
bf0e31f3c4
6 changed files with 291 additions and 3 deletions
|
|
@ -69,7 +69,6 @@ for ($i = 150; $i <= 300; $i += 10) {
|
|||
<i class="fas fa-power-off"></i>
|
||||
<span class="accessibility-toolbar-text"><?php echo __('Reset'); ?></span>
|
||||
</a>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -211,8 +211,16 @@ class UserConnections extends PluginAbstract
|
|||
}
|
||||
|
||||
public function getFooterCode()
|
||||
{
|
||||
return '<script src="' . getURL('plugin/UserConnections/script.js') . '"></script>';
|
||||
{
|
||||
global $global;
|
||||
|
||||
$obj = $this->getDataObject();
|
||||
$content = '<script src="' . getURL('plugin/UserConnections/script.js') . '"></script>';
|
||||
|
||||
$file = $global['systemRootPath'] . 'plugin/UserConnections/View/menu.php';
|
||||
$content .= getIncludeFileContent($file);
|
||||
|
||||
return $content;
|
||||
}
|
||||
|
||||
public function getHeadCode()
|
||||
|
|
@ -292,4 +300,5 @@ class UserConnections extends PluginAbstract
|
|||
//sendSocketSuccessMessageToUsers_id($msg, $friend_users_id);
|
||||
return UserNotifications::createNotification($title, $msg, $friend_users_id, $image, $href, $type, $element_id, $icon);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
149
plugin/UserConnections/View/menu.css
Normal file
149
plugin/UserConnections/View/menu.css
Normal file
|
|
@ -0,0 +1,149 @@
|
|||
#connectionList > li{
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
#connectionList > li > div > div{
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#connectionList > li > div > div > .label{
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
#connectionMenu-toolbar-overlay, #connectionMenu-toolbar-toggle{
|
||||
box-shadow: 10px 0 15px -5px rgba(0, 0, 0, 1);
|
||||
}
|
||||
|
||||
#connectionMenu-toolbar > .connectionMenu-toolbar-toggle > .button{
|
||||
margin-bottom: 0;
|
||||
font-weight: 400;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
-ms-touch-action: manipulation;
|
||||
touch-action: manipulation;
|
||||
cursor: pointer;
|
||||
background-image: none;
|
||||
border: 1px solid transparent;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
padding: 5px;
|
||||
font-size: 18px;
|
||||
line-height: 1.3333333;
|
||||
transition:all 0.2s linear;
|
||||
width: 70px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#connectionMenu-toolbar.active > .connectionMenu-toolbar-toggle > .button{
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
#connectionMenu-toolbar-overlay img{
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
#connectionMenu-toolbar > .connectionMenu-toolbar-toggle > .inactiveIcon{
|
||||
margin: 10px;
|
||||
}
|
||||
#connectionMenu-toolbar:hover > .connectionMenu-toolbar-toggle > .button,
|
||||
#connectionMenu-toolbar.active > .connectionMenu-toolbar-toggle .button{
|
||||
display: block;
|
||||
}
|
||||
#connectionMenu-toolbar:hover > .connectionMenu-toolbar-toggle > .inactiveIcon,
|
||||
#connectionMenu-toolbar.active > .connectionMenu-toolbar-toggle .inactiveIcon,
|
||||
#connectionMenu-toolbar .showWhenActive{
|
||||
display: none;
|
||||
}
|
||||
|
||||
#connectionMenu-toolbar.active .hideWhenActive{
|
||||
display: none;
|
||||
}
|
||||
#connectionMenu-toolbar.active .showWhenActive{
|
||||
display: block;
|
||||
}
|
||||
|
||||
#connectionMenu-toolbar .connectionMenu-toolbar-toggle{
|
||||
position: absolute;
|
||||
left: 300px;
|
||||
z-index: 9999;
|
||||
padding: 0;
|
||||
border-radius: 0 35px 35px 0;
|
||||
border-left: none;
|
||||
opacity: 0.5;
|
||||
top: 300px;
|
||||
}
|
||||
|
||||
#connectionMenu-toolbar #connectionMenu-toolbar-overlay .list-group{
|
||||
height: 100vh;
|
||||
overflow-y: auto;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
#connectionMenu-toolbar:hover > .connectionMenu-toolbar-toggle,
|
||||
#connectionMenu-toolbar.active > .connectionMenu-toolbar-toggle{
|
||||
left: 300px;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#connectionMenu-toolbar > div#connectionMenu-toolbar-overlay > div.list-group > a:nth-child(1){
|
||||
border-top-left-radius: 0;
|
||||
}
|
||||
|
||||
#connectionMenu-toolbar > .connectionMenu-toolbar-toggle:hover .button,
|
||||
#connectionMenu-toolbar.active > .connectionMenu-toolbar-toggle .button{
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#connectionMenu-toolbar{
|
||||
width: 300px;
|
||||
position: fixed;
|
||||
height: 100vh;
|
||||
left: -300px;
|
||||
top: 0;
|
||||
transition:left 0.3s ease-in-out;
|
||||
z-index: 9999;
|
||||
}
|
||||
#connectionMenu-toolbar.active{
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.connectionMenu-grayscale{
|
||||
filter: grayscale(100%);
|
||||
-webkit-filter: grayscale(100%);
|
||||
-webkit-filter: grayscale(1);
|
||||
-moz-filter: grayscale(100%);
|
||||
-ms-filter: grayscale(100%);
|
||||
-o-filter: grayscale(100%);
|
||||
filter: gray;
|
||||
}
|
||||
.connectionMenu-high-contrast{
|
||||
filter: contrast(150%);
|
||||
-webkit-filter: contrast(150%);
|
||||
-webkit-filter: contrast(1.5);
|
||||
-moz-filter: contrast(150%);
|
||||
-ms-filter: contrast(150%);
|
||||
-o-filter: contrast(150%);
|
||||
}
|
||||
|
||||
.connectionMenu-negative-contrast{
|
||||
filter: invert(100%);
|
||||
-webkit-filter: invert(100%);
|
||||
-webkit-filter: invert(1);
|
||||
-moz-filter: invert(100%);
|
||||
-ms-filter: invert(100%);
|
||||
-o-filter: invert(100%);
|
||||
}
|
||||
.connectionMenu-links-underline a{
|
||||
text-decoration: underline !important;
|
||||
}
|
||||
|
||||
.connectionMenu-readable-font{
|
||||
font-family: Verdana,Arial,Helvetica,sans-serif !important;
|
||||
}
|
||||
|
||||
|
||||
102
plugin/UserConnections/View/menu.js
Normal file
102
plugin/UserConnections/View/menu.js
Normal file
|
|
@ -0,0 +1,102 @@
|
|||
var currentFontsize = 100;
|
||||
var connectionMenuJustDrag = false;
|
||||
|
||||
$(function () {
|
||||
// Enable dragging of the toolbar toggle button
|
||||
$("#connectionMenu-toolbar-toggle").draggable({
|
||||
axis: "y",
|
||||
containment: 'window',
|
||||
scroll: false,
|
||||
start: function () {
|
||||
connectionMenuJustDrag = true;
|
||||
},
|
||||
stop: function () {
|
||||
$("#connectionMenu-toolbar-toggle").css("left", "");
|
||||
setCookie('connectionMenu-toolbar-toggle-top', $("#connectionMenu-toolbar-toggle").position().top, 30);
|
||||
setTimeout(function () {
|
||||
connectionMenuJustDrag = false;
|
||||
}, 200);
|
||||
}
|
||||
});
|
||||
|
||||
setConnectionMenuTop();
|
||||
|
||||
loadConnectionsList();
|
||||
|
||||
// Close connection menu when clicking outside of it
|
||||
$(document).on('click', function (event) {
|
||||
if (!$(event.target).closest('#connectionMenu-toolbar, #connectionMenu-toolbar-toggle').length) {
|
||||
$('#connectionMenu-toolbar').removeClass('active');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
function toggleConnectionMenu() {
|
||||
if (connectionMenuJustDrag) {
|
||||
return false;
|
||||
}
|
||||
$('#connectionMenu-toolbar').toggleClass('active');
|
||||
if ($('#connectionMenu-toolbar').hasClass('active')) {
|
||||
$('#connectionMenu-toolbar-overlay').show();
|
||||
} else {
|
||||
setTimeout(() => {
|
||||
$('#connectionMenu-toolbar-overlay').hide();
|
||||
}, 1000);
|
||||
}
|
||||
}
|
||||
|
||||
function setConnectionMenuTop() {
|
||||
if (typeof getCookie !== 'function') {
|
||||
setTimeout(function () {
|
||||
setConnectionMenuTop();
|
||||
}, 500);
|
||||
return false;
|
||||
}
|
||||
|
||||
var connectionMenuTop = getCookie('connectionMenu-toolbar-toggle-top');
|
||||
if (!empty(connectionMenuTop)) {
|
||||
console.log('setConnectionMenuTop', connectionMenuTop);
|
||||
$("#connectionMenu-toolbar-toggle").css("top", connectionMenuTop + 'px');
|
||||
}
|
||||
$("#connectionMenu-toolbar-toggle").show();
|
||||
}
|
||||
|
||||
// Function to load connections list via AJAX
|
||||
function loadConnectionsList() {
|
||||
$.ajax({
|
||||
url: webSiteRootURL + 'plugin/UserConnections/myConnections.json.php', // URL to fetch connections
|
||||
method: 'GET',
|
||||
dataType: 'json',
|
||||
success: function (response) {
|
||||
// Check if there are connections available
|
||||
if (response && response.data && response.data.length > 0) {
|
||||
var connectionsList = response.data;
|
||||
var $connectionList = $('#connectionList');
|
||||
$connectionList.empty(); // Clear existing list items
|
||||
|
||||
// Iterate through the connections and create list items
|
||||
$.each(connectionsList, function (index, connection) {
|
||||
var listItem = `
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||||
<div class="btn-group btn-group-justified" role="group">
|
||||
<a href="${connection.channelLink}" class="btn btn-primary btn-xs">
|
||||
<img src="${webSiteRootURL}user/${connection.friend_users_id}/foto.png" class="img img-responsive img-rounded pull-left" alt="User Photo">
|
||||
<strong>${connection.friend}</strong>
|
||||
</a>
|
||||
${connection.callButton}
|
||||
${connection.chatButton}
|
||||
</div>
|
||||
</li>`;
|
||||
$connectionList.append(listItem);
|
||||
});
|
||||
} else {
|
||||
// No connections found
|
||||
$('#connectionList').html('<li class="list-group-item text-center">No connections available</li>');
|
||||
}
|
||||
},
|
||||
error: function (xhr, status, error) {
|
||||
console.error('Error fetching connections:', error);
|
||||
$('#connectionList').html('<li class="list-group-item text-center text-danger">Failed to load connections</li>');
|
||||
}
|
||||
});
|
||||
}
|
||||
28
plugin/UserConnections/View/menu.php
Normal file
28
plugin/UserConnections/View/menu.php
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
<?php
|
||||
if (isIframe() || isConfirmationPage() || isEmbed() || !empty($global['connectionAdded'])) {
|
||||
return false;
|
||||
}
|
||||
$global['connectionAdded'] = 1;
|
||||
?>
|
||||
<link href="<?php echo getURL('plugin/UserConnections/View/menu.css'); ?>" rel="stylesheet" type="text/css" />
|
||||
<script src="<?php echo getURL('plugin/UserConnections/View/menu.js'); ?>"></script>
|
||||
<nav id="connectionMenu-toolbar" role="navigation">
|
||||
<div
|
||||
id="connectionMenu-toolbar-toggle"
|
||||
class="connectionMenu-toolbar-toggle list-group-item"
|
||||
data-toggle="tooltip"
|
||||
title="<?php echo __('Friends'); ?>"
|
||||
data-placement="right" onclick="toggleConnectionMenu();">
|
||||
<i class="fa-solid fa-user-group animate__animated animate__bounceIn inactiveIcon"></i>
|
||||
<div class="button animate__animated animate__bounceIn">
|
||||
<span class="sr-only"><?php echo __('Open'); ?></span>
|
||||
<i class="fa-solid fa-xmark fa-2x showWhenActive animate__animated animate__rotateIn"></i>
|
||||
<i class="fa-solid fa-user-group fa-2x hideWhenActive"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div id="connectionMenu-toolbar-overlay" class="" style="display: none;">
|
||||
<ul class="list-group bg-primary" id="connectionList">
|
||||
<!-- Dynamic list of connections will be populated here -->
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
|
@ -18,6 +18,7 @@ $chatIsEnabled = AVideoPlugin::isEnabledByName('Chat2');
|
|||
foreach ($response->data as $key => $value) {
|
||||
$value['buttons'] = UserConnections::getConnectionButtons($value['friend_users_id']);
|
||||
$value['callButton'] = getUserOnlineLabel($value['friend_users_id']);
|
||||
$value['channelLink'] = User::getChannelLink($value['friend_users_id']);
|
||||
if($chatIsEnabled){
|
||||
$value['chatButton'] = Chat2::getUserChatButton($value['friend_users_id']);
|
||||
}else{
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue