Adding Room type with Converse.js replacing jitsi #385
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,100 @@ | ||
| import React, { useEffect } from "react"; | ||
| import Config from "./Config.jsx"; | ||
|
|
||
| /** | ||
| * This component is used to render a Converse.js chat component on the | ||
| * left side and an IFrame on the right. While this component does have | ||
| * the jitsi-video class in the render it is only for placement: there | ||
| * is no jitsi video in this component. | ||
| * | ||
| * This component works in conjunction with the CHATSTREAM room type. | ||
| * | ||
| * @param props a combo of roomData and jitsiData | ||
| * @returns | ||
| */ | ||
| export const ChatStreamRoom = ({ | ||
| id: roomId, | ||
| displayName, | ||
| iframeOptions: { src }, | ||
| }) => { | ||
| // register the 'jitsi-plugin' and initialize converse and cleanup after close | ||
| useEffect(() => { | ||
| let logout = null; | ||
| let plugins = null; | ||
|
|
||
| // configure the 'jitsi-plugin' to get our hands on the converse api logout | ||
| try { | ||
| window.converse.plugins.add("jitsi-plugin", { | ||
| initialize: function () { | ||
| logout = this._converse.api.user.logout; | ||
| plugins = this._converse.pluggable.plugins; | ||
| }, | ||
| }); | ||
| } catch (error) { | ||
| // do nothing since the plugin is already registered | ||
| console.error(error); | ||
| } | ||
|
|
||
| // initialize converse | ||
| window.converse.initialize({ | ||
| authentication: "anonymous", | ||
| auto_login: true, | ||
| auto_join_rooms: [ | ||
| { jid: `${roomId}@muc.party.jitsi`, nick: displayName }, | ||
| ], | ||
| bosh_service_url: `${Config.baseUrl}jitsi/http-bind`, | ||
| jid: "guest.party.jitsi", | ||
| singleton: true, | ||
| hide_offline_users: true, | ||
| clear_cache_on_logout: true, | ||
| time_format: "hh:mm a", | ||
| visible_toolbar_buttons: { | ||
| call: false, | ||
| spoiler: false, | ||
| emoji: true, | ||
| toggle_occupants: false, | ||
| }, | ||
| whitelisted_plugins: ["jitsi-plugin"], | ||
| view_mode: "embedded", | ||
| }); | ||
|
|
||
| // use MutationObserver to restucture the chatbox | ||
| const observer = new MutationObserver((muts) => { | ||
| if (document.querySelector(".chatbox-title__buttons") !== null) { | ||
| document.querySelector(".chat-head").remove(); | ||
| } | ||
|
|
||
| if (document.querySelector(".send-button") !== null) { | ||
| document.querySelector(".send-button").remove(); | ||
| observer.disconnect(); | ||
| } | ||
| }); | ||
|
|
||
| observer.observe(document, { | ||
| childList: true, | ||
| attributes: true, | ||
| subtree: true, | ||
| }); | ||
|
|
||
| // listen to beforeunload to logout and cleanup | ||
| window.addEventListener("beforeunload", () => { | ||
| plugins["jitsi-plugin"] = undefined; | ||
| logout(); | ||
| }); | ||
|
|
||
| // call the converse api logout at cleanup | ||
| return () => { | ||
| plugins["jitsi-plugin"] = undefined; | ||
| logout(); | ||
| }; | ||
| }, []); | ||
|
|
||
| return ( | ||
| <div className="iframe-room"> | ||
| <div className="jitsi-video"></div> | ||
| <div className="iframe-section"> | ||
| <iframe src={src} height="100%" width="100%" frameBorder="0px"></iframe> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,154 @@ | ||
| $mobile_landscape_height: 450px !default; | ||
| $mobile_portrait_length: 480px !default; | ||
|
|
||
| #conversejs { | ||
| position: absolute !important; | ||
| top: 10% !important; | ||
| bottom: auto !important; | ||
| width: 45vw !important; | ||
| left: 1vw !important; | ||
| height: 66% !important; | ||
| z-index: 9 !important; | ||
|
|
||
| .badge, | ||
| .chat-info, | ||
| .hide-occupants { | ||
| display: none !important; | ||
| } | ||
|
|
||
| .chat-head { | ||
| background-color: $background-color !important; | ||
| } | ||
|
|
||
| .occupants-heading { | ||
| color: $background-color !important; | ||
| } | ||
|
|
||
| .occupant-status { | ||
| vertical-align: sub; | ||
| } | ||
|
|
||
| .occupant-nick { | ||
| font-size: 0.9rem; | ||
| } | ||
|
|
||
| .chatroom { | ||
| // color themes | ||
| .separator { | ||
| border-bottom: 2px solid $chat-separator-bars !important; | ||
| } | ||
|
|
||
| .separator-text { | ||
| color: $chat-separator-text !important; | ||
| background-color: $chat-separator-text-bg !important; | ||
| } | ||
|
|
||
| .chat-content { | ||
| background-color: $chat-content; | ||
| } | ||
|
|
||
| .chat-msg__author { | ||
| color: $chat-msg-author !important; | ||
| } | ||
|
|
||
| .chat-msg__time { | ||
| color: $chat-msg-time !important; | ||
| } | ||
|
|
||
| .chat-msg__text { | ||
| color: $chat-msg-text !important; | ||
| } | ||
|
|
||
| .fa-bars { | ||
| color: $chat-msg-menu !important | ||
| } | ||
|
|
||
| .dropdown-menu { | ||
| background-color: $chat-msg-menu-bg !important; | ||
| } | ||
|
|
||
| .chat-msg__action { | ||
| color: $chat-msg-menu-items !important; | ||
| svg { | ||
| fill: $chat-msg-menu-items !important; | ||
| } | ||
| } | ||
|
|
||
| .chat-content__notifications { | ||
| background-color: $chat-notification-bg !important; | ||
| color: $chat-notification-text !important; | ||
| } | ||
|
|
||
| converse-muc-sidebar { | ||
| background-color: $chat-participants !important; | ||
| border-left-color: $chat-participants-resize !important; | ||
| } | ||
|
|
||
| .occupants-heading { | ||
| color: $participants-title !important; | ||
| } | ||
|
|
||
| .occupant-nick { | ||
| color: $participants-name !important; | ||
| } | ||
|
|
||
| .suggestion-box { | ||
| border-top: 1px solid $message-input-top-border !important; | ||
| } | ||
|
|
||
| .chat-textarea { | ||
| background-color: $message-area-bg !important; | ||
| margin-bottom: -5px !important; | ||
| color: $message-text !important; | ||
| &::placeholder { | ||
| color: lighten($message-text, 20%) !important; | ||
| } | ||
| &:focus { | ||
| outline: 0px !important; | ||
| border: 2px solid $message-focus !important; | ||
| border-bottom: 3px solid $message-focus !important; | ||
| } | ||
| } | ||
|
|
||
| .sendXMPPMessage { | ||
| background-color: $message-area-bg !important; | ||
| } | ||
|
|
||
| .emoji-picker__header, | ||
| .emoji-skintone-picker { | ||
| background-color: $emoji-header-footer !important; | ||
| } | ||
|
|
||
| .emoji-picker { | ||
| background-color: $emoji-separator !important; | ||
| } | ||
|
|
||
| .emoji-picker__lists { | ||
| background-color: $emoji-popup-bg !important; | ||
| } | ||
|
|
||
| .emoji-category__heading { | ||
| color: $emoji-category-heading !important; | ||
| } | ||
|
|
||
| .toggle-emojis:focus { | ||
| outline: 0px !important; | ||
| } | ||
|
|
||
| // other adjustments | ||
| .chat-content__help { | ||
| border: 0px !important; | ||
| } | ||
|
|
||
| converse-chat-toolbar { | ||
| border-top: 0px !important; | ||
| background-color: $toolbox-bg !important; | ||
|
|
||
| svg { | ||
| fill: $toolbox-emoji-color !important; | ||
| } .separator { | ||
| border-bottom: 2px solid $toolbox-bg !important; | ||
| } | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The diff in this file is a little confusing because of what I presume is linting…is there any chance you could commit without the linting? That way our history will be cleaner and reviews will be easier!