ChangeLog dialog

html/package.json

@@ -31,8 +31,8 @@
     "copy-webpack-plugin": "^11.0.0",
     "css-loader": "^6.7.3",
     "default-passive-events": "^2.0.0",
-    "element-ui": "^2.15.12",
+    "element-ui": "^2.15.13",
-    "eslint": "^8.33.0",
+    "eslint": "^8.35.0",
     "eslint-config-prettier": "^8.6.0",
     "html-webpack-plugin": "^5.5.0",
     "mini-css-extract-plugin": "^2.7.2",
@@ -42,16 +42,17 @@
     "pug": "^3.0.2",
     "pug-plain-loader": "^1.1.0",
     "raw-loader": "^4.0.2",
-    "sass": "^1.58.0",
+    "sass": "^1.58.3",
     "sass-loader": "^13.2.0",
     "uuid": "^9.0.0",
     "vue": "^2.6.14",
     "vue-data-tables": "^3.4.5",
     "vue-i18n": "^8.28.2",
     "vue-lazyload": "^1.3.4",
+    "vue-markdown": "^2.2.4",
     "vue-marquee-text-component": "^1.2.0",
     "webpack": "^5.75.0",
     "webpack-cli": "^5.0.1",
-    "worker-timers": "^7.0.62"
+    "worker-timers": "^7.0.63"
   }
 }

html/src/app.js

@@ -14,6 +14,7 @@ import {DataTables} from 'vue-data-tables';
 import ElementUI from 'element-ui';
 import {v4 as uuidv4} from 'uuid';
 import * as workerTimers from 'worker-timers';
+import VueMarkdown from 'vue-markdown';
 import 'default-passive-events';
 
 import configRepository from './repository/config.js';
@@ -129,6 +130,8 @@ speechSynthesis.getVoices();
         timeout: 6000
     });
 
+    Vue.component('vue-markdown', VueMarkdown);
+
     Vue.use(VueI18n);
 
     var i18n = new VueI18n({
@@ -1682,6 +1685,8 @@ speechSynthesis.getVoices();
                 $lastSeen: '',
                 $nickName: '',
                 $previousLocation: '',
+                $customTag: '',
+                $customTagColour: '',
                 //
                 ...json
             };
@@ -1711,6 +1716,11 @@ speechSynthesis.getVoices();
                     $app.updateSharedFeed(false);
                 }
             }
+            if ($app.customUserTags.has(json.id)) {
+                var tag = this.customUserTags.get(json.id);
+                ref.$customTag = tag.tag;
+                ref.$customTagColour = tag.colour;
+            }
             ref.$isVRCPlus = ref.tags.includes('system_supporter');
             this.applyUserTrustLevel(ref);
             this.applyUserLanguage(ref);
@@ -4901,7 +4911,7 @@ speechSynthesis.getVoices();
         if (lastVersion !== this.appVersion) {
             configRepository.setString('VRCX_lastVRCXVersion', this.appVersion);
             if (configRepository.getString('VRCX_branch') === 'Stable') {
-                this.openChangeLog();
+                this.showChangeLogDialog();
             }
         }
     };
@@ -4918,21 +4928,6 @@ speechSynthesis.getVoices();
         configRepository.setString('VRCX_branch', this.branch);
     };
 
-    $app.methods.openChangeLog = function () {
-        this.$confirm('Open Change Log?', 'VRCX has updated', {
-            confirmButtonText: 'Open',
-            cancelButtonText: 'Close',
-            type: 'info',
-            callback: (action) => {
-                if (action === 'confirm') {
-                    AppApi.OpenLink(
-                        'https://github.com/vrcx-team/VRCX/releases/latest'
-                    );
-                }
-            }
-        });
-    };
-
     $app.methods.languageClass = function (language) {
         var style = {};
         var mapping = languageMappings[language];
@@ -9817,12 +9812,18 @@ speechSynthesis.getVoices();
         var userId = this.getUserIdFromPhotonId(input.photonId);
         var isFavorite = API.cachedFavoritesByObjectId.has(userId);
         var isFriend = this.friends.has(userId);
+        var colour = '';
+        var tagRef = this.customUserTags.get(userId);
+        if (typeof tagRef !== 'undefined' && tagRef.colour) {
+            colour = tagRef.colour;
+        }
         var feed = {
             displayName: this.getDisplayNameFromPhotonId(input.photonId),
             userId,
             isFavorite,
             isFriend,
             isMaster,
+            colour,
             ...input
         };
         this.photonEventTable.data.unshift(feed);
@@ -14855,28 +14856,38 @@ speechSynthesis.getVoices();
                     }
                     this.applyUserDialogLocation(true);
                     if (this.$refs.userDialogTabs.currentName === '0') {
-                        this.userDialogLastActiveTab = 'Info';
+                        this.userDialogLastActiveTab = $t(
+                            'dialog.user.info.header'
+                        );
                     } else if (this.$refs.userDialogTabs.currentName === '1') {
-                        this.userDialogLastActiveTab = 'Groups';
+                        this.userDialogLastActiveTab = $t(
+                            'dialog.user.groups.header'
+                        );
                         if (this.userDialogLastGroup !== userId) {
                             this.userDialogLastGroup = userId;
                             this.getUserGroups(userId);
                         }
                     } else if (this.$refs.userDialogTabs.currentName === '2') {
-                        this.userDialogLastActiveTab = 'Worlds';
+                        this.userDialogLastActiveTab = $t(
+                            'dialog.user.worlds.header'
+                        );
                         this.setUserDialogWorlds(userId);
                         if (this.userDialogLastWorld !== userId) {
                             this.userDialogLastWorld = userId;
                             this.refreshUserDialogWorlds();
                         }
                     } else if (this.$refs.userDialogTabs.currentName === '3') {
-                        this.userDialogLastActiveTab = 'Favorite Worlds';
+                        this.userDialogLastActiveTab = $t(
+                            'dialog.user.favorite_worlds.header'
+                        );
                         if (this.userDialogLastFavoriteWorld !== userId) {
                             this.userDialogLastFavoriteWorld = userId;
                             this.getUserFavoriteWorlds(userId);
                         }
                     } else if (this.$refs.userDialogTabs.currentName === '4') {
-                        this.userDialogLastActiveTab = 'Avatars';
+                        this.userDialogLastActiveTab = $t(
+                            'dialog.user.avatars.header'
+                        );
                         this.setUserDialogAvatars(userId);
                         this.userDialogLastAvatar = userId;
                         if (
@@ -14887,7 +14898,9 @@ speechSynthesis.getVoices();
                         }
                         this.setUserDialogAvatarsRemote(userId);
                     } else if (this.$refs.userDialogTabs.currentName === '5') {
-                        this.userDialogLastActiveTab = 'JSON';
+                        this.userDialogLastActiveTab = $t(
+                            'dialog.user.json.header'
+                        );
                         this.refreshUserDialogTreeData();
                     }
                     if (args.cache) {
@@ -19984,12 +19997,12 @@ speechSynthesis.getVoices();
         if (this.userDialogLastActiveTab === obj.label) {
             return;
         }
-        if (obj.label === 'Groups') {
+        if (obj.label === $t('dialog.user.groups.header')) {
             if (this.userDialogLastGroup !== userId) {
                 this.userDialogLastGroup = userId;
                 this.getUserGroups(userId);
             }
-        } else if (obj.label === 'Avatars') {
+        } else if (obj.label === $t('dialog.user.avatars.header')) {
             this.setUserDialogAvatars(userId);
             if (this.userDialogLastAvatar !== userId) {
                 this.userDialogLastAvatar = userId;
@@ -20002,18 +20015,18 @@ speechSynthesis.getVoices();
                     this.setUserDialogAvatarsRemote(userId);
                 }
             }
-        } else if (obj.label === 'Worlds') {
+        } else if (obj.label === $t('dialog.user.worlds.header')) {
             this.setUserDialogWorlds(userId);
             if (this.userDialogLastWorld !== userId) {
                 this.userDialogLastWorld = userId;
                 this.refreshUserDialogWorlds();
             }
-        } else if (obj.label === 'Favorite Worlds') {
+        } else if (obj.label === $t('dialog.user.favorite_worlds.header')) {
             if (this.userDialogLastFavoriteWorld !== userId) {
                 this.userDialogLastFavoriteWorld = userId;
                 this.getUserFavoriteWorlds(userId);
             }
-        } else if (obj.label === 'JSON') {
+        } else if (obj.label === $t('dialog.user.json.header')) {
             this.refreshUserDialogTreeData();
         }
         this.userDialogLastActiveTab = obj.label;
@@ -21117,7 +21130,8 @@ speechSynthesis.getVoices();
         updatePending: false,
         updatePendingIsLatest: false,
         release: '',
-        releases: []
+        releases: [],
+        json: {}
     };
 
     $app.data.checkingForVRCXUpdate = false;
@@ -21292,6 +21306,7 @@ speechSynthesis.getVoices();
             console.log(json, response);
         }
         if (json === Object(json) && json.name && json.published_at) {
+            this.VRCXUpdateDialog.updateJson = json;
             this.latestAppVersion = json.name;
             var name = json.name;
             this.VRCXUpdateDialog.updatePendingIsLatest = false;
@@ -21555,9 +21570,26 @@ speechSynthesis.getVoices();
 
     $app.data.photonEventCount = 0;
     $app.data.photonEventIcon = false;
+    $app.data.customUserTags = new Map();
+
+    $app.methods.addCustomTag = function (data) {
+        this.customUserTags.set(data.UserId, {
+            tag: data.Tag,
+            colour: data.TagColour
+        });
+        var ref = API.cachedUsers.get(data.UserId);
+        if (typeof ref !== 'undefined') {
+            ref.$customTag = data.Tag;
+            ref.$customTagColour = data.TagColour;
+        }
+    };
 
     $app.methods.eventVrcxMessage = function (data) {
-        console.log(data);
+        switch (data.MsgType) {
+            case 'CustomTag':
+                this.addCustomTag(data);
+                break;
+            case 'Noty':
                 var entry = {
                     created_at: new Date().toJSON(),
                     type: 'Event',
@@ -21566,6 +21598,14 @@ speechSynthesis.getVoices();
                 database.addGamelogEventToDatabase(entry);
                 this.queueGameLogNoty(entry);
                 this.addGameLog(entry);
+                if (data.Tag) {
+                    this.addCustomTag(data);
+                }
+                break;
+            default:
+                console.log('VRCXMessage:', data);
+                break;
+        }
     };
 
     $app.methods.photonEventPulse = function () {
@@ -24036,6 +24076,18 @@ speechSynthesis.getVoices();
         });
     };
 
+    API.getRequestedGroups = function () {
+        return this.call(`users/${this.currentUser.id}/groups/requested`, {
+            method: 'GET'
+        }).then((json) => {
+            var args = {
+                json
+            };
+            this.$emit('GROUP:REQUESTED', args);
+            return args;
+        });
+    };
+
     /*
         params: {
             groupId: string
@@ -24343,17 +24395,17 @@ speechSynthesis.getVoices();
         if (this.groupDialogLastActiveTab === obj.label) {
             return;
         }
-        if (obj.label === 'Members') {
+        if (obj.label === $t('dialog.group.members.header')) {
             if (this.groupDialogLastMembers !== groupId) {
                 this.groupDialogLastMembers = groupId;
                 this.getGroupDialogGroupMembers();
             }
-        } else if (obj.label === 'Gallery') {
+        } else if (obj.label === $t('dialog.group.gallery.header')) {
             if (this.groupDialogLastGallery !== groupId) {
                 this.groupDialogLastGallery = groupId;
                 this.getGroupGalleries();
             }
-        } else if (obj.label === 'JSON') {
+        } else if (obj.label === $t('dialog.group.json.header')) {
             this.refreshGroupDialogTreeData();
         }
         this.groupDialogLastActiveTab = obj.label;
@@ -24924,6 +24976,40 @@ speechSynthesis.getVoices();
         return row.isFavorite;
     };
 
+    $app.data.changeLogDialog = {
+        visible: false
+    };
+
+    $app.methods.showChangeLogDialog = function () {
+        this.$nextTick(() => adjustDialogZ(this.$refs.changeLogDialog.$el));
+        this.changeLogDialog.visible = true;
+        if (
+            typeof this.VRCXUpdateDialog.updateJson === 'object' &&
+            Object.keys(this.VRCXUpdateDialog.updateJson).length === 0
+        ) {
+            this.checkForVRCXUpdate();
+        }
+    };
+
+    $app.data.gallerySelectDialog = {
+        visible: false,
+        destenationFeild: ''
+    };
+
+    $app.methods.showGallerySelectDialog = function (destenationFeild) {
+        this.$nextTick(() => adjustDialogZ(this.$refs.gallerySelectDialog.$el));
+        var D = this.gallerySelectDialog;
+        D.destenationFeild = destenationFeild;
+        D.visible = true;
+        this.refreshGalleryTable();
+    };
+
+    $app.methods.selectImageGallerySelect = function (imageUrl, fileId) {
+        var D = this.gallerySelectDialog;
+        D.visible = false;
+        console.log(imageUrl, fileId);
+    };
+
     $app = new Vue($app);
     window.$app = $app;
 })();

html/src/app.scss

@@ -686,3 +686,7 @@ i.x-user-status.busy {
 .group-banner-image {
     display: none;
 }
+
+.changelog-dialog img {
+    width: 100%;
+}

html/src/index.pug

@@ -1128,6 +1128,7 @@ html
                         div.options-container
                             span.header {{ $t("view.settings.general.vrcx_updater.header") }}
                             div.options-container-item
+                                el-button(size="small" icon="el-icon-document" @click="showChangeLogDialog()") {{ $t("view.settings.general.vrcx_updater.change_log") }}
                                 el-button(size="small" icon="el-icon-upload" @click="showVRCXUpdateDialog()") {{ $t("view.settings.general.vrcx_updater.change_build") }}
                             div.options-container-item
                                 span.name {{ $t("view.settings.general.vrcx_updater.auto_update") }}
@@ -1685,6 +1686,7 @@ html
                                     el-tag.x-tag-vrcplus(v-if="userDialog.ref.$isVRCPlus" type="info" effect="plain" size="mini" style="margin-right:5px;margin-top:5px") VRC+
                                     el-tag.x-tag-platform-pc(v-if="userDialog.ref.last_platform === 'standalonewindows'" type="info" effect="plain" size="mini" style="margin-right:5px;margin-top:5px") PC
                                     el-tag.x-tag-platform-quest(v-else-if="userDialog.ref.last_platform === 'android'" type="info" effect="plain" size="mini" style="margin-right:5px;margin-top:5px") Quest
+                                    el-tag.name(v-if="userDialog.ref.$customTag" type="info" effect="plain" size="mini" v-text="userDialog.ref.$customTag" :style="{'color':userDialog.ref.$customTagColour, 'border-color':userDialog.ref.$customTagColour}" style="margin-right:5px;margin-top:5px")
                                 div(style="margin-top:5px")
                                     span(v-text="userDialog.ref.statusDescription" style="font-size:12px")
                             div(v-if="userDialog.ref.userIcon" style="flex:none;margin-right:10px")
@@ -3803,7 +3805,7 @@ html
                     el-button(v-if="API.currentUser.$isVRCPlus && screenshotMetadataDialog.metadata.filePath" size="small" icon="el-icon-upload2" @click="uploadScreenshotToGallery") {{ $t('dialog.screenshot_metadata.upload') }}
                     span(v-text="screenshotMetadataDialog.metadata.fileName" style="margin-left:5px")
                     br
-                    span(v-if="screenshotMetadataDialog.metadata.dateTime" style="margin-left:5px") {{ screenshotMetadataDialog.metadata.dateTime | formatDate('long') }}
+                    span(v-if="screenshotMetadataDialog.metadata.dateTime") {{ screenshotMetadataDialog.metadata.dateTime | formatDate('long') }}
                     span(v-if="screenshotMetadataDialog.metadata.fileResolution" v-text="screenshotMetadataDialog.metadata.fileResolution" style="margin-left:5px")
                     el-tag(v-if="screenshotMetadataDialog.metadata.fileSize" type="info" effect="plain" size="mini" style="margin-left:5px" v-text="screenshotMetadataDialog.metadata.fileSize")
                     br
@@ -3833,6 +3835,32 @@ html
                         span(v-if="user.x" v-text="'('+user.x+', '+user.y+', '+user.z+')'" style="margin-left:5px;color:#909399;font-family:monospace")
                         br
 
+            //- dialog: change log
+            el-dialog.x-dialog(:before-close="beforeDialogClose" @mousedown.native="dialogMouseDown" @mouseup.native="dialogMouseUp" ref="changeLogDialog" :visible.sync="changeLogDialog.visible" :title="$t('dialog.change_log.header')" width="800px")
+                .changelog-dialog(v-if="changeLogDialog.visible")
+                    h2(v-text="VRCXUpdateDialog.updateJson.name")
+                    vue-markdown(:source="VRCXUpdateDialog.updateJson.body")
+                template(#footer)
+                    el-button(type="small" @click="openExternalLink('https://github.com/vrcx-team/VRCX/releases')") {{ $t('dialog.change_log.github') }}
+                    el-button(type="small" @click="openExternalLink('https://patreon.com/Natsumi_VRCX')") {{ $t('dialog.change_log.donate') }}
+                    el-button(type="small" @click="changeLogDialog.visible = false") {{ $t('dialog.change_log.close') }}
+
+            //- dialog: gallery select
+            el-dialog.x-dialog(:before-close="beforeDialogClose" @mousedown.native="dialogMouseDown" @mouseup.native="dialogMouseUp" ref="gallerySelectDialog" :visible.sync="gallerySelectDialog.visible" :title="$t('dialog.gallery_select.header')" width="100%")
+                div(v-if="gallerySelectDialog.visible")
+                    span(slot="label") {{ $t('dialog.gallery_select.gallery') }}
+                    span(style="color:#909399;font-size:12px;margin-left:5px") {{ galleryTable.length }}/64
+                    br
+                    input(type="file" accept="image/*" @change="onFileChangeGallery" id="GalleryUploadButton" style="display:none")
+                    el-button-group
+                        el-button(type="default" size="small" @click="selectImageGallerySelect('', '')" icon="el-icon-close") {{ $t('dialog.gallery_select.none') }}
+                        el-button(type="default" size="small" @click="refreshGalleryTable" icon="el-icon-refresh") {{ $t('dialog.gallery_select.refresh') }}
+                        el-button(type="default" size="small" @click="displayGalleryUpload" icon="el-icon-upload2" :disabled="!API.currentUser.$isVRCPlus") {{ $t('dialog.gallery_select.upload') }}
+                    br
+                    .x-friend-item(v-if="image.versions && image.versions.length > 0" v-for="image in galleryTable" :key="image.id" style="display:inline-block;margin-top:10px;width:unset;cursor:default")
+                        .vrcplus-icon(v-if="image.versions[image.versions.length - 1].file.url" @click="selectImageGallerySelect(image.versions[image.versions.length - 1].file.url, image.id)")
+                            img.avatar(v-lazy="image.versions[image.versions.length - 1].file.url")
+                
             //- dialog: open source software notice
             el-dialog.x-dialog(:before-close="beforeDialogClose" @mousedown.native="dialogMouseDown" @mouseup.native="dialogMouseUp" :visible.sync="ossDialog" :title="$t('dialog.open_source.header')" width="650px")
                 div(v-if="ossDialog" style="height:350px;overflow:hidden scroll;word-break:break-all")

html/src/localization/strings/en.json

@@ -193,7 +193,8 @@
                     "auto_update_off": "Off",
                     "auto_update_notify": "Notify",
                     "auto_update_download": "Auto Download",
-                    "auto_update_install": "Auto Install"
+                    "auto_update_install": "Auto Install",
+                    "change_log": "Change Log"
                 },
                 "application": {
                     "header": "Application",
@@ -1043,6 +1044,19 @@
             "info": "Previous Instance Info",
             "search_placeholder": "Search"
         },
+        "change_log": {
+            "header": "Change Log",
+            "close": "Close",
+            "donate": "Donate",
+            "github": "GitHub"
+        },
+        "gallery_select": {
+            "header": "Select Image",
+            "gallery": "Gallery",
+            "none": "None",
+            "refresh": "Refresh",
+            "upload": "Upload"
+        },
         "open_source": {
             "header": "Open Source Software Notice",
             "description": "VRCX is based on open source software. It was possible because of their contribution."

html/src/repository/shared.js

@@ -4,22 +4,6 @@ function transformKey(key) {
     return String(key).toLowerCase();
 }
 
-// function waitSynchronous(promise) {
-//     if (typeof promise !== 'object' || promise === null) {
-//         return promise;
-//     }
-//     console.log('waitSynchronous', promise);
-//     while (true) {
-//         var state = promise.getState();
-//         if (state === 'resolved') {
-//             return promise.get();
-//         }
-//         if (state === 'rejected') {
-//             return null;
-//         }
-//     }
-// }
-
 class SharedRepository {
     remove(key) {
         var _key = transformKey(key);

html/src/vr.pug

@@ -479,7 +479,7 @@ html
                     circle(class="np-progress-circle-stroke" cx="60" cy="60" stroke="white" r="30" fill="transparent" stroke-width="60")
                 .hud-feed
                     div(v-for="feed in hudFeed")
-                        .item(:class="{ friend: feed.isFriend, favorite: feed.isFavorite }") #[span(v-if="feed.isMaster") 👑]#[strong.name(v-text="feed.displayName")]
+                        .item(:class="{ friend: feed.isFriend, favorite: feed.isFavorite }") #[span(v-if="feed.isMaster") 👑]#[strong.name(v-text="feed.displayName" :style="{'color':feed.colour}")]
                             template(v-if="feed.type === 'ChangeAvatar'")
                                 span(style="margin-left:10px;color:#a3a3a3") ChangeAvatar
                                 span(v-if="!feed.inCache" style="color:#aaa;margin-left:10px") #[i.el-icon-download]