forked from Qortal/qortal-ui
Merge pull request #129 from PhillipLangMartinez/feature/gif-repos-upadate
Feature/gif repos
This commit is contained in:
AlphaX-Projects
GitHub
commit
c423e5b602
BIN
qortal-ui-core/font/MavenPro.ttf
Normal file
BIN
qortal-ui-core/font/MavenPro.ttf
Normal file
Binary file not shown.
BIN
qortal-ui-core/font/PaytoneOne.ttf
Normal file
BIN
qortal-ui-core/font/PaytoneOne.ttf
Normal file
Binary file not shown.
@ -26,6 +26,12 @@
|
||||
url(Montserrat.ttf) format('truetype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'MavenPro';
|
||||
src: local('MavenPro'),
|
||||
local('MavenPro'),
|
||||
url(Montserrat.ttf) format('truetype');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'WorkSans';
|
||||
src: local('WorkSans'),
|
||||
@ -54,12 +60,19 @@
|
||||
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;
|
||||
font-style: normal;
|
||||
font-size: 24px;
|
||||
/* Preferred icon size */
|
||||
/* Preferred icon size */
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
text-transform: none;
|
||||
|
||||
@ -53,6 +53,13 @@ html {
|
||||
--group-header: #929292;
|
||||
--group-drop-shadow: rgb(17 17 26 / 10%) 0px 1px 0px;
|
||||
--reactions-tooltip-bg: #ffffff;
|
||||
--gifs-drop-shadow: #32326926 0px 2px 5px 0px, #0000000d 0px 1px 1px 0px;
|
||||
--gif-tooltip-bg: #dad7ef;
|
||||
--gif-search-icon-bs: rgb(17 17 26 / 10%) 0px 4px 16px, rgb(17 17 26 / 5%) 0px 8px 32px;
|
||||
--gif-search-icon: #ffffff;
|
||||
--gif-button-row-bg: #eaeaef;
|
||||
--gif-button-row-color: #464040;
|
||||
--gif-collection-hover-bg: #eaeaefa3;
|
||||
}
|
||||
|
||||
html[theme="dark"] {
|
||||
@ -110,4 +117,11 @@ html[theme="dark"] {
|
||||
--group-header: #c8c8c8;
|
||||
--group-drop-shadow: rgb(191 191 191 / 32%) 0px 1px 0px;
|
||||
--reactions-tooltip-bg: #161515;
|
||||
--gifs-drop-shadow: 0px 2px 2px 0px hsla(0, 0%, 0%, 0.14), 0px 3px 1px -2px hsla(0, 0%, 0%, 0.12), 0px 1px 5px 0px hsla(0, 0%, 0%, 0.2);
|
||||
--gif-tooltip-bg: #586b8d;
|
||||
--gif-search-icon-bs: 0px 8px 10px 1px hsla(0, 0%, 0%, 0.14), 0px 3px 14px 2px hsla(0, 0%, 0%, 0.12), 0px 5px 5px -3px hsla(0, 0%, 0%, 0.2);
|
||||
--gif-search-icon: #586b8d;
|
||||
--gif-button-row-bg: #82899c;
|
||||
--gif-button-row-color: #151212;
|
||||
--gif-collection-hover-bg: #ffffff26;
|
||||
}
|
||||
@ -165,6 +165,34 @@
|
||||
"balances": "YOUR WALLET BALANCES",
|
||||
"update": "UPDATE WALLET BALANCES"
|
||||
},
|
||||
"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"
|
||||
},
|
||||
"startminting": {
|
||||
"smchange1": "Cannot fetch minting accounts",
|
||||
"smchange2": "Failed to remove key",
|
||||
|
||||
@ -50,6 +50,13 @@ html {
|
||||
--group-header: #929292;
|
||||
--group-drop-shadow: rgb(17 17 26 / 10%) 0px 1px 0px;
|
||||
--reactions-tooltip-bg: #ffffff;
|
||||
--gifs-drop-shadow: #32326926 0px 2px 5px 0px, #0000000d 0px 1px 1px 0px;
|
||||
--gif-tooltip-bg: #dad7ef;
|
||||
--gif-search-icon-bs: rgb(17 17 26 / 10%) 0px 4px 16px, rgb(17 17 26 / 5%) 0px 8px 32px;
|
||||
--gif-search-icon: #ffffff;
|
||||
--gif-button-row-bg: #eaeaef;
|
||||
--gif-button-row-color: #464040;
|
||||
--gif-collection-hover-bg: #eaeaefa3;
|
||||
}
|
||||
|
||||
html[theme="dark"] {
|
||||
@ -104,4 +111,11 @@ html[theme="dark"] {
|
||||
--group-header: #c8c8c8;
|
||||
--group-drop-shadow: rgb(191 191 191 / 32%) 0px 1px 0px;
|
||||
--reactions-tooltip-bg: #161515;
|
||||
--gifs-drop-shadow: 0px 2px 2px 0px hsla(0, 0%, 0%, 0.14), 0px 3px 1px -2px hsla(0, 0%, 0%, 0.12), 0px 1px 5px 0px hsla(0, 0%, 0%, 0.2);
|
||||
--gif-tooltip-bg: #586b8d;
|
||||
--gif-search-icon-bs: 0px 8px 10px 1px hsla(0, 0%, 0%, 0.14), 0px 3px 14px 2px hsla(0, 0%, 0%, 0.12), 0px 5px 5px -3px hsla(0, 0%, 0%, 0.2);
|
||||
--gif-search-icon: #586b8d;
|
||||
--gif-button-row-bg: #82899c;
|
||||
--gif-button-row-color: #151212;
|
||||
--gif-collection-hover-bg: #ffffff26;
|
||||
}
|
||||
@ -77,6 +77,7 @@
|
||||
"@vaadin/icons": "23.3.7",
|
||||
"@vaadin/tooltip": "23.3.7",
|
||||
"axios": "1.3.3",
|
||||
"@zip.js/zip.js": "^2.6.62",
|
||||
"epml": "0.3.3",
|
||||
"file-saver": "2.0.5",
|
||||
"highcharts": "10.3.3",
|
||||
@ -93,4 +94,4 @@
|
||||
"engines": {
|
||||
"node": ">=18.12.1"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -0,0 +1,515 @@
|
||||
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;
|
||||
max-height: calc(95vh - 90px);
|
||||
min-width: 370px;
|
||||
max-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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.explore-collections-icon {
|
||||
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: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-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;
|
||||
}
|
||||
|
||||
.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;
|
||||
transition: all 0.3s ease-in-out;
|
||||
cursor: auto;
|
||||
}
|
||||
|
||||
.collection-wrapper {
|
||||
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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.new-collection-subrow {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
flex: 1 1 0%;
|
||||
margin-top: 10px;
|
||||
overflow-y: auto;
|
||||
max-height: 300px;
|
||||
}
|
||||
|
||||
.gifs-added-row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.gifs-added-row .gif-input:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.gifs-added-row::-webkit-scrollbar-track {
|
||||
background-color: whitesmoke;
|
||||
border-radius: 7px;
|
||||
}
|
||||
|
||||
.gifs-added-row::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
border-radius: 7px;
|
||||
background-color: whitesmoke;
|
||||
}
|
||||
|
||||
.gifs-added-row::-webkit-scrollbar-thumb {
|
||||
background-color: rgb(180, 176, 176);
|
||||
border-radius: 7px;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.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-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);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.upload-collection-name::placeholder {
|
||||
font-size: 16px;
|
||||
font-family: Montserrat, sans-serif;
|
||||
font-weight: 600;
|
||||
opacity: 0.6;
|
||||
color: var(--chat-bubble-msg-color);
|
||||
}
|
||||
|
||||
.collection-back-button {
|
||||
display: flex;
|
||||
font-family: Roboto, sans-serif;
|
||||
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: var(--gif-button-row-bg);
|
||||
border-radius: 3px;
|
||||
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: 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 {
|
||||
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);
|
||||
}
|
||||
|
||||
.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.4s 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;
|
||||
}
|
||||
|
||||
.lds-circle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 70px;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
`;
|
||||
951
qortal-ui-plugins/plugins/core/components/ChatGifs/ChatGifs.js
Normal file
951
qortal-ui-plugins/plugins/core/components/ChatGifs/ChatGifs.js
Normal file
@ -0,0 +1,951 @@
|
||||
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 '@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 './ChatGifsExplore.js';
|
||||
import '../ImageComponent.js';
|
||||
import '@vaadin/tooltip';
|
||||
|
||||
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},
|
||||
isSubscribed: { type: Boolean },
|
||||
setGifsLoading: { attribute: false },
|
||||
sendMessage: { attribute: false },
|
||||
setOpenGifModal: { attribute: false }
|
||||
};
|
||||
}
|
||||
|
||||
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 = [];
|
||||
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') {
|
||||
const subbedCollection = this.mySubscribedCollections.find((collection) => ((collection.name === this.currentCollection.name) && (collection.identifier === this.currentCollection.identifier)));
|
||||
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[
|
||||
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}?apiKey=${this.getApiKey()}`,
|
||||
});
|
||||
|
||||
collectionObj = {
|
||||
...collection,
|
||||
gifUrls: [],
|
||||
};
|
||||
if (metaData.files) {
|
||||
const metaDataArray = metaData.files.map((data) => {
|
||||
return {
|
||||
url: `${nodeUrl}/arbitrary/GIF_REPOSITORY/${this.myAccountName}/${collection.identifier}?filepath=${data}&apiKey=${this.getApiKey()}`,
|
||||
filePath: data,
|
||||
identifier: collection.identifier,
|
||||
name: this.myAccountName
|
||||
};
|
||||
});
|
||||
|
||||
collectionObj = {
|
||||
...collection,
|
||||
gifUrls: metaDataArray,
|
||||
};
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
|
||||
return collectionObj;
|
||||
}
|
||||
);
|
||||
return await Promise.all(getMetaDataGifs);
|
||||
} catch (error) {}
|
||||
}
|
||||
|
||||
getApiKey() {
|
||||
const myNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node];
|
||||
let apiKey = myNode.apiKey;
|
||||
return apiKey;
|
||||
}
|
||||
|
||||
async getMoreExploreGifs() {
|
||||
try {
|
||||
const getAllGifCollections = await parentEpml.request('apiCall', {
|
||||
type: 'api',
|
||||
url: `/arbitrary/resources?service=GIF_REPOSITORY&limit=20&offset=${
|
||||
this.pageNumber * 20
|
||||
}&apiKey=${this.getApiKey()}`,
|
||||
});
|
||||
|
||||
const gifCollectionWithMetaData = await this.structureCollections(
|
||||
getAllGifCollections
|
||||
);
|
||||
this.exploreCollections = [
|
||||
...this.exploreCollections,
|
||||
...gifCollectionWithMetaData,
|
||||
];
|
||||
|
||||
this.pageNumber = this.pageNumber + 1;
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
}
|
||||
|
||||
async getCollectionList() {
|
||||
try {
|
||||
return await parentEpml.request('apiCall', {
|
||||
type: 'api',
|
||||
url: `/lists/gifSubscribedRepos?apiKey=${this.getApiKey()}`,
|
||||
});
|
||||
} catch (error) {}
|
||||
}
|
||||
|
||||
async addCollectionToList(collection) {
|
||||
try {
|
||||
const body = {
|
||||
items: [collection],
|
||||
};
|
||||
|
||||
const bodyToString = JSON.stringify(body);
|
||||
await parentEpml.request('apiCall', {
|
||||
type: 'api',
|
||||
method: 'POST',
|
||||
url: `/lists/gifSubscribedRepos?apiKey=${this.getApiKey()}`,
|
||||
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?apiKey=${this.getApiKey()}`,
|
||||
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 getMyGifCollections = await parentEpml.request('apiCall', {
|
||||
url: `/arbitrary/resources?service=GIF_REPOSITORY&limit=0&name=${this.myAccountName}&apiKey=${this.getApiKey()}`,
|
||||
});
|
||||
const gifCollectionWithMetaData = await this.structureCollections(
|
||||
getMyGifCollections
|
||||
);
|
||||
|
||||
return gifCollectionWithMetaData;
|
||||
} else {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
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
|
||||
}&apiKey=${this.getApiKey()}`,
|
||||
});
|
||||
const gifCollectionWithMetaData = await this.structureCollections(
|
||||
getAllGifCollections
|
||||
);
|
||||
this.pageNumber = this.pageNumber + 1;
|
||||
return gifCollectionWithMetaData;
|
||||
}
|
||||
|
||||
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 {
|
||||
const data = await parentEpml.request('apiCall', {
|
||||
url: `/arbitrary/resources?service=GIF_REPOSITORY&limit=0&name=${name}&identifier=${identifier}&apiKey=${this.getApiKey()}`,
|
||||
});
|
||||
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
|
||||
);
|
||||
return savedCollectionsWithMetaData;
|
||||
}
|
||||
|
||||
async getName(recipient) {
|
||||
try {
|
||||
const getNames = await parentEpml.request('apiCall', {
|
||||
type: 'api',
|
||||
url: `/names/address/${recipient}?apiKey=${this.getApiKey()}`,
|
||||
});
|
||||
|
||||
if (Array.isArray(getNames) && getNames.length > 0) {
|
||||
return getNames[0].name;
|
||||
} else {
|
||||
return '';
|
||||
}
|
||||
} catch (error) {
|
||||
return '';
|
||||
}
|
||||
}
|
||||
|
||||
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 {
|
||||
file,
|
||||
name: file.name,
|
||||
};
|
||||
});
|
||||
const removedExtensions = this.removeDotGIF(mapGifs);
|
||||
this.gifsToBeAdded = [...this.gifsToBeAdded, ...removedExtensions];
|
||||
}
|
||||
|
||||
async uploadGifCollection() {
|
||||
if (!this.newCollectionName) {
|
||||
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', {
|
||||
url: `/arbitrary/resources?service=GIF_REPOSITORY&limit=0&name=${userName}&identifier=${this.newCollectionName}&apiKey=${this.getApiKey()}`,
|
||||
});
|
||||
|
||||
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();
|
||||
reader.onloadend = () => resolve(reader.result);
|
||||
reader.readAsDataURL(blob);
|
||||
});
|
||||
}
|
||||
const zipFileWriter = new zip.BlobWriter('application/zip');
|
||||
|
||||
const zipWriter = new zip.ZipWriter(zipFileWriter, {
|
||||
bufferedWrite: true,
|
||||
});
|
||||
|
||||
for (let i = 0; i < addedGifExtensionsArr.length; i++) {
|
||||
await zipWriter.add(
|
||||
addedGifExtensionsArr[i].name,
|
||||
new zip.BlobReader(addedGifExtensionsArr[i].file)
|
||||
);
|
||||
}
|
||||
|
||||
await zipWriter.close();
|
||||
|
||||
const zipFileBlob = await zipFileWriter.getData();
|
||||
|
||||
const blobTobase = await blobToBase64(zipFileBlob);
|
||||
|
||||
|
||||
await publishData({
|
||||
registeredName: userName,
|
||||
file: blobTobase.split(',')[1],
|
||||
service: 'GIF_REPOSITORY',
|
||||
identifier: this.newCollectionName,
|
||||
parentEpml,
|
||||
metaData: `title=${this.newCollectionName}`,
|
||||
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}&apiKey=${this.getApiKey()}`,
|
||||
}
|
||||
);
|
||||
if (myCollection.length > 0) {
|
||||
clearInterval(interval);
|
||||
res();
|
||||
}
|
||||
} 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);
|
||||
});
|
||||
|
||||
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'));
|
||||
this.setGifsLoading(false);
|
||||
this.isLoading = false;
|
||||
}
|
||||
}
|
||||
|
||||
setCurrentCollection(val) {
|
||||
this.currentCollection = val;
|
||||
}
|
||||
|
||||
clearGifSelections() {
|
||||
this.mode = 'myCollection';
|
||||
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() {
|
||||
return html`
|
||||
<div class="gifs-container">
|
||||
<div class="gif-explorer-container">
|
||||
<vaadin-icon
|
||||
style=${
|
||||
(this.mode === 'newCollection' ||
|
||||
(this.mode === 'explore' && this.currentCollection))
|
||||
? 'display: none;'
|
||||
: 'display: block;'
|
||||
}
|
||||
id="create-collection-button"
|
||||
class="create-collections-icon"
|
||||
@click=${() => {
|
||||
if (this.isLoading) return;
|
||||
this.mode = 'newCollection';
|
||||
}}
|
||||
icon="vaadin:plus"
|
||||
slot="icon">
|
||||
</vaadin-icon>
|
||||
<div class="title-row">
|
||||
<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;
|
||||
this.isSubscribed = false;
|
||||
} 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(
|
||||
'gifs.gchange1'
|
||||
)}
|
||||
</p>
|
||||
<vaadin-icon
|
||||
style=${
|
||||
(this.mode === 'newCollection' || this.mode === 'explore')
|
||||
? 'display: none'
|
||||
: 'display: block'
|
||||
}
|
||||
id="explore-collections-icon"
|
||||
class="explore-collections-icon"
|
||||
@click=${() => {
|
||||
if (this.isLoading) return;
|
||||
this.mode = 'explore';
|
||||
this.currentCollection = null;
|
||||
}}
|
||||
icon="vaadin:search"
|
||||
slot="icon">
|
||||
</vaadin-icon>
|
||||
<vaadin-tooltip
|
||||
for="explore-collections-icon"
|
||||
position="top"
|
||||
hover-delay=${400}
|
||||
hide-delay=${1}
|
||||
text=${get('gifs.gchange2')}>
|
||||
</vaadin-tooltip>
|
||||
</div>
|
||||
<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"
|
||||
class=${[
|
||||
'my-collections-button',
|
||||
this.mode === 'myCollection'
|
||||
? 'collections-button-active'
|
||||
: null,
|
||||
].join(' ')}
|
||||
@click=${() => {
|
||||
if (this.isLoading) return;
|
||||
if (this.mode === 'myCollection') return;
|
||||
this.mode = 'myCollection';
|
||||
this.currentCollection = null;
|
||||
}}>
|
||||
${translate('gifs.gchange3')}
|
||||
</div>
|
||||
<div
|
||||
id="subscribed-collections-button"
|
||||
class=${[
|
||||
'subscribed-collections-button',
|
||||
this.mode === 'subscribedCollection'
|
||||
? 'collections-button-active'
|
||||
: null,
|
||||
].join(' ')}
|
||||
@click=${() => {
|
||||
if (this.isLoading) return;
|
||||
if (this.mode === 'subscribedCollection') return;
|
||||
this.mode = 'subscribedCollection';
|
||||
this.currentCollection = null;
|
||||
}}
|
||||
>
|
||||
${translate('gifs.gchange4')}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="collection-wrapper">
|
||||
${this.mode === 'myCollection' && !this.currentCollection
|
||||
? html`
|
||||
${this.isLoading === true
|
||||
? html`<div class="lds-circle"><div></div></div>`
|
||||
: ''}
|
||||
${(this.myGifCollections.length === 0 && !this.isLoading) ? (
|
||||
html`
|
||||
<div class='no-collections'>${translate('gifs.gchange13')}</div>
|
||||
`
|
||||
) : (
|
||||
html`
|
||||
${(this.myGifCollections || []).map((collection) => {
|
||||
return html`
|
||||
<div @click=${() => {
|
||||
this.currentCollection =
|
||||
collection;
|
||||
}} class='collection-card'>
|
||||
${collection.identifier}
|
||||
</div>
|
||||
`;
|
||||
})}
|
||||
`
|
||||
)}
|
||||
`
|
||||
: ''
|
||||
}
|
||||
${this.mode === 'subscribedCollection' &&
|
||||
!this.currentCollection
|
||||
? html`
|
||||
${this.isLoading === true
|
||||
? html`<div class="lds-circle"><div></div></div>`
|
||||
: ''}
|
||||
${(this.mySubscribedCollections.length === 0 && !this.isLoading) ? (
|
||||
html`
|
||||
<div class='no-collections'>${translate('gifs.gchange14')}</div>
|
||||
`
|
||||
) : (
|
||||
html`
|
||||
${this.mySubscribedCollections.map(
|
||||
(collection) => {
|
||||
return html`
|
||||
<div @click=${() => {
|
||||
this.currentCollection =
|
||||
collection;
|
||||
}} class='collection-card'>
|
||||
${collection.identifier}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
)}
|
||||
`
|
||||
)}
|
||||
`
|
||||
: ''
|
||||
}
|
||||
${this.mode === 'explore' && !this.currentCollection
|
||||
? html`
|
||||
${this.isLoading === true
|
||||
? 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
|
||||
.exploreCollections}
|
||||
.setCurrentCollection=${(val) =>
|
||||
this.setCurrentCollection(val)}
|
||||
></chat-gifs-explore>
|
||||
`
|
||||
}
|
||||
`
|
||||
: ''
|
||||
}
|
||||
${this.currentCollection && this.mode === 'myCollection'
|
||||
? html`
|
||||
<div class='collection-gifs'>
|
||||
${this.currentCollection.gifUrls.map((gif) => {
|
||||
return html`
|
||||
<image-component
|
||||
.sendMessage=${(val) => this.sendMessage(val)}
|
||||
.setOpenGifModal=${(val) => this.setOpenGifModal(val)}
|
||||
.class=${'gif-image'}
|
||||
.gif=${gif}
|
||||
.alt=${'gif-image'}>
|
||||
</image-component>
|
||||
`;
|
||||
})}
|
||||
</div>
|
||||
`
|
||||
: ''
|
||||
}
|
||||
${this.currentCollection &&
|
||||
this.mode === 'subscribedCollection'
|
||||
? html`
|
||||
<div class='collection-gifs'>
|
||||
${this.currentCollection.gifUrls.map((gif) => {
|
||||
return html`
|
||||
<image-component
|
||||
.sendMessage=${(val) => this.sendMessage(val)}
|
||||
.setOpenGifModal=${(val) => this.setOpenGifModal(val)}
|
||||
.class=${'gif-image'}
|
||||
.gif=${gif}
|
||||
.alt=${'gif-image'}>
|
||||
</image-component>
|
||||
`;
|
||||
})}
|
||||
</div>
|
||||
`
|
||||
: ''
|
||||
}
|
||||
${this.currentCollection && this.mode === 'explore'
|
||||
? html`
|
||||
<div class="collection-gifs">
|
||||
${this.currentCollection.gifUrls.map((gif) => {
|
||||
return html`
|
||||
<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>
|
||||
`
|
||||
)}
|
||||
`
|
||||
: ''
|
||||
}
|
||||
${this.mode === 'newCollection' && this.isLoading === false
|
||||
? html`
|
||||
<div class="new-collection-row" style=${this.gifsToBeAdded.length === 0 ? "" : "flex: 1;"}>
|
||||
<div class="new-collection-subrow">
|
||||
<p class="new-collection-title">
|
||||
${translate('gifs.gchange5')}
|
||||
</p>
|
||||
<p class="new-collection-subtitle">
|
||||
${translate('gifs.gchange6')}
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
@click=${() =>
|
||||
this.shadowRoot
|
||||
.getElementById(
|
||||
'file-picker-gif'
|
||||
)
|
||||
.click()}
|
||||
class="new-collection-container"
|
||||
style=${this.gifsToBeAdded.length > 0 ? "padding: 10px 0;" : "padding: 60px 0;"}
|
||||
>
|
||||
<vaadin-icon
|
||||
id="new-collection-icon"
|
||||
class="new-collection-icon"
|
||||
icon="vaadin:folder"
|
||||
slot="icon"
|
||||
>
|
||||
</vaadin-icon>
|
||||
<input
|
||||
@change="${(e) => {
|
||||
this.addGifs(
|
||||
Array.from(e.target.files)
|
||||
);
|
||||
const filePickerInput =
|
||||
this.shadowRoot.getElementById(
|
||||
'file-picker-gif'
|
||||
);
|
||||
if (filePickerInput) {
|
||||
filePickerInput.value = '';
|
||||
}
|
||||
}}"
|
||||
id="file-picker-gif"
|
||||
?multiple=${true}
|
||||
type="file"
|
||||
name="myGif"
|
||||
accept="image/gif"
|
||||
style=${'display: none;'}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<input
|
||||
class="upload-collection-name"
|
||||
style=${this.gifsToBeAdded.length === 0 ? "display: none;" : "display: block;"}
|
||||
placeholder=${get("gifs.gchange9")}
|
||||
.value=${this.newCollectionName}
|
||||
@change=${(e) => {
|
||||
this.newCollectionName =
|
||||
e.target.value;
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
class="gifs-added-col"
|
||||
|
||||
>
|
||||
<div class="gifs-added-row">
|
||||
${this.gifsToBeAdded.map((gif, i) => {
|
||||
return html`
|
||||
<div class="gif-input">
|
||||
<img
|
||||
class="gif-input-img"
|
||||
src=${URL.createObjectURL(
|
||||
gif.file
|
||||
)}
|
||||
/>
|
||||
<input
|
||||
class="gif-input-field"
|
||||
.value=${gif.name}
|
||||
@change=${(e) => {
|
||||
this.gifsToBeAdded[i] = {
|
||||
...gif,
|
||||
name: e.target
|
||||
.value,
|
||||
};
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
`;
|
||||
})}
|
||||
</div>
|
||||
<div class="upload-collection-row">
|
||||
<button
|
||||
class="upload-back-button"
|
||||
@click=${() => {
|
||||
this.mode = 'myCollection';
|
||||
this.gifsToBeAdded = [];
|
||||
}}
|
||||
>
|
||||
${translate('general.back')}
|
||||
</button>
|
||||
<button
|
||||
style=${this.gifsToBeAdded.length === 0 ? "display: none;" : "display: block;"}
|
||||
class="upload-button"
|
||||
@click=${() => {
|
||||
this.uploadGifCollection();
|
||||
}}
|
||||
>
|
||||
${translate('gifs.gchange7')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
: this.mode === 'newCollection' && this.isLoading === true ? (
|
||||
html`
|
||||
<div>
|
||||
<p class='gifs-loading-message'>${translate("gifs.gchange11")}</p>
|
||||
<div class="lds-circle"><div></div></div>
|
||||
</div>
|
||||
`
|
||||
)
|
||||
: ''
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
window.customElements.define('chat-gifs', ChatGifs);
|
||||
@ -0,0 +1,137 @@
|
||||
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);
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
}
|
||||
`
|
||||
@ -0,0 +1,175 @@
|
||||
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';
|
||||
|
||||
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 },
|
||||
isLoading: { type: Boolean },
|
||||
isSearched: { type: Boolean },
|
||||
getAllCollections: { attribute: false }
|
||||
};
|
||||
}
|
||||
|
||||
static styles = [chatGifsExploreStyles];
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.searchCollectionName = '';
|
||||
this.downObserverElement = '';
|
||||
this.viewElement = '';
|
||||
this.exploreCollections = [];
|
||||
this.isLoading = false;
|
||||
this.isSearched = false;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
this.getMoreExploreGifs();
|
||||
}
|
||||
}
|
||||
|
||||
async firstUpdated() {
|
||||
this.viewElement = this.shadowRoot.getElementById('viewElement');
|
||||
this.downObserverElement =
|
||||
this.shadowRoot.getElementById('downObserver');
|
||||
this.elementObserver();
|
||||
}
|
||||
getApiKey() {
|
||||
const myNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node];
|
||||
let apiKey = myNode.apiKey;
|
||||
return apiKey;
|
||||
}
|
||||
|
||||
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&apiKey=${this.getApiKey()}
|
||||
`,
|
||||
});
|
||||
await new Promise((res) => {
|
||||
setTimeout(() => {
|
||||
res();
|
||||
}, 1000)
|
||||
});
|
||||
this.exploreCollections = response;
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
} finally {
|
||||
this.isLoading = false;
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
console.log(18, "chat-gifs-explore-here");
|
||||
console.log(this.searchCollectionName, "search collection name");
|
||||
return html`
|
||||
<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);
|
||||
}}>
|
||||
${collection.identifier}
|
||||
</div>
|
||||
`;
|
||||
})}`
|
||||
)}
|
||||
</div>
|
||||
<div id='downObserver'></div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
window.customElements.define('chat-gifs-explore', ChatGifsExplore);
|
||||
File diff suppressed because it is too large
Load Diff
@ -281,10 +281,12 @@ 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 },
|
||||
openDeleteAttachment: { type: Boolean },
|
||||
isImageLoaded: { type: Boolean },
|
||||
isGifLoaded: { type: Boolean },
|
||||
isFirstMessage: { type: Boolean },
|
||||
isSingleMessageInGroup: { type: Boolean },
|
||||
isLastMessageInGroup: { type: Boolean },
|
||||
@ -311,8 +313,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
|
||||
@ -384,6 +389,7 @@ class MessageTemplate extends LitElement {
|
||||
let reactions = [];
|
||||
let repliedToData = null;
|
||||
let image = null;
|
||||
let gif = null;
|
||||
let isImageDeleted = false;
|
||||
let isAttachmentDeleted = false;
|
||||
let version = 0;
|
||||
@ -392,8 +398,7 @@ class MessageTemplate extends LitElement {
|
||||
let attachment = null;
|
||||
try {
|
||||
const parsedMessageObj = JSON.parse(this.messageObj.decodedMessage);
|
||||
if(+parsedMessageObj.version > 1){
|
||||
|
||||
if(+parsedMessageObj.version > 1 && parsedMessageObj.messageText){
|
||||
messageVersion2 = generateHTML(parsedMessageObj.messageText, [
|
||||
StarterKit,
|
||||
Underline,
|
||||
@ -415,13 +420,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);
|
||||
@ -463,6 +475,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;
|
||||
@ -475,6 +514,17 @@ class MessageTemplate extends LitElement {
|
||||
}
|
||||
}
|
||||
|
||||
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`
|
||||
<span class="${this.messageObj.sender === this.myAddress && 'message-data-my-name'}">
|
||||
${this.messageObj.senderName ? this.messageObj.senderName : cropAddress(this.messageObj.sender)}
|
||||
@ -646,6 +696,25 @@ class MessageTemplate extends LitElement {
|
||||
` : image && isImageDeleted ? html`
|
||||
<p class="image-deleted-msg">${translate("chatpage.cchange80")}</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``}
|
||||
${attachment && !isAttachmentDeleted ?
|
||||
html`
|
||||
<div @click=${async () => await this.downloadAttachment(attachment)} class="attachment-container">
|
||||
@ -753,6 +822,7 @@ class MessageTemplate extends LitElement {
|
||||
.setOpenPrivateMessage=${(val) => this.setOpenPrivateMessage(val)}
|
||||
.setOpenTipUser=${(val) => this.setOpenTipUser(val)}
|
||||
.setUserName=${(val) => this.setUserName(val)}
|
||||
.gif=${!!gif}
|
||||
>
|
||||
</chat-menu>
|
||||
</div>
|
||||
@ -855,6 +925,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}
|
||||
@ -937,6 +1029,7 @@ class ChatMenu extends LitElement {
|
||||
setOpenPrivateMessage: { attribute: false },
|
||||
setOpenTipUser: { attribute: false },
|
||||
setUserName: { attribute: false },
|
||||
gif: { type: Boolean },
|
||||
}
|
||||
}
|
||||
|
||||
@ -1067,13 +1160,14 @@ class ChatMenu extends LitElement {
|
||||
<vaadin-icon icon="vaadin:reply" slot="icon"></vaadin-icon>
|
||||
</div>
|
||||
|
||||
${this.myAddress === this.originalMessage.sender ? (
|
||||
${((this.myAddress === this.originalMessage.sender) && (
|
||||
!this.gif)) ? (
|
||||
html`
|
||||
<div
|
||||
class=${`menu-icon ${!this.firstMessageInChat ? "tooltip" : ""}`}
|
||||
data-text="${translate("blockpage.bcchange12")}"
|
||||
@click=${() => {
|
||||
if(this.version === '0'){
|
||||
if (this.version === '0'){
|
||||
this.versionErrorSnack()
|
||||
return
|
||||
}
|
||||
|
||||
@ -34,6 +34,8 @@ class ChatTextEditor extends LitElement {
|
||||
},
|
||||
toggleEnableChatEnter: {attribute: false},
|
||||
isEnabledChatEnter: {type: Boolean},
|
||||
openGifModal: { type: Boolean },
|
||||
setOpenGifModal: { attribute: false },
|
||||
chatId: {type: String}
|
||||
}
|
||||
}
|
||||
@ -392,7 +394,7 @@ mwc-checkbox::shadow .mdc-checkbox::after, mwc-checkbox::shadow .mdc-checkbox::b
|
||||
.toggleBold()
|
||||
.run()
|
||||
}
|
||||
class=${["chatbar-button-single", (this.editedMessageObj || this.repliedToMessageObj) && 'show-chatbar-buttons', this.editor && this.editor.isActive('bold') ? 'is-active' : ''].join(" ")}
|
||||
class=${["chatbar-button-single", (this.editedMessageObj || this.repliedToMessageObj || this.openGifModal) && 'show-chatbar-buttons', this.editor && this.editor.isActive('bold') ? 'is-active' : ''].join(" ")}
|
||||
>
|
||||
<!-- <mwc-icon >format_bold</mwc-icon> -->
|
||||
<span class="material-symbols-outlined"></span>
|
||||
@ -406,33 +408,33 @@ mwc-checkbox::shadow .mdc-checkbox::after, mwc-checkbox::shadow .mdc-checkbox::b
|
||||
.toggleItalic()
|
||||
.run()
|
||||
}
|
||||
class=${["chatbar-button-single", (this.editedMessageObj || this.repliedToMessageObj) && 'show-chatbar-buttons', this.editor && this.editor.isActive('italic') ? 'is-active' : ''].join(' ')}
|
||||
class=${["chatbar-button-single", (this.editedMessageObj || this.repliedToMessageObj || this.openGifModal) && 'show-chatbar-buttons', this.editor && this.editor.isActive('italic') ? 'is-active' : ''].join(' ')}
|
||||
>
|
||||
<span class="material-symbols-outlined"></span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
@click=${() => this.editor.chain().focus().toggleUnderline().run()}
|
||||
class=${["chatbar-button-single", (this.editedMessageObj || this.repliedToMessageObj) && 'show-chatbar-buttons', this.editor && this.editor.isActive('underline') ? 'is-active' : ''].join(' ')}
|
||||
class=${["chatbar-button-single", (this.editedMessageObj || this.repliedToMessageObj || this.openGifModal) && 'show-chatbar-buttons', this.editor && this.editor.isActive('underline') ? 'is-active' : ''].join(' ')}
|
||||
>
|
||||
<span class="material-symbols-outlined"></span>
|
||||
</button>
|
||||
<button
|
||||
@click=${() => this.editor.chain().focus().toggleHighlight().run()}
|
||||
class=${["chatbar-button-single", (this.editedMessageObj || this.repliedToMessageObj) && 'show-chatbar-buttons', this.editor && this.editor.isActive('highlight') ? 'is-active' : ''].join(' ')}
|
||||
class=${["chatbar-button-single", (this.editedMessageObj || this.repliedToMessageObj || this.openGifModal) && 'show-chatbar-buttons', this.editor && this.editor.isActive('highlight') ? 'is-active' : ''].join(' ')}
|
||||
>
|
||||
<span class="material-symbols-outlined"></span>
|
||||
</button>
|
||||
<button
|
||||
@click=${() => this.editor.chain().focus().toggleCodeBlock().run()}
|
||||
class=${["chatbar-button-single",(this.editedMessageObj || this.repliedToMessageObj) && 'show-chatbar-buttons', this.editor && this.editor.isActive('codeBlock') ? 'is-active' : ''].join(' ')}
|
||||
class=${["chatbar-button-single",(this.editedMessageObj || this.repliedToMessageObj || this.openGifModal) && 'show-chatbar-buttons', this.editor && this.editor.isActive('codeBlock') ? 'is-active' : ''].join(' ')}
|
||||
>
|
||||
<span class="material-symbols-outlined"></span>
|
||||
</button>
|
||||
<button
|
||||
@click=${()=> this.toggleEnableChatEnter() }
|
||||
style="height: 26px; box-sizing: border-box;"
|
||||
class=${["chatbar-button-single",(this.editedMessageObj || this.repliedToMessageObj) && 'show-chatbar-buttons', this.editor && this.editor.isActive('codeBlock') ? 'is-active' : ''].join(' ')}
|
||||
class=${["chatbar-button-single",(this.editedMessageObj || this.repliedToMessageObj || this.openGifModal) && 'show-chatbar-buttons', this.editor && this.editor.isActive('codeBlock') ? 'is-active' : ''].join(' ')}
|
||||
>
|
||||
${this.isEnabledChatEnter ? html`
|
||||
${translate("chatpage.cchange63")}
|
||||
@ -453,7 +455,6 @@ mwc-checkbox::shadow .mdc-checkbox::after, mwc-checkbox::shadow .mdc-checkbox::b
|
||||
>${translate('chatpage.cchange69')}</label>
|
||||
|
||||
<mwc-checkbox style="margin-right: -15px;" id="qChatShowAutoMsg" @click=${e => {
|
||||
console.log(e.target.checked)
|
||||
if(e.target.checked){
|
||||
window.parent.reduxStore.dispatch( window.parent.reduxAction.removeAutoLoadImageChat(this.chatId))
|
||||
return
|
||||
@ -505,6 +506,21 @@ mwc-checkbox::shadow .mdc-checkbox::after, mwc-checkbox::shadow .mdc-checkbox::b
|
||||
<button class="emoji-button" ?disabled=${this.isLoading || this.isLoadingMessages}>
|
||||
${html`<img class="emoji" draggable="false" alt="😀" src="/emoji/svg/1f600.svg" />`}
|
||||
</button>
|
||||
${this.setOpenGifModal ?
|
||||
html`
|
||||
<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"></span>
|
||||
</button>
|
||||
`
|
||||
: ''}
|
||||
${this.editedMessageObj ? (
|
||||
html`
|
||||
<div style="margin-bottom: 10px">
|
||||
@ -568,14 +584,7 @@ mwc-checkbox::shadow .mdc-checkbox::after, mwc-checkbox::shadow .mdc-checkbox::b
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
async firstUpdated() {
|
||||
|
||||
|
||||
|
||||
async firstUpdated() {
|
||||
window.addEventListener('storage', () => {
|
||||
const checkTheme = localStorage.getItem('qortalTheme');
|
||||
const chatbar = this.shadowRoot.querySelector('.element')
|
||||
|
||||
127
qortal-ui-plugins/plugins/core/components/ImageComponent.js
Normal file
127
qortal-ui-plugins/plugins/core/components/ImageComponent.js
Normal file
@ -0,0 +1,127 @@
|
||||
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 {
|
||||
class: { type: String },
|
||||
gif: { type: Object },
|
||||
alt: { type: String },
|
||||
attempts: { type: Number },
|
||||
maxAttempts: { type: Number },
|
||||
error: { type: Boolean },
|
||||
sendMessage: { attribute: false },
|
||||
setOpenGifModal: { attribute: false }
|
||||
}
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
.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.attempts = 0;
|
||||
this.maxAttempts = 5;
|
||||
}
|
||||
getApiKey() {
|
||||
const myNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node];
|
||||
let apiKey = myNode.apiKey;
|
||||
return apiKey;
|
||||
}
|
||||
|
||||
async _fetchImage() {
|
||||
this.attempts++;
|
||||
if (this.attempts > this.maxAttempts) return;
|
||||
await new Promise((res) => {
|
||||
setTimeout(() => {
|
||||
res();
|
||||
}, 1000)
|
||||
});
|
||||
try {
|
||||
const response = await fetch(this.gif.url);
|
||||
const data = await response.json();
|
||||
console.log({data});
|
||||
if (data.ok) {
|
||||
this.error = false;
|
||||
this.gif = {
|
||||
...this.gif,
|
||||
url: data.src
|
||||
};
|
||||
this.requestUpdate();
|
||||
} else if (!data.ok || data.error) {
|
||||
this.error = true;
|
||||
} else {
|
||||
this.error = false;
|
||||
}
|
||||
} catch (error) {
|
||||
this.error = true;
|
||||
console.error(error);
|
||||
this._fetchImage();
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
if (this.error && this.attempts <= this.maxAttempts) {
|
||||
setTimeout(() => {
|
||||
this._fetchImage();
|
||||
}, 1000);
|
||||
}
|
||||
return html`
|
||||
${this.gif && !this.error
|
||||
? html`
|
||||
<img
|
||||
class=${this.class}
|
||||
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('gifs.gchange15')}</p>
|
||||
`
|
||||
: html`
|
||||
<p class='gif-error-msg'>${translate('gifs.gchange16')}</p>
|
||||
`
|
||||
}`
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('image-component', ImageComponent);
|
||||
@ -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;
|
||||
}
|
||||
`
|
||||
.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;
|
||||
}
|
||||
`
|
||||
|
||||
@ -16,7 +16,9 @@ export const publishData = async ({
|
||||
parentEpml,
|
||||
uploadType,
|
||||
selectedAddress,
|
||||
worker
|
||||
worker,
|
||||
isBase64,
|
||||
metaData
|
||||
}) => {
|
||||
const validateName = async (receiverName) => {
|
||||
let nameRes = await parentEpml.request("apiCall", {
|
||||
@ -115,16 +117,26 @@ export const publishData = async ({
|
||||
}
|
||||
|
||||
// Base64 encode the file to work around compatibility issues between javascript and java byte arrays
|
||||
if(isBase64){
|
||||
postBody = file
|
||||
}
|
||||
if(!isBase64){
|
||||
let fileBuffer = new Uint8Array(await file.arrayBuffer())
|
||||
postBody = Buffer.from(fileBuffer).toString("base64")
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
let uploadDataUrl = `/arbitrary/${service}/${registeredName}${urlSuffix}?apiKey=${getApiKey()}`
|
||||
if (identifier != null && identifier.trim().length > 0) {
|
||||
uploadDataUrl = `/arbitrary/${service}/${registeredName}/${identifier}${urlSuffix}?apiKey=${getApiKey()}`
|
||||
|
||||
if(metaData){
|
||||
uploadDataUrl = `/arbitrary/${service}/${registeredName}/${identifier}${urlSuffix}?${metaData}&apiKey=${getApiKey()}`
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
let uploadDataRes = await parentEpml.request("apiCall", {
|
||||
type: "api",
|
||||
method: "POST",
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user