jschulthess/qortal-ui
1
0
Fork 0
forked from Qortal/qortal-ui
Code Issues Pull Requests Projects Releases Wiki Activity

Completed UI functionality of GIFS

Browse Source
This commit is contained in:
Justin Ferrari 2023-02-14 23:18:59 +02:00
parent 718d9e2700
commit cb4e5f289a
9 changed files with 699 additions and 241 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
qortal-ui-core/language/us.json
View File

@ -572,23 +572,35 @@
"cchange63": "Enter Enabled",
"cchange64": "Enter Disabled",
"cchange65": "Please enter a recipient",
"cchange66": "Cannot fetch replied-to message. Message is too old.",
"cchange80": "Gif Explorer",
"cchange81": "Explore Collections",
"cchange82": "My Collections",
"cchange83": "Subscribed Collections",
"cchange84": "Upload your gif files",
"cchange85": "File should be .Gif",
"cchange86": "Upload Collection",
"cchange87": "A collection name is required!",
"cchange88": "Collection Name",
"cchange89": "Gif Collection Uploaded Successfully!",
"cchange90": "Gifs uploading, please wait...",
"cchange91": "Something went wrong! Please try changing tabs and coming back.",
"cchange92": "You currently have no collections.",
"cchange93": "You currently have no subscribed collections.",
"cchange94": "Error fetching image. Retrying...",
"cchange95": "Failed to fetch image! Please visit another collection and try again!"
"cchange66": "Cannot fetch replied-to message. Message is too old."
},
"gifs": {
"gchange1": "Gif Explorer",
"gchange2": "Explore Collections",
"gchange3": "My Collections",
"gchange4": "Subscribed Collections",
"gchange5": "Upload your gif files",
"gchange6": "File should be .Gif",
"gchange7": "Upload Collection",
"gchange8": "A collection name is required!",
"gchange9": "Collection Name",
"gchange10": "Gif Collection Uploaded Successfully!",
"gchange11": "Gifs uploading, please wait...",
"gchange12": "Something went wrong! Please try changing tabs and coming back.",
"gchange13": "You currently have no collections.",
"gchange14": "You currently have no subscribed collections.",
"gchange15": "Error fetching GIF. Retrying...",
"gchange16": "Failed to fetch GIF! Please visit another collection and try again!",
"gchange17": "Subscribe to this collection",
"gchange18": "Searching for collections...",
"gchange19": "No collections found!",
"gchange20": "Subscribed to collection successfully!",
"gchange21": "Unsubscribed to collection successfully!",
"gchange22": "Unsubscribe from this collection",
"gchange23": "Your gif collection cannot contain two gifs with the same name!",
"gchange24": "This collection name is already taken. Try another name!",
"gchange25": "GIF (click to view)",
"gchange26": "A name is needed to access and send GIF files"
},
"welcomepage": {
"wcchange1": "Welcome to Q-Chat",

44
qortal-ui-plugins/plugins/core/components/ChatGifs/ChatGifs-css.js
View File

@ -462,10 +462,54 @@ background-color: #03a8f475;
.gifs-loading-message {
font-family: Montserrat, sans-serif;
font-size: 20px;
font-weight: 600;
color: var(--chat-bubble-msg-color);
margin: 0 0 10px 0;
text-align: center;
user-select: none;
}
.subscribe-button {
position: absolute;
bottom: 3px;
left: 50%;
transform: translateX(-50%);
font-family: Raleway, sans-serif;
font-weight: 500;
font-size: 14px;
background-color: var(--mdc-theme-primary);
border: none;
border-radius: 8px;
outline: none;
padding: 5px 10px;
transition: all 0.3s cubic-bezier(0.5, 1, 0.89, 1);
}
.subscribe-button:hover {
cursor: pointer;
box-shadow: 0px 3px 4px 0px hsla(0,0%,0%,0.14), 0px 3px 3px -2px hsla(0,0%,0%,0.12), 0px 1px 8px 0px hsla(0,0%,0%,0.2);
}
.unsubscribe-button {
position: absolute;
width: max-content;
bottom: 3px;
left: 50%;
transform: translateX(-50%);
font-family: Raleway, sans-serif;
font-weight: 500;
font-size: 14px;
background-color: #f44336;
border: none;
border-radius: 8px;
outline: none;
padding: 5px 10px;
transition: all 0.3s cubic-bezier(0.5, 1, 0.89, 1);
}
.unsubscribe-button:hover {
cursor: pointer;
box-shadow: 0px 3px 4px 0px hsla(0,0%,0%,0.14), 0px 3px 3px -2px hsla(0,0%,0%,0.12), 0px 1px 8px 0px hsla(0,0%,0%,0.2);
}
`;

441
qortal-ui-plugins/plugins/core/components/ChatGifs/ChatGifs.js
View File

@ -28,6 +28,10 @@ currentCollection: {type: String},
isLoading: {type: String},
newCollectionName: {type: String},
editor: {type: Object},
isSubscribed: { type: Boolean },
setGifsLoading: { attribute: false },
sendMessage: { attribute: false },
setOpenGifModal: { attribute: false }
};
}
@ -36,22 +40,133 @@ editor: {type: Object},
constructor() {
super();
this.uid = new ShortUniqueId();
this.selectedAddress =
window.parent.reduxStore.getState().app.selectedAddress;
this.selectedAddress = window.parent.reduxStore.getState().app.selectedAddress;
this.myGifCollections = [];
this.mySubscribedCollections = [];
this.exploreCollections = [];
this.myAccountName = '';
this.gifsToBeAdded = [];
// mode can be 'myCollection', 'newCollection', 'explore', 'subscribedCollection'
this.mode = 'myCollection';
this.currentCollection = null;
this.pageNumber = 0;
this.isLoading = false;
this.isSubscribed = false;
this.newCollectionName = '';
this.getAllCollections = this.getAllCollections.bind(this);
}
async firstUpdated() {
const tooltip = this.shadowRoot.querySelector('vaadin-tooltip');
const overlay = tooltip.shadowRoot.querySelector(
'vaadin-tooltip-overlay'
);
overlay.shadowRoot.getElementById('overlay').style.cssText =
'background-color: transparent; border-radius: 10px; box-shadow: rgb(50 50 93 / 25%) 0px 2px 5px -1px, rgb(0 0 0 / 30%) 0px 1px 3px -1px';
overlay.shadowRoot.getElementById('content').style.cssText =
'background-color: var(--gif-tooltip-bg); color: var(--chat-bubble-msg-color); text-align: center; padding: 20px 10px; font-family: Roboto, sans-serif; letter-spacing: 0.3px; font-weight: 300; font-size: 13.5px; transition: all 0.3s ease-in-out;';
try {
this.isLoading = true;
const myCollections = await this.getMyGifCollections();
const savedCollections = await this.getSavedCollections();
const allCollections = await this.getAllCollections();
if (!Array.isArray(myCollections) && !Array.isArray(savedCollections)) {
parentEpml.request('showSnackBar', get('gifs.gchange12'));
return;
}
await new Promise((res) => {
setTimeout(() => {
res();
}, 1000)
});
this.myGifCollections = myCollections;
this.mySubscribedCollections = savedCollections;
this.exploreCollections = allCollections;
} catch (error) {
console.error(error);
} finally {
this.isLoading = false;
}
}
async updated(changedProperties) {
if (changedProperties && changedProperties.has('mode')) {
const mode = this.mode;
if (mode === 'myCollection') {
try {
this.myGifCollections = [];
this.isLoading = true;
const collections = await this.getMyGifCollections();
await new Promise((res) => {
setTimeout(() => {
res();
}, 1000)
});
this.myGifCollections = collections;
} catch (error) {
console.error(error);
} finally {
this.isLoading = false;
}
}
if (mode === 'explore') {
try {
this.exploreCollections = [];
this.isLoading = true;
const allCollections = await this.getAllCollections();
await new Promise((res) => {
setTimeout(() => {
res();
}, 1000)
});
this.exploreCollections = allCollections;
} catch (error) {
console.error(error);
} finally {
this.isLoading = false;
}
}
if (mode === 'subscribedCollection') {
try {
this.mySubscribedCollections = [];
this.isLoading = true;
const savedCollections = await this.getSavedCollections();
await new Promise((res) => {
setTimeout(() => {
res();
}, 1000)
});
this.mySubscribedCollections = savedCollections;
} catch (error) {
console.error(error);
} finally {
this.isLoading = false;
}
}
}
if (changedProperties && changedProperties.has('currentCollection')) {
if (this.mode === 'explore') {
console.log(this.mySubscribedCollections, "subbed collections here");
const subbedCollection = this.mySubscribedCollections.find((collection) => ((collection.name === this.currentCollection.name) && (collection.identifier === this.currentCollection.identifier)));
console.log({subbedCollection});
if (subbedCollection) {
this.isSubscribed = true;
} else {
this.isSubscribed = false;
}
}
}
}
async structureCollections(gifCollections) {
const userName = await this.getName(this.selectedAddress.address);
if (!userName) {
return;
}
try {
const myNode =
window.parent.reduxStore.getState().app.nodeConfig.knownNodes[
@ -73,7 +188,12 @@ editor: {type: Object},
};
if (metaData.files) {
const metaDataArray = metaData.files.map((data) => {
return `${nodeUrl}/arbitrary/GIF_REPOSITORY/${this.myAccountName}/${collection.identifier}?filepath=${data}`;
return {
url: `${nodeUrl}/arbitrary/GIF_REPOSITORY/${this.myAccountName}/${collection.identifier}?filepath=${data}`,
filePath: data,
identifier: collection.identifier,
name: this.myAccountName
};
});
collectionObj = {
@ -190,8 +310,8 @@ editor: {type: Object},
const gifCollectionWithMetaData = await this.structureCollections(
getAllGifCollections
);
this.exploreCollections = gifCollectionWithMetaData;
this.pageNumber = this.pageNumber + 1;
return gifCollectionWithMetaData;
}
async getSavedCollections() {
@ -222,90 +342,6 @@ editor: {type: Object},
return savedCollectionsWithMetaData;
}
async firstUpdated() {
const tooltip = this.shadowRoot.querySelector('vaadin-tooltip');
const overlay = tooltip.shadowRoot.querySelector(
'vaadin-tooltip-overlay'
);
overlay.shadowRoot.getElementById('overlay').style.cssText =
'background-color: transparent; border-radius: 10px; box-shadow: rgb(50 50 93 / 25%) 0px 2px 5px -1px, rgb(0 0 0 / 30%) 0px 1px 3px -1px';
overlay.shadowRoot.getElementById('content').style.cssText =
'background-color: var(--gif-tooltip-bg); color: var(--chat-bubble-msg-color); text-align: center; padding: 20px 10px; font-family: Roboto, sans-serif; letter-spacing: 0.3px; font-weight: 300; font-size: 13.5px; transition: all 0.3s ease-in-out;';
try {
this.isLoading = true;
const myCollections = await this.getMyGifCollections();
const savedCollections = await this.getSavedCollections();
if (!Array.isArray(myCollections) && !Array.isArray(savedCollections)) {
parentEpml.request('showSnackBar', get('chatpage.cchange91'));
return;
}
await new Promise((res) => {
setTimeout(() => {
res();
}, 1000)
});
this.myGifCollections = myCollections;
this.mySubscribedCollections = savedCollections;
await this.getAllCollections();
this.isLoading = false;
} catch (error) {
this.isLoading = false;
console.error(error);
}
}
async updated(changedProperties) {
if (changedProperties && changedProperties.has('mode')) {
const mode = this.mode;
if (mode === 'myCollection') {
try {
this.myGifCollections = [];
this.isLoading = true;
const collections = await this.getMyGifCollections();
await new Promise((res) => {
setTimeout(() => {
res();
}, 1000)
});
this.myGifCollections = collections;
this.isLoading = false;
} catch (error) {
this.isLoading = false;
}
}
if (mode === 'explore') {
try {
this.isLoading = true;
await this.getAllCollections();
this.isLoading = false;
} catch (error) {
this.isLoading = false;
}
}
if (mode === 'subscribedCollection') {
try {
this.mySubscribedCollections = [];
this.isLoading = true;
const savedCollections = await this.getSavedCollections();
await new Promise((res) => {
setTimeout(() => {
res();
}, 1000)
});
this.mySubscribedCollections = savedCollections;
this.isLoading = false;
} catch (error) {
this.isLoading = false;
}
}
}
}
async getName(recipient) {
try {
const getNames = await parentEpml.request('apiCall', {
@ -323,6 +359,26 @@ editor: {type: Object},
}
}
removeDotGIF(arr) {
return arr.map(obj => {
const newObj = { ...obj };
if (newObj.hasOwnProperty('name') && newObj.name.endsWith('.gif')) {
newObj.name = newObj.name.slice(0, -4);
}
return newObj;
});
}
addDotGIF(arr) {
return arr.map(obj => {
const newObj = { ...obj };
if (newObj.hasOwnProperty('name') && !newObj.name.endsWith('.gif')) {
newObj.name += '.gif';
}
return newObj;
});
}
addGifs(gifs) {
const mapGifs = gifs.map((file) => {
return {
@ -330,28 +386,59 @@ editor: {type: Object},
name: file.name,
};
});
this.gifsToBeAdded = [...this.gifsToBeAdded, ...mapGifs];
const removedExtensions = this.removeDotGIF(mapGifs);
this.gifsToBeAdded = [...this.gifsToBeAdded, ...removedExtensions];
}
async uploadGifCollection() {
if (!this.newCollectionName) {
parentEpml.request('showSnackBar', get('chatpage.cchange87'));
parentEpml.request('showSnackBar', get('gifs.gchange8'));
return;
}
try {
this.setGifsLoading(true);
this.isLoading = true;
const userName = await this.getName(this.selectedAddress.address);
const doesNameExist = await parentEpml.request('apiCall', {
const userName = await this.getName(this.selectedAddress.address);
const doesNameExist = await parentEpml.request('apiCall', {
url: `/arbitrary/resources?service=GIF_REPOSITORY&limit=0&name=${userName}&identifier=${this.newCollectionName}`,
});
if (doesNameExist.length !== 0) {
parentEpml.request('showSnackBar', get('chatpage.cchange87'));
this.isLoading = false;
this.setGifsLoading(false);
if (!userName) {
parentEpml.request('showSnackBar', get('chatpage.cchange27'));
this.setGifsLoading(false);
this.isLoading = false;
return;
}
if (doesNameExist.length !== 0) {
parentEpml.request('showSnackBar', get('gifs.gchange24'));
this.isLoading = false;
this.setGifsLoading(false);
return;
}
function validateDuplicateGifNames(arr) {
let names = [];
for (let i = 0; i < arr.length; i++) {
if (names.includes(arr[i].name)) {
return false;
}
names.push(arr[i].name);
}
return true;
}
let result = validateDuplicateGifNames(this.gifsToBeAdded);
if (!result) {
parentEpml.request('showSnackBar', get('gifs.gchange23'));
this.isLoading = false;
this.setGifsLoading(false);
return;
}
const addedGifExtensionsArr = this.addDotGIF(this.gifsToBeAdded);
function blobToBase64(blob) {
return new Promise((resolve, _) => {
const reader = new FileReader();
@ -360,37 +447,24 @@ editor: {type: Object},
});
}
const zipFileWriter = new zip.BlobWriter('application/zip');
// Creates a TextReader object storing the text of the entry to add in the zip
// (i.e. "Hello world!").
const helloWorldReader = new zip.TextReader('Hello world!');
// Creates a ZipWriter object writing data via `zipFileWriter`, adds the entry
// "hello.txt" containing the text "Hello world!" via `helloWorldReader`, and
// closes the writer.
const zipWriter = new zip.ZipWriter(zipFileWriter, {
bufferedWrite: true,
});
for (let i = 0; i < this.gifsToBeAdded.length; i++) {
for (let i = 0; i < addedGifExtensionsArr.length; i++) {
await zipWriter.add(
this.gifsToBeAdded[i].name,
new zip.BlobReader(this.gifsToBeAdded[i].file)
addedGifExtensionsArr[i].name,
new zip.BlobReader(addedGifExtensionsArr[i].file)
);
}
await zipWriter.close();
const zipFileBlob = await zipFileWriter.getData();
const blobTobase = await blobToBase64(zipFileBlob);
if (!userName) {
parentEpml.request('showSnackBar', get('chatpage.cchange27'));
this.setGifsLoading(false);
this.isLoading = false;
return;
}
const id = this.uid();
const identifier = `gif_${id}`;
await publishData({
registeredName: userName,
file: blobTobase.split(',')[1],
@ -421,21 +495,30 @@ editor: {type: Object},
clearInterval(interval);
res();
}
} catch (error) {}
} catch (error) {
console.error(error);
this.isLoading = false;
this.setGifsLoading(false);
this.mode = 'myCollection';
this.gifsToBeAdded = [];
this.newCollectionName = '';
parentEpml.request('showSnackBar', get('gifs.gchange12'));
}
stop = false;
}
};
interval = setInterval(getAnswer, 5000);
});
saveAs(zipFileBlob, 'zipfile');
this.isLoading = false;
this.setGifsLoading(false);
this.mode = 'myCollection';
this.gifsToBeAdded = [];
this.newCollectionName = '';
parentEpml.request('showSnackBar', get('chatpage.cchange89'));
this.isLoading = false;
this.setGifsLoading(false);
this.mode = 'myCollection';
this.gifsToBeAdded = [];
this.newCollectionName = '';
parentEpml.request('showSnackBar', get('gifs.gchange10'));
} catch (error) {
console.log(error);
parentEpml.request('showSnackBar', get('gifs.gchange12'));
}
}
@ -448,15 +531,36 @@ editor: {type: Object},
this.gifsToBeAdded = [];
}
async subscribeToCollection() {
await this.addCollectionToList(
`${this.currentCollection.name}/${this.currentCollection.identifier}`
);
parentEpml.request('showSnackBar', get('gifs.gchange20'));
this.isSubscribed = true;
const savedCollections = await this.getSavedCollections();
this.mySubscribedCollections = savedCollections;
}
async unsubscribeToCollection() {
await this.removeCollectionFromList(
`${this.currentCollection.name}/${this.currentCollection.identifier}`
);
parentEpml.request('showSnackBar', get('gifs.gchange21'));
this.isSubscribed = false;
const savedCollections = await this.getSavedCollections();
this.mySubscribedCollections = savedCollections;
}
render() {
console.log(8, "chat gifs here");
console.log('this.currentCollection', this.currentCollection);
console.log(31, 'chat gifs here');
return html`
<div class="gifs-container">
<div class="gif-explorer-container">
<vaadin-icon
style=${
this.mode === 'newCollection'
(this.mode === 'newCollection' ||
(this.mode === 'explore' && this.currentCollection))
? 'display: none;'
: 'display: block;'
}
@ -480,6 +584,7 @@ editor: {type: Object},
} else if (this.mode === 'explore' && this.currentCollection) {
this.mode = 'explore';
this.currentCollection = null;
this.isSubscribed = false;
} else {
this.currentCollection = null;
}
@ -489,7 +594,7 @@ editor: {type: Object},
</div>
<p class="gif-explorer-title">
${translate(
'chatpage.cchange80'
'gifs.gchange1'
)}
</p>
<vaadin-icon
@ -512,7 +617,7 @@ editor: {type: Object},
position="top"
hover-delay=${400}
hide-delay=${1}
text=${get('chatpage.cchange81')}>
text=${get('gifs.gchange2')}>
</vaadin-tooltip>
</div>
<div
@ -534,7 +639,7 @@ editor: {type: Object},
this.mode = 'myCollection';
this.currentCollection = null;
}}>
${translate('chatpage.cchange82')}
${translate('gifs.gchange3')}
</div>
<div
id="subscribed-collections-button"
@ -551,7 +656,7 @@ editor: {type: Object},
this.currentCollection = null;
}}
>
${translate('chatpage.cchange83')}
${translate('gifs.gchange4')}
</div>
</div>
</div>
@ -563,7 +668,7 @@ editor: {type: Object},
: ''}
${(this.myGifCollections.length === 0 && !this.isLoading) ? (
html`
<div class='no-collections'>${translate('chatpage.cchange92')}</div>
<div class='no-collections'>${translate('gifs.gchange13')}</div>
`
) : (
html`
@ -590,7 +695,7 @@ editor: {type: Object},
: ''}
${(this.mySubscribedCollections.length === 0 && !this.isLoading) ? (
html`
<div class='no-collections'>${translate('chatpage.cchange93')}</div>
<div class='no-collections'>${translate('gifs.gchange14')}</div>
`
) : (
html`
@ -614,10 +719,14 @@ editor: {type: Object},
${this.mode === 'explore' && !this.currentCollection
? html`
${this.isLoading === true
? html`<div class="lds-circle"><div></div></div>`
: ''}
<chat-gifs-explore
? html`
<div class="lds-circle"><div></div></div>
`
: html`
<chat-gifs-explore
currentCollection=${this.currentCollection}
.getAllCollections=${(val) =>
this.getAllCollections(val)}
.getMoreExploreGifs=${(val) =>
this.getMoreExploreGifs(val)}
.exploreCollections=${this
@ -625,6 +734,8 @@ editor: {type: Object},
.setCurrentCollection=${(val) =>
this.setCurrentCollection(val)}
></chat-gifs-explore>
`
}
`
: ''
}
@ -634,8 +745,10 @@ editor: {type: Object},
${this.currentCollection.gifUrls.map((gif) => {
return html`
<image-component
.sendMessage=${(val) => this.sendMessage(val)}
.setOpenGifModal=${(val) => this.setOpenGifModal(val)}
.class=${'gif-image'}
.url=${gif}
.gif=${gif}
.alt=${'gif-image'}>
</image-component>
`;
@ -651,8 +764,10 @@ editor: {type: Object},
${this.currentCollection.gifUrls.map((gif) => {
return html`
<image-component
.sendMessage=${(val) => this.sendMessage(val)}
.setOpenGifModal=${(val) => this.setOpenGifModal(val)}
.class=${'gif-image'}
.url=${gif}
.gif=${gif}
.alt=${'gif-image'}>
</image-component>
`;
@ -662,28 +777,38 @@ editor: {type: Object},
: ''
}
${this.currentCollection && this.mode === 'explore'
? html`
<button
@click=${() => {
this.addCollectionToList(
`${this.currentCollection.name}/${this.currentCollection.identifier}`
);
}}
>
Subscribe to this collection
</button>
? html`
<div class="collection-gifs">
${this.currentCollection.gifUrls.map((gif) => {
return html`
<img
onerror=${(e) => {
e.target.src = gif;
}}
src=${gif}
style="width: 50px; height: 50px"
/>
<image-component
.sendMessage=${(val) => this.sendMessage(val)}
.setOpenGifModal=${(val) => this.setOpenGifModal(val)}
.class=${'gif-image'}
.gif=${gif}
.alt=${'gif-image'}>
</image-component>
`;
})}
</div>
${this.isSubscribed ? (
html`
<button
class='unsubscribe-button'
@click=${this.unsubscribeToCollection}>
${translate('gifs.gchange22')}
</button>
`
) : (
html`
<button
class='subscribe-button'
@click=${this.subscribeToCollection}
>
${translate('gifs.gchange17')}
</button>
`
)}
`
: ''
}
@ -692,10 +817,10 @@ editor: {type: Object},
<div class="new-collection-row" style=${this.gifsToBeAdded.length === 0 ? "" : "flex: 1;"}>
<div class="new-collection-subrow">
<p class="new-collection-title">
${translate('chatpage.cchange84')}
${translate('gifs.gchange5')}
</p>
<p class="new-collection-subtitle">
${translate('chatpage.cchange85')}
${translate('gifs.gchange6')}
</p>
</div>
<div
@ -740,7 +865,7 @@ editor: {type: Object},
<input
class="upload-collection-name"
style=${this.gifsToBeAdded.length === 0 ? "display: none;" : "display: block;"}
placeholder=${get("chatpage.cchange88")}
placeholder=${get("gifs.gchange9")}
.value=${this.newCollectionName}
@change=${(e) => {
this.newCollectionName =
@ -793,7 +918,7 @@ editor: {type: Object},
this.uploadGifCollection();
}}
>
${translate('chatpage.cchange86')}
${translate('gifs.gchange7')}
</button>
</div>
</div>
@ -802,7 +927,7 @@ editor: {type: Object},
: this.mode === 'newCollection' && this.isLoading === true ? (
html`
<div>
<p class='gifs-loading-message'>${translate("chatpage.cchange90")}</p>
<p class='gifs-loading-message'>${translate("gifs.gchange11")}</p>
<div class="lds-circle"><div></div></div>
</div>
`

73
qortal-ui-plugins/plugins/core/components/ChatGifs/ChatGifsExplore-css.js
View File

@ -61,4 +61,77 @@ opacity: 0.6;
color: var(--chat-bubble-msg-color);
}
.search-collection-wrapper {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
position: relative;
}
.explore-collections-icon {
position: absolute;
right: 20px;
font-size: 13px;
color: var(--chat-group);
cursor: pointer;
}
.clear-search-icon {
position: absolute;
right: 15px;
font-size: 16px;
color: var(--chat-group);
padding: 1px;
border-radius: 50%;
background-color: transparent;
transition: all 0.3s ease-in-out;
}
.clear-search-icon:hover {
cursor: pointer;
background-color: #e4e3e389
}
.gifs-loading-message {
font-family: Montserrat, sans-serif;
font-size: 20px;
font-weight: 600;
color: var(--chat-bubble-msg-color);
margin: 0 0 10px 0;
text-align: center;
user-select: none;
}
.lds-circle {
display: flex;
align-items: center;
justify-content: center;
}
.lds-circle > div {
display: inline-block;
width: 80px;
height: 80px;
margin: 8px;
border-radius: 50%;
background: var(--mdc-theme-primary);
animation: lds-circle 2.4s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
@keyframes lds-circle {
0%, 100% {
animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5);
}
0% {
transform: rotateY(0deg);
}
50% {
transform: rotateY(1800deg);
animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1);
}
100% {
transform: rotateY(3600deg);
}
}
`

122
qortal-ui-plugins/plugins/core/components/ChatGifs/ChatGifsExplore.js
View File

@ -7,15 +7,18 @@ import '@material/mwc-icon';
const parentEpml = new Epml({ type: 'WINDOW', source: window.parent });
class ChatGifsExplore extends LitElement {
static get properties() {
return {
currentCollection: { type: String },
searchCollectionName: {type: String},
getMoreExploreGifs: { attribute: false },
exploreCollections: { type: Array },
setCurrentCollection: { attribute: false },
};
}
static get properties() {
return {
currentCollection: { type: String },
searchCollectionName: {type: String},
getMoreExploreGifs: { attribute: false },
exploreCollections: { type: Array },
setCurrentCollection: { attribute: false },
isLoading: { type: Boolean },
isSearched: { type: Boolean },
getAllCollections: { attribute: false }
};
}
static styles = [chatGifsExploreStyles];
@ -25,6 +28,8 @@ setCurrentCollection: { attribute: false },
this.downObserverElement = '';
this.viewElement = '';
this.exploreCollections = [];
this.isLoading = false;
this.isSearched = false;
}
elementObserver() {
@ -64,21 +69,87 @@ setCurrentCollection: { attribute: false },
this.elementObserver();
}
async searchCollections() {
this.isSearched = true;
try {
this.exploreCollections = [];
this.isLoading = true;
const response = await parentEpml.request('apiCall', {
url: `/arbitrary/resources/search?service=GIF_REPOSITORY&query=${this.searchCollectionName}&limit=0
`,
});
await new Promise((res) => {
setTimeout(() => {
res();
}, 1000)
});
this.exploreCollections = response;
} catch (error) {
console.error(error);
} finally {
this.isLoading = false;
}
}
render() {
console.log(6, "chat-gifs-explore-here");
console.log(18, "chat-gifs-explore-here");
console.log(this.searchCollectionName, "search collection name");
return html`
<div id="viewElement" class="container-body">
<input
class="search-collection-name"
placeholder=${get("chatpage.cchange88")}
.value=${this.searchCollectionName}
@change=${(e) => {
this.searchCollectionName =
e.target.value;
}}
/>
<div class='collection-wrapper'>
${this.exploreCollections.map((collection) => {
<div id='viewElement' class='container-body'>
<div class='search-collection-wrapper'>
<input
class='search-collection-name'
placeholder=${get('gifs.gchange9')}
.value=${this.searchCollectionName}
@change=${(e) => {
this.searchCollectionName =
e.target.value;
}}
@keyup=${async (e) => {
console.log(e.key);
if (e.key === 'Enter' && this.searchCollectionName) {
await this.searchCollections()
}
}}
/>
${this.isSearched ? (
html`
<vaadin-icon
class='clear-search-icon'
@click=${async () => {
if (this.isLoading) return;
const latestCollections = await this.getAllCollections();
this.exploreCollections = latestCollections;
this.searchCollectionName = '';
this.isSearched = false;
}}
icon='vaadin:close-small'
slot='icon'>
</vaadin-icon>
`
) : html`
<vaadin-icon
class='explore-collections-icon'
@click=${async () => {
if (this.isLoading || !this.searchCollectionName) return;
await this.searchCollections();
}}
icon='vaadin:search'
slot='icon'>
</vaadin-icon>
`}
</div>
<div class='collection-wrapper'>
${this.isLoading ? html`
<div style=${'margin-top: 10px;'}>
<p class='gifs-loading-message'>${translate('gifs.gchange18')}
</p>
<div class='lds-circle'><div></div></div>
</div>`
: this.isSearched && this.exploreCollections.length === 0 ? (
html`<p style=${'margin-top: 10px;'} class='gifs-loading-message'>${translate('gifs.gchange19')}</p>`
) : (
html`${this.exploreCollections.map((collection) => {
return html`
<div class='collection-card' @click=${() => {
this.setCurrentCollection(collection);
@ -86,9 +157,10 @@ setCurrentCollection: { attribute: false },
${collection.identifier}
</div>
`;
})}
</div>
<div id="downObserver"></div>
})}`
)}
</div>
<div id='downObserver'></div>
</div>
`;
}

32
qortal-ui-plugins/plugins/core/components/ChatPage.js
View File

@ -1023,7 +1023,6 @@ console.log({zipFileBlob})
}
render() {
console.log(23, "chat page here");
return html`
<div class="main-container">
<div
@ -1075,7 +1074,9 @@ console.log({zipFileBlob})
class="chat-gifs"
style=${this.openGifModal ? "display: flex;" : "display: none;"}
.webWorkerImage=${this.webWorkerImage}
.setGifsLoading=${(val) => this.setGifsLoading(val)}>
.setGifsLoading=${(val) => this.setGifsLoading(val)}
.sendMessage=${(val) => this._sendMessage(val)}
.setOpenGifModal=${(val)=> this.setOpenGifModal(val)}>
</chat-gifs>
<div
class='last-message-ref'
@ -2737,9 +2738,6 @@ console.log({zipFileBlob})
this.isUploadingImage = false;
return;
}
const messageObject = {
messageText: trimmedMessage,
images: [{
@ -2753,7 +2751,29 @@ console.log({zipFileBlob})
};
const stringifyMessageObject = JSON.stringify(messageObject);
this.sendMessage(stringifyMessageObject, typeMessage);
} else if (outSideMsg && outSideMsg.type === 'reaction') {
} else if (outSideMsg && outSideMsg.type === 'gif') {
console.log(outSideMsg, "gif received here");
const userName = await getName(this.selectedAddress.address);
if (!userName) {
parentEpml.request('showSnackBar', get("chatpage.cchange27"));
this.isLoading = false;
return;
}
const messageObject = {
messageText: '',
gifs: [{
service: outSideMsg.service,
name: outSideMsg.name,
identifier: outSideMsg.identifier,
filePath: outSideMsg.filePath
}],
repliedTo: '',
version: 2
};
const stringifyMessageObject = JSON.stringify(messageObject);
this.sendMessage(stringifyMessageObject, typeMessage);
} else if (outSideMsg && outSideMsg.type === 'reaction') {
typeMessage = 'edit';
let chatReference = outSideMsg.editedMessageObj.reference;

122
qortal-ui-plugins/plugins/core/components/ChatScroller.js
View File

@ -70,6 +70,7 @@ class ChatScroller extends LitElement {
}
render() {
console.log(4, "chat scroller here");
let formattedMessages = this.messages.reduce((messageArray, message, index) => {
const lastGroupedMessage = messageArray[messageArray.length - 1];
let timestamp;
@ -269,9 +270,11 @@ class MessageTemplate extends LitElement {
setEditedMessageObj: { attribute: false },
sendMessage: { attribute: false },
sendMessageForward: { attribute: false },
openDialogImage: { attribute: false },
openDialogImage: { type: Boolean },
openDialogGif: { type: Boolean },
openDeleteImage: { type: Boolean },
isImageLoaded: { type: Boolean },
isGifLoaded: { type: Boolean },
isFirstMessage: { type: Boolean },
isSingleMessageInGroup: { type: Boolean },
isLastMessageInGroup: { type: Boolean },
@ -295,8 +298,11 @@ class MessageTemplate extends LitElement {
this.showBlockAddressIcon = false
this.myAddress = window.parent.reduxStore.getState().app.selectedAddress.address
this.imageFetches = 0
this.gifFetches = 0
this.openDialogImage = false
this.openDialogGif = false
this.isImageLoaded = false
this.isGifLoaded = false
this.isFirstMessage = false
this.isSingleMessageInGroup = false
this.isLastMessageInGroup = false
@ -338,19 +344,23 @@ class MessageTemplate extends LitElement {
let reactions = [];
let repliedToData = null;
let image = null;
let gif = null;
let isImageDeleted = false;
let version = 0;
let isForwarded = false
try {
const parsedMessageObj = JSON.parse(this.messageObj.decodedMessage);
if(parsedMessageObj.version.toString() === '2'){
messageVersion2 = generateHTML(parsedMessageObj.messageText, [
StarterKit,
Underline,
Highlight
// other extensions …
])
if (parsedMessageObj.version.toString() === '2' && parsedMessageObj.messageText) {
try {
messageVersion2 = generateHTML(parsedMessageObj.messageText, [
StarterKit,
Underline,
Highlight
// other extensions …
])
} catch (error) {
console.error(error);
}
}
message = parsedMessageObj.messageText;
repliedToData = this.messageObj.repliedToData;
@ -361,13 +371,20 @@ class MessageTemplate extends LitElement {
if (parsedMessageObj.images && Array.isArray(parsedMessageObj.images) && parsedMessageObj.images.length > 0) {
image = parsedMessageObj.images[0];
}
if (parsedMessageObj.gifs && Array.isArray(parsedMessageObj.gifs) && parsedMessageObj.gifs.length > 0) {
gif = parsedMessageObj.gifs[0];
}
} catch (error) {
console.error(error);
message = this.messageObj.decodedMessage;
}
let avatarImg = '';
let imageHTML = '';
let imageHTMLDialog = '';
let imageUrl = '';
let gifHTML = '';
let gifHTMLDialog = '';
let gifUrl = '';
let nameMenu = '';
let levelFounder = '';
let hideit = hidemsg.includes(this.messageObj.sender);
@ -411,6 +428,33 @@ class MessageTemplate extends LitElement {
};
return imageHTMLRes;
}
const createGif = (gif) => {
const gifHTMLRes = new Image();
gifHTMLRes.src = gif;
gifHTMLRes.style= "max-width:45vh; max-height:40vh; border-radius: 5px; cursor: pointer";
gifHTMLRes.onclick= () => {
this.openDialogGif = true;
}
gifHTMLRes.onload = () => {
this.isGifLoaded = true;
}
gifHTMLRes.onerror = () => {
if (this.gifFetches < 4) {
setTimeout(() => {
this.gifFetches = this.gifFetches + 1;
gifHTMLRes.src = gif;
}, 500);
} else {
gifHTMLRes.src = '/img/chain.png';
gifHTMLRes.style= "max-width:45vh; max-height:20vh; border-radius: 5px; filter: opacity(0.5)";
gifHTMLRes.onclick= () => {}
this.isGifLoaded = true
}
};
return gifHTMLRes;
}
if (image) {
const myNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node];
const nodeUrl = myNode.protocol + '://' + myNode.domain + ':' + myNode.port;
@ -421,7 +465,17 @@ class MessageTemplate extends LitElement {
imageHTMLDialog = createImage(imageUrl)
imageHTMLDialog.style= "height: auto; max-height: 80vh; width: auto; max-width: 80vw; object-fit: contain; border-radius: 5px";
}
}
if (gif) {
const myNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node];
const nodeUrl = myNode.protocol + '://' + myNode.domain + ':' + myNode.port;
gifUrl = `${nodeUrl}/arbitrary/${gif.service}/${gif.name}/${gif.identifier}?filepath=${gif.filePath}&apiKey=${myNode.apiKey}`;
if (this.viewImage || this.myAddress === this.messageObj.sender){
gifHTML = createGif(gifUrl);
gifHTMLDialog = createGif(gifUrl)
gifHTMLDialog.style= "height: auto; max-height: 80vh; width: auto; max-width: 80vw; object-fit: contain; border-radius: 5px";
}
}
nameMenu = html`
@ -560,10 +614,9 @@ class MessageTemplate extends LitElement {
}}
class=${[`image-container`, !this.isImageLoaded ? 'defaultSize' : ''].join(' ')}
style=${this.isFirstMessage && "margin-top: 10px;"}>
<div style="display:flex;width:100%;height:100%;justify-content:center;align-items:center;cursor:pointer;color:var(--black)">
${translate("chatpage.cchange40")}
</div>
<div style="display:flex;width:100%;height:100%;justify-content:center;align-items:center;cursor:pointer;color:var(--black)">
${translate("chatpage.cchange40")}
</div>
</div>
` : html``}
${image && !isImageDeleted && (this.viewImage || this.myAddress === this.messageObj.sender) ? html`
@ -580,6 +633,25 @@ class MessageTemplate extends LitElement {
` : image && isImageDeleted ? html`
<p class="image-deleted-msg">This image has been deleted</p>
` : html``}
${gif && !this.viewImage && this.myAddress !== this.messageObj.sender ? html`
<div
@click=${()=> {
this.viewImage = true
}}
class=${[`image-container`, !this.isImageLoaded ? 'defaultSize' : ''].join(' ')}
style=${this.isFirstMessage && "margin-top: 10px;"}>
<div style="display:flex;width:100%;height:100%;justify-content:center;align-items:center;cursor:pointer;color:var(--black)">
${translate("gifs.gchange25")}
</div>
</div>
` : html``}
${gif && (this.viewImage || this.myAddress === this.messageObj.sender) ? html`
<div
class=${[`image-container`, !this.isGifLoaded ? 'defaultSize' : ''].join(' ')}
style=${this.isFirstMessage && "margin-top: 10px;"}>
${gifHTML}
</div>
` : html``}
<div
id="messageContent"
class="message"
@ -680,6 +752,28 @@ class MessageTemplate extends LitElement {
${translate("general.close")}
</mwc-button>
</mwc-dialog>
<mwc-dialog
id="showDialogPublicKey"
?open=${this.openDialogGif}
@closed=${()=> {
this.openDialogGif = false
}}>
<div class="dialog-header"></div>
<div class="dialog-container imageContainer">
${gifHTMLDialog}
</div>
<mwc-button
slot="primaryAction"
dialogAction="cancel"
class="red"
@click=${()=>{
this.openDialogGif = false
}}
>
${translate("general.close")}
</mwc-button>
</mwc-dialog>
<mwc-dialog
hideActions
?open=${this.openDeleteImage}

21
qortal-ui-plugins/plugins/core/components/ChatTextEditor.js
View File

@ -31,7 +31,7 @@ class ChatTextEditor extends LitElement {
toggleEnableChatEnter: {attribute: false},
isEnabledChatEnter: {type: Boolean},
openGifModal: { type: Boolean },
setOpenGifModal: {attribute: false}
setOpenGifModal: { attribute: false }
}
}
@ -459,7 +459,15 @@ class ChatTextEditor extends LitElement {
</button>
${this.setOpenGifModal ?
html`
<button class="emoji-button" @click=${()=> this.setOpenGifModal(true)}>
<button
class="emoji-button"
@click=${()=> {
if (!this.userName) {
parentEpml.request('showSnackBar', get("gifs.gchange26"));
return;
}
this.setOpenGifModal(true)
}}>
<span style="font-size: 30px" class="material-symbols-outlined">&#xe7a3;</span>
</button>
`
@ -527,14 +535,7 @@ class ChatTextEditor extends LitElement {
}
}
async firstUpdated() {
async firstUpdated() {
window.addEventListener('storage', () => {
const checkTheme = localStorage.getItem('qortalTheme');
const chatbar = this.shadowRoot.querySelector('.element')

39
qortal-ui-plugins/plugins/core/components/ImageComponent.js
View File

@ -7,11 +7,13 @@ export class ImageComponent extends LitElement {
static get properties() {
return {
class: { type: String },
url: { type: String },
gif: { type: Object },
alt: { type: String },
attempts: { type: Number },
maxAttempts: { type: Number },
error: { type: Boolean }
error: { type: Boolean },
sendMessage: { attribute: false },
setOpenGifModal: { attribute: false }
}
}
@ -54,14 +56,21 @@ constructor() {
async _fetchImage() {
this.attempts++;
if (this.attempts > this.maxAttempts) return;
await new Promise((res) => {
setTimeout(() => {
res();
}, 1000)
});
try {
const response = await fetch(this.url);
const response = await fetch(this.gif.url);
const data = await response.json();
console.log({data});
if (data.ok) {
this.error = false;
this.url = data.src;
this.gif = {
...this.gif,
url: data.src
};
this.requestUpdate();
} else if (!data.ok || data.error) {
this.error = true;
@ -76,27 +85,35 @@ async _fetchImage() {
}
render() {
console.log(5, "Image Component here");
console.log(this.url)
if (this.error && this.attempts <= this.maxAttempts) {
setTimeout(() => {
this._fetchImage();
}, 1000);
}
return html`
${this.url && !this.error
${this.gif && !this.error
? html`
<img
class=${this.class}
src=${this.url}
src=${this.gif.url}
alt=${this.alt}
@click=${() => {
this.sendMessage({
type: 'gif',
identifier: this.gif.identifier,
name: this.gif.name,
filePath: this.gif.filePath,
service: "GIF_REPOSITORY"
})
this.setOpenGifModal(false);
}}
@error=${this._fetchImage}
/>`
: this.error && this.attempts <= this.maxAttempts ? html`
<p class='gif-error-msg'>${translate('chatpage.cchange94')}</p>
<p class='gif-error-msg'>${translate('gifs.gchange15')}</p>
`
: html`
<p class='gif-error-msg'>${translate('chatpage.cchange95')}</p>
<p class='gif-error-msg'>${translate('gifs.gchange16')}</p>
`
}`
}