1
0
Fork 0
mirror of https://github.com/DanielnetoDotCom/YouPHPTube synced 2025-10-05 19:42:38 +02:00

Show more/less on big video description

This commit is contained in:
Daniel 2021-07-26 14:24:03 -03:00
parent 4511bef455
commit 4aa18d55f7
5 changed files with 67 additions and 54 deletions

View file

@ -162,14 +162,18 @@ if ($obj->BigVideo && empty($_GET['showOnly'])) {
title="<?php echo $videoRow['title']; ?>"> title="<?php echo $videoRow['title']; ?>">
<strong><?php echo $videoRow['title']; ?></strong> <strong><?php echo $videoRow['title']; ?></strong>
</a> </a>
<div class="mainAreaDescriptionContainer"> <div class="descriptionArea">
<p class="mainAreaDescription" itemprop="description"><?php <div class="descriptionAreaPreContent">
if (strpos($videoRow['description'], '<br') !== false || strpos($videoRow['description'], '<p') !== false) { <div class="descriptionAreaContent">
echo $videoRow['description']; <?php
} else { echo Video::htmlDescription($videoRow['description']);
echo nl2br(textToLink(htmlentities($videoRow['description']))); ?>
} </div>
?></p> </div>
<button onclick="$(this).closest('.descriptionArea').toggleClass('expanded');" class="btn btn-xs btn-default descriptionAreaShowMoreBtn" style="display: none; ">
<span class="showMore"><i class="fas fa-caret-down"></i> <?php echo __("Show More"); ?></span>
<span class="showLess"><i class="fas fa-caret-up"></i> <?php echo __("Show Less"); ?></span>
</button>
</div> </div>
<div class="text-muted galeryDetails"> <div class="text-muted galeryDetails">
<div> <div>

View file

@ -1172,4 +1172,34 @@ li.dropdown-submenu > ul > li > a{
} }
a:hover{ a:hover{
text-decoration: none; text-decoration: none;
}
.descriptionArea .descriptionAreaPreContent{
max-height: 200px;
overflow: hidden;
transition: max-height 0.25s ease-out;
overflow: hidden;
}
.descriptionAreaPreContent{
margin-bottom: 10px;
}
.descriptionArea.expanded .descriptionAreaPreContent{
max-height: 1500px;
overflow: auto;
transition: max-height 0.25s ease-in;
}
.descriptionAreaShowMoreBtn{
margin-top: -10px;
}
.descriptionArea .showMore{
display: block;
}
.descriptionArea .showLess{
display: none;
}
.descriptionArea.expanded .showMore{
display: none;
}
.descriptionArea.expanded .showLess{
display: block;
} }

View file

@ -351,7 +351,7 @@ function subscribe(email, user_id) {
'user_id': user_id 'user_id': user_id
}, },
success: function (response) { success: function (response) {
var totalElement = $('.notificationButton' + user_id+' .badge'); var totalElement = $('.notificationButton' + user_id + ' .badge');
if (response.subscribe == "i") { if (response.subscribe == "i") {
$('.notificationButton' + user_id).removeClass("subscribed"); $('.notificationButton' + user_id).removeClass("subscribed");
totalElement.text(parseInt(totalElement.first().text()) - 1); totalElement.text(parseInt(totalElement.first().text()) - 1);
@ -367,7 +367,7 @@ function subscribe(email, user_id) {
} }
function toogleNotify(user_id) { function toogleNotify(user_id) {
email = $('#subscribeEmail'+user_id).val(); email = $('#subscribeEmail' + user_id).val();
subscribeNotify(email, user_id); subscribeNotify(email, user_id);
} }
function subscribeNotify(email, user_id) { function subscribeNotify(email, user_id) {
@ -699,7 +699,7 @@ function showMuteTooltip() {
} }
function playerPlayIfAutoPlay(currentTime) { function playerPlayIfAutoPlay(currentTime) {
if(isWebRTC()){ if (isWebRTC()) {
return false; return false;
} }
if (isAutoplayEnabled()) { if (isAutoplayEnabled()) {
@ -1114,13 +1114,13 @@ function avideoModalIframeRemove() {
} }
function avideoResponse(response) { function avideoResponse(response) {
if(response.error){ if (response.error) {
if(!response.msg){ if (!response.msg) {
response.msg = 'Error'; response.msg = 'Error';
} }
avideoAlertError(response.msg); avideoAlertError(response.msg);
}else{ } else {
if(!response.msg){ if (!response.msg) {
response.msg = 'Success'; response.msg = 'Success';
} }
avideoToastSuccess(response.msg); avideoToastSuccess(response.msg);
@ -1212,7 +1212,21 @@ function tabsCategoryDocumentHeightChanged() {
return false; return false;
} }
function checkDescriptionArea(){
$(".descriptionArea").each(function (index) {
if ($(this).height() < $(this).find('.descriptionAreaContent').height()) {
$(this).find('.descriptionAreaShowMoreBtn').show();
}
});
}
$(document).ready(function () { $(document).ready(function () {
checkDescriptionArea();
setInterval(function(){// check for the carousel
checkDescriptionArea();
},3000);
Cookies.set('timezone', Intl.DateTimeFormat().resolvedOptions().timeZone, { Cookies.set('timezone', Intl.DateTimeFormat().resolvedOptions().timeZone, {
path: '/', path: '/',
expires: 365 expires: 365

View file

@ -333,38 +333,6 @@ if (!empty($video['users_id']) && User::hasBlockedUser($video['users_id'])) {
$modeYouTubeTimeLog['After head'] = microtime(true) - $modeYouTubeTime; $modeYouTubeTimeLog['After head'] = microtime(true) - $modeYouTubeTime;
$modeYouTubeTime = microtime(true); $modeYouTubeTime = microtime(true);
?> ?>
<style>
#descriptionArea #descriptionAreaPreContent{
max-height: 200px;
overflow: hidden;
transition: max-height 0.25s ease-out;
overflow: hidden;
}
#descriptionAreaPreContent{
margin-bottom: 30px;
}
#descriptionArea.expanded #descriptionAreaPreContent{
max-height: 1500px;
overflow: auto;
transition: max-height 0.25s ease-in;
}
#descriptionAreaShowMoreBtn{
position: absolute;
bottom: 0;
}
#descriptionArea .showMore{
display: block;
}
#descriptionArea .showLess{
display: none;
}
#descriptionArea.expanded .showMore{
display: none;
}
#descriptionArea.expanded .showLess{
display: block;
}
</style>
</head> </head>
<body class="<?php echo $global['bodyClass']; ?>"> <body class="<?php echo $global['bodyClass']; ?>">

View file

@ -280,15 +280,15 @@ if ($video['type'] !== 'notfound' && CustomizeUser::canShareVideosFromVideo($vid
if ($video['type'] !== 'notfound' && $video['type'] !== 'article') { if ($video['type'] !== 'notfound' && $video['type'] !== 'article') {
?> ?>
<div class="col-xs-4 col-sm-2 col-lg-2 text-right"><strong><?php echo __("Description"); ?>:</strong></div> <div class="col-xs-4 col-sm-2 col-lg-2 text-right"><strong><?php echo __("Description"); ?>:</strong></div>
<div class="col-xs-8 col-sm-10 col-lg-10" itemprop="description" id="descriptionArea"> <div class="col-xs-8 col-sm-10 col-lg-10 descriptionArea" itemprop="description">
<div id="descriptionAreaPreContent"> <div class="descriptionAreaPreContent">
<div id="descriptionAreaContent"> <div class="descriptionAreaContent">
<?php <?php
echo Video::htmlDescription($video['description']); echo Video::htmlDescription($video['description']);
?> ?>
</div> </div>
</div> </div>
<button onclick="$('#descriptionArea').toggleClass('expanded');" class="btn btn-xs btn-default" id="descriptionAreaShowMoreBtn" style="display: none; "> <button onclick="$(this).closest('.descriptionArea').toggleClass('expanded');" class="btn btn-xs btn-default descriptionAreaShowMoreBtn" style="display: none; ">
<span class="showMore"><i class="fas fa-caret-down"></i> <?php echo __("Show More"); ?></span> <span class="showMore"><i class="fas fa-caret-down"></i> <?php echo __("Show More"); ?></span>
<span class="showLess"><i class="fas fa-caret-up"></i> <?php echo __("Show Less"); ?></span> <span class="showLess"><i class="fas fa-caret-up"></i> <?php echo __("Show Less"); ?></span>
</button> </button>
@ -302,9 +302,6 @@ if ($video['type'] !== 'notfound' && CustomizeUser::canShareVideosFromVideo($vid
</div> </div>
<script> <script>
$(document).ready(function () { $(document).ready(function () {
if ($('#descriptionArea').height() < $('#descriptionAreaContent').height()) {
$('#descriptionAreaShowMoreBtn').show();
}
<?php <?php
if (empty($advancedCustom->showShareMenuOpenByDefault)) { if (empty($advancedCustom->showShareMenuOpenByDefault)) {
?> ?>