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))
                         {
-                            Logging.Log(Logging.LogType.Information, "Media Group", "Copying ROM: " + rom.Name);
+                            string romExt = Path.GetExtension(rom.Path);
-                            File.Copy(rom.Path, Path.Combine(ZipFileTempPath, Path.GetFileName(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,34 +1,30 @@
-<div style="padding-top: 5px;">
+<table style="width: 98%; margin-top: 15px; margin-bottom: 15px;">
-    <strong>New Library</strong>
+    <tr>
-</div>
+        <th style="width: 20%;">Name</th>
+        <td style="width: 80%;"><input type="text" id="newlibrary_name" style="width: 98%;" /></td>
+    </tr>
+    <tr>
+        <th>Default Platform</th>
+        <td><select id="newlibrary_defaultplatform" style="width: 100%;"></select></td>
+    </tr>
+    <tr>
+        <th>Path</th>
+        <td><input type="text" id="newlibrary_path" style="width: 98%;" /></td>
+    </tr>
+</table>
 
-<div style="width: 300px;">
+<div style="width: 100%; text-align: right; margin-top: 160px;">
-    <table style="width: 98%; margin-top: 15px; margin-bottom: 15px;">
+    <div style="display: inline-block; margin-right: 20px;">
-        <tr>
+        <button value="OK" onclick="newLibrary();">OK</button>
-            <th>Name</th>
+    </div>
-            <td><input type="text" id="newlibrary_name" style="width: 95%;" /></td>
+    <div style="display: inline-block;">
-        </tr>
+        <button value="Cancel" onclick="closeDialog();">Cancel</button>
-        <tr>
-            <th>Default Platform</th>
-            <td><select id="newlibrary_defaultplatform" style="width: 100%;"></select></td>
-        </tr>
-        <tr>
-            <th>Path</th>
-            <td><input type="text" id="newlibrary_path" style="width: 95%;" /></td>
-        </tr>
-    </table>
-
-    <div style="width: 100%; text-align: right;">
-        <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>
-        </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) {
-        pageSize = 30;
+        switch (pageMode) {
+            case "infinite":
+                pageSize = 5;
+                break;
+            case "paged":
+            default:
+                pageSize = 30;
+                break;
+        }
     }
 
     var model;

gaseous-server/wwwroot/scripts/gamesformating.js

@@ -56,192 +56,242 @@ 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') {
-        if (forceScrollTop == true) {
+        targetElement.innerHTML = '';
-            window.scrollTo(0, 0);
-        }
     }
 
-    var pagerCheck = document.getElementById('games_library_pagerstore');
+    switch (pageMode) {
-    if (pageNumber == 1) {
+        case 'paged':
-        pagerCheck.innerHTML = "0";
+            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 (pageNumber > Number(pagerCheck.innerHTML) || pageMode == 'paged') {
+                    if (currentPageValue > 0) {
-        pagerCheck.innerHTML = pageNumber;
+                        if (!document.getElementById('pageFooterAnchor' + (currentPageValue - 1))) {
-
+                            let newFooterPageAnchor = document.createElement('a');
-        document.getElementById('games_library_recordcount').innerHTML = result.count + ' games';
+                            newFooterPageAnchor.id = 'pageFooterAnchor' + (currentPageValue - 1);
-
+                            newFooterPageAnchor.setAttribute('name', 'pageAnchor' + (currentPageValue - 1));
-        var existingLoadPageButton = document.getElementById('games_library_loadmore');
+                            newFooterPageAnchor.className = 'pageFooterAnchor';
-        if (existingLoadPageButton) {
+                            newFooterPageAnchor.setAttribute('data-page', (currentPageValue - 1));
-            existingLoadPageButton.parentNode.removeChild(existingLoadPageButton);
+                            newFooterPageAnchor.setAttribute('data-loaded', "0");
-        }
+                            targetElement.appendChild(newFooterPageAnchor);
-
-        // setup preferences
-        var showTitle = GetPreference("LibraryShowGameTitle", true);
-        var showRatings = GetPreference("LibraryShowGameRating", true);
-        var showClassification = GetPreference("LibraryShowGameClassification", true);
-        var classificationDisplayOrderString = GetPreference("LibraryGameClassificationDisplayOrder", JSON.stringify([ "ESRB" ]));
-        var classificationDisplayOrder = JSON.parse(classificationDisplayOrderString);
-        if (showTitle == "true") { showTitle = true; } else { showTitle = false; }
-        if (showRatings == "true") { showRatings = true; } else { showRatings = false; }
-        if (showClassification == "true") { showClassification = true; } else { showClassification = false; }
-
-        for (var i = 0; i < result.games.length; i++) {
-            var game = renderGameIcon(result.games[i], showTitle, showRatings, showClassification, classificationDisplayOrder, false);
-            targetElement.appendChild(game);
-        }
-
-        $('.lazy').Lazy({
-            scrollDirection: 'vertical',
-            effect: 'fadeIn',
-            visibleOnly: true
-        });
-
-        var pager = document.getElementById('games_pager');
-        pager.style.display = 'none';
-
-        var alphaPager = document.getElementById('games_library_alpha_pager');
-        alphaPager.innerHTML = '';
-
-        switch(pageMode) {
-            case 'infinite':
-                if (result.games.length == pageSize) {
-                    var loadPageButton = document.createElement("div");
-                    loadPageButton.id = 'games_library_loadmore';
-                    loadPageButton.innerHTML = 'Load More';
-                    loadPageButton.setAttribute('onclick', 'executeFilter1_1(' + (pageNumber + 1) + ', ' + pageSize + ');');
-                    loadPageButton.setAttribute('data-pagenumber', Number(pageNumber + 1));
-                    loadPageButton.setAttribute('data-pagesize', pageSize);
-                    targetElement.appendChild(loadPageButton);
-                }
-                break;
-
-            case 'paged':
-                for (const [key, value] of Object.entries(result.alphaList)) {
-                    var letterPager = document.createElement('span');
-                    letterPager.className = 'games_library_alpha_pager_letter';
-                    letterPager.setAttribute('onclick', 'executeFilter1_1(' + value + ');');
-                    letterPager.innerHTML = key;
-                    alphaPager.appendChild(letterPager);
-                }
-
-                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
-                    var firstPage = document.createElement('span');
-                    firstPage.innerHTML = '&#124;&lt;';
-                    if (pageNumber == 1) {
-                        firstPage.className = 'games_pager_number_disabled';
-                    } else {
-                        firstPage.className = 'games_pager_number';
-                        firstPage.setAttribute('onclick', 'executeFilter1_1(1);');
-                    }
-
-                    // add previous page button
-                    var prevPage = document.createElement('span');
-                    prevPage.innerHTML = '&lt;';
-                    if (pageNumber == 1) {
-                        prevPage.className = 'games_pager_number_disabled';
-                    } else {
-                        prevPage.className = 'games_pager_number';
-                        prevPage.setAttribute('onclick', 'executeFilter1_1(' + (pageNumber - 1) + ');');
-                    }
-
-                    // add page numbers
-                    var pageEitherSide = 4;
-                    var currentPage = Number(pagerCheck.innerHTML);
-                    var pageNumbers = document.createElement('span');
-                    for (var i = 1; i <= pageCount; i++) {
-                        if (
-                            (
-                                (i >= currentPage - pageEitherSide) &&
-                                (i <= currentPage + pageEitherSide)
-                            ) ||
-                            (
-                                (
-                                    i <= (pageEitherSide * 2 + 1) &&
-                                    currentPage <= (pageEitherSide)
-                                ) ||
-                                (
-                                    i >= (pageCount - (pageEitherSide * 2)) &&
-                                    currentPage >= (pageCount - (pageEitherSide))
-                                )
-                            )
-                        ) {
-                            var pageNum = document.createElement('span');
-                            if (Number(pagerCheck.innerHTML) == i) {
-                                pageNum.className = 'games_pager_number_disabled';
-                            } else {
-                                pageNum.className = 'games_pager_number';
-                                pageNum.setAttribute('onclick', 'executeFilter1_1(' + i + ');');
-                            }
-                            pageNum.innerHTML = i;
-                            pageNumbers.appendChild(pageNum);
                         }
                     }
 
-                    // add next page button
+                    if (!document.getElementById('pageAnchor' + currentPageValue)) {
-                    var nextPage = document.createElement('span');
+                        let newPageAnchor = document.createElement('a');
-                    nextPage.innerHTML = '&gt;';
+                        newPageAnchor.id = 'pageAnchor' + currentPageValue;
-                    if (pageNumber == pageCount) {
+                        newPageAnchor.setAttribute('name', 'pageAnchor' + currentPageValue);
-                        nextPage.className = 'games_pager_number_disabled';
+                        newPageAnchor.className = 'pageAnchor';
-                    } else {
+                        newPageAnchor.setAttribute('data-page', currentPageValue);
-                        nextPage.className = 'games_pager_number';
+                        newPageAnchor.setAttribute('data-loaded', "0");
-                        nextPage.setAttribute('onclick', 'executeFilter1_1(' + (pageNumber + 1) + ');');
+                        targetElement.appendChild(newPageAnchor);
                     }
+                }
 
-                    // add last page button
+                var placeHolderpresent = false;
-                    var lastPage = document.createElement('span');
+                for (var x = 0; x < gamePlaceholders.length; x++) {
-                    lastPage.innerHTML = '&gt;&#124;';
+                    if (gamePlaceholders[x].getAttribute('data-index') == i) {
-                    if (pageNumber == pageCount) {
+                        placeHolderpresent = true;
-                        lastPage.className = 'games_pager_number_disabled';
-                    } else {
-                        lastPage.className = 'games_pager_number';
-                        lastPage.setAttribute('onclick', 'executeFilter1_1(' + pageCount + ');');
                     }
+                }
+                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;
+    }
 
-                    pager.innerHTML = '';
+    document.getElementById('games_library_recordcount').innerHTML = result.count + ' games';
-                    pager.appendChild(firstPage);
-                    pager.appendChild(prevPage);
-                    pager.appendChild(pageNumbers);
-                    pager.appendChild(nextPage);
-                    pager.appendChild(lastPage);
 
-                    pager.style.display = '';
+    var existingLoadPageButton = document.getElementById('games_library_loadmore');
+    if (existingLoadPageButton) {
+        existingLoadPageButton.parentNode.removeChild(existingLoadPageButton);
+    }
+
+    // setup preferences
+    var showTitle = GetPreference("LibraryShowGameTitle", true);
+    var showRatings = GetPreference("LibraryShowGameRating", true);
+    var showClassification = GetPreference("LibraryShowGameClassification", true);
+    var classificationDisplayOrderString = GetPreference("LibraryGameClassificationDisplayOrder", JSON.stringify([ "ESRB" ]));
+    var classificationDisplayOrder = JSON.parse(classificationDisplayOrderString);
+    if (showTitle == "true") { showTitle = true; } else { showTitle = false; }
+    if (showRatings == "true") { showRatings = true; } else { showRatings = false; }
+    if (showClassification == "true") { showClassification = true; } else { showClassification = false; }
+
+    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;
+
+            case "infinite":
+                var placeholderElement = document.getElementById('GamePlaceholder' + result.games[i].index);
+                if (placeholderElement.className != 'game_tile_wrapper') {
+                    placeholderElement.className = 'game_tile_wrapper';
+                    placeholderElement.innerHTML = '';
+                    placeholderElement.appendChild(game);
                 }
                 break;
+
         }
     }
 
-    // var pageReloadFunction = function() {
+    var pager = document.getElementById('games_pager');
-    //     formatGamesPanel(targetElement, result, pageNumber, pageSize, false);
+    pager.style.display = 'none';
 
-    //     ajaxCall('/api/v1.1/Filter', 'GET', function (result) {
+    var alphaPager = document.getElementById('games_library_alpha_pager');
-    //         var scrollerElement = document.getElementById('games_filter_scroller');
+    alphaPager.innerHTML = '';
-    //         formatFilterPanel(scrollerElement, result);
-    //     })
-    // };
 
-    // window.clearTimeout(pageReloadInterval);
+    switch(pageMode) {
-    // pageReloadInterval = setTimeout(pageReloadFunction, 10000);
+        case 'infinite':
+            for (const [key, value] of Object.entries(result.alphaList)) {
+                var letterPager = document.createElement('span');
+                letterPager.className = 'games_library_alpha_pager_letter';
+                letterPager.setAttribute('onclick', 'document.location.hash = "#pageAnchor' + value + '"; executeFilter1_1(' + value + ');');
+                letterPager.innerHTML = key;
+                alphaPager.appendChild(letterPager);
+            }
+            
+            if (firstLoad == true) {
+                if (localStorage.getItem("gaseous-library-scrollpos") != null) {
+                    $(window).scrollTop(localStorage.getItem("gaseous-library-scrollpos"));
+                }
+                firstLoad = false;
+            }
+
+            IsInView();
+
+            break;
+
+        case 'paged':
+            for (const [key, value] of Object.entries(result.alphaList)) {
+                var letterPager = document.createElement('span');
+                letterPager.className = 'games_library_alpha_pager_letter';
+                letterPager.setAttribute('onclick', 'executeFilter1_1(' + value + ');');
+                letterPager.innerHTML = key;
+                alphaPager.appendChild(letterPager);
+            }
+
+            if (result.count > pageSize) {
+                var pageCount = Math.ceil(result.count / pageSize);
+
+                // add first page button
+                var firstPage = document.createElement('span');
+                firstPage.innerHTML = '&#124;&lt;';
+                if (pageNumber == 1) {
+                    firstPage.className = 'games_pager_number_disabled';
+                } else {
+                    firstPage.className = 'games_pager_number';
+                    firstPage.setAttribute('onclick', 'executeFilter1_1(1);');
+                }
+
+                // add previous page button
+                var prevPage = document.createElement('span');
+                prevPage.innerHTML = '&lt;';
+                if (pageNumber == 1) {
+                    prevPage.className = 'games_pager_number_disabled';
+                } else {
+                    prevPage.className = 'games_pager_number';
+                    prevPage.setAttribute('onclick', 'executeFilter1_1(' + (pageNumber - 1) + ');');
+                }
+
+                // add page numbers
+                var pageEitherSide = 4;
+                // var currentPage = Number(pagerCheck.innerHTML);
+                var currentPage = pageNumber;
+                var pageNumbers = document.createElement('span');
+                for (var i = 1; i <= pageCount; i++) {
+                    if (
+                        (
+                            (i >= currentPage - pageEitherSide) &&
+                            (i <= currentPage + pageEitherSide)
+                        ) ||
+                        (
+                            (
+                                i <= (pageEitherSide * 2 + 1) &&
+                                currentPage <= (pageEitherSide)
+                            ) ||
+                            (
+                                i >= (pageCount - (pageEitherSide * 2)) &&
+                                currentPage >= (pageCount - (pageEitherSide))
+                            )
+                        )
+                    ) {
+                        var pageNum = document.createElement('span');
+                        if (pageNumber == i) {
+                            pageNum.className = 'games_pager_number_disabled';
+                        } else {
+                            pageNum.className = 'games_pager_number';
+                            pageNum.setAttribute('onclick', 'executeFilter1_1(' + i + ');');
+                        }
+                        pageNum.innerHTML = i;
+                        pageNumbers.appendChild(pageNum);
+                    }
+                }
+
+                // add next page button
+                var nextPage = document.createElement('span');
+                nextPage.innerHTML = '&gt;';
+                if (pageNumber == pageCount) {
+                    nextPage.className = 'games_pager_number_disabled';
+                } else {
+                    nextPage.className = 'games_pager_number';
+                    nextPage.setAttribute('onclick', 'executeFilter1_1(' + (pageNumber + 1) + ');');
+                }
+
+                // add last page button
+                var lastPage = document.createElement('span');
+                lastPage.innerHTML = '&gt;&#124;';
+                if (pageNumber == pageCount) {
+                    lastPage.className = 'games_pager_number_disabled';
+                } else {
+                    lastPage.className = 'games_pager_number';
+                    lastPage.setAttribute('onclick', 'executeFilter1_1(' + pageCount + ');');
+                }
+
+                pager.innerHTML = '';
+                pager.appendChild(firstPage);
+                pager.appendChild(prevPage);
+                pager.appendChild(pageNumbers);
+                pager.appendChild(nextPage);
+                pager.appendChild(lastPage);
+
+                pager.style.display = '';
+            }
+            break;
+    }
+
+    $('.lazy').Lazy({
+        effect: 'show',
+        effectTime: 100,
+        visibleOnly: true
+    });
 }
 
 function isScrolledIntoView(elem) {
@@ -257,13 +307,39 @@ function isScrolledIntoView(elem) {
 }
 
 function IsInView() {
-    var loadElement = document.getElementById('games_library_loadmore');
+    var pageMode = GetPreference('LibraryPagination', 'paged');
-    if (loadElement) {
+    switch (pageMode) {
-        if (isScrolledIntoView(loadElement)) {
+        case "paged":
-            var pageNumber = Number(document.getElementById('games_library_loadmore').getAttribute('data-pagenumber'));
+            var loadElement = document.getElementById('games_library_loadmore');
-            var pageSize = document.getElementById('games_library_loadmore').getAttribute('data-pagesize');
+            if (loadElement) {
-            executeFilter1_1(pageNumber, pageSize);
+                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);
+                }
+            }
+            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;
     }
 }
 
@@ -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 {