From c83d559540335b0e41d9d7b6129b972c0053b2e4 Mon Sep 17 00:00:00 2001
From: root <root@163-172-6-34.online.net>
Date: Wed, 15 Jan 2020 15:57:56 +0100
Subject: [PATCH] remove console.log, add lazy load libraries page

---
 fuel/app/views/libraries/list.php | 67 ++++++++++++++++++++++++-------
 fuel/app/views/movie/list.php     |  2 -
 2 files changed, 53 insertions(+), 16 deletions(-)

diff --git a/fuel/app/views/libraries/list.php b/fuel/app/views/libraries/list.php
index ea4f721..95f7d89 100644
--- a/fuel/app/views/libraries/list.php
+++ b/fuel/app/views/libraries/list.php
@@ -66,7 +66,7 @@
                                         data-tvshow-id="<?php echo $movie->id; ?>"
                                     <?php endif; ?>
                                 >
-                                    <div style="background-image: url(); background-size: cover; background-position: center center; background-repeat: no-repeat; width: 100%; height: 100%; position: absolute; z-index: 2;"
+                                    <div style="background-image: none; background-size: cover; background-position: center center; background-repeat: no-repeat; width: 100%; height: 100%; position: absolute; z-index: 2;"
                                          class=""></div>
                                 </div>
                                 <div class=" MetadataPosterCardOverlay-overlay-1uMpL">
@@ -249,19 +249,58 @@
             });
         });
         /** LOAD IMAGES **/
-        $('.PosterCardImg-imageContainer-1Ar4M[data-movie-id]').each(function (index, element) {
-            /** IF USING CLOUDFLARE TOO MANY REQUEST **/
-            setTimeout(function() {
-                var movie_id = $(element).data('movie-id');
-                $('[data-movie-id="' + movie_id + '"] > div').css('background-image', 'url("/cover/movie?movie_id=' + movie_id + '&width=' + 160 + '&height=' + 236 + '")');
-            }, 10 * index);
-        });
-        $('.PosterCardImg-imageContainer-1Ar4M[data-tvshow-id]').each(function (index, element) {
-            /** IF USING CLOUDFLARE TOO MANY REQUEST **/
-            setTimeout(function() {
-                var tvshow_id = $(element).data('tvshow-id');
-                $('[data-tvshow-id="' + tvshow_id + '"] > div').css('background-image', 'url("/cover/tvshow?tvshow_id='+ tvshow_id +'&width='+ 160 +'&height='+ 236 +'")');
-            }, 10 * index);
+        $('.MetadataListPageContent-metadataListScroller-1uFgY.Scroller-scroller-d5-b-.Scroller-vertical-1bgGS').scroll(function() {
+
+            let number = 1;
+
+            $('.PosterCardImg-imageContainer-1Ar4M[data-movie-id]').each(function (index, element) {
+
+                let movie_id = $(element).data('movie-id');
+                let position = element.getBoundingClientRect();
+                let movie = document.querySelector('[data-movie-id="' + movie_id + '"] > div');
+
+                if( position.top > 0 && position.top <= (window.innerHeight || document.documentElement.clientHeight) && !movie.classList.contains('hasBackground') ) {
+                    movie.classList.add('hasBackground');
+                    /** IF USING CLOUDFLARE TOO MANY REQUEST **/
+                    setTimeout(function () {
+                        $('[data-movie-id="' + movie_id + '"] > div')
+                            .css('opacity', 0)
+                            .css('background-image', 'url("/cover/movie?movie_id=' + movie_id + '&width=' + 160 + '&height=' + 236 + '")')
+                            .animate({opacity: 1}, 500);
+                    }, 50 +( 50 * number));
+                    number++;
+                } else if( ( position.top < 0 || position.top > (window.innerHeight || document.documentElement.clientHeight) ) && movie.classList.contains('hasBackground') ) {
+                    $('[data-movie-id="' + movie_id + '"] > div').css('background-image', '')
+                        .removeClass('hasBackground')
+                        .animate({opacity: 0}, 500);
+                }
+            });
+
+            $('.PosterCardImg-imageContainer-1Ar4M[data-tvshow-id]').each(function (index, element) {
+
+                let tvshow_id = $(element).data('tvshow-id');
+                let position = element.getBoundingClientRect();
+                let tvshow = document.querySelector('[data-tvshow-id="' + tvshow_id + '"] > div');
+
+                if( position.top > 0 && position.top <= (window.innerHeight || document.documentElement.clientHeight) && !tvshow.classList.contains('hasBackground') ) {
+                    tvshow.classList.add('hasBackground');
+                    /** IF USING CLOUDFLARE TOO MANY REQUEST **/
+                    setTimeout(function () {
+                        $('[data-tvshow-id="' + tvshow_id + '"] > div')
+                            .css('opacity', 0)
+                            .css('background-image', 'url("/cover/tvshow?tvshow_id=' + tvshow_id + '&width=' + 160 + '&height=' + 236 + '")')
+                            .animate({opacity: 1}, 500);
+                    }, 50 +( 50 * number));
+                    number++;
+                } else if( ( position.top < 0 || position.top > (window.innerHeight || document.documentElement.clientHeight) ) && tvshow.classList.contains('hasBackground') ) {
+                    $('[data-tvshow-id="' + tvshow_id + '"] > div').css('background-image', '')
+                        .removeClass('hasBackground')
+                        .animate({opacity: 0}, 500);
+                }
+            });
         });
+
+        $('.MetadataListPageContent-metadataListScroller-1uFgY.Scroller-scroller-d5-b-.Scroller-vertical-1bgGS').scroll();
+
     });
 </script>
\ No newline at end of file
diff --git a/fuel/app/views/movie/list.php b/fuel/app/views/movie/list.php
index fa1ad89..437649c 100644
--- a/fuel/app/views/movie/list.php
+++ b/fuel/app/views/movie/list.php
@@ -341,9 +341,7 @@
                 let movie = document.querySelector('[data-movie-id="' + movie_id + '"] > div');
 
                 if( position.top > 0 && position.top <= (window.innerHeight || document.documentElement.clientHeight) && !movie.classList.contains('hasBackground') ) {
-                    console.log(movie, position.top, window.innerHeight, !movie.classList.contains('hasBackground'));
                     movie.classList.add('hasBackground');
-                    console.log(movie, position.top, window.innerHeight, !movie.classList.contains('hasBackground'));
                     /** IF USING CLOUDFLARE TOO MANY REQUEST **/
                     setTimeout(function () {
                         $('[data-movie-id="' + movie_id + '"] > div')