|
|
@ -6,7 +6,7 @@ import { saveAs } from 'file-saver'; |
|
|
|
import '@material/mwc-icon' |
|
|
|
import '@material/mwc-icon' |
|
|
|
import ShortUniqueId from 'short-unique-id'; |
|
|
|
import ShortUniqueId from 'short-unique-id'; |
|
|
|
import { publishData } from '../../utils/publish-image.js'; |
|
|
|
import { publishData } from '../../utils/publish-image.js'; |
|
|
|
|
|
|
|
import './ChatGifsExplore' |
|
|
|
const parentEpml = new Epml({ type: 'WINDOW', source: window.parent }) |
|
|
|
const parentEpml = new Epml({ type: 'WINDOW', source: window.parent }) |
|
|
|
|
|
|
|
|
|
|
|
class ChatGifs extends LitElement { |
|
|
|
class ChatGifs extends LitElement { |
|
|
@ -14,6 +14,7 @@ class ChatGifs extends LitElement { |
|
|
|
return { |
|
|
|
return { |
|
|
|
selectedAddress: { type: Object }, |
|
|
|
selectedAddress: { type: Object }, |
|
|
|
myGifCollections: { type: Array }, |
|
|
|
myGifCollections: { type: Array }, |
|
|
|
|
|
|
|
exploreCollections: { type: Array }, |
|
|
|
gifsToBeAdded: { type: Array}, |
|
|
|
gifsToBeAdded: { type: Array}, |
|
|
|
webWorkerImage: {type: Object}, |
|
|
|
webWorkerImage: {type: Object}, |
|
|
|
mode: {type: String}, |
|
|
|
mode: {type: String}, |
|
|
@ -32,19 +33,172 @@ class ChatGifs extends LitElement { |
|
|
|
this.uid = new ShortUniqueId() |
|
|
|
this.uid = new ShortUniqueId() |
|
|
|
this.selectedAddress = window.parent.reduxStore.getState().app.selectedAddress |
|
|
|
this.selectedAddress = window.parent.reduxStore.getState().app.selectedAddress |
|
|
|
this.myGifCollections = [] |
|
|
|
this.myGifCollections = [] |
|
|
|
|
|
|
|
this.exploreCollections = [] |
|
|
|
this.myAccountName = '' |
|
|
|
this.myAccountName = '' |
|
|
|
this.gifsToBeAdded = [] |
|
|
|
this.gifsToBeAdded = [] |
|
|
|
// mode can be 'myCollection', 'newCollection', 'explore', 'subscribedCollection'
|
|
|
|
// mode can be 'myCollection', 'newCollection', 'explore', 'subscribedCollection'
|
|
|
|
this.mode = "myCollection" |
|
|
|
this.mode = "myCollection" |
|
|
|
this.currentCollection = null |
|
|
|
this.currentCollection = null |
|
|
|
|
|
|
|
this.pageNumber = 1 |
|
|
|
|
|
|
|
this.downObserverElement = '' |
|
|
|
|
|
|
|
this.viewElement = '' |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
async structureCollections(gifCollections){ |
|
|
|
|
|
|
|
try { |
|
|
|
|
|
|
|
const myNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node]; |
|
|
|
|
|
|
|
const nodeUrl = myNode.protocol + '://' + myNode.domain + ':' + myNode.port; |
|
|
|
|
|
|
|
const getMetaDataGifs = (gifCollections || []).map(async (collection) => { |
|
|
|
|
|
|
|
let collectionObj = collection |
|
|
|
|
|
|
|
try { |
|
|
|
|
|
|
|
const metaData = await parentEpml.request('apiCall', { |
|
|
|
|
|
|
|
url: `/arbitrary/metadata/GIF_REPOSITORY/${this.myAccountName}/${collection.identifier}` |
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
collectionObj = { |
|
|
|
|
|
|
|
...collection, |
|
|
|
|
|
|
|
gifUrls: [] |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
if(metaData.description){ |
|
|
|
|
|
|
|
const metaDataArray = metaData.description.split(';').map((data)=> { |
|
|
|
|
|
|
|
return `${nodeUrl}/arbitrary/GIF_REPOSITORY/${this.myAccountName}/${collection.identifier}?filepath=${data}` |
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
collectionObj = { |
|
|
|
|
|
|
|
...collection, |
|
|
|
|
|
|
|
gifUrls: metaDataArray |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
} catch (error) { |
|
|
|
|
|
|
|
console.log(error) |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return collectionObj |
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
return await Promise.all(getMetaDataGifs) |
|
|
|
|
|
|
|
} catch (error) { |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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 getMoreExploreGifs(){ |
|
|
|
|
|
|
|
try { |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const getAllGifCollections = await parentEpml.request("apiCall", { |
|
|
|
|
|
|
|
type: "api", |
|
|
|
|
|
|
|
url: `/arbitrary/resources?service=GIF_REPOSITORY&limit=20&offset=${this.pageNumber * 20}`, |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const gifCollectionWithMetaData = await this.structureCollections(getAllGifCollections) |
|
|
|
|
|
|
|
this.exploreCollections = [...this.exploreCollections, ...gifCollectionWithMetaData] |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
this.pageNumber = this.pageNumber + 1 |
|
|
|
|
|
|
|
} catch (error) { |
|
|
|
|
|
|
|
console.error(error) |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
async getCollectionList(){ |
|
|
|
|
|
|
|
try { |
|
|
|
|
|
|
|
await parentEpml.request("apiCall", { |
|
|
|
|
|
|
|
type: "api", |
|
|
|
|
|
|
|
url: `/lists/gifSubscribedRepos`, |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
} 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`, |
|
|
|
|
|
|
|
body: bodyToString, |
|
|
|
|
|
|
|
headers: { |
|
|
|
|
|
|
|
'Content-Type': 'application/json' |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
} catch (error) { |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
async removeCollectionFromList(collection){ |
|
|
|
|
|
|
|
try { |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const body = { |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
"items": [ |
|
|
|
|
|
|
|
collection |
|
|
|
|
|
|
|
] |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
const bodyToString = JSON.stringify(body) |
|
|
|
|
|
|
|
await parentEpml.request("apiCall", { |
|
|
|
|
|
|
|
type: "api", |
|
|
|
|
|
|
|
method: 'DELETE', |
|
|
|
|
|
|
|
url: `/lists/gifSubscribedRepos`, |
|
|
|
|
|
|
|
body: bodyToString, |
|
|
|
|
|
|
|
headers: { |
|
|
|
|
|
|
|
'Content-Type': 'application/json' |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
} catch (error) { |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
async firstUpdated() { |
|
|
|
async firstUpdated() { |
|
|
|
|
|
|
|
this.viewElement = this.shadowRoot.getElementById('viewElement'); |
|
|
|
|
|
|
|
this.downObserverElement = this.shadowRoot.getElementById('downObserver'); |
|
|
|
|
|
|
|
this.elementObserver(); |
|
|
|
|
|
|
|
|
|
|
|
try { |
|
|
|
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 userName = await this.getName(this.selectedAddress.address); |
|
|
|
const userName = await this.getName(this.selectedAddress.address); |
|
|
|
this.myAccountName = userName |
|
|
|
this.myAccountName = userName |
|
|
|
if(this.myAccountName){ |
|
|
|
if(this.myAccountName){ |
|
|
@ -52,44 +206,43 @@ class ChatGifs extends LitElement { |
|
|
|
url: `/arbitrary/resources?service=GIF_REPOSITORY&limit=0&name=${this.myAccountName}` |
|
|
|
url: `/arbitrary/resources?service=GIF_REPOSITORY&limit=0&name=${this.myAccountName}` |
|
|
|
}) |
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const gifCollectionWithMetaData = await this.structureCollections(getMyGifColloctions) |
|
|
|
const getMetaDataGifs = (getMyGifColloctions || []).map(async (collection) => { |
|
|
|
|
|
|
|
let collectionObj = collection |
|
|
|
|
|
|
|
try { |
|
|
|
|
|
|
|
const metaData = await parentEpml.request('apiCall', { |
|
|
|
|
|
|
|
url: `/arbitrary/metadata/GIF_REPOSITORY/${this.myAccountName}/${collection.identifier}` |
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
collectionObj = { |
|
|
|
|
|
|
|
...collection, |
|
|
|
|
|
|
|
gifUrls: [] |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
if(metaData.description){ |
|
|
|
|
|
|
|
const metaDataArray = metaData.description.split(';').map((data)=> { |
|
|
|
|
|
|
|
return `${nodeUrl}/arbitrary/GIF_REPOSITORY/${this.myAccountName}/${collection.identifier}?filepath=${data}` |
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
const listOfGifs = [`${nodeUrl}/arbitrary/GIF_REPOSITORY/Phil/gif_pmBEwm?filepath=giphy (1).gif`, `${nodeUrl}/arbitrary/GIF_REPOSITORY/Phil/gif_pmBEwm?filepath=giphy (3).gif`] |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
collectionObj = { |
|
|
|
|
|
|
|
...collection, |
|
|
|
|
|
|
|
gifUrls: metaDataArray |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
} catch (error) { |
|
|
|
|
|
|
|
console.log(error) |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return collectionObj |
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
const gifCollectionWithMetaData = await Promise.all(getMetaDataGifs) |
|
|
|
|
|
|
|
console.log({gifCollectionWithMetaData}) |
|
|
|
console.log({gifCollectionWithMetaData}) |
|
|
|
this.myGifCollections = gifCollectionWithMetaData |
|
|
|
this.myGifCollections = gifCollectionWithMetaData |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
// for the explore section
|
|
|
|
|
|
|
|
const getAllGifCollections = await parentEpml.request("apiCall", { |
|
|
|
|
|
|
|
type: "api", |
|
|
|
|
|
|
|
url: `/arbitrary/resources?service=GIF_REPOSITORY&limit=20&offset=${this.pageNumber * 20}`, |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
console.log({getAllGifCollections}) |
|
|
|
|
|
|
|
const gifCollectionWithMetaData = await this.structureCollections(getAllGifCollections) |
|
|
|
|
|
|
|
this.exploreCollections = gifCollectionWithMetaData |
|
|
|
|
|
|
|
this.pageNumber = this.pageNumber + 1 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const getCollectionList = await this.getCollectionList() |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
let savedCollections = [] |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const getSavedGifRepos = (!Array.isArray(getCollectionList) || []).map(async (collection) => { |
|
|
|
|
|
|
|
let collectionObj = collection |
|
|
|
|
|
|
|
try { |
|
|
|
|
|
|
|
const data = await parentEpml.request('apiCall', { |
|
|
|
|
|
|
|
url: `/arbitrary/GIF_REPOSITORY/collection` |
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
savedCollections.push(data) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
} catch (error) { |
|
|
|
|
|
|
|
console.log(error) |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return collectionObj |
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
await Promise.all(getSavedGifRepos) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
console.log({savedCollections}) |
|
|
|
|
|
|
|
|
|
|
|
} catch (error) { |
|
|
|
} catch (error) { |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
@ -184,6 +337,10 @@ console.log({zipFileBlob}) |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
setCurrentCollection(val){ |
|
|
|
|
|
|
|
this.currentCollection = val |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
render() { |
|
|
|
render() { |
|
|
|
|
|
|
|
|
|
|
|
return html` |
|
|
|
return html` |
|
|
@ -201,7 +358,7 @@ console.log({zipFileBlob}) |
|
|
|
<button @click=${()=> { |
|
|
|
<button @click=${()=> { |
|
|
|
this.mode = "explore" |
|
|
|
this.mode = "explore" |
|
|
|
}}>Explore collections</button> |
|
|
|
}}>Explore collections</button> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
${this.mode === "myCollection" && !this.currentCollection ? html` |
|
|
|
${this.mode === "myCollection" && !this.currentCollection ? html` |
|
|
|
${this.myGifCollections.map((collection)=> { |
|
|
|
${this.myGifCollections.map((collection)=> { |
|
|
@ -215,7 +372,13 @@ ${this.mode === "myCollection" && !this.currentCollection ? html` |
|
|
|
` |
|
|
|
` |
|
|
|
})} |
|
|
|
})} |
|
|
|
` : ''}
|
|
|
|
` : ''}
|
|
|
|
${this.currentCollection ? html` |
|
|
|
${this.mode === "explore" && !this.currentCollection ? html` |
|
|
|
|
|
|
|
<chat-gifs-explore currentCollection=${this.currentCollection} .getMoreExploreGifs=${(val)=> this.getMoreExploreGifs(val)} .exploreCollections=${this.exploreCollections} |
|
|
|
|
|
|
|
.setCurrentCollection=${(val)=> this.setCurrentCollection(val)} |
|
|
|
|
|
|
|
></chat-gifs-explore> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
` : ''}
|
|
|
|
|
|
|
|
${this.currentCollection && this.mode === "myCollection" ? html` |
|
|
|
<button @click=${()=> { |
|
|
|
<button @click=${()=> { |
|
|
|
this.currentCollection = null |
|
|
|
this.currentCollection = null |
|
|
|
}}>Back</button> |
|
|
|
}}>Back</button> |
|
|
@ -229,6 +392,23 @@ ${this.mode === "myCollection" && !this.currentCollection ? html` |
|
|
|
` |
|
|
|
` |
|
|
|
})} |
|
|
|
})} |
|
|
|
` : ''}
|
|
|
|
` : ''}
|
|
|
|
|
|
|
|
${this.currentCollection && this.mode === "explore" ? html` |
|
|
|
|
|
|
|
<button @click=${()=> { |
|
|
|
|
|
|
|
this.currentCollection = null |
|
|
|
|
|
|
|
}}>Back</button> |
|
|
|
|
|
|
|
<button @click=${()=> { |
|
|
|
|
|
|
|
this.currentCollection = null |
|
|
|
|
|
|
|
}}>Subscribe to this collection</button> |
|
|
|
|
|
|
|
${this.currentCollection.gifUrls.map((gif)=> { |
|
|
|
|
|
|
|
console.log({gif}) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return html` |
|
|
|
|
|
|
|
<img onerror=${(e)=> { |
|
|
|
|
|
|
|
e.target.src = gif |
|
|
|
|
|
|
|
}} src=${gif} style="width: 50px; height: 50px" /> |
|
|
|
|
|
|
|
` |
|
|
|
|
|
|
|
})} |
|
|
|
|
|
|
|
` : ''}
|
|
|
|
${this.mode === "newCollection" ? html` |
|
|
|
${this.mode === "newCollection" ? html` |
|
|
|
<input
|
|
|
|
<input
|
|
|
|
@change="${e => { |
|
|
|
@change="${e => { |
|
|
|