Fade thumbnail from fallback to the image texture

5 files changed, 32 insertions, 11 deletions

diff --git a/README.md b/README.md
index 00d47cf..a9778ca 100644
--- a/README.md
+++ b/README.md
@@ -16,7 +16,7 @@ OPTIONS:
   --tor                       Use tor. Disabled by default
   --use-system-mpv-config     Use system mpv config instead of no config. Disabled by default
   --upscale-images            Upscale low-resolution manga pages using waifu2x-ncnn-vulkan. Disabled by default
-  --upscale-images-force      Upscale manga pages using waifu2x-ncnn-vulkan, no matter what the original image resolution is. Disabled by default
+  --upscale-images-always     Upscale manga pages using waifu2x-ncnn-vulkan, no matter what the original image resolution is. Disabled by default
   --dir                       Set the start directory when using file-manager
 EXAMPLES:
 QuickMedia manganelo
diff --git a/TODO b/TODO
index 04f3ffa..72d4d2d 100644
--- a/TODO
+++ b/TODO
@@ -1,7 +1,6 @@
 Give user the option to start where they left off or from the start or from the start (for manga).
 Add grid-view when thumbnails are visible.
 Add scrollbar.
-Add option to scale image to window size.
 Somehow deal with youtube banning ip when searching too often.
 Optimize shadow rendering for items (Right now they fill too much space that is behind items). It should also be a blurry shadow.
 When continuing to read manga from a different page from the first and there is no cache for the chapter, then start downloading from the current page instead of page 1.
diff --git a/include/AsyncImageLoader.hpp b/include/AsyncImageLoader.hpp
index fa32971..0b3f4bf 100644
--- a/include/AsyncImageLoader.hpp
+++ b/include/AsyncImageLoader.hpp
@@ -3,6 +3,7 @@
 #include <string>
 #include <SFML/System/Vector2.hpp>
 #include <SFML/Graphics/Texture.hpp>
+#include <SFML/System/Clock.hpp>
 #include <memory>
 #include <thread>
 
@@ -19,6 +20,7 @@ namespace QuickMedia {
         LoadingState loading_state = LoadingState::NOT_LOADED;
         sf::Texture texture;
         std::unique_ptr<sf::Image> image; // Set in another thread. This should be .reset after loading it into |texture|, to save memory
+        sf::Clock texture_applied_time;
     };
 
     class AsyncImageLoader {
diff --git a/src/Body.cpp b/src/Body.cpp
index a779c09..a22f3ff 100644
--- a/src/Body.cpp
+++ b/src/Body.cpp
@@ -14,6 +14,7 @@ static const float padding_x = 10.0f;
 static const float image_padding_x = 5.0f;
 static const float padding_y = 5.0f;
 static const float embedded_item_padding_y = 0.0f;
+static const double thumbnail_fade_duration_sec = 0.25;
 
 namespace QuickMedia {
     BodyItem::BodyItem(std::string _title) :
@@ -59,7 +60,6 @@ namespace QuickMedia {
         replies_text.setFillColor(sf::Color(129, 162, 190));
         thumbnail_resize_target_size.x = 120;
         thumbnail_resize_target_size.y = 120;
-        image_fallback.setFillColor(sf::Color::White);
         item_background.setFillColor(sf::Color(55, 60, 68));
     }
 
@@ -560,8 +560,19 @@ namespace QuickMedia {
 
         float text_offset_x = padding_x;
         if(draw_thumbnails) {
+            double elapsed_time_thumbnail = 0.0;
+            if(item_thumbnail->loading_state == LoadingState::APPLIED_TO_TEXTURE)
+                elapsed_time_thumbnail = item_thumbnail->texture_applied_time.getElapsedTime().asSeconds(); //thumbnail_fade_duration_sec
+            
+            bool only_show_thumbnail = false;
+            double thumbnail_fade_progress = elapsed_time_thumbnail / thumbnail_fade_duration_sec;
+            if(thumbnail_fade_progress > 1.0) {
+                thumbnail_fade_progress = 1.0;
+                only_show_thumbnail = true;
+            }
+
+            bool has_thumbnail_texture = false;
             // TODO: Verify if this is safe. The thumbnail is being modified in another thread
-            // and it might not be fully finished before the native handle is set?
             if(item_thumbnail->loading_state == LoadingState::APPLIED_TO_TEXTURE && item_thumbnail->texture.getNativeHandle() != 0) {
                 image.setTexture(item_thumbnail->texture, true);
                 auto image_size = image.getTexture()->getSize();
@@ -571,6 +582,7 @@ namespace QuickMedia {
                     content_size = sf::Vector2f(item->thumbnail_size.x, item->thumbnail_size.y);
                 auto new_image_size = clamp_to_size(image_size_f, content_size);
                 auto image_scale = get_ratio(image_size_f, new_image_size);
+                image.setColor(sf::Color(255, 255, 255, thumbnail_fade_progress * 255));
                 image.setScale(image_scale);
                 image.setPosition(item_pos + sf::Vector2f(image_padding_x, padding_y));
                 if(thumbnail_mask_shader && item->thumbnail_mask_type == ThumbnailMaskType::CIRCLE)
@@ -578,27 +590,34 @@ namespace QuickMedia {
                 else
                     window.draw(image);
                 text_offset_x += image_padding_x + new_image_size.x;
+                has_thumbnail_texture = true;
                 // We want the next image fallback to have the same size as the successful image rendering, because its likely the image fallback will have the same size (for example thumbnails on youtube)
                 //image_fallback.setSize(sf::Vector2f(width_ratio * image_size.x, height_ratio * image_size.y));
-            } else if(!item->thumbnail_url.empty()) {
+            }
+
+            if(!item->thumbnail_url.empty() && !only_show_thumbnail) {
                 sf::Vector2f content_size(thumbnail_resize_target_size.x, thumbnail_resize_target_size.y);
                 if(item->thumbnail_size.x > 0 && item->thumbnail_size.y > 0)
                     content_size = sf::Vector2f(item->thumbnail_size.x, item->thumbnail_size.y);
-                image_fallback.setSize(content_size);
 
+                sf::Color fallback_color(52, 58, 70, (1.0 - thumbnail_fade_progress) * 255);
                 if(thumbnail_mask_shader && item->thumbnail_mask_type == ThumbnailMaskType::CIRCLE) {
                     // TODO: Use the mask shader instead, but a vertex shader is also needed for that to pass the vertex coordinates since
                     // shapes dont have texture coordinates.
                     // TODO: Cache circle shape
                     sf::CircleShape circle_shape(content_size.x * 0.5f);
-                    circle_shape.setFillColor(sf::Color::White);
+                    circle_shape.setFillColor(fallback_color);
                     circle_shape.setPosition(item_pos + sf::Vector2f(image_padding_x, padding_y));
                     window.draw(circle_shape);
                 } else {
+                    image_fallback.setSize(content_size);
+                    image_fallback.setFillColor(fallback_color);
                     image_fallback.setPosition(item_pos + sf::Vector2f(image_padding_x, padding_y));
                     window.draw(image_fallback);
                 }
-                text_offset_x += image_padding_x + content_size.x;
+
+                if(!has_thumbnail_texture)
+                    text_offset_x += image_padding_x + content_size.x;
             }
         }
 
@@ -735,6 +754,7 @@ namespace QuickMedia {
                     //item_thumbnail->texture.generateMipmap();
                     item_thumbnail->image.reset();
                     item_thumbnail->loading_state = LoadingState::APPLIED_TO_TEXTURE;
+                    item_thumbnail->texture_applied_time.restart();
                 }
             }
 
diff --git a/src/QuickMedia.cpp b/src/QuickMedia.cpp
index 0b39673..54af0fa 100644
--- a/src/QuickMedia.cpp
+++ b/src/QuickMedia.cpp
@@ -404,7 +404,7 @@ namespace QuickMedia {
         fprintf(stderr, "  --tor                       Use tor. Disabled by default\n");
         fprintf(stderr, "  --use-system-mpv-config     Use system mpv config instead of no config. Disabled by default\n");
         fprintf(stderr, "  --upscale-images            Upscale low-resolution manga pages using waifu2x-ncnn-vulkan. Disabled by default\n");
-        fprintf(stderr, "  --upscale-images-force      Upscale manga pages using waifu2x-ncnn-vulkan, no matter what the original image resolution is. Disabled by default\n");
+        fprintf(stderr, "  --upscale-images-always     Upscale manga pages using waifu2x-ncnn-vulkan, no matter what the original image resolution is. Disabled by default\n");
         fprintf(stderr, "  --dir                       Set the start directory when using file-manager\n");
         fprintf(stderr, "EXAMPLES:\n");
         fprintf(stderr, "QuickMedia manganelo\n");
@@ -466,7 +466,7 @@ namespace QuickMedia {
                 use_system_mpv_config = true;
             } else if(strcmp(argv[i], "--upscale-images") == 0) {
                 upscale_image_action = UpscaleImageAction::LOW_RESOLUTION;
-            } else if(strcmp(argv[i], "--upscale-images-force") == 0) {
+            } else if(strcmp(argv[i], "--upscale-images-force") == 0 || strcmp(argv[i], "--upscale-images-always") == 0) {
                 upscale_image_action = UpscaleImageAction::FORCE;
             } else if(strcmp(argv[i], "--dir") == 0) {
                 if(i < argc - 1) {
@@ -502,7 +502,7 @@ namespace QuickMedia {
             }
 
             if(!is_program_executable_by_name("waifu2x-ncnn-vulkan")) {
-                fprintf(stderr, "waifu2x-ncnn-vulkan needs to be installed (and accessible from PATH environment variable) when using the --upscale-images/--upscale-images-force option\n");
+                fprintf(stderr, "waifu2x-ncnn-vulkan needs to be installed (and accessible from PATH environment variable) when using the --upscale-images/--upscale-images-always option\n");
                 return -2;
             }