WIP

gaseous-project · Aug 21, 2024 · 543fc3d · 543fc3d
1 parent e05cd05
commit 543fc3d
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 17 deletions.
diff --git a/gaseous-server/Classes/Database.cs b/gaseous-server/Classes/Database.cs
@@ -453,11 +453,19 @@ private static void CacheTimerCallback(object? state)
 			}
 			public static void SetCacheObject(string CacheKey, object CacheObject, int ExpirationSeconds = 2)
 			{
-				if (MemoryCache.ContainsKey(CacheKey))
+				try
 				{
-					MemoryCache.Remove(CacheKey);
+					if (MemoryCache.ContainsKey(CacheKey))
+					{
+						MemoryCache.Remove(CacheKey);
+					}
+					MemoryCache.Add(CacheKey, new MemoryCacheItem(CacheObject, ExpirationSeconds));
+				}
+				catch (Exception ex)
+				{
+					Logging.Log(Logging.LogType.Debug, "Database", "Error while setting cache object", ex);
+					ClearCache();
 				}
-				MemoryCache.Add(CacheKey, new MemoryCacheItem(CacheObject, ExpirationSeconds));
 			}
 			public static void RemoveCacheObject(string CacheKey)
 			{

diff --git a/gaseous-server/wwwroot/pages/game.html b/gaseous-server/wwwroot/pages/game.html
@@ -57,11 +57,11 @@ <h1 id="gametitle_label"></h1>
             <div id="gamescreenshots">
                 <div id="gamescreenshots_portal">
                     <div id="gamescreenshots_left_arrow" onclick="selectScreenshot_Prev();"
-                        class="gamescreenshots_arrows">
+                        class="gamescreenshots_arrows" style="opacity: 0;">
                         <img src="/images/arrow-left.svg" class="gamescreenshots_arrow_image" />
                     </div>
                     <div id="gamescreenshots_right_arrow" onclick="selectScreenshot_Next();"
-                        class="gamescreenshots_arrows">
+                        class="gamescreenshots_arrows" style="opacity: 0;">
                         <img src="/images/arrow-right.svg" class="gamescreenshots_arrow_image" />
                     </div>
                     <div id="gamescreenshots_main"></div>

diff --git a/gaseous-server/wwwroot/pages/game.js b/gaseous-server/wwwroot/pages/game.js
@@ -394,6 +394,22 @@ function SetupPage() {
         if (result.screenshots || result.videos) {
             var gameScreenshots_Main = document.getElementById('gamescreenshots_main');
 
+            let gameScreenshots_Portal = document.getElementById('gamescreenshots');
+            gameScreenshots_Portal.addEventListener('mouseenter', function () {
+                $(".gamescreenshots_arrows")
+                    .stop(true, true)
+                    .animate({
+                        opacity: 1
+                    }, 500);
+            });
+            gameScreenshots_Portal.addEventListener('mouseleave', function () {
+                $(".gamescreenshots_arrows")
+                    .stop(true, true)
+                    .animate({
+                        opacity: 0
+                    }, 500);
+            });
+
             // load static screenshots
             var gameScreenshots_Gallery = document.getElementById('gamescreenshots_gallery_panel');
             var imageIndex = 0;
@@ -407,6 +423,7 @@ function SetupPage() {
                         screenshotItem.id = 'gamescreenshots_gallery_' + imageIndex;
                         screenshotItem.setAttribute('name', 'gamescreenshots_gallery_item');
                         screenshotItem.setAttribute('style', 'background-image: url("/api/v1.1/Games/' + gameId + '/screenshots/' + screenshotsItem[i].id + '/image/screenshot_thumb/' + screenshotsItem[i].imageId + '.jpg"); background-position: center; background-repeat: no-repeat; background-size: contain;)');
+                        screenshotItem.setAttribute('data-url', '/api/v1.1/Games/' + gameId + '/screenshots/' + screenshotsItem[i].id + '/image/screenshot_thumb/' + screenshotsItem[i].imageId + '.jpg');
                         screenshotItem.setAttribute('imageid', imageIndex);
                         screenshotItem.setAttribute('imagetype', 0);
                         screenshotItem.className = 'gamescreenshots_gallery_item';
@@ -1413,12 +1430,21 @@ function selectScreenshot(index) {
     }
 
     // set the screenshot
+    gameScreenshots_Main.setAttribute('style', '');
     gameScreenshots_Main.innerHTML = '';
     switch (gameScreenshots_Selected.getAttribute('imagetype')) {
         case "0":
         default:
             // screenshot
-            gameScreenshots_Main.setAttribute('style', gameScreenshots_Selected.getAttribute('style').replace("/image/screenshot_thumb", "/image/original"));
+            // gameScreenshots_Main.setAttribute('style', gameScreenshots_Selected.getAttribute('style').replace("/image/screenshot_thumb", "/image/original"));
+
+            var imageTag = document.createElement('img');
+            imageTag.setAttribute('height', '290');
+            imageTag.setAttribute('width', '515');
+            imageTag.setAttribute('src', gameScreenshots_Selected.getAttribute('data-url').replace("/image/screenshot_thumb", "/image/original"));
+
+            gameScreenshots_Main.appendChild(imageTag);
+
             break;
         case "1":
             // video

diff --git a/gaseous-server/wwwroot/scripts/main.js b/gaseous-server/wwwroot/scripts/main.js
@@ -28,6 +28,7 @@ function ajaxCall(endpoint, method, successFunction, errorFunction, body) {
 
         // Error handling
         error: function (error) {
+            console.log('Error reaching URL: ' + endpoint);
             console.log(`Error ${JSON.stringify(error)}`);
 
             if (errorFunction) {

diff --git a/gaseous-server/wwwroot/styles/style.css b/gaseous-server/wwwroot/styles/style.css
@@ -1319,7 +1319,7 @@ input[name='filter_panel_range_max'] {
 }
 
 #gamescreenshots {
-    background-color: black;
+    background-color: rgba(0, 0, 0, 0.5);
     padding: 10px;
     /*height: 350px;*/
     margin-bottom: 20px;
@@ -1329,26 +1329,37 @@ input[name='filter_panel_range_max'] {
     border-radius: var(--standard-radius);
 }
 
+#gamescreenshots_portal {
+    text-align: center;
+}
+
 #gamescreenshots_main {
-    display: block;
-    width: 100%;
+    display: inline-block;
+    max-width: 100%;
+    min-width: 290px;
+    /* width: 290px; */
     height: 290px;
-    margin-bottom: 10px;
+    /* margin-bottom: 10px; */
+    border-radius: var(--standard-radius);
+    border-width: 1px;
+    border-style: solid;
+    border-color: transparent;
+    overflow: hidden;
 }
 
 iframe {
     display: block;
     margin: 0 auto;
 }
 
-#gamescreenshots_gallery {
+/* #gamescreenshots_gallery {
     left: 0px;
     right: 0px;
     height: 65px;
     overflow-x: scroll;
     overflow-y: hidden;
     white-space: normal;
-}
+} */
 
 /* #gamescreenshots_gallery_panel {
     display: block;
@@ -1444,9 +1455,9 @@ iframe {
 
 .gamescreenshots_arrows {
     margin-top: 140px;
-    height: 40px;
+    height: 30px;
     width: 30px;
-    padding-top: 15px;
+    /* padding-top: 5px; */
     background-color: var(--arrow-background);
     text-align: center;
     user-select: none;
@@ -1459,7 +1470,8 @@ iframe {
     /* webkit (konqueror) browsers */
     -ms-user-select: none;
     /* IE10+ */
-    border-radius: var(--standard-radius);
+    border-radius: 50%;
+    display: block;
 }
 
 .gamescreenshots_arrows:hover {
@@ -1476,8 +1488,9 @@ iframe {
 }
 
 .gamescreenshots_arrow_image {
-    max-height: 40px;
-    max-width: 25px;
+    padding-top: 7px;
+    width: 18px;
+    height: 15px;
 }
 
 #gamestatistics {