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');
|
url(Montserrat.ttf) format('truetype');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'MavenPro';
|
||||||
|
src: local('MavenPro'),
|
||||||
|
local('MavenPro'),
|
||||||
|
url(Montserrat.ttf) format('truetype');
|
||||||
|
}
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: 'WorkSans';
|
font-family: 'WorkSans';
|
||||||
src: local('WorkSans'),
|
src: local('WorkSans'),
|
||||||
@ -54,6 +60,13 @@
|
|||||||
url(Livvic.ttf) format('truetype');
|
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 {
|
.material-icons {
|
||||||
font-family: 'Material Icons';
|
font-family: 'Material Icons';
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
|
|||||||
@ -53,6 +53,13 @@ html {
|
|||||||
--group-header: #929292;
|
--group-header: #929292;
|
||||||
--group-drop-shadow: rgb(17 17 26 / 10%) 0px 1px 0px;
|
--group-drop-shadow: rgb(17 17 26 / 10%) 0px 1px 0px;
|
||||||
--reactions-tooltip-bg: #ffffff;
|
--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"] {
|
html[theme="dark"] {
|
||||||
@ -110,4 +117,11 @@ html[theme="dark"] {
|
|||||||
--group-header: #c8c8c8;
|
--group-header: #c8c8c8;
|
||||||
--group-drop-shadow: rgb(191 191 191 / 32%) 0px 1px 0px;
|
--group-drop-shadow: rgb(191 191 191 / 32%) 0px 1px 0px;
|
||||||
--reactions-tooltip-bg: #161515;
|
--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",
|
"balances": "YOUR WALLET BALANCES",
|
||||||
"update": "UPDATE 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": {
|
"startminting": {
|
||||||
"smchange1": "Cannot fetch minting accounts",
|
"smchange1": "Cannot fetch minting accounts",
|
||||||
"smchange2": "Failed to remove key",
|
"smchange2": "Failed to remove key",
|
||||||
|
|||||||
@ -50,6 +50,13 @@ html {
|
|||||||
--group-header: #929292;
|
--group-header: #929292;
|
||||||
--group-drop-shadow: rgb(17 17 26 / 10%) 0px 1px 0px;
|
--group-drop-shadow: rgb(17 17 26 / 10%) 0px 1px 0px;
|
||||||
--reactions-tooltip-bg: #ffffff;
|
--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"] {
|
html[theme="dark"] {
|
||||||
@ -104,4 +111,11 @@ html[theme="dark"] {
|
|||||||
--group-header: #c8c8c8;
|
--group-header: #c8c8c8;
|
||||||
--group-drop-shadow: rgb(191 191 191 / 32%) 0px 1px 0px;
|
--group-drop-shadow: rgb(191 191 191 / 32%) 0px 1px 0px;
|
||||||
--reactions-tooltip-bg: #161515;
|
--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/icons": "23.3.7",
|
||||||
"@vaadin/tooltip": "23.3.7",
|
"@vaadin/tooltip": "23.3.7",
|
||||||
"axios": "1.3.3",
|
"axios": "1.3.3",
|
||||||
|
"@zip.js/zip.js": "^2.6.62",
|
||||||
"epml": "0.3.3",
|
"epml": "0.3.3",
|
||||||
"file-saver": "2.0.5",
|
"file-saver": "2.0.5",
|
||||||
"highcharts": "10.3.3",
|
"highcharts": "10.3.3",
|
||||||
|
|||||||
@ -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 },
|
setEditedMessageObj: { attribute: false },
|
||||||
sendMessage: { attribute: false },
|
sendMessage: { attribute: false },
|
||||||
sendMessageForward: { attribute: false },
|
sendMessageForward: { attribute: false },
|
||||||
openDialogImage: { attribute: false },
|
openDialogImage: { type: Boolean },
|
||||||
|
openDialogGif: { type: Boolean },
|
||||||
openDeleteImage: { type: Boolean },
|
openDeleteImage: { type: Boolean },
|
||||||
openDeleteAttachment: { type: Boolean },
|
openDeleteAttachment: { type: Boolean },
|
||||||
isImageLoaded: { type: Boolean },
|
isImageLoaded: { type: Boolean },
|
||||||
|
isGifLoaded: { type: Boolean },
|
||||||
isFirstMessage: { type: Boolean },
|
isFirstMessage: { type: Boolean },
|
||||||
isSingleMessageInGroup: { type: Boolean },
|
isSingleMessageInGroup: { type: Boolean },
|
||||||
isLastMessageInGroup: { type: Boolean },
|
isLastMessageInGroup: { type: Boolean },
|
||||||
@ -311,8 +313,11 @@ class MessageTemplate extends LitElement {
|
|||||||
this.showBlockAddressIcon = false
|
this.showBlockAddressIcon = false
|
||||||
this.myAddress = window.parent.reduxStore.getState().app.selectedAddress.address
|
this.myAddress = window.parent.reduxStore.getState().app.selectedAddress.address
|
||||||
this.imageFetches = 0
|
this.imageFetches = 0
|
||||||
|
this.gifFetches = 0
|
||||||
this.openDialogImage = false
|
this.openDialogImage = false
|
||||||
|
this.openDialogGif = false
|
||||||
this.isImageLoaded = false
|
this.isImageLoaded = false
|
||||||
|
this.isGifLoaded = false
|
||||||
this.isFirstMessage = false
|
this.isFirstMessage = false
|
||||||
this.isSingleMessageInGroup = false
|
this.isSingleMessageInGroup = false
|
||||||
this.isLastMessageInGroup = false
|
this.isLastMessageInGroup = false
|
||||||
@ -384,6 +389,7 @@ class MessageTemplate extends LitElement {
|
|||||||
let reactions = [];
|
let reactions = [];
|
||||||
let repliedToData = null;
|
let repliedToData = null;
|
||||||
let image = null;
|
let image = null;
|
||||||
|
let gif = null;
|
||||||
let isImageDeleted = false;
|
let isImageDeleted = false;
|
||||||
let isAttachmentDeleted = false;
|
let isAttachmentDeleted = false;
|
||||||
let version = 0;
|
let version = 0;
|
||||||
@ -392,8 +398,7 @@ class MessageTemplate extends LitElement {
|
|||||||
let attachment = null;
|
let attachment = null;
|
||||||
try {
|
try {
|
||||||
const parsedMessageObj = JSON.parse(this.messageObj.decodedMessage);
|
const parsedMessageObj = JSON.parse(this.messageObj.decodedMessage);
|
||||||
if(+parsedMessageObj.version > 1){
|
if(+parsedMessageObj.version > 1 && parsedMessageObj.messageText){
|
||||||
|
|
||||||
messageVersion2 = generateHTML(parsedMessageObj.messageText, [
|
messageVersion2 = generateHTML(parsedMessageObj.messageText, [
|
||||||
StarterKit,
|
StarterKit,
|
||||||
Underline,
|
Underline,
|
||||||
@ -415,13 +420,20 @@ class MessageTemplate extends LitElement {
|
|||||||
if (parsedMessageObj.images && Array.isArray(parsedMessageObj.images) && parsedMessageObj.images.length > 0) {
|
if (parsedMessageObj.images && Array.isArray(parsedMessageObj.images) && parsedMessageObj.images.length > 0) {
|
||||||
image = parsedMessageObj.images[0];
|
image = parsedMessageObj.images[0];
|
||||||
}
|
}
|
||||||
|
if (parsedMessageObj.gifs && Array.isArray(parsedMessageObj.gifs) && parsedMessageObj.gifs.length > 0) {
|
||||||
|
gif = parsedMessageObj.gifs[0];
|
||||||
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
|
console.error(error);
|
||||||
message = this.messageObj.decodedMessage;
|
message = this.messageObj.decodedMessage;
|
||||||
}
|
}
|
||||||
let avatarImg = '';
|
let avatarImg = '';
|
||||||
let imageHTML = '';
|
let imageHTML = '';
|
||||||
let imageHTMLDialog = '';
|
let imageHTMLDialog = '';
|
||||||
let imageUrl = '';
|
let imageUrl = '';
|
||||||
|
let gifHTML = '';
|
||||||
|
let gifHTMLDialog = '';
|
||||||
|
let gifUrl = '';
|
||||||
let nameMenu = '';
|
let nameMenu = '';
|
||||||
let levelFounder = '';
|
let levelFounder = '';
|
||||||
let hideit = hidemsg.includes(this.messageObj.sender);
|
let hideit = hidemsg.includes(this.messageObj.sender);
|
||||||
@ -463,6 +475,33 @@ class MessageTemplate extends LitElement {
|
|||||||
};
|
};
|
||||||
return imageHTMLRes;
|
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) {
|
if (image) {
|
||||||
const myNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node];
|
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 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`
|
nameMenu = html`
|
||||||
<span class="${this.messageObj.sender === this.myAddress && 'message-data-my-name'}">
|
<span class="${this.messageObj.sender === this.myAddress && 'message-data-my-name'}">
|
||||||
${this.messageObj.senderName ? this.messageObj.senderName : cropAddress(this.messageObj.sender)}
|
${this.messageObj.senderName ? this.messageObj.senderName : cropAddress(this.messageObj.sender)}
|
||||||
@ -646,6 +696,25 @@ class MessageTemplate extends LitElement {
|
|||||||
` : image && isImageDeleted ? html`
|
` : image && isImageDeleted ? html`
|
||||||
<p class="image-deleted-msg">${translate("chatpage.cchange80")}</p>
|
<p class="image-deleted-msg">${translate("chatpage.cchange80")}</p>
|
||||||
` : html``}
|
` : 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 ?
|
${attachment && !isAttachmentDeleted ?
|
||||||
html`
|
html`
|
||||||
<div @click=${async () => await this.downloadAttachment(attachment)} class="attachment-container">
|
<div @click=${async () => await this.downloadAttachment(attachment)} class="attachment-container">
|
||||||
@ -753,6 +822,7 @@ class MessageTemplate extends LitElement {
|
|||||||
.setOpenPrivateMessage=${(val) => this.setOpenPrivateMessage(val)}
|
.setOpenPrivateMessage=${(val) => this.setOpenPrivateMessage(val)}
|
||||||
.setOpenTipUser=${(val) => this.setOpenTipUser(val)}
|
.setOpenTipUser=${(val) => this.setOpenTipUser(val)}
|
||||||
.setUserName=${(val) => this.setUserName(val)}
|
.setUserName=${(val) => this.setUserName(val)}
|
||||||
|
.gif=${!!gif}
|
||||||
>
|
>
|
||||||
</chat-menu>
|
</chat-menu>
|
||||||
</div>
|
</div>
|
||||||
@ -855,6 +925,28 @@ class MessageTemplate extends LitElement {
|
|||||||
${translate("general.close")}
|
${translate("general.close")}
|
||||||
</mwc-button>
|
</mwc-button>
|
||||||
</mwc-dialog>
|
</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
|
<mwc-dialog
|
||||||
hideActions
|
hideActions
|
||||||
?open=${this.openDeleteImage}
|
?open=${this.openDeleteImage}
|
||||||
@ -937,6 +1029,7 @@ class ChatMenu extends LitElement {
|
|||||||
setOpenPrivateMessage: { attribute: false },
|
setOpenPrivateMessage: { attribute: false },
|
||||||
setOpenTipUser: { attribute: false },
|
setOpenTipUser: { attribute: false },
|
||||||
setUserName: { 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>
|
<vaadin-icon icon="vaadin:reply" slot="icon"></vaadin-icon>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
${this.myAddress === this.originalMessage.sender ? (
|
${((this.myAddress === this.originalMessage.sender) && (
|
||||||
|
!this.gif)) ? (
|
||||||
html`
|
html`
|
||||||
<div
|
<div
|
||||||
class=${`menu-icon ${!this.firstMessageInChat ? "tooltip" : ""}`}
|
class=${`menu-icon ${!this.firstMessageInChat ? "tooltip" : ""}`}
|
||||||
data-text="${translate("blockpage.bcchange12")}"
|
data-text="${translate("blockpage.bcchange12")}"
|
||||||
@click=${() => {
|
@click=${() => {
|
||||||
if(this.version === '0'){
|
if (this.version === '0'){
|
||||||
this.versionErrorSnack()
|
this.versionErrorSnack()
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|||||||
@ -34,6 +34,8 @@ class ChatTextEditor extends LitElement {
|
|||||||
},
|
},
|
||||||
toggleEnableChatEnter: {attribute: false},
|
toggleEnableChatEnter: {attribute: false},
|
||||||
isEnabledChatEnter: {type: Boolean},
|
isEnabledChatEnter: {type: Boolean},
|
||||||
|
openGifModal: { type: Boolean },
|
||||||
|
setOpenGifModal: { attribute: false },
|
||||||
chatId: {type: String}
|
chatId: {type: String}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -392,7 +394,7 @@ mwc-checkbox::shadow .mdc-checkbox::after, mwc-checkbox::shadow .mdc-checkbox::b
|
|||||||
.toggleBold()
|
.toggleBold()
|
||||||
.run()
|
.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> -->
|
<!-- <mwc-icon >format_bold</mwc-icon> -->
|
||||||
<span class="material-symbols-outlined"></span>
|
<span class="material-symbols-outlined"></span>
|
||||||
@ -406,33 +408,33 @@ mwc-checkbox::shadow .mdc-checkbox::after, mwc-checkbox::shadow .mdc-checkbox::b
|
|||||||
.toggleItalic()
|
.toggleItalic()
|
||||||
.run()
|
.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>
|
<span class="material-symbols-outlined"></span>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<button
|
<button
|
||||||
@click=${() => this.editor.chain().focus().toggleUnderline().run()}
|
@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>
|
<span class="material-symbols-outlined"></span>
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
@click=${() => this.editor.chain().focus().toggleHighlight().run()}
|
@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>
|
<span class="material-symbols-outlined"></span>
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
@click=${() => this.editor.chain().focus().toggleCodeBlock().run()}
|
@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>
|
<span class="material-symbols-outlined"></span>
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
@click=${()=> this.toggleEnableChatEnter() }
|
@click=${()=> this.toggleEnableChatEnter() }
|
||||||
style="height: 26px; box-sizing: border-box;"
|
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`
|
${this.isEnabledChatEnter ? html`
|
||||||
${translate("chatpage.cchange63")}
|
${translate("chatpage.cchange63")}
|
||||||
@ -453,7 +455,6 @@ mwc-checkbox::shadow .mdc-checkbox::after, mwc-checkbox::shadow .mdc-checkbox::b
|
|||||||
>${translate('chatpage.cchange69')}</label>
|
>${translate('chatpage.cchange69')}</label>
|
||||||
|
|
||||||
<mwc-checkbox style="margin-right: -15px;" id="qChatShowAutoMsg" @click=${e => {
|
<mwc-checkbox style="margin-right: -15px;" id="qChatShowAutoMsg" @click=${e => {
|
||||||
console.log(e.target.checked)
|
|
||||||
if(e.target.checked){
|
if(e.target.checked){
|
||||||
window.parent.reduxStore.dispatch( window.parent.reduxAction.removeAutoLoadImageChat(this.chatId))
|
window.parent.reduxStore.dispatch( window.parent.reduxAction.removeAutoLoadImageChat(this.chatId))
|
||||||
return
|
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}>
|
<button class="emoji-button" ?disabled=${this.isLoading || this.isLoadingMessages}>
|
||||||
${html`<img class="emoji" draggable="false" alt="😀" src="/emoji/svg/1f600.svg" />`}
|
${html`<img class="emoji" draggable="false" alt="😀" src="/emoji/svg/1f600.svg" />`}
|
||||||
</button>
|
</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 ? (
|
${this.editedMessageObj ? (
|
||||||
html`
|
html`
|
||||||
<div style="margin-bottom: 10px">
|
<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', () => {
|
window.addEventListener('storage', () => {
|
||||||
const checkTheme = localStorage.getItem('qortalTheme');
|
const checkTheme = localStorage.getItem('qortalTheme');
|
||||||
const chatbar = this.shadowRoot.querySelector('.element')
|
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'
|
import { css } from 'lit'
|
||||||
|
|
||||||
export const userInfoStyles = css`
|
export const userInfoStyles = css`
|
||||||
.user-info-header {
|
.user-info-header {
|
||||||
font-family: Montserrat, sans-serif;
|
font-family: Montserrat, sans-serif;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 28px;
|
font-size: 28px;
|
||||||
color: var(--chat-bubble-msg-color);
|
color: var(--chat-bubble-msg-color);
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
padding: 10px 0;
|
padding: 10px 0;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.avatar-container {
|
.avatar-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.user-info-avatar {
|
.user-info-avatar {
|
||||||
width: 100px;
|
width: 100px;
|
||||||
height: 100px;
|
height: 100px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
margin: 10px 0;
|
margin: 10px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.user-info-no-avatar {
|
.user-info-no-avatar {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
text-transform: capitalize;
|
text-transform: capitalize;
|
||||||
font-size: 50px;
|
font-size: 50px;
|
||||||
font-family: Roboto, sans-serif;
|
font-family: Roboto, sans-serif;
|
||||||
width: 100px;
|
width: 100px;
|
||||||
height: 100px;
|
height: 100px;
|
||||||
border-radius:50%;
|
border-radius:50%;
|
||||||
background: var(--chatHeadBg);
|
background: var(--chatHeadBg);
|
||||||
color: var(--chatHeadText);
|
color: var(--chatHeadText);
|
||||||
}
|
}
|
||||||
|
|
||||||
.send-message-button {
|
.send-message-button {
|
||||||
font-family: Roboto, sans-serif;
|
font-family: Roboto, sans-serif;
|
||||||
letter-spacing: 0.3px;
|
letter-spacing: 0.3px;
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
padding: 8px 5px;
|
padding: 8px 5px;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: var(--mdc-theme-primary);
|
color: var(--mdc-theme-primary);
|
||||||
transition: all 0.3s ease-in-out;
|
transition: all 0.3s ease-in-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
.send-message-button:hover {
|
.send-message-button:hover {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
background-color: #03a8f485;
|
background-color: #03a8f485;
|
||||||
}
|
}
|
||||||
|
|
||||||
.close-icon {
|
.close-icon {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 3px;
|
top: 3px;
|
||||||
right: 5px;
|
right: 5px;
|
||||||
color: #676b71;
|
color: #676b71;
|
||||||
width: 14px;
|
width: 14px;
|
||||||
transition: all 0.1s ease-in-out;
|
transition: all 0.1s ease-in-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
.close-icon:hover {
|
.close-icon:hover {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
color: #494c50;
|
color: #494c50;
|
||||||
}
|
}
|
||||||
`
|
`
|
||||||
@ -16,7 +16,9 @@ export const publishData = async ({
|
|||||||
parentEpml,
|
parentEpml,
|
||||||
uploadType,
|
uploadType,
|
||||||
selectedAddress,
|
selectedAddress,
|
||||||
worker
|
worker,
|
||||||
|
isBase64,
|
||||||
|
metaData
|
||||||
}) => {
|
}) => {
|
||||||
const validateName = async (receiverName) => {
|
const validateName = async (receiverName) => {
|
||||||
let nameRes = await parentEpml.request("apiCall", {
|
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
|
// 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())
|
let fileBuffer = new Uint8Array(await file.arrayBuffer())
|
||||||
postBody = Buffer.from(fileBuffer).toString("base64")
|
postBody = Buffer.from(fileBuffer).toString("base64")
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
let uploadDataUrl = `/arbitrary/${service}/${registeredName}${urlSuffix}?apiKey=${getApiKey()}`
|
let uploadDataUrl = `/arbitrary/${service}/${registeredName}${urlSuffix}?apiKey=${getApiKey()}`
|
||||||
if (identifier != null && identifier.trim().length > 0) {
|
if (identifier != null && identifier.trim().length > 0) {
|
||||||
uploadDataUrl = `/arbitrary/${service}/${registeredName}/${identifier}${urlSuffix}?apiKey=${getApiKey()}`
|
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", {
|
let uploadDataRes = await parentEpml.request("apiCall", {
|
||||||
type: "api",
|
type: "api",
|
||||||
method: "POST",
|
method: "POST",
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user