TL;DR: Avatar and nickname can now be changed, Extension now on Firefox, Performance improvements, bugfixes, etc.
Since the start of 2019, we’ve been working hard on developing new features and improving the styling of twoseven.xyz. While some of these features will go unnoticed by the end-user, they are nonetheless important technical milestones. We will list out all of the updates, describe why they were important and if applicable, how they will impact you, the user.
Avatar and nickname can now be modified!
If you’ve read some of our older posts, you’ll already know that we coded TwoSeven as a means to watch content with loved ones and friends. Therefore, we assumed that people knew each other’s email addresses and were OK with sharing them; even if said email accounts were created in middle school and as embarassing as [email protected] (my current email account). Boy, were we wrong! Recently, due to some changes made to Rabb.it, we had a large number of users try out TwoSeven and got a lot of complaints, some about how they didn’t like their avatar, a lot about how they detested having their email username as their nickname.
You voiced your opinions and made a compelling case. We listened and put in the work necessary to enable you to change your nicknames and avatars 🙂.
TwoSeven extension now available on Firefox
The TwoSeven extension has been successfully deployed on Chrome since 2016. We attempted to publish the extension on Firefox as well, but our application was constantly rejected. Their feedback, particularly Rob Wu‘s was extremely useful to us since we’d never written a WebExtension before, but it also felt like we were constantly chasing a moving target that was always just beyond our reach. An example of this was when we were rejected with one comment stating
Your add-on includes a Javascript library file that doesn’t match any versions known to us. We require all add-ons to use unmodified release versions.
This, when we used commands like wget https://cdnjs.cloudflare.com/ajax/libs/jquery/2.x.x/jquery.min.js to get the libraries we wanted 😐. Nevertheless, I’m pleased to say that two years later, Mozilla seems to have gotten rid of their human reviewers thus enabling us to get our extension approved! 🥳🎉.
Much to our dismay, it turns out that the WebExtensions API is not yet a standard. As a result, we had to tweak several complex parts of the extension to make it work on both, Chrome and Firefox. The fact that Firefox will not allow passing objects via Events between the extension (content script) and the website was a particularly frustrating pain point. Instead, CustomEvent objects had to be modified to send across data as strings rather than objects, and we use a lot of events. Somehow, encoding the exact same information as a string is deemed safe whereas sending it as an object is considered a security risk.
As a consequence of all this, you may find yourself running into an occasional bug. Please do report these if possible so that we can fix them for you as well as others.
One such bug that we are aware of (and suffer from) is the fact that the login window will not close automatically while logging into the extension on Firefox. However, if you simply hit the ESC key on your keyboard, the window will close instantly and you will be logged in. We’ve reported this bug and we’re waiting on a solution.
Ability to change audio/video inputs
Among the exodus of people from rabb.it, a group of videocasters reached out to us requesting the ability to change webcam inputs. They stated that this capability would enable them to use TwoSeven as part of their videocasts. I’m guessing they would use TwoSeven to synchronize video playback among the multiple participants in the videocast. Initially, we had some reservations about this, since Operating Systems (OS), specifically Windows, works by allowing users to set the default input and output as part of the OS and then providing applications access to these defaults. But as I thought about it more, I realized that such a capability would be necessary on smartphones to allow users to switch between their front and rear cameras. That settled it. We were going to figure out how to allow users to switch their audio/video streams and implement it.
In this update, once you provide the webcam and microphone permissions, a settings icon will appear on your webcam video. Clicking this will bring up a modal where you will be able to change your audio and video inputs. In a later update, we plan to also include the ability to change your output. This should allow you to use a bluetooth speaker or a TV as your speakers.
Migrated to Vue CLI 3
For the longest time (since 2017) we’ve been lingering on the older Vue CLI due to no easy way to upgrade to the newer, spunkier vue-cli v3. I was also new to the process of bundling Javascript, having never been exposed to webpack or rollup.js and the like. This meant that a lot of the webpack config was constructed on a trial-and-error basis and thus considered extremely fragile. Naturally, any modification to the same was met with heavy resistance from my end. At the start of this year, I embarked on a side-project of mine which involved writing webpack configs from scratch, and relatively complex ones at that given that I was trying to load dynamic components to try and minimize the size of the library. I gained sufficient confidence during this endeavor, enough to try and deal with the migration to Vue CLI 3.
The first step was ensuring that the build succeeds and that our search engine optimizations (SEO) weren’t hampered in any way. The last thing you want is to have an updated website with awesome features that wont be indexed by search engines because your build process broke the pages meant for search engines to crawl. Since our entire website is rendered using a Javascript framework, we use the excellent prerender-spa-plugin for generating pages that can be crawled by search engines. Next, we ensured that all our static assets were being copied over correctly. While we were at it, we also split up our webpack bundle into multiple chunks, reducing the landing page size by more than 80%. Libraries like the YouTube Javascript API, Vimeo API, hls.js are instead deferred to when the user enters a room.
Moving to Vue CLI 3 also gave us a few other benefits as well:
- Promise of easy upgrade unlike vue-cli2 -> vue-cli3
- Ability to inject new plugins without setting up project from scratch
- End-to-end Cypress-based testing
- A production build targeted at modern browsers (
--modern)
Upgraded materialize-css to v1.0.0
materialize-css, our CSS framework had also matured a great deal during this time. We were on v0.100.2 for over two years while they began working on their first major release. The biggest change with this realease is the removal of the jquery dependency. This motivated us to get rid of our jquery dependency and a few other dependencies as well. Specifically, we replaced almost all our icons/fonts with material-design-icons and it’s companion vue-material-design-icons. This meant getting rid of FontAwesome and Typicons, which when combined with all the other dependencies we eliminated, led to an overall reduction of ~270KB, which is pretty significant.