├── .gitignore ├── CNAME ├── LICENSE ├── README.md ├── _config.yml ├── extension ├── icons │ ├── icon128.png │ ├── icon16.png │ ├── icon48.png │ └── icon980.png ├── libs │ ├── bootstrap │ │ └── css │ │ │ └── bootstrap.min.css │ └── fontawesome-free │ │ ├── LICENSE.txt │ │ ├── css │ │ ├── fontawesome.min.css │ │ ├── regular.css │ │ └── solid.css │ │ └── webfonts │ │ ├── fa-regular-400.woff2 │ │ └── fa-solid-900.woff2 ├── manifest.json └── src │ ├── bg │ ├── background.html │ ├── background.js │ └── jitsiConfig.js │ ├── browser_action │ ├── arrow.svg │ ├── browser_action.html │ ├── browser_action.js │ ├── check.svg │ └── random.svg │ └── inject │ ├── index.html │ ├── index.js │ ├── inject.js │ ├── jitsiFrame.js │ ├── multiview.html │ ├── multiview.js │ ├── video.html │ └── video.js ├── icon.psd ├── index.html └── screenshots ├── 1-1280x800.png ├── 1-crop.png ├── 1.png ├── 2-1280x800.jpg ├── 2.jpg ├── 3-1280x800.jpg └── 3.jpg /.gitignore: -------------------------------------------------------------------------------- 1 | 2 | # Created by https://www.gitignore.io/api/node,osx,linux,windows,code 3 | # Edit at https://www.gitignore.io/?templates=node,osx,linux,windows,code 4 | 5 | ### Code ### 6 | .vscode/* 7 | !.vscode/settings.json 8 | !.vscode/tasks.json 9 | !.vscode/launch.json 10 | !.vscode/extensions.json 11 | 12 | ### Linux ### 13 | *~ 14 | 15 | # temporary files which can be created if a process still has a handle open of a deleted file 16 | .fuse_hidden* 17 | 18 | # KDE directory preferences 19 | .directory 20 | 21 | # Linux trash folder which might appear on any partition or disk 22 | .Trash-* 23 | 24 | # .nfs files are created when an open file is removed but is still being accessed 25 | .nfs* 26 | 27 | ### Node ### 28 | # Logs 29 | logs 30 | *.log 31 | npm-debug.log* 32 | yarn-debug.log* 33 | yarn-error.log* 34 | lerna-debug.log* 35 | 36 | # Diagnostic reports (https://nodejs.org/api/report.html) 37 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 38 | 39 | # Runtime data 40 | pids 41 | *.pid 42 | *.seed 43 | *.pid.lock 44 | 45 | # Directory for instrumented libs generated by jscoverage/JSCover 46 | lib-cov 47 | 48 | # Coverage directory used by tools like istanbul 49 | coverage 50 | *.lcov 51 | 52 | # nyc test coverage 53 | .nyc_output 54 | 55 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 56 | .grunt 57 | 58 | # Bower dependency directory (https://bower.io/) 59 | bower_components 60 | 61 | # node-waf configuration 62 | .lock-wscript 63 | 64 | # Compiled binary addons (https://nodejs.org/api/addons.html) 65 | build/Release 66 | 67 | # Dependency directories 68 | node_modules/ 69 | jspm_packages/ 70 | 71 | # TypeScript v1 declaration files 72 | typings/ 73 | 74 | # TypeScript cache 75 | *.tsbuildinfo 76 | 77 | # Optional npm cache directory 78 | .npm 79 | 80 | # Optional eslint cache 81 | .eslintcache 82 | 83 | # Optional REPL history 84 | .node_repl_history 85 | 86 | # Output of 'npm pack' 87 | *.tgz 88 | 89 | # Yarn Integrity file 90 | .yarn-integrity 91 | 92 | # dotenv environment variables file 93 | .env 94 | .env.test 95 | 96 | # parcel-bundler cache (https://parceljs.org/) 97 | .cache 98 | 99 | # next.js build output 100 | .next 101 | 102 | # nuxt.js build output 103 | .nuxt 104 | 105 | # rollup.js default build output 106 | dist/ 107 | 108 | # Uncomment the public line if your project uses Gatsby 109 | # https://nextjs.org/blog/next-9-1#public-directory-support 110 | # https://create-react-app.dev/docs/using-the-public-folder/#docsNav 111 | # public 112 | 113 | # Storybook build outputs 114 | .out 115 | .storybook-out 116 | 117 | # vuepress build output 118 | .vuepress/dist 119 | 120 | # Serverless directories 121 | .serverless/ 122 | 123 | # FuseBox cache 124 | .fusebox/ 125 | 126 | # DynamoDB Local files 127 | .dynamodb/ 128 | 129 | # Temporary folders 130 | tmp/ 131 | temp/ 132 | 133 | ### OSX ### 134 | # General 135 | .DS_Store 136 | .AppleDouble 137 | .LSOverride 138 | 139 | # Icon must end with two \r 140 | Icon 141 | 142 | # Thumbnails 143 | ._* 144 | 145 | # Files that might appear in the root of a volume 146 | .DocumentRevisions-V100 147 | .fseventsd 148 | .Spotlight-V100 149 | .TemporaryItems 150 | .Trashes 151 | .VolumeIcon.icns 152 | .com.apple.timemachine.donotpresent 153 | 154 | # Directories potentially created on remote AFP share 155 | .AppleDB 156 | .AppleDesktop 157 | Network Trash Folder 158 | Temporary Items 159 | .apdisk 160 | 161 | ### Windows ### 162 | # Windows thumbnail cache files 163 | Thumbs.db 164 | Thumbs.db:encryptable 165 | ehthumbs.db 166 | ehthumbs_vista.db 167 | 168 | # Dump file 169 | *.stackdump 170 | 171 | # Folder config file 172 | [Dd]esktop.ini 173 | 174 | # Recycle Bin used on file shares 175 | $RECYCLE.BIN/ 176 | 177 | # Windows Installer files 178 | *.cab 179 | *.msi 180 | *.msix 181 | *.msm 182 | *.msp 183 | 184 | # Windows shortcuts 185 | *.lnk 186 | 187 | # End of https://www.gitignore.io/api/node,osx,linux,windows,code 188 | 189 | Archive.zip -------------------------------------------------------------------------------- /CNAME: -------------------------------------------------------------------------------- 1 | jitsipop.tk -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Apache License 2 | Version 2.0, January 2004 3 | http://www.apache.org/licenses/ 4 | 5 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 6 | 7 | 1. Definitions. 8 | 9 | "License" shall mean the terms and conditions for use, reproduction, 10 | and distribution as defined by Sections 1 through 9 of this document. 11 | 12 | "Licensor" shall mean the copyright owner or entity authorized by 13 | the copyright owner that is granting the License. 14 | 15 | "Legal Entity" shall mean the union of the acting entity and all 16 | other entities that control, are controlled by, or are under common 17 | control with that entity. For the purposes of this definition, 18 | "control" means (i) the power, direct or indirect, to cause the 19 | direction or management of such entity, whether by contract or 20 | otherwise, or (ii) ownership of fifty percent (50%) or more of the 21 | outstanding shares, or (iii) beneficial ownership of such entity. 22 | 23 | "You" (or "Your") shall mean an individual or Legal Entity 24 | exercising permissions granted by this License. 25 | 26 | "Source" form shall mean the preferred form for making modifications, 27 | including but not limited to software source code, documentation 28 | source, and configuration files. 29 | 30 | "Object" form shall mean any form resulting from mechanical 31 | transformation or translation of a Source form, including but 32 | not limited to compiled object code, generated documentation, 33 | and conversions to other media types. 34 | 35 | "Work" shall mean the work of authorship, whether in Source or 36 | Object form, made available under the License, as indicated by a 37 | copyright notice that is included in or attached to the work 38 | (an example is provided in the Appendix below). 39 | 40 | "Derivative Works" shall mean any work, whether in Source or Object 41 | form, that is based on (or derived from) the Work and for which the 42 | editorial revisions, annotations, elaborations, or other modifications 43 | represent, as a whole, an original work of authorship. For the purposes 44 | of this License, Derivative Works shall not include works that remain 45 | separable from, or merely link (or bind by name) to the interfaces of, 46 | the Work and Derivative Works thereof. 47 | 48 | "Contribution" shall mean any work of authorship, including 49 | the original version of the Work and any modifications or additions 50 | to that Work or Derivative Works thereof, that is intentionally 51 | submitted to Licensor for inclusion in the Work by the copyright owner 52 | or by an individual or Legal Entity authorized to submit on behalf of 53 | the copyright owner. For the purposes of this definition, "submitted" 54 | means any form of electronic, verbal, or written communication sent 55 | to the Licensor or its representatives, including but not limited to 56 | communication on electronic mailing lists, source code control systems, 57 | and issue tracking systems that are managed by, or on behalf of, the 58 | Licensor for the purpose of discussing and improving the Work, but 59 | excluding communication that is conspicuously marked or otherwise 60 | designated in writing by the copyright owner as "Not a Contribution." 61 | 62 | "Contributor" shall mean Licensor and any individual or Legal Entity 63 | on behalf of whom a Contribution has been received by Licensor and 64 | subsequently incorporated within the Work. 65 | 66 | 2. Grant of Copyright License. Subject to the terms and conditions of 67 | this License, each Contributor hereby grants to You a perpetual, 68 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 69 | copyright license to reproduce, prepare Derivative Works of, 70 | publicly display, publicly perform, sublicense, and distribute the 71 | Work and such Derivative Works in Source or Object form. 72 | 73 | 3. Grant of Patent License. Subject to the terms and conditions of 74 | this License, each Contributor hereby grants to You a perpetual, 75 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 76 | (except as stated in this section) patent license to make, have made, 77 | use, offer to sell, sell, import, and otherwise transfer the Work, 78 | where such license applies only to those patent claims licensable 79 | by such Contributor that are necessarily infringed by their 80 | Contribution(s) alone or by combination of their Contribution(s) 81 | with the Work to which such Contribution(s) was submitted. If You 82 | institute patent litigation against any entity (including a 83 | cross-claim or counterclaim in a lawsuit) alleging that the Work 84 | or a Contribution incorporated within the Work constitutes direct 85 | or contributory patent infringement, then any patent licenses 86 | granted to You under this License for that Work shall terminate 87 | as of the date such litigation is filed. 88 | 89 | 4. Redistribution. You may reproduce and distribute copies of the 90 | Work or Derivative Works thereof in any medium, with or without 91 | modifications, and in Source or Object form, provided that You 92 | meet the following conditions: 93 | 94 | (a) You must give any other recipients of the Work or 95 | Derivative Works a copy of this License; and 96 | 97 | (b) You must cause any modified files to carry prominent notices 98 | stating that You changed the files; and 99 | 100 | (c) You must retain, in the Source form of any Derivative Works 101 | that You distribute, all copyright, patent, trademark, and 102 | attribution notices from the Source form of the Work, 103 | excluding those notices that do not pertain to any part of 104 | the Derivative Works; and 105 | 106 | (d) If the Work includes a "NOTICE" text file as part of its 107 | distribution, then any Derivative Works that You distribute must 108 | include a readable copy of the attribution notices contained 109 | within such NOTICE file, excluding those notices that do not 110 | pertain to any part of the Derivative Works, in at least one 111 | of the following places: within a NOTICE text file distributed 112 | as part of the Derivative Works; within the Source form or 113 | documentation, if provided along with the Derivative Works; or, 114 | within a display generated by the Derivative Works, if and 115 | wherever such third-party notices normally appear. The contents 116 | of the NOTICE file are for informational purposes only and 117 | do not modify the License. You may add Your own attribution 118 | notices within Derivative Works that You distribute, alongside 119 | or as an addendum to the NOTICE text from the Work, provided 120 | that such additional attribution notices cannot be construed 121 | as modifying the License. 122 | 123 | You may add Your own copyright statement to Your modifications and 124 | may provide additional or different license terms and conditions 125 | for use, reproduction, or distribution of Your modifications, or 126 | for any such Derivative Works as a whole, provided Your use, 127 | reproduction, and distribution of the Work otherwise complies with 128 | the conditions stated in this License. 129 | 130 | 5. Submission of Contributions. Unless You explicitly state otherwise, 131 | any Contribution intentionally submitted for inclusion in the Work 132 | by You to the Licensor shall be under the terms and conditions of 133 | this License, without any additional terms or conditions. 134 | Notwithstanding the above, nothing herein shall supersede or modify 135 | the terms of any separate license agreement you may have executed 136 | with Licensor regarding such Contributions. 137 | 138 | 6. Trademarks. This License does not grant permission to use the trade 139 | names, trademarks, service marks, or product names of the Licensor, 140 | except as required for reasonable and customary use in describing the 141 | origin of the Work and reproducing the content of the NOTICE file. 142 | 143 | 7. Disclaimer of Warranty. Unless required by applicable law or 144 | agreed to in writing, Licensor provides the Work (and each 145 | Contributor provides its Contributions) on an "AS IS" BASIS, 146 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or 147 | implied, including, without limitation, any warranties or conditions 148 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A 149 | PARTICULAR PURPOSE. You are solely responsible for determining the 150 | appropriateness of using or redistributing the Work and assume any 151 | risks associated with Your exercise of permissions under this License. 152 | 153 | 8. Limitation of Liability. In no event and under no legal theory, 154 | whether in tort (including negligence), contract, or otherwise, 155 | unless required by applicable law (such as deliberate and grossly 156 | negligent acts) or agreed to in writing, shall any Contributor be 157 | liable to You for damages, including any direct, indirect, special, 158 | incidental, or consequential damages of any character arising as a 159 | result of this License or out of the use or inability to use the 160 | Work (including but not limited to damages for loss of goodwill, 161 | work stoppage, computer failure or malfunction, or any and all 162 | other commercial damages or losses), even if such Contributor 163 | has been advised of the possibility of such damages. 164 | 165 | 9. Accepting Warranty or Additional Liability. While redistributing 166 | the Work or Derivative Works thereof, You may choose to offer, 167 | and charge a fee for, acceptance of support, warranty, indemnity, 168 | or other liability obligations and/or rights consistent with this 169 | License. However, in accepting such obligations, You may act only 170 | on Your own behalf and on Your sole responsibility, not on behalf 171 | of any other Contributor, and only if You agree to indemnify, 172 | defend, and hold each Contributor harmless for any liability 173 | incurred by, or claims asserted against, such Contributor by reason 174 | of your accepting any such warranty or additional liability. 175 | 176 | END OF TERMS AND CONDITIONS 177 | 178 | APPENDIX: How to apply the Apache License to your work. 179 | 180 | To apply the Apache License to your work, attach the following 181 | boilerplate notice, with the fields enclosed by brackets "[]" 182 | replaced with your own identifying information. (Don't include 183 | the brackets!) The text should be enclosed in the appropriate 184 | comment syntax for the file format. We also recommend that a 185 | file or class name and description of purpose be included on the 186 | same "printed page" as the copyright notice for easier 187 | identification within third-party archives. 188 | 189 | Copyright [yyyy] [name of copyright owner] 190 | 191 | Licensed under the Apache License, Version 2.0 (the "License"); 192 | you may not use this file except in compliance with the License. 193 | You may obtain a copy of the License at 194 | 195 | http://www.apache.org/licenses/LICENSE-2.0 196 | 197 | Unless required by applicable law or agreed to in writing, software 198 | distributed under the License is distributed on an "AS IS" BASIS, 199 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 200 | See the License for the specific language governing permissions and 201 | limitations under the License. 202 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Pop-out Jitsi Meet Logo 2 | [Chrome extension](https://chrome.google.com/webstore/detail/pop-out-jitsi-meet/boklbbjieahngbnhdmlhldjjibdnnbcn) to open [Jitsi Meet](https://jitsi.org/) videos in pop-out windows. Useful if you want to arrange your video conference across multiple monitors, or if you want to grab a clean feed of the videos with e.g. [OBS Studio](https://obsproject.com/). 3 | 4 | ![Extension in browser toolbar](screenshots/1-crop.png) 5 | 6 | ### How to use 7 | 1. Install the extension from the [Chrome Web Store](https://chrome.google.com/webstore/detail/pop-out-jitsi-meet/boklbbjieahngbnhdmlhldjjibdnnbcn). 8 | 2. Click the extension icon ![Extension Icon](extension/icons/icon16.png) in the top right of your browser toolbar. 9 | 3. Pick a nickname, and generate a hard to guess room name. 10 | 4. Choose the desired server: Server 1 [meet.jit.si](https://meet.jit.si/), Server 2 [8x8.vc](https://8x8.vc/) or Server 3 [jitsi.riot.im](https://jitsi.riot.im/) 11 | 5. Hit enter to open the main Jitsi Meet window. It will ask your for microphone and camera permission. Click "Allow", otherwise it won't work. If you click "Block", then Jitsi won't work until you manually remove the servers from these two block lists: `chrome://settings/content/camera` and `chrome://settings/content/microphone`. 12 | 6. Click a video thumbnail on the left to open it in a pop-out window. 13 | 7. Put the pop-out video where you want, maybe on a different monitor, and press enter to toggle full screen. 14 | 15 | The extension icon shows a green square while you're in a conference. Click the icon during a conference to copy the invite link, to invite others to the conference. From there you can also click the "Open" button to jump back to the main Jitsi Meet window, or "Close" to stop the conference and close all related windows. 16 | 17 | ![Conference UI](screenshots/2.jpg) 18 | 19 | ### Server compatibility 20 | This extension works with the Jitsi Meet servers hosted at [meet.jit.si](https://meet.jit.si/), [8x8.vc](https://8x8.vc/) and [jitsi.riot.im](https://jitsi.riot.im/). 21 | 22 | ### Browser compatibility 23 | Jitsi Meet currently only works properly in Chromium based browsers ([not Firefox](https://github.com/jitsi/jitsi-meet/issues/4758)). This extension has been developed for Google Chrome. I briefly tested it in Brave browser, but it doesn't ([yet](https://github.com/brave/brave-browser/issues/9009)) work there. May work in other Chromium based browsers like the new [Microsoft Edge](https://www.microsoft.com/edge) or [Opera](https://www.opera.com/). 24 | 25 | ### Self hosted Jitsi Meet 26 | This extension doesn't work with other instances of Jitsi Meet. If you host your own version of Jitsi Meet, or want to use other servers, then you need to fork this extension and add the desired domains to "matches" for "content_scripts" in the manifest.json file. Additionally you'd have to add the desired domains to `window.servers` in the background.js file. Optionally, you may want to host your own [invite link](https://github.com/Jip-Hop/jitsi-pop/blob/master/index.html). If you do, you also need to replace the current invite link domain with your own domain in [browser_action.js](https://github.com/Jip-Hop/jitsi-pop/blob/master/extension/src/browser_action/browser_action.js#L80) and [inject/index.js](https://github.com/Jip-Hop/jitsi-pop/blob/master/extension/src/inject/index.js#L861) and add your domain to "externally_connectable" in the manifest.json file. 27 | 28 | ### Generic extension 29 | Also check out [Pop-up Videos](https://github.com/Jip-Hop/pop-up-videos): my more generic extension to open videos, on any webpage, as pop-up windows. 30 | 31 | ### Capturing the streams 32 | The reason I made this extension is to reliably capture a clean feed from the participants in the video conference, using [OBS Studio](https://obsproject.com/). Currently window grabbing only works well on Windows (not [MacOS](https://obsproject.com/forum/threads/screen-tearing-random-glitching-w-window-capture.95181/)), so these instructions are Windows only. 33 | 1. Download, install and open [OBS Studio](https://obsproject.com/). 34 | 2. [Turn off Hardware Acceleration in Google Chrome](https://www.howtogeek.com/412738/how-to-turn-hardware-acceleration-on-and-off-in-chrome/), otherwise OBS will just [capture a black window](https://obsproject.com/forum/threads/option-to-turn-off-capture-cursor-when-recording-a-window.117388/). In the [future](https://obsproject.com/forum/threads/windows-graphics-capture-also-captures-mouse-pointer.117503/) you may keep Hardware Acceleration enabled, when using the new Windows Graphics Capture method. However at the moment that mehtod is unable to hide the mouse cursor, so in a single monitor setup that's a dealbreaker. 35 | 3. Start a conference using the extension in Google Chrome. 36 | 4. In the main Jitsi Meet window, click a video thumbnail on the left to open it in a pop-out window. Go into full screen by pressing the enter button. 37 | 5. Leave the full screen window open, and go back to OBS Studio, using e.g. ALT+TAB. In OBS, add a "Window Capture" to the "Sources". Make sure to pick the pop-out window in the "Window" dropdown. The window name follows the following pattern: "\[chrome.exe\]: Jitsi Meet | nickname". In the "Capture Method" dropdown you should choose be "BitBlt", otherwise it's not (yet) possible to hide the mouse cursor. In the third dropdown, "Window Match Priority", make sure to select "Window title must match" and uncheck "Capture Cursor". 38 | 6. Arrange the source in your scene however you like. 39 | 7. Repeat steps 4 to 6 to add more videos from the conference to OBS. 40 | 8. Keep the full screen pop-out windows running in the background. Put the Jitsi Meet main window on top to keep an overview of what's happening in the conference, and put the OBS window next to it, to control the final output. 41 | 42 | Note: for the window capture to work reliably, it's important that every participant in the conference uses a unique nickname. Else the window capture won't pick the right window each time. 43 | 44 | ![Full setup with OBS](screenshots/3.jpg) 45 | -------------------------------------------------------------------------------- /_config.yml: -------------------------------------------------------------------------------- 1 | theme: jekyll-theme-minimal -------------------------------------------------------------------------------- /extension/icons/icon128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jip-Hop/jitsi-pop/d34ab3b92ce6b5a8302e0f40bb31e5db83741b42/extension/icons/icon128.png -------------------------------------------------------------------------------- /extension/icons/icon16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jip-Hop/jitsi-pop/d34ab3b92ce6b5a8302e0f40bb31e5db83741b42/extension/icons/icon16.png -------------------------------------------------------------------------------- /extension/icons/icon48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jip-Hop/jitsi-pop/d34ab3b92ce6b5a8302e0f40bb31e5db83741b42/extension/icons/icon48.png -------------------------------------------------------------------------------- /extension/icons/icon980.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jip-Hop/jitsi-pop/d34ab3b92ce6b5a8302e0f40bb31e5db83741b42/extension/icons/icon980.png -------------------------------------------------------------------------------- /extension/libs/fontawesome-free/LICENSE.txt: -------------------------------------------------------------------------------- 1 | Font Awesome Free License 2 | ------------------------- 3 | 4 | Font Awesome Free is free, open source, and GPL friendly. You can use it for 5 | commercial projects, open source projects, or really almost whatever you want. 6 | Full Font Awesome Free license: https://fontawesome.com/license/free. 7 | 8 | # Icons: CC BY 4.0 License (https://creativecommons.org/licenses/by/4.0/) 9 | In the Font Awesome Free download, the CC BY 4.0 license applies to all icons 10 | packaged as SVG and JS file types. 11 | 12 | # Fonts: SIL OFL 1.1 License (https://scripts.sil.org/OFL) 13 | In the Font Awesome Free download, the SIL OFL license applies to all icons 14 | packaged as web and desktop font files. 15 | 16 | # Code: MIT License (https://opensource.org/licenses/MIT) 17 | In the Font Awesome Free download, the MIT license applies to all non-font and 18 | non-icon files. 19 | 20 | # Attribution 21 | Attribution is required by MIT, SIL OFL, and CC BY licenses. Downloaded Font 22 | Awesome Free files already contain embedded comments with sufficient 23 | attribution, so you shouldn't need to do anything additional when using these 24 | files normally. 25 | 26 | We've kept attribution comments terse, so we ask that you do not actively work 27 | to remove them from files, especially code. They're a great way for folks to 28 | learn about Font Awesome. 29 | 30 | # Brand Icons 31 | All brand icons are trademarks of their respective owners. The use of these 32 | trademarks does not indicate endorsement of the trademark holder by Font 33 | Awesome, nor vice versa. **Please do not use brand logos for any purpose except 34 | to represent the company, product, or service to which they refer.** 35 | -------------------------------------------------------------------------------- /extension/libs/fontawesome-free/css/fontawesome.min.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Font Awesome Free 5.13.0 by @fontawesome - https://fontawesome.com 3 | * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) 4 | */ 5 | .fa,.fab,.fad,.fal,.far,.fas{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-style:normal;font-variant:normal;text-rendering:auto;line-height:1}.fa-lg{font-size:1.33333em;line-height:.75em;vertical-align:-.0667em}.fa-xs{font-size:.75em}.fa-sm{font-size:.875em}.fa-1x{font-size:1em}.fa-2x{font-size:2em}.fa-3x{font-size:3em}.fa-4x{font-size:4em}.fa-5x{font-size:5em}.fa-6x{font-size:6em}.fa-7x{font-size:7em}.fa-8x{font-size:8em}.fa-9x{font-size:9em}.fa-10x{font-size:10em}.fa-fw{text-align:center;width:1.25em}.fa-ul{list-style-type:none;margin-left:2.5em;padding-left:0}.fa-ul>li{position:relative}.fa-li{left:-2em;position:absolute;text-align:center;width:2em;line-height:inherit}.fa-border{border:.08em solid #eee;border-radius:.1em;padding:.2em .25em .15em}.fa-pull-left{float:left}.fa-pull-right{float:right}.fa.fa-pull-left,.fab.fa-pull-left,.fal.fa-pull-left,.far.fa-pull-left,.fas.fa-pull-left{margin-right:.3em}.fa.fa-pull-right,.fab.fa-pull-right,.fal.fa-pull-right,.far.fa-pull-right,.fas.fa-pull-right{margin-left:.3em}.fa-spin{-webkit-animation:fa-spin 2s linear infinite;animation:fa-spin 2s linear infinite}.fa-pulse{-webkit-animation:fa-spin 1s steps(8) infinite;animation:fa-spin 1s steps(8) infinite}@-webkit-keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.fa-rotate-90{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";-webkit-transform:rotate(90deg);transform:rotate(90deg)}.fa-rotate-180{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";-webkit-transform:rotate(180deg);transform:rotate(180deg)}.fa-rotate-270{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";-webkit-transform:rotate(270deg);transform:rotate(270deg)}.fa-flip-horizontal{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";-webkit-transform:scaleX(-1);transform:scaleX(-1)}.fa-flip-vertical{-webkit-transform:scaleY(-1);transform:scaleY(-1)}.fa-flip-both,.fa-flip-horizontal.fa-flip-vertical,.fa-flip-vertical{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)"}.fa-flip-both,.fa-flip-horizontal.fa-flip-vertical{-webkit-transform:scale(-1);transform:scale(-1)}:root .fa-flip-both,:root .fa-flip-horizontal,:root .fa-flip-vertical,:root .fa-rotate-90,:root .fa-rotate-180,:root .fa-rotate-270{-webkit-filter:none;filter:none}.fa-stack{display:inline-block;height:2em;line-height:2em;position:relative;vertical-align:middle;width:2.5em}.fa-stack-1x,.fa-stack-2x{left:0;position:absolute;text-align:center;width:100%}.fa-stack-1x{line-height:inherit}.fa-stack-2x{font-size:2em}.fa-inverse{color:#fff}.fa-500px:before{content:"\f26e"}.fa-accessible-icon:before{content:"\f368"}.fa-accusoft:before{content:"\f369"}.fa-acquisitions-incorporated:before{content:"\f6af"}.fa-ad:before{content:"\f641"}.fa-address-book:before{content:"\f2b9"}.fa-address-card:before{content:"\f2bb"}.fa-adjust:before{content:"\f042"}.fa-adn:before{content:"\f170"}.fa-adobe:before{content:"\f778"}.fa-adversal:before{content:"\f36a"}.fa-affiliatetheme:before{content:"\f36b"}.fa-air-freshener:before{content:"\f5d0"}.fa-airbnb:before{content:"\f834"}.fa-algolia:before{content:"\f36c"}.fa-align-center:before{content:"\f037"}.fa-align-justify:before{content:"\f039"}.fa-align-left:before{content:"\f036"}.fa-align-right:before{content:"\f038"}.fa-alipay:before{content:"\f642"}.fa-allergies:before{content:"\f461"}.fa-amazon:before{content:"\f270"}.fa-amazon-pay:before{content:"\f42c"}.fa-ambulance:before{content:"\f0f9"}.fa-american-sign-language-interpreting:before{content:"\f2a3"}.fa-amilia:before{content:"\f36d"}.fa-anchor:before{content:"\f13d"}.fa-android:before{content:"\f17b"}.fa-angellist:before{content:"\f209"}.fa-angle-double-down:before{content:"\f103"}.fa-angle-double-left:before{content:"\f100"}.fa-angle-double-right:before{content:"\f101"}.fa-angle-double-up:before{content:"\f102"}.fa-angle-down:before{content:"\f107"}.fa-angle-left:before{content:"\f104"}.fa-angle-right:before{content:"\f105"}.fa-angle-up:before{content:"\f106"}.fa-angry:before{content:"\f556"}.fa-angrycreative:before{content:"\f36e"}.fa-angular:before{content:"\f420"}.fa-ankh:before{content:"\f644"}.fa-app-store:before{content:"\f36f"}.fa-app-store-ios:before{content:"\f370"}.fa-apper:before{content:"\f371"}.fa-apple:before{content:"\f179"}.fa-apple-alt:before{content:"\f5d1"}.fa-apple-pay:before{content:"\f415"}.fa-archive:before{content:"\f187"}.fa-archway:before{content:"\f557"}.fa-arrow-alt-circle-down:before{content:"\f358"}.fa-arrow-alt-circle-left:before{content:"\f359"}.fa-arrow-alt-circle-right:before{content:"\f35a"}.fa-arrow-alt-circle-up:before{content:"\f35b"}.fa-arrow-circle-down:before{content:"\f0ab"}.fa-arrow-circle-left:before{content:"\f0a8"}.fa-arrow-circle-right:before{content:"\f0a9"}.fa-arrow-circle-up:before{content:"\f0aa"}.fa-arrow-down:before{content:"\f063"}.fa-arrow-left:before{content:"\f060"}.fa-arrow-right:before{content:"\f061"}.fa-arrow-up:before{content:"\f062"}.fa-arrows-alt:before{content:"\f0b2"}.fa-arrows-alt-h:before{content:"\f337"}.fa-arrows-alt-v:before{content:"\f338"}.fa-artstation:before{content:"\f77a"}.fa-assistive-listening-systems:before{content:"\f2a2"}.fa-asterisk:before{content:"\f069"}.fa-asymmetrik:before{content:"\f372"}.fa-at:before{content:"\f1fa"}.fa-atlas:before{content:"\f558"}.fa-atlassian:before{content:"\f77b"}.fa-atom:before{content:"\f5d2"}.fa-audible:before{content:"\f373"}.fa-audio-description:before{content:"\f29e"}.fa-autoprefixer:before{content:"\f41c"}.fa-avianex:before{content:"\f374"}.fa-aviato:before{content:"\f421"}.fa-award:before{content:"\f559"}.fa-aws:before{content:"\f375"}.fa-baby:before{content:"\f77c"}.fa-baby-carriage:before{content:"\f77d"}.fa-backspace:before{content:"\f55a"}.fa-backward:before{content:"\f04a"}.fa-bacon:before{content:"\f7e5"}.fa-bahai:before{content:"\f666"}.fa-balance-scale:before{content:"\f24e"}.fa-balance-scale-left:before{content:"\f515"}.fa-balance-scale-right:before{content:"\f516"}.fa-ban:before{content:"\f05e"}.fa-band-aid:before{content:"\f462"}.fa-bandcamp:before{content:"\f2d5"}.fa-barcode:before{content:"\f02a"}.fa-bars:before{content:"\f0c9"}.fa-baseball-ball:before{content:"\f433"}.fa-basketball-ball:before{content:"\f434"}.fa-bath:before{content:"\f2cd"}.fa-battery-empty:before{content:"\f244"}.fa-battery-full:before{content:"\f240"}.fa-battery-half:before{content:"\f242"}.fa-battery-quarter:before{content:"\f243"}.fa-battery-three-quarters:before{content:"\f241"}.fa-battle-net:before{content:"\f835"}.fa-bed:before{content:"\f236"}.fa-beer:before{content:"\f0fc"}.fa-behance:before{content:"\f1b4"}.fa-behance-square:before{content:"\f1b5"}.fa-bell:before{content:"\f0f3"}.fa-bell-slash:before{content:"\f1f6"}.fa-bezier-curve:before{content:"\f55b"}.fa-bible:before{content:"\f647"}.fa-bicycle:before{content:"\f206"}.fa-biking:before{content:"\f84a"}.fa-bimobject:before{content:"\f378"}.fa-binoculars:before{content:"\f1e5"}.fa-biohazard:before{content:"\f780"}.fa-birthday-cake:before{content:"\f1fd"}.fa-bitbucket:before{content:"\f171"}.fa-bitcoin:before{content:"\f379"}.fa-bity:before{content:"\f37a"}.fa-black-tie:before{content:"\f27e"}.fa-blackberry:before{content:"\f37b"}.fa-blender:before{content:"\f517"}.fa-blender-phone:before{content:"\f6b6"}.fa-blind:before{content:"\f29d"}.fa-blog:before{content:"\f781"}.fa-blogger:before{content:"\f37c"}.fa-blogger-b:before{content:"\f37d"}.fa-bluetooth:before{content:"\f293"}.fa-bluetooth-b:before{content:"\f294"}.fa-bold:before{content:"\f032"}.fa-bolt:before{content:"\f0e7"}.fa-bomb:before{content:"\f1e2"}.fa-bone:before{content:"\f5d7"}.fa-bong:before{content:"\f55c"}.fa-book:before{content:"\f02d"}.fa-book-dead:before{content:"\f6b7"}.fa-book-medical:before{content:"\f7e6"}.fa-book-open:before{content:"\f518"}.fa-book-reader:before{content:"\f5da"}.fa-bookmark:before{content:"\f02e"}.fa-bootstrap:before{content:"\f836"}.fa-border-all:before{content:"\f84c"}.fa-border-none:before{content:"\f850"}.fa-border-style:before{content:"\f853"}.fa-bowling-ball:before{content:"\f436"}.fa-box:before{content:"\f466"}.fa-box-open:before{content:"\f49e"}.fa-box-tissue:before{content:"\f95b"}.fa-boxes:before{content:"\f468"}.fa-braille:before{content:"\f2a1"}.fa-brain:before{content:"\f5dc"}.fa-bread-slice:before{content:"\f7ec"}.fa-briefcase:before{content:"\f0b1"}.fa-briefcase-medical:before{content:"\f469"}.fa-broadcast-tower:before{content:"\f519"}.fa-broom:before{content:"\f51a"}.fa-brush:before{content:"\f55d"}.fa-btc:before{content:"\f15a"}.fa-buffer:before{content:"\f837"}.fa-bug:before{content:"\f188"}.fa-building:before{content:"\f1ad"}.fa-bullhorn:before{content:"\f0a1"}.fa-bullseye:before{content:"\f140"}.fa-burn:before{content:"\f46a"}.fa-buromobelexperte:before{content:"\f37f"}.fa-bus:before{content:"\f207"}.fa-bus-alt:before{content:"\f55e"}.fa-business-time:before{content:"\f64a"}.fa-buy-n-large:before{content:"\f8a6"}.fa-buysellads:before{content:"\f20d"}.fa-calculator:before{content:"\f1ec"}.fa-calendar:before{content:"\f133"}.fa-calendar-alt:before{content:"\f073"}.fa-calendar-check:before{content:"\f274"}.fa-calendar-day:before{content:"\f783"}.fa-calendar-minus:before{content:"\f272"}.fa-calendar-plus:before{content:"\f271"}.fa-calendar-times:before{content:"\f273"}.fa-calendar-week:before{content:"\f784"}.fa-camera:before{content:"\f030"}.fa-camera-retro:before{content:"\f083"}.fa-campground:before{content:"\f6bb"}.fa-canadian-maple-leaf:before{content:"\f785"}.fa-candy-cane:before{content:"\f786"}.fa-cannabis:before{content:"\f55f"}.fa-capsules:before{content:"\f46b"}.fa-car:before{content:"\f1b9"}.fa-car-alt:before{content:"\f5de"}.fa-car-battery:before{content:"\f5df"}.fa-car-crash:before{content:"\f5e1"}.fa-car-side:before{content:"\f5e4"}.fa-caravan:before{content:"\f8ff"}.fa-caret-down:before{content:"\f0d7"}.fa-caret-left:before{content:"\f0d9"}.fa-caret-right:before{content:"\f0da"}.fa-caret-square-down:before{content:"\f150"}.fa-caret-square-left:before{content:"\f191"}.fa-caret-square-right:before{content:"\f152"}.fa-caret-square-up:before{content:"\f151"}.fa-caret-up:before{content:"\f0d8"}.fa-carrot:before{content:"\f787"}.fa-cart-arrow-down:before{content:"\f218"}.fa-cart-plus:before{content:"\f217"}.fa-cash-register:before{content:"\f788"}.fa-cat:before{content:"\f6be"}.fa-cc-amazon-pay:before{content:"\f42d"}.fa-cc-amex:before{content:"\f1f3"}.fa-cc-apple-pay:before{content:"\f416"}.fa-cc-diners-club:before{content:"\f24c"}.fa-cc-discover:before{content:"\f1f2"}.fa-cc-jcb:before{content:"\f24b"}.fa-cc-mastercard:before{content:"\f1f1"}.fa-cc-paypal:before{content:"\f1f4"}.fa-cc-stripe:before{content:"\f1f5"}.fa-cc-visa:before{content:"\f1f0"}.fa-centercode:before{content:"\f380"}.fa-centos:before{content:"\f789"}.fa-certificate:before{content:"\f0a3"}.fa-chair:before{content:"\f6c0"}.fa-chalkboard:before{content:"\f51b"}.fa-chalkboard-teacher:before{content:"\f51c"}.fa-charging-station:before{content:"\f5e7"}.fa-chart-area:before{content:"\f1fe"}.fa-chart-bar:before{content:"\f080"}.fa-chart-line:before{content:"\f201"}.fa-chart-pie:before{content:"\f200"}.fa-check:before{content:"\f00c"}.fa-check-circle:before{content:"\f058"}.fa-check-double:before{content:"\f560"}.fa-check-square:before{content:"\f14a"}.fa-cheese:before{content:"\f7ef"}.fa-chess:before{content:"\f439"}.fa-chess-bishop:before{content:"\f43a"}.fa-chess-board:before{content:"\f43c"}.fa-chess-king:before{content:"\f43f"}.fa-chess-knight:before{content:"\f441"}.fa-chess-pawn:before{content:"\f443"}.fa-chess-queen:before{content:"\f445"}.fa-chess-rook:before{content:"\f447"}.fa-chevron-circle-down:before{content:"\f13a"}.fa-chevron-circle-left:before{content:"\f137"}.fa-chevron-circle-right:before{content:"\f138"}.fa-chevron-circle-up:before{content:"\f139"}.fa-chevron-down:before{content:"\f078"}.fa-chevron-left:before{content:"\f053"}.fa-chevron-right:before{content:"\f054"}.fa-chevron-up:before{content:"\f077"}.fa-child:before{content:"\f1ae"}.fa-chrome:before{content:"\f268"}.fa-chromecast:before{content:"\f838"}.fa-church:before{content:"\f51d"}.fa-circle:before{content:"\f111"}.fa-circle-notch:before{content:"\f1ce"}.fa-city:before{content:"\f64f"}.fa-clinic-medical:before{content:"\f7f2"}.fa-clipboard:before{content:"\f328"}.fa-clipboard-check:before{content:"\f46c"}.fa-clipboard-list:before{content:"\f46d"}.fa-clock:before{content:"\f017"}.fa-clone:before{content:"\f24d"}.fa-closed-captioning:before{content:"\f20a"}.fa-cloud:before{content:"\f0c2"}.fa-cloud-download-alt:before{content:"\f381"}.fa-cloud-meatball:before{content:"\f73b"}.fa-cloud-moon:before{content:"\f6c3"}.fa-cloud-moon-rain:before{content:"\f73c"}.fa-cloud-rain:before{content:"\f73d"}.fa-cloud-showers-heavy:before{content:"\f740"}.fa-cloud-sun:before{content:"\f6c4"}.fa-cloud-sun-rain:before{content:"\f743"}.fa-cloud-upload-alt:before{content:"\f382"}.fa-cloudscale:before{content:"\f383"}.fa-cloudsmith:before{content:"\f384"}.fa-cloudversify:before{content:"\f385"}.fa-cocktail:before{content:"\f561"}.fa-code:before{content:"\f121"}.fa-code-branch:before{content:"\f126"}.fa-codepen:before{content:"\f1cb"}.fa-codiepie:before{content:"\f284"}.fa-coffee:before{content:"\f0f4"}.fa-cog:before{content:"\f013"}.fa-cogs:before{content:"\f085"}.fa-coins:before{content:"\f51e"}.fa-columns:before{content:"\f0db"}.fa-comment:before{content:"\f075"}.fa-comment-alt:before{content:"\f27a"}.fa-comment-dollar:before{content:"\f651"}.fa-comment-dots:before{content:"\f4ad"}.fa-comment-medical:before{content:"\f7f5"}.fa-comment-slash:before{content:"\f4b3"}.fa-comments:before{content:"\f086"}.fa-comments-dollar:before{content:"\f653"}.fa-compact-disc:before{content:"\f51f"}.fa-compass:before{content:"\f14e"}.fa-compress:before{content:"\f066"}.fa-compress-alt:before{content:"\f422"}.fa-compress-arrows-alt:before{content:"\f78c"}.fa-concierge-bell:before{content:"\f562"}.fa-confluence:before{content:"\f78d"}.fa-connectdevelop:before{content:"\f20e"}.fa-contao:before{content:"\f26d"}.fa-cookie:before{content:"\f563"}.fa-cookie-bite:before{content:"\f564"}.fa-copy:before{content:"\f0c5"}.fa-copyright:before{content:"\f1f9"}.fa-cotton-bureau:before{content:"\f89e"}.fa-couch:before{content:"\f4b8"}.fa-cpanel:before{content:"\f388"}.fa-creative-commons:before{content:"\f25e"}.fa-creative-commons-by:before{content:"\f4e7"}.fa-creative-commons-nc:before{content:"\f4e8"}.fa-creative-commons-nc-eu:before{content:"\f4e9"}.fa-creative-commons-nc-jp:before{content:"\f4ea"}.fa-creative-commons-nd:before{content:"\f4eb"}.fa-creative-commons-pd:before{content:"\f4ec"}.fa-creative-commons-pd-alt:before{content:"\f4ed"}.fa-creative-commons-remix:before{content:"\f4ee"}.fa-creative-commons-sa:before{content:"\f4ef"}.fa-creative-commons-sampling:before{content:"\f4f0"}.fa-creative-commons-sampling-plus:before{content:"\f4f1"}.fa-creative-commons-share:before{content:"\f4f2"}.fa-creative-commons-zero:before{content:"\f4f3"}.fa-credit-card:before{content:"\f09d"}.fa-critical-role:before{content:"\f6c9"}.fa-crop:before{content:"\f125"}.fa-crop-alt:before{content:"\f565"}.fa-cross:before{content:"\f654"}.fa-crosshairs:before{content:"\f05b"}.fa-crow:before{content:"\f520"}.fa-crown:before{content:"\f521"}.fa-crutch:before{content:"\f7f7"}.fa-css3:before{content:"\f13c"}.fa-css3-alt:before{content:"\f38b"}.fa-cube:before{content:"\f1b2"}.fa-cubes:before{content:"\f1b3"}.fa-cut:before{content:"\f0c4"}.fa-cuttlefish:before{content:"\f38c"}.fa-d-and-d:before{content:"\f38d"}.fa-d-and-d-beyond:before{content:"\f6ca"}.fa-dailymotion:before{content:"\f952"}.fa-dashcube:before{content:"\f210"}.fa-database:before{content:"\f1c0"}.fa-deaf:before{content:"\f2a4"}.fa-delicious:before{content:"\f1a5"}.fa-democrat:before{content:"\f747"}.fa-deploydog:before{content:"\f38e"}.fa-deskpro:before{content:"\f38f"}.fa-desktop:before{content:"\f108"}.fa-dev:before{content:"\f6cc"}.fa-deviantart:before{content:"\f1bd"}.fa-dharmachakra:before{content:"\f655"}.fa-dhl:before{content:"\f790"}.fa-diagnoses:before{content:"\f470"}.fa-diaspora:before{content:"\f791"}.fa-dice:before{content:"\f522"}.fa-dice-d20:before{content:"\f6cf"}.fa-dice-d6:before{content:"\f6d1"}.fa-dice-five:before{content:"\f523"}.fa-dice-four:before{content:"\f524"}.fa-dice-one:before{content:"\f525"}.fa-dice-six:before{content:"\f526"}.fa-dice-three:before{content:"\f527"}.fa-dice-two:before{content:"\f528"}.fa-digg:before{content:"\f1a6"}.fa-digital-ocean:before{content:"\f391"}.fa-digital-tachograph:before{content:"\f566"}.fa-directions:before{content:"\f5eb"}.fa-discord:before{content:"\f392"}.fa-discourse:before{content:"\f393"}.fa-disease:before{content:"\f7fa"}.fa-divide:before{content:"\f529"}.fa-dizzy:before{content:"\f567"}.fa-dna:before{content:"\f471"}.fa-dochub:before{content:"\f394"}.fa-docker:before{content:"\f395"}.fa-dog:before{content:"\f6d3"}.fa-dollar-sign:before{content:"\f155"}.fa-dolly:before{content:"\f472"}.fa-dolly-flatbed:before{content:"\f474"}.fa-donate:before{content:"\f4b9"}.fa-door-closed:before{content:"\f52a"}.fa-door-open:before{content:"\f52b"}.fa-dot-circle:before{content:"\f192"}.fa-dove:before{content:"\f4ba"}.fa-download:before{content:"\f019"}.fa-draft2digital:before{content:"\f396"}.fa-drafting-compass:before{content:"\f568"}.fa-dragon:before{content:"\f6d5"}.fa-draw-polygon:before{content:"\f5ee"}.fa-dribbble:before{content:"\f17d"}.fa-dribbble-square:before{content:"\f397"}.fa-dropbox:before{content:"\f16b"}.fa-drum:before{content:"\f569"}.fa-drum-steelpan:before{content:"\f56a"}.fa-drumstick-bite:before{content:"\f6d7"}.fa-drupal:before{content:"\f1a9"}.fa-dumbbell:before{content:"\f44b"}.fa-dumpster:before{content:"\f793"}.fa-dumpster-fire:before{content:"\f794"}.fa-dungeon:before{content:"\f6d9"}.fa-dyalog:before{content:"\f399"}.fa-earlybirds:before{content:"\f39a"}.fa-ebay:before{content:"\f4f4"}.fa-edge:before{content:"\f282"}.fa-edit:before{content:"\f044"}.fa-egg:before{content:"\f7fb"}.fa-eject:before{content:"\f052"}.fa-elementor:before{content:"\f430"}.fa-ellipsis-h:before{content:"\f141"}.fa-ellipsis-v:before{content:"\f142"}.fa-ello:before{content:"\f5f1"}.fa-ember:before{content:"\f423"}.fa-empire:before{content:"\f1d1"}.fa-envelope:before{content:"\f0e0"}.fa-envelope-open:before{content:"\f2b6"}.fa-envelope-open-text:before{content:"\f658"}.fa-envelope-square:before{content:"\f199"}.fa-envira:before{content:"\f299"}.fa-equals:before{content:"\f52c"}.fa-eraser:before{content:"\f12d"}.fa-erlang:before{content:"\f39d"}.fa-ethereum:before{content:"\f42e"}.fa-ethernet:before{content:"\f796"}.fa-etsy:before{content:"\f2d7"}.fa-euro-sign:before{content:"\f153"}.fa-evernote:before{content:"\f839"}.fa-exchange-alt:before{content:"\f362"}.fa-exclamation:before{content:"\f12a"}.fa-exclamation-circle:before{content:"\f06a"}.fa-exclamation-triangle:before{content:"\f071"}.fa-expand:before{content:"\f065"}.fa-expand-alt:before{content:"\f424"}.fa-expand-arrows-alt:before{content:"\f31e"}.fa-expeditedssl:before{content:"\f23e"}.fa-external-link-alt:before{content:"\f35d"}.fa-external-link-square-alt:before{content:"\f360"}.fa-eye:before{content:"\f06e"}.fa-eye-dropper:before{content:"\f1fb"}.fa-eye-slash:before{content:"\f070"}.fa-facebook:before{content:"\f09a"}.fa-facebook-f:before{content:"\f39e"}.fa-facebook-messenger:before{content:"\f39f"}.fa-facebook-square:before{content:"\f082"}.fa-fan:before{content:"\f863"}.fa-fantasy-flight-games:before{content:"\f6dc"}.fa-fast-backward:before{content:"\f049"}.fa-fast-forward:before{content:"\f050"}.fa-faucet:before{content:"\f905"}.fa-fax:before{content:"\f1ac"}.fa-feather:before{content:"\f52d"}.fa-feather-alt:before{content:"\f56b"}.fa-fedex:before{content:"\f797"}.fa-fedora:before{content:"\f798"}.fa-female:before{content:"\f182"}.fa-fighter-jet:before{content:"\f0fb"}.fa-figma:before{content:"\f799"}.fa-file:before{content:"\f15b"}.fa-file-alt:before{content:"\f15c"}.fa-file-archive:before{content:"\f1c6"}.fa-file-audio:before{content:"\f1c7"}.fa-file-code:before{content:"\f1c9"}.fa-file-contract:before{content:"\f56c"}.fa-file-csv:before{content:"\f6dd"}.fa-file-download:before{content:"\f56d"}.fa-file-excel:before{content:"\f1c3"}.fa-file-export:before{content:"\f56e"}.fa-file-image:before{content:"\f1c5"}.fa-file-import:before{content:"\f56f"}.fa-file-invoice:before{content:"\f570"}.fa-file-invoice-dollar:before{content:"\f571"}.fa-file-medical:before{content:"\f477"}.fa-file-medical-alt:before{content:"\f478"}.fa-file-pdf:before{content:"\f1c1"}.fa-file-powerpoint:before{content:"\f1c4"}.fa-file-prescription:before{content:"\f572"}.fa-file-signature:before{content:"\f573"}.fa-file-upload:before{content:"\f574"}.fa-file-video:before{content:"\f1c8"}.fa-file-word:before{content:"\f1c2"}.fa-fill:before{content:"\f575"}.fa-fill-drip:before{content:"\f576"}.fa-film:before{content:"\f008"}.fa-filter:before{content:"\f0b0"}.fa-fingerprint:before{content:"\f577"}.fa-fire:before{content:"\f06d"}.fa-fire-alt:before{content:"\f7e4"}.fa-fire-extinguisher:before{content:"\f134"}.fa-firefox:before{content:"\f269"}.fa-firefox-browser:before{content:"\f907"}.fa-first-aid:before{content:"\f479"}.fa-first-order:before{content:"\f2b0"}.fa-first-order-alt:before{content:"\f50a"}.fa-firstdraft:before{content:"\f3a1"}.fa-fish:before{content:"\f578"}.fa-fist-raised:before{content:"\f6de"}.fa-flag:before{content:"\f024"}.fa-flag-checkered:before{content:"\f11e"}.fa-flag-usa:before{content:"\f74d"}.fa-flask:before{content:"\f0c3"}.fa-flickr:before{content:"\f16e"}.fa-flipboard:before{content:"\f44d"}.fa-flushed:before{content:"\f579"}.fa-fly:before{content:"\f417"}.fa-folder:before{content:"\f07b"}.fa-folder-minus:before{content:"\f65d"}.fa-folder-open:before{content:"\f07c"}.fa-folder-plus:before{content:"\f65e"}.fa-font:before{content:"\f031"}.fa-font-awesome:before{content:"\f2b4"}.fa-font-awesome-alt:before{content:"\f35c"}.fa-font-awesome-flag:before{content:"\f425"}.fa-font-awesome-logo-full:before{content:"\f4e6"}.fa-fonticons:before{content:"\f280"}.fa-fonticons-fi:before{content:"\f3a2"}.fa-football-ball:before{content:"\f44e"}.fa-fort-awesome:before{content:"\f286"}.fa-fort-awesome-alt:before{content:"\f3a3"}.fa-forumbee:before{content:"\f211"}.fa-forward:before{content:"\f04e"}.fa-foursquare:before{content:"\f180"}.fa-free-code-camp:before{content:"\f2c5"}.fa-freebsd:before{content:"\f3a4"}.fa-frog:before{content:"\f52e"}.fa-frown:before{content:"\f119"}.fa-frown-open:before{content:"\f57a"}.fa-fulcrum:before{content:"\f50b"}.fa-funnel-dollar:before{content:"\f662"}.fa-futbol:before{content:"\f1e3"}.fa-galactic-republic:before{content:"\f50c"}.fa-galactic-senate:before{content:"\f50d"}.fa-gamepad:before{content:"\f11b"}.fa-gas-pump:before{content:"\f52f"}.fa-gavel:before{content:"\f0e3"}.fa-gem:before{content:"\f3a5"}.fa-genderless:before{content:"\f22d"}.fa-get-pocket:before{content:"\f265"}.fa-gg:before{content:"\f260"}.fa-gg-circle:before{content:"\f261"}.fa-ghost:before{content:"\f6e2"}.fa-gift:before{content:"\f06b"}.fa-gifts:before{content:"\f79c"}.fa-git:before{content:"\f1d3"}.fa-git-alt:before{content:"\f841"}.fa-git-square:before{content:"\f1d2"}.fa-github:before{content:"\f09b"}.fa-github-alt:before{content:"\f113"}.fa-github-square:before{content:"\f092"}.fa-gitkraken:before{content:"\f3a6"}.fa-gitlab:before{content:"\f296"}.fa-gitter:before{content:"\f426"}.fa-glass-cheers:before{content:"\f79f"}.fa-glass-martini:before{content:"\f000"}.fa-glass-martini-alt:before{content:"\f57b"}.fa-glass-whiskey:before{content:"\f7a0"}.fa-glasses:before{content:"\f530"}.fa-glide:before{content:"\f2a5"}.fa-glide-g:before{content:"\f2a6"}.fa-globe:before{content:"\f0ac"}.fa-globe-africa:before{content:"\f57c"}.fa-globe-americas:before{content:"\f57d"}.fa-globe-asia:before{content:"\f57e"}.fa-globe-europe:before{content:"\f7a2"}.fa-gofore:before{content:"\f3a7"}.fa-golf-ball:before{content:"\f450"}.fa-goodreads:before{content:"\f3a8"}.fa-goodreads-g:before{content:"\f3a9"}.fa-google:before{content:"\f1a0"}.fa-google-drive:before{content:"\f3aa"}.fa-google-play:before{content:"\f3ab"}.fa-google-plus:before{content:"\f2b3"}.fa-google-plus-g:before{content:"\f0d5"}.fa-google-plus-square:before{content:"\f0d4"}.fa-google-wallet:before{content:"\f1ee"}.fa-gopuram:before{content:"\f664"}.fa-graduation-cap:before{content:"\f19d"}.fa-gratipay:before{content:"\f184"}.fa-grav:before{content:"\f2d6"}.fa-greater-than:before{content:"\f531"}.fa-greater-than-equal:before{content:"\f532"}.fa-grimace:before{content:"\f57f"}.fa-grin:before{content:"\f580"}.fa-grin-alt:before{content:"\f581"}.fa-grin-beam:before{content:"\f582"}.fa-grin-beam-sweat:before{content:"\f583"}.fa-grin-hearts:before{content:"\f584"}.fa-grin-squint:before{content:"\f585"}.fa-grin-squint-tears:before{content:"\f586"}.fa-grin-stars:before{content:"\f587"}.fa-grin-tears:before{content:"\f588"}.fa-grin-tongue:before{content:"\f589"}.fa-grin-tongue-squint:before{content:"\f58a"}.fa-grin-tongue-wink:before{content:"\f58b"}.fa-grin-wink:before{content:"\f58c"}.fa-grip-horizontal:before{content:"\f58d"}.fa-grip-lines:before{content:"\f7a4"}.fa-grip-lines-vertical:before{content:"\f7a5"}.fa-grip-vertical:before{content:"\f58e"}.fa-gripfire:before{content:"\f3ac"}.fa-grunt:before{content:"\f3ad"}.fa-guitar:before{content:"\f7a6"}.fa-gulp:before{content:"\f3ae"}.fa-h-square:before{content:"\f0fd"}.fa-hacker-news:before{content:"\f1d4"}.fa-hacker-news-square:before{content:"\f3af"}.fa-hackerrank:before{content:"\f5f7"}.fa-hamburger:before{content:"\f805"}.fa-hammer:before{content:"\f6e3"}.fa-hamsa:before{content:"\f665"}.fa-hand-holding:before{content:"\f4bd"}.fa-hand-holding-heart:before{content:"\f4be"}.fa-hand-holding-medical:before{content:"\f95c"}.fa-hand-holding-usd:before{content:"\f4c0"}.fa-hand-holding-water:before{content:"\f4c1"}.fa-hand-lizard:before{content:"\f258"}.fa-hand-middle-finger:before{content:"\f806"}.fa-hand-paper:before{content:"\f256"}.fa-hand-peace:before{content:"\f25b"}.fa-hand-point-down:before{content:"\f0a7"}.fa-hand-point-left:before{content:"\f0a5"}.fa-hand-point-right:before{content:"\f0a4"}.fa-hand-point-up:before{content:"\f0a6"}.fa-hand-pointer:before{content:"\f25a"}.fa-hand-rock:before{content:"\f255"}.fa-hand-scissors:before{content:"\f257"}.fa-hand-sparkles:before{content:"\f95d"}.fa-hand-spock:before{content:"\f259"}.fa-hands:before{content:"\f4c2"}.fa-hands-helping:before{content:"\f4c4"}.fa-hands-wash:before{content:"\f95e"}.fa-handshake:before{content:"\f2b5"}.fa-handshake-alt-slash:before{content:"\f95f"}.fa-handshake-slash:before{content:"\f960"}.fa-hanukiah:before{content:"\f6e6"}.fa-hard-hat:before{content:"\f807"}.fa-hashtag:before{content:"\f292"}.fa-hat-cowboy:before{content:"\f8c0"}.fa-hat-cowboy-side:before{content:"\f8c1"}.fa-hat-wizard:before{content:"\f6e8"}.fa-hdd:before{content:"\f0a0"}.fa-head-side-cough:before{content:"\f961"}.fa-head-side-cough-slash:before{content:"\f962"}.fa-head-side-mask:before{content:"\f963"}.fa-head-side-virus:before{content:"\f964"}.fa-heading:before{content:"\f1dc"}.fa-headphones:before{content:"\f025"}.fa-headphones-alt:before{content:"\f58f"}.fa-headset:before{content:"\f590"}.fa-heart:before{content:"\f004"}.fa-heart-broken:before{content:"\f7a9"}.fa-heartbeat:before{content:"\f21e"}.fa-helicopter:before{content:"\f533"}.fa-highlighter:before{content:"\f591"}.fa-hiking:before{content:"\f6ec"}.fa-hippo:before{content:"\f6ed"}.fa-hips:before{content:"\f452"}.fa-hire-a-helper:before{content:"\f3b0"}.fa-history:before{content:"\f1da"}.fa-hockey-puck:before{content:"\f453"}.fa-holly-berry:before{content:"\f7aa"}.fa-home:before{content:"\f015"}.fa-hooli:before{content:"\f427"}.fa-hornbill:before{content:"\f592"}.fa-horse:before{content:"\f6f0"}.fa-horse-head:before{content:"\f7ab"}.fa-hospital:before{content:"\f0f8"}.fa-hospital-alt:before{content:"\f47d"}.fa-hospital-symbol:before{content:"\f47e"}.fa-hospital-user:before{content:"\f80d"}.fa-hot-tub:before{content:"\f593"}.fa-hotdog:before{content:"\f80f"}.fa-hotel:before{content:"\f594"}.fa-hotjar:before{content:"\f3b1"}.fa-hourglass:before{content:"\f254"}.fa-hourglass-end:before{content:"\f253"}.fa-hourglass-half:before{content:"\f252"}.fa-hourglass-start:before{content:"\f251"}.fa-house-damage:before{content:"\f6f1"}.fa-house-user:before{content:"\f965"}.fa-houzz:before{content:"\f27c"}.fa-hryvnia:before{content:"\f6f2"}.fa-html5:before{content:"\f13b"}.fa-hubspot:before{content:"\f3b2"}.fa-i-cursor:before{content:"\f246"}.fa-ice-cream:before{content:"\f810"}.fa-icicles:before{content:"\f7ad"}.fa-icons:before{content:"\f86d"}.fa-id-badge:before{content:"\f2c1"}.fa-id-card:before{content:"\f2c2"}.fa-id-card-alt:before{content:"\f47f"}.fa-ideal:before{content:"\f913"}.fa-igloo:before{content:"\f7ae"}.fa-image:before{content:"\f03e"}.fa-images:before{content:"\f302"}.fa-imdb:before{content:"\f2d8"}.fa-inbox:before{content:"\f01c"}.fa-indent:before{content:"\f03c"}.fa-industry:before{content:"\f275"}.fa-infinity:before{content:"\f534"}.fa-info:before{content:"\f129"}.fa-info-circle:before{content:"\f05a"}.fa-instagram:before{content:"\f16d"}.fa-instagram-square:before{content:"\f955"}.fa-intercom:before{content:"\f7af"}.fa-internet-explorer:before{content:"\f26b"}.fa-invision:before{content:"\f7b0"}.fa-ioxhost:before{content:"\f208"}.fa-italic:before{content:"\f033"}.fa-itch-io:before{content:"\f83a"}.fa-itunes:before{content:"\f3b4"}.fa-itunes-note:before{content:"\f3b5"}.fa-java:before{content:"\f4e4"}.fa-jedi:before{content:"\f669"}.fa-jedi-order:before{content:"\f50e"}.fa-jenkins:before{content:"\f3b6"}.fa-jira:before{content:"\f7b1"}.fa-joget:before{content:"\f3b7"}.fa-joint:before{content:"\f595"}.fa-joomla:before{content:"\f1aa"}.fa-journal-whills:before{content:"\f66a"}.fa-js:before{content:"\f3b8"}.fa-js-square:before{content:"\f3b9"}.fa-jsfiddle:before{content:"\f1cc"}.fa-kaaba:before{content:"\f66b"}.fa-kaggle:before{content:"\f5fa"}.fa-key:before{content:"\f084"}.fa-keybase:before{content:"\f4f5"}.fa-keyboard:before{content:"\f11c"}.fa-keycdn:before{content:"\f3ba"}.fa-khanda:before{content:"\f66d"}.fa-kickstarter:before{content:"\f3bb"}.fa-kickstarter-k:before{content:"\f3bc"}.fa-kiss:before{content:"\f596"}.fa-kiss-beam:before{content:"\f597"}.fa-kiss-wink-heart:before{content:"\f598"}.fa-kiwi-bird:before{content:"\f535"}.fa-korvue:before{content:"\f42f"}.fa-landmark:before{content:"\f66f"}.fa-language:before{content:"\f1ab"}.fa-laptop:before{content:"\f109"}.fa-laptop-code:before{content:"\f5fc"}.fa-laptop-house:before{content:"\f966"}.fa-laptop-medical:before{content:"\f812"}.fa-laravel:before{content:"\f3bd"}.fa-lastfm:before{content:"\f202"}.fa-lastfm-square:before{content:"\f203"}.fa-laugh:before{content:"\f599"}.fa-laugh-beam:before{content:"\f59a"}.fa-laugh-squint:before{content:"\f59b"}.fa-laugh-wink:before{content:"\f59c"}.fa-layer-group:before{content:"\f5fd"}.fa-leaf:before{content:"\f06c"}.fa-leanpub:before{content:"\f212"}.fa-lemon:before{content:"\f094"}.fa-less:before{content:"\f41d"}.fa-less-than:before{content:"\f536"}.fa-less-than-equal:before{content:"\f537"}.fa-level-down-alt:before{content:"\f3be"}.fa-level-up-alt:before{content:"\f3bf"}.fa-life-ring:before{content:"\f1cd"}.fa-lightbulb:before{content:"\f0eb"}.fa-line:before{content:"\f3c0"}.fa-link:before{content:"\f0c1"}.fa-linkedin:before{content:"\f08c"}.fa-linkedin-in:before{content:"\f0e1"}.fa-linode:before{content:"\f2b8"}.fa-linux:before{content:"\f17c"}.fa-lira-sign:before{content:"\f195"}.fa-list:before{content:"\f03a"}.fa-list-alt:before{content:"\f022"}.fa-list-ol:before{content:"\f0cb"}.fa-list-ul:before{content:"\f0ca"}.fa-location-arrow:before{content:"\f124"}.fa-lock:before{content:"\f023"}.fa-lock-open:before{content:"\f3c1"}.fa-long-arrow-alt-down:before{content:"\f309"}.fa-long-arrow-alt-left:before{content:"\f30a"}.fa-long-arrow-alt-right:before{content:"\f30b"}.fa-long-arrow-alt-up:before{content:"\f30c"}.fa-low-vision:before{content:"\f2a8"}.fa-luggage-cart:before{content:"\f59d"}.fa-lungs:before{content:"\f604"}.fa-lungs-virus:before{content:"\f967"}.fa-lyft:before{content:"\f3c3"}.fa-magento:before{content:"\f3c4"}.fa-magic:before{content:"\f0d0"}.fa-magnet:before{content:"\f076"}.fa-mail-bulk:before{content:"\f674"}.fa-mailchimp:before{content:"\f59e"}.fa-male:before{content:"\f183"}.fa-mandalorian:before{content:"\f50f"}.fa-map:before{content:"\f279"}.fa-map-marked:before{content:"\f59f"}.fa-map-marked-alt:before{content:"\f5a0"}.fa-map-marker:before{content:"\f041"}.fa-map-marker-alt:before{content:"\f3c5"}.fa-map-pin:before{content:"\f276"}.fa-map-signs:before{content:"\f277"}.fa-markdown:before{content:"\f60f"}.fa-marker:before{content:"\f5a1"}.fa-mars:before{content:"\f222"}.fa-mars-double:before{content:"\f227"}.fa-mars-stroke:before{content:"\f229"}.fa-mars-stroke-h:before{content:"\f22b"}.fa-mars-stroke-v:before{content:"\f22a"}.fa-mask:before{content:"\f6fa"}.fa-mastodon:before{content:"\f4f6"}.fa-maxcdn:before{content:"\f136"}.fa-mdb:before{content:"\f8ca"}.fa-medal:before{content:"\f5a2"}.fa-medapps:before{content:"\f3c6"}.fa-medium:before{content:"\f23a"}.fa-medium-m:before{content:"\f3c7"}.fa-medkit:before{content:"\f0fa"}.fa-medrt:before{content:"\f3c8"}.fa-meetup:before{content:"\f2e0"}.fa-megaport:before{content:"\f5a3"}.fa-meh:before{content:"\f11a"}.fa-meh-blank:before{content:"\f5a4"}.fa-meh-rolling-eyes:before{content:"\f5a5"}.fa-memory:before{content:"\f538"}.fa-mendeley:before{content:"\f7b3"}.fa-menorah:before{content:"\f676"}.fa-mercury:before{content:"\f223"}.fa-meteor:before{content:"\f753"}.fa-microblog:before{content:"\f91a"}.fa-microchip:before{content:"\f2db"}.fa-microphone:before{content:"\f130"}.fa-microphone-alt:before{content:"\f3c9"}.fa-microphone-alt-slash:before{content:"\f539"}.fa-microphone-slash:before{content:"\f131"}.fa-microscope:before{content:"\f610"}.fa-microsoft:before{content:"\f3ca"}.fa-minus:before{content:"\f068"}.fa-minus-circle:before{content:"\f056"}.fa-minus-square:before{content:"\f146"}.fa-mitten:before{content:"\f7b5"}.fa-mix:before{content:"\f3cb"}.fa-mixcloud:before{content:"\f289"}.fa-mixer:before{content:"\f956"}.fa-mizuni:before{content:"\f3cc"}.fa-mobile:before{content:"\f10b"}.fa-mobile-alt:before{content:"\f3cd"}.fa-modx:before{content:"\f285"}.fa-monero:before{content:"\f3d0"}.fa-money-bill:before{content:"\f0d6"}.fa-money-bill-alt:before{content:"\f3d1"}.fa-money-bill-wave:before{content:"\f53a"}.fa-money-bill-wave-alt:before{content:"\f53b"}.fa-money-check:before{content:"\f53c"}.fa-money-check-alt:before{content:"\f53d"}.fa-monument:before{content:"\f5a6"}.fa-moon:before{content:"\f186"}.fa-mortar-pestle:before{content:"\f5a7"}.fa-mosque:before{content:"\f678"}.fa-motorcycle:before{content:"\f21c"}.fa-mountain:before{content:"\f6fc"}.fa-mouse:before{content:"\f8cc"}.fa-mouse-pointer:before{content:"\f245"}.fa-mug-hot:before{content:"\f7b6"}.fa-music:before{content:"\f001"}.fa-napster:before{content:"\f3d2"}.fa-neos:before{content:"\f612"}.fa-network-wired:before{content:"\f6ff"}.fa-neuter:before{content:"\f22c"}.fa-newspaper:before{content:"\f1ea"}.fa-nimblr:before{content:"\f5a8"}.fa-node:before{content:"\f419"}.fa-node-js:before{content:"\f3d3"}.fa-not-equal:before{content:"\f53e"}.fa-notes-medical:before{content:"\f481"}.fa-npm:before{content:"\f3d4"}.fa-ns8:before{content:"\f3d5"}.fa-nutritionix:before{content:"\f3d6"}.fa-object-group:before{content:"\f247"}.fa-object-ungroup:before{content:"\f248"}.fa-odnoklassniki:before{content:"\f263"}.fa-odnoklassniki-square:before{content:"\f264"}.fa-oil-can:before{content:"\f613"}.fa-old-republic:before{content:"\f510"}.fa-om:before{content:"\f679"}.fa-opencart:before{content:"\f23d"}.fa-openid:before{content:"\f19b"}.fa-opera:before{content:"\f26a"}.fa-optin-monster:before{content:"\f23c"}.fa-orcid:before{content:"\f8d2"}.fa-osi:before{content:"\f41a"}.fa-otter:before{content:"\f700"}.fa-outdent:before{content:"\f03b"}.fa-page4:before{content:"\f3d7"}.fa-pagelines:before{content:"\f18c"}.fa-pager:before{content:"\f815"}.fa-paint-brush:before{content:"\f1fc"}.fa-paint-roller:before{content:"\f5aa"}.fa-palette:before{content:"\f53f"}.fa-palfed:before{content:"\f3d8"}.fa-pallet:before{content:"\f482"}.fa-paper-plane:before{content:"\f1d8"}.fa-paperclip:before{content:"\f0c6"}.fa-parachute-box:before{content:"\f4cd"}.fa-paragraph:before{content:"\f1dd"}.fa-parking:before{content:"\f540"}.fa-passport:before{content:"\f5ab"}.fa-pastafarianism:before{content:"\f67b"}.fa-paste:before{content:"\f0ea"}.fa-patreon:before{content:"\f3d9"}.fa-pause:before{content:"\f04c"}.fa-pause-circle:before{content:"\f28b"}.fa-paw:before{content:"\f1b0"}.fa-paypal:before{content:"\f1ed"}.fa-peace:before{content:"\f67c"}.fa-pen:before{content:"\f304"}.fa-pen-alt:before{content:"\f305"}.fa-pen-fancy:before{content:"\f5ac"}.fa-pen-nib:before{content:"\f5ad"}.fa-pen-square:before{content:"\f14b"}.fa-pencil-alt:before{content:"\f303"}.fa-pencil-ruler:before{content:"\f5ae"}.fa-penny-arcade:before{content:"\f704"}.fa-people-arrows:before{content:"\f968"}.fa-people-carry:before{content:"\f4ce"}.fa-pepper-hot:before{content:"\f816"}.fa-percent:before{content:"\f295"}.fa-percentage:before{content:"\f541"}.fa-periscope:before{content:"\f3da"}.fa-person-booth:before{content:"\f756"}.fa-phabricator:before{content:"\f3db"}.fa-phoenix-framework:before{content:"\f3dc"}.fa-phoenix-squadron:before{content:"\f511"}.fa-phone:before{content:"\f095"}.fa-phone-alt:before{content:"\f879"}.fa-phone-slash:before{content:"\f3dd"}.fa-phone-square:before{content:"\f098"}.fa-phone-square-alt:before{content:"\f87b"}.fa-phone-volume:before{content:"\f2a0"}.fa-photo-video:before{content:"\f87c"}.fa-php:before{content:"\f457"}.fa-pied-piper:before{content:"\f2ae"}.fa-pied-piper-alt:before{content:"\f1a8"}.fa-pied-piper-hat:before{content:"\f4e5"}.fa-pied-piper-pp:before{content:"\f1a7"}.fa-pied-piper-square:before{content:"\f91e"}.fa-piggy-bank:before{content:"\f4d3"}.fa-pills:before{content:"\f484"}.fa-pinterest:before{content:"\f0d2"}.fa-pinterest-p:before{content:"\f231"}.fa-pinterest-square:before{content:"\f0d3"}.fa-pizza-slice:before{content:"\f818"}.fa-place-of-worship:before{content:"\f67f"}.fa-plane:before{content:"\f072"}.fa-plane-arrival:before{content:"\f5af"}.fa-plane-departure:before{content:"\f5b0"}.fa-plane-slash:before{content:"\f969"}.fa-play:before{content:"\f04b"}.fa-play-circle:before{content:"\f144"}.fa-playstation:before{content:"\f3df"}.fa-plug:before{content:"\f1e6"}.fa-plus:before{content:"\f067"}.fa-plus-circle:before{content:"\f055"}.fa-plus-square:before{content:"\f0fe"}.fa-podcast:before{content:"\f2ce"}.fa-poll:before{content:"\f681"}.fa-poll-h:before{content:"\f682"}.fa-poo:before{content:"\f2fe"}.fa-poo-storm:before{content:"\f75a"}.fa-poop:before{content:"\f619"}.fa-portrait:before{content:"\f3e0"}.fa-pound-sign:before{content:"\f154"}.fa-power-off:before{content:"\f011"}.fa-pray:before{content:"\f683"}.fa-praying-hands:before{content:"\f684"}.fa-prescription:before{content:"\f5b1"}.fa-prescription-bottle:before{content:"\f485"}.fa-prescription-bottle-alt:before{content:"\f486"}.fa-print:before{content:"\f02f"}.fa-procedures:before{content:"\f487"}.fa-product-hunt:before{content:"\f288"}.fa-project-diagram:before{content:"\f542"}.fa-pump-medical:before{content:"\f96a"}.fa-pump-soap:before{content:"\f96b"}.fa-pushed:before{content:"\f3e1"}.fa-puzzle-piece:before{content:"\f12e"}.fa-python:before{content:"\f3e2"}.fa-qq:before{content:"\f1d6"}.fa-qrcode:before{content:"\f029"}.fa-question:before{content:"\f128"}.fa-question-circle:before{content:"\f059"}.fa-quidditch:before{content:"\f458"}.fa-quinscape:before{content:"\f459"}.fa-quora:before{content:"\f2c4"}.fa-quote-left:before{content:"\f10d"}.fa-quote-right:before{content:"\f10e"}.fa-quran:before{content:"\f687"}.fa-r-project:before{content:"\f4f7"}.fa-radiation:before{content:"\f7b9"}.fa-radiation-alt:before{content:"\f7ba"}.fa-rainbow:before{content:"\f75b"}.fa-random:before{content:"\f074"}.fa-raspberry-pi:before{content:"\f7bb"}.fa-ravelry:before{content:"\f2d9"}.fa-react:before{content:"\f41b"}.fa-reacteurope:before{content:"\f75d"}.fa-readme:before{content:"\f4d5"}.fa-rebel:before{content:"\f1d0"}.fa-receipt:before{content:"\f543"}.fa-record-vinyl:before{content:"\f8d9"}.fa-recycle:before{content:"\f1b8"}.fa-red-river:before{content:"\f3e3"}.fa-reddit:before{content:"\f1a1"}.fa-reddit-alien:before{content:"\f281"}.fa-reddit-square:before{content:"\f1a2"}.fa-redhat:before{content:"\f7bc"}.fa-redo:before{content:"\f01e"}.fa-redo-alt:before{content:"\f2f9"}.fa-registered:before{content:"\f25d"}.fa-remove-format:before{content:"\f87d"}.fa-renren:before{content:"\f18b"}.fa-reply:before{content:"\f3e5"}.fa-reply-all:before{content:"\f122"}.fa-replyd:before{content:"\f3e6"}.fa-republican:before{content:"\f75e"}.fa-researchgate:before{content:"\f4f8"}.fa-resolving:before{content:"\f3e7"}.fa-restroom:before{content:"\f7bd"}.fa-retweet:before{content:"\f079"}.fa-rev:before{content:"\f5b2"}.fa-ribbon:before{content:"\f4d6"}.fa-ring:before{content:"\f70b"}.fa-road:before{content:"\f018"}.fa-robot:before{content:"\f544"}.fa-rocket:before{content:"\f135"}.fa-rocketchat:before{content:"\f3e8"}.fa-rockrms:before{content:"\f3e9"}.fa-route:before{content:"\f4d7"}.fa-rss:before{content:"\f09e"}.fa-rss-square:before{content:"\f143"}.fa-ruble-sign:before{content:"\f158"}.fa-ruler:before{content:"\f545"}.fa-ruler-combined:before{content:"\f546"}.fa-ruler-horizontal:before{content:"\f547"}.fa-ruler-vertical:before{content:"\f548"}.fa-running:before{content:"\f70c"}.fa-rupee-sign:before{content:"\f156"}.fa-sad-cry:before{content:"\f5b3"}.fa-sad-tear:before{content:"\f5b4"}.fa-safari:before{content:"\f267"}.fa-salesforce:before{content:"\f83b"}.fa-sass:before{content:"\f41e"}.fa-satellite:before{content:"\f7bf"}.fa-satellite-dish:before{content:"\f7c0"}.fa-save:before{content:"\f0c7"}.fa-schlix:before{content:"\f3ea"}.fa-school:before{content:"\f549"}.fa-screwdriver:before{content:"\f54a"}.fa-scribd:before{content:"\f28a"}.fa-scroll:before{content:"\f70e"}.fa-sd-card:before{content:"\f7c2"}.fa-search:before{content:"\f002"}.fa-search-dollar:before{content:"\f688"}.fa-search-location:before{content:"\f689"}.fa-search-minus:before{content:"\f010"}.fa-search-plus:before{content:"\f00e"}.fa-searchengin:before{content:"\f3eb"}.fa-seedling:before{content:"\f4d8"}.fa-sellcast:before{content:"\f2da"}.fa-sellsy:before{content:"\f213"}.fa-server:before{content:"\f233"}.fa-servicestack:before{content:"\f3ec"}.fa-shapes:before{content:"\f61f"}.fa-share:before{content:"\f064"}.fa-share-alt:before{content:"\f1e0"}.fa-share-alt-square:before{content:"\f1e1"}.fa-share-square:before{content:"\f14d"}.fa-shekel-sign:before{content:"\f20b"}.fa-shield-alt:before{content:"\f3ed"}.fa-shield-virus:before{content:"\f96c"}.fa-ship:before{content:"\f21a"}.fa-shipping-fast:before{content:"\f48b"}.fa-shirtsinbulk:before{content:"\f214"}.fa-shoe-prints:before{content:"\f54b"}.fa-shopify:before{content:"\f957"}.fa-shopping-bag:before{content:"\f290"}.fa-shopping-basket:before{content:"\f291"}.fa-shopping-cart:before{content:"\f07a"}.fa-shopware:before{content:"\f5b5"}.fa-shower:before{content:"\f2cc"}.fa-shuttle-van:before{content:"\f5b6"}.fa-sign:before{content:"\f4d9"}.fa-sign-in-alt:before{content:"\f2f6"}.fa-sign-language:before{content:"\f2a7"}.fa-sign-out-alt:before{content:"\f2f5"}.fa-signal:before{content:"\f012"}.fa-signature:before{content:"\f5b7"}.fa-sim-card:before{content:"\f7c4"}.fa-simplybuilt:before{content:"\f215"}.fa-sistrix:before{content:"\f3ee"}.fa-sitemap:before{content:"\f0e8"}.fa-sith:before{content:"\f512"}.fa-skating:before{content:"\f7c5"}.fa-sketch:before{content:"\f7c6"}.fa-skiing:before{content:"\f7c9"}.fa-skiing-nordic:before{content:"\f7ca"}.fa-skull:before{content:"\f54c"}.fa-skull-crossbones:before{content:"\f714"}.fa-skyatlas:before{content:"\f216"}.fa-skype:before{content:"\f17e"}.fa-slack:before{content:"\f198"}.fa-slack-hash:before{content:"\f3ef"}.fa-slash:before{content:"\f715"}.fa-sleigh:before{content:"\f7cc"}.fa-sliders-h:before{content:"\f1de"}.fa-slideshare:before{content:"\f1e7"}.fa-smile:before{content:"\f118"}.fa-smile-beam:before{content:"\f5b8"}.fa-smile-wink:before{content:"\f4da"}.fa-smog:before{content:"\f75f"}.fa-smoking:before{content:"\f48d"}.fa-smoking-ban:before{content:"\f54d"}.fa-sms:before{content:"\f7cd"}.fa-snapchat:before{content:"\f2ab"}.fa-snapchat-ghost:before{content:"\f2ac"}.fa-snapchat-square:before{content:"\f2ad"}.fa-snowboarding:before{content:"\f7ce"}.fa-snowflake:before{content:"\f2dc"}.fa-snowman:before{content:"\f7d0"}.fa-snowplow:before{content:"\f7d2"}.fa-soap:before{content:"\f96e"}.fa-socks:before{content:"\f696"}.fa-solar-panel:before{content:"\f5ba"}.fa-sort:before{content:"\f0dc"}.fa-sort-alpha-down:before{content:"\f15d"}.fa-sort-alpha-down-alt:before{content:"\f881"}.fa-sort-alpha-up:before{content:"\f15e"}.fa-sort-alpha-up-alt:before{content:"\f882"}.fa-sort-amount-down:before{content:"\f160"}.fa-sort-amount-down-alt:before{content:"\f884"}.fa-sort-amount-up:before{content:"\f161"}.fa-sort-amount-up-alt:before{content:"\f885"}.fa-sort-down:before{content:"\f0dd"}.fa-sort-numeric-down:before{content:"\f162"}.fa-sort-numeric-down-alt:before{content:"\f886"}.fa-sort-numeric-up:before{content:"\f163"}.fa-sort-numeric-up-alt:before{content:"\f887"}.fa-sort-up:before{content:"\f0de"}.fa-soundcloud:before{content:"\f1be"}.fa-sourcetree:before{content:"\f7d3"}.fa-spa:before{content:"\f5bb"}.fa-space-shuttle:before{content:"\f197"}.fa-speakap:before{content:"\f3f3"}.fa-speaker-deck:before{content:"\f83c"}.fa-spell-check:before{content:"\f891"}.fa-spider:before{content:"\f717"}.fa-spinner:before{content:"\f110"}.fa-splotch:before{content:"\f5bc"}.fa-spotify:before{content:"\f1bc"}.fa-spray-can:before{content:"\f5bd"}.fa-square:before{content:"\f0c8"}.fa-square-full:before{content:"\f45c"}.fa-square-root-alt:before{content:"\f698"}.fa-squarespace:before{content:"\f5be"}.fa-stack-exchange:before{content:"\f18d"}.fa-stack-overflow:before{content:"\f16c"}.fa-stackpath:before{content:"\f842"}.fa-stamp:before{content:"\f5bf"}.fa-star:before{content:"\f005"}.fa-star-and-crescent:before{content:"\f699"}.fa-star-half:before{content:"\f089"}.fa-star-half-alt:before{content:"\f5c0"}.fa-star-of-david:before{content:"\f69a"}.fa-star-of-life:before{content:"\f621"}.fa-staylinked:before{content:"\f3f5"}.fa-steam:before{content:"\f1b6"}.fa-steam-square:before{content:"\f1b7"}.fa-steam-symbol:before{content:"\f3f6"}.fa-step-backward:before{content:"\f048"}.fa-step-forward:before{content:"\f051"}.fa-stethoscope:before{content:"\f0f1"}.fa-sticker-mule:before{content:"\f3f7"}.fa-sticky-note:before{content:"\f249"}.fa-stop:before{content:"\f04d"}.fa-stop-circle:before{content:"\f28d"}.fa-stopwatch:before{content:"\f2f2"}.fa-stopwatch-20:before{content:"\f96f"}.fa-store:before{content:"\f54e"}.fa-store-alt:before{content:"\f54f"}.fa-store-alt-slash:before{content:"\f970"}.fa-store-slash:before{content:"\f971"}.fa-strava:before{content:"\f428"}.fa-stream:before{content:"\f550"}.fa-street-view:before{content:"\f21d"}.fa-strikethrough:before{content:"\f0cc"}.fa-stripe:before{content:"\f429"}.fa-stripe-s:before{content:"\f42a"}.fa-stroopwafel:before{content:"\f551"}.fa-studiovinari:before{content:"\f3f8"}.fa-stumbleupon:before{content:"\f1a4"}.fa-stumbleupon-circle:before{content:"\f1a3"}.fa-subscript:before{content:"\f12c"}.fa-subway:before{content:"\f239"}.fa-suitcase:before{content:"\f0f2"}.fa-suitcase-rolling:before{content:"\f5c1"}.fa-sun:before{content:"\f185"}.fa-superpowers:before{content:"\f2dd"}.fa-superscript:before{content:"\f12b"}.fa-supple:before{content:"\f3f9"}.fa-surprise:before{content:"\f5c2"}.fa-suse:before{content:"\f7d6"}.fa-swatchbook:before{content:"\f5c3"}.fa-swift:before{content:"\f8e1"}.fa-swimmer:before{content:"\f5c4"}.fa-swimming-pool:before{content:"\f5c5"}.fa-symfony:before{content:"\f83d"}.fa-synagogue:before{content:"\f69b"}.fa-sync:before{content:"\f021"}.fa-sync-alt:before{content:"\f2f1"}.fa-syringe:before{content:"\f48e"}.fa-table:before{content:"\f0ce"}.fa-table-tennis:before{content:"\f45d"}.fa-tablet:before{content:"\f10a"}.fa-tablet-alt:before{content:"\f3fa"}.fa-tablets:before{content:"\f490"}.fa-tachometer-alt:before{content:"\f3fd"}.fa-tag:before{content:"\f02b"}.fa-tags:before{content:"\f02c"}.fa-tape:before{content:"\f4db"}.fa-tasks:before{content:"\f0ae"}.fa-taxi:before{content:"\f1ba"}.fa-teamspeak:before{content:"\f4f9"}.fa-teeth:before{content:"\f62e"}.fa-teeth-open:before{content:"\f62f"}.fa-telegram:before{content:"\f2c6"}.fa-telegram-plane:before{content:"\f3fe"}.fa-temperature-high:before{content:"\f769"}.fa-temperature-low:before{content:"\f76b"}.fa-tencent-weibo:before{content:"\f1d5"}.fa-tenge:before{content:"\f7d7"}.fa-terminal:before{content:"\f120"}.fa-text-height:before{content:"\f034"}.fa-text-width:before{content:"\f035"}.fa-th:before{content:"\f00a"}.fa-th-large:before{content:"\f009"}.fa-th-list:before{content:"\f00b"}.fa-the-red-yeti:before{content:"\f69d"}.fa-theater-masks:before{content:"\f630"}.fa-themeco:before{content:"\f5c6"}.fa-themeisle:before{content:"\f2b2"}.fa-thermometer:before{content:"\f491"}.fa-thermometer-empty:before{content:"\f2cb"}.fa-thermometer-full:before{content:"\f2c7"}.fa-thermometer-half:before{content:"\f2c9"}.fa-thermometer-quarter:before{content:"\f2ca"}.fa-thermometer-three-quarters:before{content:"\f2c8"}.fa-think-peaks:before{content:"\f731"}.fa-thumbs-down:before{content:"\f165"}.fa-thumbs-up:before{content:"\f164"}.fa-thumbtack:before{content:"\f08d"}.fa-ticket-alt:before{content:"\f3ff"}.fa-times:before{content:"\f00d"}.fa-times-circle:before{content:"\f057"}.fa-tint:before{content:"\f043"}.fa-tint-slash:before{content:"\f5c7"}.fa-tired:before{content:"\f5c8"}.fa-toggle-off:before{content:"\f204"}.fa-toggle-on:before{content:"\f205"}.fa-toilet:before{content:"\f7d8"}.fa-toilet-paper:before{content:"\f71e"}.fa-toilet-paper-slash:before{content:"\f972"}.fa-toolbox:before{content:"\f552"}.fa-tools:before{content:"\f7d9"}.fa-tooth:before{content:"\f5c9"}.fa-torah:before{content:"\f6a0"}.fa-torii-gate:before{content:"\f6a1"}.fa-tractor:before{content:"\f722"}.fa-trade-federation:before{content:"\f513"}.fa-trademark:before{content:"\f25c"}.fa-traffic-light:before{content:"\f637"}.fa-trailer:before{content:"\f941"}.fa-train:before{content:"\f238"}.fa-tram:before{content:"\f7da"}.fa-transgender:before{content:"\f224"}.fa-transgender-alt:before{content:"\f225"}.fa-trash:before{content:"\f1f8"}.fa-trash-alt:before{content:"\f2ed"}.fa-trash-restore:before{content:"\f829"}.fa-trash-restore-alt:before{content:"\f82a"}.fa-tree:before{content:"\f1bb"}.fa-trello:before{content:"\f181"}.fa-tripadvisor:before{content:"\f262"}.fa-trophy:before{content:"\f091"}.fa-truck:before{content:"\f0d1"}.fa-truck-loading:before{content:"\f4de"}.fa-truck-monster:before{content:"\f63b"}.fa-truck-moving:before{content:"\f4df"}.fa-truck-pickup:before{content:"\f63c"}.fa-tshirt:before{content:"\f553"}.fa-tty:before{content:"\f1e4"}.fa-tumblr:before{content:"\f173"}.fa-tumblr-square:before{content:"\f174"}.fa-tv:before{content:"\f26c"}.fa-twitch:before{content:"\f1e8"}.fa-twitter:before{content:"\f099"}.fa-twitter-square:before{content:"\f081"}.fa-typo3:before{content:"\f42b"}.fa-uber:before{content:"\f402"}.fa-ubuntu:before{content:"\f7df"}.fa-uikit:before{content:"\f403"}.fa-umbraco:before{content:"\f8e8"}.fa-umbrella:before{content:"\f0e9"}.fa-umbrella-beach:before{content:"\f5ca"}.fa-underline:before{content:"\f0cd"}.fa-undo:before{content:"\f0e2"}.fa-undo-alt:before{content:"\f2ea"}.fa-uniregistry:before{content:"\f404"}.fa-unity:before{content:"\f949"}.fa-universal-access:before{content:"\f29a"}.fa-university:before{content:"\f19c"}.fa-unlink:before{content:"\f127"}.fa-unlock:before{content:"\f09c"}.fa-unlock-alt:before{content:"\f13e"}.fa-untappd:before{content:"\f405"}.fa-upload:before{content:"\f093"}.fa-ups:before{content:"\f7e0"}.fa-usb:before{content:"\f287"}.fa-user:before{content:"\f007"}.fa-user-alt:before{content:"\f406"}.fa-user-alt-slash:before{content:"\f4fa"}.fa-user-astronaut:before{content:"\f4fb"}.fa-user-check:before{content:"\f4fc"}.fa-user-circle:before{content:"\f2bd"}.fa-user-clock:before{content:"\f4fd"}.fa-user-cog:before{content:"\f4fe"}.fa-user-edit:before{content:"\f4ff"}.fa-user-friends:before{content:"\f500"}.fa-user-graduate:before{content:"\f501"}.fa-user-injured:before{content:"\f728"}.fa-user-lock:before{content:"\f502"}.fa-user-md:before{content:"\f0f0"}.fa-user-minus:before{content:"\f503"}.fa-user-ninja:before{content:"\f504"}.fa-user-nurse:before{content:"\f82f"}.fa-user-plus:before{content:"\f234"}.fa-user-secret:before{content:"\f21b"}.fa-user-shield:before{content:"\f505"}.fa-user-slash:before{content:"\f506"}.fa-user-tag:before{content:"\f507"}.fa-user-tie:before{content:"\f508"}.fa-user-times:before{content:"\f235"}.fa-users:before{content:"\f0c0"}.fa-users-cog:before{content:"\f509"}.fa-usps:before{content:"\f7e1"}.fa-ussunnah:before{content:"\f407"}.fa-utensil-spoon:before{content:"\f2e5"}.fa-utensils:before{content:"\f2e7"}.fa-vaadin:before{content:"\f408"}.fa-vector-square:before{content:"\f5cb"}.fa-venus:before{content:"\f221"}.fa-venus-double:before{content:"\f226"}.fa-venus-mars:before{content:"\f228"}.fa-viacoin:before{content:"\f237"}.fa-viadeo:before{content:"\f2a9"}.fa-viadeo-square:before{content:"\f2aa"}.fa-vial:before{content:"\f492"}.fa-vials:before{content:"\f493"}.fa-viber:before{content:"\f409"}.fa-video:before{content:"\f03d"}.fa-video-slash:before{content:"\f4e2"}.fa-vihara:before{content:"\f6a7"}.fa-vimeo:before{content:"\f40a"}.fa-vimeo-square:before{content:"\f194"}.fa-vimeo-v:before{content:"\f27d"}.fa-vine:before{content:"\f1ca"}.fa-virus:before{content:"\f974"}.fa-virus-slash:before{content:"\f975"}.fa-viruses:before{content:"\f976"}.fa-vk:before{content:"\f189"}.fa-vnv:before{content:"\f40b"}.fa-voicemail:before{content:"\f897"}.fa-volleyball-ball:before{content:"\f45f"}.fa-volume-down:before{content:"\f027"}.fa-volume-mute:before{content:"\f6a9"}.fa-volume-off:before{content:"\f026"}.fa-volume-up:before{content:"\f028"}.fa-vote-yea:before{content:"\f772"}.fa-vr-cardboard:before{content:"\f729"}.fa-vuejs:before{content:"\f41f"}.fa-walking:before{content:"\f554"}.fa-wallet:before{content:"\f555"}.fa-warehouse:before{content:"\f494"}.fa-water:before{content:"\f773"}.fa-wave-square:before{content:"\f83e"}.fa-waze:before{content:"\f83f"}.fa-weebly:before{content:"\f5cc"}.fa-weibo:before{content:"\f18a"}.fa-weight:before{content:"\f496"}.fa-weight-hanging:before{content:"\f5cd"}.fa-weixin:before{content:"\f1d7"}.fa-whatsapp:before{content:"\f232"}.fa-whatsapp-square:before{content:"\f40c"}.fa-wheelchair:before{content:"\f193"}.fa-whmcs:before{content:"\f40d"}.fa-wifi:before{content:"\f1eb"}.fa-wikipedia-w:before{content:"\f266"}.fa-wind:before{content:"\f72e"}.fa-window-close:before{content:"\f410"}.fa-window-maximize:before{content:"\f2d0"}.fa-window-minimize:before{content:"\f2d1"}.fa-window-restore:before{content:"\f2d2"}.fa-windows:before{content:"\f17a"}.fa-wine-bottle:before{content:"\f72f"}.fa-wine-glass:before{content:"\f4e3"}.fa-wine-glass-alt:before{content:"\f5ce"}.fa-wix:before{content:"\f5cf"}.fa-wizards-of-the-coast:before{content:"\f730"}.fa-wolf-pack-battalion:before{content:"\f514"}.fa-won-sign:before{content:"\f159"}.fa-wordpress:before{content:"\f19a"}.fa-wordpress-simple:before{content:"\f411"}.fa-wpbeginner:before{content:"\f297"}.fa-wpexplorer:before{content:"\f2de"}.fa-wpforms:before{content:"\f298"}.fa-wpressr:before{content:"\f3e4"}.fa-wrench:before{content:"\f0ad"}.fa-x-ray:before{content:"\f497"}.fa-xbox:before{content:"\f412"}.fa-xing:before{content:"\f168"}.fa-xing-square:before{content:"\f169"}.fa-y-combinator:before{content:"\f23b"}.fa-yahoo:before{content:"\f19e"}.fa-yammer:before{content:"\f840"}.fa-yandex:before{content:"\f413"}.fa-yandex-international:before{content:"\f414"}.fa-yarn:before{content:"\f7e3"}.fa-yelp:before{content:"\f1e9"}.fa-yen-sign:before{content:"\f157"}.fa-yin-yang:before{content:"\f6ad"}.fa-yoast:before{content:"\f2b1"}.fa-youtube:before{content:"\f167"}.fa-youtube-square:before{content:"\f431"}.fa-zhihu:before{content:"\f63f"}.sr-only{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.sr-only-focusable:active,.sr-only-focusable:focus{clip:auto;height:auto;margin:0;overflow:visible;position:static;width:auto} -------------------------------------------------------------------------------- /extension/libs/fontawesome-free/css/regular.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Font Awesome Free 5.13.0 by @fontawesome - https://fontawesome.com 3 | * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) 4 | */ 5 | @font-face { 6 | font-family: 'Font Awesome 5 Free'; 7 | font-style: normal; 8 | font-weight: 400; 9 | font-display: block; 10 | /* src: url("../webfonts/fa-regular-400.eot"); 11 | src: url("../webfonts/fa-regular-400.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-regular-400.woff2") format("woff2"), url("../webfonts/fa-regular-400.woff") format("woff"), url("../webfonts/fa-regular-400.ttf") format("truetype"), url("../webfonts/fa-regular-400.svg#fontawesome") format("svg"); } */ 12 | src: url("../webfonts/fa-regular-400.woff2") format("woff2"); } 13 | 14 | .far { 15 | font-family: 'Font Awesome 5 Free'; 16 | font-weight: 400; } 17 | -------------------------------------------------------------------------------- /extension/libs/fontawesome-free/css/solid.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Font Awesome Free 5.13.0 by @fontawesome - https://fontawesome.com 3 | * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) 4 | */ 5 | @font-face { 6 | font-family: 'Font Awesome 5 Free'; 7 | font-style: normal; 8 | font-weight: 900; 9 | font-display: block; 10 | /* src: url("../webfonts/fa-solid-900.eot"); 11 | src: url("../webfonts/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-solid-900.woff2") format("woff2"), url("../webfonts/fa-solid-900.woff") format("woff"), url("../webfonts/fa-solid-900.ttf") format("truetype"), url("../webfonts/fa-solid-900.svg#fontawesome") format("svg"); } */ 12 | src: url("../webfonts/fa-solid-900.woff2") format("woff2"); } 13 | 14 | .fa, 15 | .fas { 16 | font-family: 'Font Awesome 5 Free'; 17 | font-weight: 900; } 18 | -------------------------------------------------------------------------------- /extension/libs/fontawesome-free/webfonts/fa-regular-400.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jip-Hop/jitsi-pop/d34ab3b92ce6b5a8302e0f40bb31e5db83741b42/extension/libs/fontawesome-free/webfonts/fa-regular-400.woff2 -------------------------------------------------------------------------------- /extension/libs/fontawesome-free/webfonts/fa-solid-900.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jip-Hop/jitsi-pop/d34ab3b92ce6b5a8302e0f40bb31e5db83741b42/extension/libs/fontawesome-free/webfonts/fa-solid-900.woff2 -------------------------------------------------------------------------------- /extension/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Pop-out Jitsi Meet", 3 | "version": "2.0.3", 4 | "manifest_version": 2, 5 | "description": "Open Jitsi Meet videos in pop-out windows.", 6 | "icons": { 7 | "16": "icons/icon16.png", 8 | "48": "icons/icon48.png", 9 | "128": "icons/icon128.png", 10 | "980": "icons/icon980.png" 11 | }, 12 | "background": { 13 | "page": "src/bg/background.html", 14 | "persistent": true 15 | }, 16 | "browser_action": { 17 | "default_popup": "src/browser_action/browser_action.html" 18 | }, 19 | "web_accessible_resources": [ 20 | "src/inject/*", 21 | "libs/fontawesome-free/*", 22 | "libs/bootstrap/css/bootstrap.min.css" 23 | ], 24 | "content_scripts": [ 25 | { 26 | "matches": [ 27 | "https://meet.jit.si/*", 28 | "https://8x8.vc/*", 29 | "https://jitsi.riot.im/*" 30 | ], 31 | "run_at": "document_start", 32 | "match_about_blank": true, 33 | "all_frames": true, 34 | "js": ["src/inject/inject.js"] 35 | } 36 | ], 37 | "externally_connectable": { 38 | "matches": [ 39 | "https://jip-hop.github.io/jitsi-pop/*", 40 | "https://jitsipop.debeer.it/*", 41 | "https://jitsipop.tk/*" 42 | ] 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /extension/src/bg/background.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /extension/src/bg/background.js: -------------------------------------------------------------------------------- 1 | window.servers = [ 2 | // "beta.meet.jit.si", 3 | "meet.jit.si", 4 | "8x8.vc", 5 | "jitsi.riot.im", 6 | ]; 7 | 8 | import { options } from "./jitsiConfig.js"; 9 | 10 | window.options = options; 11 | window.selectedServerIndex = 0; 12 | 13 | const extId = chrome.runtime.id; 14 | const windowTarget = "meet"; 15 | const width = 960, 16 | height = 465; 17 | 18 | var openedUrl; 19 | var mainAppBrowserTab; 20 | var videoPopupBrowserTabs = []; 21 | var connectionState; 22 | var windowClosedPoller; 23 | var domain; 24 | var roomName; 25 | 26 | const tryUpdate = (tabId, updateProperties) => { 27 | chrome.windows.update(tabId, updateProperties, () => { 28 | if (chrome.runtime.lastError) { 29 | console.log(chrome.runtime.lastError.message); 30 | } 31 | }); 32 | }; 33 | 34 | const conferenceWindowOpen = () => { 35 | return window.mainAppWindowObject && !window.mainAppWindowObject.closed; 36 | }; 37 | 38 | const setConnectionState = (int) => { 39 | connectionState = int; 40 | if (connectionState === 0) { 41 | clearInterval(windowClosedPoller); 42 | chrome.browserAction.setBadgeText({ text: "" }); 43 | // Send message to notify the browser action popup 44 | chrome.runtime.sendMessage({ 45 | type: "videoConferenceLeft", 46 | }); 47 | } else if (connectionState === 1) { 48 | chrome.browserAction.setBadgeBackgroundColor({ 49 | color: [255, 153, 31, 255], 50 | }); 51 | chrome.browserAction.setBadgeText({ text: " " }); 52 | } else if (connectionState === 2) { 53 | chrome.browserAction.setBadgeBackgroundColor({ 54 | color: [65, 216, 115, 255], 55 | }); 56 | chrome.browserAction.setBadgeText({ text: " " }); 57 | } 58 | }; 59 | 60 | const closeMainAppWindowObject = () => { 61 | if (conferenceWindowOpen()) { 62 | window.mainAppWindowObject.close(); 63 | setConnectionState(0); 64 | } 65 | }; 66 | 67 | window.openPopout = (newRoomName) => { 68 | roomName = newRoomName; 69 | domain = servers[selectedServerIndex]; 70 | localStorage.setItem("serverSelect", selectedServerIndex); 71 | 72 | let recentRoomNames = JSON.parse(localStorage.getItem("recentRooms")) || []; 73 | // If roomName is already in the list, get rid of it 74 | recentRoomNames = recentRoomNames.filter((e) => e.roomName !== roomName); 75 | // Then add it to the front 76 | recentRoomNames.unshift({ roomName: roomName, timestamp: Date.now() }); 77 | localStorage.setItem("recentRooms", JSON.stringify(recentRoomNames)); 78 | 79 | openedUrl = `https://${domain}/#/extId=${extId}/roomName=${roomName}`; 80 | window.mainAppWindowObject = window.open( 81 | openedUrl, 82 | windowTarget, 83 | `status=no,menubar=no,width=${width},height=${height},left=${ 84 | screen.width / 2 - width / 2 85 | },top=${screen.height / 2 - height / 2}` 86 | ); 87 | 88 | setConnectionState(1); 89 | 90 | // We need to poll the window to check if it's closed, 91 | // because when there's no internet connection we can't 92 | // setup the content script to notify us when the window closes. 93 | // Using onbeforeunload doesn't tell us if the window actually closed, 94 | // and it seemed to fire too soon anyway (maybe due to window.stop()?). 95 | clearInterval(windowClosedPoller); 96 | windowClosedPoller = setInterval(() => { 97 | if ( 98 | connectionState > 0 && 99 | window.mainAppWindowObject && 100 | window.mainAppWindowObject.closed 101 | ) { 102 | setConnectionState(0); 103 | } 104 | }, 1000); 105 | }; 106 | 107 | window.focusAllWindows = () => { 108 | // Focus from here, calling .focus() in content script is limited 109 | 110 | videoPopupBrowserTabs.forEach((tab) => { 111 | tryUpdate(tab.windowId, { focused: true }); 112 | }); 113 | if (mainAppBrowserTab) { 114 | tryUpdate(mainAppBrowserTab.windowId, { focused: true }); 115 | } else if (conferenceWindowOpen()) { 116 | // Try to focus window this way. 117 | // Would only happen when content script couldn't init, 118 | // e.g. due to internet down. 119 | window.mainAppWindowObject = window.open(openedUrl, windowTarget); 120 | } 121 | }; 122 | 123 | window.disconnect = () => { 124 | focusAllWindows(); 125 | const shouldClose = confirm(`Close all windows?`); 126 | if (shouldClose == true) { 127 | closeMainAppWindowObject(); 128 | } 129 | }; 130 | 131 | chrome.tabs.onRemoved.addListener((tabId) => { 132 | if (mainAppBrowserTab && mainAppBrowserTab.id === tabId) { 133 | // Main window closed 134 | setConnectionState(0); 135 | mainAppBrowserTab = null; 136 | } else { 137 | // Check if video popup is closed 138 | videoPopupBrowserTabs = videoPopupBrowserTabs.filter(function (tab) { 139 | if (tab.id === tabId) { 140 | // Video popup is closed 141 | return false; 142 | } 143 | // Keep this id, it's not yet closed 144 | return true; 145 | }); 146 | } 147 | }); 148 | 149 | chrome.runtime.onMessage.addListener(function (message, sender, sendResponse) { 150 | if (message.type === "mainWinLoad") { 151 | mainAppBrowserTab = sender.tab; 152 | sendResponse({ options: options }); 153 | focusAllWindows(); 154 | } else if (message.type === "videoWinLoad") { 155 | videoPopupBrowserTabs.push(sender.tab); 156 | } else if (message.type === "toggleFullScreen") { 157 | chrome.windows.get(sender.tab.windowId, {}, (win) => { 158 | if (chrome.runtime.lastError) { 159 | console.log(chrome.runtime.lastError.message); 160 | } else { 161 | const newState = win.state === "fullscreen" ? "normal" : "fullscreen"; 162 | tryUpdate(sender.tab.windowId, { state: newState }); 163 | } 164 | }); 165 | } else if (message.type === "videoConferenceLeft") { 166 | setConnectionState(0); 167 | } else if (message.type === "videoConferenceConnecting") { 168 | setConnectionState(1); 169 | } else if (message.type === "videoConferenceJoined") { 170 | setConnectionState(2); 171 | } 172 | }); 173 | 174 | chrome.runtime.onMessageExternal.addListener(function ( 175 | message, 176 | sender, 177 | sendResponse 178 | ) { 179 | if (message.type === "deepLink") { 180 | const serverIndex = servers.indexOf(message.domain); 181 | if (serverIndex === -1) { 182 | // Unsupported server 183 | sendResponse({ 184 | deepLink: false, 185 | }); 186 | } else { 187 | const doDeepLink = (focusOnly) => { 188 | sendResponse({ 189 | deepLink: true, 190 | }); 191 | 192 | chrome.tabs.remove(sender.tab.id, () => { 193 | if (chrome.runtime.lastError) { 194 | console.log(chrome.runtime.lastError.message); 195 | } 196 | }); 197 | 198 | if (focusOnly) { 199 | focusAllWindows(); 200 | } else { 201 | selectedServerIndex = serverIndex; 202 | openPopout(message.roomName); 203 | } 204 | }; 205 | 206 | if (conferenceWindowOpen()) { 207 | // Already in conference 208 | if (roomName === message.roomName && domain === message.domain) { 209 | // Already in linked conference 210 | const shouldEmbed = confirm( 211 | `You're already in "${message.roomName}" on server "${message.domain}". Opening another instance in this tab may cause feedback loops. Are you sure you want to continue?` 212 | ); 213 | if (shouldEmbed) { 214 | sendResponse({ 215 | deepLink: false, 216 | }); 217 | } else { 218 | doDeepLink(true); 219 | } 220 | } else { 221 | // Linking to a new conference 222 | focusAllWindows(); 223 | const shouldDeepLink = confirm( 224 | `Close current session and join room "${message.roomName}" on server "${message.domain}"?` 225 | ); 226 | if (shouldDeepLink) { 227 | closeMainAppWindowObject(); 228 | doDeepLink(); 229 | } else { 230 | sendResponse({ 231 | deepLink: false, 232 | }); 233 | } 234 | } 235 | } else { 236 | doDeepLink(); 237 | } 238 | } 239 | 240 | return true; 241 | } 242 | }); 243 | 244 | setConnectionState(0); 245 | -------------------------------------------------------------------------------- /extension/src/bg/jitsiConfig.js: -------------------------------------------------------------------------------- 1 | // TODO disable logging 2 | 3 | // check view-source:https://meet.jit.si/ for default config values 4 | // or https://github.com/jitsi/jitsi-meet/blob/master/config.js 5 | const config = { 6 | resolution: 720, 7 | constraints: { 8 | video: { 9 | aspectRatio: 16 / 9, 10 | height: { 11 | ideal: 720, 12 | max: 720, 13 | min: 180 14 | }, 15 | width: { 16 | ideal: 1280, 17 | max: 1280, 18 | min: 320 19 | } 20 | } 21 | }, 22 | desktopSharingFrameRate: { 23 | min: 30, 24 | max: 30 25 | }, 26 | disableSuspendVideo: false, 27 | analytics: { disabled: true }, 28 | googleApiApplicationClientID: "", 29 | microsoftApiApplicationClientID: "", 30 | enableCalendarIntegration: false, 31 | enableClosePage: false, 32 | callStatsCustomScriptUrl: "", 33 | hiddenDomain: "", 34 | dropbox: { disabled: true }, 35 | enableRecording: false, 36 | transcribingEnabled: false, 37 | liveStreamingEnabled: false, 38 | fileRecordingsEnabled: false, 39 | fileRecordingsServiceSharingEnabled: false, 40 | requireDisplayName: true, 41 | enableWelcomePage: false, 42 | isBrand: false, 43 | logStats: false, 44 | callStatsID: "", 45 | callStatsSecret: "", 46 | dialInNumbersUrl: "", 47 | dialInConfCodeUrl: "", 48 | dialOutCodesUrl: "", 49 | dialOutAuthUrl: "", 50 | peopleSearchUrl: "", 51 | inviteServiceUrl: "", 52 | inviteServiceCallFlowsUrl: "", 53 | peopleSearchQueryTypes: [], 54 | chromeExtensionBanner: {}, 55 | hepopAnalyticsUrl: "", 56 | hepopAnalyticsEvent: {}, 57 | deploymentInfo: {}, 58 | disableThirdPartyRequests: true, 59 | enableDisplayNameInStats: false, 60 | enableEmailInStats: false, 61 | gatherStats: false, 62 | enableStatsID: false, 63 | disableDeepLinking: true, 64 | prejoinPageEnabled: false, 65 | // disableAudioLevels: true won't prevent switching the dominant speaker. 66 | // Also, can't guarantee each participant uses this setting. 67 | // Additionally it disables audio levels in microphone GUI. 68 | // So need to keep audio levels enabled. 69 | disableAudioLevels: false 70 | }; 71 | 72 | const interfaceConfig = { 73 | // DEFAULT_BACKGROUND: "#000000", 74 | DISABLE_VIDEO_BACKGROUND: true, 75 | DEFAULT_REMOTE_DISPLAY_NAME: "nameless", 76 | DEFAULT_LOCAL_DISPLAY_NAME: "me", 77 | GENERATE_ROOMNAMES_ON_WELCOME_PAGE: false, 78 | DISPLAY_WELCOME_PAGE_CONTENT: false, 79 | INVITATION_POWERED_BY: false, 80 | AUTHENTICATION_ENABLE: false, 81 | TOOLBAR_BUTTONS: [ 82 | "microphone", 83 | "camera", 84 | "desktop", 85 | "fullscreen", 86 | "fodeviceselection", 87 | "profile", 88 | "chat", 89 | "settings", 90 | "videoquality", 91 | "filmstrip", 92 | "shortcuts", 93 | "tileview", 94 | "help", 95 | "mute-everyone" 96 | ], 97 | 98 | SETTINGS_SECTIONS: ["devices", "language", "moderator", "profile"], 99 | VIDEO_LAYOUT_FIT: "width", 100 | VERTICAL_FILMSTRIP: true, 101 | CLOSE_PAGE_GUEST_HINT: false, 102 | SHOW_PROMOTIONAL_CLOSE_PAGE: false, 103 | FILM_STRIP_MAX_HEIGHT: 120, 104 | DISABLE_TRANSCRIPTION_SUBTITLES: true, 105 | DISABLE_RINGING: true, 106 | LOCAL_THUMBNAIL_RATIO: 16 / 9, 107 | REMOTE_THUMBNAIL_RATIO: 16 / 9, 108 | RECENT_LIST_ENABLED: false, 109 | SHOW_CHROME_EXTENSION_BANNER: false, 110 | DISABLE_PRESENCE_STATUS: true, 111 | DISABLE_JOIN_LEAVE_NOTIFICATIONS: true, 112 | DISABLE_DOMINANT_SPEAKER_INDICATOR: true 113 | }; 114 | 115 | // Logging configuration 116 | const loggingConfig = { 117 | // default log level for the app and lib-jitsi-meet 118 | defaultLogLevel: "trace", 119 | 120 | // Option to disable LogCollector (which stores the logs on CallStats) 121 | // disableLogCollector: true, 122 | 123 | // The following are too verbose in their logging with the 124 | // {@link #defaultLogLevel}: 125 | "modules/RTC/TraceablePeerConnection.js": "info", 126 | "modules/statistics/CallStats.js": "info", 127 | "modules/xmpp/strophe.util.js": "log" 128 | }; 129 | 130 | export const options = { 131 | // https://github.com/jitsi/jitsi-meet/blob/master/config.js 132 | configOverwrite: config, 133 | // https://github.com/jitsi/jitsi-meet/blob/master/interface_config.js 134 | interfaceConfigOverwrite: interfaceConfig 135 | }; 136 | -------------------------------------------------------------------------------- /extension/src/browser_action/arrow.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /extension/src/browser_action/browser_action.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 253 | 254 | 255 |

Pop-out Jitsi Meet

256 | 257 |
258 |
259 |
260 | 269 | 270 | 271 |
272 | Use only letters, numbers, dashes and underscores for the room name. 273 |
274 |
275 |
276 |
277 |
278 |
279 | 280 |
281 |
282 | 283 |

284 | People may accidentally enter your room if the room name is common or 285 | easy to guess. 286 |

287 | Copy invite link 288 | 289 | 290 |
291 | 292 | 293 | 294 | -------------------------------------------------------------------------------- /extension/src/browser_action/browser_action.js: -------------------------------------------------------------------------------- 1 | const background = chrome.extension.getBackgroundPage(); 2 | 3 | const servers = background.servers; 4 | 5 | const serverSelect = document.getElementById("server-select"); 6 | const roomnameInput = document.getElementById("roomname"); 7 | const recentRoomsDatalist = document.getElementById("recent_rooms_list"); 8 | const recentRoomsInput = document.getElementById("recent_rooms_input"); 9 | const randomButton = document.getElementById("random"); 10 | const submitButton = document.getElementById("submit"); 11 | const showButton = document.getElementById("show"); 12 | const link = document.querySelector("a"); 13 | const wishlist = 14 | "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"; 15 | 16 | const recentRoomNames = JSON.parse(localStorage.getItem("recentRooms")) || []; 17 | 18 | serverSelect.innerHTML = servers.map((server, index) => { 19 | return ``; 20 | }); 21 | 22 | const handleInConference = () => { 23 | submitButton.value = "Close"; 24 | document.querySelectorAll("input, select").forEach((input) => { 25 | if (input.type === "submit") return; 26 | input.disabled = true; 27 | }); 28 | document.body.classList.add("in-conference"); 29 | }; 30 | 31 | const handleNotInConference = () => { 32 | submitButton.value = "Enter"; 33 | document.querySelectorAll("input, select").forEach((input) => { 34 | if (input.type === "submit") return; 35 | input.disabled = false; 36 | }); 37 | document.body.classList.remove("in-conference"); 38 | }; 39 | 40 | const generate = (length = 12) => 41 | Array(length) 42 | .fill("") 43 | .map( 44 | () => 45 | wishlist[ 46 | Math.floor( 47 | (crypto.getRandomValues(new Uint32Array(1))[0] / (0xffffffff + 1)) * 48 | wishlist.length 49 | ) 50 | ] 51 | ) 52 | .join(""); 53 | 54 | const setServerValue = (value) => { 55 | // Range check 56 | value = parseInt(value); 57 | if (value >= 0 && value < servers.length) { 58 | setValue(serverSelect, value); 59 | } else { 60 | setValue(serverSelect, 0); 61 | } 62 | }; 63 | 64 | const setValue = (input, value) => { 65 | input.value = value; 66 | if (typeof input.oninput === "function") { 67 | input.oninput({ target: input }); 68 | } 69 | }; 70 | 71 | randomButton.onclick = (e) => { 72 | setValue(roomnameInput, generate(12)); 73 | }; 74 | 75 | link.onclick = (e) => { 76 | e.preventDefault(); 77 | const tmpString = "Copied!"; 78 | navigator.clipboard 79 | .writeText( 80 | `https://jitsipop.tk/#/${servers[background.selectedServerIndex]}/${ 81 | roomnameInput.value 82 | }` 83 | ) 84 | .then( 85 | () => { 86 | if (link.innerText !== tmpString) { 87 | const oldString = link.innerText; 88 | link.innerText = tmpString; 89 | setTimeout(() => { 90 | link.innerText = oldString; 91 | }, 1000); 92 | } 93 | }, 94 | (err) => { 95 | console.error("Async: Could not copy text: ", err); 96 | } 97 | ); 98 | }; 99 | 100 | // Set values from local storage 101 | setValue( 102 | roomnameInput, 103 | (recentRoomNames.length && recentRoomNames[0].roomName) || "" 104 | ); 105 | setServerValue(localStorage.getItem("serverSelect")); 106 | 107 | if (recentRoomNames.length) { 108 | recentRoomsDatalist.innerHTML = recentRoomNames.map((d) => { 109 | const date = new Date(d.timestamp); 110 | return ``; 113 | }); 114 | 115 | recentRoomsInput.oninput = (e) => { 116 | if (e.inputType === "insertText") { 117 | roomnameInput.focus(); 118 | setValue(roomnameInput, roomnameInput.value + e.data); 119 | } else if (e.target.value !== "") { 120 | setValue(roomnameInput, e.target.value); 121 | } 122 | 123 | e.target.value = ""; 124 | }; 125 | } else { 126 | recentRoomsInput.style.display = "none"; 127 | } 128 | 129 | document.querySelector("form").onsubmit = (e) => { 130 | e.preventDefault(); 131 | if (document.body.classList.contains("in-conference")) { 132 | background.disconnect(); 133 | } else { 134 | background.selectedServerIndex = parseInt(serverSelect.value); 135 | background.openPopout(roomnameInput.value); 136 | } 137 | window.close(); 138 | }; 139 | 140 | document.addEventListener("keydown", (e) => { 141 | if (e.keyCode == "13") { 142 | e.preventDefault(); 143 | if ( 144 | !background.mainAppWindowObject || 145 | background.mainAppWindowObject.closed 146 | ) { 147 | // Don't click the submit button when we're in a conference, 148 | // it would close the main window 149 | submitButton.click(); 150 | } 151 | } 152 | }); 153 | 154 | showButton.onclick = (e) => { 155 | e.preventDefault(); 156 | background.focusAllWindows(); 157 | window.close(); 158 | }; 159 | 160 | chrome.runtime.onMessage.addListener(function (message) { 161 | if (message.type === "videoConferenceJoined") { 162 | handleInConference(); 163 | } else if (message.type === "videoConferenceLeft") { 164 | handleNotInConference(); 165 | } 166 | }); 167 | 168 | window.addEventListener("storage", function (e) { 169 | if (e.key === "serverSelect") { 170 | setServerValue(e.newValue); 171 | } 172 | }); 173 | 174 | if (background.mainAppWindowObject && !background.mainAppWindowObject.closed) { 175 | handleInConference(); 176 | } else { 177 | handleNotInConference(); 178 | } 179 | 180 | document.body.style.display = "block"; 181 | -------------------------------------------------------------------------------- /extension/src/browser_action/check.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /extension/src/browser_action/random.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /extension/src/inject/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Pop-out Jitsi Meet 6 | 344 | 345 | 346 |
347 |

348 | 351 | 354 | 357 | 360 | 363 | 366 | 369 | 372 |
373 | 374 |
375 | 379 |
380 | 401 |
402 |
403 |
404 |
405 | 412 | 419 |
420 |
421 |

422 | Number of open Pop-out windows: 423 | 0. 424 |

425 |

426 | Select a stream in the bar on the left and click "Pop-out" to 427 | open the stream in its own window. 428 |

429 |
430 |
431 |
432 |
433 | 440 | 447 |
448 |
449 |

450 | Number of open Mappertje windows: 451 | 0. 452 |

453 |

454 | Select a stream in the bar on the left and click "Mappertje" 455 | to map and correct its perspective in a separate window. 456 |

457 |
458 |
459 |
460 |
461 | 464 | 471 | 478 |
479 |
480 | 485 | 486 |

Select the multiview layout:

487 | 488 |
489 | 496 | 505 |
506 | 507 |
508 | 514 | 523 |
524 |
525 |
526 |
527 |

Select how to mute streams:

528 | 529 |
530 | 537 | 544 |
545 | 546 |
547 | 553 | 562 |
563 | 564 |
565 | 571 | 579 |
580 | 581 |
582 | 588 | 596 |
597 |
598 |
599 | TODO: input field to change displayName, a warning when it's 600 | invalid, a list of facts about the nickname. Dynamically insert 601 | "nameless" with JavaScript. 602 |

603 | With a proper nickname, your video will reliably show up in the 604 | pop-out and multiview windows for the participants in this 605 | conference room. Even when you leave and enter the room again. 606 |

607 |
    608 |
  • 609 | Your nickname is used to uniquely identify your video within 610 | this conference room. 611 |
    • 612 |
  • 613 | Don't use a name that's already taken, it will cause 614 | conflicts. 615 |
    • 616 |
  • 617 | Use another name for each connection, if you connect to this 618 | room simultaneously using multiple devices or browser windows. 619 |
    • 620 |
  • 621 | Never use an empty nickname, or a nickname with only 622 | whitespace. 623 |
    • 624 |
  • Also don't use "nameless", it will cause conflicts too.
    • 625 |
626 |
627 |
628 |
629 |
630 |
631 | 636 |
637 |
638 | 644 |
645 |
646 |
647 |
648 |
649 |
650 |
651 | 652 |
653 |
654 | 655 |
656 |
657 |
658 | 659 | 660 | -------------------------------------------------------------------------------- /extension/src/inject/index.js: -------------------------------------------------------------------------------- 1 | // Declare jitsipop API object 2 | const jitsipop = { 3 | api: null, 4 | multiviewWindow: null, 5 | multiviewLayout: "layout-fit", 6 | }; 7 | 8 | const database = new Map([ 9 | /* Data structure example 10 | [ 11 | 0, 12 | { 13 | videoId: 0, // unique, also used as key 14 | displayName: "jip", 15 | participantId: "asdfgh", // unique string 16 | sidebarVideoWrapper: "html element", // unique 17 | online: true, 18 | iframes: Set ["iframe window object"], // each iframe window object in the Set is unique 19 | windows: Set ["pop-out window object"], // each pop-out window object in the Set is unique 20 | order: int, // unique, used for sorting, starts at 1 21 | mappertjeState: {}, 22 | }, 23 | ], 24 | */ 25 | ]); 26 | 27 | // Try to import Mappertje 28 | import( 29 | "chrome-extension://okokapnhegofpbaeogkmbcaflmgiopkg/modules/mapper/index.js" 30 | ) 31 | .then((module) => { 32 | jitsipop.mapper = module.default; 33 | document.documentElement.classList.add("mappertje"); 34 | }) 35 | .catch((e) => { 36 | console.log("Couldn't integrate with Mappertje.", e); 37 | }); 38 | 39 | var options = {}; 40 | var api; 41 | var selectedVideoId = null; 42 | const multiviewSelection = new Set(); 43 | 44 | const toolbarHeight = window.outerHeight - window.innerHeight; 45 | const popupWidth = 480; 46 | const popupHeight = 270 + toolbarHeight; 47 | var xOffset = screen.availLeft, 48 | yOffset = screen.availTop; 49 | 50 | const extId = chrome.runtime.id; 51 | 52 | const bc = new BroadcastChannel("popout_jitsi_channel"); 53 | 54 | var videoIdCounter = 0; 55 | var myDisplayName, myUserID; 56 | 57 | const receiveHighRes = (participantId, shouldReceiveHighRes) => { 58 | if (shouldReceiveHighRes) { 59 | bc.postMessage({ select: participantId }); 60 | } else { 61 | bc.postMessage({ deselect: participantId }); 62 | } 63 | }; 64 | 65 | const formatDisplayName = (displayName) => { 66 | return displayName && displayName !== "" 67 | ? displayName 68 | : options.interfaceConfigOverwrite.DEFAULT_REMOTE_DISPLAY_NAME; 69 | }; 70 | 71 | const getParticipantVideo = (participantId) => { 72 | if (api && api._getParticipantVideo) { 73 | return api._getParticipantVideo(participantId); 74 | } 75 | }; 76 | 77 | const getItem = (videoId) => { 78 | return database.get(videoId); 79 | }; 80 | 81 | const getMappertjeState = (videoId) => { 82 | const item = getItem(videoId); 83 | if (item) { 84 | return item.mappertjeState; 85 | } 86 | }; 87 | 88 | const setMappertjeState = (videoId, state) => { 89 | const item = getItem(videoId); 90 | if (item) { 91 | item.mappertjeState = state; 92 | } 93 | }; 94 | 95 | const getNumberOfWindows = () => { 96 | let popouts = 0; 97 | let mappertjes = 0; 98 | for (let item of database.values()) { 99 | if (item.windows) { 100 | for (let win of item.windows) { 101 | if (win.location.hash.indexOf("mappertje=false") > -1) { 102 | popouts++; 103 | } else { 104 | mappertjes++; 105 | } 106 | } 107 | } 108 | } 109 | return { popouts: popouts, mappertjes: mappertjes }; 110 | }; 111 | 112 | const getFormattedDisplayName = (participantId) => { 113 | const item = getItemByParticipantId(participantId); 114 | return formatDisplayName(item ? item.displayName : ""); 115 | }; 116 | 117 | const getItemByParticipantId = (participantId) => { 118 | for (let item of database.values()) { 119 | if (item.participantId === participantId) { 120 | return item; 121 | } 122 | } 123 | 124 | console.trace( 125 | "Item not found for participantId", 126 | participantId, 127 | new Map(database) 128 | ); 129 | }; 130 | 131 | const removeOfflineItem = (videoId) => { 132 | const item = getItem(videoId); 133 | if (item && !item.online) { 134 | if (item.windows) { 135 | for (let win of item.windows) { 136 | win.close(); 137 | } 138 | } 139 | 140 | if (item.sidebarVideoWrapper) { 141 | item.sidebarVideoWrapper.remove(); 142 | } 143 | 144 | database.delete(videoId); 145 | 146 | // TODO: also remove this video from the multiview 147 | 148 | // TODO: select the video above the one we just removed, 149 | // and keep context bar open. 150 | // Or close if there are no video's left. 151 | 152 | if (videoId === selectedVideoId) { 153 | selectedVideoId = null; 154 | } 155 | 156 | closeContextbar(); 157 | } 158 | }; 159 | 160 | const getSidebarVideoWrapperByParticipantId = (participantId) => { 161 | const item = getItemByParticipantId(participantId); 162 | if (item && item.sidebarVideoWrapper) { 163 | return item.sidebarVideoWrapper; 164 | } else { 165 | console.trace( 166 | "sidebarVideoWrapper not found for participantId", 167 | participantId, 168 | new Map(database) 169 | ); 170 | } 171 | }; 172 | 173 | const addOrDeleteVideo = (videoId, win, type, action) => { 174 | const failMessage = () => { 175 | console.trace(`Couldn't ${action} ${type} for videoId`, videoId, item); 176 | }; 177 | 178 | var key; 179 | if (type === "window") { 180 | key = "windows"; 181 | } else if (type === "iframe") { 182 | key = "iframes"; 183 | } else { 184 | // Invalid type 185 | failMessage(); 186 | return; 187 | } 188 | 189 | const item = getItem(videoId); 190 | if (!item) { 191 | failMessage(); 192 | return; 193 | } 194 | 195 | if (action === "add") { 196 | item[key] && item[key].add(win); 197 | } else if (action === "delete") { 198 | item[key] && item[key].delete(win); 199 | } else { 200 | // Invalid action 201 | failMessage(); 202 | return; 203 | } 204 | 205 | const videoInMultiview = multiviewSelection.has(videoId); 206 | const videoInPopout = item.windows && item.windows.size; 207 | 208 | const sidebarVideoWrapper = item.sidebarVideoWrapper; 209 | if (sidebarVideoWrapper) { 210 | if (videoInMultiview) { 211 | sidebarVideoWrapper.classList.add("multiview"); 212 | } else { 213 | sidebarVideoWrapper.classList.remove("multiview"); 214 | } 215 | 216 | if (videoInPopout) { 217 | sidebarVideoWrapper.classList.add("popout"); 218 | } else { 219 | sidebarVideoWrapper.classList.remove("popout"); 220 | } 221 | } 222 | 223 | const windowCount = getNumberOfWindows(); 224 | 225 | document.querySelectorAll("#settings span.nr-of-popouts").forEach((span) => { 226 | span.innerHTML = windowCount.popouts; 227 | }); 228 | 229 | document 230 | .querySelectorAll("#settings span.nr-of-mappertjes") 231 | .forEach((span) => { 232 | span.innerHTML = windowCount.mappertjes; 233 | }); 234 | 235 | document 236 | .querySelectorAll("#settings button.depends-on-pop-outs") 237 | .forEach((button) => { 238 | button.disabled = !(windowCount.popouts > 0); 239 | }); 240 | 241 | document 242 | .querySelectorAll("#settings button.depends-on-mappertjes") 243 | .forEach((button) => { 244 | button.disabled = !(windowCount.mappertjes > 0); 245 | }); 246 | 247 | if (item.participantId) { 248 | if (!videoInMultiview && !videoInPopout) { 249 | // Video is no longer open in multiview or pop-out window, 250 | // stop receiving high resolution video 251 | receiveHighRes(item.participantId, false); 252 | } else { 253 | // Video is still in multiview or pop-out window, 254 | // receive high resolution video 255 | receiveHighRes(item.participantId, true); 256 | } 257 | } 258 | }; 259 | 260 | const focusAllWindows = (filter) => { 261 | for (let item of database.values()) { 262 | if (item.windows) { 263 | for (let win of item.windows) { 264 | if (!win.closed) { 265 | if (filter) { 266 | if ( 267 | filter === "pop-out" && 268 | win.location.hash.indexOf("mappertje=false") === -1 269 | ) { 270 | continue; 271 | } 272 | if ( 273 | filter === "mappertje" && 274 | win.location.hash.indexOf("mappertje=false") > -1 275 | ) { 276 | continue; 277 | } 278 | } 279 | win.focus(); 280 | } 281 | } 282 | } 283 | } 284 | }; 285 | 286 | const closeAllWindows = (filter) => { 287 | for (let item of database.values()) { 288 | if (item.windows) { 289 | for (let win of item.windows) { 290 | if (!win.closed) { 291 | if (filter) { 292 | if ( 293 | filter === "pop-out" && 294 | win.location.hash.indexOf("mappertje=false") === -1 295 | ) { 296 | continue; 297 | } 298 | if ( 299 | filter === "mappertje" && 300 | win.location.hash.indexOf("mappertje=false") > -1 301 | ) { 302 | continue; 303 | } 304 | } 305 | win.close(); 306 | } 307 | } 308 | } 309 | } 310 | }; 311 | 312 | const unloadHandler = () => { 313 | if (api) { 314 | api.dispose(); 315 | } 316 | 317 | if (jitsipop.multiviewWindow && !jitsipop.multiviewWindow.closed) { 318 | jitsipop.multiviewWindow.close(); 319 | } 320 | 321 | closeAllWindows(); 322 | }; 323 | 324 | const windowAlreadyOpen = (newWin) => { 325 | for (let item of database.values()) { 326 | if (item.windows && item.windows.has(newWin)) { 327 | return true; 328 | } 329 | } 330 | }; 331 | 332 | const getItemOrder = (videoId) => { 333 | const item = getItem(videoId); 334 | if (item) { 335 | return item.order; 336 | } 337 | }; 338 | 339 | const getParticipantId = (videoId) => { 340 | const databaseItem = database.get(videoId); 341 | if (databaseItem) { 342 | return databaseItem.participantId; 343 | } else { 344 | console.trace("Item not found for videoId", videoId, new Map(database)); 345 | } 346 | }; 347 | 348 | const getVideoDocUrl = (videoId, enableMappertje) => { 349 | return `about:blank#/extId=${extId}/id=${videoId}/mappertje=${ 350 | enableMappertje === true 351 | }`; 352 | }; 353 | 354 | const getVideoDocUrlForIframe = (videoId) => { 355 | return `javascript:this.location.href="${getVideoDocUrl(videoId)})";`; 356 | }; 357 | 358 | const getMultiviewDocUrl = () => { 359 | return `about:blank#/extId=${extId}/multiview=1/`; 360 | }; 361 | 362 | const changeWindowOffset = () => { 363 | xOffset += popupWidth; 364 | if (xOffset + popupWidth > screen.availWidth) { 365 | xOffset = screen.availLeft; 366 | yOffset += popupHeight; 367 | } 368 | if (yOffset + popupHeight > screen.availHeight) { 369 | xOffset = screen.availLeft; 370 | yOffset = screen.availTop; 371 | } 372 | }; 373 | 374 | const popOutVideo = (videoId, enableMappertje) => { 375 | if (enableMappertje) { 376 | var width = screen.availWidth; 377 | var height = screen.availHeight; 378 | var left = screen.availLeft; 379 | var top = screen.availTop; 380 | } else { 381 | var width = popupWidth; 382 | var height = popupHeight; 383 | var left = screen.availLeft + xOffset; 384 | var top = screen.availTop + yOffset; 385 | } 386 | 387 | const win = window.open( 388 | getVideoDocUrl(videoId, enableMappertje), 389 | videoId + (enableMappertje ? "mappertje" : ""), 390 | `status=no,menubar=no,width=${width},height=${height},left=${left},top=${top}` 391 | ); 392 | 393 | // We made a new pop-out window 394 | if (!windowAlreadyOpen(win) && !enableMappertje) { 395 | changeWindowOffset(); 396 | } 397 | }; 398 | 399 | const updateDependsOnMultiview = (e) => { 400 | document 401 | .querySelectorAll("#settings button.depends-on-multiview") 402 | .forEach((button) => { 403 | button.disabled = 404 | !jitsipop.multiviewWindow || 405 | jitsipop.multiviewWindow.closed || 406 | (e && e.type === "unload"); 407 | }); 408 | }; 409 | 410 | const makeMultiviewWindow = () => { 411 | // Don't focus on the multiviewWindow if already open 412 | if (!jitsipop.multiviewWindow || jitsipop.multiviewWindow.closed) { 413 | jitsipop.multiviewWindow = window.open( 414 | getMultiviewDocUrl(), 415 | "multiview", 416 | `status=no,menubar=no,width=${popupWidth},height=${popupHeight},left=${ 417 | screen.availLeft + xOffset 418 | },top=${screen.availTop + yOffset}` 419 | ); 420 | jitsipop.multiviewWindow.addEventListener( 421 | "unload", 422 | updateDependsOnMultiview 423 | ); 424 | changeWindowOffset(); 425 | updateDependsOnMultiview(); 426 | } 427 | }; 428 | 429 | const showMultiview = () => { 430 | if (jitsipop.multiviewWindow && !jitsipop.multiviewWindow.closed) { 431 | jitsipop.multiviewWindow.focus(); 432 | } else { 433 | makeMultiviewWindow(); 434 | } 435 | }; 436 | 437 | const toggleInMultiview = (videoId) => { 438 | makeMultiviewWindow(); 439 | // Toggle multiview selection 440 | if (multiviewSelection.has(videoId)) { 441 | multiviewSelection.delete(videoId); 442 | } else { 443 | multiviewSelection.add(videoId); 444 | } 445 | 446 | updateMultiviewWindow(); 447 | }; 448 | 449 | const addAllInMultiview = () => { 450 | for (let videoId of database.keys()) { 451 | multiviewSelection.add(videoId); 452 | } 453 | updateMultiviewWindow(); 454 | }; 455 | 456 | const removeAllFromMultiview = () => { 457 | multiviewSelection.clear(); 458 | updateMultiviewWindow(); 459 | }; 460 | 461 | const sidebarVideoWrappersOrder = (a, b) => { 462 | return a.order - b.order; 463 | }; 464 | 465 | const getEntriesByName = (displayName, status) => { 466 | // displayName is required, status optional 467 | if (!displayName) { 468 | return []; 469 | } 470 | 471 | return Array.from(database.values()).reduce((result, data) => { 472 | if (data.displayName !== displayName) { 473 | return result; 474 | } 475 | 476 | if ( 477 | !status || 478 | (status === "offline" && !data.online) || 479 | (status === "online" && data.online) 480 | ) { 481 | result.push(data); 482 | } 483 | 484 | return result; 485 | }, []); 486 | }; 487 | 488 | const updateMultiviewWindow = () => { 489 | if ( 490 | jitsipop.multiviewWindow && 491 | jitsipop.multiviewWindow.update && 492 | !jitsipop.multiviewWindow.closed 493 | ) { 494 | jitsipop.multiviewWindow.update(); 495 | } 496 | }; 497 | 498 | const updateContextbar = () => { 499 | const item = getItem(selectedVideoId); 500 | 501 | const contextbar = document.querySelector("#contextbar"); 502 | contextbar.querySelector("h4").innerText = formatDisplayName( 503 | item.displayName 504 | ); 505 | 506 | if (database.size > 1) { 507 | if (item.sidebarVideoWrapper) { 508 | contextbar 509 | .querySelectorAll( 510 | "[data-destination='move-top'], [data-destination='move-up']" 511 | ) 512 | .forEach((button) => { 513 | if (item.order > 1) { 514 | button.disabled = false; 515 | } else { 516 | button.disabled = true; 517 | } 518 | }); 519 | 520 | contextbar 521 | .querySelectorAll( 522 | "[data-destination='move-bottom'], [data-destination='move-down']" 523 | ) 524 | .forEach((button) => { 525 | if (item.order < database.size) { 526 | button.disabled = false; 527 | } else { 528 | button.disabled = true; 529 | } 530 | }); 531 | } 532 | } else { 533 | contextbar.querySelectorAll(".move-button").forEach((button) => { 534 | button.disabled = true; 535 | }); 536 | } 537 | 538 | const deleteButton = contextbar.querySelector(".delete-video"); 539 | deleteButton.disabled = item.online; 540 | }; 541 | 542 | const openContextbar = () => { 543 | document.documentElement.classList.add("show-context"); 544 | }; 545 | 546 | const closeContextbar = () => { 547 | document.documentElement.classList.remove("show-context"); 548 | }; 549 | 550 | const selectVideoInSidebar = (videoId, sidebarVideoWrapper) => { 551 | if (selectedVideoId === videoId) { 552 | // Deselect and close context bar 553 | sidebarVideoWrapper.classList.remove("selected"); 554 | closeContextbar(); 555 | selectedVideoId = null; 556 | } else { 557 | selectedVideoId = videoId; 558 | updateContextbar(); 559 | const sidebar = document.querySelector("#sidebar"); 560 | const previousSelected = sidebar.querySelector(".selected"); 561 | if (previousSelected) { 562 | previousSelected.classList.remove("selected"); 563 | } else { 564 | openContextbar(); 565 | } 566 | sidebarVideoWrapper.classList.add("selected"); 567 | } 568 | }; 569 | 570 | const applyNewOrder = (videoId, newOrder) => { 571 | const item = getItem(videoId); 572 | if (!item) { 573 | return; 574 | } 575 | 576 | if (newOrder < 1 || newOrder > database.size) { 577 | return; 578 | } 579 | 580 | const currentOrder = item.order; 581 | if (currentOrder === newOrder) { 582 | return; 583 | } 584 | 585 | if (newOrder > currentOrder) { 586 | for (let item of database.values()) { 587 | if (item.order > currentOrder && item.order <= newOrder) { 588 | item.order--; 589 | if (item.sidebarVideoWrapper) { 590 | item.sidebarVideoWrapper.style.order = item.order; 591 | } 592 | } 593 | } 594 | } else { 595 | for (let item of database.values()) { 596 | if (item.order >= newOrder && item.order < currentOrder) { 597 | item.order++; 598 | if (item.sidebarVideoWrapper) { 599 | item.sidebarVideoWrapper.style.order = item.order; 600 | } 601 | } 602 | } 603 | } 604 | 605 | item.order = newOrder; 606 | if (item.sidebarVideoWrapper) { 607 | item.sidebarVideoWrapper.style.order = item.order; 608 | } 609 | }; 610 | 611 | const displayNameWarning = (id, displayName) => { 612 | var message; 613 | if (!displayName) { 614 | message = "Please choose a name that nobody is using in this room."; 615 | } else if ( 616 | displayName === options.interfaceConfigOverwrite.DEFAULT_REMOTE_DISPLAY_NAME 617 | ) { 618 | message = `Please choose a name that nobody is using in this room, but don't use "${options.interfaceConfigOverwrite.DEFAULT_REMOTE_DISPLAY_NAME}".`; 619 | } else { 620 | var nameIsDuplicate = false; 621 | 622 | for (var [key, value] of Object.entries(api._participants)) { 623 | if (key === id) { 624 | continue; 625 | } 626 | if (value.displayName === displayName) { 627 | nameIsDuplicate = true; 628 | break; 629 | } 630 | } 631 | 632 | if (nameIsDuplicate) { 633 | message = `Everyone in the room needs to have a unique nickname. Could you please pick one that's not in use already?`; 634 | } else { 635 | return; 636 | } 637 | } 638 | 639 | // TODO: when multiple users have this extension installed, messages will come multiple times. 640 | // So negotiate which one will be the 'moderator' and who will send these messages. 641 | 642 | bc.postMessage({ displayNameWarning: { id: id, message: message } }); 643 | }; 644 | 645 | const videoOnlineHandler = (participantId) => { 646 | const participant = api._participants[participantId]; 647 | 648 | // The participant must already have left the conference... 649 | if (!participant) { 650 | return; 651 | } 652 | 653 | const sourceVideo = getParticipantVideo(participantId); 654 | 655 | if (!sourceVideo) { 656 | // Wait for sourceVideo to appear 657 | setTimeout(() => videoOnlineHandler(participantId), 1000); 658 | return; 659 | } 660 | const displayName = participant.displayName; 661 | const newData = { 662 | participantId: participantId, 663 | displayName: participant.displayName, 664 | online: true, 665 | }; 666 | 667 | // Search for existing wrapper which matches participantId 668 | var sidebarVideoWrapper; 669 | var videoId; 670 | var didReuseWrapper = false; 671 | 672 | const setVideoIdAndWrapper = (participantId) => { 673 | const item = getItemByParticipantId(participantId); 674 | if (item && item.sidebarVideoWrapper) { 675 | sidebarVideoWrapper = item.sidebarVideoWrapper; 676 | videoId = item.videoId; 677 | didReuseWrapper = true; 678 | } 679 | }; 680 | 681 | // When a user re-connects with the same participantId, 682 | // we can just reuse it's wrapper and update the database. 683 | // This will be the case when the local user reconnects after e.g. a dropped connection, 684 | // because we already swapped the participantId from old to new on videoConferenceJoined. 685 | setVideoIdAndWrapper(participantId); 686 | 687 | // Check if we can reuse an empty wrapper for same displayName 688 | if (!sidebarVideoWrapper) { 689 | const offlineEntries = getEntriesByName(displayName, "offline"); 690 | if (offlineEntries.length) { 691 | offlineEntries.sort(sidebarVideoWrappersOrder); 692 | 693 | // Get first empty wrapper 694 | const firstOfflineItem = offlineEntries.shift(); 695 | sidebarVideoWrapper = firstOfflineItem.sidebarVideoWrapper; 696 | if (sidebarVideoWrapper) { 697 | videoId = firstOfflineItem.videoId; 698 | didReuseWrapper = true; 699 | } 700 | } 701 | } 702 | 703 | // Make new video wrapper 704 | if (!sidebarVideoWrapper) { 705 | sidebarVideoWrapper = document.createElement("div"); 706 | sidebarVideoWrapper.innerHTML = 707 | ''; 708 | sidebarVideoWrapper.classList.add("video-wrapper"); 709 | videoId = videoIdCounter++; 710 | 711 | sidebarVideoWrapper.addEventListener("click", () => { 712 | // Use the fixed videoId, so we'll always open the same window when clicking this wrapper. 713 | selectVideoInSidebar(videoId, sidebarVideoWrapper); 714 | }); 715 | 716 | const targetFrame = document.createElement("iframe"); 717 | // Setting the src to a url with about:blank + hash doesn't trigger a load 718 | // when the iframe is (re)attached to the DOM, 719 | // but this javascript does evaluate each time and sets proper href, 720 | // so the inject.js content script will run. 721 | targetFrame.src = getVideoDocUrlForIframe(videoId); 722 | sidebarVideoWrapper.appendChild(targetFrame); 723 | 724 | const sidebar = document.querySelector("#sidebar"); 725 | sidebar.appendChild(sidebarVideoWrapper); 726 | 727 | // Init all other values for database item here 728 | newData.iframes = new Set(); 729 | newData.windows = new Set(); 730 | newData.order = database.size + 1; 731 | sidebarVideoWrapper.style.order = newData.order; 732 | } 733 | 734 | newData.videoId = videoId; 735 | newData.sidebarVideoWrapper = sidebarVideoWrapper; 736 | 737 | if (database.has(videoId)) { 738 | const oldData = database.get(videoId); 739 | // Merge in the new data. 740 | // This action does not mutate but sets it to a new object... 741 | database.set(videoId, { ...oldData, ...newData }); 742 | 743 | // TODO: didReuseWrapper boolean may be redundant to database.has(videoId) 744 | if (didReuseWrapper) { 745 | // Update all windows and iframes 746 | for (let win of new Set([...oldData.windows, ...oldData.iframes])) { 747 | if (typeof win.participantIdReplaceHandler === "function") { 748 | win.participantIdReplaceHandler(participantId); 749 | } 750 | } 751 | } 752 | } else { 753 | database.set(videoId, newData); 754 | } 755 | 756 | sidebarVideoWrapper.setAttribute( 757 | "data-displayname", 758 | formatDisplayName(displayName) 759 | ); 760 | sidebarVideoWrapper.classList.remove("offline"); 761 | 762 | if (selectedVideoId !== null) { 763 | updateContextbar(); 764 | } 765 | }; 766 | 767 | const videoOfflineHandler = (participantId) => { 768 | if (!participantId) { 769 | return; 770 | } 771 | 772 | const item = getItemByParticipantId(participantId); 773 | 774 | if (!item) { 775 | return; 776 | } 777 | 778 | if (item.sidebarVideoWrapper) { 779 | item.sidebarVideoWrapper.classList.add("offline"); 780 | } 781 | item.online = false; 782 | }; 783 | 784 | const suspendOrKickedHandler = () => { 785 | document.documentElement.classList.add("disconnected"); 786 | videoOfflineHandler(myUserID); 787 | 788 | // Make status icon show orange 789 | tryRuntimeSendMessage({ 790 | type: "videoConferenceConnecting", 791 | }); 792 | }; 793 | 794 | const moveSelectedWrapper = (destination) => { 795 | const item = getItem(selectedVideoId); 796 | if (!item) { 797 | return; 798 | } 799 | 800 | if (destination === "move-top") { 801 | applyNewOrder(selectedVideoId, 1); 802 | } else if (destination === "move-up") { 803 | applyNewOrder(selectedVideoId, item.order - 1); 804 | } else if (destination === "move-down") { 805 | applyNewOrder(selectedVideoId, item.order + 1); 806 | } else if (destination === "move-bottom") { 807 | applyNewOrder(selectedVideoId, database.size); 808 | } 809 | 810 | updateContextbar(); 811 | updateMultiviewWindow(); 812 | }; 813 | 814 | const setupContextbar = () => { 815 | const contextbar = document.querySelector("#contextbar"); 816 | 817 | contextbar.querySelector(".pop-out-button").addEventListener("click", (e) => { 818 | e.preventDefault(); 819 | popOutVideo(selectedVideoId); 820 | }); 821 | 822 | contextbar 823 | .querySelector(".mappertje-button") 824 | .addEventListener("click", (e) => { 825 | e.preventDefault(); 826 | popOutVideo(selectedVideoId, true); 827 | }); 828 | 829 | contextbar 830 | .querySelector(".multiview-button") 831 | .addEventListener("click", (e) => { 832 | e.preventDefault(); 833 | toggleInMultiview(selectedVideoId); 834 | }); 835 | 836 | contextbar.querySelectorAll(".move-button").forEach((element) => { 837 | element.addEventListener("click", (e) => { 838 | e.preventDefault(); 839 | moveSelectedWrapper(e.target.dataset.destination); 840 | }); 841 | }); 842 | 843 | contextbar.querySelector(".delete-video").addEventListener("click", (e) => { 844 | e.preventDefault(); 845 | removeOfflineItem(selectedVideoId); 846 | }); 847 | }; 848 | 849 | const connect = () => { 850 | document.documentElement.classList.remove("disconnected"); 851 | 852 | if (api) { 853 | const iframe = api.getIFrame(); 854 | iframe && iframe.remove(); 855 | } 856 | api = new JitsiMeetExternalAPI(window.location.hostname, options); 857 | jitsipop.api = api; 858 | 859 | document.getElementById( 860 | "invite-link" 861 | ).value = `https://jitsipop.tk/#/${window.location.hostname}/${options.roomName}`; 862 | 863 | api.executeCommand("subject", " "); 864 | 865 | // Hide filmStrip once on startup 866 | api.once("filmstripDisplayChanged", (e) => { 867 | if (e.enabled) { 868 | api.executeCommand("toggleFilmStrip"); 869 | } 870 | }); 871 | 872 | api.addEventListener("suspendDetected", suspendOrKickedHandler); 873 | 874 | api.addEventListener("participantKickedOut", (e) => { 875 | if (e.kicked.local) { 876 | suspendOrKickedHandler(); 877 | } 878 | }); 879 | 880 | api.addEventListener("videoConferenceLeft", () => { 881 | document.documentElement.classList.add("disconnected"); 882 | videoOfflineHandler(myUserID); 883 | 884 | tryRuntimeSendMessage({ 885 | type: "videoConferenceLeft", 886 | }); 887 | 888 | // Don't close window here, window will be gone when connection drops etc. 889 | // window.close(); 890 | }); 891 | 892 | api.addEventListener("videoConferenceJoined", (e) => { 893 | // When clicking the 'rejoin' button (not from this extension, but part of Jitsi Meet) 894 | // after a suspend, the connect() function isn't called again, so remove class here too. 895 | document.documentElement.classList.remove("disconnected"); 896 | 897 | const newUserID = e.id; 898 | const newDisplayName = e.displayName; 899 | 900 | if (myUserID) { 901 | const item = getItemByParticipantId(myUserID); 902 | if (item) { 903 | // Swap new participantId of local user, 904 | // e.g. when we reconnect after dropped internet connection 905 | item.participantId = newUserID; 906 | } 907 | } 908 | 909 | myDisplayName = newDisplayName; 910 | myUserID = newUserID; 911 | 912 | tryRuntimeSendMessage({ 913 | type: "videoConferenceJoined", 914 | }); 915 | 916 | videoOnlineHandler(newUserID, myDisplayName); 917 | 918 | // TODO: wait a little, then ask everyone if one of them is moderator. 919 | // If no moderator yet, start moderating and check display name of each participant. 920 | // From then on also directly handle name change and join events. 921 | 922 | api.executeCommands({ 923 | toggleFilmStrip: [], 924 | }); 925 | }); 926 | 927 | api.addEventListener("displayNameChange", (e) => { 928 | const displayName = e.displayname; 929 | const participantId = e.id; 930 | const item = getItemByParticipantId(participantId); 931 | 932 | if (item) { 933 | item.displayName = displayName; 934 | 935 | for (let win of new Set([...item.windows, ...item.iframes])) { 936 | if (typeof win.displayNameChangeHandler === "function") { 937 | win.displayNameChangeHandler(displayName); 938 | } 939 | } 940 | } 941 | 942 | // For local user 943 | if (participantId === myUserID) { 944 | myDisplayName = displayName; 945 | if ( 946 | displayName !== "" && 947 | displayName !== 948 | options.interfaceConfigOverwrite.DEFAULT_REMOTE_DISPLAY_NAME 949 | ) { 950 | // This displayName is fine... 951 | } else { 952 | // TODO: warn user, but don't reset displayName here 953 | // Could cause loops etc. 954 | // Also check if it's a unique name in the room. 955 | // api.executeCommand("displayName", myDisplayName); 956 | } 957 | } else { 958 | // For remote users 959 | displayNameWarning(participantId, displayName); 960 | } 961 | 962 | // Always update to current state 963 | const sidebarVideoWrapper = getSidebarVideoWrapperByParticipantId( 964 | participantId 965 | ); 966 | 967 | if (sidebarVideoWrapper) { 968 | sidebarVideoWrapper.setAttribute( 969 | "data-displayname", 970 | formatDisplayName(displayName) 971 | ); 972 | } 973 | 974 | if (item && item.videoId === selectedVideoId) { 975 | updateContextbar(); 976 | } 977 | }); 978 | 979 | api.addEventListener("participantJoined", (e) => { 980 | displayNameWarning(e.id, e.displayName); 981 | videoOnlineHandler(e.id, e.displayName); 982 | }); 983 | 984 | api.addEventListener("participantLeft", (e) => { 985 | // Don't delete from the database, only delete after we've removed the 986 | // offline participant from the sidebar and all its windows are closed 987 | videoOfflineHandler(e.id); 988 | 989 | if (selectedVideoId !== null) { 990 | updateContextbar(); 991 | } 992 | }); 993 | }; 994 | 995 | const setup = () => { 996 | // Unhide body now that all resources are loaded, to prevent unstyled content flash 997 | document.body.style.display = ""; 998 | 999 | document.getElementById("focus-multiview").onclick = showMultiview; 1000 | // TODO: disable addAllInMultiview and removeAllFromMultiview when multiview is closed, 1001 | // or when either of the two won't have any effect (already all removed or added) 1002 | document.getElementById("add-all-multiview").onclick = addAllInMultiview; 1003 | document.getElementById( 1004 | "remove-all-multiview" 1005 | ).onclick = removeAllFromMultiview; 1006 | 1007 | document.getElementById("close-all-pop-outs").onclick = () => 1008 | closeAllWindows("pop-out"); 1009 | document.getElementById("close-all-mappertjes").onclick = () => 1010 | closeAllWindows("mappertje"); 1011 | document.getElementById("focus-pop-outs").onclick = () => 1012 | focusAllWindows("pop-out"); 1013 | document.getElementById("focus-mappertjes").onclick = () => 1014 | focusAllWindows("mappertje"); 1015 | 1016 | document.getElementById("copy-invite-link-button").onclick = (e) => { 1017 | e.preventDefault(); 1018 | const copyText = document.getElementById("invite-link"); 1019 | copyText.select(); 1020 | copyText.setSelectionRange(0, 99999); 1021 | document.execCommand("copy"); 1022 | }; 1023 | 1024 | let radios = document.getElementsByName("multiviewLayout"); 1025 | 1026 | for (let radio of radios) { 1027 | radio.addEventListener("change", () => { 1028 | const layout = radio.id; 1029 | if (jitsipop.multiviewLayout !== layout) { 1030 | jitsipop.multiviewLayout = layout; 1031 | // Apply in multiview 1032 | jitsipop.multiviewWindow && 1033 | !jitsipop.multiviewWindow.closed && 1034 | jitsipop.multiviewWindow.reflow && 1035 | jitsipop.multiviewWindow.reflow(); 1036 | } 1037 | }); 1038 | } 1039 | 1040 | // TODO: setup menubar, for sound settings etc. 1041 | // TODO: dynamically set max-height for #settings-bar based on content height of selected setting 1042 | const settingsButtons = document.querySelectorAll("#tabs button"); 1043 | var selectedSetting, selectedSettingsContent; 1044 | settingsButtons.forEach((button) => { 1045 | const settingsContent = document.querySelector(`#settings .${button.id}`); 1046 | button.onclick = (e) => { 1047 | if (selectedSetting === button) { 1048 | selectedSetting.classList.remove("active"); 1049 | selectedSetting = null; 1050 | document.documentElement.classList.remove("settings-open"); 1051 | } else { 1052 | selectedSetting && selectedSetting.classList.remove("active"); 1053 | selectedSetting = button; 1054 | selectedSetting.classList.add("active"); 1055 | document.documentElement.classList.add("settings-open"); 1056 | } 1057 | 1058 | selectedSettingsContent && 1059 | selectedSettingsContent.classList.remove("active"); 1060 | settingsContent && settingsContent.classList.add("active"); 1061 | selectedSettingsContent = settingsContent; 1062 | }; 1063 | }); 1064 | // APP.conference._room.muteParticipant(participantId) 1065 | 1066 | setupContextbar(); 1067 | 1068 | const urlParams = new URLSearchParams( 1069 | "?" + location.hash.substring(2).replace(/\//g, "&") 1070 | ); 1071 | options.parentNode = document.querySelector("#meet"); 1072 | options.roomName = urlParams.get("roomName"); 1073 | 1074 | document.getElementById("reconnect").onclick = (e) => { 1075 | e.preventDefault(); 1076 | connect(); 1077 | }; 1078 | 1079 | connect(); 1080 | 1081 | window.onbeforeunload = (e) => { 1082 | // Ask for confirmation 1083 | e.preventDefault(); 1084 | e.returnValue = ""; 1085 | }; 1086 | 1087 | // TODO: maybe nice to keep the pop-out windows open on reload, 1088 | // but then the database and other state in here is reset... 1089 | // So would have to somehow have the pop-out reconnect. 1090 | // But we don't want the pop-outs to stay open when this window 1091 | // actually closes. 1092 | window.addEventListener("unload", unloadHandler); 1093 | }; 1094 | 1095 | // Expose API 1096 | window.jitsipop = jitsipop; 1097 | jitsipop.database = database; 1098 | jitsipop.mainWindow = window; 1099 | jitsipop.multiviewSelection = multiviewSelection; 1100 | jitsipop.getFormattedDisplayName = getFormattedDisplayName; 1101 | jitsipop.getParticipantId = getParticipantId; 1102 | jitsipop.getParticipantVideo = getParticipantVideo; 1103 | jitsipop.addOrDeleteVideo = addOrDeleteVideo; 1104 | jitsipop.getVideoDocUrlForIframe = getVideoDocUrlForIframe; 1105 | jitsipop.getItemOrder = getItemOrder; 1106 | jitsipop.getMappertjeState = getMappertjeState; 1107 | jitsipop.setMappertjeState = setMappertjeState; 1108 | 1109 | tryRuntimeSendMessage( 1110 | { 1111 | type: "mainWinLoad", 1112 | }, 1113 | (response) => { 1114 | options = response.options; 1115 | setup(); 1116 | } 1117 | ); 1118 | -------------------------------------------------------------------------------- /extension/src/inject/inject.js: -------------------------------------------------------------------------------- 1 | // This code only runs on pages from meet.jit.si, 8x8.vc and jitsi.riot.im, 2 | // or about:blank pages opened from those domains. 3 | 4 | const extId = chrome.runtime.id; 5 | 6 | // Used in both index.js and video.js 7 | const tryRuntimeSendMessage = (message, callback) => { 8 | try { 9 | chrome.runtime.sendMessage(message, callback); 10 | } catch (e) { 11 | if (e.message === "Extension context invalidated.") { 12 | // Can no longer communicate with background page, so close 13 | window.close(); 14 | } else { 15 | console.log(e); 16 | } 17 | } 18 | }; 19 | 20 | const LoadCSS = (cssURL) => { 21 | return new Promise((resolve) => { 22 | const link = document.createElement("link"); 23 | link.rel = "stylesheet"; 24 | link.href = cssURL; 25 | document.head.appendChild(link); 26 | 27 | link.onload = () => { 28 | resolve(); 29 | }; 30 | }); 31 | } 32 | 33 | const loadMain = async () => { 34 | const html = await fetch( 35 | chrome.runtime.getURL("src/inject/index.html") 36 | ).then((response) => response.text()); 37 | // Replace page contents with custom HTML 38 | document.documentElement.innerHTML = html; 39 | 40 | // Import CSS 41 | await LoadCSS(chrome.runtime.getURL("libs/bootstrap/css/bootstrap.min.css")); 42 | await LoadCSS( 43 | chrome.runtime.getURL("libs/fontawesome-free/css/fontawesome.min.css") 44 | ); 45 | await LoadCSS(chrome.runtime.getURL("libs/fontawesome-free/css/regular.css")); 46 | await LoadCSS(chrome.runtime.getURL("libs/fontawesome-free/css/solid.css")); 47 | // Import Jitsi Meet external API and custom script 48 | await import(`https://${window.location.hostname}/external_api.js`); 49 | await import(chrome.runtime.getURL("src/inject/index.js")); 50 | 51 | // There's no event to catch Extension unloading, 52 | // onbeforeunload etc. on the background page doesn't work. 53 | // So poll to check if we can still communicate with Extension. 54 | setInterval(() => { 55 | try { 56 | chrome.runtime.getURL(""); 57 | } catch (e) { 58 | if (e.message === "Extension context invalidated.") { 59 | // Means Extension has unloaded, close windows. 60 | window.onbeforeunload = null; 61 | window.close(); 62 | } else { 63 | console.log(e); 64 | } 65 | } 66 | }, 1000); 67 | }; 68 | 69 | const loadVideo = async () => { 70 | const html = await fetch( 71 | chrome.runtime.getURL("src/inject/video.html") 72 | ).then((response) => response.text()); 73 | document.documentElement.innerHTML = html; 74 | 75 | import(chrome.runtime.getURL("src/inject/video.js")); 76 | }; 77 | 78 | const loadMultiview = async () => { 79 | const html = await fetch( 80 | chrome.runtime.getURL("src/inject/multiview.html") 81 | ).then((response) => response.text()); 82 | document.documentElement.innerHTML = html; 83 | 84 | import(chrome.runtime.getURL("src/inject/multiview.js")); 85 | }; 86 | 87 | const loadJitsiFrame = () => { 88 | const inject = () => { 89 | var s = document.createElement("script"); 90 | s.src = chrome.runtime.getURL("src/inject/jitsiFrame.js"); 91 | s.onload = () => { 92 | s.remove(); 93 | }; 94 | 95 | document.head.appendChild(s); 96 | }; 97 | 98 | if ( 99 | document.readyState === "complete" || 100 | document.readyState === "interactive" 101 | ) { 102 | // call on next available tick 103 | setTimeout(inject, 1); 104 | } else { 105 | document.addEventListener("DOMContentLoaded", inject); 106 | } 107 | }; 108 | 109 | const hasExtHash = (win) => { 110 | return win.location.hash.startsWith("#/extId=" + extId); 111 | }; 112 | 113 | const isAboutBlank = (win) => { 114 | return win.location.href.startsWith("about:blank"); 115 | }; 116 | 117 | const isMultiview = (win) => { 118 | return win.location.hash.startsWith(`#/extId=${extId}/multiview=1`); 119 | }; 120 | 121 | const isCrossDomain = () => { 122 | try { 123 | return !Boolean(top.location.href); 124 | } catch (e) { 125 | return true; 126 | } 127 | }; 128 | 129 | const isIframe = () => { 130 | return self !== top; 131 | }; 132 | 133 | if (hasExtHash(window)) { 134 | const prepareDocument = (callback) => { 135 | document.documentElement.innerHTML = ""; 136 | if (isIframe()) { 137 | document.documentElement.classList.add("iframe"); 138 | document.documentElement.style.background = "transparent"; 139 | } else { 140 | document.documentElement.style.background = "black"; 141 | } 142 | if (typeof callback === "function") { 143 | callback(); 144 | } 145 | }; 146 | 147 | const preventLoadingAndEmpty = (callback) => { 148 | // Stop loading contents of the page, only the origin matters 149 | // so we can access iframes of the same origin. 150 | 151 | // Calling window.stop(); here would be the easiest. 152 | // Prevents loading further and prevents running all scripts 153 | // on the original page. 154 | // But it has unwanted side effects too, like no longer asking 155 | // for camera permission. 156 | // 157 | // As an alternative to window.stop() we could load a page 158 | // of desired origin, once, in the background script (perhaps only 159 | // after the browser action popup has been activated), and use it 160 | // to launch about:blank popups with desired origin. 161 | // But when this page in background script doesn't load, maybe internet 162 | // is down, then it's hidden to the user and we need to wait and retry. 163 | // At list with this method it immediately launches a visible 164 | // window with a "No Internet" warning. 165 | // window.stop(); 166 | 167 | // https://medium.com/snips-ai/how-to-block-third-party-scripts-with-a-few-lines-of-javascript-f0b08b9c4c0 168 | // https://stackoverflow.com/a/59518023 169 | 170 | const observer = new MutationObserver((mutations) => { 171 | mutations.forEach(({ addedNodes }) => { 172 | addedNodes.forEach((node) => { 173 | // Remove all new nodes from the DOM, including scripts, 174 | // even before the script runs. 175 | node.parentElement.removeChild(node); 176 | }); 177 | }); 178 | }); 179 | // Starts the monitoring 180 | observer.observe(document.documentElement, { 181 | childList: true, 182 | subtree: true, 183 | }); 184 | 185 | window.addEventListener("DOMContentLoaded", () => { 186 | // We now have a clean, empty page of desired origin, 187 | // and no foreign scripts have been run 188 | observer.disconnect(); 189 | if (typeof callback === "function") { 190 | callback(); 191 | } 192 | }); 193 | }; 194 | 195 | // Current page is to be processed by this extension 196 | if (isAboutBlank(window)) { 197 | if (isMultiview(window)) { 198 | // Make current page a multiview window 199 | prepareDocument(loadMultiview); 200 | } else { 201 | // Make current page a video window 202 | prepareDocument(loadVideo); 203 | } 204 | } else { 205 | // Make current page our main window 206 | prepareDocument(() => { 207 | preventLoadingAndEmpty(loadMain); 208 | }); 209 | } 210 | } else if ( 211 | isIframe() && 212 | !isCrossDomain() && 213 | hasExtHash(top.window) && 214 | !isAboutBlank(top.window) 215 | ) { 216 | // Jitsi iframe in the main window 217 | loadJitsiFrame(); 218 | } 219 | -------------------------------------------------------------------------------- /extension/src/inject/jitsiFrame.js: -------------------------------------------------------------------------------- 1 | // This script runs in page context, not as content script. 2 | // Be careful with the scope and API here, 3 | // use try catch 4 | 5 | // Override some styles, these selectors may stop working in the future... 6 | // Fortunately these styles aren't mission critical 7 | const style = document.createElement("style"); 8 | document.head.appendChild(style); 9 | style.sheet.insertRule( 10 | "body, .tOoji, #largeVideoContainer, .tile-view #largeVideoContainer {background: transparent !important; background-color: transparent !important;}" 11 | ); 12 | 13 | window.addEventListener("load", (event) => { 14 | // Fade in this frame 15 | const frameElement = window.frameElement; 16 | frameElement && (frameElement.style.opacity = 1); 17 | 18 | var selectedParticipants = new Set(); 19 | const bc = new BroadcastChannel("popout_jitsi_channel"); 20 | // TODO: maxVideoHeightToReceive could be based on the resolution 21 | // values defined in jitsiConfig.js (listen for a message on the 22 | // BroadcastChannel) 23 | const maxVideoHeightToReceive = 1080; 24 | 25 | // Check if 2 sets contain the same values 26 | const eqSet = (as, bs) => { 27 | if (as.size !== bs.size) return false; 28 | for (var a of as) if (!bs.has(a)) return false; 29 | return true; 30 | }; 31 | 32 | const generateUnusedKey = (suggestedKey, object) => { 33 | var i = 0; 34 | while (suggestedKey in object) { 35 | suggestedKey += i; 36 | i++; 37 | } 38 | return suggestedKey; 39 | }; 40 | 41 | const getIdsToApply = () => { 42 | // Make a new set without reference 43 | const idsToApply = new Set(selectedParticipants); 44 | try { 45 | // Always select the large video 46 | const largeVideo = APP.UI.getLargeVideo(); 47 | if (largeVideo && largeVideo.id) { 48 | // Add anyway, set won't have duplicates 49 | idsToApply.add(largeVideo.id); 50 | } 51 | } catch (e) { 52 | console.error(e); 53 | } 54 | 55 | return idsToApply; 56 | }; 57 | 58 | const patchMethods = () => { 59 | const originalsetReceiverVideoConstraintKey = generateUnusedKey( 60 | "setReceiverVideoConstraint", 61 | APP.conference._room 62 | ); 63 | const originalSelectParticipantsKey = generateUnusedKey( 64 | "selectParticipants", 65 | APP.conference._room 66 | ); 67 | // Back up original methods in the same object 68 | APP.conference._room[originalsetReceiverVideoConstraintKey] = 69 | APP.conference._room.setReceiverVideoConstraint; 70 | APP.conference._room[originalSelectParticipantsKey] = 71 | APP.conference._room.selectParticipants; 72 | 73 | APP.conference._room.setReceiverVideoConstraint = () => { 74 | APP.conference._room[originalsetReceiverVideoConstraintKey]( 75 | maxVideoHeightToReceive 76 | ); 77 | }; 78 | APP.conference._room.selectParticipants = () => { 79 | APP.conference._room[originalSelectParticipantsKey]( 80 | Array.from(getIdsToApply()) 81 | ); 82 | }; 83 | }; 84 | 85 | const applySelectedParticipants = () => { 86 | try { 87 | const idsToApply = getIdsToApply(); 88 | 89 | // Sets the maximum video size the local participant should 90 | // receive from selected remote participants. 91 | // To override the constraint made by the tile view. 92 | // https://jitsi.org/news/new-feature-brady-bunch-style-layout/ 93 | // But only send if the values have changed. 94 | 95 | if ( 96 | APP.conference._room.rtc._maxFrameHeight !== maxVideoHeightToReceive 97 | ) { 98 | APP.conference._room.setReceiverVideoConstraint( 99 | maxVideoHeightToReceive 100 | ); 101 | } 102 | 103 | if ( 104 | !eqSet(idsToApply, new Set(APP.conference._room.rtc._selectedEndpoints)) 105 | ) { 106 | APP.conference._room.selectParticipants(Array.from(idsToApply)); 107 | } 108 | } catch (e) { 109 | console.error(e); 110 | } 111 | }; 112 | 113 | const onApiReady = () => { 114 | patchMethods(); 115 | JitsiMeetJS.setLogLevel(JitsiMeetJS.logLevels.ERROR); 116 | 117 | bc.onmessage = (e) => { 118 | const data = e.data; 119 | if (data.select) { 120 | selectedParticipants.add(data.select); 121 | applySelectedParticipants(); 122 | } else if (data.deselect) { 123 | selectedParticipants.delete(data.deselect); 124 | applySelectedParticipants(); 125 | } else if (data.displayNameWarning) { 126 | try { 127 | APP.conference._room.sendPrivateTextMessage( 128 | data.displayNameWarning.id, 129 | data.displayNameWarning.message 130 | ); 131 | } catch (e) { 132 | console.error(e); 133 | } 134 | } 135 | }; 136 | 137 | // Also override by polling slowly, as backup 138 | setInterval(applySelectedParticipants, 5000); 139 | }; 140 | 141 | addEventListener("unload", () => { 142 | bc.close(); 143 | }); 144 | 145 | (function readyPoller() { 146 | try { 147 | if ( 148 | APP.conference._room.selectParticipants && 149 | APP.conference._room.setReceiverVideoConstraint 150 | ) { 151 | onApiReady(); 152 | } 153 | } catch (e) { 154 | console.log(e); 155 | setTimeout(readyPoller, 1000); 156 | } 157 | })(); 158 | }); 159 | -------------------------------------------------------------------------------- /extension/src/inject/multiview.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Jitsi Meet | Multiview 6 | 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /extension/src/inject/multiview.js: -------------------------------------------------------------------------------- 1 | // Assign jitsipop also to this window object, so iframes can access it 2 | const jitsipop = (window.jitsipop = window.opener.jitsipop); 3 | const mainWindow = jitsipop.mainWindow; 4 | var currentSelection = new Set(); 5 | var resizeTimer; 6 | 7 | // TODO: read these sizes from jitsiConfig.js, so they stay consistent 8 | const iframeWidth = 1280; 9 | const iframeHeight = 720; 10 | 11 | const parentPoller = () => { 12 | if (!opener || opener.closed) { 13 | window.close(); 14 | } 15 | }; 16 | 17 | const reflow = () => { 18 | const iframes = Array.from( 19 | document.querySelectorAll("iframe:not(.remove)") 20 | ).sort((a, b) => { 21 | return a.dataset.order - b.dataset.order; 22 | }); 23 | 24 | if (jitsipop.multiviewLayout === "layout-stack") { 25 | iframes.forEach((iframe) => { 26 | iframe.style.transform = `translate3d(-50%, -50%, 0) scale(1)`; 27 | iframe.style.width = "100vw"; 28 | iframe.style.height = "100vh"; 29 | iframe.style.mixBlendMode = "screen"; 30 | }); 31 | 32 | return; 33 | } 34 | 35 | const viewportWidth = getViewportWidth(); 36 | const viewportHeight = getViewportHeight(); 37 | const result = fitToContainer( 38 | iframes.length, 39 | viewportWidth, 40 | viewportHeight, 41 | iframeWidth, 42 | iframeHeight 43 | ); 44 | 45 | const gridWidth = result.ncols * result.itemWidth; 46 | const gridHeight = result.nrows * result.itemHeight; 47 | const xCenterCompensation = -gridWidth / 2; 48 | const yCenterCompensation = -gridHeight / 2; 49 | 50 | let r = 0, 51 | c = 0; 52 | 53 | iframes.forEach((iframe) => { 54 | 55 | iframe.style.width = iframeWidth + "px"; 56 | iframe.style.height = iframeHeight + "px"; 57 | iframe.style.mixBlendMode = ""; 58 | 59 | iframe.style.transform = `translate3d(${ 60 | c * result.itemWidth + xCenterCompensation 61 | }px, ${r * result.itemHeight + yCenterCompensation}px, 0) scale(${ 62 | result.itemWidth / iframeWidth 63 | })`; 64 | 65 | c++; 66 | 67 | if (c >= result.ncols) { 68 | c = 0; 69 | r++; 70 | } 71 | }); 72 | }; 73 | 74 | const getViewportWidth = () => { 75 | return Math.max(document.documentElement.clientWidth, window.innerWidth || 0); 76 | }; 77 | 78 | const getViewportHeight = () => { 79 | return Math.max( 80 | document.documentElement.clientHeight, 81 | window.innerHeight || 0 82 | ); 83 | }; 84 | 85 | // https://math.stackexchange.com/q/466198 86 | // https://stackoverflow.com/q/2476327 87 | const fitToContainer = ( 88 | n, 89 | containerWidth, 90 | containerHeight, 91 | itemWidth, 92 | itemHeight 93 | ) => { 94 | // We're not necessarily dealing with squares but rectangles (itemWidth x itemHeight), 95 | // temporarily compensate the containerWidth to handle as rectangles 96 | containerWidth = (containerWidth * itemHeight) / itemWidth; 97 | // Compute number of rows and columns, and cell size 98 | var ratio = containerWidth / containerHeight; 99 | var ncols_float = Math.sqrt(n * ratio); 100 | var nrows_float = n / ncols_float; 101 | 102 | // Find best option filling the whole height 103 | var nrows1 = Math.ceil(nrows_float); 104 | var ncols1 = Math.ceil(n / nrows1); 105 | while (nrows1 * ratio < ncols1) { 106 | nrows1++; 107 | ncols1 = Math.ceil(n / nrows1); 108 | } 109 | var cell_size1 = containerHeight / nrows1; 110 | 111 | // Find best option filling the whole width 112 | var ncols2 = Math.ceil(ncols_float); 113 | var nrows2 = Math.ceil(n / ncols2); 114 | while (ncols2 < nrows2 * ratio) { 115 | ncols2++; 116 | nrows2 = Math.ceil(n / ncols2); 117 | } 118 | var cell_size2 = containerWidth / ncols2; 119 | 120 | // Find the best values 121 | var nrows, ncols, cell_size; 122 | if (cell_size1 < cell_size2) { 123 | nrows = nrows2; 124 | ncols = ncols2; 125 | cell_size = cell_size2; 126 | } else { 127 | nrows = nrows1; 128 | ncols = ncols1; 129 | cell_size = cell_size1; 130 | } 131 | 132 | // Undo compensation on width, to make squares into desired ratio 133 | itemWidth = (cell_size * itemWidth) / itemHeight; 134 | itemHeight = cell_size; 135 | return { 136 | nrows: nrows || 1, 137 | ncols: ncols || 1, 138 | itemWidth: itemWidth || containerWidth, 139 | itemHeight: itemHeight || containerHeight, 140 | }; 141 | }; 142 | 143 | const transitionEndHandler = (e) => { 144 | if (e.propertyName === "opacity") { 145 | if ( 146 | e.target.classList.contains("remove") && 147 | window.getComputedStyle(e.target).opacity === "0" 148 | ) { 149 | e.target.remove(); 150 | } 151 | } 152 | }; 153 | 154 | const update = () => { 155 | const newSet = jitsipop.multiviewSelection; 156 | 157 | newSet.forEach((videoId) => { 158 | var targetFrame; 159 | if (!currentSelection.has(videoId)) { 160 | targetFrame = document.createElement("iframe"); 161 | targetFrame.id = "video" + videoId; 162 | 163 | // Wait until video starts playing, 164 | // video.js will add class "firstplay" to the targetFrame 165 | // when the video starts playing for the first time. 166 | // We'll fade in the iframe when this class is added. 167 | 168 | targetFrame.src = jitsipop.getVideoDocUrlForIframe(videoId); 169 | targetFrame.style.width = iframeWidth + "px"; 170 | targetFrame.style.height = iframeHeight + "px"; 171 | // Prepend so it will appear from underneath all the other frames 172 | document.body.prepend(targetFrame); 173 | } else { 174 | targetFrame = document.getElementById("video" + videoId); 175 | } 176 | 177 | targetFrame.dataset.order = jitsipop.getItemOrder(videoId); 178 | }); 179 | 180 | currentSelection.forEach((videoId) => { 181 | if (!newSet.has(videoId)) { 182 | const targetFrame = document.getElementById("video" + videoId); 183 | if (targetFrame) { 184 | targetFrame.removeAttribute("id"); 185 | if (window.getComputedStyle(targetFrame).opacity === "0") { 186 | // Not faded in, remove immediately 187 | targetFrame.remove(); 188 | } else { 189 | // Fade out first, then remove 190 | targetFrame.addEventListener("transitionend", transitionEndHandler); 191 | if (targetFrame.classList.contains("firstplay")) { 192 | targetFrame.classList.replace("firstplay", "remove"); 193 | } else { 194 | targetFrame.classList.add("remove"); 195 | } 196 | } 197 | } 198 | } 199 | }); 200 | 201 | currentSelection = new Set(newSet); 202 | reflow(); 203 | }; 204 | 205 | const setup = () => { 206 | // Allow calling these objects from mainWindow 207 | window.update = update; 208 | window.reflow = reflow; 209 | 210 | window.onbeforeunload = () => { 211 | if (mainWindow && !mainWindow.closed) { 212 | // Reset to no selected videos for multiview. 213 | // Do it in onbeforeunload, so the selection is already cleared 214 | // when the iframes in this window unload and call jitsipop.addOrDeleteVideo(). 215 | // Otherwise we'll continue to receive high resolution for these videos, 216 | // even after multiview is closed. 217 | jitsipop.multiviewSelection.clear(); 218 | } 219 | }; 220 | 221 | window.onunload = () => { 222 | // Remove this window from the array of open pop-outs in the main window 223 | if (mainWindow && !mainWindow.closed) { 224 | jitsipop.multiviewWindow = null; 225 | } 226 | }; 227 | 228 | setInterval(parentPoller, 1000); 229 | 230 | if (mainWindow && !mainWindow.closed) { 231 | jitsipop.multiviewWindow = window; 232 | } 233 | 234 | // Debounce resize 235 | window.addEventListener("resize", () => { 236 | clearTimeout(resizeTimer); 237 | resizeTimer = setTimeout(() => { 238 | reflow(); 239 | }, 50); 240 | }); 241 | 242 | update(); 243 | 244 | document.documentElement.addEventListener("keyup", (event) => { 245 | // Number 13 is the "Enter" key on the keyboard, 246 | // or "Escape" key pressed in full screen 247 | if ( 248 | event.keyCode === 13 || 249 | (event.keyCode === 27 && window.innerHeight == window.screen.height) 250 | ) { 251 | // Cancel the default action, if needed 252 | event.preventDefault(); 253 | tryRuntimeSendMessage({ 254 | type: "toggleFullScreen", 255 | }); 256 | } 257 | }); 258 | }; 259 | 260 | setup(); 261 | -------------------------------------------------------------------------------- /extension/src/inject/video.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /extension/src/inject/video.js: -------------------------------------------------------------------------------- 1 | const inIframe = self !== top; 2 | const inPopup = window.opener !== null && window.opener !== window; 3 | 4 | const jitsipop = (window.jitsipop = inPopup 5 | ? window.opener.jitsipop 6 | : window.parent.jitsipop); 7 | 8 | const mainWindow = jitsipop.mainWindow; 9 | 10 | var sourceVid, 11 | targetVid, 12 | displayName, 13 | participantId, 14 | videoId, 15 | enableMappertje, 16 | myMapper; 17 | 18 | const handleFirstPlay = () => { 19 | targetVid.removeEventListener("play", handleFirstPlay); 20 | const frameElement = window.frameElement; 21 | frameElement && frameElement.classList.add("firstplay"); 22 | }; 23 | 24 | // TODO: currently can't call iframe.contentWindow.setup(config); 25 | // inside mappertje (in modules/mapper/index.js) because main.js 26 | // is added via a script tag, and executes in a JavaScript page context, 27 | // not in the context of this extension... 28 | 29 | const syncSource = () => { 30 | if (enableMappertje) 31 | if (myMapper) { 32 | if ( 33 | myMapper && 34 | myMapper.getStream && 35 | myMapper.getStream() !== sourceVid.srcObject 36 | ) { 37 | myMapper.setStream(sourceVid.srcObject); 38 | } 39 | } else { 40 | jitsipop.mapper({ 41 | stream: sourceVid.srcObject, 42 | targetElement: document.body, 43 | initialState: jitsipop.getMappertjeState(videoId), 44 | readyHandler: (newMapper) => { 45 | myMapper = newMapper; 46 | 47 | const unloadHandler = () => { 48 | jitsipop.setMappertjeState(videoId, myMapper.getCurrentState()); 49 | }; 50 | 51 | myMapper.addEventListener("unload", unloadHandler); 52 | }, 53 | }); 54 | } 55 | else if (targetVid.srcObject !== sourceVid.srcObject) { 56 | targetVid.srcObject = sourceVid.srcObject; 57 | } 58 | }; 59 | 60 | const syncVideo = () => { 61 | try { 62 | if (inPopup && (!mainWindow || mainWindow.closed)) { 63 | window.close(); 64 | } 65 | } catch (e) { 66 | // In case it's a left over window and we can't access mainWindow 67 | window.close(); 68 | } 69 | 70 | const newVid = jitsipop.getParticipantVideo(participantId); 71 | if (!newVid) { 72 | return; 73 | } 74 | 75 | if (sourceVid !== newVid) { 76 | if (sourceVid) { 77 | sourceVid.removeEventListener("loadedmetadata", syncSource); 78 | sourceVid.removeEventListener("pause", syncVideo); 79 | sourceVid.removeEventListener("ended", syncVideo); 80 | sourceVid.removeEventListener("suspend", syncVideo); 81 | } 82 | 83 | sourceVid = newVid; 84 | sourceVid.addEventListener("loadedmetadata", syncSource); 85 | sourceVid.addEventListener("pause", syncVideo); 86 | sourceVid.addEventListener("ended", syncVideo); 87 | sourceVid.addEventListener("suspend", syncVideo); 88 | } 89 | 90 | // Could have been in the if block above, 91 | // but I'd like to sync each time just to be sure 92 | syncSource(); 93 | }; 94 | 95 | const setTitle = () => { 96 | document.title = 97 | "Jitsi Meet | " + displayName + (enableMappertje ? " | Mappertje" : ""); 98 | }; 99 | 100 | const displayNameChangeHandler = (newDisplayName) => { 101 | displayName = newDisplayName; 102 | setTitle(); 103 | }; 104 | 105 | const participantIdReplaceHandler = (newParticipantId) => { 106 | participantId = newParticipantId; 107 | update(); 108 | }; 109 | 110 | const update = () => { 111 | participantId = jitsipop.getParticipantId(videoId); 112 | displayName = jitsipop.getFormattedDisplayName(participantId); 113 | setTitle(); 114 | syncVideo(); 115 | }; 116 | 117 | const hashToUrlParams = (hash) => { 118 | return new URLSearchParams("?" + hash.substring(2).replace(/\//g, "&")); 119 | }; 120 | 121 | const setup = () => { 122 | // Allow calling these functions from mainWindow 123 | window.displayNameChangeHandler = displayNameChangeHandler; 124 | window.participantIdReplaceHandler = participantIdReplaceHandler; 125 | 126 | const urlParams = hashToUrlParams(location.hash); 127 | videoId = urlParams.get("id"); 128 | 129 | if (videoId === null) { 130 | return; 131 | } 132 | 133 | enableMappertje = urlParams.get("mappertje") === "true"; 134 | videoId = parseInt(videoId); 135 | 136 | window.onunload = () => { 137 | // Remove this window from the array of open pop-outs in the main window 138 | if (mainWindow && !mainWindow.closed) { 139 | jitsipop.addOrDeleteVideo( 140 | videoId, 141 | window, 142 | inIframe ? "iframe" : "window", 143 | "delete" 144 | ); 145 | } 146 | }; 147 | 148 | if (!enableMappertje) { 149 | targetVid = document.createElement("video"); 150 | targetVid.muted = true; 151 | targetVid.autoplay = true; 152 | 153 | if (inIframe) { 154 | document.documentElement.classList.add("iframe"); 155 | targetVid.addEventListener("play", handleFirstPlay); 156 | } 157 | 158 | document.body.appendChild(targetVid); 159 | } 160 | 161 | update(); 162 | 163 | // Keep source and target in sync 164 | setInterval(syncVideo, 1000); 165 | 166 | if (inPopup) { 167 | if (mainWindow && !mainWindow.closed) { 168 | jitsipop.addOrDeleteVideo(videoId, window, "window", "add"); 169 | } 170 | 171 | tryRuntimeSendMessage({ 172 | type: "videoWinLoad", 173 | }); 174 | 175 | document.documentElement.addEventListener("keyup", (event) => { 176 | // Number 13 is the "Enter" key on the keyboard, 177 | // or "Escape" key pressed in full screen 178 | if ( 179 | event.keyCode === 13 || 180 | (event.keyCode === 27 && window.innerHeight == window.screen.height) 181 | ) { 182 | // Cancel the default action, if needed 183 | event.preventDefault(); 184 | tryRuntimeSendMessage({ 185 | type: "toggleFullScreen", 186 | }); 187 | } 188 | }); 189 | } else if (inIframe) { 190 | if (mainWindow && !mainWindow.closed) { 191 | jitsipop.addOrDeleteVideo(videoId, window, "iframe", "add"); 192 | } 193 | } 194 | }; 195 | 196 | if (inIframe || inPopup) { 197 | setup(); 198 | } 199 | -------------------------------------------------------------------------------- /icon.psd: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jip-Hop/jitsi-pop/d34ab3b92ce6b5a8302e0f40bb31e5db83741b42/icon.psd -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 11 | Jitsi Meet 12 | 39 | 40 | 41 | 42 |

43 | Download the Pop-out Jitsi Meet extension from the 44 | Chrome Web Store. 48 |

49 | 50 | 187 | 188 | 189 | -------------------------------------------------------------------------------- /screenshots/1-1280x800.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jip-Hop/jitsi-pop/d34ab3b92ce6b5a8302e0f40bb31e5db83741b42/screenshots/1-1280x800.png -------------------------------------------------------------------------------- /screenshots/1-crop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jip-Hop/jitsi-pop/d34ab3b92ce6b5a8302e0f40bb31e5db83741b42/screenshots/1-crop.png -------------------------------------------------------------------------------- /screenshots/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jip-Hop/jitsi-pop/d34ab3b92ce6b5a8302e0f40bb31e5db83741b42/screenshots/1.png -------------------------------------------------------------------------------- /screenshots/2-1280x800.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jip-Hop/jitsi-pop/d34ab3b92ce6b5a8302e0f40bb31e5db83741b42/screenshots/2-1280x800.jpg -------------------------------------------------------------------------------- /screenshots/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jip-Hop/jitsi-pop/d34ab3b92ce6b5a8302e0f40bb31e5db83741b42/screenshots/2.jpg -------------------------------------------------------------------------------- /screenshots/3-1280x800.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jip-Hop/jitsi-pop/d34ab3b92ce6b5a8302e0f40bb31e5db83741b42/screenshots/3-1280x800.jpg -------------------------------------------------------------------------------- /screenshots/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jip-Hop/jitsi-pop/d34ab3b92ce6b5a8302e0f40bb31e5db83741b42/screenshots/3.jpg --------------------------------------------------------------------------------