Merge pull request #82 from JSKitty/master

v0.1.7 - Expanded Profiles & Audio Bugfixes

Author: JSKitty

src-tauri/src/profile.rs

@@ -333,7 +333,7 @@ pub async fn load_profile(npub: String) -> bool {
 }
 
 #[tauri::command]
-pub async fn update_profile(name: String, avatar: String) -> bool {
+pub async fn update_profile(name: String, avatar: String, banner: String) -> bool {
     let client = NOSTR_CLIENT.get().expect("Nostr client not initialized");
 
     // Grab our pubkey
@@ -366,6 +366,18 @@ pub async fn update_profile(name: String, avatar: String) -> bool {
         );
     }
 
+    // Optional banner
+    if !banner.is_empty() || !profile.banner.is_empty() {
+        meta = meta.banner(
+            Url::parse(if banner.is_empty() {
+                profile.banner.as_str()
+            } else {
+                banner.as_str()
+            })
+            .unwrap(),
+        );
+    }
+
     // Add display_name
     if !profile.display_name.is_empty() {
         meta = meta.display_name(&profile.display_name);

src-tauri/src/util.rs

@@ -62,6 +62,10 @@ pub fn get_file_type_description(extension: &str) -> String {
         // Audio
         map.insert("wav", "Voice Message");
         map.insert("mp3", "Audio Clip");
+        map.insert("m4a", "Audio Clip");
+        map.insert("aac", "Audio Clip");
+        map.insert("flac", "Audio Clip");
+        map.insert("ogg", "Audio Clip");
 
         // Videos
         map.insert("mp4", "Video");

src/icons/user-circle.svg

@@ -38,6 +38,28 @@ <h2 id="popupTitle"></h2>
         <div id="emoji-results"></div>
       </div>
 
+      <div id="profile" class="chats" style="display: none;">
+        <div style="height: 60px; background-color: #161616;">
+          <div id="profile-back-btn" class="btn nav-back-btn">
+          <span class="icon icon-chevron-double-left nav-icon"></span>
+        </div>
+          <div>
+            <h3 id="profile-name" class="chat-contact-with-status btn"></h3>
+            <span id="profile-status" class="cutoff chat-contact-status btn" style="font-style: normal;"></span>
+          </div>
+        </div>
+        <div>
+          <img id="profile-banner" class="profile-banner">
+          <img id="profile-avatar" class="profile-avatar btn">
+        </div>
+        <div>
+          <h3 id="profile-secondary-name" class="chat-contact-with-status btn"></h3>
+          <span id="profile-secondary-status" class="cutoff chat-contact-status btn" style="font-style: normal; width: 90%;"></span>
+          <div id="profile-badge-list" style="height: 50px;"></div>
+          <span id="profile-description" class="chat-contact-status" style="width: 90%; white-space: pre-line; overflow-y: auto; height: 225px;"></span>
+        </div>
+      </div>
+
       <div id="chats" class="chats">
         <div id="chat-bookmarks-btn" class="btn chat-bookmarks-btn" style="display: none;">
           <span class="icon icon-bookmark nav-icon"></span>
@@ -56,7 +78,7 @@ <h2 id="popupTitle"></h2>
           <span class="icon icon-chevron-double-left nav-icon"></span>
         </div>
         <h3 id="chat-contact"></h3>
-        <span class="cutoff" id="chat-contact-status"></span>
+        <span class="cutoff chat-contact-status" id="chat-contact-status"></span>
         <div id="msg-top-fade" class="fadeout-top-msgs"></div>
         <div id="chat-messages" class="chat-messages">
 
@@ -83,7 +105,7 @@ <h3 id="chat-contact"></h3>
 
       <div id="chat-new" style="display: none;">
         <div class="chat-new-header">
-          <div id="chat-new-back-btn" class="btn chat-new-back-btn">
+          <div id="chat-new-back-text-btn" class="btn chat-new-back-text-btn">
             <span class="icon icon-chevron-double-left nav-icon"></span>
             <p class="chat-new-back-text">Back</p>
           </div>
@@ -168,6 +190,10 @@ <h2 class="danger-title">Dangerzone</h2>
       </div>
 
       <div id="navbar" class="row navbar" style="display: none;">
+        <div id="profile-btn" class="btn navbar-btn navbar-btn-inactive">
+          <span class="icon icon-user-circle navbar-icon"></span>
+          <p class="navbar-text">Profile</p>
+        </div>
         <div id="chat-btn" class="btn navbar-btn">
           <span class="icon icon-chats navbar-icon"></span>
           <p class="navbar-text">Chat</p>

src/index.html

@@ -2,11 +2,18 @@
  * Generate a consistent Gradient Avatar from an npub
  * @param {string} npub - The npub to generate an avatar for
  * @param {string} username - A username to display initials from
+ * @param {number} limitSizeTo - An optional pixel width/height to lock the avatar to
  */
-function pubkeyToAvatar(npub, username) {
+function pubkeyToAvatar(npub, username, limitSizeTo = 0) {
     // Otherwise, display their Gradient Avatar
     const divAvatar = document.createElement('div');
     divAvatar.classList.add('placeholder-avatar');
+    if (limitSizeTo > 0) {
+        divAvatar.style.minHeight = limitSizeTo + 'px';
+        divAvatar.style.minWidth = limitSizeTo + 'px';
+        divAvatar.style.maxHeight = limitSizeTo + 'px';
+        divAvatar.style.maxWidth = limitSizeTo + 'px';
+    }
 
     // Convert the last three chars of their npub in to RGB HEX as a placeholder avatar
     const strLastChars = npub.slice(-3).padEnd(3, 'a');

src/js/misc.js

@@ -24,6 +24,7 @@ class VoiceSettings {
         // Load our Settings from disk (or use a default value)
         const strModelID = await loadChosenWhisperModel() || this.selectedModel;
         this.autoTranslate = await loadWhisperAutoTranslate();
+        this.autoTranscribe = await loadWhisperAutoTranscribe();
 
         // Set initial toggle states (will be loaded from backend DB in future)
         document.getElementById('auto-translate-toggle').checked = this.autoTranslate;
@@ -407,10 +408,11 @@ async function askForUsername() {
     const cProfile = arrChats.find(a => a.mine);
     cProfile.name = strUsername;
     renderCurrentProfile(cProfile);
+    if (domProfile.style.display === '') renderProfileTab(cProfile);
 
     // Send out the metadata update
     try {
-        await invoke("update_profile", { name: strUsername, avatar: "" });
+        await invoke("update_profile", { name: strUsername, avatar: "", banner: "" });
     } catch (e) {
         await popupConfirm('Username Update Failed!', 'An error occurred while updating your Username, the change may not have committed to the network, you can re-try any time.', true);
     }
@@ -445,15 +447,55 @@ async function askForAvatar() {
     const cProfile = arrChats.find(a => a.mine);
     cProfile.avatar = strUploadURL;
     renderCurrentProfile(cProfile);
+    if (domProfile.style.display === '') renderProfileTab(cProfile);
 
     // Send out the metadata update
     try {
-        await invoke("update_profile", { name: "", avatar: strUploadURL });
+        await invoke("update_profile", { name: "", avatar: strUploadURL, banner: "" });
     } catch (e) {
         return await popupConfirm('Avatar Update Failed!', e, true);
     }
 }
 
+/**
+ * A GUI wrapper to ask the user for a banner URL, and apply it both
+ * in-app and on the Nostr network.
+ */
+async function askForBanner() {
+    // Prompt the user to select an image file
+    const file = await open({
+        title: 'Choose a Banner',
+        multiple: false,
+        directory: false,
+        filters: [{
+            name: 'Image',
+            extensions: ['png', 'jpeg', 'jpg', 'gif', 'webp']
+        }]
+    });
+    if (!file) return;
+
+    // Upload the banner to a NIP-96 server
+    let strUploadURL = '';
+    try {
+        strUploadURL = await invoke("upload_avatar", { filepath: file });
+    } catch (e) {
+        return await popupConfirm('Banner Upload Failed!', e, true);
+    }
+
+    // Display the change immediately
+    const cProfile = arrChats.find(a => a.mine);
+    cProfile.banner = strUploadURL;
+    renderCurrentProfile(cProfile);
+    if (domProfile.style.display === '') renderProfileTab(cProfile);
+
+    // Send out the metadata update
+    try {
+        await invoke("update_profile", { name: "", avatar: "", banner: strUploadURL });
+    } catch (e) {
+        return await popupConfirm('Banner Update Failed!', e, true);
+    }
+}
+
 /**
  * A GUI wrapper to ask the user for a status, and apply it both
  * in-app and on the Nostr network.
@@ -466,6 +508,7 @@ async function askForStatus() {
     const cProfile = arrChats.find(a => a.mine);
     cProfile.status.title = strStatus;
     renderCurrentProfile(cProfile);
+    if (domProfile.style.display === '') renderProfileTab(cProfile);
 
     // Send out the metadata update
     try {