diff --git a/qortal-ui-core/language/us.json b/qortal-ui-core/language/us.json index b95a9b43..2499a3a1 100644 --- a/qortal-ui-core/language/us.json +++ b/qortal-ui-core/language/us.json @@ -578,7 +578,8 @@ "cchange82": "My Collections", "cchange83": "Subscribed Collections", "cchange84": "Upload your gif files", - "cchange85": "File should be .Gif" + "cchange85": "File should be .Gif", + "cchange86": "Upload Collection" }, "welcomepage": { "wcchange1": "Welcome to Q-Chat", 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 c975016f..6144b149 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatGifs/ChatGifs-css.js +++ b/qortal-ui-plugins/plugins/core/components/ChatGifs/ChatGifs-css.js @@ -1,167 +1,302 @@ -import { css } from 'lit' +import { css } from 'lit'; export const gifExplorerStyles = css` - .gifs-container { - position: relative; - display: flex; - padding: 10px 15px; - border-radius: 12px; - box-shadow: rgba(0, 0, 0, 0.09) 0px 3px 12px; - background-color: var(--chat-menu-bg); - width: fit-content; - justify-self: flex-end; - place-self: end flex-end; - min-height: 400px; - min-width: 370px; - margin-bottom: 8px; - margin-right: 5px; - box-shadow: var(--gifs-drop-shadow); - } +.gifs-container { +position: relative; +display: flex; +padding: 10px 15px; +border-radius: 12px; +box-shadow: rgba(0, 0, 0, 0.09) 0px 3px 12px; +background-color: var(--chat-menu-bg); +width: fit-content; +justify-self: flex-end; +place-self: end flex-end; +min-height: 400px; +max-height: 95vh; +min-width: 370px; +box-shadow: var(--gifs-drop-shadow); +} - .gif-explorer-container { - min-height: 400px; - display: flex; - flex-direction: column; - justify-content: flex-start; - width: 100%; - align-items: center; - gap: 15px; - } +.gif-explorer-container { +min-height: 400px; +display: flex; +flex-direction: column; +justify-content: flex-start; +width: 100%; +align-items: center; +gap: 15px; +} - .title-row { - display: flex; - justify-content: center; - align-items: center; - width: 100%; - } +.title-row { +display: flex; +justify-content: center; +align-items: center; +width: 100%; +} - .gif-explorer-title { - flex: 1; - text-align: center; - font-family: Roboto, sans-serif; - letter-spacing: 0.8px; - font-size: 25px; - color: var(--chat-bubble-msg-color); - margin: 0; - user-select: none; - } +.gif-explorer-title { +flex: 1; +text-align: center; +font-family: Roboto, sans-serif; +letter-spacing: 0.8px; +font-size: 25px; +color: var(--chat-bubble-msg-color); +margin: 0; +user-select: none; +} - .explore-collections-icon { - margin-left: auto; - text-align: right; - font-size: 20px; - color: var(--chat-group); - box-shadow: var(--gif-search-icon-bs); - padding: 7px; - background-color: var(--gif-search-icon); - border: none; - border-radius: 8px; - cursor: pointer; - } +.explore-collections-icon { +margin-left: auto; +text-align: right; +font-size: 20px; +color: var(--chat-group); +box-shadow: var(--gif-search-icon-bs); +padding: 7px; +background-color: var(--gif-search-icon); +border: none; +border-radius: 8px; +cursor: pointer; +} - .create-collections-icon { - position: absolute; - bottom: 5px; - left: 50%; - transform: translateX(-50%); - padding: 4px; - font-size: 22px; - background-color: var(--mdc-theme-primary); - color: white; - border-radius: 8px; - box-shadow: 0 0 0 rgba(0, 0, 0, 0.2); - transition: all 0.3s ease-in-out; - } +.create-collections-icon { +position: absolute; +bottom: 5px; +left: 50%; +transform: translateX(-50%); +padding: 4px; +font-size: 22px; +background-color: var(--mdc-theme-primary); +color: white; +border-radius: 8px; +box-shadow: 0 0 0 rgba(0, 0, 0, 0.2); +transition: all 0.3s ease-in-out; +} - .create-collections-icon:hover { - cursor: pointer; - box-shadow: 0px 4px 5px 0px hsla(0,0%,0%,0.14), 0px 1px 10px 0px hsla(0,0%,0%,0.12), 0px 2px 4px -1px hsla(0,0%,0%,0.2); - } +.create-collections-icon:hover { +cursor: pointer; +box-shadow: 0px 4px 5px 0px hsla(0, 0%, 0%, 0.14), +0px 1px 10px 0px hsla(0, 0%, 0%, 0.12), +0px 2px 4px -1px hsla(0, 0%, 0%, 0.2); +} - .collections-button-row { - width: auto; - background-color: var(--gif-button-row-bg); - border-radius: 35px; - padding: 2px; - margin-top: 10px; - } +.collections-button-row { +width: auto; +background-color: var(--gif-button-row-bg); +border-radius: 35px; +padding: 2px; +margin-top: 10px; +} - .collections-button-innerrow { - display: flex; - flex-direction: row; - align-items: center; - } +.collections-button-innerrow { +display: flex; +flex-direction: row; +align-items: center; +} - .my-collections-button { - font-size: 16px; - font-family: "Maven Pro", sans-serif; - letter-spacing: 0.5px; - color: var(--gif-button-row-color); - border-radius: 35px; - padding: 8px 20px; - margin: 2px 0; - cursor: pointer; - user-select: none; - } +.my-collections-button { +font-size: 16px; +font-family: 'Maven Pro', sans-serif; +letter-spacing: 0.5px; +color: var(--gif-button-row-color); +border-radius: 35px; +padding: 8px 20px; +margin: 2px 0; +cursor: pointer; +user-select: none; +} - .subscribed-collections-button { - font-size: 16px; - font-family: "Maven Pro", sans-serif; - letter-spacing: 0.5px; - color: var(--gif-button-row-color); - border-radius: 35px; - padding: 8px 20px; - margin: 2px 0; - cursor: pointer; - user-select: none; - } +.subscribed-collections-button { +font-size: 16px; +font-family: 'Maven Pro', sans-serif; +letter-spacing: 0.5px; +color: var(--gif-button-row-color); +border-radius: 35px; +padding: 8px 20px; +margin: 2px 0; +cursor: pointer; +user-select: none; +} - .collections-button-active { - display: flex; - align-items: center; - justify-content: center; - background-color: white; - color: var(--mdc-theme-primary); - border-radius: 25px; - padding: 8px 20px; - margin: 2px 0; - box-shadow: rgb(0 0 0 / 14%) 0px 1px 1px 0px, rgb(0 0 0 / 12%) 0px 2px 1px -1px, rgb(0 0 0 / 20%) 0px 1px 3px 0px; - /* box-shadow: rgb(99 99 99 / 20%) 0px 2px 8px 0px; */ - transition: all 0.3s ease-in-out; - cursor: auto; - } +.collections-button-active { +display: flex; +align-items: center; +justify-content: center; +background-color: white; +color: var(--mdc-theme-primary); +border-radius: 25px; +padding: 8px 20px; +margin: 2px 0; +box-shadow: rgb(0 0 0 / 14%) 0px 1px 1px 0px, +rgb(0 0 0 / 12%) 0px 2px 1px -1px, rgb(0 0 0 / 20%) 0px 1px 3px 0px; +transition: all 0.3s ease-in-out; +cursor: auto; +} - .new-collection-row { - display: flex; - flex-direction: column; - justify-content: center; - } +.collection-wrapper { +display: flex; +flex-direction: column; +width: 100%; +height: 100%; +} - .new-collection-subrow { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - gap: 5px; - } +.new-collection-row { +display: flex; +flex-direction: column; +justify-content: center; +height: 100%; +} - .new-collection-title { - font-family: Maven Pro, sans-serif; - color: var(--chat-bubble-msg-color); - font-size: 18px; - letter-spacing: 0.6px; - margin: 0; - user-select: none; - } +.new-collection-subrow { +display: flex; +flex-direction: column; +justify-content: center; +align-items: center; +gap: 5px; +} - .new-collection-subtitle { - font-family: Roboto, sans-serif; - color: var(--chat-bubble-msg-color); - font-weight: 300; - opacity: 0.9; - font-size: 14px; - letter-spacing: 0.3px; - margin: 0; - user-select: none; - } -` +.new-collection-title { +font-family: Maven Pro, sans-serif; +color: var(--chat-bubble-msg-color); +font-size: 18px; +letter-spacing: 0.6px; +margin: 0; +user-select: none; +} + +.new-collection-subtitle { +font-family: Roboto, sans-serif; +color: var(--chat-bubble-msg-color); +font-weight: 300; +opacity: 0.9; +font-size: 14px; +letter-spacing: 0.3px; +margin: 0; +user-select: none; +} + +.new-collection-container { +display: flex; +margin: 15px 20px; +border: 3.5px dashed #b898c1; +border-radius: 10px; +background-color: #d7d3db2e; +align-items: center; +justify-content: center; +cursor: pointer; +} + +.new-collection-icon { +font-size: 30px; +color: var(--mdc-theme-primary); +} + +.gifs-added-col { +flex-direction: column; +justify-content: space-between; +flex: 1 1 0%; +margin-top: 10px; +overflow-y: auto; +max-height: 300px; +} + +.gifs-added-col::-webkit-scrollbar-track { +background-color: whitesmoke; +border-radius: 7px; +} + +.gifs-added-col::-webkit-scrollbar { +width: 6px; +border-radius: 7px; +background-color: whitesmoke; +} + +.gifs-added-col::-webkit-scrollbar-thumb { +background-color: rgb(180, 176, 176); +border-radius: 7px; +transition: all 0.3s ease-in-out; +} + +.gifs-added-row { +display: flex; +flex-direction: column; +gap: 5px; +overflow-y: auto; +} + +.gifs-added-row .gif-input:last-child { +border-bottom: none; +} + +.gif-input { +display: flex; +flex-direction: row; +align-items: center; +gap: 10px; +background-color: transparent; +padding: 15px 5px; +border-bottom: 1px solid #7b787888; +} + +.gif-input-img { +width: 70px; +height: 70px; +border-radius: 10px; +} + +.gif-input-field { +height: 30px; +background-color: transparent; +border: none; +color: var(--chat-bubble-msg-color); +border-bottom: 1px solid var(--chat-bubble-msg-color); +width: 100%; +padding: 0; +margin: 0; +outline: 0; +font-size: 16px; +font-family: Roboto, sans-serif; +letter-spacing: 0.3px; +font-weight: 300; +} + +.upload-collection-row { +display: flex; +align-items: center; +justify-content: space-between; +width: 100%; +margin-top: 10px; +} + +.upload-button { +font-family: Roboto, sans-serif; +font-size: 16px; +color: var(--mdc-theme-primary); +background-color: transparent; +padding: 8px 10px; +border-radius: 5px; +border: none; +transition: all 0.3s ease-in-out; +} + +.upload-back-button { +font-family: Roboto, sans-serif; +font-size: 16px; +color: #f44336; +background-color: transparent; +padding: 8px 10px; +border-radius: 5px; +border: none; +transition: all 0.3s ease-in-out; +} + +.upload-back-button:hover { +cursor: pointer; +background-color: #f4433663; +} + +.upload-button:hover { +cursor: pointer; +background-color: #03a8f475; +} + +`; diff --git a/qortal-ui-plugins/plugins/core/components/ChatGifs/ChatGifs.js b/qortal-ui-plugins/plugins/core/components/ChatGifs/ChatGifs.js index cd5b291c..a6315fcc 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatGifs/ChatGifs.js +++ b/qortal-ui-plugins/plugins/core/components/ChatGifs/ChatGifs.js @@ -1,636 +1,784 @@ -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 '@material/mwc-icon' +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 '@material/mwc-icon'; import ShortUniqueId from 'short-unique-id'; -import { publishData } from '../../../utils/publish-image.js'; -import { translate, get } from 'lit-translate'; -import { gifExplorerStyles } from "./ChatGifs-css.js"; +import {publishData} from '../../../utils/publish-image.js'; +import {translate, get} from 'lit-translate'; +import {gifExplorerStyles} from './ChatGifs-css.js'; import './ChatGifsExplore.js'; import '@vaadin/tooltip'; -const parentEpml = new Epml({ type: 'WINDOW', source: window.parent }) +const parentEpml = new Epml({type: 'WINDOW', source: window.parent}); class ChatGifs extends LitElement { - static get properties() { - return { - selectedAddress: { type: Object }, - myGifCollections: { type: Array }, - mySubscribedCollections: { type: Array }, - exploreCollections: { type: Array }, - gifsToBeAdded: { type: Array }, - webWorkerImage: { type: Object }, - mode: { type: String }, - currentCollection: { type: String }, - isLoading: { type: String }, - newCollectionName: { type: String }, - editor: { type: Object }, - } - } +static get properties() { +return { +selectedAddress: {type: Object}, +myGifCollections: {type: Array}, +mySubscribedCollections: {type: Array}, +exploreCollections: {type: Array}, +gifsToBeAdded: {type: Array}, +webWorkerImage: {type: Object}, +mode: {type: String}, +currentCollection: {type: String}, +isLoading: {type: String}, +newCollectionName: {type: String}, +editor: {type: Object}, +}; +} - static styles = [gifExplorerStyles] + static styles = [gifExplorerStyles]; constructor() { - super() - this.uid = new ShortUniqueId() - 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.newCollectionName = "" + super(); + this.uid = new ShortUniqueId(); + 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.newCollectionName = ''; } - async structureCollections(gifCollections){ - try { - const myNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node]; - const nodeUrl = myNode.protocol + '://' + myNode.domain + ':' + myNode.port; - const getMetaDataGifs = (gifCollections || []).map(async (collection) => { - let collectionObj = collection - try { - const metaData = await parentEpml.request('apiCall', { - url: `/arbitrary/metadata/GIF_REPOSITORY/${this.myAccountName}/${collection.identifier}` - }) + async structureCollections(gifCollections) { + try { + const myNode = + window.parent.reduxStore.getState().app.nodeConfig.knownNodes[ + window.parent.reduxStore.getState().app.nodeConfig.node + ]; + const nodeUrl = + myNode.protocol + '://' + myNode.domain + ':' + myNode.port; + const getMetaDataGifs = (gifCollections || []).map( + async (collection) => { + let collectionObj = collection; + try { + const metaData = await parentEpml.request('apiCall', { + url: `/arbitrary/metadata/GIF_REPOSITORY/${this.myAccountName}/${collection.identifier}`, + }); - collectionObj = { - ...collection, - gifUrls: [] - } - if(metaData.files){ - const metaDataArray = metaData.files.map((data)=> { - return `${nodeUrl}/arbitrary/GIF_REPOSITORY/${this.myAccountName}/${collection.identifier}?filepath=${data}` - }) - - - collectionObj = { - ...collection, - gifUrls: metaDataArray - } - - } + collectionObj = { + ...collection, + gifUrls: [], + }; + if (metaData.files) { + const metaDataArray = metaData.files.map((data) => { + return `${nodeUrl}/arbitrary/GIF_REPOSITORY/${this.myAccountName}/${collection.identifier}?filepath=${data}`; + }); - } catch (error) { - console.log(error) - } - - return collectionObj - }) - return await Promise.all(getMetaDataGifs) - } catch (error) { - - } + collectionObj = { + ...collection, + gifUrls: metaDataArray, + }; + } + } catch (error) { + console.log(error); + } + + return collectionObj; + } + ); + return await Promise.all(getMetaDataGifs); + } catch (error) {} } - async getMoreExploreGifs(){ - try { - const getAllGifCollections = await parentEpml.request("apiCall", { - type: "api", - url: `/arbitrary/resources?service=GIF_REPOSITORY&limit=20&offset=${this.pageNumber * 20}`, - }); + async getMoreExploreGifs() { + try { + const getAllGifCollections = await parentEpml.request('apiCall', { + type: 'api', + url: `/arbitrary/resources?service=GIF_REPOSITORY&limit=20&offset=${ + this.pageNumber * 20 + }`, + }); - const gifCollectionWithMetaData = await this.structureCollections(getAllGifCollections) - this.exploreCollections = [...this.exploreCollections, ...gifCollectionWithMetaData] + const gifCollectionWithMetaData = await this.structureCollections( + getAllGifCollections + ); + this.exploreCollections = [ + ...this.exploreCollections, + ...gifCollectionWithMetaData, + ]; - this.pageNumber = this.pageNumber + 1 - } catch (error) { - console.error(error) - } + this.pageNumber = this.pageNumber + 1; + } catch (error) { + console.error(error); + } } - async getCollectionList(){ - try { - return await parentEpml.request("apiCall", { - type: "api", - url: `/lists/gifSubscribedRepos`, - }); - - } catch (error) { - - } + async getCollectionList() { + try { + return await parentEpml.request('apiCall', { + type: 'api', + url: `/lists/gifSubscribedRepos`, + }); + } catch (error) {} } - async addCollectionToList(collection){ - try { - const body = { - - "items": [ - collection - ] - - } + async addCollectionToList(collection) { + try { + const body = { + items: [collection], + }; - const bodyToString = JSON.stringify(body) - await parentEpml.request("apiCall", { - type: "api", - method: "POST", - url: `/lists/gifSubscribedRepos`, - body: bodyToString, - headers: { - 'Content-Type': 'application/json' - } - }) - } catch (error) { - - } + const bodyToString = JSON.stringify(body); + await parentEpml.request('apiCall', { + type: 'api', + method: 'POST', + url: `/lists/gifSubscribedRepos`, + body: bodyToString, + headers: { + 'Content-Type': 'application/json', + }, + }); + } catch (error) {} } - async removeCollectionFromList(collection){ - try { - - const body = { - - "items": [ - collection - ] - - } - const bodyToString = JSON.stringify(body) - await parentEpml.request("apiCall", { - type: "api", - method: 'DELETE', - url: `/lists/gifSubscribedRepos`, - body: bodyToString, - headers: { - 'Content-Type': 'application/json' - } - }) - } catch (error) { - - } + async removeCollectionFromList(collection) { + try { + const body = { + items: [collection], + }; + const bodyToString = JSON.stringify(body); + await parentEpml.request('apiCall', { + type: 'api', + method: 'DELETE', + url: `/lists/gifSubscribedRepos`, + body: bodyToString, + headers: { + 'Content-Type': 'application/json', + }, + }); + } catch (error) {} } - async getMyGifCollections(){ - const userName = await this.getName(this.selectedAddress.address); - this.myAccountName = userName - if(this.myAccountName){ - const getMyGifColloctions = await parentEpml.request('apiCall', { - url: `/arbitrary/resources?service=GIF_REPOSITORY&limit=0&name=${this.myAccountName}` - }) - const gifCollectionWithMetaData = await this.structureCollections(getMyGifColloctions) - - console.log({gifCollectionWithMetaData}) - this.myGifCollections = gifCollectionWithMetaData - } + async getMyGifCollections() { + const userName = await this.getName(this.selectedAddress.address); + this.myAccountName = userName; + if (this.myAccountName) { + const getMyGifColloctions = await parentEpml.request('apiCall', { + url: `/arbitrary/resources?service=GIF_REPOSITORY&limit=0&name=${this.myAccountName}`, + }); + const gifCollectionWithMetaData = await this.structureCollections( + getMyGifColloctions + ); + + console.log({gifCollectionWithMetaData}); + this.myGifCollections = gifCollectionWithMetaData; + } } - async getAllCollections(){ - this.pageNumber = 0 - // for the explore section - const getAllGifCollections = await parentEpml.request("apiCall", { - type: "api", - url: `/arbitrary/resources?service=GIF_REPOSITORY&limit=20&offset=${this.pageNumber * 20}`, - }); - const gifCollectionWithMetaData = await this.structureCollections(getAllGifCollections) - this.exploreCollections = gifCollectionWithMetaData - this.pageNumber = this.pageNumber + 1 + async getAllCollections() { + this.pageNumber = 0; + // for the explore section + const getAllGifCollections = await parentEpml.request('apiCall', { + type: 'api', + url: `/arbitrary/resources?service=GIF_REPOSITORY&limit=20&offset=${ + this.pageNumber * 20 + }`, + }); + const gifCollectionWithMetaData = await this.structureCollections( + getAllGifCollections + ); + this.exploreCollections = gifCollectionWithMetaData; + this.pageNumber = this.pageNumber + 1; } - async getSavedCollections(){ - const getCollectionList = await this.getCollectionList() - let savedCollections = [] - const getSavedGifRepos = (getCollectionList || []).map(async (collection) => { - let splitCollection = collection.split('/') - 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}` - }) - if(data.length > 0){ - savedCollections.push(data[0]) - } - } catch (error) { - console.log(error) - } - return collection - }) - await Promise.all(getSavedGifRepos) - const savedCollectionsWithMetaData = await this.structureCollections(savedCollections) - this.mySubscribedCollections = savedCollectionsWithMetaData - } + async getSavedCollections() { + const getCollectionList = await this.getCollectionList(); + let savedCollections = []; + const getSavedGifRepos = (getCollectionList || []).map( + async (collection) => { + let splitCollection = collection.split('/'); + 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}`, + }); + if (data.length > 0) { + savedCollections.push(data[0]); + } + } catch (error) { + console.log(error); + } + return collection; + } + ); + await Promise.all(getSavedGifRepos); + const savedCollectionsWithMetaData = await this.structureCollections( + savedCollections + ); + this.mySubscribedCollections = 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;"; + 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 - await this.getMyGifCollections() - await this.getAllCollections() - await this.getSavedCollections() - this.isLoading = false - } catch (error) { - this.isLoading = false - console.error(error) - } + try { + this.isLoading = true; + await this.getMyGifCollections(); + await this.getAllCollections(); + await this.getSavedCollections(); + this.isLoading = false; + } catch (error) { + this.isLoading = false; + console.error(error); + } } async updated(changedProperties) { - console.log({changedProperties}) - if (changedProperties && changedProperties.has('mode')) { - const mode = this.mode - console.log({mode}) - if (mode === 'myCollection') { - try { - this.isLoading = true + console.log({changedProperties}); + if (changedProperties && changedProperties.has('mode')) { + const mode = this.mode; + console.log({mode}); + if (mode === 'myCollection') { + try { + this.isLoading = true; - await this.getMyGifCollections() - this.isLoading = false - } catch (error) { - this.isLoading = false - } - - } + await this.getMyGifCollections(); + 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.isLoading = true - - await this.getSavedCollections() - 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.isLoading = true; + + await this.getSavedCollections(); + this.isLoading = false; + } catch (error) { + this.isLoading = false; + } + } + } } - async getName (recipient) { - try { - const getNames = await parentEpml.request("apiCall", { - type: "api", - url: `/names/address/${recipient}`, - }); + async getName(recipient) { + try { + const getNames = await parentEpml.request('apiCall', { + type: 'api', + url: `/names/address/${recipient}`, + }); - if (Array.isArray(getNames) && getNames.length > 0 ) { - return getNames[0].name - } else { - return '' - } - - } catch (error) { - return "" - } + if (Array.isArray(getNames) && getNames.length > 0) { + return getNames[0].name; + } else { + return ''; + } + } catch (error) { + return ''; + } } - 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) + 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(){ - if(!this.newCollectionName){ - parentEpml.request('showSnackBar', get("chatpage.cchange27")); - return - } + async uploadGifCollection() { + if (!this.newCollectionName) { + parentEpml.request('showSnackBar', get('chatpage.cchange27')); + return; + } - // if(!isAlphanumeric(this.newCollectionName)){ - // parentEpml.request('showSnackBar', get("chatpage.cchange27")); - // return - // } - try { - 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(!isAlphanumeric(this.newCollectionName)){ + // parentEpml.request('showSnackBar', get("chatpage.cchange27")); + // return + // } + try { + 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.cchange27")); - return - } - function blobToBase64(blob) { - return new Promise((resolve, _) => { - const reader = new FileReader(); - reader.onloadend = () => resolve(reader.result); - reader.readAsDataURL(blob); - }); - } - 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!"); + if (doesNameExist.length !== 0) { + parentEpml.request('showSnackBar', get('chatpage.cchange27')); + return; + } + function blobToBase64(blob) { + return new Promise((resolve, _) => { + const reader = new FileReader(); + reader.onloadend = () => resolve(reader.result); + reader.readAsDataURL(blob); + }); + } + 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. + // 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 }); + const zipWriter = new zip.ZipWriter(zipFileWriter, { + bufferedWrite: true, + }); + for (let i = 0; i < this.gifsToBeAdded.length; i++) { + await zipWriter.add( + this.gifsToBeAdded[i].name, + new zip.BlobReader(this.gifsToBeAdded[i].file) + ); + } - for (let i = 0; i < this.gifsToBeAdded.length; i++) { - await zipWriter.add(this.gifsToBeAdded[i].name, new zip.BlobReader(this.gifsToBeAdded[i].file)); + await zipWriter.close(); + const zipFileBlob = await zipFileWriter.getData(); + const blobTobase = await blobToBase64(zipFileBlob); + console.log({blobTobase}); + + if (!userName) { + parentEpml.request('showSnackBar', get('chatpage.cchange27')); + this.isLoading = false; + return; + } + const id = this.uid(); + const identifier = `gif_${id}`; + await publishData({ + registeredName: userName, + file: blobTobase.split(',')[1], + service: 'GIF_REPOSITORY', + identifier: this.newCollectionName, + parentEpml, + metaData: undefined, + uploadType: 'zip', + selectedAddress: this.selectedAddress, + worker: this.webWorkerImage, + isBase64: true, + }); + + await new Promise((res) => { + let interval = null; + let stop = false; + const getAnswer = async () => { + if (!stop) { + stop = true; + try { + let myCollection = await parentEpml.request( + 'apiCall', + { + url: `/arbitrary/resources?service=GIF_REPOSITORY&limit=0&name=${userName}&identifier=${this.newCollectionName}`, + } + ); + if (myCollection.length > 0) { + clearInterval(interval); + res(); + } + } catch (error) {} + stop = false; + } + }; + interval = setInterval(getAnswer, 5000); + }); + saveAs(zipFileBlob, 'zipfile'); + console.log({zipFileBlob}); + } catch (error) { + console.log(error); + } } - - await zipWriter.close(); - const zipFileBlob = await zipFileWriter.getData() - const blobTobase = await blobToBase64(zipFileBlob) - console.log({blobTobase}) - - if (!userName) { - parentEpml.request('showSnackBar', get("chatpage.cchange27")); - this.isLoading = false; - return; - } - const id = this.uid(); - const identifier = `gif_${id}`; - await publishData({ - registeredName: userName, - file : blobTobase.split(',')[1], - service: 'GIF_REPOSITORY', - identifier: this.newCollectionName, - parentEpml, - metaData: undefined, - uploadType: 'zip', - selectedAddress: this.selectedAddress, - worker: this.webWorkerImage, - isBase64: true - }) - - await new Promise((res)=> { - let interval = null - let stop = false - const getAnswer = async () => { - if (!stop) { - stop = true - try { - let myCollection = await parentEpml.request('apiCall', { - url: `/arbitrary/resources?service=GIF_REPOSITORY&limit=0&name=${userName}&identifier=${this.newCollectionName}` - }) - if (myCollection.length > 0) { - clearInterval(interval) - res() - } - } catch (error) {} - stop = false - } - } - interval = setInterval(getAnswer, 5000) - }) - saveAs(zipFileBlob, 'zipfile'); - console.log({zipFileBlob}) - } catch (error) { - console.log(error) - } - } - - setCurrentCollection(val){ - this.currentCollection = val + setCurrentCollection(val) { + this.currentCollection = val; } clearGifSelections() { - this.mode = "myCollection"; - this.gifsToBeAdded = []; + this.mode = 'myCollection'; + this.gifsToBeAdded = []; } render() { - console.log('this.currentCollection', this.currentCollection) - console.log(9, "chat gifs here") - return html` + console.log('this.currentCollection', this.currentCollection); + console.log(12, 'chat gifs here'); + return html`
- { - if (this.isLoading) return; - this.mode = "newCollection"; - }} - icon="vaadin:plus" - slot="icon"> - -
-

${translate("chatpage.cchange80")}

- { - if (this.isLoading) return; - this.mode = "explore"; - }} - icon="vaadin:search" + if (this.isLoading) return; + this.mode = 'newCollection'; + }} + icon="vaadin:plus" slot="icon"> - +

${translate( + 'chatpage.cchange80' + )}

+ { + if (this.isLoading) return; + this.mode = 'explore'; + }} + icon="vaadin:search" + slot="icon"> + + + text=${get('chatpage.cchange81')}>
-
+
{ - if (this.isLoading) return; - if (this.mode === "myCollection") return; - this.mode = "myCollection"; - }} + if (this.isLoading) return; + if (this.mode === 'myCollection') return; + this.mode = 'myCollection'; + }} > - ${translate("chatpage.cchange82")} + ${translate('chatpage.cchange82')}
{ - if(this.isLoading) return; - if (this.mode === "subscribedCollection") return; - this.mode = "subscribedCollection"; - }} + if (this.isLoading) return; + if (this.mode === 'subscribedCollection') return; + this.mode = 'subscribedCollection'; + }} > - ${translate("chatpage.cchange83")} + ${translate('chatpage.cchange83')}
-
- ${this.mode === "myCollection" && !this.currentCollection ? html` - ${this.isLoading === true ? html` -

Loading...

- ` : ''} - ${this.myGifCollections.map((collection)=> { - return html` -
-

{ - this.currentCollection = collection - }}>${collection.identifier}

- -
- ` - })} - ` : ''} - ${this.mode === "subscribedCollection" && !this.currentCollection ? html` - ${this.isLoading === true ? html` -

Loading...

- ` : ''} - ${this.mySubscribedCollections.map((collection)=> { - return html` -
-

{ - this.currentCollection = collection - }}>${collection.identifier}

- -
- ` - })} - ` : ''} - ${this.mode === "explore" && !this.currentCollection ? html` - ${this.isLoading === true ? html` -

Loading...

- ` : ''} - this.getMoreExploreGifs(val)} .exploreCollections=${this.exploreCollections} - .setCurrentCollection=${(val)=> this.setCurrentCollection(val)} - > - - ` : ''} - ${this.currentCollection && this.mode === "myCollection" ? html` - - ${this.currentCollection.gifUrls.map((gif)=> { - console.log({gif}) +
+ ${this.mode === 'myCollection' && !this.currentCollection + ? html` + ${this.isLoading === true + ? html`

Loading...

` + : ''} + ${this.myGifCollections.map((collection) => { + return html` +
+

{ + this.currentCollection = + collection; + }} + > + ${collection.identifier} +

+
+ `; + })} + ` + : '' + } + ${this.mode === 'subscribedCollection' && + !this.currentCollection + ? html` + ${this.isLoading === true + ? html`

Loading...

` + : ''} + ${this.mySubscribedCollections.map( + (collection) => { + return html` +
+

{ + this.currentCollection = + collection; + }} + > + ${collection.identifier} +

+
+ `; + } + )} + ` + : '' + } + ${this.mode === 'explore' && !this.currentCollection + ? html` + ${this.isLoading === true + ? html`

Loading...

` + : ''} + + this.getMoreExploreGifs(val)} + .exploreCollections=${this + .exploreCollections} + .setCurrentCollection=${(val) => + this.setCurrentCollection(val)} + > + ` + : '' + } + ${this.currentCollection && this.mode === 'myCollection' + ? html` + + ${this.currentCollection.gifUrls.map((gif) => { + console.log({gif}); - return html` - { - e.target.src = gif - }} src=${gif} style="width: 50px; height: 50px" /> - ` - })} - ` : ''} - ${this.currentCollection && this.mode === "subscribedCollection" ? html` - - ${this.currentCollection.gifUrls.map((gif)=> { - console.log({gif}) + return html` + { + e.target.src = gif; + }} + src=${gif} + style="width: 50px; height: 50px" + /> + `; + })} + ` + : '' + } + ${this.currentCollection && + this.mode === 'subscribedCollection' + ? html` + + ${this.currentCollection.gifUrls.map((gif) => { + console.log({gif}); - return html` - { - e.target.src = gif - }} src=${gif} style="width: 50px; height: 50px" /> - ` - })} - ` : ''} - ${this.currentCollection && this.mode === "explore" ? html` - - - ${this.currentCollection.gifUrls.map((gif)=> { - console.log({gif}) + return html` + { + e.target.src = gif; + }} + src=${gif} + style="width: 50px; height: 50px" + /> + `; + })} + ` + : '' + } + ${this.currentCollection && this.mode === 'explore' + ? html` + + + ${this.currentCollection.gifUrls.map((gif) => { + console.log({gif}); - return html` - { - e.target.src = gif - }} src=${gif} style="width: 50px; height: 50px" /> - ` - })} - ` : ''} - ${this.mode === "newCollection" ? html` -
-
-

- ${translate("chatpage.cchange84")} -

-

- ${translate("chatpage.cchange85")} -

-
- - - { - this.newCollectionName = e.target.value - })} - /> -
-
- ${this.gifsToBeAdded.map((gif, i)=> { - console.log({gif}) - return html` -
- - { - this.gifsToBeAdded[i] = { - ...gif, - name: e.target.value - } - })} /> -
- ` - })} -
- ` : ''} + return html` + { + e.target.src = gif; + }} + src=${gif} + style="width: 50px; height: 50px" + /> + `; + })} + ` + : '' + } + ${this.mode === 'newCollection' + ? html` +
+
+

+ ${translate('chatpage.cchange84')} +

+

+ ${translate('chatpage.cchange85')} +

+
+
+ this.shadowRoot + .getElementById( + 'file-picker-gif' + ) + .click()} + class="new-collection-container" + style=${this.gifsToBeAdded.length > 0 ? "padding: 10px 0;" : "padding: 60px 0;"} + > + + + +
+ + { + this.newCollectionName = + e.target.value; + }} + /> +
+
+ ${this.gifsToBeAdded.map((gif, i) => { + console.log({gif}); + return html` +
+ + { + this.gifsToBeAdded[i] = { + ...gif, + name: e.target + .value, + }; + }} + /> +
+ `; + })} +
+
+ + +
+
+
+ ` + : '' + }
-
+
- ` +
+ `; } + } -window.customElements.define('chat-gifs', ChatGifs) +window.customElements.define('chat-gifs', ChatGifs); diff --git a/qortal-ui-plugins/plugins/core/components/ChatGifs/ChatGifsExplore.js b/qortal-ui-plugins/plugins/core/components/ChatGifs/ChatGifsExplore.js index b5cca445..73e5c872 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatGifs/ChatGifsExplore.js +++ b/qortal-ui-plugins/plugins/core/components/ChatGifs/ChatGifsExplore.js @@ -1,97 +1,92 @@ -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 '@material/mwc-icon' +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 '@material/mwc-icon'; import ShortUniqueId from 'short-unique-id'; -import { publishData } from '../../../utils/publish-image.js'; +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}, + getMoreExploreGifs: {attribute: false}, + exploreCollections: {type: Array}, + setCurrentCollection: {attribute: false}, + }; + } - static get styles() { - return css` - - ` - } + static get styles() { + return css``; + } - constructor() { - super() - this.downObserverElement = '' - this.viewElement = '' - this.exploreCollections = [] - } + constructor() { + super(); + 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); + } + observerHandler(entries) { + if (!entries[0].isIntersecting) { + return; + } else { + if (this.exploreCollections.length < 20) { + return; + } - 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); - } + this.getMoreExploreGifs(); + } + } - observerHandler(entries) { - if (!entries[0].isIntersecting) { - return - } else { - if(this.exploreCollections.length < 20){ - return - } - - 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` -
- ${this.exploreCollections.map((collection)=> { - return html` -
-

{ - this.setCurrentCollection(collection) - }}>${collection.identifier}

- -
- ` - })} -
-
- - ` - } - - + render() { + return html` +
+ ${this.exploreCollections.map((collection) => { + return html` +
+

{ + this.setCurrentCollection(collection); + }} + > + ${collection.identifier} +

+
+ `; + })} +
+
+ `; + } } -window.customElements.define('chat-gifs-explore', ChatGifsExplore) +window.customElements.define('chat-gifs-explore', ChatGifsExplore); diff --git a/qortal-ui-plugins/plugins/core/components/ChatPage.js b/qortal-ui-plugins/plugins/core/components/ChatPage.js index 6d8a1d90..bbb1e90f 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatPage.js +++ b/qortal-ui-plugins/plugins/core/components/ChatPage.js @@ -824,7 +824,9 @@ class ChatPage extends LitElement { } .chat-gifs { - position: relative; + position: absolute; + right: 15px; + bottom: 100px; justify-self: flex-end; width: fit-content; height: auto; @@ -1050,26 +1052,26 @@ console.log({zipFileBlob}) ` : this.renderChatScroller()} - -
{ - this.setOpenGifModal(false); - this.editor.commands.focus("end"); - this.shadowRoot.querySelector("chat-gifs").clearGifSelections(); - }} +
{ + this.setOpenGifModal(false); + this.editor.commands.focus("end"); + this.shadowRoot.querySelector("chat-gifs").clearGifSelections(); + }} style=${this.openGifModal ? "visibility: visible; z-index: 4" : "visibility: hidden; z-index: -100"}> -
- - +
+ + +
+ style=${(this.lastMessageRefVisible && !this.imageFile && !this.openGifModal) ? 'opacity: 1;' : 'opacity: 0;'}> { this.shadowRoot.querySelector("chat-scroller").shadowRoot.getElementById("downObserver") .scrollIntoView({ diff --git a/qortal-ui-plugins/plugins/core/components/UserInfo/UserInfo-css.js b/qortal-ui-plugins/plugins/core/components/UserInfo/UserInfo-css.js index d22025ca..465f75da 100644 --- a/qortal-ui-plugins/plugins/core/components/UserInfo/UserInfo-css.js +++ b/qortal-ui-plugins/plugins/core/components/UserInfo/UserInfo-css.js @@ -1,69 +1,69 @@ import { css } from 'lit' export const userInfoStyles = css` - .user-info-header { - font-family: Montserrat, sans-serif; - text-align: center; - font-size: 28px; - color: var(--chat-bubble-msg-color); - margin-bottom: 10px; - padding: 10px 0; - user-select: none; - } +.user-info-header { +font-family: Montserrat, sans-serif; +text-align: center; +font-size: 28px; +color: var(--chat-bubble-msg-color); +margin-bottom: 10px; +padding: 10px 0; +user-select: none; +} - .avatar-container { - display: flex; - justify-content: center; - } +.avatar-container { +display: flex; +justify-content: center; +} - .user-info-avatar { - width: 100px; - height: 100px; - border-radius: 50%; - margin: 10px 0; - } +.user-info-avatar { +width: 100px; +height: 100px; +border-radius: 50%; +margin: 10px 0; +} - .user-info-no-avatar { - display: flex; - justify-content: center; - align-items: center; - text-transform: capitalize; - font-size: 50px; - font-family: Roboto, sans-serif; - width: 100px; - height: 100px; - border-radius:50%; - background: var(--chatHeadBg); - color: var(--chatHeadText); - } - - .send-message-button { - font-family: Roboto, sans-serif; - letter-spacing: 0.3px; - font-weight: 300; - padding: 8px 5px; - border-radius: 3px; - text-align: center; - color: var(--mdc-theme-primary); - transition: all 0.3s ease-in-out; - } +.user-info-no-avatar { +display: flex; +justify-content: center; +align-items: center; +text-transform: capitalize; +font-size: 50px; +font-family: Roboto, sans-serif; +width: 100px; +height: 100px; +border-radius:50%; +background: var(--chatHeadBg); +color: var(--chatHeadText); +} - .send-message-button:hover { - cursor: pointer; - background-color: #03a8f485; - } +.send-message-button { +font-family: Roboto, sans-serif; +letter-spacing: 0.3px; +font-weight: 300; +padding: 8px 5px; +border-radius: 3px; +text-align: center; +color: var(--mdc-theme-primary); +transition: all 0.3s ease-in-out; +} - .close-icon { - position: absolute; - top: 3px; - right: 5px; - color: #676b71; - width: 14px; - transition: all 0.1s ease-in-out; - } +.send-message-button:hover { +cursor: pointer; +background-color: #03a8f485; +} - .close-icon:hover { - cursor: pointer; - color: #494c50; - } -` \ No newline at end of file +.close-icon { +position: absolute; +top: 3px; +right: 5px; +color: #676b71; +width: 14px; +transition: all 0.1s ease-in-out; +} + +.close-icon:hover { +cursor: pointer; +color: #494c50; +} +`