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: #38
This commit is contained in:
commit
5047190c61
|
|
@ -10,6 +10,7 @@ $bodyClasses .= $home ? 'home' : '';
|
||||||
<title>Astroport "<?php echo STATION_NAME; ?>"</title>
|
<title>Astroport "<?php echo STATION_NAME; ?>"</title>
|
||||||
<link rel="stylesheet" href="styles/<?php echo THEME; ?>/style.css" type="text/css" />
|
<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" />
|
<link rel="icon" type="image/png" href="./styles/<?php echo THEME; ?>/logo.png" />
|
||||||
|
<script type="text/javascript" src="/lib/lazyImg.min.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body class="<?php echo $bodyClasses; ?>">
|
<body class="<?php echo $bodyClasses; ?>">
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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)}();
|
||||||
|
|
@ -2,6 +2,12 @@
|
||||||
require_once('conf.php');
|
require_once('conf.php');
|
||||||
require_once('functions.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');
|
// require('php-ipfs-api/vendor/autoload.php');
|
||||||
// use Cloutier\PhpIpfsApi\IPFS;
|
// use Cloutier\PhpIpfsApi\IPFS;
|
||||||
// $ipfs = new IPFS("astroport", "8181", IPFS_API_PORT);
|
// $ipfs = new IPFS("astroport", "8181", IPFS_API_PORT);
|
||||||
|
|
@ -12,6 +18,7 @@ require_once('functions.php');
|
||||||
$uriParams = [];
|
$uriParams = [];
|
||||||
|
|
||||||
$videosList = array();
|
$videosList = array();
|
||||||
|
$videosListURIs = array();
|
||||||
$search = isset($_GET['search']) ? urldecode($_GET['search']) : "";
|
$search = isset($_GET['search']) ? urldecode($_GET['search']) : "";
|
||||||
exec("/bin/bash -c './get_astrxbian_index.sh \"*\" \"". $search . "\"'", $videos);
|
exec("/bin/bash -c './get_astrxbian_index.sh \"*\" \"". $search . "\"'", $videos);
|
||||||
exec("/bin/bash -c './get_PIN.sh'", $pinnedVideos);
|
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 shell_exec('whoami'); // Pour savoir quel utilisateur système exécute les scripts PHP
|
||||||
// echo '<pre>'; var_dump($videos); echo '</pre>'; exit;
|
// echo '<pre>'; var_dump($videos); echo '</pre>'; exit;
|
||||||
|
|
||||||
$i = 0;
|
|
||||||
$div = 9;
|
|
||||||
$r = rand(0, ($div - 1));
|
|
||||||
$j = 0;
|
|
||||||
$tagsMenu = array();
|
$tagsMenu = array();
|
||||||
$narrowingTags = array();
|
$narrowingTags = array();
|
||||||
$show = isset($_GET['show']) ? $_GET['show'] : 'pinned';
|
$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);
|
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;
|
continue;
|
||||||
}
|
}
|
||||||
|
|
@ -76,7 +79,6 @@ foreach ($videos as $v) {
|
||||||
if ($keepVideo) {
|
if ($keepVideo) {
|
||||||
|
|
||||||
$narrowingTags = array_merge($narrowingTags, $videoTags);
|
$narrowingTags = array_merge($narrowingTags, $videoTags);
|
||||||
|
|
||||||
/*
|
/*
|
||||||
++$i;
|
++$i;
|
||||||
if ($i % $div != $r) {
|
if ($i % $div != $r) {
|
||||||
|
|
@ -84,11 +86,12 @@ foreach ($videos as $v) {
|
||||||
}
|
}
|
||||||
|
|
||||||
++$j;
|
++$j;
|
||||||
if ($j > 9) {
|
if ($j > $maxElt) {
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
|
||||||
$duration = NULL;
|
$duration = NULL;
|
||||||
$thumbURL = '';
|
$thumbURL = '';
|
||||||
$videoTitle = NULL;
|
$videoTitle = NULL;
|
||||||
|
|
@ -96,6 +99,7 @@ foreach ($videos as $v) {
|
||||||
if (($contentType == 'youtube') and ($videoSource == 'www.youtube.com')) {
|
if (($contentType == 'youtube') and ($videoSource == 'www.youtube.com')) {
|
||||||
|
|
||||||
$thumbURL = sprintf(YOUTUBE_THUMB, $videoID);
|
$thumbURL = sprintf(YOUTUBE_THUMB, $videoID);
|
||||||
|
// $thumbURL = '';
|
||||||
|
|
||||||
// $json = getVideoJson($ipnsHash);
|
// $json = getVideoJson($ipnsHash);
|
||||||
|
|
||||||
|
|
@ -115,6 +119,8 @@ foreach ($videos as $v) {
|
||||||
$thumbURL = 'styles/'. THEME .'/font-awesome/film.white.90x90.png';
|
$thumbURL = 'styles/'. THEME .'/font-awesome/film.white.90x90.png';
|
||||||
}
|
}
|
||||||
|
|
||||||
|
$videosListURIs[] = $videoURI;
|
||||||
|
|
||||||
$videosList[] = [
|
$videosList[] = [
|
||||||
'duration' => $duration,
|
'duration' => $duration,
|
||||||
'thumbURL' => $thumbURL,
|
'thumbURL' => $thumbURL,
|
||||||
|
|
@ -193,7 +199,7 @@ echo '
|
||||||
</nav>
|
</nav>
|
||||||
';
|
';
|
||||||
|
|
||||||
if (!empty($tagFilter)) {
|
// if (!empty($tagFilter)) {
|
||||||
|
|
||||||
echo '
|
echo '
|
||||||
<nav id="tagfilter">
|
<nav id="tagfilter">
|
||||||
|
|
@ -238,8 +244,9 @@ if (!empty($tagFilter)) {
|
||||||
echo '
|
echo '
|
||||||
</ul>
|
</ul>
|
||||||
</nav>';
|
</nav>';
|
||||||
}
|
// }
|
||||||
|
|
||||||
|
/*
|
||||||
echo '
|
echo '
|
||||||
<nav id="browse">
|
<nav id="browse">
|
||||||
<h3>Parcourir</h3>
|
<h3>Parcourir</h3>
|
||||||
|
|
@ -265,7 +272,10 @@ echo '
|
||||||
}
|
}
|
||||||
echo '
|
echo '
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>';
|
||||||
|
*/
|
||||||
|
|
||||||
|
echo '
|
||||||
</div>
|
</div>
|
||||||
</aside>';
|
</aside>';
|
||||||
|
|
||||||
|
|
@ -324,6 +334,8 @@ foreach ($videosList as $video) {
|
||||||
$tagQueryArray = array_diff($tagFilter, $tagArray);
|
$tagQueryArray = array_diff($tagFilter, $tagArray);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
$tagQueryArray = $tagArray;
|
||||||
|
|
||||||
$classes = $selectedTag ? ' selected' : 'selectable';
|
$classes = $selectedTag ? ' selected' : 'selectable';
|
||||||
|
|
||||||
if (!empty($tagQueryArray)) {
|
if (!empty($tagQueryArray)) {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue