We invite you to participate in consentful, transparent communications within your community.
158 |When you create a new channel, you are able to choose from three different meeting modes – Facilitated Mode, Feedback 159 | Mode, and Egalitarian Mode, each bundled with different features.
160 |Set the name of your channel around a discussion topic (max 25 characters).
165 | 166 |253 | 254 | 255 |
257 | 258 |263 | 264 |
266 | 267 | 268 | 269 | -------------------------------------------------------------------------------- /CODEOFCONSENT0.1.md: -------------------------------------------------------------------------------- 1 | # Togethernet Code of Consent v0.1 2 | 3 | The Togethernet Code of Consent (CoC) is a specification that outlines the level of consent and protection that participants have while using the software. Consent is defined as the act of giving permission for something to occur, and we use that term in this document to refer to the permissions that are presented with regards to Togethernet’s users’ data. 4 | 5 | As you read through this Code of Consent, please consider the following invitations: 6 | 7 | We invite you to take your time. 8 | We invite you to dig deeper. 9 | 10 | We welcome your pace. 11 | We welcome your concerns. 12 | 13 | We invite your enthusiasm. 14 | We invite your participation. 15 | 16 | We acknowledge the trauma that accompanies surrendering information about ourselves in the digital realm without being given insight into how platforms work, and how they protect or expose us in the process.(1) In constructive resistance against that, we offer this document, intended to give you a clear understanding of the ethos and agreements behind this software and how they affect your privacy. 17 | 18 | Structurally informed by the F.R.I.E.S. model created by Planned Parenthood, we believe that a consentful software should be designed and built through the lens of being Freely given, Reversible, Informed, Enthusiastic and Specific. You can learn more about how each of these terms contribute to a more consentful software through the [Consentful Tech Zine](https://www.andalsotoo.net/wp-content/uploads/2018/10/Building-Consentful-Tech-Zine-SPREADS.pdf), published by Una Lee and Dann Toliver under [CC-BY 2017](https://creativecommons.org/licenses/by/4.0/legalcode). 19 | 20 | ## The Foundations 21 | 22 | Togethernet is a consentful digital archiving software in the form of a desktop web app that allows both peer-to-peer (P2P), traceless messaging as well as archived communications. 23 | 24 | ### Who should use this? 25 | 26 | This software is for you if you are an artist, designer, community organizer, technologist, researcher, educator, or student who is interested in – 27 | 28 | - Exiting surveillance capitalism 29 | - Participating in consentful communications on the web 30 | - Building community-owned digital archives 31 | 32 | Togethernet is a software in pursuit of intentional and ongoing consentful engagement that prioritizes the digital autonomy and privacy of our users. We do not sell any of our users’ data nor does the software run on advertising. Those who are seeking a digital environment designed with safety in mind are encouraged to use Togethernet. 33 | 34 | ### Access 35 | 36 | Togethernet aspires towards accessibility and inclusivity. We acknowledge that the alpha version of the software falls short of that aspiration, as it is not currently fully accessible to the Blind and low-vision community. It is our intention to dedicate future resources towards ensuring that upcoming versions of Togethernet are designed with the needs of this community at the forefront. 37 | 38 | ### Who shouldn’t use this? 39 | 40 | Togethernet uses WebRTC to conduct peer-to-peer communications, which is encrypted by default but exposes the participant's public IP address in the process of communicating to servers. This software will most likely not have adequate privacy protections for individuals working with highly sensitive issues and who are concerned with targeted surveillance. 41 | 42 | Instead we recommend you looking into [Signal](https://www.signal.org/), an end-to-end encrypted messenger that has been tested by cybersecurity experts all over the world and is trusted by journalists and activists who are working with sensitive content. 43 | 44 | Additionally, this software is not intended for people who are not invested in consentful engagement with others. While the establishment of a consentful digital environment begins within its design infrastructure, the maintenance of this environment relies on a dedicated community. Individuals whose intentions are to cause harm should not use Togethernet. 45 | 46 | ### On Developer Responsibilities 47 | 48 | Developers who choose to adapt Togethernet’s open-source code in their projects, licenced under [ACSL 1.4](https://github.com/together-support/togethernet/blob/main/LICENSE.md),(2) are expected to adhere to the principles of consent outlined and prioritized by this software, and not alter the code in a way that violates these principles of consent. 49 | 50 | It is imperative that open-source usage of this code aligns with its intended ethos of consent – developers who violate the privacy agreements established in this Code of Consent will be required to disaffiliate from the “Togethernet” name, and remove this Code of Consent document from the code entirely. 51 | 52 | We strongly encourage developers to review the [Consentful Tech Zine](https://www.andalsotoo.net/wp-content/uploads/2018/10/Building-Consentful-Tech-Zine-SPREADS.pdf) prior to altering the code in order to ensure that the software remains true to its foundational principles. 53 | 54 | #### System Requirements 55 | 56 | Togethernet is a desktop web app that launches inside the browser. Currently the application runs as intended on Firefox (version 85.0.2) and Chrome (version 88.0.4324.150). 57 | 58 | #### Capacity 59 | 60 | Togethernet intends to facilitate consentful communications, and as we know consent is easier to negotiate within a micro-community. Therefore by default the application will accommodate a maximum of 12 simultaneous participants.(3) 61 | 62 | #### Demo 63 | 64 | We invite you to [visit this link](https://togethernet.herokuapp.com/) to try out a demo version of the software. In order to test out the collaborative features, we encourage you to invite a friend to join. 65 | 66 | ## Software Architecture 67 | 68 | ### Peer to Peer Consent: Ephemeral Channel 69 | 70 | On a peer-to-peer level, Togethernet is designed to invite you to say “YES!” along the way. 71 | 72 | While using Togethernet, all text-based communications with your community take place under the Ephemeral Channels. Operating under the logic of peer-to-peer consent, the communication records created during the live session in Ephemeral Mode will be permanently deleted once the last participant closes their browser tab. To prevent messages from being deleted, participants need to go through the Consent to Archive process in order to publish the content to the Archival Channel, allowing the users to make informed decisions regarding their own privacy level while using Togethernet. 73 | 74 | In WebRTC, real time communications are achieved without needing to install any additional applications or plug-ins. The information that is transmitted between your browsers is anonymously and freely given by you as a user. There are no logins on Togethernet because on this peer-to-peer level, your identity is not recorded on a centralized system. Furthermore, WebRTC encrypts all data that is sent through it in order to protect users’ communications. 75 | 76 | If you are feeling confused at this point, we invite you to take a moment to imagine: 77 | 78 | You and a friend are meeting in the street. Your intentions are to share private information with one another, but prior to that happening, you both require exchanging a secret handshake. The information you share is functionally protected by the mediating act of completing the handshake, whose steps are known only by the two of you. This is akin to the level of privacy enabled by WebRTC’s encryption in peer-to-peer mode. 79 | 80 | Once your peers receive data sent from your browser, you have the agency to remove this data by deleting the messages. In the Ephemeral Channel, messages disappear once the last person in a given chat session departs. If you leave a session but return before the last person has departed, your messages will still be visible and accessible to those in the chat. 81 | 82 | #### The Role of the Server 83 | 84 | While WebRTC is distinctive in that it enables encrypted peer-to-peer connections via browsers, servers are still required in order to facilitate these connections. Think of the server as an impartial mediator. 85 | 86 | For a connection to be established between you and a peer, information on your respective locations must be exchanged over the server. The information that is given pertains to your local IP address (+ more), which takes place inside your browser and is executed by Javascript and being sent out to what is called the signaling server.(4) Once location data has been sent to the signaling server, it is not retrievable. 87 | 88 | Communication between you and your peer happens via offers and answers that are mediated by this signaling server. These offers, sent by the initiating browser to a receiving browser, occur once you have consented to begin an exchange on the software at the start of the software. 89 | 90 | ### Peer-to-Server: Archival Channel 91 | 92 | The Archival Channel operates under the logic of peer-to-server consent, where communications are published to a centralized database. 93 | 94 | Once messages are published to the Archival Channel, users can enter the room and become an editor. The first person to enter the room is automatically the editor. Subsequent users who enter the chat can become the editor by selecting the function in the bottom-left corner.(5) 95 | 96 | The editor is armed with the ability to delete a message without necessarily having collective consent; as such, this role is one that requires an abundance of care and trust by peer users. It is encouraged that users communicate with their peers prior to removing messages from the archive. When messages are deleted, a trace is left in the archive that labels the removed message as having been deleted by the user. 97 | 98 | The Archival Channel’s default database runs on [PostGres](https://www.postgresql.org/), an open source database that users can run on their own, or a third-party server. Messages in the Archival Channel can be downloaded into an HTML page, which gives users the ability to host the archive of their conversation on their own website if desired. 99 | 100 | It is important to note that data stored on third-party servers might not necessarily adhere to the same consent principles that are outlined in this document. A list of third-party servers and their consent adherence can be found [here](https://en.gendersec.train.tacticaltech.org/downloads/en/autonomous_and_ethical_hosting_providers.pdf). 101 | 102 | ### Recap: Adherence to F.R.I.E.S. Model 103 | 104 | To understand and place emphasis on how this software adheres to the Planned Parenthood F.R.I.E.S. consent framework, below are Togethernet’s answers to questions posed to developers in the [Consenftul Tech Zine](https://www.andalsotoo.net/wp-content/uploads/2018/10/Building-Consentful-Tech-Zine-SPREADS.pdf). 105 | 106 | Are people **Freely** giving us their consent to access and store parts of their digital bodies? 107 | 108 | Yes - this document is intended to arm prospective Togethernet users with an understanding of how their digital bodies are accessed, stored, and protected while using the software. Prospective users are invited to reach out with any questions or concerns in case they are not comfortable with the terms outlined here. 109 | 110 | Does your system allow for **Reversible** consent? How easy is it for people to withdraw both their consent and their data? 111 | 112 | Yes - in order for messages to be archived, collective consent from all parties in the conversation is required. This consent can be revoked at any time by any individual in the conversation. Revoking consent removes users’ data from the archive, but does not preclude users from continuing to use the software. 113 | 114 | How are we making sure that the consent is **Enthusiastic**? Is there an option not to use this technology, which means that people use it because they prefer to use it? 115 | 116 | In order to use Togethernet, it is required to read through and agree to the Code of Consent, which is aimed at clearly outlining the agreements behind the software. We offer this software, and the embedded Code of Consent as an alternative to softwares that are rooted in surveillance capitalism. For users whose privacy needs are not met by Togethernet, we invite them to explore alternatives such as Signal. 117 | 118 | How are we fully and clearly **Informing** people about what they’re consenting to? Is important information about the risks a user might be exposed to buried in the fine print of the terms & conditions? 119 | 120 | Through making use of repetition and robust citation, the information in this document is intended to be clear and consistent. Our intention is to be transparent in the potential risks involved with use. 121 | 122 | This Code of Consent is embedded as part of Togethernet’s Open Source software. As such, it is possible that this software will be re-used and altered in a way such that the code of consent is broken. In such an instance, the developers must take out the code of consent document from the software and disaffiliate from the Togethernet name. 123 | 124 | Can people consent to **Specific** things in this system and not others? Can people select which aspects of their digital bodies they want to have exposed and have stored? 125 | 126 | Yes - this is accomplished via the consent to archive function, which requests the consent of all participants prior to moving messages into the centralized database or third-party server. Consent to archive must be unanimous - if one participant in the group revokes their consent, the message is removed from the Archival Channel for all parties. 127 | 128 | ## Credits 129 | 130 | [Consentful Tech Zine](https://www.andalsotoo.net/wp-content/uploads/2018/10/Building-Consentful-Tech-Zine-SPREADS.pdf), written by Una Lee and Dann Toliver and published under CC-BY in 2017 had the foresight of using F.R.I.E.S. (Freely given, Informed, Specific, Reversible, Enthusiastic), a model of consent by Planned Parenthood as a metric to assess data consent in the digital sphere. 131 | 132 | Togethernet’s Code of Consent was compiled by Neema Githere and Xin Xin. 133 | 134 | -------------------------------------------- 135 | 136 | 137 | If you feel you understand and agree to Togethernet’s Code of Consent, we invite you to continue onwards to the [orientation](https://togethernet.org/orientation.html). If you do not feel comfortable with the information that has been presented thus far, we invite you to stop to ask a question or present your concern. If you feel you fall somewhere in between, we encourage you to take your time digesting this information and return at your own pace. 138 | 139 | ---------------------------------------------- 140 | 141 | Endnote: 142 | 143 | (1) See Also: [Data Trauma](https://www.bitchmedia.org/article/digital-doulas-fixing-data-trauma) by Olivia M. Ross. 144 | (2) We also ask that a robust politics of citation be adhered to in the adaptation and use of this code and its embedded Code of Consent. 145 | (3) It is possible to increase the number of participants by changing the environment variable inside the source code, however we don’t recommend doing so without first gaining a good familiarity with how the application works. 146 | (4) To learn more about the role of the signaling server, we invite you to visit [WebRTC.org](https://webrtc.org/getting-started/peer-connections). 147 | (5) There can only be one editor at a time in the Archival Channel, and since users maintain default anonymity even in this mode, participants are encouraged to label themselves with a recognizable name (though this does not necessarily need to be a formal or ‘real’ name). 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | -------------------------------------------------------------------------------- /src/public/js/EphemeralMessage/index.js: -------------------------------------------------------------------------------- 1 | import store from '@js/store'; 2 | import { renderEphemeralDetails } from '@js/EphemeralMessageRenderer'; 3 | import isPlainObject from 'lodash/isPlainObject'; 4 | import { 5 | addSystemConfirmMessage, 6 | addSystemNotifyMessage, 7 | addSystemPopupMessage, 8 | clearSystemPopupMessage, 9 | clearSystemMessage 10 | } from '@js/Togethernet/systemMessage'; 11 | import { 12 | systemConfirmMsgConfirmConsentToArchive, 13 | systemConfirmMsgConsentToArchive, 14 | systemConfirmMsgInitiateConsentToArchiveProcess, 15 | systemNotifyMsgBlockConsentToArchive, 16 | systemNotifyMsgGiveConsentToArchive, 17 | systemPopupMsgConsentToArchive 18 | } from '@js/constants.js'; 19 | import sample from 'lodash/sample'; 20 | import transform from 'lodash/transform'; 21 | import pick from 'lodash/pick'; 22 | 23 | export default class EphemeralMessage { 24 | constructor(props) { 25 | this.messageData = { 26 | ...props, 27 | id: `${props.roomId}-${props.gridColumnStart}-${props.gridRowStart}`, 28 | }; 29 | 30 | if (props.inConsentToArchiveProcess) { 31 | const { consentToArchiveInitiator } = props; 32 | this.initConsentToArchiveReceived({ consentToArchiveInitiator }); 33 | } 34 | 35 | if ( 36 | props.threadEntryMessageId && 37 | !props.threadPreviousMessageId && 38 | !props.threadNextMessageId 39 | ) { 40 | this.setThreadInformation(); 41 | } 42 | } 43 | 44 | setThreadInformation = () => { 45 | const { roomId, threadEntryMessageId } = this.messageData; 46 | const room = store.getRoom(roomId); 47 | 48 | const entryMessage = room.ephemeralHistory[threadEntryMessageId]; 49 | const threadTail = entryMessage.getThreadTail(); 50 | 51 | threadTail.messageData.threadNextMessageId = this.messageData.id; 52 | this.messageData.threadPreviousMessageId = threadTail.messageData.id; 53 | }; 54 | 55 | getThreadTail = () => { 56 | const { roomId, threadNextMessageId } = this.messageData; 57 | if (!threadNextMessageId) { 58 | return this; 59 | } 60 | 61 | const ephemeralHistory = store.getRoom(roomId).ephemeralHistory; 62 | let threadNextMessage = ephemeralHistory[threadNextMessageId]; 63 | while (threadNextMessage.messageData.threadNextMessageId) { 64 | threadNextMessage = 65 | ephemeralHistory[threadNextMessage.messageData.threadNextMessageId]; 66 | } 67 | 68 | return threadNextMessage; 69 | }; 70 | 71 | $textRecord = () => { 72 | return $(`#${this.messageData.id}`); 73 | }; 74 | 75 | renderEphemeralMessageDetails = () => { 76 | $('.nonPinnedMessages').empty(); 77 | $('.pinnedMessages').empty(); 78 | $('.pinnedMessagesSummary i').addClass('collapsed'); 79 | 80 | if ( 81 | this.messageData.threadPreviousMessageId || 82 | this.messageData.threadNextMessageId 83 | ) { 84 | this.renderThreadedDetails(); 85 | } else { 86 | this.renderSingleEphemeralDetail(); 87 | } 88 | $('.ephemeralMessageContainer').finish().show(); 89 | }; 90 | 91 | renderSingleEphemeralDetail = () => { 92 | const { isPinned, id, roomId } = this.messageData; 93 | 94 | const $messageContent = renderEphemeralDetails(roomId, id); 95 | if (isPinned) { 96 | $messageContent.appendTo($('.pinnedMessages')); 97 | $('.pinnedMessages').show(); 98 | } else { 99 | $messageContent.appendTo($('.nonPinnedMessages')); 100 | } 101 | }; 102 | 103 | renderThreadedDetails = () => { 104 | const { 105 | id, 106 | roomId, 107 | threadNextMessageId, 108 | threadPreviousMessageId, 109 | } = this.messageData; 110 | const { ephemeralHistory } = store.getRoom(roomId); 111 | 112 | const $thisMessageContent = renderEphemeralDetails(roomId, id); 113 | $thisMessageContent.appendTo($('.nonPinnedMessages')); 114 | 115 | let travelThreadNextMessageId = threadNextMessageId; 116 | let travelCurrentThreadTail = id; 117 | 118 | while (travelThreadNextMessageId) { 119 | const $messageContent = renderEphemeralDetails( 120 | roomId, 121 | travelThreadNextMessageId 122 | ); 123 | $messageContent.insertAfter( 124 | `#ephemeralDetails-${travelCurrentThreadTail}` 125 | ); 126 | travelCurrentThreadTail = travelThreadNextMessageId; 127 | const record = ephemeralHistory[travelThreadNextMessageId]; 128 | travelThreadNextMessageId = record.messageData.threadNextMessageId; 129 | } 130 | 131 | let travelThreadPreviousMessageId = threadPreviousMessageId; 132 | let travelCurrentThreadHead = id; 133 | while (travelThreadPreviousMessageId) { 134 | const $messageContent = renderEphemeralDetails( 135 | roomId, 136 | travelThreadPreviousMessageId 137 | ); 138 | $messageContent.insertBefore( 139 | `#ephemeralDetails-${travelCurrentThreadHead}` 140 | ); 141 | travelCurrentThreadHead = travelThreadPreviousMessageId; 142 | const record = ephemeralHistory[travelThreadPreviousMessageId]; 143 | travelThreadPreviousMessageId = 144 | record.messageData.threadPreviousMessageId; 145 | } 146 | }; 147 | 148 | purgeSelf = () => { 149 | if ( 150 | this.messageData.threadNextMessageId || 151 | this.messageData.threadPreviousMessageId 152 | ) { 153 | this.handleRemoveMessageInThread(); 154 | } else { 155 | this.handleRemoveSingleMessage(); 156 | } 157 | }; 158 | 159 | handleRemoveSingleMessage = () => { 160 | const room = store.getRoom(this.messageData.roomId); 161 | const $textRecord = this.$textRecord(); 162 | 163 | $('.nonPinnedMessages').empty(); 164 | $('.ephemeralMessageContainer').hide(); 165 | $textRecord.finish().animate( 166 | { opacity: 0 }, 167 | { 168 | complete: () => { 169 | $textRecord.remove(); 170 | store.sendToPeers({ 171 | type: 'removeEphemeralMessage', 172 | data: { 173 | messageId: this.messageData.id, 174 | roomId: this.messageData.roomId, 175 | }, 176 | }); 177 | room.removeEphemeralHistory(this.messageData.id); 178 | }, 179 | } 180 | ); 181 | }; 182 | 183 | handleRemoveMessageInThread = () => { 184 | store.sendToPeers({ 185 | type: 'removeMessageInThread', 186 | data: { 187 | roomId: this.messageData.roomId, 188 | messageId: this.messageData.id, 189 | }, 190 | }); 191 | this.clearMessageInThread(); 192 | }; 193 | 194 | clearMessageInThread = () => { 195 | this.messageData.content = '[message removed]'; 196 | this.messageData.name = ''; 197 | $(`#ephemeralDetails-${this.messageData.id}`).text('[message removed]'); 198 | }; 199 | 200 | castVote = (option) => { 201 | const { votingRecords, id } = this.messageData; 202 | const myId = store.getCurrentUser().socketId; 203 | const myCurrentVote = isPlainObject(votingRecords) && votingRecords[myId]; 204 | const data = { 205 | textRecordId: id, 206 | option, 207 | ...store.getCurrentUser().getProfile(), 208 | }; 209 | 210 | if (myCurrentVote) { 211 | if (myCurrentVote === option) { 212 | store.sendToPeers({ type: 'voteRetracted', data }); 213 | this.voteRetracted(data); 214 | } else { 215 | store.sendToPeers({ type: 'voteChanged', data }); 216 | this.voteChanged(data); 217 | } 218 | } else { 219 | store.sendToPeers({ type: 'voteCasted', data }); 220 | this.voteReceived(data); 221 | } 222 | }; 223 | 224 | voteReceived = ({ option, socketId }) => { 225 | const { votes = {}, votingRecords, id } = this.messageData; 226 | this.messageData.votes = { 227 | ...votes, 228 | [option]: isNaN(votes[option]) ? 1 : votes[option] + 1, 229 | }; 230 | this.messageData.votingRecords = { 231 | ...votingRecords, 232 | [socketId]: option, 233 | }; 234 | 235 | $(`#ephemeralDetails-${id} .voteOption.${option} .voteCount`).text( 236 | this.messageData.votes[option] 237 | ); 238 | }; 239 | 240 | voteRetracted = ({ option, socketId }) => { 241 | const { votes = {}, id } = this.messageData; 242 | this.messageData.votes = { 243 | ...votes, 244 | [option]: isNaN(votes[option]) ? 1 : votes[option] - 1, 245 | }; 246 | 247 | if (isPlainObject(delete this.messageData.votingRecords)) { 248 | delete this.messageData.votingRecords[socketId]; 249 | } 250 | 251 | $(`#ephemeralDetails-${id} .voteOption.${option} .voteCount`).text( 252 | this.messageData.votes[option] 253 | ); 254 | }; 255 | 256 | voteChanged = ({ option, socketId }) => { 257 | const currentVote = this.messageData.votingRecords[socketId]; 258 | this.voteRetracted({ option: currentVote, socketId }); 259 | this.voteReceived({ option, socketId }); 260 | }; 261 | 262 | createPoll = () => { 263 | const { roomId, id } = this.messageData; 264 | this.pollCreated(); 265 | store.sendToPeers({ 266 | type: 'pollCreated', 267 | data: { roomId, textRecordId: id }, 268 | }); 269 | }; 270 | 271 | pollCreated = () => { 272 | this.messageData.canVote = true; 273 | this.votes = { 274 | yes: 0, 275 | no: 0, 276 | neutral: 0, 277 | }; 278 | if ($(`#ephemeralDetails-${this.messageData.id}`).is(':visible')) { 279 | this.renderEphemeralMessageDetails(); 280 | } 281 | }; 282 | 283 | consentToArchiveButtonClicked = () => { 284 | addSystemConfirmMessage(systemConfirmMsgConfirmConsentToArchive, this); 285 | }; 286 | 287 | initiateConsentToArchiveProcess = () => { 288 | const { roomId, id } = this.messageData; 289 | addSystemConfirmMessage(systemConfirmMsgInitiateConsentToArchiveProcess); 290 | store.sendToPeers({ 291 | type: 'initConsentToArchiveProcess', 292 | data: { 293 | roomId, 294 | messageId: id, 295 | }, 296 | }); 297 | 298 | this.performConsentToArchive(); 299 | }; 300 | 301 | initConsentToArchiveReceived = ({ consentToArchiveInitiator }) => { 302 | if (consentToArchiveInitiator != null) { 303 | addSystemConfirmMessage({ 304 | msgType: systemConfirmMsgConsentToArchive.msgType, 305 | msgHeader: systemConfirmMsgConsentToArchive.msgHeader, 306 | msgBody: `${consentToArchiveInitiator} ${systemConfirmMsgConsentToArchive.msgBody}`, 307 | msgFooter: systemConfirmMsgConsentToArchive.msgFooter, 308 | yayText: systemConfirmMsgConsentToArchive.yayText, 309 | nayText: systemConfirmMsgConsentToArchive.nayText, 310 | yayBtn: systemConfirmMsgConsentToArchive.yayBtn, 311 | nayBtn: systemConfirmMsgConsentToArchive.nayBtn, 312 | }); 313 | } 314 | 315 | this.messageData.consentToArchiveInitiator = consentToArchiveInitiator; 316 | this.performConsentToArchive(); 317 | }; 318 | 319 | performConsentToArchive = () => { 320 | this.messageData.inConsentToArchiveProcess = true; 321 | const { roomId } = this.messageData; 322 | addSystemPopupMessage(systemPopupMsgConsentToArchive); 323 | this.$textRecord().addClass('inConsentProcess'); 324 | $('#user .avatar').addClass('inConsentProcess'); 325 | $('.ephemeralMessageContainer').addClass('inConsentProcess'); 326 | $(`#${roomId}`).find('.consentToArchiveOverlay').show(); 327 | $(`#${roomId}`).off('keyup', this.consentToArchiveActions); 328 | $(`#${roomId}`).on('keyup', this.consentToArchiveActions); 329 | $('.initConsentToArchiveProcess').hide(); 330 | $('#writeMessage').attr('disabled', 'disabled'); 331 | $('#writeMessage').attr('placeholder', 'Messaging currently unavailable'); 332 | 333 | this.getMessagesInThread().forEach((message) => 334 | message.$textRecord().addClass('inConsentProcess') 335 | ); 336 | }; 337 | 338 | getNextMessage = () => { 339 | const { roomId, threadNextMessageId } = this.messageData; 340 | if (threadNextMessageId) { 341 | const { ephemeralHistory } = store.getRoom(roomId); 342 | return ephemeralHistory[threadNextMessageId]; 343 | } 344 | }; 345 | 346 | getPreviousMessage = () => { 347 | const { roomId, threadPreviousMessageId } = this.messageData; 348 | if (threadPreviousMessageId) { 349 | const { ephemeralHistory } = store.getRoom(roomId); 350 | return ephemeralHistory[threadPreviousMessageId]; 351 | } 352 | }; 353 | 354 | getMessagesInThread = () => { 355 | const messagesInThread = [this]; 356 | 357 | let travelThreadNextMessage = this.getNextMessage(); 358 | while (travelThreadNextMessage) { 359 | messagesInThread.push(travelThreadNextMessage); 360 | travelThreadNextMessage = travelThreadNextMessage.getNextMessage(); 361 | } 362 | 363 | let travelThreadPreviousMessage = this.getPreviousMessage(); 364 | while (travelThreadPreviousMessage) { 365 | messagesInThread.push(travelThreadPreviousMessage); 366 | travelThreadPreviousMessage = travelThreadPreviousMessage.getPreviousMessage(); 367 | } 368 | 369 | return messagesInThread; 370 | }; 371 | 372 | consentToArchiveActions = (e) => { 373 | const {consentToArchiveRecords, inConsentToArchiveProcess} = this.messageData; 374 | if (!inConsentToArchiveProcess) { 375 | return; 376 | } 377 | 378 | const alreadyGaveConsent = isPlainObject(consentToArchiveRecords) && consentToArchiveRecords[store.getCurrentUser().socketId]; 379 | 380 | if (e.key === 'y') { 381 | if (!alreadyGaveConsent) { 382 | this.giveConsentToArchive(); 383 | } 384 | } else if (e.key === 's') { 385 | this.blockConsentToArchive(); 386 | } 387 | }; 388 | 389 | giveConsentToArchive = () => { 390 | this.consentToArchiveReceived(store.getCurrentUser()); 391 | addSystemNotifyMessage(systemNotifyMsgGiveConsentToArchive); 392 | const { id, roomId } = this.messageData; 393 | const room = store.getRoom(roomId); 394 | store.sendToPeers({ 395 | type: 'giveConsentToArchive', 396 | data: { 397 | roomId, 398 | messageId: id, 399 | }, 400 | }); 401 | 402 | if (Object.keys(this.messageData.consentToArchiveRecords).length === Object.keys(room.memberships.members).length) { 403 | this.archiveMessage(); 404 | } 405 | } 406 | 407 | consentToArchiveReceived = (user) => { 408 | const {socketId, avatar} = user.getProfile(); 409 | const {consentToArchiveRecords = {}} = this.messageData; 410 | if (!consentToArchiveRecords[socketId]) { 411 | this.messageData.consentToArchiveRecords = { 412 | ...consentToArchiveRecords, 413 | [socketId]: user.getProfile(), 414 | }; 415 | } 416 | 417 | const size = Math.round( 418 | this.$textRecord().outerWidth() / 419 | (Math.floor( 420 | Math.sqrt( 421 | Object.keys(this.messageData.consentToArchiveRecords).length 422 | ) 423 | ) + 424 | 1) 425 | ); 426 | const $consentIndicator = $(''); 427 | $consentIndicator.css({ backgroundColor: avatar }); 428 | $consentIndicator.width(size); 429 | $consentIndicator.height(size); 430 | 431 | this.$textRecord() 432 | .find('.consentIndicator') 433 | .each((_, el) => { 434 | $(el).width(size); 435 | $(el).height(size); 436 | }); 437 | 438 | $consentIndicator.appendTo(this.$textRecord()); 439 | } 440 | 441 | getArchivedMessageBody = () => { 442 | const { 443 | content, 444 | name, 445 | roomId, 446 | consentToArchiveRecords, 447 | threadNextMessageId, 448 | threadPreviousMessageId, 449 | } = this.messageData; 450 | let body = { 451 | author: name, 452 | content: content, 453 | room_id: roomId, 454 | participant_ids: Object.keys(consentToArchiveRecords), 455 | participant_names: Object.values(consentToArchiveRecords).map( 456 | (r) => r.name 457 | ), 458 | }; 459 | 460 | if (threadNextMessageId || threadPreviousMessageId) { 461 | body.message_type = 'thread'; 462 | body.thread_data = transform( 463 | this.getMessagesInThread(), 464 | (result, record) => { 465 | result[record.messageData.id] = pick(record.messageData, [ 466 | 'name', 467 | 'content', 468 | 'threadNextMessageId', 469 | 'threadPreviousMessageId', 470 | ]); 471 | }, 472 | {} 473 | ); 474 | } else { 475 | body.message_type = 'text_message'; 476 | } 477 | return JSON.stringify(body); 478 | }; 479 | 480 | archiveMessage = () => { 481 | const { id, roomId } = this.messageData; 482 | const body = this.getArchivedMessageBody(); 483 | fetch('/archive', { 484 | method: 'POST', 485 | headers: { 'Content-Type': 'application/json' }, 486 | body, 487 | }) 488 | .then((response) => response.json()) 489 | .then((archivedMessage) => { 490 | this.messageArchived({ archivedMessageId: archivedMessage.id }); 491 | store.sendToPeers({ 492 | type: 'messageArchived', 493 | data: { 494 | roomId, 495 | messageId: id, 496 | archivedMessageId: archivedMessage.id, 497 | }, 498 | }); 499 | }) 500 | .catch((e) => console.log(e)); 501 | }; 502 | 503 | messageArchived = ({ archivedMessageId }) => { 504 | const consentColors = Object.values( 505 | this.messageData.consentToArchiveRecords 506 | ).map((profile) => profile.avatar); 507 | this.getMessagesInThread().forEach((record) => { 508 | record.messageData.archivedMessageId = archivedMessageId; 509 | record.$textRecord().find('.consentIndicator').remove(); 510 | Array.from({ length: 25 }).forEach(() => { 511 | const color = sample(consentColors); 512 | const $consentIndicator = $( 513 | '' 514 | ); 515 | $consentIndicator.css({ backgroundColor: color }); 516 | $consentIndicator.appendTo(record.$textRecord()); 517 | }); 518 | }); 519 | 520 | this.finishConsentToArchiveProcess(); 521 | }; 522 | 523 | blockConsentToArchive = () => { 524 | this.consentToArchiveBlocked(); 525 | addSystemNotifyMessage(systemNotifyMsgBlockConsentToArchive); 526 | 527 | const { id, roomId } = this.messageData; 528 | store.sendToPeers({ 529 | type: 'blockConsentToArchive', 530 | data: { 531 | roomId, 532 | messageId: id, 533 | }, 534 | }); 535 | }; 536 | 537 | consentToArchiveBlocked = () => { 538 | this.$textRecord().find('.consentIndicator').remove(); 539 | this.finishConsentToArchiveProcess(); 540 | this.messageData.consentToArchiveRecords = {}; 541 | this.messageData.archivedMessageId = null; 542 | $(`#ephemeralDetails-${this.messageData.id}`) 543 | .find('.initConsentToArchiveProcess') 544 | .removeClass('checked'); 545 | }; 546 | 547 | finishConsentToArchiveProcess = () => { 548 | this.messageData.inConsentToArchiveProcess = false; 549 | 550 | const { roomId } = this.messageData; 551 | 552 | this.getMessagesInThread().forEach((record) => { 553 | record.$textRecord().removeClass('inConsentProcess'); 554 | }); 555 | 556 | $(`#${roomId}`).find('#user .avatar').removeClass('inConsentProcess'); 557 | $(`#${roomId}`).find('.consentToArchiveOverlay').hide(); 558 | $(`#${roomId}`).off('keyup', this.consentToArchiveActions); 559 | clearSystemPopupMessage(); 560 | $('#writeMessage').removeAttr('disabled'); 561 | $('#writeMessage').attr('placeholder', 'Type your message here'); 562 | }; 563 | 564 | indicateMessagesInThread = () => { 565 | this.getMessagesInThread().forEach((record) => 566 | record.$textRecord().finish().find('.threadedRecordOverlay').show() 567 | ); 568 | }; 569 | 570 | indicateThreadForbidden = () => { 571 | this.getMessagesInThread().forEach((record) => 572 | record 573 | .$textRecord() 574 | .finish() 575 | .find('.threadedRecordForbiddenOverlay') 576 | .show() 577 | ); 578 | }; 579 | 580 | render = () => { 581 | const { 582 | id, 583 | gridColumnStart, 584 | gridRowStart, 585 | avatar, 586 | roomId, 587 | } = this.messageData; 588 | 589 | const $ephemeralRecordTemplate = $( 590 | document.getElementById('ephemeralRecordTemplate').content.cloneNode(true) 591 | ); 592 | const $ephemeralRecord = $ephemeralRecordTemplate.find('.ephemeralRecord'); 593 | 594 | $ephemeralRecord.attr('id', id); 595 | $ephemeralRecord[0].style.gridColumnStart = gridColumnStart; 596 | $ephemeralRecord[0].style.gridRowStart = gridRowStart; 597 | 598 | $ephemeralRecord 599 | .on('mouseenter', this.renderEphemeralMessageDetails) 600 | .on('mouseleave', () => { 601 | if (!store.getCurrentUser().getAdjacentMessageIds().includes(id)) { 602 | $('.ephemeralMessageContainer').finish().fadeOut(500); 603 | } 604 | }); 605 | 606 | $ephemeralRecord.on('adjacent', this.renderEphemeralMessageDetails); 607 | $ephemeralRecord.on('indicateThread', this.indicateMessagesInThread); 608 | $ephemeralRecord.on( 609 | 'indicateThreadForbidden', 610 | this.indicateThreadForbidden 611 | ); 612 | 613 | $ephemeralRecord.css({ backgroundColor: avatar }); 614 | $ephemeralRecord.appendTo($(`#${roomId}`)); 615 | }; 616 | } 617 | --------------------------------------------------------------------------------