dan/Nertivia-Client
1
0
Fork 0
mirror of https://github.com/danbulant/Nertivia-Client synced 2026-06-24 17:11:43 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

made chances to emoji upload and more

Browse source
This commit is contained in:
unknown 2020-01-13 11:50:34 +00:00
parent a6d7ef79d5
commit a54e494ec7
4 changed files with 76 additions and 88 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
src/components/app/MessageTemplate.vue
View file

@ -1,5 +1,9 @@
<template> <template>
<div class="container" @mouseover="hover = true" @mouseleave="hover = false"> <div
class="container"
@mouseover="mouseOverEvent"
@mouseleave="hover = false"
>
<div <div
v-if="!type || type === 0" v-if="!type || type === 0"
:class="{ :class="{
@ -14,7 +18,7 @@
<div class="avatar"> <div class="avatar">
<profile-picture <profile-picture
:admin="$props.admin" :admin="$props.admin"
:url="`${userAvatar}${hover ? '' : '?type=webp'}`" :url="`${userAvatar}${hover || !isGif ? '' : '?type=webp'}`"
size="50px" size="50px"
:hover="true" :hover="true"
@click.native="openUserInformation" @click.native="openUserInformation"
@ -166,10 +170,16 @@ export default {
}, },
data() { data() {
return { return {
hover: false hover: false,
isGif: false
}; };
}, },
methods: { methods: {
mouseOverEvent() {
if (this.isGif) {
this.hover = true;
}
},
openContextMenu(event) { openContextMenu(event) {
const x = event.clientX; const x = event.clientX;
const y = event.clientY; const y = event.clientY;
@ -261,6 +271,7 @@ export default {
} }
}, },
mounted() { mounted() {
this.isGif = this.userAvatar.endsWith(".gif");
const files = this.files; const files = this.files;
if (!files || files.length === 0 || !files[0].dimensions) return undefined; if (!files || files.length === 0 || !files[0].dimensions) return undefined;
this.imageSize(); this.imageSize();

2
src/components/app/Popouts/Popouts/ServerSettingsPanels/General.vue
View file

@ -136,13 +136,13 @@ export default {
const file = event.target.files[0]; const file = event.target.files[0];
const _this = this; const _this = this;
const maxSize = 2092000; const maxSize = 2092000;
event.target.value = "";
if (file.size > maxSize) { if (file.size > maxSize) {
return this.$store.dispatch( return this.$store.dispatch(
"setGenericMessage", "setGenericMessage",
"Image is larger than 2MB" "Image is larger than 2MB"
); );
} }
event.target.value = "";
const allowedFormats = [".png", ".jpeg", ".gif", ".jpg"]; const allowedFormats = [".png", ".jpeg", ".gif", ".jpg"];
if (!allowedFormats.includes(path.extname(file.name).toLowerCase())) { if (!allowedFormats.includes(path.extname(file.name).toLowerCase())) {
return this.$store.dispatch( return this.$store.dispatch(

128
src/components/app/Popouts/Popouts/SettingsPanels/ManageEmojis.vue
View file

@ -2,7 +2,7 @@
<div class="manage-emoji-panel"> <div class="manage-emoji-panel">
<div class="info"> <div class="info">
<div class="title"> <div class="title">
Upload your own pretty emojis for free! Emojis must be 1MB or less. Upload your own pretty emojis for free! Emojis must be 3MB or less.
(png, jpg, gif) (png, jpg, gif)
</div> </div>
<div class="button" @click="addEmojiBtn"> <div class="button" @click="addEmojiBtn">
@ -36,23 +36,6 @@
class="hidden" class="hidden"
@change="emojiBrowse" @change="emojiBrowse"
/> />
<!-- <div class="option" @click="changePassword">Change Password</div> -->
<div v-if="alert.show" class="alert-outer">
<div class="alert">
<div class="alert-title">
Error
</div>
<div class="alert-content">
{{ alert.content }}
</div>
<div class="alert-buttons">
<div class="alert-button" @click="alert.show = false">
Okay
</div>
</div>
</div>
</div>
</div> </div>
</template> </template>
@ -67,14 +50,13 @@ export default {
components: {}, components: {},
data() { data() {
return { return {
alert: {
content: "",
show: false
},
domain: config.domain + "/files/" domain: config.domain + "/files/"
}; };
}, },
methods: { methods: {
errorBox(msg) {
return this.$store.dispatch("setGenericMessage", msg);
},
keyDownEvent(event) { keyDownEvent(event) {
const keyCode = event.keyCode; const keyCode = event.keyCode;
if (keyCode == 13) { if (keyCode == 13) {
@ -83,61 +65,66 @@ export default {
}, },
async blurEvent(emojiID, event) { async blurEvent(emojiID, event) {
// send put request // send put request
const { ok, error } = await customEmoji.put({ const { ok } = await customEmoji.put({
emojiID, emojiID,
name: event.target.value name: event.target.value
}); });
if (!ok) { if (!ok) {
this.alert.content = this.errorBox("Something weng wrong. Try again later.");
"Upload failed - " + error.response.data.message || return;
"Something weng wrong. Try again later.";
return (this.alert.show = true);
} }
}, },
onProgress(percent) {
//update vue
console.log("emoji upload progress: ", percent);
},
async emojiBrowse(event) { async emojiBrowse(event) {
const file = event.target.files[0]; const file = event.target.files[0];
event.target.value = ""; event.target.value = "";
const allowedFormats = [".png", ".jpeg", ".gif", ".jpg"]; const allowedFormats = [".png", ".jpeg", ".gif", ".jpg"];
if (!allowedFormats.includes(path.extname(file.name).toLowerCase())) { if (!allowedFormats.includes(path.extname(file.name).toLowerCase())) {
this.alert.content = "Upload failed - Unsupported image file."; this.errorBox("Upload failed - Unsupported image file.");
return (this.alert.show = true); return;
} else if (file.size >= 1048576) { } else if (file.size >= 3048576) {
// 1048576 = 1mb // 3048576 = 3mb
this.alert.content = this.errorBox(
"Upload failed - Image size must be less than 1 megabytes."; "Upload failed - Image size must be less than 1 megabytes."
return (this.alert.show = true); );
return;
} }
const formData = new FormData();
//check if emoji name is already used by twemoji
const fileName = path.basename(file.name, path.extname(file.name));
const emojiExists = emojiParser.allEmojis.find(e => let reader = new FileReader();
e.shortcodes.find(ee => ee === fileName.toLowerCase()) reader.readAsDataURL(file);
); const _this = this;
if (emojiExists) { reader.onload = async function() {
formData.append( //check if emoji name is already used by twemoji
"emoji", const fileName = path.basename(file.name, path.extname(file.name));
file,
`${fileName.substring(0, 28)}-1${path.extname(file.name)}` const emojiExists = emojiParser.allEmojis.find(e =>
e.shortcodes.find(ee => ee === fileName.toLowerCase())
); );
} else {
formData.append( let finalEmojiName = () => {
"emoji", if (emojiExists) {
file, return `${fileName.substring(0, 28)}-1`;
`${fileName.substring(0, 30)}${path.extname(file.name)}` } else {
); return fileName.substring(0, 30);
} }
const { ok, error } = await customEmoji.post(formData, this.onProgress); };
if (!ok) {
this.alert.content = const { ok, error } = await customEmoji.post({
"Upload failed - " + error.response.data.message || name: finalEmojiName(),
"Something weng wrong. Try again later."; avatar: reader.result
return (this.alert.show = true); });
} if (!ok) {
if (error.response && error.response.data) {
_this.errorBox(error.response.data.message);
} else {
_this.errorBox("Something went wrong. Try again later.");
}
return;
}
};
reader.onerror = function(error) {
console.log("Error: ", error);
_this.errorBox("Something went wrong. Try again later.");
};
}, },
addEmojiBtn() { addEmojiBtn() {
if (!this.GDriveLinked) { if (!this.GDriveLinked) {
@ -149,17 +136,19 @@ export default {
this.$refs.emojiBrowser.click(); this.$refs.emojiBrowser.click();
}, },
async removeEmoji(emojiID) { async removeEmoji(emojiID) {
const { ok, error } = await customEmoji.delete(emojiID); const { ok } = await customEmoji.delete(emojiID);
if (!ok) { if (!ok) {
this.alert.content = this.errorBox("Something weng wrong. Try again later.");
"Upload failed - " + error.response.data.message || return;
"Something weng wrong. Try again later.";
return (this.alert.show = true);
} }
} }
}, },
computed: { computed: {
...mapState("settingsModule", ["GDriveLinked", "customEmojis"]) ...mapState("settingsModule", ["GDriveLinked"]),
customEmojis() {
const customEmojis = [...this.$store.state.settingsModule.customEmojis];
return customEmojis ? customEmojis.reverse() : [];
}
} }
}; };
</script> </script>
@ -219,6 +208,7 @@ input:focus {
width: 100%; width: 100%;
height: 100%; height: 100%;
margin-bottom: 20px; margin-bottom: 20px;
overflow: hidden;
} }
.emojis-list { .emojis-list {

17
src/services/customEmoji.js
View file

@ -1,21 +1,8 @@
import { instance, wrapper } from "./Api"; import { instance, wrapper } from "./Api";
export default { export default {
post(data, onProgress) { post(data) {
const url = `/settings/emoji`; return wrapper(instance().post("/settings/emoji", data));
let config = {
onUploadProgress(progressEvent) {
var percentCompleted = Math.round(
(progressEvent.loaded * 100) / progressEvent.total
);
// execute the callback
if (onProgress) onProgress(percentCompleted);
return percentCompleted;
}
};
return wrapper(instance().post(url, data, config));
}, },
delete(emojiID) { delete(emojiID) {
return wrapper(instance().delete(`/settings/emoji`, { data: { emojiID } })); return wrapper(instance().delete(`/settings/emoji`, { data: { emojiID } }));