Mask stream keys, add button to unmask it

TODO

@@ -25,12 +25,6 @@ Have different modes. Overlay, window and side menu. Overlay can be used on x11,
 
 Show navigation breadcrumbs for settings and deeper navigation (such as selecting a directory to save videos).
 
-Add option to hide stream key like a password input.
-    This could be implemented in Entry by having a second mgl::Text field that gets updated in set_text and that is displayed instead when the entry is masked.
-    For caret drawing overflow check in ::draw use that text field is the entry is masked and use that text field in caret navigation.
-    If masking is disabled then switch to caret index in the real text by using the same utf8_index (since the text is the same length)
-    but recalculate byte_index from utf8_index with utf8_index_to_byte_index.
-
 Add global setting. In that setting there should be an option to enable/disable gsr-ui from system startup (the systemd service).
 
 Add profiles and hotkey to switch between profiles (show notification when switching profile).

include/Theme.hpp

@@ -44,6 +44,8 @@ namespace gsr {
         mgl::Texture save_texture;
         mgl::Texture screenshot_texture;
         mgl::Texture trash_texture;
+        mgl::Texture masked_texture;
+        mgl::Texture unmasked_texture;
 
         mgl::Texture ps4_home_texture;
         mgl::Texture ps4_options_texture;

include/gui/Entry.hpp

@@ -41,6 +41,9 @@ namespace gsr {
         EntryValidateHandlerResult set_text(const std::string &str);
         std::string get_text() const;
 
+        void set_masked(bool masked);
+        bool is_masked() const;
+
         // Return false to specify that the string should not be accepted. This reverts the string back to its previous value.
         // The input can be changed by changing the input parameter and returning true.
         EntryValidateHandler validate_handler;
@@ -62,11 +65,13 @@ namespace gsr {
 
         mgl::Rectangle background;
         mgl::Text32 text;
+        mgl::Text32 masked_text;
         float max_width;
         bool selected = false;
         bool selecting_text = false;
         bool selecting_with_keyboard = false;
         bool show_selection = false;
+        bool masked = false;
         Caret caret;
         Caret selection_start_caret;
         float text_overflow = 0.0f;

include/gui/SettingsPage.hpp

@@ -118,9 +118,11 @@ namespace gsr {
         std::unique_ptr<ComboBox> create_streaming_service_box();
         std::unique_ptr<List> create_streaming_service_section();
         std::unique_ptr<List> create_stream_key_section();
+        std::unique_ptr<List> create_stream_custom_url();
+        std::unique_ptr<List> create_stream_custom_key();
         std::unique_ptr<List> create_stream_custom_section();
         std::unique_ptr<ComboBox> create_stream_container_box();
-        std::unique_ptr<List> create_stream_container_section();
+        std::unique_ptr<List> create_stream_container();
         void add_stream_widgets();
 
         void load_audio_tracks(const RecordOptions &record_options);
@@ -173,8 +175,7 @@ namespace gsr {
         ComboBox *container_box_ptr = nullptr;
         ComboBox *streaming_service_box_ptr = nullptr;
         List *stream_key_list_ptr = nullptr;
-        List *stream_url_list_ptr = nullptr;
-        List *container_list_ptr = nullptr;
+        List *custom_stream_list_ptr = nullptr;
         CheckBox *save_replay_in_game_folder_ptr = nullptr;
         CheckBox *restart_replay_on_save = nullptr;
         Label *estimated_file_size_ptr = nullptr;

include/gui/Widget.hpp

@@ -45,6 +45,8 @@ namespace gsr {
 
         void set_visible(bool visible);
 
+        Widget* get_parent_widget();
+
         void *userdata = nullptr;
     protected:
         void set_widget_as_selected_in_parent();

src/Theme.cpp

@@ -120,6 +120,12 @@ namespace gsr {
         if(!theme->trash_texture.load_from_file((resources_path + "images/trash.png").c_str(), mgl::Texture::LoadOptions{false, false, MGL_TEXTURE_SCALE_LINEAR_MIPMAP}))
             goto error;
 
+        if(!theme->masked_texture.load_from_file((resources_path + "images/masked.png").c_str(), mgl::Texture::LoadOptions{false, false, MGL_TEXTURE_SCALE_LINEAR_MIPMAP}))
+            goto error;
+
+        if(!theme->unmasked_texture.load_from_file((resources_path + "images/unmasked.png").c_str(), mgl::Texture::LoadOptions{false, false, MGL_TEXTURE_SCALE_LINEAR_MIPMAP}))
+            goto error;
+
         if(!theme->ps4_home_texture.load_from_file((resources_path + "images/ps4_home.png").c_str(), mgl::Texture::LoadOptions{false, false, MGL_TEXTURE_SCALE_LINEAR_MIPMAP}))
             goto error;
 

src/gui/Entry.cpp

@@ -23,8 +23,13 @@ namespace gsr {
         }
     }
 
-    Entry::Entry(mgl::Font *font, const char *text, float max_width) : text(std::u32string(), *font), max_width(max_width) {
+    Entry::Entry(mgl::Font *font, const char *text, float max_width) :
+        text(std::u32string(), *font),
+        masked_text(std::u32string(), *font),
+        max_width(max_width)
+    {
         this->text.set_color(get_color_theme().text_color);
+        this->masked_text.set_color(get_color_theme().text_color);
         set_text(text);
     }
 
@@ -32,6 +37,8 @@ namespace gsr {
         if(!visible)
             return true;
 
+        mgl::Text32 &active_text = masked ? masked_text : text;
+
         if(event.type == mgl::Event::MouseButtonPressed && event.mouse_button.button == mgl::Mouse::Left) {
             const mgl::vec2f mouse_pos = { (float)event.mouse_button.x, (float)event.mouse_button.y };
             selected = mgl::FloatRect(position + offset, get_size()).contains(mouse_pos);
@@ -40,7 +47,7 @@ namespace gsr {
 
                 const auto caret_index_mouse = find_closest_caret_index_by_position(mouse_pos);
                 caret.index = caret_index_mouse.index;
-                caret.offset_x = caret_index_mouse.pos.x - this->text.get_position().x;
+                caret.offset_x = caret_index_mouse.pos.x - active_text.get_position().x;
                 selection_start_caret = caret;
                 show_selection = true;
             } else {
@@ -56,7 +63,7 @@ namespace gsr {
             if(selecting_text) {
                 const auto caret_index_mouse = find_closest_caret_index_by_position(mgl::vec2f(event.mouse_move.x, event.mouse_move.y));
                 caret.index = caret_index_mouse.index;
-                caret.offset_x = caret_index_mouse.pos.x - this->text.get_position().x;
+                caret.offset_x = caret_index_mouse.pos.x - active_text.get_position().x;
                 return false;
             }
         } else if(event.type == mgl::Event::KeyPressed && selected) {
@@ -73,7 +80,7 @@ namespace gsr {
 
                 replace_text(selection_start_byte, selection_end_byte - selection_start_byte, std::u32string());
             } else if(event.key.code == mgl::Keyboard::Delete) {
-                if(selection_start_byte == selection_end_byte && caret.index < (int)text.get_string().size())
+                if(selection_start_byte == selection_end_byte && caret.index < (int)active_text.get_string().size())
                     selection_end_byte += 1;
 
                 replace_text(selection_start_byte, selection_end_byte - selection_start_byte, std::u32string());
@@ -89,9 +96,9 @@ namespace gsr {
                 selection_start_caret.index = 0;
                 selection_start_caret.offset_x = 0.0f;
 
-                caret.index = text.get_string().size();
+                caret.index = active_text.get_string().size();
                 // TODO: Optimize
-                caret.offset_x = text.find_character_pos(caret.index).x - this->text.get_position().x;
+                caret.offset_x = active_text.find_character_pos(caret.index).x - active_text.get_position().x;
 
                 show_selection = true;
             } else if(event.key.code == mgl::Keyboard::Left) {
@@ -123,9 +130,9 @@ namespace gsr {
                     show_selection = false;
                 }
             } else if(event.key.code == mgl::Keyboard::End) {
-                caret.index = text.get_string().size();
+                caret.index = active_text.get_string().size();
                 // TODO: Optimize
-                caret.offset_x = text.find_character_pos(caret.index).x - this->text.get_position().x;
+                caret.offset_x = active_text.find_character_pos(caret.index).x - active_text.get_position().x;
 
                 if(!selecting_with_keyboard) {
                     selection_start_caret = caret;
@@ -171,13 +178,15 @@ namespace gsr {
         const int padding_left = padding_left_scale * get_theme().window_height;
         const int padding_right = padding_right_scale * get_theme().window_height;
 
+        mgl::Text32 &active_text = masked ? masked_text : text;
+
         background.set_size(get_size());
         background.set_position(draw_pos.floor());
         background.set_color(selected ? mgl::Color(0, 0, 0, 255) : mgl::Color(0, 0, 0, 120));
         window.draw(background);
 
         const int caret_width = std::max(1.0f, caret_width_scale * get_theme().window_height);
-        const mgl::vec2f caret_size = mgl::vec2f(caret_width, text.get_bounds().size.y).floor();
+        const mgl::vec2f caret_size = mgl::vec2f(caret_width, active_text.get_bounds().size.y).floor();
 
         const float overflow_left = (caret.offset_x + padding_left) - (padding_left + text_overflow);
         if(overflow_left < 0.0f)
@@ -187,18 +196,18 @@ namespace gsr {
         if(overflow_right - text_overflow > 0.0f)
             text_overflow = overflow_right;
 
-        text.set_position((draw_pos + mgl::vec2f(padding_left, get_size().y * 0.5f - text.get_bounds().size.y * 0.5f) - mgl::vec2f(text_overflow, 0.0f)).floor());
+        active_text.set_position((draw_pos + mgl::vec2f(padding_left, get_size().y * 0.5f - active_text.get_bounds().size.y * 0.5f) - mgl::vec2f(text_overflow, 0.0f)).floor());
 
-        const auto text_bounds = text.get_bounds();
+        const auto text_bounds = active_text.get_bounds();
         const bool text_larger_than_background = text_bounds.size.x > (background.get_size().x - padding_left - padding_right);
         const float text_overflow_right = (text_bounds.position.x + text_bounds.size.x) - (background.get_position().x + background.get_size().x - padding_right);
         if(text_larger_than_background) {
             if(text_overflow_right < 0.0f) {
                 text_overflow += text_overflow_right;
-                text.set_position(text.get_position() + mgl::vec2f(-text_overflow_right, 0.0f));
+                active_text.set_position(active_text.get_position() + mgl::vec2f(-text_overflow_right, 0.0f));
             }
         } else {
-            text.set_position(text.get_position() + mgl::vec2f(-text_overflow, 0.0f));
+            active_text.set_position(active_text.get_position() + mgl::vec2f(-text_overflow, 0.0f));
             text_overflow = 0.0f;
         }
 
@@ -216,7 +225,7 @@ namespace gsr {
             });
         window.set_scissor(scissor);
 
-        window.draw(text);
+        window.draw(active_text);
 
         if(show_selection)
             draw_caret_selection(window, draw_pos, caret_size);
@@ -262,10 +271,11 @@ namespace gsr {
     }
 
     void Entry::move_caret_word(Direction direction, size_t max_codepoints) {
+        mgl::Text32 &active_text = masked ? masked_text : text;
         const int dir_step = direction == Direction::LEFT ? -1 : 1;
         const int num_delimiter_chars = 7;
         const char delimiter_chars[num_delimiter_chars + 1] = " \t\n/.,;";
-        const char32_t *text_str = text.get_string().data();
+        const char32_t *text_str = active_text.get_string().data();
 
         int num_non_delimiter_chars_found = 0;
 
@@ -280,22 +290,23 @@ namespace gsr {
                 ++num_non_delimiter_chars_found;
             }
 
-            if(caret.index + dir_step < 0 || caret.index + dir_step > (int)text.get_string().size())
+            if(caret.index + dir_step < 0 || caret.index + dir_step > (int)active_text.get_string().size())
                 break;
 
             caret.index += dir_step;
         }
 
-        // TODO: Move right by one character instead of calculating every character to caret index
-        caret.offset_x = text.find_character_pos(caret.index).x - this->text.get_position().x;
+        // TODO: Move right by some characters instead of calculating every character to caret index
+        caret.offset_x = active_text.find_character_pos(caret.index).x - active_text.get_position().x;
     }
 
     EntryValidateHandlerResult Entry::set_text(const std::string &str) {
         EntryValidateHandlerResult validate_result = set_text_internal(mgl::utf8_to_utf32(str));
         if(validate_result == EntryValidateHandlerResult::ALLOW) {
-            caret.index = text.get_string().size();
+            mgl::Text32 &active_text = masked ? masked_text : text;
+            caret.index = active_text.get_string().size();
             // TODO: Optimize
-            caret.offset_x = text.find_character_pos(caret.index).x - this->text.get_position().x;
+            caret.offset_x = active_text.find_character_pos(caret.index).x - active_text.get_position().x;
             selection_start_caret = caret;
 
             selecting_text = false;
@@ -312,6 +323,8 @@ namespace gsr {
 
         if(validate_result == EntryValidateHandlerResult::ALLOW) {
             text.set_string(std::move(str));
+            if(masked)
+                masked_text.set_string(std::u32string(text.get_string().size(), '*'));
             // TODO: Call callback with utf32 instead?
             if(on_changed)
                 on_changed(mgl::utf32_to_utf8(text.get_string()));
@@ -324,6 +337,25 @@ namespace gsr {
         return mgl::utf32_to_utf8(text.get_string());
     }
 
+    void Entry::set_masked(bool masked) {
+        if(masked == this->masked)
+            return;
+
+        this->masked = masked;
+
+        if(masked)
+            masked_text.set_string(std::u32string(text.get_string().size(), '*'));
+        else
+            masked_text.set_string(std::u32string());
+
+        mgl::Text32 &active_text = masked ? masked_text : text;
+        caret.offset_x = active_text.find_character_pos(caret.index).x - active_text.get_position().x;
+    }
+
+    bool Entry::is_masked() const {
+        return masked;
+    }
+
     void Entry::replace_text(size_t index, size_t size, const std::u32string &replacement) {
         if(index + size > text.get_string().size())
             return;
@@ -345,8 +377,9 @@ namespace gsr {
             return;
         }
 
+        mgl::Text32 &active_text = masked ? masked_text : text;
         // TODO: Optimize
-        caret.offset_x = text.find_character_pos(caret.index).x - this->text.get_position().x;
+        caret.offset_x = active_text.find_character_pos(caret.index).x - active_text.get_position().x;
         selection_start_caret = caret;
 
         selecting_text = false;
@@ -355,10 +388,11 @@ namespace gsr {
     }
 
     CaretIndexPos Entry::find_closest_caret_index_by_position(mgl::vec2f position) {
-        const std::u32string &str = text.get_string();
-        mgl::Font *font = text.get_font();
+        mgl::Text32 &active_text = masked ? masked_text : text;
+        const std::u32string &str = active_text.get_string();
+        mgl::Font *font = active_text.get_font();
 
-        CaretIndexPos result = {0, {text.get_position().x, text.get_position().y}};
+        CaretIndexPos result = {0, {active_text.get_position().x, active_text.get_position().y}};
         for(result.index = 0; result.index < (int)str.size(); ++result.index) {
             const uint32_t codepoint = str[result.index];
 

src/gui/SettingsPage.cpp

@@ -4,6 +4,7 @@
 #include "../../include/gui/PageStack.hpp"
 #include "../../include/gui/FileChooser.hpp"
 #include "../../include/gui/Subsection.hpp"
+#include "../../include/gui/Image.hpp"
 #include "../../include/Theme.hpp"
 #include "../../include/GsrInfo.hpp"
 #include "../../include/Utils.hpp"
@@ -965,42 +966,75 @@ namespace gsr {
         return streaming_service_list;
     }
 
+    static std::unique_ptr<Button> create_mask_toggle_button(Entry *entry_to_toggle, mgl::vec2f size) {
+        auto button = std::make_unique<Button>(&get_theme().body_font, "", size, mgl::Color(0, 0, 0, 0));
+        Button *button_ptr = button.get();
+        button->set_icon(&get_theme().masked_texture);
+        button->on_click = [entry_to_toggle, button_ptr]() {
+            const bool is_masked = entry_to_toggle->is_masked();
+            button_ptr->set_icon(is_masked ? &get_theme().unmasked_texture : &get_theme().masked_texture);
+            entry_to_toggle->set_masked(!is_masked);
+        };
+        return button;
+    }
+
+    static Entry* add_stream_key_entry_to_list(List *stream_key_list) {
+        auto list = std::make_unique<List>(List::Orientation::HORIZONTAL, List::Alignment::CENTER);
+        auto key_entry = std::make_unique<Entry>(&get_theme().body_font, "", get_theme().body_font.get_character_size() * 20);
+        key_entry->set_masked(true);
+        Entry *key_entry_ptr = key_entry.get();
+        const float mask_icon_size = key_entry_ptr->get_size().y * 0.9f;
+        list->add_widget(std::move(key_entry));
+        list->add_widget(create_mask_toggle_button(key_entry_ptr, mgl::vec2f(mask_icon_size, mask_icon_size)));
+        stream_key_list->add_widget(std::move(list));
+        return key_entry_ptr;
+    }
+
     std::unique_ptr<List> SettingsPage::create_stream_key_section() {
         auto stream_key_list = std::make_unique<List>(List::Orientation::VERTICAL);
         stream_key_list->add_widget(std::make_unique<Label>(&get_theme().body_font, "Stream key:", get_color_theme().text_color));
 
-        auto twitch_stream_key_entry = std::make_unique<Entry>(&get_theme().body_font, "", get_theme().body_font.get_character_size() * 20);
-        twitch_stream_key_entry_ptr = twitch_stream_key_entry.get();
-        stream_key_list->add_widget(std::move(twitch_stream_key_entry));
-
-        auto youtube_stream_key_entry = std::make_unique<Entry>(&get_theme().body_font, "", get_theme().body_font.get_character_size() * 20);
-        youtube_stream_key_entry_ptr = youtube_stream_key_entry.get();
-        stream_key_list->add_widget(std::move(youtube_stream_key_entry));
-
-        auto rumble_stream_key_entry = std::make_unique<Entry>(&get_theme().body_font, "", get_theme().body_font.get_character_size() * 20);
-        rumble_stream_key_entry_ptr = rumble_stream_key_entry.get();
-        stream_key_list->add_widget(std::move(rumble_stream_key_entry));
+        twitch_stream_key_entry_ptr = add_stream_key_entry_to_list(stream_key_list.get());
+        youtube_stream_key_entry_ptr = add_stream_key_entry_to_list(stream_key_list.get());
+        rumble_stream_key_entry_ptr = add_stream_key_entry_to_list(stream_key_list.get());
 
         stream_key_list_ptr = stream_key_list.get();
         return stream_key_list;
     }
 
-    std::unique_ptr<List> SettingsPage::create_stream_custom_section() {
-        auto stream_url_list = std::make_unique<List>(List::Orientation::VERTICAL);
-        stream_url_list->add_widget(std::make_unique<Label>(&get_theme().body_font, "Stream URL:", get_color_theme().text_color));
-
+    std::unique_ptr<List> SettingsPage::create_stream_custom_url() {
+        auto list = std::make_unique<List>(List::Orientation::VERTICAL);
         auto stream_url_entry = std::make_unique<Entry>(&get_theme().body_font, "", get_theme().body_font.get_character_size() * 20);
         stream_url_entry_ptr = stream_url_entry.get();
-        stream_url_list->add_widget(std::move(stream_url_entry));
-
-        stream_url_list->add_widget(std::make_unique<Label>(&get_theme().body_font, "Stream key:", get_color_theme().text_color));
+        list->add_widget(std::make_unique<Label>(&get_theme().body_font, "Stream URL:", get_color_theme().text_color));
+        list->add_widget(std::move(stream_url_entry));
+        return list;
+    }
 
+    std::unique_ptr<List> SettingsPage::create_stream_custom_key() {
+        auto list = std::make_unique<List>(List::Orientation::HORIZONTAL, List::Alignment::CENTER);
         auto stream_key_entry = std::make_unique<Entry>(&get_theme().body_font, "", get_theme().body_font.get_character_size() * 20);
+        stream_key_entry->set_masked(true);
         stream_key_entry_ptr = stream_key_entry.get();
-        stream_url_list->add_widget(std::move(stream_key_entry));
+        const float mask_icon_size = stream_key_entry_ptr->get_size().y * 0.9f;
+        list->add_widget(std::move(stream_key_entry));
+        list->add_widget(create_mask_toggle_button(stream_key_entry_ptr, mgl::vec2f(mask_icon_size, mask_icon_size)));
+        return list;
+    }
 
-        stream_url_list_ptr = stream_url_list.get();
-        return stream_url_list;
+    std::unique_ptr<List> SettingsPage::create_stream_custom_section() {
+        auto custom_stream_list = std::make_unique<List>(List::Orientation::VERTICAL);
+
+        auto stream_url_list = std::make_unique<List>(List::Orientation::HORIZONTAL);
+        stream_url_list->add_widget(create_stream_custom_url());
+        stream_url_list->add_widget(create_stream_container());
+
+        custom_stream_list->add_widget(std::move(stream_url_list));
+        custom_stream_list->add_widget(std::make_unique<Label>(&get_theme().body_font, "Stream key:", get_color_theme().text_color));
+        custom_stream_list->add_widget(create_stream_custom_key());
+
+        custom_stream_list_ptr = custom_stream_list.get();
+        return custom_stream_list;
     }
 
     std::unique_ptr<ComboBox> SettingsPage::create_stream_container_box() {
@@ -1013,11 +1047,10 @@ namespace gsr {
         return container_box;
     }
     
-    std::unique_ptr<List> SettingsPage::create_stream_container_section() {
+    std::unique_ptr<List> SettingsPage::create_stream_container() {
         auto container_list = std::make_unique<List>(List::Orientation::VERTICAL);
         container_list->add_widget(std::make_unique<Label>(&get_theme().body_font, "Container:", get_color_theme().text_color));
         container_list->add_widget(create_stream_container_box());
-        container_list_ptr = container_list.get();
         return container_list;
     }
 
@@ -1026,7 +1059,6 @@ namespace gsr {
         streaming_info_list->add_widget(create_streaming_service_section());
         streaming_info_list->add_widget(create_stream_key_section());
         streaming_info_list->add_widget(create_stream_custom_section());
-        streaming_info_list->add_widget(create_stream_container_section());
         settings_list_ptr->add_widget(std::make_unique<Subsection>("Streaming info", std::move(streaming_info_list), mgl::vec2f(settings_scrollable_page_ptr->get_inner_size().x, 0.0f)));
 
         auto checkboxes_list = std::make_unique<List>(List::Orientation::VERTICAL);
@@ -1051,11 +1083,10 @@ namespace gsr {
             const bool rumble_option = id == "rumble";
             const bool custom_option = id == "custom";
             stream_key_list_ptr->set_visible(!custom_option);
-            stream_url_list_ptr->set_visible(custom_option);
-            container_list_ptr->set_visible(custom_option);
-            twitch_stream_key_entry_ptr->set_visible(twitch_option);
-            youtube_stream_key_entry_ptr->set_visible(youtube_option);
-            rumble_stream_key_entry_ptr->set_visible(rumble_option);
+            custom_stream_list_ptr->set_visible(custom_option);
+            twitch_stream_key_entry_ptr->get_parent_widget()->set_visible(twitch_option);
+            youtube_stream_key_entry_ptr->get_parent_widget()->set_visible(youtube_option);
+            rumble_stream_key_entry_ptr->get_parent_widget()->set_visible(rumble_option);
             return true;
         };
         streaming_service_box_ptr->on_selection_changed("Twitch", "twitch");

src/gui/Widget.cpp

@@ -64,6 +64,10 @@ namespace gsr {
         this->visible = visible;
     }
 
+    Widget* Widget::get_parent_widget() {
+        return parent_widget;
+    }
+
     void add_widget_to_remove(std::unique_ptr<Widget> widget) {
         widgets_to_remove.push_back(std::move(widget));
     }