Direct access User/Avatar URL's, zoom previous images

html/src/app.js

@@ -7711,7 +7711,7 @@ speechSynthesis.getVoices();
     };
 
     $app.methods.promptUserDialog = function () {
-        this.$prompt('Enter a User ID (UUID)', 'Direct Access', {
+        this.$prompt('Enter a User URL or ID (UUID)', 'Direct Access', {
             distinguishCancelAndClose: true,
             confirmButtonText: 'OK',
             cancelButtonText: 'Cancel',
@@ -7720,7 +7720,21 @@ speechSynthesis.getVoices();
             callback: (action, instance) => {
                 if (action === 'confirm' &&
                     instance.inputValue) {
-                    this.showUserDialog(instance.inputValue);
+                    var testUrl = instance.inputValue.substring(0, 15);
+                    if (testUrl === 'https://vrchat.') {
+                        var userId = this.parseUserUrl(instance.inputValue);
+                        if (userId) {
+                            this.showUserDialog(userId);
+                        } else {
+                            this.$message({
+                                message: 'Invalid URL',
+                                type: 'error'
+                            });
+                            return;
+                        }
+                    } else {
+                        this.showUserDialog(instance.inputValue);
+                    }
                 }
             }
         });
@@ -7746,6 +7760,7 @@ speechSynthesis.getVoices();
                                 message: 'Invalid URL',
                                 type: 'error'
                             });
+                            return;
                         }
                     } else {
                         this.showWorldDialog(instance.inputValue);
@@ -7908,11 +7923,25 @@ speechSynthesis.getVoices();
             callback: (action, instance) => {
                 if (action === 'confirm' &&
                     instance.inputValue) {
-                    if (API.cachedAvatars.has(instance.inputValue)) {
+                    var avatarId = instance.inputValue;
-                        this.showAvatarDialog(instance.inputValue);
+                    var testUrl = instance.inputValue.substring(0, 15);
+                    if (testUrl === 'https://vrchat.') {
+                        var urlAvatarId = this.parseAvatarUrl(instance.inputValue);
+                        if (urlAvatarId) {
+                            avatarId = urlAvatarId;
+                        } else {
+                            this.$message({
+                                message: 'Invalid URL',
+                                type: 'error'
+                            });
+                            return;
+                        }
+                    }
+                    if (API.cachedAvatars.has(avatarId)) {
+                        this.showAvatarDialog(avatarId);
                         return;
                     }
-                    this.showFavoriteDialog('avatar', instance.inputValue);
+                    this.showFavoriteDialog('avatar', avatarId);
                 }
             }
         });
@@ -8001,6 +8030,7 @@ speechSynthesis.getVoices();
         }
         D.ref = ref;
         $app.applyUserDialogLocation();
+        $app.getAvatarName(ref.currentAvatarImageUrl);
     });
 
     API.$on('WORLD', function (args) {
@@ -8230,7 +8260,7 @@ speechSynthesis.getVoices();
                 if (args.cache) {
                     API.getUser(args.params);
                 }
-                this.getAvatarName(args);
+                this.getAvatarName(args.ref.currentAvatarImageUrl);
                 var L = API.parseLocation(D.ref.location);
                 if ((L.worldId) &&
                     (this.lastLocation.location !== L.tag)) {
@@ -8590,7 +8620,7 @@ speechSynthesis.getVoices();
                     API.getFriendStatus({
                         userId: D.id
                     });
-                    this.getAvatarName(args);
+                    this.getAvatarName(args.ref.currentAvatarImageUrl);
                     var L = API.parseLocation(D.ref.location);
                     if ((L.worldId) &&
                         (this.lastLocation.location !== L.tag)) {
@@ -11799,7 +11829,7 @@ speechSynthesis.getVoices();
 
     API.cachedAvatarNames = new Map();
 
-    $app.methods.getAvatarName = function (args) {
+    $app.methods.getAvatarName = function (imageUrl) {
         var D = this.userDialog;
         D.$avatarInfo = {
             ownerId: '',
@@ -11808,7 +11838,6 @@ speechSynthesis.getVoices();
         if (!D.visible) {
             return;
         }
-        var imageUrl = D.ref.currentAvatarImageUrl;
         var fileId = extractFileId(imageUrl);
         if (!fileId) {
             return;
@@ -12441,6 +12470,28 @@ speechSynthesis.getVoices();
         }
     };
 
+    // Parse User URL
+
+    $app.methods.parseUserUrl = function (user) {
+        var url = new URL(user);
+        var urlPath = url.pathname;
+        if ('/user/' === urlPath.substring(5, 11)) {
+            var userId = urlPath.substring(11);
+            return userId;
+        }
+    };
+
+    // Parse Avatar URL
+
+    $app.methods.parseAvatarUrl = function (avatar) {
+        var url = new URL(avatar);
+        var urlPath = url.pathname;
+        if ('/avatar/' === urlPath.substring(5, 13)) {
+            var avatarId = urlPath.substr(13);
+            return avatarId;
+        }
+    };
+
     // userDialog Favorite Worlds
 
     $app.data.userFavoriteWorlds = [];

html/src/app.scss

@@ -399,7 +399,8 @@ img.friends-list-avatar {
     border-radius: 2px;
 }
 
-.x-change-image-item > img {
+.x-change-image-item > img,
+.x-change-image-item > .el-popover__reference-wrapper > img {
     width: 240px;
     height: 180px;
 }

html/src/index.pug

@@ -1970,8 +1970,9 @@ html
             el-dialog.x-dialog(ref="previousImagesDialog" :visible.sync="previousImagesDialogVisible" title="Previous Images" width="800px")
                 div
                     div(style="display:inline-block" v-for="image in previousImagesTable" :key="image.version" v-if="image.file")
-                        .x-change-image-item
+                        el-popover.x-change-image-item(placement="right" width="500px" trigger="click")
-                            img.image(v-lazy="image.file.url")
+                            img.x-link(slot="reference" v-lazy="image.file.url")
+                            img.x-link(v-lazy="image.file.url" style="width:500px;height:375px" @click="openExternalLink(image.file.url)")
                             
             //- dialog: Gallery/VRCPlusIcons
             el-dialog.x-dialog(ref="galleryDialog" :visible.sync="galleryDialogVisible" title="Gallery and Icons" width="100%")