Skip to content

Commit

Permalink
Animated emoji support
Browse files Browse the repository at this point in the history
  • Loading branch information
@Natsumi-sama
Natsumi-sama committed Apr 13, 2024
1 parent f8ce89d commit 0dfdc9f
Show file tree
Hide file tree
Showing 4 changed files with 39 additions and 17 deletions.
13 changes: 10 additions & 3 deletions html/src/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19865,7 +19865,7 @@ speechSynthesis.getVoices();
D.secureOrShortName = '';
var tags = [];
if (D.instanceName) {
D.instanceName = D.instanceName.replace(/[^A-Za-z0-9-_]/g, '');
D.instanceName = D.instanceName.replace(/[^A-Za-z0-9]/g, '');
tags.push(D.instanceName);
} else {
var randValue = (99999 * Math.random() + 1).toFixed(0);
Expand Down Expand Up @@ -24630,10 +24630,14 @@ speechSynthesis.getVoices();
var r = new FileReader();
r.onload = function () {
var params = {
tag: 'emoji',
tag: $app.emojiAnimType ? 'emojianimated' : 'emoji',
animationStyle: $app.emojiAnimationStyle.toLowerCase(),
maskTag: 'square'
};
if ($app.emojiAnimType) {
params.frames = $app.emojiAnimFrameCount;
params.framesOverTime = $app.emojiAnimFps;
}
var base64Body = btoa(r.result);
API.uploadEmoji(base64Body, params).then((args) => {
$app.$message({
Expand Down Expand Up @@ -24672,7 +24676,10 @@ speechSynthesis.getVoices();
}
});

$app.data.emojiAnimationStyle = 'Aura';
$app.data.emojiAnimFps = 5;
$app.data.emojiAnimFrameCount = 4;
$app.data.emojiAnimType = false;
$app.data.emojiAnimationStyle = 'Stop';
$app.data.emojiAnimationStyleUrl =
'https://assets.vrchat.com/www/images/emoji-previews/';
$app.data.emojiAnimationStyleList = {
Expand Down
13 changes: 12 additions & 1 deletion html/src/index.pug
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2389,12 +2389,23 @@ html
img(v-lazy="`${emojiAnimationStyleUrl}${fileName}`")
.detail
span.name(v-text="styleName" style="margin-right:100px")
el-checkbox(v-model="emojiAnimType" style="margin-left:10px;margin-right:10px")
span {{ $t('dialog.gallery_icons.emoji_animation_type') }}
template(v-if="emojiAnimType")
span(style="margin-right:10px") {{ $t('dialog.gallery_icons.emoji_animation_fps') }}
el-input(v-model="emojiAnimFps" :min="1" :max="64" size="small" style="width:48px;margin-right:10px")
span(style="margin-right:10px") {{ $t('dialog.gallery_icons.emoji_animation_frame_count') }}
el-input(v-model="emojiAnimFrameCount" :min="1" :max="64" size="small" style="width:48px;margin-right:10px")
br
span {{ $t('dialog.gallery_icons.flipbook_info') }}
br
.x-friend-item(v-if="image.versions && image.versions.length > 0" v-for="image in emojiTable" :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" style="cursor:default")
img.avatar(v-lazy="image.versions[image.versions.length - 1].file.url")
div(style="display:inline-block;margin:5px")
span {{ image.animationStyle }}
span(style="margin-right:5px") {{ image.animationStyle }}
span(v-if="image.framesOverTime" style="margin-right:5px") {{ image.framesOverTime }}fps
span(v-if="image.frames" style="margin-right:5px") {{ image.frames }}frames
div(style="float:right;margin-top:5px")
el-button(type="default" @click="showFullscreenImageDialog(image.versions[image.versions.length - 1].file.url)" size="mini" icon="el-icon-download" circle)
el-button(type="default" @click="deleteEmoji(image.id)" size="mini" icon="el-icon-delete" circle style="margin-left:5px")
Expand Down
6 changes: 5 additions & 1 deletion html/src/localization/en/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1210,7 +1210,11 @@
"refresh": "Refresh",
"upload": "Upload",
"clear": "Clear",
"emoji_animation_styles": "Animation Styles"
"emoji_animation_styles": "Animation Styles",
"emoji_animation_type": "Animated Emoji",
"emoji_animation_fps": "FPS:",
"emoji_animation_frame_count": "Frame Count:",
"flipbook_info": "Select a flipbook texture PNG to use as an animated emoji"
},
"change_content_image": {
"avatar": "Change Avatar Image",
Expand Down
24 changes: 12 additions & 12 deletions html/src/mixins/tabs/search.pug
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ mixin searchTab()
el-button(type="default" @click="clearSearch()" icon="el-icon-delete" circle style="flex:none;margin-left:10px")
el-tabs(ref="searchTab" type="card" style="margin-top:15px")
el-tab-pane(:label="$t('view.search.user.header')" v-loading="isSearchUserLoading" style="min-height:60px")
.x-friend-list
.x-friend-list(style="min-height:500px")
.x-friend-item(v-for="user in searchUserResults" :key="user.id" @click="showUserDialog(user.id)")
template(v-once)
.avatar
Expand All @@ -16,15 +16,15 @@ mixin searchTab()
span.extra(v-if="randomUserColours" v-text="user.$trustLevel" :class="user.$trustClass")
span.extra(v-else v-text="user.$trustLevel" :style="{'color':user.$userColour}")
el-button-group(style="margin-top:15px")
el-button(v-if="searchUserParams.offset" @click="moreSearchUser(-1)" icon="el-icon-back" size="small") {{ $t('view.search.prev_page') }}
el-button(v-if="searchUserResults.length" @click="moreSearchUser(1)" icon="el-icon-right" size="small") {{ $t('view.search.next_page') }}
el-button(:disabled="!searchUserParams.offset" @click="moreSearchUser(-1)" icon="el-icon-back" size="small") {{ $t('view.search.prev_page') }}
el-button(:disabled="searchUserResults.length < 10" @click="moreSearchUser(1)" icon="el-icon-right" size="small") {{ $t('view.search.next_page') }}
el-tab-pane(:label="$t('view.search.world.header')" v-loading="isSearchWorldLoading" style="min-height:60px")
el-dropdown(@command="(row) => searchWorld(row)" size="small" trigger="click" style="margin-bottom:15px")
el-button(size="small") {{ $t('view.search.world.category') }} #[i.el-icon-arrow-down.el-icon--right]
el-dropdown-menu(#default="dropdown")
el-dropdown-item(v-for="row in API.cachedConfig.dynamicWorldRows" :key="row.index" v-text="row.name" :command="row")
el-checkbox(v-model="searchWorldLabs" style="margin-left:10px") {{ $t('view.search.world.community_lab') }}
.x-friend-list
.x-friend-list(style="min-height:500px")
.x-friend-item(v-for="world in searchWorldResults" :key="world.id" @click="showWorldDialog(world.id)")
template(v-once)
.avatar
Expand All @@ -34,8 +34,8 @@ mixin searchTab()
span.extra(v-if="world.occupants") {{ world.authorName }} ({{ world.occupants }})
span.extra(v-else v-text="world.authorName")
el-button-group(style="margin-top:15px")
el-button(v-if="searchWorldParams.offset" @click="moreSearchWorld(-1)" icon="el-icon-back" size="small") {{ $t('view.search.prev_page') }}
el-button(v-if="searchWorldResults.length >= 10" @click="moreSearchWorld(1)" icon="el-icon-right" size="small") {{ $t('view.search.next_page') }}
el-button(:disabled="!searchWorldParams.offset" @click="moreSearchWorld(-1)" icon="el-icon-back" size="small") {{ $t('view.search.prev_page') }}
el-button(:disabled="searchWorldResults.length < 10" @click="moreSearchWorld(1)" icon="el-icon-right" size="small") {{ $t('view.search.next_page') }}
el-tab-pane(:label="$t('view.search.avatar.header')" v-loading="isSearchAvatarLoading" style="min-height:60px")
el-dropdown(v-if="avatarRemoteDatabaseProviderList.length > 1" trigger="click" @click.native.stop size="mini" style="margin-right:5px")
el-button(size="small") {{ $t('view.search.avatar.search_provider') }} #[i.el-icon-arrow-down.el-icon--right]
Expand All @@ -56,7 +56,7 @@ mixin searchTab()
el-radio(label="name") {{ $t('view.search.avatar.sort_name') }}
el-radio(label="update") {{ $t('view.search.avatar.sort_update') }}
el-radio(label="created") {{ $t('view.search.avatar.sort_created') }}
.x-friend-list(style="margin-top:20px")
.x-friend-list(style="margin-top:20px;min-height:500px")
.x-friend-item(v-for="avatar in searchAvatarPage" :key="avatar.id" @click="showAvatarDialog(avatar.id)")
template(v-once)
.avatar
Expand All @@ -69,10 +69,10 @@ mixin searchTab()
span.extra(v-text="avatar.releaseStatus" v-else)
span.extra(v-text="avatar.authorName")
el-button-group(style="margin-top:15px")
el-button(v-if="searchAvatarPageNum" @click="moreSearchAvatar(-1)" icon="el-icon-back" size="small") {{ $t('view.search.prev_page') }}
el-button(v-if="searchAvatarResults.length > 10 && (searchAvatarPageNum + 1) * 10 < searchAvatarResults.length" @click="moreSearchAvatar(1)" icon="el-icon-right" size="small") {{ $t('view.search.next_page') }}
el-button(:disabled="!searchAvatarPageNum" @click="moreSearchAvatar(-1)" icon="el-icon-back" size="small") {{ $t('view.search.prev_page') }}
el-button(:disabled="searchAvatarResults.length < 10 || (searchAvatarPageNum + 1) * 10 >= searchAvatarResults.length" @click="moreSearchAvatar(1)" icon="el-icon-right" size="small") {{ $t('view.search.next_page') }}
el-tab-pane(:label="$t('view.search.group.header')" v-loading="isSearchGroupLoading" style="min-height:60px")
.x-friend-list
.x-friend-list(style="min-height:500px")
.x-friend-item(v-for="group in searchGroupResults" :key="group.id" @click="showGroupDialog(group.id)")
template(v-once)
.avatar
Expand All @@ -84,5 +84,5 @@ mixin searchTab()
span(style="margin-left:5px;color:#909399;font-weight:normal;font-family:monospace;font-size:12px") {{ group.shortCode }}.{{ group.discriminator }}
span.extra(v-text="group.description")
el-button-group(style="margin-top:15px")
el-button(v-if="searchGroupParams.offset" @click="moreSearchGroup(-1)" icon="el-icon-back" size="small") {{ $t('view.search.prev_page') }}
el-button(v-if="searchGroupResults.length" @click="moreSearchGroup(1)" icon="el-icon-right" size="small") {{ $t('view.search.next_page') }}
el-button(:disabled="!searchGroupParams.offset" @click="moreSearchGroup(-1)" icon="el-icon-back" size="small") {{ $t('view.search.prev_page') }}
el-button(:disabled="searchGroupResults.length < 10" @click="moreSearchGroup(1)" icon="el-icon-right" size="small") {{ $t('view.search.next_page') }}

0 comments on commit 0dfdc9f

Please sign in to comment.