Merge 1.7.3 into main (#331)

gaseous-server/Classes/Config.cs

@@ -196,6 +196,11 @@ namespace gaseous_server.Classes
             {
                 string SettingName = (string)dataRow["Setting"];
 
+                if (SettingName.StartsWith("LastRun_"))
+                {
+                    Console.WriteLine("Break");
+                }
+
                 if (AppSettings.ContainsKey(SettingName))
                 {
                     AppSettings.Remove(SettingName);

gaseous-server/Classes/Database.cs

@@ -9,7 +9,20 @@ namespace gaseous_server.Classes
 {
 	public class Database
 	{
-		public static int schema_version = 0;
+		private static int _schema_version { get; set; } = 0;
+		public static int schema_version
+		{
+			get
+			{
+				//Logging.Log(Logging.LogType.Information, "Database Schema", "Schema version is " + _schema_version);
+				return _schema_version;
+			}
+			set
+			{
+				//Logging.Log(Logging.LogType.Information, "Database Schema", "Setting schema version " + _schema_version);
+				_schema_version = value;
+			}
+		}
 		
 		public Database()
 		{
@@ -80,7 +93,16 @@ namespace gaseous_server.Classes
 						ExecuteCMD(sql, dbDict);
 					}
 
-                    for (int i = 1000; i < 10000; i++)
+					sql = "SELECT schema_version FROM schema_version;";
+					dbDict = new Dictionary<string, object>();
+					DataTable SchemaVersion = ExecuteCMD(sql, dbDict);
+					int OuterSchemaVer = (int)SchemaVersion.Rows[0][0];
+					if (OuterSchemaVer == 0)
+					{
+						OuterSchemaVer = 1000;
+					}
+
+                    for (int i = OuterSchemaVer; i < 10000; i++)
 					{
 						string resourceName = "gaseous_server.Support.Database.MySQL.gaseous-" + i + ".sql";
 						string dbScript = "";
@@ -96,7 +118,7 @@ namespace gaseous_server.Classes
 								// apply script
 								sql = "SELECT schema_version FROM schema_version;";
 								dbDict = new Dictionary<string, object>();
-								DataTable SchemaVersion = ExecuteCMD(sql, dbDict);
+								SchemaVersion = ExecuteCMD(sql, dbDict);
 								if (SchemaVersion.Rows.Count == 0)
 								{
                                     // something is broken here... where's the table?
@@ -107,6 +129,8 @@ namespace gaseous_server.Classes
 								{
 									int SchemaVer = (int)SchemaVersion.Rows[0][0];
                                     Logging.Log(Logging.LogType.Information, "Database", "Schema version is " + SchemaVer);
+									// update schema version variable
+									Database.schema_version = SchemaVer;
                                     if (SchemaVer < i)
 									{
 										try

gaseous-server/Classes/Metadata/Games.cs

@@ -561,6 +561,7 @@ namespace gaseous_server.Classes.Metadata
             }
 
             public long? Id { get; set; }
+            public long Index { get; set; }
             public string Name { get; set; }
             public string Slug { get; set; }
             public double? TotalRating { get; set; }

gaseous-server/Classes/RomMediaGroup.cs

@@ -5,6 +5,9 @@ using Microsoft.VisualBasic;
 using IGDB.Models;
 using gaseous_server.Classes.Metadata;
 using System.IO.Compression;
+using SharpCompress.Archives;
+using SharpCompress.Common;
+using gaseous_server.Models;
 
 namespace gaseous_server.Classes
 {
@@ -259,6 +262,7 @@ namespace gaseous_server.Classes
             {
                 Game GameObject = Games.GetGame(mediaGroupItem.GameId, false, false, false);
                 Platform PlatformObject = Platforms.GetPlatform(mediaGroupItem.PlatformId, false);
+                PlatformMapping.PlatformMapItem platformMapItem = PlatformMapping.GetPlatformMap(mediaGroupItem.PlatformId);
 
                 Logging.Log(Logging.LogType.Information, "Media Group", "Beginning build of media group: " + GameObject.Name + " for platform " + PlatformObject.Name);
 
@@ -293,10 +297,124 @@ namespace gaseous_server.Classes
                     foreach (long RomId in mediaGroupItem.RomIds)
                     {
                         Roms.GameRomItem rom = Roms.GetRom(RomId);
+                        bool fileNameFound = false;
                         if (File.Exists(rom.Path))
                         {
+                            string romExt = Path.GetExtension(rom.Path);
+                            if (new string[]{ ".zip", ".rar", ".7z" }.Contains(romExt))
+                            {
+                                Logging.Log(Logging.LogType.Information, "Media Group", "Decompressing ROM: " + rom.Name);
+
+                                // is compressed
+                                switch (romExt)
+                                {
+                                    case ".zip":
+                                        try
+                                        {
+                                            using (var archive = SharpCompress.Archives.Zip.ZipArchive.Open(rom.Path))
+                                            {
+                                                foreach (var entry in archive.Entries.Where(entry => !entry.IsDirectory))
+                                                {
+                                                    Logging.Log(Logging.LogType.Information, "Media Group", "Extracting file: " + entry.Key);
+                                                    if (fileNameFound == false)
+                                                    {
+                                                        //check if extension is in valid extensions
+                                                        if (platformMapItem.Extensions.SupportedFileExtensions.Contains(Path.GetExtension(entry.Key), StringComparer.InvariantCultureIgnoreCase))
+                                                        {
+                                                            // update rom file name
+                                                            rom.Name = entry.Key;
+                                                            fileNameFound = true;
+                                                        }
+                                                    }
+                                                    entry.WriteToDirectory(ZipFileTempPath, new ExtractionOptions()
+                                                    {
+                                                        ExtractFullPath = true,
+                                                        Overwrite = true
+                                                    });
+                                                }
+                                            }
+                                        }
+                                        catch (Exception zipEx)
+                                        {
+                                            Logging.Log(Logging.LogType.Warning, "Media Group", "Unzip error", zipEx);
+                                            throw;
+                                        }
+                                        break;
+
+                                    case ".rar":
+                                        try
+                                        {
+                                            using (var archive = SharpCompress.Archives.Rar.RarArchive.Open(rom.Path))
+                                            {
+                                                foreach (var entry in archive.Entries.Where(entry => !entry.IsDirectory))
+                                                {
+                                                    Logging.Log(Logging.LogType.Information, "Media Group", "Extracting file: " + entry.Key);
+                                                    if (fileNameFound == false)
+                                                    {
+                                                        //check if extension is in valid extensions
+                                                        if (platformMapItem.Extensions.SupportedFileExtensions.Contains(Path.GetExtension(entry.Key), StringComparer.InvariantCultureIgnoreCase))
+                                                        {
+                                                            // update rom file name
+                                                            rom.Name = entry.Key;
+                                                            fileNameFound = true;
+                                                        }
+                                                    }
+                                                    entry.WriteToDirectory(ZipFileTempPath, new ExtractionOptions()
+                                                    {
+                                                        ExtractFullPath = true,
+                                                        Overwrite = true
+                                                    });
+                                                }
+                                            }
+                                        }
+                                        catch (Exception zipEx)
+                                        {
+                                            Logging.Log(Logging.LogType.Warning, "Media Group", "Unrar error", zipEx);
+                                            throw;
+                                        }
+                                        break;
+
+                                    case ".7z":
+                                        try
+                                        {
+                                            using (var archive = SharpCompress.Archives.SevenZip.SevenZipArchive.Open(rom.Path))
+                                            {
+                                                foreach (var entry in archive.Entries.Where(entry => !entry.IsDirectory))
+                                                {
+                                                    Logging.Log(Logging.LogType.Information, "Media Group", "Extracting file: " + entry.Key);
+                                                    if (fileNameFound == false)
+                                                    {
+                                                        //check if extension is in valid extensions
+                                                        if (platformMapItem.Extensions.SupportedFileExtensions.Contains(Path.GetExtension(entry.Key), StringComparer.InvariantCultureIgnoreCase))
+                                                        {
+                                                            // update rom file name
+                                                            rom.Name = entry.Key;
+                                                            fileNameFound = true;
+                                                        }
+                                                    }
+                                                    entry.WriteToDirectory(ZipFileTempPath, new ExtractionOptions()
+                                                    {
+                                                        ExtractFullPath = true,
+                                                        Overwrite = true
+                                                    });
+                                                }
+                                            }
+                                        }
+                                        catch (Exception zipEx)
+                                        {
+                                            Logging.Log(Logging.LogType.Warning, "Media Group", "7z error", zipEx);
+                                            throw;
+                                        }
+                                        break;
+
+                                }
+                            }
+                            else
+                            {
+                                // is uncompressed
                                 Logging.Log(Logging.LogType.Information, "Media Group", "Copying ROM: " + rom.Name);
                                 File.Copy(rom.Path, Path.Combine(ZipFileTempPath, Path.GetFileName(rom.Path)));
+                            }
 
                             romItems.Add(rom);
                         }

gaseous-server/Controllers/V1.0/SearchController.cs

@@ -76,6 +76,7 @@ namespace gaseous_server.Controllers
             string searchFields = "fields cover,first_release_date,name,platforms,slug; ";
             searchBody += "search \"" + SearchString + "\";";
             searchBody += "where platforms = (" + PlatformId + ");";
+            searchBody += "limit 100;";
 
             List<GaseousGame>? searchCache = Communications.GetSearchCache<List<GaseousGame>>(searchFields, searchBody);
 

gaseous-server/Controllers/V1.1/GamesController.cs

@@ -479,6 +479,7 @@ namespace gaseous_server.Controllers.v1_1
             Database db = new Database(Database.databaseType.MySql, Config.DatabaseConfiguration.ConnectionString);
             
             string sql = @"
+SET SESSION sql_mode=(SELECT REPLACE(@@sql_mode,'ONLY_FULL_GROUP_BY',''));
 SELECT DISTINCT
     Game.Id,
     Game.`Name`,
@@ -569,6 +570,7 @@ FROM
 
                 Game retGame = Storage.BuildCacheObject<Game>(new Game() , dbResponse.Rows[i]);
                 Games.MinimalGameItem retMinGame = new Games.MinimalGameItem(retGame);
+                retMinGame.Index = i;
                 if (dbResponse.Rows[i]["RomSaveCount"] != DBNull.Value || dbResponse.Rows[i]["MediaGroupSaveCount"] != DBNull.Value)
                 {
                     retMinGame.HasSavedGame = true;

gaseous-server/wwwroot/emulators/EmulatorJS.html

@@ -40,6 +40,11 @@
 
     EJS_threads = false;
 
+    EJS_Buttons = {
+        saveSavFiles: false,
+        loadSavFiles: false
+    }
+
     EJS_onSaveState = function(e) {
         var returnValue = {
             "ScreenshotByteArrayBase64": btoa(Uint8ToString(e.screenshot)),

gaseous-server/wwwroot/pages/dialogs/librarynew.html

@@ -1,12 +1,7 @@
-<div style="padding-top: 5px;">
-    <strong>New Library</strong>
-</div>
-
-<div style="width: 300px;">
 <table style="width: 98%; margin-top: 15px; margin-bottom: 15px;">
     <tr>
-            <th>Name</th>
+        <th style="width: 20%;">Name</th>
-            <td><input type="text" id="newlibrary_name" style="width: 95%;" /></td>
+        <td style="width: 80%;"><input type="text" id="newlibrary_name" style="width: 98%;" /></td>
     </tr>
     <tr>
         <th>Default Platform</th>
@@ -14,21 +9,22 @@
     </tr>
     <tr>
         <th>Path</th>
-            <td><input type="text" id="newlibrary_path" style="width: 95%;" /></td>
+        <td><input type="text" id="newlibrary_path" style="width: 98%;" /></td>
     </tr>
 </table>
 
-    <div style="width: 100%; text-align: right;">
+<div style="width: 100%; text-align: right; margin-top: 160px;">
     <div style="display: inline-block; margin-right: 20px;">
         <button value="OK" onclick="newLibrary();">OK</button>
     </div>
     <div style="display: inline-block;">
-            <button value="Cancel" onclick="closeSubDialog();">Cancel</button>
+        <button value="Cancel" onclick="closeDialog();">Cancel</button>
-        </div>
     </div>
 </div>
 
 <script type="text/javascript">
+    document.getElementById('modal-heading').innerHTML = "New Library";
+
     $('#newlibrary_defaultplatform').select2({
         minimumInputLength: 3,
         ajax: {

gaseous-server/wwwroot/pages/dialogs/rominfo.html

@@ -78,7 +78,7 @@
                 <td style="width: 75%;"><select id="properties_fixgame" style="width: 100%;"></select></td>
             </tr>
             <tr>
-                <td colspan="2" style="text-align: right;"><button id="properties_fixsave" value="Save Match" onclick="SaveFixedGame();">Save Match</button></td>
+                <td colspan="2" style="text-align: right;"><button id="properties_fixclear" value="Clear Match" onclick="ClearFixedGame();">Clear Match</button><button id="properties_fixsave" value="Save Match" onclick="SaveFixedGame();">Save Match</button></td>
             </tr>
         </table>
     </div>
@@ -252,6 +252,7 @@
         var fixplatform = $('#properties_fixplatform').select2('data');
         var fixgame = $('#properties_fixgame').select2('data');
 
+        document.getElementById('properties_fixclear').setAttribute("disabled", "disabled");
         document.getElementById('properties_fixsave').setAttribute("disabled", "disabled");
 
         ajaxCall('/api/v1.1/Games/' + gameId + '/roms/' + modalVariables + '?NewPlatformId=' + fixplatform[0].id + '&NewGameId=' + fixgame[0].id, 'PATCH', function (result) {
@@ -259,6 +260,18 @@
         });
     }
 
+    function ClearFixedGame() {
+        var fixplatform = 0;
+        var fixgame = 0;
+
+        document.getElementById('properties_fixclear').setAttribute("disabled", "disabled");
+        document.getElementById('properties_fixsave').setAttribute("disabled", "disabled");
+
+        ajaxCall('/api/v1.1/Games/' + gameId + '/roms/' + modalVariables + '?NewPlatformId=' + fixplatform + '&NewGameId=' + fixgame, 'PATCH', function (result) {
+            window.location.reload();
+        });
+    }
+
     function BuildAttributesTable(attributes, sourceName) {
         var aTable = document.createElement('table');
         aTable.style.width = '100%';

gaseous-server/wwwroot/pages/dialogs/userprofile.html

@@ -220,7 +220,8 @@
         SetPreference_Batch(model);
         
         if (getQueryString('page', 'string') == 'home' ||  getQueryString('page', 'string') == undefined) {
-            executeFilter1_1(1);
+            setCookie('games_library_last_page', 1);
+            location.reload();
         }
 
         closeDialog();

gaseous-server/wwwroot/pages/emulator.html

@@ -23,6 +23,8 @@
     var emuBios = '';
     var emuBackground = '';
 
+    console.log("Loading rom url: " + decodeURIComponent(getQueryString('rompath', 'string')));
+
     ajaxCall('/api/v1.1/Games/' + gameId, 'GET', function (result) {
         gameData = result;
 
@@ -51,10 +53,14 @@
             emuBios = '';
         } else {
             emuBios = '/api/v1.1/Bios/zip/' + platformId;
+            console.log("Using BIOS link: " + emuBios);
         }
 
         switch (getQueryString('engine', 'string')) {
             case 'EmulatorJS':
+                console.log("Emulator: " + getQueryString('engine', 'string'));
+                console.log("Core: " + getQueryString('core', 'string'));
+    
                 $('#emulator').load('/emulators/EmulatorJS.html?v=' + AppVersion);
                 break;
         }

gaseous-server/wwwroot/pages/game.html

@@ -545,7 +545,7 @@
                     var saveStatesButton = '';
                     if (mediaGroup.emulator) {
                         if (mediaGroup.emulator.type.length > 0) {
-                            var romPath = encodeURIComponent('/api/v1.1/Games/' + gameId + '/romgroup/' + mediaGroup.id + '/' + gameData.name + '(' + mediaGroup.id + ')' + '.zip');
+                            var romPath = encodeURIComponent('/api/v1.1/Games/' + gameId + '/romgroup/' + mediaGroup.id + '/' + gameData.name + '.zip');
 
                             if (mediaGroup.hasSaveStates == true) {
                                 var modalVariables = {

gaseous-server/wwwroot/pages/settings/settings.html

@@ -6,7 +6,7 @@
 <table id="settings_libraries" class="romtable" style="width: 100%;" cellspacing="0">
 
 </table>
-<div style="text-align: right;"><button id="settings_newlibrary" onclick="showSubDialog('librarynew');">New Library</button></div>
+<div style="text-align: right;"><button id="settings_newlibrary" onclick="showDialog('librarynew');">New Library</button></div>
 
 <h2>Advanced Settings</h2>
 <p><strong>Warning</strong> Do not modify the below settings unless you know what you're doing.</p>

gaseous-server/wwwroot/scripts/filterformating.js

@@ -27,7 +27,7 @@ function formatFilterPanel(containerElement, result) {
             // Cancel the default action, if needed
             event.preventDefault();
             // Trigger the button element with a click
-            executeFilter1_1();
+            applyFilters();
         }
     });
     containerPanelSearch.appendChild(containerPanelSearchField);
@@ -99,7 +99,7 @@ function formatFilterPanel(containerElement, result) {
     // add filter button
     var searchButton = document.createElement('div');
     searchButton.id = 'games_library_searchbutton';
-    searchButton.setAttribute('onclick', 'executeFilter1_1();');
+    searchButton.setAttribute('onclick', 'applyFilters();');
     searchButton.innerHTML = 'Apply';
 
     buttonsDiv.appendChild(searchButton);
@@ -365,6 +365,12 @@ function filter_panel_range_value(name) {
     }
 }
 
+function applyFilters() {
+    document.getElementById('games_library').innerHTML = '';
+
+    executeFilter1_1();
+}
+
 function resetFilters() {
     // clear name
     document.getElementById('filter_panel_search').value = '';
@@ -381,6 +387,7 @@ function resetFilters() {
         filter_panel_range_enabled_check(rangeCheckboxes[i].getAttribute('data-name'));
     }
 
+    document.getElementById('games_library').innerHTML = '';
     executeFilter1_1();
 }
 
@@ -393,8 +400,18 @@ function executeFilter1_1(pageNumber, pageSize) {
         existingSearchModel = undefined;
     }
 
+    let pageMode = GetPreference('LibraryPagination', 'paged');
+
     if (!pageSize) {
+        switch (pageMode) {
+            case "infinite":
+                pageSize = 5;
+                break;
+            case "paged":
+            default:
                 pageSize = 30;
+                break;
+        }
     }
 
     var model;

gaseous-server/wwwroot/scripts/gamesformating.js

@@ -56,30 +56,75 @@ var ClassificationRatings = {
 };
 
 var pageReloadInterval;
+var firstLoad = true;
 
 function formatGamesPanel(targetElement, result, pageNumber, pageSize, forceScrollTop) {
-    console.log("Displaying page: " + pageNumber);
-    console.log("Page size: " + pageSize);
-
     var pageMode = GetPreference('LibraryPagination', 'paged');
 
-    if (pageNumber == 1 || pageMode == 'paged') {
+    if (pageNumber == 1) {
-        targetElement.innerHTML = ''; 
+        localStorage.setItem("gaseous-library-scrollpos", 0);
     }
 
     if (pageMode == 'paged') {
+        targetElement.innerHTML = '';
+    }
+
+    switch (pageMode) {
+        case 'paged':
             if (forceScrollTop == true) {
                 window.scrollTo(0, 0);
             }
+            break;
+        case 'infinite':
+            var gamePlaceholders = document.getElementsByName('GamePlaceholder');
+            let currentPageValue = 0;
+            let nextPageThreshold = -1;
+            for (var i = 0; i < result.count; i++) {
+                if (i >= nextPageThreshold) {
+                    // new page
+                    currentPageValue ++;
+                    nextPageThreshold = i + pageSize;
+
+                    if (currentPageValue > 0) {
+                        if (!document.getElementById('pageFooterAnchor' + (currentPageValue - 1))) {
+                            let newFooterPageAnchor = document.createElement('a');
+                            newFooterPageAnchor.id = 'pageFooterAnchor' + (currentPageValue - 1);
+                            newFooterPageAnchor.setAttribute('name', 'pageAnchor' + (currentPageValue - 1));
+                            newFooterPageAnchor.className = 'pageFooterAnchor';
+                            newFooterPageAnchor.setAttribute('data-page', (currentPageValue - 1));
+                            newFooterPageAnchor.setAttribute('data-loaded', "0");
+                            targetElement.appendChild(newFooterPageAnchor);
+                        }
                     }
 
-    var pagerCheck = document.getElementById('games_library_pagerstore');
+                    if (!document.getElementById('pageAnchor' + currentPageValue)) {
-    if (pageNumber == 1) {
+                        let newPageAnchor = document.createElement('a');
-        pagerCheck.innerHTML = "0";
+                        newPageAnchor.id = 'pageAnchor' + currentPageValue;
+                        newPageAnchor.setAttribute('name', 'pageAnchor' + currentPageValue);
+                        newPageAnchor.className = 'pageAnchor';
+                        newPageAnchor.setAttribute('data-page', currentPageValue);
+                        newPageAnchor.setAttribute('data-loaded', "0");
+                        targetElement.appendChild(newPageAnchor);
+                    }
                 }
 
-    if (pageNumber > Number(pagerCheck.innerHTML) || pageMode == 'paged') {
+                var placeHolderpresent = false;
-        pagerCheck.innerHTML = pageNumber;
+                for (var x = 0; x < gamePlaceholders.length; x++) {
+                    if (gamePlaceholders[x].getAttribute('data-index') == i) {
+                        placeHolderpresent = true;
+                    }
+                }
+                if (placeHolderpresent == false) {
+                    var gamePlaceholder = document.createElement('div');
+                    gamePlaceholder.setAttribute('name', 'GamePlaceholder');
+                    gamePlaceholder.id = 'GamePlaceholder' + i;
+                    gamePlaceholder.setAttribute('data-index', i);
+                    gamePlaceholder.className = 'game_tile';
+                    targetElement.appendChild(gamePlaceholder);
+                }
+            }
+            break;
+    }
 
     document.getElementById('games_library_recordcount').innerHTML = result.count + ' games';
 
@@ -100,14 +145,22 @@ function formatGamesPanel(targetElement, result, pageNumber, pageSize, forceScro
 
     for (var i = 0; i < result.games.length; i++) {
         var game = renderGameIcon(result.games[i], showTitle, showRatings, showClassification, classificationDisplayOrder, false);
+        switch (pageMode) {
+            case "paged":
                 targetElement.appendChild(game);
-        }
+                break;
 
-        $('.lazy').Lazy({
+            case "infinite":
-            scrollDirection: 'vertical',
+                var placeholderElement = document.getElementById('GamePlaceholder' + result.games[i].index);
-            effect: 'fadeIn',
+                if (placeholderElement.className != 'game_tile_wrapper') {
-            visibleOnly: true
+                    placeholderElement.className = 'game_tile_wrapper';
-        });
+                    placeholderElement.innerHTML = '';
+                    placeholderElement.appendChild(game);
+                }
+                break;
+
+        }
+    }
 
     var pager = document.getElementById('games_pager');
     pager.style.display = 'none';
@@ -117,15 +170,23 @@ function formatGamesPanel(targetElement, result, pageNumber, pageSize, forceScro
 
     switch(pageMode) {
         case 'infinite':
-                if (result.games.length == pageSize) {
+            for (const [key, value] of Object.entries(result.alphaList)) {
-                    var loadPageButton = document.createElement("div");
+                var letterPager = document.createElement('span');
-                    loadPageButton.id = 'games_library_loadmore';
+                letterPager.className = 'games_library_alpha_pager_letter';
-                    loadPageButton.innerHTML = 'Load More';
+                letterPager.setAttribute('onclick', 'document.location.hash = "#pageAnchor' + value + '"; executeFilter1_1(' + value + ');');
-                    loadPageButton.setAttribute('onclick', 'executeFilter1_1(' + (pageNumber + 1) + ', ' + pageSize + ');');
+                letterPager.innerHTML = key;
-                    loadPageButton.setAttribute('data-pagenumber', Number(pageNumber + 1));
+                alphaPager.appendChild(letterPager);
-                    loadPageButton.setAttribute('data-pagesize', pageSize);
-                    targetElement.appendChild(loadPageButton);
             }
+            
+            if (firstLoad == true) {
+                if (localStorage.getItem("gaseous-library-scrollpos") != null) {
+                    $(window).scrollTop(localStorage.getItem("gaseous-library-scrollpos"));
+                }
+                firstLoad = false;
+            }
+
+            IsInView();
+
             break;
 
         case 'paged':
@@ -138,11 +199,6 @@ function formatGamesPanel(targetElement, result, pageNumber, pageSize, forceScro
             }
 
             if (result.count > pageSize) {
-                    // add some padding to the bottom of the games list
-                    var loadPageButton = document.createElement("div");
-                    loadPageButton.id = 'games_library_padding';
-                    targetElement.appendChild(loadPageButton);
-
                 var pageCount = Math.ceil(result.count / pageSize);
 
                 // add first page button
@@ -167,7 +223,8 @@ function formatGamesPanel(targetElement, result, pageNumber, pageSize, forceScro
 
                 // add page numbers
                 var pageEitherSide = 4;
-                    var currentPage = Number(pagerCheck.innerHTML);
+                // var currentPage = Number(pagerCheck.innerHTML);
+                var currentPage = pageNumber;
                 var pageNumbers = document.createElement('span');
                 for (var i = 1; i <= pageCount; i++) {
                     if (
@@ -187,7 +244,7 @@ function formatGamesPanel(targetElement, result, pageNumber, pageSize, forceScro
                         )
                     ) {
                         var pageNum = document.createElement('span');
-                            if (Number(pagerCheck.innerHTML) == i) {
+                        if (pageNumber == i) {
                             pageNum.className = 'games_pager_number_disabled';
                         } else {
                             pageNum.className = 'games_pager_number';
@@ -229,19 +286,12 @@ function formatGamesPanel(targetElement, result, pageNumber, pageSize, forceScro
             }
             break;
     }
-    }
 
-    // var pageReloadFunction = function() {
+    $('.lazy').Lazy({
-    //     formatGamesPanel(targetElement, result, pageNumber, pageSize, false);
+        effect: 'show',
-
+        effectTime: 100,
-    //     ajaxCall('/api/v1.1/Filter', 'GET', function (result) {
+        visibleOnly: true
-    //         var scrollerElement = document.getElementById('games_filter_scroller');
+    });
-    //         formatFilterPanel(scrollerElement, result);
-    //     })
-    // };
-
-    // window.clearTimeout(pageReloadInterval);
-    // pageReloadInterval = setTimeout(pageReloadFunction, 10000);
 }
 
 function isScrolledIntoView(elem) {
@@ -257,14 +307,40 @@ function isScrolledIntoView(elem) {
 }
 
 function IsInView() {
+    var pageMode = GetPreference('LibraryPagination', 'paged');
+    switch (pageMode) {
+        case "paged":
             var loadElement = document.getElementById('games_library_loadmore');
             if (loadElement) {
                 if (isScrolledIntoView(loadElement)) {
                     var pageNumber = Number(document.getElementById('games_library_loadmore').getAttribute('data-pagenumber'));
                     var pageSize = document.getElementById('games_library_loadmore').getAttribute('data-pagesize');
-            executeFilter1_1(pageNumber, pageSize);
+                    executeFilter1_1(pageNumber);
                 }
             }
+            break;
+
+        case "infinite":
+            // store scroll location
+            localStorage.setItem("gaseous-library-scrollpos", $(window).scrollTop());
+
+            // load page
+            let anchors = document.getElementsByClassName('pageAnchor');
+            let footAnchors = document.getElementsByClassName('pageFooterAnchor');
+            for (let i = 0; i < anchors.length; i++) {
+                if (isScrolledIntoView(anchors[i]) && anchors[i].getAttribute('data-loaded') == "0") {
+                    document.getElementById(anchors[i].id).setAttribute('data-loaded', "1");
+                    executeFilter1_1(Number(anchors[i].getAttribute('data-page')));
+                }
+            }
+            for (let i = 0; i < footAnchors.length; i++) {
+                if (isScrolledIntoView(footAnchors[i]) && footAnchors[i].getAttribute('data-loaded') == "0") {
+                    document.getElementById(footAnchors[i].id).setAttribute('data-loaded', "1");
+                    executeFilter1_1(Number(footAnchors[i].getAttribute('data-page')));
+                }
+            }
+            break;
+    }
 }
 
 $(window).scroll(IsInView);
@@ -279,26 +355,28 @@ function renderGameIcon(gameObject, showTitle, showRatings, showClassification,
     var gameBox = document.createElement('div');
     gameBox.id = "game_tile_" + gameObject.id;
     if (useSmallCover == true) {
-        gameBox.className = classes['game_tile game_tile_small'];
+        gameBox.classList.add(...classes['game_tile game_tile_small']);
     } else {
-        gameBox.className = classes['game_tile'];
+        gameBox.classList.add(...classes['game_tile']);
     }
     gameBox.setAttribute('onclick', 'window.location.href = "/index.html?page=game&id=' + gameObject.id + '";');
 
     var gameImageBox = document.createElement('div');
-    gameImageBox.className = classes['game_tile_box'];
+    gameImageBox.classList.add(...classes['game_tile_box']);
 
     var gameImage = document.createElement('img');
+    gameImage.id = 'game_tile_cover_' + gameObject.id;
     if (useSmallCover == true) {
-        gameImage.className = classes['game_tile_image game_tile_image_small lazy'];
+        gameImage.classList.add(...classes['game_tile_image game_tile_image_small lazy']);
     } else {
-        gameImage.className = classes['game_tile_image lazy'];
+        gameImage.classList.add(...classes['game_tile_image lazy']);
     }
-    gameImage.src = '/images/unknowngame.png';
+    // gameImage.src = '/images/unknowngame.png';
     if (gameObject.cover) {
         gameImage.setAttribute('data-src', '/api/v1.1/Games/' + gameObject.id + '/cover/image/cover_big/' + gameObject.cover.imageId + '.jpg');
     } else {
-        gameImage.className = classes['game_tile_image unknown'];
+        gameImage.classList.add(...classes['game_tile_image unknown']);
+        gameImage.setAttribute('data-src', '/images/unknowngame.png');
     }
     gameImageBox.appendChild(gameImage);
 
@@ -312,7 +390,6 @@ function renderGameIcon(gameObject, showTitle, showRatings, showClassification,
                     if (gameObject.ageRatings[c].category == classificationDisplayOrder[b]) {
                         shownClassificationBoard = classificationDisplayOrder[b];
                         displayClassification = true;
-                        //classificationPath = '/api/v1.1/Ratings/Images/' + classificationDisplayOrder[b] + '/' + getKeyByValue(AgeRatingStrings, gameObject.ageRatings[c].rating) + '/image.svg';
                         classificationPath = '/images/Ratings/' + classificationDisplayOrder[b] + '/' + gameObject.ageRatings[c].rating + '.svg';
                     }
                 }
@@ -326,7 +403,7 @@ function renderGameIcon(gameObject, showTitle, showRatings, showClassification,
     if (gameObject.hasSavedGame == true) {
         var gameSaveIcon = document.createElement('img');
         gameSaveIcon.src = '/images/SaveStates.png';
-        gameSaveIcon.className = classes['game_tile_box_savedgame savedstateicon'];
+        gameSaveIcon.classList.add(...classes['game_tile_box_savedgame savedstateicon']);
         gameImageBox.appendChild(gameSaveIcon);
     }
 
@@ -334,13 +411,13 @@ function renderGameIcon(gameObject, showTitle, showRatings, showClassification,
     if (gameObject.isFavourite == true) {
         var gameFavIcon = document.createElement('img');
         gameFavIcon.src = '/images/favourite-filled.svg';
-        gameFavIcon.className = classes['game_tile_box_favouritegame favouriteicon'];
+        gameFavIcon.classList.add(...classes['game_tile_box_favouritegame favouriteicon']);
         gameImageBox.appendChild(gameFavIcon);
     }
 
     if (gameObject.totalRating || displayClassification == true) {
         var gameImageRatingBanner = document.createElement('div');
-        gameImageRatingBanner.className = classes['game_tile_box_ratingbanner'];
+        gameImageRatingBanner.classList.add(...classes['game_tile_box_ratingbanner']);
 
         if (showRatings == true || displayClassification == true) {
             if (showRatings == true) {
@@ -361,7 +438,7 @@ function renderGameIcon(gameObject, showTitle, showRatings, showClassification,
             if (displayClassification == true) {
                 var gameImageClassificationLogo = document.createElement('img');
                 gameImageClassificationLogo.src = classificationPath;
-                gameImageClassificationLogo.className = classes['rating_image_overlay'];
+                gameImageClassificationLogo.classList.add(...classes['rating_image_overlay']);
                 gameImageBox.appendChild(gameImageClassificationLogo);
             }
         }
@@ -370,7 +447,7 @@ function renderGameIcon(gameObject, showTitle, showRatings, showClassification,
 
     if (showTitle == true) {
         var gameBoxTitle = document.createElement('div');
-        gameBoxTitle.className = classes['game_tile_label'];
+        gameBoxTitle.classList.add(...classes['game_tile_label']);
         gameBoxTitle.innerHTML = gameObject.name;
         gameBox.appendChild(gameBoxTitle);
     }
@@ -381,31 +458,31 @@ function renderGameIcon(gameObject, showTitle, showRatings, showClassification,
 function getViewModeClasses(listView) {
     if (listView == false) {
         return {
-            "game_tile game_tile_small": "game_tile game_tile_small",
+            "game_tile game_tile_small": [ "game_tile", "game_tile_small" ],
-            "game_tile": "game_tile",
+            "game_tile": [ "game_tile" ],
-            "game_tile_box": "game_tile_box",
+            "game_tile_box": [ "game_tile_box" ],
-            "game_tile_image game_tile_image_small lazy": "game_tile_image game_tile_image_small lazy",
+            "game_tile_image game_tile_image_small lazy": [ "game_tile_image", "game_tile_image_small", "lazy" ],
-            "game_tile_image lazy": "game_tile_image lazy",
+            "game_tile_image lazy": [ "game_tile_image", "lazy" ],
-            "game_tile_image unknown": "game_tile_image unknown",
+            "game_tile_image unknown": [ "game_tile_image", "unknown" ],
-            "game_tile_box_savedgame savedstateicon": "game_tile_box_savedgame savedstateicon",
+            "game_tile_box_savedgame savedstateicon": [ "game_tile_box_savedgame", "savedstateicon" ],
-            "game_tile_box_favouritegame favouriteicon": "game_tile_box_favouritegame favouriteicon",
+            "game_tile_box_favouritegame favouriteicon": [ "game_tile_box_favouritegame", "favouriteicon" ],
-            "game_tile_box_ratingbanner": "game_tile_box_ratingbanner",
+            "game_tile_box_ratingbanner": [ "game_tile_box_ratingbanner" ],
-            "rating_image_overlay": "rating_image_overlay",
+            "rating_image_overlay": [ "rating_image_overlay" ],
-            "game_tile_label": "game_tile_label"
+            "game_tile_label": [ "game_tile_label" ]
         };
     } else {
         return {
-            "game_tile game_tile_small": "game_tile_row game_tile_small",
+            "game_tile game_tile_small": [ "game_tile_row", "game_tile_small" ],
-            "game_tile": "game_tile_row",
+            "game_tile": [ "game_tile_row" ],
-            "game_tile_box": "game_tile_box_row",
+            "game_tile_box": [ "game_tile_box_row" ],
-            "game_tile_image game_tile_image_small lazy": "game_tile_image_row game_tile_image_small lazy",
+            "game_tile_image game_tile_image_small lazy": [ "game_tile_image_row", "game_tile_image_small", "lazy" ],
-            "game_tile_image lazy": "game_tile_image_row lazy",
+            "game_tile_image lazy": [ "game_tile_image_row", "lazy" ],
-            "game_tile_image unknown": "game_tile_image_row unknown",
+            "game_tile_image unknown": [ "game_tile_image_row", "unknown" ],
-            "game_tile_box_savedgame savedstateicon": "game_tile_box_savedgame_row savedstateicon",
+            "game_tile_box_savedgame savedstateicon": [ "game_tile_box_savedgame_row", "savedstateicon" ],
-            "game_tile_box_favouritegame favouriteicon": "game_tile_box_favouritegame_row favouriteicon",
+            "game_tile_box_favouritegame favouriteicon": [ "game_tile_box_favouritegame_row", "favouriteicon" ],
-            "game_tile_box_ratingbanner": "game_tile_box_ratingbanner_row",
+            "game_tile_box_ratingbanner": [ "game_tile_box_ratingbanner_row" ],
-            "rating_image_overlay": "rating_image_overlay_row",
+            "rating_image_overlay": [ "rating_image_overlay_row" ],
-            "game_tile_label": "game_tile_label_row"
+            "game_tile_label": [ "game_tile_label_row" ]
         };
     }
 }

gaseous-server/wwwroot/styles/style.css

@@ -548,11 +548,25 @@ input[name='filter_panel_range_max'] {
     background-color: blue;
 }
 
+.game_tile_wrapper {
+    display: inline-block;
+}
+
+.game_tile_placeholder {
+    display: inline-block;
+    min-height: 243px;
+    width: 232px;
+    margin-bottom: 10px;
+}
+
 .game_tile {
-    padding: 5px;
+    padding-top: 10px;
+    padding-bottom: 5px;
+    padding-left: 5px;
+    padding-right: 5px;
     display: inline-block;
     width: 220px;
-    min-height: 200px;
+    min-height: 243px;
     align-items: center;
     justify-content: center;
     text-align: center;
@@ -689,6 +703,9 @@ input[name='filter_panel_range_max'] {
     max-height: 200px;
     min-height: 200px;
     background-color: transparent;
+}
+
+.game_tile_image_shadow {
     box-shadow: 5px 5px 19px 0px rgba(0,0,0,0.44);
     -webkit-box-shadow: 5px 5px 19px 0px rgba(0,0,0,0.44);
     -moz-box-shadow: 5px 5px 19px 0px rgba(0,0,0,0.44);
@@ -701,9 +718,6 @@ input[name='filter_panel_range_max'] {
     min-height: 75px;
     margin-left: 10px;
     background-color: transparent;
-    box-shadow: 5px 5px 19px 0px rgba(0,0,0,0.44);
-    -webkit-box-shadow: 5px 5px 19px 0px rgba(0,0,0,0.44);
-    -moz-box-shadow: 5px 5px 19px 0px rgba(0,0,0,0.44);
 }
 
 .game_tile_image, .unknown {