\n `;\n // give the focus to the input.\n this.playBtn = this.shadowRoot.querySelector(\"#play-button\")\n this.stopBtn = this.shadowRoot.querySelector(\"#stop-button\")\n this.setButton = this.shadowRoot.querySelector(\"#set-button\")\n this.deleteButton = this.shadowRoot.querySelector(\"#delete-button\")\n\n let globule = Backend.getGlobule(AccountController.account.getDomain())\n let url = getUrl(globule)\n\n let path = file.getPath()\n path = path.replace(globule.config.WebRoot, \"\")\n\n path.split(\"/\").forEach(item => {\n item = item.trim()\n if (item.length > 0) {\n url += \"/\" + encodeURIComponent(item)\n }\n })\n\n generatePeerToken(globule, token => {\n if (localStorage.getItem(\"user_token\") != undefined) {\n url += \"?token=\" + token\n }\n this.url = url;\n })\n\n this.audio = null;\n\n\n this.playBtn.onclick = () => {\n this.play()\n }\n\n this.stopBtn.onclick = () => {\n this.stop()\n }\n\n this.setButton.onclick = () => {\n let ringtones = this.parent.getElementsByTagName(\"globular-ringtone\")\n for (var i = 0; i < ringtones.length; i++) {\n ringtones[i].stop()\n }\n this.parent.setRingtone(this)\n }\n\n this.deleteButton.onclick = () => {\n let ringtones = this.parent.getElementsByTagName(\"globular-ringtone\")\n for (var i = 0; i < ringtones.length; i++) {\n ringtones[i].stop()\n }\n\n this.parent.deleteRingtone(this)\n }\n\n }\n\n // The connection callback.\n connectedCallback() {\n\n }\n\n hideSetButton() {\n this.setButton.style.display = \"none\"\n }\n\n showSetButton() {\n this.setButton.style.display = \"\"\n }\n\n hideDeleteButton() {\n this.deleteButton.style.display = \"none\"\n }\n\n showDeleteButton() {\n this.deleteButton.style.display = \"\"\n }\n\n // Call search event.\n play(loop) {\n\n // stop currently selected ringtone...\n let ringtones = this.parent.getElementsByTagName(\"globular-ringtone\")\n for (var i = 0; i < ringtones.length; i++) {\n ringtones[i].stop()\n }\n\n this.playBtn.style.display = \"none\"\n this.stopBtn.style.display = \"\"\n if (this.audio == null) {\n this.audio = new Audio(this.url)\n }\n\n if (loop) {\n this.audio.setAttribute(\"loop\", \"true\")\n }\n\n this.audio.play()\n\n this.audio.onended = () => {\n this.stop()\n }\n }\n\n stop() {\n this.playBtn.style.display = \"\"\n this.stopBtn.style.display = \"none\"\n if (this.audio != null) {\n this.audio.pause()\n }\n\n }\n}\n\ncustomElements.define('globular-ringtone', Ringtone)\n","/**\n * Accept contact button.\n */\nexport class AcceptDeclineContactBtns extends HTMLElement {\n // attributes.\n\n // Create the applicaiton view.\n constructor() {\n super()\n // Set the shadow dom.\n this.attachShadow({ mode: 'open' });\n\n let contact = this.getAttribute(\"contact\");\n\n this.onaccpect = null;\n this.ondecline = null;\n\n\n // Innitialisation of the layout.\n this.shadowRoot.innerHTML = `\n \n\n
\n Decline\n Accept\n
\n `\n\n let acceptContactBtn = this.shadowRoot.getElementById(\"accept_contact_btn\")\n acceptContactBtn.onclick = () => {\n if (this.onaccpect != undefined) {\n this.onaccpect(contact)\n }\n }\n\n let declineContactBtn = this.shadowRoot.getElementById(\"decline_contact_btn\")\n declineContactBtn.onclick = () => {\n if (this.ondecline != undefined) {\n this.ondecline(contact);\n\n }\n }\n }\n\n}\n\ncustomElements.define('globular-accept-decline-contact-btns', AcceptDeclineContactBtns)\n\n","import { Session, SessionState } from \"globular-web-client/resource/resource_pb.js\";\nimport { AccountController } from \"../../backend/account\";\nimport { Backend, displayMessage } from \"../../backend/backend\";\nimport { SessionStatePanel } from \"../session/session.js\"\nimport { Ringtone } from \"../videoCall/ringtone.js\"\nimport \"./acceptDeclineContactBtns.js\"\n\n/**\n * Display Contact (account informations)\n */\nexport class ContactCard extends HTMLElement {\n\n // Create the applicaiton view.\n constructor(account, contact, actionable = false) {\n super()\n // Set the shadow dom.\n this.attachShadow({ mode: 'open' });\n this.account = account;\n this.contact = contact;\n this.actionable = actionable\n this.showRingTone = false;\n\n if (this.hasAttribute(\"contact\")) {\n AccountController.getAccount(this.getAttribute(\"contact\"), (val) => {\n this.contact = val;\n }, (err) => {\n displayMessage(err, 3000)\n })\n }\n\n if (this.hasAttribute(\"account\")) {\n AccountController.getAccount(this.getAttribute(\"account\"), (val) => {\n this.account = val;\n }, (err) => {\n displayMessage(err, 3000)\n console.log(err)\n })\n }\n }\n\n // The connection callback.\n connectedCallback() {\n if (this.contact == undefined) {\n return\n }\n\n let name = this.contact.getName()\n if (name == undefined) {\n name = this.contact.getId()\n }\n\n if (this.contact.getFirstname().length > 0 && this.contact.getLastname().length > 0) {\n name = this.contact.getFirstname() + \" \" + this.contact.getLastname()\n }\n\n // Here I will ask the user for confirmation before actually delete the contact informations.\n let getSessionStateColor = (state) => {\n switch (state) {\n case SessionState.ONLINE:\n return \"green\";\n case SessionState.OFFLINE:\n return \"red\";\n case SessionState.AWAY:\n return \"orange\";\n default:\n return \"gray\";\n }\n }\n\n let state = SessionState.OFFLINE\n if(this.contact.session != undefined){\n this.contact.session.getState();\n }\n const color = getSessionStateColor(state);\n\n\n // Innitialisation of the layout.\n this.shadowRoot.innerHTML = `\n \n
\n
\n \n \n
\n ${name}\n ${this.contact.getEmail()}\n
\n \n
\n \n \n
\n \n
\n
\n `;\n\n // Set profile picture visibility dynamically\n const profileImg = this.shadowRoot.querySelector('.profile-img');\n const profileIcon = this.shadowRoot.querySelector('.profile-icon');\n if (this.contact.getProfilepicture().length > 0) {\n profileImg.style.display = \"block\";\n } else {\n profileIcon.style.display = \"block\";\n }\n /** only element with actions will have illuminated background... */\n if (this.children.length > 0 || this.actionable) {\n this.shadowRoot.querySelector(\".contact-invitation-div\").classList.add(\"actionable\")\n\n }\n\n if (this.showRingTone) {\n this.shadowRoot.querySelector(\"globular-ringtones\").style.display = \"block\"\n } else {\n this.shadowRoot.querySelector(\"globular-ringtones\").style.display = \"none\"\n }\n\n\n Backend.eventHub.subscribe(`session_state_${this.contact.getId() + \"@\" + this.contact.getDomain()}_change_event`,\n (uuid) => {\n /** nothing special here... */\n },\n (evt) => {\n // Get the session state and update the color of the status indicator.\n let session = Session.deserializeBinary(Uint8Array.from(evt.split(\",\")))\n let state = session.getState()\n const color = getSessionStateColor(state);\n this.shadowRoot.querySelector(\".status-indicator\").style.backgroundColor = color\n })\n\n\n\n }\n\n hideRingtone() {\n this.showRingTone = false\n if (this.shadowRoot.querySelector(\"globular-ringtones\"))\n this.shadowRoot.querySelector(\"globular-ringtones\").style.display = \"none\"\n }\n\n showRingtone() {\n this.showRingTone = true\n if (this.shadowRoot.querySelector(\"globular-ringtones\"))\n this.shadowRoot.querySelector(\"globular-ringtones\").style.display = \"block\"\n }\n\n // Set the invite button...\n setInviteButton(onInviteConctact) {\n this.innerHtml = \"\"\n let range = document.createRange()\n this.appendChild(range.createContextualFragment(`Invite`))\n let inviteBtn = this.querySelector(\"#invite_btn\")\n inviteBtn.onclick = () => {\n if (onInviteConctact != null) {\n onInviteConctact(this.contact)\n inviteBtn.disabled = true // disable the button after invitation\n }\n }\n }\n\n setDeleteButton(onDeleteContact) {\n\n let range = document.createRange()\n this.appendChild(range.createContextualFragment(`Delete`))\n\n this.querySelector(\"#delete_btn\").onclick = () => {\n if (onDeleteContact != null) {\n onDeleteContact(this.contact)\n }\n }\n }\n\n setCallButton(onCallContact) {\n let range = document.createRange()\n this.appendChild(range.createContextualFragment(`Call`))\n\n this.querySelector(\"#call_btn\").onclick = () => {\n if (onCallContact != null) {\n onCallContact(this.contact)\n document.body.click()\n }\n }\n }\n\n // Set the revoke invitation button.\n setRevokeButton(onRevokeInvitation) {\n this.innerHtml = \"\"\n let range = document.createRange()\n this.appendChild(range.createContextualFragment(`Revoke`))\n\n this.querySelector(\"#revoke_invitation_btn\").onclick = () => {\n if (onRevokeInvitation != null) {\n onRevokeInvitation(this.contact)\n }\n }\n }\n\n // Set the accept/decline button.\n setAcceptDeclineButton(onAcceptInvitation, onDeclineInvitation) {\n this.innerHtml = \"\"\n let range = document.createRange()\n this.appendChild(range.createContextualFragment(``))\n\n this.querySelector(\"#accept_decline_btn\").onaccpect = () => {\n if (onAcceptInvitation != null) {\n onAcceptInvitation(this.contact)\n }\n }\n\n this.querySelector(\"#accept_decline_btn\").ondecline = () => {\n if (onDeclineInvitation != null) {\n onDeclineInvitation(this.contact)\n }\n }\n }\n}\n\ncustomElements.define('globular-contact-card', ContactCard)","import { Call, CreateNotificationRqst, NotificationType, SetCallRqst, Notification } from \"globular-web-client/resource/resource_pb\";\nimport { AccountController } from \"../../backend/account\";\nimport { Backend, displayError, displayMessage, generatePeerToken, getUrl } from \"../../backend/backend\";\nimport { VideoConversation } from \"../videoCall/videoConversation\";\nimport getUuidByString from \"uuid-by-string\";\nimport { ContactCard } from \"./contactCard\";\nimport { randomUUID } from \"../utility\";\nimport { Ringtone } from \"../videoCall/ringtone\";\n\n/**\n * The contact list.\n */\nexport class ContactList extends HTMLElement {\n\n // Create the applicaiton view.\n constructor(account, onDeleteContact) {\n super()\n\n // Keep contact card in memory...\n this.cards = {}\n\n // Set the shadow dom.\n this.attachShadow({ mode: 'open' });\n\n this.account = account;\n this.onDeleteContact = onDeleteContact;\n let globule = Backend.getGlobule(account.getDomain())\n\n globule.eventHub.subscribe(\"accepted_\" + account.getId() + \"@\" + account.getDomain() + \"_evt\",\n (uuid) => { },\n (evt) => {\n let invitation = JSON.parse(evt);\n AccountController.getAccount(invitation._id,\n (contact) => {\n if (invitation.profilePicture)\n contact.setProfilepicture(invitation.profilePicture)\n contact.ringtone = invitation.ringtone\n this.appendContact(contact);\n },\n err => {\n displayError(err, 3000)\n console.log(err)\n })\n },\n false, this)\n\n globule.eventHub.subscribe(\"deleted_\" + account.getId() + \"@\" + account.getDomain() + \"_evt\",\n (uuid) => { },\n (evt) => {\n let invitation = JSON.parse(evt);\n AccountController.getAccount(invitation._id,\n (contact) => {\n this.removeContact(contact);\n },\n err => {\n displayError(err, 3000)\n console.log(err)\n })\n },\n false, this)\n\n // calling events...\n globule.eventHub.subscribe(\"calling_\" + account.getId() + \"@\" + account.getDomain() + \"_evt\", uuid => { }, evt => {\n\n // The contact has answer the call!\n let call = Call.deserializeBinary(Uint8Array.from(evt.split(\",\")))\n\n AccountController.getAccount(call.getCaller(), caller => {\n AccountController.getAccount(call.getCallee(), callee => {\n\n let globule = Backend.getGlobule(callee.getDomain())\n\n let url = getUrl(globule)\n if (caller.ringtone == undefined) {\n caller.ringtone = \"\"\n }\n\n // so here I will found the caller ringtone...\n let path = caller.ringtone\n if (path == \"\") {\n let router = document.querySelector(\"globular-router\")\n if (router) {\n path = router.base + path\n }\n path += \"/assets/audio/ringtone/little_do_you_know.mp3\"\n }\n path = path.replace(globule.config.WebRoot, \"\")\n\n path.split(\"/\").forEach(item => {\n item = item.trim()\n if (item.length > 0) {\n url += \"/\" + encodeURIComponent(item)\n }\n })\n\n let layout = document.querySelector(\"globular-app-layout\")\n if (layout) {\n url += `?application=${layout.getAttribute(\"application\")}`\n }\n\n let audio = new Audio(url)\n audio.setAttribute(\"loop\", \"true\")\n audio.setAttribute(\"autoplay\", \"true\")\n let name = caller.getName()\n if (caller.getFirstname().length > 0 && caller.getLastname().length > 0) {\n name = caller.getFirstname() + \" \" + caller.getLastname()\n }\n\n // So now I will display the interface the user to ask...\n // So here I will get the information from imdb and propose to assciate it with the file.\n let toast = displayMessage(`\n \n
\n
Incomming Call from
\n \n
\n ${name}\n \n Dismiss\n
\n
\n `)\n\n\n let timeout = setTimeout(() => {\n audio.pause()\n if (toast) {\n toast.hideToast();\n }\n\n Backend.getGlobule(caller.getDomain()).eventHub.publish(call.getUuid() + \"_miss_call_evt\", call.serializeBinary(), false)\n if (caller.getDomain() != callee.getDomain())\n Backend.getGlobule(callee.getDomain()).eventHub.publish(call.getUuid() + \"_miss_call_evt\", call.serializeBinary(), false)\n\n }, 30 * 1000)\n\n let cancelBtn = toast.toastElement.querySelector(\"#cancel-button\")\n cancelBtn.onclick = () => {\n toast.hideToast();\n audio.pause()\n clearTimeout(timeout)\n\n // Here I will send miss call event...\n Backend.getGlobule(caller.getDomain()).eventHub.publish(call.getUuid() + \"_miss_call_evt\", call.serializeBinary(), false)\n if (caller.getDomain() != callee.getDomain())\n Backend.getGlobule(callee.getDomain()).eventHub.publish(call.getUuid() + \"_miss_call_evt\", call.serializeBinary(), false)\n\n }\n\n let okBtn = toast.toastElement.querySelector(\"#ok-button\")\n okBtn.onclick = () => {\n\n toast.hideToast();\n audio.pause()\n clearTimeout(timeout)\n\n // The contact has answer the call!\n let videoConversation = new VideoConversation(call.getUuid(), caller.getDomain())\n\n // append it to the workspace.\n document.body.appendChild(videoConversation)\n\n Backend.getGlobule(caller.getDomain()).eventHub.publish(call.getUuid() + \"_answering_call_evt\", call.serializeBinary(), false)\n if (callee.getDomain() != caller.getDomain()) {\n Backend.getGlobule(callee.getDomain()).eventHub.publish(call.getUuid() + \"_answering_call_evt\", call.serializeBinary(), false)\n }\n }\n\n // Here the call was miss...\n Backend.getGlobule(caller.getDomain()).eventHub.subscribe(call.getUuid() + \"_miss_call_evt\", uuid => { }, evt => {\n\n clearTimeout(timeout)\n\n // The contact has answer the call!\n audio.pause()\n toast.hideToast();\n }, false)\n\n\n })\n\n }, err => ApplicationView.displayMessage(err, 3000))\n }, false)\n\n\n // Innitialisation of the layout.\n this.shadowRoot.innerHTML = `\n \n
\n \n
\n `\n // if the peer is not connected when the user is log in the contact card will not be displayed...\n Backend.eventHub.subscribe(\"update_peers_evt_\", uuid => { }, peer => {\n AccountController.getContacts(this.account, `{\"status\":\"accepted\"}`, (invitations) => {\n for (var i = 0; i < invitations.length; i++) {\n let invitation = invitations[i]\n AccountController.getAccount(invitation._id,\n (contact) => {\n if (invitation.getProfilepicture())\n contact.setProfilepicture(invitation.getProfilepicture())\n contact.ringtone = invitation.getRingtone()\n this.appendContact(contact);\n },\n err => {\n ApplicationView.displayMessage(err, 3000)\n console.log(err)\n })\n }\n }, err => {\n ApplicationView.displayMessage(err, 3000);\n })\n }, true)\n\n Backend.eventHub.subscribe(\"stop_peer_evt_\", uuid => { },\n peer => {\n Backend.eventHub.publish(\"remove_contact_card_\" + peer.getDomain() + \".\" + peer.getDomain() + \"_evt_\", {}, true)\n }, true)\n\n // So here I will get the list of sent invitation for the account.\n AccountController.getContacts(this.account, `{\"status\":\"accepted\"}`, (invitations) => {\n\n for (var i = 0; i < invitations.length; i++) {\n let invitation = invitations[i]\n AccountController.getAccount(invitation._id,\n (contact) => {\n if (invitation.profilePicture)\n contact.setProfilepicture(invitation.profilePicture)\n contact.ringtone = invitation.ringtone\n this.appendContact(contact);\n },\n err => {\n displayError(err, 3000)\n console.log(err)\n })\n }\n }, err => {\n displayError(err, 3000);\n })\n\n }\n\n getContactCard(contact) {\n let id = \"_\" + getUuidByString(contact.getId() + \"@\" + contact.getDomain() + \"_accepted_invitation\")\n let card = this.querySelector(\"#\" + id)\n return card;\n }\n\n appendContact(contact) {\n\n let id = \"_\" + getUuidByString(contact.getId() + \"@\" + contact.getDomain() + \"_accepted_invitation\")\n if (this.querySelector(\"#\" + id) != undefined) {\n return\n }\n\n this.innerHtml = \"\"\n\n let card = new ContactCard(this.account, contact)\n card.id = id\n\n card.setCallButton(this.onCallContact)\n\n card.setDeleteButton(this.onDeleteContact)\n card.showRingtone()\n this.appendChild(card)\n\n\n // if the globule is disconnected I will remove the contact...\n Backend.eventHub.subscribe(\"remove_contact_card_\" + contact.getDomain() + \"_evt_\", uuid => { }, evt => {\n if (card.parentNode) {\n card.parentNode.removeChild(card)\n }\n }, true)\n }\n\n removeContact(contact) {\n // simply remove it.\n let id = \"_\" + getUuidByString(contact.getId() + \"@\" + contact.getDomain() + \"_accepted_invitation\")\n\n let card = this.querySelector(\"#\" + id)\n if (card != undefined) {\n this.removeChild(card)\n }\n }\n\n onCallContact(contact) {\n\n console.log(\"Call contact: \", contact)\n \n let call = new Call()\n call.setUuid(randomUUID())\n call.setCallee(contact.getId() + \"@\" + contact.getDomain())\n call.setCaller(AccountController.account.getId() + \"@\" + AccountController.account.getDomain())\n call.setStarttime(Math.floor(Date.now() / 1000)) // set unix timestamp...\n call.setEndtime(-1)\n let rqst = new SetCallRqst\n rqst.setCall(call)\n\n // Set value on the callee...\n let globule = Backend.getGlobule(AccountController.account.getDomain())\n generatePeerToken(globule, token => {\n globule.resourceService.setCall(rqst, { domain: globule.domain, token: token })\n .then(rsp => {\n AccountController.getAccount(call.getCaller(), caller => {\n AccountController.getAccount(call.getCallee(), callee => {\n\n let url = getUrl(globule)\n\n if (callee.ringtone == undefined) {\n callee.ringtone = \"\"\n }\n\n // so here I will found the caller ringtone...\n let path = callee.ringtone\n\n if (path == \"\") {\n let router = document.querySelector(\"globular-router\")\n if (router) {\n path = router.base + path\n }\n path += \"/assets/audio/ringtone/2po2_rap.mp3\"\n }\n path = path.replace(globule.config.WebRoot, \"\")\n\n path.split(\"/\").forEach(item => {\n item = item.trim()\n if (item.length > 0) {\n url += \"/\" + encodeURIComponent(item)\n }\n })\n\n let layout = document.querySelector(\"globular-app-layout\")\n if (layout) {\n url += `?application=${layout.getAttribute(\"application\")}`\n }\n\n let audio = new Audio(url)\n audio.setAttribute(\"loop\", \"true\")\n audio.setAttribute(\"autoplay\", \"true\")\n let name = caller.getName()\n if (callee.getFirstname().length > 0 && callee.getLastname().length > 0) {\n name = callee.getFirstname() + \" \" + callee.getLastname()\n }\n\n // So now I will display the interface the user to ask...\n // So here I will get the information from imdb and propose to assciate it with the file.\n let toast = displayMessage(`\n \n
\n
Outgoing Call to
\n
\n \n
\n ${name}\n
\n \n
\n
\n `)\n\n // set timeout...\n let timeout = setTimeout(() => {\n audio.pause()\n toast.hideToast();\n Backend.getGlobule(caller.getDomain()).eventHub.publish(call.getUuid() + \"_miss_call_evt\", call.serializeBinary(), false)\n if (caller.getDomain() != callee.getDomain())\n Backend.getGlobule(callee.getDomain()).eventHub.publish(call.getUuid() + \"_miss_call_evt\", call.serializeBinary(), false)\n\n }, 30 * 1000)\n\n let cancelBtn = toast.toastElement.querySelector(\"#cancel-button\")\n cancelBtn.onclick = () => {\n toast.hideToast();\n audio.pause()\n clearTimeout(timeout)\n\n // Here I will send miss call event...\n Backend.getGlobule(caller.getDomain()).eventHub.publish(call.getUuid() + \"_miss_call_evt\", call.serializeBinary(), false)\n if (caller.getDomain() != callee.getDomain())\n Backend.getGlobule(callee.getDomain()).eventHub.publish(call.getUuid() + \"_miss_call_evt\", call.serializeBinary(), false)\n }\n\n // Here the call succeed...\n Backend.getGlobule(contact.getDomain()).eventHub.subscribe(call.getUuid() + \"_answering_call_evt\", uuid => { }, evt => {\n // The contact has answer the call!\n audio.pause()\n toast.hideToast();\n clearTimeout(timeout)\n\n\n let call = Call.deserializeBinary(Uint8Array.from(evt.split(\",\")))\n\n // The contact has answer the call!\n let videoConversation = new VideoConversation(call.getUuid(), AccountController.account.getDomain())\n\n // append it to the workspace.\n document.body.appendChild(videoConversation)\n\n\n // start the video conversation.\n globule.eventHub.publish(\"start_video_conversation_\" + call.getUuid() + \"_evt\", contact, true)\n\n }, false)\n\n // Here the call was miss...\n Backend.getGlobule(contact.getDomain()).eventHub.subscribe(call.getUuid() + \"_miss_call_evt\", uuid => { }, evt => {\n\n // The contact has answer the call!\n audio.pause()\n toast.hideToast();\n clearTimeout(timeout)\n\n generatePeerToken(Backend.getGlobule(contact.getDomain()), token => {\n let rqst = new CreateNotificationRqst\n let notification = new Notification\n notification.setDate(parseInt(Date.now() / 1000)) // Set the unix time stamp...\n notification.setId(call.getUuid())\n notification.setRecipient(contact.getId() + \"@\" + contact.getDomain())\n notification.setSender(AccountController.account.getId() + \"@\" + AccountController.account.getDomain())\n notification.setNotificationType(NotificationType.USER_NOTIFICATION)\n notification.setMac(Backend.getGlobule(contact.getDomain()).config.Mac)\n let name = AccountController.account.getName()\n if (AccountController.account.getFirstname().length > 0 && AccountController.account.getLastname().length > 0) {\n name = AccountController.account.getFirstname() + \" \" + AccountController.account.getLastname()\n }\n let date = new Date()\n let msg = `\n
\n
\n ${date.toLocaleString()}\n
\n
\n Missed call from ${name}\n
\n
\n `\n\n notification.setMessage(msg)\n rqst.setNotification(notification)\n\n // Create the notification...\n Backend.getGlobule(contact.getDomain()).resourceService.createNotification(rqst, {\n token: token,\n domain: Backend.domain\n }).then((rsp) => {\n // Send notification...\n Backend.getGlobule(contact.getDomain()).eventHub.publish(contact.getId() + \"@\" + contact.getDomain() + \"_notification_event\", notification.serializeBinary(), false)\n }).catch(err => {\n ApplicationView.displayMessage(err, 3000);\n console.log(err)\n })\n\n\n Backend.eventHub.publish(\"calling_\" + contact.getId() + \"@\" + contact.getDomain() + \"_evt\", call, true)\n })\n\n }, false)\n\n // so here I will play the audio of the contact util it respond or the delay was done...\n Backend.getGlobule(contact.getDomain()).eventHub.publish(\"calling_\" + contact.getId() + \"@\" + contact.getDomain() + \"_evt\", call.serializeBinary(), false)\n\n })\n \n }, err => displayError(err, 3000))\n\n }, err => displayError(err, 3000))\n\n if (contact.getDomain() != AccountController.account.getDomain()) {\n let globule = Backend.getGlobule(contact.getDomain())\n generatePeerToken(globule, token => {\n globule.resourceService.setCall(rqst, { domain: globule.domain, token: token })\n }, err => displayError(err, 3000))\n }\n })\n\n }\n\n}\n\ncustomElements.define('globular-contact-list', ContactList)\n","import getUuidByString from \"uuid-by-string\";\nimport { AccountController } from \"../../backend/account\";\nimport { Backend, displayMessage } from \"../../backend/backend\";\nimport { ContactCard } from \"./contactCard\";\n\n/**\n * Display the list of sent contact invitation. If the invitation was not pending it will be removed.\n */\nexport class SentContactInvitations extends HTMLElement {\n\n // Create the applicaiton view.\n constructor(account, onRevokeContact) {\n super()\n\n // Set the shadow dom.\n this.attachShadow({ mode: 'open' });\n\n this.account = account;\n this.onRevokeContact = onRevokeContact;\n\n Backend.getGlobule(AccountController.account.domain).eventHub.subscribe(\"sent_\" + account.getId() + \"@\" + account.getDomain() + \"_evt\",\n (uuid) => { },\n (evt) => {\n // So here I will append the account into the list.\n let invitation = JSON.parse(evt)\n AccountController.getAccount(invitation._id,\n (contact) => {\n this.appendContact(contact)\n },\n err => {\n displayMessage(err, 3000)\n })\n },\n false, this)\n\n this.shadowRoot.innerHTML = `\n \n\n
\n \n
\n\n `\n\n let globule = Backend.getGlobule(account.domain)\n\n // So here I will get the list of sent invitation for the account.\n AccountController.getContacts(this.account, `{\"status\":\"sent\"}`, (invitations) => {\n\n for (var i = 0; i < invitations.length; i++) {\n AccountController.getAccount(invitations[i]._id,\n (contact) => {\n this.appendContact(contact)\n },\n err => {\n ApplicationView.displayMessage(err, 3000)\n console.log(err)\n })\n }\n }, err => {\n ApplicationView.displayMessage(err, 3000)\n })\n\n\n globule.eventHub.subscribe(\"revoked_\" + account.getId() + \"@\" + account.getDomain() + \"_evt\",\n (uuid) => { },\n (evt) => {\n let invitation = JSON.parse(evt);\n AccountController.getAccount(invitation._id,\n (contact) => {\n this.removeContact(contact);\n },\n err => {\n ApplicationView.displayMessage(err, 3000)\n console.log(err)\n })\n },\n false, this)\n\n globule.eventHub.subscribe(\"declined_\" + account.getId() + \"@\" + account.getDomain() + \"_evt\",\n (uuid) => { },\n (evt) => {\n let invitation = JSON.parse(evt);\n AccountController.getAccount(invitation._id,\n (contact) => {\n this.removeContact(contact);\n },\n err => {\n ApplicationView.displayMessage(err, 3000)\n console.log(err)\n })\n },\n false, this)\n\n globule.eventHub.subscribe(\"accepted_\" + account.getId() + \"@\" + account.getDomain() + \"_evt\",\n (uuid) => { },\n (evt) => {\n let invitation = JSON.parse(evt);\n AccountController.getAccount(invitation._id,\n (contact) => {\n this.removeContact(contact);\n },\n err => {\n ApplicationView.displayMessage(err, 3000)\n console.log(err)\n })\n },\n false, this)\n }\n\n // The connection callback.\n connectedCallback() {\n\n\n }\n\n appendContact(contact) {\n\n let id = \"_\" + getUuidByString(contact.getId() + \"@\" + contact.getId() + \"_pending_invitation\")\n if (this.querySelector(\"#\" + id) != undefined) {\n return;\n }\n\n let card = new ContactCard(this.account, contact)\n\n card.id = id\n card.setRevokeButton(()=>{this.onRevokeContact(contact); card.remove()})\n this.appendChild(card)\n window.dispatchEvent(new Event('resize'));\n }\n\n removeContact(contact) {\n // simply remove it.\n let id = \"_\" + getUuidByString(contact.getId() + \"@\" + contact.getDomain() + \"_pending_invitation\")\n let card = this.querySelector(\"#\" + id)\n if (card != undefined) {\n this.removeChild(card)\n }\n window.dispatchEvent(new Event('resize'));\n }\n}\n\ncustomElements.define('globular-sent-contact-invitations', SentContactInvitations)\n","import getUuidByString from \"uuid-by-string\";\nimport { AccountController } from \"../../backend/account\";\nimport { Backend, displayError } from \"../../backend/backend\";\nimport { ContactCard } from \"./contactCard\";\n\n/**\n * Received contact invitations.\n */\nexport class ReceivedContactInvitations extends HTMLElement {\n\n // Create the applicaiton view.\n constructor(account, onAcceptContact, onDeclineContact) {\n super()\n // Set the shadow dom.\n this.attachShadow({ mode: 'open' });\n this.account = account;\n this.onAcceptContact = onAcceptContact;\n this.onDeclineContact = onDeclineContact;\n\n let domain = Backend.domain\n if (account.session) {\n domain = account.getDomain()\n }\n\n let globule = Backend.getGlobule(domain) // connect to the local event hub...\n\n globule.eventHub.subscribe(\"received_\" + account.getId() + \"@\" + account.getDomain() + \"_evt\",\n (uuid) => { },\n (evt) => {\n let invitation = JSON.parse(evt);\n AccountController.getAccount(invitation._id,\n (contact) => {\n this.appendContact(contact);\n },\n err => {\n displayError(err, 3000)\n console.log(err)\n })\n },\n false, this)\n\n globule.eventHub.subscribe(\"revoked_\" + account.getId() + \"@\" + account.getId() + \"_evt\",\n (uuid) => { },\n (evt) => {\n let invitation = JSON.parse(evt);\n Account.getAccount(invitation._id,\n (contact) => {\n this.removeContact(contact);\n },\n err => {\n displayError(err, 3000)\n console.log(err)\n })\n },\n false, this)\n\n globule.eventHub.subscribe(\"declined_\" + account.getId() + \"@\" + account.getDomain() + \"_evt\",\n (uuid) => { },\n (evt) => {\n let invitation = JSON.parse(evt);\n AccountController.getAccount(invitation._id,\n (contact) => {\n this.removeContact(contact);\n },\n err => {\n displayError(err, 3000)\n console.log(err)\n })\n },\n false, this)\n\n globule.eventHub.subscribe(\"accepted_\" + account.getId() + \"@\" + account.getDomain() + \"_evt\",\n (uuid) => { },\n (evt) => {\n let invitation = JSON.parse(evt);\n AccountController.getAccount(invitation._id,\n (contact) => {\n this.removeContact(contact);\n },\n err => {\n displayError(err, 3000)\n console.log(err)\n })\n },\n false, this)\n\n // Innitialisation of the layout.\n this.shadowRoot.innerHTML = `\n \n
\n \n
\n `\n // So here I will get the list of sent invitation for the account.\n AccountController.getContacts(this.account, `{\"status\":\"received\"}`, (invitations) => {\n\n for (var i = 0; i < invitations.length; i++) {\n AccountController.getAccount(invitations[i]._id,\n (contact) => {\n this.appendContact(contact);\n },\n err => {\n displayError(err, 3000)\n console.log(err)\n })\n }\n }, err => {\n displayError(err, 3000)\n })\n }\n\n // The connection callback.\n connectedCallback() {\n\n }\n\n appendContact(contact) {\n\n let id = \"_\" + getUuidByString(contact.getId() + \"@\" + contact.getDomain() + \"_pending_invitation\")\n if (this.querySelector(\"#\" + id) != undefined) {\n return;\n }\n let card = new ContactCard(this.account, contact)\n\n card.id = id\n card.setAcceptDeclineButton(this.onAcceptContact, this.onDeclineContact)\n this.appendChild(card)\n }\n\n removeContact(contact) {\n // simply remove it.\n let id = \"_\" + getUuidByString(contact.getId() + \"@\" + contact.getDomain() + \"_pending_invitation\")\n let card = this.querySelector(\"#\" + id)\n if (card != undefined) {\n this.removeChild(card)\n }\n }\n}\n\ncustomElements.define('globular-received-contact-invitations', ReceivedContactInvitations)\n","import { AccountController } from \"../../backend/account\";\nimport { displayError } from \"../../backend/backend\";\nimport { ContactCard } from \"./contactCard\";\n\nexport class SearchContact extends HTMLElement {\n constructor() {\n super();\n this.attachShadow({ mode: \"open\" });\n this.results = [];\n\n // Here is the class members.\n this.onInviteContact = null;\n\n // Revoke contact invitation\n this.onRevokeContact = null;\n\n // Accept contact invitation\n this.onAcceptContact = null;\n\n // Decline contact invitation\n this.onDeclineContact = null;\n\n // Delecte contact\n this.onDeleteContact = null;\n }\n\n connectedCallback() {\n this.render();\n // Close modal functionality\n this.shadowRoot.querySelector(\"#close-btn\").addEventListener(\"click\", () => {\n this.remove();\n });\n\n // Search functionality\n const searchInput = this.shadowRoot.querySelector(\"#search_input\");\n const resultsDiv = this.shadowRoot.querySelector(\"#results\");\n\n // I will handle the search input change event and test if the search input value is at least 3 characters long.\n searchInput.addEventListener(\"input\", this.handleSearch.bind(this));\n }\n\n async handleSearch(event) {\n const query = event.target.value.trim();\n if (query.length < 3) {\n this.results = [];\n this.renderResults();\n return;\n }\n\n // Simulating API call\n this.results = await this.fetchAccounts(query);\n console.log(this.results);\n\n this.renderResults();\n }\n\n async fetchAccounts(query) {\n return new Promise((resolve, reject) => {\n AccountController.getAccounts(`{\"email\":{\"$regex\": \"${query}\", \"$options\": \"im\"}}`, false, (accounts) => {\n // Filter out the current user\n const filteredAccounts = accounts.filter(obj => obj.getId() !== AccountController.account.getId());\n resolve(filteredAccounts); // Properly resolve the promise with filtered accounts\n }, (err) => {\n console.log(\"Error: \", err);\n displayError(err, 3000);\n reject(err); // Properly reject the promise on error\n });\n });\n }\n\n renderResults() {\n const resultsContainer = this.shadowRoot.querySelector(\"#results\");\n resultsContainer.innerHTML = \"\";\n this.results.forEach(contact => {\n const card = new ContactCard(AccountController.account, contact, true);\n AccountController.getContacts(AccountController.account, \"{}\",\n (contacts) => {\n const info = contacts.find(obj => {\n return obj._id === contact.getId() + \"@\" + contact.getDomain();\n })\n\n if (contact.getId() != AccountController.account.getId()) {\n if (info == undefined) {\n card.setInviteButton((contact) => {\n this.onInviteContact(contact);\n })\n } else if (info.status == \"sent\") {\n // Here I will display the revoke invitation button.\n card.setRevokeButton(()=>{this.onRevokeContact(contact); card.parentNode.removeChild(card);})\n } else if (info.status == \"received\") {\n // Here I will display the accept/decline button.\n card.setAcceptDeclineButton(this.onAcceptContact, this.onDeclineContact)\n } else if (info.status == \"revoked\" || info.status == \"deleted\") {\n // Here I will display the accept/decline button.\n card.setInviteButton((contact) => {\n this.onInviteContact(contact);\n })\n } else if (info.status == \"accepted\") {\n // Here I will display the revoke invitation button.\n card.setDeleteButton(this.onDeleteContact)\n }\n }\n },\n () => {\n card.setInviteButton((contact) => {\n this.onInviteContact(contact);\n this.inviteContactInput.clear();\n })\n })\n \n resultsContainer.appendChild(card);\n });\n }\n\n render() {\n this.shadowRoot.innerHTML = `\n \n \n
\n
\n \n \n \n
\n
No search results
\n
\n `;\n\n }\n}\n\ncustomElements.define(\"globular-search-contact\", SearchContact);","import { AccountController } from \"../../backend/account\";\nimport { Backend, displayMessage } from \"../../backend/backend\";\nimport { ContactList } from \"./contactList\";\nimport { SentContactInvitations } from \"./sentContactInvitations\";\nimport { ReceivedContactInvitations } from \"./receivedContactInvitations\";\n\nimport \"@polymer/iron-icons/iron-icons.js\";\n\n// the social icons\nimport \"@polymer/iron-icons/social-icons.js\";\nimport \"@polymer/paper-button/paper-button.js\";\nimport \"@polymer/paper-icon-button/paper-icon-button.js\";\n\nimport { SearchContact } from \"./searchContact\";\n\n\n/**\n * The list of contacts.\n */\nexport class Contacts extends HTMLElement {\n // attributes.\n\n // Create the contact view.\n constructor() {\n super()\n\n this.style.display = \"none\";\n\n // Set the shadow dom.\n this.attachShadow({ mode: 'open' });\n\n this.shadowRoot.innerHTML = `\n\n\n
\n
\n
\n
Contacts
\n \n
\n
\n\n
\n \n Contacts\n \n
\n \n \n \n\n\n
\n \n Sent Invitations\n \n
\n \n \n \n\n\n
\n \n Received Invitations\n \n
\n \n \n \n\n
\n
\n
\n `\n\n // The logged account.\n this.account = null;\n\n this.inviteContactInput = null;\n\n let collapseBtn = this.shadowRoot.querySelectorAll(\"div[for]\")\n collapseBtn.forEach((btn) => {\n btn.onclick = () => {\n let collapse = this.shadowRoot.getElementById(btn.getAttribute(\"for\"))\n let icon = this.shadowRoot.getElementById(btn.getAttribute(\"for\").replaceAll(\"-collapse\", \"-icon\"))\n if (collapse.opened) {\n icon.setAttribute(\"icon\", \"icons:expand-more\")\n } else {\n icon.setAttribute(\"icon\", \"icons:expand-less\")\n }\n collapse.toggle();\n }\n })\n\n\n // subscribe to the backend ready event.\n document.addEventListener(\"backend-ready\", (globule) => {\n if (AccountController.__account__ != null) {\n this.style.display = \"block\";\n this.setAccount(AccountController.__account__)\n }\n\n // Subscribe to the login success event.\n Backend.eventHub.subscribe(\"login_success_\", uuid => { }, (account) => {\n this.style.display = \"block\";\n this.setAccount(account)\n }, true);\n });\n }\n\n\n\n // Init the contact at login time.\n setAccount(account) {\n if(this.account != null){\n return;\n }\n\n this.account = account;\n\n // Action's\n let addContactBtn = this.shadowRoot.getElementById(\"add-contact-btn\")\n addContactBtn.onclick = () => {\n let searchContact = document.querySelector(\"globular-search-contact\")\n if (searchContact != null) {\n return; /** Nothing here. */\n }\n\n searchContact = new SearchContact()\n\n // Set the event handlers.\n searchContact.onInviteContact = this.onInviteContact\n searchContact.onRevokeContact = this.onRevokeContact\n searchContact.onAcceptContact = this.onAcceptContact\n searchContact.onDeclineContact = this.onDeclineContact\n\n document.body.appendChild(searchContact)\n }\n\n let contacts = this.shadowRoot.getElementById(\"contacts-collapse\")\n contacts.appendChild(new ContactList(account, this.onDeleteContact))\n\n let sentInvitations = this.shadowRoot.getElementById(\"sent-invitations-collapse\")\n sentInvitations.appendChild(new SentContactInvitations(account, this.onRevokeContact))\n\n let receivedInvitations = this.shadowRoot.getElementById(\"received-invitations-collapse\")\n receivedInvitations.appendChild(new ReceivedContactInvitations(account, this.onAcceptContact, this.onDeclineContact))\n\n }\n\n findAccountByEmail(email) {\n\n AccountController.getAccounts(`{\"email\":{\"$regex\": \"${email}\", \"$options\": \"im\"}}`, false, (accounts) => {\n accounts = accounts.filter((obj) => {\n return obj.getId() !== AccountController.account.getId();\n });\n\n // set the getValues function that will return the list to be use as filter.\n if (this.inviteContactInput != undefined) {\n this.inviteContactInput.setValues(accounts)\n }\n\n }, (err) => {\n //callback([])\n displayMessage(err, 3000)\n })\n }\n\n // Function to create a styled message\n createMessage = (contact, actionText) => {\n return `\n
\n `;\n };\n\n // On invite contact action\n onInviteContact = (contact) => {\n displayMessage(this.createMessage(contact, \"Invitation was sent.\"), 3000);\n Backend.eventHub.publish(\"invite_contact_event_\", contact, true);\n };\n\n // On revoke contact invitation action\n onRevokeContact = (contact) => {\n displayMessage(this.createMessage(contact, \"Invitation was revoked!\"), 3000);\n Backend.eventHub.publish(\"revoke_contact_invitation_event_\", contact, true);\n };\n\n // On accept contact invitation action\n onAcceptContact = (contact) => {\n displayMessage(this.createMessage(contact, \"Invitation was accepted!\"), 3000);\n Backend.eventHub.publish(\"accept_contact_invitation_event_\", contact, true);\n };\n\n // Decline contact invitation\n onDeclineContact = (contact) => {\n displayMessage( this.createMessage(contact, \"Invitation was declined!\"),\n 3000\n );\n\n Backend.eventHub.publish(\"decline_contact_invitation_event_\", contact, true);\n }\n\n // Delete contact.\n onDeleteContact = (contact) => {\n\n // Here I will ask the user for confirmation before actually delete the contact informations.\n let toast = displayMessage(\n `\n \n
\n
Your about to delete the contact
\n \n
Is it what you want to do?
\n
\n Yes\n No\n
\n
\n `,\n 15000 // 15 sec...\n );\n\n let yesBtn = document.querySelector(\"#yes-delete-contact\")\n let noBtn = document.querySelector(\"#no-delete-contact\")\n\n // On yes\n yesBtn.onclick = () => {\n toast.hideToast();\n\n displayMessage(\n \"
Contact \" +\n contact.getEmail() +\n \" was remove from your contacts!
\",\n 3000\n );\n\n Backend.eventHub.publish(\"delete_contact_event_\", contact, true);\n\n }\n\n noBtn.onclick = () => {\n toast.hideToast();\n }\n }\n\n\n}\n\ncustomElements.define('globular-contacts-menu', Contacts)","\"use strict\";\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.TitleController = void 0;\nconst title_pb_1 = require(\"globular-web-client/title/title_pb\");\nconst backend_1 = require(\"./backend\");\nconst jwt_decode_1 = __importDefault(require(\"jwt-decode\"));\nconst persistence_pb_1 = require(\"globular-web-client/persistence/persistence_pb\");\n// this is a hack to store the videos and audios in memory\nlet __videos__ = {};\nlet __audios__ = {};\nlet __titles__ = {};\nclass TitleController {\n static setVideo(video) {\n __videos__[video.getId()] = video;\n }\n static setTitle(title) {\n __titles__[title.getId()] = title;\n }\n static setAudio(audio) {\n __audios__[audio.getId()] = audio;\n }\n // That function will be use to asscociate file with imdb information.\n static getImdbInfo(id, callback, errorcallback, globule = backend_1.Backend.globular) {\n if (__titles__[id]) {\n if (__titles__[id].ID) {\n callback(__titles__[id]);\n }\n else {\n __titles__[id].callbacks.push(callback);\n }\n return;\n }\n __titles__[id] = {};\n __titles__[id].callbacks = [];\n __titles__[id].callbacks.push(callback);\n let url = (0, backend_1.getUrl)(globule);\n url += \"/imdb_title?id=\" + id;\n url += \"&domain=\" + globule.domain;\n var xmlhttp = new XMLHttpRequest();\n xmlhttp.timeout = 10 * 1000;\n xmlhttp.onreadystatechange = function () {\n if (this.readyState == 4 && (this.status == 201 || this.status == 200)) {\n var obj = JSON.parse(this.responseText);\n while (__titles__[obj.ID].callbacks.length > 0) {\n let callback = __titles__[obj.ID].callbacks.pop();\n callback(obj);\n }\n __titles__[obj.ID] = obj;\n // Now I will \n }\n else if (this.readyState == 4) {\n errorcallback(\"fail to get info from query \" + url + \" status \" + this.status);\n }\n };\n xmlhttp.open(\"GET\", url, true);\n xmlhttp.setRequestHeader(\"domain\", globule.domain);\n xmlhttp.send();\n }\n // get files associated with the titles, audios or videos...\n static getTitleFiles(id, indexPath, globule, callback, errorCallback) {\n let rqst = new title_pb_1.GetTitleFilesRequest;\n rqst.setTitleid(id);\n rqst.setIndexpath(indexPath);\n if (globule.titleService == null)\n return errorCallback(\"Title service is not available\");\n // get the files associated with the title\n globule.titleService.getTitleFiles(rqst)\n .then(rsp => {\n callback(rsp.getFilepathsList());\n }).catch(err => {\n callback([]);\n });\n }\n /**\n * Retrieve the video information from the backend\n * @param globule The globule instance\n * @param id The video id\n * @param callback The success callback\n * @param errorCallback The error callback\n * @returns\n */\n static getVideoInfo(id, callback, errorCallback, globule) {\n // check if the video is already in memory\n if (__videos__[id]) {\n callback(__videos__[id]);\n return;\n }\n if (globule == null)\n return callback(undefined);\n // get the video information from the backend\n if (globule.titleService == null)\n return errorCallback(\"Title service is not available\");\n let rqst = new title_pb_1.GetVideoByIdRequest;\n rqst.setIndexpath(globule.config.DataPath + \"/search/videos\");\n rqst.setVideoid(id);\n globule.titleService.getVideoById(rqst)\n .then(rsp => {\n let video = rsp.getVideo();\n if (video == null)\n return callback(undefined);\n callback(video);\n __videos__[id] = video;\n video.globule = globule;\n })\n .catch(err => {\n errorCallback(err);\n });\n }\n /**\n * Retrieve the audio information from the backend\n * @param globule The globule instance\n * @param id The audio id\n * @param callback The success callback\n * @param errorCallback The error callback\n * @returns\n */\n static getAudioInfo(id, callback, errorCallback, globule = backend_1.Backend.globular) {\n if (__audios__[id]) {\n callback(__audios__[id]);\n return;\n }\n if (globule == null)\n return callback(undefined);\n if (globule.titleService == null)\n return errorCallback(\"Title service is not available\");\n let rqst = new title_pb_1.GetAudioByIdRequest;\n rqst.setIndexpath(globule.config.DataPath + \"/search/audios\");\n rqst.setAudioid(id);\n globule.titleService.getAudioById(rqst)\n .then(rsp => {\n let audio = rsp.getAudio();\n if (audio == null)\n return callback(undefined);\n __audios__[id] = audio;\n audio.globule = globule;\n callback(audio);\n })\n .catch(err => {\n console.log(err);\n callback();\n });\n }\n static getFileTitlesInfo(file, callback, errorCallback, globule = backend_1.Backend.globular) {\n if (__titles__[file.getPath()]) {\n callback(__titles__[file.getPath()]);\n return;\n }\n let rqst = new title_pb_1.GetFileTitlesRequest;\n rqst.setIndexpath(globule.config.DataPath + \"/search/titles\");\n rqst.setFilepath(file.getPath());\n if (globule.titleService == null)\n return errorCallback(\"Title service is not available\");\n globule.titleService.getFileTitles(rqst, { domain: globule.domain })\n .then(rsp => {\n if (rsp.getTitles() == null)\n return callback();\n let titles = rsp.getTitles();\n if (titles === null || titles === void 0 ? void 0 : titles.getTitlesList) {\n if (titles.getTitlesList().length == 0)\n return errorCallback(\"No title found\");\n for (let t of titles.getTitlesList()) {\n TitleController.setTitle(t);\n t.globule = globule;\n t.file = file;\n }\n file.titles = titles.getTitlesList();\n callback(titles.getTitlesList());\n }\n else {\n errorCallback(\"No title found\");\n }\n })\n .catch(err => {\n // so here no title was found...\n errorCallback(err);\n });\n }\n static getFileVideosInfo(file, callback, errorCallback, globule = backend_1.Backend.globular) {\n let rqst = new title_pb_1.GetFileVideosRequest;\n rqst.setIndexpath(globule.config.DataPath + \"/search/videos\");\n rqst.setFilepath(file.getPath());\n if (globule.titleService == null)\n return errorCallback(\"Title service is not available\");\n globule.titleService.getFileVideos(rqst, { domain: globule.domain })\n .then(rsp => {\n if (rsp.getVideos() == null)\n return errorCallback(\"No video found\");\n let videos = rsp.getVideos();\n if (videos === null || videos === void 0 ? void 0 : videos.getVideosList) {\n if (videos.getVideosList().length == 0)\n return errorCallback(\"No video found\");\n videos.getVideosList();\n for (let v of videos.getVideosList()) {\n TitleController.setVideo(v);\n v.globule = globule;\n v.file = file;\n }\n file.videos = videos.getVideosList();\n callback(videos.getVideosList());\n }\n else {\n errorCallback(\"No video found\");\n }\n })\n .catch(err => {\n errorCallback(err);\n });\n }\n static getFileAudiosInfo(file, callback, errorCallback, globule = backend_1.Backend.globular) {\n let rqst = new title_pb_1.GetFileAudiosRequest;\n rqst.setIndexpath(globule.config.DataPath + \"/search/audios\");\n rqst.setFilepath(file.getPath());\n if (globule.titleService == null)\n return errorCallback(\"Title service is not available\");\n globule.titleService.getFileAudios(rqst, { domain: globule.domain })\n .then(rsp => {\n if (rsp.getAudios() == null)\n return errorCallback(\"No audio found\");\n let audios = rsp.getAudios();\n if (audios === null || audios === void 0 ? void 0 : audios.getAudiosList) {\n if (audios.getAudiosList().length == 0)\n return errorCallback(\"No audio found\");\n for (let a of audios.getAudiosList()) {\n TitleController.setAudio(a);\n a.globule = globule;\n a.file = file;\n }\n callback(audios.getAudiosList());\n }\n else {\n errorCallback(\"No audio found\");\n }\n callback(audios);\n })\n .catch(err => {\n callback([]);\n });\n }\n static getTitleInfo(id, callback, errorCallback, globule = backend_1.Backend.globular) {\n if (__titles__[id]) {\n callback(__titles__[id]);\n return;\n }\n // Read the json file and get the title infos...\n let rqst = new title_pb_1.GetTitleByIdRequest;\n rqst.setTitleid(id);\n rqst.setIndexpath(globule.config.DataPath + \"/search/titles\");\n if (globule.titleService == null)\n return errorCallback(\"Title service is not available\");\n globule.titleService.getTitleById(rqst).then(rsp => {\n let title = rsp.getTitle();\n if (title == null)\n return callback(undefined);\n __titles__[id] = title;\n title.globule = globule;\n callback(title);\n }).catch(err => {\n errorCallback(err);\n });\n }\n static getWacthingTitle(titleId, callback, errorCallback) {\n (0, backend_1.generatePeerToken)(backend_1.Backend.globular, (token) => {\n let decoded = (0, jwt_decode_1.default)(token);\n let userName = decoded.username;\n let userDomain = decoded.user_domain;\n const collection = \"watching\";\n // save the user_data\n let rqst = new persistence_pb_1.FindOneRqst();\n let id = userName.split(\"@\").join(\"_\").split(\".\").join(\"_\");\n let db = id + \"_db\";\n // set the connection infos,\n rqst.setId(id);\n rqst.setDatabase(db);\n rqst.setCollection(collection);\n rqst.setQuery(`{\"_id\":\"${titleId}\"}`);\n // So here I will set the address from the address found in the token and not \n // the address of the client itself.\n let globule = backend_1.Backend.getGlobule(userDomain);\n if (globule == null)\n return errorCallback(\"Globule is not available\");\n if (globule.persistenceService == null)\n return errorCallback(\"Persistence service is not available\");\n // call persist data\n globule.persistenceService\n .findOne(rqst, {\n token: token,\n domain: backend_1.Backend.domain,\n })\n .then(rsp => {\n let result = rsp.getResult();\n // Here I will return the value with it\n if (result == null)\n return errorCallback(\"No title found\");\n callback(result.toJavaScript());\n })\n .catch(err => {\n errorCallback(err);\n });\n }, errorCallback);\n }\n}\nexports.TitleController = TitleController;\n","import { Backend } from \"../../backend/backend\";\nimport { FileController } from \"../../backend/file\";\n\n\nexport class VideoPreview extends HTMLElement {\n // attributes.\n\n // Create the applicaiton view.\n constructor(file, height, onresize, globule) {\n super()\n\n this.file = file\n this.path = file.getPath();\n this.height = height;\n this.onresize = onresize;\n this.onpreview = null;\n this.onplay = null;\n this.title = file.getPath();\n\n // Set the shadow dom.\n this.attachShadow({ mode: 'open' });\n\n this.shadowRoot.innerHTML = `\n \n
\n \n \n
\n `\n\n this.images = []\n\n // give the focus to the input.\n this.container = this.shadowRoot.querySelector(\"#container\")\n\n let index = 0;\n if (this.file.getThumbnail().length > 0) {\n this.firstImage = document.createElement(\"img\")\n this.firstImage.src = this.file.getThumbnail()\n this.firstImage.onload = () => {\n let ratio = this.height / this.firstImage.offsetHeight\n this.width = this.firstImage.offsetWidth * ratio;\n if (this.onresize != undefined) {\n this.onresize()\n }\n this.container.appendChild(this.firstImage)\n this.images.push(this.firstImage)\n }\n } else {\n console.log(\"no thumbnail image was found for \", this.file)\n }\n\n // Play the video\n this.container.onclick = (evt) => {\n evt.stopPropagation()\n this.play(globule)\n }\n\n // the next image timeout...\n this.timeout = null;\n\n // Connect events\n this.container.onmouseenter = (evt) => {\n evt.stopPropagation();\n\n if (this.images.length == 1) {\n FileController.getHiddenFiles(file.getPath(), previewDir => {\n let previews = []\n if (previewDir) {\n if (previewDir.getFilesList().length > 0) {\n previews = previewDir.getFilesList()\n }\n }\n\n FileController.getImage((images) => {\n this.images = images\n if (this.images.length > 0) {\n this.container.appendChild(this.images[0])\n\n if (this.interval == null) {\n this.startPreview();\n }\n\n if (this.onresize != undefined) {\n this.onresize()\n }\n }\n }, this.images, previews, index, globule) // Download the first image only...\n\n }, globule)\n } else if (this.images.length > 1) {\n if (this.interval == null) {\n this.startPreview();\n }\n }\n\n }\n\n this.container.onmouseout = (evt) => {\n evt.stopPropagation();\n if (this.interval != null) {\n this.stopPreview();\n }\n }\n\n }\n\n\n /**\n * Start display the image \n */\n startPreview() {\n\n let iconViews = document.querySelectorAll(\"globular-file-icon-view\")\n for (var i = 0; i < iconViews.length; i++) {\n iconViews[i].stopPreview()\n }\n\n let index = 0;\n if (this.onpreview != null) {\n this.onpreview()\n }\n\n this.interval = setInterval(() => {\n\n let img = this.images[index]\n if (img != undefined) {\n img.draggable = false;\n while (this.container.children.length > 2) {\n this.container.removeChild(this.container.children[this.container.children.length - 1])\n }\n\n this.container.appendChild(img, this.container.firstChild)\n }\n // reset the conter if index reach the number of preview images.\n if (index < this.images.length) {\n index++\n } else {\n index = 0\n }\n }, 450)\n }\n\n connectedCallback() {\n\n //or however you get a handle to the IMG\n\n }\n\n /**\n * Stop the image preview...\n */\n stopPreview() {\n if (this.images.length == 0) {\n return\n }\n\n clearInterval(this.interval)\n this.interval = null\n\n while (this.container.children.length > 2) {\n this.container.removeChild(this.container.children[this.container.children.length - 1])\n }\n\n this.container.appendChild(this.firstImage)\n }\n\n /**\n * Play video\n */\n play(globule) {\n\n this.stopPreview()\n\n if (this._file_explorer_ != undefined) {\n Backend.eventHub.publish(\"__play_video__\", { file: this.file, file_explorer_id: this._file_explorer_.id, globule: globule }, true)\n }\n\n if (this.onplay != undefined) {\n this.onplay(this.file)\n }\n }\n\n}\n\ncustomElements.define('globular-video-preview', VideoPreview)\n","import { Backend, displayError, generatePeerToken } from \"../../backend/backend\";\nimport { BlogPostElement } from \"./blogPost\";\nimport { BlogPostInfo } from \"../informationManager/blogPostInfo\";\nimport { AccountController } from \"../../backend/account\";\nimport { readBlogPost } from \"./blogPost\";\nimport { BlogPost, GetBlogPostsByAuthorsRequest, GetBlogPostsRequest } from \"globular-web-client/blog/blog_pb\";\n\n/**\n * Display globular blog list.\n */\nexport class BlogPosts extends HTMLElement {\n // attributes.\n\n // Create the applicaiton view.\n constructor(userName) {\n super()\n // Set the shadow dom.\n this.attachShadow({ mode: 'open' });\n\n if (userName == undefined) {\n if (AccountController.account != undefined) {\n userName = AccountController.account.getId() + \"@\" + AccountController.account.getDomain()\n } else if (localStorage.getItem(\"account\")) { // get the account from the local storage... \n userName = localStorage.getItem(\"user_name\") + \"@\" + localStorage.getItem(\"user_domain\")\n }\n\n }\n\n // Innitialisation of the layout.\n this.shadowRoot.innerHTML = `\n \n \n Blog(s)\n \n
\n
\n
\n
\n
\n new post\n \n
\n
\n
\n
\n
Draft(s)
\n
\n \n
\n
\n
\n
Published(s)
\n
\n \n
\n
\n
\n
Archived(s)
\n
\n \n
\n
\n
\n
\n \n \n \n \n \n \n `\n\n this.listeners = {}\n\n this.container = this.shadowRoot.querySelector(\"#container\")\n\n // the list of blogs.\n this.blogsList = this.shadowRoot.querySelector(\"#blog-lst-div\")\n\n // Display the blog post editor...\n this.shadowRoot.querySelector(\"#new-blog-post-btn\").onclick = () => {\n // Test the blog-post\n let editor = new BlogPostElement()\n editor.setAttribute(\"editable\", \"true\")\n editor.slot = \"blog\"\n\n if(this.querySelector(\"globular-blog-post\") != undefined){\n this.removeChild(this.querySelector(\"globular-blog-post\"))\n }\n\n this.blogsList.style.display = \"none\"\n this.appendChild(editor)\n\n editor.onclose = () => {\n editor.removeAttribute(\"editable\")\n if(editor.parentNode != undefined){\n editor.parentNode.removeChild(editor)\n }\n this.blogsList.style.display = \"\"\n }\n }\n\n // If the blog editor is set to true...\n let authors = []\n AccountController.getAccount(userName,\n account => {\n // Subcribe to my own blog create event...\n Backend.getGlobule(account.getDomain()).eventHub.subscribe(account.getId() + \"@\" + account.getDomain() + \"_publish_blog_event\", uuid => this[account.getId() + \"@\" + account.getDomain() + \"_publish_blog_listener\"] = uuid,\n evt => {\n // Get the date from the event and create the newly\n this.setBlog(BlogPost.deserializeBinary(Uint8Array.from(evt.split(\",\"))), true)\n }, false, this)\n\n authors.push(account.getId() + \"@\" + account.getDomain())\n\n this.getBlogs(authors, blogs => {\n this.setBlogPosts(blogs)\n })\n })\n }\n\n // Retreive all blog from all connected peers...\n getBlogs(authors, callback) {\n let connections = Array.from(Backend.getGlobules())\n let blogs_ = []\n\n let _getBlogs_ = () => {\n let globule = connections.pop()\n if (connections.length == 0) {\n this._getBlogs(globule, authors, (blogs) => {\n blogs_ = blogs_.concat(blogs)\n blogs_ = blogs_.filter((b0, index, self) =>\n index === self.findIndex((b1) => (\n b0.getUuid() === b1.getUuid()\n ))\n )\n\n if (this.onloaded != undefined)\n this.onloaded()\n\n callback(blogs_)\n })\n } else {\n this._getBlogs(globule, authors, (blogs) => {\n blogs_ = blogs_.concat(blogs)\n blogs_ = blogs_.filter((b0, index, self) =>\n index === self.findIndex((b1) => (\n b0.getUuid() === b1.getUuid()\n ))\n )\n _getBlogs_() // get the account from the next globule.\n })\n }\n }\n\n // get account from all register peers.\n _getBlogs_()\n }\n\n // Get the list of blogs.\n _getBlogs(globule, authors, callback) {\n\n generatePeerToken(globule, token => {\n let rqst = new GetBlogPostsByAuthorsRequest\n rqst.setAuthorsList(authors)\n rqst.setMax(100)\n\n let stream = globule.blogService.getBlogPostsByAuthors(rqst, { domain: globule.domain, token: token });\n let blogs = []\n\n stream.on(\"data\", (rsp) => {\n blogs.push(rsp.getBlogPost())\n });\n\n stream.on(\"status\", (status) => {\n if (status.code == 0) {\n callback(blogs)\n } else {\n callback([])\n }\n })\n }, err => displayError(err, 3000))\n\n }\n\n _displayBlog(b) {\n\n this.blogsList.style.display = \"none\"\n \n\n let editor = new BlogPostElement(b)\n if (this.querySelector(\"globular-blog-post\") != undefined) {\n editor = this.querySelector(\"globular-blog-post\")\n this.removeChild(editor)\n }\n \n editor.slot = \"blog\"\n this.appendChild(editor)\n\n editor.onclose = () => {\n editor.removeAttribute(\"editable\")\n if(editor.parentNode != undefined){\n editor.parentNode.removeChild(editor)\n }\n this.blogsList.style.display = \"\"\n }\n }\n\n displayBlog(b) {\n console.log(\"Display blog\", b)\n\n if (b.getText().length > 0) {\n this._displayBlog(b)\n } else {\n let rqst = new GetBlogPostsRequest\n let id = b.blogPost.getUuid()\n rqst.setUuidsList([id])\n\n let token = localStorage.getItem(\"user_token\")\n let globule = b.globule\n let stream = globule.blogService.getBlogPosts(rqst, { application: Application.application, domain: globule.domain, token: token })\n\n stream.on(\"data\", (rsp) => {\n b = rsp.getBlogPost()\n });\n\n stream.on(\"status\", (status) => {\n if (status.code == 0) {\n Backend.eventHub.publish(\"_hide_search_results_\", null, true)\n this._displayBlog(b)\n } else {\n displayError(status.details, 3000)\n }\n })\n }\n }\n\n\n setBlog(b) {\n let blogInfo = this.querySelector(\"#_\" + b.getUuid() + \"_info\")\n if (blogInfo == undefined) {\n blogInfo = new BlogPostInfo(b, true)\n blogInfo.id = \"_\" + b.getUuid() + \"_info\"\n console.log(\"300 Blog info\", blogInfo.id)\n blogInfo.onclick = () => {\n this.displayBlog(b)\n }\n\n this.appendChild(blogInfo)\n }else{\n console.log(\"Blog already exist\")\n blogInfo.setBlog(b)\n }\n\n if (b.getStatus() == 0) {\n blogInfo.slot = \"draft\"\n } else if (b.getStatus() == 1) {\n blogInfo.slot = \"published\"\n } else if (b.getStatus() == 2) {\n blogInfo.slot = \"archived\"\n }\n\n // Display the total number of blog...\n this.shadowRoot.querySelector(\"#blog-title\").innerHTML = `Blog(${this.querySelectorAll(`globular-blog-post-info`).length})`\n\n // Set the section titles.\n this.shadowRoot.querySelector(\"#draft-title\").innerHTML = `Draft(${this.querySelectorAll(`[slot=\"draft\"]`).length})`\n this.shadowRoot.querySelector(\"#published-title\").innerHTML = `Published(${this.querySelectorAll(`[slot=\"published\"]`).length})`\n this.shadowRoot.querySelector(\"#archived-title\").innerHTML = `Archived(${this.querySelectorAll(`[slot=\"archived\"]`).length})`\n\n // listen for change...\n if (this.listeners[b.getUuid() + \"_blog_updated_event_listener\"] == undefined) {\n\n Backend.getGlobule(b.getDomain()).eventHub.subscribe(b.getUuid() + \"_blog_updated_event\", uuid => {\n this.listeners[b.getUuid() + \"_blog_updated_event_listener\"] = uuid\n }, evt => {\n // so here I will refresh the blog...\n readBlogPost(b.getDomain(), b.getUuid(), b => {\n this.setBlog(b)\n }, err => displayError(err, 3000))\n }, false, this)\n }\n\n Backend.eventHub.subscribe(\"_blog_delete_event_\", uuid => { },\n evt => {\n // The number of blog has change...\n let blogInfo = this.querySelector(\"#_\" + evt + \"_info\")\n if (blogInfo) {\n if (blogInfo.parentNode != undefined) {\n blogInfo.parentNode.removeChild(blogInfo)\n }\n }\n\n this.shadowRoot.querySelector(\"#blog-title\").innerHTML = `Blog(${this.querySelectorAll(`globular-blog-post-info`).length})`\n\n this.shadowRoot.querySelector(\"#draft-title\").innerHTML = `Draft(${this.querySelectorAll(`[slot=\"draft\"]`).length})`\n this.shadowRoot.querySelector(\"#published-title\").innerHTML = `Published(${this.querySelectorAll(`[slot=\"published\"]`).length})`\n this.shadowRoot.querySelector(\"#archived-title\").innerHTML = `Archived(${this.querySelectorAll(`[slot=\"archived\"]`).length})`\n\n }, true)\n\n\n }\n\n // The list of blogs\n setBlogPosts(blogs) {\n blogs.sort((a, b) => { return b.getCreationtime() - a.getCreationtime() })\n blogs.forEach(b => {\n // This contain the \n this.setBlog(b)\n })\n }\n\n}\n\ncustomElements.define('globular-blog-posts', BlogPosts)\n","\"use strict\";\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.GroupController = void 0;\nconst resource_pb_1 = require(\"globular-web-client/resource/resource_pb\");\nconst backend_1 = require(\"./backend\");\nconst api_1 = require(\"globular-web-client/api\");\nconst account_1 = require(\"./account\");\nclass GroupController {\n // Return the list of all groups.\n static getGroups(callback, errorCallback, globule = backend_1.Backend.globular) {\n (0, api_1.getAllGroups)(globule, groups => {\n callback(groups);\n }, errorCallback);\n }\n // Retreive a given group.\n static getGroup(id, successCallback, errorCallback) {\n if (GroupController.groups == undefined) {\n GroupController.groups = {};\n }\n if (GroupController.groups[id] != null) {\n successCallback(GroupController.groups[id]);\n }\n else {\n let globule = backend_1.Backend.globular;\n if (id.indexOf(\"@\") > 0) {\n globule = backend_1.Backend.getGlobule(id.split(\"@\")[1]);\n id = id.split(\"@\")[0];\n }\n if (globule == null) {\n errorCallback(\"Globule not found\");\n return;\n }\n if (id == \"\") {\n errorCallback(\"Group id is empty\");\n return;\n }\n if (globule.resourceService == null) {\n errorCallback(\"Resource service not found\");\n return;\n }\n let rqst = new resource_pb_1.GetGroupsRqst;\n rqst.setQuery(`{\"_id\":\"${id}\"}`);\n let stream = globule.resourceService.getGroups(rqst, { domain: globule.domain });\n let groups_ = new Array();\n stream.on(\"data\", (rsp) => {\n groups_ = groups_.concat(rsp.getGroupsList());\n });\n stream.on(\"status\", (status) => {\n if (status.code == 0) {\n // keep in the local map.\n GroupController.groups[id] = groups_[0];\n // Here I will connect local event to react with interface element...\n successCallback(groups_[0]);\n }\n else {\n errorCallback(status.details);\n }\n });\n }\n }\n static getMembers(id, successCallback, errorCallback) {\n GroupController.getGroup(id, group => {\n let membersList = group.getMembersList();\n let members = new Array();\n membersList.forEach(member => {\n account_1.AccountController.getAccount(member, account => {\n members.push(account);\n if (members.length == membersList.length) {\n successCallback(members);\n }\n }, errorCallback);\n });\n }, errorCallback);\n }\n}\nexports.GroupController = GroupController;\n","// Polymer dependencies\nimport '@polymer/paper-icon-button/paper-icon-button.js';\nimport '@polymer/iron-icons/iron-icons.js';\nimport '@polymer/paper-ripple/paper-ripple.js';\nimport '@polymer/paper-card/paper-card.js';\nimport '@polymer/iron-icon/iron-icon.js';\nimport '@polymer/iron-icons/social-icons'\nimport '@polymer/iron-icons/communication-icons'\nimport '@polymer/iron-icons/editor-icons'\n\n/**\n * Dropdown menu item, it be used inside a dropdown menu.\n */\nexport class DropdownMenuItem extends HTMLElement {\n // attributes.\n\n // Create the applicaiton view.\n constructor(icon, text, shortcut) {\n super()\n\n this.action = null;\n\n // Set the shadow dom.\n this.attachShadow({ mode: 'open' });\n\n if (icon) {\n this.icon = icon\n this.setAttribute(\"icon\", icon)\n }\n\n if (text) {\n this.text = text\n this.setAttribute(\"text\", text)\n }\n\n if (shortcut) {\n this.shortcut = shortcut\n this.setAttribute(\"shortcut\", shortcut)\n }\n\n // Innitialisation of the layout.\n this.shadowRoot.innerHTML = `\n \n \n
\n \n
\n \n \n \n ${this.text}\n \n \n
\n
\n \n `\n // give the focus to the input.\n let container = this.shadowRoot.querySelector(\"#container\")\n container.onclick = (evt) => {\n\n // if action was defined, call it.\n if (this.action != undefined) {\n this.action()\n }\n\n // otherwise, dispatch an event.\n const onActionEvent = new CustomEvent('on-action', {\n bubbles: true, // Whether the event should bubble up through the DOM\n cancelable: true, // Whether the event is cancelable\n detail: {\n // You can provide additional data in the 'detail' property\n }\n });\n\n this.dispatchEvent(onActionEvent);\n\n // close it parent.\n if (this.parentNode != undefined) {\n if (this.parentNode.close != undefined) {\n this.parentNode.close();\n }\n }\n }\n\n // Add an event listener to the document to handle clicks outside the menu item\n document.addEventListener('click', (event) => {\n const menuItem = this.shadowRoot.querySelector('#container div');\n\n // Check if the clicked element is outside the menu item\n if (!menuItem.contains(event.target)) {\n this.parentNode.close(); // Close the parent menu if applicable\n }\n });\n }\n\n connectedCallback() {\n\n if (this.hasAttribute(\"separator\")) {\n this.shadowRoot.querySelector(\".separator\").style.display = \"block\"\n }\n\n if (this.hasAttribute(\"icon\")) {\n this.icon = this.getAttribute(\"icon\")\n } else if (!this.icon) {\n this.icon = \"\"\n }\n\n if (this.hasAttribute(\"text\")) {\n this.text = this.getAttribute(\"text\")\n } else if (!this.text) {\n this.text = \"\"\n }\n\n if (this.hasAttribute(\"shortcut\")) {\n this.shortcut = this.getAttribute(\"shortcut\")\n } else if (!this.shortcut) {\n this.shortcut = \"\"\n }\n\n this.shadowRoot.querySelector(\"#text-span\").innerHTML = this.text\n this.shadowRoot.querySelector(\"#icon\").icon = this.icon\n this.shadowRoot.querySelector(\"#shortcut\").innerHTML = this.shortcut\n\n // Set the icon, if it is a font awesome icon.\n if (this.icon.startsWith(\"fa\")) {\n this.shadowRoot.querySelector(\"#icon-i\").style.display = \"block\"\n this.shadowRoot.querySelector(\"#icon-i\").className = this.icon\n this.shadowRoot.querySelector(\"iron-icon\").style.display = \"none\"\n }\n }\n\n hideIcon() {\n this.shadowRoot.querySelector(\"#icon\").style.display = \"none\";\n }\n\n\n\n\n}\n\ncustomElements.define('globular-dropdown-menu-item', DropdownMenuItem)\n\n/**\n * Menu used to display a list of items.\n */\nexport class DropdownMenu extends HTMLElement {\n // attributes.\n\n // Create the applicaiton view.\n constructor(icon, text) {\n\n super()\n\n // Set the shadow dom.\n this.attachShadow({ mode: 'open' });\n\n this.isopen = false;\n this.icon = icon;\n this.action = null;\n this.onopen = null;\n this.onclose = null;\n this.text = text;\n\n // Innitialisation of the layout.\n this.shadowRoot.innerHTML = `\n \n
\n \n \n \n \n
\n \n
\n \n
`\n\n\n // give the focus to the input.\n let menuItems = this.shadowRoot.querySelector(\"paper-card\")\n this.menuBtn = this.shadowRoot.querySelector(\"iron-icon\")\n\n this.menuBtn.onclick = (evt) => {\n evt.stopPropagation()\n\n if (menuItems.style.display == \"none\") {\n menuItems.style.display = \"block\"\n } else {\n menuItems.style.display = \"none\"\n }\n }\n\n this.shadowRoot.querySelector(\"iron-icon\").onclick =\n this.shadowRoot.querySelector(\"#text\").onclick = (evt) => {\n evt.stopPropagation()\n\n if (menuItems.style.display == \"none\") {\n this.open()\n } else {\n this.close()\n }\n }\n\n // Add an event listener to the document to handle clicks outside the menu\n document.addEventListener('click', (event) => {\n const container = this.shadowRoot.querySelector('#container');\n const menuItems = this.shadowRoot.querySelector('paper-card');\n\n // Check if the clicked element is outside the menu's container or items\n if (!container.contains(event.target) && !menuItems.contains(event.target)) {\n this.close();\n }\n });\n }\n\n connectedCallback() {\n\n let getParentNodeCount = (element) =>{\n let count = 0;\n let current = element;\n \n while (current.parentNode) {\n count++;\n current = current.parentNode;\n }\n \n return count;\n }\n\n if (this.hasAttribute(\"icon\")) {\n this.shadowRoot.querySelector(\"iron-icon\").icon = this.getAttribute(\"icon\")\n }\n\n if (this.hasAttribute(\"icon\")) {\n this.icon = this.getAttribute(\"icon\")\n } else if (!this.icon) {\n this.icon = \"\"\n }\n\n if (this.hasAttribute(\"text\")) {\n this.text = this.getAttribute(\"text\")\n } else {\n this.text = \"\"\n }\n\n // Set the menu text.\n this.shadowRoot.querySelector(\"#text\").innerHTML = this.text\n\n if (this.icon.startsWith(\"fa\")) {\n this.menuBtn = this.shadowRoot.querySelector(\"#icon-i\")\n this.menuBtn.style.display = \"block\"\n this.shadowRoot.querySelector(\"iron-icon\").style.display = \"none\"\n } else if (this.icon.length > 0) {\n this.menuBtn = this.shadowRoot.querySelector(\"iron-icon\")\n this.menuBtn.style.display = \"block\"\n this.shadowRoot.querySelector(\"#icon-i\").style.display = \"none\"\n }\n\n if (this.parentNode.tagName == \"GLOBULAR-DROPDOWN-MENU-ITEM\") {\n let menuItems = this.shadowRoot.querySelector(\"paper-card\")\n menuItems.style.top = \"0px\"\n menuItems.style.left = \"28px\"\n menuItems.style.backgroundColor = \"transparent\"\n this.icon = \"icons:chevron-right\"\n this.shadowRoot.querySelector(\"iron-icon\").setAttribute(\"icon\", this.icon)\n this.shadowRoot.querySelector(\"iron-icon\").style.display = \"block\"\n this.shadowRoot.querySelector(\"#icon-i\").style.display = \"none\"\n this.shadowRoot.querySelector(\"#text\").style.display = \"none\"\n\n // keep a reference to the parent menu item.\n this.parentMenuItem = this.parentNode\n\n } else {\n let menuItems = this.shadowRoot.querySelector(\"paper-card\")\n menuItems.style.top = \"25px\"\n menuItems.style.left = \"0px\"\n }\n\n let level = getParentNodeCount(this)\n const menuItems = this.shadowRoot.querySelector('paper-card');\n menuItems.style.zIndex = 1000 + level;\n }\n\n close() {\n this.shadowRoot.querySelector(\"#text\").style.textDecoration = \"none\"\n this.shadowRoot.querySelector(\"#text\").style.backgroundColor = \"var(--background-color)\"\n let menuItems = this.shadowRoot.querySelector(\"paper-card\")\n menuItems.style.display = \"none\"\n\n if (this.onclose != undefined) {\n this.onclose()\n }\n\n const evt = new CustomEvent('on-close', {\n bubbles: true, // Whether the event should bubble up through the DOM\n cancelable: true, // Whether the event is cancelable\n detail: {\n // You can provide additional data in the 'detail' property\n }\n });\n\n this.dispatchEvent(evt);\n }\n\n open() {\n this.shadowRoot.querySelector(\"#text\").style.textDecoration = \"underline\"\n this.shadowRoot.querySelector(\"#text\").style.backgroundColor = \"var(--surface-color)\"\n let menuItems = this.shadowRoot.querySelector(\"paper-card\")\n menuItems.style.display = \"block\"\n\n if (this.onopen != undefined) {\n this.onopen()\n }\n\n if (this.text.length > 0) {\n const onShowEvent = new CustomEvent('on-open', {\n bubbles: true, // Whether the event should bubble up through the DOM\n cancelable: true, // Whether the event is cancelable\n detail: {\n // You can provide additional data in the 'detail' property\n }\n });\n\n this.dispatchEvent(onShowEvent);\n }\n }\n\n hideBtn() {\n if (this.menuBtn) {\n this.menuBtn.style.display = \"none\"\n }\n }\n\n showBtn() {\n if (this.menuBtn) {\n this.menuBtn.style.display = \"block\"\n }\n }\n\n // Return true if the menu is open.\n isOpen() {\n let menuItems = this.shadowRoot.querySelector(\"paper-card\")\n return menuItems.style.display != \"none\"\n }\n}\n\ncustomElements.define('globular-dropdown-menu', DropdownMenu);\n\n/**\n * @class MenuBar \n */\nexport class MenuBar extends HTMLElement {\n // attributes.\n\n // Create the applicaiton view.\n constructor() {\n super()\n // Set the shadow dom.\n this.attachShadow({ mode: 'open' });\n }\n\n // The connection callback.\n connectedCallback() {\n\n // Innitialisation of the layout.\n this.shadowRoot.innerHTML = `\n \n
\n \n
\n `\n\n this.querySelectorAll(\"globular-dropdown-menu\").forEach((menu) => {\n\n // react to the on-show event.\n menu.addEventListener(\"on-open\", (evt) => {\n this.querySelectorAll(\"globular-dropdown-menu\").forEach((menu) => {\n if (menu != evt.target) {\n if (menu.parentMenuItem != undefined) {\n } else {\n menu.close()\n }\n }\n })\n })\n\n })\n\n }\n}\n\ncustomElements.define('globular-menu-bar', MenuBar)","import getUuidByString from \"uuid-by-string\";\nimport { displayError, displayMessage } from \"../../backend/backend\";\nimport { GetTitleFilesRequest } from \"globular-web-client/title/title_pb\";\nimport { playAudio } from \"../audio\";\n\nexport class SearchAudioCard extends HTMLElement {\n // attributes.\n\n // Create the applicaiton view.\n constructor() {\n super()\n\n // Set the shadow dom.\n this.attachShadow({ mode: 'open' });\n this.audio = null;\n this.editable = false;\n\n // Innitialisation of the layout.\n this.shadowRoot.innerHTML = `\n \n\n
\n \n \n
\n \n
\n \n \n
\n
\n \n \n
\n
\n
\n `\n this.closeBtn = this.shadowRoot.querySelector(\"#close-btn\")\n\n this.closeBtn.onclick = (evt) => {\n evt.stopPropagation()\n\n // Here I will ask the user for confirmation before actually delete the contact informations.\n let toast = displayMessage(\n `\n
\n
Your about to remove audio
\n \n
${this.audio.getTitle()}
\n
Is it what you want to do?
\n
\n Yes\n No\n
\n
\n `,\n 60 * 1000 // 60 sec...\n );\n\n let yesBtn = document.querySelector(\"#yes-delete-picture\")\n let noBtn = document.querySelector(\"#no-delete-picture\")\n\n // On yes\n yesBtn.onclick = () => {\n if (this.onclose) {\n this.onclose()\n }\n toast.hideToast();\n displayMessage(\n `
\n ${this.audio.getTitle()}\n was remove\n
`,\n 3000\n );\n\n if(this.onclose){\n this.onclose()\n }\n }\n\n noBtn.onclick = () => {\n toast.hideToast();\n }\n }\n }\n\n connectedCallback() {\n\n }\n\n // return the audio element...\n getAudio() {\n return this.audio;\n }\n\n // Call search event.\n setAudio(audio) {\n\n this.audio = audio\n let globule = audio.globule\n\n this.classList.add(\"filterable\")\n audio.getGenresList().forEach(g => {\n g.split(\" \").forEach(g_ => this.classList.add(getUuidByString(g_.toLowerCase())))\n\n })\n\n this.shadowRoot.querySelector(\"img\").src = audio.getPoster().getContenturl()\n\n // I will display the album and year info...\n this.shadowRoot.querySelector(\"#artist\").innerHTML = audio.getArtist()\n this.shadowRoot.querySelector(\"#title\").innerHTML = audio.getTitle()\n this.shadowRoot.querySelector(\"#album\").innerHTML = audio.getAlbum().trim()\n\n if (audio.getAlbum().length == 0) {\n this.shadowRoot.querySelector(\".album-header-bar\").style.display = \"none\"\n } else {\n if (audio.getAlbum() == \"\") {\n this.shadowRoot.querySelector(\".album-header-bar\").style.display = \"none\"\n }\n }\n\n\n // Now the action...\n this.shadowRoot.querySelector(\"img\").onclick = this.shadowRoot.querySelector(\"#play-title-btn\").onclick = () => {\n // paly only the first file...\n let rqst = new GetTitleFilesRequest\n rqst.setTitleid(audio.getId())\n let indexPath = globule.config.DataPath + \"/search/audios\"\n rqst.setIndexpath(indexPath)\n\n globule.titleService.getTitleFiles(rqst, { domain: globule.domain })\n .then(rsp => {\n\n if (rsp.getFilepathsList().length > 0) {\n let path = rsp.getFilepathsList().pop()\n playAudio(path, null, null, audio, globule)\n }\n\n }).catch(err => displayError(err, 3000))\n }\n\n this.shadowRoot.querySelector(\"#play-album-btn\").onclick = () => {\n\n searchTitles(globule, audio.getAlbum(), [], globule.config.DataPath + \"/search/audios\", 0, 500, hits => {\n let audios = []\n hits.forEach(hit => {\n if (hit.hasAudio) {\n let a = hit.getAudio()\n if (a.getAlbum() == audio.getAlbum()) {\n audios.push(a)\n }\n\n }\n })\n if (audios.length > 0) {\n if (audios[0].getTracknumber())\n audios = audios.sort((a, b) => {\n return b.getTracknumber() - a.getTracknumber()\n })\n playAudios(audios, audio.getAlbum())\n }\n }, [\"album\"])\n }\n }\n\n setEditable(editable) {\n this.editable = editable;\n\n // console.log(\"show hide edit value control...\", editable)\n if (this.editable) {\n if (this.onclose) {\n this.closeBtn.style.display = \"block\"\n }\n } else {\n this.closeBtn.style.display = \"none\"\n }\n }\n}\n\ncustomElements.define('globular-search-audio-card', SearchAudioCard)\n","import getUuidByString from \"uuid-by-string\";\nimport { PersonEditor } from \"./personEditor\";\nimport { displayError, displayMessage, generatePeerToken } from \"../../backend/backend\";\nimport { PermissionsManager } from \"../permissionManager/permissionManager\";\nimport { EditableStringList } from \"../list\";\nimport { CreatePersonRequest, CreateTitleRequest, Person, Poster, UpdateTitleMetadataRequest } from \"globular-web-client/title/title_pb\";\n\n/**\n * The title infos editor.\n */\nexport class TitleInfoEditor extends HTMLElement {\n // attributes.\n\n // Create the applicaiton view.\n constructor(title, titleInfosDisplay) {\n super()\n // Set the shadow dom.\n this.attachShadow({ mode: 'open' });\n\n this.titleInfosDisplay = titleInfosDisplay\n\n let imageUrl = \"\" // in case the video dosent contain any poster info...\n if (title.getPoster())\n imageUrl = title.getPoster().getContenturl()\n\n // Innitialisation of the layout.\n this.shadowRoot.innerHTML = `\n \n
\n
\n
\n \n
\n \n
\n\n
\n\n
\n
\n
Title
\n
\n\n
\n
Id:
\n
${title.getId()}
\n \n
\n \n
\n
\n\n
\n
Title:
\n
${title.getName()}
\n \n
\n \n
\n
\n\n
\n
Synopsis:
\n
${title.getDescription()}
\n \n
\n \n
\n
\n\n
\n
Year:
\n
${title.getYear()}
\n \n
\n \n
\n
\n\n
\n
Type:
\n
${title.getType()}
\n \n
\n \n
\n
\n\n
\n
Serie:
\n
${title.getSerie()}
\n \n
\n \n
\n
\n\n
\n
Season:
\n
${title.getSeason()}
\n \n
\n \n
\n
\n\n
\n
Episode:
\n
${title.getEpisode()}
\n \n
\n \n
\n
\n\n
\n
Genres:
\n \n
\n \n
\n\n
\n
\n
Directors
\n \n
\n \n
\n
\n \n
\n\n
\n
\n
Writers
\n \n
\n \n
\n
\n \n
\n\n
\n
\n
Actors
\n \n
\n \n
\n
\n \n
\n\n
\n
\n \n \n
\n Permissions\n \n Save\n Cancel\n
\n `\n\n // Here I will initialyse Casting...\n title.getDirectorsList().forEach(p => {\n this.appendPersonEditor(p, title, \"directors\")\n })\n\n title.getWritersList().forEach(p => {\n this.appendPersonEditor(p, title, \"writers\")\n })\n\n title.getActorsList().forEach(p => {\n this.appendPersonEditor(p, title, \"actors\")\n })\n\n let addActorsBtn = this.shadowRoot.querySelector(\"#add-actors-btn\")\n addActorsBtn.onclick = () => {\n let globule = title.globule\n let indexPath = globule.config.DataPath + \"/search/titles\"\n this.addCasting(addActorsBtn.parentNode, title, \"Acting\", indexPath)\n }\n\n let addWritersBtn = this.shadowRoot.querySelector(\"#add-writers-btn\")\n addWritersBtn.onclick = () => {\n let globule = title.globule\n let indexPath = globule.config.DataPath + \"/search/titles\"\n this.addCasting(addWritersBtn.parentNode, title, \"Writing\", indexPath)\n }\n\n let addDirectorsBtn = this.shadowRoot.querySelector(\"#add-directors-btn\")\n addDirectorsBtn.onclick = () => {\n let globule = title.globule\n let indexPath = globule.config.DataPath + \"/search/titles\"\n this.addCasting(addDirectorsBtn.parentNode, title, \"Directing\", indexPath)\n }\n\n let editPemissionsBtn = this.shadowRoot.querySelector(\"#edit-permissions-btn\")\n let collapse_panel = this.shadowRoot.querySelector(\"#collapse-panel\")\n\n this.permissionManager = new PermissionsManager()\n this.permissionManager.permissions = null\n this.permissionManager.globule = title.globule\n this.permissionManager.setPath(title.getId())\n this.permissionManager.setResourceType = \"title_info\"\n\n // toggle the collapse panel when the permission manager panel is close.\n this.permissionManager.onclose = () => {\n collapse_panel.toggle();\n }\n\n // I will display the permission manager.\n editPemissionsBtn.onclick = () => {\n collapse_panel.appendChild(this.permissionManager)\n collapse_panel.toggle();\n }\n\n // Here I will set the interaction...\n this.shadowRoot.querySelector(\"#cancel-indexation-btn\").onclick = () => {\n let parent = this.parentNode\n parent.removeChild(this)\n parent.appendChild(titleInfosDisplay)\n }\n\n // Delete the postser/cover image.\n this.shadowRoot.querySelector(\"globular-image-selector\").ondelete = () => {\n title.getPoster().setContenturl(\"\")\n }\n\n // Select new image.\n this.shadowRoot.querySelector(\"globular-image-selector\").onselectimage = (imageUrl) => {\n if (title.getPoster() == null) {\n let poster = new Poster()\n title.setPoster(poster)\n }\n title.getPoster().setContenturl(imageUrl)\n }\n\n // Set the list selector.\n let tileGenresDiv = this.shadowRoot.querySelector(\"#title-genres-div\")\n let videoGenresList = new EditableStringList(title.getGenresList())\n tileGenresDiv.appendChild(videoGenresList)\n\n\n // The title name\n let editVideoNameBtn = this.shadowRoot.querySelector(\"#edit-title-name-btn\")\n let videoNameInput = this.shadowRoot.querySelector(\"#title-name-input\")\n let videoNameDiv = this.shadowRoot.querySelector(\"#title-name-div\")\n\n editVideoNameBtn.onclick = () => {\n videoNameInput.style.display = \"table-cell\"\n videoNameDiv.style.display = \"none\"\n setTimeout(() => {\n videoNameInput.focus()\n videoNameInput.inputElement.inputElement.select()\n }, 100)\n }\n\n videoNameInput.onblur = () => {\n videoNameInput.style.display = \"none\"\n videoNameDiv.style.display = \"table-cell\"\n videoNameDiv.innerHTML = videoNameInput.value\n }\n\n // The title id\n let editVideoIdBtn = this.shadowRoot.querySelector(\"#edit-title-id-btn\")\n let videoIdInput = this.shadowRoot.querySelector(\"#title-id-input\")\n let videoIdDiv = this.shadowRoot.querySelector(\"#title-id-div\")\n\n editVideoIdBtn.onclick = () => {\n videoIdInput.style.display = \"table-cell\"\n videoIdDiv.style.display = \"none\"\n setTimeout(() => {\n videoIdInput.focus()\n videoIdInput.inputElement.inputElement.select()\n }, 100)\n }\n\n videoIdInput.onblur = () => {\n videoIdInput.style.display = \"none\"\n videoIdDiv.style.display = \"table-cell\"\n videoIdDiv.innerHTML = videoIdInput.value\n }\n\n // The title year\n let editVideoYearBtn = this.shadowRoot.querySelector(\"#edit-title-year-btn\")\n let videoYearInput = this.shadowRoot.querySelector(\"#title-year-input\")\n let videoYearDiv = this.shadowRoot.querySelector(\"#title-year-div\")\n\n editVideoYearBtn.onclick = () => {\n videoYearInput.style.display = \"table-cell\"\n videoYearDiv.style.display = \"none\"\n setTimeout(() => {\n videoYearInput.focus()\n videoYearInput.inputElement.inputElement.select()\n }, 100)\n }\n\n videoYearInput.onblur = () => {\n videoYearInput.style.display = \"none\"\n videoYearDiv.style.display = \"table-cell\"\n videoYearDiv.innerHTML = videoYearInput.value\n }\n\n // The title episode\n let editEpisodeBtn = this.shadowRoot.querySelector(\"#edit-title-episode-btn\")\n let videoEpisodeInput = this.shadowRoot.querySelector(\"#title-episode-input\")\n let videoEpisodeDiv = this.shadowRoot.querySelector(\"#title-episode-div\")\n\n editEpisodeBtn.onclick = () => {\n videoEpisodeInput.style.display = \"table-cell\"\n videoEpisodeDiv.style.display = \"none\"\n setTimeout(() => {\n videoEpisodeInput.focus()\n videoEpisodeInput.inputElement.inputElement.select()\n }, 100)\n }\n\n videoEpisodeInput.onblur = () => {\n videoEpisodeInput.style.display = \"none\"\n videoEpisodeDiv.style.display = \"table-cell\"\n videoEpisodeDiv.innerHTML = videoEpisodeInput.value\n }\n\n // The title season\n let editSeasonBtn = this.shadowRoot.querySelector(\"#edit-title-season-btn\")\n let videoSeasonInput = this.shadowRoot.querySelector(\"#title-season-input\")\n let videoSeasonDiv = this.shadowRoot.querySelector(\"#title-season-div\")\n\n editSeasonBtn.onclick = () => {\n videoSeasonInput.style.display = \"table-cell\"\n videoSeasonDiv.style.display = \"none\"\n setTimeout(() => {\n videoSeasonInput.focus()\n videoSeasonInput.inputElement.inputElement.select()\n }, 100)\n }\n\n videoSeasonInput.onblur = () => {\n videoSeasonInput.style.display = \"none\"\n videoSeasonDiv.style.display = \"table-cell\"\n videoSeasonDiv.innerHTML = videoSeasonInput.value\n }\n\n\n // The title serie\n let editSerieBtn = this.shadowRoot.querySelector(\"#edit-title-serie-btn\")\n let videoSerieInput = this.shadowRoot.querySelector(\"#title-serie-input\")\n let videoSerieDiv = this.shadowRoot.querySelector(\"#title-serie-div\")\n\n editSerieBtn.onclick = () => {\n videoSerieInput.style.display = \"table-cell\"\n videoSerieDiv.style.display = \"none\"\n setTimeout(() => {\n videoSerieInput.focus()\n videoSerieInput.inputElement.inputElement.select()\n }, 100)\n }\n\n videoSerieInput.onblur = () => {\n videoSerieInput.style.display = \"none\"\n videoSerieDiv.style.display = \"table-cell\"\n videoSerieDiv.innerHTML = videoSerieInput.value\n }\n\n // The title type\n let editTypeBtn = this.shadowRoot.querySelector(\"#edit-title-type-btn\")\n let videoTypeSelect = this.shadowRoot.querySelector(\"#title-type-select\")\n let videoTypeDiv = this.shadowRoot.querySelector(\"#title-type-div\")\n\n if (title.getType() == \"Movie\") {\n this.shadowRoot.querySelector(\"#movie-type-option\").selected = true\n this.shadowRoot.querySelector(\"#serie-type-option\").selected = false\n this.shadowRoot.querySelector(\"#episode-type-option\").selected = false\n } else if (title.getType() == \"TVEpisode\") {\n this.shadowRoot.querySelector(\"#movie-type-option\").selected = false\n this.shadowRoot.querySelector(\"#serie-type-option\").selected = false\n this.shadowRoot.querySelector(\"#episode-type-option\").selected = true\n } else if (title.getType() == \"TVSeries\") {\n this.shadowRoot.querySelector(\"#movie-type-option\").selected = false\n this.shadowRoot.querySelector(\"#serie-type-option\").selected = true\n this.shadowRoot.querySelector(\"#episode-type-option\").selected = false\n }\n\n editTypeBtn.onclick = () => {\n videoTypeSelect.style.display = \"table-cell\"\n videoTypeDiv.style.display = \"none\"\n }\n\n videoTypeSelect.onchange = () => {\n videoTypeSelect.style.display = \"none\"\n videoTypeDiv.style.display = \"table-cell\"\n videoTypeDiv.innerHTML = videoTypeSelect.options[videoTypeSelect.selectedIndex].text\n\n if (videoTypeDiv.innerHTML == \"Movie\") {\n this.shadowRoot.querySelector(\"#movie-type-option\").selected = true\n this.shadowRoot.querySelector(\"#serie-type-option\").selected = false\n this.shadowRoot.querySelector(\"#episode-type-option\").selected = false\n this.shadowRoot.querySelector(\"#title-episode-row\").style.display = \"none\"\n this.shadowRoot.querySelector(\"#title-serie-row\").style.display = \"none\"\n this.shadowRoot.querySelector(\"#title-season-row\").style.display = \"none\"\n } else if (videoTypeDiv.innerHTML == \"TVEpisode\") {\n this.shadowRoot.querySelector(\"#movie-type-option\").selected = false\n this.shadowRoot.querySelector(\"#serie-type-option\").selected = false\n this.shadowRoot.querySelector(\"#episode-type-option\").selected = true\n this.shadowRoot.querySelector(\"#title-episode-row\").style.display = \"table-row\"\n this.shadowRoot.querySelector(\"#title-serie-row\").style.display = \"table-row\"\n this.shadowRoot.querySelector(\"#title-season-row\").style.display = \"table-row\"\n } else if (videoTypeDiv.innerHTML == \"TVSeries\") {\n this.shadowRoot.querySelector(\"#movie-type-option\").selected = false\n this.shadowRoot.querySelector(\"#serie-type-option\").selected = true\n this.shadowRoot.querySelector(\"#episode-type-option\").selected = false\n this.shadowRoot.querySelector(\"#title-episode-row\").style.display = \"none\"\n this.shadowRoot.querySelector(\"#title-serie-row\").style.display = \"none\"\n this.shadowRoot.querySelector(\"#title-season-row\").style.display = \"none\"\n }\n }\n\n // The video description\n let editVideoDescriptionBtn = this.shadowRoot.querySelector(\"#edit-title-description-btn\")\n let videoVideoDescriptionInput = this.shadowRoot.querySelector(\"#title-description-input\")\n let videoVideoDescriptionDiv = this.shadowRoot.querySelector(\"#title-description-div\")\n\n editVideoDescriptionBtn.onclick = () => {\n videoVideoDescriptionInput.style.display = \"table-cell\"\n videoVideoDescriptionDiv.style.display = \"none\"\n setTimeout(() => {\n videoVideoDescriptionInput.focus()\n videoVideoDescriptionInput.textarea.select()\n }, 100)\n }\n\n // set back to non edit mode.\n videoVideoDescriptionInput.onblur = () => {\n videoVideoDescriptionInput.style.display = \"none\"\n videoVideoDescriptionDiv.style.display = \"table-cell\"\n videoVideoDescriptionDiv.innerHTML = videoVideoDescriptionInput.value\n }\n\n this.shadowRoot.querySelector(\"#save-indexation-btn\").onclick = () => {\n\n // So here I will set video values back and update it in the parent...\n title.setId(videoIdInput.value)\n title.setName(videoNameInput.value)\n title.setDescription(videoVideoDescriptionInput.value)\n title.setGenresList(videoGenresList.getItems())\n title.setEpisode(videoEpisodeInput.value)\n title.setSeason(videoSeasonInput.value)\n title.setSerie(videoSerieInput.value)\n title.setYear(videoYearInput.value)\n title.setType(videoTypeSelect.options[videoTypeSelect.selectedIndex].text)\n\n // set the casting values...\n // casting are interfaced by PersonEditor and PersonEditor are contain \n // in the casting slot, so I will use children iterator here...\n for (var i = 0; i < this.children.length; i++) {\n this.children[i].save()\n }\n\n this.saveCasting(title, \"Acting\", actors => {\n title.setActorsList(actors)\n this.saveCasting(title, \"Writing\", writers => {\n title.setWritersList(writers)\n this.saveCasting(title, \"Directing\", directors => {\n title.setDirectorsList(directors)\n let globule = title.globule\n generatePeerToken(globule, token => {\n let indexPath = globule.config.DataPath + \"/search/titles\"\n let rqst = new CreateTitleRequest\n rqst.setTitle(title)\n rqst.setIndexpath(indexPath)\n globule.titleService.createTitle(rqst, {domain: globule.domain, token: token })\n .then(rsp => {\n displayMessage(\"Title Information are updated\", 3000)\n this.titleInfosDisplay.setTitle(title)\n\n // Now I will save the title metadata...\n let rqst = new UpdateTitleMetadataRequest\n rqst.setTitle(title)\n rqst.setIndexpath(indexPath)\n globule.titleService.updateTitleMetadata(rqst, {domain: globule.domain, token: token })\n .then(rsp => {\n console.log(\"metadata was update!\")\n })\n .catch(err => displayError(err, 3000))\n\n })\n .catch(err => displayError(err, 3000))\n\n let parent = this.parentNode\n parent.removeChild(this)\n parent.appendChild(titleInfosDisplay)\n })\n })\n })\n })\n }\n }\n\n // create casting...\n addCasting(parent, title, role, indexPath) {\n\n let html = `\n \n
\n \n
\n New\n Cancel\n
\n
\n \n `\n\n let addCastingPanel = parent.querySelector(\"#add-casting-panel\")\n if (addCastingPanel != null) {\n return\n }\n\n let range = document.createRange()\n parent.appendChild(range.createContextualFragment(html))\n\n let createNewPersonBtn = parent.querySelector(\"#new-person-btn\")\n createNewPersonBtn.onclick = () => {\n\n let person = new Person()\n person.setId(\"New Casting\")\n\n let editor = null\n if (role == \"Acting\") {\n editor = this.appendPersonEditor(person, title, \"actors\")\n } else if (role == \"Writing\") {\n editor = this.appendPersonEditor(person, title, \"writers\")\n } else if (role == \"Directing\") {\n editor = this.appendPersonEditor(person, title, \"directors\")\n }\n\n editor.focus()\n\n // remove the panel...\n let addCastingPanel = parent.querySelector(\"#add-casting-panel\")\n addCastingPanel.parentNode.removeChild(addCastingPanel)\n }\n\n // close the search box...\n let searchPersonInput = parent.querySelector(\"globular-search-person-input\")\n searchPersonInput.oneditperson = (person) => {\n person.globule = title.globule\n let personEditor = new PersonEditor(person)\n let uuid = \"_\" + getUuidByString(person.getId()) + \"_edit_panel\"\n\n let div = document.body.querySelector(`#${uuid}`)\n if (div) {\n return // already a panel...\n }\n\n let html = `\n \n \n\n \n `\n\n let range = document.createRange()\n\n // so here I will append the editor into the body...\n document.body.appendChild(range.createContextualFragment(html))\n div = document.body.querySelector(`#${uuid}`)\n\n personEditor.onclose = () => {\n div.parentNode.removeChild(div)\n }\n\n div.appendChild(personEditor)\n personEditor.focus()\n }\n\n searchPersonInput.onaddcasting = (person) => {\n\n let globule = person.globule\n let indexPath = globule.config.DataPath + \"/search/titles\" // TODO set it correctly for video...\n\n generatePeerToken(globule, token => {\n\n // remove the video id from casting field.\n if (role == \"Acting\") {\n let casting = person.getActingList()\n if (casting.indexOf(title.getId()) == 0) {\n casting.push(title.getId())\n }\n person.setActingList(casting)\n } else if (role == \"Directing\") {\n let casting = person.getDirectingList()\n if (casting.indexOf(title.getId()) == 0) {\n casting.push(title.getId())\n }\n person.setDirectingList(casting)\n } else if (role == \"Writing\") {\n let casting = person.getWritingList()\n if (casting.indexOf(title.getId()) == 0) {\n casting.push(title.getId())\n }\n person.setDirectingList(casting)\n }\n\n // Now I will create persons\n let rqst = new CreatePersonRequest\n rqst.setPerson(person)\n rqst.setIndexpath(indexPath)\n\n // save the person witout the title id...\n globule.titleService.createPerson(rqst, {domain: globule.domain, token: token })\n .then(rsp => {\n if (role == \"Acting\") {\n // Now I will remove the person from the title casting...\n let casting = title.getActorsList()\n\n // remove it if it was existing.\n casting = casting.filter(p => p.getId() !== person.getId());\n\n casting.push(person)\n title.setActorsList(casting)\n\n } else if (role == \"Writing\") {\n // Now I will remove the person from the title casting...\n let casting = title.getWritersList()\n\n // remove it if it was existing.\n casting = casting.filter(p => p.getId() !== person.getId());\n casting.push(person)\n\n title.setWritersList(casting)\n } else if (role == \"Directing\") {\n // Now I will remove the person from the title casting...\n let casting = title.getDirectorsList()\n casting = casting.filter(p => p.getId() !== person.getId());\n casting.push(person)\n title.setDirectorsList(casting)\n }\n\n let rqst = new CreateTitleRequest\n rqst.setTitle(title)\n rqst.setIndexpath(indexPath)\n\n // update the title.\n globule.titleService.createTitle(rqst, {domain: globule.domain, token: token })\n .then(rsp => {\n if (role == \"Acting\") {\n this.appendPersonEditor(person, title, \"actors\")\n } else if (role == \"Writing\") {\n this.appendPersonEditor(person, title, \"writers\")\n } else if (role == \"Directing\") {\n this.appendPersonEditor(person, title, \"directors\")\n }\n // remove the panel...\n let addCastingPanel = parent.querySelector(\"#add-casting-panel\")\n addCastingPanel.parentNode.removeChild(addCastingPanel)\n\n }).catch(err => displayError(err, 3000))\n }).catch(err => displayError(err, 3000))\n\n })\n }\n\n searchPersonInput.onclose = parent.querySelector(\"#cancel-btn\").onclick = () => {\n let addCastingPanel = parent.querySelector(\"#add-casting-panel\")\n addCastingPanel.parentNode.removeChild(addCastingPanel)\n }\n }\n\n // Save casting this will create new person and set value in existing one.\n saveCasting(title, role, callback) {\n\n let castingEditors = this.querySelectorAll(\"globular-person-editor\")\n let casting = []\n\n for (var i = 0; i < castingEditors.length; i++) {\n let person = castingEditors[i].getPerson()\n\n if (role == \"Acting\") {\n if (castingEditors[i].slot == \"actors\") {\n casting.push(person)\n let casting_ = person.getActingList()\n if (!casting_) {\n casting_ = []\n }\n\n if (casting_.indexOf(title.getId()) == -1) {\n casting_.push(title.getId())\n }\n person.setActingList(casting_)\n }\n } else if (role == \"Writing\") {\n if (castingEditors[i].slot == \"writers\") {\n casting.push(person)\n\n let casting_ = person.getWritingList()\n if (!casting_) {\n casting_ = []\n }\n\n if (casting_.indexOf(title.getId()) == -1) {\n casting_.push(title.getId())\n }\n person.setWritingList(casting_)\n }\n } else if (role == \"Directing\") {\n if (castingEditors[i].slot == \"directors\") {\n casting.push(person)\n\n let casting_ = person.getDirectingList()\n if (!casting_) {\n casting_ = []\n }\n\n if (casting_.indexOf(title.getId()) == -1) {\n casting_.push(title.getId())\n }\n person.setDirectingList(casting_)\n }\n }\n }\n\n let globule = title.globule\n\n let savePerson = (index) => {\n let indexPath = globule.config.DataPath + \"/search/titles\"\n let p = casting[index]\n index++\n let rqst = new CreatePersonRequest\n rqst.setIndexpath(indexPath)\n rqst.setPerson(p)\n\n // save the person one by one...\n generatePeerToken(globule, token => {\n globule.titleService.createPerson(rqst, {domain: globule.domain, token: token })\n .then(rsp => {\n if (index < casting.length) {\n savePerson(index)\n } else {\n callback(casting)\n }\n })\n .catch(err => {\n if (index < casting.length) {\n savePerson(index)\n } else {\n callback(casting)\n }\n })\n })\n }\n\n let index = 0\n if (casting.length > 0)\n savePerson(index)\n else\n callback([])\n\n }\n\n appendPersonEditor(person, title, slot) {\n person.globule = title.globule\n let uuid = \"_\" + getUuidByString(person.getId() + slot)\n\n // Create the person editor.\n let personEditor = this.querySelector(`#${uuid}`)\n\n if (personEditor == null) {\n personEditor = new PersonEditor(person, title)\n personEditor.id = uuid;\n\n personEditor.slot = slot\n\n personEditor.onremovefromcast = (p) => {\n personEditor.parentNode.removeChild(personEditor)\n }\n\n // Append to the list of casting\n this.appendChild(personEditor)\n }\n\n return personEditor\n }\n}\n\ncustomElements.define('globular-title-info-editor', TitleInfoEditor)\n","import { DeleteTitleRequest, GetTitleFilesRequest, SearchTitlesRequest } from \"globular-web-client/title/title_pb\";\nimport { Backend, displayError, displayMessage, generatePeerToken } from \"../../backend/backend\";\nimport getUuidByString from \"uuid-by-string\";\nimport { FileController } from \"../../backend/file\";\nimport { VideoPreview } from \"../fileExplorer/videoPreview\";\nimport { TitleInfoEditor } from \"./titleInformationsEditor\";\nimport { randomUUID } from \"../utility\";\nimport { playAudio } from \"../audio\";\nimport { playVideo } from \"../video\";\n\n\n// Create the video preview...\nfunction getVideoPreview(parent, path, name, callback, globule) {\n\n // set only one preview div...\n let id = \"_\" + getUuidByString(path) + \"_preview_div\"\n if (parent.querySelector(\"#\" + id) != null) {\n callback(parent.querySelector(\"#\" + id))\n return\n }\n\n let h = 64;\n let w = 100;\n\n FileController.getFile(globule, path, w, h, file => {\n\n let fileNameSpan = document.createElement(\"span\")\n let preview = new VideoPreview(file, 64, () => {\n if (preview.width > 0 && preview.height > 0) {\n w = (preview.width / preview.height) * h\n }\n fileNameSpan.style.wordBreak = \"break-all\"\n fileNameSpan.style.fontSize = \".85rem\"\n fileNameSpan.style.maxWidth = w + \"px\";\n fileNameSpan.innerHTML = path.substring(path.lastIndexOf(\"/\") + 1)\n }, globule)\n\n let range = document.createRange()\n let uuid = randomUUID()\n preview.appendChild(range.createContextualFragment(``))\n let unlinkBtn = preview.querySelector(`#_${uuid}`)\n\n // keep the explorer link...\n preview.name = name\n preview.onpreview = () => {\n let previews = parent.querySelectorAll(\"globular-video-preview\")\n previews.forEach(p => {\n // stop all other preview...\n if (preview.name != p.name) {\n p.stopPreview()\n }\n })\n }\n\n // Here I will set the filename \n let previewDiv = document.createElement(\"div\")\n previewDiv.id = id\n previewDiv.style.display = \"flex\"\n previewDiv.style.flexDirection = \"column\"\n previewDiv.appendChild(preview)\n previewDiv.appendChild(fileNameSpan)\n\n // When the file will be unlink...\n unlinkBtn.onclick = (evt) => {\n evt.stopPropagation();\n\n let toast = displayMessage(`\n \n
\n
Your about to delete file association
\n \n
Is that what you want to do?
\n
\n Ok\n Cancel\n
\n
\n `, 60 * 1000)\n\n let cancelBtn = toast.toastElement.querySelector(\"#imdb-lnk-cancel-button\")\n cancelBtn.onclick = () => {\n toast.hideToast();\n }\n\n toast.toastElement.querySelector(\"#file-name\").innerHTML = path.substring(path.lastIndexOf(\"/\") + 1)\n\n let okBtn = toast.toastElement.query.Selector(\"#imdb-lnk-ok-button\")\n okBtn.onclick = () => {\n let rqst = new DissociateFileWithTitleRequest\n rqst.setFilepath(path)\n rqst.setTitleid(name)\n if (name.startsWith(\"tt\")) {\n rqst.setIndexpath(globule.config.DataPath + \"/search/titles\")\n } else {\n rqst.setIndexpath(globule.config.DataPath + \"/search/videos\")\n }\n\n globule.titleService.dissociateFileWithTitle(rqst, { domain: globule.domain, token: localStorage.getItem(\"user_token\") })\n .then(rsp => {\n // remove the association.\n previewDiv.parentNode.removeChild(previewDiv)\n displayMessage(\"association was delete\", 3000)\n toast.hideToast();\n }).catch(err => displayError(err, 3000))\n }\n\n }\n\n\n preview.onplay = (f) => {\n path = f.getPath()\n if (path.endsWith(\".mp3\")) {\n\n playAudio(path, (audio) => {\n let titleInfoBox = document.getElementById(\"title-info-box\")\n if (titleInfoBox) {\n titleInfoBox.parentNode.removeChild(titleInfoBox)\n }\n //video.toggleFullscreen();\n }, null, null, globule)\n\n } else {\n playVideo(path, (video) => {\n let titleInfoBox = document.getElementById(\"title-info-box\")\n if (titleInfoBox) {\n titleInfoBox.parentNode.removeChild(titleInfoBox)\n }\n if (video.toggleFullscreen) {\n video.toggleFullscreen();\n }\n\n }, null, null, globule)\n }\n\n }\n\n\n callback(previewDiv)\n\n }, err => displayError(err, 3000))\n\n}\n\n/**\n * Return the list of file of a given tile...\n * @param {*} title The title \n * @param {*} callback \n */\nfunction __getTitleFiles__(globule, indexPath, title, parent, callback) {\n\n let rqst = new GetTitleFilesRequest\n rqst.setTitleid(title.getId())\n rqst.setIndexpath(indexPath)\n\n globule.titleService.getTitleFiles(rqst, { domain: globule.domain })\n .then(rsp => {\n let previews = []\n let _getVideoPreview_ = () => {\n if (rsp.getFilepathsList().length > 0) {\n let path = rsp.getFilepathsList().pop()\n // Return the first file only... \n getVideoPreview(parent, path, title.getId(), p => {\n\n parent.appendChild(p)\n _getVideoPreview_() // call again...\n }, globule)\n } else {\n callback(previews)\n }\n }\n _getVideoPreview_() // call once...\n })\n .catch(err => { callback([]) })\n}\n\n\nfunction GetTitleFiles(indexPath, title, parent, callback) {\n\n let previews = []\n let titleFiles = () => {\n let globule = title.globule\n __getTitleFiles__(globule, globule.config.DataPath + indexPath, title, parent, previews_ => {\n previews = previews.concat(previews_)\n callback(previews)\n })\n }\n\n titleFiles() // call once\n\n}\n\n/**\n * Here I will return the list of asscociated episode for a given series...\n * @param {*} indexPath The path to the search engine \n * @param {*} title The title\n * @param {*} callback The callback with the list of episodes.\n */\nexport function GetEpisodes(indexPath, title, callback) {\n // return the existing list...\n if (title.__episodes__ != undefined) {\n callback(title.__episodes__)\n return\n }\n\n searchEpisodes(title.getId(), indexPath, episodes => {\n title.__episodes__ = episodes\n callback(title.__episodes__)\n })\n}\n\nexport function searchEpisodes(serie, indexPath, callback) {\n let episodes = []\n let globules = Backend.getGlobules()\n\n let __searchEpisodes__ = (globules) => {\n let globule = globules.pop()\n\n // search episodes...\n _searchEpisodes_(globule, serie, indexPath, episodes_ => {\n episodes = episodes.concat(episodes_)\n if (globules.length > 0) {\n __searchEpisodes__(globules)\n } else {\n callback(episodes)\n }\n })\n }\n\n if (globules.length > 0) {\n __searchEpisodes__(globules)\n }\n}\n\n\nfunction _searchEpisodes_(globule, serie, indexPath, callback) {\n\n // This is a simple test...\n let rqst = new SearchTitlesRequest\n rqst.setIndexpath(indexPath)\n rqst.setQuery(serie)\n rqst.setOffset(0)\n rqst.setSize(1000)\n let episodes = []\n let stream = globule.titleService.searchTitles(rqst, { domain: globule.domain })\n stream.on(\"data\", (rsp) => {\n if (rsp.hasHit()) {\n let hit = rsp.getHit()\n // display the value in the console...\n hit.getSnippetsList().forEach(val => {\n if (hit.getTitle().getType() == \"TVEpisode\") {\n let episode = hit.getTitle()\n episode.globule = globule\n episodes.push(episode)\n }\n })\n }\n });\n\n stream.on(\"status\", (status) => {\n if (status.code == 0) {\n // Here I will sort the episodes by seasons and episodes.\n callback(episodes.sort((a, b) => {\n if (a.getSeason() === b.getSeason()) {\n // Price is only important when cities are the same\n return a.getEpisode() - b.getEpisode();\n }\n return a.getSeason() - b.getSeason();\n }))\n } else {\n console.log(status.details);\n errorCallback(status.details);\n }\n });\n}\n\n\n\nconst __style__ = `\n.title-div {\n display: flex;\n\n}\n\n.title-poster-div {\n padding-right: 20px;\n}\n\n\n.title-informations-div {\n font-size: 1em;\n min-width: 350px;\n max-width: 450px;\n \n}\n\n.title-poster-div img, p{\n /*max-width: 256px;*/\n}\n\n.title-genre-span {\n border: 1px solid var(--palette-divider);\n padding: 1px;\n padding-left: 5px;\n padding-right: 5px;\n margin-right: 5px;\n user-select: none;\n}\n\n.rating-star{\n --iron-icon-fill-color: rgb(245 197 24);\n padding-right: 10px;\n height: 30px;\n width: 30px;\n}\n\n.title-rating-div{\n display: flex;\n align-items: center;\n color: var(--palette-text-secondery);\n font-size: 1rem;\n}\n\n.title-genres-div{\n padding: 5px;\n display: flex;\n flex-wrap: wrap;\n font-size: .9rem;\n}\n\n#rating-span{\n font-weight: 600;\n font-size: 1.2rem;\n color: var(--palette-text-primery);\n user-select: none;\n}\n\n.title-credit {\n flex-grow: 1;\n color: var(--palette-text-primery);\n border-bottom: 2px solid;\n border-color: var(--palette-divider);\n width: 100%;\n margin-bottom: 10px;\n}\n\n.title-files-div {\n display: flex;\n width: 100%;\n flex-wrap: wrap;\n max-width: 400px;\n}\n\n.title-files-div globular-video-preview {\n margin-right: 5px;\n}\n\n.title-files-div paper-progress{\n width: 100%;\n}\n\n.title-top-credit, title-credit{\n margin-top: 15px;\n display: flex;\n flex-direction: column;\n}\n\n.title-credit-title{\n font-weight: 400;\n font-size: 1.1rem;\n color: var(--palette-text-primery);\n}\n\n.title-credit-lst{\n display: flex;\n}\n\n.title-credit-lst a {\n color: var(--palette-warning-main);\n font-size: 1.1rem;\n margin-right: 12px;\n}\n\n.title-credit-lst a:link { text-decoration: none; }\n.title-credit-lst a:visited { text-decoration: none; }\n.title-credit-lst a:hover { text-decoration: none; cursor:pointer; }\n.title-credit-lst a:active { text-decoration: none; }\n\n/** Small **/\n@media only screen and (max-width: 600px) {\n .title-div {\n flex-direction: column;\n }\n\n .title-poster-div {\n display: flex;\n justify-content: center;\n margin-bottom: 20px;\n flex-direction: column;\n }\n\n globular-video-preview{\n margin-top: 10px;\n }\n}\n`\n\n/**\n * Globular title information panel.\n */\nexport class TitleInfo extends HTMLElement {\n // attributes.\n\n // Create the applicaiton view.\n constructor(titleDiv, isShort, globule) {\n super()\n // Set the shadow dom.\n this.attachShadow({ mode: 'open' });\n\n\n if (!globule) {\n this.globule = Backend.globular\n }\n\n this.isShort = isShort\n this.titleDiv = titleDiv\n this.globule = globule\n\n\n // Innitialisation of the layout.\n this.shadowRoot.innerHTML = `\n \n\n
\n
\n
\n \n
\n
\n \n
\n
\n
\n \n \n
\n \n
\n
/10
\n \n
\n
\n
\n
\n
Director
\n \n
\n
\n
Writer
\n \n
\n
\n
Star
\n \n
\n
\n
\n
\n
\n \n
\n
\n Edit\n Delete\n
\n `\n\n\n if (!localStorage.getItem(\"user_token\")) {\n this.shadowRoot.querySelector(\"#edit-indexation-btn\").style.display = \"none\"\n this.shadowRoot.querySelector(\"#delete-indexation-btn\").style.display = \"none\"\n }\n\n\n }\n\n showTitleInfo(title) {\n let uuid = \"_\" + getUuidByString(title.getId())\n let html = `\n \n \n \n `\n let titleInfoBox = document.getElementById(\"title-info-box\")\n if (titleInfoBox == undefined) {\n let range = document.createRange()\n document.body.appendChild(range.createContextualFragment(html))\n titleInfoBox = document.getElementById(\"title-info-box\")\n let parent = document.getElementById(\"video-info-box-dialog-\" + uuid)\n parent.style.position = \"fixed\"\n parent.style.top = \"75px\"\n parent.style.left = \"50%\"\n parent.style.transform = \"translate(-50%)\"\n\n titleInfoBox.onclose = () => {\n parent.parentNode.removeChild(parent)\n }\n }\n titleInfoBox.setTitlesInformation([title])\n }\n\n setTitle(title) {\n\n let posterUrl = \"\"\n if (title.getPoster() != undefined) {\n posterUrl = title.getPoster().getContenturl()\n }\n\n // set title values.\n this.shadowRoot.querySelector(\".title-synopsis-div\").innerHTML = title.getDescription()\n this.shadowRoot.querySelector(\"#rating-span\").innerHTML = title.getRating().toFixed(1)\n this.shadowRoot.querySelector(\"#rating-total-div\").innerHTML = title.getRatingcount()\n this.shadowRoot.querySelector(\".title-poster-img\").src = posterUrl\n\n\n // Set the title div.\n this.titleDiv.innerHTML = `\n
\n
\n \n \n \n
\n `\n this.titleDiv.querySelector(\"#title-name\").innerHTML = title.getName();\n this.titleDiv.querySelector(\"#title-type\").innerHTML = title.getType();\n this.titleDiv.querySelector(\"#title-year\").innerHTML = title.getYear();\n if (title.getType() == \"TVEpisode\") {\n if (title.getSeason() > 0 && title.getEpisode() > 0) {\n this.titleDiv.querySelector(\"#title-year\").innerHTML = `${title.getYear()}·S${title.getSeason()}·E${title.getEpisode()}`\n }\n }\n\n this.titleDiv.querySelector(\"#title-duration\").innerHTML = title.getDuration();\n\n let genresDiv = this.shadowRoot.querySelector(\".title-genres-div\")\n title.getGenresList().forEach(g => {\n let genreSpan = document.createElement(\"span\")\n genreSpan.classList.add(\"title-genre-span\")\n genreSpan.innerHTML = g\n genresDiv.appendChild(genreSpan)\n })\n\n // Display list of persons...\n let displayPersons = (div, persons) => {\n persons.forEach(p => {\n let uuid = \"_\" + getUuidByString(p.getId())\n let lnk = div.querySelector(`#${uuid}`)\n if (!lnk) {\n lnk = document.createElement(\"a\")\n }\n\n lnk.href = p.getUrl()\n lnk.innerHTML = p.getFullname()\n lnk.target = \"_blank\"\n lnk.id = uuid\n\n div.appendChild(lnk)\n })\n }\n\n // display directors\n displayPersons(this.shadowRoot.querySelector(\"#title-directors-lst\"), title.getDirectorsList())\n if (title.getDirectorsList().length > 0) {\n this.shadowRoot.querySelector(\"#title-directors-title\").innerHTML = \"Directors\"\n }\n\n // display writers\n displayPersons(this.shadowRoot.querySelector(\"#title-writers-lst\"), title.getWritersList())\n if (title.getWritersList().length > 0) {\n this.shadowRoot.querySelector(\"#title-writers-title\").innerHTML = \"Writers\"\n }\n\n // display actors\n displayPersons(this.shadowRoot.querySelector(\"#title-actors-lst\"), title.getActorsList())\n if (title.getActorsList().length > 0) {\n this.shadowRoot.querySelector(\"#title-actors-title\").innerHTML = \"Actors\"\n }\n\n let filesDiv = this.shadowRoot.querySelector(\".title-files-div\")\n if (title.getType() != \"TVSeries\") {\n filesDiv.style.paddingLeft = \"15px\"\n GetTitleFiles(\"/search/titles\", title, filesDiv, (previews) => {\n filesDiv.querySelector(\"paper-progress\").style.display = \"none\"\n })\n } else {\n // Here the title is a series...\n let indexPath = title.globule.config.DataPath + \"/search/titles\"\n GetEpisodes(indexPath, title, (episodes) => {\n if (title.onLoadEpisodes != null) {\n title.onLoadEpisodes(episodes)\n }\n this.displayEpisodes(episodes, this)\n filesDiv.querySelector(\"paper-progress\").style.display = \"none\"\n })\n }\n\n\n // Here I will display the editor...\n if (localStorage.getItem(\"user_token\") != null) {\n let editor = new TitleInfoEditor(title, this)\n\n let editIndexationBtn = this.shadowRoot.querySelector(\"#edit-indexation-btn\")\n editIndexationBtn.onclick = () => {\n // So here I will display the editor...\n let parent = this.parentNode\n parent.removeChild(this)\n parent.appendChild(editor)\n }\n }\n\n let deleteIndexationBtn = this.shadowRoot.querySelector(\"#delete-indexation-btn\")\n\n // Delete the indexation from the database.\n deleteIndexationBtn.onclick = () => {\n let toast = displayMessage(`\n \n
\n
Your about to delete indexation
\n \n
\n \n
\n
Is that what you want to do?
\n
\n Ok\n Cancel\n
\n
\n `, 60 * 1000)\n\n let cancelBtn = toast.toastElement.querySelector(\"#imdb-lnk-cancel-button\")\n cancelBtn.onclick = () => {\n toast.hideToast();\n }\n\n\n toast.toastElement.querySelector(\"#title-type\").innerHTML = title.getName()\n toast.toastElement.querySelector(\"#title-poster\").src = posterUrl\n\n let okBtn = toast.toastElement.querySelector(\"#imdb-lnk-ok-button\")\n okBtn.onclick = () => {\n let rqst = new DeleteTitleRequest()\n let globule = title.globule\n generatePeerToken(globule, token => {\n rqst.setTitleid(title.getId())\n rqst.setIndexpath(globule.config.DataPath + \"/search/titles\")\n globule.titleService.deleteTitle(rqst, { domain: globule.domain, token: token })\n .then(() => {\n displaySuccess(`${title.getId()}:${title.getDescription()} was deleted`, 3000)\n Backend.eventHub.publish(\"_delete_infos_\" + title.getId() + \"_evt\", {}, true)\n this.parentNode.removeChild(this)\n if (this.ondelete) {\n this.ondelete()\n }\n })\n .catch(err => displayError(err, 3000))\n\n })\n\n toast.hideToast();\n }\n }\n\n }\n\n // Here I will display the list of each episodes from the list...\n displayEpisodes(episodes, parent) {\n let seasons = {}\n\n if (parent.querySelector(\".episodes-div\")) {\n return\n }\n\n episodes.forEach(e => {\n if (e.getType() == \"TVEpisode\") {\n if (e.getSeason() > 0) {\n if (seasons[e.getSeason()] == null) {\n seasons[e.getSeason()] = []\n }\n if (seasons[e.getSeason()].filter(e_ => e_.getEpisode() === e.getEpisode()).length == 0) {\n seasons[e.getSeason()].push(e)\n }\n }\n }\n })\n\n let html = `\n \n
\n
\n \n
\n
\n\n
\n
\n `\n\n let range = document.createRange()\n parent.appendChild(range.createContextualFragment(html))\n\n let tabs = parent.querySelector(\"paper-tabs\")\n let content = parent.querySelector(\"#episodes-content\")\n let index = 0\n for (var s in seasons) {\n\n let html = `Season ${s}`\n tabs.appendChild(range.createContextualFragment(html))\n\n // Now the episodes panel...\n let episodes = seasons[s]\n let page = document.createElement(\"div\")\n page.classList.add(\"season-page-div\")\n content.appendChild(page)\n if (index > 0) {\n page.style.display = \"none\"\n }\n let tab = tabs.querySelector(`#tab-season-${s}`)\n tab.onclick = () => {\n let pages = content.querySelectorAll(\".season-page-div\")\n for (let i = 0; i < pages.length; i++) {\n pages[i].style.display = \"none\"\n }\n\n page.style.display = \"flex\"\n }\n\n episodes.forEach(e => {\n let posterUrl = \"\"\n if (e.getPoster() != undefined) {\n posterUrl = e.getPoster().getContenturl()\n }\n let uuid = \"_\" + getUuidByString(e.getId())\n let html = `\n
\n
${e.getEpisode()}
\n \n \n
\n
\n ${e.getName()}\n
\n \n
\n
\n `\n\n page.appendChild(range.createContextualFragment(html))\n\n let infosBtn = page.querySelector(`#infos-btn-${uuid}`)\n infosBtn.onclick = (evt) => {\n evt.stopPropagation()\n this.showTitleInfo(e)\n }\n\n let playBtn = page.querySelector(`#_${uuid}`)\n\n playBtn.onclick = () => {\n let indexPath = e.globule.config.DataPath + \"/search/titles\"\n let rqst = new GetTitleFilesRequest\n let globule = e.globule\n rqst.setTitleid(e.getId())\n rqst.setIndexpath(indexPath)\n globule.titleService.getTitleFiles(rqst, { domain: globule.domain })\n .then(rsp => {\n let path = rsp.getFilepathsList().pop()\n let titleInfoBox = document.getElementById(\"title-info-box\")\n let parentNode = null\n if (titleInfoBox) {\n parentNode = titleInfoBox.parentNode\n }\n\n playVideo(path,\n (video) => {\n if (titleInfoBox) {\n if (titleInfoBox.parentNode) {\n titleInfoBox.parentNode.removeChild(titleInfoBox)\n }\n // video.toggleFullscreen();\n }\n },\n () => {\n if (parentNode != null) {\n parentNode.appendChild(titleInfoBox)\n }\n }, e, globule)\n\n }).catch(err => displayError(err, 3000))\n }\n\n })\n index++\n }\n\n }\n}\n\ncustomElements.define('globular-title-info', TitleInfo)\n\n\n","\"use strict\";\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.AccountController = void 0;\nconst resource_pb_1 = require(\"globular-web-client/resource/resource_pb\");\nconst backend_1 = require(\"./backend\");\nconst authentication_pb_1 = require(\"globular-web-client/authentication/authentication_pb\");\nconst jwt_decode_1 = __importDefault(require(\"jwt-decode\"));\nconst rbac_pb_1 = require(\"globular-web-client/rbac/rbac_pb\");\nconst persistence_pb_1 = require(\"globular-web-client/persistence/persistence_pb\");\nconst notification_1 = require(\"./notification\");\nconst Utility_1 = require(\"../Utility\");\ndocument.addEventListener(\"backend-ready\", () => {\n // Invite contact event.\n backend_1.Backend.eventHub.subscribe(\"invite_contact_event_\", (uuid) => {\n }, (contact) => {\n // Here I will try to login the user.\n AccountController.onInviteContact(contact);\n }, true, this);\n // Revoke contact invitation.\n backend_1.Backend.eventHub.subscribe(\"revoke_contact_invitation_event_\", (uuid) => {\n }, (contact) => {\n // Here I will try to login the user.\n AccountController.onRevokeContactInvitation(contact);\n }, true, this);\n // Accept contact invitation\n backend_1.Backend.eventHub.subscribe(\"accept_contact_invitation_event_\", (uuid) => {\n }, (contact) => {\n // Here I will try to login the user.\n AccountController.onAcceptContactInvitation(contact);\n }, true, this);\n // Decline contact invitation\n backend_1.Backend.eventHub.subscribe(\"decline_contact_invitation_event_\", (uuid) => {\n }, (contact) => {\n // Here I will try to login the user.\n AccountController.onDeclineContactInvitation(contact);\n }, true, this);\n // Decline contact invitation\n backend_1.Backend.eventHub.subscribe(\"delete_contact_event_\", (uuid) => {\n }, (contact) => {\n // Here I will try to login the user.\n AccountController.onDeleteContact(contact);\n }, true, this);\n});\nclass AccountController {\n // Get the account.\n static get account() {\n // If the account is not set, then create a new account.\n if (AccountController.__account__ == null) {\n AccountController.__account__ = new resource_pb_1.Account();\n // first check if a token is available in the local storage\n let token = localStorage.getItem(\"user_token\");\n if (token != null) {\n let decoded = (0, jwt_decode_1.default)(token);\n let id = decoded.id;\n let userName = decoded.username;\n let email = decoded.email;\n let domain = decoded.user_domain;\n AccountController.__account__.setId(id);\n AccountController.__account__.setName(userName);\n AccountController.__account__.setEmail(email);\n AccountController.__account__.setDomain(domain);\n // init the \n AccountController.getAccount(id, (account) => {\n AccountController.__account__ = account;\n }, err => console.log(err));\n }\n else {\n // Set the account to be the sa account.\n AccountController.__account__.setId(\"sa\");\n AccountController.__account__.setName(\"sa\");\n let domain = backend_1.Backend.globular.domain;\n if (domain != null) {\n AccountController.__account__.setDomain(domain);\n }\n }\n }\n return AccountController.__account__;\n }\n // Set the account.\n static set account(account) {\n AccountController.__account__ = account;\n }\n // Get all account data from a give globule...\n static getAccounts(query, init, callback, errorCallback, globule = backend_1.Backend.globular) {\n (0, backend_1.generatePeerToken)(globule, token => {\n let rqst = new resource_pb_1.GetAccountsRqst;\n rqst.setQuery(query);\n if (globule.resourceService == null) {\n errorCallback(\"Resource service not found\");\n return;\n }\n let stream = globule.resourceService.getAccounts(rqst, { domain: globule.domain, token: token });\n let accounts_ = new Array();\n stream.on(\"data\", (rsp) => {\n accounts_ = accounts_.concat(rsp.getAccountsList());\n });\n stream.on(\"status\", (status) => {\n if (status.code == 0) {\n let accounts = new Array();\n if (accounts_.length == 0) {\n callback(accounts);\n return;\n }\n // In that case I will return the list of account without init ther data\n if (init == false) {\n accounts_.forEach(a_ => {\n if (AccountController.__accounts__[a_.getId() + \"@\" + a_.getDomain()] != undefined) {\n accounts.push(AccountController.__accounts__[a_.getId() + \"@\" + a_.getDomain()]);\n }\n else {\n accounts.push(a_);\n AccountController.__accounts__[a_.getId() + \"@\" + a_.getDomain()] = a_;\n }\n });\n callback(accounts);\n return;\n }\n let initAccountData = () => {\n let a_ = accounts_.pop();\n if (a_ == undefined) {\n errorCallback(accounts);\n return;\n }\n if (AccountController.__accounts__[a_.getId() + \"@\" + a_.getDomain()] == undefined) {\n if (accounts_.length > 0) {\n AccountController.initData(a_, () => {\n if (a_ == undefined) {\n errorCallback(accounts);\n return;\n }\n AccountController.__accounts__[a_.getId() + \"@\" + a_.getDomain()] = a_;\n initAccountData();\n }, errorCallback);\n }\n else {\n AccountController.initData(a_, () => {\n if (a_ == undefined) {\n errorCallback(accounts);\n return;\n }\n AccountController.__accounts__[a_.getId() + \"@\" + a_.getDomain()] = a_;\n callback(accounts);\n }, errorCallback);\n }\n }\n else {\n AccountController.__accounts__[a_.getId() + \"@\" + a_.getDomain()] = a_;\n if (accounts_.length > 0) {\n initAccountData();\n }\n else {\n callback(accounts);\n }\n }\n };\n // intialyse the account data.\n if (init == true)\n initAccountData();\n }\n else {\n // In case of error I will return an empty array\n errorCallback(status.details);\n }\n });\n }, errorCallback);\n }\n static getSession(account, callback, errorCallback) {\n // In that case I will get the values from the database...\n let rqst = new resource_pb_1.GetSessionRequest;\n rqst.setAccountid(account.getId() + \"@\" + account.getDomain());\n let globule = backend_1.Backend.getGlobule(account.getDomain());\n if (globule == null) {\n return;\n }\n (0, backend_1.generatePeerToken)(globule, token => {\n if (globule.resourceService == null) {\n errorCallback(\"Resource service not found\");\n return;\n }\n // call persist data\n globule.resourceService\n .getSession(rqst, {\n token: token,\n domain: globule.domain\n })\n .then((rsp) => {\n // get the response\n let lastDomain = globule.domain;\n let lastSession = rsp.getSession();\n if (lastSession == null) {\n errorCallback(\"No session found for the account\");\n return;\n }\n account.session = lastSession;\n callback(account.session);\n }).catch(errorCallback);\n }, errorCallback);\n }\n /**\n *\n * @param account\n * @param initCallback\n * @param errorCallback\n */\n static initSession(account, successCallback, errorCallback) {\n (0, backend_1.generatePeerToken)(backend_1.Backend.globular, token => {\n let accountId = account.getId() + \"@\" + account.getDomain();\n let globule = backend_1.Backend.getGlobule(account.getDomain());\n AccountController.getSession(account, (session) => {\n // load available space for the account on the globule...\n if (account.getId() != \"sa\") {\n let rqst = new rbac_pb_1.GetSubjectAvailableSpaceRqst;\n rqst.setSubject(accountId);\n rqst.setType(rbac_pb_1.SubjectType.ACCOUNT);\n if (globule.rbacService == null) {\n errorCallback(\"RBAC service not found\");\n return;\n }\n globule.rbacService\n .getSubjectAvailableSpace(rqst, {\n token: token,\n domain: globule.domain\n })\n .then((rsp) => {\n successCallback(session);\n })\n .catch((err) => {\n errorCallback(err);\n });\n }\n else {\n successCallback(session);\n }\n // So here I will lisen on session change event and keep this object with it.\n globule.eventHub.subscribe(`session_state_${account.getId() + \"@\" + account.getDomain()}_change_event`, (uuid) => {\n /** nothing special here... */\n }, (evt) => {\n account.session = resource_pb_1.Session.deserializeBinary(Uint8Array.from(evt.split(\",\")));\n // Here I will ask the user for confirmation before actually delete the contact informations.\n let getSessionStateColor = (state) => {\n switch (state) {\n case resource_pb_1.SessionState.ONLINE:\n return \"green\";\n case resource_pb_1.SessionState.OFFLINE:\n return \"red\";\n case resource_pb_1.SessionState.AWAY:\n return \"orange\";\n default:\n return \"gray\";\n }\n };\n let getSessionStateMessage = (state, name) => {\n switch (state) {\n case resource_pb_1.SessionState.ONLINE:\n return `${name} is now online.`;\n case resource_pb_1.SessionState.OFFLINE:\n return `${name} has gone offline.`;\n case resource_pb_1.SessionState.AWAY:\n return `${name} is away.`;\n default:\n return \"Unknown session state.\";\n }\n };\n let state = account.session.getState();\n const color = getSessionStateColor(state);\n let name = account.getName();\n if (account.getFirstname() != \"\" && account.getLastname() != \"\") {\n name = account.getFirstname() + \" \" + account.getLastname();\n }\n const message = getSessionStateMessage(state, name);\n let id = \"contact-session-info-toast-\" + account.getId() + \"@\" + account.getDomain();\n if (document.getElementById(id)) {\n let toastElement = document.getElementById(id);\n toastElement.remove();\n }\n let toast = (0, backend_1.displayMessage)(` \n
\n
\n \n ${message}\n
\n \n
`, 5000 // Display for 5 seconds\n );\n if (toast.toastElement)\n toast.toastElement.id = id;\n }, false, this);\n }, errorCallback);\n }, errorCallback);\n }\n // Save session state in the databese.\n static saveSession(onSave, onError) {\n let rqst = new resource_pb_1.UpdateSessionRequest;\n let user_token = localStorage.getItem(\"user_token\");\n if (user_token == null) {\n onError(\"No user token found\");\n return;\n }\n // I will get the token expiration date.\n let decoded = (0, jwt_decode_1.default)(user_token);\n let token_expired = decoded.exp;\n // I will check if the token is still valid\n if (Math.round(new Date().getTime() / 1000) > token_expired) {\n onError(\"The user token is expired\");\n return;\n }\n // I will set the session expiration date to the token expiration date.\n this.account.session.setExpireAt(Math.round(token_expired));\n rqst.setSession(this.account.session);\n // TEST if session must be on the user globule or the actual session store.\n let globule = backend_1.Backend.getGlobule(this.account.getDomain());\n (0, backend_1.generatePeerToken)(globule, token => {\n if (globule.resourceService == null) {\n onError(\"Resource service not found\");\n return;\n }\n // call persist data\n globule.resourceService\n .updateSession(rqst, {\n token: token,\n domain: this.account.getDomain()\n })\n .then((rsp) => {\n // Here I will return the value with it\n globule.eventHub.publish(`session_state_${this.account.session.getAccountid()}_change_event`, this.account.session.serializeBinary(), false);\n onSave();\n })\n .catch((err) => {\n if (onError) {\n onError(err);\n }\n console.log(\"fail to save session\", err);\n });\n }, err => console.log(err));\n }\n /**\n * Get an account with a given id.\n * @param id The id of the account to retreive\n * @param successCallback Callback when succed\n * @param errorCallback Error Callback.\n */\n static getAccount(id, successCallback, errorCallback) {\n if (id == null || id == \"\") {\n errorCallback(\"No account id given to getAccount function!\");\n return;\n }\n let accountId = id;\n let domain = backend_1.Backend.globular.domain;\n if (accountId.indexOf(\"@\") == -1) {\n accountId = id + \"@\" + domain;\n }\n else {\n domain = accountId.split(\"@\")[1];\n id = accountId.split(\"@\")[0];\n }\n if (AccountController.__accounts__[accountId] != null) {\n successCallback(AccountController.__accounts__[accountId]);\n return;\n }\n let globule = backend_1.Backend.getGlobule(domain);\n if (globule == null) {\n errorCallback(\"Globule not found\");\n return;\n }\n (0, backend_1.generatePeerToken)(globule, token => {\n let rqst = new resource_pb_1.GetAccountsRqst;\n rqst.setQuery(`{\"_id\":\"${id}\"}`); // search by name and not id... the id will be retreived.\n rqst.setOptions(`[{\"Projection\":{\"_id\":1, \"email\":1, \"name\":1, \"groups\":1, \"organizations\":1, \"roles\":1, \"domain\":1}}]`);\n if (globule.resourceService == null) {\n errorCallback(\"Resource service not found\");\n return;\n }\n let stream = globule.resourceService.getAccounts(rqst, { domain: domain, token: token });\n let data;\n stream.on(\"data\", (rsp) => {\n if (rsp.getAccountsList().length == 0) {\n errorCallback(\"no account found with id \" + accountId);\n return;\n }\n data = rsp.getAccountsList()[0];\n });\n stream.on(\"status\", (status) => {\n if (status.code == 0) {\n // Initialyse the data...\n if (!data) {\n errorCallback(\"no account found with id \" + accountId);\n return;\n }\n AccountController.__accounts__[accountId] = data;\n AccountController.initSession(data, () => {\n AccountController.initData(data, (account) => {\n let user_id = localStorage.getItem(\"user_id\");\n if (user_id == account.getId()) {\n AccountController.__account__ = account;\n let globule = backend_1.Backend.getGlobule(account.getDomain());\n globule.eventHub.publish(\"login_success_\", account, true);\n }\n successCallback(account);\n }, errorCallback);\n }, errorCallback);\n }\n else {\n errorCallback(status.details);\n }\n });\n }, err => (0, backend_1.displayMessage)(err, 3000));\n }\n /**\n * Must be called once when the session open.\n * @param account\n */\n static initData(account, callback, errorCallback) {\n let globule = backend_1.Backend.getGlobule(account.getDomain());\n if (globule == null) {\n errorCallback(\"Globule not found\");\n return;\n }\n // Retreive user data... \n AccountController.readOneUserData(`{\"_id\":\"${account.getId()}\"}`, // The query is made on the user database and not local_ressource Accounts here so name is name_ here\n account.getName(), // The database to search into \n globule.domain, (data) => {\n if (data == null) {\n errorCallback(\"no data found for the user\");\n return;\n }\n // Set the data in the account object.\n for (let key in data) {\n account[key] = data[key];\n }\n callback(account);\n }, errorCallback);\n }\n /**\n * Read user data one result at time.\n */\n static readOneUserData(query, userName, userDomain, successCallback, errorCallback) {\n let rqst = new persistence_pb_1.FindOneRqst();\n // remove unwanted characters\n let id = userName.split(\"@\").join(\"_\").split(\".\").join(\"_\");\n let db = id + \"_db\";\n // set the connection id.\n rqst.setId(id);\n rqst.setDatabase(db);\n let collection = \"user_data\";\n rqst.setCollection(collection);\n rqst.setQuery(query);\n rqst.setOptions(\"\");\n let globule = backend_1.Backend.getGlobule(userDomain);\n (0, backend_1.generatePeerToken)(globule, token => {\n if (globule.persistenceService == null) {\n errorCallback(\"Persistence service not found\");\n return;\n }\n // call persist data\n globule.persistenceService\n .findOne(rqst, {\n token: token,\n domain: globule.domain // the domain at the origin of the request.\n })\n .then((rsp) => {\n let data = rsp.getResult().toJavaScript();\n successCallback(data);\n })\n .catch((err) => {\n if (err.code == 13) {\n if (AccountController.account == null) {\n (0, backend_1.displayMessage)(\"no connections found on the server you need to login\", 3000);\n setTimeout(() => {\n localStorage.removeItem(\"remember_me\");\n localStorage.removeItem(\"user_token\");\n localStorage.removeItem(\"user_id\");\n localStorage.removeItem(\"user_name\");\n localStorage.removeItem(\"user_email\");\n localStorage.removeItem(\"token_expired\");\n location.reload();\n return;\n }, 3000);\n }\n if (AccountController.account.getId() == id) {\n if (err.message.indexOf(\"no documents in result\") != -1) {\n successCallback({});\n }\n else {\n (0, backend_1.displayError)(\"no connection found on the server you need to login\", 3000);\n setTimeout(() => {\n localStorage.removeItem(\"remember_me\");\n localStorage.removeItem(\"user_token\");\n localStorage.removeItem(\"user_id\");\n localStorage.removeItem(\"user_name\");\n localStorage.removeItem(\"user_email\");\n localStorage.removeItem(\"token_expired\");\n location.reload();\n return;\n }, 3000);\n }\n }\n else {\n successCallback({});\n }\n }\n else {\n errorCallback(err);\n }\n });\n }, err => (0, backend_1.displayError)(err, 3000));\n }\n /**\n * Close the current session explicitelty.\n */\n static logout() {\n // Send local event.\n if (AccountController.account != undefined) {\n // So here I will set the account session state to onlise.\n AccountController.account.session.setState(resource_pb_1.SessionState.OFFLINE);\n AccountController.saveSession(() => {\n let name = AccountController.account.getName();\n if (AccountController.account.getFirstname() != \"\" && AccountController.account.getLastname() != \"\") {\n name = AccountController.account.getFirstname() + \" \" + AccountController.account.getLastname();\n }\n let html = `\n
\n \n
Bye Bye
\n
${name}!
\n \n
See you soon...
\n \n
\n `;\n (0, backend_1.displayMessage)(html, 3000);\n backend_1.Backend.getGlobule(AccountController.account.getDomain()).eventHub.publish(`session_state_${AccountController.account.session.getAccountid()}_change_event`, AccountController.account.session.serializeBinary(), false);\n }, err => console.log(err));\n }\n // remove token informations\n localStorage.removeItem(\"remember_me\");\n localStorage.removeItem(\"user_token\");\n localStorage.removeItem(\"user_id\");\n localStorage.removeItem(\"user_name\");\n localStorage.removeItem(\"user_email\");\n localStorage.removeItem(\"token_expired\");\n setTimeout(() => {\n window.location.href = window.location.origin + window.location.pathname.split('/').slice(0, -1).join('/');\n }, 3000);\n }\n // Authenticate the 'sa' user on the globule...\n static authenticate(globule, user, password, callback, errorCallback) {\n let rqst = new authentication_pb_1.AuthenticateRqst();\n rqst.setName(user);\n rqst.setIssuer(globule.config.Mac);\n rqst.setPassword(password);\n // Check if the authentication service is available\n if (!globule.authenticationService) {\n errorCallback(\"The authentication service is not available.\");\n return;\n }\n globule.authenticationService.authenticate(rqst, {}).then((response) => {\n // Set the token\n const token = response.getToken();\n // save the token in the local storage\n //localStorage.setItem(\"user_token\", token);\n // Here I will set the token in the localstorage.\n let decoded = (0, jwt_decode_1.default)(token);\n let userName = decoded.username;\n let email = decoded.email;\n let id = decoded.id;\n let address = decoded.address;\n let userDomain = decoded.user_domain;\n // here I will save the user token and user_name in the local storage.\n localStorage.setItem(\"user_token\", token);\n localStorage.setItem(\"token_expired\", decoded.exp);\n localStorage.setItem(\"user_email\", email);\n localStorage.setItem(\"user_name\", userName);\n localStorage.setItem(\"user_id\", id);\n localStorage.setItem(\"user_domain\", userDomain);\n let rqst = new persistence_pb_1.CreateConnectionRqst;\n let connectionId = userName.split(\"@\").join(\"_\").split(\".\").join(\"_\");\n // So here i will open the use database connection.\n let connection = new persistence_pb_1.Connection;\n connection.setId(connectionId);\n connection.setUser(connectionId);\n connection.setPassword(password);\n connection.setStore(globule.config.BackendStore);\n connection.setName(id + \"_db\");\n connection.setPort(globule.config.BackendPort);\n connection.setTimeout(60);\n connection.setHost(address);\n rqst.setConnection(connection);\n if (globule.persistenceService == null) {\n errorCallback(\"Persistence service not found\");\n return;\n }\n globule.persistenceService.createConnection(rqst, {\n token: token,\n domain: globule.domain,\n address: address\n }).then(() => {\n AccountController.getAccount(id, (account) => {\n AccountController.__account__ = account;\n // set the session state to connected\n AccountController.account.session.setState(resource_pb_1.SessionState.ONLINE);\n AccountController.account.session.setLastStateTime(Math.round(new Date().getTime() / 1000));\n AccountController.saveSession(() => {\n (0, backend_1.displayMessage)(\"Welcome \" + userName, 3000);\n backend_1.Backend.getGlobule(userDomain).eventHub.publish(`session_state_${AccountController.account.session.getAccountid()}_change_event`, AccountController.account.session.serializeBinary(), false);\n }, errorCallback);\n callback(token);\n }, errorCallback);\n });\n }).catch((err) => {\n errorCallback(err);\n });\n }\n /**\n * Register a new account with the application.\n * @param name The account name\n * @param email The account email\n * @param password The account password\n */\n static register(name, email, password, confirmPassord, domain, onRegister, onError, globule = backend_1.Backend.globular, firstName = \"\", lastName = \"\", profilePicture = \"\") {\n if (confirmPassord.length == 0) {\n onError(\"Please confirm your password\");\n return;\n }\n // Create the register request.\n let rqst = new resource_pb_1.RegisterAccountRqst();\n rqst.setConfirmPassword(confirmPassord);\n let account = new resource_pb_1.Account();\n account.setEmail(email);\n account.setName(name);\n account.setId(name);\n account.setDomain(domain);\n // Set the user refresh token.\n if (password.length == 0) {\n account.setRefreshtoken(confirmPassord); // Confirm password is the refresh token in that case.\n }\n else {\n account.setPassword(password);\n }\n if (firstName != \"\") {\n account.setFirstname(firstName);\n }\n if (lastName != \"\") {\n account.setLastname(lastName);\n }\n if (profilePicture != \"\") {\n account.setProfilepicture(profilePicture);\n }\n rqst.setAccount(account);\n if (globule.resourceService == null) {\n onError(\"Resource service not found\");\n return;\n }\n // Register a new account.\n globule.resourceService\n .registerAccount(rqst)\n .then((rsp) => {\n // Here I will set the token in the localstorage.\n let token = rsp.getResult();\n let decoded = (0, jwt_decode_1.default)(token);\n // here I will save the user token and user_name in the local storage.\n localStorage.setItem(\"user_token\", token);\n localStorage.setItem(\"user_id\", decoded.id);\n localStorage.setItem(\"user_name\", decoded.username);\n localStorage.setItem(\"token_expired\", decoded.exp);\n localStorage.setItem(\"user_email\", decoded.email);\n localStorage.setItem(\"user_domain\", decoded.user_domain);\n let rqst = new persistence_pb_1.CreateConnectionRqst;\n let connectionId = name.split(\"@\").join(\"_\").split(\".\").join(\"_\");\n let address = decoded.address;\n let domain = decoded.domain;\n // So here i will open the use database connection.\n let connection = new persistence_pb_1.Connection;\n connection.setId(connectionId);\n connection.setUser(connectionId);\n connection.setPassword(password); // in case of no password set the refresh token as password.\n connection.setStore(globule.config.BackendStore);\n connection.setName(name + \"_db\");\n connection.setPort(globule.config.BackendPort);\n connection.setTimeout(60);\n connection.setHost(address);\n rqst.setConnection(connection);\n if (globule.persistenceService == null) {\n onError(\"Persistence service not found\");\n return;\n }\n globule.persistenceService.createConnection(rqst, {\n token: token,\n domain: domain,\n address: address\n }).then(() => {\n // Callback on login.\n AccountController.__account__ = account;\n AccountController.initSession(account, () => {\n AccountController.initData(account, (account) => {\n onRegister(account);\n backend_1.Backend.eventHub.publish(\"login_success_\", AccountController.account, true);\n }, (err) => {\n onRegister(account);\n backend_1.Backend.eventHub.publish(\"login_success_\", AccountController.account, true);\n onError(err);\n });\n }, onError);\n }).catch(err => {\n onError(err);\n });\n })\n .catch((err) => {\n onError(err);\n });\n return null;\n }\n ///////////////////////////////////////////////////////////////////\n // Contacts.\n ///////////////////////////////////////////////////////////////////\n static getContacts(account, query, callback, errorCallback) {\n // Insert the notification in the db.\n let rqst = new persistence_pb_1.FindRqst();\n // set connection infos.\n let id = account.getName().split(\"@\").join(\"_\").split(\".\").join(\"_\");\n let db = id + \"_db\";\n rqst.setId(id);\n rqst.setDatabase(db);\n rqst.setCollection(\"Contacts\");\n rqst.setQuery(query);\n let globule = backend_1.Backend.getGlobule(account.getDomain());\n (0, backend_1.generatePeerToken)(globule, token => {\n if (globule.persistenceService == null) {\n errorCallback(\"Persistence service not found\");\n return;\n }\n let stream = globule.persistenceService.find(rqst, {\n token: token,\n domain: globule.domain\n });\n let data;\n data = [];\n stream.on(\"data\", (rsp) => {\n data = (0, Utility_1.mergeTypedArrays)(data, rsp.getData());\n });\n stream.on(\"status\", (status) => {\n if (status.code == 0) {\n (0, Utility_1.uint8arrayToStringMethod)(data, (str) => {\n let contacts = JSON.parse(str);\n callback(contacts);\n });\n }\n else {\n console.log(\"fail to retreive contacts with error: \", status.details);\n // In case of error I will return an empty array\n callback([]);\n }\n });\n }, errorCallback);\n }\n static setContact(from, status_from, to, status_to, successCallback, errorCallback) {\n // So here I will save the contact invitation into pending contact invitation collection...\n let rqst = new resource_pb_1.SetAccountContactRqst;\n rqst.setAccountid(from.getId() + \"@\" + from.getDomain());\n let contact = new resource_pb_1.Contact;\n contact.setId(to.getId() + \"@\" + to.getDomain());\n contact.setStatus(status_from);\n contact.setInvitationtime(Math.round(Date.now() / 1000));\n // Test if the ringtone is set for the contact.\n let ringtone = to.ringtone;\n // Set optional values...\n if (ringtone)\n contact.setRingtone(ringtone);\n if (to.getProfilepicture())\n contact.setProfilepicture(to.getProfilepicture());\n rqst.setContact(contact);\n let globule = backend_1.Backend.getGlobule(from.getDomain());\n (0, backend_1.generatePeerToken)(globule, token => {\n if (globule.resourceService == null) {\n errorCallback(\"Resource service not found\");\n return;\n }\n globule.resourceService.setAccountContact(rqst, {\n token: token,\n domain: globule.domain\n })\n .then((rsp) => {\n let sentInvitation = `{\"_id\":\"${to.getId() + \"@\" + to.getDomain()}\", \"invitationTime\":${Math.floor(Date.now() / 1000)}, \"status\":\"${status_from}\"}`;\n backend_1.Backend.getGlobule(from.getDomain()).eventHub.publish(status_from + \"_\" + from.getId() + \"@\" + from.getDomain() + \"_evt\", sentInvitation, false);\n if (from.getDomain() != to.getDomain()) {\n backend_1.Backend.getGlobule(to.getDomain()).eventHub.publish(status_from + \"_\" + from.getId() + \"@\" + from.getDomain() + \"_evt\", sentInvitation, false);\n }\n // Here I will return the value with it\n let rqst = new resource_pb_1.SetAccountContactRqst;\n rqst.setAccountid(to.getId() + \"@\" + to.getDomain());\n let contact = new resource_pb_1.Contact;\n contact.setId(from.getId() + \"@\" + from.getDomain());\n contact.setStatus(status_to);\n contact.setInvitationtime(Math.round(Date.now() / 1000));\n rqst.setContact(contact);\n // So here I will save the contact invitation into pending contact invitation collection...\n let resourceServiceTo = backend_1.Backend.getGlobule(to.getDomain()).resourceService;\n if (resourceServiceTo == null) {\n errorCallback(\"Resource service not found\");\n return;\n }\n // call persist data\n resourceServiceTo\n .setAccountContact(rqst, {\n token: token,\n domain: backend_1.Backend.domain\n })\n .then((rsp) => {\n // Here I will return the value with it\n let receivedInvitation = `{\"_id\":\"${from.getId() + \"@\" + from.getDomain()}\", \"invitationTime\":${Math.floor(Date.now() / 1000)}, \"status\":\"${status_to}\"}`;\n backend_1.Backend.getGlobule(from.getDomain()).eventHub.publish(status_to + \"_\" + to.getId() + \"@\" + to.getDomain() + \"_evt\", receivedInvitation, false);\n if (from.getDomain() != to.getDomain()) {\n backend_1.Backend.getGlobule(to.getDomain()).eventHub.publish(status_to + \"_\" + to.getId() + \"@\" + to.getDomain() + \"_evt\", receivedInvitation, false);\n }\n successCallback();\n })\n .catch(errorCallback);\n }).catch(errorCallback);\n }, errorCallback);\n }\n // Invite a new contact.\n static onInviteContact(contact) {\n // Create the user notification\n let mac = backend_1.Backend.getGlobule(contact.getDomain()).config.Mac;\n let recipient = contact.getId() + \"@\" + contact.getDomain();\n let message = `
\n
\n ${AccountController.account.getName()} want to add you as contact. Click the button to accept or decline the invitation.\n
\n
`;\n // Send the notification.\n notification_1.NotificationController.sendNotifications(recipient, mac, message, resource_pb_1.NotificationType.USER_NOTIFICATION, () => {\n AccountController.setContact(AccountController.account, \"sent\", contact, \"received\", () => {\n // this.displayMessage(, 3000)\n }, (err) => {\n (0, backend_1.displayError)(err, 3000);\n });\n }, (err) => {\n (0, backend_1.displayError)(err, 3000);\n });\n }\n // Accept contact.\n static onAcceptContactInvitation(contact) {\n // Create a user notification.\n let mac = backend_1.Backend.getGlobule(contact.getDomain()).config.Mac;\n let recipient = contact.getId() + \"@\" + contact.getDomain();\n let message = `
\n
\n ${AccountController.account.getEmail()} accept you as contact.\n Click the button to get more infos.\n
\n The table filtering is based on the JMESPath query language.\n
\n
\n The JMESPath language is a query language for JSON. You can use it to filter and transform JSON data.\n
\n
\n Here is a list available fields you can use in your query:\n
\n
\n
\n
Property
\n
Type
\n
\n
\n \n `\n\n let range = document.createRange();\n let fragment = range.createContextualFragment(infosPane);\n let container = this.shadowRoot.getElementById(\"container\")\n container.appendChild(fragment)\n\n let properties = this.shadowRoot.getElementById(\"properties\")\n\n // Now i will list all the properties.\n for (var property in data) {\n\n if (!property.startsWith(\"_\")) {\n let row = document.createElement(\"div\")\n row.style.display = \"table-row\"\n\n // the property name.\n let div = document.createElement(\"div\")\n div.innerHTML = property\n div.style.display = \"table-cell\"\n div.style.padding = \"5px\"\n row.appendChild(div)\n\n // the property type.\n div = document.createElement(\"div\")\n let propertyType = typeof data[property]\n if (propertyType == \"object\") {\n if (data[property] instanceof Date) {\n propertyType = \"date\"\n } else if (data[property] instanceof Array) {\n propertyType = \"array\"\n } else if (data[property] instanceof Object) {\n propertyType = \"object\"\n }\n }\n div.innerHTML = propertyType\n div.style.display = \"table-cell\"\n div.style.padding = \"5px\"\n row.appendChild(div)\n\n\n properties.appendChild(row)\n }\n }\n }\n\n update() {\n // Get the current selection\n let query = this.editor.innerText\n\n if (query == \"\") {\n let id = this.table.getAttribute(\"id\")\n localStorage.removeItem(id + \"_query\")\n this.table.setFiltredData(null)\n return\n }\n\n try {\n let q = query\n if (q.indexOf(\".{\") != -1) {\n q = q.replace(\".{\", \".{ _index:_index,\")\n }\n\n let id = this.table.getAttribute(\"id\")\n localStorage.setItem(id + \"_query\", query)\n\n const result = jmespath.search(this.table._data, q);\n\n this.table.setFiltredData(result)\n\n\n } catch (e) {\n console.log(e)\n this.table.setFiltredData(null)\n\n }\n\n\n }\n\n connectedCallback() {\n\n }\n\n}\n\ncustomElements.define('globular-table-filter', TableFilter)\n\n\n\n/**\n * The table sorter.\n */\nexport class TableSorter extends HTMLElement {\n // attributes.\n\n // Create the applicaiton view.\n constructor(table, field) {\n super()\n\n // Set the id of the element.\n this.id = \"_\" + getUuidByString(field)\n\n // keep the table and the field.\n this.table = table\n this.field = field\n this.sortIndex = -1\n\n // Set the shadow dom.\n this.attachShadow({ mode: 'open' });\n\n }\n\n // The connection callback.\n connectedCallback() {\n\n // Innitialisation of the layout.\n this.shadowRoot.innerHTML = `\n \n
\n \n \n
\n `\n // give the focus to the input.\n let container = this.shadowRoot.querySelector(\"#container\")\n let sortBtn = this.shadowRoot.querySelector(\"iron-icon\")\n let indexSpan = this.shadowRoot.querySelector(\"#index\")\n\n this.sortOrder = \"\"\n this.sortIndex = -1\n\n sortBtn.onclick = () => {\n\n if (this.sortOrder == \"\") {\n this.sortOrder = \"asc\"\n sortBtn.setAttribute(\"icon\", \"icons:arrow-upward\")\n container.style.color = \"var(--primary-color)\"\n indexSpan.style.display = \"inline\"\n } else if (this.sortOrder == \"asc\") {\n this.sortOrder = \"desc\"\n sortBtn.setAttribute(\"icon\", \"icons:arrow-downward\")\n container.style.color = \"var(--primary-color)\"\n indexSpan.style.display = \"inline\"\n } else if (this.sortOrder == \"desc\") {\n this.sortOrder = \"\"\n sortBtn.setAttribute(\"icon\", \"icons:swap-vert\")\n container.style.color = \"var(--disabled-text-color)\"\n indexSpan.style.display = \"none\"\n this.sortIndex = -1\n }\n\n // sort the table.\n this.table.sort(this.sortOrder, this.field)\n }\n }\n\n setIndex(index) {\n let sortBtn = this.shadowRoot.querySelector(\"iron-icon\")\n let indexSpan = this.shadowRoot.querySelector(\"#index\")\n let container = this.shadowRoot.querySelector(\"#container\")\n\n if(index == -1){\n this.sortOrder = \"\"\n sortBtn.setAttribute(\"icon\", \"icons:swap-vert\")\n container.style.color = \"var(--disabled-text-color)\"\n this.sortIndex = -1\n indexSpan.innerHTML =\"\"\n indexSpan.style.display = \"none\"\n }else{\n this.sortIndex = index\n indexSpan.innerHTML = index + 1\n indexSpan.style.display = \"inline\"\n }\n }\n}\n\ncustomElements.define('globular-table-sorter', TableSorter)\n\n\n/**\n * The table\n */\nexport class Table extends HTMLElement {\n // attributes.\n\n // Create the applicaiton view.\n constructor(data) {\n\n super()\n\n // if data is not defined, create an empty array.\n if (data === undefined) {\n this._data = []\n } else {\n this._data = data\n }\n\n // Set the shadow dom.\n this.attachShadow({ mode: 'open' });\n }\n\n // The connection callback.\n connectedCallback() {\n\n this.displayIndex = false\n\n this.width = \"100%\"\n if (this.hasAttribute(\"width\")) {\n this.width = this.getAttribute(\"width\")\n }\n\n if (this.hasAttribute(\"display-index\")) {\n this.displayIndex = true\n }\n\n this.headerBackgroundColor = \"var(--background-color)\"\n if (this.hasAttribute(\"header-background-color\")) {\n this.headerBackgroundColor = this.getAttribute(\"header-background-color\")\n }\n\n this.headerTextColor = \"var(--text-primary-color)\"\n if (this.hasAttribute(\"header-text-color\")) {\n this.headerTextColor = this.getAttribute(\"header-text-color\")\n }\n\n if(this.hasAttribute(\"query\")){\n this.query = this.getAttribute(\"query\")\n }\n\n // Innitialisation of the layout.\n this.shadowRoot.innerHTML = `\n \n
\n
\n \n \n \n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n
\n\n
\n
\n
\n
\n \n
\n \n
\n `\n\n // Calculate the maximum scroll position based on the data\n this.tableContainer = this.shadowRoot.getElementById('table-container');\n this.table = this.shadowRoot.querySelector('table');\n\n /**\n * Export the data as json file\n */\n this.shadowRoot.querySelector(\"#export-json\").onclick = () => {\n\n let filename = this.getTitle()\n if (filename == \"\") {\n filename = \"data\"\n }\n filename = filename.replace(/ /g, \"_\")\n filename = filename.toLowerCase()\n filename += \".json\"\n\n exportToJsonFile(this.getData(), filename)\n }\n\n /**\n * Export the data as csv file\n */\n this.shadowRoot.querySelector(\"#export-csv\").onclick = () => {\n let filename = this.getTitle()\n if (filename == \"\") {\n filename = \"data\"\n }\n filename = filename.replace(/ /g, \"_\")\n filename = filename.toLowerCase()\n filename += \".csv\"\n\n exportToCsvFile(this.getData(), filename)\n }\n\n /**\n * Clear the sorters\n */\n this.shadowRoot.querySelector(\"#clear-sorters\").onclick = () => {\n this.clearSorters()\n }\n\n this.filterPanel = this.shadowRoot.getElementById('filter-panel');\n this.filterBtn = this.shadowRoot.getElementById('filter-btn');\n this.filter = this.shadowRoot.querySelector('globular-table-filter');\n\n // give the focus to the input.\n this.filterBtn.onclick = () => {\n this.filterPanel.toggle();\n }\n\n\n if (this.hasAttribute(\"width\")) {\n setResizeable(this.tableContainer, (width, height) => {\n this.width = width + \"px\"\n this.table.style.width = this.width\n\n // set the height of the fake scroll and the table body\n this.visibleDataCount = Math.floor(height / this.rowHeight) - 1\n\n // so here i will set the size from the local storage.\n if (this.hasAttribute(\"id\")) {\n let id = this.getAttribute(\"id\")\n localStorage.setItem(id + \"_width\", this.width)\n localStorage.setItem(id + \"_visible_data_count\", this.visibleDataCount)\n }\n\n this.resize()\n })\n }\n\n\n this.tableBody = this.shadowRoot.getElementById('table-body');\n this.tableHeader = this.shadowRoot.getElementById('table-header');\n\n // Those will be used to determine when to load the next batch of data\n this.fakeScrool = this.shadowRoot.getElementById('fake-scroll');\n this.fakeScroolDiv = this.shadowRoot.getElementById('fake-scroll-div');\n\n this.fakeScrool.onscroll = (evt) => {\n var scrollPosition = evt.target.scrollTop;\n\n // Calculate the index of the first visible row based on the scroll position\n var firstVisibleRowIndex = Math.floor(scrollPosition / this.rowHeight);\n\n // Update the table with the new data\n if (firstVisibleRowIndex + this.visibleDataCount > this.getTotalDataCount()) {\n this.loadDataInRange(firstVisibleRowIndex, this.getTotalDataCount() - 1);\n } else {\n this.loadDataInRange(firstVisibleRowIndex, firstVisibleRowIndex + this.visibleDataCount);\n }\n };\n\n // transform the mouse wheel event into a scroll event.\n this.tableBody.onmousewheel = (event) => {\n // Cross-browser compatibility for scroll delta\n const scrollDelta = Math.max(-1, Math.min(1, (event.wheelDelta || -event.detail)));\n\n // Adjust the scroll position of the target div\n this.fakeScrool.scrollTop += scrollDelta * 30; // You can adjust the scrolling speed here\n\n // Prevent the default scroll behavior of the source div\n event.preventDefault();\n };\n\n this.visibleDataCount = 20; // Number of rows visible at a time\n if (this.hasAttribute(\"visible-data-count\")) {\n this.visibleDataCount = parseInt(this.getAttribute(\"visible-data-count\"))\n }\n\n // set the data if it is already defined.\n if (this._data.length > 0) {\n this.setData(this._data)\n }\n }\n\n getTitle() {\n let slot = this.shadowRoot.querySelector('slot[name=\"title\"]');\n let nodes = slot.assignedNodes();\n if (nodes.length > 0) {\n return nodes[0].textContent\n } else {\n return \"\"\n }\n }\n\n resize() {\n\n if (this.hasAttribute(\"id\")) {\n let id = this.getAttribute(\"id\")\n let width = localStorage.getItem(id + \"_width\")\n if (width !== null) {\n this.width = width\n this.table.style.width = this.width\n }\n let visibleDataCount = localStorage.getItem(id + \"_visible_data_count\")\n if (visibleDataCount !== null) {\n this.visibleDataCount = parseInt(visibleDataCount)\n }\n }\n\n let visibleDataCount = this.visibleDataCount\n if (this.getTotalDataCount() < visibleDataCount) {\n visibleDataCount = this.getTotalDataCount()\n }\n\n this.loadDataInRange(this.currentIndex, this.currentIndex + this.visibleDataCount)\n this.fakeScroolDiv.style.height = `${(this.getTotalDataCount() + 1) * this.rowHeight}px`\n\n // I will get the number of actual rows.\n let rows = this.tableBody.querySelectorAll(\"tr\")\n if (rows.length >= this.visibleDataCount) {\n this.tableContainer.style.height = `${(this.visibleDataCount + 1) * this.rowHeight}px`;\n }\n\n }\n\n getTotalDataCount() {\n return this.getData().length\n }\n\n loadRow(index) {\n let newRow = document.createElement('tr')\n newRow.setAttribute(\"index\", index)\n let data = this.getData()[index]\n if (!data) {\n console.log(\"fail to read data at index \" + index)\n return\n }\n\n // now i will get the list of fields from the header.\n let headers = this.tableHeader.querySelectorAll(\"th\")\n\n for (var i = 0; i < headers.length; i++) {\n let property = headers[i].field\n let cell = document.createElement('td')\n if (data[property] != undefined) {\n let value = data[property]\n if (typeof value === 'object') {\n if (value instanceof Date) {\n if (headers[i].firstChild.hasAttribute(\"format\")) {\n let format = headers[i].firstChild.getAttribute(\"format\")\n value = formatDateTimeCustom(value, format)\n } else {\n value = value.toLocaleString()\n }\n } else {\n value = JSON.stringify(value)\n }\n }\n if (property == \"_index\") {\n value = data[property] + 1\n }\n cell.innerHTML = value\n\n } else {\n const functionName = property;\n const functionToCall = window[functionName]; // If the function is in the global scope\n if (typeof functionToCall === 'function') {\n const person = data;\n data[property] = functionToCall(person);\n cell.innerHTML = data[property].toString()\n } else {\n console.error(`${functionName} is not a valid function.`);\n }\n }\n newRow.appendChild(cell)\n \n cell.addEventListener('click', (event) => {\n let data = this.getData()[index]\n this.dispatchEvent(new CustomEvent('row-click', { detail: data }));\n })\n }\n this.tableBody.appendChild(newRow);\n }\n\n initHeader(data) {\n this.tableHeader.innerHTML = \"\"\n let id = \"\"\n\n // set the id of the table\n if (!this.hasAttribute(\"id\")) {\n for (var property in data) {\n id += property + \" \"\n }\n id = \"_\" + getUuidByString(id)\n this.setAttribute(\"id\", id)\n } else {\n id = this.getAttribute(\"id\")\n }\n\n // the index column.\n if (this.displayIndex) {\n let cell = document.createElement('th')\n cell.innerHTML = \"#\"\n cell.field = \"_index\"\n this.tableHeader.appendChild(cell)\n cell.setAttribute(\"id\", id + \"_index\")\n if (localStorage.getItem(id + \"_index_width\")) {\n cell.style.width = localStorage.getItem(id + \"_index_width\")\n }\n\n let sorter = new TableSorter(this, \"_index\")\n cell.appendChild(sorter)\n }\n\n // Now add the other columns. \n let fields = []\n // Select the slot and retrieve its assigned nodes (child elements)\n const fieldsSlot = this.shadowRoot.querySelector('slot[name=\"fields\"]');\n\n // Filter out the actual elements from the assigned nodes\n const fields_ = Array.from(fieldsSlot.assignedNodes()).filter(node => node instanceof Element);\n\n if ((fields_.length == 0)) {\n for (var property in data) {\n let span = document.createElement('span')\n span.setAttribute(\"field\", property)\n span.innerHTML = property\n fields.push(span)\n }\n } else {\n if (fields_.length > 0) {\n for (var i = 0; i < fields_.length; i++) {\n let field = fields_[i].getAttribute(\"field\")\n if (data[field]) {\n fields.push(deepCloneSpan(fields_[i]))\n } else if (window[field]) {\n if (this._data.filter(d => d._visible == false).length == 0)\n fields.push(deepCloneSpan(fields_[i]))\n }\n }\n }\n }\n\n // Now add the other columns.\n for (var i = 0; i < fields.length; i++) {\n let property = fields[i].getAttribute(\"field\")\n let cell = document.createElement('th')\n\n cell.setAttribute(\"id\", id + \"_\" + property)\n cell.field = property\n\n cell.appendChild(fields[i])\n this.tableHeader.appendChild(cell)\n if (localStorage.getItem(id + \"_\" + property + \"_width\")) {\n cell.style.width = localStorage.getItem(id + \"_\" + property + \"_width\")\n }\n\n let sorter = new TableSorter(this, property)\n cell.appendChild(sorter)\n }\n\n // Add the resize handles\n let isResizing = false;\n let startX, startWidth, header;\n const headers = this.tableHeader.querySelectorAll('th');\n\n // set the row height from actual table header.\n if (this.hasAttribute(\"row-height\")) {\n this.rowHeight = parseInt(this.getAttribute(\"row-height\"))\n } else {\n this.rowHeight = this.tableHeader.offsetHeight\n }\n\n this.tableHeader.style.height = this.rowHeight + \"px\"\n\n headers.forEach((th) => {\n const resizeHandle = document.createElement('div');\n resizeHandle.className = 'resize-handle';\n th.appendChild(resizeHandle);\n th.onmousedown = (event) => {\n const threshold = 5; // Adjust this value as needed\n const distanceFromRight = th.getBoundingClientRect().right - event.clientX;\n if (distanceFromRight <= threshold) {\n header = th;\n startX = event.clientX;\n startWidth = th.clientWidth;\n isResizing = true;\n document.addEventListener('mousemove', handleMouseMove);\n document.addEventListener('mouseup', handleMouseUp);\n this.style.cursor = 'col-resize';\n }\n };\n });\n\n const handleMouseMove = (event) => {\n if (!isResizing) return;\n const width = startWidth + (event.clientX - startX);\n header.style.width = width + 'px';\n\n // so here will set the width in the local storage.\n if (header.hasAttribute(\"id\")) {\n let id = header.getAttribute(\"id\")\n localStorage.setItem(id + \"_width\", width + \"px\")\n }\n };\n\n const handleMouseUp = () => {\n isResizing = false;\n document.removeEventListener('mousemove', handleMouseMove);\n document.removeEventListener('mouseup', handleMouseUp);\n this.style.cursor = 'default';\n };\n\n this.resize()\n\n }\n\n loadDataInRange(firstVisibleRowIndex, lastVisibleRowIndex) {\n this.currentIndex = firstVisibleRowIndex;\n\n if (this.tableHeader.querySelectorAll(\"th\").length == 0) {\n // init the header.\n this.initHeader(this.getData()[0])\n\n // get the last visible row index from the local storage.\n let id = this.getAttribute(\"id\")\n if (localStorage.getItem(id + \"_visible_data_count\")) {\n lastVisibleRowIndex = parseInt(localStorage.getItem(id + \"_visible_data_count\"))\n }\n }\n\n // Check if the data is already loaded for the visible rows\n this.tableBody.innerHTML = \"\"\n lastVisibleRowIndex = Math.min(lastVisibleRowIndex, this.getData().length);\n for (var i = firstVisibleRowIndex; i <= lastVisibleRowIndex - 1; i++) {\n this.loadRow(i);\n }\n }\n\n getData() {\n let data = this._data.filter(d => d._visible)\n\n return data\n }\n\n setFiltredData(data) {\n if (data == null) {\n this._data.forEach(d => {\n d._visible = true\n })\n this.initHeader(this._data[0])\n this.shadowRoot.querySelector(\"#filter-btn\").style.color = \"\"\n } else if (data.length == 0) {\n this._data.forEach(d => {\n d._visible = false\n })\n this.initHeader(this._data[0])\n this.shadowRoot.querySelector(\"#filter-btn\").style.color = \"\"\n } else {\n\n this._data.forEach(d => {\n d._visible = false\n })\n\n data.forEach(d => {\n this._data[d._index]._visible = true\n })\n this.initHeader(data[0])\n this.shadowRoot.querySelector(\"#filter-btn\").style.color = \"var(--on-primary-color)\"\n }\n\n this.tableBody.innerHTML = \"\"\n this.currentIndex = 0\n\n this.loadDataInRange(this.currentIndex, this.visibleDataCount)\n this.resize()\n }\n\n setData(data) {\n\n this._data = data\n\n if (data.length > 0) {\n this.initHeader(this._data[0])\n }\n\n this._data.forEach((d, index) => {\n d._index = index\n d._visible = true\n\n // so here i must initialyze computed fields.\n let headers = this.tableHeader.querySelectorAll(\"th\")\n for (var i = 0; i < headers.length; i++) {\n let property = headers[i].field\n if (window[property]) {\n d[property] = window[property](d)\n }\n }\n })\n\n this.filter.setTable(this, data[0])\n\n this.tableBody.innerHTML = \"\"\n this.currentIndex = 0\n this.loadDataInRange(this.currentIndex, this.visibleDataCount)\n this.resize()\n this.filter.update()\n }\n\n clearSorters() {\n let sorters = Array.from(this.tableHeader.querySelectorAll(\"globular-table-sorter\"))\n sorters.forEach(s => {\n s.setIndex(-1)\n })\n this._data = orderBy(this._data, [\"_index\"], [\"asc\"])\n this.resize()\n }\n\n // Now i will sort the table.\n sort(order, field) {\n\n // Here i will list of active filters...\n let sorters = Array.from(this.tableHeader.querySelectorAll(\"globular-table-sorter\")).filter(item => item.sortIndex != -1);\n let sorter = this.shadowRoot.querySelector(\"#_\" + getUuidByString(field))\n\n if (order != \"\") {\n // here i will test if the sorter is already in the list.\n let index = sorters.findIndex(s => s.id == sorter.id)\n if (index == -1) {\n sorters.push(sorter)\n }\n sorter.setIndex(sorters.length - 1)\n } else {\n if (sorters.length == 0) {\n this._data = orderBy(this._data, [\"_index\"], [\"asc\"])\n this.resize()\n return\n }\n }\n\n sorters.sort((a, b) => {\n return a.sortIndex - b.sortIndex\n })\n\n // set the index.\n sorters.forEach((s, index) => {\n s.setIndex(index)\n })\n\n // Now i will sort the table.\n this._data = orderBy(this._data, sorters.map(s => s.field), sorters.map(s => s.sortOrder))\n this.resize()\n\n }\n}\n\ncustomElements.define('globular-table', Table)","\nimport { v4 as uuidv4 } from \"uuid\";\nimport { fireResize } from \"./utility\"\nimport getUuidByString from \"uuid-by-string\"\n\nexport class EditableStringList extends HTMLElement {\n // attributes.\n\n // Create the applicaiton view.\n constructor(list) {\n super()\n // Set the shadow dom.\n this.attachShadow({ mode: 'open' });\n\n // Innitialisation of the layout.\n this.shadowRoot.innerHTML = `\n \n \n
\n \n
\n
\n
\n \n `\n // give the focus to the input.\n let stringListDiv = this.shadowRoot.querySelector(\".string-list\")\n let range = document.createRange()\n stringListDiv.onclick = () => {\n this.blur()\n }\n\n\n this.shadowRoot.querySelector(\"#add-item-btn\").onclick = () => {\n this.addItem(\"New value\", stringListDiv, range, true)\n }\n\n if (list != undefined) {\n list.forEach(item => {\n this.addItem(item, stringListDiv, range)\n })\n }\n }\n\n // Add item to the list.\n addItem(item, stringListDiv, range, edit) {\n let uuid = \"_\" + getUuidByString(item)\n let itemDiv = stringListDiv.querySelector(`#${uuid}`)\n if (itemDiv) {\n itemDiv.children[0].click()\n return\n }\n\n let html = `\n
\n ${item}\n \n \n
\n `\n\n let index = stringListDiv.children.length\n stringListDiv.appendChild(range.createContextualFragment(html))\n\n // I will set edit event...\n itemDiv = stringListDiv.children[index]\n let itemSpan = itemDiv.children[0]\n let itemInput = itemDiv.children[1]\n let removeBtn = itemDiv.children[2]\n\n // Delete the item.\n removeBtn.onclick = (evt) => {\n evt.stopPropagation()\n itemDiv.parentNode.removeChild(itemDiv)\n }\n\n itemSpan.onclick = (evt) => {\n evt.stopPropagation()\n for (var i = 0; i < stringListDiv.children.length; i++) {\n stringListDiv.children[i].children[0].style.display = \"block\"\n stringListDiv.children[i].children[1].style.display = \"none\"\n }\n itemInput.style.display = \"block\"\n itemInput.value = itemSpan.innerHTML\n itemSpan.style.display = \"none\"\n setTimeout(() => {\n itemInput.focus()\n itemInput.inputElement.inputElement.select()\n }, 100)\n fireResize()\n }\n\n itemInput.onkeyup = (evt) => {\n evt.stopPropagation()\n let key = evt.key;\n if (key == \"Escape\") {\n itemSpan.innerHTML = itemInput.value = item // set back to item...\n itemInput.style.display = \"none\"\n itemSpan.style.display = \"block\"\n }\n if (key == \"Enter\") {\n let uuid = \"_\" + getUuidByString(itemInput.value)\n itemDiv.id = uuid\n let count = 0;\n for (var i = 0; i < stringListDiv.children.length; i++) {\n if (stringListDiv.children[i].id == uuid) {\n count++\n }\n }\n\n if (count >= 1) {\n let itemDiv_ = stringListDiv.querySelector(\"#\" + uuid)\n itemDiv_.children[1].value = itemInput.value\n if (count > 1) {\n itemDiv.parentNode.removeChild(itemDiv)\n itemDiv_.children[0].click()\n return\n }\n }\n\n // save value\n itemSpan.innerHTML = itemInput.value\n itemInput.style.display = \"none\"\n itemSpan.style.display = \"block\"\n }\n }\n\n itemInput.onblur = () => {\n // make sure there not repetead values...\n let uuid = \"_\" + getUuidByString(itemInput.value)\n itemDiv.id = uuid\n itemSpan.innerHTML = itemInput.value\n let count = 0;\n for (var i = 0; i < stringListDiv.children.length; i++) {\n if (stringListDiv.children[i].id == uuid) {\n count++\n }\n }\n\n if (count >= 1) {\n let itemDiv_ = stringListDiv.querySelector(\"#\" + uuid)\n itemDiv_.children[1].value = itemInput.value\n if (count > 1) {\n itemDiv.parentNode.removeChild(itemDiv)\n itemDiv_.children[0].click()\n return\n }\n }\n }\n\n if (edit) {\n itemSpan.click()\n }\n\n }\n\n blur() {\n let inputs = this.shadowRoot.querySelectorAll(\"paper-input\")\n for (var i = 0; i < inputs.length; i++) {\n inputs[i].style.display = \"none\"\n inputs[i].parentNode.children[0].style.display = \"block\"\n }\n }\n\n getItems() {\n let spans = this.shadowRoot.querySelectorAll(\".items\")\n let items = []\n for (var i = 0; i < spans.length; i++) {\n items.push(spans[i].innerHTML)\n }\n\n return items;\n }\n\n setItems(items) {\n let stringListDiv = this.shadowRoot.querySelector(\".string-list\")\n stringListDiv.innerHTML = \"\"\n items.forEach(item => {\n this.addItem(item, stringListDiv, document.createRange())\n })\n }\n\n setValues(values) {\n this.setItems(values)\n }\n\n getValues() {\n return this.getItems()\n }\n}\n\ncustomElements.define('globular-editable-string-list', EditableStringList)\n\n\n/**\n * String seach listbox.\n */\nexport class SearchableList extends HTMLElement {\n // attributes.\n\n // Create the applicaiton view.\n constructor(title, list, ondeleteitem, onadditem, onadd) {\n super()\n\n // handler...\n this.ondeleteitem = ondeleteitem;\n this.onadditem = onadditem;\n\n // Set the shadow dom.\n this.attachShadow({ mode: 'open' });\n this.list = list\n this.title = title\n\n // Innitialisation of the layout.\n this.shadowRoot.innerHTML = `\n \n \n
\n ${title} (${list.length})\n
\n
\n \n \n
\n
\n \n
\n
\n
\n \n \n `\n\n this.listDiv = this.shadowRoot.querySelector(\"#items-div\")\n let shadowDiv = this.shadowRoot.querySelector(\"#shadow-div\")\n\n // set the header shadow...\n this.listDiv.onscroll = () => {\n if (this.listDiv.scrollTop == 0) {\n shadowDiv.style.boxShadow = \"\"\n } else {\n shadowDiv.style.boxShadow = \"inset 0px 5px 6px -3px rgb(0 0 0 / 40%)\"\n }\n }\n\n // Here I will display the filter input.\n let filterInput = this.shadowRoot.querySelector(\"paper-input\")\n this.filter_ = \"\"\n filterInput.onkeyup = () => {\n this.filter_ = filterInput.value;\n this.displayItems()\n }\n\n // Call the on add function\n let addBtn = this.shadowRoot.querySelector(\"#action-add-btn\")\n if (onadd != undefined) {\n addBtn.onclick = () => {\n onadd(this.list)\n }\n }\n\n // Here I will create the action list...\n this.displayItems()\n }\n\n // Return the header div.\n getHeader() {\n return this.shadowRoot.querySelector(\"#header-div\")\n }\n\n // That function can be overide, assume a string by default\n filter(item) {\n return item.toUpperCase().indexOf(this.filter_.toUpperCase()) != -1\n }\n\n // The sort items function\n sortItems() {\n return this.list.sort()\n }\n\n\n hideTitle() {\n this.shadowRoot.querySelector(\".title\").style.display = \"none\";\n }\n\n // The function that display one item.\n displayItem(item) {\n let uuid = \"_\" + uuidv4();\n let html = `\n
\n
${item}
\n \n
`\n\n let div = document.createRange().createContextualFragment(html)\n let deleteBtn = div.querySelector(\"paper-icon-button\")\n\n if (this.ondeleteitem != undefined) {\n deleteBtn.onclick = () => {\n // remove the div...\n let div = this.shadowRoot.querySelector(\"#\" + uuid)\n div.parentNode.removeChild(div)\n this.ondeleteitem(item)\n }\n } else {\n deleteBtn.style.display = \"none\"\n }\n\n return div\n }\n\n // That function display items.\n displayItems() {\n // clean up the list of items.\n this.listDiv.innerHTML = \"\"\n\n this.sortItems().forEach((item) => {\n\n let div = this.displayItem(item)\n\n if (this.filter(item) || this.filter_.length == 0) {\n this.listDiv.appendChild(div)\n }\n\n })\n }\n\n removeItem(str) {\n this.list = this.list.filter(el => el !== str)\n let titleDiv = this.shadowRoot.querySelector(\".title\")\n titleDiv.innerHTML = `${this.title} (${this.list.length})`\n this.displayItems()\n }\n\n appendItem(item) {\n this.list.push(item)\n let titleDiv = this.shadowRoot.querySelector(\".title\")\n titleDiv.innerHTML = `${this.title} (${this.list.length})`\n this.displayItems()\n }\n\n}\n\ncustomElements.define('globular-searchable-list', SearchableList)","\n/**\n * This function is used to fire a resize event in the window.\n */\nexport function fireResize() {\n if (document.createEvent) {\n // W3C\n var ev = document.createEvent('Event');\n ev.initEvent('resize', true, true);\n window.dispatchEvent(ev);\n } else {\n // IE\n var event = document.createEventObject();\n document.fireEvent(\"onresize\", event);\n }\n};\n\n/**\n * That propertie take a div and append resizeable capabilities.\n */\nexport function setResizeable(div, onresize, side, zIndex, headerHeight = 0) {\n\n window.addEventListener(\"resize\", (evt) => {\n let w = window.innerWidth;\n\n if (div.style.position == \"fixed\" && div.offsetWidth > 0 && div.offsetHeight > 0) {\n\n if (w < 500 && div.style.width != \"100vw\") {\n div.style.width = \"100vw\"\n } else if (div.style.width == \"100vw\" && w > 500 && w > div.maxWidth && div.maxWidth > 0) {\n div.style.width = div.maxWidth + \"px\"\n div.style.height = \"auto\"\n }\n\n if (div.hasAttribute(\"name\")) {\n let id = div.getAttribute(\"name\")\n localStorage.setItem(`__${id}_dimension__`, JSON.stringify({ width: div.offsetWidth, height: div.offsetHeight }))\n }\n\n onresize(div.offsetWidth, div.offsetHeight)\n }\n })\n\n\n // here I will stop resize...\n let w = window.innerWidth;\n if (w < 500) {\n if (div.style.position == \"fixed\") {\n div.style.width = \"100vw\"\n }\n } else {\n let id = div.getAttribute(\"name\")\n if (localStorage.getItem(`__${id}_dimension__`)) {\n let dimension = JSON.parse(localStorage.getItem(`__${id}_dimension__`))\n if (dimension.width > 0 && dimension.height > 0) {\n div.style.width = dimension.width + \"px\"\n div.style.height = dimension.height + \"px\"\n } else {\n div.style.width = div.maxWidth + \"px\"\n }\n }\n }\n\n // resizeable by right side...\n if (side == undefined) {\n side = \"right\"\n }\n\n if (zIndex == undefined) {\n zIndex = 100\n }\n\n // keep movable attribute in the div itself.\n div.isResizeWidth = false;\n div.isResizeHeigth = false;\n div.isOverResizeWidthDiv = false;\n div.isOverResizeHeihtgDiv = false;\n div.isOverResizeDiv = false;\n\n // first of all I will create the resize divs...\n var resizeWidthDiv = document.createElement(\"div\")\n resizeWidthDiv.id = \"resize-with-div\"\n resizeWidthDiv.style.position = \"absolute\"\n resizeWidthDiv.style.top = \"0px\"\n resizeWidthDiv.style.bottom = \"5px\"\n resizeWidthDiv.style.width = \"5px\"\n\n if (side == \"right\")\n resizeWidthDiv.style.right = \"-1px\"\n else\n resizeWidthDiv.style.left = \"-1px\"\n\n resizeWidthDiv.style.zIndex = zIndex\n\n div.appendChild(resizeWidthDiv)\n div.resizeWidthDiv = resizeWidthDiv\n\n resizeWidthDiv.onmouseover = function () {\n this.style.cursor = \"ew-resize\"\n this.style.borderRight = \"5px solid darkgrey\"\n }\n\n resizeWidthDiv.onmouseout = function () {\n this.style.cursor = \"default\"\n this.style.borderRight = \"\"\n }\n\n var resizeHeightDiv = document.createElement(\"div\")\n resizeHeightDiv.id = \"resize-height-div\"\n resizeHeightDiv.style.position = \"absolute\"\n resizeHeightDiv.style.height = \"5px\"\n resizeHeightDiv.style.left = \"0px\"\n resizeHeightDiv.style.right = \"5px\"\n resizeHeightDiv.style.bottom = \"-1px\"\n resizeHeightDiv.style.zIndex = zIndex\n\n div.appendChild(resizeHeightDiv)\n div.resizeHeightDiv = resizeHeightDiv\n\n resizeHeightDiv.onmouseover = function () {\n this.style.cursor = \"row-resize\"\n this.style.borderBottom = \"5px solid darkgrey\"\n }\n\n resizeHeightDiv.onmouseout = function () {\n this.style.cursor = \"default\"\n this.style.borderBottom = \"\"\n }\n\n var resizeDiv = document.createElement(\"div\")\n resizeDiv.id = \"resize-div\"\n resizeDiv.style.position = \"absolute\"\n resizeDiv.style.bottom = \"-1px\"\n if (side == \"right\") {\n resizeDiv.style.right = \"-1px\"\n } else {\n resizeDiv.style.left = \"-1px\"\n }\n resizeDiv.style.height = \"10px\"\n resizeDiv.style.width = \"10px\"\n resizeDiv.style.zIndex = 1000\n div.appendChild(resizeDiv)\n\n resizeDiv.onmouseover = function () {\n this.style.cursor = \"nwse-resize\"\n this.style.backgroundColor = \"lightgrey\"\n }\n\n resizeDiv.onmouseout = function () {\n this.style.cursor = \"default\"\n this.style.backgroundColor = \"\"\n }\n\n resizeDiv.onmouseenter = function (div) {\n return function () {\n div.isOverResizeDiv = true;\n }\n }(div)\n\n resizeDiv.onmouseleave = function (div) {\n return function () {\n div.isOverResizeDiv = false;\n }\n }(div)\n\n resizeHeightDiv.onmouseenter = function (div) {\n return function () {\n div.isOverResizeHeihtgDiv = true;\n }\n }(div)\n\n resizeHeightDiv.onmouseleave = function (div) {\n return function () {\n div.isOverResizeHeihtgDiv = false;\n }\n }(div)\n\n resizeWidthDiv.onmouseenter = function (div) {\n return function () {\n div.isOverResizeWidthDiv = true;\n }\n }(div)\n\n resizeWidthDiv.onmouseleave = function (div) {\n return function () {\n div.isOverResizeWidthDiv = false;\n }\n }(div)\n\n document.body.addEventListener(\"pointerup\", function (div) {\n return function (e) {\n div.isResizeWidth = false;\n div.isResizeHeigth = false;\n document.body.style.cursor = \"default\"\n\n // fire resize event at start...\n var evt = document.createEvent('HTMLEvents');\n evt.initEvent('resize', true, false);\n div.dispatchEvent(evt);\n\n // remove the cover div...\n var coverDiv = document.body.querySelector(\"#cover-div\")\n if (coverDiv) {\n document.body.removeChild(coverDiv)\n }\n\n }\n }(div))\n\n document.body.addEventListener(\"pointerdown\", function (div) {\n return function (e) {\n\n let setCoverDiv = () => {\n // create a cover div on the window to block the mouse events...\n var coverDiv = document.createElement(\"div\")\n coverDiv.id = \"cover-div\"\n coverDiv.style.position = \"fixed\"\n coverDiv.style.top = \"0px\"\n coverDiv.style.left = \"0px\"\n coverDiv.style.width = \"100vw\"\n coverDiv.style.height = \"100vh\"\n coverDiv.style.zIndex = 1\n coverDiv.style.backgroundColor = \"rgba(0,0,0,.25)\"\n document.body.appendChild(coverDiv)\n }\n\n if (div.isOverResizeWidthDiv) {\n div.isResizeWidth = true;\n setCoverDiv()\n }\n\n if (div.isOverResizeHeihtgDiv) {\n div.isResizeHeigth = true;\n setCoverDiv()\n }\n\n if (div.isOverResizeDiv) {\n div.isResizeWidth = true;\n div.isResizeHeigth = true;\n setCoverDiv()\n }\n }\n }(div))\n\n function getOffsetLeft(elem) {\n var offsetLeft = 0;\n do {\n if (!isNaN(elem.offsetLeft)) {\n offsetLeft += elem.offsetLeft;\n }\n } while (elem = elem.offsetParent);\n return offsetLeft;\n }\n\n\n function getOffsetTop(elem) {\n var offsetTop = 0;\n do {\n if (!isNaN(elem.offsetTop)) {\n offsetTop += elem.offsetTop;\n }\n } while (elem = elem.offsetParent);\n return offsetTop;\n }\n\n\n let moveHandler = (e) => {\n\n if (window.innerWidth < 500) {\n if (div.style.position == \"fixed\") {\n div.style.width = \"100vw\"\n onresize(div.offsetWidth, div.offsetHeight)\n }\n if (div.isResizeHeigth || div.isResizeWidth)\n fireResize()\n\n return\n }\n\n if (e.touches) {\n e.clientX = e.touches[0].clientX\n e.clientY = e.touches[0].clientY\n }\n\n var w = e.clientX - getOffsetLeft(div);\n var h = e.clientY - getOffsetTop(div);\n\n // Adjust height calculation to account for the headerHeight\n h -= headerHeight;\n\n\n // stop resize\n if (div.maxWidth > 0) {\n if (w > div.maxWidth + 5) {\n onresize(div.offsetWidth, div.offsetHeight)\n return;\n }\n }\n\n if (div.isResizeWidth && div.isResizeHeigth) {\n div.style.width = w + \"px\"\n div.style.height = h + \"px\"\n if (onresize) {\n onresize(div.offsetWidth, div.offsetHeight)\n\n }\n } else if (div.isResizeWidth) {\n if (div.offsetWidth > w) {\n document.body.style.cursor = \"w-resize\"\n } else if (div.offsetWidth < w) {\n document.body.style.cursor = \"e-resize\"\n } else {\n document.body.style.cursor = \"ew-resize\"\n }\n div.style.width = w + \"px\"\n if (onresize) {\n onresize(div.offsetWidth, div.offsetHeight)\n }\n } else if (div.isResizeHeigth) {\n if (div.offsetHeight > h) {\n document.body.style.cursor = \"n-resize\"\n } else if (div.offsetHeight < h) {\n document.body.style.cursor = \"s-resize\"\n } else {\n document.body.style.cursor = \"ns-resize\"\n }\n div.style.height = h + \"px\"\n if (onresize) {\n onresize(div.offsetWidth, div.offsetHeight)\n }\n }\n if (div.isResizeHeigth || div.isResizeWidth)\n fireResize()\n }\n\n // Here I will resize the div as needed.\n document.body.addEventListener(\"mousemove\", moveHandler)\n\n}","import '@polymer/iron-icons/iron-icons.js';\nimport '@polymer/paper-icon-button/paper-icon-button.js';\nimport '@polymer/paper-input/paper-input.js';\nimport '@polymer/paper-card/paper-card.js';\nimport '@polymer/paper-button/paper-button.js';\nimport '@polymer/paper-checkbox/paper-checkbox.js';\nimport '@polymer/paper-badge/paper-badge.js';\nimport '@polymer/paper-tooltip/paper-tooltip.js';\nimport '@polymer/paper-radio-button/paper-radio-button.js';\nimport '@polymer/paper-radio-group/paper-radio-group.js';\nimport '@polymer/paper-toggle-button/paper-toggle-button.js';\nimport '@polymer/paper-spinner/paper-spinner.js';\n\nimport { fireResize } from './utility';\nimport { Backend } from '../backend/backend';\n\n/**\n * Search Box\n */\nexport class Wizard extends HTMLElement {\n // attributes.\n\n // Create the applicaiton view.\n constructor(width) {\n super()\n // Set the shadow dom.\n this.attachShadow({ mode: 'open' });\n\n // The list of page.\n this.pages = [];\n\n // The list of steps buttons.\n this.stepsButton = [];\n\n // the page content.\n this.content = null;\n\n // the div where action are listed.\n this.stepsDiv = null;\n\n // the last page to display before closing the wizard\n this.summaryPage = null;\n\n // the initial width\n this.width = width;\n\n if (width > screen.width) {\n // the initial width\n this.width = screen.width\n }\n\n // the current index.\n this.index = 0;\n\n // A function pointer call we the all is done\n this.ondone = null;\n\n // A function call before close the wizard\n this.onclose = null;\n\n\n // Innitialisation of the layout.\n this.shadowRoot.innerHTML = `\n \n\n
\n\n
\n
\n \n
\n \n \n\n
\n\n
\n \n previous\n next\n Done\n Close\n
\n
\n `\n this.container = this.shadowRoot.getElementById(\"container\")\n this.content = this.shadowRoot.getElementById(\"content\")\n this.pagesDiv = this.shadowRoot.getElementById(\"pages\")\n this.stepsDiv = this.shadowRoot.getElementById(\"card-actions\")\n this.stepsNumberDiv = this.shadowRoot.getElementById(\"step-numbers\")\n\n this.container.style.width = this.width + \"px\"\n this.container.style.overflow = \"hidden\"\n\n // Action \n this.nexBtn = this.shadowRoot.getElementById(\"next_btn\")\n this.previousBtn = this.shadowRoot.getElementById(\"previous_btn\")\n this.doneBtn = this.shadowRoot.getElementById(\"done_btn\")\n this.closeBtn = this.shadowRoot.getElementById(\"close_btn\")\n\n // go to next page.\n this.nexBtn.onclick = () => {\n this.next()\n }\n\n this.previousBtn.onclick = () => {\n this.previous()\n }\n\n\n this.doneBtn.onclick = () => {\n // hide the content.\n this.nexBtn.style.display = \"none\"\n this.previousBtn.style.display = \"none\"\n this.doneBtn.style.display = \"none\"\n this.stepsNumberDiv.style.display = \"none\"\n this.pagesDiv.style.display = \"none\"\n this.pagesDiv.style.transform = `translate(0px)`\n // Show the close btn.\n this.closeBtn.style.display = \"block\"\n\n // append the summary page.\n let summaryPage = this.querySelector(\"#summary_page\")\n if (summaryPage) {\n summaryPage.style.display = \"block\"\n }\n\n if (this.ondone != null) {\n this.ondone(summaryPage)\n }\n }\n\n // Close the wizard.\n this.closeBtn.onclick = () => {\n this.parentNode.removeChild(this)\n if (this.onclose != null) {\n this.onclose()\n }\n }\n\n window.addEventListener(\"resize\",\n (evt) => {\n if(this.parentNode == null){\n return\n }\n\n let w = document.offsetWidth\n \n // set the width of the container.\n this.width = this.parentNode.offsetWidth\n \n\n // TODO try to set it in the css propertie instead...\n if (w < 500) {\n this.container.style.width = screen.width + \"px\"\n if (this.summaryPage)\n this.summaryPage.style.width = this.summaryPage.style.maxWidth = this.summaryPage.style.minWidth = this.width + \"px\"\n\n this.pages.forEach(p => {\n p.style.width = p.style.maxWidth = p.style.minWidth = this.width + \"px\"\n })\n } else {\n this.container.style.width = this.width + \"px\"\n //this.container.style.height = this.height + \"px\"\n if (this.summaryPage)\n this.summaryPage.style.width = this.summaryPage.style.maxWidth = this.summaryPage.style.minWidth = this.width + \"px\"\n\n this.pages.forEach(p => {\n p.style.width = p.style.maxWidth = p.style.minWidth = this.width + \"px\"\n })\n }\n })\n\n }\n\n connectedCallback() {\n \n fireResize()\n }\n\n // The first page of the wizard to explain what will follow.\n getPage(index) {\n return this.pages[index];\n }\n\n // Use it to get elment from inside wizard dom.\n getElementById(id) {\n return this.shadowRoot.getElementById(id)\n }\n\n // Return list of element by their classname.\n getElementsByClassName(className) {\n return this.shadowRoot.querySelectorAll(\".\" + className)\n }\n\n // Set the summary page.\n setSummaryPage(content) {\n content.style.padding = \"15px\"\n\n this.summaryPage = document.createElement(\"div\")\n this.summaryPage.id = \"summary_page\"\n this.summaryPage.style.width = this.width + \"px\"\n this.summaryPage.style.display = \"none\"\n this.summaryPage.slot = \"summary_page\"\n this.summaryPage.appendChild(content)\n\n this.appendChild(this.summaryPage)\n }\n\n // Append a configuration page.\n appendPage(content) {\n\n // Create the page div.\n let page = document.createElement(\"div\")\n page.className = \"wizard-page\"\n content.style.padding = \"15px\"\n page.id = \"page_\" + this.pages.length + 1\n\n page.style.maxWidth = page.style.minWidth = this.width + \"px\"\n\n page.appendChild(content)\n\n // Append the content to the slot...\n this.appendChild(page)\n\n let stepNumberBtn = document.createElement(\"div\")\n stepNumberBtn.className = \"step-number\"\n stepNumberBtn.innerHTML = `\n ${this.pages.length + 1}\n `\n\n stepNumberBtn.index = this.pages.length\n\n this.stepsNumberDiv.appendChild(stepNumberBtn)\n if (stepNumberBtn.index == 0) {\n stepNumberBtn.classList.add(\"active\")\n }\n\n this.pages.push(/*this.content.lastElementChild*/ page)\n\n this.stepsButton.push(stepNumberBtn)\n\n // set the step number button action.\n stepNumberBtn.onclick = () => {\n if (!stepNumberBtn.classList.contains(\"active\") && !stepNumberBtn.classList.contains(\"disable\")) {\n return;\n }\n\n this.index = stepNumberBtn.index\n\n for (var i = 0; i < this.pages.length; i++) {\n if (this.stepsButton[i].classList.contains(\"active\") || this.stepsButton[i].classList.contains(\"disable\")) {\n this.stepsButton[i].classList.remove(\"active\")\n this.stepsButton[i].classList.add(\"disable\")\n }\n }\n\n this.stepsButton[this.index].classList.add(\"active\")\n this.pagesDiv.style.transform = `translate(${this.index * this.width * -1}px)`\n\n // show the next button.\n if (this.index < this.pages.length - 1 && this.pages.length > 1) {\n this.nexBtn.style.display = \"block\"\n } else {\n this.nexBtn.style.display = \"none\"\n }\n\n // show the close button\n if (this.index == this.pages.length - 1) {\n this.nexBtn.style.display = \"none\"\n this.doneBtn.style.display = \"block\"\n } else {\n this.doneBtn.style.display = \"none\"\n }\n\n // show the previous button\n if (this.index > 0 && this.pages.length > 1) {\n this.previousBtn.style.display = \"block\";\n } else {\n this.previousBtn.style.display = \"none\";\n }\n }\n\n }\n\n disableNextBtn() {\n this.nexBtn.setAttribute(\"disabled\")\n }\n\n enableNextBtn() {\n this.nexBtn.removeAttribute(\"disabled\")\n }\n\n /**\n * Display the next page.\n */\n next() {\n\n if (this.index < this.pages.length - 1) {\n this.index++\n this.nexBtn.style.display = \"block\"\n this.pagesDiv.style.transform = `translate(${this.index * this.width * -1}px)`\n }\n\n // show the close button\n if (this.index == this.pages.length - 1) {\n this.nexBtn.style.display = \"none\"\n this.doneBtn.style.display = \"block\"\n }\n\n // show the previous button\n if (this.pages.length > 1) {\n this.previousBtn.style.display = \"block\";\n }\n\n // Now the steps button.\n for (var i = 0; i < this.pages.length; i++) {\n if (this.stepsButton[i].classList.contains(\"active\") || this.stepsButton[i].classList.contains(\"disable\")) {\n this.stepsButton[i].classList.remove(\"active\")\n this.stepsButton[i].classList.add(\"disable\")\n }\n }\n\n if (this.stepsButton.length > 0) {\n this.stepsButton[this.index].classList.add(\"active\")\n\n // publish local event.\n if (!this.stepsButton[this.index].classList.contains(\"disable\")) {\n Backend.eventHub.publish(\"wizard_next_page_evt\", { index: this.index, nextBtn: this.stepsButton[this.index] }, true)\n }\n }\n\n }\n\n previous() {\n if (this.index > 0) {\n this.index--\n this.pagesDiv.style.transform = `translate(${this.index * this.width * -1}px)`\n }\n\n if (this.index == 0) {\n this.previousBtn.style.display = \"none\";\n }\n\n if (this.pages.length > 1 && this.index < this.pages.length - 1) {\n this.nexBtn.style.display = \"block\";\n this.doneBtn.style.display = \"none\"\n } else {\n this.doneBtn.style.display = \"block\"\n }\n\n for (var i = 0; i < this.pages.length; i++) {\n if (this.stepsButton[i].classList.contains(\"active\") || this.stepsButton[i].classList.contains(\"disable\")) {\n this.stepsButton[i].classList.remove(\"active\")\n this.stepsButton[i].classList.add(\"disable\")\n }\n }\n this.enableNextBtn()\n this.stepsButton[this.index].classList.add(\"active\")\n }\n\n\n}\n\ncustomElements.define('globular-wizard', Wizard)","export class GlobularSubjectsSelected extends HTMLElement {\n // attributes.\n\n // Create the applicaiton view.\n constructor() {\n super()\n // Set the shadow dom.\n this.attachShadow({ mode: 'open' });\n }\n\n // The connection callback.\n connectedCallback() {\n\n // Innitialisation of the layout.\n this.shadowRoot.innerHTML = `\n \n
\n
\n Choose who to share with...\n \n \n
\n
\n `\n // give the focus to the input.\n let container = this.shadowRoot.querySelector(\"#container\")\n\n }\n\n // Call search event.\n appendAccount(accountDiv) {\n this.shadowRoot.querySelector(\"#accounts-div\").appendChild(accountDiv)\n }\n\n // Return the list of accounts.\n getAccounts() {\n let accounts = []\n for (var i = 0; i < this.shadowRoot.querySelector(\"#accounts-div\").children.length; i++) {\n let accountDiv = this.shadowRoot.querySelector(\"#accounts-div\").children[i]\n accounts.push(accountDiv.account)\n }\n\n return accounts;\n }\n\n // Return the list of groups\n getGroups() {\n let groups = []\n for (var i = 0; i < this.shadowRoot.querySelector(\"#groups-div\").children.length; i++) {\n let groupDiv = this.shadowRoot.querySelector(\"#groups-div\").children[i]\n groups.push(groupDiv.group)\n }\n\n return groups;\n }\n\n appendGroup(groupDiv) {\n this.shadowRoot.querySelector(\"#groups-div\").appendChild(groupDiv)\n }\n}\n\ncustomElements.define('globular-subjects-selected', GlobularSubjectsSelected)\n\n","import getUuidByString from \"uuid-by-string\"\nimport { AccountController } from \"../../backend/account\";\nimport { GroupController } from \"../../backend/group\";\nimport { displayError } from \"../../backend/backend\";\nimport { fireResize } from \"../utility\";\n\n\n\n/**\n * Display suject (user's, group's, organization's, application's) in accordeon panel...\n */\nexport class GlobularSubjectsView extends HTMLElement {\n // attributes.\n\n // Create the applicaiton view.\n constructor() {\n super()\n // Set the shadow dom.\n this.attachShadow({ mode: 'open' });\n\n // The event listener...\n this.on_accounts_change = null\n this.on_groups_change = null\n this.on_account_click = null\n this.on_group_click = null\n this.on_application_click = null\n this.on_organization_click = null\n\n // set the account...\n this.account = AccountController.account\n\n // Innitialisation of the layout.\n this.shadowRoot.innerHTML = `\n \n \n
\n `\n\n // Vertical tabs... (accordeon...)\n let accountsSelector = this.shadowRoot.querySelector(\"#accounts-selector\")\n let accountsCount = this.shadowRoot.querySelector(\"#accounts-counter\")\n let accountsDiv = this.shadowRoot.querySelector(\"#accounts-div\")\n\n let groupsSelector = this.shadowRoot.querySelector(\"#groups-selector\")\n let groupsCount = this.shadowRoot.querySelector(\"#groups-counter\")\n let groupsDiv = this.shadowRoot.querySelector(\"#groups-div\")\n\n let organizationsSelector = this.shadowRoot.querySelector(\"#organizations-selector\")\n let organizationsCount = this.shadowRoot.querySelector(\"#organizations-counter\")\n let organizationsDiv = this.shadowRoot.querySelector(\"#organizations-div\")\n\n let applicationsSelector = this.shadowRoot.querySelector(\"#applications-selector\")\n let applicationsCount = this.shadowRoot.querySelector(\"#applications-counter\")\n let applicationsDiv = this.shadowRoot.querySelector(\"#applications-div\")\n\n\n // Get collapse panel...\n let accounts_collapse_panel = this.shadowRoot.querySelector(\"#accounts-collapse-panel\")\n let groups_collapse_panel = this.shadowRoot.querySelector(\"#groups-collapse-panel\")\n let organizations_collapse_panel = this.shadowRoot.querySelector(\"#organizations-collapse-panel\")\n let applications_collapse_panel = this.shadowRoot.querySelector(\"#applications-collapse-panel\")\n\n // So here I will change the layout depending of the size.\n window.addEventListener('resize', () => {\n // set the postion to 0, 0\n let w = document.querySelector(\"body\").clientWidth;\n let accountsTab = this.shadowRoot.querySelector(\"#accounts-tab\")\n let groupsTab = this.shadowRoot.querySelector(\"#groups-tab\")\n let organizationsTab = this.shadowRoot.querySelector(\"#organizations-tab\")\n let applicationTab = this.shadowRoot.querySelector(\"#applications-tab\")\n let selectorsDiv = this.shadowRoot.querySelector(\".selectors\")\n\n if (w <= 500 ) {\n selectorsDiv.appendChild(accountsSelector)\n selectorsDiv.appendChild(groupsSelector)\n selectorsDiv.appendChild(organizationsSelector)\n selectorsDiv.appendChild(applicationsSelector)\n } else {\n accountsTab.insertBefore(accountsSelector, accountsTab.firstChild)\n groupsTab.insertBefore(groupsSelector, groupsTab.firstChild)\n organizationsTab.insertBefore(organizationsSelector, organizationsTab.firstChild)\n applicationTab.insertBefore(applicationsSelector, applicationTab.firstChild)\n }\n })\n\n accountsSelector.onclick = () => {\n accounts_collapse_panel.toggle();\n if (organizations_collapse_panel.opened) {\n organizations_collapse_panel.toggle()\n }\n if (applications_collapse_panel.opened) {\n applications_collapse_panel.toggle()\n }\n if (groups_collapse_panel.opened) {\n groups_collapse_panel.toggle()\n }\n }\n\n groupsSelector.onclick = () => {\n groups_collapse_panel.toggle();\n if (organizations_collapse_panel.opened) {\n organizations_collapse_panel.toggle()\n }\n if (applications_collapse_panel.opened) {\n applications_collapse_panel.toggle()\n }\n if (accounts_collapse_panel.opened) {\n accounts_collapse_panel.toggle()\n }\n }\n\n applicationsSelector.onclick = () => {\n applications_collapse_panel.toggle();\n if (organizations_collapse_panel.opened) {\n organizations_collapse_panel.toggle()\n }\n if (accounts_collapse_panel.opened) {\n accounts_collapse_panel.toggle()\n }\n if (groups_collapse_panel.opened) {\n groups_collapse_panel.toggle()\n }\n }\n\n organizationsSelector.onclick = () => {\n organizations_collapse_panel.toggle();\n if (accounts_collapse_panel.opened) {\n accounts_collapse_panel.toggle()\n }\n if (applications_collapse_panel.opened) {\n applications_collapse_panel.toggle()\n }\n if (groups_collapse_panel.opened) {\n groups_collapse_panel.toggle()\n }\n }\n\n // So here I will initialyse the list of accounts...\n AccountController.getAccounts(\"{}\", false, accounts => {\n let range = document.createRange()\n let count = 0\n\n accounts.forEach(a => {\n accountsSelector.style.display = \"\"\n if (a.getId() != \"sa\" && a.getId() != this.account.getId()) {\n let name = a.getName()\n if(a.getFirstname().length > 0 && a.getLastname().length > 0){\n name = a.getFirstname() + \" \" + a.getLastname()\n }\n let uuid = \"_\" + getUuidByString(a.getId() + \"@\" + a.getDomain())\n let html = `\n
\n \n 0 ? \"none\" : \"block\"};\">\n ${name}\n
\n `\n let fragment = range.createContextualFragment(html)\n accountsDiv.appendChild(fragment)\n\n let accountDiv = accountsDiv.querySelector(`#${uuid}`)\n accountDiv.onclick = () => {\n // So here I will remove all active....\n let infos = this.shadowRoot.querySelectorAll(\".infos\")\n for (var i = 0; i < infos.length; i++) {\n infos[i].classList.remove(\"active\")\n }\n\n accountDiv.classList.add(\"active\")\n\n if (this.on_account_click) {\n // return the account and the div.\n if (this.on_account_click) {\n if (accountsDiv.querySelector(`#${uuid}`)) {\n this.on_account_click(accountDiv, a)\n accountsCount.innerHTML = `(${accountsDiv.children.length})`\n } else {\n // Here the div was remove from the list and so I will simply put it back...\n accountsDiv.appendChild(accountDiv)\n accountsCount.innerHTML = `(${accountsDiv.children.length})`\n }\n\n // fire the account change event...\n if (this.on_accounts_change) {\n this.on_accounts_change()\n }\n }\n }\n }\n\n count++\n }\n })\n\n accountsCount.innerHTML = `(${count})`\n\n accountsSelector.click() // display list of account'(s)\n\n\n }, err => {displayError(\"fail to retreive accounts with error: \", err)})\n\n // Now the groups.\n GroupController.getGroups(groups => {\n let range = document.createRange()\n groupsCount.innerHTML = `(${groups.length})`\n // init groups...\n let getGroup = (index) => {\n let g = groups[index]\n if (g) {\n groupsSelector.style.display = \"\"\n let group_uuid = \"_\" + getUuidByString(g.getId() + \"@\" + g.getDomain())\n let html = `\n
\n
\n \n
\n ${g.getName()}\n ${g.getDomain()}\n
\n
\n `\n\n\n\n GroupController.getMembers(g.getId(), members => {\n html += `
`\n members.forEach(a => {\n let name = a.getName()\n if(a.getFirstname().length > 0 && a.getLastname().length > 0){ \n name = a.getFirstname() + \" \" + a.getLastname()\n }\n let uuid = \"_\" + getUuidByString(a.getId() + \"@\" + a.getDomain())\n html += `\n
\n \n 0 ? \"none\" : \"block\"};\">\n ${name}\n
\n `\n })\n\n html += \"
\"\n html += \"
\"\n\n groupsDiv.appendChild(range.createContextualFragment(html))\n\n let groupDiv = groupsDiv.querySelector(\"#\" + group_uuid)\n\n groupDiv.onclick = (evt) => {\n\n evt.stopPropagation()\n\n let infos = this.shadowRoot.querySelectorAll(\".infos\")\n for (var i = 0; i < infos.length; i++) {\n infos[i].classList.remove(\"active\")\n }\n\n groupDiv.classList.add(\"active\")\n\n if (this.on_group_click) {\n if (groupsDiv.querySelector(`#${group_uuid}`)) {\n this.on_group_click(groupDiv, g)\n groupsCount.innerHTML = `(${groupsDiv.children.length})`\n } else {\n // Here the div was remove from the list and so I will simply put it back...\n groupsDiv.appendChild(groupDiv)\n groupsCount.innerHTML = `(${groupsDiv.children.length})`\n }\n }\n // fire the account change event...\n if (this.on_groups_change) {\n this.on_groups_change()\n }\n }\n\n index++\n if (index < groups.length) {\n getGroup(index)\n }\n\n })\n }\n }\n\n let index = 0;\n getGroup(index)\n }, err => displayError(err, 3000))\n\n // TODO the applications and the organizations\n fireResize()\n }\n\n}\n\ncustomElements.define('globular-subjects-view', GlobularSubjectsView)\n\n","import { Permission } from \"globular-web-client/rbac/rbac_pb\"\nimport { Account, Group } from \"globular-web-client/resource/resource_pb\"\nimport getUuidByString from \"uuid-by-string\"\n\n\n/**\n * Set shared subject permission...\n */\nexport class SharedSubjectsPermissions extends HTMLElement {\n // attributes.\n\n // Create the applicaiton view.\n constructor() {\n\n super()\n\n this.accounts = []\n\n this.groups = []\n\n this.applications = []\n\n this.organizations = []\n\n\n // Set the shadow dom.\n this.attachShadow({ mode: 'open' });\n }\n\n // The connection callback.\n connectedCallback() {\n\n // Innitialisation of the layout.\n this.shadowRoot.innerHTML = `\n \n
\n
Set subject's permissions...
\n
\n
\n
\n Subject\n
\n
\n Read\n
\n
\n Write\n
\n
\n Delete\n
\n
\n
\n
\n `\n // give the focus to the input.\n\n\n }\n\n // Call search event.\n setAccounts(accounts) {\n this.accounts = accounts;\n\n this.refresh()\n }\n\n setGroups(groups) {\n this.groups = groups;\n\n this.refresh()\n }\n\n // Refresh the permission selector.\n refresh() {\n let permissions = this.shadowRoot.querySelector(\"#permissions\")\n for (var i = 1; i < permissions.children.length; i++) {\n permissions.children[i].style.display = \"none\"\n }\n\n let range = document.createRange()\n\n let setSubjectRow = (s) => {\n let name = s.getName()\n if (s instanceof Account) {\n if (s.getFirstname().length > 0 && s.getLastname().length > 0) {\n name = s.getFirstname() + \" \" + s.getLastname()\n }\n }\n let uuid = \"_\" + getUuidByString(s.getId() + \"@\" + s.getDomain())\n let html = `\n \n
\n
\n
\n \n \n ${name}\n
\n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n `\n // set user permissions.\n if (!permissions.querySelector(\"#\" + uuid)) {\n permissions.appendChild(range.createContextualFragment(html))\n\n // so here I will set the action...\n let icons = permissions.querySelectorAll(\".permission-icon\")\n for (var i = 0; i < icons.length; i++) {\n let icon = icons[i]\n icon.onclick = () => {\n if (icon.getAttribute(\"icon\") == \"icons:check\") {\n icon.setAttribute(\"icon\", \"icons:block\")\n } else if (icon.getAttribute(\"icon\") == \"icons:remove\") {\n icon.setAttribute(\"icon\", \"icons:check\")\n } else if (icon.getAttribute(\"icon\") == \"icons:block\") {\n icon.setAttribute(\"icon\", \"icons:remove\")\n }\n }\n }\n\n }\n\n // set display...\n let row = permissions.querySelector(\"#\" + uuid + \"_row\")\n row.subject = s\n row.style.display = \"table-row\"\n if (s instanceof Account) {\n row.querySelector(\"img\").src = s.getProfilepicture()\n row.querySelector(\"#group-icon\").style.display = \"none\"\n } else {\n row.querySelector(\"img\").style.display = \"none\"\n row.querySelector(\"#group-icon\").icon = \"social:people\"\n }\n\n }\n\n // create row for accounts...\n this.accounts.forEach(a => {\n setSubjectRow(a)\n })\n\n // create row for groups...\n this.groups.forEach(g => {\n setSubjectRow(g)\n })\n\n }\n\n // extract permission infos from the interface.\n getPermissions() {\n let permissions = { allowed: [], denied: [] }\n let permissionsDiv = this.shadowRoot.querySelector(\"#permissions\")\n let rows = permissionsDiv.querySelectorAll(\".subject-permissions-row\")\n\n let allowed_read_permission = new Permission\n allowed_read_permission.setName(\"read\")\n permissions.allowed.push(allowed_read_permission)\n\n let allowed_write_permission = new Permission\n allowed_write_permission.setName(\"write\")\n permissions.allowed.push(allowed_write_permission)\n\n let allowed_delete_permission = new Permission\n allowed_delete_permission.setName(\"delete\")\n permissions.allowed.push(allowed_delete_permission)\n\n let denied_read_permission = new Permission\n denied_read_permission.setName(\"read\")\n permissions.denied.push(denied_read_permission)\n\n let denied_write_permission = new Permission\n denied_write_permission.setName(\"write\")\n permissions.denied.push(denied_write_permission)\n\n let denied_delete_permission = new Permission\n denied_delete_permission.setName(\"delete\")\n permissions.denied.push(denied_delete_permission)\n\n\n for (var i = 0; i < rows.length; i++) {\n let row = rows[i]\n let icons = row.querySelectorAll(\".permission-icon\")\n\n /** The read permission */\n if (icons[0].icon == \"icons:check\") {\n if (row.subject instanceof Account) {\n let accountId = row.subject.getId() + \"@\" + row.subject.getDomain()\n let lst = allowed_read_permission.getAccountsList()\n lst.push(accountId)\n allowed_read_permission.setAccountsList(lst)\n } else if (row.subject instanceof Group) {\n let groupId = row.subject.getId() + \"@\" + row.subject.getDomain()\n let lst = allowed_read_permission.getGroupsList()\n lst.push(groupId)\n allowed_read_permission.setGroupsList(lst)\n }\n } else if (icons[0].icon == \"icons:block\") {\n if (row.subject instanceof Account) {\n let accountId = row.subject.getId() + \"@\" + row.subject.getDomain()\n let lst = denied_read_permission.getAccountsList()\n lst.push(accountId)\n denied_read_permission.setAccountsList(lst)\n } else if (row.subject instanceof Group) {\n let groupId = row.subject.getId() + \"@\" + row.subject.getDomain()\n let lst = denied_read_permission.getGroupsList()\n lst.push(groupId)\n denied_read_permission.setGroupsList(lst)\n }\n }\n\n /** The write permission */\n if (icons[1].icon == \"icons:check\") {\n if (row.subject instanceof Account) {\n let accountId = row.subject.getId() + \"@\" + row.subject.getDomain()\n let lst = allowed_write_permission.getAccountsList()\n lst.push(accountId)\n allowed_write_permission.setAccountsList(lst)\n } else if (row.subject instanceof Group) {\n let groupId = row.subject.getId() + \"@\" + row.subject.getDomain()\n let lst = allowed_write_permission.getGroupsList()\n lst.push(groupId)\n allowed_write_permission.setGroupsList(lst)\n }\n } else if (icons[1].icon == \"icons:block\") {\n if (row.subject instanceof Account) {\n let accountId = row.subject.getId() + \"@\" + row.subject.getDomain()\n let lst = denied_write_permission.getAccountsList()\n lst.push(accountId)\n denied_write_permission.setAccountsList(lst)\n } else if (row.subject instanceof Group) {\n let groupId = row.subject.getId() + \"@\" + row.subject.getDomain()\n let lst = denied_write_permission.getGroupsList()\n lst.push(groupId)\n denied_write_permission.setGroupsList(lst)\n }\n }\n\n /** The delete permission */\n if (icons[2].icon == \"icons:check\") {\n if (row.subject instanceof Account) {\n let accountId = row.subject.getId() + \"@\" + row.subject.getDomain()\n let lst = allowed_delete_permission.getAccountsList()\n lst.push(accountId)\n allowed_delete_permission.setAccountsList(lst)\n } else if (row.subject instanceof Group) {\n let groupId = row.subject.getId() + \"@\" + row.subject.getDomain()\n let lst = allowed_delete_permission.getGroupsList()\n lst.push(groupId)\n allowed_delete_permission.setGroupsList(lst)\n }\n } else if (icons[2].icon == \"icons:block\") {\n if (row.subject instanceof Account) {\n let accountId = row.subject.getId() + \"@\" + row.subject.getDomain()\n let lst = denied_delete_permission.getAccountsList()\n lst.push(accountId)\n denied_delete_permission.setAccountsList(lst)\n } else if (row.subject instanceof Group) {\n let groupId = row.subject.getId() + \"@\" + row.subject.getDomain()\n let lst = denied_delete_permission.getGroupsList()\n lst.push(groupId)\n denied_delete_permission.setGroupsList(lst)\n }\n }\n }\n\n return permissions;\n }\n\n}\n\ncustomElements.define('globular-shared-subjects-permissions', SharedSubjectsPermissions)","import getUuidByString from \"uuid-by-string\"\nimport { AccountController } from \"../../backend/account\"\nimport { Wizard } from \"../wizard\";\nimport { randomUUID } from \"../utility\";\nimport { Backend, displayError, generatePeerToken } from \"../../backend/backend\";\nimport { CreateNotificationRqst, Notification, NotificationType } from \"globular-web-client/resource/resource_pb\";\nimport { GetResourcePermissionsRqst, Permissions, SetResourcePermissionsRqst } from \"globular-web-client/rbac/rbac_pb\";\nimport { GlobularSubjectsSelected} from \"./subjectsSelected\";\nimport { GlobularSubjectsView } from \"./subjectsView\";\nimport { GroupController } from \"../../backend/group\";\nimport {SharedSubjectsPermissions} from \"./sharedSubjectPermissions\";\n\n\nexport class ShareResourceWizard extends HTMLElement {\n // attributes.\n\n // Create the applicaiton view.\n constructor(files, view) {\n super()\n\n this.view = view;\n\n this.files = files;\n\n // Set the shadow dom.\n this.attachShadow({ mode: 'open' });\n\n // Innitialisation of the layout.\n this.shadowRoot.innerHTML = `\n \n
\n
\n \n \n \n
\n
\n \n
\n
\n `\n\n // give the focus to the input.\n let wizard = new Wizard()\n wizard.style.flexGrow = 1\n wizard.style.height = \"50px\"\n\n // Here I will set the wizard pages...\n let range = document.createRange()\n let files_page = `\n
\n `\n\n // The welcome pages...\n files.forEach(file => {\n let title = null\n let name = file.getName();\n\n if (file.titles) {\n title = file.titles[0]\n name = title.getName()\n if (title.getEpisode() > 0) {\n name += \" S\" + title.getSeason() + \"-E\" + title.getEpisode()\n }\n\n } else if (file.videos) {\n title = file.videos[0]\n name = title.getDescription()\n } else if (file.audios) {\n title = file.audios[0]\n name = title.getTitle()\n }\n\n let uuid = \"_\" + getUuidByString(file.getPath())\n\n let file_page = `\n
\"\n\n wizard.appendPage(range.createContextualFragment(files_page).children[0])\n\n // Now the user, group application and organization page...\n let subjects_page = `\n \n
\n
\n \n \n
\n
\n `\n wizard.appendPage(range.createContextualFragment(subjects_page).children[1])\n\n let subjectsView = wizard.querySelector(\"globular-subjects-view\")\n let selectedSubjects = wizard.querySelector(\"globular-subjects-selected\")\n\n\n let shared_permissions_page = `\n
\n Resources permissions was successfully created for\n
\n \n
\n The following user's will be notified of their new access\n
\n \n
\n
\n
\n `\n\n wizard.setSummaryPage(range.createContextualFragment(summary).children[1])\n\n wizard.ondone = (summary_page) => {\n // Here I will get read element from the interface to get permissions infos...\n let permissions = sharedSubjectsPermission.getPermissions()\n\n this.setFilesPermissions(permissions, files, errors => {\n let participants = selectedSubjects.getAccounts()\n let groups = selectedSubjects.getGroups()\n\n // display the list of resource...\n let getMembers = (index) => {\n let group = groups[index]\n GroupController.getMembers(group.getId(), members => {\n // append members...\n members.forEach(member => {\n if (participants.filter(p => p.getId() + \"@\" + p.getDomain() === member.getId() + \"@\" + member.getDomain()).length == 0) {\n participants.push(member)\n }\n })\n index++\n if (index < groups.length) {\n getMembers(index)\n } else {\n displayParticipants()\n }\n })\n }\n\n\n let displayResources = () => {\n let resourcesDiv = summary_page.querySelector(\"#resources\")\n let statusIco = summary_page.querySelector(\"#status-ico\")\n let nbTotal = files.length\n let nbFail = 0\n files.forEach(file => {\n let title = null\n let name = file.getName();\n\n if (file.titles) {\n title = file.titles[0]\n name = title.getName()\n if (title.getEpisode() > 0) {\n name += \" S\" + title.getSeason() + \"-E\" + title.getEpisode()\n }\n\n } else if (file.videos) {\n title = file.videos[0]\n name = title.getDescription()\n } else if (file.audios) {\n title = file.audios[0]\n name = title.getTitle()\n }\n\n let uuid = \"_\" + getUuidByString(file.getPath())\n let fileDiv = `\n
\n
\n
\n \n \n \n
\n \n
\n ${name}\n
\n `\n resourcesDiv.appendChild(range.createContextualFragment(fileDiv))\n\n // Here I will display error in the interface if ther some...\n if (errors[file.getPath()]) {\n resourcesDiv.querySelector(`#${uuid + \"_success\"}`).style.display = \"none\"\n resourcesDiv.querySelector(`#${uuid + \"_error\"}`).title = errors[file.getPath()].message\n nbFail++\n if(nbFail < nbTotal){\n statusIco.icon = \"icons:warning\"\n statusIco.style.fill = \"var(--palette-error-main)\"\n }else{\n statusIco.icon = \"icons:error\"\n statusIco.style.fill = \"var(--palette-secondary-main)\"\n }\n\n } else {\n resourcesDiv.querySelector(`#${uuid + \"_error\"}`).style.display = \"none\"\n participants.forEach(contact => {\n // So here I will send a notification to the participant with the share information...\n let rqst = new CreateNotificationRqst\n let notification = new Notification\n\n notification.setDate(parseInt(Date.now() / 1000)) // Set the unix time stamp...\n notification.setId(randomUUID())\n notification.setRecipient(contact.getId() + \"@\" + contact.getDomain())\n notification.setSender(AccountController.account.getId() + \"@\" + AccountController.account.getDomain())\n notification.setNotificationType(NotificationType.USER_NOTIFICATION)\n notification.setMac(Backend.getGlobule(contact.getDomain()).config.Mac)\n \n let alias = \"\"\n if(file.videos){\n alias = file.videos[0].getDescription()\n }else if (file.titles){\n alias = file.titles[0].getName()\n }else if (file.audios){\n alias = file.audio[0].getTitle()\n }\n\n let date = new Date()\n let msg = `\n
\n
\n ${date.toLocaleString()}\n
\n
\n
\n
\n ${AccountController.account.getName()} has share file with you,\n
\n\n \n \n
\n \n
\n
\n `\n\n notification.setMessage(msg)\n rqst.setNotification(notification)\n\n // Create the notification...\n let globule = Backend.getGlobule(contact.getDomain())\n generatePeerToken(globule, token => {\n globule.resourceService.createNotification(rqst, {\n token: token,\n domain: contact.getDomain()\n }).then((rsp) => {\n \n // Send notification...\n Backend.getGlobule(contact.getDomain()).eventHub.publish(contact.getId() + \"@\" + contact.getDomain() + \"_notification_event\", notification.serializeBinary(), false)\n }).catch(err => {\n displayError(err, 3000);\n console.log(err)\n })\n })\n\n })\n }\n })\n }\n\n let displayParticipants = () => {\n let participantsDiv = summary_page.querySelector(\"#paticipants\")\n let range = document.createRange()\n\n // set style...\n participantsDiv.appendChild(range.createContextualFragment(`\n \n `))\n \n\n participants.forEach(a => {\n let name = a.name\n if(a.getFirstname().length > 0 && a.getLastname().length > 0){\n name = a.getFirstname() + \" \" + a.getLastname()\n }\n let uuid = \"_\" + getUuidByString(a.getId() + \"@\" + a.getDomain())\n let html = `\n
\n \n 0 ? \"none\" : \"block\"};\">\n ${name}\n
\n `\n participantsDiv.appendChild(range.createContextualFragment(html))\n })\n\n // display resources...\n displayResources()\n }\n\n if (groups.length == 0) {\n displayParticipants()\n } else {\n getMembers(0)\n }\n })\n\n\n }\n\n this.appendChild(wizard)\n\n // So he I will connect events...\n files.forEach(file => {\n let title = null\n let video = null\n let audio = null\n if (file.titles) {\n title = file.titles[0]\n } else if (file.videos) {\n video = file.videos[0]\n } else if (file.audios) {\n audio = file.audios[0]\n }\n\n let uuid = \"_\" + getUuidByString(file.getPath())\n\n let infos_btn = this.querySelector(`#${uuid + \"_infos_btn\"}`)\n if (title) {\n infos_btn.onclick = () => {\n this.showTitleInfo(title)\n }\n } else if (video) {\n infos_btn.onclick = () => {\n this.showVideoInfo(video)\n }\n } else {\n infos_btn.style.display = \"none\"\n }\n\n infos_btn.onmouseover = () => {\n infos_btn.style.cursor = \"pointer\"\n }\n infos_btn.onmouseleave = () => {\n infos_btn.style.cursor = \"default\"\n }\n\n let checkbox = this.querySelector(`#${uuid + \"_checkbox\"}`)\n file.selected = true;\n checkbox.onclick = () => {\n file.selected = checkbox.checked;\n console.log(file.getPath(), \" is selected \", file.selected)\n }\n\n })\n\n // Close the wizard...\n wizard.onclose = () => {\n this.close()\n }\n\n // Cancel button...\n this.shadowRoot.querySelector(\"paper-icon-button\").onclick = () => {\n this.close()\n }\n }\n\n // save permission, it will return map of errors if some permissions can't be set \n // for a given file.\n setFilesPermissions(permissions_, files, callback) {\n\n let errors = {}\n\n // save permissions.\n let saveFilePermissions = (f, permissions, callback, errorCallback) => {\n /** todo write the code to save the permission. */\n console.log(\"save permissions: \", permissions)\n let rqst = new SetResourcePermissionsRqst\n let globule = f.globule\n rqst.setPath(f.getPath())\n \n rqst.setResourcetype(\"file\")\n rqst.setPermissions(permissions)\n generatePeerToken(globule, token => {\n globule.rbacService.setResourcePermissions(rqst, { domain: globule.domain, token: token })\n .then(() => { console.log(\"save permission successfully!\"); callback(); })\n .catch(err => {\n errorCallback(err)\n })\n })\n }\n\n let setPermissions = (index) => {\n if (index == files.length) {\n callback(errors)\n return\n }\n\n let f = files[index]\n let permissions = new Permissions\n permissions.setPath(f.getPath())\n permissions.setResourceType(\"file\")\n\n let rqst = new GetResourcePermissionsRqst\n rqst.setPath(f.getPath())\n let globule = f.globule\n\n generatePeerToken(f.globule, token => {\n f.globule.rbacService.getResourcePermissions(rqst, { domain: globule.domain, token: token }).then(\n rsp => {\n permissions = rsp.getPermissions()\n console.log(\"permission find for file \", f.getPath(), permissions)\n // so here I will merge the value for permission_ (taken from the interface)\n // and the existing permissions from the backend.\n permissions_.allowed.forEach(p => {\n\n // Get existing allowed permission accounts list.\n let allowed = permissions.getAllowedList()\n\n // The existing permission with the same name\n let p_ = allowed.filter(p__ => p__.getName() == p.getName())[0]\n if (p_) {\n let accounts_lst = p.getAccountsList()\n accounts_lst.forEach(a => {\n let accounts_lst_ = p_.getAccountsList()\n if (accounts_lst_.filter(a_ => a_ == a).length == 0) {\n accounts_lst_.push(a)\n }\n p_.setAccountsList(accounts_lst_)\n })\n\n let groups_lst = p.getGroupsList()\n groups_lst.forEach(g => {\n let groups_lst_ = p_.getGroupsList()\n if (groups_lst_.filter(g_ => g_ == g).length == 0) {\n groups_lst_.push(g)\n }\n p_.setGroupsList(groups_lst_)\n })\n } else {\n // no permission with that name exist so I will simply append the new one...\n permissions.addAllowed(p)\n }\n })\n\n // Now the denied permissions.\n permissions_.denied.forEach(p => {\n\n // Get existing allowed permission accounts list.\n let denied = permissions.getDeniedList()\n\n // The existing permission with the same name\n let p_ = denied.filter(p__ => p__.getName() == p.getName())[0]\n if (p_) {\n let accounts_lst = p.getAccountsList()\n accounts_lst.forEach(a => {\n let accounts_lst_ = p_.getAccountsList()\n if (accounts_lst_.filter(a_ => a_ == a).length == 0) {\n accounts_lst_.push(a)\n }\n p_.setAccountsList(accounts_lst_)\n })\n\n let groups_lst = p.getGroupsList()\n groups_lst.forEach(g => {\n let groups_lst_ = p_.getGroupsList()\n if (groups_lst_.filter(g_ => g_ == g).length == 0) {\n groups_lst_.push(g)\n }\n p_.setGroupsList(groups_lst_)\n })\n } else {\n // no permission with that name exist so I will simply append the new one...\n permissions.addDenied(p)\n }\n })\n\n // next file...\n saveFilePermissions(f, permissions, () => {\n setPermissions(++index)\n }, err => { console.log(\"---------->\", err); errors[f.getPath()] = err; setPermissions(++index) })\n\n }).catch(err => {\n\n let msg = JSON.parse(err.message);\n if (msg.ErrorMsg.startsWith(\"item not found\")) {\n permissions.setAllowedList(permissions_.allowed)\n permissions.setDeniedList(permissions_.denied)\n saveFilePermissions(f, permissions, () => {\n setPermissions(++index)\n }, err => { console.log(\"---------------> \", err); errors[f.getPath()] = err; setPermissions(++index) })\n\n }\n })\n })\n }\n\n // start setting permissions.\n let index = 0;\n if (files.length > 0) {\n setPermissions(index)\n }\n\n }\n\n showVideoInfo(video) {\n let uuid = randomUUID()\n let html = `\n \n \n \n `\n let videoInfoBox = document.getElementById(\"video-info-box\")\n\n\n if (videoInfoBox == undefined) {\n let range = document.createRange()\n document.body.appendChild(range.createContextualFragment(html))\n videoInfoBox = document.getElementById(\"video-info-box\")\n let parent = document.getElementById(\"video-info-box-dialog-\" + uuid)\n parent.style.position = \"fixed\"\n parent.style.top = \"75px\"\n parent.style.left = \"50%\"\n parent.style.transform = \"translate(-50%)\"\n videoInfoBox.onclose = () => {\n parent.parentNode.removeChild(parent)\n }\n }\n videoInfoBox.setVideosInformation([video])\n }\n\n showTitleInfo(title) {\n let uuid = randomUUID()\n let html = `\n \n \n \n `\n let titleInfoBox = document.getElementById(\"title-info-box\")\n if (titleInfoBox == undefined) {\n let range = document.createRange()\n document.body.appendChild(range.createContextualFragment(html))\n titleInfoBox = document.getElementById(\"title-info-box\")\n let parent = document.getElementById(\"video-info-box-dialog-\" + uuid)\n parent.style.position = \"fixed\"\n parent.style.top = \"75px\"\n parent.style.left = \"50%\"\n parent.style.transform = \"translate(-50%)\"\n\n titleInfoBox.onclose = () => {\n parent.parentNode.removeChild(parent)\n }\n }\n titleInfoBox.setTitlesInformation([title])\n }\n\n\n show() {\n let fileExplorer = this.view._file_explorer_;\n let globule = fileExplorer.globule\n\n globule.eventHub.publish(\"__show_share_wizard__\", {\"file_explorer_id\": fileExplorer.id, \"wizard\": this}, true)\n }\n\n close() {\n if(this.onclose){\n this.onclose()\n }\n this.parentElement.removeChild(this)\n }\n}\n\ncustomElements.define('globular-share-resource-wizard', ShareResourceWizard)\n","import { ShareResourceWizard } from \"./shareResourceWizard\";\n\n/**\n * create a new permission for a given resource.\n */\nexport class ShareResourceMenu extends HTMLElement {\n // attributes.\n\n // Create the applicaiton view.\n constructor(view) {\n super()\n // Set the shadow dom.\n this.attachShadow({ mode: 'open' });\n\n // the view where the menu is displayed.\n this.view = view;\n\n this.files = [];\n\n // Innitialisation of the layout.\n this.shadowRoot.innerHTML = `\n \n
\n \n \n
\n `\n // give the focus to the input.\n this.shadowRoot.querySelector(\"#share-resource-btn\").onclick = (evt) => {\n evt.stopPropagation();\n\n this.share()\n }\n\n }\n\n setFiles(files) {\n this.files = files;\n }\n\n share() {\n let shareResourceWizard = new ShareResourceWizard(this.files, this.view);\n\n shareResourceWizard.show()\n\n }\n}\n\ncustomElements.define('globular-share-resource-menu', ShareResourceMenu)\n","import { v4 as uuidv4 } from \"uuid\";\nimport { ShareResourceMenu } from \"../share/shareResourceMenu\";\nimport { DropdownMenu } from \"../menu.js\";\nimport { Backend, displayError, displayMessage, generatePeerToken, getUrl } from \"../../backend/backend\";\nimport { TitleController } from \"../../backend/title\";\nimport { AccountController } from \"../../backend/account\";\nimport { ConvertVideoToHlsRequest, ConvertVideoToMpeg4H264Request, CreateVideoPreviewRequest, CreateVideoTimeLineRequest, StartProcessVideoRequest, UploadVideoRequest } from \"globular-web-client/media/media_pb.js\";\nimport { CopyRequest, DeleteDirRequest, GetPublicDirsRequest, MoveRequest, RemovePublicDirRequest, UploadFileRequest } from \"globular-web-client/file/file_pb.js\";\nimport { AssociateFileWithTitleRequest, CreateTitleRequest, CreateVideoRequest, Poster, Publisher, Video, Title } from \"globular-web-client/title/title_pb.js\";\nimport { DownloadTorrentRequest } from \"globular-web-client/torrent/torrent_pb.js\";\nimport { deleteDir, deleteFile, downloadFileHttp, renameFile } from \"globular-web-client/api.js\";\nimport getUuidByString from \"uuid-by-string\";\nimport '@polymer/paper-input/paper-input.js';\nimport '@polymer/paper-input/paper-textarea.js';\nimport { copyToClipboard, FileController } from \"../../backend/file\";\nimport { FileExplorer } from \"./fileExplorer.js\";\nimport { getCoords } from \"../utility.js\";\n\n\nlet editMode = \"\"\n\n/**\n * That class is the base class of FilesListView and FilesIconView\n */\nexport class FilesView extends HTMLElement {\n\n constructor() {\n super()\n\n // must icon or list view one is active at time.\n this._active_ = false\n\n // The parent file explorer\n this._file_explorer_ = null;\n\n // Set the shadow dom.\n this.attachShadow({ mode: 'open' });\n\n // The active explorer path.\n this.path = undefined\n\n // The current directory.\n this.__dir__ = null;\n\n // The list of files to delete\n this.selected = {};\n\n // The function will be call in case of error.\n this.onerror = err => displayError(err, 3000);\n\n // Innitialisation of the layout.\n let id = \"_\" + uuidv4().split(\"-\").join(\"_\").split(\"@\").join(\"_\");\n\n // Create the share resource menu.\n this.shareResource = new ShareResourceMenu(this)\n\n\n let menuItemsHTML = `\n\n\n\n\n\n\n\n\n\n\n\n\n\n \n \n \n \n \n \n\n\n\n\n\n\n\n `\n\n \n this.menu = new DropdownMenu(\"icons:more-vert\")\n this.menu.style.zIndex = 1000\n this.menu.className = \"file-dropdown-menu\"\n this.menu.innerHTML = menuItemsHTML\n\n this.videoMenuItem = this.menu.querySelector(\"#video-menu-item\")\n this.fileInfosMenuItem = this.menu.querySelector(\"#file-infos-menu-item\")\n this.titleInfosMenuItem = this.menu.querySelector(\"#title-infos-menu-item\")\n this.refreshInfoMenuItem = this.menu.querySelector(\"#refresh-infos-menu-item\")\n this.mananageAccessMenuItem = this.menu.querySelector(\"#manage-acess-menu-item\")\n this.sharedMenuItem = this.menu.querySelector(\"#shared-menu-item\")\n\n \n this.renameMenuItem = this.menu.querySelector(\"#rename-menu-item\")\n this.deleteMenuItem = this.menu.querySelector(\"#delete-menu-item\")\n this.downloadMenuItem = this.menu.querySelector(\"#download-menu-item\")\n this.openInNewTabItem = this.menu.querySelector(\"#open-in-new-tab-menu-item\")\n this.copyUrlItem = this.menu.querySelector(\"#copy-url-menu-item\")\n\n // video conversion menu\n this.generateTimeLineItem = this.menu.querySelector(\"#generate-timeline-menu-item\")\n this.generatePreviewItem = this.menu.querySelector(\"#generate-preview-menu-item\")\n this.toMp4MenuItem = this.menu.querySelector(\"#to-mp4-menu-item\")\n this.toHlsMenuItem = this.menu.querySelector(\"#to-hls-menu-item\")\n\n // Now the cut copy and paste menu...\n this.cutMenuItem = this.menu.querySelector(\"#cut-menu-item\")\n this.copyMenuItem = this.menu.querySelector(\"#copy-menu-item\")\n this.pasteMenuItem = this.menu.querySelector(\"#paste-menu-item\")\n\n\n // Action to do when a file is set\n this.menu.setFile = (file) => {\n this.menu.file = file;\n const mime = file.getMime();\n const name = file.getName();\n\n // Hide all menu items by default\n this.videoMenuItem.style.display = \"none\";\n this.titleInfosMenuItem.style.display = \"none\";\n this.toHlsMenuItem.style.display = \"none\";\n this.toMp4MenuItem.style.display = \"none\";\n this.generateTimeLineItem.style.display = \"none\";\n this.generatePreviewItem.style.display = \"none\";\n this.openInNewTabItem.style.display = \"none\";\n this.refreshInfoMenuItem.style.display = \"none\";\n\n if (mime.startsWith(\"video\")) {\n this.titleInfosMenuItem.style.display = \"block\";\n this.videoMenuItem.style.display = \"block\";\n this.openInNewTabItem.style.display = \"block\";\n this.generateTimeLineItem.style.display = \"block\";\n this.generatePreviewItem.style.display = \"block\";\n\n if (name.toLowerCase().endsWith(\".mp4\")) {\n this.toHlsMenuItem.style.display = \"block\";\n } else if (mime === \"video/hls-stream\") {\n // No conversion options for HLS streams\n } else {\n this.toMp4MenuItem.style.display = \"block\";\n }\n } else if (mime.startsWith(\"audio\") || file.videos || file.titles) {\n this.titleInfosMenuItem.style.display = \"block\";\n }\n\n if (file.getIsDir()) {\n this.refreshInfoMenuItem.style.display = \"block\";\n }\n };\n\n this.sharedMenuItem.action = () => {\n let files = [this.menu.file]\n if(Object.keys(this.selected).length > 0){\n files = []\n for (var key in this.selected) {\n files.push(this.selected[key])\n }\n }\n this.shareResource.setFiles(files)\n this.shareResource.share()\n }\n\n this.refreshInfoMenuItem.action = () => {\n let rqst = new StartProcessVideoRequest\n rqst.setPath(this.menu.file.getPath())\n let globule = this._file_explorer_.globule\n\n generatePeerToken(globule, token => {\n globule.mediaService.startProcessVideo(rqst, { domain: globule.domain, token: token }).then(() => {\n displayMessage(\"informations are now updated\", 3000)\n })\n .catch(err => displayError(err, 3000))\n })\n\n // Remove it from it parent... \n this.menu.close()\n this.menu.parentNode.removeChild(this.menu)\n\n }\n\n this.cutMenuItem.action = () => {\n editMode = \"cut\"\n FileExplorer.paperTray = [];\n for (var key in this.selected) {\n FileExplorer.paperTray.push(this.selected[key].path)\n }\n\n // Append file to file menu\n if (FileExplorer.paperTray.length == 0) {\n FileExplorer.paperTray.push(this.menu.file.getPath())\n }\n\n // empty the selection.\n this.selected = {}\n\n // Remove it from it parent... \n this.menu.close()\n this.menu.parentNode.removeChild(this.menu)\n }\n\n this.copyMenuItem.action = () => {\n\n editMode = \"copy\"\n\n // So here I will display choice to the user and set the edit mode penpending it response.\n FileExplorer.paperTray = [];\n for (var key in this.selected) {\n FileExplorer.paperTray.push(this.selected[key].path)\n }\n\n // Append file to file menu\n if (FileExplorer.paperTray.length == 0) {\n FileExplorer.paperTray.push(this.menu.file.getPath())\n }\n\n // empty the selection.\n this.selected = {}\n\n // Remove it from it parent... \n this.menu.close()\n this.menu.parentNode.removeChild(this.menu)\n }\n\n this.pasteMenuItem.action = () => {\n\n if (editMode == \"copy\") {\n // Here I will call move on the file manager\n this.copy(this.menu.file.getPath())\n\n } else if (editMode == \"cut\") {\n // Here I will call copy\n this.move(this.menu.file.getPath())\n }\n\n // empty the selection.\n this.selected = {}\n\n // Remove it from it parent... \n this.menu.close()\n this.menu.parentNode.removeChild(this.menu)\n }\n\n this.openInNewTabItem.action = () => {\n let globule = this._file_explorer_.globule\n generatePeerToken(globule, token => {\n let url = getUrl(globule)\n\n this.menu.file.getPath().split(\"/\").forEach(item => {\n let component = encodeURIComponent(item.trim())\n if (component.length > 0) {\n url += \"/\" + component\n }\n })\n\n if (this.menu.file.mime == \"video/hls-stream\") {\n url += \"/playlist.m3u8\"\n }\n\n url += \"?token=\" + token\n url += \"&application=\" + globule.application\n\n window.open(url, '_blank', \"fullscreen=yes\");\n\n // Remove it from it parent... \n this.menu.close()\n this.menu.parentNode.removeChild(this.menu)\n })\n\n }\n\n this.copyUrlItem.action = () => {\n let globule = this._file_explorer_.globule\n generatePeerToken(globule, token => {\n let url = getUrl(globule)\n this.menu.file.getPath().split(\"/\").forEach(item => {\n let component = encodeURIComponent(item.trim())\n if (component.length > 0) {\n url += \"/\" + component\n }\n\n })\n\n if (this.menu.file.mime == \"video/hls-stream\") {\n url += \"/playlist.m3u8\"\n }\n\n url += \"?token=\" + token\n url += \"&application=\" + globule.application\n\n copyToClipboard(url)\n\n displayMessage(\"url was copy to clipboard...\", 3000)\n\n // Remove it from it parent... \n this.menu.close()\n this.menu.parentNode.removeChild(this.menu)\n })\n }\n\n this.downloadMenuItem.action = () => {\n // Here I will create an archive from the selected files and dowload it...\n let files = [];\n let globule = null;\n for (var key in this.selected) {\n files.push(this.selected[key].path)\n globule = this.selected[key].globule\n }\n\n if (files.length > 0) {\n generatePeerToken(globule, token => {\n // Create a tempory name...\n let uuid = \"_\" + uuidv4().split(\"-\").join(\"_\").split(\"@\").join(\"_\");\n this._file_explorer_.displayWaitMessage(\"create archive before for selected files...\")\n createArchive(globule, files, uuid,\n path => {\n\n let url = getUrl(globule)\n\n path.split(\"/\").forEach(item => {\n item = item.trim()\n if (item.length > 0) {\n url += \"/\" + encodeURIComponent(item)\n }\n })\n\n if (token) {\n url += \"?token=\" + token\n }\n url += \"&application=\" + globule.application\n\n // Download the file...\n this._file_explorer_.displayWaitMessage(\"start download archive \" + path)\n console.log(url)\n downloadFileHttp(url, uuid + \".tar.gz\",\n () => {\n // Now I will remove the file from the server....\n this._file_explorer_.displayWaitMessage(\"remove archive \" + path)\n deleteFile(globule, path,\n () => {\n this._file_explorer_.resume()\n },\n err => { displayError(err, 3000); this._file_explorer_.resume() }, token)\n }, token)\n\n\n }, err => { displayError(err, 3000); this._file_explorer_.resume() }, token)\n })\n\n } else {\n\n let path = this.menu.file.getPath()\n let name = path.substring(path.lastIndexOf(\"/\") + 1)\n let globule = this.menu.file.globule\n\n // if the file is a directory I will create archive and download it.\n if (this.menu.file.getIsDir()) {\n\n generatePeerToken(globule, token => {\n this._file_explorer_.displayWaitMessage(\"create archive before for \" + this.menu.file.getPath())\n createArchive(globule, [path], name,\n path_ => {\n\n let url = getUrl(globule)\n\n path_.split(\"/\").forEach(item => {\n item = item.trim()\n if (item.length > 0) {\n url += \"/\" + encodeURIComponent(item)\n }\n })\n\n if (token) {\n url += \"?token=\" + token\n }\n\n url += \"&application=\" + globule.application\n\n // Download the file...\n this._file_explorer_.displayWaitMessage(\"start download \" + name + \".tar.gz\")\n downloadFileHttp(url, name + \".tar.gz\",\n () => {\n // Now I will remove the file from the server....\n deleteFile(globule, path_,\n () => {\n this._file_explorer_.resume()\n this.selected = {} // clear up selected files.\n },\n err => { displayError(err, 3000); this._file_explorer_.resume(); this.selected = {} }, token)\n }, token)\n }, err => { displayError(err, 3000); this._file_explorer_.resume(); this.selected = {} }, token)\n })\n } else {\n // simply download the file.\n generatePeerToken(globule, token => {\n let url = getUrl(globule)\n\n path.split(\"/\").forEach(item => {\n item = item.trim()\n if (item.length > 0) {\n url += \"/\" + encodeURIComponent(item)\n }\n })\n\n if (token) {\n url += \"?token=\" + token\n }\n url += \"&application=\" + globule.application\n\n downloadFileHttp(url, name,\n () => {\n // Now I will remove the file from the server....\n this.selected = {}\n }, token), err => { displayError(err, 3000); this.selected = {} }\n })\n }\n\n }\n\n // Remove it from it parent... \n this.menu.close()\n this.menu.parentNode.removeChild(this.menu)\n }\n\n this.deleteMenuItem.action = () => {\n let files = []\n let fileList = \"\"\n for (var fileName in this.selected) {\n let file = this.selected[fileName]\n if (file.lnk) {\n if (!file.getName().endsWith(\".lnk\")) {\n file = file.lnk // here I will delete the lnk and not the original file.\n }\n }\n fileList += `
${file.getPath()}
`\n files.push(file)\n }\n\n // if not checked but selected with menu...\n if (fileList.length == 0) {\n let file = this.menu.file\n if (file.lnk) {\n if (!file.getName().endsWith(\".lnk\")) {\n file = file.lnk // here I will delete the lnk and not the original file.\n }\n }\n fileList += `
${file.getPath()}
`\n files.push(file)\n }\n\n\n let toast = displayMessage(\n `\n \n
\n
Your about to delete files
\n
\n ${fileList}\n
\n
Is it what you want to do?
\n
\n Yes\n No\n
\n
\n `,\n 15 * 1000 // 15 sec...\n );\n\n let yesBtn = document.querySelector(\"#yes-delete-files\")\n let noBtn = document.querySelector(\"#no-delete-files\")\n\n // On yes\n yesBtn.onclick = () => {\n toast.hideToast();\n\n let success = () => {\n displayMessage(\n `
\n Files are now deleted!\n
`,\n 3000\n );\n this.selected = {}\n }\n\n let index = 0;\n\n let deleteFile_ = () => {\n let f = files[index]\n f.setPath(f.getPath().split(\"\\\\\").join(\"/\"))\n let path = f.getPath().substring(0, f.getPath().lastIndexOf(\"/\"))\n index++\n let globule = this._file_explorer_.globule\n if (f.getIsDir()) {\n generatePeerToken(globule, token => {\n this._file_explorer_.globule.fileService.getPublicDirs(new GetPublicDirsRequest, { domain: this._file_explorer_.globule.domain, token: token })\n .then(rsp => {\n // if the dir is public I will remove it entry from the list and keep the directory...\n let dirs = rsp.getDirsList()\n if (dirs.includes(f.getPath())) {\n const rqst = new RemovePublicDirRequest\n rqst.setPath(f.getPath())\n generatePeerToken(globule, token => {\n globule.fileService.removePublicDir(rqst, { domain: globule.domain, token: token })\n .then(rsp => {\n FileController.removeDir(f.getPath(), this._file_explorer_.globule)\n Backend.publish(\"reload_dir_event\", \"/public\", false);\n })\n .catch(err => { displayError(err, 3000); })\n })\n } else {\n generatePeerToken(globule, token => {\n deleteDir(globule, f.getPath(),\n () => {\n FileController.removeDir(f.getPath(), this._file_explorer_.globule)\n this._file_explorer_.globule.eventHub.publish(\"reload_dir_event\", path, false);\n if (index < Object.keys(this.selected).length) {\n deleteFile_()\n } else {\n success()\n }\n },\n err => { displayError(err, 3000); }, token)\n })\n\n }\n })\n })\n\n } else {\n deleteFile(globule, f.getPath(),\n () => {\n FileController.removeDir(f.getPath(), this._file_explorer_.globule)\n Backend.publish(\"reload_dir_event\", path, false);\n if (index < Object.keys(this.selected).length) {\n deleteFile_()\n } else {\n success()\n }\n },\n err => { displayError(err, 3000); })\n }\n }\n\n // start file deletion...\n deleteFile_()\n }\n\n noBtn.onclick = () => {\n toast.hideToast();\n }\n // Remove it from it parent... \n this.menu.close()\n this.menu.parentNode.removeChild(this.menu)\n\n }\n\n this.renameMenuItem.action = () => {\n // Display the rename input...\n this.menu.rename()\n // Remove it from it parent... \n this.menu.close()\n this.menu.parentNode.removeChild(this.menu)\n }\n\n this.fileInfosMenuItem.action = () => {\n Backend.eventHub.publish(`display_file_infos_${this._file_explorer_.id}_event`, this.menu.file, true)\n // Remove it from it parent... \n this.menu.close()\n this.menu.parentNode.removeChild(this.menu)\n }\n\n this.titleInfosMenuItem.action = () => {\n // So here I will create a new permission manager object and display it for the given file.\n let file = this.menu.file\n if (file.videos || file.titles || file.audios) {\n Backend.eventHub.publish(`display_media_infos_${this._file_explorer_.id}_event`, file, true)\n } else {\n console.log(\"-----------------> 594 \", file)\n if (file.getMime().startsWith(\"video\") || file.getIsDir()) {\n TitleController.getFileVideosInfo(file, (videos) => {\n if (videos.length > 0) {\n Backend.eventHub.publish(`display_media_infos_${this._file_explorer_.id}_event`, file, true)\n // Remove it from it parent... \n if (this.menu.parentNode) {\n // Remove it from it parent... \n this.menu.close()\n this.menu.parentNode.removeChild(this.menu)\n }\n }\n }, err => {\n // get the title infos...\n TitleController.getFileTitlesInfo(file, (titles) => {\n\n if (titles.length > 0) {\n Backend.eventHub.publish(`display_media_infos_${this._file_explorer_.id}_event`, file, true)\n if (this.menu.parentNode) {\n // Remove it from it parent... \n this.menu.close()\n this.menu.parentNode.removeChild(this.menu)\n }\n }\n }, err => {\n\n // So here no video or title info exist for that file I will propose to the user \n // to create a new video infos...\n // Here I will ask the user for confirmation before actually delete the contact informations.\n let toast = displayMessage(\n `\n \n
\n
No informations was associated with that video file
\n `,\n 60 * 1000 // 60 sec...\n );\n\n let yesBtn = document.querySelector(\"#yes-create-video-info\")\n let noBtn = document.querySelector(\"#no-create-video-info\")\n\n // On yes\n yesBtn.onclick = () => {\n\n // So here I will ask witch type of information the user want's to generate, title, video or audio...\n toast.hideToast();\n\n let toast_ = displayMessage(\n `\n \n\n
\n
\n Please select the kind of information to create...\n
\n \n \n Video\n Movie or TV Episode/Serie\n \n
\n Ok\n Cancel\n
\n
\n `\n )\n\n let videoOption = toast_.toastElement.querySelector(\"#video-option\")\n let titleOption = toast_.toastElement.querySelector(\"#title-option\")\n\n let okBtn = toast_.toastElement.querySelector(\"#yes-create-info\")\n let cancelBtn = toast_.toastElement.querySelector(\"#no-create-info\")\n\n okBtn.onclick = () => {\n toast_.hideToast();\n if (videoOption.checked) {\n this.createVideoInformations(file, (videoInfo) => {\n file.videos = [videoInfo]\n Backend.eventHub.publish(`display_media_infos_${this._file_explorer_.id}_event`, file, true)\n if (this.menu.parentNode) {\n // Remove it from it parent... \n this.menu.close()\n this.menu.parentNode.removeChild(this.menu)\n }\n\n })\n } else if (titleOption.checked) {\n this.createTitleInformations(file, (titleInfo) => {\n file.titles = [titleInfo]\n Backend.eventHub.publish(`display_media_infos_${this._file_explorer_.id}_event`, file, true)\n if (this.menu.parentNode) {\n // Remove it from it parent... \n this.menu.close()\n this.menu.parentNode.removeChild(this.menu)\n }\n })\n }\n }\n\n cancelBtn.onclick = () => {\n toast_.hideToast();\n }\n\n }\n\n noBtn.onclick = () => {\n toast.hideToast();\n }\n\n })\n }, this._file_explorer_.globule)\n } else if (file.getMime().startsWith(\"audio\")) {\n getAudioInfo(file, (audios) => {\n if (audios.length > 0) {\n file.audios = audios // keep in the file itself...\n Backend.eventHub.publish(`display_media_infos_${this._file_explorer_.id}_event`, file, true)\n // Remove it from it parent... \n this.menu.close()\n this.menu.parentNode.removeChild(this.menu)\n }\n })\n }\n }\n }\n\n this.mananageAccessMenuItem.action = () => {\n // So here I will create a new permission manager object and display it for the given file.\n Backend.eventHub.publish(`display_permission_manager_${this._file_explorer_.id}_event`, this.menu.file, true)\n // Remove it from it parent... \n this.menu.close()\n this.menu.parentNode.removeChild(this.menu)\n }\n\n this.generateTimeLineItem.action = () => {\n // Generate the video time line...\n let rqst = new CreateVideoTimeLineRequest\n rqst.setWidth(180)\n rqst.setFps(0.2)\n let globule = this._file_explorer_.globule\n let path = this.menu.file.getPath()\n\n // Set the users files/applications\n if (this.menu.file.getPath().startsWith(\"/users\") || this.menu.file.getPath().startsWith(\"/applications\")) {\n path = globule.config.DataPath + \"/files\" + this.menu.file.getPath()\n }\n\n rqst.setPath(path)\n displayMessage(\"Create timeline for file at path \" + path, 3500)\n generatePeerToken(globule, token => {\n globule.mediaService.createVideoTimeLine(rqst, { domain: globule.domain, token: token })\n .then(rsp => {\n displayMessage(\"Timeline is created \" + path, 3500)\n })\n .catch(err => {\n displayError(err, 3000);\n })\n })\n\n // Remove it from it parent... \n this.menu.close()\n this.menu.parentNode.removeChild(this.menu)\n\n }\n\n this.generatePreviewItem.action = () => {\n // Generate the video preview...\n let rqst = new CreateVideoPreviewRequest\n rqst.setHeight(128)\n rqst.setNb(20)\n let globule = this._file_explorer_.globule\n let file = this.menu.file\n let path = file.getPath()\n\n\n // Set the users files/applications\n if (this.menu.file.getPath().startsWith(\"/users\") || file.getPath().startsWith(\"/applications\")) {\n path = globule.config.DataPath + \"/files\" + file.getPath()\n }\n\n rqst.setPath(path)\n displayMessage(\"Create preview for file at path \" + path, 3500)\n generatePeerToken(globule, token => {\n globule.mediaService.createVideoPreview(rqst, { domain: globule.domain, token: token })\n .then(rsp => {\n displayMessage(\"Preview are created \" + path, 3500)\n Backend.publish(\"refresh_dir_evt\", file.getPath().substring(0, file.getPath().lastIndexOf(\"/\")), false);\n })\n .catch(err => {\n displayError(err, 3000);\n })\n })\n // Remove it from it parent... \n this.menu.close()\n this.menu.parentNode.removeChild(this.menu)\n }\n\n this.toMp4MenuItem.action = () => {\n let rqst = new ConvertVideoToMpeg4H264Request\n let file = this.menu.file\n let path = file.getPath()\n\n let globule = this._file_explorer_.globule\n // Set the users files/applications\n if (file.getPath().startsWith(\"/users\") || file.getPath().startsWith(\"/applications\")) {\n path = globule.config.DataPath + \"/files\" + file.getPath()\n }\n rqst.setPath(path)\n\n displayMessage(\"Convert file at path \" + path, 3500)\n generatePeerToken(globule, token => {\n globule.mediaService.convertVideoToMpeg4H264(rqst, { domain: globule.domain, token: token })\n .then(rsp => {\n displayMessage(\"Conversion done \" + path, 3500)\n globule.eventHub.publish(\"refresh_dir_evt\", file.getPath().substring(0, file.getPath().lastIndexOf(\"/\")), false);\n })\n .catch(err => {\n displayError(err, 3000);\n })\n })\n // Remove it from it parent... \n this.menu.close()\n this.menu.parentNode.removeChild(this.menu)\n\n }\n\n this.toHlsMenuItem.action = () => {\n let rqst = new ConvertVideoToHlsRequest\n let file = this.menu.file\n let path = file.getPath()\n let globule = this._file_explorer_.globule\n // Set the users files/applications\n if (file.getPath().startsWith(\"/users\") || file.getPath().startsWith(\"/applications\")) {\n path = globule.config.DataPath + \"/files\" + file.getPath()\n }\n rqst.setPath(path)\n\n displayMessage(\"Convert file at path \" + path, 3500)\n generatePeerToken(globule, token => {\n globule.mediaService.convertVideoToHls(rqst, { domain: globule.domain, token: token })\n .then(rsp => {\n displayMessage(\"Conversion done \" + path, 3500)\n Backend.publish(\"refresh_dir_evt\", file.getPath().substring(0, file.getPath().lastIndexOf(\"/\")), false);\n })\n .catch(err => {\n displayError(err, 3000);\n })\n })\n\n // Remove it from it parent... \n this.menu.close()\n this.menu.parentNode.removeChild(this.menu)\n }\n\n this.shadowRoot.innerHTML = `\n \n\n
\n
\n `\n // get the div.\n this.div = this.shadowRoot.getElementById(id)\n\n // Create an observer instance\n const observer = new MutationObserver((mutationsList) => {\n for (const mutation of mutationsList) {\n if (mutation.type === \"attributes\" && mutation.attributeName === \"style\") {\n // Check if the display property changed to 'none'\n const displayValue = getComputedStyle(this.div).display;\n if (displayValue === \"none\") {\n console.log(\"The display property changed to 'none'.\");\n this.menu.close()\n if (this.menu.parentNode)\n this.menu.parentNode.removeChild(this.menu)\n }\n }\n }\n });\n\n // Configuration for the observer\n const config = { attributes: true, attributeFilter: [\"style\"] };\n\n // Start observing the target node\n observer.observe(this.div, config);\n\n this.div.onscroll = () => {\n if (this.div.scrollTop == 0) {\n this.div.style.boxShadow = \"\"\n this.div.style.borderTop = \"\"\n } else {\n this.div.style.boxShadow = \"inset 0px 5px 6px -3px rgb(0 0 0 / 40%)\"\n this.div.style.borderTop = \"1px solid var(--palette-divider)\"\n }\n\n // remove the menu...\n this.menu.close()\n if (this.menu.parentNode)\n this.menu.parentNode.removeChild(this.menu)\n }\n\n\n /** Remove the menu */\n this.div.onmouseover = () => {\n if (!this.menu.isOpen()) {\n if (this.menu.parentNode != undefined) {\n this.menu.parentNode.removeChild(this.menu)\n }\n }\n\n let fileIconDivs = this.div.querySelectorAll(\".file-icon-div\")\n for (var i = 0; i < fileIconDivs.length; i++) {\n fileIconDivs[i].classList.remove(\"active\")\n }\n }\n\n this.div.onclick = () => {\n this.menu.close()\n if (this.menu.parentNode != undefined) {\n this.menu.parentNode.removeChild(this.menu)\n }\n }\n\n }\n\n disconnectedCallback() {\n this.menu.close()\n if (this.menu.parentNode) {\n this.menu.parentNode.removeChild(this.menu)\n }\n }\n\n setFileExplorer(fileExplorer) {\n this._file_explorer_ = fileExplorer\n }\n\n /**\n * Copy file to a given path\n * @param {*} path \n */\n copy(path) {\n\n let rqst = new CopyRequest\n rqst.setPath(path)\n rqst.setFilesList(FileExplorer.paperTray)\n\n let globule = this._file_explorer_.globule\n generatePeerToken(globule, token => {\n // Create a directory at the given path.\n globule.fileService\n .copy(rqst, {\n token: token,\n domain: globule.domain\n }).then(() => {\n FileExplorer.paperTray = []\n editMode = \"\"\n FileController.removeDir(path, this._file_explorer_.globule)\n this._file_explorer_.globule.eventHub.publish(\"reload_dir_event\", path, false);\n })\n .catch(err => {\n FileExplorer.paperTray = []\n editMode = \"\"\n displayError(err, 3000);\n })\n })\n }\n\n createAudioInformations(file, callback) {\n\n }\n\n createTitleInformations(file, callback) {\n\n // I will create video description.\n let rqst = new CreateTitleRequest\n\n let titleInfo = new Title\n let uuid = getUuidByString(file.getName())\n titleInfo.setId(uuid)\n\n let poster = new Poster\n poster.setContenturl(file.getThumbnail())\n poster.setUrl()\n titleInfo.setPoster(poster)\n\n let globule = file.globule\n\n let url = getUrl(globule)\n file.getPath().split(\"/\").forEach(item => {\n item = item.trim()\n if (item.length > 0) {\n url += \"/\" + encodeURIComponent(item)\n }\n })\n\n if (file.getIsDir()) {\n titleInfo.setType(\"TVSeries\")\n }\n\n titleInfo.setUrl(url)\n\n /** Other info will be set by the user... */\n generatePeerToken(globule, token => {\n\n // Create the video title info.\n let createTitle = () => {\n rqst.setTitle(titleInfo)\n rqst.setIndexpath(globule.config.DataPath + \"/search/titles\")\n\n globule.titleService.createTitle(rqst, { domain: globule.domain, token: token })\n .then(rsp => {\n\n // So here I Will set the file association.\n let rqst = new AssociateFileWithTitleRequest\n rqst.setFilepath(file.getPath())\n rqst.setTitleid(titleInfo.getId())\n rqst.setIndexpath(globule.config.DataPath + \"/search/titles\")\n\n globule.titleService.associateFileWithTitle(rqst, { domain: globule.domain, token: token })\n .then(rsp => {\n titleInfo.globule = globule\n file.titles = [titleInfo]\n callback(titleInfo)\n\n }).catch(err => displayError(err, 3000))\n\n\n }).catch(err => displayError(err, 3000))\n }\n\n // Here is the file is not a dir I will evaluate the video duration.\n if (!file.getIsDir()) {\n let vid = document.createElement(\"video\")\n vid.src = url + \"?token=\" + token\n // wait for duration to change from NaN to the actual duration\n vid.ondurationchange = () => {\n titleInfo.setDuration(parseInt(vid.duration))\n createTitle()\n };\n } else {\n createTitle()\n }\n })\n\n }\n\n createVideoInformations(file, callback) {\n // I will create video description.\n let rqst = new CreateVideoRequest\n let videoInfo = new Video\n let uuid = getUuidByString(file.getName()) // I will generate a video from the file path...\n videoInfo.setId(uuid)\n\n let date = new Date()\n videoInfo.setDate(date.toISOString())\n let publisher = new Publisher\n publisher.setId(AccountController.account.getId() + \"@\" + AccountController.account.getDomain())\n\n if (AccountController.account.first_name.length > 0)\n publisher.setName(AccountController.account.first_name + \" \" + AccountController.account.last_name)\n\n let poster = new Poster\n poster.setContenturl(file.getThumbnail())\n poster.setUrl()\n videoInfo.setPoster(poster)\n\n videoInfo.setPublisherid(publisher)\n let globule = file.globule\n\n let url = getUrl(globule)\n file.getPath().split(\"/\").forEach(item => {\n item = item.trim()\n if (item.length > 0) {\n url += \"/\" + encodeURIComponent(item)\n }\n })\n videoInfo.setUrl(url)\n\n\n /** Other info will be set by the user... */\n generatePeerToken(globule, token => {\n\n let createVideoInfos = () => {\n rqst.setVideo(videoInfo)\n rqst.setIndexpath(globule.config.DataPath + \"/search/videos\")\n\n globule.titleService.createVideo(rqst, { domain: globule.domain, token: token })\n .then(rsp => {\n // So here I Will set the file association.\n let rqst = new AssociateFileWithTitleRequest\n rqst.setFilepath(file.getPath())\n rqst.setTitleid(videoInfo.getId())\n rqst.setIndexpath(globule.config.DataPath + \"/search/videos\")\n globule.titleService.associateFileWithTitle(rqst, { domain: globule.domain, token: token })\n .then(rsp => {\n videoInfo.globule = globule\n file.videos = [videoInfo]\n callback(videoInfo)\n }).catch(err => displayError(err, 3000))\n\n }).catch(err => displayError(err, 3000))\n }\n\n if (!file.getIsDir()) {\n let vid = document.createElement(\"video\")\n vid.src = url + \"?token=\" + token\n\n // wait for duration to change from NaN to the actual duration\n vid.ondurationchange = () => {\n videoInfo.setDuration(parseInt(vid.duration))\n createVideoInfos()\n };\n\n } else {\n createVideoInfos()\n }\n\n })\n\n }\n\n /**\n * Move file to a given path...\n * @param {*} path \n */\n move(path) {\n let rqst = new MoveRequest\n rqst.setPath(path)\n rqst.setFilesList(FileExplorer.paperTray)\n\n let globule = this._file_explorer_.globule\n\n generatePeerToken(globule, token => {\n // Create a directory at the given path.\n globule.fileService\n .move(rqst, {\n token: token,\n domain: globule.domain\n }).then(() => {\n for (var i = 0; i < FileExplorer.paperTray.length; i++) {\n let f = FileExplorer.paperTray[i]\n let path_ = f.substring(0, f.lastIndexOf(\"/\"))\n FileController.removeDir(path, this._file_explorer_.globule)\n\n Backend.publish(\"reload_dir_event\", path_, false);\n }\n FileExplorer.paperTray = []\n editMode = \"\"\n FileController.removeDir(path, this._file_explorer_.globule)\n Backend.publish(\"reload_dir_event\", path, false);\n })\n .catch(err => {\n FileExplorer.paperTray = []\n editMode = \"\"\n displayError(err, 3000);\n })\n })\n }\n\n init() {\n\n // The the path\n Backend.eventHub.subscribe(\"__create_link_event__\",\n (uuid) => {\n /** Nothin here. */\n },\n (evt) => {\n if (this._file_explorer_.id == evt.file_explorer_id) {\n if (!this._active_) {\n return\n }\n\n this._file_explorer_.createLink(evt.file, evt.dest, evt.globule)\n }\n }, true, this\n )\n\n // The the path\n Backend.eventHub.subscribe(\"__set_dir_event__\",\n (uuid) => {\n /** Nothin here. */\n },\n (evt) => {\n if (this._file_explorer_.id == evt.file_explorer_id) {\n if (evt.dir) {\n this.__dir__ = evt.dir\n this.menu.setFile(evt.dir)\n this.setDir(evt.dir)\n }\n }\n }, true, this\n )\n\n // The drop file event.\n Backend.eventHub.subscribe(`drop_file_${this._file_explorer_.id}_event`, (uuid) => { }, infos => {\n\n // be sure the parent file explorer has the focus.\n if (this._file_explorer_.style.zIndex != \"1000\") {\n return;\n }\n\n\n // Hide the icon parent div.\n let div = this.div.querySelector(\"#\" + infos.id)\n if (div != undefined) {\n div.parentNode.style.display = \"none\"\n } else {\n console.log(\"div with id \", infos.id, \"dosent exist in \", this.div)\n }\n\n if (editMode.length == 0) {\n editMode = \"cut\"\n }\n\n FileExplorer.paperTray = [];\n this.selected = {}\n\n for (var key in this.selected) {\n FileExplorer.paperTray.push(this.selected[key].path)\n }\n\n if (FileExplorer.paperTray.length == 0) {\n FileExplorer.paperTray.push(infos.file)\n }\n\n if (infos.domain != this._file_explorer_.globule.domain) {\n let globule = Backend.getGlobule(infos.domain)\n if (editMode == \"cut\" || editMode == \"copy\") {\n FileController.getFile(globule, infos.file, 80, 80, file => {\n generatePeerToken(globule, token => {\n // Here I will transfert a single file...\n\n let url = getUrl(globule)\n file.getPath().split(\"/\").forEach(item => {\n let component = encodeURIComponent(item.trim())\n if (component.length > 0) {\n url += \"/\" + component\n }\n })\n\n url += \"?token=\" + token;\n url += \"&application=\" + globule.application\n\n // So here I will need to upload the file on remote server...\n let rqst = new UploadFileRequest\n rqst.setDest(this.__dir__.getPath())\n rqst.setName(file.getName())\n rqst.setUrl(url)\n rqst.setDomain(infos.domain)\n rqst.setIsdir(file.getIsDir())\n\n generatePeerToken(this._file_explorer_.globule, token_ => {\n let stream = this._file_explorer_.globule.fileService.uploadFile(rqst, { domain: this._file_explorer_.globule.domain, token: token_ })\n\n let action = \"Move\"\n if (editMode == \"copy\") {\n action = \"Copy\"\n }\n let toast = displayMessage(`\n
\n
${action} ${file.getName()}
\n \n
\n \n
\n
\n `)\n\n let progressBar = toast.toastElement.querySelector(\"paper-progress\")\n\n let infoDiv = toast.toastElement.querySelector(\"#info-div\")\n\n // Here I will create a local event to be catch by the file uploader...\n stream.on(\"data\", (rsp) => {\n if (rsp.getInfo() != null) {\n\n infoDiv.innerHTML = rsp.getInfo()\n if (rsp.getUploaded() == rsp.getTotal()) {\n progressBar.setAttribute(\"indeterminate\", \"true\")\n } else {\n progressBar.removeAttribute(\"indeterminate\")\n }\n }\n progressBar.value = parseInt((rsp.getUploaded() / rsp.getTotal()) * 100)\n })\n\n stream.on(\"status\", (status) => {\n if (status.code === 0) {\n toast.hideToast()\n // in case of editmode is \"cut\" I will remove the original file...\n if (editMode == \"cut\") {\n if (file.getIsDir()) {\n let rqst = new DeleteDirRequest\n rqst.setPath(file.getPath())\n globule.fileService.deleteDir(rqst, { domain: globule.domain, token: token })\n .then(rsp => {\n FileController.removeDir(f.getPath(), this._file_explorer_.globule)\n globule.eventHub.publish(\"reload_dir_event\", file.getPath(), false);\n })\n .catch(err => displayError(err, 3000))\n } else {\n let rqst = new DeleteFileRequest\n rqst.setPath(file.getPath())\n globule.fileService.deleteFile(rqst, { domain: globule.domain, token: token })\n .then(rsp => {\n FileController.removeDir(f.getPath(), this._file_explorer_.globule)\n globule.eventHub.publish(\"reload_dir_event\", file.getPath().substring(0, file.getPath().lastIndexOf(\"/\")), false);\n })\n .catch(err => displayError(err, 3000))\n }\n }\n } else {\n displayError(status.details, 3000)\n }\n });\n })\n })\n }, err => displayError(err, 3000))\n\n } else if (editMode == \"lnks\") {\n FileController.getFile(globule, infos.file, 80, 80, file => {\n Backend.eventHub.publish(\"__create_link_event__\", { file: file, dest: this._file_explorer_.path, file_explorer_id: this._file_explorer_.id, globule: this._file_explorer_.globule }, true)\n }, err => displayError(err, 3000))\n }\n } else {\n if (editMode == \"cut\") {\n this.move(infos.dir)\n } else if (editMode == \"copy\") {\n this.copy(infos.dir)\n } else if (editMode == \"lnks\") {\n let globule = this._file_explorer_.globule\n FileController.getFile(globule, infos.file, 80, 80, file => {\n Backend.eventHub.publish(\"__create_link_event__\", { file: file, dest: this._file_explorer_.path, file_explorer_id: this._file_explorer_.id, globule: this._file_explorer_.globule }, true)\n }, err => displayError(err, 3000))\n }\n }\n\n }, true, this)\n }\n\n clearSelection() {\n this.selected = {}\n }\n\n rename(parent, f, offset) {\n\n // parent.style.position = \"relative\"\n\n // Here I will use a simple paper-card with a paper input...\n let html = `\n \n \n
\n \n
\n
\n Cancel\n Rename\n
\n \n `\n // only one dialog open at time.\n let renameDialog = document.body.querySelector(\"#rename-file-dialog\")\n\n if (renameDialog == undefined) {\n let range = document.createRange()\n document.body.appendChild(range.createContextualFragment(html))\n renameDialog = document.body.querySelector(\"#rename-file-dialog\")\n renameDialog.onmouseover = renameDialog.onmouseenter = (evt) => {\n evt.stopPropagation();\n }\n }\n\n renameDialog.style.top = offset + \"px\";\n\n\n let input = renameDialog.querySelector(\"#rename-file-input\")\n setTimeout(() => {\n input.focus()\n let index = f.getName().lastIndexOf(\".\")\n if (index == -1) {\n input.inputElement.textarea.select();\n } else {\n input.inputElement.textarea.setSelectionRange(0, index)\n }\n }, 50)\n\n let cancel_btn = renameDialog.querySelector(\"#rename-file-cancel-btn\")\n let rename_btn = renameDialog.querySelector(\"#rename-file-ok-btn\")\n\n // simply remove the dialog\n cancel_btn.onclick = (evt) => {\n evt.stopPropagation();\n renameDialog.parentNode.removeChild(renameDialog)\n }\n\n input.onkeydown = (evt) => {\n if (evt.keyCode == 13) {\n rename_btn.click()\n } else if (evt.keyCode == 27) {\n cancel_btn.click()\n }\n }\n\n rename_btn.onclick = (evt) => {\n evt.stopPropagation();\n\n renameDialog.parentNode.removeChild(renameDialog)\n let path = f.getPath().substring(0, f.getPath().lastIndexOf(\"/\"))\n\n // Now I will rename the file or directory...\n generatePeerToken(this._file_explorer_.globule, token => {\n renameFile(this._file_explorer_.globule, path, input.value, f.getName(),\n () => {\n // Refresh the parent folder...\n FileController.removeDir(path, this._file_explorer_.globule)\n this._file_explorer_.globule.eventHub.publish(\"reload_dir_event\", path, false);\n }, err => { displayError(err, 3000); }, token)\n })\n\n }\n }\n\n hide() {\n this.div.style.display = \"none\"\n this.hideMenu()\n }\n\n hideMenu() {\n this.menu.close()\n if (this.menu.parentNode) {\n this.menu.parentNode.removeChild(this.menu)\n }\n }\n\n show() {\n this.menu.close()\n this.div.style.display = \"block\"\n }\n\n // The ondrop evt...\n ondrop(evt) {\n evt.stopPropagation()\n\n let lnk = evt.dataTransfer.getData('text/html');\n\n if (evt.dataTransfer.getData(\"Url\").length > 0) {\n let url = evt.dataTransfer.getData(\"Url\")\n // Here we got an url...\n if (url.endsWith(\".torrent\") || url.startsWith(\"magnet:\")) {\n let path = this.__dir__.getPath()\n if (path.startsWith(\"/users/\") || path.startsWith(\"/applications/\")) {\n path = this._file_explorer_.globule.config.DataPath + \"/files\" + path\n }\n\n generatePeerToken(this._file_explorer_.globule, token => {\n let rqst = new DownloadTorrentRequest\n rqst.setLink(url)\n rqst.setDest(path)\n rqst.setSeed(true) // Can be an option in the console interface...\n\n // Display the message.\n this._file_explorer_.globule.torrentService.downloadTorrent(rqst, { domain: this._file_explorer_.globule.domain, token: token })\n .then(() => {\n displayMessage(\"your torrent was added and will start download soon...\", 3000)\n // Here I will \n }).catch(err => displayError(err, 3000))\n })\n\n } else if (url.endsWith(\".jpeg\") || url.endsWith(\".jpg\") || url.startsWith(\".bpm\") || url.startsWith(\".gif\") || url.startsWith(\".png\")) {\n // I will get the file from the url and save it on the server in the current directory.\n var getFileBlob = (url, cb) => {\n generatePeerToken(this._file_explorer_.globule, token => {\n var xhr = new XMLHttpRequest();\n xhr.timeout = 1500\n xhr.open(\"GET\", url);\n xhr.responseType = \"blob\";\n xhr.setRequestHeader(\"token\", token);\n xhr.setRequestHeader(\"domain\", this._file_explorer_.globule.domain);\n xhr.addEventListener('load', () => {\n cb(xhr.response);\n });\n xhr.send();\n })\n };\n\n var blobToFile = (blob, name) => {\n blob.lastModifiedDate = new Date();\n blob.name = name;\n return blob;\n };\n\n var getFileObject = (filePathOrUrl, cb) => {\n getFileBlob(filePathOrUrl, (blob) => {\n let name = filePathOrUrl.substring(filePathOrUrl.lastIndexOf(\"/\") + 1)\n cb(blobToFile(blob, name));\n });\n };\n\n getFileObject(url, (fileObject) => {\n generatePeerToken(this._file_explorer_.globule, token => {\n uploadFiles(this._file_explorer_.globule, token, this.__dir__.getPath(), [fileObject], () => {\n Backend.eventHub.publish(\"__upload_files_event__\", { dir: this.__dir__, files: [fileObject], lnk: lnk, globule: this._file_explorer_.globule }, true)\n }, err => displayError(err, 3000))\n })\n });\n\n } else {\n\n // Just beat it!\n // youtube-dl -f mp4 -o \"/tmp/%(title)s.%(ext)s\" https://www.youtube.com/watch?v=oRdxUFDoQe0&list=PLCD0445C57F2B7F41&index=12&ab_channel=michaeljacksonVEVO\n // In that case I will made use of the fabulous youtube-dl command line.\n let toast = displayMessage(`\n \n
\n What kind of file to you want to create?\n
\n \n Video (mp4)\n Audio (mp3)\n \n
\n
\n Ok\n Cancel\n
\n
\n `, 60 * 1000)\n\n let mp4Radio = toast.toastElement.querySelector(\"#media-type-mp4\")\n let mp3Radio = toast.toastElement.querySelector(\"#media-type-mp3\")\n\n mp4Radio.onclick = () => {\n mp3Radio.checked = !mp3Radio.checked\n }\n\n mp3Radio.onclick = () => {\n mp4Radio.checked = !mp3Radio.checked\n }\n\n let okBtn = toast.toastElement.querySelector(\"#upload-lnk-ok-button\")\n okBtn.onclick = () => {\n\n let rqst = new UploadVideoRequest\n rqst.setDest(this.__dir__.getPath())\n\n if (mp3Radio.checked) {\n rqst.setFormat(\"mp3\")\n } else {\n rqst.setFormat(\"mp4\")\n }\n rqst.setUrl(url)\n\n generatePeerToken(this._file_explorer_.globule, token => {\n\n let stream = this._file_explorer_.globule.mediaService.uploadVideo(rqst, { domain: this._file_explorer_.globule.domain, token: token })\n let pid = -1;\n\n // Here I will create a local event to be catch by the file uploader...\n stream.on(\"data\", (rsp) => {\n if (rsp.getPid() != null) {\n pid = rsp.getPid()\n }\n\n // Publish local event.\n Backend.eventHub.publish(\"__upload_link_event__\", { pid: pid, path: this.__dir__.getPath(), infos: rsp.getResult(), done: false, lnk: lnk, globule: this._file_explorer_.globule }, true);\n })\n\n stream.on(\"status\", (status) => {\n if (status.code === 0) {\n Backend.eventHub.publish(\"__upload_link_event__\", { pid: pid, path: this.__dir__.getPath(), infos: \"\", done: true, lnk: lnk, globule: this._file_explorer_.globule }, true);\n } else {\n displayError(status.details, 3000)\n }\n });\n }, err => displayError(err, 3000))\n toast.hideToast();\n\n }\n\n let cancelBtn = toast.toastElement.querySelector(\"#upload-lnk-cancel-button\")\n cancelBtn.onclick = () => {\n\n toast.hideToast();\n }\n\n }\n\n } else if (evt.dataTransfer.files.length > 0) {\n // So here I will simply upload the files...\n Backend.eventHub.publish(\"__upload_files_event__\", { dir: this.__dir__, files: evt.dataTransfer.files, lnk: lnk, globule: this._file_explorer_.globule }, true)\n } else {\n\n let html = `\n \n \n\n
\n \n Copy\n \n
\n\n
\n \n Move\n \n
\n\n
\n \n Create lnk's\n \n
\n\n
\n \n Cancel\n \n
\n\n \n `\n\n let files = JSON.parse(evt.dataTransfer.getData('files'))\n let id = evt.dataTransfer.getData('id')\n let domain = evt.dataTransfer.getData('domain')\n\n if (document.getElementById(\"file-actions-menu\")) {\n return; // nothing todo here.\n }\n\n let range = document.createRange()\n document.body.appendChild(range.createContextualFragment(html))\n let menu = document.getElementById(\"file-actions-menu\")\n\n let coords = getCoords(this._file_explorer_.filesIconView)\n\n menu.style.top = coords.top + 44 + \"px\"\n menu.style.left = coords.left + 10 + \"px\"\n\n // connect the move event.\n this._file_explorer_.addEventListener(\"move\", (e) => {\n // console.log(e.detail.cx, e.detail.cy)\n // I will simply recalculate the menu position.\n if (menu.parentNode != undefined) {\n let coords = getCoords(this._file_explorer_.filesIconView)\n menu.style.top = coords.top + 44 + \"px\"\n menu.style.left = coords.left + 10 + \"px\"\n }\n });\n\n let fct = () => {\n if (id.length > 0) {\n\n for (var key in this.selected) {\n FileExplorer.paperTray.push(this.selected[key].path)\n }\n\n files.forEach(f => {\n Backend.eventHub.publish(`drop_file_${this._file_explorer_.id}_event`, { file: f, dir: this.__dir__.getPath(), id: id, domain: domain }, true)\n })\n }\n }\n\n // Now I will set the actions...\n let copyMenuItem = menu.querySelector(\"#copy-menu-item\")\n copyMenuItem.onclick = () => {\n editMode = \"copy\"\n fct()\n menu.parentNode.removeChild(menu)\n }\n\n let moveMenuItem = menu.querySelector(\"#move-menu-item\")\n moveMenuItem.onclick = () => {\n editMode = \"cut\"\n fct()\n menu.parentNode.removeChild(menu)\n }\n\n let createLnksMenuItem = menu.querySelector(\"#create-lnks-menu-item\")\n createLnksMenuItem.onclick = () => {\n editMode = \"lnks\"\n fct()\n menu.parentNode.removeChild(menu)\n }\n\n let cancelMenuItem = menu.querySelector(\"#cancel-menu-item\")\n cancelMenuItem.onclick = () => {\n menu.parentNode.removeChild(menu)\n }\n }\n\n }\n}\n","import { FileController} from \"../../backend/file\"\nimport { Backend } from \"../../backend/backend\"\nimport { FilesView } from \"./filesView.js\"\nimport getUuidByString from \"uuid-by-string\"\nimport { getCoords } from '../utility.js';\n\nimport '@polymer/paper-checkbox/paper-checkbox.js';\nimport '@polymer/iron-icon/iron-icon.js';\nimport { TitleController } from \"../../backend/title\";\n\nexport class FilesListView extends FilesView {\n constructor() {\n super()\n\n }\n\n /**\n * Display the content of a directory\n * @param {*} dir \n */\n setDir(dir) {\n\n if(!FileController.validateDirAccess(dir)){\n return\n }\n\n this.div.innerHTML = \"\";\n\n\n let checkboxs = this.div.querySelectorAll(\"paper-checkbox\")\n for (var i = 0; i < checkboxs.length; i++) {\n if (!checkboxs[i].checked) {\n checkboxs[i].style.visibility = \"hidden\"\n }\n }\n\n\n let id = \"_\" + getUuidByString(dir.getPath() + \"/\" + dir.getName());\n\n let html = `\n \n
\n \n
\n
Name
\n
Modifiy
\n
Type
\n
Size
\n
\n \n \n
\n `\n\n // Create the header.\n this.div.innerHTML = html\n\n this.div.querySelector(`table`).onmouseleave = (evt) => {\n evt.stopPropagation()\n\n }\n\n this.div.querySelector(`table`).ondrop = (evt) => {\n evt.preventDefault()\n this.ondrop(evt)\n }\n\n this.div.querySelector(`table`).ondragover = (evt) => {\n evt.preventDefault()\n }\n\n this.div.onclick = (evt) => {\n evt.stopPropagation()\n\n }\n\n // get the info div that will contain the information.\n let fileListView = this.div.getElementsByClassName(\"files-list-view-info\")[0]\n if (dir == undefined) {\n return\n }\n for (let f of dir.getFilesList()) {\n let size = \"\"\n let mime = \"Dossier de fichiers\"\n let icon = \"icons:folder\"\n\n if (f.getName() == \"audio.m3u\") {\n dir.__audioPlaylist__ = f\n } else if (f.getName() == \"video.m3u\") {\n dir.__videoPlaylist__ = f\n } else {\n\n if (f.getMime().length > 0) {\n mime = f.getMime()\n }\n\n if (f.getMime().length > 0) {\n icon = \"editor:insert-drive-file\";\n if (f.getSize() > 1024) {\n if (f.getSize() > 1024 * 1024) {\n if (f.getSize() > 1024 * 1024 * 1024) {\n let fileSize = f.getSize() / (1024 * 1024 * 1024);\n\n size = fileSize.toFixed(2) + \" Gb\";\n } else {\n let fileSize = f.getSize() / (1024 * 1024);\n size = fileSize.toFixed(2) + \" Mb\";\n }\n } else {\n let fileSize = f.getSize() / 1024;\n size = fileSize.toFixed(2) + \" Kb\";\n }\n } else {\n size = f.getSize() + \" bytes\";\n }\n mime = f.getMime().split(\";\")[0].split(\"/\")\n } else {\n size = f.getFilesList().length + \" items\"\n }\n\n\n\n // Here I will get the last modified time from unix time.\n let modeTime = new Date(f.getModeTime() * 1000).toLocaleString()\n\n // Set the text.\n let html = `\n
\n \n \n \n ${f.getName()} \n
\n
${modeTime}
\n
${mime}
\n
${size}
\n `\n\n let row = document.createElement(\"tr\")\n row.innerHTML = html;\n\n let rowId = \"_\" + getUuidByString(f.getPath()).split(\"-\").join(\"_\")\n\n row.id = rowId;\n\n if (f.getMime().startsWith(\"video\")) {\n row.querySelector(`#${id}_icon`).icon = \"av:movie\"\n } else if (f.getMime().startsWith(\"audio\")) {\n row.querySelector(`#${id}_icon`).icon = \"av:music-video\"\n } else if (f.getMime().startsWith(\"image\")) {\n let icon = row.querySelector(\"iron-icon\")\n icon.style.display = \"none\"\n let img = row.querySelector(\"img\")\n img.src = f.getThumbnail()\n img.style.display = \"block\"\n } else if (f.getIsDir()) {\n row.querySelector(`#${id}_icon`).icon = \"icons:folder\"\n }\n\n\n let checkbox = row.querySelector(\"paper-checkbox\")\n // Connect interface from various point...\n checkbox.onclick = (evt) => {\n evt.stopPropagation();\n Backend.eventHub.publish(\"__file_select_unselect_\" + f.path, checkbox.checked, true)\n }\n\n Backend.eventHub.subscribe(\"__file_select_unselect_\" + f.path, () => { }, checked => {\n checkbox.checked = checked;\n if (checked) {\n checkbox.style.visibility = \"visible\"\n this.selected[f.path] = f\n } else {\n checkbox.style.visibility = \"hidden\"\n delete this.selected[f.path]\n }\n }, true, this)\n\n\n let span = row.querySelector(\"span\")\n span.onclick = (evt) => {\n evt.stopPropagation();\n if (f.getMime().startsWith(\"video\")) {\n Backend.eventHub.publish(\"__play_video__\", { file: f, file_explorer_id: this._file_explorer_.id }, true)\n } else if (f.getMime().startsWith(\"audio\")) {\n Backend.eventHub.publish(\"__play_audio__\", { file: f, file_explorer_id: this._file_explorer_.id }, true)\n } else if (f.getIsDir()) {\n this._file_explorer_.publishSetDirEvent(f.getPath())\n } else if (f.getMime().startsWith(\"image\")) {\n Backend.eventHub.publish(\"__show_image__\", { file: f, file_explorer_id: this._file_explorer_.id }, true)\n }\n this.menu.close()\n }\n\n if(mime[0] == \"video\"){\n // I will try to get the viedeo information.\n TitleController.getFileVideosInfo(f, videos=>{\n if(videos.length > 0){\n let video = videos[0]\n span.innerHTML = video.getDescription()\n\n //console.log(video.getPoster().getUrl(), video.getPoster().getContenturl())\n let img = row.querySelector(\"img\")\n img.src = video.getPoster().getUrl()\n img.style.display = \"block\"\n\n let icon = row.querySelector(\"iron-icon\")\n icon.style.display = \"none\"\n }\n }, err=>{\n TitleController.getFileTitlesInfo(f, titles=>{\n if(titles.length > 0){\n let title = titles[0]\n }\n }\n , err=>{\n }, f.globule)\n }, f.globule)\n }\n\n row.onmouseenter = (evt) => {\n evt.stopPropagation();\n\n if (!this.menu.isOpen()) {\n\n\n let files = [];\n for (var key in this.selected) {\n files.push(this.selected[key])\n }\n\n if (files.filter(f_ => f_.path === f.path).length == 0) {\n files.push(f)\n }\n\n\n this.menu.showBtn()\n\n document.body.appendChild(this.menu)\n\n this.menu.style.position = \"absolute\"\n this.menu.__top__ = coords.top\n this.menu.style.top = coords.top + \"px\"\n this.menu.__left__ = coords.left + 22\n this.menu.style.left = coords.left + 22 + \"px\"\n\n this.menu.setFile(f)\n\n this.menu.onmouseover = (evt) => {\n evt.stopPropagation();\n row.classList.add(\"active\")\n }\n\n this.menu.onmouseout = (evt) => {\n evt.stopPropagation();\n row.classList.remove(\"active\")\n }\n\n // set the rename function.\n this.menu.rename = () => {\n this.rename(row, f, row.offsetTop + row.offsetHeight + 6)\n }\n }\n }\n\n // On mouse over event.\n row.onmouseover = (evt) => {\n evt.stopPropagation();\n // if a rename box is open I will not display the menu...\n if (row.parentNode.querySelector(\"#rename-file-dialog\") != undefined) {\n return\n }\n checkbox.style.visibility = \"visible\"\n row.classList.add(\"active\")\n }\n\n // On mouseout event.\n row.onmouseleave = (evt) => {\n evt.stopPropagation()\n if (!checkbox.checked) {\n checkbox.style.visibility = \"hidden\"\n }\n row.classList.remove(\"active\")\n\n }\n\n if (!f.getName().startsWith(\".\")) {\n if (f.getIsDir()) {\n fileListView.insertBefore(row, fileListView.firstChild);\n let lnk = this.div.getElementsByClassName(\"file-lnk-ico\")[0]\n lnk.onclick = (evt) => {\n evt.stopPropagation();\n this._file_explorer_.publishSetDirEvent(f.getPath())\n }\n\n lnk.onmouseover = () => {\n lnk.style.cursor = \"pointer\"\n }\n\n lnk.onmouseleave = () => {\n lnk.style.cursor = \"default\"\n }\n\n } else {\n fileListView.appendChild(row);\n\n // TODO create the code for open file.\n }\n }\n }\n }\n }\n}\n\ncustomElements.define('globular-files-list-view', FilesListView)\n","\nimport { Backend } from \"../../backend/backend\";\nimport { FileController } from \"../../backend/file\";\nimport { TitleController } from \"../../backend/title\";\nimport { getCoords } from \"../utility\";\nimport { VideoPreview } from \"./videoPreview\";\n\nexport class FileIconView extends HTMLElement {\n // attributes.\n\n // Create the applicaiton view.\n constructor() {\n super()\n // Set the shadow dom.\n this.attachShadow({ mode: 'open' });\n\n let h = 80\n if (this.hasAttribute(\"height\")) {\n h = parseInt(this.getAttribute(\"height\"))\n }\n\n let w = 80\n if (this.hasAttribute(\"width\")) {\n w = parseInt(this.getAttribute(\"width\"))\n }\n\n // Innitialisation of the layout.\n this.shadowRoot.innerHTML = `\n \n\n
\n
\n \n \n \n \n
\n
\n `\n\n this.file = null;\n this.preview = null;\n }\n\n select() {\n let checkbox = this.shadowRoot.querySelector(\"paper-checkbox\")\n checkbox.checked = true\n checkbox.style.display = \"block\"\n Backend.eventHub.publish(\"__file_select_unselect_\" + this.file.getPath(), checkbox.checked, true)\n }\n\n unselect() {\n let checkbox = this.shadowRoot.querySelector(\"paper-checkbox\")\n checkbox.checked = false\n checkbox.style.display = \"none\"\n Backend.eventHub.publish(\"__file_select_unselect_\" + this.file.getPath(), checkbox.checked, true)\n }\n\n stopPreview() {\n if (this.preview)\n this.preview.stopPreview()\n }\n\n // Call search event.\n setFile(file, view) {\n\n this.file = file;\n\n let h = 80\n if (this.hasAttribute(\"height\")) {\n h = parseInt(this.getAttribute(\"height\"))\n }\n\n let w = 80\n if (this.hasAttribute(\"width\")) {\n w = parseInt(this.getAttribute(\"width\"))\n }\n\n // set reference from view...\n this._file_explorer_ = view._file_explorer_\n this.menu = view.menu\n this.div = view.div\n this.selected = view.selected\n this.rename = view.rename\n\n let fileIconDiv = this.shadowRoot.querySelector(`.file-icon-div`)\n this.fileIconDiv = fileIconDiv\n\n let fileType = file.getMime().split(\"/\")[0]\n let range = document.createRange()\n\n if (file.lnk != undefined) {\n // here the file is a lnk...\n let lnkIcon = `\n
\n \n
\n `\n fileIconDiv.appendChild(range.createContextualFragment(lnkIcon))\n }\n\n // Now I will append the file name span...\n let fileNameSpan = document.createElement(\"span\")\n fileNameSpan.style.maxWidth = \"100px\"\n\n let checkbox = fileIconDiv.querySelector(\"paper-checkbox\")\n\n checkbox.onclick = (evt) => {\n evt.stopPropagation();\n Backend.eventHub.publish(\"__file_select_unselect_\" + file.getPath(), checkbox.checked, true)\n }\n\n Backend.eventHub.subscribe(\"__file_select_unselect_\" + file.getPath(), () => { }, checked => {\n checkbox.checked = checked;\n if (checked) {\n checkbox.style.display = \"block\"\n this.selected[file.getPath()] = file\n } else {\n checkbox.style.display = \"none\"\n delete this.selected[file.getPath()]\n }\n }, true, this)\n\n let thumbtack = fileIconDiv.querySelector(\"svg\")\n thumbtack.onclick = (evt) => {\n evt.stopPropagation()\n // Do stuff here...\n FileController.hasLocal(file.getPath(), exists => {\n if (exists) {\n file.removeLocalCopy(() => {\n thumbtack.style.fill = \"\"\n thumbtack.style.display = \"none\";\n thumbtack.style.left = \"\"\n })\n } else {\n file.keepLocalyCopy(() => {\n thumbtack.style.display = \"block\";\n thumbtack.style.left = \"8px\"\n thumbtack.style.fill = \"var(--primary-color)\"\n })\n }\n })\n }\n\n // Here I will append the interation.\n fileIconDiv.onmouseover = (evt) => {\n evt.stopPropagation();\n checkbox.style.display = \"block\"\n thumbtack.style.display = \"block\"\n if (File.hasLocal)\n FileController.hasLocal(file.getPath(), exist => {\n if (exist) {\n thumbtack.style.display = \"block\";\n thumbtack.style.left = \"\"\n thumbtack.style.fill = \"var(--primary-color)\"\n }\n })\n\n\n let files = [];\n for (var key in this.selected) {\n files.push(this.selected[key])\n }\n\n if (files.filter(f => f.getPath() === file.getPath()).length == 0) {\n files.push(file)\n }\n\n }\n\n fileIconDiv.onmouseleave = (evt) => {\n evt.stopPropagation();\n let checkbox = fileIconDiv.querySelector(\"paper-checkbox\")\n if (!checkbox.checked) {\n checkbox.style.display = \"none\"\n }\n\n thumbtack.style.display = \"none\"\n\n if (File.hasLocal)\n FileController.hasLocal(file.getPath(), exist => {\n if (exist) {\n thumbtack.style.display = \"block\";\n thumbtack.style.left = \"8px\"\n thumbtack.style.fill = \"var(--primary-color)\"\n }\n })\n }\n\n // video or audio file can be keep localy\n if ((file.getMime().startsWith(\"video\") || file.getMime().startsWith(\"audio\")) && file.getMime() != \"video/hls-stream\") {\n if (File.hasLocal) {\n thumbtack.style.visibility = \"visible\"\n FileController.hasLocal(file.getPath(), exist => {\n if (exist) {\n thumbtack.style.display = \"block\";\n thumbtack.style.left = \"8px\"\n thumbtack.style.fill = \"var(--primary-color)\"\n }\n })\n }\n }\n\n if (fileType == \"video\") {\n\n /** In that case I will display the vieo preview. */\n let h = 72;\n\n this.preview = new VideoPreview(file, h, () => {\n fileNameSpan.style.wordBreak = \"break-all\"\n fileNameSpan.style.fontSize = \".85rem\"\n fileNameSpan.style.maxWidth = this.preview.width + \"px\"\n if (file.videos) {\n if (file.videos.length > 0)\n fileNameSpan.innerHTML = file.videos[0].getDescription()\n }\n\n }, this._file_explorer_.globule)\n\n // keep the explorer link...\n this.preview._file_explorer_ = this._file_explorer_\n this.preview.name = file.getName();\n\n fileIconDiv.insertBefore(this.preview, fileIconDiv.firstChild)\n\n this.preview.draggable = false\n\n fileIconDiv.ondrop = (evt) => {\n evt.stopPropagation();\n evt.preventDefault()\n let url = evt.dataTransfer.getData(\"Url\");\n if (url.startsWith(\"https://www.imdb.com/\")) {\n view.setImdbTitleInfo(url, file)\n }\n }\n\n // Retreive the video title to display more readable file name...\n TitleController.getFileVideosInfo(file, videos => {\n\n fileNameSpan.innerHTML = videos[0].getDescription()\n\n // keep the video in the file itself...\n file.videos = videos\n\n }, err => {\n TitleController.getFileTitlesInfo(file, (titles) => {\n let title = titles[0]\n let name = title.getName()\n if (title.getEpisode() > 0) {\n name += \" S\" + title.getSeason() + \"-E\" + title.getEpisode()\n }\n fileNameSpan.innerHTML = name\n fileNameSpan.title = file.getPath()\n\n }, err => { }, this._file_explorer_.globule)\n }, this._file_explorer_.globule)\n\n\n } else if (file.getIsDir()) {\n\n // Here I will create a folder mosaic from the folder content...\n let folderIcon = document.createRange().createContextualFragment(``)\n fileIconDiv.insertBefore(folderIcon, fileIconDiv.firstChild)\n\n\n fileIconDiv.onclick = (evt) => {\n evt.stopPropagation();\n this._file_explorer_.publishSetDirEvent(file.getPath())\n }\n\n folderIcon.draggable = false\n\n // So here I will try to get infos.json file...\n FileController.getFile(file.globule, file.getPath() + \"/infos.json\", -1, -1, infos => {\n\n // read the text information...\n FileController.readText(infos, text => {\n\n\n // Read the json file and get the title infos...\n let title_infos_ = JSON.parse(text)\n\n // remove the default icon...\n TitleController.getTitleInfo(title_infos_[\"ID\"], (title) => {\n\n let folderIcon = fileIconDiv.querySelector(\"iron-icon\")\n folderIcon.parentNode.removeChild(folderIcon)\n\n\n file.titles = [title] // krr[]\n // so here I will initialyse the title infos.\n folderIcon = document.createRange().createContextualFragment(``)\n fileIconDiv.insertBefore(folderIcon, fileIconDiv.firstChild)\n\n fileIconDiv.onclick = (evt) => {\n evt.stopPropagation();\n this._file_explorer_.publishSetDirEvent(file.getPath())\n }\n\n folderIcon.draggable = false\n\n fileNameSpan.innerHTML = title.getName()\n }, err => { }, this._file_explorer_.globule)\n\n\n\n\n })\n\n }, err => {\n\n })\n\n } else if (file.getThumbnail() != undefined) {\n\n /** Display the thumbnail. */\n let img = document.createElement(\"img\")\n img.src = file.getThumbnail()\n img.draggable = false\n\n // The size of the span will be calculated in respect of the image size.\n let getMeta = (url) => {\n var img = new Image();\n img.onload = function () {\n if (img.width > 0 && img.height > 0) {\n w = (img.width / img.height) * h\n fileNameSpan.style.maxWidth = w + \"px\"\n fileNameSpan.style.wordBreak = \"break-all\"\n fileNameSpan.style.fontSize = \".85rem\"\n if (file.audios) {\n if (file.audios.length > 0)\n fileNameSpan.innerHTML = file.audios[0].getTitle()\n }\n\n }\n };\n img.src = url;\n }\n\n getMeta(file.getThumbnail())\n\n fileIconDiv.insertBefore(img, fileIconDiv.firstChild)\n\n if (fileType == \"image\") {\n img.onclick = (evt) => {\n evt.stopPropagation();\n Backend.eventHub.publish(\"__show_image__\", { file: file, file_explorer_id: this._file_explorer_.id }, true)\n this.menu.close()\n if (this.menu.parentNode)\n this.menu.parentNode.removeChild(this.menu)\n }\n } else if (fileType == \"audio\") {\n img.onclick = (evt) => {\n evt.stopPropagation();\n Backend.eventHub.publish(\"__play_audio__\", { file: file, file_explorer_id: this._file_explorer_.id }, true)\n this.menu.close()\n if (this.menu.parentNode)\n this.menu.parentNode.removeChild(this.menu)\n }\n\n } else {\n // here I will try the file viewer.\n img.onclick = (evt) => {\n evt.stopPropagation();\n Backend.eventHub.publish(\"__read_file__\", { file: file, file_explorer_id: this._file_explorer_.id }, true)\n this.menu.close()\n if (this.menu.parentNode)\n this.menu.parentNode.removeChild(this.menu)\n\n }\n }\n\n // display more readable name.\n TitleController.getFileAudiosInfo(file, audios => {\n if (audios.length > 0) {\n file.audios = audios // keep in the file itself...\n fileNameSpan.innerHTML = file.audios[0].getTitle()\n if (file.audios[0].getPoster())\n if (file.audios[0].getPoster().getContenturl().length > 0) {\n img.src = file.audios[0].getPoster().getContenturl()\n }\n }\n })\n\n }\n\n if (file.getIsDir()) {\n fileIconDiv.ondragover = (evt) => {\n evt.preventDefault()\n fileIconDiv.children[0].icon = \"icons:folder-open\"\n this._file_explorer_.setAtTop()\n }\n\n fileIconDiv.ondragleave = () => {\n fileIconDiv.children[0].icon = \"icons:folder\"\n }\n\n fileIconDiv.ondrop = (evt) => {\n evt.stopPropagation()\n\n evt.preventDefault()\n let url = evt.dataTransfer.getData(\"Url\");\n if (url.startsWith(\"https://www.imdb.com/title\")) {\n view.setImdbTitleInfo(url, file)\n } else if (evt.dataTransfer.files.length > 0) {\n // So here I will simply upload the files...\n Backend.eventHub.publish(\"__upload_files_event__\", { dir: file, files: evt.dataTransfer.files, globule: this._file_explorer_.globule }, true)\n } else {\n\n let files = JSON.parse(evt.dataTransfer.getData('files'))\n let id = evt.dataTransfer.getData('id')\n fileIconDiv.children[0].icon = \"icons:folder\"\n let domain = evt.dataTransfer.getData('domain')\n\n // Create drop_file_event...\n if (file != undefined && id.length > 0) {\n files.forEach(f => {\n Backend.eventHub.publish(`drop_file_${this._file_explorer_.id}_event`, { file: f, dir: file.getPath(), id: id, domain: domain }, true)\n })\n }\n }\n }\n }\n\n\n fileNameSpan.innerHTML = file.getName();\n fileIconDiv.parentNode.appendChild(fileNameSpan);\n\n fileIconDiv.onmouseenter = (evt) => {\n evt.stopPropagation();\n\n let thumbtacks = this.div.querySelectorAll(\"svg\")\n for (var i = 0; i < thumbtacks.length; i++) {\n if (thumbtacks[i].style.fill == \"var(--primary-color)\") {\n thumbtacks[i].style.left = \"8px\"\n } else {\n thumbtacks[i].style.display = \"none\"\n thumbtacks[i].style.left = \"\"\n }\n }\n\n if (File.hasLocal) {\n thumbtack.style.display = \"block\";\n FileController.hasLocal(file.getPath(), exist => {\n if (exist) {\n thumbtack.style.display = \"block\";\n thumbtack.style.left = \"\"\n thumbtack.style.fill = \"var(--primary-color)\"\n }\n })\n }\n\n let checkboxs = this.div.querySelectorAll(\"paper-checkbox\")\n for (var i = 0; i < checkboxs.length; i++) {\n if (!checkboxs[i].checked) {\n checkboxs[i].style.display = \"none\"\n }\n }\n\n let fileIconDivs = this.div.querySelectorAll(\".file-icon-div\")\n for (var i = 0; i < fileIconDivs.length; i++) {\n fileIconDivs[i].classList.remove(\"active\")\n }\n\n fileIconDiv.classList.add(\"active\")\n\n // display the actual checkbox...\n checkbox.style.display = \"block\"\n\n let files = [];\n for (var key in this.selected) {\n files.push(this.selected[key])\n }\n\n if (files.filter(f => f.getPath() === file.getPath()).length == 0) {\n files.push(file)\n }\n\n document.body.appendChild(this.menu)\n\n\n if (!this.menu.isOpen()) {\n this.menu.showBtn()\n //fileIconDiv.parentNode.appendChild(this.menu)\n\n let coords = getCoords(fileIconDiv.parentNode)\n this.menu.style.position = \"absolute\"\n this.menu.__top__ = coords.top + 4\n this.menu.style.top = coords.top + 4 + \"px\"\n this.menu.__left__ = coords.left + fileIconDiv.offsetWidth + 5 - 20\n this.menu.style.left = coords.left + fileIconDiv.offsetWidth + 5 - 20 + \"px\"\n\n this.menu.onmouseover = (evt) => {\n evt.stopPropagation();\n fileIconDiv.classList.add(\"active\")\n }\n\n this.menu.onmouseout = (evt) => {\n evt.stopPropagation();\n fileIconDiv.classList.remove(\"active\")\n }\n\n this.menu.setFile(file)\n\n // set the rename function.\n this.menu.rename = () => {\n this.rename(fileIconDiv, file, fileIconDiv.offsetHeight + 6)\n }\n }\n }\n }\n\n setActive() {\n this.fileIconDiv.classList.add(\"active\")\n }\n\n resetActive() {\n this.fileIconDiv.classList.remove(\"active\")\n }\n}\n\n\ncustomElements.define('globular-file-icon-view', FileIconView)\n","import { StartProcessAudioRequest, StartProcessVideoRequest, UploadVideoRequest } from \"globular-web-client/media/media_pb\";\nimport { displayMessage, displayError, generatePeerToken, getUrl } from \"../../backend/backend\";\nimport { ReadFileRequest } from \"globular-web-client/file/file_pb\";\nimport { FileIconView } from \"./fileIconView\";\nimport { mergeTypedArrays, uint8arrayToStringMethod } from \"../../Utility\"\nimport '@polymer/iron-icon/iron-icon.js';\nimport { playVideos } from \"../video\";\nimport { playAudios } from \"../audio\";\nimport { copyToClipboard } from \"../../backend/file\";\n\nexport class FileIconViewSection extends HTMLElement {\n // attributes.\n\n // Create the applicaiton view.\n constructor() {\n super()\n // Set the shadow dom.\n this.attachShadow({ mode: 'open' });\n\n let fileType = this.getAttribute(\"filetype\")\n\n // Innitialisation of the layout.\n this.shadowRoot.innerHTML = `\n \n
\n
${fileType}
\n
\n \n
\n
\n `\n\n this.countDiv = this.shadowRoot.querySelector(`#${fileType}_section_count`)\n\n let selectAllCheckbox = this.shadowRoot.querySelector(\"#select-all-checkbox\")\n selectAllCheckbox.onchange = () => {\n let iconViews = this.querySelectorAll(\"globular-file-icon-view\")\n if (selectAllCheckbox.checked) {\n iconViews.forEach(v => {\n v.select()\n })\n } else {\n iconViews.forEach(v => {\n v.unselect()\n })\n }\n }\n }\n\n // Set files...\n init(dir, fileType, view) {\n\n // set reference\n this.div = view.div\n this._file_explorer_ = view._file_explorer_\n this.menu = view.menu\n\n let copyUrl = (path) => {\n let globule = this._file_explorer_.globule\n\n generatePeerToken(globule, token => {\n let url = getUrl(globule)\n\n path.split(\"/\").forEach(item => {\n let component = encodeURIComponent(item.trim())\n if (component.length > 0) {\n url += \"/\" + component\n }\n\n })\n\n if (this.menu.file.mime == \"video/hls-stream\") {\n url += \"/playlist.m3u8\"\n }\n\n url += \"?token=\" + token;\n url += \"&application=\" + globule.application\n\n copyToClipboard(url)\n\n displayMessage(\"url was copy to clipboard...\", 3000)\n })\n }\n\n if (fileType == \"audio\" || fileType == \"video\") {\n let playlistDiv = this.shadowRoot.querySelector(`#${fileType}_playlist_div`)\n\n if (fileType == \"audio\") {\n playlistDiv.innerHTML = `\n \n \n \n \n `\n // Get reference to button...\n let refreshAudiosBtn = playlistDiv.querySelector(\"#refresh-audios-btn\")\n let playAudiosBtn = playlistDiv.querySelector(\"#play-audios-btn\")\n let copyAudiosBtn = playlistDiv.querySelector(\"#copy-audios-playlist-lnk\")\n let downloadAudiosBtn = playlistDiv.querySelector(\"#download-audios-btn\")\n let globule = this._file_explorer_.globule\n let playlist = null\n\n generatePeerToken(globule, token => {\n let rqst = new ReadFileRequest\n rqst.setPath(dir.getPath() + \"/.hidden/playlist.json\")\n let stream = globule.fileService.readFile(rqst, {\n token: token,\n domain: globule.domain,\n address: globule.config.address\n })\n\n let data = [];\n stream.on(\"data\", (rsp) => {\n data = mergeTypedArrays(data, rsp.getData());\n });\n\n stream.on(\"status\", (status) => {\n if (status.code == 0) {\n uint8arrayToStringMethod(data, (str) => {\n playlist = JSON.parse(str)\n if (downloadAudiosBtn)\n downloadAudiosBtn.style.display = \"block\"\n });\n }\n });\n })\n\n // Update videos from a channel.\n downloadAudiosBtn.onclick = () => {\n\n if (!playlist) {\n downloadAudiosBtn.style.display = \"none\"\n return\n }\n\n generatePeerToken(globule, token => {\n let rqst = new UploadVideoRequest\n rqst.setDest(playlist.path)\n rqst.setFormat(playlist.format)\n rqst.setUrl(playlist.url)\n\n let stream = this._file_explorer_.globule.mediaService.uploadVideo(rqst, { domain: this._file_explorer_.globule.domain, token: token })\n let pid = -1;\n\n // Here I will create a local event to be catch by the file uploader...\n stream.on(\"data\", (rsp) => {\n if (rsp.getPid() != null) {\n pid = rsp.getPid()\n }\n\n // Publish local event.\n Backend.eventHub.publish(\"__upload_link_event__\", { pid: pid, path: playlist.path, infos: rsp.getResult(), done: false, lnk: playlist.url, globule: this._file_explorer_.globule }, true);\n })\n\n stream.on(\"status\", (status) => {\n if (status.code === 0) {\n Backend.eventHub.publish(\"__upload_link_event__\", { pid: pid, path: playlist.path, infos: \"\", done: true, lnk: playlist.url, globule: this._file_explorer_.globule }, true);\n } else {\n displayError(status.details, 3000)\n }\n });\n })\n }\n\n\n refreshAudiosBtn.onclick = () => {\n let rqst = new StartProcessAudioRequest\n rqst.setPath(dir.getPath())\n let globule = this._file_explorer_.globule\n\n generatePeerToken(globule, token => {\n globule.mediaService.startProcessAudio(rqst, {\n token: token,\n domain: globule.domain,\n address: globule.config.address\n }).then(() => {\n displayMessage(\"playlist and audios informations are now updated\", 3000)\n })\n .catch(err => displayError(err, 3000))\n })\n\n }\n\n copyAudiosBtn.onclick = () => {\n copyUrl(dir.__audioPlaylist__.getPath())\n }\n\n playAudiosBtn.onclick = () => {\n let audios = []\n dir.getFilesList().forEach(f => {\n if (f.getMime().startsWith(\"audio\")) {\n if (f.audios) {\n audios = audios.concat(f.audios)\n }\n }\n })\n if (audios.length > 0) {\n playAudios(audios, dir.name)\n } else {\n displayMessage(\"no audio informations found to generate a playlist\")\n }\n\n }\n\n } else if (fileType == \"video\") {\n playlistDiv.innerHTML = `\n \n \n \n \n \n `\n\n // Get reference to button...\n let downloadVideosBtn = playlistDiv.querySelector(\"#download-videos-btn\")\n let refreshVideosBtn = playlistDiv.querySelector(\"#refresh-videos-btn\")\n let playVideosBtn = playlistDiv.querySelector(\"#play-videos-btn\")\n let copyVideosBtn = playlistDiv.querySelector(\"#copy-videos-playlist-lnk\")\n let watchingMenu = playlistDiv.querySelector(\"globular-watching-menu\")\n\n let globule = this._file_explorer_.globule\n let playlist = null\n\n watchingMenu.addEventListener(\"open-media-watching\", (evt) => {\n this.parentNode._file_explorer_.openMediaWatching(evt.detail.mediaWatching)\n })\n\n generatePeerToken(globule, token => {\n let rqst = new ReadFileRequest\n rqst.setPath(dir.getPath() + \"/.hidden/playlist.json\")\n let stream = globule.fileService.readFile(rqst, {\n token: token,\n domain: globule.domain,\n address: globule.config.address\n })\n\n let data = [];\n stream.on(\"data\", (rsp) => {\n data = mergeTypedArrays(data, rsp.getData());\n });\n\n stream.on(\"status\", (status) => {\n if (status.code == 0) {\n uint8arrayToStringMethod(data, (str) => {\n playlist = JSON.parse(str)\n downloadVideosBtn.style.display = \"block\"\n });\n }\n });\n })\n\n // Update videos from a channel.\n downloadVideosBtn.onclick = () => {\n\n if (!playlist) {\n downloadVideosBtn.style.display = \"none\"\n return\n }\n generatePeerToken(globule, token => {\n let rqst = new UploadVideoRequest\n rqst.setDest(playlist.path)\n rqst.setFormat(playlist.format)\n rqst.setUrl(playlist.url)\n\n let stream = this._file_explorer_.globule.mediaService.uploadVideo(rqst, { domain: this._file_explorer_.globule.domain, token: token })\n let pid = -1;\n\n // Here I will create a local event to be catch by the file uploader...\n stream.on(\"data\", (rsp) => {\n if (rsp.getPid() != null) {\n pid = rsp.getPid()\n }\n\n // Publish local event.\n Backend.eventHub.publish(\"__upload_link_event__\", { pid: pid, path: playlist.path, infos: rsp.getResult(), done: false, lnk: playlist.url, globule: this._file_explorer_.globule }, true);\n })\n\n stream.on(\"status\", (status) => {\n if (status.code === 0) {\n Backend.eventHub.publish(\"__upload_link_event__\", { pid: pid, path: playlist.path, infos: \"\", done: true, lnk: playlist.url, globule: this._file_explorer_.globule }, true);\n } else {\n displayError(status.details, 3000)\n }\n });\n })\n }\n\n refreshVideosBtn.onclick = () => {\n let rqst = new StartProcessVideoRequest\n rqst.setPath(dir.getPath())\n let globule = this._file_explorer_.globule\n\n generatePeerToken(globule, token => {\n globule.mediaService.startProcessVideo(rqst, {\n token: token,\n domain: globule.domain,\n address: globule.config.address\n }).then(() => {\n displayMessage(\"Playlist is updated. Informations will be update...\", 3000)\n\n\n })\n .catch(err => displayError(err, 3000))\n })\n\n\n }\n\n copyVideosBtn.onclick = () => {\n if (dir.__videoPlaylist__)\n copyUrl(dir.__videoPlaylist__.getPath())\n else\n displayMessage(\"no playlist found at path \", dir.getPath())\n }\n\n playVideosBtn.onclick = () => {\n let videos = []\n dir.getFilesList().forEach(f => {\n\n if (f.getMime().startsWith(\"video\")) {\n if (f.videos) {\n videos = videos.concat(f.videos)\n }\n }\n })\n\n if (videos.length > 0) {\n playVideos(videos, dir.name)\n } else {\n displayMessage(\"no video informations found to generate a playlist\", 3000)\n }\n }\n\n }\n }\n }\n\n updateCount() {\n this.shadowRoot.querySelector(`#section_count`).innerHTML = ` (${this.children.length})`\n }\n\n}\n\ncustomElements.define('globular-file-icon-view-section', FileIconViewSection)\n","import { FilesView } from \"./filesView.js\"\nimport getUuidByString from \"uuid-by-string\"\nimport { FileController } from \"../../backend/file\"\nimport {FileIconViewSection} from \"./fileIconViewSection.js\"\nimport { AssociateFileWithTitleRequest, CreatePersonRequest, CreateTitleRequest, Person, Poster, Title } from \"globular-web-client/title/title_pb.js\"\nimport { displayError, displayMessage, generatePeerToken } from \"../../backend/backend\"\nimport '@polymer/iron-icon/iron-icon.js';\nimport { TitleController } from \"../../backend/title\"\n\nexport class FilesIconView extends FilesView {\n constructor() {\n super()\n this.imageHeight = 80\n\n }\n\n /**\n * Display the content of a directory\n * @param {*} dir \n */\n /**\n * Display the content of a directory\n * @param {*} dir \n */\n setDir(dir) {\n\n if(!FileController.validateDirAccess(dir)){\n return\n }\n \n this.div.innerHTML = \"\";\n let h = this.imageHeight; // the height of the image/icon div\n let w = this.imageHeight;\n let hiddens = {};\n\n let html = `\n \n
\n \n
\n `\n\n // Clear the actual content..\n this.innerHTML = \"\"\n\n // Create the header.\n this.div.innerHTML = html\n this.container = this.div.querySelector(`#container`);\n\n this.container.onmouseleave = (evt) => {\n evt.stopPropagation()\n }\n\n this.container.onclick = (evt) => {\n evt.stopPropagation()\n }\n\n this.container.ondrop = (evt) => {\n evt.preventDefault()\n this.ondrop(evt)\n }\n\n this.container.ondragover = (evt) => {\n evt.preventDefault()\n this._file_explorer_.setAtTop()\n }\n\n let filesByType = {};\n let size = \"\"\n let mime = \"Dossier de fichiers\"\n let icon = \"icons:folder\"\n\n\n // get the info div that will contain the information.\n for (let f of dir.getFilesList()) {\n if (f.getName() == \"audio.m3u\") {\n dir.__audioPlaylist__ = f\n } else if (f.getName() == \"video.m3u\") {\n dir.__videoPlaylist__ = f\n } else {\n if (!f.getIsDir()) {\n icon = \"editor:insert-drive-file\";\n if (f.getName().endsWith(\".lnk\")) {\n // So here I will make little transformation...\n f.lnk.lnk = f\n f = f.lnk\n }\n\n if (f.getSize() > 1024) {\n if (f.getSize() > 1024 * 1024) {\n if (f.getSize() > 1024 * 1024 * 1024) {\n let fileSize = f.getSize() / (1024 * 1024 * 1024);\n\n size = fileSize.toFixed(2) + \" Gb\";\n } else {\n let fileSize = f.getSize() / (1024 * 1024);\n size = fileSize.toFixed(2) + \" Mb\";\n }\n } else {\n let fileSize = f.getSize() / 1024;\n size = fileSize.toFixed(2) + \" Kb\";\n }\n } else {\n size = f.getSize() + \" bytes\";\n }\n\n mime = f.getMime().split(\";\")[0].split(\"/\")\n } else {\n size = f.getFilesList().length + \" items\"\n }\n // the first part of the mime type will be use as tile and category of file.\n let fileType = f.getMime().split(\"/\")[0]\n\n if (f.getIsDir() && fileType.length == 0) {\n fileType = \"folder\"\n\n }\n if (filesByType[fileType] == undefined) {\n filesByType[fileType] = []\n }\n\n if (!f.getName().startsWith(\".\")) {\n filesByType[fileType].push(f)\n } else if (f.getName().startsWith(\".hidden\")) {\n // The hidden dir.\n if (f.getFilesList() != undefined) {\n f.getFilesList().forEach(file_ => {\n let path = file_.getPath().replace(\"/.hidden/\", \"/\")\n hiddens[path] = file_\n })\n }\n }\n }\n\n let range = document.createRange()\n // Now I will display files by their categories.\n for (var fileType in filesByType) {\n let section = this.querySelector(`#${fileType}_section`)\n\n // create the section if it not already exist...\n if (section == undefined && filesByType[fileType].length > 0) {\n\n let html = ``\n this.appendChild(range.createContextualFragment(html))\n\n section = this.querySelector(`#${fileType}_section`)\n section.init(dir, fileType, this)\n }\n\n // Now I will create the icon file view.\n filesByType[fileType].forEach(file => {\n\n let id = \"_\" + getUuidByString(file.getPath() + \"/\" + file.getName());\n if (!section.querySelector(\"#\" + id)) {\n let html = ``\n section.appendChild(range.createContextualFragment(html))\n section.updateCount()\n let fileIconView = section.querySelector(`#${id}`)\n fileIconView.setFile(file, this)\n\n fileIconView.draggable = true;\n fileIconView.ondragstart = (evt) => {\n\n // set the file path...\n let files = [];\n for (var key in this.selected) {\n files.push(this.selected[key].getPath())\n }\n\n if (files.length == 0) {\n files.push(file.getPath())\n }\n\n evt.dataTransfer.setData('files', JSON.stringify(files));\n evt.dataTransfer.setData('id', fileIconView.id);\n evt.dataTransfer.setData('domain', this._file_explorer_.globule.domain);\n }\n\n fileIconView.ondragend = (evt) => {\n evt.stopPropagation();\n }\n\n // Here I will append the interation.\n fileIconView.onmouseover = (evt) => {\n evt.stopPropagation();\n fileIconView.setActive()\n }\n\n fileIconView.onmouseleave = (evt) => {\n evt.stopPropagation();\n let fileIconViews = this.querySelectorAll(\"globular-file-icon-view\")\n for (var i = 0; i < fileIconViews.length; i++) {\n fileIconViews[i].resetActive()\n }\n }\n }\n })\n }\n }\n }\n\n /**\n * Set file info, this will made use of the search engine...\n */\n setFileInfo(info, file) {\n\n let title = new Title\n let persons_ = {}\n\n // init person infos...\n let createPersons = (values) => {\n let persons = []\n if (values != undefined) {\n values.forEach(v => {\n // The value to be store outside the title.\n let p = new Person\n p.setId(v.ID)\n p.setUrl(v.URL)\n p.setFullname(v.FullName)\n p.setBiography(v.Biography)\n p.setPicture(v.Picture)\n p.setBirthdate(v.BirthDate)\n p.setBirthplace(v.BirthPlace)\n persons.push(p)\n\n // Needed to save person...\n persons_[v.ID] = p\n })\n }\n\n return persons\n }\n\n // Create title object and set it values from json...\n title.setId(info.ID)\n title.setName(info.Name)\n title.setAkaList(info.AKA)\n title.setDescription(info.Description)\n title.setDuration(info.Duration)\n title.setGenresList(info.Genres)\n title.setNationalitiesList(info.Nationalities)\n title.setRating(parseFloat(info.Rating))\n title.setRatingcount(parseInt(info.RatingCount))\n title.setType(info.Type)\n\n // Set TVEpisode Season and Episode number.\n if (info.Type == \"TVEpisode\") {\n title.setSeason(info.Season)\n title.setEpisode(info.Episode)\n title.setSerie(info.Serie)\n }\n\n title.setUrl(info.URL)\n title.setYear(info.Year)\n\n title.setDirectorsList(createPersons(info.Directors))\n title.setActorsList(createPersons(info.Actors))\n title.setWritersList(createPersons(info.Writers))\n\n let poster = new Poster\n poster.setId(info.Poster.ID)\n poster.setUrl(info.Poster.URL)\n poster.setContenturl(info.Poster.ContentURL)\n title.setPoster(poster)\n\n let indexPath = this._file_explorer_.globule.config.DataPath + \"/search/titles\"\n\n // save the title infos\n let createTitle = () => {\n\n let rqst = new CreateTitleRequest\n rqst.setIndexpath(indexPath)\n rqst.setTitle(title)\n\n // Now I will create the title info...\n generatePeerToken(this._file_explorer_.globule, token => {\n this._file_explorer_.globule.titleService.createTitle(rqst, { domain: this._file_explorer_.globule.domain, token: token })\n .then(rsp => {\n // Now I will asscociated the file and the title.\n let rqst_ = new AssociateFileWithTitleRequest\n rqst_.setFilepath(file.getPath())\n rqst_.setTitleid(title.getId())\n rqst_.setIndexpath(indexPath)\n\n this._file_explorer_.globule.titleService.associateFileWithTitle(rqst_, { domain: this._file_explorer_.globule.domain, token: token })\n .then(rsp => {\n console.log(\"title was created!\")\n title.globule = this._file_explorer_.globule\n file.titles = [title]\n }).catch(err => displayError(err, 3000))\n\n }).catch(err => displayError(err, 3000))\n })\n }\n\n // get the list of person to be save...\n let persons = []\n for (var k in persons_) {\n persons.push(persons_[k])\n }\n\n // save person infos...\n let createPerson = (index) => {\n let p = persons[index]\n index++\n let rqst = new CreatePersonRequest\n rqst.setIndexpath(indexPath)\n rqst.setPerson(p)\n generatePeerToken(this._file_explorer_.globule, token => {\n this._file_explorer_.globule.titleService.createPerson(rqst, { domain: this._file_explorer_.globule.domain, token: token })\n .then(() => {\n if (index < persons.length) {\n createPerson(index)\n } else {\n createTitle()\n }\n }).catch(() => {\n if (index < persons.length) {\n createPerson(index)\n } else {\n createTitle()\n }\n })\n })\n }\n\n // save person and titles after...\n if (persons.length > 0) {\n let index = 0;\n createPerson(index)\n } else {\n createTitle()\n }\n\n }\n\n\n // Set imdb title info.\n setImdbTitleInfo(url, file) {\n\n let matchs = url.match(/tt\\d{5,8}/);\n if (matchs.length == 0) {\n return // nothing to todo...\n }\n\n TitleController.getImdbInfo(matchs[0], (info) => {\n // So here I will get the information from imdb and propose to assciate it with the file.\n let toast = displayMessage(`\n \n
\n
Your about to associate
\n
with file
\n
\n \n
\n
Is that what you want to do?
\n
\n Ok\n Cancel\n
\n
\n `, 60 * 1000)\n\n\n let cancelBtn = toast.toastElement.querySelector(\"#imdb-lnk-cancel-button\")\n cancelBtn.onclick = () => {\n toast.hideToast();\n }\n\n toast.toastElement.querySelector(\"#title-type\").innerHTML = info.Type\n toast.toastElement.querySelector(\"#title-name\").innerHTML = info.Name\n toast.toastElement.querySelector(\"#title-name\").href = info.URL\n toast.toastElement.querySelector(\"#title-poster\").src = info.Poster.ContentURL\n toast.toastElement.querySelector(\"#file-path\").innerHTML = file.name\n\n let okBtn = toast.toastElement.querySelector(\"#imdb-lnk-ok-button\")\n okBtn.onclick = () => {\n this.setFileInfo(info, file)\n toast.hideToast();\n }\n\n\n }, err => displayError(err, 3000), this._file_explorer_.globule)\n\n }\n}\n\ncustomElements.define('globular-files-icon-view', FilesIconView)\n","import { EditableStringList } from \"../list\";\nimport { PermissionsManager } from \"../permissionManager/permissionManager\";\n\n/**\n * Modify Audio Informations\n */\nexport class AudioInfoEditor extends HTMLElement {\n // attributes.\n\n // Create the applicaiton view.\n constructor(audio, audioInfosDisplay) {\n super()\n // Set the shadow dom.\n this.attachShadow({ mode: 'open' });\n\n let imageUrl = \"\" // in case the video dosent contain any poster info...\n if (audio.getPoster())\n imageUrl = audio.getPoster().getContenturl()\n\n // Innitialisation of the layout.\n this.shadowRoot.innerHTML = `\n \n
\n
\n
\n \n
\n \n
\n\n
\n\n
\n
\n
Audio Informations
\n
\n\n
\n
Id:
\n
${audio.getId()}
\n \n
\n \n
\n
\n\n\n
\n
Url:
\n
${audio.getUrl()}
\n \n
\n \n
\n
\n\n
\n
Title:
\n
${audio.getTitle()}
\n \n
\n \n
\n
\n\n
\n
Artist:
\n
${audio.getArtist()}
\n \n
\n \n
\n
\n\n
\n
Album Artist:
\n
${audio.getAlbumartist()}
\n \n
\n \n
\n
\n\n
\n
Composer:
\n
${audio.getComposer()}
\n \n
\n \n
\n
\n\n
\n
Album:
\n
${audio.getAlbum()}
\n \n
\n \n
\n
\n\n
\n
Comment:
\n
${audio.getComment()}
\n \n
\n \n
\n
\n\n
\n
Lyrics:
\n
${audio.getLyrics()}
\n \n
\n \n
\n
\n\n
\n
Year:
\n
${audio.getYear()}
\n \n
\n \n
\n
\n\n
\n
Disc Number:
\n
${audio.getDiscnumber()}
\n \n
\n \n
\n
\n\n
\n
Disc Total:
\n
${audio.getDisctotal()}
\n \n
\n \n
\n
\n\n
\n
Track Number:
\n
${audio.getTracknumber()}
\n \n
\n \n
\n
\n\n
\n
Track Total:
\n
${audio.getTracktotal()}
\n \n
\n \n
\n
\n\n
\n
Genres:
\n \n
\n \n
\n\n
\n
\n \n \n
\n Permissions\n \n Save\n Cancel\n
\n `\n\n this.shadowRoot.querySelector(\"#cancel-indexation-btn\").onclick = () => {\n let parent = this.parentNode\n parent.removeChild(this)\n parent.appendChild(audioInfosDisplay)\n }\n\n // Delete the postser/cover image.\n this.shadowRoot.querySelector(\"globular-image-selector\").ondelete = () => {\n audio.getPoster().setContenturl(\"\")\n }\n\n // Select new image.\n this.shadowRoot.querySelector(\"globular-image-selector\").onselectimage = (imageUrl) => {\n if (audio.getPoster() == null) {\n let poster = new Poster()\n audio.setPoster(poster)\n }\n\n audio.getPoster().setContenturl(imageUrl)\n }\n\n\n let audioGenresDiv = this.shadowRoot.querySelector(\"#audio-genres-div\")\n let audioGenresList = new EditableStringList(audio.getGenresList())\n audioGenresDiv.appendChild(audioGenresList)\n\n let editPemissionsBtn = this.shadowRoot.querySelector(\"#edit-permissions-btn\")\n let collapse_panel = this.shadowRoot.querySelector(\"#collapse-panel\")\n\n this.permissionManager = new PermissionsManager()\n this.permissionManager.permissions = null\n this.permissionManager.globule = audio.globule\n this.permissionManager.setPath(audio.getId())\n this.permissionManager.setResourceType = \"audio_info\"\n\n // toggle the collapse panel when the permission manager panel is close.\n this.permissionManager.onclose = () => {\n collapse_panel.toggle();\n }\n\n // I will display the permission manager.\n editPemissionsBtn.onclick = () => {\n collapse_panel.appendChild(this.permissionManager)\n collapse_panel.toggle();\n }\n\n // Here I will set the interaction...\n this.shadowRoot.querySelector(\"#cancel-indexation-btn\").onclick = () => {\n let parent = this.parentNode\n parent.removeChild(this)\n parent.appendChild(audioInfosDisplay)\n }\n\n // Delete the postser/cover image.\n this.shadowRoot.querySelector(\"globular-image-selector\").ondelete = () => {\n audio.getPoster().setContenturl(\"\")\n }\n\n // Select new image.\n this.shadowRoot.querySelector(\"globular-image-selector\").onselectimage = (imageUrl) => {\n if (audio.getPoster() == null) {\n let poster = new Poster()\n audio.setPoster(poster)\n }\n audio.getPoster().setContenturl(imageUrl)\n }\n\n // The audio title\n let editAudioTitleBtn = this.shadowRoot.querySelector(\"#edit-audio-title-btn\")\n let audioTitleInput = this.shadowRoot.querySelector(\"#audio-title-input\")\n let audioTitleDiv = this.shadowRoot.querySelector(\"#audio-title-div\")\n\n editAudioTitleBtn.onclick = () => {\n audioTitleInput.style.display = \"table-cell\"\n audioTitleDiv.style.display = \"none\"\n setTimeout(() => {\n audioTitleInput.focus()\n audioTitleInput.inputElement.inputElement.select()\n }, 100)\n }\n\n audioTitleInput.onblur = () => {\n audioTitleInput.style.display = \"none\"\n audioTitleDiv.style.display = \"table-cell\"\n audioTitleDiv.innerHTML = audioTitleInput.value\n }\n\n // The audio id\n let audioIdBtn = this.shadowRoot.querySelector(\"#edit-audio-id-btn\")\n let audioIdInput = this.shadowRoot.querySelector(\"#audio-id-input\")\n let audioIdDiv = this.shadowRoot.querySelector(\"#audio-id-div\")\n\n audioIdBtn.onclick = () => {\n audioIdInput.style.display = \"table-cell\"\n audioIdDiv.style.display = \"none\"\n setTimeout(() => {\n audioIdInput.focus()\n audioIdInput.inputElement.inputElement.select()\n }, 100)\n }\n\n // set back to non edit mode.\n audioIdInput.onblur = () => {\n audioIdInput.style.display = \"none\"\n audioIdDiv.style.display = \"table-cell\"\n audioIdDiv.innerHTML = audioIdInput.value\n }\n\n // The audio url\n let audioUrlBtn = this.shadowRoot.querySelector(\"#edit-audio-url-btn\")\n let audioUrlInput = this.shadowRoot.querySelector(\"#audio-url-input\")\n let audioUrlDiv = this.shadowRoot.querySelector(\"#audio-url-div\")\n\n audioUrlBtn.onclick = () => {\n audioUrlInput.style.display = \"table-cell\"\n audioUrlDiv.style.display = \"none\"\n setTimeout(() => {\n audioUrlInput.focus()\n audioUrlInput.inputElement.inputElement.select()\n }, 100)\n }\n\n // set back to non edit mode.\n audioUrlInput.onblur = () => {\n audioUrlInput.style.display = \"none\"\n audioUrlDiv.style.display = \"table-cell\"\n audioUrlDiv.innerHTML = audioUrlInput.value\n }\n\n // The artist\n let audioArtistBtn = this.shadowRoot.querySelector(\"#edit-audio-artist-btn\")\n let audioArtistInput = this.shadowRoot.querySelector(\"#audio-artist-input\")\n let audioArtistDiv = this.shadowRoot.querySelector(\"#audio-artist-div\")\n\n audioArtistBtn.onclick = () => {\n audioArtistInput.style.display = \"table-cell\"\n audioArtistDiv.style.display = \"none\"\n setTimeout(() => {\n audioArtistInput.focus()\n audioArtistInput.inputElement.inputElement.select()\n }, 100)\n }\n\n // set back to non edit mode.\n audioArtistInput.onblur = () => {\n audioArtistInput.style.display = \"none\"\n audioArtistDiv.style.display = \"table-cell\"\n audioArtistDiv.innerHTML = audioArtistInput.value\n }\n\n // The composer\n let audioComposerBtn = this.shadowRoot.querySelector(\"#edit-audio-composer-btn\")\n let audioComposerInput = this.shadowRoot.querySelector(\"#audio-composer-input\")\n let audioComposerDiv = this.shadowRoot.querySelector(\"#audio-composer-div\")\n\n audioComposerBtn.onclick = () => {\n audioComposerInput.style.display = \"table-cell\"\n audioComposerDiv.style.display = \"none\"\n setTimeout(() => {\n audioComposerInput.focus()\n audioComposerInput.inputElement.inputElement.select()\n }, 100)\n }\n\n // set back to non edit mode.\n audioComposerInput.onblur = () => {\n audioComposerInput.style.display = \"none\"\n audioComposerDiv.style.display = \"table-cell\"\n audioComposerDiv.innerHTML = audioComposerInput.value\n }\n\n // The album\n let audioAlbumBtn = this.shadowRoot.querySelector(\"#edit-audio-album-btn\")\n let audioAlbumInput = this.shadowRoot.querySelector(\"#audio-album-input\")\n let audioAlbumDiv = this.shadowRoot.querySelector(\"#audio-album-div\")\n\n audioAlbumBtn.onclick = () => {\n audioAlbumInput.style.display = \"table-cell\"\n audioAlbumDiv.style.display = \"none\"\n setTimeout(() => {\n audioAlbumInput.focus()\n audioAlbumInput.inputElement.inputElement.select()\n }, 100)\n }\n\n // set back to non edit mode.\n audioAlbumInput.onblur = () => {\n audioAlbumInput.style.display = \"none\"\n audioAlbumDiv.style.display = \"table-cell\"\n audioAlbumDiv.innerHTML = audioAlbumInput.value\n }\n\n // The album artist\n let audioAlbumArtistBtn = this.shadowRoot.querySelector(\"#edit-audio-album-artist-btn\")\n let audioAlbumArtistInput = this.shadowRoot.querySelector(\"#audio-album-artist-input\")\n let audioAlbumArtistDiv = this.shadowRoot.querySelector(\"#audio-album-artist-div\")\n\n audioAlbumArtistBtn.onclick = () => {\n audioAlbumArtistInput.style.display = \"table-cell\"\n audioAlbumArtistDiv.style.display = \"none\"\n setTimeout(() => {\n audioAlbumArtistInput.focus()\n audioAlbumArtistInput.inputElement.inputElement.select()\n }, 100)\n }\n\n audioAlbumArtistInput.onblur = () => {\n audioAlbumArtistInput.style.display = \"none\"\n audioAlbumArtistDiv.style.display = \"table-cell\"\n audioAlbumArtistDiv.innerHTML = audioAlbumArtistInput.value\n }\n\n // The audio comment\n let editAudioCommentBtn = this.shadowRoot.querySelector(\"#edit-audio-comment-btn\")\n let audioCommentInput = this.shadowRoot.querySelector(\"#audio-comment-input\")\n let audioCommentDiv = this.shadowRoot.querySelector(\"#audio-comment-div\")\n\n editAudioCommentBtn.onclick = () => {\n audioCommentInput.style.display = \"table-cell\"\n audioCommentDiv.style.display = \"none\"\n setTimeout(() => {\n audioCommentInput.focus()\n audioCommentInput.textarea.select()\n }, 100)\n }\n\n // set back to non edit mode.\n audioCommentInput.onblur = () => {\n audioCommentInput.style.display = \"none\"\n audioCommentDiv.style.display = \"table-cell\"\n audioCommentDiv.innerHTML = audioCommentInput.value\n }\n\n // The audio lyrics\n let editAudioLyricsBtn = this.shadowRoot.querySelector(\"#edit-audio-lyrics-btn\")\n let audioLyricsInput = this.shadowRoot.querySelector(\"#audio-lyrics-input\")\n let audioLyricsDiv = this.shadowRoot.querySelector(\"#audio-lyrics-div\")\n\n editAudioLyricsBtn.onclick = () => {\n audioLyricsInput.style.display = \"table-cell\"\n audioLyricsDiv.style.display = \"none\"\n setTimeout(() => {\n audioLyricsInput.focus()\n audioLyricsInput.textarea.select()\n }, 100)\n }\n\n // set back to non edit mode.\n audioLyricsInput.onblur = () => {\n audioLyricsInput.style.display = \"none\"\n audioLyricsDiv.style.display = \"table-cell\"\n audioLyricsDiv.innerHTML = audioLyricsInput.value\n }\n\n\n // The disc number\n let audioDiscNumberBtn = this.shadowRoot.querySelector(\"#edit-audio-disc-number-btn\")\n let audioDiscNumberInput = this.shadowRoot.querySelector(\"#audio-disc-number-input\")\n let audioDiscNumberDiv = this.shadowRoot.querySelector(\"#audio-disc-number-div\")\n\n audioDiscNumberBtn.onclick = () => {\n audioDiscNumberInput.style.display = \"table-cell\"\n audioDiscNumberDiv.style.display = \"none\"\n setTimeout(() => {\n audioDiscNumberInput.focus()\n audioDiscNumberInput.inputElement.inputElement.select()\n }, 100)\n }\n\n audioDiscNumberInput.onblur = () => {\n audioDiscNumberInput.style.display = \"none\"\n audioDiscNumberDiv.style.display = \"table-cell\"\n audioDiscNumberDiv.innerHTML = audioDiscNumberInput.value\n }\n\n // The disc total\n let audioDiscTotalBtn = this.shadowRoot.querySelector(\"#edit-audio-disc-total-btn\")\n let audioDiscTotalInput = this.shadowRoot.querySelector(\"#audio-disc-total-input\")\n let audioDiscTotalDiv = this.shadowRoot.querySelector(\"#audio-disc-total-div\")\n\n audioDiscTotalBtn.onclick = () => {\n audioDiscTotalInput.style.display = \"table-cell\"\n audioDiscTotalDiv.style.display = \"none\"\n setTimeout(() => {\n audioDiscTotalInput.focus()\n audioDiscTotalInput.inputElement.inputElement.select()\n }, 100)\n }\n\n // set back to non edit mode.\n audioDiscTotalInput.onblur = () => {\n audioDiscTotalInput.style.display = \"none\"\n audioDiscTotalDiv.style.display = \"table-cell\"\n audioDiscTotalDiv.innerHTML = audioDiscTotalInput.value\n }\n\n // The track number\n let audioTrackNumberBtn = this.shadowRoot.querySelector(\"#edit-audio-track-number-btn\")\n let audioTrackNumberInput = this.shadowRoot.querySelector(\"#audio-track-number-input\")\n let audioTrackNumberDiv = this.shadowRoot.querySelector(\"#audio-track-number-div\")\n\n audioTrackNumberBtn.onclick = () => {\n audioTrackNumberInput.style.display = \"table-cell\"\n audioTrackNumberDiv.style.display = \"none\"\n setTimeout(() => {\n audioTrackNumberInput.focus()\n audioTrackNumberInput.inputElement.inputElement.select()\n }, 100)\n }\n\n\n audioTrackNumberInput.onblur = () => {\n audioTrackNumberInput.style.display = \"none\"\n audioTrackNumberDiv.style.display = \"table-cell\"\n audioTrackNumberDiv.innerHTML = audioTrackNumberInput.value\n }\n\n // The track total\n let audioTrackTotalBtn = this.shadowRoot.querySelector(\"#edit-audio-track-total-btn\")\n let audioTrackTotalInput = this.shadowRoot.querySelector(\"#audio-track-total-input\")\n let audioTrackTotalDiv = this.shadowRoot.querySelector(\"#audio-track-total-div\")\n\n audioTrackTotalBtn.onclick = () => {\n audioTrackTotalInput.style.display = \"table-cell\"\n audioTrackTotalDiv.style.display = \"none\"\n setTimeout(() => {\n audioTrackTotalInput.focus()\n audioTrackTotalInput.inputElement.inputElement.select()\n }, 100)\n }\n\n // set back to non edit mode.\n audioTrackTotalInput.onblur = () => {\n audioTrackTotalInput.style.display = \"none\"\n audioTrackTotalDiv.style.display = \"table-cell\"\n audioTrackTotalDiv.innerHTML = audioTrackTotalInput.value\n }\n\n // The audio year\n let audioYearBtn = this.shadowRoot.querySelector(\"#edit-audio-year-btn\")\n let audioYearInput = this.shadowRoot.querySelector(\"#audio-year-input\")\n let audioYearDiv = this.shadowRoot.querySelector(\"#audio-year-div\")\n\n audioYearBtn.onclick = () => {\n audioYearInput.style.display = \"table-cell\"\n audioYearDiv.style.display = \"none\"\n setTimeout(() => {\n audioYearInput.focus()\n audioYearInput.inputElement.inputElement.select()\n }, 100)\n }\n\n // set back to non edit mode.\n audioYearInput.onblur = () => {\n audioYearInput.style.display = \"none\"\n audioYearDiv.style.display = \"table-cell\"\n audioYearDiv.innerHTML = audioYearInput.value\n }\n\n // set back the audio.\n this.shadowRoot.querySelector(\"#save-indexation-btn\").onclick = () => {\n\n // So here I will set back all values...\n audio.setId(audioIdInput.value)\n audio.setUrl(audioUrlInput.value)\n audio.setArtist(audioArtistInput.value)\n audio.setAlbumartist(audioAlbumArtistInput.value)\n audio.setAlbum(audioAlbumInput.value)\n audio.setComment(audioCommentInput.value)\n audio.setComposer(audioComposerInput.value)\n audio.setLyrics(audioLyricsInput.value)\n audio.setGenresList(audioGenresList.getItems())\n audio.setYear(audioYearInput.value)\n audio.setDiscnumber(audioDiscNumberInput.value)\n audio.setDisctotal(audioDiscTotalInput.value)\n audio.setTracknumber(audioTrackNumberInput.value)\n audio.setTracktotal(audioTrackTotalInput.value)\n\n let globule = audio.globule\n generatePeerToken(globule, token => {\n let rqst = new CreateAudioRequest\n rqst.setAudio(audio)\n rqst.setIndexpath(globule.config.DataPath + \"/search/audios\")\n globule.titleService.createAudio(rqst, { token: token, domain: globule.domain })\n .then(rsp => {\n displaySuccess(\"audio information for \" + audio.getTitle() + \" was saved\", 3000)\n }).catch(err => displayError(err, 3000))\n })\n\n audioInfosDisplay.setAudio(audio)\n }\n\n\n\n }\n\n // The connection callback.\n connectedCallback() {\n\n\n }\n}\n\ncustomElements.define('globular-audio-info-editor', AudioInfoEditor)\n","import f from \"@editorjs/checklist\";\nimport { AudioInfoEditor } from \"./audioInfomationsEditor\";\nimport { displayMessage } from \"../../backend/backend\";\n\nfunction toHoursAndMinutes(totalSeconds) {\n const totalMinutes = Math.floor(totalSeconds / 60);\n\n const seconds = totalSeconds % 60;\n const hours = Math.floor(totalMinutes / 60);\n const minutes = totalMinutes % 60;\n\n return { h: hours, m: minutes, s: seconds };\n}\n\n/**\n * Display basic file informations.\n */\nexport class AudioInfo extends HTMLElement {\n\n // Create the applicaiton view.\n constructor() {\n super()\n // Set the shadow dom.\n this.attachShadow({ mode: 'open' });\n\n this.isShort = false\n\n\n // Innitialisation of the layout.\n this.shadowRoot.innerHTML = `\n \n
\n
\n \n
\n
\n
\n
Title:
\n \n
\n
\n
Artist:
\n \n
\n
\n
Album:
\n \n
\n
\n
Album Artist:
\n \n
\n
\n
Genre:
\n \n
\n
\n
Year:
\n \n
\n
\n
Track:
\n \n
\n
\n
Duration:
\n \n
\n
\n
\n Edit\n Delete\n
\n
\n `\n\n\n if (!localStorage.getItem(\"user_token\")) {\n this.shadowRoot.querySelector(\"#edit-indexation-btn\").style.display = \"none\"\n this.shadowRoot.querySelector(\"#delete-indexation-btn\").style.display = \"none\"\n }\n\n }\n\n setAudio(audio) {\n this.shadowRoot.querySelector(\"#image\").src = audio.getPoster().getContenturl()\n this.shadowRoot.querySelector(\"#title-div\").innerHTML = audio.getTitle()\n this.shadowRoot.querySelector(\"#artist-div\").innerHTML = audio.getArtist()\n this.shadowRoot.querySelector(\"#album-div\").innerHTML = audio.getAlbum()\n this.shadowRoot.querySelector(\"#album-artist-div\").innerHTML = audio.getAlbumartist()\n this.shadowRoot.querySelector(\"#genre-div\").innerHTML = audio.getGenresList().join(\" / \")\n this.shadowRoot.querySelector(\"#year-div\").innerHTML = audio.getYear() + \"\"\n this.shadowRoot.querySelector(\"#track-div\").innerHTML = audio.getTracknumber() + \"\"\n let duration = toHoursAndMinutes(audio.getDuration())\n this.shadowRoot.querySelector(\"#duration-div\").innerHTML = duration.m + \":\" + duration.s + \"\"\n\n // Display the edit and delete buttons.\n if (localStorage.getItem(\"user_token\")) {\n let editor = new AudioInfoEditor(audio, this)\n\n let editIndexationBtn = this.shadowRoot.querySelector(\"#edit-indexation-btn\")\n editIndexationBtn.onclick = () => {\n // So here I will display the editor...\n let parent = this.parentNode\n parent.removeChild(this)\n parent.appendChild(editor)\n }\n }\n\n let deleteIndexationBtn = this.shadowRoot.querySelector(\"#delete-indexation-btn\")\n // Delete the indexation from the database.\n deleteIndexationBtn.onclick = () => {\n let toast = displayMessage(`\n \n
\n
Your about to delete indexation
\n \n
\n \n
\n
Is that what you want to do?
\n
\n Ok\n Cancel\n
\n
\n `, 60 * 1000)\n\n let cancelBtn = toast.toastElement.querySelector(\"#imdb-lnk-cancel-button\")\n cancelBtn.onclick = () => {\n toast.hideToast();\n }\n\n toast.toastElement.querySelector(\"#title-type\").innerHTML = audio.getTitle()\n toast.toastElement.querySelector(\"#title-poster\").src = audio.getPoster().getContenturl()\n\n let okBtn = toast.toastElement.querySelector(\"#imdb-lnk-ok-button\")\n okBtn.onclick = () => {\n let rqst = new DeleteVideoRequest()\n rqst.setAudioid(audio.getId())\n rqst.setIndexpath(Backend.globular.config.DataPath + \"/search/audio\")\n Backend.globular.titleService.deleteAudio(rqst, { domain: Backend.globular.domain, token: localStorage.getItem(\"user_token\") })\n .then(() => {\n displaySuccess(`${audio.getId()}:${audio.getTitle()} was deleted`, 3000)\n Backend.eventHub.publish(\"_delete_infos_\" + audio.getId() + \"_evt\", {}, true)\n this.parentNode.removeChild(this)\n\n if (this.ondelete) {\n this.ondelete()\n }\n })\n .catch(err => displayError(err, 3000))\n\n toast.hideToast();\n }\n }\n }\n}\n\ncustomElements.define('globular-audio-info', AudioInfo)\n","import { CreatePersonRequest, CreateVideoRequest, Publisher, UpdateVideoMetadataRequest } from \"globular-web-client/title/title_pb\";\nimport { PermissionsManager } from \"../permissionManager/permissionManager.js\";\nimport getUuidByString from \"uuid-by-string\"\nimport { Person } from \"globular-web-client/title/title_pb\";\nimport { PersonEditor } from \"./personEditor.js\";\nimport { Poster } from \"globular-web-client/title/title_pb\";\nimport { generatePeerToken, displayError, displaySuccess } from \"../../backend/backend\";\nimport { EditableStringList } from \"../list.js\";\nimport '@polymer/iron-autogrow-textarea/iron-autogrow-textarea.js';\nimport '@polymer/iron-icons/image-icons.js'\n\n/**\n * The video infos editor.\n */\nexport class VideoInfoEditor extends HTMLElement {\n // attributes.\n\n // Create the applicaiton view.\n constructor(video, videoInfosDisplay) {\n super()\n // Set the shadow dom.\n this.attachShadow({ mode: 'open' });\n this.videoInfosDisplay = videoInfosDisplay\n\n let imageUrl = \"\" // in case the video dosent contain any poster info...\n if (video.getPoster())\n imageUrl = video.getPoster().getContenturl()\n\n let publisher = video.getPublisherid()\n if (!publisher) {\n publisher = new Publisher\n }\n\n // Innitialisation of the layout.\n this.shadowRoot.innerHTML = `\n \n
\n
\n
\n \n
\n
\n\n
\n \n
\n
\n
Publisher
\n
\n
\n
Id:
\n
${publisher.getId()}
\n \n
\n \n
\n
\n
\n
Url:
\n
${publisher.getUrl()}
\n \n
\n \n
\n
\n
\n
Name:
\n
${publisher.getName()}
\n \n
\n \n
\n
\n
\n\n\n
\n
\n
Casting
\n \n \n
\n \n
\n\n
\n \n
\n\n
\n
\n
Video
\n
\n
\n
Id:
\n
${video.getId()}
\n \n
\n \n
\n
\n
\n
URL:
\n
${video.getUrl()}
\n \n
\n \n
\n
\n
\n
Description:
\n
${video.getDescription()}
\n \n
\n \n
\n
\n
\n
Genres:
\n \n
\n
\n
Tags:
\n \n
\n
\n
\n
\n \n \n
\n Permissions\n \n Save\n Cancel\n
\n `\n\n let editPemissionsBtn = this.shadowRoot.querySelector(\"#edit-permissions-btn\")\n let collapse_panel = this.shadowRoot.querySelector(\"#collapse-panel\")\n\n this.permissionManager = new PermissionsManager()\n this.permissionManager.permissions = null\n this.permissionManager.globule = video.globule\n this.permissionManager.setPath(video.getId())\n this.permissionManager.setResourceType = \"video_info\"\n\n let indexPath = video.globule.config.DataPath + \"/search/videos\"\n\n let addCastingBtn = this.shadowRoot.querySelector(\"#add-casting-btn\")\n addCastingBtn.onclick = () => {\n let html = `\n \n
\n \n
\n New\n Cancel\n
\n
\n \n `\n let parent = addCastingBtn.parentNode\n let addCastingPanel = parent.querySelector(\"#add-casting-panel\")\n if (addCastingPanel != null) {\n return\n }\n\n let range = document.createRange()\n parent.appendChild(range.createContextualFragment(html))\n\n let createNewPersonBtn = parent.querySelector(\"#new-person-btn\")\n createNewPersonBtn.onclick = () => {\n\n let person = new Person()\n person.setId(\"New Casting\")\n\n let editor = this.appendPersonEditor(person, video)\n editor.focus()\n\n // remove the panel...\n let addCastingPanel = parent.querySelector(\"#add-casting-panel\")\n addCastingPanel.parentNode.removeChild(addCastingPanel)\n }\n\n // close the search box...\n let searchPersonInput = parent.querySelector(\"globular-search-person-input\")\n\n searchPersonInput.oneditperson = (person) => {\n person.globule = video.globule\n let personEditor = new PersonEditor(person)\n let uuid = \"_\" + getUuidByString(person.getId()) + \"_edit_panel\"\n\n let div = document.body.querySelector(`#${uuid}`)\n if (div) {\n return // already a panel...\n }\n\n let html = `\n \n \n\n \n `\n\n let range = document.createRange()\n\n // so here I will append the editor into the body...\n document.body.appendChild(range.createContextualFragment(html))\n div = document.body.querySelector(`#${uuid}`)\n\n personEditor.onclose = () => {\n div.parentNode.removeChild(div)\n }\n\n div.appendChild(personEditor)\n personEditor.focus()\n }\n\n searchPersonInput.onaddcasting = (person) => {\n\n let globule = person.globule\n let indexPath = globule.config.DataPath + \"/search/videos\" // TODO set it correctly for video...\n\n generatePeerToken(globule, token => {\n\n // remove the video id from casting field.\n let casting = person.getCastingList()\n if (casting.indexOf(video.getId()) == 0) {\n casting.push(video.getId())\n }\n\n person.setCastingList(casting)\n\n let rqst = new CreatePersonRequest\n rqst.setPerson(person)\n rqst.setIndexpath(indexPath)\n\n // save the person witout the video id...\n globule.titleService.createPerson(rqst, { domain: globule.domain, token: token })\n .then(rsp => {\n // Now I will remove the person from the video casting...\n let casting = video.getCastingList()\n\n // remove it if it was existing.\n casting = casting.filter(p => p.getId() !== person.getId());\n\n // set it back.\n casting.push(person)\n video.setCastingList(casting)\n\n let rqst = new CreateVideoRequest\n rqst.setVideo(video)\n rqst.setIndexpath(indexPath)\n\n globule.titleService.createVideo(rqst, { domain: globule.domain, token: token })\n .then(rsp => {\n this.appendPersonEditor(person, video)\n // remove the panel...\n let addCastingPanel = parent.querySelector(\"#add-casting-panel\")\n addCastingPanel.parentNode.removeChild(addCastingPanel)\n }).catch(err => displayError(err))\n }).catch(err => displayError(err))\n\n })\n }\n\n searchPersonInput.onclose = parent.querySelector(\"#cancel-btn\").onclick = () => {\n let addCastingPanel = parent.querySelector(\"#add-casting-panel\")\n addCastingPanel.parentNode.removeChild(addCastingPanel)\n }\n\n\n }\n\n // toggle the collapse panel when the permission manager panel is close.\n this.permissionManager.onclose = () => {\n collapse_panel.toggle();\n }\n\n // I will display the permission manager.\n editPemissionsBtn.onclick = () => {\n collapse_panel.appendChild(this.permissionManager)\n collapse_panel.toggle();\n }\n\n // Here I will set the interaction...\n this.shadowRoot.querySelector(\"#cancel-indexation-btn\").onclick = () => {\n let parent = this.parentNode\n parent.removeChild(this)\n parent.appendChild(videoInfosDisplay)\n }\n\n // Delete the postser/cover image.\n this.shadowRoot.querySelector(\"globular-image-selector\").ondelete = () => {\n video.getPoster().setContenturl(\"\")\n }\n\n // Select new image.\n this.shadowRoot.querySelector(\"globular-image-selector\").onselectimage = (imageUrl) => {\n if (video.getPoster() == null) {\n let poster = new Poster()\n video.setPoster(poster)\n }\n\n video.getPoster().setContenturl(imageUrl)\n }\n\n\n // so here I will set the casting...\n video.getCastingList().forEach(p => {\n this.appendPersonEditor(p, video)\n })\n\n // The publisher id\n let editPublisherIdBtn = this.shadowRoot.querySelector(\"#edit-publisher-id-btn\")\n let publisherIdInput = this.shadowRoot.querySelector(\"#publisher-id-input\")\n let publisherIdDiv = this.shadowRoot.querySelector(\"#publisher-id-div\")\n\n editPublisherIdBtn.onclick = () => {\n publisherIdInput.style.display = \"table-cell\"\n publisherIdDiv.style.display = \"none\"\n setTimeout(() => {\n publisherIdInput.focus()\n publisherIdInput.inputElement.inputElement.select()\n }, 100)\n }\n\n publisherIdInput.onblur = () => {\n publisherIdInput.style.display = \"none\"\n publisherIdDiv.style.display = \"table-cell\"\n publisherIdDiv.innerHTML = publisherIdInput.value\n }\n\n // The publisher url\n let editPublisherUrlBtn = this.shadowRoot.querySelector(\"#edit-publisher-url-btn\")\n let publisherUrlInput = this.shadowRoot.querySelector(\"#publisher-url-input\")\n let publisherUrlDiv = this.shadowRoot.querySelector(\"#publisher-url-div\")\n\n editPublisherUrlBtn.onclick = () => {\n publisherUrlInput.style.display = \"table-cell\"\n publisherUrlDiv.style.display = \"none\"\n setTimeout(() => {\n publisherUrlInput.focus()\n publisherUrlInput.inputElement.inputElement.select()\n }, 100)\n }\n\n publisherIdInput.onblur = () => {\n publisherUrlInput.style.display = \"none\"\n publisherUrlDiv.style.display = \"table-cell\"\n publisherUrlDiv.innerHTML = publisherUrlInput.value\n }\n\n // The publisher name\n let editPublisherNameBtn = this.shadowRoot.querySelector(\"#edit-publisher-name-btn\")\n let publisherNameInput = this.shadowRoot.querySelector(\"#publisher-name-input\")\n let publisherNameDiv = this.shadowRoot.querySelector(\"#publisher-name-div\")\n\n editPublisherNameBtn.onclick = () => {\n publisherNameInput.style.display = \"table-cell\"\n publisherNameDiv.style.display = \"none\"\n setTimeout(() => {\n publisherNameInput.focus()\n publisherNameInput.inputElement.inputElement.select()\n }, 100)\n }\n\n publisherIdInput.onblur = () => {\n publisherNameInput.style.display = \"none\"\n publisherNameDiv.style.display = \"table-cell\"\n publisherNameDiv.innerHTML = publisherNameInput.value\n }\n\n\n // The video id\n let editVideoIdBtn = this.shadowRoot.querySelector(\"#edit-video-id-btn\")\n let videoIdInput = this.shadowRoot.querySelector(\"#video-id-input\")\n let videoIdDiv = this.shadowRoot.querySelector(\"#video-id-div\")\n\n editVideoIdBtn.onclick = () => {\n videoIdInput.style.display = \"table-cell\"\n videoIdDiv.style.display = \"none\"\n setTimeout(() => {\n videoIdInput.focus()\n videoIdInput.inputElement.inputElement.select()\n }, 100)\n }\n\n videoIdInput.onblur = () => {\n videoIdInput.style.display = \"none\"\n videoIdDiv.style.display = \"table-cell\"\n videoIdDiv.innerHTML = videoIdInput.value\n }\n\n // The original url link...\n let editVideoUrlBtn = this.shadowRoot.querySelector(\"#edit-video-url-btn\")\n let videoUrlInput = this.shadowRoot.querySelector(\"#video-url-input\")\n let videoUrlDiv = this.shadowRoot.querySelector(\"#video-url-div\")\n\n editVideoUrlBtn.onclick = () => {\n videoUrlInput.style.display = \"table-cell\"\n videoUrlDiv.style.display = \"none\"\n setTimeout(() => {\n videoUrlInput.focus()\n videoUrlInput.inputElement.inputElement.select()\n }, 100)\n }\n\n // set back to non edit mode.\n videoUrlInput.onblur = () => {\n videoUrlInput.style.display = \"none\"\n videoUrlDiv.style.display = \"table-cell\"\n videoUrlDiv.innerHTML = videoUrlInput.value\n\n }\n\n // The video description\n let editVideoDescriptionBtn = this.shadowRoot.querySelector(\"#edit-video-description-btn\")\n let videoVideoDescriptionInput = this.shadowRoot.querySelector(\"#video-description-input\")\n let videoVideoDescriptionDiv = this.shadowRoot.querySelector(\"#video-description-div\")\n\n editVideoDescriptionBtn.onclick = () => {\n videoVideoDescriptionInput.style.display = \"table-cell\"\n videoVideoDescriptionDiv.style.display = \"none\"\n setTimeout(() => {\n videoVideoDescriptionInput.focus()\n videoVideoDescriptionInput.textarea.select()\n }, 100)\n }\n\n // set back to non edit mode.\n videoVideoDescriptionInput.onblur = () => {\n videoVideoDescriptionInput.style.display = \"none\"\n videoVideoDescriptionDiv.style.display = \"table-cell\"\n videoVideoDescriptionDiv.innerHTML = videoVideoDescriptionInput.value\n }\n\n let videoGenresDiv = this.shadowRoot.querySelector(\"#video-genres-div\")\n let videoGenresList = new EditableStringList(video.getGenresList())\n videoGenresDiv.appendChild(videoGenresList)\n\n let videoTagsDiv = this.shadowRoot.querySelector(\"#video-tags-div\")\n let videoTagsList = new EditableStringList(video.getTagsList())\n videoTagsDiv.appendChild(videoTagsList)\n\n this.shadowRoot.querySelector(\"#save-indexation-btn\").onclick = () => {\n\n // set the publisher information.\n let publisher = video.getPublisherid()\n if (publisher == null) {\n publisher = new Publisher()\n }\n\n publisher.setId(publisherIdInput.value)\n publisher.setUrl(publisherUrlInput.value)\n publisher.setName(publisherNameInput.value)\n\n // set back the modified values.\n video.setPublisherid(publisher)\n\n // So here I will set video values back and update it in the parent...\n video.setId(videoIdInput.value)\n video.setUrl(videoUrlInput.value)\n video.setDescription(videoVideoDescriptionInput.value)\n\n video.setTagsList(videoTagsList.getItems())\n video.setGenresList(videoGenresList.getItems())\n\n // set the casting values...\n // casting are interfaced by PersonEditor and PersonEditor are contain \n // in the casting slot, so I will use children iterator here...\n for (var i = 0; i < this.children.length; i++) {\n this.children[i].save()\n }\n\n this.saveCasting(video, casting => {\n let globule = video.globule\n generatePeerToken(globule, token => {\n let indexPath = globule.config.DataPath + \"/search/videos\"\n let rqst = new CreateVideoRequest\n rqst.setVideo(video)\n rqst.setIndexpath(indexPath)\n video.setCastingList(casting)\n\n globule.titleService.createVideo(rqst, { domain: globule.domain, token: token })\n .then(rsp => {\n displaySuccess(\"Video Information are updated\", 3000)\n this.videoInfosDisplay.setVideo(video)\n\n // Now I will save the title metadata...\n let rqst = new UpdateVideoMetadataRequest\n rqst.setVideo(video)\n rqst.setIndexpath(indexPath)\n globule.titleService.updateVideoMetadata(rqst, { domain: globule.domain, token: token })\n .then(rsp => {\n console.log(\"metadata was update!\")\n })\n .catch(err => displayError(err))\n\n })\n .catch(err => displayError(err))\n let parent = this.parentNode\n parent.removeChild(this)\n parent.appendChild(videoInfosDisplay)\n })\n })\n }\n }\n\n // Save casting this will create new person and set value in existing one.\n saveCasting(video, callback) {\n\n let castingEditors = this.querySelectorAll(\"globular-person-editor\")\n let casting = []\n for (var i = 0; i < castingEditors.length; i++) {\n let person = castingEditors[i].getPerson()\n casting.push(person)\n\n let casting_ = person.getCastingList()\n if (!casting_) {\n casting_ = []\n }\n\n if (casting_.indexOf(video.getId()) == -1) {\n casting_.push(video.getId())\n }\n person.setCastingList(casting_)\n }\n\n let globule = video.globule\n\n let savePerson = (index) => {\n let indexPath = globule.config.DataPath + \"/search/videos\"\n let p = casting[index]\n index++\n let rqst = new CreatePersonRequest\n rqst.setIndexpath(indexPath)\n rqst.setPerson(p)\n\n // save the person one by one...\n generatePeerToken(globule, token => {\n globule.titleService.createPerson(rqst, { domain: globule.domain, token: token })\n .then(rsp => {\n if (index < casting.length) {\n savePerson(index)\n } else {\n callback(casting)\n }\n })\n .catch(err => {\n if (index < casting.length) {\n savePerson(index)\n } else {\n callback(casting)\n }\n })\n })\n }\n\n let index = 0\n if (casting.length > 0)\n savePerson(index)\n else\n callback([])\n\n }\n\n appendPersonEditor(person, video) {\n person.globule = video.globule\n let uuid = \"_\" + getUuidByString(person.getId())\n\n // Create the person editor.\n let personEditor = this.querySelector(`#${uuid}`)\n\n if (personEditor == null) {\n personEditor = new PersonEditor(person, video)\n personEditor.id = uuid;\n\n personEditor.slot = \"casting\"\n personEditor.onremovefromcast = (p) => {\n personEditor.parentNode.removeChild(personEditor)\n }\n\n // Append to the list of casting\n this.appendChild(personEditor)\n }\n\n return personEditor\n }\n\n}\n\ncustomElements.define('globular-video-editor', VideoInfoEditor)\n\n","import { DeleteVideoRequest } from \"globular-web-client/title/title_pb\";\nimport { parseDuration } from \"../utility\";\nimport { Backend, displaySuccess, displayError, displayMessage } from \"../../backend/backend\";\nimport { VideoInfoEditor } from \"./videoInformationsEditor.js\";\nimport getUuidByString from \"uuid-by-string\";\n\nconst __style__ = `\n.title-div {\n display: flex;\n\n}\n\n.title-poster-div {\n padding-right: 20px;\n}\n\n\n.title-informations-div {\n font-size: 1em;\n min-width: 350px;\n max-width: 450px;\n \n}\n\n.title-poster-div img, p{\n /*max-width: 256px;*/\n}\n\n.title-genre-span {\n border: 1px solid var(--palette-divider);\n padding: 1px;\n padding-left: 5px;\n padding-right: 5px;\n margin-right: 5px;\n user-select: none;\n}\n\n.rating-star{\n --iron-icon-fill-color: rgb(245 197 24);\n padding-right: 10px;\n height: 30px;\n width: 30px;\n}\n\n.title-rating-div{\n display: flex;\n align-items: center;\n color: var(--palette-text-secondery);\n font-size: 1rem;\n}\n\n.title-genres-div{\n padding: 5px;\n display: flex;\n flex-wrap: wrap;\n font-size: .9rem;\n}\n\n#rating-span{\n font-weight: 600;\n font-size: 1.2rem;\n color: var(--palette-text-primery);\n user-select: none;\n}\n\n.title-credit {\n flex-grow: 1;\n color: var(--palette-text-primery);\n border-bottom: 2px solid;\n border-color: var(--palette-divider);\n width: 100%;\n margin-bottom: 10px;\n}\n\n.title-files-div {\n display: flex;\n width: 100%;\n flex-wrap: wrap;\n max-width: 400px;\n}\n\n.title-files-div globular-video-preview {\n margin-right: 5px;\n}\n\n.title-files-div paper-progress{\n width: 100%;\n}\n\n.title-top-credit, title-credit{\n margin-top: 15px;\n display: flex;\n flex-direction: column;\n}\n\n.title-credit-title{\n font-weight: 400;\n font-size: 1.1rem;\n color: var(--palette-text-primery);\n}\n\n.title-credit-lst{\n display: flex;\n}\n\n.title-credit-lst a {\n color: var(--palette-warning-main);\n font-size: 1.1rem;\n margin-right: 12px;\n}\n\n.title-credit-lst a:link { text-decoration: none; }\n.title-credit-lst a:visited { text-decoration: none; }\n.title-credit-lst a:hover { text-decoration: none; cursor:pointer; }\n.title-credit-lst a:active { text-decoration: none; }\n\n/** Small **/\n@media only screen and (max-width: 600px) {\n .title-div {\n flex-direction: column;\n }\n\n .title-poster-div {\n display: flex;\n justify-content: center;\n margin-bottom: 20px;\n flex-direction: column;\n }\n\n globular-video-preview{\n margin-top: 10px;\n }\n}\n`\n\n/**\n * Video information\n */\nexport class VideoInfo extends HTMLElement {\n // attributes.\n\n\n // Create the applicaiton view.\n constructor(titleDiv, isShort) {\n super()\n // Set the shadow dom.\n this.attachShadow({ mode: 'open' });\n\n\n\n this.titleDiv = titleDiv\n this.isShort = isShort\n\n\n // Innitialisation of the layout.\n this.shadowRoot.innerHTML = `\n \n
\n
\n
\n \n
\n
\n
\n
\n \n \n
\n \n
\n
/10
\n
\n
\n
\n
\n
Star
\n \n
\n
\n
\n
\n
\n Edit\n Delete\n
\n
\n `\n\n if (!localStorage.getItem(\"user_token\")) {\n this.shadowRoot.querySelector(\"#edit-indexation-btn\").style.display = \"none\"\n this.shadowRoot.querySelector(\"#delete-indexation-btn\").style.display = \"none\"\n }\n\n\n }\n\n /** Set video information... */\n setVideo(video) {\n\n let score = video.getRating()\n\n let posterUrl = \"\"\n if (video.getPoster() != undefined) {\n // must be getContentUrl here... \n posterUrl = video.getPoster().getContenturl()\n this.shadowRoot.querySelector(\".title-poster-img\").src = posterUrl\n }\n\n this.shadowRoot.querySelector(\".title-synopsis-div\").innerHTML = video.getDescription()\n this.shadowRoot.querySelector(\"#rating-span\").innerHTML = score.toFixed(1)\n\n let genres = \"\"\n video.getGenresList().forEach((genre, index) => {\n genres += genre\n if (index < video.getGenresList().length - 1) {\n genres += \", \"\n }\n })\n\n let publisherName = \"\"\n if (video.getPublisherid() != undefined) {\n publisherName = video.getPublisherid().getName()\n\n }\n\n let duration = \"\"\n if (video.getDuration() > 0) {\n duration = parseDuration(video.getDuration())\n }\n\n // Set the header section.\n this.titleDiv.innerHTML = `\n
\n
${publisherName}
\n
\n
\n Genre: ${genres}\n
\n Duration: ${duration}\n \n
\n `\n\n // Here I will display the list of categories.\n let genresDiv = this.shadowRoot.querySelector(\".title-genres-div\")\n genresDiv.innerHTML = \"\"\n video.getTagsList().forEach(g => {\n let genreSpan = document.createElement(\"span\")\n genreSpan.classList.add(\"title-genre-span\")\n genreSpan.innerHTML = g\n genresDiv.appendChild(genreSpan)\n })\n\n\n // Display list of persons...\n let displayPersons = (div, persons) => {\n persons.forEach(p => {\n let uuid = \"_\" + getUuidByString(p.getId())\n let lnk = div.querySelector(`#${uuid}`)\n if (lnk == null) {\n lnk = document.createElement(\"a\")\n }\n lnk.id = uuid;\n lnk.href = p.getUrl()\n lnk.innerHTML = p.getFullname()\n lnk.target = \"_blank\"\n div.appendChild(lnk)\n })\n }\n\n displayPersons(this.shadowRoot.querySelector(\"#title-actors-lst\"), video.getCastingList())\n if (video.getCastingList().length > 0) {\n this.shadowRoot.querySelector(\"#title-actors-title\").innerHTML = \"Actors\"\n }\n\n let filesDiv = this.shadowRoot.querySelector(\".title-files-div\")\n filesDiv.innerHTML = \"\"\n\n /*GetTitleFiles(\"/search/videos\", video, filesDiv, (previews) => {\n\n })*/\n\n if (localStorage.getItem(\"user_token\") != null) {\n let editor = new VideoInfoEditor(video, this)\n\n let editIndexationBtn = this.shadowRoot.querySelector(\"#edit-indexation-btn\")\n editIndexationBtn.onclick = () => {\n // So here I will display the editor...\n let parent = this.parentNode\n parent.removeChild(this)\n parent.appendChild(editor)\n }\n }\n\n let deleteIndexationBtn = this.shadowRoot.querySelector(\"#delete-indexation-btn\")\n\n // Delete the indexation from the database.\n deleteIndexationBtn.onclick = () => {\n let toast = displayMessage(\n `\n \n
\n
Your about to delete indexation
\n \n
\n \n
\n
Is that what you want to do?
\n
\n Ok\n Cancel\n
\n
\n `, 60 * 1000)\n\n let cancelBtn = toast.toastElement.querySelector(\"#imdb-lnk-cancel-button\")\n cancelBtn.onclick = () => {\n toast.hideToast();\n }\n\n toast.toastElement.querySelector(\"#title-type\").innerHTML = video.getDescription()\n toast.toastElement.querySelector(\"#title-poster\").src = posterUrl\n\n let okBtn = toast.toastElement.querySelector(\"#imdb-lnk-ok-button\")\n okBtn.onclick = () => {\n let rqst = new DeleteVideoRequest()\n rqst.setVideoid(video.getId())\n rqst.setIndexpath(Backend.globular.config.DataPath + \"/search/videos\")\n Backend.globular.titleService.deleteVideo(rqst, { domain: Backend.globular.domain, token: localStorage.getItem(\"user_token\") })\n .then(() => {\n displaySuccess(`${video.getId()}:${video.getDescription()} was deleted`, 3000)\n Backend.eventHub.publish(\"_delete_infos_\" + video.getId() + \"_evt\", {}, true)\n this.parentNode.removeChild(this)\n\n if (this.ondelete) {\n this.ondelete()\n }\n })\n .catch(err => displayError(err, 3000))\n\n toast.hideToast();\n }\n }\n }\n}\n\ncustomElements.define('globular-video-info', VideoInfo)\n","\n/**\n * That panel will display the file Metadata information.\n */\nexport class FileMetaDataInfo extends HTMLElement {\n // attributes.\n\n // Create the applicaiton view.\n constructor() {\n super()\n // Set the shadow dom.\n this.attachShadow({ mode: 'open' });\n\n // Innitialisation of the layout.\n this.shadowRoot.innerHTML = `\n \n
\n
\n \n \n
\n \n \n \n
\n `\n // give the focus to the input.\n let container = this.shadowRoot.querySelector(\"#container\")\n let collapse_btn = container.querySelector(\"#collapse-btn\")\n\n let collapse_panel = container.querySelector(\"#collapse-panel\")\n collapse_btn.onclick = () => {\n if (!collapse_panel.opened) {\n collapse_btn.icon = \"unfold-more\"\n } else {\n collapse_btn.icon = \"unfold-less\"\n }\n collapse_panel.toggle();\n }\n\n }\n\n // Call search event.\n setMetadata(metadata) {\n\n this.shadowRoot.querySelector(\"#header-text\").innerHTML = `(${Object.keys(metadata).length})`\n let range = document.createRange()\n for (var id in metadata) {\n let value = metadata[id]\n let label = id.replace(/([a-z0-9])([A-Z])/g, '$1 $2')\n let result = {}\n let html = `\n
\n
${label}
\n \n
\n `\n\n if (id == \"Comment\") {\n // the comment is use to store video metadata...\n try {\n if (typeof value === 'string') {\n result = JSON.parse(atob(value))\n } else {\n result = JSON.parse(atob(value.stringValue))\n }\n } catch (e) {\n console.log(e)\n }\n\n if(result[\"Description\"]){\n value = result[\"Description\"]\n }\n }\n\n this.appendChild(range.createContextualFragment(html))\n let div = this.querySelector(`#${id}`)\n this.setValue(div, value)\n }\n }\n\n // display the value.\n setValue(div, value) {\n div.innerHTML = value\n }\n}\n\ncustomElements.define('globular-file-metadata-info', FileMetaDataInfo)\n","import { GetFileMetadataRequest } from \"globular-web-client/file/file_pb\";\nimport { getFileSizeString } from \"../utility\";\nimport { generatePeerToken, displayError } from \"../../backend/backend\";\nimport \"./fileMetaDataInfo.js\"\n\n/**\n * Display basic file informations.\n */\nexport class FileInfo extends HTMLElement {\n\n // Create the applicaiton view.\n constructor(file) {\n super()\n // Set the shadow dom.\n this.attachShadow({ mode: 'open' });\n let mime = file.getMime()\n\n // Innitialisation of the layout.\n this.shadowRoot.innerHTML = `\n \n
\n
\n \n
\n
\n
\n
Name:
\n
${file.getName()}
\n
\n
\n
Type:
\n
${mime}
\n
\n
\n
Location:
\n
${file.getPath()}
\n
\n
\n
Modified:
\n
${file.getModeTime()}
\n
\n
\n
Size:
\n
${getFileSizeString(file.getSize())}
\n
\n
\n
Checksum:
\n
${file.getChecksum()}
\n
\n
\n
Metadata:
\n
\n \n
\n
\n
\n
\n `\n\n let metadata_editor = this.shadowRoot.querySelector(\"globular-file-metadata-info\")\n\n let globule = file.globule\n let rqst = new GetFileMetadataRequest\n rqst.setPath(file.getPath())\n generatePeerToken(globule, token => {\n globule.fileService.getFileMetadata(rqst, { token: token, domain: globule.domain })\n .then(rsp => {\n\n metadata_editor.setMetadata(rsp.getResult().toJavaScript())\n })\n .catch(err => displayError(err))\n })\n\n }\n\n\n}\n\ncustomElements.define('globular-file-info', FileInfo)\n","import getUuidByString from \"uuid-by-string\"\n\nimport { AudioInfo } from \"./audioInfo.js\"\nimport { VideoInfo } from \"./videoInfo.js\"\nimport { TitleInfo } from \"./titleInfo.js\"\nimport { BlogPostInfo } from \"./blogPostInfo.js\"\nimport { FileInfo } from \"./fileInfo.js\"\nimport { Backend } from \"../../backend/backend\"\n\n\n/**\n * Display information about given object ex. titles, files...\n */\nexport class InformationsManager extends HTMLElement {\n // attributes.\n\n // Create the applicaiton view.\n constructor() {\n super()\n // Set the shadow dom.\n this.attachShadow({ mode: 'open' });\n let isShort = this.hasAttribute(\"short\")\n this.onclose = null;\n\n // Innitialisation of the layout.\n // Innitialisation of the layout.\n this.shadowRoot.innerHTML = `\n \n
\n
\n \n \n
\n \n
\n `\n // give the focus to the input.\n this.container = this.shadowRoot.querySelector(\"#container\")\n\n // The close button...\n let closeButton = this.shadowRoot.querySelector(\"paper-icon-button\")\n closeButton.onclick = () => {\n // remove it from it parent.\n this.parentNode.removeChild(this)\n if (this.onclose != null) {\n this.onclose()\n }\n\n }\n\n // Connect event here...\n let globules = Backend.globule\n\n let subscribe = (index) => {\n let globule = globules[index]\n index++\n globule.eventHub.subscribe(\"delete_audio_event\", uuid => { }, evt => {\n let id = \"_\" + getUuidByString(evt)\n if (this.querySelector(\"#\" + id)) {\n if (this.parentNode)\n this.parentNode.removeChild(this)\n }\n }, false)\n\n globule.eventHub.subscribe(\"delete_video_event\", uuid => { }, evt => {\n let id = \"_\" + getUuidByString(evt)\n if (this.querySelector(\"#\" + id)) {\n if (this.parentNode)\n this.parentNode.removeChild(this)\n }\n }, false)\n\n globule.eventHub.subscribe(\"delete_title_event\", uuid => { }, evt => {\n let id = \"_\" + getUuidByString(evt)\n if (this.querySelector(\"#\" + id)) {\n if (this.parentNode)\n this.parentNode.removeChild(this)\n }\n }, false)\n\n if (index < globules.length) {\n subscribe(index)\n }\n }\n\n if (globules > 0) {\n let index = 0\n subscribe(index)\n }\n\n }\n\n hideHeader() {\n if (this.shadowRoot.querySelector(\"paper-icon-button\"))\n this.shadowRoot.querySelector(\"paper-icon-button\").style.display = \"none\"\n if (this.shadowRoot.querySelector(\"#title-name\"))\n this.shadowRoot.querySelector(\"#title-name\").style.display = \"none\"\n }\n\n /**\n * Display video informations.\n * @param {*} videos \n */\n setAudiosInformation(audios) {\n this.innerHTML = \"\" // remove previous content.\n this.shadowRoot.querySelector(\".title-div\").innerHTML = \"\"\n let audio = audios[0]\n let audioInfo = new AudioInfo(this.shadowRoot.querySelector(\".title-div\"), this.hasAttribute(\"short\"))\n audioInfo.ondelete = () => {\n if (this.parentNode)\n this.parentNode.removeChild(this)\n }\n audioInfo.id = \"_\" + getUuidByString(audio.getId())\n audioInfo.setAudio(audio)\n\n\n this.appendChild(audioInfo)\n }\n\n /**\n * Display video informations.\n * @param {*} videos \n */\n setVideosInformation(videos) {\n this.innerHTML = \"\" // remove previous content.\n this.shadowRoot.querySelector(\".title-div\").innerHTML = \"\"\n let video = videos[0]\n let videoInfo = new VideoInfo(this.shadowRoot.querySelector(\".title-div\"), this.hasAttribute(\"short\"))\n videoInfo.ondelete = () => {\n if (this.parentNode)\n this.parentNode.removeChild(this)\n }\n videoInfo.id = \"_\" + getUuidByString(video.getId())\n videoInfo.setVideo(video)\n this.appendChild(videoInfo)\n\n\n }\n\n /**\n * Display video informations.\n * @param {*} blog post \n */\n setBlogPostInformation(blogPost) {\n this.innerHTML = \"\" // remove previous content.\n this.shadowRoot.querySelector(\".title-div\").innerHTML = \"\"\n let blogPostInfo = new BlogPostInfo(blogPost)\n blogPostInfo.ondelete = () => {\n if (this.parentNode)\n this.parentNode.removeChild(this)\n }\n blogPostInfo.id = \"_\" + blogPost.getUuid()\n this.appendChild(blogPostInfo)\n }\n\n /**\n * Display title informations.\n * @param {*} titles \n */\n setTitlesInformation(titles) {\n this.innerHTML = \"\" // remove previous content.\n this.shadowRoot.querySelector(\".title-div\").innerHTML = \"\"\n if (titles.length == 0) {\n /** nothinh to display... */\n return;\n }\n\n let title = null;\n if (titles.length == 1) {\n title = titles[0]\n } else {\n titles.forEach(t => {\n if (t.getType() == \"TVSeries\") {\n title = t;\n }\n })\n }\n\n if (title == null) {\n title = titles[titles.length - 1]\n }\n\n let titleInfo = new TitleInfo(this.shadowRoot.querySelector(\".title-div\"), this.hasAttribute(\"short\"), title.globule)\n titleInfo.ondelete = () => {\n if (this.parentNode)\n this.parentNode.removeChild(this)\n }\n\n titleInfo.id = \"_\" + getUuidByString(title.getId())\n titleInfo.setTitle(title)\n this.appendChild(titleInfo)\n }\n\n setFileInformation(file) {\n this.innerHTML = \"\" // remove previous content.\n this.shadowRoot.querySelector(\".title-div\").innerHTML = `\n
\n \n ${file.name} Properties\n
`\n let fileInfo = new FileInfo(file)\n this.appendChild(fileInfo)\n }\n\n}\n\ncustomElements.define('globular-informations-manager', InformationsManager)\n\n","import { generatePeerToken, getUrl } from \"../../backend/backend\";\n\n/**\n * Sample empty component\n */\nexport class GlobularFileReader extends HTMLElement {\n // attributes.\n\n // Create the applicaiton view.\n constructor() {\n super()\n // Set the shadow dom.\n this.attachShadow({ mode: 'open' });\n\n // Innitialisation of the layout.\n this.shadowRoot.innerHTML = `\n \n
\n
\n \n \n
\n \n\n
\n `\n\n // give the focus to the input.\n this.frame = this.shadowRoot.querySelector(\"#frame\")\n this.closeBtn = this.shadowRoot.querySelector(\"#close-btn\")\n this.content = this.shadowRoot.querySelector(\"#content\")\n this.file = null;\n this.onclose = null;\n this.titleDiv = this.shadowRoot.querySelector(\"#title\")\n\n this.closeBtn.onclick = () => {\n this.content.style.display = \"none\"\n if (this.onclose) {\n this.onclose()\n }\n }\n }\n\n read(file, page = 0) {\n\n this.file = file;\n\n // Read the file...\n let url = getUrl(file.globule)\n\n file.getPath().split(\"/\").forEach(item => {\n if (item.trim() != \"\") {\n url += \"/\" + encodeURIComponent(item.trim())\n }\n })\n\n \n\n \n generatePeerToken(file.globule, token => {\n url += \"?domain=\" + file.globule.domain\n url += \"&token=\" + token\n let mime = file.getMime()\n if (mime == \"application/pdf\") {\n this.frame.src = \"about:blank\"\n // Set the file location.\n url += \"#page=\" + page\n }\n this.frame.src = url\n }, error => {\n console.error(error)\n })\n\n // must be white...\n this.content.style.display = \"\"\n this.frame.style.background = \"white\";\n this.titleDiv.innerHTML = this.file.getPath().split(\"/\")[this.file.getPath().split(\"/\").length - 1]\n }\n\n}\n\ncustomElements.define('globular-file-reader', GlobularFileReader)","import { Backend, displayError, generatePeerToken } from \"../../backend/backend\";\nimport getUuidByString from \"uuid-by-string\"\nimport { FileController } from \"../../backend/file\";\nimport { FileInfo, GetPublicDirsRequest } from \"globular-web-client/file/file_pb\";\nimport { AccountController } from \"../../backend/account\";\nimport { GetSharedResourceRqst, SubjectType } from \"globular-web-client/rbac/rbac_pb\";\n\nexport class FileNavigator extends HTMLElement {\n constructor() {\n super()\n // Set the shadow dom.\n this.attachShadow({ mode: 'open' });\n\n // The active explorer path.\n this.path = undefined\n\n // The function will be call in case of error.\n this.onerror = err => displayError(err, 3000);\n\n // List of listeners...\n this.navigationListener = \"\"\n\n // The file explorer.\n this._file_explorer_ = undefined\n\n // Here I will keep the list of div in memory to be able to \n // reload it...\n this.dirs = {}\n\n // The directory displayed in the navigator.\n this.dir = null\n\n // The root div.\n this.div = null\n\n // The control width\n this.width = 360\n\n // Innitialisation of the layout.\n this.shadowRoot.innerHTML = `\n \n\n
\n \n \n \n \n
\n `\n\n // The get the root div.\n this.div = this.shadowRoot.querySelector(\"#file-navigator-div \");\n this.userDiv = this.shadowRoot.querySelector(\"#user-files-div\");\n this.sharedDiv = this.shadowRoot.querySelector(\"#shared-files-div\");\n this.publicDiv = this.shadowRoot.querySelector(\"#public-files-div\");\n\n // Set the peers list.\n let peers = Backend.getGlobules();\n let selectElement = this.shadowRoot.querySelector(\"select\");\n\n // Clear any existing options (optional)\n selectElement.innerHTML = \"\";\n\n // Populate the select element with options\n peers.forEach((p, index) => {\n let option = document.createElement(\"option\");\n option.value = index;\n option.innerHTML = p.address;\n option.peer = p;\n selectElement.appendChild(option);\n });\n\n // Add an event listener to handle option changes\n selectElement.addEventListener(\"change\", (event) => {\n Backend.eventHub.publish(\"start_peer_evt_\", event.target.peer, true)\n });\n\n // Trigger the event for the initial selection\n if (peers.length > 0) {\n selectElement.value = 0; // Set initial value to the first option\n selectElement.dispatchEvent(new Event(\"change\")); // Trigger the change event\n }\n\n // Select the peer.\n this.shadowRoot.querySelector(\"select\").onchange = () => {\n let index = this.shadowRoot.querySelector(\"select\").value\n this.userDiv.innerHTML = \"\"\n this._file_explorer_.setGlobule(peers[index])\n }\n }\n\n // The connection callback.\n connectedCallback() {\n\n if (this._file_explorer_ != undefined) {\n let index = 0\n let peers = Backend.getGlobules()\n peers.forEach(p => {\n if (p.address == this._file_explorer_.globule.address) {\n this.shadowRoot.querySelector(\"select\").value = index;\n }\n index++\n })\n }\n\n }\n\n\n hide() {\n this.div.style.display = \"none\"\n }\n\n show() {\n this.div.style.display = \"\"\n }\n\n // remove div and reload it from it content...\n reload(dir, callback) {\n if (this.dirs[this._file_explorer_.globule.domain + \"@\" + dir.getPath()] != undefined) {\n let div = this.div.querySelector(`#${this.dirs[this._file_explorer_.globule.domain + \"@\" + dir.getPath()].id}`)\n\n // force reading from the server...\n FileController.removeDir(dir.getPath(), this._file_explorer_.globule)\n\n if (div != null) {\n let parent = div.parentNode\n let level = this.dirs[this._file_explorer_.globule.domain + \"@\" + dir.getPath()].level\n if (div != null) {\n parent.removeChild(div)\n delete this.dirs[this._file_explorer_.globule.domain + \"@\" + dir.getPath()]\n }\n // reload the div...\n this.initPublic(callback)\n dir.setPath(dir.getPath().split(\"\\\\\").join(\"/\"))\n if (dir.getPath() != \"/public\") {\n this.initTreeView(dir, parent, level)\n }\n }\n }\n }\n\n\n // Init the tree view.\n initTreeView(dir, div, level) {\n\n if (dir.getName().startsWith(\".\") || dir.getMime() == \"video/hls-stream\") {\n return;\n }\n\n if (div == undefined) {\n return\n }\n\n // old id value was dir.getPath().split(\"/\").join(\"_\").split(\"@\").join(\"_\")\n let id = \"_\" + getUuidByString(dir.getPath()).split(\"-\").join(\"_\")\n\n // keep it in memory \n this.dirs[this._file_explorer_.globule.domain + \"@\" + dir.getPath()] = { id: id, level: level }\n\n // Remove existing values and renit the tree view...\n let dir_ = this.div.querySelector(`#${id}`)\n if (dir_ == undefined) {\n let name = dir.getPath().split(\"/\").pop();\n\n if (name.startsWith(AccountController.account.getId())) {\n if(AccountController.account.getFirstname().length > 0){\n name = name.replace(AccountController.account.getId(), AccountController.account.getFirstname() + \" \" + AccountController.account.getLastname())\n }else{\n // display more readable folder name...\n name = name.replace(AccountController.account.getId(), AccountController.account.getName())\n }\n }\n\n let offset = 10 * level\n let html = `\n \n\n
\n
\n \n \n
\n \n ${name}\n
\n \n
\n
\n
\n
\n `\n let range = document.createRange()\n div.appendChild(range.createContextualFragment(html));\n\n\n }\n\n /** Now i will get the */\n\n\n let shrinkBtn = this.shadowRoot.getElementById(id + \"_shrink_btn\")\n if (shrinkBtn) {\n shrinkBtn.onmouseover = () => {\n shrinkBtn.style.cursor = \"pointer\"\n }\n\n shrinkBtn.onmouseleave = () => {\n shrinkBtn.style.cursor = \"default\"\n }\n }\n\n let expandBtn = this.shadowRoot.getElementById(id + \"_expand_btn\")\n if (expandBtn) {\n expandBtn.onmouseover = () => {\n expandBtn.style.cursor = \"pointer\"\n }\n\n expandBtn.onmouseleave = () => {\n expandBtn.style.cursor = \"default\"\n }\n }\n\n let dirLnk = this.shadowRoot.getElementById(id + \"_directory_lnk\")\n let dirIco = this.shadowRoot.getElementById(id + \"_directory_icon\")\n if (dirLnk) {\n dirLnk.ondragover = (evt) => {\n evt.preventDefault()\n dirIco.icon = \"icons:folder-open\"\n }\n\n dirLnk.ondragleave = () => {\n dirIco.icon = \"icons:folder\"\n }\n\n dirLnk.ondrop = (evt) => {\n evt.stopPropagation();\n let files = JSON.parse(evt.dataTransfer.getData('files'))\n let id = evt.dataTransfer.getData('id')\n let domain = evt.dataTransfer.getData('domain')\n this.selected = {}\n dirIco.icon = \"icons:folder\"\n if (id.length > 0) {\n files.forEach(f => {\n Backend.eventHub.publish(`drop_file_${id}_event`, { file: f, dir: dir.getPath(), id: id, domain: domain }, true)\n })\n }\n }\n }\n\n let hasSubdir = false;\n let fileDiv = this.shadowRoot.getElementById(id + \"_files_div\")\n if (dir.getMime() != \"video/hls-stream\") {\n for (var f of dir.getFilesList()) {\n if (f.getIsDir()) {\n this.initTreeView(f, fileDiv, level + 1);\n hasSubdir = true;\n }\n }\n }\n\n // hide the button if no sub-document exist.\n if (expandBtn) {\n if (!hasSubdir) {\n expandBtn.style.visibility = \"hidden\"\n } else {\n expandBtn.style.visibility = \"visible\"\n }\n expandBtn.onclick = (evt) => {\n evt.stopPropagation();\n shrinkBtn.style.display = \"block\"\n fileDiv.style.display = \"block\"\n dirIco.icon = \"icons:folder-open\"\n\n if (dir.getFilesList().length > 0) {\n expandBtn.style.display = \"none\";\n } else {\n expandBtn.style.visibility = \"hidden\";\n }\n }\n\n }\n\n // Now actions.\n if (shrinkBtn) {\n shrinkBtn.onmouseover = () => {\n shrinkBtn.style.cursor = \"pointer\"\n }\n\n shrinkBtn.onmouseleave = () => {\n shrinkBtn.style.cursor = \"default\"\n }\n\n shrinkBtn.onclick = (evt) => {\n evt.stopPropagation();\n shrinkBtn.style.display = \"none\";\n fileDiv.style.display = \"none\"\n dirIco.icon = \"icons:folder\"\n\n if (dir.getFilesList().length > 0) {\n expandBtn.style.display = \"block\";\n } else {\n expandBtn.style.visibility = \"visible\";\n }\n }\n }\n\n if (dirLnk) {\n dirLnk.onclick = (evt) => {\n evt.stopPropagation();\n this._file_explorer_.publishSetDirEvent(dir.getPath())\n\n if (this._file_explorer_.informationManager) {\n if (this._file_explorer_.informationManager.parentNode)\n this._file_explorer_.informationManager.parentNode.removeChild(this._file_explorer_.informationManager)\n }\n }\n\n dirLnk.onmouseover = () => {\n dirLnk.style.cursor = \"pointer\"\n }\n\n dirLnk.onmouseleave = () => {\n dirLnk.style.cursor = \"default\"\n }\n }\n\n }\n\n // Set the directory.\n setDir(dir, callback) {\n\n if (!FileController.validateDirAccess(dir)) {\n return\n }\n\n this.dir = dir;\n this.initTreeView(dir, this.userDiv, 0)\n\n // Init public list of directories\n this.initPublic(() => {\n // Init shared...\n this.initShared((shared_, public_) => { if (callback) callback(shared_, public_); this._file_explorer_.resume() })\n })\n }\n\n // Init the public folder...\n initPublic(initCallback) {\n\n this.publicDiv.innerHTML = \"\"\n\n // The public directory will contain a list of directories readable by \n // any use, permission can also be set on file and directories, but all is \n // accessible by default.\n this.public_ = new FileInfo\n this.public_.setName(\"public\")\n this.public_.setPath(\"/public\")\n this.public_.setIsDir(true);\n this.public_.setFilesList([]);\n this.public_.setMime(\"inode/directory\");\n // set the mode time as unix time...\n this.public_.setModeTime(new Date().getTime())\n\n // keep track of all sub-dir...\n //FileController.addPublicDir(this.public_)\n\n this._file_explorer_.globule.eventHub.subscribe(\"public_change_permission_event\", uuid => { },\n evt => {\n // refresh the shared...\n this.initPublic()\n }, false, this)\n\n\n generatePeerToken(this._file_explorer_.globule, token => {\n this._file_explorer_.globule.fileService.getPublicDirs(new GetPublicDirsRequest, { domain: this._file_explorer_.globule.domain, token: token })\n .then(rsp => {\n let index = 0;\n let publicDirs = rsp.getDirsList()\n let initPublicDir = (callback, errorCallback) => {\n if (publicDirs.length > 0) {\n if (index < publicDirs.length) {\n let path = publicDirs[index]\n // Read the dir content (files and directory informations.)\n FileController.readDir(path, dir => {\n this._file_explorer_.resume()\n // used by set dir...\n FileController.markAsPublic(dir, path)\n this.public_.getFilesList().push(dir)\n index++\n initPublicDir(callback, err => displayError(err, 3000))\n }, err => displayError(err, 3000), this._file_explorer_.globule, true)\n\n } else {\n callback()\n }\n } else {\n callback()\n }\n }\n\n // Init\n initPublicDir(() => {\n FileController.addDir(this.public_)\n this.initTreeView(this.public_, this.publicDiv, 0)\n if (initCallback) {\n initCallback()\n }\n })\n })\n })\n }\n\n\n\n // Init shared folders\n initShared(initCallback) {\n\n this.sharedDiv.innerHTML = \"\"\n this.shared = {}\n\n // keep track of all sub-dir...\n FileController.clearSharedDirs()\n\n // The public directory will contain a list of directories readable by \n // any use, permission can also be set on file and directories, but all is \n // accessible by default.\n this.shared_ = new FileInfo\n this.shared_.setName(\"shared\")\n this.shared_.setPath(\"/shared\")\n this.shared_.setIsDir(true)\n this.shared_.setFilesList([])\n this.shared_.setMime(\"\")\n this.shared_.setModeTime(new Date())\n\n\n // Init the share info\n let initShared = (share, callback) => {\n if(AccountController.account == undefined){\n callback()\n return\n }\n\n // Try to get the user id...\n let userId = share.getPath().split(\"/\")[2];\n if (userId == AccountController.account.getId() || userId == AccountController.account.getId() + \"@\" + AccountController.account.getDomain()) {\n callback()\n return // I will not display it...\n } else if (userId.indexOf(\"@\") != -1) {\n\n AccountController.getAccount(userId, user => {\n\n if (this.shared[userId] == undefined) {\n this.shared[userId] = new FileInfo\n this.shared[userId].name = user.name\n this.shared[userId].setPath(\"/shared/\" + userId)\n this.shared[userId].setIsDir(true)\n this.shared[userId].setFilesList([])\n this.shared[userId].setMime(\"\")\n this.shared[userId].setModeTime(new Date())\n\n this.shared_.getFilesList().push(this.shared[userId])\n\n this._file_explorer_.globule.eventHub.subscribe(userId + \"_change_permission_event\", uuid => { },\n evt => {\n // refresh the shared...\n this.initShared()\n }, false, this)\n }\n\n\n \n FileController.readDir(share.getPath(), dir => {\n\n this._file_explorer_.resume()\n\n // used by set dir...\n FileController.markAsShare(dir)\n\n // From the path I will get the user id who share the file and \n // create a local directory if none exist...\n if (this.shared[userId]) {\n if (this.shared[userId].getFilesList().find(f => f.getPath() == dir.getPath()) == undefined) {\n this.shared[userId].getFilesList().push(dir)\n }\n }\n callback()\n }, err => {\n // The file is not a directory so the file will simply put in the share.\n this._file_explorer_.resume();\n if (err.message.indexOf(\"is not a directory\") != -1) {\n FileController.getFile(this._file_explorer_.globule, share.getPath(), 100, 64,\n (f) => {\n if (f.getPath().indexOf(\".hidden\") != -1) {\n // In that case I need to append the file in a local dir named hidden.\n let hiddenDir = null;\n this.shared[userId].getFilesList().forEach(f => {\n if (f.name == \".hidden\") {\n hiddenDir = f\n }\n })\n if (hiddenDir == null) {\n hiddenDir = new FileInfo\n hiddenDir.setName(\".hidden\")\n hiddenDir.setPath(\"/shared/\" + userId + \"/.hidden\")\n hiddenDir.setIsDir(true)\n hiddenDir.setFilesList([f])\n hiddenDir.setMime(\"\")\n hiddenDir.setModeTime(new Date())\n this.shared[userId].getFilesList().push(hiddenDir)\n\n } else {\n // append only if it dosent exist....\n if (this.shared[userId].getFilesList().find(f_ => f.getPath() == f_.getPath()) == undefined) {\n hiddenDir.getFilesList().push(f)\n }\n }\n\n } else {\n if (this.shared[userId].getFilesList().find(f_ => f.getPath() == f_.getPath()) == undefined) {\n this.shared[userId].getFilesList().push(f)\n }\n }\n callback()\n }, err => displayError(err, 3000))\n }\n }, this._file_explorer_.globule)\n }, err => {\n callback()\n })\n } else {\n callback()\n }\n }\n\n\n // The account...\n if (AccountController.account != undefined) {\n\n let rqst = new GetSharedResourceRqst\n rqst.setSubject(AccountController.account.getId() + \"@\" + AccountController.account.getDomain())\n rqst.setType(SubjectType.ACCOUNT)\n\n // Get file shared by account.\n let globule = this._file_explorer_.globule\n generatePeerToken(globule, token => {\n globule.rbacService.getSharedResource(rqst, { domain: globule.domain, token: token })\n .then(rsp => {\n // Here I need to sync the funtion and init the tree view once all is done...\n let callback = () => { \n let s = rsp.getSharedresourceList().pop()\n //console.log(s)\n\n if (s != undefined) {\n initShared(s, callback)\n } else {\n\n for (const id in this.shared) {\n let shared = this.shared[id]\n // this.initTreeView(shared, this.sharedDiv, 0)\n this.initTreeView(this.shared_, this.sharedDiv, 0)\n FileController.removeDir(shared.path, this._file_explorer_.globule)\n }\n\n if (initCallback)\n initCallback(this.shared, this.public_)\n\n }\n }\n\n callback(); // call once\n })\n .catch(e => displayError(e, 3000))\n })\n }\n }\n}\n\ncustomElements.define('globular-file-navigator', FileNavigator)\n","import { Backend } from \"../../backend/backend\";\nimport { FileController } from \"../../backend/file\";\nimport { AccountController } from \"../../backend/account\";\n\nexport class PathNavigator extends HTMLElement {\n constructor() {\n super()\n // Set the shadow dom.\n this.attachShadow({ mode: 'open' });\n\n // the main div.\n this.div = undefined\n\n // The active explorer path.\n this.path = undefined\n\n // The function will be call in case of error.\n this.onerror = err => displayError(err, 3000);\n\n // List of listeners...\n this.navigationListener = \"\"\n\n // The file explorer.\n this._file_explorer_ = undefined\n\n // Innitialisation of the layout.\n this.shadowRoot.innerHTML = `\n \n\n
\n
\n `\n\n this.div = this.shadowRoot.querySelector(\"#path-navigator-box\")\n }\n\n init() {\n\n // The the path\n Backend.eventHub.subscribe(\"__set_dir_event__\",\n (uuid) => {\n /** Nothin here. */\n },\n (evt) => {\n if (this._file_explorer_.id == evt.file_explorer_id) {\n this.setDir(evt.dir)\n }\n }, true, this\n )\n }\n\n\n // Set the directory.\n setDir(dir) {\n if (!dir) {\n return\n }\n\n if(!FileController.validateDirAccess(dir)){\n return\n }\n\n if (dir._mime == \"stream.hls\") {\n // Here I will simply return...\n return\n }\n\n let values = dir.getPath().split(\"/\")\n\n // remove empty array...\n values = values.filter(element => {\n return element !== '';\n });\n\n // Clear actual values.\n this.div.innerHTML = \"\";\n this.path = dir.getPath();\n\n let index = 0;\n\n let path_ = \"\"\n\n for (const dir of values) {\n\n let titleDiv = document.createElement(\"div\")\n titleDiv.style.display = \"flex\"\n titleDiv.style.position = \"relative\"\n\n let title = document.createElement(\"span\")\n title.className = \"path-navigator-box-span\"\n title.style.display = \"inline\"\n if (dir.length > 20) {\n title.title = dir\n }\n\n title.innerHTML = dir\n\n if (dir.startsWith(AccountController.account.getId())) {\n title.innerHTML = dir.replace(AccountController.account.getId(), AccountController.account.getName())\n }\n\n // if the directory path sart with / ...\n if (index == 0) {\n if (this.path.startsWith(\"/\")) {\n path_ = \"/\" + dir\n } else {\n path_ = dir\n }\n } else {\n path_ += \"/\" + dir\n }\n\n\n titleDiv.appendChild(title)\n let path__ = path_\n\n let directoriesDiv = null\n if (index < values.length - 1) {\n // Here I will also append a button to go to a given path.\n let btn = document.createElement(\"iron-icon\")\n btn.style.position = \"relative\"\n btn.icon = \"icons:chevron-right\"\n titleDiv.appendChild(btn)\n\n // Display the list of all subdirectories...\n btn.onclick = (evt) => {\n evt.stopPropagation()\n if (btn.icon == \"icons:expand-more\") {\n directoriesDiv.style.display = \"none\"\n btn.icon = \"icons:chevron-right\"\n return\n }\n\n btn.icon = \"icons:expand-more\"\n\n if (directoriesDiv != null) {\n directoriesDiv.style.display = \"flex\"\n return\n }\n\n\n // Create the div that will contain the list of sub-directories.\n directoriesDiv = document.createElement(\"paper-card\")\n directoriesDiv.className = \"directories-selector\"\n directoriesDiv.style.display = \"flex\"\n directoriesDiv.style.flexDirection = \"column\"\n directoriesDiv.style.position = \"absolute\"\n directoriesDiv.style.padding = \"5px\"\n directoriesDiv.style.zIndex = \"1000\";\n directoriesDiv.style.top = title.offsetHeight + \"px\"\n directoriesDiv.style.right = \"0px\"\n directoriesDiv.style.backgroundColor = \"var(--surface-color)\"\n directoriesDiv.style.color = \"var(--primary-text-color)\"\n\n FileController.readDir(path__, (dir) => {\n\n this._file_explorer_.resume()\n\n // Send read dir event.\n for (let subDir of dir.getFilesList()) {\n let subDirDiv = document.createElement(\"div\")\n\n let subDirSpan = document.createElement(\"span\")\n subDirSpan.innerHTML = subDir.name;\n subDirSpan.padding = \"4px\"\n subDirDiv.appendChild(subDirSpan)\n\n if (subDir.getIsDir()) {\n directoriesDiv.appendChild(subDirDiv)\n\n // Here I will set the span event.\n subDirSpan.onmouseover = () => {\n subDirSpan.style.cursor = \"pointer\"\n subDirSpan.style.setProperty(\"background-color\", \"var(--surface-color)\")\n }\n\n subDirSpan.onmouseleave = () => {\n subDirSpan.style.cursor = \"default\"\n subDirSpan.style.setProperty(\"background-color\", \"var(--surface-color)\")\n }\n\n subDirSpan.onclick = (evt) => {\n evt.stopPropagation()\n this._file_explorer_.publishSetDirEvent(subDir.getPath())\n directoriesDiv.style.display = \"none\"\n btn.icon = \"icons:chevron-right\"\n }\n\n }\n }\n\n title.appendChild(directoriesDiv)\n directoriesDiv.style.right = -1 * (directoriesDiv.offsetWidth - btn.offsetWidth) + \"px\"\n\n directoriesDiv.onmouseleave = () => {\n directoriesDiv.style.display = \"none\"\n if (btn == null) {\n btn.icon = \"icons:chevron-right\"\n }\n }\n }, err => { console.log(err); file_explorer_.resume(); }, this._file_explorer_.globule)\n }\n\n btn.onmouseover = () => {\n btn.style.cursor = \"pointer\"\n }\n\n btn.onmouseleave = () => {\n btn.style.cursor = \"default\"\n }\n }\n\n index++\n\n title.onmouseover = () => {\n title.style.cursor = \"pointer\"\n title.style.setProperty(\"background-color\", \"var(--surface-color)\")\n }\n\n title.onmouseleave = () => {\n title.style.cursor = \"default\"\n title.style.setProperty(\"background-color\", \"var(--surface-color)\")\n if (directoriesDiv != undefined) {\n directoriesDiv.style.display = \"none\"\n }\n }\n\n // Set the current directory to the clicked one.\n title.onclick = (evt) => {\n evt.stopPropagation();\n FileController.readDir(path__, (dir) => {\n this._file_explorer_.resume()\n // Send read dir event.\n this._file_explorer_.publishSetDirEvent(dir.getPath())\n }, err => { this._file_explorer_.resume(); console.log(err); }, this._file_explorer_.globule)\n }\n\n this.div.appendChild(titleDiv)\n }\n\n }\n\n}\n\ncustomElements.define('globular-path-navigator', PathNavigator)\n","import { GetThumbnailsRequest } from \"globular-web-client/file/file_pb\";\nimport { TargetsRequest } from \"globular-web-client/monitoring/monitoring_pb\";\nimport { GetSubjectAllocatedSpaceRqst, GetSubjectAvailableSpaceRqst, SetSubjectAllocatedSpaceRqst, SubjectType } from \"globular-web-client/rbac/rbac_pb\";\nimport { Backend } from \"../../backend/backend\";\nimport { getCoords, getFileSizeString} from \"../utility\";\n\n\n/**\n * Manage account dist space.\n */\nexport class DiskSpaceManager extends HTMLElement {\n // attributes.\n\n // Create the applicaiton view.\n constructor() {\n super()\n\n this.allocated_space = 0;\n this.available_space = 0;\n this.account = null;\n this.globule = Backend.globular;\n\n // Set the shadow dom.\n this.attachShadow({ mode: 'open' });\n // Innitialisation of the layout.\n this.shadowRoot.innerHTML = `\n \n
\n no space allocated for ${this.getAttribute(\"\")}\n
\n `\n\n // give the focus to the input.\n this.tooltip = this.shadowRoot.querySelector(\"paper-tooltip\")\n this.diskUsageDiv = this.shadowRoot.querySelector(\"#disk-space-usage-div\")\n this.allocatedSpaceSpan = this.shadowRoot.querySelector(\"#allocated-space-span\")\n this.usedSpaceSpan = this.shadowRoot.querySelector(\"#used-space-span\")\n this.errorMessageDiv = this.shadowRoot.querySelector(\"#error-message-div\")\n this.progressBar = this.shadowRoot.querySelector(\"paper-progress\")\n\n if (this.hasAttribute(\"editable\")) {\n if (this.getAttribute(\"editable\") == \"true\") {\n this.allocatedSpaceSpan.onclick = this.errorMessageDiv.onclick = () => {\n this.displayAllocatedSpaceInputBox()\n }\n\n this.allocatedSpaceSpan.onmouseover = () => {\n this.style.cursor = \"pointer\"\n }\n\n this.allocatedSpaceSpan.onmouseleave = () => {\n this.style.cusor = \"default\"\n }\n\n this.allocatedSpaceSpan.style.textDecoration = \"underline\"\n }\n }\n\n }\n\n // The connection callback.\n connectedCallback() {\n\n this.refresh()\n\n }\n\n // display the allocate space input box.\n displayAllocatedSpaceInputBox() {\n let inputBox = document.body.querySelector(\"#allocated-space-box\")\n if (inputBox) {\n return\n }\n\n let html = `\n \n \n
\n \n Allocate\n \n \n Cancel\n \n
\n \n `\n\n let range = document.createRange()\n document.body.appendChild(range.createContextualFragment(html))\n\n inputBox = document.body.querySelector(\"#allocated-space-box\")\n let coord = getCoords(this)\n inputBox.style.top = coord.top + 40 + \"px\"\n inputBox.style.left = coord.left + \"px\"\n\n let input = document.body.querySelector(\"#allocated-space-input\")\n input.value = this.allocated_space / 1073741824\n\n // simply remove the input box\n document.body.querySelector(\"#cancel-btn\").onclick = () => {\n inputBox.parentNode.removeChild(inputBox)\n }\n\n // set the new allocated space.\n document.body.querySelector(\"#set-space-btn\").onclick = () => {\n\n let rqst = new SetSubjectAllocatedSpaceRqst\n if (this.hasAttribute(\"account\")) {\n let accountId = this.account.getId() + \"@\" + this.account.getDomain()\n rqst.setSubject(accountId)\n rqst.setType(SubjectType.ACCOUNT)\n } else if (this.hasAttribute(\"application\")) {\n rqst.setSubject(this.getAttribute(\"application\"))\n rqst.setType(SubjectType.APPLICATION)\n }\n\n let space = parseInt(input.value) * 1073741824;\n rqst.setAllocatedSpace(space)\n let token = localStorage.getItem(\"user_token\")\n\n // call persist data\n this.globule.rbacService\n .setSubjectAllocatedSpace(rqst, {\n token: token,\n domain: this.globule.domain\n })\n .then((rsp) => {\n // Here I will return the value with it\n this.allocated_space = space\n this.setAllocatedSpace() // refresh the value.\n })\n .catch((err) => {\n console.log(err)\n displayError(err, 3000)\n });\n\n inputBox.parentNode.removeChild(inputBox)\n }\n\n setTimeout(() => {\n input.focus()\n input.inputElement.inputElement.select()\n }, 100)\n\n }\n\n setAvailableSpace() {\n this.tooltip.innerHTML = `${getFileSizeString(this.allocated_space - this.available_space)} (${parseFloat(((this.allocated_space - this.available_space) / this.allocated_space) * 100).toFixed(2)}%) used space of ${getFileSizeString(this.allocated_space)} `\n this.errorMessageDiv.style.display = \"none\"\n this.diskUsageDiv.style.display = \"block\"\n this.progressBar.style.display = \"block\"\n this.progressBar.value = this.allocated_space - this.available_space\n this.usedSpaceSpan.innerHTML = getFileSizeString(this.allocated_space - this.available_space)\n }\n\n // Set the allocated space in displayed by the component\n setAllocatedSpace() {\n this.errorMessageDiv.style.display = \"none\"\n this.diskUsageDiv.style.display = \"block\"\n this.progressBar.style.display = \"block\"\n this.progressBar.setAttribute(\"max\", this.allocated_space)\n this.allocatedSpaceSpan.innerHTML = getFileSizeString(this.allocated_space)\n }\n\n getAllocatedSpace(id, type, callback, errorCallback) {\n\n let rqst = new GetSubjectAllocatedSpaceRqst\n rqst.setSubject(id)\n rqst.setType(type)\n\n let token = localStorage.getItem(\"user_token\")\n\n // call persist data\n this.globule.rbacService\n .getSubjectAllocatedSpace(rqst, {\n token: token,\n domain: this.globule.domain\n })\n .then((rsp) => {\n // Here I will return the value with it\n this.allocated_space = rsp.getAllocatedSpace()\n callback();\n })\n .catch((err) => {\n console.log(\"fail to get allocated space for \", id, err)\n errorCallback(err);\n });\n }\n\n getAvailableSpace(id, type, callback, errorCallback) {\n this.progressBar.setAttribute(\"indeterminate\", \"\")\n let rqst = new GetSubjectAvailableSpaceRqst\n rqst.setSubject(id)\n rqst.setType(type)\n\n let token = localStorage.getItem(\"user_token\")\n\n // call persist data\n this.globule.rbacService\n .getSubjectAvailableSpace(rqst, {\n token: token,\n domain: this.globule.domain\n })\n .then((rsp) => {\n // Here I will return the value with it\n this.available_space = rsp.getAvailableSpace()\n this.progressBar.removeAttribute(\"indeterminate\")\n callback();\n })\n .catch((err) => {\n errorCallback(err);\n if (err.message.indexOf(\"no space available for\") != -1) {\n this.available_space = 0;\n this.progressBar.removeAttribute(\"indeterminate\")\n callback()\n }\n });\n }\n\n refresh() {\n if(this.account == null){\n return\n }\n\n if (this.hasAttribute(\"account\")) {\n let accountId = this.account.getId() + \"@\" + this.account.getDomain()\n if (accountId.startsWith(\"sa@\")) {\n this.style.display = \"none\"; // nothing to show about sa account\n } else {\n this.getAllocatedSpace(accountId, SubjectType.ACCOUNT,\n () => {\n this.setAllocatedSpace()\n this.getAvailableSpace(accountId, SubjectType.ACCOUNT, () => {\n this.setAvailableSpace()\n }, err => displayError(err, 3000))\n },\n err => {\n console.log(err);\n this.errorMessageDiv.innerHTML = `no space was allocated for user ${this.account.getName()}`\n this.tooltip.innerHTML = `click here to allocate space`\n this.errorMessageDiv.style.display = \"block\"\n this.diskUsageDiv.style.display = \"none\"\n this.progressBar.style.display = \"none\"\n })\n }\n } else if (this.hasAttribute(\"application\")) {\n\n this.getAllocatedSpace(this.getAttribute(\"application\"), SubjectType.APPLICATION, () => {\n this.setAllocatedSpace()\n this.getAvailableSpace(this.getAttribute(\"application\"), SubjectType.APPLICATION, () => {\n this.setAvailableSpace()\n }, err => displayError(err, 3000))\n\n },\n err => {\n\n this.errorMessageDiv.innerHTML = `no space was allocated for application ${this.getAttribute(\"application\")}`\n this.tooltip.innerHTML = `click here to allocate space`\n this.errorMessageDiv.style.display = \"block\"\n this.diskUsageDiv.style.display = \"none\"\n this.progressBar.style.display = \"none\"\n })\n } else {\n console.log(\"no account or application was found...\")\n }\n }\n\n}\n\ncustomElements.define('globular-disk-space-manager', DiskSpaceManager)","import getUuidByString from \"uuid-by-string\"\nimport { Backend, displayMessage, generatePeerToken } from \"../../backend/backend\"\nimport { DropTorrentRequest, GetTorrentInfosRequest, GetTorrentLnksRequest } from \"globular-web-client/torrent/torrent_pb\";\nimport { FileController, getFileSizeString } from \"../../backend/file\";\nimport { uploadFiles } from \"globular-web-client/api\";\nimport { formatBytes } from \"../utility\";\nimport '@polymer/paper-tabs/paper-tabs.js';\nimport '@polymer/paper-tabs/paper-tab.js';\n\nexport class FilesUploader extends HTMLElement {\n // attributes.\n\n // Create the applicaiton view.\n constructor() {\n\n super()\n\n // Set the shadow dom.\n this.attachShadow({ mode: 'open' });\n\n this.width = 320;\n if (this.hasAttribute(\"width\")) {\n this.width = parseInt(this.getAttribute(\"width\"));\n }\n\n this.height = 550;\n if (this.hasAttribute(\"height\")) {\n this.height = parseInt(this.getAttribute(\"height\"));\n }\n\n this.shadowRoot.innerHTML = `\n \n
\n
\n
\n \n Files\n Videos\n Torrents\n \n \n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n `\n\n\n // The body where upload files info are displayed\n this.files_upload_table = this.shadowRoot.querySelector(\"#file-upload-tbody\")\n\n // The body where torrents files will be displayed.\n this.torrent_download_table = this.shadowRoot.querySelector(\"#torrent-download-tbody\")\n\n // The list of link where link's \n this.links_download_table = this.shadowRoot.querySelector(\"#links-download-tbody\")\n\n // The tabs...\n this.filesUploadTab = this.shadowRoot.querySelector(\"#file-upload-tab\")\n this.torrentsDowloadTab = this.shadowRoot.querySelector(\"#torrents-dowload-tab\")\n this.linksDownloadTab = this.shadowRoot.querySelector(\"#links-download-tab\")\n\n // So here I will set the tab interractions.\n this.filesUploadTab.onclick = () => {\n let tables = this.shadowRoot.querySelectorAll(\".table\")\n for (var i = 0; i < tables.length; i++) {\n tables[i].style.display = \"none\"\n }\n\n let table = this.shadowRoot.querySelector(\"#files-upload-table\")\n table.style.display = \"\"\n }\n\n this.torrentsDowloadTab.onclick = () => {\n let tables = this.shadowRoot.querySelectorAll(\".table\")\n for (var i = 0; i < tables.length; i++) {\n tables[i].style.display = \"none\"\n }\n\n let table = this.shadowRoot.querySelector(\"#torrents-download-table\")\n table.style.display = \"\"\n }\n\n this.linksDownloadTab.onclick = () => {\n let tables = this.shadowRoot.querySelectorAll(\".table\")\n for (var i = 0; i < tables.length; i++) {\n tables[i].style.display = \"none\"\n }\n\n let table = this.shadowRoot.querySelector(\"#links-download-table\")\n table.style.display = \"\"\n }\n\n // Upload file event.\n Backend.eventHub.subscribe(\n \"__upload_files_event__\", (uuid) => { },\n (evt) => {\n this.uploadFiles(evt.dir.getPath(), evt.files, evt.globule)\n\n }\n , true, this\n )\n\n // Upload link (youtube, pornhub...)\n Backend.eventHub.subscribe(\n \"__upload_link_event__\", (uuid) => { },\n (evt) => {\n this.uploadLink(evt.pid, evt.path, evt.infos, evt.lnk, evt.done, evt.globule)\n }\n , true, this\n )\n\n // Upload torrent files.\n Backend.eventHub.subscribe(\n \"__upload_torrent_event__\", (uuid) => { },\n (evt) => {\n this.uploadTorrent(evt)\n }\n , true, this\n )\n\n // Append the globule to the list.\n Backend.eventHub.subscribe(\"start_peer_evt_\",\n uuid => { },\n p => {\n\n let domain = Backend.globular.domain\n if(p != undefined){\n domain = p.getDomain()\n }\n\n let globule = Backend.getGlobule(domain)\n this.getTorrentLnks(globule, lnks => {\n\n })\n\n this.getTorrentsInfo(globule)\n\n }, true)\n\n\n // Connect events...\n Backend.getGlobules().forEach(globule => {\n this.getTorrentLnks(globule, lnks => {\n\n })\n\n this.getTorrentsInfo(globule)\n })\n\n if (this.shadowRoot.parentNode)\n this.shadowRoot.parentNode.removeChild(this.shadowRoot)\n }\n\n /**\n * Dowload a video on globular server from a link.\n * @param {*} pid The pid of the server command associated with that link\n * @param {*} path The path on the server where the video will be saved\n * @param {*} infos The infos receive about the file transfert.\n */\n uploadLink(pid, path, infos, lnk, done, globule) {\n\n let id = \"link-download-row-\" + pid\n let row = this.shadowRoot.querySelector(\"#\" + id)\n\n if (done || infos == \"done\") {\n let span_title = this.links_download_table.querySelector(\"#\" + id + \"_title\")\n if (span_title) {\n displayMessage(\"File \" + span_title.innerHTML + \" was now uploaded!\", 3000)\n let info = span_title.innerHTML\n\n // row.parentNode.removeChild(row)\n row.children[1].innerHTML = `\n
\n ${info.split(\": \")[1]}\n ${path}\n
\n `\n\n let cancelBtn = row.querySelector(\"#cancel-btn\")\n cancelBtn.onclick = () => {\n // so here I will also send an event to cancel the upload process...\n row.style.display = \"none\";\n }\n\n // Open the file\n row.querySelector(\"#file-lnk\").onclick = () => {\n Backend.eventHub.publish(\"follow_link_event_\", { path: path + \"/\" + info.split(\": \")[1], domain: globule.domain }, true)\n }\n\n // Open the containing dir.\n row.querySelector(\"#dir-lnk\").onclick = () => {\n Backend.eventHub.publish(\"follow_link_event_\", { path: path, domain: globule.domain }, true)\n }\n\n }\n return\n }\n\n // display the button.\n if (row == undefined) {\n\n let row = document.createElement(\"div\")\n row.className = \"table-row\"\n row.id = id\n\n let cancelCell = document.createElement(\"div\")\n cancelCell.className = \"table-cell\"\n\n let cancelBtn = document.createElement(\"paper-icon-button\")\n cancelBtn.icon = \"icons:close\"\n cancelBtn.id = \"cancel-btn\"\n cancelCell.appendChild(cancelBtn)\n\n let cellSource = document.createElement(\"div\")\n cellSource.className = \"table-cell\"\n cellSource.style.flexGrow = \"1\"\n\n let html = `\n
\n ${infos}\n \n ${path}\n
`;\n\n cellSource.innerHTML = html\n\n row.appendChild(cancelCell)\n row.appendChild(cellSource);\n\n // So here if the user click on the lnk...\n row.querySelector(\".file-path\").onclick = () => {\n Backend.eventHub.publish(\"follow_link_event_\", { path: path, domain: globule.domain }, true)\n }\n\n cancelBtn.onclick = () => {\n // Here I will ask the user for confirmation before actually delete the contact informations.\n let toast = displayMessage(\n `\n \n
\n
Your about to cancel video upload
\n
Is it what you want to do?
\n
\n Yes\n No\n
\n
\n `,\n 15000 // 15 sec...\n );\n\n let yesBtn = document.querySelector(\"#yes-delete-upload-video\")\n let noBtn = document.querySelector(\"#no-delete-upload-video\")\n\n // On yes\n yesBtn.onclick = () => {\n toast.hideToast();\n\n // so here I will also send an event to cancel the upload process...\n globule.eventHub.publish(\"cancel_upload_event\", JSON.stringify({ pid: pid, path: path }), false)\n row.style.display = \"none\";\n }\n\n noBtn.onclick = () => {\n toast.hideToast();\n }\n }\n\n // Append to files panels.\n this.links_download_table.appendChild(row)\n\n } else {\n\n if (infos.startsWith(\"[download] Destination:\")) {\n let span_title = this.links_download_table.querySelector(\"#\" + id + \"_title\")\n span_title.innerHTML = infos.substring(infos.lastIndexOf(\"/\") + 1)\n } else {\n let span_infos = this.links_download_table.querySelector(\"#\" + id + \"_infos\")\n span_infos.innerHTML = infos.trim();\n }\n }\n }\n\n /**\n * Dowload a torrent on globular server.\n * @param {*} torrent \n * @returns \n */\n uploadTorrent(torrent) {\n let globule = torrent.globule\n let uuid = getUuidByString(torrent.getName())\n let id = \"torrent-download-row-\" + uuid\n let row = this.shadowRoot.querySelector(\"#\" + id)\n\n // display the button.\n if (row == undefined) {\n let row = document.createElement(\"div\")\n row.className = \"table-row\"\n row.done = false\n row.id = id\n\n let cancelCell = document.createElement(\"div\")\n cancelCell.className = \"table-cell\"\n let cancelBtn = document.createElement(\"paper-icon-button\")\n cancelBtn.icon = \"icons:close\"\n cancelCell.appendChild(cancelBtn)\n\n let cellSource = document.createElement(\"div\")\n cellSource.className = \"table-cell\"\n cellSource.style.flexGrow = \"1\"\n\n cellSource.innerHTML = `\n
\n \n
\n
\n \n \n
\n ${torrent.getName()}\n \n
\n \n \n
\n
\n \n\n ${torrent.getDestination()}\n \n
`;\n\n row.appendChild(cancelCell)\n row.appendChild(cellSource);\n\n row.querySelector(`#${id}_dest_path`).onclick = () => {\n Backend.eventHub.publish(\"follow_link_event_\", { path: torrent.getDestination(), domain: globule.domain }, true)\n }\n\n row.querySelector(`#${id}_title`).onclick = () => {\n Backend.eventHub.publish(\"follow_link_event_\", { path: torrent.getDestination() + \"/\" + torrent.getName(), domain: globule.domain }, true)\n }\n\n cancelBtn.onclick = () => {\n\n // Here I will ask the user for confirmation before actually delete the contact informations.\n let toast = displayMessage(\n `\n \n\n
\n
Your about to remove torrent
\n
${torrent.getName()}
\n
Is it what you want to do?
\n
\n Yes\n No\n
\n
\n `,\n 15000 // 15 sec...\n );\n\n let yesBtn = document.querySelector(\"#yes-delete-torrent\")\n let noBtn = document.querySelector(\"#no-delete-torrent\")\n\n // On yes\n yesBtn.onclick = () => {\n toast.hideToast();\n\n // remove the row firt to prevent the user to click more than once...\n row.parentNode.removeChild(row)\n\n // So here I will remove the torrent from the list...\n let rqst = new DropTorrentRequest\n rqst.setName(torrent.getName())\n generatePeerToken(globule, token => {\n globule.torrentService.dropTorrent(rqst, { domain: globule.domain, token: token })\n .then(rsp => {\n displayMessage(\n \"Torrent was download was remove\",\n 3000\n );\n }).catch(err => displayError(err, 3000))\n })\n\n }\n\n noBtn.onclick = () => {\n toast.hideToast();\n }\n }\n\n // Append to files panels.\n this.torrent_download_table.appendChild(row)\n\n } else {\n\n let progressBar = row.querySelector(`#${id}_progress_bar`)\n\n let speedo = row.querySelector(\".speedometer-div\")\n if (torrent.getPercent() == 100) {\n progressBar.style.display = \"none\"\n speedo.innerHTML = \"Done\"\n } else {\n speedo.innerHTML = formatBytes(torrent.getDownloadrate(), 1)\n progressBar.value = torrent.getPercent()\n\n }\n\n let collapse_btn = row.querySelector(`#_${uuid}-collapse-btn`)\n let collapse_panel = row.querySelector(`#_${uuid}-collapse-torrent-panel`)\n collapse_btn.onclick = () => {\n if (!collapse_panel.opened) {\n collapse_btn.icon = \"unfold-more\"\n } else {\n collapse_btn.icon = \"unfold-less\"\n }\n collapse_panel.toggle();\n }\n\n let filesDiv = row.querySelector(`#_${uuid}-file-list-div`)\n let range = document.createRange()\n\n // So here I will display the list of files contain in the torrent.\n torrent.getFilesList().forEach(f => {\n // So here I will create the file list...\n let id = \"_\" + getUuidByString(f.getPath())\n let fileRow = filesDiv.querySelector(`#${id}`)\n if (fileRow == undefined) {\n let html = `\n
\n `\n filesDiv.appendChild(range.createContextualFragment(html))\n fileRow = filesDiv.querySelector(`#${id}`)\n }\n\n let progressBar_ = fileRow.querySelector(`#${id}_progress_bar`)\n progressBar_.value = f.getPercent()\n if (f.getPercent() == 100 && progressBar_.style.display != \"none\") {\n progressBar_.style.display = \"none\"\n // Open the file\n let fileLnk = fileRow.querySelector(\"#file-lnk\")\n fileLnk.classList.add(\"file-path\")\n displayMessage(\"Torrent File \" + f.getPath() + \" was uploaded\", 3000)\n fileLnk.onclick = () => {\n Backend.eventHub.publish(\"follow_link_event_\", { path: torrent.getDestination() + \"/\" + f.getPath(), domain: globule.domain }, true)\n }\n }\n })\n }\n }\n\n /**\n * Upload files from local computer to globular server\n * @param {*} path \n * @param {*} files \n */\n uploadFiles(path, files, globule) {\n\n // So here I will try to get the most information from the backend to be able to keep the user inform about what append \n // with uploading files process.\n\n // Upload files panel...\n for (var i = 0; i < files.length; i++) {\n let f = files[i]\n let size = getFileSizeString(f.size)\n\n let row = document.createElement(\"div\")\n row.className = \"table-row\"\n row.id = \"_\" + getUuidByString(path + \"/\" + f.name)\n\n let cancelCell = document.createElement(\"div\")\n cancelCell.className = \"table-cell\"\n\n let cancelBtn = document.createElement(\"paper-icon-button\")\n cancelBtn.icon = \"icons:close\"\n cancelCell.appendChild(cancelBtn)\n\n cancelBtn.onclick = () => {\n row.style.display = \"none\";\n }\n\n let cellSource = document.createElement(\"div\")\n cancelCell.className = \"table-cell\"\n cancelCell.id = \"cancel-btn\"\n cellSource.style.flexGrow = \"1\"\n\n cellSource.innerHTML = `\n
\n ${f.name}\n ${path}\n \n
`;\n\n let cellSize = document.createElement(\"div\")\n cellSize.className = \"table-cell\"\n cellSize.innerHTML = size;\n\n row.appendChild(cancelCell)\n row.appendChild(cellSource);\n row.appendChild(cellSize);\n\n // Display message to the user.\n row.querySelector(\"#dest-lnk\").onclick = () => {\n Backend.eventHub.publish(\"follow_link_event_\", { path: path, domain: globule.domain }, true)\n }\n\n // Append to files panels.\n this.files_upload_table.appendChild(row)\n }\n\n // Upload file one by one and \n let uploadFile = (index, callback) => {\n let f = files[index]\n index++\n if (this.files_upload_table.children[0].style.display == \"none\") {\n // simply pass over...\n // this.files_upload_table.removeChild(this.files_upload_table.children[0])\n if (index < files.length) {\n uploadFile(index, callback)\n } else {\n FileController.removeDir(f.path, f.globule)\n callback()\n }\n } else {\n\n // Take the port number from actual globular service conection.\n let port = globule.config.PortHttp\n if (globule.config.Protocol == \"https\") {\n port = globule.config.PortHttps\n }\n\n // generate a token... \n generatePeerToken(globule, token => {\n\n // retreive the row and the progress bar...\n let id = \"_\" + getUuidByString(path + \"/\" + f.name)\n let row = this.files_upload_table.querySelector(\"#\" + id)\n \n let cancelBtn = row.querySelector(\"#cancel-btn\")\n\n // Start upload files.\n let xhr = uploadFiles(globule, token, path, [f],\n () => {\n if (index < files.length) {\n uploadFile(index, callback)\n } else {\n FileController.removeDir(f.path, f.globule)\n callback()\n }\n },\n event => {\n displayMessage(\"File upload for \" + path + \"/\" + f.name + \" fail\", 3000)\n },\n event => {\n let progress = row.querySelector(\"paper-progress\")\n progress.value = (event.loaded / event.total) * 100\n if (event.loaded == event.total) {\n displayMessage(\"File \" + f.name + \" was uploaded\", 3000)\n row.parentNode.removeChild(row)\n\n // Set the lnk...\n row.querySelector(\"#file-lnk\").classList.add(\"file-path\")\n row.querySelector(\"#file-lnk\").onclick = () => {\n Backend.eventHub.publish(\"follow_link_event_\", { path: path + \"/\" + f.name, domain: globule.domain }, true)\n }\n }\n },\n event => {\n displayMessage(\"File upload for \" + path + \"/\" + f.name + \" was cancel\", 3000)\n },\n port)\n\n // overide the onclik event to cancel the file upload in that case.\n cancelBtn.onclick = () => {\n let toast = displayMessage(\n `\n \n
\n
Your about to cancel file upload
\n
Is it what you want to do?
\n
\n Yes\n No\n
\n
\n `,\n 15000 // 15 sec...\n );\n\n let yesBtn = document.querySelector(\"#yes-delete-upload\")\n let noBtn = document.querySelector(\"#no-delete-upload\")\n\n // On yes\n yesBtn.onclick = () => {\n toast.hideToast();\n\n // send abort signal...\n xhr.abort()\n row.style.display = \"none\";\n }\n\n noBtn.onclick = () => {\n toast.hideToast();\n }\n }\n\n }, err => displayError(err, 3000))\n }\n }\n\n // Start file upload!\n uploadFile(0, () => {\n // When all file are uploaded...\n Backend.publish(\"reload_dir_event\", path, false)\n })\n }\n\n /** Get the list of torrent */\n getTorrentLnks(globule, callback) {\n generatePeerToken(globule, token => {\n let rqst = new GetTorrentLnksRequest\n globule.torrentService.getTorrentLnks(rqst, { domain: globule.domain, token: token })\n .then(lnks => callback(lnks))\n }, err => displayError(err, 3000))\n\n }\n\n /**\n * A loop that get torrent info from the server...\n */\n getTorrentsInfo(globule) {\n generatePeerToken(globule, token => {\n let rqst = new GetTorrentInfosRequest\n let stream = globule.torrentService.getTorrentInfos(rqst, { domain: globule.domain, token: token })\n stream.on(\"data\", (rsp) => {\n /** Local event... */\n rsp.getInfosList().forEach(torrent => {\n torrent.globule = globule\n Backend.eventHub.publish(\"__upload_torrent_event__\", torrent, true);\n })\n });\n\n stream.on(\"status\", (status) => {\n if (status.code != 0) {\n console.log(status.details)\n }\n });\n }, err => displayError(err, 3000))\n\n }\n\n}\n\ncustomElements.define('globular-files-uploader', FilesUploader)","import { Backend, displayMessage } from \"../../backend/backend\";\nimport { search } from \"./search\";\n\n/**\n * Search Box\n */\nexport class SearchBar extends HTMLElement {\n // attributes.\n\n // Create the applicaiton view.\n constructor() {\n super()\n // Set the shadow dom.\n this.attachShadow({ mode: 'open' });\n\n this.titlesCheckbox = null\n this.moviesCheckbox = null\n this.tvSeriesCheckbox = null\n this.tvEpisodesCheckbox = null\n this.videosCheckbox = null\n this.youtubeCheckbox = null\n this.adultCheckbox = null\n }\n\n // The connection callback.\n connectedCallback() {\n\n // Innitialisation of the layout.\n this.shadowRoot.innerHTML = `\n \n
\n \n \n \n \n Webpages\n Blog Posts\n
\n Titles\n
\n Movies\n TV-Series\n TV-Episodes\n
\n
\n
\n Videos\n
\n Youtube\n Adult\n
\n
\n Audios\n \n
\n `\n\n\n // give the focus to the input.\n let searchInput = this.shadowRoot.getElementById(\"search_input\")\n let searchIcon = this.shadowRoot.getElementById(\"search_icon\")\n let div = this.shadowRoot.getElementById(\"search-bar\")\n\n let changeSearchContextBtn = this.shadowRoot.getElementById(\"change-search-context\")\n let contextSearchSelector = this.shadowRoot.getElementById(\"context-search-selector\")\n\n this.titlesCheckbox = this.shadowRoot.querySelector(\"#context-search-selector-titles\")\n this.moviesCheckbox = this.shadowRoot.querySelector(\"#context-search-selector-movies\")\n this.tvSeriesCheckbox = this.shadowRoot.querySelector(\"#context-search-selector-tv-series\")\n this.tvEpisodesCheckbox = this.shadowRoot.querySelector(\"#context-search-selector-tv-episodes\")\n\n this.titlesCheckbox.onchange = () => {\n if (this.titlesCheckbox.checked) {\n this.moviesCheckbox.removeAttribute(\"disabled\")\n this.tvSeriesCheckbox.removeAttribute(\"disabled\")\n this.tvEpisodesCheckbox.removeAttribute(\"disabled\")\n } else {\n this.moviesCheckbox.setAttribute(\"disabled\", \"\")\n this.tvSeriesCheckbox.setAttribute(\"disabled\", \"\")\n this.tvEpisodesCheckbox.setAttribute(\"disabled\", \"\")\n }\n }\n\n this.videosCheckbox = this.shadowRoot.querySelector(\"#context-search-selector-videos\")\n this.youtubeCheckbox = this.shadowRoot.querySelector(\"#context-search-selector-youtube\")\n this.adultCheckbox = this.shadowRoot.querySelector(\"#context-search-selector-adult\")\n\n this.videosCheckbox.onchange = () => {\n if (this.videosCheckbox.checked) {\n this.youtubeCheckbox.removeAttribute(\"disabled\")\n this.adultCheckbox.removeAttribute(\"disabled\")\n } else {\n this.youtubeCheckbox.setAttribute(\"disabled\", \"\")\n this.adultCheckbox.setAttribute(\"disabled\", \"\")\n }\n }\n\n\n searchInput.onblur = () => {\n if (contextSearchSelector.style.display != \"flex\") {\n div.style.boxShadow = \"\"\n div.style.backgroundColor = \"\"\n\n searchInput.style.backgroundColor = \"transparent\"\n searchInput.style.color = \"var(--on-primary-color)\"\n searchIcon.style.color = \"var(--on-primary-color)\"\n changeSearchContextBtn.style.color = \"var(--on-primary-color)\"\n contextSearchSelector.style.display = \"none\"\n }\n }\n\n searchInput.onkeydown = (evt) => {\n if (evt.key == \"Enter\") {\n this.search()\n\n } else if (evt.key == \"Escape\") {\n Backend.eventHub.publish(\"_hide_search_results_\", { \"id\": this.id }, true)\n }\n }\n\n\n searchInput.onfocus = (evt) => {\n evt.stopPropagation();\n div.style.boxShadow = \"var(--dark-mode-shadow)\"\n div.style.backgroundColor = \"var(--surface-color)\"\n searchInput.style.color = \"var(--on-surface-color)\"\n searchIcon.style.color = \"var(--on-surface-color)\"\n changeSearchContextBtn.style.color = \"var(--on-surface-color)\"\n contextSearchSelector.style.display = \"none\"\n Backend.eventHub.publish(\"_display_search_results_\", { \"id\": this.id }, true)\n\n\n\n let pages = document.querySelectorAll(\"globular-search-results-page\")\n for (var i = 0; i < pages.length; i++) {\n let page = pages[i]\n if (page.style.display != \"none\") {\n page.facetFilter.style.display = \"\"\n }\n }\n\n // I will remove all highligted text..\n let highlighted = document.getElementsByClassName(\"highlighted\")\n for (var i = 0; i < highlighted.length; i++) {\n if (highlighted[i].lowlight)\n highlighted[i].lowlight();\n }\n }\n\n // Change the search context, this will search over other indexations...\n changeSearchContextBtn.onclick = () => {\n\n if (contextSearchSelector.style.display != \"flex\") {\n contextSearchSelector.style.display = \"flex\"\n } else {\n contextSearchSelector.style.display = \"none\"\n searchInput.focus()\n\n }\n }\n\n searchIcon.onclick = () => {\n this.search()\n }\n }\n\n search() {\n let contextSearchSelector = this.shadowRoot.getElementById(\"context-search-selector\")\n let searchInput = this.shadowRoot.getElementById(\"search_input\")\n let contexts = []\n let checkboxs = this.shadowRoot.querySelectorAll(\".context\")\n for (var i = 0; i < checkboxs.length; i++) {\n let c = checkboxs[i]\n if (c.checked) {\n if (!contexts.includes(c.name))\n contexts.push(c.name)\n }\n }\n\n if (contexts.length > 0) {\n let query = searchInput.value\n\n // remove unwanted results...\n if (!this.adultCheckbox.checked) {\n query += \" -adult\"\n }\n\n if (!this.youtubeCheckbox.checked) {\n query += \" -youtube\"\n }\n\n if (!this.moviesCheckbox.checked) {\n query += \" -Movie\"\n }\n\n if (!this.tvEpisodesCheckbox.checked) {\n query += \" -TVEpisode\"\n }\n\n if (!this.tvSeriesCheckbox.checked) {\n query += \" -TVSerie\"\n }\n\n search(query, contexts, 0, this.id)\n searchInput.value = \"\"\n Backend.eventHub.publish(\"_display_search_results_\", { \"id\": this.id }, true)\n\n } else {\n displayMessage(\"You must selected a search context, Blog, Video or Title...\", 3000)\n contextSearchSelector.style.display = \"flex\"\n }\n }\n}\n\ncustomElements.define('globular-search-bar', SearchBar)\n","import getUuidByString from \"uuid-by-string\";\nimport { playAudios } from \"../audio\";\nimport { playVideos } from \"../video\";\nimport { displayError } from \"../../backend/backend\";\n\nexport class FacetSearchFilter extends HTMLElement {\n // attributes.\n\n // Create the applicaiton view.\n constructor(page) {\n super()\n\n this.page = page\n this.panels = {};\n\n // Set the shadow dom.\n this.attachShadow({ mode: 'open' });\n\n // Innitialisation of the layout.\n this.shadowRoot.innerHTML = `\n \n
\n \n
\n `\n }\n\n // Refresh the facets...\n refresh() {\n for (var key in this.panels) {\n this.panels[key].refresh()\n }\n }\n\n // Set the facets...\n setFacets(facets) {\n\n facets.getFacetsList().forEach(facet => {\n let id = \"_\" + getUuidByString(facet.getField())\n let p = this.panels[id]\n if (p == undefined) {\n p = new SearchFacetPanel(this.page)\n this.panels[id] = p\n }\n\n if (facet.getTotal() > 0) {\n p.slot = \"facets\"\n p.setFacet(facet)\n this.appendChild(p)\n }\n })\n }\n}\n\ncustomElements.define('globular-facet-search-filter', FacetSearchFilter)\n\n/**\n * This facet informations...\n */\nexport class SearchFacetPanel extends HTMLElement {\n // attributes.\n\n // Create the applicaiton view.\n constructor(page) {\n super()\n // Set the shadow dom.\n this.attachShadow({ mode: 'open' });\n this.page = page\n this.terms = {}\n\n // Innitialisation of the layout.\n this.shadowRoot.innerHTML = `\n \n\n
\n
\n \n \n
\n
\n\n
\n
\n `\n\n let facetList = this.shadowRoot.querySelector(\".facet-list\")\n let checkbox_ = this.shadowRoot.querySelector(\"paper-checkbox\")\n\n checkbox_.onclick = () => {\n this.page.hideAll()\n if (checkbox_.checked) {\n this.page.showAll()\n }\n\n // refresh the page\n this.page.refresh()\n this.page.refreshNavigatorAndContextSelector()\n\n let checkboxs = facetList.querySelectorAll(\"paper-checkbox\")\n for (var i = 0; i < checkboxs.length; i++) {\n let checkbox = checkboxs[i]\n if (!checkbox_.checked) {\n if (checkbox.checked) {\n checkbox.checked = false\n }\n } else {\n if (!checkbox.checked) {\n checkbox.checked = true\n }\n }\n }\n }\n }\n\n refresh() {\n // refresh the panels....\n this.shadowRoot.querySelector(\"#total_span\").innerHTML = \"(\" + this.page.getTotal() + \")\"\n let facetList = this.shadowRoot.querySelector(\".facet-list\")\n\n for (var key in this.terms) {\n let term = this.terms[key]\n let count = this.page.countElementByClassName(term.className)\n if (count > 0) {\n term.countDiv.innerHTML = \"(\" + count + \")\"\n facetList.appendChild(term)\n } else if (term.parentNode) {\n term.parentNode.removeChild(term)\n }\n }\n\n }\n\n setFacet(facet) {\n this.facet = facet;\n this.id = \"_\" + getUuidByString(facet.getField())\n let field = facet.getField()\n this.shadowRoot.querySelector(\"#total_span\").innerHTML = \"(\" + this.page.getTotal() + \")\"\n this.shadowRoot.querySelector(\"#field_span\").innerHTML = facet.getField()\n\n /** Play all results found... */\n this.shadowRoot.querySelector(\"#play_facet_btn\").onclick = () => {\n\n let audios = this.page.getAudios()\n let videos = this.page.getVideos()\n\n // Play the audios found...\n if (audios.length > 0) {\n playAudios(audios, facet.getField())\n } else if (videos.length > 0) {\n playVideos(videos, facet.getField())\n } else {\n displayError(\"no item to play!\", 3000)\n }\n }\n\n let range = document.createRange()\n let terms = facet.getTermsList().sort((a, b) => {\n if (a.getTerm() < b.getTerm()) { return -1; }\n if (a.getTerm() > b.getTerm()) { return 1; }\n return 0;\n })\n\n let facetList = this.shadowRoot.querySelector(\".facet-list\")\n let checkbox_ = this.shadowRoot.querySelector(\"paper-checkbox\")\n\n terms.forEach(t => {\n\n let term = t.getTerm()\n let className = t.getTerm()\n if (term.startsWith(\"{\")) {\n let obj = JSON.parse(term)\n term = obj.name + \" \" + obj.min + \"-\" + obj.max\n className = obj.name\n }\n\n let uuid = \"_\" + getUuidByString(className)\n if (this.terms[uuid] == undefined) {\n let html = `\n
\n \n
${term + \"\"}
\n
\n `\n // The facet list.\n facetList.appendChild(range.createContextualFragment(html))\n\n if (this.getAudios(className).length > 0 || this.getVideos(className, field).length > 0) {\n this.shadowRoot.querySelector(\"#\" + uuid + \"_play_btn\").style.display = \"block\"\n this.shadowRoot.querySelector(\"#play_facet_btn\").style.display = \"block\"\n } else {\n this.shadowRoot.querySelector(\"#\" + uuid + \"_play_btn\").style.display = \"none\"\n }\n\n this.shadowRoot.querySelector(\"#\" + uuid + \"_play_btn\").onclick = () => {\n // Play the audios found...\n let audios = this.getAudios(className)\n if (audios.length > 0)\n playAudios(audios, term)\n\n let videos = this.getVideos(className, field)\n if (videos.length > 0)\n playVideos(videos, term)\n\n }\n\n // keep track of the terms...\n this.terms[uuid] = this.shadowRoot.querySelector(\"#\" + uuid + \"_div\")\n\n let checkbox = this.shadowRoot.querySelector(\"#\" + uuid)\n checkbox.onclick = () => {\n this.page.hideAll()\n // Get all checkboxs of a facet...\n let checkboxs = facetList.querySelectorAll(\"paper-checkbox\")\n\n for (var i = 0; i < checkboxs.length; i++) {\n let checkbox = checkboxs[i]\n if (checkbox.checked) {\n this.page.showAll(checkbox.className)\n }\n }\n\n this.page.offset = 0;\n this.page.navigator.setTotal(this.page.getTotal())\n this.page.refresh()\n this.page.refreshNavigatorAndContextSelector()\n }\n\n\n checkbox.onchange = () => {\n if (checkbox.checked) {\n checkbox_.checked = true\n }\n }\n\n // keep reference into the object.\n this.terms[uuid].countDiv = facetList.querySelector(\"#\" + uuid + \"_total\")\n this.terms[uuid].className = className\n }\n\n let count = this.page.countElementByClassName(className)\n if (this.terms[uuid]) {\n if (count > 0) {\n this.terms[uuid].countDiv.innerHTML = \"(\" + count + \")\"\n } else if (this.terms[uuid].parentNode) {\n // remove it from the dom...\n this.terms[uuid].parentNode.removeChild(this.terms[uuid])\n }\n }\n\n })\n }\n\n\n\n getAudios(className) {\n let audios = this.page.getAudios(className)\n return audios\n }\n\n getVideos(className, field) {\n let videos = this.page.getVideos(className, field)\n return videos\n }\n\n}\n\ncustomElements.define('globular-facet', SearchFacetPanel)\n","import getUuidByString from \"uuid-by-string\";\nimport { Backend } from \"../../backend/backend\";\nimport { BlogPostInfo } from \"../informationManager/blogPostInfo\";\nimport { InformationsManager } from \"../informationManager/informationsManager\";\nimport { SearchAudioCard } from \"./searchAudioCard\";\nimport { FacetSearchFilter } from \"./searchFacet\";\nimport { SearchTitleCard } from \"./searchTitleCard\";\nimport { SearchVideoCard } from \"./searchVideoCard\";\nimport { randomUUID } from \"../utility\";\n\nconst MAX_DISPLAY_RESULTS = 20\n\nexport class SearchResultsPagesNavigator extends HTMLElement {\n // attributes.\n\n // Create the applicaiton view.\n constructor() {\n super()\n // Set the shadow dom.\n this.attachShadow({ mode: 'open' });\n\n this.page = null;\n\n\n // Innitialisation of the layout.\n this.shadowRoot.innerHTML = `\n \n
\n \n
\n `\n // give the focus to the input.\n this.container = this.shadowRoot.querySelector(\"#container\")\n this.nb_pages = 0;\n }\n\n // The connection callback.\n connectedCallback() {\n // When the component is set on the page and ready...\n\n }\n\n // Set the page reuslts...\n setSearchResultsPage(page) {\n this.page = page;\n }\n\n setIndex(index, btn) {\n if (btn == undefined) {\n btn = this.container.querySelector(`#page_${index}`)\n }\n\n // so here I will get the new search...\n this.page.offset = index\n\n Backend.eventHub.publish(\"_display_search_results_\", {}, true)\n this.page.refresh()\n\n let actives = this.shadowRoot.querySelectorAll(\".active\")\n for (var i = 0; i < actives.length; i++) {\n actives[i].classList.remove(\"active\")\n }\n\n btn.classList.add(\"active\")\n }\n\n setTotal(total) {\n if (this.nb_pages == Math.ceil(total / MAX_DISPLAY_RESULTS)) {\n return\n }\n\n this.container.innerHTML = \"\"\n this.nb_pages = Math.ceil(total / MAX_DISPLAY_RESULTS)\n if (this.nb_pages > 1) {\n for (var i = 0; i < this.nb_pages; i++) {\n let btn = document.createElement(\"div\")\n btn.id = \"page_\" + i\n btn.innerHTML = i + 1\n btn.classList.add(\"pagination-btn\")\n if (i == this.page.offset) {\n btn.classList.add(\"active\")\n }\n let index = i\n btn.onclick = () => {\n this.setIndex(index, btn)\n }\n this.container.appendChild(btn)\n }\n }\n }\n}\n\ncustomElements.define('globular-search-results-pages-navigator', SearchResultsPagesNavigator)\n\n\n/**\n * Sample empty component\n */\nexport class SearchResultsPageContextsSelector extends HTMLElement {\n // attributes.\n\n // Create the applicaiton view.\n constructor() {\n super()\n // Set the shadow dom.\n this.attachShadow({ mode: 'open' });\n this.page = null;\n this.contexts = [];\n\n // Innitialisation of the layout.\n this.shadowRoot.innerHTML = `\n \n
\n
\n `\n // give the focus to the input.\n this.container = this.shadowRoot.querySelector(\"#container\")\n }\n\n // The connection callback.\n connectedCallback() {\n\n }\n\n // Set the page reuslts...\n setSearchResultsPage(page) {\n this.page = page;\n }\n\n // Set the context...\n setContexts(contexts) {\n contexts.forEach(context => {\n let html = `\n
\n \n ${context}\n \n
\n `\n let range = document.createRange()\n this.container.appendChild(range.createContextualFragment(html))\n\n let checkbox = this.container.querySelector(`#${context}_checkbox`);\n checkbox.onclick = () => {\n this.page.setContextState(context, checkbox.checked)\n }\n })\n }\n\n // Set context total.\n setContextTotal(context, total) {\n this.container.querySelector(`#${context}_div`).style.display = \"flex\";\n this.container.querySelector(`#${context}_total`).innerHTML = `(${total})`\n }\n\n}\n\ncustomElements.define('globular-search-results-page-contexts-selector', SearchResultsPageContextsSelector)\n\n/**\n * Search Results\n */\nexport class SearchResultsPage extends HTMLElement {\n // attributes.\n\n // Create the applicaiton view.\n constructor(uuid, summary, contexts, tab) {\n super()\n // Set the shadow dom.\n this.attachShadow({ mode: 'open' });\n this.id = `${uuid}-results-page`\n this.offset = 0;\n this.count = 0;\n this.query = summary.getQuery();\n this.contexts = contexts;\n this.tab = tab;\n\n // Innitialisation of the layout.\n this.shadowRoot.innerHTML = `\n \n
\n
\n \n
\n
\n
\n
\n \n \n
\n
\n \n \n
\n
\n\n
\n \n
\n \n \n \n \n
\n
\n \n \n \n \n
\n
Webpage search results ()
\n \n
\n
\n \n \n \n
\n
\n \n
\n
\n
\n `\n\n // the next and previous results buttons.\n this.nextResultsBtn = this.shadowRoot.querySelector(\"#next-results-btn\")\n this.previousResultsBtn = this.shadowRoot.querySelector(\"#previous-results-btn\")\n this.currentPageIndex = this.shadowRoot.querySelector(\"#results-index\")\n this.currentActionsBtns = this.shadowRoot.querySelector(\"#results-actions-btns\")\n\n // display hint about more results can be displayed.\n let resultsDiv = this.shadowRoot.querySelector(\"#results\")\n resultsDiv.onscroll = () => {\n if (resultsDiv.scrollTop == 0) {\n resultsDiv.style.boxShadow = \"\"\n resultsDiv.style.borderTop = \"\"\n } else {\n resultsDiv.style.boxShadow = \"inset 0px 5px 6px -3px rgb(0 0 0 / 40%)\"\n resultsDiv.style.borderTop = \"1px solid var(--palette-divider)\"\n }\n }\n\n this.navigator = this.shadowRoot.querySelector(\"globular-search-results-pages-navigator\")\n this.navigator.setSearchResultsPage(this)\n\n // connect the previous and next page buttons\n this.nextResultsBtn.onclick = () => {\n this.navigator.setIndex(this.offset + 1)\n }\n\n this.previousResultsBtn.onclick = () => {\n this.navigator.setIndex(this.offset - 1)\n }\n\n this.contextsSelector = this.shadowRoot.querySelector(\"globular-search-results-page-contexts-selector\")\n this.contextsSelector.setSearchResultsPage(this)\n this.contextsSelector.setContexts(contexts)\n\n // left or right side filter...\n this.facetFilter = new FacetSearchFilter(this)\n this.facetFilter.slot = \"facets\"\n this.appendChild(this.facetFilter)\n\n // Get the tow button...\n this.searchReusltLstViewBtn = this.shadowRoot.querySelector(\"#search-result-lst-view-btn\")\n this.searchReusltIconViewBtn = this.shadowRoot.querySelector(\"#search-result-icon-view-btn\")\n this.viewType = \"icon\"\n this.hits = {} // keep the current list in memory...\n this.hits_by_context = {}\n this.hits_by_className = {}\n\n this.searchReusltLstViewBtn.onclick = () => {\n this.searchReusltLstViewBtn.classList.remove(\"disable\")\n this.searchReusltIconViewBtn.classList.add(\"disable\")\n this.viewType = \"lst\"\n this.shadowRoot.querySelector(\"#list-view\").style.display = \"block\"\n this.shadowRoot.querySelector(\"#mosaic-view\").style.display = \"none\"\n }\n\n this.searchReusltIconViewBtn.onclick = () => {\n this.searchReusltLstViewBtn.classList.add(\"disable\")\n this.searchReusltIconViewBtn.classList.remove(\"disable\")\n this.viewType = \"mosaic\"\n this.shadowRoot.querySelector(\"#list-view\").style.display = \"none\"\n this.shadowRoot.querySelector(\"#mosaic-view\").style.display = \"block\"\n }\n\n // Display facets\n Backend.eventHub.subscribe(`${uuid}_search_facets_event__`, listner_uuid => { },\n evt => {\n this.facetFilter.setFacets(evt.facets)\n }, true)\n\n // Append it to the results.\n Backend.eventHub.subscribe(`${uuid}_search_hit_event__`, listner_uuid => { },\n evt => {\n Backend.eventHub.publish(\"_display_search_results_\", { \"file-explorer-id\": evt[\"file-explorer-id\"] }, true)\n if (this.hits_by_context[evt.context] == null) {\n this.hits_by_context[evt.context] = []\n }\n\n // get the uuid from the hit content object.\n let getHitUuid = (hit) => {\n if (hit.hasTitle || hit.hasVideo || hit.hasAudio) {\n if (hit.hasTitle()) {\n return getUuidByString(hit.getTitle().getName())\n } else if (hit.hasVideo()) {\n return getUuidByString(hit.getVideo().getId())\n } else if (hit.hasAudio()) {\n return getUuidByString(hit.getAudio().getId())\n }\n } else if (hit.hasBlog()) {\n return hit.getBlog().getUuid()\n }\n }\n\n let hit = evt.hit\n let uuid = getHitUuid(hit)\n\n if (this.hits[uuid] == undefined) {\n\n this.hits[uuid] = hit\n this.hits_by_context[evt.context].push(hit)\n\n hit.hidden = false;\n hit.enable = true;\n if (hit.hasTitle || hit.hasVideo || hit.hasAudio) {\n // here I will keep track of hit classes...\n if (hit.hasTitle()) {\n hit.getTitle().getGenresList().forEach(g => {\n let className = getUuidByString(g.toLowerCase())\n if (this.hits_by_className[className] == undefined) {\n this.hits_by_className[className] = []\n }\n if (this.hits_by_className[className].indexOf(uuid) == -1) {\n this.hits_by_className[className].push(uuid)\n }\n })\n // now the term..\n let className = getUuidByString(\"high\")\n if (hit.getTitle().getRating() < 3.5) {\n className = getUuidByString(\"low\")\n } else if (hit.getTitle().getRating() < 7.0) {\n className = getUuidByString(\"medium\")\n }\n\n if (this.hits_by_className[className] == undefined) {\n this.hits_by_className[className] = []\n }\n\n if (this.hits_by_className[className].indexOf(uuid) == -1) {\n this.hits_by_className[className].push(uuid)\n }\n\n } else if (hit.hasVideo()) {\n hit.getVideo().getGenresList().forEach(g => {\n let className = getUuidByString(g.toLowerCase())\n if (this.hits_by_className[className] == undefined) {\n this.hits_by_className[className] = []\n }\n if (this.hits_by_className[className].indexOf(uuid) == -1) {\n this.hits_by_className[className].push(uuid)\n }\n })\n\n hit.getVideo().getTagsList().forEach(g => {\n let className = getUuidByString(g.toLowerCase())\n if (this.hits_by_className[className] == undefined) {\n this.hits_by_className[className] = []\n }\n if (this.hits_by_className[className].indexOf(uuid) == -1) {\n this.hits_by_className[className].push(uuid)\n }\n })\n\n // now the term..\n let className = getUuidByString(\"high\")\n if (hit.getVideo().getRating() < 3.5) {\n className = getUuidByString(\"low\")\n } else if (hit.getVideo().getRating() < 7.0) {\n className = getUuidByString(\"medium\")\n }\n\n if (this.hits_by_className[className] == undefined) {\n this.hits_by_className[className] = []\n }\n\n if (this.hits_by_className[className].indexOf(uuid) == -1) {\n this.hits_by_className[className].push(uuid)\n }\n } else if (hit.hasAudio()) {\n\n hit.getAudio().getGenresList().forEach(g => {\n g.split(\" \").forEach(g_ => {\n let className = getUuidByString(g_.toLowerCase())\n\n if (this.hits_by_className[className] == undefined) {\n this.hits_by_className[className] = []\n }\n if (this.hits_by_className[className].indexOf(uuid) == -1) {\n this.hits_by_className[className].push(uuid)\n }\n })\n\n })\n }\n }\n\n // Display first results...\n if (this.hits_by_context[evt.context].length < MAX_DISPLAY_RESULTS) {\n this.appendChild(this.displayMosaicHit(hit, evt.context))\n this.appendChild(this.displayListHit(hit, evt.context))\n }\n\n this.refreshNavigatorAndContextSelector()\n\n // set the total...\n if (this.tab) {\n if (this.tab.totalSpan) {\n this.tab.totalSpan.innerHTML = this.getTotal() + \"\"\n }\n }\n\n\n }\n\n }, true)\n\n\n // Append the webpage search result...\n Backend.eventHub.subscribe(\n \"display_webpage_search_result_\" + summary.getQuery(),\n (uuid) => (this.display_webpage_search_result_page = uuid),\n (results) => {\n // Set the search results navigator.\n let range = document.createRange();\n let webpageSearchResults = this.shadowRoot.querySelector(\"#webpage-search-results\");\n webpageSearchResults.innerHTML = \"\";\n let count = 0;\n results.forEach((r) => {\n let doc = JSON.parse(r.getData());\n let snippet = JSON.parse(r.getSnippet());\n let uuid = crypto.randomUUID(); // Use UUID for unique identification\n let html = `\n
\n `\n\n\n let range = document.createRange()\n //this.appendChild()\n let hitDiv = range.createContextualFragment(html)\n\n let snippetDiv = hitDiv.querySelector(`.snippets-div`)\n\n let titleInfoDiv = hitDiv.querySelector(`.title-info-div`)\n\n let infoDisplay = new InformationsManager()\n\n if (hit.hasTitle || hit.hasVideo || hit.hasAudio) {\n if (hit.hasTitle()) {\n infoDisplay.setTitlesInformation([hit.getTitle()], hit.globule)\n hitDiv.children[0].classList.add(\"filterable\")\n let title = hit.getTitle()\n title.globule = hit.globule;\n title.getGenresList().forEach(g => hitDiv.children[0].classList.add(getUuidByString(g.toLowerCase())))\n hitDiv.children[0].classList.add(getUuidByString(title.getType().toLowerCase()))\n\n // now the term..\n if (title.getRating() < 3.5) {\n hitDiv.children[0].classList.add(getUuidByString(\"low\"))\n } else if (title.getRating() < 7.0) {\n hitDiv.children[0].classList.add(getUuidByString(\"medium\"))\n } else {\n hitDiv.children[0].classList.add(getUuidByString(\"high\"))\n }\n\n } else if (hit.hasVideo()) {\n infoDisplay.setVideosInformation([hit.getVideo()])\n hitDiv.children[0].classList.add(\"filterable\")\n let video = hit.getVideo()\n video.globule = hit.globule\n video.getGenresList().forEach(g => hitDiv.children[0].classList.add(getUuidByString(g.toLowerCase())))\n video.getTagsList().forEach(tag => hitDiv.children[0].classList.add(getUuidByString(tag.toLowerCase())))\n\n // now the term..\n if (video.getRating() < 3.5) {\n hitDiv.children[0].classList.add(getUuidByString(\"low\"))\n } else if (video.getRating() < 7.0) {\n hitDiv.children[0].classList.add(getUuidByString(\"medium\"))\n } else {\n hitDiv.children[0].classList.add(getUuidByString(\"high\"))\n }\n } else if (hit.hasAudio()) {\n infoDisplay.setAudiosInformation([hit.getAudio()])\n hitDiv.children[0].classList.add(\"filterable\")\n let audio = hit.getAudio()\n audio.globule = hit.globule\n audio.getGenresList().forEach(g => {\n g.split(\" \").forEach(g_ => hitDiv.children[0].classList.add(getUuidByString(g_.toLowerCase())))\n\n })\n }\n\n infoDisplay.hideHeader()\n } else {\n let blogPost = hit.getBlog()\n blogPost.globule = hit.globule;\n hitDiv.children[0].classList.add(\"filterable\")\n infoDisplay.setBlogPostInformation(blogPost)\n blogPost.getKeywordsList().forEach(kw => hitDiv.children[0].classList.add(getUuidByString(kw.toLowerCase())))\n }\n\n\n titleInfoDiv.appendChild(infoDisplay)\n\n // Here I will display the snippet results.\n hit.getSnippetsList().forEach(snippet => {\n let html = `\n
\n
${snippet.getField()}
\n \n
\n `\n snippetDiv.appendChild(range.createContextualFragment(html))\n\n let fragmentDiv = snippetDiv.children[snippetDiv.children.length - 1].children[1]\n snippet.getFragmentsList().forEach(f => {\n let div = document.createElement(\"div\")\n div.style.paddingBottom = \"5px\";\n div.innerHTML = f\n fragmentDiv.appendChild(div)\n })\n })\n\n return hitDiv\n }\n}\n\ncustomElements.define('globular-search-results-page', SearchResultsPage)","import getUuidByString from \"uuid-by-string\";\nimport { Backend } from \"../../backend/backend\";\nimport { SearchResultsPage } from \"./searchResultsPage\";\n\n/**\n * Search Results\n */\nexport class SearchResults extends HTMLElement {\n // attributes.\n\n // Create the applicaiton view.\n constructor() {\n super()\n\n // Set the shadow dom.\n this.attachShadow({ mode: 'open' });\n\n // Innitialisation of the layout.\n this.shadowRoot.innerHTML = `\n \n\n
\n
\n \n \n \n
\n
No search results to display...
\n \n
\n `\n\n this.tabs = this.shadowRoot.querySelector(\"#search-results\")\n document.addEventListener(\"backend-ready\", (evt) => {\n\n /*Backend.eventHub.subscribe(\"_hide_search_results_\", uuid => { }, evt => {\n\n if (this.parentNode) {\n this.parentNode.removeChild(this)\n }\n }, true)*/\n\n // So here I will create a new Search Result page if none exist...\n Backend.eventHub.subscribe(\"__new_search_event__\", uuid => { },\n evt => {\n\n this.shadowRoot.querySelector(\"#container\").style.display = \"flex\"\n\n let uuid = \"_\" + getUuidByString(evt.query)\n let tab = this.tabs.querySelector(`#${uuid}-tab`)\n let query = evt.query.replaceAll(\" -adult\", \"\").replaceAll(\" -youtube\", \"\").replaceAll(\" -TVEpisode\", \"\").replaceAll(\" -TVSerie\", \"\").replaceAll(\" -Movie\", \"\")\n if (tab == null) {\n let html = `\n \n ${query} ()\n \n \n `\n\n let range = document.createRange()\n this.tabs.appendChild(range.createContextualFragment(html))\n tab = this.tabs.querySelector(`#${uuid}-tab`)\n tab.totalSpan = tab.querySelector(`#${uuid}-total-span`)\n\n tab.onclick = () => {\n\n\n let page = this.querySelector(`#${uuid}-results-page`)\n if (page == undefined) {\n return\n }\n\n\n let index = 0\n for (var i = 0; i < this.children.length; i++) {\n this.children[i].style.display = \"none\";\n if (this.children[i].id == `${uuid}-results-page`) {\n index = i\n }\n }\n\n this.tabs.selected = index;\n page.style.display = \"\"\n\n\n // display the filters...\n page.facetFilter.style.display = \"\"\n }\n\n let closeBtn = this.tabs.querySelector(`#${uuid}-close-btn`)\n closeBtn.onclick = (evt_) => {\n evt_.stopPropagation()\n this.deletePageResults(uuid)\n\n if (this.children.length == 0) {\n this.shadowRoot.querySelector(\"#empty-search-msg\").style.display = \"block\";\n }\n }\n this.tabs.selected = this.children.length;\n\n } else {\n tab.click()\n\n }\n\n // Create a new page...\n let resultsPage = this.querySelector(`#${uuid}-results-page`)\n if (resultsPage == null) {\n resultsPage = new SearchResultsPage(uuid, evt.summary, evt.contexts, tab)\n for (var i = 0; i < this.children.length; i++) {\n this.children[i].style.display = \"none\";\n }\n this.appendChild(resultsPage)\n this.shadowRoot.querySelector(\"#empty-search-msg\").style.display = \"none\";\n\n // ApplicationView.layout.sideMenu().appendChild(resultsPage.facetFilter)\n\n } else if (evt.summary) {\n tab.totalSpan.innerHTML = resultsPage.getTotal() + \"\"\n }\n\n }, true)\n })\n\n this.closeBtn = this.shadowRoot.querySelector(\"#close-btn\")\n this.closeBtn.onclick = () => {\n this.style.display = \"none\" \n Backend.eventHub.publish(\"_hide_search_results_\", {}, true)\n }\n\n\n }\n\n connectedCallback() {\n\n }\n\n isEmpty() {\n return this.tabs.querySelectorAll(\"paper-tab\").length == 0\n }\n\n deletePageResults(uuid) {\n var index = 0;\n for (var i = 0; i < this.children.length; i++) {\n if (this.children[i].id == `${uuid}-results-page`) {\n index = i;\n break\n }\n }\n\n let page = this.querySelector(`#${uuid}-results-page`)\n page.parentNode.removeChild(page)\n // page.facetFilter.parentNode.removeChild(page.facetFilter)\n //ApplicationView.layout.sideMenu().removeChild(page.facetFilter)\n\n let tab = this.tabs.querySelector(`#${uuid}-tab`)\n tab.parentNode.removeChild(tab)\n\n let nextPage = null;\n if (index > this.children.length - 1) {\n nextPage = this.children[this.children.length - 1]\n } else {\n nextPage = this.children[index]\n }\n\n if (nextPage != null) {\n let tab_uuid = nextPage.id.replace(\"-results-page\", \"-tab\")\n this.tabs.querySelector(`#${tab_uuid}`).click()\n }\n\n // close the results view\n if (this.tabs.querySelectorAll(\"paper-tab\").length == 0) {\n Backend.eventHub.publish(\"_hide_search_results_\", { \"id\": this.id }, true)\n }\n }\n\n}\n\ncustomElements.define('globular-search-results', SearchResults)\n","import { get } from \"lodash\";\nimport { Backend, displayMessage } from \"../../backend/backend\";\nimport { FileController } from \"../../backend/file\";\nimport { SearchDocumentsRequest } from \"globular-web-client/search/search_pb\";\n\n/**\n * The search document bar.\n */\nexport class SearchDocumentBar extends HTMLElement {\n // attributes.\n\n // Create the applicaiton view.\n constructor() {\n super()\n // Set the shadow dom.\n this.attachShadow({ mode: 'open' });\n\n this._file_explorer_ = null\n }\n\n // The connection callback.\n connectedCallback() {\n\n // Innitialisation of the layout.\n this.shadowRoot.innerHTML = `\n \n
\n \n \n
\n `\n\n let searchInput = this.shadowRoot.getElementById(\"search_input\")\n let searchIcon = this.shadowRoot.getElementById(\"search_icon\")\n let div = this.shadowRoot.getElementById(\"search-bar\")\n\n searchInput.onblur = () => {\n\n div.style.boxShadow = \"\"\n div.style.backgroundColor = \"\"\n\n searchInput.style.backgroundColor = \"transparent\"\n searchInput.style.color = \"var(--on-primary-color)\"\n searchIcon.style.color = \"var(--on-primary-color)\"\n }\n\n\n searchInput.onfocus = (evt) => {\n evt.stopPropagation();\n div.style.boxShadow = \"var(--dark-mode-shadow)\"\n div.style.backgroundColor = \"var(--surface-color)\"\n searchInput.style.color = \"var(--on-surface-color)\"\n searchIcon.style.color = \"var(--on-surface-color)\"\n\n let previousResults = this._file_explorer_.querySelector(\"globular-document-search-results\");\n if (previousResults) {\n previousResults.style.display = \"\";\n }\n }\n\n searchIcon.onclick = () => {\n this.search()\n }\n\n searchInput.onkeyup = (evt) => {\n if (evt.key === \"Enter\") {\n this.search()\n }\n if(searchInput.value.length == 0){\n let previousResults = this._file_explorer_.querySelector(\"globular-document-search-results\");\n if (previousResults) {\n previousResults.parentElement.removeChild(previousResults);\n }\n }\n }\n }\n\n search() {\n let globule = Backend.globular;\n let searchInput = this.shadowRoot.getElementById(\"search_input\")\n let searchValue = searchInput.value\n if (searchValue.length > 0) {\n let indexs = []\n let getIndexPaths = (dir) => {\n let files = dir.getFilesList()\n for (let i = 0; i < files.length; i++) {\n let file = files[i]\n if (file.getName() == \"__index_db__\") {\n let path = file.getPath()\n if (path.startsWith(\"/users/\") || path.startsWith(\"/applications/\")) {\n\n path = globule.config.DataPath + \"/files\" + path\n }\n indexs.push(path)\n } else if (file.getIsDir()) {\n getIndexPaths(file)\n }\n }\n }\n\n // Here I will get the current folder and search for the file.\n let current_folder = this._file_explorer_.path + \"/.hidden\"\n FileController.readDir(current_folder, (hiddenDir) => {\n getIndexPaths(hiddenDir)\n if (indexs.length == 0) {\n displayMessage(\"No index found for the search\")\n return\n }\n\n // Now I will search document...\n let router = document.querySelector(\"globular-router\");\n let application = router.getAttribute(\"base\");\n let query = `Text:${searchValue}`;\n\n console.log(\"Searching for the file\", query)\n // Create the search request\n let rqst = new SearchDocumentsRequest();\n console.log(\"Indexs\", indexs)\n rqst.setPathsList(indexs);\n rqst.setLanguage(\"en\");\n rqst.setFieldsList([\"Text\"]);\n rqst.setOffset(0);\n rqst.setPagesize(1000);\n rqst.setQuery(query);\n\n let stream = globule.searchService.searchDocuments(rqst, {\n domain: globule.domain,\n application: application\n });\n\n let results = [];\n\n // Process the search stream using event listeners\n stream.on(\"data\", (rsp) => {\n results = results.concat(rsp.getResults().getResultsList());\n });\n\n stream.on(\"end\", () => {\n let searchResults = new DocumentSearchResults();\n searchResults._file_explorer_ = this._file_explorer_;\n searchResults.setResults(results);\n this._file_explorer_.setSearchResults(searchResults);\n });\n\n stream.on(\"error\", (error) => {\n displayMessage(\"Error while searching for the file \" + error.message)\n });\n\n }, (error) => {\n displayMessage(\"Error while searching for the file \" + error.message)\n }, Backend.globular, true)\n\n\n //searchInput.value = \"\"\n searchInput.blur()\n\n }\n }\n}\n\n// Define the custom element.\ncustomElements.define('globular-search-document-bar', SearchDocumentBar);\n\n\nclass DocumentSearchResults extends HTMLElement {\n constructor() {\n super();\n this.attachShadow({ mode: \"open\" });\n this.shadowRoot.innerHTML = `\n \n
\n \n
\n `;\n }\n\n setResults(results) {\n const documentSearchResults = this.shadowRoot.querySelector(\"#document-search-results\");\n documentSearchResults.innerHTML = \"\";\n let range = document.createRange();\n\n let closeBtn = document.createElement(\"paper-icon-button\");\n closeBtn.icon = \"close\";\n closeBtn.style = \"position: sticky; z-index: 1000;\";\n closeBtn.onclick = () => {\n this.parentElement.removeChild(this);\n };\n documentSearchResults.appendChild(closeBtn);\n\n results.forEach((r) => {\n let doc = JSON.parse(r.getData());\n let snippet = JSON.parse(r.getSnippet());\n let uuid = crypto.randomUUID();\n console.log(\"Document\", doc);\n\n let html = `\n
\n
\n ${parseFloat(r.getRank() / 1000).toFixed(3)}\n
${doc.Path}
\n
\n
\n \n
\n \n
\n `;\n\n documentSearchResults.appendChild(range.createContextualFragment(html));\n let content = documentSearchResults.querySelector(`#content-${uuid}`);\n let snippetsDiv = content.querySelector(`#snippets-${uuid}-div`);\n let lnk = documentSearchResults.querySelector(`#page-${uuid}-lnk`);\n FileController.getFile(Backend.globular, doc.Path, 64, 64, (file) => {\n let thumbnail = file.getThumbnail();\n if (thumbnail) {\n let img = document.createElement(\"img\");\n img.src = thumbnail;\n img.style = \"width: 128px; height: 128px; margin-right: 20px; padding: 10px;\";\n content.insertBefore(img, snippetsDiv);\n\n img.onmouseenter = () => { img.style.cursor = \"pointer\"; };\n img.onmouseleave = () => { img.style.cursor = \"default\"; };\n\n lnk.onclick = img.onclick = () => {\n this.style.display = \"none\";\n this._file_explorer_.readFile(file, doc.Number + 1); // Open the document at the page number.\n };\n }\n }, (error) => { console.log(\"Error while getting the file\", error) });\n\n\n snippet.Text.forEach((s) => {\n let div = document.createElement(\"div\");\n div.innerHTML = s;\n snippetsDiv.appendChild(div);\n });\n\n\n });\n }\n}\n\ncustomElements.define(\"globular-document-search-results\", DocumentSearchResults);","// Date: 2021-05-17\n// Creator: Dave Courtois\n// \nimport { GetFileAudiosRequest, GetFileTitlesRequest, GetFileVideosRequest } from \"globular-web-client/title/title_pb\";\nimport { randomUUID } from \"./utility\";\nimport { Backend, displayError, displayMessage } from \"../backend/backend\";\nimport { FileExplorer } from \"./fileExplorer/fileExplorer\";\nimport { playVideo } from \"./video\";\nimport { playAudio } from \"./audio\";\nimport { FileController } from \"../backend/file\";\n\n// Now I will test if imdb info are allready asscociated.\nfunction getTitleInfo(globule, path, callback) {\n let rqst = new GetFileTitlesRequest\n rqst.setIndexpath(globule.config.DataPath + \"/search/titles\")\n\n rqst.setFilepath(path)\n\n globule.titleService.getFileTitles(rqst, { domain: globule.domain })\n .then(rsp => {\n callback(rsp.getTitles().getTitlesList())\n })\n .catch(err => {\n // so here no title was found...\n\n callback([])\n })\n}\n\nfunction getVideoInfo(globule, path, callback) {\n\n let rqst = new GetFileVideosRequest\n rqst.setIndexpath(globule.config.DataPath + \"/search/videos\")\n rqst.setFilepath(path)\n\n globule.titleService.getFileVideos(rqst, { domain: globule.domain })\n .then(rsp => {\n let videos = rsp.getVideos().getVideosList()\n callback(videos)\n })\n .catch(err => {\n callback([])\n })\n}\n\nfunction getAudioInfo(globule, path, callback) {\n\n let rqst = new GetFileAudiosRequest\n rqst.setIndexpath(globule.config.DataPath + \"/search/audios\")\n rqst.setFilepath(path)\n\n globule.titleService.getFileAudios(rqst, { domain: globule.domain })\n .then(rsp => {\n let audios = rsp.getAudios().getAudiosList()\n callback(audios)\n })\n .catch(err => {\n callback([])\n })\n}\n\n/**\n * Sample empty component\n */\nexport class Link extends HTMLElement {\n // attributes.\n\n // Create the applicaiton view.\n constructor(path, thumbnail, domain = Backend.domain, deleteable = false, alias = \"\") {\n super()\n // Set the shadow dom.\n this.attachShadow({ mode: 'open' });\n\n // reference to the file explorer.\n this._file_explorer_ = null;\n\n if (!path) {\n path = this.getAttribute(\"path\")\n } else {\n this.setAttribute(\"path\", path)\n }\n\n if (!thumbnail) {\n thumbnail = this.getAttribute(\"thumbnail\")\n } else {\n this.setAttribute(\"thumbnail\", thumbnail)\n }\n\n if (!domain) {\n domain = this.getAttribute(\"domain\")\n } else {\n this.setAttribute(\"domain\", domain)\n }\n\n if (alias != undefined) {\n this.setAttribute(\"alias\", alias)\n } else if (this.hasAttribute(\"alias\")) {\n alias = this.getAttribute(\"alias\")\n }\n\n // get the deleteable attribute.\n if (deleteable == undefined) {\n deleteable = this.getAttribute(\"deleteable\")\n if (deleteable) {\n if (deleteable.length == 0) {\n deleteable = true\n } else {\n deleteable = deleteable == \"true\"\n }\n }\n }\n\n\n let name = path.split(\"/\")[path.split(\"/\").length - 1]\n this.ondelete = null;\n let uuid = \"_\" + randomUUID()\n\n\n // Connect observer, so the attribute can be dynamic...\n var observer = new MutationObserver((mutations) => {\n mutations.forEach((mutation) => {\n if (mutation.type === \"attributes\") {\n if (!mutation.target.hasAttribute(\"deleteable\")) {\n mutation.target.resetDeleteable()\n } else {\n mutation.target.setDeleteable()\n }\n }\n });\n });\n\n observer.observe(this, {\n attributes: true //configure it to listen to attribute changes\n });\n\n // Innitialisation of the layout.\n this.shadowRoot.innerHTML = `\n \n\n
\n
\n
\n \n \n
\n
\n
\n \n
\n \n
\n \n
\n ${alias.length > 0 ? alias : name}\n \n
\n `\n\n this.uuid = uuid;\n\n let lnk = this.shadowRoot.querySelector(`#content`)\n lnk.onclick = () => {\n if (this._file_explorer_) {\n Backend.eventHub.publish(\"follow_link_event_\", { path: path, domain: domain, _file_explorer_: this._file_explorer_ }, true)\n } else {\n\n FileController.getFile(Backend.globule, path, 64, 64, (file) => {\n if (file.getIsDir()) {\n let fileExplorer = new FileExplorer()\n document.body.appendChild(fileExplorer)\n this._file_explorer_ = fileExplorer\n \n fileExplorer.onclose = () => {\n this._file_explorer_ = null\n }\n\n fileExplorer.onloaded = () => {\n fileExplorer.publishSetDirEvent(path)\n }\n\n } else {\n let mime = file.getMime()\n if (mime.startsWith(\"video\")) {\n playVideo(file.getPath(), this.globule)\n } else if (mime.startsWith(\"audio\")) {\n playAudio(file.getPath(), this.globule)\n } else {\n let fileExplorer = new FileExplorer()\n document.body.appendChild(fileExplorer)\n this._file_explorer_ = fileExplorer\n \n fileExplorer.onclose = () => {\n this._file_explorer_ = null\n }\n\n fileExplorer.onloaded = () => {\n fileExplorer.readFile(file)\n }\n }\n }\n }, err => displayError(err, 3000), this.globule)\n }\n\n }\n\n lnk.draggable = true;\n this.shadowRoot.querySelector(`img`).draggable = false;\n\n lnk.ondragstart = (evt) => {\n // set the file path...\n let files = [path];\n\n evt.dataTransfer.setData('files', JSON.stringify(files));\n evt.dataTransfer.setData('id', uuid);\n evt.dataTransfer.setData('domain', domain);\n }\n\n lnk.ondragend = (evt) => {\n evt.stopPropagation();\n }\n\n // Here I will append the interation.\n lnk.onmouseover = (evt) => {\n evt.stopPropagation();\n }\n\n lnk.onmouseleave = (evt) => {\n evt.stopPropagation();\n }\n\n if (!deleteable && this.hasAttribute(\"deleteable\")) {\n deleteable = true\n } else if (deleteable) {\n this.setAttribute(\"deleteable\", \"true\")\n this.setDeleteable()\n } else {\n this.removeAttribute(\"deleteable\")\n this.resetDeleteable()\n }\n\n this.shadowRoot.querySelector(\".btn-div\").onclick = (evt) => {\n evt.stopPropagation()\n\n if (document.getElementById(`${uuid}-yes-no-link-delete-box`)) {\n return\n }\n\n // Here I will ask the user for confirmation before actually delete the contact informations.\n let toast = displayMessage(\n `\n \n
\n
Your about to delete link
\n
\n ${this.outerHTML}\n
\n
Is it what you want to do?
\n
\n Yes\n No\n
\n
\n `,\n 60000 // 1 min...\n );\n\n let yesNoDiv = toast.toastElement.querySelector(`#${uuid}-yes-no-link-delete-box`)\n let yesBtn = yesNoDiv.querySelector(\"#yes-delete-link\")\n let noBtn = yesNoDiv.querySelector(\"#no-delete-link\")\n yesNoDiv.querySelector(\"globular-link\").removeAttribute(\"deleteable\")\n\n // On yes\n yesBtn.onclick = () => {\n toast.hideToast();\n\n if (this.ondelete) {\n this.ondelete()\n }\n\n this.parentNode.removeChild(this)\n }\n\n noBtn.onclick = () => {\n toast.hideToast();\n }\n\n toast.id = uuid\n }\n\n let globule = Backend.getGlobule(domain)\n getVideoInfo(globule, path,\n videos => {\n if (videos.length > 0) {\n this.shadowRoot.querySelector(\"#link-name\").innerHTML = videos[0].getDescription()\n }\n },\n err => {\n getTitleInfo(globule, path,\n titles => {\n if (titles.length > 0) {\n this.shadowRoot.querySelector(\"#link-name\").innerHTML = titles[0].getName()\n }\n\n },\n err => {\n\n getAudioInfo(globule, path,\n audios => {\n if (audios.length > 0) {\n this.shadowRoot.querySelector(\"#link-name\").innerHTML = audios[0].getTitle()\n }\n }, err => { })\n })\n })\n\n }\n\n connectedCallback() {\n if (this.hasAttribute(\"deleteable\")) {\n this.setDeleteable()\n }\n }\n\n setDeleteable() {\n this.shadowRoot.querySelector(`#${this.uuid}-link-div`).style.marginTop = \"25px\"\n this.shadowRoot.querySelector(\".btn-div\").style.visibility = \"visible\";\n }\n\n resetDeleteable() {\n this.shadowRoot.querySelector(`#${this.uuid}-link-div`).style.marginTop = \"5px\"\n this.shadowRoot.querySelector(\".btn-div\").style.visibility = \"hidden\";\n }\n}\n\ncustomElements.define('globular-link', Link)","import { GetSharedResourceRqst, RemoveSubjectFromShareRqst, SubjectType } from \"globular-web-client/rbac/rbac_pb\";\nimport { AccountController } from \"../../backend/account\";\nimport { Backend, displayError, displayMessage, generatePeerToken } from \"../../backend/backend\";\nimport getUuidByString from \"uuid-by-string\"\nimport { Account, Group } from \"globular-web-client/resource/resource_pb\";\nimport { FileController } from \"../../backend/file\";\nimport { Link } from \"../link\";\n\n/**\n * That panel display resource share with a given subject (account, group, organization etc.)\n */\nexport class SharedResources extends HTMLElement {\n // attributes.\n\n // Create the applicaiton view.\n constructor(subject) {\n super()\n // Set the shadow dom.\n this.attachShadow({ mode: 'open' });\n\n // the file explorer.\n this._file_explorer_ = null;\n\n\n this.subject = subject\n\n // Innitialisation of the layout.\n this.shadowRoot.innerHTML = `\n \n
\n \n \n Share with you\n \n \n You share with\n \n \n\n
\n
\n \n \n
\n \n
\n\n
\n `\n // give the focus to the input.\n let scrollContainer = this.shadowRoot.querySelector(\"#scroll-container\")\n scrollContainer.onscroll = () => {\n if (scrollContainer.scrollTop == 0) {\n scrollContainer.style.boxShadow = \"\"\n scrollContainer.style.borderTop = \"\"\n } else {\n scrollContainer.style.boxShadow = \"inset 0px 5px 6px -3px rgb(0 0 0 / 40%)\"\n scrollContainer.style.borderTop = \"1px solid var(--palette-divider)\"\n }\n }\n\n\n\n }\n\n connectedCallback() {\n\n // get resources share with a given account...\n let youShareWithDiv = this.shadowRoot.querySelector(\"#you-share-with-div\")\n youShareWithDiv.innerHTML = \"\"\n\n let shareWithYouDiv = this.shadowRoot.querySelector(\"#share-with-you-div\")\n shareWithYouDiv.innerHTML = \"\"\n\n this.shadowRoot.querySelector(\"#share-with-you\").onclick = () => {\n youShareWithDiv.style.display = \"none\"\n shareWithYouDiv.style.display = \"flex\"\n }\n\n\n this.shadowRoot.querySelector(\"#you-share-with\").onclick = () => {\n youShareWithDiv.style.display = \"flex\"\n shareWithYouDiv.style.display = \"none\"\n }\n\n // The logged user... ( 'you' in the context of a session)\n this.getSharedResources(AccountController.account, this.subject, resources => {\n this.displaySharedResources(youShareWithDiv, resources, this.subject, true)\n this.getSharedResources(this.subject, AccountController.account, resources => {\n this.displaySharedResources(shareWithYouDiv, resources, this.subject, false)\n })\n })\n }\n\n displaySharedResources(div, resources, subject, deleteable) {\n\n let range = document.createRange()\n let displayLink = () => {\n let r = resources.pop()\n let globule = Backend.getGlobule(r.getDomain())\n FileController.getFile(globule, r.getPath(), 100, 64, file => {\n let id = \"_\" + getUuidByString(file.getPath())\n\n // so here I will determine if I display the deleteable icon...\n let deleteable_ = deleteable\n if (deleteable) {\n // Here I will make sure that the delete button has an effect on the share.\n // for exemple is the permission is at group level i will not display delete\n // button at accout level even if the resource appear in the list. To remove the\n // resource the user must remove group permission on it.\n if (subject instanceof Account) {\n deleteable_ = r.getAccountsList().indexOf(subject.getId() + \"@\" + subject.getDomain()) != -1\n } else if (subject instanceof Group) {\n deleteable_ = r.getGroupsList().indexOf(subject.getId() + \"@\" + subject.getDomain()) != -1\n } else if (subject instanceof Application) {\n deleteable_ = r.getApplicationList().indexOf(subject.getId() + \"@\" + subject.getDomain()) != -1\n } else if (subject instanceof Organization) {\n deleteable_ = r.getOrganizationList().indexOf(subject.getId() + \"@\" + subject.getDomain()) != -1\n }\n }\n\n let alias = \"\"\n if (file.videos) {\n alias = file.videos[0].getDescription()\n } else if (file.titles) {\n alias = file.titles[0].getName()\n } else if (file.audios) {\n alias = file.audio[0].getTitle()\n }\n\n\n\n let html = ``\n div.appendChild(range.createContextualFragment(html))\n if (resources.length > 0) {\n displayLink();\n }\n\n let lnk = div.querySelector(`#${id}`)\n lnk._file_explorer_ = this._file_explorer_\n \n lnk.ondelete = () => {\n\n // so now I will remove share resource.\n let rqst = new RemoveSubjectFromShareRqst\n\n rqst.setDomain(globule.domain)\n rqst.setPath(file.getPath())\n\n if (subject instanceof Account) {\n rqst.setType(SubjectType.ACCOUNT)\n } else if (subject instanceof Group) {\n rqst.setType(SubjectType.GROUP)\n } else if (subject instanceof Application) {\n rqst.setType(SubjectType.APPLICATION)\n } else if (subject instanceof Organization) {\n rqst.setType(SubjectType.ORGANIZATION)\n }\n\n // set the subject domain.\n rqst.setSubject(subject.getId() + \"@\" + subject.getDomain())\n generatePeerToken(globule, token => {\n globule.rbacService.removeSubjectFromShare(rqst, { domain: globule.domain, token: token })\n .then(\n // Display message...\n displayMessage(\"Subject \" + subject.getId() + \" was removed from shared of \" + file.getPath(), 3000)\n\n ).catch(err => displayError(err))\n })\n\n\n }\n\n }, err => {\n console.log(err);\n if (resources.length > 0) {\n displayLink()\n }\n })\n }\n\n if (resources.length > 0) {\n displayLink()\n }\n }\n\n // Return the list of resource for a given subject.\n // Return the list of resources for a given subject.\n getSharedResources(share_by, share_with, callback) {\n if (share_by == null || share_with == null) {\n return;\n }\n\n let globules = Backend.getGlobules();\n let resources = [];\n\n let getSharedResource_ = () => {\n let globule = globules.pop();\n let rqst = new GetSharedResourceRqst();\n\n // Determine if share_with is an account or a group.\n let isAccount = share_with instanceof Account; // Assuming Account is a class\n\n if (isAccount) {\n rqst.setType(SubjectType.ACCOUNT);\n } else {\n rqst.setType(SubjectType.GROUP);\n }\n\n rqst.setSubject(share_with.getId() + \"@\" + share_with.getDomain());\n rqst.setOwner(share_by.getId() + \"@\" + share_by.getDomain());\n\n // Get file shared by account.\n globule.rbacService.getSharedResource(rqst, { domain: globule.domain})\n .then(rsp => {\n resources = resources.concat(rsp.getSharedresourceList());\n if (globules.length === 0) {\n callback(resources);\n } else {\n getSharedResource_();\n }\n }).catch(err => {\n console.error(\"Error fetching shared resources:\", err);\n if (globules.length === 0) {\n callback(resources);\n } else {\n getSharedResource_();\n }\n });\n };\n\n if (globules.length > 0) {\n getSharedResource_();\n }\n }\n\n}\n\ncustomElements.define('globular-shared-resources', SharedResources)\n","import { SharedResources } from './sharedResources.js'\n\n\nexport class SharePanel extends HTMLElement {\n // attributes.\n\n // Create the applicaiton view.\n constructor(account) {\n super()\n\n // keep local account in memory...\n this.account = account;\n\n // the file explorer.\n this._file_explorer_ = null;\n\n // Set the shadow dom.\n this.attachShadow({ mode: 'open' });\n\n // Innitialisation of the layout.\n this.shadowRoot.innerHTML = `\n \n
\n
\n
\n
Shared Resources...
\n \n
\n
\n \n
\n \n
\n
\n\n
\n
\n `\n\n this.onclose = null\n\n // simply close the watching content...\n this.shadowRoot.querySelector(\"#close-btn\").onclick = () => {\n this.parentNode.removeChild(this)\n if (this.onclose != null) {\n this.onclose()\n }\n }\n\n\n }\n\n connectedCallback() {\n\n let subjectsView = this.shadowRoot.querySelector(\"globular-subjects-view\")\n\n // Append account \n subjectsView.on_account_click = (accountDiv, account) => {\n accountDiv.account = account;\n\n this.displaySharedResources(account)\n }\n\n // Append group\n subjectsView.on_group_click = (groupDiv, group) => {\n groupDiv.group = group;\n this.displaySharedResources(group)\n }\n }\n\n // Display resource shared with a given subject.\n displaySharedResources(subject) {\n this.innerHTML = \"\" // clear the slot...\n let sharedResources = new SharedResources(subject)\n sharedResources._file_explorer_ = this._file_explorer_\n this.appendChild(sharedResources)\n }\n\n}\n\ncustomElements.define('globular-share-panel', SharePanel)\n","import getUuidByString from \"uuid-by-string\"\nimport { generatePeerToken, Backend, displayError, displayAuthentication } from '../../backend/backend';\nimport { randomUUID } from \"../utility.js\";\nimport { FilesListView } from \"./filesListView.js\";\nimport { FilesIconView } from \"./filesIconView.js\";\nimport { PermissionsManager } from \"../permissionManager/permissionManager.js\";\nimport { InformationsManager } from \"../informationManager/informationsManager.js\";\nimport { ImageViewer } from \"../image.js\";\nimport { GlobularFileReader } from \"./fileReader.js\";\nimport { FileNavigator } from './fileNavigator.js';\nimport { PathNavigator } from './pathNavigator.js';\nimport { fireResize } from '../utility.js';\nimport { DiskSpaceManager } from \"./diskSpaceManager.js\"\nimport { FileController } from \"../../backend/file\"\nimport { AccountController } from \"../../backend/account\";\nimport { playVideo } from \"../video.js\";\nimport { playAudio } from \"../audio.js\";\nimport { TitleController } from \"../../backend/title\";\nimport '@polymer/paper-input/paper-input.js';\nimport { AddPublicDirRequest, CreateDirRequest } from \"globular-web-client/file/file_pb.js\";\nimport { FilesUploader } from \"./fileUploader.js\";\nimport { SearchBar } from \"../search/searchBar.js\";\nimport { SearchResults } from \"../search/searchResults.js\";\nimport { SearchDocumentBar } from \"./searchDocument.js\";\nimport { SharePanel } from \"../share/sharePanel.js\"\n\nfunction getElementIndex(element) {\n return Array.from(element.parentNode.children).indexOf(element);\n}\n\nexport class FileExplorer extends HTMLElement {\n // attributes.\n static paperTray = []\n\n static fileUploader = null\n\n /**\n * Constructor to initialize the file explorer instance.\n * @param {Object} globule - Backend service instance for file operations (optional).\n */\n constructor(globule) {\n super();\n\n // Use default globule instance if none provided\n this.globule = globule || Backend.globule;\n\n // Attach shadow DOM for encapsulation\n this.attachShadow({ mode: 'open' });\n\n // Generate a unique ID for the explorer instance\n this.id = `_${randomUUID()}`;\n this.setAttribute(\"id\", this.id);\n\n // Define initial properties\n this.path = undefined; // Current active path\n this.root = undefined; // Root path of the explorer\n this.navigations = []; // Stack to track navigation paths\n this.onerror = (err) => displayError(err, 3000); // Error handler\n this.dialog = undefined; // Dialog element for the explorer\n this.onclose = undefined; // Close event handler\n this.onopen = undefined; // Open event handler\n this.onloaded = undefined; // Loaded event handler\n this.listeners = {}; // Event listeners registry\n\n // Define interface elements\n this.filesListView = undefined; // List view for files\n this.filesIconView = undefined; // Icon view for files\n this.permissionManager = undefined; // Permission manager instance\n this.informationManager = undefined; // Information manager instance\n this.pathNavigator = undefined; // Path navigation component\n this.fileNavigator = undefined; // File navigation component\n this.filesListBtn = undefined; // Button for list view\n this.fileIconBtn = undefined; // Button for icon view\n this.fileUploaderBtn = undefined; // Button for file upload\n this.refreshBtn = undefined; // Refresh button\n this.backNavigationBtn = undefined; // Back navigation button\n this.upwardNavigationBtn = undefined; // Upward navigation button\n this.sharePanel = undefined; // Share panel instance\n\n // Initialize layout and styles\n this._initializeLayout();\n\n // Initialize UI components and bind events\n this._initializeComponents();\n\n this._bindEventHandlers();\n\n\n // init the file explorer.\n this.init(() => {\n console.log(\"file explorer initialized.\")\n this.fileIconBtn.click()\n\n });\n\n if (FileExplorer.fileUploader == null) {\n FileExplorer.fileUploader = new FilesUploader()\n }\n\n }\n\n /**\n * Initializes the layout and shadow DOM styles.\n * Contains the HTML structure and CSS styles.\n */\n _initializeLayout() {\n this.shadowRoot.innerHTML = `\n \n\n \n \n File Explorer\n\n \n \n \n \n \n\n
\n
\n \n
\n \n \n \n
\n \n
\n \n \n \n \n \n \n
\n Loading...\n \n
\n \n \n
\n\n
\n \n \n \n \n \n
\n\n \n `;\n }\n\n /**\n * Initializes file explorer components.\n */\n _initializeComponents() {\n\n // Get the file explorer content.\n this.dialog = this.shadowRoot.querySelector(\"globular-dialog\");\n this.progressDiv = this.shadowRoot.querySelector(\"#progress-div\");\n this.permissionManager = new PermissionsManager();\n this.informationManager = new InformationsManager();\n this.pathNavigator = this.shadowRoot.querySelector(\"globular-path-navigator\");\n this.pathNavigator._file_explorer_ = this;\n this.fileNavigator = this.shadowRoot.querySelector(\"globular-file-navigator\");\n this.fileNavigator._file_explorer_ = this;\n this.diskSpaceManager = this.shadowRoot.querySelector(\"globular-disk-space-manager\")\n this.diskSpaceManager.globule = this.globule\n this.fileSelectionPanel = this.shadowRoot.querySelector(\"#file-selection-panel\")\n this.documentSearchBar = this.shadowRoot.querySelector(\"globular-search-document-bar\")\n this.documentSearchBar._file_explorer_ = this\n this._file_explorer_Content = this.shadowRoot.querySelector(\"#file-explorer-content\")\n this.diskSpaceManager.account = AccountController.account;\n\n this.filesListView = new FilesListView()\n this.filesListView.id = \"globular-files-list-view\"\n this.filesListView._file_explorer_ = this;\n this.appendChild(this.filesListView)\n\n this.filesIconView = new FilesIconView()\n this.filesIconView._active_ = true // true be default...\n this.filesIconView.id = \"globular-files-icon-view\"\n this.filesIconView._file_explorer_ = this;\n this.appendChild(this.filesIconView)\n\n }\n\n /**\n * Binds event handlers for file explorer actions.\n */\n _bindEventHandlers() {\n\n this.dialog.onclose = () => {\n this.filesIconView.hide()\n this.filesListView.hide()\n if (this.onclose != undefined) {\n this.onclose()\n }\n }\n\n this.dialog.onmove = (left, top) => {\n this.filesIconView.hideMenu()\n this.filesListView.hideMenu()\n }\n\n this.refreshBtn = this.shadowRoot.querySelector(\"#navigation-refresh-btn\");\n this.refreshBtn.onclick = () => Backend.eventHub.publish(\"reload_dir_event\", this.path, true);\n\n\n // The create directory button.\n this.createDirectoryBtn = this.shadowRoot.querySelector(\"#navigation-create-dir-btn\")\n\n // The upload file button.\n this.uploadBtn = this.shadowRoot.querySelector(\"#navigation-cloud-upload-btn\")\n\n this.filesListBtn = this.shadowRoot.querySelector(\"#files-list-btn\")\n this.fileIconBtn = this.shadowRoot.querySelector(\"#files-icon-btn\")\n this.fileUploaderBtn = this.shadowRoot.querySelector(\"#file_uploader_icon\")\n\n // File navigation button.\n this.backNavigationBtn = this.shadowRoot.querySelector(\"#navigation-back-btn\")\n this.fowardNavigationBtn = this.shadowRoot.querySelector(\"#navigation-forward-btn\")\n this.upwardNavigationBtn = this.shadowRoot.querySelector(\"#navigation-upward-btn\")\n this.lstNavigationBtn = this.shadowRoot.querySelector(\"#navigation-lst-btn\")\n\n // the share panel button.\n this.sharePanelBtn = this.shadowRoot.querySelector(\"#show-share-panel-btn\")\n\n this.sharePanelBtn.onclick = (evt) => {\n evt.stopPropagation();\n this.permissionManager.style.display = \"none\"\n this.informationManager.style.display = \"none\"\n\n if (this.sharePanel == undefined) {\n this.sharePanel = new SharePanel(AccountController.account)\n this.sharePanel._file_explorer_ = this\n this.sharePanel.id = \"share-panel\"\n this.sharePanel.style.position = \"absolute\"\n this.sharePanel.style.zIndex = 1000\n this.sharePanel.style.top = \"0px\"\n this.sharePanel.style.left = \"0px\"\n this.sharePanel.style.right = \"0px\"\n this.sharePanel.style.bottom = \"0px\"\n\n this.sharePanel.onclose = () => {\n // remove the share panel.\n }\n }\n\n this.appendChild(this.sharePanel)\n }\n\n\n // Upload a file.\n this.uploadBtn.onclick = () => {\n let fileInput = document.querySelector(\"file-input\")\n if (fileInput == undefined) {\n fileInput = document.createElement(\"input\")\n fileInput.id = \"file-input\"\n fileInput.type = \"file\"\n fileInput.multiple = \"true\"\n fileInput.style.display = \"none\"\n document.body.appendChild(fileInput)\n }\n\n fileInput.click()\n // this.pathNavigator\n fileInput.onchange = () => {\n FileExplorer.fileUploader.uploadFiles(this.path, fileInput.files, this.globule)\n }\n }\n\n // Here I will connect the windows resize event...\n this.backNavigationBtn.onclick = (evt) => {\n evt.stopPropagation();\n let index = this.navigations.indexOf(this.path)\n index--\n if (index < this.navigations.length && index > -1) {\n this.publishSetDirEvent(this.navigations[index])\n }\n }\n\n this.fowardNavigationBtn.onclick = (evt) => {\n evt.stopPropagation();\n let index = this.navigations.indexOf(this.path)\n index++\n if (index < this.navigations.length && index > -1) {\n this.publishSetDirEvent(this.navigations[index])\n }\n }\n\n this.upwardNavigationBtn.onclick = (evt) => {\n evt.stopPropagation();\n if (this.path.split(\"/\").length > 2) {\n this.path = this.path.substring(0, this.path.lastIndexOf(\"/\"))\n\n this.publishSetDirEvent(this.path)\n }\n }\n\n\n this.filesListBtn.onclick = (evt) => {\n evt.stopPropagation();\n this.imageViewer.style.display = \"none\"\n this.filesListView.show()\n this.filesIconView.hide()\n this.filesIconView._active_ = false\n this.filesListView._active_ = true\n this.fileReader.style.display = \"none\"\n this.filesListBtn.classList.add(\"active\")\n this.fileIconBtn.classList.remove(\"active\")\n this.fileUploaderBtn.classList.remove(\"active\")\n this.filesListBtn.style.setProperty(\"--iron-icon-fill-color\", \"var(--palette-action-active)\")\n this.fileIconBtn.style.setProperty(\"--iron-icon-fill-color\", \"var(--palette-action-disabled)\")\n this.fileUploaderBtn.style.setProperty(\"--iron-icon-fill-color\", \"var(--palette-action-disabled)\")\n\n if (FileExplorer.fileUploader.parentNode) {\n FileExplorer.fileUploader.parentNode.removeChild(FileExplorer.fileUploader)\n }\n\n if (this.filesListView.menu.parentNode) {\n this.filesListView.menu.parentNode.removeChild(this.filesListView.menu)\n this.filesListView.menu.close()\n }\n\n if (this.filesIconView.menu.parentNode) {\n this.filesIconView.menu.parentNode.removeChild(this.filesIconView.menu)\n this.filesIconView.menu.close()\n }\n\n }\n\n this.fileUploaderBtn.onclick = (evt) => {\n evt.stopPropagation();\n\n this.imageViewer.style.display = \"none\"\n this.filesListView.hide()\n this.filesIconView.hide()\n this.fileReader.style.display = \"none\"\n this.filesListBtn.classList.remove(\"active\")\n this.fileIconBtn.classList.remove(\"active\")\n this.filesListBtn.style.setProperty(\"--iron-icon-fill-color\", \"var(--palette-action-disabled)\")\n this.fileIconBtn.style.setProperty(\"--iron-icon-fill-color\", \"var(--palette-action-disabled)\")\n this.fileUploaderBtn.style.setProperty(\"--iron-icon-fill-color\", \"var(--palette-action-active)\")\n this.fileUploaderBtn.classList.add(\"active\")\n\n this.appendChild(FileExplorer.fileUploader)\n }\n\n // Backend.eventHub.publish(\"__upload_files_event__\", { dir: this.__dir__, files: [fileObject], lnk: lnk, globule: this._file_explorer_.globule }, true)\n Backend.eventHub.subscribe(\"__upload_files_event__\", (uuid) => { }, (evt) => {\n if (evt.dir.getPath() == this.path) {\n this.refreshBtn.click()\n }\n }, false)\n\n // Link event \n Backend.eventHub.subscribe(\"follow_link_event_\", (uuid) => { }, (evt) => {\n if (evt._file_explorer_ == undefined) {\n return\n }\n\n if (evt._file_explorer_.id == this.id) {\n // this.publishSetDirEvent(evt.path)\n FileController.getFile(this.globule, evt.path, 64, 64, (file) => {\n if (this.sharePanel) {\n if (this.sharePanel.parentElement) {\n this.sharePanel.parentElement.removeChild(this.sharePanel)\n }\n }\n\n if (file.getIsDir()) {\n this.publishSetDirEvent(evt.path)\n } else {\n let mime = file.getMime()\n if (mime.startsWith(\"video\")) {\n playVideo(file.getPath(), this.globule)\n } else if (mime.startsWith(\"audio\")) {\n playAudio(file.getPath(), this.globule)\n } else {\n this.readFile(file)\n }\n }\n }, err => displayError(err, 3000), this.globule)\n }\n }, true)\n\n this.fileIconBtn.onclick = (evt) => {\n evt.stopPropagation();\n this.imageViewer.style.display = \"none\"\n this.filesListBtn.classList.remove(\"active\")\n this.fileIconBtn.classList.add(\"active\")\n this.fileUploaderBtn.classList.remove(\"active\")\n this.filesIconView._active_ = true\n this.filesListView._active_ = false\n this.filesListView.hide()\n this.filesIconView.show()\n this.fileReader.style.display = \"none\"\n this.filesListBtn.style.setProperty(\"--iron-icon-fill-color\", \"var(--palette-action-disabled)\")\n this.fileIconBtn.style.setProperty(\"--iron-icon-fill-color\", \"var(--palette-action-active)\")\n this.fileUploaderBtn.style.setProperty(\"--iron-icon-fill-color\", \"var(--palette-action-disabled)\")\n\n if (FileExplorer.fileUploader.parentNode) {\n FileExplorer.fileUploader.parentNode.removeChild(FileExplorer.fileUploader)\n }\n\n if (this.filesListView.menu.parentNode) {\n this.filesListView.menu.parentNode.removeChild(this.filesListView.menu)\n this.filesListView.menu.close()\n }\n\n if (this.filesIconView.menu.parentNode) {\n this.filesIconView.menu.parentNode.removeChild(this.filesIconView.menu)\n this.filesIconView.menu.close()\n }\n }\n\n\n\n // Create a new directory here...\n this.createDirectoryBtn.onclick = (evt) => {\n evt.stopPropagation();\n\n // Here I will use a simple paper-card with a paper input...\n let html = `\n \n \n
\n \n
\n
\n Cancel\n Create\n
\n \n `\n // only one dialog open at time.\n if (this._file_explorer_Content.querySelector(\"#new-dir-dialog\") == undefined) {\n let range = document.createRange()\n this._file_explorer_Content.appendChild(range.createContextualFragment(html))\n }\n\n let input = this._file_explorer_Content.querySelector(\"#new-dir-input\")\n setTimeout(() => {\n input.focus()\n input.inputElement._inputElement.select();\n }, 50)\n\n let cancel_btn = this._file_explorer_Content.querySelector(\"#new-dir-cancel-btn\")\n let create_btn = this._file_explorer_Content.querySelector(\"#new-dir-create-btn\")\n\n // simply remove the dialog\n cancel_btn.onclick = (evt) => {\n evt.stopPropagation();\n let dialog = this._file_explorer_Content.querySelector(\"#new-dir-dialog\")\n dialog.parentNode.removeChild(dialog)\n }\n\n input.onkeydown = (evt) => {\n if (evt.keyCode == 13) {\n create_btn.click()\n } else if (evt.keyCode == 27) {\n cancel_btn.click()\n }\n }\n\n create_btn.onclick = (evt) => {\n evt.stopPropagation();\n let dialog = this._file_explorer_Content.querySelector(\"#new-dir-dialog\")\n dialog.parentNode.removeChild(dialog)\n\n // if the current directory is the public dir...\n if (this.path == \"/public\") {\n // Here I will add public directory...\n const rqst = new AddPublicDirRequest\n rqst.setPath(input.value)\n generatePeerToken(this.globule, token => {\n // Create a directory at the given path.\n this.globule.fileService\n .addPublicDir(rqst, {\n token: token,\n domain: this.globule.domain\n })\n .then(() => {\n // The new directory was created.\n Backend.publish(\"reload_dir_event\", this.path, false);\n })\n .catch((err) => {\n displayError(err, 3000)\n });\n })\n } else {\n // Here I will create a new folder...\n // Set the request.\n const rqst = new CreateDirRequest();\n rqst.setPath(this.path);\n rqst.setName(input.value);\n\n generatePeerToken(this.globule, token => {\n // Create a directory at the given path.\n this.globule.fileService\n .createDir(rqst, {\n token: token,\n domain: this.globule.domain\n })\n .then(() => {\n // The new directory was created.\n this.globule.eventHub.publish(\"reload_dir_event\", this.path, false);\n })\n .catch((err) => {\n displayError(err, 3000)\n });\n })\n }\n }\n\n }\n\n // Refresh the root directory and send event to\n // refresh all the interface.\n this.refreshBtn.onclick = () => {\n this.globule.eventHub.publish(\"reload_dir_event\", this.path, false);\n }\n\n }\n\n\n publishSetDirEvent(path) {\n this.displayWaitMessage(\"load \" + path)\n FileController.readDir(path, (dir) => {\n\n Backend.eventHub.publish(\"__set_dir_event__\", { dir: dir, file_explorer_id: this.id }, true)\n this.resume()\n }, err => { displayError(err, 3000); this.resume(); }, this.globule)\n }\n\n setAtTop() {\n\n let draggables = document.querySelectorAll(\".draggable\")\n for (var i = 0; i < draggables.length; i++) {\n draggables[i].style.zIndex = 100;\n }\n\n this.style.zIndex = 1000;\n }\n\n displayWaitMessage(message) {\n this.progressDiv.style.display = \"block\"\n let messageDiv = this.progressDiv.querySelector(\"#progress-message\")\n this.globule.eventHub.publish(\"refresh_dir_evt\", this.path, false);\n messageDiv.innerHTML = message\n }\n\n resume() {\n this.progressDiv.style.display = \"none\"\n }\n\n hideNavigator() {\n this.fileNavigator.hide()\n window.dispatchEvent(new Event('resize'));\n }\n\n showNavigator() {\n this.fileNavigator.show()\n window.dispatchEvent(new Event('resize'));\n }\n\n setGlobule(globule) {\n shared = {}\n public_ = {}\n\n this.globule = globule\n\n this.shadowRoot.querySelector(\"globular-disk-space-manager\").globule = globule\n this.permissionManager.globule = globule // set the globule for get permissions...\n\n this.init()\n }\n\n // display the video watching.\n openMediaWatching(media_watching) {\n\n this.appendChild(media_watching)\n\n }\n\n // Set the file explorer directory.\n init(callback) {\n\n // The file reader\n if (this.fileReader) {\n this.fileReader.parentNode.removeChild(this.fileReader)\n }\n\n this.fileReader = new GlobularFileReader()\n this.fileReader.id = \"#globular-file-reader\"\n this.fileReader.style.display = \"none\"\n this.fileReader.style.zIndex = 1000\n this.fileReader._file_explorer_ = this\n this.fileReader.style.height = \"100%\"\n\n this.appendChild(this.fileReader)\n\n // The image viewer\n if (this.imageViewer) {\n this.imageViewer.parentNode.removeChild(this.imageViewer)\n }\n\n this.imageViewer = new ImageViewer()\n this.imageViewer.id = \"#globular-image-viewer\"\n this.imageViewer.style.display = \"none\"\n this.imageViewer.setAttribute(\"closeable\", \"true\")\n this.appendChild(this.imageViewer)\n\n\n // Init the path navigator\n this.pathNavigator.init();\n\n // Init the files views\n this.filesListView.init();\n this.filesIconView.init();\n\n // set the available space on the globule.\n this.shadowRoot.querySelector(\"globular-disk-space-manager\").refresh()\n\n if (this.listeners[\"__set_dir_event__\"] == undefined) {\n\n Backend.eventHub.subscribe(\"__set_dir_event__\",\n (uuid) => {\n this.listeners[\"__set_dir_event__\"] = uuid;\n },\n (evt) => {\n // keep the active path.\n if (this.id == evt.file_explorer_id) {\n // remove actual context and set back the default files view.\n this.fileReader.style.display = \"none\"\n this.imageViewer.style.display = \"none\";\n this.permissionManager.style.display = \"none\"\n\n this.setDir(evt.dir)\n\n }\n }, true\n )\n }\n\n // Service configuration change event...\n if (this.listeners[`update_globular_service_configuration_${this.globule.domain}_evt`] == undefined) {\n this.globule.eventHub.subscribe(`update_globular_service_configuration_evt`,\n (uuid) => {\n this.listeners[`update_globular_service_configuration_${this.globule.domain}_evt`] = uuid;\n }, (event) => {\n let config = JSON.parse(event)\n if (config.Name == \"file.FileService\") {\n\n }\n\n }, false, this)\n }\n\n // File rename event.\n if (this.listeners[`file_rename_${this.globule.domain}_event`] == undefined) {\n this.globule.eventHub.subscribe(\"file_rename_event\",\n (uuid) => {\n this.listeners[`file_rename_${this.globule.domain}_event`] = uuid;\n }, (path) => {\n if (path.startsWith(this.getRoot())) {\n this.publishSetDirEvent(this.path)\n }\n }, false, this)\n }\n\n // Permissions \n if (this.listeners[`display_permission_manager_${this.id}_event`] == undefined) {\n this.globule.eventHub.subscribe(`display_permission_manager_${this.id}_event`,\n (uuid) => {\n this.listeners[`display_permission_manager_${this.id}_event`] = uuid;\n }, (file) => {\n\n this.permissionManager.permissions = null\n this.permissionManager.globule = file.globule\n this.permissionManager.setPath(file.getPath())\n this.permissionManager.setResourceType = \"file\"\n this.permissionManager.style.display = \"\"\n\n\n // I will display the permission manager.\n this.fileSelectionPanel.appendChild(this.permissionManager)\n\n }, false)\n }\n\n // Informations\n if (this.listeners[`display_media_infos_${this.id}_event`] == undefined) {\n this.globule.eventHub.subscribe(`display_media_infos_${this.id}_event`,\n (uuid) => {\n this.listeners[`display_media_infos_${this.id}_event`] = uuid;\n }, (file) => {\n\n let infos = null\n\n if (file.titles != undefined) {\n if (file.titles.length > 0) {\n this.informationManager.setTitlesInformation(file.titles)\n infos = file.titles[0]\n }\n }\n\n if (file.videos != undefined) {\n if (file.videos.length > 0) {\n this.informationManager.setVideosInformation(file.videos)\n infos = file.videos[0]\n }\n }\n\n if (file.audios != undefined) {\n if (file.audios.length > 0) {\n this.informationManager.setAudiosInformation(file.audios)\n infos = file.audios[0]\n }\n }\n\n\n this.fileSelectionPanel.appendChild(this.informationManager)\n\n // remove all display menu.\n let menus = document.querySelectorAll(\"globular-dropdown-menu\")\n for (var i = 0; i < menus.length; i++) {\n let menu = menus[i]\n if (menu.parentNode) {\n menu.parentNode.removeChild(menu)\n }\n }\n\n // listen if the diplayed info is deleted.\n if (infos) {\n Backend.eventHub.subscribe(\"_delete_infos_\" + infos.getId() + \"_evt\", uuid => { }, evt => {\n if (this.informationManager.parentNode) {\n this.informationManager.parentNode.removeChild(this.informationManager)\n }\n }, true)\n\n }\n\n }, false)\n }\n\n if (this.listeners[`display_file_infos_${this.id}_event`] == undefined) {\n this.globule.eventHub.subscribe(`display_file_infos_${this.id}_event`,\n (uuid) => {\n this.listeners[`display_file_infos_${this.id}_event`] = uuid;\n }, (file) => {\n\n // display the file information itself.\n this.informationManager.setFileInformation(file)\n\n // I will display the permission manager.\n this.fileSelectionPanel.appendChild(this.informationManager)\n\n }, false)\n }\n\n\n\n // Reload the content of a dir with the actual dir content description on the server.\n // must be call after file are deleted or renamed\n if (this.listeners[`reload_dir_${this.globule.domain}_event`] == undefined) {\n this.globule.eventHub.subscribe(\"reload_dir_event\",\n (uuid) => {\n this.listeners[`reload_dir_${this.globule.domain}_event`] = uuid\n }, (path) => {\n if (this.path && path) {\n if (path.endsWith(this.path)) {\n this.displayWaitMessage(\"load \" + path)\n\n // clear previous selection.\n FileExplorer.paperTray = []\n this.filesIconView.selected = {}\n this.filesListView.selected = {}\n\n FileController.readDir(path, (dir) => {\n this.fileNavigator.reload(dir, () => {\n // reload dir to be sure if it's public that change will be applied.\n FileController.readDir(path, (dir) => {\n this.resume()\n if (dir.getPath() == this.path) {\n this.__dir__ = dir\n Backend.eventHub.publish(\"__set_dir_event__\", { dir: dir, file_explorer_id: this.id }, true)\n\n }\n if (this.shadowRoot.querySelector(\"globular-disk-space-manager\") != undefined) {\n this.shadowRoot.querySelector(\"globular-disk-space-manager\").refresh()\n }\n\n }, err => { displayError(err, 3000); this.resume() }, this.globule)\n })\n }, err => displayError(err, 3000), this.globule, true)\n }\n } else {\n this.resume()\n }\n }, false)\n }\n\n // Refresh the interface.\n if (this.listeners[`upload_files_${this.globule.domain}_event`] == undefined) {\n this.globule.eventHub.subscribe(\"upload_files_event\", (uuid) => {\n this.listeners[`upload_files_${this.globule.domain}_event`] = uuid\n },\n evt => {\n if (evt == this.path) {\n // refresh the interface.\n delete FileController.dirs[getUuidByString(this.globule.domain + \"@\" + this.path)]\n this.refreshBtn.click();\n }\n }, false)\n }\n\n\n // Play the video...\n if (this.listeners[\"__play_video__\"] == undefined) {\n Backend.eventHub.subscribe(\"__play_video__\", (uuid) => {\n this.listeners[\"__play_video__\"] = uuid\n }, (evt) => {\n if (this.id == evt.file_explorer_id) {\n this.playVideo(evt.file, evt.globule)\n }\n }, true)\n }\n\n // Play audio\n if (this.listeners[\"__play_audio__\"] == undefined) {\n Backend.eventHub.subscribe(\"__play_audio__\", (uuid) => {\n this.listeners[\"__play_audio__\"] = uuid\n }, (evt) => {\n if (this.id == evt.file_explorer_id) {\n this.playAudio(evt.file, evt.globule)\n }\n\n }, true)\n }\n\n // Read file\n if (this.listeners[\"__read_file__\"] == undefined) {\n Backend.eventHub.subscribe(\"__read_file__\", (uuid) => {\n this.listeners[\"__read_file__\"] = uuid\n }, (evt) => {\n if (this.id == evt.file_explorer_id) {\n this.readFile(evt.file)\n }\n }, true, this)\n }\n\n // Show image...\n if (this.listeners[\"__show_image__\"] == undefined) {\n Backend.eventHub.subscribe(\"__show_image__\", (uuid) => {\n this.listeners[\"__show_image__\"] = uuid\n }, (evt) => {\n if (this.id == evt.file_explorer_id) {\n this.showImage(evt.file)\n }\n\n }, true)\n }\n\n if (this.listeners[\"__show_share_wizard__\"] == undefined) {\n Backend.eventHub.subscribe(\"__show_share_wizard__\", (uuid) => {\n this.listeners[\"__show_share_wizard__\"] = uuid\n }, (evt) => {\n if (this.id == evt.file_explorer_id) {\n\n evt.wizard.style.position = \"absolute\"\n\n evt.wizard.style.zIndex = 1000\n evt.wizard.style.top = \"0px\"\n evt.wizard.style.left = \"0px\"\n evt.wizard.style.right = \"0px\"\n evt.wizard.style.bottom = \"0px\"\n\n this.showShareWizard(evt.wizard)\n }\n\n }, true)\n }\n\n\n let readRootDir = (root, callback) => {\n\n FileController.readDir(root, (dir) => {\n\n // set interface with the given directory.\n this.resume()\n this.root = dir\n this.path = dir.getPath()\n\n if (this.fileNavigator != null) {\n this.fileNavigator.setDir(dir, (shared_, public_) => { if (callback) callback(shared_, public_) })\n } else {\n console.log(\"no file navigator!\")\n }\n\n if (this.pathNavigator != null) {\n this.pathNavigator.setDir(dir)\n } else {\n console.log(\"no path navigator!\")\n }\n\n if (this.filesListView != null) {\n this.filesListView.setDir(dir)\n } else {\n console.log(\"no file list view!\")\n }\n\n if (this.filesIconView) {\n this.filesIconView.setDir(dir)\n } else {\n console.log(\"no file icon view!\")\n }\n\n // set the user dir...\n this.setDir(dir, () => {\n\n // display the root dir...\n Backend.eventHub.publish(\"__set_dir_event__\", { dir: dir, file_explorer_id: this.id }, true)\n if (callback) {\n callback()\n }\n })\n\n\n\n }, (err) => {\n this.onerror;\n this.resume();\n console.log(err);\n }, this.globule)\n\n }\n\n // this.displayWaitMessage(\"load \" + root)\n\n // read the root dir...\n if (AccountController.account == undefined) {\n // display the authentication dialog.\n displayAuthentication(\"Authentication required to access the resource.\", globule, () => {\n let userDir = \"/users/\" + AccountController.account.getId() + \"@\" + AccountController.account.getDomain()\n readRootDir(userDir, () => {\n // read the application dir...\n let applicatonDir = \"/applications/\" + window.location.pathname.split('/')[1];\n readRootDir(applicatonDir, ()=>{\n this.resume()\n if(this.onloaded){\n this.onloaded()\n }\n })\n })\n })\n } else {\n // read the root dir...\n let root = \"/users/\" + AccountController.account.getId() + \"@\" + AccountController.account.getDomain()\n readRootDir(root, () => {\n // read the application dir...\n let applicatonDir = \"/applications/\" + window.location.pathname.split('/')[1];\n readRootDir(applicatonDir, ()=>{\n this.resume()\n if(this.onloaded){\n this.onloaded()\n }\n })\n })\n }\n\n\n\n }\n\n // The connection callback.\n connectedCallback() {\n\n }\n\n getRoot() {\n if (!this.root) {\n return \"\"\n }\n let root = this.root.path\n let values = root.split(\"/\")\n return \"/\" + values[1] + \"/\" + values[2]\n }\n\n playVideo(file) {\n\n this.style.zIndex = 1;\n let video = null\n if (file.videos) {\n video = file.videos[0]\n }\n\n if (file.titles) {\n video = file.titles[0]\n }\n\n playVideo(file.getPath(), null, () => {\n\n }, video, this.globule)\n }\n\n playAudio(file) {\n\n // hide the content.\n this.style.zIndex = 1;\n\n TitleController.getFileAudiosInfo(file, audios => {\n if (audios) {\n playAudio(file.getPath(), () => { }, () => { }, audios[0], this.globule)\n }\n })\n\n }\n\n // Search document...\n setSearchResults = (results) => {\n let previousResults = this.querySelectorAll(\"globular-document-search-results\")\n for (var i = 0; i < previousResults.length; i++) {\n previousResults[i].parentNode.removeChild(previousResults[i])\n }\n\n // Create a search result view.\n results.style.position = \"absolute\"\n results.style.zIndex = 1000\n results.style.top = \"0px\"\n results.style.left = \"0px\"\n results.style.right = \"0px\"\n results.style.bottom = \"0px\"\n results.style.backgroundColor = \"var(--surface-color)\"\n results.style.color = \"var(--on-surface-color)\"\n results.style.overflow = \"auto\"\n\n this.appendChild(results)\n }\n\n /**\n * Create a link(shortcut) to a given file.\n * @param {*} file The file to create the shortcut from\n * @param {*} dest \n * @param {*} globule \n */\n createLink(file, dest, globule) {\n\n let fileName = file.getPath().substring(file.getPath().lastIndexOf(\"/\") + 1)\n if (fileName.indexOf(\".\") > 0) {\n fileName = fileName.substring(0, fileName.indexOf(\".\"))\n }\n\n generatePeerToken(globule, token => {\n\n let rqst = new CreateLnkRequest\n rqst.setName(fileName + \".lnk\")\n rqst.setPath(dest)\n rqst.setLnk(file.serializeBinary())\n\n globule.fileService.createLnk(rqst, { domain: globule.domain, token: token }).then(() => {\n globule.eventHub.publish(\"reload_dir_event\", dest, false);\n })\n .catch(err => displayError(err, 3000))\n })\n\n }\n\n readFile(file, page = 1) {\n\n // hide the content.\n this.filesListView.hide()\n this.filesIconView.hide()\n this.fileReader.style.display = \"block\"\n\n // Display the video only if the path match the video player /applications vs /users\n let mime = file.getMime()\n\n this.fileReader.read(file, page)\n }\n\n showShareWizard(wizard) {\n\n wizard.onclose = () => {\n this.displayView(this.__dir__)\n }\n\n // hide the content.\n this.filesListView.hide()\n this.filesIconView.hide()\n this.fileReader.style.display = \"none\"\n\n this.appendChild(wizard)\n }\n\n showImage(file) {\n\n // hide the content.\n this.filesListView.hide()\n this.filesIconView.hide()\n this.fileReader.style.display = \"none\"\n\n // Display the image viewer...\n this.imageViewer.style.display = \"block\"\n\n // Set the image viewer size.\n this.imageViewer.width = this.fileSelectionPanel.offsetWidth\n this.imageViewer.height = this.fileSelectionPanel.offsetHeight\n\n // Here I will set the active image.\n for (var i = 0; this.imageViewer.children.length; i++) {\n if (this.imageViewer.children[i].name == file.getPath()) {\n this.imageViewer.activeImage(getElementIndex(this.imageViewer.children[i]))\n break\n }\n }\n\n // refresh the image browser.\n this.imageViewer.redraw()\n }\n\n displayView(dir) {\n this.filesListView.__dir__ = dir\n this.filesIconView.__dir__ = dir\n\n this.filesIconView.menu.close()\n this.filesListView.menu.close()\n\n if (this.fileUploaderBtn.classList.contains(\"active\")) {\n this.filesListView.hide()\n this.filesIconView.hide()\n this.appendChild(FileExplorer.fileUploader)\n\n } else if (this.filesListBtn.classList.contains(\"active\")) {\n this.filesListView.show()\n this.filesIconView.hide()\n if (FileExplorer.fileUploader.parentNode) {\n FileExplorer.fileUploader.parentNode.removeChild(FileExplorer.fileUploader)\n }\n\n } else {\n this.filesListView.hide()\n this.filesIconView.show()\n if (FileExplorer.fileUploader.parentNode) {\n FileExplorer.fileUploader.parentNode.removeChild(FileExplorer.fileUploader)\n }\n\n }\n }\n\n loadImages(dir, callback) {\n // get all images in the directory\n let images_ = []\n for (var i = 0; i < dir.getFilesList().length; i++) {\n let f = dir.getFilesList()[i]\n if (f.getMime().startsWith(\"image\")) {\n images_.push(f)\n }\n }\n\n // Initialyse images from the server.\n let index = 0;\n let images = [];\n\n // Set the images in the image viewer.\n if (images_.length > 0) {\n FileController.getImage((images) => {\n for (var i = 0; i < images.length; i++) {\n let img = images[i]\n img.name = images_[i].getPath()\n img.slot = \"images\"\n img.draggable = false;\n let exist = false;\n for (var j = 0; j < this.imageViewer.children.length; j++) {\n if (this.imageViewer.children[j].name == img.name) {\n exist = true;\n break\n }\n }\n\n // append image only if is not already there...\n if (!exist) {\n this.imageViewer.addImage(img)\n }\n }\n // Init the images...\n this.imageViewer.populateChildren();\n\n // call when finish...\n if (callback)\n callback()\n }, images, images_, index, this.globule)\n }\n }\n\n setDir(dir, callback) {\n\n if (!FileController.validateDirAccess(dir)) {\n return\n }\n\n // Set back the list and icon view\n this.displayView(dir)\n\n this.fileReader.style.display = \"none\"\n this.imageViewer.style.display = \"none\";\n this.permissionManager.style.display = \"none\"\n\n this.imageViewer.innerHTML = \"\";\n\n // Set back the view when the image viewer is close.\n this.imageViewer.onclose = () => {\n this.displayView()\n }\n\n this.fileReader.onclose = () => {\n this.displayView()\n }\n\n this.loadImages(dir, callback)\n\n if (this.backNavigationBtn != null) {\n this.backNavigationBtn.style.setProperty(\"--iron-icon-fill-color\", \"var(--palette-action-disabled)\")\n }\n if (this.fowardNavigationBtn != null) {\n this.fowardNavigationBtn.style.setProperty(\"--iron-icon-fill-color\", \"var(--palette-action-disabled)\")\n }\n if (this.upwardNavigationBtn != null) {\n this.upwardNavigationBtn.style.setProperty(\"--iron-icon-fill-color\", \"var(--palette-action-disabled)\")\n }\n\n // Append the dir in the list of \n if (this.navigations.indexOf(dir.getPath()) == -1) {\n this.navigations.push(dir.getPath()) // set the path in the navigation.\n }\n\n if (this.navigations.length > 2 && this.lstNavigationBtn != null) {\n this.lstNavigationBtn.style.display = \"block\"\n let navigationLst = null\n if (this.lstNavigationBtn.parentNode.children.length == 1) {\n // Here I will set the navigation list.\n navigationLst = document.createElement(\"paper-card\")\n navigationLst.className = \"directories-selector\"\n navigationLst.style.display = \"none\"\n navigationLst.style.flexDirection = \"column\"\n navigationLst.style.position = \"absolute\"\n navigationLst.style.padding = \"5px\"\n navigationLst.style.zIndex = \"100\";\n navigationLst.style.top = title.offsetHeight + \"px\"\n navigationLst.style.left = \"0px\"\n navigationLst.style.backgroundColor = \"var(--surface-color)\"\n navigationLst.style.color = \"var(--primary-text-color)\"\n this.lstNavigationBtn.parentNode.appendChild(navigationLst)\n this.lstNavigationBtn.onclick = () => {\n if (navigationLst.style.display == \"flex\") {\n navigationLst.style.display = \"none\"\n } else {\n navigationLst.style.display = \"flex\"\n }\n }\n\n navigationLst.onmouseleave = () => {\n navigationLst.style.display = \"none\"\n }\n\n } else {\n navigationLst = this.lstNavigationBtn.parentNode.children[1]\n }\n\n navigationLst.innerHTML = \"\";\n let range = document.createRange()\n\n for (let path of this.navigations) {\n if (path.indexOf(\".hidden\") == -1) {\n let html = `\n
\n
${path.split(\"/\").pop()}
\n
\n `\n navigationLst.appendChild(range.createContextualFragment(html));\n let index = navigationLst.children.length - 1\n let navigationLine = navigationLst.children[index]\n let _index = this.navigations.indexOf(dir.getPath())\n if (index < _index) {\n navigationLine.children[0].icon = \"icons:arrow-back\"\n } else if (index > _index) {\n navigationLine.children[0].icon = \"icons:arrow-forward\"\n } else {\n navigationLine.children[0].icon = \"icons:check\"\n }\n\n navigationLine.onmouseover = () => {\n navigationLine.style.cursor = \"pointer\"\n navigationLine.style.setProperty(\"background-color\", \"var( --surface-color)\")\n navigationLine.children[0].style.setProperty(\"background-color\", \"var( --surface-color)\")\n navigationLine.children[1].style.setProperty(\"background-color\", \"var( --surface-color)\")\n }\n\n navigationLine.onmouseleave = () => {\n navigationLine.style.cursor = \"default\"\n navigationLine.style.setProperty(\"background-color\", \"var(--surface-color)\")\n navigationLine.children[0].style.setProperty(\"background-color\", \"var(--surface-color)\")\n navigationLine.children[1].style.setProperty(\"background-color\", \"var(--surface-color)\")\n }\n\n navigationLine.onclick = () => {\n navigationLst.style.display = \"none\"\n this.publishSetDirEvent(this.navigations[index])\n }\n }\n }\n\n\n let index = this.navigations.indexOf(dir.getPath())\n if (index > 0) {\n this.backNavigationBtn.style.setProperty(\"--iron-icon-fill-color\", \"var(--palette-action-active)\")\n }\n\n if (index < this.navigations.length - 1) {\n this.fowardNavigationBtn.style.setProperty(\"--iron-icon-fill-color\", \"var(--palette-action-active)\")\n }\n }\n\n this.path = dir.getPath();\n\n if (this.path.split(\"/\").length > 2 && this.upwardNavigationBtn != null) {\n this.upwardNavigationBtn.style.setProperty(\"--iron-icon-fill-color\", \"var(--palette-action-active)\")\n }\n\n }\n\n hideActions() {\n this.shadowRoot.querySelector(\".card-actions\").style.display = \"none\";\n }\n\n delete() {\n for (let evt in this.listeners) {\n Backend.eventHub.unSubscribe(evt, this.listeners[evt])\n }\n }\n}\n\ncustomElements.define('globular-file-explorer', FileExplorer)","import { DeleteVideoRequest, GetTitleFilesRequest } from \"globular-web-client/title/title_pb\";\nimport getUuidByString from \"uuid-by-string\";\nimport { displayMessage, getUrl } from \"../../backend/backend\";\nimport { playVideo } from \"../video\";\n\nexport class SearchVideoCard extends HTMLElement {\n // attributes.\n\n // Create the applicaiton view.\n constructor() {\n super()\n\n this.video = null;\n this.editable = false;\n\n // Set the shadow dom.\n this.attachShadow({ mode: 'open' });\n\n // Innitialisation of the layout.\n this.shadowRoot.innerHTML = `\n \n
\n \n \n \n \n
\n
\n \n
\n
/10
\n
\n
\n \n
\n
\n `\n\n this.videoPreview = this.shadowRoot.querySelector(\"#preview-video\")\n this.closeBtn = this.shadowRoot.querySelector(\"#close-btn\")\n\n this.closeBtn.onclick = (evt) => {\n evt.stopPropagation()\n\n // Here I will ask the user for confirmation before actually delete the contact informations.\n let toast = displayMessage(\n `\n
\n
Your about to remove video
\n \n
${this.video.getDescription()}
\n
Is it what you want to do?
\n
\n Yes\n No\n
\n
\n `,\n 60 * 1000 // 60 sec...\n );\n\n let yesBtn = document.querySelector(\"#yes-delete-picture\")\n let noBtn = document.querySelector(\"#no-delete-picture\")\n\n // On yes\n yesBtn.onclick = () => {\n\n toast.hideToast();\n displayMessage(\n `
\n ${this.video.getDescription()}\n was remove\n
`,\n 3000\n );\n\n if(this.onclose){\n this.onclose() \n }\n }\n\n noBtn.onclick = () => {\n toast.hideToast();\n }\n\n\n }\n }\n\n\n showVideoInfo(video) {\n //let uuid = randomUUID()\n let html = `\n \n\n \n \n \n `\n let videoInfoBox = document.getElementById(\"video-info-box\")\n if (videoInfoBox == undefined) {\n let range = document.createRange()\n document.body.appendChild(range.createContextualFragment(html))\n videoInfoBox = document.getElementById(\"video-info-box\")\n videoInfoBox.parentNode.style.position = \"fixed\"\n videoInfoBox.parentNode.style.top = \"75px\"\n videoInfoBox.parentNode.style.left = \"50%\"\n videoInfoBox.parentNode.style.transform = \"translate(-50%)\"\n }\n videoInfoBox.setVideosInformation([video])\n }\n\n connectedCallback() {\n\n // test if the gif image is initialysed...\n let preview = this.shadowRoot.querySelector(\"#preview-video\")\n // paly only the first file...\n if (preview.src.length == 0) {\n\n let video = this.video\n let globule = this.video.globule\n let rqst = new GetTitleFilesRequest\n rqst.setTitleid(video.getId())\n let indexPath = globule.config.DataPath + \"/search/videos\"\n rqst.setIndexpath(indexPath)\n \n globule.titleService.getTitleFiles(rqst, { domain: video.globule.domain })\n .then(rsp => {\n if (rsp.getFilepathsList().length > 0) {\n let path = rsp.getFilepathsList().pop()\n let thumbnail = this.shadowRoot.querySelector(\"#thumbnail-image\")\n let thumbnailPath = path\n if (thumbnailPath.lastIndexOf(\".mp4\") != -1 || thumbnailPath.lastIndexOf(\".MP4\") != -1) {\n thumbnailPath = thumbnailPath.substring(0, thumbnailPath.lastIndexOf(\".\"))\n }\n thumbnailPath = thumbnailPath.substring(0, thumbnailPath.lastIndexOf(\"/\") + 1) + \".hidden\" + thumbnailPath.substring(thumbnailPath.lastIndexOf(\"/\")) + \"/preview.mp4\"\n\n let url = getUrl(globule)\n\n\n thumbnailPath.split(\"/\").forEach(item => {\n item = item.trim()\n if (item.length > 0) {\n url += \"/\" + encodeURIComponent(item)\n }\n })\n\n preview.src = url\n preview.onclick = () => {\n playVideo(path, null, null, video, video.globule)\n \n }\n\n }\n }).catch(err => {\n // TODO append broken link image and propose the user to delete the file.\n console.log(\"no video file found\", err)\n let rqst = new DeleteVideoRequest\n rqst.setVideoid(video.getId())\n rqst.setIndexpath(indexPath)\n globule.titleService.deleteVideo(rqst, { domain: video.globule.domain, token: localStorage.getItem(\"user_token\") })\n .then(() => {\n console.log(\"video \", video.getId(), \" was deleted\")\n })\n })\n }\n }\n\n /** Display the close btn if onclose */\n setEditable(editable) {\n this.editable = editable;\n\n // console.log(\"show hide edit value control...\", editable)\n if (this.editable) {\n if (this.onclose) {\n this.closeBtn.style.display = \"block\"\n }\n } else {\n this.closeBtn.style.display = \"none\"\n }\n }\n\n setVideo(video) {\n\n this.video = video\n\n this.classList.add(\"filterable\")\n video.getGenresList().forEach(g => this.classList.add(getUuidByString(g.toLowerCase())))\n video.getTagsList().forEach(tag => this.classList.add(getUuidByString(tag.toLowerCase())))\n\n // now the term..\n if (video.getRating() < 3.5) {\n this.classList.add(getUuidByString(\"low\"))\n } else if (video.getRating() < 7.0) {\n this.classList.add(getUuidByString(\"medium\"))\n } else {\n this.classList.add(getUuidByString(\"high\"))\n }\n\n // Set the default thumbnail.\n let thumbnail = this.shadowRoot.querySelector(\"#thumbnail-image\")\n let card = this.shadowRoot.querySelector(\".video-card\")\n\n if (video.getPoster()) {\n thumbnail.src = video.getPoster().getContenturl()\n }\n\n // Here the image was not set properly...\n this.shadowRoot.querySelector(\"#video-info-button\").onclick = () => {\n this.showVideoInfo(video)\n }\n\n card.onmouseover = () => {\n this.videoPreview.style.display = \"block\"\n thumbnail.style.display = \"none\"\n this.videoPreview.play()\n }\n\n card.onmouseleave = () => {\n this.videoPreview.style.display = \"none\"\n thumbnail.style.display = \"block\"\n this.videoPreview.pause()\n }\n\n // Here I will get the file asscociated with the video...\n this.shadowRoot.querySelector(\"#description\").innerHTML = video.getDescription()\n this.shadowRoot.querySelector(\"#rating-span\").innerHTML = video.getRating().toFixed(1)\n }\n}\n\ncustomElements.define('globular-search-video-card', SearchVideoCard)\n","\nimport '@polymer/paper-button/paper-button.js';\nimport '@polymer/paper-slider/paper-slider.js';\n\nimport { createThumbmail } from './utility';\nimport domtoimage from 'dom-to-image';\nimport { fireResize } from '../Utility';\nimport { displayError, displayMessage } from '../backend/backend';\n\n/**\n * Custom Web Component for an image cropper.\n * Allows users to upload an image, crop it and get the cropped image.\n */\nexport class ImageCropper extends HTMLElement {\n constructor() {\n super();\n this.oldSrc = '';\n this.croppedImage = null;\n\n this.attachShadow({ mode: 'open' });\n }\n\n get width() {\n return this.hasAttribute('width');\n }\n\n get height() {\n return this.hasAttribute('height');\n }\n\n get rounded() {\n return this.hasAttribute('rounded');\n }\n\n setCropImage(dataUrl) {\n this.croppedImage = dataUrl;\n }\n\n // Set the image from data url.\n setImage(data) {\n this.loadPic({ target: { files: [data] } })\n }\n\n loadPic(e) {\n this.resetAll();\n var reader = new FileReader();\n reader.readAsDataURL(e.target.files[0]);\n\n reader.onload = (event) => {\n this.shadowRoot.querySelector(\".resize-image\").setAttribute('src', event.target.result);\n this.oldSrc = event.target.result;\n this.shadowRoot.querySelector(\".resize-image\").cmp = this.shadowRoot;\n this.shadowRoot.querySelector(\".resize-image\").onload = (e) => {\n\n this.shadowRoot.querySelector('.slidecontainer').style.display = 'block';\n this.shadowRoot.querySelector('.crop').style.display = 'initial';\n\n var widthTotal = this.shadowRoot.querySelector(\".resize-image\").offsetWidth;\n this.shadowRoot.querySelector(\".resize-container\").style.width = widthTotal + 'px';\n this.shadowRoot.querySelector(\".resize-image\").style.width = widthTotal + 'px';\n this.shadowRoot.querySelector(\"#myRange\").max = widthTotal + widthTotal;\n this.shadowRoot.querySelector(\"#myRange\").value = widthTotal;\n this.shadowRoot.querySelector(\"#myRange\").min = widthTotal - widthTotal;\n }\n }\n }\n dragElement(elmnt) {\n var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;\n elmnt.onmousedown = dragMouseDown;\n elmnt.ontouchstart = dragMouseDown;\n\n function dragMouseDown(e) {\n e.preventDefault();\n // get the mouse cursor position at startup:\n pos3 = e.clientX || e.targetTouches[0].pageX;\n pos4 = e.clientY || e.targetTouches[0].pageY;\n document.onmouseup = closeDragElement;\n document.ontouchend = closeDragElement;\n // call a function whenever the cursor moves:\n document.onmousemove = elementDrag;\n document.ontouchmove = elementDrag;\n }\n\n function elementDrag(e) {\n e = e || window.event;\n // calculate the new cursor position:\n pos1 = pos3 - (e.clientX || e.targetTouches[0].pageX);\n pos2 = pos4 - (e.clientY || e.targetTouches[0].pageY);\n pos3 = (e.clientX || e.targetTouches[0].pageX);\n pos4 = (e.clientY || e.targetTouches[0].pageY);\n // set the element's new position:\n elmnt.style.top = (elmnt.offsetTop - pos2) + \"px\";\n elmnt.style.left = (elmnt.offsetLeft - pos1) + \"px\";\n }\n\n function closeDragElement() {\n // stop moving when mouse button is released:\n document.onmouseup = '';\n document.ontouchend = '';\n document.onmousemove = '';\n document.ontouchmove = '';\n }\n }\n\n crop() {\n this.shadowRoot.querySelector('.crop').style.display = 'none';\n this.shadowRoot.querySelector('.reset').style.display = 'initial';\n this.shadowRoot.querySelector('.slidecontainer').style.display = 'none';\n var image = this.shadowRoot.querySelector('.resize-image');\n\n var resize_canvas = document.createElement('canvas');\n resize_canvas.width = image.offsetWidth;\n resize_canvas.height = image.offsetHeight;\n resize_canvas.getContext('2d').drawImage(image, 0, 0, image.offsetWidth, image.offsetHeight);\n\n image.setAttribute('src', resize_canvas.toDataURL(\"image/jepg\"));\n\n var imageContainer = this.shadowRoot.querySelector('.resize-container');\n var centerContainer = this.shadowRoot.querySelector('.center');\n var left = centerContainer.offsetLeft - imageContainer.offsetLeft;\n var top = centerContainer.offsetTop - imageContainer.offsetTop;\n var width = centerContainer.offsetWidth;\n var height = centerContainer.offsetHeight;\n\n var crop_canvas = document.createElement('canvas');\n crop_canvas.width = width;\n crop_canvas.height = height;\n crop_canvas.getContext('2d').drawImage(resize_canvas, left, top, width, height, 0, 0, width, height);\n\n var imageC = this.shadowRoot.querySelector('.imageCropped');\n imageC.src = crop_canvas.toDataURL(\"image/jepg\");\n this.shadowRoot.querySelector('.resize-image').setAttribute('src', '');\n }\n\n slide(w) {\n this.shadowRoot.querySelector(\".resize-container\").style.width = (w) + 'px';\n this.shadowRoot.querySelector(\".resize-image\").style.width = (w) + 'px';\n }\n\n getCropped() {\n return this.shadowRoot.querySelector(\".imageCropped\").getAttribute('src');\n }\n\n resetAll() {\n this.shadowRoot.querySelector(\".reset\").style.display = 'none';\n this.shadowRoot.querySelector(\".crop\").style.display = 'none';\n this.shadowRoot.querySelector(\".slidecontainer\").style.display = 'none';\n this.shadowRoot.querySelector(\".resize-container\").removeAttribute('style');\n this.shadowRoot.querySelector(\".resize-image\").setAttribute('src', '');\n this.shadowRoot.querySelector(\".imageCropped\").setAttribute('src', '');\n this.shadowRoot.querySelector(\".resize-image\").style.width = '100%';\n this.shadowRoot.querySelector(\"#myRange\").max = 10;\n this.shadowRoot.querySelector(\"#myRange\").value = 5;\n this.shadowRoot.querySelector(\"#myRange\").min = 0;\n }\n\n reset() {\n this.resetAll();\n this.shadowRoot.querySelector(\".resize-image\").setAttribute('src', this.oldSrc);\n }\n\n connectedCallback() {\n let minHeigth = this.getAttribute('min-height');\n let minHeight = minHeigth ? minHeigth : '350px';\n let backgroundColor = this.getAttribute('background-color');\n backgroundColor = backgroundColor ? backgroundColor : 'var(--surface-color)';\n let onBackgroundColor = this.getAttribute('on-background-color');\n onBackgroundColor = onBackgroundColor ? onBackgroundColor : 'var(--on-surface-color)';\n let buttonColor = this.getAttribute('button-color');\n buttonColor = buttonColor ? buttonColor : 'var(--secondary-color)';\n let onButtonColor = this.getAttribute('on-button-color');\n onButtonColor = onButtonColor ? onButtonColor : 'var(--on-secondary-color)';\n\n let width = this.getAttribute('width');\n width = width ? width : '200px';\n\n let height = this.getAttribute('height');\n height = height ? height : '200px';\n\n let rounded = this.getAttribute('rounded');\n rounded = rounded ? rounded : '0px';\n\n this.shadowRoot.innerHTML = `\n \n
\n
\n \n \n \n \n
\n \n
\n
\n
\n
\n \n
\n
\n
\n
\n `;\n this.shadowRoot.querySelector('.uploader').addEventListener('change', e => {\n this.loadPic(e);\n });\n this.shadowRoot.querySelector('#myRange').addEventListener('immediate-value-change', e => {\n this.slide(e.target.immediateValue);\n });\n this.shadowRoot.querySelector('.crop').addEventListener('click', e => {\n this.crop();\n });\n this.shadowRoot.querySelector('.reset').addEventListener('click', e => {\n this.reset();\n });\n if (width) {\n this.shadowRoot.querySelector('.center').style.width = width;\n this.shadowRoot.querySelector('.center').style.left = 'calc(50% - ' + width + '/2)';\n }\n if (height) {\n this.shadowRoot.querySelector('.center').style.height = height;\n this.shadowRoot.querySelector('.center').style.top = 'calc(50% - ' + height + '/2)';\n }\n if (rounded) {\n this.shadowRoot.querySelector('.center').style.borderRadius = 'calc(' + height + '/2)';\n this.shadowRoot.querySelector('.imageCropped').style.borderRadius = 'calc(' + height + '/2)';\n }\n\n if (this.croppedImage != null) {\n var imageC = this.shadowRoot.querySelector('.imageCropped');\n imageC.src = this.croppedImage;\n }\n\n this.dragElement(this.shadowRoot.querySelector(\".resize-container\"));\n }\n}\n\nwindow.customElements.define('globular-image-cropper', ImageCropper);\n\n\n// Adds ctx.getTransform() - returns an SVGMatrix\n// Adds ctx.transformedPoint(x,y) - returns an SVGPoint\nfunction trackTransforms(ctx) {\n var svg = document.createElementNS(\"http://www.w3.org/2000/svg\", 'svg');\n var xform = svg.createSVGMatrix();\n ctx.getTransform = function () { return xform; };\n\n var savedTransforms = [];\n var save = ctx.save;\n ctx.save = function () {\n savedTransforms.push(xform.translate(0, 0));\n return save.call(ctx);\n };\n\n var restore = ctx.restore;\n ctx.restore = function () {\n xform = savedTransforms.pop();\n return restore.call(ctx);\n };\n\n var scale = ctx.scale;\n ctx.scale = function (sx, sy) {\n xform = xform.scaleNonUniform(sx, sy);\n return scale.call(ctx, sx, sy);\n };\n\n var rotate = ctx.rotate;\n ctx.rotate = function (radians) {\n xform = xform.rotate(radians * 180 / Math.PI);\n return rotate.call(ctx, radians);\n };\n\n var translate = ctx.translate;\n ctx.translate = function (dx, dy) {\n xform = xform.translate(dx, dy);\n return translate.call(ctx, dx, dy);\n };\n\n var transform = ctx.transform;\n ctx.transform = function (a, b, c, d, e, f) {\n var m2 = svg.createSVGMatrix();\n m2.a = a; m2.b = b; m2.c = c; m2.d = d; m2.e = e; m2.f = f;\n xform = xform.multiply(m2);\n return transform.call(ctx, a, b, c, d, e, f);\n };\n\n var setTransform = ctx.setTransform;\n ctx.setTransform = function (a, b, c, d, e, f) {\n xform.a = a;\n xform.b = b;\n xform.c = c;\n xform.d = d;\n xform.e = e;\n xform.f = f;\n return setTransform.call(ctx, a, b, c, d, e, f);\n };\n\n var pt = svg.createSVGPoint();\n ctx.transformedPoint = function (x, y) {\n pt.x = x; pt.y = y;\n return pt.matrixTransform(xform.inverse());\n }\n}\n\n\n/**\n * Use the canvas to display a pan and zoomable image.\n */\nexport class PanZoomCanvas extends HTMLElement {\n // attributes.\n\n // Create the applicaiton view.\n constructor() {\n\n // Set the shadow dom.\n super();\n\n this.attachShadow({ mode: 'open' });\n this.shadowRoot.innerHTML = `\n \n \n `;\n\n this.canvas = this.shadowRoot.getElementById('panZoomCanvas');\n this.ctx = this.canvas.getContext('2d');\n this.image = new Image();\n }\n\n // The connection callback.\n connectedCallback() {\n\n this.canvas.width = this.getAttribute('width') || window.innerWidth;\n this.canvas.height = this.getAttribute('height') || window.innerHeight;\n\n this.image.onload = () => {\n\n this.setupPanZoom();\n\n if(this.canvas.width == 0 || this.canvas.height == 0) {\n this.canvas.width = this.image.width;\n this.canvas.height = this.image.height;\n }\n \n // Calculate the initial zoom level to fit the image within the canvas and screen\n const fitScaleX = this.canvas.width / this.image.width;\n const fitScaleY = this.canvas.height / this.image.height;\n const initialZoom = Math.min(fitScaleX, fitScaleY);\n \n // Apply the initial zoom\n const initialTranslationX = (this.canvas.width - this.image.width * initialZoom) / 2;\n const initialTranslationY = (this.canvas.height - this.image.height * initialZoom) / 2;\n \n const ctx = this.canvas.getContext('2d');\n ctx.setTransform(initialZoom, 0, 0, initialZoom, initialTranslationX, initialTranslationY);\n \n this.redraw();\n };\n\n console.log(this.getAttribute('src'));\n this.image.src = this.getAttribute('src');\n }\n\n attributeChangedCallback(name, oldValue, newValue) {\n if (name === 'src') {\n this.image.src = newValue;\n }\n }\n\n static get observedAttributes() {\n return ['src'];\n }\n\n setupPanZoom() {\n\n let canvas = this.shadowRoot.getElementById('panZoomCanvas');\n let ctx = this.canvas.getContext('2d');\n\n trackTransforms(ctx);\n\n this.lastX = canvas.width / 2, this.lastY = canvas.height / 2;\n var dragStart, dragged;\n\n canvas.addEventListener('mousedown', (evt) => {\n document.body.style.mozUserSelect = document.body.style.webkitUserSelect = document.body.style.userSelect = 'none';\n this.lastX = evt.offsetX || (evt.pageX - canvas.offsetLeft);\n this.lastY = evt.offsetY || (evt.pageY - canvas.offsetTop);\n dragStart = ctx.transformedPoint(this.lastX, this.lastY);\n this.style.cursor = 'grabbing';\n dragged = false;\n }, false);\n\n canvas.addEventListener('mousemove', (evt) => {\n this.lastX = evt.offsetX || (evt.pageX - canvas.offsetLeft);\n this.lastY = evt.offsetY || (evt.pageY - canvas.offsetTop);\n dragged = true;\n if (dragStart) {\n var pt = ctx.transformedPoint(this.lastX, this.lastY);\n ctx.translate(pt.x - dragStart.x, pt.y - dragStart.y);\n this.style.cursor = 'move';\n this.redraw();\n } else {\n this.style.cursor = 'grab';\n }\n }, false);\n\n canvas.addEventListener('mouseup', (evt) => {\n dragStart = null;\n this.style.cursor = 'grab';\n if (!dragged) this.zoom(evt.shiftKey ? -1 : 1);\n }, false);\n\n\n let handleScroll = (evt) => {\n var delta = evt.wheelDelta ? evt.wheelDelta / 200 : evt.detail ? -evt.detail : 0;\n if (delta) this.zoom(delta);\n return evt.preventDefault() && false;\n };\n\n canvas.addEventListener('DOMMouseScroll', handleScroll, false);\n canvas.addEventListener('mousewheel', handleScroll, false);\n }\n\n zoom(clicks) {\n var scaleFactor = 1.1;\n let ctx = this.canvas.getContext('2d');\n var pt = ctx.transformedPoint(this.lastX, this.lastY);\n ctx.translate(pt.x, pt.y);\n var factor = Math.pow(scaleFactor, clicks);\n ctx.scale(factor, factor);\n ctx.translate(-pt.x, -pt.y);\n this.redraw();\n }\n\n redraw() {\n let canvas = this.shadowRoot.getElementById('panZoomCanvas');\n let ctx = this.canvas.getContext('2d');\n \n // Clear the entire canvas\n var p1 = ctx.transformedPoint(0, 0);\n var p2 = ctx.transformedPoint(canvas.width, canvas.height);\n ctx.clearRect(p1.x, p1.y, p2.x - p1.x, p2.y - p1.y);\n \n ctx.save();\n ctx.setTransform(1, 0, 0, 1, 0, 0); // Reset transform\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n ctx.restore();\n \n ctx.drawImage(this.image, 0, 0);\n }\n\n}\n\ncustomElements.define('globular-pan-zoom-canvas', PanZoomCanvas)\n\n/**\n * Classic image viewer\n */\nexport class ImageViewer extends HTMLElement {\n\n constructor() {\n super();\n this.onclose = null;\n\n this.index = -1;\n let shadowRoot = this.attachShadow({ mode: 'open' });\n\n\n shadowRoot.innerHTML = `\n \n
\n \n ×\n \n \n
\n Description\n
\n
\n
\n No images to show\n \n
\n
❮
\n
❯
\n \n
\n \n \n
\n
\n
`;\n\n if (!this.hasAttribute('closeable')) {\n shadowRoot.querySelector('#closeBtn').style.display = 'none';\n shadowRoot.querySelector(\"#zoomBtns\").style.right = '10px';\n }\n\n shadowRoot.querySelector('#closeBtn').addEventListener('click', e => {\n this.style.display = 'none';\n if (this.onclose != undefined) {\n this.onclose()\n }\n });\n\n\n\n if (this.noinfo) {\n shadowRoot.querySelector('#info').style.display = 'none';\n }\n\n //right arrow event\n shadowRoot.querySelector('#rightA').addEventListener('click', e => {\n this.nextImage();\n });\n\n //left arrow event\n shadowRoot.querySelector('#leftA').addEventListener('click', e => {\n this.prevImage();\n });\n\n const imageContainer = shadowRoot.querySelector('#content');\n\n // Prevent default drag behavior on the image container\n imageContainer.addEventListener('dragstart', event => {\n event.preventDefault();\n });\n\n shadowRoot.querySelector('#zoomInBtn').addEventListener('click', e => {\n shadowRoot.querySelector('globular-pan-zoom-canvas').zoom(\"0.6\")\n });\n\n shadowRoot.querySelector('#zoomOutBtn').addEventListener('click', e => {\n shadowRoot.querySelector('globular-pan-zoom-canvas').zoom(\"-0.6\")\n });\n\n // Observe changes to the \"closeable\" attribute\n this.observer = new MutationObserver(this.attributeChangedCallback.bind(this));\n this.observer.observe(this, { attributes: true });\n }\n\n attributeChangedCallback() {\n if (this.hasAttribute('closeable')) {\n this.shadowRoot.querySelector('#closeBtn').style.display = 'block';\n this.shadowRoot.querySelector(\"#zoomBtns\").style.right = '100px';\n } else {\n this.shadowRoot.querySelector('#closeBtn').style.display = 'none';\n this.shadowRoot.querySelector(\"#zoomBtns\").style.right = '10px';\n }\n }\n\n connectedCallback() {\n const imageContainer = this.shadowRoot.querySelector('#imageViewer');\n\n this.shadowRoot.querySelector(\"globular-pan-zoom-canvas\").setAttribute(\"height\", imageContainer.offsetHeight * .88);\n this.shadowRoot.querySelector(\"globular-pan-zoom-canvas\").setAttribute(\"width\", imageContainer.offsetWidth * .88);\n\n if (this.children.length != 0) {\n var ch = this.children;\n var cant = ch.length;\n for (var i = 0; i < cant; i++) {\n ch[i].style.maxHeight = '75vh'\n if (this.parentNode.tagName == \"BODY\")\n ch[i].style.maxHeight = 'calc(100vh - 20px)';\n }\n\n this.populateChildren();\n\n \n }\n\n if (this.hasAttribute('closeable')) {\n this.shadowRoot.querySelector('#closeBtn').style.display = 'block';\n this.shadowRoot.querySelector(\"#zoomBtns\").style.right = '100px';\n } else {\n this.shadowRoot.querySelector('#closeBtn').style.display = 'none';\n this.shadowRoot.querySelector(\"#zoomBtns\").style.right = '10px';\n }\n }\n\n\n get noinfo() {\n return this.hasAttribute('noinfo');\n }\n\n populateChildren() {\n if (this.children.length != 0) {\n var ch = this.children;\n var cant = ch.length;\n for (var i = 0; i < cant; i++) {\n if (i == 0)\n ch[i].style.display = 'block';\n else\n ch[i].style.display = 'none';\n\n ch[i].style.margin = 'auto';\n ch[i].style.maxWidth = '100%';\n ch[i].style.maxHeight = '75vh'\n\n }\n //counter\n this.shadowRoot.querySelector('#counter').innerHTML = '1/' + cant;\n if (this.index == - 1) {\n this.index = 0;\n }\n\n this.activeImage(this.index);\n } else {\n //hide the arrows\n this.shadowRoot.querySelector('#leftA').style.display = 'none';\n this.shadowRoot.querySelector('#rightA').style.display = 'none';\n }\n }\n\n activeImage(index) {\n var ch = this.children;\n var cant = ch.length;\n for (var i = 0; i < cant; i++) {\n ch[i].style.display = 'none';\n }\n if(ch[index] == undefined) {\n return;\n }\n ch[index].style.display = 'block';\n this.shadowRoot.querySelector('#counter').innerHTML = (index + 1) + '/' + (cant);\n this.index = index;\n this.shadowRoot.querySelector(\"globular-pan-zoom-canvas\").setAttribute(\"src\", ch[index].getAttribute(\"src\"));\n }\n\n addImage(e) {\n e.slot = \"images\"\n this.appendChild(e);\n this.populateChildren();\n //show the arrows\n this.shadowRoot.querySelector('#leftA').style.display = 'block';\n this.shadowRoot.querySelector('#rightA').style.display = 'block';\n }\n\n redraw(){\n\n }\n\n loadImgFrom(ele) {\n var el = ele.querySelectorAll('img');\n this.style.display = 'block';\n this.innerHTML = '';\n for (var i = 0; i < el.length; i++) {\n var src = el[i].getAttribute('src')\n if (localStorage.getItem(\"user_token\") != undefined) {\n src += \"&token=\" + localStorage.getItem(\"user_token\");\n }\n var newPic = document.createElement('img');\n newPic.setAttribute('slot', 'images');\n newPic.setAttribute('src', src);\n\n //if have data-info\n if (el[i].getAttribute('data-info'))\n newPic.setAttribute('data-info', el[i].getAttribute('data-info'));\n\n //adding to the component\n this.addImage(newPic);\n }\n }\n\n infoClick(title, fn) {\n this.shadowRoot.querySelector('#info').innerHTML = title;\n this.shadowRoot.querySelector('#info').addEventListener('click', function func(event) {\n fn(event);\n });\n }\n\n nextImage() {\n var ch = this.children;\n var cant = ch.length;\n for (var i = 0; i < cant; i++) {\n if (ch[i].style.display == 'block') {\n var actived = ch[0];\n var index = 0;\n if (i < (cant - 1)) {\n actived = ch[i + 1];\n index = i + 1;\n }\n }\n ch[i].style.display = 'none';\n }\n\n if (actived) {\n actived.style.display = 'block';\n this.shadowRoot.querySelector('#counter').innerHTML = (index + 1) + '/' + (cant);\n this.shadowRoot.querySelector(\"globular-pan-zoom-canvas\").setAttribute(\"src\", ch[index].getAttribute(\"src\"));\n }\n }\n\n prevImage() {\n var ch = this.children;\n var cant = ch.length;\n for (var i = 0; i < cant; i++) {\n if (ch[i].style.display == 'block') {\n var actived = ch[cant - 1];\n var index = cant - 1;\n if (i > 0) {\n actived = ch[i - 1];\n index = i - 1;\n }\n }\n ch[i].style.display = 'none';\n }\n if (actived) {\n actived.style.display = 'block';\n this.shadowRoot.querySelector('#counter').innerHTML = (index + 1) + '/' + (cant);\n this.shadowRoot.querySelector(\"globular-pan-zoom-canvas\").setAttribute(\"src\", ch[index].getAttribute(\"src\"));\n }\n }\n\n}\nwindow.customElements.define('globular-image-viewer', ImageViewer);\n\n/**\n * That component will be use to select image with drag and drop \n */\nexport class ImageSelector extends HTMLElement {\n // attributes.\n\n // Create the applicaiton view.\n constructor(label, url) {\n super()\n // Set the shadow dom.\n this.attachShadow({ mode: 'open' });\n\n /** The title of the image selector */\n if (this.hasAttribute(\"label\")) {\n label = this.getAttribute(\"label\")\n }\n if (!label) {\n label = \"\"\n }\n\n /** The url of the selected image (can be undefied or empty string) */\n if (this.hasAttribute(\"url\")) {\n url = this.getAttribute(\"url\")\n }\n if (!url) {\n url = \"\"\n }\n\n this.imageUrl = url\n\n // Innitialisation of the layout.\n this.shadowRoot.innerHTML = `\n \n\n
\n ${label}\n
\n
\n \n \n
\n
\n
\n `\n\n // Set image selector\n this.image = this.shadowRoot.querySelector(\".image-selector\")\n this.deleteBtn = this.shadowRoot.querySelector(\"#delete-cover-image-btn\")\n\n // Delete the postser/cover image.\n this.shadowRoot.querySelector(\"#delete-cover-image-btn\").onclick = () => {\n\n // Here I will ask the user for confirmation before actually delete the contact informations.\n let toast = displayMessage(\n `\n \n
\n
Your about to remove ${label} image
\n \n
Is it what you want to do?
\n
\n Yes\n No\n
\n
\n `,\n 60 * 1000 // 60 sec...\n );\n\n let yesBtn = document.querySelector(\"#yes-delete-picture\")\n let noBtn = document.querySelector(\"#no-delete-picture\")\n\n // On yes\n yesBtn.onclick = () => {\n\n // Call the function if defined...\n if (this.ondelete) {\n this.ondelete()\n }\n\n this.image.removeAttribute(\"src\")\n this.deleteBtn.style.display = \"none\"\n toast.hideToast();\n }\n\n noBtn.onclick = () => {\n toast.hideToast();\n }\n }\n\n // The drag and drop event...\n let imageCoverDropZone = this.shadowRoot.querySelector(\"#drop-zone\")\n\n imageCoverDropZone.ondragenter = (evt) => {\n evt.stopPropagation();\n evt.preventDefault();\n imageCoverDropZone.style.filter = \"invert(10%)\"\n }\n\n imageCoverDropZone.ondragleave = (evt) => {\n evt.preventDefault()\n imageCoverDropZone.style.filter = \"\"\n }\n\n imageCoverDropZone.ondragover = (evt) => {\n evt.stopPropagation();\n evt.preventDefault();\n }\n\n imageCoverDropZone.ondrop = (evt) => {\n evt.stopPropagation();\n evt.preventDefault();\n\n imageCoverDropZone.style.filter = \"\"\n\n if (evt.dataTransfer.files.length > 0) {\n var file = evt.dataTransfer.files[0], reader = new FileReader();\n reader.onload = (event) => {\n let dataUrl = event.target.result\n this.deleteBtn.style.display = \"block\"\n this.imageUrl = dataUrl\n this.image.src = dataUrl\n if (this.onselectimage) {\n this.onselectimage(dataUrl)\n }\n };\n reader.readAsDataURL(file);\n } else if (evt.dataTransfer.getData('files')) {\n\n // So here I will try to get the image from drop files from the file-explorer.\n let paths = JSON.parse(evt.dataTransfer.getData('files'))\n let domain = evt.dataTransfer.getData('domain')\n\n // keep track\n paths.forEach(path => {\n\n // so here I will read the file\n let globule = Backend.getGlobule(domain)\n\n FileController.getFile(globule, path, -1, -1,\n f => {\n generatePeerToken(globule, token => {\n let url = getUrl(globule)\n f.getPath().split(\"/\").forEach(item => {\n let component = encodeURIComponent(item.trim())\n if (component.length > 0) {\n url += \"/\" + component\n }\n })\n\n url += \"?token=\" + token\n url += \"&application=\" + globule.application\n \n createThumbmail(url, 500, dataUrl => {\n this.deleteBtn.style.display = \"block\"\n this.image.src = dataUrl\n this.imageUrl = dataUrl\n if (this.onselectimage) {\n this.onselectimage(dataUrl)\n }\n })\n })\n }, err => displayError(err, 3000))\n })\n }\n }\n }\n\n setImageUrl(url) {\n this.image.src = url\n if (url.length > 0) {\n this.deleteBtn.style.display = \"block\"\n }\n else {\n this.deleteBtn.style.display = \"none\"\n }\n }\n\n getImageUrl() {\n return this.image.src\n }\n\n // That functions will create images from multiple images and set the result as \n // results.\n createMosaic(images, callback) {\n\n let grid = document.createElement(\"div\")\n grid.classList.add(\"grid\")\n grid.setAttribute(\"data-masonry\", '{ \"itemSelector\": \".grid-item\", \"columnWidth\": 50 }')\n\n if (images.length > 3) {\n grid.style.width = \"300px\";\n }\n\n // must be in the layout...\n grid.style.backgroundColor = \"black\"\n\n // Maximum of 9 image...\n images.forEach((img, index) => {\n if (index < 9) {\n img.classList.add(\"grid-item\")\n img.style.maxWidth = \"100px\"\n img.style.maxHeight = \"100px\"\n grid.appendChild(img)\n }\n })\n\n // Display message to the user and take screenshot of the grid...\n let toast = displayMessage(\n `\n
\n
Generate cover from content...
\n \n
\n `, 3000)\n\n // apprend the grid to the \n toast.toastElement.querySelector(\"#grid-div\").appendChild(grid)\n fireResize()\n\n // wait for the grid to be organized...\n setTimeout(() => {\n domtoimage.toJpeg(grid, { quality: 0.95 })\n .then((dataUrl) => {\n ///grid.parentNode.style.height = grid.offsetHeight + \"px\"\n this.image.src = dataUrl;\n callback(dataUrl)\n });\n }, 1000)\n }\n}\n\ncustomElements.define('globular-image-selector', ImageSelector)\n\n/**\n * Image galery component that will display a list of images.\n */\nexport class ImageGallery extends HTMLElement {\n // attributes.\n\n // Create the applicaiton view.\n constructor() {\n super()\n\n // Set the shadow dom.\n this.attachShadow({ mode: 'open' });\n\n // Innitialisation of the layout.\n this.shadowRoot.innerHTML = `\n \n
\n\n
\n \n \n
\n \n
\n
\n
\n
\n \n
\n
❮
\n
❯
\n
\n \n
\n \n `\n // give the focus to the input.\n this.gallery = this.shadowRoot.querySelector('.gallery');\n\n this.itemWidth = 23; // percent: as set in css\n\n this.leftBtn = this.shadowRoot.querySelector('.move-btn.left');\n this.rightBtn = this.shadowRoot.querySelector('.move-btn.right');\n\n // old the interval...\n this.leftInterval;\n this.rightInterval;\n\n // scroll speed...\n this.scrollRate = 0.2;\n this.left;\n this.images = []\n\n // connect event listener's\n this.leftBtn.ontouchstart = this.leftBtn.onmouseenter = e => this.moveLeft(e);\n this.leftBtn.ontouchend = this.leftBtn.onmouseleave = e => this.stopMovement(e);\n this.rightBtn.ontouchstart = this.rightBtn.onmouseenter = e => this.moveRight(e);\n this.rightBtn.ontouchend = this.rightBtn.onmouseleave = e => this.stopMovement(e);\n\n this.closeBtn = this.shadowRoot.querySelector(\"#close-btn\")\n this.closeBtn.onclick = () => {\n\n const url = new URL(this.featured().image.src);\n\n // Here I will ask the user for confirmation before actually delete the contact informations.\n let toast = displayMessage(\n `\n \n
\n
Your about to remove image from the gallery
\n \n ${decodeURIComponent(url.pathname)}\n
Is it what you want to do?
\n
\n Yes\n No\n
\n
\n `,\n 60 * 1000 // 60 sec...\n );\n\n let yesBtn = document.querySelector(\"#yes-delete-picture\")\n let noBtn = document.querySelector(\"#no-delete-picture\")\n\n // On yes\n yesBtn.onclick = () => {\n\n // so here I will remove the image...\n this.images = this.images.filter(e => e !== this.featured().image.src);\n\n toast.hideToast();\n displayMessage(\n `
\n ${url.pathname}\n was remove from the gallery\n
`,\n 3000\n );\n\n this.setImages(this.images)\n if (this.onremoveimage) {\n\n this.onremoveimage(decodeURIComponent(url.pathname))\n }\n }\n\n noBtn.onclick = () => {\n toast.hideToast();\n }\n\n }\n }\n\n connectedCallback() {\n console.log(\"connectedCallback\", this.children)\n let images = []\n for (let i = 0; i < this.children.length; i++) {\n let child = this.children[i]\n if (child.tagName === \"IMG\") {\n images.push(child.src)\n }\n }\n\n this.setImages(images)\n }\n\n setEditable(editable) {\n // so here I will display the delete image button.\n if (editable)\n this.closeBtn.style.display = \"block\"\n else\n this.closeBtn.style.display = \"none\"\n }\n\n getImage(index) {\n return this.images[index]\n }\n\n setImages(images) {\n\n // keep reference to images.\n this.images = images\n\n let controls = this.shadowRoot.querySelector(\".controls\")\n if (this.images.length > 1) {\n controls.style.display = \"block\"\n } else {\n controls.style.display = \"none\"\n }\n\n //Set Initial Featured Image\n // The image viewer to display image to it full size\n this.imageViewer = new ImageViewer\n this.imageViewer.style.position = \"fixed\"\n this.imageViewer.style.top = \"0px\"\n this.imageViewer.style.left = \"0px\"\n this.imageViewer.style.right = \"0px\"\n this.imageViewer.style.bottom = \"0px\"\n this.imageViewer.setAttribute(\"closeable\", true)\n\n this.imageViewer.onclose = () => {\n // remove it from the layout.\n this.imageViewer.parentNode.removeChild(this.imageViewer)\n }\n\n this.featured().onclick = () => {\n this.imageViewer.activeImage(this.featured().index)\n this.imageViewer.style.display = \"block\"\n document.body.appendChild(this.imageViewer)\n }\n\n // remove existing images.\n this.gallery.innerHTML = \"\"\n let range = document.createRange()\n\n //Set Images for Gallery and Add Event Listeners\n for (var i = 0; i < images.length; i++) {\n let html = `\n
\n \n
\n `\n\n this.gallery.appendChild(range.createContextualFragment(html))\n let galleryItem = this.gallery.children[this.gallery.children.length - 1]\n\n // create the image to display by the image viewer.\n let img = document.createElement(\"img\")\n img.src = images[i]\n\n this.imageViewer.addImage(img)\n\n galleryItem.children[0].style.backgroundImage = 'url(' + img.src + ')';\n let index = i;\n\n galleryItem.children[0].onclick = e => {\n if (e.target.classList.contains('active')) return;\n\n this.featured().style.backgroundImage = e.target.style.backgroundImage;\n this.featured().index = index;\n this.featured().image = img\n this.imageViewer.activeImage(index);\n for (var i = 0; i < this.galleryItems().length; i++) {\n if (this.galleryItems()[i].classList.contains('active'))\n this.galleryItems()[i].classList.remove('active');\n }\n\n e.target.classList.add('active');\n };\n\n if (i == 0) {\n galleryItem.children[0].classList.add('active')\n this.featured().index = index;\n this.featured().style.backgroundImage = 'url(' + img.src + ')';\n this.featured().image = img\n }\n }\n }\n\n getImages() {\n let images = []\n this.images.forEach(src => {\n let img = document.createElement(\"img\")\n img.src = src\n images.push(img)\n })\n\n return images;\n }\n\n featured() {\n return this.shadowRoot.querySelector('.featured-item');\n }\n\n // Call search event.\n numOfItems() {\n return this.gallery.children.length\n }\n\n galleryItems() {\n return this.shadowRoot.querySelectorAll('.gallery-item');\n }\n\n galleryWrapLeft() {\n var first = this.gallery.children[0];\n this.gallery.removeChild(first);\n this.gallery.style.left = -this.itemWidth + '%';\n this.gallery.appendChild(first);\n this.gallery.style.left = '0%';\n }\n\n galleryWrapRight() {\n var last = this.gallery.children[this.gallery.children.length - 1];\n this.gallery.removeChild(last);\n this.gallery.insertBefore(last, this.gallery.children[0]);\n this.gallery.style.left = '-23%';\n }\n\n moveLeft() {\n this.left = this.left || 0;\n\n this.leftInterval = setInterval(() => {\n this.gallery.style.left = this.left + '%';\n\n if (this.left > - this.itemWidth) {\n this.left -= this.scrollRate;\n } else {\n this.left = 0;\n this.galleryWrapLeft();\n }\n }, 9);\n }\n\n moveRight() {\n //Make sure there is element to the leftd\n if (this.left > -this.itemWidth && this.left < 0) {\n this.left = this.left - this.itemWidth;\n\n var last = this.gallery.children[this.gallery.children.length - 1];\n this.gallery.removeChild(last);\n this.gallery.style.left = this.left + '%';\n this.gallery.insertBefore(last, this.gallery.children[0]);\n }\n\n this.left = this.left || 0;\n\n this.leftInterval = setInterval(() => {\n this.gallery.style.left = this.left + '%';\n\n if (this.left < 0) {\n this.left += this.scrollRate;\n } else {\n this.left = -this.itemWidth;\n this.galleryWrapRight();\n }\n }, 9);\n }\n\n stopMovement() {\n clearInterval(this.leftInterval);\n clearInterval(this.rightInterval);\n }\n\n}\n\ncustomElements.define('globular-image-gallery', ImageGallery)","\"use strict\";\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.PeerController = void 0;\nconst resource_pb_1 = require(\"globular-web-client/resource/resource_pb\");\nconst backend_1 = require(\"./backend\");\nclass PeerController {\n static getPeers(callback, errorCallback, globule = backend_1.Backend.globular) {\n (0, backend_1.generatePeerToken)(globule, token => {\n let rqst = new resource_pb_1.GetPeersRqst;\n rqst.setQuery(\"{}\");\n let peers = new Array();\n if (globule.resourceService == null) {\n errorCallback({ message: \"Resource service not found\" });\n return;\n }\n let stream = globule.resourceService.getPeers(rqst, { domain: globule.domain, address: globule.address, token: token });\n // Get the stream and set event on it...\n stream.on(\"data\", (rsp) => {\n peers = peers.concat(rsp.getPeersList());\n });\n stream.on(\"status\", (status) => {\n if (status.code == 0) {\n callback(peers);\n }\n else {\n errorCallback({ message: status.details });\n }\n });\n }, errorCallback);\n }\n static getPeer(id, globule, callback, errorCallback) {\n (0, backend_1.generatePeerToken)(globule, token => {\n let rqst = new resource_pb_1.GetPeersRqst;\n rqst.setQuery(`{ id=\"${id}\" }`);\n let peers = new Array();\n if (globule.resourceService == null) {\n errorCallback({ message: \"Resource service not found\" });\n return;\n }\n let stream = globule.resourceService.getPeers(rqst, { domain: globule.domain, address: globule.address, token: token });\n // Get the stream and set event on it...\n stream.on(\"data\", (rsp) => {\n peers = peers.concat(rsp.getPeersList());\n });\n stream.on(\"status\", (status) => {\n if (status.code == 0) {\n if (peers.length > 0) {\n callback(peers[0]);\n }\n else {\n errorCallback({ message: \"Peer not found\" });\n }\n }\n else {\n errorCallback({ message: status.details });\n }\n });\n }, errorCallback);\n }\n}\nexports.PeerController = PeerController;\nPeerController.__peers__ = {};\n","\"use strict\";\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.mergeTypedArrays = mergeTypedArrays;\nexports.uint8arrayToStringMethod = uint8arrayToStringMethod;\nexports.dataURItoBlob = dataURItoBlob;\nexports.fireResize = fireResize;\nfunction mergeTypedArrays(a, b) {\n // Checks for truthy values on both arrays\n if (!a && !b)\n throw \"Please specify valid arguments for parameters a and b.\";\n // Checks for truthy values or empty arrays on each argument\n // to avoid the unnecessary construction of a new array and\n // the type comparison\n if (!b || b.length === 0)\n return a;\n if (!a || a.length === 0)\n return b;\n // Make sure that both typed arrays are of the same type\n if (Object.prototype.toString.call(a) !== Object.prototype.toString.call(b))\n throw \"The types of the two arguments passed for parameters a and b do not match.\";\n var c = new a.constructor(a.length + b.length);\n c.set(a);\n c.set(b, a.length);\n return c;\n}\nfunction uint8arrayToStringMethod(uint8arr, callback) {\n var bb = new Blob([uint8arr]);\n var f = new FileReader();\n f.onload = function (evt) {\n callback(evt.target.result);\n };\n f.readAsText(bb);\n}\n// Convert data url to blob.\nfunction dataURItoBlob(dataURI) {\n // convert base64/URLEncoded data component to raw binary data held in a string\n var byteString;\n if (dataURI.split(',')[0].indexOf('base64') >= 0)\n byteString = atob(dataURI.split(',')[1]);\n else\n byteString = unescape(dataURI.split(',')[1]);\n // separate out the mime component\n var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];\n // write the bytes of the string to a typed array\n var ia = new Uint8Array(byteString.length);\n for (var i = 0; i < byteString.length; i++) {\n ia[i] = byteString.charCodeAt(i);\n }\n return new Blob([ia], { type: mimeString });\n}\nfunction fireResize() {\n if (document.createEvent) {\n // W3C\n var ev = document.createEvent('Event');\n ev.initEvent('resize', true, true);\n window.dispatchEvent(ev);\n }\n else {\n // IE\n var event = document.createEventObject();\n document.fireEvent(\"onresize\", event);\n }\n}\n;\n","\n\nexport class NotificationEditor extends HTMLElement {\n constructor() {\n super();\n this.attachShadow({ mode: 'open' });\n this.accounts = {};\n\n this.shadowRoot.innerHTML = `\n \n \n
\n `;\n\n let range = document.createRange();\n parent.insertBefore(range.createContextualFragment(html), parent.firstChild);\n\n let notificationDiv = this.shadowRoot.getElementById(`div_${notification.getId()}`);\n notificationDiv.notification = notification;\n\n let closeBtn = this.shadowRoot.getElementById(`div_${notification.getId()}_close_btn`);\n closeBtn.addEventListener('click', () => {\n Backend.publish(\"delete_notification_event_\", notification, true);\n if (this.onclose != undefined) {\n this.onclose(notification);\n }\n });\n\n notificationDiv.addEventListener('mouseover', () => {\n notificationDiv.style.cursor = \"pointer\";\n if (notification._type == 0) {\n closeBtn.style.display = \"block\";\n }\n });\n\n notificationDiv.addEventListener('mouseleave', () => {\n notificationDiv.style.backgroundColor = \"\";\n notificationDiv.style.cursor = \"default\";\n if (notification._type == 0) {\n closeBtn.style.display = \"none\";\n }\n });\n\n notificationDiv.style.display = \"flex\";\n notificationDiv.style.position = \"relative\";\n notificationDiv.style.padding = \".75rem\";\n let date_div = this.shadowRoot.getElementById(`div_${notification.getId()}_date`);\n\n setInterval(() => {\n let date = new Date(notification.getDate() * 1000);\n let now = new Date();\n let delay = Math.floor((now.getTime() - date.getTime()) / 1000);\n\n date_div.date = date;\n\n if (delay < 60) {\n date_div.innerHTML = delay + \" seconds ago\";\n } else if (delay < 60 * 60) {\n date_div.innerHTML = Math.floor(delay / 60) + \" minutes ago\";\n } else if (delay < 60 * 60 * 24) {\n date_div.innerHTML = Math.floor(delay / (60 * 60)) + \" hours ago\";\n } else {\n date_div.innerHTML = Math.floor(delay / (60 * 60 * 24)) + \" days ago\";\n }\n }, 1000);\n\n let notifications_read_date = 0;\n if (localStorage.getItem(\"notifications_read_date\") != undefined) {\n notifications_read_date = parseInt(localStorage.getItem(\"notifications_read_date\"));\n }\n\n let displayNotification = false;\n\n if (notification.getDate() * 1000 > notifications_read_date) {\n notificationDiv.classList.add(\"new_notification\");\n displayNotification = true;\n let evt = new CustomEvent(\"new-notification\", { detail: notification });\n document.dispatchEvent(evt);\n } else {\n // I will hide the bagde if the notification is not new.\n notificationDiv.classList.remove(\"new_notification\");\n\n }\n\n if (notification.getNotificationType() == NotificationType.APPLICATION_NOTIFICATION) {\n this.applicationNotificationsDiv.style.display = \"\";\n let application = JSON.parse(notification.getSender());\n let img = this.shadowRoot.getElementById(`div_${notification.getId()}_img`);\n let ico = this.shadowRoot.getElementById(`div_${notification.getId()}_ico`);\n img.src = application.icon;\n img.style.borderRadius = \"0px\";\n img.style.width = \"24px\";\n img.style.height = \"24px\";\n ico.style.display = \"none\";\n\n // I will clone the notification div and append it to the toast.\n let notificationDiv_ = notificationDiv.cloneNode(true);\n notificationDiv_.style.marginTop = \"5px\";\n\n if (displayNotification) {\n\n let toast = displayMessage(notificationDiv_.outerHTML, 15000);\n\n let div = toast.toastElement.querySelector(`#div_${notification.getId()}_text`);\n div.style.maxHeight = \"350px\";\n div.style.overflowY = \"auto\";\n div.style.minWidth = \"200px\";\n div.style.maxWidth = \"320px\";\n div.style.marginLeft = \"10px\";\n div.style.marginRight = \"30px\";\n div.style.overflowY = \"auto\";\n let closeBtn = toast.toastElement.querySelector(`#div_${notification.getId()}_close_btn`);\n closeBtn.style.right = \"-5px\";\n closeBtn.style.top = \"-5px\";\n closeBtn.style.display = \"block\";\n closeBtn.addEventListener('click', () => {\n if (this.onclose != undefined) {\n this.onclose(notification);\n }\n toast.hideToast();\n });\n\n }\n } else if (notification.getNotificationType() == NotificationType.USER_NOTIFICATION) {\n this.userNotificationsDiv.style.display = \"\";\n let img = this.shadowRoot.getElementById(`div_${notification.getId()}_img`);\n let ico = this.shadowRoot.getElementById(`div_${notification.getId()}_ico`);\n let span = this.shadowRoot.getElementById(`div_${notification.getId()}_span`);\n AccountController.getAccount(notification.getSender(), (account) => {\n if (account.getProfilepicture() != \"\") {\n img.style.display = \"block\";\n ico.style.display = \"none\";\n img.src = account.getProfilepicture();\n img.style.maxWidth = \"64px\";\n img.style.maxHeight = \"64px\";\n img.style.borderRadius = \"32px\";\n } else {\n img.style.display = \"none\";\n ico.style.display = \"block\";\n }\n\n let name = account.getName();\n if (account.getFirstname() != \"\" && account.getLastname() != \"\") {\n name = account.getFirstname() + \" \" + account.getLastname();\n }\n\n span.innerHTML = name;\n let deleteNotificationListener;\n\n if (displayNotification) {\n let notificationDiv_ = notificationDiv.cloneNode(true);\n notificationDiv_.style.marginTop = \"5px\";\n\n let toast = displayMessage(notificationDiv_.outerHTML, 10000);\n\n let div = toast.toastElement.querySelector(`#div_${notification.getId()}_text`);\n div.style.minWidth = \"200px\";\n div.style.maxWidth = \"320px\";\n div.style.marginLeft = \"10px\";\n div.style.marginRight = \"30px\";\n div.style.maxHeight = \"350px\";\n div.style.overflowY = \"auto\";\n let closeBtn = toast.toastElement.querySelector(`#div_${notification.getId()}_close_btn`);\n closeBtn.style.display = \"block\";\n closeBtn.style.position = \"absolute\";\n closeBtn.right = \"-5px\";\n closeBtn.top = \"-5px\";\n closeBtn.addEventListener('click', () => {\n Backend.publish(\"delete_notification_event_\", notification, true);\n if (this.onclose != undefined) {\n this.onclose(notification);\n }\n toast.hideToast();\n });\n }\n\n Backend.getGlobule(notification.mac).eventHub.subscribe(\n notification.getId() + \"_delete_notification_event\",\n (uuid) => {\n deleteNotificationListener = uuid;\n },\n (evt) => {\n let notification = Notification.deserializeBinary(Uint8Array.from(evt.split(\",\")));\n let parent = notificationDiv.parentNode;\n parent.removeChild(notificationDiv);\n\n Backend.eventHub.unSubscribe(notification.getId() + \"_delete_notification_event\", deleteNotificationListener);\n if (this.userNotificationsPanel.children.length == 0 && this.applicationNotificationsPanel.children.length == 0) {\n this.getIcon().icon = \"social:notifications-none\";\n }\n\n if (this.userNotificationsPanel.children.length == 0) {\n this.userNotificationsDiv.style.display = \"none\";\n }\n },\n false, this\n );\n }, err => {\n displayMessage(err, 3000);\n console.log(err);\n });\n }\n }\n}\n\ncustomElements.define('globular-notifications-panel', NotificationsPanel);\n\nclass NotificationMenu extends HTMLElement {\n constructor() {\n super();\n this.attachShadow({ mode: 'open' });\n this.unreadCount = 0;\n }\n\n connectedCallback() {\n this.render();\n this.addEventListener('click', this.onClick);\n this.style.display = \"none\";\n\n\n this.notificationCount = this.shadowRoot.querySelector('.badge');\n\n // listen to custom event new-notification\n document.addEventListener(\"new-notification\", (evt) => {\n this.unreadCount++;\n this.notificationCount = this.shadowRoot.querySelector('.badge');\n if(this.notificationCount == null) {\n return;\n }\n\n this.notificationCount.textContent = this.unreadCount;\n this.notificationCount.style.display = \"flex\";\n\n });\n\n // init on custom event backend-ready...\n document.addEventListener(\"backend-ready\", () => {\n // make sure the notifications panel is not already\n // initialized.\n if (this.notificationsPanel != null) {\n return;\n }\n\n // Subscribe to the login success event.\n Backend.eventHub.subscribe(\"login_success_\", uuid => { }, (account) => {\n this.style.display = \"block\";\n if (this.notificationsPanel != null) {\n return;\n }\n\n // Initialize the notifications panel.\n this.notificationsPanel = new NotificationsPanel();\n\n // Initialize the notifications panel.\n this.notificationsPanel.init();\n\n // get the new_notification class and count the number of notifications.\n let new_notifications = document.querySelectorAll(\".new_notification\");\n this.unreadCount = new_notifications.length;\n this.notificationCount = this.shadowRoot.querySelector('.badge');\n this.notificationCount.textContent = this.unreadCount;\n\n if (this.unreadCount > 0) {\n this.notificationCount.display = \"block\";\n }\n\n }, true);\n\n // Subscribe to the logout event.\n Backend.eventHub.subscribe(\"logout_event\", uuid => { }, (account) => {\n this.style.display = \"none\";\n this.notificationsPanel = null;\n }, true);\n\n });\n\n this.render();\n\n }\n\n render() {\n this.shadowRoot.innerHTML = `\n \n
\n \n ${this.unreadCount}\n
\n `;\n }\n\n static get observedAttributes() {\n return ['unread-count'];\n }\n\n attributeChangedCallback(name, oldValue, newValue) {\n if (name === 'unread-count') {\n this.unreadCount = parseInt(newValue, 10) || 0;\n this.shadowRoot.querySelector('.badge').textContent = this.unreadCount;\n }\n }\n\n onClick() {\n if (this.notificationCount) {\n if (this.notificationCount.parentNode) {\n this.notificationCount.parentNode.removeChild(this.notificationCount);\n this.notificationCount = undefined;\n }\n }\n\n const isHidden = this.notificationsPanel.parentNode === null;\n if (isHidden) {\n document.body.appendChild(this.notificationsPanel);\n } else {\n document.body.removeChild(this.notificationsPanel);\n return;\n }\n\n const now = new Date();\n const dateTimeDivs = this.notificationsPanel.shadowRoot.querySelectorAll(\".notification_date\");\n if (dateTimeDivs.length > 0) {\n dateTimeDivs.forEach(div => {\n const date = div.date;\n const delay = Math.floor((now.getTime() - date.getTime()) / 1000);\n if (delay < 60) {\n div.innerHTML = `${delay} seconds ago`;\n } else if (delay < 60 * 60) {\n div.innerHTML = `${Math.floor(delay / 60)} minutes ago`;\n } else if (delay < 60 * 60 * 24) {\n div.innerHTML = `${Math.floor(delay / (60 * 60))} hours ago`;\n } else {\n div.innerHTML = `${Math.floor(delay / (60 * 60 * 24))} days ago`;\n }\n });\n\n localStorage.setItem(\"notifications_read_date\", now.getTime().toString());\n }\n\n\n }\n\n}\n\ncustomElements.define('globular-notification-menu', NotificationMenu);\n\n\n\n","\"use strict\";\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.NotificationController = void 0;\nconst resource_pb_1 = require(\"globular-web-client/resource/resource_pb\");\nconst backend_1 = require(\"./backend\");\nconst uuid_by_string_1 = __importDefault(require(\"uuid-by-string\"));\n/**\n * The notification controller is used to send and receive notifications.\n */\nclass NotificationController {\n constructor() {\n }\n /**\n * Initialyse the user and application notifications\n */\n static initNotifications() {\n // Initialyse application notifications.\n NotificationController.getNotifications(resource_pb_1.NotificationType.APPLICATION_NOTIFICATION, (notifications) => {\n backend_1.Backend.globular.eventHub.publish(\"set_application_notifications_event\", notifications, true);\n }, (err) => {\n (0, backend_1.displayError)(err, 4000);\n });\n NotificationController.getNotifications(resource_pb_1.NotificationType.USER_NOTIFICATION, (notifications) => {\n backend_1.Backend.globular.eventHub.publish(\"set_user_notifications_event\", notifications, true);\n }, (err) => {\n (0, backend_1.displayError)(err, 4000);\n });\n }\n /**\n * Send application notifications.\n * @param notification The notification can contain html text.\n */\n static sendNotifications(recipient, mac, text, type, callback, onError) {\n // first of all I will save the notificaiton.\n let rqst = new resource_pb_1.CreateNotificationRqst;\n let id = (0, uuid_by_string_1.default)(Date.now().toString());\n // init the notification infos.\n let notification_ = new resource_pb_1.Notification;\n notification_.setId(id);\n notification_.setDate(Math.floor(Date.now() / 1000));\n notification_.setMessage(text);\n notification_.setRecipient(recipient);\n notification_.setMac(mac);\n if (type == resource_pb_1.NotificationType.APPLICATION_NOTIFICATION) {\n let application = window.localStorage.getItem(\"application\");\n if (application == null) {\n onError(\"The application is not defined\");\n return;\n }\n notification_.setSender(application);\n notification_.setNotificationType(resource_pb_1.NotificationType.APPLICATION_NOTIFICATION);\n }\n else {\n notification_.setNotificationType(resource_pb_1.NotificationType.USER_NOTIFICATION);\n let user_name = window.localStorage.getItem(\"user_name\");\n if (user_name == null) {\n onError(\"no user defined\");\n return;\n }\n let user_domain = window.localStorage.getItem(\"user_domain\");\n if (user_domain == null) {\n onError(\"no user domain defined\");\n return;\n }\n let sender = user_name + \"@\" + user_domain;\n notification_.setSender(sender);\n }\n rqst.setNotification(notification_);\n let globule = backend_1.Backend.getGlobule(recipient.split(\"@\")[1]);\n if (globule == null) {\n onError(\"The domain is not defined\");\n return;\n }\n (0, backend_1.generatePeerToken)(globule, token => {\n if (globule.resourceService == null) {\n onError(\"The resource service is not defined\");\n return;\n }\n globule.resourceService\n .createNotification(rqst, {\n token: token,\n domain: globule.domain\n })\n .then(() => {\n // Here I will throw a network event...\n // Publish the notification\n backend_1.Backend.publish(recipient + \"_notification_event\", notification_.serializeBinary(), false);\n if (callback != undefined) {\n callback();\n }\n })\n .catch((err) => {\n onError(err);\n });\n }, err => onError(err));\n }\n /**\n * Retreive the list of nofitications\n * @param callback The success callback with the list of notifications.\n * @param errorCallback The error callback with the error message.\n */\n static getNotifications(type, callback, errorCallback) {\n let user_domain = window.localStorage.getItem(\"user_domain\");\n if (user_domain == null) {\n errorCallback(\"No user domain defined\");\n return;\n }\n let user_name = window.localStorage.getItem(\"user_name\");\n if (user_name == null) {\n errorCallback(\"No user name defined\");\n return;\n }\n let user = user_name + \"@\" + user_domain;\n let globule = backend_1.Backend.getGlobule(user_domain);\n if (globule == null) {\n errorCallback(\"The domain is not defined\");\n return;\n }\n (0, backend_1.generatePeerToken)(globule, token => {\n // So here I will get the list of notification for the given type.\n let rqst = new resource_pb_1.GetNotificationsRqst;\n let application = window.localStorage.getItem(\"application\");\n if (application == null) {\n errorCallback(\"The application is not defined\");\n return;\n }\n if (type == resource_pb_1.NotificationType.APPLICATION_NOTIFICATION) {\n rqst.setRecipient(application);\n }\n else {\n rqst.setRecipient(user);\n }\n if (globule.resourceService == null) {\n errorCallback(\"The resource service is not defined\");\n return;\n }\n let stream = globule.resourceService.getNotifications(rqst, {\n token: token,\n domain: backend_1.Backend.domain\n });\n let notifications = new Array();\n stream.on(\"data\", (rsp) => {\n notifications = notifications.concat(rsp.getNotificationsList());\n });\n stream.on(\"status\", (status) => {\n if (status.code == 0) {\n callback(notifications);\n }\n else {\n // In case of error I will return an empty array\n callback([]);\n }\n });\n }, err => (0, backend_1.displayError)(err, 3000));\n }\n /**\n * Remove a notification.\n * @param notification The notification to remove.\n */\n static removeNotification(notification) {\n let rqst = new resource_pb_1.DeleteNotificationRqst;\n let globule = backend_1.Backend.globular;\n if (notification.getNotificationType() == resource_pb_1.NotificationType.USER_NOTIFICATION) {\n let user_domain = window.localStorage.getItem(\"user_domain\");\n if (user_domain == null) {\n (0, backend_1.displayError)(\"No user domain defined\", 4000);\n return;\n }\n globule = backend_1.Backend.getGlobule(user_domain);\n }\n if (globule == null) {\n (0, backend_1.displayError)(\"The domain is not defined\", 4000);\n return;\n }\n rqst.setId(notification.getId());\n rqst.setRecipient(notification.getRecipient());\n (0, backend_1.generatePeerToken)(globule, token => {\n if (globule.resourceService == null) {\n (0, backend_1.displayError)(\"The resource service is not defined\", 4000);\n return;\n }\n globule.resourceService\n .deleteNotification(rqst, {\n token: token,\n domain: globule.domain\n })\n .then(() => {\n // The notification is not deleted so I will send network event to remove it from\n // the display.\n backend_1.Backend.publish(notification.getId() + \"_delete_notification_event\", notification.serializeBinary(), false);\n })\n .catch((err) => {\n (0, backend_1.displayError)(err, 4000);\n });\n }, err => (0, backend_1.displayError)(err, 3000));\n }\n /**\n * Remove all notification.\n */\n static clearNotifications(type) {\n let user_domain = window.localStorage.getItem(\"user_domain\");\n if (user_domain == null) {\n (0, backend_1.displayError)(\"No user domain defined\", 4000);\n return;\n }\n let user_name = window.localStorage.getItem(\"user_name\");\n if (user_name == null) {\n (0, backend_1.displayError)(\"No user name defined\", 4000);\n return;\n }\n let user = user_name + \"@\" + user_domain;\n let globule = backend_1.Backend.getGlobule(user_domain);\n if (globule == null) {\n (0, backend_1.displayError)(\"The domain is not defined\", 4000);\n return;\n }\n (0, backend_1.generatePeerToken)(globule, token => {\n // So here I will get the list of notification for the given type.\n let rqst = new resource_pb_1.ClearAllNotificationsRqst;\n let application = window.localStorage.getItem(\"application\");\n if (application == null) {\n (0, backend_1.displayError)(\"The application is not defined\", 4000);\n return;\n }\n if (type == resource_pb_1.NotificationType.APPLICATION_NOTIFICATION) {\n rqst.setRecipient(application);\n }\n else {\n rqst.setRecipient(user);\n }\n if (globule.resourceService == null) {\n (0, backend_1.displayError)(\"The resource service is not defined\", 4000);\n return;\n }\n globule.resourceService\n .clearAllNotifications(rqst, {\n token: token,\n domain: backend_1.Backend.domain\n })\n .then(() => {\n // The notification is not deleted so I will send network event to remove it from\n // the display.\n backend_1.Backend.publish(user + \"_clear_notification_event\", \"\", false);\n })\n .catch((err) => {\n (0, backend_1.displayError)(err, 4000);\n });\n }, err => (0, backend_1.displayError)(err, 3000));\n }\n}\nexports.NotificationController = NotificationController;\n","import { SearchVideoCard } from \"./search/searchVideoCard.js\";\nimport { SearchTitleCard } from \"./search/searchTitleCard.js\";\nimport { DeleteOneRqst, ReplaceOneRqst, FindOneRqst, FindRqst } from \"globular-web-client/persistence/persistence_pb.js\";\nimport { Backend, displayError, generatePeerToken } from \"../backend/backend\";\nimport \"@polymer/iron-icons/iron-icons.js\";\nimport '@polymer/iron-icons/maps-icons'\nimport jwt from \"jwt-decode\";\nimport { TitleController } from \"../backend/title\";\nimport { mergeTypedArrays, uint8arrayToStringMethod } from \"../Utility\";\n\n/**\n * Search Box\n */\nexport class MediaWatching extends HTMLElement {\n // attributes.\n\n // Create the applicaiton view.\n constructor() {\n super()\n // Set the shadow dom.\n this.attachShadow({ mode: 'open' });\n\n // Innitialisation of the layout.\n this.shadowRoot.innerHTML = `\n \n\n
\n \n
\n
Continue Watching...
\n \n
\n\n
\n
\n
Video(s)
\n
\n \n
\n
\n \n
\n
Title(s)
\n
\n \n
\n
\n
\n
\n `\n\n this.onclose = null\n\n // simply close the watching content...\n this.shadowRoot.querySelector(\"#close-btn\").onclick = () => {\n this.parentNode.removeChild(this)\n if (this.onclose != null) {\n this.onclose()\n }\n }\n }\n\n appendTitle(title, callback, errorCallback) {\n\n if(localStorage.getItem(\"user_token\") == null){\n return\n }\n\n if (this.querySelector(\"#_\" + title._id)) {\n\n if (title.isVideo) {\n this.shadowRoot.querySelector(\"#video_div\").style.display = \"flex\"\n this.shadowRoot.querySelector(\"#video-title\").innerHTML = `Video(${this.querySelectorAll(`[slot=\"video\"]`).length})`\n } else {\n this.shadowRoot.querySelector(\"#title_div\").style.display = \"flex\"\n this.shadowRoot.querySelector(\"#movie-title\").innerHTML = `Title(${this.querySelectorAll(`[slot=\"title\"]`).length})`\n }\n\n return\n }\n\n let card = new MediaWatchingCard\n card.id = title._id\n\n card.setTitle(title, () => {\n this.appendChild(card)\n\n if (title.isVideo) {\n card.slot = \"video\"\n } else {\n card.slot = \"title\"\n }\n\n\n if (title.isVideo) {\n this.shadowRoot.querySelector(\"#video_div\").style.display = \"flex\"\n this.shadowRoot.querySelector(\"#video-title\").innerHTML = `Video(${this.querySelectorAll(`[slot=\"video\"]`).length})`\n } else {\n this.shadowRoot.querySelector(\"#title_div\").style.display = \"flex\"\n this.shadowRoot.querySelector(\"#movie-title\").innerHTML = `Title(${this.querySelectorAll(`[slot=\"title\"]`).length})`\n }\n\n Backend.eventHub.subscribe(\"remove_video_player_evt_\", uuid => { }, evt => {\n if (title._id == evt._id) {\n if (!card) {\n return\n }\n if (!card.parentNode) {\n return\n }\n\n card.parentNode.removeChild(card)\n let video_count = this.querySelectorAll(`[slot=\"video\"]`).length\n if (video_count > 0) {\n this.shadowRoot.querySelector(\"#video_div\").style.display = \"flex\"\n this.shadowRoot.querySelector(\"#video-title\").innerHTML = `Video(${video_count})`\n } else {\n this.shadowRoot.querySelector(\"#video_div\").style.display = \"none\"\n }\n\n let movie_count = this.querySelectorAll(`[slot=\"title\"]`).length\n if (movie_count > 0) {\n this.shadowRoot.querySelector(\"#title_div\").style.display = \"flex\"\n this.shadowRoot.querySelector(\"#movie-title\").innerHTML = `Title(${movie_count})`\n } else {\n this.shadowRoot.querySelector(\"#title_div\").style.display = \"none\"\n }\n\n }\n }, true)\n\n if (callback) {\n callback()\n }\n\n }, errorCallback)\n }\n}\n\ncustomElements.define('globular-media-watching', MediaWatching)\n\n\nexport class MediaWatchingCard extends HTMLElement {\n // attributes.\n\n // Create the applicaiton view.\n constructor() {\n super()\n // Set the shadow dom.\n this.attachShadow({ mode: 'open' });\n\n // Innitialisation of the layout.\n this.shadowRoot.innerHTML = `\n \n\n
\n
\n \n \n
\n \n
\n `\n\n\n }\n\n // Append title.\n setTitle(title, callback, errorCallback) {\n\n let lastView = new Date(title.date)\n this.shadowRoot.querySelector(\"#title-date\").innerHTML = lastView.toLocaleDateString() + \" \" + lastView.toLocaleTimeString()\n\n let closeButton = this.shadowRoot.querySelector(\"paper-icon-button\")\n closeButton.onclick = () => {\n Backend.eventHub.publish(\"remove_video_player_evt_\", title, true)\n }\n\n Backend.eventHub.subscribe(\"remove_media_watching_card_\" + title.domain + \"_evt_\", uuid => { },\n evt => {\n if (this.parentNode)\n this.parentNode.removeChild(this)\n }, true)\n\n if (title.domain) {\n if (title.isVideo) {\n TitleController.getVideoInfo(title._id, (video) => {\n\n let videoCard = new SearchVideoCard();\n videoCard.id = \"_\" + title._id\n videoCard.setVideo(video)\n this.appendChild(videoCard)\n if (callback) {\n callback()\n }\n\n\n }, (err) => { }, Backend.getGlobule(title.domain))\n } else {\n\n TitleController.getTitleInfo(title._id, (title) => {\n let titleCard = new SearchTitleCard();\n titleCard.id = \"_\" + title._id\n titleCard.setTitle(title)\n this.appendChild(titleCard)\n if (callback) {\n callback()\n }\n\n }, errorCallback, Backend.getGlobule(title.domain))\n }\n }\n }\n}\n\ncustomElements.define('globular-media-watching-card', MediaWatchingCard)\n\n\nexport class WatchingMenu extends HTMLElement {\n\n // Create the application view.\n constructor() {\n\n super()\n\n // Set the shadow dom.\n this.attachShadow({ mode: 'open' });\n\n // Innitialisation of the layout.\n this.shadowRoot.innerHTML = `\n \n\n \n \n \n `\n\n this.mediaWatching = document.querySelector(\"globular-media-watching\");\n this.onclose = null;\n\n this.onclick = () => {\n const mediaWatchingEvt = new CustomEvent(\"open-media-watching\", {\n bubbles: true,\n composed: true,\n detail: {\n mediaWatching: this.mediaWatching\n }\n }); \n\n\n this.dispatchEvent(mediaWatchingEvt)\n\n }\n\n if(this.mediaWatching == null){\n this.init()\n }\n }\n\n init() {\n\n\n if (this.mediaWatching == null) {\n // Here I will connect the update peer event to react of peer connections.\n Backend.eventHub.subscribe(\"start_peer_evt_\", uuid => { }, evt => {\n this.getWatchingTitles(titles => {\n\n let appendTitle = () => {\n if (titles.length == 0) {\n return\n }\n let t = titles.pop()\n\n this.mediaWatching.appendTitle(t, () => {\n localStorage.setItem(t._id, t.currentTime)\n if (titles.length > 0) {\n appendTitle()\n } else {\n this.mediaWatching.style.display = \"\"\n }\n },\n err => {\n if (titles.length > 0) {\n appendTitle()\n }\n })\n\n }\n appendTitle()\n })\n }, true)\n\n // stop peer event received.\n Backend.eventHub.subscribe(\"stop_peer_evt_\", uuid => { },\n peer => {\n Backend.eventHub.publish(\"remove_media_watching_card_\" + peer.getDomain() + \".\" + peer.getDomain() + \"_evt_\", {}, true)\n }, true)\n\n // Initialyse the watching content...\n this.mediaWatching = new MediaWatching()\n this.mediaWatching.onclose = this.onclose\n\n // Append the media context in the workspace.\n // console here i will get the list of title and movies...\n Backend.eventHub.subscribe(\"play_video_player_evt_\", uuid => { }, evt => {\n this.saveWatchingTitle(evt, () => { })\n }, true)\n\n Backend.eventHub.subscribe(\"stop_video_player_evt_\", uuid => { }, evt => {\n this.saveWatchingTitle(evt, () => { })\n\n this.mediaWatching.appendTitle(evt, () => { console.log(\"title \", evt._id, \" was add to watching...\") }, err => { console.log(\"fail to add title with error: \", err) })\n }, true)\n\n Backend.eventHub.subscribe(\"remove_video_player_evt_\", uuid => { }, evt => {\n this.removeWacthingTitle(evt)\n }, true)\n\n // Here I will get the list of titles.\n this.getWatchingTitles(titles => {\n\n let appendTitle = () => {\n if (titles.length == 0) {\n return\n }\n let t = titles.pop()\n\n this.mediaWatching.appendTitle(t, () => {\n localStorage.setItem(t._id, t.currentTime)\n if (titles.length > 0) {\n appendTitle()\n } else {\n this.mediaWatching.style.display = \"\"\n }\n },\n err => {\n if (titles.length > 0) {\n appendTitle()\n }\n })\n\n }\n appendTitle()\n })\n\n }\n }\n\n /**\n * Return the list of all watching titles\n * @param callback \n */\n getWatchingTitles(callback) {\n if(localStorage.getItem(\"user_token\") == null){\n callback([])\n return\n }\n\n let token = localStorage.getItem(\"user_token\")\n const rqst = new FindRqst();\n let decoded = jwt(token);\n let userName = decoded.username;\n let userDomain = decoded.user_domain;\n const collection = \"watching\";\n let id = userName.split(\"@\").join(\"_\").split(\".\").join(\"_\");\n let db = id + \"_db\";\n\n rqst.setId(id);\n rqst.setDatabase(db);\n rqst.setCollection(collection)\n\n rqst.setQuery(\"{}\"); // means all values.\n\n let globule = Backend.getGlobule(userDomain)\n const stream = globule.persistenceService.find(rqst, {\n domain: userDomain, token: token\n });\n\n let data = [];\n\n stream.on(\"data\", rsp => {\n data = mergeTypedArrays(data, rsp.getData())\n });\n\n stream.on(\"status\", (status) => {\n if (status.code === 0) {\n uint8arrayToStringMethod(data, str => { let titles = JSON.parse(str); callback(titles) })\n } else {\n console.log(\"error\", status.details)\n callback([])\n }\n });\n\n\n \n }\n\n /**\n * Find one title...\n * @param callback The callback\n */\n getWacthingTitle(titleId, callback) {\n TitleController.getWacthingTitle(titleId, callback, (err) => { displayError(err, 3000) })\n }\n\n /**\n * Find one title...\n * @param callback The callback\n */\n removeWacthingTitle(title) {\n\n if(localStorage.getItem(\"user_token\") == null){\n return\n }\n\n generatePeerToken(Backend.globular, (token) => {\n\n let decoded = jwt(token);\n let userName = decoded.username;\n let userDomain = decoded.user_domain;\n const collection = \"watching\";\n localStorage.removeItem(title._id)\n\n // save the user_data\n let rqst = new DeleteOneRqst();\n let id = userName.split(\"@\").join(\"_\").split(\".\").join(\"_\");\n let db = id + \"_db\";\n\n // set the connection infos,\n rqst.setQuery(`{\"_id\":\"${title._id}\"}`)\n rqst.setId(id);\n rqst.setDatabase(db);\n rqst.setCollection(collection)\n\n // So here I will set the address from the address found in the token and not \n // the address of the client itself.\n let globule = Backend.getGlobule(userDomain)\n\n // call persist data\n globule.persistenceService\n .deleteOne(rqst, {\n token: token,\n application: Backend.application,\n domain: Backend.domain\n })\n .then(rsp => {\n // Here I will return the value with it\n console.log(rsp)\n\n })\n .catch(err => {\n if(!err.message.includes(\"not found\")){\n displayError(err, 3000)\n }\n });\n\n }, (err) => { displayError(err, 3000) })\n }\n\n saveWatchingTitle(title, callback) {\n if(localStorage.getItem(\"user_token\") == null){\n callback()\n return\n }\n\n if (!title.domain) {\n displayError(`title ${title._id} has no domain.`, 3000)\n return\n }\n\n generatePeerToken(Backend.globular, (token) => {\n let decoded = jwt(token);\n let userName = decoded.username;\n let userDomain = decoded.user_domain;\n const collection = \"watching\";\n localStorage.setItem(title._id, title.currentTime)\n\n // save the user_data\n let rqst = new ReplaceOneRqst();\n let id = userName.split(\"@\").join(\"_\").split(\".\").join(\"_\");\n let db = id + \"_db\";\n\n // set the connection infos,\n rqst.setId(id);\n rqst.setDatabase(db);\n\n // save only user data and not the how user info...\n rqst.setCollection(collection);\n rqst.setQuery(`{\"_id\":\"${title._id}\"}`);\n rqst.setValue(JSON.stringify(title));\n rqst.setOptions(`[{\"upsert\": true}]`);\n\n // So here I will set the address from the address found in the token and not \n // the address of the client itself.\n\n let globule = Backend.getGlobule(userDomain)\n\n // call persist data\n globule.persistenceService\n .replaceOne(rqst, {\n token: token,\n application: Backend.application,\n domain: Backend.domain\n })\n .then((rsp) => {\n // Here I will return the value with it\n callback()\n })\n .catch(err => {\n console.log(err)\n });\n }, (err) => { console.log(err) })\n\n\n\n }\n}\n\ncustomElements.define('globular-watching-menu', WatchingMenu)","import { Backend, generatePeerToken, getUrl, displayError } from '../backend/backend';\nimport Plyr from 'plyr';\nimport Hls from \"hls.js\";\nimport { GetFileTitlesRequest, GetFileVideosRequest, GetTitleFilesRequest, Poster, Video } from \"globular-web-client/title/title_pb\";\nimport { FileController } from \"../backend/file\";\nimport { fireResize } from \"./utility\";\nimport { PlayList } from \"./playlist\"\nimport { TitleController } from '../backend/title';\nimport { add } from 'lodash';\nimport { WatchingMenu } from './watching';\nimport \"./plyr.css\"\n\nObject.defineProperty(HTMLMediaElement.prototype, 'playing', {\n get: function () {\n\n return !!(this.currentTime > 0 && !this.paused && !this.ended && this.readyState > 2);\n }\n})\n\nString.prototype.endsWith = function (suffix) {\n return this.indexOf(suffix, this.length - suffix.length) !== -1;\n};\n\n// get files associated with the titles, videos or videos...\nfunction getTitleFiles(id, indexPath, globule, callback) {\n let rqst = new GetTitleFilesRequest\n rqst.setTitleid(id)\n rqst.setIndexpath(indexPath)\n globule.titleService.getTitleFiles(rqst)\n .then(rsp => {\n callback(rsp.getFilepathsList())\n }).catch(err => {\n callback([])\n })\n}\n\nexport function playVideos(videos, name) {\n\n let videos_ = [...new Map(videos.map(v => [v.getId(), v])).values()]\n\n // here I will get the audi\n let video_playList = \"#EXTM3U\\n\"\n video_playList += \"#PLAYLIST: \" + name + \"\\n\\n\"\n\n // Generate the playlist with found video items.\n let generateVideoPlaylist = () => {\n let video = videos_.pop();\n let globule = video.globule;\n\n // set the video info\n let indexPath = globule.config.DataPath + \"/search/videos\"\n\n // get the title file path...\n getTitleFiles(video.getId(), indexPath, globule, files => {\n\n if (files.length > 0) {\n video_playList += `#EXTINF:${video.getDuration()}, ${video.getDescription()}, tvg-id=\"${video.getId()}\"\\n`\n\n let url = getUrl(globule)\n\n if (!files[0].endsWith(\".mp4\") && !files[0].endsWith(\".m3u8\") && !files[0].endsWith(\".mkv\")) {\n files[0] += \"/playlist.m3u8\"\n }\n let path = files[0].split(\"/\")\n path.forEach(item => {\n item = item.trim()\n if (item.length > 0)\n url += \"/\" + encodeURIComponent(item) //* fail to parse if the item is encoded...\n })\n\n video_playList += url + \"\\n\\n\"\n }\n if (videos_.length > 0) {\n generateVideoPlaylist()\n } else {\n playVideo(video_playList, null, null, null, globule)\n }\n })\n }\n\n generateVideoPlaylist()\n}\n\n/**\n * Function to play a video on the same player.\n * @param {*} path \n * @param {*} onplay \n * @param {*} onclose \n */\nexport function playVideo(path, onplay, onclose, title, globule) {\n if (globule == null) {\n globule = Backend.getGlobule()\n }\n\n if (title) {\n if (title.globule) {\n globule = title.globule\n } else if (globule != null) {\n title.globule = globule\n }\n }\n\n let menus = document.body.querySelectorAll(\"globular-dropdown-menu\")\n for (var i = 0; i < menus.length; i++) {\n menus[i].close()\n if (menus[i].classList.contains(\"file-dropdown-menu\")) {\n menus[i].parentNode.removeChild(menus[i])\n }\n }\n\n let videoPlayer = document.querySelector(\"globular-video-player\")\n\n if (videoPlayer == null) {\n videoPlayer = new VideoPlayer()\n } else {\n videoPlayer.stop()\n }\n\n videoPlayer.resume = false;\n videoPlayer.style.zIndex = 100\n\n if (onplay && !videoPlayer.onplay) {\n videoPlayer.onplay = onplay\n }\n\n // keep the title\n videoPlayer.titleInfo = title;\n videoPlayer.globule = globule;\n\n\n if (onclose && !videoPlayer.onclose) {\n videoPlayer.onclose = onclose\n }\n\n // clear the playlist...\n if (videoPlayer.playlist)\n videoPlayer.playlist.clear()\n\n // Remove the watching if there is one.\n let watching = document.querySelector(\"globular-media-watching\")\n if (watching) {\n watching.parentNode.removeChild(watching)\n }\n\n\n // play a given title.\n if (path.endsWith(\"video.m3u\") || path.startsWith(\"#EXTM3U\")) {\n videoPlayer.loadPlaylist(path, globule)\n } else {\n // make sure the player is not show before the video is loaded.\n videoPlayer.play(path, globule)\n\n }\n\n document.body.appendChild(videoPlayer)\n\n return videoPlayer\n}\n\nfunction getSubtitlesFiles(globule, path, callback) {\n let subtitlesPath = path.substr(0, path.lastIndexOf(\".\"))\n subtitlesPath = subtitlesPath.substring(0, subtitlesPath.lastIndexOf(\"/\") + 1) + \".hidden\" + subtitlesPath.substring(subtitlesPath.lastIndexOf(\"/\")) + \"/__subtitles__\"\n FileController.readDir(subtitlesPath, callback, err => { console.log(err); }, globule)\n}\n\n\n\n/**\n * Sample empty component\n */\nexport class VideoPlayer extends HTMLElement {\n // attributes.\n\n // Create the applicaiton view.\n constructor() {\n super()\n // Set the shadow dom.\n this.attachShadow({ mode: 'open' });\n this.titleInfo = null; // movie, serie title, video\n this.playlist = new PlayList(); // The playlist...\n this.globule = null;\n this.skipPresiousBtn = null;\n this.stopBtn = null;\n this.skipNextBtn = null;\n this.loopBtn = null;\n this.shuffleBtn = null;\n this.trackInfo = null;\n this.loop = true;\n this.shuffle = false;\n this.resume = false;\n this.isMinimized = false;\n this.onMinimize = null;\n\n // Innitialisation of the layout.\n this.shadowRoot.innerHTML = `\n \n \n no select\n \n \n \n \n
\n \n \n \n
\n \n \n `\n\n this.container = this.shadowRoot.querySelector(\"#video-container\")\n this.container.onminimize = () => {\n this.isMinimized = true\n }\n\n // hide the watching menu if the user is not logged in.\n if (localStorage.getItem(\"user_token\") == null) {\n this.shadowRoot.querySelector(\"globular-watching-menu\").remove()\n } else {\n this.watchingMenu = this.shadowRoot.querySelector(\"globular-watching-menu\")\n this.watchingMenu.addEventListener(\"open-media-watching\", (evt) => {\n evt.stopPropagation()\n evt.detail.mediaWatching.slot = \"watching\"\n evt.detail.mediaWatching.style.zIndex = \"1000\"\n this.appendChild(evt.detail.mediaWatching)\n })\n }\n\n this.container.setBackGroundColor(\"black\")\n\n // override the minimize function...\n this.container.getPreview = this.getPreview.bind(this);\n this.container.onclose = () => {\n this.close()\n }\n\n this.container.onclick = (evt) => {\n evt.stopPropagation()\n // not interfere with plyr click event... do not remove this line.\n }\n\n this.content = this.shadowRoot.querySelector(\"#content\")\n this.header = this.shadowRoot.querySelector(\".header\")\n\n this.shadowRoot.querySelector(\"#title-info-button\").onclick = (evt) => {\n evt.stopPropagation()\n if (this.titleInfo) {\n if (this.titleInfo.clearActorsList != undefined) {\n this.showTitleInfo(this.titleInfo)\n } else {\n this.showVideoInfo(this.titleInfo)\n }\n } else {\n displayError(\"no title information found\")\n }\n\n }\n\n // give the focus to the input.\n this.video = document.createElement(\"video\")\n this.video.id = \"player\"\n this.video.autoplay = true\n this.video.controls = true\n this.video.playsinline = true\n\n this.onclose = null\n this.onplay = null\n\n this.path = \"\"\n this.appendChild(this.video)\n this.container.style.height = \"auto\"\n this.container.name = \"video_player\"\n\n // listen to dialog-resized event to resize the video player.\n this.container.addEventListener(\"dialog-resized\", (evt) => {\n this.resize(evt.detail.width)\n })\n\n // Add an event listener for the 'playing' event\n this.video.addEventListener('playing', () => {\n // Get the video dimensions\n if (this.resized == false) {\n let width = this.video.videoWidth\n if (this.playlist.count() > 1) {\n width += 350 // min width of the playlist...\n }\n\n this.resize(width)\n }\n\n });\n\n // Set the video to full screen when orientation change.\n window.addEventListener(\"orientationchange\", (event) => {\n var orientation = (screen.orientation || {}).type || screen.mozOrientation || screen.msOrientation;\n\n if ([\"landscape-primary\", \"landscape-secondary\"].indexOf(orientation) != -1) {\n this.becomeFullscreen();\n }\n\n else if (orientation === undefined) {\n console.log(\"The orientation API isn't supported in this browser :(\");\n }\n });\n\n\n // Plyr give a nice visual to the video player.\n // TODO set the preview and maybe quality bitrate if possible...\n // So here I will get the vtt file if one exist...\n this.player = new Plyr(this.video, {\n captions: {\n active: true,\n update: true,// THAT line solved my problem\n }\n });\n\n // toggle full screen\n this.container.addEventListener(\"dialog-maximized\", (evt) => {\n var type = this.player.media.tagName.toLowerCase(),\n toggle = document.querySelector(\"[data-plyr='fullscreen']\");\n\n if (type === \"video\" && toggle) {\n toggle.addEventListener(\"click\", this.player.toggleFullscreen, false);\n }\n toggle.click()\n })\n\n // exit full screen\n this.player.on(\"exitfullscreen\", (evt) => {\n this.container.restore()\n })\n let updateUrl = (url) => {\n let token = localStorage.getItem(\"user_token\");\n let url_ = url.split(\"?token=\")[0];\n let updatedUrl = url_ + \"?token=\" + token;\n\n if (url === updatedUrl) {\n return;\n }\n\n // Get the current playback time\n let currentTime = this.video.currentTime;\n this.video.src = updatedUrl\n this.video.currentTime = currentTime\n\n // Set the video to play if it was playing before the change\n if (this.video.playing) {\n this.video.play();\n }\n };\n\n this.player.on('seeked', () => {\n updateUrl(this.player.source)\n });\n\n this.player.on('play', () => {\n updateUrl(this.player.source)\n });\n\n // https://www.tomsguide.com/how-to/how-to-set-chrome-flags\n // you must set enable-experimental-web-platform-features to true\n // chrome://flags/ \n this.video.onloadeddata = () => {\n\n //ApplicationView.resume()\n // Options for the observer (which mutations to observe)\n var config = {\n attributes: true,\n subtree: true\n };\n\n getSubtitlesFiles(this.globule, this.path, subtitles_files => {\n\n let globule = this.globule\n let url = getUrl(globule)\n\n subtitles_files.getFilesList().forEach(f => {\n let track = document.createElement(\"track\")\n // \n track.kind = \"captions\"\n\n // ex. View_From_A_Blue_Moon_Trailer-576p.fr.vtt\n let language_id = f.getName().split(\".\")[f.getName().split.length - 1]\n const languageNames = new Intl.DisplayNames([language_id], {\n type: 'language'\n });\n\n track.label = languageNames.of(language_id)// todo set the true language.\n\n let filePath = f.getPath();\n\n // Encode the path to make it URL-safe\n filePath = filePath.split('/').map(encodeURIComponent).join('/');\n\n let fileUrl = filePath.startsWith(\"/\")\n ? `${url}${filePath}`\n : `${url}/${filePath}`;\n\n track.src = fileUrl;\n\n track.srclang = language_id\n\n this.player.media.appendChild(track)\n\n })\n })\n\n if (this.video.audioTracks) {\n\n // This will set the video langual...\n if (this.video.audioTracks.length > 1) {\n let audioTrackSelect = this.shadowRoot.querySelector(\"#audio-track-selector\")\n audioTrackSelect.style.display = \"block\"\n for (let i = 0; i < this.video.audioTracks.length; i++) {\n let track = this.video.audioTracks[i]\n let option = document.createElement(\"option\")\n option.innerHTML = track.language\n option.value = i\n audioTrackSelect.appendChild(option)\n }\n\n // Set the language with the browser\n let browser_language = navigator.language || navigator.userLanguage; // IE <= 10\n for (let i = 0; i < this.video.audioTracks.length; i++) {\n let track_language = this.video.audioTracks[i].language.substr(0, 2);\n\n // +++ Set the enabled audio track language +++\n if (track_language) {\n // When the track language matches the browser language, then enable that audio track\n if (track_language === browser_language) {\n // When one audio track is enabled, others are automatically disabled\n this.video.audioTracks[i].enabled = true;\n audioTrackSelect.value = i\n this.player.rewind(0)\n } else {\n this.video.audioTracks[i].enabled = false;\n }\n }\n }\n\n audioTrackSelect.onchange = (evt) => {\n evt.stopPropagation()\n if (this.player) {\n\n var selectElement = evt.target;\n var value = selectElement.value;\n for (let i = 0; i < this.video.audioTracks.length; i++) {\n let track = this.video.audioTracks[i]\n if (i == value) {\n track.enabled = true\n\n this.player.forward(0)\n } else {\n track.enabled = false\n }\n }\n }\n }\n // Options for the observer (which mutations to observe)\n var config = {\n attributes: true,\n subtree: true\n };\n\n\n\n }\n }\n }\n\n // HLS for streamming...\n this.hls = null;\n\n }\n\n connectedCallback() {\n\n let plyrVideo = this.querySelector(\".plyr--video\")\n\n plyrVideo.style.backgroundColor = \"black\"\n\n if (this.skipPresiousBtn) {\n return\n }\n\n\n this.container.hideVerticalResize()\n\n\n // hide plyr function not us\n let items = this.querySelectorAll(\".plyr__controls__item\")\n for (var i = 0; i < items.length; i++) {\n if (items[i].getAttribute(\"data-plyr\") == \"pip\") {\n items[i].style.display = \"none\"\n }\n }\n\n let controls = this.querySelector(\".plyr__controls\")\n controls.style.flexWrap = \"wrap\"\n controls.style.justifyContent = \"flex-start\"\n\n\n\n // add additional button for the playlist...\n let html = `\n \n \n \n \n \n \n \n `\n let range = document.createRange()\n controls.appendChild(range.createContextualFragment(html))\n\n // Now the buttons actions.\n this.skipPresiousBtn = this.querySelector(\"#skip-previous\")\n this.stopBtn = this.querySelector(\"#stop\")\n this.skipNextBtn = this.querySelector(\"#skip-next\")\n this.loopBtn = this.querySelector(\"#repeat\")\n this.shuffleBtn = this.querySelector(\"#shuffle\")\n this.trackInfo = this.querySelector(\"#track-info\")\n\n\n this.playlist.slot = \"playlist\"\n this.appendChild(this.playlist)\n\n this.playlist.videoPlayer = this\n /*this.playlist.style.height = \"calc(100% - 42px);\"*/\n\n\n if (this.playlist.count() <= 1) {\n this.hidePlaylist()\n }\n\n\n fireResize()\n\n\n // hide the playlist...\n this.playlist.addEventListener(\"hide\", (evt) => {\n // I will get the plyr video and use it offsetWidth to set the width of the container.\n let w = plyrVideo.offsetWidth\n this.container.setWidth(w)\n })\n\n // show the playlist...\n this.playlist.addEventListener(\"show\", (evt) => {\n // set back to the original size...\n let dimension = localStorage.getItem(\"__video_player_dimension__\")\n if (dimension) {\n dimension = JSON.parse(dimension)\n this.container.setWidth(dimension.width)\n this.container.setHeight(dimension.height)\n }\n })\n\n\n this.playPauseBtn = controls.children[0]\n this.playPauseBtn.addEventListener(\"click\", evt => {\n\n let state = evt.target.getAttribute(\"aria-label\")\n if (state == \"Play\") {\n this.playlist.resumePlaying()\n } else if (state == \"Pause\") {\n this.playlist.pausePlaying()\n }\n\n }, true)\n\n plyrVideo.addEventListener(\"click\", evt => {\n let state = this.playPauseBtn.getAttribute(\"aria-label\")\n if (state == \"Play\") {\n this.playlist.resumePlaying()\n } else if (state == \"Pause\") {\n this.playlist.pausePlaying()\n }\n\n }, true)\n\n this.loop = false\n if (localStorage.getItem(\"video_loop\")) {\n this.loop = localStorage.getItem(\"video_loop\") == \"true\"\n }\n\n if (this.loop) {\n this.loopBtn.style.fill = \"white\"\n } else {\n this.loopBtn.style.fill = \"gray\"\n }\n\n this.shuffle = false\n if (localStorage.getItem(\"video_shuffle\")) {\n this.shuffle = localStorage.getItem(\"video_shuffle\") == \"true\"\n }\n\n if (this.shuffle) {\n this.shuffleBtn.style.fill = \"white\"\n } else {\n this.shuffleBtn.style.fill = \"#424242\"\n }\n\n // stop the audio player....\n this.stopBtn.onclick = () => {\n this.stop(false)\n if (this.playlist) {\n this.playlist.stop()\n }\n this.trackInfo.innerHTML = \"\"\n }\n\n this.skipNextBtn.onclick = () => {\n this.stop(false)\n if (this.playlist) {\n this.playlist.playNext()\n }\n }\n\n this.skipPresiousBtn.onclick = () => {\n this.stop(false)\n if (this.playlist) {\n this.playlist.playPrevious()\n }\n }\n\n // loop...\n this.loopBtn.onclick = () => {\n\n if (this.loop) {\n localStorage.setItem(\"video_loop\", \"false\");\n this.loop = false;\n } else {\n localStorage.setItem(\"video_loop\", \"true\")\n this.loop = true;\n }\n\n if (this.loop) {\n this.loopBtn.style.fill = \"white\"\n } else {\n this.loopBtn.style.fill = \"#424242\"\n }\n\n }\n\n this.shuffleBtn.onclick = () => {\n if (this.shuffle) {\n localStorage.setItem(\"video_shuffle\", \"false\");\n this.shuffle = false;\n } else {\n localStorage.setItem(\"video_shuffle\", \"true\")\n this.shuffle = true;\n }\n\n if (this.shuffle) {\n this.shuffleBtn.style.fill = \"white\"\n } else {\n this.shuffleBtn.style.fill = \"#424242\"\n }\n\n this.playlist.orderItems()\n }\n\n // try to load the tracks...\n this.loadTracks(\"playlist\")\n\n }\n\n loadTracks(name) {\n\n // the source is not empty\n if (this.hasAttribute(\"src\")) {\n // here i will read the file and play it...\n fetch(this.getAttribute(\"src\")).then(response => {\n return response.text() // or return response.json() if json\n }).then(data => {\n // here I will parse the url and get the protocol and address part...\n if (this.hasAttribute(\"src\")) {\n const url = new URL(this.getAttribute(\"src\"));\n const address = `${url.protocol}//${url.host}`;\n this.loadPlaylist(data, Backend.getGlobule(address))\n }\n }).catch(err => {\n console.log(err)\n })\n } else {\n // I will retreive the globular-video-track element...\n let tracks = this.querySelectorAll(\"globular-video-track\")\n\n if (tracks.length > 0) {\n let videos = []\n let video_playList = \"#EXTM3U\\n\"\n video_playList += \"#PLAYLIST: \" + name + \"\\n\\n\"\n\n let setTrackDuration = (v, callback) => {\n this.video.src = v.getUrl()\n this.video.onloadedmetadata = () => {\n v.setDuration(this.video.duration)\n callback(v)\n };\n }\n\n let getVideo = (index) => {\n if (index >= tracks.length) {\n this.video.onloadedmetadata = null\n this.video.src = \"\"\n this.loadPlaylist(video_playList, null)\n return\n }\n\n let track = tracks[index]\n track.getVideo(video => {\n setTrackDuration(video, (v) => {\n video_playList += `#EXTINF:${v.getDuration()}, ${v.getTitle()}, tvg-id=\"${v.getId()}\"\\n`\n video_playList += v.getUrl() + \"\\n\\n\"\n videos.push(v)\n getVideo(index + 1)\n track.remove()\n })\n\n }, error => {\n getVideo(index + 1)\n })\n }\n\n // get the video from the track...\n getVideo(0);\n\n }\n }\n }\n\n loadPlaylist(path, globule) {\n\n this.playlist.clear()\n this.playlist.load(path, globule, this, () => {\n // show playlist after loading it... (hide it if number of item is less than one)\n this.showPlaylist()\n\n setTimeout(fireResize(), 500)\n })\n\n }\n\n showPlaylist() {\n if (this.playlist.count() > 1) {\n this.playlist.style.display = \"block\"\n let playlistButtons = this.querySelectorAll(\"iron-icon\")\n for (var i = 0; i < playlistButtons.length; i++) {\n playlistButtons[i].style.display = \"block\"\n }\n } else {\n this.hidePlaylist()\n }\n }\n\n hidePlaylist() {\n\n this.playlist.style.display = \"none\"\n this.shuffleBtn.style.display = \"none\"\n this.skipNextBtn.style.display = \"none\"\n this.skipPresiousBtn.style.display = \"none\"\n this.stopBtn.style.display = \"none\"\n this.loopBtn.style.display = \"none\"\n this.trackInfo.style.display = \"none\"\n }\n\n setTarckInfo(index, total) {\n // display the position on the list...\n console.log(\"set \" + index + \" of \" + total)\n }\n\n showVideoInfo(video) {\n let uuid = video.getId()\n let html = `\n \n \n \n `\n let videoInfoBox = document.getElementById(\"video-info-box\")\n\n if (videoInfoBox == undefined) {\n let range = document.createRange()\n document.body.appendChild(range.createContextualFragment(html))\n videoInfoBox = document.getElementById(\"video-info-box\")\n let parent = videoInfoBox.parentNode\n if (parent) {\n parent.style.position = \"fixed\"\n parent.style.top = \"75px\"\n parent.style.left = \"50%\"\n parent.style.transform = \"translate(-50%)\"\n videoInfoBox.onclose = () => {\n parent.parentNode.removeChild(parent)\n }\n }\n }\n videoInfoBox.setVideosInformation([video])\n }\n\n showTitleInfo(title) {\n let uuid = title.getId()\n let html = `\n \n \n \n `\n let titleInfoBox = document.getElementById(\"title-info-box\")\n if (titleInfoBox == undefined) {\n let range = document.createRange()\n document.body.appendChild(range.createContextualFragment(html))\n titleInfoBox = document.getElementById(\"title-info-box\")\n let parent = document.getElementById(\"video-info-box-dialog-\" + uuid)\n parent.style.position = \"fixed\"\n parent.style.top = \"75px\"\n parent.style.left = \"50%\"\n parent.style.transform = \"translate(-50%)\"\n\n titleInfoBox.onclose = () => {\n parent.parentNode.removeChild(parent)\n }\n }\n titleInfoBox.setTitlesInformation([title])\n }\n\n getPreview() {\n\n if (this.preview) {\n this.preview.style.backgroundImage = `url('${this.titleInfo.getPoster().getContenturl()}')`;\n this.preview._title.innerHTML = this.titleInfo.getDescription()\n return this.preview\n }\n\n let preview = document.createElement(\"div\");\n preview.style.position = \"absolute\";\n preview.style.top = \"0px\";\n preview.style.left = \"0px\";\n preview.style.width = \"100%\";\n preview.style.height = \"100%\";\n preview.style.display = \"flex\";\n preview.style.alignItems = \"center\";\n preview.style.flexDirection = \"column\";\n preview.style.justifyContent = \"flex-start\";\n preview.style.userSelect = \"none\";\n\n preview.style.background = \"rgba(0, 0, 0, .5)\"\n\n // set the title...\n if (this.titleInfo != null) {\n // set the backgpound image...\n preview.style.backgroundImage = `url('${this.titleInfo.getPoster().getContenturl()}')`;\n\n preview.style.backgroundSize = \"cover\" /* This makes the image cover the entire container */\n preview.style.backgroundPosition = \"center center\" /* This centers the image */\n preview.style.backgroundBlendMode = \"overlay\"\n preview.style.backgroundRepeat = \"no-repeat\"\n //preview.style.backgroundPosition= \"-50px 20px\"\n\n // set the title...\n let title = document.createElement(\"span\")\n title.style.color = \"white\"\n title.style.padding = \"2px\"\n title.style.fontSize = \".8rem\"\n title.style.fontWeight = \"500\"\n title.style.overflow = \"hidden\"\n title.style.textOverflow = \"ellipsis\"\n title.style.position = \"absolute\"\n title.style.bottom = \"0px\"\n\n title.innerHTML = this.titleInfo.getDescription()\n preview._title = title\n\n preview.appendChild(title)\n\n let buttons = document.createElement(\"div\")\n buttons.style.display = \"flex\"\n buttons.style.justifyContent = \"center\"\n buttons.style.alignItems = \"center\"\n buttons.style.flexDirection = \"row\"\n buttons.style.flexGrow = \"1\"\n\n let skipPreviousBtn = document.createElement(\"iron-icon\")\n skipPreviousBtn.style.fill = \"white\"\n skipPreviousBtn.style.height = \"32px\"\n skipPreviousBtn.style.width = \"32px\"\n skipPreviousBtn.icon = \"av:skip-previous\"\n skipPreviousBtn.onclick = (evt) => {\n evt.stopPropagation()\n this.skipPresiousBtn.click()\n let event = new CustomEvent('refresh-preview', { bubbles: true, composed: true });\n this.container.dispatchEvent(event)\n }\n\n buttons.appendChild(skipPreviousBtn)\n\n let playBtn = document.createElement(\"iron-icon\")\n playBtn.style.fill = \"white\"\n playBtn.style.height = \"48px\"\n playBtn.style.width = \"48px\"\n playBtn.icon = \"av:play-circle-outline\"\n\n buttons.appendChild(playBtn)\n\n let pauseBtn = document.createElement(\"iron-icon\")\n pauseBtn.style.fill = \"white\"\n pauseBtn.style.height = \"48px\"\n pauseBtn.style.width = \"48px\"\n pauseBtn.style.display = \"none\"\n pauseBtn.icon = \"av:pause-circle-outline\"\n\n pauseBtn.onclick = (evt) => {\n evt.stopPropagation()\n this.playPauseBtn.click()\n playBtn.style.display = \"block\"\n pauseBtn.style.display = \"none\"\n }\n\n\n let state = this.playPauseBtn.getAttribute(\"aria-label\")\n if (state == \"Play\") {\n playBtn.style.display = \"block\"\n pauseBtn.style.display = \"none\"\n } else if (state == \"Pause\") {\n pauseBtn.style.display = \"block\"\n playBtn.style.display = \"none\"\n }\n\n playBtn.onclick = (evt) => {\n evt.stopPropagation()\n this.playPauseBtn.click()\n pauseBtn.style.display = \"block\"\n playBtn.style.display = \"none\"\n }\n\n buttons.appendChild(pauseBtn)\n\n let skipNextBtn = document.createElement(\"iron-icon\")\n skipNextBtn.style.fill = \"white\"\n skipNextBtn.style.height = \"32px\"\n skipNextBtn.style.width = \"32px\"\n skipNextBtn.icon = \"av:skip-next\"\n skipNextBtn.onclick = (evt) => {\n evt.stopPropagation()\n this.skipNextBtn.click()\n let event = new CustomEvent('refresh-preview', { bubbles: true, composed: true });\n this.container.dispatchEvent(event)\n }\n\n buttons.appendChild(skipNextBtn)\n\n let trackInfo = document.createElement(\"span\")\n trackInfo.style.color = \"white\"\n trackInfo.style.fontSize = \"1rem\"\n trackInfo.style.fontWeight = \"500\"\n trackInfo.style.whiteSpace = \"nowrap\"\n trackInfo.style.overflow = \"hidden\"\n trackInfo.style.textOverflow = \"ellipsis\"\n trackInfo.style.marginBottom = \"16px\"\n trackInfo.innerHTML = this.trackInfo.innerHTML\n\n /*\n let currentTimeSpan = document.createElement(\"span\")\n currentTimeSpan.style.color = \"white\"\n currentTimeSpan.style.fontSize = \".75rem\"\n currentTimeSpan.style.fontWeight = \"500\"\n currentTimeSpan.style.whiteSpace = \"nowrap\"\n currentTimeSpan.style.overflow = \"hidden\"\n currentTimeSpan.style.textOverflow = \"ellipsis\"\n currentTimeSpan.innerHTML = this.currentTimeSpan.innerHTML + \" / \" + this.totalTimeSpan.innerHTML\n \n\n setInterval(() => {\n currentTimeSpan.innerHTML = this.currentTimeSpan.innerHTML + \" / \" + this.totalTimeSpan.innerHTML\n }, 1000)\n */\n\n preview.appendChild(buttons)\n preview.appendChild(trackInfo)\n //preview.appendChild(currentTimeSpan)\n\n this.preview = preview\n\n }\n\n\n\n return preview;\n }\n\n play(path, globule, titleInfo) {\n\n if (titleInfo) {\n if (titleInfo.globule == null) {\n titleInfo.globule = globule\n }\n this.titleInfo = titleInfo\n }\n\n let url = path;\n let token = localStorage.getItem(\"user_token\")\n\n if (!url.startsWith(\"http\")) {\n url = getUrl(globule)\n\n path.split(\"/\").forEach(item => {\n item = item.trim()\n if (item.length > 0) {\n url += \"/\" + encodeURIComponent(item)\n }\n })\n\n if (token) {\n url += \"?token=\" + token\n if (globule.application) {\n url += \"&application=\" + globule.application\n }\n }else if(globule.application){\n url += \"?application=\" + globule.application\n }\n\n\n } else {\n var parser = document.createElement('a');\n if (token) {\n url += \"?token=\" + token\n if (globule.application) {\n url += \"&application=\" + globule.application\n }\n }else if(globule.application){\n url += \"?application=\" + globule.application\n }\n\n parser.href = url\n path = decodeURIComponent(parser.pathname)\n }\n\n\n if (this.path == path) {\n this.resume = true;\n this.video.play()\n return\n } else {\n // keep track of the current path\n this.path = path\n this.resume = false;\n }\n\n // validate url access.\n fetch(url, { method: \"HEAD\" })\n .then((response) => {\n if (response.status == 401) {\n displayError(`unable to read the file ${path} Check your access privilege`)\n this.close()\n return\n } else if (response.status == 200) {\n if (File.hasLocal) {\n FileController.hasLocal(path, exists => {\n if (exists) {\n // local-media\n this.play_(path, globule, true, token)\n } else {\n this.play_(path, globule, false, token)\n }\n })\n } else {\n this.play_(path, globule, false, token)\n }\n } else {\n throw new Error(response.status)\n }\n })\n .catch((error) => {\n displayError(\"fail to read url \" + url + \"with error \" + error)\n if (this.parentNode) {\n this.parentNode.removeChild(this)\n }\n });\n\n\n\n }\n\n play_(path, globule, local = false, token) {\n\n this.resized = false\n\n // replace separator...\n path = path.split(\"\\\\\").join(\"/\")\n\n this.style.zIndex = 100\n\n // Set the title...\n let thumbnailPath = path.replace(\"/playlist.m3u8\", \"\")\n this.shadowRoot.querySelector(\"#title-span\").innerHTML = thumbnailPath.substring(thumbnailPath.lastIndexOf(\"/\") + 1)\n if (!this.isMinimized) {\n this.shadowRoot.querySelector(\"#video-container\").style.display = \"\"\n }\n\n // So Here I will try to get the title or the video info...\n if (!globule) {\n globule = Backend.globular\n }\n\n // Now I will test if imdb info are allready asscociated.\n let getTitleInfo = (path, callback) => {\n // The title info is already set...\n if (this.titleInfo) {\n if (this.titleInfo.getName != undefined) {\n this.titleInfo.isVideo = false;\n callback([this.titleInfo])\n return\n } else {\n this.titleInfo.isVideo = true;\n callback([])\n return\n }\n }\n\n let rqst = new GetFileTitlesRequest\n rqst.setIndexpath(globule.config.DataPath + \"/search/titles\")\n rqst.setFilepath(path)\n\n globule.titleService.getFileTitles(rqst, { domain: globule.domain, token: token })\n .then(rsp => {\n rsp.getTitles().getTitlesList().forEach(t => t.globule = globule)\n callback(rsp.getTitles().getTitlesList())\n })\n }\n\n\n let getVideoInfo = (path, callback) => {\n if (this.titleInfo) {\n if (this.titleInfo.getDescription != undefined) {\n this.titleInfo.isVideo = true;\n callback([this.titleInfo])\n return\n } else {\n this.titleInfo.isVideo = false;\n callback([])\n return\n }\n }\n\n let rqst = new GetFileVideosRequest\n rqst.setIndexpath(globule.config.DataPath + \"/search/videos\")\n rqst.setFilepath(path)\n\n globule.titleService.getFileVideos(rqst, { domain: globule.domain, token: token })\n .then(rsp => {\n rsp.getVideos().getVideosList().forEach(v => v.globule = globule)\n callback(rsp.getVideos().getVideosList())\n })\n }\n\n getVideoInfo(path, videos => {\n if (videos.length > 0) {\n let video = videos.pop()\n this.titleInfo = video\n this.titleInfo.isVideo = true\n this.shadowRoot.querySelector(\"#title-span\").innerHTML = video.getDescription().replace(\"\", \" \")\n // Start where the video was stop last time... TODO \n if (this.titleInfo) {\n if (localStorage.getItem(this.titleInfo.getId())) {\n let currentTime = parseFloat(localStorage.getItem(this.titleInfo.getId()))\n this.video.currentTime = currentTime\n }\n\n if (localStorage.getItem(\"user_token\")) {\n TitleController.getWacthingTitle(this.titleInfo.getId(), (watching) => {\n this.video.currentTime = watching.currentTime\n\n }, (err) => { /** nothing to do here */ })\n }\n\n\n this.video.onended = () => {\n this.resume = false;\n if (this.titleInfo)\n localStorage.removeItem(this.titleInfo.getId())\n\n if (this.playlist.items.length > 1) {\n this.playlist.playNext()\n } else if (this.loop) {\n if (File.hasLocal) {\n FileController.hasLocal(this.path, exists => {\n if (this.titleInfo) {\n this.play(this.path, this.titleInfo.globule)\n } else {\n this.play(this.path)\n }\n })\n } else {\n if (this.titleInfo)\n this.play(this.path, this.titleInfo.globule)\n else\n this.play(this.path)\n }\n } else {\n this.stop()\n }\n }\n\n if (this.playlist.style.display == \"none\") {\n Backend.publish(\"play_video_player_evt_\", { _id: this.titleInfo.getId(), domain: this.titleInfo.globule.domain, isVideo: this.titleInfo.isVideo, currentTime: this.video.currentTime, date: new Date() }, true)\n }\n }\n\n }\n })\n\n getTitleInfo(path, tittles => {\n if (tittles.length > 0) {\n let title = tittles.pop()\n this.titleInfo = title\n this.titleInfo.isVideo = false\n this.shadowRoot.querySelector(\"#title-span\").innerHTML = title.getName()\n if (title.getYear()) {\n this.shadowRoot.querySelector(\"#title-span\").innerHTML += \" (\" + title.getYear() + \") \"\n }\n if (title.getType() == \"TVEpisode\") {\n this.shadowRoot.querySelector(\"#title-span\").innerHTML += \" S\" + title.getSeason() + \"E\" + title.getEpisode()\n }\n\n if (this.onplay != null) {\n this.onplay(this.player, title)\n }\n\n // Start where the video was stop last time... TODO \n if (this.titleInfo) {\n if (localStorage.getItem(this.titleInfo.getId())) {\n let currentTime = parseFloat(localStorage.getItem(this.titleInfo.getId()))\n this.video.currentTime = currentTime\n }\n Backend.publish(\"play_video_player_evt_\", { _id: this.titleInfo.getId(), isVideo: this.titleInfo.isVideo, currentTime: this.video.currentTime, domain: this.titleInfo.globule.domain, duration: this.video.duration, date: new Date() }, true)\n }\n }\n })\n\n // Only HLS and MP4 are allow by the video player so if is not one it's the other...\n if (thumbnailPath.lastIndexOf(\".mp4\") != -1 || thumbnailPath.lastIndexOf(\".MP4\") != -1 || thumbnailPath.lastIndexOf(\".mkv\") != -1) {\n thumbnailPath = thumbnailPath.substring(0, thumbnailPath.lastIndexOf(\".\"))\n } else if (!path.endsWith(\"/playlist.m3u8\")) {\n path += \"/playlist.m3u8\"\n } else {\n if (!(path.endsWith(\"/playlist.m3u8\") || path.endsWith(\".mp4\") || path.endsWith(\".webm\") || path.endsWith(\".mkv\"))) {\n displayError(\"the file cannot be play by the video player\")\n return\n }\n }\n\n thumbnailPath = thumbnailPath.substring(0, thumbnailPath.lastIndexOf(\"/\") + 1) + \".hidden\" + thumbnailPath.substring(thumbnailPath.lastIndexOf(\"/\")) + \"/__timeline__/thumbnails.vtt\"\n\n // set the complete url.\n // Get image from the globule.\n let url = getUrl(globule)\n\n let fileUrl = thumbnailPath.split('/').map(encodeURIComponent).join('/');\n\n\n if (fileUrl.startsWith(\"/\")) {\n fileUrl = url + fileUrl\n } else {\n fileUrl = url + \"/\" + fileUrl\n }\n\n this.player.setPreviewThumbnails({ enabled: \"true\", src: fileUrl })\n\n if (!this.video.paused && this.video.currentSrc.endsWith(path)) {\n // Do nothing...\n return\n } else if (this.video.paused && this.video.currentSrc.endsWith(path)) {\n // Resume the video...\n this.video.play()\n return\n }\n\n path.split(\"/\").forEach(item => {\n item = item.trim()\n if (item.length > 0) {\n url += \"/\" + encodeURIComponent(item)\n }\n })\n\n if (token) {\n url += \"?token=\" + token\n if (globule.application) {\n url += \"&application=\" + globule.application\n }\n }else if(globule.application){\n url += \"?application=\" + globule.application\n }\n\n if (local) {\n url = \"local-media://\" + path\n }\n\n // Set the path and play.\n this.video.src = url\n\n if (path.endsWith(\".m3u8\")) {\n if (Hls.isSupported()) {\n this.hls = new Hls(\n {\n xhrSetup: xhr => {\n if(token){\n xhr.setRequestHeader('token', token)\n }\n }\n }\n );\n\n this.hls.attachMedia(this.video);\n\n this.hls.on(Hls.Events.MEDIA_ATTACHED, () => {\n this.hls.loadSource(url);\n this.hls.on(Hls.Events.MANIFEST_PARSED, (event, data) => {\n this.video.play();\n });\n });\n }\n }\n\n\n\n }\n\n becomeFullscreen() {\n if (this.video.requestFullscreen) {\n this.video.requestFullscreen();\n } else if (this.video.mozRequestFullScreen) {\n /* Firefox */\n this.video.mozRequestFullScreen();\n } else if (this.video.webkitRequestFullscreen) {\n /* Chrome, Safari and Opera */\n this.video.webkitRequestFullscreen();\n } else if (this.video.msRequestFullscreen) {\n /* IE/Edge */\n this.video.msRequestFullscreen();\n }\n }\n\n /**\n * Close the player...\n */\n close() {\n\n // save the dimension...\n\n let plyr = this.querySelector(\".plyr--video\")\n let width = plyr.offsetWidth + 355;\n\n let maxHeigth = screen.height - 100\n if (this.container.getHeight() > maxHeigth) {\n this.container.setHeight(maxHeigth)\n }\n\n localStorage.setItem(\"__video_player_dimension__\", JSON.stringify({ width: width, height: this.container.getHeight() }))\n\n this.stop()\n\n this.parentElement.removeChild(this)\n if (this.onclose) {\n this.onclose()\n }\n }\n\n /**\n * Stop the video.\n */\n stop(save = true) {\n this.video.pause();\n this.resized = false\n\n // keep the current video location\n if (this.titleInfo != null) {\n\n // Stop the video\n if (this.video.duration != this.video.currentTime && save) {\n Backend.publish(\"stop_video_player_evt_\", { _id: this.titleInfo.getId(), domain: this.titleInfo.globule.address, isVideo: this.titleInfo.isVideo, currentTime: this.video.currentTime, date: new Date() }, true)\n } else {\n Backend.publish(\"remove_video_player_evt_\", { _id: this.titleInfo.getId(), domain: this.titleInfo.globule.address, isVideo: this.titleInfo.isVideo, currentTime: this.video.currentTime, date: new Date() }, true)\n }\n // keep video info in the local storage...\n localStorage.setItem(this.titleInfo.getId(), this.video.currentTime)\n }\n }\n\n /**\n * Resize the video player.\n */\n resize(containerWidth) {\n // Exit early if the video player is minimized\n if (this.isMinimized) {\n return;\n }\n\n this.resized = true\n let videoWidth = this.video.videoWidth\n\n\n // Ensure the video has valid dimensions\n if (videoWidth > 0 && this.container.getWidth() < containerWidth - this.playlist.offsetWidth) {\n if (videoWidth > screen.width) {\n containerWidth = screen.width * .9\n } else if (containerWidth > videoWidth) {\n containerWidth = videoWidth\n }\n }\n\n if (this.playlist.count() > 1) {\n let width = containerWidth - this.playlist.offsetWidth\n if (this.video.videoWidth > 0 && width > this.video.videoWidth) {\n this.container.setWidth(this.video.videoWidth + this.playlist.offsetWidth)\n return\n }\n } else if (this.video.videoWidth > 0 && containerWidth > this.video.videoWidth) {\n this.container.setWidth(this.video.videoWidth)\n return\n }\n\n this.container.setWidth(containerWidth)\n this.container.setHeight(\"auto\")\n\n\n }\n\n}\n\ncustomElements.define('globular-video-player', VideoPlayer)\n\n\n/**\n * The video track description.\n */\nexport class VideoTrack extends HTMLElement {\n constructor() {\n super();\n this.attachShadow({ mode: 'open' });\n this.shadowRoot.innerHTML = ``;\n }\n\n // return the video object.\n getVideo(callback, errorCallback) {\n\n // test if the video is set...\n if (!this.hasAttribute(\"src\") || !this.hasAttribute(\"id\")) {\n errorCallback(\"no video source\")\n return\n }\n\n\n // Create a new video object.\n let video = new Video()\n\n video.setUrl(this.getAttribute(\"src\"))\n\n // try to get the video info from the attributes...\n if (this.hasAttribute(\"id\")) {\n video.setId(this.getAttribute(\"id\"))\n }\n\n if (this.hasAttribute(\"title\")) {\n video.setTitle(this.getAttribute(\"title\"))\n }\n\n\n if (this.hasAttribute(\"description\")) {\n video.setDescription(this.getAttribute(\"description\"))\n }\n\n if (this.hasAttribute(\"genres\")) {\n let genres = this.getAttribute(\"genres\").split(\",\")\n video.setGenresList(genres)\n }\n\n if (this.hasAttribute(\"poster\")) {\n let poster = new Poster\n poster.setUrl(this.getAttribute(\"poster\"))\n poster.setContenturl(this.getAttribute(\"poster\"))\n video.setPoster(poster)\n }\n\n // here from the video url I will try to get the video info...\n let url = new URL(video.getUrl())\n\n // get the globule...\n let globule = Backend.getGlobule(url.origin)\n\n // set the globule...\n video.globule = globule\n\n // get the video info...\n TitleController.getVideoInfo(video.getId(), video => {\n video.setUrl(this.getAttribute(\"src\"))\n video.globule = globule\n callback(video)\n }, err => {\n callback(video) // return the video initialized with attributes.\n }, globule)\n\n }\n}\n\ncustomElements.define('globular-video-track', VideoTrack);\n\n","import \"@polymer/paper-icon-button/paper-icon-button.js\";\nimport \"@polymer/paper-radio-button/paper-radio-button.js\";\nimport \"@polymer/paper-radio-group/paper-radio-group.js\";\nimport { Backend, displayMessage, displayError, generatePeerToken, getUrl } from \"../backend/backend\";\nimport getUuidByString from \"uuid-by-string\";\nimport { GrapesEditor } from \"./grapeJS/grape\";\nimport { createDir, deleteDir, deleteFile, readDir, uploadFiles } from \"globular-web-client/api\";\nimport { html as beautify } from 'js-beautify';\nimport prettify from 'html-prettify'\nimport { MoveRequest } from \"globular-web-client/file/file_pb\";\nimport { FileExplorer } from \"./fileExplorer/fileExplorer\";\nimport { DeleteDocumentRequest, IndexJsonObjectRequest, SearchDocumentsRequest } from \"globular-web-client/search/search_pb\";\n\n\n\n/**\n * Returns an HTML string for a 404 error page\n * @param {string} url The URL that was not found\n * @returns {string} The HTML string for the 404 error page\n * @example\n * getErrorPage('/pages/home') // Returns an HTML string for a 404 error page\n */\nfunction getErrorPage(url) {\n return `\n\n\n \n \n \n 404 - Page Not Found\n \n \n \n\n\n
\n error_outline\n
404
\n \n
Oops! Looks like you're lost. The page you are looking for doesn’t exist.
\n
${url}
\n
\n\n\n`;\n}\n\nclass GlobularWebpageManager extends HTMLElement {\n\n constructor() {\n \n super();\n this.attachShadow({ mode: 'open' });\n this.serverDirectory = ''; // The directory on the server where pages are saved\n this.router = null;\n this.pages = {};\n this.menuItems = [];\n this.index = \"\"; // The default page\n this.editMode = false;\n\n this.shadowRoot.innerHTML = `\n \n
\n
\n \n \n \n \n
\n
\n `;\n\n if (localStorage.getItem(\"user_token\") == null) {\n this.shadowRoot.querySelector(\"#actions\").style.display = \"none\";\n }\n\n let createPageBtn = this.shadowRoot.querySelector('#create-page');\n createPageBtn.addEventListener('click', () => {\n this.createPageOrDir(this.root);\n });\n\n let openRootFolderBtn = this.shadowRoot.querySelector('#open-root-folder');\n openRootFolderBtn.addEventListener('click', () => {\n let fileExplorer = new FileExplorer();\n document.body.appendChild(fileExplorer);\n fileExplorer.publishSetDirEvent(this.root)\n });\n\n let editModeBtn = this.shadowRoot.querySelector('#edit-pages')\n editModeBtn.setAttribute('edit-mode', 'false');\n\n let refreshPagesBtn = this.shadowRoot.querySelector('#refresh-pages');\n refreshPagesBtn.addEventListener('click', () => {\n this.loadPages(this.root)\n });\n\n\n editModeBtn.addEventListener('click', () => {\n let editMode = editModeBtn.getAttribute('edit-mode')=='false'? false: true;\n editMode = !editMode;\n editModeBtn.setAttribute('edit-mode', editMode? 'true': 'false');\n this.setEditMode(editMode);\n });\n\n // backend-ready custom event listener\n document.addEventListener('backend-ready', (e) => {\n Backend.eventHub.subscribe(\"login_success_\", uuid => { }, (account) => {\n this.shadowRoot.querySelector(\"#actions\").style.display = \"flex\";\n }, true);\n\n // Listen for the search result click event\n // Listen for the search result click event\n document.addEventListener(\"webpage-search-result-clicked\", (e) => {\n const { link, elementId, query } = e.detail;\n\n let searchResult = document.querySelector(\"globular-search-results\");\n if (searchResult) {\n searchResult.style.display = \"none\";\n }\n\n let dynamicWebpage = document.querySelector(\"globular-dynamic-page\");\n if (dynamicWebpage) {\n dynamicWebpage.style.display = \"\";\n }\n\n // Set the page content and ensure the iframe loads\n this.setPage(link, () => {\n let iframe = dynamicWebpage.iframe;\n if (!iframe) return;\n\n // Function to execute when the iframe content is ready\n function processIframeContent(iframeDoc) {\n setTimeout(() => {\n let targetElement = iframeDoc.getElementById(elementId);\n if (targetElement) {\n let position = targetElement.getBoundingClientRect();\n\n // Get the iframe's content div\n let appContentDiv = document.querySelector('div[slot=\"app-content\"]');\n\n // Scroll smoothly to the element\n appContentDiv.scrollTo({\n top: position.top + iframe.contentWindow.scrollY - (65 + 10),\n behavior: \"smooth\",\n });\n\n // Remove any previously highlighted text\n let highlighted = iframeDoc.getElementsByClassName(\"highlighted\");\n Array.from(highlighted).forEach((el) => {\n if (el.lowlight) el.lowlight();\n });\n\n // **Query Parsing to Extract Words to Highlight**\n let searchTerms = query\n .split(/\\s+/) // Split by whitespace\n .filter(term => !term.startsWith(\"-\")) // Exclude negative terms\n .map(term => term.trim()) // Remove any extra spaces\n .filter(term => term.length > 0); // Remove empty terms\n\n if (searchTerms.length === 0) return;\n\n // **Highlight Matching Words**\n let regex = new RegExp(`\\\\b(${searchTerms.join(\"|\")})\\\\b`, \"gi\");\n let text = targetElement.innerHTML;\n\n text = text.replace(/(|<\\/mark>)/gim, \"\"); // Remove existing highlights\n targetElement.innerHTML = text.replace(regex, '$&');\n targetElement.classList.add(\"highlighted\");\n\n // **Function to Remove Highlight When Needed**\n targetElement.lowlight = () => {\n targetElement.innerHTML = text;\n targetElement.classList.remove(\"highlighted\");\n delete targetElement.lowlight;\n };\n }\n }, 500); // Delay to allow page load transition\n }\n\n // Ensure iframe is fully loaded before trying to access its content\n iframe.addEventListener(\"load\", () => {\n let iframeDoc = iframe.contentDocument || iframe.contentWindow.document;\n if (!iframeDoc) return;\n\n // If the document is already loaded, execute immediately\n if (iframeDoc.readyState === \"complete\") {\n console.log(\"Iframe document is already loaded.\");\n processIframeContent(iframeDoc);\n } else {\n // Wait for DOMContentLoaded inside the iframe\n iframeDoc.addEventListener(\"DOMContentLoaded\", () => {\n console.log(\"DOMContentLoaded fired inside iframe.\");\n processIframeContent(iframeDoc);\n });\n }\n });\n\n // In case the iframe is already loaded (if setPage was too fast)\n let iframeDoc = iframe.contentDocument || iframe.contentWindow.document;\n if (iframeDoc && iframeDoc.readyState === \"complete\") {\n console.log(\"Iframe document was already fully loaded.\");\n processIframeContent(iframeDoc);\n }\n });\n });\n\n });\n\n\n // add listener for items-change-event event\n document.addEventListener('items-change-event', (e) => {\n\n\n let setIndexs = (parent) => {\n\n let parentPage = this.getPage(parent.getAttribute('path'));\n\n // from the parent I will set order of ist menu items children\n let menuItems = parent.querySelectorAll(':scope > globular-sidebar-menu-item');\n let index = 0;\n\n\n menuItems.forEach((menuItem) => {\n let pageLnk = menuItem.getAttribute('path');\n if (pageLnk) {\n let name = menuItem.getAttribute('name');\n let attributes = parentPage.attributes[name];\n if (attributes) {\n\n // I will set the index of the menu item\n attributes.index = index;\n menuItem.setAttribute('index', index);\n\n index++;\n } else {\n console.log(\"No attributes for \", name)\n }\n } else {\n menuItem.setAttribute('index', menuItems.length - 1);\n }\n });\n }\n\n let menuItem = e.detail.menuItem;\n let menuItemLnk = menuItem.getAttribute('link');\n let parentLnk = menuItemLnk.substring(0, menuItemLnk.lastIndexOf(\"/\"));\n let parent = document.querySelector(`[link=\"${parentLnk}\"]`);\n if (parent == null && parentLnk == \"\") {\n parent = document.querySelector(`globular-sidebar-menu`);\n }\n\n\n // so the parent has changed\n if (menuItem.parentElement !== parent) {\n\n // the attributes of the parent has changed\n let oldParentPage = this.getPage(parent.getAttribute('link'));\n let newParentPage = this.getPage(menuItem.parentElement.getAttribute('link'));\n\n // I will move the attributes from the old parent to the new parent\n newParentPage.attributes[menuItem.getAttribute('name')] = oldParentPage.attributes[menuItem.getAttribute('name')];\n delete oldParentPage.attributes[menuItem.getAttribute('name')];\n\n // I will set the new link of the page\n let link = menuItem.parentElement.getAttribute('link') + \"/\" + menuItem.getAttribute('name');\n menuItem.setAttribute('link', link);\n\n // set the path of the page or directory to move\n let oldPagePath = oldParentPage.path + \"/\" + menuItem.getAttribute('name');\n\n let moveFileRqst = new MoveRequest();\n moveFileRqst.setPath(newParentPage.path);\n moveFileRqst.setFilesList([oldPagePath]);\n\n Backend.globular.fileService.move(moveFileRqst, { token: localStorage.getItem(\"user_token\") })\n .then(() => {\n // I will set the index of the menu items\n setIndexs(parent);\n setIndexs(menuItem.parentElement);\n // I will save the attributes of the parent's\n this.saveAttributes(oldParentPage.path);\n this.saveAttributes(newParentPage.path);\n })\n .catch(err => displayError(err, 3000));\n\n } else {\n // I will set the index of the menu items\n setIndexs(parent);\n this.saveAttributes(parent.getAttribute('path'));\n }\n\n\n });\n }\n\n connectedCallback() {\n\n if (this.hasAttribute('root')) {\n this.root = this.getAttribute('root');\n }\n\n if (this.hasAttribute('index')) {\n this.index = this.getAttribute('index');\n }\n\n }\n\n setEditMode(editMode) {\n\n // set the edit mode\n this.editMode = editMode;\n\n // set back the edit mode\n let editModeBtn = this.shadowRoot.querySelector('#edit-pages');\n let createPageBtn = this.shadowRoot.querySelector('#create-page');\n let openRootFolderBtn = this.shadowRoot.querySelector('#open-root-folder');\n let refreshPagesBtn = this.shadowRoot.querySelector('#refresh-pages');\n\n \n if (!editMode) {\n\n createPageBtn.style.display = \"none\";\n openRootFolderBtn.style.display = \"none\";\n editModeBtn.style.color = \"\";\n this.menuItems.forEach((menuItem) => {\n menuItem.removeAttribute('edit-mode');\n });\n } else {\n createPageBtn.style.display = \"flex\";\n openRootFolderBtn.style.display = \"flex\";\n refreshPagesBtn.style.display = \"flex\";\n \n editModeBtn.style.color = \"var(--paper-green-500)\";\n this.menuItems.forEach((menuItem) => {\n menuItem.setAttribute('edit-mode', 'true');\n });\n }\n }\n\n /**\n * Load the pages from the server and display them in the sidebar menu\n * \n * \n * \n * \n * \n * \n * \n * \n */\n async loadPages(folder = this.root, link = \"\") {\n\n // I will take the first \n this.base = this.router.getAttribute('base'); // the base application url.\n\n // Clear the pages object\n this.pages = {};\n for (let menuItem of this.menuItems) {\n menuItem.remove();\n }\n\n const createMenuItem = (name, path, link, isDirectory, attributes = {}) => {\n\n const menuItem = document.createElement('globular-sidebar-menu-item');\n const icon = attributes.icon || (isDirectory ? 'fa fa-folder' : 'fa fa-file');\n const alias = attributes.alias || name.replace('.html', '');\n const title = attributes.title || alias;\n const index = attributes.index || -1;\n\n // Set the attributes of the menu item\n menuItem.setAttribute('icon', icon);\n menuItem.setAttribute('routerLink', link);\n menuItem.setAttribute('text', alias);\n menuItem.setAttribute('title', title);\n menuItem.setAttribute('index', index);\n menuItem.setAttribute('link', link); // Store the link in a custom attribute\n menuItem.setAttribute('path', path); // Store the path in a custom attribute\n menuItem.setAttribute('name', name); // Store the name in a custom attribute\n\n this.menuItems.push(menuItem);\n\n if (!isDirectory) {\n // Add the config button\n const configButton = document.createElement('iron-icon');\n configButton.setAttribute('icon', 'settings');\n configButton.setAttribute('title', 'Configure');\n\n configButton.addEventListener('click', (evt) => {\n evt.stopPropagation();\n let parent = path.substring(0, path.lastIndexOf(\"/\"));\n this.configurePage(name, parent, link);\n });\n\n configButton.slot = 'actions';\n menuItem.appendChild(configButton);\n\n // Add edit and delete buttons for files\n const editButton = document.createElement('iron-icon');\n editButton.setAttribute('icon', 'editor:mode-edit');\n editButton.setAttribute('title', 'Edit');\n\n editButton.addEventListener('click', (evt) => {\n evt.stopPropagation();\n this.editPage(path);\n });\n\n editButton.slot = 'actions';\n menuItem.appendChild(editButton);\n\n const deleteButton = document.createElement('iron-icon');\n deleteButton.setAttribute('icon', 'delete');\n deleteButton.setAttribute('title', 'Delete');\n\n deleteButton.addEventListener('click', (evt) => {\n evt.stopPropagation();\n this.deletePage(path, link);\n this.deletePageIndex(path); // I will delete the page index\n });\n\n deleteButton.slot = 'actions';\n menuItem.appendChild(deleteButton);\n } else {\n // Add the config button\n const configButton = document.createElement('iron-icon');\n configButton.setAttribute('icon', 'settings');\n configButton.setAttribute('title', 'Configure');\n\n configButton.addEventListener('click', (evt) => {\n evt.stopPropagation();\n\n let parent = path.substring(0, path.lastIndexOf(\"/\"));\n let name = path.split(\"/\").pop();\n let attributes = this.getPage(parent).attributes[name] || {};\n\n this.configureDir(attributes, path.substring(0, path.lastIndexOf(\"/\")), name);\n });\n\n configButton.slot = 'actions';\n menuItem.appendChild(configButton);\n\n // Add create button for directories\n const createButton = document.createElement('iron-icon');\n createButton.setAttribute('icon', 'add');\n createButton.setAttribute('title', 'Create');\n\n createButton.addEventListener('click', (evt) => {\n evt.stopPropagation();\n this.createPageOrDir(path);\n });\n\n createButton.slot = 'actions';\n menuItem.appendChild(createButton);\n\n // Add the delete button\n const deleteButton = document.createElement('iron-icon');\n deleteButton.setAttribute('icon', 'delete');\n deleteButton.setAttribute('title', 'Delete');\n\n deleteButton.addEventListener('click', (evt) => {\n evt.stopPropagation();\n this.deleteDir(name, path, link);\n });\n\n deleteButton.slot = 'actions';\n menuItem.appendChild(deleteButton);\n }\n\n return menuItem;\n };\n\n const addMenuItems = async (dir, parentLnk, parentElement) => {\n\n const files = dir.getFilesList();\n const webpages = files.filter(file => {\n const mime = file.getMime();\n return mime === \"text/html\" || mime.startsWith(\"text/html\") || mime == \"inode/directory\"; // Add your desired MIME types here\n });\n\n // attribute of a file or a directory are stored in a file called infos.json in the directory of the file (or directory)\n const attributes = await this.fetchAttributes(dir.getPath());\n\n let alias = \"\"\n if (dir.getName() != this.base) {\n alias = attributes.alias || dir.getName().replace('.html', '');\n parentLnk += \"/\" + alias;\n }\n\n // Store the page information\n this.pages[dir.getPath()] = { name: folder, path: dir.getPath(), link: parentLnk, isDirectory: true, file: dir, attributes: attributes };\n\n // Now I will order the files by the index attribute\n webpages.sort((a, b) => {\n if (attributes[a.getName()] && attributes[b.getName()]) {\n let aIndex = attributes[a.getName()].index || 0;\n let bIndex = attributes[b.getName()].index || 0;\n return aIndex - bIndex;\n } else {\n return 0;\n }\n });\n\n for (const file of webpages) {\n const isDirectory = file.getIsDir();\n const name = file.getName();\n const path = file.getPath();\n\n // Skip hidden files and directories\n if(name.startsWith(\"_\")) {\n continue;\n }\n\n // Fetch the parent directory...\n const subAttributes = attributes[name] || {};\n\n // Here I will set default attributes\n if (!subAttributes.alias) {\n subAttributes.alias = name.replace('.html', '');\n }\n\n if (!subAttributes.icon) {\n subAttributes.icon = isDirectory ? 'fa fa-folder' : 'fa fa-file';\n }\n\n if (!subAttributes.index) {\n subAttributes.index = -1;\n }\n\n // Get the alias from the attributes or use the file name\n const alias = subAttributes.alias || name.replace('.html', '')\n\n\n // Store the attributes\n attributes[name] = subAttributes;\n\n // Remove the webroot part\n let link = parentLnk + \"/\" + alias;\n\n // Create the menu item\n const menuItem = createMenuItem(name, path, link, isDirectory, subAttributes);\n\n\n // Store the page information\n this.pages[path] = { name, path, link, isDirectory, file, attributes: subAttributes };\n\n // Recursively add sub-items if it's a directory\n if (isDirectory) {\n await addMenuItems(file, parentLnk, menuItem);\n }\n\n // Add click event listener to navigate to the page\n if (!isDirectory) {\n menuItem.addEventListener('click', (event) => {\n event.preventDefault(); // Prevent default navigation\n event.stopPropagation(); // Stop event propagation\n if (this.router) {\n this.router.navigate([link]); // Trigger Angular routing\n }\n this.setPage(link); // Set the page content\n });\n }\n parentElement.appendChild(menuItem);\n }\n };\n\n // Wrap the `readDir` function in a Promise\n return new Promise((resolve, reject) => {\n readDir(\n Backend.globule,\n this.root,\n true, // Recursive\n () => {\n /** nothing here... */\n },\n (err) => {\n console.error(\"Failed to load pages:\", err);\n reject(err); // Reject the Promise on error\n },\n async (dir) => {\n this.pages = {};\n\n // Clear existing menu items if necessary\n while (this.firstChild) {\n this.removeChild(this.firstChild);\n }\n\n if (this.hasAttribute('root')) {\n\n this.root = this.getAttribute('root');\n\n this.parentElement.setAttribute('link', '');\n this.parentElement.setAttribute('path', dir.getPath());\n\n await addMenuItems(dir, ``, this.parentElement);\n\n } else {\n // Create the root menu item\n const rootMenuItem = createMenuItem(folder, dir.getPath(), ``, true, {});\n\n // Generate sub-menu items recursively\n await addMenuItems(dir, ``, rootMenuItem);\n\n // Append the root menu item to the parent container\n this.appendChild(rootMenuItem);\n }\n\n if (this.base != undefined) {\n link = link.replace(this.base + \"/\", \"\");\n }\n\n if (this.getPage(link) == undefined) {\n link = this.index;\n }\n\n if (this.index != undefined) {\n let lnk = this.decodeRepeatedly(link);\n\n this.router.navigate([lnk]); // Trigger Angular routing\n this.setPage(lnk); // Set the page content\n }\n\n\n this.setEditMode(this.editMode);\n\n resolve(); // Resolve the Promise when done\n },\n 64,\n 64,\n \"\" // No token\n );\n });\n }\n\n decodeRepeatedly(input) {\n let decoded = input;\n let previous;\n\n // Keep decoding until the value stops changing\n do {\n previous = decoded;\n decoded = decodeURIComponent(decoded);\n } while (previous !== decoded);\n\n return decoded;\n }\n\n // Get the page object from the path or link\n getPage(path) {\n if (this.pages[path] != undefined) {\n return this.pages[path];\n }\n\n for (let key in this.pages) {\n if (this.pages[key].link == path) {\n return this.pages[key];\n }\n }\n\n return this.pages[path];\n }\n\n // Set the page content\n setPage(lnk, callback) {\n\n // here I will format the link to be change %20 to space and so on\n lnk = this.decodeRepeatedly(lnk);\n\n let page = this.getPage(lnk);\n\n if (page) {\n if (page.isDirectory) {\n return;\n }\n\n this.getPageContent(page.path, (htmlContent) => {\n\n // Create a custom event and pass the page content as the event's detail\n const pageSelectEvent = new CustomEvent('pageSelected', {\n detail: {\n path: page.path,\n content: htmlContent\n }\n });\n\n // Dispatch the event on the document (or a specific element)\n document.dispatchEvent(pageSelectEvent);\n\n // Execute the callback function if provided\n if (callback) {\n callback();\n }\n\n }, err => {\n const pageSelectEvent = new CustomEvent('pageSelected', {\n detail: {\n path: page.path,\n content: getErrorPage(err)\n }\n });\n document.dispatchEvent(pageSelectEvent);\n });\n } else {\n console.error(`Page not found for route: ${lnk}`);\n const pageSelectEvent = new CustomEvent('pageSelected', {\n detail: {\n path: lnk,\n content: getErrorPage(`Page not found for route: ${lnk}`)\n }\n });\n document.dispatchEvent(pageSelectEvent);\n }\n }\n\n editPageAttributes(attributes, dirPath, fileName) {\n // Display the dialog for editing webpage attributes\n let toast = displayMessage(`\n \n
\n `, 60 * 1000);\n\n // Set focus to the alias input field\n setTimeout(() => {\n toast.toastElement.querySelector('#alias-input').focus();\n }, 100);\n\n // Handle Cancel button\n let cancelBtn = toast.toastElement.querySelector(\"#cancel-button\");\n cancelBtn.onclick = () => {\n toast.hideToast();\n };\n\n // Handle Save button\n let saveBtn = toast.toastElement.querySelector(\"#save-button\");\n saveBtn.onclick = () => {\n\n attributes.alias = toast.toastElement.querySelector(\"#alias-input\").value.trim();\n attributes.icon = toast.toastElement.querySelector(\"#icon-input\").value.trim();\n attributes.title = toast.toastElement.querySelector(\"#title-input\").value.trim();\n\n\n // Validate inputs\n if (!attributes.alias || !attributes.icon) {\n displayMessage(`Please provide valid inputs for all fields!`, 3000);\n return;\n }\n\n // Prepare updated attributes\n\n\n // Save attributes to the server\n this.saveAttributes(dirPath, fileName, attributes);\n\n toast.hideToast();\n };\n }\n\n async fetchAttributes(dirPath) {\n\n // Here I will test if the dir that contain infos.json has '_' prefix if is the case I will not fetch the attributes\n if (dirPath.split(\"/\").pop().startsWith(\"_\")) {\n return {};\n }\n\n /** */\n const attributesPath = `${dirPath}/infos.json`;\n try {\n let url = getUrl(Backend.globular) + attributesPath;\n url += \"?application=\" + this.base;\n\n const response = await fetch(url, { cache: 'no-store' });\n const json = await response.json();\n return json;\n } catch (err) {\n console.error(`Failed to fetch attributes from ${attributesPath}:`, err);\n }\n\n return {}; // Return an empty object if the file doesn't exist or fails to load\n\n };\n\n async saveAttributes(dirPath, name, attributes) {\n\n generatePeerToken(Backend.globular, (token) => {\n // Get the page attributes\n let attributes_ = this.getPage(dirPath).attributes || {};\n attributes_ = attributes_ || {};\n\n if (name) {\n if (attributes == null) {\n delete attributes_[name];\n } else {\n attributes_[name] = attributes;\n }\n }\n\n // Save the attributes to the server\n const blob = new Blob([JSON.stringify(attributes_)], { type: 'application/json' });\n const file = new File([blob], 'infos.json', { type: 'application/json', lastModified: Date.now() });\n\n // Upload the file to the server\n uploadFiles(Backend.globular, token, dirPath, [file], () => {\n // displayMessage(`Attributes saved successfully!`, 3000);\n let path = dirPath + \"/\" + name;\n\n console.log(\"path\", path);\n let menuItem = document.querySelector(`[path=\"${path}\"]`);\n if (menuItem) {\n let attributes = this.getPage(dirPath).attributes[name];\n if (attributes) {\n menuItem.setAttribute('icon', attributes.icon);\n menuItem.setAttribute('title', attributes.title);\n if (attributes.alias != undefined) {\n menuItem.setAttribute('alias', attributes.alias);\n // I will set the path of the page\n let existingLink = menuItem.getAttribute('link');\n let newLink = existingLink.substring(0, existingLink.lastIndexOf(\"/\")) + \"/\" + attributes.alias;\n menuItem.setAttribute('link', newLink);\n }\n }\n }\n }, (err) => {\n displayMessage(`Failed to save attributes: ${err}`, 3000);\n });\n });\n }\n\n configurePage(name, path) {\n\n let attributes = this.getPage(path).attributes[name] || {};\n this.editPageAttributes(attributes, path, name);\n }\n\n configureDir(attributes, dirPath, fileName) {\n this.editPageAttributes(attributes, dirPath, fileName);\n }\n\n /**\n * Returns the content of a page from the server\n * @param {*} path \n * @param {*} callback \n * @param {*} errorCallback \n */\n getPageContent(path, callback, errorCallback) {\n // I will try to get the application folder from the address\n async function fetchHTMLContent(url) {\n const response = await fetch(url, { cache: 'no-store' });\n const htmlText = await response.text();\n return htmlText; // Returns the HTML content as plain text\n }\n\n let url = getUrl(Backend.globular) + path;\n\n let application = window.location.pathname.split('/')[1];\n let token = localStorage.getItem(\"user_token\") || \"\";\n url += \"?token=\" + token;\n url += \"&application=\" + application;\n\n fetchHTMLContent(url).then((htmlContent) => {\n callback(htmlContent);\n }).catch((err) => {\n console.error(`Failed to fetch page content from ${url}:`, err);\n });\n }\n\n createPageOrDir(dirPath) {\n // Display the dialog for creating a new page or subdirectory\n let toast = displayMessage(`\n \n
\n
You're about to create a new page or directory in ${dirPath}
\n \n \n Page\n Directory\n \n \n
\n Ok\n Cancel\n
\n
\n `, 60 * 1000);\n\n setTimeout(() => {\n toast.toastElement.querySelector('#name-input').focus(); // Set focus to the input\n }, 100);\n\n let cancelBtn = toast.toastElement.querySelector(\"#cancel-button\");\n cancelBtn.onclick = () => {\n toast.hideToast();\n };\n\n let okBtn = toast.toastElement.querySelector(\"#ok-button\");\n okBtn.onclick = () => {\n let isPage = toast.toastElement.querySelector(\"#page-option\").checked;\n let nameInput = toast.toastElement.querySelector(\"#name-input\").value.trim();\n\n if (!nameInput) {\n displayMessage(`Please enter a valid name!`, 3000);\n return;\n }\n\n let fullPath = `${dirPath}/${nameInput}`;\n\n if (isPage) {\n this.createPage(fullPath);\n } else {\n this.createSubdir(fullPath);\n }\n\n toast.hideToast();\n };\n }\n\n createHtmlFile(fileName, htmlContent) {\n // Create a Blob from the HTML content\n const blob = new Blob([htmlContent], { type: 'text/html' });\n\n // Create a File object using the Blob\n const file = new File([blob], fileName, { type: 'text/html', lastModified: Date.now() });\n\n return file; // Return the File object\n }\n\n // Function to create a page\n createPage(path) {\n\n generatePeerToken(Backend.globular, (token) => {\n // Replace with actual implementation for creating a page\n // I will create an empty local file\n\n let fileName = path.split(\"/\").pop();\n path = path.substring(0, path.lastIndexOf(\"/\"));\n\n // Usage example\n const files = []; // Array to store files\n const htmlContent = `\n\n\n\n \n \n Example Page\n\n\n \n\n\n`;\n\n if (!fileName.endsWith(\".html\")) {\n fileName += \".html\";\n }\n\n const newFile = this.createHtmlFile(fileName, htmlContent);\n\n // Append the new file to the files array\n files.push(newFile);\n\n uploadFiles(Backend.globular, token, path, files, () => {\n displayMessage(`Page ${path + \"/\" + fileName} created successfully!`, 3000);\n\n const link = (path + \"/\" + fileName).replace(this.root, \"\")\n .replace('.html', '');\n\n // Store the page information\n this.pages[path + \"/\" + fileName] = { name: fileName, path: path + \"/\" + fileName, isDirectory: false, file: newFile, link: link, attributes: {} };\n\n this.loadPages(this.root, link);\n },\n (err) => {\n displayMessage(err, 3000);\n });\n });\n }\n\n // Function to create a subdirectory\n createSubdir(path) {\n\n generatePeerToken(Backend.globular, (token) => {\n // Replace with actual implementation for creating a directory\n let name = path.split(\"/\").pop();\n path = path.substring(0, path.lastIndexOf(\"/\"));\n\n createDir(Backend.globular, path, name, () => {\n displayMessage(`Directory ${path} created successfully!`, 3000);\n\n // Dispatch a directory creation event\n const dirCreateEvent = new CustomEvent('directoryCreated', {\n detail: {\n path: path\n }\n });\n document.dispatchEvent(dirCreateEvent);\n this.loadPages(this.root);\n\n }, (err) => {\n displayMessage(err, 3000);\n }, token);\n });\n }\n\n\n editPage(path) {\n\n // Open the page in the editor\n let id = \"_code_edtior_\" + getUuidByString(path);\n let webPageEditor = document.getElementById(id);\n if (webPageEditor == null) {\n\n\n let webPageEditor = new GrapesEditor();\n webPageEditor.id = id;\n webPageEditor.title = path;\n\n // Set the page content\n this.getPageContent(path, (htmlContent) => {\n const parser = new DOMParser();\n const doc = parser.parseFromString(htmlContent, 'text/html');\n\n // stet the style id.\n let style = doc.querySelector('style');\n if (style == null) {\n style = document.createElement('style');\n doc.head.appendChild(style);\n }\n if (style.id != 'page-style') {\n style.id = 'page-style';\n }\n\n // Set the page style and script\n webPageEditor.onload = async (iframeDoc) => {\n\n // I will load external styles\n const styles = Array.from(doc.head.querySelectorAll('link[rel=\"stylesheet\"]'));\n\n for (const style of styles) {\n // remove the style from the document\n const link = iframeDoc.createElement('link');\n link.rel = 'stylesheet';\n // Set the href attribute\n const href = style.getAttribute('href');\n if (href) {\n link.href = href; // Absolute path\n // Append the link to the iframe's head\n iframeDoc.head.appendChild(link);\n }\n }\n\n // Select all scripts in the document\n const scripts = Array.from(doc.head.querySelectorAll('script'));\n\n // Function to load a single script and return a promise\n const loadScript = (script) => {\n return new Promise((resolve, reject) => {\n const scriptElement = iframeDoc.createElement('script');\n scriptElement.onload = () => {\n resolve(); // Resolve the promise when the script is loaded\n };\n scriptElement.onerror = (e) => {\n console.error('Script failed to load:', scriptElement.src || 'inline script', e);\n reject(e); // Reject the promise if the script fails to load\n };\n\n // Set the script content or src\n const src = script.getAttribute('src');\n if (src) {\n scriptElement.src = src; // External script\n } else {\n scriptElement.innerHTML = script.innerHTML; // Inline script\n }\n\n // Append the script to the iframe's head\n iframeDoc.head.appendChild(scriptElement);\n\n });\n };\n\n // Iterate through all scripts and load them sequentially\n for (const script of scripts) {\n try {\n await loadScript(script); // Wait for each script to load\n } catch (error) {\n console.error('Error loading script:', error);\n }\n }\n\n };\n\n // Remove the style from the document\n doc.head.removeChild(style);\n\n // intialize the page style\n let pageStyle = style.innerHTML\n\n // Load content into the Grapes.js editor\n webPageEditor.onready = () => {\n webPageEditor.loadContent(doc.body.innerHTML, pageStyle || '');\n }\n\n // Handle save event\n // Include js-beautify in your project or import it if using a module bundler\n webPageEditor.onsave = (html, css, scripts, links) => {\n\n // First I will remove existing styles and scripts from the document\n let scripts_ = doc.head.querySelectorAll('script');\n for (let i = 0; i < scripts_.length; i++) {\n doc.head.removeChild(scripts_[i]);\n }\n\n // Remove existing links from the document\n let links_ = doc.head.querySelectorAll('link');\n for (let i = 0; i < links_.length; i++) {\n doc.head.removeChild(links_[i]);\n }\n\n // Extract the full section\n const headContent = doc.head.innerHTML;\n\n let scriptsContent = '';\n for (const script of scripts) {\n scriptsContent += script.outerHTML;\n }\n\n let linksContent = '';\n for (const link of links) {\n linksContent += link.outerHTML;\n }\n\n // Regenerate the HTML content with proper structure\n let regeneratedHtmlContent = `\n\n\n \n ${headContent}\n ${linksContent}\n \n ${scriptsContent}\n \n ${html}\n\n`;\n\n // Remove excessive empty lines from the regenerated content\n regeneratedHtmlContent = prettify(regeneratedHtmlContent);\n\n // Prettify the HTML before saving\n const prettyHtml = beautify(regeneratedHtmlContent, {\n indent_size: 2,\n space_in_empty_paren: false,\n wrap_line_length: 80,\n });\n\n // Save the prettified HTML\n generatePeerToken(Backend.globular, (token) => {\n this.saveHtmlPage(\n Backend.globular,\n token,\n path,\n prettyHtml,\n () => {\n displayMessage(`\n \n \n Page ${path} saved successfully!\n `, 3000);\n\n const pageSelectEvent = new CustomEvent('pageSelected', {\n detail: {\n path: path,\n content: prettyHtml,\n },\n });\n document.dispatchEvent(pageSelectEvent);\n\n let name = path.split(\"/\").pop();\n this.saveSearchIndex(path, name, prettyHtml,\n () => {\n /** nothing to do here... */\n }, err => {\n displayError(err, 3000);\n });\n\n\n\n },\n (error) => {\n console.error(\"Failed to upload HTML page:\", error);\n },\n (progress) => {\n console.log(\"Upload progress:\", progress.loaded / progress.total * 100 + \"%\");\n },\n (abort) => {\n console.warn(\"Upload aborted:\", abort);\n }\n );\n }, (err) => {\n console.error(err);\n });\n };\n\n document.body.appendChild(webPageEditor);\n\n // Create a new div element and that will trigger the initialization of the editor\n let div = document.createElement('div');\n div.slot = \"editor\";\n webPageEditor.appendChild(div);\n\n }, (err) => {\n console.error(err);\n });\n };\n\n }\n\n deletePage(path, link) {\n\n // So here I will get the information from imdb and propose to assciate it with the file.\n let toast = displayMessage(`\n \n
\n
Your about to delete webpage
\n
${path}
\n
Is that what you want to do?
\n \n
\n Ok\n Cancel\n
\n
\n `, 60 * 1000)\n\n\n let cancelBtn = toast.toastElement.querySelector(\"#cancel-button\")\n cancelBtn.onclick = () => {\n toast.hideToast();\n }\n\n let okBtn = toast.toastElement.querySelector(\"#ok-button\")\n okBtn.onclick = () => {\n\n // Delete the file\n generatePeerToken(Backend.globular, (token) => {\n deleteFile(Backend.globular, path, () => {\n\n displayMessage(`\n \n \n Page ${path} deleted successfully!\n `, 3000);\n\n\n\n // Remove the page from the menu\n let menuItem = document.querySelector(`[path=\"${path}\"]`);\n if (menuItem) {\n menuItem.remove();\n }\n\n // Dispatch a page delete event\n /*const pageDeleteEvent = new CustomEvent('pageError', {\n detail: {\n path: path,\n content: getErrorPage(err)\n }\n });\n\n document.dispatchEvent(pageDeleteEvent);*/\n\n let parent = path.substring(0, path.lastIndexOf(\"/\"));\n let fileName = path.split(\"/\").pop();\n this.saveAttributes(parent, fileName, null);\n\n }, (err) => { displayMessage(err) }, token);\n });\n\n toast.hideToast();\n }\n\n\n }\n\n deleteDir(name, path, link) {\n\n // So here I will get the information from imdb and propose to assciate it with the file.\n let toast = displayMessage(`\n \n
\n
Your about to delete folder containing webpages at path
\n
${path}
\n
Is that what you want to do?
\n \n
\n Ok\n Cancel\n
\n
\n `, 60 * 1000)\n\n let cancelBtn = toast.toastElement.querySelector(\"#cancel-button\")\n cancelBtn.onclick = () => {\n toast.hideToast();\n }\n\n let okBtn = toast.toastElement.querySelector(\"#ok-button\")\n okBtn.onclick = () => {\n // Delete the file\n generatePeerToken(Backend.globular, (token) => {\n deleteDir(Backend.globular, path, () => {\n\n displayMessage(`\n \n \n Page ${path} deleted successfully!\n `, 3000);\n\n\n // Remove the page from the menu\n let menuItem = document.querySelector(`[path=\"${path}\"]`);\n if (menuItem) {\n menuItem.remove();\n }\n\n // Dispatch a page delete event\n /*const pageDeleteEvent = new CustomEvent('pageError', {\n detail: {\n path: path,\n content: getErrorPage(err)\n }\n });\n \n document.dispatchEvent(pageDeleteEvent);*/\n\n let parent = path.substring(0, path.lastIndexOf(\"/\"));\n\n // get existing attributes\n this.saveAttributes(parent, name, null);\n\n }, (err) => { displayMessage(err) }, token);\n });\n\n toast.hideToast();\n }\n }\n\n /**\n * Ensures all textual elements have unique IDs, then saves the HTML page.\n * @param {Object} globule - The Globular instance.\n * @param {string} token - The authentication token.\n * @param {string} path - The file path where the HTML should be saved.\n * @param {string} htmlContent - The HTML content to be saved.\n * @param {Function} completeHandler - Callback when the save is complete.\n * @param {Function} errorHandler - Callback for handling errors.\n * @param {Function} progressHandler - Callback for tracking progress.\n * @param {Function} abortHandler - Callback for handling aborts.\n */\n async saveHtmlPage(globule, token, path, htmlContent, completeHandler, errorHandler, progressHandler, abortHandler) {\n\n // Parse the HTML content into a DOM structure\n const parser = new DOMParser();\n const doc = parser.parseFromString(htmlContent, \"text/html\");\n\n let idCounter = 0;\n\n /**\n * Generates a unique ID.\n */\n function generateUniqueId() {\n return `element-${Date.now()}-${idCounter++}`;\n }\n\n /**\n * Ensures all textual elements have an ID.\n * Textual elements include paragraphs, headings, and spans.\n */\n function ensureIdsForTextElements() {\n const elements = doc.querySelectorAll(\"p, h1, h2, h3, h4, h5, h6, span, div\");\n elements.forEach(el => {\n if (!el.id.trim()) {\n el.id = generateUniqueId();\n }\n });\n }\n\n ensureIdsForTextElements();\n\n // Serialize the modified HTML back to a string\n const updatedHtmlContent = `\\n${doc.documentElement.outerHTML}`;\n\n // so here I will genereate a curtom event to update html content...\n const pageUpdateEvent = new CustomEvent('pageUpdate', {\n detail: {\n path: path,\n content: updatedHtmlContent\n }\n });\n\n // Dispatch the event on the document (or a specific element)\n document.dispatchEvent(pageUpdateEvent);\n\n // Create a Blob from the modified HTML content\n const blob = new Blob([updatedHtmlContent], { type: \"text/html\" });\n const fileName = path.split(\"/\").pop(); // Extract the file name from the path\n const file = new File([blob], fileName, { type: \"text/html\" });\n\n // Determine the directory to save the file\n const directoryPath = path.substring(0, path.lastIndexOf(\"/\"));\n\n // Call the uploadFiles function with the updated file\n return uploadFiles(\n globule,\n token,\n directoryPath,\n [file], // Pass the file in an array\n completeHandler,\n errorHandler,\n progressHandler,\n abortHandler\n );\n }\n\n async deletePageIndex(pageId) {\n return new Promise((resolve, reject) => {\n let query = `PageId:${pageId}`;\n let globule = Backend.globular;\n try {\n let router = document.querySelector(\"globular-router\");\n let application = router.getAttribute(\"base\");\n\n\n // Create the search request\n let rqst = new SearchDocumentsRequest();\n rqst.setPathsList([`${globule.config.DataPath}/search/applications/${application}`]);\n rqst.setLanguage(\"en\");\n rqst.setFieldsList([\"Id\", \"PageId\"]);\n rqst.setOffset(0);\n rqst.setPagesize(10000);\n rqst.setQuery(query);\n\n let stream = globule.searchService.searchDocuments(rqst, {\n domain: globule.domain,\n application: application\n });\n\n let results = [];\n\n // Process the search stream using event listeners\n stream.on(\"data\", (rsp) => {\n results = results.concat(rsp.getResults().getResultsList());\n });\n\n stream.on(\"end\", () => {\n results.forEach(async (result) => {\n let id = result.getDocid()\n let rqst = new DeleteDocumentRequest();\n rqst.setPath(`${globule.config.DataPath}/search/applications/${application}`);\n rqst.setId(id);\n\n await globule.searchService.deleteDocument(rqst, {\n token: localStorage.getItem(\"user_token\"),\n domain: globule.domain\n });\n });\n resolve();\n });\n\n stream.on(\"error\", (error) => {\n resolve(); // Return empty array in case of an error\n });\n\n } catch (error) {\n resolve();\n }\n });\n }\n\n\n // Save the search index.\n async saveSearchIndex(pageId, pageName, htmlString, callback, errorCallback) {\n try {\n\n // Generate a UUID for the page ID\n const pageUUID = getUuidByString(pageId);\n\n // First I will delete the existing index, if any\n await this.deletePageIndex(pageUUID)\n\n // Parse the HTML string into a document\n let parser = new DOMParser();\n let doc = parser.parseFromString(htmlString, \"text/html\");\n\n function getDataElements(element, path = \"body\") {\n let dataElements = [];\n\n if ([\"SCRIPT\", \"STYLE\", \"NOSCRIPT\"].includes(element.tagName)) {\n return dataElements;\n }\n\n if (element.id == \"\") {\n element.id = \"_\" + getUuidByString(element.textContent);\n }\n\n let textContent = element.textContent.trim();\n let currentPath = path + (element.id ? `#${element.id}` : ` > ${element.tagName.toLowerCase()}`);\n\n if (textContent.length > 0) {\n dataElements.push({\n Id: element.id,\n PageId: pageUUID,\n PageName: pageName,\n Text: textContent,\n Tag: element.tagName.toLowerCase(),\n Path: currentPath, // Ensuring this is properly defined\n Link: pageId,\n Attributes: Array.from(element.attributes).reduce((attrs, attr) => {\n attrs[attr.name] = attr.value;\n return attrs;\n }, {})\n });\n }\n\n Array.from(element.children).forEach(child => {\n dataElements = dataElements.concat(getDataElements(child, currentPath));\n });\n\n return dataElements;\n }\n let dataElements = getDataElements(doc.body);\n\n // Retrieve app info\n let router = document.querySelector('globular-router');\n let application = router.getAttribute('base');\n let token = localStorage.getItem(\"user_token\");\n let domain = Backend.globular.domain;\n\n // Index the extracted elements\n let promises = dataElements.map(e => {\n let rqst = new IndexJsonObjectRequest();\n rqst.setPath(`${Backend.globular.config.DataPath}/search/applications/${application}`);\n rqst.setJsonstr(JSON.stringify(e));\n rqst.setLanguage(\"en\");\n rqst.setId(\"Id\");\n rqst.setIndexsList([\"PageId\", \"Id\", \"Text\"]);\n\n return Backend.getGlobule(domain).searchService\n .indexJsonObject(rqst, { token, application, domain });\n });\n\n await Promise.all(promises);\n if (callback) {\n callback();\n }\n\n } catch (err) {\n if (errorCallback) {\n errorCallback(err);\n }\n }\n }\n\n\n}\n\ncustomElements.define('globular-webpage-manager', GlobularWebpageManager);\n","\nimport * as getUuid from 'uuid-by-string'\nimport { getCoords } from './utility';\n\n\n/**\n * This class where use to display minized window.\n */\nexport class DialogHandle extends HTMLElement {\n\n // Create the applicaiton view.\n constructor(dialog, height = 200) {\n super()\n // Set the shadow dom.\n this.attachShadow({ mode: 'open' });\n\n // keep the height of the dialog.\n this.height = height\n\n // display the dialog.\n this.dialog = dialog\n\n // if the dialog is focused.\n this.isFocused = false\n\n // if the dialog is docked.\n this.isDocked = false\n\n // Innitialisation of the layout.\n this.shadowRoot.innerHTML = `\n \n
\n
\n \n \n \n
\n
\n \n
\n \n
\n `\n this.shadowRoot.querySelector(\"#close-btn\").onclick = (evt) => {\n evt.stopPropagation()\n this.undock()\n this.dialog.close()\n }\n\n this.shadowRoot.querySelector(\"#minimize-btn\").onclick = (evt) => {\n evt.stopPropagation()\n this.dialog.minimize()\n }\n\n\n this.dialog.addEventListener(\"dialog-focused\", (evt) => {\n this.focus()\n });\n\n this.dialog.addEventListener(\"refresh-preview\", (evt) => {\n this.refreshPreview()\n });\n }\n\n connectedCallback() {\n\n }\n\n getCoords() {\n let container = this.shadowRoot.querySelector(\"#container\")\n let coords = getCoords(container)\n return coords\n }\n\n getRect() {\n let coords = this.getCoords()\n\n // so here i must calculate the width and height of the dialog.\n let container = this.shadowRoot.querySelector(\"#container\")\n return { top: coords.top, left: coords.left, width: this.dialog.div.getBoundingClientRect().width, height: this.dialog.div.getBoundingClientRect().height + container.offsetHeight }\n }\n\n refreshPreview() {\n\n this.innerHTML = \"\"\n let preview = this.dialog.getPreview()\n preview.classList.add(\"text-preview\")\n\n this.appendChild(preview)\n }\n\n dock() {\n this.dialog.style.display = \"none\"\n this.isDocked = true\n this.dialog.classList.add(\"minimized\")\n this.shadowRoot.querySelector(\"#minimize-btn\").style.display = \"none\"\n }\n\n undock() {\n /** restore the dialog */\n this.dialog.style.display = \"\"\n this.focus()\n this.isDocked = false\n this.dialog.classList.remove(\"minimized\")\n this.shadowRoot.querySelector(\"#minimize-btn\").style.display = \"block\"\n }\n\n /**\n * Remove the focus on the dialog handle.\n */\n blur() {\n this.isFocused = false\n let container = this.shadowRoot.querySelector(\"#container\")\n container.style.border = \"1px solid var(--divider-color)\"\n }\n\n /**\n * \n * @returns Set the focus on the dialog handle.\n */\n focus() {\n\n if (this.isFocused) {\n return\n }\n\n let handles = document.querySelectorAll(\"globular-dialog-handle\")\n for (let i = 0; i < handles.length; i++) {\n handles[i].blur()\n }\n\n this.isFocused = true\n this.dialog.focus()\n\n let container = this.shadowRoot.querySelector(\"#container\")\n container.style.border = \"1px solid var(--primary-color)\"\n\n }\n\n /**\n * \n * @returns true if the dialog has focus.\n */\n hasFocus() {\n return this.isFocused\n }\n\n}\n\ncustomElements.define('globular-dialog-handle', DialogHandle)\n\n\n/**\n * This class where use to display minized window.\n */\nexport class DialogHandles extends HTMLElement {\n // attributes.\n\n // Create the applicaiton view.\n constructor() {\n super()\n // Set the shadow dom.\n this.attachShadow({ mode: 'open' });\n }\n\n // The connection callback.\n connectedCallback() {\n\n // Innitialisation of the layout.\n this.shadowRoot.innerHTML = `\n \n \n
\n \n \n
\n \n
\n
\n `\n\n let icon = this.shadowRoot.querySelector(\"#container\")\n let handles = this.shadowRoot.querySelector(\".handles\")\n\n icon.onmouseenter = (evt) => {\n evt.stopPropagation()\n if (handles.style.display == \"flex\") {\n return\n }\n\n let globularHandles = document.querySelectorAll(\"globular-dialog-handles\")\n for (let i = 0; i < globularHandles.length; i++) {\n globularHandles[i].hideHandles()\n }\n handles.style.display = \"flex\"\n\n // refresh the preview.\n for (let i = 0; i < this.children.length; i++) {\n this.children[i].refreshPreview()\n }\n }\n\n handles.onmouseleave = (evt) => {\n evt.stopPropagation()\n if (handles.style.display == \"flex\") {\n return\n }\n\n handles.style.display = \"none\"\n }\n\n\n document.addEventListener(\"mousemove\", (evt) => {\n\n if (handles.style.display != \"flex\") {\n return\n }\n\n let rect = handles.getBoundingClientRect()\n let x = evt.clientX\n let y = evt.clientY\n\n // compensate for the icon position.\n let right = rect.right\n if (right < icon.offsetLeft + icon.offsetWidth) {\n right = icon.offsetLeft + icon.offsetWidth\n }\n\n if (x < rect.left || x > right || y < rect.top || y > rect.bottom + icon.offsetHeight + 10) {\n handles.style.display = \"none\"\n }\n })\n\n\n }\n\n hideHandles() {\n let handles = this.shadowRoot.querySelector(\".handles\")\n handles.style.display = \"none\"\n }\n\n appendHandle(handle) {\n if (this.querySelector(handle.id)) {\n console.log(\"handle already exist\")\n return\n }\n\n this.appendChild(handle)\n let icon = this.shadowRoot.querySelector(\"#icon\")\n icon.src = handle.dialog.getIcon()\n this.shadowRoot.querySelector(\"#container\").style.display = \"flex\"\n this.shadowRoot.querySelector(\"#count\").innerHTML = this.children.length\n this.appendChild(handle)\n handle.onclick = (evt) => {\n evt.stopPropagation()\n handle.undock()\n }\n\n handle.onmouseover = (evt) => {\n evt.stopPropagation()\n handle.style.boxShadow = \"0px 0px 5px 0px var(--primary-light-color)\"\n handle.dialog.div.style.boxShadow = \"0px 0px 5px 0px var(--primary-light-color)\"\n }\n\n handle.onmouseout = (evt) => {\n evt.stopPropagation()\n handle.style.boxShadow = \"\"\n handle.dialog.div.style.boxShadow = \"\"\n }\n }\n\n removeHandle(handle) {\n\n this.removeChild(handle)\n this.shadowRoot.querySelector(\".handles\").style.display = \"none\"\n if (this.children.length > 0) {\n let icon = this.shadowRoot.querySelector(\"#icon\")\n icon.src = this.children[this.children.length - 1].dialog.getIcon()\n this.shadowRoot.querySelector(\"#container\").style.display = \"flex\"\n } else {\n let icon = this.shadowRoot.querySelector(\"#icon\")\n icon.src = \"\"\n this.shadowRoot.querySelector(\"#container\").style.display = \"none\"\n }\n\n this.shadowRoot.querySelector(\"#count\").innerHTML = this.children.length\n }\n\n}\n\ncustomElements.define('globular-dialog-handles', DialogHandles)\n\n/**\n * This class where use to display minized window.\n */\nexport class Dockbar extends HTMLElement {\n // attributes.\n\n // Create the applicaiton view.\n constructor() {\n super()\n // Set the shadow dom.\n this.attachShadow({ mode: 'open' });\n }\n\n // The connection callback.\n connectedCallback() {\n\n // Innitialisation of the layout.\n this.shadowRoot.innerHTML = `\n \n
\n \n \n \n
\n `\n\n this.dialogs = []\n }\n\n getDialogs() {\n return this.dialogs\n }\n\n appendDialog(dialog) {\n\n // append the dialog to the dockbar.\n this.dialogs.push(dialog)\n\n // The group id is the name of the dialog.\n let groupId = dialog.getAttribute(\"name\")\n\n // get the group id.\n if (!groupId) {\n groupId = \"_\" + getUuid(JSON.stringify(dialog.getTitle())) // regroup all the dialog with the same title.\n }\n\n let handles = this.querySelector(\"#\" + groupId)\n if (!handles) {\n handles = new DialogHandles()\n handles.id = groupId\n this.appendChild(handles)\n }\n\n // append the handle to the group if not already exist.\n let handle = this.querySelector(\"#\" + dialog.id + \"-handle\")\n if (!handle) {\n handle = new DialogHandle(dialog)\n handle.id = dialog.id + \"-handle\"\n handle.name = groupId\n handles.appendHandle(handle)\n\n let minimizeDialogListener = (evt) => {\n handle.dock()\n }\n\n let openDialogListener = (evt) => {\n handles.appendHandle(handle)\n this.shadowRoot.querySelector(\"#dockbar\").style.display = \"flex\"\n }\n\n let closeDialogListener = (evt) => {\n\n handles.removeHandle(handle)\n\n if (handles.children.length == 0) {\n this.removeChild(handles)\n }\n\n if (this.children.length == 0) {\n this.shadowRoot.querySelector(\"#dockbar\").style.display = \"none\"\n }\n\n // remove prevvious listener.\n dialog.removeEventListener(\"dialog-minimized\", minimizeDialogListener);\n dialog.removeEventListener(\"dialog-opened\", openDialogListener);\n dialog.removeEventListener(\"dialog-closed\", closeDialogListener);\n\n // remove the dialog from the dialogs\n for (let i = 0; i < this.dialogs.length; i++) {\n if (this.dialogs[i].id == dialog.id) {\n this.dialogs.splice(i, 1)\n break\n }\n }\n }\n\n dialog.addEventListener(\"dialog-minimized\", minimizeDialogListener);\n dialog.addEventListener(\"dialog-opened\", openDialogListener);\n dialog.addEventListener(\"dialog-closed\", closeDialogListener);\n\n\n } else {\n console.log(\"handle already exist\")\n }\n\n this.shadowRoot.querySelector(\"#dockbar\").style.display = \"flex\"\n }\n\n getCoords() {\n return this.shadowRoot.querySelector(\"#container\").getBoundingClientRect()\n }\n}\n\ncustomElements.define('globular-dockbar', Dockbar)\n\n// create the dockbar.\nexport let dockbar = new Dockbar()\nif(document.body){\n document.body.appendChild(dockbar)\n}\n","// Polymer dependencies\nimport '@polymer/iron-icons/iron-icons.js';\nimport '@polymer/paper-icon-button/paper-icon-button.js';\n\nimport { setResizeable } from \"./resizeable.js\";\nimport { setMoveable } from './moveable.js';\nimport { dockbar } from './dockbar.js';\nimport { fireResize, getCoords } from './utility.js';\n\n/*\n * Menu item represent element contain inside a menu.\n */\nexport class Dialog extends HTMLElement {\n // attributes.\n\n // Create the applicaiton view.\n constructor() {\n super()\n // Set the shadow dom.\n this.attachShadow({ mode: 'open' });\n\n this.div = null;\n this.titleDiv = null; // btn actions.\n\n this.cancelBtn = null;\n this.okBtn = null;\n\n this.closeBtn = null;\n this.buttonsDiv = null;\n\n /* Property used to move the dialog **/\n this.isMoving = false;\n this.offsetX = 0;\n this.offsetY = 0;\n\n // keep the dialog time...\n this.time = new Date().getTime();\n\n // Set the dialog id.\n if (this.hasAttribute(\"id\")) {\n this.id = this.getAttribute(\"id\");\n } else {\n this.id = \"_\" + this.time;\n }\n\n // test if the dialog id is unique.\n if (document.getElementById(this.id) != null && this.modalDiv != null) {\n return;\n }\n\n if(this.hasAttribute(\"overflow\")) {\n this.overflow = this.getAttribute(\"overflow\");\n }\n\n this.backgroundColor = \"var(--surface-color)\";\n if (this.hasAttribute(\"background-color\"))\n this.backgroundColor = this.getAttribute(\"background-color\");\n\n this.color = \"var(--on-surface-color)\";\n if (this.hasAttribute(\"color\")) {\n this.color = this.getAttribute(\"color\");\n }\n\n\n this.shadowRoot.innerHTML = `\n \n\n \n
\n
\n \n
\n\n
\n \n
\n \n
\n \n
\n \n
\n \n \n \n \n \n
\n
\n\n
\n \n
\n\n
\n \n
\n Ok\n Cancel\n
\n
\n \n `;\n\n // the dialog div.\n this.div = this.shadowRoot.getElementById(\"dialog_div\"); // Set it reziable.\n this.div.addEventListener(\"mousedown\", (e) => {\n e.stopPropagation();\n this.focus();\n });\n\n\n if (this.hasAttribute(\"name\"))\n this.div.setAttribute(\"name\", this.getAttribute(\"name\"));\n\n // set the is resizeable attribute.\n if (this.hasAttribute(\"is-resizeable\")) {\n this.isresizeable = this.getAttribute(\"is-resizeable\") == \"true\";\n } else {\n this.isresizeable = false;\n }\n\n if (this.isresizeable) {\n\n setResizeable(this.div, (width, height) => {\n /** nothing here... */\n this.width = width;\n this.height = height;\n let event = new CustomEvent(\"dialog-resized\", {\n detail: {\n width: width, height: height\n },\n bubbles: true,\n composed: true\n });\n this.dispatchEvent(event);\n }, \"right\", 1000);\n }\n\n this.header = this.shadowRoot.querySelector(\".dialog_header\");\n this.header.addEventListener(\"mousedown\", (e) => {\n e.stopPropagation();\n this.focus();\n });\n\n if (this.hasAttribute(\"ok-cancel\")) {\n this.shadowRoot.querySelector(\"#ok_cancel_buttons_div\").style.display = \"flex\";\n } else {\n this.shadowRoot.querySelector(\"#ok_cancel_buttons_div\").style.display = \"none\";\n const actionsSlot = this.shadowRoot.querySelector('slot[name=\"actions\"]');\n if (actionsSlot.assignedNodes().length === 0) {\n this.shadowRoot.querySelector(\".card-actions\").style.display = \"none\";\n }\n }\n\n // test if the is modal or not.\n if (this.hasAttribute(\"is-modal\")) {\n this.ismodal = this.getAttribute(\"is-modal\") == \"true\";\n } else {\n this.ismodal = false;\n }\n\n if (this.hasAttribute(\"show-icon\")) {\n this.showIcon = this.getAttribute(\"show-icon\") == \"true\";\n } else {\n this.showIcon = false;\n }\n\n if (this.showIcon) {\n this.shadowRoot.getElementById(\"icon\").style.display = \"flex\";\n } else {\n this.shadowRoot.getElementById(\"icon\").style.display = \"none\";\n }\n\n if (this.ismodal) {\n this.modalDiv = document.createElement(\"div\");\n this.modalDiv.style.position = \"fixed\";\n this.modalDiv.style.top = \"0px\";\n this.modalDiv.style.left = \"0px\";\n this.modalDiv.style.height = \"100%\";\n this.modalDiv.style.width = \"100%\";\n this.modalDiv.style.backgroundColor = \"rgba(0,0,0,.25)\";\n this.modalDiv.style.zIndex = \"1000\";\n this.modalDiv.style.display = \"block\";\n document.body.appendChild(this.modalDiv);\n this.parent = this.modalDiv;\n this.modalDiv.appendChild(this);\n } else {\n this.parent = this.parentNode;\n } // The dialog div.\n\n\n if (this.hasAttribute(\"width\")) {\n this.div.style.width = this.getAttribute(\"width\");\n }\n\n if (this.hasAttribute(\"height\")) {\n this.div.style.height = this.getAttribute(\"height\");\n }\n\n // Mutation Observer setup\n const mutationObserver = new MutationObserver(mutations => {\n mutations.forEach(mutation => {\n if (mutation.type === 'attributes' && mutation.attributeName === 'style') {\n this.height = this.div.offsetHeight;\n this.width = this.div.offsetWidth;\n }\n });\n });\n\n mutationObserver.observe(this.div, { attributes: true });\n\n if (this.hasAttribute(\"is-maximizeable\")) {\n this.ismaximizeable = this.getAttribute(\"is-maximizeable\") == \"true\";\n } else {\n this.ismaximizeable = false;\n }\n\n if (this.hasAttribute(\"is-minimizeable\")) {\n this.isminimizeable = this.getAttribute(\"is-minimizeable\") == \"true\";\n } else {\n this.isminimizeable = false;\n }\n\n if (this.ismaximizeable) {\n\n this.shadowRoot.getElementById(\"enter_max_btn\").style.display = \"block\";\n const dialogDiv = this.shadowRoot.querySelector(\"#dialog_div\");\n const enterMaxBtn = this.shadowRoot.querySelector(\"#enter_max_btn\");\n const exitMaxBtn = this.shadowRoot.querySelector(\"#exit_max_btn\");\n let originalWidth, originalHeight, originalTop, originalLeft;\n\n let enterMaximizeListener = (e) => {\n e.stopPropagation();\n originalWidth = dialogDiv.offsetWidth;\n originalHeight = dialogDiv.offsetHeight;\n originalTop = dialogDiv.offsetTop;\n originalLeft = dialogDiv.offsetLeft;\n\n if (this.ismodal) {\n dialogDiv.style.position = \"fixed\";\n dialogDiv.style.top = \"0px\";\n dialogDiv.style.left = \"0px\";\n dialogDiv.style.height = \"100%\";\n } else {\n dialogDiv.style.position = \"absolute\";\n dialogDiv.style.top = `${this.offset}px`;\n dialogDiv.style.left = \"0px\";\n dialogDiv.style.height = `calc(100% - ${this.offset}px)`;\n }\n\n dialogDiv.style.width = \"100%\";\n exitMaxBtn.style.display = \"inline-block\";\n enterMaxBtn.style.display = \"none\";\n\n let event = new CustomEvent(\"dialog-maximized\", {});\n fireResize();\n this.dispatchEvent(event);\n }\n\n\n enterMaxBtn.addEventListener(\"click\", enterMaximizeListener);\n\n let exitMaximizeListener = (e) => {\n e.stopPropagation();\n dialogDiv.style.top = originalTop + \"px\";\n dialogDiv.style.left = originalLeft + \"px\";\n dialogDiv.style.position = \"\"; // set to default\n dialogDiv.style.width = originalWidth + \"px\";\n dialogDiv.style.height = originalHeight + \"px\";\n enterMaxBtn.style.display = \"inline-block\";\n exitMaxBtn.style.display = \"none\";\n fireResize();\n }\n\n exitMaxBtn.addEventListener(\"click\", exitMaximizeListener);\n\n let header = this.shadowRoot.querySelector(\".dialog_header\");\n header.addEventListener(\"dblclick\", (e) => {\n e.stopPropagation();\n if (dialogDiv.style.position == \"fixed\") {\n exitMaximizeListener(e);\n } else {\n enterMaximizeListener(e);\n }\n });\n\n } else {\n this.shadowRoot.getElementById(\"enter_max_btn\").style.display = \"none\";\n }\n\n if (this.isminimizeable) {\n this.shadowRoot.getElementById(\"minimize_btn\").style.display = \"block\";\n dockbar.appendDialog(this);\n this.shadowRoot.getElementById(\"minimize_btn\").addEventListener(\"click\", (e) => {\n e.stopPropagation();\n\n let dockbar = document.querySelector(\"globular-dockbar\");\n let dockbarCoord = dockbar.getCoords();\n let dockbarTop = dockbarCoord.top;\n let dockbarLeft = dockbarCoord.left;\n\n let divCoord = getCoords(this.div);\n let divTop = divCoord.top;\n let divLeft = divCoord.left;\n\n let offsetLeft = dockbarLeft - divLeft + 2;\n let offsetTop = dockbarTop - divTop;\n\n this.style.setProperty(\"--offset-left\", `${offsetLeft}px`);\n this.style.setProperty(\"--offset-top\", `${offsetTop - 40}px`);\n\n // hide the dialog...\n this.div.classList.add('minimizing'); // Add animation class\n });\n } else {\n this.shadowRoot.getElementById(\"minimize_btn\").style.display = \"none\";\n }\n\n this.buttonsDiv = this.shadowRoot.getElementById(\"ok_cancel_buttons_div\");\n this.closeBtn = this.shadowRoot.getElementById(\"close_btn\");\n this.okBtn = this.shadowRoot.getElementById(\"ok_btn\");\n this.cancelBtn = this.shadowRoot.getElementById(\"cancel_btn\"); // Set the title\n\n // Set the dialog moveable.\n if (this.hasAttribute(\"is-moveable\")) {\n this.ismoveable = this.getAttribute(\"is-moveable\") == \"true\";\n\n } else {\n this.ismoveable = false;\n }\n\n this.offset = 0\n if (this.hasAttribute(\"offset\")) {\n this.offset = parseInt(this.getAttribute(\"offset\"));\n }\n\n if (this.ismoveable) {\n setMoveable(this.shadowRoot.querySelector(\"#title\"), this.div, (left, top) => {\n if(this.onmove) {\n this.onmove(left, top);\n }\n }, this, this.offset)\n } // Close handler function.\n\n // Animation is complete, remove the \"closing\" class\n this.div.addEventListener('animationend', (evt) => {\n if (evt.animationName == \"implode\") {\n if (this.ismodal) {\n this.modalDiv.parentNode.removeChild(this.modalDiv);\n }\n\n if (this.onclose != undefined) {\n this.onclose();\n }\n\n // remove the div.\n this.parentNode.removeChild(this);\n\n this.div.classList.remove('closing');\n let event = new CustomEvent(\"dialog-closed\", {\n detail: {\n message: \"dialog-closed\"\n },\n bubbles: true,\n composed: true\n });\n\n this.dispatchEvent(event);\n } else if (evt.animationName == \"minimize\") {\n this.div.classList.remove('minimizing');\n let event = new CustomEvent(\"dialog-minimized\", {\n detail: {\n message: \"dialog-minimized\"\n },\n bubbles: true,\n composed: true\n });\n this.dispatchEvent(event);\n }\n });\n\n let closeHandler = (evt) => {\n evt.stopPropagation();\n // Closing the dialog\n this.div.classList.add('closing');\n\n // dispatch close event.\n let event = new CustomEvent(\"dialog-closing\", {});\n this.dispatchEvent(event);\n\n };\n\n /* The button action **/\n this.cancelBtn.onclick = closeHandler;\n this.closeBtn.onclick = closeHandler;\n\n this.okBtn.onclick = (evt) => {\n if (this.onok != undefined) {\n this.onok();\n }\n closeHandler(evt);\n };\n\n // Position the new dialog\n // let dialogs = document.querySelectorAll(\"globular-dialog\");\n let dialogs = dockbar.getDialogs()\n\n if (dialogs.length > 1) {\n\n // Convert the NodeList to an array and sort based on the time attribute\n let sortedDialogs = Array.from(dialogs).sort((dialogA, dialogB) => {\n // Parse the time attributes of the dialogs\n let timeA = parseInt(dialogA.getAttribute(\"time\"));\n let timeB = parseInt(dialogB.getAttribute(\"time\"));\n\n // Compare the time attributes for sorting\n return timeA - timeB;\n });\n\n let lastDialog = sortedDialogs[dialogs.length - 2];\n let lastDialogCoord = lastDialog.getCoords();\n let lastDialogTop = lastDialogCoord.top;\n let lastDialogLeft = lastDialogCoord.left;\n\n let offsetLeft = lastDialogLeft + 40;\n let offsetTop = lastDialogTop + 40;\n\n this.setPosition(offsetLeft, offsetTop);\n } else {\n // if the dialog is not moveable, I will set it at the center of the screen.\n if (!this.hasAttribute(\"is-moveable\"))\n this.setCentered();\n }\n\n this.focus();\n }\n\n setBackGroundColor(color) {\n this.div.style.backgroundColor = color;\n }\n\n hideHorizontalResize() {\n this.div.querySelector(\"#resize-width-div\").style.display = \"none\";\n }\n\n showHorizontalResize() {\n this.div.querySelector(\"#resize-width-div\").style.display = \"block\";\n }\n\n hideVerticalResize() {\n this.div.querySelector(\"#resize-height-div\").style.display = \"none\";\n }\n\n showVerticalResize() {\n this.div.querySelector(\"#resize-height-div\").style.display = \"block\";\n }\n\n // set the height of the dialog.\n setHeight(height) {\n\n if (isNaN(height)) {\n this.div.style.height = height;\n return;\n }\n\n this.div.style.height = height + \"px\";\n this.height = height;\n }\n\n setWidth(width) {\n if (isNaN(width)) {\n this.div.style.width = width;\n return;\n }\n this.div.style.width = width + \"px\";\n this.width = width;\n }\n\n getWidth() {\n return this.div.offsetWidth;\n }\n\n getHeight() {\n return this.div.offsetHeight + this.header.offsetHeight;\n }\n\n setMaxWidth(maxWidth) {\n this.div.style.maxWidth = maxWidth + \"px\";\n this.maxWidth = maxWidth;\n }\n\n getCoords() {\n return getCoords(this.div);\n }\n\n /** Return the icon of the dialog. */\n getIcon() {\n const iconSlot = this.shadowRoot.querySelector('slot[name=\"icon\"]');\n\n if (iconSlot) {\n\n // Get the assigned nodes within the slot\n const assignedNodes = iconSlot.assignedNodes();\n\n // Filter assigned nodes to get only image elements\n const imageElements = assignedNodes.filter(node => node.nodeName === 'IMG');\n\n // Retrieve src attributes from image elements\n const imageSrcs = imageElements.map(imgElement => imgElement.getAttribute('src'));\n return imageSrcs[0];\n }\n return \"\";\n }\n\n\n /** Return the tile of the dialog */\n getTitle() {\n const titleSlot = this.shadowRoot.querySelector('slot[name=\"title\"]');\n\n if (titleSlot) {\n const nodes = titleSlot.assignedNodes();\n\n if (nodes) {\n return nodes[0].textContent;\n }\n }\n return \"\";\n }\n\n /**\n * Close the window.\n */\n close() {\n this.shadowRoot.querySelector(\"#close_btn\").click();\n }\n\n /**\n * Minimize the window.\n */\n minimize() {\n this.shadowRoot.querySelector(\"#minimize_btn\").click();\n }\n\n restore() {\n const exitMaxBtn = this.shadowRoot.querySelector(\"#exit_max_btn\");\n exitMaxBtn.click();\n }\n\n /**\n * Open the dialog.\n **/\n open() {\n if (this.modalDiv != undefined) {\n document.body.appendChild(this.modalDiv);\n this.parent = this.modalDiv;\n this.modalDiv.appendChild(this);\n } else {\n this.parent.appendChild(this);\n }\n\n let event = new CustomEvent(\"dialog-opened\", {\n detail: {\n message: \"dialog-opened\"\n },\n bubbles: true,\n composed: true\n });\n\n this.dispatchEvent(event);\n\n // set the dialog at center.\n this.focus();\n }\n\n /**\n * Center the dialog with it parent.\n */\n setCentered() {\n if(this.parent == undefined) {\n return;\n }\n \n var docEl = document.documentElement;\n var body = document.body;\n var scrollLeft = window.pageXOffset || docEl.scrollLeft || body.scrollLeft; // I will set the position of the dialog \n\n this.x = (this.parent.offsetWidth - scrollLeft - this.div.offsetWidth) / 2 + scrollLeft;\n this.div.style.left = this.x + \"px\";\n this.y = (window.innerHeight - this.div.offsetHeight) / 2;\n this.div.style.top = this.y + \"px\";\n }\n\n /**\n * Set the dialog position in the screen\n * @param {*} x The horizontal postion\n * @param {*} y The vertical position\n */\n setPosition(x, y) {\n /* I will set the position of the dialog **/\n this.x = x;\n this.div.style.left = this.x + \"px\";\n this.y = y;\n this.div.style.top = this.y + \"px\";\n } //////////////// Getter //////////////////\n\n /**\n * Return a preview of the dialog...\n */\n getPreview() {\n\n let preview = document.createElement(\"div\");\n preview.style.userSelect = \"none\";\n\n for (var i = 0; i < this.children.length; i++) {\n if (this.children[i].slot == \"\") {\n preview.appendChild(this.children[i].cloneNode(true));\n }\n }\n\n return preview;\n }\n\n /**\n * Set the dialog focus.\n */\n focus() {\n //let dialogs = document.querySelectorAll(\"globular-dialog\");\n let dialogs = dockbar.getDialogs()\n\n for (var i = 0; i < dialogs.length; i++) {\n dialogs[i].div.style.zIndex = \"100\";\n dialogs[i].div.style.border = \"solid 1px var(--divider-color)\";\n dialogs[i].header.style.backgroundColor = \"var(--primary-light-color)\";\n }\n\n this.div.style.zIndex = \"1000\";\n this.div.style.border = \"solid 1px var(--primary-light-color)\";\n this.header.style.backgroundColor = \"var(--primary-color)\";\n\n let event = new CustomEvent(\"dialog-focused\", {\n detail: {\n message: \"dialog-focused\"\n },\n bubbles: true,\n composed: true\n });\n\n this.header.click();\n\n this.dispatchEvent(event);\n }\n}\n\ncustomElements.define('globular-dialog', Dialog);","\n/**\n * Move a div. The div position will be absolute.\n * The handle can be any child of the div to be move.\n * @param {*} handle The handle to grab the div\n * @param {*} draggable The div (or any other html-element) to be move.\n */\nexport function setMoveable(handle, draggable, onmove, element, offsetTop = 0) {\n //\n handle.style.userSelect = \"none\"\n\n // set the position from existing infos\n if(draggable.hasAttribute(\"name\")){\n let id = \"__\" + draggable.getAttribute(\"name\") + \"__position__\"\n if (localStorage.getItem(id)) {\n let position = JSON.parse(localStorage.getItem(id))\n if (position.top < offsetTop) {\n position.top = offsetTop\n }\n \n // be sure the window open at visible position\n if (position.left > document.body.offsetWidth) {\n position.left = document.body.offsetWidth - 80;\n }\n \n if (position.top > document.body.offsetHeight) {\n position.top = document.body.offsetHeight - 80;\n }\n \n draggable.style.top = position.top + \"px\"\n draggable.style.left = position.left + \"px\"\n \n }\n } else {\n draggable.style.left = ((document.body.offsetWidth - 720) / 2) + \"px\"\n draggable.style.top = \"80px\"\n }\n\n // be sure the window stay visible.\n window.addEventListener('resize', () => {\n\n // set the postion to 0, 0\n let w = window.innerWidth;\n if (w <= 500 ) {\n if(draggable.style.position == \"fixed\"){\n draggable.style.top = offsetTop + \"px\"\n draggable.style.left = \"0px\"\n }\n return\n }\n\n if (draggable.offsetTop < offsetTop) {\n draggable.top = offsetTop + \"px\"\n }\n\n // be sure the window open at visible position\n if (draggable.offsetLeft > document.body.offsetWidth) {\n draggable.style.left = (document.body.offsetWidth - 80) + \"px\";\n }\n\n if (draggable.offsetTop > document.body.offsetHeight) {\n draggable.style.top = (document.body.offsetHeight - 80) + \"px\";\n }\n });\n\n draggable.style.position = \"fixed\"\n\n element.classList.add(\"draggable\")\n var isMouseDown, initX, initY;\n\n handle.addEventListener('click', (e) => {\n e.stopPropagation()\n let draggables = document.getElementsByClassName(\"draggable\")\n for (var i = 0; i < draggables.length; i++) {\n draggables[i].style.zIndex = 100;\n }\n\n element.style.zIndex = 1000;\n })\n\n handle.addEventListener('pointerdown', (e) => {\n\n e.stopPropagation()\n isMouseDown = true;\n document.body.classList.add('no-select');\n initX = e.offsetX;\n initY = e.offsetY;\n let draggables = document.getElementsByClassName(\"draggable\")\n for (var i = 0; i < draggables.length; i++) {\n draggables[i].style.zIndex = 100;\n }\n\n element.style.zIndex = 1000;\n })\n\n let onMoveHandler = (e) => {\n e.stopPropagation()\n\n // set the postion to 0, 0\n let w = window.innerWidth;\n if (w < 500) {\n if(draggable.style.position == \"fixed\"){\n draggable.style.top = offsetTop + \"px\"\n draggable.style.left = \"0px\"\n }\n return\n }\n\n if (e.touches) {\n e.clientX = e.touches[0].clientX\n e.clientY = e.touches[0].clientY\n }\n\n if (isMouseDown) {\n\n var cx = e.clientX - initX,\n cy = e.clientY - initY;\n if (cx < 0) {\n cx = 0;\n }\n if (cy < 0) {\n cy = 0;\n }\n if (window.innerWidth - e.clientX + initX < draggable.offsetWidth) {\n cx = window.innerWidth - draggable.offsetWidth;\n }\n if (e.clientY > window.innerHeight - draggable.offsetHeight + initY) {\n cy = window.innerHeight - draggable.offsetHeight;\n }\n draggable.style.left = cx + 'px';\n\n // limit the moveable range to be sure the handle stay reachable.\n if (cy > offsetTop && cy < window.innerHeight - handle.offsetHeight) {\n draggable.style.top = cy + 'px';\n }\n\n if (onmove) {\n onmove(cx, cy)\n \n // also dispatch the custom event...\n draggable.dispatchEvent(\n new CustomEvent(\"move\", {\n bubbles: true,\n detail: { cx: cx, cy: cy },\n })\n );\n\n }\n\n let position = { top: cy, left: cx }\n if (position.top < offsetTop) {\n position.top = offsetTop\n }\n\n\n if(draggable.hasAttribute(\"name\")){\n let id = \"__\" + draggable.getAttribute(\"name\") + \"__position__\"\n localStorage.setItem(id, JSON.stringify(position))\n }\n\n }\n }\n\n document.addEventListener('touchmove', onMoveHandler)\n document.addEventListener('mousemove', onMoveHandler)\n\n document.addEventListener('pointerup', (e) => {\n e.stopPropagation()\n\n isMouseDown = false;\n document.body.classList.remove('no-select');\n\n })\n}\n","import grapesjs from 'grapesjs';\n\nexport default grapesjs.plugins.add('gjs-plugin-globular-markdown', (editor, options = {}) => {\n // Load required script and style\n const scriptUrl = 'https://globular.io/globular-element/bundle.min.js';\n const styleUrl = 'https://globular.io/globular-element/style.css';\n\n if (!document.querySelector(`script[src=\"${scriptUrl}\"]`)) {\n const script = document.createElement('script');\n script.src = scriptUrl;\n script.defer = true;\n document.head.appendChild(script);\n }\n\n if (!document.querySelector(`link[href=\"${styleUrl}\"]`)) {\n const link = document.createElement('link');\n link.rel = 'stylesheet';\n link.href = styleUrl;\n document.head.appendChild(link);\n }\n\n // Add custom markdown component\n editor.Components.addType('globular-markdown', {\n model: {\n defaults: {\n tagName: 'globular-markdown',\n attributes: {\n 'background-color': '#f5f2f0',\n 'code-background-color': '#f5f2f0',\n 'text-color': '#000000',\n theme: '',\n },\n components: 'Type your **Markdown** content here...',\n stylable: ['background-color', 'text-color', 'code-background-color'],\n droppable: true,\n },\n },\n view: {\n init() {\n this.listenTo(this.model, 'change:components', this.updateContent);\n },\n updateContent() {\n const el = this.el;\n const content = this.model.get('components').map(comp => comp.toHTML()).join('');\n el.innerHTML = content;\n },\n },\n });\n\n // Add component to GrapesJS block manager\n editor.BlockManager.add('globular-markdown', {\n label: 'Markdown',\n category: 'Basic',\n content: { type: 'globular-markdown' },\n });\n});\n","import grapesjs from 'grapesjs';\n\nexport default grapesjs.plugins.add('gjs-plugin-comment-section', (editor, options = {}) => {\n // Load required script and style (if any)\n \n const scriptUrl = 'path/to/your/comment-component-script.js';\n const styleUrl = 'path/to/your/comment-component-style.css';\n\n if (!document.querySelector(`script[src=\"${scriptUrl}\"]`)) {\n const script = document.createElement('script');\n script.src = scriptUrl;\n script.defer = true;\n document.head.appendChild(script);\n }\n\n if (!document.querySelector(`link[href=\"${styleUrl}\"]`)) {\n const link = document.createElement('link');\n link.rel = 'stylesheet';\n link.href = styleUrl;\n document.head.appendChild(link);\n }\n \n\n // Add custom comment component\n editor.Components.addType('comment-section', {\n model: {\n defaults: {\n tagName: 'globular-comment-list', // Use the custom element tag name\n attributes: {\n 'background-color': '#ffffff',\n 'text-color': '#000000',\n },\n components: '', // No initial components inside the comment section\n stylable: ['background-color', 'text-color'],\n droppable: true,\n },\n },\n view: {\n init() {\n this.listenTo(this.model, 'change:components', this.updateContent);\n },\n updateContent() {\n const el = this.el;\n const content = this.model.get('components').map(comp => comp.toHTML()).join('');\n el.innerHTML = content;\n },\n },\n });\n\n // Add component to GrapesJS block manager\n editor.BlockManager.add('comment-section', {\n label: 'Comment Section',\n category: 'Basic',\n content: { type: 'comment-section' },\n });\n});\n","// Import necessary dependencies\nimport grapesjs from 'grapesjs';\nimport tailwindPlugin from 'grapesjs-tailwind';\nimport bootstrap5Plugin from '@toiyabe/grapesjs-blocks-bootstrap-5/dist/grapesjs-blocks-bootstrap-5.min.js.min.js';\nimport scripEditorPlugin from 'grapesjs-script-editor';\nimport componentCodeEditorPlugin from 'grapesjs-component-code-editor';\nimport parserPostCSSPlugin from 'grapesjs-parser-postcss';\nimport { fireResize } from '../utility';\nimport ckEditorPlugin from 'grapesjs-plugin-ckeditor';\nimport exportPlugin from 'grapesjs-plugin-export';\nimport postcss from 'postcss';\nimport removeDuplicateValues from 'postcss-discard-duplicates';\nimport \"grapesjs-component-code-editor/dist/grapesjs-component-code-editor.min.css\"\nimport \"grapesjs/dist/css/grapes.min.css\"\n\n// Globular plugin's\nimport markdownPlugin from './plugins/globular-markdown-plugin';\nimport commentsPlugin from './plugins/globular-comments-section-plugin';\n\nclass ExternalResourceManager extends HTMLElement {\n constructor() {\n super();\n\n // Create shadow root\n const shadow = this.attachShadow({ mode: 'open' });\n\n // Modal container\n const modal = document.createElement('div');\n modal.className = 'modal';\n modal.innerHTML = `\n
![Profile Picture](\"${this.contact.getProfilepicture()}\")
\n ![](\"${this.featured().image.src}\")
\n ${decodeURIComponent(url.pathname)}\n ![](\"assets/icons/youtube-flat.svg\"/){kind=icon}
\n \n