Continued UI styling and fixed img bug

qortal-ui-core/font/material-icons.css

@@ -54,6 +54,13 @@
     url(Livvic.ttf) format('truetype');
 }
 
+@font-face {
+  font-family: 'Paytone One', sans-serif;
+  src: local('PaytoneOne'),
+  local('PaytoneOne'),
+  url(PaytoneOne.ttf) format('truetype');
+}
+
 .material-icons {
   font-family: 'Material Icons';
   font-weight: normal;

qortal-ui-core/language/us.json

@@ -583,7 +583,12 @@
       "cchange87": "A collection name is required!",
       "cchange88": "Collection Name",
       "cchange89": "Gif Collection Uploaded Successfully!",
-      "cchange90": "Gifs uploading, please wait..."
+      "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!"
    },
    "welcomepage": {
       "wcchange1": "Welcome to Q-Chat",

qortal-ui-plugins/plugins/core/components/ChatGifs/ChatGifs-css.js

@@ -12,8 +12,9 @@ width: fit-content;
 justify-self: flex-end;
 place-self: end flex-end;
 min-height: 400px;
-max-height: 95vh;
+max-height: calc(95vh - 90px);
 min-width: 370px;
+max-width: 370px;
 box-shadow: var(--gifs-drop-shadow);
 }
 
@@ -137,6 +138,49 @@ display: flex;
 flex-direction: column;
 width: 100%;
 height: 100%;
+overflow: hidden;
+}
+
+.collection-gifs {
+display: grid;
+grid-template-columns: repeat(2, 1fr);
+grid-gap: 10px;
+margin-top: 10px;
+overflow-y: auto;
+overflow-x: hidden;
+}
+
+.collection-gifs::-webkit-scrollbar-track {
+background-color: whitesmoke;
+border-radius: 7px;
+}
+
+.collection-gifs::-webkit-scrollbar {
+width: 6px;
+border-radius: 7px;
+background-color: whitesmoke;
+}
+
+.collection-gifs::-webkit-scrollbar-thumb {
+background-color: rgb(180, 176, 176);
+border-radius: 7px;
+transition: all 0.3s ease-in-out;
+}
+
+.collection-gif {
+border-radius: 15px;
+background-color: transparent;
+cursor: pointer;
+width: 100%;
+height: 150px;
+object-fit: cover;
+border: 1px solid transparent;
+transition: all 0.2s cubic-bezier(0, 0.55, 0.45, 1);
+box-shadow: rgb(50 50 93 / 25%) 0px 6px 12px -2px, rgb(0 0 0 / 30%) 0px 3px 7px -3px;
+}
+
+.collection-gif:hover {
+border: 1px solid var(--mdc-theme-primary );
 }
 
 .new-collection-row {
@@ -295,21 +339,39 @@ color: var(--chat-bubble-msg-color);
 	font-weight: 300;
 	letter-spacing: 0.3px;
 	font-size: 16px;
+  width: fit-content;
+  gap: 10px;
 	color: var(--chat-bubble-msg-color);
 	flex-direction: row;
   align-items: center;
   transition: box-shadow 0.2s ease-in-out;
-	background-color: rgb(111, 116, 129);
+	background-color: var(--gif-button-row-bg);
 	border-radius: 10px;
-  box-shadow: rgb(0 0 0 / 15%) 1.95px 1.95px 2.6px;
-  padding: 8px 15px;
+  box-shadow: rgb(0 0 0 / 20%) 0px 0px 0px;
+  padding: 8px 10px;
   cursor: pointer;
 }
 
 .collection-back-button:hover {
   border: none;
   box-sizing: border-box;
-  box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
+  box-shadow: rgb(0 0 0 / 14%) 0px 4px 5px 0px, rgb(0 0 0 / 12%) 0px 1px 10px 0px, rgb(0 0 0 / 20%) 0px 2px 4px -1px;
+}
+
+.collection-back-button-arrow {
+  font-size: 10px;
+}
+
+.no-collections {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  color: var(--chat-bubble-msg-color);
+  font-size: 20px;
+  font-family: Paytone One, sans-serif;
+  margin-top: 20px;
+  user-select: none;
 }
 
 .collection-card {
@@ -405,6 +467,7 @@ background-color: #03a8f475;
 	color: var(--chat-bubble-msg-color);
 	margin: 0 0 10px 0;
 	text-align: center;
+  user-select: none;
 }
 
 `;

qortal-ui-plugins/plugins/core/components/ChatGifs/ChatGifs.js

@@ -9,6 +9,7 @@ import {publishData} from '../../../utils/publish-image.js';
 import {translate, get} from 'lit-translate';
 import {gifExplorerStyles} from './ChatGifs-css.js';
 import './ChatGifsExplore.js';
+import '../ImageComponent.js';
 import '@vaadin/tooltip';
 
 const parentEpml = new Epml({type: 'WINDOW', source: window.parent});
@@ -66,7 +67,7 @@ editor: {type: Object},
     						url: `/arbitrary/metadata/GIF_REPOSITORY/${this.myAccountName}/${collection.identifier}`,
     					});
 
-							console.log({metaData});
+    						console.log({metaData});
 
     					collectionObj = {
     						...collection,
@@ -173,10 +174,12 @@ editor: {type: Object},
     			getMyGifCollections
     		);
 
-    		console.log({gifCollectionWithMetaData});
-    		this.myGifCollections = gifCollectionWithMetaData;
-    	}
+    		return gifCollectionWithMetaData;
+    	} else {
+				return [];
+			}
     }
+
     async getAllCollections() {
     	this.pageNumber = 0;
     	// for the explore section
@@ -202,7 +205,6 @@ editor: {type: Object},
     			const name = splitCollection[0];
     			const identifier = splitCollection[1];
     			try {
-    				console.log({collection});
     				const data = await parentEpml.request('apiCall', {
     					url: `/arbitrary/resources?service=GIF_REPOSITORY&limit=0&name=${name}&identifier=${identifier}`,
     				});
@@ -219,7 +221,7 @@ editor: {type: Object},
     	const savedCollectionsWithMetaData = await this.structureCollections(
     		savedCollections
     	);
-    	this.mySubscribedCollections = savedCollectionsWithMetaData;
+    	return savedCollectionsWithMetaData;
     }
 
     async firstUpdated() {
@@ -233,10 +235,23 @@ editor: {type: Object},
     		'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;
-    		await this.getMyGifCollections();
+					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();
-    		await this.getSavedCollections();
     		this.isLoading = false;
     	} catch (error) {
     		this.isLoading = false;
@@ -245,16 +260,20 @@ editor: {type: Object},
     }
 
     async updated(changedProperties) {
-    	console.log({changedProperties});
     	if (changedProperties && changedProperties.has('mode')) {
     		const mode = this.mode;
-    		console.log({mode});
     		if (mode === 'myCollection') {
     			try {
+    				this.myGifCollections = [];
     				this.isLoading = true;
-
-    				await this.getMyGifCollections();
-    				this.isLoading = false;
+    					const collections = await this.getMyGifCollections();
+    					await new Promise((res) => {
+    						setTimeout(() => {
+    							res();
+    						}, 1000)
+    					});
+    					this.myGifCollections = collections;
+    					this.isLoading = false;
     			} catch (error) {
     				this.isLoading = false;
     			}
@@ -272,10 +291,16 @@ editor: {type: Object},
     		}
     		if (mode === 'subscribedCollection') {
     			try {
+    					this.mySubscribedCollections = [];
     				this.isLoading = true;
-
-    				await this.getSavedCollections();
-    				this.isLoading = false;
+    					const savedCollections = await this.getSavedCollections();
+    					await new Promise((res) => {
+    						setTimeout(() => {
+    							res();
+    						}, 1000)
+    					});
+    					this.mySubscribedCollections = savedCollections;
+    					this.isLoading = false;
     			} catch (error) {
     				this.isLoading = false;
     			}
@@ -301,16 +326,13 @@ editor: {type: Object},
     }
 
     addGifs(gifs) {
-    	console.log('gifs', gifs);
     	const mapGifs = gifs.map((file) => {
     		return {
     			file,
     			name: file.name,
     		};
     	});
-    	console.log({mapGifs});
     	this.gifsToBeAdded = [...this.gifsToBeAdded, ...mapGifs];
-    	console.log('this.gifsToBeAdded', this.gifsToBeAdded);
     }
 
     async uploadGifCollection() {
@@ -362,7 +384,6 @@ editor: {type: Object},
     		await zipWriter.close();
     		const zipFileBlob = await zipFileWriter.getData();
     		const blobTobase = await blobToBase64(zipFileBlob);
-    		console.log({blobTobase});
 
     		if (!userName) {
     			parentEpml.request('showSnackBar', get('chatpage.cchange27'));
@@ -411,12 +432,11 @@ editor: {type: Object},
     		// saveAs(zipFileBlob, 'zipfile');
     			this.isLoading = false;
     			this.setGifsLoading(false);
-					this.mode = 'myCollection';
-					this.gifsToBeAdded = [];
-					this.newCollectionName = '';
+    				this.mode = 'myCollection';
+    				this.gifsToBeAdded = [];
+    				this.newCollectionName = '';
     			parentEpml.request('showSnackBar', get('chatpage.cchange89'));
-    		console.log({zipFileBlob});
-    	} catch (error) {
+				} catch (error) {
     		console.log(error);
     	}
     }
@@ -432,7 +452,7 @@ editor: {type: Object},
 
     render() {
     	console.log('this.currentCollection', this.currentCollection);
-    	console.log(13, 'chat gifs here');
+    	console.log(27, 'chat gifs here');
     	return html`
                 <div class="gifs-container">
                 <div class="gif-explorer-container">
@@ -464,9 +484,9 @@ editor: {type: Object},
                         id="explore-collections-icon"
                         class="explore-collections-icon"
                         @click=${() => {
-    						if (this.isLoading) return;
-    						this.mode = 'explore';
-    					}}
+												if (this.isLoading) return;
+												this.mode = 'explore';
+											}}
                         icon="vaadin:search"
                         slot="icon">
                     </vaadin-icon>
@@ -496,6 +516,7 @@ editor: {type: Object},
     					if (this.isLoading) return;
     					if (this.mode === 'myCollection') return;
     					this.mode = 'myCollection';
+    						this.currentCollection = null;
     				}}
                 >
                   ${translate('chatpage.cchange82')}
@@ -512,6 +533,7 @@ editor: {type: Object},
     					if (this.isLoading) return;
     					if (this.mode === 'subscribedCollection') return;
     					this.mode = 'subscribedCollection';
+    						this.currentCollection = null;
     				}}
                 >
                     ${translate('chatpage.cchange83')}
@@ -524,48 +546,60 @@ editor: {type: Object},
     						${this.isLoading === true
     							? html`<div class="lds-circle"><div></div></div>`
     							: ''}
-    						${this.myGifCollections.map((collection) => {
-    							return html`
-    								<div @click=${() => {
-    											this.currentCollection =
-    												collection;
-    										}} class='collection-card'>
-    										${collection.identifier}
-    								</div>
-    							`;
-    						})}
+    							${(this.myGifCollections.length === 0 && !this.isLoading) ? (
+    								html`
+    								<div class='no-collections'>${translate('chatpage.cchange92')}</div>
+    								`
+    							) : (
+    								html`
+    								${(this.myGifCollections || []).map((collection) => {
+    									return html`
+    										<div @click=${() => {
+    													this.currentCollection =
+    														collection;
+    												}} class='collection-card'>
+    												${collection.identifier}
+    										</div>
+    									`;
+    								})}
+    								`
+    							)}
     				  `
     				: ''
     		}
-    					${this.mode === 'subscribedCollection' &&
+    				${this.mode === 'subscribedCollection' &&
     				!this.currentCollection
     					? html`
     							${this.isLoading === true
-    								? html` <p>Loading...</p> `
+    								? html`<div class="lds-circle"><div></div></div>`
     								: ''}
-    							${this.mySubscribedCollections.map(
-    								(collection) => {
-    									return html`
-    										<div>
-    											<p
-    												@click=${() => {
+    								  ${(this.mySubscribedCollections.length === 0 && !this.isLoading) ? (
+    								html`
+    								<div class='no-collections'>${translate('chatpage.cchange93')}</div>
+    								`
+    							) : (
+    									html`
+    									${this.mySubscribedCollections.map(
+    										(collection) => {
+    											return html`
+    													<div @click=${() => {
     													this.currentCollection =
     														collection;
-    												}}
-    											>
-    												${collection.identifier}
-    											</p>
-    										</div>
-    									`;
-    								}
-    							)}
+    												}} class='collection-card'>
+    													${collection.identifier}
+    												</div>
+    											`;
+    										}
+    									)}
+    									`
+    								)}
     					  `
     					: ''
     			}
                 ${this.mode === 'explore' && !this.currentCollection
-    					? html`
+    						? html`
     							${this.isLoading === true
-    								? html` <p>Loading...</p> `
+    								? html`<div class="lds-circle"><div></div></div>`
     								: ''}
     							<chat-gifs-explore
     								currentCollection=${this.currentCollection}
@@ -582,53 +616,63 @@ editor: {type: Object},
                 ${this.currentCollection && this.mode === 'myCollection'
     					? html`
     							<div
-										class='collection-back-button'
+    									class='collection-back-button'
     								@click=${() => {
     									this.currentCollection = null;
     								}}
     							>
-									<vaadin-icon icon='vaadin:arrow-left' slot='icon'></vaadin-icon>
+    								<vaadin-icon class='collection-back-button-arrow' icon='vaadin:arrow-left' slot='icon'></vaadin-icon>
     								${translate('general.back')}
     							</div>
-    							${this.currentCollection.gifUrls.map((gif) => {
-    								console.log({gif});
-
-    								return html`
-    									<img
-    										onerror=${(e) => {
-    											e.target.src = gif;
-    										}}
-    										src=${gif}
-    										style="width: 50px; height: 50px"
-    									/>
-    								`;
-    							})}
+    								<div class='collection-gifs'>
+											${this.currentCollection.gifUrls.map((gif) => {
+												console.log({gif});
+												return html`
+													<image-component
+														style='border-radius: 15px;
+														background-color: transparent;
+														cursor: pointer;
+														width: 100%;
+														height: 150px;
+														object-fit: cover;
+														border: 1px solid transparent;
+														transition: all 0.2s cubic-bezier(0, 0.55, 0.45, 1);
+														box-shadow: rgb(50 50 93 / 25%) 0px 6px 12px -2px, rgb(0 0 0 / 30%) 0px 3px 7px -3px;'
+														.url=${gif}
+														.alt=${'gif-image'}>
+														</image-component>
+												`;
+											})}
+    								</div>
     					  `
     					: ''
     			}
     			${this.currentCollection &&
     				this.mode === 'subscribedCollection'
     					? html`
-    							<button
+    							<div
+    									class='collection-back-button'
     								@click=${() => {
     									this.currentCollection = null;
     								}}
     							>
-    								Back
-    							</button>
+    								<vaadin-icon class='collection-back-button-arrow' icon='vaadin:arrow-left' slot='icon'>
+    								</vaadin-icon>
+    								${translate('general.back')}
+    							</div>
+    								<div class='collection-gifs'>
     							${this.currentCollection.gifUrls.map((gif) => {
-    								console.log({gif});
-
     								return html`
     									<img
+    										class='collection-gif'
     										onerror=${(e) => {
     											e.target.src = gif;
     										}}
     										src=${gif}
-    										style="width: 50px; height: 50px"
     									/>
     								`;
     							})}
+    								</div>
     					  `
     					: ''
     			}
@@ -651,7 +695,6 @@ editor: {type: Object},
     								Subscribe to this collection
     							</button>
     							${this.currentCollection.gifUrls.map((gif) => {
-    								console.log({gif});
 
     								return html`
     									<img
@@ -766,7 +809,7 @@ editor: {type: Object},
     										${translate('general.back')}
     									</button>
     									<button
-												style=${this.gifsToBeAdded.length === 0 ? "display: none;" : "display: block;"}
+    											style=${this.gifsToBeAdded.length === 0 ? "display: none;" : "display: block;"}
     										class="upload-button"
     										@click=${() => {
     											this.uploadGifCollection();

qortal-ui-plugins/plugins/core/components/ImageComponent.js

@@ -0,0 +1,80 @@
+import { LitElement, html, css } from 'lit';
+import { translate, get } from 'lit-translate';
+import { render } from 'lit/html.js';
+
+export class ImageComponent extends LitElement {
+
+static get properties() {
+return {
+url: { type: String },
+alt: { type: String },
+style: { type: String },
+attempts: { type: Number },
+maxAttempts: { type: Number },
+error: { type: Boolean }
+}
+}
+
+static get styles() {
+return css`
+.gif-error-msg {
+margin: 0;
+font-family: Roboto, sans-serif;
+font-size: 17px;
+letter-spacing: 0.3px;
+color: var(--chat-bubble-msg-color);
+font-weight: 300;
+padding: 10px 10px;
+}
+`
+}
+
+constructor() {
+  super();
+  this.src = '';
+  this.attempts = 0;
+  this.maxAttempts = 5;
+}
+
+async _fetchImage() {
+  this.attempts++;
+  if (this.attempts > this.maxAttempts) return;
+
+  try {
+    const response = await fetch(`http://your-backend-api/image-src`);
+    const data = await response.json();
+    if (data.ok) {
+    this.error = false;
+    } else {
+      this.error = true;
+    }
+    this.src = data.src;
+  } catch (error) {
+    this.error = true;
+    console.error(error);
+    this._fetchImage();
+  }
+}
+
+render() {
+console.log(19, "image component here");
+return html`
+${this.url && !this.error 
+  ? html`
+<img
+.style=${this.style}
+src=${this.url}
+alt=${this.alt} 
+@error=${this._fetchImage}
+/>`
+  : this.error && this.attempts <= this.maxAttempts ? html`
+<p class='gif-error-msg'>${translate('chatpage.cchange94')}</p>
+`
+  : html`
+  <p class='gif-error-msg'>${translate('chatpage.cchange95')}</p>
+  `
+}`
+}
+}
+
+customElements.define('image-component', ImageComponent);