From 718d9e2700caa9c0390ddc7f3bea199c9bbb075d Mon Sep 17 00:00:00 2001
From: Justin Ferrari <justinwesleyferrari@gmail.com>
Date: Fri, 10 Feb 2023 22:42:53 +0200
Subject: [PATCH] Continued UI styling of gifs

---
 qortal-ui-core/font/switch-theme.css          |   2 +
 qortal-ui-core/src/styles/switch-theme.css    |   2 +
 .../core/components/ChatGifs/ChatGifs-css.js  |  12 +-
 .../core/components/ChatGifs/ChatGifs.js      | 100 +++++------
 .../ChatGifs/ChatGifsExplore-css.js           |  64 +++++++
 .../components/ChatGifs/ChatGifsExplore.js    | 160 +++++++++---------
 .../plugins/core/components/ImageComponent.js |  39 ++++-
 .../plugins/utils/publish-image.js            |   2 -
 8 files changed, 227 insertions(+), 154 deletions(-)
 create mode 100644 qortal-ui-plugins/plugins/core/components/ChatGifs/ChatGifsExplore-css.js

diff --git a/qortal-ui-core/font/switch-theme.css b/qortal-ui-core/font/switch-theme.css
index 8e56fbea..290e1940 100644
--- a/qortal-ui-core/font/switch-theme.css
+++ b/qortal-ui-core/font/switch-theme.css
@@ -58,6 +58,7 @@ html {
   --gif-search-icon: #ffffff;
   --gif-button-row-bg: #eaeaef;
   --gif-button-row-color: #464040;
+  --gif-collection-hover-bg: #eaeaefa3;
 }
 
 html[theme="dark"] {
@@ -120,4 +121,5 @@ html[theme="dark"] {
   --gif-search-icon: #586b8d;
   --gif-button-row-bg: #82899c;
   --gif-button-row-color: #151212;
+  --gif-collection-hover-bg: #ffffff26;
 }
\ No newline at end of file
diff --git a/qortal-ui-core/src/styles/switch-theme.css b/qortal-ui-core/src/styles/switch-theme.css
index 20ed00ef..564b0a35 100644
--- a/qortal-ui-core/src/styles/switch-theme.css
+++ b/qortal-ui-core/src/styles/switch-theme.css
@@ -55,6 +55,7 @@ html {
   --gif-search-icon: #ffffff;
   --gif-button-row-bg: #eaeaef;
   --gif-button-row-color: #464040;
+  --gif-collection-hover-bg: #eaeaefa3;
 }
 
 html[theme="dark"] {
@@ -114,4 +115,5 @@ html[theme="dark"] {
   --gif-search-icon: #586b8d;
   --gif-button-row-bg: #82899c;
   --gif-button-row-color: #151212;
+  --gif-collection-hover-bg: #ffffff26;
 }
\ No newline at end of file
diff --git a/qortal-ui-plugins/plugins/core/components/ChatGifs/ChatGifs-css.js b/qortal-ui-plugins/plugins/core/components/ChatGifs/ChatGifs-css.js
index b4607b9f..5a9fd29a 100644
--- a/qortal-ui-plugins/plugins/core/components/ChatGifs/ChatGifs-css.js
+++ b/qortal-ui-plugins/plugins/core/components/ChatGifs/ChatGifs-css.js
@@ -47,7 +47,6 @@ user-select: none;
 }
 
 .explore-collections-icon {
-margin-left: auto;
 text-align: right;
 font-size: 20px;
 color: var(--chat-group);
@@ -346,7 +345,7 @@ color: var(--chat-bubble-msg-color);
   align-items: center;
   transition: box-shadow 0.2s ease-in-out;
 	background-color: var(--gif-button-row-bg);
-	border-radius: 10px;
+	border-radius: 3px;
   box-shadow: rgb(0 0 0 / 20%) 0px 0px 0px;
   padding: 8px 10px;
   cursor: pointer;
@@ -383,7 +382,7 @@ color: var(--chat-bubble-msg-color);
 	color: var(--chat-bubble-msg-color);
   flex-direction: row;
   align-items: center;
-  transition: box-shadow 0.2s ease-in-out;
+  transition: all 0.3s ease-in-out;
   box-shadow: none;
   padding: 10px;
   cursor: pointer;
@@ -391,9 +390,8 @@ color: var(--chat-bubble-msg-color);
 
 .collection-card:hover {
   border: none;
-  border-radius: 4px;
-  box-sizing: border-box;
-  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;
+  border-radius: 5px;
+  background-color: var(--gif-collection-hover-bg);
 }
 
 .upload-button {
@@ -404,7 +402,7 @@ background-color: transparent;
 padding: 8px 10px;
 border-radius: 5px;
 border: none;
-transition: all 0.3s ease-in-out;
+transition: all 0.4s ease-in-out;
 }
 
 .upload-back-button {
diff --git a/qortal-ui-plugins/plugins/core/components/ChatGifs/ChatGifs.js b/qortal-ui-plugins/plugins/core/components/ChatGifs/ChatGifs.js
index b6ae1475..28fa84ea 100644
--- a/qortal-ui-plugins/plugins/core/components/ChatGifs/ChatGifs.js
+++ b/qortal-ui-plugins/plugins/core/components/ChatGifs/ChatGifs.js
@@ -67,8 +67,6 @@ editor: {type: Object},
     						url: `/arbitrary/metadata/GIF_REPOSITORY/${this.myAccountName}/${collection.identifier}`,
     					});
 
-    						console.log({metaData});
-
     					collectionObj = {
     						...collection,
     						gifUrls: [],
@@ -429,7 +427,7 @@ editor: {type: Object},
     			};
     			interval = setInterval(getAnswer, 5000);
     		});
-    		// saveAs(zipFileBlob, 'zipfile');
+    		saveAs(zipFileBlob, 'zipfile');
     			this.isLoading = false;
     			this.setGifsLoading(false);
     				this.mode = 'myCollection';
@@ -452,7 +450,7 @@ editor: {type: Object},
 
     render() {
     	console.log('this.currentCollection', this.currentCollection);
-    	console.log(27, 'chat gifs here');
+    	console.log(31, 'chat gifs here');
     	return html`
                 <div class="gifs-container">
                 <div class="gif-explorer-container">
@@ -472,12 +470,31 @@ editor: {type: Object},
                         slot="icon">
                     </vaadin-icon>
                 <div class="title-row">
-                    <p class="gif-explorer-title">${translate(
-    					'chatpage.cchange80'
-    				)}</p>
+									<div
+											style=${((this.currentCollection && (this.mode === 'myCollection' || this.mode === 'subscribedCollection')) || this.mode === 'explore') ? "visibility: visible;" : "visibility: hidden;"}
+    									class='collection-back-button'
+    								@click=${() => {
+											if (this.mode === 'explore' && !this.currentCollection) {
+												this.mode = 'myCollection';
+												this.currentCollection = null;
+											} else if (this.mode === 'explore' && this.currentCollection) {
+												this.mode = 'explore';
+												this.currentCollection = null;
+											} else {
+												this.currentCollection = null;
+											}
+    								}}
+    							>
+    								<vaadin-icon class='collection-back-button-arrow' icon='vaadin:arrow-left' slot='icon'></vaadin-icon>
+    							</div>
+                    <p class="gif-explorer-title">
+											${translate(
+												'chatpage.cchange80'
+											)}
+										</p>
                     <vaadin-icon
                         style=${
-    						this.mode === 'newCollection'
+    						(this.mode === 'newCollection' || this.mode === 'explore')
     							? 'display: none'
     							: 'display: block'
     					}
@@ -498,27 +515,25 @@ editor: {type: Object},
                         text=${get('chatpage.cchange81')}>
                     </vaadin-tooltip>
                 </div>
-                <div class="collections-button-row" style=${
-    				this.mode === 'newCollection'
-    					? 'display: none'
-    					: 'display: block'
-    			}>
-                    <div class="collections-button-innerrow">
+                <div 
+								class="collections-button-row" 
+								style=${(this.mode === 'newCollection' || this.mode === 'explore') 
+								? 'display: none' : 'display: block'}>
+								<div class="collections-button-innerrow">
                 <div
-                    id="my-collections-button"
+									id="my-collections-button"
                   class=${[
     					'my-collections-button',
     					this.mode === 'myCollection'
     						? 'collections-button-active'
     						: null,
     				].join(' ')}
-                  @click=${() => {
+								@click=${() => {
     					if (this.isLoading) return;
     					if (this.mode === 'myCollection') return;
     					this.mode = 'myCollection';
     						this.currentCollection = null;
-    				}}
-                >
+							}}>
                   ${translate('chatpage.cchange82')}
                 </div>
                 <div
@@ -615,29 +630,11 @@ editor: {type: Object},
     			}
                 ${this.currentCollection && this.mode === 'myCollection'
     					? html`
-    							<div
-    									class='collection-back-button'
-    								@click=${() => {
-    									this.currentCollection = null;
-    								}}
-    							>
-    								<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`
 													<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;'
+														.class=${'gif-image'}
 														.url=${gif}
 														.alt=${'gif-image'}>
 														</image-component>
@@ -650,26 +647,14 @@ editor: {type: Object},
     			${this.currentCollection &&
     				this.mode === 'subscribedCollection'
     					? html`
-    							<div
-    									class='collection-back-button'
-    								@click=${() => {
-    									this.currentCollection = null;
-    								}}
-    							>
-    								<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) => {
     								return html`
-    									<img
-    										class='collection-gif'
-    										onerror=${(e) => {
-    											e.target.src = gif;
-    										}}
-    										src=${gif}
-    									/>
+												<image-component
+													.class=${'gif-image'}
+													.url=${gif}
+													.alt=${'gif-image'}>
+													</image-component>
     								`;
     							})}
     								</div>
@@ -678,13 +663,6 @@ editor: {type: Object},
     			}
     						${this.currentCollection && this.mode === 'explore'
     					? html`
-    							<button
-    								@click=${() => {
-    									this.currentCollection = null;
-    								}}
-    							>
-    								Back
-    							</button>
     							<button
     								@click=${() => {
     									this.addCollectionToList(
diff --git a/qortal-ui-plugins/plugins/core/components/ChatGifs/ChatGifsExplore-css.js b/qortal-ui-plugins/plugins/core/components/ChatGifs/ChatGifsExplore-css.js
new file mode 100644
index 00000000..ce80afc1
--- /dev/null
+++ b/qortal-ui-plugins/plugins/core/components/ChatGifs/ChatGifsExplore-css.js
@@ -0,0 +1,64 @@
+import { css } from 'lit';
+
+export const chatGifsExploreStyles = css`
+.container-body {
+display: flex;
+flex-direction: column;
+align-items: center;
+max-width: 100%;
+height: 100%;
+}
+
+.collection-wrapper {
+display: flex;
+flex-direction: column;
+width: 100%;
+height: 100%;
+overflow: hidden;
+}
+
+.collection-card {
+display: flex;
+font-family: Roboto, sans-serif;
+font-weight: 300;
+letter-spacing: 0.3px;
+font-size: 19px;
+color: var(--chat-bubble-msg-color);
+flex-direction: row;
+align-items: center;
+transition: all 0.3s ease-in-out;
+box-shadow: none;
+padding: 10px;
+cursor: pointer;
+}
+
+.collection-card:hover {
+border: none;
+border-radius: 5px;
+background-color: var(--gif-collection-hover-bg);
+}
+
+.search-collection-name {
+display: block;
+padding: 8px 10px;
+font-size: 16px;
+font-family: Montserrat, sans-serif;
+font-weight: 600;
+background-color: #ebeaea21;
+border: 1px solid var(--mdc-theme-primary);
+border-radius: 5px;
+color: var(--chat-bubble-msg-color);
+width: 90%;
+margin: 10px 0;
+outline: none;
+}
+
+.search-collection-name::placeholder {
+font-size: 16px;
+font-family: Montserrat, sans-serif;
+font-weight: 600;
+opacity: 0.6;
+color: var(--chat-bubble-msg-color);
+}
+
+`
diff --git a/qortal-ui-plugins/plugins/core/components/ChatGifs/ChatGifsExplore.js b/qortal-ui-plugins/plugins/core/components/ChatGifs/ChatGifsExplore.js
index 73e5c872..1c1eb3a9 100644
--- a/qortal-ui-plugins/plugins/core/components/ChatGifs/ChatGifsExplore.js
+++ b/qortal-ui-plugins/plugins/core/components/ChatGifs/ChatGifsExplore.js
@@ -1,92 +1,98 @@
-import {LitElement, html, css} from 'lit';
-import {render} from 'lit/html.js';
-import {Epml} from '../../../../epml.js';
-import * as zip from '@zip.js/zip.js';
-import {saveAs} from 'file-saver';
+import { LitElement, html, css } from 'lit';
+import { Epml } from '../../../../epml.js';
+import { chatGifsExploreStyles } from './ChatGifsExplore-css.js';
+import { translate, get } from 'lit-translate';
 import '@material/mwc-icon';
-import ShortUniqueId from 'short-unique-id';
-import {publishData} from '../../../utils/publish-image.js';
 
-const parentEpml = new Epml({type: 'WINDOW', source: window.parent});
+const parentEpml = new Epml({ type: 'WINDOW', source: window.parent });
 
 class ChatGifsExplore extends LitElement {
-	static get properties() {
-		return {
-			currentCollection: {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 },
+};
+}
 
-	static get styles() {
-		return css``;
-	}
+    static styles = [chatGifsExploreStyles];
 
-	constructor() {
-		super();
-		this.downObserverElement = '';
-		this.viewElement = '';
-		this.exploreCollections = [];
-	}
+    constructor() {
+    	super();
+			this.searchCollectionName = '';
+    	this.downObserverElement = '';
+    	this.viewElement = '';
+    	this.exploreCollections = [];
+    }
 
-	elementObserver() {
-		const options = {
-			root: this.viewElement,
-			rootMargin: '0px',
-			threshold: 1,
-		};
-		// identify an element to observe
-		const elementToObserve = this.downObserverElement;
-		// passing it a callback function
-		const observer = new IntersectionObserver(
-			this.observerHandler,
-			options
-		);
-		// call `observe()` on that MutationObserver instance,
-		// passing it the element to observe, and the options object
-		observer.observe(elementToObserve);
-	}
+    elementObserver() {
+    	const options = {
+    		root: this.viewElement,
+    		rootMargin: '0px',
+    		threshold: 1,
+    	};
+    	// identify an element to observe
+    	const elementToObserve = this.downObserverElement;
+    	// passing it a callback function
+    	const observer = new IntersectionObserver(
+    		this.observerHandler,
+    		options
+    	);
+    	// call `observe()` on that MutationObserver instance,
+    	// passing it the element to observe, and the options object
+    	observer.observe(elementToObserve);
+    }
 
-	observerHandler(entries) {
-		if (!entries[0].isIntersecting) {
-			return;
-		} else {
-			if (this.exploreCollections.length < 20) {
-				return;
-			}
+    observerHandler(entries) {
+    	if (!entries[0].isIntersecting) {
+    		return;
+    	} else {
+    		if (this.exploreCollections.length < 20) {
+    			return;
+    		}
 
-			this.getMoreExploreGifs();
-		}
-	}
+    		this.getMoreExploreGifs();
+    	}
+    }
 
-	async firstUpdated() {
-		this.viewElement = this.shadowRoot.getElementById('viewElement');
-		this.downObserverElement =
-			this.shadowRoot.getElementById('downObserver');
-		this.elementObserver();
-	}
+    async firstUpdated() {
+    	this.viewElement = this.shadowRoot.getElementById('viewElement');
+    	this.downObserverElement =
+    		this.shadowRoot.getElementById('downObserver');
+    	this.elementObserver();
+    }
 
-	render() {
-		return html`
-			<div id="viewElement" class="container-body">
-				${this.exploreCollections.map((collection) => {
-					return html`
-						<div>
-							<p
-								@click=${() => {
-									this.setCurrentCollection(collection);
-								}}
-							>
-								${collection.identifier}
-							</p>
-						</div>
-					`;
-				})}
-				<div id="downObserver"></div>
+    render() {
+    	console.log(6, "chat-gifs-explore-here");
+    	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) => {
+    			return html`
+    					<div class='collection-card' @click=${() => {
+    								this.setCurrentCollection(collection);
+    						}}>
+    							${collection.identifier}
+    					</div>
+    				`;
+    	})}
 			</div>
-		`;
-	}
+    			<div id="downObserver"></div>
+    		</div>
+    	`;
+    }
+
 }
 
 window.customElements.define('chat-gifs-explore', ChatGifsExplore);
diff --git a/qortal-ui-plugins/plugins/core/components/ImageComponent.js b/qortal-ui-plugins/plugins/core/components/ImageComponent.js
index 4090a1dd..7a3ae908 100644
--- a/qortal-ui-plugins/plugins/core/components/ImageComponent.js
+++ b/qortal-ui-plugins/plugins/core/components/ImageComponent.js
@@ -6,9 +6,9 @@ export class ImageComponent extends LitElement {
 
 static get properties() {
 return {
+class: { type: String },
 url: { type: String },
 alt: { type: String },
-style: { type: String },
 attempts: { type: Number },
 maxAttempts: { type: Number },
 error: { type: Boolean }
@@ -26,12 +26,27 @@ color: var(--chat-bubble-msg-color);
 font-weight: 300;
 padding: 10px 10px;
 }
+
+.gif-image {
+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;
+}
+
+.gif-image:hover {
+border: 1px solid var(--mdc-theme-primary );
+}
 `
 }
 
 constructor() {
   super();
-  this.src = '';
   this.attempts = 0;
   this.maxAttempts = 5;
 }
@@ -41,14 +56,18 @@ async _fetchImage() {
   if (this.attempts > this.maxAttempts) return;
 
   try {
-    const response = await fetch(`http://your-backend-api/image-src`);
+    const response = await fetch(this.url);
     const data = await response.json();
+    console.log({data});
     if (data.ok) {
     this.error = false;
-    } else {
+    this.url = data.src;
+    this.requestUpdate();
+    } else if (!data.ok || data.error) {
       this.error = true;
+    } else {
+      this.error = false;
     }
-    this.src = data.src;
   } catch (error) {
     this.error = true;
     console.error(error);
@@ -57,12 +76,18 @@ async _fetchImage() {
 }
 
 render() {
-console.log(19, "image component here");
+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 
   ? html`
 <img
-.style=${this.style}
+class=${this.class}
 src=${this.url}
 alt=${this.alt} 
 @error=${this._fetchImage}
diff --git a/qortal-ui-plugins/plugins/utils/publish-image.js b/qortal-ui-plugins/plugins/utils/publish-image.js
index ed8e2a64..9f03644a 100644
--- a/qortal-ui-plugins/plugins/utils/publish-image.js
+++ b/qortal-ui-plugins/plugins/utils/publish-image.js
@@ -126,8 +126,6 @@ export const publishData = async ({
 				}
 				
 			}
-
-			console.log({postBody})
 		
 			let uploadDataUrl = `/arbitrary/${service}/${registeredName}${urlSuffix}?apiKey=${getApiKey()}`
 			if (identifier != null && identifier.trim().length > 0) {