Merge pull request 'FIX slowness + lazy loading of images + modification of tags filter behavior' (#38) from BorisPaing/astrXbian_UX-et-webUI:boris into master

Reviewed-on: axiom-team/astrXbian#38
This commit is contained in:
qo-op 2021-09-25 17:02:45 +02:00
commit 5047190c61
3 changed files with 24 additions and 10 deletions

View File

@ -10,6 +10,7 @@ $bodyClasses .= $home ? 'home' : '';
<title>Astroport "<?php echo STATION_NAME; ?>"</title>
<link rel="stylesheet" href="styles/<?php echo THEME; ?>/style.css" type="text/css" />
<link rel="icon" type="image/png" href="./styles/<?php echo THEME; ?>/logo.png" />
<script type="text/javascript" src="/lib/lazyImg.min.js"></script>
</head>
<body class="<?php echo $bodyClasses; ?>">

1
www/boris/lib/lazyImg.min.js vendored Normal file
View File

@ -0,0 +1 @@
var lazyImg={};!function(){lazyImg.image="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEA",lazyImg.custom_offset=100,lazyImg.view_elements=[],lazyImg.viewportHeight=lazyImg.viewportWidth=0,lazyImg.body=lazyImg.docEl=null,lazyImg.initVar=function(){lazyImg.viewportHeight=window.innerHeight,lazyImg.viewportWidth=window.innerWidth,lazyImg.body=document.body,lazyImg.docEl=document.documentElement},lazyImg.setConfig=function(a,b){lazyImg.image=a||lazyImg.image,lazyImg.custom_offset=b||lazyImg.custom_offset},lazyImg.reveal=function(){for(var a=window.scrollTop||lazyImg.docEl.scrollTop||lazyImg.body.scrollTop,b=window.scrollLeft||lazyImg.docEl.scrollLeft||lazyImg.body.scrollLeft,c=lazyImg.docEl.clientTop||lazyImg.body.clientTop||0,d=lazyImg.docEl.clientLeft||lazyImg.body.clientLeft||0,e=0;e<lazyImg.view_elements.length;e++){var f=lazyImg.view_elements[e],g=f.getBoundingClientRect(),h=Math.round(g.top+a-c),i=Math.round(g.bottom+a-c),j=Math.round(g.left+b-d);i>a-lazyImg.custom_offset&&h<a+lazyImg.viewportHeight+lazyImg.custom_offset&&j>b-lazyImg.custom_offset&&j<b+lazyImg.viewportWidth+lazyImg.custom_offset&&(f.src=f.getAttribute("data-lazyimg-src"),f.srcset=f.getAttribute("data-lazyimg-srcset"),f.removeAttribute("data-lazyimg-loading"),f.removeAttribute("data-lazyimg-src"),f.removeAttribute("data-lazyimg-srcset"),lazyImg.view_elements.splice(e,1),e--)}0==lazyImg.view_elements.length&&lazyImg.removeListener()},lazyImg.list_maker=function(){for(var a=document.querySelectorAll("img:not([data-lazyimg-list])"),b=0;b<a.length;b++){var c=a[b];lazyImg.view_elements.push(c),c.setAttribute("data-lazyimg-list","true"),c.setAttribute("data-lazyimg-loading","true"),c.setAttribute("data-lazyimg-src",c.src),c.setAttribute("data-lazyimg-srcset",c.srcset),c.src=lazyImg.image,c.srcset=""}},lazyImg.throttle=function(a,b){var c=!1;return function(){c||(a.call(),c=!0,setTimeout(function(){c=!1},b))}},lazyImg.listener=function(){lazyImg.initVar(),lazyImg.reveal()},lazyImg.throttleListener=lazyImg.throttle(lazyImg.listener,100),lazyImg.removeListener=function(){window.removeEventListener("scroll",lazyImg.throttleListener),window.removeEventListener("resize",lazyImg.throttleListener)},lazyImg.activeListener=function(){window.addEventListener("scroll",lazyImg.throttleListener,!1),window.addEventListener("resize",lazyImg.throttleListener,!1)},lazyImg.activeListener(),lazyImg.intervalObject=setInterval(function(){lazyImg.list_maker()},20),window.addEventListener("load",function(){clearInterval(lazyImg.intervalObject),lazyImg.list_maker(),lazyImg.activeListener(),lazyImg.initVar(),lazyImg.reveal()},!1)}();

View File

@ -2,6 +2,12 @@
require_once('conf.php');
require_once('functions.php');
$i = 0;
$div = 9;
$r = rand(0, ($div - 1));
$j = 0;
$maxElt = 16;
// require('php-ipfs-api/vendor/autoload.php');
// use Cloutier\PhpIpfsApi\IPFS;
// $ipfs = new IPFS("astroport", "8181", IPFS_API_PORT);
@ -12,6 +18,7 @@ require_once('functions.php');
$uriParams = [];
$videosList = array();
$videosListURIs = array();
$search = isset($_GET['search']) ? urldecode($_GET['search']) : "";
exec("/bin/bash -c './get_astrxbian_index.sh \"*\" \"". $search . "\"'", $videos);
exec("/bin/bash -c './get_PIN.sh'", $pinnedVideos);
@ -23,10 +30,6 @@ exec("/bin/bash -c './get_PIN.sh'", $pinnedVideos);
// echo shell_exec('whoami'); // Pour savoir quel utilisateur système exécute les scripts PHP
// echo '<pre>'; var_dump($videos); echo '</pre>'; exit;
$i = 0;
$div = 9;
$r = rand(0, ($div - 1));
$j = 0;
$tagsMenu = array();
$narrowingTags = array();
$show = isset($_GET['show']) ? $_GET['show'] : 'pinned';
@ -49,7 +52,7 @@ foreach ($videos as $v) {
list($contentType, $videoID, $year, $filename, $saison, $tagsStr, $ipnsHash, $definition, $videoURI) = explode(";", $v);
if (in_array_column($videoURI, 'uri', $videosList)) {
if (in_array($videoURI, $videosListURIs)) {
continue;
}
@ -76,7 +79,6 @@ foreach ($videos as $v) {
if ($keepVideo) {
$narrowingTags = array_merge($narrowingTags, $videoTags);
/*
++$i;
if ($i % $div != $r) {
@ -84,11 +86,12 @@ foreach ($videos as $v) {
}
++$j;
if ($j > 9) {
if ($j > $maxElt) {
break;
}
*/
$duration = NULL;
$thumbURL = '';
$videoTitle = NULL;
@ -96,6 +99,7 @@ foreach ($videos as $v) {
if (($contentType == 'youtube') and ($videoSource == 'www.youtube.com')) {
$thumbURL = sprintf(YOUTUBE_THUMB, $videoID);
// $thumbURL = '';
// $json = getVideoJson($ipnsHash);
@ -115,6 +119,8 @@ foreach ($videos as $v) {
$thumbURL = 'styles/'. THEME .'/font-awesome/film.white.90x90.png';
}
$videosListURIs[] = $videoURI;
$videosList[] = [
'duration' => $duration,
'thumbURL' => $thumbURL,
@ -193,7 +199,7 @@ echo '
</nav>
';
if (!empty($tagFilter)) {
// if (!empty($tagFilter)) {
echo '
<nav id="tagfilter">
@ -238,8 +244,9 @@ if (!empty($tagFilter)) {
echo '
</ul>
</nav>';
}
// }
/*
echo '
<nav id="browse">
<h3>Parcourir</h3>
@ -265,7 +272,10 @@ echo '
}
echo '
</ul>
</nav>
</nav>';
*/
echo '
</div>
</aside>';
@ -324,6 +334,8 @@ foreach ($videosList as $video) {
$tagQueryArray = array_diff($tagFilter, $tagArray);
}
$tagQueryArray = $tagArray;
$classes = $selectedTag ? ' selected' : 'selectable';
if (!empty($tagQueryArray)) {